/* Streamlined Season 3 sign-in. Do not modify game or Rewards Center layout. */
#start .identityAvailability {
  font-size:11px;font-weight:800;line-height:1.2;margin:3px 0;
  color:#526c4a;min-height:12px;
}
#start .identityAvailability[data-kind="good"]{color:#23633e}
#start .identityAvailability[data-kind="bad"]{color:#a34731}
#start #identityPreviewStatus{
  font-size:11px;line-height:1.2;font-weight:750;
  min-height:13px;margin:2px 0;
}
#start .identityTestNotice{
  background:#fff2d0;border:1px solid #ba9853;
  border-radius:10px;color:#78511d;font-size:11px;
  font-weight:700;padding:5px 7px;line-height:1.25;margin:4px auto;
}
#start .identityTextButton{
  display:block;font:inherit;font-size:11px;font-weight:800;
  color:#346748;text-decoration:underline;
  border:0;background:none;cursor:pointer;
  margin:3px auto;padding:3px 5px;
}
#start .identityPreviewArea{
  font-size:12px;line-height:1.32;
  background:#fff9e9;border:2px solid #93ad88;
  border-radius:14px;padding:9px;margin:6px auto;
  max-width:min(95%,460px);
}
#start .identityPreviewArea[hidden],
#start .identityTestNotice[hidden],
#start #identityPreviewReserve[hidden],
#start #identityPreviewBackupLater[hidden],
#start #identityPreviewRecoverToggle[hidden]{display:none!important}
#start .identityPreviewArea p{font-size:11px;line-height:1.27;margin:5px auto}
#start .identityPreviewArea label{display:block;margin:4px auto 2px}
#start .identityPreviewArea input:not([type="checkbox"]){
  font:inherit;font-size:15px;padding:7px;
  border:1px solid #aeb9a0;background:white;
  width:100%;max-width:100%;border-radius:10px;
}
#start .identityPreviewArea button,#start #identityPreviewReserve{
  font:inherit;font-size:12px;font-weight:900;
  color:#335b39;background:#f3f8ed;
  border:1px solid #7f9e77;padding:7px 10px;
  border-radius:12px;cursor:pointer;margin:4px 3px;
}
#start .identityPreviewArea button:disabled{opacity:.5;cursor:default}
#start .identityBackupPanel{
  border:3px solid #6f935b;box-shadow:0 6px 18px #64512c28;
  background:linear-gradient(180deg,#f6f8e9,#fff9e9);
  max-height:min(67dvh,370px);overflow:auto;
}
#start .identityBackupPanel h3{
  font-size:16px;color:#365a3a;margin:0 auto 5px;
}
#start .identityBackupPanel #identityPreviewCode{
  font-size:14px;letter-spacing:.02em;
}
#start .identitySavedLabel{
  display:flex!important;align-items:center;justify-content:center;
  gap:7px;font-size:12px;font-weight:750;
}
#start .identitySavedLabel input{
  width:18px;height:18px;flex-shrink:0;
}
#start .identityBackupPanel #identityPreviewContinue{
  display:block;max-width:280px;width:95%;
  margin:6px auto 2px;font-size:15px;
  color:white;background:#4e7e4a;
  border:2px solid #3b6540;
}
#start #identityPreviewHelp{
  margin:4px auto 2px;
  max-width:425px;font-size:11px;
  color:#506447;line-height:1.35;
}
#start #identityPreviewHelp summary{
  cursor:pointer;text-decoration:underline;font-weight:800;
}
#start #identityPreviewHelp button{display:block;margin:6px auto}
@media (orientation:landscape) and (max-height:700px){
  #start .identityPreviewArea{padding:6px;margin:4px auto}
  #start .identityBackupPanel{max-height:46dvh;overflow:auto}
  #start .identityBackupPanel h3{font-size:14px}
  #start .identityBackupPanel p{font-size:10px}
  #start .identityBackupPanel button{padding:5px 8px}
}

#start .identityBackupPanel #identityPreviewContinue{
  min-height:42px;font-size:17px;max-width:320px;
  background:linear-gradient(180deg,#6a9858,#417b48);
}
#start #identityPreviewGuardianBackup{
  margin:8px auto 0;padding:6px 8px;border-top:1px solid #aec6a1;
  max-width:400px;font-size:11px;line-height:1.32;
}
#start #identityPreviewGuardianBackup summary{
  cursor:pointer;color:#365d3e;font-weight:850;
}
#start #identityPreviewGuardianBackup[open]{background:#f8f4e3;border-radius:10px}
#start #identityPreviewBackupLater{font-size:11px}


