/* =====================================================================
   NEON ARCADE THEME  —  visual-only skin for the whole UI
   Loaded AFTER style.css, so it overrides colours / shadows / borders /
   animations. Layout and game logic are not touched.
   To go back to the old look: remove the <link> to theme.css.
   ===================================================================== */

:root {
  --ink: #f3f0ff;
  --ink-soft: #a7a3d4;
  --paper: #120c33;
  --card: rgba(26, 19, 70, .88);

  --n-bg0: #07051a;
  --n-bg1: #120c33;
  --n-bg2: #1d1252;
  --n-panel: rgba(25, 18, 66, .86);
  --n-panel2: rgba(255, 255, 255, .06);
  --n-panel3: rgba(255, 255, 255, .10);
  --n-line: rgba(160, 140, 255, .28);

  --n-pink: #ff3d9a;
  --n-gold: #ffc933;
  --n-mint: #1fe8b0;
  --n-blue: #3d8bff;
  --n-violet: #9b5cff;
  --n-cyan: #35e0ff;

  --go: #1fe8b0;
  --go-dark: #0c9a77;
  --go-btn: #12c98f;
  --go-btn-top: #5bffd0;
  --go-btn-dark: #057a5a;
  --accent: #ff3d9a;
  --accent-dark: #ff7ac0;
  --gold: #ffc933;
  --bad-btn: #ff3d5e;

  --glass: rgba(18, 12, 51, .78);
  --glass2: rgba(18, 12, 51, .62);
  --line: rgba(160, 140, 255, .22);

  --shadow: 0 22px 60px rgba(0, 0, 0, .55), 0 0 40px rgba(155, 92, 255, .25);
}

html, body { background: var(--n-bg0); color: var(--ink); }
::selection { background: var(--n-pink); color: #fff; }

/* thin neon scrollbars */
* { scrollbar-width: thin; scrollbar-color: rgba(155, 92, 255, .7) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--n-violet), var(--n-pink)); border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

/* =====================================================================
   BACKGROUND SCREENS (menu / results / panels)
   ===================================================================== */
@keyframes nGridMove { to { background-position: 0 56px, 56px 0; } }
@keyframes nOrbs {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(3%, -4%, 0) scale(1.12); }
}
@keyframes nShine { 0% { transform: translateX(-140%) skewX(-20deg); } 55%, 100% { transform: translateX(260%) skewX(-20deg); } }
@keyframes nFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
@keyframes nPulse {
  0%, 100% { box-shadow: 0 6px 0 var(--go-btn-dark), 0 0 0 0 rgba(31, 232, 176, .55), 0 14px 34px rgba(31, 232, 176, .35); }
  50% { box-shadow: 0 6px 0 var(--go-btn-dark), 0 0 0 12px rgba(31, 232, 176, 0), 0 14px 44px rgba(31, 232, 176, .6); }
}
@keyframes nHue { to { filter: hue-rotate(360deg); } }
@keyframes nBorder { to { background-position: 300% 0; } }
@keyframes nPop { from { opacity: 0; transform: translateY(18px) scale(.94); } to { opacity: 1; transform: none; } }

#menu {
  background:
    radial-gradient(60% 50% at 12% 8%, rgba(255, 61, 154, .38), transparent 70%),
    radial-gradient(55% 50% at 92% 10%, rgba(53, 224, 255, .30), transparent 70%),
    radial-gradient(60% 55% at 85% 95%, rgba(155, 92, 255, .42), transparent 70%),
    radial-gradient(50% 45% at 8% 92%, rgba(31, 232, 176, .26), transparent 70%),
    linear-gradient(160deg, #0a0624 0%, #150d3d 55%, #0a0624 100%) !important;
  background-size: auto !important;
  animation: none !important;
  isolation: isolate;
}
/* scrolling neon grid */
#menu::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(rgba(155, 92, 255, .20) 1px, transparent 1px),
    linear-gradient(90deg, rgba(155, 92, 255, .20) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 55%, #000 25%, transparent 75%);
  mask-image: radial-gradient(ellipse at 50% 55%, #000 25%, transparent 75%);
  animation: nGridMove 5s linear infinite;
}
/* drifting glow orbs */
#menu::after {
  content: ''; position: fixed; inset: -10%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(circle at 22% 30%, rgba(255, 201, 51, .16) 0, transparent 22%),
    radial-gradient(circle at 78% 68%, rgba(61, 139, 255, .22) 0, transparent 26%),
    radial-gradient(circle at 60% 18%, rgba(255, 61, 154, .16) 0, transparent 20%);
  animation: nOrbs 14s ease-in-out infinite;
}

