/* ============================================================
   HOME-V3.CSS — lobby chrome + Home from Codex's mockups
   design-review/mockups/home-desktop-v1.webp  (1920x1080)
   design-review/mockups/home-landscape-v1.webp (844x390)
   + #8C style guide in HANDOFF.md. Loaded after skin.css.
   ============================================================ */
:root{
  --c-canvas:#080D1A; --c-panel:#121C32; --c-raised:#1C2A45; --c-edge:#344963;
  --c-text:#F4F7FF; --c-text2:#B7C4D8; --c-muted:#899AB3;
  --c-player:#00C2FF; --c-rival:#FF2D2D; --c-yellow:#FFE600; --c-green:#00FF87;
}

/* No scrollbars anywhere in the game (still scrollable) — owner: they look cheap */
html, body, *{ scrollbar-width:none !important; }
*::-webkit-scrollbar{ width:0 !important; height:0 !important; display:none !important; }

/* ---------- shared panel look (guide: 12px corners, 2px dark outer + 1px lit inner, no glow) ---------- */
.v3-panel, #panel-home .prog-card, #panel-home .action-card, #panel-home .home-top > .u-1bb63c{
  background:linear-gradient(180deg, var(--c-raised) 0%, var(--c-panel) 100%) !important;
  border:2px solid #0a1020 !important; border-radius:12px !important;
  box-shadow:inset 0 0 0 1px var(--c-edge), inset 0 1px 0 rgba(255,255,255,.12), 0 8px 18px rgba(0,0,0,.45) !important;
}

/* ---------- top bar pieces (all sizes) ---------- */
.tb-brand{ display:none; align-items:center; gap:12px; cursor:pointer; flex-shrink:0; }
.tb-logo{ width:52px; height:52px; border-radius:50%; object-fit:cover; filter:drop-shadow(0 3px 6px rgba(0,0,0,.6)); }
.tb-word{ display:flex; flex-direction:column; line-height:1; }
.tb-name{ font-family:'Luckiest Guy',sans-serif; font-size:1.9rem; color:var(--c-yellow); letter-spacing:1px;
  text-shadow:3px 3px 0 #7a1010, -1px -1px 0 #000, 0 0 14px rgba(255,230,0,.25); }
.tb-tag{ font-family:'Rajdhani',sans-serif; font-weight:700; font-size:.72rem; letter-spacing:3px; text-transform:uppercase; color:var(--c-muted); margin-top:4px; }
.tb-profile{ display:none; align-items:center; gap:10px; padding:5px 16px 5px 5px; cursor:pointer; color:var(--c-text);
  background:linear-gradient(180deg, var(--c-raised), var(--c-panel)); border:2px solid #0a1020; border-radius:40px;
  box-shadow:inset 0 0 0 1px var(--c-edge); font-family:'Rajdhani',sans-serif; text-align:left; }
.tb-av{ width:44px; height:44px; border-radius:50%; overflow:hidden; flex-shrink:0; box-shadow:0 0 0 2px var(--c-player); display:block; }
.tb-av img{ width:100%; height:100%; object-fit:cover; display:block; }
.tb-id{ display:flex; flex-direction:column; line-height:1.1; min-width:0; }
.tb-id b{ font-family:'Luckiest Guy',sans-serif; font-weight:400; font-size:1.05rem; letter-spacing:.5px; max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tb-id small{ font-size:.78rem; font-weight:700; color:var(--c-text2); }
.tb-settings{ display:none !important; }
.content-topbar .icon-btn{ width:48px; height:48px; border-radius:12px !important; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg, var(--c-raised), var(--c-panel)) !important; border:2px solid #0a1020 !important;
  box-shadow:inset 0 0 0 1px var(--c-edge) !important; color:var(--c-text) !important; }
.content-topbar .icon-btn .ico, .content-topbar .icon-btn svg{ width:24px; height:24px; }
/* points chip + compact "+" that opens the Reward Wallet */
#reward-points-chip{ display:flex; align-items:center; gap:8px; font-family:'Luckiest Guy',sans-serif; font-size:1.2rem; color:var(--c-text);
  background:linear-gradient(180deg, #0c1428, #121c32) !important; border:2px solid #0a1020 !important; border-radius:12px !important;
  box-shadow:inset 0 0 0 1px var(--c-edge) !important; padding:6px 14px !important; height:48px; }
#reward-points-chip .gico{ width:28px; height:28px; }
#reward-wallet-btn{ width:48px; height:48px; min-width:48px; padding:0 !important; border-radius:12px !important; font-size:0 !important; overflow:hidden;
  display:flex !important; align-items:center; justify-content:center; }
#reward-wallet-btn::before{ content:'+'; font-family:'Luckiest Guy',sans-serif; font-size:1.8rem; line-height:1; color:#1a1300; }
#reward-wallet-btn *{ display:none !important; }

/* ============================================================
   DESKTOP (≥1100 × ≥600)
   ============================================================ */
