:root{
    --sky1:#5cc7e0;
    --sky2:#bdeef4;
    --ink:#2b1a06;
    --grass:#7ec850;
    --grassDark:#4a9c1d;
    --dirt:#deb887;
    --dirtDark:#c68a4a;
    --gold:#ffd23f;
    --brown:#5b3a1a;
    --cream:#fff7e0;
    --red:#e6533c;
    /* Bestenliste: sichtbare Zeilen, bevor gescrollt werden muss.
       --lb-row-h ist die GEMESSENE Zeilenhoehe inkl. Polsterung und
       Trennlinie (Standard-Board 28px, board-big 36px) — wird sie an der
       Zeilen-Optik geaendert, hier nachziehen, sonst wird die letzte
       sichtbare Zeile angeschnitten. */
    --lb-rows:5;
    --lb-row-h:28px;
  }
  *{box-sizing:border-box; -webkit-tap-highlight-color: transparent;}
  html,body{
    margin:0; padding:0; height:100%; overflow:hidden;
    background:#1a1033;
    font-family:'Space Grotesk', sans-serif;
    color:var(--ink);
    user-select:none;
  }
  #stage{
    position:relative;
    width:100vw; height:100vh;
    display:flex; align-items:center; justify-content:center;
    background:#0e0a1a;
  }
  /* Default: landscape playfield (16:9) for PC / wide windows. */
  #gameFrame{
    position:relative;
    width: min(96vw, calc(96vh * 1.77778));
    height: min(96vh, calc(96vw / 1.77778));
    box-shadow:0 0 0 3px var(--brown), 0 20px 60px rgba(0,0,0,0.6);
    overflow:hidden;
    background:var(--sky1);
  }
  /* Phones / any window taller than it is wide: portrait playfield (9:16),
     matching the portrait game resolution. */
  @media (orientation: portrait){
    #gameFrame{
      width: min(100vw, calc(100vh * 0.5625));
      height: min(100vh, calc(100vw / 0.5625));
    }
  }
  canvas{
    display:block;
    width:100%; height:100%;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
  }
  .pixel{ font-family:'Press Start 2P', monospace; }
  #hud{
    position:absolute; top:0; left:0; right:0;
    display:flex; justify-content:center;
    padding-top:20px;
    pointer-events:none;
    z-index:5;
  }
  #hudScore{
    font-size:32px;
    color:#fff;
    -webkit-text-stroke: 3px var(--ink);
    paint-order: stroke fill;
    letter-spacing:2px;
  }
  .overlay{
    position:absolute; inset:0;
    display:flex; flex-direction:column; align-items:center;
    /* "safe center" zentriert nur, solange der Inhalt passt — laeuft er
       ueber, wird oben ausgerichtet statt beschnitten. Ohne das war bei
       langen Bestenlisten (v.a. im kleineren Desktop-Fenster) der obere
       Teil des Overlays unerreichbar. */
    justify-content:center;
    justify-content:safe center;
    gap:16px;
    z-index:10;
    text-align:center;
    padding:22px;
    background:linear-gradient(180deg, rgba(30,20,10,0.35), rgba(20,14,8,0.72));
    overflow-y:auto;
  }
  .hidden{display:none !important;}
  .title{
    font-size:24px;
    color:var(--gold);
    -webkit-text-stroke: 3px var(--ink);
    paint-order: stroke fill;
    line-height:1.7;
    margin:0;
  }
  .subtitle{
    font-size:12px;
    color:var(--cream);
    background:rgba(43,26,6,0.55);
    padding:10px 12px;
    border-radius:4px;
    max-width:280px;
    line-height:1.7;
  }
  .glow-btn{
    font-family:'Press Start 2P', monospace;
    font-size:12px;
    color:var(--ink);
    background:var(--gold);
    border:3px solid var(--ink);
    padding:13px 20px;
    border-radius:4px;
    cursor:pointer;
    box-shadow:0 4px 0 #b5860a;
    transition:transform 0.08s ease;
  }
  .glow-btn:active{ transform:translateY(3px); box-shadow:0 1px 0 #b5860a; }
  .row{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }

  /* ---- Hauptmenue ----
     Alles sitzt in einer Tafel mit einheitlicher Breite statt lose
     gestapelt vor der Spielkulisse zu schweben. Die Tafel bringt ihren
     eigenen dunklen Untergrund mit, damit das Menue vor JEDEM Skin
     lesbar bleibt (heller Standardhimmel wie dunkle Hoehle). */
  .overlay.menu{ padding:14px; }
  .menu-panel{
    width:min(380px, 92%);
    display:flex; flex-direction:column; align-items:stretch; gap:10px;
    padding:16px 18px 14px;
    border-radius:10px;
    background:linear-gradient(180deg, rgba(30,20,9,0.84), rgba(16,10,6,0.92));
    box-shadow:0 0 0 3px var(--ink), 0 14px 44px rgba(0,0,0,0.55);
  }
  .menu-title{
    font-size:19px; line-height:1.4; letter-spacing:2px; text-align:center;
    animation:titleGlow 3.4s ease-in-out infinite;
  }
  @keyframes titleGlow{
    0%,100%{ text-shadow:0 0 8px rgba(255,210,63,0.3); }
    50%    { text-shadow:0 0 20px rgba(255,210,63,0.7); }
  }
  .menu-start{ width:100%; font-size:16px; padding:15px 20px; }
  .menu-nav{ display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; }
  .nav-btn{
    display:flex; flex-direction:column; align-items:center; gap:5px;
    padding:9px 3px;
    color:var(--cream);
    background:rgba(255,247,224,0.1);
    border:2px solid rgba(255,247,224,0.35);
    border-radius:5px;
    cursor:pointer;
  }
  .nav-btn:hover{ background:rgba(255,210,63,0.22); border-color:var(--gold); }
  .nav-btn:active{ transform:translateY(2px); }
  .nav-icon{ font-size:17px; line-height:1; }
  .nav-label{ font-size:7px; letter-spacing:0.5px; }
  .menu-panel .board{ width:100%; }
  .menu-panel .menu-version{ align-self:center; }
  /* Hochformat (Handy): die Tafel ist schmaler, vier Spalten quetschen
     die Beschriftungen — dann zwei Reihen à zwei. */
  @media (orientation: portrait){
    .menu-nav{ grid-template-columns:repeat(2, 1fr); }
  }

  /* ---- Wochen-Challenge: grosse, hervorgehobene Menue-Option ---- */
  .hero-btn{
    display:flex; align-items:center; gap:12px;
    width:100%;
    padding:12px 16px;
    text-align:left;
    cursor:pointer;
    color:var(--cream);
    border:3px solid var(--gold);
    border-radius:6px;
    background:linear-gradient(135deg, rgba(255,210,63,0.28), rgba(230,83,60,0.28));
    box-shadow:0 0 0 2px var(--ink), 0 0 18px rgba(255,210,63,0.35);
    animation:heroGlow 2.4s ease-in-out infinite;
  }
  .hero-btn:active{ transform:translateY(2px); }
  @keyframes heroGlow{
    0%,100%{ box-shadow:0 0 0 2px var(--ink), 0 0 12px rgba(255,210,63,0.28); }
    50%    { box-shadow:0 0 0 2px var(--ink), 0 0 26px rgba(255,210,63,0.6); }
  }
  .hero-btn-icon{ font-size:24px; line-height:1; flex:0 0 auto; }
  .hero-btn-text{ display:flex; flex-direction:column; gap:6px; min-width:0; }
  .hero-btn-title{ font-size:11px; color:var(--gold); letter-spacing:1px; }
  .hero-btn-sub{
    font-family:'Space Grotesk', sans-serif;
    font-size:11px; line-height:1.4; opacity:0.9;
  }

  /* ---- Zurueck-Kreuz: auf jedem Unterbildschirm oben links ----
     Bewusst links, damit es nie mit der userbar (oben rechts) kollidiert. */
  .close-btn{
    position:absolute; top:10px; left:10px; z-index:30;
    width:34px; height:34px; padding:0;
    display:flex; align-items:center; justify-content:center;
    font-size:12px; line-height:1;
    color:var(--cream);
    background:rgba(43,26,6,0.75);
    border:2px solid var(--cream);
    border-radius:4px;
    cursor:pointer;
  }
  .close-btn:hover{ background:var(--gold); color:var(--ink); border-color:var(--ink); }
  .close-btn:active{ transform:translateY(2px); }

  .board{
    width:min(300px, 86vw);
    background:#fff7e0;
    border:3px solid var(--ink);
    border-radius:6px;
    padding:12px 14px;
    color:var(--ink);
  }
  .board h3{
    margin:0 0 8px 0;
    font-size:10px;
    letter-spacing:1px;
    color:var(--brown);
    font-family:'Press Start 2P', monospace;
    text-align:left;
  }
  .lb-row{
    display:flex; justify-content:space-between;
    font-size:13px; font-weight:700;
    padding:5px 4px;
    border-bottom:1px dashed rgba(91,58,26,0.25);
  }
  .lb-row:last-child{border-bottom:none;}
  .lb-rank{ color:var(--brown); width:24px; text-align:left; }
  .lb-name{ flex:1; text-align:left; padding-left:4px; }
  .lb-score{ color:var(--red); }
  .lb-empty, .lb-loading{ font-size:12px; opacity:0.65; padding:8px 4px; }

  /* Bestenliste: standardmaessig nur die Top 5 sichtbar, der Rest ist
     scrollbar. Ohne diese Deckelung ist das Menue mit wachsender Liste
     auseinandergelaufen (Browser wie Desktop-App). */
  .lb-scroll{
    max-height:calc(var(--lb-rows) * var(--lb-row-h));
    overflow-y:auto;
    overscroll-behavior:contain;
  }
  .lb-scroll::-webkit-scrollbar{ width:6px; }
  .lb-scroll::-webkit-scrollbar-thumb{ background:rgba(91,58,26,0.35); border-radius:3px; }
  /* Eigene Zeile — im Board immer sichtbar unter der Top-Liste angeheftet */
  .lb-self{
    margin-top:6px; padding-top:6px;
    border-top:2px solid var(--ink);
  }
  .lb-self .lb-row{ border-bottom:none; }
  /* Eigener Eintrag farblich hervorgehoben — in der Top-Liste wie in der
     angehefteten Zeile, damit man sich sofort selbst findet. */
  .lb-row.is-me{
    background:rgba(255,210,63,0.45);
    border-radius:3px;
    box-shadow:inset 0 0 0 2px var(--gold);
  }
  .lb-you{ color:#1a7a3c !important; }
  .lb-row.is-me .lb-rank{ color:var(--ink); }
  .lb-hint{ font-size:10px; opacity:0.6; padding:4px; text-align:center; }

  #nameEntry{ display:flex; gap:8px; align-items:center; width:min(300px, 86vw); }
  #nameInput{
    flex:1; font-family:'Space Grotesk', sans-serif; font-size:15px;
    padding:9px 10px; border-radius:4px; border:3px solid var(--ink);
    background:#fff7e0; color:var(--ink); outline:none; text-transform:uppercase;
  }
  .score-flash{ font-size:15px; color:#fff; -webkit-text-stroke:2px var(--ink); paint-order: stroke fill;}
  .newbest{ font-size:12px; color:var(--red); animation:pulse 1s infinite; }
  @keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:0.35;} }

  /* Bigger variants for the game-over screen — more room now that the
     playfield itself is bigger, so the end-of-round summary can be too. */
  .board-big{
    width:min(420px, 80vw);
    padding:18px 20px;
  }
  .board-big h3{ font-size:13px; margin-bottom:12px; }
  .board-big .lb-row{ font-size:16px; padding:7px 4px; }
  .board-big .lb-scroll{ max-height:calc(var(--lb-rows) * 36px); }
  .board-big .lb-empty, .board-big .lb-loading{ font-size:14px; }
  .glow-btn-big{ font-size:15px; padding:16px 26px; }
  .ghost-btn-big{
    background:transparent; color:var(--cream);
    border:3px solid rgba(255,247,224,0.6);
    box-shadow:none;
  }
  .ghost-btn-big:active{ transform:translateY(3px); }
  #overScreen .score-flash{ font-size:19px; }
  #overScreen .newbest{ font-size:14px; }
  /* Versionsanzeige — nur im Hauptmenü (startScreen), gut lesbar unter
     der Bestenliste statt halb-transparent am Stage-Rand. */
  .menu-version{
    font-size:9px; color:var(--cream); opacity:0.8;
    background:rgba(43,26,6,0.55);
    padding:5px 9px; border-radius:4px;
    letter-spacing:1px;
  }

  /* ---- Auth ---- */
  .authTabs{ display:flex; gap:6px; }
  .authTab{
    font-family:'Press Start 2P', monospace; font-size:10px;
    background:rgba(255,247,224,0.15); color:var(--cream);
    border:2px solid var(--ink); padding:8px 12px; border-radius:4px; cursor:pointer;
  }
  .authTab.active{ background:var(--gold); color:var(--ink); }
  .authForm{ display:flex; flex-direction:column; gap:10px; width:min(260px, 84vw); }
  .authForm input{
    font-family:'Space Grotesk', sans-serif; font-size:15px;
    padding:10px 11px; border-radius:4px; border:3px solid var(--ink);
    background:#fff7e0; color:var(--ink); outline:none;
  }
  .authError{ font-size:11px; color:#ffb3a3; min-height:14px; }
  .authStatus{
    font-size:11px; color:#1a7a3c; background:rgba(255,247,224,0.9);
    padding:8px 10px; border-radius:4px; width:min(260px, 84vw);
    line-height:1.5; display:none;
  }
  .authStatus.visible{ display:block; }
  .userbar{
    position:absolute; top:8px; right:8px; z-index:20;
    display:flex; align-items:center; gap:14px;
    font-size:11px; color:#fff; background:rgba(43,26,6,0.55);
    padding:6px 10px; border-radius:4px;
    pointer-events:auto;
  }
  .userbar button{
    font-family:'Space Grotesk', sans-serif; font-size:10px; font-weight:700;
    background:transparent; color:#ffd23f; border:none; cursor:pointer; text-decoration:underline;
  }

  /* ---- Vollflaechige Unterbildschirme (Shop / Skins / Inventar) ----
     Kopf und Fussknopf bleiben stehen, nur die Kachelflaeche scrollt. */
  .overlay.screen{
    justify-content:flex-start;
    gap:12px;
    padding:14px 16px 16px;
    overflow:hidden; /* gescrollt wird ausschliesslich .screen-body */
    /* Kraeftiger abgedunkelt als die uebrigen Overlays: der Kopfbereich
       steht sonst kontrastarm vor dem hellen Himmel des Standard-Skins. */
    background:linear-gradient(180deg, rgba(20,14,8,0.86), rgba(20,14,8,0.72));
  }
  .screen-head{
    flex:0 0 auto; width:100%;
    display:flex; flex-direction:column; align-items:center; gap:6px;
    padding:0 40px; /* Platz fuer das Zurueck-Kreuz oben links */
  }
  /* Im schmalen Hochformat liegt die userbar (oben rechts) direkt ueber dem
     Kopf der oben ausgerichteten Screens — Titel darunter schieben. Im
     Querformat ist daneben genug Platz, dort bleibt es kompakt. */
  @media (orientation: portrait){
    .screen-head{ padding-top:34px; }
  }
  .screen-title{ font-size:20px; }
  .screen-sub{
    margin:0; font-size:11px; color:var(--cream); opacity:0.85; line-height:1.4;
  }
  .screen-body{
    flex:1 1 auto; width:100%;
    overflow-y:auto; overscroll-behavior:contain;
    padding:4px 2px 6px;
  }
  .screen-foot-btn{ flex:0 0 auto; }

  /* ---- Kachel-Raster fuer Shop / Skins / Inventar ---- */
  .tile-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(172px, 1fr));
    gap:12px;
    align-content:start;
  }
  .tile{
    display:flex; flex-direction:column;
    background:#fff7e0;
    border:3px solid var(--ink);
    border-radius:6px;
    overflow:hidden;
    text-align:left;
    color:var(--ink);
  }
  .tile-preview{
    display:block; width:100%; height:auto;
    aspect-ratio:16/9;
    background:#0e0a1a;
    border-bottom:3px solid var(--ink);
    image-rendering:pixelated;
    image-rendering:crisp-edges;
  }
  .tile-body{ display:flex; flex-direction:column; gap:5px; padding:8px 9px 9px; flex:1; }
  .tile-name{ font-family:'Press Start 2P', monospace; font-size:9px; line-height:1.5; }
  .tile-desc{ font-size:11px; line-height:1.35; opacity:0.75; flex:1; }
  .tile-foot{ display:flex; align-items:center; justify-content:space-between; gap:6px; }
  .tile-selectable{ cursor:pointer; }
  .tile-selectable:hover{ box-shadow:0 0 0 3px var(--gold); }
  .tile-locked .tile-preview{ filter:grayscale(0.55) brightness(0.7); }
  .tile-locked{ cursor:pointer; }
  .tile-locked:hover{ box-shadow:0 0 0 3px var(--gold); }
  .tile-active{ box-shadow:0 0 0 3px var(--gold), 0 0 16px rgba(255,210,63,0.55); }

  /* ---- Inventar ---- */
  /* Icon + Zahl als Flexbox, damit Emoji und Ziffern trotz unterschiedlicher
     Baselines sauber auf einer Mittellinie sitzen. */
  .coin-badge{
    display:inline-flex; align-items:center; gap:6px;
    color:var(--gold); font-size:12px; line-height:1;
  }
  .coin-icon{ font-size:16px; line-height:1; }
  .coin-line{
    font-size:13px; color:var(--gold);
    -webkit-text-stroke:2px var(--ink);
    paint-order: stroke fill;
  }
  .inv-tag{
    font-family:'Press Start 2P', monospace; font-size:7px;
    padding:3px 5px; border-radius:3px;
    background:var(--gold); color:var(--ink);
    white-space:nowrap;
  }
  .inv-tag.free{ background:#bfe3c5; }
  .inv-tag.locked{ background:#c9c2b3; opacity:0.85; }
  .buy-btn{
    font-family:'Press Start 2P', monospace; font-size:8px;
    color:var(--ink); background:var(--gold);
    border:2px solid var(--ink); border-radius:3px;
    padding:6px 8px; cursor:pointer; white-space:nowrap;
    box-shadow:0 2px 0 #b5860a;
  }
  .buy-btn:active{ transform:translateY(2px); box-shadow:none; }
  .buy-btn:disabled{ background:#c9c2b3; cursor:not-allowed; box-shadow:none; opacity:0.7; }
  /* ---- Freunde & Einladungen ---- */
  .invite-link-row{ display:flex; gap:6px; margin-top:8px; align-items:stretch; }
  .invite-link-row input{
    flex:1; min-width:0;
    font-family:'Space Grotesk', sans-serif; font-size:12px;
    padding:7px 8px; border-radius:4px; border:2px solid var(--ink);
    background:#fff7e0; color:var(--ink); outline:none;
  }
  .invite-status{
    font-size:11px; font-weight:700; color:#1a7a3c; min-height:14px; margin-top:4px;
  }
  #overScreen .invite-status{ color:#bfe3c5; }
  .invite-row{
    display:flex; justify-content:space-between; gap:8px;
    font-size:12px; padding:5px 4px;
    border-bottom:1px dashed rgba(91,58,26,0.25);
  }
  .invite-row:last-child{ border-bottom:none; }
  .invite-row .invite-token{ opacity:0.6; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .invite-row .invite-state{ font-weight:700; white-space:nowrap; }
  .invite-row .invite-state.open{ color:var(--brown); }
  .invite-row .invite-state.redeemed{ color:#1a7a3c; }

  /* Ziel-Kachel im Shop nach Sprung aus dem Skin-Screen */
  .shop-highlight{
    outline:3px solid var(--gold);
    outline-offset:2px;
    border-radius:6px;
    animation:shopPulse 1.1s ease-in-out 3;
  }
  @keyframes shopPulse{ 0%,100%{ outline-color:var(--gold); } 50%{ outline-color:transparent; } }