@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');*{box-sizing:border-box}body{margin:0;background:#111315;color:#f2f4ef;font:16px "DM Sans",sans-serif}button,input,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;border:1px solid #41454b;border-radius:9px;padding:10px 18px;background:#25292d;color:#fff}button:hover{border-color:#dbff73}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #dbff73;outline-offset:3px}header,main,footer{max-width:1280px;margin:auto;padding:28px 40px}header{display:flex;align-items:center;gap:28px;border-bottom:1px solid #2c2f33}.brand{display:flex;align-items:center;gap:12px;font:700 17px "Space Grotesk",sans-serif;letter-spacing:1px;color:inherit;text-decoration:none}.brand b{background:#dbff73;color:#111;padding:10px;border-radius:10px;letter-spacing:-1px}.headernote{color:#9da4a9;font-size:14px}header>button{margin-left:auto}.intro{display:grid;grid-template-columns:1fr 1.2fr;gap:60px;padding:30px 0 40px}.eyebrow{font-size:12px;letter-spacing:2px;color:#aab1b6}h1{font:600 clamp(42px,5vw,70px)/1.05 "Space Grotesk",sans-serif;margin:18px 0}h1 em{font-style:normal;color:#dbff73}.intro p{color:#afb6ba}.feature{position:relative;overflow:hidden;border-radius:20px;background:#dbff73;color:#202715;padding:30px;align-self:center;min-height:240px}.feature>span:first-child{font-size:12px;letter-spacing:1px}.feature strong{display:block;font:600 38px "Space Grotesk";margin-top:26px}.feature p{color:#424d2b;position:relative;z-index:1}.feature button{background:#182013;position:relative;z-index:1}.featureicon{position:absolute;font-size:130px;right:20px;bottom:35px;transform:rotate(-10deg)}.toolbar{display:flex;gap:20px;justify-content:space-between;align-items:center;border-top:1px solid #2e3235;padding-top:22px}nav{display:flex;gap:6px;flex-wrap:wrap}nav button{border-color:transparent;background:transparent;font-size:14px;padding:9px 12px;color:#afb6ba}nav button.active{background:#dbff73;color:#1e2515}.search{display:flex;align-items:center;background:#202427;border:1px solid #363b3e;border-radius:9px;padding:0 12px}.search span{font-size:26px}.search input{width:210px;border:0;background:transparent;color:white;padding:12px;font:inherit;font-size:14px}.sectiontitle{display:flex;align-items:center;justify-content:space-between;margin:28px 0 18px}.sectiontitle h2{font:500 25px "Space Grotesk";margin:0}.sectiontitle span{color:#aab1b6;font-size:14px}.grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}.card{display:block;text-align:left;padding:0;overflow:hidden;background:#202427;border:1px solid #34383d;border-radius:14px;transition:transform .2s}.card:hover{transform:translateY(-4px)}.tile{height:135px;display:flex;align-items:center;justify-content:center;position:relative;background:var(--tile);color:#171b19;font-size:65px}.tile .badge{position:absolute;top:12px;left:12px;font-size:11px;padding:4px 7px;border-radius:4px;background:#111d;color:white}.tile .play{position:absolute;bottom:10px;right:10px;font-size:15px;background:#111c;color:#fff;padding:7px 10px;border-radius:20px}.cardtext{padding:15px}.cardtext strong{display:block;font:600 16px "Space Grotesk"}.cardtext small{display:block;color:#a8afb4;margin-top:6px;font-size:13px}footer{margin-top:45px;border-top:1px solid #34383d;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:24px}footer div{display:flex;gap:16px;flex-wrap:wrap}footer a{font-size:14px;color:#b8bfc3}footer small{width:100%;color:#929a9f;font-size:13px}dialog{background:#181d22;color:#f4f6f8;border:1px solid #464e55;border-radius:18px;width:min(850px,96vw);padding:24px;max-height:95dvh;overflow:auto}dialog::backdrop{background:#000b;backdrop-filter:blur(6px)}.playerhead{display:flex;justify-content:space-between;gap:16px}.playerhead h2{margin:0;font:600 26px "Space Grotesk"}.playerhead p{color:#acb8c2;font-size:14px}.status{display:flex;align-items:center;gap:16px;margin-bottom:14px;flex-wrap:wrap}.status span:first-child{color:#dbff73}.status #best{font-size:14px;color:#aab1b6;margin-right:auto}.status button{padding:7px 12px;font-size:14px}#stage{position:relative;background:#101820;border-radius:12px;overflow:hidden}canvas{width:100%;display:block;touch-action:none}#board{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:18px}#board button{min-height:68px;font-size:27px}#overlay{position:absolute;inset:0;background:#101820d9;display:flex;justify-content:center;align-items:center;flex-direction:column;font:600 32px "Space Grotesk"}#overlay[hidden]{display:none}.controls{display:flex;gap:8px;justify-content:center;margin-top:16px;flex-wrap:wrap}.controls button{touch-action:none;user-select:none}#info{width:min(600px,95vw)}#info p{line-height:1.7;color:#c2cad1}.infoClose{float:right}#loginStatus{color:#b9c4cb}#loginStatus a{color:#dbff73}@media(max-width:1000px){.grid{grid-template-columns:repeat(4,1fr)}.toolbar{align-items:flex-start;flex-direction:column}.search{width:100%}.search input{width:100%}}@media(max-width:700px){header,main,footer{padding:20px}.headernote{display:none}.brand{font-size:14px}.intro{grid-template-columns:1fr;gap:12px;padding:16px 0 25px}h1{font-size:46px}h1 br{display:none}h1 em{margin-left:10px}.feature{min-height:200px;padding:22px}.feature strong{font-size:30px}.featureicon{font-size:95px;right:12px}.grid{grid-template-columns:repeat(2,1fr);gap:12px}.tile{height:120px}dialog{padding:14px}.controls button{padding:9px 12px;font-size:14px}.cardtext{padding:12px}header{gap:10px}header>button{font-size:14px;padding:9px 12px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
/* 1.2: page sizing and dimensional game surfaces */
html{min-height:100%;background:#111315}body{min-height:100dvh;overflow-x:hidden}header,main,footer{width:100%;max-width:1440px;padding-left:clamp(16px,3vw,48px);padding-right:clamp(16px,3vw,48px)}.intro{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(20px,4vw,60px)}.grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}.card{box-shadow:0 5px 0 #080c10}.tile{box-shadow:inset 0 -10px 0 #0002}.tile .play{box-shadow:0 3px 0 #0003}.owner-settings{font-size:14px;text-decoration:none;color:#dbff73;white-space:nowrap;margin-left:auto;padding:10px;border:1px solid #4a5834;border-radius:8px}header:has(.owner-settings)>button{margin-left:0}.extra-toolbar{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;padding:12px}.extra-note{padding:8px 14px;margin:0;text-align:center;font-size:14px;color:#b8c6d2}.extra-grid{display:grid;gap:6px;padding:16px;max-width:540px;margin:auto}.extra-grid button{padding:0;min-height:42px;border-radius:7px;box-shadow:0 4px 0 #080d14;font-size:20px}.extra-grid button:disabled{opacity:1;color:#d9e5ee}.extra-grid button.selected{outline:3px solid #dbff73}.extra-grid input{width:100%;min-width:0;padding:8px;background:#20313f;color:white;font-size:22px;text-align:center;border:1px solid #4b6070;border-radius:6px}.extra-grid .fixed{background:#364b5d}.extra-text{display:block;width:min(90%,350px);margin:14px auto;padding:12px;font-size:20px;color:white;background:#20313f;border:1px solid #567080;border-radius:8px}.extra-display{padding:16px;text-align:center;font:600 28px "Space Grotesk";color:#dbff73}.three-scene{display:block;width:100%;aspect-ratio:12/7;touch-action:none}.extra-canvas{display:block;width:100%;aspect-ratio:12/7;touch-action:none}#board{padding:0}#board:empty{display:none!important}.game-depth{box-shadow:inset 0 0 40px #0008}.controls button{box-shadow:0 3px 0 #090e14}@media(max-width:700px){.intro{grid-template-columns:1fr}.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.owner-settings{font-size:12px;padding:8px;white-space:normal;max-width:130px}header{flex-wrap:wrap}.tile{height:130px}.extra-grid{gap:5px;padding:12px}.extra-grid button{min-height:35px;font-size:17px}}@media(min-width:1500px){.grid{grid-template-columns:repeat(6,minmax(0,1fr))}}