:root {
  color-scheme: dark;
  --ink: #f8f2e6;
  --muted: #b9aec8;
  --violet: #9275cf;
  --red: #c94d52;
  --gold: #e8c477;
  --night: #100c19;
  --panel: rgba(25, 17, 37, .88);
  --line: rgba(232, 196, 119, .2);
  --board: #d9a85f;
  --board-light: #efc67e;
}

* { box-sizing: border-box; }
html { overflow-x: hidden; background: var(--night); }
body {
  margin: 0;
  min-height: 100svh;
  overflow-x: hidden;
  color: var(--ink);
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", system-ui, sans-serif;
  background:
    radial-gradient(circle at 50% -10%, rgba(104, 73, 160, .4), transparent 43%),
    radial-gradient(circle at 7% 65%, rgba(93, 37, 74, .25), transparent 35%),
    linear-gradient(145deg, #09070e, #181125 58%, #08070d);
}
button { font: inherit; }
button:focus-visible, .square:focus-visible, .hand-piece:focus-visible { outline: 3px solid #fff0a9; outline-offset: 2px; }
.app-shell { width: min(1380px, 100%); margin: auto; padding: 0 18px 38px; }
.topbar { min-height: 80px; display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.brand { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.brand > span:last-child { display: grid; }
.brand b { font-family: serif; font-size: clamp(20px, 3vw, 27px); letter-spacing: .08em; }
.brand small { margin-top: 3px; color: var(--muted); font-size: 10px; letter-spacing: .12em; }
.crest, .large-crest { display: grid; place-items: center; clip-path: polygon(50% 0, 91% 17%, 84% 100%, 16% 100%, 9% 17%); color: #321b1e; background: linear-gradient(160deg,#ffe4a1,#c8913e); font-family: serif; font-weight: 900; }
.crest { width: 42px; height: 49px; }
.header-actions { display: flex; gap: 8px; }
.round-btn { min-height: 42px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); background: rgba(255,255,255,.045); cursor: pointer; }
.round-btn:hover { background: rgba(255,255,255,.1); }
.match-strip { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); width: min(700px,100%); margin: 0 auto 14px; overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: rgba(0,0,0,.18); }
.match-strip div { min-width: 0; padding: 8px 12px; text-align: center; border-right: 1px solid var(--line); }
.match-strip div:last-child { border: 0; }
.match-strip small { display: block; color: var(--muted); font-size: 9px; }
.match-strip strong { white-space: nowrap; font-size: 13px; }
.game-layout { display: grid; grid-template-columns: minmax(190px,1fr) minmax(480px,720px) minmax(190px,1fr); gap: 14px; align-items: start; }
.side-card { min-width: 0; padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); box-shadow: 0 16px 45px rgba(0,0,0,.18); }
.eyebrow { color: var(--gold); font-size: 9px; font-weight: 900; letter-spacing: .17em; }
.side-card h2 { margin: 5px 0 18px; font-family: serif; font-size: 19px; }
.versus { display: grid; gap: 10px; }
.versus > div { display: flex; align-items: center; gap: 9px; padding: 10px; border-radius: 12px; background: rgba(255,255,255,.045); }
.versus > span { color: var(--muted); text-align: center; font-family: serif; }
.avatar { display: grid; place-items: center; flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; color: #fff; font-style: normal; font-family: serif; font-weight: 900; }
.avatar.cpu { background: #5e438f; }
.avatar.human { color: #392315; background: var(--gold); }
.versus p { display: grid; margin: 0; }
.versus small { color: var(--muted); font-size: 9px; }
.thinking-box { display: flex; align-items: center; gap: 8px; margin: 16px 0; padding: 10px; border-radius: 9px; color: #d8c9ed; background: rgba(128, 92, 183, .12); font-size: 11px; }
.thinking-box i { width: 9px; height: 9px; border-radius: 50%; background: #b494ed; box-shadow: 0 0 12px #b494ed; }
.thinking-box.active i { animation: pulse .8s infinite alternate; }
.sub-btn { width: 100%; min-height: 41px; margin-top: 7px; padding: 7px 12px; border: 1px solid rgba(255,255,255,.13); border-radius: 9px; color: var(--ink); background: rgba(255,255,255,.045); cursor: pointer; }
.sub-btn:disabled { opacity: .35; cursor: not-allowed; }
.sub-btn:not(:disabled):hover { background: rgba(255,255,255,.1); }

.board-area { width: 100%; min-width: 0; padding: 13px; border: 1px solid var(--line); border-radius: 20px; background: rgba(8,6,13,.62); box-shadow: 0 24px 65px rgba(0,0,0,.33); }
.player-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 50px; padding: 4px 10px; }
.player-bar > div:first-child { display: flex; align-items: center; gap: 7px; }
.player-bar small { color: #ef858a; font-size: 10px; font-weight: 900; }
.side-mark { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; font-family: serif; font-weight: 900; }
.side-mark.gote { color: #e5dbf4; background: #563f79; }
.side-mark.sente { color: #362414; background: var(--gold); }
.captured-hand { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; min-height: 34px; }
.hand-piece { position: relative; display: grid; place-items: center; width: 31px; height: 34px; border: 0; clip-path: polygon(50% 0, 91% 16%, 84% 100%, 16% 100%, 9% 16%); color: #2a1a10; background: #e6bc73; font-family: serif; font-size: 17px; font-weight: 900; cursor: pointer; }
.hand-piece.selected { filter: drop-shadow(0 0 6px #ffe384); background: #ffe39d; }
.hand-piece em { position: absolute; right: 2px; bottom: 0; color: #181018; font: 900 9px sans-serif; }
.cpu-hand .hand-piece, #cpuHand .hand-piece { cursor: default; }
.board-frame { position: relative; margin: 0 24px 0 0; padding: 20px 0 0 20px; }
.shogi-board { display: grid; grid-template-columns: repeat(9,minmax(0,1fr)); width: 100%; aspect-ratio: 1; overflow: hidden; border: 3px solid #3a210f; background: #3a210f; box-shadow: 0 14px 30px rgba(0,0,0,.35), inset 0 0 30px rgba(78,42,12,.4); }
.square { position: relative; display: grid; place-items: center; min-width: 0; border: 0; border-right: 1px solid rgba(72,39,13,.75); border-bottom: 1px solid rgba(72,39,13,.75); color: #28160a; background: linear-gradient(150deg,var(--board-light),var(--board)); cursor: pointer; }
.square:nth-child(9n) { border-right: 0; }
.square:nth-last-child(-n+9) { border-bottom: 0; }
.square:hover { filter: brightness(1.08); }
.square.selected { background: #f7db87; box-shadow: inset 0 0 0 4px #704f9e; }
.square.legal::after { content: ""; position: absolute; width: 24%; aspect-ratio: 1; border-radius: 50%; background: rgba(60,35,78,.54); pointer-events: none; }
.square.capture::after { width: 72%; border: 4px solid rgba(145,43,55,.72); background: transparent; }
.square.last-from { box-shadow: inset 0 0 0 4px rgba(98,75,138,.45); }
.square.last-to { box-shadow: inset 0 0 0 5px rgba(158,53,65,.53); }
.square.in-check { background: #de7770; animation: checkPulse .75s infinite alternate; }
.piece { position: relative; z-index: 1; display: grid; place-items: center; width: 79%; height: 88%; clip-path: polygon(50% 0, 93% 17%, 85% 100%, 15% 100%, 7% 17%); color: #25150b; background: linear-gradient(160deg,#ffe6a9,#ce9343); filter: drop-shadow(0 2px 1px rgba(61,32,8,.34)); font-family: "Yu Mincho", "Hiragino Mincho ProN", serif; font-size: clamp(19px, 3.2vw, 35px); font-weight: 900; line-height: 1; pointer-events: none; }
.piece.gote { transform: rotate(180deg); }
.piece.promoted { color: #a51f28; }
.file-labels { position: absolute; top: 0; left: 20px; right: 0; display: grid; grid-template-columns: repeat(9,1fr); color: var(--muted); font-family: serif; font-size: 11px; text-align: center; }
.rank-labels { position: absolute; top: 20px; right: -22px; bottom: 0; display: grid; grid-template-rows: repeat(9,1fr); align-items: center; color: var(--muted); font-family: serif; font-size: 11px; }
.message-bar { margin-top: 7px; padding: 9px 12px; text-align: center; border: 1px solid rgba(255,255,255,.09); border-radius: 999px; color: #f5e5bd; background: rgba(0,0,0,.22); font-size: 12px; font-weight: 800; }
.move-log { height: 315px; margin: 0; padding: 8px 8px 8px 33px; overflow-y: auto; border-radius: 10px; color: var(--muted); background: rgba(0,0,0,.16); font-family: "Yu Mincho", serif; font-size: 12px; line-height: 1.8; }
.move-log li::marker { color: #8061af; font-family: sans-serif; font-size: 9px; }
.move-log li.latest { color: #ffeda9; font-weight: 900; }
.legend { margin-top: 15px; padding-top: 14px; border-top: 1px solid var(--line); }
.legend b { font-size: 12px; }
.legend p { margin: 5px 0 0; color: var(--muted); font-size: 11px; line-height: 1.65; }

.modal { position: fixed; z-index: 30; inset: 0; display: none; place-items: center; padding: 16px; background: rgba(6,4,10,.82); backdrop-filter: blur(10px); }
.modal.open { display: grid; animation: fade .18s ease; }
.modal-card { position: relative; width: min(590px,100%); max-height: calc(100svh - 32px); overflow-y: auto; padding: 34px; text-align: center; border: 1px solid rgba(232,196,119,.3); border-radius: 24px; background: linear-gradient(150deg,#291c3d,#120d1b); box-shadow: 0 32px 100px #000; }
.large-crest { width: 72px; height: 82px; margin: 0 auto 18px; font-size: 34px; }
.modal-card h1, .modal-card h2 { margin: 7px 0 8px; font-family: serif; font-size: clamp(31px,7vw,52px); letter-spacing: .08em; }
.modal-card > p { color: var(--muted); line-height: 1.7; }
.difficulty-picker { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; margin: 22px 0; }
.difficulty-picker button { min-height: 72px; padding: 8px; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; color: var(--muted); background: rgba(255,255,255,.04); cursor: pointer; }
.difficulty-picker button.selected { border-color: var(--gold); color: #fff2c7; background: rgba(203,157,70,.16); box-shadow: inset 0 0 0 1px var(--gold); }
.difficulty-picker b, .difficulty-picker small { display: block; }
.difficulty-picker small { margin-top: 4px; font-size: 9px; }
.primary-btn { width: min(340px,100%); min-height: 54px; padding: 0 22px; border: 0; border-radius: 11px; color: #28170e; background: linear-gradient(135deg,#f9dfa0,#c99342); box-shadow: 0 8px 22px rgba(0,0,0,.25); font-weight: 900; cursor: pointer; }
.text-btn { display: block; margin: 13px auto 0; border: 0; color: var(--muted); background: none; text-decoration: underline; cursor: pointer; }
.close-btn { position: absolute; top: 13px; right: 15px; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); background: rgba(255,255,255,.05); font-size: 24px; cursor: pointer; }
.help-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 20px 0; text-align: left; }
.help-grid > div { display: flex; gap: 10px; padding: 12px; border-radius: 11px; background: rgba(255,255,255,.045); }
.sample-piece { display: grid; place-items: center; flex: 0 0 auto; width: 44px; height: 50px; clip-path: polygon(50% 0,93% 17%,85% 100%,15% 100%,7% 17%); color: #25150b; background: #e4b66b; font-family: serif; font-size: 24px; font-weight: 900; }
.sample-piece.red { color: #ac2831; }
.help-grid p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
.help-grid b { color: var(--ink); }
.rule-note { font-size: 10px; }
.promotion-preview { display: flex; justify-content: center; align-items: center; gap: 20px; margin: 24px 0; }
.promotion-preview i { color: var(--muted); font-style: normal; font-size: 24px; }
.promotion-actions { display: flex; gap: 8px; }
.promotion-actions .sub-btn { min-height: 54px; margin: 0; }
.result-stats { margin: 20px 0; padding: 15px; border-radius: 12px; color: #f4e6bd; background: rgba(255,255,255,.05); font-weight: 800; }
@keyframes pulse { to { opacity: .25; transform: scale(.7); } }
@keyframes checkPulse { to { filter: brightness(1.18); } }
@keyframes fade { from { opacity: 0; } }

@media (max-width: 1040px) {
  .game-layout { grid-template-columns: minmax(0,1fr) minmax(470px,680px); }
  .right-card { grid-column: 1 / -1; display: grid; grid-template-columns: 130px 1fr 1fr; gap: 12px; align-items: start; }
  .right-card h2 { margin: 5px 0; }
  .move-log { height: 125px; }
  .legend { margin: 0; padding: 8px 0 0; border-top: 0; }
}

@media (max-width: 760px) {
  .app-shell { padding: 0 7px 20px; }
  .topbar { min-height: 64px; }
  .brand small, .round-btn span { display: none; }
  .match-strip { margin-bottom: 7px; }
  .match-strip div { padding: 6px 2px; }
  .match-strip strong { font-size: 11px; }
  .game-layout { display: flex; flex-direction: column; gap: 8px; }
  .board-area { order: 1; padding: 6px; border-radius: 14px; }
  .left-card { order: 2; width: 100%; }
  .right-card { order: 3; width: 100%; display: block; }
  .side-card { padding: 15px; }
  .left-card .versus { display: none; }
  .left-card h2 { margin-bottom: 8px; }
  .thinking-box { margin: 8px 0; }
  .player-bar { min-height: 43px; padding: 3px 5px; font-size: 12px; }
  .captured-hand { gap: 2px; }
  .hand-piece { width: 28px; height: 31px; font-size: 15px; }
  .board-frame { margin-right: 17px; padding: 15px 0 0 15px; }
  .file-labels { left: 15px; font-size: 9px; }
  .rank-labels { top: 15px; right: -15px; font-size: 9px; }
  .shogi-board { border-width: 2px; }
  .piece { width: 84%; height: 91%; font-size: clamp(18px,7vw,29px); }
  .square.legal::after { min-width: 8px; }
  .message-bar { position: sticky; z-index: 5; bottom: max(5px,env(safe-area-inset-bottom)); background: rgba(15,10,22,.94); }
  .move-log { height: 150px; }
  .difficulty-picker { grid-template-columns: 1fr; }
  .difficulty-picker button { min-height: 55px; }
  .help-grid { grid-template-columns: 1fr; }
  .modal-card { padding: 28px 17px; }
}

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }