/* Adventure Lobby — visual layer only.
   Uses original quokky_idle.png and a snapshot of the game's live canvas.
   Practice/Challenge handler IDs, account keys, scoring and rewards unchanged. */
#start {
  background:linear-gradient(115deg,rgba(16,55,48,.39),rgba(20,55,48,.64));
  padding:clamp(5px,1.2dvh,14px);
}
#start .card {
  box-sizing:border-box;
  display:grid;
  grid-template-columns:minmax(0,43fr) minmax(0,57fr);
  grid-template-rows:auto minmax(0,1fr) auto;
  align-items:stretch;
  gap:clamp(7px,1.4dvh,13px) clamp(11px,1.6vw,17px);
  width:min(95vw,1070px);
  height:min(90dvh,570px);
  max-height:calc(100dvh - 12px);
  min-height:0;
  padding:clamp(9px,1.6dvh,17px);
  overflow:hidden;
  text-align:left;
  background:linear-gradient(155deg,#fffcf1 0%,#f7f0d9 100%);
  border:2px solid #876745;
  border-radius:22px;
  box-shadow:0 23px 70px rgba(12,34,29,.41),0 4px 0 rgba(24,45,33,.19);
}
#start .adventureHero {
  grid-column:1;
  grid-row:1/4;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:0;
  border-radius:17px;
  border:2px solid #a6ac74;
  background:linear-gradient(160deg,#3cb2df,#abdfe1 55%,#658d4b);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.43),0 4px 14px rgba(50,76,47,.16);
}
#start .adventureHeroScene {
  position:absolute;
  inset:0;
  overflow:hidden;
  background:linear-gradient(180deg,#4cbbe9 3%,#abe3f1 53%,#8fbe7f 54%,#4d8464 100%);
  background-size:cover;
  background-position:60% 48%;
}
#start .adventureHeroScene.captured {
  background-position:59% 50%;
}
#start .adventureHeroScene.captured .adventureHeroSun,
#start .adventureHeroScene.captured .adventureHeroMountains,
#start .adventureHeroScene.captured .adventureHeroTrail {display:none}
#start .adventureHeroSun {
  position:absolute;
  width:84px;height:84px;
  border-radius:50%;
  top:13%;right:17%;
  background:radial-gradient(circle,#fff5be 0 24%,#ffdb70 32%,rgba(255,240,123,0) 71%);
  box-shadow:0 0 50px 8px rgba(255,236,147,.55);
}
#start .adventureHeroMountains {
  position:absolute;
  left:-12%;right:-8%;top:24%;height:57%;
  background:linear-gradient(145deg,#c0dfcc,#5a95a1 76%);
  clip-path:polygon(0 83%,21% 20%,35% 62%,59% 0,85% 78%,100% 42%,100% 100%,0 100%);
  filter:drop-shadow(0 5px 2px rgba(32,80,73,.2));
}
#start .adventureHeroTrail {
  position:absolute;
  bottom:-24%;left:-21%;
  width:165%;height:60%;
  border-radius:50%;
  background:radial-gradient(ellipse at 45% 95%,#b2c888 0 19%,#7bb05f 30%,#3d8060 70%);
  transform:rotate(-11deg);
}
#start .adventureHeroScene::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(19,79,69,.25),transparent 34%,transparent 45%,rgba(17,61,40,.28) 100%);
  pointer-events:none;
}
#start .adventureHeroQuokky {
  position:absolute;
  z-index:2;
  width:clamp(115px,55%,260px);
  height:63%;
  object-fit:contain;
  object-position:bottom left;
  bottom:10%;left:3%;
  filter:drop-shadow(0 8px 5px rgba(23,55,39,.27));
  animation:quokkyWelcome 4.3s ease-in-out infinite;
  pointer-events:none;
}
#start .adventureHeroCopy {
  position:absolute;
  top:clamp(11px,4%,22px);left:5%;right:5%;
  z-index:3;
  display:flex;
  flex-direction:column;
  gap:5px;
  color:white;
  text-align:left;
  text-shadow:0 2px 5px rgba(20,67,60,.64);
}
#start .adventureHeroEyebrow {
  width:max-content;
  max-width:100%;
  padding:5px 9px;
  border:1px solid rgba(255,255,255,.6);
  border-radius:999px;
  background:rgba(26,82,63,.60);
  color:#fffce4;
  font-weight:900;
  font-size:clamp(9px,1.1vw,12px);
  letter-spacing:.035em;
}
#start .adventureHeroCopy strong {
  font-weight:950;
  font-size:clamp(16px,2vw,23px);
  line-height:1.16;
  max-width:90%;
}
#start .adventureHeroTreasures {
  position:absolute;
  z-index:4;
  left:4%;right:4%;bottom:4%;
  display:flex;
  justify-content:center;
  gap:clamp(4px,.65vw,9px);
}
#start .adventureHeroTreasures span {
  flex:1 1 0;
  white-space:nowrap;
  text-align:center;
  font-size:clamp(9px,.85vw,12px);
  font-weight:850;
  color:#fffef1;
  padding:6px 4px;
  border:1px solid rgba(247,255,235,.51);
  border-radius:10px;
  background:rgba(29,68,53,.80);
  box-shadow:0 2px 7px rgba(10,44,34,.25);
  backdrop-filter:blur(3px);
}
#start .startHeading {
  grid-column:2;grid-row:1;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:clamp(1px,.5dvh,4px);
  margin:0;
  text-align:left;
}
#start .startHeading .tag {
  order:-1;
  color:#679055;
  font-size:clamp(10px,1.55dvh,12px);
  line-height:1;
}
#start .startHeading h1 {
  font-size:clamp(24px,5.8dvh,40px);
  line-height:1.05;
  margin:0;
  color:#614332;
  letter-spacing:-.035em;
  text-shadow:0 1px 0 #fff;
}
#start .startHeading h2 {
  display:block;
  font-weight:850;
  font-size:clamp(12px,2.4dvh,17px);
  line-height:1.12;
  margin:0;
  color:#65804c;
}
#start .startHeading p {display:none}
#start .startCore {
  grid-column:2;grid-row:2;
  display:flex;
  flex-direction:column;
  gap:clamp(6px,1.4dvh,11px);
  align-items:stretch;
  justify-content:center;
  min-width:0;
  min-height:0;
}
#start .modeChoices {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
  max-width:none;
  width:100%;
  margin:0;
  align-items:stretch;
}
#start .modeBtn {
  box-sizing:border-box;
  flex:none;
  min-height:clamp(56px,12dvh,91px);
  max-height:none;
  padding:9px 6px;
  border-radius:15px;
  border:1px solid rgba(255,255,255,.34);
  box-shadow:0 4px 0 rgba(35,64,43,.22),0 8px 14px rgba(49,54,35,.12),inset 0 1px 0 rgba(255,255,255,.22);
  transition:transform .12s ease,filter .12s ease,box-shadow .12s ease;
  font-size:clamp(13px,2.8dvh,17px);
  font-weight:950;
  line-height:1.12;
  touch-action:manipulation;
}
#start .modeBtn.practice {background:linear-gradient(170deg,#80ac66,#4c804e)}
#start .modeBtn.challenge {background:linear-gradient(170deg,#e7ae57,#b87b34)}
#start .modeBtn small {
  font-size:clamp(9px,1.95dvh,12px);
  line-height:1.14;
  margin-top:4px;
  font-weight:650;
}
#start .modeBtn:active {transform:translateY(3px);box-shadow:0 1px 0 rgba(35,64,43,.2)}
#start .modeBtn:focus-visible {outline:3px solid #2d756f;outline-offset:3px}
#start .nameRow {
  box-sizing:border-box;
  width:100%;
  max-width:none;
  height:auto;
  max-height:100%;
  margin:0;
  padding:clamp(9px,1.4dvh,13px);
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:center;
  gap:clamp(3px,.75dvh,6px);
  min-height:0;
  border-radius:13px;
  border:1.5px solid #b6c09b;
  background:linear-gradient(160deg,rgba(246,250,236,.96),rgba(239,245,222,.91));
  box-shadow:0 3px 10px rgba(61,99,57,.07);
}
#start .nameRow > label {
  text-align:left;
  font-size:clamp(12px,2.3dvh,15px);
  line-height:1.15;
  margin:0;
  color:#46624d;
}
#start #playerName {
  box-sizing:border-box;
  width:100%;
  height:clamp(35px,8.2dvh,43px);
  padding:6px 10px;
  background:#fffdf7;
  font-size:clamp(15px,2.65dvh,18px);
  text-align:left;
  border:2px solid #b6c5a8;
  border-radius:10px;
  margin:0;
}
#start #playerName:focus {
  border-color:#4c896a;
  outline:2px solid rgba(46,123,94,.14);
}
#start .nameRow #playerNameHelp {display:none}
#start .nameRow #identityPreviewAvailability,
#start .nameRow #identityPreviewStatus {
  font-size:clamp(10px,1.8dvh,12px);
  line-height:1.14;
  margin:0;
  min-height:0;
  text-align:left;
}
#start .nameRow #identityPreviewStatus:not([data-kind="bad"]) {display:none}
#start .identityTestNotice {
  box-sizing:border-box;
  max-width:100%;
  font-size:clamp(9px,1.75dvh,11px);
  padding:4px 6px;
  margin:0;
  border-radius:8px;
  line-height:1.14;
  text-align:left;
  color:#765b35;
  background:#fff5d9;
}
#start .identityTextButton,
#start #identityPreviewHelp {align-self:flex-start;margin:0}
#start .identityTextButton {
  font-size:clamp(10px,1.95dvh,12px);
  padding:2px 0;
  text-decoration:none;
  border-bottom:1px dotted currentColor;
  min-height:0;
}
#start #identityPreviewHelp {
  font-size:clamp(10px,1.85dvh,11px);
  line-height:1.1;
  max-width:100%;
}
#start #identityPreviewHelp:not([open]) summary {padding:1px 0}
#start .startFooter {
  grid-column:2;grid-row:3;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  margin:0;
}
#start .startFooter .rewardActions {
  display:flex;
  flex-wrap:nowrap;
  justify-content:center;
  gap:8px;
  width:100%;
  padding:0;
  margin:0;
}
#start .startFooter .leaderboardBtn {
  box-sizing:border-box;
  margin:0;
  min-height:clamp(31px,7dvh,40px);
  padding:6px 9px;
  font-size:clamp(11px,2dvh,13px);
  border-radius:12px;
}
#start .startFooter > p,
#start .startFooter > .startGuide {display:none}

