/* Lucky Coin Carnival — flagship responsive/device pass (2026-09-09) */
.hud {
  padding-top: max(8px, env(safe-area-inset-top));
  padding-right: max(10px, env(safe-area-inset-right));
  padding-left: max(10px, env(safe-area-inset-left));
}
.screen {
  padding:
    max(14px, env(safe-area-inset-top))
    max(14px, env(safe-area-inset-right))
    max(14px, env(safe-area-inset-bottom))
    max(14px, env(safe-area-inset-left));
}

/* Fairground identity previously shrank controls below a reliable touch size. */
.hud-btn {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  touch-action: manipulation;
}
.btn,.auth-link,.nn-nudge-signup,.nn-nudge-later {
  min-height: 44px;
  touch-action: manipulation;
}
.nn-nudge-signup { display:flex;align-items:center;justify-content:center; }

.panel {
  max-height: calc(100dvh - 30px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.screen.active { overflow:hidden; }
button:focus-visible,a:focus-visible { outline:3px solid #e5b94a;outline-offset:3px; }

/* Carnival ticket readout: actionable multiplier/rush timing, in the game's
   paper/wood/brass visual language rather than another generic neon chip. */
.ride-readout {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:22px;
  margin-top:5px;
  pointer-events:none;
}
.ride-readout.hidden { display:none!important; }
.ride-ticket {
  position:relative;
  padding:3px 8px;
  border:1px dashed #9b7542;
  border-radius:1px;
  background:#ead9ab;
  color:#49321f;
  box-shadow:2px 2px 0 rgba(0,0,0,.18);
  font:800 9px/1.25 'Share Tech Mono',monospace;
  letter-spacing:.08em;
  white-space:nowrap;
}
.ride-ticket.mult { background:#f0cb67;border-color:#8b6622;color:#3b2912; }
.ride-ticket.jackpot { background:#bd382f;border-color:#f1cf78;color:#fff1c7; }
.ride-ticket.danger { background:#5b3324;border-color:#d9a46c;color:#ffe6bf; }

/* Keep identity and account status usable on smaller screens. */
@media (max-width:560px) {
  #screen-start .auth-row { display:flex;width:100%;gap:4px;margin-top:7px; }
  #screen-start .auth-status { font-size:10px; }
  #screen-start .auth-link { font-size:11px;padding:5px 10px; }
  #screen-start .controls-hint { display:none; }
}
@media (max-width:430px) {
  .hud-btn { width:44px;height:44px; }
  .hud-row,.hud-group { gap:4px; }
  .hud-cell { padding:2px 3px; }
  .hud-value { font-size:16px; }
  .ride-ticket { font-size:8px;padding:3px 5px; }
}
@media (max-width:360px) {
  .hud { padding-right:max(5px,env(safe-area-inset-right));padding-left:max(5px,env(safe-area-inset-left)); }
  .hud-btn { width:42px;height:42px;min-width:42px;min-height:42px; }
  .mult-chip { font-size:11px;padding-left:5px;padding-right:5px; }
  .ride-readout { gap:3px; }
}
@media (max-height:700px) {
  .screen { align-items:flex-start; }
  .panel { margin:auto; }
  #screen-start .panel { margin-top:auto; }
  #screen-how .panel,#screen-gameover .panel { padding-top:15px;padding-bottom:15px; }
}
@media (orientation:landscape) and (pointer:coarse) and (max-height:600px) {
  #frame { height:100dvh;max-height:100dvh; }
  .screen { padding-top:max(8px,env(safe-area-inset-top));padding-bottom:max(8px,env(safe-area-inset-bottom)); }
  .panel { max-height:calc(100dvh - 16px); }
}
@media (prefers-reduced-motion:reduce) {
  .hud,.hud-btn,.btn,.jackpot-banner { transition:none!important;animation:none!important; }
}