/* Codecave – robot evolution, level-up moment, Wall of Fame (js/evolve.js). Builds on the tokens in css/app.css.
   The "stage" is always the deep cave green (both themes): the robot is the light in the room. */
:root{--evo-st1:#24684F; --evo-st2:#0F3326; --evo-st-ink:#F5F9EC; --evo-spot:rgba(255,236,170,.30); --evo-gold:#FFC94A; --evo-gold-d:#B97C0E; --evo-peg:var(--line-2)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--evo-st1:#1E5A44; --evo-st2:#081A13; --evo-spot:rgba(255,236,170,.22)}}
:root[data-theme="dark"]{--evo-st1:#1E5A44; --evo-st2:#081A13; --evo-spot:rgba(255,236,170,.22)}
.evo-k{--evo-k:var(--ok)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .fx li.got span,:root:not([data-theme="light"]) .evo-k,:root:not([data-theme="light"]) .evo-prev li.now .evo-prev-at,:root:not([data-theme="light"]) .evo-path li.cur .ep-at{color:var(--lime)}}
:root[data-theme="dark"] .fx li.got span,:root[data-theme="dark"] .evo-k,:root[data-theme="dark"] .evo-prev li.now .evo-prev-at,:root[data-theme="dark"] .evo-path li.cur .ep-at{color:var(--lime)}

/* ---------- the figure ---------- */
.evo-fig{display:block;width:100%;height:auto;overflow:visible}
.evo-gglow{filter:drop-shadow(0 0 5px rgba(255,201,74,.85)) drop-shadow(0 0 14px rgba(255,201,74,.45))}
.evo-tw,.evo-flame,.evo-prop,.evo-gloss,.fm-gloss{transform-box:fill-box;transform-origin:center}
.evo-wing-l{transform-origin:86px 124px}
.evo-wing-r > g{transform-origin:86px 124px}
.evo-drone{transform-origin:166px 60px}
.evo-arm-r{transform-origin:121px 113px}
@media (prefers-reduced-motion: no-preference){
  .evo-pulse{animation:evo-pulse 2.4s ease-in-out infinite}
  .evo-tw{animation:evo-tw 2.6s ease-in-out infinite;animation-delay:var(--d,0s)}
  .evo-hover{animation:evo-bob 3s ease-in-out infinite}
  .evo-flame{animation:evo-flame .18s ease-in-out infinite alternate}
  .evo-wing-l,.evo-wing-r > g{animation:evo-flap 2.8s ease-in-out infinite}
  .evo-drone{animation:evo-drone 3.4s ease-in-out infinite}
  .evo-prop{animation:evo-prop .22s linear infinite alternate}
  .evo-gloss{animation:evo-gloss 3.8s ease-in-out infinite}
  .evo-halo{animation:evo-pulse 3s ease-in-out infinite}
  .fm-gloss{animation:evo-gloss2 5s ease-in-out infinite}
}
@keyframes evo-pulse{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes evo-tw{0%,100%{transform:scale(.35);opacity:.35}50%{transform:scale(1);opacity:1}}
@keyframes evo-bob{0%,100%{transform:translate(0,-8px)}50%{transform:translate(0,-13px)}}
@keyframes evo-flame{from{transform:scaleY(.8)}to{transform:scaleY(1.15)}}
@keyframes evo-flap{0%,100%{transform:rotate(0)}50%{transform:rotate(-7deg)}}
@keyframes evo-drone{0%,100%{transform:translate(0,0)}50%{transform:translate(-4px,-7px)}}
@keyframes evo-prop{from{transform:scaleX(1)}to{transform:scaleX(.3)}}
@keyframes evo-gloss{0%,55%{transform:translateX(0) skewX(-18deg)}85%,100%{transform:translateX(120px) skewX(-18deg)}}
@keyframes evo-gloss2{0%,70%{transform:translateX(0) skewX(-18deg)}100%{transform:translateX(170px) skewX(-18deg)}}

/* level chip (picker, parent area) */
.evo-chip{display:inline-flex;align-items:center;gap:6px;font:800 13px/1.1 var(--body);padding:3px 10px 3px 3px;border-radius:999px;background:var(--soft);color:var(--ink);white-space:nowrap;max-width:100%}
.evo-chip b{display:grid;place-items:center;min-width:22px;height:22px;border-radius:50%;background:var(--ink);color:var(--lime);font:400 13px/1 var(--display)}
.evo-chip.lv-5 b,.evo-chip.lv-6 b,.evo-chip.lv-7 b{background:var(--evo-gold);color:#3A2A00}
.evo-chip.lv-8 b,.evo-chip.lv-9 b,.evo-chip.lv-10 b{background:var(--sky);color:#0B2A3A}
.who-card .evo-chip{margin-top:-4px}

/* shared bits */
.evo-k{font:800 15px/1.2 var(--body);color:var(--ok)}
.evo-bar{position:relative;height:14px;border-radius:999px;background:var(--soft);overflow:hidden;box-shadow:inset 0 0 0 2px var(--line)}
.evo-bar i{position:absolute;inset:0 auto 0 0;border-radius:999px;background:linear-gradient(90deg,var(--lime-shadow),var(--lime) 70%,#F2FFD0);box-shadow:inset 0 -3px 0 rgba(18,61,47,.18);min-width:14px}
.evo-bar-lg{height:20px}
.evo-next{font-weight:800;color:var(--ink-2);margin-top:8px}

/* ---------- map: level header ---------- */
.evo-card{display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:center;background:var(--surface);border:2px solid var(--line);border-radius:28px;padding:14px 24px 14px 14px;margin:0 0 22px;box-shadow:var(--shadow)}
.evo-card-fig{position:relative;display:block;width:170px;text-decoration:none;border-radius:22px}
.evo-stagelet{display:block;border-radius:22px;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.07);padding:6px 10px 0;background:radial-gradient(ellipse 60% 70% at 50% 12%,var(--evo-spot),transparent 70%),linear-gradient(180deg,var(--evo-st1),var(--evo-st2))}
.evo-stagelet .evo-fig{margin-bottom:-4px}
.evo-lvnum{position:absolute;right:-10px;bottom:-8px;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--lime);color:var(--lime-ink);font:400 28px/1 var(--display);border:4px solid var(--surface);box-shadow:0 4px 0 var(--lime-shadow)}
.evo-card-txt{display:flex;flex-direction:column;gap:6px;min-width:0}
.evo-card-txt h2{font-size:clamp(30px,4vw,44px);color:var(--ink)}
.evo-card-txt .evo-bar{max-width:460px;margin-top:6px}
.evo-fame-btn{align-self:flex-start;margin-top:6px}
.evo-fame-btn .ic{width:20px;height:20px}
.evo-card-next{display:flex;gap:10px}
.evo-mini{display:flex;flex-direction:column;align-items:center;gap:2px;width:92px;font:800 12.5px/1.2 var(--body);color:var(--muted);text-align:center}
.evo-mini-fig{display:block;width:84px;border-radius:18px;background:var(--soft-2);padding:4px 4px 0;border:2px dashed var(--line-2)}
.evo-link .ic{width:20px;height:20px;color:var(--ok)}
@media (max-width:760px){.evo-card{grid-template-columns:auto 1fr}.evo-card-next{display:none}}
@media (min-width:761px) and (max-width:1000px){.evo-card-fig{width:150px}.evo-mini{width:80px}.evo-mini-fig{width:74px}}
@media (max-width:560px){
  .evo-card{gap:14px;padding:10px 14px 12px 10px;border-radius:24px}
  .evo-card-fig{width:112px}
  .evo-lvnum{width:40px;height:40px;font-size:22px;right:-8px;bottom:-6px;border-width:3px}
  .evo-card-txt h2{font-size:26px}
  .evo-k{font-size:13.5px}
  .evo-next{font-size:14.5px;line-height:1.35}
  .evo-fame-btn{min-height:44px;padding:10px 16px;font-size:15px}
}

/* ---------- collection: preview row ---------- */
.evo-panel{background:var(--surface);border:2px solid var(--line);border-radius:28px;padding:20px 22px 22px;margin:0 0 26px;display:flex;flex-direction:column;gap:12px}
.evo-panel-h{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap}
.evo-panel-h h2{font-size:clamp(24px,3vw,32px)}
.evo-panel .evo-bar{max-width:520px}
.evo-prev{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.evo-prev:has(> li:only-child){grid-template-columns:minmax(0,220px)}
.evo-prev li{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;font-weight:800}
.evo-prev b{font:400 20px/1.1 var(--display)}
.evo-prev-fig{display:block;width:100%;max-width:190px;border-radius:22px;padding:8px 8px 0;background:radial-gradient(ellipse 60% 70% at 50% 12%,var(--evo-spot),transparent 70%),linear-gradient(180deg,var(--evo-st1),var(--evo-st2))}
.evo-prev li.next .evo-prev-fig{background:var(--soft-2);border:2px dashed var(--line-2)}
.evo-prev-at{font-size:13.5px;color:var(--muted);display:inline-flex;gap:4px;align-items:center}
.evo-prev li.now .evo-prev-at{color:var(--ok)}
@media (max-width:560px){.evo-prev{gap:8px}.evo-prev b{font-size:15px}.evo-prev-at{font-size:12px}.evo-prev-fig{border-radius:16px;padding:4px 4px 0}}

/* ---------- badge screen teaser ---------- */
.evo-tease{display:flex;gap:14px;align-items:center;padding:12px 16px 12px 12px;border-radius:22px;background:var(--soft-2);border:2px solid var(--line);text-decoration:none;color:var(--ink)}
.evo-tease > span:last-child{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.evo-tease b{font:400 20px/1.15 var(--display)}
.evo-tease .evo-bar{height:10px;margin-top:4px}
.et-fig{position:relative;flex:none;width:78px;border-radius:16px;padding:4px 4px 0;background:linear-gradient(180deg,var(--evo-st1),var(--evo-st2))}
.evo-tease.up{background:linear-gradient(120deg,#FFF4CF,#E8F9C6);border-color:var(--evo-gold)}
.evo-tease.up .et-fig .evo-fig{filter:brightness(0) invert(1) opacity(.9) drop-shadow(0 0 8px #FFE58A)}
.evo-tease.up .et-fig i{position:absolute;inset:0;display:grid;place-items:center;font:400 40px/1 var(--display);font-style:normal;color:var(--sun-shadow)}
.evo-tease.up b,.evo-tease.up span{color:#123D2F}
@media (prefers-reduced-motion: no-preference){.evo-tease.up .et-fig{animation:evo-shake 1.4s ease-in-out infinite}}
@keyframes evo-shake{0%,70%,100%{transform:rotate(0)}75%{transform:rotate(-5deg)}85%{transform:rotate(5deg)}95%{transform:rotate(-2deg)}}

/* ---------- certificate figure ---------- */
.evo-cert-fig{display:flex;flex-direction:column;align-items:center;gap:2px;width:110px}
.evo-cert-lv{font:800 12px/1.2 var(--body);color:#3E5B4C;white-space:nowrap}

/* ---------- Wall of Fame ---------- */
.fame-head .pill .ic{width:18px;height:18px}
.fame-head .row{gap:8px}
.fame-stage{position:relative;display:grid;grid-template-columns:minmax(260px,400px) 1fr;gap:28px;align-items:end;padding:28px 36px 0;border-radius:32px;overflow:hidden;color:var(--evo-st-ink);
  background:radial-gradient(ellipse 34% 75% at 24% 0,var(--evo-spot),transparent 72%),radial-gradient(circle at 85% 20%,rgba(201,242,122,.10),transparent 40%),linear-gradient(180deg,var(--evo-st1),var(--evo-st2) 85%);
  margin-bottom:34px;print-color-adjust:exact;-webkit-print-color-adjust:exact}
.fame-stage::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.55) 1px,transparent 1.4px),radial-gradient(rgba(255,255,255,.35) 1px,transparent 1.4px);background-size:90px 70px,53px 61px;background-position:10px 12px,40px 30px;opacity:.35;pointer-events:none;mask-image:linear-gradient(180deg,#000,transparent 70%)}
.fs-robot{position:relative;display:flex;flex-direction:column;align-items:center}
.fs-fig{width:min(100%,340px);position:relative;z-index:1;margin-bottom:-26px}
.fs-podium{position:relative;width:min(100%,330px);height:96px;display:grid;place-items:center;
  background:linear-gradient(180deg,#F5F9EC 0 16px,#C9F27A 16px 22px,#E8F3E6 22px);clip-path:polygon(6% 0,94% 0,100% 100%,0 100%);border-radius:10px 10px 0 0}
.fs-podium b{font:400 58px/1 var(--display);color:#123D2F;margin-top:20px;text-shadow:0 3px 0 rgba(18,61,47,.12)}
.fs-info{display:flex;flex-direction:column;gap:8px;padding-bottom:30px;min-width:0}
.fs-info .evo-k{color:var(--lime)}
.fs-info h2{font-size:clamp(42px,6.4vw,84px);color:#fff;letter-spacing:.5px;text-shadow:0 4px 0 rgba(0,0,0,.18)}
.fs-u{font-weight:800;font-size:18px;color:#D9EFD2}
.fs-info .evo-bar{background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 2px rgba(255,255,255,.18);max-width:520px;margin-top:8px}
.fs-info .evo-next{color:#E8F3E6}
.fs-totals{display:flex;flex-wrap:wrap;gap:12px;margin:12px 0 0}
.fs-totals > div{background:rgba(255,255,255,.09);border:1.5px solid rgba(255,255,255,.16);border-radius:20px;padding:10px 18px;display:flex;flex-direction:column-reverse;gap:2px;min-width:110px}
.fs-totals dt{font-weight:800;font-size:14px;color:#CFE6D2}
.fs-totals dd{margin:0;font:400 38px/1 var(--display);color:#fff}
.fs-medals dd{display:flex;gap:12px;font-size:26px;align-items:center}
.fs-medals dd > span{display:inline-flex;align-items:center;gap:4px}
.fs-medals .medal-svg{width:26px;height:30px}
@media (max-width:820px){
  .fame-stage{grid-template-columns:1fr;padding:22px 18px 0;gap:6px;text-align:center;justify-items:center;border-radius:26px}
  .fs-fig{width:min(76vw,300px)}
  .fs-podium{width:min(80vw,300px);height:80px}.fs-podium b{font-size:46px;margin-top:16px}
  .fs-info{align-items:center;padding:16px 0 22px}
  .fs-info .evo-bar{width:100%}
  .fs-totals{justify-content:center}
}
@media (min-width:821px) and (max-width:1180px) and (orientation:portrait){.fame-stage{grid-template-columns:1fr}}
@media (max-width:420px){.fs-totals > div{min-width:0;padding:8px 12px}.fs-totals dd{font-size:30px}.fs-medals dd{font-size:21px;gap:8px}}

/* journey */
.fame-path{margin-bottom:34px}
.evo-path{list-style:none;margin:0 0 10px;padding:4px 2px 14px;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(118px,1fr);gap:12px;overflow-x:auto;scroll-snap-type:x proximity;overscroll-behavior-x:contain}
.evo-path li{scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;text-align:center;gap:3px;padding:8px 6px 10px;border-radius:22px;background:var(--surface);border:2px solid var(--line);position:relative}
.evo-path li + li::before{content:"";position:absolute;left:-14px;top:58px;width:14px;height:4px;border-radius:4px;background:var(--line-2)}
.evo-path li.got + li::before{background:var(--lime-shadow)}
.ep-fig{display:block;width:100%;max-width:120px;border-radius:16px;padding:4px 4px 0}
.evo-path li.got .ep-fig{background:linear-gradient(180deg,var(--evo-st1),var(--evo-st2))}
.evo-path li.cur{border-color:var(--lime-shadow);box-shadow:0 6px 0 var(--lime-shadow);background:var(--soft-2)}
.evo-path li.next{border-style:dashed;border-color:var(--line-2)}
.evo-path li.far .ep-fig .evo-fig{filter:brightness(0);opacity:.16}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .evo-path li.far .ep-fig .evo-fig{filter:brightness(0) invert(1);opacity:.14}}
:root[data-theme="dark"] .evo-path li.far .ep-fig .evo-fig{filter:brightness(0) invert(1);opacity:.14}
.evo-path b{font:400 17px/1.1 var(--display)}
.ep-at{font-weight:800;font-size:12.5px;color:var(--muted);display:inline-flex;align-items:center;gap:3px}
.evo-path li.cur .ep-at{color:var(--ok)}
.ep-u{font-size:12.5px;line-height:1.3;color:var(--ink-2)}
.evo-path li.far .ep-u{opacity:.75}

/* medal looks */
.fame-paint{margin-bottom:34px}
.fame-paint > .hint{margin:-6px 0 14px;max-width:62ch}
.fx{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.fx li{display:grid;grid-template-columns:30px 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;padding:10px 14px;border-radius:18px;background:var(--surface);border:2px dashed var(--line-2)}
.fx li .medal-svg{grid-row:1/3;width:30px;height:34px}
.fx li b{font-size:15px;line-height:1.2}
.fx li span{font-size:13px;color:var(--muted);font-weight:700}
.fx li.got{border-style:solid;border-color:var(--lime-shadow);background:var(--soft-2)}
.fx li.got span{color:var(--ok)}
.fx li:not(.got) .medal-svg{filter:grayscale(1);opacity:.45}

/* the wall: a pegboard with medals hanging on pins */
.fame-wall .sec-h .hint{font-family:var(--body);font-size:15px;font-weight:800;margin-left:6px}
.fm-empty{font-weight:800;color:var(--ink-2);margin-bottom:14px}
.fm-sec{margin-bottom:26px;border-radius:28px;padding:16px 18px 18px;background-color:var(--soft-2);
  background-image:radial-gradient(var(--evo-peg) 1.6px,transparent 2px);background-size:22px 22px;background-position:11px 11px;border:2px solid var(--line);print-color-adjust:exact;-webkit-print-color-adjust:exact}
.fm-sec h3{font-size:22px;display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;background:var(--surface);align-self:flex-start;padding:4px 14px;border-radius:12px;width:max-content;max-width:100%;margin-bottom:10px}
.fm-sec h3 span{font:800 14px/1 var(--body);color:var(--muted)}
.pegboard{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px 12px}
.peg{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;min-width:0}
.fm-svg{width:100%;max-width:118px;height:auto;display:block;overflow:visible}
.peg.tier-gold .fm-svg{filter:drop-shadow(0 6px 10px rgba(201,138,18,.35))}
.peg:not(.empty) .fm-svg{transform-origin:50% 4%}
@media (prefers-reduced-motion: no-preference){.peg:not(.empty):hover .fm-svg{animation:fm-swing 1.2s ease-in-out}}
@keyframes fm-swing{0%,100%{transform:rotate(0)}25%{transform:rotate(6deg)}55%{transform:rotate(-4deg)}80%{transform:rotate(2deg)}}
.peg b{font:400 16px/1.15 var(--display);margin-top:4px;overflow-wrap:anywhere}
.peg-t{font-size:12.5px;line-height:1.3;color:var(--ink-2);font-weight:700;overflow-wrap:anywhere}
.peg-d{font-size:12px;color:var(--muted);font-weight:700;display:flex;flex-direction:column;align-items:center;gap:2px}
.peg-tier{font-style:normal;font-weight:900;font-size:11.5px;padding:2px 8px;border-radius:999px;background:var(--soft);color:var(--ink)}
.tier-gold .peg-tier{background:#FFE9A6;color:#5C3B00}.tier-silver .peg-tier{background:#E6ECF0;color:#38434D}.tier-bronze .peg-tier{background:#F6D3B3;color:#5E3210}
.peg.empty b{color:var(--muted)}
.peg.empty .peg-t{color:var(--muted)}
.fm-pin{fill:var(--line-2)}.fm-string{stroke:var(--line-2)}.fm-hole{fill:var(--surface);stroke:var(--line-2)}.fm-num{fill:var(--line-2)}
@media (max-width:820px){.pegboard{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:560px){.fx{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.fx li{padding:8px 10px;grid-template-columns:24px 1fr;column-gap:8px}.fx li .medal-svg{width:24px;height:28px}.fx li b{font-size:13.5px}.fx li span{font-size:12px}
  .peg .peg-t{display:none}.peg.empty .peg-d{display:none}.pegboard{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 8px}.fm-sec{padding:12px 10px 14px;border-radius:22px}.peg b{font-size:14px}.peg-t{font-size:11.5px}}

/* ---------- level-up moment ---------- */
body.has-evo{overflow:hidden}
.evo-cele{position:fixed;inset:0;z-index:200;display:grid;place-items:center;overflow:auto;padding:24px 16px;color:var(--evo-st-ink);
  background:radial-gradient(ellipse 60% 55% at 50% 38%,#2E7A5C,transparent 75%),linear-gradient(180deg,#14402F,#071A12)}
.ec-rays{position:fixed;left:50%;top:40%;width:170vmax;height:170vmax;transform:translate(-50%,-50%);pointer-events:none;opacity:.5;
  background:repeating-conic-gradient(from 0deg,rgba(255,236,170,.22) 0 7deg,transparent 7deg 20deg);mask-image:radial-gradient(circle,#000 0,transparent 55%)}
.ec-skip{position:fixed;top:max(14px,env(safe-area-inset-top,0px));right:max(14px,env(safe-area-inset-right,0px));z-index:2;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:8px 16px;border-radius:999px;border:2px solid rgba(255,255,255,.3);background:rgba(0,0,0,.18);color:#fff;font-weight:800;cursor:pointer}
.ec-skip:hover{border-color:#fff}
.ec-in{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:min(10px,1.2vh);width:min(620px,100%)}
.ec-k{font:400 clamp(44px,min(11vw,11vh),110px)/.95 var(--display);color:var(--lime);text-shadow:0 6px 0 #0A2A1E,0 0 40px rgba(201,242,122,.45);transform:rotate(-3deg)}
.ec-morph{position:relative;width:min(300px,62vw,36vh);aspect-ratio:200/216}
.ec-before,.ec-after{position:absolute;inset:0}
.ec-tag{position:absolute;top:-4px;left:50%;transform:translateX(-50%);font:800 12px/1 var(--body);padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.14);display:none}
.ec-flash{position:absolute;left:50%;top:50%;width:10px;height:10px;border-radius:50%;transform:translate(-50%,-50%);background:#FFF8D6;opacity:0;pointer-events:none}
.ec-name{display:flex;flex-direction:column;align-items:center;gap:0}
.ec-name span{font-weight:800;color:#CFE6D2}
.ec-name b{font:400 clamp(34px,6vw,52px)/1.05 var(--display);color:#fff}
.ec-new{display:inline-flex;align-items:center;gap:8px;font-weight:900;font-size:18px;padding:8px 18px;border-radius:999px;background:var(--evo-gold);color:#3A2A00;box-shadow:0 4px 0 var(--evo-gold-d)}
.ec-bix{display:flex;gap:12px;align-items:flex-start;text-align:left;margin-top:6px;max-width:520px}
.ec-bix img{width:56px;height:56px;border-radius:16px;flex:none;object-fit:cover}
.ec-bix p{background:#fff;color:#123D2F;border-radius:6px 20px 20px 20px;padding:10px 14px;font-weight:800;line-height:1.4}
.ec-bix .say{vertical-align:middle}
.ec-go{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:8px}
.ec-go .ic{width:20px;height:20px}
.ec-ok{color:#fff;border-color:rgba(255,255,255,.4)}
.ec-ok:hover{border-color:#fff}
@media (prefers-reduced-motion: no-preference){
  .ec-rays{animation:ec-spin 40s linear infinite}
  .ec-k{animation:ec-pop .6s cubic-bezier(.3,1.7,.5,1) both}
  .ec-before{animation:ec-charge 1.3s ease-in forwards}
  .ec-flash{animation:ec-flash .9s ease-out 1.15s both}
  .ec-after{animation:ec-in .8s cubic-bezier(.3,1.6,.5,1) 1.3s both}
  .ec-after .evo-arm-r{animation:ec-wave .5s ease-in-out 2.1s 3 alternate}
  .ec-name,.ec-new,.ec-bix,.ec-go{animation:ec-up .5s ease-out both}
  .ec-name{animation-delay:1.7s}.ec-new{animation-delay:1.85s}.ec-bix{animation-delay:2s}.ec-go{animation-delay:2.1s}
}
@keyframes ec-spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes ec-pop{from{transform:scale(.3) rotate(-12deg);opacity:0}to{transform:scale(1) rotate(-3deg);opacity:1}}
@keyframes ec-charge{0%{transform:none;filter:none}60%{transform:translateX(-2px) scale(1.02)}70%{transform:translateX(3px) scale(1.04)}80%{transform:translateX(-3px) scale(1.06);filter:brightness(1.6)}95%{transform:scale(1.08);filter:brightness(3);opacity:1}100%{transform:scale(1.1);filter:brightness(4);opacity:0}}
@keyframes ec-flash{0%{opacity:0;width:10px;height:10px}20%{opacity:1}100%{opacity:0;width:150vmax;height:150vmax}}
@keyframes ec-in{from{transform:scale(.4) translateY(30px);opacity:0}to{transform:none;opacity:1}}
@keyframes ec-wave{from{transform:rotate(0)}to{transform:rotate(-28deg)}}
@keyframes ec-up{from{transform:translateY(16px);opacity:0}to{transform:none;opacity:1}}
/* reduced motion: before → after side by side, nothing flies */
@media (prefers-reduced-motion: reduce){
  .ec-morph{width:min(440px,86vw);aspect-ratio:auto;display:grid;grid-template-columns:2fr 3fr;align-items:end;gap:14px}
  .ec-before,.ec-after{position:relative;inset:auto;padding-top:18px}
  .ec-before{opacity:.8}
  .ec-before::after{content:"→";position:absolute;right:-16px;top:50%;font:400 30px/1 var(--display);color:var(--lime)}
  .ec-tag{display:block}
}
@media (max-height:700px){.ec-morph{width:min(220px,50vw)}.ec-k{font-size:52px}.ec-bix img{width:44px;height:44px}}

/* print: the Wall of Fame as a poster */
@page fame{size:A4 portrait;margin:10mm}
@media print{
  body[data-view="fame"] *{visibility:visible}
  body[data-view="fame"] main[data-view="fame"]{page:fame}
  body[data-view="fame"] .kid-top,body[data-view="fame"] .no-print,body[data-view="fame"] .fame-path .hint{display:none!important}
  body[data-view="fame"]{background:#fff}
  .fame-stage,.evo-path li,.fm-sec,.fx li{break-inside:avoid}
  .peg{break-inside:avoid}
  .evo-cele{display:none!important}
}
body.has-evo .confetti{z-index:210}