.bar nav a[aria-current="page"]{text-decoration:underline;text-underline-offset:.3em;text-decoration-thickness:2px}
[hidden]{display:none!important}
/* lobby */
.lobby{padding:clamp(1.75rem,4vw,3rem) 0 clamp(3rem,6vw,5rem)}
.lobby h1{font-size:clamp(2.25rem,5vw,3.25rem);line-height:1.05}
.lobby .lead{margin:.5rem 0 0}
.lobby .cats{margin-top:1.5rem}
.tiles{margin-top:1.75rem;display:grid;grid-template-columns:repeat(auto-fill,minmax(11rem,1fr));gap:1.75rem 1.25rem}
.tile{display:flex;flex-direction:column;gap:.2rem;text-decoration:none;color:var(--ink)}
.tile .art{position:relative;display:block;aspect-ratio:4/5;border-radius:1rem;overflow:hidden;border:1.5px solid var(--ink);background:var(--sheet);margin-bottom:.6rem}
.tile img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0}
.tile .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:.4rem;font-weight:600;background:var(--accent);color:var(--on-accent);padding:.6rem 1.1rem;border-radius:999px;box-shadow:0 3px 0 var(--ink);opacity:0;transition:opacity .15s}
.tile .play svg{width:1rem;height:1rem;fill:currentColor}
.tile:hover .play,.tile:focus-visible .play{opacity:1}
.tile b{font-weight:600;font-size:1.0625rem;line-height:1.25}
.tile small{font-size:.875rem;color:var(--muted)}
@media (max-width:600px){.tiles{grid-template-columns:1fr 1fr;gap:1.25rem .9rem}.tile .art{border-radius:.8rem}}
/* game page */
.gp-top{display:flex;align-items:center;gap:1rem;height:3.5rem}
.gp-top .back{display:inline-flex;align-items:center;gap:.1rem;font-weight:600;text-decoration:none;min-height:44px;margin-left:-.35rem}
.gp-top .back svg{width:1.4rem;height:1.4rem;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.gp-name{color:var(--muted)}
.gp-name::before{content:"/";margin-right:1rem}
.gp-logo{display:none}
.gbox-wrap{max-width:80rem;margin:0 auto;padding:0 clamp(1.25rem,4vw,2.5rem)}
.gbox{position:relative;aspect-ratio:16/9;max-height:calc(var(--vh,100vh) - 10rem);margin:0 auto;border-radius:1rem;overflow:hidden;border:1.5px solid var(--ink);background:#0d0a08}
.gbox iframe{display:block;width:100%;height:100%;border:0}
.state{position:absolute;inset:0;background:#0d0a08;display:grid;place-content:center;justify-items:center;gap:.6rem;text-align:center;color:#f1e8d6;padding:1.5rem}
.state p{margin:0}
.state .btn{margin-top:.75rem;font:inherit;font-weight:600;border:0;cursor:pointer}
.spin{width:2.5rem;height:2.5rem;border-radius:50%;border:3px solid rgba(241,232,214,.25);border-top-color:#f1e8d6;animation:sp 1s linear infinite}
@keyframes sp{to{transform:rotate(1turn)}}
.info{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(2rem,5vw,4.5rem);padding:clamp(2rem,4vw,3rem) clamp(1.25rem,4vw,2.5rem) clamp(2.5rem,5vw,3.5rem)}
.info .cat{font-family:var(--font-type);font-size:.8125rem;padding:.15rem .5rem;border-radius:.35rem;background:var(--panel)}
.info h1{margin-top:.6rem;font-size:clamp(2rem,4vw,2.75rem)}
.info .lead{margin:.6rem 0 0;max-width:34rem}
.info h2{font-family:var(--font-body);font-weight:600;font-size:1.125rem;letter-spacing:0;margin-top:1.75rem}
.data h2{margin-top:0}
.feats{margin:.6rem 0 0;padding-left:1.2rem}
.feats li{margin:.25rem 0}
.data dl{margin:.75rem 0 0;border-top:1.5px solid var(--ink)}
.data dl div{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 0;border-bottom:1px solid color-mix(in srgb,var(--ink) 25%,transparent)}
.data dt{color:var(--muted)}
.data dd{margin:0;font-weight:600;text-align:right}
.buy{background:var(--panel);border-block:2px solid var(--ink);padding:clamp(2rem,4vw,3rem) 0}
.buy h2{font-size:clamp(1.6rem,3.2vw,2.25rem)}
.buy p{margin:.5rem 0 0}
.buy .acts{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.25rem}
.more{padding:clamp(2.5rem,5vw,3.5rem) clamp(1.25rem,4vw,2.5rem) clamp(3rem,6vw,4.5rem)}
.more h2{font-size:clamp(1.5rem,3vw,2rem)}
.tiles.row{grid-template-columns:repeat(5,minmax(10rem,1fr))}
@media (max-width:600px){
 body:has(main.gp) > .wrap:has(.bar){display:none}
 .gp-top{position:relative;height:3.25rem;border-bottom:2px solid var(--ink);padding:0 1rem}
 .gp-name{display:none}
 .gp-logo{display:block;position:absolute;left:50%;transform:translateX(-50%);font-family:var(--font-display);font-size:1.375rem;text-decoration:none}
 .gbox-wrap{padding:0}
 .gbox{aspect-ratio:auto;height:calc(var(--vh,100dvh) - 3.25rem);max-height:none;border-radius:0;border:0}
 .info{grid-template-columns:1fr;gap:2rem}
 .tiles.row{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:9.5rem;overflow-x:auto;margin:1.25rem -1.25rem 0;padding:0 1.25rem .5rem}
}
@media (max-width:600px){.lobby .cats{flex-wrap:nowrap;overflow-x:auto;margin-inline:-1.25rem;padding:0 1.25rem .25rem;scrollbar-width:none}.lobby .cats button{flex:none}}