/* ═══════════ WingZ Game v2 — stílus. Két téma, mobil-első, max 540px. ═══════════
   Világos = P2 „Krém · piros", sötét = P1 „Fekete · arany" (PRD-game-paletta döntés, 2026-09-11).
   A :root a világos készlet; a :root[data-theme="dark"] csak a tokeneket írja felül. Komponens
   sose kap nyers színt — minden var(--…)-on át megy, különben az egyik témában eltörik.
   Sötét felületek (hero, alsó nav, dungeon, belépő) mindkét témában sötétek: --dark + --on-dark. */
:root {
  --bg:#f6f3e0; --paper:#fffdf6; --surface-2:#ede9d2; --cream:var(--bg); --cream-dk:#e6e1c8;
  --ink:#141414; --ink-2:#4a4a46; --ink-3:#8a8a82; --white:#fff; --black:#141414;
  --line:rgba(20,20,20,.09); --line-2:rgba(20,20,20,.17);
  --red:#ea1c2d; --red-dk:#c81525; --red-dim:rgba(234,28,45,.09); --red-border:rgba(234,28,45,.28);
  --blue:#ea1c2d; --blue-dim:rgba(234,28,45,.09); --xp:#ea1c2d;
  --yellow:#fdb713; --yellow-glow:rgba(253,183,19,.5);
  --gold:#e5a600; --gold-dim:rgba(229,166,0,.16); --gold-fg:#8a6800;
  --green:#15803d; --green-dim:rgba(21,128,61,.10);
  --amber:#b45309; --amber-dim:rgba(180,83,9,.11);
  --bad:#b91c1c; --bad-dim:rgba(185,28,28,.10);
  --purple:#6d28d9; --purple-dim:rgba(109,40,217,.10);
  --konyha:#9a3412; --konyha-dim:rgba(194,65,12,.10);
  --shadow:0 1px 2px rgba(20,20,20,.06), 0 4px 14px rgba(20,20,20,.06);
  --glow:0 0 0 4px rgba(234,28,45,.14);
  --dark:#141414; --dark-2:#2b2b2b; --on-dark:#fff; --on-dark-2:rgba(255,255,255,.75); --on-dark-3:rgba(255,255,255,.55);
  --on-dark-line:rgba(255,255,255,.14); --on-dark-fill:rgba(255,255,255,.08);
  --strong-bg:#141414; --strong-fg:#fff; --avatar-bg:#141414; --avatar-fg:#fff;
  --topbar:rgba(246,243,224,.94);
  --hero-bg:#141414; --hero-img:radial-gradient(circle, rgba(255,255,255,.05) 1px, transparent 1px); --hero-size:22px 22px; --hero-ring:rgba(234,28,45,.45);
  --body-img:radial-gradient(circle, rgba(26,26,26,.055) 1px, transparent 1px); --body-size:24px 24px;
  --banner-bg:#7c2d12; --banner-fg:#ffedd5;
  --overlay:rgba(20,20,20,.45); --overlay-strong:rgba(20,20,20,.72);
  --theme-color:#f6f3e0;
  --r:16px; --r-sm:11px; --r-xs:8px;
  --display:'Anton', 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --cond:'Barlow Condensed', 'Arial Narrow', sans-serif;
  --body:'Barlow', system-ui, sans-serif;
  --nav-h:64px;
}
:root[data-theme="dark"] {
  --bg:#111214; --paper:#1b1c20; --surface-2:#24262c; --cream-dk:#2a2c33;
  --ink:#f6f3e0; --ink-2:#cfcabb; --ink-3:#8f8b80; --black:#000;
  --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.18);
  --red-dim:rgba(234,28,45,.16); --red-border:rgba(234,28,45,.4);
  --blue:#fdb713; --blue-dim:rgba(253,183,19,.14); --xp:#fdb713; --yellow-glow:rgba(253,183,19,.6);
  --gold:#fdb713; --gold-dim:rgba(253,183,19,.16); --gold-fg:#fdb713;
  --green:#4ade80; --green-dim:rgba(74,222,128,.14);
  --amber:#fbbf24; --amber-dim:rgba(251,191,36,.14);
  --bad:#ff5a5a; --bad-dim:rgba(255,90,90,.14);
  --purple:#c084fc; --purple-dim:rgba(192,132,252,.14);
  --konyha:#fb923c; --konyha-dim:rgba(251,146,60,.14);
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 20px rgba(0,0,0,.35);
  --glow:0 0 0 4px rgba(253,183,19,.2);
  --dark:#000; --dark-2:#1b1c20;
  --strong-bg:#f6f3e0; --strong-fg:#111; --avatar-bg:#fdb713; --avatar-fg:#111;
  --topbar:rgba(17,18,20,.94);
  --hero-bg:#000; --hero-img:repeating-linear-gradient(115deg, rgba(253,183,19,.06) 0 16px, transparent 16px 44px); --hero-size:auto; --hero-ring:rgba(253,183,19,.45);
  --body-img:none; --body-size:auto;
  --banner-bg:#3b1608;
  --overlay:rgba(0,0,0,.6); --overlay-strong:rgba(0,0,0,.8);
  --theme-color:#111214;
  color-scheme:dark;
}
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
html { -webkit-text-size-adjust:100%; }
body { font-family:var(--body); font-size:15px; line-height:1.45; color:var(--ink); background:var(--bg);
  background-image:var(--body-img); background-size:var(--body-size); min-height:100vh; }
