/* ChessKids app layer — app/build.py adds it to every page of app/dist (the hub and the games stay untouched). */

html.ck-app { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* hub: the cards keep clear of the notch when an iPhone lies on its side */
html.ck-hub body { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }

/* ---- games: the page never moves, zooms, bounces or selects text under a child's fingers */
html.ck-game, html.ck-game body { overscroll-behavior: none; }
html.ck-game body { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
/* the menu and the win card still scroll on short screens (an overlay is its own scroll area) */
html.ck-game .overlay { touch-action: pan-y; overscroll-behavior: contain; }
/* no double-tap zoom on buttons anywhere (hub cards included) */
html.ck-app button, html.ck-app a, html.ck-app label { touch-action: manipulation; }

/* ---- loading screen of a game: the series icon on the sky until the 3D world is ready */
html.ck-game body::after {
  content: 'Wczytuję grę…';
  position: fixed; inset: 0; z-index: 50; pointer-events: none;
  display: flex; align-items: center; justify-content: center; padding-top: 230px;
  background: #CDE9F5 url(icons/icon-192.png) center calc(50% - 40px) / 160px 160px no-repeat;
  color: #3B2A1A; font: 800 20px/1.3 "Nunito", "Trebuchet MS", system-ui, sans-serif;
  opacity: 1; transition: opacity .3s ease, visibility 0s linear .3s;
}
html.ck-game.ck-ready body::after { opacity: 0; visibility: hidden; }
@media (prefers-reduced-motion: reduce) { html.ck-game body::after { transition: none; } }

/* ---- hub: the card for adults about the app (same paper look as the hub's own note) */
.ck-install {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: #FFF8EA; border: 2px solid #3B2A1A; border-radius: 18px; box-shadow: 0 3px 0 #3B2A1A; padding: 12px 16px;
  font: 700 14px/1.45 "Nunito", "Trebuchet MS", system-ui, sans-serif; color: #7A6450;
}
.ck-install[hidden] { display: none; }
.ck-install img { flex: none; width: 56px; height: 56px; border-radius: 14px; }
.ck-install-text { flex: 1 1 220px; min-width: 0; }
.ck-install b { display: block; color: #3B2A1A; font-size: 16px; }
.ck-install p { margin: 2px 0 0; }
.ck-install .ck-status { color: #2E7D32; }
.ck-install-btn {
  flex: none; min-height: 48px; padding: 8px 20px; cursor: pointer;
  font: 800 17px "Nunito", "Trebuchet MS", system-ui, sans-serif; color: #3B2A1A;
  background: #FFD23F; border: 2.5px solid #3B2A1A; border-radius: 14px; box-shadow: 0 3px 0 #3B2A1A;
}
.ck-install-btn[hidden] { display: none; }
.ck-install-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #3B2A1A; }
.ck-install-btn:focus-visible { outline: 3px solid #1A6FB5; outline-offset: 3px; }
/* already installed: a single quiet line that the games work offline */
.ck-install.ck-installed { box-shadow: none; border-style: dashed; border-color: rgba(122, 100, 80, .45); }
.ck-install.ck-installed img, .ck-install.ck-installed b, .ck-install.ck-installed .ck-how { display: none; }

/* ---- hub: the account for adults (app/shell/account.js) — the same paper look as the hub's note */
.ck-account {
  background: #FFF8EA; border: 2px solid #3B2A1A; border-radius: 18px; box-shadow: 0 3px 0 #3B2A1A; padding: 12px 16px;
  font: 700 14px/1.45 "Nunito", "Trebuchet MS", system-ui, sans-serif; color: #7A6450;
}
.ck-account b { display: block; color: #3B2A1A; font-size: 16px; }
.ck-account p { margin: 4px 0 0; }
.ck-account .ck-said:empty { display: none; }
.ck-account .ck-said { color: #2E7D32; }
.ck-row { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; margin-top: 10px; }
.ck-row a { color: #3B2A1A; text-underline-offset: 3px; }
.ck-btn {
  min-height: 44px; padding: 6px 16px; cursor: pointer;
  font: 800 16px "Nunito", "Trebuchet MS", system-ui, sans-serif; color: #3B2A1A;
  background: #FFF8EA; border: 2.5px solid #3B2A1A; border-radius: 14px; box-shadow: 0 3px 0 #3B2A1A;
}
.ck-btn.ck-main { background: #FFD23F; }
.ck-btn.ck-quiet { border-color: rgba(122, 100, 80, .55); box-shadow: none; color: #7A6450; font-weight: 700; }
.ck-btn.ck-danger { background: #C8553D; color: #fff; }
.ck-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #3B2A1A; }
.ck-btn:disabled { opacity: .6; cursor: wait; }
.ck-btn:focus-visible, .ck-row a:focus-visible, .ck-field input:focus-visible, .ck-check input:focus-visible { outline: 3px solid #1A6FB5; outline-offset: 3px; }
.ck-dialog {
  width: min(440px, calc(100vw - 32px)); box-sizing: border-box; padding: 20px; color: #3B2A1A;
  background: #FFF8EA; border: 3px solid #3B2A1A; border-radius: 22px; box-shadow: 0 6px 0 #3B2A1A;
  font: 700 15px/1.45 "Nunito", "Trebuchet MS", system-ui, sans-serif;
}
.ck-dialog::backdrop { background: rgba(59, 42, 26, .45); }
.ck-dialog h2 { margin: 0 0 6px; font: 700 24px/1.15 "Balsamiq Sans", "Trebuchet MS", sans-serif; }
.ck-dialog p { margin: 0 0 12px; color: #7A6450; }
.ck-field { display: grid; gap: 4px; margin: 0 0 12px; }
.ck-field input {
  min-height: 48px; box-sizing: border-box; width: 100%; padding: 8px 12px; color: #3B2A1A; background: #fff;
  font: 800 18px "Nunito", "Trebuchet MS", system-ui, sans-serif; border: 2.5px solid #3B2A1A; border-radius: 12px;
}
.ck-field input.ck-code { font-size: 28px; letter-spacing: .3em; text-align: center; }
.ck-check { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 8px; }
.ck-check input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: #C9580A; }
.ck-check a { color: #3B2A1A; }
.ck-dialog .ck-error { color: #B3261E; margin: 0; min-height: 0; }
.ck-dialog .ck-error:empty { display: none; }
.ck-dialog .ck-small { font-size: 13px; margin: -4px 0 10px; }