/* Phone landscape: a dedicated two-column game lobby, not a scaled desktop form. */
@media (orientation:landscape) and (max-height:700px) {
  #start {padding:3px;overflow:hidden}
  #start:not(.quickStart) .card {
    display:grid;
    grid-template-columns:minmax(0,42fr) minmax(0,58fr);
    grid-template-rows:auto minmax(0,1fr) auto;
    align-items:stretch;
    width:min(97vw,1070px);
    height:calc(100dvh - 9px);
    min-height:0;
    max-height:calc(100dvh - 9px);
    gap:clamp(4px,1.3dvh,8px) clamp(8px,1.3vw,14px);
    padding:clamp(5px,1.25dvh,10px);
    overflow:hidden;
    border-width:2px;
    border-radius:17px;
  }
  #start:not(.quickStart) .adventureHero {
    display:block;
    grid-column:1;
    grid-row:1/4;
    min-height:0;
  }
  #start:not(.quickStart) .adventureHeroCopy {top:3.5%;left:4%;right:4%}
  #start:not(.quickStart) .adventureHeroCopy strong {
    font-size:clamp(13px,3dvh,21px);
    max-width:100%;
  }
  #start:not(.quickStart) .adventureHeroEyebrow {
    font-size:clamp(8px,1.8dvh,10px);
    padding:4px 7px;
  }
  #start:not(.quickStart) .adventureHeroQuokky {
    width:min(68%,235px);
    height:65%;
    bottom:11%;
    left:2%;
  }
  #start:not(.quickStart) .adventureHeroTreasures span {
    font-size:clamp(8px,1.8dvh,10px);
    padding:clamp(3px,.8dvh,6px) 2px;
  }
  #start:not(.quickStart) .startHeading {
    grid-column:2;grid-row:1;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:1px;
  }
  #start:not(.quickStart) .startHeading .tag {font-size:9px}
  #start:not(.quickStart) .startHeading h1 {
    font-size:clamp(21px,5.5dvh,31px);
    line-height:1;
  }
  #start:not(.quickStart) .startHeading h2 {
    display:block;
    font-size:clamp(11px,2.45dvh,15px);
    line-height:1.1;
  }
  #start:not(.quickStart) .startCore {
    grid-column:2;grid-row:2;
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-height:0;
    gap:clamp(4px,1.05dvh,7px);
  }
  #start:not(.quickStart) .modeChoices {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:clamp(6px,.75vw,10px);
    height:auto;
    min-height:0;
  }
  #start:not(.quickStart) .modeBtn {
    flex:none;
    min-height:clamp(49px,12dvh,70px);
    max-height:none;
    padding:clamp(5px,1.3dvh,9px) 5px;
    font-size:clamp(12px,2.65dvh,16px);
    border-radius:11px;
  }
  #start:not(.quickStart) .modeBtn small {
    display:block;
    font-size:clamp(9px,1.8dvh,11px);
    line-height:1.1;
    margin-top:3px;
  }
  #start:not(.quickStart) .nameRow {
    display:flex;
    height:auto;
    min-height:0;
    max-height:calc(100dvh - 133px);
    padding:clamp(5px,1dvh,9px) clamp(8px,1.2vw,13px);
    gap:clamp(1px,.4dvh,4px);
    overflow:hidden;
    border-radius:11px;
  }
  #start:not(.quickStart) .nameRow > label {
    font-size:clamp(11px,2.3dvh,13px);
    line-height:1.1;
  }
  #start:not(.quickStart) #playerName {
    height:clamp(29px,7.8dvh,39px);
    padding:5px 9px;
    font-size:clamp(13px,2.65dvh,16px);
  }
  #start:not(.quickStart) .nameRow #identityPreviewAvailability,
  #start:not(.quickStart) .nameRow #identityPreviewStatus {
    font-size:clamp(9px,1.75dvh,11px);
    margin:0;
    line-height:1.12;
  }
  #start:not(.quickStart) .identityTestNotice {
    font-size:clamp(9px,1.7dvh,10px);
    line-height:1.08;
    padding:clamp(2px,.65dvh,4px) 5px;
    margin:0;
  }
  #start:not(.quickStart) .identityTextButton,
  #start:not(.quickStart) #identityPreviewHelp {
    font-size:clamp(9px,1.75dvh,11px);
    line-height:1.08;
    padding:2px 0;
    min-height:0;
  }
  #start:not(.quickStart) .nameRow:has(#identityPreviewHelp[open]),
  #start:not(.quickStart) .nameRow:has(#identityPreviewRecoverPanel:not([hidden])) {
    overflow-y:auto;
    justify-content:flex-start;
  }
  #start:not(.quickStart) .startFooter {
    grid-column:2;grid-row:3;
    margin:0;
  }
  #start:not(.quickStart) .startFooter .leaderboardBtn {
    min-height:clamp(28px,7dvh,36px);
    margin:0;
    padding:clamp(4px,1dvh,7px) 11px;
    font-size:clamp(11px,2dvh,13px);
  }

  /* After registration: keep the scenic hero and show ONLY one small play
     confirmation at right. Nothing that children must scroll to reach. */
  #start.quickStart .card {
    display:grid;
    grid-template-columns:minmax(0,40fr) minmax(0,60fr);
    grid-template-rows:auto minmax(0,1fr);
    align-items:center;
    width:min(94vw,900px);
    height:min(86dvh,405px);
    max-height:calc(100dvh - 8px);
    min-height:0;
    padding:clamp(7px,1.5dvh,13px);
    gap:clamp(7px,1.6dvh,13px) clamp(9px,1.5vw,16px);
    overflow:hidden;
    border-radius:18px;
  }
  #start.quickStart .adventureHero {
    display:block;
    grid-column:1;
    grid-row:1/3;
    align-self:stretch;
  }
  #start.quickStart .adventureHeroCopy strong {font-size:clamp(12px,2.8dvh,18px)}
  #start.quickStart .adventureHeroTreasures span {font-size:9px;padding:4px 2px}
  #start.quickStart .adventureHeroQuokky {width:65%;height:67%;bottom:10%}
  #start.quickStart .startHeading {
    grid-column:2;grid-row:1;
    display:block;
    align-self:end;
    text-align:center;
  }
  #start.quickStart .startHeading h1 {
    font-size:clamp(21px,5.4dvh,31px);
    line-height:1.1;
    text-align:center;
  }
  #start.quickStart .startHeading .tag,
  #start.quickStart .startHeading h2,
  #start.quickStart .startHeading p {display:none}
  #start.quickStart .startCore {
    display:flex;
    grid-column:2;grid-row:2;
    justify-content:flex-start;
    align-self:start;
    align-items:center;
    min-height:0;
    width:100%;
    gap:0;
  }
  #start.quickStart .modeChoices,
  #start.quickStart .startFooter {display:none}
  #start.quickStart .nameRow {
    display:flex;
    box-sizing:border-box;
    width:100%;
    min-height:0;
    height:auto;
    padding:0;
    margin:0;
    justify-content:center;
    align-items:center;
    overflow:visible;
    border:0;
    background:transparent;
    box-shadow:none;
  }
  #start.quickStart .nameRow > :not(#identityPreviewCodePanel):not(#identityPreviewPreviewNotice) {
    display:none!important;
  }
  #start.quickStart #identityPreviewCodePanel {
    display:flex;
    box-sizing:border-box;
    width:100%;
    max-width:none;
    max-height:calc(100dvh - 74px);
    min-height:0;
    gap:clamp(5px,1.45dvh,10px);
    padding:clamp(9px,2dvh,15px) clamp(10px,1.4vw,16px);
    justify-content:center;
    align-items:center;
    overflow:hidden;
    border:2px solid #7aa06d;
    border-radius:14px;
    background:linear-gradient(160deg,#fffff7,#f0f8e9);
  }
  #start.quickStart #identityPreviewCodePanel h3 {
    font-size:clamp(16px,4.05dvh,22px);
    line-height:1.12;
    color:#315b41;
    margin:0;
  }
  #start.quickStart #identityPreviewCodePanel > p {display:none}
  #start.quickStart #identityPreviewContinue {
    display:block;
    width:min(98%,370px);
    min-height:clamp(44px,10.5dvh,55px);
    max-width:none;
    margin:0 auto;
    padding:clamp(8px,1.8dvh,11px) 8px;
    font-size:clamp(15px,3.7dvh,20px);
    border-radius:11px;
  }
  #start.quickStart #identityPreviewGuardianBackup {
    width:min(98%,390px);
    padding:clamp(3px,.8dvh,6px) 0 0;
    margin:0 auto;
    border-top:1px solid #b5c7a7;
  }
  #start.quickStart .nameRow > #identityPreviewPreviewNotice {
    order:2;
    align-self:center;
    width:100%;
    max-width:390px;
    margin:3px auto 0;
    padding:0;
    font-size:clamp(9px,1.65dvh,10px);
    line-height:1.08;
    background:transparent;
    border:0;
    text-align:center;
  }
  #start.quickStart #identityPreviewCodePanel {order:1}
  #start.quickStart #identityPreviewCodePanel:has(#identityPreviewGuardianBackup[open]) {
    max-height:calc(100dvh - 67px);
    justify-content:flex-start;
    overflow-y:auto;
  }
}
@media (orientation:landscape) and (max-height:340px) {
  #start:not(.quickStart) .card {gap:2px 7px;padding:4px 7px}
  #start:not(.quickStart) .adventureHeroEyebrow {display:none}
  #start:not(.quickStart) .startHeading .tag {display:none}
  #start:not(.quickStart) .startHeading h1 {font-size:20px}
  #start:not(.quickStart) .startHeading h2 {font-size:11px}
  #start:not(.quickStart) .modeBtn {min-height:39px;padding:4px 6px}
  #start:not(.quickStart) .modeBtn small {display:none}
  #start:not(.quickStart) .nameRow {max-height:calc(100dvh - 96px);padding:4px 7px}
  #start:not(.quickStart) .nameRow > label {font-size:10px}
  #start:not(.quickStart) .identityTestNotice {font-size:9px;padding:2px 4px}
  #start.quickStart .card {height:calc(100dvh - 7px);padding:5px 8px;gap:4px}
  #start.quickStart .adventureHeroEyebrow {display:none}
  #start.quickStart #identityPreviewCodePanel {padding:5px 7px;gap:3px}
  #start.quickStart #identityPreviewCodePanel h3 {font-size:16px}
  #start.quickStart .nameRow > #identityPreviewPreviewNotice {display:none}
}

