/* Gorinno — Retro-Pixel-Look, keine externen Fonts/Bilder.
   Logische Spielfeldgröße 960×540, skalierungs­fähig über CSS. */

:root{
  --bg0:#171331;
  --bg1:#221b44;
  --ink:#f7f3e8;
  --ink-dim:#cfc6e6;
  --panel:#2a2350;
  --panel-edge:#4a3f85;
  --accent:#ffd23f;     /* Bananen-Gelb */
  --accent2:#ff8c42;    /* Orange (Explosion/Akzente) */
  --good:#5ec96b;
  --bad:#ff5e5e;
  --focus:#fff;
}

*{ box-sizing:border-box; }

html,body{
  margin:0; padding:0;
  background:linear-gradient(180deg, var(--bg0) 0%, var(--bg1) 100%);
  color:var(--ink);
  font-family:"Trebuchet MS","Segoe UI",system-ui,sans-serif;
  min-height:100%;
}

body{
  display:flex; flex-direction:column; align-items:center;
  padding:12px;
}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.app{
  width:100%; max-width:1020px;
  display:flex; flex-direction:column; gap:10px;
}

.title{
  font-size:clamp(28px,5vw,44px);
  letter-spacing:3px;
  text-align:center;
  margin:4px 0 0;
  color:var(--accent);
  text-shadow:3px 3px 0 #00000055;
}

/* ---------- Spielfeld ---------- */
.stage{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  max-height:70vh;
  background:#10102a;
  border:4px solid var(--panel-edge);
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 8px 24px #00000066 inset, 0 6px 18px #00000055;
  image-rendering:pixelated;
}
#cv{
  width:100%; height:100%;
  display:block;
  image-rendering:pixelated;
  outline:none;
}
#cv:focus-visible{
  outline:3px solid var(--focus);
  outline-offset:-3px;
}

.hud{
  position:absolute; top:8px; left:8px; right:8px;
  display:flex; gap:8px; flex-wrap:wrap;
  pointer-events:none;
}
.hud-chip{
  background:#000000aa;
  border:2px solid var(--panel-edge);
  padding:3px 10px;
  border-radius:8px;
  font-size:clamp(11px,1.6vw,14px);
}

/* ---------- Steuerung ---------- */
.controls{
  display:flex; flex-direction:column; gap:10px;
  background:var(--panel);
  border:2px solid var(--panel-edge);
  border-radius:12px;
  padding:12px;
}

.slider-row{ display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center; }
.slider-row label{ min-width:120px; font-size:15px; }
.slider-row output{ font-weight:700; color:var(--accent); }

input[type="range"]{
  -webkit-appearance:none; appearance:none;
  width:100%; height:34px;
  background:transparent;
  cursor:pointer;
}
input[type="range"]::-webkit-slider-runnable-track{
  height:12px; border-radius:6px;
  background:linear-gradient(90deg,#5a4fa8,#39306e);
  border:1px solid var(--panel-edge);
}
input[type="range"]::-moz-range-track{
  height:12px; border-radius:6px;
  background:linear-gradient(90deg,#5a4fa8,#39306e);
  border:1px solid var(--panel-edge);
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:28px; height:28px; margin-top:-9px;
  border-radius:6px;
  background:var(--accent);
  border:3px solid #3a2d00;
  box-shadow:0 0 0 3px #ffffff22;
}
input[type="range"]::-moz-range-thumb{
  width:24px; height:24px;
  border-radius:6px;
  background:var(--accent);
  border:3px solid #3a2d00;
}
input[type="range"]:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; }

input[type="number"]{
  width:80px; height:38px;
  background:#171331;
  color:var(--ink);
  border:2px solid var(--panel-edge);
  border-radius:8px;
  font-size:16px;
  text-align:center;
}
input[type="number"]:focus-visible{ outline:3px solid var(--focus); }

/* ---------- Buttons ---------- */
.btn{
  font:inherit; font-weight:700;
  color:var(--ink);
  background:#3a3170;
  border:2px solid var(--panel-edge);
  border-radius:10px;
  padding:12px 18px;
  min-height:48px;
  cursor:pointer;
  transition:transform .06s ease, filter .1s ease;
}
.btn:hover{ filter:brightness(1.12); }
.btn:active{ transform:translateY(2px); }
.btn:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; }
.btn:disabled{ opacity:.45; cursor:not-allowed; }
.btn-primary{
  background:var(--accent);
  color:#2b2000;
  border-color:#7a5c00;
}
#throwBtn{
  font-size:clamp(18px,2.4vw,24px);
  letter-spacing:2px;
  padding:14px 40px;
  min-height:56px;
}
.btn-ghost{ background:transparent; }

