/*
 * TCG Keeper
 * Copyright (c) Mario Löser. Alle Rechte vorbehalten.
 * Dieses Skript und der gesamte Quellcode von TCG Keeper sind geistiges
 * Eigentum von Mario Löser und dürfen ohne ausdrückliche
 * Zustimmung nicht ohne diesen Hinweis weiterverwendet oder verbreitet
 * werden.
 */
/*
 * Kartenecken und verschiebbare Kartengroßansicht (20.10.2026).
 *  1. Kartengroßansicht (card.php #lightboxScrim, Kachel-Zoom #tileZoomScrim):
 *     Bild in .lightbox-panel-img → am Desktop verschiebbares Fenster über
 *     pcwindow.js, auf Handy/Tablet und ohne JavaScript wie bisher vollflächig.
 *  2. html.pc-cardcorners (Seitenanpassung → Kartenbilder (Ecken), „Anzeige“):
 *     kartengetreue Eckrundung. Echte Karte 63 × 88 mm mit 3 mm Ecken →
 *     waagrecht 4,76 % der Breite, senkrecht 3,41 % der Höhe.
 *  3. Fenster „Ecken bereinigen“ (includes/img_clean.php, assets/imgclean.js).
 */
:root{ --card-corner-radius: 4.76% / 3.41%; }

/* ---- 1. Kartengroßansicht -------------------------------------------- */
/* Ohne Fenster-Modus: das Panel ist unsichtbar, das Bild sieht aus wie vorher. */
.lightbox-panel.lightbox-panel-img{ background:none; padding:0; box-shadow:none; max-width:none; max-height:none; overflow:visible; border-radius:0; }
/* Fenster-Modus (Desktop): Breite frei ziehbar, Höhe folgt dem Bild. */
html.pcwin-on .lightbox-img-scrim .pcwin-panel{ resize:horizontal; min-width:220px; min-height:0; }
html.pcwin-on .lightbox-img-scrim .pcwin-body{ padding:10px; background:var(--paper-sunken); }
html.pcwin-on .lightbox-img-scrim .pcwin-body img{ width:100%; height:auto; max-width:none; max-height:none; display:block; box-shadow:none; border-radius:10px; }

/* ---- 2. Kartengetreue Ecken in der Anzeige ---------------------------- */
html.pc-cardcorners .lightbox-img-scrim img,
html.pc-cardcorners.pcwin-on .lightbox-img-scrim .pcwin-body img{ border-radius:var(--card-corner-radius); }
html.pc-cardcorners .card-detail-imgbox .img-wrap:not(.vh-img-valuable):not(.img-wrap-placeholder){ border-radius:var(--card-corner-radius); background:transparent; }
html.pc-cardcorners .card-detail-imgbox .img-wrap:not(.img-wrap-placeholder) img{ border-radius:var(--card-corner-radius); }
html.pc-cardcorners .card-tile .thumb-wrap img:not(.img-placeholder){ border-radius:var(--card-corner-radius); }

/* ---- 3. Fenster „Ecken bereinigen“ ------------------------------------ */
.imgclean-panel{ width:min(92vw,720px); }
.imgclean-sub{ margin:-6px 0 10px; color:var(--ink-soft); font-size:13px; }
.imgclean-compare{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.imgclean-compare figure{ margin:0; display:flex; flex-direction:column; gap:6px; min-width:0; }
.imgclean-compare figcaption{ font-size:12px; font-weight:600; color:var(--ink-soft); }
/* Schachbrett, damit durchsichtige Ecken sichtbar werden. */
.imgclean-stage{ position:relative; border:1px solid var(--line); border-radius:10px; padding:10px; min-height:160px; display:flex; align-items:center; justify-content:center;
  background-color:#d8d8de; background-image:linear-gradient(45deg,#b9b9c2 25%,transparent 25%),linear-gradient(-45deg,#b9b9c2 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#b9b9c2 75%),linear-gradient(-45deg,transparent 75%,#b9b9c2 75%);
  background-size:16px 16px; background-position:0 0,0 8px,8px -8px,-8px 0; }
.imgclean-scrim .imgclean-stage img{ max-width:100%; max-height:min(42vh,420px); width:auto; height:auto; border-radius:0; box-shadow:none; display:block; }
.imgclean-busy{ position:absolute; inset:auto 8px 8px auto; background:var(--paper-raised); color:var(--ink); border:1px solid var(--line); border-radius:999px; padding:3px 10px; font-size:12px; }
.imgclean-info{ list-style:none; margin:10px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.imgclean-info li{ font-size:12px; background:var(--paper-sunken); border:1px solid var(--line); border-radius:999px; padding:3px 10px; }
.imgclean-opts{ display:grid; grid-template-columns:1fr 1fr; gap:8px 14px; margin-top:12px; font-size:13px; }
.imgclean-check{ display:flex; gap:8px; align-items:flex-start; grid-column:span 2; cursor:pointer; }
.imgclean-field{ display:flex; flex-direction:column; gap:4px; }
.imgclean-field .form-input{ padding:6px 8px; font-size:13px; }
.imgclean-hint{ font-size:12px; color:var(--ink-faint); margin:10px 0 0; }
.imgclean-msg{ margin:10px 0 0; padding:8px 12px; border-radius:8px; font-size:13px; }
.imgclean-msg.info{ background:var(--accent-soft); color:var(--accent); }
.imgclean-msg.success{ background:var(--good-soft); color:var(--good); }
.imgclean-msg.error{ background:var(--danger-soft); color:var(--danger); }
.imgclean-actions{ margin-top:12px; }
/* Knöpfe immer erreichbar, auch wenn das Fenster scrollt. */
.imgclean-panel .imgclean-actions{ position:sticky; bottom:-18px; background:var(--paper-raised); padding:10px 0 8px; border-top:1px solid var(--line); z-index:1; }
.imgclean-upload-check{ display:flex; flex-wrap:wrap; gap:4px 8px; align-items:center; margin-top:10px; font-size:14px; cursor:pointer; }
.imgclean-upload-check .form-hint{ flex-basis:100%; margin:0; }
@media (max-width:640px){
  /* Vorher/Nachher bleiben nebeneinander — so lässt sich direkt vergleichen. */
  .imgclean-compare{ gap:8px; }
  .imgclean-stage{ padding:6px; min-height:120px; }
  .imgclean-opts{ grid-template-columns:1fr; }
  .imgclean-check{ grid-column:auto; }
  .imgclean-scrim .imgclean-stage img{ max-height:32vh; }
}