/* Gungi — styles. Warm wooden goban theme, responsive for phone & desktop. */
:root {
  --bg: #1b1512;
  --bg2: #241b16;
  --panel: #2c211a;
  --panel2: #35281f;
  --ink: #f2e7d5;
  --dim: #b9a892;
  --wood: #d7a54a;
  --wood-dark: #b8863b;
  --line: #6b4a1f;
  --accent: #e6b24a;
  --white-stone: #f4ecd8;
  --white-ink: #2a1d12;
  --black-stone: #211712;
  --black-ink: #f4e6cf;
  --good: #4caf7d;
  --danger: #d9553f;
  --select: #3fb0d9;
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", system-ui, sans-serif;
}

* { box-sizing: border-box; }
.hidden { display: none !important; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); }
body { -webkit-text-size-adjust: 100%; }

#app { max-width: 1000px; margin: 0 auto; padding: 10px clamp(8px, 2vw, 18px) 40px; }

/* ---- topbar ---- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; padding: 6px 2px 12px;
}
.brand { display: flex; align-items: baseline; gap: 8px; }
.brand-kanji { font-size: clamp(22px, 5vw, 30px); font-weight: 700; color: var(--wood); letter-spacing: 4px; }
.brand-sub { font-size: 13px; color: var(--dim); letter-spacing: 2px; }
.controls { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.ctl { font-size: 12px; color: var(--dim); display: flex; align-items: center; gap: 4px; }
select, .btn {
  font: inherit; font-size: 13px; color: var(--ink); background: var(--panel2);
  border: 1px solid #4a382b; border-radius: 8px; padding: 7px 11px; cursor: pointer;
  transition: background .15s, transform .05s;
}
select { padding: 6px 8px; }
.btn:hover { background: #43332772; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .4; cursor: default; }
.btn.primary { background: var(--wood-dark); color: #201108; border-color: var(--wood); font-weight: 700; }
.btn.primary:hover { background: var(--wood); }
.btn.small { padding: 6px 9px; font-size: 12px; }
.btn.lang-btn { min-width: 52px; font-weight: 600; letter-spacing: .02em; }
.file-btn { display: inline-flex; align-items: center; }

/* ---- status ---- */
.status {
  background: var(--panel); border: 1px solid #40301f; border-radius: 10px;
  padding: 9px 14px; font-size: 14px; margin-bottom: 12px; min-height: 20px;
}
.status.flash { background: #5a2f22; color: #ffd9cf; }

/* ---- layout ---- */
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 16px; align-items: start; }
.board-area { position: relative; }

/* ---- board & hands ---- */
.gungi { display: flex; flex-direction: column; gap: 8px; }
.hand {
  background: var(--panel); border: 1px solid #40301f; border-radius: 10px; padding: 6px 8px;
}
.hand-label { font-size: 11px; color: var(--dim); margin-bottom: 4px; letter-spacing: 1px; }
.hand-tray { display: flex; flex-wrap: wrap; gap: 4px; min-height: 30px; }
.hand-empty { color: var(--dim); font-size: 12px; }
.hand-piece {
  position: relative; border-radius: 7px; border: 1px solid #00000030; cursor: pointer;
  display: inline-flex; align-items: center; gap: 2px; padding: 3px 7px 3px 5px; font: inherit;
}
.hand-piece.white { background: var(--white-stone); color: var(--white-ink); }
.hand-piece.black { background: var(--black-stone); color: var(--black-ink); }
.hand-piece .hp-sym { font-size: 17px; font-weight: 700; line-height: 1; }
.hand-piece .hp-count { font-size: 11px; opacity: .8; }
.hand-piece.disabled { opacity: .55; cursor: default; }
.hand-piece.selected { outline: 3px solid var(--select); outline-offset: 1px; }

