:root {
  color-scheme: dark;
  --ink: #0b0e13;
  --panel: #121923;
  --panel-2: #172130;
  --line: rgba(184, 211, 231, 0.16);
  --muted: #94a4b7;
  --white: #edf4f5;
  --cyan: #5dd9e9;
  --gold: #f0bd5f;
  --red: #f07973;
  --light-square: #d6e3e1;
  --dark-square: #4c6871;
  --board-size: min(66vw, 660px);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  color: var(--white);
  font-family: "Noto Sans KR", sans-serif;
  background:
    radial-gradient(circle at 50% -20%, #294254 0, transparent 37rem),
    linear-gradient(120deg, #080b10 0%, #0d131c 51%, #080a0f 100%);
}
button { font: inherit; }
.app-shell { max-width: 1720px; margin: auto; padding: 22px clamp(16px, 3vw, 52px) 36px; }
.topbar { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--line); padding-bottom: 20px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark { width: 44px; height: 44px; display:grid; place-items:center; border:1px solid rgba(93,217,233,.46); color:var(--cyan); font-size:26px; background:#0e1d28; box-shadow: inset 0 0 20px rgba(93,217,233,.12); }
.eyebrow, .side-heading p, .effect-label, .arena-meta, .rules-note span, .log-header { margin: 0; font: 600 10px/1.2 "IBM Plex Mono", monospace; color: var(--cyan); letter-spacing: .13em; }
h1 { margin: 2px 0 0; font: 400 24px/1 "Black Han Sans", sans-serif; letter-spacing: .02em; }
.match-strip { display: flex; gap: 28px; margin-left:auto; margin-right: 18px; }
.match-strip div { display:grid; gap:3px; min-width:62px; }
.match-strip span { color: var(--muted); font: 600 10px "IBM Plex Mono", monospace; letter-spacing: .08em; }
.match-strip strong { color: var(--gold); font: 600 14px "IBM Plex Mono", monospace; }
.top-actions { display:flex; gap:8px; }
button { border: 0; cursor: pointer; transition: transform .16s ease, background .16s ease, border-color .16s ease, opacity .16s ease; }
button:hover:not(:disabled) { transform: translateY(-1px); }
button:disabled { cursor: not-allowed; opacity: .46; }
.primary,.secondary { padding: 11px 15px; border: 1px solid; font-size: 13px; font-weight: 700; }
.primary { color:#15120b; background:var(--gold); border-color:#ffd782; }
.secondary { color:var(--white); background:transparent; border-color:var(--line); }

.game-layout { display:grid; grid-template-columns: minmax(230px, 1fr) minmax(430px, 680px) minmax(230px, 1fr); gap: clamp(18px, 2.8vw, 52px); align-items:start; padding-top: 28px; }
.side-panel { min-height: 570px; background: linear-gradient(150deg, rgba(24,34,47,.82), rgba(11,16,24,.9)); border:1px solid var(--line); padding: 18px; position:relative; overflow:hidden; }
.side-panel::before { content:""; position:absolute; top:0; left:0; right:0; height:2px; background:var(--cyan); opacity:.8; }
.black-panel::before { background:var(--gold); }
.side-heading { display:flex; align-items:center; gap:10px; }
.side-heading h2 { margin:3px 0 0; font-size:16px; }
.side-dot { width:10px; height:10px; transform:rotate(45deg); background:var(--white); box-shadow:0 0 13px rgba(255,255,255,.6); }
.black-dot { background:#17181b; border:1px solid #65717c; box-shadow:0 0 13px rgba(240,189,95,.34); }
.black-panel .side-heading p { color:var(--gold); }
.side-hint { min-height:38px; margin:15px 0 12px; color:var(--muted); font-size:12px; line-height:1.5; }
.card-list { display:grid; gap:8px; }
.spell-card { width:100%; min-height:76px; text-align:left; padding:10px 10px 9px; display:grid; grid-template-columns:25px 1fr 16px; gap:9px; align-items:start; color:var(--white); background:rgba(9,14,21,.73); border:1px solid rgba(151,177,197,.16); }
.spell-card:hover:not(:disabled) { background:#1b2a38; border-color:rgba(93,217,233,.65); }
.black-panel .spell-card:hover:not(:disabled) { border-color:rgba(240,189,95,.72); }
.spell-card.selected { background:#243c46; border-color:var(--cyan); box-shadow:inset 3px 0 0 var(--cyan); }
.black-panel .spell-card.selected { background:#393124; border-color:var(--gold); box-shadow:inset 3px 0 0 var(--gold); }
.spell-card.unavailable { opacity:.37; }
.skip-card { width:100%; padding:10px 12px; display:flex; justify-content:space-between; align-items:center; gap:8px; color:#aebfcd; background:transparent; border:1px dashed rgba(151,177,197,.3); text-align:left; }
.skip-card:hover { color:var(--white); border-color:rgba(93,217,233,.7); background:rgba(17,34,44,.46); }
.black-panel .skip-card:hover { border-color:rgba(240,189,95,.75); background:rgba(52,42,24,.46); }
.skip-card span { font-weight:700; font-size:12px; }.skip-card small { color:var(--muted); font-size:10px; }
.card-number { color:var(--cyan); font:600 12px "IBM Plex Mono", monospace; }
.black-panel .card-number { color:var(--gold); }
.card-copy { display:grid; gap:3px; }
.card-copy strong { font-size:12px; line-height:1.25; }
.card-copy small { color:var(--muted); font-size:10px; line-height:1.35; }
.card-arrow { color:var(--muted); align-self:center; }
.effect-block { border-top:1px solid var(--line); margin-top:18px; padding-top:13px; }
.effect-list { margin-top:8px; display:flex; flex-wrap:wrap; gap:6px; }
.effect-chip,.empty-chip { padding:5px 7px; border:1px solid rgba(93,217,233,.26); color:#bdeff4; background:#0e2028; font-size:10px; line-height:1.25; }
.black-panel .effect-chip { color:#ffe0a6; border-color:rgba(240,189,95,.3); background:#272116; }
.empty-chip { color:#68798b; border-color:var(--line); background:transparent; }

.arena { display:flex; flex-direction:column; align-items:center; min-width:0; }
.arena-meta { width:100%; display:flex; justify-content:space-between; color:#acc0d1; padding:0 3px 9px; }
.arena-meta span:first-child { color:var(--gold); }
.board-frame { width: min(100%, 660px); aspect-ratio: 1; position:relative; padding:0 0 18px 18px; }
.board { width:100%; aspect-ratio:1; display:grid; grid-template-columns:repeat(8,1fr); border:8px solid #172833; box-shadow:0 0 0 1px rgba(93,217,233,.34), 0 22px 55px rgba(0,0,0,.42); }
.square { position:relative; display:grid; place-items:center; border:0; padding:0; font-size:clamp(28px, 5.1vw, 54px); line-height:1; user-select:none; }
.square.light { background:var(--light-square); }
.square.dark { background:var(--dark-square); }
.square::after { content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .12s; }
.square.last-from::after,.square.last-to::after { opacity:1; background:rgba(240,189,95,.29); }
.square.targetable { cursor:crosshair; box-shadow:inset 0 0 0 3px var(--cyan); z-index:1; }
.square.targetable:hover { filter:brightness(1.17); }
.square.target-picked::after { opacity:1; background:rgba(93,217,233,.36); }
.piece { position:relative; z-index:1; filter:drop-shadow(0 2px 1px rgba(0,0,0,.45)); }
.piece.white { color:#fbffff; text-shadow:0 1px 0 #3b5358, 0 0 7px rgba(255,255,255,.42); }
.piece.black { color:#16191d; text-shadow:0 1px 0 rgba(255,255,255,.28), 0 0 4px rgba(0,0,0,.75); }
.square.frozen .piece { filter:grayscale(1) drop-shadow(0 0 8px #6ac8fb); opacity:.63; }
.frozen-mark { position:absolute; right:6%; top:5%; z-index:2; color:#b9f5ff; font:600 11px "IBM Plex Mono", monospace; }
.rank-labels { position:absolute; left:0; top:0; height:calc(100% - 18px); width:16px; display:grid; grid-template-rows:repeat(8,1fr); align-items:start; color:#7893a1; font:600 10px "IBM Plex Mono", monospace; }
.file-labels { position:absolute; bottom:0; left:18px; width:calc(100% - 18px); display:grid; grid-template-columns:repeat(8,1fr); color:#7893a1; font:600 10px "IBM Plex Mono", monospace; text-align:center; }
.status-card { width:100%; margin-top:15px; min-height:48px; padding:12px 14px; display:flex; align-items:flex-start; gap:9px; background:rgba(11,19,28,.88); border:1px solid var(--line); color:#d8e7ec; font-size:12px; line-height:1.5; }
.status-card p { margin:0; }
.status-pip { flex:0 0 auto; width:8px; height:8px; margin-top:5px; background:var(--cyan); box-shadow:0 0 10px var(--cyan); }
.legend { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:10px; color:var(--muted); font-size:10px; }
.legend span { display:flex; align-items:center; gap:5px; }.legend i { width:9px; height:9px; display:inline-block; }.selection-swatch{border:2px solid var(--cyan)}.frozen-swatch{background:#8cecff}.last-swatch{background:var(--gold)}

.lower-deck { display:grid; grid-template-columns: minmax(260px,.8fr) minmax(420px,1.5fr); gap:20px; margin-top:24px; }
.rules-note,.log-wrap { border:1px solid var(--line); background:rgba(14,20,29,.72); padding:16px; }
.rules-note p { margin:7px 0 0; color:#afbeca; font-size:12px; line-height:1.65; }.rules-note b { color:var(--gold); }
.log-header { display:flex; justify-content:space-between; align-items:center; }.text-button { color:var(--muted); background:none; font:500 10px "IBM Plex Mono",monospace; }.text-button:hover { color:var(--cyan); }
.game-log { max-height:130px; overflow:auto; list-style:none; padding:0; margin:10px 0 0; display:grid; gap:4px; }.game-log li { padding-left:12px; border-left:2px solid rgba(93,217,233,.38); color:#aebfcc; font-size:11px; line-height:1.45; }.game-log li.important { border-color:var(--gold); color:#f3d9a7; }

@media (max-width: 1080px) { .game-layout { grid-template-columns:1fr 1fr; }.arena { grid-row:1; grid-column:1 / -1; }.white-panel { grid-row:2; }.black-panel { grid-row:2; }.side-panel{min-height:auto}.lower-deck{grid-template-columns:1fr}.match-strip{margin-left:0;} }
@media (max-width: 650px) { .app-shell{padding:14px 10px 24px}.topbar{align-items:flex-start; flex-wrap:wrap}.brand h1{font-size:20px}.match-strip{order:3;width:100%;justify-content:space-between;margin:0}.top-actions{margin-left:auto}.primary,.secondary{padding:9px 10px;font-size:11px}.game-layout{grid-template-columns:1fr;gap:14px;padding-top:18px}.arena{grid-row:auto;grid-column:auto;order:-1}.white-panel,.black-panel{grid-row:auto}.side-panel{padding:14px}.card-list{grid-template-columns:1fr}.spell-card{min-height:65px}.lower-deck{margin-top:14px}.board-frame{padding-left:14px}.rank-labels{width:13px}.file-labels{left:14px;width:calc(100% - 14px)} }