/* ---------- Farb- & Layout-Variablen (hier zentral anpassbar) ---------- */
  :root{
    --bg:#14110d; --panel:#1d1810; --panel-2:#241e15; --line:#3a3020;
    --gold:#c9a24b; --gold-dim:#8a6f34; --text:#ece4d2; --muted:#a2957c;
    --tile-ground:#48586a; --tile-ground-top:#5a6b7e;
    --tile-platform:#8f959e; --tile-platform-top:#adb2bb;
    --tile-path:#584636; --tile-blocker:#241f16; --tile-enemy:#7d2a2a;
    --cell:60px; --tilt:46deg; --radius:8px;
  }
  *{box-sizing:border-box}
  html,body{margin:0}
  body{
    background:var(--bg); color:var(--text);
    font-family:"Inter",system-ui,-apple-system,sans-serif;
    line-height:1.5; -webkit-font-smoothing:antialiased;
    min-height:100vh;
  }
  h1,h2,h3{font-family:"Cinzel",Georgia,serif; font-weight:600; letter-spacing:.02em; margin:0}
  a{color:var(--gold)}

  /* ---------- Kopfzeile ---------- */
  header{
    display:flex; align-items:center; gap:18px; flex-wrap:wrap;
    padding:14px 20px; border-bottom:1px solid var(--line); background:var(--panel);
  }
  header h1{font-size:20px; color:var(--gold)}
  header h1 small{display:block; font-family:"Inter",sans-serif; font-weight:400; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
  .grow{flex:1}
  .segmented{display:inline-flex; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
  .segmented button{
    background:transparent; color:var(--muted); border:0; padding:8px 14px;
    font:inherit; font-size:13px; cursor:pointer; transition:background .15s,color .15s;
  }
  .segmented button[aria-pressed="true"]{background:var(--gold); color:#1a1509; font-weight:600}
  .segmented button:hover:not([aria-pressed="true"]){color:var(--text)}

  /* ---------- Grundlayout ---------- */
  .layout{display:flex; align-items:flex-start; gap:0}
  aside{
    width:320px; flex:none; padding:18px 20px; border-right:1px solid var(--line);
    background:var(--panel); align-self:stretch; min-height:calc(100vh - 55px);
  }
  main{flex:1; padding:26px 20px; min-width:0; display:flex; flex-direction:column; align-items:center; gap:18px}
  @media(max-width:860px){
    .layout{flex-direction:column}
    aside{width:100%; min-height:0; border-right:0; border-bottom:1px solid var(--line)}
  }

  /* ---------- Panel-Bausteine ---------- */
  .block{margin-bottom:22px}
  .block > .lbl{font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:8px}
  label{font-size:13px; color:var(--muted); display:block; margin-bottom:4px}
  input[type=text], select{
    width:100%; background:var(--panel-2); color:var(--text); border:1px solid var(--line);
    border-radius:6px; padding:8px 10px; font:inherit; font-size:14px;
  }
  input[type=range]{width:100%; accent-color:var(--gold)}
  .row{display:flex; gap:10px}
  .row > *{flex:1}
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
    background:var(--panel-2); color:var(--text); border:1px solid var(--line);
    border-radius:6px; padding:9px 12px; font:inherit; font-size:13px; cursor:pointer;
    transition:border-color .15s, background .15s; width:100%;
  }
  .btn:hover{border-color:var(--gold-dim)}
  .btn.gold{background:var(--gold); color:#1a1509; border-color:var(--gold); font-weight:600}
  .btn.gold:hover{background:#d8b25c}
  .btn.slim{width:auto; padding:7px 10px}
  .hint{font-size:12px; color:var(--muted); line-height:1.5}

  /* ---------- Helden-Auswahl (Roster) ---------- */
  .roster{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; max-height:260px; overflow:auto; padding-right:4px}
  .hero-chip{
    position:relative; aspect-ratio:1; border-radius:50%; border:2px solid var(--line);
    background:var(--panel-2); cursor:pointer; overflow:hidden; display:flex; align-items:center; justify-content:center;
    font-weight:600; font-size:15px; color:var(--gold); background-size:cover; background-position:center;
  }
  .hero-chip:hover{border-color:var(--gold-dim)}
  .hero-chip[aria-pressed="true"]{border-color:var(--gold); box-shadow:0 0 0 2px rgba(201,162,75,.35)}
  .hero-chip .del-hero{position:absolute; top:0; right:0; background:rgba(0,0,0,.6); color:#fff; border:0; width:18px; height:18px; font-size:12px; line-height:1; cursor:pointer; display:none; border-radius:0 0 0 6px}
  .hero-chip:hover .del-hero{display:block}

  /* ---------- Spielfeld ---------- */
  .board-frame{
    position:relative;
    display:flex; align-items:center; justify-content:center;
    width:100%; max-width:980px; min-height:540px;
    background:radial-gradient(120% 120% at 50% 0%, #221b12 0%, #17130d 70%);
    border:1px solid var(--line); border-radius:14px; padding:34px 26px;
    perspective:1100px; overflow:auto; margin:0 auto;
  }
  .board-scaler{position:relative; z-index:1; transform-style:preserve-3d; transition:transform .4s ease}
  .board-frame.has-ref .board-scaler{opacity:.55}
  /* Kalibrier-Modus: Bild fest, Raster frei über die vier Ecken verzerrbar */
  .board-frame.calibrating{display:block; overflow:visible}
  .board-frame.calibrating .board-scaler{position:absolute; left:0; top:0; transition:none}
  .board-frame.calibrating .board{transform-origin:0 0}
  .calib-handles{position:absolute; inset:0; z-index:3; display:none; pointer-events:none}
  .board-frame.calibrating .calib-handles{display:block}
  /* Planer-Perspektive: aufrechte Helden-Marker über dem Areal-Bild */
  .persp-layer{position:absolute; inset:0; z-index:2; display:none; pointer-events:none}
  .ptoken{position:absolute; transform:translate(-50%,-50%)}
  .ptoken-arrowwrap{position:absolute; inset:0}
  .ptoken-tri{position:absolute; left:50%; transform:translateX(-50%); width:0; height:0}
  .ptoken-portrait{position:absolute; inset:0; border-radius:50%; border:2px solid var(--gold);
    background:#2a2216 center/cover no-repeat; color:var(--gold);
    display:flex; align-items:center; justify-content:center; font-weight:600;
    box-shadow:0 3px 8px rgba(0,0,0,.6)}
  .handle{position:absolute; pointer-events:auto; width:26px; height:26px; margin:-13px 0 0 -13px; border-radius:50%;
    background:rgba(201,162,75,.92); border:2px solid #14100a; cursor:grab; touch-action:none;
    display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:#14100a;
    box-shadow:0 2px 6px rgba(0,0,0,.5)}
  .handle:active{cursor:grabbing}
  .board{
    position:relative; display:grid; gap:5px; transform-style:preserve-3d; margin:0 auto;
    grid-auto-rows:var(--cell);
  }
  .perspective .board-scaler{transform:rotateX(var(--tilt))}

  .cell{
    position:relative; border-radius:6px; background:transparent;
  }
  .cell.t-b{background:var(--tile-ground); border-top:3px solid var(--tile-ground-top)}
  .cell.t-p{background:var(--tile-platform); border-top:3px solid var(--tile-platform-top)}
  .cell.t-w{background:var(--tile-path); background-image:repeating-linear-gradient(45deg, rgba(0,0,0,.15) 0 6px, transparent 6px 12px)}
  .cell.t-x{background:var(--tile-blocker); border:1px solid #38301f; display:flex; align-items:center; justify-content:center; color:#5a4f38}
  .cell.t-x::after{content:"\2716"; font-size:16px}
  .cell.t-e{background:var(--tile-enemy); display:flex; align-items:center; justify-content:center}
  .cell.t-e::after{content:""; width:42%; height:42%; border:2px solid rgba(255,255,255,.55); border-radius:50%}
  .cell.placeable{cursor:pointer}
  .cell.placeable:hover{outline:2px solid var(--gold); outline-offset:-2px}
  .editing .cell{cursor:crosshair}

  /* Helden-Token auf dem Feld */
  .token{position:absolute; inset:0; z-index:2}
  .token .portrait{
    position:absolute; left:50%; top:50%; width:74%; aspect-ratio:1; border-radius:50%;
    transform:translate(-50%,-50%); background-size:cover; background-position:center;
    border:2px solid var(--gold); background-color:#2a2216; color:var(--gold);
    display:flex; align-items:center; justify-content:center; font-weight:600; font-size:14px;
    box-shadow:0 2px 6px rgba(0,0,0,.5);
  }
  .perspective .token .portrait{transform:translate(-50%,-50%) rotateX(calc(-1 * var(--tilt))) translateZ(16px)}
  .token .arrow-wrap{position:absolute; inset:0; transition:transform .2s ease}
  .token .arrow{
    position:absolute; left:50%; top:-10px; transform:translateX(-50%);
    width:0; height:0; border-left:12px solid transparent; border-right:12px solid transparent;
    border-bottom:24px solid #f00;
  }
  .token .del{
    position:absolute; right:-6px; top:-6px; z-index:3; width:18px; height:18px; border-radius:50%;
    background:#7a1f1f; color:#fff; border:1px solid #4a1212; font-size:11px; line-height:1; cursor:pointer;
    display:none; align-items:center; justify-content:center;
  }
  .token:hover .del{display:flex}

  /* Referenz-Bild im Editor – bleibt flach (wird NICHT mitgekippt) */
  .ref-layer{position:absolute; inset:0; z-index:0; display:none; pointer-events:none; background-size:contain; background-repeat:no-repeat; background-position:center}

  .legend{display:flex; flex-wrap:wrap; gap:14px; font-size:12px; color:var(--muted); justify-content:center}
  .legend span{display:flex; align-items:center; gap:6px}
  .sw{width:14px; height:14px; border-radius:3px; display:inline-block}

  .share-out{width:100%; background:var(--panel-2); border:1px solid var(--line); color:var(--gold); border-radius:6px; padding:8px 10px; font-size:12px; word-break:break-all; max-height:74px; overflow:auto}
  .toast{position:fixed; bottom:20px; left:50%; transform:translateX(-50%); background:var(--gold); color:#1a1509; padding:10px 18px; border-radius:8px; font-weight:600; font-size:13px; opacity:0; transition:opacity .3s; pointer-events:none; z-index:50}
  .toast.show{opacity:1}
  .modal{position:fixed; inset:0; background:rgba(0,0,0,.72); display:flex; align-items:center; justify-content:center; z-index:60; padding:20px}
  .modal .box{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:20px; max-width:min(92vw,560px); max-height:90vh; overflow:auto}
  .modal h3{color:var(--gold); margin-bottom:14px}
  .modal img{max-width:100%; border-radius:8px; display:block; margin:0 auto 12px; background:#0e0b07}
  .modal .meta{font-size:12px; color:var(--muted); text-align:center; margin-bottom:14px}
  .modal .actions{display:flex; gap:10px; flex-wrap:wrap}
  .modal .actions .btn{width:auto; flex:1; min-width:110px}
  .hidden{display:none !important}
  .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
  :focus-visible{outline:2px solid var(--gold); outline-offset:2px}
  @media(prefers-reduced-motion:reduce){*{transition:none !important}}