/* The Hunger Games · Neighbourhood Passport — v7 "Sticker book" style: pastel paper bands, crushed display type,
   1px black outlines on everything, a blue inflatable ribbon and a six-colour sticker set. Tokens follow DESIGN.md (Slush). */

/* ================= Tokens ================= */
:root {
  --ink:#000000; --paper:#ffffff; --sky:#dceeff; --concrete:#cccccc; --mist:#e9e9e9;
  --blue:#4da2ff; --mint:#55db9c; --lav:#e9ccff; --ember:#fb4903; --sun:#ffd731; --violet:#5c4ade;
  --muted:#4d4d4d; --danger:#c62f1d; --focus:#5c4ade;
  --font:"Inter","Aeonik Pro",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --display:"Rubik","Lateral",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --lh-d:.82;

  --r-card:28px; --r-lg:40px; --r-img:20px; --r-icon:16px; --r-pill:1600px;
  --gutter:16px; --wrap:1280px; --top-h:62px; --rail-w:0px; --section:48px;
  color-scheme:light;
}
html[lang="hu"] { --lh-d:.9; }   /* room for Ő/Ű/É accents between stacked lines */

/* ================= Reset ================= */
*,*::before,*::after { box-sizing:border-box; }
[hidden] { display:none !important; }
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-padding-top:84px; }
body { margin:0; min-height:100svh; padding-left:var(--rail-w); font:500 15px/1.45 var(--font); letter-spacing:-.01em; font-feature-settings:"ss01","tnum"; color:var(--ink); background:var(--sky); overflow-x:hidden; -webkit-font-smoothing:antialiased; }
main { overflow-x:hidden; overflow-x:clip; }   /* ribbons and stickers may hang off the edge; never the page */
img,svg { display:block; max-width:100%; }
button,input { font:inherit; color:inherit; letter-spacing:inherit; }
button { cursor:pointer; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
button:disabled { cursor:default; }
a { color:inherit; -webkit-tap-highlight-color:transparent; }
h1,h2,h3,p { margin:0; }
h1,h2,h3 { font-weight:700; }
:is(button,a,summary,input,select):focus-visible { outline:3px solid var(--focus); outline-offset:3px; border-radius:14px; }
.wrap { width:min(var(--wrap),100% - var(--gutter) * 2); margin-inline:auto; }
.skip-link { position:fixed; z-index:90; top:-90px; left:16px; padding:12px 18px; border-radius:var(--r-pill); background:var(--ink); color:#fff; text-decoration:none; }
.skip-link:focus { top:10px; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.is-poster img { width:177.78% !important; height:auto !important; max-width:none; transform:translate(-21.9%,-16.7%); }

/* ================= Type ================= */
/* Display: sculptural, crushed, uppercase. Everything else is the UI sans. */
.wordmark,.page-title,.section-title,.panel-title,.group-title,.card-title,.passport-heading h2,.th-title,.place-hero h1,.qr-band h2,
.mystery-copy b,.links-card h3,.wt-main h3,.pin-box h2,.menu-head p,.step-tile h3,.ticket-destination strong,.card-offer h3 {
  font-family:var(--display); font-weight:900; line-height:var(--lh-d); letter-spacing:0; text-transform:uppercase; }
.fit { overflow-wrap:normal; }
.wordmark { color:var(--ink); text-decoration:none; white-space:nowrap; }
.eyebrow { margin:0 0 8px; font-size:12px; font-weight:700; line-height:1.3; letter-spacing:.032em; text-transform:uppercase; color:var(--ink); }
.page-title { font-size:clamp(38px,11vw,88px); }
.section-title { display:inline-flex; align-items:center; gap:.18em; font-size:clamp(32px,8.5vw,64px); }
.section-title svg { width:.62em; height:.62em; stroke-width:3; }
.section-lead { margin-top:12px; max-width:56ch; font-size:15px; line-height:1.45; color:var(--muted); }
.panel-title { font-size:clamp(24px,6vw,32px); }
.lead { font-size:16px; line-height:1.5; }
.hint { text-align:center; font-size:12px; line-height:1.56; color:var(--muted); }
.hint.left { text-align:left; }

/* ================= Marquee strip ================= */
.marquee { overflow:hidden; background:var(--ink); color:#fff; }
.marquee-track { display:flex; width:max-content; }
.marquee-track > div { display:flex; flex:none; align-items:center; }
.marquee span,.marquee i { padding:9px 0; font-size:12px; font-weight:700; font-style:normal; line-height:1.2; letter-spacing:.032em; text-transform:uppercase; white-space:nowrap; }
.marquee i { padding-inline:18px; color:var(--sun); }

/* ================= Top bar ================= */
.topbar { position:sticky; top:0; z-index:40; padding-top:env(safe-area-inset-top,0px); background:var(--sky); border-bottom:1px solid transparent; transition:background-color .2s,border-color .2s; }
.topbar.scrolled { background:var(--paper); border-bottom-color:var(--ink); }
.topbar-inner { display:flex; align-items:center; gap:12px; height:var(--top-h); }
.brand { display:flex; align-items:center; gap:10px; min-width:0; text-decoration:none; }
.brand .wordmark { font-size:28px; }
.brand .logo-chip { width:46px; height:34px; padding:4px 6px; border-radius:12px; }
.brand-name { font-size:13px; font-weight:700; letter-spacing:.032em; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
body[data-page="home"] .brand { visibility:hidden; }   /* the hero carries the big wordmark */
.header-actions { display:flex; align-items:center; gap:8px; margin-left:auto; }
.lang-toggle { display:flex; padding:3px; border:1px solid var(--ink); border-radius:var(--r-pill); background:var(--paper); }
.lang-toggle button { min-width:40px; min-height:32px; padding:0 10px; border:0; border-radius:var(--r-pill); background:transparent; color:var(--ink); font-size:12px; font-weight:700; letter-spacing:.032em; }
.lang-toggle button[aria-pressed="true"] { background:var(--ink); color:#fff; }
.icon-btn { display:grid; place-items:center; width:42px; height:42px; padding:0; border:1px solid var(--ink); border-radius:50%; background:var(--paper); color:var(--ink); transition:background-color .15s; }
.icon-btn:hover { background:var(--lav); }
.icon-btn svg { width:20px; height:20px; }

/* ================= Sidebar rail (desktop) ================= */
.rail { display:none; position:fixed; z-index:45; inset:0 auto 0 0; width:var(--rail-w); flex-direction:column; align-items:center; gap:6px; padding:14px 8px 18px; border-right:1px solid var(--ink); background:var(--paper); }
.rail-home { display:grid; place-items:center; width:46px; height:46px; margin-bottom:18px; border:1px solid var(--ink); border-radius:50%; background:var(--sun); color:var(--ink); font:900 24px/1 var(--display); text-decoration:none; transition:rotate .2s; }
.rail-home:hover { rotate:-12deg; }
.rail-items { display:flex; flex-direction:column; gap:6px; }
.rail button { position:relative; display:grid; place-items:center; width:48px; height:48px; padding:0; border:1px solid transparent; border-radius:var(--r-pill); background:transparent; color:var(--ink); transition:background-color .15s,border-color .15s; }
.rail button svg { width:24px; height:24px; }
.rail button:hover { border-color:var(--ink); }
.rail button[aria-current="page"] { border-color:var(--ink); background:var(--ink); color:#fff; }
.rail .rail-avatar { width:40px; height:40px; margin-top:auto; border-color:var(--ink); border-radius:50%; background:var(--lav); }
.rail .rail-avatar svg { width:20px; height:20px; }
.rail-tip { position:absolute; left:calc(100% + 10px); top:50%; translate:0 -50%; padding:6px 12px; border-radius:var(--r-pill); background:var(--ink); color:#fff; font-size:12px; font-weight:700; letter-spacing:.032em; text-transform:uppercase; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .15s; }
.rail button:hover .rail-tip,.rail button:focus-visible .rail-tip { opacity:1; }

/* Landing (Places, Compass, main QR) is general: place-only tabs appear once a place is chosen. */
body[data-scope="landing"] :is(.rail,.bottom-nav) :is([data-nav="passport"],[data-nav="wallet"],[data-nav="guide"]) { display:none; }
.bottom-nav [data-nav="compass"] { display:none; }
body[data-scope="landing"] .bottom-nav [data-nav="compass"] { display:flex; }

/* ================= Bottom tab bar (phones) ================= */
.bottom-nav { position:fixed; z-index:40; left:0; right:0; bottom:calc(10px + env(safe-area-inset-bottom,0px)); margin-inline:auto; width:min(520px,calc(100% - 20px)); display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:2px; padding:5px; border:1px solid var(--ink); border-radius:34px; background:var(--paper); }
body[data-scope="landing"] .bottom-nav { grid-template-columns:repeat(3,minmax(0,1fr)); width:min(360px,calc(100% - 20px)); }
.bottom-nav button { min-width:0; min-height:54px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:4px 2px; border:0; border-radius:28px; background:transparent; color:var(--ink); font-size:10.5px; font-weight:700; line-height:1.15; letter-spacing:0; text-align:center; transition:background-color .15s,color .15s; }
.bottom-nav button svg { width:22px; height:22px; flex:none; }
.bottom-nav button span { max-width:100%; -webkit-hyphens:auto; hyphens:auto; }
.bottom-nav button[aria-current="page"] { background:var(--ink); color:#fff; }

/* ================= Stickers + ribbon ================= */
.sticker { display:block; flex:none; aspect-ratio:1; rotate:var(--rot,0deg); pointer-events:none; }
.sticker svg { width:100%; height:100%; overflow:visible; }
.ribbon { display:block; max-width:none; height:auto; pointer-events:none; }

/* ================= Buttons & chips ================= */
/* Actions are black-filled or black-outlined pills — never blue. */
.btn { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:48px; padding:11px 22px; border:1px solid var(--ink); border-radius:var(--r-pill); background:var(--ink); color:#fff; font-size:13px; font-weight:700; line-height:1.2; letter-spacing:.032em; text-transform:uppercase; text-align:center; text-decoration:none; transition:transform .15s,background-color .15s,color .15s; }
.btn:hover:not(:disabled) { transform:translateY(-2px); }
.btn:active:not(:disabled) { transform:translateY(0); }
.btn:disabled { opacity:.45; }
.btn svg { width:18px; height:18px; flex:none; }
.btn.inline { width:auto; }
.btn.secondary,.btn.on-dark { background:var(--paper); color:var(--ink); }
.btn.secondary:hover:not(:disabled),.btn.on-dark:hover:not(:disabled) { background:var(--lav); }
.button-stack { display:flex; flex-direction:column; gap:10px; }
.button-row { display:flex; flex-wrap:wrap; gap:10px; }
.round-btn { flex:none; display:grid; place-items:center; width:40px; height:40px; padding:0; border:1px solid var(--ink); border-radius:50%; background:var(--paper); color:var(--ink); transition:background-color .15s,opacity .2s; }
.round-btn:hover:not(:disabled) { background:var(--lav); }
.round-btn:disabled { opacity:.35; }
.round-btn svg { width:18px; height:18px; }
.text-link { align-self:flex-start; padding:4px 0; border:0; background:none; color:var(--ink); font-size:13px; font-weight:700; letter-spacing:.032em; text-transform:uppercase; text-decoration:underline; text-underline-offset:4px; }
.badge { display:inline-flex; align-items:center; align-self:flex-start; padding:4px 10px; border:1px solid var(--ink); border-radius:var(--r-pill); background:var(--paper); color:var(--ink); font-size:10.5px; font-weight:700; line-height:1.3; letter-spacing:.032em; text-transform:uppercase; }
.badge.success { background:var(--ink); color:#fff; }
.meta-chip { display:inline-flex; align-items:center; gap:6px; padding:6px 14px 6px 10px; border:1px solid var(--ink); border-radius:var(--r-pill); background:var(--paper); font-size:12px; font-weight:700; letter-spacing:.032em; text-transform:uppercase; }
.meta-chip svg { width:16px; height:16px; }
.img-label { position:absolute; left:8px; bottom:8px; max-width:calc(100% - 16px); padding:4px 10px; border:1px solid var(--ink); border-radius:var(--r-pill); background:var(--paper); color:var(--ink); font-size:10px; font-weight:700; line-height:1.3; letter-spacing:.032em; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.img-label.dark { background:var(--ink); color:#fff; }

/* Brand logo on its own colour — a venue's colour shows only in its logo chip. */
.logo-chip { flex:none; display:grid; grid-template:minmax(0,1fr) / minmax(0,1fr); place-items:center; width:52px; height:38px; padding:5px 7px; border:1px solid var(--ink); border-radius:14px; background:var(--chip,#fff); }
.logo-chip img { width:100%; height:100%; object-fit:contain; }
.chip-sun { --chip:#3f7350; } .chip-hun { --chip:#f26a12; } .chip-bar { --chip:#1c1714; } .chip-kol { --chip:#eadcc4; }
.chip-ker { --chip:#9b1f2b; } .chip-ser { --chip:#183324; }
.chip-sun img,.chip-hun img { filter:brightness(0) invert(1); }

/* Each place has one brand colour, used behind its logo on the front page and for its own page header:
   Sunshine green → sage, Hunger orange → its poster cream, Cairo orange → its charcoal, Kolab black → its cream,
   Kern black → a blush of its red, Serene gold → its forest green. --logo-ink is the text colour on top. */
.tile-sun { --logo-bg:#dce8da; } .tile-hun { --logo-bg:#fce7cc; } .tile-bar { --logo-bg:#1c1714; --logo-ink:#fff; }
.tile-kol { --logo-bg:#eadcc4; } .tile-ker { --logo-bg:#f3d2d5; } .tile-ser { --logo-bg:#183324; --logo-ink:#fff; }

/* ================= Surfaces ================= */
/* No shadows: elevation is a 1px black outline and a colour change. (Pressable things also stand on a hard ink
   ledge — see motion.css.) */
.card { position:relative; border:1px solid var(--ink); border-radius:var(--r-card); background:var(--paper); color:var(--ink); }
.panel { display:flex; flex-direction:column; gap:16px; padding:24px; }
.panel-img { margin:-16px -16px 0; aspect-ratio:2; overflow:hidden; border:1px solid var(--ink); border-radius:var(--r-img); background:var(--mist); }
.panel-img img { width:100%; height:100%; object-fit:cover; }
.list-card { overflow:hidden; border:1px solid var(--ink); border-radius:var(--r-card); background:var(--paper); }
.list-card > * + * { border-top:1px solid var(--ink); }
.row-link { display:flex; align-items:center; gap:12px; width:100%; padding:12px 16px; border:0; background:transparent; color:var(--ink); text-align:left; text-decoration:none; transition:background-color .15s,transform .15s; }
.row-link:hover { background:var(--lav); }
.card.row-link { background:var(--paper); }
.card.row-link:hover { transform:translateY(-2px) rotate(-.6deg); background:var(--lav); }
.row-link[aria-current="true"],.row-link.is-target { background:var(--sky); }
.row-copy { flex:1; min-width:0; }
.row-copy b { display:block; font-size:14px; font-weight:700; }
.row-copy small { display:block; margin-top:1px; font-size:12px; color:var(--muted); }
.row-link > svg { flex:none; width:16px; height:16px; }
.empty-note { padding:18px 20px; border:1px dashed var(--ink); border-radius:var(--r-img); background:var(--paper); color:var(--muted); font-size:14px; }

/* ================= Landing ================= */
.hero { padding:8px 0 var(--section); overflow:hidden; }
.constellation { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px 10px; align-items:start; padding:10px 0 4px; }
.float-card { display:flex; flex-direction:column; min-width:0; padding:6px 6px 10px; border:1px solid var(--ink); border-radius:22px; background:var(--paper); color:var(--ink); text-align:left; rotate:var(--rot,0deg); transition:rotate .2s,translate .2s; }
.float-card:hover { rotate:0deg; translate:0 -3px; }
.float-card.f1 { --rot:-5deg; margin-top:10px; } .float-card.f2 { --rot:3deg; } .float-card.f3 { --rot:-3deg; margin-top:20px; }
.float-card.f4 { --rot:4deg; margin-top:2px; } .float-card.f5 { --rot:-4deg; margin-top:-8px; } .float-card.f6 { --rot:2deg; margin-top:8px; }
.fc-img { display:block; aspect-ratio:1; overflow:hidden; border:1px solid var(--ink); border-radius:16px; background:var(--logo-bg,var(--mist)); }
.fc-img img { width:100%; height:100%; object-fit:cover; }
.brand-img { object-fit:contain !important; padding:14% 9%; }
.fc-name { margin:8px 4px 0; font-size:12px; font-weight:700; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fc-meta { display:flex; align-items:center; gap:6px; margin:4px 4px 0; }
.fc-meta small { font-size:9px; font-weight:700; color:var(--muted); }
.dots { display:flex; gap:2px; }
.dots i { width:5px; height:5px; border-radius:50%; background:var(--concrete); }
.dots i.on { background:var(--ink); }

.hero-copy { display:flex; flex-direction:column; align-items:center; padding-top:28px; text-align:center; }
.wm-stage { position:relative; isolation:isolate; display:grid; grid-template-columns:minmax(0,1fr); place-items:center; width:100%; padding:clamp(18px,5vw,56px) 0; }
.wm-stage .ribbon { position:absolute; z-index:-1; left:50%; top:50%; width:min(165%,1500px); translate:-50% -47%; }
.wm-stage .sticker { position:absolute; z-index:2; width:clamp(42px,11vw,104px); }
.wm-stage .st-1 { left:0; top:2%; } .wm-stage .st-2 { right:2%; top:-2%; }
.wm-stage .st-3 { left:9%; bottom:-6%; } .wm-stage .st-4 { right:8%; bottom:-8%; }
.wordmark-xl { position:relative; z-index:1; max-width:100%; font-size:clamp(84px,27vw,300px); padding-top:.06em; }
.compass-go { margin-top:26px; }
.compass-go svg { width:20px; height:20px; }
.hero-lead { max-width:40ch; margin-top:16px; font-size:16px; line-height:1.45; }
.search { position:relative; width:min(560px,100%); margin-top:22px; }
.search input { width:100%; height:56px; padding:4px 62px 4px 22px; border:1px solid var(--ink); border-radius:var(--r-pill); background:var(--paper); color:var(--ink); font-size:16px; font-weight:500; outline:none; -webkit-appearance:none; appearance:none; }
.search input::placeholder { color:var(--muted); opacity:1; }
.search input::-webkit-search-cancel-button { -webkit-appearance:none; appearance:none; }
.search input:focus-visible { outline:3px solid var(--focus); outline-offset:3px; border-radius:var(--r-pill); }
.search-go { position:absolute; right:6px; top:6px; display:grid; place-items:center; width:44px; height:44px; padding:0; border:0; border-radius:50%; background:var(--ink); color:#fff; transition:transform .15s; }
.search-go:hover { transform:scale(1.06); }
.search-go svg { width:20px; height:20px; }
.cat-row { display:flex; gap:8px; width:calc(100% + var(--gutter) * 2); margin-top:16px; padding:4px var(--gutter) 8px; overflow-x:auto; scrollbar-width:none; }
.cat-row::-webkit-scrollbar { display:none; }
.cat-pill { flex:none; display:inline-flex; align-items:center; gap:8px; min-height:42px; padding:5px 16px 5px 5px; border:1px solid var(--ink); border-radius:var(--r-pill); background:var(--paper); color:var(--ink); font-size:13px; font-weight:700; letter-spacing:.032em; text-transform:uppercase; white-space:nowrap; transition:background-color .15s,color .15s; }
.cat-pill:hover { background:var(--lav); }
.cat-pill[aria-pressed="true"] { background:var(--ink); color:#fff; }
.cat-icon { display:grid; place-items:center; width:30px; height:30px; border:1px solid var(--ink); border-radius:50%; color:#fff; }
.cat-icon svg { width:16px; height:16px; }
.cat-all { background:var(--ink); } .cat-coffee { background:var(--violet); } .cat-food { background:var(--ember); } .cat-barber { background:var(--mint); color:var(--ink); }
.cat-pill[aria-pressed="true"] .cat-icon { border-color:#fff; }
.cat-pill[aria-pressed="true"] .cat-all { background:#fff; color:var(--ink); }

/* Full-bleed colour bands: sky (body) → white → concrete. */
.section { padding-block:var(--section); background:var(--paper); }
.section.tight { background:var(--concrete); }
.section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:20px; }
.section-head.stacked { display:block; }
.section-head.spaced { margin-top:var(--section); }
.rail-arrows { display:none; gap:8px; }
.place-rail { display:grid; grid-auto-flow:column; grid-auto-columns:min(78%,300px); gap:12px; margin-inline:calc(var(--gutter) * -1); padding:6px var(--gutter) 10px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:var(--gutter); overscroll-behavior-x:contain; scrollbar-width:none; }
.place-rail::-webkit-scrollbar { display:none; }
.place-card { scroll-snap-align:start; display:flex; flex-direction:column; gap:12px; min-width:0; padding:8px 8px 16px; border:1px solid var(--ink); border-radius:var(--r-card); background:var(--paper); color:var(--ink); text-align:left; transition:transform .2s; }
.place-card:hover { transform:translateY(-3px) rotate(-.8deg); }
.pcard-img { position:relative; display:block; aspect-ratio:1; overflow:hidden; border:1px solid var(--ink); border-radius:var(--r-img); background:var(--logo-bg,var(--mist)); }
.pcard-img .brand-img { padding:16% 12% 22%; }
.pcard-img img { width:100%; height:100%; object-fit:cover; }
.pcard-body { display:flex; align-items:center; gap:10px; padding:0 8px; }
.pcard-copy { min-width:0; }
.pcard-copy b { display:block; font-size:16px; font-weight:700; line-height:1.2; }
.pcard-copy small { display:block; margin-top:2px; font-size:12px; color:var(--muted); }
.pcard-reward { display:flex; align-items:flex-start; gap:8px; margin:0 8px; padding-top:12px; border-top:1px solid var(--ink); }
.pcard-reward svg { flex:none; width:18px; height:18px; margin-top:1px; }
.pcard-reward b { display:block; font-size:14px; font-weight:700; }
.pcard-reward small { display:block; font-size:12px; color:var(--muted); }

/* QR download card: Voltage Violet, white type, logos as a sticker sheet. */
.qr-band { display:grid; gap:24px; padding:28px 22px; border:1px solid var(--ink); border-radius:var(--r-lg); background:var(--violet); color:#fff; }
.qr-band .eyebrow { color:#fff; opacity:.8; }
.qr-band h2 { font-size:clamp(36px,9vw,72px); }
.qr-band-copy > p:not(.eyebrow) { margin-top:12px; font-size:15px; }
.qr-band .btn { margin-top:22px; }
.qr-band-logos { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; align-content:center; padding:14px; border:1px solid var(--ink); border-radius:var(--r-img); background:var(--paper); }
.qr-band-logos .logo-chip { width:auto; height:56px; border-radius:16px; }
.qr-band-logos .logo-chip:nth-child(odd) { rotate:-3deg; } .qr-band-logos .logo-chip:nth-child(even) { rotate:2deg; }

/* ================= Place page (Quests) ================= */
.place-top { display:grid; gap:16px; padding-top:8px; padding-bottom:var(--section); }
/* Poster: logo pill + photo sticker on top, the place's name as sculptural type below. */
.place-hero { position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,44%); grid-template-areas:"logo photo" "name name" "sub sub" "act act"; align-items:start; gap:0 12px; padding:16px 16px 20px; overflow:hidden; border:1px solid var(--ink); border-radius:var(--r-lg); background:var(--logo-bg,var(--paper)); color:var(--logo-ink,var(--ink)); }
.place-hero > img { grid-area:photo; width:100%; aspect-ratio:1; object-fit:cover; margin-top:4px; border:1px solid var(--ink); border-radius:var(--r-img); rotate:4deg; background:var(--mist); }
.ph-sticker { grid-area:photo; z-index:2; align-self:end; justify-self:start; width:clamp(44px,12vw,76px); translate:-38% 34%; }
.ph-copy { display:contents; }
.ph-logo { grid-area:logo; justify-self:start; display:flex; align-items:center; max-width:100%; height:50px; padding:6px 16px; border:1px solid var(--ink); border-radius:var(--r-pill); background:var(--paper); }
.ph-logo img { width:auto; height:36px; max-width:100%; object-fit:contain; }
.place-hero h1 { grid-area:name; position:relative; z-index:1; margin-top:22px; font-size:clamp(46px,13.5vw,108px); }
.place-hero p { grid-area:sub; margin-top:12px; font-size:14px; font-weight:600; line-height:1.4; }
.ph-actions { grid-area:act; display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.ph-actions .btn { min-height:42px; padding:8px 16px; font-size:12px; }

.passport-panel { display:flex; flex-direction:column; padding:22px 20px 20px; }
.passport-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; }
.passport-heading > div:first-child { min-width:0; flex:1; }
.passport-heading h2 { font-size:clamp(26px,7vw,34px); }
.passport-score { flex:none; display:flex; flex-direction:column; align-items:flex-end; }
.passport-score b { font:900 52px/.8 var(--display); }
.passport-score span { margin-top:6px; font-size:11px; font-weight:700; letter-spacing:.032em; text-transform:uppercase; }
.progress { height:14px; margin:18px 0 22px; overflow:hidden; border:1px solid var(--ink); border-radius:var(--r-pill); background:var(--paper); }
.progress span { display:block; height:100%; border-radius:inherit; background:var(--ember); transition:width .5s ease; }
.progress span[style*="width:0"] { display:none; }
.progress.thin { height:10px; margin:12px 0 0; }
.stamp-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px 6px; }
.stamp-cell { display:flex; flex-direction:column; align-items:center; gap:6px; min-width:0; padding:0; border:0; background:transparent; color:var(--ink); }
.stamp-cell span { display:grid; place-items:center; width:48px; height:48px; border:1px dashed var(--ink); border-radius:50%; background:var(--paper); color:var(--ink); font-size:13px; font-weight:700; transition:transform .15s; }
.stamp-cell:hover span { transform:scale(1.07); }
.stamp-cell small { max-width:100%; font-size:10px; font-weight:700; line-height:1.25; letter-spacing:-.01em; text-align:center; -webkit-hyphens:auto; hyphens:auto; }
/* Collected stamps become stickers, cycling through the palette. */
.stamp-cell:nth-child(6n+1) { --stamp:var(--sun); } .stamp-cell:nth-child(6n+2) { --stamp:var(--mint); } .stamp-cell:nth-child(6n+3) { --stamp:var(--lav); }
.stamp-cell:nth-child(6n+4) { --stamp:var(--blue); } .stamp-cell:nth-child(6n+5) { --stamp:var(--ember); } .stamp-cell:nth-child(6n) { --stamp:var(--violet); --stamp-ink:#fff; }
.stamp-cell.collected span { border-style:solid; background:var(--stamp); color:var(--stamp-ink,var(--ink)); font-size:22px; rotate:-9deg; }
.stamp-cell.fresh span { animation:stamp-in .4s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes stamp-in { from { transform:scale(.3); opacity:0; } }
.milestones { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin:22px 0 16px; text-align:center; }
.milestones span { font-size:11px; line-height:1.4; color:var(--muted); }
.milestones b { display:block; font-size:11px; font-weight:700; letter-spacing:.032em; text-transform:uppercase; color:var(--ink); }
.milestones .achieved b::before { content:"✱ "; }
.next-reward { display:flex; align-items:center; gap:12px; width:100%; margin-top:auto; padding:10px 14px 10px 10px; border:1px solid var(--ink); border-radius:var(--r-img); background:var(--lav); color:var(--ink); text-align:left; transition:transform .15s; }
.next-reward:hover { transform:translateY(-2px); }
.next-reward.ready { background:var(--ink); color:#fff; }
.nr-art { flex:none; width:54px; height:54px; overflow:hidden; border:1px solid var(--ink); border-radius:var(--r-icon); background:var(--paper); }
.nr-art img { width:100%; height:100%; object-fit:cover; }
.nr-copy { flex:1; min-width:0; }
.nr-copy small { display:block; font-size:11px; color:var(--muted); }
.nr-copy small:first-child { font-weight:700; letter-spacing:.032em; text-transform:uppercase; color:inherit; }
.nr-copy b { display:block; margin:2px 0; font-size:16px; font-weight:700; }
.next-reward.ready small { color:#fff; }
.next-reward > svg { flex:none; width:18px; }

.quest-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.quest-card { display:flex; flex-direction:column; min-width:0; padding:8px 8px 14px; border:1px solid var(--ink); border-radius:var(--r-card); background:var(--paper); color:var(--ink); text-align:left; transition:transform .2s; }
.quest-card:nth-child(odd):hover { transform:translateY(-3px) rotate(-1deg); } .quest-card:nth-child(even):hover { transform:translateY(-3px) rotate(1deg); }
.quest-card.done { background:var(--sky); }
.qc-img { position:relative; display:block; aspect-ratio:1; overflow:hidden; border:1px solid var(--ink); border-radius:var(--r-img); background:var(--mist); }
.qc-img img { width:100%; height:100%; object-fit:cover; }
.qc-title { display:block; margin:12px 6px 0; font-size:14px; font-weight:700; line-height:1.25; }
.qc-sub { display:block; margin:4px 6px 0; font-size:12px; line-height:1.4; color:var(--muted); }

.adventure-list { display:grid; }
.quest-row { display:flex; align-items:center; gap:14px; width:100%; padding:16px; border:0; background:transparent; color:var(--ink); text-align:left; transition:background-color .15s; }
.quest-row:hover { background:var(--lav); }
.quest-row > svg { flex:none; width:16px; }
.quest-number { flex:none; display:grid; place-items:center; width:46px; height:46px; border:1px solid var(--ink); border-radius:50%; background:var(--paper); color:var(--ink); font-size:13px; font-weight:700; }
.quest-done .quest-number,.quest-number.quest-done { background:var(--ink); color:#fff; font-size:20px; }
.quest-copy { flex:1; min-width:0; display:flex; flex-direction:column; align-items:flex-start; }
.quest-title { font-size:15px; font-weight:700; line-height:1.3; }
.quest-description { margin-top:2px; font-size:12.5px; line-height:1.4; color:var(--muted); }
.quest-copy .badge { margin-top:8px; }

.extras-grid { display:grid; gap:12px; margin-top:24px; }
.mystery-card { display:flex; align-items:center; gap:16px; width:100%; padding:20px; border:1px solid var(--ink); border-radius:var(--r-card); background:var(--violet); color:#fff; text-align:left; transition:transform .2s; }
.mystery-card:hover { transform:translateY(-2px) rotate(-.6deg); }
.mystery-symbol { flex:none; display:grid; place-items:center; width:54px; height:54px; border:1px solid var(--ink); border-radius:50%; background:var(--sun); color:var(--ink); font-size:24px; rotate:-10deg; }
.mystery-copy { flex:1; min-width:0; }
.mystery-copy small { display:block; font-size:11px; font-weight:700; letter-spacing:.032em; text-transform:uppercase; }
.mystery-copy b { display:block; margin:6px 0 4px; font-size:clamp(20px,6.2vw,24px); }
.mystery-copy span { display:block; font-size:12px; }
.mystery-card > svg { flex:none; width:18px; }
.links-card { display:flex; flex-direction:column; gap:10px; padding:24px; }
.links-card h3 { font-size:28px; }
.links-card p { margin-bottom:6px; font-size:14px; color:var(--muted); }

/* ================= Inner pages ================= */
/* Title row: the ribbon swoops behind the display title; one sticker is pinned beside it. */
.page-head { position:relative; isolation:isolate; display:flex; align-items:flex-start; gap:14px; padding:18px 0 30px; }
.page-head .ribbon { position:absolute; z-index:-1; right:-24%; top:52%; width:clamp(420px,72vw,860px); translate:0 -50%; }
.page-head .round-btn { margin-top:2px; }
.page-head-copy { flex:1; min-width:0; }
.head-sticker { float:right; width:clamp(46px,12vw,72px); margin:-4px 0 8px 10px; }
.head-chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; clear:both; }
.page-col { width:min(680px,100% - var(--gutter) * 2); margin-inline:auto; display:flex; flex-direction:column; gap:16px; padding-bottom:var(--section); }
.page-col.wide { width:min(980px,100% - var(--gutter) * 2); }
.page-col > .page-head { padding-bottom:12px; }
.page-wide { width:min(1040px,100% - var(--gutter) * 2); padding-bottom:var(--section); }

.quest-head { display:flex; align-items:center; gap:14px; }
.quest-head .quest-number { width:56px; height:56px; font-size:18px; }
.quest-head .eyebrow { margin-bottom:6px; }
.reward-chip { display:inline-flex; align-items:center; gap:6px; align-self:flex-start; padding:6px 14px 6px 10px; border:1px solid var(--ink); border-radius:var(--r-pill); background:var(--sun); font-size:12px; font-weight:700; letter-spacing:.032em; text-transform:uppercase; }
.reward-chip svg,.done-note svg { flex:none; width:16px; height:16px; }
.steps-box { padding:18px 20px; border:1px solid var(--ink); border-radius:var(--r-img); background:var(--lav); }
.steps-box h3 { margin-bottom:8px; font-size:12px; letter-spacing:.032em; text-transform:uppercase; }
.steps-box ol { margin:0; padding-left:20px; font-size:14px; line-height:1.5; }
.steps-box li + li { margin-top:6px; }
.done-note { display:flex; align-items:center; gap:10px; padding:14px 16px; border-radius:var(--r-img); background:var(--ink); color:#fff; font-size:14px; font-weight:700; }

/* PIN */
.pin-box { align-items:center; text-align:center; }
.pin-box h2 { font-size:clamp(28px,7.5vw,36px); }
.pin-box > p { max-width:36ch; font-size:14px; color:var(--muted); }
.pin-dots { display:flex; justify-content:center; gap:16px; margin-top:8px; }
.pin-dots i { width:16px; height:16px; border:1px solid var(--ink); border-radius:50%; background:var(--paper); transition:background-color .1s; }
.pin-dots i.filled { background:var(--ink); }
.pin-dots.shake { animation:shake .3s; }
@keyframes shake { 25% { transform:translateX(-7px); } 75% { transform:translateX(7px); } }
.pin-error { min-height:20px; color:var(--danger); font-size:13px; font-weight:600; }
.pin-pad { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; width:min(320px,100%); }
.pin-pad button { min-height:60px; border:1px solid var(--ink); border-radius:var(--r-pill); background:var(--paper); color:var(--ink); font-size:22px; font-weight:700; transition:background-color .08s,color .08s; }
.pin-pad button:hover { background:var(--sky); }
.pin-pad button:active { background:var(--ink); color:#fff; }
.pin-pad button.ghost { border-color:transparent; background:transparent; font-size:12px; letter-spacing:.032em; text-transform:uppercase; }

/* Rewards (wallet) */
.wallet-group { display:flex; flex-direction:column; gap:12px; }
.group-title { display:flex; align-items:center; gap:10px; margin-top:12px; font-size:clamp(28px,7.5vw,40px); }
.group-title span { min-width:30px; padding:4px 9px; border:1px solid var(--ink); border-radius:var(--r-pill); background:var(--paper); font:700 13px/1 var(--font); letter-spacing:0; text-align:center; }
.wticket { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:0 14px; padding:8px; }
.wticket.ready { background:var(--lav); }
.wticket.used { background:var(--mist); }
.wt-art { flex:none; width:96px; height:96px; overflow:hidden; border:1px solid var(--ink); border-radius:var(--r-img); background:var(--mist); }
.wt-art img { width:100%; height:100%; object-fit:cover; }
.wt-main { min-width:0; padding:8px 8px 8px 0; }
.wt-main h3 { margin:10px 0 4px; font-size:clamp(18px,6vw,24px); }
.wt-main p { font-size:12px; color:var(--muted); overflow-wrap:anywhere; }
.wt-action { grid-column:1 / -1; padding-top:8px; }
.wt-action .btn { min-height:44px; }
.wticket.locked .wt-art img { filter:grayscale(1); opacity:.6; }
.wticket.used .wt-art img { filter:grayscale(.8); }
.badge-award { display:flex; align-items:center; gap:14px; padding:16px 20px; }
.badge-icon { flex:none; display:grid; place-items:center; width:48px; height:48px; border:1px solid var(--ink); border-radius:50%; background:var(--paper); }
.badge-icon svg { width:22px; height:22px; }
.badge-award.earned .badge-icon { background:var(--sun); rotate:-10deg; }
.badge-award h3 { font-size:16px; }
.badge-award p { margin-top:2px; font-size:12px; color:var(--muted); }
.other-grid { display:grid; gap:12px; }

/* Reward ticket */
.ticket { overflow:hidden; padding:8px; }
.ticket-hero { position:relative; aspect-ratio:4 / 3; overflow:hidden; border:1px solid var(--ink); border-radius:var(--r-img); background:var(--violet); color:#fff; }
.ticket-hero img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ticket-hero::after { content:""; position:absolute; inset:0; background:rgb(0 0 0 / .38); }
.th-copy { position:absolute; z-index:1; left:18px; right:18px; top:18px; }
.th-kicker { font-size:12px; font-weight:700; letter-spacing:.032em; text-transform:uppercase; }
.th-title { margin-top:10px; font-size:clamp(46px,13vw,84px); }
.redeemed-chip { position:absolute; z-index:1; left:50%; top:62%; translate:-50% -50%; rotate:-8deg; padding:8px 20px; border:1px solid var(--ink); border-radius:var(--r-pill); background:var(--ember); color:var(--ink); font-size:18px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.ticket-main { display:flex; flex-direction:column; align-items:center; gap:12px; padding:20px 16px 4px; text-align:center; }
.ticket-tag { padding:6px 14px; border:1px solid var(--ink); border-radius:var(--r-pill); background:var(--sun); font-size:12px; font-weight:700; letter-spacing:.032em; text-transform:uppercase; }
.ticket-destination { font-size:12px; font-weight:700; letter-spacing:.032em; text-transform:uppercase; color:var(--muted); }
.ticket-destination strong { display:block; margin-top:6px; font-size:30px; color:var(--ink); }
.ticket-body { display:grid; grid-template-columns:1fr 1fr; gap:1px; margin:16px 0 0; overflow:hidden; border:1px solid var(--ink); border-radius:var(--r-img); background:var(--ink); }
.ticket-body > div { min-width:0; padding:12px 14px; background:var(--paper); }
.ticket-label { display:block; margin-bottom:3px; font-size:10.5px; font-weight:700; letter-spacing:.032em; text-transform:uppercase; color:var(--muted); }
.ticket-value { display:block; font:900 clamp(20px,6.4vw,24px)/1 var(--display); font-variant-numeric:tabular-nums; }
.ticket-value.small { font:700 14px/1.3 var(--font); overflow-wrap:anywhere; }
.live-clock { color:var(--ink); }

/* Table card + main QR (staff pages) */
.card-layout { display:grid; gap:16px; align-items:start; }
.table-card { padding:28px 22px 0; overflow:hidden; text-align:center; }
.table-card .card-logo { width:auto; height:64px; max-width:220px; margin:0 auto 18px; object-fit:contain; }
.card-title { font-size:clamp(34px,9vw,52px); }
.card-title em { font-style:normal; color:var(--violet); }
.qr-box { display:block; width:min(100%,220px); margin:22px auto 0; padding:14px 14px 10px; border:1px solid var(--ink); border-radius:var(--r-img); background:#fff; color:#000; text-decoration:none; rotate:-2deg; }
.qr-box svg { width:100%; height:auto; }
.qr-box svg path { fill:currentColor; }
.qr-box span { display:block; margin-top:8px; font-size:10.5px; font-weight:700; letter-spacing:.032em; text-transform:uppercase; }
.qr-fallback { padding:20px 4px; font-size:11px; overflow-wrap:anywhere; }
.card-offer { margin:24px -22px 0; padding:20px 16px 24px; border-top:1px solid var(--ink); background:var(--lav); }
.card-offer p { font-size:12px; font-weight:700; letter-spacing:.032em; text-transform:uppercase; }
.card-offer h3 { margin-top:8px; font-size:clamp(32px,8vw,44px); }
.card-offer h3 span { display:block; margin-top:6px; font:700 13px/1.3 var(--font); letter-spacing:.032em; color:var(--muted); }
.qr-logos { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; max-width:340px; margin:22px auto 0; }
.qr-logos .logo-chip { width:auto; height:48px; }
.link-preview { padding:12px 14px; border:1px dashed var(--ink); border-radius:var(--r-icon); background:var(--sky); font-size:12px; overflow-wrap:anywhere; }

/* How it works */
.guide-list { display:flex; flex-direction:column; gap:12px; margin:0; padding:0; list-style:none; counter-reset:guide; }
.guide-list li { display:grid; grid-template-columns:42px 1fr; align-items:center; gap:12px; counter-increment:guide; }
.guide-list li::before { content:counter(guide,decimal-leading-zero); display:grid; place-items:center; width:42px; height:42px; border:1px solid var(--ink); border-radius:50%; background:var(--sky); font-size:13px; font-weight:700; }
.guide-list strong { font-size:15px; font-weight:600; }
.steps-grid { display:grid; gap:12px; }
.step-tile { padding:20px; }
.step-num { display:grid; place-items:center; width:48px; height:48px; margin-bottom:16px; border:1px solid var(--ink); border-radius:50%; background:var(--sun); font:900 18px/1 var(--display); rotate:-8deg; }
.step-tile:nth-child(2) .step-num { background:var(--mint); rotate:6deg; } .step-tile:nth-child(3) .step-num { background:var(--lav); rotate:-4deg; }
.step-tile:nth-child(4) .step-num { background:var(--ember); rotate:9deg; }
.step-tile h3 { font-size:24px; }
.step-tile p { margin-top:8px; font-size:14px; line-height:1.45; color:var(--muted); }
.info-grid { display:grid; gap:16px; }
.win-list { display:flex; flex-direction:column; gap:14px; }
.win-item { display:flex; align-items:center; gap:14px; }
.win-item .wt-art { width:58px; height:58px; border-radius:var(--r-icon); }
.win-icon { flex:none; display:grid; place-items:center; width:58px; height:58px; border:1px solid var(--ink); border-radius:var(--r-icon); background:var(--sun); }
.win-icon svg { width:24px; height:24px; }
.win-item b { display:block; font-size:15px; font-weight:700; }
.win-item small { display:block; font-size:12px; color:var(--muted); }
.rules-list { margin:0; padding-left:18px; color:var(--muted); font-size:14px; }
.rules-list li + li { margin-top:8px; }
.guide-pin { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; padding:16px 20px; border-radius:var(--r-img); background:var(--ink); color:#fff; }
.guide-pin span { font-size:12px; font-weight:700; letter-spacing:.032em; text-transform:uppercase; }
.guide-pin b { font:900 30px/1 var(--display); letter-spacing:.18em; }
.reset-panel:not([open]) { padding-block:10px; }
.reset-panel summary { min-height:44px; padding:12px 0; font-size:13px; font-weight:700; letter-spacing:.032em; text-transform:uppercase; cursor:pointer; }
.reset-panel p { font-size:14px; color:var(--muted); }
/* Grand finale: one big sticker, the ten-stamp reward as the headline, the shortcut as the CTA. */
.finale-card { align-items:center; text-align:center; background:var(--lav); }
.finale-card .eyebrow { margin:0; }
.finale-art { display:grid; place-items:center; width:84px; height:84px; border:1px solid var(--ink); border-radius:50%; background:var(--sun); font-size:42px; line-height:1; rotate:-8deg; }
.finale-title { font-size:clamp(34px,9.5vw,56px); }
.finale-card .lead { max-width:40ch; }
.finale-card .btn { max-width:440px; }
.finale-card .hint { max-width:44ch; }

/* Quiet-hour window on the Quiet-Hour quest */
.quiet-box { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; padding:14px 16px; border:1px solid var(--ink); border-radius:var(--r-img); background:var(--sky); }
.quiet-box p { font-size:14px; }
.quiet-box b { margin-right:8px; font-size:12px; letter-spacing:.032em; text-transform:uppercase; }

/* ================= Owner demo view ================= */
.owner-intro { display:flex; flex-direction:column; gap:12px; }
.owner-title { font-size:clamp(32px,9vw,64px); }
.owner-intro p { max-width:52ch; font-size:15px; color:var(--muted); }
.stat-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.stat-tile { display:flex; flex-direction:column; justify-content:space-between; gap:16px; min-width:0; min-height:126px; padding:16px; background:var(--stat,var(--paper)); }
.stat-tile:nth-child(4n+1) { --stat:var(--mint); } .stat-tile:nth-child(4n+2) { --stat:var(--lav); } .stat-tile:nth-child(4n+3) { --stat:var(--blue); }
.stat-tile b { font:900 clamp(40px,12vw,60px)/.82 var(--display); overflow-wrap:anywhere; }
.stat-tile:last-child b { font-size:clamp(30px,8.6vw,48px); }   /* "1 000 Ft" needs more room than a count */
.stat-tile span { max-width:100%; font-size:11.5px; font-weight:700; line-height:1.3; letter-spacing:.032em; text-transform:uppercase; -webkit-hyphens:auto; hyphens:auto; overflow-wrap:break-word; }
.owner-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:16px; align-items:start; }
.owner-block { display:flex; flex-direction:column; gap:12px; }
.owner-block .group-title { margin-top:0; }
.perf-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; }
.perf-row b { min-width:0; font-size:14px; font-weight:700; line-height:1.3; }
.perf-row .badge { flex:none; align-self:center; }
.settings-form { gap:14px; }
.form-note { font-size:14px; line-height:1.45; color:var(--muted); }
.sub-title { margin-top:6px; font:900 24px/var(--lh-d) var(--display); text-transform:uppercase; }
.field { display:flex; flex-direction:column; gap:6px; min-width:0; }
.field > span { font-size:11.5px; font-weight:700; line-height:1.3; letter-spacing:.032em; text-transform:uppercase; }
.field input,.field select { width:100%; height:52px; padding:0 16px; border:1px solid var(--ink); border-radius:var(--r-icon); background:var(--paper); color:var(--ink); font:500 16px var(--font); -webkit-appearance:none; appearance:none; }
.field select { padding-right:44px; background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 20px; }
.field-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; align-items:end; }
.symbol-chip { display:inline-grid; place-items:center; width:26px; height:26px; margin:0 2px; border:1px solid var(--ink); border-radius:8px; background:var(--mint); font-size:16px; line-height:1; vertical-align:-5px; }
.pin-box + .hint { margin-top:-4px; }
.field input::placeholder { color:var(--muted); opacity:1; }

/* Staff details on the PIN screen (who confirms, optional receipt) */
.pin-fields { align-self:stretch; display:flex; flex-direction:column; gap:12px; text-align:left; }
.pin-more { border:1px dashed var(--ink); border-radius:var(--r-icon); padding:0 14px; }
.pin-more[open] { padding-bottom:14px; }
.pin-more summary { min-height:44px; padding:12px 0; font-size:12px; font-weight:700; letter-spacing:.032em; text-transform:uppercase; cursor:pointer; }

/* Reward prices + the owner upload file */
.reward-set { display:flex; flex-direction:column; gap:12px; min-width:0; margin:0; padding:14px; border:1px solid var(--ink); border-radius:var(--r-icon); }
.reward-set legend { padding:0 6px; font-size:12px; font-weight:700; letter-spacing:.032em; text-transform:uppercase; }
.export-form { gap:14px; }
.export-check { padding:12px 14px; border:1px solid var(--ink); border-radius:var(--r-icon); background:var(--paper); font-size:13px; line-height:1.45; }
.export-check.ok { background:var(--sky); }
.export-check.warn { background:#f8d7da; }   /* the template's own "something to fix" red */
.export-check ul { margin:6px 0 0; padding-left:18px; }
.fix-staff { display:flex; flex-direction:column; gap:10px; margin-top:12px; padding-top:12px; border-top:1px dashed var(--ink); }

/* ================= Owner dashboard ================= */
/* Theme chrome (black-outlined white cards, display titles, sticker tiles); the marks themselves follow the dataviz
   specs: thin bars, 4px rounded data-ends, 2px surface gaps, hairline grid, values lead in the tooltip. */
.dash { display:flex; flex-direction:column; gap:16px; padding-bottom:var(--section); }
.dash > .page-head { padding-bottom:4px; }
.dash-sources { gap:12px; }
.server-source { display:flex; flex-direction:column; gap:12px; padding-bottom:16px; border-bottom:1px dashed var(--ink); }
.server-source .check-row { cursor:default; background:var(--sky); }
.check-row { display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid var(--ink); border-radius:var(--r-icon); background:var(--paper); cursor:pointer; }
.check-row input { flex:none; width:22px; height:22px; margin:0; accent-color:var(--ink); }
.source-list { display:flex; flex-direction:column; gap:8px; margin:0; padding:0; list-style:none; }
.source-list li { display:flex; align-items:center; gap:10px; padding:10px 10px 10px 12px; border:1px solid var(--ink); border-radius:var(--r-icon); background:var(--paper); }
.source-list .row-copy b { overflow-wrap:anywhere; }
.source-list .logo-chip { width:44px; height:32px; }
.file-btn { position:relative; cursor:pointer; }
.file-btn input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.file-btn:focus-within { outline:3px solid var(--focus); outline-offset:3px; }
.dash-filters { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; }
.kpis .kpi.stat-tile { min-height:118px; gap:10px; }
.kpis .kpi.stat-tile b { font-size:clamp(30px,8.5vw,46px); white-space:nowrap; font-feature-settings:"ss01"; }   /* proportional figures for big values */
.kpi small { font-size:12px; font-weight:600; line-height:1.35; }

.dash-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:16px; }
.chart-card { gap:14px; min-width:0; }
.chart-head .form-note { margin-top:6px; }
.chart { width:100%; }
.chart svg { display:block; overflow:visible; }
.chart .grid { stroke:#e6e6e6; stroke-width:1; shape-rendering:crispEdges; }
.chart .axis { stroke:var(--concrete); stroke-width:1; shape-rendering:crispEdges; }
.chart text { font:500 11px var(--font); fill:var(--muted); }
.chart .peak { font-weight:700; fill:var(--ink); }
.chart .hit { fill:transparent; cursor:pointer; outline:none; }
.chart .hit:focus-visible { stroke:var(--focus); stroke-width:2; }
.chart .bar { transition:opacity .15s; }
.chart .col.is-hot .bar { opacity:.7; }
.legend { display:flex; flex-wrap:wrap; gap:6px 16px; font-size:12px; font-weight:600; }
.legend span { display:inline-flex; align-items:center; gap:6px; }
.legend i { width:12px; height:12px; border-radius:3px; }
.chart-empty { padding:16px; border:1px dashed var(--ink); border-radius:var(--r-icon); font-size:14px; color:var(--muted); }
.chart-empty.ok { border-style:solid; background:var(--sky); color:var(--ink); font-weight:600; }

.hbars { display:flex; flex-direction:column; gap:12px; }
.hb { display:flex; flex-direction:column; gap:5px; border-radius:8px; cursor:pointer; outline-offset:4px; }
.hb-label { display:flex; align-items:center; gap:8px; min-width:0; font-size:13px; }
.hb-name { flex:1; min-width:0; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hb-label b { flex:none; font-variant-numeric:tabular-nums; }
.hb-label .logo-chip { width:34px; height:24px; padding:2px 4px; border-radius:8px; }
.hb-bar,.hb-stack { height:12px; border-radius:0 4px 4px 0; transition:opacity .15s; }
.hb-stack { display:flex; gap:2px; overflow:hidden; }
.hb-stack i { min-width:2px; height:100%; }
.hb.is-hot .hb-bar,.hb.is-hot .hb-stack { opacity:.7; }

.heatmap { display:grid; grid-template-columns:auto repeat(7,minmax(0,1fr)); gap:3px; align-items:center; }
.hm-day { min-width:0; font-size:11px; font-weight:700; letter-spacing:-.01em; text-align:center; }
.hm-band { padding-right:6px; font-size:11px; font-weight:600; white-space:nowrap; }
@media (max-width:379px) { .hm-band { max-width:46px; white-space:normal; line-height:1.15; } }   /* "before 10" wraps so the 7 day columns keep their room */
.hm-cell { height:28px; border-radius:6px; cursor:pointer; }
.hm-cell.is-hot,.hm-cell:focus-visible { outline:2px solid var(--ink); outline-offset:1px; }
.heat-legend { display:flex; align-items:center; gap:4px; font-size:11px; font-weight:600; }
.heat-legend i { width:18px; height:10px; border-radius:3px; }
.heat-legend span:first-child { margin-right:4px; } .heat-legend span:last-child { margin-left:4px; }

.chart-table summary { min-height:36px; padding:8px 0; font-size:12px; font-weight:700; letter-spacing:.032em; text-transform:uppercase; cursor:pointer; }
.table-scroll { overflow-x:auto; margin-top:6px; border:1px solid var(--ink); border-radius:var(--r-icon); -webkit-overflow-scrolling:touch; }
.chart-table table { width:100%; border-collapse:collapse; font-size:13px; font-variant-numeric:tabular-nums; }
.chart-table th,.chart-table td { padding:8px 10px; border-bottom:1px solid var(--mist); text-align:right; white-space:nowrap; }
.chart-table th:first-child { text-align:left; }
.chart-table thead th { background:var(--sky); font-size:11px; font-weight:700; letter-spacing:.032em; text-transform:uppercase; }
.chart-table tbody tr:last-child > * { border-bottom:0; }

.issue-list { display:flex; flex-direction:column; gap:8px; margin:0; padding:0; list-style:none; }
.issue-list li { display:flex; flex-direction:column; gap:2px; min-width:0; padding:10px 12px; border:1px solid var(--ink); border-radius:var(--r-icon); background:#f8d7da; }
.issue-list b { font-size:14px; overflow-wrap:anywhere; }
.issue-list small { font-size:12px; color:var(--muted); overflow-wrap:anywhere; }
.issue-list span { font-size:13px; font-weight:600; }

.chart-tip { position:fixed; z-index:95; display:flex; flex-direction:column; gap:4px; max-width:min(260px,calc(100vw - 16px)); padding:10px 12px; border:1px solid var(--ink); border-radius:14px; background:var(--paper); color:var(--ink); font-size:12px; line-height:1.3; pointer-events:none; }
.tip-cap { font-size:11px; font-weight:700; letter-spacing:.032em; text-transform:uppercase; color:var(--muted); }
.tip-row { display:flex; align-items:center; gap:6px; }
.tip-row i { flex:none; width:12px; height:3px; border-radius:2px; }   /* line keys, not boxes */
.tip-row b { font-size:14px; font-variant-numeric:tabular-nums; }
@media (min-width:860px) {
  .dash-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .chart-card.wide { grid-column:1 / -1; }
}
@media (max-width:479px) { .export-form .field-row { grid-template-columns:minmax(0,1fr); } }   /* names, "Exempt (AAM)" and dates need the full width on phones */

/* ================= Compass ================= */
.cmp-wrap { display:flex; flex-direction:column; gap:18px; width:min(560px,100% - var(--gutter) * 2); padding-bottom:var(--section); }
.cmp-wrap > .page-head { padding-bottom:0; }
.cmp-note { max-width:44ch; font-size:15px; line-height:1.45; }
.cmp-dial { position:relative; width:min(74vw,300px); aspect-ratio:1; margin:4px auto 0; border:1px solid var(--ink); border-radius:50%; background:var(--paper); }
.cmp-rose { position:absolute; inset:5%; border-radius:50%; will-change:transform; }
.cmp-rose::before { content:""; position:absolute; inset:0; border-radius:50%;
  background:repeating-conic-gradient(from -1deg,var(--ink) 0 2deg,transparent 2deg 15deg);
  -webkit-mask:radial-gradient(closest-side,transparent 88%,#000 89%); mask:radial-gradient(closest-side,transparent 88%,#000 89%); }
.cmp-card { position:absolute; display:grid; place-items:center; width:16%; aspect-ratio:1; font:900 clamp(15px,4.4vw,19px)/1 var(--display); color:var(--muted); }
.cmp-card.c0 { top:8%; left:50%; translate:-50% 0; color:var(--ember); }
.cmp-card.c1 { right:8%; top:50%; translate:0 -50%; }
.cmp-card.c2 { bottom:8%; left:50%; translate:-50% 0; }
.cmp-card.c3 { left:8%; top:50%; translate:0 -50%; }
.cmp-needle { position:absolute; inset:0; will-change:transform; }
.cmp-needle > span { position:absolute; left:50%; top:9%; width:22%; height:42%; translate:-50% 0; clip-path:polygon(50% 0,100% 100%,50% 82%,0 100%); background:var(--ink); }
.cmp-needle.idle > span { opacity:.3; }
.cmp-hub { position:absolute; left:50%; top:50%; width:34%; aspect-ratio:1; translate:-50% -50%; display:grid; place-items:center; padding:8%; border:1px solid var(--ink); border-radius:50%; background:var(--sun); }
.cmp-hub img { width:100%; height:100%; object-fit:contain; }
.cmp-hub > span { font:900 34px/1 var(--display); color:var(--ink); }
.cmp-cta { display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; }
.cmp-target { display:flex; flex-direction:column; gap:14px; padding:20px; }
.cmp-target-head { display:flex; align-items:center; gap:14px; }
.cmp-target-head > div { min-width:0; }
.cmp-target-head .logo-chip { width:64px; height:48px; border-radius:var(--r-icon); }
.cmp-target .eyebrow { margin-bottom:4px; }
.cmp-target h2 { font:900 26px/var(--lh-d) var(--display); text-transform:uppercase; }
.cmp-dist { margin-top:6px; font-size:16px; font-weight:700; }
.cmp-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.cmp-actions .btn { min-height:46px; padding:8px 12px; }
.cmp-list { display:flex; flex-direction:column; gap:12px; }
.cmp-mini { flex:none; display:grid; place-items:center; width:38px; height:38px; border:1px solid var(--ink); border-radius:50%; background:var(--paper); color:var(--ink); }
.cmp-mini svg { width:18px; height:18px; will-change:transform; }
.cmp-row.is-target .cmp-mini { background:var(--ink); color:#fff; }

/* ================= Menu sheet ================= */
.menu { position:fixed; z-index:70; inset:0; }
.menu-backdrop { position:absolute; inset:0; border:0; background:rgb(0 0 0 / .35); }
.menu-sheet { position:absolute; top:10px; right:10px; width:min(380px,calc(100% - 20px)); max-height:calc(100svh - 20px); overflow:auto; padding:16px; border:1px solid var(--ink); border-radius:var(--r-card); background:var(--sky); animation:sheet-in .2s ease-out; }
@keyframes sheet-in { from { opacity:0; transform:translateY(-8px) scale(.98); } }
.menu-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 4px 14px; }
.menu-head p { font-size:30px; }
.menu-all { margin-top:12px; }

/* ================= Footer ================= */
.site-foot { padding:48px 0 calc(116px + env(safe-area-inset-bottom,0px)); background:var(--ink); color:#fff; }
.foot-grid { display:grid; grid-template-columns:1fr 1fr; gap:32px 24px; }
.foot-brand { grid-column:1 / -1; }
.foot-brand .wordmark { display:block; font-size:clamp(72px,24vw,180px); color:#fff; }
.foot-brand p { max-width:36ch; margin-top:14px; font-size:13px; color:rgb(255 255 255 / .72); }
.site-foot h2 { margin-bottom:12px; font-size:12px; font-weight:700; letter-spacing:.032em; text-transform:uppercase; color:var(--sun); }
.site-foot ul { display:flex; flex-direction:column; gap:8px; margin:0; padding:0; list-style:none; }
.site-foot li a { font-size:14px; font-weight:600; text-decoration:none; }
.site-foot li a:hover { text-decoration:underline; text-underline-offset:3px; }

/* ================= Toast + celebration ================= */
.toast { position:fixed; z-index:80; left:0; right:0; bottom:calc(92px + env(safe-area-inset-bottom,0px)); width:max-content; max-width:calc(100% - 32px); margin-inline:auto; padding:12px 20px; border:1px solid var(--paper); border-radius:var(--r-pill); background:var(--ink); color:#fff; font-size:13px; font-weight:700; letter-spacing:.02em; }
.celebration-layer { position:fixed; inset:0; z-index:85; overflow:hidden; pointer-events:none; }
.celebration-banner { position:absolute; top:calc(20px + env(safe-area-inset-top,0px)); left:0; right:0; width:min(360px,calc(100% - 32px)); margin-inline:auto; padding:18px 20px 20px; border:1px solid var(--ink); border-radius:var(--r-card); background:var(--paper); color:var(--ink); text-align:center; animation:banner 4.3s ease both; }
.celebration-banner > span { display:grid; place-items:center; width:52px; height:52px; margin:0 auto 10px; border:1px solid var(--ink); border-radius:50%; background:var(--sun); font:900 26px/1 var(--display); rotate:-12deg; }
.celebration-banner strong { display:block; font:900 28px/var(--lh-d) var(--display); text-transform:uppercase; }
.celebration-banner small { display:block; margin-top:8px; font-size:13px; line-height:1.45; color:var(--muted); }
.particle { position:absolute; bottom:-52px; font-size:var(--size); line-height:1; opacity:0; will-change:transform,opacity; animation:firework var(--dur) cubic-bezier(.2,.65,.4,1) var(--delay) both; }
.particle.left { left:-20px; } .particle.right { right:-20px; }
@keyframes firework {
  0% { transform:translate(0,25px) rotate(0) scale(.6); opacity:0; } 8% { opacity:1; }
  65% { transform:translate(calc(var(--fx) * .72),var(--fy)) rotate(calc(var(--spin) * .72)) scale(1.15); opacity:1; }
  100% { transform:translate(var(--fx),calc(var(--fy) * .7)) rotate(var(--spin)) scale(.8); opacity:0; }
}
@keyframes banner { 0% { opacity:0; translate:0 -15px; scale:.94; } 10%,82% { opacity:1; translate:0 0; scale:1; } 100% { opacity:0; translate:0 -10px; } }

/* ================= Motion ================= */
/* A printed collage: the marquee loops and pages settle in once. Tilt, drift, presses and pops live in motion.css. */
@media (prefers-reduced-motion:no-preference) {
  .marquee-track { animation:marquee 45s linear infinite; }
  @keyframes marquee { to { transform:translateX(-50%); } }
  .enter .rise { animation:rise .5s cubic-bezier(.2,.8,.3,1) both; animation-delay:var(--d,0s); }
  @keyframes rise { from { opacity:0; transform:translateY(14px); } }
  .enter .float-card { animation:rise .55s cubic-bezier(.2,.8,.3,1) both; }
  .enter .float-card.f2 { animation-delay:.04s; } .enter .float-card.f3 { animation-delay:.08s; } .enter .float-card.f4 { animation-delay:.12s; }
  .enter .float-card.f5 { animation-delay:.16s; } .enter .float-card.f6 { animation-delay:.2s; }
  .enter .quest-card { animation:rise .5s cubic-bezier(.2,.8,.3,1) both; animation-delay:calc(.06s + var(--i,0) * .05s); }
  .reveal { opacity:0; transform:translateY(14px); transition:opacity .5s ease,transform .5s cubic-bezier(.2,.8,.3,1); }
  .reveal.in { opacity:1; transform:none; }
  .cmp-needle.idle { animation:cmp-search 3.2s ease-in-out infinite; }
  @keyframes cmp-search { 0%,100% { rotate:-28deg; } 50% { rotate:28deg; } }
}

/* ================= Responsive ================= */
@media (min-width:600px) {
  :root { --gutter:24px; }
  .cat-row { flex-wrap:wrap; justify-content:center; width:auto; padding:4px 0 8px; overflow:visible; }
  .steps-grid { grid-template-columns:repeat(2,1fr); }
  .other-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .extras-grid { grid-template-columns:1fr 1fr; align-items:start; }
  .wticket { grid-template-columns:auto minmax(0,1fr) 190px; }
  .wt-action { grid-column:auto; padding:0 8px 0 0; }
  .place-hero { padding:22px 22px 24px; gap:0 20px; }
  .qr-band { padding:36px 32px; }
}
@media (min-width:860px) {
  .card-layout { grid-template-columns:minmax(0,1fr) minmax(0,.85fr); }
  .info-grid { grid-template-columns:1fr 1fr; align-items:start; }
  .other-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .stat-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
  .stat-tile b { font-size:clamp(44px,5vw,60px); }
  .stat-tile:last-child b { font-size:clamp(30px,3.4vw,44px); }
  .owner-grid { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
}
@media (min-width:960px) {
  :root { --gutter:32px; --rail-w:68px; --top-h:72px; --section:80px; }
  .rail { display:flex; }
  .bottom-nav { display:none; }
  .site-foot { padding-bottom:48px; }
  .toast { bottom:32px; left:var(--rail-w); }
  .celebration-banner { left:var(--rail-w); }

  /* Landing */
  .constellation { grid-template-columns:repeat(6,minmax(0,1fr)); gap:20px; max-width:1100px; padding-top:20px; }
  .float-card { justify-self:center; padding:8px 8px 14px; border-radius:var(--r-card); }
  .fc-img { border-radius:var(--r-img); }
  .fc-name { margin:10px 6px 0; font-size:14px; }
  .fc-meta { margin:6px 6px 0; }
  .dots i { width:6px; height:6px; }
  .float-card.f1 { width:92%; margin-top:56px; } .float-card.f2 { width:100%; margin-top:10px; } .float-card.f3 { width:88%; margin-top:72px; }
  .float-card.f4 { width:100%; margin-top:0; } .float-card.f5 { width:90%; margin-top:60px; } .float-card.f6 { width:96%; margin-top:18px; }
  .hero-copy { padding-top:24px; }
  .hero-lead { font-size:18px; }
  .rail-arrows { display:flex; }
  .place-rail { grid-auto-columns:calc((100% - 44px) / 4); margin-inline:-4px; padding:6px 4px 10px; scroll-padding-inline:4px; }
  .qr-band { grid-template-columns:minmax(0,1fr) minmax(0,420px); align-items:center; padding:48px 56px; }

  /* Place page */
  .place-top { grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); padding-top:12px; }
  .place-hero { padding:28px; }
  .quest-grid.n4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .quest-grid.n2 { grid-template-columns:repeat(2,minmax(0,300px)); }
  .adventure-list { grid-template-columns:1fr 1fr; }
  .adventure-list > * { border-top:0; }
  .adventure-list > :nth-child(n+3) { border-top:1px solid var(--ink); }
  .adventure-list > :nth-child(odd) { border-right:1px solid var(--ink); }
  .steps-grid { grid-template-columns:repeat(4,1fr); }
  .page-head .ribbon { right:-12%; }
  .foot-grid { grid-template-columns:1.4fr 1fr 1fr 1fr; }
  .foot-brand { grid-column:auto; }
  .foot-brand .wordmark { font-size:clamp(72px,9vw,150px); }
}
html[lang="hu"] .bottom-nav button { font-size:9.5px; }
@media (max-width:379px) {
  :root { --gutter:14px; }
  .stamp-cell span { width:42px; height:42px; }
  .stamp-grid { gap:12px 3px; }
  .passport-panel { padding-inline:14px; }
  .passport-score b { font-size:44px; }
  .quest-row { gap:10px; padding-inline:12px; }
  .quest-row > svg { display:none; }
  .bottom-nav { width:calc(100% - 16px); padding:4px; gap:1px; }
  .bottom-nav button { padding-inline:1px; font-size:9px; letter-spacing:-.01em; }
  .stamp-cell small { font-size:9px; }
  .stat-tile span { font-size:10.5px; letter-spacing:.01em; }
  .wt-art { width:76px; height:76px; }
  .dots { gap:1px; }
  .dots i { width:4px; height:4px; }
  .fc-meta { gap:4px; }
  .lang-toggle button { min-width:36px; padding:0 8px; }
  .cmp-actions { grid-template-columns:1fr; }
  .ph-actions .btn { padding-inline:12px; }
  html[lang="hu"] .bottom-nav button { font-size:9px; }
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { transition:none !important; animation:none !important; }
  .particle { display:none; }
}
@media print {
  @page { size:A5 portrait; margin:10mm; }
  .rail,.topbar,.marquee,.bottom-nav,.toast,.celebration-layer,.page-head,.site-foot,.menu,.no-print { display:none !important; }
  body { padding-left:0; background:#fff; }
  .card-layout { display:block; }
  .qr-box { rotate:0deg; }
  .print-target { break-inside:avoid; print-color-adjust:exact; -webkit-print-color-adjust:exact; }
}