/* ================= ŁOWCA DINOZAURÓW – wykopalisko =================
   Motyw: warstwy skalne (strata), płyty z odciskiem skamieniałości,
   bursztynowy akcent, tusz w kolorze petrol green. */

:root{
  --ink:#123C38;
  --ink-soft:#3E635E;
  --amber:#F5A524;
  --amber-dk:#C97C0B;
  --paper:#F6EFE0;
  --paper-2:#EFE5D2;
  --stone:#E2D5BC;
  --stone-dk:#CBB998;
  --line:#D6C6A8;
  --shadow:0 2px 0 rgba(18,60,56,.10), 0 8px 22px rgba(18,60,56,.10);
  --r:18px;
  --font-h:'Baloo 2', 'Trebuchet MS', system-ui, sans-serif;
  --font-b:'Nunito', system-ui, -apple-system, sans-serif;
}

*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{margin:0;padding:0}
body{
  font-family:var(--font-b);
  color:var(--ink);
  background:var(--paper);
  -webkit-tap-highlight-color:transparent;
  overflow-x:hidden;
}
h1,h2,h3,strong.big{font-family:var(--font-h);letter-spacing:.2px}
button{font-family:inherit;cursor:pointer}
.wrap{max-width:1080px;margin:0 auto;padding:0 16px}

