:root { color-scheme: dark; --ink:#eef2fa; --muted:#9da9bd; --paper:#111724; --panel:#1a2232; --panel-light:#202b3f; --line:#36435b; --mint:#61f1bd; --gold:#f7c86d; --coral:#ff7272; --blue:#7db2ff; }
* { box-sizing: border-box; }
body { margin:0; min-width:320px; min-height:100vh; color:var(--ink); background:radial-gradient(circle at 78% 5%, #233552 0, transparent 28rem), radial-gradient(circle at 4% 85%, #293a4b 0, transparent 30rem), #0c111b; font-family:"Space Grotesk", system-ui, sans-serif; }
button { font:inherit; cursor:pointer; }
.app-shell { width:min(1180px, 100%); min-height:100vh; margin:auto; padding:22px; }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:18px; }
.brand { letter-spacing:.16em; font-size:14px; font-weight:700; text-transform:uppercase; }
.brand span { color:var(--mint); }
.wallet { display:flex; gap:9px; align-items:center; padding:9px 12px; border:1px solid var(--line); background:#121a27cc; border-radius:999px; font-family:"DM Mono", monospace; font-size:12px; }
.coin { color:var(--gold); font-size:17px; }
.home { display:grid; grid-template-columns:minmax(0, 1.08fr) minmax(360px, .92fr); gap:18px; align-items:start; max-width:1100px; margin:0 auto; }
.hero, .panel, .choice-card, .modal-box { border:1px solid var(--line); background:linear-gradient(145deg, #1b2537e8, #121924ed); box-shadow:0 22px 70px #0005; border-radius:22px; }
.hero { min-height:440px; padding:36px; display:flex; flex-direction:column; justify-content:center; overflow:hidden; position:relative; }
.hero:after { content:"✦"; position:absolute; right:-18px; bottom:-72px; color:#61f1bd18; font-size:350px; line-height:1; transform:rotate(10deg); }
.eyebrow { color:var(--mint); font-family:"DM Mono", monospace; font-size:12px; letter-spacing:.13em; text-transform:uppercase; }
h1 { max-width:600px; margin:14px 0 14px; font-size:clamp(43px, 6vw, 72px); line-height:.91; letter-spacing:-.065em; position:relative; z-index:1; }
h1 em { color:var(--gold); font-style:normal; }
.lede { max-width:490px; color:var(--muted); font-size:17px; line-height:1.55; position:relative; z-index:1; }
.hero-note { color:#c7d0df; font:12px/1.5 "DM Mono", monospace; margin-top:22px; max-width:490px; }
.home-menu { display:grid; gap:9px; padding:14px; }
.choice-card { width:100%; border-radius:14px; color:var(--ink); padding:15px 16px; text-align:left; transition:.18s ease; }
.choice-card:hover, .choice-card:focus-visible { border-color:var(--mint); transform:translateY(-2px); background:var(--panel-light); }
.choice-card .title { display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:19px; font-weight:700; }
.choice-card p { margin:5px 0 0; color:var(--muted); font-size:13px; line-height:1.4; }
.tag { padding:4px 7px; border-radius:6px; color:#111724; background:var(--mint); font:10px "DM Mono",monospace; letter-spacing:.05em; }
.panel { padding:24px; }
.panel h2 { margin:0 0 3px; font-size:21px; letter-spacing:-.04em; }.panel-sub { margin:0 0 20px; color:var(--muted); font-size:13px; }
.leader { display:flex; align-items:center; gap:11px; padding:12px 0; border-top:1px solid #ffffff10; }.leader:first-of-type{border-top:0}.rank { width:20px; color:var(--gold); font:13px "DM Mono",monospace; }.avatar { width:31px; height:31px; display:grid; place-items:center; border-radius:50%; background:#2c3850; }.leader-name { flex:1; font-size:14px; }.score { color:var(--mint); font:12px "DM Mono",monospace; }
.rules { margin-top:14px; border-top:1px solid #ffffff12; padding-top:14px; color:var(--muted); font-size:12px; line-height:1.55; }
.game { display:grid; grid-template-columns:1fr minmax(300px, 1.5fr) 1fr; gap:16px; align-items:stretch; }
.player-card { min-height:350px; padding:20px; display:flex; flex-direction:column; }.player-card.active { border-color:var(--mint); box-shadow:inset 0 0 0 1px #61f1bd33, 0 18px 55px #0005; }.player-card.out { opacity:.4; filter:grayscale(.7); }.player-name { display:flex; justify-content:space-between; align-items:flex-start; gap:8px; font-weight:700; font-size:19px; }.player-type { color:var(--muted); font:11px "DM Mono",monospace; margin-top:4px; }.status { color:var(--mint); font:11px "DM Mono",monospace; text-transform:uppercase; letter-spacing:.08em; }.portrait { flex:1; min-height:150px; display:grid; place-items:center; font-size:88px; }.portrait-avatar,.opponent-portrait { background-image:url("./assets/campaign-opponent-sheet-v1.png"); background-size:400% 600%; background-position:var(--portrait-x) var(--portrait-y); background-repeat:no-repeat; background-color:#111827; }.opponent-portrait { width:100%; margin:16px 0; border:1px solid #765439; border-radius:13px; box-shadow:inset 0 0 0 1px #ffffff1a,0 10px 24px #0008; }
.life-box { display:flex; align-items:center; gap:8px; padding:9px 10px; border:2px solid #7c4b2c; border-radius:9px; background:linear-gradient(145deg,#704222,#2e1a12); box-shadow:inset 0 1px 0 #e4aa6944, inset 0 -3px 0 #130b08, 0 3px 0 #090706; }.life-label { color:#f6d49a; font:10px "DM Mono",monospace; letter-spacing:.08em; }.life-circles { display:flex; flex:1; justify-content:center; gap:5px; }.life-circle { width:14px; height:14px; border-radius:50%; border:2px solid #1c110c; box-shadow:inset 0 1px 1px #fff5, 0 1px 0 #0008; }.life-circle.full { background:radial-gradient(circle at 35% 30%,#ffe08d 0 15%,#ed9b2d 16% 52%,#7d3319 53%); }.life-circle.spent { background:#1a1210; opacity:.78; }.life-box strong { color:#fff1d2; font:11px "DM Mono",monospace; }
.table { min-height:540px; padding:22px; text-align:center; display:flex; flex-direction:column; align-items:center; }.round-title { color:var(--muted); font:11px "DM Mono",monospace; letter-spacing:.14em; text-transform:uppercase; }.turn-name { font-size:26px; font-weight:700; margin:7px 0 3px; }.turn-hint { min-height:36px; max-width:430px; color:var(--muted); font-size:13px; line-height:1.4; }.weapon { margin:22px 0 14px; width:172px; height:172px; position:relative; border:10px solid #92a2bb; background:repeating-conic-gradient(#303c53 0 14deg,#263147 14deg 30deg); border-radius:50%; box-shadow:inset 0 0 0 17px #111827, 0 0 0 7px #72839b, 0 22px 42px #0007; transition:transform .3s ease; }.weapon:after { content:""; position:absolute; inset:50%; width:30px; height:30px; transform:translate(-50%,-50%); border-radius:50%; background:#f3f5fb; box-shadow:0 0 0 9px #34425a; }.weapon.fire { transform:rotate(210deg) scale(1.06); }.weapon.chamber-4 { background:repeating-conic-gradient(#303c53 0 20deg,#263147 20deg 45deg); }.weapon.chamber-5 { background:repeating-conic-gradient(#303c53 0 17deg,#263147 17deg 36deg); }.weapon.chamber-6 { background:repeating-conic-gradient(#303c53 0 14deg,#263147 14deg 30deg); }.ammo { display:flex; gap:9px; justify-content:center; margin:0 0 16px; }.ammo-box { min-width:77px; border:1px solid var(--line); background:#111827; border-radius:10px; padding:8px; }.ammo-num { display:block; font:20px "DM Mono",monospace; }.ammo-label { color:var(--muted); font-size:10px; text-transform:uppercase; }.live .ammo-num { color:var(--coral); }.blank .ammo-num { color:var(--blue); }
.room-table { overflow:hidden; }.table-scene { width:100%; max-width:620px; aspect-ratio:16/9; position:relative; margin:13px 0 17px; overflow:hidden; border:2px solid #795439; border-radius:15px; background:#15120f center/cover no-repeat; box-shadow:inset 0 0 0 1px #ffffff18,inset 0 0 48px #0008,0 12px 27px #0009; }.scene-dock { background-image:url("./assets/room-docks-v1.png"); }.scene-velvet { background-image:url("./assets/room-velvet-v1.png"); }.scene-summit { background-image:url("./assets/room-summit-v1.png"); }
.weapon-gun { position:absolute; z-index:4; width:min(60%,400px); height:auto; left:50%; bottom:12%; transform:translateX(-50%) rotate(-4deg); filter:drop-shadow(0 12px 9px #000c); transition:transform .25s ease,filter .25s ease; user-select:none; pointer-events:none; }.weapon-gun.shotgun,.weapon-gun.rifle { width:min(79%,505px); bottom:22%; transform:translateX(-50%) rotate(-3deg); }.weapon-gun.fire { transform:translateX(-46%) rotate(-1deg) scale(1.025); filter:brightness(1.25) drop-shadow(0 9px 16px #ffae43aa); }.weapon-gun.shotgun.fire,.weapon-gun.rifle.fire { transform:translateX(-48%) rotate(-1deg) scale(1.025); }
.shot-burst { position:absolute; z-index:7; inset:0; display:grid; place-items:center; color:#fff5d5; font:900 clamp(28px,7vw,62px)/1 "Space Grotesk",sans-serif; letter-spacing:.14em; text-shadow:0 0 8px #ffedb4,0 0 25px #ff7a3d,0 0 55px #ff3b27; background:radial-gradient(circle at 50% 56%,#fff3bcdd 0 3%,#ffb53d99 7%,#f34c272c 22%,transparent 43%); animation:shot-burst .46s ease-out both; pointer-events:none; }@keyframes shot-burst { from { opacity:0; transform:scale(.7); } 18% { opacity:1; transform:scale(1.04); } to { opacity:0; transform:scale(1.3); } }
.cartridge-rack { position:absolute; z-index:5; right:4%; bottom:10%; display:flex; align-items:end; gap:5px; min-height:41px; padding:5px 7px; border:2px solid #55331e; border-radius:7px; background:linear-gradient(#301b11,#19100c); box-shadow:0 3px 0 #120b08; }.cartridge { width:10px; height:29px; position:relative; display:block; border-radius:4px 4px 2px 2px; background:linear-gradient(90deg,#9f5618,#f7bb47 45%,#7c3d14); border:1px solid #49230c; box-shadow:0 1px 0 #fff6 inset; }.cartridge:before { content:""; position:absolute; top:-5px; left:1px; width:6px; height:7px; border-radius:4px 4px 1px 1px; background:#b9442f; border:1px solid #522017; }.cartridge.spent { opacity:.2; filter:grayscale(1); }.load-modal .eyebrow { color:var(--gold); }
.actions { width:100%; display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:auto; }.action { border:0; padding:13px 10px; border-radius:10px; font-weight:700; color:#07130f; background:var(--mint); transition:.16s ease; }.action:hover:not(:disabled) { filter:brightness(1.1); transform:translateY(-1px); }.action.secondary { color:#fff6e6; background:#74522d; }.action:disabled { cursor:not-allowed; opacity:.35; }.item-row { width:100%; display:flex; gap:8px; margin-top:10px; }.item-button { flex:1; min-height:39px; color:var(--ink); background:#26334a; border:1px solid #445572; border-radius:9px; font-size:11px; font-weight:600; }.item-button:hover:not(:disabled) { border-color:var(--gold); }.item-button:disabled { opacity:.35; cursor:not-allowed; }
.event-log { width:100%; margin-top:17px; padding:11px; min-height:68px; text-align:left; background:#0d131e; border:1px solid #273349; border-radius:9px; color:#b9c6d9; font:11px/1.45 "DM Mono",monospace; overflow:auto; }.event-log div:first-child { color:#fff; }
.round-result { position:fixed; z-index:4; inset:0; display:grid; place-items:center; overflow:hidden; padding:22px; background:#04070dde; backdrop-filter:blur(5px); animation:result-in .16s ease-out both; }.result-ring { position:absolute; width:min(72vw,640px); aspect-ratio:1; border:3px solid currentColor; border-radius:50%; opacity:.72; animation:result-ring 1.15s ease-out both; }.live-result { color:var(--coral); }.blank-result { color:var(--blue); }.result-card { position:relative; z-index:1; width:min(450px,100%); padding:32px 26px; text-align:center; border:1px solid currentColor; border-radius:22px; background:linear-gradient(145deg,#0d131ef5,#070b12fa); box-shadow:0 0 0 9px #0005,0 25px 90px #000c; }.result-kicker { color:var(--gold); font:11px "DM Mono",monospace; letter-spacing:.18em; text-transform:uppercase; }.result-card h2 { margin:10px 0 8px; color:currentColor; font-size:clamp(42px,8vw,68px); line-height:.9; letter-spacing:-.08em; }.result-target { margin:0; color:#d4dbea; font:14px "DM Mono",monospace; }.result-card strong { display:block; margin:18px 0 8px; color:#fff; font-size:20px; }.result-control { margin:0; color:#c9d4e6; font-size:14px; }.live-result .result-card { box-shadow:0 0 0 9px #0005,0 0 70px #ff4c4c55,0 25px 90px #000c; }.blank-result .result-card { box-shadow:0 0 0 9px #0005,0 0 70px #6ea8ff4d,0 25px 90px #000c; }@keyframes result-in { from { opacity:0; } to { opacity:1; } }@keyframes result-ring { from { transform:scale(.22); opacity:0; } 45% { opacity:.86; } to { transform:scale(1.3); opacity:0; } }
.live-impact { animation:table-impact .48s cubic-bezier(.36,.07,.19,.97) both; }.live-result { animation:result-in .05s ease-out both, live-screen-shake .52s cubic-bezier(.36,.07,.19,.97) both; }.live-flash { position:absolute; inset:0; background:#ff3e2e; mix-blend-mode:screen; pointer-events:none; animation:live-flash .62s ease-out both; }.impact-stamp { position:absolute; z-index:0; color:#fff1e8; font:900 clamp(120px,30vw,360px)/1 "Space Grotesk",sans-serif; letter-spacing:.08em; text-shadow:0 0 18px #ff4533,0 0 70px #ff3220; opacity:0; animation:impact-stamp .7s ease-out both; pointer-events:none; }.live-result .result-card { animation:live-card-impact .58s cubic-bezier(.2,.8,.2,1) both; }.live-result .result-ring { border-width:8px; box-shadow:0 0 45px #ff413d, inset 0 0 45px #ff413d; animation:live-ring .72s ease-out both; }
@keyframes table-impact { 0%,100% { transform:translateX(0); } 14% { transform:translateX(-12px) rotate(-.3deg); } 29% { transform:translateX(11px) rotate(.24deg); } 46% { transform:translateX(-7px); } 64% { transform:translateX(5px); } }
@keyframes live-screen-shake { 0%,100% { transform:translate(0); } 13% { transform:translate(-14px,7px); } 27% { transform:translate(13px,-9px); } 40% { transform:translate(-10px,5px); } 56% { transform:translate(8px,-4px); } 72% { transform:translate(-4px,2px); } }
@keyframes live-flash { 0% { opacity:0; } 7% { opacity:.92; } 20% { opacity:.12; } 31% { opacity:.68; } 52%,100% { opacity:0; } }
@keyframes impact-stamp { 0% { opacity:0; transform:scale(.18) rotate(-10deg); } 14% { opacity:.25; } 40% { opacity:.06; transform:scale(1.12) rotate(-10deg); } 100% { opacity:0; transform:scale(1.4) rotate(-10deg); } }
@keyframes live-card-impact { 0% { transform:scale(.6); filter:brightness(2.8); } 25% { transform:scale(1.08); filter:brightness(1.7); } 52% { transform:scale(.98); } 100% { transform:scale(1); filter:brightness(1); } }
@keyframes live-ring { 0% { opacity:0; transform:scale(.08); } 20% { opacity:1; } 100% { opacity:0; transform:scale(1.75); } }
@media (prefers-reduced-motion:reduce) { .live-impact,.live-result,.live-result .result-card,.live-result .result-ring,.live-flash,.impact-stamp { animation:none; } .live-flash { opacity:.22; } }
.back { padding:9px 12px; border:1px solid var(--line); border-radius:9px; color:var(--muted); background:transparent; font-size:12px; }.back:hover { color:var(--ink); border-color:var(--muted); }.modal { position:fixed; inset:0; z-index:5; display:grid; place-items:center; padding:18px; background:#070a10a8; backdrop-filter:blur(8px); }.modal-box { width:min(560px, 100%); padding:28px; text-align:center; }.modal-box h2 { margin:9px 0 6px; font-size:32px; letter-spacing:-.05em; }.modal-box p { color:var(--muted); line-height:1.5; }.weapon-options { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin:21px 0; }.weapon-option { border:1px solid var(--line); border-radius:11px; padding:10px 7px 14px; background:#182234; color:var(--ink); }.weapon-option:hover { border-color:var(--gold); }.weapon-option img { display:block; width:100%; height:52px; object-fit:contain; margin:0 auto 8px; filter:drop-shadow(0 4px 4px #0008); }.weapon-option strong { display:block; font-size:13px; }.weapon-option span { display:block; color:var(--muted); margin-top:5px; font:11px "DM Mono",monospace; }.primary { border:0; border-radius:10px; padding:13px 19px; color:#06120e; background:var(--mint); font-weight:700; }.setup-coin { margin:15px auto; display:grid; width:76px; height:76px; place-items:center; border-radius:50%; background:linear-gradient(135deg,#f4d680,#967326); color:#332709; font-size:25px; box-shadow:0 8px 0 #72541a, 0 18px 28px #0006; }.choice-buttons { display:flex; justify-content:center; gap:10px; margin-top:20px; }.choice-buttons button { min-width:128px; }.hidden { display:none !important; }
.waiting-choice { margin:22px 0 4px; padding:13px; border:1px solid var(--line); border-radius:10px; background:#101827; color:var(--gold); font:12px "DM Mono",monospace; }
.round-count .ammo-box { min-width:160px; }.round-count .ammo-num { color:var(--mint); }
.app-shell { width:min(1500px,100%); padding:28px 22px; }.brand-wrap,.wallet-set { display:flex; align-items:center; gap:12px; }.nav-profile { width:31px; height:31px; padding:0; border:1px solid #61f1bd88; border-radius:50%; background-color:#111827; }.wallet-set { gap:10px; }.wallet-set .wallet { color:var(--muted); }.wallet-set .wallet strong { color:var(--ink); font-weight:500; }.pass-wallet .coin { color:var(--mint); }.home-dashboard { display:grid; grid-template-columns:minmax(0,1.12fr) minmax(430px,.88fr); gap:28px; max-width:1500px; margin:32px auto 0; align-items:start; }.home-primary-column,.home-routes { display:grid; gap:28px; }.home-hero { min-height:578px; padding:62px 66px; justify-content:flex-start; }.home-hero h1 { margin:32px 0 30px; font-size:clamp(58px,5.2vw,92px); }.home-hero .lede { max-width:650px; font-size:21px; }.hero-actions { display:flex; flex-wrap:wrap; gap:14px; margin-top:40px; position:relative; z-index:1; }.home-primary-action,.home-secondary-action { min-height:58px; padding:0 28px; border-radius:16px; font-weight:700; font-size:18px; }.home-primary-action { border:0; color:#121724; background:var(--gold); }.home-primary-action span { margin-left:11px; font-size:25px; vertical-align:-2px; }.home-secondary-action { color:var(--ink); border:1px solid #4a6488; background:#101827aa; }.home-primary-action:hover,.home-secondary-action:hover { transform:translateY(-2px); filter:brightness(1.05); }.home-rankings { padding:28px 38px; }.home-section-heading { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:15px; }.home-section-heading h2 { margin:0; font-size:25px; }.home-section-heading span,.route-label { color:#9da9bd; font:12px "DM Mono",monospace; letter-spacing:.14em; text-transform:uppercase; }.home-rankings .leader { padding:14px 0; }.home-rankings .leader:last-child { margin-top:10px; padding:13px 14px; border:1px solid #61f1bd66; border-radius:13px; background:#12352a88; }.home-rankings .leader:last-child .avatar { background:var(--mint); color:#0d2019; }.route-label { margin-bottom:-12px; }.route-card { width:100%; padding:0; overflow:hidden; border:1px solid #2b3c58; border-radius:22px; color:var(--ink); background:#101725c9; box-shadow:0 16px 50px #0003; text-align:left; }.route-main,.route-footer,.competitive-route { width:100%; border:0; color:inherit; background:transparent; text-align:left; }.route-main { position:relative; display:grid; grid-template-columns:1fr auto; gap:12px; padding:31px 36px 26px; }.route-main h2,.competitive-route h2 { margin:0; font-size:37px; letter-spacing:-.055em; }.route-main p,.competitive-route p { margin:11px 0 0; color:var(--muted); font-size:18px; line-height:1.45; }.route-arrow { align-self:start; color:#9da9bd; font-size:48px; font-weight:300; line-height:.75; }.route-progress { grid-column:1/-1; display:flex; align-items:center; gap:16px; margin-top:19px; }.route-progress > span { flex:1; height:8px; overflow:hidden; border-radius:99px; background:#22314b; }.route-progress i { display:block; height:100%; min-width:7px; border-radius:inherit; background:var(--mint); }.route-progress small,.route-footer small { color:#aab8cd; font:14px "DM Mono",monospace; text-transform:uppercase; white-space:nowrap; }.route-footer { display:grid; grid-template-columns:auto 1fr auto; gap:16px; align-items:center; padding:20px 36px; border-top:1px solid #263650; font-size:17px; }.route-footer span { color:var(--muted); }.route-card:hover,.route-card:focus-within { border-color:#4f6e99; }.route-main:hover,.route-footer:hover,.competitive-route:hover { background:#172238; }.local-tag,.gold-tag { display:inline-block; margin-left:12px; padding:5px 8px; border:1px solid #405477; border-radius:7px; color:#aab8cd; font:11px "DM Mono",monospace; letter-spacing:.08em; text-transform:uppercase; vertical-align:6px; }.gold-tag { border:0; color:#201709; background:var(--gold); }.competitive-route { display:grid; grid-template-columns:1fr auto; gap:12px; padding:31px 36px; }.home-disclaimer { max-width:1500px; margin:28px auto 0; color:#8e9bb1; font:12px/1.5 "DM Mono",monospace; letter-spacing:.08em; }
.account-chip { border:1px solid #4a6488; border-radius:999px; padding:9px 12px; color:var(--ink); background:#101827aa; font:12px "DM Mono",monospace; }.account-chip:hover { border-color:var(--mint); }.account-box { position:relative; max-width:440px; text-align:left; }.account-close { position:absolute; top:14px; right:14px; border:0; color:var(--muted); background:transparent; font-size:26px; }.account-box form { display:grid; gap:13px; margin-top:21px; }.account-box label { display:grid; gap:6px; color:var(--muted); font-size:13px; }.account-box input { width:100%; padding:12px; border:1px solid var(--line); border-radius:9px; color:var(--ink); background:#0d131e; }.account-secondary { width:100%; margin-top:9px; border:1px solid #4a6488; border-radius:10px; padding:12px 19px; color:var(--ink); background:transparent; font-weight:700; }.account-avatar-picker { margin:4px 0 0; padding:12px; border:1px solid #31435f; border-radius:11px; }.account-avatar-picker legend { padding:0 6px; color:var(--muted); font-size:12px; }.account-avatar-picker > div { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }.account-avatar-choice { position:relative; display:grid !important; gap:5px !important; color:var(--ink) !important; cursor:pointer; text-align:center; font-size:10px !important; }.account-avatar-choice input { position:absolute; opacity:0; pointer-events:none; }.account-avatar-image { width:100%; border-radius:8px; opacity:.72; }.account-avatar-choice:has(input:checked) .account-avatar-image { outline:2px solid var(--mint); outline-offset:2px; opacity:1; }.account-avatar-choice:has(input:focus-visible) .account-avatar-image { outline:2px solid var(--gold); outline-offset:2px; }.account-switch { display:block; margin-top:15px; padding:0; border:0; color:var(--mint); background:transparent; font-size:13px; }.account-message { min-height:20px; margin:15px 0 0 !important; font-size:13px; }.account-message.error { color:var(--coral); }.account-message.success { color:var(--mint); }
.opponent-portrait { aspect-ratio:1; min-height:0; flex:0 0 auto; }
.profile-trigger { display:flex; align-items:center; gap:10px; width:max-content; padding:6px 11px 6px 6px; border:1px solid #61f1bd66; border-radius:12px; color:var(--ink); background:#101a27c9; text-align:left; transition:.18s ease; }.profile-trigger:hover,.profile-trigger:focus-visible { border-color:var(--mint); background:#18263a; }.profile-trigger small { display:block; color:var(--mint); margin-bottom:2px; font:10px "DM Mono",monospace; letter-spacing:.1em; text-transform:uppercase; }.profile-trigger strong { font-size:12px; }.profile-avatar { display:block; width:34px; aspect-ratio:1; border:1px solid #765439; border-radius:8px; }.profile-page { width:min(980px,100%); margin:3vh auto 0; }.profile-head { margin-bottom:24px; }.profile-head h1 { margin:7px 0; font-size:clamp(37px,6vw,64px); }.profile-head p { max-width:570px; margin:0; color:var(--muted); line-height:1.5; }.profile-sync-status { display:flex; align-items:center; gap:12px; margin:-4px 0 22px; padding:13px 15px; border:1px solid #405477; border-radius:13px; color:#c5d0e1; background:#111b2adb; }.profile-sync-status > span { color:#aab8cd; font-size:18px; }.profile-sync-status.connected { border-color:#61f1bd66; background:#12352a6e; }.profile-sync-status.connected > span { color:var(--mint); }.profile-sync-status strong { display:block; font-size:13px; }.profile-sync-status p { margin:3px 0 0; color:var(--muted); font-size:12px; }.profile-sync-status .back { margin-left:auto; white-space:nowrap; }.portrait-picker { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }.portrait-option { display:flex; flex-direction:column; padding:12px; border:1px solid var(--line); border-radius:16px; color:var(--ink); background:linear-gradient(145deg,#1b2537e8,#121924ed); text-align:left; transition:.18s ease; }.portrait-option:hover,.portrait-option:focus-visible { border-color:var(--mint); transform:translateY(-2px); }.portrait-option.selected { border-color:var(--mint); box-shadow:inset 0 0 0 1px #61f1bd44,0 14px 34px #0005; }.picker-portrait { display:block; width:100%; aspect-ratio:1; margin-bottom:12px; border:1px solid #765439; border-radius:10px; }.portrait-option strong { font-size:17px; }.portrait-option small { min-height:34px; margin-top:4px; color:var(--muted); font-size:12px; line-height:1.35; }.portrait-state { margin-top:13px; color:var(--mint); font:10px "DM Mono",monospace; letter-spacing:.08em; text-transform:uppercase; }
.campaign-page { width:min(980px,100%); margin:3vh auto 0; }.campaign-head { display:flex; justify-content:space-between; gap:24px; align-items:end; margin:0 0 24px; }.campaign-head h1 { margin:7px 0; font-size:clamp(37px,6vw,64px); }.campaign-head p { color:var(--muted); margin:0; }.campaign-total { min-width:126px; text-align:right; padding-bottom:7px; }.campaign-total span { display:block; color:var(--mint); font:42px/.9 "DM Mono",monospace; }.campaign-total small { color:var(--muted); font-size:11px; }
.armory-page { width:min(980px,100%); margin:3vh auto 0; }.armory-head { display:flex; justify-content:space-between; gap:24px; align-items:end; margin:0 0 24px; }.armory-head h1 { margin:7px 0; font-size:clamp(37px,6vw,64px); }.armory-head p,.armory-note { color:var(--muted); margin:0; }.armory-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; }.armory-item { min-height:265px; display:flex; flex-direction:column; }.armory-item.owned { border-color:#61f1bd77; }.item-symbol { width:48px; height:48px; display:grid; place-items:center; margin-bottom:18px; border:1px solid #76572c; border-radius:12px; color:var(--gold); background:#2d2419; font-size:26px; }.armory-item h2 { margin:8px 0 6px; font-size:21px; }.armory-item p { color:var(--muted); line-height:1.45; margin:0; }.armory-footer { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; padding-top:20px; color:var(--gold); font:12px "DM Mono",monospace; }.armory-footer button:disabled { cursor:default; opacity:.6; }.armory-note { margin-top:18px; font-size:12px; }.locked-item { opacity:.48; }
.armory-switch { display:flex; gap:8px; margin-bottom:18px; }.armory-switch button { flex:1; padding:10px 12px; border:1px solid var(--line); border-radius:10px; color:var(--muted); background:#121b2a; font-weight:700; }.armory-switch button.active { color:#06120e; border-color:var(--mint); background:var(--mint); }.armory-item.item-locked { opacity:.48; filter:grayscale(.35); }
.locations { display:grid; gap:15px; }.location-card { position:relative; overflow:hidden; padding:22px; }.location-card.locked { opacity:.52; }.room-preview { position:absolute; z-index:0; inset:0; background:center/cover no-repeat; opacity:.22; filter:saturate(.9); }.room-preview:after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,#152033f4 0%,#152033d6 55%,#15203370 100%); }.location-head,.table-list { position:relative; z-index:1; }.location-head { display:flex; gap:18px; justify-content:space-between; align-items:start; margin-bottom:17px; }.location-head h2 { margin:5px 0; font-size:25px; letter-spacing:-.04em; }.location-head p { margin:0; color:var(--muted); font-size:13px; }.location-count { min-width:44px; padding:8px; border:1px solid var(--line); background:#111a29; border-radius:9px; text-align:center; color:var(--mint); font:13px "DM Mono",monospace; }.table-list { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }.table-choice { display:flex; align-items:center; gap:10px; min-width:0; padding:12px; text-align:left; border:1px solid var(--line); border-radius:11px; background:#121b2ae8; color:var(--ink); }.table-choice:not(:disabled):hover { border-color:var(--mint); background:#1d2a3df2; }.table-choice:disabled { cursor:not-allowed; }.table-choice.cleared { border-color:#61f1bd66; }.table-choice > span:nth-child(2) { min-width:0; flex:1; }.table-choice strong,.table-choice small { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.table-choice strong { font-size:13px; }.table-choice small { margin-top:3px; color:var(--muted); font-size:10px; }.table-avatar { display:grid; flex:0 0 32px; width:32px; height:32px; place-items:center; border-radius:50%; background:#2b3951; }.table-avatar.portrait-avatar { box-shadow:0 0 0 1px #0008,0 2px 5px #0009; }.table-state { color:var(--mint); font:9px "DM Mono",monospace; }.locked .table-state { color:var(--muted); }
.table-choice.rival-table { border-color:#d9973d; box-shadow:inset 0 0 0 1px #d9973d33; }.table-choice.rival-table .table-avatar,.table-choice.rival-table .table-state { color:#ffd37d; }.table-choice.rival-table:disabled { border-color:#745833; }
.competitive-page { width:min(1040px,100%); margin:3vh auto 0; }.competitive-hero { display:flex; align-items:end; justify-content:space-between; gap:24px; min-height:260px; padding:34px; overflow:hidden; position:relative; background:radial-gradient(circle at 83% 18%,#88492855 0,transparent 18rem),linear-gradient(135deg,#232539,#121923); }.competitive-hero h1 { margin:9px 0 13px; font-size:clamp(42px,7vw,72px); }.competitive-hero p { max-width:540px; margin:0; color:var(--muted); line-height:1.5; }.season-mark { flex:0 0 126px; padding:20px 12px; border:1px solid #d9973d77; border-radius:18px; background:#0d131eb8; text-align:center; }.season-mark strong { display:block; color:var(--gold); font:46px/.85 "DM Mono",monospace; }.season-mark span { color:var(--muted); font-size:11px; }.daily-card { display:flex; align-items:center; justify-content:space-between; gap:24px; margin:16px 0; padding:23px; border-color:#61f1bd77; background:linear-gradient(120deg,#193128,#172032); }.daily-card h2 { margin:6px 0; font-size:28px; letter-spacing:-.05em; }.daily-card p,.pro-panel p { margin:0; color:var(--muted); line-height:1.45; }.daily-actions { display:grid; gap:9px; min-width:215px; text-align:center; }.free-mark { color:var(--mint); font:11px "DM Mono",monospace; letter-spacing:.13em; }.competitive-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }.section-heading { display:flex; justify-content:space-between; align-items:start; gap:12px; margin-bottom:16px; }.section-heading h2 { margin:5px 0 0; font-size:23px; letter-spacing:-.04em; }.full-button { width:100%; margin-top:16px; }.pro-panel { border-color:#d9973d77; background:linear-gradient(145deg,#2a251e,#151b27); }.pro-panel.pro-active { border-color:var(--gold); box-shadow:inset 0 0 0 1px #f7c86d28,0 20px 50px #0005; }.pro-badge { padding:5px 7px; color:#221508; border-radius:6px; background:var(--gold); font:10px "DM Mono",monospace; letter-spacing:.11em; }.price-row { display:flex; align-items:baseline; gap:12px; margin:22px 0 16px; }.price-row strong { color:#fff2cf; font-size:30px; }.price-row small,.price-row span { color:var(--muted); font-size:12px; font-weight:400; }.pro-benefits { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:0; padding:0; list-style:none; color:#dce4f0; font-size:12px; }.pro-benefits li:before { content:'✓'; color:var(--gold); margin-right:7px; }.pro-note { display:block; margin-top:9px; text-align:center; color:var(--muted); font-size:10px; }.specialty-section { margin-top:24px; }.specialty-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }.specialty-card { min-height:220px; display:flex; flex-direction:column; }.specialty-card h3 { margin:9px 0 6px; font-size:18px; letter-spacing:-.04em; }.specialty-card p { margin:0; color:var(--muted); font-size:13px; line-height:1.45; }.specialty-card button { margin-top:auto; }.specialty-icon { width:40px; height:40px; display:grid; place-items:center; color:var(--gold); border:1px solid #76572c; border-radius:10px; background:#2d2419; font-size:22px; }.specialty-locked { opacity:.64; }.competitive-message { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-top:16px; border-color:#7db2ff77; color:#dce6f7; font-size:13px; line-height:1.45; }
@media (max-width:850px) { .topbar { margin-bottom:14px; }.home { grid-template-columns:1fr; gap:14px; }.home-dashboard { grid-template-columns:1fr; margin-top:18px; gap:16px; }.home-primary-column,.home-routes { gap:16px; }.home-hero { min-height:420px; padding:42px; }.home-hero h1 { margin:22px 0; }.hero-actions { margin-top:28px; }.route-label { margin:4px 0 -4px; }.home-disclaimer { margin-top:18px; }.hero{min-height:350px;padding:30px}.game { grid-template-columns:1fr 1fr; }.table { grid-column:1 / -1; grid-row:1; min-height:440px; }.player-card { min-height:210px; }.portrait { min-height:75px; font-size:54px; } }
@media (max-width:680px) { .app-shell { padding:18px 14px; }.topbar { align-items:flex-start; }.wallet-set { justify-content:flex-end; flex-wrap:wrap; gap:6px; }.wallet-set .wallet { padding:7px 9px; font-size:10px; }.brand-wrap { gap:8px; }.home-hero { min-height:390px; padding:29px 27px; }.home-hero h1 { font-size:clamp(45px,13vw,62px); }.home-hero .lede { font-size:16px; }.home-primary-action,.home-secondary-action { width:100%; min-height:52px; font-size:16px; }.home-rankings { padding:22px; }.route-main,.competitive-route { padding:25px 23px; }.route-main h2,.competitive-route h2 { font-size:29px; }.route-main p,.competitive-route p { font-size:15px; }.route-footer { grid-template-columns:1fr auto; gap:6px 12px; padding:17px 23px; font-size:15px; }.route-footer span { grid-row:2; }.route-footer small { grid-row:1 / span 2; grid-column:2; }.local-tag,.gold-tag { margin-left:7px; font-size:9px; vertical-align:4px; }.campaign-head,.armory-head { align-items:start; flex-direction:column; }.campaign-total { text-align:left; }.table-list,.armory-grid,.specialty-grid,.portrait-picker { grid-template-columns:1fr; }.competitive-hero,.daily-card,.competitive-message { align-items:start; flex-direction:column; }.daily-actions { width:100%; }.competitive-grid { grid-template-columns:1fr; }.season-mark { align-self:flex-start; }.pro-benefits { grid-template-columns:1fr; } }
@media (max-width:510px) { .app-shell{padding:14px}.topbar{margin-bottom:14px}.wallet{padding:8px 10px;font-size:11px}.game{gap:9px}.table{padding:17px;min-height:425px}.table-scene{margin-top:10px}.player-card{padding:13px}.player-name{font-size:15px}.portrait{font-size:43px}.weapon{width:135px;height:135px;margin:18px 0 12px}.weapon-options{grid-template-columns:1fr}.choice-buttons{flex-direction:column}.choice-buttons button{width:100%}.ammo-box{min-width:66px}.hero{min-height:330px;padding:26px}.home-menu{padding:10px}.choice-card{padding:14px}.choice-card .title{font-size:18px}.home{gap:13px} }

/* Match room: player windows frame a focused central table. */
.match-layout { grid-template-columns:minmax(235px,.86fr) minmax(460px,1.32fr) minmax(235px,.86fr); gap:24px; align-items:stretch; max-width:1500px; margin:0 auto; }
.match-player-card { min-height:650px; padding:25px; }.match-player-card .player-name { font-size:23px; }.match-player-card .status { padding-top:4px; }.match-player-card .opponent-portrait { flex:0 0 auto; aspect-ratio:1/1.08; min-height:0; margin:23px 0 18px; border-color:#31435f; border-radius:15px; }.match-player-card.active { border-color:#44dbad; box-shadow:inset 0 0 0 1px #61f1bd66,0 0 34px #32d69b21,0 18px 55px #0005; }.match-player-card .life-box { margin-bottom:23px; }
.match-armory { margin-top:auto; }.match-armory-head { display:flex; align-items:baseline; justify-content:space-between; gap:9px; margin-bottom:11px; }.match-armory-head strong { font-size:17px; }.match-armory-head small { color:var(--muted); font:10px "DM Mono",monospace; letter-spacing:.08em; text-align:right; text-transform:uppercase; }.match-armory-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }.match-armory-tool { min-height:88px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:8px 3px; border:1px dashed #334867; border-radius:12px; color:#93a3ba; background:#11192788; }.match-armory-tool.owned { border-style:solid; border-color:#547098; color:#dbe6f7; background:#1a273a; }.match-armory-tool:not(:disabled):hover { border-color:var(--gold); background:#263752; transform:translateY(-1px); }.match-armory-tool:disabled { cursor:not-allowed; }.match-armory-tool.empty { min-height:55px; opacity:.72; }.armory-tool-icon { color:var(--gold); font-size:22px; line-height:1; }.match-armory-tool strong { font-size:11px; }.match-armory-tool small { color:var(--muted); font:9px "DM Mono",monospace; text-transform:uppercase; }
.match-layout .table { min-height:650px; padding:27px 29px; }.match-table-top { width:100%; display:flex; justify-content:space-between; align-items:center; gap:12px; }.match-score { display:flex; align-items:center; gap:9px; color:var(--muted); font:12px "DM Mono",monospace; }.match-score strong { color:var(--ink); font-size:20px; }.match-layout .turn-name { margin-top:16px; font-size:32px; }.match-layout .turn-hint { min-height:42px; max-width:530px; font-size:15px; }.match-layout .table-scene { max-width:none; margin:16px 0 18px; }.match-layout .actions { margin-top:0; }.match-layout .action { min-height:78px; display:flex; flex-direction:column; justify-content:center; gap:4px; font-size:18px; }.match-layout .action small { color:#132c23; font-size:12px; font-weight:500; }.match-layout .action.secondary small { color:#f4d7ac; }.match-layout .event-log { flex:1; min-height:126px; margin-top:17px; padding:14px; font-size:12px; }.log-heading { display:flex; justify-content:space-between; margin-bottom:9px; color:#9eacc2 !important; font:10px "DM Mono",monospace; letter-spacing:.13em; text-transform:uppercase; }.log-heading small { color:#718097; font:inherit; }
@media (max-width:1080px) { .match-layout { grid-template-columns:1fr 1fr; gap:16px; }.match-layout .table { grid-column:1 / -1; grid-row:1; min-height:520px; }.match-player-card { min-height:460px; }.match-player-card .opponent-portrait { max-height:220px; aspect-ratio:16/9; background-size:400% 600%; }.match-armory-tool { min-height:72px; } }
@media (max-width:680px) { .match-layout { grid-template-columns:1fr; gap:14px; }.match-layout .table { grid-column:auto; grid-row:auto; order:-1; min-height:0; padding:20px 16px; }.match-player-card { min-height:0; padding:18px; }.match-player-card .opponent-portrait { max-height:none; aspect-ratio:16/9; margin:16px 0; }.match-layout .turn-name { margin-top:12px; font-size:28px; }.match-layout .turn-hint { min-height:0; font-size:14px; }.match-layout .table-scene { aspect-ratio:16/10; }.match-layout .actions { grid-template-columns:1fr; }.match-layout .action { min-height:61px; }.match-layout .event-log { min-height:110px; }.match-score span { display:none; }.match-armory-tool { min-height:72px; } }