/* UI_27 — public landing page. Keep all rules inside authScreen so play is unchanged. */
#authScreen {
  --landing-gold: #e2c38a;
  --landing-ink: #f1eee3;
  --landing-muted: #b5c2b7;
  --landing-line: #bdc7a829;
  display: block;
  position: absolute;
  inset: 0;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scroll-behavior: smooth;
  scroll-padding: 28px;
  touch-action: pan-y pinch-zoom;
  color: var(--landing-ink);
  background: radial-gradient(ellipse 80% 640px at 78% 15%, #2747366e, transparent), linear-gradient(125deg, #0a1813 5%, #142820 48%, #0b1915 100%);
  scrollbar-color: #7b8161 #101f19;
  font: 15px/1.7 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
#authScreen *, #authScreen *::before, #authScreen *::after { box-sizing: border-box; }
#authScreen a { color: inherit; text-decoration: none; }
#authScreen a:focus-visible, #authScreen summary:focus-visible { outline: 2px solid var(--landing-gold); outline-offset: 6px; }
#authScreen h1, #authScreen h2, #authScreen h3, #authScreen p, #authScreen figure { margin: 0; }
#authScreen h2 { font: normal clamp(28px, 3vw, 38px)/1.2 Georgia, "Times New Roman", serif; letter-spacing: -.7px; color: var(--landing-ink); }
#authScreen h3 { font: normal 21px/1.3 Georgia, "Times New Roman", serif; color: var(--landing-ink); }
#authScreen .landing-shell { width: min(1240px, 100%); margin: 0 auto; padding: 0 44px; }
#authScreen .landing-header { min-height: 105px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--landing-line); }
#authScreen .landing-brand { display: flex; align-items: center; gap: 13px; color: var(--landing-gold); }
#authScreen .landing-brand > span { font: 14px/1.15 Georgia, serif; letter-spacing: 2px; }
#authScreen .landing-brand small { display: block; margin-top: 5px; font: 9px/1.1 system-ui, sans-serif; letter-spacing: 5.8px; }
#authScreen .landing-brand svg { flex: 0 0 auto; }
#authScreen .landing-nav { display: flex; gap: 30px; align-items: center; font-size: 13px; }
#authScreen .landing-nav a { padding: 11px 0; color: #c5cdbf; }
#authScreen .landing-nav a:hover, #authScreen .landing-text-link:hover, #authScreen .landing-footer a:hover { color: #f6deb1; }
#authScreen .landing-nav .landing-nav-play { padding: 9px 18px; border: 1px solid #bda77877; border-radius: 3px; color: #f0d6a5; }
#authScreen .landing-nav-play span { margin-left: 15px; }
#authScreen .landing-hero { display: grid; grid-template-columns: minmax(0, 1.34fr) minmax(340px, .9fr); gap: clamp(30px, 7vw, 104px); align-items: center; padding: 72px 0 76px; }
#authScreen .landing-intro { min-width: 0; }
#authScreen .landing-kicker { font: 600 10px/1.6 system-ui, sans-serif; color: var(--landing-gold); letter-spacing: 1.8px; }
#authScreen .landing-intro > .landing-kicker { display: flex; align-items: center; gap: 10px; }
#authScreen .landing-kicker > span { width: 6px; height: 6px; display: inline-block; border: 1px solid #d5b776; transform: rotate(45deg); flex: 0 0 auto; }
#authScreen .landing-intro h1 { font: normal clamp(60px, 6.8vw, 91px)/1.05 Georgia, "Times New Roman", serif; letter-spacing: -3.8px; margin: 24px 0 22px; }
#authScreen .landing-intro h1 em { display: block; color: var(--landing-gold); font-weight: normal; }
#authScreen .landing-title-detail { display: block; margin-top: 20px; font: normal clamp(20px, 2.3vw, 27px)/1.4 Georgia, serif; letter-spacing: -.3px; color: var(--landing-ink); }
#authScreen .landing-dnd .landing-section-heading { margin-top: 16px; }
#authScreen .landing-dnd-lead { max-width: 800px; margin-bottom: 28px; color: var(--landing-muted); }
#authScreen .landing-dnd-note { margin-top: 20px; max-width: 800px; color: var(--landing-muted); font-size: 12px; }
#authScreen .landing-subtitle { font: normal 21px/1.5 Georgia, serif; color: #e4e5d7; }
#authScreen .landing-lead { max-width: 485px; color: var(--landing-muted); font-size: 15px; line-height: 1.85; margin-top: 16px; }
#authScreen .landing-cta { display: inline-flex; gap: 30px; align-items: center; justify-content: space-between; background: linear-gradient(130deg, #edcf99, #caa66a); color: #17291e; border: 1px solid #f3d9a2; border-radius: 3px; padding: 12px 21px; margin-top: 29px; font-size: 13px; font-weight: 650; box-shadow: 0 7px 26px #0002; }
#authScreen .landing-cta span { font-size: 22px; font-weight: 400; line-height: 1; }
#authScreen .landing-cta:hover { filter: brightness(1.09); }
#authScreen .landing-platforms { color: #9eaf9f; font-size: 11px; margin-top: 16px; }
#authScreen .landing-platforms span { padding: 0 7px; color: #728674; }
#authScreen .landing-login { width: 100%; max-width: none; padding: 36px 30px 23px; margin: 0; align-self: center; background: linear-gradient(145deg, #26372aed, #15241ded); border: 1px solid #b29d685c; border-radius: 4px; box-shadow: 0 25px 60px #0003, inset 0 0 0 5px #10251c44; scroll-margin-top: 28px; }
#authScreen .landing-login-ornament { position: absolute; top: -18px; left: calc(50% - 18px); width: 36px; height: 36px; background: #1e3326; display: grid; place-items: center; color: #dbbd7f; font: 24px Georgia, serif; }
#authScreen .landing-login > .eyebrow { font-size: 8px; letter-spacing: 1.35px; color: #d9bf8b; text-align: center; }
#authScreen .landing-login h2 { font-size: 31px; text-align: center; margin: 14px 0 12px; }
#authScreen .landing-login .muted { font: 12px/1.8 system-ui, sans-serif; color: var(--landing-muted); text-align: center; margin: 0 0 19px; }
#authScreen .google-sign-in { margin-top: 16px; }
#authScreen .google-help, #authScreen .google-status { font-size: 12px; line-height: 1.65; margin: 12px 0; }
#authScreen #googleIntro { border-top: 1px solid var(--landing-line); padding-top: 17px; margin-top: 20px; color: #a8b8a8; }
#authScreen .google-status:empty { display: none; }
#authScreen .google-status.error { color: #ffc09f; }
#authScreen .auth-error { margin: 10px 0; }
#authScreen .auth-error:empty { display: none; }
#authScreen .auth-foot { margin-top: 20px; font: 8px/1.5 system-ui, sans-serif; letter-spacing: 1.1px; color: #8fa48f; text-align: center; }
#authScreen .google-roster-heading h3, #authScreen #googleProfile h3 { margin: 12px 0 8px; }
#authScreen .google-character, #authScreen .class-option { min-width: 0; }
#authScreen .google-character strong { font: 600 14px system-ui, sans-serif; }
#authScreen .google-character span { font: 11px system-ui, sans-serif; }
#authScreen .google-secondary { min-height: 42px; }
#authScreen .class-option { min-height: 68px; }
#authScreen .app-auth-actions { padding-top: 13px; margin-top: 16px; border-top: 1px solid var(--landing-line); }
#authScreen .landing-noscript { font-size: 12px; line-height: 1.7; color: #e7c995; padding-top: 16px; }
#authScreen .landing-section { padding: 58px 0; border-top: 1px solid var(--landing-line); }
#authScreen .landing-section-label { display: flex; align-items: center; gap: 19px; color: #a7b39f; font: 10px/1.5 system-ui, sans-serif; letter-spacing: 1.3px; margin-bottom: 32px; }
#authScreen .landing-section-label > span:first-child { color: var(--landing-gold); flex: 0 0 auto; }
#authScreen .landing-section-rule { height: 1px; background: var(--landing-line); flex: 1; }
#authScreen .landing-world-grid { display: grid; grid-template-columns: minmax(0, 1.28fr) minmax(0, 1fr); gap: 47px; align-items: center; }
#authScreen .landing-screenshot { min-width: 0; border: 1px solid #b9a37566; padding: 6px; background: #09150f; box-shadow: 0 12px 30px #0003; transform: rotate(-.7deg); }
#authScreen .landing-screenshot img { display: block; width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; }
#authScreen .landing-screenshot figcaption { display: flex; gap: 7px; align-items: center; padding: 12px 7px 6px; font: 8px/1.4 system-ui, sans-serif; letter-spacing: 1.2px; color: #adc0a6; }
#authScreen .landing-screenshot figcaption > span:last-child { margin-left: auto; letter-spacing: .5px; color: #d5bb86; }
#authScreen .landing-caption-dot { width: 4px; height: 4px; background: #b7c489; border-radius: 50%; }
#authScreen .landing-world-copy p { color: var(--landing-muted); font-size: 13px; line-height: 1.8; margin-top: 18px; }
#authScreen .landing-text-link { display: inline-flex; gap: 22px; align-items: center; color: var(--landing-gold); font-size: 12px; padding: 8px 0; margin-top: 13px; border-bottom: 1px solid #ad97644a; }
#authScreen .landing-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 48px; padding-top: 30px; border-top: 1px solid var(--landing-line); }
#authScreen .landing-features article { display: flex; gap: 16px; }
#authScreen .landing-feature-number { font: italic 25px/1.35 Georgia, serif; color: #b5a170; }
#authScreen .landing-features h3 { font-size: 20px; }
#authScreen .landing-features p { font-size: 12px; line-height: 1.8; margin-top: 8px; color: var(--landing-muted); }
#authScreen .landing-section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin-bottom: 34px; }
#authScreen .landing-section-heading > p { font-size: 12px; line-height: 1.8; color: var(--landing-muted); }
#authScreen .landing-class-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
#authScreen .landing-class { padding: 4px 24px 0; border-left: 1px solid var(--landing-line); }
#authScreen .landing-class:first-child { padding-left: 0; border: 0; }
#authScreen .landing-class:last-child { padding-right: 0; }
#authScreen .landing-class > img { display: block; margin-bottom: 20px; width: 58px; height: 58px; }
#authScreen .landing-class .landing-class-role { font: 600 8px/1.6 system-ui, sans-serif; letter-spacing: 1.3px; color: #bba679; margin: 0 0 8px; }
#authScreen .landing-class h3 { font-size: 25px; }
#authScreen .landing-class p { font-size: 12px; line-height: 1.85; color: var(--landing-muted); margin-top: 12px; }
#authScreen .landing-start { display: grid; grid-template-columns: 1fr 1.1fr; gap: 65px; align-items: center; }
#authScreen .landing-start h2 { margin-top: 14px; }
#authScreen .landing-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 21px; }
#authScreen .landing-steps li { display: flex; gap: 22px; }
#authScreen .landing-steps li > span { font: 20px/1.3 Georgia, serif; color: #bca371; }
#authScreen .landing-steps h3 { font: 600 13px/1.6 system-ui, sans-serif; }
#authScreen .landing-steps p { font-size: 12px; line-height: 1.7; margin-top: 5px; color: var(--landing-muted); }
#authScreen .landing-guide-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
#authScreen .landing-guide-grid article { padding: 24px; border: 1px solid var(--landing-line); border-radius: 3px; background: #15261e88; }
#authScreen .landing-guide-grid h3 a:hover { color: var(--landing-gold); }
#authScreen .landing-guide-grid p { margin-top: 14px; font-size: 13px; line-height: 1.8; color: var(--landing-muted); }
#authScreen .landing-guide-grid .landing-text-link { font-size: 12px; }
#authScreen .landing-classes > .landing-text-link { margin-top: 28px; }
#authScreen .landing-gallery-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 24px; }
#authScreen .landing-gallery-card { min-width: 0; border: 1px solid var(--landing-line); border-radius: 3px; background: #15261e88; }
#authScreen .landing-gallery-card > a { display: block; margin: 5px; background: #09150f; }
#authScreen .landing-gallery-card > a:hover { outline: 1px solid var(--landing-gold); }
#authScreen .landing-gallery-card > a:focus-visible { outline-offset: 3px; }
#authScreen .landing-gallery-card img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }
#authScreen .landing-gallery-card figcaption { padding: 13px 17px 18px; }
#authScreen .landing-gallery-card figcaption strong { display: block; color: var(--landing-ink); font: normal 21px/1.35 Georgia, serif; }
#authScreen .landing-gallery-card figcaption span { display: block; margin-top: 6px; color: var(--landing-muted); font-size: 12px; line-height: 1.7; }
#authScreen .landing-bottom-grid { display: grid; grid-template-columns: 1.22fr 1fr; gap: 70px; align-items: start; }
#authScreen .landing-faq h2 { margin: 12px 0 26px; }
#authScreen .landing-faq details { border-bottom: 1px solid var(--landing-line); padding: 17px 0; }
#authScreen .landing-faq summary { display: flex; gap: 20px; justify-content: space-between; align-items: baseline; list-style: none; font-size: 13px; font-weight: 550; cursor: pointer; }
#authScreen .landing-faq summary::-webkit-details-marker { display: none; }
#authScreen .landing-faq summary::after { content: '+'; color: var(--landing-gold); font: 20px Georgia, serif; }
#authScreen .landing-faq details[open] summary::after { content: '−'; }
#authScreen .landing-faq details p { font-size: 12px; line-height: 1.85; color: var(--landing-muted); margin: 13px 22px 4px 0; }
#authScreen .landing-ranking { width: 100%; max-width: none; margin: 0; padding: 27px; background: #15261e88; border: 1px solid var(--landing-line); border-radius: 3px; }
#authScreen .landing-ranking h2 { font-size: 27px; margin: 10px 0 24px; }
#authScreen .ranking-heading { font-size: 9px; letter-spacing: 1px; flex-wrap: wrap; gap: 5px 12px; color: #bbcca9; }
#authScreen .ranking-heading small { font-size: 9px; }
#authScreen .ranking-list { margin-top: 15px; max-height: 262px; font: 12px/1.6 system-ui, sans-serif; }
#authScreen .ranking-row { padding: 9px 0; }
#authScreen .landing-footer { border-top: 1px solid var(--landing-line); padding: 26px 0 35px; display: flex; align-items: center; justify-content: space-between; gap: 20px; font-size: 10px; color: #95a58f; }
#authScreen .landing-footer > span > span { margin: 0 8px; }
#authScreen .landing-footer a { padding: 8px 0; }
#authScreen .landing-footer a span { color: #bfa879; margin-left: 12px; }
@media (max-width: 1000px) {
  #authScreen .landing-shell { padding: 0 30px; }
  #authScreen .landing-hero { grid-template-columns: minmax(0, 1fr) minmax(310px, .9fr); gap: 32px; padding: 60px 0; }
  #authScreen .landing-intro h1 { font-size: 68px; }
  #authScreen .landing-login { padding: 31px 22px 22px; }
  #authScreen .landing-subtitle { font-size: 18px; }
  #authScreen .landing-lead { font-size: 13px; }
  #authScreen .landing-world-grid { gap: 30px; }
  #authScreen .landing-world-copy h2 { font-size: 30px; }
  #authScreen .landing-class { padding: 4px 17px 0; }
  #authScreen .landing-bottom-grid { gap: 35px; }
}
@media (max-width: 760px) {
  #authScreen { scroll-padding: 18px; }
  #authScreen .landing-shell { padding: 0 24px; }
  #authScreen .landing-header { min-height: 85px; }
  #authScreen .landing-nav { gap: 20px; font-size: 12px; }
  #authScreen .landing-nav a[href="#swiat"] { display: none; }
  #authScreen .landing-hero { grid-template-columns: 1fr; gap: 42px; padding: 42px 0 48px; }
  #authScreen .landing-intro { max-width: 520px; }
  #authScreen .landing-intro h1 { font-size: clamp(56px, 11vw, 76px); margin: 20px 0 18px; letter-spacing: -2.8px; }
  #authScreen .landing-intro h1 em { display: inline; }
  #authScreen .landing-subtitle { font-size: 20px; }
  #authScreen .landing-lead { font-size: 14px; }
  #authScreen .landing-cta { margin-top: 22px; }
  #authScreen .landing-login { max-width: 520px; padding: 30px 25px 23px; scroll-margin-top: 18px; }
  #authScreen .landing-login h2 { font-size: 30px; }
  #authScreen .landing-section { padding: 40px 0; }
  #authScreen .landing-section-label { margin-bottom: 25px; font-size: 9px; gap: 12px; }
  #authScreen .landing-section-label > span:last-child { display: none; }
  #authScreen .landing-world-grid { grid-template-columns: 1fr; gap: 27px; }
  #authScreen .landing-world-copy { max-width: 550px; }
  #authScreen .landing-world-copy h2 { font-size: 32px; }
  #authScreen .landing-world-copy p { font-size: 13px; }
  #authScreen .landing-features { grid-template-columns: 1fr; gap: 22px; margin-top: 31px; padding-top: 27px; }
  #authScreen .landing-feature-number { min-width: 25px; }
  #authScreen .landing-features p { margin-top: 5px; }
  #authScreen .landing-section-heading { display: block; margin-bottom: 30px; }
  #authScreen .landing-section-heading > p { margin-top: 12px; }
  #authScreen .landing-class-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
  #authScreen .landing-class { padding: 0 20px; }
  #authScreen .landing-class:nth-child(odd) { padding-left: 0; border: 0; }
  #authScreen .landing-class:nth-child(even) { padding-right: 0; }
  #authScreen .landing-class > img { margin-bottom: 16px; }
  #authScreen .landing-start { grid-template-columns: 1fr; gap: 30px; }
  #authScreen .landing-guide-grid { grid-template-columns: 1fr; gap: 18px; }
  #authScreen .landing-gallery-grid { grid-template-columns: 1fr; gap: 22px; }
  #authScreen .landing-bottom-grid { grid-template-columns: 1fr; gap: 35px; }
  #authScreen .landing-faq h2 { margin-bottom: 17px; }
  #authScreen .landing-ranking { padding: 24px; }
  #authScreen .ranking-list { max-height: 235px; }
}
@media (max-width: 430px) {
  #authScreen .landing-shell { padding: 0 20px; }
  #authScreen .landing-header { min-height: 78px; gap: 12px; }
  #authScreen .landing-brand { gap: 8px; }
  #authScreen .landing-brand > span { font-size: 11px; letter-spacing: 1.6px; }
  #authScreen .landing-brand small { font-size: 8px; letter-spacing: 4.2px; }
  #authScreen .landing-brand svg { width: 25px; height: 34px; }
  #authScreen .landing-nav { gap: 17px; }
  #authScreen .landing-nav a[href="#klasy"] { display: none; }
  #authScreen .landing-nav .landing-nav-play { padding: 8px 12px; }
  #authScreen .landing-nav-play span { margin-left: 8px; }
  #authScreen .landing-hero { padding-top: 34px; gap: 36px; }
  #authScreen .landing-kicker { font-size: 8px; letter-spacing: 1.45px; }
  #authScreen .landing-intro h1 { font-size: 59px; line-height: 1.04; letter-spacing: -2.8px; }
  #authScreen .landing-intro h1 em { display: block; }
  #authScreen .landing-subtitle { font-size: 18px; max-width: 300px; }
  #authScreen .landing-lead { font-size: 13px; line-height: 1.8; }
  #authScreen .landing-platforms { font-size: 10px; }
  #authScreen .landing-platforms span { padding: 0 4px; }
  #authScreen .landing-login { padding: 28px 18px 21px; }
  #authScreen .landing-login > .eyebrow { font-size: 7px; letter-spacing: 1.15px; }
  #authScreen .landing-login h2 { font-size: 29px; }
  #authScreen .landing-login .muted { font-size: 11px; }
  #authScreen .landing-class { padding: 0 14px; }
  #authScreen .landing-class .landing-class-role { font-size: 7px; letter-spacing: .8px; }
  #authScreen .landing-class p { font-size: 11px; }
  #authScreen .landing-class h3 { font-size: 24px; }
  #authScreen .landing-footer { display: block; }
  #authScreen .landing-footer > span { display: block; }
  #authScreen .landing-footer a { display: inline-block; margin-top: 7px; }
}
@media (max-width: 350px) {
  #authScreen .landing-shell { padding: 0 15px; }
  #authScreen .landing-nav { gap: 10px; font-size: 11px; }
  #authScreen .landing-nav .landing-nav-play { padding: 7px 10px; }
  #authScreen .landing-login { padding-left: 14px; padding-right: 14px; }
  #authScreen .landing-intro h1 { font-size: 56px; }
  #authScreen .landing-cta { width: 100%; }
  #authScreen .class-option { padding-left: 7px; padding-right: 7px; grid-template-columns: 20px 1fr; column-gap: 4px; }
  #authScreen .class-option strong { font-size: 11px; }
  #authScreen .class-option small { font-size: 8px; }
  #authScreen .class-option > span { font-size: 20px; }
  #authScreen .google-roster-heading { gap: 6px; }
  #authScreen .google-roster-heading h3 { font-size: 20px; }
  #authScreen .landing-ranking { padding: 19px; }
}
@media (prefers-reduced-motion: reduce) { #authScreen { scroll-behavior: auto; } }