#over, #winBox, #endBox {
  background:
    radial-gradient(60% 50% at 20% 85%, rgba(31, 232, 176, .25), transparent 70%),
    radial-gradient(60% 50% at 80% 15%, rgba(255, 201, 51, .22), transparent 70%),
    radial-gradient(70% 60% at 50% 50%, rgba(155, 92, 255, .22), transparent 75%),
    rgba(7, 5, 26, .78) !important;
  backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
}
#settings, #friends, #doc {
  background:
    radial-gradient(60% 50% at 20% 20%, rgba(255, 61, 154, .22), transparent 70%),
    radial-gradient(60% 50% at 80% 80%, rgba(61, 139, 255, .24), transparent 70%),
    rgba(7, 5, 26, .78) !important;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
#sheet { background: rgba(7, 5, 26, .72) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
#endBox { background: rgba(7, 5, 26, .66) !important; }

/* =====================================================================
   CARDS
   ===================================================================== */
.card, #friends .card, #settings .card, #sheet .card, #doc .card {
  color: var(--ink);
  background:
    linear-gradient(180deg, rgba(36, 26, 96, .94) 0%, rgba(20, 13, 58, .95) 100%) padding-box,
    linear-gradient(120deg, var(--n-pink), var(--n-gold), var(--n-mint), var(--n-blue), var(--n-violet), var(--n-pink)) border-box !important;
  background-size: auto, 300% 100% !important;
  border: 3px solid transparent !important;
  border-radius: 26px !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .6), 0 0 46px rgba(155, 92, 255, .30), inset 0 1px 0 rgba(255, 255, 255, .12) !important;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  animation: nBorder 9s linear infinite, nPop .45s cubic-bezier(.2, 1.3, .4, 1) both;
}
.card::before {
  height: 4px !important;
  background: linear-gradient(90deg, var(--n-pink), var(--n-gold), var(--n-mint), var(--n-cyan), var(--n-violet)) !important;
  background-size: 200% 100% !important;
  box-shadow: 0 0 18px rgba(255, 61, 154, .8);
  animation: nBorder 4s linear infinite;
}
#sheet .card, #doc .card { background: linear-gradient(180deg, #241a60, #140d3a) padding-box, linear-gradient(120deg, var(--n-pink), var(--n-gold), var(--n-mint), var(--n-blue), var(--n-violet), var(--n-pink)) border-box !important; background-size: auto, 300% 100% !important; }

h1, h2, h3, h4, h5 { color: var(--ink); }
h2 { text-shadow: 0 0 22px rgba(155, 92, 255, .8), 0 2px 0 rgba(0, 0, 0, .35); letter-spacing: .5px; }
.frHead h2, #settings h2 { text-transform: uppercase; letter-spacing: 1.5px; }

/* =====================================================================
   LOGO
   ===================================================================== */
