/* =========================================================================
   THE DRESSING TABLE — the Profile tab as one piece of furniture (owner
   2026-08-28, from the reference photo). Side-by-side: a tall arched mirror
   (your framed photo, reflected) on the LEFT, the glass cabinet of what you
   show off on the RIGHT, a carved chest below whose drawers are Chopadi /
   Remove-ads / Settings.

   The furniture ART is painted per region by 62-dresser.js at each region's
   real px size (so no %-over-SVG coordinate drift); THIS file lays the grid
   and dresses the interactive elements over those backgrounds. The pane left
   the rf-top/rf-scroll model (60-roomfit.js) and scrolls on its own now.
   Scoped to #paneSettings / #pfDresser so it reaches nothing else.
   ========================================================================= */
/* the pane left the fixed-head model, so drop the head-band reservation and just
   clear the bottom nav; the dresser fills the rest.
   PAD-TOP WAS DOUBLE-COUNTING THE TOP BAR (owner 2026-08-29: "fix the whole
   profile tab ... no vertical scrollability"). The shared frame already parks
   every pane's box directly below the 58px top bar — games pads 6px, shop 0 —
   so this pane's extra var(--nh-toph,58px) top-pad pushed the dresser down a
   second 58px, dropping its base (the drawer knobs) behind the nav. Match the
   games pane at 6px: the ~52px reclaimed lifts the whole dresser clear and lets
   the mirror/shelves breathe, with no page scroll. */
#homeOv #paneSettings{overflow-y:auto; padding:6px 0 calc(var(--nh-navh,76px) + 8px) !important}

/* MERGE (owner 2026-08-28): the drawers are the live Chopadi / Remove-ads /
   Settings, in the profile view, so the profile view shows BOTH the dresser and
   the (now drawer-fronted) settings. The gear view still narrows to the drawers'
   expanded content. */
#homeOv #paneSettings.view-settings .pfd{display:none}

/* FIT THE SCREEN, DON'T SCROLL (owner 2026-08-29: "the profile tab is scrollable
   — fix that. Make it fit into my screen.") The dresser used to be a FIXED height:
   the mirror row was pinned at min 440px and the rows summed to ~638px, so the
   pane's content was a fixed ~780px tall REGARDLESS of the phone — anything
   shorter than a 780px-tall viewport (i.e. almost every phone once the browser
   chrome is counted) overflowed and scrolled. Now the whole dresser is bounded to
   exactly the space between the fixed top bar and the bottom nav (100dvh — those
   two — a hair), and the middle row shrinks to whatever is left instead of forcing
   440px. dvh (not vh) so the iOS URL bar collapsing doesn't leave it a strip too
   tall. Everything inside was already flexible (the avatar is 126px, the shelf
   swatches 30–44px), so compressing the middle row just tightens the air. */
#pfDresser{
  display:grid;
  grid-template-columns:1.32fr 1fr;
  grid-template-areas:"top top" "mirror shelves" "base base";
  grid-template-rows:auto minmax(0,1fr) auto;
  gap:6px; padding:6px 8px 10px; align-items:stretch;
  /* -24 not -12 (owner 2026-08-29): measured at 390/360 the carved-chest drawer
     labels crossed 2-6px UNDER the fixed nav — the dresser was bounded a hair
     too tall for the real bar heights (the toph/navh vars drift a few px from
     the 58/76 fallbacks). Taking a little more off the height lifts the whole
     grid (the base row is bottom-anchored) so the labels clear the nav with
     margin. Proven by .claude/mp/ prof-measure: lblUnderNav=false both widths. */
  height:calc(100dvh - var(--nh-toph,58px) - var(--nh-navh,76px) - 24px);
  min-height:0; box-sizing:border-box;
}
.pfd-top{grid-area:top; height:40px; position:relative}
.pfd-mirror{grid-area:mirror; position:relative; display:flex; flex-direction:column;
  align-items:center; justify-content:center; padding:10px 12px; min-height:0}
/* overflow-y:auto, not hidden (owner 2026-08-29): on a short Safari viewport the
   three shelves used to compress until the deck tiles rode UP under the "CARD
   DECKS" label. The cabinet now scrolls when the phone is too short to hold all
   three at full size, so a tile never lands on a header. */
