/* ==========================================================================
   Cosmetics: how names, titles, badges and board themes look.
   Catalog + prices: supabase/functions/_shared/cosmetics.js
   ========================================================================== */

/* ---------- a styled player name ---------- */
.pname { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; max-width: 100%; }
.pname .pn { overflow: hidden; text-overflow: ellipsis; }
.pbadge { width: 1em; height: 1em; flex: none; align-self: center; }
.ptitle {
  flex-basis: 100%;
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  color: var(--muted);
  text-transform: uppercase;
  line-height: 1.3;
}
.ptitle.rare { color: #7fb3d5; }
.ptitle.epic { color: #c49bff; }
.ptitle.legendary { color: #ffcf6b; text-shadow: 0 0 6px rgba(255, 207, 107, 0.35); }

/* name colours */

.nc-sunset .pbadge { color: #ff7a59; }
.nc-sunset .pn {
  background: linear-gradient(90deg, #ff4fa3, #ff7a59, #ffc857);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 4px rgba(255, 122, 89, 0.4));
}
.nc-aurora .pbadge { color: #5ef6ff; }
.nc-aurora .pn {
  background: linear-gradient(90deg, #7dff9b, #5ef6ff, #b98cff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 4px rgba(94, 246, 255, 0.4));
}
.nc-gold .pbadge { color: #ffcf6b; }
.nc-gold .pn {
  background: linear-gradient(100deg, #b8862b 0%, #ffe9a3 35%, #ffcf6b 50%, #ffe9a3 65%, #b8862b 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: nc-shimmer 4s linear infinite;
  filter: drop-shadow(0 0 5px rgba(255, 207, 107, 0.45));
}
.nc-chroma .pbadge { color: #ff5ec8; }
.nc-chroma .pn {
  color: #f4f7ff;
  text-shadow: -1.5px 0 rgba(255, 77, 94, 0.85), 1.5px 0 rgba(94, 246, 255, 0.85);
  animation: nc-glitch 3.2s steps(1) infinite;
}
@keyframes nc-shimmer { from { background-position: 100% 0; } to { background-position: -150% 0; } }
@keyframes nc-glitch {
  0%, 100% { text-shadow: -1.5px 0 rgba(255, 77, 94, 0.85), 1.5px 0 rgba(94, 246, 255, 0.85); }
  92% { text-shadow: 2px 0 rgba(255, 77, 94, 0.9), -2px 0 rgba(94, 246, 255, 0.9); }
  95% { text-shadow: -3px 1px rgba(255, 77, 94, 0.9), 3px -1px rgba(94, 246, 255, 0.9); }
}
.pbadge.b-sigil { animation: b-pulse 2.6s ease-in-out infinite; }
@keyframes b-pulse { 50% { filter: drop-shadow(0 0 4px currentColor); } }

@media (prefers-reduced-motion: reduce) {
  .nc-gold .pn, .nc-chroma .pn, .pbadge.b-sigil { animation: none; }
}

/* ---------- board themes ----------
   A theme recolours one area: the primary (yellow), secondary (cyan) and
   danger (red) colours of everything inside it. Kept readable on dark. */
[data-theme] { --theme-tint: transparent; }
[data-theme="amber_crt"] {
  --yellow: #ffb000; --yellow-dim: rgba(255, 176, 0, 0.35); --yellow-faint: rgba(255, 176, 0, 0.08);
  --cyan: #ffd479; --cyan-dim: rgba(255, 212, 121, 0.4); --cyan-faint: rgba(255, 212, 121, 0.09);
  --red: #ff5a36; --red-dim: rgba(255, 90, 54, 0.4);
  --theme-tint: rgba(255, 176, 0, 0.035);
}
[data-theme="toxic"] {
  --yellow: #a8ff3e; --yellow-dim: rgba(168, 255, 62, 0.35); --yellow-faint: rgba(168, 255, 62, 0.07);
  --cyan: #3effa0; --cyan-dim: rgba(62, 255, 160, 0.4); --cyan-faint: rgba(62, 255, 160, 0.08);
  --red: #ff3ea5; --red-dim: rgba(255, 62, 165, 0.4);
  --theme-tint: rgba(168, 255, 62, 0.03);
}
[data-theme="ice_protocol"] {
  --yellow: #bfe9ff; --yellow-dim: rgba(191, 233, 255, 0.35); --yellow-faint: rgba(191, 233, 255, 0.07);
  --cyan: #4fc3ff; --cyan-dim: rgba(79, 195, 255, 0.45); --cyan-faint: rgba(79, 195, 255, 0.1);
  --red: #ff6b8b; --red-dim: rgba(255, 107, 139, 0.4);
  --theme-tint: rgba(79, 195, 255, 0.04);
}
[data-theme="blood_moon"] {
  --yellow: #ff6b6b; --yellow-dim: rgba(255, 107, 107, 0.35); --yellow-faint: rgba(255, 107, 107, 0.07);
  --cyan: #ffc2b4; --cyan-dim: rgba(255, 194, 180, 0.4); --cyan-faint: rgba(255, 194, 180, 0.08);
  --red: #ffe066; --red-dim: rgba(255, 224, 102, 0.4);
  --theme-tint: rgba(255, 60, 60, 0.05);
}
[data-theme="ghost_mono"] {
  --yellow: #e8e8e8; --yellow-dim: rgba(232, 232, 232, 0.3); --yellow-faint: rgba(232, 232, 232, 0.06);
  --cyan: #ffffff; --cyan-dim: rgba(255, 255, 255, 0.4); --cyan-faint: rgba(255, 255, 255, 0.08);
  --red: #ff4d5e; --red-dim: rgba(255, 77, 94, 0.4);
  --theme-tint: rgba(255, 255, 255, 0.025);
}
[data-theme="vaporwave"] {
  --yellow: #ff71ce; --yellow-dim: rgba(255, 113, 206, 0.35); --yellow-faint: rgba(255, 113, 206, 0.08);
  --cyan: #01cdfe; --cyan-dim: rgba(1, 205, 254, 0.45); --cyan-faint: rgba(1, 205, 254, 0.09);
  --red: #fffb96; --red-dim: rgba(255, 251, 150, 0.4);
  --theme-tint: rgba(185, 103, 255, 0.05);
}
[data-theme="abyss"] {
  --yellow: #00f5d4; --yellow-dim: rgba(0, 245, 212, 0.35); --yellow-faint: rgba(0, 245, 212, 0.07);
  --cyan: #4cc9f0; --cyan-dim: rgba(76, 201, 240, 0.45); --cyan-faint: rgba(76, 201, 240, 0.09);
  --red: #f72585; --red-dim: rgba(247, 37, 133, 0.4);
  --theme-tint: rgba(0, 60, 120, 0.12);
}
[data-theme="synthwave"] {
  --yellow: #ff2a6d; --yellow-dim: rgba(255, 42, 109, 0.4); --yellow-faint: rgba(255, 42, 109, 0.08);
  --cyan: #05d9e8; --cyan-dim: rgba(5, 217, 232, 0.45); --cyan-faint: rgba(5, 217, 232, 0.09);
  --red: #ffd319; --red-dim: rgba(255, 211, 25, 0.45);
  --theme-tint: rgba(120, 20, 140, 0.12);
}
/* the tint sits behind the board area */
[data-theme] .panel, [data-theme].panel { background-image: linear-gradient(var(--theme-tint), var(--theme-tint)); }

/* a rival without a theme, inside YOUR themed board: back to the defaults */
[data-theme="default"] {
  --yellow: #d0ed57; --yellow-dim: rgba(208, 237, 87, 0.35); --yellow-faint: rgba(208, 237, 87, 0.07);
  --cyan: #5ef6ff; --cyan-dim: rgba(94, 246, 255, 0.4); --cyan-faint: rgba(94, 246, 255, 0.09);
  --red: #ff4d5e; --red-dim: rgba(255, 77, 94, 0.4);
  --theme-tint: transparent;
}

/* ======================= v2: gradient colours ======================= */
.nc-ember .pbadge { color: #ff6a2b; }
.nc-ember .pn {
  background: linear-gradient(90deg, #ffd23f, #ff6a2b, #ff2a4a);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 4px rgba(255, 106, 43, 0.45));
}
.nc-toxicfade .pbadge { color: #8cff3e; }
.nc-toxicfade .pn {
  background: linear-gradient(90deg, #e9ff3e, #8cff3e, #2effc0);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 4px rgba(140, 255, 62, 0.4));
}
.nc-holo .pbadge { color: #b6f0ff; }
.nc-holo .pn {
  background: linear-gradient(90deg, #ff9df0, #9df6ff, #c3ff9d, #fff59d, #ff9df0);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: nc-shimmer 6s linear infinite;
  filter: drop-shadow(0 0 5px rgba(182, 240, 255, 0.5));
}

/* ======================= nameplates =======================
   A frame behind the name. --plate-glow can be repainted with a paint can. */
.pname.np { padding: 2px 8px; border: 1px solid transparent; --plate-glow: var(--cyan); }
.np-p_scan { background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.07) 0 1px, transparent 1px 3px); border-color: rgba(255, 255, 255, 0.12) !important; }
.np-p_hazard { background: repeating-linear-gradient(135deg, rgba(255, 210, 0, 0.16) 0 6px, rgba(0, 0, 0, 0.35) 6px 12px); border-color: rgba(255, 210, 0, 0.35) !important; }
.np-p_mesh {
  background-color: rgba(94, 246, 255, 0.04);
  background-image: radial-gradient(rgba(94, 246, 255, 0.22) 1px, transparent 1.2px);
  background-size: 6px 6px; border-color: rgba(94, 246, 255, 0.2) !important;
}
.np-p_circuit {
  background: linear-gradient(90deg, rgba(94, 246, 255, 0.05), rgba(94, 246, 255, 0.02));
  border-color: rgba(94, 246, 255, 0.25) !important;
  border-left: 3px solid var(--plate-glow) !important;
  box-shadow: inset -10px 0 0 -8px var(--plate-glow);
}
.np-p_neon { border-color: var(--plate-glow) !important; box-shadow: 0 0 6px var(--plate-glow), inset 0 0 5px var(--plate-glow); border-radius: 3px; }
.np-p_rain { background: repeating-linear-gradient(100deg, rgba(120, 255, 200, 0.10) 0 1px, transparent 1px 7px), rgba(0, 40, 30, 0.35); border-color: rgba(120, 255, 200, 0.25) !important; }
.np-p_glitch {
  background: linear-gradient(transparent 0 30%, rgba(255, 77, 94, 0.18) 30% 42%, transparent 42% 64%, rgba(94, 246, 255, 0.18) 64% 74%, transparent 74%);
  border-left: 2px solid #ff4d5e !important; border-right: 2px solid #5ef6ff !important;
}
.np-p_void { background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.9), rgba(40, 0, 60, 0.55)); border-color: rgba(160, 90, 255, 0.35) !important; box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.9), 0 0 4px var(--plate-glow); }
.np-p_gold { background: linear-gradient(rgba(255, 207, 107, 0.08), rgba(255, 207, 107, 0.02)); border-color: #ffcf6b !important; box-shadow: 0 0 6px rgba(255, 207, 107, 0.35); outline: 1px solid rgba(255, 207, 107, 0.35); outline-offset: 2px; }
.np-p_aurora {
  background: linear-gradient(90deg, rgba(125, 255, 155, 0.16), rgba(94, 246, 255, 0.16), rgba(185, 140, 255, 0.18), rgba(125, 255, 155, 0.16));
  background-size: 300% 100%; animation: nc-shimmer 8s linear infinite; border-color: rgba(185, 140, 255, 0.35) !important;
}
@media (prefers-reduced-motion: reduce) { .np-p_aurora, .nc-holo .pn { animation: none; } }

/* ======================= more board themes ======================= */
[data-theme="cobalt"] {
  --yellow: #7aa2ff; --yellow-dim: rgba(122, 162, 255, 0.35); --yellow-faint: rgba(122, 162, 255, 0.08);
  --cyan: #b4f1ff; --cyan-dim: rgba(180, 241, 255, 0.4); --cyan-faint: rgba(180, 241, 255, 0.08);
  --red: #ff6f91; --red-dim: rgba(255, 111, 145, 0.4);
  --theme-tint: rgba(40, 70, 160, 0.08);
}
[data-theme="rust_belt"] {
  --yellow: #e2895b; --yellow-dim: rgba(226, 137, 91, 0.35); --yellow-faint: rgba(226, 137, 91, 0.07);
  --cyan: #e8c89b; --cyan-dim: rgba(232, 200, 155, 0.4); --cyan-faint: rgba(232, 200, 155, 0.08);
  --red: #ff4d4d; --red-dim: rgba(255, 77, 77, 0.4);
  --theme-tint: rgba(120, 60, 20, 0.08);
}
[data-theme="neon_noir"] {
  --yellow: #f2f2f2; --yellow-dim: rgba(242, 242, 242, 0.3); --yellow-faint: rgba(242, 242, 242, 0.05);
  --cyan: #ff2e63; --cyan-dim: rgba(255, 46, 99, 0.45); --cyan-faint: rgba(255, 46, 99, 0.09);
  --red: #08d9d6; --red-dim: rgba(8, 217, 214, 0.4);
  --theme-tint: rgba(0, 0, 0, 0.25);
}
[data-theme="goldrush"] {
  --yellow: #ffcf6b; --yellow-dim: rgba(255, 207, 107, 0.4); --yellow-faint: rgba(255, 207, 107, 0.08);
  --cyan: #fff1c1; --cyan-dim: rgba(255, 241, 193, 0.45); --cyan-faint: rgba(255, 241, 193, 0.09);
  --red: #ff7b54; --red-dim: rgba(255, 123, 84, 0.4);
  --theme-tint: rgba(255, 190, 70, 0.06);
}

/* ======================= victory banners ======================= */
.vbanner {
  display: block;
  margin: 0 0 12px;
  padding: 14px 16px;
  text-align: center;
  font-size: clamp(1.1rem, 4.5vw, 2rem);
  letter-spacing: 0.2em;
  color: var(--yellow);
  border: 1px solid var(--yellow-dim);
  background: linear-gradient(90deg, transparent, var(--yellow-faint), transparent);
  text-shadow: 0 0 10px var(--yellow-dim);
  animation: vb-in 0.6s ease-out both;
  overflow-wrap: anywhere;
}
.vbanner small { display: block; font-size: 0.7rem; letter-spacing: 0.2em; color: var(--muted); margin-top: 4px; text-shadow: none; }
.vbanner.rare { color: #9fd8ff; border-color: rgba(159, 216, 255, 0.5); background: linear-gradient(90deg, transparent, rgba(159, 216, 255, 0.1), transparent); text-shadow: 0 0 12px rgba(159, 216, 255, 0.6); }
.vbanner.epic { color: #d7b8ff; border-color: rgba(185, 140, 255, 0.6); background: linear-gradient(90deg, rgba(185, 140, 255, 0.04), rgba(185, 140, 255, 0.16), rgba(185, 140, 255, 0.04)); text-shadow: 0 0 14px rgba(185, 140, 255, 0.7), 2px 0 rgba(255, 77, 94, 0.4), -2px 0 rgba(94, 246, 255, 0.4); }
.vbanner.legendary { color: #ffe9a3; border-color: #ffcf6b; background: linear-gradient(90deg, rgba(255, 207, 107, 0.03), rgba(255, 207, 107, 0.16), rgba(255, 207, 107, 0.03)); box-shadow: 0 0 18px rgba(255, 207, 107, 0.35); text-shadow: 0 0 12px rgba(255, 207, 107, 0.8); }
.vbanner.defeat { color: var(--red); border-color: var(--red-dim); background: linear-gradient(90deg, transparent, rgba(255, 77, 94, 0.08), transparent); text-shadow: 0 0 10px var(--red-dim); }
@keyframes vb-in { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .vbanner { animation: none; } }

/* ======================= upload effects =======================
   NetStyle.playEffect(el, id) adds .fx + .fx-<id> for a moment. */
.fx-host { position: relative; } /* only added when the element isn't positioned already */
.fx::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.fx-fx_sparks::after { background: radial-gradient(circle, rgba(255, 220, 120, 0.9) 0 2px, transparent 3px) 0 0 / 14px 14px; animation: fx-pop 0.7s ease-out forwards; }
.fx-fx_ring::after { border: 2px solid var(--cyan); border-radius: 4px; animation: fx-ring 0.7s ease-out forwards; }
.fx-fx_glitch { animation: fx-glitch 0.5s steps(2) 2; }
.fx-fx_glitch::after { background: linear-gradient(transparent 0 40%, rgba(255, 77, 94, 0.4) 40% 50%, transparent 50% 70%, rgba(94, 246, 255, 0.4) 70% 78%, transparent 78%); animation: fx-fade 0.8s steps(4) forwards; }
.fx-fx_rain::after { background: repeating-linear-gradient(90deg, rgba(120, 255, 200, 0.55) 0 1px, transparent 1px 6px); animation: fx-rain 0.9s linear forwards; }
.fx-fx_shatter::after { background: conic-gradient(from 45deg, rgba(255, 255, 255, 0.35) 0 25%, transparent 0 50%, rgba(255, 255, 255, 0.35) 0 75%, transparent 0) 0 0 / 8px 8px; animation: fx-shatter 0.8s ease-out forwards; }
.fx-fx_nova::after { background: radial-gradient(circle, rgba(255, 255, 255, 0.95), rgba(255, 207, 107, 0.6) 30%, rgba(255, 42, 109, 0.3) 55%, transparent 70%); animation: fx-nova 0.9s ease-out forwards; }
@keyframes fx-pop { from { opacity: 1; transform: scale(0.6); } to { opacity: 0; transform: scale(1.6); } }
@keyframes fx-ring { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(1.35); } }
@keyframes fx-glitch { 50% { transform: translateX(2px); filter: hue-rotate(90deg); } }
@keyframes fx-fade { from { opacity: 1; } to { opacity: 0; } }
@keyframes fx-rain { from { opacity: 1; transform: translateY(-60%); } to { opacity: 0; transform: translateY(60%); } }
@keyframes fx-shatter { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(1.5) rotate(8deg); } }
@keyframes fx-nova { from { opacity: 1; transform: scale(0.3); } to { opacity: 0; transform: scale(2); } }
@media (prefers-reduced-motion: reduce) { .fx::after, .fx { animation: none !important; } }

/* ======================= name colours v3: effects only =======================
   Plain colours are what paint is for. Every name colour here does something
   a paint can can't: two tones, glow, motion, sparkles. */
.nc-c_riptide .pbadge { color: #5ef6ff; }
.nc-c_riptide .pn {
  background: linear-gradient(90deg, #8ff9ff, #5ab4ff, #b39bff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 4px rgba(94, 180, 255, 0.45));
}
.nc-c_echo .pbadge { color: #ff5ec8; }
.nc-c_echo .pn { color: #f2f5ff; text-shadow: 2px 1px 0 rgba(255, 94, 200, 0.65), -1px -1px 0 rgba(94, 246, 255, 0.35); }
.nc-c_afterglow .pbadge { color: #ff7ad6; }
.nc-c_afterglow .pn { color: #fff3fb; text-shadow: 0 0 2px #fff, 0 0 7px #ff5ec8, 0 0 14px rgba(255, 94, 200, 0.75), 0 0 26px rgba(255, 94, 200, 0.4); }

/* rares: they move */
.nc-c_pulse .pbadge { color: #ff6b81; }
.nc-c_pulse .pn { color: #ff8095; animation: nc-heartbeat 1.6s ease-in-out infinite; }
@keyframes nc-heartbeat {
  0%, 40%, 100% { text-shadow: 0 0 3px rgba(255, 107, 129, 0.35); }
  12%, 30% { text-shadow: 0 0 6px #ff6b81, 0 0 14px rgba(255, 107, 129, 0.8); }
}
.nc-aurora .pn { background-size: 300% 100%; animation: nc-shimmer 9s linear infinite; }
.nc-c_flicker .pbadge { color: #7dfcff; }
.nc-c_flicker .pn { color: #b9fdff; text-shadow: 0 0 4px #5ef6ff, 0 0 12px rgba(94, 246, 255, 0.7); animation: nc-flicker 6s steps(1) infinite; }
@keyframes nc-flicker {
  0%, 100% { opacity: 1; }
  41% { opacity: 0.45; text-shadow: none; }
  42% { opacity: 1; }
  44% { opacity: 0.6; text-shadow: none; }
  45% { opacity: 1; }
  88% { opacity: 0.5; text-shadow: none; }
  89% { opacity: 1; }
}
.nc-c_tidal .pbadge { color: #5ef6ff; }
.nc-c_tidal .pn {
  background: linear-gradient(180deg, #e9fbff, #5ef6ff 30%, #4d8dff 50%, #5ef6ff 70%, #e9fbff);
  background-size: 100% 300%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: nc-roll 3.5s ease-in-out infinite alternate;
  filter: drop-shadow(0 0 4px rgba(94, 246, 255, 0.45));
}
@keyframes nc-roll { from { background-position: 0 0; } to { background-position: 0 100%; } }

/* epics: animated fills */
.nc-c_scan .pbadge { color: #6fe39a; }
.nc-c_scan .pn {
  background: linear-gradient(180deg, #74e8a0 0 38%, #ffffff 48%, #74e8a0 58% 100%);
  background-size: 100% 260%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: nc-scan 2.4s linear infinite;
  filter: drop-shadow(0 0 4px rgba(111, 227, 154, 0.5));
}
@keyframes nc-scan { from { background-position: 0 100%; } to { background-position: 0 0; } }
.nc-c_static .pbadge { color: #dfe4ee; }
.nc-c_static .pn {
  background: repeating-linear-gradient(90deg, #ffffff 0 2px, #9ea7ba 2px 3px, #e6e9f0 3px 5px, #b9c0cf 5px 6px, #f5f7fb 6px 9px, #a7afc0 9px 10px);
  background-size: 23px 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: nc-static 0.35s steps(3) infinite;
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.35));
}
@keyframes nc-static { from { background-position: 0 0; } to { background-position: 23px 0; } }
.nc-c_heat .pbadge { color: #ff8a3d; }
.nc-c_heat .pn {
  background: linear-gradient(90deg, #ffe066, #ff8a3d, #ff4d5e, #ff8a3d, #ffe066);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: nc-shimmer 3s linear infinite, nc-warp 2.2s ease-in-out infinite;
  filter: drop-shadow(0 0 5px rgba(255, 120, 60, 0.55));
}
@keyframes nc-warp { 0%, 100% { transform: skewX(0); } 30% { transform: skewX(-4deg); } 65% { transform: skewX(3deg); } }
.nc-c_venom .pbadge { color: #8cff3e; }
.nc-c_venom .pn {
  background: linear-gradient(180deg, #e9ff8a 0%, #8cff3e 25%, #3dff9b 50%, #8cff3e 75%, #e9ff8a 100%);
  background-size: 100% 200%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: nc-drip 2.6s linear infinite;
  filter: drop-shadow(0 1px 4px rgba(140, 255, 62, 0.55));
}
@keyframes nc-drip { from { background-position: 0 0; } to { background-position: 0 200%; } }

/* legendaries */
.nc-c_starfall { position: relative; }
.nc-c_starfall .pbadge { color: #cfe6ff; }
.nc-c_starfall .pn {
  background: linear-gradient(90deg, #ffffff, #cfe6ff, #a8c8ff, #ffffff);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: nc-shimmer 5s linear infinite;
  filter: drop-shadow(0 0 5px rgba(180, 210, 255, 0.7));
}
.nc-c_starfall::after {
  content: "";
  position: absolute;
  inset: -4px -6px;
  pointer-events: none;
  background-image:
    radial-gradient(circle, #fff 0 1px, transparent 1.6px),
    radial-gradient(circle, #cfe6ff 0 1px, transparent 1.6px),
    radial-gradient(circle, #fff 0 0.8px, transparent 1.4px);
  background-size: 23px 17px, 31px 21px, 13px 29px;
  background-position: 3px 2px, 14px 9px, 7px 5px;
  animation: nc-twinkle 2.8s ease-in-out infinite;
}
@keyframes nc-twinkle {
  0%, 100% { opacity: 0.25; background-position: 3px 2px, 14px 9px, 7px 5px; }
  50% { opacity: 1; background-position: 3px 6px, 14px 13px, 7px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .nc-c_pulse .pn, .nc-aurora .pn, .nc-c_flicker .pn, .nc-c_tidal .pn, .nc-c_scan .pn, .nc-c_static .pn,
  .nc-c_heat .pn, .nc-c_venom .pn, .nc-c_starfall .pn, .nc-c_starfall::after { animation: none; }
}

/* ======================= board themes v3: art, not just colours =======================
   Paint recolours; themes restyle. Every theme adds art to the code grid:
     common     — background art
     rare       — + its own cell style
     epic       — + an animated background + its own hover
     legendary  — a full scene
   Hooks: the grid's surface (.matrix-wrap in Wirebreach and duels, .pv-mat in
   the store) and its cells (.matrix .cell, .pv-grid span). The art uses the
   theme colours (--yellow / --cyan / --red), so paint tints it too.
   Cell art only uses background-image layers: box-shadow, ::before and
   ::after on cells belong to the game (ICE, pings, the hover box). */

[data-theme] :is(.matrix-wrap, .pv-mat), :is(.matrix-wrap, .pv-mat)[data-theme] { position: relative; isolation: isolate; overflow: hidden; overflow: clip; }
[data-theme] :is(.matrix-wrap, .pv-mat) > *, :is(.matrix-wrap, .pv-mat)[data-theme] > * { position: relative; z-index: 1; }
[data-theme] .pv-grid span { position: relative; }
/* the animated layer (epic + legendary), behind the grid */
[data-theme] :is(.matrix-wrap, .pv-mat)::before, :is(.matrix-wrap, .pv-mat)[data-theme]::before {
  content: none; position: absolute; z-index: 0; pointer-events: none;
}
/* the store preview's "hovered" cell gets the same hover box as the game */
[data-theme] .pv-grid span.hot::after { content: ""; position: absolute; inset: 3px; border: 1px solid var(--cyan); }

/* ---------- common: background art ---------- */
[data-theme="amber_crt"] :is(.matrix-wrap, .pv-mat), :is(.matrix-wrap, .pv-mat)[data-theme="amber_crt"] {
  background-image:
    repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.35) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at 50% 45%, var(--yellow-faint), transparent 72%),
    radial-gradient(ellipse at center, transparent 60%, rgba(0, 0, 0, 0.45));
}
[data-theme="toxic"] :is(.matrix-wrap, .pv-mat), :is(.matrix-wrap, .pv-mat)[data-theme="toxic"] {
  background-image:
    radial-gradient(var(--yellow-faint) 1px, transparent 1.6px),
    radial-gradient(var(--cyan-faint) 1px, transparent 1.6px),
    linear-gradient(to top, var(--cyan-faint), transparent 55%);
  background-size: 7px 7px, 11px 11px, 100% 100%;
  background-position: 0 0, 3px 5px, 0 0;
}
[data-theme="cobalt"] :is(.matrix-wrap, .pv-mat), :is(.matrix-wrap, .pv-mat)[data-theme="cobalt"] {
  background-image:
    linear-gradient(var(--yellow-faint) 1px, transparent 1px),
    linear-gradient(90deg, var(--yellow-faint) 1px, transparent 1px),
    linear-gradient(var(--cyan-faint) 1px, transparent 1px),
    linear-gradient(90deg, var(--cyan-faint) 1px, transparent 1px),
    linear-gradient(rgba(40, 70, 160, 0.14), rgba(40, 70, 160, 0.14));
  background-size: 80px 80px, 80px 80px, 16px 16px, 16px 16px, 100% 100%;
}

/* ---------- rare: + cell styles ---------- */
[data-theme="ice_protocol"] :is(.matrix-wrap, .pv-mat), :is(.matrix-wrap, .pv-mat)[data-theme="ice_protocol"] {
  background-image:
    radial-gradient(circle at 0 0, rgba(191, 233, 255, 0.16), transparent 42%),
    radial-gradient(circle at 100% 100%, var(--cyan-faint), transparent 48%),
    repeating-linear-gradient(60deg, rgba(191, 233, 255, 0.05) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(-60deg, rgba(191, 233, 255, 0.05) 0 1px, transparent 1px 14px);
}
[data-theme="ice_protocol"] :is(.matrix .cell, .pv-grid span) {
  background-image: linear-gradient(var(--cyan-dim), var(--cyan-dim)), linear-gradient(var(--cyan-dim), var(--cyan-dim)),
    linear-gradient(var(--cyan-dim), var(--cyan-dim)), linear-gradient(var(--cyan-dim), var(--cyan-dim));
  background-size: calc(100% - 8px) 1px, calc(100% - 8px) 1px, 1px calc(100% - 8px), 1px calc(100% - 8px);
  background-position: 4px 3px, 4px calc(100% - 3px), 3px 4px, calc(100% - 3px) 4px;
  background-repeat: no-repeat;
}
[data-theme="ice_protocol"] .cell.hovered::after, [data-theme="ice_protocol"] .pv-grid span.hot::after { background: rgba(191, 233, 255, 0.1); }

[data-theme="blood_moon"] :is(.matrix-wrap, .pv-mat), :is(.matrix-wrap, .pv-mat)[data-theme="blood_moon"] {
  background-image:
    radial-gradient(circle at 84% 16%, rgba(255, 110, 110, 0.32) 0 22px, rgba(255, 60, 60, 0.1) 23px 48px, transparent 70px),
    radial-gradient(ellipse at center, transparent 45%, rgba(60, 0, 0, 0.55));
}
/* corner brackets */
[data-theme="blood_moon"] :is(.matrix .cell, .pv-grid span) {
  background-image:
    linear-gradient(var(--yellow-dim), var(--yellow-dim)), linear-gradient(var(--yellow-dim), var(--yellow-dim)),
    linear-gradient(var(--yellow-dim), var(--yellow-dim)), linear-gradient(var(--yellow-dim), var(--yellow-dim)),
    linear-gradient(var(--yellow-dim), var(--yellow-dim)), linear-gradient(var(--yellow-dim), var(--yellow-dim)),
    linear-gradient(var(--yellow-dim), var(--yellow-dim)), linear-gradient(var(--yellow-dim), var(--yellow-dim));
  background-size: 6px 1px, 1px 6px, 6px 1px, 1px 6px, 6px 1px, 1px 6px, 6px 1px, 1px 6px;
  background-position: 3px 3px, 3px 3px, calc(100% - 3px) 3px, calc(100% - 3px) 3px,
    3px calc(100% - 3px), 3px calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) calc(100% - 3px);
  background-repeat: no-repeat;
}
[data-theme="blood_moon"] .cell.hovered::after, [data-theme="blood_moon"] .pv-grid span.hot::after { border-width: 2px; border-color: var(--red); box-shadow: 0 0 12px var(--red-dim); }

[data-theme="rust_belt"] :is(.matrix-wrap, .pv-mat), :is(.matrix-wrap, .pv-mat)[data-theme="rust_belt"] {
  background-image:
    radial-gradient(ellipse at 18% 30%, rgba(226, 137, 91, 0.14), transparent 30%),
    radial-gradient(ellipse at 76% 70%, rgba(180, 80, 40, 0.16), transparent 34%),
    radial-gradient(ellipse at 60% 12%, rgba(226, 137, 91, 0.08), transparent 22%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.018) 0 2px, transparent 2px 5px);
}
/* rivets */
[data-theme="rust_belt"] :is(.matrix .cell, .pv-grid span) {
  background-image: radial-gradient(circle, var(--cyan-dim) 0 1.3px, transparent 1.8px), radial-gradient(circle, var(--cyan-dim) 0 1.3px, transparent 1.8px),
    radial-gradient(circle, var(--cyan-dim) 0 1.3px, transparent 1.8px), radial-gradient(circle, var(--cyan-dim) 0 1.3px, transparent 1.8px);
  background-size: 6px 6px;
  background-position: 2px 2px, calc(100% - 2px) 2px, 2px calc(100% - 2px), calc(100% - 2px) calc(100% - 2px);
  background-repeat: no-repeat;
}
[data-theme="rust_belt"] .cell.hovered::after, [data-theme="rust_belt"] .pv-grid span.hot::after { border-style: dashed; }

/* ---------- epic: + animated background + own hover ---------- */
[data-theme="ghost_mono"] :is(.matrix-wrap, .pv-mat), :is(.matrix-wrap, .pv-mat)[data-theme="ghost_mono"] {
  background-image: linear-gradient(to bottom, transparent 0 45%, rgba(255, 255, 255, 0.06) 50%, transparent 55% 100%);
  background-size: 100% 300%;
  animation: th-roll 6s linear infinite;
}
[data-theme="ghost_mono"] :is(.matrix-wrap, .pv-mat)::before, :is(.matrix-wrap, .pv-mat)[data-theme="ghost_mono"]::before {
  content: ""; inset: -20px;
  background-image:
    repeating-radial-gradient(circle at 17% 32%, rgba(255, 255, 255, 0.085) 0 1px, transparent 1px 3px),
    repeating-radial-gradient(circle at 71% 63%, rgba(255, 255, 255, 0.075) 0 1px, transparent 1px 4px);
  animation: th-jitter 0.4s steps(3) infinite;
}
[data-theme="ghost_mono"] :is(.matrix .cell, .pv-grid span) {
  background-image: linear-gradient(rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.08));
  background-size: calc(100% - 6px) calc(100% - 6px);
  background-position: center;
  background-repeat: no-repeat;
}
[data-theme="ghost_mono"] .cell.hovered::after, [data-theme="ghost_mono"] .pv-grid span.hot::after { animation: th-blink 1s steps(2) infinite; }

[data-theme="vaporwave"] :is(.matrix-wrap, .pv-mat), :is(.matrix-wrap, .pv-mat)[data-theme="vaporwave"] {
  background-image:
    linear-gradient(to top, rgba(255, 113, 206, 0.22) 0 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 113, 206, 0.16), rgba(1, 205, 254, 0.1), rgba(185, 103, 255, 0.16), rgba(255, 113, 206, 0.16));
  background-size: 100% 14px, 100% 300%;
  background-position: 0 100%, 0 0;
  animation: th-sky 14s ease-in-out infinite alternate;
}
[data-theme="vaporwave"] :is(.matrix .cell, .pv-grid span) {
  border-radius: 7px;
  background-image: radial-gradient(ellipse at 50% 120%, var(--cyan-faint), transparent 70%);
}
[data-theme="vaporwave"] .cell.hovered::after, [data-theme="vaporwave"] .pv-grid span.hot::after {
  border-radius: 9px; border-color: var(--yellow);
  box-shadow: 0 0 10px var(--yellow-dim), inset 0 0 8px var(--cyan-dim);
  animation: th-breathe 1.6s ease-in-out infinite;
}

[data-theme="abyss"] :is(.matrix-wrap, .pv-mat), :is(.matrix-wrap, .pv-mat)[data-theme="abyss"] {
  background-image:
    radial-gradient(ellipse at 30% 0%, rgba(76, 201, 240, 0.16), transparent 50%),
    radial-gradient(ellipse at 70% 0%, rgba(0, 245, 212, 0.1), transparent 45%),
    linear-gradient(to bottom, rgba(0, 40, 80, 0.2), rgba(0, 0, 20, 0.45));
}
[data-theme="abyss"] :is(.matrix-wrap, .pv-mat)::before, :is(.matrix-wrap, .pv-mat)[data-theme="abyss"]::before {
  content: ""; left: 0; right: 0; top: 0; height: calc(100% + 120px);
  background-image:
    radial-gradient(circle, transparent 0 2px, rgba(0, 245, 212, 0.35) 2.5px, transparent 3.2px),
    radial-gradient(circle, transparent 0 1px, rgba(76, 201, 240, 0.35) 1.5px, transparent 2.2px);
  background-size: 57px 60px, 31px 40px;
  background-position: 11px 0, 3px 13px;
  animation: th-rise 7s linear infinite;
}
[data-theme="abyss"] :is(.matrix .cell, .pv-grid span) {
  background-image: radial-gradient(circle, transparent 54%, var(--yellow-faint) 57%, var(--yellow-faint) 61%, transparent 64%);
}
[data-theme="abyss"] .cell.hovered::after, [data-theme="abyss"] .pv-grid span.hot::after { border-radius: 50%; animation: th-sonar 1.4s ease-out infinite; }

[data-theme="neon_noir"] :is(.matrix-wrap, .pv-mat), :is(.matrix-wrap, .pv-mat)[data-theme="neon_noir"] {
  background-image:
    linear-gradient(to top, rgba(255, 46, 99, 0.16), transparent 35%),
    radial-gradient(ellipse at 20% 100%, rgba(8, 217, 214, 0.14), transparent 40%);
}
[data-theme="neon_noir"] :is(.matrix-wrap, .pv-mat)::before, :is(.matrix-wrap, .pv-mat)[data-theme="neon_noir"]::before {
  content: ""; left: -40px; right: -40px; top: -120px; bottom: 0;
  background-image:
    radial-gradient(1px 10px at 50% 50%, rgba(220, 230, 255, 0.45), transparent),
    radial-gradient(1px 7px at 50% 50%, rgba(220, 230, 255, 0.3), transparent);
  background-size: 23px 60px, 17px 40px;
  background-position: 0 0, 9px 21px;
  animation: th-rain 0.8s linear infinite;
}
[data-theme="neon_noir"] :is(.matrix .cell, .pv-grid span) {
  background-image: linear-gradient(var(--cyan), var(--cyan));
  background-size: 50% 1px;
  background-position: 50% calc(100% - 4px);
  background-repeat: no-repeat;
}
[data-theme="neon_noir"] .cell.hovered::after, [data-theme="neon_noir"] .pv-grid span.hot::after { animation: th-tube 3s steps(1) infinite; }

/* ---------- legendary: a full scene ---------- */
[data-theme="synthwave"] :is(.matrix-wrap, .pv-mat), :is(.matrix-wrap, .pv-mat)[data-theme="synthwave"] {
  background-image:
    repeating-linear-gradient(to bottom, transparent 0 7px, rgba(10, 11, 16, 0.85) 7px 9px),
    radial-gradient(circle at 50% 40%, rgba(255, 211, 25, 0.32), rgba(255, 42, 109, 0.24) 18%, transparent 30%),
    linear-gradient(to bottom, rgba(120, 20, 140, 0.22), transparent 55%);
  background-size: 100% 100%;
  background-position: 0 0;
}
/* the rolling floor grid */
[data-theme="synthwave"] :is(.matrix-wrap, .pv-mat)::before, :is(.matrix-wrap, .pv-mat)[data-theme="synthwave"]::before {
  content: ""; left: -60%; right: -60%; top: 52%; height: 100%;
  background-image:
    linear-gradient(var(--yellow-dim) 1px, transparent 1px),
    linear-gradient(90deg, var(--cyan-dim) 1px, transparent 1px);
  background-size: 34px 34px;
  transform: perspective(160px) rotateX(58deg);
  transform-origin: 50% 0;
  animation: th-floor 1.6s linear infinite;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 35%);
  mask-image: linear-gradient(to bottom, transparent, #000 35%);
}
[data-theme="synthwave"] :is(.matrix .cell, .pv-grid span) {
  background-image: linear-gradient(90deg, var(--yellow), var(--cyan));
  background-size: 60% 1px;
  background-position: 50% calc(100% - 4px);
  background-repeat: no-repeat;
}
[data-theme="synthwave"] .cell.hovered::after, [data-theme="synthwave"] .pv-grid span.hot::after {
  border-color: var(--yellow);
  box-shadow: 0 0 12px var(--yellow), inset 0 0 10px var(--cyan-dim);
  animation: th-breathe 1.1s ease-in-out infinite;
}

[data-theme="goldrush"] :is(.matrix-wrap, .pv-mat), :is(.matrix-wrap, .pv-mat)[data-theme="goldrush"] {
  background-image:
    repeating-conic-gradient(from -90deg at 50% 115%, rgba(255, 207, 107, 0.07) 0 3deg, transparent 3deg 10deg),
    radial-gradient(ellipse at 50% 100%, rgba(255, 190, 70, 0.16), transparent 60%),
    linear-gradient(to bottom, rgba(40, 25, 0, 0.3), transparent);
}
/* drifting gold dust */
[data-theme="goldrush"] :is(.matrix-wrap, .pv-mat)::before, :is(.matrix-wrap, .pv-mat)[data-theme="goldrush"]::before {
  content: ""; left: -120px; top: -120px; right: 0; bottom: 0;
  background-image:
    radial-gradient(circle, rgba(255, 233, 163, 0.75) 0 1px, transparent 1.6px),
    radial-gradient(circle, rgba(255, 207, 107, 0.55) 0 1.4px, transparent 2px),
    radial-gradient(circle, rgba(255, 241, 193, 0.4) 0 0.8px, transparent 1.4px);
  background-size: 40px 60px, 60px 40px, 30px 24px;
  background-position: 0 0, 19px 31px, 9px 17px;
  animation: th-dust 9s linear infinite;
}
/* gilded frames */
[data-theme="goldrush"] :is(.matrix .cell, .pv-grid span) {
  background-image:
    linear-gradient(90deg, transparent, rgba(255, 207, 107, 0.55), transparent), linear-gradient(90deg, transparent, rgba(255, 207, 107, 0.55), transparent),
    radial-gradient(circle, #ffcf6b 0 1.2px, transparent 1.7px), radial-gradient(circle, #ffcf6b 0 1.2px, transparent 1.7px);
  background-size: calc(100% - 8px) 1px, calc(100% - 8px) 1px, 6px 6px, 6px 6px;
  background-position: 4px 3px, 4px calc(100% - 3px), 1px 0, calc(100% - 1px) calc(100% - 0px);
  background-repeat: no-repeat;
}
/* a sheen sweeps across the line you can pick from */
[data-theme="goldrush"] :is(.matrix .cell.active-line, .pv-grid span.line) {
  background-image:
    linear-gradient(100deg, transparent 30%, rgba(255, 241, 193, 0.22) 50%, transparent 70%),
    linear-gradient(90deg, transparent, rgba(255, 207, 107, 0.55), transparent), linear-gradient(90deg, transparent, rgba(255, 207, 107, 0.55), transparent),
    radial-gradient(circle, #ffcf6b 0 1.2px, transparent 1.7px), radial-gradient(circle, #ffcf6b 0 1.2px, transparent 1.7px);
  background-size: 300% 100%, calc(100% - 8px) 1px, calc(100% - 8px) 1px, 6px 6px, 6px 6px;
  background-position: 100% 0, 4px 3px, 4px calc(100% - 3px), 1px 0, calc(100% - 1px) 100%;
  animation: th-sheen 2.4s linear infinite;
}
[data-theme="goldrush"] .cell.hovered::after, [data-theme="goldrush"] .pv-grid span.hot::after {
  border: 3px double #ffcf6b;
  box-shadow: 0 0 14px rgba(255, 207, 107, 0.55);
}

@keyframes th-roll { from { background-position: 0 100%; } to { background-position: 0 0; } }
@keyframes th-jitter { 0% { transform: translate(0, 0); } 33% { transform: translate(-7px, 4px); } 66% { transform: translate(5px, -6px); } }
@keyframes th-blink { 50% { opacity: 0.35; } }
@keyframes th-sky { from { background-position: 0 100%, 0 0; } to { background-position: 0 100%, 0 100%; } }
@keyframes th-breathe { 50% { opacity: 0.6; transform: scale(0.94); } }
@keyframes th-rise { from { transform: translateY(0); } to { transform: translateY(-120px); } }
@keyframes th-sonar { from { transform: scale(0.75); opacity: 1; } to { transform: scale(1.15); opacity: 0.25; } }
@keyframes th-rain { from { transform: skewX(-12deg) translateY(0); } to { transform: skewX(-12deg) translateY(120px); } }
@keyframes th-tube { 0%, 100% { opacity: 1; } 47% { opacity: 0.3; } 48% { opacity: 1; } 51% { opacity: 0.5; } 52% { opacity: 1; } }
@keyframes th-floor { from { background-position: 0 0; } to { background-position: 0 34px; } }
@keyframes th-dust { from { transform: translate(0, 0); } to { transform: translate(120px, 120px); } }
@keyframes th-sheen { from { background-position: 100% 0, 4px 3px, 4px calc(100% - 3px), 1px 0, calc(100% - 1px) 100%; } to { background-position: 0% 0, 4px 3px, 4px calc(100% - 3px), 1px 0, calc(100% - 1px) 100%; } }

@media (prefers-reduced-motion: reduce) {
  [data-theme] :is(.matrix-wrap, .pv-mat), :is(.matrix-wrap, .pv-mat)[data-theme],
  [data-theme] :is(.matrix-wrap, .pv-mat)::before, :is(.matrix-wrap, .pv-mat)[data-theme]::before,
  [data-theme] :is(.matrix .cell, .pv-grid span), [data-theme] .cell.hovered::after, [data-theme] .pv-grid span.hot::after { animation: none !important; }
}


/* ======================= duel emotes =======================
   A speech bubble over a player's score in a duel (and in the store). */
.emote-bubble {
  display: inline-block;
  max-width: 14em;
  padding: 5px 10px;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  line-height: 1.3;
  color: var(--text);
  background: rgba(14, 16, 24, 0.97);
  border: 1px solid var(--yellow-dim);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6);
  overflow-wrap: anywhere;
}
.emote-bubble.r-rare { color: #cfe9ff; border-color: rgba(127, 179, 213, 0.8); box-shadow: 0 0 10px rgba(127, 179, 213, 0.35), 0 4px 14px rgba(0, 0, 0, 0.6); }
.emote-bubble.r-epic { color: #e6d4ff; border-color: rgba(168, 108, 255, 0.85); text-shadow: 1px 0 rgba(255, 77, 94, 0.5), -1px 0 rgba(94, 246, 255, 0.5); box-shadow: 0 0 12px rgba(168, 108, 255, 0.4), 0 4px 14px rgba(0, 0, 0, 0.6); }
.emote-bubble.r-legendary {
  color: #ffe9a3; border-color: #ffcf6b;
  background: linear-gradient(100deg, rgba(40, 28, 4, 0.97), rgba(70, 50, 10, 0.97) 50%, rgba(40, 28, 4, 0.97));
  background-size: 250% 100%;
  text-shadow: 0 0 8px rgba(255, 207, 107, 0.7);
  box-shadow: 0 0 16px rgba(255, 207, 107, 0.45), 0 4px 14px rgba(0, 0, 0, 0.6);
  animation: nc-shimmer 3s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .emote-bubble.r-legendary { animation: none; } }