*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#87ceeb;--ground:#c4a35a;--font:'Orbitron',monospace;--neon:#00ff88}
html,body { touch-action: none; width:100%;height:100%;overflow:hidden;font-family:var(--font);touch-action:none}
#game-container{position:relative;width:100%;height:100%;overflow:hidden}
#gameCanvas{position:absolute;top:0;left:0;width:100%;height:100%;display:block}
.screen{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:20px;z-index:100}
.screen.active{display:flex}
.thumb{border-radius:12px;border:2px solid #00ff88;box-shadow: 0 8px 15px rgba(0,0,0,0.1);max-width:280px;width:90%;aspect-ratio:16/9;object-fit:cover}
.title{font-size:clamp(2rem,8vw,3.5rem);font-weight:900;text-align:center;line-height:1.1;color:#2d5a27;text-shadow:2px 2px 0 rgba(0,0,0,.2)}
.title span{font-size:.55em;color:#1a3a18;letter-spacing:6px}
.hs-row{display:flex;align-items:baseline;gap:8px}
.hs-l{font-size:.65rem;color:rgba(0,0,0,.4);letter-spacing:2px}
.hs-v{font-size:2rem;font-weight:700;color:#2d5a27}
.hint{font-size:.7rem;color:rgba(0,0,0,.5);letter-spacing:2px;animation:blink 1.5s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
.btn-3d {
      padding: 15px 40px;
      background: linear-gradient(to bottom, #ff9a44, #fc6076);
      border: none;
      border-radius: 25px;
      font-size: 1.5rem;
      color: white;
      cursor: pointer;
      font-weight: bold;
      box-shadow: 0 6px 0 #e63946, 0 10px 15px rgba(0,0,0,0.2);
      transition: all 0.1s;
      text-transform: uppercase;
    }
.btn-3d:hover{background:rgba(45,90,39,.15)}
.btn-sec{padding:10px 28px;background:transparent;border:1px solid rgba(0,0,0,.25);border-radius:4px;font-family:var(--font);font-size:.7rem;color:rgba(0,0,0,.5);cursor:pointer;transition:all .2s}
.btn-sec:hover{color:rgba(0,0,0,.8)}
.shop-title{font-size:1.8rem;font-weight:900;color:#2d5a27}
.skin-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;width:100%;max-width:600px;max-height:60vh;overflow-y:auto;padding:8px}
.skin-card{border:2px solid rgba(0,0,0,.15);border-radius:10px;padding:12px;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;background:rgba(255,255,255,.5);transition:all .2s}
.skin-card.selected{border-color:#2d5a27;background:rgba(45,90,39,.15)}
.skin-card.locked{opacity:.5;cursor:default}
.skin-name{font-size:.6rem;letter-spacing:1px;color:#333}
.skin-req{font-size:.55rem;color:#999}
.go-title{font-size:clamp(2rem,8vw,3rem);font-weight:900;color:#cc2222;text-shadow:2px 2px 0 rgba(0,0,0,.2)}
.stats{background:rgba(255,255,255,.7);border-radius:12px;padding:18px 32px;display:flex;flex-direction:column;gap:8px;min-width:220px;backdrop-filter:blur(10px)}
.sr{display:flex;justify-content:space-between;font-size:.8rem;color:rgba(0,0,0,.5);padding:5px 0;border-bottom:1px solid rgba(0,0,0,.07)}
.sr:last-child{border:none}.sr span:last-child{color:#222;font-weight:700}.sr.best span:last-child{color:#aa6600}
#hud{position:absolute;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;padding:8px 16px;gap:8px;pointer-events:none}
.hud-l,.hud-r{font-size:.9rem;color: #333;text-shadow:1px 1px 0 rgba(0,0,0,.5)}
.hud-c{margin:0 auto}.score-val{font-size:1.4rem;font-weight:700;color: #333;text-shadow:2px 2px 0 rgba(0,0,0,.3)}
.skin-icon{font-size:1.2rem}
.day-label{position:absolute;top:50px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.6);color: #333;padding:6px 16px;border-radius:20px;font-size:.75rem;letter-spacing:2px;z-index:60;pointer-events:none}
.hidden{display:none!important}

/* Night mode body class */
body.night{background:#0a0a2e}