.pfd-shelves{grid-area:shelves; position:relative; padding:8px 9px 12px; overflow-y:auto; overflow-x:hidden; min-height:0; scrollbar-width:none}
.pfd-shelves::-webkit-scrollbar{display:none}
.pfd-base{grid-area:base; position:relative; min-height:104px}

/* ---- the mirror card = your framed reflection ---- */
.pfd-card{all:unset; cursor:pointer; display:flex; flex-direction:column; align-items:center;
  gap:10px; text-align:center; position:relative; z-index:2}
/* high specificity so it beats .hh-av's own size/background/shadow */
#homeOv #pfDresser .pfd-av{width:104px !important; height:126px !important; flex:0 0 auto;
  border-radius:13px !important; overflow:hidden; display:grid; place-items:center;
  font-family:'Fraunces','Baloo 2',Georgia,serif; font-weight:800 !important; font-size:44px !important; color:#fff2ea !important;
  background:radial-gradient(circle at 50% 34%,#c98f52,#7c4f28 72%) !important; border:0 !important;
  box-shadow:0 0 0 3px #caa040, 0 0 0 5px #f6ecd8, 0 6px 15px rgba(0,0,0,.42) !important}
#homeOv #pfDresser .pfd-av img{width:100%; height:100%; object-fit:cover; display:block}
.pfd-who{display:flex; flex-direction:column; gap:2px}
.pfd-who .bt{font-family:'Fraunces','Baloo 2',Georgia,serif; font-weight:700; font-size:19px;
  color:#2b3d44; text-shadow:0 1px 0 rgba(255,255,255,.55)}
.pfd-who .bs{font-size:12px; font-weight:600; color:#43575d}

/* ---- the cabinet shelves: reskin the showcase editor (se-* from renderShowEditor) ---- */
.pfd-shelves .pfd-h{display:none}                 /* each shelf labels itself */
/* min-height:100% (not height:100%) so the shelves FILL a tall cabinet via
   flex-grow, but on a short one the min-heights below push the content past the
   pane and .pfd-shelves scrolls instead of squeezing. */
#pfDresser #showEditor{display:flex; flex-direction:column; gap:8px; min-height:100%; margin:0}
/* each shelf floors at 92px (header + a full tile + the ledge) and never
   compresses below that — the row can't ride up into the header. */
#pfDresser .se-sec{position:relative; flex:1 1 auto; min-height:92px; padding:6px 6px 10px;
  display:flex; flex-direction:column; border-bottom:none}
#pfDresser .se-sec::after{content:""; position:absolute; left:2px; right:2px; bottom:2px; height:6px; border-radius:2px;
  background:linear-gradient(180deg,#a06a34,#5c3819); box-shadow:0 1px 0 rgba(230,192,122,.5) inset}
/* the label is IN FLOW and CENTRED (owner 2026-08-29: "move these to centre,
   text getting overlapped"). In flow it always keeps its own row above the
   tiles, so a tile can never overlap it, at any viewport height. */
#pfDresser .se-h{position:static; flex:0 0 auto; margin:0 0 5px; padding:0; background:none; text-align:center;
  font-family:'Baloo 2',sans-serif; font-weight:700; font-size:9.5px; letter-spacing:.06em;
  text-transform:uppercase; color:#ffe1a6; text-shadow:0 1px 2px rgba(0,0,0,.65)}
/* nowrap is THE fix (owner 2026-08-29): the base .se-row wraps, so once you own
   more skins than fit one shelf-width they wrapped DOWN and were clipped by the
   fixed shelf height — 9 of 13 decks unreachable. Force one horizontal row that
   SCROLLS instead, so every owned skin is swipeable; the sliced next tile at the
   edge is its own "more this way" cue. Snap so a tile never rests half-cut. */
#pfDresser .se-row{flex:1 1 auto; min-height:0; display:flex; flex-wrap:nowrap; gap:9px; overflow-x:auto; overflow-y:hidden;
  padding:0 2px 7px; align-items:flex-end; scrollbar-width:none;
  scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch}
#pfDresser .se-row::-webkit-scrollbar{display:none}
#pfDresser .se-t{flex:0 0 auto; position:relative; background:none; border:0; padding:0; margin:0;
  cursor:pointer; scroll-snap-align:start}
/* a finger-sized hit area around every tile so picking a show-off skin lands
   true — the old 30-44px tiles were the "hit or miss" the owner felt. */
#pfDresser .se-t::after{content:""; position:absolute; inset:-7px}
#pfDresser .se-t > i{position:absolute; top:-5px; right:-5px; z-index:3; font-style:normal;
  font-size:12px; color:#e6bd5c; text-shadow:0 1px 2px rgba(0,0,0,.6)}
/* bigger tiles than the cramped originals now that the shelf scrolls instead of
   trying to fit everything at once — a finger lands on the right one. */
/* the card back is position:absolute (inherited from the game's base .card), so
   the deck TILE never sized to it — the button collapsed to 46×64 while the card
   stayed 40×56 in its corner, and the .sel frame (inset off the tile) hugged the
   wrong box (owner 2026-09-01: "still too big, not hugging" — confirmed by
   measuring the render, 46×64 tile vs 40×56 card). Pin the tile to the card so
   the frame traces the card. */
#pfDresser .se-deck{width:40px; height:56px}
#pfDresser .se-deck .card.back{width:40px; height:56px; top:0; left:0; border-radius:4px; box-shadow:0 2px 5px rgba(0,0,0,.5)}
#pfDresser .se-mat{width:56px; height:37px; border-radius:5px; box-shadow:0 2px 5px rgba(0,0,0,.5); overflow:hidden}
#pfDresser .se-bng{width:44px; height:44px}
#pfDresser .se-bng svg{width:100%; height:100%}
/* the show-off pick reads unmistakably: a gold ring + glow, not just a faint ★ */
#pfDresser .se-t.sel{filter:drop-shadow(0 0 4px rgba(232,189,92,.85))}
/* the frame HUGS the card back, not the tile box — inset:-4px + radius:8 stood
   off the 40×56 back and read as a big, mis-sized rectangle (owner 2026-08-31).
   -2px with a radius one step above the card's own (4px) traces the corners. */
#pfDresser .se-t.sel::before{content:""; position:absolute; inset:-2px; border:1.5px solid #ffdf8a;
  border-radius:6px; pointer-events:none; box-shadow:0 0 6px rgba(232,189,92,.5)}
