/* OTA's title and gameplay occupy the whole embedded viewport. */
html,body{height:100%;min-height:0;overflow:hidden}
.app{height:100dvh;min-height:0;padding:10px;overflow:hidden}
.app>.shell{width:min(100%,460px);height:100%;display:grid;place-items:center}
.app .view.active{grid-area:1/1;width:100%;max-height:100%;overflow-y:auto;overscroll-behavior:contain}
#home.card{height:100%;min-height:0;max-height:880px;padding:14px;gap:clamp(6px,1.2dvh,10px);overflow:hidden;justify-content:start}
#home .thread-title{width:clamp(100px,calc(100dvh - 485px),220px);max-width:60%;flex:0 0 auto}
#home .studio{margin:0;flex:0 0 auto;font-size:10px;letter-spacing:1.4px;line-height:1.4}
#home>.mode{flex:1;min-height:0;margin:0;padding-top:8px;padding-bottom:8px;row-gap:3px;border-radius:16px}
#home .mode strong{font-size:clamp(16px,2.7dvh,19px);line-height:1.2;letter-spacing:.7px}
#home .mode small{font-size:12px;line-height:1.3}
#home .mode .arrow{font-size:28px}
#home .home-collections{flex:0 0 82px;min-height:0;margin:0;gap:10px}
#home .home-collections .mode{min-height:0;padding:6px;gap:3px;border-radius:16px}
#home .home-collections .mode strong{font-size:16px}
#home .home-collections .mode small{font-size:12px}
#home .home-collections .mode::before{margin:0 auto}
#home .settings-button{top:12px;right:12px}
.game>#start{min-height:0}
#start .thread-title-logo{width:min(50vw,180px)}
.game>.card{max-height:none;overflow:visible;transform:translate(-50%,-50%) scale(var(--card-fit,1))}
.game>.card>p:not(.eyebrow){margin-top:10px;margin-bottom:12px}
.game>.card ul{gap:7px;margin-bottom:14px;padding:12px}
.thread-menu-overlay{padding:10px;overflow:hidden}
.thread-menu-shell{height:100%;display:grid;place-items:center}
.thread-menu-shell>.view.active{grid-area:1/1;width:100%;max-height:100%;overflow-y:auto}

