/* Na Oko – miarka budowlana, zeszyt w kratkę i długopis. */
:root {
  --ink: #16213b;
  --ink-2: #1f2c4b;
  --ink-3: #2c3b60;
  --on-ink: #f2f4f9;
  --on-ink-mute: #9eabc6;
  --yellow: #ffcc00;
  --yellow-deep: #d9a900;
  --red: #e1261c;
  --paper: #fdfdfb;
  --grid: #d6e5f5;
  --margin: #f1a7a7;
  --pen: #1d4fbf;
  --top: #1fbf6a;
  --good: #9ccf2e;
  --meh: #f29a1c;
  --bad: #e1261c;
  --swiat: #3f7cff;
  --polska: #e1261c;
  --r: 16px;
  --font: 'Archivo', 'Arial Narrow', Arial, system-ui, sans-serif;
  --hand: 'Caveat', 'Segoe Print', 'Bradley Hand', cursive;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.45;
  color: var(--ink);
  background: var(--yellow);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
body[data-screen='game'] { background: var(--ink); }
img { max-width: none; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid #7fb2ff; outline-offset: 2px; }

.screen { min-height: 100vh; min-height: 100dvh; }

/* ——— przyciski ——— */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4em;
  border: 0; border-radius: 12px; padding: 13px 18px; cursor: pointer;
  font-weight: 800; font-stretch: 108%; font-size: 16px; line-height: 1.1;
  transition: transform .08s ease, box-shadow .08s ease, background-color .15s;
}
.btn-primary { background: var(--yellow); color: var(--ink); box-shadow: 0 3px 0 var(--yellow-deep); }
.btn-primary:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--yellow-deep); }
.btn-ghost { background: transparent; box-shadow: inset 0 0 0 2px currentColor; }
.btn-ghost:hover { background: rgba(255, 255, 255, .08); }
.btn-go {
  width: 100%; font-size: 19px; padding: 16px; background: var(--yellow); color: var(--ink);
  box-shadow: 0 4px 0 var(--yellow-deep); font-stretch: 115%;
}
.btn-go:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--yellow-deep); }
.link { background: none; border: 0; padding: 6px 2px; cursor: pointer; font-weight: 650; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; }
.icon-btn {
  width: 40px; height: 40px; border-radius: 10px; border: 0; cursor: pointer; flex: none;
  background: var(--ink-2); display: grid; place-items: center;
}
.icon-btn svg { width: 22px; height: 22px; fill: none; stroke: var(--on-ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn .mute { display: none; }
.icon-btn.off .wave { display: none; }
.icon-btn.off .mute { display: inline; }

/* ——— krawędź miarki ——— */
.tape-edge {
  height: 30px; background-color: var(--yellow);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='30'%3E%3Cg fill='%2316213b'%3E%3Crect x='0' width='3' height='26'/%3E%3Crect x='10' width='1.5' height='9'/%3E%3Crect x='20' width='1.5' height='9'/%3E%3Crect x='30' width='1.5' height='9'/%3E%3Crect x='40' width='1.5' height='9'/%3E%3Crect x='50' width='2' height='16'/%3E%3Crect x='60' width='1.5' height='9'/%3E%3Crect x='70' width='1.5' height='9'/%3E%3Crect x='80' width='1.5' height='9'/%3E%3Crect x='90' width='1.5' height='9'/%3E%3C/g%3E%3Crect x='3' y='0' width='3' height='12' fill='%23e1261c'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  border-bottom: 2px solid var(--ink);
}

/* ——— ekran startowy ——— */
.home { display: flex; flex-direction: column; }
.home-head, .modes, .home-links, .home-foot { width: 100%; max-width: 1080px; margin: 0 auto; padding-inline: 20px; }
.home-head { padding-top: clamp(24px, 6vh, 64px); padding-bottom: 12px; }
.brand { display: flex; align-items: center; gap: clamp(10px, 2vw, 22px); }
.sign { width: clamp(50px, 11vw, 128px); flex: none; transform: rotate(-4deg); animation: sway 5s ease-in-out 1.2s infinite; transform-origin: 50% 90%; }
.logo {
  margin: 0; font-weight: 900; font-stretch: 125%; line-height: .82;
  font-size: clamp(42px, 12.6vw, 168px); letter-spacing: -0.035em; text-transform: uppercase; white-space: nowrap;
}
.tagline { font-size: clamp(17px, 2.2vw, 22px); max-width: 34ch; margin: 18px 0 0; font-weight: 500; }

.modes { display: grid; grid-template-columns: 1fr; gap: 18px; padding-top: 18px; padding-bottom: 12px; }
@media (min-width: 760px) { .modes { grid-template-columns: 1fr 1fr; gap: 24px; } }
.mode-card {
  background: var(--ink); color: var(--on-ink); border-radius: 22px; overflow: hidden;
  display: flex; flex-direction: column; box-shadow: 0 6px 0 rgba(22, 33, 59, .35);
}
.mode-preview {
  position: relative; height: 170px; margin: 10px 10px 0; border-radius: 14px; overflow: hidden;
  background-color: var(--paper);
  background-image: linear-gradient(to right, var(--grid) 1px, transparent 1px), linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
  background-size: 18px 18px; background-position: 0 2px;
}
.mode-preview::after { content: ''; position: absolute; left: 0; right: 0; bottom: 13px; height: 2px; background: var(--ink); }
.mode-preview img { position: absolute; }
.mode-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.mode-body h2 { margin: 0; font-size: 38px; font-weight: 900; font-stretch: 120%; line-height: 1; letter-spacing: -.02em; }
.mode-card[data-mode='swiat'] h2 { color: #8fb2ff; }
.mode-card[data-mode='polska'] h2 { color: #ff6a5c; }
.mode-body > p { margin: 0; color: var(--on-ink-mute); max-width: 44ch; }
.mode-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.mode-actions .btn { flex: 1 1 150px; }
.btn.done { background: #2f3f66; color: var(--on-ink); box-shadow: 0 3px 0 #111a30; }
.btn.done .daily-no { display: none; }
.mode-meta { font-size: 13px; color: var(--on-ink-mute); margin-top: auto !important; }

.home-links { display: flex; flex-wrap: wrap; gap: 6px 22px; padding-top: 10px; padding-bottom: 4px; }
.home-foot { font-size: 12.5px; opacity: .75; padding-top: 14px; padding-bottom: 28px; margin-top: auto; }
.home-foot a { color: inherit; }

/* ——— ekran gry ——— */
.game {
  display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto;
  height: 100vh; height: 100dvh; color: var(--on-ink);
  max-width: 1180px; margin: 0 auto;
  padding: calc(8px + env(safe-area-inset-top, 0px)) 12px calc(12px + env(safe-area-inset-bottom, 0px));
  gap: 8px;
}
.bar { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.bar-title { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; margin-right: auto; }
.bar-mode { font-weight: 900; font-stretch: 118%; font-size: 17px; }
.game[data-mode='swiat'] .bar-mode { color: #8fb2ff; }
.game[data-mode='polska'] .bar-mode { color: #ff7a6e; }
.bar-sub { font-size: 12.5px; color: var(--on-ink-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dots { display: flex; gap: 5px; margin: 0; padding: 0; list-style: none; }
.dots li { width: 18px; height: 7px; border-radius: 4px; background: var(--ink-3); transition: background-color .3s; }
.dots li.cur { background: var(--yellow); }
.dots li.s-top { background: var(--top); }
.dots li.s-good { background: var(--good); }
.dots li.s-meh { background: var(--meh); }
.dots li.s-bad { background: var(--bad); }
.total { display: flex; align-items: baseline; gap: 3px; min-width: 64px; justify-content: flex-end; }
.total b { font-size: 22px; font-weight: 900; font-stretch: 110%; font-variant-numeric: tabular-nums; color: var(--yellow); }
.total span { font-size: 12px; color: var(--on-ink-mute); }

.prompt { padding: 0 4px; }
.prompt-q { margin: 0; font-size: clamp(17px, 2.4vw, 23px); line-height: 1.2; font-weight: 500; }
.prompt-q strong { color: var(--yellow); font-weight: 800; }
#q-name { font-weight: 900; font-stretch: 108%; }

/* scena = kartka z zeszytu, kratka ma prawdziwą skalę */
.stage {
  --cell: 24px; --gx: 0px; --gy: 0px;
  position: relative; min-height: 240px; overflow: hidden; border-radius: var(--r);
  background-color: var(--paper);
  background-image: linear-gradient(to right, var(--grid) 1px, transparent 1px), linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
  background-size: var(--cell) var(--cell);
  background-position: var(--gx) var(--gy);
  touch-action: none; user-select: none; -webkit-user-select: none;
  color: var(--ink);
}
.stage.playing { cursor: ns-resize; }
.stage.grabbing { cursor: grabbing; }
.stage::before { content: ''; position: absolute; top: 0; bottom: 0; left: 28px; width: 2px; background: var(--margin); opacity: .6; }
.world { position: absolute; inset: 0; }
.ground { position: absolute; left: 0; right: 0; height: 0; border-top: 2.5px solid var(--ink); }
.ground::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 200px; background: repeating-linear-gradient(135deg, rgba(22, 33, 59, .08) 0 2px, transparent 2px 9px); }
.obj { position: absolute; left: 0; top: 0; will-change: transform; pointer-events: none; }
.obj img { display: block; width: 100%; height: 100%; }
.obj-box { position: absolute; border-radius: 4px; }
.obj-ghost img { opacity: .22; }
.obj-ghost .obj-box { outline: 2.5px dashed var(--pen); outline-offset: 1px; }
.world.enter .obj-ref img, .world.enter .obj-tgt img { animation: rise .5s cubic-bezier(.2, .9, .25, 1.15) both; transform-origin: 50% 100%; }
.world.enter .obj-tgt img { animation-delay: .08s; }
.handle {
  position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%;
  background: var(--yellow); box-shadow: 0 0 0 2.5px var(--ink); display: grid; place-items: center;
  pointer-events: none; opacity: 0; transition: opacity .2s;
}
.playing .handle { opacity: 1; }
.handle svg { width: 16px; height: 16px; fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

.lbl { position: absolute; left: 0; top: 0; text-align: center; max-width: 48%; line-height: 1.12; pointer-events: none; }
.lbl b { display: block; font-size: clamp(12.5px, 1.6vw, 15px); font-weight: 800; font-stretch: 88%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lbl .val { display: block; font-size: clamp(17px, 2.4vw, 22px); font-weight: 900; font-stretch: 105%; font-variant-numeric: tabular-nums; }
.lbl .val.live { color: var(--pen); }
.lbl .val.truth { color: #0f8a4a; }
.lbl small { display: block; font-size: 11.5px; color: #5b6784; }
.hardcore .lbl .val:not(.truth) { visibility: hidden; }
.hardcore .scale-tag { display: none; }

.marker {
  position: absolute; left: 0; top: 0; width: 34px; height: 34px; border-radius: 50%;
  border: 2.5px solid var(--red); opacity: 0; pointer-events: none; transition: opacity .2s;
}
.marker.on { opacity: 1; animation: pulse 1.4s ease-in-out infinite; }
.ghost-tag {
  position: absolute; left: 0; top: 0; font-family: var(--hand); font-size: 22px; font-weight: 700; color: var(--pen);
  pointer-events: none; transform-origin: 0 0; line-height: 1; white-space: nowrap;
}
.scale-tag {
  position: absolute; right: 12px; top: 8px; font-family: var(--hand); font-size: 21px; font-weight: 700; color: var(--pen);
  pointer-events: none; opacity: .85;
}
.stage-hint {
  position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%); text-align: center; pointer-events: none;
  font-family: var(--hand); color: var(--pen); line-height: 1.05; animation: hint 2.4s ease-in-out infinite;
}
.stage-hint span { display: block; font-size: 28px; font-weight: 700; }
.stage-hint span::before { content: '↕ '; }
.stage-hint small { font-size: 21px; }

/* sterowanie */
.controls { display: grid; gap: 10px; }
.tape-row { display: flex; gap: 8px; align-items: stretch; }
.step {
  flex: none; width: 52px; border-radius: 12px; border: 0; cursor: pointer; background: var(--ink-2);
  color: var(--on-ink); font-size: 28px; font-weight: 700; touch-action: manipulation;
}
.step:active { background: var(--ink-3); }
.tape {
  position: relative; flex: 1; height: 66px; background: var(--yellow); border-radius: 8px; overflow: hidden;
  cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none;
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .13), inset 0 3px 0 rgba(255, 255, 255, .45);
}
.tape.grab { cursor: grabbing; }
.tape[aria-disabled='true'] { opacity: .6; cursor: default; }
.tape-strip { position: absolute; left: 0; top: 0; height: 100%; will-change: transform; }
.tape-strip i { position: absolute; top: 0; width: 1.5px; height: 11px; background: var(--ink); transform: translateX(-50%); }
.tape-strip i.mid { height: 19px; width: 2px; }
.tape-strip i.maj { height: 29px; width: 3px; }
.tape-strip b {
  position: absolute; top: 30px; transform: translateX(-50%); white-space: nowrap;
  font-size: 12px; font-weight: 750; font-stretch: 75%; color: var(--ink);
}
.tape-strip b.maj { font-size: 14px; font-weight: 900; color: var(--red); top: 31px; }
.hardcore .tape-strip b { visibility: hidden; }
.tape-hair { position: absolute; left: 50%; top: 0; bottom: 0; width: 2.5px; margin-left: -1.25px; background: var(--red); }
.tape-hair::before, .tape-hair::after { content: ''; position: absolute; left: 50%; border: 7px solid transparent; transform: translateX(-50%); }
.tape-hair::before { top: 0; border-top-color: var(--red); }
.tape-hair::after { bottom: 0; border-bottom-color: var(--red); }
.tape-read {
  position: absolute; left: 50%; bottom: 5px; transform: translateX(-50%);
  background: var(--ink); color: var(--yellow); padding: 1px 9px 2px; border-radius: 6px; z-index: 1;
  font-weight: 900; font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none;
}

/* wynik rundy */
.result {
  display: grid; gap: 8px; background: var(--ink-2); border-radius: var(--r); padding: 14px 16px 16px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05);
}
.result.in { animation: up .35s cubic-bezier(.2, .9, .3, 1) both; }
.res-top { display: flex; align-items: center; gap: 14px; }
.res-score { display: flex; align-items: baseline; gap: 2px; flex: none; }
.res-score b { font-size: 54px; line-height: .9; font-weight: 900; font-stretch: 112%; font-variant-numeric: tabular-nums; color: var(--yellow); }
.res-score span { color: var(--on-ink-mute); font-weight: 700; }
.result[data-band='top'] .res-score b { color: #3ee08a; }
.result[data-band='bad'] .res-score b { color: #ff6a5c; }
.res-verdict { margin: 0; font-family: var(--hand); font-size: clamp(24px, 3.4vw, 32px); font-weight: 700; line-height: 1.02; color: #fff; }
.res-line { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 15px; color: var(--on-ink-mute); }
.res-line b { color: var(--on-ink); font-weight: 850; }
.res-line em { font-style: normal; color: var(--yellow); font-weight: 700; }
.res-fact { margin: 0; font-size: 14.5px; color: #cdd5e6; max-width: 70ch; }

/* ——— podsumowanie ——— */
.summary { display: flex; flex-direction: column; }
.sum-wrap { width: 100%; max-width: 640px; margin: 0 auto; padding: clamp(20px, 5vh, 48px) 20px 36px; }
.sum-kicker { margin: 0; font-weight: 700; font-size: 15px; }
.sum-score { display: flex; align-items: baseline; gap: 6px; margin-top: 4px; }
.sum-score b { font-size: clamp(96px, 26vw, 176px); line-height: .82; font-weight: 900; font-stretch: 125%; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.sum-score span { font-size: 28px; font-weight: 800; }
.sum-title { margin: 14px 0 0; font-size: clamp(26px, 5vw, 36px); line-height: 1.05; font-weight: 900; font-stretch: 110%; }
.sum-sub { margin: 4px 0 0; font-family: var(--hand); font-size: 26px; font-weight: 700; color: var(--pen); line-height: 1.1; }
.sum-list { list-style: none; margin: 22px 0 0; padding: 0; background: var(--ink); color: var(--on-ink); border-radius: var(--r); overflow: hidden; }
.sum-list li { display: flex; align-items: center; gap: 12px; padding: 11px 14px; }
.sum-list li + li { border-top: 1px solid var(--ink-3); }
.sl-tile { font-size: 20px; }
.sl-name { flex: 1; min-width: 0; font-weight: 800; line-height: 1.2; }
.sl-name small { display: block; font-weight: 450; font-size: 13px; color: var(--on-ink-mute); }
.sl-pts { font-size: 22px; font-weight: 900; font-variant-numeric: tabular-nums; color: var(--yellow); }
.sum-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.sum-actions .btn { flex: 1 1 180px; }
.summary .btn-primary { background: var(--ink); color: var(--yellow); box-shadow: 0 3px 0 #0b1224; }

/* ——— okna ——— */
.sheet {
  border: 0; border-radius: 20px; padding: 22px 22px 18px; width: min(560px, calc(100vw - 32px));
  background: var(--paper); color: var(--ink); box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
}
.sheet::backdrop { background: rgba(22, 33, 59, .6); }
.sheet h2 { margin: 0 0 10px; font-size: 30px; font-weight: 900; font-stretch: 118%; }
.how { margin: 0; padding-left: 22px; display: grid; gap: 8px; }
.how-note { margin: 12px 0 0; font-size: 14.5px; color: #3b4766; }
.sheet form { margin-top: 18px; }
.sheet form .btn { width: 100%; }
.st h3 { margin: 14px 0 6px; font-size: 20px; font-weight: 900; font-stretch: 112%; }
.st dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0; }
.st dl div { background: #eef2f8; border-radius: 12px; padding: 8px 10px; }
.st dt { font-size: 12px; color: #5b6784; }
.st dd { margin: 0; font-size: 24px; font-weight: 900; font-variant-numeric: tabular-nums; }
.st-empty { margin: 0; color: #5b6784; }

.toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 20px);
  background: var(--ink); color: var(--yellow); padding: 10px 16px; border-radius: 12px; font-weight: 800;
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 50; max-width: calc(100vw - 32px);
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.noscript { padding: 20px; font-weight: 700; }

.confetti { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 40; }
.confetti i { position: absolute; top: -12px; width: 9px; height: 14px; border-radius: 2px; animation: fall 2.2s cubic-bezier(.3, .6, .5, 1) both; }

@keyframes rise { from { transform: scale(.9, .6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes up { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px rgba(225, 38, 28, .18); } }
@keyframes hint { 50% { transform: translate(-50%, calc(-50% - 8px)); } }
@keyframes sway { 50% { transform: rotate(3deg); } }
@keyframes fall { to { transform: translate(var(--dx), 105vh) rotate(var(--r)); } }

/* ——— mniejsze ekrany ——— */
@media (max-width: 560px) {
  .game { padding-inline: 8px; gap: 6px; }
  .dots li { width: 12px; }
  .total { min-width: 52px; }
  .bar-sub { font-size: 11.5px; }
  .step { width: 44px; }
  .tape { height: 62px; }
  .res-score b { font-size: 46px; }
  .stage::before { left: 18px; }
}
@media (max-height: 640px) {
  .res-fact { font-size: 13px; }
  .tape { height: 56px; }
  .btn-go { padding: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}