/* Wardrobe: one holder's profile. Their bulb hangs large on a black stage (drag it), the wardrobe sits beside it,
   and a strip below previews how the grid shows everyone's dressed bulbs. Single dark look on purpose, matching Light the Grid. */
:root{
  --common:#b9b4a9;
  --rare:#86bdff;
  --legend:#ffcf4a;
  --danger:#ff8a78;
  --scrim:rgba(0,0,0,.72);
}
.wrap{max-width:1120px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px));padding-top:calc(18px + env(safe-area-inset-top,0px))}
/* the page title and the wallet pill share one row down to 375px (space-between keeps them apart; the 8px gap is a minimum) */
.sub{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 8px;margin-top:22px}
.sub h1{margin:0;font-size:var(--fs-body);font-weight:600;line-height:var(--lh-ui);color:var(--ink)}
.wallet{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-help);line-height:var(--lh-ui);color:var(--soft);border:1px solid var(--line);border-radius:999px;padding:7px 12px;font-variant-numeric:tabular-nums}
.wallet .dot{width:7px;height:7px;border-radius:50%;background:var(--warm)}
.lead{margin:12px 0 0;max-width:var(--measure);font-size:var(--fs-body);line-height:1.55;color:var(--soft)}
.profile{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:20px;margin-top:14px;align-items:start}
.stage-card{position:relative;min-width:0;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--black)}
#stage{display:block;width:100%;height:460px;touch-action:none;cursor:grab}
#stage.grabbing{cursor:grabbing}
.hint{position:absolute;left:16px;bottom:12px;margin:0;font-size:var(--fs-label);font-weight:600;line-height:var(--lh-ui);color:var(--faint)}
.wardrobe{min-width:0;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:18px}
.field{display:grid;gap:8px;font-size:var(--fs-label);font-weight:600;line-height:var(--lh-ui);color:var(--faint)}
.field input{font:400 16px var(--font);color:var(--ink);background:var(--black);border:1px solid var(--line);border-radius:10px;padding:10px 12px;outline:none}
.field input:focus{border-color:var(--warm-line)}
.field input:focus-visible{outline:2px solid var(--warm);outline-offset:2px}
.err{margin:6px 0 0;font-size:var(--fs-help);line-height:var(--lh-ui);color:var(--danger)}
.tabs{display:flex;gap:4px;margin-top:16px;border-bottom:1px solid var(--line)}
.tabs button{font:500 var(--fs-btn)/var(--lh-ui) var(--font);color:var(--faint);background:none;border:0;border-bottom:2px solid transparent;padding:8px 10px;cursor:pointer}
.tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--warm)}
.items{display:grid;grid-template-columns:repeat(auto-fill,minmax(98px,1fr));gap:8px;margin-top:12px}
/* align-content:start keeps each tile's picture, name and status packed at the top when a two-line name
   ("Diamond necklace") makes its row taller */
.item{display:grid;justify-items:center;align-content:start;gap:2px;padding:6px 6px 8px;background:var(--tile);border:1px solid transparent;border-radius:12px;color:var(--ink);font:inherit;cursor:pointer;text-align:center}
.item:hover{border-color:var(--line)}
.item[aria-pressed="true"]{border-color:var(--warm-line)}
.item canvas{width:84px;height:92px;display:block}
.item .nm{font-size:var(--fs-help);font-weight:500;line-height:var(--lh-ui)}
.item .st{font-size:var(--fs-label);line-height:var(--lh-ui);color:var(--faint);font-variant-numeric:tabular-nums}
.item .st.own{color:var(--soft)}
.item .st.wear{color:var(--warm)}
/* rarity colours outrank the plain tile status colour */
.r-common,.item .st.r-common{color:var(--common)}
.r-rare,.item .st.r-rare{color:var(--rare)}
.r-legendary,.item .st.r-legendary{color:var(--legend)}
.foot{display:grid;gap:8px;margin-top:16px}
.btn{font:600 15px/1.3 var(--font);border-radius:10px;padding:11px 16px;cursor:pointer;border:1px solid var(--line);background:transparent;color:var(--ink)}
.btn.primary{background:var(--warm);border-color:var(--warm);color:var(--black)}
.btn:focus-visible,.tabs button:focus-visible,.item:focus-visible{outline:2px solid var(--warm);outline-offset:2px}
.msg{margin:0;font-size:var(--fs-help);line-height:var(--lh-ui);color:var(--soft);min-height:1.4em}
.crowd{margin-top:22px}
.crowd h2{margin:0 0 8px;font-size:var(--fs-btn);font-weight:600;line-height:var(--lh-ui);color:var(--faint)}
#crowd{display:block;width:100%;height:330px;border:1px solid var(--line);border-radius:16px;touch-action:none;cursor:grab;background:var(--black)}
.modal{position:fixed;inset:0;z-index:10;display:grid;place-items:center;padding:16px;background:var(--scrim)}
.sheet{width:min(400px,100%);max-height:calc(100dvh - 32px);overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:22px}
.sheet:focus{outline:none}
.sheet h3{margin:0;font-size:var(--fs-title);font-weight:600;line-height:1.3}
.sheet h3:focus{outline:none}
.sheet p{margin:10px 0 0;color:var(--soft);font-size:15px;line-height:1.55}
.sheet .demo-chip{display:inline-block;margin:12px 0 0;padding:3px 11px;border:1px solid var(--warm-line);border-radius:999px;font-size:var(--fs-label);font-weight:600;line-height:var(--lh-ui);color:var(--warm)}
.rarity{margin-top:14px;font:300 30px/1.2 var(--font-display)}
.rarity small{display:block;margin-top:4px;font:400 var(--fs-help)/var(--lh-ui) var(--font);color:var(--soft)}
.addr{font-family:ui-monospace,Consolas,monospace;font-size:.93em;color:var(--ink);white-space:nowrap}   /* the burn address never splits */
.bar{height:4px;margin-top:16px;border-radius:2px;background:var(--line);overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--warm);transition:width 2.4s linear}
.row{display:flex;gap:8px;justify-content:flex-end;margin-top:20px;flex-wrap:wrap}
@media (max-width:860px){.profile{grid-template-columns:minmax(0,1fr)}#stage{height:400px}}
/* phones: a shorter stage that stays in view while you scroll the outfits, three tiles a row.
   Vertical swipes on the stage still scroll the page; sideways drags swing the bulb. */
@media (max-width:600px){
  .wrap{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
  .stage-card{position:sticky;top:0;z-index:1}
  #stage{height:min(280px,42vh);touch-action:pan-y}
  /* the stuck stage covers the top of the screen, so a control reached with Shift+Tab is scrolled in below it, not under it
     (stage height + its border + a little air; wardrobe.js nudges the page for browsers that ignore this) */
  .wardrobe input,.wardrobe button{scroll-margin-top:calc(min(280px,42vh) + 16px)}
  .items{grid-template-columns:repeat(auto-fill,minmax(88px,1fr))}
}
@media (max-width:520px){#crowd{height:230px}}
@media (prefers-reduced-motion:reduce){.bar i{transition:none}}