:root{color-scheme:dark;--bg:#101b23;--panel:#192a35;--gold:#edc77c;--muted:#a3b5bf;--line:#354b57}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 80% 0,#294650 0,transparent 55%),var(--bg);color:#f8f2e7;font-family:system-ui,'Yu Gothic',sans-serif;line-height:1.65}header,main,footer{max-width:1240px;margin:auto;padding:24px}header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}header a{font-size:26px;font-weight:800;color:var(--gold);text-decoration:none}header small{font:12px system-ui;letter-spacing:.15em;margin-left:10px}header span,.muted,.footnote,footer{color:var(--muted);font-size:13px}.intro{padding:42px 0 24px}.eyebrow,article small{color:var(--gold);font-size:12px;letter-spacing:.15em}h1{font-family:'Yu Mincho',serif;font-size:clamp(32px,4vw,52px);line-height:1.3;margin:14px 0}h2{font-size:22px;margin:10px 0}p{margin:12px 0}.intro>p:last-child{color:var(--muted)}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}article{position:relative;padding:26px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(150deg,#233944,#17262f);display:flex;flex-direction:column;overflow:hidden}article img{height:170px;object-fit:contain;align-self:flex-end;margin-bottom:10px;filter:drop-shadow(0 10px 15px #0005)}article p{font-size:14px}article button{margin-top:auto}button,select{font:inherit;border-radius:8px;padding:12px 14px;border:1px solid transparent}button{background:var(--gold);color:#232521;font-weight:700;cursor:pointer}button:hover{filter:brightness(1.1)}button:focus-visible,select:focus-visible{outline:3px solid #63deec;outline-offset:3px}button:disabled{opacity:.5;cursor:default}.secondary{color:#f8f2e7;background:#273b48;border-color:var(--line)}label{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px;margin:4px 0 14px}select{background:#0e1c26;color:#fff;max-width:73%;padding:8px}article button{width:100%;margin-top:18px}.footnote{padding-top:12px}.game-heading{display:flex;justify-content:space-between;align-items:center;margin:20px 0}.game-heading h1{font-size:30px}.play-layout{display:grid;grid-template-columns:minmax(0,720px) minmax(260px,1fr);gap:28px}.player{display:flex;justify-content:space-between;color:var(--gold);padding:10px 0}#board{display:grid;grid-template-columns:repeat(var(--width,9),1fr);aspect-ratio:var(--width,9)/9;border:7px solid #6b4521;border-radius:3px;background:#e7be7a;width:100%;max-height:78vh;margin:auto}.square{position:relative;background:repeating-linear-gradient(92deg,#ebc785 0,#ebc785 3px,#e7be7a 4px,#e7be7a 6px);border:1px solid #876032;border-radius:0;padding:0;min-width:0;display:grid;place-items:center;color:#221506;line-height:1}.square .piece{display:grid;place-items:center;clip-path:polygon(50% 0,87% 16%,98% 100%,2% 100%,13% 16%);background:#f3d79d;width:79%;height:85%;font-family:'Yu Mincho',serif;font-size:clamp(18px,3vw,35px);text-shadow:0 1px 0 #fff8;box-shadow:inset 0 -3px 0 #b0853e}.square .gote{transform:rotate(180deg)}.piece.promoted{color:#a62420}.square.selected{background:#8fbc97}.square.target:after{content:'';width:22%;height:22%;border-radius:50%;background:#236d78cc;position:absolute}.square.last{box-shadow:inset 0 0 0 3px #ba6232}.square.fog{background:#33444c}.square.fog .piece{background:#d5b57d}.hand{background:#172a35;border:1px solid var(--line);padding:9px;min-height:58px;display:flex;flex-wrap:wrap;gap:5px;align-items:center}.hand button{padding:6px 10px}.hand .selected{outline:3px solid #63deec}.panel{background:#172831;border:1px solid var(--line);border-radius:12px;padding:20px;margin-bottom:14px}.panel h2{font-size:17px}.panel p{font-size:13px;color:var(--muted)}#status{font-size:22px;font-weight:750;color:var(--gold)}#status.flash{color:#15232b;background:#ffe0a2;padding:12px;border-radius:8px}.actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}.actions button{font-size:12px;padding:8px}#history{max-height:230px;overflow:auto;padding-left:30px;font-size:13px}#stock{display:flex;flex-wrap:wrap;gap:5px}#stock button{padding:6px}#stock .selected{outline:3px solid #63deec}#setup>button{margin:5px 0}#votes{font-size:13px}.vote-row{margin:8px 0;padding:6px 8px;background:linear-gradient(90deg,#43676d var(--votes),#233741 var(--votes));border-radius:5px}dialog{border:1px solid var(--gold);background:var(--panel);color:white;border-radius:14px;padding:26px}dialog::backdrop{background:#0009}dialog button{margin:5px}footer{border-top:1px solid var(--line);display:flex;justify-content:space-between;margin-top:35px}[hidden]{display:none!important}@media(max-width:850px){.cards{grid-template-columns:1fr}.intro{padding-top:20px}article img{position:absolute;right:14px;top:22px;height:120px;width:100px}article>small,article>h2,article>p{padding-right:90px}.play-layout{grid-template-columns:1fr}.game-heading{gap:10px}.game-heading button{font-size:12px}.square .piece{font-size:clamp(19px,6vw,35px)}header span{max-width:115px;text-align:right}main,header,footer{padding:16px}#board{max-height:none}aside .panel{padding:15px}}

/* Production traditional piece styles */
/* Ver.0.19.18 — definitive traditional koma layout: centered, contained, readable */
html[data-viewer-mode="traditional"] #board .square{
  position:relative!important;
  display:grid!important;
  place-items:center!important;
  overflow:hidden!important;
}
html[data-viewer-mode="traditional"] #board .square > .piece.board-character-piece{
  position:relative!important;
  inset:auto!important;
  left:auto!important;top:auto!important;right:auto!important;bottom:auto!important;
  width:74%!important;height:82%!important;
  min-width:0!important;min-height:0!important;max-width:74%!important;max-height:82%!important;
  margin:0!important;padding:0!important;
  transform:none!important;transform-origin:50% 50%!important;
  display:grid!important;place-items:center!important;
  overflow:hidden!important;
  clip-path:polygon(50% 0%,91% 17%,86% 100%,14% 100%,9% 17%)!important;
  background:linear-gradient(145deg,#f8dda1 0%,#edc77e 43%,#dda85b 77%,#c58b3e 100%)!important;
  border:0!important;border-radius:0!important;
  filter:drop-shadow(0 2px 1px rgba(255,245,214,.55)) drop-shadow(0 3px 2px rgba(57,28,5,.38))!important;
}
html[data-viewer-mode="traditional"] #board .square > .piece.board-character-piece.gote-char{
  transform:rotate(180deg)!important;
}
html[data-viewer-mode="traditional"] #board .square > .piece.board-character-piece .board-character-label{
  position:absolute!important;inset:0!important;
  width:100%!important;height:100%!important;
  margin:0!important;padding:10% 9% 7%!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  overflow:hidden!important;
  background:transparent!important;border:0!important;box-shadow:none!important;
  transform:none!important;
  color:#17100a!important;
  font-family:"Yu Mincho","YuMincho","Hiragino Mincho ProN","MS PMincho",serif!important;
  font-size:clamp(15px,1.72vw,25px)!important;font-weight:900!important;
  line-height:.92!important;letter-spacing:-.08em!important;
  writing-mode:vertical-rl!important;text-orientation:upright!important;text-align:center!important;
  white-space:normal!important;
  text-shadow:0 1px 0 rgba(255,246,218,.78)!important;
}
html[data-viewer-mode="traditional"] #board .square > .piece.board-character-piece.promoted .board-character-label,
html[data-viewer-mode="traditional"] #board .square > .piece.board-character-piece .promoted-stack,
html[data-viewer-mode="traditional"] #board .square > .piece.board-character-piece .promoted-stack span{
  color:#b51f18!important;
}
/* Cancel all historical edge nudges; every square uses the same geometry. */
html[data-viewer-mode="traditional"] #board .square[data-file] > .piece.board-character-piece,
html[data-viewer-mode="traditional"] #board .square[data-rank] > .piece.board-character-piece{
  margin:0!important;
}
html[data-viewer-mode="traditional"] #board .square[data-file] > .piece.board-character-piece.sente-char,
html[data-viewer-mode="traditional"] #board .square[data-rank] > .piece.board-character-piece.sente-char{
  transform:none!important;
}
html[data-viewer-mode="traditional"] #board .square[data-file] > .piece.board-character-piece.gote-char,
html[data-viewer-mode="traditional"] #board .square[data-rank] > .piece.board-character-piece.gote-char{
  transform:rotate(180deg)!important;
}

