:root {
  color-scheme:dark;
  --bg:#080e1c;
  --panel:#111c30;
  --line:#25344a;
  --text:#e7f1ff;
  --muted:#91a5bd;
  --accent:#37dbea;
  --start:#133e35;
  --city:#182c43;
  --event:#30254b;
  --tax:#442634;
  --island:#173c51;
  font-family:Inter,"Noto Sans KR",system-ui,sans-serif;
}

* {
  box-sizing:border-box;
}

body {
  margin:0;
  background:radial-gradient(ellipse at 20% 0,#123249 0,transparent 45%),var(--bg);
  color:var(--text);
}

button,input,select {
  font:inherit;
}

button,a,input,select,summary {
  touch-action:manipulation;
}

button {
  border:1px solid #30465f;
  background:#1b3048;
  color:var(--text);
  border-radius:10px;
  padding:10px 14px;
  cursor:pointer;
  font-weight:600;
  transition:background .15s,border-color .15s;
}

button:hover:not(:disabled) {
  border-color:var(--accent);
  background:#25405b;
}

button:disabled {
  opacity:.35;
  cursor:not-allowed;
}

button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,.board-cell:focus-visible {
  outline:3px solid var(--accent);
  outline-offset:3px;
}

[hidden] {
  display:none!important;
}

.page {
  max-width:1500px;
  margin:auto;
  padding:30px;
}

.game-header {
  display:flex;
  align-items:center;
  gap:32px;
  margin:0 0 30px;
}

.back-link {
  color:var(--muted);
  text-decoration:none;
  font-size:12px;
  font-weight:800;
  letter-spacing:2px;
  border:1px solid var(--line);
  border-radius:10px;
  padding:12px;
  white-space:nowrap;
}

.back-link:hover {
  color:var(--accent);
}

.eyebrow {
  color:var(--accent);
  letter-spacing:2px;
  font-size:10px;
  font-weight:800;
  margin:0 0 8px;
}

h1 {
  font-size:clamp(23px,3.3vw,40px);
  letter-spacing:-1.4px;
  margin:0;
  font-weight:900;
}

h1 span {
  color:var(--accent);
}

.subtitle {
  font-size:13px;
  color:var(--muted);
  margin:9px 0 0;
}

.header-badge {
  margin-left:auto;
  white-space:nowrap;
  border:1px solid #28575f;
  background:#12323b;
  color:var(--accent);
  border-radius:100px;
  padding:8px 16px;
  font-size:12px;
}

.app-layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) 325px;
  gap:20px;
  align-items:start;
}

.board-section {
  min-width:0;
  border:1px solid var(--line);
  background:#0d1728;
  border-radius:18px;
  overflow:hidden;
}

.board-toolbar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding:17px 18px;
  border-bottom:1px solid var(--line);
  font-size:13px;
}

.live-dot {
  display:inline-block;
  background:var(--accent);
  width:7px;
  height:7px;
  border-radius:50%;
  margin-right:9px;
  box-shadow:0 0 12px #37dbea;
}

.view-switch {
  display:flex;
  gap:4px;
}

.view-switch button {
  font-size:11px;
  padding:8px 12px;
  background:transparent;
  border-color:transparent;
  white-space:nowrap;
}

.view-switch button[aria-pressed="true"] {
  background:#143b46;
  color:var(--accent);
  border-color:#286372;
}

.scene-wrap {
  position:relative;
}

.scene-3d {
  height:clamp(410px,57vw,720px);
  width:100%;
  overflow:hidden;
}

.scene-3d canvas {
  width:100%;
  height:100%;
  display:block;
  touch-action:none;
  cursor:grab;
}

.scene-3d canvas:active {
  cursor:grabbing;
}

.scene-caption {
  position:absolute;
  top:17px;
  left:18px;
  right:18px;
  display:flex;
  justify-content:space-between;
  gap:12px;
  pointer-events:none;
  font-size:10px;
  color:var(--muted);
  letter-spacing:.4px;
}

.scene-caption span {
  padding:7px 10px;
  background:#0c182bba;
  border-radius:6px;
}

#scene-status {
  color:var(--accent);
}

.camera-controls {
  position:absolute;
  bottom:15px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:5px;
  background:#0b1729d9;
  padding:5px;
  border:1px solid var(--line);
  border-radius:12px;
  white-space:nowrap;
}

.camera-controls button {
  padding:7px 10px;
  font-size:11px;
  border-color:transparent;
  background:transparent;
}

.board-footer {
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:13px 18px;
  border-top:1px solid var(--line);
  font-size:10px;
  color:var(--muted);
}

.board-footer span:last-child {
  white-space:nowrap;
}

.board {
  --rows:9;
  --cols:9;
  display:grid;
  grid-template-columns:repeat(var(--cols),minmax(0,1fr));
  grid-template-rows:repeat(var(--rows),minmax(0,1fr));
  aspect-ratio:1/1;
  width:100%;
  background:#0d1728;
}