/* --- tło: warstwy skalne --- */
.strata{
  position:fixed;inset:0;z-index:-1;
  background:
    linear-gradient(#F8F2E5 0 42%, #F2E9D6 42% 58%, #EADFC7 58% 72%, #E3D5B9 72% 84%, #D9C9A9 84% 100%);
}
.strata::after{
  content:'';position:absolute;inset:0;
  background-image:
    radial-gradient(circle at 12% 68%, rgba(160,132,92,.20) 0 6px, transparent 7px),
    radial-gradient(circle at 78% 76%, rgba(160,132,92,.16) 0 9px, transparent 10px),
    radial-gradient(circle at 40% 88%, rgba(140,112,72,.16) 0 5px, transparent 6px),
    radial-gradient(circle at 62% 94%, rgba(140,112,72,.13) 0 11px, transparent 12px),
    radial-gradient(circle at 22% 92%, rgba(140,112,72,.13) 0 7px, transparent 8px);
}

/* ================= NAGŁÓWEK ================= */
.top{
  background:var(--ink);
  color:#F6EFE0;
  border-bottom:5px solid var(--amber);
  position:sticky;top:0;z-index:40;
  box-shadow:0 6px 18px rgba(18,60,56,.22);
}
.top-in{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 16px}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.brand-badge{width:38px;height:38px;flex:0 0 auto;display:grid;place-items:center;
  background:rgba(255,255,255,.12);border-radius:14px;padding:4px}
.brand-badge svg{width:100%;height:100%;display:block;filter:drop-shadow(0 2px 0 rgba(0,0,0,.25))}
.brand h1{font-size:clamp(17px,5vw,22px);margin:0;line-height:1.05;white-space:nowrap;color:#FFF6E4}
.top-actions{display:flex;gap:8px;flex:0 0 auto}
.icon-btn{
  background:rgba(255,255,255,.10);color:#F6EFE0;border:2px solid rgba(255,255,255,.20);
  border-radius:12px;padding:7px 11px;font-weight:800;font-size:13px;
  display:flex;align-items:center;gap:6px;transition:.15s;
}
.icon-btn svg{width:18px;height:18px;display:block;flex:0 0 auto}
.icon-btn span{display:none}
@media(min-width:560px){.icon-btn span{display:inline}}
.icon-btn:hover{background:rgba(255,255,255,.2)}
.icon-btn.on{background:var(--amber);border-color:var(--amber);color:#3A2405}

/* ================= ŁOWY ================= */
.hunt{padding:20px 0 4px;text-align:center}
.search-pill{
  display:flex;align-items:center;gap:8px;
  background:#fff;border:3px solid var(--ink);border-radius:999px;
  padding:5px 5px 5px 16px;box-shadow:var(--shadow);
  max-width:560px;margin:0 auto;transition:.15s;
}
.search-pill:focus-within{box-shadow:0 0 0 4px rgba(245,165,36,.35), var(--shadow)}
.search-pill.shake{animation:shake .45s}
@keyframes shake{
  0%,100%{transform:translateX(0)} 20%{transform:translateX(-9px)}
  40%{transform:translateX(8px)} 60%{transform:translateX(-5px)} 80%{transform:translateX(3px)}
}
.mag{font-size:18px;opacity:.55}
#q{
  flex:1;min-width:0;border:0;outline:0;background:transparent;
  font:700 17px/1.2 var(--font-b);color:var(--ink);padding:10px 0;
}
#q::placeholder{color:#9AA9A4;font-weight:600}
.go{
  background:var(--amber);border:0;border-radius:999px;
  padding:11px 22px;font:800 16px var(--font-h);color:#3A2405;
  box-shadow:0 3px 0 var(--amber-dk);transition:.1s;
}
.go:active{transform:translateY(2px);box-shadow:0 1px 0 var(--amber-dk)}

.sugg{
  max-width:560px;margin:8px auto 0;background:#fff;border:2px solid var(--line);
  border-radius:14px;overflow:hidden;box-shadow:var(--shadow);text-align:left;
}
.sugg button{
  display:flex;width:100%;align-items:center;gap:10px;background:none;border:0;
  padding:9px 14px;font:700 15px var(--font-b);color:var(--ink);border-bottom:1px solid var(--paper-2);
}
.sugg button:last-child{border-bottom:0}
.sugg button:hover{background:var(--paper-2)}
.sugg .s-lat{font-weight:400;font-size:12px;color:#8C9A96;font-style:italic}
.sugg .s-got{margin-left:auto;font-size:12px;color:#5E8F55;font-weight:800}

.hunt-msg{min-height:22px;margin:10px 0 0;font-weight:800;font-size:15px;color:var(--ink-soft)}
.hunt-msg.bad{color:#B24A34}
.hunt-msg.good{color:#3F7A3A}

/* ================= POSTĘP ================= */
.progress-card{
  background:#fff;border:3px solid var(--ink);border-radius:var(--r);
  padding:14px 16px 12px;margin:16px 0 18px;box-shadow:var(--shadow);
}
.pc-head{display:flex;align-items:center;gap:12px}
.pc-egg{width:46px;height:46px;flex:0 0 auto}
.pc-egg svg{width:100%;height:100%;display:block}
.pc-txt{display:flex;flex-direction:column;line-height:1.15}
.pc-txt strong{font-family:var(--font-h);font-size:26px}
.pc-txt span{font-size:13px;color:var(--ink-soft);font-weight:700}
.pc-rank{
  margin-left:auto;background:var(--paper-2);border:2px solid var(--line);
  border-radius:999px;padding:6px 13px;font:800 13px var(--font-b);color:var(--ink-soft);
  text-align:center;
}

/* pasek postępu = warstwa skalna, w której odkrywasz jaja */
.rockbar{
  position:relative;height:26px;margin-top:12px;border-radius:999px;overflow:visible;
  background:
    repeating-linear-gradient(90deg, #DCCDB0 0 12px, #D5C4A4 12px 24px),
    #DCCDB0;
  border:2px solid var(--stone-dk);
  box-shadow:inset 0 3px 6px rgba(90,70,40,.18);
}
.rock-fill{
  position:absolute;inset:2px auto 2px 2px;width:0;border-radius:999px;
  background:linear-gradient(180deg,#FFC661,var(--amber) 55%,#DE8E10);
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.10);
  transition:width .7s cubic-bezier(.3,1.4,.5,1);
}
.rock-marks{position:absolute;inset:0}
.rock-marks i{
  position:absolute;top:50%;translate:-50% -50%;
  width:24px;height:24px;display:block;transition:.35s;opacity:.42;
}
.rock-marks i svg{width:100%;height:100%;display:block}
.rock-marks i.hit{opacity:1;scale:1.3;filter:drop-shadow(0 0 6px rgba(255,240,190,.95))}
.pc-note{margin:9px 0 0;font-size:12px;color:#8C9A96;text-align:center;font-weight:600}

/* ================= FILTRY ================= */
.filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:14px}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{
  background:#fff;border:2px solid var(--line);border-radius:999px;
  padding:7px 14px;font:800 13px var(--font-b);color:var(--ink-soft);transition:.12s;
}
.chip:hover{border-color:var(--stone-dk)}
.chip.on{background:var(--ink);border-color:var(--ink);color:#FFF6E4}
.chip b{opacity:.6;font-weight:800;margin-left:5px;font-size:11px}
.miss{margin-left:auto;display:flex;align-items:center;gap:7px;font-weight:800;font-size:13px;color:var(--ink-soft);cursor:pointer}
.miss input{width:17px;height:17px;accent-color:var(--ink)}

/* ================= SIATKA ================= */
.grid{
  display:grid;gap:10px;
  grid-template-columns:repeat(auto-fill,minmax(112px,1fr));
  padding-bottom:8px;
}
@media(min-width:640px){.grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}}

.tile{
  position:relative;background:#fff;border:2px solid var(--line);border-radius:16px;
  padding:8px 6px 7px;text-align:center;transition:.14s;overflow:hidden;
  box-shadow:0 2px 0 rgba(18,60,56,.07);
}
/* płyta z odciskiem skamieniałości dla niezłapanych */
.tile.ghost{
  background:
    repeating-linear-gradient(115deg, rgba(203,185,152,.30) 0 8px, rgba(203,185,152,0) 8px 17px),
    var(--paper-2);
  border-style:dashed;border-color:var(--stone-dk);
}
.tile:hover{transform:translateY(-3px);border-color:var(--ink);box-shadow:0 6px 16px rgba(18,60,56,.16)}
.tile .art{display:block;width:100%;aspect-ratio:200/140}
.tile .art svg{width:100%;height:100%;display:block}
.tile .nm{
  display:block;margin-top:3px;font:800 12.5px/1.15 var(--font-b);color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.tile.ghost .nm{color:#9A8B70;font-weight:800;letter-spacing:1px}
.tile .no{position:absolute;top:5px;left:7px;font:800 10px var(--font-b);color:#BCAF93}
.rar{position:absolute;top:5px;right:6px;display:flex;gap:1.5px}
.rar i{width:5px;height:5px;border-radius:50%;background:var(--amber);display:block}
.tile.ghost .rar i{background:#C6B593}
.tile.ghost .grp{opacity:.45}
.tile .grp{
  position:absolute;bottom:6px;right:6px;width:9px;height:9px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.75);
}
.tile .del{
  position:absolute;top:4px;right:4px;width:22px;height:22px;border-radius:50%;
  background:#C4523C;color:#fff;border:0;font:900 12px var(--font-b);display:none;z-index:2;
}
body.editing .tile .del{display:block}
body.editing .rar{display:none}
.tile.fresh{animation:pop .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes pop{0%{transform:scale(.3) rotate(-14deg);opacity:0}100%{transform:none;opacity:1}}

.empty{text-align:center;color:#8C9A96;font-weight:700;padding:30px 0}
.foot{padding:22px 0 40px;text-align:center;color:#8C9A96;font-size:12.5px;font-weight:600;line-height:1.5}
.foot b{color:var(--ink-soft)}

/* ================= SCENA ŁAPANIA ================= */
.catch-scene{
  position:fixed;inset:0;z-index:80;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.scene-sky{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 42%, #2C6A63, #0E2E2B 72%);opacity:0;animation:fadeIn .3s forwards}
@keyframes fadeIn{to{opacity:1}}
.scene-ground{
  position:absolute;left:0;right:0;bottom:0;height:26%;
  background:linear-gradient(#8A6A44,#5E4527);
  box-shadow:inset 0 6px 0 rgba(0,0,0,.15);
}
.scene-target{
  position:relative;z-index:2;width:min(74vw,420px);aspect-ratio:200/140;
  opacity:0;transform:scale(.4);
}
.scene-target svg{width:100%;height:100%;display:block;filter:drop-shadow(0 12px 18px rgba(0,0,0,.4))}
.scene-target.silhouette{filter:brightness(0) invert(.18) sepia(1) saturate(.2)}
.scene-target.show{animation:reveal .8s cubic-bezier(.25,1.5,.45,1) forwards}
@keyframes reveal{0%{opacity:0;transform:scale(.35) rotate(-8deg)}60%{opacity:1;transform:scale(1.12) rotate(3deg)}100%{opacity:1;transform:scale(1)}}
.scene-target.idle{opacity:.55;transform:scale(.95);animation:sway 1.6s ease-in-out infinite}
@keyframes sway{0%,100%{transform:scale(.95) translateY(0)}50%{transform:scale(.95) translateY(-10px)}}

.scene-egg{
  position:absolute;z-index:3;width:min(20vw,92px);left:50%;bottom:10%;
  translate:-50% 0;opacity:0;
}
.scene-egg svg{width:100%;height:auto;display:block;filter:drop-shadow(0 6px 8px rgba(0,0,0,.35))}
.scene-egg.throw{animation:throwEgg .62s cubic-bezier(.3,.1,.7,.9) forwards}
@keyframes throwEgg{
  0%{opacity:1;bottom:2%;left:14%;transform:scale(.55) rotate(0)}
  55%{bottom:62%;left:36%;transform:scale(.9) rotate(320deg)}
  100%{opacity:1;bottom:34%;left:50%;transform:scale(1) rotate(720deg)}
}
.scene-egg.wobble,.scene-egg.gone{opacity:1;left:50%;bottom:34%;transform:scale(1)}
.scene-egg.wobble{animation:wob .42s ease-in-out 3}
@keyframes wob{0%,100%{rotate:0}25%{rotate:-17deg}75%{rotate:17deg}}
.scene-egg.gone{animation:eggPop .35s forwards}
@keyframes eggPop{to{opacity:0;transform:scale(1.5)}}

.scene-flash{
  position:absolute;z-index:4;width:26px;height:26px;border-radius:50%;
  left:50%;top:50%;translate:-50% -50%;background:#FFF3D0;opacity:0;
}
.scene-flash.on{animation:flash .7s ease-out forwards}
@keyframes flash{0%{opacity:1;transform:scale(0)}70%{opacity:.85}100%{opacity:0;transform:scale(34)}}

.scene-name{
  position:absolute;z-index:5;bottom:11%;left:0;right:0;text-align:center;margin:0;
  font:800 clamp(22px,6vw,40px) var(--font-h);color:#FFF6E4;
  text-shadow:0 3px 0 rgba(0,0,0,.35);opacity:0;
}
.scene-name.show{animation:nameIn .5s .1s forwards}
@keyframes nameIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.scene-hint{
  position:absolute;z-index:5;bottom:5%;left:0;right:0;text-align:center;margin:0;
  font:700 13px var(--font-b);color:#9EC4BC;
}

.confetti{position:absolute;inset:0;z-index:6;pointer-events:none}
.confetti i{position:absolute;width:11px;height:15px;border-radius:2px;opacity:0}
.confetti i.go{animation:conf 1.5s cubic-bezier(.2,.7,.4,1) forwards}
@keyframes conf{
  0%{opacity:1;transform:translate(0,0) rotate(0)}
  100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--rot))}
}

/* ================= MODAL ================= */
.modal{
  position:fixed;inset:0;z-index:90;background:rgba(12,36,33,.62);
  display:flex;align-items:center;justify-content:center;padding:16px;
  animation:fadeIn .18s;overflow-y:auto;
}
.modal-card{
  position:relative;background:var(--paper);border:3px solid var(--ink);border-radius:22px;
  width:min(520px,100%);max-height:92vh;overflow-y:auto;
  box-shadow:0 20px 50px rgba(0,0,0,.35);animation:cardIn .28s cubic-bezier(.25,1.4,.5,1);
}
@keyframes cardIn{from{transform:scale(.88) translateY(14px);opacity:0}}
.close{
  position:absolute;top:10px;right:10px;z-index:3;width:34px;height:34px;border-radius:50%;
  background:#fff;border:2px solid var(--line);font:800 14px var(--font-b);color:var(--ink-soft);
}
.close:hover{background:var(--paper-2)}

.m-hero{
  background:linear-gradient(#EFE6D3,#E4D7BC);border-bottom:3px solid var(--ink);
  padding:14px 16px 6px;border-radius:19px 19px 0 0;
}
.m-hero .art{width:100%;aspect-ratio:200/140;max-height:210px}
.m-hero .art svg{width:100%;height:100%;display:block}
.m-body{padding:14px 18px 18px}
.m-body h2{margin:0;font-size:26px;line-height:1.1}
.m-lat{margin:2px 0 10px;font-style:italic;color:#8C9A96;font-weight:700;font-size:14px}
.m-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.tag{border-radius:999px;padding:5px 11px;font:800 12px var(--font-b);color:#fff}
.tag.light{background:#fff;color:var(--ink-soft);border:2px solid var(--line)}
.m-fact{
  background:#fff;border:2px solid var(--line);border-left:6px solid var(--amber);
  border-radius:12px;padding:11px 13px;font-size:14.5px;line-height:1.5;font-weight:600;
}
.m-fact b{display:block;font-family:var(--font-h);font-size:13px;color:var(--amber-dk);margin-bottom:2px;letter-spacing:.6px}
.m-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.stat{background:#fff;border:2px solid var(--line);border-radius:12px;padding:8px 11px}
.stat span{display:block;font-size:11px;color:#8C9A96;font-weight:800;letter-spacing:.5px}
.stat b{font-family:var(--font-h);font-size:19px}
.m-actions{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.btn{
  border:0;border-radius:12px;padding:11px 16px;font:800 14px var(--font-b);
  background:var(--ink);color:#FFF6E4;box-shadow:0 3px 0 rgba(0,0,0,.2);
}
.btn.amber{background:var(--amber);color:#3A2405;box-shadow:0 3px 0 var(--amber-dk)}
.btn.ghost{background:#fff;color:var(--ink-soft);border:2px solid var(--line);box-shadow:none}
.btn.danger{background:#C4523C;color:#fff}
.btn:active{transform:translateY(2px);box-shadow:none}

/* podpowiedź dla niezłapanego */
.m-hint{
  background:#fff;border:2px dashed var(--stone-dk);border-radius:14px;
  padding:14px;text-align:center;
}
.m-hint .q{font:800 40px var(--font-h);color:var(--stone-dk);margin:0 0 6px}
.m-hint p{margin:0;font-size:15.5px;font-weight:700;line-height:1.5}
.m-hint .lbl{font-size:11px;letter-spacing:1.4px;color:var(--amber-dk);font-weight:900;margin-bottom:6px}
.m-hunt{margin-top:14px}
.m-hint .more{margin-top:10px;font-size:13.5px;color:var(--ink-soft);font-weight:700}
.hint-fields{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:10px}
.hint-fields span{background:var(--paper-2);border-radius:999px;padding:4px 10px;font-size:12px;font-weight:800;color:var(--ink-soft)}

/* ================= TRYB RODZICA ================= */
.edit-bar{
  background:#FFF3D8;border:3px solid var(--amber);border-radius:var(--r);
  padding:13px 15px;margin-bottom:16px;
}
.edit-bar h3{margin:0 0 4px;font-size:17px}
.edit-bar p{margin:0 0 11px;font-size:13px;color:var(--ink-soft);font-weight:700}
.eb-row{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.eb-row input,.eb-row select{
  border:2px solid var(--line);border-radius:10px;padding:9px 11px;
  font:700 14px var(--font-b);color:var(--ink);background:#fff;min-width:0;
}
.eb-row input{flex:1 1 150px}
.eb-row select{flex:1 1 170px}
.eb-tools{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px;padding-top:11px;border-top:2px dashed #E3CFA2}

/* ================= ARENA ================= */
.modal.wide .modal-card{width:min(760px,100%)}
.arena{padding-top:44px}
.ar-slots,.fight-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center}
.ar-vs{font:900 22px var(--font-h);color:var(--amber-dk)}
.ar-slot{
  background:#fff;border:3px solid var(--line);border-radius:16px;padding:8px;text-align:center;
  display:flex;flex-direction:column;align-items:stretch;transition:.14s;min-width:0;
}
.ar-slot.active{border-color:var(--amber);box-shadow:0 0 0 4px rgba(245,165,36,.35)}
.ar-slot .who{font:800 13px var(--font-b);color:var(--ink-soft)}
.ar-slot .nm,.fighter .nm{font:800 14px var(--font-b);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-a .who{color:#2F6E8F}.side-b .who{color:#B65340}
.ar-slot .art,.fighter .art,.ar-pick .art{display:block;width:100%;aspect-ratio:200/140}
.ar-slot svg,.fighter svg,.ar-pick svg,.sugg .s-art svg{width:100%;height:100%;display:block}
.fighter.side-b .art{transform:scaleX(-1)}
.ar-bar{display:flex;gap:8px;align-items:stretch;justify-content:center;margin:12px 0 10px;flex-wrap:wrap}
.seg{display:flex;background:#fff;border:2px solid var(--line);border-radius:14px;padding:3px;gap:3px}
.seg button,.move{
  border:0;background:none;border-radius:11px;padding:6px 12px;font-size:24px;line-height:1;
  display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--ink-soft);
}
.seg button small,.move small{font:800 11px var(--font-b)}
.seg button.on{background:var(--ink);color:#FFF6E4}
.btn.big{font-size:18px;padding:12px 22px}
.btn.icon{font-size:24px;padding:6px 14px}
.ar-pick{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:7px;
  max-height:40vh;overflow-y:auto;padding:6px;background:var(--paper-2);border-radius:14px;
}
.ar-pick button{background:#fff;border:3px solid var(--line);border-radius:12px;padding:4px;text-align:center;min-width:0}
.ar-pick button.is-a{border-color:#2F6E8F}.ar-pick button.is-b{border-color:#B65340}
.ar-pick .nm{font:800 10.5px var(--font-b);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* paski statystyk z ikonami */
.sbars{display:grid;gap:3px;margin-top:6px}
.sbar{display:grid;grid-template-columns:20px 1fr 26px;align-items:center;gap:5px;font-size:13px}
.sbar i{height:8px;border-radius:99px;background:var(--paper-2);overflow:hidden}
.sbar b{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--amber),#D2764A)}
.sbar em{font:800 11px var(--font-b);font-style:normal;color:var(--ink-soft);text-align:right}
.m-body > .sbars{margin-top:12px;background:#fff;border:2px solid var(--line);border-radius:12px;padding:9px 11px}
.traits{font-size:12.5px;font-weight:800;color:var(--ink-soft);margin:8px 0 0}
.traits .record{white-space:nowrap}

/* walka */
.arena-banner{text-align:center;padding:9px 12px;border-radius:14px;background:#fff;border:2px solid var(--line);font:800 17px var(--font-h);margin-bottom:10px}
.arena-banner small{display:block;font:700 12px var(--font-b);color:var(--ink-soft)}
.fighter{position:relative;background:#fff;border:3px solid var(--line);border-radius:16px;padding:8px;text-align:center;min-width:0}
.fighter.side-a{border-color:#9DC3D3}.fighter.side-b{border-color:#E6B3A3}
.fighter.won{border-color:var(--amber);box-shadow:0 0 0 4px rgba(245,165,36,.4)}
.fighter.attacking{animation:lunge .34s ease-out}
.fighter.side-b.attacking{animation-name:lungeB}
.fighter.hit{animation:hit .32s ease-out}
@keyframes lunge{50%{transform:translateX(14px) scale(1.05)}}
@keyframes lungeB{50%{transform:translateX(-14px) scale(1.05)}}
@keyframes hit{20%{transform:translateX(-6px);filter:brightness(1.5) saturate(.4)}50%{transform:translateX(6px)}}
.hp{height:12px;border-radius:99px;background:var(--paper-2);overflow:hidden;margin-top:5px;border:1.5px solid var(--line)}
.hp i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#D9534A,#F1BC46,#55AD70);background-size:300% 100%;background-position:100% 0;transition:width .35s,background-position .35s}
.hpn{font:800 11px var(--font-b);color:var(--ink-soft);margin-top:2px}
.dmg{position:absolute;top:30%;left:0;right:0;font:900 28px var(--font-h);color:#C4523C;opacity:0;pointer-events:none;text-shadow:0 2px 0 #fff}
.dmg.heal{color:#3F7A3A}
.dmg.show{animation:dmgUp .8s ease-out}
@keyframes dmgUp{0%{opacity:0;transform:translateY(10px) scale(.6)}20%{opacity:1;transform:scale(1.15)}100%{opacity:0;transform:translateY(-30px)}}
.moves{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.move{background:var(--amber);color:#3A2405;box-shadow:0 4px 0 var(--amber-dk);font-size:34px;padding:10px 6px;animation:pop .3s}
.move:active{transform:translateY(3px);box-shadow:none}
.battle-log{margin-top:10px;background:var(--ink);color:#EAF4EF;border-radius:14px;padding:10px 12px;max-height:170px;overflow:auto;font-size:13px;line-height:1.45}
.battle-log div{padding:3px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.battle-log strong{color:#FFE08A}
.battle-result{margin-top:10px;text-align:center;border-radius:16px;padding:12px;background:#FFF3D8;border:3px solid var(--amber);animation:pop .4s}
.battle-result .winner{font:800 24px var(--font-h)}
.battle-result small{font-weight:800;color:var(--ink-soft)}
.m-actions.center{justify-content:center}

/* kolory kategorii */
.cat-dino{background:#4F7A4A}.cat-ptero{background:#6E8CA8}.cat-marine{background:#2F6E8F}.cat-mammal{background:#8C6A52}.cat-other{background:#A85B36}
.stat.wide{grid-column:1/-1}
.stat b.small{font:800 13px/1.35 var(--font-b);display:block}
.tag.letter{padding:11px 16px}
.sugg .s-art{width:54px;flex:0 0 auto;aspect-ratio:200/140}
.chip .emo{font-size:15px}
.icon-btn.holding{background:var(--amber);transition:background 1s}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}
/* arena 3D (js/arena3d.js): scena pod spodem, karty zawodników jako półprzezroczysta nakładka z paskami życia */
.stage3d{position:relative;height:clamp(290px,70vw,420px);border-radius:16px;overflow:hidden;border:2px solid var(--line);margin-bottom:10px}
.stage3d canvas{position:absolute;inset:0;display:block}
.v3d .fight-grid{position:absolute;top:6px;left:6px;right:6px;pointer-events:none}
.v3d .fighter{background:rgba(255,255,255,.82);padding:4px 8px;border-width:2px}
.v3d .fighter .art,.v3d .ar-vs{visibility:hidden;height:0}
.v3d .dmg{top:120%}