/* Narrow portrait: preserve excitement, allow optional page scroll only where
   truly needed. The no-scroll requirement applies to normal phone landscape. */
@media (orientation:portrait) {
  #start {padding:8px}
  #start .card {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    width:min(96vw,580px);
    height:auto;
    max-height:calc(100dvh - 14px);
    overflow-y:auto;
    padding:11px;
    gap:10px;
  }
  #start .adventureHero {min-height:clamp(130px,23dvh,235px);flex:0 0 auto}
  #start .adventureHeroQuokky {height:80%;max-width:44%;bottom:8%;left:12%}
  #start .adventureHeroTreasures {left:35%;right:3%}
  #start .adventureHeroCopy strong {font-size:clamp(14px,4vw,19px)}
  #start .startHeading {align-items:center;text-align:center;gap:2px}
  #start .startHeading h1 {font-size:clamp(23px,7vw,36px)}
  #start .startHeading h2 {font-size:clamp(12px,3.5vw,15px)}
  #start .startCore {width:100%;gap:8px}
  #start .modeBtn {min-height:66px;padding:9px 5px;font-size:14px}
  #start .modeBtn small {font-size:10px}
  #start .nameRow {width:100%;max-height:none}
  #start .startFooter {align-self:center}
  #start.quickStart .adventureHero {min-height:clamp(105px,21dvh,180px)}
  #start.quickStart .startCore {min-height:0}
  #start.quickStart .modeChoices,
  #start.quickStart .startFooter {display:none}
  #start.quickStart .nameRow > :not(#identityPreviewCodePanel):not(#identityPreviewPreviewNotice) {display:none!important}
  #start.quickStart .nameRow {
    padding:0;
    border:0;
    box-shadow:none;
    background:transparent;
  }
  #start.quickStart #identityPreviewCodePanel {
    max-height:calc(56dvh - 6px);
    width:100%;
    overflow-y:auto;
    padding:9px;
  }
  #start.quickStart #identityPreviewCodePanel p {display:none}
  #start.quickStart .startHeading .tag,
  #start.quickStart .startHeading h2 {display:none}
}

@keyframes quokkyWelcome {
  0%,100% {transform:translateY(0)}
  50% {transform:translateY(-3px)}
}
@media (prefers-reduced-motion:reduce) {
  #start .adventureHeroQuokky {animation:none}
  #start .modeBtn {transition:none}
}