/* Transparent touch targets stay larger than the illustrated wells they control. */
@media(min-width:0px){
 .settings-dialog>.dialog-close,.paytable-dialog>.dialog-close{width:44px;height:44px;min-width:44px;min-height:44px;font-size:28px;padding:0;z-index:30}
 .settings-dialog #dialog-content .settings-control{min-height:44px;gap:0 8px}
 /* Center the visible label/track group, independently of the full-row touch target. */
 .settings-dialog #dialog-content .settings-volume{--settings-volume-line:calc(clamp(14px,3.7cqw,23px) * 1.1);display:block}
 .settings-dialog #dialog-content .settings-volume>label{position:absolute;left:0;top:calc(50% - (var(--settings-volume-line) + 22px) / 2);right:48px;line-height:var(--settings-volume-line);pointer-events:none}
 .settings-dialog #dialog-content .settings-volume output{position:absolute;top:calc(50% - (var(--settings-volume-line) + 22px) / 2);right:0;line-height:var(--settings-volume-line);pointer-events:none}
 .settings-dialog #dialog-content .settings-volume input{position:absolute;inset:0;width:100%;height:100%;min-height:44px;padding:calc(var(--settings-volume-line) + 2px) 0 0;background:transparent;touch-action:pan-y}
 .settings-dialog #dialog-content .settings-switch input{width:48px;height:44px;min-width:48px;min-height:44px;border:0;background:transparent;box-shadow:none}
 .settings-dialog .settings-switch input::after{content:'';position:absolute;inset:9px 0;z-index:0;border:1px solid #467c98;border-radius:4px;background:#081f31;pointer-events:none}
 .settings-dialog .settings-switch input::before{top:13px;bottom:13px;left:4px;width:18px;z-index:1;pointer-events:none}
 .settings-dialog #dialog-content .settings-switch input:checked{background:transparent;border:0;box-shadow:none}
 .settings-dialog .settings-switch input:checked::after{border-color:#7bedff;background:#13445d;box-shadow:0 0 9px #3ccaff38}
 .settings-dialog .settings-switch input:checked::before{transform:translateX(22px)}
 .settings-dialog #dialog-content .settings-quality select{height:44px;min-height:44px;padding:6px;border:0;border-radius:0;background:linear-gradient(transparent 6px,#08283c 6px,#08283c calc(100% - 6px),transparent calc(100% - 6px));font-size:12px}
 .paytable-dialog .pt-book-nav{top:calc(90.7% - 22px);height:44px;left:12%;right:12%;grid-template-columns:24% minmax(0,1fr) 24%;gap:2%;align-items:center}
 .paytable-dialog #dialog-content .pt-book-nav>button{height:44px;min-height:44px;min-width:44px;padding:0 3%;font-size:10px;letter-spacing:0}
 .paytable-dialog .pt-page-picker{position:relative;height:44px;min-width:44px}
 .paytable-dialog #dialog-content .pt-page-picker label{position:absolute;top:1px;left:0;right:0;margin:0;font-size:7px;line-height:1.2;letter-spacing:.08em;pointer-events:none}
 .paytable-dialog #dialog-content .pt-page-picker select{height:44px;min-height:44px;padding:10px 9px 0 0;font-size:11px;line-height:1.2}
}

@media(max-aspect-ratio:1/1){
 dialog.settings-dialog{width:min(620px,calc(100vw - 10px),calc((100dvh - 14px)*1122/1402))}
 .settings-dialog>.dialog-close{right:8.3%}
 .settings-dialog #dialog-content .settings-control{left:14%;right:14%}
 .settings-dialog #dialog-content .settings-control>label{font-size:clamp(12px,3cqw,18px)}
 .settings-dialog #dialog-content .settings-volume output{font-size:clamp(14px,3.7cqw,23px)}
 .paytable-dialog>.dialog-close{right:9%}
}
@media(max-height:530px) and (orientation:landscape){
 .settings-dialog #dialog-content .settings-volume{--settings-volume-line:calc(clamp(13px,2.8cqw,17px) * 1.1)}
}
@media(min-aspect-ratio:1/1) and (max-width:1100px) and (max-height:600px){
 dialog.settings-dialog{width:min(820px,calc(100vw - 14px),calc((100dvh - 14px)*1.5));aspect-ratio:3/2}
 .settings-dialog .settings-hud-art{background:url('../../public/assets/ui-v15-guide/hud-landscape.png') center/contain no-repeat}
 .settings-dialog .settings-hud-art img{visibility:hidden}
 .settings-dialog .settings-heading{top:8%;height:6%;left:15%;right:22%;gap:0}
 .settings-dialog .settings-heading>span{display:none}
 .settings-dialog #dialog-content .settings-heading h1{font-size:20px}
 .settings-dialog>.dialog-close{right:9.2%;top:11%}
 .settings-dialog #dialog-content .settings-controls{left:12%;right:12%;top:23%;bottom:22%;display:grid;grid-auto-flow:column;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,minmax(44px,1fr));gap:8px 22px;align-items:center}
 .settings-dialog #dialog-content .settings-control{position:relative;inset:auto;width:100%;height:44px;margin:0;transform:none;grid-template-columns:minmax(0,1fr) auto}
 .settings-dialog #dialog-content .settings-control>label{font-size:12px;line-height:1.25}
 .settings-dialog #dialog-content .settings-volume{--settings-volume-line:16.5px}
 .settings-dialog #dialog-content .settings-volume>label{line-height:var(--settings-volume-line)}
 .settings-dialog #dialog-content .settings-volume output{font-size:15px}
 .settings-dialog .settings-switch{gap:4px}.settings-dialog .settings-switch>span{font-size:9px;min-width:20px}
 .settings-dialog #dialog-content .settings-quality select{width:106px;font-size:11px}
 .paytable-dialog .pt-book-nav{top:calc(88.8% - 22px)}
}

/* The same illustrated red close control stays inside every modal housing. */
#info-dialog:is(.settings-dialog,.paytable-dialog,.mission-log-dialog)>.dialog-close{
 --close-size:52px;left:auto;right:12%;top:10.8%;width:var(--close-size);height:var(--close-size);min-width:44px;min-height:44px;
 display:block;margin:0;padding:0;border:0;border-radius:0;transform:translateY(-50%);z-index:40;
 background:url('../../public/assets/ui-v25-mobile/close-button.png') center/100% 100% no-repeat;
 color:transparent;font-size:0;line-height:0;text-shadow:none;box-shadow:none;filter:drop-shadow(0 2px 3px #0009);
}
#info-dialog:is(.settings-dialog,.paytable-dialog,.mission-log-dialog)>.dialog-close:hover{background-color:transparent;filter:brightness(1.18) drop-shadow(0 0 6px #ff4f3a55)}
#info-dialog:is(.settings-dialog,.paytable-dialog,.mission-log-dialog)>.dialog-close:active{transform:translateY(-50%) scale(.95)}
#info-dialog:is(.settings-dialog,.paytable-dialog,.mission-log-dialog)>.dialog-close:focus-visible{outline:0;filter:brightness(1.2) drop-shadow(0 0 4px #c9f7ff) drop-shadow(0 0 8px #54d7ff99)}
.dev-panel .dev-close{width:48px;height:48px;min-width:48px;min-height:48px;flex:0 0 48px;padding:0;margin:0;border:0;background:url('../../public/assets/ui-v25-mobile/close-button.png') center/100% 100% no-repeat;color:transparent;font-size:0;line-height:0;box-shadow:none}
.dev-panel .dev-close:focus-visible{outline:0;filter:brightness(1.2) drop-shadow(0 0 4px #c9f7ff) drop-shadow(0 0 8px #54d7ff99)}
.paytable-dialog #dialog-content .pt-book-nav>button:focus-visible{outline:0;filter:brightness(1.2) drop-shadow(0 0 4px #b7f4ff)}
.paytable-dialog #dialog-content .pt-page-picker select:focus-visible{outline:0}
.paytable-dialog .pt-page-picker:focus-within{box-shadow:0 0 0 2px #b6f3ff,0 0 12px #39bcff66}
.settings-dialog .settings-heading{left:14%;right:31%}
.paytable-dialog .pt-book-heading{right:25%}
.mission-log-dialog .mobile-log-heading{right:31%}
#info-dialog.paytable-dialog>.dialog-close,#info-dialog.mission-log-dialog>.dialog-close{top:11.8%;right:10.5%}
@media(max-width:360px) and (max-aspect-ratio:1/1){
 #info-dialog.settings-dialog>.dialog-close{--close-size:44px}
}

/* Keep the illustrated navigation readable on tablets and larger displays too. */
.paytable-dialog .pt-book-nav{top:calc(88.8% - 28px);height:56px;grid-template-columns:26% minmax(0,1fr) 26%;gap:12px}
.paytable-dialog #dialog-content .pt-book-nav>button{height:56px;min-height:56px;padding:0 6% 3px;background-size:100% 100%;font-size:15px;font-weight:900;line-height:1;letter-spacing:.035em;color:#fff5e2;text-shadow:0 2px 1px #7a1d08,0 0 6px #ffb45c55}
.paytable-dialog .pt-page-picker{height:48px;border:1px solid #4d9dbd;border-radius:4px;background:linear-gradient(180deg,#10374e,#061c2b);box-shadow:inset 0 1px #b9ecff2b,0 2px 6px #0008}
.paytable-dialog #dialog-content .pt-page-picker label{top:6px;font-size:9px;line-height:1;letter-spacing:.12em;color:#8bbacf}
.paytable-dialog #dialog-content .pt-page-picker label>span{color:#d4f4ff}
.paytable-dialog #dialog-content .pt-page-picker select{appearance:none;-webkit-appearance:none;height:48px;padding:15px 24px 0 10px;color:#e4f8ff;font-size:14px;line-height:1.15;font-weight:750;text-align:center;text-align-last:center;letter-spacing:.025em}
.paytable-dialog .pt-page-picker::after{content:'⌄';position:absolute;right:10px;top:14px;font:22px/1 Arial,sans-serif;color:#8ce4ff;pointer-events:none}

/* A readable section picker sits above two substantial illustrated navigation keys. */
@media(max-aspect-ratio:1/1){
 #info-dialog.paytable-dialog>.dialog-close,#info-dialog.mission-log-dialog>.dialog-close{top:7.8%;right:13%}
 .paytable-dialog .pt-book-heading{left:14%;right:32%}
 .paytable-dialog .pt-pages{bottom:calc(9.3% + 88px)}
 .paytable-dialog .pt-page{grid-template-rows:25% minmax(0,1fr)}
 .paytable-dialog .pt-book-nav{top:calc(90.7% - 80px);left:12%;right:12%;height:108px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:44px 56px;gap:8px 12px}
 .paytable-dialog .pt-page-picker{grid-column:1/-1;grid-row:1;position:relative;width:100%;height:44px;border:1px solid #4d9dbd;border-radius:4px;background:linear-gradient(180deg,#10374e,#061c2b);box-shadow:inset 0 1px #b9ecff2b,0 2px 6px #0008}
 .paytable-dialog #dialog-content .pt-page-picker label{top:5px;font-size:9px;line-height:1;letter-spacing:.12em;color:#8bbacf}
 .paytable-dialog #dialog-content .pt-page-picker label>span{color:#d4f4ff}
 .paytable-dialog #dialog-content .pt-page-picker select{appearance:none;-webkit-appearance:none;height:44px;padding:15px 24px 0 10px;color:#e4f8ff;font-size:14px;line-height:1.15;font-weight:750;text-align:center;text-align-last:center;letter-spacing:.025em}
 .paytable-dialog .pt-page-picker::after{content:'⌄';position:absolute;right:10px;top:14px;font:22px/1 Arial,sans-serif;color:#8ce4ff;pointer-events:none}
 .paytable-dialog #dialog-content .pt-book-nav>button{grid-row:2;width:100%;height:56px;min-height:56px;padding:0 6% 3px;background-size:100% 100%;font-size:15px;font-weight:900;line-height:1;letter-spacing:.035em;color:#fff5e2;text-shadow:0 2px 1px #7a1d08,0 0 6px #ffb45c55}
 .paytable-dialog #dialog-content .pt-book-nav>button[data-guide-prev]{grid-column:1}
 .paytable-dialog #dialog-content .pt-book-nav>button[data-guide-next]{grid-column:2}
 .paytable-dialog #dialog-content .pt-book-nav>button:disabled{opacity:.65;filter:saturate(.4)}
}
@media(max-aspect-ratio:1/1) and (max-height:650px){
 .paytable-dialog .pt-page{grid-template-rows:17% minmax(0,1fr);gap:2.5%}
 .paytable-dialog .pt-landing-art figcaption{font-size:8px}
}
@media(min-aspect-ratio:1/1) and (max-width:1100px) and (max-height:600px){
 .settings-dialog .settings-heading{right:27%}
 .paytable-dialog .pt-book-heading{left:12%;right:24%}
 .mission-log-dialog .mobile-log-heading{left:15%;right:26%}
 .paytable-dialog .pt-book-nav{top:calc(88.8% - 28px);height:56px;left:12%;right:12%;grid-template-columns:26% minmax(0,1fr) 26%;gap:10px}
 .paytable-dialog #dialog-content .pt-book-nav>button{height:56px;min-height:56px;padding:0 5% 3px;background-size:100% 100%;font-size:14px;letter-spacing:.025em}
 .paytable-dialog .pt-page-picker{height:48px;border:1px solid #4d9dbd;border-radius:4px;background:linear-gradient(180deg,#10374e,#061c2b);box-shadow:inset 0 1px #b9ecff2b}
 .paytable-dialog #dialog-content .pt-page-picker label{top:6px;font-size:8px;letter-spacing:.08em}
 .paytable-dialog #dialog-content .pt-page-picker select{height:48px;padding:14px 5px 0;font-size:12px;text-align:center;text-align-last:center}
}

/* The guide title and docked close socket share the illustrated header center. */
dialog.paytable-dialog{--guide-header-y:11.71875%;--guide-title-left:8.7%;--guide-close-right:11%;--guide-close-width:clamp(44px,8%,78px)}
.paytable-dialog .pt-book{container-type:inline-size}
.paytable-dialog .pt-book-heading{left:var(--guide-title-left);right:calc(var(--guide-close-right) + var(--guide-close-width) / 2);top:var(--guide-header-y);height:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(2px,.65cqw,4px);margin:0;padding:0;transform:translateY(-50%);text-align:center}
.paytable-dialog .pt-book-heading>span{display:block;position:static;inset:auto;transform:none;font-size:clamp(5px,1.55cqw,9px);line-height:1;letter-spacing:.18em;text-box:trim-both cap alphabetic}
.paytable-dialog #dialog-content .pt-book-heading h1{margin:0;font-size:clamp(10px,2.8cqw,21px);line-height:1;font-weight:800;letter-spacing:.055em;text-box:trim-both cap alphabetic;white-space:nowrap}
#info-dialog.paytable-dialog>.dialog-close{left:auto;right:var(--guide-close-right);top:var(--guide-header-y);width:var(--guide-close-width);height:auto;aspect-ratio:148/156;min-width:44px;min-height:44px;transform:translate(50%,-50%);background:none;filter:none}
/* Reuse the menu's integrated steel housing and red key, not a floating X. */
#info-dialog.paytable-dialog>.dialog-close::before{content:'';position:absolute;inset:0;pointer-events:none;clip-path:polygon(16% 0,84% 0,100% 16%,100% 84%,84% 100%,16% 100%,0 84%,0 16%);background:url('../../public/assets/ui-v28-mobile/menu-panel.png') 87.3716632% 3.4510433% / 758.1081081% 898.7179487% no-repeat}
#info-dialog.paytable-dialog>.dialog-close:hover,#info-dialog.paytable-dialog>.dialog-close:focus-visible{background:none;filter:brightness(1.18) drop-shadow(0 0 4px #ff684666)}
#info-dialog.paytable-dialog>.dialog-close:active{transform:translate(50%,-50%);filter:brightness(.85)}
@media(max-aspect-ratio:1/1){
 dialog.paytable-dialog{--guide-header-y:8.333333%;--guide-title-left:12.3%;--guide-close-right:16%;--guide-close-width:clamp(44px,13%,78px)}
}
@media(max-width:600px) and (max-aspect-ratio:1/1){
 dialog.paytable-dialog{--guide-header-y:7.476077%;--guide-title-left:13.6%}
}