@media (min-width:1100px) and (min-height:600px){
  .content-topbar{
    position:fixed !important; top:0; left:0; right:0; height:88px; z-index:70; padding:0 24px !important;
    background:linear-gradient(180deg, #0e1730 0%, #0a1124 100%) !important; border-bottom:2px solid #0a1020 !important;
    box-shadow:inset 0 -1px 0 var(--c-edge), 0 10px 24px rgba(0,0,0,.5) !important;
  }
  .tb-brand{ display:flex; }
  .tb-profile{ display:flex; }
  .tb-settings{ display:flex !important; }
  .content-topbar #panel-title, .content-topbar .mobile-menu-btn, .content-topbar .status-mini-pills{ display:none !important; }
  .content-topbar .topbar-right{ gap:12px !important; align-items:center; }
  #content-area{ padding-top:88px; }
  #app-sidebar{ padding-top:88px !important; width:240px !important; min-width:240px !important;
    background:linear-gradient(180deg, #0c1428 0%, #080d1a 100%) !important; border-right:2px solid #0a1020 !important;
    box-shadow:inset -1px 0 0 var(--c-edge) !important; }
  #app-sidebar .sidebar-logo, #app-sidebar .sidebar-bottom, #app-sidebar .nav-section-divider{ display:none !important; }
  #app-sidebar .sidebar-nav{ padding:20px 16px !important; display:flex; flex-direction:column; gap:10px; }
  #app-sidebar .nav-item{
    min-height:60px; padding:8px 14px !important; gap:14px !important; justify-content:flex-start !important; border-radius:12px !important;
    background:linear-gradient(180deg, var(--c-raised), var(--c-panel)) !important; border:2px solid #0a1020 !important;
    box-shadow:inset 0 0 0 1px var(--c-edge), 0 4px 0 #050914 !important; color:var(--c-text) !important;
  }
  #app-sidebar .nav-item:hover{ filter:brightness(1.12); }
  #app-sidebar .nav-item .nav-icon{ width:40px !important; height:40px !important; flex-shrink:0; }
  #app-sidebar .nav-item .nav-label{ font-family:'Rajdhani',sans-serif !important; font-weight:700 !important; font-size:1.15rem !important;
    letter-spacing:1px; text-transform:uppercase; color:inherit !important; }
  #app-sidebar .nav-item.active{
    background:linear-gradient(180deg, #fff27a 0%, #ffd400 55%, #e0a800 100%) !important; color:#1a1300 !important;
    box-shadow:inset 0 2px 0 rgba(255,255,255,.6), 0 4px 0 #8a6200 !important;
  }

  /* ---- Home grid (guide: hero 1184x592, right column 456, lower cards 304 tall) ---- */
  #panel-home{ padding:20px 24px 24px !important; }
  #panel-home .home-grid{
    display:grid !important; height:100%; min-height:0; gap:20px !important; align-items:stretch !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) clamp(320px, 24vw, 456px) !important;
    /* missions row never collapses below header + one mission (owner bug 2026-09-23: in a normal
       browser window, 1905x~910, a claimed Daily Reward + streak line squeezed Missions to 40px) */
    grid-template-rows:auto minmax(150px,1fr) clamp(208px, 32vh, 304px) !important;
    grid-template-areas:"hero hero daily" "hero hero missions" "private howto top" !important;
  }
  #panel-home .hg-left-col, #panel-home .hg-mid-col, #panel-home .hg-right-col{ display:contents !important; }
  #panel-home .home-profile, #panel-home .home-rooms, #panel-home .home-online, #panel-home .home-season, #panel-home .home-howto{ display:none !important; }
  #panel-home .world-play-card{ grid-area:hero; min-height:0 !important; height:auto; aspect-ratio:auto !important; }
  #panel-home .home-daily{ grid-area:daily; }
  #panel-home .home-missions{ grid-area:missions; min-height:0; overflow:hidden; }
  #panel-home .home-private{ grid-area:private; }
  #panel-home .home-howto-card{ grid-area:howto; }
  #panel-home .home-top{ grid-area:top; min-height:0; display:flex; flex-direction:column; }

  /* ---- hero ---- */
  #panel-home .world-play-card{ border:2px solid #0a1020 !important; border-radius:12px !important;
    box-shadow:inset 0 0 0 1px var(--c-edge), 0 10px 24px rgba(0,0,0,.5) !important; background-position:center 30% !important; }
  #panel-home .world-play-card .wpc-inner{ padding:0 28% !important; justify-content:center; }
  #panel-home .world-play-card .wpc-label{
    margin-top:auto; display:inline-flex !important; align-items:center; gap:10px; padding:9px 26px; border-radius:10px;
    background:rgba(8,13,26,.88); border:2px solid #0a1020; box-shadow:inset 0 0 0 1px var(--c-edge);
    font-family:'Rajdhani',sans-serif !important; font-weight:700 !important; font-size:1.05rem !important; letter-spacing:3px !important;
    color:var(--c-text) !important; text-shadow:none !important;
  }
  #panel-home .world-play-card .wpc-label .live-dot{ display:none; }
  #panel-home .world-play-card .wpc-title{ color:var(--c-text) !important; font-size:clamp(2.6rem, 5.4cqi, 4.6rem) !important; line-height:.95 !important;
    margin-top:18px; text-shadow:0 4px 0 #000, 3px 3px 0 #000, -2px -2px 0 #000, 0 0 30px rgba(0,0,0,.8) !important; }
  #panel-home .world-play-card .wpc-sub{ display:none; }
  #panel-home .world-play-card .wpc-btn{ margin:26px 0 0 !important; min-height:64px; padding:14px 56px !important; font-size:clamp(1.4rem, 2.4cqi, 2rem) !important;
    color:#06140c !important; border-radius:16px !important; letter-spacing:1px; }
  #panel-home .world-play-card .wpc-btn .ico{ display:none; }
  #panel-home .world-play-card .wpc-btn::after{ content:'›'; margin-left:14px; font-size:1.3em; line-height:0; }
  #panel-home .world-play-card .wpc-stats{ margin-top:auto !important; align-items:center; }
  #panel-home .world-play-card .wpc-ai{ margin:0 !important; padding:8px 18px !important; background:none !important; border:none !important;
    border-left:1px solid rgba(255,255,255,.12) !important; border-radius:0 !important; font-size:.72rem !important; color:var(--c-muted) !important; white-space:nowrap; }

  /* ---- daily reward ---- */
  #panel-home .home-daily{
    display:grid !important; padding:16px 20px !important; gap:4px 16px; align-items:center;
    grid-template-columns:clamp(96px, 7vw, 140px) 1fr;
    grid-template-areas:"head head" "chest cap" "chest amt" "chest btn" "streak streak";
  }
  #panel-home .home-daily .prog-card-head{ grid-area:head; margin-bottom:6px; }
  #panel-home .daily-chest{ grid-area:chest; width:100%; height:auto; filter:drop-shadow(0 6px 14px rgba(255,190,40,.35)); }
  #panel-home .daily-caption{ grid-area:cap; font-family:'Rajdhani',sans-serif; font-weight:700; font-size:.95rem; letter-spacing:1px; text-transform:uppercase; color:var(--c-text); }
  #panel-home .home-daily .daily-reward-amt{ grid-area:amt; margin:0 !important; }
  #panel-home .home-daily .daily-reward-amt b{ font-size:2.4rem !important; color:var(--c-yellow); }
  #panel-home .home-daily .claim-btn{ grid-area:btn; margin:4px 0 0 !important; min-height:52px; font-size:1.2rem !important; border-radius:12px !important; }
  #panel-home .home-daily .daily-streak{ grid-area:streak; margin:6px 0 0; font-size:.8rem; color:var(--c-text2); }
  #panel-home .daily-caption{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

  /* ---- card headers (daily / missions / top) ---- */
  #panel-home .prog-card-head{ display:flex; align-items:center; gap:10px; }
  #panel-home .prog-card-title{ font-family:'Rajdhani',sans-serif !important; font-weight:700 !important; font-size:1.2rem !important; letter-spacing:1px !important;
    text-transform:uppercase; color:var(--c-text) !important; text-shadow:none !important; }
  #panel-home .card-timer{ margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-family:'Rajdhani',sans-serif; font-weight:700;
    font-size:.9rem; color:var(--c-text2); white-space:nowrap; }
  #panel-home .gico-head{ width:30px; height:30px; }

  /* ---- missions ---- */
  #panel-home .home-missions{ padding:16px 20px !important; display:flex; flex-direction:column; gap:12px; }
  /* list scrolls instead of being cut; soft fade at the bottom hints there is more */
  #panel-home .mission-list{ gap:10px !important; overflow-x:hidden; overflow-y:auto; flex:1 1 auto; min-height:0; padding-bottom:8px;
    -webkit-mask-image:linear-gradient(180deg, #000 calc(100% - 22px), transparent); mask-image:linear-gradient(180deg, #000 calc(100% - 22px), transparent); }
  #panel-home .mission-item{ background:rgba(8,13,26,.55); border:1px solid var(--c-edge); border-radius:10px; padding:10px 12px; }
  #panel-home .mission-top{ display:flex; align-items:center; gap:10px; }
  #panel-home .mission-name{ flex:1; font-family:'Rajdhani',sans-serif; font-weight:700; font-size:1rem !important; color:var(--c-text); }
  #panel-home .mission-count{ font-family:'Rajdhani',sans-serif; font-weight:700; font-size:.95rem; color:var(--c-text2); font-variant-numeric:tabular-nums; }
  #panel-home .mission-reward{ font-size:.85rem !important; color:var(--c-yellow) !important; }
  #panel-home .mission-bar{ height:10px !important; margin-top:8px; }
  #panel-home .mission-bar-fill{ background:linear-gradient(90deg, #ffd400, #ffe600) !important; }

  /* ---- lower cards: private match / how to play ---- */
  #panel-home .home-private, #panel-home .home-howto-card{
    position:relative; overflow:hidden; display:flex !important; align-items:flex-start; padding:22px 24px !important; cursor:pointer;
  }
  #panel-home .home-private{ background:linear-gradient(135deg, #2a2466 0%, #1a1d48 55%, #121c32 100%) !important; }
  #panel-home .home-howto-card{ background:linear-gradient(135deg, #10306a 0%, #13244a 55%, #121c32 100%) !important; }
  #panel-home .ac-arrow{ display:none; }
  #panel-home .home-private .ac-icon, #panel-home .home-howto-card .ac-icon{ position:absolute; left:24px; top:22px; width:40px; height:40px; background:none !important;
    border:none !important; color:var(--c-text); font-size:40px; display:flex; }
  #panel-home .home-private .ac-icon .gico{ width:40px; height:40px; }
  #panel-home .ac-body{ position:relative; z-index:1; display:flex; flex-direction:column; height:100%; max-width:52%; }
  #panel-home .ac-title{ font-family:'Rajdhani',sans-serif !important; font-weight:700 !important; font-size:1.6rem !important; letter-spacing:1px;
    color:var(--c-text) !important; padding-left:54px; line-height:40px; }
  #panel-home .ac-sub{ font-family:'Rajdhani',sans-serif; font-weight:700; font-size:1rem !important; letter-spacing:1.5px; text-transform:uppercase;
    color:var(--c-text2) !important; margin-top:14px; line-height:1.3; }
  #panel-home .ac-cta{ margin-top:auto; align-self:flex-start; display:inline-flex; align-items:center; gap:10px; padding:12px 22px; border-radius:12px;
    font-family:'Rajdhani',sans-serif; font-weight:700; font-size:1rem; letter-spacing:1.5px; color:var(--c-text);
    background:rgba(8,13,26,.85); border:2px solid #0a1020; box-shadow:inset 0 0 0 1px var(--c-edge), 0 4px 0 #050914; }
  #panel-home .ac-art{ position:absolute; right:-10px; bottom:-18px; height:118%; width:58%; pointer-events:none; }
  #panel-home .ac-dog{ position:absolute; bottom:0; height:100%; width:auto; filter:drop-shadow(0 8px 12px rgba(0,0,0,.55)); }
  #panel-home .ac-dog-a{ right:34%; height:92%; }
  #panel-home .ac-dog-b{ right:-4%; height:92%; transform:scaleX(-1); }
  #panel-home .ac-dog-solo{ right:8%; bottom:14%; height:72%; border-radius:50%; }

  /* ---- top players (top 3) ---- */
  #panel-home .home-top .lobby-section-label{ display:none; }
  #panel-home .home-top > .u-1bb63c{ flex:1 1 auto; min-height:0; padding:16px 20px !important; display:flex; flex-direction:column; gap:10px; overflow:hidden; }
  #panel-home .home-top > .u-1bb63c::before{ content:'TOP BARKERS'; font-family:'Rajdhani',sans-serif; font-weight:700; font-size:1.2rem; letter-spacing:1px; color:var(--c-text); }
  #panel-home .lb-preview-list{ flex:1 1 auto; min-height:0; overflow:hidden !important; gap:8px !important; }
  #panel-home .lb-preview-row:nth-child(n+4){ display:none !important; }
  #panel-home .lb-preview-row{ padding:8px 12px !important; border-radius:10px !important; background:rgba(8,13,26,.55) !important; border:1px solid var(--c-edge) !important;
    display:flex; align-items:center; gap:12px; }
  #panel-home .lb-preview-name{ flex:1; text-align:left !important; font-family:'Rajdhani',sans-serif !important; font-weight:700; font-size:1.05rem !important; color:var(--c-text) !important; }
  #panel-home .lb-preview-pts{ font-family:'Rajdhani',sans-serif !important; font-weight:700; font-size:1.05rem !important; color:var(--c-text) !important; font-variant-numeric:tabular-nums; }
  #panel-home .lb-preview-avatar{ width:36px !important; height:36px !important; }
  #panel-home .lb-view-btn{ flex:0 0 auto; min-height:40px; }

  /* ---- chat drawer (guide: opens from the top-bar button) ---- */
  #chat-side-panel{
    position:fixed !important; top:100px; right:24px; z-index:90;
    width:380px !important; min-width:0 !important; height:min(620px, calc(100dvh - 124px)) !important;
    border:2px solid #0a1020 !important; border-radius:14px; overflow:hidden;
    box-shadow:inset 0 0 0 1px var(--c-edge), 0 24px 60px rgba(0,0,0,.65) !important;
    transition:opacity .18s, transform .18s;
  }
  #chat-side-panel.chat-collapsed{ opacity:0; transform:translateY(-8px); pointer-events:none; width:380px !important; }
  #chat-side-panel .chat-activity{ max-height:38%; }
}

