/* Additions for the PWA version (account screens, offline state, updates). */

html, body {margin: 0; overscroll-behavior: none;}

.account-screen {position: fixed; inset: 0; z-index: 18; overflow: auto; background-color: var(--global-background-color);}
/* phones: the game blocks touch panning (Taktikers are dragged), these screens must scroll */
.account-screen, .account-screen * {touch-action: pan-y;}
.account-screen {overscroll-behavior: contain;}
.account-screen .info-frame-container {padding-top: max(12vh, 40px);}
.account-close {position: absolute; top: 4px; right: 10px; border: none; background: none; font-size: 28px; line-height: 1; cursor: pointer; padding: 0 4px;}
.account-close[hidden], .btn-alt[hidden] {display: none;}
.btn-alt {float: left;}
.account-switch {font-family: Como, sans-serif; font-size: 15px; margin: 30px 0 0; text-align: left; padding-left: 10%;}
.account-switch a {text-decoration: underline; cursor: pointer;}
.account-switch:empty {display: none;}
.radios {padding: 8px 0;}
.message {top: -40px; max-height: 70px; padding: 4px 6px;}
.message.off {display: none;}
#tryBanner {position: fixed; top: 0; left: 50%; transform: translateX(-50%); z-index: 50; max-width: 90vw; padding: 4px 12px; border-radius: 0 0 8px 8px; background: #333; color: #fff; font-size: 13px; text-align: center;}	/* a stage tried from the level editor */
#tryBanner * {color: inherit;}

.offline-badge {position: absolute; top: 2px; right: calc(var(--buttonSize) + 10px); font-family: Como, sans-serif; font-size: 13px;
	padding: 0 8px; border: 1px solid; border-radius: 10px; background-color: var(--box-background-color); z-index: 3;}
.menu-item[hidden], .radio-frame[hidden] {display: none;}
.movable {touch-action: none; cursor: grab;}
.movable:active {cursor: grabbing;}

/* Tap to place: selected Taktiker, and the empty cells where it can go */
.movable.selected-shape {outline: 3px solid var(--global-text-color); outline-offset: 2px; animation: selected-pulse 1.2s ease-in-out infinite;}
@keyframes selected-pulse {50% {outline-color: transparent;}}
#holder.placing .board-cell:not(:has(.shape-in-place)) {box-shadow: inset 0 0 0 2px var(--global-text-color); cursor: pointer;}

