/* Gator Run – Arcade-Ansicht: Spielfeld-Canvas füllt den Bildschirm, Menü und Game Over als HTML-Overlays.
   Bewusst eine einzige dunkle „Nachtspiel“-Optik. Die UI ist rot/weiß (Designsystem ohne Gold),
   Gold kommt nur noch in der Spielgrafik vor (game.js). */

@font-face{font-family:"Graduate";src:url("./fonts/graduate-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url("./fonts/barlow-condensed-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url("./fonts/barlow-condensed-700.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url("./fonts/barlow-condensed-800.woff2") format("woff2");font-weight:800;font-display:swap}

:root{
  --night:#141413;      /* Nachthimmel im Stadion */
  --charcoal:#1c1b1a;   /* Vereins-Dunkelgrau */
  --line:#3a3835;
  --red:#991921;        /* Dunkelrot (Primärfarbe) */
  --red2:#BB1F1D;       /* Hellrot (aktiv/Hervorhebung) */
  --red-shadow:#5e0f14;
  --chalk:#f3efe4;      /* Kreideweiß */
  --label:#d9d4c7;      /* Labels auf Dunkel */
  --muted:#9a968b;
  --display:"Graduate","Rockwell","Georgia",serif;
  --body:"Barlow Condensed","Arial Narrow","Helvetica Neue",Arial,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--night);color:var(--chalk);font-family:var(--body);overflow:hidden;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
#app{position:relative;height:100%;width:100%;overflow:hidden}
canvas{display:block;width:100%;height:100%}
[hidden]{display:none!important}

.hud{position:absolute;top:calc(env(safe-area-inset-top,0px) + 10px);left:max(16px,env(safe-area-inset-left,0px));right:max(16px,env(safe-area-inset-right,0px));display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none;font-variant-numeric:tabular-nums}
.hud .big{font-family:var(--display);font-size:1.6rem;line-height:1;color:var(--chalk);text-shadow:0 2px 0 #000}
.hud .lbl{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--label);font-weight:700;text-shadow:0 1px 0 #000}
.hud .right{text-align:right}

.overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:safe center;gap:18px;
  padding-top:calc(env(safe-area-inset-top,0px) + 24px);padding-bottom:calc(env(safe-area-inset-bottom,0px) + 24px);
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  background:linear-gradient(180deg,rgba(20,20,19,.72),rgba(20,20,19,.92));overflow-y:auto}
.logoimg{width:min(62vw,260px);height:auto;filter:drop-shadow(0 4px 0 rgba(0,0,0,.6))}
.logo{font-family:var(--display);font-size:clamp(2.4rem,11vw,4.2rem);line-height:.9;text-align:center;color:var(--chalk);text-shadow:0 4px 0 var(--red);letter-spacing:.02em;text-wrap:balance}
.logo small{display:block;font-family:var(--body);font-weight:700;font-size:.95rem;letter-spacing:.3em;color:var(--chalk);text-transform:uppercase;margin-top:8px;text-shadow:none}
.pick{font-size:.85rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-weight:700}
.pick.tight{margin-top:-12px}
.roster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;width:min(100%,520px)}
.card{background:var(--charcoal);border:2px solid #34322e;border-radius:10px;padding:10px 6px 12px;display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--chalk);font-family:var(--body);cursor:pointer;min-width:0}
.card canvas{width:64px;height:76px}
.card b{font-size:1.1rem;font-weight:800;letter-spacing:.02em;line-height:1.05;text-align:center}
.card span{font-size:.82rem;color:var(--muted);text-align:center;line-height:1.2}
.card[aria-pressed="true"]{border-color:var(--red2);box-shadow:0 0 0 3px rgba(187,31,29,.35)}
.card:focus-visible,.btn:focus-visible,.back:focus-visible,input:focus-visible{outline:3px solid var(--chalk);outline-offset:3px}
.btn{font-family:var(--display);font-size:1.3rem;background:var(--red);color:#fff;border:0;border-radius:999px;padding:14px 36px;cursor:pointer;box-shadow:0 4px 0 var(--red-shadow)}
.btn:hover{background:var(--red2)}
.btn:active{transform:translateY(2px);box-shadow:0 2px 0 var(--red-shadow)}
.btn:disabled{opacity:.6;cursor:default}
.btn.ghost{background:transparent;color:var(--chalk);box-shadow:none;border:2px solid #4a4741;font-family:var(--body);font-weight:700;font-size:1rem;padding:10px 24px}
.btn.ghost:hover{border-color:var(--chalk)}
.btn.small{font-size:1rem;padding:10px 18px;box-shadow:0 3px 0 var(--red-shadow)}
.hint{font-size:.95rem;color:var(--muted);text-align:center;max-width:34ch;margin:0}
.hint.small{font-size:.9rem;color:var(--label)}
.score{font-family:var(--display);font-size:3.4rem;line-height:1;color:var(--chalk);font-variant-numeric:tabular-nums}
.row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.stat{text-align:center}
.stat.gap{margin-left:24px}
.stat .lbl{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--label);font-weight:700}
.statval{font-size:1.3rem;font-weight:800}
#over .statval{font-size:1.4rem}
.back{color:var(--muted);font-weight:700;font-size:1rem;text-decoration:none;padding:6px 10px}
.back:hover{color:var(--chalk);text-decoration:underline}

/* Eintragen ins Tagesranking */
.submit{width:min(100%,360px);display:flex;flex-direction:column;gap:6px;-webkit-user-select:text;user-select:text}
.submit label{font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;color:var(--label);font-weight:700;text-align:center}
.field{display:flex;gap:8px}
.field input{flex:1;min-width:0;font:600 1.15rem var(--body);color:var(--chalk);background:var(--charcoal);border:2px solid #4a4741;border-radius:8px;padding:8px 12px}
.field input:focus{border-color:var(--chalk)}
.note{margin:0;font-size:.85rem;color:var(--muted);text-align:center}
.msg{margin:0;font-size:.95rem;font-weight:700;text-align:center;min-height:1.2em;color:var(--chalk)}
.msg.err{color:#ff8a80}

/* Ranking-Liste */
.board{width:min(100%,380px);font-variant-numeric:tabular-nums}
.board ol{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.board li{display:grid;grid-template-columns:2.2em 1fr auto;gap:8px;align-items:baseline;padding:7px 10px;border-bottom:1px solid var(--line);font-size:1.1rem}
.board li .r{font-weight:800;color:var(--muted)}
.board li .n{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.board li .y{font-weight:800}
.board li .y small{font-weight:500;color:var(--muted);font-size:.8em;margin-left:4px}
.board li.me{background:var(--red);border-left:4px solid var(--chalk)}
.board li.me .r,.board li.me .y small{color:#fff}
.board .info{margin:8px 0 0;text-align:center;color:var(--label);font-size:1rem}
.board .info b{color:var(--chalk)}
.board .empty{margin:0;text-align:center;color:var(--muted);font-size:1rem;padding:12px 0}

@media (prefers-reduced-motion:reduce){.btn:active{transform:none}}