/* ============================================================
   SKIN.CSS — "real game" look for the lobby (loaded last)
   ------------------------------------------------------------
   Owner feedback (2026-09-23): the lobby looked like plain dark
   cards with text ("gawang AI"). This layer turns the same layout
   into game UI chrome: arena backdrop, bevelled metal/glass panels,
   glossy 3D buttons, gold section headers, dog art on the hero card.
   Pure CSS; Codex's UI art kit (game/assets/ui/) replaces pieces of
   this when it lands. Everything here is override-only.
   ============================================================ */

/* ---------- lobby backdrop: the arena, blurred and darkened ---------- */
#screen-lobby{ position:relative; background:#070a16 !important; }
#screen-lobby::before{
  content:''; position:fixed; inset:-24px; z-index:0; pointer-events:none;
  background:url('../assets/backgrounds/arena-v2-desktop.webp') center 30% / cover no-repeat;
  filter:blur(9px) brightness(.38) saturate(1.25);
}
#screen-lobby::after{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(0,194,255,.10), transparent 70%),
    radial-gradient(ellipse 50% 60% at 100% 100%, rgba(255,45,45,.10), transparent 70%),
    linear-gradient(180deg, rgba(4,6,16,.35), rgba(4,6,16,.65));
}
/* Only lift the in-flow columns above the backdrop on desktop. On phones the
   sidebar and chat are fixed off-canvas drawers (responsive.css / fx-lobby.css);
   forcing position:relative there pushed the whole page below the screen. */
@media (min-width:768px) and (min-height:521px){
  #app-sidebar, #content-area, #chat-side-panel{ position:relative; z-index:1; }
}
#content-area{ background:transparent !important; }

/* ---------- panels: bevelled dark-glass plates with a metal rim ---------- */
.profile-card, .prog-card, .action-card, .daily-race-card, .chat-panel, .match-ticker,
.player-card, .comm-stat, .reward-item, .mission-card, .card, .activity-panel,
.lb-row, .room-row, .settings-card, .bc-glass-card, .bc-feature-card, .gear-preview,
.lobby-status-bar, .worldplay-hero, .top-players-card, .private-note, .mh-row,
.rewards-token-soon, .achievement-card, .tut-card{
  background:linear-gradient(180deg, rgba(30,37,68,.94) 0%, rgba(14,18,36,.96) 100%) !important;
  border:2px solid #2b3560 !important;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.65),
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -3px 0 rgba(0,0,0,.4),
    0 12px 26px rgba(0,0,0,.5),
    0 0 22px rgba(0,194,255,.07) !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
}
.pstat, .cs-stat, .wpc-stat, .stat-tile{
  background:linear-gradient(180deg, rgba(8,11,24,.9), rgba(16,20,40,.9)) !important;
  border:1.5px solid rgba(0,194,255,.28) !important; border-radius:12px !important;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.6), inset 0 -1px 0 rgba(255,255,255,.06), 0 1px 0 rgba(255,255,255,.05) !important;
}

/* featured panels get the gold rim */
.world-play-card, .daily-race-card, .prog-card.u-024922:first-of-type, .bc-glass-card{
  border-color:#c9a227 !important;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.7),
    inset 0 1px 0 rgba(255,240,150,.35),
    inset 0 -3px 0 rgba(0,0,0,.45),
    0 12px 28px rgba(0,0,0,.55),
    0 0 26px rgba(255,200,40,.16) !important;
}
/* World Play hero card: full-bleed VS art by Codex (assets/ui/hero-world-play*.webp).
   Dogs own the outer 30% on each side; the dark centre column holds title + one
   PLAY NOW; live stats sit in a slim footer strip. */
