.shogi-screen{
  --shogi-board-surface:url("../../assets/shogi/surfaces/board-dark.svg");
  --shogi-hand-surface:url("../../assets/shogi/surfaces/komadai-dark.svg");
  --shogi-selection:#8b5cf6;
  --shogi-legal:#f6bd3a;
  --shogi-check:#ef4444;
  padding:calc(var(--safe-top) + 10px) 10px calc(var(--safe-bottom) + 14px)
}
:root[data-theme="light"] .shogi-screen{
  --shogi-board-surface:url("../../assets/shogi/surfaces/board-light.svg");
  --shogi-hand-surface:url("../../assets/shogi/surfaces/komadai-light.svg")
}
.shogi-game-header{width:100%;max-width:480px;min-height:46px;margin:0 auto 4px;grid-template-columns:58px 1fr 58px;gap:8px}
.shogi-game-header .header-action{display:grid;place-items:center;align-content:center;gap:0;min-width:0;min-height:44px;padding:2px 4px;border-radius:12px;font-size:1.2rem}
.shogi-game-header .header-action small{display:block;margin-top:-1px;font-size:.58rem;font-weight:800;line-height:1.1}
.shogi-game-header .game-header-center strong{font-size:.98rem}
.shogi-game-header .game-header-center span{font-size:.68rem}
.shogi-status{display:flex;align-items:center;justify-content:center;gap:8px;min-height:22px;margin:0 auto 3px;color:var(--muted);font-size:.7rem}
.check-label{padding:2px 7px;border-radius:999px;background:rgba(239,68,68,.15);color:var(--danger)}
.shogi-player{display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:8px;width:100%;max-width:480px;min-height:44px;margin:3px auto;padding:3px 6px;border-radius:12px;color:var(--muted)}
.shogi-player.is-current{background:rgba(124,92,255,.09);color:var(--text)}
.shogi-player-avatar{display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--line);border-radius:50%;background:var(--panel);color:var(--text);font-size:.65rem;font-weight:900}
.shogi-player.sente .shogi-player-avatar{background:rgba(246,189,58,.14)}
.shogi-player-copy{display:block;min-width:0}
.shogi-player-copy strong,.shogi-player-copy span{display:block}
.shogi-player-copy strong{color:var(--text);font-size:.76rem}
.shogi-player-copy strong small{color:var(--muted);font-size:.64rem}
.shogi-player-copy span{margin-top:1px;font-size:.62rem}
.shogi-player-status{padding:4px 7px;border:1px solid var(--line);border-radius:999px;background:var(--panel);font-size:.62rem;font-weight:800;white-space:nowrap}
.shogi-player.is-current .shogi-player-status{border-color:rgba(139,92,246,.5);background:rgba(139,92,246,.16);color:var(--accent2)}

