/* ── Layout: game container, areas, splitters, canvas ── */
/* ── Main layout: top/bottom split with draggable divider ── */
#game-container {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

/* top area: galton (left) + controls (right) side by side */
#top-area {
  flex-shrink: 0;
  display: flex;
  overflow: hidden;
  min-height: 60px;
  border-bottom: 1px solid var(--border);
}

#galton-panel {
  width: var(--left-width, 35%);
  flex-shrink: 0;
  min-width: 60px;
  height: 100%;
  position: relative;
  background: var(--bg-panel);
  border-right: 1px solid var(--border);
  overflow: hidden;
}

/* Canvas fills galton panel */
#galton-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

#top-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-width: 0;
  overflow-x: hidden;
  background: var(--bg-body);
}

/* bottom area: chart + buttons */
#bottom-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

/* Splitters */
.splitter {
  background: var(--border, #0f3460);
  flex-shrink: 0;
  position: relative;
  z-index: 5;
}
.splitter::after {
  content: "";
  position: absolute;
  background: rgba(160,196,255,0.15);
  border-radius: 2px;
}
.splitter:hover { background: rgba(59,130,246,0.4); }
.splitter:active { background: rgba(59,130,246,0.6); }

.splitter-v {
  width: 6px;
  cursor: col-resize;
}
.splitter-v::after {
  width: 2px; height: 30px;
  left: 2px; top: 50%; transform: translateY(-50%);
}

.splitter-h {
  height: 6px;
  cursor: row-resize;
}
.splitter-h::after {
  height: 2px; width: 30px;
  top: 2px; left: 50%; transform: translateX(-50%);
}

/* Chart area */
#chart-area {
  flex: 1;
  position: relative;
  padding: 6px 8px;
  min-height: 0;
  overflow: hidden;
}

#chart-canvas {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 8px;
  cursor: crosshair;
}

/* ── Desktop layout (>= 768px): same grid, bigger galton ── */
@media (min-width: 768px) {
  #game-container {
    /* flexbox layout — no grid overrides needed */
  }

  #pnl-controls {
    padding: 6px 20px;
    gap: 6px 12px;
    justify-content: flex-start;
  }

  #pnl-info {
    padding: 6px 20px;
    font-size: 13px;
    gap: 6px 16px;
    justify-content: flex-start;
    order: 0;
  }

  .btn-sm {
    padding: 4px 10px !important;
    font-size: 11px !important;
  }

  #chart-area {
    padding: 12px;
  }

  #controls {
    flex-wrap: nowrap;
    gap: 16px;
    padding: 14px 20px;
  }

  #btn-buy,
  #btn-sell {
    flex: none;
    padding: 12px 36px;
    font-size: 18px;
    letter-spacing: 1px;
  }

  #btn-spin {
    flex: none;
    padding: 12px 36px;
    font-size: 18px;
  }

  .position-info {
    font-size: 14px;
    min-width: 160px;
  }

  .diff-btn {
    padding: 5px 12px;
    font-size: 12px;
  }

  #round-info {
    font-size: 13px;
  }
}