/* ============================================================
   PHONE LANDSCAPE (≤520 tall) — every phone lands here now (land.html stage)
   guide: top bar 44, icon rail 56, hero 500x248, daily 240x148, mission 240x158, shortcuts 58
   ============================================================ */
@media (max-height:520px) and (orientation:landscape){
  .content-topbar{ height:52px; padding:4px 10px 4px 76px !important; gap:8px; background:linear-gradient(180deg, #0e1730, #0a1124) !important;
    border-bottom:2px solid #0a1020 !important; box-shadow:inset 0 -1px 0 var(--c-edge) !important; }
  .tb-brand{ display:flex; gap:8px; }
  .tb-logo{ width:34px; height:34px; }
  .tb-name{ font-size:1.25rem; }
  .tb-tag{ display:none; }
  .tb-profile{ display:flex; padding:3px 12px 3px 3px; gap:8px; }
  .tb-av{ width:34px; height:34px; }
  .tb-id b{ font-size:.85rem; max-width:110px; }
  .tb-id small{ font-size:.66rem; }
  .tb-settings{ display:flex !important; }
  .content-topbar #panel-title, .content-topbar .mobile-menu-btn, .content-topbar .status-mini-pills{ display:none !important; }
  .content-topbar .topbar-right{ gap:6px !important; margin-left:auto; }
  .content-topbar .icon-btn, #reward-wallet-btn{ width:44px !important; height:40px !important; min-width:44px; }
  #reward-points-chip{ height:40px; font-size:.95rem; padding:4px 10px !important; }
  #reward-points-chip .gico{ width:22px; height:22px; }

  /* icon rail on the left (the bottom tabs, turned sideways) */
  .bottom-tabs{
    display:flex !important; position:fixed !important; left:8px !important; right:auto !important; top:8px !important; bottom:8px !important;
    width:58px; flex-direction:column !important; gap:8px; padding:0 !important; background:none !important; border:none !important; box-shadow:none !important;
    z-index:66;
  }
  .bottom-tabs::before{ content:''; display:block; height:44px; flex-shrink:0; } /* sits beside the top bar */
  .bottom-tab{ flex:1 1 0 !important; max-height:62px; min-height:44px !important; font-size:0 !important; padding:0 !important; gap:0 !important;
    display:flex !important; align-items:center; justify-content:center; border-radius:12px !important;
    background:linear-gradient(180deg, var(--c-raised), var(--c-panel)) !important; border:2px solid #0a1020 !important;
    box-shadow:inset 0 0 0 1px var(--c-edge), 0 3px 0 #050914 !important; color:var(--c-text) !important; }
  .bottom-tab .bt-ico{ width:30px; height:30px; font-size:26px; object-fit:contain; }
  .bottom-tab .bt-ico-svg{ display:flex; align-items:center; justify-content:center; }
  .bottom-tab .bt-ico-svg .ico{ width:26px; height:26px; }
  .bottom-tab.active{ background:linear-gradient(180deg, #fff27a, #ffd400 55%, #e0a800) !important; box-shadow:inset 0 2px 0 rgba(255,255,255,.6), 0 3px 0 #8a6200 !important; }
  #content-area{ padding-left:74px; }
  #content-area .lobby-panel{ padding:8px 10px 8px 0 !important; }
  #sfx-toggle{ bottom:10px !important; right:10px !important; }

  /* ---- Home ---- */
  #panel-home .home-grid{
    display:grid !important; height:100%; min-height:0; gap:10px !important; align-items:stretch !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) 34% !important;
    grid-template-rows:auto minmax(0,1fr) 54px !important;
    grid-template-areas:"hero hero daily" "hero hero missions" "private howto missions" !important;
  }
  #panel-home .hg-left-col, #panel-home .hg-mid-col, #panel-home .hg-right-col{ display:contents !important; }
  #panel-home .home-profile, #panel-home .home-rooms, #panel-home .home-online, #panel-home .home-season,
  #panel-home .home-howto, #panel-home .home-top{ display:none !important; }
  #panel-home .world-play-card{ grid-area:hero; order:0 !important; min-height:0 !important; border-radius:10px !important;
    background-image:url('../assets/ui/hero-world-play.webp') !important; background-size:cover !important; background-position:center 28% !important; }
  #panel-home .world-play-card::after{ display:block !important; }
  #panel-home .world-play-card .wpc-inner{ padding:0 24% !important; justify-content:center; }
  #panel-home .world-play-card .wpc-label, #panel-home .world-play-card .wpc-sub, #panel-home .world-play-card .wpc-stats{ display:none !important; }
  #panel-home .world-play-card .wpc-title{ font-size:1.7rem !important; color:var(--c-text) !important; line-height:.95 !important;
    text-shadow:0 3px 0 #000, 2px 2px 0 #000, -1px -1px 0 #000 !important; margin-top:auto; }
  #panel-home .world-play-card .wpc-btn{ margin:14px 0 auto !important; width:auto !important; min-height:46px; padding:8px 26px !important; font-size:1.15rem !important; color:#06140c !important; }
  #panel-home .world-play-card .wpc-btn .ico{ display:none; }
  #panel-home .home-daily{ grid-area:daily; display:grid !important; padding:8px 10px !important; gap:2px 10px; align-items:center;
    grid-template-columns:62px 1fr; grid-template-areas:"head head" "chest amt" "chest btn"; }
  #panel-home .home-daily .prog-card-head{ grid-area:head; }
  #panel-home .daily-chest{ grid-area:chest; width:62px; height:auto; }
  #panel-home .daily-caption, #panel-home .home-daily .daily-streak{ display:none !important; }
  #panel-home .home-daily .daily-reward-amt{ grid-area:amt; margin:0 !important; }
  #panel-home .home-daily .daily-reward-amt b{ font-size:1.5rem !important; }
  #panel-home .home-daily .claim-btn{ grid-area:btn; min-height:40px; margin:0 !important; padding:6px !important; font-size:1rem !important; }
  #panel-home .prog-card-head{ display:flex; align-items:center; gap:6px; }
  #panel-home .prog-card-title{ font-family:'Rajdhani',sans-serif !important; font-weight:700 !important; font-size:.85rem !important; color:var(--c-text) !important; text-shadow:none !important; }
  #panel-home .gico-head{ width:22px; height:22px; }
  #panel-home .card-timer{ margin-left:auto; display:inline-flex; align-items:center; gap:4px; font-size:.7rem; font-weight:700; color:var(--c-text2); }
  #panel-home .home-missions{ grid-area:missions; min-height:0; overflow:hidden; padding:8px 10px !important; display:flex; flex-direction:column; gap:8px; }
  #panel-home .mission-item:not(:first-child){ display:none; }
  #panel-home .mission-item{ background:rgba(8,13,26,.55); border:1px solid var(--c-edge); border-radius:8px; padding:8px 10px; }
  #panel-home .mission-top{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  #panel-home .mission-name{ flex:1; font-size:.9rem !important; font-weight:700; color:var(--c-text); }
  #panel-home .mission-count{ font-size:.85rem; font-weight:700; color:var(--c-text2); }
  #panel-home .mission-bar{ height:8px !important; margin-top:6px; }
  #panel-home .mission-bar-fill{ background:linear-gradient(90deg, #ffd400, #ffe600) !important; }
  #panel-home .home-private, #panel-home .home-howto-card{ display:flex !important; align-items:center; gap:10px; padding:6px 12px !important; min-height:0; cursor:pointer; }
  #panel-home .home-private{ grid-area:private; background:linear-gradient(135deg, #2a2466, #1a1d48) !important; }
  #panel-home .home-howto-card{ grid-area:howto; background:linear-gradient(135deg, #10306a, #13244a) !important; }
  #panel-home .home-private .ac-art, #panel-home .home-howto-card .ac-art, #panel-home .ac-sub, #panel-home .ac-cta{ display:none !important; }
  #panel-home .ac-icon{ width:30px; height:30px; background:none !important; border:none !important; font-size:28px; display:flex; color:var(--c-text); }
  #panel-home .ac-icon .gico{ width:30px; height:30px; }
  #panel-home .ac-title{ font-family:'Rajdhani',sans-serif !important; font-weight:700 !important; font-size:1rem !important; color:var(--c-text) !important; }
  #panel-home .ac-body{ flex:1; min-width:0; }
  #panel-home .ac-arrow{ display:block; font-size:1.4rem; color:var(--c-text); }
}

/* ============================================================
   CODEX UI KIT v3 (assets/ui/*-v3.webp) — 9-slice art
   buttons: source slice 32 (v) / 48 (h), rendered 10px / 16px
   panels: 512x512, source slice 64
   ============================================================ */
.kit-btn-green, #panel-home .wpc-btn, #rotate-gate .rg-btn{
  border-style:solid !important; border-width:10px 16px !important; border-image:url('../assets/ui/btn-green-v3.webp') 32 48 fill / 10px 16px !important;
  background:none !important; box-shadow:0 6px 14px rgba(0,0,0,.45) !important; border-radius:0 !important; color:#06140c !important; text-shadow:0 1px 0 rgba(255,255,255,.35) !important;
}
.kit-btn-green:active, #panel-home .wpc-btn:active, #rotate-gate .rg-btn:active{ border-image-source:url('../assets/ui/btn-green-pressed-v3.webp') !important; transform:translateY(2px) !important; }
.kit-btn-yellow, #panel-home .claim-btn:not(.claimed):not(:disabled){
  border-style:solid !important; border-width:10px 16px !important; border-image:url('../assets/ui/btn-yellow-v3.webp') 32 48 fill / 10px 16px !important;
  background:none !important; box-shadow:0 5px 12px rgba(0,0,0,.4) !important; border-radius:0 !important; color:#1a1300 !important; text-shadow:none !important;
}
.kit-btn-yellow:active, #panel-home .claim-btn:not(.claimed):not(:disabled):active{ border-image-source:url('../assets/ui/btn-yellow-pressed-v3.webp') !important; transform:translateY(2px) !important; }
.kit-btn-dark, #panel-home .ac-cta, #panel-home .lb-view-btn{
  border-style:solid !important; border-width:10px 16px !important; border-image:url('../assets/ui/btn-dark-v3.webp') 32 48 fill / 10px 16px !important;
  background:none !important; box-shadow:none !important; border-radius:0 !important; color:var(--c-text) !important;
}
.kit-btn-dark:active, #panel-home .lb-view-btn:active{ border-image-source:url('../assets/ui/btn-dark-pressed-v3.webp') !important; }
#panel-home .ac-cta{ padding:4px 12px !important; }

