:root{font-family:'Yu Gothic UI','Meiryo',sans-serif;color:#ebeee6;background:#112c2b;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #e4b665;outline-offset:3px}header{height:88px;border-bottom:1px solid #ffffff20;display:flex;align-items:center;gap:24px;padding:0 5vw}.brand{font-family:serif;font-size:28px;letter-spacing:.12em;color:#f3ca87;text-decoration:none}.brand span{color:#f4f1e6}.sub,.local{font-size:14px;color:#bdcec6}.local{margin-left:auto}main{max-width:1280px;margin:auto;display:grid;grid-template-columns:minmax(460px,1.4fr) minmax(300px,1fr);gap:64px;padding:36px 44px 48px}.play{align-self:start}.tabletop{max-width:630px;margin:auto}.player{display:flex;align-items:center;gap:16px;min-height:64px}.player strong{white-space:nowrap;font-size:16px}.hand{display:flex;gap:5px;flex-wrap:wrap;align-items:center;min-height:42px}.hand .empty{font-size:14px;color:#92aaa0}.hand button{background:#ddbd85;border:0;border-radius:4px;color:#302519;padding:6px 10px}.hand button:disabled{opacity:.55;cursor:default}.board-frame{padding:9px 14px 14px;background:#b78a50;box-shadow:0 14px 40px #0004;border-radius:3px}.files{white-space:pre;text-align:center;height:25px;font-family:serif;font-size:14px;word-spacing:8px;color:#392c1b}#board{display:grid;grid-template-columns:repeat(9,1fr);aspect-ratio:1;background:#735532;border-top:1px solid #735532;border-left:1px solid #735532;gap:1px}.cell{position:relative;min-width:0;padding:0;border:0;background:#e3c28d;display:flex;justify-content:center;align-items:center;aspect-ratio:1}.cell:nth-child(2n){background:#e0bd85}.piece{display:flex;align-items:center;justify-content:center;clip-path:polygon(50% 0%,86% 18%,100% 100%,0 100%,14% 18%);width:81%;height:88%;padding-top:8%;background:linear-gradient(110deg,#fae5ae,#eeca87);color:#252017;font-family:'Yu Mincho','MS Mincho',serif;font-weight:800;font-size:clamp(20px,2.5vw,33px);filter:brightness(var(--piece-brightness,1)) drop-shadow(0 2px 1px #0005);line-height:1}.piece.enemy{transform:rotate(180deg)}.piece.prom{color:#a33228}.piece.long{font-size:clamp(14px,1.6vw,23px)}.cell.selected{background:#58a88c;box-shadow:inset 0 0 0 3px #134f40}.cell.legal:after{content:'';position:absolute;width:23%;height:23%;background:#edf3d2c9;border-radius:50%;box-shadow:0 0 0 2px #123e30}.cell.legal:has(.piece):after{width:85%;height:85%;border:3px solid #f3f5d7;background:transparent;border-radius:4px}.cell.last{background:#f0d69a}.cell.flipped{background:#79c7a5;animation:flash 1s ease}.cell.flipped .piece{background:#bce9ba}@keyframes flash{50%{background:#fff3b0}}aside{padding-top:18px}.eyebrow{letter-spacing:.24em;color:#d0aa70;font-size:12px}h1{font-family:'Yu Mincho',serif;font-size:38px;font-weight:500;line-height:1.45;margin:14px 0 24px}.mode{display:flex;background:#0b2221;padding:5px;border-radius:6px}.mode button{flex:1;padding:11px;border:0;border-radius:3px;background:transparent;color:#aec2b8}.mode button[aria-pressed=true]{background:#e9ca93;color:#2a3024;font-weight:bold}.status{margin:22px 0 16px;border-left:3px solid #d4ad6c;padding-left:18px}.status span{font-size:13px;color:#a8bcb2}.status h2{font-size:24px;margin:7px 0}.status p{font-size:15px;line-height:1.7;min-height:50px;margin:0;color:#d3ded6}.actions{display:flex;gap:10px}.actions button,.end-actions button{background:transparent;border:1px solid #ffffff35;color:#e1e8dd;border-radius:4px;padding:10px 16px}.actions button:disabled{opacity:.3}details{border-top:1px solid #ffffff25;margin-top:25px;padding-top:18px}summary{cursor:pointer;font-size:15px}ul{padding-left:20px;font-size:14px;color:#b9cbc1;line-height:1.8}li{margin-bottom:6px}.note{font-size:13px;line-height:1.7;color:#a5bab0}.demo{width:100%;text-align:left;background:#24453f;color:#f0d4a4;border:1px solid #63816b;padding:14px;margin-top:10px;border-radius:4px}.demo span{display:block;margin-top:5px;font-size:13px;color:#becfc0}.end-actions{display:flex;gap:10px;margin-top:16px}.end-actions button{font-size:13px;padding:7px 12px}.record{font-size:14px;color:#b5c8bb;line-height:1.8;margin-top:18px;max-height:160px;overflow:auto}dialog{background:#f6eddc;border:0;border-radius:8px;max-width:90vw;padding:30px;color:#243b32}dialog::backdrop{background:#0009}dialog button{padding:10px 22px;margin-right:8px;background:#194e40;color:white;border:0;border-radius:4px}dialog p{line-height:1.7}@media(max-width:850px){header{height:70px;padding:0 20px;gap:12px}.sub{display:none}main{grid-template-columns:1fr;gap:20px;padding:18px 14px}aside{max-width:630px;width:100%;margin:auto;padding-top:0}h1{display:none}.eyebrow{display:none}.piece{font-size:clamp(20px,5vw,34px)}.piece.long{font-size:clamp(14px,3.8vw,24px)}.files{word-spacing:clamp(0px,1vw,8px)}.board-frame{padding:7px}.local{font-size:12px}.player{min-height:57px}.status p{min-height:0}}
:root .files{display:grid;grid-template-columns:repeat(9,1fr);word-spacing:normal;white-space:normal}
:root main{max-width:1600px;grid-template-columns:minmax(740px,1fr) minmax(280px,340px);gap:36px;padding:30px 30px 48px}
.tabletop{max-width:1120px;display:grid;grid-template-columns:156px minmax(0,1fr) 156px;gap:16px;align-items:start}
.player{display:flex;flex-direction:column;gap:12px;min-height:0;width:156px;align-items:stretch}
.player strong{text-align:center;font-size:14px}
.player.opponent{grid-column:1;grid-row:1}
.board-frame{grid-column:2;grid-row:1;min-width:0;padding:9px 9px 12px}
.player.self{grid-column:3;grid-row:1;align-self:end;flex-direction:column-reverse}
.hand{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:7px;align-items:stretch;padding:9px;width:100%;aspect-ratio:1;min-height:0;background:#d5aa6a;border:3px solid #936b3d;border-radius:3px;box-shadow:0 5px 0 #805b32,0 9px 18px #0003}
.opponent .hand{transform:rotate(180deg)}
.hand .hand-slot{position:relative;display:flex;align-items:center;justify-content:center;min-width:0;min-height:0;border:0;border-radius:2px;padding:0;background:transparent;color:#48311d}
.hand .hand-slot:disabled{opacity:1;cursor:default}
.hand .hand-slot.empty{border:1px dashed #8d693d;color:#674823;font-size:19px;font-family:'Yu Mincho',serif}
.hand .pawn-slot{grid-column:2;grid-row:3}
.hand .piece{height:93%;width:85%;font-size:25px;padding-top:5%;font-weight:700}
.hand-count{position:absolute;right:-3px;bottom:-3px;border-radius:3px;padding:0 3px;background:#f3e1b9;color:#392818;font-size:12px;line-height:1.35}
.hand .hand-slot[aria-pressed=true]{outline:3px solid #20684f;outline-offset:2px}
.hand .hand-slot[aria-pressed=true] .piece{background:#a9dcba}
.hand .hand-slot:not(:disabled):hover .piece{background:#fce9bc}
@media(max-width:1200px){:root main{grid-template-columns:1fr;max-width:1050px}.tabletop{max-width:950px}aside{max-width:950px;width:100%;margin:auto}h1,.eyebrow{display:none}}
@media(max-width:700px){:root main{padding:18px 14px;gap:24px}.tabletop{grid-template-columns:1fr 1fr;gap:20px 12px}.player.opponent{grid-column:1;grid-row:1}.board-frame{grid-column:1 / -1;grid-row:2}.player.self{grid-column:2;grid-row:3;justify-self:end}.player{width:156px;max-width:100%}.piece{font-size:clamp(20px,5vw,34px)}.hand .piece{font-size:25px}}

[hidden]{display:none!important}
.online-panel{border:1px solid #567367;border-radius:5px;padding:15px;margin:0 0 18px;background:#173833}
.online-panel h2{font-size:17px;margin:0 0 8px}
.online-panel p{font-size:14px;line-height:1.7;margin:8px 0}
.online-panel button{background:#e9ca93;border:0;border-radius:3px;padding:10px 13px;color:#26392d;margin:4px 0;max-width:100%}
.online-panel button:disabled{opacity:.5;cursor:default}
.online-panel input{display:block;width:100%;padding:9px;margin:6px 0;background:#102b27;color:#ecf0e3;border:1px solid #718779;border-radius:3px;font:inherit;font-size:14px}
.online-panel label{font-size:14px}.status #scores{min-height:0;font-size:15px;color:#e7ca98;margin:8px 0}
.mode button:disabled{cursor:default}button:disabled{cursor:default}

.board-with-ranks{display:grid;grid-template-columns:minmax(0,1fr) 20px;gap:3px}
:root .files{margin-right:23px}
:root .files,.ranks{font-family:'Yu Mincho','MS Mincho',serif;font-size:12px;font-weight:200;color:#705537}
.ranks{display:grid;grid-template-rows:repeat(9,1fr);text-align:center}
.ranks span{display:flex;align-items:center;justify-content:center}

.board-area{grid-column:2;grid-row:1;min-width:0}
.board-progress{text-align:center;color:#d9c29b;font-size:18px;font-weight:400;line-height:1.5;margin-bottom:8px;font-variant-numeric:tabular-nums}
@media(max-width:700px){.board-area{grid-column:1 / -1;grid-row:2}}

.tutorial{align-self:start;min-width:0}.tutorial h2{font-size:20px;font-weight:500;margin:0 0 18px;color:#f3ca87}.tutorial video{display:block;width:100%;aspect-ratio:3/2;border:1px solid #ffffff25;border-radius:8px;background:#112c2b}
/* Online lobby: compact tutorial on the left, invitation action on the right. */
:root main:has(#tutorial:not([hidden])){max-width:1080px;grid-template-columns:minmax(0,440px) minmax(0,440px);justify-content:space-between;gap:64px;padding-top:48px}
main:has(#tutorial:not([hidden])) .tutorial{width:100%;max-width:440px;justify-self:start}
main:has(#tutorial:not([hidden])) aside{padding-top:42px;width:100%;min-width:0}
main:has(#tutorial:not([hidden])) aside h1,main:has(#tutorial:not([hidden])) .eyebrow{display:none}
main:has(#tutorial:not([hidden])) .online-panel{padding:24px}
main:has(#tutorial:not([hidden])) #createRoom,main:has(#tutorial:not([hidden])) #joinRoom{display:block;width:100%;min-height:96px;padding:22px 16px;margin-top:20px;font-size:22px;font-weight:700;line-height:1.5;border-radius:8px;box-shadow:0 5px 0 #a88852}
main:has(#tutorial:not([hidden])) #createRoom:hover,main:has(#tutorial:not([hidden])) #joinRoom:hover{background:#f4dcae}
@media(max-width:700px){:root main:has(#tutorial:not([hidden])){grid-template-columns:minmax(0,1fr);gap:24px;padding:24px 18px}.tutorial h2{font-size:18px}main:has(#tutorial:not([hidden])) aside{padding-top:0}main:has(#tutorial:not([hidden])) .tutorial{max-width:360px}main:has(#tutorial:not([hidden])) #createRoom,main:has(#tutorial:not([hidden])) #joinRoom{font-size:20px;min-height:84px}}

.player.self{flex-direction:column}.hand-turn{font-size:14px;text-align:center;padding:9px 4px;background:#28443f;border:1px solid #729186;border-radius:5px;color:#dce7dc}.hand-turn.my-turn{background:#e9ca93;color:#233c30;font-weight:bold}.player.self strong{order:3}#rematchPanel{margin-top:18px;padding:16px;border:1px solid #d4ad6c;border-radius:5px}#rematchPanel button,#closeToss{padding:12px 18px;background:#e9ca93;color:#233c30;border:0;border-radius:5px;margin:5px;font:inherit}#furigoma{position:fixed;inset:50% auto auto 50%;transform:translate(-50%,-50%);width:min(90vw,480px);z-index:20;text-align:center;padding:28px;background:#173833;border:2px solid #d4ad6c;border-radius:12px;box-shadow:0 0 0 100vmax #0009}#tossCoins{display:flex;justify-content:center;gap:12px;margin:28px 0}.toss-piece{display:grid;place-items:center;width:54px;height:64px;background:#e9ca93;color:#302519;clip-path:polygon(50% 0,85% 18%,100% 100%,0 100%,15% 18%);font-family:serif;font-size:32px;animation:toss 1s ease-out both}@keyframes toss{0%{transform:translateY(-90px) rotate(0deg);opacity:0}60%{transform:translateY(10px) rotate(540deg);opacity:1}100%{transform:translateY(0) rotate(720deg)}}@media(prefers-reduced-motion:reduce){.toss-piece{animation:none}}

.match-choices{display:flex;gap:10px}.match-choices button{flex:1;background:#28443f;color:#f0e4cd;border:1px solid #718779}.match-choices button[aria-pressed=true]{background:#e9ca93;color:#233c30}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:14px 0}.setting-row select{font:inherit;padding:8px 12px;border-radius:4px;background:#102b27;color:#ecf0e3;border:1px solid #718779}

.hand-turn{font-family:inherit;width:100%}.hand-turn:disabled{cursor:default;opacity:1}.hand-turn:not(:disabled){cursor:pointer;text-decoration:underline;text-underline-offset:3px}#undoPanel{margin-top:14px;padding:16px;border:1px solid #729186;border-radius:5px}#undoPanel button{font:inherit;padding:10px 14px;margin:4px;border:0;border-radius:4px;background:#e9ca93;color:#233c30}

.cell.multi-flip{z-index:2;animation:none}.cell.multi-flip .piece{overflow:visible;filter:brightness(var(--piece-brightness,1)) drop-shadow(0 4px 5px #1b765c80)}

#flipBurst{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:100;pointer-events:none;white-space:nowrap;font-size:clamp(48px,10vw,112px);font-weight:900;line-height:1.25;letter-spacing:.03em;background:linear-gradient(105deg,#ff6060 0%,#ffb647 18%,#fff366 34%,#74ffb1 50%,#6eeaff 65%,#bba2ff 82%,#ff8fdd 100%);background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-stroke:1px #fff5;filter:drop-shadow(0 3px 0 #132b29) drop-shadow(0 0 10px #000b)}

/* Relative to the current player, including after a piece changes sides. */
.piece.enemy,.player.opponent .piece{--piece-brightness:.94}

@font-face{font-family:'Title M Plus Rounded';src:url('/fonts/title-mplus-rounded.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
header .brand{display:inline-flex;align-items:center;flex-shrink:0;font-family:'Title M Plus Rounded','Hiragino Maru Gothic ProN',Meiryo,sans-serif;font-weight:500;font-size:28px;letter-spacing:.04em;line-height:1.4;color:#111;background:#f4f1e6;border-radius:999px;padding:4px 16px 6px}
header .brand span{color:#254b40}
@media(max-width:480px){header .brand{font-size:24px;padding:4px 13px 6px}}

.theme-switch{display:flex;align-items:center;gap:8px;color:#d3ded6;font-size:13px;white-space:nowrap}
.theme-switch select{font:inherit;color:#f4f1e6;background:#1b4038;border:1px solid #71968a;border-radius:8px;padding:7px 9px;cursor:pointer}
.stone{display:inline-block;width:1em;height:1em;border-radius:50%;vertical-align:-.08em;flex-shrink:0;box-shadow:0 2px 3px #0005;margin-right:.15em}
.stone.black{background:radial-gradient(circle at 32% 25%,#575757,#121212 65%);border:1px solid #8d9991}
.stone.white{background:radial-gradient(circle at 32% 25%,#fff,#e1e1d9 75%);border:1px solid #aaa}
.record .stone{width:.85em;height:.85em;margin-left:.15em}
[data-board-theme=green] .board-frame{background:#174a3c;box-shadow:0 14px 40px #0005}
[data-board-theme=green] #board{background:#10392e;border-color:#10392e}
[data-board-theme=green] .cell{background:#27664f}
[data-board-theme=green] .cell:nth-child(2n){background:#286a52}
[data-board-theme=green] .files,[data-board-theme=green] .ranks{color:#bbd3b6}
[data-board-theme=green] .cell.last{background:#44886b}
[data-board-theme=green] .cell.flipped{background:#599d76}
[data-board-theme=green] .cell.selected{background:#60a781;box-shadow:inset 0 0 0 3px #e7f0ce}
[data-board-theme=green] .cell.legal:after{background:#edf3d2c9;box-shadow:0 0 0 2px #123e30}
[data-board-theme=green] .cell.legal:has(.piece):after{background:transparent;border-color:#f3f5d7}
.cell .piece{position:relative;z-index:2}
.flip-light{position:absolute;inset:5%;border-radius:50%;pointer-events:none;z-index:1;opacity:0}
.flip-light.white{background:radial-gradient(circle,#fff9 5%,#fff5 42%,#fff0 72%);box-shadow:0 0 15px 4px #fff8,inset 0 0 9px #fff}
.flip-light.black{background:radial-gradient(circle,#080b0bdd 5%,#080b0b99 42%,#0000 72%);box-shadow:0 0 15px 4px #080b0b99,inset 0 0 9px #111}
@media(max-width:600px){header{gap:10px;flex-wrap:wrap;height:auto;min-height:78px;padding:12px 14px}.theme-switch{margin-left:auto;font-size:12px}.theme-switch select{padding:6px}.local{display:none}}
@media(prefers-reduced-motion:reduce){.cell.flipped{animation:none}.flip-light{display:none}}

.paradox-banner{position:fixed;z-index:10000;inset:35% 5% auto;text-align:center;font-size:clamp(24px,4vw,54px);font-weight:900;padding:24px;background:#112c2bf2;border:2px solid #f0d69c;border-radius:16px;color:#fff;text-shadow:2px 2px #000;animation:paradox-rainbow .9s linear infinite;pointer-events:none}.paradox-ghost{position:absolute!important;inset:8%;display:grid;place-items:center;z-index:5;pointer-events:none}.paradox-breaking{animation:paradox-break .55s ease-in forwards}.paradox-breaking.enemy{animation-name:paradox-break-enemy}@keyframes paradox-rainbow{0%,100%{color:#ff9b9b}25%{color:#ffe795}50%{color:#a5ffc2}75%{color:#a4caff}}@keyframes paradox-break{to{opacity:0;transform:translateY(20px) rotate(25deg) scale(.25)}}@keyframes paradox-break-enemy{from{transform:rotate(180deg)}to{opacity:0;transform:translateY(20px) rotate(205deg) scale(.25)}}@media(prefers-reduced-motion:reduce){.paradox-banner{animation:none;color:#ffe795}.paradox-breaking{animation:none;opacity:0}}

.rule-help{position:relative;display:inline-block;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:5px;cursor:help}.rule-help ruby{ruby-align:center}.rule-help rt{font-size:10px;letter-spacing:0;font-weight:400}.rule-tooltip{display:none;position:absolute;left:0;top:calc(100% + 10px);z-index:30;width:min(280px,70vw);padding:12px 14px;background:#0c211e;color:#fff3d8;border:1px solid #b99d65;border-radius:8px;font-size:14px;line-height:1.65;font-weight:400;text-decoration:none;box-shadow:0 5px 18px #0006}.rule-help:hover .rule-tooltip,.rule-help:focus .rule-tooltip,.rule-help:focus-within .rule-tooltip{display:block}.rule-help:focus-visible{outline:2px solid #e9ce92;outline-offset:5px}.setting-row:has(.rule-help){min-height:52px;gap:18px}

.ai-settings-inline{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:16px}.ai-settings-inline[hidden]{display:none}.ai-settings-inline .setting-row{margin:0;gap:8px;min-width:0;white-space:nowrap}.ai-settings-inline select{min-width:0;padding:8px 6px;flex:1;width:0}.ai-settings-inline ruby{flex-shrink:0}#matchSetup rt,#matchTitle rt{font-size:10px;font-weight:400;letter-spacing:0}.match-choices rt{font-size:10px}@media(max-width:420px){.ai-settings-inline{gap:10px}.ai-settings-inline .setting-row{font-size:14px;gap:5px}.ai-settings-inline select{font-size:14px}}

/* Only ruby readings use the reduced size. */
#matchSetup rt,#matchTitle rt{font-size:7.5px}

/* Small readings in explanatory prose, with room between lines. */
.rule-tooltip rt,details rt,.note rt,dialog p rt,.tutorial h2 rt{font-size:7.5px;font-weight:400;letter-spacing:0}
.rule-tooltip,details li,.note,dialog p{line-height:1.9}

/* The final position remains the main surface after a game. */
:root .game-ended main{display:block;max-width:1160px;padding-top:20px}
.game-ended aside,.game-ended .hand-turn,.game-ended #boardProgress{display:none!important}
#resultHeading{text-align:center;margin:0 0 28px}
#resultTitle{font-size:clamp(32px,4.5vw,48px);color:#f2e6b9;margin:0 0 12px;font-weight:700}
#resultReason{font-size:clamp(19px,2.5vw,24px);font-weight:600;margin:0 0 12px}
#resultDetail{font-size:14px;color:#a5bab0;margin:0;line-height:1.7}
.game-ended .cell.last,.game-ended .cell.flipped{animation:none;background:#e3c28d}
.game-ended .cell.flipped .piece{background:linear-gradient(110deg,#fae5ae,#eeca87)}
.game-ended .cell.decisive{box-shadow:inset 0 0 0 2px #e4d69a;background:#bca36f}
[data-board-theme=green] .game-ended .cell{background:#28664f}
[data-board-theme=green] .game-ended .cell.decisive{background:#527f59}
#resultActions{text-align:center;margin:26px auto 0;max-width:560px;border-top:1px solid #69806d;padding-top:12px}
#resultActions #rematchPanel{display:inline;border:0;background:none;padding:0;margin:0}
#resultActions #rematchText{font-size:14px;color:#a5bab0;margin:0 0 10px}
#resultActions button{background:transparent;border:0;border-radius:0;box-shadow:none;font:inherit;color:#eddfb4;padding:10px 16px;margin:0}
#resultActions #closeResult{color:#b3c5b7}
#resultActions button:disabled{opacity:.5}
@media(max-width:700px){:root .game-ended main{padding:18px 12px}.game-ended .tabletop{grid-template-columns:1fr 1fr;gap:12px}.game-ended .player{width:112px}.game-ended .hand .piece{font-size:19px}.game-ended .hand{gap:4px;padding:5px}#resultHeading{margin-bottom:18px}}

@media(min-width:701px){.game-ended .tabletop{grid-template-columns:132px minmax(280px,min(540px,calc(100svh - 360px))) 132px;justify-content:center}.game-ended .player{width:132px}}


.settings-gear{background:none;border:0;color:#d3ded6;font-size:28px;padding:5px 10px;line-height:1;cursor:pointer}
#settingsDialog{background:#173833;color:#eceddf;width:min(90vw,420px)}
#settingsDialog .theme-switch{margin:24px 0}#settingsDialog button{margin:8px 0}
#developerDialog{width:min(94vw,740px);max-height:94svh;overflow:auto;background:#173833;color:#eceddf;padding:20px}
#developerDialog h2{margin:0 0 8px}#developerDialog p{font-size:14px;margin:8px 0}
.dev-controls{display:flex;flex-wrap:wrap;gap:12px;align-items:center}.dev-controls select{font:inherit;background:#102b27;color:#eceddf;padding:6px;border:1px solid #718779}
.dev-buttons{display:flex;flex-wrap:wrap;gap:6px}.dev-buttons button{font-size:13px;padding:8px;margin:10px 0}
#devStatus{min-height:30px;font-size:14px;color:#eddfb4;line-height:1.7}
#devBoard{position:relative;display:grid;grid-template-columns:repeat(9,1fr);gap:1px;background:#123e30;max-width:490px;margin:12px auto;aspect-ratio:1;border:8px solid #194a3b}
#devBoard .cell{background:#28664f}#devBoard .cell.selected{background:#60a781}#devBoard .piece{font-size:clamp(17px,4vw,28px)}
.dev-capture-hand{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;max-width:490px;margin:8px auto;padding:8px;background:#b48e58;border:2px solid #d1b079;border-radius:4px;color:#2e2417}.dev-capture-hand span{padding:5px 0;text-align:center;border:1px solid #8a673c;border-radius:3px;font-size:14px}
.rules-link{background:transparent;color:#e8dfca;border:1px solid #718779;border-radius:4px;padding:8px 12px;font:inherit;cursor:pointer}
.time-sliders{border:0;padding:0;margin:20px 0 8px;min-width:0}.time-sliders legend{margin-bottom:12px}.time-sliders label{display:flex;justify-content:space-between;font-size:14px}.time-sliders output{color:#ffe4ac;font-variant-numeric:tabular-nums}.time-sliders input[type=range]{width:100%;margin:8px 0 15px;accent-color:#e9ca93;cursor:pointer}
.board-area{position:relative}.combo-notice{position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);z-index:10;pointer-events:none;white-space:nowrap;color:#fff0ad;font-size:clamp(32px,5vw,58px);font-weight:900;text-shadow:0 3px 0 #173d33,0 0 12px #000;letter-spacing:.02em}
.match-choices{grid-template-columns:repeat(3,minmax(0,1fr))!important}.match-choices button{min-width:0;padding:12px 6px}#advancedSettings{margin:14px 0}#advancedSettings summary{cursor:pointer;padding:10px 0}#rulesDialog{max-width:650px;max-height:85vh;overflow:auto;line-height:1.8}#rulesDialog h3{margin-top:20px}.rules-link{margin-left:auto;font-size:14px}.player-clock{font-size:20px;font-variant-numeric:tabular-nums;padding:6px;color:#a7b9af}.player-clock.clock-active{color:#ffe5a5;background:#1c4237;border-radius:4px}#friendSettings .note{margin:4px 0 10px}#friendSettings select{max-width:65%}
.dev-finish{background:linear-gradient(90deg,#ff8a8a,#ffe88d,#86f3c2,#b6b0ff);background-clip:text;color:transparent;filter:drop-shadow(0 2px 2px #000);text-shadow:none}
#rematchText:empty{display:none}
/* Combo rewards escalate with the number of converted pieces. */
.combo-notice.tier-gold,#flipBurst.tier-gold,.dev-finish.tier-gold{background:linear-gradient(115deg,#b77b19,#fff0aa 38%,#eebc43 64%,#fff0b4);background-clip:text;-webkit-background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 2px 1px #493109) drop-shadow(0 0 6px #dcac4660)}
.combo-notice.tier-platinum,#flipBurst.tier-platinum,.dev-finish.tier-platinum{background:linear-gradient(120deg,#93a9bd,#fff 30%,#cce4f4 52%,#fff 68%,#93a9bd);background-clip:text;-webkit-background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 2px 1px #284054) drop-shadow(0 0 9px #d6f2ff99)}
.combo-notice.tier-rainbow,#flipBurst.tier-rainbow,.dev-finish.tier-rainbow{background:linear-gradient(105deg,#ff7474,#ffd278,#fff5a1,#93ffb8,#8eeaff,#b9a3ff,#ffb0db);background-clip:text;-webkit-background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 2px 1px #173d33) drop-shadow(0 0 9px #ffffff50)}
.tier-platinum:before,.tier-platinum:after{content:'✦';position:absolute;color:#effaff;font-size:.45em;text-shadow:0 0 9px #fff;animation:platinum-spark .45s ease-in-out infinite alternate}
.tier-platinum:before{left:-.9em;top:-.25em}.tier-platinum:after{right:-.9em;bottom:-.2em;animation-delay:.18s}
.tier-rainbow:before,.tier-rainbow:after{content:'✦';position:absolute;color:#fff;font-size:.42em;text-shadow:0 0 10px #fff,0 0 16px #8eeaff;animation:rainbow-spark .5s ease-in-out infinite alternate}
.tier-rainbow:before{left:-.9em;top:-.25em}.tier-rainbow:after{right:-.9em;bottom:-.2em;animation-delay:.18s}
@keyframes platinum-spark{from{opacity:.25;transform:scale(.5) rotate(0)}to{opacity:1;transform:scale(1.2) rotate(70deg)}}
@keyframes rainbow-spark{from{opacity:.3;transform:scale(.55) rotate(0)}to{opacity:1;transform:scale(1.25) rotate(75deg)}}
.combo-particle{position:absolute;z-index:9;width:7px;height:7px;border-radius:50%;box-shadow:0 0 9px 2px #fff9;pointer-events:none}
.capture-light{position:fixed;z-index:150;width:10px;height:10px;border-radius:50%;background:#fff8cb;box-shadow:0 0 9px 3px #ffe395;pointer-events:none}.capture-light.major{width:15px;height:15px;box-shadow:0 0 12px 5px #ffe17b,0 0 25px 7px #fff4af}
#flipBurst{position:absolute;left:50%;top:45%;font-size:clamp(32px,5vw,58px)}
.firework-spark{width:10px!important;height:5px!important;box-shadow:0 0 5px #fff,0 0 13px currentColor,0 0 23px currentColor!important}
.firework-layer{position:absolute;inset:0;z-index:90;pointer-events:none;overflow:hidden;mask-image:radial-gradient(ellipse 27% 13% at 50% 45%,transparent 80%,#000 100%)}
.victory-flare:not(.defeat) strong:before{content:'';position:absolute;top:50%;left:50%;width:100vw;height:2.2em;transform:translate(-50%,-50%);z-index:-1;background:linear-gradient(to bottom,transparent,#a8e9ff88 20%,#bbeeffb0 50%,#a8e9ff88 80%,transparent);box-shadow:0 0 25px #9adeff55}
.victory-flare strong{position:relative;isolation:isolate}
.finish-spark{position:absolute;width:7px;height:7px;border-radius:2px;box-shadow:0 0 8px currentColor;z-index:101;pointer-events:none}
#flipBurst.tier-platinum,.dev-finish.tier-platinum{background-size:250% 100%}
.dev-finish{z-index:100}
.combo-gold-ring{position:absolute;z-index:9;width:56px;height:56px;border:3px solid #ffdf72;border-radius:50%;box-shadow:0 0 12px #ffc12c,inset 0 0 10px #ffedb0;pointer-events:none}
.combo-silver-sweep{position:absolute;z-index:9;left:0;top:20%;width:100%;height:50%;background:linear-gradient(90deg,transparent 20%,#dceeff33 42%,#fff 50%,#dceeff33 58%,transparent 80%);pointer-events:none}
.combo-silver-spark{position:absolute;z-index:11;width:9px;height:9px;background:#fff;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);filter:drop-shadow(0 0 4px #c4eeff);pointer-events:none}
.victory-flare{position:fixed;inset:0;z-index:200;display:grid;place-items:center;pointer-events:none;isolation:isolate;overflow:hidden}
.victory-flare:before{content:'';position:absolute;inset:-25%;background:radial-gradient(ellipse at center,#fffef3 0%,#fff9b5 8%,#ffe342e6 18%,#ffc22299 33%,#e9981755 50%,transparent 70%);animation:gold-bloom 2.1s ease-out both;z-index:-1}
.victory-flare:not(.defeat):after{content:'';position:absolute;left:50%;top:50%;width:180vmax;height:180vmax;z-index:-1;background:repeating-conic-gradient(from 4deg,transparent 0deg 7deg,#ffd24d55 8deg,#fff4bbee 10deg,#ffcb3b80 12deg,transparent 15deg 23deg),repeating-conic-gradient(from 13deg,transparent 0deg 18deg,#fffde5cc 19deg,transparent 20deg 37deg);mask-image:radial-gradient(circle,#000 0%,#000 20%,#0009 40%,transparent 65%);filter:blur(1px);animation:gold-rays 2.1s ease-out both}
.victory-flare strong{font:900 clamp(44px,10vw,120px)/1.1 Georgia,serif;letter-spacing:.07em;color:#fff3bd;text-shadow:0 3px 0 #805416,0 0 18px #ffcb48,0 0 46px #f9b923;animation:win-words 1.65s .4s both}
.victory-flare.defeat:before{inset:-25%;background:radial-gradient(ellipse at center,#eafaff 0%,#9bdcffb3 9%,#4086c299 23%,#163958c9 42%,#06111ed9 65%,transparent 82%);animation:defeat-bloom 2.1s ease-out both}
.victory-flare.defeat:after{content:'';position:absolute;left:50%;top:50%;width:180vmax;height:180vmax;z-index:-1;background:repeating-conic-gradient(from 4deg,transparent 0deg 9deg,#c7efff99 10deg,#6aadcf55 12deg,transparent 14deg 27deg);mask-image:radial-gradient(circle,transparent 0%,#000 12%,#0009 35%,transparent 62%);animation:defeat-rays 2.1s ease-out both}
.victory-flare.defeat strong{color:#eaf7ff;text-shadow:0 3px 0 #1a334c,0 0 18px #67b1de,0 0 40px #1e5279;animation:lose-words 1.65s .4s both}
.victory-flare.defeat strong:before{content:'';position:absolute;top:50%;left:50%;width:100vw;height:2.2em;transform:translate(-50%,-50%);z-index:-1;background:linear-gradient(to bottom,transparent,#183d6688 20%,#0b263de6 50%,#183d6688 80%,transparent);box-shadow:0 0 25px #4c8fc744}
@keyframes defeat-bloom{0%{opacity:0;transform:scale(1.5)}12%{opacity:1;transform:scale(1.1)}28%{opacity:.85;transform:scale(.85)}60%{opacity:.75;transform:scale(.6)}100%{opacity:0;transform:scale(.45)}}
@keyframes defeat-rays{0%{opacity:0;transform:translate(-50%,-50%) scale(1.4) rotate(8deg)}12%{opacity:.8}35%{opacity:.65;transform:translate(-50%,-50%) scale(.9) rotate(3deg)}75%{opacity:.3}100%{opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(-7deg)}}
@keyframes lose-words{0%{opacity:0;transform:scale(1.08)}18%{opacity:1;transform:scale(.98)}35%,82%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.98)}}
@keyframes gold-bloom{0%{opacity:0;transform:scale(.12)}12%{opacity:1;transform:scale(.8)}24%{opacity:1;transform:scale(1.15)}45%{opacity:.75;transform:scale(1.2)}78%{opacity:.55}100%{opacity:0;transform:scale(1.3)}}
@keyframes gold-rays{0%{opacity:0;transform:translate(-50%,-50%) scale(.12) rotate(-7deg)}14%{opacity:1;transform:translate(-50%,-50%) scale(.85) rotate(-3deg)}30%{opacity:.95;transform:translate(-50%,-50%) scale(1) rotate(0deg)}75%{opacity:.5}100%{opacity:0;transform:translate(-50%,-50%) scale(1.15) rotate(8deg)}}
@keyframes win-words{0%{opacity:0;transform:scale(.85)}18%{opacity:1;transform:scale(1.04)}35%,82%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.victory-flare:before,.victory-flare.defeat:before,.victory-flare strong,.victory-flare.defeat strong{animation:none}.victory-flare:after{display:none}.victory-flare:before{opacity:.5}.victory-flare strong,.victory-flare.defeat strong{opacity:0;animation:win-fade 1.65s .4s both}@keyframes win-fade{0%{opacity:0}20%,85%{opacity:1}100%{opacity:0}}}
#devTransfer{margin:12px 0}#devCode{display:block;width:100%;resize:vertical;background:#102b27;color:#eceddf;border:1px solid #718779;padding:8px;font:13px monospace}
@media(prefers-reduced-motion:reduce){.tier-platinum:before,.tier-platinum:after{animation:none}}
@media(prefers-reduced-motion:reduce){.tier-rainbow:before,.tier-rainbow:after{animation:none}}

/* Collapse warning stays anchored while its lettering rocks. */
.paradox-active-label{display:inline-block;margin:0 .45em;font-weight:900;background:linear-gradient(90deg,#ff6389,#ffc65c,#a0ed62,#54e5e5,#86a1ff,#e48aff,#ff6389);background-size:200% 100%;background-clip:text;-webkit-background-clip:text;color:transparent;transform-origin:50% 65%;animation:paradox-rainbow 2.6s linear infinite,paradox-seesaw 1.4s ease-in-out infinite}
@keyframes paradox-rainbow{to{background-position:200% 0}}
@keyframes paradox-seesaw{0%,100%{transform:rotate(-4deg) scale(.96)}50%{transform:rotate(4deg) scale(1.1)}}
#board,#devBoard{position:relative}
.slide-spark{position:absolute;pointer-events:none;z-index:7;width:8px;height:8px;margin:-4px;border-radius:50%;box-shadow:0 0 10px currentColor}
@media(prefers-reduced-motion:reduce){.paradox-active-label{animation:none}}

.slide-rainbow-ray{position:absolute;z-index:7;pointer-events:none;height:4px;margin-top:-2px;border-radius:50%;transform-origin:0 50%;background:linear-gradient(90deg,#fff9,#ff657f,#ffd55f,#7cff9e,#67e8ff,#9983ff,#ff76dd,transparent);filter:drop-shadow(0 0 4px #b0eaff);}

#osesho{display:block;width:210px;max-width:100%;border:0;padding:0;background:transparent;color:inherit;margin:0 0 20px;transition:opacity .35s,transform .35s}
#osesho[hidden]{display:none}#osesho:disabled{cursor:default}#oseshoStatus{display:block;font-size:13px;margin-top:8px}
.osesho-art{position:relative;display:block;overflow:hidden;aspect-ratio:466/407;background:#000;border-radius:8px;isolation:isolate}
.osesho-art img{display:block;width:103.87%;max-width:none;height:100%;object-fit:fill}
.osesho-rainbow{display:none;position:absolute;inset:0;background:linear-gradient(100deg,#ff5680,#ffe65d,#76ffb3,#69deff,#b581ff,#ff5680);background-size:300% 100%;mix-blend-mode:multiply;animation:paradox-rainbow 1s linear infinite}
#osesho.thinking .osesho-rainbow{display:block}#osesho.thinking .osesho-art{box-shadow:0 0 22px #a9eaff80}#osesho.departing{opacity:0;transform:translateY(-60px) scale(.65);pointer-events:none}
@media(prefers-reduced-motion:reduce){.osesho-rainbow{animation:none}#osesho{transition:none}}

#osesho{position:relative}#osesho.idea:before{content:'!';position:absolute;left:-38px;top:22%;font-size:64px;font-weight:900;color:#ff3535;text-shadow:0 2px 0 #fff,0 0 15px #ff454580;animation:helper-idea .3s ease-out;z-index:2}
@keyframes helper-idea{from{transform:scale(.2) rotate(-18deg)}to{transform:scale(1) rotate(0)}}
#osesho.departing{transform:translate(100px,-130px) scale(.1);transition:opacity .45s,transform .45s cubic-bezier(.6,0,1,.6)}
@media(prefers-reduced-motion:reduce){#osesho.idea:before{animation:none}#osesho.departing{transform:none;transition:none}}

.ai-handicap-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0}.ai-handicap-row[hidden]{display:none}.ai-handicap-row label{display:flex;flex-direction:column;gap:6px;min-width:0}.ai-handicap-row select{width:100%;font:inherit;padding:8px}

.tutorial-launch{width:100%;min-height:280px;padding:32px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;border:2px solid #c4b679;border-radius:8px;background:#194e40;color:#fff3cd}.tutorial-launch strong{font-size:clamp(24px,3vw,36px)}.tutorial-launch span{font-size:16px}.tutorial-launch b{font-size:22px}.tutorial-video video{width:100%;margin-top:12px}.tutorial-mode .dev-controls,.tutorial-mode .dev-buttons,.tutorial-mode>h2,.tutorial-mode>p,.tutorial-mode .dev-capture-hand{display:none}#tutorialLesson{max-width:600px}#tutorialLesson p{line-height:1.65}#tutorialLesson h3{font-size:22px;margin:0}#tutorialLesson button{margin-bottom:12px}

#helperUnlimitedRow{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:14px 0}#helperUnlimitedRow[hidden]{display:none}#helperAd{padding:8px 12px;background:#e9ca93;color:#233c30;border:0;border-radius:4px}#helperAdNote{flex-basis:100%;color:#b9cbc1}

.sword-impact{position:absolute;pointer-events:none;z-index:120;width:0;height:0}.falling-sword{position:absolute;width:90px;height:216px;left:-45px;top:-208px;filter:drop-shadow(0 0 9px #78eaff) drop-shadow(0 0 22px #bd46ff);animation:sword-fall .95s both}.sword-halo{position:absolute;left:-80px;top:-80px;width:160px;height:160px;background:radial-gradient(circle,#fff2afcc, #ad37ff66 35%,transparent 70%);animation:sword-halo .95s both}.sword-shock{position:absolute;left:-50px;top:-50px;width:100px;height:100px;border:5px solid #c8f9ff;border-radius:50%;box-shadow:0 0 18px #ed87ff,inset 0 0 12px #fff;animation:sword-shock .95s both}
@keyframes sword-fall{0%{opacity:0;transform:translateY(-180px) scale(1.3)}20%{opacity:1;transform:translateY(-150px) scale(1.15)}43%{opacity:1;transform:translateY(4px) scale(1)}50%{transform:translateY(-5px)}60%,78%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(0)}}
@keyframes sword-halo{0%,30%{opacity:0;transform:scale(.2)}44%{opacity:1;transform:scale(1.25)}100%{opacity:0;transform:scale(1.6)}}
@keyframes sword-shock{0%,40%{opacity:0;transform:scale(.1)}44%{opacity:1}100%{opacity:0;transform:scale(2.1)}}

#devBoard .tutorial-hint{box-shadow:inset 0 0 0 3px #ffe879,inset 0 0 24px #ffe87990;z-index:3}#devBoard .tutorial-hint .piece{animation:tutorial-glow 1.2s ease-in-out infinite}@keyframes tutorial-glow{50%{filter:brightness(1.6) drop-shadow(0 0 9px #ffe879)}}.tutorial-collapse-note{position:absolute;left:5%;right:5%;top:38%;z-index:130;padding:16px;background:#112c2bef;color:#ffe879;font-weight:bold;text-align:center;pointer-events:none}#lessonProgress{color:#b37e13;font-weight:bold}@media(prefers-reduced-motion:reduce){#devBoard .tutorial-hint .piece{animation:none}}
.drop-ring{position:absolute;pointer-events:none;z-index:110;border:2px solid #b7fff0;border-radius:50%;box-shadow:0 0 12px #5fffd5,inset 0 0 10px #fff8}
.royal-sword{position:absolute;width:clamp(70px,17vw,120px);height:200px;left:-60px;top:-190px;transform-origin:50% 95%;filter:drop-shadow(0 0 8px #ffef96);animation:royal-sword-fall .95s both}
.royal-sword svg{width:100%;height:100%}.sword--1{--sword-x:-48px;--sword-angle:-22deg;animation-delay:65ms}.sword-0{--sword-x:0px;--sword-angle:0deg;z-index:2}.sword-1{--sword-x:48px;--sword-angle:22deg;animation-delay:35ms}
.sword-impact .sword-halo{background:radial-gradient(circle,#fffbd9ee,#ffcf46aa 30%,#ffa52744 55%,transparent 70%)}
.sword-impact .sword-shock{border-color:#fff2ab;box-shadow:0 0 20px #ffd84f,inset 0 0 14px #fff}.sword-shock.echo{animation-delay:90ms;border-width:2px}
.sword-rays{position:absolute;left:-100px;top:-100px;width:200px;height:200px;background:repeating-conic-gradient(from 10deg,transparent 0deg 24deg,#fff4acbb 25deg 27deg,transparent 28deg 45deg);border-radius:50%;mask-image:radial-gradient(circle,transparent 15%,#000 22%,transparent 68%);animation:sword-halo .95s both}
@keyframes royal-sword-fall{0%{opacity:0;transform:translate(var(--sword-x),-150px) rotate(var(--sword-angle)) scale(1.15)}18%{opacity:1;transform:translate(var(--sword-x),-135px) rotate(var(--sword-angle)) scale(1.1)}43%{opacity:1;transform:translate(var(--sword-x),5px) rotate(var(--sword-angle))}52%{transform:translate(var(--sword-x),-3px) rotate(var(--sword-angle))}68%{opacity:1;transform:translate(var(--sword-x),0) rotate(var(--sword-angle))}100%{opacity:0;transform:translate(var(--sword-x),0) rotate(var(--sword-angle))}}

/* A single steel blade: brief anticipation, fast impact, restrained afterglow. */
.hero-blade{position:absolute;width:100px;height:260px;left:-50px;top:-251px;filter:drop-shadow(0 0 5px #a9ecff);animation:hero-blade .95s both}.hero-blade svg{width:100%;height:100%}
.blade-column{position:absolute;width:12px;height:260px;left:-6px;top:-260px;background:linear-gradient(0deg,#e7ffff,transparent);filter:blur(4px);animation:blade-column .95s both}
.blade-flash{position:absolute;left:-90px;top:-2px;width:180px;height:4px;background:#fff8ce;box-shadow:0 0 14px 4px #80dfff;animation:blade-flash .95s both}
.blade-wave{position:absolute;left:-45px;top:-22px;width:90px;height:44px;border:2px solid #b8eeff;border-radius:50%;box-shadow:0 0 7px #85caff;animation:blade-wave .95s both}.blade-wave.second{animation-delay:65ms;border-color:#ecc784;border-width:1px}
.blade-spark{position:absolute;width:3px;height:14px;left:-1px;top:-7px;background:#fff0bb;box-shadow:0 0 5px #ffc766;animation:blade-spark .95s both}
@keyframes hero-blade{0%{opacity:0;transform:translateY(-135px) scaleY(1.2)}15%{opacity:1;transform:translateY(-125px)}30%{transform:translateY(-122px)}40%{opacity:1;transform:translateY(3px)}46%{transform:translateY(-2px)}60%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(0)}}
@keyframes blade-column{0%,28%{opacity:0;transform:scaleX(.3)}37%{opacity:1;transform:scaleX(1)}52%,100%{opacity:0}}
@keyframes blade-flash{0%,38%{opacity:0;transform:scaleX(.1)}41%{opacity:1;transform:scaleX(1)}65%,100%{opacity:0;transform:scaleX(1.3)}}
@keyframes blade-wave{0%,38%{opacity:0;transform:scale(.15)}43%{opacity:.95}100%{opacity:0;transform:scale(2.3)}}
@keyframes blade-spark{0%,39%{opacity:0;transform:rotate(var(--angle)) translateY(0) scale(.2)}44%{opacity:1}100%{opacity:0;transform:rotate(var(--angle)) translateY(calc(-1 * var(--reach))) scale(.1)}}

.major-drop-wave{border-color:#d4f7ff;box-shadow:0 0 10px #68dfff,inset 0 0 7px #fff9}.major-drop-spark{position:absolute;pointer-events:none;z-index:111;border-radius:50%;background:#fffbe5;box-shadow:0 0 5px 2px #fff4b5,0 0 13px 4px #ffbf38}
.promotion-blade{position:absolute;width:64px;height:212px;left:-32px;top:-210px;filter:drop-shadow(0 0 3px #b4eaff);animation:promotion-blade 950ms linear both}.promotion-blade svg{width:100%;height:100%}.promotion-flash{position:absolute;left:-90px;top:-2px;width:180px;height:4px;background:#fff1af;box-shadow:0 0 6px 2px #ffd85c,0 0 16px #ffb21d;animation:promotion-flash 330ms 380ms both}.promotion-glow{position:absolute;left:-85px;top:-8px;width:170px;height:15px;background:linear-gradient(90deg,transparent,#ffbd32 25%,#ffe389 50%,#ffbd32 75%,transparent);filter:blur(3px);animation:promotion-glow 500ms 400ms both}.promotion-ring{position:absolute;left:-48px;top:-20px;width:96px;height:40px;border:1px solid #ffe4a0;border-radius:50%;animation:promotion-ring 420ms 400ms both}
@keyframes promotion-blade{0%{opacity:0;transform:translateY(-150px)}20%{opacity:1;transform:translateY(-110px)}40%,49%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(0)}}
@keyframes promotion-flash{0%{opacity:0;transform:rotate(-25deg) scaleX(.1)}12%{opacity:1}100%{opacity:0;transform:rotate(-25deg) scaleX(1.1)}}
@keyframes promotion-glow{0%{opacity:0;transform:rotate(-25deg) scaleX(.15)}18%{opacity:.9;transform:rotate(-25deg) scaleX(1)}60%{opacity:.65}100%{opacity:0;transform:rotate(-25deg) scaleX(1.2)}}
@keyframes promotion-ring{0%{opacity:0;transform:scale(.25)}20%{opacity:.8}100%{opacity:0;transform:scale(1.5)}}

/* Direct king capture holds briefly, then waves before the existing victory. */
.king-impact{position:absolute;pointer-events:none;z-index:125;width:var(--cell-size);height:var(--cell-size);transform:translate(-50%,-50%)}
.king-impact::before,.king-impact::after{content:'';position:absolute;inset:0;border-radius:50%;box-sizing:border-box}
.king-impact.impact-hold::before{background:radial-gradient(circle,#fff6da,#ffda7666 35%,transparent 70%)}
.king-impact.impact-burst::before{border:3px solid #fff1af;box-shadow:0 0 16px #ffc14b;animation:king-wave .42s ease-out both}
.king-impact.impact-burst::after{border:1px solid #a9ecff;animation:king-wave .42s .06s ease-out both}
@keyframes king-wave{from{opacity:1;transform:scale(.3)}to{opacity:0;transform:scale(3.2)}}
.dev-capture-hand button{font:inherit;color:inherit;background:#fff1;border:1px solid #b6cbbb66;border-radius:5px;padding:4px 7px}
.dev-capture-hand button[aria-pressed=true]{outline:2px solid #ffc767;background:#b9923e44}
.dev-capture-hand button:disabled{opacity:.5;cursor:default}
.tutorial-mode.tutorial-drop #devHand0{display:flex;justify-content:center}
.tutorial-mode.tutorial-drop #devHand0 button{min-width:90px}
#board button,#devBoard button,#board .piece,#devBoard .piece{caret-color:transparent;user-select:none;-webkit-user-select:none}
.osesho-challenge-note{margin:10px 0;color:#8f1f1f;font-weight:700}.osesho-challenge-note[hidden]{display:none}
.status.home-message #count,.status.home-message #turn,.status.home-message #scores{display:none}

#devBoardFrame{display:grid;grid-template-columns:minmax(0,490px) 20px;grid-template-rows:20px auto;max-width:510px;margin:12px auto}#devBoardFrame #devBoard{grid-column:1;grid-row:2;width:100%;margin:0;box-sizing:border-box}.dev-files{grid-column:1;display:grid;grid-template-columns:repeat(9,1fr);padding:0 8px;text-align:center}.dev-ranks{grid-column:2;grid-row:2;display:grid;grid-template-rows:repeat(9,1fr);padding:8px 0;text-align:center;align-items:center}.dev-files,.dev-ranks{font-size:13px;font-weight:bold}#lessonAdvice{padding:12px;border:2px solid #9a6500;background:#fff2c9;color:#593700;border-radius:8px}#lessonComplete{max-width:360px}#lessonComplete button{margin:6px}

/* A small idle sway, followed by a long rest; the thinking/departure cues stay distinct. */
#osesho:not(.thinking):not(.idea):not(.departing) .osesho-art img{transform-origin:50% 85%;animation:osesho-idle 14s 3s ease-in-out infinite}
@keyframes osesho-idle{0%,75%,100%{transform:rotate(0)}80%{transform:rotate(-4deg)}85%{transform:rotate(4deg)}90%{transform:rotate(-2deg)}95%{transform:rotate(2deg)}}
#rulesDialog ul,#rulesDialog ol{color:inherit}#rulesDialog .rules-basics{line-height:1.8;padding-left:24px}#rulesDialog .rules-basics li{margin-bottom:16px}#rulesDialog .rules-details{margin:16px 0}#openRulesSettings{margin-bottom:16px}
.collapse-square{box-shadow:inset 0 0 0 2px #a1bac8}.collapse-marker{pointer-events:none}.collapse-ash{position:absolute;inset:35% 16% 12%;z-index:6;background:radial-gradient(ellipse at 45% 60%,#ccd2d7cc 0 8%,#646d79bb 25%,#303c48aa 48%,transparent 70%);filter:drop-shadow(0 2px 2px #0007)}.collapse-ash:after{content:'';position:absolute;inset:10%;background:radial-gradient(circle at 20% 45%,#bac4ce 0 4%,transparent 6%),radial-gradient(circle at 65% 35%,#bac4ce 0 5%,transparent 7%),radial-gradient(circle at 45% 75%,#bac4ce 0 5%,transparent 7%)}.collapse-caption{position:absolute;bottom:2%;left:0;right:0;z-index:7;text-align:center;font-size:clamp(9px,1.2vw,12px);line-height:1.4;color:#f8fcff;text-shadow:0 1px 3px #000;background:#132a3899}.collapse-lightning{position:absolute;inset:-90% 18% 18%;z-index:10;background:#edfbff;clip-path:polygon(60% 0,25% 43%,49% 43%,15% 100%,84% 34%,58% 34%,90% 0);filter:drop-shadow(0 0 6px #9ee9ff);animation:collapse-strike .6s ease-out both}.paradox-breaking,.paradox-breaking.enemy{animation:collapse-burn .6s ease-out forwards}@keyframes collapse-strike{0%{opacity:0;transform:translateY(-25%)}12%,26%{opacity:1;transform:translateY(0)}18%,38%,100%{opacity:0}}@keyframes collapse-burn{0%{opacity:1;filter:brightness(1)}20%{opacity:1;filter:brightness(2)}65%{opacity:.5;filter:grayscale(1) brightness(.4)}100%{opacity:0;filter:grayscale(1);translate:0 14px;scale:.3}}
@media(prefers-reduced-motion:reduce){#osesho:not(.thinking):not(.idea):not(.departing) .osesho-art img{animation:none}.collapse-lightning{display:none}.paradox-breaking,.paradox-breaking.enemy{animation:none;opacity:0}}

#askOsesho{margin:8px 0;background:#fff3cf;color:#3f2a10;border-color:#b78a3d}#askOsesho[hidden]{display:none}.player>#osesho{width:min(160px,32vw);margin:4px auto}
#furigoma.osesho-intervention #tossResult{font-weight:900;background:linear-gradient(90deg,#ff4c68,#ffa928,#f6ef4d,#58dc84,#56b9ff,#a878ff,#ff4c68);background-size:300% 100%;background-clip:text;-webkit-background-clip:text;color:transparent;animation:paradox-rainbow 1s linear infinite}#furigoma.osesho-intervention .toss-piece{animation:toss-intervene var(--toss-intervention-duration,1.4s) ease-in-out both}@keyframes toss-intervene{0%,20%{transform:rotate(0)}45%{transform:rotate(-35deg) scale(1.1)}70%{transform:rotate(750deg) scale(1.25)}100%{transform:rotate(1080deg)}}
/* A rainbow halo, rays and a bright core make a new piece unmistakable. */
.paradox-spawn-glow{position:absolute;inset:-65%;pointer-events:none;z-index:8;border-radius:50%;opacity:0;background:radial-gradient(circle,#fff 0 10%,#fff0 44%),conic-gradient(#ff4268,#ffe85b,#66ffb1,#66dcff,#a791ff,#ff76cf,#ff4268);filter:drop-shadow(0 0 14px #d6faff);mix-blend-mode:screen}
.paradox-spawn-glow::before,.paradox-spawn-glow::after{content:"";position:absolute;inset:10%;border:3px solid #fff9;border-radius:50%;box-shadow:0 0 20px #fff,0 0 35px #abf}
.paradox-spawn-glow::after{inset:-15%;border:0;background:repeating-conic-gradient(#fff9 0deg 2deg,#fff0 2deg 30deg);mask-image:radial-gradient(circle,transparent 25%,#000 45%,transparent 73%)}
.paradox-spawn-glow.arriving{animation:spawn-arrival 1.2s ease-out both}
.paradox-spawn-cell>.piece{animation:spawn-piece-arrival 1.2s ease-out both}
@keyframes spawn-arrival{0%{opacity:0;transform:scale(.2) rotate(-50deg)}15%{opacity:1;transform:scale(1.05) rotate(0deg)}60%{opacity:.9;transform:scale(1.3) rotate(80deg)}100%{opacity:0;transform:scale(1.6) rotate(150deg)}}
@keyframes spawn-piece-arrival{0%{filter:brightness(4) drop-shadow(0 0 14px #fff)}25%{filter:brightness(1.8) drop-shadow(0 0 12px #aaffef)}65%{filter:brightness(1.3) drop-shadow(0 0 12px #ff9cf3)}100%{filter:none}}
@media(prefers-reduced-motion:reduce){.paradox-spawn-glow.arriving,.paradox-spawn-cell>.piece,#furigoma.osesho-intervention #tossResult,#furigoma.osesho-intervention .toss-piece{animation:none}}

.rules-tagline{line-height:1.9}.rules-tutorial-call{padding:16px;border-radius:12px;background:#153e39;color:#f7eddc;display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}.rules-card{margin-top:18px;padding:16px;border:1px solid #173d3938;border-radius:12px}.rules-card h3{margin-top:0}.rules-card li{margin-bottom:12px}.rules-warning{color:#b32626}.judge-slider output{font-weight:700}

.lesson-complete-actions{display:flex;justify-content:space-between;gap:12px;margin-top:12px}.lesson-complete-actions button{flex:1}.tutorial-exit{display:block;margin:12px 0}.tutorial-mode .dev-collapse-setting{display:none}.dev-collapse-setting{display:block;margin:12px 0}
#devBoard .tutorial-target{outline:3px dashed #fff19b;outline-offset:-4px;z-index:3}#devBoard .tutorial-target::before{content:'ここ';position:absolute;right:1px;bottom:1px;background:#fff19b;color:#163d30;font:700 10px sans-serif;padding:1px 3px;border-radius:2px;z-index:4}.tutorial-arrow{position:absolute;inset:0;pointer-events:none;z-index:5}.tutorial-arrow svg{display:block;width:100%;height:100%;filter:drop-shadow(0 1px 2px #0008)}
#tutorialLesson #lessonAdvice{margin:18px 0;padding:16px;border:3px solid #d69d36;background:#102e29;border-radius:8px;box-shadow:0 0 16px #e4b84b66;font-size:clamp(19px,3vw,25px);line-height:1.55}#lessonAdvice strong{display:block;color:#ffe785;background:linear-gradient(100deg,#ffabac,#ffe591,#adffb5,#9ee9ff,#cdb0ff,#ffabac);background-size:200% 100%;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:tutorial-advice-rainbow 3s linear infinite;font-weight:900}@keyframes tutorial-advice-rainbow{to{background-position:200% 0}}@media(prefers-reduced-motion:reduce){#lessonAdvice strong{animation:none}}
.tutorial-arrow,.tutorial-arrow svg{overflow:visible}.tutorial-mode #devHand0 .tutorial-hint{box-shadow:0 0 0 3px #fff19b,0 0 16px #fff19b99}
.collapse-lightning{background:#eaff00;filter:drop-shadow(0 0 5px #f3ff00) drop-shadow(0 0 12px #79ff00);animation-duration:1.2s}.paradox-breaking,.paradox-breaking.enemy{animation-duration:1.2s}

#furigoma.toss-settled .toss-piece{animation:none}#closeToss:disabled{opacity:.45;cursor:wait}
/* The ordinary side is the centerpiece of the toss, before any divine intervention. */
.toss-side{position:relative;isolation:isolate;margin:12px 0 22px;font-family:serif;font-size:clamp(72px,17vw,120px);font-weight:900;line-height:1.12;letter-spacing:.12em;color:#ffe1a2;text-shadow:0 3px 0 #805525,0 0 30px #efb95d66;animation:toss-side-reveal .35s ease-out both}
.toss-side-label{display:block;font:inherit}.toss-side-shard{position:absolute;inset:0;display:none;clip-path:polygon(calc(var(--shard)*12.5%) 0,calc((var(--shard) + 1)*12.5%) 0,calc((var(--shard) + 1)*12.5%) 100%,calc(var(--shard)*12.5%) 100%)}
#furigoma.toss-shattering .toss-side-label{visibility:hidden}#furigoma.toss-shattering .toss-side-shard{display:block;animation:toss-side-shatter var(--toss-shatter-duration,.65s) cubic-bezier(.2,.75,.4,1) both}
@keyframes toss-side-reveal{from{opacity:0;transform:scale(1.35)}to{opacity:1;transform:scale(1)}}
@keyframes toss-side-shatter{0%{opacity:1;transform:translate(0,0) rotate(0)}20%{opacity:1}100%{opacity:0;transform:translate(var(--fly-x),var(--fly-y)) rotate(var(--spin)) scale(.7)}}
@media(prefers-reduced-motion:reduce){.toss-side,#furigoma.toss-shattering .toss-side-shard{animation:none}#furigoma.toss-shattering .toss-side-label{visibility:visible;opacity:.25}#furigoma.toss-shattering .toss-side-shard{display:none}}
.toss-cutin{position:absolute;z-index:2;left:50%;top:50%;width:100vw;height:clamp(180px,24vw,290px);transform:translate(-50%,-50%);background:linear-gradient(115deg,#071b26 4%,#153f63 36%,#4b2475 65%,#091d30 95%);border-block:3px solid #b9f5ff;box-shadow:0 0 28px #7edbff99,inset 0 0 50px #4bcbff33;overflow:hidden;pointer-events:none;animation:toss-cutin var(--toss-cutin-duration,1s) cubic-bezier(.16,.7,.28,1) both}
.toss-cutin[hidden]{display:none}.toss-cutin:before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(-12deg,transparent 0 30px,#b4efff24 31px 33px,transparent 34px 70px)}
html:has(.toss-cutin:not([hidden])){overflow-x:clip}
.toss-cutin-inner{position:relative;display:flex;justify-content:center;align-items:center;gap:clamp(16px,5vw,80px);height:100%;padding:8px 18px}.toss-cutin img{height:100%;width:auto;max-width:45vw;object-fit:contain;mix-blend-mode:screen;filter:drop-shadow(0 0 12px #a7f2ff);transform:rotate(-9deg) scale(1.04)}
@keyframes toss-cutin{0%{opacity:0;transform:translate(-150%,-50%) skewX(-10deg)}18%{opacity:1;transform:translate(-50%,-50%) skewX(0)}78%{opacity:1;transform:translate(-50%,-50%)}100%{opacity:0;transform:translate(50%,-50%) skewX(-8deg)}}
@media(prefers-reduced-motion:reduce){.toss-cutin{animation:none}.toss-cutin img{transform:none}}

/* Beginner guides are independent of the live game board. */
.rules-heading,.guide-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.rules-heading h2,.guide-heading h2{margin:0}
.beginner-links{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;margin-left:auto}
.beginner-links button{font-size:14px;padding:8px 10px;margin:0}
#beginnerGuide{width:min(920px,calc(100% - 24px));max-width:920px;max-height:90dvh;padding:0;overflow:hidden}
.guide-heading{padding:18px 22px;border-bottom:1px solid #ffffff30;background:#193b34}
.guide-heading button{margin:0;font-size:14px;flex-shrink:0}
#beginnerBody{padding:0 22px 22px;overflow-y:auto;max-height:calc(90dvh - 100px);overscroll-behavior:contain;line-height:1.8}
.guide-card{border:1px solid #ffffff30;border-radius:8px;padding:16px;margin-top:18px;background:#15342e}
.guide-card h3{margin:0 0 10px;color:#f3ca87;font-size:19px}.guide-card p{margin:8px 0}
.guide-variant{border-color:#d4ad6c}.guide-examples,.guide-pieces{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.guide-examples figure,.guide-piece{margin:0;min-width:0;padding:12px;border-radius:6px;background:#0c2723}
.guide-examples figcaption{font-size:14px}.guide-examples figcaption strong{display:block;color:#f3ca87}
.guide-piece h4{margin:0;text-align:center;font-size:17px;color:#f3ca87}.guide-piece p{font-size:14px;line-height:1.6}
.guide-board{display:block;width:100%;max-width:190px;margin:12px auto;background:#e3c28d;border-radius:3px}
.guide-grid{stroke:#735532;stroke-width:1;fill:none}.guide-disc{stroke:#302f24;stroke-width:1.5}.guide-black{fill:#17201c}.guide-white{fill:#fffdf1}.guide-new{fill:none;stroke:#9d4e0e;stroke-width:3}
.guide-arrow{stroke:#194d3d;stroke-width:3;fill:#194d3d}.guide-ray{stroke:#91500d;fill:#91500d}.guide-arrow path{fill:none}.guide-arrow polygon{stroke:none}
.guide-piece-shape{fill:#ffecb7;stroke:#735532;stroke-width:1.5}.guide-piece-name{fill:#252017;font-size:13px;font-family:serif;font-weight:bold}
@media(min-width:760px){.guide-pieces{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:480px){.rules-heading{align-items:flex-start}.beginner-links{width:100%;justify-content:flex-start;margin-left:0}.guide-heading{padding:14px}.guide-heading h2{font-size:20px}#beginnerBody{padding:0 12px 16px;max-height:calc(90dvh - 120px)}.guide-card{padding:12px}.guide-examples{grid-template-columns:1fr}.guide-pieces{gap:8px}.guide-piece{padding:8px}.guide-piece h4{font-size:15px}}
#beginnerGuide{background:#112c2b;color:#ebeee6}#beginnerGuide h2,#beginnerGuide p,#beginnerGuide figcaption{color:inherit}

/* Credits share the existing settings dialog without extra network requests. */
.settings-pages{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}.settings-pages button{margin:0}#creditsDialog{width:480px;max-height:85dvh;overflow:auto}#creditsDialog h2{margin:4px 0 24px}#creditsDialog h3{font-size:15px;margin:20px 0 8px}#creditsDialog ul{list-style:none;padding:0;margin:0;color:inherit;display:flex;flex-wrap:wrap;gap:8px 20px}#creditsDialog a{color:#194e40;text-underline-offset:4px}#creditsDialog li{margin:0}.credits-kicker{letter-spacing:.2em;font-size:11px;margin:0;color:#586a61}.credits-you{font-size:24px;font-weight:600;border-top:1px solid #243b3226;padding-top:20px;margin:24px 0}

/* The helper flies between its opponent seat and the sidebar when asked. */
#osesho.helper-travelling{transform-origin:0 0;z-index:15;pointer-events:none}
#askOsesho{max-width:100%;line-height:1.65;white-space:normal}
#devAccessForm label{display:block;margin-bottom:8px}
#devAccessPassword{display:block;width:100%;font:inherit;padding:10px;border:1px solid #8b9b90;border-radius:4px;background:#fff;color:#243b32}
#devAccessError{min-height:1.5em;color:#a33228;font-size:14px}


/* Preview-only boxes: no ad scripts, media, refresh timers, or extra requests. */
.ad-placeholder{display:none}
@media(min-width:1880px){
 .ad-placeholder{display:grid;place-items:center;position:fixed;top:128px;width:160px;height:min(600px,calc(100dvh - 152px));background:#e4e8e2;color:#65736a;border:1px solid #9ba99f;pointer-events:none;text-align:center;z-index:1}
 .ad-placeholder-left{left:8px}.ad-placeholder-right{right:8px}
 .ad-placeholder-label{position:absolute;top:12px;left:0;right:0;font-size:9px;letter-spacing:.16em}
 .ad-placeholder strong,.ad-placeholder div span,.ad-placeholder small{display:block}
 .ad-placeholder strong{font-size:15px;font-weight:500}
 .ad-placeholder div span{font-size:13px;margin:12px 0 7px;font-variant-numeric:tabular-nums}
 .ad-placeholder small{font-size:11px;color:#849087}
}

.interstitial-test{width:min(720px,calc(100vw - 40px));min-height:340px;text-align:center;padding:36px;background:#e4e8e2;color:#243b32;border:1px solid #8b9b90;border-radius:4px}
.interstitial-test::backdrop{background:rgba(0,0,0,.75)}
.interstitial-test>p:first-child{font-size:11px;letter-spacing:.15em}
.interstitial-test h2{margin:65px 0 16px}
.interstitial-test button{margin-top:40px;min-width:210px}