:root{color-scheme:dark;--ink:#eff1de;--muted:#a5b5ad;--bg:#102027;--panel:#192e32;--mint:#a4d8c3;--gold:#edbd80}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 70% 0,#234346 0,transparent 50%),var(--bg);color:var(--ink);font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:14px}main{max-width:1280px;margin:auto;padding:28px 42px}button,select{font:inherit}button,a,select{touch-action:manipulation}button{cursor:pointer;border:1px solid #53675f66;border-radius:8px;background:transparent;color:var(--ink);padding:10px 14px;transition:background .15s,transform .15s}button:hover{background:#b2d0ba16}button:active{transform:translateY(1px)}button:disabled{opacity:.35;cursor:default}button:focus-visible,select:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--gold);outline-offset:3px}header{display:flex;align-items:center;justify-content:space-between;padding-bottom:22px;border-bottom:1px solid #8da79c30}.brand{text-decoration:none;display:flex;gap:13px;align-items:center;color:var(--ink);font-size:15px;font-weight:650;letter-spacing:.18em}.brand small{display:block;letter-spacing:.22em;font-size:9px;color:var(--muted);margin-top:5px}.seal{display:grid;place-items:center;border:1px solid #bfd4b4;border-radius:50%;width:40px;height:40px;font:20px Georgia;letter-spacing:-3px;padding-right:3px}.quiet{border:0;color:var(--muted);font-size:12px}.eyebrow{font-size:9px;letter-spacing:.22em;font-weight:700;color:var(--mint);margin:0 0 18px}.intro{display:flex;justify-content:space-between;align-items:center;padding:40px 0 35px;gap:30px}h1{font:54px/.99 Georgia,serif;letter-spacing:-2.2px;margin:0}h1 em{font-weight:400;color:var(--gold)}.lede{color:var(--muted);font-size:14px;line-height:1.7;margin:18px 0 0}.postcard{position:relative;width:44%;height:220px;overflow:hidden;border-radius:100px 14px 14px 14px;border:1px solid #84b1a138;box-shadow:0 14px 40px #0003}.postcard img{width:100%;height:100%;object-fit:cover;object-position:50% 60%}.postcard span{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,#102027dd);padding:35px 22px 14px;font:italic 16px Georgia}.playarea{border:1px solid #9db6a52e;border-radius:18px;background:#152a2e;display:grid;grid-template-columns:200px minmax(300px,1fr) 210px;overflow:hidden}.sidebar{padding:30px 22px;border-right:1px solid #9db6a51e}label{display:block;color:var(--muted);font-size:11px;margin:16px 0 7px}select{width:100%;background:#102027;color:var(--ink);border:1px solid #7b988247;border-radius:7px;padding:10px;font-size:12px}.primary{background:var(--mint);color:#142c29;font-size:12px;border:0;font-weight:650;padding:13px 15px;display:flex;justify-content:space-between;gap:12px;align-items:center}.primary:hover{background:#c0e7d3}.sidebar>.primary{margin-top:16px;width:100%}.divider{height:1px;background:#9db6a526;margin:26px 0}.lesson{display:flex;gap:10px;text-align:left;border:0;font-size:11px;padding:11px 0;width:100%;line-height:1.5}.lesson span{color:var(--gold);font:11px Georgia;padding-top:2px}.side-note{font:italic 15px/1.7 Georgia;color:#93a99e;margin-top:35px}.court{max-width:540px;width:100%;margin:auto;padding:20px 30px 18px}.statusbar{display:flex;justify-content:space-between;font-size:9px;letter-spacing:.15em;align-items:center}.statusbar #turnBadge{color:var(--mint);border:1px solid #9cbe9f42;border-radius:20px;padding:7px 11px}#moveCounter{color:var(--muted)}.opponent,.you{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:16px 0}.playername b{font:17px Georgia;display:block}.playername span{font-size:10px;color:var(--muted);display:block;margin-top:5px}.hand{display:flex;gap:5px}.reserve{position:relative;padding:0;width:44px;height:48px;border:1px solid #7c9a8940;border-radius:9px;display:flex;align-items:center;justify-content:center;background:#102027}.reserve img{border-radius:5px;object-fit:contain;pointer-events:none}.reserve span{font-size:8px;color:#e2e9cf;position:absolute;bottom:2px;right:4px}.reserve.selected{border-color:var(--gold);box-shadow:0 0 0 2px #edbd8040}.board{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;background:#d6c5a0 url('tile.webp') center/cover;padding:12px;border:6px solid #74674e;border-radius:15px;box-shadow:0 10px 20px #0004,inset 0 0 20px #0004;aspect-ratio:1}.tile{position:relative;display:grid;place-items:center;aspect-ratio:1;min-width:0;min-height:0;padding:0;background:#a3896233;border:1px solid #7b67484a;border-radius:8px;box-shadow:inset 0 2px 5px #735a3a24;color:#65573d;overflow:hidden}.tile:hover{background:#b6a67c55}.tile .number{position:absolute;top:6px;left:7px;font-size:9px;color:#645239b0}.tile .creature{width:50%;border-radius:50%;transition:transform .2s;box-shadow:0 3px 6px #0004;pointer-events:none;position:relative}.tile .creature.medium{width:70%}.tile .creature.large{width:90%}.tile.valid{outline:2px solid #3d8b72;outline-offset:-3px;background:#83bc952a}.tile.selected{outline:3px solid #cd8a35;outline-offset:-4px}.tile.selected .creature{transform:translateY(-5px)}.tile.hinted{outline:4px dashed #b77822;outline-offset:-5px}.tile.won{background:#a3d0a4b0;box-shadow:inset 0 0 10px #62a779}.under{position:absolute;bottom:4px;left:50%;transform:translateX(-50%);font-size:8px;background:#172c2de6;padding:2px 5px;border-radius:4px;color:#eee;white-space:nowrap;pointer-events:none}#message{text-align:center;min-height:32px;color:#c1d6c5;font-size:11px;line-height:1.5;margin:13px 0 5px}.tools{display:flex;justify-content:center;gap:6px}.tools button{padding:8px;font-size:10px;border:0}.notes{padding:32px 24px;border-left:1px solid #9db6a51e}.notes h2{font:30px/1.1 Georgia;margin:0 0 18px;letter-spacing:-.6px}.notes p{color:var(--muted);font-size:12px;line-height:1.8}.notes .eyebrow{font-size:9px;color:var(--mint);margin-bottom:18px}.size-guide{display:flex;gap:5px;align-items:end;margin:25px 0}.size-guide img{border-radius:50%;width:40px}.size-guide img.m{width:50px}.size-guide img.l{width:60px}.notes .note-title{color:var(--gold);font-family:Georgia;font-size:17px;margin:0}.notes details{border-top:1px solid #9db6a530;margin-top:22px;padding-top:16px;color:var(--muted);font-size:10px;line-height:1.8}.notes summary{cursor:pointer;color:var(--mint)}#layers{margin-top:12px}.result{margin-top:24px;border:1px solid #c3b27b70;padding:18px 12px;border-radius:9px}.result>span{font-size:8px;letter-spacing:.12em;color:var(--gold)}.result h2{font-size:24px;margin:12px 0}.result .primary{width:100%}footer{display:flex;justify-content:space-between;color:#91a49a;font-size:9px;padding:25px 0;gap:12px}a{color:inherit}dialog{width:min(520px,calc(100% - 30px));border:1px solid #9db6a550;border-radius:20px;background:#193136;color:var(--ink);padding:34px;box-shadow:0 30px 90px #0008}dialog::backdrop{background:#071719c9;backdrop-filter:blur(5px)}dialog h2{font:36px/1.1 Georgia;margin:0 0 22px}dialog li{font-size:13px;line-height:1.7;margin-bottom:12px;color:#bccfc3}dialog ol{padding-left:20px}dialog p{font-size:12px;line-height:1.8;color:#a9c0b2}.close{position:absolute;right:14px;top:12px;font-size:24px;padding:0 8px;border:0}.keyboard{background:#10262b;padding:12px;border-radius:8px}dialog .primary{width:100%}button[hidden],[hidden]{display:none!important}@media(min-width:1250px){.court{padding:22px 46px}}@media(max-width:950px){main{padding:22px}.playarea{grid-template-columns:170px 1fr}.notes{grid-column:1/-1;display:none}.court{max-width:500px}h1{font-size:48px}.postcard{height:190px}.sidebar{padding:28px 16px}}@media(max-width:580px){main{padding:15px}header{padding-bottom:15px}.brand{font-size:12px}.seal{width:33px;height:33px;font-size:16px}.brand small{font-size:7px}.quiet{font-size:10px;padding:8px 0}.intro{padding:26px 0 22px;gap:15px;align-items:end}h1{font-size:36px;letter-spacing:-1.5px}.intro .eyebrow{font-size:7px;letter-spacing:.13em;margin-bottom:12px}.lede{font-size:11px;line-height:1.6;margin-top:13px}.postcard{width:32%;height:145px;border-radius:60px 8px 8px 8px}.postcard span{display:none}.playarea{display:flex;flex-direction:column}.sidebar{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:14px;border:0;border-bottom:1px solid #9db6a51e}.sidebar .eyebrow,.sidebar label,.sidebar .divider,.sidebar .side-note{display:none}.sidebar>.primary{margin:0;grid-column:1/-1;justify-content:center;padding:10px}.lesson{font-size:9px;gap:5px;padding:5px 0}.lesson:last-of-type{grid-column:1/-1}select{font-size:11px;padding:8px}.court{padding:14px 18px;max-width:410px}.playername b{font-size:16px}.reserve{width:42px;height:45px}.board{gap:6px;padding:8px;border-width:5px}.opponent,.you{margin:12px 0}.tools button{font-size:11px;padding:10px}footer{flex-direction:column;font-size:9px;line-height:1.6}.notes:has(.result:not([hidden])){display:block;width:100%;border-left:0}.notes:has(.result:not([hidden]))> :not(.result){display:none}.result{margin:0}.result h2{font-size:26px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
dialog{max-height:calc(100dvh - 32px);overflow-y:auto}@media(min-width:581px) and (max-width:950px){.notes:has(.result:not([hidden])){display:block;border-left:0;border-top:1px solid #9db6a51e;padding:18px 28px}.notes:has(.result:not([hidden]))> :not(.result){display:none}.notes .result{margin:0}}