/* Menus and HUD pieces shared by Traffic Control and Boom Run. */
html, body { height: 100%; overflow: hidden; -webkit-user-select: none; user-select: none; }
#game { position: fixed; inset: 0; overflow: hidden; touch-action: none; }
#view { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* ---- HUD ----------------------------------------------------------------------- */
#hud { position: absolute; inset: 0; pointer-events: none; }
.hud-l, .hud-r { position: absolute; top: max(12px, env(safe-area-inset-top)); display: flex; flex-direction: column; gap: 8px; }
.hud-l { left: max(14px, env(safe-area-inset-left)); align-items: flex-start; }
.hud-r { right: max(14px, env(safe-area-inset-right)); align-items: flex-end; }
.hud-row { display: flex; gap: 8px; align-items: center; }
.hud-r button { pointer-events: auto; }

.toast.warn { background: var(--sign-orange); box-shadow: inset 0 0 0 2px var(--sign-orange), inset 0 0 0 3.5px var(--ink), 0 4px 0 rgba(0, 0, 0, 0.3); }
.toast.trophy { background: var(--sign-white); }
.toast.power { background: #7fe0ff; box-shadow: inset 0 0 0 2px #7fe0ff, inset 0 0 0 3.5px var(--ink), 0 4px 0 rgba(0, 0, 0, 0.3); }

.toast.go { background: #7be07b; box-shadow: inset 0 0 0 2px #7be07b, inset 0 0 0 3.5px var(--ink), 0 4px 0 rgba(0, 0, 0, 0.3); }

@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.25); } 100% { transform: scale(1); } }

/* ---- Title -------------------------------------------------------------------------- */
.title-stack { width: min(540px, 100%); display: flex; flex-direction: column; gap: 16px; animation: drop-in 0.5s cubic-bezier(0.2, 1.3, 0.4, 1); }
.title-stack .guide-sign { margin-top: 30px; }
.title-inner { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.logo { margin: 0; font-size: clamp(42px, 10vw, 74px); font-weight: 900; line-height: 0.92; letter-spacing: -0.015em; text-wrap: balance; }
.tag { margin: 8px 0 0; font-size: clamp(15px, 3.6vw, 19px); font-weight: 700; }
.mode-btn {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px 9px;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  background: var(--sign-blue);
  color: var(--sign-white);
  box-shadow: inset 0 0 0 3px var(--sign-blue), inset 0 0 0 5px var(--sign-white), 0 5px 0 var(--sign-blue-deep);
  transition: transform 0.1s ease;
}
.mode-btn b { font-size: 19px; font-weight: 900; letter-spacing: 0.03em; text-align: left; }
.mode-btn em { font-style: normal; font-size: 13px; font-weight: 700; opacity: 0.9; text-align: right; }
@media (max-width: 520px) { .mode-btn { flex-direction: column; align-items: flex-start; gap: 4px; } .mode-btn em { text-align: left; } }
.mode-btn:hover { transform: translateY(-2px); }
.mode-btn:active { transform: translateY(3px); }
.menu-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.count { font-weight: 700; font-size: 12px; opacity: 0.7; }
.meta, .controls { margin: 0; font-size: 14px; font-weight: 700; color: var(--muted); text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7); }
.meta b { color: var(--sign-white); }
.star { color: #ffd23f; }
@media (hover: none) { .controls.kb { display: none; } }
@media (hover: hover) { .controls.touch { display: none; } }

/* ---- Cards ---------------------------------------------------------------------- */
.card.wide { width: min(720px, 100%); }
.card-foot { padding: 0 18px 18px; }
.card-body h3 { margin: 0 0 8px; font-size: 13px; font-weight: 900; letter-spacing: 0.14em; color: var(--ink-soft); text-transform: uppercase; }
.fields { margin: 0; display: grid; gap: 6px; }
.fields > div { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 6px; border-bottom: 1.5px dashed #d4d8df; }
.fields dt { font-weight: 700; color: var(--ink-soft); }
.fields dd { margin: 0; font-weight: 900; font-variant-numeric: tabular-nums; }
.res-trophies { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-weight: 800; }
.res-trophies:empty { display: none; }

/* Shop */
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.shop-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 10px 10px 12px;
  border-radius: 8px;
  background: #fff;
  box-shadow: inset 0 0 0 1.5px #d4d8df;
}
.shop-item.equipped { box-shadow: inset 0 0 0 2.5px var(--sign-green); }
.shop-item.poor .btn-yellow { opacity: 0.5; }
.si-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.si-txt b { font-size: 15px; font-weight: 900; }
.si-txt em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--ink-soft); }
.shop-item button { flex: none; white-space: nowrap; }

/* Trophies */
.trophy-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow-y: auto; }
.trophy-list li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 7px; background: #eef0f3; opacity: 0.7; }
.trophy-list li.got { background: #fff4cc; opacity: 1; }
.tro-ico { font-size: 20px; color: #c9a020; }
.tro-txt { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.tro-txt b { font-size: 14px; font-weight: 900; }
.tro-txt em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--ink-soft); }
.tro-coins { font-size: 12px; font-weight: 900; color: #a87800; }
.stats { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.stats b { color: var(--ink); }

.toggle-row .sub { display: block; font-style: normal; font-size: 12px; color: var(--ink-soft); }