.logo { filter: drop-shadow(0 0 22px rgba(155, 92, 255, .55)); }
.logo span {
  position: relative; overflow: hidden;
  border: 2px solid rgba(255, 255, 255, .55);
  text-shadow: 0 3px 0 rgba(0, 0, 0, .28), 0 0 14px rgba(255, 255, 255, .6);
  animation: nFloat 3.2s ease-in-out infinite;
}
.logo span::after {
  content: ''; position: absolute; top: -20%; bottom: -20%; width: 40%; left: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .65), transparent);
  animation: nShine 3.6s ease-in-out infinite;
}
.logo span:nth-child(1) { box-shadow: 0 7px 0 #8e1230, 0 0 28px rgba(255, 61, 94, .85) !important; }
.logo span:nth-child(2) { box-shadow: 0 7px 0 #9a5f00, 0 0 28px rgba(255, 201, 51, .85) !important; animation-delay: -.8s; }
.logo span:nth-child(3) { box-shadow: 0 7px 0 #04664a, 0 0 28px rgba(31, 232, 176, .85) !important; animation-delay: -1.6s; }
.logo span:nth-child(4) { box-shadow: 0 7px 0 #0b2f8a, 0 0 28px rgba(61, 139, 255, .85) !important; animation-delay: -2.4s; }
.logo span:nth-child(2)::after { animation-delay: .35s; }
.logo span:nth-child(3)::after { animation-delay: .7s; }
.logo span:nth-child(4)::after { animation-delay: 1.05s; }

/* =====================================================================
   INPUTS / SEGMENTED / TABS
   ===================================================================== */
#nick, .addRow input, .langSel, .agCard select {
  background: rgba(8, 5, 30, .75) !important; color: #fff !important;
  border: 2px solid rgba(160, 140, 255, .35) !important;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, .45);
}
#nick::placeholder, .addRow input::placeholder { color: rgba(167, 163, 212, .7); }
#nick:focus, .addRow input:focus {
  border-color: var(--n-cyan) !important;
  box-shadow: 0 0 0 4px rgba(53, 224, 255, .22), 0 0 22px rgba(53, 224, 255, .45), inset 0 2px 8px rgba(0, 0, 0, .45) !important;
}
.langSel option { background: #1a1246; color: #fff; }

.seg, .pwSeg {
  background: rgba(8, 5, 30, .65) !important; border: 1px solid var(--n-line) !important;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, .4);
}
.seg button, .pwSeg button { color: var(--ink-soft) !important; background: transparent; transition: .18s; }
.seg button:hover, .pwSeg button:hover { color: #fff !important; background: rgba(255, 255, 255, .08); }
.seg button.on, .pwSeg button.on {
  background: linear-gradient(180deg, #ff5fb0, #c42a8a) !important; color: #fff !important;
  box-shadow: 0 3px 0 #7a1259, 0 0 18px rgba(255, 61, 154, .6) !important;
}
.seg.modes button.on { background: linear-gradient(180deg, #4ea0ff, #2a5fe0) !important; box-shadow: 0 3px 0 #153a9a, 0 0 18px rgba(61, 139, 255, .65) !important; }

.modeTabs {
  background: rgba(8, 5, 30, .65) !important; border: 1px solid var(--n-line) !important;
}
.modeTabs a, .modeTabs span { color: var(--ink-soft) !important; }
.modeTabs a:hover { color: #fff !important; background: rgba(255, 255, 255, .08); }
.modeTabs .on { background: linear-gradient(180deg, #ffd84d, #ffa800) !important; color: #3a2400 !important; box-shadow: 0 3px 0 #a86d00, 0 0 18px rgba(255, 201, 51, .6) !important; }

/* =====================================================================
   BUTTONS
   ===================================================================== */
.btn, .chip { transition: transform .12s, filter .15s, box-shadow .15s; }
.btn.big {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--go-btn-top), var(--go-btn)) !important;
  color: #05382a !important; text-shadow: 0 1px 0 rgba(255, 255, 255, .45);
  letter-spacing: 2px; text-transform: uppercase;
  border: 2px solid rgba(255, 255, 255, .55);
  animation: nPulse 2s ease-in-out infinite;
}
.btn.big::after {
  content: ''; position: absolute; top: -30%; bottom: -30%; width: 35%; left: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .7), transparent);
  animation: nShine 3s ease-in-out infinite; pointer-events: none;
}
#play .playIc { filter: brightness(0) opacity(.78) drop-shadow(0 1px 0 rgba(255, 255, 255, .5)); }
.btn.big:hover { filter: brightness(1.1) saturate(1.1); transform: translateY(-2px) scale(1.01); }
.btn.big:active { transform: translateY(4px); }
#again { background: linear-gradient(180deg, #ffd84d, #ffa800) !important; color: #3a2400 !important; box-shadow: 0 6px 0 #a86d00, 0 12px 30px rgba(255, 201, 51, .45) !important; animation: none; }

.btn.ghost {
  background: linear-gradient(180deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .06)) !important;
  color: var(--ink) !important; border: 2px solid var(--n-line);
  box-shadow: 0 4px 0 rgba(0, 0, 0, .4) !important;
}
.btn.ghost:hover { background: rgba(255, 255, 255, .18) !important; }
.btn.gold, .chip.gold { box-shadow: 0 4px 0 #a86d00, 0 0 22px rgba(255, 201, 51, .5) !important; }
.btn.ad, .chip.ad { background: linear-gradient(180deg, #7a95ff, #4c6fff) !important; box-shadow: 0 4px 0 #2a40b8, 0 0 20px rgba(76, 111, 255, .55) !important; }
.btn.gemBtn, .chip.gem { box-shadow: 0 4px 0 #6d28d9, 0 0 22px rgba(168, 85, 247, .6) !important; }

.chip {
  background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .07)) !important;
  color: #fff !important; border: 1px solid var(--n-line) !important;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .4) !important;
}
.chip.go { background: linear-gradient(180deg, #2ff0b8, #0ea67e) !important; color: #03352a !important; border-color: rgba(255, 255, 255, .45) !important; box-shadow: 0 3px 0 #057a5a, 0 0 16px rgba(31, 232, 176, .45) !important; }
.chip.bad { background: linear-gradient(180deg, #ff6a83, #e0243f) !important; box-shadow: 0 3px 0 #8f1328 !important; }
.chip.gold { background: linear-gradient(180deg, #ffe066, #ffb300) !important; color: #3a2400 !important; border-color: rgba(255, 255, 255, .5) !important; }
.chip.gem { background: linear-gradient(180deg, #e19bff, #a855f7) !important; color: #fff !important; }
.chip.ad { color: #fff !important; }
.chip.ghost { background: transparent !important; border-color: transparent !important; box-shadow: none !important; }
.chip:disabled, .btn:disabled { filter: grayscale(.5); opacity: .55; }
.chip:hover:not(:disabled) { filter: brightness(1.12); }

.icon, .gear, .friendsBtn, .icon.x, #exit, #mute {
  background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .06)) !important;
  border: 1px solid var(--n-line) !important; color: #fff !important;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .4), 0 0 14px rgba(155, 92, 255, .25);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.gear:hover, .friendsBtn:hover, .icon.x:hover { background: rgba(255, 255, 255, .22) !important; box-shadow: 0 3px 0 rgba(0, 0, 0, .4), 0 0 20px rgba(53, 224, 255, .5); }
/* make the dark SVG glyphs readable on dark tiles */
.icon .gi, #exit .gi, #mute .gi, .ofX .gi { filter: brightness(0) invert(1) drop-shadow(0 0 5px rgba(255, 255, 255, .5)); }
#exit.arm { background: linear-gradient(180deg, #ff6a83, #e0243f) !important; }
.link { color: var(--ink-soft); }
.link:hover { color: #fff; }
.link.bad { color: #ff7a90; }

/* =====================================================================
   PROFILE BAR  (level, coins, gems)
   ===================================================================== */
.lv, .coin {
  border: 1px solid var(--n-line);
  box-shadow: 0 3px 0 rgba(0, 0, 0, .35), 0 0 16px rgba(155, 92, 255, .22);
}
.lv { background: linear-gradient(180deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, .06)) !important; }
.lv b { background: linear-gradient(180deg, #4ea0ff, #6a3dff) !important; color: #fff; box-shadow: 0 0 14px rgba(61, 139, 255, .8), inset 0 1px 0 rgba(255, 255, 255, .5); text-shadow: 0 1px 0 rgba(0, 0, 0, .3); }
.xp { background: rgba(0, 0, 0, .4) !important; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .6); }
.xp > i { background: linear-gradient(90deg, var(--n-blue), var(--n-cyan)) !important; box-shadow: 0 0 10px rgba(53, 224, 255, .8); }
.coin { background: linear-gradient(180deg, rgba(255, 201, 51, .28), rgba(255, 150, 0, .16)) !important; color: #ffe08a !important; border-color: rgba(255, 201, 51, .5); text-shadow: 0 0 10px rgba(255, 201, 51, .7); }
.coin.gem { background: linear-gradient(180deg, rgba(168, 85, 247, .38), rgba(120, 50, 220, .2)) !important; color: #ecd1ff !important; border-color: rgba(190, 120, 255, .6); text-shadow: 0 0 10px rgba(190, 120, 255, .8); }
.cn, .gm { filter: drop-shadow(0 0 6px rgba(255, 201, 51, .8)); }
.gm { filter: drop-shadow(0 0 6px rgba(190, 120, 255, .9)); }

/* =====================================================================
   SKINS PICKER
   ===================================================================== */
.skinHead b { text-shadow: 0 0 14px rgba(53, 224, 255, .7); }
.skinHead span { color: var(--ink-soft); }
.skinHead em, #frList h3 em { background: rgba(255, 255, 255, .12) !important; color: #fff; }
#skins button, .cgrid button {
  background: linear-gradient(180deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .04)) !important;
  border: 2px solid rgba(160, 140, 255, .2) !important;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .35);
}
#skins button:hover, .cgrid button:hover { background: rgba(255, 255, 255, .18) !important; box-shadow: 0 3px 0 rgba(0, 0, 0, .35), 0 0 16px rgba(53, 224, 255, .5); }
#skins button.on {
  background: linear-gradient(180deg, rgba(31, 232, 176, .35), rgba(31, 232, 176, .1)) !important;
  border-color: var(--n-mint) !important;
  box-shadow: 0 0 0 2px var(--n-mint), 0 0 24px rgba(31, 232, 176, .8), 0 3px 0 rgba(0, 0, 0, .35) !important;
}
.cgrid button.on { background: rgba(255, 61, 154, .22) !important; box-shadow: 0 0 0 3px var(--n-pink), 0 0 22px rgba(255, 61, 154, .75) !important; }
#skins button.buy > i { background: linear-gradient(180deg, #ffe066, #ffb300); color: #3a2400; }
#skins button b.st, .cgrid button b { color: #ffd54d; text-shadow: 0 0 8px rgba(255, 201, 51, .8); }

/* =====================================================================
   META ROW (daily / missions / weekly / shop / invite)
   ===================================================================== */
#metaRow button, #metaRow a {
  background: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .05)) !important;
  border: 1.5px solid var(--n-line) !important; color: var(--ink) !important;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .4) !important;
}
#metaRow a { background: linear-gradient(180deg, rgba(255, 150, 60, .35), rgba(255, 100, 40, .15)) !important; border-color: rgba(255, 170, 90, .6) !important; }
#metaRow button:hover, #metaRow a:hover { background: rgba(255, 255, 255, .2) !important; box-shadow: 0 5px 0 rgba(0, 0, 0, .4), 0 0 20px rgba(155, 92, 255, .5) !important; }
#metaRow button:active, #metaRow a:active { box-shadow: 0 1px 0 rgba(0, 0, 0, .4) !important; }
#metaRow span { filter: drop-shadow(0 0 8px currentColor); }
#metaRow small { color: var(--ink-soft); }
#metaRow button.fresh { box-shadow: 0 3px 0 rgba(0, 0, 0, .4), 0 0 0 2px var(--n-gold), 0 0 22px rgba(255, 201, 51, .8) !important; }
.badge, #frBadge { background: linear-gradient(180deg, #ff6a83, #e0243f) !important; box-shadow: 0 0 12px rgba(255, 61, 94, .9); border: 1.5px solid rgba(255, 255, 255, .8); }

#worldCard {
  background: linear-gradient(135deg, rgba(53, 224, 255, .22), rgba(155, 92, 255, .22)) !important;
  border: 1.5px solid rgba(53, 224, 255, .45) !important; color: var(--ink) !important;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .4), 0 0 20px rgba(53, 224, 255, .25) !important;
}
#worldCard b { color: #fff; }
#worldCard em { color: var(--n-cyan); text-shadow: 0 0 10px rgba(53, 224, 255, .8); }
#worldCard .bar { background: rgba(0, 0, 0, .45) !important; }
#worldCard .bar > i { background: linear-gradient(90deg, var(--n-cyan), var(--n-violet)) !important; box-shadow: 0 0 12px rgba(53, 224, 255, .9); }
.bsChip { box-shadow: 0 2px 0 #2a7a1a, 0 0 14px rgba(120, 255, 90, .5) !important; }

.hint, .hint.small, .legalLine { color: var(--ink-soft) !important; }
#online .liveDot, .liveDot { box-shadow: 0 0 0 3px rgba(47, 207, 106, .3), 0 0 12px #2fcf6a; }

/* =====================================================================
   RESULT SCREENS
   ===================================================================== */
#over h2 { font-size: 36px; background: linear-gradient(90deg, #ff6a83, #ffc933); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 16px rgba(255, 61, 94, .6)); text-shadow: none; animation: nPop .5s cubic-bezier(.2, 1.5, .4, 1) both; }
#endBox h2 { background: linear-gradient(90deg, #ffe066, #ff9f1c); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 16px rgba(255, 201, 51, .6)); text-shadow: none; }
.card.win h2 { filter: drop-shadow(0 0 20px rgba(255, 201, 51, .8)); text-shadow: none; }
.trophy { filter: drop-shadow(0 0 28px rgba(255, 201, 51, .95)); }
#overWhy, #winSub { color: var(--ink-soft) !important; }
.stats div { background: linear-gradient(180deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .05)) !important; border: 1px solid var(--n-line); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); }
.stats b { color: #fff; text-shadow: 0 0 14px rgba(53, 224, 255, .7); }
.stats span { color: var(--ink-soft) !important; }
#record { box-shadow: 0 0 22px rgba(255, 150, 20, .8); animation: nFloat 1.6s ease-in-out infinite; }
#unlock { background: linear-gradient(135deg, rgba(255, 201, 51, .25), rgba(255, 61, 154, .2)) !important; border: 1px solid rgba(255, 201, 51, .5); color: #ffe9a8; }
.reward > span { border: 1px solid rgba(255, 255, 255, .25); box-shadow: 0 0 18px rgba(255, 255, 255, .15); }
.reward .rc { background: linear-gradient(180deg, rgba(255, 201, 51, .35), rgba(255, 150, 0, .2)) !important; color: #ffe9a8 !important; }
.reward .rx { background: linear-gradient(180deg, rgba(76, 111, 255, .45), rgba(76, 111, 255, .2)) !important; color: #d6e0ff !important; }
#podium .pl b { color: #fff; }
#podium .pl em { color: var(--ink-soft); }
#podium .pl.me b { color: var(--n-mint); text-shadow: 0 0 12px rgba(31, 232, 176, .8); }
#podium .p1 .st { box-shadow: 0 0 28px rgba(255, 201, 51, .8); }

/* =====================================================================
   PANELS: friends, settings, sheets (shop, missions, daily…)
   ===================================================================== */
.sh .note, .myCode small, .muted, .empty, .fr-row .who small, .mis .mt small, .lr > b, .day small, .deal s, .tier small, .evRow em, .evRow > b, .wRow em, .refHero p, .evHero p, .sh .foot { color: var(--ink-soft) !important; }
.sh .note.warn { background: rgba(255, 201, 51, .14) !important; border-color: rgba(255, 201, 51, .5) !important; color: #ffe08a !important; }
.sh h4, #frList h3 { color: var(--n-cyan) !important; text-shadow: 0 0 10px rgba(53, 224, 255, .5); }

.myCode, .refHero, .evHero, .skd {
  background: linear-gradient(135deg, rgba(31, 232, 176, .18), rgba(155, 92, 255, .22)) !important;
  border: 1px solid var(--n-line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 0 22px rgba(155, 92, 255, .2);
}
.evHero { background: linear-gradient(135deg, rgba(255, 201, 51, .22), rgba(255, 61, 154, .22)) !important; }
.myCode b { color: #fff; text-shadow: 0 0 16px rgba(53, 224, 255, .8); }
.skd h3 { text-shadow: 0 0 14px rgba(255, 255, 255, .5); }
.stars { color: rgba(255, 255, 255, .2) !important; }
.stars b { color: #ffd54d !important; text-shadow: 0 0 10px rgba(255, 201, 51, .9); }

.fr-row:hover { background: rgba(255, 255, 255, .08) !important; }
.dot { background: #6c6a99 !important; }
.dot.on { background: #2fe8b8 !important; box-shadow: 0 0 0 3px rgba(47, 232, 184, .25), 0 0 12px #2fe8b8 !important; }

.day, .mis, .tier, .rstep, .wRow, .evRow, .pwCard, .chestCard, .sku, .lr {
  background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .04)) !important;
  border: 1px solid rgba(160, 140, 255, .18); color: var(--ink);
}
.lr { border: 0; }
.lr.me, .mis.done, .day.done, .evRow.got { background: linear-gradient(180deg, rgba(31, 232, 176, .25), rgba(31, 232, 176, .08)) !important; }
.lr.me { box-shadow: inset 0 0 0 1px rgba(31, 232, 176, .5); }
.day.today, .tier.got, .evRow.ready { background: linear-gradient(180deg, rgba(255, 201, 51, .3), rgba(255, 201, 51, .1)) !important; box-shadow: 0 0 0 2px var(--n-gold), 0 0 22px rgba(255, 201, 51, .6) !important; }
.day.big { background: linear-gradient(135deg, rgba(255, 61, 154, .3), rgba(255, 201, 51, .22)) !important; }
.wRow.on { background: linear-gradient(90deg, rgba(53, 224, 255, .3), rgba(155, 92, 255, .15)) !important; box-shadow: inset 0 0 0 2px var(--n-cyan) !important; }
.pwCard .ic { background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .08)) !important; box-shadow: 0 2px 0 rgba(0, 0, 0, .35), 0 0 16px rgba(155, 92, 255, .45) !important; }
.pwCard p, .pwCard h5 em { color: var(--ink-soft) !important; }
.pwCard h5 em { background: rgba(255, 255, 255, .1) !important; }
.chestCard small { color: var(--ink-soft) !important; }
.chestCard { box-shadow: 0 3px 0 rgba(0, 0, 0, .4), 0 0 18px rgba(155, 92, 255, .25) !important; }
.sku { box-shadow: 0 3px 0 rgba(0, 0, 0, .4) !important; }
.sku .st small { color: var(--ink-soft) !important; }
.sku em { background: linear-gradient(180deg, #2ff0b8, #0ea67e) !important; color: #03352a !important; box-shadow: 0 0 14px rgba(31, 232, 176, .6); }
.sku.hot, .deal { background: linear-gradient(180deg, rgba(255, 201, 51, .3), rgba(255, 150, 0, .12)) !important; box-shadow: 0 0 22px rgba(255, 201, 51, .35) !important; color: var(--ink); }
.deal.own { background: linear-gradient(180deg, rgba(31, 232, 176, .28), rgba(31, 232, 176, .1)) !important; }
.sku.best { outline-color: var(--n-gold); }
.tag { background: linear-gradient(135deg, rgba(255, 201, 51, .28), rgba(255, 61, 154, .2)) !important; color: #ffe9a8 !important; border: 1px solid rgba(255, 201, 51, .4); }
.tag.off { background: rgba(255, 255, 255, .08) !important; color: var(--ink-soft) !important; border-color: transparent; }
.rstep i { background: linear-gradient(180deg, #7a95ff, #4c6fff) !important; box-shadow: 0 0 12px rgba(76, 111, 255, .8); }
.rstep em, .mis .ok { color: #ffe08a !important; }
.mis .ok { color: var(--n-mint) !important; }
.bar, .needBar { background: rgba(0, 0, 0, .45) !important; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .6); }
.bar > i { background: linear-gradient(90deg, var(--n-mint), var(--n-cyan)) !important; box-shadow: 0 0 10px rgba(31, 232, 176, .8); }
.needBar > i { background: linear-gradient(90deg, #5fd08a, var(--n-mint)) !important; }
.needBar b { color: #fff !important; text-shadow: 0 1px 2px rgba(0, 0, 0, .8); }
.lr em.bad { color: #ff8aa0; }
.rpBtn { color: var(--ink-soft); }

/* =====================================================================
   IN-GAME HUD
   ===================================================================== */
#vignette { background: radial-gradient(ellipse at center, transparent 40%, rgba(15, 8, 50, .38) 100%) !important; }
#gl { filter: saturate(1.12) contrast(1.04); }

#hud .mine {
  padding: 8px 16px 10px; border-radius: 18px;
  background: linear-gradient(180deg, rgba(25, 18, 66, .82), rgba(12, 8, 40, .8));
  border: 1.5px solid var(--n-line);
  box-shadow: 0 6px 22px rgba(0, 0, 0, .4), 0 0 24px rgba(155, 92, 255, .3);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
#pct {
  background: linear-gradient(180deg, #fff 20%, #ffe58a 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 14px rgba(255, 201, 51, .75)); text-shadow: none !important;
}
#pct.hurt { -webkit-text-fill-color: #ff3d5e; filter: drop-shadow(0 0 16px rgba(255, 61, 94, .95)); }
#sub { color: var(--n-cyan) !important; text-shadow: 0 0 10px rgba(53, 224, 255, .6) !important; }
.pbar { background: rgba(0, 0, 0, .5) !important; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .6); }
.pbar i { background: linear-gradient(90deg, #ffd34d, #ff3d9a) !important; box-shadow: 0 0 12px rgba(255, 150, 60, .9); }
.pbar b { background: #fff !important; box-shadow: 0 0 8px #fff; }
.pbar b::after { color: #fff !important; }

#lb {
  background: linear-gradient(180deg, rgba(25, 18, 66, .8), rgba(12, 8, 40, .75)) !important;
  border: 1.5px solid var(--n-line); border-radius: 16px !important;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .4), 0 0 24px rgba(155, 92, 255, .28);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
#lb li { color: #fff; }
#lb li:first-child b { color: var(--n-gold); text-shadow: 0 0 10px rgba(255, 201, 51, .9); opacity: 1; }
#lb li.me { background: linear-gradient(90deg, rgba(255, 61, 154, .5), rgba(155, 92, 255, .3)) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35), 0 0 14px rgba(255, 61, 154, .5); }
#lb i { box-shadow: 0 0 8px currentColor; border: 1px solid rgba(255, 255, 255, .6); }

#feed div { background: rgba(18, 12, 51, .78) !important; border: 1px solid var(--n-line); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: 0 4px 14px rgba(0, 0, 0, .35); }
#feed div.mine { background: linear-gradient(90deg, rgba(255, 61, 154, .9), rgba(255, 61, 94, .85)) !important; border-color: rgba(255, 255, 255, .5); box-shadow: 0 0 20px rgba(255, 61, 154, .7); }
#timer { background: rgba(18, 12, 51, .82) !important; border: 1.5px solid var(--n-cyan); color: var(--n-cyan) !important; text-shadow: 0 0 12px rgba(53, 224, 255, .9); box-shadow: 0 0 20px rgba(53, 224, 255, .4); }
#timer.low { background: linear-gradient(180deg, #ff6a83, #e0243f) !important; color: #fff !important; border-color: #fff; box-shadow: 0 0 26px rgba(255, 61, 94, .95); }
#net { color: rgba(255, 255, 255, .7) !important; text-shadow: 0 1px 4px rgba(0, 0, 0, .8); }

#pop { text-shadow: 0 0 24px rgba(255, 255, 255, .9), 0 4px 0 rgba(0, 0, 0, .35) !important; -webkit-text-stroke: 1.5px rgba(40, 10, 90, .7); }
#pop.hot { color: #ff7ac0 !important; text-shadow: 0 0 28px rgba(255, 61, 154, 1), 0 4px 0 rgba(0, 0, 0, .35) !important; }
#pop.gold { color: #ffe066 !important; text-shadow: 0 0 28px rgba(255, 201, 51, 1), 0 4px 0 rgba(0, 0, 0, .35) !important; }

#tut, #goHint, #spec, #arenaName {
  background: linear-gradient(180deg, rgba(25, 18, 66, .9), rgba(12, 8, 40, .88)) !important; color: #fff !important;
  border: 1.5px solid var(--n-cyan); box-shadow: 0 0 24px rgba(53, 224, 255, .45), 0 6px 20px rgba(0, 0, 0, .4);
  text-shadow: 0 0 10px rgba(53, 224, 255, .6);
}
#goHint .gi { filter: brightness(0) invert(1) drop-shadow(0 0 6px #fff); }
#resume { background: rgba(7, 5, 26, .55) !important; text-shadow: 0 0 40px var(--n-pink), 0 0 80px var(--n-violet); }

#joy { border-color: rgba(53, 224, 255, .5) !important; box-shadow: 0 0 22px rgba(53, 224, 255, .4), inset 0 0 18px rgba(53, 224, 255, .2); background: rgba(53, 224, 255, .06); }
#joy i { background: radial-gradient(circle at 35% 30%, #fff, var(--n-cyan)) !important; box-shadow: 0 0 18px rgba(53, 224, 255, .9); }

#mini { border: 3px solid rgba(160, 140, 255, .65); box-shadow: 0 0 0 3px rgba(18, 12, 51, .8), 0 0 28px rgba(155, 92, 255, .6), 0 6px 20px rgba(0, 0, 0, .5) !important; background: rgba(12, 8, 40, .55); }

#powers button {
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .35), rgba(155, 92, 255, .55) 70%) !important;
  border: 2px solid rgba(255, 255, 255, .7) !important; box-shadow: 0 0 0 3px rgba(18, 12, 51, .6), 0 0 22px rgba(155, 92, 255, .85), 0 5px 14px rgba(0, 0, 0, .5) !important;
}
#powers button:not([disabled]) { animation: nFloat 1.8s ease-in-out infinite; }
#powers button b { background: linear-gradient(180deg, #ffe066, #ffb300) !important; border: 1.5px solid #fff; }

#toast { background: linear-gradient(180deg, rgba(36, 26, 96, .96), rgba(20, 13, 58, .96)) !important; color: #fff !important; border: 1.5px solid var(--n-line); box-shadow: 0 8px 30px rgba(0, 0, 0, .55), 0 0 24px rgba(155, 92, 255, .4) !important; }
#inv { background: linear-gradient(180deg, rgba(36, 26, 96, .97), rgba(20, 13, 58, .97)) !important; color: #fff !important; border: 1.5px solid var(--n-cyan); box-shadow: 0 8px 30px rgba(0, 0, 0, .55), 0 0 26px rgba(53, 224, 255, .45) !important; }
#invBar { background: linear-gradient(90deg, var(--n-cyan), var(--n-pink)) !important; box-shadow: 0 0 10px var(--n-cyan); }
#err { background: #07051a !important; color: #fff; }

#break { background: rgba(7, 5, 26, .72) !important; }
#break .bk { background: linear-gradient(180deg, #241a60, #140d3a) !important; border: 1.5px solid var(--n-line); box-shadow: 0 0 40px rgba(155, 92, 255, .5) !important; }
#break b { color: #fff !important; }
#break .bkBar { background: rgba(0, 0, 0, .5) !important; }
#break .bkBar i { background: linear-gradient(90deg, var(--n-cyan), var(--n-pink)) !important; box-shadow: 0 0 10px var(--n-cyan); }

/* =====================================================================
   POP-UP OFFERS + dialogs injected by main.js with inline <style>
   ===================================================================== */
.ofCard {
  color: var(--ink) !important;
  background: linear-gradient(180deg, #2d1f78, #150d3d) padding-box, linear-gradient(120deg, var(--n-pink), var(--n-gold), var(--n-mint), var(--n-blue), var(--n-pink)) border-box !important;
  background-size: auto, 300% 100% !important;
  border: 3px solid transparent !important; animation: nBorder 6s linear infinite;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .6), 0 0 50px rgba(155, 92, 255, .5) !important;
}
.ofCard.noads { background: linear-gradient(180deg, #123a4a, #150d3d) padding-box, linear-gradient(120deg, var(--n-mint), var(--n-cyan), var(--n-mint)) border-box !important; background-size: auto, 300% 100% !important; }
.ofTag { background: linear-gradient(180deg, #ff6aae, #e0247f) !important; box-shadow: 0 0 20px rgba(255, 61, 154, .8); }
.ofX { background: rgba(255, 255, 255, .12) !important; }
.ofSub, .ofGets small { color: var(--ink-soft) !important; }
.ofTimer { color: #ff9ac8 !important; }
.ofLater { color: var(--ink-soft) !important; }
.rpCard, .agCard { background: linear-gradient(180deg, #241a60, #140d3a) !important; color: #fff !important; border: 1.5px solid var(--n-line); box-shadow: 0 12px 50px rgba(0, 0, 0, .6), 0 0 36px rgba(155, 92, 255, .4) !important; }
.rpCard button { background: rgba(255, 255, 255, .12) !important; color: #fff !important; }
.rpCard .rpBlock { background: rgba(255, 61, 94, .28) !important; color: #ff9aae !important; }
.rpCard .rpX { background: transparent !important; color: var(--ink-soft) !important; }
.agCard button { background: linear-gradient(180deg, #2ff0b8, #0ea67e) !important; color: #03352a !important; }
.nAsk { background: linear-gradient(180deg, #241a60, #140d3a) !important; color: #fff !important; border: 1.5px solid var(--n-line); box-shadow: 0 10px 34px rgba(0, 0, 0, .6), 0 0 24px rgba(155, 92, 255, .4) !important; }
.nAsk button { background: rgba(255, 255, 255, .14) !important; color: #fff !important; }
.nAsk button.y { background: linear-gradient(180deg, #2ff0b8, #0ea67e) !important; color: #03352a !important; }

/* =====================================================================
   FETIH (strategy) screens share the same class names — dark polish
   ===================================================================== */
#topbar, #panel, #lead, .offer, #banner {
  border: 1.5px solid var(--n-line);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .45), 0 0 26px rgba(155, 92, 255, .28) !important;
}
#gMe { background: linear-gradient(90deg, #ffd34d, #ff3d9a) !important; box-shadow: 0 0 12px rgba(255, 150, 60, .9); }
#clock { text-shadow: 0 0 12px rgba(53, 224, 255, .8); }
.stat b { text-shadow: 0 0 12px rgba(255, 255, 255, .45); }
.stat.gold b { color: var(--n-gold); text-shadow: 0 0 14px rgba(255, 201, 51, .8); }
.offer button { background: linear-gradient(180deg, #2ff0b8, #0ea67e) !important; color: #03352a !important; }
.offer button.no { background: rgba(255, 255, 255, .14) !important; color: #fff !important; }

/* =====================================================================
   Accessibility: respect reduced-motion
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; }
}
/* Low-power phones: drop the expensive blur layers */
@media (max-width: 480px) {
  .card, #friends .card, #settings .card { backdrop-filter: none; -webkit-backdrop-filter: none; }
  #menu::after { display: none; }
}