/* PHONE LANDSCAPE / ONE-SCREEN WELCOME
   Unlike desktop, landscape uses a compact side-by-side play surface.
   The regular play controls fit the visual viewport with no page scrolling;
   advanced username recovery and voluntary parent backup may scroll inside
   their own panels if the keyboard is open or accessibility text is enlarged. */
@media (orientation:landscape) and (max-height:700px) {
  #start {
    box-sizing:border-box;
    padding:3px;
    overflow:hidden;
    align-items:center;
    justify-content:center;
  }
  #start .card {
    box-sizing:border-box;
    width:min(98vw,1100px);
    height:calc(100dvh - 6px);
    max-height:calc(100dvh - 6px);
    min-height:0;
    padding:clamp(5px,1.35dvh,11px) clamp(8px,1.8vw,16px);
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:clamp(2px,1dvh,5px);
    overflow:hidden;
    border-width:2px;
    border-radius:clamp(11px,2vw,17px);
    margin:0 auto;
  }
  #start .startHeading {
    flex:0 0 auto;
    min-height:0;
    display:flex;
    align-items:baseline;
    justify-content:center;
    flex-wrap:wrap;
    column-gap:clamp(7px,1.2vw,14px);
    row-gap:0;
  }
  #start .startHeading .tag {
    flex:0 0 auto;
    font-size:clamp(8px,2dvh,10px);
    white-space:nowrap;
    margin:0;
  }
  #start .startHeading h1 {
    flex:0 0 auto;
    font-size:clamp(20px,5.8dvh,31px);
    line-height:1.05;
    margin:0;
    white-space:nowrap;
  }
  #start .startHeading h2,
  #start .startHeading p {display:none}
  #start .startCore {
    flex:1 1 auto;
    min-height:0;
    width:100%;
    display:grid;
    grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
    gap:clamp(6px,1.3vw,14px);
    align-items:stretch;
    justify-items:stretch;
  }
  #start .modeChoices {
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:stretch;
    gap:clamp(5px,1.5dvh,9px);
    max-width:none;
    width:100%;
    min-height:0;
    margin:0;
  }
  #start .modeBtn {
    flex:1 1 0;
    min-height:39px;
    max-height:75px;
    border-radius:12px;
    padding:clamp(5px,1.7dvh,9px) 9px;
    font-size:clamp(12px,3.2dvh,17px);
    line-height:1.13;
  }
  #start .modeBtn small {
    font-size:clamp(9px,2.3dvh,11px);
    margin-top:2px;
    line-height:1.14;
  }
  #start .nameRow {
    box-sizing:border-box;
    min-width:0;
    width:100%;
    max-width:none;
    height:100%;
    max-height:100%;
    min-height:0;
    margin:0;
    padding:clamp(4px,1.3dvh,9px) clamp(7px,1.2vw,13px);
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:stretch;
    gap:clamp(1px,.55dvh,3px);
    overflow:hidden;
    border-radius:12px;
  }
  #start .nameRow > label {
    font-size:clamp(11px,2.55dvh,14px);
    line-height:1;
    margin:0;
  }
  #start #playerName {
    box-sizing:border-box;
    flex:0 0 auto;
    height:clamp(30px,8dvh,40px);
    padding:4px 9px;
    font-size:clamp(13px,3.1dvh,16px);
    margin:0;
    border-radius:8px;
  }
  /* Duplicate onboarding messages only push the primary play action away. */
  #start #playerNameHelp {display:none}
  #start #identityPreviewAvailability {
    font-size:clamp(9px,2.15dvh,11px);
    margin:0;
    min-height:0;
    line-height:1.1;
  }
  #start #identityPreviewStatus {
    font-size:clamp(9px,2.15dvh,11px);
    margin:0;
    min-height:0;
    line-height:1.1;
  }
  #start .nameRow:has(#playerName[readonly]) #identityPreviewStatus {
    display:none;
  }
  #start .identityTestNotice {
    font-size:clamp(9px,1.95dvh,10px);
    line-height:1.13;
    padding:clamp(2px,.65dvh,4px) 5px;
    margin:1px auto;
    border-width:1px;
  }
  #start .identityTextButton {
    font-size:clamp(10px,2.2dvh,11px);
    line-height:1.1;
    padding:2px 0;
    margin:0 auto;
    min-height:24px;
  }
  #start #identityPreviewHelp {font-size:10px;margin:0 auto;line-height:1.08}
  #start #identityPreviewHelp:not([open]) summary {padding:0;line-height:1.15}
  #start .nameRow:has(#identityPreviewHelp[open]),
  #start .nameRow:has(#identityPreviewRecoverPanel:not([hidden])) {
    overflow-y:auto;
    justify-content:flex-start;
  }
  #start .startFooter {
    flex:0 0 auto;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:0;
    margin:0;
  }
  #start .startFooter > p,
  #start .startFooter > .startGuide {display:none}
  #start .startFooter .rewardActions {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:clamp(5px,1vw,10px);
    margin:0;
    padding:0;
  }
  #start .startFooter .leaderboardBtn {
    min-height:29px;
    margin:0;
    border-radius:999px;
    font-size:clamp(10px,2.4dvh,13px);
    padding:clamp(3px,1.1dvh,7px) clamp(9px,1.2vw,14px);
  }
  /* After first registration, give the *entire* welcome surface to Play.
     Hide the redundant mode selector, status, footer and explanatory copy. */
  #start.quickStart .card {
    justify-content:center;
    gap:clamp(3px,1.1dvh,8px);
  }
  #start.quickStart .startHeading {flex:0 0 auto}
  #start.quickStart .startCore {
    display:flex;
    flex:0 1 auto;
    min-height:0;
    width:100%;
    align-items:center;
    justify-content:center;
  }
  #start.quickStart .modeChoices,
  #start.quickStart .startFooter {display:none}
  #start.quickStart .nameRow {
    width:min(100%,760px);
    height:auto;
    max-height:calc(100dvh - 50px);
    min-height:0;
    padding:0;
    border:0;
    background:transparent;
    box-shadow:none;
    justify-content:center;
    align-items:center;
    overflow:visible;
  }
  #start.quickStart .nameRow > :not(#identityPreviewCodePanel):not(#identityPreviewPreviewNotice) {
    display:none!important;
  }
  #start.quickStart .nameRow > #identityPreviewPreviewNotice {
    width:100%;
    margin:0 auto;
    font-size:10px;
    line-height:1.1;
    padding:3px 6px;
  }
  #start.quickStart #identityPreviewCodePanel {
    box-sizing:border-box;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:clamp(3px,1dvh,6px);
    width:min(100%,650px);
    max-width:100%;
    max-height:calc(100dvh - 72px);
    padding:clamp(7px,2dvh,13px) clamp(9px,2vw,18px);
    margin:0 auto;
    border-radius:17px;
    border-width:2px;
    overflow:hidden;
  }
  #start.quickStart #identityPreviewCodePanel h3 {
    font-size:clamp(16px,4.2dvh,23px);
    line-height:1.12;
    margin:0;
  }
  #start.quickStart #identityPreviewCodePanel >p {
    display:none;
  }
  #start.quickStart #identityPreviewContinue {
    box-sizing:border-box;
    flex:0 0 auto;
    width:min(100%,490px);
    max-width:none;
    min-height:clamp(43px,11dvh,58px);
    padding:clamp(7px,1.8dvh,12px) 12px;
    margin:1px auto;
    font-size:clamp(16px,4dvh,22px);
    line-height:1.1;
  }
  #start.quickStart #identityPreviewGuardianBackup {
    width:min(100%,490px);
    margin:0 auto;
    padding:3px 0 0;
    font-size:clamp(10px,2.15dvh,12px);
    line-height:1.15;
  }
  #start.quickStart #identityPreviewGuardianBackup summary {
    font-size:clamp(10px,2.25dvh,13px);
    line-height:1.15;
  }
  /* Longer optional parental tasks stay in their own small region, never
     forcing the main welcome menu into a scrollable desktop-like page. */
  #start.quickStart #identityPreviewCodePanel:has(#identityPreviewGuardianBackup[open]) {
    justify-content:flex-start;
    overflow-y:auto;
    max-height:calc(100dvh - 45px);
  }
}
/* Extremely short in-app landscape browser/keyboard viewports: no clipped
   Play button or off-screen first-run confirmation. */
