/* Studio drawer geometry from Apartment 13 / Valhalla, in Alien Farm navy. */
.game-loading .game-shell { visibility: hidden; }
#game-menu { --menu-top: calc(12px + env(safe-area-inset-top)); position: fixed; inset: 0; z-index: 100; color: #fff; }
#game-menu[hidden], #game-menu [hidden] { display: none !important; }
.menu-drawer { position: absolute; inset: 0; }
.menu-scrim { position: absolute; inset: 0; background: #010c185e; animation: menu-fade-in 260ms ease-out both; }
.menu-sheet { position: absolute; top: 0; right: 0; bottom: 0; width: 50.19%; overflow: hidden; background: linear-gradient(160deg, #0c293af5, #03101cf7); border-radius: clamp(14px, 2.4vmin, 26px) 0 0 clamp(14px, 2.4vmin, 26px); box-shadow: -18px 0 40px #0009, inset 1px 0 #9bffc31c; transform-origin: 100% 50%; animation: menu-sheet-in 380ms cubic-bezier(.22, 1.02, .36, 1) both; }
.menu-rows { position: absolute; inset: calc(var(--menu-top) + 44px) 2.6% calc(18px + env(safe-area-inset-bottom)) 9.6%; display: flex; flex-direction: column; justify-content: center; gap: 1.1vh; overflow-y: auto; overscroll-behavior: contain; }
.menu-row { position: relative; display: flex; align-items: center; gap: 4.3%; flex: 0 0 auto; min-height: 48px; height: 11.8dvh; width: 100%; padding: 0; border: 0; background: none; color: white; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; animation: menu-row-in 300ms cubic-bezier(.2, 0, 0, 1) both; }
.menu-row:nth-child(1) { animation-delay: 90ms; }
.menu-row:nth-child(2) { animation-delay: 115ms; }
.menu-row:nth-child(3) { animation-delay: 140ms; }
.menu-row:nth-child(4) { animation-delay: 165ms; }
.menu-row:nth-child(5) { animation-delay: 190ms; }
[data-menu-icon] { display: flex; flex: 0 0 8.4%; max-width: 44px; aspect-ratio: 1; }
[data-menu-icon] svg { width: 100%; height: 100%; fill: currentColor; }
.menu-label { font-size: clamp(16px, 3.6vmin, 24px); font-weight: 650; letter-spacing: .01em; }
.menu-row input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.menu-switch { position: absolute; right: 0; width: 12.8%; min-width: 40px; aspect-ratio: 247 / 118; border-radius: 999px; background: #ffffff38; transition: background-color 260ms cubic-bezier(.2, 0, 0, 1); }
.menu-switch i { position: absolute; top: 5.95%; left: 2.85%; height: 88.1%; aspect-ratio: 1; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px #0006; transition: transform 260ms cubic-bezier(.2, 0, 0, 1); }
.menu-row input:checked + .menu-switch { background: #38e747; }
.menu-row input:checked + .menu-switch i { transform: translateX(123.8%); }
.menu-row:active { opacity: .75; }
.menu-close, .menu-back { position: absolute; top: var(--menu-top); right: max(12px, env(safe-area-inset-right)); z-index: 3; width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; }
.menu-close::before, .menu-close::after { content: ''; position: absolute; left: 13px; top: 21px; width: 18px; height: 2px; background: #fff; border-radius: 2px; }
.menu-close::before { transform: rotate(45deg); }
.menu-close::after { transform: rotate(-45deg); }
.menu-back { left: max(12px, env(safe-area-inset-left)); right: auto; }
.menu-back::before { content: ''; position: absolute; left: 17px; top: 15px; width: 13px; height: 13px; border-left: 2px solid white; border-bottom: 2px solid white; transform: rotate(45deg); }
.menu-guide { position: absolute; inset: 0; display: flex; flex-direction: column; background: linear-gradient(160deg, #0c293a, #03101c 72%); animation: menu-fade-in 220ms ease-out; }
.menu-head { position: relative; flex: 0 0 calc(var(--menu-top) + 54px); }
#menu-title { position: absolute; top: var(--menu-top); left: 58px; right: 58px; height: 44px; margin: 0; display: grid; place-items: center; font-size: clamp(15px, 2.4vw, 20px); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.menu-content { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 12px max(22px, env(safe-area-inset-left)) calc(28px + env(safe-area-inset-bottom)); }
.menu-reading { max-width: 880px; margin: 0 auto; color: #c4dbe3; font-size: 17px; line-height: 1.65; }
.menu-reading h2 { font-size: clamp(27px, 3.2vw, 40px); line-height: 1.15; margin: 8px 0 24px; color: white; }
.menu-reading h3 { color: white; margin: 0 0 8px; font-size: 21px; }
.menu-reading p { margin: 0 0 14px; }
.menu-reading section { padding: 22px 0; border-bottom: 1px solid #b7dfda24; }
.menu-reading strong { color: #a3ff70; }
.menu-kicker { color: #a3ff70; font-size: 12px; letter-spacing: .18em; font-weight: 750; }
.menu-table-scroll { overflow-x: auto; }
.menu-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; margin: 20px 0; }
.menu-table th, .menu-table td { padding: 12px; border-bottom: 1px solid #b7dfda24; text-align: right; white-space: nowrap; }
.menu-table th:first-child { text-align: left; }
.menu-table thead { color: #ffd45c; background: #ffffff06; }
.menu-symbol { display: flex; align-items: center; gap: 12px; font-weight: 500; color: white; }
.menu-symbol img { width: 44px; height: 44px; object-fit: contain; }
.menu-table thead small { display: block; margin-top: 4px; font-size: 10px; letter-spacing: .04em; color: #a3ff70; }
.menu-reading .menu-win-rule { border-left: 3px solid #a3ff70; padding: 2px 0 2px 16px; }
.menu-reading .menu-way-explainer { border: 1px solid #a3ff7045; border-radius: 13px; padding: 13px 16px; background: linear-gradient(135deg, #10342f, #071c28); box-shadow: inset 0 0 18px #73ff350b; }
.menu-way-heading { display: flex; align-items: center; gap: 12px; }
.menu-way-heading > img { flex: 0 0 44px; width: 44px; height: 44px; object-fit: contain; }
.menu-way-heading .menu-kicker { margin-bottom: 3px; }
.menu-way-heading h3 { margin: 0; }
.menu-way-equations { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 11px 0 9px; }
.menu-way-equation { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 7px 10px; border-radius: 9px; background: #03151fcc; color: #dff8ff; }
.menu-way-equation span { font-size: 20px; font-weight: 900; }
.menu-way-equation b { color: #7efb50; font-size: 19px; }
.menu-way-equation strong { margin-left: 4px; padding: 7px 10px; border-radius: 7px; background: #ffd45c; color: #10202a; text-align: center; font-size: 16px; white-space: nowrap; }
.menu-way-equation.is-rich strong { background: #70ff49; box-shadow: 0 0 11px #58ff4748; }
.menu-way-explainer > p:last-child { margin: 0; font-size: 15px; }
.menu-per-way { display: inline-flex; margin: 12px 0 0; padding: 6px 11px; border: 1px solid #ffd45c55; border-radius: 99px; background: #ffd45c12; }
.menu-reading .menu-per-way strong { color: #ffd45c; font-size: 12px; letter-spacing: .08em; }
.menu-feature-art { display: flex; justify-content: center; gap: 24px; padding: 20px; }
.menu-feature-art img { width: clamp(52px, 10vw, 100px); height: 110px; object-fit: contain; filter: drop-shadow(0 0 12px #60ff3822); }
.menu-pay-bet { display: inline-flex; align-items: center; gap: 16px; padding: 8px 20px; border: 1px solid #a3ff7040; border-radius: 99px; background: #ffffff06; }
.menu-pay-bet strong { font-size: 25px; font-variant-numeric: tabular-nums; }
.menu-specials { display: grid; gap: 24px; margin: 24px 0; }
.menu-specials article { display: flex; align-items: center; gap: 24px; }
.menu-specials article > img, .menu-letter-icons { flex: 0 0 150px; width: 150px; height: 110px; object-fit: contain; }
.menu-letter-icons { display: flex; align-items: center; gap: 4px; }
.menu-letter-icons img { width: calc((100% - 8px) / 3); height: 90px; object-fit: contain; }
@media (max-width: 600px) { .menu-specials article { flex-direction: column; align-items: flex-start; gap: 12px; } .menu-specials article > img, .menu-letter-icons { flex-basis: auto; } }
#game-menu button:focus-visible, .menu-row:has(input:focus-visible), .menu-content:focus-visible { outline: 2px solid #a3ff70; outline-offset: -2px; border-radius: 5px; }
@keyframes menu-sheet-in { from { transform: translateX(9%) scaleX(.955); opacity: .35; } 62% { transform: translateX(-1.4%) scaleX(1.014); opacity: 1; } to { transform: none; opacity: 1; } }
@keyframes menu-row-in { from { transform: translateX(14px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes menu-fade-in { from { opacity: 0; } to { opacity: 1; } }
@media (hover: hover) { .menu-row:hover { color: #a3ff70; } }
@media (max-height: 460px) { .menu-rows { justify-content: flex-start; gap: 0; } .menu-row { height: 48px; } }
@media (max-width: 700px) { .menu-way-equations { grid-template-columns: 1fr; gap: 6px; } }
@media (max-width: 600px) and (orientation: portrait) { .menu-sheet { width: 88%; } .menu-rows { left: 8%; right: 7%; } .menu-row { height: 10dvh; } .menu-label { font-size: 18px; } .menu-table th, .menu-table td { padding: 8px; font-size: 14px; } .menu-symbol { gap: 6px; } .menu-symbol img { width: 32px; height: 32px; } .menu-way-equation { gap: 6px; min-height: 42px; padding: 6px; } .menu-way-equation span, .menu-way-equation b { font-size: 17px; } .menu-way-equation strong { font-size: 14px; padding-inline: 7px; } }
@media (prefers-reduced-motion: reduce) { #game-menu * { animation: none !important; transition: none !important; } }

/* Compact settings list, with room for independent audio and device controls. */
.menu-rows { inset: calc(var(--menu-top) + 42px) 7% calc(14px + env(safe-area-inset-bottom)) 8%; justify-content: flex-start; gap: 3px; }
.menu-row { height: clamp(40px, 7.2dvh, 62px); min-height: 40px; padding-right: 62px; flex-shrink: 0; }
.menu-label { font-size: clamp(15px, 2.7vmin, 21px); line-height: 1.15; }
.menu-label small { display: block; font-size: 10px; margin-top: 4px; color: #93aab1; font-weight: 400; }
[data-menu-icon] { flex: 0 0 26px; max-width: 26px; }
.menu-switch { width: 42px; min-width: 42px; }
.menu-row:has(input:disabled), .menu-row:disabled { cursor: default; color: #8fa4ad; }
.menu-row:has(input:disabled) .menu-switch { opacity: .4; }
.menu-mobile-only { display: none; }
#fullscreen-toggle[data-active="true"] [data-menu-icon] { transform: rotate(180deg) scale(.8); }
@media (pointer: coarse) { .menu-mobile-only { display: flex; } }
@media (max-height: 480px) and (orientation: landscape) {
  #game-menu { --menu-top: calc(4px + env(safe-area-inset-top)); }
  .menu-rows { top: calc(var(--menu-top) + 38px); bottom: calc(5px + env(safe-area-inset-bottom)); gap: 0; }
  .menu-row { min-height: 36px; height: 36px; }
  .menu-label { font-size: 15px; }
  [data-menu-icon] { flex-basis: 23px; max-width: 23px; }
}