/* Mystical Town v2 — stilius */
:root{
  --bg:#15131c; --bg2:#1f1b2b; --bg3:#2a2438; --bg4:#352c48;
  --ink:#ece6f5; --muted:#9b91ad; --faint:#6c637e;
  --gold:#e0b057; --gold2:#f0cd86; --gold-dim:#7a6334;
  --red:#d8556a; --red2:#ff7a8c; --green:#67c189; --blue:#7d9ce0; --violet:#b98be0;
  --border:#39324e;
  --shadow:0 8px 28px rgba(0,0,0,.45);
  --r:14px;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  background:radial-gradient(ellipse at 50% -10%,#2a2440 0%,var(--bg) 60%) fixed;
  color:var(--ink);
  font-family:'Spectral',Georgia,serif;
  font-size:16px;line-height:1.5;
  overscroll-behavior:none;
}
#app{
  max-width:560px;margin:0 auto;min-height:100%;
  display:flex;flex-direction:column;
  background:linear-gradient(180deg,rgba(31,27,43,.55),rgba(21,19,28,.2));
}
h1,h2,h3,.title{font-family:'Cinzel',serif;font-weight:700;letter-spacing:.02em}
button{font-family:inherit;cursor:pointer;border:none;color:inherit}
input{font-family:inherit}
.muted{color:var(--muted)}
.center{text-align:center}
.hide{display:none!important}

/* ---------- boot ---------- */
.boot{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.boot-title{font-family:'Cinzel',serif;font-size:30px;color:var(--gold);letter-spacing:.06em}
.boot-sub{color:var(--muted);font-style:italic}

/* ---------- auth ---------- */
.auth{flex:1;display:flex;flex-direction:column;justify-content:center;padding:32px 22px;gap:18px}
.auth-logo{text-align:center}
.auth-logo .big{font-family:'Cinzel',serif;font-size:34px;color:var(--gold);letter-spacing:.05em;
  text-shadow:0 2px 18px rgba(224,176,87,.35)}
.auth-logo .sub{color:var(--muted);font-style:italic;margin-top:2px}
.auth-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);
  padding:20px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:12px}
.field label{display:block;font-size:12px;color:var(--muted);margin-bottom:5px;letter-spacing:.04em;text-transform:uppercase}
.field input{width:100%;background:var(--bg);border:1px solid var(--border);border-radius:10px;
  color:var(--ink);padding:12px 13px;font-size:16px}
.field input:focus{outline:none;border-color:var(--gold-dim)}
.tabs{display:flex;gap:8px}
.tabs .tab{flex:1;padding:10px;border-radius:10px;background:var(--bg);border:1px solid var(--border);
  color:var(--muted);font-size:14px;text-align:center;transition:.15s}
.tabs .tab.on{background:var(--bg4);color:var(--gold2);border-color:var(--gold-dim)}
.auth-err{color:var(--red2);font-size:14px;min-height:18px;text-align:center}

/* ---------- buttons ---------- */
.btn{display:block;width:100%;padding:13px 16px;border-radius:11px;font-size:16px;
  background:linear-gradient(180deg,var(--bg4),var(--bg3));border:1px solid var(--border);
  color:var(--ink);transition:transform .08s,filter .15s;text-align:center}
.btn:active{transform:scale(.975)}
.btn.gold{background:linear-gradient(180deg,var(--gold2),var(--gold));color:#241c08;
  border-color:var(--gold-dim);font-weight:700;font-family:'Cinzel',serif}
