/* UI-V2-08A. Opt-in surfaces only; no HUD, shop, garden or casino selectors. */
.wb-menu-screen, .wb-menu-dialog {
    position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center;
    padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    background: rgb(16 23 19 / 94%); color: var(--wb-text); font: 400 16px/1.5 var(--wb-font-text);
    overscroll-behavior: contain;
}
.wb-menu-screen.hidden, .wb-menu-dialog.hidden { display: none; }
.wb-menu-dialog { z-index: 70; }
#modal-tutorial { z-index: 80; }
#modal-age { z-index: 100; }
.wb-menu-screen *, .wb-menu-dialog * { box-sizing: border-box; }
.wb-menu-cabinet, .wb-menu-frame {
    width: 100%; max-width: 480px; min-width: 0; max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    border: 2px solid var(--wb-brass); background: var(--wb-surface); box-shadow: inset 0 0 0 4px var(--wb-panel), 0 6px 0 var(--wb-bg);
    position: relative;
}
.wb-menu-frame { display: flex; flex-direction: column; }
.wb-menu-cabinet { padding: 20px 28px; overflow-y: auto; overscroll-behavior: contain; text-align: center; }
.wb-menu-cabinet::before, .wb-menu-cabinet::after {
    content: ''; position: absolute; top: 9px; width: 6px; height: 6px; background: var(--wb-brass-shadow); border-top: 2px solid var(--wb-highlight);
}
.wb-menu-cabinet::before { left: 9px; }
.wb-menu-cabinet::after { right: 9px; }
.wb-menu-serial { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--wb-text-muted); font: 700 13px/1.4 var(--wb-font-label); letter-spacing: .06em; }
.wb-menu-stripes { display: inline-flex; gap: 4px; }
.wb-menu-stripes i { width: 16px; height: 4px; background: var(--wb-brand-primary); }
.wb-menu-stripes i:nth-child(2) { background: var(--wb-brass); }
.wb-menu-stripes i:nth-child(3) { background: var(--wb-rasta-red); }
.wb-menu-emblem { margin: 16px auto 12px; width: 192px; height: 156px; display: grid; place-items: center; position: relative; background: var(--wb-panel); border: 2px solid var(--wb-divider); box-shadow: inset 0 4px 0 var(--wb-bg); }
.wb-menu-emblem::before, .wb-menu-emblem::after { content: ''; position: absolute; width: 12px; height: 56px; top: 48px; border-block: 4px solid var(--wb-brass-shadow); background: repeating-linear-gradient(to bottom, var(--wb-divider) 0 4px, var(--wb-panel) 4px 8px); }
.wb-menu-emblem::before { left: 8px; }
.wb-menu-emblem::after { right: 8px; }
.wb-menu-emblem img { width: 128px; height: 128px; image-rendering: pixelated; object-fit: contain; }
.wb-menu-emblem-label { position: absolute; bottom: -8px; background: var(--wb-panel); padding: 0 8px; color: var(--wb-brass); font: 700 12px/1.4 var(--wb-font-label); letter-spacing: .08em; }
#game-main-menu h1 { margin: 20px 0 8px; color: var(--wb-text); font-size: 44px; font-weight: 400; line-height: 1.05; letter-spacing: .02em; text-shadow: 3px 3px 0 var(--wb-bg); }
.wb-menu-tagline { margin: 0 0 24px; color: var(--wb-text-muted); font-size: 14px; }
.wb-menu-actions { display: grid; gap: 12px; }
.wb-menu-screen button, .wb-menu-dialog button, .wb-menu-dialog summary {
    min-height: 48px; min-width: 48px; padding: 12px; border: 2px solid var(--wb-border); border-radius: 0;
    background: var(--wb-button-secondary); color: var(--wb-text); font: 700 16px/1.2 var(--wb-font-label); letter-spacing: .02em;
    box-shadow: inset 0 1px 0 var(--wb-divider), 0 3px 0 var(--wb-bg); cursor: pointer; touch-action: manipulation;
    position: relative; transition: background-color 80ms, transform 80ms;
}
.wb-menu-screen .wb-menu-primary, .wb-menu-dialog .wb-menu-primary { background: var(--wb-button-primary); border-color: var(--wb-brand-primary); }
#game-main-menu .wb-menu-primary { min-height: 60px; font: 400 22px/1.2 var(--wb-font-display); }
.wb-menu-screen button:active, .wb-menu-dialog button:active { transform: translateY(2px); box-shadow: inset 0 2px 0 var(--wb-bg); }
.wb-menu-screen :focus-visible, .wb-menu-dialog :focus-visible { outline: 3px solid var(--wb-focus); outline-offset: 2px; }
.wb-menu-screen button:disabled, .wb-menu-dialog button:disabled { background: var(--wb-disabled); color: var(--wb-text-muted); border-color: var(--wb-divider); cursor: default; transform: none; }
.wb-menu-screen .burning, .wb-menu-dialog .burning { animation: wb-menu-burn 430ms steps(4,end); pointer-events: none; }
@keyframes wb-menu-burn { 30% { box-shadow: inset 0 -4px 0 var(--wb-fire); } 60% { box-shadow: inset 0 -12px 0 var(--wb-brass-shadow); } 90% { box-shadow: inset 0 -48px 0 var(--wb-bg); } }
.wb-menu-spark { position: fixed; z-index: 110; width: 4px; height: 4px; background: var(--wb-fire); pointer-events: none; animation: wb-menu-spark 430ms steps(5,end) forwards; }
@keyframes wb-menu-spark { to { transform: translate(var(--tx),var(--ty)); opacity: 0; } }
.wb-menu-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px; border-bottom: 2px solid var(--wb-brass-shadow); background: var(--wb-panel); }
.wb-menu-head p { margin: 0 0 4px; color: var(--wb-brass); font: 700 13px/1.3 var(--wb-font-label); letter-spacing: .06em; }
.wb-menu-dialog h2 { margin: 0; font-size: 24px; font-weight: 400; line-height: 1.2; letter-spacing: .01em; }
.wb-menu-dialog .wb-menu-close { flex: none; padding: 8px; font-size: 26px; }
.wb-menu-content { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px; scroll-padding: 8px; }
.wb-menu-footer { flex: none; display: grid; gap: 8px; padding: 12px 16px 16px; border-top: 2px solid var(--wb-divider); background: var(--wb-panel); }
.wb-menu-footer button { width: 100%; }
.wb-menu-instructions { display: grid; gap: 20px; margin: 0; padding: 0; list-style: none; counter-reset: rules; }
.wb-menu-instructions li { display: grid; grid-template-columns: 32px minmax(0,1fr); gap: 12px; counter-increment: rules; }
.wb-menu-instructions li::before { content: '0' counter(rules); align-self: start; padding: 4px 0; text-align: center; border: 1px solid var(--wb-brass); background: var(--wb-panel); color: var(--wb-brass); font: 400 20px/1.2 var(--wb-font-numeric); }
.wb-menu-instructions h3 { margin: 0 0 4px; font: 700 18px/1.3 var(--wb-font-label); }
.wb-menu-instructions p { margin: 0; font-size: 14px; color: var(--wb-text-secondary); }
.wb-menu-dialog kbd { display: inline-block; border: 1px solid var(--wb-border); border-bottom-width: 3px; padding: 0 4px; background: var(--wb-surface-raised); color: var(--wb-text); font: 700 14px/1.4 var(--wb-font-label); }
.wb-menu-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; list-style: none; padding: 0; margin: 0 0 16px; }
.wb-menu-steps li { border-bottom: 4px solid var(--wb-divider); color: var(--wb-text-muted); padding-bottom: 8px; font: 700 14px/1.4 var(--wb-font-label); }
.wb-menu-steps [aria-current="step"] { color: var(--wb-text); border-color: var(--wb-brass); }
.wb-menu-steps [data-complete="true"] { border-color: var(--wb-brand-primary); }
#tutorial-panel { --step-accent: var(--wb-brass); }
#tutorial-panel[data-step="1"] { --step-accent: var(--wb-brand-primary); }
#tutorial-panel[data-step="2"] { --step-accent: var(--wb-cough); }
.wb-menu-illustration { display: flex; align-items: center; gap: 16px; padding: 16px; margin-bottom: 16px; border: 2px solid var(--wb-divider); background: var(--wb-panel); color: var(--step-accent); }
.wb-menu-illustration svg { width: 96px; height: 48px; flex: none; }
#tutorial-step-count { font: 400 32px/1.2 var(--wb-font-numeric); color: var(--wb-text); margin: 0; }
#tutorial-step-copy { margin: 0; min-height: 112px; }
#tutorial-actions { grid-template-columns: repeat(3,minmax(0,1fr)); }
#tutorial-actions button { padding-inline: 8px; }
.wb-menu-settings { display: grid; gap: 12px; }
.wb-menu-setting { display: grid; grid-template-columns: minmax(0,1fr) 88px; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--wb-divider); background: var(--wb-panel); }
.wb-menu-setting[hidden] { display: none; }
.wb-menu-setting h3, .wb-menu-save h3 { margin: 0 0 4px; font: 700 16px/1.3 var(--wb-font-label); }
.wb-menu-setting p, .wb-menu-save p { margin: 0; font-size: 14px; color: var(--wb-text-secondary); }
.wb-menu-dialog [role="switch"] { text-align: right; padding: 12px 8px 12px 36px; font: 700 15px/1.2 var(--wb-font-label); }
/* Recessed vertical guide and a bevelled slider. The body stays neutral:
   only the engaged slider/indicator carries the green state signal. */