.kit-panel, #panel-home .home-missions, #panel-home .home-top > .u-1bb63c{
  border-style:solid !important; border-width:18px !important; border-image:url('../assets/ui/panel-frame-v3.webp') 64 fill / 18px !important;
  background:none !important; box-shadow:0 10px 22px rgba(0,0,0,.45) !important; border-radius:0 !important;
}
.kit-panel-gold, #panel-home .home-daily{
  border-style:solid !important; border-width:18px !important; border-image:url('../assets/ui/panel-frame-gold-v3.webp') 64 fill / 18px !important;
  background:none !important; box-shadow:0 10px 22px rgba(0,0,0,.45) !important; border-radius:0 !important;
}
/* coloured shortcut cards keep their gradient; the frame draws only the rim */
#panel-home .home-private, #panel-home .home-howto-card{
  border-style:solid !important; border-width:16px !important; border-image:url('../assets/ui/panel-frame-v3.webp') 64 / 16px !important;
  box-shadow:0 10px 22px rgba(0,0,0,.45) !important; border-radius:0 !important; background-clip:padding-box !important;
}
@media (min-width:1100px) and (min-height:600px){
  /* frames add 18px rims, so inner padding shrinks to keep the guide's 16-24px inset */
  #panel-home .home-daily, #panel-home .home-missions{ padding:4px 6px !important; }
  #panel-home .home-top > .u-1bb63c{ padding:2px 6px !important; }
  #panel-home .home-private, #panel-home .home-howto-card{ padding:8px 10px !important; }
  #panel-home .home-private .ac-icon, #panel-home .home-howto-card .ac-icon{ left:10px; top:8px; }
  #app-sidebar .nav-item{
    border-style:solid !important; border-width:10px 16px !important; border-image:url('../assets/ui/btn-dark-v3.webp') 32 48 fill / 10px 16px !important;
    background:none !important; box-shadow:none !important; border-radius:0 !important; padding:0 4px !important; min-height:62px;
  }
  #app-sidebar .nav-item.active{ border-image-source:url('../assets/ui/btn-yellow-v3.webp') !important; background:none !important; box-shadow:none !important; }
}
@media (max-height:520px) and (orientation:landscape){
  #panel-home .home-daily, #panel-home .home-missions{ border-width:12px !important; border-image-width:12px !important; padding:0 4px !important; }
  #panel-home .home-private, #panel-home .home-howto-card{ border-width:10px !important; border-image-width:10px !important; padding:0 8px !important; }
  #panel-home .world-play-card .wpc-btn{ border-width:8px 14px !important; border-image-width:8px 14px !important; }
  .bottom-tab{ border-style:solid !important; border-width:8px 12px !important; border-image:url('../assets/ui/btn-dark-v3.webp') 32 48 fill / 8px 12px !important;
    background:none !important; box-shadow:none !important; border-radius:0 !important; }
  .bottom-tab.active{ border-image-source:url('../assets/ui/btn-yellow-v3.webp') !important; }
}