button { font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
input, textarea, select { font:inherit; color:inherit; }
img { display:block; max-width:100%; }
[hidden] { display:none !important; }
a { color:inherit; text-decoration:none; }
.muted { color:var(--ink-3); }
.small { font-size:13px; }
.mono { font-variant-numeric:tabular-nums; }
:focus-visible { outline:3px solid rgba(234,28,45,.45); outline-offset:2px; }
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { animation:none !important; transition:none !important; } }

/* ═══ Belépés ═══ */
#login { min-height:100vh; display:flex; flex-direction:column; background:var(--dark); color:var(--on-dark); background-image:var(--hero-img); background-size:var(--hero-size); }
.login-hero { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:56px 32px 40px; position:relative; overflow:hidden; }
.login-hero::before { content:''; position:absolute; width:340px; height:340px; border-radius:50%; border:1px solid var(--hero-ring); top:-90px; right:-90px; }
.login-logo { width:160px; height:160px; object-fit:contain; filter:drop-shadow(0 10px 28px rgba(253,183,19,.28)); }
.login-tagline { margin-top:12px; font-family:var(--display); font-size:13px; font-weight:700; letter-spacing:5px; text-transform:uppercase; color:var(--on-dark-3); }
.login-card { background:var(--bg); color:var(--ink); border-radius:26px 26px 0 0; padding:30px 24px calc(36px + env(safe-area-inset-bottom, 0px)); }
.login-title { font-family:var(--display); font-weight:900; font-size:28px; text-transform:uppercase; letter-spacing:.5px; }
.login-sub { font-size:14px; color:var(--ink-3); margin:2px 0 20px; }
.login-input { width:100%; padding:14px 16px; margin-bottom:12px; border-radius:var(--r-sm); border:1.5px solid var(--line-2); background:var(--paper); font-size:17px; }
.login-input:focus { border-color:var(--red); outline:none; box-shadow:0 0 0 3px var(--red-dim); }
.login-foot { margin-top:16px; text-align:center; font-size:12px; color:var(--ink-3); }