.world-play-card{
  container-type:inline-size; overflow:hidden; position:relative;
  min-height:300px; padding:0 !important; display:flex; flex-direction:column;
  background:#070b1c url('../assets/ui/hero-world-play.webp') center 35% / cover no-repeat !important;
}
.world-play-card::before{ display:none !important; }
.world-play-card::after{ /* keep the centre column calm so the text reads */
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(ellipse 26% 70% at 50% 45%, rgba(5,8,22,.55), transparent 100%);
}
.world-play-card .wpc-inner{
  position:relative; z-index:2; flex:1 1 auto; display:flex; flex-direction:column; align-items:center;
  text-align:center; padding:22px 30% 0;
}
.world-play-card .wpc-label{ justify-content:center; }
.world-play-card .wpc-title{ font-size:clamp(1.6rem, 6cqi, 2.6rem); line-height:1; margin-top:4px;
  text-shadow:0 3px 0 #000, 0 0 18px rgba(0,0,0,.9); }
.world-play-card .wpc-sub{ color:rgba(255,255,255,.85) !important; text-shadow:0 1px 3px #000, 0 0 10px #000; margin-top:8px; }
.world-play-card .wpc-btn{ margin:16px 0 18px; white-space:nowrap; font-size:clamp(1.05rem, 3.6cqi, 1.35rem) !important; padding:14px 38px !important; }
.world-play-card .wpc-stats{
  position:relative; z-index:2; margin:auto 0 0 !important; width:100%; justify-content:center; gap:0 !important;
  background:linear-gradient(180deg, rgba(4,6,16,.55), rgba(4,6,16,.92)); border-top:1px solid rgba(255,230,0,.25);
}
.world-play-card .wpc-stat{ flex-direction:row !important; align-items:baseline; gap:6px !important; padding:8px 18px;
  background:none !important; border:none !important; box-shadow:none !important; border-radius:0 !important; }
.world-play-card .wpc-stat + .wpc-stat{ border-left:1px solid rgba(255,255,255,.12) !important; }
.world-play-card .wpc-stat-lbl{ font-size:.66rem; letter-spacing:1px; color:rgba(255,255,255,.6); text-transform:uppercase; }
/* narrow card (phones, small laptops): portrait art, dogs on top, text + CTA underneath */
@container (max-width:560px){
  .world-play-card{ background-image:url('../assets/ui/hero-world-play-mobile.webp') !important; background-position:center top !important; background-size:100% auto !important; background-color:#0a1a4a !important; }
  .world-play-card::after{ display:none; }
  .world-play-card .wpc-inner{ padding:38cqi 16px 0; }
  .world-play-card .wpc-btn{ width:100%; max-width:340px; }
}

/* ---------- buttons: glossy, bevelled, pressable ---------- */
.btn.y, .claim-btn, #reward-wallet-btn, .wallet-connect-btn, .reward-item-btn:not(.cant):not(:disabled):not(.equip):not(.equipped):not(.owned),
.mission-claim, .tut-btn.tut-primary, .lb-scope-btn.active, .howto-btn, #bc-claim-btn:not(:disabled){
  background:linear-gradient(180deg, #fff58a 0%, #ffe600 42%, #f0c000 100%) !important;
  color:#2a1a00 !important;
  border:2px solid #5a3f00 !important;
  box-shadow:0 4px 0 #9a6a00, 0 7px 14px rgba(0,0,0,.5), inset 0 2px 0 rgba(255,255,255,.75), inset 0 -2px 0 rgba(0,0,0,.12) !important;
  text-shadow:0 1px 0 rgba(255,255,255,.45) !important;
  transform:none !important; transition:transform .06s, box-shadow .06s, filter .12s !important;
}
.btn.y:hover, .claim-btn:hover, #reward-wallet-btn:hover, .wallet-connect-btn:hover{ filter:brightness(1.06); transform:translateY(-1px) !important; }
.btn.y:active, .claim-btn:active, #reward-wallet-btn:active, .wallet-connect-btn:active, .mission-claim:active, .tut-btn.tut-primary:active{
  transform:translateY(3px) !important; box-shadow:0 1px 0 #9a6a00, 0 3px 8px rgba(0,0,0,.5), inset 0 2px 0 rgba(255,255,255,.4) !important;
}
.btn.g, .wpc-btn{
  background:linear-gradient(180deg, #8dffc6 0%, #00ff87 45%, #00c463 100%) !important;
  color:#03301a !important; border:2px solid #044d29 !important;
  box-shadow:0 4px 0 #067a3f, 0 7px 14px rgba(0,0,0,.5), inset 0 2px 0 rgba(255,255,255,.7) !important;
  text-shadow:0 1px 0 rgba(255,255,255,.4) !important; transform:none !important;
}
.btn.g:active, .wpc-btn:active{ transform:translateY(3px) !important; box-shadow:0 1px 0 #067a3f, 0 3px 8px rgba(0,0,0,.5) !important; }
.wpc-btn{ font-size:1.15rem !important; padding:13px 34px !important; border-radius:14px !important; }
.claim-btn.claimed, .reward-item-btn.cant, .reward-item-btn:disabled, #bc-claim-btn:disabled{
  background:linear-gradient(180deg, #3a4160, #232848) !important; color:rgba(255,255,255,.4) !important;
  border-color:#1a1f36 !important; box-shadow:0 3px 0 #0d1020, inset 0 1px 0 rgba(255,255,255,.08) !important; text-shadow:none !important;
}
.sidebar-logout-btn{ background:linear-gradient(180deg, rgba(255,45,45,.18), rgba(120,10,10,.25)) !important; border:1.5px solid rgba(255,45,45,.4) !important; color:#ff8a8a !important; box-shadow:0 2px 0 rgba(0,0,0,.5) !important; }

/* ---------- section headers: gold with a shadow, like game HUD labels ---------- */
.lobby-section-label, .prog-card-title, .daily-race-title, .content-title, .rewards-shop-title, .wpc-label,
.lb-title, .panel-title, .section-title{
  font-family:'Luckiest Guy',sans-serif !important; color:#FFE600 !important; letter-spacing:1px !important;
  text-shadow:2px 2px 0 #000, 0 0 12px rgba(255,230,0,.25) !important; font-weight:400 !important;
}
.lobby-section-label{ font-size:.82rem !important; opacity:1 !important; }
.prog-card-head img.pc-ico, .lobby-section-label img.sl-ico{ width:22px; height:22px; object-fit:contain; margin-right:2px; filter:drop-shadow(0 2px 3px rgba(0,0,0,.6)); }
.content-title{ font-size:1.15rem !important; }

/* ---------- sidebar: metal rail ---------- */
#app-sidebar{
  background:linear-gradient(180deg, #0f1530 0%, #090c1c 100%) !important;
  border-right:2px solid #2b3560 !important;
  box-shadow:inset -1px 0 0 rgba(255,255,255,.06), 4px 0 26px rgba(0,0,0,.55) !important;
}
.sidebar-logo{ background:linear-gradient(180deg, rgba(255,230,0,.07), transparent); border-bottom:2px solid #2b3560 !important; }
.sidebar-logo-text{ font-size:1.35rem !important; text-shadow:3px 3px 0 #7a1010, 0 0 16px rgba(255,230,0,.35) !important; }
.nav-item{ border:2px solid transparent !important; border-radius:14px !important; }
.nav-item:hover{ background:rgba(0,194,255,.08) !important; }
.nav-item.active{
  background:linear-gradient(180deg, #fff27a, #ffd400 60%, #e0a800) !important;
  border-color:#5a3f00 !important; color:#2a1a00 !important;
  box-shadow:0 3px 0 #8a6200, 0 6px 14px rgba(0,0,0,.45), inset 0 2px 0 rgba(255,255,255,.6) !important;
  text-shadow:0 1px 0 rgba(255,255,255,.4) !important; transform:none !important;
}
.nav-item.active::before{ display:none !important; }
.nav-item.active .nav-icon{ filter:drop-shadow(0 1px 2px rgba(0,0,0,.5)) !important; }
.sidebar-profile-mini{ background:linear-gradient(180deg, rgba(30,37,68,.9), rgba(14,18,36,.95)) !important; border:2px solid #2b3560 !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 3px 8px rgba(0,0,0,.4) !important; }

/* ---------- top bar ---------- */
.content-topbar{
  background:linear-gradient(180deg, rgba(14,18,36,.96), rgba(9,12,26,.96)) !important;
  border-bottom:2px solid #2b3560 !important;
  box-shadow:0 2px 0 rgba(255,230,0,.18), 0 8px 20px rgba(0,0,0,.45) !important;
}
.smp{ background:linear-gradient(180deg, rgba(30,37,68,.9), rgba(14,18,36,.95)) !important; border:1.5px solid #2b3560 !important; color:rgba(255,255,255,.7) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.1) !important; }
.mobile-menu-btn{ background:linear-gradient(180deg, #2a3358, #161c38) !important; border:2px solid #2b3560 !important; box-shadow:0 3px 0 #0d1020 !important; }

/* ---------- status pills / small chips ---------- */
.status-pill, .cnt-pill, .profile-rankchip, .profile-globalrank, .rewards-balance-chip, .daily-prize-pill, .chat-live-pill{
  text-shadow:1px 1px 0 rgba(0,0,0,.7);
}
.profile-rankchip, .rewards-balance-chip, .daily-prize-pill{
  background:linear-gradient(180deg, rgba(255,230,0,.22), rgba(255,180,0,.08)) !important;
  border:1.5px solid rgba(255,230,0,.55) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 2px 4px rgba(0,0,0,.4) !important;
}

/* ---------- avatar ring: neon coin ---------- */
.profile-avatar-ring{ box-shadow:0 0 0 3px #0b0f1e, 0 0 0 5px #FFE600, 0 0 18px rgba(255,230,0,.5) !important; }

/* ---------- progress bars: tube look ---------- */
.rank-progress-track, .mission-bar, .bc-progress{
  background:linear-gradient(180deg, #05070f, #141a30) !important; border:1.5px solid #2b3560 !important;
  box-shadow:inset 0 2px 5px rgba(0,0,0,.7) !important; border-radius:999px !important; overflow:hidden;
}
.rank-progress-fill, .mission-bar-fill, .bc-progress-fill{
  box-shadow:inset 0 2px 0 rgba(255,255,255,.45), 0 0 10px rgba(0,255,135,.4) !important; border-radius:999px !important;
}

/* ---------- chat ---------- */
.chat-txt{ background:linear-gradient(180deg, #05070f, #10152a) !important; border:2px solid #2b3560 !important; box-shadow:inset 0 2px 5px rgba(0,0,0,.6) !important; }

/* ---------- bottom tabs (phone) ---------- */
.bottom-tabs{ background:linear-gradient(180deg, #131a38, #090c1c) !important; border-top:2px solid #2b3560 !important; box-shadow:0 -2px 0 rgba(255,230,0,.15), 0 -8px 20px rgba(0,0,0,.5) !important; }
.bottom-tab.active{ background:linear-gradient(180deg, #fff27a, #ffd400 60%, #e0a800) !important; color:#2a1a00 !important; box-shadow:0 2px 0 #8a6200, inset 0 1px 0 rgba(255,255,255,.6) !important; text-shadow:none !important; }

/* ---------- right panel: chat on top, Live Activity under it (owner request) ---------- */
#chat-side-panel{ display:flex; flex-direction:column; background:linear-gradient(180deg, #0f1530 0%, #090c1c 100%) !important; border-left:2px solid #2b3560 !important; }
#chat-side-panel .chat-panel{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; box-shadow:none !important; border:none !important; background:transparent !important; }
#chat-side-panel .chat-area{ flex:1 1 auto; height:auto !important; min-height:0 !important; max-height:none !important; }
#chat-side-panel .chat-input-row{ flex:0 0 auto; }
.chat-activity{ flex:0 0 auto; max-height:44%; display:flex; flex-direction:column; min-height:0;
  padding:10px 12px 12px; border-top:2px solid #2b3560; background:rgba(4,6,16,.35); }
.chat-activity-title{ font-family:'Luckiest Guy',sans-serif; color:#FFE600; letter-spacing:1px; font-size:.82rem;
  text-shadow:2px 2px 0 #000; margin-bottom:8px; }
.chat-activity .community-stats-row{ gap:6px; margin-bottom:8px; }
.chat-activity .cs-stat{ padding:6px 4px !important; }
.chat-activity .cs-stat-val{ font-size:.95rem; }
.chat-activity .activity-panel{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; }
.chat-activity .activity-feed{ flex:1 1 auto; max-height:none; min-height:60px; overflow-y:auto; }
.chat-activity .activity-item{ font-size:.72rem; text-align:left; padding:6px 10px; }

/* recent matches: opponent name was blurry glowing display font — plain crisp text */
.mh-opp{ font-family:'Rajdhani',sans-serif !important; font-weight:700 !important; font-size:.92rem !important;
  color:#fff !important; text-shadow:none !important; filter:none !important; letter-spacing:.2px; }
.mh-res{ text-shadow:none !important; }

/* ---------- phone landscape login: brand left, form right (Codex audit #8C) ---------- */
@media (max-height:520px) and (orientation:landscape){
  #screen-auth:not([style*="none"]){
    display:grid !important; min-height:100vh; height:100vh; overflow-y:auto; padding:10px 24px !important; gap:0 28px !important;
    grid-template-columns:minmax(0,40%) minmax(0,1fr);
    grid-template-rows:1fr auto auto auto 1fr auto;
    grid-template-areas:". form" "logo form" "title form" "tag form" ". form" ". legal";
    align-items:center; justify-items:center;
  }
  #screen-auth .u-3e3665{ grid-area:logo; width:78px; height:78px; }
  #screen-auth .t-mega{ grid-area:title; font-size:2.6rem !important; line-height:.95; margin:6px 0; }
  #screen-auth .tag{ grid-area:tag; }
  #screen-auth .auth-wrap{ grid-area:form; width:100%; max-width:400px; align-self:center; margin:0 !important; }
  #screen-auth .auth-legal{ grid-area:legal; margin:4px 0 0 !important; font-size:.66rem; }
  #screen-auth .u-59cfc7{ display:none; }
  #screen-auth .auth-input-group{ margin-bottom:8px !important; }
  #screen-auth .auth-input{ padding:10px 12px !important; min-height:44px; }
  #screen-auth .auth-btn{ min-height:48px; margin-top:6px !important; }
  #screen-auth .auth-tab{ min-height:44px; }
}