:root { color-scheme: light; --wood:#e7b96f; --line:#4d3218; --ink:#251708; --accent:#9e2018; }
* { box-sizing: border-box; }
body { margin:0; background:#f4efe4; color:#282018; font-family:"Yu Mincho","Hiragino Mincho ProN",serif; }
.app { width:min(97vw,980px); margin:18px auto 40px; }
header { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.header-actions { display:flex; gap:7px; }
h1 { margin:0; font-size:clamp(28px,6vw,46px); letter-spacing:.12em; }
header p { margin:5px 0 0; font-size:14px; }
button { font:inherit; cursor:pointer; }
.reset { padding:10px 18px; border:1px solid #70502e; border-radius:9px; background:#fffaf0; }
.resign { padding:10px 18px; border:1px solid #8f211b; border-radius:9px; background:#a52b23; color:white; }
.resign:disabled { opacity:.45; cursor:not-allowed; }
.status-panel { margin:16px 0; min-height:70px; padding:10px 15px; border-radius:10px; background:#fff; box-shadow:0 2px 9px #4b321722; text-align:center; }
.clock-row { display:flex; justify-content:center; gap:12px; margin-bottom:7px; }
.clock-box { min-width:118px; padding:5px 11px; display:flex; align-items:center; justify-content:space-between; gap:12px; border-radius:7px; background:#ede5d7; color:#332518; }
.clock-box strong { font-family:ui-monospace,Consolas,monospace; font-size:20px; }
.clock-box.active { background:#4a3422; color:#fff3d1; box-shadow:0 0 0 2px #d9a844; }
.clock-box.danger strong { color:#d62b22; }
.evaluation { margin:3px auto 9px; max-width:520px; }
.evaluation-labels { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px; font-size:12px; font-weight:bold; }
.evaluation-labels span:first-child { text-align:left; color:#174f82; }
.evaluation-labels span:last-child { text-align:right; color:#a72d25; }
.evaluation-track { height:13px; display:flex; overflow:hidden; border-radius:8px; background:#ddd; box-shadow:inset 0 0 0 1px #0002; }
.evaluation-sente { width:50%; background:#2779b8; transition:width .35s ease; }
.evaluation-gote { width:50%; background:#b33a31; transition:width .35s ease; }
.turn-label { font-weight:bold; font-size:21px; }
.message { min-height:24px; margin-top:5px; color:#7b2119; font-weight:bold; }
.message.thinking { color:#174f82; }
.rule-summary { margin:0 0 14px; padding:10px 14px; display:grid; gap:3px; border:1px solid #b58a51; border-radius:9px; background:#fff8e9; font-size:13px; line-height:1.45; }
.rule-summary strong { color:#7b2119; font-size:15px; }
.game-area { display:grid !important; grid-template-columns:110px minmax(0,630px) 110px !important; grid-template-rows:auto !important; justify-content:center; align-items:stretch; gap:12px; }
.player-side { min-width:0; display:flex; flex-direction:column; gap:7px; align-self:stretch; }
.player-name { min-height:58px; display:grid; place-items:center; padding:7px 4px; border-radius:7px; background:#332518; color:white; font-weight:bold; text-align:center; }
.hand { flex:1; min-height:300px; display:flex; flex-direction:column; flex-wrap:nowrap; align-items:center; align-content:center; gap:7px; padding:9px 5px; border:2px solid #876338; border-radius:7px; background:#f8dfae; }
.hand-piece { min-width:42px; height:42px; padding:0 4px; border:1px solid #8c632f; background:#efc77f; clip-path:polygon(50% 0,92% 17%,100% 100%,0 100%,8% 17%); font-weight:bold; font-size:22px; color:var(--ink); }
.hand-piece.white { transform:rotate(180deg); }
.hand-piece.selected { filter:drop-shadow(0 0 4px #d90000); background:#ffe069; }
.empty-hand { color:#725b3f; padding-left:6px; }
.board-wrap { margin:auto; width:100%; max-width:630px; }
.files { padding-left:0; padding-right:26px; display:grid; grid-template-columns:repeat(9,1fr); text-align:center; font-weight:bold; }
.board-row { display:flex; }
.board { width:calc(100% - 26px); aspect-ratio:1; display:grid; grid-template-columns:repeat(9,1fr); grid-template-rows:repeat(9,1fr); border:3px solid var(--line); background:var(--wood); }
.ranks { width:26px; display:grid; grid-template-rows:repeat(9,1fr); place-items:center; font-weight:bold; }
.square { position:relative; min-width:0; border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:transparent; padding:0; }
.square:nth-child(9n) { border-right:0; }
.square:nth-child(n+73) { border-bottom:0; }
.square.selected { background:#ffd452aa; }
.square.legal::after { content:""; position:absolute; width:24%; aspect-ratio:1; border-radius:50%; background:#14722e99; top:38%; left:38%; }
.square.last { box-shadow:inset 0 0 0 4px #cf3029; }
.piece { position:absolute; inset:5%; display:grid; place-items:center; background:#f5cd82; color:var(--ink); clip-path:polygon(50% 0,92% 17%,100% 100%,0 100%,8% 17%); font-size:clamp(17px,5vw,36px); font-weight:bold; line-height:1; user-select:none; }
.piece.white { transform:rotate(180deg); }
.piece.promoted { color:#b3160e; }
.rules { margin-top:18px; padding:10px 14px; background:#fff; border-radius:8px; }
.move-panel { margin-top:14px; padding:10px 12px; border:1px solid #b58a51; border-radius:9px; background:#fff; }
.move-panel-title { margin-bottom:7px; color:#7b2119; font-weight:bold; }
.move-history { max-height:150px; display:grid; grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); gap:5px; overflow-y:auto; }
.move-item { padding:5px 7px; border-radius:5px; background:#f5ead7; font-family:"Yu Gothic",sans-serif; font-size:13px; }
.move-item.sente { border-left:4px solid #2779b8; }
.move-item.gote { border-left:4px solid #b33a31; }
.no-moves { color:#88745e; font-size:13px; }
.rules li { margin:5px 0; }
.dialog { position:fixed; inset:0; display:grid; place-items:center; background:#0008; z-index:10; }
.dialog.hidden { display:none; }
.dialog-card { padding:24px; border-radius:12px; background:white; text-align:center; font-size:20px; }
.dialog-card button { min-width:100px; margin:8px; padding:10px; }
.setup-card { max-width:460px; margin:15px; }
.setup-card h2 { margin-top:0; }
.setup-card button { min-width:150px; border:1px solid #70502e; border-radius:9px; background:#f4cc83; }
.setup-label { margin:16px 8px 6px; text-align:left; color:#72522e; font-weight:bold; font-size:14px; }
.choice-row { display:flex; flex-wrap:wrap; gap:7px; }
.choice-row button { flex:1; min-width:0; margin:0; background:#f5efe5; }
.choice-row button.active { background:#a8792b; color:white; box-shadow:inset 0 0 0 2px #e8bd57; }
.time-choices button { flex:1 1 calc(33.333% - 7px); padding:9px 5px; }
.setup-card .start-game { width:100%; margin:22px 0 10px; background:#efbd4f; font-weight:bold; }
.setup-card small { display:block; color:#786b59; }
.board.ai-thinking { pointer-events:none; opacity:.88; }
@media (max-width:760px) {
  .app{margin-top:8px}
  .status-panel{margin:9px 0}
  .game-area{grid-template-columns:64px minmax(0,1fr) 64px !important;gap:4px;align-items:start}
  .player-name{min-height:48px;font-size:12px;padding:4px 2px}
  .hand{min-height:240px;padding:5px 2px;gap:4px}
  .hand-piece{min-width:36px;width:44px;height:38px;font-size:19px}
  .empty-hand{padding:4px 0;font-size:11px;writing-mode:vertical-rl}
  .piece{font-size:clamp(15px,6.5vw,30px)}
}