/* Ver.0.19.19 — GOTE promoted L/N/S: rotate once with the whole piece.
   The parent .gote-char already rotates 180deg; cancel the historical
   inner promoted-stack rotation that caused the red kanji to rotate back. */
html[data-viewer-mode="traditional"] #board .square > .piece.board-character-piece.gote-char .promoted-stack.gote-promoted-stack{
  transform:none!important;
  transform-origin:center center!important;
  color:#b51f18!important;
}

/* ============================================================
   Ver.0.19.20 — Traditional board piece geometry consolidation
   One authoritative rule set for all ordinary shogi pieces.
   This block intentionally overrides historical label nudges.
   ============================================================ */
html[data-viewer-mode="traditional"] #board .square > .piece.board-character-piece{
  position:relative!important;
  inset:auto!important;
  width:78%!important;
  height:86%!important;
  margin:0!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
  transform:none!important;
  transform-origin:50% 50%!important;
}
html[data-viewer-mode="traditional"] #board .square > .piece.board-character-piece.sente-char{
  transform:none!important;
}
html[data-viewer-mode="traditional"] #board .square > .piece.board-character-piece.gote-char{
  transform:rotate(180deg)!important;
}
html[data-viewer-mode="traditional"] #board .square > .piece.board-character-piece .board-character-label,
html[data-viewer-mode="traditional"] #board .square[data-file] > .piece.board-character-piece .board-character-label,
html[data-viewer-mode="traditional"] #board .square[data-rank] > .piece.board-character-piece .board-character-label{
  position:absolute!important;
  inset:0!important;
  left:0!important;
  right:0!important;
  top:0!important;
  bottom:0!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  margin:0!important;
  padding:8% 7% 6%!important;
  box-sizing:border-box!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  transform:none!important;
  color:#17100a!important;
  font-family:"Yu Mincho","YuMincho","Hiragino Mincho ProN","MS PMincho",serif!important;
  font-size:clamp(15px,1.72vw,25px)!important;
  font-weight:900!important;
  line-height:1!important;
  letter-spacing:0!important;
  writing-mode:vertical-rl!important;
  text-orientation:upright!important;
  text-align:center!important;
  white-space:normal!important;
  text-shadow:0 1px 0 rgba(255,246,218,.78)!important;
}
/* The parent gote piece already rotates 180deg. Never rotate its glyph again. */
html[data-viewer-mode="traditional"] #board .square > .piece.board-character-piece.gote-char .board-character-label{
  transform:none!important;
}
/* Promoted labels share exactly the same geometry; only their color changes. */
html[data-viewer-mode="traditional"] #board .square > .piece.board-character-piece.promoted .board-character-label,
html[data-viewer-mode="traditional"] #board .square > .piece.board-character-piece .promoted-stack,
html[data-viewer-mode="traditional"] #board .square > .piece.board-character-piece .promoted-stack span{
  color:#b51f18!important;
  writing-mode:vertical-rl!important;
  text-orientation:upright!important;
  transform:none!important;
}
/* Mobile: keep the same vertical glyph system instead of switching the pawn
   or any other piece to horizontal text. */
