html, body { height: 100%; overflow: hidden; background: #10281a; }
#app { height: 100dvh; }
.view { display: none; flex-direction: column; min-height: 0; }
.view.active { display: flex; height: 100dvh; }
.view[hidden] { display: none !important; }
.puzzle-bar, .play-chrome, .picker-intro { flex: none; }
.play-chrome, .picker-intro, .puzzle-bar { padding-left: 12px; padding-right: 12px; }
.picker-intro h1, .puzzle-bar h2 { margin: 0; letter-spacing: -0.03em; }
.play-chrome { position: relative; z-index: 20; display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 8px; padding-top: calc(8px + env(safe-area-inset-top)); padding-bottom: 8px; background: #10281a; overflow: visible; }
.puzzle-bar { flex-direction: column; align-items: stretch; gap: 8px; }
.chrome-nav, .puzzle-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; overflow: visible; min-width: 0; }
.chrome-title { min-width: 0; width: 100%; }
.chrome-title h2, .chrome-title p { margin: 0; white-space: normal; overflow: visible; text-overflow: unset; }
.chrome-title h2 { font-size: clamp(1.15rem, 4.4vw, 1.5rem); line-height: 1.2; }
.puzzle-actions .text-btn, .chrome-nav .text-btn, .puzzle-actions select { font-size: 1rem; }
.play-chrome .brand img { height: 40px; }
.pick-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 14px; overflow: auto; }
.card { border: 0; padding: 0; border-radius: 18px; overflow: hidden; background: #1b3d2a; color: inherit; text-align: left; cursor: pointer; min-height: 44px; }
.card-art { position: relative; }
.card-thumb { width: 100%; aspect-ratio: 1; object-fit: cover; }
.card-flag { position: absolute; left: 8px; top: 8px; font-size: 1.4rem; }
.badge { position: absolute; right: 8px; top: 8px; background: #e23d32; color: white; border-radius: 999px; padding: 4px 8px; font-size: 0.75rem; }
.card-meta { padding: 10px 12px 12px; }
.card-country { color: #f0b429; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; }
.card-char { font-weight: 800; }
.play-area { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.board-wrap { flex: 1 1 auto; min-height: 0; display: grid; place-items: center; position: relative; z-index: 1; overflow: hidden; contain: paint; }
#board-canvas { background: rgba(255,255,255,0.06); border-radius: 12px; touch-action: none; box-shadow: 0 8px 28px rgba(0,0,0,0.28); }
.tray {
  flex: none;
  display: flex; gap: 8px; overflow-x: auto; align-items: center;
  min-height: 112px; max-height: 148px;
  padding: 8px 12px calc(10px + env(safe-area-inset-bottom));
  background: #0c1c13;
}
.tray-piece { touch-action: none; cursor: grab; }
.peek-overlay {
  position: absolute; inset: 12px; background-size: contain; background-repeat: no-repeat; background-position: center;
  opacity: 0; transition: opacity 0.2s linear; pointer-events: none;
}
.peek-overlay.show { opacity: 0.92; }
.win-overlay { display: none; position: fixed; inset: 0; place-items: center; background: rgba(8,16,12,0.45); z-index: 40; }
.win-overlay.is-open { display: grid; }
.win-overlay[hidden] { display: none !important; }
.peek-overlay[hidden] { display: none !important; }
.win-card { background: #fff8ee; color: #142117; border-radius: 18px; padding: 20px; width: min(420px, calc(100% - 28px)); text-align: center; }
.win-card .ghost { color: #142117; border-color: rgba(20,33,23,0.3); }
.confetti-bit { position: fixed; top: -10px; width: 8px; height: 14px; animation: fall linear forwards; }
select { min-height: 44px; border-radius: 999px; padding: 0 10px; background: #1b3d2a; color: #f7f1e6; border: 1px solid rgba(255,255,255,0.2); }
@keyframes fall { to { transform: translateY(100vh) rotate(180deg); opacity: 0.2; } }
@media (max-width: 800px) { .pick-grid { grid-template-columns: 1fr 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .confetti-bit { display: none; }
  .peek-overlay { transition: none; }
}