/* ---------- Scoreboard ---------- */
.scoreboard{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center; gap:10px;
  background:var(--panel);
  border:2px solid var(--panel-edge);
  border-radius:12px;
  padding:10px 14px;
}
.score{ display:flex; flex-direction:column; gap:2px; min-width:90px; }
.score-name{ font-weight:700; font-size:16px; }
.score-pts{ font-size:34px; font-weight:800; color:var(--accent); }
.score.active-turn{ outline:2px solid var(--good); border-radius:8px; }
.score-target{
  font-size:13px; color:var(--ink-dim);
  background:#00000044; padding:4px 10px; border-radius:8px;
}

/* ---------- Meldung ---------- */
.message-bar{
  min-height:24px; margin:0; padding:6px 10px;
  text-align:center; font-size:15px;
  color:var(--ink-dim);
}
.message-bar.error{ color:var(--bad); }
.message-bar.success{ color:var(--good); }

/* ---------- Panels (Menüs) ---------- */
.panel{
  position:fixed; inset:0;
  z-index:20;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:14px;
  background:#171331ee;
  padding:20px;
  overflow:auto;
}
.panel[hidden]{ display:none; }

.menu-title{
  font-size:clamp(40px,8vw,68px);
  letter-spacing:6px;
  color:var(--accent);
  text-shadow:4px 4px 0 #00000066;
  margin:0;
}
.menu-sub{ color:var(--ink-dim); margin:0 0 10px; }

.menu-actions{
  display:flex; flex-direction:column; gap:12px;
  width:min(340px,90vw);
}
.menu-actions .btn{ font-size:18px; }

.form{
  display:flex; flex-direction:column; gap:10px;
  width:min(360px,90vw);
}
.form label{ font-size:15px; }
.form input[type="text"], .form input[type="number"], .form select{
  height:44px;
  background:#171331;
  color:var(--ink);
  border:2px solid var(--panel-edge);
  border-radius:8px;
  padding:0 10px;
  font-size:16px;
  width:100%;
}
.form .code-input{
  letter-spacing:8px;
  text-transform:uppercase;
  text-align:center;
  font-size:20px;
}
.field-error{ color:var(--bad); font-size:14px; margin:0; min-height:1em; }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }

.panel-actions{
  display:flex; gap:10px; flex-wrap:wrap; justify-content:center;
  margin-top:8px;
}
.hint{ color:var(--ink-dim); font-size:13px; margin:4px 0; }

/* Tabs */
.tabs{ display:flex; gap:10px; width:min(420px,90vw); }
.tabs .btn{ flex:1; }
[role="tab"][aria-selected="true"]{
  background:var(--accent); color:#2b2000; border-color:#7a5c00;
}

.code-big{
  font-size:clamp(34px,7vw,54px);
  letter-spacing:10px;
  color:var(--accent);
  background:#00000066;
  border:2px dashed var(--panel-edge);
  border-radius:12px;
  padding:10px 24px;
  margin:0;
  word-break:break-all;
  text-align:center;
}
.code-sub{ color:var(--ink-dim); text-align:center; max-width:420px; margin:0; }

.info-body{
  width:min(560px,92vw);
  background:#00000033;
  border-radius:10px;
  padding:14px 18px;
  line-height:1.6;
  font-size:15px;
}
.error-text{ color:var(--bad); font-size:16px; text-align:center; max-width:480px; }

/* ---------- Responsive: sehr schmal ---------- */
@media (max-width:520px){
  body{ padding:8px; }
  .slider-row{ grid-template-columns:1fr; gap:6px; }
  .slider-row label{ min-width:0; }
  .slider-row output{ align-self:flex-end; }
  input[type="number"]{ width:70px; }
  .score-pts{ font-size:26px; }
  .form label{ font-size:14px; }
}

/* ---------- Reduzierte Bewegung ---------- */
@media (prefers-reduced-motion: reduce){
  .btn{ transition:none; }
  .btn:active{ transform:none; }
}

    /* (Raumpasswort-Zeile entfernt — Beitritt nur per Raumcode) */
    .hint-soft { font-size: .9em; opacity: .8; }