/* Ragus – ekrany i nakładka UI. Kolory jak w js/palette.js (UI, WORLDS). Czcionki systemowe (UI.font). */
:root {
  --ink: #17304d; --ink-soft: #5a6f88; --paper: #ffffff;
  --sun: #ffc928; --sun-deep: #e79a00; --coral: #ff6b5e; --coral-deep: #c9463b;
  --mint: #22b592; --mint-deep: #158a6d; --sky: #3d9bf0; --sky-deep: #2370c2; --grape: #8a63e6; --lock: #9fb0c4;
  --shadow: rgba(23, 48, 77, .18);
  --font: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", system-ui, -apple-system, sans-serif;
  --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px); --sar: env(safe-area-inset-right, 0px);
  /* odstęp od krawędzi: zawsze ≥ 20 px poza strefą bezpieczną; na dole dodatkowo pasek gestu */
  --edge: clamp(20px, 2.6vmin, 30px);
  --top: calc(var(--sat) + var(--edge));
  --bottom: calc(max(var(--sab), 14px) + var(--edge));
  --left: calc(var(--sal) + var(--edge));
  --right: calc(var(--sar) + var(--edge));
  --btn: clamp(72px, 9.4vmin, 96px);
  --btn-big: clamp(132px, 17vmin, 176px);
  color-scheme: light;
}

html, body {
  margin: 0; padding: 0; width: 100%; height: 100%;
  position: fixed; inset: 0; overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  background: #8fd0ff;
  color: var(--ink);
  font-family: var(--font);
}
*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; }
img, svg, canvas { -webkit-user-drag: none; user-select: none; }

#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; outline: none; }
#ui { position: fixed; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; touch-action: none; }

/* ---------------------------------------------------------------- ekrany */
.scr {
  position: absolute; inset: 0; opacity: 0; visibility: hidden; pointer-events: none;
  transform: scale(1.03);
  transition: opacity .32s ease, transform .4s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .4s;
}
.scr.on {
  opacity: 1; visibility: visible; pointer-events: auto; transform: none;
  transition: opacity .32s ease, transform .4s cubic-bezier(.2, .8, .2, 1), visibility 0s;
}
.scr.pass, .scr.pass.on { pointer-events: none; }
.scr.pass .btn { pointer-events: auto; }
.scr:not(.on) .btn { pointer-events: none !important; }

