:root {
  color-scheme: dark;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif;
  background: #0b1620;
  color: #f5f7fb;
  --text-strong: #ffffff;
  --text-main: #edf3ff;
  --text-soft: #d7e4f4;
  --text-muted: #b8c8dc;
  --panel-deep: #0d1f2f;
  --panel-mid: #132d42;
  --panel-soft: #1d3a52;
  --board-shadow: rgba(45, 33, 24, 0.34);
  font-synthesis: none;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100dvh; background: linear-gradient(180deg, #0b1620 0%, #111d2b 100%); }
button { font: inherit; -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: default; }
#app { min-height: 100dvh; background: linear-gradient(180deg, rgba(11, 22, 32, 0.96), rgba(17, 29, 43, 0.96)); }
.home-shell, .pass-shell, .end-shell { width: min(100%, 620px); min-height: 100dvh; margin: 0 auto; padding: max(32px, env(safe-area-inset-top)) 24px max(32px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: stretch; justify-content: center; }
.game-shell { width: min(100%, 760px); min-height: 100dvh; margin: 0 auto; padding: max(18px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; position: relative; }
.eyebrow { margin: 0 0 8px; color: #83d5ff; font-size: .72rem; font-weight: 800; letter-spacing: .14em; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 8px; font-size: clamp(1.9rem, 7vw, 2.6rem); line-height: 1.15; }
h2 { font-size: 1rem; margin-bottom: 8px; }
.lead, .subtitle { color: var(--text-main); line-height: 1.65; }
.brand-mark, .pass-icon { width: 74px; height: 74px; display: grid; place-items: center; margin-bottom: 22px; border: 1px solid #5cc6f0; border-radius: 22px; color: #f4d35e; background: #102b49; box-shadow: 0 16px 40px #0007; font-size: 2.7rem; }
.pass-shell { text-align: center; align-items: center; }
.pass-shell .lead { max-width: 22rem; }
.privacy-note { margin-top: 20px; max-width: 20rem; color: #f0cbb7; font-size: .85rem; line-height: 1.55; }
.card { padding: 18px; border: 1px solid #254765; border-radius: 18px; background: rgba(13, 24, 35, 0.94); box-shadow: 0 12px 30px rgba(0,0,0,0.25); }
.home-card { margin: 24px 0; }
.home-card p { margin: 0; color: var(--text-main); line-height: 1.6; }
.primary, .secondary { width: 100%; min-height: 50px; border: 1px solid transparent; border-radius: 14px; cursor: pointer; font-weight: 800; }
.primary { color: #f4f7fa; background: linear-gradient(180deg, #6baedd 0%, #2d5d8c 100%); box-shadow: 0 8px 18px rgba(0,0,0,0.2); }
.primary:active { background: linear-gradient(180deg, #8ecaf0 0%, #3f6f9d 100%); }
.large { min-height: 58px; font-size: 1rem; }
.secondary { color: #edf7ff; background: linear-gradient(180deg, #203a4c 0%, #132d42 100%); border-color: #3b6788; }
.secondary.selected { border-color: #f4d35e; color: #fff0ad; background: linear-gradient(180deg, #2b4f6d 0%, #193552 100%); }
.home-shell > button + button, .end-shell > button + button { margin-top: 12px; }
.how-to { margin-top: 20px; text-align: left; }
.how-to li { margin: 8px 0; color: var(--text-soft); line-height: 1.55; }
.hidden { display: none; }
.game-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.game-header h1 { font-size: clamp(1.45rem, 6vw, 2rem); }
.subtitle { margin-bottom: 0; font-size: .93rem; }
.round-badge { flex: 0 0 auto; display: grid; place-items: center; width: 51px; height: 51px; border: 1px solid #417398; border-radius: 15px; color: #f4d35e; background: #112a45; font-size: 1.3rem; font-weight: 900; }
.round-badge small { color: #a7c1dc; font-size: .62rem; }
.board { position: relative; width: min(86vw, 540px); max-width: 100%; aspect-ratio: 1 / 1; margin: 0 auto; padding: 2%; border: 10px solid #d2c194; border-radius: 18px; background: linear-gradient(180deg, #b9c7a6 0%, #9cad8d 100%); box-shadow: inset 0 0 0 7px rgba(97, 85, 64, 0.42), 0 18px 34px rgba(52, 41, 26, 0.18), 0 2px 0 rgba(255,255,255,0.45); overflow: hidden; }
.board::before {
  content: "";
  position: absolute;
  inset: 4%;
  z-index: 0;
  border-radius: 12px;
  background:
    linear-gradient(90deg, rgba(78, 82, 68, 0.95) 0 8%, transparent 8% 18%, rgba(78, 82, 68, 0.95) 18% 26%, transparent 26% 38%, rgba(78, 82, 68, 0.95) 38% 46%, transparent 46% 58%, rgba(78, 82, 68, 0.95) 58% 66%, transparent 66% 78%, rgba(78, 82, 68, 0.95) 78% 86%, transparent 86% 100%),
    linear-gradient(rgba(78, 82, 68, 0.95) 0 8%, transparent 8% 18%, rgba(78, 82, 68, 0.95) 18% 26%, transparent 26% 38%, rgba(78, 82, 68, 0.95) 38% 46%, transparent 46% 58%, rgba(78, 82, 68, 0.95) 58% 66%, transparent 66% 78%, rgba(78, 82, 68, 0.95) 78% 86%, transparent 86% 100%);
  background-size: 100% 100%;
  box-shadow: inset 0 0 0 5px rgba(67, 68, 58, 0.28);
  pointer-events: none;
}
.board::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(60,60,48,0.04));
  pointer-events: none;
}
.building-grid { position: relative; z-index: 1; display: grid; width: 100%; height: 100%; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: repeat(5, minmax(0, 1fr)); gap: 2%; padding: 1.5%; border-radius: 12px; background: rgba(118, 136, 96, 0.12); }
.building { position: relative; display: block; width: 100%; height: 100%; min-width: 0; aspect-ratio: 1 / 1; padding: 0; border: 3px solid rgba(51, 57, 42, 0.9); border-bottom-width: 8px; border-radius: 0; background: linear-gradient(180deg, #dfe7ca 0%, #a6b58d 46%, #718161 100%); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.16), inset 0 -14px 0 rgba(54, 57, 43, 0.42), 0 2px 0 rgba(52, 47, 39, 0.2); }
.building::before {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  top: 16%;
  bottom: 16%;
  border-radius: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.24) 0 18%, transparent 18% 36%, rgba(255,255,255,0.12) 36% 52%, transparent 52% 70%, rgba(255,255,255,0.22) 70% 88%, transparent 88% 100%),
    linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.14);
}
.building.tall { background: linear-gradient(180deg, #f0f3d9 0%, #b5bf95 46%, #6d7b5d 100%); }
.building.target { cursor: pointer; outline: 3px solid #f0ca47; outline-offset: 2px; animation: pulse 1s infinite alternate; }
.building.target:active { transform: scale(.94); }
.roof { position: absolute; top: 11%; left: 16%; width: 68%; height: 6px; border-radius: 4px; background: rgba(252, 248, 214, 0.7); box-shadow: 0 12px rgba(252,248,214,0.2), 0 24px rgba(252,248,214,0.12); }
.trace { position: absolute; z-index: 2; right: 9%; bottom: 9%; width: 18px; height: 18px; border: 2px solid rgba(255,255,255,0.8); border-radius: 50%; box-shadow: 0 2px 6px rgba(0,0,0,0.35); }
.trace.blue { background: #4da3d9; }.trace.yellow { background: #f2cd4a; }.trace.red { background: #d75d52; }
/* Discovered traces (visible to thief as already found by police) */
.trace.discovered { transform: scale(1.08); border-color: #ffffff; box-shadow: 0 4px 12px rgba(0,0,0,0.5), 0 0 0 4px rgba(255,255,255,0.04); }
.trace.discovered::after { content: "✓"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 10px; color: rgba(13, 17, 23, 0.9); font-weight: 900; }
.car { position: absolute; z-index: 3; left: 9%; bottom: 8%; color: #bf3d3a; font-size: 1.2rem; text-shadow: 0 1px 1px rgba(0,0,0,0.5); transform: rotate(-9deg); }
.intersection-layer { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.intersection { position: absolute; left: calc((var(--col) + 1) * 20%); top: calc((var(--row) + 1) * 20%); z-index: 2; width: 12%; aspect-ratio: 1; transform: translate(-50%, -50%); border: 0; border-radius: 50%; background: transparent; pointer-events: auto; }
.intersection::before {
  content: "";
  position: absolute;
  inset: 20%;
  border-radius: 50%;
  background: rgba(96, 103, 82, 0.82);
  border: 2px solid rgba(240, 244, 233, 0.9);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.12), 0 0 0 4px rgba(82, 87, 67, 0.22);
}
.intersection.target { cursor: pointer; background: rgba(237, 199, 73, 0.24); outline: 3px solid #d1a93f; animation: pulse 1s infinite alternate; }
.intersection.selected { outline: 3px solid #4c7d8d; }
.helicopter { position: absolute; inset: 50% auto auto 50%; display: grid; place-items: center; width: 30px; height: 30px; transform: translate(-50%, -50%); border: 2px solid rgba(255,255,255,0.9); border-radius: 50%; color: #f5f7ff; background: linear-gradient(180deg, #3d8bb8, #23577f); box-shadow: 0 0 0 4px rgba(50, 95, 127, 0.25), 0 6px 10px rgba(0,0,0,0.35); font-size: 1rem; }
.helicopter.yellow { background: linear-gradient(180deg, #f7d86a, #d2a82d); box-shadow: 0 0 0 4px rgba(178, 144, 52, 0.28), 0 6px 10px rgba(0,0,0,0.35); }
.helicopter.blue { background: linear-gradient(180deg, #67baf2, #2a6a9e); box-shadow: 0 0 0 4px rgba(43, 104, 162, 0.28), 0 6px 10px rgba(0,0,0,0.35); }
.helicopter.red { background: linear-gradient(180deg, #ef7e6d, #b13f3d); box-shadow: 0 0 0 4px rgba(186, 70, 60, 0.28), 0 6px 10px rgba(0,0,0,0.35); }
.helicopter::before {
  content: "✦";
  transform: scale(0.9);
}
.helicopter.acted { opacity: .42; filter: saturate(.4); }
.helicopter small { position: absolute; top: -10px; right: -10px; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; color: #1d1d1d; background: #f0cb55; font-size: .62rem; font-weight: 900; }
.controls { width: min(100%, 570px); margin: 18px auto 0; }
.instruction { display: grid; gap: 4px; padding: 13px 14px; margin-bottom: 12px; border-left: 3px solid #73d2ff; border-radius: 8px; color: var(--text-soft); background: linear-gradient(180deg, #122839 0%, #0b1b2b 100%); font-size: .87rem; line-height: 1.45; }
.instruction strong { color: #f4f8ff; font-size: .8rem; }
.rules-summary {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  margin-bottom: 12px;
  border: 1px solid rgba(115, 210, 255, 0.18);
  border-left: 3px solid #f4d35e;
  border-radius: 10px;
  background: linear-gradient(180deg, #122639 0%, #0d1c2a 100%);
  color: var(--text-main);
}
.rules-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.rules-summary strong {
  color: var(--text-strong);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.rules-summary p {
  margin: 0;
  font-size: .74rem;
  line-height: 1.5;
  color: var(--text-soft);
}
.trace-legend { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 0 12px; color: var(--text-main); font-size: .73rem; }
.trace-legend.compact { margin: 0; justify-content: flex-end; gap: 8px; font-size: .66rem; }
.trace-legend .trace { position: static; width: 14px; height: 14px; border-width: 2px; }
.trace-legend.compact .trace { width: 12px; height: 12px; }
.trace-rules { border-left-color: #f4d35e; }
.helicopter-picker, .action-grid { display: grid; gap: 8px; grid-template-columns: repeat(3, 1fr); margin-bottom: 12px; }
.action-grid { grid-template-columns: 1fr 1fr; }
.helicopter-button { min-height: 46px; border: 1px solid #345777; border-radius: 12px; color: #edf7ff; background: linear-gradient(180deg, #183149 0%, #112b47 100%); font-size: .76rem; font-weight: 800; }
.helicopter-button.yellow { border-color: #d1a52d; color: #fff0b8; background: linear-gradient(180deg, rgba(111, 88, 28, 0.72) 0%, rgba(76, 59, 18, 0.82) 100%); }
.helicopter-button.blue { border-color: #5ea9da; color: #ddf2ff; background: linear-gradient(180deg, rgba(26, 75, 106, 0.8) 0%, rgba(19, 48, 68, 0.9) 100%); }
.helicopter-button.red { border-color: #d25752; color: #ffe8e6; background: linear-gradient(180deg, rgba(116, 44, 39, 0.8) 0%, rgba(68, 25, 22, 0.9) 100%); }
.helicopter-button.selected { border-color: #f4d35e; color: #fff5bd; background: linear-gradient(180deg, #2b4f6d 0%, #15324d 100%); }
.helicopter-button.acted { opacity: .48; }
.notice { padding: 12px 14px; border-radius: 12px; font-size: .9rem; font-weight: 700; }
.notice.success { color: #d3ffe2; background: rgba(9, 60, 47, 0.94); }.notice.neutral { color: #edf7ff; background: rgba(24, 42, 58, 0.96); }.notice.error { color: #ffd6d1; background: rgba(105, 36, 40, 0.96); }
.text-button { width: 100%; margin-top: 16px; border: 0; color: #e4f2ff; background: transparent; text-decoration: underline; }
.danger { color: #ffaaa5; }
.end-shell { text-align: center; }
.end-shell.police h1 { color: #9de6ff; }.end-shell.thief h1 { color: #f4d35e; }
.route-card { width: 100%; margin: 20px 0; text-align: left; }
.route-card h2 { text-align: center; }.route-card .board { margin-bottom: 18px; }
.route-list { max-height: 180px; margin: 0; padding-left: 24px; overflow: auto; color: var(--text-soft); line-height: 1.8; }
.route-list .trace { position: static; display: inline-block; width: 11px; height: 11px; margin-right: 6px; }
/* History panel */
.history-panel { margin: 12px 0 18px; padding: 12px; background: linear-gradient(180deg, #122639 0%, #0d1720 100%); border: 1px solid rgba(115,210,255,0.06); }
.history-panel h3 { margin: 0 0 8px; color: var(--text-strong); }
.history-list { margin: 0; padding-left: 20px; color: var(--text-soft); max-height: 200px; overflow: auto; }
.history-list li { margin: 8px 0; display: flex; align-items: center; gap: 8px; }
.history-list .trace { width: 12px; height: 12px; display: inline-block; border-radius: 50%; border-width: 2px; }

/* Building label shown in history-mode and final reveal */
.building-label {
  position: absolute;
  left: 8px;
  top: 8px;
  background: rgba(0,0,0,0.36);
  color: #f0f6ff;
  padding: 2px 6px;
  border-radius: 8px;
  font-size: 0.72rem;
  font-weight: 700;
  pointer-events: none;
}

/* Turn timer shown above the board */
.turn-timer { text-align: center; margin: 10px 0; font-weight: 900; color: #fff8e6; }
.turn-timer .time { background: rgba(0,0,0,0.36); padding: 4px 8px; border-radius: 8px; margin-left: 8px; }

/* Rules sidebar */
.rules-sidebar { position: absolute; right: 24px; top: 80px; width: 300px; max-height: 70vh; overflow: auto; padding: 12px; background: linear-gradient(180deg, #0f2230, #08121a); border: 1px solid rgba(115,210,255,0.08); box-shadow: 0 12px 30px rgba(0,0,0,0.6); border-radius: 12px; z-index: 60; }
.rules-sidebar strong { color: var(--text-strong); }
.rules-sidebar .rules-summary { margin: 0; border: none; background: transparent; }

.heli-popover { position: absolute; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 6px; background: rgba(8,12,16,0.9); padding: 6px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.04); z-index: 70; pointer-events: auto; }
.heli-popover.left { right: calc(100% + 8px); }
.heli-popover.right { left: calc(100% + 8px); }
.heli-popover .btn { font-weight: 800; padding: 8px 10px; border-radius: 8px; cursor: pointer; background: transparent; color: var(--text-main); border: 1px solid rgba(255,255,255,0.04); }
.heli-popover .btn:hover { background: rgba(255,255,255,0.02); }
.intersection { position: absolute; left: calc((var(--col) + 1) * 20%); top: calc((var(--row) + 1) * 20%); z-index: 2; width: 12%; aspect-ratio: 1; transform: translate(-50%, -50%); border: 0; border-radius: 50%; background: transparent; pointer-events: auto; }
@keyframes pulse { from { box-shadow: 0 0 0 0 #f4d35e66; } to { box-shadow: 0 0 0 7px #f4d35e00; } }
@media (min-width: 620px) { .game-shell { padding-left: 24px; padding-right: 24px; } }