:root{
  --bg:#0d0f1a;
  --panel:#14182b;
  --text:#e6e6f0;
  --muted:#a0a3b1;
  --accent:#5ef2c5;
  --accent-2:#f25e9c;
  --grid-gap:20px;
}
*{box-sizing:border-box}
html,body{height:100%; overscroll-behavior: none;}
/* Mobile-first viewport height fix */
:root{ --vh: 1vh }
body, .app-overlay-inner.immersive{ height: calc(var(--vh) * 100); }
body{
  margin:0; background:radial-gradient(1000px 500px at 80% -10%,rgba(94,242,197,.08),transparent),
  radial-gradient(600px 400px at 10% 110%, rgba(242,94,156,.08), transparent), var(--bg); color:var(--text);
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial; 
}
body.no-scroll{ overflow:hidden; }
.site-header{
  padding:28px 20px 16px; text-align:center; position:relative; z-index:1;
}
.site-header h1{font-family:'Press Start 2P', monospace; letter-spacing:2px; font-size:28px; margin:0 0 8px; color:var(--accent)}
.tagline{margin:0; color:var(--muted)}
.controls{display:flex; gap:14px; justify-content:center; align-items:center; margin-top:12px}
.name-field input{background:transparent; border:1px solid rgba(255,255,255,.15); color:var(--text); padding:6px 10px; border-radius:10px}
.theme-picker{display:flex; gap:8px}
.theme-swatch{width:26px; height:26px; border-radius:8px; border:1px solid rgba(255,255,255,.25); cursor:pointer}
.theme-custom{display:flex; gap:6px; align-items:center}
.container{max-width:1100px; margin:0 auto; padding:20px}
.grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(240px,1fr)); gap:var(--grid-gap);
}
.card{
  display:block; background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.06); border-radius:16px; overflow:hidden; text-decoration:none; color:inherit;
  box-shadow: 0 10px 30px rgba(0,0,0,.3); transform:translateY(0); transition:.2s transform, .2s box-shadow, .2s border-color;
}
.card:hover{ transform:translateY(-6px); box-shadow:0 16px 40px rgba(0,0,0,.4); border-color: rgba(94,242,197,.3);}
.thumb{
  background:#0b0d18 center/cover no-repeat; height:160px; filter:saturate(1) contrast(1.05);
}
.meta-row{display:flex; gap:12px; align-items:flex-start; margin-top:8px}
.mini-top{margin-left:auto; min-width:140px}
.mini-top .row{display:flex; justify-content:space-between; font-size:12px; color:var(--muted)}
.mini-top .empty{color:var(--muted); font-size:12px}
.stars{display:flex; gap:2px; color:var(--accent-2)}
.star.half{position:relative}
.star.half::after{content:'☆'; position:absolute; left:0; width:50%; overflow:hidden; color:var(--accent-2)}

.section-title{font-family:'Press Start 2P', monospace; font-size:16px; color:var(--accent); margin: 0 0 10px;}
.leaderboard .board{display:grid; gap:6px; background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.06); border-radius:12px; padding:12px}
.leaderboard .row{display:grid; grid-template-columns: 32px 1fr auto; gap:10px; align-items:center; font-weight:600}
.leaderboard .pos{color:var(--accent)}
.leaderboard .score{opacity:.9}
.content{padding:14px 14px 18px}
.content h3{margin:0 0 6px; font-size:16px; font-weight:600}
.content p{margin:0; color:var(--muted); font-size:13px; min-height:34px}
.site-footer{ text-align:center; padding:30px; color:var(--muted)}

/* Game page shared styles */
.game-shell{height:100vh; display:grid; grid-template-rows: 1fr;}
.btn{appearance:none; border:1px solid rgba(255,255,255,.12); background:transparent; color:var(--text); padding:8px 12px; border-radius:10px; cursor:pointer; font-weight:600}
.btn:hover{border-color:rgba(255,255,255,.26)}
.canvas-wrap{display:grid; place-items:center; background:radial-gradient(600px 400px at 60% 30%,rgba(94,242,197,.08),transparent), var(--bg)}
canvas{background:#0b0f19; border:1px solid rgba(255,255,255,.08); border-radius:12px; touch-action:none}

/* Retro scanline effect */
.scanlines{ position:fixed; inset:0; pointer-events:none; background: repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0px, rgba(255,255,255,.06) 1px, transparent 2px, transparent 3px); opacity:.06; mix-blend-mode:overlay }

