/* Externe Playtest-App – ruhige, klare, barrierearme Oberfläche. Responsiv (Mobile/Desktop). */
:root{
  --bg:#14100c; --panel:#1e1712; --panel2:#241b14; --line:#3a2c20;
  --text:#f3e7d3; --muted:#b9a889; --accent:#e0ad52; --accent-ink:#20150b;
  --good:#72e28f; --bad:#ff7d6b; --focus:#7fb4ff;
  --radius:14px; --tap:44px;
}
*{box-sizing:border-box}
/* Robust: das hidden-Attribut MUSS jede display-Regel (z. B. .modal{display:flex}) schlagen,
   sonst erscheinen Overlays/Modals trotz hidden. Gilt für alle Overlays, Screens und Dialoge. */
[hidden]{display:none !important}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--text);font:16px/1.5 system-ui,Segoe UI,Roboto,sans-serif;overflow-x:hidden}
.skip-link{position:absolute;left:-999px;top:0;background:var(--accent);color:var(--accent-ink);padding:8px 12px;z-index:50;border-radius:0 0 8px 0}
.skip-link:focus{left:0}

.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;background:var(--panel);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.brand{font-weight:700;color:var(--accent);font-size:15px}
.progress-wrap{min-width:150px;flex:1;max-width:340px}
.progress-text{font-size:13px;color:var(--muted);margin-bottom:4px;text-align:right}
.progress-bar{height:8px;background:#0f0b08;border:1px solid var(--line);border-radius:99px;overflow:hidden}
.progress-bar>span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),#f2cf83);transition:width .3s ease}

.wrap{max-width:1180px;margin:0 auto;padding:18px 16px 60px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:22px;margin:0 auto;max-width:720px}
.screen h1{font-size:24px;margin:.1em 0 .5em}
.lead{color:var(--muted);font-size:17px}
.hint{color:var(--muted);font-size:13px}
.req{color:var(--accent);font-size:.85em}
.err{color:var(--bad);font-weight:600}

