:root {
  color-scheme: light;
  --bg: #1e1b4b;
  --panel: #2b2870;
  --grid: #17153a;
  --cell: #35318a;
  --ink: #f5f3ff;
  --accent: #fbbf24;
  --good: #34d399;
  --bad: #f87171;
  --piece-a: #60a5fa;
  --piece-b: #f472b6;
  --piece-c: #34d399;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

#app {
  max-width: 460px;
  margin: 0 auto;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
  user-select: none;
  -webkit-user-select: none;
}

.topbar { display: flex; align-items: center; gap: 8px; padding: 2px 2px 6px; }
.title { font-weight: 800; font-size: 20px; }
.title small { font-weight: 500; font-size: 12px; color: #c4b5fd; }
.spacer { flex: 1; }
.hud { font-size: 15px; background: rgba(0,0,0,.3); border-radius: 999px; padding: 4px 12px; }
.hud .sep { color: #a5b4fc; margin: 0 4px; }
.hud .opt { color: #c4b5fd; font-size: 13px; }

#status { font-size: 14px; color: #fde68a; min-height: 20px; margin: 0 2px 6px; }

#board {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 3px;
  background: var(--grid);
  border-radius: 12px;
  padding: 8px;
  touch-action: manipulation;
}

.cell {
  aspect-ratio: 1;
  border-radius: 5px;
  background: var(--cell);
}
.cell.filled-a { background: var(--piece-a); }
.cell.filled-b { background: var(--piece-b); }
.cell.filled-c { background: var(--piece-c); }
.cell.ghost { outline: 2px dashed var(--accent); outline-offset: -2px; }
.cell.clear { animation: clearflash .3s ease-out; }
@keyframes clearflash {
  0% { filter: brightness(2); }
  100% { filter: none; }
}

#traybar { display: flex; gap: 8px; align-items: stretch; margin-top: 10px; }
#tray {
  flex: 1;
  display: flex;
  gap: 8px;
  justify-content: space-around;
  background: var(--panel);
  border-radius: 12px;
  padding: 8px;
  min-height: 86px;
  align-items: center;
}

.tray-piece {
  display: grid;
  gap: 2px;
  padding: 6px;
  border-radius: 10px;
  border: 2px solid transparent;
  cursor: pointer;
}
.tray-piece.selected { border-color: var(--accent); background: rgba(251,191,36,.12); }
.tray-piece.placed { visibility: hidden; }
.tray-piece .pcell { width: 16px; height: 16px; border-radius: 3px; background: transparent; }
.tray-piece .pcell.on-a { background: var(--piece-a); }
.tray-piece .pcell.on-b { background: var(--piece-b); }
.tray-piece .pcell.on-c { background: var(--piece-c); }

.tray-actions { display: flex; flex-direction: column; gap: 8px; }
.btn {
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(0,0,0,.3);
  color: #fff;
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.btn.primary { background: var(--accent); border-color: var(--accent); color: #1e1b4b; }

#toast {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  background: rgba(0,0,0,.85);
  color: #fff;
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 700;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
  max-width: 92vw;
  text-align: center;
}
#toast.show { opacity: 1; }

html.touch .tray-piece .pcell { width: 20px; height: 20px; }
html.touch .btn { padding-top: 10px; padding-bottom: 10px; }