/* latin-ext */
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 500 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/fonts/fredoka-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 500 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/fonts/fredoka-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ===== Uratuj kotki! — style strony ===== */

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  font-family: "Fredoka", ui-rounded, "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  background:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.55) 0 2px, transparent 3px) 0 0 / 46px 46px,
    radial-gradient(ellipse at 50% 0%, #fff6dc 0%, #f5dfb3 55%, #e2b97e 100%);
  color: #4a2a12;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 28px 12px 32px;
}

.game-wrap {
  width: 960px;
  max-width: 100%;
  text-align: center;
}

.game-title {
  margin: 0 0 20px;
  font-size: clamp(34px, 5vw, 52px);
  font-weight: 700;
  letter-spacing: .5px;
  line-height: 1.05;
  color: #ffb547;
  -webkit-text-stroke: 7px #4a2a12;
  paint-order: stroke fill;
  text-shadow: 0 5px 0 rgba(74, 42, 18, .25);
}
.brand-mark { font-size: .62em; vertical-align: 4px; -webkit-text-stroke: 0; }
.game-title small {
  display: inline-block;
  margin-top: 10px;
  padding: 5px 18px 6px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  color: #fff;
  -webkit-text-stroke: 0;
  text-shadow: none;
  background: linear-gradient(#8fd06a, #4fa73c);
  border: 2.5px solid #4a2a12;
  border-radius: 12px;
  box-shadow: 0 4px 0 #2f7a2a, 0 4px 0 2.5px #4a2a12;
}
.game-title small { display: table; margin-left: auto; margin-right: auto; }

.canvas-frame {
  position: relative;
  display: inline-block;
  padding: 10px;
  border: 3px solid #4a2a12;
  border-radius: 26px;
  background: linear-gradient(#fff4dc, #f0c98c);
  box-shadow: 0 7px 0 #c3884a, 0 7px 0 3px #4a2a12, 0 26px 50px rgba(74, 42, 18, .28);
}

/* ===== Przyciski sterujące (muzyka / mapa) — góra-środek planszy ===== */
.game-controls {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 10;
}
.game-controls[hidden] { display: none; }
.game-controls.is-finale { left: auto; right: 22px; transform: none; }

.finale-controls { position: absolute; bottom: 22px; left: 22px; right: 22px; z-index: 11; }
.finale-controls[hidden], .finale-controls [hidden] { display: none; }
.finale-message { display: table; margin: 0 auto 10px; padding: 6px 14px; max-width: 100%; border: 2px solid #775230; border-radius: 18px; background: #fff8e8; color: #4a2a12; font-size: clamp(12px, 1.6vw, 16px); line-height: 1.25; }
.finale-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 9px; }
.finale-actions button { min-height: 44px; padding: 8px 14px; border: 2.5px solid #4a2a12; border-radius: 15px; background: linear-gradient(#a7e780, #58ad40); box-shadow: 0 4px #327d29, 0 4px 0 2px #4a2a12; color: #fffaf0; text-shadow: 0 1px 1px #633713; font: 600 clamp(12px, 1.6vw, 16px)/1.1 "Fredoka", "Trebuchet MS", sans-serif; cursor: pointer; touch-action: manipulation; }
.finale-actions button:active { transform: translateY(3px); box-shadow: 0 1px #327d29, 0 1px 0 2px #4a2a12; }
.finale-actions button:disabled { opacity: .55; cursor: default; }
#finale-cheer { background: linear-gradient(#ffca78, #f18c36); }
#finale-new { background: linear-gradient(#ffb2c1, #e66f92); }
.new-game-confirm { position: absolute; bottom: 0; left: 50%; width: min(480px, 100%); transform: translateX(-50%); padding: 20px; border: 3px solid #4a2a12; border-radius: 22px; background: #fff4db; box-shadow: 0 5px #ba8349; color: #4a2a12; }
.new-game-confirm p { margin: 0 0 16px; font-size: 16px; line-height: 1.4; }
@media(max-width: 700px) { .finale-controls { bottom: 15px; left: 15px; right: 15px; } .finale-actions { gap: 7px; } .finale-actions button { padding: 7px 9px; } .finale-message { margin-bottom: 7px; padding: 5px 9px; } }

.game-btn {
  position: relative;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 2.5px solid #4a2a12;
  border-radius: 50%;
  background: linear-gradient(#fffaf0, #ffe0ad);
  color: #4a2a12;
  font-size: 21px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 0 #d49450, 0 4px 0 2.5px #4a2a12, 0 8px 14px rgba(0, 0, 0, .25);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  transition: transform 0.08s ease, box-shadow .08s ease;
}
.game-btn svg { width: 26px; height: 26px; display: block; }
.game-btn:hover { background: linear-gradient(#ffffff, #ffe9c4); }
.game-btn:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #d49450, 0 1px 0 2.5px #4a2a12, 0 3px 6px rgba(0, 0, 0, .25);
}
.game-btn.is-off { background: linear-gradient(#f4ece2, #dccbb6); color: #8d6a50; }

/* pierścień postępu przytrzymania na przycisku mapy */
.btn-fill {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background: conic-gradient(
    rgba(245, 154, 58, 0.75) calc(var(--hold, 0) * 360deg),
    transparent 0
  );
}
.btn-icon { position: relative; z-index: 1; }

#game {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  border-radius: 16px;
  background: #9bd7ff;
  box-shadow: 0 0 0 2.5px #4a2a12;
  image-rendering: auto;
  touch-action: none;
}

.hint-bar {
  margin: 18px auto 4px;
  max-width: 880px;
  padding: 10px 18px;
  font-size: 14px;
  line-height: 1.5;
  color: #4a2a12;
  background: rgba(255, 250, 238, .92);
  border: 2px solid rgba(74, 42, 18, .5);
  border-radius: 16px;
  box-shadow: 0 3px 0 rgba(74, 42, 18, .18);
}

.hint-bar.small {
  font-size: 13px;
  background: transparent;
  border: 0;
  box-shadow: none;
  color: #7a4a22;
}

.hint-bar strong {
  color: #e07b20;
}

.canvas-frame { max-width: 100%; }
/* Proporcje sceny ustawia gra (--stage-aspect): 16:9 albo szerzej na mapie i podwórku (D-114). */
.game-stage { position: relative; width: 960px; max-width: 100%; aspect-ratio: var(--stage-aspect, 16 / 9); }
.game-stage, #game { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
/* Menu zawsze w prawym górnym rogu sceny; HUD na płótnie ustawia się obok (game.js, menuSlot). */
.app-tools { position: absolute; top: var(--hud-top, 12px); right: calc(12px + var(--safe-r, 0px)); z-index: 12; }
/* wysokość jak stoper na płótnie (--hud-h liczy gra); pole dotyku i tak jest większe (::before) */
.app-tools .shell-menu-button { display: inline-flex; align-items: center; min-height: 0; height: var(--hud-h, 44px); padding-top: 0; padding-bottom: 0; }
.shell-menu-button, .shell-action, .shell-close, .install-tabs button {
  font: 600 16px/1.3 "Fredoka", "Trebuchet MS", sans-serif;
  color: #4a2a12; cursor: pointer; touch-action: manipulation;
  border: 2px solid #4a2a12; border-radius: 15px; background: linear-gradient(#fffaf0, #ffdfa6);
  min-height: 44px; padding: 10px 17px; box-shadow: 0 3px #bf874b;
  -webkit-tap-highlight-color: transparent;
}
.shell-menu-button { position: relative; padding: 8px 12px; }
/* większe pole dotyku niż sam przycisk (palec dziecka, róg ekranu) */
.shell-menu-button::before { content: ""; position: absolute; top: -12px; right: -12px; bottom: -12px; left: -12px; }
.shell-action { background: linear-gradient(#bde990, #81c35b); }
.shell-action:hover, .shell-menu-button:hover { filter: brightness(1.05); }
.shell-action:active, .shell-menu-button:active, .shell-close:active { transform: translateY(2px); box-shadow: 0 1px #bf874b; }
.shell-rose { background: linear-gradient(#ffd1d8, #f499ad); }
.shell-action[hidden], [data-panel][hidden], [role=tabpanel][hidden] { display: none; }
/* Pytanie dla rodzica (bramka przed resetem, trudnością, porą snu i budzeniem).
   Własna klawiaturka zamiast systemowej: ta w poziomie zasłania prawie cały ekran. */
.gate-layout { display: flex; align-items: center; justify-content: center; gap: 28px; }
.gate-ask { flex: 1 1 auto; max-width: 340px; }
.gate-ask p { margin: 0 0 10px; }
.gate-sum { display: flex; align-items: center; gap: 10px; font-size: 1.5em; white-space: nowrap; }
.gate-question { white-space: nowrap; }
.gate-answer { display: inline-block; min-width: 96px; min-height: 48px; padding: 4px 10px; border: 2px solid #4a2a12; border-radius: 15px; background: #fffaf0; color: #4a2a12; font: 600 30px/1.3 "Fredoka", "Trebuchet MS", sans-serif; text-align: center; }
.gate-status { min-height: 1.4em; color: #b8435c; }
.gate-pad { flex: 0 0 auto; display: grid; grid-template-columns: repeat(3, 64px); gap: 8px; }
.gate-pad button { min-height: 50px; font: 600 24px/1 "Fredoka", "Trebuchet MS", sans-serif; color: #4a2a12; cursor: pointer; touch-action: manipulation; border: 2px solid #4a2a12; border-radius: 14px; background: linear-gradient(#fffaf0, #ffdfa6); box-shadow: 0 3px #bf874b; -webkit-tap-highlight-color: transparent; }
.gate-pad button:active { transform: translateY(2px); box-shadow: 0 1px #bf874b; }
.gate-pad .gate-ok { background: linear-gradient(#bde990, #81c35b); }
.shell-action[aria-pressed="true"] { outline: 3px solid #5fae45; outline-offset: 2px; }
.sleep-form { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 22px; margin: 14px 0; }
.sleep-form label { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.sleep-form select { min-height: 44px; padding: 6px 10px; border: 2px solid #4a2a12; border-radius: 13px; background: #fffaf0; color: #4a2a12; font: 600 18px/1.2 "Fredoka", "Trebuchet MS", sans-serif; }
button:focus-visible, a:focus-visible { outline: 3px solid #217496; outline-offset: 4px; }
#game:focus-visible { outline: 3px solid #f59a3a; outline-offset: 5px; }
/* Gra na całe okno sama jest „polem” z fokusem — ramka wokół ekranu to szum.
   Na dotyk nie ma klawiatury, więc ramki fokusu (po zamknięciu Menu, wokół ×) znikają. */
.full-window #game:focus-visible { outline: none; }
.touch-device button:focus-visible, .touch-device a:focus-visible { outline: none; }
.game-btn[hidden] { display: none; }

/* The dialog scrolls independently while the game and its input are paused. */
#app-dialog {
  position: fixed; inset: auto; margin: 0; left: 50%;
  top: calc(var(--app-top, 0px) + env(safe-area-inset-top) + (var(--app-height, 100dvh) - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * .5);
  transform: translate(-50%, -50%);
  width: min(880px, calc(var(--app-width, 100vw) - env(safe-area-inset-left) - env(safe-area-inset-right) - 24px));
  max-height: calc(var(--app-height, 100dvh) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 24px);
  padding: 0; border: 3px solid #4a2a12; border-radius: 25px;
  background: #fff4db; color: #4a2a12; overflow: hidden;
  box-shadow: 0 8px 0 #b37d46, 0 20px 70px #172b2b66;
}
#app-dialog[open] { display: flex; flex-direction: column; }
#app-dialog::backdrop { background: #1b302ac7; }
.shell-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 22px; background: #ffe4af; border-bottom: 2px solid #d5ac71; flex-shrink: 0; }
.shell-header h2 { font-size: clamp(20px, 4vw, 27px); line-height: 1.2; margin: 0; }
.shell-close { width: 44px; padding: 0; font-size: 30px; flex-shrink: 0; }
.shell-content { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 20px 24px 26px; line-height: 1.5; touch-action: pan-y; }
.shell-content p { margin: 0 0 18px; }
.shell-content strong { font-weight: 700; }
.shell-menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.shell-menu-grid .shell-action { min-height: 58px; }
.shell-progress { padding: 14px; background: #f1e6c9; border-radius: 15px; }
.shell-mascot { display: block; border-radius: 24px; margin: 0 auto 18px; }
.install-tabs { display: flex; gap: 12px; margin-bottom: 20px; }
.install-tabs button { flex: 1; }
.install-tabs [aria-selected=true] { background: #96cf75; box-shadow: 0 3px #527c38; }
.install-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; padding: 0; list-style: none; margin: 0 0 16px; }
.install-steps h3 { font-size: 17px; margin: 16px 0 8px; }
.install-steps p { font-size: 15px; }
.install-source { color: #326449; text-underline-offset: 3px; }
.install-status:empty { display: none; }
.install-status { margin-top: 18px!important; }
.phone-drawing { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; width: 142px; height: 190px; padding: 12px 8px; margin: auto; border: 4px solid #40534a; border-radius: 22px; background: #e4f0dc; box-shadow: 0 5px #b2baa0; font-size: 11px; text-align: center; }
.phone-drawing img { border-radius: 15px; object-fit: contain; }
.phone-address { display: flex; align-items: center; justify-content: space-around; width: 100%; min-height: 22px; border-radius: 8px; background: #faf8f0; font-size: 9px; }
.phone-toolbar { position: absolute; bottom: 9px; width: 100%; text-align: center; }
.phone-highlight { display: inline-flex; align-items: center; justify-content: center; gap: 3px; border: 2px solid #347b49; background: #c7ec9c; border-radius: 8px; padding: 5px; color: #264a2e; }
.phone-highlight svg { width: 25px; height: 25px; }
.phone-options { padding-top: 25px; gap: 16px; }
.phone-option { width: 100%; padding: 6px 2px; font-size: 10px; line-height: 1.3; }
.phone-add { display: block; color: #246e9d; font-size: 12px; align-self: flex-end; font-weight: 700; }
.phone-toggle { font-size: 8px; display: flex; align-items: center; gap: 5px; }
.phone-toggle i { display: inline-block; width: 22px; height: 13px; border-radius: 10px; background: #65a64e; }
.phone-toggle i::after { content: ""; display: block; width: 9px; height: 9px; background: white; border-radius: 50%; margin: 2px 0 0 11px; }
.phone-dots { font-size: 18px; line-height: 1; padding: 0 3px; }
.phone-install { margin-top: 5px; padding: 5px 15px; }
.control-lessons { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.control-lessons figure { margin: 0; }
.control-lessons figcaption { font-size: 21px; margin-bottom: 10px; }
.control-lessons p { font-size: 15px; }
.control-picture { position: relative; height: 190px; border: 2px solid #59754c; border-radius: 18px; overflow: hidden; background: linear-gradient(#bbe6ed 50%, #9dcb79 51%); margin-bottom: 14px; }
.control-picture img { position: absolute; top: 43px; left: calc(50% - 27px); border-radius: 17px; }
.control-grass { position: absolute; inset: 56% 0 0; background: #9dcb79; border-top: 5px solid #5d9c4b; }
.control-left { position: absolute; left: 10px; bottom: 12px; display: flex; gap: 7px; }
.control-right { position: absolute; right: 15px; bottom: 12px; display: flex; flex-direction: column; gap: 8px; }
.control-left span, .control-right span, .control-jump span { display: flex; align-items: center; justify-content: center; width: 49px; height: 49px; border: 2px solid #4a2a12; border-radius: 50%; background: #ffd49c; box-shadow: 0 3px #9b713e; font-size: 26px; }
.control-jump { position: absolute; right: 15px; bottom: 12px; }
.control-jump span { width: 63px; height: 63px; flex-direction: column; font-size: 30px; background: #c0e686; line-height: 1; }
.control-jump small { font-size: 11px; }

#rotate-hint { display: none; }
/* Gra na całe okno — na telefonie i na komputerze (klasa full-window w index.html):
   bez ramki i tekstu pod spodem, scena 16:9 tak duża, jak się da. */
.full-window, .full-window body { width: 100%; height: var(--app-height, 100dvh); min-height: 0; overflow: hidden; overscroll-behavior: none; }
.full-window body { position: fixed; top: var(--app-top, 0px); left: 0; padding: 0; display: block; background: #203c2d; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.full-window .game-wrap { width: 100%; max-width: none; height: 100%; margin: 0; touch-action: none; }
.full-window .game-title, .full-window .hint-bar { display: none; }
.full-window .canvas-frame { display: flex; align-items: center; justify-content: center; width: var(--app-width, 100vw); height: var(--app-height, 100dvh); max-width: none; border: 0; border-radius: 0; box-shadow: none; background: #203c2d; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); touch-action: none; }
/* Scena sięga w bok pod wycięcie ekranu (tło gry), a HUD i Menu je omijają (--safe-l / --safe-r). */
.full-window .game-stage { width: min(var(--app-width, 100vw), calc((var(--app-height, 100dvh) - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * var(--stage-aspect, 1.7777778))); max-width: 100%; flex-shrink: 0; }
.full-window #game { width: 100%; height: auto; border-radius: 0; box-shadow: none; }
/* Pasy obok sceny 16:9 (szerokie telefony, iPad 4:3): zamiast gładkiej zieleni
   rozmyte, przyciemnione przedłużenie bieżącej sceny (małe płótno rozciągnięte
   na cały ekran; kopiuje je mobile.js). */
.stage-backdrop { display: none; }
.full-window .canvas-frame { overflow: hidden; }
.full-window .stage-backdrop { display: block; position: absolute; left: 0; top: 0; pointer-events: none; }
.full-window:not(.compat-device) .stage-backdrop { filter: blur(14px) brightness(.8) saturate(1.15); }
.compat-device .stage-backdrop { opacity: .78; }
.full-window .game-stage { position: relative; z-index: 1; }
.game-stage.is-shop .app-tools, .game-stage.is-night .app-tools { visibility: hidden; }
.full-window .game-controls { top: 12px; }
/* w finale przycisk muzyki stoi pod Menu */
.full-window .game-controls.is-finale { right: 12px; top: 66px; }
.touch-device .shell-content { touch-action: pan-y; }
.rotate-icon { font-size: 65px; line-height: 1; margin-bottom: 20px; animation: rotateNudge 2s ease-in-out infinite; }
.rotate-inner p { margin: 0 0 24px; font-size: 22px; line-height: 1.5; }
@keyframes rotateNudge { 0%, 35% { transform: rotate(0); } 65%, 100% { transform: rotate(-90deg); } }
@media (orientation: portrait) and (max-width: 699px) {
  .touch-device .game-wrap { display: none; }
  .touch-device #rotate-hint { display: flex; position: fixed; inset: 0; align-items: center; justify-content: center; padding: 24px; color: #fff4db; text-align: center; background: radial-gradient(circle at 50% 38%, #44664e, #203c2d 75%); touch-action: none; }
}
@media (max-width: 600px) {
  .shell-header { padding: 12px 15px; }
  .shell-content { padding: 18px 16px 24px; }
  .shell-menu-grid, .control-lessons { grid-template-columns: 1fr; }
  .gate-layout { flex-direction: column; gap: 14px; }
  .install-steps { grid-template-columns: 1fr; gap: 24px; }
  .install-steps li { display: grid; grid-template-columns: 142px 1fr; column-gap: 18px; align-items: start; }
  .install-steps .phone-drawing { grid-row: 1 / 3; }
  .install-steps h3 { margin-top: 2px; }
  .install-tabs { gap: 8px; }
  .install-tabs button { font-size: 14px; padding: 8px; }
}
@media (max-width: 380px) {
  .install-steps li { display: block; }
  .install-steps h3 { margin-top: 16px; }
}
@media (prefers-reduced-motion: reduce) { .game-btn, .rotate-icon { transition: none; animation: none; } }

@media (max-width: 1000px) {
  .game-wrap { width: 100%; }
  #game { width: 100%; height: auto; }
}