.board-wrap {
  background: var(--wood); border-radius: 6px; padding: min(2.4vw, 14px);
  box-shadow: 0 10px 30px #0008, inset 0 0 0 2px #00000022;
}
.board {
  display: grid; grid-template-columns: repeat(9, 1fr); grid-template-rows: repeat(9, 1fr);
  aspect-ratio: 1 / 1; width: 100%; background: var(--line); gap: 1px; border: 1px solid var(--line);
}
.cell {
  position: relative; background: var(--wood); display: flex; align-items: center; justify-content: center;
  cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
}
.cell.terr-black { background: #d29c43; }
.cell.terr-white { background: #dcaa4d; }
.cell.terr-neutral { background: #d7a54a; }
.cell.deploy-zone { background: #e6c06a; }
.cell.deploy-zone::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 2px #ffffff30; }
.cell.selected { box-shadow: inset 0 0 0 3px var(--select); }
.cell.last-move { background: #e9c877; }
.cell.last-from { background: #cf9f5a; }
.cell.in-check { animation: checkpulse 1s infinite; }
@keyframes checkpulse { 0%,100% { box-shadow: inset 0 0 0 3px #d9553f00; } 50% { box-shadow: inset 0 0 0 4px #d9553fcc; } }

.cell.target-move::before {
  content: ""; position: absolute; width: 30%; height: 30%; border-radius: 50%;
  background: #2a7d5a99; box-shadow: 0 0 6px #2a7d5a66; pointer-events: none;
}
.cell.target-capture { box-shadow: inset 0 0 0 3px var(--danger); }
.cell.target-capture::before {
  content: ""; position: absolute; inset: 8%; border-radius: 8px;
  box-shadow: inset 0 0 0 2px #d9553f88; pointer-events: none;
}
.cell.target-tsuke { box-shadow: inset 0 0 0 3px var(--select); }
.cell.target-tsuke::before {
  content: "付"; position: absolute; top: 2px; right: 4px; font-size: 11px;
  color: #eaf6ff; text-shadow: 0 1px 2px #000; pointer-events: none;
}
.cell.capture-flash { animation: capflash .45s ease; }
@keyframes capflash { 0% { background: #ff5a3d; } 100% { background: var(--wood); } }

/* pieces / towers */
.tower { position: relative; width: 84%; height: 84%; }
.piece {
  position: absolute; inset: 0; border-radius: 20%;
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(15px, 4.4vw, 30px); font-weight: 700; line-height: 1;
  box-shadow: 0 2px 3px #0006; will-change: transform;
}
.piece .glyph { display: inline-block; line-height: 1; }
.piece.white { background: linear-gradient(160deg, #fbf4e2, #e7d8ba); color: var(--white-ink); border: 1px solid #cbb387; }
.piece.black { background: linear-gradient(160deg, #33261d, #191009); color: var(--black-ink); border: 1px solid #000; }
/* enemy (black / top player) pieces face the other way, shogi-style */
.piece.black .glyph { transform: rotate(180deg); }
.hand-piece.black .hp-sym { display: inline-block; transform: rotate(180deg); }
.piece.h2 { box-shadow: -2px 3px 0 #00000030, 0 3px 5px #0007; }
.piece.h3 { box-shadow: -3px 3px 0 #00000030, -5px 6px 0 #00000022, 0 4px 6px #0008; }
.piece.drop-in { animation: dropin .25s ease; }
@keyframes dropin { from { transform: translateY(-40%) scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
.tier-badge {
  position: absolute; top: -5px; right: -5px; background: var(--wood-dark); color: #1c1109;
  font-size: 10px; font-weight: 700; width: 15px; height: 15px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; border: 1px solid #0004;
}
.stack-dots { position: absolute; bottom: 2px; left: 0; right: 0; display: flex; gap: 2px; justify-content: center; }
.stack-dots .dot { width: 4px; height: 4px; border-radius: 50%; }
.stack-dots .dot.w { background: #f4ecd8; }
.stack-dots .dot.b { background: #211712; border: 1px solid #f4e6cf55; }

/* ---- thinking ---- */
.thinking {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: #000000c9; color: #ffe9b8; padding: 12px 20px; border-radius: 12px;
  font-size: 15px; z-index: 20; box-shadow: 0 8px 30px #000a; pointer-events: none;
}
.thinking::after { content: ""; animation: dots 1.2s steps(4, end) infinite; }
@keyframes dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }

/* ---- sidebar ---- */
.sidebar { display: flex; flex-direction: column; gap: 12px; }
.panel { background: var(--panel); border: 1px solid #40301f; border-radius: 10px; padding: 10px 12px; }
.panel h3 { margin: 0 0 8px; font-size: 13px; color: var(--wood); letter-spacing: 1px; }
.hint { font-size: 11.5px; color: var(--dim); margin: 0 0 8px; line-height: 1.5; }
.setup-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
.captured-row { display: flex; align-items: center; gap: 6px; margin: 3px 0; min-height: 24px; }
.cap-label { font-size: 11px; color: var(--dim); width: 18px; }
.captured { display: flex; flex-wrap: wrap; gap: 3px; }
.cap { background: var(--panel2); border-radius: 5px; padding: 1px 5px; font-size: 14px; }
.cap-empty { color: var(--dim); }
.log-panel .log { height: 220px; overflow-y: auto; font-size: 12px; line-height: 1.6; }
.log-line { border-bottom: 1px solid #ffffff08; padding: 1px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- footer ---- */
.footer { margin-top: 18px; font-size: 13px; color: var(--dim); }
.footer summary { cursor: pointer; color: var(--wood); }
.rules { padding: 8px 2px; line-height: 1.7; }
.rules p { margin: 4px 0; }
.rules .dim { color: var(--dim); font-size: 12px; }

/* ---- victory overlay ---- */
.victory-overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: #00000000; z-index: 30; opacity: 0; transition: opacity .4s, background .4s; pointer-events: none;
}
.victory-overlay.show { opacity: 1; background: #000000b0; pointer-events: auto; }
.victory-overlay.hidden { display: none; }
.victory-card {
  text-align: center; background: linear-gradient(160deg, #3a2a1c, #241811);
  border: 2px solid var(--wood); border-radius: 16px; padding: 26px 40px;
  box-shadow: 0 20px 60px #000c; transform: scale(.8); transition: transform .4s cubic-bezier(.2,1.4,.4,1);
}
.victory-overlay.show .victory-card { transform: scale(1); }
.victory-title { font-size: 28px; font-weight: 800; color: var(--wood); margin-bottom: 6px; }
.victory-sub { font-size: 14px; color: var(--dim); }

/* ---- responsive ---- */
@media (max-width: 760px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar { flex-direction: column; }
  .log-panel .log { height: 140px; }
  .brand-sub { display: none; }
  .controls { width: 100%; }
  .controls .btn { flex: 1 1 auto; }
}