/* Rating inline in game bar */
.rating-inline button{ color: var(--accent-2); }

/* Music overlay */
.music-overlay{ position:fixed; bottom:12px; right:12px; left:auto; transform:none; display:flex; gap:8px; align-items:center; padding:6px 10px; z-index:5000; border-radius:12px; background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); border:1px solid rgba(255,255,255,.08); box-shadow:0 6px 20px rgba(0,0,0,.35); backdrop-filter: blur(6px); }
.music-overlay .btn{ padding:6px 8px; border-radius:8px; }
.music-overlay .title{ font:600 12px Inter; color:var(--muted); max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.music-overlay select{ background:transparent; color:var(--text); border:1px solid rgba(255,255,255,.12); border-radius:8px; padding:4px 6px }
.music-overlay input[type=range]{ accent-color: var(--accent); height:6px }

/* When overlay is open, pin the music player at the top */
.overlay-open .music-overlay{ top:8px; bottom:auto; right:12px; }

/* App overlay for games (iframe) */
.app-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:3000; display:grid; place-items:center; padding:20px }
.app-overlay-inner{ width:min(1100px, 96vw); height:min(90vh, 740px); position:relative; border-radius:14px; overflow:hidden; background:var(--panel); box-shadow: 0 20px 80px rgba(0,0,0,.6); border:1px solid rgba(255,255,255,.08) }
.app-overlay-inner iframe{ width:100%; height:100%; border:0; background:#000 }
.app-overlay-close{ position:absolute; right:10px; top:10px; z-index:1 }

/* Immersive (Edge-to-edge, mobile full-viewport) */
.app-overlay.immersive{ padding:0 }
.app-overlay-inner.immersive{ width:100vw; height:100vh; border-radius:0; border:none }

/* Touch input UI */
.gk-touch-layer{ position:fixed; inset:0; z-index:2500; pointer-events:none; }
.gk-joy{ position:absolute; bottom:16px; width:180px; height:180px; pointer-events:auto; }
.gk-joy.left{ left:16px; }
.gk-joy.right{ right:16px; }
.gk-joy-base{ position:absolute; left:0; top:0; right:0; bottom:0; border-radius:50%; background:radial-gradient(closest-side, rgba(255,255,255,.06), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.1); }
.gk-joy-stick{ position:absolute; left:50%; top:50%; width:80px; height:80px; transform:translate(-50%, -50%); border-radius:50%; background:linear-gradient(180deg, rgba(94,242,197,.35), rgba(94,242,197,.15)); border:1px solid rgba(94,242,197,.6); transition: transform .06s ease; }
.gk-joy-stick.active{ transition:none }

.gk-buttons{ position:absolute; bottom:22px; right:18px; display:flex; gap:12px; pointer-events:auto; }
.gk-btn{ width:62px; height:62px; border-radius:50%; border:1px solid rgba(255,255,255,.18); background:linear-gradient(180deg, rgba(242,94,156,.35), rgba(242,94,156,.15)); color:#fff; font:700 16px Inter; text-shadow:0 1px 0 rgba(0,0,0,.4); box-shadow:0 6px 18px rgba(0,0,0,.3); }
.gk-btn:active{ transform:translateY(1px) }

/* Tips + Modal */
.gk-tip{ position:fixed; left:50%; top:12px; transform:translateX(-50%); background:rgba(0,0,0,.6); border:1px solid rgba(255,255,255,.12); backdrop-filter: blur(6px); color:#fff; border-radius:10px; z-index:2600; }
.gk-tip-inner{ padding:10px 12px; display:flex; gap:10px; align-items:center; }
.gk-tip .gk-skip{ padding:6px 10px; }

.gk-modal{ position:fixed; inset:0; display:grid; place-items:center; background:rgba(0,0,0,.5); z-index:2700 }
.gk-modal-inner{ width:min(420px, 92vw); background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:14px; color:#fff }
.gk-modal-title{ font:700 16px Inter; margin-bottom:8px; color:var(--accent) }
.gk-modal-row{ margin:8px 0 }
.gk-modal-actions{ display:flex; gap:8px; justify-content:flex-end }