.field{display:block;margin:14px 0}
.field .label{display:block;font-size:14px;color:var(--muted);margin-bottom:6px}
input[type=text],textarea,select{width:100%;background:var(--panel2);color:var(--text);border:1px solid var(--line);border-radius:10px;padding:11px 12px;font:inherit;min-height:var(--tap)}
textarea{min-height:64px;resize:vertical}
.readonly{display:inline-block;background:#0f0b08;border:1px dashed var(--line);border-radius:8px;padding:8px 12px;color:var(--accent);font-family:ui-monospace,monospace}

.btn{appearance:none;cursor:pointer;font:inherit;font-weight:600;min-height:var(--tap);padding:10px 18px;border-radius:11px;border:1px solid var(--line);background:var(--panel2);color:var(--text)}
.btn:hover{border-color:var(--accent)}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn.ghost{background:transparent}
.btn.danger{border-color:#7a3a30;color:#ffb3a5}
.btn.big{width:100%;font-size:17px;margin-top:16px;padding:14px}
.btn.small{min-height:36px;padding:6px 12px;font-size:14px}
.row{display:flex;gap:10px;flex-wrap:wrap}
.row .btn{flex:1;min-width:140px}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}

.resume-box{background:var(--panel2);border:1px solid var(--accent);border-radius:12px;padding:14px;margin:16px 0}

/* Spiel-Layout: Board bleibt sichtbar; Bewertung erscheint daneben (Desktop) / darunter (Mobile). */
.game-layout{display:flex;gap:22px;align-items:flex-start}
.board-col{flex:1 1 auto;min-width:0;max-width:720px;margin:0 auto}
.rating-col{flex:0 0 380px}
.level-head{display:flex;flex-direction:column;gap:2px}
.section-name{color:var(--muted);font-size:13px;text-transform:uppercase;letter-spacing:.05em}
.level-head h1{margin:0;font-size:22px}
.objective{color:var(--muted);margin:.2em 0 .7em}
.board-frame{position:relative;background:linear-gradient(180deg,#241610,#120c08);border:1px solid var(--line);border-radius:16px;padding:10px}
canvas#board{display:block;width:100%;height:auto;aspect-ratio:1/1;touch-action:none;border-radius:10px}
.solved-badge{position:absolute;top:16px;right:16px;background:var(--good);color:#0c2414;font-weight:700;padding:6px 12px;border-radius:99px;box-shadow:0 4px 14px rgba(0,0,0,.4)}
.game-controls{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.game-controls .btn{flex:1;min-width:130px}
.badge{display:inline-flex;align-items:center;background:var(--panel2);border:1px solid var(--line);border-radius:99px;padding:8px 14px;color:var(--muted);font-size:14px}
.tiny-hint{color:var(--muted);font-size:12px;margin-top:8px;text-align:center}

/* Werkzeugleiste */
.toolbar{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0}
.tool-btn{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:104px;min-height:var(--tap);padding:8px 12px;border:1px solid var(--line);border-radius:12px;background:var(--panel2);color:var(--text);cursor:grab;touch-action:none}
.tool-btn .tool-icon{font-size:22px;line-height:1}
.tool-btn .tool-name{font-weight:700;font-size:14px}
.tool-btn .tool-count{font-size:12px;color:var(--muted)}
.tool-btn.selected{border-color:var(--accent);background:#2c2116;box-shadow:0 0 0 2px rgba(224,173,82,.35)}
.tool-btn:hover:not(:disabled){border-color:var(--accent)}
.tool-btn:disabled{opacity:.45;cursor:not-allowed}
.drag-ghost{position:fixed;z-index:80;width:50px;height:50px;border-radius:50%;display:none;align-items:center;justify-content:center;background:radial-gradient(circle,#7d6037,#2b1c12 70%);border:2px solid #edca73;box-shadow:0 10px 25px #000,0 0 18px rgba(237,202,115,.45);font-size:26px;color:#eaf7fb;pointer-events:none;transform:translate(-50%,-50%)}
.drag-ghost.show{display:flex}

.intro-banner{background:var(--panel2);border:1px solid var(--accent);border-radius:12px;padding:14px 16px;margin-bottom:14px}
.intro-banner h2{margin:.1em 0 .3em;font-size:18px;color:var(--accent)}
.intro-banner p{margin:0 0 10px}

/* Bewertungspanel */
.rating-col{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.rating-inner h2{margin:.1em 0 .3em;font-size:19px}
.rate-group{border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin:12px 0}
.rate-group legend{padding:0 6px;color:var(--muted);font-size:14px}
.rate-options{display:flex;flex-direction:column;gap:6px}
.rate-option{display:flex;align-items:center;gap:10px;min-height:var(--tap);padding:6px 8px;border:1px solid var(--line);border-radius:10px;cursor:pointer;background:var(--panel2)}
.rate-option:hover{border-color:var(--accent)}
.rate-option input{width:20px;height:20px;flex:0 0 auto;accent-color:var(--accent)}
.rate-option.checked{border-color:var(--accent);background:#2c2116}
.rate-option .rate-text{font-size:15px}

.submit-status{margin:14px 0;padding:12px;border-radius:10px;border:1px solid var(--line);background:var(--panel2)}
.submit-status.ok{border-color:var(--good)}
.submit-status.fail{border-color:var(--bad)}

/* Modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;padding:16px;z-index:40}
.modal-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:22px;max-width:460px;width:100%}
.stuck-questions{margin:12px 0}

.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:var(--panel2);border:1px solid var(--accent);color:var(--text);padding:10px 18px;border-radius:99px;z-index:60;box-shadow:0 6px 20px rgba(0,0,0,.5)}

.sheet-toggle{display:none}

/* Mobile / schmale Viewports: Board oben, Bewertung als Bottom-Sheet – Board bleibt sichtbar. */
@media (max-width:900px){
  .game-layout{flex-direction:column}
  .rating-col{flex:none;width:100%;position:sticky;bottom:0;max-height:62vh;overflow:auto;border-radius:16px 16px 0 0;box-shadow:0 -8px 24px rgba(0,0,0,.5)}
  .rating-col.minimized .rating-inner{display:none}
  .sheet-toggle{display:block;width:100%;min-height:var(--tap);background:var(--panel2);border:none;border-bottom:1px solid var(--line);color:var(--accent);font-weight:700;cursor:pointer}
  .board-col{max-width:none}
  /* Mobile: Werkzeugleiste als horizontal scrollbares Tray (Board bleibt gut nutzbar). */
  .toolbar{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px}
  .tool-btn{min-width:112px}
}
@media (max-width:520px){
  .wrap{padding:12px 10px 48px}
  .card{padding:16px}
  .row .btn,.game-controls .btn{min-width:100%}
}

/* Fehler nicht nur über Farbe: Fehlermeldungen tragen Text + Symbol. */
.err::before{content:"⚠ "}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}