.shogi-hand-area{display:grid;grid-template-columns:31px minmax(0,1fr);width:100%;max-width:480px;min-height:62px;margin:4px auto;padding:5px 7px 5px 5px;border:1px solid rgba(143,80,28,.72);border-radius:12px;background-color:#5b2f13;background-image:var(--shogi-hand-surface);background-position:center;background-repeat:no-repeat;background-size:100% 100%;box-shadow:0 4px 10px rgba(20,9,3,.2)}
.shogi-hand-heading{display:grid;place-items:center;border-right:1px solid rgba(255,231,178,.24)}
.shogi-hand-heading strong{writing-mode:vertical-rl;color:#fff0bd;font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-size:.62rem;letter-spacing:.12em;text-shadow:0 1px 2px rgba(0,0,0,.7)}
.shogi-hand-list{display:flex;flex-wrap:wrap;align-items:center;align-content:center;gap:3px 5px;min-width:0;min-height:50px;padding-left:6px}
.shogi-hand-area.gote .shogi-hand-list{justify-content:flex-end}
.shogi-hand-empty{display:grid;place-items:center;min-height:44px;padding:0 6px;color:#fff0bd;font-size:.7rem;font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,.65)}
.shogi-hand-piece{position:relative;display:grid;place-items:center;width:44px;min-width:44px;height:50px;min-height:50px;padding:1px;border:2px solid transparent;border-radius:8px;background:rgba(255,255,255,.025);color:var(--text)}
.shogi-hand-piece.readonly{cursor:default}
.shogi-hand-piece:disabled{opacity:.74;cursor:default}
.shogi-hand-piece.selected{border-color:var(--shogi-selection);background:rgba(139,92,246,.25);box-shadow:0 0 0 2px rgba(139,92,246,.28)}
.shogi-hand-piece:focus-visible{outline:3px solid rgba(139,92,246,.55);outline-offset:1px}
.shogi-hand-count{position:absolute;z-index:4;right:-3px;bottom:-2px;display:grid;place-items:center;min-width:22px;height:19px;padding:0 4px;border:1px solid rgba(255,255,255,.35);border-radius:999px;background:#263244;color:#fff;font-size:.58rem;font-weight:900;line-height:1;white-space:nowrap;box-shadow:0 2px 5px rgba(0,0,0,.38)}
.shogi-piece{display:block;object-fit:contain;pointer-events:none;user-select:none}
.shogi-piece-board,.shogi-piece-final{position:absolute;z-index:2;inset:5%;width:90%;height:90%}
.shogi-piece-hand{width:39px;height:46px}
.shogi-piece.gote{transform:none}

.shogi-board-wrap{width:100%;max-width:480px;margin:4px auto;padding:0;border:0;border-radius:0;background:transparent}
.shogi-board-shell{position:relative;width:100%;aspect-ratio:1/1;overflow:hidden;background-image:var(--shogi-board-surface);background-position:center;background-repeat:no-repeat;background-size:100% 100%;isolation:isolate}
.shogi-board{position:absolute;inset:3.125%;display:grid;grid-template-columns:repeat(9,minmax(0,1fr));grid-template-rows:repeat(9,minmax(0,1fr));overflow:hidden}
.shogi-cell{position:relative;align-self:stretch;justify-self:stretch;display:block;width:100%;height:100%;min-width:0;min-height:0;overflow:hidden;padding:0;border:0;border-radius:0;background:transparent;color:#21170d;isolation:isolate}
.shogi-cell:disabled{opacity:1;cursor:default}
.shogi-cell:focus-visible{z-index:7;outline:3px solid rgba(139,92,246,.9);outline-offset:-3px}
.shogi-cell.selected{z-index:5;background:rgba(139,92,246,.23);box-shadow:inset 0 0 0 3px var(--shogi-selection)}
.shogi-cell.in-check{z-index:4;background:rgba(239,68,68,.24);box-shadow:inset 0 0 0 3px var(--shogi-check)}
.shogi-cell.in-check.selected{z-index:6;background:linear-gradient(rgba(139,92,246,.2),rgba(239,68,68,.18));box-shadow:inset 0 0 0 3px var(--shogi-check),inset 0 0 0 6px rgba(139,92,246,.78)}
.shogi-cell.last-move::before{content:none}
.shogi-legal-dot{position:absolute;z-index:3;left:50%;top:50%;width:24%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:var(--shogi-legal);box-shadow:0 0 0 2px rgba(86,48,9,.28)}
.shogi-capture-ring{position:absolute;z-index:3;inset:7%;border:3px solid var(--shogi-legal);border-radius:8px;box-shadow:inset 0 0 0 1px rgba(86,48,9,.28)}
.shogi-last-marker{position:absolute;z-index:4;right:8%;bottom:8%;width:15%;min-width:4px;aspect-ratio:1;border:1px solid rgba(58,35,14,.35);border-radius:50%;background:#fff5d6;box-shadow:0 1px 3px rgba(0,0,0,.45)}
.shogi-coordinate-layer{position:absolute;z-index:8;inset:0;pointer-events:none;color:#261308;font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-size:clamp(.5rem,2.15vw,.66rem);font-weight:900;line-height:1;text-shadow:0 1px 0 rgba(255,232,180,.42)}
.shogi-file-coordinates{position:absolute;left:3.125%;right:3.125%;top:.7%;height:2.05%;display:grid;grid-template-columns:repeat(9,1fr);align-items:center;text-align:center}
.shogi-rank-coordinates{position:absolute;right:.48%;top:3.125%;bottom:3.125%;width:2.55%;display:grid;grid-template-rows:repeat(9,1fr);align-items:center;text-align:center}
.shogi-result-piece{overflow:hidden;border-radius:9px;background:rgba(217,170,91,.2)}
.shogi-result-piece img{width:94%;height:94%;object-fit:contain}
.shogi-result-piece.gote{transform:none}
.shogi-screen .thinking{min-height:1em;margin:4px 0 0;font-size:.68rem}
.shogi-screen .game-actions{width:100%;max-width:480px;margin:7px auto 0;gap:7px}
.shogi-screen .game-actions button{min-height:44px;border-radius:14px;font-size:.76rem}

@media(hover:hover){
  .shogi-hand-piece:not(:disabled):hover{border-color:rgba(139,92,246,.65);background:rgba(139,92,246,.14)}
  .shogi-cell:not(:disabled):hover{background:rgba(246,189,58,.13)}
}
@media(max-width:430px){
  .shogi-game-header{margin-bottom:2px}
  .shogi-player{min-height:40px;margin:1px auto;padding-top:2px;padding-bottom:2px}
  .shogi-player-avatar{width:32px;height:32px}
  .shogi-hand-area{min-height:58px;margin:3px auto;padding-top:4px;padding-bottom:4px}
  .shogi-hand-list{min-height:48px;gap:2px 3px;padding-left:4px}
  .shogi-hand-piece{width:44px;height:48px;min-height:48px}
  .shogi-piece-hand{width:37px;height:44px}
  .shogi-board-wrap{margin:3px auto}
}
@media(max-width:350px){
  .shogi-screen{padding-left:6px;padding-right:6px}
  .shogi-hand-area{grid-template-columns:28px minmax(0,1fr);padding-left:3px;padding-right:4px}
  .shogi-hand-list{gap:2px}
  .shogi-hand-piece{width:42px;min-width:42px}
}