/* New screens only. The original Just Bubbles styles remain unchanged. */
[hidden] { display: none !important; }
.start-screen { position: relative; height: 100vh; height: 100dvh; overflow-y: auto; display: grid; place-items: center; padding: max(24px, env(safe-area-inset-top)) 24px max(22px, env(safe-area-inset-bottom)); }
.menu-settings { position: absolute; top: max(20px, env(safe-area-inset-top)); right: max(24px, env(safe-area-inset-right)); }
.menu-content { width: min(100%, 340px); display: flex; align-items: center; flex-direction: column; }
.game-logo { display: block; width: 340px; max-width: 100%; height: auto; margin: 0 0 8px; }
.menu-eyebrow { margin: 0 0 34px; font-size: 9px; letter-spacing: 2.7px; }
.mode-options { display: grid; width: 100%; gap: 12px; }
.mode-button { position: relative; text-align: left; padding: 17px 45px 17px 23px; border: 1px solid #aacddc28; border-radius: 20px; color: #dcecf2; background: linear-gradient(125deg, #bbeff014, #bfbcff05); min-height: 78px; cursor: pointer; touch-action: manipulation; transition: border-color .2s, background .2s; }
.mode-button > span:first-child { font-weight: 500; font-size: 19px; letter-spacing: -.4px; }
.mode-button small { display: block; margin-top: 5px; color: #89a8b8; font-size: 11px; line-height: 1.5; }
.mode-arrow { position: absolute; right: 21px; top: 29px; color: #8cbcbf; font-size: 18px; }
.mode-button:hover { background: #b8e7e61a; border-color: #b6e7e45c; }
.mode-button:focus-visible { outline: 2px solid #baf8e9; outline-offset: 4px; }
.studio-credit { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 29px; }
.studio-credit > span { color: #6f8b9d; font-size: 9px; letter-spacing: .6px; }
.studio-credit img { width: 144px; max-width: 42vw; height: auto; opacity: .8; }
@media (max-height: 700px) { .game-logo { width: 280px; margin-bottom: 0; } .menu-eyebrow { margin-bottom: 20px; } .mode-options { gap: 9px; } .mode-button { min-height: 68px; padding: 13px 42px 13px 20px; } .mode-arrow { top: 23px; } .studio-credit { margin-top: 20px; } }
@media (max-height: 510px) and (orientation: landscape) { .start-screen { padding-top: 15px; padding-bottom: 15px; } .menu-content { width: min(82%, 700px); display: grid; grid-template-columns: 1fr 1.2fr; column-gap: 35px; } .game-logo { grid-column: 1; width: 290px; } .menu-eyebrow { grid-column: 1; text-align: center; align-self: start; margin: 0; } .mode-options { grid-column: 2; grid-row: 1 / 4; } .studio-credit { grid-column: 1; margin-top: 25px; } .mode-button { min-height: 63px; } }

.mode-arrow svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }

.mode-settings { padding: 0 0 22px; }
.mode-settings h3 { font-size: 14px; font-weight: 500; margin: 0 0 10px; }
.mode-settings-options { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 6px; }
.mode-settings-options button { border: 1px solid #a7d8d330; border-radius: 11px; background: #9fded410; color: #b7e8e1; cursor: pointer; font-size: 11px; min-height: 44px; padding: 6px; touch-action: manipulation; }
.mode-settings-options button[aria-pressed="true"] { background: #a7e7dd; color: #123741; }
.mode-settings-options button:focus-visible { outline: 2px solid #baf8e9; outline-offset: 2px; }

.studio-credit a { display: block; line-height: 0; border-radius: 9px; touch-action: manipulation; }
.studio-credit a:focus-visible { outline: 2px solid #baf8e9; outline-offset: 5px; }