/* ---------- fixes after first screenshots ---------- */
/* phone landscape: lift the content above the lobby backdrop scrim (skin.css ::after) — it was dimming everything */
@media (max-height:520px) and (orientation:landscape){
  #content-area{ position:relative; z-index:1; }
}
/* desktop polish */
@media (min-width:1100px) and (min-height:600px){
  #panel-home .mission-name{ text-align:left !important; }
  #panel-home .lb-preview-row{ padding:5px 10px !important; min-height:0; }
  #panel-home .lb-preview-list{ gap:6px !important; }
  #panel-home .home-top > .u-1bb63c::before{ font-size:1.05rem; }
  #panel-home .lb-view-btn{ min-height:0; font-size:.85rem !important; }
  #panel-home .home-private .ac-sub, #panel-home .home-howto-card .ac-sub{ max-width:88%; }
}

/* Codex home card art (hero-private-v3 / hero-howto-v3, 1200x400): full 3:1 image anchored bottom-right on a
   matching navy backing, text in the quiet left 40%. Phones keep the compact icon shortcut. */
@media (min-width:1100px) and (min-height:600px){
  #panel-home .home-private{ background:#0c1631 url('../assets/ui/hero-private-v3.webp') right bottom / 100% auto no-repeat !important; }
  #panel-home .home-howto-card{ background:#0c1631 url('../assets/ui/hero-howto-v3.webp') right bottom / 100% auto no-repeat !important; }
  #panel-home .home-private .ac-art, #panel-home .home-howto-card .ac-art{ display:none !important; }
  #panel-home .home-private .ac-body, #panel-home .home-howto-card .ac-body{ max-width:44%; }
  #panel-home .home-private .ac-sub, #panel-home .home-howto-card .ac-sub{ max-width:100%; text-shadow:0 1px 3px #000; }
  #panel-home .daily-chest{ width:clamp(96px, 7vw, 128px) !important; justify-self:center; }
}
@media (min-width:1100px) and (min-height:600px){
  #panel-home .home-private .ac-body, #panel-home .home-howto-card .ac-body{ max-width:none; }
  #panel-home .ac-title{ white-space:nowrap; }
  #panel-home .home-private .ac-sub, #panel-home .home-howto-card .ac-sub{ max-width:40cqi; width:42%; }
  #panel-home .home-private, #panel-home .home-howto-card{ container-type:inline-size; }
}
@media (max-height:520px) and (orientation:landscape){
  #panel-home .mission-name{ text-align:left !important; }
  #panel-home .mission-item:nth-child(2){ display:block; }
  #panel-home .mission-list{ display:flex; flex-direction:column; gap:6px !important; }
}

