/* ================= ŁOWCA POKÉMONÓW – Pokédex =================
   Motyw: czerwony Pokédex, żółty akcent, łąka i niebo w tle; niezłapane = czarne sylwetki („Kto to za Pokémon?”). */

:root{
  --ink:#1F2A44;
  --ink-soft:#4A5878;
  --amber:#FFCB05;
  --amber-dk:#C7A008;
  --paper:#F3F6FC;
  --paper-2:#E6ECF6;
  --stone:#D5DEEC;
  --stone-dk:#AFBCD2;
  --line:#C9D3E4;
  --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}
:root{color-scheme:light dark}   /* „mam ciemny motyw”: telefon nie przyciemnia na siłę (auto-dark); kolory i tak jasne */
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(#DDEBFA 0 60%, #CFE6C4 60% 78%, #B9D9A8 78% 100%)}

/* ================= NAGŁÓWEK ================= */
.top{
  background:#D8262E;
  color:#fff;
  border-bottom:5px solid #1F2A44;
  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-ball{width:46px;height:46px;flex:0 0 auto}
.pc-ball 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:
    #E6ECF6;
  border:2px solid var(--stone-dk);
  box-shadow:inset 0 3px 6px rgba(31,42,68,.15);
}
.rock-fill{
  position:absolute;inset:2px auto 2px 2px;width:0;border-radius:999px;
  background:linear-gradient(180deg,#FFE066,var(--amber) 55%,#E0A800);
  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;flex:1 1 100%}   /* dwa rzędy: seria, typ */
@media(max-width:640px){.chips{flex-wrap:nowrap;overflow-x:auto;margin:0 -16px;padding:0 16px 4px;scrollbar-width:none}.chip{flex:0 0 auto}}   /* 19 typów: na telefonie przewijane w bok */
.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{appearance:none;margin:0;width:17px;height:17px;border:2px solid var(--ink-soft);border-radius:4px;background:#fff}   /* własny wygląd: ciemny motyw telefonu go nie zmienia */
.miss input:checked{background:var(--ink);box-shadow:inset 0 0 0 2px #fff}

/* ================= 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:
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:1}
.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;z-index:1;top:3px;left:5px;padding:0 3px;border-radius:5px;background:#fff;font:800 10px var(--font-b);color:#8C7E62}
.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);
}
/* tryb rodzica: dotknięcie łapie / wypuszcza */
body.editing .tile{cursor:pointer}
body.editing .tile.ghost:hover{border-color:var(--amber);border-style:solid}
body.editing .tile:not(.ghost):hover{border-color:#C4523C}
.tile{-webkit-touch-callout:none;user-select:none}
/* przytrzymana sylwetka: chwilowo kolor i imię */
.tile.peek{border-color:var(--amber);border-style:solid}
.tile.peek img.ghost,.tile.peek .cardback .win img{filter:none}
.tile.peek .nm{color:var(--ink);letter-spacing:0}
.ep-nav{display:flex;align-items:center;gap:8px;margin:0 38px 12px 0}   /* miejsce na ✕ */
.m-body.ep img.ghost{filter:none}   /* odcinek rozpoznaje się po kolorach; imię dalej ??? do przytrzymania */
.ep-nav h2{flex:1;text-align:center}
.ep-nav small{display:block;font:700 12px var(--font-b);color:var(--ink-soft);margin-top:2px}
.ep-list{display:grid;gap:6px;margin-top:12px}
.ep-row{display:flex;align-items:center;gap:4px;padding:4px 10px;background:#fff;border:2px solid var(--line);border-radius:12px}
.ep-row b{width:30px;font:800 18px var(--font-h);color:var(--ink)}
.ep-row img{width:52px;height:52px;image-rendering:pixelated}
.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%, #BFE3FF, #5FA8E8 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(#8CCB5E,#4E9A3A);
  box-shadow:inset 0 6px 0 rgba(0,0,0,.15);
}
.scene-target{
  position:relative;z-index:2;width:min(60vw,320px);aspect-ratio:1;
  opacity:0;transform:scale(.4);
}
.scene-target img{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-ball{
  position:absolute;z-index:3;width:min(20vw,92px);left:50%;bottom:10%;
  translate:-50% 0;opacity:0;
}
.scene-ball svg{width:100%;height:auto;display:block;filter:drop-shadow(0 6px 8px rgba(0,0,0,.35))}
.scene-ball.throw{animation:throwBall .62s cubic-bezier(.3,.1,.7,.9) forwards}
@keyframes throwBall{
  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-ball.wobble,.scene-ball.gone{opacity:1;left:50%;bottom:34%;transform:scale(1)}
.scene-ball.wobble{animation:wob .42s ease-in-out 3}
@keyframes wob{0%,100%{rotate:0}25%{rotate:-17deg}75%{rotate:17deg}}
.scene-ball.gone{animation:ballPop .35s forwards}
@keyframes ballPop{to{opacity:0;transform:scale(1.5)}}
.ball-top{transform-origin:6px 50px;animation:ballOpen .3s forwards}   /* otwarcie: góra odchyla się na zawiasie */
@keyframes ballOpen{to{transform:rotate(-40deg) translateY(-8px)}}

.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:1;max-height:210px}
/* karta z gry karcianej zamiast obrazka (przełącznik 🃏/🎨) */
.m-hero{position:relative}.m-hero .tcg{display:none;width:100%;max-width:480px;margin:0 auto 6px;border-radius:14px;box-shadow:0 6px 16px rgba(0,0,0,.3);cursor:zoom-in}
.m-hero.card .art{display:none}.m-hero.card .tcg{display:block}.m-hero .art{cursor:zoom-in}
.mode-seg{display:flex;gap:6px;margin:14px 0 0;background:#fff;border:3px solid var(--ink);border-radius:999px;padding:5px}
.mode-seg button{flex:1;border:0;border-radius:999px;padding:11px 8px;font:800 17px var(--font-h);background:none;color:var(--ink-soft)}
.mode-seg button.on{background:var(--ink);color:#fff}
.zoom{position:fixed;inset:0;z-index:120;background:rgba(10,14,28,.92);display:grid;place-items:center;padding:12px;cursor:zoom-out}
.zoom img{max-width:100%;max-height:100%;object-fit:contain;border-radius:18px}
.flip{position:absolute;left:12px;top:12px;z-index:2}
.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-vars{margin:10px 0}
.m-vars b{display:block;font-family:var(--font-h);font-size:13px;color:var(--amber-dk);margin-bottom:4px;letter-spacing:.6px}
.m-vars div{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px}   /* przewijane w bok: Charizard ma 8 */
.m-vars img{height:150px;border-radius:7px;cursor:zoom-in;flex:none}
.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:1}
.sugg .s-art img{width:100%;height:100%;display:block}
.fighter.side-b .art{transform:scaleX(-1)}
/* forma walki: Mega złota poświata, Tera kryształowa */
.mega .art img{filter:drop-shadow(0 0 7px #F5A524)}.tera .art img{filter:drop-shadow(0 0 7px #7FE3FF) saturate(1.2)}
/* Tera: kryształowe ścianki na samym Pokémonie (maska = jego obrazek, --m) */
.tera .art{position:relative}
.tera .art::after{content:'';position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(60deg,#FFF6 0 18%,#7FE3FF55 18% 34%,#0000 34% 52%,#FFF5 52% 66%,#7FE3FF44 66% 80%,#0000 80%),
    linear-gradient(-60deg,#0000 0 22%,#FFF4 22% 40%,#0000 40% 60%,#7FE3FF55 60% 76%,#0000 76%);
  -webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.ar-bar .form{white-space:nowrap}
.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(2,1fr);gap:8px;margin-top:10px}
.move{background:var(--tc);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.45);box-shadow:0 4px 0 rgba(0,0,0,.25);padding:10px 6px;animation:pop .3s;display:flex;flex-direction:column;gap:2px}
.move b{font:800 15px var(--font-b)}
.move:disabled{filter:grayscale(1);opacity:.5}
.stb{position:absolute;top:4px;right:6px;font-size:20px}
/* zmienione statystyki pod paskiem życia; poświata przy wzmocnieniu (czerwona) / osłabieniu (niebieska) */
.stg{display:flex;flex-wrap:wrap;justify-content:center;gap:3px;min-height:17px;margin-top:2px}
.stg i{font:800 11px/16px var(--font-b);font-style:normal;padding:0 5px;border-radius:99px;background:#FFE1D8;color:#B23A26;animation:pop .3s}
.stg i.dn{background:#DCE7FF;color:#2D52B0}
.fighter.buff{animation:buff .7s ease-out}
.fighter.debuff{animation:debuff .7s ease-out}
@keyframes buff{30%{box-shadow:0 0 0 6px rgba(255,106,90,.55),0 0 26px 8px rgba(255,170,60,.7);transform:scale(1.06) translateY(-4px)}}
@keyframes debuff{30%{box-shadow:0 0 0 6px rgba(90,140,255,.5),0 0 22px 6px rgba(90,140,255,.6);transform:scale(.96) translateY(3px)}}
.dmg.icon{font-size:40px}
.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)}
/* trening: znaczek ⭐+N (przyrost poziomu ponad 50), pasek EXP, świętowanie nowego poziomu */
.lvb{display:inline-block;padding:0 6px;border-radius:99px;background:var(--amber);color:#3A2600;font:900 11px/17px var(--font-b);vertical-align:middle;letter-spacing:0}
h2 .lvb{font-size:14px;line-height:22px;padding:0 9px}
.xpbar i b{background:linear-gradient(90deg,#F5A524,#FFD45C)}
.xpbar em{font-size:10px;letter-spacing:-.3px}
.tile .txp{display:block;font:900 10.5px/1.3 var(--font-b);color:#9A6A00}
.battle-result .xp-gain{margin-top:8px;font:800 14px var(--font-b);color:var(--ink-soft)}
.battle-result .xpbar{max-width:260px;margin:4px auto 0}
.lvup{margin:8px auto 0;padding:8px 12px;max-width:320px;border-radius:14px;background:#FFF1C7;border:2px solid var(--amber);font:800 15px var(--font-b);animation:pop .5s cubic-bezier(.3,1.6,.5,1)}
.lvup span{display:block;margin-top:3px;font-size:13px;color:var(--ink-soft)}
.battle-result small{font-weight:800;color:var(--ink-soft)}
.m-actions.center{justify-content:center}

/* kolory kategorii */
.art img{width:100%;height:100%;object-fit:contain;display:block}
.art img.px{image-rendering:pixelated}
img.ghost{filter:brightness(0) opacity(.7)}   /* sylwetka niezłapanego */
.tag.type{text-shadow:0 1px 1px rgba(0,0,0,.35)}
.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:1}
.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%}

/* ================= KARTY ================= */
.tile .art.tcgs{aspect-ratio:245/342}
.tile .art.tcgs img{border-radius:6px}
.cardback{display:flex;flex-direction:column;align-items:center;gap:6%;padding:8%;width:100%;height:100%;border-radius:8px;background:linear-gradient(135deg,#2C4FA8,#1B2F6B);border:4px solid #F2F4F8}
.cardback .win{flex:1;width:100%;display:grid;place-items:center;border-radius:6px;background:radial-gradient(#FFF 45%,#D5E0F7)}
.cardback .win img{width:92%;height:92%;object-fit:contain;filter:brightness(0)}
.cardback svg{width:26%;opacity:.85}
.duel{display:flex;flex-direction:column;gap:10px}
.dz{display:flex;align-items:flex-end;gap:10px;background:var(--paper-2);border-radius:16px;padding:10px}
.dz.cpu{flex-direction:row-reverse}
.d-active{position:relative;width:46%;flex:0 0 auto;transition:.2s}
.d-active img{width:100%;display:block;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.25)}
.d-empty{display:grid;place-items:center;aspect-ratio:245/342;border:3px dashed var(--line);border-radius:12px;font-size:40px;opacity:.6}
.d-active.hit{animation:shake .4s}
.d-active.go{translate:0 -10px}
.dz.cpu .d-active.go{translate:0 10px}
@keyframes shake{25%{rotate:-4deg}75%{rotate:4deg}}
.d-hp{height:9px;border-radius:9px;background:#fff;margin-top:6px;overflow:hidden}.d-hp i{display:block;height:100%;background:linear-gradient(90deg,#E8453C,#FFCB05,#5DBB63);background-size:300% 100%}
.d-info{display:flex;justify-content:space-between;font:800 12px var(--font-b);margin-top:3px}
.d-side{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0}
.d-bench{display:flex;gap:6px}
.d-bench button{width:31%;padding:0;border:2px solid transparent;border-radius:8px;background:none;position:relative}
.d-bench button img{width:100%;display:block;border-radius:6px}
.d-bench button.can{border-color:var(--amber);animation:pulse 1.2s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 4px rgba(255,203,5,.4)}}
.d-bench small{position:absolute;left:0;right:0;bottom:2px;font:800 10px var(--font-b);color:#fff;text-shadow:0 1px 2px #000}
.d-prizes{font:800 13px var(--font-b)}
.d-log{background:var(--ink);color:#fff;border-radius:12px;padding:8px 12px;font-size:13px;line-height:1.4;min-height:62px}
.d-log div{opacity:.6}.d-log div:last-child{opacity:1;font-weight:800}
.d-acts{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.d-acts .btn small{display:block;font-size:11px;opacity:.8}
.d-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.d-pick button{position:relative;padding:4px 4px 6px;border:3px solid var(--line);border-radius:12px;background:#fff;text-align:center;min-width:0}
.d-pick button.on{border-color:var(--amber);box-shadow:0 0 0 3px rgba(255,203,5,.4);background:#FFF8E1}
.d-pick .art{display:block;width:100%;aspect-ratio:1}
.d-pick .nm{display:block;font:800 12px var(--font-b);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.d-pick .nm i{font-style:normal;color:#B23A26}
.d-pick .st{display:block;font:800 11px var(--font-b);color:var(--ink-soft);white-space:nowrap}
.d-pick .no{position:absolute;top:4px;left:4px;width:22px;height:22px;border-radius:50%;background:var(--amber);color:#3A2600;font:900 13px/22px var(--font-b)}
.btn:disabled{opacity:.35;cursor:default;filter:grayscale(.6)}