/* The approved cover fills the first viewport. Entry behavior stays in client.js. */
.title-stage { display: none; }
.home-inner[data-step='title'] {
  position: relative;
  max-width: none;
  padding: 0 0 max(24px, env(safe-area-inset-bottom));
  gap: 14px;
  isolation: isolate;
}
.home-inner[data-step='title'] .title-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  order: 1;
  width: 100%;
  min-height: 100svh;
  padding: 0 max(20px, env(safe-area-inset-right)) max(96px, calc(env(safe-area-inset-bottom) + 80px)) max(20px, env(safe-area-inset-left));
}
#homeInner .logo {
  display: block;
  position: fixed;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  pointer-events: none;
  background: #5bb5d3;
}
#homeInner .logo-art { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.home-inner[data-step='title'] .logo::after {
  background: linear-gradient(180deg, #072b4520, transparent 40%, transparent 68%, #0525369c 100%);
}
.home-inner[data-step='title'] .brandmark { top: max(64px, calc(env(safe-area-inset-top) + 52px)); width: min(88vw, 420px); max-width: none; }
/* Match the fixed sound control, including its waiting/ready palette. */
#homeInner .language-bar {
  display: none;
  position: fixed;
  inset: calc(env(safe-area-inset-top) + 10px) auto auto max(10px, env(safe-area-inset-left));
  z-index: 15;
  padding: 0;
}
#homeInner[data-step='title'] .language-bar { display: flex; }
#homeInner .language-bar select {
  height: 40px;
  min-height: 40px;
  border: 2px solid #d1e0d8;
  border-radius: 999px;
  appearance: none;
  padding: 0 28px 0 12px;
  background-color: #fff8e7;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m3 4.5 3 3 3-3' fill='none' stroke='%236b5536' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px;
  color: #6b5536;
  box-shadow: 0 4px 0 #d8c9a3;
  font-weight: 800;
}
body:has(#soundPill.wait) #homeInner .language-bar select {
  background-color: #f7cd46;
  box-shadow: 0 4px 0 #d9a92e;
}
.home-inner[data-step='title'] .play-intro { display: none; }
.home-inner[data-step='title'] #stepTitleScreen { width: min(100%, 390px); position: relative; z-index: 1; }
.home-inner[data-step='title'] #btnPlay { min-height: 72px; border-radius: 999px; box-shadow: 0 5px 0 #bf8122, 0 10px 28px #062d4b66; border: 2px solid #fff0b2; }
.home-inner[data-step='title'] .title-invite { color: white; text-shadow: 0 2px 5px #062d4b; }
.environment-notice { margin: 0; padding: 6px 10px; border: 1px solid #ffe19a; border-radius: 12px; background: #fff3d9f2; color: #67420c; font-size: 11px; line-height: 1.4; text-align: center; overflow-wrap: anywhere; }
.environment-notice[hidden] { display: none; }
.environment-notice strong, .environment-notice span { display: block; }
.environment-notice strong { font-size: 12px; }
.home-inner[data-step='title'] > .release-link { position: absolute; top: calc(100svh - max(52px, calc(env(safe-area-inset-bottom) + 44px))); left: 50%; transform: translateX(-50%); z-index: 2; width: max-content; max-width: calc(100% - 32px); min-height: 44px; margin: 0; padding: 8px 14px; color: white; background: #092f4873; text-shadow: 0 1px 3px #092f48; border: 1px solid #ffffff55; }
.home-inner[data-step='title'] > #betaNotice,
.home-inner[data-step='title'] > .game-footer { width: min(620px, calc(100% - 32px)); align-self: center; color: white; background: #092f48d9; border-color: #ffffff66; border-radius: 16px; padding: 12px 16px; }
.home-inner[data-step='title'] .game-footer :is(a, button) { color: white; }
.home-inner[data-step='title'] #btnHowto,
.home-inner[data-step='title'] #btnBilling { display: none; }
.home-inner[data-step='title'] #homeMsg:empty { display: none; }
.home-inner[data-step='title'] #quotaNotice:not(.hidden) { position: absolute; top: 80px; left: 50%; transform: translateX(-50%); z-index: 4; width: min(440px, calc(100% - 32px)); }
@media (min-aspect-ratio: 1/1) {
  .environment-notice { position: fixed; top: max(62px, calc(env(safe-area-inset-top) + 58px)); right: max(12px, env(safe-area-inset-right)); width: min(45vw, 430px); z-index: 3; }
  html[dir='rtl'] .environment-notice { right: auto; left: max(12px, env(safe-area-inset-left)); }
  #homeInner .logo-art { object-position: center 53%; }
  .home-inner[data-step='title'] .brandmark { left: 24%; top: 10svh; width: min(42vw, 520px); }
  .home-inner[data-step='title'] .title-stage { align-items: flex-start; padding-left: max(5vw, env(safe-area-inset-left)); padding-bottom: max(96px, 18svh); }
  .home-inner[data-step='title'] #stepTitleScreen { width: min(38vw, 390px); }
}
@media (orientation: landscape) and (max-height: 560px) {
  .home-inner[data-step='title'] .brandmark { left: 25%; top: 48px; width: min(32vw, 280px); }
  .home-inner[data-step='title'] .title-stage { align-items: flex-start; padding-left: 6vw; padding-bottom: 62px; }
  .home-inner[data-step='title'] #stepTitleScreen { width: min(38vw, 350px); }
  .home-inner[data-step='title'] #btnPlay { min-height: 56px; font-size: 22px; }
  .home-inner[data-step='title'] > .release-link { top: calc(100svh - 44px); min-height: 40px; font-size: 10px; padding-block: 4px; }
}
@media (max-height: 340px) and (orientation: landscape) {
  .home-inner[data-step='title'] .brandmark { top: 28px; width: min(31vw, 180px); }
  .home-inner[data-step='title'] .title-stage { padding-bottom: 44px; }
  .home-inner[data-step='title'] #btnPlay { min-height: 52px; }
  .home-inner[data-step='title'] > .release-link { left: 76%; }
}
/* Center the title and Play on PC, including short desktop windows. */
@media (min-width: 960px) {
  .home-inner[data-step='title'] .brandmark { left: 50%; }
  .home-inner[data-step='title'] .title-stage { align-items: center; padding-left: max(20px, env(safe-area-inset-left)); }
  .home-inner[data-step='title'] > .release-link { left: 50%; }
}
#homeInner[data-step='title'] #homeVersion { background: #092f488c; color: white; text-shadow: 0 1px 3px #092f48; }
@media (orientation: portrait) and (max-height: 700px) {
  .home-inner[data-step='title'] .brandmark { top: 48px; width: min(82vw, 310px); }
  .home-inner[data-step='title'] .title-stage { padding-bottom: max(36px, env(safe-area-inset-bottom)); }
  .home-inner[data-step='title'] #btnPlay { min-height: 64px; }
  .home-inner[data-step='title'] > .release-link { position: relative; top: auto; left: auto; transform: none; }
}


/* Keep the cover through acknowledgement, then show a compact menu. */
#homeInner:not([data-step='title']) {
  position: relative;
  isolation: isolate;
  max-width: none;
  align-items: center;
  justify-content: center;
  padding: max(64px, calc(env(safe-area-inset-top) + 60px)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  gap: 12px;
}
#homeInner[data-step='terms'] .logo::after {
  background: linear-gradient(180deg, #06354d26, #06354d33 48%, #052536b3);
}
#homeInner:not([data-step='title']) .logo > .brandmark,
#homeInner:not(:is([data-step='title'], [data-step='terms'])) .logo,
#homeInner:not([data-step='title']) > :is(#betaNotice, .game-footer, .release-link) { display: none; }
.entry-card { display: none; }
#homeInner:not([data-step='title']) > .entry-card {
  display: flex;
  flex-direction: column;
  order: 4;
  width: min(100%, 480px);
  padding: 24px;
  gap: 16px;
  border: 2px solid #fff1ce;
  border-radius: 28px;
  background: #fffaf0f7;
  box-shadow: 0 6px 0 #124d6526, 0 12px 32px #062d4b14;
  color: var(--ink);
}
.entry-card .step-head { flex-direction: row; align-items: center; gap: 12px; }
.entry-card .step-head h1 { padding: 0; min-width: 0; background: transparent; font-size: 22px; line-height: 1.4; text-wrap: balance; }
.entry-card .step-head h1:empty { display: none; }
.entry-card .story-back { flex-shrink: 0; min-height: 44px; padding: 8px 12px; border-radius: 999px; background: #e4f0e9; box-shadow: 0 3px 0 #b9d7d1; }
.entry-card .home-step { gap: 12px; min-width: 0; }
.entry-card .btn { min-height: 56px; border-radius: 999px; }
.entry-card .btn.big { font-size: 22px; }
.entry-card .btn.yellow { border: 2px solid #fff0b2; box-shadow: 0 4px 0 #bf8122; }
.entry-card .btn.yellow:active { box-shadow: 0 1px 0 #bf8122; }
.entry-card .btn.white { border: 2px solid #c7dedb; }
.entry-card .btn.small { min-height: 44px; }
.entry-card .app-icon { border-radius: 50%; background: #dceee8; }
.entry-card .panel { padding: 0; border: 0; background: transparent; box-shadow: none; }
.entry-card input:not([type='checkbox']) { min-height: 52px; border: 2px solid #b7cfcc; border-radius: 16px; background: #fff; }
.entry-card .play-terms-details > summary { padding: 10px 14px; border-radius: 16px; background: #e4f0e9; text-decoration: none; }
.entry-card .play-terms-details[open] > summary { margin-bottom: 12px; }
.entry-card .play-terms-text { background: #fff; }
.entry-card .play-terms-check { padding: 4px 2px; }
.entry-card .tutorial-later { color: #19647a; }
.entry-card :is(#homeMsg, #soloSync):empty { display: none; }
#homeInner:not([data-step='title']) > #btnHowto { width: min(100%, 480px); min-height: 44px; padding: 8px 14px; border-radius: 999px; }
#homeInner:is([data-step='terms'], [data-step='gate'], [data-step='name'], [data-step='invite']) > #btnHowto { display: none; }
#homeInner:not([data-step='title']) > #quotaNotice { width: min(100%, 480px); }
/* Prefer fitting the available height, while keeping scrolling as a fallback. */
@media (max-height: 700px) {
  #homeInner:not([data-step='title']) { justify-content: flex-start; gap: 10px; }
  #homeInner:not([data-step='title']) > .entry-card { padding: 16px; gap: 10px; }
  .entry-card .step-head h1 { font-size: 20px; }
  .entry-card .btn.big { min-height: 52px; font-size: 20px; }
  .entry-card .home-step { gap: 8px; }
  .entry-card #inviteSlot { gap: 8px; }
  .entry-card #inviteSlot .step-ask { font-size: 16px; }
  .entry-card #stepMain > .step-ask { display: none; }
  .entry-card .who-choices .btn { padding: 12px 6px; font-size: 18px; }
  .entry-card .acc-card { padding: 8px; gap: 6px; box-shadow: none; }
  .entry-card .acc-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .entry-card .acc-in > :is(.acc-me, .acc-actions) { grid-column: 1 / -1; }
  .entry-card .acc-in :is(.acc-stage, div.acc-wearing, .acc-stats, .acc-progress) { display: none; }
  .entry-card .acc-info { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }
  .entry-card .acc-info > small.acc-wearing { flex-basis: 100%; }
  .entry-card .acc-name { font-size: 14px; }
  .entry-card .acc-points b { font-size: 22px; }
  .entry-card .acc-btn { min-height: 44px; padding: 8px; font-size: 13px; }
  #homeInner:is([data-step='main'], [data-step='invite']) .step-head { display: contents; }
  #homeInner:is([data-step='main'], [data-step='invite']) #homeBack { position: fixed; top: calc(env(safe-area-inset-top) + 10px); left: max(12px, env(safe-area-inset-left)); z-index: 15; }
  #homeInner:is([data-step='main'], [data-step='solo'], [data-step='multi']) > #btnHowto { position: fixed; top: calc(env(safe-area-inset-top) + 10px); left: 0; right: 0; margin-inline: auto; width: max-content; max-width: calc(100% - 160px); min-height: 40px; padding: 6px 8px; font-size: 11px; background: #fffaf0; }
  #homeInner:not([data-step='title']) > #btnHowto .app-icon { width: 24px; height: 24px; }
}
@media (orientation: landscape) and (max-height: 560px) {
  #homeInner:not([data-step='title']) { padding-top: max(60px, calc(env(safe-area-inset-top) + 56px)); padding-bottom: 12px; }
  #homeInner:not([data-step='title']) > .entry-card { width: min(100%, 820px); padding: 12px 16px; gap: 8px; }
  .entry-card .step-head h1 { font-size: 18px; }
  .entry-card .home-step { gap: 8px; }
  .entry-card .btn, .entry-card .btn.big { min-height: 48px; font-size: 18px; padding: 10px 12px; }
  #homeInner[data-step='gate'] #stepGate,
  #homeInner[data-step='multi'] #stepMulti { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 12px; }
  .entry-card #stepGate .btn { min-height: 84px; }
  .entry-card #stepGate .app-icon { display: none; }
  .entry-card #stepGate .app-button > span { align-items: center; text-align: center; }
  .entry-card #stepName #nameSlot { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px; }
  #homeInner[data-step='main'] #stepMain { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 16px; }
  .entry-card #stepMain > .home-me { grid-column: 1; grid-row: 1; }
  .entry-card #stepMain > .who-choices { grid-column: 1; grid-row: 2; }
  .entry-card #stepMain > :is(#btnLoginSmall, #accountBox) { grid-column: 2; grid-row: 1 / 3; align-self: center; }
  .entry-card #stepMain:has(> #btnLoginSmall:not(.hidden)) > .who-choices { grid-column: 1 / -1; }
  .entry-card #stepMain:has(> #btnLoginSmall:not(.hidden)) > #btnLoginSmall { grid-row: 1; }
  .entry-card #stepMain > .step-ask { display: none; }
  .entry-card #stepMulti .or { margin: 4px 0; }
  #homeInner:is([data-step='main'], [data-step='solo'], [data-step='multi']) > #btnHowto { position: fixed; top: calc(env(safe-area-inset-top) + 10px); left: 0; right: 0; margin-inline: auto; width: max-content; max-width: calc(100% - 240px); min-height: 40px; font-size: 12px; background: #fffaf0; }
  #homeInner:not([data-step='title']) > #btnHowto .app-icon { width: 28px; height: 28px; }
  #homeInner[data-step='solo'] #stepSolo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
  .entry-card #soloChoices { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
  .entry-card #stepSolo:has(#btnSoloResume:not(.hidden)) #soloChoices { grid-column: 2; grid-row: 1 / 4; grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .entry-card #stepSolo:has(#btnSoloResume:not(.hidden)) #btnSoloSync { grid-column: 1; grid-row: 2; }
  #homeInner[data-step='invite'] #stepInvite { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
  .entry-card #inviteSlot { grid-row: 1 / 3; }
  .entry-card #stepInvite > .tutorial-later { margin: 0; font-size: 12px; padding: 8px; }
  .entry-card #inviteSlot .step-ask { font-size: 15px; }
  .entry-card #inviteSlot .field { gap: 4px; }
  .entry-card #inviteSlot input { min-height: 44px; }
}
@media (orientation: landscape) and (max-height: 340px) {
  #homeInner:not([data-step='title']) { padding-top: max(56px, calc(env(safe-area-inset-top) + 52px)); padding-inline: 12px; padding-bottom: 4px; }
  #homeInner:not([data-step='title']) > .entry-card { padding: 6px 12px; border-radius: 22px; }
  .entry-card .btn, .entry-card .btn.big { min-height: 44px; font-size: 16px; padding: 8px; }
  .entry-card .play-terms-check { font-size: 14px; }
  .entry-card .home-me { padding: 0 0 0 8px; font-size: 12px; }
  .entry-card .home-me b { font-size: 14px; }
  .entry-card .who-choices .btn { padding: 8px 4px; }
  .entry-card #btnLoginSmall { font-size: 13px; }
  .entry-card #stepInvite { gap: 4px 12px; }
  .entry-card #inviteSlot .field > span { display: none; }
  .entry-card #inviteSlot { gap: 6px; }
  .entry-card #stepMulti .or { font-size: 11px; }
  .entry-card #stepMulti .panel { gap: 4px; }
  .entry-card #stepSolo .app-icon { display: none; }
}

/* A small acknowledgement sits above the unchanged title artwork. */
.play-terms-dialog {
  width: 380px;
  max-width: calc(100vw - 32px);
  max-height: calc(100svh - 32px);
  margin: auto;
  padding: 28px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 2px solid #ffffffc9;
  border-radius: 26px;
  background: #fff8edfa;
  color: #173c4c;
  box-shadow: 0 12px 48px #07364e55;
}
.play-terms-dialog[open] { display: grid; gap: 16px; }
.play-terms-dialog::backdrop { background: #082f4940; }
.play-terms-dialog h1 { margin: 0; padding: 0 28px 0 0; font-size: 22px; line-height: 1.4; }
.play-terms-dialog > p { margin: 0; font-size: 14px; line-height: 1.7; }
.play-terms-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #49646b;
  font: inherit;
  font-size: 26px;
  cursor: pointer;
}
.play-terms-dialog .play-terms-details > summary { padding: 8px 0; }
.play-terms-dialog .play-terms-text { max-height: 28svh; min-height: 0; margin-top: 8px; }
.play-terms-dialog .entry-legal-link { font-size: 12px; }
.play-terms-dialog #btnAcceptTerms { width: 100%; min-height: 56px; padding: 12px; border-radius: 999px; font-size: 20px; }
.play-terms-dialog :focus-visible { outline: 3px solid #147f95; outline-offset: 3px; }
@media (max-height: 400px) {
  .play-terms-dialog { padding: 16px 24px; }
  .play-terms-dialog[open] { gap: 8px; }
  .play-terms-dialog h1 { font-size: 18px; }
  .play-terms-dialog > p { font-size: 13px; }
  .play-terms-dialog #btnAcceptTerms { min-height: 48px; font-size: 18px; }
}