/* ============================================================
   TYPE from Codex's mockup: Oswald (condensed labels/numbers) + Bangers (italic brush display)
   ============================================================ */
:root{ --f-ui:'Oswald', 'Rajdhani', sans-serif; --f-display:'Bangers', 'Luckiest Guy', sans-serif; }
.tb-name{ font-family:var(--f-display) !important; font-style:italic; letter-spacing:2px; font-size:2.3rem;
  background:linear-gradient(180deg, #fff27a 0%, #ffd400 45%, #ff9800 100%); -webkit-background-clip:text; background-clip:text; color:transparent;
  -webkit-text-stroke:1.5px #3a1500; filter:drop-shadow(3px 3px 0 #000); text-shadow:none !important; }
.tb-tag, .tb-id b, .tb-id small, #reward-points-chip,
#app-sidebar .nav-item .nav-label, .bottom-tab,
#panel-home .prog-card-title, #panel-home .card-timer, #panel-home .daily-caption,
#panel-home .mission-name, #panel-home .mission-count, #panel-home .mission-reward,
#panel-home .ac-title, #panel-home .ac-sub, #panel-home .ac-cta,
#panel-home .home-top > .u-1bb63c::before, #panel-home .lb-preview-name, #panel-home .lb-preview-pts, #panel-home .lb-view-btn,
#panel-home .world-play-card .wpc-label, #panel-home .wpc-stat-lbl, #panel-home .wpc-stat-val,
#panel-home .claim-btn{
  font-family:var(--f-ui) !important; font-weight:600 !important; font-style:normal;
}
#reward-points-chip{ font-size:1.35rem !important; }
.tb-id b{ font-size:1.2rem; letter-spacing:.5px; }
#app-sidebar .nav-item .nav-label{ font-size:1.2rem !important; letter-spacing:1px; }
#panel-home .prog-card-title{ font-size:1.35rem !important; letter-spacing:1px !important; }
#panel-home .ac-title{ font-size:1.8rem !important; letter-spacing:1px; }
#panel-home .claim-btn{ font-size:1.5rem !important; letter-spacing:1px; }
#panel-home .daily-reward-amt b{ font-family:var(--f-ui) !important; font-weight:700 !important; }
#panel-home .mission-name{ font-weight:500 !important; font-size:1.1rem !important; }
#panel-home .lb-preview-name, #panel-home .lb-preview-pts{ font-weight:500 !important; font-size:1.15rem !important; }
/* hero title + CTA: italic brush like the mockup, three-colour title with a heavy outline for legibility */
#panel-home .world-play-card .wpc-title{ font-family:var(--f-display) !important; font-style:italic; letter-spacing:2px !important;
  font-size:clamp(3rem, 7cqi, 6rem) !important; line-height:.9 !important; text-transform:uppercase; }
#panel-home .wpc-title span{ -webkit-text-stroke:2px #000; paint-order:stroke fill; }
#panel-home .wpc-title .t-a{ color:#F4F7FF; }
#panel-home .wpc-title .t-rival{ color:#3fd3ff; }
#panel-home .wpc-title .t-now{ color:#ff3b3b; }
#panel-home .world-play-card .wpc-btn{ font-family:var(--f-display) !important; font-style:italic; letter-spacing:2px !important;
  font-size:clamp(1.8rem, 3.4cqi, 2.8rem) !important; text-transform:uppercase; }
@media (max-height:520px) and (orientation:landscape){
  .tb-name{ font-size:1.5rem; }
  #panel-home .world-play-card .wpc-title{ font-size:2.2rem !important; }
  #panel-home .world-play-card .wpc-btn{ font-size:1.5rem !important; }
  #panel-home .prog-card-title{ font-size:1rem !important; }
  #panel-home .ac-title{ font-size:1.1rem !important; }
  #panel-home .claim-btn{ font-size:1.15rem !important; }
  #panel-home .mission-name{ font-size:.95rem !important; }
}