@media(max-width:600px){
  html[data-viewer-mode="traditional"] #board .square > .piece.board-character-piece{
    width:80%!important;
    height:87%!important;
  }
  html[data-viewer-mode="traditional"] #board .square > .piece.board-character-piece .board-character-label{
    font-size:clamp(13px,4.15vw,20px)!important;
    line-height:.96!important;
    letter-spacing:0!important;
    writing-mode:vertical-rl!important;
    text-orientation:upright!important;
  }
}

/* Demo frame: fixed nine rows, square cells, production wood surface. */
.game-heading{margin:8px 0 16px}.game-heading .eyebrow{margin:3px 0}.game-heading h1{margin:4px 0}.game-heading #subtitle{margin:4px 0}.play-layout{align-items:start;grid-template-columns:minmax(0,690px) minmax(260px,1fr)}
.board-frame{--width:9;display:grid;grid-template-columns:minmax(0,1fr) 24px;grid-template-rows:26px auto;padding:7px;background:#2a1608;border:1px solid #7b4b20;border-radius:3px;width:min(100%,calc(var(--width)*72px + 40px));margin:0 auto}
.file-labels{grid-column:1;grid-row:1;display:grid;grid-template-columns:repeat(var(--width),minmax(0,1fr));align-items:center;text-align:center;padding:0 5px;color:#f3ce76;font-weight:700;font-size:16px}
.rank-labels{grid-column:2;grid-row:2;display:grid;grid-template-rows:repeat(9,minmax(0,1fr));align-items:center;text-align:center;padding:5px 0;color:#f3ce76;font-family:'Yu Mincho',serif;font-size:16px;font-weight:700}
#board{grid-column:1;grid-row:2;box-sizing:content-box;width:calc(100% - 10px);height:auto;max-height:none;min-height:0;aspect-ratio:var(--width)/9;grid-template-columns:repeat(var(--width),minmax(0,1fr));grid-template-rows:repeat(9,minmax(0,1fr));border:5px solid #7b4a20;border-radius:2px;background:repeating-linear-gradient(91deg,rgba(86,48,13,.055) 0 1px,transparent 1px 8px),repeating-linear-gradient(89deg,rgba(255,247,217,.09) 0 2px,transparent 2px 23px),linear-gradient(90deg,#d6a354 0%,#ebc274 14%,#d9a75b 30%,#efc980 48%,#d7a257 67%,#e9bf72 84%,#d3a052 100%);box-shadow:0 8px 22px #0005}
#board .square{min-width:0;min-height:0;border:0;border-right:1.35px solid rgba(57,31,11,.78);border-bottom:1.35px solid rgba(57,31,11,.78);background:transparent;filter:none}
#board .square.selected{background:#ffe28c;box-shadow:inset 0 0 0 3px #b08028}#board .square.fog{background:#33444c}#board .square.target:after{z-index:3}
.hand button{background:linear-gradient(#e7bb73,#c88f47);color:#171009;border-color:#8c5b25;font-family:'Yu Mincho',serif;font-weight:900}
@media(max-width:850px){.play-layout{grid-template-columns:1fr}.board-frame{grid-template-columns:minmax(0,1fr) 20px;grid-template-rows:22px auto;padding:4px}.file-labels,.rank-labels{font-size:13px}}

html[data-viewer-mode="traditional"] #board .square > .piece.board-character-piece{box-shadow:none!important;}

.training-settings{display:flex;flex-wrap:wrap;gap:12px 28px;padding:20px;border:1px solid var(--line);border-radius:12px;margin-bottom:24px;background:var(--panel)}.training-settings label{min-width:245px;margin:0}.training-settings p{width:100%;color:var(--muted);font-size:13px;margin:0}#ai-error{color:#ffb5b5!important}#level-label{color:var(--gold);font-weight:700;margin-top:0}footer a{color:var(--gold)}.cards{grid-template-columns:repeat(2,minmax(0,1fr))}@media(max-width:700px){.cards{grid-template-columns:1fr}.training-settings label{width:100%;min-width:0}}

/* v1.1.2: supplied artwork stays complete on desktop and mobile. */
header{flex-wrap:wrap;gap:14px}header .site-links{display:flex;flex-wrap:wrap;gap:8px;width:100%;padding-top:4px}header .site-links a{display:inline-flex;align-items:center;justify-content:center;font-family:inherit;font-size:14px;font-weight:650;line-height:1.4;color:#f8f2e7;border:1px solid #4b6470;border-radius:7px;background:#203641;padding:9px 15px;text-decoration:none}header .site-links a:hover,header .site-links a:focus-visible{background:#36505c;border-color:var(--gold)}header .site-links a[aria-current="page"]{background:var(--gold);color:#15232b;border-color:var(--gold)}
.cards article{padding:22px;gap:0}.cards article .game-art{width:100%;aspect-ratio:16/9;display:flex;justify-content:center;align-items:center;overflow:hidden;border-radius:9px;background:#101f28;margin:0 0 20px}.cards article .game-art img{position:static;inset:auto;display:block;width:100%;height:100%;max-height:100%;object-fit:contain;object-position:center;margin:0;align-self:auto;filter:none}.cards article .standard-art{gap:5%;padding:12px;background:radial-gradient(ellipse at 50% 70%,#365268,#172831 70%)}.cards article .standard-art img{width:44%;height:100%;object-fit:contain;filter:drop-shadow(0 8px 9px #0005)}.cards article .kishin-art{background:#dceefe}.cards article>small,.cards article>h2,.cards article>p{padding-right:0}.cards article button{margin-top:auto}.cards article label:last-of-type{margin-bottom:18px}
@media(max-width:700px){header .site-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}header .site-links a{font-size:12px;padding:9px 4px;white-space:nowrap}.cards article{padding:18px}.cards article .game-art{margin-bottom:15px}}

.game-options{margin-bottom:24px}.game-options h2{margin-top:0}.game-options-fields,.game-options-fields>div{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px}.game-options-fields label{margin:0;gap:12px}.game-options-fields select{max-width:none}.game-options-fields button{font-size:14px}.game-options p{margin-bottom:0}@media(max-width:600px){.game-options-fields,.game-options-fields>div{align-items:stretch;flex-direction:column;width:100%}.game-options-fields label{justify-content:space-between}}

/* Darkness: uniform dark squares, with grid lines, visible pieces and move hints. */
#board.dark-board{background:#33444c}
#board.dark-board .square{background:transparent;border-color:rgba(57,31,11,.78);box-shadow:none}
#board.dark-board .square.selected>.piece{outline:3px solid #ffe28c;outline-offset:2px;filter:drop-shadow(0 0 5px #ffe28c)}
#board.dark-board .square.target:after{background:#83d9e4}
#board.dark-board .square:focus-visible{outline:2px solid #83d9e4;outline-offset:-3px}

.board-frame{position:relative}