@view-transition { navigation: auto; }

.lobby-main { padding-top: clamp(36px, 6vw, 62px); }
.lobby-intro { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin: 0 8px 28px; }
.lobby-eyebrow { margin: 0 0 12px; color: var(--cyan); font: 700 .7rem var(--mono); letter-spacing: .12em; }
.lobby-intro h1 { font-size: clamp(2.9rem, 7vw, 5.7rem); line-height: .92; letter-spacing: -.075em; }
.lobby-intro h1 span { color: var(--pink); text-shadow: 0 0 30px rgba(255,83,200,.26); }
.lobby-lede { max-width: 420px; margin: 15px 0 0; color: #b6b8d2; line-height: 1.6; }
.lobby-hint { display: flex; align-items: center; gap: 5px; margin: 0 0 4px; color: #9497b5; font-size: .7rem; white-space: nowrap; }
.lobby-hint kbd { padding: 4px 6px; border: 1px solid var(--line); border-radius: 5px; background: #17182d; color: #cdd0e9; font: 700 .65rem var(--mono); }
.arcade-room { position: relative; overflow: hidden; padding: 18px 24px 0; border: 1px solid rgba(172,174,255,.22); border-radius: 18px; background: linear-gradient(180deg, rgba(16,17,38,.94), rgba(9,10,25,.97) 66%); box-shadow: 0 24px 85px rgba(0,0,0,.44), inset 0 1px rgba(255,255,255,.06); isolation: isolate; }
.arcade-room::before { position: absolute; z-index: -1; inset: 0 0 32%; content: ""; background: radial-gradient(ellipse at 50% 15%, rgba(123,91,255,.18), transparent 54%), linear-gradient(90deg, transparent 8%, rgba(97,244,255,.04) 8.2%, transparent 8.5%, transparent 91%, rgba(255,83,200,.04) 91.2%, transparent 91.5%); }
.room-sign { width: fit-content; margin: 0 auto 15px; padding: 8px 18px; border: 1px solid rgba(97,244,255,.26); border-radius: 999px; background: rgba(6,8,23,.75); color: var(--cyan); box-shadow: 0 0 24px rgba(97,244,255,.12); font: 800 .63rem var(--mono); letter-spacing: .18em; }
.room-sign span { margin-right: 7px; color: var(--pink); }
.room-sign small { margin-left: 9px; color: #8486a6; font-size: .52rem; letter-spacing: .09em; }
.cabinet-row { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); align-items: end; gap: clamp(10px,2vw,22px); padding: 0 5px; perspective: 1100px; }
.cabinet { --cabinet-accent: var(--cyan); --cabinet-glow: rgba(97,244,255,.2); position: relative; display: flex; min-width: 0; flex-direction: column; align-items: stretch; padding: 9px 9px 11px; border: 1px solid color-mix(in srgb, var(--cabinet-accent) 34%, #61658a); border-bottom-width: 5px; border-radius: 12px 12px 8px 8px; background: linear-gradient(150deg, #262840, #131529 42%, #0c0e1d); box-shadow: 0 16px 25px rgba(0,0,0,.43), 0 0 24px var(--cabinet-glow), inset 0 1px rgba(255,255,255,.11); color: var(--ink); text-align: left; text-decoration: none; transform: rotateY(-2deg); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.cabinet:nth-child(even) { transform: rotateY(2deg); }
.cabinet:hover, .cabinet:focus-visible { z-index: 2; transform: translateY(-8px) scale(1.025); border-color: var(--cabinet-accent); box-shadow: 0 22px 34px rgba(0,0,0,.48), 0 0 34px var(--cabinet-glow), inset 0 1px rgba(255,255,255,.14); }
.cabinet:focus-visible { outline: 3px solid var(--cabinet-accent); outline-offset: 5px; }
.cabinet-snake { --cabinet-accent: #a5ffcf; --cabinet-glow: rgba(111,255,193,.18); }
.cabinet-breaker { --cabinet-accent: #a38bff; --cabinet-glow: rgba(142,118,255,.2); }
.cabinet-racer { --cabinet-accent: #ff8eac; --cabinet-glow: rgba(255,83,200,.2); }
.cabinet-topline { display: flex; align-items: center; gap: 4px; height: 16px; color: #72758f; font: 700 .46rem var(--mono); }
.cabinet-topline i { width: 5px; height: 5px; border-radius: 50%; background: var(--cabinet-accent); box-shadow: 0 0 7px var(--cabinet-accent); }
.cabinet-topline span { margin-left: auto; letter-spacing: .1em; }
.cabinet-marquee { display: grid; min-height: 33px; place-items: center; margin: 5px 0 7px; border: 1px solid color-mix(in srgb, var(--cabinet-accent) 45%, transparent); border-radius: 4px; background: rgba(5,7,20,.92); color: var(--cabinet-accent); text-shadow: 0 0 15px var(--cabinet-accent); font: 900 clamp(.58rem,1.4vw,.83rem) var(--mono); letter-spacing: .08em; white-space: nowrap; }
.cabinet-screen { position: relative; display: block; overflow: hidden; aspect-ratio: 1.3; border: 4px solid #090b19; border-radius: 5px; background: #080a18; box-shadow: inset 0 0 22px rgba(0,0,0,.75), 0 1px 0 rgba(255,255,255,.07); }
.cabinet-screen::after { position: absolute; inset: 0; content: ""; background: linear-gradient(117deg, rgba(255,255,255,.11), transparent 30%, transparent 72%, rgba(255,255,255,.03)); pointer-events: none; }
.cabinet-controls { display: flex; align-items: center; justify-content: center; gap: 6px; height: 28px; margin-top: 6px; color: #9799b3; }
.cabinet-controls b { margin-inline: auto; color: #6f718d; font: 700 .48rem var(--mono); letter-spacing: .13em; }
.cabinet-controls i { width: 7px; height: 7px; border: 1px solid var(--cabinet-accent); border-radius: 50%; box-shadow: 0 0 7px var(--cabinet-accent); }
.cabinet-name { margin: 7px 1px 2px; font-size: clamp(.74rem,1.55vw,.9rem); font-weight: 850; letter-spacing: -.025em; }
.cabinet-prompt { margin-inline: 1px; color: #9799b4; font-size: clamp(.52rem,1.1vw,.65rem); line-height: 1.4; }
.hop-screen { background: radial-gradient(ellipse at 75% 20%, rgba(142,118,255,.19), transparent 65%), #080a18; }
.hop-star { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #c7faff; box-shadow: 0 0 6px #61f4ff; }
.star-a { top: 20%; left: 30%; }.star-b { top: 43%; right: 20%; }
.hop-platform { position: absolute; bottom: 22%; width: 28%; height: 7px; border: 1px solid var(--cyan); border-radius: 8px; box-shadow: 0 0 8px var(--cyan); }
.platform-a { left: 14%; }.platform-b { right: 12%; border-color: var(--pink); box-shadow: 0 0 8px var(--pink); }
.hop-ball { position: absolute; bottom: 38%; left: 37%; width: 9px; height: 9px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); }
.snake-screen { background: linear-gradient(#0b1a20 1px,transparent 1px),linear-gradient(90deg,#0b1a20 1px,transparent 1px),#071116; background-size: 10px 10px; }
.snake-coil { position:absolute; top:27%;left:22%; width:48%;height:41%; border:6px solid #a5ffcf; border-right-color:transparent; border-radius:50% 38% 42% 48%; filter:drop-shadow(0 0 6px #74ffbf); }
.snake-food { position:absolute;top:47%;right:20%;width:7px;height:7px;border-radius:50%;background:#ffdc76;box-shadow:0 0 11px #ffdc76; }
.breaker-screen { background:radial-gradient(ellipse at 50% 75%,rgba(97,244,255,.12),transparent 55%),#0a0b1b; }
.brick-row { position:absolute;left:12%;right:12%;height:11px;border-radius:2px;background:linear-gradient(90deg,#ff53c8 32%,transparent 32% 35%,#a38bff 35% 67%,transparent 67% 70%,#61f4ff 70%);box-shadow:0 0 9px rgba(142,118,255,.55); }
.row-one { top:20%; }.row-two { top:34%;opacity:.8; }
.breaker-ball { position:absolute;bottom:34%;left:56%;width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 0 11px #61f4ff; }
.breaker-paddle { position:absolute;bottom:17%;left:37%;width:27%;height:5px;border-radius:9px;background:#61f4ff;box-shadow:0 0 9px #61f4ff; }
.racer-screen { background:linear-gradient(transparent 62%,rgba(255,83,200,.1)),#101020; }
.racer-screen::before { position:absolute;left:24%;right:24%;top:0;bottom:0;content:"";background:linear-gradient(108deg,transparent 49%,rgba(255,255,255,.16) 50%,transparent 51%),linear-gradient(72deg,transparent 49%,rgba(255,255,255,.16) 50%,transparent 51%); }
.road-line { position:absolute;top:0;left:50%;width:2px;height:100%;background:repeating-linear-gradient(#fff 0 9px,transparent 9px 20px);opacity:.44; }
.racer-hazard,.racer-car { position:absolute;width:15px;height:24px;border-radius:5px 5px 3px 3px; }
.hazard-a { top:22%;left:34%;background:#ff53c8;box-shadow:0 0 10px #ff53c8; }.hazard-b { top:47%;right:31%;background:#a38bff;box-shadow:0 0 10px #a38bff; }
.racer-car { bottom:13%;left:48%;background:#61f4ff;box-shadow:0 0 11px #61f4ff; }
.room-floor { display:flex; justify-content:space-between; align-items:center; min-height:45px; margin:0 -24px; padding:0 29px; background:linear-gradient(0deg,#080916,#101126 82%,transparent); color:#656985; font:700 .5rem var(--mono); letter-spacing:.15em; }
.room-floor span:first-child { color:#9b9db8; }
.lobby-note { margin:14px 8px 0; color:#8486a0; font-size:.69rem; }
.sr-only { position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
::view-transition-old(arcade-cabinet) { animation: cabinet-pull .35s cubic-bezier(.2,.7,.2,1) both; }
::view-transition-new(arcade-cabinet) { animation: cabinet-zoom .48s cubic-bezier(.2,.7,.2,1) both; }
@keyframes cabinet-zoom { from { opacity:.25; transform:scale(.42); filter:blur(4px); } to { opacity:1; transform:scale(1); filter:blur(0); } }
@keyframes cabinet-pull { from { opacity:1; transform:scale(1); } to { opacity:.2; transform:scale(.42); } }
@media (max-width:850px) { .lobby-intro { display:block; }.lobby-hint { margin-top:18px; }.cabinet-row { grid-template-columns:repeat(2,minmax(0,1fr)); max-width:630px; margin-inline:auto; row-gap:16px; }.cabinet { transform:none!important; }.cabinet-name { font-size:.92rem; }.cabinet-prompt { font-size:.66rem; }.arcade-room { padding-inline:18px; } .room-floor { margin-inline:-18px; } }
@media (max-width:480px) { .lobby-main { padding-top:31px; }.lobby-intro { margin-inline:3px; }.lobby-intro h1 { font-size:clamp(2.8rem,13vw,4rem); }.lobby-lede { font-size:.87rem; }.lobby-hint { flex-wrap:wrap; white-space:normal; }.arcade-room { padding:15px 10px 0; border-radius:13px; }.cabinet-row { gap:10px; padding:0 1px; }.cabinet { padding:7px 6px 9px; border-radius:9px 9px 6px 6px; }.cabinet-topline { height:12px; }.cabinet-topline i { width:4px;height:4px; }.cabinet-marquee { min-height:28px; margin-block:4px 5px; font-size:.54rem; letter-spacing:.04em; }.cabinet-screen { border-width:3px; }.cabinet-controls { height:22px;margin-top:4px; }.cabinet-controls b { font-size:.4rem; }.cabinet-name { font-size:.77rem; }.cabinet-prompt { font-size:.54rem; }.room-floor { min-height:38px;margin-inline:-10px;padding-inline:12px;font-size:.41rem;letter-spacing:.07em; } }
@media (prefers-reduced-motion: reduce) { ::view-transition-old(arcade-cabinet),::view-transition-new(arcade-cabinet) { animation:none; } .cabinet { transition:none; } }