@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/inter-400.woff2?v=1) format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url(/static/fonts/inter-600.woff2?v=1) format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap;src:url(/static/fonts/inter-700.woff2?v=1) format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:800;font-display:swap;src:url(/static/fonts/inter-800.woff2?v=1) format("woff2")}
:root{--purple:#7150db;--purple-dark:#5433b6;--lavender:#efebfb;--ink:#262638;--muted:#71717f;--line:#e8e8ef;--paper:#f8f9fc;--white:#fff;--orange:#fc965c;--radius:16px;--nav:80px;--side:220px;--font:Inter,"Inter Fallback",-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:105px}body{margin:0;font:15px/1.65 var(--font);color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased}h1,h2,h3,h4,p,figure{margin:0}h1,h2,h3,h4{line-height:1.17;font-weight:750;letter-spacing:-.035em}h1{font-size:clamp(36px,4vw,60px)}h2{font-size:27px}h3{font-size:19px}a{color:inherit;text-decoration:none}a:hover{color:var(--purple)}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:default}button{color:inherit}img{max-width:100%;height:auto;display:block}svg{width:21px;height:21px;flex:none;vertical-align:middle}button{border:0;background:none}a,button{touch-action:manipulation}p{color:var(--muted)}:focus-visible{outline:3px solid #a05cec;outline-offset:4px;border-radius:4px}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:fixed;left:20px;top:-70px;z-index:200;background:var(--purple);color:#fff;padding:12px 20px}.skip-link:focus{top:10px}.site-header{height:var(--nav);background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:26px;padding:0 30px 0 21px;position:sticky;top:0;z-index:50}.brand{display:flex;align-items:center;gap:3px;min-width:192px;font-size:25px;font-weight:850;letter-spacing:-1.2px;line-height:1}.brand img{width:43px;height:43px;object-fit:contain}.brand-purple,.footer-brand span{color:var(--purple)}.brand small{font-size:15px;color:#9b97a8;letter-spacing:-.3px}.top-nav{display:flex;align-items:center;gap:25px;white-space:nowrap;font-size:13px;font-weight:650}.top-nav>a{height:var(--nav);display:flex;align-items:center;position:relative;gap:7px}.top-nav>a.active:after{content:'';height:3px;background:var(--purple);position:absolute;bottom:0;left:0;right:0;border-radius:5px}.nav-pill{font-size:8px;letter-spacing:.6px;border:1px solid #e5def9;border-radius:4px;padding:2px 4px;color:var(--purple)}.header-search{display:flex;align-items:center;gap:10px;background:#f5f5f9;border:1px solid #ebebf2;border-radius:10px;padding:9px 12px;flex:1;max-width:400px;margin-left:auto;color:#a3a0af}.header-search input{border:0;outline:0;background:transparent;min-width:50px;width:100%;font-size:12px;color:var(--ink)}.header-search:focus-within{outline:2px solid #a792ed}.search-submit{border:1px solid #dddce7;border-radius:4px;font-size:13px;height:22px;line-height:1;padding:1px 6px;color:#8a8699}.icon-button{display:inline-flex;justify-content:center;align-items:center;min-width:40px;min-height:40px;border-radius:10px}.icon-button:hover{background:var(--lavender)}.surprise{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--purple);white-space:nowrap;background:#f1edfc;padding:10px 13px;border-radius:9px}.surprise svg{width:16px}.menu-trigger{display:none}.layout{display:flex;align-items:flex-start}.sidebar{width:var(--side);position:sticky;top:var(--nav);height:calc(100dvh - var(--nav));overflow:visible;flex:none;border-right:1px solid var(--line);background:#fff;padding:0}.side-link{display:flex;gap:12px;align-items:center;padding:10px 13px;border-radius:9px;margin:2px 0;font-size:12px;font-weight:550;color:#666477;min-height:42px}.side-link>svg{width:18px;height:18px;color:#888497}.side-link:hover{background:#f7f4ff}.side-link.active{background:#eee9fb;color:var(--purple);font-weight:700}.side-link.active>svg{color:var(--purple)}.side-count{margin-left:auto;font-size:10px;color:#9b96ac}.side-dot{margin-left:auto;background:var(--purple);width:5px;height:5px;border-radius:50%;display:none}.active .side-dot{display:block}.nav-divider{height:1px;background:#eeedf4;margin:18px 13px}.nav-label{font-size:9px;letter-spacing:1.4px;font-weight:750;color:#9e9baa;margin:0 13px 9px}.category-symbol{width:22px;height:22px;display:flex;align-items:center;justify-content:center}.category-symbol svg{width:18px;height:18px}.symbol-puzzle{color:#c180c4}.symbol-classics{color:#9773d8}.symbol-runners{color:#e7a347}.symbol-sports{color:#d48a69}.symbol-shooters{color:#999ad3}.symbol-skill{color:#74ae97}.symbol-strategy{color:#7898b7}.symbol-adventure{color:#c5ac79}.sidebar-note{background:#f6f2fd;border:1px solid #efebf7;border-radius:12px;padding:18px;margin:26px 5px 16px;position:relative;overflow:hidden}.sidebar-note strong{font-size:17px;line-height:1.35;display:block;letter-spacing:-.5px}.sidebar-note p{font-size:10px;line-height:1.8;margin-top:10px;color:#90899e}.little-spark{position:absolute;right:13px;top:12px;color:#ab94da;font-size:33px;transform:rotate(12deg)}.sidebar-foot{display:flex;gap:14px;justify-content:center;font-size:9px;color:#a19cab}.main-column{min-width:0;flex:1}main{padding:30px 34px 0;max-width:1660px;margin:auto;outline:none}.hero{position:relative;overflow:hidden;background:#eae3f9;min-height:370px;border-radius:20px;isolation:isolate}.hero-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}.hero:before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#eee8fc 0%,#eee8fcfa 22%,#eee8fc80 43%,transparent 63%);z-index:-1}.hero-content{padding:39px 36px 30px;position:relative;width:54%}.hero-kicker{display:flex;align-items:center;gap:7px;color:#79678f;font-size:8px;letter-spacing:1.4px;font-weight:750;margin-bottom:15px}.hero-kicker>span{width:5px;height:5px;border-radius:50%;background:var(--purple)}.hero h1{font-size:clamp(42px,4.5vw,68px);letter-spacing:-2.6px;line-height:1.05;position:relative;display:inline-block}.hero h1 em{font-style:normal;color:var(--purple)}.hero-underline{position:absolute;bottom:-10px;right:-7px;width:43%;height:14px}.hero-content>p{font-size:12px;line-height:1.8;color:#82758f;margin:21px 0 20px}.button{display:inline-flex;gap:13px;align-items:center;justify-content:center;background:var(--purple);color:#fff;border:1px solid transparent;padding:12px 22px;min-height:44px;border-radius:9px;font-weight:650;font-size:12px;line-height:1.5;transition:background .15s,transform .15s}.button:hover{background:var(--purple-dark);color:#fff;transform:translateY(-1px)}.button svg{width:17px;height:17px}.button-white{background:#fff;color:var(--ink)}.button-white:hover{background:#f2ecff;color:var(--purple)}.button-outline{background:transparent;border-color:var(--line);color:var(--ink)}.button-outline:hover{background:var(--lavender);color:var(--purple)}.button.small{padding:8px 14px;font-size:11px;min-height:40px}.hero-promises{display:flex;gap:13px;font-size:8px;color:#877b96;margin-top:22px;white-space:nowrap}.hero-promises span{display:flex;align-items:center;gap:3px}.hero-promises svg{width:12px;height:12px;color:#a993c4}.hero-sticker{position:absolute;right:25px;top:28px;width:87px;height:87px;background:#fff6d9;color:#81723e;border:1px solid #fffdf4;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-direction:column;font-size:8px;line-height:1.5;letter-spacing:.6px;transform:rotate(13deg);box-shadow:0 4px 15px #614a5110}.hero-sticker b{font-size:9px}.hero-sticker>span{font-size:20px;line-height:1.4;color:#dcab52}.category-chips{display:flex;gap:9px;overflow:auto;scrollbar-width:none;margin:22px 0 32px;padding:2px;white-space:nowrap}.chip{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 16px;background:white;border:1px solid var(--line);border-radius:8px;font-size:11px;font-weight:600;min-height:40px}.chip svg{width:15px;height:15px;color:#9891a3}.chip.selected{background:var(--purple);border-color:var(--purple);color:#fff}.chip.selected svg{color:#fff}.chip:not(.selected):hover{border-color:#b5a1ea;color:var(--purple)}.section{margin:38px 0 43px}.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:23px}.eyebrow{display:block;font-size:8px;font-weight:800;color:#98909f;letter-spacing:1.6px;margin-bottom:10px}.section-heading h2{font-size:24px}.section-heading p{font-size:12px;margin-top:9px}.heading-spark{color:#f5ac60;font-size:25px;display:inline-block;margin-left:4px}.text-link{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:650;color:var(--purple);flex:none}.text-link svg{width:15px;height:15px}.game-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:24px 16px}.game-card{min-width:0}.game-art{display:block;position:relative;aspect-ratio:1.46;overflow:hidden;background:#e8e0f4;border-radius:12px;isolation:isolate}.game-art img{width:100%;height:100%;object-fit:cover;transition:transform .25s}.game-card:hover .game-art img{transform:scale(1.05)}.card-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;background:#39245340;opacity:0;transition:opacity .2s}.card-play svg{background:var(--purple);border-radius:50%;padding:12px;width:48px;height:48px;fill:#fff}.game-art:hover .card-play,.game-art:focus-visible .card-play{opacity:1}.card-badge{position:absolute;left:8px;top:8px;background:#fff9ed;color:#8a6936;font-size:6px;font-weight:800;letter-spacing:.5px;padding:3px 6px;border-radius:4px;box-shadow:0 2px 5px #0001}.game-card-info{display:flex;align-items:flex-start;gap:5px;justify-content:space-between;padding:10px 1px 0}.game-card-info>div{min-width:0}.game-card-info a{display:block;font-size:12px;font-weight:750;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.5;letter-spacing:-.15px}.game-card-info>div>span{display:block;font-size:8px;color:#a09baa;margin-top:3px;white-space:nowrap}.tiny-dot{padding:0 5px}.save-game{padding:0;display:flex;justify-content:center;align-items:center;color:#b8b3c1;min-height:28px;min-width:28px;margin:-4px -5px 0 0}.save-game svg{width:15px;height:15px}.save-game:hover,.save-game[aria-pressed=true]{color:#af70c9}.save-game[aria-pressed=true] svg{fill:#f0dff7}.discovery-banner{display:flex;align-items:center;gap:22px;border:1px solid #e7e1f5;border-radius:14px;background:#f0ecf9;padding:23px 26px;margin:42px 0}.discovery-mark{height:55px;width:55px;border-radius:15px;background:#e3d9f6;display:flex;align-items:center;justify-content:center;transform:rotate(-8deg);color:#9a79cf;flex:none}.discovery-mark svg{width:31px;height:31px}.discovery-banner .eyebrow{font-size:7px;color:#9d8ead;margin-bottom:5px}.discovery-banner h2{font-size:20px}.discovery-banner p{font-size:10px;margin-top:7px;color:#9c91aa}.discovery-banner .button{margin-left:auto;white-space:nowrap;font-size:10px;padding:11px 16px}.category-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:17px}.category-card{border:1px solid var(--line);border-radius:13px;overflow:hidden;background:#fff;transition:transform .2s}.category-card:hover{transform:translateY(-3px)}.category-card img{width:100%;aspect-ratio:1.85;object-fit:cover}.category-card>div{padding:15px 16px}.category-card h3{font-size:15px;letter-spacing:-.2px}.category-card span{font-size:9px;color:#a399ad;display:flex;justify-content:space-between;margin-top:8px}.category-card svg{height:14px;width:14px;color:var(--purple)}.magazine-section{padding-top:8px}.guide-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:21px}.guide-card{border:1px solid var(--line);border-radius:14px;background:#fff;overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .2s}.guide-card:hover{box-shadow:0 8px 25px #4236500c}.guide-image{position:relative;overflow:hidden}.guide-image img{width:100%;aspect-ratio:1.9;object-fit:cover;transition:transform .25s}.guide-card:hover img{transform:scale(1.035)}.guide-image>span{position:absolute;bottom:11px;left:15px;background:#fffef5e8;padding:4px 8px;border-radius:4px;font-size:7px;letter-spacing:.8px;color:#665370;font-weight:700}.guide-card-copy{padding:20px;flex:1;display:flex;flex-direction:column}.guide-card h3,.guide-card h2{font-size:21px;line-height:1.22;letter-spacing:-.6px}.guide-card p{font-size:11px;line-height:1.8;margin:11px 0 21px;color:#98909e}.guide-card .text-link{margin-top:auto;font-size:9px}.about-home{display:grid;grid-template-columns:1fr 1.65fr;gap:60px;border-top:1px solid var(--line);padding:42px 0;margin-top:48px}.about-home h2{font-size:34px;letter-spacing:-1.3px;line-height:1.18}.about-home p{font-size:12px;line-height:1.95;margin-bottom:13px}.about-home .text-link{margin-top:3px}.site-footer{border-top:1px solid var(--line);padding:28px 34px 22px;margin-top:15px;display:flex;flex-wrap:wrap;gap:23px;align-items:center;background:#fff}.footer-brand{font-weight:850;font-size:21px;letter-spacing:-.8px}.site-footer p{font-size:9px;margin-top:5px;color:#a39bac}.site-footer nav{display:flex;gap:17px;margin-left:auto;flex-wrap:wrap}.site-footer nav a{font-size:9px;color:#8d8597}.site-footer small{flex:0 0 100%;font-size:8px;color:#b0aab7;padding-top:16px;border-top:1px solid #f0edf4}.breadcrumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:10px;color:#a09baa;margin:0 0 23px;line-height:1.7}.breadcrumbs>span[aria-current]{color:#797281}.page-heading{padding:14px 0 30px;max-width:100%}.page-heading h1{font-size:43px;margin:8px 0 15px}.page-heading p{max-width:670px;font-size:14px;line-height:1.85}.page-heading.with-art{display:flex;align-items:center;justify-content:space-between;gap:36px;background:#f0eafa;padding:28px 30px;border-radius:17px;margin-bottom:27px}.page-heading.with-art>div{max-width:650px}.page-heading.with-art h1{font-size:40px}.page-heading.with-art img{width:32%;max-width:280px;border-radius:12px;aspect-ratio:1.4;object-fit:cover}.count-label{display:inline-block;margin-top:18px;background:#fff9;border:1px solid #ffffff80;padding:5px 10px;border-radius:6px;font-size:10px;color:#87798f}.listing-grid{margin:20px 0 45px}.inline-search{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);padding:10px 13px;border-radius:12px;max-width:680px}.inline-search input{flex:1;min-width:0;border:0;outline:none;background:none}.library-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:20px}.library-toolbar p{font-size:12px}.empty-state{padding:50px 25px;text-align:center;border:1px dashed #d9cfea;border-radius:15px;margin-bottom:45px}.empty-state a{color:var(--purple);display:block;margin-top:15px}.category-guide{display:grid;grid-template-columns:1fr 1.3fr;gap:55px;border-top:1px solid var(--line);padding:40px 0}.category-guide h2{font-size:33px}.category-guide p{font-size:13px;line-height:1.9;margin:15px 0 20px}.category-guide h3{font-size:20px}.editorial-hero{display:grid;grid-template-columns:1fr 1fr;align-items:center;border-radius:20px;overflow:hidden;background:#f3ebd8;margin-bottom:47px}.editorial-hero>div{padding:45px 35px}.editorial-hero h1{font-size:54px;letter-spacing:-2px}.editorial-hero h1 em{color:var(--purple);font-style:normal}.editorial-hero p{font-size:13px;max-width:340px;margin:20px 0 25px}.editorial-hero>img{height:100%;width:100%;object-fit:cover}.guide-library{gap:27px;margin-bottom:40px}.article-header{max-width:880px;margin:18px auto 32px;text-align:center}.article-header h1{font-size:clamp(38px,4.6vw,64px);letter-spacing:-2px;line-height:1.08}.article-deck{font-size:17px;line-height:1.7;margin:20px auto;max-width:700px}.byline{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;font-size:10px;color:#a39aaa}.byline a{color:var(--purple)}.byline img{border-radius:50%}.article-cover{max-width:1080px;margin:30px auto 45px}.article-cover>img{width:100%;max-height:450px;object-fit:cover;border-radius:17px}.article-cover figcaption{font-size:9px;color:#a79eac;margin-top:8px}.article-layout{display:grid;grid-template-columns:210px minmax(0,710px);gap:50px;max-width:1030px;margin:0 auto 45px}.article-toc{align-self:start;position:sticky;top:110px;border-top:2px solid var(--purple);padding-top:20px}.article-toc nav{display:grid;gap:11px;margin:15px 0 24px}.article-toc nav a{font-size:11px;line-height:1.6;color:#84798d}.prose{font-size:16px;line-height:1.95;color:#62586c}.prose h2{font-size:28px;margin:35px 0 17px;color:var(--ink)}.prose section:first-child h2{margin-top:0}.prose h3{font-size:22px;margin:26px 0 12px}.prose p{color:inherit;margin-bottom:21px}.prose a{color:var(--purple);text-decoration:underline;text-decoration-color:#d0bce7;text-underline-offset:3px}.prose li{margin-bottom:10px}.prose img{border-radius:10px}.prose table{border-collapse:collapse;width:100%;font-size:14px}.prose th,.prose td{padding:10px;border:1px solid var(--line);text-align:left}.prose blockquote{margin-left:0;border-left:3px solid var(--purple);padding:10px 20px;background:#f2ebf8}.editor-note{background:#f0ecf8;border:1px solid #e6def0;padding:22px;border-radius:12px;margin:35px 0 0;font-size:12px}.editor-note p{margin:8px 0 0}.info-prose{max-width:760px;margin:35px auto 45px;padding:30px 40px;background:white;border:1px solid var(--line);border-radius:16px}.info-return{text-align:center;margin:35px 0 50px}.journal-empty{margin:35px auto;text-align:center;max-width:620px}.journal-empty p{margin-top:17px;font-size:14px}.article-next{padding:40px 0;margin:30px 0;border-top:1px solid var(--line)}.article-next h2{margin-bottom:25px}.article-next .text-link{margin-left:25px}.sitemap-columns{columns:3;column-gap:35px;margin:20px 0 50px}.sitemap-columns section{break-inside:avoid;margin-bottom:30px;background:#fff;border:1px solid var(--line);padding:20px;border-radius:12px}.sitemap-columns h2{font-size:20px;margin-bottom:15px}.sitemap-columns section>a{display:block;font-size:12px;padding:5px 0;color:#8a7e97}.mobile-menu,.mobile-bottom{display:none}
/* The playable area keeps its controls and instructions together. */
.game-page-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:0 0 22px}.game-page-heading h1{font-size:34px}.game-page-heading p{font-size:12px;margin-top:7px}.game-actions{display:flex;gap:8px;flex:none}.game-actions .save-game{margin:0;border:1px solid var(--line);background:#fff;min-width:43px;min-height:43px;border-radius:9px}.game-actions .save-game svg{height:20px;width:20px}.game-layout{display:grid;grid-template-columns:minmax(0,1fr) 235px;gap:22px;align-items:start}.machine{background:#101224;border-radius:16px;overflow:hidden;box-shadow:0 6px 24px #25203b12}.machine-hud{display:flex;align-items:center;gap:24px;padding:13px 18px;background:#1b1b31;color:#fff}.hud-stat{display:flex;flex-direction:column;line-height:1.5}.hud-stat .lbl{font-size:8px;color:#9490af;text-transform:uppercase;letter-spacing:1px}.hud-stat .val{font-size:17px;font-weight:750;font-variant-numeric:tabular-nums}.machine-btns{display:flex;gap:7px;margin-left:auto}.m-btn{background:#2a283f;color:#e4def7;padding:7px 9px;min-width:35px;min-height:35px;font-size:12px;border-radius:6px}.m-btn-primary{background:#7351d8}.m-btn.muted{color:#f5a26a}.machine-screen{position:relative;min-height:360px;background:#0b0d18}.machine-screen #board-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;max-width:100%;margin:auto;width:100%}.arcade-canvas{display:block;max-width:100%;outline:none}.game-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#111124cd;z-index:3;backdrop-filter:blur(3px);padding:20px}.overlay-card{max-width:430px;padding:30px;text-align:center;color:#fff}.overlay-title{font-size:29px;letter-spacing:-1px;font-weight:750;color:white;line-height:1.2}.overlay-sub{font-size:12px;line-height:1.8;color:#b3aaca;margin:15px 0 22px}.overlay-icon{height:70px;width:70px;object-fit:contain;border-radius:18px;margin:0 auto 22px}.overlay-actions{display:flex;gap:10px;justify-content:center;margin-top:20px}.overlay-final{font-size:13px;color:#c8bedb}.overlay-final span{font-weight:700;color:#ffce69;margin-left:8px}.controls-line{display:flex;gap:15px;flex-wrap:wrap;background:#1b1b31;padding:12px 16px;color:#a49ab7;font-size:9px}.kbd{padding:3px 5px;background:#302d44;border:1px solid #48405c;border-radius:4px;color:#ded6f1;margin-right:5px;display:inline-block}.touch-bar{display:flex;justify-content:center;gap:8px;padding:9px;width:100%;flex-wrap:wrap;background:#1a1830}.touch-btn{height:48px;min-width:50px;padding:8px 15px;background:#353045;border:1px solid #544665;color:#eee2ff;border-radius:10px;touch-action:none;user-select:none}.machine:fullscreen{border-radius:0;overflow:auto;display:flex;flex-direction:column;justify-content:center}.machine:fullscreen .machine-screen{flex:1;display:flex;align-items:center;justify-content:center}.game-side{background:white;border:1px solid var(--line);border-radius:13px;padding:20px}.game-side .eyebrow{font-size:7px}.game-side .side-guide-title{font-size:20px}.game-side p{font-size:11px;margin:14px 0;line-height:1.8}.game-side .button{font-size:10px;padding:10px 12px;width:100%}.game-facts{display:grid;gap:9px;font-size:10px;color:#8d839c;border-top:1px solid var(--line);margin-top:20px;padding-top:18px}.game-facts>div{display:flex;align-items:center;gap:8px}.game-facts svg{width:14px;height:14px;color:#a593ba}.game-info{display:grid;grid-template-columns:1.3fr 1fr;gap:45px;margin:42px 0}.game-info h2{font-size:25px;margin-bottom:20px}.how-steps{list-style:none;padding:0;counter-reset:steps;display:grid;gap:18px}.how-steps li{position:relative;padding-left:38px;counter-increment:steps}.how-steps li:before{content:counter(steps,decimal-leading-zero);position:absolute;left:0;top:1px;font-size:12px;font-weight:700;color:#a08cc1}.how-steps h3{font-size:14px;margin-bottom:8px}.how-steps p,.game-tips li{font-size:12px;line-height:1.9;color:#92869e}.game-tips{background:#f0eaf8;border:1px solid #e8def2;border-radius:14px;padding:26px;align-self:start}.game-tips h2{font-size:20px}.game-tips ul{padding-left:16px;margin:0}.game-tips li{padding-left:3px;margin-bottom:12px}.game-tips a{margin-top:10px}.game-edition{font-size:11px;border-top:1px solid var(--line);padding-top:20px;margin-top:20px;line-height:1.9}.game-edition a{color:var(--purple)}.game-guide-link{display:flex;gap:20px;align-items:center;padding:23px;background:#fff;border:1px solid var(--line);border-radius:13px;margin:25px 0}.game-guide-link img{width:100px;aspect-ratio:1.3;object-fit:cover;border-radius:9px}.game-guide-link h2{font-size:20px}.game-guide-link p{font-size:11px;margin-top:7px}.game-guide-link>.text-link{margin-left:auto}.native-board{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;padding:24px}.native-toolbar{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px;margin-bottom:20px}.native-toolbar label{font-size:12px;color:#8c7a9a}.native-toolbar select,.native-toolbar input{border:1px solid #dfd5e7;background:#faf7fe;padding:9px;border-radius:7px;max-width:100px}.game-status{text-align:center;min-height:29px;margin:12px 0;color:#846d9d;font-size:13px;font-weight:550}.sudoku-grid{display:grid;grid-template-columns:repeat(9,1fr);aspect-ratio:1;max-width:480px;border:2px solid #6e558c;margin:auto}.sudoku-cell{display:flex;align-items:center;justify-content:center;padding:0;border-right:1px solid #e1d7eb;border-bottom:1px solid #e1d7eb;min-width:0;border-radius:0;font-size:clamp(18px,2.4vw,29px);background:#fff;color:#7953c5;position:relative;aspect-ratio:1;line-height:1}.sudoku-cell:nth-child(3n){border-right:2px solid #8e77a4}.sudoku-cell:nth-child(9n){border-right:0}.sudoku-cell:nth-child(n+19):nth-child(-n+27),.sudoku-cell:nth-child(n+46):nth-child(-n+54){border-bottom:2px solid #8e77a4}.sudoku-cell.given{font-weight:650;color:#494052;background:#faf8fc}.sudoku-cell.selected{background:#e4d7f8;box-shadow:inset 0 0 0 2px #b293df}.sudoku-cell.conflict{background:#ffe1df;color:#bf524d}.sudoku-cell.notes{font-size:10px;line-height:1.2;padding:4px;word-break:break-all;letter-spacing:2px}.number-pad{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;margin:20px auto 0;max-width:490px}.number-pad button{background:#f1eafa;color:#77559d;border:1px solid #e4d6f1;border-radius:7px;min-height:40px;min-width:36px;font-weight:700}.number-pad button[aria-pressed=true]{background:var(--purple);color:#fff}.mine-grid{display:grid;grid-template-columns:repeat(9,1fr);max-width:450px;aspect-ratio:1;margin:auto;gap:3px;padding:8px;background:#e7dcf0;border-radius:12px}.mine-cell{aspect-ratio:1;background:#aa92c8;border-radius:5px;font-size:18px;font-weight:750;padding:0;color:#fff;min-width:0;box-shadow:inset 0 -3px 0 #6b459923}.mine-cell.revealed{background:#f9f6fc;color:#70538e;box-shadow:none}.mine-cell[data-n='1']{color:#5371b3}.mine-cell[data-n='2']{color:#4f906d}.mine-cell[data-n='3']{color:#bc654f}.mine-cell.exploded{background:#f6b3aa}.ttt-grid{display:grid;grid-template-columns:repeat(3,1fr);max-width:360px;gap:10px;margin:auto}.ttt-cell{aspect-ratio:1;background:#f0e9f8;border:1px solid #e0d4ed;border-radius:13px;color:var(--purple);font-size:48px;font-weight:750;line-height:1}.ttt-cell[data-mark=O]{color:#e69d65}.ttt-cell.win{background:#e3f0df;border-color:#a4c49b}.clock-panels{display:grid;grid-template-columns:1fr 1fr;gap:15px}.clock-panel{padding:30px 10px;border-radius:13px;background:#f1ebf8;border:2px solid #e2d7ee}.clock-panel.active{background:#e5d8f6;border-color:#a486cb}.clock-panel span{display:block;font-size:12px;color:#695975}.clock-panel strong{font-size:clamp(28px,5vw,64px);font-variant-numeric:tabular-nums;letter-spacing:-2px}.native-help{text-align:center;font-size:10px;color:#a394af;margin-top:15px}
@media(min-width:1700px){:root{--side:245px}main{padding:36px 46px 0}.hero{min-height:460px}.hero-content{padding:52px 46px}.hero h1{font-size:77px}.hero-content>p{font-size:15px}.hero-kicker{font-size:10px}.hero-promises{font-size:10px}.game-card-info a{font-size:15px}.game-card-info>div>span{font-size:10px}.game-grid{gap:27px 22px}.side-link{font-size:14px}.hero .button{font-size:14px}.guide-card h3{font-size:25px}}
@media(max-width:1250px){:root{--side:195px}.site-header{gap:17px;padding-right:22px}.brand{min-width:174px;font-size:23px}.top-nav{gap:17px;font-size:11px}.header-search{max-width:280px}.surprise{font-size:10px;padding:9px}.desktop-favorite{display:none}main{padding:25px 25px 0}.sidebar{padding-left:9px;padding-right:9px}.side-link{font-size:11px;gap:9px}.hero{min-height:330px}.hero-content{padding:30px 27px;width:58%}.hero h1{font-size:52px}.hero-sticker{width:72px;height:72px;font-size:7px;right:20px;top:20px}.hero-promises{gap:9px;font-size:7px}.hero-content>p{font-size:11px}.hero-kicker{font-size:7px;letter-spacing:1px}.game-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:22px 13px}.section-heading h2{font-size:21px}.heading-spark{display:none}.game-grid .game-card:nth-child(n+11):nth-child(-n+12){display:block}.game-layout{grid-template-columns:minmax(0,1fr) 210px;gap:17px}.game-side{padding:16px}.guide-card h3{font-size:19px}.article-layout{grid-template-columns:170px minmax(0,1fr);gap:30px}.top-nav .nav-pill{display:none}.hero-promises svg{width:10px}.hero .button{font-size:11px}.site-footer nav{gap:12px}.site-footer{padding-left:25px;padding-right:25px}.discovery-banner{padding:20px;gap:17px}.discovery-banner h2{font-size:18px}}
@media(max-width:1050px){:root{--side:180px}.site-header{gap:14px}.brand{min-width:158px;font-size:21px}.brand img{width:38px;height:38px}.top-nav{gap:15px;font-size:10px}.header-search{max-width:240px}.surprise span{display:none}.surprise{padding:10px}.game-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.hero-content{width:65%}.hero h1{font-size:48px}.hero:before{background:linear-gradient(90deg,#eee8fc 0%,#eee8fcf7 24%,#eee8fc80 53%,transparent 80%)}.category-cards{gap:12px}.category-card>div{padding:13px 11px}.category-card h3{font-size:13px}.game-layout{grid-template-columns:1fr}.game-side{display:none}.machine-screen #board-wrap{max-width:700px}.guide-grid{gap:15px}.guide-card-copy{padding:15px}.guide-card h3{font-size:17px}.section-heading h2{font-size:20px}.section-heading>.text-link{font-size:9px}.discovery-banner .button{font-size:9px;padding:9px 12px}.discovery-mark{width:45px;height:45px}.discovery-banner h2{font-size:16px}.discovery-banner p{font-size:9px}.about-home{gap:35px}.about-home h2{font-size:30px}.article-layout{grid-template-columns:1fr}.article-toc{position:static;border-top:1px solid #dfd3ef;padding:15px;background:#f1eafa;border-radius:10px}.article-toc nav{grid-template-columns:1fr 1fr;margin:10px 0}.article-toc .text-link{margin-top:8px}.editorial-hero h1{font-size:42px}.editorial-hero>div{padding:30px 25px}.page-heading.with-art h1{font-size:32px}.sitemap-columns{columns:2}}
@media(max-width:800px){:root{--nav:68px;--side:0px}.site-header{padding:0 20px;gap:18px}.brand{min-width:auto;font-size:24px}.brand img{width:42px;height:42px}.top-nav,.sidebar,.surprise{display:none}.header-search{max-width:320px;margin-left:auto}.menu-trigger{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:700;border:1px solid var(--line);border-radius:8px;min-height:40px;padding:7px 10px}.menu-trigger svg{width:17px;height:17px}.layout{display:block}main{padding:23px 22px 0}.hero{min-height:360px}.hero-content{padding:35px 30px;width:60%}.hero h1{font-size:58px}.hero-content>p{font-size:12px}.hero-kicker{font-size:7px}.hero-promises{font-size:8px}.hero-sticker{width:77px;height:77px}.game-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:23px 15px}.game-card-info a{font-size:12px}.game-card-info>div>span{font-size:8px}.category-chips{margin-bottom:30px}.section-heading h2{font-size:23px}.section-heading>.text-link{font-size:10px}.guide-card h3{font-size:20px}.section{margin:34px 0}.discovery-banner h2{font-size:18px}.discovery-banner .button{font-size:10px}.site-footer{padding:27px 22px 90px}.site-footer nav{margin-left:0;gap:14px}.mobile-bottom{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:40;background:#ffffffed;border-top:1px solid var(--line);backdrop-filter:blur(15px);padding:9px 15px calc(9px + env(safe-area-inset-bottom));justify-content:space-around}.mobile-bottom a{display:flex;flex-direction:column;align-items:center;gap:4px;color:#8a7c9b;font-size:8px;font-weight:650;min-width:60px;min-height:37px}.mobile-bottom svg{width:20px;height:20px}.mobile-menu{max-width:none;max-height:none;width:100%;height:100dvh;margin:0;border:0;padding:0;background:#fbf9ff;color:var(--ink);overflow:auto}.mobile-menu[open]{display:block}.mobile-menu::backdrop{background:#34214c70}.mobile-menu-top{position:sticky;top:0;background:#fff;height:70px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 22px;z-index:2}.mobile-menu-body{padding:27px 24px calc(30px + env(safe-area-inset-bottom));max-width:700px;margin:auto}.mobile-menu-body h2{font-size:32px;letter-spacing:-1px}.mobile-menu-body>.eyebrow{font-size:8px}.mobile-search{display:flex;align-items:center;gap:9px;padding:8px 10px 8px 15px;background:#fff;border:1px solid #e5dcef;border-radius:12px;margin:22px 0}.mobile-search>svg{color:#ae9abd}.mobile-search input{min-width:0;flex:1;border:0;background:none;outline:none;font-size:12px}.mobile-featured{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:29px}.mobile-featured a{display:flex;flex-direction:column;align-items:flex-start;border:1px solid #e7dbf3;background:#f1eafa;padding:17px 12px;border-radius:12px}.mobile-featured a:nth-child(2){background:#fcecee;border-color:#f1dfe2}.mobile-featured a:nth-child(3){background:#f8f1df;border-color:#f0e5ce}.mobile-featured svg{width:23px;height:23px;color:#a183c4;margin-bottom:16px}.mobile-featured strong{font-size:12px;line-height:1.4}.mobile-featured small{font-size:8px;color:#a08aa9;margin-top:5px}.mobile-menu-body>.nav-label{margin-left:0}.mobile-category-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 21px}.mobile-category-grid>a{display:flex;align-items:center;gap:10px;border-bottom:1px solid #e9e0f2;padding:13px 0;font-size:11px;font-weight:600;min-height:49px}.mobile-category-grid>a>svg{width:13px;margin-left:auto;color:#b4a5c1}.mobile-category-grid .category-symbol{height:28px;width:28px;background:#fff;border-radius:8px}.mobile-utility{display:flex;flex-wrap:wrap;gap:13px 20px;margin:28px 0;font-size:10px;color:#9a88aa}.mobile-menu-body>.button{width:100%;min-height:47px}.mobile-note{text-align:center;font-size:9px;margin-top:15px;color:#b09cbd}.page-heading.with-art{gap:20px}.article-header h1{font-size:49px}.game-info{gap:30px}.game-guide-link h2{font-size:18px}.editorial-hero h1{font-size:46px}.guide-grid{gap:15px}.guide-card p{font-size:11px}.guide-card-copy{padding:17px}}
@media(max-width:560px){:root{--nav:64px}.site-header{padding:0 15px;gap:10px}.brand{font-size:23px;gap:1px}.brand img{height:39px;width:39px}.brand small{font-size:12px}.header-search{margin-left:auto;background:transparent;border:0;padding:0;flex:0}.header-search input,.header-search .search-submit{display:none}.header-search>svg{display:none}.header-search:after{content:none}.menu-trigger{margin-left:auto;gap:7px;font-size:10px;padding:7px 9px}.menu-trigger svg{width:17px}main{padding:17px 16px 0}.hero{border-radius:16px;min-height:510px;background:#eee7fa}.hero-art{top:auto;bottom:0;height:62%;object-fit:cover;object-position:78% 65%;width:100%}.hero:before{background:linear-gradient(180deg,#eee7fa 0%,#eee7fa 35%,#eee7fab0 48%,transparent 64%)}.hero-content{width:100%;padding:28px 25px 0}.hero h1{font-size:54px;letter-spacing:-2.3px;line-height:1.04}.hero-kicker{font-size:6.5px;letter-spacing:1px;margin-bottom:16px}.hero-content>p{font-size:11px;line-height:1.8;margin:19px 0 17px;max-width:235px}.hero .button{font-size:10px;padding:10px 17px;min-height:41px}.hero-promises{margin-top:15px;font-size:7px;gap:9px}.hero-sticker{top:auto;bottom:21px;right:18px;width:68px;height:68px;font-size:6px}.hero-sticker b{font-size:7px}.hero-sticker>span{font-size:16px}.hero-underline{bottom:-8px;height:11px}.category-chips{margin:17px -16px 26px;padding:2px 16px;gap:8px}.chip{font-size:10px;padding:8px 12px;gap:6px;min-height:39px;flex:none}.chip svg{width:14px}.section{margin:27px 0 32px}.section-heading{gap:15px;align-items:flex-start;margin-bottom:19px}.section-heading .eyebrow{font-size:6.5px;margin-bottom:8px;letter-spacing:1.3px}.section-heading h2{font-size:23px;line-height:1.2;letter-spacing:-.9px;max-width:265px}.section-heading>.text-link{font-size:0;gap:0;margin-top:24px;background:#fff;border:1px solid var(--line);border-radius:50%;width:29px;height:29px;justify-content:center}.section-heading>.text-link svg{width:14px;height:14px}.game-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 13px}.game-art{border-radius:11px;aspect-ratio:1.44}.game-card-info{padding-top:9px}.game-card-info a{font-size:12px}.game-card-info>div>span{font-size:8px;margin-top:3px}.save-game{min-width:30px;min-height:32px;margin:-5px -4px 0 0}.save-game svg{width:16px;height:16px}.card-badge{font-size:6px;padding:3px 5px;left:7px;top:7px}.discovery-banner{display:grid;grid-template-columns:38px 1fr;gap:13px;padding:21px 18px;margin:29px 0;border-radius:13px}.discovery-mark{width:38px;height:38px;border-radius:11px}.discovery-mark svg{width:24px;height:24px}.discovery-banner h2{font-size:17px;line-height:1.25;letter-spacing:-.5px}.discovery-banner .eyebrow{font-size:6px;margin-bottom:7px;letter-spacing:1px}.discovery-banner p{font-size:9px;margin-top:7px}.discovery-banner .button{grid-column:2;margin:0;justify-self:start;font-size:9px;min-height:38px;padding:9px 12px}.category-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.category-card h3{font-size:14px}.category-card>div{padding:13px}.category-card span{font-size:8px;margin-top:6px}.guide-grid{grid-template-columns:1fr;gap:18px}.guide-card h3{font-size:25px;line-height:1.16}.guide-card-copy{padding:22px}.guide-card p{font-size:12px;line-height:1.85;margin:12px 0 20px}.guide-card .text-link{font-size:10px}.guide-image img{aspect-ratio:1.85}.guide-image>span{font-size:7px;left:20px;bottom:14px}.section-heading p{font-size:10px;line-height:1.7;max-width:270px}.about-home{grid-template-columns:1fr;gap:22px;padding:30px 0;margin-top:34px}.about-home h2{font-size:34px}.about-home p{font-size:12px;line-height:1.95}.about-home .eyebrow{font-size:7px}.site-footer{padding:26px 20px 90px;margin-top:0;gap:20px}.site-footer nav{gap:12px 17px}.site-footer nav a{font-size:9px}.site-footer small{padding-top:15px;font-size:8px}.footer-brand{font-size:24px}.site-footer p{font-size:9px}.breadcrumbs{font-size:8px;gap:6px;margin-bottom:17px}.page-heading{padding:7px 0 23px}.page-heading h1{font-size:36px;letter-spacing:-1.4px;line-height:1.1}.page-heading p{font-size:12px;line-height:1.8}.page-heading .eyebrow{font-size:7px}.page-heading.with-art{padding:23px;display:block}.page-heading.with-art>img{display:none}.page-heading.with-art h1{font-size:34px}.count-label{font-size:9px;margin-top:16px}.category-guide{grid-template-columns:1fr;gap:30px;padding:30px 0}.category-guide h2{font-size:29px}.category-guide p{font-size:12px}.library-toolbar{align-items:flex-start;gap:10px}.library-toolbar p{font-size:10px;max-width:200px}.library-toolbar .button{font-size:9px;padding:8px;white-space:nowrap}.empty-state{font-size:13px;padding:35px 20px}.inline-search{gap:8px;padding:8px}.inline-search input{font-size:12px}.inline-search svg{width:16px}.editorial-hero{grid-template-columns:1fr;margin-bottom:33px}.editorial-hero>div{padding:28px 26px}.editorial-hero h1{font-size:49px;letter-spacing:-2px}.editorial-hero p{font-size:12px;margin:18px 0 23px}.editorial-hero>img{max-height:220px;width:100%;object-fit:cover}.article-header{margin:16px 0 25px;text-align:left}.article-header h1{font-size:41px;letter-spacing:-1.7px;line-height:1.1}.article-deck{font-size:14px;margin:17px 0}.byline{justify-content:flex-start;font-size:8px;gap:8px}.article-header .eyebrow{font-size:7px}.article-cover{margin:24px 0 30px}.article-cover img{border-radius:12px;aspect-ratio:1.55;object-fit:cover}.article-cover figcaption{font-size:8px}.article-layout{gap:30px}.article-toc{padding:17px}.article-toc nav{grid-template-columns:1fr;gap:8px}.article-toc nav a{font-size:10px}.prose{font-size:14px;line-height:1.95}.prose h2{font-size:26px;margin-top:30px}.prose p{margin-bottom:20px}.info-prose{padding:23px 21px;margin:25px 0 35px}.info-prose h2{font-size:24px}.article-next h2{font-size:28px}.article-next .text-link{margin:20px 0 0;display:flex}.sitemap-columns{columns:1}.game-page-heading h1{font-size:29px;letter-spacing:-1px}.game-page-heading p{font-size:10px;line-height:1.8}.game-page-heading{gap:12px;margin-bottom:18px;align-items:flex-start}.game-actions .button{display:none}.machine{border-radius:12px}.machine-hud{gap:15px;padding:10px 12px}.hud-stat .lbl{font-size:6px;letter-spacing:.7px}.hud-stat .val{font-size:14px}.machine-btns{gap:4px}.m-btn{padding:7px;min-height:32px;min-width:32px;font-size:10px}.m-btn-primary{font-size:0}.m-btn-primary:after{content:'↻';font-size:16px}.machine-screen{min-height:340px}.overlay-card{padding:20px 10px}.overlay-title{font-size:26px}.overlay-sub{font-size:11px}.controls-line{font-size:8px;gap:8px;padding:10px}.game-info{grid-template-columns:1fr;gap:25px;margin:30px 0}.game-info h2{font-size:25px}.how-steps h3{font-size:14px}.game-tips{padding:23px}.game-edition{font-size:10px}.game-guide-link{padding:18px;gap:14px;flex-wrap:wrap}.game-guide-link img{width:70px}.game-guide-link>div{flex:1;min-width:170px}.game-guide-link h2{font-size:19px}.game-guide-link p{font-size:10px}.game-guide-link>.text-link{margin-left:84px;font-size:10px}.native-board{padding:16px 12px;border-radius:12px}.sudoku-cell{font-size:24px}.number-pad{gap:5px}.number-pad button{min-width:29px;min-height:39px;font-size:13px}.number-pad .utility{font-size:11px;padding:0 10px}.native-toolbar{gap:8px;font-size:11px}.native-toolbar label{font-size:10px}.native-toolbar select,.native-toolbar input{font-size:11px;padding:7px;max-width:75px}.native-toolbar .button{font-size:10px;min-height:36px;padding:7px 11px}.game-status{font-size:11px;line-height:1.7}.mine-grid{gap:3px;padding:6px}.mine-cell{font-size:16px}.clock-panels{gap:9px}.clock-panel{padding:28px 8px}.clock-panel strong{font-size:45px;letter-spacing:-1px}.ttt-grid{max-width:300px}.ttt-cell{font-size:43px}.native-help{font-size:9px}.mobile-menu-body{padding-left:22px;padding-right:22px}.mobile-menu-top{padding-left:17px;padding-right:17px}.mobile-menu-body h2{font-size:31px}.mobile-category-grid{column-gap:17px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}
/* Keep secondary copy readable against the light surfaces. */
.eyebrow,.nav-label{color:#7b7088}.game-card-info>div>span{color:#7f738c}.hero-content>p{color:#766580}.hero-promises{color:#766781}.category-card span,.guide-card p,.sidebar-note p,.site-footer nav a,.site-footer p{color:#81738c}.mobile-featured small,.mobile-utility,.mobile-note{color:#7b688a}.byline,.article-toc nav a,.article-cover figcaption{color:#7b6b88}.how-steps p,.game-tips li{color:#7c6c89}.native-help,.game-guide-link p{color:#7c6c89}
@media(max-width:560px){.hero h1{font-size:clamp(39px,11.8vw,48px);letter-spacing:-1.8px}.hero-promises{font-size:7px}.game-card-info>div>span{font-size:9px}.hero-content>p{max-width:240px}.hero{min-height:500px}}
/* Established board games, with touch-sized controls and non-color clues. */
.edition-label{display:inline-block;font-size:10px;line-height:1.6;color:#766584;margin-top:8px;padding:4px 9px;background:#efe8f7;border:1px solid #e3d8ee;border-radius:6px}
.new-badge{background:#e5f8e5;color:#396b42}.board-summary{text-align:center;font-size:12px;line-height:1.7;color:#776485;margin:0 0 19px;font-variant-numeric:tabular-nums}
#classic-board{border-radius:10px}.classic-grid{margin:0 auto;display:grid;max-width:480px}.column-controls{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;max-width:480px;margin:0 auto 9px;padding:0 14px}.column-drop{min-width:0;min-height:40px;background:#ede3f8;color:#71509b;border-radius:8px;font-size:23px;line-height:1}.column-drop:disabled{opacity:.35}.connect-four-grid{grid-template-columns:repeat(7,1fr);gap:6px;padding:14px;border-radius:17px;background:#7950bc;border:1px solid #6646a0;box-shadow:0 7px 0 #593681}.connect-cell{aspect-ratio:1;border-radius:50%;background:#462b6b;box-shadow:inset 0 3px 5px #0003;cursor:pointer}.connect-cell.player-1{background:#f97876;box-shadow:inset 0 -4px 0 #dc5b602f,inset 0 3px 0 #ffb8a947}.connect-cell.player-2{background:#f6cf64;box-shadow:inset 0 -4px 0 #c8904333,inset 0 3px 0 #fff6b655}.connect-cell.winning{outline:3px solid #fff;outline-offset:-6px}
.reversi-grid{grid-template-columns:repeat(8,1fr);gap:2px;background:#396f5b;padding:9px;border-radius:12px}.reversi-cell{display:flex;justify-content:center;align-items:center;aspect-ratio:1;background:#b7d9be;border-radius:3px;min-width:0;padding:4px}.reversi-cell:disabled{opacity:1}.reversi-cell:nth-child(16n+1),.reversi-cell:nth-child(16n+3),.reversi-cell:nth-child(16n+5),.reversi-cell:nth-child(16n+7),.reversi-cell:nth-child(16n+10),.reversi-cell:nth-child(16n+12),.reversi-cell:nth-child(16n+14),.reversi-cell:nth-child(16n+16){background:#a3cbae}.reversi-cell .disc{width:90%;aspect-ratio:1;border-radius:50%;box-shadow:0 2px 3px #2847383b}.reversi-cell.player-1 .disc{background:#313039;box-shadow:inset 0 3px 1px #ffffff18,0 2px 3px #2847383b}.reversi-cell.player-2 .disc{background:#fffaf0;box-shadow:inset 0 -3px 1px #d9d6b4,0 2px 3px #2847383b}.reversi-cell.legal:after{content:'';width:19%;aspect-ratio:1;border-radius:50%;background:#426a55}.reversi-cell.legal:hover{background:#d7ebae}
.fifteen-puzzle-grid{grid-template-columns:repeat(4,1fr);max-width:400px;gap:9px;background:#eee5f8;padding:13px;border-radius:15px}.fifteen-cell{aspect-ratio:1;min-width:0;border-radius:10px;background:#9570d0;color:#fff;font-size:34px;font-weight:750;box-shadow:0 4px 0 #7250ad;line-height:1}.fifteen-cell:nth-child(3n){background:#d98c53;color:#4b2f1c;box-shadow:0 4px 0 #ba6f3a}.fifteen-cell.empty{background:#e2d6ef;box-shadow:inset 0 2px 5px #aa90bd2a}.fifteen-cell:not(:disabled):hover{filter:brightness(1.1)}
.lights-out-grid{grid-template-columns:repeat(5,1fr);max-width:400px;gap:9px;padding:15px;border-radius:16px;background:#382647}.light-cell{aspect-ratio:1;min-width:0;background:#5a3e71;color:#bda0d1;border-radius:9px;box-shadow:inset 0 -4px 0 #0002;font-size:23px;line-height:1}.light-cell.lit{background:#f0c45d;color:#795328;box-shadow:0 0 16px #f3c36738,inset 0 -4px 0 #ba8a432e}.light-cell.hint{outline:3px solid #fff;outline-offset:2px}.light-cell:focus-visible{outline-color:#fff}
.code-instructions{text-align:center;font-size:11px;line-height:1.9;max-width:450px;margin:0 auto 19px;color:#85718e}.code-workbench{background:#f5eefb;border:1px solid #e8dcf1;border-radius:13px;padding:18px;margin:0 auto 20px;max-width:480px;text-align:center}.code-slots{display:flex;justify-content:center;gap:12px}.code-slot{width:52px;height:52px;border-radius:50%;background:#e1d3ed;color:#856b99;font-size:22px;font-weight:750;border:3px solid transparent}.code-slot.selected{border-color:#604477;box-shadow:0 0 0 3px #fff}.color-palette{display:flex;justify-content:center;gap:10px;margin:20px 0}.palette-color{height:40px;width:40px;border-radius:50%;font-size:16px;font-weight:700;border:1px solid #0002}.peg-0{background:#df5b60;color:#fff}.peg-1{background:#edc65b;color:#5b481c}.peg-2{background:#4f9269;color:#fff}.peg-3{background:#507ab9;color:#fff}.peg-4{background:#9770c0;color:#fff}.peg-5{background:#dd8a44;color:#482b11}.mastermind-history{padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}.code-attempt{display:flex;align-items:center;gap:13px;padding:12px;background:#faf7fc;border:1px solid #e7ddec;border-radius:10px}.attempt-number{font-size:10px;color:#9b82ac;font-weight:700}.code-pegs{display:flex;gap:7px}.code-peg{width:32px;height:32px;border-radius:50%;display:flex;justify-content:center;align-items:center;font-size:13px;font-weight:700}.code-feedback{font-size:10px;margin-left:auto;color:#765d89;max-width:110px}.code-reveal{font-size:12px;line-height:1.8;background:#eee5f7;border-radius:8px;padding:13px;text-align:center;margin-top:17px;color:#73558a}
@media(max-width:560px){.edition-label{font-size:8px;margin-top:7px}.column-controls{gap:4px;padding:0 9px}.column-drop{min-height:38px;font-size:21px}.connect-four-grid{padding:9px;gap:4px;border-radius:12px}.reversi-grid{padding:6px;gap:2px}.reversi-cell{padding:3px}.fifteen-puzzle-grid{gap:8px;padding:11px}.fifteen-cell{font-size:28px}.lights-out-grid{gap:7px;padding:11px}.light-cell{font-size:20px}.board-summary{font-size:10px;min-height:18px}.code-workbench{padding:17px 12px}.code-slots{gap:11px}.code-slot{width:46px;height:46px;font-size:19px}.color-palette{gap:8px}.palette-color{width:35px;height:35px;font-size:14px}.code-attempt{padding:10px 8px;gap:8px}.code-pegs{gap:5px}.code-peg{width:26px;height:26px;font-size:11px}.code-feedback{font-size:9px;max-width:95px}.code-instructions{font-size:10px}.connect-cell.winning{outline-width:2px;outline-offset:-4px}}
/* Keep full opponent names visible on narrow phones. */
#classic-board .native-toolbar #board-opponent{width:124px;max-width:none;flex:none}

/* Playroom: shared visual treatment for every arcade and board game. */
.game-page-heading h1{font-size:clamp(30px,3vw,42px);letter-spacing:-1.5px}
.game-page-heading p{max-width:720px;font-size:13px;line-height:1.7}
.machine{border:1px solid #ddd5e7;background:#191b30;box-shadow:0 12px 36px #372b5014;border-radius:20px}
.machine-titlebar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px;background:#f9f6fc;border-bottom:1px solid #e5ddec}
.machine-title{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:700;color:#493d59;min-width:0}
.machine-title img{width:32px;height:32px;object-fit:cover;border-radius:9px}
.machine-status{display:flex;align-items:center;gap:6px;font-size:10px;font-weight:600;color:#7e738b;white-space:nowrap}
.machine-status:before{content:"";width:6px;height:6px;border-radius:50%;background:#b1a4c2}
.machine-status[data-state=playing]:before{background:#4e9d71}
.machine-status[data-state=paused]:before{background:#d89752}
.machine-hud{padding:13px 20px;gap:28px;background:#212137}
.hud-stat .lbl{font-size:9px;letter-spacing:.7px;color:#b2a9c8}
.hud-stat .val{font-size:21px;line-height:1.3;letter-spacing:-.6px;color:#f9f3ff}
.m-btn{min-width:42px;min-height:42px;border:1px solid #514561;border-radius:10px;background:#343044;transition:background .15s,transform .15s;color:#f0e7fc}
.m-btn:hover{background:#514061}.m-btn:active{transform:translateY(1px)}
.m-btn-primary{background:#7753c4;border-color:#8c69d6;padding-inline:14px}
.m-btn:disabled{opacity:.38;cursor:default;transform:none}
.machine-screen{background:radial-gradient(ellipse at 50% 45%,#292b43,#151827);min-height:320px}
.machine-screen #board-wrap{padding:20px 16px 0}
.arcade-canvas{border-radius:12px;box-shadow:0 8px 24px #060a1b2e}
.arcade-canvas:focus-visible{outline:3px solid #be9af0;outline-offset:3px}
.game-overlay{background:linear-gradient(145deg,#1c1a35b8,#181b32df);backdrop-filter:blur(5px)}
.overlay-card{padding:24px;max-width:440px}
.overlay-eyebrow{display:block;font-size:9px;letter-spacing:1.8px;color:#d2bfdc;margin-bottom:22px;font-weight:700}
.overlay-icon{height:96px;width:96px;object-fit:cover;border-radius:25px;border:3px solid #ffffff1f;box-shadow:0 10px 25px #0805192e;margin-bottom:20px}
.overlay-title{font-size:34px;letter-spacing:-1.2px}
.overlay-sub{font-size:13px;color:#d0c4df;line-height:1.7;max-width:320px;margin:14px auto 22px}
.overlay-actions .button{min-width:170px;border-radius:13px;font-size:14px;padding:14px 24px;background:#aa82ed;color:#20112f;box-shadow:0 4px 0 #8057ba}
.overlay-actions .button:hover{background:#c4a4f7}
.controls-line{justify-content:center;gap:8px 16px;padding:15px 16px;background:#212137;color:#c4b8d3;font-size:10px;line-height:1.6}
.kbd{color:#f2e8ff;background:#383249;border-color:#63516e;border-bottom-width:2px}
.touch-bar{background:transparent;padding:14px 0;gap:9px}
.touch-btn{flex:1;max-width:100px;min-height:50px;background:#373246;border:1px solid #6b587e;border-bottom:3px solid #645071;border-radius:12px;font-size:14px;font-weight:700;color:#eee3ff}
.touch-btn.pressed{background:#9368d3;border-color:#bb95ed;transform:translateY(1px)}
.game-utility{display:flex;align-items:center;justify-content:center;gap:12px;padding:12px;background:#212137;color:#c4b8d3;font-size:11px}
.game-utility .m-btn{font-size:12px;padding:8px 14px}
.native-board{background:linear-gradient(145deg,#fffdf9,#f8f4fd);border:1px solid #e4d9ee;border-radius:20px;box-shadow:0 12px 36px #372b500a;padding:28px}
.native-board-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid #e6ddeb;padding-bottom:18px;margin-bottom:24px}
.native-board-heading .eyebrow{font-size:8px;letter-spacing:1.2px;margin:0}
.board-edition{font-size:12px;font-weight:700;color:#79638a}
.native-toolbar label{color:#6f597b}.native-toolbar select{background:#fffdfd}
.native-board .game-status{background:#ede5f4;color:#675277;border-radius:10px;padding:12px 15px;max-width:550px;margin:20px auto 0}
.game-side{border-radius:17px;padding:24px;background:linear-gradient(145deg,#fff,#f5effb)}
@media(max-width:600px){
 .machine{border-radius:14px}.machine-titlebar{padding:10px 12px}.machine-title{font-size:12px}.machine-title img{width:28px;height:28px}.machine-status{font-size:9px}
 .machine-hud{padding:11px 12px;gap:18px;flex-wrap:wrap}.hud-stat .lbl{font-size:9px}.hud-stat .val{font-size:20px}
 .machine-btns{gap:6px}.m-btn{min-width:38px;min-height:40px;padding:6px 9px}.m-btn-primary{font-size:0}.m-btn-primary:before{content:"↻";font-size:20px}
 .machine-screen #board-wrap{padding:12px 8px 0}.machine-screen{min-height:280px}.arcade-canvas{border-radius:8px}
 .overlay-card{padding:10px}.overlay-eyebrow{font-size:8px;margin-bottom:14px}.overlay-icon{width:76px;height:76px;border-radius:20px;margin-bottom:15px}.overlay-title{font-size:28px}.overlay-sub{font-size:12px;margin:12px auto 16px}.overlay-actions{margin-top:12px}
 .controls-line{font-size:9px;padding:12px 10px;gap:6px 10px}.touch-btn{padding:8px;min-width:40px}.game-utility{gap:8px;font-size:10px}
 .native-board{padding:16px 12px;border-radius:15px}.native-board-heading{margin-bottom:18px;padding-bottom:14px}.native-board-heading .eyebrow{font-size:7px;max-width:135px;line-height:1.7}.board-edition{font-size:11px}
}
@media(max-width:390px){.machine-btns{margin-left:0;width:100%;justify-content:flex-end;margin-top:-2px}.machine-hud{gap:18px}.machine-btns .m-btn{flex:1}.game-utility{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){.m-btn,.touch-btn{transition:none}}
.machine{scroll-margin-top:82px}.m-btn-primary:after{display:none}

/* Six new board and word games. All controls are native, labeled buttons. */
#tabletop-board:focus-visible{outline:3px solid #b99ce4;outline-offset:5px;border-radius:12px}
.tabletop-summary{text-align:center;font-size:13px;font-weight:700;color:#705783;margin:0 auto 20px;line-height:1.7}
.tabletop-grid{margin:20px auto 24px;max-width:100%}
.tabletop-grid button:focus-visible{outline:3px solid #e89450;outline-offset:1px;z-index:2}
.checkers-board{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));width:min(100%,496px);border:9px solid #d5c4e1;border-radius:14px;overflow:hidden;box-shadow:0 7px 0 #c1acd1}
.checker-cell{aspect-ratio:1;border:0;background:#f8f2e7;padding:7px;position:relative;display:grid;place-items:center;border-radius:0}
.checker-cell.dark{background:#a48bad}.checker-cell.selected{box-shadow:inset 0 0 0 4px #f8d283}.checker-cell.destination{background:#c9b6d8}
.checker-piece{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;box-shadow:inset 0 0 0 3px #ffffff35,0 3px 0 #0003;font-size:27px;line-height:1;color:#fff8e3}
.checker-piece.player-1{background:radial-gradient(circle at 35% 25%,#aa81d6,#64448d)}.checker-piece.player-2{background:radial-gradient(circle at 35% 25%,#f3bf78,#ce774c)}
.move-dot{width:24%;height:24%;border-radius:50%;background:#624774}
.mancala-board{width:min(100%,750px);display:grid;grid-template-columns:65px minmax(0,1fr) 65px;gap:14px;padding:18px;background:#e9d6bb;border:1px solid #dbc1a4;border-radius:50px;box-shadow:0 6px 0 #cdb191}
.mancala-rows{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px 8px}
.mancala-pit{border:1px solid #d4b999;background:#f8ecda;border-radius:40%;padding:9px 3px;min-height:96px;display:flex;flex-direction:column;align-items:center;gap:6px;box-shadow:inset 0 3px 6px #7b583329}
.mancala-pit.player-1:not(:disabled){background:#e8d8f2;border-color:#9e7fba}.mancala-pit.player-2:not(:disabled){background:#ffe0b9;border-color:#c3925f}
.mancala-pit:disabled{cursor:default}.pit-label{font-size:9px;color:#886c64}.pit-count{font-size:23px;font-weight:800;color:#5e4969;line-height:1}
.pit-stones{display:flex;flex-wrap:wrap;justify-content:center;gap:2px;max-width:30px;min-height:15px}.stone{width:6px;height:6px;border-radius:50%;background:#8a6bb0;box-shadow:inset 1px 1px 1px #ddd1eb}.stone:nth-child(2n){background:#d8945f}.stone:nth-child(3n){background:#77a591}
.mancala-store{border-radius:35px;background:#d0b994;box-shadow:inset 0 3px 8px #7e613938;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}.store-label{font-size:12px;font-weight:700;color:#332c43}.store-count{font-size:30px;font-weight:800;color:#5d4572}.store-orange .store-count{color:#955422}
.dots-and-boxes-board{display:grid;width:min(100%,380px);aspect-ratio:1;grid-template-columns:repeat(3,16px minmax(0,1fr)) 16px;grid-template-rows:repeat(3,16px minmax(0,1fr)) 16px;padding:14px;background:#fffaf3;border-radius:15px;border:1px solid #e5d7eb;gap:0}
.dots-dot{width:10px;height:10px;background:#725980;border-radius:50%;place-self:center;z-index:1;pointer-events:none}
.dots-edge{border:0;padding:0;background:none;position:relative;min-width:0;min-height:0;touch-action:manipulation;border-radius:7px}
.dots-edge.horizontal{margin-block:-7px}.dots-edge.vertical{margin-inline:-7px}
.dots-edge:before{content:"";position:absolute;border-radius:5px;background:#e4dbea;transition:background .1s}.dots-edge.horizontal:before{height:5px;left:0;right:0;top:calc(50% - 2.5px)}.dots-edge.vertical:before{width:5px;top:0;bottom:0;left:calc(50% - 2.5px)}
.dots-edge:not(:disabled):hover:before{background:#b69bce}.dots-edge.player-1:before{background:#8e66bc}.dots-edge.player-2:before{background:#db9560}
.dots-box{display:grid;place-items:center;margin:5px;border-radius:9px;font-size:24px;font-weight:800;color:#795490}.dots-box.player-1{background:#e9ddf3}.dots-box.player-2{background:#fae3c6;color:#9a6737}
.nonogram-board{display:grid;width:min(100%,390px);grid-template-columns:50px repeat(5,minmax(0,1fr));grid-template-rows:68px repeat(5,1fr);border:1px solid #d5c4e0;border-radius:12px;overflow:hidden;background:#eadff1;gap:2px;aspect-ratio:1}
.nonogram-clue{display:flex;justify-content:center;align-items:center;font-size:16px;font-weight:700;color:#6d537b;background:#f6effa;white-space:pre-line;line-height:1.4}
.nonogram-clue.complete{color:#54866b;background:#e6efe4}.nonogram-clue.column{text-align:center}.nonogram-cell{min-width:0;min-height:0;padding:0;background:#fffdf8;border:0;border-radius:3px;font-size:32px;line-height:1;color:#a08aac}.nonogram-cell.filled{background:#8d68b5;box-shadow:inset 0 0 0 3px #b49bce}.nonogram-cell.incorrect{box-shadow:inset 0 0 0 4px #dc7e65}
.peg-solitaire-board{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));width:min(100%,420px);gap:9px;padding:18px;border-radius:50%;background:radial-gradient(circle,#ece0c9,#f7efdF);box-shadow:0 5px 0 #d9c5a6}
.peg-cell,.peg-void{aspect-ratio:1;min-width:0;padding:0;border:0;border-radius:50%}.peg-cell{background:#d1c2a8;box-shadow:inset 0 3px 5px #65553e35}.peg-cell.occupied{background:radial-gradient(circle at 33% 25%,#9dd9b8,#417d5c);box-shadow:0 3px 0 #285e44, inset 0 0 0 2px #74a88c}.peg-cell.selected{outline:3px solid #c287d2;outline-offset:2px}.peg-cell.destination{box-shadow:inset 0 0 0 4px #9d73bf;background:#ede0f5}
.hangman-board{width:min(100%,530px);display:flex;flex-direction:column;align-items:center;gap:20px}.hangman-drawing{height:145px;width:220px}.hangman-word{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}.hangman-letter{display:grid;place-items:center;background:#eee3f6;color:#725184;border-bottom:3px solid #c7afd9;border-radius:7px;width:37px;height:45px;font-size:21px;font-weight:800}.hangman-letter.missed{color:#b2644c;background:#fae1d4}
.hangman-keyboard{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:7px;width:100%}.letter-key{min-width:0;min-height:44px;border:1px solid #d9c8e5;background:#fffdfb;color:#735985;font-size:15px;font-weight:700;border-radius:9px;box-shadow:0 2px 0 #e7dced}.letter-key.correct{background:#e0efdf;color:#568568;border-color:#bad6b6}.letter-key.wrong{background:#eee9ed;color:#aea2b0;box-shadow:none}.letter-key:not(:disabled):hover{background:#e9dcf4}
@media(max-width:600px){
 .tabletop-summary{font-size:12px;margin-bottom:14px}.checkers-board{border-width:6px;border-radius:10px}.checker-cell{padding:5px}.checker-piece{font-size:21px;box-shadow:inset 0 0 0 2px #ffffff35,0 2px 0 #0003}
 .mancala-board{grid-template-columns:1fr 1fr;gap:12px;padding:13px;border-radius:23px}.mancala-store{height:46px;flex-direction:row;gap:12px;grid-row:1;border-radius:14px}.store-orange{grid-column:1}.store-violet{grid-column:2}.store-count{font-size:26px}.mancala-rows{grid-column:1/-1;grid-row:2;gap:10px 5px}.mancala-pit{min-height:85px}.pit-count{font-size:20px}
 .nonogram-board{grid-template-columns:40px repeat(5,minmax(0,1fr));grid-template-rows:60px repeat(5,1fr)}.nonogram-clue{font-size:14px}
 .peg-solitaire-board{gap:7px;padding:13px}.hangman-letter{width:28px;height:39px;font-size:18px}.hangman-word{gap:4px}.hangman-keyboard{grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}.letter-key{min-height:44px}.hangman-drawing{height:120px}
}

.game-layout>div,#tabletop-board{min-width:0}
@media(max-width:1050px){.game-layout{grid-template-columns:minmax(0,1fr)}}
#tabletop-opponent{width:118px;max-width:100%}.nonogram-clue.row{word-spacing:4px}
/* SEO and reading refinements retain the existing layout and palette. */
.answer-summary{padding:22px 24px;background:#f0ecf8;border:1px solid #e1d7ee;border-radius:12px;margin:0 0 30px}.prose .answer-summary h2{font-size:20px;margin:0 0 12px}.prose .answer-summary p{margin:0;font-size:15px;line-height:1.8}
.article-layout>.prose{min-width:0}.prose .answer-steps,.prose .answer-list{padding-left:1.5em;line-height:1.85;margin:18px 0}.prose .answer-steps li,.prose .answer-list li{padding-left:.3em;margin:10px 0}.prose .answer-table{min-width:0;font-size:14px;line-height:1.6}.prose .answer-table th,.prose .answer-table td{width:auto;padding:12px;overflow-wrap:anywhere}.prose .answer-table-wide{min-width:440px}.direct-answer[id]{scroll-margin-top:100px}
.related-guide-links{list-style:none;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:24px 0}.related-guide-links a{font-size:15px;font-weight:700;color:#71509a}.related-guide-links span{display:block;font-size:12px;color:#776b82;line-height:1.7;margin-top:7px}
@media(max-width:700px){.related-guide-links{grid-template-columns:1fr}.answer-summary{padding:18px}}
/* Keep the existing palette while making secondary text readable on pastel panels. */
:root{--muted:#655a71}
.brand small,.side-count,.nav-label,.eyebrow,.game-card-info>div>span,.category-card span,.guide-card p,.sidebar-note p,.site-footer nav a,.site-footer p,.site-footer small,.mobile-featured small,.mobile-utility,.mobile-note,.byline,.article-toc nav a,.article-cover figcaption,.how-steps p,.game-tips li,.native-help,.game-guide-link p,.breadcrumbs,.breadcrumbs [aria-current],.count-label,.edition-label,.machine-status,.mobile-bottom>a,.discovery-banner .eyebrow,.discovery-banner p{color:#695975}
.game-edition a{ text-decoration:underline;text-underline-offset:3px }
@media(max-width:560px){.eyebrow,.section-heading .eyebrow,.discovery-banner .eyebrow,.about-home .eyebrow,.page-heading .eyebrow,.article-header .eyebrow,.hero-kicker{font-size:9px}.game-card-info>div>span,.category-card span,.breadcrumbs,.byline,.article-cover figcaption,.site-footer nav a,.site-footer p,.site-footer small{font-size:10px}.hero-promises,.mobile-note{font-size:9px}}
.breadcrumbs>span[aria-current="page"]{color:#695975}

.sidebar-foot a{color:#695975}

/* Informational comparisons use catalog facts and the existing magazine palette. */
.category-decisions>p{max-width:850px;line-height:1.85}.category-decisions>h3{margin:24px 0 12px}.comparison-wrap{overflow-x:auto;margin:22px 0;border:1px solid var(--line);border-radius:12px;background:#fff}.game-comparison{width:100%;border-collapse:collapse;min-width:520px;text-align:left;font-size:13px}.game-comparison caption{text-align:left;padding:15px 18px;font-weight:650;color:var(--ink)}.game-comparison th,.game-comparison td{padding:16px 18px;border-top:1px solid var(--line);vertical-align:top}.game-comparison thead{background:var(--lavender)}.game-comparison tbody th{width:20%}.game-comparison td:nth-child(2){width:25%}.game-comparison a{text-decoration:underline;text-underline-offset:3px;color:var(--purple)}.input-reference{margin:24px 0}.input-reference dl{margin:12px 0}.input-reference dl>div{padding:9px 0;border-bottom:1px solid var(--line)}.input-reference dt{font-weight:650}.input-reference dd{margin:2px 0;color:var(--muted)}

.category-guide.solo{grid-template-columns:1fr}.category-guide.solo>div:empty{display:none}

.game-side .side-guide-title{color:var(--ink);font-weight:750;line-height:1.17;letter-spacing:-.035em}

/* Keep game instructions and controls readable on compact screens. */
@media(max-width:560px){.native-help,.game-edition,.game-guide-link p,.game-status,.native-toolbar label,.native-toolbar .button{font-size:12px;line-height:1.55}}

/* Contextual reading paths use visible text links within the existing layout. */
.game-context a,.category-decisions p a,.catalog-intro a,.about-home p a,.editorial-hero p a{text-decoration:underline;text-underline-offset:3px}.game-context{margin-top:22px}.catalog-intro{line-height:1.8;margin:0 0 22px}

/* Keep repeated catalog details readable on compact screens. */
@media(max-width:800px){.game-card-info>div>span{font-size:12px;line-height:1.5;white-space:normal}.card-badge{font-size:9px}}

/* Keep native-game cover artwork visible beside its edition name. */
.native-board-heading .board-edition{display:flex;align-items:center;gap:8px}
.native-game-art{width:48px;height:32px;object-fit:cover;border-radius:6px;flex:none}

@media(max-width:640px){.page-heading.with-art>img{display:block;width:100%;max-width:280px;aspect-ratio:7/4;margin-top:18px}}

/* Server-rendered teaching boards keep coordinates readable on small screens. */
.lesson-diagram{margin:24px 0;max-width:100%}
.prose .lesson-board{width:100%;max-width:460px;table-layout:fixed;border-collapse:collapse;font-size:clamp(14px,2.8vw,16px);line-height:1.4}
.prose .lesson-board caption{text-align:left;font-family:inherit;font-weight:700;line-height:1.6;padding:0 0 10px;color:#302b45}
.prose .lesson-board th,.prose .lesson-board td{padding:8px 2px;text-align:center;border:1px solid #d8d1e5;overflow-wrap:anywhere}
.prose .lesson-board td{font-family:ui-monospace,monospace;background:#faf7ff;color:#302b45;font-weight:700}
.prose .lesson-board th{background:#eee8f7;color:#302b45;font-size:.85em}
.prose .lesson-board th:first-child{width:25px}

/* Catalog guidance: readable comparisons alongside the existing game library. */
.catalog-paths{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.catalog-paths>div{padding:22px;background:var(--lavender);border:1px solid var(--line);border-radius:14px;min-width:0}
.catalog-paths h3{font-size:18px;line-height:1.4;margin:0 0 12px}
.catalog-paths p,.catalog-reading p,.catalog-reading li{font-size:15px;line-height:1.85}
.catalog-start a,.catalog-reading a{color:var(--purple);text-decoration:underline;text-underline-offset:3px}
.catalog-jump{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:20px;font-size:14px}
.catalog-jump a{display:inline-flex;align-items:center;min-height:44px}
.catalog-reading{max-width:850px;border-top:1px solid var(--line);padding-top:28px}
.catalog-reading h2{font-size:clamp(24px,3vw,32px);line-height:1.25;letter-spacing:-.7px;margin-bottom:18px}
.catalog-reading h3{font-size:19px;line-height:1.4;margin:25px 0 12px}
.catalog-reading p{margin:0 0 18px}
.catalog-reading ol{padding-left:24px;margin:20px 0}
.catalog-reading li{padding-left:5px;margin:12px 0}
.catalog-guide [id],#game-library{scroll-margin-top:100px}
@media(max-width:800px){.catalog-paths{grid-template-columns:1fr;gap:12px}.catalog-paths>div{padding:20px}.catalog-reading p,.catalog-reading li,.catalog-paths p{font-size:14px}}

/* Touch-first playrooms: allow normal page scrolling outside the playing surface. */
.arcade-canvas,.touch-btn{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.touch-bar{display:grid;grid-template-columns:repeat(auto-fit,minmax(44px,1fr));gap:8px;padding:10px 0;max-width:560px}
.touch-btn{min-width:0;max-width:none;min-height:48px;padding:8px 4px;font-size:12px;line-height:1.25}
.game-objective{width:100%;max-width:560px;margin:0;padding:9px 10px;background:#12283b;color:#a6f4df;font-size:12px;line-height:1.5;text-align:center;border-top:1px solid #345363}
.machine-screen{min-height:0}
.machine-screen #board-wrap{min-width:0}
.machine .m-btn{min-height:44px;min-width:44px}
body.play-focus{overflow:hidden}
.machine.focus-play{position:fixed;inset:0;z-index:2000;border:0;border-radius:0;display:flex;flex-direction:column;justify-content:center;overflow:auto;background:#101526;height:100dvh;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.machine.focus-play .machine-screen{flex:0 0 auto}
.machine.focus-play .game-utility{flex-shrink:0}
@media(max-width:800px){
 .machine .machine-titlebar{padding:8px 12px}.machine .machine-hud{padding:8px 12px}
 .machine-screen #board-wrap{padding:8px 8px 0}
 .machine .controls-line{padding:8px 10px;font-size:11px;line-height:1.5}
 .machine .game-utility{padding:8px;gap:8px}
 .machine .game-utility .m-btn{padding:8px 12px}
 .native-board button,.native-toolbar button{touch-action:manipulation}
 .native-toolbar select,.native-toolbar input{font-size:16px;min-height:44px;max-width:none}
 .native-toolbar .button,.number-pad button,.column-drop,.palette-color,.hangman-key{min-height:44px}
 .native-toolbar .button{font-size:12px;padding:9px 12px}
 .number-pad{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:4px}
 .number-pad button{min-width:0;padding:0;font-size:16px}
 .number-pad .utility{grid-column:span 4;font-size:13px}
 .native-board-heading{flex-wrap:wrap}
 .native-board-heading .eyebrow{display:none}
 .game-page-heading{flex-wrap:wrap}.game-page-heading>div:first-child{min-width:0}
}
@media(max-width:390px){.machine .machine-btns{width:auto;margin-left:auto;margin-top:0}.machine .machine-hud{gap:10px}.machine .m-btn{padding:8px}.machine .hud-stat .val{font-size:15px}}
@media(max-height:500px) and (orientation:landscape){.machine .machine-titlebar{display:none}.machine .controls-line{display:none}.machine .machine-hud{padding:4px 10px}.machine .game-utility{padding:4px}.touch-bar{padding:5px 0}.machine .machine-screen #board-wrap{padding-top:4px}}
/* Keep instructions available without crowding the playfield on a phone. */
.controls-disclosure{background:#211e33;color:#ded3ed}
.controls-disclosure summary{cursor:pointer;min-height:44px;padding:11px 14px;font-size:12px;line-height:22px;touch-action:manipulation}
.controls-disclosure summary:focus-visible{outline:3px solid #c8b5fb;outline-offset:-3px}
.controls-disclosure .controls-line{border-top:1px solid #51465f}
@media(max-width:800px){
 .machine .machine-hud{flex-wrap:nowrap;gap:4px}
 .machine .machine-btns{width:auto;margin:0 0 0 auto;gap:4px;flex:none}
 .machine .machine-btns .m-btn{width:44px;min-width:44px;height:44px;padding:0;flex:0 0 44px}
 .machine .hud-stat{min-width:0}.machine .hud-stat .lbl{font-size:8px;letter-spacing:.3px}
 .machine .hud-stat .val{font-size:14px}
}
@media(max-width:360px){.machine .machine-hud>.hud-stat:nth-child(3){display:none}}
@media(max-height:500px) and (orientation:landscape){.controls-disclosure{display:none}}
/* Landscape fullscreen gives the playfield the height and puts controls beside it. */
@media(max-height:500px) and (orientation:landscape){
 .machine:is(:fullscreen,.focus-play){display:grid;grid-template-columns:minmax(0,1fr) 184px;grid-template-rows:auto minmax(0,1fr);align-items:center;justify-content:stretch}
 .machine:is(:fullscreen,.focus-play) .machine-screen{grid-column:1;grid-row:1 / 3;width:100%;height:100%;min-width:0}
 .machine:is(:fullscreen,.focus-play) .machine-hud{grid-column:2;grid-row:1;display:flex;flex-wrap:wrap;align-self:start;gap:8px;padding:12px 8px;background:transparent}
 .machine:is(:fullscreen,.focus-play) .machine-btns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;margin:0;gap:4px}
 .machine:is(:fullscreen,.focus-play) .machine-btns .m-btn{min-width:44px;width:100%;height:44px;min-height:44px;padding:0}
 .machine:is(:fullscreen,.focus-play) .touch-bar{position:fixed;right:max(10px,env(safe-area-inset-right));bottom:max(10px,env(safe-area-inset-bottom));width:164px;grid-template-columns:repeat(2,minmax(0,1fr));padding:4px 0}
 .machine:is(:fullscreen,.focus-play) .game-objective{position:fixed;right:10px;top:164px;width:164px;padding:8px;font-size:12px;border:1px solid #345363;border-radius:8px}
 .machine:is(:fullscreen,.focus-play) .game-utility{grid-column:2;grid-row:2;align-self:end;flex-wrap:wrap;background:transparent}
}

@media(max-height:360px) and (orientation:landscape){.machine:is(:fullscreen,.focus-play) .game-objective{display:none}}

/* Optional account navigation and game-history status. */
.account-nav-link{font-size:12px;font-weight:650;color:#5d3bb1;white-space:nowrap;min-height:44px;display:inline-flex;align-items:center}.account-game-note{font-size:12px;color:#6b5b7d;line-height:1.7;margin:0 0 20px;padding:11px 14px;border:1px solid #e7dcf2;border-radius:10px;background:#fbf8fe}.account-game-note a{color:#6241b5;text-decoration:underline}.account-game-note [role=status]{display:inline}.mobile-menu-body>.button.button-outline{width:100%;margin-top:20px}@media(max-width:1050px){.account-nav-link{display:none}}

.game-detail{display:grid;gap:26px;margin:40px 0}.detail-block{background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px}.detail-block h2{font-size:23px;margin-bottom:14px}.detail-block p{font-size:13px;line-height:1.9;color:#6f6480;margin-bottom:12px}.detail-block p:last-child{margin-bottom:0}.table-scroll{overflow-x:auto}.fact-table{width:100%;border-collapse:collapse;font-size:12.5px}.fact-table th,.fact-table td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);line-height:1.7}.fact-table th{width:34%;color:#6d5f80;font-weight:650;white-space:nowrap}.fact-table td{color:#7d7290}.fact-table tr:last-child th,.fact-table tr:last-child td{border-bottom:0}.fact-table tr:nth-child(odd) th,.fact-table tr:nth-child(odd) td{background:#faf7fe}.variant-list{display:grid;gap:14px;margin:0}.variant-list div{padding-left:15px;border-left:3px solid #e0d4ef}.variant-list dt{font-weight:700;font-size:13px;color:#5c4a72;margin-bottom:5px}.variant-list dd{margin:0;font-size:12.5px;line-height:1.85;color:#7d7290}.faq-block .faq-item{border-top:1px solid var(--line);padding-top:16px;margin-top:16px}.faq-block .faq-item:first-of-type{border-top:0;padding-top:0;margin-top:0}.faq-block h3{font-size:15px;margin-bottom:8px;color:#4c4059}.faq-block p{margin:0}@media(max-width:700px){.detail-block{padding:20px}.detail-block h2{font-size:20px}.fact-table th{width:42%;white-space:normal}}

.home-explainer .section-heading p{font-size:12px;color:#8b8098;margin-top:6px}.wide-table thead th{background:#f3edfb;color:#5c4a72;font-weight:700;border-bottom:1px solid var(--line)}.wide-table th[scope=row]{width:auto;white-space:normal}.wide-table a{color:var(--purple);font-weight:650}.home-faq .faq-block{background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px}

.category-depth{display:grid;gap:24px}.category-intro{font-size:14px;line-height:1.9;color:#6b6079;background:#f6f1fd;border-left:3px solid var(--purple);border-radius:0 10px 10px 0;padding:18px 20px}.category-depth .depth-block{background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px}.category-depth .depth-block h2{font-size:22px;margin-bottom:12px}.category-depth .depth-block h3{font-size:15px;margin:18px 0 7px;color:#4c4059}.category-depth .depth-block h3:first-of-type{margin-top:0}.category-depth .depth-block p{font-size:13px;line-height:1.9;color:#7d7290;margin:0}

.topic-intro{font-size:12px;line-height:1.85;color:#8b8098;margin-top:7px;max-width:62ch}

.sitemap-note{background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px;margin-bottom:26px}.sitemap-note h2{font-size:21px;margin-bottom:12px}.sitemap-note h3{font-size:14px;margin:16px 0 6px;color:#4c4059}.sitemap-note h3:first-of-type{margin-top:0}.sitemap-note p{font-size:12.5px;line-height:1.9;color:#7d7290;margin:0}

/* Reserve the canvas box before the deferred engine script runs, so adding the   canvas and touch bar does not push the page down (cumulative layout shift). */
.board-reserve{width:100%;max-width:calc(var(--canvas-w) * 1px);aspect-ratio:var(--canvas-w) / var(--canvas-h);margin:0 auto}
@media(any-pointer:coarse),(max-width:800px){.board-reserve.with-touch{margin-bottom:68px}}

/* The game's own cover art is the page's main image, so it renders larger than   any related-game thumbnail and carries a caption. */
.game-cover-figure{margin:0 0 20px;max-width:480px}.game-cover-figure img{width:100%;height:auto;border-radius:12px;display:block;box-shadow:0 8px 22px #25203b1f}.game-cover-figure figcaption{font-size:11px;color:#948aa3;margin-top:9px;line-height:1.7}@media(min-width:820px){.game-cover-figure{float:right;margin:0 0 18px 26px;max-width:340px}}@media(max-width:700px){.game-cover-figure{max-width:100%}}

.library-explainer{background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px;margin:22px 0}.library-explainer h2{font-size:22px;margin-bottom:12px}.library-explainer h3{font-size:14px;margin:20px 0 9px;color:#4c4059}.library-explainer p{font-size:13px;line-height:1.9;color:#7d7290;margin-bottom:10px}.library-benefits{margin:0;padding-left:18px;display:grid;gap:9px}.library-benefits li{font-size:12.5px;line-height:1.85;color:#7d7290}.library-benefits strong{color:#5c4a72}.library-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}@media(max-width:700px){.library-explainer{padding:20px}.library-actions .button{width:100%;justify-content:center}}

.positioning-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.positioning-grid>div{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px}.positioning-grid h3{font-size:15px;margin-bottom:9px;color:#4c4059}.positioning-grid p{font-size:12.5px;line-height:1.85;color:#7d7290;margin:0}@media(max-width:900px){.positioning-grid{grid-template-columns:1fr}}

.guide-faq{margin-top:34px}.guide-faq h2{font-size:23px;margin-bottom:14px}.guide-faq .faq-item{border-top:1px solid var(--line);padding-top:15px;margin-top:15px}.guide-faq .faq-item:first-of-type{border-top:0;padding-top:0;margin-top:0}.guide-faq h3{font-size:15px;margin-bottom:7px;color:#4c4059}.guide-faq p{margin:0}

/* ===== Mobile optimisation pass (September 2026) =====
   Findings from the 360/390/412/768 audit: the fixed bottom nav had no page
   clearance, comparison tables inside grid children pushed the page 180 to
   232px wide, save buttons and chips sat under the 44px touch size, and a lot
   of text was 8 to 10px. Everything below is scoped to those problems. */

/* Grid and flex children default to min-width:auto, which lets a wide table
   blow out the page instead of scrolling inside its wrapper. */
.category-depth>*,.category-decisions,.game-detail>*,.game-info>*,.article-layout>*,.library-explainer,.detail-block,.depth-block,.prose,.info-prose{min-width:0}
.comparison-wrap,.table-scroll{max-width:100%;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.comparison-wrap table,.table-scroll table{min-width:100%}

/* A modal menu must never share the screen with the bottom nav. The page
   behind it is scroll-locked without moving it; the dialog itself contains
   overscroll so iOS does not scroll the document through it. */
html.menu-open,html.menu-open body{overflow:hidden}
html.menu-open .mobile-bottom{display:none}
.mobile-menu{overscroll-behavior:contain;padding-bottom:env(safe-area-inset-bottom)}
.mobile-menu-body{padding-bottom:calc(24px + env(safe-area-inset-bottom))}

@media(max-width:800px){
 /* Clear the fixed bottom navigation. */
 .main-column{padding-bottom:calc(88px + env(safe-area-inset-bottom))}
 html{scroll-padding-bottom:calc(96px + env(safe-area-inset-bottom))}
 .mobile-bottom a{min-height:44px;font-size:11px;gap:5px;justify-content:center}
 .mobile-bottom svg{width:22px;height:22px}

 /* Touch targets: 44px where a finger lands, 24px+ for inline text. */
 .save-game,.game-actions .save-game{min-width:44px;min-height:44px;margin:-10px -10px 0 0}
 .save-game svg{width:18px;height:18px}
 .game-card-info a{padding:8px 0 2px;white-space:normal;line-height:1.35;font-size:14px}
 .game-card-info span{font-size:11px}
 .chip{min-height:44px;padding:10px 16px;font-size:13px}
 .chip svg{width:16px;height:16px}
 .text-link{min-height:40px;padding:6px 0;font-size:13px}
 .site-footer nav{gap:4px 14px}
 .site-footer nav a{display:inline-block;padding:10px 2px;font-size:12px}
 .site-footer p,.site-footer small{font-size:12px}
 .sidebar-foot a,.mobile-utility a{display:inline-block;padding:8px 0}
 .breadcrumbs a{display:inline-block;padding:6px 0}
 .menu-trigger{min-height:44px;font-size:12px}

 /* Legible type: nothing a reader has to read is under 12px; labels 10px. */
 .eyebrow,.nav-label,body>.eyebrow,.game-side .eyebrow{font-size:10px;letter-spacing:1.2px}
 .card-badge{font-size:9px;padding:4px 7px}
 .hero-promises{font-size:12px;flex-wrap:wrap;white-space:normal;gap:8px 14px}
 .game-facts,.native-help,.count-label,.mobile-utility,.mobile-note,.game-status,.hud-stat .lbl,.sidebar-note p{font-size:12px}
 .hud-stat .lbl{font-size:9px}
 .controls-line{font-size:12px;gap:10px 14px;line-height:1.6}
 .kbd{font-size:11px;padding:4px 6px}
 .overlay-sub{font-size:14px}
 .game-page-heading p,.direct-answer{font-size:15px;line-height:1.7}
 .game-tips li,.how-steps p,.game-side p,.game-edition,.detail-block p,.faq-block p,.category-depth .depth-block p,.variant-list dd,.library-explainer p,.library-benefits li,.sitemap-note p,.positioning-grid p,.home-explainer .section-heading p,.topic-intro,.category-intro,.guide-card-copy p,.game-guide-link p,.related-guide-links span,.section-answer,.answer-steps li,.answer-list li,.editor-note p{font-size:15px;line-height:1.75}
 .fact-table,.game-comparison,.answer-table,.lesson-board,.prose table{font-size:14px}
 .fact-table th,.fact-table td,.game-comparison th,.game-comparison td{padding:12px 12px}
 .prose,.info-prose,.article-deck{font-size:16px;line-height:1.75}
 .variant-list dt,.faq-block h3,.guide-faq h3,.how-steps h3,.detail-block h3,.depth-block h3{font-size:16px}
 .mobile-featured small,.mobile-category-grid span{font-size:12px}

 /* iOS zooms into any field under 16px on focus. */
 .header-search input,.mobile-search input,input[type=search],input[type=number],input[type=text],select{font-size:16px}

 /* Horizontal chip rows: keep them scrollable and show that they scroll. */
 .category-chips{-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent)}
 .category-chips .chip{scroll-snap-align:start;flex:none}
 .comparison-wrap{mask-image:linear-gradient(90deg,#000 calc(100% - 20px),rgba(0,0,0,.35));-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 20px),rgba(0,0,0,.35))}
}
@media(max-width:560px){
 .game-grid,.listing-grid{gap:14px 12px}
 .game-page-heading{flex-direction:column;align-items:flex-start;gap:12px}
 .game-page-heading h1{font-size:30px}
 .game-actions{width:100%}
 .game-actions .button{flex:1}
}

@media(max-width:800px){
 /* Residual small text and taps found on the guides index and guide pages. */
 .guide-image span{font-size:10px;letter-spacing:1px}
 .guide-card-copy .text-link,.guide-card-copy span.text-link{font-size:13px}
 p.topic-intro,.guides-index .topic-intro{font-size:14px;line-height:1.7}
 .breadcrumbs,.breadcrumbs a,.breadcrumbs span{font-size:12px}
 .byline,.byline span{font-size:12px}
 .article-toc nav a{display:block;padding:9px 0;font-size:14px;line-height:1.4}
 .section-heading>.text-link{min-height:44px;min-width:44px;justify-content:center}
}

/* Responsive tables, the CHESSCLOCKNOW pattern: a scroll container with a
   minimum table width, so multi-column tables keep readable columns and
   scroll sideways instead of cramming into two-word cells. Two-column fact
   tables stay full width because they read fine narrow. */
.table-scroll,.comparison-wrap{max-width:100%;overflow-x:auto;scrollbar-width:thin}
.table-scroll table,.comparison-wrap table{width:100%;border-collapse:collapse;text-align:left}
.table-scroll caption:not(.sr-only),.comparison-wrap caption:not(.sr-only){padding:12px 16px;text-align:left;font-weight:700;color:#5c4a72;background:#f6f1fd}
@media(max-width:800px){
 .comparison-wrap table,.table-scroll table.wide-table,.info-prose .table-scroll table,.prose .comparison-wrap table{min-width:560px}
 .table-scroll table.fact-table{min-width:0}
 .comparison-wrap th,.comparison-wrap td,.table-scroll th,.table-scroll td{vertical-align:top}
 .table-hint{display:block;font-size:12px;color:#8b8098;margin:-14px 0 16px;text-align:right}
}

/* Breadcrumb: every item shares one box so links and the current page sit on
   the same baseline. */
/* Breadcrumb items stay inline so every piece shares one text baseline; the
   vertical padding enlarges the tap area without moving the text. */
.breadcrumbs{align-items:baseline}
.breadcrumbs>*{display:inline;min-height:0;padding:8px 0}
@media(max-width:800px){.breadcrumbs a{display:inline;padding:10px 0;min-height:0}}

/* Hero on phones: stack the copy above the art instead of laying it over it,
   so the lede and the promises are always readable. */
@media(max-width:640px){
 .hero{display:flex;flex-direction:column;min-height:0}
 .hero:before{display:none}
 .hero-content{order:1;width:100%;padding:28px 22px 6px}
 .hero-content>p{font-size:15px;line-height:1.7;color:#5b5069;margin:18px 0 18px}
 .hero-promises{color:#6a5f7c;font-size:12px}
 .hero-art{order:2;position:relative;inset:auto;z-index:0;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:60% 58%;margin-top:14px;border-radius:0 0 20px 20px}
 .hero-sticker{top:auto;bottom:18px;right:16px;z-index:1}
}

/* Game pages: a colourful "try these next" table and inline CTAs inside the
   explanation, so the body of each page hands the reader somewhere to go. */
.try-next{width:100%;border-collapse:separate;border-spacing:0 8px;font-size:13px}
.try-next th{text-align:left;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#8b8098;padding:0 12px 2px;font-weight:700}
.try-next td{background:#faf7fe;padding:12px 12px;vertical-align:middle;line-height:1.55;color:#6f6480;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.try-next td:first-child{border-left:5px solid var(--accent,var(--purple));border-radius:10px 0 0 10px;font-weight:750;color:#3d3350;white-space:nowrap}
.try-next td:last-child{border-right:1px solid var(--line);border-radius:0 10px 10px 0;text-align:right;white-space:nowrap}
.try-next td a.play-pill{display:inline-flex;align-items:center;gap:6px;background:var(--accent,var(--purple));color:#1a1426;padding:8px 13px;border-radius:999px;font-weight:750;font-size:12px;min-height:36px}
.try-next td a.play-pill svg{width:13px;height:13px}
.try-next tr:hover td{background:#f3edfb}
.cta-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.cta-row a{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;font-size:12.5px;font-weight:700;min-height:40px;border:1px solid var(--line);background:#fff;color:#5c4a72}
.cta-row a.cta-primary{background:var(--purple);border-color:var(--purple);color:#fff}
.cta-row a svg{width:14px;height:14px}
@media(max-width:800px){.try-next{font-size:14px}.try-next td:first-child{white-space:normal}.table-scroll table.try-next{min-width:540px}}

/* The game page's grid column wrapper is an unclassed div; without this a wide
   table inside it widens the whole page instead of scrolling in its wrapper. */
.game-layout>*,.game-info>section,.game-tips,.machine-screen,.native-board,.listing-grid,.section{min-width:0}

/* A scroll container must be the containing block for anything absolutely
   positioned inside it (the visually hidden "Play" header cell here), or that
   element escapes the clip and widens the whole page. */
.table-scroll,.comparison-wrap,.lesson-diagram{position:relative}

/* ===== Collapsible sidebar (CrazyGames-style icon rail) =====
   html.sidebar-collapsed is set before first paint from localStorage and
   toggled by #sidebar-toggle. Only applies where the sidebar is shown. */
.sidebar-toggle{display:flex;align-items:center;justify-content:center;width:40px;height:40px;margin:-6px 0 12px auto;border:1px solid var(--line);border-radius:10px;background:#fff;color:#5c4a72;cursor:pointer}
.sidebar-toggle svg{width:18px;height:18px}
.sidebar-toggle:hover{background:#f7f4ff;border-color:#d9cdf0}
.sidebar-toggle:focus-visible{outline:3px solid #be9af0;outline-offset:2px}
.side-link{position:relative}
.side-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(min-width:801px){
 .sidebar{transition:width .18s ease,padding .18s ease}
 html.sidebar-collapsed{--side:76px}
 html.sidebar-collapsed .sidebar{padding:18px 10px 16px;overflow:visible}
 html.sidebar-collapsed .sidebar-toggle{margin:0 auto 12px}
 html.sidebar-collapsed .side-text,html.sidebar-collapsed .side-count,html.sidebar-collapsed .side-dot,html.sidebar-collapsed .nav-label,html.sidebar-collapsed .sidebar-note,html.sidebar-collapsed .sidebar-foot{display:none}
 html.sidebar-collapsed .side-link{justify-content:center;padding:11px 0;gap:0}
 html.sidebar-collapsed .side-link>svg{width:20px;height:20px}
 html.sidebar-collapsed .nav-divider{margin:14px 8px}
 html.sidebar-collapsed .side-link.active{background:#efe9fb}
 /* hover tooltip carrying the hidden label */
 html.sidebar-collapsed .side-link::after{content:attr(data-label);position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%) translateX(-4px);background:#262638;color:#fff;font-size:12px;font-weight:600;padding:6px 10px;border-radius:7px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .12s ease,transform .12s ease;z-index:60;box-shadow:0 6px 18px #0003}
 html.sidebar-collapsed .side-link:hover::after,html.sidebar-collapsed .side-link:focus-visible::after{opacity:1;transform:translateY(-50%) translateX(0)}
}
@media(prefers-reduced-motion:reduce){.sidebar{transition:none}.side-link::after{transition:none}}
@media(max-width:800px){.sidebar-toggle{display:none}}

/* Sidebar scroll area and the edge toggle. The aside itself no longer scrolls
   or clips, so the button can straddle its border and stay clickable at any
   scroll position; the inner column scrolls with its scrollbar hidden. */
.sidebar-scroll{height:100%;overflow-y:auto;overflow-x:hidden;padding:24px 14px 20px;scrollbar-width:none;overscroll-behavior:contain}
.sidebar-scroll::-webkit-scrollbar{display:none}
.sidebar-toggle{position:absolute;top:14px;right:-20px;margin:0;width:40px;height:40px;border-radius:50%;box-shadow:0 4px 14px #25203b26;z-index:55}
html.sidebar-collapsed .sidebar-toggle{margin:0;right:-20px}
html.sidebar-collapsed .sidebar-scroll{padding:18px 10px 16px;overflow:visible}
@media(min-width:801px){html.sidebar-collapsed .sidebar{overflow:visible}}

/* ===== Floating shortcuts (bottom-right "?") ===== */
.help-fab{position:fixed;right:22px;bottom:22px;z-index:60;width:50px;height:50px;border-radius:50%;border:0;background:var(--purple);color:#fff;font:800 22px/1 var(--font);cursor:pointer;box-shadow:0 8px 24px #7150db55;display:grid;place-items:center;transition:transform .15s,box-shadow .15s}
.help-fab:hover{transform:translateY(-2px);box-shadow:0 12px 28px #7150db66}
.help-fab:focus-visible{outline:3px solid #be9af0;outline-offset:3px}
.help-fab[aria-expanded="true"]{background:var(--ink)}
.help-panel{position:fixed;inset:0;z-index:200}
.help-backdrop{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:#1b1330a8;cursor:pointer;backdrop-filter:blur(2px)}
.help-sheet{position:absolute;right:18px;bottom:18px;width:min(720px,calc(100vw - 36px));max-height:82vh;overflow:auto;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 24px 60px #1b133040;padding:22px 24px 20px;outline:0}
.help-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px}
.help-kicker{font-size:10px;letter-spacing:1.6px;text-transform:uppercase;font-weight:800;color:#9a8cad;margin:0 0 4px}
.help-head h2{font-size:26px;letter-spacing:-.6px;margin:0}
.help-close{border:1px solid var(--line);background:#fff;width:36px;height:36px;border-radius:50%;font:700 20px/1 var(--font);cursor:pointer;color:#5c4a72}
.help-close:hover{background:#f7f4ff}
.help-groups{display:grid;grid-template-columns:repeat(2,1fr);gap:18px 26px}
.help-group h3{font-size:10px;letter-spacing:1.4px;text-transform:uppercase;font-weight:800;color:#9a8cad;margin:0 0 8px;border-bottom:1px solid var(--line);padding-bottom:6px}
.help-group-context h3{color:var(--purple);border-color:#d9cdf0}
.help-group ul{list-style:none;margin:0;padding:0}
.help-group li{margin:0 0 4px}
.help-group a{display:inline-block;font-size:14px;font-weight:600;color:#3d3350;padding:5px 0;min-height:32px}
.help-group a:hover{color:var(--purple);text-decoration:underline;text-underline-offset:3px}
.help-cta{margin-top:18px;border-top:1px solid var(--line);padding-top:16px;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.help-hint{font-size:12px;color:#8b8098}
.help-hint kbd{border:1px solid var(--line);border-radius:5px;padding:1px 6px;background:#faf7fe;font:600 11px var(--font)}
body.has-help-panel{overflow:hidden}
@media(min-width:760px){.help-groups{grid-template-columns:repeat(4,1fr)}}
@media(max-width:800px){
 .help-fab{right:16px;bottom:calc(74px + env(safe-area-inset-bottom));width:48px;height:48px}
 .help-sheet{left:10px;right:10px;bottom:10px;width:auto;padding:18px 16px calc(16px + env(safe-area-inset-bottom));max-height:calc(100dvh - 30px)}
 .help-groups{gap:14px 18px}
}
@media(prefers-reduced-motion:reduce){.help-fab{transition:none}}

/* ---- Layout stability ------------------------------------------------- */
/* Metric-matched fallback so text set in Arial before Inter arrives occupies
   the same lines; font-display:swap then swaps glyphs without reflow. */
@font-face{font-family:"Inter Fallback";src:local("Arial"),local("Helvetica Neue"),local("Helvetica");size-adjust:107.12%;ascent-override:90.44%;descent-override:22.52%;line-gap-override:0%}
@media(max-width:800px){html{scrollbar-gutter:stable}}
.mobile-menu{touch-action:pan-y}

/* ---- Games first ------------------------------------------------------ */
.compact-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;padding:4px 0 6px}
.compact-heading h1{font-size:clamp(26px,2.6vw,36px);letter-spacing:-1px;line-height:1.1;display:block}
.compact-heading h1 em{font-style:normal;color:var(--purple)}
.compact-heading .direct-answer{margin:8px 0 0;max-width:720px;font-size:14px;line-height:1.6;color:#655a71}
.compact-heading+.category-chips{margin:14px 0 6px}
.games-first{margin-top:18px}
.game-row{margin:34px 0}
.game-row .section-heading h2{font-size:21px}
.game-row .section-heading h2 a{color:inherit;text-decoration:none}
.game-row .section-heading h2 a:hover{color:var(--purple)}
.hero-band{min-height:300px;margin:46px 0 10px}
.hero-band .hero-content h2{font-size:clamp(34px,3.6vw,54px);letter-spacing:-2px;line-height:1.05;position:relative;display:inline-block}
.hero-band .hero-content h2 em{font-style:normal;color:var(--purple)}
.hero-band .hero-content>p a{color:var(--purple-dark);font-weight:600}
.page-heading.with-art{padding:16px 20px;gap:18px;margin-bottom:6px;align-items:center}
.page-heading.with-art h1{font-size:clamp(26px,2.6vw,34px)}
.page-heading.with-art .direct-answer{font-size:14px;line-height:1.6;margin-top:6px}
.page-heading.with-art img{order:-1;width:84px;max-width:84px;flex:0 0 84px;aspect-ratio:1.4;border-radius:10px}
.page-heading.with-art>div{max-width:none;flex:1}
.page-heading .count-label{margin-top:8px}
.page-heading{padding:4px 0 6px}
.page-heading h1{font-size:clamp(26px,2.8vw,36px);letter-spacing:-1px;line-height:1.1}
.page-heading .direct-answer{font-size:14px;line-height:1.6;margin-top:8px;max-width:720px;color:#655a71}
.page-heading+.category-chips,.inline-search+.category-chips{margin:14px 0 6px}
.listing-grid{margin:12px 0 45px}
.catalog-start{margin-top:10px}
@media(max-width:800px){
 .compact-heading{flex-direction:column;align-items:flex-start;gap:10px}
 .compact-heading .direct-answer{font-size:13px}
 .game-row .game-grid{display:flex;overflow-x:auto;gap:12px;padding:2px 2px 8px;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
 .game-row .game-grid::-webkit-scrollbar{display:none}
 .game-row .game-grid>.game-card{flex:0 0 42vw;max-width:200px;scroll-snap-align:start}
 .hero-band{display:flex;flex-direction:column;min-height:0}
 .hero-band .hero-content{order:1;width:100%;padding:28px 22px 6px}
 .hero-band .hero-art{order:2;position:relative;inset:auto;z-index:0;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:60% 58%;margin-top:14px;border-radius:0 0 20px 20px}
}
@media(max-width:640px){
 .page-heading.with-art{display:flex;flex-direction:row;align-items:flex-start;padding:14px 16px;gap:14px}
 .page-heading.with-art>img{display:block;width:60px;max-width:60px;flex:0 0 60px;margin-top:2px}
 .page-heading.with-art h1{font-size:24px}
 .page-heading.with-art .direct-answer{font-size:13px}
}

/* ---- Board games: layout stability + Connect Four look ---------------- */
/* Boards that scripts build must already occupy their final height. */
.board-summary{min-height:20px}
.column-controls{min-height:40px}
.connect-four-grid{aspect-ratio:7/6}
.library-summary{min-height:24px}
.library-toolbar{min-height:44px}
.library-game[data-game="chess"] .library-playfield{aspect-ratio:1;max-width:544px;width:100%}
.column-drop{transition:background .15s ease,transform .15s ease,color .15s ease}
.column-drop:not(:disabled):hover,.column-drop:not(:disabled):focus-visible{background:#d9c7f6;color:#4a2b7a;transform:translateY(2px)}
.connect-four-grid{background:linear-gradient(160deg,#8a5fd0,#6a43ad 60%,#5b3798);border:1px solid #57389a;box-shadow:0 8px 0 #4a2c7f,0 16px 30px #2a184a33}
.connect-cell{position:relative;overflow:visible;background:radial-gradient(circle at 50% 42%,#3a2160 0 58%,#2b1748 100%);box-shadow:inset 0 4px 7px #0007,inset 0 -2px 3px #ffffff14}
.connect-cell.player-1,.connect-cell.player-2{background:radial-gradient(circle at 50% 42%,#3a2160 0 58%,#2b1748 100%)}
.connect-cell .disc{position:absolute;inset:7%;border-radius:50%;pointer-events:none}
.connect-cell.player-1 .disc{background:radial-gradient(circle at 36% 30%,#ffc2b4,#f96a64 46%,#c6403e 100%);box-shadow:inset 0 -5px 0 #9c2f2f55,inset 0 3px 2px #fff6,0 2px 4px #0005}
.connect-cell.player-2 .disc{background:radial-gradient(circle at 36% 30%,#fff5c2,#f7cf55 46%,#cf961c 100%);box-shadow:inset 0 -5px 0 #a4711166,inset 0 3px 2px #fff8,0 2px 4px #0005}
.connect-cell .disc::after{content:"";position:absolute;inset:26%;border-radius:50%;box-shadow:inset 0 0 0 2px #0000001c}
.connect-cell.ghost::before{content:"";position:absolute;inset:7%;border-radius:50%;border:3px dashed #ffffffa8;opacity:.9}
.connect-cell.ghost.player-1::before{background:#f96a6455}
.connect-cell.ghost.player-2::before{background:#f7cf5555}
.connect-cell .disc.drop{animation:disc-drop .48s cubic-bezier(.2,.9,.3,1.15)}
@keyframes disc-drop{0%{transform:translateY(calc(-118% * (var(--row,0) + 1)));opacity:.6}70%{opacity:1}100%{transform:none}}
.connect-cell .disc.winning{outline:3px solid #fff;outline-offset:-3px;animation:disc-win 1s ease-in-out infinite}
@keyframes disc-win{0%,100%{transform:scale(1);filter:brightness(1)}50%{transform:scale(1.06);filter:brightness(1.25)}}
@media(prefers-reduced-motion:reduce){.connect-cell .disc.drop,.connect-cell .disc.winning{animation:none}}

/* ---- Sudoku: highlights, keypad counts, timer, solve ------------------- */
.sudoku-cell{transition:background .12s ease}
.sudoku-cell.peer{background:#f4eefb}
.sudoku-cell.same{background:#e6d9fa;font-weight:750}
.sudoku-cell.given.peer{background:#f1ecf5}
.sudoku-cell.selected{background:#e0d1f7;box-shadow:inset 0 0 0 2px #a684dc}
.sudoku-cell.hinted{color:#178474}
.sudoku-cell.hinted::after{content:"";position:absolute;right:3px;top:3px;width:5px;height:5px;border-radius:50%;background:#178474}
.sudoku-grid.solved .sudoku-cell{animation:sudoku-solved .8s ease both;animation-delay:calc(var(--i,0) * 9ms)}
@keyframes sudoku-solved{0%{background:#fff}40%{background:#c6f2df;transform:scale(1.06)}100%{background:#eef9f3;transform:none}}
.number-pad [data-digit]{position:relative}
.number-pad [data-digit][data-left]:not([data-left=""])::after{content:attr(data-left);position:absolute;top:-7px;right:-5px;font-size:9px;line-height:1;background:#7953c5;color:#fff;border-radius:9px;padding:2px 5px;font-weight:700}
.number-pad [data-digit].complete{opacity:.38}
.sudoku-timer{font-variant-numeric:tabular-nums;font-weight:750;color:#5d3bb1;font-size:13px;min-width:44px;text-align:center;background:#f1eafa;border:1px solid #e4d6f1;border-radius:7px;padding:8px 10px}
@media(prefers-reduced-motion:reduce){.sudoku-grid.solved .sudoku-cell{animation:none;background:#eef9f3}}

/* ---- Layout stability: start card and script-built boards ---------------- */
/* The engine swaps the start card's one-line tagline for its longer control text; reserve three lines so the card never grows. */
.overlay-sub{min-height:calc(1.8em * 3)}
.overlay-actions .button{min-width:150px}
.ttt-grid{aspect-ratio:1}
.reversi-grid,.lights-out-grid,.fifteen-puzzle-grid{aspect-ratio:1}
.mine-grid{grid-template-columns:repeat(var(--cols,9),1fr);aspect-ratio:var(--ar,1)}
.native-toolbar{min-height:44px}

/* ---- Minesweeper levels and reveal feedback ---- */
.mine-grid.wide{max-width:640px;gap:2px;padding:6px}
.mine-grid.wide .mine-cell{font-size:12px;border-radius:3px}
.mine-cell{transition:background .12s ease,transform .12s ease}
.mine-cell:not(.revealed):not(:disabled):hover{background:#b9a3d6;transform:translateY(-1px)}
.mine-cell.flagged{color:#d23b3b;background:#c9b3e6}
.mine-cell.wrong{background:#f0c8c8;color:#8a2c2c;text-decoration:line-through}
.mine-cell.mine{background:#4a3a5a;color:#f8e3e3}
.mine-cell.exploded{background:#e05a5a;color:#fff;animation:mine-boom .5s ease}
.mine-cell.fresh{animation:mine-reveal .28s ease}
.mine-cell[data-n='4']{color:#7c4dbb}.mine-cell[data-n='5']{color:#a8442c}.mine-cell[data-n='6']{color:#2b8a8a}.mine-cell[data-n='7']{color:#333}.mine-cell[data-n='8']{color:#777}
@keyframes mine-reveal{0%{transform:scale(.7);background:#d9c8ee}100%{transform:none}}
@keyframes mine-boom{0%{transform:scale(1.25)}100%{transform:none}}
/* ---- Tic-Tac-Toe ---- */
.ttt-cell{transition:background .15s ease,transform .15s ease;position:relative}
.ttt-cell:not(:disabled):hover{background:#e6dcf3;transform:translateY(-2px)}
.ttt-cell[data-mark]:not([data-mark=""]){animation:ttt-pop .25s cubic-bezier(.2,.9,.3,1.3)}
.ttt-cell.last::after{content:"";position:absolute;inset:6px;border-radius:9px;border:2px dashed #b293df;pointer-events:none}
.ttt-cell.win{background:#dff3d8;border-color:#8fc482;animation:ttt-win .9s ease-in-out infinite}
@keyframes ttt-pop{0%{transform:scale(.4)}100%{transform:none}}
@keyframes ttt-win{0%,100%{transform:none}50%{transform:scale(1.05)}}
@media(prefers-reduced-motion:reduce){.mine-cell.fresh,.mine-cell.exploded,.ttt-cell[data-mark],.ttt-cell.win{animation:none}}

/* ---- Reversi: flips, last move, disc bar ---- */
.reversi-cell{position:relative;transition:background .12s ease}
.reversi-cell .disc{transition:transform .2s ease}
.reversi-cell.last{box-shadow:inset 0 0 0 3px #f5c542}
.reversi-cell .disc.placed{animation:disc-place .3s cubic-bezier(.2,.9,.3,1.3)}
.reversi-cell .disc.flip{animation:disc-flip .5s ease}
@keyframes disc-place{0%{transform:scale(.4)}100%{transform:none}}
@keyframes disc-flip{0%{transform:rotateY(180deg) scale(.9);filter:brightness(1.6)}100%{transform:none}}
.reversi-cell:not(:disabled):hover{background:#cde8b6}
.disc-bar{display:block;height:8px;border-radius:4px;margin:8px auto 0;max-width:480px;background:linear-gradient(90deg,#313039 0 calc(var(--black,.5) * 100%),#fffaf0 calc(var(--black,.5) * 100%));border:1px solid #cbbfd6}
@media(prefers-reduced-motion:reduce){.reversi-cell .disc.placed,.reversi-cell .disc.flip{animation:none}}
.peg-solitaire-board{aspect-ratio:1}
.tabletop-summary{min-height:22px}