/* Direction C: interface chrome only. In-game HUD and rendering are unchanged. */
.game-overlay .topbar { display: none; }
.overlay {
  padding: 25px 22px;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at 50% 20%, #1a2c79, #101747 45%, #060a26);
  backdrop-filter: none;
  color: #f7f7ff;
}
.overlay .start-card {
  width: min(1180px, 100%);
  margin: auto;
  padding: 22px 32px 18px;
  max-width: none;
  /* Clip the decorative grid without creating a second scroll container:
     focusing Start must scroll the overlay, never the cabinet's contents. */
  overflow: clip;
}
.start-card::after {
  content: '';
  position: absolute;
  inset: auto -20% -90px;
  height: 240px;
  transform: perspective(220px) rotateX(48deg);
  transform-origin: center bottom;
  background: linear-gradient(#2559c133 1px, transparent 1px), linear-gradient(90deg, #2559c133 1px, transparent 1px);
  background-size: 38px 24px;
  z-index: -1;
  pointer-events: none;
}
.menu-masthead { display: flex; align-items: center; gap: 24px; border-bottom: 1px solid #4c5b90; padding-bottom: 16px; }
.menu-masthead .arcade-logo { width: 326px; }
.menu-session { margin: 0 0 0 auto; color: #d8e4ff; font: 7px/1.7 var(--arcade-pixel); }
.menu-session small { display: block; margin-top: 8px; color: #8ea4d6; font: 10px/1.4 'Courier New', monospace; letter-spacing: 2px; }
.menu-session i { display: inline-block; width: 7px; height: 7px; margin-right: 9px; background: #93e6e7; box-shadow: 0 0 10px #93e6e766; }
.menu-quick-options { padding: 12px; min-height: 38px; color: #f2d77b; background: #0b1547; border: 1px solid #6a78a2; font: 7px/1.7 var(--arcade-pixel); }
.menu-quick-options:hover { border-color: #f2d77b; }
.menu-screen-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 0 0; color: #9fb4e5; font: 7px/1.7 var(--arcade-pixel); }
.menu-screen-heading a { text-decoration: none; color: #d8e1fa; }
.menu-layout { display: grid; grid-template-columns: 265px minmax(0, 1fr); gap: clamp(40px, 6vw, 80px); max-width: 1000px; margin: 27px auto 20px; align-items: center; }
.menu-player-label { margin: 0 0 15px; color: #f2d77b; font: 18px/1.3 var(--arcade-pixel); }
.menu-player-label span { margin-left: 12px; color: #a7bce8; font-size: 7px; vertical-align: 3px; }
.menu-fighter-portrait { width: 226px; position: relative; margin: auto; border: 2px solid #d0b667; box-shadow: 0 0 0 3px #0b1338, 0 0 0 4px #4b60a0, 7px 7px #050a27; }
.menu-fighter-portrait .arcade-portrait { aspect-ratio: 270 / 340; }
.menu-fighter-portrait::after { content: ''; position: absolute; inset: 40% 0 0; background: linear-gradient(0deg, #06102fff, #0c19474d 70%, transparent); pointer-events: none; }
.menu-fighter-name { position: absolute; z-index: 1; bottom: 18px; left: 20px; color: #b8c8ee; font: 12px/1.9 var(--arcade-pixel); text-shadow: 3px 3px #050d2a; }
.menu-fighter-name b { color: #f2d77b; font-weight: 400; font-size: 20px; }
/* Approved selector A: one button, with its action visually separated. */
.menu-equipped { display: flex; flex-direction: column; width: 100%; min-width: 0; padding: 0; margin-top: 20px; border: 2px solid #e2c778; background: #111d48; text-align: left; box-shadow: inset 0 0 0 3px #070e2a, 0 0 0 3px #070e2a, 0 0 0 4px #6a6682, 6px 7px #03071b; }
.menu-equipped:hover { border-color: #fff0b7; }
.menu-equipped:focus-visible { outline: 3px solid #fff0b7; outline-offset: 7px; }
.menu-equipped-preview { display: flex; align-items: center; gap: 19px; padding: 19px 18px; width: 100%; min-width: 0; }
.menu-equipped img { width: 51px; height: 82px; object-fit: contain; flex-shrink: 0; transform: rotate(-5deg); filter: drop-shadow(4px 5px 0 #0007); }
.menu-equipped strong { display: block; margin: 0; color: #f1f2ff; font: 8px/1.8 var(--arcade-pixel); overflow-wrap: anywhere; }
.menu-equipped-action { display: flex; justify-content: center; align-items: center; gap: 10px; align-self: stretch; min-height: 39px; margin: 0 6px 6px; padding: 8px 5px; color: #101637; background: linear-gradient(#fff0b7, #d5bd74); border: 1px solid #fff0b8; font: 7px/1.5 var(--arcade-pixel); }

.menu-equipped:hover .menu-equipped-action { background: linear-gradient(#fff7d9, #e4cb85); }
.menu-main { min-width: 0; }
.menu-main .eyebrow { color: #89aaf0; font: 7px/1.8 var(--arcade-pixel); margin: 0 0 14px; letter-spacing: 0; }
.menu-main h1 { font: 400 clamp(26px, 2.6vw, 36px)/1.55 var(--arcade-pixel); color: #fff3c2; margin: 0; letter-spacing: -1px; text-shadow: 4px 4px #17285e, 6px 6px #02071d; }
.menu-main h1 em { color: #f2d482; margin: 0; }
.menu-main #overlay-copy { color: #a9bce8; font: 13px/1.7 'Courier New', monospace; margin: 15px 0 25px; }
.menu-choices { display: flex; flex-direction: column; gap: 7px; border: 2px solid #8c8458; padding: 9px; background: #070f35; box-shadow: 0 0 0 3px #111d4a, 0 0 0 4px #ddc677, 7px 7px #02071f; }
.menu-choices .menu-choice { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 11px 16px 11px 35px; border: 1px solid transparent; background: #101a4c; color: #d2dcf7; font: 8px/1.7 var(--arcade-pixel); text-align: left; text-decoration: none; letter-spacing: 0; box-shadow: none; }
.menu-choices .menu-choice.is-active, .menu-choices .menu-choice:hover { background: linear-gradient(#fff0b7, #d7c17c); color: #071238; border-color: #fff0b7; filter: none; }
.menu-choices .menu-choice.is-active::before, .menu-choices .menu-choice:hover::before { opacity: 1; }
.menu-choices .menu-choice:disabled { opacity: .55; cursor: wait; }
.menu-main .features { justify-content: space-between; gap: 12px; margin: 22px 0 0; }
.menu-main .features span { color: #a6bde8; font: 6px/1.8 var(--arcade-pixel); border: 0; padding: 0; letter-spacing: 0; }
.menu-main .features span:last-child { color: #7f97c9; }
.menu-main .graphics-status { color: #e6dba4; font: 12px/1.6 Arial, sans-serif; margin: 12px 0 0; }
.menu-main .graphics-status:empty { display: none; }
.menu-footer { display: flex; align-items: center; justify-content: space-between; gap: 15px; border-top: 1px solid #3b5086; padding-top: 14px; color: #91a6d2; font: 6px/1.8 var(--arcade-pixel); }
.menu-footer kbd { display: inline-flex; align-items: center; justify-content: center; width: 19px; height: 19px; margin: 0 5px; border: 1px solid #41578a; background: #0b173f; color: #b8c7e7; font: 11px/1 monospace; }
.menu-footer span:last-child { color: #7c94c6; font-size: 5px; }
.menu-dialog { width: min(860px, calc(100% - 38px)); max-height: calc(100svh - 42px); margin: auto; padding: 20px 26px; color: #eff3ff; background: linear-gradient(160deg, #15265e, #0b1649 50%); border: 2px solid #f2d77b; box-shadow: 0 0 0 3px #050b25, 0 0 0 4px #a89761, 10px 10px #010517; }
.menu-dialog::backdrop { background: #02061be8; backdrop-filter: blur(5px); }
.menu-dialog.options-dialog { width: min(480px, calc(100% - 38px)); }
.dialog-heading { display: flex; justify-content: space-between; align-items: center; gap: 15px; border-bottom: 1px solid #59618a; padding-bottom: 15px; }
.dialog-heading h2 { font: 11px/1.9 var(--arcade-pixel); color: #f2d77b; margin: 0; }
.dialog-heading button { flex: none; width: 34px; height: 34px; color: #f2d77b; border: 1px solid #838363; background: #0b1547; font-size: 24px; }
.dialog-footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 15px; margin-top: 22px; border-top: 1px solid #455789; padding-top: 18px; }
.dialog-footer a { font: 7px/1.8 var(--arcade-pixel); color: #d9c47f; text-decoration: none; }
.options-dialog .dialog-footer { justify-content: stretch; }
.options-dialog .dialog-footer button { width: 100%; }
.menu-dialog .settings { border: 0; max-width: none; display: block; padding: 5px 0 0; }
.menu-dialog .audio-controls { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
.menu-dialog .audio-controls label, .menu-dialog .sensitivity { display: flex; justify-content: space-between; gap: 12px; margin: 24px 0; color: #c4d4f6; font: 8px/1.7 var(--arcade-pixel); }
.menu-dialog .audio-controls label:has(input[type=checkbox]) { flex-direction: row-reverse; }
.menu-dialog .settings input[type=checkbox] { width: 21px; height: 21px; accent-color: #f2d77b; }
.menu-dialog .settings input[type=range] { width: min(160px, 40%); accent-color: #f2d77b; }
.menu-dialog .settings output { color: #f2d77b; font-size: 8px; min-width: 35px; }
.menu-dialog .library { max-width: none; margin-top: 15px; background: #0b1547; border: 1px solid #526caa; }
.menu-dialog .library > summary { padding: 14px; }
.menu-dialog .library > summary small { font: 6px/1.7 var(--arcade-pixel); color: #85ccdf; letter-spacing: 0; }
.menu-dialog .library > summary strong { font: 10px/1.8 var(--arcade-pixel); color: #edf3ff; }
.menu-dialog .library-open { color: #f2d77b; font: 7px/1.7 var(--arcade-pixel); }
.menu-dialog .library-content { border-color: #455789; }
.menu-dialog .library-copy, .menu-dialog .library-status { color: #a9bce8; font-size: 12px; line-height: 1.7; }
.menu-dialog .library-grid { gap: 12px; }
.menu-dialog .library-book { background: #101c4e; border: 1px solid #4c619b; padding: 12px 9px; box-shadow: 3px 3px #030821; }
.menu-dialog .library-book.selected { border-color: #f2d77b; background: #213983; }
.menu-dialog .library-book img { height: 130px; }
.menu-dialog .library-book.locked img { opacity: .82; }
.menu-dialog .library-book h3 { font: 7px/1.9 var(--arcade-pixel); color: #e4ecff; margin-top: 10px; }
.menu-dialog .library-badge { color: #d3c789; font: 6px/1.7 var(--arcade-pixel); min-height: 28px; letter-spacing: 0; }
.menu-dialog .library-book button { background: #ead48d; color: #0a123d; border: 1px solid #ffefae; padding: 10px 3px; font: 7px/1.7 var(--arcade-pixel); }
.menu-dialog .library-book button:disabled { background: #0a143c; color: #9faed5; border-color: #576899; }
.menu-dialog .library-book.selected button { color: #f2d77b; border-color: #b5a669; }
.menu-dialog .library-actions a, .menu-dialog .library-actions button { color: #ead48d; border-color: #786f4b; font-size: 11px; line-height: 1.6; }
.menu-dialog .guide { color: #adbee3; max-width: none; font-size: 12px; line-height: 1.7; }
.menu-dialog .guide summary { color: #ead48d; font: 7px/1.8 var(--arcade-pixel); }
.menu-dialog .guide-grid { gap: 4px 25px; }
.menu-dialog .guide-grid strong { color: #e2eaff; }
.menu-dialog .disclaimer { color: #8ea5d6; font-size: 11px; }
.menu-dialog .controls-legend { max-width: none; color: #8fa5d6; gap: 15px 20px; font-size: 11px; }
.menu-dialog .controls-legend b { color: #e6d696; font-size: 10px; }
.menu-dialog .touch-hint { color: #a9bce8; }
.menu-dialog :is(button,a,input,summary):focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
@media (max-width: 900px) {
  .overlay .start-card { padding: 18px 24px; }
  .menu-layout { grid-template-columns: 220px minmax(0, 1fr); gap: 35px; }
  .menu-fighter-portrait { width: 190px; }
  .menu-session { display: none; }
  .menu-quick-options { margin-left: auto; }
  .menu-main h1 { font-size: 27px; }
  .menu-screen-heading span:nth-child(2) { display: none; }
}
@media (max-width: 600px) {
  .overlay { padding: 13px 12px; align-items: flex-start; }
  .overlay .start-card { padding: 14px; margin: 0 auto; }
  .menu-masthead { gap: 12px; padding-bottom: 12px; }
  .menu-masthead .arcade-logo { width: calc(100% - 44px); max-width: 290px; }
  .menu-quick-options { padding: 7px 9px; min-height: 32px; font-size: 15px; }
  .menu-quick-options span { display: none; }
  .menu-screen-heading { padding-top: 16px; font-size: 5px; }
  .menu-layout { display: flex; flex-direction: column; align-items: stretch; gap: 24px; margin: 18px auto; }
  .menu-fighter { display: grid; grid-template-columns: 75px minmax(0, 1fr); gap: 12px; align-items: center; }
  .menu-player-label { grid-column: 1 / -1; font-size: 12px; margin: 0; }
  .menu-player-label span { font-size: 5px; vertical-align: 2px; }
  .menu-fighter-portrait { width: 75px; margin: 0; box-shadow: 3px 3px #050a27; }
  .menu-fighter-name { left: 5px; bottom: 6px; font-size: 4px; }
  .menu-fighter-name b { font-size: 7px; }
  .menu-equipped { margin: 0; height: auto; padding: 0; }
  .menu-equipped-preview { padding: 12px; gap: 13px; }
  .menu-equipped img { width: 38px; height: 61px; }
  .menu-equipped strong { font-size: 7px; }
  .menu-equipped-action { min-height: 36px; font-size: 6px; gap: 8px; }
  .menu-main .eyebrow { font-size: 6px; }
  .menu-main h1 { font-size: clamp(21px, 6.5vw, 28px); line-height: 1.6; letter-spacing: -.5px; }
  .menu-main #overlay-copy { font-size: 12px; margin: 14px 0 22px; }
  .menu-choices { padding: 7px; gap: 7px; }
  .menu-choices .menu-choice { min-height: 45px; padding: 12px 8px 12px 27px; font-size: 7px; }
  .menu-main .features { margin-top: 18px; }
  .menu-main .features span { font-size: 5px; max-width: 48%; }
  .menu-main .features span:last-child { text-align: right; }
  .menu-footer { justify-content: center; padding-top: 12px; }
  .menu-footer span:first-child { display: none; }
  .menu-footer span:last-child { font-size: 5px; text-align: center; line-height: 1.9; }
  .menu-dialog { width: calc(100% - 28px); max-height: calc(100svh - 28px); padding: 15px; }
  .dialog-heading h2 { font-size: 9px; }
  .menu-dialog .library-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .menu-dialog .library-book img { height: 142px; }
  .menu-dialog .library > summary { display: block; }
  .menu-dialog .library > summary strong { font-size: 9px; }
  .menu-dialog .library-open { display: block; margin-top: 12px; }
  .menu-dialog .library-book h3 { font-size: 7px; }
  .menu-dialog .library-content { padding: 0 12px 14px; }
  .menu-dialog .library-badge { font-size: 5px; }
  .menu-dialog .guide-grid { grid-template-columns: 1fr; }
  .dialog-footer { gap: 18px; }
  .dialog-footer .arcade-button { width: 100%; font-size: 8px; }
}
@media (max-height: 730px) and (min-width: 901px) {
  .overlay { padding: 16px 20px; }
  .overlay .start-card { padding: 16px 28px; }
  .menu-masthead { padding-bottom: 12px; }
  .menu-masthead .arcade-logo { width: 280px; }
  .menu-screen-heading { padding-top: 14px; }
  .menu-layout { margin: 18px auto; grid-template-columns: 240px minmax(0, 1fr); gap: 65px; }
  .menu-fighter-portrait { width: 190px; }
  .menu-main h1 { font-size: 28px; }
  .menu-main #overlay-copy { margin: 10px 0 18px; }
  .menu-choices .menu-choice { min-height: 38px; padding-top: 8px; padding-bottom: 8px; }
  .menu-main .features { margin-top: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .menu-dialog *, .menu-dialog *::before, .menu-dialog *::after { animation: none !important; transition: none !important; }
}

/* Keep the title screen as sparse as the collection's home menu. */
.menu-masthead { justify-content: space-between; }
.menu-quick-options { margin-left: auto; width: 36px; height: 36px; padding: 7px; font-size: 15px; }
.menu-layout { margin: 34px auto 20px; }
.menu-main .intro-heading { margin-bottom: 28px; }
.menu-equipped strong { margin: 0; }
.menu-dialog .library { margin-top: 20px; border: 0; background: transparent; }
.menu-dialog .library > summary, .menu-dialog .library-badge { display: none; }
.menu-dialog .library-content { border: 0; padding: 0; }
.menu-dialog .library-status:empty { display: none; }
.menu-dialog .library-book h3 { margin: 13px 0 15px; }
.menu-dialog .guide { margin-top: 24px; }
@media (max-width: 600px) {
  .menu-layout { margin: 22px auto 8px; }
  .menu-main .intro-heading { margin-bottom: 25px; }
  .menu-dialog .library-content { padding: 0; }
}

/* Compact cabinet for a phone held sideways; details remain in their dialogs. */
@media(orientation:landscape){
 html[data-mobile-game=touch] .overlay{padding:max(8px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));align-items:center}
 html[data-mobile-game=touch] .overlay .start-card{width:min(760px,100%);padding:10px 18px;margin:auto;overflow:visible}
 html[data-mobile-game=touch] .menu-masthead{padding-bottom:7px;gap:15px}
 html[data-mobile-game=touch] .menu-masthead .arcade-logo{width:160px;max-width:36%}
 html[data-mobile-game=touch] .menu-quick-options{min-height:40px;width:40px;height:40px;font-size:13px}
 html[data-mobile-game=touch] .menu-player-actions{gap:7px}
 html[data-mobile-game=touch] .menu-player-actions .player-login{min-height:40px;padding:9px;font-size:7px}
 html[data-mobile-game=touch] .menu-layout{display:grid;grid-template-columns:145px minmax(0,1fr);gap:24px;margin:12px auto 0;align-items:center;max-width:620px}
 html[data-mobile-game=touch] .menu-fighter{display:block}
 html[data-mobile-game=touch] .menu-fighter-portrait{width:88px;margin:0 auto 12px;box-shadow:3px 3px #050a27}
 html[data-mobile-game=touch] .menu-equipped{margin:0;max-width:145px}
 html[data-mobile-game=touch] .menu-equipped-preview{padding:9px;gap:8px}
 html[data-mobile-game=touch] .menu-equipped img{width:32px;height:51px}
 html[data-mobile-game=touch] .menu-equipped strong{font-size:6px;line-height:1.7}
 html[data-mobile-game=touch] .menu-equipped-action{font-size:5px;min-height:37px;padding:8px 3px;margin:0 4px 4px;gap:5px}
 html[data-mobile-game=touch] .menu-main h1{font-size:22px;line-height:1.35;letter-spacing:0}
 html[data-mobile-game=touch] .menu-main .intro-heading{margin-bottom:10px}
 html[data-mobile-game=touch] .menu-main #overlay-copy{font-size:11px;line-height:1.4;margin:6px 0 8px}
 html[data-mobile-game=touch] .menu-choices{display:grid;grid-template-columns:1fr 1fr;padding:5px;gap:4px}
 html[data-mobile-game=touch] .menu-choices .menu-choice{min-height:40px;font-size:7px;padding:10px 8px 10px 24px}
 html[data-mobile-game=touch] .menu-choices #start{grid-column:1/-1;min-height:44px}
 html[data-mobile-game=touch] .ranked-mode{margin-top:8px}
 html[data-mobile-game=touch] .ranked-status,html[data-mobile-game=touch] .graphics-status{font-size:10px;line-height:1.4;margin-top:5px;min-height:0}
 html[data-mobile-game=touch] .ranked-status:empty,html[data-mobile-game=touch] .graphics-status:empty{display:none}
 html[data-mobile-game=touch] .menu-dialog{width:min(850px,calc(100% - 40px));max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));padding:15px;overflow:auto}
 html[data-mobile-game=touch] .menu-dialog .library-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
 html[data-mobile-game=touch] .menu-dialog .library-book img{height:105px}
 html[data-mobile-game=touch] .menu-dialog .library-book h3{font-size:6px;line-height:1.6;margin:9px 0}
 html[data-mobile-game=touch] .menu-dialog .library-book button{min-height:40px;font-size:7px}
 html[data-mobile-game=touch] .menu-dialog .library-actions a,html[data-mobile-game=touch] .menu-dialog .library-actions button{min-height:36px;padding:10px 0}
 html[data-mobile-game=touch] .controls-legend{display:none}
 html[data-mobile-game=touch] .touch-hint{display:block}
}
@media(orientation:landscape) and (max-height:370px){
 html[data-mobile-game=touch] .menu-fighter-portrait{display:none}
 html[data-mobile-game=touch] .overlay .start-card{padding:7px 14px}
 html[data-mobile-game=touch] .menu-masthead{padding-bottom:4px}
 html[data-mobile-game=touch] .menu-layout{margin-top:8px}
 html[data-mobile-game=touch] .menu-main h1{font-size:18px}
 html[data-mobile-game=touch] .menu-choices .menu-choice{min-height:36px;padding-top:8px;padding-bottom:8px}
 html[data-mobile-game=touch] .menu-choices #start{min-height:40px}
}

.release-badge{display:inline-block;font:10px/1.4 PlayerPixel,monospace;border:1px solid #e8cf86;color:#ffe9ad;background:#101b3b;padding:5px 8px;margin-bottom:8px}