/* ═══ Váz ═══ */
#app { max-width:540px; margin:0 auto; min-height:100vh; padding-bottom:calc(var(--nav-h) + 20px + env(safe-area-inset-bottom, 0px)); }
.test-banner { background:var(--banner-bg); color:var(--banner-fg); font-size:12.5px; line-height:1.35; padding:8px 14px; text-align:center; }
.test-banner b { color:var(--white); }
.topbar { position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 14px; background:var(--topbar); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
/* Fejléc-logó: a kör-badge (stroke-os W), csak ikon, kicsi — paletta-döntés L=B */
.brand { display:flex; align-items:center; padding:2px 0; }
.brand-logo { width:30px; height:30px; object-fit:contain; }
.topbar-right { display:flex; align-items:center; gap:8px; }
.avatar-chip { display:flex; align-items:center; gap:8px; padding:4px 10px 4px 4px; border-radius:999px; background:var(--paper); border:1px solid var(--line); box-shadow:var(--shadow); }
.avatar-name { font-weight:600; font-size:14px; }
/* Avatar + szintkeret (F12): L1 sima, L2 bronz, L3 ezüst, L4 arany, L5 lángoló, L6 főnix */
.avatar { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%; background:var(--avatar-bg); color:var(--avatar-fg); font-family:var(--cond); font-weight:800; font-size:13px; flex:none; box-shadow:0 0 0 2px var(--paper), 0 0 0 4px transparent; }
.avatar.lv-2 { box-shadow:0 0 0 2px var(--paper), 0 0 0 4px #b87333; }
.avatar.lv-3 { box-shadow:0 0 0 2px var(--paper), 0 0 0 4px #a8b0bf; }
.avatar.lv-4 { box-shadow:0 0 0 2px var(--paper), 0 0 0 4px var(--gold); }
.avatar.lv-5 { box-shadow:0 0 0 2px var(--paper), 0 0 0 4px var(--red), 0 0 12px rgba(234,28,45,.45); }
.avatar.lv-6 { box-shadow:0 0 0 2px var(--paper), 0 0 0 4px var(--gold), 0 0 16px rgba(253,183,19,.6); animation:lv6-pulse 2.4s ease-in-out infinite; }
@keyframes lv6-pulse { 0%,100% { box-shadow:0 0 0 2px var(--paper), 0 0 0 4px var(--gold), 0 0 10px rgba(253,183,19,.4) } 50% { box-shadow:0 0 0 2px var(--paper), 0 0 0 4px var(--red), 0 0 22px rgba(234,28,45,.6) } }
.avatar.sm { width:24px; height:24px; font-size:11px; }
.pending-pill { padding:6px 10px; border-radius:999px; background:var(--paper); border:1px solid var(--line); font-weight:700; font-size:13px; }
.pending-pill.has { background:var(--red); color:var(--white); border-color:var(--red); }
.view { padding:14px 14px 8px; display:flex; flex-direction:column; gap:12px; }
.loading { text-align:center; padding:60px 0; color:var(--ink-3); }
.bottom-nav { position:fixed; bottom:0; left:0; right:0; z-index:20; margin:0 auto; max-width:540px; height:calc(var(--nav-h) + env(safe-area-inset-bottom, 0px)); padding-bottom:env(safe-area-inset-bottom, 0px);
  display:grid; grid-auto-flow:column; grid-auto-columns:1fr; background:var(--dark); color:var(--on-dark-3); }
.bottom-nav button { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; font-family:var(--cond); font-weight:700; font-size:11px; letter-spacing:.4px; text-transform:uppercase; white-space:nowrap; min-width:0; }
.bottom-nav button.active { color:var(--on-dark); position:relative; }
.bottom-nav button.active::after { content:''; position:absolute; top:0; left:20%; right:20%; height:3px; background:var(--xp); border-radius:0 0 3px 3px; }
.nav-ico { font-size:17px; line-height:1; }
@media (min-width:420px) { .bottom-nav button { font-size:12px; letter-spacing:1px; } }

/* ═══ Építőelemek ═══ */
.card { background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:14px; box-shadow:var(--shadow); }
.card.navy { background:var(--dark); color:var(--on-dark); border-color:transparent; }
.card.flat { box-shadow:none; background:var(--paper); }
.card.err { border-color:var(--red-border); color:var(--red); }
.card-head { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:10px; }
.eyebrow { font-family:var(--cond); font-weight:700; font-size:12px; letter-spacing:2.5px; text-transform:uppercase; color:var(--ink-3); }
.eyebrow.red { color:var(--red); }
h2.title { font-family:var(--display); font-weight:400; font-size:24px; line-height:1.05; letter-spacing:.3px; text-wrap:balance; }
h3.sub { font-family:var(--cond); font-weight:700; font-size:17px; letter-spacing:.3px; }
.section-head { display:flex; align-items:baseline; justify-content:space-between; gap:8px; padding:6px 2px 0; }
.section-head .eyebrow { color:var(--ink-2); }
.empty { text-align:center; color:var(--ink-3); padding:18px 10px; font-size:14px; }
.stack { display:flex; flex-direction:column; gap:8px; }
.row { display:flex; align-items:center; gap:8px; }
.row.wrap { flex-wrap:wrap; }
.grow { flex:1; min-width:0; }
.chip { display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:999px; font-size:12px; font-weight:600; background:var(--cream-dk); color:var(--ink-2); white-space:nowrap; }
.chip.konyha { background:var(--konyha-dim); color:var(--konyha); } .chip.pultos { background:var(--blue-dim); color:var(--blue); }
.chip.ok { background:var(--green-dim); color:var(--green); } .chip.warn { background:var(--amber-dim); color:var(--amber); }
.chip.bad { background:var(--red-dim); color:var(--red); } .chip.info { background:var(--blue-dim); color:var(--blue); }
.chip.gold { background:var(--gold-dim); color:var(--gold-fg); } .chip.purple { background:var(--purple-dim); color:var(--purple); }
.chip.outline { background:transparent; border:1px solid var(--line-2); }
.chip.big { font-size:13px; padding:4px 10px; }
.note { padding:10px 12px; border-radius:var(--r-sm); font-size:13.5px; line-height:1.4; border:1px solid var(--line); background:var(--paper); }
.note.info { background:var(--blue-dim); border-color:var(--line-2); color:var(--ink); }
.note.warn { background:var(--amber-dim); border-color:var(--line-2); color:var(--amber); }
.note.ok { background:var(--green-dim); border-color:var(--line-2); color:var(--green); }
.note.bad { background:var(--red-dim); border-color:var(--red-border); color:var(--bad); }
.note.lock { background:var(--cream-dk); }
.bar { height:8px; border-radius:999px; background:var(--line); overflow:hidden; }
.bar-fill { height:100%; background:var(--red); border-radius:999px; transition:width .3s; }
.bar.ok .bar-fill { background:var(--green); }

/* ═══ Gombok ═══ */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:12px 16px; border-radius:var(--r-sm); font-weight:700; font-size:15px; letter-spacing:.2px; transition:transform .1s, opacity .15s, background .15s; min-height:44px; }
.btn:active { transform:scale(.98); }
.btn:disabled { opacity:.6; cursor:default; }
.btn-primary { background:var(--red); color:var(--white); } .btn-primary:hover { background:var(--red-dk); }
.btn-dark { background:var(--strong-bg); color:var(--strong-fg); }
.btn-ghost { background:var(--paper); border:1.5px solid var(--line-2); color:var(--ink); }
.btn-danger { background:#b91c1c; color:#fff; } /* mindkét témában mélyvörös + fehér */
.btn-soft { background:var(--cream-dk); color:var(--ink); }
.btn-block { width:100%; }
.btn-sm { padding:7px 12px; min-height:34px; font-size:13.5px; }
.btn-ico { width:38px; height:38px; min-height:0; padding:0; border-radius:50%; background:var(--paper); border:1px solid var(--line); font-size:16px; }
.btn-link { padding:6px 4px; min-height:0; color:var(--ink-2); font-weight:600; text-decoration:underline; text-underline-offset:3px; }
.actions { display:flex; flex-direction:column; gap:8px; }
.actions.h { flex-direction:row; } .actions.h .btn { flex:1; }

/* ═══ Űrlap ═══ */
.field { display:flex; flex-direction:column; gap:6px; margin-top:10px; }
.field .label { font-family:var(--cond); font-weight:700; font-size:12.5px; letter-spacing:2px; text-transform:uppercase; color:var(--ink-3); }
.field .hint { font-size:12.5px; color:var(--ink-3); }
.field .req { color:var(--red); }
.field input[type=text], .field input[type=number], .field input[type=date], .field textarea, .field select { width:100%; background:var(--paper); border:1.5px solid var(--line-2); border-radius:var(--r-sm); padding:11px 13px; font-size:15px; outline:none; }
.field textarea { min-height:78px; resize:vertical; }
.field input:focus, .field textarea:focus, .field select:focus { border-color:var(--red); box-shadow:0 0 0 3px var(--red-dim); }
.photo-input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.photo-preview { border-radius:var(--r-sm); max-height:260px; object-fit:cover; width:100%; margin-top:6px; border:1px solid var(--line); }
.check { display:flex; align-items:center; gap:10px; padding:8px 0; font-size:14.5px; }
.check input { width:20px; height:20px; accent-color:var(--red); }
.people { display:flex; flex-wrap:wrap; gap:6px; }
.person { display:inline-flex; align-items:center; gap:6px; padding:5px 10px 5px 5px; border-radius:999px; border:1.5px solid var(--line-2); background:var(--paper); font-size:13.5px; font-weight:600; }
.person.sel { border-color:var(--red); background:var(--red-dim); }
.person.today { border-style:solid; }
.person .avatar { width:22px; height:22px; font-size:10px; }
.person.sel .avatar { background:var(--red); color:var(--white); }
.seg { display:flex; gap:4px; padding:3px; background:var(--cream-dk); border-radius:999px; }
.seg button { flex:1; padding:7px 10px; border-radius:999px; font-weight:700; font-size:13px; color:var(--ink-2); }
.seg button.active { background:var(--paper); color:var(--ink); box-shadow:var(--shadow); }
details.more { border-top:1px dashed var(--line-2); margin-top:12px; padding-top:8px; }
details.more summary { cursor:pointer; font-weight:700; color:var(--ink-2); list-style:none; display:flex; align-items:center; gap:6px; padding:6px 0; }
details.more summary::-webkit-details-marker { display:none; }

/* ═══ Ma — hero ═══ */
.hero { background:var(--hero-bg); color:var(--on-dark); border-radius:var(--r); padding:18px 16px 16px; position:relative; overflow:hidden; background-image:var(--hero-img); background-size:var(--hero-size); }
.hero::after { content:''; position:absolute; width:260px; height:260px; border-radius:50%; border:2px solid var(--hero-ring); right:-90px; top:-120px; pointer-events:none; }
.hero .eyebrow { color:var(--on-dark-3); }
.hero-title { font-family:var(--display); font-weight:400; font-size:36px; line-height:1; text-transform:uppercase; letter-spacing:.5px; margin:4px 0 6px; }
.hero-title em { font-style:normal; color:var(--red); }
.hero-sub { color:var(--on-dark-2); font-size:14px; }
.hero-prog { display:flex; align-items:center; gap:12px; margin-top:14px; }
.hero-prog .bar { flex:1; background:var(--on-dark-line); height:10px; }
.hero .bar-fill { background:linear-gradient(90deg, var(--red), var(--yellow)); }
.hero-prog .num { font-family:var(--display); font-weight:400; font-size:24px; }
.hero .btn { margin-top:14px; }
.hero.dim { background:var(--dark-2); }
.stats { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }
.stat { background:var(--paper); border:1px solid var(--line); border-radius:var(--r-sm); padding:10px 8px; text-align:center; }
.stat .v { font-family:var(--display); font-weight:400; font-size:28px; line-height:1; font-variant-numeric:tabular-nums; }
.stat .k { font-size:11.5px; letter-spacing:1.5px; text-transform:uppercase; color:var(--ink-3); margin-top:4px; font-family:var(--cond); font-weight:700; }
.top3 { display:flex; flex-direction:column; gap:6px; }
.top3 .r { display:flex; align-items:center; gap:10px; padding:6px 0; border-bottom:1px solid var(--line); }
.top3 .r:last-child { border-bottom:0; }
.top3 .pos { font-family:var(--display); font-weight:400; font-size:18px; width:24px; color:var(--ink-3); }
.top3 .me { color:var(--red); }
.top3 .pts { font-family:var(--display); font-weight:400; font-size:20px; font-variant-numeric:tabular-nums; }
.wait { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }
.wait button { background:var(--paper); border:1px solid var(--line); border-radius:var(--r-sm); padding:12px 6px; text-align:center; }
.wait button .v { font-family:var(--display); font-weight:400; font-size:30px; line-height:1; }
.wait button .k { font-size:11.5px; letter-spacing:1.5px; text-transform:uppercase; color:var(--ink-3); margin-top:4px; font-family:var(--cond); font-weight:700; }
.wait button.has { border-color:var(--red-border); background:var(--paper); } .wait button.has .v { color:var(--red); }
.loctable { display:grid; grid-template-columns:1fr auto auto auto; gap:6px 12px; align-items:center; font-size:14px; }
.loctable .h { font-family:var(--cond); font-weight:700; font-size:11.5px; letter-spacing:1.5px; text-transform:uppercase; color:var(--ink-3); }
.loctable .n { font-family:var(--display); font-weight:400; font-size:20px; text-align:right; font-variant-numeric:tabular-nums; }

/* ═══ Feladat-sorok ═══ */
.daybar { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.daybar .d { text-align:center; flex:1; }
.daybar .d b { font-family:var(--display); font-weight:400; font-size:22px; letter-spacing:.5px; text-transform:uppercase; display:block; line-height:1; }
.daybar .d span { font-size:12.5px; color:var(--ink-3); }
.trow { display:flex; align-items:center; gap:10px; padding:10px 12px 10px 10px; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-sm); text-align:left; width:100%; position:relative; box-shadow:var(--shadow); }
.trow::before { content:''; position:absolute; left:0; top:8px; bottom:8px; width:4px; border-radius:0 3px 3px 0; background:var(--ink-3); }
.trow.open::before { background:var(--red); } .trow.pending::before { background:var(--amber); } .trow.ok::before { background:var(--green); } .trow.bad::before { background:var(--bad); } .trow.miss::before { background:var(--purple); }
.trow.done { opacity:.7; box-shadow:none; }
.trow .ico { font-size:20px; width:28px; text-align:center; flex:none; }
.trow .t { font-weight:700; font-size:15px; line-height:1.25; }
.trow .m { font-size:12.5px; color:var(--ink-3); margin-top:2px; display:flex; flex-wrap:wrap; gap:4px 6px; align-items:center; }
.trow .st { flex:none; font-size:11.5px; font-weight:700; padding:3px 8px; border-radius:999px; background:var(--cream-dk); color:var(--ink-2); white-space:nowrap; }
.trow.open .st { background:var(--red-dim); color:var(--red); } .trow.pending .st { background:var(--amber-dim); color:var(--amber); } .trow.ok .st { background:var(--green-dim); color:var(--green); } .trow.bad .st { background:var(--bad-dim); color:var(--bad); } .trow.miss .st { background:var(--purple-dim); color:var(--purple); }
.daygroup { display:flex; flex-direction:column; gap:8px; }
.daygroup > .section-head { padding-top:8px; }

/* ═══ Feladat-nézet ═══ */
.detail-top { display:flex; align-items:center; gap:8px; }
.detail-top .btn-ico { flex:none; }
.detail-title { font-family:var(--display); font-weight:400; font-size:28px; line-height:1.02; text-transform:uppercase; letter-spacing:.3px; text-wrap:balance; margin-top:6px; }
.detail-meta { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.checklist { display:flex; flex-direction:column; }
.checklist .ci { display:flex; align-items:flex-start; gap:12px; padding:11px 4px; border-bottom:1px solid var(--line); text-align:left; width:100%; font-size:15px; line-height:1.3; }
.checklist .ci:last-child { border-bottom:0; }
.checklist .box { flex:none; width:24px; height:24px; border-radius:7px; border:2px solid var(--line-2); display:flex; align-items:center; justify-content:center; font-weight:900; color:var(--white); margin-top:-1px; }
.checklist .ci.on .box { background:var(--green); border-color:var(--green); }
.checklist .ci.on { color:var(--ink-3); text-decoration:line-through; text-decoration-color:var(--line-2); }
.checklist.ro .ci { cursor:default; }
.kv { display:grid; grid-template-columns:auto 1fr; gap:6px 12px; font-size:14px; }
.kv .k { color:var(--ink-3); font-size:12.5px; letter-spacing:1px; text-transform:uppercase; font-family:var(--cond); font-weight:700; padding-top:2px; }
.quote { padding:10px 12px; border-left:3px solid var(--line-2); background:var(--paper); border-radius:0 var(--r-xs) var(--r-xs) 0; font-size:14.5px; white-space:pre-wrap; }
.big-pts { font-family:var(--display); font-weight:400; font-size:22px; color:var(--green); }

/* ═══ Elszámolás-kártya ═══ */
.debt { border:2px solid var(--purple); background:var(--paper); }
.debt .eyebrow { color:var(--purple); }
.debt-opts { display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.debt-opt { text-align:left; padding:10px 12px; border-radius:var(--r-sm); border:1.5px solid var(--line-2); background:var(--paper); display:flex; flex-direction:column; gap:2px; }
.debt-opt b { font-size:15px; } .debt-opt span { font-size:12.5px; color:var(--ink-3); }
.debt-opt.sel { border-color:var(--purple); background:var(--purple-dim); }

/* ═══ Alsó lap / menü / toast ═══ */
.sheet-back { position:fixed; inset:0; z-index:50; background:var(--overlay); display:flex; align-items:flex-end; justify-content:center; animation:fade .15s; }
.sheet { width:100%; max-width:540px; background:var(--bg); border-radius:22px 22px 0 0; padding:18px 18px calc(22px + env(safe-area-inset-bottom, 0px)); animation:up .2s; max-height:88vh; overflow:auto; }
.sheet-title { font-family:var(--display); font-weight:400; font-size:22px; text-transform:uppercase; letter-spacing:.3px; }
.sheet-msg { color:var(--ink-2); margin-top:4px; font-size:14.5px; }
.sheet-actions { display:flex; gap:8px; margin-top:16px; } .sheet-actions .btn { flex:1; }
.sheet-foot { margin-top:14px; font-size:12px; text-align:center; }
.menu { display:flex; flex-direction:column; margin-top:12px; border-radius:var(--r-sm); overflow:hidden; border:1px solid var(--line); background:var(--paper); }
.menu-item { text-align:left; padding:13px 14px; font-weight:600; border-bottom:1px solid var(--line); } .menu-item:last-child { border-bottom:0; }
.toast { position:fixed; left:50%; bottom:calc(var(--nav-h) + 14px + env(safe-area-inset-bottom, 0px)); transform:translateX(-50%) translateY(20px); opacity:0; z-index:60; max-width:min(92vw, 500px); background:var(--strong-bg); color:var(--strong-fg); padding:11px 16px; border-radius:12px; font-size:14px; font-weight:600; text-align:center; pointer-events:none; transition:opacity .2s, transform .2s; box-shadow:0 8px 28px rgba(0,0,0,.25); }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
@keyframes fade { from { opacity:0 } to { opacity:1 } }
@keyframes up { from { transform:translateY(24px) } to { transform:translateY(0) } }
@media (min-width:600px) { .view { padding:18px 18px 8px; } }

/* ═══ XP a hero-ban (D2 B) ═══ */
.xp { display:flex; align-items:center; gap:10px; margin-top:12px; padding:10px 12px; background:var(--on-dark-fill); border:1px solid var(--on-dark-line); border-radius:var(--r-sm); position:relative; }
.xp .lv { font-family:var(--cond); font-weight:800; font-size:12px; letter-spacing:1.5px; text-transform:uppercase; white-space:nowrap; }
.xp .lv b { color:var(--gold); }
.xp .track { flex:1; height:8px; border-radius:999px; background:var(--on-dark-line); overflow:hidden; }
.xp .fill { height:100%; background:var(--yellow); border-radius:999px; box-shadow:0 0 12px var(--yellow-glow); transition:width .7s cubic-bezier(.2,.8,.2,1); }
.xp .n { font-size:12px; color:var(--on-dark-2); font-variant-numeric:tabular-nums; white-space:nowrap; }
.xp .title { font-size:11.5px; color:var(--on-dark-2); }
/* ═══ Tökéletes nap pecsét (F6) ═══ */
.stamp { position:absolute; right:12px; top:44px; transform:rotate(-10deg); border:3px solid var(--gold); color:var(--gold); font-family:var(--cond); font-weight:800; font-size:11px; letter-spacing:1.5px; text-transform:uppercase; padding:3px 8px; border-radius:6px; background:rgba(0,0,0,.55); animation:stamp-in .6s cubic-bezier(.2,1.6,.4,1) both; z-index:2; }
@keyframes stamp-in { from { transform:rotate(-10deg) scale(2.4); opacity:0 } 70% { transform:rotate(-10deg) scale(.96); opacity:1 } to { transform:rotate(-10deg) scale(1); opacity:1 } }
/* ═══ Animációk (D4 A) — pont-lebegés, szám-pörgés, szintlépés, konfetti ═══ */
.pt-float { position:absolute; font-family:var(--display); font-size:18px; color:var(--green); pointer-events:none; animation:pt-float 900ms ease-out forwards; z-index:9; text-shadow:0 1px 0 var(--paper); }
@keyframes pt-float { 0% { opacity:0; transform:translateY(6px) scale(.8) } 25% { opacity:1; transform:translateY(-4px) scale(1.15) } 100% { opacity:0; transform:translateY(-34px) scale(1) } }
.roll { display:inline-block; }
.roll.bump { animation:roll-bump .5s cubic-bezier(.2,1.4,.4,1); }
@keyframes roll-bump { 0% { transform:scale(1) } 40% { transform:scale(1.35); color:var(--green) } 100% { transform:scale(1) } }
.lu-back { position:fixed; inset:0; z-index:70; display:grid; place-items:center; background:var(--overlay-strong); backdrop-filter:blur(4px); animation:fade .2s; }
.lu-card { width:min(92vw, 340px); background:var(--paper); border:3px solid var(--gold); border-radius:22px; padding:24px 18px 18px; text-align:center; box-shadow:0 30px 60px rgba(0,0,0,.4), 0 0 0 8px var(--gold-dim); animation:lu-flip .9s cubic-bezier(.2,.9,.3,1.2) both; }
@keyframes lu-flip { 0% { transform:rotateY(90deg) scale(.8); opacity:0 } 60% { transform:rotateY(-10deg) scale(1.04); opacity:1 } 100% { transform:none } }
.lu-card .ey { font-family:var(--cond); font-weight:800; font-size:12px; letter-spacing:3px; text-transform:uppercase; color:var(--gold); }
.lu-card .from { font-size:13px; color:var(--ink-3); text-decoration:line-through; margin-top:8px; }
.lu-card .big { font-family:var(--display); font-size:34px; line-height:1; text-transform:uppercase; margin:4px 0 8px; }
.lu-card .rw { font-size:14px; color:var(--ink-2); margin-top:6px; }
.lu-card .ok { margin-top:16px; width:100%; }
.confetti { position:fixed; inset:0; pointer-events:none; overflow:hidden; z-index:71; }
.confetti i { position:absolute; top:-12px; width:8px; height:12px; border-radius:2px; background:var(--gold); animation:conf-fall 2.2s ease-in forwards; }
.confetti i:nth-child(2n) { background:var(--red); } .confetti i:nth-child(3n) { background:var(--xp); } .confetti i:nth-child(4n) { background:var(--green); width:6px; height:6px; border-radius:50%; }
@keyframes conf-fall { 0% { transform:translateY(0) rotate(0) } 100% { transform:translateY(105vh) rotate(600deg); opacity:.3 } }
.check-stamp { animation:check-stamp .35s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes check-stamp { 0% { transform:scale(.6); opacity:0 } 100% { transform:scale(1); opacity:1 } }
.fire { display:inline-block; animation:fire-flicker 2s ease-in-out infinite; transform-origin:50% 100%; }
@keyframes fire-flicker { 0%,100% { transform:scale(1) rotate(-2deg) } 50% { transform:scale(1.08) rotate(2deg) } }
.rise { animation:rise .5s cubic-bezier(.2,.9,.3,1.1) both; }
@keyframes rise { from { transform:translateY(18px); opacity:0 } to { transform:none; opacity:1 } }
@media (prefers-reduced-motion: reduce) { .stamp, .pt-float, .roll.bump, .lu-card, .confetti i, .check-stamp, .fire, .rise, .avatar.lv-6 { animation:none !important; } .xp .fill { transition:none; } }

/* Dolgozó vezető: döntésre váró tételek a Ma tetején (screens/ma.js waitStrip) */
.wait-strip { display:flex; align-items:center; gap:12px; width:100%; text-align:left; background:var(--paper); border:1.5px solid var(--red-border); border-radius:var(--r); padding:12px 14px; box-shadow:var(--shadow); color:var(--ink); }
.wait-strip .ws-n { flex:none; min-width:40px; height:40px; padding:0 8px; border-radius:999px; background:var(--red); color:var(--white); display:flex; align-items:center; justify-content:center; font-family:var(--display); font-size:22px; line-height:1; }
.wait-strip .ws-t { font-weight:700; font-size:15px; }
.wait-strip .ws-m { font-size:12.5px; color:var(--ink-2); margin-top:2px; }
.wait-strip .ws-go { flex:none; font-family:var(--cond); font-weight:700; font-size:13px; letter-spacing:1px; text-transform:uppercase; color:var(--red); }
.wait-strip:active { transform:scale(.99); }