.btn.red{background:linear-gradient(180deg,#e0697c,#bf4357);color:#fff;border-color:#7a2c38}
.btn.ghost{background:transparent;border-color:var(--border);color:var(--muted)}
.btn:disabled{opacity:.42;filter:grayscale(.5)}
.btn.sm{padding:9px 12px;font-size:14px;width:auto}
.row{display:flex;gap:9px}
.row .btn{flex:1}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:20;background:rgba(21,19,28,.96);
  border-bottom:1px solid var(--border);backdrop-filter:blur(8px);padding:8px 12px 10px}
.hdr-top{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.hdr-name{font-family:'Cinzel',serif;color:var(--gold2);font-size:15px;flex:1;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hdr-name b{color:var(--gold)}
.lang{display:flex;border:1px solid var(--border);border-radius:8px;overflow:hidden}
.lang button{padding:4px 8px;font-size:11px;background:var(--bg2);color:var(--muted);font-weight:700}
.lang button.on{background:var(--gold);color:#241c08}
.icon-btn{width:30px;height:30px;border-radius:8px;background:var(--bg3);border:1px solid var(--border);
  font-size:14px;display:flex;align-items:center;justify-content:center}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{background:var(--bg3);border:1px solid var(--border);border-radius:8px;padding:3px 8px;
  font-size:12px;display:flex;align-items:center;gap:4px;white-space:nowrap}
.chip b{color:var(--gold2)}
.chip.hp{flex:1;min-width:120px;gap:6px}
.bar{flex:1;height:9px;background:#0e0c14;border-radius:6px;overflow:hidden;border:1px solid #0a0810}
.bar > i{display:block;height:100%;border-radius:6px;transition:width .45s ease}
.bar.hp > i{background:linear-gradient(90deg,#bf4357,#e0697c)}
.bar.xp{height:6px}
.bar.xp > i{background:linear-gradient(90deg,#7a6334,var(--gold))}
.bar.mini > i{background:linear-gradient(90deg,#bf4357,#e0697c)}

/* ---------- view ---------- */
.view{flex:1;padding:16px 14px 30px;animation:fade .25s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.view-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.view-head h2{font-size:20px;color:var(--gold2)}
.view-head .sub{color:var(--muted);font-size:13px;font-style:italic}
.back{width:34px;height:34px;flex:none;border-radius:9px;background:var(--bg3);
  border:1px solid var(--border);font-size:16px}
.section-label{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);
  margin:18px 2px 8px}
.section-label:first-child{margin-top:0}

/* ---------- town grid ---------- */
.town-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tile{background:linear-gradient(160deg,var(--bg3),var(--bg2));border:1px solid var(--border);
  border-radius:var(--r);padding:15px 12px;display:flex;flex-direction:column;align-items:center;
  gap:6px;text-align:center;transition:transform .1s,border-color .15s}
.tile:active{transform:scale(.97)}
.tile .ic{font-size:30px;line-height:1}
.tile .nm{font-family:'Cinzel',serif;font-size:13px;color:var(--ink)}
.tile .badge{position:absolute;margin:-30px 0 0 64px;background:var(--red);color:#fff;
  font-size:10px;font-weight:700;border-radius:9px;padding:1px 6px}
.tile.wide{grid-column:1/-1;flex-direction:row;justify-content:flex-start;gap:12px}
.tile.wide .ic{font-size:24px}

/* ---------- generic card ---------- */
.card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);
  padding:14px;margin-bottom:10px}
.card.pad0{padding:0;overflow:hidden}
.card h3{font-size:16px;color:var(--gold2);margin-bottom:4px}
.list-item{display:flex;align-items:center;gap:11px;padding:12px 14px;border-bottom:1px solid var(--border)}
.list-item:last-child{border-bottom:none}
.list-item .ic{font-size:24px;width:30px;text-align:center;flex:none}
.list-item .gr{flex:1;min-width:0}
.list-item .gr .t{font-size:15px}
.list-item .gr .d{font-size:12px;color:var(--muted)}
.list-item.locked{opacity:.5}
.tag{font-size:11px;padding:2px 7px;border-radius:7px;background:var(--bg4);color:var(--muted);white-space:nowrap}
.tag.ok{background:rgba(103,193,137,.16);color:var(--green)}
.tag.boss{background:rgba(216,85,106,.16);color:var(--red2)}
.tag.gold{background:rgba(224,176,87,.15);color:var(--gold2)}

/* ---------- monster / zone ---------- */
.mon{background:linear-gradient(160deg,var(--bg3),var(--bg2));border:1px solid var(--border);
  border-radius:12px;padding:12px;margin-bottom:9px;display:flex;align-items:center;gap:12px}
.mon .av{font-size:32px;width:46px;height:46px;flex:none;display:flex;align-items:center;
  justify-content:center;background:#0e0c14;border-radius:10px;border:1px solid var(--border)}
.mon .info{flex:1;min-width:0}
.mon .info .nm{font-family:'Cinzel',serif;font-size:14px}
.mon .info .st{font-size:12px;color:var(--muted)}
.mon.boss{border-color:var(--gold-dim);background:linear-gradient(160deg,#3a2f24,var(--bg2))}
.mon.boss .nm{color:var(--gold2)}
.mon.locked{opacity:.55}

/* ---------- combat ---------- */
.combat{display:flex;flex-direction:column;gap:12px}
.fighter{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:14px;position:relative;overflow:hidden}
.fighter.enemy{border-color:#5a3640;background:linear-gradient(160deg,#2c2030,var(--bg2))}
.fighter .frow{display:flex;align-items:center;gap:12px;margin-bottom:9px}
.fighter .av{font-size:42px;width:62px;height:62px;flex:none;display:flex;align-items:center;
  justify-content:center;background:#0e0c14;border-radius:12px;border:1px solid var(--border)}
.fighter.hurt .av{animation:shake .32s}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}
/* hit flash overlay — raudonas/auksinis blyksnis ant smūgį gavusio kortelės */
.fighter::before{content:'';position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;opacity:0;transition:opacity .15s;
  background:radial-gradient(circle at 50% 30%, rgba(255,255,255,.18), transparent 65%)}
.fighter.hurt::before{opacity:1;animation:flashOut .35s ease-out}
.fighter.enemy.hurt::before{background:radial-gradient(circle at 50% 30%, rgba(255,200,200,.32), rgba(216,85,106,.18) 40%, transparent 70%)}
.fighter.crit-hit::before{background:radial-gradient(circle at 50% 30%, rgba(255,230,150,.55), rgba(224,176,87,.25) 40%, transparent 75%);
  opacity:1;animation:flashOut .55s ease-out}
@keyframes flashOut{from{opacity:1}to{opacity:0}}
.fighter .nm{font-family:'Cinzel',serif;font-size:17px}
.fighter .sub{font-size:12px;color:var(--muted)}
.hpline{display:flex;align-items:center;gap:8px;font-size:13px}
.hpline .bar{height:13px}
.hpnum{font-variant-numeric:tabular-nums;color:var(--muted);min-width:74px;text-align:right}
.float{position:absolute;right:20px;top:20px;font-family:'Cinzel',serif;font-weight:700;
  font-size:26px;pointer-events:none;animation:floatup 1s ease forwards}
.float.dmg{color:var(--red2)}
.float.crit{color:var(--gold2);font-size:32px}
.float.heal{color:var(--green)}
@keyframes floatup{0%{opacity:0;transform:translateY(8px)}20%{opacity:1}100%{opacity:0;transform:translateY(-34px)}}
.clog{background:#0e0c14;border:1px solid var(--border);border-radius:11px;padding:10px 12px;
  font-size:13px;max-height:132px;overflow-y:auto;display:flex;flex-direction:column-reverse;gap:3px}
.clog .ln{color:var(--muted)}
.clog .ln.you{color:var(--ink)}
.clog .ln.crit{color:var(--gold2)}
.clog .ln.win{color:var(--green)}
.clog .ln.lose{color:var(--red2)}
.combat-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.combat-actions .btn.attack{grid-column:1/-1}

/* ---------- result panel ---------- */
.result{text-align:center;padding:22px 16px}
.result .big{font-family:'Cinzel',serif;font-size:24px;margin-bottom:6px}
.result.win .big{color:var(--green)}
.result.lose .big{color:var(--red2)}
.reward{display:inline-flex;gap:14px;margin:10px 0;padding:9px 16px;background:var(--bg3);
  border:1px solid var(--border);border-radius:10px}
.reward b{color:var(--gold2)}

/* ---------- dialogue ---------- */
.dlg-npc{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.dlg-npc .av{font-size:34px;width:54px;height:54px;flex:none;display:flex;align-items:center;
  justify-content:center;background:var(--bg3);border-radius:12px;border:1px solid var(--gold-dim)}
.dlg-npc .nm{font-family:'Cinzel',serif;font-size:18px;color:var(--gold2)}
.dlg-npc .role{font-size:12px;color:var(--muted);font-style:italic}
.dlg-text{background:var(--bg2);border:1px solid var(--border);border-left:3px solid var(--gold);
  border-radius:10px;padding:14px;font-size:15px;margin-bottom:14px;line-height:1.6}
.dlg-choices{display:flex;flex-direction:column;gap:9px}
.dlg-choice{text-align:left;padding:12px 14px;background:var(--bg3);border:1px solid var(--border);
  border-radius:10px;font-size:15px;transition:.12s}
.dlg-choice:active{transform:scale(.98)}
.dlg-choice::before{content:'›';color:var(--gold);margin-right:8px;font-weight:700}

/* ---------- cutscene ---------- */
#overlay{position:fixed;inset:0;z-index:60;display:none;align-items:center;justify-content:center;
  background:rgba(8,7,12,.86);backdrop-filter:blur(4px);padding:20px}
#overlay.on{display:flex}
.cut{max-width:520px;width:100%;background:linear-gradient(180deg,var(--bg2),var(--bg));
  border:1px solid var(--gold-dim);border-radius:18px;padding:24px 20px;box-shadow:var(--shadow);
  animation:fade .4s ease;max-height:90vh;overflow-y:auto}
.cut .ct{font-family:'Cinzel',serif;font-size:22px;color:var(--gold);text-align:center;margin-bottom:16px}
.cut p{margin-bottom:13px;font-size:15px;line-height:1.7}
.cut p:first-letter{font-size:1.1em;color:var(--gold2)}

/* ---------- chat ---------- */
.chat-box{display:flex;flex-direction:column;gap:7px;margin-bottom:12px;max-height:50vh;overflow-y:auto;
  padding-right:2px}
.msg{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:8px 11px;font-size:14px}
.msg .who{color:var(--gold2);font-weight:500;font-family:'Cinzel',serif;font-size:13px}
.msg .when{color:var(--faint);font-size:11px;float:right}
.chat-input{display:flex;gap:8px}
.chat-input input{flex:1;background:var(--bg);border:1px solid var(--border);border-radius:10px;
  color:var(--ink);padding:11px 12px;font-size:15px}
.chat-input input:focus{outline:none;border-color:var(--gold-dim)}

/* ---------- leaderboard ---------- */
.lb-row{display:flex;align-items:center;gap:11px;padding:10px 12px;border-bottom:1px solid var(--border)}
.lb-row:last-child{border-bottom:none}
.lb-rank{font-family:'Cinzel',serif;font-size:15px;width:26px;text-align:center;color:var(--muted)}
.lb-rank.r1{color:var(--gold)}.lb-rank.r2{color:#cbd2dc}.lb-rank.r3{color:#cd8e5a}
.lb-row .nm{flex:1;font-size:15px}
.lb-row .vl{color:var(--gold2);font-variant-numeric:tabular-nums}

/* ---------- shop ---------- */
.shop-tabs{display:flex;gap:7px;margin-bottom:12px}
.shop-tabs button{flex:1;padding:9px;border-radius:9px;background:var(--bg2);border:1px solid var(--border);
  color:var(--muted);font-size:13px}
.shop-tabs button.on{background:var(--bg4);color:var(--gold2);border-color:var(--gold-dim)}
.shop-item{display:flex;align-items:center;gap:11px;background:var(--bg2);border:1px solid var(--border);
  border-radius:12px;padding:11px 12px;margin-bottom:9px}
.shop-item .gr{flex:1;min-width:0}
.shop-item .gr .t{font-family:'Cinzel',serif;font-size:14px}
.shop-item .gr .d{font-size:12px;color:var(--muted)}
.shop-item .gr .st{font-size:12px;color:var(--blue)}
.shop-item.equipped{border-color:var(--gold-dim)}
.shop-item.owned-tag .t::after{content:' ✓';color:var(--green)}

/* ---------- misc ---------- */
.statgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.stat{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:10px 12px}
.stat .k{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.stat .v{font-family:'Cinzel',serif;font-size:18px;color:var(--gold2)}
.note{font-size:13px;color:var(--muted);font-style:italic;text-align:center;padding:18px 10px}
.dead-banner{background:rgba(216,85,106,.12);border:1px solid #5a3640;border-radius:11px;
  padding:12px;text-align:center;color:var(--red2);margin-bottom:12px}
.crystal-row{display:flex;gap:8px;justify-content:center;margin:6px 0}
.crystal{font-size:26px;filter:grayscale(1) opacity(.35)}
.crystal.have{filter:none}
.stepper{display:flex;align-items:center;gap:10px;justify-content:center;margin:8px 0}
.stepper button{width:38px;height:38px;border-radius:9px;background:var(--bg4);
  border:1px solid var(--border);font-size:20px}
.stepper .val{font-family:'Cinzel',serif;font-size:22px;min-width:54px;text-align:center;color:var(--gold2)}

/* ---------- toasts ---------- */
#toasts{position:fixed;left:0;right:0;top:10px;z-index:80;display:flex;flex-direction:column;
  align-items:center;gap:6px;pointer-events:none}
.toast{background:var(--bg4);border:1px solid var(--gold-dim);border-radius:10px;padding:9px 16px;
  font-size:14px;box-shadow:var(--shadow);animation:toastin .3s ease;max-width:90vw}
.toast.good{border-color:var(--green);color:var(--green)}
.toast.bad{border-color:#7a2c38;color:var(--red2)}
.toast.level{border-color:var(--gold);color:var(--gold2);font-family:'Cinzel',serif}
@keyframes toastin{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}

/* ====================== AMBIENT FONAS (etapas 1) ======================= */
/* Žvaigždės — du sluoksniai (artimos + tolimos), pulsuojantys nelygiai */
.bg-stars{
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%, #f0cd86 99%, transparent 100%),
    radial-gradient(1px 1px   at 27% 64%, #ece6f5 99%, transparent 100%),
    radial-gradient(1.6px 1.6px at 41% 28%, #f0cd86 99%, transparent 100%),
    radial-gradient(1px 1px   at 58% 82%, #b98be0 99%, transparent 100%),
    radial-gradient(1.2px 1.2px at 73% 12%, #f0cd86 99%, transparent 100%),
    radial-gradient(1.4px 1.4px at 84% 55%, #ece6f5 99%, transparent 100%),
    radial-gradient(1px 1px   at 93% 30%, #7d9ce0 99%, transparent 100%),
    radial-gradient(1.8px 1.8px at 8%  88%, #f0cd86 99%, transparent 100%),
    radial-gradient(1px 1px   at 38% 92%, #ece6f5 99%, transparent 100%),
    radial-gradient(1.2px 1.2px at 62% 6%,  #f0cd86 99%, transparent 100%);
  background-repeat:repeat;
  background-size:520px 520px;
  animation:starsTwinkle 7s ease-in-out infinite alternate;
}
.bg-stars-far{
  z-index:-3;
  background-size:360px 360px;
  opacity:.55;
  animation:starsTwinkle 11s ease-in-out infinite alternate-reverse,
            starsDrift  90s linear infinite;
}
@keyframes starsTwinkle{
  0%   {opacity:.45}
  50%  {opacity:1}
  100% {opacity:.55}
}
@keyframes starsDrift{
  from{background-position:0 0}
  to  {background-position:360px 180px}
}

/* Migla — dvi „dūmų" dėmės, lėtai slenkančios */
.bg-mist{
  position:fixed; inset:-10% -10% -10% -10%; z-index:-1; pointer-events:none;
  background:
    radial-gradient(40% 30% at 18% 28%, rgba(125,156,224,.10), transparent 70%),
    radial-gradient(35% 25% at 78% 70%, rgba(185,139,224,.09), transparent 70%),
    radial-gradient(30% 20% at 50% 92%, rgba(224,176,87,.07), transparent 70%);
  filter:blur(2px);
  animation:mistDrift 38s ease-in-out infinite alternate;
}
@keyframes mistDrift{
  0%   {transform:translate3d(-2%,0,0) scale(1)}
  50%  {transform:translate3d(2%,-1%,0) scale(1.04)}
  100% {transform:translate3d(-1%,1%,0) scale(.98)}
}

/* #app šiek tiek labiau permatomas, kad žvaigždės būtų matomos */
#app{
  position:relative; z-index:1;
  background:linear-gradient(180deg,rgba(31,27,43,.42),rgba(21,19,28,.18));
}

/* ---------- glow ant pavadinimų ---------- */
.boot-title,
.auth-logo .big{
  text-shadow:0 0 18px rgba(224,176,87,.35), 0 0 38px rgba(224,176,87,.18);
  animation:goldGlow 4s ease-in-out infinite alternate;
}
@keyframes goldGlow{
  from{text-shadow:0 0 16px rgba(224,176,87,.28), 0 0 32px rgba(224,176,87,.14)}
  to  {text-shadow:0 0 24px rgba(224,176,87,.55), 0 0 48px rgba(224,176,87,.28)}
}

/* ---------- subtilus lift ant kortelių ir mygtukų ---------- */
.tile{transition:transform .18s ease, border-color .18s, box-shadow .18s}
.tile:hover{transform:translateY(-2px); border-color:var(--gold-dim);
  box-shadow:0 8px 22px rgba(0,0,0,.45), 0 0 0 1px rgba(224,176,87,.18)}
.tile:active{transform:translateY(0)}

.btn{transition:transform .08s, filter .15s, box-shadow .18s}
.btn.gold{box-shadow:0 4px 16px rgba(224,176,87,.18)}
.btn.gold:hover{filter:brightness(1.05);
  box-shadow:0 6px 22px rgba(224,176,87,.35)}

/* ---------- chips pulse ant svarbiausių rodiklių ---------- */
.chip.hp{position:relative}
.chip.hp::after{content:'';position:absolute;inset:-1px;border-radius:inherit;
  border:1px solid transparent;pointer-events:none;transition:border-color .3s}

/* ====================== VIEW PERĖJIMAI (etapas 2) ====================== */
.view-in{animation:viewIn .28s cubic-bezier(.22,.61,.36,1) both}
@keyframes viewIn{
  from{opacity:0; transform:translateY(10px) scale(.995); filter:blur(2px)}
  to  {opacity:1; transform:none; filter:none}
}

/* Mygtukai ir kortelės kortelėje turi staggered fade — labai subtilus */
.view-in .tile,
.view-in .card,
.view-in .shop-item{animation:childIn .42s ease-out both}
.view-in .tile:nth-child(1){animation-delay:.02s}
.view-in .tile:nth-child(2){animation-delay:.05s}
.view-in .tile:nth-child(3){animation-delay:.08s}
.view-in .tile:nth-child(4){animation-delay:.11s}
.view-in .tile:nth-child(5){animation-delay:.14s}
.view-in .tile:nth-child(6){animation-delay:.17s}
.view-in .tile:nth-child(7){animation-delay:.20s}
.view-in .tile:nth-child(8){animation-delay:.23s}
@keyframes childIn{
  from{opacity:0; transform:translateY(6px)}
  to  {opacity:1; transform:none}
}

/* Header pulse — kai HP juosta atsinaujina */
.bar i{transition:width .35s cubic-bezier(.4,0,.2,1)}

/* ====================== KOVOS POLISH (etapas 3) ======================== */
/* Visa kovos arena krūpteli kai žaidėjas gauna smūgį */
.combat.screen-shake{animation:screenShake .42s cubic-bezier(.36,.07,.19,.97)}
@keyframes screenShake{
  10%,90%{transform:translate3d(-1px,0,0)}
  20%,80%{transform:translate3d(2px,0,0)}
  30%,50%,70%{transform:translate3d(-3px,1px,0)}
  40%,60%{transform:translate3d(3px,-1px,0)}
}

/* Floating skaičiai — labiau ryškūs, ilgesnė trajektorija */
.float{text-shadow:0 2px 8px rgba(0,0,0,.6), 0 0 18px rgba(0,0,0,.4)}
.float.crit{text-shadow:0 2px 12px rgba(0,0,0,.7), 0 0 22px rgba(224,176,87,.6);
  animation:floatupCrit 1.3s ease forwards}
.float.heal{text-shadow:0 2px 10px rgba(0,0,0,.6), 0 0 22px rgba(103,193,137,.5)}
@keyframes floatupCrit{
  0%  {opacity:0; transform:translateY(10px) scale(.6) rotate(-3deg)}
  15% {opacity:1; transform:translateY(0) scale(1.2) rotate(2deg)}
  25% {transform:translateY(-4px) scale(1) rotate(0)}
  100%{opacity:0; transform:translateY(-44px) scale(1) rotate(0)}
}

/* Attack mygtuko subtle pulse — kviečia paspausti */
.combat-actions .btn.attack:not(:disabled){
  animation:attackPulse 2.2s ease-in-out infinite;
  position:relative; overflow:hidden;
}
.combat-actions .btn.attack:not(:disabled)::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(110deg, transparent 30%, rgba(255,255,255,.22) 50%, transparent 70%);
  transform:translateX(-100%);
  animation:attackShine 3.6s ease-in-out infinite;
}
@keyframes attackPulse{
  0%,100%{box-shadow:0 4px 16px rgba(224,176,87,.18)}
  50%    {box-shadow:0 6px 24px rgba(224,176,87,.45), 0 0 0 2px rgba(224,176,87,.18)}
}
@keyframes attackShine{
  0%,75%{transform:translateX(-100%)}
  100%  {transform:translateX(100%)}
}

/* HP juosta — pulsuoja raudonai, kai HP žemas */
.fighter .hpline .bar.hp i{transition:width .35s cubic-bezier(.4,0,.2,1), background .3s}
.fighter.low-hp .hpline .bar.hp i{animation:lowHpPulse 1.1s ease-in-out infinite}
@keyframes lowHpPulse{
  0%,100%{filter:brightness(1)}
  50%    {filter:brightness(1.6) drop-shadow(0 0 6px rgba(216,85,106,.7))}
}

/* ====================== ZONŲ VINJETĖS (etapas 4) ======================= */
.zone-scene{
  width:100%; height:120px; border-radius:var(--r);
  border:1px solid var(--border);
  background:#0e0c14 center / cover no-repeat;
  margin-bottom:10px; position:relative; overflow:hidden;
  box-shadow:inset 0 -18px 30px rgba(0,0,0,.55);
}
.zone-scene::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(21,19,28,0) 50%, rgba(21,19,28,.55) 100%);
}
.zone-scene .zone-name{
  position:absolute; left:14px; bottom:10px; z-index:1;
  font-family:'Cinzel',serif; font-size:18px; color:var(--gold2);
  text-shadow:0 2px 8px rgba(0,0,0,.85), 0 0 14px rgba(0,0,0,.6);
  letter-spacing:.04em;
}
.zone-scene .zone-act{
  position:absolute; right:14px; bottom:12px; z-index:1;
  font-size:11px; color:var(--muted); letter-spacing:.08em;
  text-transform:uppercase;
  text-shadow:0 2px 6px rgba(0,0,0,.85);
}

/* Subtili „kvėpavimo" animacija ant zonos paveikslo */
.zone-scene{animation:zoneBreathe 12s ease-in-out infinite alternate}
@keyframes zoneBreathe{
  from{background-size:106% auto; background-position:center 50%}
  to  {background-size:112% auto; background-position:center 52%}
}

/* Pagarba sistemos nustatymams (reduce motion) */
@media (prefers-reduced-motion: reduce){
  .bg-stars,.bg-stars-far,.bg-mist,
  .boot-title,.auth-logo .big,
  .view-in,.view-in .tile,.view-in .card,.view-in .shop-item,
  .combat.screen-shake,.combat-actions .btn.attack,
  .combat-actions .btn.attack::after,.fighter.low-hp .hpline .bar.hp i,
  .zone-scene{animation:none !important}
}