/* Settings / my account */
.settings-frame {text-align: left; padding: 10px 20px 20px;}
.settings-frame h1, #settingsHello {text-align: center;}
.settings-section {margin-top: 18px; padding-top: 12px; border-top: 2px solid var(--grid-background-color);}
.settings-section h3 {font-family: ComoBold, sans-serif; font-size: 1em; margin: 0 0 8px;}
.settings-section .input-frame input {width: 100%; margin: 4px 0;}
.settings-section .button-frame {width: 100%; margin: 0; padding-top: 8px;}
.settings-section .button-frame::after {content: ""; display: table; clear: both;}
.settings-section .t-button:not(.btn-alt) {float: right;}
.settings-note {font-family: Como, sans-serif; font-size: 0.8em; margin: 0 0 6px;}
.settings-reminder {font-family: Como, sans-serif; font-size: 0.8em; margin: 8px 0 0; padding: 6px 10px; border: 2px dashed var(--border-color); border-radius: 8px;}
.form-message {font-family: Como, sans-serif; font-size: 0.8em; min-height: 1.2em;}
.form-message.error {color: #c0392b;}
.theme-choices {display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 8px;}
.theme-choice {position: relative; cursor: pointer; text-align: center; font-family: Como, sans-serif; font-size: 0.75em;}
.theme-choice input {position: absolute; opacity: 0; width: 0; height: 0;}
.theme-choice span::before {content: ""; display: block; width: 44px; height: 44px; margin: 0 auto 2px; border-radius: 50%; border: 6px solid; box-sizing: border-box;}
[data-theme-swatch="red"] span::before {background: #faf0e6; border-color: #eb5c36;}
[data-theme-swatch="blue"] span::before {background: #becbf6; border-color: #eb5c36;}
[data-theme-swatch="green"] span::before {background: #cef6e6; border-color: #eb5c36;}
[data-theme-swatch="dark"] span::before {background: #48331d; border-color: #f8663f;}
.theme-choice input:checked + span::before {outline: 3px solid var(--global-text-color); outline-offset: 2px;}
.theme-choice input:focus-visible + span::before {outline: 3px dotted var(--global-text-color); outline-offset: 2px;}
.lang-select {font-family: Como, sans-serif; font-size: 16px; padding: 6px 10px; border-radius: 8px; border: 2px solid var(--rule-background-color); background-color: var(--input-background-color); color: var(--global-text-color); min-width: 60%;}
.settings-section h3 label {display: inline; font: inherit;}
.letters-preview {flex: none; display: inline-flex; gap: 2px; margin-left: auto;}
.letters-preview span {display: inline-block; width: 30px; height: 30px; border-radius: 0;}
.switch {display: flex; align-items: center; gap: 10px; font-family: Como, sans-serif; font-size: 0.85em; margin: 6px 0; cursor: pointer;}
.switch input {width: 20px; height: 20px; accent-color: var(--global-text-color); flex: none;}
.settings-section.danger h3 {color: #c0392b;}
#btnMenu.has-badge::after {content: ""; position: absolute; top: 2px; right: 2px; width: 10px; height: 10px; border-radius: 50%; background: #c0392b;}
#menuAccount .badge {font-size: 0.8em; opacity: 0.8;}

.win-lost > p {overflow: hidden;}
.button-nextLevel .t-button {white-space: nowrap;}

/* Counters: labels of any length stay on one line ("Etappe 1", "ステージ 1") */
#level .cell {white-space: nowrap;}
@media only screen and (orientation: portrait) {
	#level .cell {width: auto; margin-left: 0.7em;}
}

/* Text pages (privacy policy): the game's no-scroll / no-select rules don't apply */
body.page-text {height: auto; overflow: auto; -webkit-user-select: text; user-select: text;}
html.text-html, html.text-html * {touch-action: auto;}	/* the <html> element too, or the page cannot be panned */
/* overflow-x: hidden (base) + overscroll-behavior: none on <html> together stop finger scrolling in Chrome */
html.text-html {overflow: visible; overscroll-behavior: auto;}
html.text-html body {overscroll-behavior: auto;}
.text-page {max-width: 720px; margin: 0 auto; padding: 24px 20px 48px; font-family: Como, sans-serif; line-height: 1.5;}
.text-page h1 {font-size: 2.2em; padding: 0; margin: 10px 0 0; line-height: 1.2; text-align: center;}
.text-page h2 {font-family: ComoBold, sans-serif; font-size: 1.5em; text-align: center; margin: 4px 0;}
.text-page h3 {font-family: ComoBold, sans-serif; font-size: 1.1em; margin: 22px 0 4px;}
.text-page p {margin: 0 0 10px;}
.text-page a {text-decoration: underline;}
.text-page-date {text-align: center; font-size: 0.85em; opacity: 0.8;}
.text-page-reference {font-size: 0.85em; padding: 8px 12px; border: 2px dashed var(--border-color); border-radius: 8px;}
.text-page-reference[hidden] {display: none;}
.text-page-law {margin-top: 22px !important; font-size: 0.9em; opacity: 0.85;}
.text-page-back {font-size: 0.9em;}

/* Landing page (welcome.html) */
/* its own text size: the game's one grows with the screen width (taktik.css --textSize) */
body.home {font-family: Como, sans-serif; line-height: 1.5; font-size: clamp(16px, 14px + 0.4vw, 20px);}
.home-bar {display: flex; justify-content: space-between; align-items: center; max-width: 1100px; margin: 0 auto; padding: 12px 20px;}
.home-brand {font-family: ComoBold, sans-serif; font-size: 1.3em; letter-spacing: 0.05em;}
.home-lang {min-width: 0; font-size: 14px; padding: 4px 8px;}
.home main {max-width: 1100px; margin: 0 auto; padding: 0 20px;}
.home-hero {display: flex; flex-direction: column; align-items: center; text-align: center; gap: 24px; padding: 8px 0 32px;}
.home-dancers.stage {margin: 0 auto; width: auto; height: auto; padding: 0;}
.home-dancers img {width: 72px; height: 72px; margin: 0 6px;}
.home-hero h1 {font-size: clamp(56px, 14vw, 96px); line-height: 1; padding: 0; margin: 8px 0 4px;}
.home-tagline {font-family: ComoBold, sans-serif; font-size: 1.35em; margin: 0 0 10px;}
.home-intro {font-size: 1.05em; max-width: 34em; margin: 0 auto 22px;}
.t-button.home-play {display: inline-block; font-family: ComoBold, sans-serif; font-size: 1.4em; padding: 8px 36px; text-decoration: none; background-color: var(--box-background-color);}
.home-play-note {font-size: 0.9em; opacity: 0.8; margin: 10px 0 0;}
.home-shot img {display: block; width: min(300px, 75vw); height: auto; border-radius: 22px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);}
.home-section {padding: 28px 0; border-top: 2px solid var(--grid-background-color);}
.home-section h2 {font-family: ComoBold, sans-serif; font-size: 1.5em; text-align: center; margin: 0 0 18px;}
.home-steps, .home-features, .home-install {list-style: none; padding: 0; margin: 0 auto; max-width: 760px;}
.home-steps li, .home-features li {display: flex; gap: 14px; align-items: flex-start; margin: 0 0 14px;}
.home-step-nr {flex: none; width: 1.9em; height: 1.9em; border-radius: 50%; background-color: var(--box-background-color); border: 2px solid var(--border-color);
	font-family: ComoBold, sans-serif; text-align: center; line-height: calc(1.9em - 4px); box-sizing: border-box;}
.home-icon {flex: none; font-size: 1.4em; line-height: 1.2; width: 1.4em; text-align: center;}	/* box sized in em: grows with the icon */
.home-features {display: grid; grid-template-columns: 1fr; gap: 4px 28px;}
.home-install li {margin: 0 0 10px; padding: 10px 14px; border-radius: 10px; background-color: var(--box-background-color);}
.home-again {text-align: center;}
.home-footer {text-align: center; font-family: Como, sans-serif; font-size: 0.9em; padding: 20px 20px 36px; opacity: 0.85;}
.home-footer a, .home-footer span {color: var(--global-text-color);}
@media (min-width: 900px) {
	.home-hero {flex-direction: row; text-align: left; gap: 48px; padding: 24px 0 48px;}
	.home-hero-text {flex: 1;}
	.home-dancers {text-align: left;}
	.home-dancers img {margin: 0 12px 0 0;}
	.home-intro {margin-left: 0;}
	.home-shot img {width: min(560px, 48vw); border-radius: 12px;}
	.home-features {grid-template-columns: 1fr 1fr;}
}

/* Links to the privacy policy */
.intro-privacy {position: absolute; bottom: 12px; left: 0; right: 0; font-family: Como, sans-serif; font-size: 13px; opacity: 0.7;}
.intro-privacy a, .account-privacy a, .settings-privacy a {text-decoration: underline;}
.account-privacy {font-family: Como, sans-serif; font-size: 13px; margin: 14px 0 0; text-align: left; padding-left: 10%;}
.account-privacy.off {display: none;}
.settings-privacy {font-family: Como, sans-serif; font-size: 0.8em; text-align: center; margin: 18px 0 0;}

.notice {font-family: Como, sans-serif; padding: 4vh 6vw; text-align: center; background-color: var(--box-background-color); border-radius: 10px;}
.stat-cell.locked {opacity: 0.45; cursor: not-allowed;}
#worldStats .cached-note {font-size: smaller; opacity: 0.7; padding-top: 8px; white-space: normal;}
#registerPrompt .t-button {min-width: 120px;}
#registerPrompt .win-div {width: 85%; line-height: 1.25;}
#registerPrompt .win-div small {display: block; margin-top: 0.4em;}

#version {width: auto; min-width: 40px; white-space: nowrap; cursor: pointer;}
#version.update {cursor: pointer; text-decoration: underline; color: var(--global-text-color); font-size: 12px;}

.dz4u {position: fixed; bottom: 0; left: 0; z-index: 99;}
.dz4u img {width: 24px; padding: 2px; background-color: rgba(220,220,230,0.8); border-radius: 3px; margin: 0 5px;}

/* Installed app: respect the notch / home indicator */
@media (display-mode: standalone) {
	body {padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);}
}

/* Anonymous daily count: asked once per device, at the bottom, without blocking the game */
.count-ask {position: fixed; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 15;	/* above the game, under the account screens (18) and the intro (19) */
	width: min(92vw, 520px); box-sizing: border-box;
	padding: 10px 14px; border: 2px solid var(--border-color); border-radius: 12px; background: var(--global-background-color);
	color: var(--global-text-color); font-family: Como, sans-serif; font-size: 14px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);}
.count-ask p {margin: 0 0 8px;}
.count-ask-buttons {display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap;}
.count-ask-buttons a {margin-right: auto; color: inherit; font-size: 12px;}
.count-ask.off {display: none;}