@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;600;700&family=Noto+Serif+SC:wght@600;700&display=swap');
:root{--paper:#f3efe5;--paper2:#e9e1d1;--ink:#20231f;--muted:#74766e;--line:#cfc6b6;--red:#b73b30;--green:#397356;--gold:#a8772e;--panel:#fffdf8}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{background:var(--paper);color:var(--ink);font-family:Manrope,Arial,sans-serif}button{font:inherit}header{height:64px;background:var(--panel);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 28px}.brand{display:flex;align-items:center;gap:11px;color:inherit;text-decoration:none}.seal{width:38px;height:38px;background:var(--red);color:#fff;display:grid;place-items:center;font:21px 'Noto Serif SC'}.brand b,.brand small{display:block}.brand b{font-size:12px;letter-spacing:.2em}.brand small{color:var(--muted);font:8px DM Mono;letter-spacing:.16em;margin-top:3px}header nav{display:flex;align-items:center;gap:14px;color:var(--muted);font:9px DM Mono;letter-spacing:.12em}header nav button{background:#ece4d7;border:1px solid var(--line);padding:8px 10px;cursor:pointer;color:var(--ink);font:9px DM Mono}header nav button span{color:var(--red);font-weight:bold}header nav i{width:7px;height:7px;border-radius:50%;background:#61a374;box-shadow:0 0 0 3px #dbeade}.app{height:calc(100dvh - 64px);display:grid;grid-template-columns:minmax(440px,44%) 1fr;max-width:1500px;margin:auto}.board-column{border-right:1px solid var(--line);display:grid;grid-template-rows:45px minmax(0,1fr) auto;padding:0 clamp(16px,2.5vw,40px) 14px;background:#eee7da;min-height:0}.panel-title{display:flex;align-items:center;justify-content:space-between;color:var(--muted);font:9px DM Mono;letter-spacing:.14em}.panel-title>span:before{content:'01';color:var(--red);margin-right:9px}.panel-title button,.history button{border:0;background:none;color:var(--muted);cursor:pointer;font:9px DM Mono}.history{display:flex;align-items:center;gap:9px}.history button{width:27px;height:27px;border:1px solid var(--line);background:var(--panel);font-size:13px}.history b{min-width:55px;text-align:center;font:8px DM Mono;color:var(--muted)}.board-stage{display:grid;place-items:center;min-height:0;padding:0 12px 8px}.board-shell{position:relative;height:min(100%,calc((100vw * .44 - 90px) * 1.125));max-height:100%;aspect-ratio:8/9;padding:18px;background:#d7a963;box-shadow:0 15px 35px #8b806b55;border:1px solid #a9783e}.board{position:relative;width:100%;height:100%;background-color:#e1b872;background-image:linear-gradient(#7f552d 1px,transparent 1px),linear-gradient(90deg,#7f552d 1px,transparent 1px);background-size:12.5% 11.111%;border:2px solid #7f552d}.board:after{content:'';position:absolute;inset:44.44% 0 auto;height:11.111%;background:#e1b872;border-top:1px solid #7f552d;border-bottom:1px solid #7f552d;z-index:1}.river{position:absolute;left:11%;right:11%;top:47.1%;display:flex;justify-content:space-between;color:#74491f;font:clamp(14px,2.1vh,22px) 'Noto Serif SC';z-index:2;pointer-events:none}.point{position:absolute;width:11.5%;aspect-ratio:1;transform:translate(-50%,-50%);z-index:3;border:0;background:transparent;border-radius:50%;padding:0;cursor:pointer}.point:hover{background:#fff4}.piece{position:absolute;inset:4%;border-radius:50%;display:grid;place-items:center;background:#fff3ce;border:2px solid currentColor;box-shadow:0 2px 4px #6c452b88;color:#262822;font:clamp(14px,2.6vh,27px) 'Noto Serif SC';pointer-events:none}.piece.red{color:#b52d25}.point.selected .piece{box-shadow:0 0 0 4px #fff8c7,0 2px 4px #6c452b}.point.last{background:#fff4b688}.editor{display:grid;grid-template-columns:1fr auto;gap:10px;max-width:620px;width:100%;margin:auto}.piece-tray{display:grid;grid-template-columns:repeat(7,1fr);border:1px solid var(--line);background:var(--panel)}.tray-piece{border:0;border-right:1px solid var(--line);background:transparent;min-height:54px;cursor:pointer;color:var(--ink);font:21px 'Noto Serif SC';display:flex;flex-direction:column;align-items:center;justify-content:center}.tray-piece:last-child{border:0}.tray-piece small{font:7px DM Mono;color:var(--muted)}.tray-piece.red{color:var(--red)}.tray-piece.selected{background:#f4d9b9;box-shadow:inset 0 -3px var(--red)}.editor-actions{display:flex;border:1px solid var(--line);background:var(--panel)}.editor-actions button{min-width:48px;border:0;border-left:1px solid var(--line);background:none;color:var(--muted);cursor:pointer;font-size:16px}.editor-actions button:first-child{border:0}.editor-actions small{font:6px DM Mono;display:block;margin-top:3px}.analysis-column{background:var(--panel);padding:clamp(18px,2.6vw,38px);display:grid;grid-template-rows:auto auto auto 15px auto auto minmax(0,1fr);min-height:0}.analysis-head{display:flex;justify-content:space-between;min-height:93px}.kicker{font:9px DM Mono;color:var(--gold);letter-spacing:.14em}.analysis-head h1{margin:7px 0 3px;font:clamp(25px,3vw,44px) 'Noto Serif SC';color:var(--green)}.analysis-head h1.loss{color:var(--red)}.analysis-head h1.draw{color:var(--gold)}.analysis-head p{margin:0;color:var(--muted);font:12px Georgia}.result-mark{width:72px;height:72px;border:1px solid var(--line);display:grid;place-items:center;border-radius:50%;font:36px 'Noto Serif SC';color:var(--green);background:#f2f5ed}.controls{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}.side-switch,.dataset{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line)}.side-switch button,.dataset button{border:0;background:#f1ede4;color:var(--muted);min-height:40px;cursor:pointer;font:8px DM Mono}.side-switch button+button,.dataset button+button{border-left:1px solid var(--line)}.side-switch button.active,.dataset button.active{background:var(--ink);color:#fff}.side-switch i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--red);margin-right:5px}.side-switch button+button i{background:#ddd}.dataset b,.dataset span{display:block}.dataset b{font-size:11px}.dataset span{font-size:7px;margin-top:2px}.fen-row{display:flex;border:1px solid var(--line);background:#faf7f0}.fen-row input{flex:1;min-width:0;border:0;background:transparent;padding:11px;outline:0;font:10px DM Mono;color:#444}.fen-row button{border:0;border-left:1px solid var(--line);background:none;color:var(--muted);font:8px DM Mono;padding:0 12px;cursor:pointer}.error{color:var(--red);font:9px DM Mono;padding-top:3px;overflow:hidden}.table-meta{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);margin:7px 0 13px}.table-meta div{padding:9px 11px;border-right:1px solid var(--line);min-width:0}.table-meta div:last-child{border:0}.table-meta span,.table-meta b{display:block}.table-meta span{font:7px DM Mono;color:var(--muted);letter-spacing:.1em}.table-meta b{font:clamp(10px,1vw,14px) DM Mono;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.moves-head{display:flex;align-items:end;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:8px}.moves-head span{font:10px DM Mono;letter-spacing:.14em}.moves-head small{display:block;color:var(--muted);font:9px Georgia;margin-top:2px}.legend{font:7px DM Mono;color:var(--muted)}.legend i{display:inline-block;width:6px;height:6px;border-radius:50%;margin:0 3px 0 8px}.legend .win{background:var(--green)}.legend .draw{background:var(--gold)}.legend .loss{background:var(--red)}.moves{overflow:auto;min-height:0;padding-top:7px;display:grid;grid-template-columns:repeat(2,1fr);grid-auto-rows:min-content;gap:6px;padding-right:4px}.move{border:1px solid var(--line);background:#faf8f2;padding:9px 11px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:9px;cursor:pointer;text-align:left;color:var(--ink)}.move:hover,.move:focus{border-color:#807667;background:#fff}.move strong{font:14px DM Mono;text-transform:uppercase}.move .arrow{color:var(--muted)}.move .badge{font:7px DM Mono;padding:5px 6px}.move.win .badge{background:#dceadd;color:#315f41}.move.draw .badge{background:#eee3c4;color:#77591f}.move.loss .badge{background:#f0d9d4;color:#8c3129}.move small{font:7px DM Mono;color:var(--muted)}.empty-state{grid-column:1/3;border:1px dashed var(--line);color:var(--muted);padding:30px;text-align:center;font:11px Georgia}.loading{position:fixed;right:30px;bottom:22px;background:var(--ink);color:#fff;padding:11px 15px;display:flex;gap:9px;align-items:center;opacity:0;pointer-events:none;transform:translateY(10px);transition:.2s;font:8px DM Mono;letter-spacing:.12em}.loading.show{opacity:1;transform:none}.loading i{width:12px;height:12px;border:2px solid #777;border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:800px){header{height:52px;padding:0 12px}.seal{width:34px;height:34px}.brand small{display:none}header nav>i,header nav>span{display:none}.app{height:calc(100dvh - 52px);grid-template-columns:minmax(0,46%) minmax(0,54%)}.board-column{padding:0 7px 8px;grid-template-rows:35px minmax(0,1fr) auto}.panel-title>span{display:none}.board-stage{padding:0 2px 5px}.board-shell{height:auto;width:100%;max-height:100%;padding:8px}.river{top:47.5%;font-size:10px}.piece{font-size:clamp(11px,3vw,18px)}.editor{grid-template-columns:1fr}.piece-tray{grid-template-columns:repeat(7,1fr)}.tray-piece{min-height:37px;font-size:15px}.tray-piece small{display:none}.editor-actions{display:none}.analysis-column{padding:10px;grid-template-rows:auto auto auto 12px auto auto minmax(0,1fr)}.analysis-head{min-height:64px}.analysis-head h1{font-size:21px;margin-top:3px}.analysis-head p{font-size:9px;max-width:240px}.result-mark{width:48px;height:48px;font-size:23px}.controls{grid-template-columns:1fr;margin:4px 0}.side-switch button,.dataset button{min-height:32px}.dataset{display:none}.fen-row input{padding:8px;font-size:8px}.table-meta{grid-template-columns:1fr 1fr;margin:4px 0 7px}.table-meta div{padding:6px}.moves-head small,.legend{display:none}.moves{grid-template-columns:1fr;gap:4px}.move{padding:7px}.empty-state{grid-column:1}.loading{right:10px;bottom:10px}}
@media(max-width:520px) and (orientation:portrait){.app{grid-template-columns:1fr;grid-template-rows:51% 49%}.board-column{border-right:0;border-bottom:1px solid var(--line);grid-template-columns:minmax(0,1fr) 54px;grid-template-rows:29px minmax(0,1fr);padding:0 7px 5px}.panel-title{grid-column:1/3}.board-stage{grid-column:1}.board-shell{height:100%;width:auto}.editor{grid-column:2;grid-row:2;display:block}.piece-tray{height:100%;grid-template-columns:1fr;grid-template-rows:repeat(7,1fr)}.tray-piece{min-height:0;border:0;border-bottom:1px solid var(--line)}.analysis-column{padding:8px 10px}.analysis-head{min-height:49px}.analysis-head h1{font-size:18px}.analysis-head p,.kicker{display:none}.controls{position:absolute;right:10px;top:60px;width:54%;z-index:5}.side-switch{display:none}.fen-row{display:none}.error{display:none}.table-meta{grid-template-columns:repeat(4,1fr)}.table-meta b{font-size:9px}.moves{grid-template-columns:1fr 1fr}.move small{display:none}.result-mark{width:42px;height:42px}.moves-head{padding-bottom:4px}}

/* Readable Traditional Chinese typography. */
.brand b{font-size:17px;letter-spacing:.12em}.brand small{font:11px Manrope;letter-spacing:.08em}.panel-title{font:13px Manrope}.tray-piece{min-height:58px;font-size:27px}.tray-piece small{font:10px Manrope}.analysis-head p{font:15px/1.45 Manrope}.side-switch button,.dataset button{min-height:44px;font:12px Manrope}.table-meta span{font:11px Manrope;letter-spacing:.02em}.table-meta b{font:clamp(13px,1.1vw,17px) Manrope}.moves-head span{font:700 15px Manrope}.moves-head small{font:12px Manrope}.move strong{font:21px 'Noto Serif SC';text-transform:none}.move .badge{font:13px 'Noto Serif SC';padding:5px 7px}.move small{font:11px Manrope}
@media(max-width:800px){.tray-piece{font-size:21px}.analysis-head p{font-size:12px}.table-meta span{font-size:9px}.table-meta b{font-size:12px}.move strong{font-size:18px}.move .badge{font-size:11px}.move small{font-size:9px}}
@media(max-width:520px) and (orientation:portrait){.tray-piece{font-size:20px}.table-meta span{font-size:8px}.table-meta b{font-size:10px}.move strong{font-size:17px}.move .badge{font-size:11px}}

/* True 9-by-10 Xiangqi geometry: half-square margins around 9x10 intersections. */
.board-shell{aspect-ratio:9/10;padding:0;background:#d9aa65}.board{border:0;background:#dfb775;overflow:visible}.board:after{display:none}.board-grid{position:absolute;inset:0;width:100%;height:100%;z-index:1}.board-grid g{fill:none;stroke:#704821;stroke-width:1.6;stroke-linecap:square}.point{width:11.111%}.river{left:13%;right:13%;top:47.2%;font-size:clamp(15px,2.2vh,23px)}

/* Original traditional board and piece artwork from the reference interface. */
.board-shell{aspect-ratio:363/403;background:none;box-shadow:0 12px 28px #8b806b55}.board{background:url('traditional/xiangqi.gif') center/100% 100% no-repeat}.river{display:none}.piece-art{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}.point.selected .piece-art{filter:drop-shadow(0 0 4px #fff200) drop-shadow(0 0 2px #fff200)}.tray-piece img{width:38px;height:38px;object-fit:contain}.tray-piece{font-family:Manrope}.tray-piece.selected{background:#f4d9b9}

/* Native-size presentation: the reference artwork is never enlarged on desktop. */
@media(min-width:801px){.app{grid-template-columns:520px minmax(0,1fr)}.board-column{padding-left:34px;padding-right:34px}.board-stage{position:relative;place-items:center;background:radial-gradient(ellipse at center,rgba(177,125,62,.14),transparent 67%)}.board-stage:before,.board-stage:after{position:absolute;font-family:'Noto Serif SC';color:#9b382d;opacity:.16;pointer-events:none}.board-stage:before{content:'楚河';left:5px;top:12%;writing-mode:vertical-rl;letter-spacing:.3em;font-size:17px}.board-stage:after{content:'漢界';right:5px;bottom:12%;writing-mode:vertical-rl;letter-spacing:.3em;font-size:17px}.board-shell{width:363px;height:403px;max-width:none;max-height:none;aspect-ratio:auto;box-shadow:0 0 0 1px #8d663d,0 0 0 8px #f8f1e3,0 0 0 9px #b8aa94,0 22px 45px rgba(77,54,30,.25)}.piece-art{width:41px;height:41px;inset:50% auto auto 50%;transform:translate(-50%,-50%)}.tray-piece img{width:41px;height:41px}.editor{max-width:452px}}
@media(max-width:800px){.board-shell{width:min(100%,363px);height:auto;aspect-ratio:363/403}.piece-art{width:102%;height:102%;inset:-1%}.tray-piece img{width:min(34px,7vw);height:min(34px,7vw)}}

/* Reference-style single move column with the result on the right. */
.moves{grid-template-columns:1fr}.empty-state{grid-column:1}.move{grid-template-columns:minmax(100px,auto) 1fr auto;padding:10px 13px}.move strong{grid-column:1}.move small{grid-column:2;text-align:right}.move .badge{grid-column:3;min-width:34px;text-align:center}.moves-head{align-items:center}.moves-head>button{border:1px solid #8e2d25;background:var(--red);color:#fff;min-height:42px;padding:6px 14px;display:flex;align-items:center;gap:9px;cursor:pointer;box-shadow:0 4px 10px #9d3a2d33}.moves-head>button i{width:25px;height:25px;border-radius:50%;background:#fff;color:var(--red);display:grid;place-items:center;font-size:10px;font-style:normal;padding-left:2px}.moves-head>button span{font:13px Manrope;letter-spacing:.03em}.moves-head>button:disabled{opacity:.4;cursor:default;box-shadow:none}
@media(max-width:520px) and (orientation:portrait){.moves{grid-template-columns:1fr}.moves-head>button{min-height:34px;padding:4px 8px}.moves-head>button i{width:22px;height:22px}.moves-head>button span{font-size:11px}.move{grid-template-columns:auto 1fr auto}.move small{text-align:right}}
.moves-head>button.playing{background:#292c28;border-color:#292c28}.moves-head>button.playing i{color:#292c28;padding-left:0;font-size:8px}
.move-marker{position:absolute;width:41px;height:41px;inset:50% auto auto 50%;transform:translate(-50%,-50%);z-index:8;pointer-events:none;image-rendering:auto}.move-marker.preview{z-index:9}
.hover-dot{position:absolute;left:50%;top:50%;width:15px;height:15px;transform:translate(-50%,-50%);z-index:10;border-radius:50%;background:#159447;border:3px solid #eaffd8;box-shadow:0 1px 4px #173d25;pointer-events:none}.hover-dot.from{background:#36b85e}.hover-dot.to{background:#087b38}
.dataset{grid-template-columns:repeat(3,1fr)}
@media(max-width:800px){.move-marker{width:102%;height:102%}}

/* Unified engraved board and typographic pieces. */
.board-shell{background:linear-gradient(145deg,#c9904e,#e6bd7c 52%,#bd7f3f);padding:0;box-shadow:0 0 0 1px #76502e,0 0 0 8px #f8f1e3,0 0 0 9px #b8aa94,0 22px 45px rgba(77,54,30,.25)}.board{background:radial-gradient(circle at 25% 18%,rgba(255,244,204,.36),transparent 32%),repeating-linear-gradient(2deg,rgba(111,68,29,.035) 0,rgba(111,68,29,.035) 1px,transparent 1px,transparent 7px),#dfb372}.board-grid{display:block}.board-grid g{stroke:#66401f;stroke-width:1.65}.river{display:flex;left:14%;right:14%;top:47.1%;color:#724720;font:20px 'Noto Serif SC';letter-spacing:.2em;text-shadow:0 1px #f6d89e}.piece{inset:3%;background:radial-gradient(circle at 36% 27%,#fff8dd,#ead29f 65%,#c99d59);border:2px solid currentColor;box-shadow:inset 0 0 0 2px rgba(255,255,255,.35),0 2px 4px rgba(75,43,20,.55);font-size:25px}.piece.red{color:#a92c24}.point.selected .piece{box-shadow:inset 0 0 0 2px #fff,0 0 0 3px #d49b2d,0 3px 5px rgba(75,43,20,.5)}.tray-piece img{display:none}.tray-disc{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:#262822;background:radial-gradient(circle at 35% 28%,#fff8dd,#ead29f 68%,#c99d59);border:2px solid currentColor;box-shadow:0 2px 3px #76502e55;font:22px 'Noto Serif SC'}.tray-disc.red{color:#a92c24}.tray-piece.selected .tray-disc{box-shadow:0 0 0 3px #e0a83c,0 2px 3px #76502e55}
@media(max-width:800px){.piece{font-size:clamp(15px,3vw,22px)}.tray-disc{width:min(34px,7vw);height:min(34px,7vw);font-size:18px}.river{font-size:clamp(11px,2vw,17px)}}
.result-mark.win{color:var(--green);background:#e5efe6;border-color:#9fbea8}.result-mark.draw{color:var(--gold);background:#f4ead0;border-color:#ccb478}.result-mark.loss{color:var(--red);background:#f3dfda;border-color:#d3a39b}
@media(max-width:520px) and (orientation:portrait){header{padding:0 7px}.brand{gap:6px}.brand b{font-size:10px;letter-spacing:.08em}.seal{width:30px;height:30px;font-size:17px}header nav{gap:5px}header nav>a{font-size:8px;letter-spacing:0}header nav button{padding:6px 5px}.app{grid-template-rows:53% 47%}.board-column{grid-template-columns:minmax(0,1fr) 46px}.piece-tray{width:46px}.tray-disc{width:31px;height:31px;font-size:16px}.analysis-column{padding:6px 7px}.analysis-head h1{font-size:17px}.result-mark{width:38px;height:38px;font-size:20px}.table-meta div{padding:4px 3px}.table-meta span{font-size:6px}.table-meta b{font-size:8px}.move{padding:6px 5px;gap:5px}.move strong{font-size:12px}.move .badge{padding:4px}.moves{gap:3px}}
@media(max-width:520px) and (orientation:portrait){.app{grid-template-rows:43% 57%}.board-column{grid-template-rows:25px minmax(0,1fr);padding-bottom:3px;overflow:hidden}.panel-title{height:25px}.board-stage{min-height:0;overflow:hidden}.board-shell{height:100%;width:auto;max-width:100%;max-height:100%;aspect-ratio:363/403}.controls{position:static;inset:auto;width:auto;margin:2px 0;z-index:auto}.analysis-column{position:relative;z-index:4;padding:5px 7px;grid-template-rows:auto auto auto 4px auto auto minmax(0,1fr)}.analysis-head{min-height:48px;padding:4px 7px;border-left:4px solid var(--green);background:#edf4ed}.analysis-column[data-wdl="draw"] .analysis-head{border-left-color:var(--gold);background:#f7f0df}.analysis-column[data-wdl="loss"] .analysis-head{border-left-color:var(--red);background:#f7e9e6}.analysis-head h1{margin:0 0 2px;font-size:20px}.analysis-head p{display:block!important;font-size:9px;line-height:1.25;max-width:270px}.result-mark{width:40px;height:40px;font-size:21px}.table-meta{margin:3px 0 5px}.moves-head{padding-bottom:3px}.moves-head span{font-size:9px}.moves{grid-template-columns:1fr;gap:3px;overflow-y:auto;overscroll-behavior:contain;padding-top:4px}.move{min-height:38px;padding:5px 7px;grid-template-columns:48px 1fr 30px}.move small{display:block;font-size:7px}.empty-state{grid-column:1}.piece-tray{height:100%}}
@media(max-width:520px) and (orientation:portrait){.board-column{grid-template-columns:minmax(0,1fr) 40px}.editor{width:40px}.piece-tray{width:40px;min-width:40px}.tray-piece{min-height:0;padding:0}.tray-disc{width:27px;height:27px;font-size:14px;border-width:1px}.controls{display:block}.side-switch{display:none}.dataset{display:grid;grid-template-columns:repeat(3,1fr);height:28px}.dataset button{display:grid;place-items:center;min-height:27px;padding:2px;font-size:8px}.dataset button b{font-size:9px}.dataset button span{display:none}.analysis-column{grid-template-rows:auto 30px auto 3px auto 34px minmax(0,1fr)}.moves-head{height:34px;min-height:34px;align-items:center;position:relative;z-index:2;overflow:hidden;background:var(--panel)}.moves{position:relative;z-index:1}.moves-head>button{flex:0 0 32px;width:32px;min-height:29px;padding:3px;justify-content:center;box-shadow:none}.moves-head>button i{width:21px;height:21px}.moves-head>button span{display:none}.moves-head>div>span{font-size:10px}.moves-head>div>small{display:none}}
@media(max-width:520px) and (orientation:portrait){.app{grid-template-rows:48% 52%}.board-column{grid-template-columns:minmax(0,1fr) 70px;grid-template-rows:25px minmax(0,1fr)}.editor{grid-column:2;grid-row:2;display:grid;width:70px;grid-template-columns:40px 30px;grid-template-rows:minmax(0,1fr);gap:0;min-height:0}.piece-tray{grid-column:1;grid-row:1;min-height:0}.editor-actions{grid-column:2;grid-row:1;display:grid;grid-template-columns:1fr;grid-template-rows:repeat(3,1fr);min-height:0;border:1px solid var(--line);border-left:0;background:var(--panel)}.editor-actions button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:0;min-height:0;padding:1px;border:0;border-bottom:1px solid var(--line);font-size:13px}.editor-actions button:last-child{border-bottom:0}.editor-actions small{display:block;margin:0;font-size:8px}.moves-head>button{flex:0 0 auto;width:auto;padding:3px 7px;gap:5px}.moves-head>button span{display:inline;font-size:10px;letter-spacing:0}.moves-head>button i{flex:0 0 21px}.hover-dot{display:none!important}}

/* Explicit red and black editor palettes. */
.piece-tray{grid-template-columns:repeat(7,1fr)}
.tray-piece:nth-child(7){border-right:0}
.tray-piece:nth-child(n+8){border-top:1px solid var(--line)}
.tray-piece:last-child{border-right:0}
.moves-gap{display:none}

/* Keep iPhone geometry stable while Safari's address bar expands/collapses. */
@media(max-width:520px) and (orientation:portrait){
  .app{height:calc(100svh - 52px);grid-template-rows:auto minmax(0,1fr)}
  .board-column{grid-template-columns:calc(100vw - 118px) minmax(78px,1fr);grid-template-rows:25px auto}
  .board-stage{height:auto;min-height:0;padding:0 0 5px}
  .board-shell{width:min(100%,300px);height:auto;max-height:none;aspect-ratio:363/403}
  .editor{width:78px;grid-template-columns:50px 28px}
  .piece-tray{width:50px;min-width:50px;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(7,1fr);grid-auto-flow:column}
  .tray-piece{border:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
  .tray-piece:nth-child(n+8){border-top:0;border-right:0}
  .tray-piece:nth-child(7),.tray-piece:nth-child(14){border-bottom:0}
  .tray-disc{width:22px;height:22px;font-size:12px}
  .analysis-column{display:flex;flex-direction:column;min-height:0;overflow:hidden}
  .analysis-head{flex:0 0 44px;min-height:44px;padding:3px 6px}
  .analysis-head h1{font-size:18px}
  .analysis-head p{font-size:8px}
  .controls{flex:0 0 28px;height:28px;margin:1px 0}
  .dataset{height:26px}
  .dataset button{min-height:25px}
  .table-meta{flex:0 0 auto;margin:2px 0 3px}
  .table-meta div{padding:3px}
  .moves-head{position:static;z-index:auto;flex:0 0 36px;height:36px;min-height:36px;overflow:hidden}
  .moves-head>button{order:-1}
  .moves-gap{display:block;flex:0 0 10px;height:10px;background:var(--panel)}
  .moves{position:static;z-index:auto;flex:1 1 0;min-height:42px;margin:0;border:0;padding-top:0;scroll-padding-top:0}
  .move:first-child{scroll-margin-top:0}

  html,body{height:auto;overflow:visible}
  .app{height:auto;grid-template-rows:auto auto;overflow:visible}
  .analysis-column{overflow:visible}
  .moves{flex:0 0 auto;min-height:0;overflow:visible}
}