/* mats (radius 5) and bangles (round) need their own corner to hug, or a square
   6px frame floats off them the same way the card one did */
#pfDresser .se-t.se-mat.sel::before{border-radius:7px}
#pfDresser .se-t.se-bng.sel::before{border-radius:50%; inset:-3px}
#pfDresser .se-hint{display:none}

/* ---- the chest's drawer fronts = the live Chopadi / Remove-ads / Settings ---- */
.pfd-base{padding:28px 8px 8px}   /* clear the painted marble top strip (22px) */
.pfd-drawers{display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px; height:100%}
.pfd-drawer{all:unset; cursor:pointer; position:relative; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:4px; padding:12px 4px 22px; border-radius:6px;
  background:linear-gradient(180deg,#a9743c,#7c4f24);
  box-shadow:inset 0 1px 0 rgba(255,224,168,.35), inset 0 0 0 1.5px rgba(60,40,16,.5), 0 2px 4px rgba(0,0,0,.35)}
.pfd-drawer .pfd-di{font-size:17px; line-height:1}
.pfd-drawer .pfd-dl{font-family:'Baloo 2',sans-serif; font-weight:700; font-size:11px; color:#fff2da;
  text-align:center; line-height:1.15; text-shadow:0 1px 2px rgba(0,0,0,.5)}
.pfd-drawer::after{content:""; position:absolute; left:50%; bottom:8px; transform:translateX(-50%);
  width:9px; height:9px; border-radius:50%;
  background:radial-gradient(circle at 38% 30%,#ffe9a8,#d7a63a 55%,#7a5111);
  box-shadow:0 1px 2px rgba(0,0,0,.5)}
.pfd-drawer:active{transform:translateY(1px)}

/* the profile view keeps the real settings rows HIDDEN — the drawers are the way
   in; tapping one raises the gear view (applyPaneView), which already has the
   full form. So the split the owner kept is intact: showing-off lives on the
   dresser, the settings form behind the gear, and the drawers bridge them. */