:root {
 color-scheme:dark;
 --ink:#faf4ff;--muted:#b6b5cf;--line:#353044;--surface:#161627;--base:#0b0b17;
 --accent:#e7bc74;--accent2:#a783ff;--soft:#2b2041;
 font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
}
*,*::before,*::after {box-sizing:border-box}
html {scroll-behavior:smooth}
body {margin:0;min-width:320px;color:var(--ink);background:radial-gradient(ellipse at 84% 5%,var(--soft),transparent 62rem),var(--base);font-size:16px;line-height:1.55}
body.theme-skill {--accent:#85f0b1;--accent2:#6ccff5;--soft:#123333}
body.theme-book {--accent:#95ccff;--accent2:#aba2ff;--soft:#1b254d}
body.theme-exchange {--accent:#c4a6ff;--accent2:#76ecdc;--soft:#2d1c49}
body.theme-coin {--accent:#fbd581;--accent2:#ffc392;--soft:#372a24}
body.theme-fast {--accent:#ffd18e;--accent2:#ff83a9;--soft:#401c3a}
a {color:inherit;text-decoration:none}
button,input {font:inherit}
button {cursor:pointer}
:focus-visible {outline:2px solid var(--accent);outline-offset:4px}
[hidden] {display:none!important}
img {display:block;max-width:100%}
h1,h2,h3,p {margin:0}
h1,h2,h3 {line-height:1.1;text-wrap:balance}
.wrap {width:min(1300px,calc(100% - 64px));margin-inline:auto}
.skip {position:absolute;top:12px;left:12px;padding:9px 13px;background:var(--ink);color:var(--base);transform:translateY(-200%);z-index:30}
.skip:focus {transform:none}
.topbar {background:#0d0d1be8;border-bottom:1px solid #ffffff17;position:sticky;top:0;z-index:8;backdrop-filter:blur(16px)}
.bar {min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.identity {display:inline-flex;align-items:center;gap:12px;font-weight:850;letter-spacing:-.02em;flex:none}
.identity img {width:43px;height:43px;object-fit:contain;border-radius:12px;background:#080810}
.identity small {display:block;font-size:.57rem;letter-spacing:.19em;color:var(--muted);margin-top:1px}
.navigation {display:flex;justify-content:center;align-items:center;gap:clamp(14px,3vw,34px);color:#e7dff3;font-size:.89rem;font-weight:650}
.navigation a:hover,.network-links a:hover {color:var(--accent)}
.button {display:inline-flex;align-items:center;justify-content:center;gap:14px;padding:11px 15px;border:1px solid #ffffff32;border-radius:10px;background:#ffffff08;color:var(--ink);font-size:.89rem;font-weight:780;line-height:1.35;text-align:left;transition:background .2s,border-color .2s,transform .2s}
.button:hover {transform:translateY(-2px);border-color:var(--accent);background:#ffffff12}
.button.primary {color:#11131e;background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 76%,white));border-color:var(--accent)}
.button.primary:hover {background:var(--accent)}
.button span {font-size:.85rem}
.hero {display:grid;grid-template-columns:1.02fr .98fr;align-items:center;gap:clamp(24px,4vw,64px);min-height:402px;margin-top:34px;padding:clamp(22px,4vw,54px);border-radius:24px;border:1px solid color-mix(in srgb,var(--accent2) 34%,var(--line));background:linear-gradient(135deg,#171526 0%,color-mix(in srgb,var(--soft) 75%,#181326) 78%);box-shadow:0 16px 56px #05050c80}
.kicker {font-size:.72rem;font-weight:820;letter-spacing:.15em;text-transform:uppercase;color:var(--accent)}
.hero h1 {margin:12px 0 18px;font-size:clamp(2.8rem,5.5vw,5.3rem);letter-spacing:-.063em;font-weight:900}
.hero h1 em {color:var(--accent);font-style:normal}
.lede {max-width:48ch;color:#e0d9eb;font-size:clamp(1rem,1.5vw,1.13rem)}
.actions {display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:25px}
.hero-visual {min-width:0;border:1px solid #ffffff2b;border-radius:17px;overflow:hidden;background:#100e1e;box-shadow:0 17px 40px #04040bbb}
.arena-art {width:100%;height:auto;aspect-ratio:3;object-fit:cover}
.visual-caption {display:flex;justify-content:space-between;gap:10px;padding:14px 17px;font-size:.65rem;letter-spacing:.14em;color:#d0c4e3;font-weight:780;border-top:1px solid #ffffff19}
.visual-caption span:first-child {color:var(--accent)}
.coin-art {display:grid;justify-items:center;align-content:center;gap:12px;padding:26px;min-height:240px;background:radial-gradient(ellipse at 55% 45%,#553221,#100e1d 73%);color:var(--accent);letter-spacing:.19em;font-size:.8rem;font-weight:800}
.coin-medal {display:grid;place-items:center;width:148px;aspect-ratio:1;border-radius:50%;background:radial-gradient(#251725 45%,#69432a 67%,#fbdc91 71%);border:4px double #f9d385;box-shadow:0 14px 28px #05030c,0 0 48px #e1a64d60}
.coin-medal img {width:100px;mix-blend-mode:screen}
.section {margin:49px 0;scroll-margin-top:97px}
.section-title {margin-bottom:18px}
.section-title h2,.panel h2 {font-size:clamp(1.65rem,3vw,2.55rem);letter-spacing:-.035em;margin:7px 0 8px}
.section-title p:not(.kicker),.panel p:not(.kicker) {color:var(--muted)}
.panel {padding:22px;background:linear-gradient(150deg,#1c192d,var(--surface) 82%);border:1px solid var(--line);border-radius:17px}
.feature-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.feature {display:flex;flex-direction:column;align-items:flex-start;gap:10px;border-top-color:var(--accent2)}
.feature h3 {font-size:1.34rem;letter-spacing:-.02em}
.feature .button {margin-top:auto}
.metric {display:grid;gap:4px}
.metric strong {font-size:clamp(1.6rem,4vw,2.9rem);color:var(--accent);line-height:1.15}
.metric small,.fineprint {color:var(--muted)}
.empty h1,.empty h2,.empty h3 {margin-bottom:10px}
.empty p+.button,.empty h1+.button {margin-top:16px}
.empty {margin:24px 0}
.control,.free-game .btn {padding:8px 12px;color:var(--ink);background:#17182d;border:1px solid #ffffff2b;border-radius:9px;font-size:.84rem;font-weight:720}
.control:hover,.free-game .btn:hover {border-color:var(--accent)}
.control[aria-pressed="true"],.free-game .btn[aria-pressed="true"] {background:var(--accent);border-color:var(--accent);color:#101320}
.match-controls,.filter-row {display:flex;flex-wrap:wrap;gap:8px}
.feed-status {font-size:.88rem;color:var(--muted);margin:14px 0}
.matches {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px}
.match-card {padding:14px;border:1px solid #494359;border-radius:14px;background:#121425;display:flex;flex-direction:column;gap:7px}
.match-top {display:flex;align-items:center;justify-content:space-between;gap:10px}
.match-index {font-weight:850;color:var(--accent2);font-variant-numeric:tabular-nums}
.feed-label {font-size:.68rem;color:var(--accent);border:1px solid #ffffff2d;padding:2px 7px;border-radius:7px;text-transform:uppercase}
.competition,.pick-list small {color:var(--muted);font-size:.79rem}
.match-card h3 {font-size:1.04rem;line-height:1.25}
.match-card p.score {color:#f1e6ff;font-weight:700;font-variant-numeric:tabular-nums;font-size:.9rem}
.pick-actions {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:auto;padding-top:3px}
.pick-actions .control {font-size:.77rem;padding:7px 6px;overflow-wrap:anywhere}
.pick-list {list-style:none;padding:0;margin:0}
.pick-list li {display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding:10px 0}
.pick-list small {display:block}
.catalogue-bar {display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.search {font-size:.82rem;color:var(--muted);display:grid;gap:4px;max-width:100%;width:290px}
.search input {width:100%;border:1px solid #ffffff36;border-radius:9px;background:#101122;color:var(--ink);padding:8px 10px}
.game-grid {display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.game-card {overflow:hidden;border:1px solid #4c394e;border-radius:15px;background:#16182b;display:flex;flex-direction:column;transition:transform .2s,border-color .2s}
.game-card:hover {border-color:var(--accent2);transform:translateY(-3px)}
.game-art {display:grid;place-items:center;height:132px;background:radial-gradient(ellipse,#44283f,#101020);overflow:hidden}
.game-art img {width:100%;height:100%;object-fit:contain;transition:transform .3s}
.game-card:hover img {transform:scale(1.07)}
.game-copy {padding:12px;display:grid;align-content:start;gap:7px;flex:1}
.game-copy h3 {font-size:1rem;overflow-wrap:anywhere}
.game-state {font-size:.7rem;color:#c9b8db}
.game-state.play {color:#a3ecbd}
.game-state.offline {color:#fda4ad}
.game-link {font-size:.79rem;font-weight:780;color:var(--accent)}
.game-detail {display:flex;align-items:center;gap:24px;margin:34px 0 16px}
.game-detail img {width:min(26%,192px);height:auto;border-radius:13px}
.game-detail h1 {margin:8px 0;font-size:clamp(1.65rem,4vw,3.2rem)}
.game-room {margin-bottom:32px}
.game-room #game-start {margin:12px 0}
#play-board {display:flex;flex-wrap:wrap;align-items:center;gap:8px}
#play-board>* {max-width:100%}
#play-board .choice-grid,#play-board .mine-grid,#play-board .keno-grid {display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
#play-board .btn {min-width:34px}
#play-board button:disabled {opacity:.55;cursor:default}
.room-stats {display:flex;flex-wrap:wrap;gap:12px;color:var(--muted);padding-top:14px}
.room-stats strong {color:var(--ink)}
.footer {padding:35px 0;border-top:1px solid var(--line);background:#0c0e1b;scroll-margin-top:80px}
.footer h2 {font-size:1.5rem;margin:8px 0 13px}
.network-links {display:flex;flex-wrap:wrap;gap:9px}
.network-links a {padding:7px 10px;border:1px solid #ffffff25;border-radius:8px;font-size:.82rem}
.fineprint {font-size:.8rem;margin-top:17px}
@media(max-width:1060px) {.game-grid {grid-template-columns:repeat(4,minmax(0,1fr))}.matches {grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px) {
 .wrap {width:calc(100% - 28px)}.bar {min-height:67px;gap:10px}.navigation {display:none}
 .hero {grid-template-columns:1fr;min-height:0;margin-top:17px;gap:20px}.hero h1 {font-size:clamp(2.5rem,9vw,4.1rem)}
 .section {margin:34px 0;scroll-margin-top:80px}.feature-grid {grid-template-columns:1fr}
 .game-grid {grid-template-columns:repeat(3,minmax(0,1fr))}.game-art {height:105px}
 .catalogue-bar {align-items:stretch;flex-direction:column}.search {width:100%}
}
@media(max-width:460px) {
 .matches,.game-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
 .panel {padding:14px}.match-card {padding:10px;gap:5px}.match-card h3 {font-size:.93rem}
 .pick-actions {grid-template-columns:1fr}.hero-visual .visual-caption {font-size:.54rem}
 .game-detail {gap:13px}.game-detail img {width:32%}.game-detail .actions {margin-top:12px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after {scroll-behavior:auto!important;transition:none!important}}