/* Codex lobby backing (lobby-bg-v3) replaces the blurred arena behind the lobby */
#screen-lobby::before{ background:#080D1A url('../assets/ui/lobby-bg-v3.webp') center / cover no-repeat !important; filter:none !important; inset:0 !important; }
#screen-lobby::after{ background:linear-gradient(180deg, rgba(4,6,16,.10), rgba(4,6,16,.35)) !important; }
/* WORLD PLAY plate = Codex header ribbon (slice 24/96, render 8/24) */
#panel-home .world-play-card .wpc-label{
  border-style:solid !important; border-width:8px 24px !important; border-image:url('../assets/ui/header-ribbon-v3.webp') 24 96 fill / 8px 24px !important;
  background:none !important; box-shadow:none !important; border-radius:0 !important; padding:6px 30px !important;
}
#reward-points-chip .gico{ transform:rotate(0); }
@media (min-width:1100px) and (min-height:600px){
  #panel-home .mission-item{ padding:7px 12px !important; }
  #panel-home .mission-bar{ margin-top:6px !important; }
  #panel-home .home-missions{ gap:8px !important; }
}

/* Codex lobby-bg-v4: brighter blue steel stadium (owner: "hindi black lang"); light scrim only */
#screen-lobby::before{ background:#080D1A url('../assets/ui/lobby-bg-v4.webp') center / cover no-repeat !important; }
#screen-lobby::after{ background:linear-gradient(180deg, rgba(4,6,16,.02), rgba(4,6,16,.18)) !important; }
@media (max-height:520px) and (orientation:landscape){
  #screen-lobby::before{ background-image:url('../assets/ui/lobby-bg-v4-mobile.webp') !important; }
}

/* ---- Real browser windows (owner 2026-09-23): tabs + address bar eat ~170px of a 1080 screen,
   so Home is usually ~1900x910 or smaller. Compact the Daily Reward there so Daily Missions keeps
   room for its rows instead of being squeezed to a header strip. Keep this when restyling Home. ---- */
@media (min-width:768px) and (min-height:521px) and (max-height:1000px){
  #panel-home .home-daily{ padding:12px 18px !important; row-gap:2px; grid-template-columns:clamp(64px, 5vw, 96px) 1fr;
    grid-template-areas:"head head" "chest amt" "chest btn" "streak streak"; }
  #panel-home .home-daily .prog-card-head{ margin-bottom:2px; }
  #panel-home .daily-caption{ display:none; }
  #panel-home .home-daily .daily-reward-amt b{ font-size:2rem !important; }
  #panel-home .home-daily .claim-btn{ min-height:44px; margin:2px 0 0 !important; font-size:1.05rem !important; }
  #panel-home .home-daily .daily-streak{ margin:4px 0 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  #panel-home .home-missions{ padding:12px 18px !important; gap:8px; }
  #panel-home .mission-item{ padding:8px 12px; }
  #panel-home .mission-bar{ margin-top:6px; }
}
@media (min-width:768px) and (min-height:521px) and (max-height:760px){
  #panel-home .home-daily .daily-streak{ display:none; }
  #panel-home .daily-chest{ max-height:72px; object-fit:contain; }
}
/* narrow right column (1100-1500px wide): card titles stay on one line */
@media (min-width:1100px) and (min-height:600px) and (max-width:1500px){
  #panel-home .prog-card-title{ white-space:nowrap; font-size:1rem !important; overflow:hidden; text-overflow:ellipsis; min-width:0; }
  #panel-home .card-timer{ font-size:.8rem; white-space:nowrap; }
  #panel-home .gico-head{ width:24px; height:24px; }
}
/* very short windows (<=720px tall): Home scrolls instead of squeezing cards */
@media (min-width:768px) and (min-height:521px) and (max-height:720px){
  #panel-home{ overflow-y:auto !important; }
  #panel-home .home-grid{ height:auto !important; min-height:100%; grid-template-rows:auto minmax(170px,auto) 220px !important; }
}
/* phone: the More/burger drawer (owner 2026-09-23): hide the icon rail while it is open, and let the
   drawer list scroll so every destination (Profile, Settings…) is reachable instead of cut off */