/* Single-screen cards: compact layouts and paged content, never clipped controls. */
.app>.shell,.thread-menu-shell{grid-template-rows:minmax(0,1fr)}
.app .view.active,.thread-menu-shell>.view.active{max-height:none;overflow:visible;transform:scale(var(--card-fit,1));transform-origin:center;animation:none}
.app .view:not(#home),.thread-menu-shell>.view{padding:14px}
.ota-page-hidden{display:none!important}
.ota-pagination{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;margin-top:10px}
.ota-pagination[hidden]{display:none}
.ota-pagination>span{color:#c3d9ef;font:700 14px/1.3 system-ui;white-space:nowrap}
.ota-pagination>button,.ota-panel-tabs>button{min-width:0;min-height:44px;padding:8px;border:1px solid #859ad0;border-radius:11px;background:linear-gradient(135deg,#243857,#39254f);color:#e6f5ff;font:700 14px/1.25 system-ui;cursor:pointer}
.ota-pagination>button:disabled{opacity:.4;cursor:default}
.ota-pagination>button:focus-visible,.ota-panel-tabs>button:focus-visible{outline:2px solid #82ffea;outline-offset:2px}
.ota-panel-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-bottom:10px}
#powerups .ota-panel-tabs{grid-template-columns:repeat(3,minmax(0,1fr))}
.ota-panel-tabs>button[aria-pressed=true]{color:#091a2b;background:linear-gradient(120deg,#75e8f3,#c69aff);border-color:#e1eeff}
.app .guide-head,.thread-menu-shell .guide-head{margin-bottom:10px}
.app .action,.thread-menu-card .action{min-height:44px;font-size:14px;margin-top:8px}
.app .hero,.thread-menu-card .hero{padding:12px}
.app .hero h3,.thread-menu-card .hero h3{font-size:28px;line-height:1.15}
.app .hero p,.thread-menu-card .hero p{line-height:1.35}
#today .hero #daily-level-score{margin-top:6px}
#today .daily-frequencies{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px;row-gap:5px;margin-top:8px;padding-top:8px;font-size:12px;line-height:1.4}
#today .daily-frequencies .frequency-row{gap:4px}
#today .fingerprint{margin:10px 0;gap:6px}
#today .fingerprint>span{grid-template-rows:auto auto auto;padding:7px 4px;font-size:12px;letter-spacing:0}
#today .fingerprint>span::before{width:18px;height:18px;margin-bottom:4px}
#today .fingerprint b{font-size:16px;margin-top:4px}
#today .daily-streak{min-height:44px;margin:8px 0;padding:6px 8px;gap:3px 8px;font-size:12px}
#today .daily-streak small{font-size:12px}
#today .daily-note{margin:10px 0 0;font-size:12px;line-height:1.35}
#today .holiday{margin:8px 0 0;padding:8px;font-size:12px}
.score-sync-status,.leaderboard-status{font-size:12px;min-height:0;margin:6px 0}
#generate .hero{padding:8px}
#generated-rules{margin:8px 0;padding:8px;font-size:12px;line-height:1.35}
#generate .seed{margin:8px 0;padding:10px}
#generate .seed b{font-size:23px;margin:5px 0}
#generate .track-tools{margin-top:10px;gap:8px}
#generate .track-tools .action{min-height:44px;font-size:12px;padding:8px}
#generate .track-code-form,#generate .track-share-manual{padding:10px;margin-top:10px}
#generate .track-status{margin:8px 0 0}
#generate:has(#track-code-form:not([hidden]))>.hero,#generate:has(#track-code-form:not([hidden]))>#customize-track,#generate:has(#track-code-form:not([hidden]))>#generated-rules,#generate:has(#track-code-form:not([hidden]))>#new-seed,#generate:has(#track-code-form:not([hidden]))>.seed,#generate:has(#track-code-form:not([hidden]))>#play-generated{display:none}
#generate:has(#track-share-manual:not([hidden]))>.hero,#generate:has(#track-share-manual:not([hidden]))>#generated-rules{display:none}
#archive .row{padding-top:5px;padding-bottom:5px}
#archive .archive-list{max-height:none;overflow:visible}
#archive .archive-pagination{margin-top:12px}
#leaderboard .board{margin-top:6px;gap:2px}
#leaderboard .rank{padding-top:7px;padding-bottom:7px;font-size:14px}
#leaderboard .board-track{margin:6px 0}
#leaderboard .board-track select{padding:8px}
#leaderboard .board-yours{margin-top:8px}
#leaderboard .board-empty{padding:10px;margin:0;font-size:14px;line-height:1.4}
#leaderboard .board-actions{margin-top:10px}
#leaderboard .board-table{--score-column:76px}
#leaderboard .rank>:last-child{white-space:nowrap;font-size:12px}
#options .settings{padding:10px 2px}
#options .settings small{font-size:12px}
#options .option-actions{gap:10px;margin-top:10px}
#options .unlockables-entry{min-height:44px;margin:0}
#scoring .rank{font-size:14px;padding:8px 2px;grid-template-columns:26px minmax(0,1fr) auto}
#scoring .note{font-size:12px;line-height:1.35;margin:10px 0 0}
#achievements .progress-intro,#unlockables .progress-intro{font-size:13px;line-height:1.35;margin-bottom:10px}
#achievements .progress-stat{padding:6px 4px;gap:4px}
#achievements .progress-stat::before{margin-bottom:2px;width:18px;height:18px}
#achievements .streak-note{margin:8px 0;font-size:12px;line-height:1.35}
#achievements .unlockables-entry{min-height:44px;margin:8px 0 12px;padding:8px}
#achievements .achievement-list{gap:6px}
#achievements .achievement-group-title{margin:4px 0;font-size:12px}
#achievements .achievement{padding:9px;gap:9px;grid-template-columns:38px minmax(0,1fr)}
#achievements .achievement-icon{width:38px;height:46px}
#achievements .achievement-body p{margin:5px 0;line-height:1.3}
#achievements .achievement-count{margin-top:5px}
#achievements .progress-footnote{margin:10px 0 0;font-size:12px;line-height:1.35}
#unlockables .unlockable-count{margin:0 0 6px;font-size:12px}
#unlockables .equipped-preview{padding:6px;margin:6px 0 8px}
#unlockables .equipped-preview svg,#unlockables #material-preview{height:52px}
#unlockables .preview-shape-label{margin-bottom:8px}
#unlockables .preview-shape-label select{min-height:36px;padding:5px 10px}
#unlockables .cosmetic-tabs button{min-height:40px}
#unlockables .unlockable-heading{font-size:14px;margin:8px 0}
#unlockables .unlockable-list{gap:8px}
#unlockables .unlockable-list.ota-single-item{grid-template-columns:minmax(0,1fr)}
#unlockables .cosmetic-card{gap:5px}
#unlockables .cosmetic-choice{padding:8px}
#unlockables .cosmetic-choice strong{font-size:14px}
#unlockables .cosmetic-detail{font-size:12px;line-height:1.3}
#unlockables .cosmetic-sample,#unlockables .cosmetic-sample svg,#unlockables .material-sample{height:48px;min-height:48px}
#unlockables .ota-single-item .cosmetic-choice{display:grid;grid-template-columns:76px minmax(0,1fr);column-gap:10px;align-items:center}
#unlockables .ota-single-item .cosmetic-sample{grid-column:1;grid-row:1/6}
#unlockables .ota-single-item .cosmetic-choice>:not(.cosmetic-sample){grid-column:2}
#unlockables .cosmetic-feedback{min-height:0;margin:6px 0 0;font-size:12px}
#powerups .mix-intro{font-size:13px;line-height:1.35;margin-bottom:8px}
#powerups .track-section-title{margin:8px 0;font-size:14px}
#powerups .shape-label{margin:6px 0;font-size:14px}
#powerups .shape-select{min-height:40px;padding:6px 8px;font-size:14px}
#powerups #shape-sequence{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:8px}
#powerups #shape-sequence[hidden]{display:none}
#powerups .shape-step{grid-template-columns:minmax(0,1fr) 32px;gap:4px;margin:0}
#powerups .shape-step label{grid-column:1/-1;font-size:12px}
#powerups .shape-remove{min-height:40px}
#powerups .shape-add{min-height:40px;margin:0;align-self:end}
#powerups .mix-note{margin:8px 0 0;font-size:12px;line-height:1.35}
#powerups .power-mix-row{padding:8px 0}
#powerups .power-mix-row label{font-size:14px}
#powerups .mix-actions{margin:10px 0 0;gap:8px}
#powerups .mix-actions>button{min-height:44px;padding:8px;font-size:13px}
#result .run-progress{margin:10px 0}
#result .result-board-link{margin:10px 0;font-size:14px}
#result .result-collections{margin-top:12px}
#result .milestone-banner{padding:10px;margin:0}
#result .milestone-row+.milestone-row{margin-top:6px;padding-top:6px}
#result .milestone-row.ota-page-hidden+ .milestone-row{margin-top:0;padding-top:0;border-top:0}
#result .ota-pagination>button{min-height:40px;margin:0;font-size:13px}
#result.card{width:min(calc(100vw - 20px),390px);padding:20px 16px 18px}
#result #distance{margin:8px auto 10px;padding:7px 12px}
#result .result-ranking{font-size:12px;line-height:1.35}
#result .result-collections button{min-height:48px;padding:8px;flex-direction:row;font-size:12px;letter-spacing:.5px}
#result .result-actions button{min-height:48px;font-size:14px!important;letter-spacing:1px!important}
#result .milestone-copy strong{font-size:14px}
#result .milestone-copy small{line-height:1.3}
#result .milestone-kicker{margin-bottom:6px}
#result .new-best{height:80px}
#result .ota-pagination>span{margin:0;padding:0;border:0;background:none;box-shadow:none}
@media(max-width:380px){#today .daily-frequencies{column-gap:10px;row-gap:4px}#today .hero h3{font-size:25px}}

.app [data-thread-brand],.thread-menu-overlay [data-thread-brand]{display:none!important}

.ota-sequence-note{display:none}
.ota-panel-page:has(#shape-sequence[hidden]) .ota-sequence-note{display:block}

#powerups .power-mix-row label{line-height:1.3}
#powerups .power-mix-row small{line-height:1.25}
#powerups .mix-scale{line-height:1.2}
#today .fingerprint>span{grid-template-columns:18px minmax(0,1fr);grid-template-rows:auto auto;gap:3px 4px;align-items:center}
#today .fingerprint>span::before{grid-column:1;grid-row:1/3;margin:0}
#today .fingerprint .stat-label{grid-column:2;font-size:11px;line-height:1.15}
#today .fingerprint b{grid-column:2;margin:0;font-size:15px}
#today .daily-streak{display:grid;grid-template-columns:22px auto;justify-content:center;gap:2px 8px;line-height:1.2}
#today .daily-streak svg{grid-column:1;grid-row:1/3;width:22px;height:22px}
#today .daily-streak b,#today .daily-streak small{grid-column:2}
@media(max-height:600px){
  .app #today{padding:10px}
  #today .guide-head{margin-bottom:6px}
  #today .hero{padding:8px}
  #today .hero h3{font-size:24px;margin:6px 0 4px}
  #today .hero p{font-size:12px;line-height:1.25}
  #today .fingerprint{margin:8px 0}
  #today .score-sync-status{line-height:1.25}
  #today .daily-note{margin-top:8px;line-height:1.25}
}