/* Phone dialogs use the same blue core, bronze and gold palette as the cabinet. */
html[data-layout="portrait"] .modal-backdrop { background:#01060ddd; backdrop-filter:blur(3px); }
html[data-layout="portrait"] .modal {
  width:92%; max-width:none; max-height:88%; padding:8cqw 4.5cqw 5cqw;
  border:2px solid #d9a346; border-radius:4cqw; overflow:auto; overscroll-behavior:contain;
  background:radial-gradient(ellipse at 50% 0,#17475d 0,transparent 55%),linear-gradient(150deg,#061421,#020811 70%);
  box-shadow:0 1.5cqw 8cqw #000d,inset 0 0 0 1px #ffdf8499,inset 0 0 4cqw #2ad9ff22;
  scrollbar-width:thin; scrollbar-color:#b68338 #07121a;
}
html[data-layout="portrait"] .modal::before { inset:1.2cqw; border:1px solid #bd944855; border-radius:2.8cqw; }
html[data-layout="portrait"] .modal-close {
  display:grid; place-items:center; right:3cqw; top:3cqw; width:10cqw; height:10cqw; min-width:32px; min-height:32px;
  padding:0 0 .45cqw; line-height:1; font:400 8cqw/1 Arial,sans-serif;
  border:1px solid #ffe091; background:radial-gradient(circle at 36% 25%,#853b21,#2b0c05 80%);
  box-shadow:inset 0 0 0 2px #290b05,0 1cqw 2cqw #0008;
}
html[data-layout="portrait"] .modal-kicker { margin:0 10cqw 1.8cqw; font-size:2.4cqw; line-height:1.4; letter-spacing:.14em; }
html[data-layout="portrait"] .modal h2 { margin:0 4cqw 4.5cqw; font-size:5.9cqw; line-height:1.12; text-wrap:balance; }
html[data-layout="portrait"] .menu-dialog { height:86%; display:flex; flex-direction:column; }
html[data-layout="portrait"] .menu-tabs { flex:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.8cqw; margin:0 0 4cqw; }
html[data-layout="portrait"] .menu-tabs button { min-width:0; min-height:10.5cqw; padding:2cqw .7cqw; border-radius:2cqw; font-size:clamp(10px,2.8cqw,16px); letter-spacing:.025em; }
html[data-layout="portrait"] .menu-content { min-height:0; flex:1 1 auto; overflow-y:auto; overflow-x:hidden; padding:0 .5cqw 2cqw; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#ae8338 #081622; }
html[data-layout="portrait"] .paytable-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:2cqw; }
html[data-layout="portrait"] .pay-card { grid-template-columns:41% minmax(0,1fr); min-width:0; min-height:23cqw; padding:1.2cqw; border-color:#936d37; border-radius:2cqw; background:linear-gradient(145deg,#0c2535,#020910); }
html[data-layout="portrait"] .pay-card h3 { margin:0 0 1.8cqw; font-size:clamp(10px,3cqw,17px); line-height:1.15; overflow-wrap:anywhere; }
html[data-layout="portrait"] .pay-card p { margin:1cqw 0; color:#c5f2ff; font-size:clamp(9px,2.85cqw,16px); line-height:1.2; white-space:nowrap; }
html[data-layout="portrait"] .paytable-footnote { margin:3cqw 1cqw 0; color:#a0c1ce; font:400 3cqw/1.5 Arial,sans-serif; text-align:center; }
html[data-layout="portrait"] .feature-rules { grid-template-columns:1fr; gap:2.6cqw; }
html[data-layout="portrait"] .rule-card { padding:3.6cqw; border-radius:2.5cqw; background:linear-gradient(140deg,#0a2232,#020910); }
html[data-layout="portrait"] .rule-card img { width:22cqw; max-width:110px; float:left; margin:0 3cqw .5cqw 0; }
html[data-layout="portrait"] .rule-card h3 { margin:0 0 1.6cqw; color:#ffe1a2; font-size:4cqw; }
html[data-layout="portrait"] .rule-card p { margin:0; font:400 3.3cqw/1.55 Arial,sans-serif; }
html[data-layout="portrait"] .settings-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:3cqw; }
html[data-layout="portrait"] .setting-button { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3cqw; min-height:27cqw; padding:4cqw 2cqw; border-radius:3cqw; font:800 3.7cqw/1.15 Arial,sans-serif; background:linear-gradient(#17374a,#06111b); }
html[data-layout="portrait"] .setting-button strong { font-size:5cqw; }
html[data-layout="portrait"] .setting-button[aria-pressed="true"] { background:linear-gradient(#1c5353,#06221f); border-color:#ffcf5a; }
html[data-layout="portrait"] .auto-dialog { padding-top:11cqw; }
html[data-layout="portrait"] .auto-choices { grid-template-columns:repeat(2,minmax(0,1fr)); gap:3cqw; }
html[data-layout="portrait"] .auto-choices button { min-height:20cqw; padding:3cqw; border:1px solid #e4b655; border-radius:3cqw; font-size:8cqw; background:linear-gradient(#215067,#071522); }
html[data-layout="portrait"] .auto-dialog > p:last-child { margin:4cqw 2cqw 0; font-size:3.1cqw; line-height:1.5; }
html[data-layout="portrait"] .feature-award,html[data-layout="portrait"] .bonus-summary { width:92%; }
html[data-layout="portrait"] .feature-award > p:not(.modal-kicker),html[data-layout="portrait"] #summary-detail { font:400 3.8cqw/1.5 Arial,sans-serif; }
html[data-layout="portrait"] .primary-button { min-height:13cqw; padding:3cqw 5cqw; margin-top:2cqw; border-radius:3cqw; font:900 4cqw/1.15 Arial,sans-serif; }
html[data-layout="portrait"] .summary-orb { width:50cqw; height:50cqw; margin:5cqw auto; gap:2cqw; }
html[data-layout="portrait"] .summary-orb span { font-size:3cqw; }
html[data-layout="portrait"] .summary-orb strong { font-size:8cqw; }
/* Dev tools stay inside the phone, including on short screens. */
html[data-layout="portrait"] .dev-tools { position:absolute; z-index:140; left:1%; right:auto; top:auto; bottom:.6%; align-items:flex-start; }
html[data-layout="portrait"] .dev-toggle { width:11cqw; min-width:44px; min-height:44px; max-width:50px; padding:3px; }
html[data-layout="portrait"] .dev-panel { position:absolute; left:0; bottom:calc(100% + 2cqw); top:auto; width:86cqw; max-width:420px; max-height:76cqh; margin:0; padding:4cqw; border-radius:3cqw; background:#03101bf5; }
html[data-layout="portrait"] .dev-panel:not([hidden]) { transform-origin:bottom left; }
html[data-layout="portrait"] .dev-panel > span { font-size:3.1cqw; margin-bottom:3cqw; }
html[data-layout="portrait"] .dev-state { font-size:3cqw; margin-bottom:3cqw; gap:3cqw; }
html[data-layout="portrait"] .dev-actions { gap:2.2cqw; }
html[data-layout="portrait"] .dev-actions button { min-height:12cqw; padding:2.5cqw 1cqw; border-radius:1.8cqw; font-size:3cqw; }
html[data-layout="portrait"] .dev-preview-label { margin:4cqw 0 2.3cqw; padding-top:3cqw; font-size:3cqw; }
html[data-layout="portrait"] .dev-bonus-help { margin-top:2cqw; font-size:2.8cqw; line-height:1.4; }
html[data-layout="portrait"] .toast { left:5%; right:5%; top:14%; padding:3cqw 4cqw; border-radius:3cqw; text-align:center; font-size:3.1cqw; line-height:1.4; }
/* The initial loader also needs the portrait art before JavaScript has classified the screen. */
@media (max-aspect-ratio: 23/20) {
  .portrait-notice { display:none !important; }
  .loading-screen::before { opacity:.35; background-image:url('../assets/ui/mobile/portrait-cabinet-base-v1.webp'); background-size:contain; background-repeat:no-repeat; filter:blur(3px) brightness(.48); }
  .loading-screen { padding:8vw; background:radial-gradient(ellipse at 50% 45%,#123047,#010308 72%); }
  .loading-screen h1 { max-width:90vw; font-size:clamp(25px,8vw,52px); line-height:1.2; letter-spacing:.04em; text-wrap:balance; }
  .loading-screen h1 small { display:block; margin:1.5vw 0; font-size:.35em; }
  .loading-screen p { font-size:clamp(9px,2.8vw,14px); }
  .loading-crest { width:55px; height:55px; font-size:32px; }
  .loading-track { width:min(330px,76vw); }
}