:root{
    --sky1:#5cc7e0;
    --sky2:#bdeef4;
    --ink:#2b1a06;
    --grass:#7ec850;
    --grassDark:#4a9c1d;
    --dirt:#deb887;
    --dirtDark:#c68a4a;
    --gold:#ffd23f;
    --brown:#5b3a1a;
    --cream:#fff7e0;
    --red:#e6533c;
  }
  *{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; justify-content: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; }

  .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; }
  .lb-you{ color:#1a7a3c !important; }

  #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-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;
  }
  .lb-pinned{ border-top:2px solid var(--ink); margin-top:6px; padding-top:6px; }

  /* ---- 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-item{
    display:flex; flex-direction:column; gap:2px;
    padding:7px 4px;
    border-bottom:1px dashed rgba(91,58,26,0.25);
    text-align:left;
  }
  .inv-item:last-child{ border-bottom:none; }
  .inv-item-head{ display:flex; justify-content:space-between; align-items:center; gap:8px; }
  .inv-item-name{ font-size:13px; font-weight:700; }
  .inv-item-desc{ font-size:11px; opacity:0.75; line-height:1.4; }
  .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; }
  .skin-selectable{ cursor:pointer; }
  .skin-selectable:hover{ background:rgba(255,210,63,0.15); }
  /* Gesperrte Skins sind klickbar (führen in den Shop) */
  .skin-locked{ opacity:0.55; cursor:pointer; }
  .skin-locked:hover{ opacity:0.8; background:rgba(255,210,63,0.1); }
  /* Ziel-Item im Shop nach Sprung aus dem Skin-Screen */
  .shop-highlight{
    outline:3px solid var(--gold);
    outline-offset:-1px;
    border-radius:4px;
    animation:shopPulse 1.1s ease-in-out 3;
  }
  @keyframes shopPulse{ 0%,100%{ outline-color:var(--gold); } 50%{ outline-color:transparent; } }