:root{font-family:system-ui,-apple-system,"Noto Sans JP",sans-serif;color:#26334c;background:#f5f2ea;font-synthesis:none}*{box-sizing:border-box}body{margin:0}main{max-width:620px;margin:auto;padding:20px max(16px,env(safe-area-inset-right)) 30px max(16px,env(safe-area-inset-left))}header{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:8px 0 24px;border-bottom:1px solid #dcd6ca}#brand{font-size:26px;font-weight:800;text-decoration:none;color:inherit}#brand span{display:block;font-size:11px;font-weight:400;letter-spacing:.1em}#engine-status{font-size:12px;max-width:190px;text-align:right;color:#596578}.intro{padding:26px 0 16px}.eyebrow{color:#766446;font-size:13px;letter-spacing:.13em}h1{font-size:25px;margin:8px 0}h2{font-size:18px}p{line-height:1.7}fieldset{margin:16px 0 24px;border:0;padding:0}legend{font-weight:600;margin-bottom:12px;font-size:14px}.choices{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}button{font:inherit;background:#fffdf8;border:1px solid #c9c4b9;border-radius:9px;padding:13px 12px;color:inherit;min-height:46px;cursor:pointer;touch-action:manipulation}button:focus-visible,a:focus-visible{outline:3px solid #386cbe;outline-offset:2px}button:disabled{opacity:.48;cursor:default}button[aria-pressed=true]{background:#e6eaf0;border:2px solid #26334c}small{display:block;font-size:10px;margin-top:6px;font-weight:400}.sides{grid-template-columns:1fr 1fr}.primary{background:#26334c;color:#fff;width:100%;font-weight:700;padding:17px}#resume{width:100%;margin-top:10px}.history{margin-top:32px}.history button{display:block;width:100%;text-align:left;margin-bottom:8px}.note{color:#707368;font-size:12px}#error,#storage-error{background:#f6e2da;padding:12px;border-radius:8px;color:#7c2e20}#retry{width:100%;margin-bottom:12px}.game-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:18px}.game-heading h1{font-size:20px}.game-heading button{padding:8px 12px}#move-count{font-size:13px}#turn{min-height:28px;margin:12px 0;text-align:center}.board-wrap{max-width:510px;margin:auto}#board{display:grid;grid-template-columns:repeat(9,1fr);border:2px solid #806d4d;background:#e9cf9d;aspect-ratio:1}#board button{border-radius:0;min-height:0;padding:0;border:0;border-right:1px solid #a58b5e;border-bottom:1px solid #a58b5e;background:transparent;font-size:clamp(16px,5.3vw,29px);font-weight:650;position:relative;aspect-ratio:1;opacity:1;color:#241d13}#board button:nth-child(9n){border-right:0}#board button:nth-child(n+73){border-bottom:0}#board .opponent .piece{display:inline-block;transform:rotate(180deg)}#board .promoted{color:#a12e20}#board .selected{background:#eedf66}#board .target{background:#aac5a0}#board .last{box-shadow:inset 0 0 0 3px #9b8057}#board .target:empty:after{content:"●";color:#376443;font-size:12px}.hand{display:flex;gap:4px;flex-wrap:wrap;min-height:52px;align-items:center;padding:7px 0}.hand .label{font-size:11px;min-width:45px}.hand button{padding:6px 7px;min-height:36px;font-size:17px;border-radius:5px}.hand button.selected{background:#eedf66}.hand button small{display:inline;font-size:11px;margin-left:3px}.actions{display:flex;gap:10px;justify-content:center;margin:16px 0}.actions button{flex:1}#replay-count{align-self:center;font-size:13px;white-space:nowrap}.promotion{position:fixed;z-index:3;left:50%;top:45%;transform:translate(-50%,-50%);width:min(90vw,340px);padding:20px;background:#fffdf8;border:2px solid #26334c;border-radius:12px;box-shadow:0 0 0 100vmax #26334c66;text-align:center}.promotion button{margin:4px}#last-move{text-align:center}[hidden]{display:none!important}@media(max-width:360px){main{padding:12px}.choices button{padding:10px 4px}h1{font-size:22px}}@media(prefers-reduced-motion:no-preference){button{transition:background .15s}}

/* Native modal traps focus and blocks the board and all background controls. */
dialog.promotion{margin:0;box-shadow:none}dialog.promotion:not([open]){display:none}dialog.promotion::backdrop{background:#26334c66}

.home-illustration{display:block;width:100%;height:160px;object-fit:cover;object-position:center 60%;border-radius:12px;margin-top:18px}.intro{padding-top:14px}@media(min-width:500px){.home-illustration{height:185px}}@media(max-height:700px){.home-illustration{height:130px}}
/* The hero is displayed at its authored aspect ratio, without cropping pieces. */
.home-illustration{height:auto!important;aspect-ratio:2 / 1;object-fit:contain;object-position:center}
.board-wrap{width:100%;min-width:0}
.board-files{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));padding-right:20px;text-align:center;font-size:11px;line-height:20px;color:#65553c}
.board-grid{display:grid;grid-template-columns:minmax(0,1fr) 20px;align-items:stretch}
.board-ranks{display:grid;grid-template-rows:repeat(9,minmax(0,1fr));text-align:center;font-size:11px;color:#65553c}
.board-ranks span{display:flex;align-items:center;justify-content:center}
#board button{display:flex;align-items:center;justify-content:center;min-width:0}
#board .piece{display:flex;width:82%;height:90%;align-items:center;justify-content:center;padding-top:5%;background:linear-gradient(105deg,#fff0c8,#eac48b);clip-path:polygon(50% 0,85% 19%,100% 100%,0 100%,15% 19%);text-shadow:0 1px #fff3d4;font-family:"Yu Mincho","Noto Serif JP",serif;font-weight:800}
#board .opponent .piece{display:flex;transform:rotate(180deg)}
#board .selected{outline:3px solid #26334c;outline-offset:-4px}
#board .last{box-shadow:inset 0 0 0 3px #795b28}
#board .last-from:before{content:"";position:absolute;inset:4px;border:2px dashed #795b28;pointer-events:none;z-index:1}
#board .target:after{content:"";position:absolute;width:8px;height:8px;right:2px;bottom:2px;background:#fff;border:2px solid #245938;border-radius:50%;z-index:2}
#board .target:empty:after{content:"";font-size:inherit}
.hand button.selected{outline:2px solid #26334c;outline-offset:-3px}
@media(max-width:360px){#board button{font-size:19px}main{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}.game-heading{gap:6px}.game-heading h1{font-size:18px}}
.info-nav{display:flex;flex-wrap:wrap;gap:12px 24px;margin-top:28px;padding-top:18px;border-top:1px solid #dcd6ca;font-size:13px}.info-nav a{color:#26334c;text-underline-offset:3px;padding:8px 0}.info-page h1{margin-top:28px}.info-page h2{margin-top:28px}.info-page p{font-size:15px;overflow-wrap:anywhere}
/* Game presentation: quiet indigo, restrained gold, and a familiar wooden board. */
:root{--ink:#111c30;--panel:#1b2941;--panel-raised:#24344f;--gold:#d5b36e;--text:#f7f1e5;--muted:#bec7d5;color:var(--text);background:var(--ink)}
body{background:radial-gradient(ellipse at 50% 0,#243650 0,#111c30 70%);min-height:100vh}
main{max-width:620px;padding-top:max(20px,env(safe-area-inset-top));padding-bottom:max(30px,env(safe-area-inset-bottom))}
header{border-color:#d5b36e45;padding-bottom:16px}
#brand{font-family:"Yu Mincho","Noto Serif JP",serif;letter-spacing:.15em;color:var(--text)}
#brand span{font-family:system-ui,sans-serif;color:var(--gold);letter-spacing:.12em;margin-top:4px}
#engine-status{color:var(--muted);font-size:11px;max-width:185px;line-height:1.6}
.utility-bar{display:flex;justify-content:flex-end;margin-top:10px}
#sound-toggle{font-size:11px;min-height:36px;padding:7px 12px;border-radius:20px;color:var(--muted);background:transparent;border-color:#70829d}
#sound-toggle[aria-pressed=true]{color:var(--gold);border-color:var(--gold);background:#d5b36e12}
.home-illustration{border:1px solid #d5b36e55;border-radius:12px;margin-top:10px;background:#f5f2ea;box-shadow:0 8px 24px #0003}
.intro{padding-top:16px;padding-bottom:8px}
.eyebrow{color:var(--gold);letter-spacing:.13em}
.intro h1{font-family:"Yu Mincho","Noto Serif JP",serif;font-weight:650;font-size:25px;line-height:1.5}
.intro>p:last-child{color:var(--muted);font-size:13px;margin-top:6px}
fieldset{margin:14px 0 20px}
legend{color:var(--muted);font-size:12px;letter-spacing:.08em}
button{background:var(--panel);border:1px solid #566780;color:var(--text);border-radius:8px;min-width:0}
button[aria-pressed=true]{background:var(--panel-raised);border:2px solid var(--gold)}
button:focus-visible,a:focus-visible{outline-color:#e7c781}
button:disabled{opacity:.45}
.choices button{min-height:72px;padding:12px 6px;font-weight:650}
.choices small{color:var(--muted);font-size:10px;margin-top:6px;font-weight:400}
.sides button{min-height:48px}
.primary{background:var(--gold);border-color:var(--gold);color:#162238;font-weight:750;box-shadow:0 4px 16px #0003;padding:16px}
#resume{background:transparent;border-color:var(--gold);color:var(--gold)}
.history{margin-top:28px}
.history h2{font-family:"Yu Mincho","Noto Serif JP",serif;font-size:19px;font-weight:650}
.history button{background:#18253b;font-size:12px;line-height:1.6;border-color:#41506a;overflow-wrap:anywhere}
.note{color:var(--muted);line-height:1.65}
.game-heading{gap:8px;margin-top:14px}
.game-heading h1{font-family:"Yu Mincho","Noto Serif JP",serif;font-size:20px;font-weight:650}
.game-heading button{background:transparent;border-color:#687891;font-size:12px}
#move-count{color:var(--gold);font-variant-numeric:tabular-nums;white-space:nowrap}
#turn{background:var(--panel);border:1px solid #405371;border-radius:8px;color:var(--text);padding:8px;margin-top:12px;font-size:13px;min-height:40px}
.board-files,.board-ranks{color:#dbd5c8;font-size:11px}
#board{border-color:#b8985b;background:#e7cd99;box-shadow:0 6px 18px #0003;grid-template-columns:repeat(9,minmax(0,1fr))}
#board button{border-color:#a58b5e;color:#241d13;background:transparent;border-radius:0;box-shadow:none;opacity:1}
#board .selected{background:#f4eaa3;outline-color:#26334c}
#board .target{background:#b4c9a2}
#board .promoted{color:#a12e20}
#board .piece{background:linear-gradient(105deg,#fff0c8,#eac48b)}
.hand{padding:8px 0;min-height:54px;gap:5px}
.hand .label{color:var(--muted);min-width:42px}
.hand button{background:#efd5a3;color:#241d13;border-color:#b8985b;min-height:38px;padding:6px 8px;font-family:"Yu Mincho","Noto Serif JP",serif;font-weight:750}
.hand button small{font-family:system-ui,sans-serif;font-weight:400}
.hand button.selected{background:#f4eaa3;border-color:var(--gold);outline-color:#fff}
.actions{gap:10px;margin:14px 0}
.actions button{font-size:13px;background:var(--panel);border-color:#687891}
#resign{color:#e0d1c4}
#replay-count{color:var(--muted)}
dialog.promotion{background:var(--panel);border-color:var(--gold);color:var(--text);box-shadow:0 16px 60px #0008}
dialog.promotion::backdrop{background:#050c1bbb}
dialog.promotion p{font-family:"Yu Mincho","Noto Serif JP",serif;font-size:20px}
#promote{background:var(--gold);color:#162238;border-color:var(--gold)}
#last-move{font-size:11px;overflow-wrap:anywhere}
.result-panel{margin:20px 0;padding:22px 18px;background:var(--panel);border:1px solid var(--gold);border-radius:12px;text-align:center;box-shadow:0 8px 24px #0003}
.result-panel .eyebrow{font-size:11px;margin:0 0 8px}
#result-title{font-family:"Yu Mincho","Noto Serif JP",serif;font-size:25px;line-height:1.5;margin:8px 0;color:var(--text)}
#result-detail{color:var(--muted);font-size:13px;line-height:1.7;overflow-wrap:anywhere}
.result-actions{display:grid;grid-template-columns:minmax(0,1fr);gap:9px;margin-top:16px}
.result-actions button{width:100%}
.info-nav{border-color:#d5b36e45;gap:12px 20px}
.info-nav a{color:var(--muted)}
.info-page h2{color:var(--gold)}
.info-page p{color:var(--muted)}
@keyframes shogi-arrival{0%{background-color:#f9efbb;box-shadow:inset 0 0 0 4px #b88724}100%{box-shadow:inset 0 0 0 3px #795b28}}
@media(prefers-reduced-motion:no-preference){#board .move-arrival{animation:shogi-arrival 180ms ease-out}button:not(:disabled):active{filter:brightness(1.12)}}
@media(max-width:360px){main{padding-top:max(14px,env(safe-area-inset-top))}.intro h1{font-size:22px}.game-heading h1{font-size:18px}.choices button{padding-left:4px;padding-right:4px}.result-panel{padding:18px 12px}#result-title{font-size:22px}}
@media(prefers-reduced-motion:no-preference){#board .moving{animation:shogi-arrival 180ms ease-out}}
/* Player bands keep side and opponent information close to the board. */
.opponent-heading{min-width:0;text-align:center}.opponent-heading h1{margin:0 0 4px}.level-badge{display:inline-block;font-size:10px;line-height:1.5;color:var(--gold);border:1px solid #d5b36e65;border-radius:16px;padding:2px 9px;min-height:20px}.level-badge:empty{display:none}.player-band{font-size:12px;color:var(--text);background:var(--panel);border-left:2px solid var(--gold);padding:7px 10px;margin:10px 0 3px;border-radius:0 5px 5px 0;line-height:1.5}#player-label{margin:3px 0 10px}.primary{min-height:52px}#start{font-size:16px;letter-spacing:.035em;border-bottom:3px solid #a18448}.intro{padding-top:12px;padding-bottom:2px}.intro .eyebrow{margin:8px 0 4px}.intro h1{margin-top:4px;margin-bottom:8px}fieldset{margin-top:12px}
/* Keep the board and primary game controls within a normal phone viewport. */
.header-tools{display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:0}.header-tools #engine-status{max-width:145px}.header-tools #sound-toggle{flex:none;min-height:30px;padding:5px 9px;font-size:10px}
body[data-view=game] main,body[data-view=replay] main{padding-top:max(10px,env(safe-area-inset-top));padding-bottom:max(14px,env(safe-area-inset-bottom))}
body[data-view=game] header,body[data-view=replay] header{padding:0 0 9px;gap:10px}
body[data-view=game] #brand,body[data-view=replay] #brand{font-size:21px}
body[data-view=game] #brand span,body[data-view=replay] #brand span{font-size:9px;margin-top:1px}
.game-heading{margin-top:10px;gap:8px}.opponent-heading{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px}.opponent-heading h1{font-size:18px;margin:0}.game-heading button{min-height:34px;padding:6px 10px}.level-badge{font-size:9px;padding:1px 7px;min-height:18px}#move-count{font-size:12px}
#turn{padding:4px 8px;min-height:30px;line-height:1.6;margin:8px 0 5px;font-size:12px}.player-band{font-size:11px;padding:4px 8px;margin:5px 0 0;line-height:1.5}#player-label{margin:0 0 5px}.hand{min-height:30px;padding:3px 0;gap:4px}.hand .label{display:none}.hand .note{font-size:10px}.hand button{min-height:32px;padding:4px 7px;font-size:16px}.board-files{line-height:17px}.actions{margin:8px 0;gap:8px}.actions button{min-height:40px;padding:9px}#last-move{margin:5px 0;font-size:10px}
body[data-view=game] .info-nav,body[data-view=replay] .info-nav{margin-top:14px;padding-top:8px;font-size:11px}
@media(max-width:360px){.opponent-heading{gap:4px}.opponent-heading h1{font-size:16px}.header-tools{gap:5px}.header-tools #engine-status{max-width:123px;font-size:10px}.game-heading{gap:5px}.game-heading button{padding:6px 8px}.level-badge{padding:1px 5px}}
/* Small original piece emblems differentiate choices without implying ranks. */
#levels button{position:relative;min-height:90px;padding-top:9px;padding-bottom:9px;background:#18263d}
.level-emblem{display:flex;justify-content:center;align-items:flex-end;gap:3px;height:20px;margin:0 0 6px}
.level-emblem i{display:block;width:13px;height:18px;background:#8496b3;clip-path:polygon(50% 0,83% 19%,100% 100%,0 100%,17% 19%)}
#levels button[aria-pressed=true]{border-color:var(--gold);background:#29374d;box-shadow:inset 0 -3px #d5b36e}
#levels button[aria-pressed=true] .level-emblem i{background:var(--gold)}
#levels button[aria-pressed=true]:after{content:"✓";position:absolute;right:6px;top:3px;font-size:11px;color:var(--gold)}
#replay-actions{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1fr) auto minmax(0,1fr) minmax(0,.7fr);align-items:center;gap:5px}
#replay-actions button{padding:9px 3px;min-height:40px;font-size:11px}
#replay-first,#replay-last{color:var(--gold)}
#replay-count{font-size:11px;text-align:center;min-width:32px}
#result-replay{border-color:var(--gold);color:var(--gold)}
@media(max-width:360px){#levels button{font-size:13px}.level-emblem{gap:2px}.level-emblem i{width:11px}#replay-actions{gap:3px}#replay-actions button{font-size:10px}}
/* Original wooden trays and labelled side tags around the playing board. */
body[data-view=game] main,body[data-view=replay] main{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}
.game-heading{flex-wrap:nowrap;gap:6px}.opponent-heading{flex:1;min-width:0;gap:4px}.opponent-heading h1{font-size:16px}.game-heading #undo{color:var(--gold);border-color:#b69b62;white-space:nowrap;min-width:48px}
.board-grid{grid-template-columns:minmax(0,1fr) 16px}.board-files{padding-right:16px}
.player-band{display:inline-block;font-weight:650;border-left:0;border-radius:4px;padding:3px 9px;font-size:11px;color:#fff;background:#86483f;position:relative;z-index:1;margin:5px 0 0}
#player-label{background:#315e82;margin:0 0 4px}
.hand{background:linear-gradient(100deg,#d6b780,#b89a68);border:1px solid #9d804e;padding:4px 7px;min-height:31px;border-radius:3px;box-shadow:inset 0 1px #f3ddb0;color:#241d13}
#hand-top{margin:3px 16px 2px 0}#hand-bottom{margin:3px 16px 3px 0}
.hand .note{color:#57472e;font-size:10px}.hand button{border-color:#9d804e;background:#f3dba9;box-shadow:0 1px 1px #76552455;padding:3px 6px;min-height:30px}
#board .selected{outline:0;background-color:#f4eaa3;background-image:linear-gradient(#26334c,#26334c),linear-gradient(#26334c,#26334c),linear-gradient(#26334c,#26334c),linear-gradient(#26334c,#26334c),linear-gradient(#26334c,#26334c),linear-gradient(#26334c,#26334c),linear-gradient(#26334c,#26334c),linear-gradient(#26334c,#26334c);background-size:9px 3px,3px 9px,9px 3px,3px 9px,9px 3px,3px 9px,9px 3px,3px 9px;background-position:left 2px top 2px,left 2px top 2px,right 2px top 2px,right 2px top 2px,left 2px bottom 2px,left 2px bottom 2px,right 2px bottom 2px,right 2px bottom 2px;background-repeat:no-repeat}
#game-actions #resign{flex:none;min-width:110px;padding:7px 18px;min-height:36px}
@media(max-width:360px){.game-heading{gap:4px}.opponent-heading h1{font-size:14px}.game-heading button{padding:6px 6px;font-size:11px}.game-heading #undo{min-width:43px}.level-badge{font-size:8px}.player-band{font-size:10px}}
body[data-view=replay] #undo{display:none}
/* Compact game home: a small image header followed directly by match settings. */
#home .home-banner{position:relative;margin:14px 0 16px;height:124px;border-radius:10px;overflow:hidden;border:1px solid #d5b36e45;background:#15223a}
#home .home-illustration{display:block;width:100%;height:100%!important;aspect-ratio:auto;object-fit:cover;object-position:center 58%;margin:0;border:0;border-radius:0;box-shadow:none;opacity:.7}
#home .home-banner:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#142137ee,#14213766 55%,transparent);pointer-events:none}
#home .intro{position:absolute;left:18px;top:50%;transform:translateY(-50%);padding:0;z-index:1}
#home .intro .eyebrow{margin:0 0 6px;font-size:11px;letter-spacing:.15em;color:#e5c583}
#home .intro h1{margin:0;font-size:26px;font-family:"Yu Mincho","Noto Serif JP",serif;line-height:1.4;text-shadow:0 2px 8px #0005}
#home .match-setup{background:#18263b;border:1px solid #41536e;border-radius:10px;padding:16px 14px}
#home fieldset{margin:0 0 17px}
#home legend{margin-bottom:9px;color:#d4dbe6;font-size:12px;letter-spacing:.04em}
#home #levels button{min-height:84px;background:#203049;border-color:#627089}
#home #levels button[aria-pressed=true]{border-color:var(--gold);background:#2b3a50}
#home .choices{gap:7px}
#home .sides button{min-height:44px;padding:10px}
#home #start{min-height:52px;padding:14px;font-size:16px;margin-top:1px;letter-spacing:.04em}
#home #resume{min-height:44px;margin-top:9px;padding:11px;font-size:13px}
#home .history{margin-top:22px}
#home .history h2{font-family:system-ui,sans-serif;font-size:15px;font-weight:650;margin:0 0 12px;color:#e2e7ef}
#home .history .note{margin-top:0;font-size:12px}
#home>.note{font-size:10px;margin-top:16px;color:#aebbcf}
@media(max-width:360px){#home .home-banner{height:106px;margin:12px 0 14px}#home .intro{left:14px}#home .intro h1{font-size:23px}#home .match-setup{padding:14px 11px}#home #levels button{min-height:82px}#home .choices{gap:5px}}
/* Game home hierarchy: identity, new match, and saved play as separate entries. */
#home .home-banner{height:144px;border-color:#b59a64;margin-bottom:17px}
#home .home-illustration{opacity:.94;object-position:center 62%}
#home .home-banner:after{background:linear-gradient(90deg,#132037e8,#13203788 40%,transparent 72%)}
#home .intro{left:22px}
#home .intro .eyebrow{font-size:10px;letter-spacing:.18em;color:#e8d2a5;margin-bottom:3px}
#home .intro h1{font-size:40px;font-weight:650;letter-spacing:.16em;line-height:1.2;margin:2px 0 8px}
.mode-tag{display:inline-block;color:#f2d99f;font-size:10px;letter-spacing:.1em;padding:3px 9px;border:1px solid #d5b36e99;border-radius:4px;background:#162339cc}
#home .match-setup{padding:16px 14px 14px;background:#19273b;border-color:#576680;box-shadow:0 5px 16px #0002}
.setup-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:15px;padding-bottom:11px;border-bottom:1px solid #52627b}
.setup-heading h2{margin:0;font-size:15px;color:#f0e8d8;font-weight:650}
.setup-heading>span{font-size:10px;color:#aebed3}
#home fieldset{margin-bottom:14px}
#home legend{font-size:11px;letter-spacing:.05em;margin-bottom:7px}
#home #levels button{min-height:80px;border-radius:6px;background:#223149;box-shadow:0 2px 3px #0002;padding-top:8px;padding-bottom:8px}
#home #levels button[aria-pressed=true]{background:#354057;border-color:#dfbf7d;box-shadow:inset 0 -3px #dfbf7d,0 2px 5px #0003}
#home .level-emblem{margin-bottom:5px;height:18px}
#home .choices small{margin-top:4px}
#home .sides button{font-size:13px;min-height:44px;background:#162237}
#home .sides button[aria-pressed=true]{background:#2d3a51}
#home #start{min-height:56px;font-size:17px;background:#e0bd79;border-color:#e4ca94;border-bottom:3px solid #a68950;box-shadow:0 5px 12px #0004;margin-top:3px;letter-spacing:.06em}
#home .resume-entry:has(#resume[hidden]){display:none}
#home .resume-entry{margin-top:13px}
#home #resume{display:block;min-height:50px;width:100%;padding:13px 16px;margin:0;background:#25344b;border:1px solid #bca06a;border-left:4px solid #d5b36e;color:#f1d6a0;font-size:14px;text-align:left;box-shadow:0 3px 10px #0002}
#home #resume:after{content:"›";float:right;font-size:20px;line-height:1}
#home .history{margin-top:20px;padding:15px 14px;background:#172438;border:1px solid #3d506b;border-radius:9px}
#home .history h2{font-size:14px;color:#ded8ca;margin-bottom:11px}
#home .history button{min-height:48px;border-color:#596b82;background:#203049;margin-bottom:7px}
#home .history button:last-child{margin-bottom:0}
#home .history .note{font-size:11px;color:#aebed3;margin:0}
@media(max-width:360px){#home .home-banner{height:128px}#home .intro{left:18px}#home .intro h1{font-size:35px}#home .match-setup{padding:14px 11px 12px}.setup-heading{margin-bottom:12px;padding-bottom:9px}.setup-heading>span{font-size:9px}#home #levels button{min-height:78px}#home #start{font-size:16px;min-height:54px}#home .history{padding:13px 11px}}
/* The home is a menu; match settings and saved games are separate destinations. */
#home .menu-art{position:relative;margin:18px 0 20px;border:1px solid #a98e58;border-radius:10px;overflow:hidden;background:#17243a}
#home .menu-art .home-illustration{width:100%;height:auto!important;aspect-ratio:2 / 1;object-fit:contain;margin:0;border:0;border-radius:0;opacity:1;box-shadow:none}
.menu-art-caption{position:absolute;left:0;right:0;bottom:0;padding:13px 18px;background:linear-gradient(transparent,#0d182dcc);font-size:12px;letter-spacing:.08em;color:#f3ddaf}
.home-menu-actions{display:grid;gap:12px}.home-menu-actions>button{position:relative;width:100%;text-align:left;min-height:62px;padding:14px 18px;border-radius:8px}.home-menu-actions>button span{display:block;font-size:18px;font-weight:750}.home-menu-actions>button small{font-size:11px;line-height:1.5;margin-top:5px;color:#31415b}.home-menu-actions>button b{position:absolute;right:17px;top:50%;transform:translateY(-50%);font-size:27px;font-weight:400}#new-match{min-height:86px;background:#dfbd7b;border:1px solid #efd69f;border-bottom:3px solid #9e824a;color:#152137;box-shadow:0 5px 14px #0004}#home #resume{margin:0;text-align:left;min-height:60px;padding:16px 18px}#open-history{background:#24334a;border-color:#536880;color:#f2e9d6}#open-history small{color:#bac6d8}.home-save-note{margin:17px 0 0;text-align:center;color:#aebbcf}
.home-subheading{display:flex;align-items:center;gap:15px;margin:20px 0}.home-subheading button{min-height:44px;min-width:58px;background:transparent}.home-subheading h1{font-size:22px;font-family:"Yu Mincho","Noto Serif JP",serif;margin:0}#home-setup .match-setup{padding:22px 16px}#home-setup fieldset{margin:0 0 24px}#home-setup #levels button{min-height:94px}#home-setup .sides button{min-height:48px}#home-setup #start{margin-top:4px}#home-setup .note{margin:15px 0 0;font-size:11px}#home-history .history{margin-top:0;padding:15px 12px}#home-history .history button{min-height:56px}#home-history>.note{font-size:11px;color:#bac6d8}
@media(max-width:360px){#home .menu-art{margin-top:14px;margin-bottom:17px}.home-menu-actions{gap:10px}.home-menu-actions>button{padding-left:16px}.home-menu-actions>button span{font-size:17px}.home-subheading{gap:12px}.home-subheading h1{font-size:20px}#home-setup .match-setup{padding:18px 12px}#home-setup #levels button{min-height:90px}}
/* A single shogi stage, with the match action as its centrepiece. */
#home-menu{position:relative;isolation:isolate;min-height:530px;padding:24px 18px 18px;margin-top:14px;overflow:hidden;border:1px solid #b59962;border-radius:10px;background:#17243b;box-shadow:0 10px 24px #0003}
#home .menu-art{position:absolute;inset:0;z-index:-2;margin:0!important;border:0;border-radius:0;background:#15233a}
#home .menu-art .home-illustration{width:100%;height:100%!important;aspect-ratio:auto;object-fit:cover;object-position:center;opacity:.85}
#home .menu-art:after{content:"";position:absolute;inset:0;background:linear-gradient(#111b2be0 0%,#111b2b35 34%,#111b2b88 58%,#121d30f5 100%);pointer-events:none}
.menu-art-caption{position:absolute;top:25px;bottom:auto;left:0;right:0;z-index:1;text-align:center;padding:0 12px;background:none;color:#f6dfa7}
.menu-art-caption p{margin:0 0 6px;font-size:10px;letter-spacing:.23em;color:#ddc9a1}
.menu-art-caption h1{font-family:"Yu Mincho","Noto Serif JP",serif;font-size:45px;font-weight:650;letter-spacing:.24em;margin:0 0 8px;padding-left:.24em;line-height:1.25;text-shadow:0 2px 15px #0009}
.menu-art-caption>span{font-size:11px;color:#e5ddce;letter-spacing:.08em}
#home-menu .home-menu-actions{gap:12px;padding-top:214px}
#home-menu #new-match{position:relative;min-height:88px;text-align:center;color:#fff0d8;background:linear-gradient(#a73d31,#812d26);border:1px solid #edb375;border-bottom:4px solid #541d1a;box-shadow:0 5px 18px #0007,inset 0 1px #e99565;border-radius:8px;padding:14px 18px}
#new-match span{font-family:"Yu Mincho","Noto Serif JP",serif!important;font-size:27px!important;letter-spacing:.1em}
#home-menu #new-match small{color:#f3d1b8;font-size:10px;letter-spacing:.06em}
#new-match b{display:none}
#home-menu #resume{min-height:52px;background:#ead4a1;color:#26324a;border:1px solid #f0dfb7;border-left:4px solid #aa7832;box-shadow:0 4px 12px #0004;text-align:center;font-weight:650;padding:13px 18px}
#home-menu #resume:after{display:none}
.menu-secondary{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;margin-top:7px}
#home-menu #open-history,.menu-help{min-height:68px;text-align:center;padding:12px 5px;background:#17283bcc;border:1px solid #b39660;border-radius:7px;color:#efd8a8;box-shadow:0 3px 10px #0003;text-decoration:none;display:flex;flex-direction:column;justify-content:center}
#home-menu #open-history span,.menu-help span{font-size:15px;font-weight:650;line-height:1.4}
#home-menu #open-history small,.menu-help small{font-size:9px;color:#cbd4df;margin-top:5px;line-height:1.4}
#home-menu .home-save-note{font-size:9px;color:#becad9;margin:17px 0 0}
@media(max-width:360px){#home-menu{min-height:500px;padding:20px 13px 16px}.menu-art-caption{top:23px}.menu-art-caption h1{font-size:40px}#home-menu .home-menu-actions{padding-top:195px}#home-menu #new-match{min-height:82px}.menu-secondary{gap:8px}#home-menu #open-history small,.menu-help small{font-size:8px}}
#home-menu .home-menu-actions:has(#resume:not([hidden])) #resume{order:0}#home-menu .home-menu-actions:has(#resume:not([hidden])) #new-match{order:1}#home-menu .home-menu-actions:has(#resume:not([hidden])) .menu-secondary{order:2}
/* Readable playing surface: flat warm tones and bold, larger piece characters. */
#game #board{background:#e8cfa2;border:2px solid #8a6b39;box-shadow:0 3px 10px #0003;grid-template-columns:repeat(9,minmax(0,1fr))}
#game #board button{font-size:clamp(22px,7.1vw,32px);font-weight:850;line-height:1;border-color:#967746;color:#17120b}
#game #board .piece{width:86%;height:92%;padding-top:5%;background:#fff3d6;color:#17120b;font-family:system-ui,"Noto Sans JP",sans-serif;font-weight:850;text-shadow:none;letter-spacing:0}
#game #board .opponent .piece{transform:rotate(180deg)}
#game #board .promoted .piece{color:#a22218}
#game #board .selected{background-color:#d7e6ee;background-image:linear-gradient(#17486b,#17486b),linear-gradient(#17486b,#17486b),linear-gradient(#17486b,#17486b),linear-gradient(#17486b,#17486b),linear-gradient(#17486b,#17486b),linear-gradient(#17486b,#17486b),linear-gradient(#17486b,#17486b),linear-gradient(#17486b,#17486b)}
#game #board .last{box-shadow:inset 0 0 0 3px #99691e}
#game #board .last-from:before{border-color:#674616;border-width:2px;inset:4px}
#game #board .target{background-color:#bbd4ba}
#game #board .target:after{background:#fff;border-color:#17492a;width:9px;height:9px;right:2px;bottom:2px}
#game .board-files,#game .board-ranks{color:#f1eadc;font-size:12px;font-weight:650}
#game .player-band{font-family:system-ui,sans-serif;font-size:12px;font-weight:750;padding:4px 9px;line-height:1.4;color:#fff;background:#874337}
#game #player-label{background:#27587f}
#game .hand{background:#dcc193;border-color:#9a7843;box-shadow:none;min-height:37px;padding:4px 7px;gap:5px}
#game .hand .note{font-size:12px;color:#49391f;line-height:1.5}
#game .hand button{min-width:44px;min-height:44px;padding:5px 7px;background:#fff1d1;border:1px solid #9a7843;color:#17120b;font-size:23px;font-family:system-ui,"Noto Sans JP",sans-serif;font-weight:850;box-shadow:none}
#game .hand button small{font-size:12px;font-weight:650}
#game .hand button.selected{outline:3px solid #17486b;outline-offset:-3px;background:#e4edf2}
#game .game-heading{gap:6px;margin-top:8px;align-items:center}
#game .game-heading h1{font-family:system-ui,sans-serif;font-size:15px;font-weight:750}
#game .game-heading button{min-height:44px;padding:8px 10px;font-size:12px}
#game .level-badge{font-size:10px;padding:2px 6px}
#game #turn{font-size:14px;font-weight:650;color:#f9f4e9;min-height:32px;padding:5px 8px;background:#23344e;border-color:#607391;margin-top:7px}
#game #move-count{font-size:12px;color:#ead5a4}
#game #game-actions #resign{min-height:44px;padding:9px 20px}
#game #replay-actions button{min-height:44px;font-size:12px}
#game #last-move{font-size:11px;color:#c8d2e0}
body[data-view=game] #engine-status,body[data-view=replay] #engine-status{font-size:11px;color:#d1dbea}
body[data-view=game] #sound-toggle,body[data-view=replay] #sound-toggle{min-height:44px;min-width:44px;padding:7px 8px;font-size:11px}
@media(max-width:360px){#game .game-heading{gap:4px}#game .game-heading h1{font-size:13px}#game .game-heading button{padding:7px 6px;font-size:11px}#game .level-badge{font-size:9px;padding:2px 4px}#game #replay-actions button{font-size:10px}#game #board button{font-size:22px}}
/* An original traditional board: taller squares, vertical names, and four star points. */
body[data-view=game] main,body[data-view=replay] main{padding-left:max(6px,env(safe-area-inset-left));padding-right:max(6px,env(safe-area-inset-right))}
#game .board-grid{grid-template-columns:minmax(0,1fr) 15px}
#game .board-files{padding-right:15px}
#game #board{position:relative;aspect-ratio:590 / 640;grid-template-rows:repeat(9,minmax(0,1fr));border:2px solid #7a562b;background-color:#dfba78;background-image:repeating-linear-gradient(90deg,#e8c68a22 0 1px,transparent 1px 7px),repeating-linear-gradient(91deg,transparent 0 17px,#91622210 17px 18px);box-shadow:0 2px 0 #4d321b,0 5px 13px #0004}
#game #board button{aspect-ratio:auto;height:100%;border-color:#906b36;min-height:0;min-width:0;background-color:transparent;font-size:clamp(17px,4.9vw,24px);line-height:1;overflow:visible}
#game #board .piece{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:0;width:83%;height:92%;padding:10% 0 2%;clip-path:polygon(50% 0,84% 17%,100% 100%,0 100%,16% 17%);background:linear-gradient(100deg,#efcf90,#f7dcaa 50%,#e6bb73);box-shadow:inset 0 -3px #855529;filter:drop-shadow(0 1px 1px #5d3d1e99);color:#201307;font-family:"Yu Mincho","Noto Serif JP","Hiragino Mincho ProN",serif;font-weight:900;text-shadow:0 .3px #201307}
#game #board .piece-line{display:block;line-height:.98;font-size:inherit;letter-spacing:0}
#game #board .single-character{font-size:1.35em;padding-top:5%}
#game #board .opponent .piece{transform:rotate(180deg)}
#game #board .promoted .piece{color:#a21e14;text-shadow:0 .3px #a21e14}
#game #board:after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background-image:radial-gradient(circle at 33.333333% 33.333333%,#24180c 0 2.4px,transparent 2.8px),radial-gradient(circle at 66.666667% 33.333333%,#24180c 0 2.4px,transparent 2.8px),radial-gradient(circle at 33.333333% 66.666667%,#24180c 0 2.4px,transparent 2.8px),radial-gradient(circle at 66.666667% 66.666667%,#24180c 0 2.4px,transparent 2.8px)}
#game #board .selected{background-color:#ead99b}
#game #board .target{background-color:#bbd4ba}
#game #hand-top,#game #hand-bottom{margin-right:15px}
#game .game-heading{margin-top:6px}
#game #turn{margin-top:5px;margin-bottom:3px;font-size:13px;min-height:30px;padding:4px 8px}
#game .player-band{padding:3px 8px;font-size:11px;line-height:1.4;margin-top:3px}
#game #player-label{margin-bottom:3px}
#game .hand{min-height:31px;padding:3px 6px}
#game #last-move{margin:3px 0;font-size:10px}
body[data-view=game] .info-nav,body[data-view=replay] .info-nav{margin-top:9px;padding-top:6px}
@media(max-width:360px){#game #board button{font-size:17px}#game .game-heading h1{font-size:13px}#game #turn{font-size:12px}}
#game #board button{font-size:clamp(15px,4.6vw,23px)}#game #board .piece-line{line-height:.94}@media(max-width:360px){#game #board button{font-size:15px}}

/* Hide visual board coordinates and reclaim their gutter. */
#game .board-files,#game .board-ranks{display:none}#game .board-grid{grid-template-columns:minmax(0,1fr)}#game #hand-top,#game #hand-bottom{margin-right:0}