/* ===== 棋譜研究室 additions (on top of style.css) ===== */
.counter-box { display: inline-block; background: #000; color: #0f0; font-family: "MS Gothic", monospace; padding: 0 0.4rem; letter-spacing: 0.2em; border: 2px inset #888; }
.construction { text-align: center; color: #c00; font-weight: 700; font-size: 0.8rem; }
textarea.kifu-input { width: 100%; min-height: 220px; font-family: "MS Gothic", monospace; font-size: 0.9rem; padding: 0.5rem; border: 2px inset #8899bb; }
.game-title-row { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.players { font-weight: 700; color: var(--color-accent-dark); }
.analysis-layout { display: grid; grid-template-columns: minmax(300px, 480px) 1fr; gap: 1.25rem; align-items: start; }
@media (max-width: 860px) { .analysis-layout { grid-template-columns: 1fr; } }
.kifu-last-square { position: absolute; background: rgba(255, 204, 0, 0.45); outline: 2px solid #e0a800; outline-offset: -2px; pointer-events: none; }
.tray-label { font-size: 0.8rem; font-weight: 700; color: var(--color-accent-dark); }
.panel-tabs { display: flex; gap: 0; margin-bottom: 0; flex-wrap: wrap; }
.panel-tabs button { padding: 0.45rem 0.9rem; border: 2px outset #7fb3ff; border-bottom: none; background: #d6e4ff; color: var(--color-accent-dark); font-weight: 700; cursor: pointer; font-size: 0.9rem; }
.panel-tabs button.active { background: #fff; color: var(--color-primary); border-style: solid; border-color: var(--color-border); }
.panel-body { border: 3px solid var(--color-border); background: #fff; padding: 0.9rem; box-shadow: var(--shadow); min-height: 260px; }
.panel-body[hidden] { display: none; }
.eval-chart { width: 100%; height: auto; display: block; background: #fffef0; border: 2px inset #8899bb; cursor: crosshair; margin-top: 0.5rem; }
.progress { height: 14px; border: 2px inset #888; background: #eee; margin: 0.5rem 0; }
.progress[hidden] { display: none; }
.progress > div { height: 100%; width: 0; background: repeating-linear-gradient(45deg, #cc0000 0 8px, #ff6666 8px 16px); transition: width 0.2s; }
.num { text-align: right; font-family: "MS Gothic", monospace; white-space: nowrap; }
.pv { font-size: 0.82rem; color: var(--color-text-muted); }
.pv.best { color: var(--color-text); font-size: 0.9rem; }
.bar { display: inline-block; height: 12px; background: linear-gradient(90deg, #cc0000, #ff8844); border: 1px solid #660000; vertical-align: middle; }
.pos { color: var(--color-primary); font-weight: 700; }
.neg { color: var(--color-accent); font-weight: 700; }
.kifu-move-list li.cur { background: #fff3a0; font-weight: 700; }
.kifu-move-list li .mark { color: #c00; font-weight: 700; }
.small { font-size: 0.82rem; }
.rank-badge { display: inline-block; background: var(--color-primary); color: #fff; padding: 0 0.45rem; border: 1px solid var(--color-gold); font-weight: 700; }
.btn[disabled] { opacity: 0.55; cursor: wait; }
.spinner { display: inline-block; animation: blink 1s steps(2, start) infinite; }
@keyframes blink { to { visibility: hidden; } }
.del-form { display: inline; }
details > summary { cursor: pointer; font-weight: 700; color: var(--color-accent-dark); }
.hand-piece.pal { cursor: pointer; padding: 1px; }
.hand-piece.pal.selected { outline: 3px solid var(--color-primary); background: rgba(204, 0, 0, 0.18); }
.kifu-square.target::after { content: ""; position: absolute; left: 30%; top: 30%; width: 40%; height: 40%; border-radius: 50%; background: rgba(0, 120, 255, 0.55); pointer-events: none; }
.kifu-squares-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }