:root{--bg:#120d1f;--card:#231a3d;--line:#3b2d63;--ink:#f6f1ff;--mute:#a99bd0;--lime:#c8ff3d;--pink:#ff4fa3;--blue:#5b8cff;--sun:#ffd93d;
--plate:#f4efe6;--cell:#fffdf7;--cstroke:rgba(0,0,0,.13);--yard:#fffdf7;--star:rgba(0,0,0,.4);
--die-bg:#fff;--die-pip:#1b1430;--die-edge:#c9c3b6}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;color:var(--ink);font-family:'Bricolage Grotesque',system-ui,sans-serif;line-height:1.5;
background:radial-gradient(700px 420px at 8% -5%,#ff4fa355,transparent),radial-gradient(800px 500px at 100% 0,#5b8cff44,transparent),var(--bg);background-attachment:fixed}
button,input,select,textarea{font:inherit;color:inherit}.hide{display:none!important}a{color:var(--lime)}
.wrap{max-width:1100px;margin:0 auto;padding:16px}
.top{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;max-width:1100px;margin:0 auto;padding:14px 16px}
.logo{font-weight:800;font-size:1.35rem;color:var(--ink);text-decoration:none;letter-spacing:-.02em;background:var(--pink);padding:4px 12px;border-radius:12px;transform:rotate(-2deg);box-shadow:0 4px 0 #a01e63}
.top nav,.foot nav{display:flex;gap:4px 16px;flex-wrap:wrap;flex:1}
.top nav a,.foot nav a{color:var(--mute);text-decoration:none;font-weight:600}.top nav a:hover,.foot nav a:hover{color:var(--lime)}
.foot{max-width:1100px;margin:40px auto 10px;padding:18px 16px;border-top:2px dashed var(--line);color:var(--mute);font-size:.9rem}
h1.hero{font-size:clamp(2.6rem,9vw,5.4rem);line-height:.95;margin:5vh 0 12px;font-weight:800;letter-spacing:-.045em}
.grad{background:linear-gradient(90deg,var(--lime),var(--sun) 45%,var(--pink));-webkit-background-clip:text;background-clip:text;color:transparent}
.sub{color:var(--mute);margin:0 0 24px;max-width:46ch;font-size:1.1rem}
.sticker{display:inline-block;background:var(--sun);color:#2b2000;font-weight:800;padding:3px 12px;border-radius:99px;transform:rotate(-3deg);margin-bottom:8px}
.card{background:var(--card);border:2px solid var(--line);border-radius:20px;padding:18px}
.modes{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-bottom:16px}
.mode{text-align:left;cursor:pointer;display:block;text-decoration:none;color:var(--ink);box-shadow:0 6px 0 #0006;transition:transform .12s,border-color .12s}
.mode:hover,.mode.on{border-color:var(--lime);transform:translateY(-3px)}.mode:active{transform:translateY(3px);box-shadow:0 2px 0 #0006}
.mode i{font-style:normal;font-size:1.8rem;display:block}.mode b{display:block;font-size:1.2rem}.mode span{color:var(--mute);font-size:.92rem}
.form{display:grid;gap:12px;max-width:500px}.row{display:flex;gap:8px;flex-wrap:wrap}
label{font-size:.85rem;color:var(--mute);display:grid;gap:4px;flex:1}
input,select,textarea{background:#150f27;border:2px solid var(--line);border-radius:14px;padding:12px;width:100%}
input:focus,select:focus,textarea:focus,button:focus-visible,a:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.btn{background:var(--lime);color:#17260a;border:0;border-radius:14px;padding:12px 20px;font-weight:800;cursor:pointer;white-space:nowrap;box-shadow:0 5px 0 #7aa80f;transition:transform .08s,box-shadow .08s}
.btn:active:not(:disabled){transform:translateY(4px);box-shadow:0 1px 0 #7aa80f}
.btn.pink{background:var(--pink);color:#fff;box-shadow:0 5px 0 #a01e63}.btn.sun{background:var(--sun);color:#2b2000;box-shadow:0 5px 0 #a88a00}
.btn.ghost{background:#ffffff17;color:var(--ink);box-shadow:0 5px 0 #0005}.btn.mini{padding:6px 12px;font-size:.9rem;box-shadow:0 3px 0 #7aa80f}
.btn:disabled{opacity:.4;cursor:not-allowed}.err{color:#ff7a93;min-height:1.2em;margin:0}
.feat{display:flex;flex-wrap:wrap;gap:8px 18px;color:var(--mute);margin:26px 0}
.ad{margin:22px auto;max-width:728px;text-align:center;min-height:0}.ad:empty{display:none}
.game{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start;justify-content:center}
.boardbox{width:min(96vw,640px);flex:0 1 640px}
.board{width:100%;height:auto;display:block;border-radius:22px;box-shadow:0 8px 0 #0007,0 24px 60px #0008;touch-action:manipulation}
.plate{fill:var(--plate)}.cell{fill:var(--cell);stroke:var(--cstroke);stroke-width:.04}.yin{fill:var(--yard)}.star{fill:var(--star)}
.tok{transition:transform .35s cubic-bezier(.3,.7,.3,1)}.tok.can{cursor:pointer}
.tok.can .b{animation:pu .7s infinite alternate;transform-box:fill-box;transform-origin:center}@keyframes pu{to{transform:scale(1.3)}}
.side{flex:1 1 300px;max-width:420px;display:grid;gap:12px}
.pl{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:14px;border:2px solid transparent}
.pl.on{border-color:var(--lime);background:#c8ff3d14}.pl.off{opacity:.5}.dot{width:14px;height:14px;border-radius:50%}
.dice{display:flex;align-items:center;gap:14px}
.die{width:68px;height:68px;border-radius:15px;background:var(--die-bg);display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);padding:10px;box-shadow:0 5px 0 var(--die-edge),0 9px 16px #0006;flex:none}
.die i{border-radius:50%;margin:auto;width:11px;height:11px}.die i.on{background:var(--die-pip)}
body[data-die=neon] .die{border:2px solid var(--lime);box-shadow:0 0 18px #c8ff3d99}
body[data-die=glass] .die{backdrop-filter:blur(6px);border:2px solid #ffffff66}
.die.roll{animation:rl .45s}@keyframes rl{40%{transform:rotate(180deg) scale(1.2)}to{transform:rotate(360deg)}}
#log{height:170px;overflow:auto;display:grid;gap:4px;align-content:start;font-size:.92rem}.em{background:none;border:0;font-size:1.3rem;cursor:pointer}
dialog{background:var(--card);color:var(--ink);border:2px solid var(--line);border-radius:22px;padding:20px;max-width:520px;width:92vw}
dialog::backdrop{background:#000a}.opts{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 18px}
.opt{display:flex;align-items:center;gap:8px;background:#ffffff12;border:2px solid var(--line);border-radius:12px;padding:6px 12px;cursor:pointer}.opt.on{border-color:var(--lime)}
.sw{width:22px;height:22px;border-radius:7px;border:2px solid #0005}
.prose{max-width:760px}.prose h1{font-size:clamp(2rem,6vw,3.2rem);letter-spacing:-.03em;line-height:1.05;margin:3vh 0 12px}
.prose h2{margin:28px 0 6px;font-size:1.4rem}.prose p,.prose li{color:#e2d9f7;max-width:68ch}.prose li{margin:4px 0}
.prose .card{margin:14px 0}.prose a.card{display:block;text-decoration:none;color:var(--ink)}.prose a.card:hover{border-color:var(--lime)}
.sb{display:flex;flex-wrap:wrap;gap:6px}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}