/* The wardrobe and shop on the shared Metal Strogg sheet (public/ui/metal.css, loaded first).
   Mockup: docs/superpowers/specs/2026-09-27-sitio-metal-strogg/capturas/armario.webp */
:root{color-scheme:dark}
*{box-sizing:border-box}
[hidden]{display:none!important}
body.m-page{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--m-ink);color:var(--m-text);font:400 16px/1.5 var(--m-f-body)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.sh-main{--sh-gutter:clamp(16px,4vw,56px);flex:1;width:100%;max-width:1440px;margin:0 auto;padding:28px var(--sh-gutter) 36px}
html[data-embedded] .sh-main{padding-top:18px}
.sh-noscript{margin:24px;color:var(--m-text)}

/* Embedded (the home overlay): a slim bar instead of the site chrome. */
.sh-embed-bar{display:none}
html[data-embedded] .sh-embed-bar{display:flex;align-items:center;gap:18px;padding:10px clamp(16px,3vw,32px);background:linear-gradient(180deg,#24211c,#15130f);border-bottom:1px solid #3d372d}
.sh-embed-bar .m-label{margin-right:auto}
.sh-embed-bar .m-link{font-size:13px}

.sh-notice{margin:0 0 14px;font:600 13px/1.4 var(--m-f-ui);letter-spacing:.06em;color:var(--m-mute)}
.sh-return{padding:12px 16px;border:1px solid var(--m-edge2);border-left:3px solid var(--m-amber);background:var(--m-plate);color:var(--m-text)}

/* Stage: the model over q2dm3, lit with its rarity. Only a short label sits on the texture. */
.sh-top{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:26px;align-items:stretch}
.sh-stage{position:relative;margin:0;min-height:430px;display:grid;place-items:end center;padding:0 16px 66px;overflow:hidden;border:1px solid var(--m-edge);cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;
  background:linear-gradient(0deg,rgba(12,11,9,.95),rgba(12,11,9,.35) 60%,rgba(12,11,9,.7)),url(/ui/maps/q2dm3.webp) center/cover,var(--m-ink2)}
/* A halo behind the model, as in the mockup: a wash over the whole floor was lost in the lava (amber on orange). */
@supports (background:color-mix(in srgb,red 50%,transparent)){.sh-stage{background:radial-gradient(ellipse 23% 46% at 50% 48%,color-mix(in srgb,var(--m-rc,var(--m-r-comun)) 42%,transparent),color-mix(in srgb,var(--m-rc,var(--m-r-comun)) 20%,transparent) 55%,transparent),linear-gradient(0deg,rgba(12,11,9,.95),rgba(12,11,9,.35) 60%,rgba(12,11,9,.7)),url(/ui/maps/q2dm3.webp) center/cover,var(--m-ink2)}}
.sh-stage:active{cursor:grabbing}
.sh-stage-rarity{position:absolute;left:18px;top:18px}
.sh-stage-rarity:not(:empty)::before{content:"◆ "}
.sh-model{display:block;width:min(100%,560px);height:auto;max-height:380px;object-fit:contain;pointer-events:none}
.sh-stage-status{position:absolute;left:0;right:0;top:45%;margin:0;padding:0 16px;text-align:center;font:600 13px var(--m-f-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--m-mute)}
.sh-stage-status:empty{display:none}
.sh-turn{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);display:flex;align-items:center;gap:10px;font:600 12px var(--m-f-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--m-mute);white-space:nowrap}
.sh-turn button{appearance:none;cursor:pointer;width:38px;height:38px;display:grid;place-items:center;padding:0;border:1px solid #6b604c;background:#15130f;color:var(--m-cream);font:700 16px/1 var(--m-f-ui)}
.sh-turn button:hover{border-color:var(--m-amber)}
.sh-turn button:focus-visible{outline:2px solid var(--m-amber);outline-offset:2px}

/* Plate: name, rarity, price, balance and one action. No texture behind the text. */
.sh-info{display:flex;flex-direction:column;align-items:flex-start;min-width:0;padding:30px 30px 26px}
.sh-name{margin:10px 0 0;font:900 clamp(48px,6vw,72px)/.9 var(--m-f-title);text-transform:uppercase;overflow-wrap:anywhere}
.sh-tags{margin:12px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.sh-state{font:700 12px var(--m-f-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--m-mute)}
.sh-state:empty{display:none}
.sh-state[data-state=tuya],.sh-state[data-state=equipada]{color:var(--m-ok)}
.sh-desc{margin:14px 0 0;max-width:52ch;font:500 17px/1.45 var(--m-f-body);color:var(--m-text)}
.sh-rule{margin:6px 0 0;font:500 14px/1.45 var(--m-f-body);color:var(--m-mute)}
.sh-price{display:flex;align-items:center;gap:16px;margin-top:20px}
/* A block box: inline, the LCD sat on a text line whose strut pushed «Tokens» above its middle. */
#price-lcd{display:flex}
.sh-balance{align-self:stretch;display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:20px;padding:14px 16px;background:var(--m-field);border:1px solid var(--m-edge)}
.sh-balance-value{display:inline-flex;align-items:center;min-height:26px;margin-right:auto}
.sh-balance-text{font:600 14px var(--m-f-ui);letter-spacing:.08em;color:var(--m-text)}
.sh-action{align-self:stretch;margin-top:20px}
.sh-note{margin-top:12px}
#feedback{margin:10px 0 0;font:600 14px/1.45 var(--m-f-body);color:var(--m-text)}
#feedback:empty{display:none}
#feedback.error,.sh-feedback--error{color:#ffb4a4}
#payment-link{margin-top:12px}
.sh-account{align-self:stretch;margin:16px 0 0;padding-top:12px;border-top:1px dashed #4a4336;font:500 14px/1.45 var(--m-f-body);color:var(--m-mute)}
.sh-account .m-text-button{margin-left:6px}

/* Sections */
.sh-sections{margin-top:32px}
.sh-tabs-bar{display:flex;align-items:flex-end;gap:14px;border-bottom:1px solid var(--m-edge)}
.sh-tabs{flex:1;min-width:0;border-bottom:0;overflow-x:auto;scrollbar-width:none}
.sh-tabs button{flex:none;white-space:nowrap}
.sh-tabs-bar #refresh{flex:none;margin-bottom:6px}
.sh-panel{padding-top:24px}
.sh-bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:14px}
.sh-h2{margin:0;font:900 32px/1 var(--m-f-title);letter-spacing:.03em;text-transform:uppercase;color:var(--m-cream)}
.sh-h3{margin:30px 0 0;font:900 24px/1.05 var(--m-f-title);letter-spacing:.02em;text-transform:uppercase;color:var(--m-cream)}
.sh-chips{display:flex;flex-wrap:wrap;gap:8px}
.sh-chip{appearance:none;cursor:pointer;padding:9px 12px;border:1px solid #4a4336;background:none;font:600 12px var(--m-f-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--m-mute)}
.sh-chip:hover{border-color:var(--m-edge2);color:var(--m-cream)}
.sh-chip[aria-pressed=true]{background:var(--m-amber);border-color:var(--m-amber);color:var(--m-on-hot)}
.sh-chip:focus-visible{outline:2px solid var(--m-amber);outline-offset:2px}
.sh-empty{margin:16px 0 0;color:var(--m-mute)}
.sh-empty:empty{display:none}
.sh-intro{margin:12px 0 0;max-width:72ch;color:var(--m-text)}
.sh-rules{margin:10px 0 0;max-width:72ch;font-size:14px;color:var(--m-mute)}

/* Grid: a stripe and a glow in the rarity's colour (data-rareza sets --m-rc in metal.css). */
.sh-grid{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px}
@keyframes sh-card-in{from{opacity:0;transform:translateY(10px)}}
.sh-grid[data-enter="1"] .sh-card{animation:sh-card-in .24s ease-out both}
.sh-card{appearance:none;cursor:pointer;position:relative;display:flex;flex-direction:column;width:100%;height:100%;padding:0;text-align:left;overflow:hidden;background:var(--m-plate);border:1px solid var(--m-edge);color:var(--m-text);font:inherit;transition:border-color .15s,box-shadow .15s}
.sh-card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;z-index:1;background:var(--m-rc,var(--m-r-comun))}
.sh-card:hover{border-color:var(--m-edge2)}
.sh-card:focus-visible{outline:2px solid var(--m-amber);outline-offset:3px}
.sh-card[aria-pressed=true]{border-color:var(--m-amber);box-shadow:0 0 0 2px var(--m-amber),0 0 24px rgba(255,177,59,.25)}
.sh-card-pic{position:relative;display:block;height:190px;background:var(--m-ink2)}
.sh-card-pic::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 60%,rgba(255,255,255,.06),transparent 65%)}
@supports (background:color-mix(in srgb,red 50%,transparent)){.sh-card-pic::after{background:radial-gradient(ellipse at 50% 60%,color-mix(in srgb,var(--m-rc,var(--m-r-comun)) 24%,transparent),transparent 65%)}}
.sh-card-pic img{display:block;width:100%;height:100%;object-fit:contain;object-position:center 30%}
.sh-card[data-state=bloqueada] .sh-card-pic img{filter:grayscale(.6) brightness(.55)}
.sh-card-body{display:grid;gap:2px;padding:12px 14px 14px}
.sh-card-name{font:900 22px/1.05 var(--m-f-title);letter-spacing:.03em;text-transform:uppercase;color:var(--m-cream)}
.sh-card-state{margin-top:10px;display:flex;justify-content:space-between;align-items:center;gap:8px;font:600 12px var(--m-f-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--m-mute)}
.sh-card-state b{font:700 16px var(--m-f-ui);letter-spacing:.04em;color:var(--m-amber)}
/* «✓ Tuya» reads as one label: only the price row spreads «Precio» and its number apart. */
.sh-card[data-state=tuya] .sh-card-state,.sh-card[data-state=equipada] .sh-card-state{justify-content:flex-start;align-items:baseline;gap:6px;color:var(--m-ok)}
/* «Tuya hasta 30-12-2026» is wider than a card: the line wraps before the date, never at its hyphens. */
.sh-date{white-space:nowrap}
.sh-card-flag{position:absolute;right:10px;top:12px;z-index:2;padding:3px 7px;border:1px solid #5a513f;background:rgba(0,0,0,.7);font:700 11px var(--m-f-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--m-cream)}

/* Offers: token packs, plans, permanent packs and badges */
.sh-offers{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.sh-offer{display:flex;flex-direction:column;align-items:flex-start;gap:8px;height:100%;padding:18px;background:var(--m-plate);border:1px solid var(--m-edge)}
.sh-offer[data-tier]{border-top:3px solid var(--m-amber)}
.sh-offer h3{margin:4px 0 0;font:900 24px/1.05 var(--m-f-title);text-transform:uppercase;color:var(--m-cream)}
.sh-offer p{margin:0;font:500 15px/1.45 var(--m-f-body);color:var(--m-text)}
.sh-offer .sh-offer-price,.sh-confirm-body .sh-offer-price{font:700 18px var(--m-f-ui);letter-spacing:.06em;color:var(--m-amber)}
.sh-offer .sh-offer-state{font:700 12px var(--m-f-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--m-mute)}
.sh-offer .m-btn{margin-top:auto}
.sh-offer .m-btn + .m-btn{margin-top:0}
.sh-offer-art{display:block;align-self:stretch;width:100%;height:150px;object-fit:contain;background:var(--m-ink2)}
.sh-badge-art{display:grid;place-items:center;align-self:stretch;min-height:84px;padding:10px;background:var(--m-field);border:1px solid var(--m-edge);font:700 16px var(--m-f-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--m-amber)}
.sh-badge-art[data-tier=bronze]{border-color:#b87333}
.sh-badge-art[data-tier=silver]{border-color:#b9b3a6}
.sh-badge-art[data-tier=gold]{border-color:#ffc53d}
.sh-badges .sh-offer{gap:6px}
.sh-badge-choice{max-width:420px;margin-top:18px}
.sh-ledger{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px}
.sh-ledger li{padding:12px 14px;background:var(--m-plate);border:1px solid var(--m-edge);color:var(--m-text)}
.sh-ledger strong{color:var(--m-cream)}
.sh-table-wrap{margin-top:16px;overflow-x:auto}
.sh-table-wrap:focus-visible{outline:2px solid var(--m-amber);outline-offset:2px}
.sh-table{width:100%;border-collapse:collapse;font:500 15px/1.4 var(--m-f-body)}
.sh-table th{padding:10px 12px;text-align:left;border-bottom:1px solid var(--m-edge);font:600 12px var(--m-f-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--m-mute)}
.sh-table td{padding:10px 12px;border-bottom:1px solid #2d2922;color:var(--m-text)}
.sh-footnote{margin:34px 0 0;max-width:90ch;font:500 14px/1.55 var(--m-f-body);color:var(--m-mute)}

/* Purchase review and sign-in panel */
.sh-dialog{position:fixed;inset:0;margin:auto;width:min(580px,calc(100% - 32px));height:fit-content;max-height:calc(100% - 48px);overflow:auto;padding:26px 30px 28px;border:1px solid var(--m-edge2);border-top:3px solid var(--m-amber);background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(0,0,0,.3)),var(--m-plate);color:var(--m-text);box-shadow:0 24px 60px rgba(0,0,0,.6)}
.sh-dialog::backdrop{background:rgba(6,5,4,.72);backdrop-filter:blur(2px)}
.sh-dialog h2{margin:10px 0 0;font:900 34px/1 var(--m-f-title);text-transform:uppercase;color:var(--m-cream)}
.sh-confirm-body{display:grid;gap:6px;margin-top:12px}
.sh-confirm-body p{margin:0}
.sh-dialog .m-hint{margin-top:14px}
.sh-dialog-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px;margin-top:20px}
.sh-login{display:grid;gap:18px;margin-top:22px}
#signin-create{margin-top:22px}

/* The overlay at 1280×720 and other short desktop windows */
@media (max-height:760px) and (min-width:981px){.sh-stage{min-height:360px}.sh-name{font-size:56px}.sh-desc{font-size:16px}}
@media (max-width:980px){.sh-top{grid-template-columns:minmax(0,1fr)}.sh-stage{min-height:360px}}
@media (max-width:650px){
  .sh-stage{min-height:300px;padding-bottom:62px}
  .sh-model{max-height:250px}
  .sh-info{padding:22px 18px 20px}
  .sh-name{font-size:44px}
  .sh-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .sh-card-pic{height:150px}
  .sh-card-name{font-size:19px}
  .sh-h2{font-size:26px}
  .sh-embed-bar .m-label{display:none}
  .sh-embed-bar #shop-close{margin-left:auto}
  .sh-dialog{padding:22px 18px 24px}
  .sh-dialog-actions .m-btn{flex:1 1 100%}
}