/* Public game page, home concept A (2026-09-29): navy page, the game glows in its own colour (body.k-<kind>), neon focus. */
@font-face{font-family:"PR Round";src:url(/fonts/pr-round-lt-400.woff2) format("woff2");font-weight:100 500;font-display:swap;unicode-range:U+0-303F,U+FF00-FFEF}
@font-face{font-family:"PR Round";src:url(/fonts/pr-round-lt-800.woff2) format("woff2");font-weight:600 900;font-display:swap;unicode-range:U+0-303F,U+FF00-FFEF}
@font-face{font-family:"PR Round";src:url(/fonts/pr-round-kr-400.woff2) format("woff2");font-weight:100 500;font-display:swap;unicode-range:U+3131-318E,U+AC00-D7A3}
@font-face{font-family:"PR Round";src:url(/fonts/pr-round-kr-800.woff2) format("woff2");font-weight:600 900;font-display:swap;unicode-range:U+3131-318E,U+AC00-D7A3}
@font-face{font-family:"PR Sans";src:url(/fonts/pr-sans-kr-900.woff2) format("woff2");font-weight:900;font-display:swap}
:root{--bg:#0a0f2c;--surf:#131b4a;--surf2:#1a2358;--line:rgba(170,190,255,.12);--line2:rgba(170,190,255,.2);--tx:#f5f7ff;--tx2:#b9c2e8;--tx3:#8791c2;--neon:#5ce1ff;--c:#5ce1ff}
body.k-hop{--c:#3FE08C}body.k-stack{--c:#FFC043}body.k-raid{--c:#FF5C9A}body.k-racer{--c:#3FB0FF}body.k-numbers{--c:#FF9F43}body.k-blocks{--c:#6F7DFF}
body.k-logic{--c:#FF5A6A}body.k-snake{--c:#2EE59D}body.k-shooter{--c:#A98BFF}body.k-potion{--c:#35D6D2}body.k-bubo{--c:#FF6FB5}body.k-solitaire{--c:#F5C451}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:radial-gradient(60% 50% at 30% 20%,color-mix(in srgb,var(--c) 22%,transparent),transparent 70%),var(--bg);color:var(--tx);font-family:"PR Round",system-ui,sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
header,main,footer{max-width:1120px;margin:auto;padding:24px}
header{display:flex;justify-content:space-between;gap:20px;align-items:center}
.brand{display:flex;align-items:center;gap:9px;font:900 19px/1 "PR Sans","PR Round",system-ui,sans-serif;letter-spacing:.06em}
.brand .mark{width:34px;height:34px;flex:none;border-radius:10px;padding:3px;background:var(--surf);box-shadow:0 0 0 1px var(--line2);overflow:hidden;isolation:isolate}
.brand img{display:block;width:100%;height:100%;transform:scale(1.32);mix-blend-mode:lighten}
.brand b{background:linear-gradient(90deg,#fff 0,#fff 55%,var(--neon));-webkit-background-clip:text;background-clip:text;color:transparent}
header>a:last-child{height:38px;display:inline-flex;align-items:center;padding:0 14px;border-radius:999px;border:1px solid var(--line);font-size:14px;font-weight:700;color:var(--tx2)}
header>a:last-child:hover{color:#fff;border-color:var(--line2)}
.gameHero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center;padding:24px 0}
.gameMedia{border-radius:24px;overflow:hidden;background:radial-gradient(120% 90% at 50% 30%,color-mix(in srgb,var(--c) 30%,#0a0f2c),#070b24 78%);aspect-ratio:4/5;max-height:600px;box-shadow:0 40px 80px -30px color-mix(in srgb,var(--c) 80%,transparent),0 0 0 1px color-mix(in srgb,var(--c) 40%,transparent)}
.gameMedia img,.gameMedia video{display:block;width:100%;height:100%;object-fit:contain}
.placeholder{height:100%;display:grid;place-items:center;font-size:120px;color:var(--tx3)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;margin:0;font-size:13px;font-weight:800;color:var(--tx2)}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c);box-shadow:0 0 8px var(--c)}
h1{font:900 clamp(34px,5vw,60px)/1.1 "PR Sans","PR Round",system-ui,sans-serif;letter-spacing:-.01em;overflow-wrap:anywhere;margin:14px 0 16px}
.summary{font-size:18px;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--tx2);margin:0}
.play{display:flex;align-items:center;justify-content:center;height:56px;border-radius:999px;margin:28px 0 12px;font-weight:800;font-size:18px;color:#071028;background:linear-gradient(180deg,color-mix(in srgb,var(--c) 70%,#fff),var(--c));box-shadow:0 10px 28px -8px var(--c),inset 0 1px 0 rgba(255,255,255,.5);transition:transform .15s}
.play:active{transform:scale(.97)}
.share{display:flex;gap:10px}
.share button{flex:1;min-height:48px;border:1px solid var(--line2);background:var(--surf);color:var(--tx);font:700 15px/1 inherit;border-radius:999px;cursor:pointer}
.share button:hover{background:var(--surf2)}
small,#shareStatus{color:var(--tx3);font-size:13px}
.instructions{margin-top:12px;padding:8px 24px 24px;border:1px solid var(--line);border-radius:20px;background:var(--surf);max-width:720px}
.instructions h2{font-size:18px;margin:22px 0 4px}
.instructions p{margin:0;color:var(--tx2);white-space:pre-wrap;overflow-wrap:anywhere}
.more{display:inline-flex;align-items:center;height:44px;margin-top:24px;padding:0 20px;border:1px solid var(--line2);border-radius:999px;font-weight:700;color:var(--tx2)}
.more:hover{color:#fff}
footer{color:var(--tx3);font-size:13px}
.linkFallback input{display:block;width:100%;padding:10px;background:var(--surf);color:var(--tx);border:1px solid var(--line2);border-radius:10px}
button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--neon);outline-offset:3px}
@media(max-width:700px){header,main,footer{padding:18px}.gameHero{grid-template-columns:1fr;gap:24px;padding-top:6px}.gameMedia{max-height:420px;width:100%;aspect-ratio:1}.summary{font-size:16px}.gameInfo{min-width:0}.instructions{padding:4px 18px 20px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
.likes{margin:18px 0 -10px;font-weight:800;color:#ff8fc6}
.comments{margin-top:16px;padding:8px 24px 24px;border:1px solid var(--line);border-radius:20px;background:var(--surf);max-width:720px}
.comments h2{font-size:18px;margin:22px 0 10px}.comments ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.comments li{padding:12px 14px;border-radius:14px;background:var(--surf2)}.comments li b{font-size:13px;color:var(--tx2)}.comments li p{margin:4px 0 0;white-space:pre-wrap;overflow-wrap:anywhere}
.comments .empty{color:var(--tx3);margin:0}.comments .write{display:inline-flex;margin-top:14px;font-weight:800;color:var(--neon)}

header .brand .mark{background:transparent;padding:0;overflow:visible}header .brand .mark img{object-fit:contain;transform:none}header .brand b{letter-spacing:-.04em}