.wb-menu-dialog [role="switch"]::before {
    content: ''; position: absolute; left: 8px; top: 6px; width: 20px; height: 36px;
    border: 2px solid var(--wb-border); background: var(--wb-bg);
    box-shadow: inset 2px 2px var(--wb-panel), 1px 1px var(--wb-divider);
}
.wb-menu-dialog [role="switch"]::after {
    content: ''; position: absolute; left: 11px; top: 9px; width: 14px; height: 12px;
    border: 1px solid var(--wb-border); background: var(--wb-text-secondary);
    box-shadow: inset 0 2px var(--wb-highlight), inset 0 -2px var(--wb-text-muted), 0 2px var(--wb-bg);
    transition: transform 140ms steps(3,end);
}
.wb-menu-dialog [role="switch"][aria-checked="true"] { border-color: var(--wb-brand-primary); }
.wb-menu-dialog [role="switch"][aria-checked="true"]::after {
    transform: translateY(18px); border-color: var(--wb-brand-primary); background: var(--wb-success);
    box-shadow: inset 0 2px var(--wb-highlight), inset 0 -2px var(--wb-button-primary), 0 2px var(--wb-bg), 18px 0 0 -5px var(--wb-success);
}
.wb-menu-dialog [role="switch"]:not(:disabled):active { transform: translateY(1px); }
.wb-menu-save { padding: 12px; border: 1px solid var(--wb-border); display: grid; gap: 12px; background: var(--wb-panel); }
.wb-menu-save details { min-width: 0; border-top: 1px solid var(--wb-divider); padding-top: 12px; }
.wb-menu-save summary { font-size: 15px; margin-bottom: 12px; }
.wb-menu-save details > :not(summary) { margin-top: 12px; }
.wb-menu-save button { width: 100%; }
.wb-menu-dialog textarea { display: block; width: 100%; min-width: 0; min-height: 112px; max-height: 260px; resize: vertical; padding: 12px; border: 2px solid var(--wb-border); background: var(--wb-bg); color: var(--wb-text); font: 400 14px/1.5 var(--wb-font-text); overflow: auto; user-select: text; -webkit-user-select: text; }
.wb-menu-dialog [role="status"] { color: var(--wb-warning); overflow-wrap: anywhere; }
#menu-save-status { color: var(--wb-success); }
.wb-menu-danger { border-color: var(--wb-error); }
.wb-menu-danger h3 { color: var(--wb-error); }
.wb-menu-dialog .wb-menu-destructive { background: var(--wb-button-destructive); border-color: var(--wb-error); }
#modal-age .wb-menu-frame { max-width: 400px; border-color: var(--wb-error); }
.wb-menu-age-mark { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.wb-menu-age-mark strong { color: var(--wb-error); font: 400 48px/1 var(--wb-font-display); border: 2px solid var(--wb-error); padding: 12px; }
.wb-menu-age-mark p { font-size: 14px; color: var(--wb-text-secondary); margin: 0; }
@media (hover:hover) and (pointer:fine) {
    .wb-menu-screen button:not(:disabled):hover, .wb-menu-dialog button:not(:disabled):hover, .wb-menu-dialog summary:hover { background: var(--wb-button-secondary-hover); border-color: var(--wb-brass); }
    .wb-menu-screen .wb-menu-primary:not(:disabled):hover, .wb-menu-dialog .wb-menu-primary:not(:disabled):hover { background: var(--wb-button-primary-hover); }
    .wb-menu-dialog .wb-menu-destructive:not(:disabled):hover { background: var(--wb-button-destructive-hover); }
}
@media (max-width: 360px) {
    .wb-menu-cabinet { padding: 16px; }
    .wb-menu-emblem { width: 160px; height: 132px; margin-block: 12px; }
    .wb-menu-emblem img { width: 112px; height: 112px; }
    #game-main-menu h1 { font-size: 32px; margin-top: 16px; }
    .wb-menu-tagline { margin-bottom: 16px; }
    .wb-menu-head, .wb-menu-content { padding: 12px; }
    .wb-menu-dialog h2 { font-size: 22px; }
    .wb-menu-footer { padding: 12px; }
    .wb-menu-setting { gap: 8px; padding: 8px; grid-template-columns: minmax(0,1fr) 88px; }
}
@media (min-width:640px) and (max-height:520px) {
    .wb-menu-cabinet { max-width: 760px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; padding: 16px 24px; }
    .wb-menu-serial { grid-column: 1 / -1; }
    .wb-menu-brand { grid-column: 1; }
    .wb-menu-emblem { height: 96px; margin: 8px auto; }
    .wb-menu-emblem img { width: 80px; height: 80px; }
    .wb-menu-emblem::before, .wb-menu-emblem::after { top: 20px; }
    #game-main-menu h1 { font-size: 32px; margin-top: 16px; }
    .wb-menu-tagline { margin-bottom: 0; }
    .wb-menu-actions { align-content: center; grid-column: 2; grid-row: 2; }
}
@media (prefers-reduced-motion: reduce) {
    .wb-menu-screen button, .wb-menu-dialog button { transition: none; }
    .wb-menu-screen .burning, .wb-menu-dialog .burning { animation: none; }
    .wb-menu-screen button:active, .wb-menu-dialog button:active { transform: none; }
    .wb-menu-spark { display: none; }
    .wb-menu-dialog [role="switch"]::after { transition: none; transform: none; }
    .wb-menu-dialog [role="switch"][aria-checked="true"]::after { top: 27px; transform: none; }
    .wb-menu-dialog [role="switch"]:not(:disabled):active { transform: none; }
}
@media (min-width:361px) and (max-width:480px) {
    #game-main-menu h1 { font-size: clamp(32px, 9vw, 40px); }
}
.wb-menu-symbol { display: none; }
#tutorial-panel[data-step="0"] .wb-menu-symbol--0,
#tutorial-panel[data-step="1"] .wb-menu-symbol--1,
#tutorial-panel[data-step="2"] .wb-menu-symbol--2 { display: inline; }
#age-copy { margin: 0; }
@media (max-width:360px) { #tutorial-step-copy { min-height: 144px; } }
@media (max-height:520px) {
    .wb-menu-age-mark { margin-bottom: 12px; }
    .wb-menu-age-mark strong { font-size: 32px; padding: 8px; }
}
.wb-menu-head > div { min-width: 0; overflow-wrap: anywhere; }
.wb-menu-danger { grid-template-columns: minmax(0,1fr) max-content; }
.wb-menu-danger button { padding-inline: 8px; }
@media (max-width:360px) {
    .wb-menu-head { display: grid; grid-template-columns: minmax(0,1fr) 48px; gap: 8px; align-items: start; }
    .wb-menu-head > div { display: contents; }
    .wb-menu-head p { grid-column: 1; grid-row: 1; align-self: center; }
    .wb-menu-head h2 { grid-column: 1 / -1; grid-row: 2; }
    .wb-menu-head .wb-menu-close { grid-column: 2; grid-row: 1; }
}
/* Keep semantic fills through pointer hover and press; disabled never impersonates hover. */
.wb-menu-screen button:not(:disabled):active,
.wb-menu-dialog button:not(:disabled):active { background: var(--wb-button-secondary-pressed); }
.wb-menu-screen .wb-menu-primary:not(:disabled):active,
.wb-menu-dialog .wb-menu-primary:not(:disabled):active { background: var(--wb-button-primary-pressed); }
.wb-menu-dialog .wb-menu-destructive:not(:disabled):active { background: var(--wb-button-destructive-pressed); }