:root { color-scheme: dark; font-family: Inter, Pretendard, system-ui, sans-serif; --safe-top: env(safe-area-inset-top, 0px); --safe-right: env(safe-area-inset-right, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); background: #15100b; color: #f8fafc; }
* { box-sizing: border-box; }
html, body { width: 100%; min-width: 320px; min-height: 100%; margin: 0; overflow: hidden; }
body { background: #15100b; }
button { min-height: 44px; border: 0; border-radius: 7px; font: inherit; font-weight: 850; letter-spacing: 0; cursor: pointer; touch-action: manipulation; }
button:focus-visible { outline: 3px solid #f2c56b; outline-offset: 2px; }
#app { display: grid; grid-template-rows: auto minmax(0, 1fr); width: 100vw; height: 100vh; height: 100dvh; padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left); background: radial-gradient(circle at 50% 0, #3b2917 0, #15100b 62%); }
.topbar { display: grid; grid-template-columns: 1fr auto 1fr; min-height: 58px; align-items: center; padding: 8px clamp(10px, 2vw, 22px); border-bottom: 1px solid #695038; background: rgba(22, 15, 9, .94); }
.brand { display: flex; align-items: baseline; gap: 8px; }
.brand strong { color: #f2c56b; font-size: 1.12rem; }
.brand span { color: #bca58b; font-size: .7rem; font-weight: 950; }
.round { padding: 7px 13px; border: 1px solid #785a3c; border-radius: 999px; background: #2b1e12; font-size: .82rem; font-weight: 900; }
.top-actions { display: flex; justify-content: flex-end; gap: 7px; }
.icon-btn { width: 42px; min-height: 42px; padding: 0; border: 1px solid #73583d; background: #2b1e12; color: #fff; font-size: 1.2rem; }
.layout { display: grid; grid-template-columns: minmax(0, 1fr) clamp(250px, 24vw, 340px); min-height: 0; }
.board-wrap { display: grid; min-width: 0; min-height: 0; place-items: center; padding: 10px; }
#game { display: block; width: min(100%, calc((100dvh - 78px) * 10 / 7)); height: auto; max-height: 100%; aspect-ratio: 10 / 7; border: 1px solid #806142; border-radius: 7px; background: #c79555; box-shadow: 0 24px 70px #0008; touch-action: none; }
.rail { display: grid; grid-template-rows: auto auto minmax(0, 1fr); min-height: 0; gap: 12px; padding: 12px; border-left: 1px solid #695038; background: rgba(24, 16, 10, .9); }
.score-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.score { padding: 10px; border: 1px solid #6a5138; border-radius: 7px; background: #2b1e12; }
.score.active { border-color: #f2c56b; box-shadow: inset 0 -3px #f2c56b; }
.score h2 { margin: 0 0 4px; font-size: .8rem; }
.score strong { display: block; font-size: 1.35rem; }
.score span { color: #bca58b; font-size: .68rem; }
.score.black h2 { color: #d8b98b; }
.score.white h2 { color: #e5eef5; }
.power-panel { padding: 10px; border-block: 1px solid #5a432d; }
.power-heading { display: flex; justify-content: space-between; color: #bca58b; font-size: .7rem; font-weight: 900; }
.power-heading strong { color: #f2c56b; }
.power-track { height: 10px; margin-top: 7px; overflow: hidden; background: #0d0906; }
.power-track i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #52d3d8, #f2c56b, #ef4444); }
#hint { margin: 9px 0 0; color: #c9b49d; font-size: .76rem; line-height: 1.4; }
.log { min-height: 0; margin: 0; padding: 8px 8px 8px 26px; overflow: auto; color: #a99278; font-size: .7rem; line-height: 1.6; }
.modal { position: fixed; inset: 0; z-index: 20; display: grid; padding: calc(var(--safe-top) + 16px) calc(var(--safe-right) + 16px) calc(var(--safe-bottom) + 16px) calc(var(--safe-left) + 16px); place-items: center; background: #0b0705c7; backdrop-filter: blur(8px); }
.hidden { display: none !important; }
.modal-panel { display: grid; width: min(460px, 100%); max-height: 100%; gap: 16px; padding: clamp(18px, 4vw, 28px); overflow: auto; border: 1px solid #806142; border-radius: 8px; background: #24180e; box-shadow: 0 30px 80px #0009; }
.eyebrow { margin: 0; color: #f2c56b; font-size: .7rem; font-weight: 950; }
.modal h1, .modal h2 { margin: 0; letter-spacing: 0; }
.modal h1 { font-size: clamp(2rem, 8vw, 3rem); }
.mode-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mode-grid button { display: grid; min-height: 88px; align-content: center; gap: 5px; padding: 10px; border: 1px solid #60472f; background: #312216; color: #fff; }
.mode-grid button.selected { border-color: #f2c56b; background: #49351e; }
.mode-grid span { color: #bca58b; font-size: .72rem; font-weight: 650; }
.difficulty { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 5px; background: #130d08; }
.difficulty button { background: #3a2a1b; color: #ead9c6; }
.difficulty button.selected { background: #52d3d8; color: #062b2d; }
.primary { width: 100%; background: #f2c56b; color: #251706; }
.modal-heading { display: flex; align-items: center; justify-content: space-between; }
.rules ul { display: grid; gap: 10px; margin: 0; padding-left: 20px; color: #d7c4af; line-height: 1.5; }
@media (max-width: 760px) {
  .topbar { min-height: 52px; padding: 5px 8px; }
  .round { position: fixed; z-index: 4; right: calc(var(--safe-right) + 10px); bottom: calc(var(--safe-bottom) + 10px); box-shadow: 0 5px 18px #0009; }
  .layout { grid-template-columns: 1fr; grid-template-rows: minmax(0, 66dvh) minmax(0, 34dvh); }
  .board-wrap { padding: 5px; }
  #game { width: min(100%, calc(65dvh * 10 / 7)); }
  .rail { grid-template-columns: 1fr 1fr; grid-template-rows: auto; padding: 7px 8px calc(var(--safe-bottom) + 54px); border-top: 1px solid #695038; border-left: 0; }
  .log { display: none; }
}
@media (max-width: 480px) and (orientation: portrait) {
  .layout { grid-template-rows: minmax(0, 49dvh) minmax(0, 51dvh); }
  #game { width: min(100%, calc(48dvh * 10 / 7)); }
  .rail { grid-template-columns: 1fr; grid-template-rows: auto auto; gap: 6px; }
  .mode-grid { grid-template-columns: 1fr; }
}