@font-face{font-family:Syne;src:url('/assets/fonts/Syne.ttf');font-display:swap}
@font-face{font-family:Manrope;src:url('/assets/fonts/Manrope.ttf');font-display:swap}
:root{color-scheme:dark;--bg:#15141d;--fg:#f6ecdc;--soft:#c5b8c9;--rule:#62556a;--accent:#ff9c7f;font:15px Manrope,system-ui,sans-serif}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg)}
a{color:inherit}
button{font:inherit;cursor:pointer}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.arcade-shell{width:min(1480px,100%);margin:auto;padding:0 max(22px,env(safe-area-inset-right)) max(28px,env(safe-area-inset-bottom)) max(22px,env(safe-area-inset-left))}
.arcade-top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;min-height:66px;border-bottom:1px solid var(--rule);padding-top:env(safe-area-inset-top)}
.arcade-top img{width:22px;height:22px}
.arcade-top a{display:inline-flex;align-items:center;gap:8px;min-height:44px;text-decoration:none}
.arcade-top nav{display:flex;gap:14px;font-size:.76rem}
.arcade-top nav [aria-current]{color:var(--accent)}
.arcade-hero{position:relative;isolation:isolate;display:grid;gap:clamp(14px,3vw,32px);align-items:end;grid-template-columns:minmax(0,1fr) auto;margin:clamp(12px,2vw,23px) 0 18px;padding:clamp(28px,5.4vw,81px) clamp(14px,4.5vw,64px);overflow:hidden;border:1px solid #5d5066;background:linear-gradient(110deg,#232232 6%,#2e2335 56%,#4e2b3a 100%)}
.arcade-hero::before,.arcade-hero::after{content:'';position:absolute;z-index:-1;inset:-46% -24% -48% 44%;border:1px solid #ffb7a087;border-radius:50%;transform:rotate(-20deg);pointer-events:none}
.arcade-hero::after{inset:-18% -32% -64% 48%;border-color:#d7b8dc64;transform:rotate(22deg)}
.arcade-hero h1{font:700 clamp(3.05rem,9.2vw,8.8rem)/.86 Syne,system-ui;margin:0;letter-spacing:-.072em;overflow-wrap:anywhere}
.arcade-hero p{max-width:44ch;color:#e9dce7;margin:16px 0 0;line-height:1.52}
.arcade-hero button,.arcade-actions a{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:9px 15px;border:1px solid #bba6b2;border-radius:3px;background:#272332;color:var(--fg);text-decoration:none;text-align:center}
.arcade-hero button{background:var(--accent);border-color:var(--accent);color:#26191f;font-weight:800}
.arcade-games{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.arcade-card{min-width:0;display:grid;grid-template-rows:auto 1fr;border:1px solid var(--rule);background:#232131}
.arcade-cover{position:relative;min-width:0;aspect-ratio:1.84;overflow:hidden;display:grid;place-items:center;background:#242630;border-bottom:1px solid var(--rule)}
.arcade-card--confluence .arcade-cover{background:radial-gradient(ellipse at 55% 32%,#575664 0,#232732 75%)}
.arcade-art{width:100%;height:100%;min-height:0;display:block;object-fit:cover}
.arcade-card--confluence .arcade-art{width:50%;height:auto;aspect-ratio:1;object-fit:contain;transform:rotate(-10deg) scale(.82);box-shadow:0 18px 32px #0b0a1080;border:1px solid #8c85924f}
.arcade-number{position:absolute;inset:12px auto auto 12px;padding:5px 7px;background:#1a1723e8;border:1px solid #837483;color:#ffd0b5;font:700 .7rem Manrope;letter-spacing:.09em}
.arcade-info{padding:clamp(17px,3vw,36px);display:flex;flex-direction:column;align-items:start}
.arcade-game-name{display:flex;align-items:center;gap:8px;max-width:100%}
.arcade-game-name img{width:clamp(30px,4vw,52px);height:auto;flex:none}
.arcade-info h2{font:650 clamp(2rem,4.9vw,4.8rem)/1 Syne,system-ui;margin:0 0 .18em;letter-spacing:-.048em;overflow-wrap:anywhere}
.arcade-info p{color:var(--soft);line-height:1.55;max-width:49ch;margin:0 0 16px}
.arcade-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}
.arcade-actions a:first-child{background:var(--fg);border-color:var(--fg);color:#231b2b;font-weight:750}
.arcade-actions a:hover{border-color:var(--accent)}
.arcade-footer{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:18px 0;border-top:1px solid var(--rule);margin-top:28px;color:var(--soft);font-size:.8rem}
.arcade-footer nav{display:flex;gap:14px;flex-wrap:wrap}
.arcade-footer button{border:0;background:none;padding:0;color:inherit;text-decoration:underline}
@media(max-width:690px){.arcade-hero{grid-template-columns:1fr;justify-items:start}.arcade-games{grid-template-columns:1fr}.arcade-shell{padding-inline:12px}.arcade-top nav{gap:9px}.arcade-cover{aspect-ratio:1.95}.arcade-card--confluence .arcade-art{width:48%}.arcade-actions a{padding-inline:11px}}
/* Stadium architecture belongs to the lobby; gameplay retains its own controls. */
body[data-experience=experience]{background:#15131d}
.arcade-shell{--stadium-rail:#716077;--stadium-ink:#211a2c}
.arcade-top{padding-inline:clamp(2px,1vw,14px)}
.arcade-hero.arena-hero{min-height:clamp(250px,29vw,425px);margin:clamp(14px,2vw,26px) 0 0;padding:clamp(28px,6vw,82px) clamp(20px,5vw,72px);align-items:end;border-color:var(--stadium-rail);background:#241b2c}
.arcade-hero.arena-hero::before,.arcade-hero.arena-hero::after{content:none}
.arena-architecture{position:absolute;inset:0;z-index:-1;overflow:hidden;background:linear-gradient(90deg,#171321 7%,#21192b76 65%,#291d32 100%),radial-gradient(ellipse at 73% 0,#be7f8e99 0,transparent 66%),#271e32}
.arena-architecture::before{content:"";position:absolute;inset:-57% -15% 8% 19%;border-radius:50%;background:repeating-radial-gradient(ellipse at 51% 6%,transparent 0 28px,#e7b6b54f 29px 30px,#100f1c65 31px 36px,transparent 37px 48px);transform:rotate(-8deg);mask-image:linear-gradient(100deg,transparent,#000 60%,#000)}
.arena-architecture::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#191524 1%,transparent 80%),linear-gradient(0deg,#201828 0,transparent 45%);pointer-events:none}
.arena-hero .arena-floor{inset:43% -18% -38%;z-index:0;opacity:.75;background:repeating-linear-gradient(90deg,transparent 0 calc(9% - 1px),#f9d8db5e calc(9% - 1px) 9%),repeating-linear-gradient(0deg,transparent 0 calc(17% - 1px),#f9d8db64 calc(17% - 1px) 17%);transform:perspective(380px) rotateX(53deg);mask-image:radial-gradient(ellipse at 64% 64%,#000 0,transparent 70%)}
.arena-floodlights{position:absolute;inset:0;opacity:.7;background:conic-gradient(from 150deg at 73% -10%,transparent 0deg,#ffe4ca73 17deg,#ffd4bb00 42deg,transparent 360deg),conic-gradient(from 151deg at 88% -9%,transparent 0deg,#ffe4ca55 16deg,#ffd4bb00 35deg,transparent 360deg);mix-blend-mode:screen}
.arena-brand{display:flex;align-items:center;gap:clamp(6px,1.2vw,19px);max-width:100%}
.arena-brand > img{width:clamp(42px,8vw,100px);height:auto;flex:none;margin-inline-start:-.13em}
.arcade-hero .arena-brand h1{min-width:0;letter-spacing:-.068em;font-size:clamp(2.65rem,8.5vw,8rem);line-height:.94;color:#fff3e9;overflow-wrap:normal}
.arena-brandline{display:flex;align-items:baseline;gap:.27em;font:720 clamp(.96rem,2.4vw,2rem)/1.1 Manrope,system-ui,sans-serif;letter-spacing:-.028em;color:#f6c3b3;margin-top:.32em}
.arcade-hero.arena-hero p{margin-top:clamp(12px,2vw,24px)}
.arcade-shell main>.arena-desk{margin:0 0 16px;padding:7px clamp(8px,1.5vw,22px);border-inline-start:1px solid var(--stadium-rail);border-color:var(--stadium-rail);border-top:0;background:#2a2135}
.arcade-games{gap:clamp(12px,1.6vw,25px)}
.arcade-card{grid-template-rows:auto 1fr;background:#211b2c}
.arcade-card .arcade-cover{display:block;aspect-ratio:1.84;border-color:var(--stadium-rail)}
.arcade-card .arcade-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:none;box-shadow:none;border:0}
.arcade-card--feather .arcade-art{object-position:center 51%}
.arcade-card .arcade-cover::after{border:0;box-shadow:inset 0 0 56px #100c1b66}
.arcade-card .arcade-info{border-top:3px solid #937eaa}
.arcade-card--feather .arcade-info{border-top-color:#d89483}
.arcade-card .arcade-game-name{min-height:clamp(3rem,6vw,6rem);margin-bottom:6px}
.arcade-card .arcade-game-name h2{margin:0}
.arcade-card .arcade-actions{width:100%}
@media(max-width:690px){
  .arcade-hero.arena-hero{min-height:0;gap:16px;padding:28px clamp(12px,4vw,26px)}
  .arena-brand{gap:5px}
  .arcade-hero .arena-brand h1{font-size:clamp(2.25rem,10vw,4.4rem)}
  .arcade-card .arcade-cover{aspect-ratio:1.78}
  .arcade-card .arcade-game-name{min-height:0}
}
.arcade-shell .arcade-footer{background:#211b2c;color:#d8c5d7;border-color:var(--stadium-rail)}
.arcade-top .arcade-artegy-wordmark{width:clamp(104px,12vw,150px);height:auto;display:block}
.arena-brandline .arena-brandline-wordmark{display:block;width:3.15em;height:auto;align-self:center}