@media (orientation:landscape) and (max-height:340px) {
  #start .card {padding:4px 7px;gap:2px}
  #start .startHeading .tag {display:none}
  #start .startHeading h1 {font-size:20px}
  #start .modeBtn small {display:none}
  #start .modeBtn {min-height:38px}
  #start .nameRow > label {font-size:11px}
  #start #identityPreviewStatus {display:none}
  #start .identityTestNotice {font-size:9px}
  #start.quickStart .nameRow > #identityPreviewPreviewNotice {display:none}
  #start.quickStart #identityPreviewCodePanel {max-height:calc(100dvh - 42px);padding:5px 8px}
}

/* FINISHING PASS — compact, balanced phone-landscape design.
   Follow real Galaxy Note tests: do not stretch confirmation across the
   screen or leave blank space inside the username card. */
@media (orientation:landscape) and (max-height:700px) {
  #start:not(.quickStart) .card {
    width:min(94vw,900px);
    height:auto;
    max-height:calc(100dvh - 8px);
    min-height:0;
    padding:clamp(8px,2dvh,15px) clamp(11px,2vw,19px);
    gap:clamp(6px,1.8dvh,12px);
    border:2px solid #846849;
    box-shadow:0 14px 42px rgba(19,46,32,.32);
  }
  #start:not(.quickStart) .startHeading {
    align-items:center;
    gap:3px 11px;
  }
  #start:not(.quickStart) .startHeading .tag {
    font-size:clamp(8px,1.9dvh,10px);
  }
  #start:not(.quickStart) .startHeading h1 {
    font-size:clamp(21px,6.3dvh,32px);
  }
  #start:not(.quickStart) .startCore {
    flex:0 1 auto;
    grid-template-columns:minmax(0,.93fr) minmax(0,1.07fr);
    gap:clamp(9px,1.75vw,17px);
    align-items:center;
  }
  #start:not(.quickStart) .modeChoices {
    height:auto;
    gap:clamp(7px,1.7dvh,12px);
  }
  #start:not(.quickStart) .modeBtn {
    flex:0 0 auto;
    min-height:clamp(44px,11dvh,64px);
    max-height:none;
    border-radius:12px;
    padding:clamp(7px,1.6dvh,11px) 9px;
    font-size:clamp(13px,3.15dvh,17px);
    box-shadow:0 4px 0 rgba(49,70,41,.2),0 6px 12px rgba(34,43,28,.11);
  }
  #start:not(.quickStart) .modeBtn small {
    font-size:clamp(9px,2.05dvh,11px);
    margin-top:3px;
    line-height:1.12;
  }
  #start:not(.quickStart) .nameRow {
    height:auto;
    max-height:calc(100dvh - 76px);
    padding:clamp(8px,2dvh,14px) clamp(9px,1.3vw,15px);
    gap:clamp(3px,1dvh,6px);
    border:1.5px solid #a4b294;
    background:linear-gradient(160deg,#faf9ee,#f3f1dc);
    box-shadow:0 4px 14px rgba(76,98,65,.08);
  }
  #start:not(.quickStart) #playerName {
    height:clamp(33px,8.7dvh,43px);
    background:#fffdf5;
  }
  #start:not(.quickStart) .identityTestNotice {
    font-size:clamp(9px,1.85dvh,10px);
    line-height:1.14;
    padding:3px 6px;
    max-width:100%;
  }
  #start:not(.quickStart) .startFooter .rewardActions {
    gap:clamp(8px,1.2vw,14px);
  }
  #start:not(.quickStart) .startFooter .leaderboardBtn {
    min-height:clamp(30px,7dvh,38px);
    font-size:clamp(11px,2.4dvh,13px);
  }

  /* First-run confirmation is a separate, intentionally small central card. */
  #start.quickStart {
    background:linear-gradient(160deg,rgba(26,56,38,.28),rgba(22,46,34,.71));
  }
  #start.quickStart .card {
    width:min(88vw,670px);
    height:auto;
    min-height:0;
    max-height:calc(100dvh - 10px);
    padding:clamp(10px,2.7dvh,20px) clamp(13px,2.3vw,24px);
    gap:clamp(7px,2dvh,14px);
    background:linear-gradient(160deg,#fffaf0,#f5edd4);
    border:2px solid #816246;
    border-radius:19px;
    box-shadow:0 17px 45px rgba(13,33,24,.38);
    overflow:hidden;
  }
  #start.quickStart .startHeading .tag {display:none}
  #start.quickStart .startHeading h1 {
    font-size:clamp(21px,5.6dvh,30px);
    letter-spacing:-.025em;
  }
  #start.quickStart .startCore {flex:0 1 auto}
  #start.quickStart .nameRow {
    width:100%;
    max-height:calc(100dvh - 66px);
  }
  #start.quickStart #identityPreviewCodePanel {
    width:100%;
    max-width:100%;
    max-height:calc(100dvh - 74px);
    padding:clamp(8px,2dvh,13px) clamp(10px,1.7vw,18px);
    gap:clamp(6px,1.6dvh,11px);
    border:1.5px solid #6c965e;
    border-radius:13px;
    background:linear-gradient(165deg,#fffff6,#f3f7e7);
    box-shadow:0 5px 14px rgba(65,101,59,.12);
  }
  #start.quickStart #identityPreviewCodePanel h3 {
    font-size:clamp(17px,4.5dvh,22px);
    color:#345c40;
    letter-spacing:-.012em;
  }
  #start.quickStart #identityPreviewContinue {
    width:min(100%,400px);
    min-height:clamp(42px,10.5dvh,56px);
    font-size:clamp(15px,3.7dvh,20px);
    border-radius:11px;
    box-shadow:0 4px 0 rgba(38,79,46,.2);
  }
  #start.quickStart #identityPreviewGuardianBackup {
    width:min(100%,420px);
    padding-top:clamp(3px,1.1dvh,7px);
    border-top:1px solid #b5c5a7;
  }
  #start.quickStart .nameRow > #identityPreviewPreviewNotice {
    order:2;
    width:min(100%,500px);
    font-size:clamp(9px,1.9dvh,10px);
    line-height:1.12;
    background:transparent;
    border:0;
    color:#77684b;
    padding:0 4px;
  }
  #start.quickStart #identityPreviewCodePanel {order:1}
}
@media (orientation:landscape) and (max-height:340px) {
  #start:not(.quickStart) .card {gap:3px;padding:5px 9px}
  #start:not(.quickStart) .startHeading .tag {display:none}
  #start:not(.quickStart) .modeBtn {
    min-height:35px;
    padding:5px 8px;
  }
  #start:not(.quickStart) .modeBtn small {display:none}
  #start:not(.quickStart) .nameRow {
    max-height:calc(100dvh - 50px);
    padding:5px 9px;gap:2px;
  }
  #start:not(.quickStart) .identityTestNotice {
    font-size:9px;line-height:1.03;padding:2px 4px;
  }
  #start.quickStart .card {padding:7px 12px;gap:5px}
  #start.quickStart #identityPreviewCodePanel {padding:6px 10px;gap:4px}
  #start.quickStart #identityPreviewCodePanel h3 {font-size:17px}
}


