:root{--ink:#173b36;--paper:#f6f3e9;--muted:#63736a;--line:#d8ddd0;--amber:#efbe52;--red:#b94f40;--green:#207367}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;background:transparent;border:1px solid var(--line);border-radius:8px;padding:10px 16px;cursor:pointer;transition:background .15s,transform .15s}button:hover:not(:disabled){background:#e6eadd}button:focus-visible,a:focus-visible{outline:3px solid #d78e20;outline-offset:3px}button:disabled{opacity:.4;cursor:default}.primary{background:var(--ink);color:white;border-color:var(--ink)}.primary:hover:not(:disabled){background:#29584d}header{max-width:1240px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:28px 28px 20px;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:13px;color:inherit;text-decoration:none;font-weight:800;letter-spacing:.1em}.mark{display:grid;place-items:center;width:58px;height:52px;border-radius:12px;background:var(--ink);color:var(--amber);font:700 23px/1 monospace}.brand small{display:block;font-size:9px;letter-spacing:.15em;margin-top:4px;font-weight:500}nav{display:flex;gap:8px}nav button{font-size:13px}main{max-width:1240px;margin:auto;padding:0 28px}.intro{display:flex;align-items:center;justify-content:space-between;gap:25px;padding:32px 0 24px}.eyebrow{font:700 10px/1.6 monospace;letter-spacing:.15em;color:var(--muted);margin:0 0 8px}h1{font:500 clamp(30px,4vw,48px)/1.1 Georgia,serif;letter-spacing:-.03em;margin:0 0 12px}h1 em{color:#a56a10}.intro p:not(.eyebrow){margin:0;color:var(--muted)}.record{border-left:1px solid var(--line);padding-left:30px;min-width:180px}.record span{display:block;font:10px monospace;letter-spacing:.13em;color:var(--muted)}.record strong{display:block;font-size:19px;margin:8px 0}.record small{color:var(--muted);font-size:11px}.statusbar{display:flex;gap:20px;align-items:center;border:1px solid var(--line);background:#edeedc;padding:10px 18px;border-radius:10px;font:12px monospace}.statusbar #turn{font-weight:800;margin-right:auto}.statusbar #action{background:var(--ink);color:white;border-radius:20px;padding:4px 12px}#boards{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:20px 0 0}.board{padding:18px;border:1px solid var(--line);background:#fcfbf5;border-radius:14px}.board.rival{background:#eeeede}.board-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;gap:8px}.board h2{font:600 17px Georgia,serif;margin:0}.board-head small{font:10px monospace;color:var(--muted)}.variables{display:grid;grid-template-columns:1fr 1fr;gap:12px}.variable{position:relative;text-align:left;background:#f5f5e9;border:1px solid #ccd5c5;min-height:154px;padding:15px;border-radius:10px;overflow:hidden}.variable:hover:not(:disabled){background:#e5eddf;transform:translateY(-2px)}.variable.legal{border:2px solid var(--green);padding:14px;background:#e8f2de}.variable.blocked{opacity:.48}.var-label{display:flex;justify-content:space-between;font:11px monospace;color:var(--muted)}.value{display:block;font:500 51px/1.2 Georgia,serif;font-variant-numeric:tabular-nums;margin-top:4px}.distance{font:10px monospace;color:var(--muted)}.meter{height:3px;background:#dce2d2;margin:10px 0}.meter i{display:block;background:var(--green);height:100%;max-width:100%}.effects{display:flex;gap:5px;flex-wrap:wrap;font:10px monospace;min-height:16px}.effects span{padding:2px 5px;background:#e8e3cb;border-radius:3px}.restrictions{font:10px monospace;color:var(--red);margin:10px 0 0;min-height:16px}.command{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 0}.command .eyebrow{margin:0}.command p{font-size:13px;margin:4px 0 0;max-width:620px;min-height:20px}.tools{display:flex;gap:7px;flex-shrink:0}.tools button{font-size:12px;padding:10px 12px}.handwrap{border-top:1px solid var(--line);padding-top:18px}.section-label{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px;gap:10px}.section-label h2,.bottom h2{font:500 18px Georgia,serif;margin:0}.section-label span{font:10px monospace;color:var(--muted)}#handCount{font:11px monospace;margin-left:5px}#hand{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:9px}.card{position:relative;min-height:164px;display:flex;flex-direction:column;align-items:flex-start;text-align:left;border:1px solid #d0d6c7;background:#fffcf3;border-radius:9px;padding:11px 9px;box-shadow:0 3px 0 #dadfce}.card:hover:not(:disabled){background:#fffbeb;transform:translateY(-4px)}.card.selected{outline:3px solid var(--green);outline-offset:2px;transform:translateY(-5px)}.card .kind{font:8px monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}.card .cardtitle{font:600 17px/1.1 Georgia,serif;margin:12px 0 8px;overflow-wrap:anywhere}.card.value-card .cardtitle{font:500 39px/1.2 Georgia,serif;color:#9a6400;margin-top:4px}.card .code{font:9px/1.5 monospace;color:var(--muted);margin-top:auto;overflow-wrap:anywhere}.card.attack{border-top:4px solid #bd6250}.card.defense{border-top:4px solid #388879}.card.loop{border-top:4px solid #7883b7}.card.value-card{border-top:4px solid var(--amber)}.key{position:absolute;right:8px;top:8px;color:#899384;font:9px monospace}.bottom{display:grid;grid-template-columns:1fr 330px;gap:40px;border-top:1px solid var(--line);margin-top:28px;padding-top:22px}.bottom ol{padding-left:19px;margin:12px 0;font:12px/1.8 monospace;color:var(--muted)}aside{border-left:2px solid var(--amber);padding-left:20px}aside h3{font:500 21px Georgia,serif;margin:5px 0 10px}aside p{font-size:12px;color:var(--muted);margin:8px 0}footer{display:flex;gap:12px;flex-wrap:wrap;border-top:1px solid var(--line);padding:22px 0;margin-top:25px;font-size:10px;color:var(--muted)}a{color:var(--green);text-underline-offset:3px}#saveStatus{margin-left:auto}dialog{border:1px solid #d3d8cb;border-radius:16px;color:var(--ink);background:var(--paper);padding:32px;max-width:650px;width:calc(100% - 28px);max-height:86vh;box-shadow:0 20px 100px #0d2d3655}dialog::backdrop{background:#0c2e31a8;backdrop-filter:blur(5px)}dialog h2{font:500 30px/1.2 Georgia,serif;margin:0 0 17px}dialog h3{font-size:15px;margin-top:23px}dialog p,dialog li{font-size:13px}dialog li{margin:9px 0}.close{float:right;font-size:23px;padding:0 10px}dialog button{margin:8px 6px 0 0}.thinking{opacity:.7}#result{text-align:center;max-width:470px}#result h2{font-size:42px}#result p{color:var(--muted)}@media(max-width:850px){#hand{grid-template-columns:repeat(4,1fr)}.card{min-height:135px}.intro{gap:10px}.record{padding-left:15px}.command{align-items:flex-start;flex-direction:column}.bottom{grid-template-columns:1fr 260px;gap:20px}nav{flex-wrap:wrap;justify-content:flex-end}nav button{padding:8px 10px}.brand small{font-size:8px}}@media(max-width:540px){header{padding:18px 16px;align-items:flex-start}.brand{font-size:12px;gap:8px;letter-spacing:.04em}.mark{width:42px;height:42px;font-size:18px}.brand small{max-width:110px;line-height:1.5}nav{max-width:160px;gap:5px}nav button{font-size:10px;padding:6px 8px}main{padding:0 16px}.intro{padding:24px 0 20px}.intro p:not(.eyebrow){font-size:12px}.record{display:none}.eyebrow{font-size:8px}.statusbar{font-size:10px;gap:8px;padding:10px}.statusbar #action{padding:3px 7px}#boards{grid-template-columns:1fr;gap:12px;margin-top:12px}.board{padding:12px}.board-head{margin-bottom:7px}.variable{min-height:123px;padding:11px}.variable.legal{padding:10px}.value{font-size:38px}.var-label,.distance{font-size:9px}.meter{margin:6px 0}.command{padding:16px 0;gap:10px}.tools{width:100%;justify-content:space-between}.tools button{font-size:11px;padding:9px 10px}.section-label{align-items:flex-start}.section-label>span{max-width:125px;text-align:right;font-size:8px}#hand{gap:7px}.card{padding:9px 6px;min-height:136px}.card .kind{font-size:7px}.card .cardtitle{font-size:14px}.card .code{font-size:8px}.key{font-size:8px;right:5px}.card.value-card .cardtitle{font-size:33px}.bottom{grid-template-columns:1fr;gap:15px}aside{display:none}footer{gap:8px}#saveStatus{margin-left:0;width:100%}dialog{padding:23px}dialog h2{font-size:26px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}