/* Palack Online 0.2: the Kezdőzóna HUD (po2-kliens): windows (dialog, quest log, bag, shop, FLAKOMAT), the tracker,
   the XP bar and level-up, toasts, the use prompt, NPC plates, quest marks (bottle caps), speech bubbles, rising
   numbers, the touch context button. Gold = quests, bottle green = XP and good news, cream = people. */
:root { --gold: #f2b33d; --gold2: #ffd36b; --glass: #5fd39a; --glass2: #c4f27a; --cream: #f3e3c0;
  --pan: rgba(20,18,15,.93); --pan2: rgba(255,240,215,.05); --edge: rgba(255,232,196,.16); --dimmer: rgba(241,236,226,.45); }

/* ---- moved for 0.2: the help line to the top, the chat over the XP bar ---- */
.ph-help { top: calc(8px + var(--safe-t)); bottom: auto; }
.chat { bottom: calc(46px + var(--safe-b)); }

/* ---- windows ---- */
.win { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(440px, 92cqw); max-height: min(600px, calc(100cqh - 24px));
  display: flex; flex-direction: column; background: linear-gradient(180deg, rgba(34,30,25,.97), rgba(23,20,17,.97)); border: 1px solid var(--edge);
  border-radius: 12px; box-shadow: 0 18px 50px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06); color: var(--ink); z-index: 30; }
.win[hidden] { display: none; }
.w-head { display: flex; align-items: center; gap: 10px; padding: 12px 10px 10px 16px; border-bottom: 1px solid rgba(255,255,255,.07); }
.w-tt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.w-title { font-size: 19px; font-weight: 700; letter-spacing: .01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-sub { font-style: normal; font-size: 11px; color: var(--gold); text-transform: uppercase; letter-spacing: .14em; }
.w-sub:empty { display: none; }
.w-x { flex: none; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); font-size: 15px; color: var(--dim); }
.w-x:hover { color: var(--ink); background: rgba(255,255,255,.1); }
.w-body { flex: 1; min-height: 0; overflow: auto; padding: 14px 16px 0; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.2) transparent; }
.w-btns { position: sticky; bottom: 0; display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; padding: 12px 0 14px; margin-top: 6px;
  background: linear-gradient(180deg, rgba(22,20,17,0), rgba(22,20,17,.97) 30%); }
