:root{--ink:#211c2b;--cream:#f5eedb;--purple:#6d38d1;--hot:#ff5a54;--lime:#d9ff5b;--panel:#fffaf0;--muted:#716b78;font-family:"Chakra Petch","Kanit",sans-serif;color:var(--ink)}
*{box-sizing:border-box}body{margin:0;min-height:100vh;background:#e8dfc8;background-image:linear-gradient(90deg,rgba(73,50,91,.045) 1px,transparent 1px),linear-gradient(rgba(73,50,91,.045) 1px,transparent 1px);background-size:28px 28px;overflow-x:hidden}.noise{position:fixed;inset:0;pointer-events:none;opacity:.28;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.06'/%3E%3C/svg%3E")}.app{width:min(1440px,100%);margin:auto;padding:18px 26px 28px}.topbar{height:76px;display:flex;align-items:center;justify-content:space-between;border-bottom:2px solid rgba(33,28,43,.15)}.back,.ghost,.action,.power-btn{border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);background:var(--panel);color:var(--ink);cursor:pointer;font:700 14px inherit;transition:.15s}.back{display:grid;place-items:center;width:42px;height:42px;text-decoration:none;font-size:24px}.back:hover,.ghost:hover,.action:hover{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}.brand{display:flex;align-items:center;gap:12px}.brand-icon{display:grid;place-items:center;width:50px;height:50px;background:var(--lime);border:2px solid var(--ink);transform:rotate(-5deg);font:42px Georgia}.brand h1{font:800 28px "Kanit";margin:0;line-height:1}.brand p{margin:4px 0 0;font-size:10px;letter-spacing:2px;font-weight:700}.ghost{padding:11px 16px}.arena{display:grid;grid-template-columns:240px minmax(480px,680px) 260px;justify-content:center;gap:22px;padding-top:22px}.panel{background:rgba(255,250,240,.82);border:2px solid var(--ink);box-shadow:6px 6px 0 rgba(33,28,43,.16);padding:16px;height:max-content}.turn-card{background:var(--purple);color:#fff;padding:15px;border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);transform:rotate(-1deg)}.turn-card span,.turn-card strong{display:block}.eyebrow{font-size:10px;letter-spacing:2px;text-transform:uppercase;opacity:.7}.turn-card strong{font:800 23px "Kanit"}.turn-card #turnSub{font-size:10px;margin-top:4px}.chaos-meter{margin:23px 0}.meter-head{display:flex;justify-content:space-between;font-size:12px;font-weight:700}.meter{height:13px;margin:7px 0;background:#d8d0c0;border:2px solid var(--ink);overflow:hidden}.meter i{display:block;height:100%;background:linear-gradient(90deg,var(--lime),#ffdf4f,var(--hot));transition:width .3s}.chaos-meter small{color:var(--muted);font-size:9px}.section-title{display:flex;align-items:center;justify-content:space-between;margin:20px 0 9px;font-size:11px;font-weight:800;letter-spacing:.8px}.section-title b{color:var(--hot)}.rule-card{display:flex;gap:10px;padding:12px;background:#fff;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--hot)}.rule-card.pop{animation:pop .25s}.rule-icon{font-size:27px}.rule-card strong{font:700 14px "Kanit"}.rule-card p{margin:2px 0 0;color:var(--muted);font-size:10px;line-height:1.45}.combo-pips{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}.combo-pips i{height:10px;border:2px solid var(--ink);background:#d8d0c0}.combo-pips i.on{background:var(--hot)}.power-btn{display:flex;align-items:center;width:100%;gap:10px;margin-top:12px;padding:10px;background:var(--lime);text-align:left}.power-btn>span{font-size:25px}.power-btn b,.power-btn small{display:block}.power-btn small{font-size:9px}.power-btn:disabled{filter:grayscale(1);opacity:.45;cursor:not-allowed;box-shadow:none}.board-zone{min-width:0}.ribbon{position:relative;z-index:2;width:max-content;max-width:90%;margin:0 auto -8px;padding:7px 22px;background:var(--hot);color:white;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);font-size:12px;font-weight:800;transform:rotate(-1deg)}.board-frame{position:relative;padding:12px;background:#3c254f;border:3px solid var(--ink);box-shadow:10px 10px 0 rgba(33,28,43,.22)}.board{display:grid;grid-template-columns:repeat(8,1fr);aspect-ratio:1;border:2px solid var(--ink)}.square{position:relative;display:grid;place-items:center;min-width:0;padding:0;border:0;cursor:pointer;background:#eadfbf}.square.dark{background:#9167c9}.square:hover{filter:brightness(1.08)}.square.selected{background:var(--lime)!important;box-shadow:inset 0 0 0 4px var(--ink)}.square.legal:after,.square.capture:after{content:"";position:absolute;width:20%;aspect-ratio:1;border-radius:50%;background:rgba(33,28,43,.5)}.square.capture:after{width:72%;background:transparent;border:5px solid var(--hot);animation:pulse 1s infinite}.piece{position:relative;z-index:1;font:clamp(32px,5.7vw,64px) Georgia;line-height:1;transition:.15s;filter:drop-shadow(2px 3px 0 rgba(33,28,43,.24))}.piece.w{color:#fff7d8;-webkit-text-stroke:1.5px var(--ink)}.piece.b{color:#21142d;-webkit-text-stroke:1px #ab82dc}.square:hover .piece{transform:translateY(-3px) rotate(3deg)}.rank,.file{position:absolute;z-index:3;font-size:9px;font-weight:800;opacity:.55}.rank{top:3px;left:4px}.file{bottom:3px;right:4px}.square.boom{animation:boom .45s}.board-footer{display:flex;justify-content:center;gap:10px;margin-top:16px}.action{padding:10px 14px}.action small{display:block;font-size:8px;color:var(--muted)}.action:disabled{opacity:.4;cursor:not-allowed}.versus{display:grid;grid-template-columns:42px 1fr 30px;gap:10px;align-items:center;padding:10px 0;border-bottom:1px dashed #aaa}.versus.you{border:0}.avatar{display:grid;place-items:center;width:40px;height:40px;background:var(--lime);border:2px solid var(--ink);font:30px Georgia}.avatar.bot{background:#aa80df}.versus span,.versus strong{display:block}.versus span{font-size:9px;color:var(--muted)}.versus strong{font:600 12px "Kanit"}.versus>b{font-size:22px;text-align:center}.feed{display:grid;gap:8px;min-height:220px}.feed-item{display:flex;gap:9px;padding:8px;background:rgba(255,255,255,.65);border-left:3px solid var(--purple);animation:slide .25s}.feed-item>span{font-size:19px}.feed-item b,.feed-item small{display:block}.feed-item b{font-size:10px}.feed-item small{font-size:8px;color:var(--muted);margin-top:2px}.goal-card{margin-top:15px;padding:12px;background:#28202e;color:#fff;border:2px solid var(--ink);transform:rotate(1deg)}.goal-card span{font:700 13px "Kanit"}.goal-card p{font-size:9px;line-height:1.55;margin:5px 0 0;color:#ddd}.goal-card b{color:var(--lime)}dialog{width:min(500px,calc(100% - 30px));border:3px solid var(--ink);box-shadow:9px 9px 0 var(--purple);background:var(--cream);padding:28px}dialog::backdrop{background:rgba(25,18,32,.72);backdrop-filter:blur(3px)}dialog h2{font:800 30px "Kanit";margin:4px 0 18px}.modal-kicker{font-size:10px;color:var(--hot);font-weight:800;letter-spacing:2px}.close{position:absolute;right:12px;top:9px;border:0;background:none;font-size:30px;cursor:pointer}dialog li{margin:11px 0;font-size:13px;line-height:1.55}.toast{position:fixed;z-index:20;left:50%;bottom:28px;transform:translate(-50%,100px) rotate(-2deg);padding:12px 22px;background:var(--lime);border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);font-weight:800;opacity:0;transition:.25s}.toast.show{opacity:1;transform:translate(-50%,0) rotate(-2deg)}.quake{animation:quake .45s}
@keyframes pop{50%{transform:scale(1.04) rotate(1deg)}}@keyframes pulse{50%{transform:scale(.84)}}@keyframes slide{from{opacity:0;transform:translateX(20px)}}@keyframes boom{50%{transform:scale(1.2);filter:brightness(1.8)}}@keyframes quake{25%{transform:translateX(5px)}50%{transform:translateX(-5px)}75%{transform:translateX(3px)}}
@media(max-width:1050px){.arena{grid-template-columns:minmax(470px,650px) 260px}.left-panel{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;align-items:start}.left-panel .chaos-meter{margin:5px 0}.left-panel .section-title{margin-top:0}.board-zone{grid-row:2}.right-panel{grid-row:2}.rule-card{grid-column:2}.left-panel>.section-title:nth-of-type(2),.combo-pips,.power-btn{grid-column:3}.combo-pips{margin-top:-35px}.power-btn{margin-top:-12px}}
@media(max-width:760px){.app{padding:10px}.topbar{height:62px}.brand p,.ghost{display:none}.brand h1{font-size:22px}.arena{grid-template-columns:1fr;gap:14px}.left-panel{display:block;order:2}.board-zone{grid-row:auto;order:1}.right-panel{grid-row:auto;order:3}.left-panel .chaos-meter{margin:20px 0}.left-panel .section-title{margin-top:18px}.left-panel>.section-title:nth-of-type(2),.combo-pips,.power-btn{margin:initial}.power-btn{margin-top:12px}.board-frame{padding:6px}.piece{font-size:clamp(30px,11vw,60px)}.ribbon{font-size:9px}.right-panel{display:grid;grid-template-columns:1fr 1fr;gap:8px}.right-panel .section-title,.feed,.goal-card{grid-column:1/-1}.feed{min-height:auto}.board-footer{flex-wrap:wrap}}

/* Fixed arena: gameplay never changes the board or page dimensions. */
html,body{width:100%;height:100%;overflow:hidden}
body{min-height:0}
.app{height:100dvh;display:flex;flex-direction:column;overflow:hidden;padding:12px 20px}
.topbar{flex:0 0 64px}
.arena{flex:1;min-height:0;padding-top:10px;overflow:hidden;align-items:start;grid-template-columns:240px minmax(420px,calc(100dvh - 174px)) 260px}
.left-panel,.right-panel{height:100%;overflow:hidden}
.right-panel{display:flex;flex-direction:column}
.feed{height:220px;min-height:220px;overflow:hidden}
.board-zone{width:100%;height:100%;min-height:0;display:grid;grid-template-rows:28px minmax(0,1fr) 46px;justify-items:center;align-items:start}
.ribbon{height:30px;max-width:92%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.board-frame{width:min(100%,calc(100dvh - 174px));height:auto;max-height:100%;aspect-ratio:1;flex:none}
.board{width:100%;height:100%;aspect-ratio:auto;grid-template-rows:repeat(8,minmax(0,1fr));overflow:hidden;contain:strict}
.square{width:100%;height:100%;min-height:0;contain:layout paint style}
.piece{width:100%;height:100%;display:grid;place-items:center}
.board-footer{height:46px;margin-top:6px;align-items:flex-start}

@media(max-width:1100px){
  .arena{grid-template-columns:minmax(420px,calc(100dvh - 174px)) 240px;grid-template-rows:1fr}
  .board-zone{grid-column:1;grid-row:1}
  .left-panel{grid-column:2;grid-row:1;display:block;height:100%;overflow-y:auto;scrollbar-gutter:stable}
  .left-panel .chaos-meter{margin:20px 0}
  .left-panel .section-title{margin-top:18px}
  .left-panel>.section-title:nth-of-type(2),.combo-pips,.power-btn{margin:initial}
  .power-btn{margin-top:12px}
  .right-panel{display:none}
}

@media(max-width:760px){
  .app{height:100dvh;padding:8px}
  .topbar{flex-basis:58px}
  .arena{display:block;padding-top:8px;min-height:0}
  .board-zone{height:100%;grid-template-rows:26px minmax(0,1fr) 48px}
  .board-frame{width:min(calc(100vw - 16px),calc(100dvh - 156px));height:min(calc(100vw - 16px),calc(100dvh - 156px))}
  .left-panel,.right-panel{display:none}
  .ribbon{height:28px}
  .board-footer{height:48px;margin-top:6px}
  .action{padding:7px 10px;font-size:11px}
}

/* Hand-drawn SVG icon system */
.game-icon{display:inline-grid;place-items:center;width:1.5em;height:1.5em;flex:0 0 auto;vertical-align:middle;color:currentColor}
.game-icon svg{display:block;width:100%;height:100%;overflow:visible}
.game-icon svg *{vector-effect:non-scaling-stroke}
.rule-icon{width:34px;height:34px;color:var(--purple)}
.power-btn>.game-icon{width:30px;height:30px}
.action>.game-icon{width:17px;height:17px;margin-right:3px}
.goal-card .game-icon{width:17px;height:17px;color:var(--lime)}
.feed-item>.game-icon{width:24px;height:24px;color:var(--purple)}

/* Main menu */
.is-hidden{display:none!important}
.menu-screen{position:fixed;inset:0;z-index:40;display:grid;place-items:center;overflow:hidden;background:#eee5cf;color:var(--ink)}
.menu-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(33,28,43,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(33,28,43,.07) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(to bottom,#000 55%,transparent)}
.menu-screen:before,.menu-screen:after{content:"";position:absolute;border:3px solid var(--ink);background:var(--lime);transform:rotate(-8deg)}
.menu-screen:before{width:220px;height:220px;left:-100px;bottom:-85px}.menu-screen:after{width:150px;height:150px;right:-62px;top:22%;background:#fffaf0;transform:rotate(12deg)}
.menu-back{position:absolute;left:26px;top:24px;z-index:2;width:46px;height:46px;display:grid;place-items:center;border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);background:#fffaf0;color:var(--ink);text-decoration:none;font-size:23px}
.language-picker{position:absolute;right:28px;top:24px;z-index:2;display:flex;align-items:center;gap:6px;padding:6px;background:#fffaf0;border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink)}
.language-picker>span{padding:0 8px;color:var(--muted);font-size:9px;font-weight:800;letter-spacing:1px}.language-button{min-width:42px;padding:7px;border:0;background:transparent;color:var(--ink);font:800 11px inherit;cursor:pointer}.language-button.active{background:var(--ink);color:var(--lime)}
.menu-hero{position:relative;z-index:1;width:min(700px,calc(100% - 40px));text-align:center}.menu-knight{position:relative;width:116px;height:116px;margin:0 auto 18px;display:grid;place-items:center;background:var(--lime);border:3px solid var(--ink);box-shadow:8px 8px 0 var(--ink);transform:rotate(-4deg)}.menu-knight span{font:88px Georgia,serif;line-height:1}.menu-knight i{position:absolute;right:-15px;top:-13px;width:22px;height:22px;background:var(--hot);border:3px solid var(--ink);transform:rotate(14deg)}
.menu-kicker{margin:0 0 5px;font-size:11px;font-weight:800;letter-spacing:3px}.menu-hero h1{margin:0;font:800 clamp(54px,8vw,92px)/.95 "Kanit",sans-serif;letter-spacing:-4px}.menu-intro{margin:13px 0 25px;color:var(--muted);font-size:14px}.menu-actions{width:min(460px,100%);margin:auto;display:grid;gap:10px}.menu-action{position:relative;min-height:66px;display:grid;grid-template-columns:46px 1fr;grid-template-rows:1fr 1fr;align-items:end;padding:10px 16px;border:2px solid var(--ink);box-shadow:5px 5px 0 var(--ink);background:#fffaf0;color:var(--ink);text-align:left;cursor:pointer;transition:.15s}.menu-action:hover{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--ink)}.menu-action.primary{background:var(--lime)}.menu-action .game-icon{grid-row:1/3;width:30px;height:30px;align-self:center}.menu-action b{font:800 17px "Kanit"}.menu-action small{align-self:start;color:var(--muted);font-size:9px}.menu-foot{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);display:flex;align-items:center;gap:8px;font-size:9px;letter-spacing:1px}.menu-foot span{font-size:20px;font-weight:800;color:var(--purple)}.menu-foot i{width:35px;height:1px;background:var(--ink);margin:0 10px}

/* Updated game controls */
.header-tools{display:flex;align-items:center;gap:8px}.icon-tool{width:42px;height:42px;display:grid;place-items:center;border:2px solid var(--ink);background:var(--panel);box-shadow:2px 2px 0 var(--ink);cursor:pointer}.icon-tool .game-icon{width:22px;height:22px}.icon-tool.muted{opacity:.45}.quick-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}.quick-actions .action{min-width:0;display:grid;grid-template-columns:22px 1fr;grid-template-rows:1fr 1fr;align-items:center;padding:8px;text-align:left}.quick-actions .game-icon{grid-row:1/3}.quick-actions b{font-size:10px}.quick-actions small{font-size:7px}.board-zone{grid-template-rows:28px minmax(0,1fr)}

/* Cinematic announcements */
.cinematic-overlay{position:fixed;inset:0;z-index:80;display:grid;place-items:center;pointer-events:none;visibility:hidden;opacity:0}.cinematic-overlay.active{visibility:visible;animation:overlayIn 1.05s ease both}.rule-reveal{background:rgba(33,28,43,.68);backdrop-filter:blur(3px)}.reveal-burst,.chaos-rays{position:absolute;width:680px;aspect-ratio:1;border-radius:50%;background:repeating-conic-gradient(from 8deg,var(--lime) 0 7deg,transparent 7deg 15deg);animation:spinBurst 5s linear infinite}.reveal-card{position:relative;width:min(440px,calc(100% - 36px));display:grid;justify-items:center;gap:4px;padding:24px;background:#fffaf0;border:3px solid var(--ink);box-shadow:10px 10px 0 var(--hot);transform:rotate(-2deg)}.reveal-card>.game-icon{width:62px;height:62px;color:var(--purple)}.reveal-card small{font-weight:800;letter-spacing:3px;color:var(--muted)}.reveal-card strong{font:800 clamp(26px,5vw,42px) "Kanit";text-align:center}.reveal-side{position:absolute;left:50%;top:-17px;transform:translateX(-50%) rotate(1deg);min-width:180px;padding:7px 15px;background:var(--purple);border:2px solid var(--ink);color:#fff;text-align:center;font-size:11px;font-weight:800;letter-spacing:1px}
.chaos-reveal{background:rgba(24,12,35,.88)}.chaos-rays{background:repeating-conic-gradient(var(--hot) 0 5deg,transparent 5deg 13deg);animation:spinBurst 3s linear infinite reverse}.chaos-copy{position:relative;display:grid;justify-items:center;text-align:center;color:#fff;animation:chaosPunch .75s cubic-bezier(.2,1.5,.4,1)}.chaos-copy>.game-icon{width:90px;height:90px;color:var(--lime);filter:drop-shadow(5px 5px 0 var(--hot))}.chaos-copy small{margin-top:10px;color:var(--lime);font-weight:800;letter-spacing:3px}.chaos-copy strong{font:800 clamp(38px,7vw,82px)/1 "Kanit";text-shadow:5px 5px 0 var(--purple)}.chaos-copy p{margin:8px 0;font-size:15px;font-weight:800;letter-spacing:2px}.coming-dialog{text-align:center}.coming-dialog>.game-icon{width:70px;height:70px;color:var(--purple)}.coming-dialog .menu-action{display:block;width:100%;min-height:45px;text-align:center}
@keyframes overlayIn{0%{opacity:0}12%,82%{opacity:1}100%{opacity:0}}@keyframes spinBurst{to{transform:rotate(360deg)}}@keyframes chaosPunch{0%{transform:scale(.2) rotate(-12deg)}55%{transform:scale(1.12) rotate(2deg)}100%{transform:scale(1)}}

@media(max-width:760px){.menu-hero{transform:scale(.92)}.menu-hero h1{font-size:52px}.menu-knight{width:90px;height:90px}.menu-knight span{font-size:68px}.menu-foot{display:none}.language-picker>span{display:none}.menu-back{left:12px;top:12px}.language-picker{right:12px;top:12px}.quick-actions{display:none}}

/* Non-blocking rule announcement */
.rule-card{position:relative;overflow:hidden;isolation:isolate;transition:border-color .15s,box-shadow .15s,background .15s}
.rule-owner{position:absolute;right:6px;top:5px;z-index:3;padding:3px 7px;border:1px solid currentColor;background:#fff;font-size:7px;font-weight:900;letter-spacing:.8px;opacity:0;transform:translateY(-8px)}
.rule-scan{position:absolute;z-index:-1;inset:-30% auto -30% -45%;width:35%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.8),transparent);transform:skewX(-16deg);opacity:0}
.rule-card.rule-player{border-color:#79a900;background:#f7ffda;box-shadow:4px 4px 0 #9bcf18}.rule-card.rule-player .rule-owner{color:#456400}
.rule-card.rule-opponent{border-color:#6d38d1;background:#f1eaff;box-shadow:4px 4px 0 #6d38d1}.rule-card.rule-opponent .rule-owner{color:#6d38d1}
.rule-card.rule-local{border-color:#e7433e;background:#fff3e8;box-shadow:4px 4px 0 #ff5a54}.rule-card.rule-local .rule-owner{color:#b52925}
.rule-card.rule-normal{border-color:#635b4e;background:#fffdf3;box-shadow:4px 4px 0 #b8ad95}.rule-card.rule-normal .rule-owner{color:#514a3f}.rule-card.rule-normal .rule-icon{color:#635b4e}
.rule-card.rule-announce{animation:inlineRulePop .82s cubic-bezier(.2,.9,.25,1)}.rule-card.rule-announce .rule-owner{animation:ownerDrop .82s ease both}.rule-card.rule-announce .rule-scan{animation:ruleScan .72s ease-out both}
@keyframes inlineRulePop{0%{transform:scale(.94) rotate(-1deg)}28%{transform:scale(1.035) rotate(.5deg)}100%{transform:scale(1)}}@keyframes ownerDrop{15%,80%{opacity:1;transform:translateY(0)}100%{opacity:.7;transform:translateY(0)}}@keyframes ruleScan{10%{opacity:0;left:-45%}35%{opacity:1}100%{opacity:0;left:115%}}

/* Ten distinct Unleash Chaos signatures */
.chaos-reveal{--power-color:var(--hot);--actor-color:var(--lime)}.chaos-reveal.actor-opponent{--actor-color:#b78cff}.chaos-reveal.actor-local{--actor-color:#fff3c4}.chaos-reveal .chaos-copy small{color:var(--actor-color)}.chaos-reveal .chaos-copy>.game-icon{color:var(--power-color)}.chaos-reveal .chaos-copy strong{text-shadow:5px 5px 0 color-mix(in srgb,var(--actor-color) 55%,#211c2b)}.chaos-reveal .chaos-rays{background:repeating-conic-gradient(var(--power-color) 0 5deg,transparent 5deg 13deg)}
.chaos-reveal.power-lightning{--power-color:#f5f257}.chaos-reveal.power-lightning .chaos-copy{animation:powerLightning .75s steps(2)}
.chaos-reveal.power-coupon{--power-color:#ff9f43}.chaos-reveal.power-coupon .chaos-copy{animation:powerCoupon .8s ease}
.chaos-reveal.power-knight{--power-color:#d9ff5b}.chaos-reveal.power-knight .chaos-copy{animation:powerKnight .8s cubic-bezier(.2,1.4,.4,1)}
.chaos-reveal.power-swap{--power-color:#63e6ff}.chaos-reveal.power-swap .chaos-copy{animation:powerSwap .8s ease}
.chaos-reveal.power-defect{--power-color:#ff6bb5}.chaos-reveal.power-defect .chaos-copy{animation:powerDefect .8s ease}
.chaos-reveal.power-teleport{--power-color:#8e71ff}.chaos-reveal.power-teleport .chaos-copy{animation:powerTeleport .8s steps(4)}
.chaos-reveal.power-shield{--power-color:#70f0ae}.chaos-reveal.power-shield .chaos-copy{animation:powerShield .8s ease}
.chaos-reveal.power-clone{--power-color:#f6f0d2}.chaos-reveal.power-clone .chaos-copy{animation:powerClone .8s ease}
.chaos-reveal.power-promote{--power-color:#ffd44d}.chaos-reveal.power-promote .chaos-copy{animation:powerPromote .8s cubic-bezier(.15,1.4,.3,1)}
.chaos-reveal.power-gravity{--power-color:#ff5a54}.chaos-reveal.power-gravity .chaos-copy{animation:powerGravity .8s ease-in}
@keyframes powerLightning{0%,100%{transform:translate(0)}25%{transform:translate(-15px,8px) skewX(-8deg)}50%{transform:translate(14px,-8px) scale(1.12)}75%{transform:translate(-8px,-3px)}}
@keyframes powerCoupon{0%{transform:perspective(500px) rotateY(90deg)}55%{transform:perspective(500px) rotateY(-12deg) scale(1.1)}100%{transform:rotateY(0)}}
@keyframes powerKnight{0%{transform:translate(-55vw,20px) rotate(-12deg)}65%{transform:translate(20px,-18px) rotate(4deg)}100%{transform:translate(0)}}
@keyframes powerSwap{0%{transform:rotate(-180deg) scale(.35)}60%{transform:rotate(15deg) scale(1.12)}100%{transform:rotate(0)}}
@keyframes powerDefect{0%{filter:hue-rotate(0);transform:scale(.3)}50%{filter:hue-rotate(240deg);transform:scale(1.18) rotate(8deg)}100%{filter:hue-rotate(0);transform:scale(1)}}
@keyframes powerTeleport{0%{opacity:0;transform:scale(2)}25%{opacity:1;transform:scale(.5)}50%{opacity:0;transform:translateX(80px)}75%{opacity:1;transform:translateX(-30px)}100%{transform:none}}
@keyframes powerShield{0%{transform:scale(.2);filter:drop-shadow(0 0 0 var(--power-color))}60%{transform:scale(1.15);filter:drop-shadow(0 0 35px var(--power-color))}100%{transform:scale(1)}}
@keyframes powerClone{0%{opacity:0;transform:translateX(-90px)}40%{opacity:.5;text-shadow:60px 0 0 #fff,-60px 0 0 #fff}100%{opacity:1;transform:none;text-shadow:none}}
@keyframes powerPromote{0%{transform:translateY(70vh) scale(.5)}70%{transform:translateY(-15px) scale(1.15)}100%{transform:none}}
@keyframes powerGravity{0%{transform:scale(3) rotate(25deg);opacity:0}70%{transform:scale(.75) rotate(-5deg);opacity:1}100%{transform:scale(1)}}

/* Final match setup and readability pass */
.menu-back{width:auto;height:auto;left:24px;top:20px;border:0;box-shadow:none;background:transparent}.menu-back:hover{transform:scale(1.04)}.menu-back img{display:block;width:86px;height:auto;object-fit:contain;filter:drop-shadow(2px 3px 0 rgba(33,28,43,.14))}
.menu-foot{width:max-content;max-width:calc(100% - 30px);font-size:9px;color:var(--muted)}.menu-foot b{color:var(--ink);letter-spacing:1px}.menu-foot a{color:var(--purple);font-weight:800;text-decoration:none;letter-spacing:1px}.menu-foot a:hover{text-decoration:underline}.menu-foot i{width:46px}
.piece{font-family:"Segoe UI Symbol","Noto Sans Symbols 2","DejaVu Sans",serif;font-weight:400;-webkit-text-stroke:0!important;text-shadow:none}.piece.w{color:#fff;filter:drop-shadow(0 1px 1px rgba(0,0,0,.48))}.piece.b{color:#101010;filter:drop-shadow(0 1px 0 rgba(255,255,255,.2))}
.versus{grid-template-columns:42px minmax(0,1fr) 58px}.player-numbers{display:grid;justify-items:end;gap:2px}.player-numbers>b{font-size:20px}.player-clock{font-variant-numeric:tabular-nums}.player-numbers time{min-width:48px;padding:2px 4px;border:1px solid var(--ink);background:#fffaf0;font:800 10px "Chakra Petch";text-align:center}.player-numbers time.active{background:var(--lime);box-shadow:2px 2px 0 var(--ink)}.player-numbers time.warning{background:var(--hot);color:#fff}
.setup-dialog{width:min(520px,calc(100% - 26px));padding:25px;background:#eee5cf}.setup-dialog h2{margin:4px 0 20px;font:800 28px "Kanit"}.setup-group{margin-top:17px}.setup-group>label{display:block;margin-bottom:7px;font-size:9px;font-weight:900;letter-spacing:1.4px;color:var(--muted)}.setup-options{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.setup-options.two{grid-template-columns:1fr 1fr}.setup-options button{min-height:48px;border:2px solid var(--ink);background:#fffaf0;color:var(--ink);font:800 11px inherit;cursor:pointer}.setup-options button.active{background:var(--lime);box-shadow:3px 3px 0 var(--ink);transform:translate(-2px,-2px)}.setup-options em{font-style:normal}.setup-piece{display:block;font:28px Georgia}.setup-piece.white{color:#fff;-webkit-text-stroke:1.5px #000}.setup-piece.black{color:#222;-webkit-text-stroke:1.5px #000}.setup-start{width:100%;margin-top:22px;padding:13px;border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);background:var(--purple);color:#fff;font:800 14px inherit;cursor:pointer}.setup-start:hover{background:var(--lime);color:var(--ink)}
.chaos-reveal.active{animation:overlayIn 2.05s ease both}.chaos-copy{width:min(720px,calc(100% - 30px))}.chaos-copy p{margin:12px 0 6px;font-size:clamp(20px,3vw,30px);font-weight:900;letter-spacing:1px}.chaos-copy>b{display:block;max-width:620px;padding:10px 18px;border:2px solid currentColor;background:rgba(33,28,43,.72);color:#fff;font:700 clamp(14px,2vw,20px)/1.45 "Chakra Petch";letter-spacing:.3px}.chaos-copy>small{font-size:12px}
.normal-event{position:fixed;z-index:75;left:50%;top:18%;display:flex;align-items:center;gap:14px;width:min(390px,calc(100% - 30px));padding:14px 18px;border:2px solid var(--ink);box-shadow:5px 5px 0 rgba(33,28,43,.25);background:#fffaf0;color:var(--ink);opacity:0;pointer-events:none;transform:translate(-50%,-15px)}.normal-event>.game-icon{width:36px;height:36px;color:var(--muted)}.normal-event small,.normal-event strong,.normal-event p{display:block}.normal-event small{font-size:8px;letter-spacing:2px;color:var(--muted)}.normal-event strong{font:800 17px "Kanit"}.normal-event p{margin:1px 0 0;font-size:9px;color:var(--muted)}.normal-event.active{animation:normalMoment 1.5s ease both}@keyframes normalMoment{0%{opacity:0;transform:translate(-50%,-12px)}18%,78%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,5px)}}
@media(max-width:760px){.menu-back{left:12px;top:12px}.menu-back img{width:68px}.setup-dialog{padding:20px}.setup-options button{min-height:44px}.chaos-copy>b{font-size:13px}}

/* Promotion and unambiguous checkers-jump targets */
.promotion-dialog{width:min(500px,calc(100% - 26px));padding:24px;background:#eee5cf}.promotion-dialog h2{margin:5px 0 17px;font:800 24px "Kanit"}.promotion-options{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.promotion-options button{display:grid;place-items:center;gap:5px;padding:12px 5px;border:2px solid var(--ink);background:#fffaf0;color:var(--ink);cursor:pointer}.promotion-options button:hover{background:var(--lime);box-shadow:3px 3px 0 var(--ink);transform:translate(-2px,-2px)}.promotion-options span{font:42px "Segoe UI Symbol","Noto Sans Symbols 2",serif}.promotion-options b{font-size:9px}
.square.jump:after{content:"↟";position:absolute;z-index:4;display:grid;place-items:center;width:34%;height:34%;border:2px solid var(--ink);border-radius:50%;background:var(--lime);color:var(--ink);font:900 clamp(13px,2vw,20px) Arial;animation:pulse 1s infinite}.square.jump-target{box-shadow:inset 0 0 0 5px var(--hot)}.square.jump-target:before{content:"JUMP";position:absolute;z-index:4;top:3px;right:3px;padding:2px 3px;background:var(--hot);color:#fff;font-size:6px;font-weight:900;letter-spacing:.5px}

/* Creator credit — compact enough to stay outside gameplay. */
.game-credit{flex:0 0 24px;display:flex;align-items:flex-end;justify-content:center;gap:10px;padding-top:5px;color:var(--muted);font-size:8px;letter-spacing:1px;white-space:nowrap}.game-credit b{color:var(--ink)}.game-credit i{width:34px;height:1px;margin-bottom:4px;background:rgba(33,28,43,.35)}.game-credit a{color:var(--purple);font-weight:800;text-decoration:none}.game-credit a:hover{text-decoration:underline}

/* Purpose-built phone layout. Desktop rules above remain untouched. */
@media(max-width:760px){
  html,body{height:auto;min-height:100%;overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:none}
  body{padding-bottom:env(safe-area-inset-bottom)}
  .app{width:100%;height:auto;min-height:100dvh;overflow:visible;padding:8px max(8px,env(safe-area-inset-right)) 0 max(8px,env(safe-area-inset-left))}
  .topbar{flex:0 0 54px;height:54px;gap:8px;padding-bottom:6px}
  .back,.icon-tool{width:42px;height:42px;min-width:42px;touch-action:manipulation}
  .brand{min-width:0;gap:7px}.brand-icon{width:38px;height:38px;font-size:31px}.brand h1{font-size:18px;white-space:nowrap}.brand p,.ghost{display:none}
  .header-tools{gap:5px}
  .header-tools .ghost{display:grid;place-items:center;width:42px;height:42px;min-width:42px;padding:0;font-size:0;touch-action:manipulation}.header-tools .ghost:after{content:"?";font:900 18px "Chakra Petch"}
  .arena{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;min-height:0;padding:8px 0 12px;overflow:visible}
  .left-panel,.right-panel{display:contents}
  .turn-card{order:1;padding:10px 12px;transform:none;box-shadow:3px 3px 0 var(--ink)}.turn-card strong{font-size:19px}.turn-card #turnSub{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
  .right-panel>.versus{order:2;min-height:55px;margin:0;padding:7px 10px;border:2px solid var(--ink);background:rgba(255,250,240,.9)}
  .right-panel>.versus.you{margin-top:-10px;border-top:0}.avatar{width:35px;height:35px;font-size:25px}.versus{grid-template-columns:35px minmax(0,1fr) 58px}.versus strong{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
  .board-zone{order:3;width:100%;height:auto;display:grid;grid-template-rows:28px auto;overflow:visible}
  .board-frame{width:100%;height:auto;max-height:none;padding:5px;aspect-ratio:1;box-shadow:5px 5px 0 rgba(33,28,43,.22)}
  .board{width:100%;height:100%;aspect-ratio:1}.ribbon{width:auto;max-width:calc(100% - 20px);height:28px;padding:5px 10px;font-size:8px;text-align:center}
  .piece{font-size:clamp(29px,11.5vw,54px)}.square:hover{filter:none}.square:hover .piece{transform:none}.rank,.file{font-size:7px}.square.capture:after{border-width:3px}.square.selected{box-shadow:inset 0 0 0 3px var(--ink)}
  .chaos-meter{order:4;margin:2px 0 0;padding:11px 12px;border:2px solid var(--ink);background:rgba(255,250,240,.9)}.chaos-meter small{display:block;margin-top:4px}
  .left-panel>.section-title{margin:3px 0 -3px}.left-panel>.section-title:nth-of-type(3){order:5}.left-panel>.section-title:nth-of-type(4){order:7}
  #ruleCard{order:6;min-height:82px;padding:11px}.rule-card strong{font-size:14px}.rule-card p{padding-right:4px;font-size:10px}.rule-owner{font-size:6px}
  #comboPips{order:8}.combo-pips i{height:12px}
  #powerBtn{order:9;min-height:54px;margin:0;padding:10px 12px;touch-action:manipulation}
  .quick-actions{order:10;display:grid;grid-template-columns:1fr 1fr;margin:0}.quick-actions .action{min-height:50px;padding:7px;touch-action:manipulation}
  .right-panel>.section-title{order:11;margin:7px 0 -3px}.feed{order:12;height:auto;min-height:0;max-height:210px;overflow-y:auto;border:2px solid var(--ink);background:rgba(255,250,240,.72);scrollbar-width:thin}.feed-item{min-height:48px;padding:9px}.feed-item b{font-size:11px}.feed-item small{font-size:9px}
  .goal-card{order:13;margin:0;transform:none}.goal-card p{font-size:10px}
  .game-credit{order:14;min-height:54px;flex:0 0 auto;flex-wrap:wrap;align-content:center;align-items:center;gap:5px 8px;padding:13px 8px calc(13px + env(safe-area-inset-bottom));font-size:8px;white-space:normal;text-align:center}.game-credit i{width:22px;margin:0}
  dialog{max-height:calc(100dvh - 24px);overflow-y:auto;padding:20px;box-shadow:5px 5px 0 var(--purple)}dialog h2{font-size:24px}.setup-options button{min-height:48px}.promotion-options{gap:5px}.promotion-options button{min-width:0;padding:10px 2px}.promotion-options span{font-size:34px}
  .toast{bottom:calc(14px + env(safe-area-inset-bottom));width:max-content;max-width:calc(100% - 24px);padding:10px 14px;text-align:center;font-size:12px}
  .normal-event{top:72px;width:calc(100% - 24px)}
  .chaos-copy{padding:0 14px}.chaos-copy strong{font-size:clamp(31px,11vw,54px)}.chaos-copy p{font-size:18px}.chaos-copy>b{font-size:13px}
  .menu-screen{min-height:100dvh;overflow-y:auto;padding:78px 14px 62px}.menu-hero{width:100%;transform:none}.menu-knight{width:76px;height:76px;margin-bottom:12px}.menu-knight span{font-size:57px}.menu-hero h1{font-size:clamp(42px,14vw,58px);letter-spacing:-2px}.menu-kicker{font-size:8px;letter-spacing:1.5px}.menu-intro{margin:9px 0 16px;font-size:11px}.menu-actions{gap:8px}.menu-action{min-height:58px;padding:8px 12px}.menu-screen .menu-foot{display:flex;bottom:10px;width:calc(100% - 24px);justify-content:center;gap:6px;font-size:7px;white-space:normal}.menu-screen .menu-foot i{width:18px;margin:0 3px}
}

@media(max-width:380px){.brand h1{font-size:16px}.brand-icon{display:none}.piece{font-size:11vw}.menu-action small{font-size:8px}.game-credit i{display:none}}
@media(hover:none){.menu-action:hover,.back:hover,.ghost:hover,.action:hover{transform:none;box-shadow:initial}}

/* iOS-safe single-screen game HUD. Avoid display:contents because Safari can
   lose the intrinsically-sized board when its children participate in a grid. */
@media(max-width:760px){
  html,body{width:100%;height:100dvh;min-height:100dvh;overflow:hidden;position:fixed;inset:0}
  body{padding:0}
  .game-screen.app{height:100dvh;min-height:0;display:grid;grid-template-rows:54px minmax(0,1fr) 24px;overflow:hidden;padding:6px 8px 0}
  .topbar{height:54px;min-height:0;padding:0 0 6px}
  .arena{height:100%;min-height:0;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr);align-content:start;gap:7px;overflow:hidden;padding:6px 0}

  .board-zone{grid-column:1;grid-row:1;width:100%;height:auto;min-height:0;display:grid;grid-template-rows:24px auto;align-content:start;justify-items:center;overflow:visible}
  .ribbon{height:25px;min-height:25px;max-width:calc(100% - 18px);margin:0 auto -2px;padding:4px 9px;font-size:8px;line-height:14px}
  .board-frame{--mobile-board:min(calc(100vw - 16px),calc(100dvh - 418px));width:var(--mobile-board);height:var(--mobile-board);min-width:230px;min-height:230px;max-width:100%;max-height:none;padding:5px;aspect-ratio:1}
  .board{width:100%;height:100%;min-width:0;min-height:0;aspect-ratio:1}

  .left-panel{grid-column:1;grid-row:2;height:auto;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:50px 62px 17px 34px 43px;gap:5px 8px;overflow:visible;padding:8px;background:rgba(255,250,240,.88);box-shadow:3px 3px 0 rgba(33,28,43,.16)}
  .left-panel .turn-card{grid-column:1;grid-row:1;height:50px;min-width:0;padding:7px 9px;overflow:hidden}.turn-card .eyebrow{font-size:7px}.turn-card strong{font-size:16px;line-height:18px}.turn-card #turnSub{font-size:7px;line-height:11px}
  .left-panel .chaos-meter{grid-column:2;grid-row:1;height:50px;min-width:0;margin:0;padding:6px 8px;overflow:hidden;border:0;background:transparent}.meter-head{font-size:9px}.meter{height:10px;margin:4px 0}.chaos-meter small{font-size:6px;line-height:8px;margin:0}
  .left-panel>.section-title:nth-of-type(3){display:none}
  .left-panel #ruleCard{grid-column:1/-1;grid-row:2;height:62px;min-height:0;padding:8px 9px;overflow:hidden}.rule-icon{width:29px;height:29px}.rule-card strong{font-size:12px;line-height:15px}.rule-card p{display:-webkit-box;margin-top:1px;font-size:8px;line-height:11px;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .left-panel>.section-title:nth-of-type(4){grid-column:1;grid-row:3;display:flex;height:17px;margin:0;font-size:8px}
  .left-panel #comboPips{grid-column:1;grid-row:4;align-self:center}.combo-pips i{height:11px}
  .left-panel #powerBtn{grid-column:2;grid-row:3/5;height:56px;min-height:0;margin:0;padding:6px 8px;box-shadow:2px 2px 0 var(--ink)}.power-btn>.game-icon{width:24px;height:24px}.power-btn b{font-size:9px}.power-btn small{font-size:6px;line-height:8px}
  .left-panel .quick-actions{grid-column:1/-1;grid-row:5;height:43px;display:grid;gap:7px}.quick-actions .action{height:43px;min-height:0;padding:5px 7px;box-shadow:2px 2px 0 var(--ink)}.quick-actions .action b{font-size:8px}.quick-actions .action small{font-size:6px}

  .right-panel{grid-column:1;grid-row:3;height:100%;min-height:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:45px 17px minmax(0,1fr);gap:4px 7px;overflow:hidden;padding:7px 8px;background:rgba(255,250,240,.82);box-shadow:3px 3px 0 rgba(33,28,43,.16)}
  .right-panel>.versus,.right-panel>.versus.you{grid-row:1;height:45px;min-width:0;margin:0;padding:4px 6px;border:1px solid rgba(33,28,43,.35);background:#fffaf0}.right-panel>.versus:first-child{grid-column:1}.right-panel>.versus.you{grid-column:2;border-top:1px solid rgba(33,28,43,.35)}
  .right-panel .avatar{width:29px;height:29px;font-size:21px}.right-panel .versus{grid-template-columns:29px minmax(0,1fr) 43px;gap:5px}.right-panel .versus span{font-size:6px}.right-panel .versus strong{font-size:8px}.right-panel .player-numbers{gap:1px}.right-panel .player-numbers>b{font-size:13px}.right-panel .player-numbers time{min-width:40px;padding:1px 2px;font-size:7px}
  .right-panel>.section-title{grid-column:1/-1;grid-row:2;height:17px;margin:0;font-size:8px}
  .right-panel .feed{grid-column:1/-1;grid-row:3;height:100%;min-height:0;max-height:none;overflow:hidden;border:0;background:transparent}.feed-item{display:none}.feed-item:first-child{display:flex;height:100%;min-height:0;padding:5px 7px;overflow:hidden}.feed-item>.game-icon{width:20px;height:20px}.feed-item b{font-size:8px}.feed-item small{font-size:7px;line-height:9px}
  .right-panel .goal-card{display:none}

  .game-credit{height:24px;min-height:24px;display:flex;flex-wrap:nowrap;align-items:center;align-content:center;padding:0 4px;font-size:6px;line-height:8px;white-space:nowrap}.game-credit i{width:16px}
  .menu-screen{height:100dvh;min-height:0;overflow:hidden;padding:68px 14px 48px}.menu-hero{max-height:calc(100dvh - 116px);display:flex;flex-direction:column;justify-content:center}.menu-screen .menu-foot{height:32px;bottom:5px;overflow:hidden}
}

@media(max-width:760px) and (max-height:760px){
  .game-screen.app{grid-template-rows:48px minmax(0,1fr) 18px;padding-top:3px}.topbar{height:48px}.brand-icon{width:34px;height:34px;font-size:27px}.back,.icon-tool{width:38px;height:38px;min-width:38px}
  .header-tools .ghost{width:38px;height:38px;min-width:38px}
  .arena{gap:4px;padding:3px 0}.board-zone{grid-template-rows:21px auto}.ribbon{height:22px;min-height:22px;padding:2px 8px}
  .board-frame{--mobile-board:min(calc(100vw - 16px),calc(100dvh - 368px));min-width:205px}
  .left-panel{grid-template-rows:43px 52px 15px 28px 35px;gap:3px 6px;padding:5px}.left-panel .turn-card,.left-panel .chaos-meter{height:43px}.left-panel #ruleCard{height:52px}.left-panel #powerBtn{height:46px}.left-panel .quick-actions,.quick-actions .action{height:35px}
  .right-panel{grid-template-rows:39px 14px minmax(0,1fr);padding:4px 6px}.right-panel>.versus,.right-panel>.versus.you{height:39px}.right-panel>.section-title{height:14px}.game-credit{height:18px;min-height:18px}
}

/* Match history is intentionally complete; newest activity stays at the top. */
.feed{overflow-x:hidden;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--purple) transparent}.feed::-webkit-scrollbar{width:5px}.feed::-webkit-scrollbar-thumb{background:var(--purple)}

/* Deliberate surrender control. */
.surrender-btn{position:relative;overflow:hidden;color:#a91f2c!important;border-color:#a91f2c!important;background:#fff0ee!important}.surrender-btn .game-icon{color:#d82e3f}.surrender-btn:before{content:"";position:absolute;z-index:0;inset:0 100% 0 0;background:#ff5a54;transition:none}.surrender-btn.holding:before{right:0;transition:right 2s linear}.surrender-btn.holding{color:#fff!important}.surrender-btn>*{position:relative;z-index:1}

/* End-of-match presentation. */
.result-dialog{width:min(720px,calc(100% - 28px));max-height:calc(100dvh - 28px);overflow:hidden;padding:24px 28px 26px;text-align:center;background:#f5eedb;box-shadow:10px 10px 0 var(--purple)}.result-dialog[open]{animation:resultEntrance .65s cubic-bezier(.18,1.35,.35,1)}.result-dialog.victory{--result-accent:#8ebd16}.result-dialog.defeat{--result-accent:#d63d48}.result-dialog.draw{--result-accent:#6d38d1}.result-crest{width:70px;height:70px;margin:0 auto 8px;display:grid;place-items:center;border:3px solid var(--ink);box-shadow:5px 5px 0 var(--ink);background:var(--lime);color:var(--ink);transform:rotate(-4deg)}.result-crest .game-icon{width:43px;height:43px}.result-dialog.defeat .result-crest{background:#ff7b73}.result-dialog.draw .result-crest{background:#b999f1}.result-dialog h2{margin:4px 0 2px;color:var(--result-accent);font-size:clamp(34px,6vw,58px);line-height:1;text-shadow:2px 2px 0 var(--ink)}.result-outcome{margin:8px 0 15px;font-weight:700}.result-colors{display:grid;grid-template-columns:1fr 38px 1fr;align-items:center;gap:7px;padding:10px;border:2px solid var(--ink);background:#fffaf0}.result-colors>div{display:grid;gap:2px}.result-colors small{font-size:8px;letter-spacing:1.4px;color:var(--muted)}.result-colors strong{font:800 17px "Kanit"}.result-colors>span{font-weight:900;color:var(--hot)}.result-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:10px 0}.result-stats>div{padding:7px 4px;border:1px solid var(--ink);background:rgba(255,255,255,.6)}.result-stats b,.result-stats small{display:block}.result-stats b{font-size:20px}.result-stats small{font-size:7px;letter-spacing:.7px;color:var(--muted)}.result-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.result-actions button,.confirm-actions button{min-height:48px;display:flex;align-items:center;justify-content:center;gap:6px;padding:7px;border:2px solid var(--ink);background:#fffaf0;color:var(--ink);font:800 10px inherit;cursor:pointer}.result-actions button.primary{background:var(--lime);box-shadow:3px 3px 0 var(--ink)}.result-actions .game-icon{width:18px;height:18px}.result-review{margin-top:12px;border:2px solid var(--ink);background:#fffaf0;text-align:left}.review-head{display:flex;justify-content:space-between;padding:8px 10px;border-bottom:2px solid var(--ink);font-size:9px}.review-list{max-height:220px;overflow-y:auto}.review-row{display:grid;grid-template-columns:28px 1fr;gap:8px;padding:7px 9px;border-bottom:1px dashed #b7ad9c}.review-row:last-child{border:0}.review-row>span{font-weight:800;color:var(--purple)}.review-row b,.review-row small{display:block}.review-row b{font-size:9px}.review-row small{margin-top:2px;color:var(--muted);font-size:8px}.result-confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden}.result-confetti i{position:absolute;top:-20px;width:9px;height:24px;background:var(--lime);animation:confettiFall 2.4s ease-in infinite}.result-confetti i:nth-child(2){left:18%;background:var(--hot);animation-delay:.3s}.result-confetti i:nth-child(3){left:36%;background:var(--purple);animation-delay:.7s}.result-confetti i:nth-child(4){left:61%;background:#ffcc41;animation-delay:.15s}.result-confetti i:nth-child(5){left:78%;background:#50cbbd;animation-delay:.55s}.result-confetti i:nth-child(6){left:93%;background:var(--hot);animation-delay:.9s}
@keyframes resultEntrance{from{opacity:0;transform:scale(.65) rotate(-4deg)}to{opacity:1;transform:scale(1)}}@keyframes confettiFall{0%{transform:translateY(-20px) rotate(0)}100%{transform:translateY(680px) rotate(560deg)}}

.confirm-dialog{width:min(430px,calc(100% - 28px));padding:25px;text-align:center}.confirm-icon{width:48px;height:48px;margin:auto;color:var(--hot)}.confirm-dialog h2{margin:7px 0}.confirm-dialog p{margin:0 0 18px;color:var(--muted);font-size:12px;line-height:1.5}.confirm-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.confirm-actions button.danger{background:#ff5a54;color:#fff;box-shadow:3px 3px 0 var(--ink)}
.print-report{display:none}

@media(max-width:760px){.right-panel .feed{overflow-y:auto}.right-panel .feed-item{display:flex;height:auto;min-height:38px}.right-panel .feed-item:first-child{height:auto}.result-dialog{padding:18px 14px 16px}.result-crest{width:54px;height:54px}.result-crest .game-icon{width:32px;height:32px}.result-dialog h2{font-size:34px;text-shadow:1px 1px 0 var(--ink)}.result-outcome{font-size:11px;margin:5px 0 9px}.result-colors{padding:7px}.result-colors strong{font-size:13px}.result-stats{margin:7px 0}.result-stats>div{padding:5px 2px}.result-stats b{font-size:16px}.result-actions{grid-template-columns:1fr 1fr}.result-actions button{min-height:42px}.review-list{max-height:24dvh}.confirm-dialog{padding:20px 16px}.surrender-btn.holding:before{transition-duration:2s}}

@media print{
  @page{size:A4 portrait;margin:14mm}
  html,body{position:static!important;width:auto!important;height:auto!important;overflow:visible!important;background:#fff!important}
  body>*{display:none!important}.print-report{display:block!important;color:#17131d;font:10pt/1.4 Arial,"Kanit",sans-serif}
  .print-head{display:grid;grid-template-columns:1fr auto;align-items:end;padding-bottom:8mm;border-bottom:3px solid #211c2b}.print-head h1{margin:0;font-size:24pt}.print-head p{margin:2mm 0 0;color:#555}.print-badge{padding:3mm 5mm;border:2px solid #211c2b;background:#d9ff5b;font-weight:800;font-size:14pt}.print-result{margin:7mm 0;padding:5mm;border:2px solid #211c2b;background:#f5eedb}.print-result h2{margin:0 0 2mm;font-size:18pt}.print-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:3mm;margin:5mm 0}.print-grid div{padding:3mm;border:1px solid #777}.print-grid b,.print-grid small{display:block}.print-grid small{color:#666}.print-report h3{margin:7mm 0 2mm;padding-bottom:2mm;border-bottom:2px solid #211c2b}.print-timeline{width:100%;border-collapse:collapse}.print-timeline th,.print-timeline td{padding:2.2mm;border-bottom:1px solid #ccc;text-align:left;vertical-align:top}.print-timeline th:first-child,.print-timeline td:first-child{width:12mm}.print-foot{margin-top:8mm;padding-top:3mm;border-top:1px solid #777;color:#666;text-align:center}
}

/* ── Flicker-free piece travel ─────────────────────────────────────────────────
   JS reads the exact computed style (font, size, color, stroke) from the real
   .piece element and injects it directly into the clone's inline style.
   No CSS cascade needed for the clone — everything is explicit.
   ─────────────────────────────────────────────────────────────────────────── */

/* Source square: hide during flight (clone covers it perfectly) */
.piece-ghost{opacity:0!important;pointer-events:none}

/* Destination square: hide after render, revealed atomically when clone lands.
   visibility avoids layout shift; transition:none prevents any fade-in. */
.piece-hidden{visibility:hidden!important;transition:none!important}

/* Unmissable king danger signal. */
.square.king-in-check{isolation:isolate}.square.king-in-check:before{content:"";position:absolute;z-index:0;inset:4%;border-radius:12%;background:radial-gradient(circle,#ff827b 0,#e12d3b 42%,rgba(153,0,20,.2) 72%,transparent 74%);box-shadow:inset 0 0 0 3px #8f0018,0 0 18px #ff3548;animation:kingDanger 1s ease-in-out infinite}.square.king-in-check .piece{animation:kingAlarm .55s ease-in-out infinite alternate;filter:drop-shadow(0 0 7px #fff) drop-shadow(0 0 12px #e9002f)}@keyframes kingDanger{50%{opacity:.62;transform:scale(.92)}}@keyframes kingAlarm{to{transform:scale(1.08)}}

/* Board mutation language shared by all 25 events and every Unleash power.
   Each event receives its own icon and deterministic hue, plus one of five
   motion signatures derived from its unique event id. */
.board-chaos-fx{position:absolute;z-index:9;inset:8px;display:grid;place-items:center;overflow:hidden;pointer-events:none;mix-blend-mode:screen;filter:hue-rotate(calc(var(--fx-hue)*1deg));animation:mutationBoardFlash .85s ease both}.board-chaos-fx>span{width:76px;height:76px;display:grid;place-items:center;color:#fff;filter:drop-shadow(0 0 12px #fff)}.board-chaos-fx svg{width:100%;height:100%}.board-chaos-fx>i{position:absolute;width:16px;height:16px;border:3px solid #fff;transform:rotate(45deg);animation:mutationParticle .75s ease-out both}.board-chaos-fx>i:nth-child(2){--px:-150px;--py:-110px}.board-chaos-fx>i:nth-child(3){--px:155px;--py:80px;animation-delay:.08s}.board-chaos-fx>i:nth-child(4){--px:-85px;--py:145px;animation-delay:.14s}.chaos-piece-ghost{position:fixed;z-index:118;display:grid;place-items:center;pointer-events:none;font:clamp(30px,5.7vw,64px) "Segoe UI Symbol","Noto Sans Symbols 2",serif;filter:hue-rotate(calc(var(--fx-hue)*1deg)) drop-shadow(0 0 9px #fff);animation:mutationVanish .82s ease-out both}.chaos-piece-ghost.w{color:#fff}.chaos-piece-ghost.b{color:#111}.piece.mutation-enter{animation:mutationEnter .78s cubic-bezier(.15,1.4,.35,1) both;filter:hue-rotate(calc(var(--fx-hue)*1deg)) drop-shadow(0 0 10px #fff)}.piece.mutation-convert{animation:mutationConvert .82s ease both;filter:hue-rotate(calc(var(--fx-hue)*1deg)) drop-shadow(0 0 12px #fff)}
.mutation-v0{--mutation-rotate:180deg;--mutation-x:0px;--mutation-y:-35px}.mutation-v1{--mutation-rotate:-90deg;--mutation-x:38px;--mutation-y:0px}.mutation-v2{--mutation-rotate:360deg;--mutation-x:-30px;--mutation-y:25px}.mutation-v3{--mutation-rotate:45deg;--mutation-x:0px;--mutation-y:38px}.mutation-v4{--mutation-rotate:-240deg;--mutation-x:28px;--mutation-y:-28px}.board-chaos-fx.mutation-v0>span{animation:fxPulse .7s ease}.board-chaos-fx.mutation-v1>span{animation:fxSlash .7s ease}.board-chaos-fx.mutation-v2>span{animation:fxOrbit .8s ease}.board-chaos-fx.mutation-v3>span{animation:fxDrop .75s ease}.board-chaos-fx.mutation-v4>span{animation:fxGlitch .72s steps(4)}
@keyframes mutationBoardFlash{0%{opacity:0;background:transparent}25%{opacity:.9;background:radial-gradient(circle,hsla(var(--fx-hue),90%,65%,.55),transparent 63%)}100%{opacity:0}}@keyframes mutationParticle{from{opacity:1;transform:translate(0,0) rotate(0)}to{opacity:0;transform:translate(var(--px),var(--py)) rotate(260deg)}}@keyframes mutationVanish{0%{opacity:1;transform:scale(1)}45%{opacity:1;transform:scale(1.18) rotate(calc(var(--mutation-rotate)/3))}100%{opacity:0;transform:translate(var(--mutation-x),var(--mutation-y)) scale(.15) rotate(var(--mutation-rotate))}}@keyframes mutationEnter{0%{opacity:0;transform:translate(var(--mutation-x),var(--mutation-y)) scale(.2) rotate(var(--mutation-rotate))}70%{opacity:1;transform:scale(1.18)}100%{transform:scale(1)}}@keyframes mutationConvert{0%,100%{transform:scale(1)}25%{transform:scale(.5) rotate(-18deg);opacity:.4}65%{transform:scale(1.22) rotate(8deg);opacity:1}}@keyframes fxPulse{50%{transform:scale(1.6)}}@keyframes fxSlash{0%{transform:translateX(-180px) skewX(-20deg)}65%{transform:translateX(20px) skewX(8deg)}}@keyframes fxOrbit{from{transform:rotate(-240deg) scale(.2)}to{transform:rotate(0) scale(1.2)}}@keyframes fxDrop{from{transform:translateY(-190px) scale(1.7)}70%{transform:translateY(12px) scale(.85)}}@keyframes fxGlitch{0%{transform:translate(-30px,15px);opacity:0}25%{transform:translate(30px,-12px);opacity:1}50%{transform:translate(-12px,-24px)}75%{transform:translate(18px,8px)}}

@media(max-width:760px){.chaos-piece-ghost{font-size:clamp(27px,11.5vw,52px);-webkit-text-stroke-width:1px}.board-chaos-fx{inset:4px}.board-chaos-fx>span{width:54px;height:54px}.square.king-in-check:before{inset:2%;box-shadow:inset 0 0 0 2px #8f0018,0 0 10px #ff3548}}
@media(prefers-reduced-motion:reduce){.board-chaos-fx,.chaos-piece-ghost,.piece.mutation-enter,.piece.mutation-convert,.square.king-in-check:before,.square.king-in-check .piece{animation-duration:.15s!important;animation-iteration-count:1!important}}