/* ---------------------------------------------------------------- przyciski */
.btn {
  --bg: var(--paper); --fg: var(--ink); --line: #c9d7e6; --size: var(--btn);
  appearance: none; -webkit-appearance: none; margin: 0; padding: 0; font: inherit; color: var(--fg);
  position: relative; flex: none;
  width: var(--size); height: var(--size); min-width: 64px; min-height: 64px;
  border-radius: 50%; border: clamp(4px, .6vmin, 6px) solid var(--line);
  background: var(--bg);
  box-shadow: 0 7px 0 var(--line), 0 12px 22px var(--shadow);
  display: grid; place-items: center;
  cursor: pointer; touch-action: none; outline: none;
  transition: transform .12s ease, box-shadow .12s ease, filter .2s;
}
.btn > svg { width: 54%; height: 54%; display: block; overflow: visible; pointer-events: none; }
.btn.down { transform: translateY(6px) scale(.97); box-shadow: 0 1px 0 var(--line), 0 4px 10px var(--shadow); }
.btn.sun { --bg: var(--sun); --fg: #8a4d00; --line: var(--sun-deep); }
.btn.mint { --bg: var(--mint); --fg: #fff; --line: var(--mint-deep); }
.btn.coral { --bg: var(--coral); --fg: #fff; --line: var(--coral-deep); }
.btn.sky { --bg: var(--sky); --fg: #fff; --line: var(--sky-deep); }
.btn.big { --size: var(--btn-big); }
.btn.mid { --size: clamp(100px, 12.6vmin, 128px); }
.btn.mid > svg { width: 50%; height: 50%; }
.btn.big > svg { width: 50%; height: 50%; }
.btn.play > svg { transform: translateX(6%); }
.btn .slash { position: absolute; inset: 14%; opacity: 0; transform: scale(.4); transition: opacity .2s, transform .25s cubic-bezier(.3, 1.6, .5, 1); pointer-events: none; }
.btn .slash svg { width: 100%; height: 100%; display: block; }
.btn.toggle.off { --bg: #eef3f8; --fg: var(--lock); }
.btn.toggle.off .slash { opacity: 1; transform: none; }

.pulse { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { scale: 1; } 50% { scale: 1.07; } }

/* ---------------------------------------------------------------- tło nieba (start, mapa, finał, obrót) */
.skybg { position: absolute; inset: 0; background: linear-gradient(#8fd0ff, #dff3ff 70%); overflow: hidden; }
.skybg .hills { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 34%; display: block; }
.skybg .sunball { position: absolute; width: 22vmin; height: 22vmin; top: -6vmin; right: 12vw; border-radius: 50%;
  background: radial-gradient(circle, #fff3b0 0 50%, #ffe27a 51% 62%, rgba(255, 226, 122, .35) 63% 100%); }
.cloud { position: absolute; width: 22vmin; height: 7vmin; background: #fff; border-radius: 99px; opacity: .92;
  animation: drift 60s linear infinite; }
.cloud::before, .cloud::after { content: ""; position: absolute; background: #fff; border-radius: 50%; }
.cloud::before { width: 9vmin; height: 9vmin; left: 3.5vmin; top: -4.5vmin; }
.cloud::after { width: 11vmin; height: 11vmin; left: 9vmin; top: -6vmin; }
@keyframes drift { from { translate: -30vw 0; } to { translate: 130vw 0; } }

/* ---------------------------------------------------------------- start */
.start .stage {
  position: absolute; top: var(--top); bottom: var(--bottom); left: var(--left); right: var(--right);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: 2vw;
}
.start .hero { position: relative; height: min(78vh, 640px); align-self: end; margin-bottom: 2vh; }
.start .hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.start .right { display: flex; flex-direction: column; align-items: center; gap: clamp(20px, 5vh, 54px); padding-bottom: 6vh; }
.logo {
  margin: 0; font-weight: 900; line-height: .9; letter-spacing: .01em;
  font-size: clamp(96px, 19vmin, 210px);
  display: flex; gap: .02em;
}
.logo span {
  display: inline-block; color: var(--sun);
  -webkit-text-stroke: .085em var(--sun-deep); paint-order: stroke fill;
  text-shadow: 0 .06em 0 var(--sun-deep), 0 .1em .12em var(--shadow);
  animation: hop 2.8s ease-in-out infinite; animation-delay: calc(var(--i) * .14s);
}
.logo span:nth-child(2) { color: #ff8a7f; -webkit-text-stroke-color: var(--coral-deep); text-shadow: 0 .06em 0 var(--coral-deep), 0 .1em .12em var(--shadow); }
.logo span:nth-child(3) { color: #4fd0ad; -webkit-text-stroke-color: var(--mint-deep); text-shadow: 0 .06em 0 var(--mint-deep), 0 .1em .12em var(--shadow); }
.logo span:nth-child(4) { color: #6fb6f6; -webkit-text-stroke-color: var(--sky-deep); text-shadow: 0 .06em 0 var(--sky-deep), 0 .1em .12em var(--shadow); }
.logo span:nth-child(5) { color: #a98af0; -webkit-text-stroke-color: #6a45c4; text-shadow: 0 .06em 0 #6a45c4, 0 .1em .12em var(--shadow); }
@keyframes hop { 0%, 70%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); } 80% { transform: translateY(-.12em) rotate(var(--r, 0deg)); } 90% { transform: translateY(0) rotate(var(--r, 0deg)); } }
.corner { position: absolute; display: flex; gap: clamp(16px, 2.4vmin, 26px); }
.corner.br { right: var(--right); bottom: var(--bottom); }
.corner.bl { left: var(--left); bottom: var(--bottom); }
.corner.tl { left: var(--left); top: var(--top); }
.corner.tr { right: var(--right); top: var(--top); }

/* ---------------------------------------------------------------- mapa */
.map .skybg { background: linear-gradient(#bfe4ff, #f2f9ff); }
.map .skybg .hills { height: 22%; opacity: .7; }
.map .bar { position: absolute; top: var(--top); left: var(--left); right: var(--right); height: var(--btn);
  display: flex; align-items: center; justify-content: space-between; pointer-events: none; }
.map .bar .btn { pointer-events: auto; }
.pill {
  display: inline-flex; align-items: center; gap: .3em; padding: 0 .7em 0 .45em; height: var(--btn);
  border-radius: 999px; background: #fff; border: 5px solid #c9d7e6; box-shadow: 0 6px 0 #c9d7e6, 0 10px 20px var(--shadow);
  font-weight: 900; font-size: clamp(34px, 5.2vmin, 46px); color: var(--ink); font-variant-numeric: tabular-nums;
}
.pill svg { width: 1.25em; height: 1.25em; display: block; }
.pill small { font-size: .62em; color: var(--ink-soft); font-weight: 800; }
.pages { position: absolute; left: 0; right: 0; top: calc(var(--top) + var(--btn) + 2.2vh); bottom: calc(var(--bottom) + var(--btn) + 2.6vh); overflow: hidden; touch-action: none; }
.strip { display: flex; height: 100%; will-change: transform; transition: transform .5s cubic-bezier(.2, .85, .25, 1); }
.strip.drag { transition: none; }
.page { flex: 0 0 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 0 max(var(--left), var(--right)); }
.card {
  --accent: #ffc928; --deep: color-mix(in srgb, var(--accent) 62%, #17304d);
  width: min(100%, 1120px); height: 100%; max-height: 640px;
  border-radius: clamp(28px, 4vmin, 44px); border: 6px solid var(--deep);
  background: linear-gradient(var(--sky0, #ffe9c7), var(--sky1, #fff6e8));
  box-shadow: 0 10px 0 var(--deep), 0 20px 40px var(--shadow);
  padding: clamp(14px, 2.4vmin, 26px) clamp(18px, 3vmin, 34px) clamp(18px, 3vmin, 32px);
  display: grid; grid-template-rows: auto minmax(0, 1fr); gap: clamp(10px, 2vmin, 22px);
  position: relative; overflow: hidden;
}
.card .head { display: flex; align-items: center; justify-content: space-between; }
.emblem { width: clamp(64px, 10vmin, 96px); height: clamp(64px, 10vmin, 96px); border-radius: 26%; background: #fff;
  border: 5px solid var(--deep); display: grid; place-items: center; box-shadow: 0 5px 0 var(--deep); }
.emblem svg { width: 78%; height: 78%; display: block; }
.card .pill { height: clamp(56px, 8vmin, 72px); font-size: clamp(28px, 4.4vmin, 38px); border-color: var(--deep); box-shadow: 0 5px 0 var(--deep); }
.tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 2.2vmin, 24px); min-height: 0; }
.tile {
  appearance: none; margin: 0; padding: 0; font: inherit; position: relative; min-width: 64px; min-height: 64px;
  border-radius: clamp(20px, 3vmin, 30px); border: 5px solid var(--deep); background: #fff; color: var(--ink);
  box-shadow: 0 7px 0 var(--deep), 0 10px 18px var(--shadow);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6vmin;
  touch-action: none; cursor: pointer; outline: none; transition: transform .12s, box-shadow .12s;
}
.tile.down { transform: translateY(6px); box-shadow: 0 1px 0 var(--deep), 0 4px 10px var(--shadow); }
.tile .num { font-weight: 900; font-size: clamp(36px, 6.4vmin, 60px); line-height: 1; font-variant-numeric: tabular-nums; }
.tile .st { display: flex; gap: 2px; }
.tile .st svg { width: clamp(20px, 3.6vmin, 32px); height: clamp(20px, 3.6vmin, 32px); display: block; }
.tile .st .no { --st-fill: #e3eaf2; --st-line: #b8c6d6; --st-shine: 0; }
.tile.locked { background: #e9eff6; border-color: #b8c6d6; box-shadow: 0 7px 0 #b8c6d6, 0 10px 18px var(--shadow); color: var(--lock); }
.tile.locked .lk { width: 46%; aspect-ratio: 1; display: block; --lock-hole: #e9eff6; }
.tile.locked .lk svg { width: 100%; height: 100%; display: block; }
.tile.now { background: var(--accent); }
.tile.now .num { color: #fff; -webkit-text-stroke: 2px var(--deep); paint-order: stroke fill; text-shadow: 0 3px 0 var(--deep); }
.tile.now::after { content: ""; position: absolute; inset: -12px; border-radius: inherit; border: 5px solid #fff; opacity: 0; animation: ring 1.6s ease-out infinite; pointer-events: none; }
@keyframes ring { 0% { opacity: .9; transform: scale(.92); } 100% { opacity: 0; transform: scale(1.08); } }
.tabs { position: absolute; left: 0; right: 0; bottom: var(--bottom); display: flex; justify-content: center; gap: clamp(14px, 2.4vmin, 26px); pointer-events: none; }
.tabs .btn { pointer-events: auto; --line: var(--deep); border-radius: 30%; transition: transform .25s cubic-bezier(.3, 1.6, .5, 1), box-shadow .12s; }
.tabs .btn > svg { width: 72%; height: 72%; }
.tabs .btn.cur { --bg: var(--accent); transform: translateY(-6px) scale(1.12); }
.tabs .btn.cur.down { transform: translateY(0) scale(1.08); }

/* ---------------------------------------------------------------- gra (HUD) */
.lvl {
  position: absolute; left: var(--left); top: var(--top); height: var(--btn); min-width: calc(var(--btn) * 1.15);
  padding: 0 .5em; border-radius: 999px; background: rgba(255, 255, 255, .94);
  border: 5px solid var(--deep, #c9d7e6); box-shadow: 0 6px 0 var(--deep, #c9d7e6), 0 10px 20px var(--shadow);
  display: grid; place-items: center; font-weight: 900; font-size: clamp(36px, 5.6vmin, 50px); color: var(--ink);
  font-variant-numeric: tabular-nums; pointer-events: none;
}
.lvl::before { content: ""; position: absolute; left: 50%; top: -3px; width: 34%; height: 8px; translate: -50% 0; border-radius: 0 0 8px 8px; background: var(--accent, #ffc928); }

/* ---------------------------------------------------------------- pauza */
.dim { position: absolute; inset: 0; background: rgba(23, 48, 77, .42); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.panel {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  background: #fff; border-radius: clamp(36px, 5vmin, 52px); border: 6px solid #c9d7e6;
  box-shadow: 0 12px 0 #c9d7e6, 0 26px 50px rgba(23, 48, 77, .3);
  padding: clamp(28px, 4.6vmin, 48px) clamp(34px, 5.4vmin, 60px);
  display: flex; flex-direction: column; align-items: center; gap: clamp(22px, 4vmin, 40px);
  transition: scale .35s cubic-bezier(.3, 1.5, .5, 1);
}
.scr:not(.on) .panel { scale: .85; }
.row { display: flex; align-items: center; justify-content: center; gap: clamp(20px, 3.4vmin, 36px); }

/* ---------------------------------------------------------------- koniec poziomu */
.complete .dim { background: radial-gradient(circle at 50% 45%, rgba(255, 246, 200, .35), rgba(23, 48, 77, .5)); -webkit-backdrop-filter: none; backdrop-filter: none; }
.complete .panel { padding-top: clamp(48px, 7vmin, 70px); }
.badge {
  position: absolute; top: 0; left: 50%; translate: -50% -55%;
  min-width: calc(var(--btn) * 1.2); height: var(--btn); padding: 0 .45em; border-radius: 999px;
  background: var(--accent, #ffc928); border: 5px solid var(--deep, #e79a00); box-shadow: 0 6px 0 var(--deep, #e79a00);
  display: grid; place-items: center; color: #fff; font-weight: 900; font-size: clamp(36px, 5.6vmin, 50px);
  -webkit-text-stroke: 2px var(--deep, #e79a00); paint-order: stroke fill; text-shadow: 0 3px 0 var(--deep, #e79a00);
}
.stars3 { display: flex; align-items: flex-end; gap: clamp(8px, 1.6vmin, 18px); }
.star3 { position: relative; width: clamp(96px, 14vmin, 140px); height: clamp(96px, 14vmin, 140px); }
.star3:nth-child(2) { width: clamp(118px, 17.5vmin, 172px); height: clamp(118px, 17.5vmin, 172px); margin-bottom: 3vmin; }
.star3 > span { position: absolute; inset: 0; display: block; }
.star3 svg { width: 100%; height: 100%; display: block; overflow: visible; }
.star3 .empty { --st-fill: #e3eaf2; --st-line: #b8c6d6; --st-shine: 0; }
.star3 .full { scale: 0; opacity: 0; filter: drop-shadow(0 6px 8px rgba(231, 154, 0, .35)); }
.star3.show .full { animation: starpop .62s cubic-bezier(.3, 1.6, .5, 1) forwards; }
.star3.show::after { content: ""; position: absolute; inset: -30%; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 233, 140, .9), rgba(255, 233, 140, 0) 62%); animation: glow .8s ease-out forwards; pointer-events: none; z-index: -1; }
@keyframes starpop { 0% { scale: 0; opacity: 0; rotate: -60deg; } 60% { scale: 1.32; opacity: 1; rotate: 12deg; } 100% { scale: 1; opacity: 1; rotate: 0deg; } }
@keyframes glow { 0% { opacity: 0; scale: .4; } 40% { opacity: 1; } 100% { opacity: 0; scale: 1.25; } }

/* konfetti */
.confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.cf { position: absolute; top: 0; width: var(--w, 14px); height: var(--h, 22px); border-radius: 4px; background: var(--c);
  translate: 0 -12vh; animation: fall var(--d, 3s) cubic-bezier(.35, .2, .7, 1) var(--dl, 0s) forwards; }
.cf.round { border-radius: 50%; }
.confetti.loop .cf { animation-iteration-count: infinite; }
@keyframes fall {
  0% { translate: 0 -12vh; rotate: 0deg; }
  100% { translate: var(--dx, 0px) 112vh; rotate: var(--rot, 540deg); }
}

/* ---------------------------------------------------------------- finał */
.final .skybg { background: radial-gradient(circle at 50% 30%, #fff6c8 0, #ffe27a 22%, #8fd0ff 62%, #dff3ff 100%); }
.final .rays { position: absolute; left: 50%; top: 30%; width: 220vmax; height: 220vmax; translate: -50% -50%;
  background: repeating-conic-gradient(rgba(255, 255, 255, .28) 0 8deg, rgba(255, 255, 255, 0) 8deg 20deg);
  border-radius: 50%; animation: spin 40s linear infinite;
  -webkit-mask: radial-gradient(circle, #000 0 20%, transparent 46%); mask: radial-gradient(circle, #000 0 20%, transparent 46%); }
@keyframes spin { to { rotate: 360deg; } }
.final .stage { position: absolute; top: var(--top); bottom: calc(var(--bottom) + var(--btn) + 3vh); left: var(--left); right: var(--right);
  display: flex; align-items: flex-end; justify-content: center; gap: 2vw; }
.final .trophy { width: min(34vmin, 300px); height: min(34vmin, 300px); align-self: center; filter: drop-shadow(0 12px 18px var(--shadow)); animation: bob 3s ease-in-out infinite; }
.final .trophy svg { width: 100%; height: 100%; display: block; }
.final .hero { position: relative; width: min(30vw, 360px); height: min(66vh, 560px); }
.final .hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.final .total { position: absolute; left: 50%; translate: -50% 0; bottom: var(--bottom); }
.final .total .pill { height: calc(var(--btn) * 1.05); font-size: clamp(40px, 6.4vmin, 58px); }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-10px) rotate(3deg); } }

/* ---------------------------------------------------------------- obróć iPada */
.rotate { position: fixed; inset: 0; z-index: 50; background: linear-gradient(#3d9bf0, #8fd0ff); display: grid; place-items: center;
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s, visibility 0s .3s; }
.rotate.on { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .3s, visibility 0s; }
.rotate .ico { position: relative; width: min(56vmin, 340px); height: min(56vmin, 340px); }
.rotate .ico svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.rotate .tab { animation: turn 3s cubic-bezier(.5, 0, .3, 1) infinite; transform-origin: 50% 50%; filter: drop-shadow(0 12px 16px rgba(23, 48, 77, .25)); }
.rotate .arr { inset: -16% !important; width: 132% !important; height: 132% !important; opacity: .95; }
@keyframes turn { 0%, 25% { rotate: 0deg; } 55%, 85% { rotate: -90deg; } 100% { rotate: 0deg; } }

/* ---------------------------------------------------------------- przesłona przejść */
.veil { position: fixed; inset: 0; z-index: 40; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 50% 50%, #fff6e8 0, #ffe9c7 70%); transition: opacity .22s ease; }
.veil.on { opacity: 1; pointer-events: auto; }
.veil .dot { position: absolute; left: 50%; top: 50%; width: 9vmin; height: 9vmin; translate: -50% -50%; border-radius: 50%;
  background: var(--sun); border: 6px solid var(--sun-deep); box-shadow: 0 6px 0 var(--sun-deep); scale: .2; transition: scale .3s cubic-bezier(.3, 1.6, .5, 1); }
.veil.on .dot { scale: 1; }

/* ---------------------------------------------------------------- mniej ruchu */
@media (prefers-reduced-motion: reduce) {
  .scr, .scr.on { transform: none; transition-duration: .18s; }
  .pulse, .logo span, .cloud, .tile.now::after, .final .rays, .final .trophy, .rotate .tab { animation: none; }
  .rotate .tab { rotate: -90deg; }
  .cf { animation: none; display: none; }
  .star3.show .full { animation: none; scale: 1; opacity: 1; transition: opacity .2s; }
  .star3.show::after { display: none; }
  .strip { transition-duration: .2s; }
  .veil, .veil .dot { transition-duration: .12s; }
}