@media (max-height:520px) and (orientation:landscape){
  body:has(#app-sidebar.sidebar-open) .bottom-tabs{ display:none !important; }
  #app-sidebar.sidebar-open{ display:flex !important; flex-direction:column !important; z-index:90 !important; max-height:100%; }
  #app-sidebar.sidebar-open .sidebar-nav{ flex:1 1 auto !important; min-height:0 !important; overflow-y:auto !important; overscroll-behavior:contain; }
  #app-sidebar.sidebar-open .sidebar-bottom{ flex-shrink:0 !important; }
}
/* phone drawer rows (owner 2026-09-23: "di pantay-pantay"): same height, icon + label left-aligned,
   no divider gaps, Bark Coin row identical to the others (SOON badge pushed to the right) */
@media (max-height:520px) and (orientation:landscape){
  #app-sidebar.sidebar-open .nav-section-divider{ display:none !important; }
  #app-sidebar.sidebar-open .sidebar-nav{ display:flex !important; flex-direction:column !important; gap:6px !important; padding:10px 12px !important; }
  #app-sidebar.sidebar-open .nav-item{ display:flex !important; align-items:center !important; justify-content:flex-start !important; gap:12px !important;
    flex:0 0 auto !important; min-height:48px !important; height:48px !important; margin:0 !important; padding:4px 12px !important; border-radius:10px !important;
    text-align:left !important; background:linear-gradient(180deg, var(--c-raised), var(--c-panel)) !important; border:2px solid #0a1020 !important;
    box-shadow:inset 0 0 0 1px var(--c-edge) !important; color:var(--c-text) !important; }
  #app-sidebar.sidebar-open .nav-item .nav-icon{ width:34px !important; height:34px !important; min-width:34px !important; flex:0 0 34px !important; margin:0 !important;
    background:none !important; box-shadow:none !important; border:none !important; display:flex !important; align-items:center; justify-content:center; }
  #app-sidebar.sidebar-open .nav-item .nav-icon.bark-coin-icon{ transform:scale(.8); filter:none !important; }
  #app-sidebar.sidebar-open .nav-item .nav-label{ flex:1 1 auto !important; min-width:0; margin:0 !important; text-align:left !important;
    font-family:'Oswald',sans-serif !important; font-weight:700 !important; font-size:1.02rem !important; letter-spacing:1px !important; text-transform:uppercase; color:inherit !important; }
  #app-sidebar.sidebar-open .nav-item > *:not(.nav-icon):not(.nav-label){ margin-left:auto !important; flex-shrink:0; }
  #app-sidebar.sidebar-open .nav-item.active{ background:linear-gradient(180deg, #fff27a 0%, #ffd400 55%, #e0a800 100%) !important; color:#1a1300 !important;
    box-shadow:inset 0 2px 0 rgba(255,255,255,.6), 0 3px 0 #8a6200 !important; }
}
/* phone drawer: compact header + footer so ~6 rows show before scrolling; user card and Logout share one row */
@media (max-height:520px) and (orientation:landscape){
  #app-sidebar.sidebar-open .sidebar-logo{ padding:8px 14px !important; min-height:0 !important; }
  #app-sidebar.sidebar-open .sidebar-logo img{ width:34px !important; height:34px !important; }
  #app-sidebar.sidebar-open .sidebar-logo-text{ font-size:1.1rem !important; }
  #app-sidebar.sidebar-open .sidebar-logo-sub{ display:none !important; }
  #app-sidebar.sidebar-open .sidebar-bottom{ display:flex !important; flex-direction:row !important; align-items:center; gap:8px !important; padding:8px 12px !important; }
  #app-sidebar.sidebar-open .sidebar-profile-mini{ flex:1 1 auto; min-width:0; padding:4px 8px !important; margin:0 !important; min-height:44px; gap:8px !important; }
  #app-sidebar.sidebar-open .sidebar-avatar{ width:34px !important; height:34px !important; flex-shrink:0; }
  #app-sidebar.sidebar-open .sidebar-user-info{ min-width:0; align-items:flex-start !important; text-align:left !important; }
  #app-sidebar.sidebar-open .sidebar-username{ font-size:.85rem !important; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  #app-sidebar.sidebar-open .sidebar-logout-btn{ flex:0 0 auto; width:auto !important; min-height:44px; margin:0 !important; padding:0 12px !important; font-size:.85rem !important; }
}
/* desktop lobby: sound toggle sits in the top bar (#tb-sfx proxy from home-ui.js); hide the floating one outside battle */
.tb-sfx{ display:none !important; }
@media (min-width:1100px) and (min-height:600px){
  .content-topbar .tb-sfx{ display:flex !important; }
  body:not(.in-battle) #sfx-toggle{ display:none !important; }
}
/* short desktop windows: slightly shorter lower row so Daily Missions gets more height */
@media (min-width:768px) and (min-height:521px) and (max-height:1000px){
  #panel-home .home-grid{ grid-template-rows:auto minmax(150px,1fr) clamp(208px, 32vh, 304px) !important; /* Top Barkers needs room for 3 whole rows */ }
}

/* ---------- owner fixes 2026-09-23 evening: Top Barkers never cut, phone chat drawer, fullscreen button ---------- */
/* Top Barkers: rows keep their natural height (they were flex-shrinking to 12px and getting clipped);
   home-ui.js hides any row that does not fit whole (.lb-row-nofit) instead of cutting it */
@media (min-width:768px) and (min-height:521px){
  #panel-home .lb-preview-row{ flex:0 0 auto !important; min-height:0; padding:4px 10px !important; }
  #panel-home .lb-preview-row.lb-row-nofit{ display:none !important; }
  #panel-home .lb-preview-list{ gap:6px !important; }
  #panel-home .lb-preview-row .rank-badge{ width:28px; height:28px; }
  #panel-home .lb-preview-avatar{ width:30px !important; height:30px !important; }
  #panel-home .lb-view-btn{ min-height:0; padding:4px 10px !important; font-size:.85rem !important; border-width:7px 12px !important; border-image-width:7px 12px !important; }
}
@media (min-width:768px) and (min-height:521px) and (max-height:800px){
  #panel-home .lb-preview-row{ padding:3px 8px !important; }
  #panel-home .lb-preview-list{ gap:5px !important; }
  #panel-home .lb-view-btn{ padding:2px 10px !important; font-size:.8rem !important; border-width:6px 12px !important; border-image-width:6px 12px !important; }
  #panel-home .lb-preview-name, #panel-home .lb-preview-pts{ font-size:.95rem !important; }
  #panel-home .lb-preview-row .rank-badge{ width:24px; height:24px; }
  #panel-home .lb-preview-avatar{ width:26px !important; height:26px !important; }
  #panel-home .home-top > .u-1bb63c{ padding:4px 12px !important; gap:4px; }
  #panel-home .home-top > .u-1bb63c::before{ font-size:.9rem; }
  #panel-home .lb-preview-list{ gap:4px !important; }
}
/* phone landscape: the chat is a right-side drawer. responsive.css only handled ≤767px wide, so at 844x390
   the panel sat below the viewport and the chat button looked dead. */
@media (max-height:520px) and (orientation:landscape){
  #chat-side-panel{ display:flex !important; position:fixed !important; top:0; right:0; bottom:0; left:auto; height:100dvh !important;
    width:360px !important; max-width:88vw; min-width:0 !important; z-index:120; transform:translateX(0); opacity:1;
    transition:transform .25s cubic-bezier(.4,0,.2,1), opacity .2s; box-shadow:-10px 0 32px rgba(0,0,0,.6);
    padding-right:env(safe-area-inset-right); border-left:2px solid #2b3560; }
  #chat-side-panel.chat-collapsed{ transform:translateX(110%); opacity:0; pointer-events:none; width:360px !important; }
  #chat-side-panel:not(.chat-collapsed){ pointer-events:auto; }
  #chat-backdrop{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:115; opacity:0; transition:opacity .2s; }
  #chat-backdrop.open{ display:block; opacity:1; }
  .chat-txt{ font-size:16px; }
  .chat-collapse-btn{ min-width:44px; min-height:44px; }
}
/* desktop: fullscreen toggle in the top bar (#tb-fs from home-ui.js), next to the sound button */
.tb-fs{ display:none !important; }
@media (min-width:1100px) and (min-height:600px){
  .content-topbar .tb-fs{ display:flex !important; }
  .content-topbar .tb-fs svg{ width:22px; height:22px; }
}

/* phone landscape lobby (Codex FIX 2026-09-23): the floating sound button covered the Daily Missions card;
   it now lives in the top bar as the same #tb-sfx proxy used on desktop, floating one hidden outside battle */
@media (max-height:520px) and (orientation:landscape){
  .content-topbar .tb-sfx{ display:flex !important; width:44px; height:44px; }
  body:not(.in-battle) #sfx-toggle{ display:none !important; }
}