.board-cell {
  border:1px solid #26394e;
  min-height:48px;
  position:relative;
  padding:5px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  gap:3px;
}

.board-cell[data-tile-id] {
  cursor:pointer;
}

.board-cell[data-tile-id]:hover {
  filter:brightness(1.3);
}

.board-empty {
  background:#0d1728;
  border-color:#0d1728;
}

.board-center {
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--accent);
  font-size:12px;
  font-weight:900;
}

.type-start {
  background:var(--start);
}

.type-city {
  background:var(--city);
}

.type-event {
  background:var(--event);
}

.type-tax {
  background:var(--tax);
}

.type-island {
  background:var(--island);
}

.tile-name {
  font-size:12px;
  font-weight:700;
  line-height:1.2;
}

.tile-meta,.tile-owner,.tile-econ {
  font-size:9px;
  line-height:1.25;
  color:#adc3da;
}

.tokens {
  position:absolute;
  right:4px;
  bottom:4px;
  display:grid;
  grid-template-columns:repeat(2,auto);
  gap:3px;
}

.token {
  width:18px;
  height:18px;
  border-radius:50%;
  border:1px solid #ffffff80;
  color:#fff;
  font-size:10px;
  line-height:16px;
  text-align:center;
  font-weight:700;
}

.side-panel {
  display:flex;
  flex-direction:column;
  gap:14px;
}

.panel {
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:14px;
  padding:18px;
}

h2 {
  font-size:14px;
  margin:0 0 13px;
}

.setup-panel label {
  display:block;
  margin-bottom:7px;
  font-size:12px;
  color:var(--muted);
}

input,select {
  width:100%;
  background:#0b1628;
  color:var(--text);
  border:1px solid var(--line);
  border-radius:8px;
  padding:10px;
  margin-bottom:8px;
  font-size:12px;
}

.setup-panel button {
  width:100%;
  margin-top:5px;
  background:var(--accent);
  color:#042331;
  border-color:var(--accent);
}

.setup-panel button:hover:not(:disabled) {
  background:#71ebf5;
}

.name-inputs {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
}

.name-inputs input {
  min-width:0;
  margin:0;
}

.setup-hint {
  color:var(--muted);
  font-size:10px;
  text-align:center;
  margin:10px 0 0;
}

.turn-panel {
  background:linear-gradient(120deg,#163b4b,#14243b);
  border-color:#286175;
}

.turn-info {
  font-size:17px;
  font-weight:800;
}

.last-roll {
  margin-top:8px;
  color:var(--accent);
  font-size:12px;
}

.action-hint {
  color:var(--muted);
  font-size:12px;
  line-height:1.6;
  margin:0 0 12px;
  min-height:38px;
}

.actions-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

.actions-grid button {
  font-size:12px;
  padding:12px 7px;
}

#roll-btn {
  background:var(--accent);
  color:#062b36;
  border-color:var(--accent);
}

.players-list {
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.player-item {
  border:1px solid var(--line);
  border-radius:9px;
  padding:12px;
  background:#0d1728;
  font-size:12px;
}

.player-item.active {
  border-color:#34ccdf;
  background:#123040;
}

.player-item.bankrupt {
  opacity:.5;
}

.player-head {
  display:flex;
  justify-content:space-between;
  gap:8px;
  font-weight:700;
}

.player-lines {
  margin-top:8px;
  color:var(--muted);
  line-height:1.7;
  font-size:10px;
}

.player-owned-btn {
  margin-top:9px;
  font-size:10px;
  padding:5px 9px;
}

.tile-inspector {
  margin:0 18px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  background:#122639;
  border-color:#234458;
}

.tile-inspector h2 {
  font-size:16px;
  margin:0 0 6px;
}

.tile-inspector p:last-child {
  font-size:12px;
  color:var(--muted);
  line-height:1.6;
  margin:0;
}

.tile-inspector button {
  font-size:11px;
  flex-shrink:0;
}

.rules-panel {
  margin:0 18px 18px;
  background:#101c2e;
  font-size:12px;
  color:var(--muted);
  line-height:1.8;
}

.rules-panel summary {
  cursor:pointer;
  color:var(--text);
  font-weight:600;
}

.rules-panel p:last-child {
  margin-bottom:0;
}

.log-panel {
  margin-top:20px;
}

.log-list {
  height:155px;
  overflow-y:auto;
  font-size:11px;
  color:var(--muted);
  line-height:1.65;
}

.log-line {
  padding:6px 0;
  border-bottom:1px solid #24334a;
}

.log-line:last-child {
  border:0;
}

.modal-overlay {
  position:fixed;
  inset:0;
  background:#030a16c7;
  backdrop-filter:blur(8px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  z-index:1000;
}

.modal-card {
  width:min(540px,100%);
  max-height:85vh;
  background:#111f34;
  border:1px solid #36556c;
  border-radius:17px;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  box-shadow:0 30px 100px #0007;
}

.modal-head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  padding:18px;
  border-bottom:1px solid var(--line);
}

.modal-head h3 {
  margin:0;
  font-size:18px;
}

.modal-close {
  padding:6px 10px;
  font-size:12px;
}

.modal-body {
  padding:18px;
  overflow-y:auto;
  font-size:13px;
}

.modal-actions {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  padding:18px;
  border-top:1px solid var(--line);
  background:#0d1829;
}

.modal-actions button {
  font-size:12px;
  padding:11px 7px;
}

#city-buy-btn {
  background:#167e80;
}

