/* Readability and document layout. These are design choices, not AdSense font rules. */
:root{--muted:#a7b8c2;--line:#344550;--small-text:.75rem;--body-text:1rem}
body{font-size:var(--body-text);line-height:1.7}
:focus-visible{outline:2px solid var(--mint);outline-offset:5px}
:target{scroll-margin-top:24px}
.skip-link{position:absolute;left:16px;top:-100px;z-index:20;background:var(--mint);color:#102b2a;padding:12px 20px;border-radius:6px;font-weight:600}
.skip-link:focus{top:12px}
.site-header{height:auto;min-height:98px;gap:24px;padding-top:20px;padding-bottom:20px}
.site-header .brand{font-size:.875rem;letter-spacing:1.3px;flex-shrink:0}
.site-header nav{gap:24px;flex-wrap:wrap;justify-content:flex-end}
.site-header nav a,footer nav a{font-size:.875rem;min-height:44px;display:inline-flex;align-items:center;color:#b3c5cc}
.site-header nav a:hover,footer nav a:hover{color:var(--mint);text-decoration:underline;text-underline-offset:5px}
.site-header nav a[aria-current=page]{color:var(--mint);text-decoration:underline;text-underline-offset:8px}
.site-header .solo{font-size:var(--small-text);letter-spacing:.8px}
.eyebrow,.step{font-size:var(--small-text);letter-spacing:1.4px}
h1{font-size:clamp(2rem,4vw,3.25rem)}
h2{font-size:clamp(1.75rem,3vw,2.25rem)}
h3{font-size:1.125rem;line-height:1.4;font-weight:600}
.intro p:last-child{font-size:var(--body-text);max-width:650px}
.edition,.edition small{font-size:var(--small-text);letter-spacing:1px}
.section-heading p:last-child,article p,.notes p:not(.eyebrow),details p{font-size:var(--body-text);line-height:1.8;color:var(--muted)}
.guide{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.guide .section-heading{grid-column:1/-1;display:grid;grid-template-columns:1.1fr 1fr;gap:0 50px}
.guide .section-heading .eyebrow{grid-column:1/-1}
.guide .section-heading h2{margin-bottom:0}
.guide .section-heading p:last-child{margin:0;align-self:center}
.guide article{padding:24px;border:1px solid var(--line);border-radius:12px;background:#12212f55}
.guide-symbol{height:72px}
.guide article p{margin-bottom:0}
.guide-more{grid-column:1/-1;margin:0}
.text-link,.prose a:not(.primary){color:var(--mint);text-decoration:underline;text-underline-offset:4px}
.text-link{display:inline-block;min-height:44px;line-height:44px}
.text-link:hover,.prose a:hover{color:#e0fff0}
.notes,.game-story{gap:60px}
.game-story{display:grid;grid-template-columns:1fr 1.3fr;padding:54px 0;border-bottom:1px solid var(--line)}
.game-story p:not(.eyebrow){color:var(--muted);line-height:1.8}
.faq{max-width:900px}
summary{font-size:var(--body-text);min-height:32px}
details{padding:18px 0}
.game-caption,.game-caption>span:last-child{font-size:var(--small-text);letter-spacing:.3px;color:#a5b9c2}
footer{gap:24px;flex-wrap:wrap}
footer .brand{font-size:.875rem;letter-spacing:1px}
footer>span{font-size:var(--small-text)}
footer nav{gap:22px;flex-wrap:wrap}
.noscript-note{max-width:900px;margin:24px auto;padding:24px;color:var(--text);background:#172c38;border:1px solid var(--line)}

/* Allow text and the character studio to grow without clipping at large zoom. */
.game.customizing{height:auto;min-height:0}
.customizing #arena{position:absolute;inset:0}
.customizing .overlay{position:relative;padding:66px 32px 32px}
.arrival{width:min(940px,100%)}
.arrival-heading .eyebrow{font-size:var(--small-text);letter-spacing:1.2px}
.arrival-heading h2{font-size:clamp(1.75rem,3vw,2.5rem)}
.arrival-heading>p:last-child{font-size:var(--body-text);color:#adbec7}
.arrival-options{padding:28px}
.arrival-body{grid-template-columns:.9fr 1.1fr}
.stage-label,.specimen,.stage-footer{font-size:var(--small-text);letter-spacing:1px;color:#acc1c8}
.stage-footer{justify-content:center;font-size:var(--small-text);letter-spacing:0;text-align:center}
#style-description{font-size:.9375rem;color:#afc2ca}
.name-label label,.style-picker legend{font-size:var(--small-text);color:#a4bcc1;letter-spacing:.4px}
.name-label label span,.style-picker legend span{font-size:.875rem}
#name-count{font-size:var(--small-text);color:#b2c1c8}
#avatar-name{font-size:1rem;min-height:48px}
#avatar-name::placeholder{color:#a6b8c2}
#name-hint,.cosmetic-note{font-size:var(--small-text);color:#a9bdc6}
.avatar-tile>span:not(.selection-check){font-size:.875rem;color:#bacbd1}
.avatar-tile{padding-bottom:10px}
.selection-check{font-size:.875rem}
.launch,.primary{font-size:1rem;min-height:48px}
.arrival-footnote{font-size:var(--small-text);gap:4px 10px;letter-spacing:0;flex-wrap:wrap;white-space:normal;line-height:1.5;color:#b1c2c7}
.arrival-footnote span+span::before{margin-right:10px}
.arrival-controls{font-size:var(--small-text);color:#a6bac4;gap:8px 24px;flex-wrap:wrap}
.arrival-controls b{color:#d7e6e5}
.secondary{font-size:.875rem;min-height:44px}
.customizing #sound,.icon-button,.top-controls .icon-button{width:44px;height:44px}
.stats .eyebrow,.stats small,#rank,.tide,.tide small,.leaderboard .eyebrow,.leaderboard li,.garden-label,.garden-label small,.burst small,#notice{font-size:var(--small-text);letter-spacing:0;color:#b6c9cf}
.stats strong{font-size:1.75rem}
.stats .eyebrow,.garden-label{color:#cbe5db}
.leaderboard{width:170px;top:98px}
.leaderboard .eyebrow{letter-spacing:.4px;line-height:1.4}
.leaderboard li{gap:8px;line-height:1.45}
.burst{font-size:.875rem;min-height:64px}
.tide{letter-spacing:.5px}
.panel .eyebrow,.best,.panel-help{font-size:var(--small-text);color:#b0c5c7;letter-spacing:1px}
.panel>p:not(.eyebrow):not(.best){font-size:var(--body-text)}
.panel{max-width:560px}
.game:not(.customizing) .overlay{overflow:auto;padding:72px 0 28px}
.game:not(.customizing) .panel{margin:auto}

/* Linked, crawlable pages with an intentionally comfortable reading width. */
.document-heading{padding:60px 0 42px;border-bottom:1px solid var(--line);margin-bottom:40px}
.document-heading>p:last-child{max-width:730px;font-size:1.125rem;color:var(--muted);margin-bottom:0}
.document-heading h1{margin:0 0 20px}
.document-layout{display:grid;grid-template-columns:220px minmax(0,760px);gap:64px;justify-content:center}
.contents{display:flex;flex-direction:column;gap:4px;align-items:stretch;align-self:start;position:sticky;top:24px;padding:8px 0 24px}
.contents a{font-size:.9375rem;color:#b3c6cd;min-height:44px;padding:8px 0}
.contents a:hover{color:var(--mint);text-decoration:underline}
.prose{min-width:0;padding:0 0 60px}
.prose-centered{max-width:760px;margin:auto}
.prose section{margin:0 0 38px}
.prose h2{font-size:1.75rem;margin-bottom:18px;line-height:1.3}
.prose h3{margin:28px 0 10px}
.prose p{font-size:1rem;line-height:1.8;color:var(--muted);margin:0 0 18px}
.prose li{margin-bottom:10px;color:var(--muted)}
.prose strong{color:#e6f1eb}
.table-scroll{overflow-x:auto;max-width:100%;border:1px solid var(--line);border-radius:10px;margin:24px 0}
table{border-collapse:collapse;width:100%;font-size:.9375rem;text-align:left}
th,td{padding:15px 18px;vertical-align:top;border-bottom:1px solid var(--line)}
th{color:#d5e8df;font-weight:500;background:#142532}
td{color:#b8c9d0}
tr:last-child td,tr:last-child th{border-bottom:0}
thead th{color:var(--mint);background:#192e39}
.reading-note,.report-card{border:1px solid #47665f;border-radius:12px;padding:24px;margin:24px 0;background:#132c30a0}
.reading-note p:last-child{margin-bottom:0}
.reading-note strong{display:block;margin-bottom:8px}
.inline-cta{display:inline-flex;align-items:center;justify-content:center;color:#102b2a;margin:10px 0 0;max-width:100%;text-align:center}
.report-card label{display:block;margin-bottom:12px;font-size:1rem;color:#e3f3ea}
.report-card textarea{width:100%;resize:vertical;min-height:220px;background:#091924;color:#dceee4;font:1rem/1.7 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;padding:14px;border:1px solid #648780;border-radius:8px;margin-bottom:14px}
.utility-button{background:#a5ebce;color:#102b2a;border:0;border-radius:7px;padding:12px 18px;font:600 .9375rem/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;min-height:48px}
.utility-button:hover{background:#c7ffe8}
.data-actions{display:flex;gap:12px;flex-wrap:wrap;margin:20px 0}
#data-status,#report-status{font-size:.875rem;margin:14px 0 0;color:#b9d1d0}
@media(max-width:1050px){.site-header nav{gap:18px}.site-header .solo{display:none}.document-layout{grid-template-columns:180px minmax(0,1fr);gap:35px}.game-caption>span:last-child{display:none}.notes,.game-story{gap:36px}.guide article{padding:20px}}
@media(max-width:760px){
  main,.site-header,footer{padding-left:20px;padding-right:20px}
  .site-header{flex-direction:column;align-items:flex-start;gap:6px;padding-top:14px;padding-bottom:10px;min-height:0}
  .site-header .brand{font-size:.875rem}
  .site-header nav{justify-content:flex-start;gap:24px;width:100%}
  .site-header nav a{font-size:.875rem}
  .intro{padding:28px 0}
  .intro p:last-child{font-size:1rem;max-width:none}
  .guide{grid-template-columns:1fr;gap:20px;padding:38px 0}
  .guide .section-heading{display:block}
  .guide .section-heading h2{margin-bottom:18px}
  .guide article{padding:22px 22px 22px 75px}
  .guide article .guide-symbol{left:20px;top:28px;font-size:38px}
  .step{font-size:var(--small-text)}
  .notes,.game-story{grid-template-columns:1fr;gap:12px;padding:38px 0}
  .game-story h2{margin-bottom:12px}
  .customizing .overlay{padding:64px 14px 24px}
  .arrival-heading .eyebrow{font-size:var(--small-text);letter-spacing:.6px}
  .arrival-heading>p:last-child{font-size:1rem;max-width:310px}
  .arrival-heading h2{max-width:320px;font-size:1.875rem}
  .arrival-body{grid-template-columns:1fr}
  .arrival-options{padding:22px 16px}
  .name-label{gap:8px;align-items:flex-start}
  .name-label label span{margin-left:4px}
  .stage-label,.specimen{font-size:var(--small-text)}
  #style-description{font-size:.9375rem}
  .avatar-tile>span:not(.selection-check){font-size:.875rem}
  .arrival-footnote{font-size:var(--small-text);gap:4px 8px;letter-spacing:0;white-space:normal}
  .arrival-controls{font-size:var(--small-text);gap:6px 16px}
  .stage-footer{display:none}
  .leaderboard{right:14px;top:78px;width:130px}
  .leaderboard .eyebrow{font-size:.75rem}
  .leaderboard li{font-size:.75rem;margin:6px 0}
  .tide{max-width:130px;top:98px;font-size:.75rem}
  .tide>span{font-size:18px}
  .tide small{font-size:.75rem}
  #rank{font-size:.75rem}
  .bottom-hud{left:14px;right:14px}
  .burst{min-width:170px;gap:8px;padding:10px}
  .burst small{font-size:.75rem}
  .garden-label{display:none}
  .bottom-hud{justify-content:flex-end}
  #joystick{left:17px;width:82px;height:82px}
  #joystick span{left:25px;top:25px}
  #notice{top:240px;font-size:.75rem;width:90%;white-space:normal}
  .panel h2{font-size:2.5rem}
  .panel .eyebrow,.best{font-size:.75rem}
  .panel>p:not(.eyebrow):not(.best){font-size:1rem}
  .game-caption{font-size:.75rem}
  footer{gap:12px;padding-top:24px;padding-bottom:24px}
  footer nav{gap:20px}
  footer nav a{font-size:.875rem}
  .document-heading{padding:36px 0 28px;margin-bottom:28px}
  .document-heading>p:last-child{font-size:1rem}
  .document-layout{display:block}
  .contents{position:static;display:grid;grid-template-columns:1fr 1fr;gap:4px 20px;border-bottom:1px solid var(--line);margin-bottom:30px}
  .contents .eyebrow{grid-column:1/-1}
  .contents a{font-size:.875rem}
  .prose h2{font-size:1.5rem}
  th,td{padding:12px;font-size:.875rem}
  .reading-note,.report-card{padding:18px}
}
@media(max-width:360px){
  .customizing .overlay{padding-left:10px;padding-right:10px}
  .arrival-options{padding:20px 12px}
  .name-label{flex-wrap:wrap}
  .name-label label{flex-basis:100%}
  #name-count{margin-left:auto}
  .arrival-footnote span+span::before{display:none}
  .arrival-footnote{gap:5px 14px}
  .burst{min-width:158px;font-size:.8125rem}
  #joystick{width:76px;height:76px;left:12px}
  #joystick span{left:22px;top:22px}
  .leaderboard{width:112px}
  .stats{max-width:110px}
  .tide{max-width:120px}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

/* A shorter entrance and fewer repeated marketing sections. */
.intro{padding:28px 0 22px;gap:30px}
.intro h1{font-size:2.5rem;letter-spacing:-1px;margin:0 0 7px}
.intro p:last-child{max-width:none}
.game-mode{font-size:.875rem;color:#afc4cb;white-space:nowrap}
.customizing .overlay{padding:30px}
.arrival{max-width:880px}
.arrival-heading{text-align:left;margin:0 55px 18px 0}
.arrival-heading h2{font:1.25rem/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:0;margin:0;color:#d8e9e4}
.avatar-caption{text-align:center;min-width:0;width:100%}
#preview-name{display:block}
.specimen{display:block;margin-top:7px}
#style-description{font: .9375rem/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;margin:10px 0 0;min-height:2.8em}
.arrival-options{padding:24px}
.name-label label span{margin-left:0}
.name-label label .optional{font-size:.75rem;color:#a7bbc4}
.style-picker legend span{margin-left:0}
.cosmetic-note{margin:10px 0 0}
.arrival-footnote{text-transform:none;letter-spacing:0}
.arrival-footnote span+span::before{content:none}
.arrival-controls{margin-top:14px;text-align:center}
.touch-control-hint{display:none}
@media(pointer:coarse){.desktop-control-hint{display:none}.touch-control-hint{display:inline}}
.game-caption a,.faq a{color:var(--mint);text-decoration:underline;text-underline-offset:3px}
.game-caption a{font-size:.875rem;min-height:44px;padding-bottom:10px}
.quick-start{padding:44px 0;display:grid;grid-template-columns:1fr 1.5fr;gap:12px 64px;border-bottom:1px solid var(--line)}
.quick-start h2,.field-note h2{font-size:1.75rem;line-height:1.35;margin-bottom:14px}
.quick-start p{font-size:1rem;line-height:1.8;color:var(--muted);max-width:340px}
.quick-start ol{margin:0;padding-left:24px}
.quick-start li{padding:0 0 16px 8px;color:var(--muted);line-height:1.8}
.quick-start strong{color:#dceae5;font-weight:500}
.quick-start .text-link{grid-column:2}
.field-note{display:grid;grid-template-columns:1fr 1.5fr;gap:64px;border-bottom:1px solid var(--line);padding:42px 0}
.field-note p:not(.eyebrow){color:var(--muted);line-height:1.8}
.faq{max-width:none;padding:38px 0 50px}
.faq h2{font-size:1.75rem}
.document-heading{padding-top:42px}
.round-results dl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:22px 0 18px;border-top:1px solid #678b7940;border-bottom:1px solid #678b7940;padding:18px 0}
.round-results dt{font-size:.75rem;color:#acc1c9}
.round-results dd{margin:2px 0 0;font-size:1.25rem;color:#e1f0e7;font-variant-numeric:tabular-nums}
.round-results #round-tip{font-size:.875rem;color:#abc2ca;line-height:1.6;margin:0 0 15px}
.panel .panel-orbit{font-size:36px}
.panel .eyebrow{margin:8px 0 12px}
.panel h2{font-size:2.5rem;margin-bottom:12px}
@media(max-width:760px){
 .site-header{flex-direction:row;align-items:center;gap:10px;justify-content:space-between;flex-wrap:wrap;padding-top:10px;padding-bottom:10px}
 .site-header .brand{font-size:.75rem;letter-spacing:.5px;gap:5px}
 .site-header .brand-icon{font-size:26px}
 .site-header nav{width:auto;gap:16px}
 .site-header nav a{font-size:.875rem}
 .intro{padding:16px 0 14px;display:block}
 .intro h1{font-size:1.75rem;margin-bottom:4px}
 .intro p:last-child{font-size:.9375rem;line-height:1.5;max-width:320px}
 .game-mode{display:block;font-size:.75rem;margin-top:7px}
 .customizing .overlay{padding:18px 12px 14px}
 .customizing .top-controls{position:absolute;right:0;top:0}
 .customizing #sound{width:40px;height:40px}
 .arrival-heading{margin:0 40px 12px 0;text-align:left;min-height:30px;display:flex;align-items:center}
 .arrival-heading h2{font:1rem/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;margin:0;max-width:none}
 .avatar-stage{display:grid;grid-template-columns:120px minmax(0,1fr);gap:0;padding:6px 10px;min-height:90px}
 #avatar-preview{width:120px;height:auto;aspect-ratio:16/11;max-width:none;margin:0}
 .avatar-caption{text-align:left}
 #preview-name{font-size:1.125rem;min-height:0;line-height:1.3;overflow-wrap:anywhere;white-space:normal;max-height:2.6em}
 .specimen{font-size:.75rem;margin:3px 0 0;letter-spacing:.4px}
 #style-description{font-size:.75rem;line-height:1.4;margin:4px 0 0;min-height:0}
 .arrival-options{padding:12px}
 .name-label{margin-bottom:6px;flex-wrap:nowrap;align-items:center}
 .name-label label{flex-basis:auto}
 .name-label label span{font-size:.875rem}
 #name-count{font-size:.75rem;margin:0}
 #avatar-name{height:44px;min-height:44px}
 #name-hint{margin:5px 0 10px}
 .style-picker legend{margin-bottom:7px}
 .avatar-tile{padding-bottom:5px}
 .avatar-tile canvas{height:36px;width:46px}
 .avatar-tile>span:not(.selection-check){font-size:.75rem}
 .avatar-styles{gap:6px}
 .cosmetic-note{margin-top:8px;line-height:1.4}
 .launch{margin:10px 0 8px;min-height:46px;padding:10px 14px}
 .arrival-footnote{font-size:.75rem;line-height:1.4}
 .arrival-controls{font-size:.75rem;margin-top:10px;line-height:1.5}
 .game-caption{align-items:flex-start;gap:12px;line-height:1.5;padding-top:12px}
 .game-caption a{font-size:.75rem;white-space:nowrap}
 .quick-start,.field-note{grid-template-columns:1fr;gap:12px;padding:30px 0}
 .quick-start h2,.field-note h2,.faq h2{font-size:1.5rem}
 .quick-start p{max-width:none;margin-bottom:8px}
 .quick-start .text-link{grid-column:auto}
 .quick-start li{padding-bottom:14px}
 .field-note .eyebrow{margin-bottom:8px}
 .field-note h2{margin-bottom:4px}
 .field-note h2 br{display:none}
 .round-results dl{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
}
@media(max-width:360px){
 .site-header{gap:0;padding-top:6px;padding-bottom:6px}
 .site-header nav{gap:14px}
 .site-header .brand{font-size:.75rem;letter-spacing:0}
 .site-header .brand-icon{display:none}
 .site-header nav a{font-size:.75rem}
 .avatar-stage{grid-template-columns:100px minmax(0,1fr);padding:5px}
 #avatar-preview{width:100px}
 .arrival-options{padding:10px}
 .name-label label span{font-size:.8125rem}
 .name-label label .optional{font-size:.75rem}
}
@media(max-width:760px){.avatar-caption #style-description{text-align:left}}

/* Clearly marked, content-adjacent spaces for a future responsive ad unit. */
.ad-placement{min-height:128px;max-width:760px;margin:48px auto 56px;padding:22px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;border:1px dashed #40505f;border-radius:10px;background:linear-gradient(135deg,#0e1927,#111c2a);color:#91a1ad;text-align:center}
.ad-placement-label{font-size:12px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase}
.ad-placement-note{font-size:12px;line-height:1.5;color:#748795}
@media(max-width:760px){.ad-placement{min-height:108px;margin:34px auto 40px;padding:18px}}
.ad-placement[hidden]{display:none}