/* arcade.bsn.services — shared styles for lobby pages and game shells */
:root {
  --hh-red: #E4002B; --hh-navy: #0B1F3A; --hh-dark: #07182E; --hh-ice: #7FDBFF;
  --wr-gold: #F2C230; --wr-red: #C8102E; --wr-denim: #3C5A99; --wr-dark: #1B140E; --wr-cream: #FFF6E5;
  --hud: "Chakra Petch", "Segoe UI", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #000; color: #fff; font-family: var(--hud); -webkit-font-smoothing: antialiased; }
a { color: inherit; }

/* ---------- game shell ---------- */
body.game { height: 100vh; overflow: hidden; display: flex; align-items: center; justify-content: center; background: #000; }
canvas#game { display: block; outline: none; }
.corner { position: fixed; bottom: 10px; left: 12px; display: flex; gap: 8px; z-index: 5; opacity: 0.55; transition: opacity .2s; }
.corner:hover { opacity: 1; }
.corner a, .corner button { font: 700 13px var(--hud); letter-spacing: .06em; text-transform: uppercase; color: #fff; text-decoration: none; background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.35); border-radius: 6px; padding: 6px 10px; cursor: pointer; }
.corner a:hover, .corner button:hover { background: rgba(255,255,255,.15); }
.loading { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.7); font: 600 18px var(--hud); letter-spacing: .2em; pointer-events: none; }

/* ---------- lobby pages ---------- */
body.hub { min-height: 100vh; background: #05101f; position: relative; }
.hub-bg { position: fixed; inset: 0; background: center / cover no-repeat; z-index: 0; }
.hub-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(3,8,18,.55) 0%, rgba(3,8,18,.75) 45%, rgba(3,8,18,.96) 100%); }
.hub-wrap { position: relative; z-index: 1; max-width: 1320px; margin: 0 auto; padding: 36px 24px 70px; }
.hub-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 26px; }
.crumb { display: flex; gap: 10px; align-items: center; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.crumb a { text-decoration: none; padding: 6px 10px; border: 1px solid rgba(255,255,255,.25); border-radius: 6px; }
.crumb a:hover { background: rgba(255,255,255,.12); }
.hub-tools { display: flex; gap: 10px; }
.btn { font: 700 13px var(--hud); letter-spacing: .1em; text-transform: uppercase; color: #fff; background: rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,.35); border-radius: 8px; padding: 8px 14px; cursor: pointer; text-decoration: none; }
.btn:hover { background: rgba(255,255,255,.14); }
.btn.primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary, #fff); }
.hero { text-align: center; margin: 10px 0 34px; }
.hero h1 { font-family: var(--title-font); font-weight: 400; font-size: clamp(48px, 9vw, 112px); line-height: 1; margin: 0; letter-spacing: .02em; color: #fff; text-shadow: 0 0 24px var(--glow), 0 4px 0 rgba(0,0,0,.6), 0 10px 40px rgba(0,0,0,.8); }
.hero h1 span { color: var(--primary); }
.hero p { margin: 14px auto 0; max-width: 720px; font-size: clamp(16px, 2vw, 21px); color: rgba(255,255,255,.85); }
.hero .kbd-hint { margin-top: 14px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
kbd { font: 700 12px var(--hud); background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.5); border-bottom-width: 3px; border-radius: 5px; padding: 2px 7px; color: #fff; }

.cabinets { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 26px; }
.cab { position: relative; display: block; border-radius: 18px; overflow: hidden; background: #0b1526; border: 2px solid rgba(255,255,255,.14); box-shadow: 0 14px 40px rgba(0,0,0,.55); text-decoration: none; color: #fff; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; outline: none; }
.cab:hover, .cab:focus-visible, .cab.sel { transform: translateY(-8px) scale(1.02); border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent), 0 0 40px var(--glow), 0 24px 60px rgba(0,0,0,.7); }
.cab .art { position: relative; aspect-ratio: 2 / 3; overflow: hidden; background: #000; }
.cab .art img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.cab:hover .art img, .cab.sel .art img { transform: scale(1.06); }
.cab .num { position: absolute; top: 12px; left: 12px; width: 38px; height: 38px; border-radius: 10px; background: rgba(0,0,0,.7); border: 1px solid rgba(255,255,255,.5); display: grid; place-items: center; font: 700 18px var(--hud); }
.cab .badge { position: absolute; top: 12px; right: 12px; padding: 5px 9px; border-radius: 6px; background: var(--primary); color: var(--on-primary, #fff); font: 700 11px var(--hud); letter-spacing: .12em; text-transform: uppercase; }
.cab .meta { padding: 14px 16px 16px; background: linear-gradient(180deg, rgba(8,16,30,.6), rgba(8,16,30,1)); }
.cab h3 { margin: 0; font-family: var(--title-font); font-weight: 400; font-size: 27px; letter-spacing: .02em; color: #fff; text-shadow: 0 0 14px var(--glow); }
.cab .tag { margin: 4px 0 10px; font-size: 14px; color: rgba(255,255,255,.75); }
.cab .keys { font-size: 12px; color: rgba(255,255,255,.55); letter-spacing: .04em; margin-bottom: 10px; }
.cab .top { margin: 0; padding: 10px 12px; list-style: none; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.1); border-radius: 10px; min-height: 92px; }
.cab .top li { display: flex; justify-content: space-between; font-size: 13px; padding: 2px 0; color: rgba(255,255,255,.85); }
.cab .top li b { color: var(--accent); font-weight: 700; }
.cab .top .ttl { color: var(--accent); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 4px; }
.cab .top .empty { color: rgba(255,255,255,.45); font-style: italic; }
.cab .play { margin-top: 12px; display: block; text-align: center; padding: 10px; border-radius: 10px; background: var(--primary); color: var(--on-primary, #fff); font: 700 15px var(--hud); letter-spacing: .16em; text-transform: uppercase; }
.hub-foot { margin-top: 40px; text-align: center; font-size: 13px; color: rgba(255,255,255,.55); letter-spacing: .06em; }
.hub-foot a { color: rgba(255,255,255,.75); }

/* theme variables */
.theme-hh { --primary: var(--hh-red); --accent: var(--hh-ice); --glow: rgba(127,219,255,.55); --title-font: "Russo One", "Arial Black", sans-serif; --on-primary: #fff; }
.theme-wr { --primary: var(--wr-gold); --accent: var(--wr-gold); --glow: rgba(242,194,48,.5); --title-font: "Rye", Georgia, serif; --on-primary: #1B140E; }
.theme-wr .cab { background: #1a1410; }
.theme-wr .cab .meta { background: linear-gradient(180deg, rgba(26,20,16,.6), rgba(26,20,16,1)); }

/* landing doors */
.doors { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 28px; margin-top: 30px; }
.door { position: relative; display: block; min-height: 420px; border-radius: 22px; overflow: hidden; border: 2px solid rgba(255,255,255,.15); text-decoration: none; color: #fff; box-shadow: 0 20px 60px rgba(0,0,0,.6); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; outline: none; }
.door img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.door:hover img, .door.sel img, .door:focus-visible img { transform: scale(1.05); }
.door .shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.05) 30%, rgba(0,0,0,.85) 100%); }
.door .label { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 28px 28px; }
.door h2 { margin: 0; font-family: var(--title-font); font-weight: 400; font-size: clamp(40px, 5vw, 64px); line-height: 1; text-shadow: 0 0 20px var(--glow), 0 4px 0 rgba(0,0,0,.6); }
.door p { margin: 8px 0 0; font-size: 16px; color: rgba(255,255,255,.85); max-width: 460px; }
.door .enter { display: inline-block; margin-top: 14px; padding: 9px 16px; border-radius: 8px; background: var(--primary); color: var(--on-primary, #fff); font: 700 13px var(--hud); letter-spacing: .16em; text-transform: uppercase; }
.door:hover, .door.sel, .door:focus-visible { transform: translateY(-6px); border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent), 0 0 50px var(--glow), 0 30px 70px rgba(0,0,0,.7); }
.door.soon { filter: saturate(.5); }
.door.soon .enter { background: rgba(255,255,255,.2); color: #fff; }
@media (max-width: 640px) { .hub-wrap { padding: 22px 14px 50px; } .cabinets { gap: 18px; } }