/* CROSS-BROWSER ACCOUNT LINKING
   Link codes add a browser session; they never touch scores, rewards or the
   user's emergency recovery code. */
#start .identityAccountHelp{
  text-align:left;
}
#start .identityAccountHelp section{
  margin:2px 0 7px;
}
#start .identityAccountHelp section[hidden],
#start .identityLinkCodeArea[hidden]{display:none!important}
#start .identityLinkCodeArea{
  margin:7px 0 3px;
  padding:7px;
  border:1px solid #a9bd97;
  border-radius:10px;
  background:#f1f7e9;
}
#start #identityPreviewLinkCode,
#start #identityPreviewLinkInput{
  text-transform:uppercase;
  letter-spacing:.12em;
  font-weight:900;
  text-align:center;
}
#start #identityPreviewLinkCode{
  color:#315f40;
  background:#fffdf4;
}
#start .identityRecoveryEmergency{
  margin-top:7px;
  padding-top:6px;
  border-top:1px solid #cad5bd;
  font-size:11px;
}
#start .identityRecoveryEmergency summary{
  cursor:pointer;
  color:#6e503b;
  font-weight:850;
}
#start .identityRecoveryEmergency[open]{
  padding-bottom:3px;
}
@media (orientation:landscape) and (max-height:700px){
  #start .identityAccountHelp{
    box-sizing:border-box;
    max-height:calc(100dvh - 92px);
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
  #start .identityAccountHelp p{
    font-size:10px;
    line-height:1.18;
  }
  #start .identityLinkCodeArea{padding:5px;margin-top:4px}
}


/* EASY CROSS-BROWSER LINK
   Primary path is a short-lived one-time URL carried in the URL fragment.
   Manual code remains available as a backup. */
#start .identityEasyLinkActions{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  justify-content:center;
  margin:6px 0 3px;
}
#start .identityEasyLinkActions button{
  flex:1 1 150px;
  max-width:220px;
}
#start .identityManualCode{
  margin:5px auto 0;
  font-size:10px;
  color:#596d50;
}
#start .identityManualCode summary{
  cursor:pointer;
  font-weight:800;
  text-decoration:underline;
}
#start .identityManualCode:not([open]) + p{
  margin-top:5px;
}
@media (orientation:landscape) and (max-height:700px){
  #start .identityEasyLinkActions{gap:4px;margin:4px 0 2px}
  #start .identityEasyLinkActions button{
    flex:1 1 132px;
    padding:5px 7px;
    font-size:10px;
  }
  #start .identityManualCode{font-size:9px}
}