:root{--bg:#07080d;--panel:#11131d;--panel2:#171a26;--line:#292d3d;--text:#f5f7ff;--muted:#9299ad;--lime:#c7ff38;--pink:#ff4dc8;--cyan:#4de8ff;--r:18px}
    *{box-sizing:border-box}html{color-scheme:dark}body{margin:0;background:radial-gradient(circle at 75% -10%,#28163d 0,transparent 28%),var(--bg);color:var(--text);font:16px/1.5 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;min-height:100vh}button,input{font:inherit}button{cursor:pointer}.shell{display:grid;grid-template-columns:230px 1fr;min-height:100vh}.side{padding:28px 20px;border-right:1px solid var(--line);background:#0a0b12cc;position:sticky;top:0;height:100vh}.brand{font-weight:950;letter-spacing:-1.2px;font-size:1.4rem}.brand i{color:var(--lime);font-style:normal}.side nav{display:grid;gap:8px;margin-top:42px}.nav{border:0;background:transparent;color:var(--muted);padding:12px 14px;text-align:left;border-radius:12px}.nav:hover,.nav.active{background:var(--panel2);color:var(--text)}.nav.active{box-shadow:inset 3px 0 var(--lime)}.profile{position:absolute;bottom:24px;left:20px;right:20px;padding:14px;background:var(--panel);border:1px solid var(--line);border-radius:15px}.profile strong{display:block}.profile small{color:var(--muted)}.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 10px var(--lime);margin-right:7px}.main{padding:28px 4vw 60px;max-width:1500px;width:100%;margin:auto}.top{display:flex;gap:18px;align-items:center;justify-content:space-between}.top h1{font-size:clamp(2rem,4vw,4.2rem);letter-spacing:-.07em;line-height:.9;margin:16px 0}.top h1 span{color:transparent;-webkit-text-stroke:1px var(--muted)}.search{display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:12px 16px;width:min(380px,46vw)}.search input{background:none;border:0;outline:0;color:var(--text);width:100%}.chips{display:flex;gap:10px;overflow:auto;padding:20px 0 22px;scrollbar-width:none}.chip{white-space:nowrap;border:1px solid var(--line);background:var(--panel);color:var(--muted);padding:9px 15px;border-radius:999px}.chip:hover,.chip.active{background:var(--lime);border-color:var(--lime);color:#111;font-weight:800}.layout{display:grid;grid-template-columns:minmax(0,1fr);gap:26px}.feature{grid-column:1/-1;position:relative;overflow:hidden;min-height:270px;border:1px solid #3f3556;border-radius:26px;padding:35px;background:linear-gradient(115deg,#171927 10%,#34205a 60%,#091822);display:flex;align-items:end}.feature:before,.feature:after{content:"";position:absolute;border-radius:50%;filter:blur(1px)}.feature:before{width:350px;height:350px;right:3%;top:-130px;border:48px solid var(--pink);opacity:.72}.feature:after{width:190px;height:190px;right:15%;bottom:-120px;border:30px solid var(--cyan);opacity:.75}.feature-copy{position:relative;z-index:1;max-width:570px}.eyebrow{color:var(--lime);font-weight:900;letter-spacing:.14em;font-size:.75rem}.feature h2{font-size:clamp(2rem,4vw,4rem);letter-spacing:-.06em;margin:5px 0}.feature p{color:#c7c9d8;margin:0 0 20px}.play{border:0;border-radius:12px;background:var(--lime);color:#10120a;font-weight:900;padding:12px 18px;box-shadow:0 7px 24px #c7ff3830}.section-head{display:flex;align-items:center;justify-content:space-between;margin:25px 0 14px}.section-head h2{margin:0;font-size:1.25rem}.count{color:var(--muted);font-size:.9rem}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.card{border:1px solid var(--line);background:linear-gradient(145deg,var(--panel2),#0e1018);border-radius:var(--r);overflow:hidden;transition:.2s}.card:hover{transform:translateY(-4px);border-color:#5d6277}.cover{height:148px;position:relative;display:grid;place-items:center;font-size:4rem;background:var(--art)}.cover:after{content:"";position:absolute;inset:auto 12px 10px;height:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent)}.tag{position:absolute;top:10px;left:10px;background:#090a10cc;border:1px solid #ffffff25;border-radius:999px;padding:4px 9px;font-size:.72rem}.body{padding:14px}.body h3{margin:0 0 3px}.meta{color:var(--muted);font-size:.82rem}.card-actions{display:flex;gap:8px;margin-top:13px}.mini{flex:1;border:1px solid var(--line);background:#202432;color:#fff;border-radius:9px;padding:8px}.mini:hover{border-color:var(--lime);color:var(--lime)}.empty{display:none;padding:50px;text-align:center;border:1px dashed var(--line);border-radius:var(--r);color:var(--muted)}.toast{position:fixed;right:24px;bottom:24px;background:var(--lime);color:#10120a;font-weight:850;padding:14px 18px;border-radius:13px;transform:translateY(120px);opacity:0;transition:.25s;z-index:5}.toast.show{transform:none;opacity:1}
    @media(max-width:980px){.shell{grid-template-columns:82px 1fr}.side{padding:25px 12px}.brand{font-size:0}.brand i{font-size:1.3rem}.nav{font-size:0;text-align:center}.nav:first-letter{font-size:1.2rem}.profile{display:none}.layout{grid-template-columns:1fr}.grid{grid-template-columns:repeat(2,1fr)}}
    @media(max-width:640px){.shell{display:block}.side{height:auto;position:fixed;inset:auto 0 0;z-index:4;border:1px solid var(--line);padding:8px;background:#0a0b12f5}.brand,.profile{display:none}.side nav{margin:0;grid-template-columns:repeat(2,1fr);gap:4px}.nav{padding:10px 4px}.main{padding:18px 16px 90px}.top{align-items:flex-start;flex-direction:column}.top h1{font-size:2.6rem}.search{width:100%}.feature{min-height:330px;padding:24px}.feature:before{right:-45%}.grid{grid-template-columns:1fr}.cover{height:180px}}

.werewolf-cover{overflow:hidden;background:radial-gradient(circle at 50% 52%,#263d5c 0,#17283f 48%,#0b1627 100%)}
.werewolf-backdrop{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(circle at 12% 30%,#d7ba7d 0 1px,transparent 2px),radial-gradient(circle at 83% 26%,#f0dba1 0 1.5px,transparent 2.5px),radial-gradient(circle at 72% 76%,#d7ba7d 0 1px,transparent 2px),radial-gradient(circle at 27% 82%,#f0dba1 0 1px,transparent 2px),linear-gradient(115deg,transparent 0 31%,#d7ba7d12 31.5% 32%,transparent 32.5% 68%,#d7ba7d12 68.5% 69%,transparent 69.5%)}
.werewolf-backdrop:before{content:'';position:absolute;inset:14px 22px;border:1px solid #d7ba7d78;border-radius:48% 48% 14px 14px;box-shadow:inset 0 0 0 5px #d7ba7d0a,0 0 30px #d7ba7d0d}
.werewolf-backdrop:after{content:'';position:absolute;width:112px;height:112px;border:1px solid #d7ba7d5e;transform:rotate(45deg);box-shadow:0 0 0 8px #d7ba7d0a}
.lobby-crescent{position:relative;z-index:2;width:78px;height:78px;border-radius:50%;background:#e4c77f;box-shadow:0 0 26px #d7ba7d42}
.lobby-crescent:after{content:'';position:absolute;width:70px;height:70px;left:27px;top:-7px;border-radius:50%;background:#1c304c}
.lobby-star{position:absolute;z-index:2;width:5px;height:5px;border-radius:50%;background:#f5dea0;box-shadow:-118px -35px 0 -1px #d7ba7d,112px -21px 0 -1px #d7ba7d,-91px 39px 0 -1px #f5dea0,96px 43px 0 -1px #f5dea0,0 -53px 0 0 #f5dea0,0 54px 0 -1px #d7ba7d}
.werewolf-cover .tag{z-index:3}
.coin-cover{overflow:hidden;background:radial-gradient(circle at 72% 22%,#31585a 0,#19343d 34%,#101a2b 72%,#0b1020 100%)}
.coin-cover .tag{z-index:5;box-shadow:0 5px 18px #02050a99}
.crime-cover{overflow:hidden;background:linear-gradient(135deg,#263a42,#51676d)}
.crime-cover .tag{z-index:3}.crime-cover-art{position:absolute;inset:24px;display:grid;place-items:center;border:1px solid #e5d39c88;border-radius:7px;background:linear-gradient(135deg,#e8e3d7 0 48%,#d5cfc2 48%);color:#24343a;box-shadow:0 18px 35px #08111766;transform:rotate(-3deg)}
.crime-cover-art:before,.crime-cover-art:after{content:'';position:absolute;background:#b14b43}.crime-cover-art:before{left:12%;right:12%;top:24%;height:2px;box-shadow:0 34px 0 #718187,0 68px 0 #718187}.crime-cover-art:after{right:13%;top:10%;width:58px;height:24px;border:2px solid #8e3f39;background:transparent;transform:rotate(8deg)}.crime-cover-art i{z-index:1;display:grid;place-items:center;width:64px;aspect-ratio:1;border:2px solid #9b493f;border-radius:50%;font:700 28px Georgia,serif;color:#8c403a}.crime-cover-art b{position:absolute;left:10px;bottom:8px;font:800 9px ui-monospace,monospace;letter-spacing:.2em}
.codenames-cover{overflow:hidden;background:#180205}.codenames-cover .tag{z-index:3;box-shadow:0 5px 18px #030000aa}.codenames-cover-art{position:absolute;inset:0;background:url('codenames-home-cover.webp') center 48%/cover no-repeat;transform:scale(1.025);transition:transform .35s ease,filter .35s ease;filter:saturate(.92) contrast(1.05)}.codenames-cover-art:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#07000045,transparent 40%,#0700001c),radial-gradient(circle at 40% 50%,transparent 35%,#07000055 100%)}.card:hover .codenames-cover-art{transform:scale(1.065);filter:saturate(1.04) contrast(1.08)}
.coin-machine-art{position:absolute;inset:0;display:block;overflow:hidden;pointer-events:none;background:linear-gradient(118deg,transparent 0 36%,#f9dc7a0b 36.5% 37.5%,transparent 38% 65%,#8fd9d30b 65.5% 66.5%,transparent 67%),radial-gradient(circle at 73% 38%,#f4d87518,transparent 29%)}
.coin-machine-art:before{content:'';position:absolute;inset:17px 20px;border:1px solid #d7ba7d45;border-radius:34px 34px 12px 12px;box-shadow:inset 0 0 0 6px #d7ba7d08,0 18px 40px #0005}
.coin-machine-art:after{content:'';position:absolute;z-index:1;left:7%;right:7%;top:57%;height:12px;border:1px solid #f2d57d88;border-radius:4px;background:linear-gradient(180deg,#e7c466,#765324 55%,#171b22 56%);box-shadow:0 19px 0 -5px #080d16,0 28px 25px #0008}
.coin-machine-art i{position:absolute;z-index:2;width:42px;aspect-ratio:1;border-radius:50%;background:transparent url('coin-lobby.png') center/100% 100% no-repeat;filter:drop-shadow(0 4px 5px #02040780)}
.coin-machine-art i:before,.coin-machine-art i:after{content:none}
.coin-machine-art i:nth-child(1){width:54px;left:13%;top:24%;transform:rotate(-12deg)}
.coin-machine-art i:nth-child(2){width:34px;left:31%;top:48%;transform:rotate(8deg)}
.coin-machine-art i:nth-child(3){width:47px;left:45%;top:18%;transform:rotate(15deg)}
.coin-machine-art i:nth-child(4){width:38px;left:61%;top:51%;transform:rotate(-9deg)}
.coin-machine-art i:nth-child(5){width:58px;right:9%;top:20%;transform:rotate(11deg)}
.coin-machine-art i:nth-child(6){width:31px;left:20%;bottom:8%;transform:rotate(18deg)}
.coin-machine-art i:nth-child(7){width:45px;left:50%;bottom:-8px;transform:rotate(-14deg)}
.coin-machine-art i:nth-child(8){width:34px;right:18%;bottom:7%;transform:rotate(7deg)}
  
a.nav{display:block;text-decoration:none}.play,.mini{display:inline-block;text-decoration:none;text-align:center}.mini:disabled{cursor:default;opacity:.55}.mini:disabled:hover{border-color:var(--line);color:#fff}a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}
@media(max-width:640px){.side{z-index:100}}
.feature.werewolf-feature{background:radial-gradient(circle at 82% 42%,#504c72 0 3%,transparent 28%),linear-gradient(115deg,#111724 8%,#242744 58%,#101521)}
.feature.werewolf-feature:before{width:220px;height:220px;right:8%;top:24px;border:0;background:radial-gradient(circle at 38% 34%,#fff2bd,#dfc37c 42%,#8d7442 70%,#312d31 71%);box-shadow:0 0 55px #d7ba7d42}
.feature.werewolf-feature:after{width:130px;height:130px;right:18%;bottom:-64px;border:1px solid #d7ba7d66;background:#0b1120aa}

/* iOS Safari zooms the entire page when a focused form control computes below
   16px. Keep every text-entry control at that threshold on phone layouts while
   preserving pinch zoom and the existing desktop type scale. */
@media(max-width:800px){
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),textarea,select{font-size:16px!important}
}