:root{--bg:#f5f6f0;--bg-tint:#eceee3;--surface:#fff;--surface-2:#f3f4ed;--surface-3:#e6e8da;--border:#e2e4d8;--border-strong:#c8cbb8;--text:#16170f;--text-dim:#55584a;--text-faint:#838774;--accent:#c8ff01;--accent-hover:#b6e800;--accent-text:#4e6b00;--accent-soft:#eefcc2;--accent-ring:#96be0066;--on-accent:#14170a;--warm:#d97706;--warm-soft:#fdf1d8;--good:#16955f;--good-soft:#dcf3e8;--bad:#d2453f;--bad-soft:#fbe4e3;--radius-xs:8px;--radius-sm:12px;--radius:18px;--radius-lg:26px;--radius-pill:999px;--shadow-sm:0 1px 2px #16170f0f, 0 2px 8px -4px #16170f14;--shadow:0 12px 32px -14px #16170f47;--shadow-accent:0 10px 26px -14px #a0cd00bf;--gutter:clamp(1rem, 4vw, 2.25rem);--content:74rem;--font-display:"Fredoka", "Nunito", system-ui, sans-serif;--font-body:"Nunito", system-ui, -apple-system, "Segoe UI", sans-serif}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#0c0d0a;--bg-tint:#121410;--surface:#16180f;--surface-2:#1e2116;--surface-3:#2a2e1f;--border:#272a1d;--border-strong:#3d422c;--text:#f6f7f0;--text-dim:#a9ad98;--text-faint:#7a7e6a;--accent:#c8ff01;--accent-hover:#d8ff45;--accent-text:#c8ff01;--accent-soft:#262d0a;--accent-ring:#c8ff0159;--on-accent:#12150a;--warm:#f6b442;--warm-soft:#33270f;--good:#45d492;--good-soft:#10301f;--bad:#ff6f68;--bad-soft:#351a1b;--shadow-sm:0 1px 2px #00000073;--shadow:0 18px 40px -18px #000000d9;--shadow-accent:0 14px 32px -16px #c8ff0173}}:root[data-theme=dark]{--bg:#0c0d0a;--bg-tint:#121410;--surface:#16180f;--surface-2:#1e2116;--surface-3:#2a2e1f;--border:#272a1d;--border-strong:#3d422c;--text:#f6f7f0;--text-dim:#a9ad98;--text-faint:#7a7e6a;--accent:#c8ff01;--accent-hover:#d8ff45;--accent-text:#c8ff01;--accent-soft:#262d0a;--accent-ring:#c8ff0159;--on-accent:#12150a;--warm:#f6b442;--warm-soft:#33270f;--good:#45d492;--good-soft:#10301f;--bad:#ff6f68;--bad-soft:#351a1b;--shadow-sm:0 1px 2px #00000073;--shadow:0 18px 40px -18px #000000d9;--shadow-accent:0 14px 32px -16px #c8ff0173}*,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{background:var(--bg);min-height:100vh;color:var(--text);font-family:var(--font-body);-webkit-font-smoothing:antialiased;margin:0;font-size:16px;font-weight:500;line-height:1.55}h1,h2,h3,h4{font-family:var(--font-display);letter-spacing:-.005em;margin:0;font-weight:600;line-height:1.15}h1{font-size:1.4rem}h2{font-size:1.6rem}h3{font-size:1.1rem}p{margin:0}ul,ol{margin:0;padding:0;list-style:none}a{color:inherit;text-decoration:none;transition:color .12s}a:hover{color:var(--accent-text)}img,svg{max-width:100%;display:block}:focus-visible{outline:3px solid var(--accent-ring);outline-offset:2px;border-radius:var(--radius-xs)}button,input,select,textarea{font:inherit;color:inherit}.btn{border-radius:var(--radius-pill);border:1.5px solid var(--border-strong);background:var(--surface);color:var(--text);font-family:var(--font-body);white-space:nowrap;cursor:pointer;justify-content:center;align-items:center;gap:.45rem;padding:.55rem 1.1rem;font-size:.92rem;font-weight:700;transition:background .14s,border-color .14s,color .14s,transform .1s,box-shadow .14s;display:inline-flex}.btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent-text)}.btn:active:not(:disabled){transform:translateY(1px)}.btn:disabled{opacity:.4;cursor:not-allowed}.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent);box-shadow:var(--shadow-accent)}.btn-primary:hover:not(:disabled){background:var(--accent-hover);border-color:var(--accent-hover);color:var(--on-accent)}.btn-ghost{color:var(--text-dim);background:0 0;border-color:#0000}.btn-ghost:hover:not(:disabled){background:var(--surface-2);color:var(--text);border-color:#0000}.btn-sm{padding:.32rem .75rem;font-size:.84rem}.btn-lg{padding:.72rem 1.5rem;font-size:1rem}.input{border-radius:var(--radius-pill);border:1.5px solid var(--border-strong);background:var(--surface);min-width:0;padding:.6rem .95rem;font-weight:600;transition:border-color .14s,box-shadow .14s}.input::placeholder{color:var(--text-faint);font-weight:500}.input:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-ring);outline:none}.card{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm)}.badge{border-radius:var(--radius-pill);background:var(--surface-2);color:var(--text-dim);white-space:nowrap;align-items:center;gap:.25rem;padding:.14rem .6rem;font-size:.76rem;font-weight:700;display:inline-flex}.badge-accent{background:var(--accent-soft);color:var(--accent-text)}.badge-warm{background:var(--warm-soft);color:var(--warm)}.badge-good{background:var(--good-soft);color:var(--good)}.muted{color:var(--text-dim)}.faint{color:var(--text-faint)}.tiny{font-size:.82rem}.mono{letter-spacing:.14em;font-family:ui-monospace,SF Mono,Cascadia Mono,Menlo,monospace;font-weight:700}.stack{flex-direction:column;gap:1rem;display:flex}.stack-sm{flex-direction:column;gap:.5rem;display:flex}.row{flex-wrap:wrap;align-items:center;gap:.6rem;display:flex}.alert{border-radius:var(--radius-sm);background:var(--bad-soft);color:var(--bad);padding:.7rem 1rem;font-size:.9rem;font-weight:600}.app{flex-direction:column;min-height:100vh;display:flex}.shell{width:100%;max-width:var(--content);padding-inline:var(--gutter);margin-inline:auto}.site-header{z-index:20;background:color-mix(in srgb, var(--bg) 85%, transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1.5px solid var(--border);position:sticky;top:0}.site-header .shell{align-items:center;gap:1.25rem;height:68px;display:flex}.brand{color:var(--text);flex:none;align-items:center;display:inline-flex}.brand:hover{color:var(--accent-text)}.brand svg{width:auto;height:30px}.site-nav{gap:.25rem;margin-right:auto;display:flex}.site-nav a{border-radius:var(--radius-pill);color:var(--text-dim);padding:.4rem .85rem;font-size:.92rem;font-weight:700}.site-nav a:hover{background:var(--surface-2);color:var(--text)}.site-nav a.active{background:var(--accent-soft);color:var(--accent-text)}.header-tools{align-items:center;gap:.5rem;display:flex}.site-main{flex:1;padding-block:clamp(1.5rem,4vw,3rem) 4.5rem}.site-footer{border-top:1.5px solid var(--border);color:var(--text-faint);padding-block:1.5rem;font-size:.84rem}.site-footer .shell{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;display:flex}.site-footer svg{width:auto;height:22px;color:var(--text-faint)}.player-chip{border:1.5px solid var(--border);border-radius:var(--radius-pill);background:var(--surface);align-items:center;gap:.45rem;padding:.22rem .7rem .22rem .22rem;display:flex}.avatar{border-radius:var(--radius-pill);width:28px;height:28px;font-family:var(--font-display);color:var(--on-accent);background:var(--accent);flex:none;place-items:center;font-size:.74rem;font-weight:600;display:grid}.avatar-img{border-radius:var(--radius-pill);object-fit:cover;flex:none;width:28px;height:28px}.player-chip input{background:0 0;border:none;width:8rem;padding:0;font-size:.88rem;font-weight:700}.player-chip input:focus{outline:none}.hero{border-radius:var(--radius-lg);background:radial-gradient(120% 140% at 8% 0%, var(--accent-soft) 0%, transparent 55%), var(--surface);border:1.5px solid var(--border);grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:center;gap:clamp(1.5rem,4vw,3rem);margin-bottom:2.75rem;padding:clamp(1.75rem,4vw,3rem);display:grid;position:relative;overflow:hidden}.hero-ghost{width:24rem;color:var(--accent);opacity:.07;pointer-events:none;position:absolute;bottom:-22%;right:-3%}.hero-copy{z-index:1;position:relative}.hero h2{letter-spacing:-.02em;margin-block:.6rem .85rem;font-size:clamp(2rem,4.6vw,3.1rem)}.hero p{color:var(--text-dim);max-width:32rem;font-size:1.03rem}.hero-actions{margin-top:1.75rem}.join-card{z-index:1;background:var(--bg-tint);border-color:var(--border-strong);padding:1.4rem;position:relative}.join-card h3{margin-bottom:.2rem}.join-form{gap:.5rem;margin-top:1rem;display:flex}.join-form .input{text-transform:uppercase;letter-spacing:.24em;text-align:center;font-family:var(--font-display);flex:1;font-size:1.05rem}.section-head{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.25rem;display:flex}.filter-row{flex-wrap:wrap;gap:.35rem;display:flex}.filter-row button{border-radius:var(--radius-pill);border:1.5px solid var(--border);background:var(--surface);color:var(--text-dim);cursor:pointer;padding:.34rem .9rem;font-size:.87rem;font-weight:700;transition:background .14s,color .14s,border-color .14s}.filter-row button:hover{color:var(--text);border-color:var(--border-strong)}.filter-row button[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}.game-grid{grid-template-columns:repeat(auto-fill,minmax(17.5rem,1fr));gap:1.25rem;display:grid}.game-card{flex-direction:column;transition:transform .16s,box-shadow .16s,border-color .16s;display:flex;overflow:hidden}.game-card:hover{border-color:var(--border-strong);box-shadow:var(--shadow);transform:translateY(-3px)}.game-cover{aspect-ratio:16/9;place-items:center;display:grid;position:relative;overflow:hidden}.game-cover svg{width:62%;height:auto}.status-pin{color:#16170f;background:#ffffffe6;position:absolute;top:.7rem;right:.7rem}.game-card-body{flex-direction:column;flex:1;gap:.6rem;padding:1.05rem 1.15rem 1.15rem;display:flex}.game-card-body h3 a:hover{color:var(--accent-text)}.game-card-tagline{color:var(--text-faint);font-size:.85rem;font-weight:600}.game-card-summary{color:var(--text-dim);flex:1;font-size:.9rem}.game-card-meta{flex-wrap:wrap;gap:.35rem;display:flex}.game-card-actions{gap:.5rem;margin-top:.35rem;display:flex}.game-card-actions .btn{flex:1}.crumbs{color:var(--text-faint);margin-bottom:1rem;font-size:.85rem;font-weight:600}.detail-hero{align-items:center;gap:1.25rem;margin-bottom:1.75rem;padding:1.25rem;display:flex}.detail-art{aspect-ratio:4/3;border-radius:var(--radius-sm);flex:none;place-items:center;width:8.5rem;display:grid;overflow:hidden}.detail-art svg{width:66%;height:auto}.detail-hero h2{font-size:clamp(1.6rem,3vw,2.1rem)}.detail-layout{grid-template-columns:minmax(0,1fr) 20rem;align-items:start;gap:1.5rem;display:grid}.panel{padding:1.35rem}.panel>h3{margin-bottom:.85rem}.rule-list{color:var(--text-dim);flex-direction:column;gap:.6rem;font-size:.93rem;display:flex}.rule-list li{gap:.65rem;display:flex}.rule-list li:before{content:"";border-radius:var(--radius-pill);background:var(--accent-text);flex:none;width:7px;height:7px;margin-top:.55rem}.mode-list{flex-direction:column;gap:.6rem;display:flex}.mode-row{border-radius:var(--radius-sm);background:var(--surface-2);align-items:center;gap:.85rem;padding:.85rem 1rem;display:flex}.mode-row div{flex:1;min-width:0}.mode-row strong{font-family:var(--font-display);font-size:1rem;font-weight:600}.mode-row p{color:var(--text-faint);font-size:.85rem}.meta-list{flex-direction:column;gap:.6rem;font-size:.92rem;font-weight:600;display:flex}.meta-list li{justify-content:space-between;gap:1rem;display:flex}.meta-list span:first-child{color:var(--text-faint);font-weight:500}.room-head{flex-wrap:wrap;align-items:center;gap:1rem;margin-bottom:1.25rem;padding:1rem 1.15rem;display:flex}.room-head-title{align-items:center;gap:.85rem;margin-right:auto;display:flex}.room-head .detail-art{aspect-ratio:1;border-radius:var(--radius-xs);width:3.6rem}.room-code{border:1.5px dashed var(--border-strong);border-radius:var(--radius-pill);background:var(--surface-2);align-items:center;gap:.6rem;padding:.35rem .4rem .35rem .9rem;font-size:.88rem;display:flex}.play-layout{grid-template-columns:minmax(0,1fr) 18rem;align-items:start;gap:1.25rem;display:grid}.board-frame{border:2px dashed var(--border-strong);border-radius:var(--radius-lg);background:var(--surface);text-align:center;place-items:center;min-height:min(62vh,32rem);padding:2rem;display:grid}.board-placeholder{flex-direction:column;align-items:center;gap:.75rem;max-width:27rem;display:flex}.board-placeholder .ghost{width:5rem;color:var(--text-faint);opacity:.55;margin-bottom:.25rem}.board-placeholder p{color:var(--text-dim);font-size:.94rem}.slot-list{flex-direction:column;gap:.45rem;display:flex}.slot{border-radius:var(--radius-pill);background:var(--surface-2);align-items:center;gap:.6rem;padding:.45rem .6rem;font-size:.9rem;font-weight:600;display:flex}.slot.empty{border:1.5px dashed var(--border);color:var(--text-faint);background:0 0}.slot .avatar{width:26px;height:26px;font-size:.68rem}.slot .avatar.ghost-seat{background:var(--surface-3);color:var(--text-faint)}.table{border-collapse:collapse;width:100%;font-size:.92rem}.table th{text-align:left;color:var(--text-faint);text-transform:uppercase;letter-spacing:.06em;border-bottom:1.5px solid var(--border);padding-bottom:.55rem;font-size:.76rem;font-weight:700}.table td{border-bottom:1px solid var(--border);padding-block:.6rem;font-weight:600}.table tr:last-child td{border-bottom:none}.table td:last-child,.table th:last-child{text-align:right}.empty-state{text-align:center;color:var(--text-faint);padding:1.5rem 1rem;font-size:.9rem;font-weight:600}@media (width<=64rem){.hero,.detail-layout,.play-layout{grid-template-columns:1fr}.hero-ghost{display:none}}@media (width<=44rem){.site-header .shell{flex-wrap:wrap;gap:.5rem;height:auto;padding-block:.6rem}.brand{margin-right:auto}.site-nav{order:3;width:100%;margin-right:0}.player-chip input{width:5.5rem}.detail-hero{flex-direction:column;align-items:flex-start}.detail-art{aspect-ratio:16/9;width:100%}.room-head-title{width:100%}}