/* Nagata arcade UI — responsive title, tactile buttons, consistent pixel type. */
@font-face {
  font-family: PixelJP;
  src: url('/assets/arcade-ja-v3.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
:root { --pixel: PixelJP, 'Hiragino Kaku Gothic ProN', sans-serif; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { overflow-x: hidden; }
button { border-radius: 0; -webkit-appearance: none; appearance: none; }
#cabinet { border: 0; }
#home {
  height: 100svh;
  height: 100dvh;
  min-height: 700px;
  display: grid;
  grid-template-rows: auto minmax(80px, 1fr) auto;
  gap: 4px;
  padding: max(12px, env(safe-area-inset-top)) clamp(16px, 5vw, 26px) max(16px, env(safe-area-inset-bottom));
  border: 2px solid #ba9040;
}
#home::after { inset: 3px; border-color: #f7cf7455; }
.home-sky { background-position: center bottom; }
.title-lockup { width: 100%; min-width: 0; }
.title-lockup h1 img {
  display: block;
  width: min(78%, 290px);
  height: auto;
  max-height: 160px;
  margin: 0 auto;
  object-fit: contain;
  image-rendering: pixelated;
}
.game-subtitle { margin: 4px 0 0; line-height: 1; }
.title-lockup .game-subtitle img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 64px;
  margin: 0 auto;
  object-fit: contain;
  image-rendering: auto;
  filter: drop-shadow(0 2px 1px #030713);
}
.title-lockup p {
  font: 12px/1.6 var(--pixel);
  letter-spacing: .09em;
  margin: 8px 0 0;
  color: #fff4d4;
}
.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 86px;
  gap: 8px;
  min-height: 0;
  max-height: none;
  margin: 0;
  align-items: center;
  justify-content: normal;
}
.hero > img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 276px;
  min-height: 0;
  object-fit: contain;
  image-rendering: pixelated;
  animation: float 4s ease-in-out infinite;
  filter: drop-shadow(0 0 9px #ffc45740);
}
.speech {
  position: relative;
  top: auto;
  right: auto;
  align-self: start;
  margin: 24px 0 0;
  padding: 10px 5px;
  width: 86px;
  min-width: 0;
  font: 12px/1.8 var(--pixel);
  text-align: center;
  color: #fff1bf;
  background: #071229f5;
  border: 2px solid #f6d68b;
  box-shadow: inset 0 0 0 2px #30291c, 3px 3px #020711;
  letter-spacing: 0;
}
.speech span { display: block; white-space: nowrap; }
.speech::before {
  width: 10px;
  height: 10px;
  left: -7px;
  bottom: 13px;
  transform: rotate(45deg);
  background: #071229;
  border-left: 2px solid #f6d68b;
  border-bottom: 2px solid #f6d68b;
}
.home-bottom { margin: 0; padding: 2px 0 0; min-width: 0; }
.movie-button, .reservation-button {
  position: relative;
  display: block;
  width: 92%;
  aspect-ratio: 4.7 / 1;
  min-height: 48px;
  margin: 12px auto 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  overflow: hidden;
  touch-action: manipulation;
  filter: drop-shadow(0 3px 3px #0009);
  transition: filter .15s, transform .15s;
}
.movie-button img, .reservation-button img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.movie-button:hover { filter: brightness(1.15) drop-shadow(0 0 7px #f6c95566); }
.reservation-button { margin-top: 8px; }
.reservation-button:hover { filter: brightness(1.12) drop-shadow(0 0 8px #f67b5566); }
.movie-button:active, .reservation-button:active { transform: translateY(2px); }
.movie-button:focus-visible, .reservation-button:focus-visible { outline: 2px solid #fff1b0; outline-offset: 4px; }
#movie-dialog {
  width: min(960px, calc(100% - 24px));
  max-width: 960px;
  max-height: calc(100dvh - 24px);
  padding: 0;
  margin: auto;
  overflow: auto;
  color: #ffe4a5;
  background: #050b18;
  border: 2px solid #d6ac54;
  box-shadow: 0 0 0 4px #181c28, 0 24px 100px #000c;
}
#movie-dialog::backdrop { background: #020510ed; backdrop-filter: blur(8px); }
.movie-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; border-bottom: 1px solid #bc944755; }
.movie-header small { font: 9px/1.4 var(--pixel); letter-spacing: .12em; color: #c9af73; }
.movie-header h2 { margin: 4px 0 0; font: 18px/1.4 var(--pixel); }
#movie-close { flex: none; width: 44px; height: 44px; font: 28px/1 sans-serif; color: #ffe5aa; border: 1px solid #9f803c; background: #111e33; cursor: pointer; touch-action: manipulation; }
#special-movie { display: block; width: 100%; height: min(54dvh, 540px); min-height: 150px; object-fit: contain; background: #000; }
.movie-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 12px; }
.movie-choice { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 6px; border: 1px solid #8e713d; border-radius: 6px; background: #101b30; color: #ffe4a5; text-align: left; cursor: pointer; touch-action: manipulation; }
.movie-choice img { width: 64px; height: 52px; object-fit: cover; border-radius: 3px; }
.movie-choice span { font: bold 13px/1.5 sans-serif; }
.movie-choice small { display: block; font: 11px/1.5 sans-serif; color: #d2dceb; }
.movie-choice[aria-pressed="true"] { border-color: #ffe5a1; background: #3b301f; box-shadow: inset 0 0 0 1px #ffe5a1; }
.movie-choice:focus-visible { outline: 2px solid white; outline-offset: 2px; }
#movie-now-playing { margin: 0; padding: 0 12px 8px; font: bold 13px/1.5 sans-serif; }
@media (max-width: 600px) {
  .movie-list { gap: 6px; padding: 10px; }
  .movie-choice { flex-direction: column; align-items: stretch; text-align: center; gap: 4px; }
  .movie-choice img { width: 100%; height: 48px; }
  .movie-choice span { font-size: 11px; }
  .movie-header h2 { font-size: 15px; }
}
.movie-footer { padding: 10px 16px 12px; text-align: right; }
.movie-footer p { margin: 0; color: #d2dceb; text-align: left; font: 12px/1.7 sans-serif; }
.movie-footer p:empty { display: none; }
.movie-footer a { display: inline-block; padding: 5px 0; color: #cbb882; font: 11px/1.5 sans-serif; text-underline-offset: 4px; }
#movie-close:focus-visible, .movie-footer a:focus-visible { outline: 2px solid #fff1b0; outline-offset: 3px; }
/* Two inset polygons preserve every side of the frame, including the corners. */
.gold-button {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: 66px;
  padding: 10px 22px 12px;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 8px;
  border: 0;
  background: transparent;
  clip-path: none;
  box-shadow: none;
  filter: drop-shadow(0 4px 0 #412d12) drop-shadow(0 4px 5px #0009);
  color: #fff0b9;
  font: 23px/1.25 var(--pixel);
  letter-spacing: .05em;
  text-shadow: 1px 1px #7e4d16, 2px 2px #1c1409;
  touch-action: manipulation;
}
.gold-button::before, .gold-button::after {
  content: '';
  position: absolute;
  pointer-events: none;
  z-index: -2;
  inset: 0;
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px);
  background: linear-gradient(180deg, #fff4b4 0%, #d3a340 25%, #78501b 48%, #bc8d37 68%, #ffe8a0 100%);
}
.gold-button::after {
  z-index: -1;
  inset: 3px;
  clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px);
  background: linear-gradient(180deg, #655020 0, #17243b 15%, #071426 45%, #050d1a 75%, #493718 100%);
  box-shadow: inset 0 0 0 1px #eac46a;
}
.gold-button:hover:not(:disabled) { color: #fff9dc; filter: drop-shadow(0 4px 0 #412d12) drop-shadow(0 0 8px #f8cf6570); }
.gold-button:active:not(:disabled) { transform: translateY(3px); filter: drop-shadow(0 1px 0 #412d12); }
.gold-button:disabled { opacity: .7; font-size: 16px; }
.button-copy { display: block; min-width: 0; text-align: center; white-space: nowrap; }
.button-copy small { display: block; margin-top: 3px; font: 9px/1.2 var(--pixel); letter-spacing: .17em; color: #d4b77a; text-shadow: 0 1px #000; }
.button-icon { font: 12px/1 var(--pixel); color: #ffe59c; text-align: center; }
.home-options { gap: 8px; margin: 14px 0 8px; }
.home-options button, .sound, .text-button {
  min-height: 36px;
  padding: 6px 10px;
  font: 12px/1.3 var(--pixel);
  letter-spacing: .02em;
  border: 1px solid #a88847;
  background: #061226ed;
  box-shadow: inset 0 0 0 2px #152337, 0 2px #02060e;
}
.control-hint { margin: 7px 0; font: 10px/1.6 var(--pixel); letter-spacing: 0; color: #e0e8f5; }
.best { margin: 10px 0 0; padding-top: 9px; font: 12px/1.4 var(--pixel); letter-spacing: 0; }
.best b { font: 20px/1.3 var(--pixel); margin-left: 8px; }
.best small { margin-top: 4px; font: 9px/1.5 sans-serif; color: #adbed6; }
/* Keep the entire HUD compact; Japanese and numeric labels use one embedded face. */
.score-display small, #score, #stage, #level, #combo, .boss-line span,
#announcement, #super-label, #special b, #bomb b, .swipe-hint {
  font-family: var(--pixel);
  font-weight: 400;
}
#score { font-size: 23px; letter-spacing: 0; }
.score-display { gap: 8px; }
#stage { font-size: 12px; }
#level { font-size: 12px; }
#announcement { top: 21%; font-size: clamp(24px, 7vw, 36px); }
#announcement small { font: 12px/1.6 var(--pixel); }
#announcement.reward-notice img { width: 86%; max-height: 110px; }
#combo { font-size: 16px; right: 8px; }
.action-button { border-radius: 10px; }
#special b, #bomb b { font-size: 10px; }
#super-label { font-size: 10px; }
/* Generated navy-and-gold action artwork; live labels never touch the frame. */
.action-rail .action-button {
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  box-shadow: none;
  isolation: isolate;
  overflow: visible;
  -webkit-tap-highlight-color: transparent;
}
.action-art {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 2px 2px #000a);
  transition: filter .18s ease;
}
#special b, #bomb b {
  position: absolute;
  left: 5px;
  right: 5px;
  top: auto;
  bottom: 9px;
  margin: 0;
  height: 10px;
  font: 400 10px/10px var(--pixel);
  letter-spacing: 0;
  text-align: center;
  color: #fff3c8;
  text-shadow: 0 1px 0 #000, 1px 0 0 #2c170b;
  z-index: 2;
  pointer-events: none;
}
#bomb b { bottom: 9px; }
#super-label, .bomb-stock {
  position: absolute;
  top: 5px;
  right: 5px;
  min-width: 22px;
  height: 13px;
  padding: 1px 3px;
  border: 1px solid #a48b4e;
  border-radius: 3px;
  box-sizing: border-box;
  background: #071225;
  box-shadow: 0 1px 2px #0009;
  font: 700 9px/9px ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  color: #ffedb0;
  text-align: center;
  letter-spacing: -.3px;
  z-index: 3;
  pointer-events: none;
}
.bomb-stock { top: 4px; right: 4px; min-width: 18px; }
#bomb-count { font: inherit; color: inherit; }
.charge-gauge {
  position: absolute;
  inset: 0;
  width: 64px;
  height: 64px;
  z-index: 2;
  pointer-events: none;
}
.charge-gauge .charge-track { stroke: #313d51; stroke-width: 2; }
.charge-gauge #charge-arc {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  filter: drop-shadow(0 0 1px #7fffe5);
}
#special:disabled { opacity: 1; }
#special[data-state="charging"] .action-art { filter: saturate(.72) brightness(.82) drop-shadow(0 2px 2px #000a); }
#special.ready { box-shadow: none; }
#special.ready .action-art { animation: action-ready 1.5s ease-in-out infinite; }
#special.ready #super-label { color: #061820; background: #bfffe3; border-color: #eefff4; font-family: var(--pixel); font-weight: 400; letter-spacing: 0; }
#special[data-state="active"] .action-art { filter: brightness(1.15) drop-shadow(0 0 5px #78dbe4a0); }
#special[data-state="active"] #super-label { color: #c1ffed; }
#special[data-state="active"] b { color: #bffff0; }
#bomb:disabled { opacity: .62; }
#bomb:disabled .action-art { filter: grayscale(.85) brightness(.65); }
#bomb:disabled .bomb-stock { color: #c2c7cf; border-color: #596176; }
.action-rail .action-button:active:not(:disabled) { transform: translateY(2px) scale(.96); }
.action-rail .action-button:focus-visible { outline: 2px solid #c2ffed; outline-offset: 2px; }
@keyframes action-ready {
  0%, 100% { filter: brightness(1.05) drop-shadow(0 0 3px #84fce580); }
  50% { filter: brightness(1.22) drop-shadow(0 0 6px #84fce5b0); }
}
/* Result is a compact score card with a distinct, centered action button. */
#overlay { padding: max(20px, env(safe-area-inset-top)) 18px max(20px, env(safe-area-inset-bottom)); overflow-y: auto; }
.modal { max-width: 420px; padding: 25px 18px 20px; border-color: #e0bb65; box-shadow: inset 0 0 0 3px #282115, 0 0 0 1px #5e461d, 0 12px 40px #0008; }
.modal > small { display: block; font: 12px/1.6 var(--pixel); letter-spacing: 0; }
.modal h2 { font: 32px/1.4 var(--pixel); margin: 12px 0 18px; letter-spacing: .025em; color: #ffdfa0; text-shadow: 2px 2px #74501d, 3px 3px #1c1420; }
#result-stats { padding: 10px 0; border-block: 1px solid #b18b4255; }
#result-stats p { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 5px 0; font: 12px/1.4 var(--pixel); }
#result-stats p span { color: #b6c4dd; }
#result-stats p strong { font: 23px/1.35 var(--pixel); color: #ffe3a3; font-variant-numeric: tabular-nums; }
#result-stats p + p strong { font-size: 18px; }
.modal #modal-text { margin: 16px 0; font: 13px/1.85 var(--pixel); color: #e3eafa; white-space: pre-line; }
.modal .gold-button { font-size: 20px; margin: 14px 0; min-height: 64px; }
.modal .sound { display: inline-block; margin: 8px 5px 0; }
.modal .text-button { display: inline-block; margin: 8px 5px 0; min-height: 36px; }
dialog h2, .enemy-codex h3, dialog > small { font-family: var(--pixel); font-weight: 400; }
dialog h2 { font-size: 24px; }
.enemy-codex h3 { font-size: 14px; }
.desktop-note strong { font-family: var(--pixel); font-weight: 400; font-size: 23px; }
@media (max-width: 350px) {
  #home { padding-inline: 14px; }
  .hero { grid-template-columns: minmax(0, 1fr) 78px; gap: 6px; }
  .speech { width: 78px; font-size: 11px; }
  .title-lockup p { font-size: 11px; letter-spacing: .05em; }
  .gold-button { font-size: 21px; padding-inline: 16px; }
  .modal .gold-button { font-size: 17px; padding-inline: 13px; }
  .modal h2 { font-size: 27px; }
  .control-hint { font-size: 9px; }
  .modal { padding-inline: 14px; }
}
@media (max-height: 700px) {
  #home { padding-top: max(8px, env(safe-area-inset-top)); padding-bottom: max(10px, env(safe-area-inset-bottom)); gap: 0; }
  .title-lockup h1 img { width: 66%; max-height: 122px; }
  .title-lockup .game-subtitle img { max-height: 48px; }
  .title-lockup p { margin-top: 4px; }
  .hero { min-height: 0; flex-basis: auto; }
  .hero > img { max-height: 210px; }
  .speech { margin-top: 12px; }
  .home-options { margin-top: 10px; margin-bottom: 5px; }
  .home-bottom { padding-bottom: 0; }
  .best { margin-top: 6px; padding-top: 6px; }
  .modal { padding-top: 18px; padding-bottom: 14px; }
  .modal h2 { margin: 8px 0 12px; }
}
@media (max-height: 480px) {
  #overlay { align-items: start; }
  .modal { margin-block: 10px; }
  .action-rail { bottom: 24px; gap: 8px; }
  #announcement { top: 10%; }
}