:root{
  --bg:#0f1410; --card:#1c2420;
  --accent:#ff8a1f; --accent2:#ffb347;
  --ok:#4ade80; --dup:#60a5fa;
  --text:#e8ece6; --mute:#8a958c; --border:#2b3630;
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bot:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{background:var(--bg);height:auto;-webkit-text-size-adjust:100%}
body{margin:0;padding:0;background:var(--bg);color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:16px;overflow-x:hidden;
  touch-action:pan-y;-webkit-overflow-scrolling:touch;
  padding-bottom:calc(84px + var(--safe-bot))}

header{background:linear-gradient(180deg,#1a2219 0%,#131813 100%);
  border-bottom:1px solid var(--border);
  padding:calc(12px + var(--safe-top)) 16px 12px}
.title-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.title{font-size:15px;font-weight:700;letter-spacing:.5px;color:var(--accent);text-transform:uppercase;margin:0}
.me{display:flex;align-items:center;gap:6px;cursor:pointer;padding:2px 6px;border-radius:999px}
.me:active{background:rgba(255,255,255,.05)}
.me img{width:22px;height:22px;border-radius:50%;background:var(--card);object-fit:cover}
.me-name{font-size:11px;color:var(--mute);max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dot{width:8px;height:8px;border-radius:50%;background:#555;transition:background .2s}
.dot.online{background:var(--ok);box-shadow:0 0 6px var(--ok)}
.dot.syncing{background:var(--accent)}
.dot.readonly{background:var(--dup)}
.dot.err{background:#ff6a6a}

.subtitle{font-size:12px;color:var(--mute);margin:0 0 10px}
.stats{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.bar{flex:1;min-width:140px;height:10px;background:#0a0d0a;border-radius:6px;
  overflow:hidden;border:1px solid var(--border)}
.bar>i{display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--accent) 0%,var(--accent2) 100%);transition:width .3s}
.count{font-variant-numeric:tabular-nums;font-weight:700;font-size:14px}
.dup-chip{display:inline-flex;align-items:center;gap:5px;
  margin-left:10px;vertical-align:middle;
  padding:2px 9px 2px 7px;
  background:rgba(96,165,250,.08);
  border:1px solid rgba(96,165,250,.28);
  border-radius:999px;
  font-size:11px;color:var(--dup);
  font-weight:500;letter-spacing:.3px;
  line-height:1}
.dup-chip[hidden]{display:none}
.dup-chip svg{color:var(--dup);opacity:.85;flex-shrink:0}
.dup-chip b{font-weight:700;font-size:12px;color:#9ec5ff}
.dup-chip .dup-lbl{color:var(--dup);opacity:.75;font-size:10px;
  letter-spacing:.4px;text-transform:uppercase}

.top-badge{font-size:12px;color:var(--accent2);margin-top:6px;text-align:center;
  font-weight:600;letter-spacing:.3px;min-height:18px}

/* Appears once all 48 are owned — reopens the celebration overlay. Elegant
   glass pill with a subtle glow pulse so users notice it exists. Hidden until
   body.completed is toggled in app.js::updateProgress. */
.replay-completed{
  display:none;align-items:center;gap:10px;
  margin:4px auto 8px;
  padding:8px 18px 8px 16px;
  background:linear-gradient(135deg,rgba(255,122,74,.14),rgba(255,122,74,.04));
  border:1px solid rgba(255,122,74,.5);
  border-radius:999px;
  color:#ffb590;
  font:600 11px/1 system-ui,sans-serif;
  letter-spacing:.22em;
  text-transform:uppercase;
  cursor:pointer;
  transition:border-color .2s,background .2s,color .2s,transform .15s;
  box-shadow:0 0 16px rgba(255,122,74,.18);
  animation:replayPulse 3.2s ease-in-out infinite;
}
.replay-completed:hover{
  background:linear-gradient(135deg,rgba(255,122,74,.22),rgba(255,122,74,.08));
  border-color:#ff7a4a;color:#fff;transform:translateY(-1px);
  box-shadow:0 0 22px rgba(255,122,74,.35);
}
.replay-completed .star{color:#ff7a4a;font-size:13px;letter-spacing:0}
.replay-completed .arrow{opacity:.6;font-size:14px;font-weight:400;transition:opacity .2s,transform .2s}
.replay-completed:hover .arrow{opacity:1;transform:translateX(2px)}
body.completed .replay-completed{display:inline-flex}
@keyframes replayPulse{
  0%,100%{box-shadow:0 0 16px rgba(255,122,74,.18)}
  50%{box-shadow:0 0 26px rgba(255,122,74,.4)}
}

.viewing{background:#1a2442;color:#cfe1ff;padding:10px 14px;font-size:12px;
  text-align:center;border-bottom:1px solid #2b3a5e;display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}
.viewing img{width:22px;height:22px;border-radius:50%;object-fit:cover}
.viewing a{color:#ffd89a;text-decoration:none;font-weight:700}

.filters{display:flex;gap:6px;overflow-x:auto;padding:10px 16px 4px;scrollbar-width:none;
  justify-content:center;flex-wrap:wrap}
.filters::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;padding:7px 12px;border-radius:999px;
  background:var(--card);border:1px solid var(--border);color:var(--mute);
  font-size:13px;cursor:pointer;user-select:none;white-space:nowrap}
.chip.active{background:var(--accent);color:#1a0e00;border-color:var(--accent);font-weight:600}
.filter-more{display:none;min-width:38px;padding:4px 10px;font-size:18px;line-height:1;
  align-items:center;justify-content:center;
  transition:background .15s,color .15s,border-color .15s}
@media(max-width:499px){
  /* Overflow chips always in flow; collapsed state animates width + opacity */
  .filter-overflow{
    display:inline-flex;align-items:center;white-space:nowrap;
    max-width:0;opacity:0;pointer-events:none;
    padding-left:0;padding-right:0;border-width:0;margin-right:-6px;
    overflow:hidden;
    transition:max-width .2s cubic-bezier(.2,.7,.2,1),
               padding .2s cubic-bezier(.2,.7,.2,1),
               border-width .2s,
               margin .2s cubic-bezier(.2,.7,.2,1),
               opacity .16s ease;
  }
  .filters.more-open .filter-overflow{
    max-width:140px;opacity:1;pointer-events:auto;
    padding-left:12px;padding-right:12px;border-width:1px;margin-right:0;
  }
  .filter-more{display:inline-flex}
  .filters.more-open .filter-more{background:var(--accent);color:#1a0e00;border-color:var(--accent)}
}
.chip[data-f="dup"].active{background:var(--dup);color:#0a1525;border-color:var(--dup)}
.tools{display:flex;gap:6px;padding:6px 12px 12px;flex-wrap:wrap;justify-content:center;align-items:center}
.tools .chip{text-align:center;padding:7px 10px;font-size:12px}
.tools .chip.danger{color:#ff8a8a}
.tools .chip.primary{background:var(--accent);color:#1a0e00;border-color:var(--accent);font-weight:700}

/* Sort dropdown — neutral chip with a popover list, no accent colour. */
.sort-menu{position:relative;display:inline-block}
.sort-btn,.tools .sort-btn{
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  padding:7px 16px;overflow:hidden;
  font-family:inherit;background:var(--card);color:var(--mute);
  border:1px solid var(--border);user-select:none;
  transition:width .22s cubic-bezier(.2,.8,.2,1),border-color .15s;
}
.sort-btn #sortLabel{white-space:nowrap}
.sort-btn:hover{border-color:#3a4a3f}
.sort-caret{font-size:10px;color:var(--mute);transition:transform .15s}
.sort-menu.open .sort-caret{transform:rotate(180deg)}
.sort-list{
  position:absolute;top:calc(100% + 4px);left:50%;
  min-width:150px;background:var(--card);border:1px solid var(--border);
  border-radius:10px;padding:4px;z-index:30;
  box-shadow:0 8px 24px rgba(0,0,0,.4),0 2px 6px rgba(0,0,0,.3);
  transform:translateX(-50%) translateY(-6px) scale(.94);
  transform-origin:top center;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .16s ease,transform .18s cubic-bezier(.2,.8,.2,1),visibility .16s;
}
.sort-menu.open .sort-list{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:translateX(-50%) translateY(0) scale(1);
}
.sort-opt{
  padding:8px 12px;border-radius:7px;font-size:13px;cursor:pointer;
  color:var(--text);white-space:nowrap;transition:background .1s;
}
.sort-opt:hover{background:rgba(255,255,255,.06)}
.sort-opt[aria-selected="true"]{background:rgba(255,255,255,.08);font-weight:600}
.sort-opt[aria-selected="true"]::before{content:"✓ ";color:var(--mute);font-weight:400}

.view-switch{
  position:relative;display:inline-flex;align-items:stretch;
  background:var(--card);border:1px solid var(--accent);border-radius:999px;
  padding:3px;gap:0;font-size:12px;line-height:1;
  isolation:isolate;
  animation:switchPulse 2.6s ease-in-out infinite;
}
.view-switch-thumb{
  position:absolute;top:3px;bottom:3px;left:3px;
  width:calc(50% - 3px);
  background:var(--accent);border-radius:999px;
  box-shadow:0 1px 4px rgba(0,0,0,.25);
  transition:transform .25s cubic-bezier(.4,0,.2,1);
  z-index:0;
}
.view-switch[data-mode="image"] .view-switch-thumb{transform:translateX(100%)}
.view-switch-opt{
  position:relative;z-index:1;flex:1 1 0;min-width:110px;
  padding:8px 18px;background:transparent;border:0;
  color:var(--mute);font:inherit;font-weight:700;font-size:12px;
  cursor:pointer;white-space:nowrap;
  transition:color .2s;
}
.view-switch-opt[aria-selected="true"]{color:#1a0e00}
@keyframes switchPulse{
  0%,100%{box-shadow:0 0 0 rgba(255,138,31,0)}
  50%{box-shadow:0 0 14px rgba(255,138,31,.5)}
}
@media(prefers-reduced-motion:reduce){
  .view-switch{animation:none}
  .view-switch-thumb{transition:none}
}

.view-hint{
  display:none;
  margin:14px auto 0;
  font-size:10px;font-weight:600;letter-spacing:2px;
  text-transform:uppercase;
  color:#d4b27a;
  opacity:.75;
  align-items:center;justify-content:center;gap:8px;
  user-select:none;
}
body.view-image .view-hint{display:flex;width:fit-content}
.view-hint-spark{
  color:var(--accent);font-size:9px;
  animation:hintSpark 2.6s ease-in-out infinite;
  text-shadow:0 0 6px rgba(255,138,31,.6);
}
.view-hint-spark:last-child{animation-delay:1.3s}
.view-hint-txt{
  background:linear-gradient(90deg,#d4b27a 0%,#fff2cf 50%,#d4b27a 100%);
  background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:hintShimmer 3.6s linear infinite;
}
@keyframes hintSpark{
  0%,100%{opacity:.35;transform:scale(.85)}
  50%{opacity:1;transform:scale(1.15)}
}
@keyframes hintShimmer{
  0%{background-position:200% 0}
  100%{background-position:-200% 0}
}
@media(prefers-reduced-motion:reduce){
  .view-hint-spark,.view-hint-txt{animation:none}
}

.friends{padding:0 16px 10px}
.friends-title{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--mute);padding:4px 2px 6px;display:flex;justify-content:space-between;align-items:center}
.friends-row{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.friends-row::-webkit-scrollbar{display:none}
.friend{flex:0 0 auto;display:flex;align-items:center;gap:6px;padding:5px 10px 5px 5px;
  background:var(--card);border:1px solid var(--border);border-radius:999px;cursor:pointer;font-size:12px}
.friend img{width:22px;height:22px;border-radius:50%;object-fit:cover;background:#333}
.friend .x{margin-left:4px;color:var(--mute);font-size:14px;padding:0 4px}

.group{padding:6px 12px 2px}
.group[data-cat="__all"]{padding-top:16px}
.group-title{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--mute);padding:10px 6px 6px}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
@media(min-width:500px){.grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:760px){.grid{grid-template-columns:repeat(4,1fr)}}
@media(min-width:1000px){.grid{grid-template-columns:repeat(6,1fr)}}

.item{position:relative;background:var(--card);border:1px solid var(--border);
  border-radius:12px;padding:10px 10px 38px;cursor:pointer;
  transition:transform .08s,background .15s,border-color .15s;
  display:flex;flex-direction:column;gap:4px;min-height:100px;overflow:hidden}
.item:active{transform:scale(.97)}
.item .num{font-size:11px;color:var(--mute);font-weight:700;font-variant-numeric:tabular-nums}
.item .name{font-size:14px;line-height:1.25;font-weight:600;word-break:break-word}
.item .cat{font-size:10px;color:var(--mute);text-transform:uppercase;letter-spacing:.5px}
.item .check{position:absolute;top:8px;right:8px;width:22px;height:22px;
  border:2px solid var(--border);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg);font-size:12px;font-weight:900;color:transparent}
.item.got{background:linear-gradient(135deg,#1a3a24 0%,#22412a 100%);border-color:var(--ok)}
.item.got .check{background:var(--ok);border-color:var(--ok);color:#0a1a0e}
.item.got .name{color:#d8f5e0}
.item.got .num,.item.got .cat{color:#8dd9a5}
.item.dup{background:linear-gradient(135deg,#1a2a44 0%,#1f3558 100%);border-color:var(--dup)}
.item.dup .check{background:var(--dup);border-color:var(--dup);color:#0a1525;
  width:auto;min-width:28px;padding:0 6px;border-radius:12px;font-size:13px}
.item.dup .name{color:#dce9ff}
.item.dup .num,.item.dup .cat{color:#9bbaea}

.counter{position:absolute;left:0;right:0;bottom:0;display:flex;
  border-top:1px solid var(--border);background:rgba(0,0,0,.25)}
.counter button{flex:1;background:transparent;border:0;color:var(--text);
  font-size:18px;font-weight:800;padding:8px 0;cursor:pointer;font-family:inherit;line-height:1}
.counter button:active{background:rgba(255,255,255,.08)}
.counter button:disabled{opacity:.3}
.counter .sep{width:1px;background:var(--border)}
.counter .qty{flex:1.2;text-align:center;padding:8px 0;font-size:13px;
  font-weight:700;font-variant-numeric:tabular-nums;color:var(--mute)}
.item.got .counter .qty,.item.dup .counter .qty{color:var(--text)}
.item.hide{display:none}
body.readonly .item{cursor:default}
body.readonly .counter{display:none}
body.readonly .item{padding-bottom:12px;min-height:88px}

.cta-float{
  display:inline-block;padding:10px 22px;font-size:13px;font-weight:800;
  color:#1a0e00;background:linear-gradient(90deg,var(--accent),var(--accent2));
  border-radius:999px;text-decoration:none;letter-spacing:.3px;
  position:relative;will-change:transform,box-shadow;
  animation:ctaFloat 5s ease-in-out infinite;
}
/* NEW + GPS pin badge — static red pill anchored on the exchange CTA */
.cta-float-new{overflow:visible}
.cta-gps{
  position:absolute;top:-11px;right:-10px;z-index:3;
  display:inline-flex;align-items:center;gap:4px;
  background:linear-gradient(135deg,#ff4a2b 0%,#c2261b 100%);
  color:#fff;font-size:9px;font-weight:900;letter-spacing:.9px;
  padding:3px 7px 3px 6px;border-radius:5px;line-height:1;
  box-shadow:0 0 10px rgba(255,74,43,.45),0 1px 4px rgba(0,0,0,.45);
  pointer-events:none;
}
.cta-gps svg{flex:none;filter:drop-shadow(0 0 2px rgba(255,255,255,.7))}
@keyframes ctaFloat{
  0%,100%{transform:translateY(0);box-shadow:0 0 12px rgba(255,138,31,.25)}
  50%{transform:translateY(-2px);box-shadow:0 4px 18px rgba(255,138,31,.45)}
}
.cta-row{display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap}

/* Support CTA — same .replay-completed pill style; visibility driven by JS
   (state.supportCtaEnabled + state.owned.size >= 20). */
.top-pill-row .replay-completed{margin:0}
.cta-sid{
  position:absolute;left:calc(50% + 30px);top:-26px;
  transform:translateX(-50%);
  width:54px;height:auto;
  pointer-events:none;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.55));
}
@media(prefers-reduced-motion:reduce){
  .cta-float{animation:none}
}

/* Image view mode — toggled via body.view-image */
.card-img{display:none}
body.view-image .item{padding:0;min-height:0;gap:0;overflow:hidden;
  -webkit-touch-callout:none;-webkit-user-select:none;user-select:none;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation}
body.view-image .item .card-img,
body.view-image .item .card-alive-inline{
  -webkit-user-drag:none;-webkit-touch-callout:none;pointer-events:none
}
body.view-image .item .card-img{display:block;width:100%;height:auto;aspect-ratio:400/552;object-fit:cover;background:#0a0f0c;filter:saturate(1.19) contrast(1.08) brightness(1.03)}
body.view-image .item .num,
body.view-image .item .name,
body.view-image .item .cat{display:none}
body.view-image .item .check{top:6px;right:6px;z-index:2}
body.view-image .item .counter{position:relative;left:auto;right:auto;bottom:auto}
body.view-image .item.got .card-img,
body.view-image .item.dup .card-img{opacity:1}
body.view-image .item:not(.got):not(.dup) .card-img{opacity:.45;filter:grayscale(.7)}

/* Long-press charging — a thin interior rim brightens over 1s, like a
   card frame being powered on. No blurred halo / fog. */
body.view-image .item.charging{animation:chargeGlow 1s ease-out forwards}
@keyframes chargeGlow{
  0%  {box-shadow:inset 0 0 0 0 rgba(255,245,220,0), 0 0 0 0 rgba(255,245,220,0)}
  60% {box-shadow:inset 0 0 10px 0 rgba(255,245,220,.35), 0 0 0 1px rgba(255,245,220,.3)}
  100%{box-shadow:inset 0 0 18px 0 rgba(255,245,220,.7), 0 0 0 1px rgba(255,245,220,.75)}
}

/* In-place "card alive" — video sits over the static card image. Longer
   opacity transition + subtle scale so the swap reads as dissolve rather
   than a hard cut. */
.card-alive-inline{
  position:absolute;
  top:0;left:0;width:100%;
  aspect-ratio:400/552;
  object-fit:cover;
  display:block;
  z-index:2;
  opacity:0;
  transform:scale(1.01);
  transition:opacity .9s ease-out, transform .9s ease-out;
  pointer-events:none;
  background:#0a0f0c;
}
body.view-image .item.alive .card-alive-inline{opacity:1;transform:scale(1)}
body.view-image .item.alive{
  outline:1px solid rgba(255,245,220,.6);
  outline-offset:-1px;
  z-index:5;
}

/* Launch flash — single radial bloom from card centre the moment video
   starts. Clipped to the card-image area via aspect-ratio. */
.card-alive-flash{
  position:absolute;top:0;left:0;width:100%;
  aspect-ratio:400/552;
  background:radial-gradient(ellipse 70% 65% at 50% 50%, rgba(255,245,220,.85), transparent 72%);
  mix-blend-mode:screen;
  pointer-events:none;
  z-index:3;
  opacity:0;
  animation:launchFlash 800ms ease-out forwards;
}
@keyframes launchFlash{
  0%   {opacity:0;transform:scale(.94)}
  25%  {opacity:1;transform:scale(1)}
  100% {opacity:0;transform:scale(1.06)}
}

/* Scan line — horizontal glow sweep top→bottom synced with the reveal,
   hologram activation feel. */
.card-alive-scan{
  position:absolute;top:0;left:0;width:100%;
  aspect-ratio:400/552;
  pointer-events:none;
  z-index:4;
  overflow:hidden;
}
.card-alive-scan::before{
  content:'';
  position:absolute;left:-4%;right:-4%;
  top:0;height:14%;
  background:linear-gradient(to bottom,
    transparent 0%,
    rgba(255,240,220,.18) 30%,
    rgba(255,255,255,.95) 50%,
    rgba(255,240,220,.18) 70%,
    transparent 100%);
  mix-blend-mode:screen;
  filter:blur(1.2px);
  transform:translateY(-110%);
  animation:scanSweep 850ms cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes scanSweep{
  0%   {transform:translateY(-110%);opacity:0}
  12%  {opacity:1}
  88%  {opacity:1}
  100% {transform:translateY(740%);opacity:0}
}
body.view-image .item.alive .card-img{opacity:0;transition:opacity .9s ease-out}

.toggle-row{display:flex;align-items:center;gap:8px;padding:10px;background:var(--bg);
  border:1px solid var(--border);border-radius:8px;margin-bottom:10px;cursor:pointer;
  font-size:13px;color:var(--text);user-select:none}
.toggle-row input[type="checkbox"]{width:18px;height:18px;accent-color:var(--ok);cursor:pointer}

.ranking-section{padding:10px 12px 20px}
.ranking-header{display:flex;align-items:center;gap:10px;padding:4px 6px 10px;flex-wrap:wrap}
.ranking-title{font-size:14px;font-weight:700;color:var(--accent);margin:0;flex:1}
.ranking-me{font-size:12px;color:var(--accent2);font-weight:600}
.ranking-list{display:flex;flex-direction:column;gap:4px}
.rank-row{display:flex;align-items:center;gap:10px;padding:8px 10px;
  background:var(--card);border:1px solid var(--border);border-radius:10px;font-size:13px}
.rank-row.me{border-color:var(--accent);background:linear-gradient(135deg,#2a1f0a 0%,#1c2420 100%)}
.rank-pos{font-weight:800;font-variant-numeric:tabular-nums;min-width:28px;color:var(--mute);text-align:center}
.rank-row:nth-child(1) .rank-pos{color:#ffd700;font-size:16px}
.rank-row:nth-child(2) .rank-pos{color:#c0c0c0;font-size:15px}
.rank-row:nth-child(3) .rank-pos{color:#cd7f32;font-size:15px}
.rank-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text)}
.rank-email{font-size:11px;color:var(--mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:140px}
.rank-count{font-weight:700;font-variant-numeric:tabular-nums;color:var(--ok);min-width:40px;text-align:right}

.view-exchange{margin:10px 12px;padding:14px;background:var(--card);
  border:1px solid var(--border);border-radius:12px}
.view-exchange-title{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--accent);font-weight:700;margin-bottom:10px}
.view-exchange-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.view-exchange-city{font-size:11px;padding:3px 8px;border-radius:6px;background:var(--bg);
  color:var(--mute);font-weight:600;border:1px solid var(--border)}
.view-exchange-contact{font-size:13px;font-weight:600;cursor:pointer}
.view-exchange-contact.tg{color:#229ED9}
.view-exchange-contact.ig{color:#E1306C}
.view-exchange-contact.th{color:#e8ece6}
.view-exchange-cards{font-size:12px;color:var(--mute);line-height:1.6}
.view-exchange-cards b{color:var(--text);font-weight:600}
.view-exchange-cta{display:inline-block;margin-top:8px;padding:6px 14px;font-size:12px;
  font-weight:700;color:#1a0e00;background:var(--accent);border-radius:8px;text-decoration:none}

footer{position:fixed;bottom:-1px;left:0;right:0;
  background:rgba(12,15,12,.82);
  backdrop-filter:blur(16px) saturate(1.4);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  border-top:1px solid rgba(255,255,255,.05);
  padding:9px 20px calc(10px + var(--safe-bot));
  display:flex;align-items:center;justify-content:center;gap:20px;
  z-index:10;
}
.foot-item{
  display:inline-flex;align-items:center;gap:6px;
  color:#7b857e;text-decoration:none;
  font-size:11.5px;font-weight:500;letter-spacing:.1px;
  transition:color .18s ease;
  background:none;border:0;cursor:pointer;font-family:inherit;padding:0
}
.foot-item:hover{color:#e8ece6}
.foot-ico{display:block;color:currentColor;flex-shrink:0}
/* Coffee button — absolute on the right edge so it doesn't disturb the centered flex layout shared with exchange/generate pages */
.foot-coffee{
  position:absolute;right:14px;top:50%;transform:translateY(-50%);
  padding:0;
  border:0;
  background:transparent;
  color:#a4afa8;
  cursor:pointer;
  transition:color .18s ease
}
.foot-coffee:hover{ color:#ff8a1f }
/* Soft white ripple — fired ~5s after page load IF user has never clicked the button.
   3 pulses then stops naturally; re-trigger requires removing+re-adding the class. */
/* Pulse follows the cup silhouette via filter:drop-shadow (which respects
   alpha, unlike box-shadow which paints the button's rectangular bbox).
   Stacked shadows + scale give a clearly-visible warm halo. */
@keyframes footCoffeePulse {
  0% {
    transform: translateY(-50%) scale(1);
    filter:
      drop-shadow(0 0 4px rgba(255,138,31,.95))
      drop-shadow(0 0 0  rgba(255,138,31,.6));
  }
  60% {
    transform: translateY(-50%) scale(1.18);
    filter:
      drop-shadow(0 0 12px rgba(255,138,31,.5))
      drop-shadow(0 0 22px rgba(255,138,31,.25));
  }
  100% {
    transform: translateY(-50%) scale(1);
    filter:
      drop-shadow(0 0 0 rgba(255,138,31,0))
      drop-shadow(0 0 0 rgba(255,138,31,0));
  }
}
.foot-coffee.pulse{
  animation: footCoffeePulse 1.6s ease-out 3
}
/* Icon-only across all viewports. */
.foot-coffee-text{display:none}
@media (max-width:419px){
  footer{padding-left:40px;padding-right:40px}  /* clearance for absolute .foot-lang (left) + .foot-coffee (right) on tiny screens */
}

/* ==================== PROFILE RANDOM PUSH ==================== */
/* Top-of-viewport glass-style notification fired ~rarely when a 20+ card
   collector adds a card. 8s burn-down with a spark, click → support modal.
   See app.js::tryFireProfilePush. */
.pp-bar{
  position:fixed;
  top:16px;
  left:50%;
  transform:translate(-50%, -28px) scale(.94);
  z-index:5000;
  width:calc(100% - 24px);
  max-width:380px;
  padding:14px 40px 0 18px;
  /* True glass: very low alpha + strong blur. Chrome needs `will-change` on
     some GPU configs for backdrop-filter to actually paint. */
  background:rgba(14,20,18,.18);
  -webkit-backdrop-filter: blur(3px) saturate(130%);
  backdrop-filter: blur(3px) saturate(130%);
  will-change: backdrop-filter, transform;
  border:1px solid rgba(255,138,31,.22);
  border-radius:14px;
  box-shadow:
    0 18px 44px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.10),
    0 0 28px rgba(255,138,31,.10);
  color:var(--text);
  cursor:pointer;
  opacity:0;
  pointer-events:none;
  transition: transform .42s cubic-bezier(.18,.86,.32,1.22), opacity .3s ease, border-color .2s ease, box-shadow .25s ease;
  -webkit-tap-highlight-color:transparent;
  overflow:hidden; /* the burn fill is positioned to the bar's bottom */
}
.pp-bar.show{
  transform:translate(-50%, 0) scale(1);
  opacity:1;
  pointer-events:auto;
}
.pp-bar:hover{
  border-color:rgba(255,138,31,.55);
  box-shadow:
    0 18px 44px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,138,31,.12),
    0 0 36px rgba(255,138,31,.28);
}
.pp-bar-text{
  display:flex; align-items:center; gap:11px;
  font-size:14px; font-weight:600;
  color:#ffe1bf;
  letter-spacing:.2px;
  margin:0 0 14px;
  line-height:1.35;
  text-shadow:0 1px 1px rgba(0,0,0,.4);
}
.pp-bar-icon{
  flex-shrink:0;
  color:var(--accent);
  filter: drop-shadow(0 0 4px rgba(255,138,31,.55));
  animation: ppIconTwinkle 1.9s ease-in-out infinite;
}
@keyframes ppIconTwinkle{
  0%,100%{ opacity:.88; transform:scale(1) rotate(0deg); filter: drop-shadow(0 0 4px rgba(255,138,31,.5)) }
  50%   { opacity:1;  transform:scale(1.08) rotate(8deg); filter: drop-shadow(0 0 8px rgba(255,200,120,.85)) }
}
.pp-bar-progress{
  position:absolute;
  left:0; right:0; bottom:0;
  height:1.5px;
  background:rgba(255,255,255,.04);
  overflow:visible;
}
.pp-bar-progress-fill{
  position:absolute;
  left:0; top:0; bottom:0;
  width:100%;
  background:linear-gradient(90deg, rgba(255,138,31,.35) 0%, var(--accent) 65%, #ffe0a3 100%);
  box-shadow:0 0 6px rgba(255,138,31,.55);
  animation: ppBurn 8s linear forwards;
}
.pp-bar-spark{
  position:absolute;
  top:50%; right:0;
  width:8px; height:8px;
  transform: translate(50%, -50%);
  background: radial-gradient(circle,
    rgba(255,255,255,.95) 0%,
    #ffe9b6 28%,
    rgba(255,166,67,.7) 60%,
    rgba(255,138,31,0) 100%);
  border-radius:50%;
  filter: blur(.4px);
  pointer-events:none;
  animation: ppSparkPulse .42s ease-in-out infinite alternate;
}
@keyframes ppBurn{
  from{ width:100% }
  to  { width:0% }
}
@keyframes ppSparkPulse{
  from{ opacity:.7;  transform: translate(50%, -50%) scale(.82) }
  to  { opacity:1;   transform: translate(50%, -50%) scale(1.25) }
}
.pp-bar-close{
  position:absolute;
  top:6px; right:8px;
  width:26px; height:26px;
  padding:0;
  background:transparent;
  border:none;
  color:rgba(232,236,230,.5);
  font-size:22px; line-height:1;
  cursor:pointer;
  border-radius:50%;
  transition:color .15s ease, background .15s ease;
}
.pp-bar-close:hover{ color:#fff; background:rgba(255,255,255,.1) }
@media (max-width:420px){
  .pp-bar{ top:8px; width:calc(100% - 16px); padding:12px 36px 0 14px }
  .pp-bar-text{ font-size:13px }
}

/* ==================== SUPPORT MODAL ==================== */
.support-modal{
  position:fixed;inset:0;z-index:9999;
  display:flex;align-items:center;justify-content:center;
  padding:20px;
  opacity:0;pointer-events:none;
  transition:opacity .22s ease
}
.support-modal[open],
.support-modal.open{opacity:1;pointer-events:auto}
.support-modal[hidden]{display:none}
.support-back{
  position:absolute;inset:0;
  background:rgba(6,9,7,.72);
  backdrop-filter:blur(8px) saturate(1.2);
  -webkit-backdrop-filter:blur(8px) saturate(1.2)
}
.support-card{
  position:relative;
  width:100%;max-width:440px;
  margin-top:170px; /* room for stalker hero protruding ~60% above card */
  background:linear-gradient(180deg,rgba(28,32,30,.96),rgba(20,24,22,.98));
  border:1px solid rgba(255,255,255,.07);
  border-radius:20px;
  padding:114px 32px 30px;
  box-shadow:0 30px 80px rgba(0,0,0,.5),0 0 0 1px rgba(255,138,31,.06);
  color:#e8ece6;
  transform:translateY(8px) scale(.98);
  transition:transform .26s cubic-bezier(.2,.8,.2,1);
  overflow:visible
}
.support-modal.open .support-card{transform:translateY(0) scale(1)}
/* Soft ambient glow behind the stalker, blended into the card top */
.support-card::before{
  content:"";
  position:absolute;left:50%;top:-80px;
  width:320px;height:220px;
  transform:translateX(-50%);
  background:radial-gradient(ellipse at center,
    rgba(255,138,31,.22) 0%,
    rgba(255,138,31,.06) 45%,
    transparent 75%);
  filter:blur(22px);
  pointer-events:none;
  z-index:0;
  opacity:0;
  transition:opacity .55s ease .15s
}
.support-modal.open .support-card::before{opacity:1}

/* Stalker hero — ~60% protrudes above the card to add depth/volume */
.support-hero{
  position:absolute;
  top:-170px;left:50%;
  transform:translateX(-50%) translateY(-12px);
  width:280px;height:260px;
  pointer-events:none;
  opacity:0;
  transition:opacity .5s ease .12s, transform .55s cubic-bezier(.2,.8,.2,1) .12s;
  z-index:2
}
.support-modal.open .support-hero{
  opacity:1;
  transform:translateX(-50%) translateY(0)
}
.support-hero-img{
  display:block;
  width:100%;height:100%;
  object-fit:contain;object-position:bottom center;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.55)) saturate(1.05) contrast(1.04);
  animation:supportHeroBreathe 5s ease-in-out infinite
}
@keyframes supportHeroBreathe{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-3px)}
}
.support-close{
  position:absolute;top:14px;right:14px;
  width:34px;height:34px;border-radius:50%;
  background:transparent;border:0;cursor:pointer;
  color:#6a7570;
  display:flex;align-items:center;justify-content:center;
  transition:color .18s ease, background .18s ease
}
.support-close:hover{color:#e8ece6;background:rgba(255,255,255,.06)}
.support-eyebrow{
  font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:#ff8a1f;margin-bottom:14px
}
.support-title{
  font-size:24px;font-weight:800;line-height:1.18;letter-spacing:-.01em;
  margin:0 0 14px;color:#f4f5f3
}
.support-lead{
  font-size:14.5px;line-height:1.55;color:#a4afa8;
  margin:0 0 24px
}
.support-lead b{color:#e8ece6;font-weight:600}
.support-actions{
  display:grid;gap:10px;margin-bottom:22px
}
.support-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:12px 16px;border-radius:12px;
  font-size:14px;font-weight:600;text-decoration:none;
  border:1px solid transparent;cursor:pointer;
  transition:transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
  font-family:inherit
}
.support-btn:active{transform:scale(.985)}
.support-btn-primary{
  color:#e8ece6;
  background:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.08)
}
.support-btn-primary:hover{
  background:rgba(255,255,255,.07);
  border-color:rgba(255,138,31,.4);
  color:#ff8a1f
}
.support-or{
  display:flex;align-items:center;gap:14px;
  margin:0 0 18px;
  font-size:11px;color:#5f6a62;letter-spacing:.2em;text-transform:uppercase;font-weight:600
}
.support-or::before,.support-or::after{
  content:"";flex:1;height:1px;background:rgba(255,255,255,.06)
}
/* Monobank-styled CTA — pure black background + white content, brand-authentic */
.support-btn-coffee{
  display:flex;
  margin:0 auto;
  width:fit-content;max-width:100%;
  padding:13px 26px;
  background:#000;
  border-color:rgba(255,255,255,.08);
  color:#fff;
  box-shadow:0 6px 20px rgba(0,0,0,.45)
}
.support-btn-coffee:hover{
  background:#161616;
  border-color:rgba(255,255,255,.2);
  color:#fff
}
.support-btn-mono{
  margin-left:4px;padding:3px 7px;border-radius:4px;
  font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  background:#fff;color:#000;line-height:1
}
.support-foot{
  margin-top:22px;text-align:center;
  font-size:12px;color:#6a7570;letter-spacing:.04em
}
@media (max-width:419px){
  .support-card{margin-top:130px;padding:86px 20px 24px;border-radius:18px}
  .support-title{font-size:21px}
  .support-hero{width:220px;height:200px;top:-130px}
  .support-card::before{width:260px;height:170px;top:-60px}
}
.hint{font-size:10px;color:var(--mute);padding:0 22px 4px;text-align:center}

/* SEO content block — visible to users + crawlers */
.seo-block{max-width:560px;margin:22px auto 80px;padding:18px 16px;
  background:var(--card);border:1px solid var(--border);border-radius:12px;
  color:var(--mute);font-size:13px;line-height:1.55}
.seo-block h2{color:var(--accent);font-size:14px;letter-spacing:1px;
  text-transform:uppercase;margin:0 0 10px;font-weight:800}
.seo-block h3{color:var(--text);font-size:13px;margin:16px 0 6px;font-weight:700}
.seo-block p{margin:0 0 10px}
.seo-block a{color:var(--accent2,var(--accent));border-bottom:1px dotted var(--accent);
  text-decoration:none}
.seo-block ul{margin:0 0 10px;padding-left:20px}
.seo-block li{margin-bottom:4px}
.seo-block details{margin-bottom:6px;border-bottom:1px solid var(--border);padding-bottom:8px}
.seo-block summary{cursor:pointer;color:var(--text);font-weight:600;padding:6px 0}
.seo-block summary::marker{color:var(--accent)}
.seo-block details[open] summary{color:var(--accent)}
.seo-block details p{margin:6px 0 2px;color:var(--mute)}

.modal{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:50;
  display:none;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(4px)}
.modal.show{display:flex}
.modal-box{background:var(--card);border:1px solid var(--border);border-radius:14px;
  padding:20px;max-width:400px;width:100%;text-align:center}
.modal-box h3{margin:0 0 10px;color:var(--accent);font-size:15px;text-transform:uppercase;letter-spacing:.5px}
.modal-box p{font-size:13px;color:var(--mute);line-height:1.4;margin:0 0 14px}
.modal-box input{width:100%;padding:10px;background:var(--bg);border:1px solid var(--border);
  border-radius:8px;color:var(--text);font-family:inherit;font-size:13px;margin-bottom:10px;
  text-align:center;font-family:monospace;word-break:break-all}
.modal-box .btn-row{display:flex;gap:8px;flex-wrap:wrap}
.modal-box button{flex:1;padding:10px;background:var(--accent);color:#1a0e00;
  border:0;border-radius:8px;font-weight:700;font-size:14px;cursor:pointer;font-family:inherit;min-width:100px}
.modal-box button.sec{background:var(--card);color:var(--text);border:1px solid var(--border)}
.modal-box button.danger{background:#442020;color:#ff9a9a;border:1px solid #5a2828}
.modal-box .profile{display:flex;align-items:center;gap:10px;padding:10px;background:var(--bg);
  border:1px solid var(--border);border-radius:10px;margin-bottom:12px}
.modal-box .profile img{width:40px;height:40px;border-radius:50%;background:#333;object-fit:cover}
.modal-box .profile .info{text-align:left;flex:1;min-width:0}
.modal-box .profile .info b{display:block;font-size:14px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.modal-box .profile .info span{font-size:11px;color:var(--mute)}
.gbtn{display:flex;align-items:center;justify-content:center;gap:10px;
  background:#fff;color:#1f1f1f;padding:11px;border-radius:8px;font-weight:600;
  border:1px solid #dadce0;cursor:pointer;font-size:14px;width:100%;font-family:inherit;margin-bottom:8px}
.gbtn:active{background:#f2f2f2}

@media(max-width:420px){
  .tools .chip{font-size:11px;padding:6px 9px}
  .title{font-size:14px}
  .me-name{max-width:70px;font-size:10px}
}

/* === EN stub pages (en/exchange.html, en/meet.html) === */
.en-stub main { max-width: 720px; margin: 0 auto; padding: 24px 18px 80px; }
.en-stub article > h2.article-lead { font-size: 28px; margin-bottom: 14px; line-height: 1.2; color: #e8ece6; }
.en-stub h2 { font-size: 18px; margin: 28px 0 10px; color: #ff8a1f; }
.en-stub .lead { font-size: 15px; line-height: 1.6; color: #c0c8c2; margin-bottom: 18px; }
.en-stub ul { padding-left: 18px; line-height: 1.55; }
.en-stub li { margin-bottom: 6px; color: #c0c8c2; font-size: 14px; }
.en-stub p { line-height: 1.55; color: #c0c8c2; font-size: 14px; }
.en-stub details { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); border-radius: 8px; padding: 12px 14px; margin-bottom: 8px; }
.en-stub details summary { font-weight: 600; font-size: 14px; cursor: pointer; color: #e8ece6; }
.en-stub details[open] summary { color: #ff8a1f; }
.en-stub details p { margin: 8px 0 0; font-size: 13px; line-height: 1.55; color: #b0b8b2; }
.en-stub .related-links { display: grid; gap: 10px; margin: 18px 0; }
.en-stub .cta-card { display: block; padding: 14px 16px; background: rgba(255,138,31,0.08); border: 1px solid rgba(255,138,31,0.35); border-radius: 10px; color: #e8ece6; text-decoration: none; }
.en-stub .cta-card strong { display: block; color: #ff8a1f; margin-bottom: 4px; }
.en-stub .cta-card span { font-size: 13px; color: #b0b8b2; }
.en-stub .lang-cross { margin-top: 24px; font-size: 13px; color: #8a958c; }
.en-stub .lang-cross a { color: #ff8a1f; }

/* === Language banner (first-visit cross-language switch) ===
   Floating glass-pill in the top-right. Slides in 0.5s after DOM
   ready, doesn't push content. Dismiss button slides it out. */
.lang-banner {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 9000;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 6px 7px 14px;
  border-radius: 999px;
  background: rgba(20, 28, 22, 0.78);
  border: 1px solid rgba(255, 138, 31, 0.35);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  font-size: 12.5px;
  animation: langBannerEnter 0.45s cubic-bezier(.22,.61,.36,1) both;
}
.lang-banner-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #e8ece6;
  text-decoration: none;
  font-weight: 600;
  padding: 0;
  letter-spacing: 0.2px;
}
.lang-banner-cta:hover { color: #ff8a1f; }
.lang-banner-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 18px;
  padding: 0 5px;
  border-radius: 4px;
  background: rgba(255, 138, 31, 0.18);
  color: #ff8a1f;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.5px;
}
.lang-banner-text { white-space: nowrap; }
.lang-banner-close {
  background: transparent;
  border: 0;
  color: #8a958c;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 8px 4px;
  margin-left: 2px;
  border-radius: 999px;
  transition: color .15s ease, background .15s ease;
}
.lang-banner-close:hover {
  color: #e8ece6;
  background: rgba(255, 255, 255, 0.06);
}
.lang-banner-leave { animation: langBannerLeave 0.3s ease-in both; }
@keyframes langBannerEnter {
  0%   { transform: translateX(120%); opacity: 0; }
  100% { transform: translateX(0);    opacity: 1; }
}
@keyframes langBannerLeave {
  0%   { transform: translateX(0);    opacity: 1; }
  100% { transform: translateX(120%); opacity: 0; }
}
@media (max-width: 380px) {
  .lang-banner { right: 8px; top: 8px; padding: 6px 4px 6px 10px; font-size: 11.5px; }
  .lang-banner-text { display: none; }   /* on tiny screens, flag-only */
}

/* === Footer language toggle (UA · EN) === */
/* Footer language indicator — single label ("UA" / "EN") on the left
   edge of the footer, mirroring .foot-coffee on the right. Shows the
   CURRENT language; click navigates to the mirror URL. */
.foot-lang {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  padding: 0;
  border: 0;
  background: transparent;
  color: #7b857e;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.4px;
  cursor: pointer;
  transition: color .18s ease;
}
.foot-lang:hover { color: #e8ece6; }