.w-btns:empty { display: none; }
.b1, .b2 { min-height: 42px; padding: 0 20px; border-radius: 9px; font-size: 16px; font-weight: 700; letter-spacing: .02em; }
.b1 { background: linear-gradient(180deg, var(--gold2), var(--gold)); color: #24170a; border: 0; box-shadow: 0 2px 0 #9c6a12; }
.b1:hover { filter: brightness(1.08); } .b1:active { transform: translateY(1px); box-shadow: 0 1px 0 #9c6a12; }
.b1:disabled { filter: grayscale(.8) brightness(.7); cursor: default; }
.b2 { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.2); font-weight: 600; }
.b2:hover { background: rgba(255,255,255,.1); }
.b2.danger { color: #ff9a7a; border-color: rgba(255,140,110,.35); }
.sm { min-height: 34px; padding: 0 12px; font-size: 14px; }
.big { min-height: 48px; font-size: 17px; }
.dim { color: var(--dim); }

/* quests: the dialog and the log share these */
.d-say { margin: 0 0 12px; font-size: 16px; line-height: 1.5; color: var(--cream); }
.d-list { display: flex; flex-direction: column; gap: 6px; }
.d-q { display: flex; align-items: center; gap: 10px; padding: 9px 12px; text-align: left; background: var(--pan2); border: 1px solid rgba(255,255,255,.08); border-radius: 9px; font-size: 16px; }
.d-q:hover { border-color: var(--gold); background: rgba(242,179,61,.1); }
.d-q span { flex: 1; } .d-q small { font-size: 11px; color: var(--dim); text-transform: uppercase; letter-spacing: .1em; }
.d-sign { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 900; font-size: 16px; background: var(--gold); color: #24170a; }
.st-active .d-sign { background: #8c877e; color: #1b1a17; }
.q-title { margin: 0 0 8px; font-size: 20px; color: var(--gold2); font-weight: 700; }
.q-text { margin: 0 0 12px; font-size: 15.5px; line-height: 1.55; color: var(--cream); white-space: pre-line; }
.q-sec { margin: 0 0 12px; }
.q-sec h4 { margin: 0 0 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .16em; color: var(--dim); }
.q-objs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.q-objs li, .trk li { display: flex; gap: 10px; justify-content: space-between; align-items: baseline; }
.q-objs li { font-size: 15px; padding: 6px 10px; background: var(--pan2); border-radius: 7px; }
.q-objs li b, .trk li b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.q-objs li.done, .trk li.done { color: var(--glass); }
.q-objs li.done span::before, .trk li.done span::before { content: '✓ '; }
.q-rew { display: flex; flex-wrap: wrap; gap: 6px; }
.rw { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 8px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); font-size: 15px; }
.rw i { font-style: normal; font-size: 17px; } .rw-xp i { color: #b9f08a; } .rw-xp b { color: #b9f08a; } .rw-ft b { color: var(--gold2); }

.w-log { width: min(760px, 94cqw); }
.l-cols { display: grid; grid-template-columns: minmax(170px, 34%) 1fr; gap: 14px; min-height: 0; }
.l-list { display: flex; flex-direction: column; gap: 4px; }
.l-q { display: flex; justify-content: space-between; gap: 8px; text-align: left; padding: 9px 10px; border-radius: 8px; border: 1px solid transparent; background: var(--pan2); font-size: 15px; }
.l-q.sel { border-color: var(--gold); background: rgba(242,179,61,.1); }
.l-q i { font-style: normal; font-size: 11px; color: var(--glass); text-transform: uppercase; letter-spacing: .1em; align-self: center; }
.l-none { color: var(--dim); line-height: 1.5; margin: 0; grid-column: 1 / -1; }
.l-det { min-width: 0; }

/* the bag */
.w-bag { width: min(420px, 92cqw); }
.bag-ft { display: flex; align-items: center; gap: 8px; font-size: 22px; margin-bottom: 12px; }
.bag-ft i { font-style: normal; } .bag-ft b { color: var(--gold2); font-variant-numeric: tabular-nums; }
.bag-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.slot { position: relative; aspect-ratio: 1; border-radius: 9px; border: 1px solid rgba(255,255,255,.1); background: rgba(0,0,0,.28); display: grid; place-items: center; padding: 0; }
.slot i { font-style: normal; font-size: 27px; line-height: 1; }
.slot b { position: absolute; right: 4px; bottom: 2px; font-size: 13px; text-shadow: 0 0 3px #000, 0 1px 2px #000; font-variant-numeric: tabular-nums; }
.slot.sel { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }
.slot.empty { background: rgba(0,0,0,.14); border-style: dashed; border-color: rgba(255,255,255,.06); }
.bag-info { min-height: 46px; margin: 12px 0 14px; display: flex; flex-direction: column; gap: 3px; font-size: 14px; }
.bag-info b { font-size: 16px; color: var(--cream); } .bag-info span { color: var(--dim); } .bag-info p { margin: 2px 0 0; color: var(--dim); line-height: 1.4; }

/* the shops */
.w-shop { width: min(480px, 92cqw); }
.w-shop[data-kind=flakomat] { border-color: rgba(95,211,154,.4); }
.w-shop[data-kind=flakomat] .w-sub { color: var(--glass); }
.sh-tabs { display: flex; gap: 6px; margin-bottom: 10px; }
.sh-tab { flex: 1; min-height: 38px; border-radius: 8px; border: 1px solid rgba(255,255,255,.12); background: var(--pan2); font-weight: 600; }
.sh-tab.sel { border-color: var(--gold); background: rgba(242,179,61,.14); color: var(--gold2); }
.sh-ft { display: flex; justify-content: flex-end; gap: 6px; font-size: 14px; color: var(--dim); margin-bottom: 8px; }
.sh-ft b { color: var(--gold2); font-variant-numeric: tabular-nums; }
.sh-hint { margin: 0 0 10px; font-size: 13px; color: var(--dim); line-height: 1.4; }
.sh-list { display: flex; flex-direction: column; gap: 6px; }
.sh-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 6px; border-radius: 9px; background: var(--pan2); border: 1px solid rgba(255,255,255,.06); }
.sh-ic { flex: none; width: 38px; height: 38px; border-radius: 8px; background: rgba(0,0,0,.3); display: grid; place-items: center; font-style: normal; font-size: 22px; }
.sh-n { flex: 1; min-width: 0; font-size: 15px; display: flex; gap: 6px; align-items: baseline; }
.sh-n small { color: var(--dim); font-size: 13px; }
.sh-p { color: var(--gold2); font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.w-shop[data-kind=flakomat] .sh-p { color: var(--glass2); }
.w-shop[data-kind=flakomat] .b1 { background: linear-gradient(180deg, #8ff0b8, var(--glass)); box-shadow: 0 2px 0 #23865a; color: #0c2418; }

/* ---- the tracker ---- */
.trk { position: absolute; right: calc(12px + var(--safe-r)); top: calc(58px + var(--safe-t)); width: 260px; display: flex; flex-direction: column; gap: 10px;
  padding: 8px 10px 8px 14px; background: linear-gradient(270deg, rgba(0,0,0,.42), rgba(0,0,0,0)); text-shadow: 0 1px 2px #000, 0 0 3px #000; }
.trk[hidden], .trk.off { display: none; }
.trk-q b { display: block; font-size: 14.5px; color: var(--gold2); margin-bottom: 2px; }
.trk ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.trk li { font-size: 13px; color: var(--ink); }
.trk-done { margin: 0; font-size: 13px; color: var(--glass); }
.trk-q.ready b { color: var(--glass2); }
.trk-q.flash { animation: trkflash 1.6s ease-out; }
@keyframes trkflash { 0%, 30% { background: rgba(95,211,154,.28); } 100% { background: rgba(95,211,154,0); } }

/* ---- the XP bar ---- */
.xp { position: absolute; left: 50%; bottom: calc(8px + var(--safe-b)); transform: translateX(-50%); display: flex; align-items: center; gap: 8px; }
.xp[hidden] { display: none; }
.xp-lv { min-width: 26px; height: 26px; padding: 0 4px; box-sizing: border-box; border-radius: 13px; display: grid; place-items: center; font-size: 14px; color: #24170a;
  background: linear-gradient(180deg, var(--gold2), var(--gold)); box-shadow: 0 1px 3px rgba(0,0,0,.6); }
.xp-bar { position: relative; width: min(460px, 40cqw); height: 11px; border-radius: 6px; overflow: hidden; background: rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.2); }
.xp-fill { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, #2f9e6b, var(--glass) 60%, var(--glass2)); transition: transform .5s ease-out; }
.xp-gain { display: none; }
.xp-cells { position: absolute; inset: 0; display: flex; }
.xp-cells s { flex: 1; border-right: 1px solid rgba(0,0,0,.45); } .xp-cells s:last-child { border: 0; }
.xp-txt { font-size: 12px; color: var(--dim); text-shadow: 0 1px 2px #000; font-variant-numeric: tabular-nums; min-width: 92px; }
.xp.lvl .xp-bar { box-shadow: 0 0 12px var(--gold), 0 0 2px var(--gold2); border-color: var(--gold2); }

/* the level-up moment */
.lvup { position: absolute; left: 50%; top: 34%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; pointer-events: none; }
.lvup[hidden] { display: none; }
.lvup b { font-size: clamp(16px, 2.2cqw, 22px); text-transform: uppercase; letter-spacing: .28em; color: var(--cream); text-shadow: 0 2px 6px #000; }
.lvup strong { font-size: clamp(40px, 7cqw, 64px); line-height: 1; color: var(--gold2); text-shadow: 0 0 18px rgba(242,179,61,.9), 0 3px 8px #000; }
.lvup span { font-size: 14px; color: var(--ink); text-shadow: 0 1px 3px #000; }
.lvup-ring { position: absolute; left: 50%; top: 50%; width: 180px; height: 180px; margin: -90px 0 0 -90px; border-radius: 50%; border: 3px solid var(--gold2); opacity: 0; box-shadow: 0 0 24px var(--gold); }
.lvup.on { animation: lvup 3.4s ease-out forwards; }
.lvup.on .lvup-ring { animation: lvring 1.3s ease-out forwards; }
@keyframes lvup { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.7); } 8% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); } 14% { transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes lvring { 0% { opacity: .95; transform: scale(.25); } 100% { opacity: 0; transform: scale(2.6); } }

/* ---- toasts ---- */
.toasts { position: absolute; left: 50%; top: calc(36px + var(--safe-t)); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; }
.toast { padding: 7px 16px; border-radius: 9px; background: var(--pan); border: 1px solid var(--edge); border-left: 3px solid var(--gold); font-size: 15px; box-shadow: 0 6px 18px rgba(0,0,0,.4);
  animation: toastin .25s ease-out; white-space: nowrap; max-width: 80cqw; overflow: hidden; text-overflow: ellipsis; }
.toast.good { border-left-color: var(--glass); }
.toast.out { opacity: 0; transform: translateY(-6px); transition: opacity .4s, transform .4s; }
@keyframes toastin { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ---- the use prompt (desktop) ---- */
.useprompt { position: absolute; left: 50%; bottom: calc(52px + var(--safe-b)); transform: translateX(-50%); display: flex; align-items: center; gap: 10px;
  padding: 6px 14px 6px 6px; border-radius: 10px; background: var(--pan); border: 1px solid var(--edge); box-shadow: 0 6px 18px rgba(0,0,0,.4); }
.useprompt[hidden] { display: none; }
.useprompt kbd { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 7px; font: inherit; font-weight: 800; font-size: 15px; color: #24170a;
  background: linear-gradient(180deg, var(--gold2), var(--gold)); box-shadow: 0 2px 0 #9c6a12; }
.useprompt span { font-size: 16px; font-weight: 600; }
.useprompt.hit { animation: usehit .3s ease-out; }
@keyframes usehit { 0% { transform: translateX(-50%) scale(.94); } 100% { transform: translateX(-50%) scale(1); } }

/* ---- over heads: nameplates, quest marks, bubbles, rising numbers ---- */
.npcl { position: absolute; inset: 0; }
.nplate, .qmark, .bubble, .float { position: absolute; left: 0; top: 0; transform-origin: 50% 100%; will-change: transform; white-space: nowrap; }
.nplate[hidden], .qmark[hidden], .bubble[hidden], .float[hidden] { display: none; }
.nplate { display: flex; flex-direction: column; align-items: center; text-shadow: 0 0 3px #000, 0 1px 2px #000; }
.nplate b { font-size: 15px; color: var(--cream); }
.nplate i { font-style: normal; font-size: 11px; color: var(--dim); }
.nplate i:empty { display: none; }
.nplate i::before { content: '‹'; } .nplate i::after { content: '›'; }
.nplate[data-role=police] b { color: #9cc8ff; }
.qmark { width: 34px; height: 34px; }
.qmark svg { display: block; width: 100%; height: 100%; animation: capbob 1.6s ease-in-out infinite; filter: drop-shadow(0 2px 2px rgba(0,0,0,.7)); }
.qmark .cap-o { fill: #d18f1c; stroke: #6d4507; stroke-width: 1; }
.qmark .cap-i { fill: var(--gold2); stroke: rgba(109,69,7,.55); stroke-width: 1; }
.qmark text { font: 900 18px "Bahnschrift", "Segoe UI", system-ui, sans-serif; fill: #2a1a05; }
.qmark[data-m=active] .cap-o { fill: #77736b; stroke: #3a3833; } .qmark[data-m=active] .cap-i { fill: #b9b4aa; } .qmark[data-m=active] svg { animation: none; }
/* the passers-by a begging quest wants: a small light cap, no bob (the human, 11-09) */
.qmark[data-m=target] { width: 24px; height: 24px; }
.qmark[data-m=target] .cap-o { fill: #e9e4d6; stroke: #7a7568; } .qmark[data-m=target] .cap-i { fill: #fbf6ea; } .qmark[data-m=target] text { fill: #2a1a05; } .qmark[data-m=target] svg { animation: none; }
@keyframes capbob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
.bubble { max-width: 240px; }
.bubble span { display: block; white-space: normal; width: max-content; max-width: 240px; padding: 7px 12px; border-radius: 13px; background: #fbf6ea; color: #1d1b17; font-size: 14px; line-height: 1.3;
  box-shadow: 0 3px 10px rgba(0,0,0,.4); position: relative; margin-bottom: 8px; }
.bubble span::after { content: ''; position: absolute; left: 50%; bottom: -7px; margin-left: -7px; border: 7px solid transparent; border-bottom: 0; border-top-color: #fbf6ea; }
.float { font-size: 21px; font-weight: 800; text-shadow: 0 0 3px #000, 0 2px 3px #000; letter-spacing: .01em; }
.float.money { color: var(--gold2); } .float.item { color: var(--glass2); } .float.xp { color: #b9f08a; font-size: 17px; } .float.miss { color: #c8c2b8; font-size: 16px; font-weight: 600; } .float.spent { color: #ffb08a; font-size: 18px; }

/* ---- touch: the context button, NAPLÓ, TÁSKA; the tracker under the name; zoom moved for the context button ---- */
.tch-log, .tch-bag { width: 56px; height: 56px; top: calc(64px + var(--safe-t)); font-size: 10px; }
.tch-log { right: calc(154px + var(--safe-r)); } .tch-bag { right: calc(90px + var(--safe-r)); }
.tch-zin, .tch-zout { right: calc(116px + var(--safe-r)); }
.tch-zin { bottom: calc(94px + var(--safe-b)); } .tch-zout { bottom: calc(42px + var(--safe-b)); }
.tch-use { position: absolute; right: calc(22px + var(--safe-r)); bottom: calc(138px + var(--safe-b)); max-width: min(300px, 44cqw); height: 54px; padding: 0 18px 0 8px;
  display: flex; align-items: center; gap: 8px; border-radius: 27px; border: 2px solid var(--gold2); background: rgba(30,24,14,.82); color: var(--ink);
  font-size: 16px; font-weight: 700; box-shadow: 0 4px 14px rgba(0,0,0,.45); animation: usein .2s ease-out; }
.tch-use[hidden] { display: none; }
.tch-use i { width: 38px; height: 38px; flex: none; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 20px; background: linear-gradient(180deg, var(--gold2), var(--gold)); }
.tch-use span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tch-use:active { transform: scale(.96); }
@keyframes usein { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }
body:has(.tch:not(.hidden)) .trk { left: calc(12px + var(--safe-l)); right: auto; top: calc(86px + var(--safe-t)); width: 220px; padding: 6px 12px 6px 8px; gap: 6px;
  background: linear-gradient(90deg, rgba(0,0,0,.42), rgba(0,0,0,0)); }
body:has(.tch:not(.hidden)) .trk-q:nth-child(n+3) { display: none; }
body:has(.tch:not(.hidden)) .trk-q b { font-size: 13px; } body:has(.tch:not(.hidden)) .trk li { font-size: 12px; }
body:has(.tch:not(.hidden)) .xp-bar { width: 34cqw; height: 9px; }
body:has(.tch:not(.hidden)) .xp-txt { font-size: 11px; min-width: 0; }

/* ---- short screens (a phone held sideways) ---- */
@container (max-height: 520px) {
  .win { max-height: calc(100cqh - 12px); border-radius: 10px; }
  .w-head { padding: 8px 8px 7px 14px; } .w-title { font-size: 17px; } .w-x { width: 36px; height: 36px; }
  .w-body { padding: 10px 14px 0; }
  .w-btns { padding: 8px 0 10px; }
  .q-text, .d-say { font-size: 14.5px; line-height: 1.45; margin-bottom: 8px; }
  .q-title { font-size: 17px; margin-bottom: 4px; }
  .q-objs li { font-size: 14px; padding: 4px 8px; }
  .w-log, .w-shop { width: min(760px, 96cqw); }
  .w-shop { width: min(520px, 92cqw); }
  .bag-grid { grid-template-columns: repeat(9, 1fr); }
  .w-bag { width: min(560px, 92cqw); }
  .slot i { font-size: 23px; }
  .bag-ft { font-size: 18px; margin-bottom: 8px; }
  .lvup { top: 54%; }
}

/* the forint coin (an emoji coin is missing on older systems) */
i.coin { font-style: normal; display: inline-grid; place-items: center; width: 1.25em; height: 1.25em; border-radius: 50%; font-size: .72em; font-weight: 800; letter-spacing: -.04em;
  color: #5a3a06; background: radial-gradient(circle at 35% 30%, #fff1b8, var(--gold2) 45%, #c98a1a); box-shadow: inset 0 0 0 1.5px #a8700f; }
.bag-ft i.coin { font-size: 15px; width: 26px; height: 26px; }
.rw i.coin { font-size: 10px; width: 19px; height: 19px; }
.slot[hidden] { display: none; } .slot:disabled { cursor: default; }

/* a window open: the context pill under it goes (it showed through) */
body:has(.win:not([hidden])) .tch-use { visibility: hidden; }