html[data-fold="v"] {
--fold-l: var(--wf-fold-x);
--fold-r: calc(var(--wf-fold-x) + var(--wf-fold-w));
--rail-w: 72px;
--rail-gap: 12px;
}
html[data-fold="h"] {
--fold-t: var(--wf-fold-y);
--fold-b: calc(var(--wf-fold-y) + var(--wf-fold-h));
}
@media (orientation: landscape) and (min-width: 800px) {
html[data-fold="v"] .tabbar {
flex-direction: column; justify-content: center;
left: auto; right: calc(var(--rail-gap) + env(safe-area-inset-right, 0px));
top: 0; bottom: 0; margin-block: auto; height: fit-content;
width: var(--rail-w); padding: 8px 6px; gap: 4px; border-radius: 26px;
}
html[data-fold="v"] .tabbar-btn { flex: 0 0 auto; padding: 9px 2px; gap: 4px; }
html[data-fold="v"] .tabbar-l {
white-space: normal; text-align: center; line-height: 1.1; max-width: 100%; overflow-wrap: anywhere;
}
html[data-fold="v"] .tabbar-btn.is-active::before { inset: 2px 3px; }
html[data-fold="v"] body.has-tabbar { --tabbar-cover: env(safe-area-inset-bottom, 0px); }
html[data-fold="v"] :is(#dailyflag-map.map-canvas, #dailyflag-globe) {
max-height: 36vh;
max-height: 36dvh;
}
html[data-fold="v"] #confirm-modal .confirm-actions {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: var(--wf-fold-w); row-gap: 10px;
}
html[data-fold="v"] #confirm-modal .confirm-actions > button { width: 100%; }
html[data-fold="v"] #confirm-modal .confirm-actions:has(> .confirm-alt:not([hidden])) > #confirm-ok-btn,
html[data-fold="v"] #confirm-modal .confirm-actions:has(> #confirm-cancel-btn[hidden]) > #confirm-ok-btn { grid-column: 1 / -1; }
html[data-fold="v"] #nickname-modal .confirm-actions {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--wf-fold-w);
}
html[data-fold="v"] #pro-modal .pro-links {
display: grid; grid-template-columns: minmax(0, 1fr) var(--wf-fold-w) minmax(0, 1fr); column-gap: 0;
}
html[data-fold="v"] #pro-modal .pro-links > #pro-terms-btn { justify-self: end; text-align: end; }
html[data-fold="v"] #pro-modal .pro-links > .pro-link-dot { justify-self: center; }
html[data-fold="v"] #pro-modal .pro-links > #pro-privacy-btn { justify-self: start; text-align: start; }
html[data-fold="v"] :is(.achievement-toast, .lb-toast, .combo-toast) {
left: calc((var(--fold-r) + 100vw) / 2);
max-width: calc(100vw - var(--fold-r) - 32px);
}
html[data-fold="v"][dir="rtl"] :is(.achievement-toast, .lb-toast, .combo-toast) {
left: calc(var(--wf-fold-x) / 2);
max-width: calc(var(--wf-fold-x) - 32px);
}
html[data-fold="v"] body {
--book-pad: calc(16px + env(safe-area-inset-left, 0px));
--book-pad-end: calc(16px + env(safe-area-inset-right, 0px));
--book-l: calc(var(--wf-fold-x) - var(--book-pad));
}
html[data-fold="v"] body.has-tabbar {
--book-pad-end: calc(var(--rail-w) + var(--rail-gap) + 12px + env(safe-area-inset-right, 0px));
}
html[data-fold="v"] .app-shell {
width: auto !important; max-width: none !important; margin: 0 !important;
padding-left: var(--book-pad) !important;
padding-right: var(--book-pad-end) !important;
}
html[data-fold="v"] .quiz-screen .quiz-panel {
display: grid;
grid-template-columns: calc(var(--book-l) - 21px) var(--wf-fold-w) minmax(0, 1fr);
column-gap: 0;
padding-left: 20px; padding-right: 20px;
height: calc(100vh - var(--shell-pt) - var(--shell-pb));
height: calc(100dvh - var(--shell-pt) - var(--shell-pb));
max-height: none;
}
html[data-fold="v"] .quiz-screen .quiz-panel:not(.quiz-panel--map) {
grid-template-areas:
"top top top"
"prog prog prog"
"media . prompt"
"media . options";
grid-template-rows: auto auto auto minmax(0, 1fr);
row-gap: 12px;
}
html[data-fold="v"] .quiz-screen .quiz-panel:not(.quiz-panel--map) .top-bar { grid-area: top; }
html[data-fold="v"] .quiz-screen .quiz-panel:not(.quiz-panel--map) .progress-track { grid-area: prog; margin: 0; }
html[data-fold="v"] .quiz-screen .quiz-panel:not(.quiz-panel--map) .flag-frame--quiz {
grid-area: media; margin: 0; min-height: 0; align-self: stretch;
display: flex; align-items: center; justify-content: center;
}
html[data-fold="v"] .quiz-screen .quiz-panel:not(.quiz-panel--map) #flag-image { max-height: 100%; max-width: 100%; }
html[data-fold="v"] .quiz-screen .quiz-panel:not(.quiz-panel--map) .prompt {
grid-area: prompt; display: block; margin: 0; align-self: end;
}
html[data-fold="v"] .quiz-screen .quiz-panel:not(.quiz-panel--map) .options-grid {
grid-area: options; grid-template-columns: minmax(0, 1fr) !important; grid-auto-rows: minmax(0, 1fr);
align-content: stretch; gap: 10px !important; margin: 0;
}
html[data-fold="v"] .quiz-screen .quiz-panel:not(.quiz-panel--map) .option-button { min-height: 0; }
html[data-fold="v"] .quiz-screen .quiz-panel--map {
grid-template-areas:
"top top top"
"prog prog prog"
"media . flag"
"media . prompt"
"media . hint"
"media . hintcard"
"media . options";
}
html[data-fold="v"] .quiz-screen .quiz-panel .feedback-card {
left: calc((var(--wf-fold-x) - var(--book-pad)) / 2);
width: min(400px, calc(var(--wf-fold-x) - var(--book-pad) - 32px));
}
html[data-fold="v"][dir="rtl"] .quiz-screen .quiz-panel .feedback-card {
left: calc((var(--fold-r) + 100vw - var(--book-pad-end)) / 2 - var(--book-pad));
}
html[data-fold="v"] .home-screen:not([hidden]) {
display: grid;
grid-template-columns: var(--book-l) var(--wf-fold-w) minmax(0, 1fr) 14px minmax(0, 1fr);
grid-template-areas:
"ribbon . daily . surv"
"progress . daily . surv"
"ranked . time . cup";
grid-template-rows: auto auto auto;
row-gap: 14px; column-gap: 0;
align-content: center;
}
html[data-fold="v"][dir="rtl"] .home-screen:not([hidden]) {
grid-template-columns: minmax(0, 1fr) var(--wf-fold-w)
calc((var(--book-l) - 14px) / 2) 14px calc((var(--book-l) - 14px) / 2);
}
html[data-fold="v"] .home-screen > .mode-grid { display: contents; }
html[data-fold="v"] .home-screen > * { margin: 0; min-width: 0; }
html[data-fold="v"] .home-screen > .stats-ribbon { grid-area: ribbon; }
html[data-fold="v"] .home-screen > .home-progress-row { grid-area: progress; margin: 0; }
html[data-fold="v"] .home-screen #leaderboard-btn { grid-area: ranked; margin: 0; }
html[data-fold="v"] .home-screen #daily-btn { grid-area: daily; margin: 0; }
html[data-fold="v"] .home-screen #survival-btn { grid-area: surv; margin: 0; }
html[data-fold="v"] .home-screen #timeattack-btn { grid-area: time; margin: 0; }
html[data-fold="v"] .home-screen #worldcup-btn { grid-area: cup; margin: 0; }
html[data-fold="v"] .home-screen:not([hidden]) {
box-sizing: border-box;
height: calc(100vh - var(--shell-pt) - var(--shell-pb));
height: calc(100dvh - var(--shell-pt) - var(--shell-pb));
grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr);
align-content: stretch;
}
html[data-fold="v"] .home-screen:not([hidden]):has(#leaderboard-btn[hidden]) {
grid-template-areas:
"ribbon . daily . surv"
"ribbon . daily . surv"
"progress . time . cup";
}
html[data-fold="v"] .home-screen > .stats-ribbon { align-items: stretch; margin: 0; }
html[data-fold="v"] .home-screen .ribbon-cell { justify-content: center; gap: 4px; }
html[data-fold="v"] .home-screen .ribbon-v { font-size: 1.45rem; }
html[data-fold="v"] .home-screen .ribbon-flag { height: 40px; width: auto; }
html[data-fold="v"] .home-screen #home-progress { align-items: center; }
html[data-fold="v"] .home-screen .fm-mode:not(.featured) { min-height: 0; padding: 22px 20px; }
html[data-fold="v"] .home-screen .fm-mode:not(.featured) .icon { font-size: 46px; }
html[data-fold="v"] .home-screen .fm-mode:not(.featured) .t {
font-size: 1.2rem; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word;
}
html[data-fold="v"] .home-screen .fm-mode:not(.featured) .d {
font-size: 0.86rem; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word;
}
html[data-fold="v"] .home-screen #leaderboard-btn {
flex-direction: column; align-items: flex-start; justify-content: flex-end;
gap: 6px; min-height: 0; padding: 24px 24px 22px;
}
html[data-fold="v"] .home-screen #leaderboard-btn .icon { font-size: 64px; margin-bottom: auto; }
html[data-fold="v"] .home-screen #leaderboard-btn .body { flex: 0 0 auto; gap: 4px; }
html[data-fold="v"] .home-screen #leaderboard-btn .t { font-size: 1.7rem; }
html[data-fold="v"] .home-screen #leaderboard-btn .d { font-size: 0.95rem; }
html[data-fold="v"] .home-screen #leaderboard-btn > .corner-group {
position: absolute; top: 20px; inset-inline-end: 20px; margin: 0;
}
html[data-fold="v"] .home-screen > .mode-grid > .fm-mode.pro-mode { display: none; }
html[data-fold="v"] .home-screen > .home-progress-row:has(> .pro-mini:not([hidden])) {
display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 14px;
}
html[data-fold="v"] .home-progress-row > .pro-mini:not([hidden]) {
display: flex; flex-direction: column; justify-content: space-between; gap: 8px;
min-width: 0; padding: 10px 12px; border-radius: 20px;
font: inherit; text-align: start; color: var(--text); cursor: pointer; -webkit-tap-highlight-color: transparent;
border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
background:
linear-gradient(120deg, color-mix(in srgb, var(--gold) 12%, transparent), transparent 70%),
var(--paper-card);
}
html[data-fold="v"][dir="rtl"] .home-progress-row > .pro-mini:not([hidden]) {
background:
linear-gradient(240deg, color-mix(in srgb, var(--gold) 12%, transparent), transparent 70%),
var(--paper-card);
}
html[data-fold="v"] .home-progress-row > .pro-mini:active { transform: scale(0.995); }
html[data-fold="v"] .pro-mini > .pro-mini-top { order: -1; display: flex; align-items: center; justify-content: space-between; gap: 6px; }
html[data-fold="v"] .pro-mini > .pro-mini-top { flex-wrap: wrap; }
html[data-fold="v"] .pro-mini .icon { font-size: 28px; line-height: 1; flex: 0 0 auto; }
html[data-fold="v"] .pro-mini .pro-mode-price {
flex: 0 0 auto; white-space: nowrap;
font-family: var(--font-mono); font-weight: 700; font-size: 0.74rem;
padding: 3px 9px; border-radius: 999px;
color: var(--gold); background: var(--paper-card);
border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
}
html[data-fold="v"][data-theme="dark"] .pro-mini .pro-mode-price { background: color-mix(in srgb, #000 16%, transparent); }
html[data-fold="v"] .pro-mini > .pro-mini-t {
font-family: var(--font-serif); font-weight: 700; font-size: 0.98rem; line-height: 1.2; text-wrap: balance; overflow-wrap: anywhere;
}
html[data-fold="v"] .home-progress-row:has(> .pro-mini:not([hidden])) > .home-progress { padding: 10px 11px; gap: 8px; }
html[data-fold="v"] .home-progress-row:has(> .pro-mini:not([hidden])) .home-progress-head { flex-wrap: wrap; row-gap: 0; }
html[data-fold="v"] .home-progress-row:has(> .pro-mini:not([hidden])) :is(.home-progress-head .xp-label, .home-next-reward) { display: none; }
html[data-fold="v"] .home-progress-row:has(> .pro-mini:not([hidden])) .home-rank-name {
flex-basis: 100%; overflow-wrap: anywhere;
white-space: normal; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
}
@media (max-height: 600px) {
html[data-fold="v"] .home-screen:not([hidden]) { padding-top: 44px; }
}
}
@media (orientation: landscape) and (min-width: 800px) {
html[data-fold="v"] :is(#practice-screen, #study-regions-screen, #mania-screen, #crest-screen,
#similar-picker-screen, #mania-quizpick-screen, #islands-screen, #stage-select-screen,
#achievements-screen, #ost-screen, #settings-screen, #credits-screen, #usage-screen,
#leaderboard-screen, #passport-screen) > .panel {
padding-left: 20px; padding-right: 20px; border-left-width: 1px; border-right-width: 1px;
--pg-a: calc(var(--book-l) - 21px);
--pg-cols: var(--pg-a) var(--wf-fold-w) minmax(0, 1fr);
--pg-start: var(--pg-a);
}
html[data-fold="v"][dir="rtl"] :is(#practice-screen, #study-regions-screen, #mania-screen, #crest-screen,
#similar-picker-screen, #mania-quizpick-screen, #islands-screen, #stage-select-screen,
#achievements-screen, #ost-screen, #settings-screen, #credits-screen, #usage-screen,
#leaderboard-screen, #passport-screen) > .panel {
--pg-cols: minmax(0, 1fr) var(--wf-fold-w) var(--pg-a);
--pg-start: calc(100vw - var(--fold-r) - var(--book-pad-end) - 21px);
}
html[data-fold="v"] :is(#practice-screen, #study-regions-screen, #mania-screen, #crest-screen,
#similar-picker-screen, #mania-quizpick-screen, #islands-screen, #stage-select-screen,
#achievements-screen, #ost-screen, #settings-screen, #credits-screen, #usage-screen,
#passport-screen) > .panel > .page-topbar > .page-title {
justify-self: start; max-width: calc(var(--pg-start) - 60px);
}
html[data-fold="v"] :is(#practice-screen, #study-regions-screen, #mania-screen, #crest-screen) > .panel > .page-topbar > .page-title {
max-width: calc(var(--pg-start) - 14px);
}
html[data-fold="v"] #practice-screen .section-eyebrow { max-width: calc(var(--pg-start) - 8px); margin-inline-end: auto; }
html[data-fold="v"] :is(#practice-screen .practice-grid, #mania-country-grid, #crest-grid,
#similar-picker-grid, #mania-quizpick-grid, #islands-grid) {
--pg-g: 12px;
display: grid;
grid-template-columns:
repeat(2, calc((var(--pg-a) - var(--pg-g)) / 2)) calc(var(--wf-fold-w) - 2 * var(--pg-g)) repeat(2, minmax(0, 1fr));
column-gap: var(--pg-g);
}
html[data-fold="v"] #practice-screen .practice-grid { --pg-g: 14px; }
html[data-fold="v"][dir="rtl"] :is(#practice-screen .practice-grid, #mania-country-grid, #crest-grid,
#similar-picker-grid, #mania-quizpick-grid, #islands-grid) {
grid-template-columns:
repeat(2, minmax(0, 1fr)) calc(var(--wf-fold-w) - 2 * var(--pg-g)) repeat(2, calc((var(--pg-a) - var(--pg-g)) / 2));
}
html[data-fold="v"] #mania-screen #mania-country-grid {
grid-template-columns:
repeat(2, calc((var(--pg-a) - var(--pg-g)) / 2)) calc(var(--wf-fold-w) - 2 * var(--pg-g)) repeat(2, minmax(0, 1fr));
column-gap: var(--pg-g);
row-gap: 12px;
}
html[data-fold="v"][dir="rtl"] #mania-screen #mania-country-grid {
grid-template-columns:
repeat(2, minmax(0, 1fr)) calc(var(--wf-fold-w) - 2 * var(--pg-g)) repeat(2, calc((var(--pg-a) - var(--pg-g)) / 2));
}
html[data-fold="v"] #mania-screen .study-region-card.mania-card { min-height: 124px; }
html[data-fold="v"] #mania-screen .study-region-card[data-mania-quizmix] {
flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 4px;
}
html[data-fold="v"] #mania-screen [data-mania-quizmix] .srg-icon { margin-bottom: 6px; font-size: 46px; }
html[data-fold="v"] :is(#practice-screen .practice-grid, #mania-country-grid, #crest-grid,
#similar-picker-grid, #mania-quizpick-grid, #islands-grid) > :nth-child(4n+1 of :not([hidden])) { grid-column: 1; }
html[data-fold="v"] :is(#practice-screen .practice-grid, #mania-country-grid, #crest-grid,
#similar-picker-grid, #mania-quizpick-grid, #islands-grid) > :nth-child(4n+2 of :not([hidden])) { grid-column: 2; }
html[data-fold="v"] :is(#practice-screen .practice-grid, #mania-country-grid, #crest-grid,
#similar-picker-grid, #mania-quizpick-grid, #islands-grid) > :nth-child(4n+3 of :not([hidden])) { grid-column: 4; }
html[data-fold="v"] :is(#practice-screen .practice-grid, #mania-country-grid, #crest-grid,
#similar-picker-grid, #mania-quizpick-grid, #islands-grid) > :nth-child(4n+4 of :not([hidden])) { grid-column: 5; }
html[data-fold="v"] :is(#practice-screen .practice-grid, #mania-country-grid, #crest-grid,
#similar-picker-grid, #mania-quizpick-grid, #islands-grid) > p:nth-child(n of :not([hidden])) { grid-column: 1 / span 2; }
html[data-fold="v"] :is(#practice-screen, #mania-screen, #crest-screen, #similar-picker-screen,
#mania-quizpick-screen, #islands-screen, #ost-screen) :is(.practice-sub, .study-regions-sub, .ost-sub) {
max-width: var(--pg-start); margin-inline: 0 auto; text-align: start;
}
html[data-fold="v"] #study-regions-screen .study-regions-sub { text-align: start; }
html[data-fold="v"] :is(#practice-screen, #mania-screen, #crest-screen, #study-regions-screen) :is(.practice-sub, .study-regions-sub) {
padding-inline-start: 14px; box-sizing: border-box;
}
html[data-fold="v"] #crest-games-grid { grid-template-columns: var(--pg-cols); column-gap: 0; }
html[data-fold="v"] #crest-games-grid > * { grid-column: 1; }
html[data-fold="v"] #crest-screen :is(.crest-games-heading, .crest-fantasy-note) {
max-width: var(--pg-start); margin-inline: 0 auto; text-align: start;
}
html[data-fold="v"] #study-regions-screen > .panel {
display: grid; grid-template-columns: var(--pg-cols); column-gap: 0; row-gap: 0;
align-content: start; align-items: start;
}
html[data-fold="v"] #study-regions-screen > .panel > .page-topbar { grid-column: 1 / -1; }
html[data-fold="v"] #study-regions-screen > .panel > .study-regions-sub { grid-column: 1; grid-row: 2; }
html[data-fold="v"] #study-regions-grid { grid-column: 1; grid-row: 3; grid-template-columns: repeat(2, minmax(0, 1fr)); }
html[data-fold="v"] #study-regions-screen .study-cta-pair { grid-column: 3; grid-row: 3; margin-top: 0; }
html[data-fold="v"] :is(#stage-list, #achievements-list) {
display: grid; grid-template-columns: var(--pg-cols); column-gap: 0;
}
html[data-fold="v"] :is(#stage-list, #achievements-list) > :nth-child(odd of :not([hidden])) { grid-column: 1; }
html[data-fold="v"] :is(#stage-list, #achievements-list) > :nth-child(even of :not([hidden])) { grid-column: 3; }
html[data-fold="v"] :is(#ost-list, #settings-screen .settings-list, #credits-screen .credits-body, #usage-body) {
display: block; box-sizing: border-box;
width: calc(2 * var(--pg-a) + var(--wf-fold-w)); max-width: none;
margin-left: 0; margin-right: 0;
column-count: 2; column-gap: var(--wf-fold-w); column-fill: balance;
}
html[data-fold="v"] :is(#ost-list, #settings-screen .settings-list, #credits-screen .credits-body, #usage-body) > * {
break-inside: avoid;
}
html[data-fold="v"] #ost-list { margin-top: -6px; }
html[data-fold="v"] #ost-list > .ost-row { margin: 0; padding-top: 6px; }
html[data-fold="v"] #settings-screen .settings-list > * { margin: 0; }
html[data-fold="v"] #settings-screen .settings-list > * + * { margin-top: 14px; }
html[data-fold="v"] #settings-screen .settings-list > :not(.setting-row--theme) + .setting-row--theme { break-before: column; margin-top: 0; }
html[data-fold="v"] #settings-screen .settings-list > .setting-row--danger,
html[data-fold="v"] #settings-screen .settings-list > .setting-row--danger + .setting-row--link { margin-top: 22px; }
html[data-fold="v"] #settings-screen .settings-version {
width: var(--pg-a); max-width: none; margin-inline: auto 0; text-align: center;
}
html[data-fold="v"] #credits-screen .credits-body > .credits-section { margin: 0; }
html[data-fold="v"] #credits-screen .credits-body > .credits-section + .credits-section { margin-top: 22px; }
html[data-fold="v"] #credits-screen .credits-body > .credits-section:has(#oss-licenses-btn) + .credits-section {
break-before: column; margin-top: 0;
}
html[data-fold="v"] #usage-body > .usage-h { break-after: avoid; margin-top: 0; padding-top: 20px; }
html[data-fold="v"] #usage-body > :not(.usage-h) { break-before: avoid; }
html[data-fold="v"] #usage-body > .usage-note--top {
column-span: all; margin-bottom: 0; max-width: calc(var(--pg-start) - 4px);
}
html[data-fold="v"] #leaderboard-screen > .lb-panel {
display: grid; grid-template-columns: var(--pg-cols); column-gap: 0; row-gap: 0;
grid-template-rows: auto auto auto auto auto minmax(0, 1fr);
align-content: start; align-items: start;
}
html[data-fold="v"] #leaderboard-screen .lb-header { grid-column: 1 / -1; grid-row: 1; margin-bottom: 14px; }
html[data-fold="v"] #leaderboard-screen .lb-headings {
flex: 0 1 auto; min-width: 0; max-width: calc(var(--pg-start) - 56px); margin-inline-end: auto;
}
html[data-fold="v"] #leaderboard-screen #lb-you { grid-column: 1; grid-row: 2; margin: 0 0 14px; }
html[data-fold="v"] #leaderboard-screen #lb-rankings-btn { grid-column: 1; grid-row: 3; margin: 0 0 14px; }
html[data-fold="v"] #leaderboard-screen .lb-cta-row { grid-column: 1; grid-row: 4; margin: 0 0 14px; }
html[data-fold="v"] #leaderboard-screen #lb-fineprint { grid-column: 1; grid-row: 5; margin: 0; }
html[data-fold="v"] #leaderboard-screen #lb-status { grid-column: 3; grid-row: 2; margin: 0 0 14px; }
html[data-fold="v"] #leaderboard-screen #lb-list { grid-column: 3; grid-row: 3 / 7; margin: 0; }
html[data-fold="v"] #leaderboard-screen > .lb-panel:has(> #lb-status[hidden]) #lb-list { grid-row: 2 / 7; }
html[data-fold="v"] #passport-screen > .passport-panel {
display: grid; grid-template-columns: var(--pg-cols); column-gap: 0; row-gap: 0;
grid-template-rows: auto auto auto auto minmax(0, 1fr);
align-content: start; align-items: start;
padding-bottom: 20px; border-bottom-width: 1px;
--pp-top: calc(var(--shell-pt) + 21px);
--pp-filter: calc(24px + 0.82rem * 1.25);
--pp-gap: 12px;
}
html[data-fold="v"] #passport-screen .page-topbar { grid-column: 1; grid-row: 1; }
html[data-fold="v"] #passport-screen .passport-hero { grid-column: 1; grid-row: 2; }
html[data-fold="v"] #passport-screen .passport-map-wrap { grid-column: 1; grid-row: 3; margin-inline: -16px 0; }
html[data-fold="v"] #passport-screen .passport-continents { grid-column: 1; grid-row: 4; }
html[data-fold="v"] #passport-screen .passport-filter {
grid-column: 3; grid-row: 1 / -1;
position: sticky; top: var(--pp-top); z-index: 1;
box-sizing: border-box; height: var(--pp-filter); margin: 0; align-items: flex-start;
}
html[data-fold="v"] #passport-screen .passport-chip { line-height: 1.25; }
html[data-fold="v"] #passport-screen .passport-grid {
grid-column: 3; grid-row: 1 / -1;
position: sticky; top: calc(var(--pp-top) + var(--pp-filter) + var(--pp-gap));
margin-top: calc(var(--pp-filter) + var(--pp-gap));
max-height: calc(100vh - var(--pp-top) - var(--pp-filter) - var(--pp-gap) - var(--shell-pb) - 21px);
max-height: calc(100dvh - var(--pp-top) - var(--pp-filter) - var(--pp-gap) - var(--shell-pb) - 21px);
overflow-y: auto;
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
@media (orientation: landscape) and (min-width: 800px) {
html[data-fold="v"] :is(#study-detail-screen, #mania-detail-screen, #crest-detail-screen) > .study-detail-page {
--vd-bar: 56px;
--vd-plate-top: calc(var(--vd-bar) + 12px);
--vd-plate-h: max(212px, calc(100dvh - var(--shell-pt) - var(--shell-pb) - 198px));
display: grid;
grid-template-columns: calc(var(--book-l) - 21px) var(--wf-fold-w) minmax(0, 1fr);
grid-template-rows: auto auto auto auto minmax(0, 1fr);
column-gap: 0; row-gap: 0;
padding: 20px 20px 96px;
overflow: clip;
}
html[data-fold="v"] :is(#study-detail-screen, #mania-detail-screen, #crest-detail-screen):has(> .study-pager[hidden]) > .study-detail-page {
--vd-plate-h: max(212px, calc(100dvh - var(--shell-pt) - var(--shell-pb) - 122px));
padding-bottom: 20px;
}
html[data-fold="v"] :is(#study-detail-screen, #mania-detail-screen, #crest-detail-screen) .study-detail-card { display: contents; }
html[data-fold="v"] :is(#study-detail-screen, #mania-detail-screen, #crest-detail-screen) .study-detail-page > .page-topbar {
grid-column: 1; grid-row: 1 / -1; align-self: start;
top: calc(var(--shell-pt) + 21px);
grid-template-columns: auto minmax(0, 1fr) auto;
height: var(--vd-bar); margin: 0; padding: 0 0 10px;
}
html[data-fold="v"] :is(#study-detail-screen, #mania-detail-screen, #crest-detail-screen) .study-detail-page > .page-topbar > .bookmark-btn {
grid-column: 3; justify-self: end; margin-inline-end: 8px;
}
html[data-fold="v"] :is(#study-detail-screen, #mania-detail-screen, #crest-detail-screen) .study-detail-visual {
grid-column: 1; grid-row: 1 / -1; align-self: start;
position: sticky; top: calc(var(--shell-pt) + 21px + var(--vd-plate-top));
height: var(--vd-plate-h); min-height: 0;
margin: var(--vd-plate-top) 0 12px;
}
html[data-fold="v"] :is(#study-detail-flag, #mania-detail-flag, #crest-detail-img) {
max-height: calc(var(--vd-plate-h) - 44px);
}
html[data-fold="v"] :is(#study-detail-screen, #mania-detail-screen, #crest-detail-screen) .study-detail-card > :not(.study-detail-visual) {
grid-column: 3; min-width: 0;
margin-top: 24px;
}
html[data-fold="v"] :is(#study-detail-screen, #mania-detail-screen, #crest-detail-screen) .study-detail-card > .study-detail-copy {
margin-top: 10px;
}
html[data-fold="v"] :is(#study-detail-screen, #mania-detail-screen, #crest-detail-screen):not([hidden]) {
display: grid; grid-template-columns: minmax(0, 1fr);
}
html[data-fold="v"] :is(#study-detail-screen, #mania-detail-screen, #crest-detail-screen) > :is(.study-detail-page, .study-pager) {
grid-area: 1 / 1;
}
html[data-fold="v"] :is(#study-detail-screen, #mania-detail-screen, #crest-detail-screen) > .study-pager {
align-self: end; width: auto;
bottom: calc(var(--shell-pb) + 33px);
margin: 0 calc(100% - var(--book-l) + 16px) 33px calc(21px + 16px);
}
html[data-fold="v"][dir="rtl"] :is(#study-detail-screen, #mania-detail-screen, #crest-detail-screen) > .study-detail-page {
grid-template-columns: minmax(0, 1fr) var(--wf-fold-w) calc(var(--book-l) - 21px);
}
html[data-fold="v"][dir="rtl"] :is(#study-detail-screen, #mania-detail-screen, #crest-detail-screen) > .study-pager {
margin-left: calc(var(--book-l) + var(--wf-fold-w) + 16px);
margin-right: calc(21px + 16px);
}
html[data-fold="v"] :is(#study-list-screen, #mania-list-screen, #crest-list-screen, #favorites-screen) > .study-page {
display: grid;
grid-template-columns: calc(var(--book-l) - 21px) var(--wf-fold-w) minmax(0, 1fr);
grid-template-rows: auto minmax(0, 1fr);
column-gap: 0; row-gap: 0;
padding-left: 20px; padding-right: 20px;
}
html[data-fold="v"] :is(#study-list-screen, #mania-list-screen, #crest-list-screen, #favorites-screen) > .study-page > .page-topbar {
grid-column: 1; grid-row: 1; align-self: center;
margin: 0; padding-bottom: 0;
}
html[data-fold="v"] :is(#study-search-wrap, #study-list-quiz-btn, #crest-list-quiz-btn, #mania-list-quiz-btn) {
grid-column: 3; grid-row: 1; align-self: center; margin: 0;
}
html[data-fold="v"] #favorites-empty {
grid-column: 3; grid-row: 2; align-self: center; margin: 0; padding-inline: 12px; text-align: center;
}
html[data-fold="v"] :is(#study-list-quiz-btn, #crest-list-quiz-btn, #mania-list-quiz-btn) {
min-height: 46px; padding: 8px 12px; font-size: 0.95rem;
}
html[data-fold="v"] :is(#study-list-quiz-btn, #crest-list-quiz-btn, #mania-list-quiz-btn) .corner.cost {
white-space: nowrap; flex: none;
}
html[data-fold="v"] #mania-list-screen > .study-page {
grid-template-columns: calc(var(--book-l) - 21px) var(--wf-fold-w) minmax(0, 1fr) fit-content(136px);
}
html[data-fold="v"] #mania-list-screen .setrun-row--sub {
grid-column: 4; grid-row: 1; align-self: stretch; margin: 0; margin-inline-start: 8px; flex-wrap: nowrap;
}
html[data-fold="v"] #mania-list-screen .setrun-row--sub .mania-viewall {
margin: 0; min-height: 46px; padding: 6px 12px; font-size: 0.9rem;
}
html[data-fold="v"] #mania-list-screen .mania-viewall :is(.wfi-slot, .wfi) { width: 22px; height: 22px; font-size: 22px; }
html[data-fold="v"] :is(#study-list, #mania-list, #crest-list, #favorites-list) {
grid-column: 1 / -1; grid-row: 2; margin-top: 12px;
grid-template-columns: calc(var(--book-l) - 21px) minmax(0, 1fr);
column-gap: var(--wf-fold-w);
}
html[data-fold="v"][dir="rtl"] :is(#study-list-screen, #mania-list-screen, #crest-list-screen, #favorites-screen) > .study-page {
grid-template-columns: minmax(0, 1fr) var(--wf-fold-w) calc(var(--book-l) - 21px);
}
html[data-fold="v"][dir="rtl"] #mania-list-screen > .study-page {
grid-template-columns: calc(100% - var(--book-l) + 21px - var(--wf-fold-w)) var(--wf-fold-w) minmax(0, 1fr) fit-content(136px);
}
html[data-fold="v"][dir="rtl"] :is(#study-list, #mania-list, #crest-list, #favorites-list) {
grid-template-columns: minmax(0, 1fr) calc(var(--book-l) - 25px);
}
html[data-fold="v"] #results-screen > .results-panel {
display: grid;
grid-template-columns: calc(var(--book-l) - 23px) var(--wf-fold-w) minmax(0, 1fr);
grid-template-rows: auto auto auto auto auto auto minmax(0, 1fr) auto;
column-gap: 0; row-gap: 0; align-content: stretch;
padding: 16px 22px;
min-height: calc(100vh - var(--shell-pt) - var(--shell-pb));
min-height: calc(100dvh - var(--shell-pt) - var(--shell-pb));
}
html[data-fold="v"] #results-screen .results-header { grid-column: 1; grid-row: 1; }
html[data-fold="v"] #results-screen .results-route { grid-column: 1; grid-row: 3; }
html[data-fold="v"] #results-screen .results-stars { grid-column: 1; grid-row: 4; }
html[data-fold="v"] #results-screen .results-stats { grid-column: 1; grid-row: 5; }
html[data-fold="v"] #results-screen .results-noclue { grid-column: 1; grid-row: 6; }
html[data-fold="v"] #results-screen .results-actions { grid-column: 1; grid-row: 8; }
html[data-fold="v"] #results-screen .wrong-answers-section {
grid-column: 3; grid-row: 1 / -1; align-self: start;
position: sticky; top: calc(var(--shell-pt) + 17px);
height: calc(100vh - var(--shell-pt) - var(--shell-pb) - 34px);
height: calc(100dvh - var(--shell-pt) - var(--shell-pb) - 34px);
margin: 0;
display: flex; flex-direction: column;
}
html[data-fold="v"] #results-screen .wrong-answers-list {
flex: 1 1 auto; min-height: 0; max-height: none; align-content: start;
overscroll-behavior: contain;
}
html[data-fold="v"] #results-screen .results-rank {
grid-column: 1; grid-row: 2;
flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 12px; margin: 8px 0 2px;
}
html[data-fold="v"] #results-screen .results-route-path {
max-height: calc(1.35em * 4); line-height: 1.35; overflow-y: auto; overscroll-behavior: contain;
}
html[data-fold="v"] #results-screen > .results-panel:has(> .wrong-answers-section[hidden]) {
grid-template-rows: minmax(0, 1fr) auto auto auto auto auto auto minmax(0, 1fr);
}
html[data-fold="v"] #results-screen > .results-panel:has(> .wrong-answers-section[hidden]) > .results-header {
grid-row: 1 / -1; align-self: center;
}
html[data-fold="v"] #results-screen > .results-panel:has(> .wrong-answers-section[hidden]) > :is(.results-rank, .results-route, .results-stars, .results-stats, .results-noclue, .results-actions) {
grid-column: 3;
}
html[data-fold="v"] #results-screen > .results-panel:has(> .wrong-answers-section[hidden]) > .results-rank { grid-row: 2; }
html[data-fold="v"] #results-screen > .results-panel:has(> .wrong-answers-section[hidden]) > .results-route { grid-row: 3; }
html[data-fold="v"] #results-screen > .results-panel:has(> .wrong-answers-section[hidden]) > .results-stars { grid-row: 4; }
html[data-fold="v"] #results-screen > .results-panel:has(> .wrong-answers-section[hidden]) > .results-stats { grid-row: 5; }
html[data-fold="v"] #results-screen > .results-panel:has(> .wrong-answers-section[hidden]) > .results-noclue { grid-row: 6; }
html[data-fold="v"] #results-screen > .results-panel:has(> .wrong-answers-section[hidden]) > .results-actions { grid-row: 7; }
html[data-fold="v"][dir="rtl"] #results-screen > .results-panel {
grid-template-columns: minmax(0, 1fr) var(--wf-fold-w) calc(var(--book-l) - 23px);
}
}
@media (orientation: landscape) and (min-width: 800px) {
html[data-fold="v"] :is(.froute-root, .amem-root) {
padding-left: var(--book-pad); padding-right: var(--book-pad-end);
}
html[data-fold="v"] :is(.froute-body:has(> .froute-globe), .froute-answer, .amem-body:has(> .amem-globe)) {
position: relative;
padding-inline-start: calc(var(--book-l) + var(--wf-fold-w) + 8px);
}
html[data-fold="v"] :is(.froute-body, .froute-answer) > .froute-globe,
html[data-fold="v"] .amem-body > .amem-globe {
position: absolute; top: 8px; bottom: 0; inset-inline-start: 0;
width: calc(var(--book-l) - 1px); min-height: 0; flex: none;
}
html[data-fold="v"] .froute-body:has(> .froute-globe) > .froute-pick,
html[data-fold="v"] .amem-body:has(> .amem-globe) > .amem-ask { margin-top: auto; }
html[data-fold="v"] .amem-body:has(> .amem-globe) > .amem-hint { margin-top: auto; }
html[data-fold="v"] .amem-body:has(> .amem-globe) > .amem-legend { margin-bottom: auto; }
html[data-fold="v"] .froute-answer > .froute-answer-title { margin-top: auto; }
html[data-fold="v"] .froute-answer > .froute-ghost { margin-bottom: auto; }
html[data-fold="v"] :is(.froute-choices, .amem-choices) { grid-template-columns: minmax(0, 1fr); gap: 10px; }
html[data-fold="v"] .froute-choice { min-height: 52px; }
html[data-fold="v"] .froute-body:has(> .froute-globe) > .froute-choices {
flex: 1 1 auto; min-height: 0; grid-auto-rows: minmax(52px, 1fr); align-content: stretch;
}
html[data-fold="v"] .froute-body:has(> .froute-globe) {
display: grid; grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto 36px minmax(0, 1fr) auto auto;
}
html[data-fold="v"] .froute-body:has(> .froute-globe) > :not(.froute-globe) { grid-column: 1; }
html[data-fold="v"] .froute-body:has(> .froute-globe) > .froute-bar { grid-row: 1; }
html[data-fold="v"] .froute-body:has(> .froute-globe) > .froute-pick { grid-row: 2; align-self: center; margin: 0; }
html[data-fold="v"] .froute-body:has(> .froute-globe) > .froute-toast { grid-row: 2; align-self: center; z-index: 1; }
html[data-fold="v"] .froute-body:has(> .froute-globe) > .froute-choices { grid-row: 3; }
html[data-fold="v"] .froute-body:has(> .froute-globe) > .froute-giveup { grid-row: 4; justify-self: center; }
html[data-fold="v"] .froute-body:has(> .froute-globe) > .froute-note { grid-row: 5; }
html[data-fold="v"] .froute-body:has(> .froute-globe) .froute-choice { gap: 14px; padding: 10px 16px; }
html[data-fold="v"] .froute-body:has(> .froute-globe) .froute-choice .froute-flag { width: 60px; height: 40px; }
html[data-fold="v"] .froute-body:has(> .froute-globe) .froute-choice-name { font-size: 1rem; }
html[data-fold="v"] .froute-body:has(> .froute-globe) .froute-bar .froute-flag { width: 72px; height: 48px; }
html[data-fold="v"] .amem-choice { min-height: 48px; }
html[data-fold="v"] .creigns-root {
display: grid;
grid-template-columns: var(--book-l) var(--wf-fold-w) minmax(0, 1fr);
grid-template-areas:
"stage . top"
"stage . reign"
"stage . ."
"stage . cl"
"stage . cr"
"stage . hint";
grid-template-rows: auto auto minmax(0, 1fr) auto auto auto;
column-gap: 0; row-gap: 12px;
align-items: center; justify-items: stretch;
padding-left: var(--book-pad); padding-right: var(--book-pad-end);
padding-top: calc(16px + env(safe-area-inset-top, 0px));
padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}
html[data-fold="v"] .creigns-top { grid-area: top; width: 100%; max-width: none; }
html[data-fold="v"] .creigns-reign { grid-area: reign; margin-top: 0; }
html[data-fold="v"] .creigns-choices { display: contents; }
html[data-fold="v"] .creigns-cbtn.left { grid-area: cl; }
html[data-fold="v"] .creigns-cbtn.right { grid-area: cr; }
html[data-fold="v"] .creigns-cbtn { width: 100%; min-height: 56px; padding: 12px 14px; font-size: 0.9rem; }
html[data-fold="v"] .creigns-hint { grid-area: hint; margin: 0; justify-self: center; }
html[data-fold="v"] .creigns-stage {
grid-area: stage; align-self: stretch; justify-self: stretch;
width: 100%; height: 100%; min-height: 0; max-width: none; aspect-ratio: auto;
}
html[data-fold="v"] .creigns-deck { width: 100%; height: 100%; max-height: none; }
html[data-fold="v"] .creigns-card { flex-direction: column; width: 100%; height: 100%; max-height: 100%; }
html[data-fold="v"] .creigns-card-imgwrap {
flex: 0 1 auto; min-height: 0; max-height: 52%; padding: 16px 16px 6px; border-inline-end: 0;
}
html[data-fold="v"] .creigns-card-img { max-width: 88%; max-height: 100%; min-height: 0; align-self: center; }
html[data-fold="v"] .creigns-card-body {
flex: 1 1 auto; min-width: 0; min-height: 0; overflow-y: auto;
display: flex; flex-direction: column; justify-content: center;
text-align: center; padding: 6px 20px 18px;
}
html[data-fold="v"] .creigns-who { font-size: 1.2rem; }
html[data-fold="v"] .creigns-role { font-size: 0.72rem; }
html[data-fold="v"] .creigns-text { font-size: 0.98rem; margin-top: 10px; }
html[data-fold="v"] .creigns-overlay {
padding-bottom: max(26px, env(safe-area-inset-bottom, 0px));
}
html[data-fold="v"] :is(#atlas-study-screen, #mania-map-screen) > .atlas-page,
html[data-fold="v"] #history-screen > .history-page {
display: grid;
grid-template-columns: calc(var(--book-l) - 21px) var(--wf-fold-w) minmax(0, 1fr);
column-gap: 0; row-gap: 10px;
padding-left: 20px; padding-right: 20px;
height: calc(100vh - var(--shell-pt) - var(--shell-pb));
height: calc(100dvh - var(--shell-pt) - var(--shell-pb));
min-height: 0;
}
html[data-fold="v"] :is(#atlas-study-screen, #mania-map-screen, #history-screen) > .panel {
position: relative;
}
html[data-fold="v"] :is(#atlas-study-screen, #mania-map-screen, #history-screen) .page-topbar {
grid-area: topbar; margin-bottom: 0; gap: 10px; min-width: 0;
}
html[data-fold="v"] :is(#atlas-study-screen, #mania-map-screen, #history-screen) .page-title {
min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.5rem;
}
html[data-fold="v"] #atlas-study-screen .atlas-topbar-tools,
html[data-fold="v"] #mania-map-screen #mania-map-labels-btn {
position: absolute; top: 20px; min-height: 46px; margin: 0;
inset-inline-start: calc(var(--book-l) + var(--wf-fold-w) - 1px);
}
html[data-fold="v"] #atlas-study-screen .atlas-topbar-tools {
inset-inline-end: 20px; justify-content: flex-start;
}
html[data-fold="v"] #history-screen .page-topbar { display: flex; flex-wrap: wrap; align-items: center; row-gap: 8px; }
html[data-fold="v"] #history-screen .history-title { flex: 1 0 auto; max-width: calc(100% - 56px); }
html[data-fold="v"] :is(#atlas-study-map, #mania-map-screen .mania-map, #history-map) {
grid-area: map; align-self: stretch;
width: auto; height: auto; min-height: 0; max-height: none;
margin-block: 0; margin-inline: -20px 1px;
}
html[data-fold="v"] #atlas-study-screen > .atlas-page {
grid-template-areas: "topbar . hint" "map . hint";
grid-template-rows: auto minmax(0, 1fr);
}
html[data-fold="v"] #atlas-study-screen .atlas-hint {
grid-area: hint; align-self: center; justify-self: center; margin: 0; max-width: 320px;
font-size: 1.1rem; font-weight: 700; line-height: 1.45; opacity: 0.72; text-wrap: balance;
}
html[data-fold="v"] #mania-map-screen > .atlas-page {
grid-template-areas: "topbar . ." "map . flags" "hint . flags";
grid-template-rows: auto minmax(0, 1fr) auto;
}
html[data-fold="v"] #mania-map-screen .mania-map {
height: auto !important; flex: none !important; aspect-ratio: auto !important;
}
html[data-fold="v"] #mania-map-screen #mania-map-hint {
grid-area: hint; margin: 0; text-align: center; font-size: 0.86rem;
}
html[data-fold="v"] #mania-map-screen #mania-map-flags {
grid-area: flags; min-height: 0; margin: 0; align-content: start;
grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
}
html[data-fold="v"] #history-screen > .history-page {
grid-template-areas: "topbar . cats" "map . side" "map . note";
grid-template-rows: auto minmax(0, 1fr) auto;
}
html[data-fold="v"] #history-screen .history-cats { grid-area: cats; align-self: center; padding: 0; min-width: 0; }
html[data-fold="v"] #history-screen .history-side {
grid-area: side; display: grid; grid-template-rows: auto auto minmax(0, 1fr); min-height: 0; min-width: 0;
}
html[data-fold="v"] #history-screen .history-years { padding: 0 0 6px; }
html[data-fold="v"] #history-screen .history-legend { max-height: 96px; }
html[data-fold="v"] #history-screen .history-story {
margin-top: 6px; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}
html[data-fold="v"] #history-screen .history-note { grid-area: note; margin: 0; }
html[data-fold="v"]:has(:is(#atlas-study-screen, #history-screen):not([hidden])) #atlas-pick-modal {
background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; pointer-events: none;
padding-left: calc(var(--fold-r) + 16px);
padding-right: calc(16px + env(safe-area-inset-right, 0px));
}
html[data-fold="v"]:has(:is(#atlas-study-screen, #history-screen):not([hidden])) #atlas-pick-modal > .atlas-pick-card {
pointer-events: auto;
background: linear-gradient(var(--panel-strong), var(--panel-strong)), var(--bg);
border: 1px solid var(--line);
}
html[dir="rtl"][data-fold="v"]:has(:is(#atlas-study-screen, #history-screen):not([hidden])) #atlas-pick-modal {
padding-left: calc(16px + env(safe-area-inset-left, 0px));
padding-right: calc(100vw - var(--fold-l) + 16px);
}
html[data-fold="v"] #map-modal { padding-left: var(--book-pad); padding-right: var(--book-pad); }
html[data-fold="v"] #map-modal > .map-card {
width: 100%; max-width: none;
height: calc(100dvh - max(16px, env(safe-area-inset-top, 0px)) - max(16px, env(safe-area-inset-bottom, 0px)));
display: grid;
grid-template-columns: calc(var(--book-l) - 16px) var(--wf-fold-w) minmax(0, 1fr);
grid-template-rows: auto minmax(0, 1fr) auto auto minmax(0, 1fr) auto;
grid-template-areas:
"map . close"
"map . ."
"map . head"
"map . note"
"map . ."
"map . credit";
column-gap: 0;
}
html[data-fold="v"] #map-modal > .map-card > .map-close { grid-area: close; margin-block: 0; justify-self: end; }
html[data-fold="v"] #map-modal .map-header { grid-area: head; margin: 0 8px; }
html[data-fold="v"] #map-modal .map-modal-title { font-size: 1.5rem; }
html[data-fold="v"] #map-modal .map-modal-sub { font-size: 0.9rem; margin-top: 4px; }
html[data-fold="v"] #map-modal .map-modal-note { grid-area: note; margin: 14px 8px 0; }
html[data-fold="v"] #map-modal .map-credit { grid-area: credit; margin: 0 4px; }
html[data-fold="v"] #map-modal :is(#map-canvas, #map-globe, #map-sub) {
grid-area: map; align-self: stretch;
width: auto; height: auto; max-height: none; aspect-ratio: auto;
margin-block: 0; margin-inline: -8px 1px;
}
html[data-fold="v"] #map-modal #map-sub {
align-self: center; height: auto; max-height: 100%; aspect-ratio: 1.25;
}
html[data-fold="v"] #rankboard-modal:not(:has(#rb-list:empty)) {
padding-left: var(--book-pad); padding-right: var(--book-pad);
padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
}
html[data-fold="v"] #rankboard-modal:not(:has(#rb-list:empty)) .rankboard-card {
width: 100%; max-width: none;
height: calc(100dvh - 16px - max(16px, env(safe-area-inset-bottom, 0px)));
display: grid;
grid-template-columns: calc(var(--book-l) - 23px) var(--wf-fold-w) minmax(0, 1fr);
grid-template-areas: "title . list" "day . list" "tabs . list" "period . list" "note . list" "play . list";
grid-template-rows: auto auto auto auto auto minmax(0, 1fr);
column-gap: 0; row-gap: 8px; align-content: start;
}
html[data-fold="v"] #rankboard-modal:not(:has(#rb-list:empty)) .rankboard-title { grid-area: title; margin: 0; font-size: 1.5rem; }
html[data-fold="v"] #rankboard-modal:not(:has(#rb-list:empty)) #rb-day { grid-area: day; margin: 0; }
html[data-fold="v"] #rankboard-modal:not(:has(#rb-list:empty)) .rankboard-tabs { grid-area: tabs; margin: 8px 0 0; }
html[data-fold="v"] #rankboard-modal:not(:has(#rb-list:empty)) .rankboard-period { grid-area: period; margin: 0; }
html[data-fold="v"] #rankboard-modal:not(:has(#rb-list:empty)) .rankboard-period-note { grid-area: note; }
html[data-fold="v"] #rankboard-modal:not(:has(#rb-list:empty)) .rankboard-play { grid-area: play; align-self: end; margin: 0; min-height: 52px; }
html[data-fold="v"] #rankboard-modal:not(:has(#rb-list:empty)) .rankboard-list {
grid-area: list; margin: 0; min-width: 0; min-height: 0; max-height: none;
overflow-y: auto; padding-inline-end: 30px;
}
html[data-fold="v"] #rankboard-modal:not(:has(#rb-list:empty)) #rb-status { grid-area: list; align-self: start; min-width: 0; padding-inline-end: 30px; margin: 0; }
html[data-fold="v"] #rankboard-modal:not(:has(#rb-list:empty)) .rankboard-list { gap: 4px; }
html[data-fold="v"] #rankboard-modal:not(:has(#rb-list:empty)) .rankboard-list > .lb-row:not(.lb-row-ellipsis) { padding-block: 8px; }
html[data-fold="v"] #rankboard-modal:has(#rb-list:empty) .rankboard-card { height: auto; }
html[data-fold="v"] #rankboard-modal:has(#rb-list:empty) .rankboard-tabs { column-gap: var(--wf-fold-w); }
html[data-fold="v"] #legal-modal {
padding-left: calc(var(--fold-r) + 16px);
padding-right: calc(16px + env(safe-area-inset-right, 0px));
padding-bottom: max(20px, env(safe-area-inset-bottom, 0px));
}
html[data-fold="v"] .legal-card {
width: 100%; max-height: none;
height: calc(100dvh - 20px - max(20px, env(safe-area-inset-bottom, 0px)));
}
html[data-fold="v"] #atlas-detail-modal { padding-left: var(--book-pad); padding-right: var(--book-pad); }
html[data-fold="v"] .atlas-detail-card { width: 100%; max-width: none; padding-left: 26px; padding-right: 26px; }
html[data-fold="v"] .atlas-detail-scroll {
display: block; columns: 2; column-gap: var(--wf-fold-w); column-fill: balance;
}
html[data-fold="v"] .atlas-detail-card .study-detail-meta { break-before: column; margin-top: 0; }
html[data-fold="v"] :is(.atlas-detail-flagwrap, .atlas-detail-map, .atlas-detail-name) { break-inside: avoid; }
html[data-fold="v"] .atlas-detail-map { margin-top: 16px; }
}
@media (orientation: portrait) and (min-height: 800px) {
html[data-fold="h"] :is(#level-modal, #map-cat-modal, .confirm-modal, #onboarding-overlay) {
padding-bottom: calc(100vh - var(--fold-t) + 16px);
}
}
@media (orientation: portrait) and (min-height: 800px) {
html[data-fold="h"] .quiz-screen .quiz-panel {
--q-top: calc(var(--shell-pt) + 21px);
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows:
50px 18px
calc(var(--fold-t) - var(--q-top) - 68px - 12px)
calc(var(--wf-fold-h) + 24px)
auto minmax(0, 1fr);
row-gap: 0;
padding: 20px; margin-top: 0;
height: calc(100vh - var(--shell-pt) - var(--shell-pb));
height: calc(100dvh - var(--shell-pt) - var(--shell-pb));
min-height: 0; max-height: none;
}
html[data-fold="h"] .quiz-screen .quiz-panel > .top-bar { grid-row: 1; align-self: start; flex-wrap: nowrap; }
html[data-fold="h"] .quiz-screen .quiz-panel > .progress-track { grid-row: 2; align-self: start; margin: 10px 0 0; }
html[data-fold="h"] .quiz-screen .quiz-panel:not(.quiz-panel--map) > .flag-frame--quiz {
grid-row: 3; margin: 12px 0 0; min-height: 0; align-self: stretch;
display: flex; align-items: center; justify-content: center;
}
html[data-fold="h"] .quiz-screen .quiz-panel:not(.quiz-panel--map) #flag-image { max-height: 100%; max-width: min(100%, 560px); }
html[data-fold="h"] .quiz-screen .quiz-panel:not(.quiz-panel--map) > .prompt {
grid-row: 5; display: block; margin: 0 0 10px; font-size: 1.15rem; line-height: 1.3;
}
html[data-fold="h"] .quiz-screen .quiz-panel:not(.quiz-panel--map) > .options-grid {
grid-row: 6; grid-template-columns: minmax(0, 1fr) !important; grid-auto-rows: minmax(0, 1fr);
align-content: stretch; gap: 10px !important; margin: 0; min-height: 0;
}
html[data-fold="h"] .quiz-screen .quiz-panel:not(.quiz-panel--map) .option-button {
min-height: 0; padding: 10px 18px; font-size: 1rem;
}
html[data-fold="h"] .quiz-screen .quiz-panel--map {
grid-template-rows:
50px 18px
calc(var(--fold-t) - var(--q-top) - 68px - 12px)
calc(var(--wf-fold-h) + 24px)
auto minmax(0, 1fr);
grid-template-areas: "top" "prog" "media" "." "prompt" "options";
}
html[data-fold="h"] .quiz-screen .quiz-panel--map.quiz-panel--hunt {
grid-template-rows:
50px 18px
calc(var(--fold-t) - var(--q-top) - 68px - 12px)
calc(var(--wf-fold-h) + 24px)
minmax(0, 1fr) auto auto auto;
grid-template-areas: "top" "prog" "media" "." "flag" "prompt" "hintcard" "hint";
}
html[data-fold="h"] .quiz-screen .quiz-panel--map > .top-bar { grid-area: top; }
html[data-fold="h"] .quiz-screen .quiz-panel--map > .progress-track { grid-area: prog; }
html[data-fold="h"] .quiz-screen .quiz-panel--map #quiz-globe.quiz-map,
html[data-fold="h"] .quiz-screen .quiz-panel--map #quiz-map.quiz-map {
grid-area: media; flex: none; align-self: stretch;
width: auto; height: auto; min-height: 0; max-height: none;
margin: 12px -20px 0;
}
html[data-fold="h"] .quiz-screen .quiz-panel--map > .prompt { grid-area: prompt; margin: 0 0 10px; font-size: 1.15rem; }
html[data-fold="h"] .quiz-screen .quiz-panel--map > .options-grid {
grid-area: options; grid-template-columns: minmax(0, 1fr) !important; grid-auto-rows: minmax(0, 1fr);
align-content: stretch; gap: 10px !important; margin: 0; min-height: 0;
}
html[data-fold="h"] .quiz-screen .quiz-panel--map .option-button { min-height: 0 !important; }
html[data-fold="h"] .quiz-screen .quiz-panel--hunt > .options-grid { display: none; }
html[data-fold="h"] .quiz-screen .quiz-panel--hunt > #quiz-flag-frame.flag-frame--hunt {
grid-area: flag; align-self: center; justify-self: center;
max-width: 260px; max-height: 100%; margin: 0 0 10px; min-height: 0;
}
html[data-fold="h"] .quiz-screen .quiz-panel--hunt .flag-frame--hunt #flag-image { max-height: 150px; }
html[data-fold="h"] .quiz-screen .quiz-panel--map > .map-hint-card {
grid-area: hintcard; margin: 0 0 10px; max-width: none; justify-self: stretch;
}
html[data-fold="h"] .quiz-screen .quiz-panel--map > .map-hint-btn,
html[data-fold="h"] .quiz-screen .quiz-panel--map .map-hint-card:not([hidden]) ~ .map-hint-btn {
grid-area: hint; margin: 0; justify-self: center;
}
html[data-fold="h"] .quiz-screen .quiz-panel--hunt .atlas-flip { bottom: 10px; }
html[data-fold="h"] body.has-tabbar {
--h-low: calc(100vh - var(--shell-pb) - var(--fold-b) - 12px);
--h-low: calc(100dvh - var(--shell-pb) - var(--fold-b) - 12px);
}
html[data-fold="h"] .home-screen:not([hidden]) {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
grid-template-rows: auto auto minmax(0, 1fr) var(--wf-fold-h)
minmax(calc((var(--h-low) - 12px) / 2), auto) minmax(calc((var(--h-low) - 12px) / 2), auto);
grid-template-areas: "ribbon ribbon" "progress progress" "ranked ranked" "band band" "daily surv" "time cup";
gap: 12px;
padding-bottom: 0;
}
html[data-fold="h"] .home-screen:not([hidden])::before {
content: ""; grid-row: 1 / 4; grid-column: 1 / -1; pointer-events: none;
height: calc(var(--fold-t) - var(--shell-pt) - 36px - 12px);
}
html[data-fold="h"] .home-screen:not([hidden]):has(#leaderboard-btn[hidden]) {
grid-template-areas: "ribbon ribbon" "progress progress" "progress progress" "band band" "daily surv" "time cup";
}
html[data-fold="h"] .home-screen #home-progress { align-items: center; }
html[data-fold="h"] .home-screen > .stats-ribbon { align-items: stretch; }
html[data-fold="h"] .home-screen .ribbon-cell { justify-content: center; gap: 4px; }
html[data-fold="h"] .home-screen .ribbon-v { font-size: 1.45rem; }
html[data-fold="h"] .home-screen .ribbon-flag { height: 40px; width: auto; }
html[data-fold="h"] .home-screen #leaderboard-btn {
flex-direction: column; align-items: flex-start; justify-content: flex-end;
gap: 6px; min-height: 0; padding: 22px 24px 20px;
}
html[data-fold="h"] .home-screen #leaderboard-btn .icon { font-size: 56px; margin-bottom: auto; }
html[data-fold="h"] .home-screen #leaderboard-btn .body { flex: 0 0 auto; gap: 4px; }
html[data-fold="h"] .home-screen #leaderboard-btn .t { font-size: 1.6rem; }
html[data-fold="h"] .home-screen #leaderboard-btn .d { font-size: 0.95rem; }
html[data-fold="h"] .home-screen #leaderboard-btn > .corner-group {
position: absolute; top: 20px; inset-inline-end: 20px; margin: 0;
}
html[data-fold="h"] .home-screen #leaderboard-btn { container: wf-ranked / size; }
@container wf-ranked (height < calc(66px + 3.25rem)) {
html[data-fold="h"] .home-screen #leaderboard-btn .icon {
position: absolute; inset-inline-start: 24px; top: 0; bottom: 0; margin: auto 0; height: fit-content;
font-size: 48px;
}
html[data-fold="h"] .home-screen #leaderboard-btn .body {
position: absolute; inset-inline: calc(24px + 48px + 16px) 24px; top: 0; bottom: 0; margin: auto 0; height: fit-content;
}
}
html[data-fold="h"] .home-screen > .mode-grid { display: contents; }
html[data-fold="h"] .home-screen > * { margin: 0; min-width: 0; }
html[data-fold="h"] .home-screen .stats-ribbon { grid-area: ribbon; }
html[data-fold="h"] .home-screen > .home-progress-row { grid-area: progress; margin: 0; }
html[data-fold="h"] body.has-tabbar .home-screen:not([hidden]) { min-height: 0; }
html[data-fold="h"] .home-screen #leaderboard-btn { grid-area: ranked; margin: 0; }
html[data-fold="h"] .home-screen #daily-btn { grid-area: daily; margin: 0; }
html[data-fold="h"] .home-screen #survival-btn { grid-area: surv; margin: 0; }
html[data-fold="h"] .home-screen #timeattack-btn { grid-area: time; margin: 0; }
html[data-fold="h"] .home-screen #worldcup-btn { grid-area: cup; margin: 0; }
html[data-fold="h"] .home-screen .mode-grid > .fm-mode {
min-height: 0;
padding-block: clamp(6px, calc((var(--h-low, 1000px) - 12px) / 4 - (54px + 2.25rem) / 2 - 1.5px), 12px);
}
html[data-fold="h"] .home-screen > .mode-grid > .fm-mode.pro-mode { display: none; }
html[data-fold="h"] .home-screen > .home-progress-row:has(> .pro-mini:not([hidden])) {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 12px;
}
html[data-fold="h"] .home-progress-row > .pro-mini:not([hidden]) {
display: flex; flex-direction: column; justify-content: space-between; gap: 8px;
min-width: 0; padding: 10px 12px; border-radius: 20px;
font: inherit; text-align: start; color: var(--text); cursor: pointer; -webkit-tap-highlight-color: transparent;
border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
background:
linear-gradient(120deg, color-mix(in srgb, var(--gold) 12%, transparent), transparent 70%),
var(--paper-card);
}
html[data-fold="h"][dir="rtl"] .home-progress-row > .pro-mini:not([hidden]) {
background:
linear-gradient(240deg, color-mix(in srgb, var(--gold) 12%, transparent), transparent 70%),
var(--paper-card);
}
html[data-fold="h"] .home-progress-row > .pro-mini:active { transform: scale(0.995); }
html[data-fold="h"] .pro-mini > .pro-mini-top { order: -1; display: flex; align-items: center; justify-content: space-between; gap: 6px; }
html[data-fold="h"] .pro-mini .icon { font-size: 28px; line-height: 1; flex: 0 0 auto; }
html[data-fold="h"] .pro-mini .pro-mode-price {
flex: 0 0 auto; white-space: nowrap;
font-family: var(--font-mono); font-weight: 700; font-size: 0.74rem;
padding: 3px 9px; border-radius: 999px;
color: var(--gold); background: var(--paper-card);
border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
}
html[data-fold="h"][data-theme="dark"] .pro-mini .pro-mode-price { background: color-mix(in srgb, #000 16%, transparent); }
html[data-fold="h"] .pro-mini > .pro-mini-t {
font-family: var(--font-serif); font-weight: 700; font-size: 0.98rem; line-height: 1.2; text-wrap: balance; overflow-wrap: anywhere;
}
html[data-fold="h"] .home-progress-row:has(> .pro-mini:not([hidden])) > .home-progress { padding: 10px 11px; gap: 8px; }
html[data-fold="h"] .home-progress-row:has(> .pro-mini:not([hidden])) .home-progress-head { flex-wrap: wrap; row-gap: 0; }
html[data-fold="h"] .home-progress-row:has(> .pro-mini:not([hidden])) :is(.home-progress-head .xp-label, .home-next-reward) { display: none; }
html[data-fold="h"] .home-progress-row:has(> .pro-mini:not([hidden])) .home-rank-name {
flex-basis: 100%; overflow-wrap: anywhere;
white-space: normal; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
}
html[data-fold="h"] body.has-tabbar .practice-panel {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
grid-template-rows: auto auto minmax(0, 1fr) minmax(0, 1fr) var(--wf-fold-h)
minmax(calc((var(--h-low) - 21px - 24px - 24px) / 2), auto) 24px
minmax(calc((var(--h-low) - 21px - 24px - 24px) / 2), auto);
gap: 12px;
min-height: 0;
}
html[data-fold="h"] body.has-tabbar .practice-panel::before {
content: ""; grid-row: 1 / 5; grid-column: 1 / -1; pointer-events: none;
height: calc(var(--fold-t) - var(--shell-pt) - 21px - 12px);
}
html[data-fold="h"] .practice-panel > .practice-grid { display: contents; }
html[data-fold="h"] .practice-panel > * { margin: 0; }
html[data-fold="h"] .practice-panel > .page-topbar { grid-row: 1; grid-column: 1 / -1; }
html[data-fold="h"] .practice-panel > .practice-sub { grid-row: 2; grid-column: 1 / -1; }
html[data-fold="h"] .practice-panel > .section-eyebrow { grid-row: 7; grid-column: 1 / -1; align-self: end; margin: 0 4px; }
html[data-fold="h"] .practice-panel .fm-mode { min-height: 0; margin: 0; padding-block: 12px; }
html[data-fold="h"] .practice-panel > .practice-grid:not(:last-of-type) > .fm-mode:nth-child(-n+6) .t { font-size: 1.1rem; }
html[data-fold="h"] .practice-panel > .practice-grid:not(:last-of-type) > :nth-child(-n+3) { grid-row: 3; }
html[data-fold="h"] .practice-panel > .practice-grid:not(:last-of-type) > :nth-child(n+4):nth-child(-n+6) { grid-row: 4; }
html[data-fold="h"] .practice-panel > .practice-grid:not(:last-of-type) > :is(:nth-child(1), :nth-child(4)) { grid-column: 1 / span 2; }
html[data-fold="h"] .practice-panel > .practice-grid:not(:last-of-type) > :is(:nth-child(2), :nth-child(5)) { grid-column: 3 / span 2; }
html[data-fold="h"] .practice-panel > .practice-grid:not(:last-of-type) > :is(:nth-child(3), :nth-child(6)) { grid-column: 5 / span 2; }
html[data-fold="h"] .practice-panel > .practice-grid:not(:last-of-type) > :nth-child(7) { grid-row: 6; grid-column: 1 / span 3; }
html[data-fold="h"] .practice-panel > .practice-grid:not(:last-of-type) > :nth-child(8) { grid-row: 6; grid-column: 4 / span 3; }
html[data-fold="h"] .practice-panel > .practice-grid:last-of-type > :nth-child(1) { grid-row: 8; grid-column: 1 / span 3; }
html[data-fold="h"] .practice-panel > .practice-grid:last-of-type > :nth-child(2) { grid-row: 8; grid-column: 4 / span 3; }
html[data-fold="h"] body.has-tabbar #study-regions-screen > .panel {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto auto minmax(0, 1fr) var(--wf-fold-h) minmax(calc(var(--h-low) - 21px), auto);
gap: 12px;
min-height: 0;
}
html[data-fold="h"] body.has-tabbar #study-regions-screen > .panel::before {
content: ""; grid-row: 1 / 4; grid-column: 1; pointer-events: none;
height: calc(var(--fold-t) - var(--shell-pt) - 21px - 12px);
}
html[data-fold="h"] #study-regions-screen > .panel > * { margin: 0; grid-column: 1; }
html[data-fold="h"] #study-regions-screen > .panel > .page-topbar { grid-row: 1; }
html[data-fold="h"] #study-regions-screen > .panel > .study-regions-sub { grid-row: 2; }
html[data-fold="h"] #study-regions-screen > .panel > .study-regions-grid {
grid-row: 3; grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr);
align-self: stretch; align-content: stretch;
}
html[data-fold="h"] #study-regions-screen > .panel > .study-cta-pair { grid-row: 5; }
html[data-fold="h"] #study-regions-screen .study-region-card .srg-icon { font-size: 42px; margin-bottom: auto; }
html[data-fold="h"] #study-regions-screen .study-region-card .srg-name { font-size: 1.15rem; }
html[data-fold="h"] #study-regions-screen .atlas-study-cta { min-height: 0; }
html[data-fold="h"] .study-list,
html[data-fold="h"] .stage-list,
html[data-fold="h"] .achievements-list,
html[data-fold="h"] .wrong-answers-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html[data-fold="h"] .results-stats { width: 100%; max-width: 400px; margin-left: auto; margin-right: auto; }
html[data-fold="h"] :is(.stage-panel, .achievements-panel, .study-page:has(> .study-list)) {
--wf-pad: 20px;
padding-top: var(--wf-pad); padding-bottom: var(--wf-pad);
}
@media (max-width: 640px) {
html[data-fold="h"] :is(.stage-panel, .achievements-panel, .study-page:has(> .study-list)) { --wf-pad: 16px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
html[data-fold="h"] :is(.stage-panel, .achievements-panel, .study-page:has(> .study-list)) { --wf-pad: 28px; }
}
@media (min-width: 1024px) and (max-width: 1365px) {
html[data-fold="h"] :is(.stage-panel, .achievements-panel, .study-page:has(> .study-list)) { --wf-pad: 32px; }
}
@media (min-width: 1366px) {
html[data-fold="h"] :is(.stage-panel, .achievements-panel, .study-page:has(> .study-list)) { --wf-pad: 36px; }
}
html[data-fold="h"] .stage-panel { --wf-lg: 12px; }
html[data-fold="h"] .achievements-panel { --wf-lg: 10px; }
html[data-fold="h"] :is(.stage-panel, .achievements-panel) {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: max-content max-content auto calc(var(--wf-fold-h) + 24px - 3 * var(--wf-lg));
grid-auto-rows: auto;
gap: var(--wf-lg);
align-content: start;
}
html[data-fold="h"] :is(.stage-panel, .achievements-panel)::before {
content: ""; grid-row: 1 / 4; grid-column: 1 / -1; pointer-events: none;
height: calc(var(--fold-t) - 12px + var(--wf-lg) - var(--shell-pt) - 1px - var(--wf-pad));
}
html[data-fold="h"] :is(.stage-panel, .achievements-panel)::after {
content: ""; grid-row: 4; grid-column: 1 / -1; pointer-events: none;
}
html[data-fold="h"] :is(.stage-panel, .achievements-panel) > .page-topbar {
grid-row: 1; grid-column: 1 / -1; margin-bottom: calc(18px - var(--wf-lg));
}
html[data-fold="h"] :is(.stage-panel > .stage-list, .achievements-panel > .achievements-list) { display: contents; }
html[data-fold="h"] :is(.stage-panel > .stage-list, .achievements-panel > .achievements-list) > :nth-child(1) { grid-row: 2; grid-column: 1; }
html[data-fold="h"] :is(.stage-panel > .stage-list, .achievements-panel > .achievements-list) > :nth-child(2) { grid-row: 2; grid-column: 2; }
html[data-fold="h"] .study-page > .study-list {
--wf-lg: 12px;
container-type: size;
grid-auto-rows: auto;
row-gap: var(--wf-lg);
align-content: start;
}
html[data-fold="h"] .study-page > .study-list::before {
content: ""; grid-row: 1; grid-column: 1 / -1; pointer-events: none;
height: calc(var(--fold-b) + 12px - var(--wf-lg) - (100vh - var(--shell-pb) - 1px - var(--wf-pad) - 100cqh));
height: calc(var(--fold-b) + 12px - var(--wf-lg) - (100dvh - var(--shell-pb) - 1px - var(--wf-pad) - 100cqh));
}
html[data-fold="h"] .results-panel {
display: grid; grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto auto minmax(0, 1fr) calc(var(--wf-fold-h) - 12px);
grid-auto-rows: auto;
row-gap: 12px;
}
html[data-fold="h"] .results-panel::before {
content: ""; grid-row: 1 / 4; grid-column: 1; pointer-events: none;
height: calc(var(--fold-t) - var(--shell-pt) - 27px);
}
html[data-fold="h"] .results-panel::after {
content: ""; grid-row: 4; grid-column: 1; pointer-events: none;
}
html[data-fold="h"] .results-panel > * { grid-column: 1; margin-top: 0; margin-bottom: 0; }
html[data-fold="h"] .results-panel > .results-header { grid-row: 1; }
html[data-fold="h"] .results-panel > .results-stats {
grid-row: 2; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; max-width: none;
}
html[data-fold="h"] .results-panel > .results-actions { margin-top: 8px; }
html[data-fold="h"] #mania-map-pick { padding-top: 16px; padding-bottom: calc(100vh - var(--fold-t) + 16px); }
html[data-fold="h"] #stats-modal {
padding-bottom: calc(100vh - var(--fold-b) - 12px - 120px - 18px);
}
html[data-fold="h"] #stats-modal > .stats-card { margin-block: auto 0; }
html[data-fold="h"] #stats-modal .stats-body { margin-bottom: 0; }
html[data-fold="h"] #stats-modal .stats-actions {
margin-top: calc(var(--wf-fold-h) + 20px);
height: 120px; grid-auto-rows: 56px; align-content: start;
}
html[data-fold="h"] #stats-modal .stats-btn { height: 100%; padding-block: 0; }
html[data-fold="h"] #charge-modal { padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
html[data-fold="h"] #charge-modal > .charge-card {
margin-block: auto 0;
display: grid; grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto auto auto auto calc(var(--wf-fold-h) + 24px) auto auto auto auto minmax(0, 1fr);
row-gap: 0;
}
html[data-fold="h"] #charge-modal > .charge-card::after {
content: ""; grid-row: 5 / 11; grid-column: 1; pointer-events: none;
height: calc(100vh - env(safe-area-inset-bottom, 0px) - 16px - 20px - var(--fold-t) + 12px);
}
html[data-fold="h"] #charge-modal > .charge-card > * { grid-column: 1; }
html[data-fold="h"] #charge-modal > .charge-card > .charge-close { grid-row: 1; justify-self: end; }
html[data-fold="h"] #charge-modal > .charge-card > .charge-header { grid-row: 2; }
html[data-fold="h"] #charge-modal > .charge-card > .charge-sub { grid-row: 3; }
html[data-fold="h"] #charge-modal > .charge-card > .charge-status { grid-row: 4; }
html[data-fold="h"] #charge-modal > .charge-card > .charge-options { grid-row: 6; }
html[data-fold="h"] #charge-modal > .charge-card > .charge-free { grid-row: 7; }
html[data-fold="h"] #charge-modal > .charge-card > .charge-restore { grid-row: 8; }
html[data-fold="h"] #charge-modal > .charge-card > .charge-legal { grid-row: 9; }
html[data-fold="h"] #dailyflag-modal { padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
html[data-fold="h"] #dailyflag-modal > .dailyflag-card {
margin-block: auto 0;
display: grid; grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto auto auto auto auto auto calc(var(--wf-fold-h) + 24px) minmax(0, 1fr) auto auto;
row-gap: 0;
}
html[data-fold="h"] #dailyflag-modal > .dailyflag-card::after {
content: ""; grid-row: 7 / 11; grid-column: 1; pointer-events: none;
height: calc(100vh - env(safe-area-inset-bottom, 0px) - 16px - 18px - var(--fold-t) + 12px);
}
html[data-fold="h"] #dailyflag-modal > .dailyflag-card > * { grid-column: 1; }
html[data-fold="h"] .dailyflag-card > .dailyflag-close { grid-row: 1; justify-self: end; }
html[data-fold="h"] .dailyflag-card > .dailyflag-eyebrow { grid-row: 2; }
html[data-fold="h"] .dailyflag-card > .dailyflag-flagwrap { grid-row: 3; justify-self: center; }
html[data-fold="h"] .dailyflag-card > .dailyflag-name { grid-row: 4; }
html[data-fold="h"] .dailyflag-card > .dailyflag-sub { grid-row: 5; }
html[data-fold="h"] .dailyflag-card > .dailyflag-tap { grid-row: 6; }
html[data-fold="h"] .dailyflag-card > .dailyflag-note { grid-row: 9; }
html[data-fold="h"] .dailyflag-card > .dailyflag-ok { grid-row: 10; }
html[data-fold="h"] #dailyflag-modal #dailyflag-map.map-canvas,
html[data-fold="h"] #dailyflag-modal #dailyflag-globe {
grid-row: 8; align-self: stretch;
aspect-ratio: auto; height: auto; min-height: 0; max-height: none; margin-top: 0; margin-bottom: 0;
contain: size;
}
html[data-fold="h"] #map-modal { padding-top: 16px; padding-bottom: 16px; }
html[data-fold="h"] #map-modal > .map-card {
margin-block: 0 auto;
height: calc(var(--fold-t) - 12px - 16px);
display: grid; grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto auto minmax(0, 1fr) auto auto;
}
html[data-fold="h"] #map-modal > .map-card > * { grid-column: 1; }
html[data-fold="h"] #map-modal .map-close { grid-row: 1; justify-self: end; }
html[data-fold="h"] #map-modal .map-header { grid-row: 2; }
html[data-fold="h"] #map-modal .map-modal-note { grid-row: 4; }
html[data-fold="h"] #map-modal .map-credit { grid-row: 5; }
html[data-fold="h"] #map-modal .map-canvas,
html[data-fold="h"] #map-modal #map-globe {
grid-row: 3; align-self: stretch;
aspect-ratio: auto; height: auto; min-height: 0; max-height: none;
}
html[data-fold="h"] #atlas-pick-modal {
padding-top: calc(var(--fold-b) + 16px);
padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}
html[data-fold="h"] #pro-modal:has(#pro-buy-btn:not([hidden])) {
padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}
html[data-fold="h"] #pro-modal:has(#pro-buy-btn:not([hidden])) > .pro-card {
margin-block: auto 0;
display: grid; grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto auto auto auto auto calc(var(--wf-fold-h) + 24px) auto auto auto auto auto minmax(0, 1fr);
row-gap: 0;
}
html[data-fold="h"] #pro-modal:has(#pro-buy-btn:not([hidden])) > .pro-card::after {
content: ""; grid-row: 6 / 13; grid-column: 1; pointer-events: none;
height: calc(100vh - env(safe-area-inset-bottom, 0px) - 16px - 20px - var(--fold-t) + 12px);
}
html[data-fold="h"] #pro-modal:has(#pro-buy-btn:not([hidden])) > .pro-card > :not(.pro-close) { grid-column: 1; }
html[data-fold="h"] #pro-modal:has(#pro-buy-btn:not([hidden])) > .pro-card > .pro-close {
position: absolute; top: 12px; inset-inline-end: 12px; margin: 0;
}
html[data-fold="h"] #pro-modal:has(#pro-buy-btn:not([hidden])) .pro-hero { grid-row: 1; }
html[data-fold="h"] #pro-modal:has(#pro-buy-btn:not([hidden])) #pro-title { grid-row: 2; }
html[data-fold="h"] #pro-modal:has(#pro-buy-btn:not([hidden])) #pro-subtitle { grid-row: 3; }
html[data-fold="h"] #pro-modal:has(#pro-buy-btn:not([hidden])) .pro-benefits { grid-row: 4; }
html[data-fold="h"] #pro-modal:has(#pro-buy-btn:not([hidden])) #pro-price-row { grid-row: 5; }
html[data-fold="h"] #pro-modal:has(#pro-buy-btn:not([hidden])) #pro-buy-btn { grid-row: 7; }
html[data-fold="h"] #pro-modal:has(#pro-buy-btn:not([hidden])) #pro-restore-btn { grid-row: 8; }
html[data-fold="h"] #pro-modal:has(#pro-buy-btn:not([hidden])) #pro-status { grid-row: 9; }
html[data-fold="h"] #pro-modal:has(#pro-buy-btn:not([hidden])) #pro-fineprint { grid-row: 10; }
html[data-fold="h"] #pro-modal:has(#pro-buy-btn:not([hidden])) .pro-links { grid-row: 11; }
html[data-fold="h"] #atlas-study-screen .atlas-page {
display: grid; grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto minmax(0, 1fr) auto;
row-gap: 12px;
height: calc(100vh - var(--shell-pt) - var(--shell-pb));
height: calc(100dvh - var(--shell-pt) - var(--shell-pb));
min-height: 0;
}
html[data-fold="h"] #atlas-study-screen .atlas-page > * { grid-column: 1; margin-top: 0; margin-bottom: 0; }
html[data-fold="h"] #atlas-study-screen .atlas-page > .page-topbar { grid-row: 1; }
html[data-fold="h"] #atlas-study-screen .atlas-study-map {
grid-row: 2; height: auto; min-height: 0; max-height: none; margin: 0 -20px; width: auto;
contain: size;
}
html[data-fold="h"] #atlas-study-screen .atlas-hint { grid-row: 3; align-self: start; }
html[data-fold="h"] .history-page {
display: grid; grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto auto minmax(0, 1fr) var(--wf-fold-h) auto auto;
row-gap: 12px;
}
html[data-fold="h"] .history-page::before {
content: ""; grid-row: 1 / 4; grid-column: 1; pointer-events: none;
height: calc(var(--fold-t) - 12px - var(--shell-pt) - 21px);
}
html[data-fold="h"] .history-page > * { grid-column: 1; margin-top: 0; margin-bottom: 0; }
html[data-fold="h"] .history-page > .page-topbar { grid-row: 1; }
html[data-fold="h"] .history-page > .history-cats { grid-row: 2; }
html[data-fold="h"] .history-page > .history-map { grid-row: 3; height: auto; min-height: 0; margin: 0 -20px; width: auto; contain: size; }
html[data-fold="h"] .history-page > .history-side { grid-row: 5; }
html[data-fold="h"] .history-page > .history-note { grid-row: 6; }
html[data-fold="h"] :is(.froute-body:has(> .froute-globe), .amem-body:has(> .amem-globe)) {
flex: 0 0 auto;
display: grid; grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto minmax(0, 1fr) calc(var(--wf-fold-h) + 8px);
row-gap: 8px;
}
html[data-fold="h"] :is(.froute-body:has(> .froute-globe), .amem-body:has(> .amem-globe))::before {
content: ""; grid-row: 1 / 4; grid-column: 1; pointer-events: none;
height: calc(var(--fold-b) + 4px - 60px - env(safe-area-inset-top, 0px));
}
html[data-fold="h"] :is(.froute-body:has(> .froute-globe), .amem-body:has(> .amem-globe)) > * { grid-column: 1; }
html[data-fold="h"] :is(.froute-body, .amem-body) > :is(.froute-bar, .amem-bar) { grid-row: 1; }
html[data-fold="h"] :is(.froute-body, .amem-body) > :is(.froute-globe, .amem-globe) { grid-row: 2; min-height: 0; contain: size; }
html[data-fold="h"] .froute-body > .froute-choices { grid-auto-rows: minmax(64px, auto); }
html[data-fold="h"] .froute-body:has(> .froute-globe) {
flex: 1 1 auto;
grid-template-rows:
calc(var(--fold-t) - 12px - 60px - env(safe-area-inset-top, 0px))
calc(var(--wf-fold-h) + 8px)
auto 36px minmax(0, 1fr) auto auto;
}
html[data-fold="h"] .froute-body:has(> .froute-globe)::before { grid-row: 2; height: auto; }
html[data-fold="h"] .froute-body:has(> .froute-globe) > .froute-globe { grid-row: 1; }
html[data-fold="h"] .froute-body:has(> .froute-globe) > .froute-bar { grid-row: 3; }
html[data-fold="h"] .froute-body:has(> .froute-globe) > .froute-pick { grid-row: 4; align-self: center; margin: 0; }
html[data-fold="h"] .froute-body:has(> .froute-globe) > .froute-toast { grid-row: 4; align-self: center; z-index: 1; }
html[data-fold="h"] .froute-body:has(> .froute-globe) > .froute-choices {
grid-row: 5; grid-auto-rows: minmax(64px, 1fr); align-content: stretch; min-height: 0;
}
html[data-fold="h"] .froute-body:has(> .froute-globe) > .froute-giveup { grid-row: 6; }
html[data-fold="h"] .froute-body:has(> .froute-globe) > .froute-note { grid-row: 7; }
html[data-fold="h"] .froute-body:has(> .froute-globe) .froute-choice { gap: 14px; padding: 10px 16px; }
html[data-fold="h"] .froute-body:has(> .froute-globe) .froute-choice .froute-flag { width: 66px; height: 44px; }
html[data-fold="h"] .froute-body:has(> .froute-globe) .froute-choice-name { font-size: 1.02rem; }
html[data-fold="h"] .froute-body:has(> .froute-globe) .froute-bar .froute-flag { width: 72px; height: 48px; }
html[data-fold="h"] .amem-body > .amem-choices { grid-auto-rows: minmax(60px, auto); }
html[data-fold="h"] .froute-body > .froute-giveup { justify-self: center; }
html[data-fold="h"] .creigns-root {
padding-bottom: calc(100vh - var(--fold-t) + 12px);
}
html[data-fold="h"] .creigns-root .creigns-card-imgwrap { min-height: 0; padding: 10px 12px 4px; }
html[data-fold="h"] .creigns-root .creigns-card-img { max-height: 120px; }
html[data-fold="h"] .creigns-root > .creigns-choices {
position: absolute; top: calc(var(--fold-b) + 16px); left: 0; right: 0; margin: 0 auto;
width: min(360px, calc(100% - 24px)); height: 112px;
}
html[data-fold="h"] .creigns-root > .creigns-hint {
position: absolute; top: calc(var(--fold-b) + 16px + 112px + 14px); left: 0; right: 0; margin: 0 auto;
width: fit-content; max-width: calc(100% - 24px); text-align: center;
}
html[data-fold="h"] .drawer-panel > .drawer-rows { flex: 1 1 auto; }
html[data-fold="h"] .drawer-rows > .drawer-sep { margin-top: auto; }
}
@media (orientation: portrait) {
html[data-display] :is(#dailyflag-modal, #charge-modal, #level-modal, #levelup-modal, #map-cat-modal,
#atlas-pick-modal, .confirm-modal, .mania-pick) {
padding-left: max(24px, calc(env(safe-area-inset-left, 0px) + 8px));
padding-right: max(24px, calc(env(safe-area-inset-right, 0px) + 8px));
}
html[data-display] :is(#rankboard-modal, #map-modal) {
padding-left: max(16px, calc(env(safe-area-inset-left, 0px) + 8px));
padding-right: max(16px, calc(env(safe-area-inset-right, 0px) + 8px));
}
html[data-display] :is(#legal-modal, #stats-modal, #onboarding-overlay) {
padding-left: max(20px, calc(env(safe-area-inset-left, 0px) + 8px));
padding-right: max(20px, calc(env(safe-area-inset-right, 0px) + 8px));
}
html[data-display] #atlas-detail-modal {
padding-left: max(18px, calc(env(safe-area-inset-left, 0px) + 8px));
padding-right: max(18px, calc(env(safe-area-inset-right, 0px) + 8px));
}
html[data-display] .creigns-root {
padding-left: max(12px, calc(env(safe-area-inset-left, 0px) + 8px));
padding-right: max(12px, calc(env(safe-area-inset-right, 0px) + 8px));
}
html[data-display] :is(.amem-root, .froute-root) {
padding-left: max(14px, calc(env(safe-area-inset-left, 0px) + 8px));
padding-right: max(14px, calc(env(safe-area-inset-right, 0px) + 8px));
}
html[data-display] .creigns-overlay {
padding-left: max(26px, calc(env(safe-area-inset-left, 0px) + 8px));
padding-right: max(26px, calc(env(safe-area-inset-right, 0px) + 8px));
}
html[data-display] .drawer-panel { padding-inline-start: max(16px, calc(var(--sai-start) + 8px)); }
html[data-display] .feedback-card {
max-width: calc(100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px) - 24px);
}
html[data-display] :is(.achievement-toast, .lb-toast, .combo-toast) {
left: calc((env(safe-area-inset-left, 0px) + 100vw - env(safe-area-inset-right, 0px)) / 2);
max-width: calc(100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px) - 32px);
}
html[data-display] .lb-toast {
max-width: min(86vw, calc(100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px) - 32px));
}
html[data-display] .achievement-toast.is-msg {
max-width: min(86vw, 380px, calc(100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px) - 32px));
}
html[data-display] .combo-toast--reward {
max-width: min(86vw, 340px, calc(100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px) - 32px));
}
}