/* ══════════ Global pixel-UI skin for all screens (preview) ══════════ */
/* Restyles shared components to match the pixel menu. Game canvas untouched. */
:root { --p-ink:#1a1230; --p-panel:#241a3e; --p-hi:#3a2c5e; --p-lo:#160f28; --p-gold:#ffcf1f; }

/* square corners everywhere except the game screen */
.screen:not(#screen-game) *, .invite-modal * { border-radius: 0 !important; }

/* pixel-frame helper look (flat panel + hard stepped bevel) */
.pf, .invite-sheet, .clan-card, .tourn-pool, .vip-card, .starter-pack,
.ranked-hero, .ranked-rewards, .ranked-lb, .clan-row, .ranked-lb-row, .ranked-rw-row,
.dailych-lb-row, .coin-pack, .boost-pack, .trail-card, .compete-panel .clan-row {
  background: var(--p-panel);
  box-shadow: 0 0 0 3px var(--p-ink), inset 3px 3px 0 var(--p-hi), inset -3px -3px 0 var(--p-lo) !important;
  border: 0 !important;
}
/* modals get a chunkier frame */
.invite-sheet { box-shadow: 0 0 0 5px var(--p-ink), inset 4px 4px 0 var(--p-hi), inset -4px -4px 0 var(--p-lo) !important; }

/* headers */
.lb-header { background: var(--p-panel) !important; box-shadow: inset 0 -5px 0 var(--p-lo); border-bottom: 4px solid var(--p-ink) !important; }
.lb-header h2 { color: #fff; text-shadow: 2px 2px 0 var(--p-ink); }
.back-btn {
  background: var(--p-panel) !important; color: #fff; width: 40px; height: 40px; line-height: 1;
  box-shadow: 0 0 0 3px var(--p-ink), inset 2px 2px 0 var(--p-hi), inset -2px -2px 0 var(--p-lo);
}

/* tabs */
.shop-tab, .compete-tab {
  background: var(--p-panel) !important; color: rgba(255,255,255,.55) !important; border: 0 !important;
  box-shadow: 0 0 0 3px var(--p-ink), inset 2px 2px 0 var(--p-hi), inset -2px -2px 0 var(--p-lo) !important;
}
.shop-tab.active, .compete-tab.active {
  color: #fff !important;
  box-shadow: 0 0 0 3px var(--p-gold), inset 2px 2px 0 var(--p-hi), inset -2px -2px 0 var(--p-lo) !important;
}

/* buttons → square + firm pixel bevel (keep each colour) */
.btn { border-radius: 0 !important; border: 0 !important; }
.btn-green   { box-shadow: 0 0 0 4px #1a3d0a, inset 4px 4px 0 #a5f050, inset -4px -4px 0 #4d8a1f, 0 6px 0 #123300 !important; color:#123300 !important; }
.btn-red     { box-shadow: 0 0 0 4px #6e1c0e, inset 4px 4px 0 #ff7a5c, inset -4px -4px 0 #a82f18, 0 6px 0 #4a1208 !important; }
.btn-yellow  { box-shadow: 0 0 0 4px #8a6000, inset 4px 4px 0 #ffe860, inset -4px -4px 0 #c99400, 0 6px 0 #6b4a00 !important; color:#543100 !important; }
.btn-purple  { box-shadow: 0 0 0 4px #4a1a8a, inset 4px 4px 0 #cc88ff, inset -4px -4px 0 #7a2fc0, 0 6px 0 #35106a !important; }
.btn-gray    { box-shadow: 0 0 0 4px #3d5a70, inset 4px 4px 0 #b8cce0, inset -4px -4px 0 #6d8298, 0 6px 0 #2a4256 !important; }
.btn-orange  { box-shadow: 0 0 0 4px #8a2f14, inset 4px 4px 0 #ffb078, inset -4px -4px 0 #c05a20, 0 6px 0 #5a1f0c !important; }
.btn-invite  { box-shadow: 0 0 0 4px #0088aa, inset 4px 4px 0 #55ddff, inset -4px -4px 0 #1899bb, 0 6px 0 #0a6688 !important; }
.btn-pass    { box-shadow: 0 0 0 4px #8a6000, inset 4px 4px 0 #ffe860, inset -4px -4px 0 #c99400, 0 6px 0 #6b4a00 !important; }
.btn-wheel   { box-shadow: 0 0 0 4px #a81e6e, inset 4px 4px 0 #ffb3dc, inset -4px -4px 0 #d44e97, 0 6px 0 #7a1450 !important; }
.btn-daily-ch{ box-shadow: 0 0 0 4px #0088aa, inset 4px 4px 0 #55ddff, inset -4px -4px 0 #1899bb, 0 6px 0 #0a6688 !important; }
.btn-compete { box-shadow: 0 0 0 4px #a85e12, inset 4px 4px 0 #ffc078, inset -4px -4px 0 #d1801f, 0 6px 0 #7a4310 !important; }
.btn:active { transform: translateY(4px); }

/* compete-hub buttons + shop buy buttons */
.compete-btn, .vip-buy, .starter-pack-buy, .dailych-play, .clan-input {
  border-radius: 0 !important; border: 0 !important;
}
.compete-btn.green, .vip-buy { box-shadow: 0 0 0 4px #1a3d0a, inset 4px 4px 0 #a5f050, inset -4px -4px 0 #4d8a1f, 0 5px 0 #123300 !important; }
.compete-btn.red { box-shadow: 0 0 0 4px #6e1c0e, inset 4px 4px 0 #ff7a5c, inset -4px -4px 0 #a82f18, 0 5px 0 #4a1208 !important; }
.clan-input { background: #140e26 !important; color:#fff; box-shadow: inset 0 0 0 3px var(--p-ink), inset 5px 5px 0 rgba(0,0,0,.35) !important; }
.clan-row .join-b { box-shadow: 0 0 0 2px #1a3d0a, inset 2px 2px 0 #a5f050, inset -2px -2px 0 #4d8a1f !important; border:0 !important; }

/* ── content width + tab/panel animations ─────────────────────────────── */
/* center content columns (fills phones, neat centered column on desktop) */
.compete-scroll, .ranked-scroll, #shop-tab-coins, #shop-tab-skins,
.compete-tabs, .shop-tabs { width: 100%; max-width: 460px; margin-left: auto; margin-right: auto; }

/* panels/content fade + slide in when a tab becomes visible */
.compete-panel, .shop-tab-content, .ranked-scroll { animation: pui-fade .3s ease; }
@keyframes pui-fade { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* list rows stagger in */
.clan-row, .ranked-lb-row, .ranked-rw-row, .dailych-lb-row, .coin-pack, .boost-pack, .trail-card {
  animation: pui-rowin .32s ease backwards;
}
.clan-row:nth-child(1),.ranked-lb-row:nth-child(1),.ranked-rw-row:nth-child(1){animation-delay:.03s}
.clan-row:nth-child(2),.ranked-lb-row:nth-child(2),.ranked-rw-row:nth-child(2){animation-delay:.07s}
.clan-row:nth-child(3),.ranked-lb-row:nth-child(3),.ranked-rw-row:nth-child(3){animation-delay:.11s}
.clan-row:nth-child(4),.ranked-lb-row:nth-child(4),.ranked-rw-row:nth-child(4){animation-delay:.15s}
.clan-row:nth-child(n+5),.ranked-lb-row:nth-child(n+5){animation-delay:.19s}
@keyframes pui-rowin { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }

/* prize pool number breathes */
.tourn-pool-val { animation: pui-breathe 1.6s ease-in-out infinite; }
@keyframes pui-breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } }

/* fix cramped tournament meta ("1000Players") */
.tourn-meta { gap: 10px; flex-wrap: wrap; }
.tourn-meta > span { white-space: nowrap; }