/* WikiLouie — original visual design. Dark arcade theme. */
:root {
  --bg: #0d0f1a;
  --bg2: #151829;
  --panel: #1b1f33;
  --panel2: #232845;
  --ink: #e8eaf6;
  --muted: #8b91b3;
  --accent: #7c5cff;
  --accent2: #b39aff;
  --gold: #f5c542;
  --danger: #ff5c7a;
  --ok: #41d98d;
  --c-C: #b9c0cf;
  --c-UC: #7fd49b;
  --c-R: #5fa8f5;
  --c-SR: #b07ff5;
  --c-SSR: #ff7f6e;
  --c-UR: #ffd24d;
  --c-LR: #ffb02e;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: hidden; }
body {
  background:
    radial-gradient(1200px 600px at 80% -10%, #2a2150 0%, transparent 60%),
    radial-gradient(900px 500px at -10% 110%, #1c2c52 0%, transparent 55%),
    var(--bg);
  color: var(--ink);
  font-family: "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif;
  min-height: 100vh;
}
a { color: var(--accent2); text-decoration: none; }
a:hover { text-decoration: underline; }
h2, h3, h4 { margin: 0.6em 0 0.4em; }
.muted { color: var(--muted); }
.center { text-align: center; }
.row { display: flex; align-items: center; flex-wrap: wrap; }
.gap { gap: 8px; }
.center-row { justify-content: center; margin: 12px 0; }
.boot { padding: 80px 20px; text-align: center; color: var(--muted); font-size: 18px; }

/* ----- top bar -------------------------------------------------------- */
.topbar {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 10px 18px;
  background: rgba(13, 15, 26, 0.85);
  border-bottom: 1px solid #2a2f52;
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(8px);
}
.logo { font-size: 22px; font-weight: 800; letter-spacing: 0.5px; color: var(--ink); }
.logo span { color: var(--gold); }
.logo.huge { font-size: 52px; }
.logo:hover { text-decoration: none; }
.nav { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; }
.nav-item {
  padding: 7px 12px; border-radius: 9px; color: var(--ink);
  font-weight: 600; font-size: 14px; position: relative;
}
.nav-item:hover { background: var(--panel2); text-decoration: none; }
.nav-item.active { background: var(--accent); color: #fff; }
.badge {
  background: var(--danger); color: #fff; border-radius: 999px;
  font-size: 11px; padding: 1px 6px; margin-left: 4px; font-weight: 700;
}
.userbox { display: flex; align-items: center; gap: 12px; }
.coins { background: var(--panel); padding: 5px 10px; border-radius: 9px; font-size: 14px; }
.me-link { font-weight: 700; color: var(--gold); }

.live-strip {
  background: linear-gradient(90deg, #b3123e, #e0245e);
  color: #fff; text-align: center; padding: 8px 12px; cursor: pointer;
  font-weight: 700; animation: pulse 1.6s infinite;
}
.live-strip.friend {
  background: linear-gradient(90deg, #4d2da3, #7c5cff);
  animation: none;
}
.live-strip + .live-strip { border-top: 1px solid rgba(255,255,255,0.25); }
@keyframes pulse { 50% { filter: brightness(1.25); } }

.main { max-width: 1180px; margin: 0 auto; padding: 18px; }
.footer { text-align: center; color: var(--muted); font-size: 12px; padding: 30px 10px; }

/* ----- panels & widgets ------------------------------------------------ */
.panel {
  background: var(--panel); border: 1px solid #2a2f52;
  border-radius: 16px; padding: 20px; margin-bottom: 18px;
}
.panel.narrow { max-width: 520px; margin-left: auto; margin-right: auto; }
.btn {
  display: inline-block; border: none; cursor: pointer; font-weight: 700;
  border-radius: 10px; padding: 9px 16px; font-size: 14px;
  background: var(--panel2); color: var(--ink); font-family: inherit;
  transition: transform 0.06s, filter 0.15s;
}
.btn:hover { filter: brightness(1.15); text-decoration: none; }
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.5; cursor: wait; }
.btn.primary { background: linear-gradient(135deg, var(--accent), #5a3de0); color: #fff; }
.btn.danger { background: linear-gradient(135deg, var(--danger), #d23058); color: #fff; }
.btn.danger.ghost { background: transparent; border: 1px solid var(--danger); color: var(--danger); }
.btn.ghost { background: transparent; border: 1px solid #3a4070; }
.btn.big { font-size: 17px; padding: 13px 26px; }
.btn.small { font-size: 12px; padding: 5px 10px; }

label { display: block; margin: 12px 0; font-weight: 600; font-size: 14px; }
label small { color: var(--muted); font-weight: 400; }
input, select {
  width: 100%; margin-top: 5px; padding: 10px 12px; border-radius: 10px;
  border: 1px solid #3a4070; background: var(--bg2); color: var(--ink);
  font-size: 15px; font-family: inherit;
}
input:focus, select:focus { outline: 2px solid var(--accent); border-color: transparent; }

.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translate(-50%, 20px);
  background: #2c3157; color: #fff; padding: 12px 20px; border-radius: 12px;
  opacity: 0; transition: all 0.3s; z-index: 200; font-weight: 600;
  box-shadow: 0 8px 30px rgba(0,0,0,0.5); max-width: 90vw;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.err { background: #6e2138; }
.toast.note { background: #2d2a5e; border: 1px solid var(--accent); }

.modal-wrap {
  position: fixed; inset: 0; background: rgba(5, 6, 12, 0.78);
  display: flex; align-items: center; justify-content: center; z-index: 100;
  padding: 16px; overflow-y: auto;
}
.modal {
  position: relative;
  background: var(--panel); border: 1px solid #3a4070; border-radius: 18px;
  padding: 22px; max-width: 860px; width: 100%; max-height: 92vh;
  overflow-y: auto; overflow-x: hidden;
  box-shadow: 0 20px 80px rgba(0,0,0,0.6);
}
.modal-x {
  position: sticky; top: 0; float: right; margin: -6px -6px 0 10px;
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid #3a4070;
  background: var(--panel2); color: var(--ink); font-size: 17px; font-weight: 800;
  cursor: pointer; z-index: 10; line-height: 1;
}
.modal-x:hover { background: var(--danger); border-color: var(--danger); }
.recovery-code {
  font-family: ui-monospace, monospace; font-size: 22px; letter-spacing: 2px;
  background: var(--bg2); border: 1px dashed var(--gold); color: var(--gold);
  border-radius: 12px; padding: 16px; text-align: center; margin: 14px 0;
  user-select: all;
}
.spinner {
  width: 36px; height: 36px; margin: 24px auto; border-radius: 50%;
  border: 4px solid #3a4070; border-top-color: var(--accent);
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ----- auth ------------------------------------------------------------ */
.auth-wrap {
  display: flex; min-height: 100vh; align-items: center; justify-content: center;
  gap: 60px; padding: 30px; flex-wrap: wrap;
}
.auth-hero { text-align: center; max-width: 420px; }
.tagline { color: var(--muted); font-size: 17px; line-height: 1.6; }
.hero-cards { display: flex; gap: 14px; justify-content: center; margin-top: 26px; }
.hero-card {
  width: 86px; height: 120px; border-radius: 12px; display: flex;
  align-items: center; justify-content: center; font-weight: 800; font-size: 20px;
  transform: rotate(-6deg); box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.hero-card:nth-child(2) { transform: rotate(2deg) translateY(-10px); }
.hero-card:nth-child(3) { transform: rotate(8deg); }
.hero-card.r-LR { background: linear-gradient(160deg, #6b4d0e, #2c2008); border: 2px solid var(--c-LR); color: var(--c-LR); }
.hero-card.r-SSR { background: linear-gradient(160deg, #642a22, #260f0c); border: 2px solid var(--c-SSR); color: var(--c-SSR); }
.hero-card.r-R { background: linear-gradient(160deg, #1d3a63, #0b1626); border: 2px solid var(--c-R); color: var(--c-R); }
.auth-box {
  background: var(--panel); border: 1px solid #2a2f52; border-radius: 18px;
  padding: 28px; width: 100%; max-width: 380px;
}
.auth-box .btn.big { width: 100%; margin-top: 8px; }

/* ----- trading cards (WikiLouie frame design) -------------------------- */
.card-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 14px; margin: 14px 0;
}
.tcard {
  position: relative; border-radius: 14px; overflow: hidden; cursor: pointer;
  background: linear-gradient(170deg, var(--panel2), var(--bg2));
  border: 2px solid var(--rar, #3a4070);
  transition: transform 0.12s, box-shadow 0.2s;
  display: flex; flex-direction: column;
}
.tcard:hover { transform: translateY(-4px) scale(1.02); box-shadow: 0 12px 30px rgba(0,0,0,0.55); z-index: 2; }
/* Selection uses cyan (no rarity frame is cyan) + a big check badge so it
   reads instantly even on green UC cards. */
.tcard.selected {
  outline: 4px solid #19d8ff; outline-offset: 2px;
  box-shadow: 0 0 22px rgba(25, 216, 255, 0.55);
  transform: translateY(-3px);
}
.tcard.selected::after {
  content: "✓"; position: absolute; top: 6px; right: 6px; z-index: 4;
  width: 30px; height: 30px; border-radius: 50%;
  background: #19d8ff; color: #062030; font-size: 20px; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 10px rgba(0,0,0,0.6);
}
.tcard-top {
  display: flex; align-items: flex-start; gap: 6px; padding: 7px 9px;
  background: rgba(0,0,0,0.35);
}
.tcard-rar {
  font-size: 11px; font-weight: 800; padding: 2px 7px; border-radius: 7px;
  background: var(--rar, #3a4070); color: #14101c; flex-shrink: 0; margin-top: 1px;
}
/* Titles are the heart of the card: always shown in full, wrapping as
   many lines as needed. */
.tcard-name {
  font-size: 13px; font-weight: 700; line-height: 1.25;
  white-space: normal; overflow-wrap: break-word; word-break: break-word;
  min-width: 0;
}
.tcard-art { position: relative; aspect-ratio: 4 / 3; background: #0a0c16; overflow: hidden; }
/* Default cover crop; wlArt() (assets/js) refines the vertical position
   per image from its aspect ratio, an explicit per-card framing set by
   GOD, or the crop chosen when a custom card was submitted. */
.tcard-art img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; display: block; position: relative; z-index: 1; }
/* Very tall images aren't cropped at all: the whole image sits over a
   blurred, stretched copy of itself (soft "extended borders" look). */
.tcard-art.art-contain img { object-fit: contain; }
.tcard-art .art-bg {
  position: absolute; inset: -14px; z-index: 0;
  background-size: cover; background-position: center;
  filter: blur(14px) brightness(0.65) saturate(1.15);
}
.tcard-noimg {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  font-size: 42px; font-weight: 800; color: #303759;
  background: repeating-linear-gradient(45deg, #11141f, #11141f 12px, #151929 12px, #151929 24px);
}
.tcard-stats {
  display: flex; justify-content: space-between; align-items: center;
  gap: 4px; padding: 7px 8px; font-weight: 800; font-size: 13px;
  background: rgba(0,0,0,0.25); overflow: hidden;
}
.st-atk { color: #ff9a6e; white-space: nowrap; }
.st-def { color: #6ec3ff; white-space: nowrap; }
.st-q { color: var(--gold); font-size: 11px; letter-spacing: 1px; flex-shrink: 1; min-width: 0; overflow: hidden; }
/* Compact quality (★93) used on small cards so 5-digit ATK/DEF never
   overflow the card width in pickers, grids or the boss panels. */
.st-q-mini { letter-spacing: 0; white-space: nowrap; flex-shrink: 0; }
.tcard.small .tcard-stats {
  font-size: 11px; padding: 6px 6px; gap: 3px;
  font-variant-numeric: tabular-nums;
}
.tcard-extract {
  padding: 8px 10px; font-size: 12px; color: var(--muted); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.tcard-lock {
  position: absolute; top: 36px; right: 8px; background: rgba(0,0,0,0.7);
  border-radius: 8px; padding: 3px 6px; font-size: 13px;
}
.tcard.small .tcard-extract { display: none; }
.tcard-details {
  border: none; border-top: 1px solid #2a2f52; width: 100%;
  background: rgba(0,0,0,0.4); color: var(--accent2);
  font-family: inherit; font-size: 12px; font-weight: 700;
  padding: 8px; cursor: pointer;
}
.tcard-details:hover { background: var(--accent); color: #fff; }

/* per-rarity frames */
.tcard.r-C   { --rar: var(--c-C); }
.tcard.r-UC  { --rar: var(--c-UC); }
.tcard.r-R   { --rar: var(--c-R); }
.tcard.r-SR  { --rar: var(--c-SR); }
.tcard.r-SSR { --rar: var(--c-SSR); box-shadow: 0 0 14px rgba(255, 127, 110, 0.25); }
.tcard.r-UR  { --rar: var(--c-UR); box-shadow: 0 0 16px rgba(255, 210, 77, 0.3); }
.tcard.r-LR  {
  --rar: var(--c-LR);
  border-image: linear-gradient(135deg, #ffb02e, #fff3c4, #ffb02e) 1;
  box-shadow: 0 0 22px rgba(255, 176, 46, 0.4);
}
.holo {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; opacity: 0.5;
  background: linear-gradient(115deg, transparent 30%, rgba(124, 92, 255, 0.45) 42%, rgba(65, 217, 141, 0.4) 50%, rgba(255, 210, 77, 0.45) 58%, transparent 70%);
  background-size: 300% 300%;
  animation: holo-sweep 3.2s ease-in-out infinite;
}
@keyframes holo-sweep { 0% { background-position: 100% 0; } 50% { background-position: 0 100%; } 100% { background-position: 100% 0; } }

.rar-chip {
  display: inline-block; font-size: 11px; font-weight: 800; padding: 2px 8px;
  border-radius: 7px; margin: 1px 2px; background: #3a4070; color: #14101c;
  border: none; cursor: default; font-family: inherit;
}
button.rar-chip { cursor: pointer; opacity: 0.55; }
button.rar-chip.on { opacity: 1; outline: 2px solid #fff3; }
.rar-chip.r-all, .rar-chip.r-ALL { background: #5b6391; color: #fff; }
.rar-chip.r-C { background: var(--c-C); } .rar-chip.r-UC { background: var(--c-UC); }
.rar-chip.r-R { background: var(--c-R); } .rar-chip.r-SR { background: var(--c-SR); }
.rar-chip.r-SSR { background: var(--c-SSR); } .rar-chip.r-UR { background: var(--c-UR); }
.rar-chip.r-LR { background: linear-gradient(135deg, #ffb02e, #ffe9a8); }

/* card detail modal */
.card-detail { display: grid; grid-template-columns: 240px 1fr; gap: 22px; }
.card-detail .tcard { cursor: default; }
.card-detail-side h3 { margin-top: 0; }
.kv { width: 100%; border-collapse: collapse; margin: 10px 0; }
.kv td { padding: 6px 4px; border-bottom: 1px solid #2a2f52; font-size: 14px; }
.kv td:last-child { text-align: right; font-weight: 700; }
@media (max-width: 640px) { .card-detail { grid-template-columns: 1fr; } }

/* ----- home / packs ----------------------------------------------------- */
/* The home page is TWO explicit flex columns (masonry-style): panels stack
   tightly inside each column, so a short tile (like the gold custom-card
   button) never leaves a giant grid-row gap under it on desktop. */
.home { display: grid; grid-template-columns: 1.2fr 1fr; gap: 18px; align-items: start; }
.home-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
@media (max-width: 880px) { .home { grid-template-columns: 1fr; } }
.pack-panel { text-align: center; }
.pack-slots { display: flex; gap: 14px; justify-content: center; margin: 18px 0; flex-wrap: wrap; }
.pack-slot {
  width: 72px; height: 96px; border-radius: 12px; font-size: 34px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #33285e, #1d1738);
  border: 2px solid var(--accent);
}
.pack-slot.ready { animation: bob 2.2s ease-in-out infinite; box-shadow: 0 0 18px rgba(124, 92, 255, 0.45); }
.pack-slot.used { opacity: 0.3; border-color: #3a4070; animation: none; }
@keyframes bob { 50% { transform: translateY(-6px); } }
.pack-timer-row { font-size: 15px; margin-bottom: 14px; }
.pack-timer-row b { color: var(--gold); font-variant-numeric: tabular-nums; }
.howto { display: flex; flex-direction: column; gap: 12px; font-size: 14px; line-height: 1.5; }

/* pack reveal */
.pack-reveal { text-align: center; }
.reveal-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 18px 0; }
.flip { width: 168px; perspective: 900px; opacity: 0; transform: translateY(30px); transition: all 0.35s; }
.flip.dealt { opacity: 1; transform: translateY(0); }
.flip-inner { position: relative; width: 100%; transform-style: preserve-3d; transition: transform 0.55s; }
.flip.flipped .flip-inner { transform: rotateY(180deg); }
/* The front card sits in normal flow and defines the height; the back is
   an absolute overlay covering the entire card, so the whole card face is
   one big tap target. */
.flip-front { position: relative; transform: rotateY(180deg); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.flip-back {
  position: absolute; inset: 0; z-index: 2; cursor: pointer;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  border-radius: 14px; display: flex; align-items: center; justify-content: center;
  font-size: 52px;
  background: repeating-linear-gradient(135deg, #2b2254, #2b2254 14px, #241c46 14px, #241c46 28px);
  border: 2px solid var(--accent);
}
/* Some Android browsers ignore backface-visibility inside a 3D flip and
   keep the 🃏 back painted over the revealed card. Belt-and-suspenders:
   fully hide the back once the card is half-way rotated (edge-on). */
.flip.flipped .flip-back { pointer-events: none; visibility: hidden; transition: visibility 0s 0.28s; }
.flip.rare-glow .flip-front { animation: rare-flash 0.8s; }
@keyframes rare-flash {
  0% { filter: brightness(3) saturate(0); }
  100% { filter: brightness(1); }
}

/* ----- collection ------------------------------------------------------- */
.coll-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.coll-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 10px 0; }
.coll-tools input { max-width: 240px; margin-top: 0; }
.coll-tools select { max-width: 160px; margin-top: 0; }
.rar-filter { display: flex; gap: 3px; flex-wrap: wrap; }

/* ----- friends ---------------------------------------------------------- */
.friend-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  background: var(--bg2); border-radius: 12px; margin: 8px 0; flex-wrap: wrap;
}
.friend-name { font-weight: 700; font-size: 15px; flex: 1; color: var(--ink); }
.dot { width: 10px; height: 10px; border-radius: 50%; background: #4a5078; display: inline-block; flex-shrink: 0; }
.dot.on { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
#fr-results { margin: 10px 0; }
.row.gap input { margin-top: 0; }

/* ----- profile ---------------------------------------------------------- */
.stat-row { display: flex; gap: 12px; flex-wrap: wrap; margin: 14px 0; }
.stat {
  background: var(--bg2); border-radius: 12px; padding: 12px 18px; text-align: center;
  flex: 1; min-width: 110px;
}
.stat b { display: block; font-size: 20px; color: var(--gold); }
.stat span { font-size: 12px; color: var(--muted); }

/* ----- trades ----------------------------------------------------------- */
.trade-box { background: var(--bg2); border-radius: 14px; padding: 14px; margin: 10px 0; }
.trade-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.trade-msg { color: var(--accent2); font-style: italic; margin: 8px 0 4px; }
.trade-sides { display: flex; gap: 14px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.trade-sides > div:not(.trade-arrow) { flex: 1; min-width: 220px; }
.trade-arrow { font-size: 22px; color: var(--muted); }
.mini-strip { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.mini-card {
  font-size: 12px; font-weight: 700; padding: 4px 9px; border-radius: 8px;
  background: var(--panel2); border: none; border-left: 4px solid var(--rar, #3a4070);
  color: var(--ink); font-family: inherit; cursor: pointer; text-align: left;
}
.mini-card:hover { background: var(--accent); color: #fff; }
.mini-card.r-C { --rar: var(--c-C); } .mini-card.r-UC { --rar: var(--c-UC); }
.mini-card.r-R { --rar: var(--c-R); } .mini-card.r-SR { --rar: var(--c-SR); }
.mini-card.r-SSR { --rar: var(--c-SSR); } .mini-card.r-UR { --rar: var(--c-UR); }
.mini-card.r-LR { --rar: var(--c-LR); }
.trade-status { font-weight: 800; font-size: 12px; text-transform: uppercase; padding: 3px 9px; border-radius: 8px; background: #3a4070; }
.trade-status.s-accepted { background: #1d5e3c; color: #9ef5c5; }
.trade-status.s-declined, .trade-status.s-cancelled, .trade-status.s-void { background: #5e1d30; color: #f59eb4; }
.trade-status.s-countered { background: #5e4b1d; color: #f5dc9e; }

.composer { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 880px) { .composer { grid-template-columns: 1fr; } }
.composer-col input { margin-bottom: 8px; }
.picker-grid { max-height: 380px; overflow-y: auto; padding: 4px; grid-template-columns: repeat(auto-fill, minmax(152px, 1fr)); }
.picker input { margin-bottom: 10px; }
/* The picker header (count + power meter + selected-toggle) rides along
   at the top of the modal while the grid scrolls, so your team total and
   the target band never leave the screen. */
.picker-head {
  position: sticky; top: -22px; z-index: 8;
  background: var(--panel); margin: -22px -22px 8px; padding: 18px 22px 8px;
  border-bottom: 1px solid #2a2f52;
}
.picker-head h3 { margin: 0 0 6px; padding-right: 44px; }
.picker-head .power-meter { margin: 0 0 8px; }
.sel-toggle { margin-bottom: 2px; }
.picker-actions {
  position: sticky; bottom: -22px; background: var(--panel);
  padding: 12px 0; margin-bottom: -10px; z-index: 5;
}

/* ----- battles / arena --------------------------------------------------- */
.choice-cards { display: flex; gap: 14px; margin: 14px 0; flex-wrap: wrap; }
.choice {
  flex: 1; min-width: 220px; background: var(--bg2); border: 2px solid #3a4070;
  border-radius: 14px; padding: 16px; cursor: pointer; transition: all 0.15s;
}
.choice:hover { border-color: var(--accent); transform: translateY(-2px); }
.choice.danger:hover { border-color: var(--danger); }
.choice p { color: var(--muted); font-size: 13px; margin: 6px 0 0; }

.arena-head { text-align: center; }
.vs { color: var(--danger); font-style: italic; margin: 0 8px; }

/* Persistent team totals: sticks to the top of the screen during the
   fight so you always know where both teams stand. */
.team-hp-wrap {
  position: sticky; top: 0; z-index: 60;
  background: rgba(13, 15, 26, 0.96);
  border: 1px solid #2a2f52; border-radius: 0 0 14px 14px;
  padding: 10px 14px; margin: 10px -4px;
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center;
  backdrop-filter: blur(8px);
}
.team-hp { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.thp-name {
  font-weight: 800; font-size: 13px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.thbar { height: 14px; background: #11141f; border-radius: 8px; overflow: hidden; border: 1px solid #2a2f52; }
.thfill { height: 100%; width: 100%; border-radius: 8px; transition: width 0.4s; }
.thfill.side-a { background: linear-gradient(90deg, #7c5cff, #b39aff); }
.thfill.side-b { background: linear-gradient(90deg, #ff9a3d, #ffd24d); }
.thp-num { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.team-hp-wrap .countdown { font-size: 16px; white-space: nowrap; }

.arena-floor {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  align-items: start; margin: 16px 0;
}
.arena-side h4 { text-align: center; margin: 4px 0 10px; }
.team { display: flex; flex-direction: column; gap: 10px; }
.fighter { position: relative; opacity: 0.55; transition: all 0.25s; max-width: 230px; margin: 0 auto; width: 100%; }
.fighter.fighting { opacity: 1; transform: scale(1.05); }
.fighter.fighting .tcard { box-shadow: 0 0 22px rgba(124, 92, 255, 0.65); }
.fighter.ko { opacity: 0.25; filter: grayscale(1); }
.fighter.ko::after {
  content: "KO"; position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; font-size: 38px; font-weight: 900; color: var(--danger);
  text-shadow: 0 2px 10px #000; transform: rotate(-12deg);
}
.fighter.shake { animation: shake 0.4s; }
@keyframes shake {
  20% { transform: translateX(-7px); } 40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); } 80% { transform: translateX(3px); }
}
.hpbar { height: 9px; background: #11141f; border-radius: 6px; margin-top: 5px; overflow: hidden; }
.hpfill { height: 100%; width: 100%; background: var(--ok); border-radius: 6px; transition: width 0.35s; }
.hpfill.mid { background: var(--gold); }
.hpfill.low { background: var(--danger); }
.dmg-pop {
  position: absolute; top: 30%; left: 50%; transform: translateX(-50%);
  font-size: 26px; font-weight: 900; color: #ffd5d5; text-shadow: 0 2px 8px #000;
  animation: rise 1.1s forwards; pointer-events: none; z-index: 5; white-space: nowrap;
}
.dmg-pop.crit { color: var(--gold); font-size: 32px; }
@keyframes rise { to { transform: translate(-50%, -46px); opacity: 0; } }
.countdown { font-size: 22px; font-weight: 900; text-align: center; }
.arena-log {
  background: var(--bg2); border-radius: 12px; padding: 10px 14px; min-height: 60px;
  font-size: 13px; line-height: 1.7;
}
.crit-txt { color: var(--gold); }
.result-banner {
  font-size: 40px; font-weight: 900; margin: 18px 0 6px; letter-spacing: 2px;
  animation: rare-flash 0.9s;
}
.result-banner.win { color: var(--gold); text-shadow: 0 0 30px rgba(245, 197, 66, 0.5); }
.result-banner.lose { color: var(--danger); }

/* ----- leaderboard / admin ----------------------------------------------- */
.boards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 880px) { .boards { grid-template-columns: 1fr; } }
.ltable { width: 100%; border-collapse: collapse; font-size: 14px; }
.ltable th {
  text-align: left; color: var(--muted); font-size: 12px; text-transform: uppercase;
  padding: 8px 6px; border-bottom: 2px solid #2a2f52;
}
.ltable td { padding: 8px 6px; border-bottom: 1px solid #232845; }
.ltable .rank { color: var(--gold); font-weight: 800; }
.banned-row { opacity: 0.45; }
.tscroll { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }

/* Super pack */
.super-tile {
  margin-top: 16px; padding: 16px; border-radius: 14px; text-align: center;
  background: linear-gradient(135deg, rgba(212,160,23,0.12), rgba(255,215,0,0.06));
  border: 1px solid rgba(212,160,23,0.45);
}
.super-tile.ready {
  border-color: var(--gold);
  box-shadow: 0 0 24px rgba(255, 215, 0, 0.25);
  animation: superglow 2s infinite;
}
@keyframes superglow { 50% { box-shadow: 0 0 38px rgba(255, 215, 0, 0.45); } }
.super-name { font-weight: 900; font-size: 18px; letter-spacing: 1px; color: var(--gold); }
.super-sub { color: var(--muted); font-size: 13px; margin: 4px 0 8px; }
.btn.gold {
  background: linear-gradient(135deg, #d4a017, #ffd700); color: #211600;
  border: none; font-weight: 900;
}
.btn.gold:hover { filter: brightness(1.1); }

/* Daily boss */
.boss-panel { border-color: rgba(224, 36, 94, 0.5); }
.boss-box { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.boss-card { width: 190px; flex-shrink: 0; filter: drop-shadow(0 0 14px rgba(224, 36, 94, 0.5)); }
.boss-info { flex: 1; min-width: 220px; }
.boss-info h3 { margin: 0 0 6px; }
.boss-stats { font-weight: 800; color: var(--danger); }
.boss-won { font-weight: 900; color: var(--gold); }

/* Challenges */
.chal-h { margin: 14px 0 6px; }
.chal-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border-radius: 10px; background: var(--bg2); margin-bottom: 6px;
}
.chal-row.done { opacity: 0.55; }
.chal-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.chal-main > span:first-child { font-size: 13px; }
.chal-bar { flex: 1; min-width: 80px; height: 8px; background: #11141f; border-radius: 5px; overflow: hidden; }
.chal-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent2)); border-radius: 5px; }
.chal-prog { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.chal-done { color: var(--ok); font-weight: 700; font-size: 13px; }
.chal-right { flex-shrink: 0; }

/* Bot battles */
.bot-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--bg2); border-radius: 12px; padding: 10px 14px; margin-bottom: 12px;
}

/* Favorites */
.fav-star { color: var(--gold); margin-left: auto; flex-shrink: 0; font-size: 14px; }
.spawn-row input { flex: 2; min-width: 180px; margin-top: 0; }
.spawn-row select { flex: 1; min-width: 110px; max-width: 150px; margin-top: 0; }
.log-box {
  background: var(--bg2); border-radius: 12px; padding: 10px 14px; margin: 10px 0;
  max-height: 420px; overflow-y: auto; font-size: 13px; line-height: 1.8;
}
.log-action { color: var(--accent2); font-weight: 700; }
.logline { border-bottom: 1px dashed #232845; padding: 3px 0; }

/* ===== v2.2 additions ================================================== */

/* Clickable pack presents */
.pack-slot { cursor: default; font-family: inherit; padding: 0; }
.pack-slot.ready { cursor: pointer; }
.pack-slot.ready:hover { transform: translateY(-4px) scale(1.05); }
.pack-slot.popping { animation: pop 0.4s ease; }
@keyframes pop { 0% { transform: scale(1); } 50% { transform: scale(1.25) rotate(-6deg); } 100% { transform: scale(0); opacity: 0; } }

/* Confetti */
.confetti-layer { position: fixed; inset: 0; pointer-events: none; z-index: 9999; overflow: hidden; }
.confetti {
  position: absolute; width: 11px; height: 14px; opacity: 0;
  animation: confetti-fly 2.3s cubic-bezier(.2,.6,.3,1) forwards;
}
@keyframes confetti-fly {
  0% { opacity: 1; transform: translate(-50%, -50%) rotate(0); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--cx)), calc(-50% + var(--cy) + 60vh)) rotate(var(--cr)); }
}

/* Power Hour */
.power-flag {
  background: linear-gradient(90deg, #d4a017, #ffd700, #d4a017);
  color: #211600; font-weight: 800; text-align: center; padding: 10px 12px;
  border-radius: 12px; margin-bottom: 12px; animation: superglow 1.6s infinite;
}
.power-strip {
  background: linear-gradient(90deg, #d4a017, #ffd700); color: #211600;
  text-align: center; padding: 8px 12px; cursor: pointer; font-weight: 800;
}

/* Landing page (logged-out visitors) */
.landing { max-width: 1100px; margin: 0 auto; padding: 34px 18px 60px; }
.land-head { text-align: center; margin-bottom: 26px; }
.land-cols {
  display: grid; grid-template-columns: minmax(300px, 420px) minmax(0, 1fr);
  gap: 26px; align-items: start;
}
.land-feats { min-width: 0; }
.feat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; }
.feat {
  background: var(--panel); border: 1px solid #2a2f52; border-radius: 14px;
  padding: 14px;
}
.feat-ico { font-size: 24px; display: block; margin-bottom: 6px; }
.feat b { display: block; font-size: 14px; margin-bottom: 4px; }
.feat p { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
@media (max-width: 880px) {
  .land-cols { grid-template-columns: 1fr; }
  .feat-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) { .feat-grid { grid-template-columns: 1fr; } }

/* Slayer's Mark on the daily boss */
.slayer-mark {
  background: rgba(255, 92, 122, 0.1); border: 1px solid rgba(255, 92, 122, 0.45);
  border-radius: 10px; padding: 8px 12px; font-size: 13px; color: var(--danger);
  margin: 8px 0;
}

/* Chunked grids: the "Show more" sentinel spans the whole row. */
.grid-more { grid-column: 1 / -1; margin: 6px 0; }

/* Rendering perf: let the browser skip painting offscreen cards entirely.
   This is the difference between janky and smooth scrolling on a
   several-thousand-card collection (especially mobile). */
.card-grid .tcard {
  content-visibility: auto;
  contain-intrinsic-size: 160px 250px;
}

/* Friend feed */
.feed-post {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--bg2); border-radius: 14px; padding: 12px; margin: 10px 0;
}
.feed-card { width: 150px; flex-shrink: 0; }
.feed-body { flex: 1; min-width: 0; }
.feed-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.feed-head a { color: var(--ink); }
.feed-del { margin-left: auto; }
.feed-msg { color: var(--accent2); font-style: italic; margin: 6px 0; }
.feed-stats { margin: 6px 0 0; font-size: 13px; }
@media (max-width: 560px) { .feed-card { width: 128px; } }

/* 🎟️ Pack store */
.bundle-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin: 16px 0; }
.bundle {
  text-align: center; padding: 22px 14px; border-radius: 16px;
  background: var(--bg2); border: 1px solid #2a2f52;
}
.bundle-hot { border-color: var(--gold); box-shadow: 0 0 20px rgba(245, 197, 66, 0.2); }
.bundle-packs { font-size: 20px; font-weight: 900; margin-bottom: 4px; }
.bundle-sub { font-size: 12px; margin-bottom: 14px; }
.store-hint { font-size: 13px; margin: 4px 0 0; }
.store-hint a { color: var(--gold); font-weight: 700; }

/* Ranked wager */
.choice.ranked { border-color: var(--gold); }
.choice.ranked:hover { box-shadow: 0 0 18px rgba(245, 197, 66, 0.35); }
.ranked-note { margin: 6px 0 0; font-size: 13px; }
.power-meter {
  border-radius: 10px; padding: 9px 12px; margin: 8px 0 10px;
  font-size: 13px; font-weight: 600; border: 1px solid #3a4070;
  background: var(--bg2);
}
.power-meter.in-band { border-color: var(--ok); color: var(--ok); background: rgba(65, 217, 141, 0.08); }
.power-meter.over-band { border-color: var(--danger); color: var(--danger); background: rgba(255, 92, 122, 0.08); }
.power-meter.under-band { border-color: var(--gold); color: var(--gold); background: rgba(245, 197, 66, 0.08); }

/* Prominent "make a custom card" tile (sits right under the pack panel) */
.submit-tile {
  display: flex; align-items: center; gap: 14px; width: 100%;
  text-align: left; cursor: pointer; font-family: inherit;
  padding: 14px 18px; border-radius: 16px;
  background: linear-gradient(135deg, rgba(212,160,23,0.16), rgba(255,215,0,0.07));
  border: 2px solid var(--gold); color: var(--ink);
  box-shadow: 0 0 18px rgba(255, 215, 0, 0.18);
  transition: all 0.15s;
}
.submit-tile:hover { box-shadow: 0 0 30px rgba(255, 215, 0, 0.4); transform: translateY(-2px); }
.submit-plus {
  flex-shrink: 0; width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #d4a017, #ffd700); color: #211600;
  font-size: 32px; font-weight: 900; line-height: 1;
}
.submit-txt b { font-size: 16px; display: block; }
.submit-txt small { color: var(--muted); line-height: 1.4; display: block; margin-top: 2px; }

/* Showcase reorder */
.ro-item { position: relative; }
.ro-item.dragging { opacity: 0.4; }
.ro-item.drop-target { outline: 3px dashed var(--gold); outline-offset: 3px; border-radius: 14px; }
.ro-pos {
  position: absolute; top: -8px; left: -8px; z-index: 5;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent); color: #fff; font-weight: 900; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.ro-btns { display: flex; gap: 6px; justify-content: center; margin-top: 6px; }
.ro-btns .btn { flex: 1; }

/* Weekly boss */
.weekly-panel { border-color: rgba(124, 92, 255, 0.5); }
.weekly-hp { margin: 8px 0; }
.weekly-hp-bar { height: 16px; background: #11141f; border: 1px solid #2a2f52; border-radius: 8px; overflow: hidden; }
.weekly-hp-fill { height: 100%; background: linear-gradient(90deg, #b3123e, #ff5c7a); border-radius: 8px; transition: width 0.5s; }
.weekly-hp span { font-size: 12px; color: var(--muted); }
.boss-attempts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }

/* Submit-a-card */
.submit-form textarea, .submit-form input { width: 100%; }
.submit-form textarea {
  background: var(--bg2); border: 1px solid #3a4070; border-radius: 10px;
  color: var(--ink); padding: 10px; font-family: inherit; margin-top: 4px;
}
.sub-list { display: flex; flex-direction: column; gap: 10px; }
.sub-card { display: flex; gap: 12px; background: var(--bg2); border-radius: 12px; padding: 10px; }
.sub-img { width: 90px; flex-shrink: 0; }
.sub-img img { width: 90px; height: 90px; object-fit: cover; border-radius: 8px; }
.sub-noimg { width: 90px; height: 90px; display: flex; align-items: center; justify-content: center; background: var(--panel2); border-radius: 8px; color: var(--muted); font-size: 11px; }
.sub-body { flex: 1; min-width: 0; }

/* Shop */
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 12px; }

/* Daily auction (the shop's 11th slot: one community card on the block) */
.auction-box {
  margin-top: 22px; padding: 16px; border-radius: 16px;
  border: 2px solid var(--gold);
  background: linear-gradient(135deg, rgba(212,160,23,0.10), rgba(124,92,255,0.06));
}
.auction-body { display: flex; gap: 16px; align-items: flex-start; margin-top: 10px; }
.auction-card { width: 180px; flex-shrink: 0; }
.auction-info { flex: 1; min-width: 0; }
.auction-lead { font-weight: 700; margin: 8px 0; }
.auction-lead.you { color: var(--gold); }
.auction-bid-row { align-items: stretch; }
.auction-bid-row input { max-width: 180px; margin-top: 0; }
.small-note { font-size: 12px; margin: 6px 0 0; }

/* Admin: pager controls above/below the paged submissions & rotation lists */
.admin-pager { align-items: center; margin: 10px 0; }
.admin-pager .muted { font-size: 13px; }
.shop-item { display: flex; flex-direction: column; gap: 6px; }
.shop-item.bought { opacity: 0.55; }
.shop-price { text-align: center; }

/* Battle preview strip */
.battle-preview { margin-top: 8px; }
.mini-stat { color: var(--muted); font-size: 10px; }

/* Head-to-head stat highlight */
.stat.h2h b { color: var(--accent2); }

/* Mutual duplicate sell */
.sell-box { border: 1px solid rgba(245, 197, 66, 0.4); }
.dupe-list { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; max-height: 50vh; overflow-y: auto; }
.dupe-row {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: var(--bg2); border: 2px solid transparent; border-radius: 10px;
  padding: 8px 10px; cursor: pointer; color: var(--ink); font-family: inherit;
}
.dupe-row.on { border-color: var(--gold); background: rgba(245, 197, 66, 0.1); }
.dupe-title { flex: 1; min-width: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dupe-counts { font-size: 11px; flex-shrink: 0; }
.dupe-val { color: var(--gold); font-weight: 800; flex-shrink: 0; }

/* Trade composer: bounded, independent scroll panes so you never wade
   through your whole collection to reach your friend's cards. */
.composer .picker-grid { max-height: 360px; overflow-y: auto; }

/* ===== v3.1.0 additions ================================================ */

/* Super pack: buy-an-extra button under the daily one */
.super-buy-row { margin-top: 10px; }

/* Practice battle lockout note */
.practice-note { width: 100%; margin: 8px 0 0; font-size: 13px; }

/* Custom-card framing preview (submit form + pool editor) */
.crop-box { margin: 10px 0; }
.crop-frame {
  aspect-ratio: 4 / 3; max-width: 260px; margin: 6px 0;
  border-radius: 12px; overflow: hidden; background: #0a0c16;
  border: 2px solid #3a4070;
}
.crop-frame img { width: 100%; height: 100%; object-fit: cover; object-position: center 50%; display: block; }
.crop-box input[type="range"] { max-width: 260px; padding: 0; accent-color: var(--accent); }
.crop-note { font-size: 12px; margin: 4px 0 0; }

/* GOD per-card framing control in the card detail modal */
.cm-framing {
  margin-top: 14px; padding-top: 10px; border-top: 1px dashed #3a4070;
}
.cm-framing select { max-width: 280px; }
.cm-framing .btn { margin-top: 8px; }

/* 📁 Card folders (profile, beneath the showcase) */
.folder-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  background: var(--bg2); border-radius: 12px; margin: 8px 0; flex-wrap: wrap;
}
.folder-name { flex: 1; min-width: 160px; }
.folder-vis {
  font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: 8px;
  flex-shrink: 0;
}
.folder-vis.pub { background: rgba(65, 217, 141, 0.15); color: var(--ok); border: 1px solid rgba(65, 217, 141, 0.5); }
.folder-vis.priv { background: rgba(245, 197, 66, 0.12); color: var(--gold); border: 1px solid rgba(245, 197, 66, 0.5); }

/* ===== v3.2.0 "Engagement Update" ====================================== */

/* Clickable toasts (nudges that lead somewhere) */
.toast.linky { cursor: pointer; border: 1px solid var(--accent2); }
.toast.linky:hover { filter: brightness(1.15); }

/* 🔥 streak chip in the header */
.streak-chip { color: var(--gold); }

/* F13: waiting pack button keeps its size but reads as a timer */
.pack-btn-wait { opacity: 0.65; cursor: default; font-variant-numeric: tabular-nums; }
.pack-btn-wait b { color: var(--gold); }

/* F5: zero-state strip under the pack button — never a dead end */
.zero-strip {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  flex-wrap: wrap; margin: 10px auto 0; padding: 8px 12px;
  background: var(--bg2); border-radius: 12px; max-width: 460px;
  font-size: 13px;
}

/* F6: pity meter */
.pity-row { max-width: 420px; margin: 0 auto 10px; }
.pity-bar { height: 8px; background: #11141f; border: 1px solid #2a2f52; border-radius: 5px; overflow: hidden; }
.pity-fill { height: 100%; background: linear-gradient(90deg, #6b4d0e, var(--c-LR)); border-radius: 5px; transition: width 0.5s; }
.pity-label { font-size: 11.5px; color: var(--muted); }
.pity-label b { color: var(--c-LR); }

/* F5: window-exhaustion summary */
.burst-sum { text-align: center; }
.burst-best { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin: 10px 0; }
.burst-pick { width: 170px; }
.burst-pick > .muted { display: block; font-size: 11px; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 1px; }
.burst-timer b { color: var(--gold); font-variant-numeric: tabular-nums; }
.sum-sug {
  display: block; width: 100%; text-align: left; margin: 6px 0;
  background: var(--bg2); border: 1px solid #3a4070; border-radius: 10px;
  padding: 10px 12px; color: var(--ink); font-family: inherit; font-size: 14px;
  font-weight: 600; cursor: pointer;
}
.sum-sug:hover { border-color: var(--accent); background: var(--panel2); }
.day1-hook { color: var(--gold); font-weight: 700; margin: 12px 0 0; }

/* 💝 wishlist pull-match line in the reveal */
.wish-line { background: rgba(245, 197, 66, 0.1); border: 1px solid rgba(245, 197, 66, 0.4);
  border-radius: 10px; padding: 8px 12px; margin: 10px auto; max-width: 520px; font-size: 14px; }

/* 🔁 suggested swap + offer rows */
.swap-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--bg2); border-radius: 12px; padding: 10px 14px; margin: 10px 0;
  font-size: 13px;
}
.offer-row { width: 100%; text-align: left; border: none; cursor: pointer; font-family: inherit; font-size: 14px; }
.offer-row:hover { background: var(--panel2); }
.rivalry-line { margin: 4px 0 10px; font-size: 13px; }
.rivalry-line b { color: var(--gold); }

/* 🎁 welcome journey */
.journey-panel { border-color: rgba(245, 197, 66, 0.5); }
.journey-row { display: flex; gap: 12px; flex-wrap: wrap; }
.journey-chest {
  flex: 1; min-width: 130px; text-align: center; padding: 12px 8px;
  background: var(--bg2); border: 1px solid #3a4070; border-radius: 12px;
}
.journey-chest.claimable { border-color: var(--gold); box-shadow: 0 0 16px rgba(255, 215, 0, 0.25); animation: superglow 2s infinite; }
.journey-chest.claimed { opacity: 0.55; }
.chest-ico { font-size: 28px; }
.chest-label { font-size: 12px; font-weight: 700; margin: 6px 0; line-height: 1.35; }
.chest-state { font-size: 12px; color: var(--muted); }

/* 🌅 while-you-were-away */
.away-box h3 { margin-top: 0; }
.away-item .folder-vis { float: right; }

/* ⚡ frenzy */
.frenzy-strip, .frenzy-flag { background: linear-gradient(90deg, #1d8a5a, #41d98d); color: #04150c; }

/* 📣 feed reactions + comments */
.react-bar { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 8px; }
.react-btn {
  border: 1px solid #3a4070; background: var(--panel2); color: var(--ink);
  border-radius: 999px; padding: 3px 9px; font-size: 13px; cursor: pointer;
  font-family: inherit;
}
.react-btn b { font-size: 11px; }
.react-btn.on { border-color: var(--gold); background: rgba(245, 197, 66, 0.15); }
.react-btn:hover { filter: brightness(1.2); }
.cmt-box { margin-top: 8px; border-top: 1px dashed #2a2f52; padding-top: 8px; }
.cmt-row { font-size: 13px; line-height: 1.6; padding: 2px 0; }
.cmt-del { border: none; background: none; color: var(--danger); cursor: pointer; font-size: 11px; }
.cmt-add { margin-top: 8px; }
.cmt-add input { margin-top: 0; font-size: 13px; }
.community-post { border: 1px solid rgba(255, 176, 46, 0.35); }

/* 🏰 gauntlet */
.gauntlet-row { border: 1px solid rgba(255, 176, 46, 0.4); flex-direction: column; align-items: flex-start; }
.gauntlet-row .row { margin-top: 4px; }

/* ===== v3.3.0 ========================================================== */

/* 📁 folder chips: one slim row at the top of the collection / profile —
   horizontally scrollable so it NEVER pushes the card grid down. */
.folder-chips {
  display: flex; gap: 6px; align-items: center; overflow-x: auto;
  padding: 4px 0 6px; margin: 6px 0; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.folder-chip {
  flex-shrink: 0; border: 1px solid #3a4070; background: var(--panel2);
  color: var(--ink); border-radius: 999px; padding: 5px 12px;
  font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit;
  white-space: nowrap;
}
.folder-chip b { color: var(--gold); }
.folder-chip:hover { border-color: var(--accent); }
.folder-chip.new { border-style: dashed; color: var(--muted); }
.chip-lock { font-size: 11px; }
.folder-strip { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 8px 0 2px; }
.folder-strip-label { font-weight: 700; font-size: 14px; flex-shrink: 0; }
.folder-strip .folder-chips { flex: 1; min-width: 200px; margin: 0; }
.folder-manage { margin: 4px 0 10px; }

/* ⬆ trade-up result card */
.tu-card { width: 190px; margin: 12px auto; }

/* 📱 iOS install steps in Settings */
.ios-steps { text-align: left; font-size: 13px; line-height: 1.6; padding-left: 20px; }

/* 🖥️ Big desktops: popups (card pickers, trade composer, card details)
   get real room instead of a phone-sized box lost in the middle. */
@media (min-width: 1440px) and (min-height: 900px) {
  .modal { max-width: 1180px; max-height: 94vh; }
  .picker-grid { max-height: 62vh; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); }
  .composer .picker-grid { max-height: 56vh; }
  .card-detail { grid-template-columns: 300px 1fr; }
}

@media (max-width: 640px) {
  .topbar { padding: 8px 10px; gap: 8px; }
  .nav-item { padding: 6px 8px; font-size: 12px; }
  .main { padding: 10px; }
  .card-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }

  /* Modals go full-screen on phones. */
  .modal-wrap { padding: 0; align-items: stretch; }
  .modal {
    border-radius: 0; max-width: none; max-height: none;
    min-height: 100vh; min-height: 100dvh; width: 100%;
    padding: 16px 14px 28px;
  }
  .modal-x { width: 44px; height: 44px; font-size: 19px; }
  .picker-grid { max-height: none; overflow-y: visible; }
  .picker-head { top: -16px; margin: -16px -14px 8px; padding: 12px 14px 8px 14px; }
  .picker-head h3 { padding-right: 48px; font-size: 16px; }
  .picker-actions { bottom: 0; margin: 0 -14px -28px; padding: 12px 14px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid #2a2f52; }
  .boss-box { flex-direction: row; }
  .boss-card { width: 42vw; max-width: 180px; }

  /* Pack reveal: a REAL 2-column grid (2-2-1 with the last card centered).
     The old flex row overflowed by a few px on some Android screens and
     wrapped into a single stacked column — a grid can't do that. */
  .reveal-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; justify-items: center; }
  .flip { width: 100%; max-width: 200px; }
  .flip:nth-child(odd):last-child { grid-column: 1 / -1; }
  .flip-back { font-size: 44px; }

  /* Pack reveal: Flip All / Done stay pinned at the bottom of the screen
     so you never have to scroll to reach them. */
  .reveal-actions {
    position: sticky; bottom: 0; z-index: 6;
    background: var(--panel); margin: 0 -14px -28px;
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid #2a2f52;
  }

  /* Battle arena: teams stay side-by-side even in portrait, with
     compact fighter cards built for at-a-glance reading. min-width: 0
     lets both columns shrink equally, and the active fighter glows
     instead of scaling — scaling pushed the right column's DEF numbers
     off the screen edge and made opponent cards render bigger. */
  .arena-floor { grid-template-columns: 1fr 1fr; gap: 8px; }
  .arena-side, .team { min-width: 0; }
  .fighter { max-width: none; min-width: 0; }
  .fighter.fighting { transform: none; }
  .fighter.fighting .tcard { box-shadow: 0 0 16px rgba(124, 92, 255, 0.85); }
  .fighter .tcard-name { font-size: 11px; }
  .fighter .tcard-stats { font-size: 11px; padding: 5px 6px; }
  .fighter .tcard-stats .st-q { display: none; }
  .fighter .tcard-art { aspect-ratio: 5 / 3; }
  .dmg-pop { font-size: 20px; }
  .dmg-pop.crit { font-size: 24px; }
  .team-hp-wrap { grid-template-columns: 1fr 1fr; margin: 10px -10px; border-radius: 0; }
  .team-hp-wrap .countdown { grid-column: 1 / -1; order: -1; font-size: 14px; }
  .result-banner { font-size: 30px; }

  /* Wide tables scroll inside their own box, never the page. */
  .ltable { font-size: 12px; }
  .spawn-row input, .spawn-row select { min-width: 100%; }

  /* Trade composer: each column gets its OWN bounded scroll pane so you
     don't scroll past all your cards to reach your friend's. */
  .composer { grid-template-columns: 1fr; gap: 12px; }
  .composer .picker-grid { max-height: 42vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }

  .shop-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .auction-body { flex-direction: column; align-items: center; }
  .auction-card { width: 60vw; max-width: 220px; }
  .sub-card { flex-direction: column; }
  .sub-img, .sub-img img, .sub-noimg { width: 100%; height: auto; }
  .sub-img img { max-height: 200px; }
}