.city-info-lines {
  display:flex;
  flex-direction:column;
  gap:8px;
}

.city-info-line,.owned-list li {
  border:1px solid var(--line);
  border-radius:9px;
  background:#15283e;
  padding:12px;
  line-height:1.7;
}

.owned-list {
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.toast-container {
  position:fixed;
  right:18px;
  top:18px;
  display:flex;
  flex-direction:column;
  gap:8px;
  z-index:1200;
  pointer-events:none;
}

.toast {
  max-width:min(420px,calc(100vw - 36px));
  border:1px solid #327d88;
  border-radius:12px;
  background:#123443;
  color:#e7faff;
  padding:14px 17px;
  box-shadow:0 8px 25px #0005;
  font-size:12px;
  line-height:1.6;
  pointer-events:auto;
  animation:toast-in .18s ease-out;
}

.toast.closing {
  animation:toast-out .18s ease-in forwards;
}

@keyframes toast-in {
  from {
    opacity:0;
    transform:translateY(-8px);
  }
  to {
    opacity:1;
    transform:translateY(0);
  }
}

@keyframes toast-out {
  to {
    opacity:0;
    transform:translateY(-8px);
  }
}

@media(max-width:1050px) {
  .page {
    padding:20px;
  }
  .app-layout {
    grid-template-columns:minmax(0,1fr) 285px;
  }
  .scene-3d {
    height:540px;
  }
  .board-cell {
    padding:3px;
  }
  .tile-name {
    font-size:10px;
  }
  .tile-meta,.tile-owner,.tile-econ {
    font-size:8px;
  }
  .board-footer {
    flex-direction:column;
  }
}

@media(max-width:800px) {
  .game-header {
    gap:17px;
  }
  .header-badge {
    display:none;
  }
  .app-layout {
    grid-template-columns:1fr;
  }
  .side-panel {
    display:grid;
    grid-template-columns:1fr 1fr;
  }
  .players-panel {
    grid-column:1/-1;
  }
  .players-list {
    display:grid;
    grid-template-columns:1fr 1fr;
  }
  .scene-3d {
    height:560px;
  }
  .board-cell {
    min-height:46px;
  }
  .log-panel {
    margin-top:14px;
  }
  .scene-caption {
    top:12px;
    left:12px;
    right:12px;
  }
}

@media(max-width:520px) {
  .page {
    padding:12px;
  }
  .game-header {
    gap:12px;
    margin-bottom:20px;
  }
  .back-link {
    padding:10px 7px;
    font-size:9px;
    letter-spacing:1px;
  }
  .subtitle {
    font-size:11px;
    line-height:1.5;
  }
  .eyebrow {
    font-size:8px;
  }
  .board-toolbar {
    padding:12px;
    font-size:10px;
  }
  .view-switch button {
    font-size:10px;
    padding:7px 8px;
  }
  .scene-3d {
    height:440px;
  }
  .scene-caption {
    font-size:8px;
  }
  .scene-caption span {
    padding:5px 6px;
  }
  .camera-controls {
    gap:2px;
  }
  .camera-controls button {
    padding:7px;
    font-size:10px;
  }
  .panel {
    padding:14px;
  }
  .side-panel {
    grid-template-columns:1fr;
  }
  .players-list {
    grid-template-columns:1fr 1fr;
  }
  .player-item {
    padding:10px;
  }
  .player-head {
    flex-direction:column;
    gap:5px;
  }
  .tile-inspector {
    margin:0 12px 12px;
    align-items:flex-start;
    flex-direction:column;
  }
  .rules-panel {
    margin:0 12px 12px;
  }
  .board-cell {
    min-height:34px;
    padding:2px;
    gap:1px;
  }
  .tile-name {
    font-size:9px;
  }
  .tile-meta {
    display:none;
  }
  .tile-econ,.tile-owner {
    font-size:7px;
  }
  .token {
    width:12px;
    height:12px;
    font-size:7px;
    line-height:10px;
  }
  .tokens {
    right:1px;
    bottom:1px;
    gap:1px;
  }
  .modal-actions {
    grid-template-columns:1fr 1fr;
  }
  .board-center {
    font-size:8px;
  }
  .name-inputs {
    grid-template-columns:1fr 1fr;
  }
}

@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation:none!important;
    transition:none!important;
  }
}