* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; background: #0d0f14; color: #f8fafc; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; }
.shell { width: min(980px, calc(100% - 28px)); margin: 0 auto; padding: 24px 0; }
.back-link { color: #93c5fd; text-decoration: none; font-weight: 700; }
.panel { margin-top: 18px; background: #141a26; border: 1px solid #2f3a52; border-radius: 8px; padding: clamp(16px, 4vw, 26px); }
.header, .hud, .actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.eyebrow { margin: 0 0 4px; color: #60a5fa; font-weight: 900; text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(30px, 5vw, 46px); }
canvas { width: 100%; height: clamp(340px, 56vh, 560px); margin: 18px 0; display: block; border: 1px solid #334155; border-radius: 8px; background: #101827; touch-action: none; }
.stat, .hud div { background: #1e293b; border: 1px solid #334155; border-radius: 8px; padding: 10px 12px; min-width: 110px; }
.stat span, .hud span { display: block; color: #94a3b8; font-size: 13px; }
.stat strong, .hud strong { font-size: 24px; }
button { border: 0; border-radius: 8px; padding: 12px 18px; background: #2563eb; color: #fff; font-weight: 900; cursor: pointer; }
button.secondary { background: #334155; }
.hint { color: #94a3b8; margin-bottom: 0; }
.content-section { margin-top: 22px; background: #141a26; border: 1px solid #2f3a52; border-radius: 8px; padding: clamp(18px, 4vw, 28px); }
.content-section h2 { margin: 26px 0 10px; font-size: clamp(22px, 3vw, 30px); }
.content-section > h2:first-child { margin-top: 0; font-size: clamp(26px, 4vw, 36px); }
.content-section p, .content-section li { color: #d5dcec; font-size: 16px; line-height: 1.75; }
.content-section ul { margin: 10px 0 0 22px; padding: 0; }
.related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.related-grid a { display: block; padding: 14px; border-radius: 8px; background: #1e293b; border: 1px solid #334155; color: #c7d7ff; text-decoration: none; font-weight: 800; transition: transform .16s ease, border-color .16s ease; }
.related-grid a:hover { transform: translateY(-2px); border-color: #60a5fa; }
.platform-recommendations { display: grid; gap: 22px; margin-top: 22px; padding-bottom: 22px; }
.recommendation-section { background: #141a26; border: 1px solid #2f3a52; border-radius: 8px; padding: clamp(18px, 4vw, 28px); }
.recommendation-heading { display: flex; align-items: end; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.recommendation-heading a { color: #93c5fd; font-size: 14px; font-weight: 800; text-decoration: none; }
.recommendation-heading a:hover { color: #bfdbfe; }
.recommendation-heading h2 { margin: 0; font-size: clamp(24px, 3.5vw, 34px); }
.recommendation-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.recommendation-card { overflow: hidden; border-radius: 8px; border: 1px solid #334155; background: #1e293b; color: #f8fafc; text-decoration: none; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.recommendation-card:hover { transform: translateY(-4px); border-color: #60a5fa; box-shadow: 0 18px 42px rgba(0,0,0,.28); }
.recommendation-card img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #0f172a; }
.recommendation-card-body { display: grid; gap: 6px; padding: 12px; }
.recommendation-card-body strong { font-size: 15px; line-height: 1.3; }
.recommendation-desc { color: #cbd5e1; font-size: 13px; line-height: 1.45; }
.recommendation-tag { width: fit-content; border: 1px solid #3b82f6; border-radius: 999px; color: #bfdbfe; font-size: 11px; font-weight: 900; padding: 4px 8px; text-transform: uppercase; }
.recommendation-play { color: #93c5fd; font-size: 13px; font-weight: 900; }
.recommendation-creator { color: #93c5fd; font-size: 13px; font-weight: 800; }
.game-creator-info { margin-top: 22px; }
.creator-byline-card { display: flex; align-items: center; gap: 12px; background: #141a26; border: 1px solid #2f3a52; border-radius: 8px; padding: 14px; }
.creator-byline-card img { width: 52px; height: 52px; border-radius: 14px; background: #0f172a; }
.creator-byline-card span { display: block; color: #94a3b8; font-size: 13px; }
.creator-byline-card a { color: #c7d7ff; font-size: 18px; font-weight: 900; }
@media (max-width: 620px) { .hud div, .actions button { flex: 1 1 calc(50% - 8px); } .related-grid, .recommendation-grid { grid-template-columns: 1fr; } .recommendation-heading { display: block; } }
@media (min-width: 621px) and (max-width: 900px) { .recommendation-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Polished replay UI */
.polish-bar{display:grid;grid-template-columns:minmax(0,1fr) minmax(130px,.32fr) auto;gap:12px;align-items:stretch;margin-top:14px}.polish-card,.polish-sound{background:linear-gradient(180deg,#1d2738,#131b29);border:1px solid #334155;border-radius:8px;padding:11px 12px;color:#e5edf9}.polish-card span{display:block;color:#93a4ba;font-size:12px;font-weight:800;text-transform:uppercase}.polish-card strong{display:block;margin-top:4px;font-size:15px;line-height:1.35}.polish-sound{cursor:pointer;font-weight:900}.polish-sound[aria-pressed=true]{border-color:#22c55e;color:#bbf7d0}.polish-pad{display:none;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:12px}.polish-pad button{border:1px solid #334155;border-radius:8px;background:#1e293b;color:#f8fafc;padding:11px 8px;font-weight:900}.score-pop{animation:scorePop .28s ease}.tap-pop{animation:tapPop .2s ease}.tap-spark{position:fixed;z-index:9998;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:999px;border:2px solid #60a5fa;pointer-events:none;animation:spark .5s ease-out forwards}@keyframes scorePop{50%{transform:scale(1.12);color:#bfdbfe}}@keyframes tapPop{50%{transform:scale(.96)}}@keyframes spark{to{transform:scale(5);opacity:0}}@media(max-width:760px){.polish-bar{grid-template-columns:1fr}.polish-pad{display:grid}.polish-help strong{font-size:14px}}