:root{
  --bg:#efefee; --ink:#0a0a0a; --dim:#9a9a9a; --panel:#ffffff; --line:#e2e2e0;
  --oil:linear-gradient(115deg,#6b2cff,#d6dade 30%,#8d939b 55%,#5d646c 75%,#16d0c0);
  --ease:cubic-bezier(.2,.9,.2,1);
  --wide:'Michroma','Eurostile','Helvetica Neue',Arial,sans-serif;
  --text:var(--wide);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--wide);font-size:13px;letter-spacing:.02em;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
[hidden]{display:none!important}
.mono{font-family:var(--wide);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase}
.dim{color:var(--dim)}

/* ---------- puntero M ---------- */
.cursor{position:fixed;left:0;top:0;width:30px;height:30px;margin:-15px 0 0 -15px;pointer-events:none;z-index:1000;transition:transform .25s var(--ease),opacity .2s;opacity:0}
.cursor img{width:100%;height:100%}
@media (hover:hover) and (pointer:fine){
  body.has-cursor, body.has-cursor a, body.has-cursor button{cursor:none}
  body.has-cursor .cursor{opacity:1}
  .cursor.big{transform:scale(1.9) rotate(-12deg)}
}

/* ---------- paneles flotantes ---------- */
.panel{background:var(--panel);border-radius:2px}
.panel-tl{position:fixed;top:18px;left:18px;z-index:50;width:min(380px,calc(100vw - 36px));padding:12px 14px;display:grid;grid-template-columns:1fr auto;gap:10px 12px;align-items:center}
.brand{font-family:var(--wide);font-size:15px;letter-spacing:.02em;font-style:italic;font-weight:400}
.menu{grid-column:1/-1;display:flex;gap:16px;flex-wrap:wrap}
.menu a{font-family:var(--wide);font-size:10px;letter-spacing:.06em;text-transform:uppercase}
.menu a:hover{color:var(--dim)}
.lang{grid-row:1;grid-column:2;justify-self:end;font-family:var(--wide);font-size:10px;border:1px solid var(--line);padding:5px 8px;border-radius:2px}
.lang:hover{background:var(--ink);color:#fff}
.panel-tr{position:fixed;top:18px;right:18px;z-index:50;padding:0 0 0 14px;height:36px;display:flex;align-items:center;gap:4px;font-family:var(--wide);font-size:10.5px;text-transform:uppercase}
.panel-tr b{font-weight:400;margin-left:6px}
#logo3dMini{width:36px;height:36px;margin-left:12px;border-left:1px solid var(--line)}

/* ---------- intro con la M 3D ---------- */
.intro{position:fixed;inset:0;z-index:80;background:var(--bg);display:grid;place-items:center;transition:opacity .7s var(--ease),visibility .7s}
.intro.out{opacity:0;visibility:hidden}
#logo3d{position:absolute;inset:0;width:100%;height:100%}
.intro-txt{position:absolute;bottom:7vh;left:0;right:0;display:grid;justify-items:center;gap:16px}
.start{font-family:var(--wide);font-size:13px;letter-spacing:.14em;text-transform:uppercase;background:var(--ink);color:#fff;padding:14px 26px;border-radius:2px;animation:blink 1.4s steps(2) infinite}
.start:hover{animation:none;background:#222}
@keyframes blink{50%{opacity:.35}}

/* ---------- selección ---------- */
.roster{position:relative;height:100svh;min-height:620px;overflow:hidden}
.stage{position:absolute;inset:0}
.fighter-wrap{position:absolute;left:50%;bottom:6vh;height:min(calc(100svh - 190px),760px);transform:translateX(-50%);display:flex;justify-content:center;align-items:flex-end;cursor:grab;touch-action:pan-y;z-index:2}
.fighter-wrap:active{cursor:grabbing}
.fighter-wrap::after{content:"";position:absolute;bottom:-6px;left:50%;width:70%;height:18px;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(0,0,0,.16),transparent);z-index:-1}
.fighter{position:relative;height:100%;aspect-ratio:.36;will-change:transform,filter}
.fighter img{position:absolute;bottom:0;left:50%;height:100%;width:auto;max-width:none;transform:translateX(-50%);opacity:0;transition:opacity .12s linear;pointer-events:none;user-select:none;-webkit-user-drag:none}
.fighter img.on{opacity:1}
/* sombra muy suave para que los tenis blancos se despeguen del fondo claro (sin contorno) */
.fighter img{filter:drop-shadow(0 4px 10px rgba(0,0,0,.10))}
.fighter.video img{transition:none}
.ghost{position:absolute;bottom:9vh;height:min(calc(100svh - 300px),600px);width:auto;opacity:.11;filter:grayscale(1) blur(.5px);cursor:pointer;transition:opacity .4s,filter .4s;z-index:1}
.ghost:hover{opacity:.3;filter:grayscale(.4)}
.ghost-l{left:19%}.ghost-r{right:19%}
.dg{font-family:Arial,Helvetica,sans-serif}
.info{position:absolute;top:112px;left:18px;width:min(350px,calc(100vw - 36px));z-index:3}
.info .mono{font-size:9px}
.name{font-family:var(--wide);font-weight:400;font-size:clamp(24px,2.5vw,36px);line-height:1;letter-spacing:.01em;margin:8px 0 18px;text-transform:uppercase}
.rot{display:flex;align-items:center;gap:12px;padding:0 12px;height:30px;margin-bottom:18px}
.rot .mono{white-space:nowrap;min-width:78px}
#rot{flex:1;-webkit-appearance:none;appearance:none;height:14px;background:repeating-linear-gradient(90deg,#cfcfcc 0 1px,transparent 1px 7px);cursor:ew-resize}
#rot::-webkit-slider-thumb{-webkit-appearance:none;width:10px;height:18px;border:1.5px solid var(--ink);background:#fff;border-radius:1px}
#rot::-moz-range-thumb{width:10px;height:18px;border:1.5px solid var(--ink);background:#fff;border-radius:1px}
.tag{font-size:10px;color:#3c3c3c;line-height:1.8;margin-bottom:16px}
.pieces{list-style:none;display:grid;gap:0;margin-bottom:14px}
.pieces li{display:grid;grid-template-columns:1fr auto;gap:12px;padding:7px 0;border-bottom:1px solid var(--line);font-family:var(--wide);font-size:9px;text-transform:uppercase;letter-spacing:.05em;opacity:0;transform:translateX(18px)}
.pieces li span{color:var(--dim)}
.show .pieces li{animation:pieceIn .5s var(--ease) forwards}
@keyframes pieceIn{to{opacity:1;transform:none}}
.order{position:absolute;left:18px;bottom:18px;width:min(350px,calc(100vw - 36px));display:flex;justify-content:space-between;align-items:center;background:var(--ink);color:#fff;height:30px;padding:0 12px;border-radius:2px;font-family:var(--wide);font-size:9px;letter-spacing:.08em;text-transform:uppercase;overflow:hidden;z-index:3}
.order::before{content:"";position:absolute;inset:0;background:var(--oil);opacity:0;transition:opacity .35s}
@media (hover:hover){.order:hover::before{opacity:1}}
.order span{position:relative}
.order .arrow{transition:transform .3s var(--ease)}
.order:hover .arrow{transform:translateX(5px)}

/* cambio de personaje: limpio, sin inclinación ni destellos */
.fighter.run-out{animation:outR .34s cubic-bezier(.4,0,.8,.4) both}
.fighter.run-out-l{animation:outL .34s cubic-bezier(.4,0,.8,.4) both}
.fighter.run-in{animation:inR .72s cubic-bezier(.16,1,.3,1) both}
.fighter.run-in-l{animation:inL .72s cubic-bezier(.16,1,.3,1) both}
@keyframes outR{to{opacity:0;transform:translateX(-7vw) scale(.97)}}
@keyframes outL{to{opacity:0;transform:translateX(7vw) scale(.97)}}
@keyframes inR{from{opacity:0;transform:translateX(9vw) scale(.97)}to{opacity:1;transform:none}}
@keyframes inL{from{opacity:0;transform:translateX(-9vw) scale(.97)}to{opacity:1;transform:none}}
.name{overflow:hidden}
.name .nm{display:inline-block}
.name.slam .nm{animation:nameUp .7s cubic-bezier(.16,1,.3,1) both}
@keyframes nameUp{from{transform:translateY(105%)}to{transform:none}}
.info.swap .tag,.info.swap #lookNum,.info.swap #player{animation:fadeUp .6s cubic-bezier(.16,1,.3,1) both}
.info.swap .tag{animation-delay:.08s}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.ghost.swap{animation:ghostIn .8s ease both}
@keyframes ghostIn{from{opacity:0}to{opacity:.11}}
.flash{display:none}

/* prendas del conjunto (al tocar al personaje) */
.tray{position:absolute;top:112px;right:18px;width:300px;z-index:4;display:grid;gap:4px}
.tray-head{display:flex;justify-content:space-between;align-items:center;height:30px;padding:0 12px}
.tray-head .mono{font-size:9px}.tray-head b{font-weight:400;color:var(--dim);margin-left:6px}
.tray-x{font-size:14px;line-height:1;padding:4px}
.tray-list{list-style:none;display:grid;gap:4px}
.tray-list li{display:grid;grid-template-columns:72px 1fr auto;align-items:center;gap:12px;background:var(--panel);border-radius:2px;padding:6px 12px 6px 6px;opacity:0;transform:translateX(24px)}
.tray.open .tray-list li{animation:trayIn .55s cubic-bezier(.16,1,.3,1) forwards}
@keyframes trayIn{to{opacity:1;transform:none}}
.tray-list img{width:72px;height:72px;object-fit:contain;background:#f6f6f5;border-radius:1px}
.tray-list .pn{font-family:var(--wide);font-size:9px;text-transform:uppercase;letter-spacing:.05em;line-height:1.5}
.tray-list .pn span{display:block;color:var(--dim)}
.tray-list a{font-family:var(--wide);font-size:9px;text-transform:uppercase;color:var(--dim);letter-spacing:.06em}
.tray-list a:hover{color:var(--ink)}
.tap{position:absolute;left:50%;bottom:calc(6vh - 26px);transform:translateX(-50%);font-size:9px;color:var(--dim);z-index:3;white-space:nowrap;transition:opacity .3s}
.tray-open .tap{opacity:0}

/* cuadrícula de personajes (panel abajo a la derecha) */
.grid-wrap{position:absolute;right:18px;bottom:18px;z-index:3;padding:8px 10px;display:flex;align-items:center;gap:12px}
.hint{display:flex;gap:6px;font-size:9px;white-space:nowrap}
.grid{display:flex;gap:4px}
.slot{position:relative;width:30px;height:44px;background:#f6f6f5;border-radius:1px;overflow:hidden;outline:0}
.slot img{width:100%;height:100%;object-fit:contain;object-position:50% 100%;filter:grayscale(1);opacity:.5;transition:filter .3s,opacity .3s}
.slot:hover img,.slot:focus-visible img,.slot[aria-selected="true"] img{filter:none;opacity:1}
.slot[aria-selected="true"]::after{content:"";position:absolute;inset:0;border:1.5px solid transparent;border-radius:1px;background:var(--oil) border-box;-webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.slot:focus-visible{box-shadow:0 0 0 1.5px var(--ink)}

/* botón de sonido */
.sound{display:flex;align-items:center;gap:8px;font-family:var(--wide);font-size:9px;letter-spacing:.06em;text-transform:uppercase}
.bars{display:flex;align-items:flex-end;gap:2px;height:10px}
.bars i{width:2px;height:3px;background:var(--ink)}
.sound[aria-pressed="true"] .bars i{animation:eq .8s ease-in-out infinite}
.sound[aria-pressed="true"] .bars i:nth-child(2){animation-delay:-.3s}
.sound[aria-pressed="true"] .bars i:nth-child(3){animation-delay:-.55s}
.sound[aria-pressed="true"] .bars i:nth-child(4){animation-delay:-.15s}
@keyframes eq{0%,100%{height:3px}50%{height:10px}}
.panel-tr .sep{width:1px;height:16px;background:var(--line);margin:0 10px}

/* manifiesto */
.drop{min-height:90svh;display:grid;place-content:center;justify-items:center;gap:26px;padding:90px 18px;text-align:center}
.manifest{font-family:var(--wide);font-weight:400;font-size:clamp(18px,2.4vw,32px);line-height:1.16;text-transform:uppercase;max-width:1000px;text-wrap:balance}
.manifest .w{opacity:.14;transition:opacity .5s}
.manifest .w.on{opacity:1}

/* la colección en fila, al estilo lookbook */
.looks{padding:40px 18px 120px}
.looks-head{max-width:1500px;margin:0 auto 90px;display:grid;gap:12px}
.big{font-family:var(--wide);font-weight:400;font-size:clamp(24px,2.5vw,36px);letter-spacing:-.01em}
.lineup{display:flex;justify-content:center;align-items:flex-end;gap:clamp(4px,1.4vw,26px);max-width:1500px;margin:0 auto;height:min(17vw,190px)}
.lineup button{height:100%;flex:0 1 auto;display:flex;align-items:flex-end;transition:opacity .35s,filter .35s,transform .4s var(--ease)}
.lineup img{height:100%;width:auto}
.lineup:hover button{opacity:.28;filter:grayscale(1)}
.lineup button:hover,.lineup button:focus-visible{opacity:1;filter:none;transform:translateY(-8px)}

/* pie */
.foot{display:grid;gap:8px;padding:0 18px 18px}
.foot-row{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}
.chip{font-family:var(--wide);font-size:10px;letter-spacing:.06em;text-transform:uppercase;padding:10px 12px;display:inline-flex;align-items:center;gap:8px}
a.chip:hover{background:var(--ink);color:#fff}
a.chip:hover img{filter:invert(1)}
.credit img{height:14px;width:auto}

/* revelado al bajar */
.rv{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.on{opacity:1;transform:none}


/* ================= TEMA ARCADE HUD ================= */
:root{--c1:#8d939b;--c2:#d6dade;--px:'Press Start 2P',monospace}
body{background-color:var(--bg);background-image:radial-gradient(rgba(10,10,10,.07) 1px,transparent 1.2px);background-size:16px 16px}
.px{font-family:var(--px);font-size:7.5px;letter-spacing:.06em;text-transform:uppercase;line-height:1.6}
/* marcos: borde negro fino, esquinas tipo mira en tornasol y etiqueta de jugador */
.panel{background:rgba(255,255,255,.78);border:1.5px solid var(--ink);border-radius:0;box-shadow:4px 4px 0 rgba(10,10,10,.08)}
.panel::after{content:"";position:absolute;inset:-6px;pointer-events:none;
  background:
   linear-gradient(var(--c1),var(--c1)) top left/12px 2px no-repeat,
   linear-gradient(var(--c1),var(--c1)) top left/2px 12px no-repeat,
   linear-gradient(var(--c2),var(--c2)) top right/12px 2px no-repeat,
   linear-gradient(var(--c2),var(--c2)) top right/2px 12px no-repeat,
   linear-gradient(var(--c2),var(--c2)) bottom left/12px 2px no-repeat,
   linear-gradient(var(--c2),var(--c2)) bottom left/2px 12px no-repeat,
   linear-gradient(var(--c1),var(--c1)) bottom right/12px 2px no-repeat,
   linear-gradient(var(--c1),var(--c1)) bottom right/2px 12px no-repeat}
.panel[data-tag]::before{content:attr(data-tag);position:absolute;top:-8px;left:12px;background:var(--ink);color:#fff;font-family:var(--px);font-size:6.5px;letter-spacing:.08em;padding:3px 6px 2px;line-height:1.2;z-index:1}
.tray-head,.chip{position:relative}
.panel-tl{padding:16px 14px 12px}
.panel-tr{padding-left:14px}
#logo3dMini{border-left:1.5px solid var(--ink)}
.lang{border:1.5px solid var(--ink);border-radius:0}
.brand{font-style:normal}
.menu a .dim::before{content:"x"}
.menu{gap:14px;flex-wrap:nowrap}.menu a{white-space:nowrap}

/* bloque del jugador */
.info.panel{padding:18px 16px 12px;top:132px}
.info .name{margin:8px 0 14px}
.rot{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;height:auto;padding:0;margin-bottom:16px;position:relative;background:none;border:0}
.rot-l{color:var(--dim)}
.segs{display:grid;grid-template-columns:repeat(24,1fr);gap:2px;height:14px;border:1.5px solid var(--ink);padding:2px;background:#fff}
.segs i{background:#e4e4e1;transition:background .15s}
.segs i.on{background:var(--ink)}
.segs i.on:nth-child(4n+1){background:var(--c1)}
.segs i.on:nth-child(4n+3){background:var(--c2)}
#deg{min-width:34px;text-align:right}
#rot{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0}
.pieces li{grid-template-columns:auto 1fr 62px auto;border-bottom:1.5px dotted #b9b9b6}
.pieces li::before{content:"\00bb";color:var(--c1)}
.pieces .st{height:8px;border:1px solid var(--ink);padding:1px;background:#fff}
.pieces .st i{display:block;height:100%;width:0;background:repeating-linear-gradient(90deg,var(--ink) 0 5px,transparent 5px 7px);transition:width .9s cubic-bezier(.16,1,.3,1)}
.show .pieces .st i{width:var(--v)}
.info-foot{display:flex;justify-content:space-between;align-items:center}
.ready{color:var(--c1);animation:blink 1.1s steps(2) infinite}

/* botón pedir */
.order{border:1.5px solid var(--ink);border-radius:0;box-shadow:4px 4px 0 rgba(10,10,10,.12);justify-content:flex-start;gap:10px}
.order .arrow{margin-left:auto}
.order .play{font-size:7px;animation:blink 1s steps(2) infinite}

/* prendas */
.tray-list li{border:1.5px solid var(--ink);border-radius:0;background:rgba(255,255,255,.9)}
.tray-list img{background:#f1f1ef;border:1px dashed #c9c9c6;border-radius:0}
.tray-list .pn span{font-family:var(--px);font-size:6.5px;color:var(--c1);margin-bottom:4px}

/* selector de personajes */
.grid-wrap{padding:12px 10px 8px}
.slot{border:1px solid #cfcfcc;border-radius:0;background:#f7f7f5}
.slot[aria-selected="true"]{border-color:transparent}
.slot[aria-selected="true"]::before{content:"1P";position:absolute;left:1px;top:1px;z-index:2;font-family:var(--px);font-size:5px;background:var(--c1);color:#fff;padding:1px 2px}
.tap{font-family:var(--px);font-size:6.5px;animation:blink 1.4s steps(2) infinite}

/* manifiesto y colección */
p.stg{display:inline-block;background:var(--ink);color:#fff;padding:5px 8px 4px}
.drop{gap:30px}
.manifest .w.on:nth-child(7n+3){background:var(--oil);-webkit-background-clip:text;background-clip:text;color:transparent}
.lineup button{flex-direction:column;align-items:center;gap:10px}
.lineup button img{height:calc(100% - 22px)}
.lineup .lp{font-family:var(--px);font-size:6.5px;color:var(--dim)}
.lineup button:hover .lp{color:var(--c1)}
.looks-head .big{letter-spacing:.02em}

/* pie e intro */
.chip{border:1.5px solid var(--ink)}
.start{border-radius:0;font-family:var(--px);font-size:10px;letter-spacing:.1em;padding:15px 22px 13px;box-shadow:4px 4px 0 rgba(10,10,10,.15)}
.coin{font-size:7px}


/* ================= ACABADO CROMADO (sobre el tema arcade) ================= */
:root{
  --chrome:linear-gradient(135deg,#ffffff 0%,#b9bec5 18%,#f7f8fa 34%,#6d737b 52%,#e8eaed 68%,#9aa0a8 84%,#ffffff 100%);
  --chrome-v:linear-gradient(180deg,#ffffff 0%,#e3e6ea 38%,#c4c9cf 50%,#eef0f2 62%,#ffffff 100%);
  --gun:linear-gradient(180deg,#5d636b 0%,#1b1e22 45%,#0b0c0e 55%,#3a3f46 100%);
}
.panel,.tray-list li,.chip{
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(236,238,241,.94) 55%,rgba(250,251,252,.96)) padding-box,var(--chrome) border-box;
  border:2px solid transparent;border-radius:3px;
  box-shadow:0 1px 0 #fff inset,0 -1px 0 rgba(0,0,0,.08) inset,0 10px 26px rgba(20,24,30,.10),0 2px 4px rgba(20,24,30,.08)}
.panel::after{
  background:
   linear-gradient(135deg,#fff,#8d939b 50%,#fff) top left/12px 2px no-repeat,
   linear-gradient(135deg,#fff,#8d939b 50%,#fff) top left/2px 12px no-repeat,
   var(--oil) top right/12px 2px no-repeat,
   var(--oil) top right/2px 12px no-repeat,
   var(--oil) bottom left/12px 2px no-repeat,
   var(--oil) bottom left/2px 12px no-repeat,
   linear-gradient(135deg,#fff,#8d939b 50%,#fff) bottom right/12px 2px no-repeat,
   linear-gradient(135deg,#fff,#8d939b 50%,#fff) bottom right/2px 12px no-repeat}
.panel[data-tag]::before{background:var(--gun);box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 2px 6px rgba(0,0,0,.25);border-radius:2px;color:#f4f5f7}
.lang{background:var(--chrome-v);border:1.5px solid #8d939b;border-radius:2px}
#logo3dMini{border-left:1.5px solid #b9bec5}
/* nombre del look en cromo */
.name .nm{background:linear-gradient(180deg,#2a2e33 0%,#6b7280 38%,#0d0f12 52%,#4b5159 78%,#1a1d21 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
/* barra de energía cromada */
.segs{background:linear-gradient(180deg,#f6f7f9,#dfe2e6) padding-box,var(--chrome) border-box;border:2px solid transparent;border-radius:2px}
.segs i{background:#d7dade;border-radius:1px}
.segs i.on{background:linear-gradient(180deg,#fdfdfe,#8f959d 50%,#3d4249 51%,#b9bec5)}
.segs i.on:nth-child(4n+1),.segs i.on:nth-child(4n+3){background:var(--oil)}
.pieces .st{background:linear-gradient(180deg,#f6f7f9,#e1e4e8) padding-box,var(--chrome) border-box;border:1.5px solid transparent;border-radius:2px}
.pieces .st i{background:repeating-linear-gradient(90deg,#3b4047 0 5px,transparent 5px 7px),linear-gradient(180deg,#e9ebee,#60666e);background-blend-mode:normal}
/* botón pedir y start: metal oscuro */
.order,.start{background:var(--gun);border:1.5px solid #7c828a;box-shadow:0 1px 0 rgba(255,255,255,.28) inset,0 10px 24px rgba(0,0,0,.22)}
.order::after{content:"";position:absolute;left:0;right:0;top:0;height:45%;background:linear-gradient(180deg,rgba(255,255,255,.16),transparent);pointer-events:none}
/* miniaturas */
.slot{background:linear-gradient(180deg,#fafbfc,#e3e6ea) padding-box,var(--chrome) border-box;border:1.5px solid transparent;border-radius:2px}
.slot[aria-selected="true"]::before{background:var(--gun)}
p.stg{background:var(--gun);border-radius:2px;box-shadow:0 1px 0 rgba(255,255,255,.3) inset}
.tray-list img{background:linear-gradient(180deg,#fbfbfc,#e6e9ec);border:1px solid #c9ced4;border-radius:2px}


/* ================= CROMO DETALLADO ================= */
:root{
  /* cromo real: cielo claro arriba, línea de horizonte oscura al 50 %, suelo brillante abajo */
  --chrome-rim:linear-gradient(180deg,#ffffff 0%,#dfe3e8 22%,#9ea5ae 42%,#2b3036 49%,#11141a 51%,#6f767f 60%,#dfe3e8 80%,#ffffff 100%);
  --chrome-face:linear-gradient(180deg,#ffffff 0%,#f1f3f5 44%,#dde1e5 50%,#eef0f3 56%,#fafbfc 100%);
  --brushed:repeating-linear-gradient(90deg,rgba(255,255,255,0) 0 2px,rgba(120,128,138,.045) 2px 3px);
  --sheen:linear-gradient(112deg,transparent 42%,rgba(255,255,255,.95) 49%,rgba(190,235,255,.55) 51%,transparent 58%);
  --rivet:radial-gradient(circle at 35% 35%,#fff 0 .8px,#b8bec6 1.3px,#5d646c 2.3px,transparent 2.8px);
}
.panel,.tray-list li,.chip{
  background:
    var(--sheen) padding-box,
    var(--rivet) 7px 7px/8px 8px no-repeat padding-box,
    var(--rivet) calc(100% - 7px) 7px/8px 8px no-repeat padding-box,
    var(--rivet) 7px calc(100% - 7px)/8px 8px no-repeat padding-box,
    var(--rivet) calc(100% - 7px) calc(100% - 7px)/8px 8px no-repeat padding-box,
    var(--brushed) padding-box,
    var(--chrome-face) padding-box,
    var(--chrome-rim) border-box;
  background-size:260% 100%,6px 6px,6px 6px,6px 6px,6px 6px,auto,auto,auto;
  background-position:160% 0,4px 4px,calc(100% - 4px) 4px,4px calc(100% - 4px),calc(100% - 4px) calc(100% - 4px),0 0,0 0,0 0;
  border:3px solid transparent;border-radius:5px;
  box-shadow:0 1px 0 #fff inset,0 -2px 0 rgba(40,46,54,.12) inset,0 0 0 1px rgba(30,34,40,.35),0 14px 30px rgba(20,24,30,.14),0 3px 6px rgba(20,24,30,.10);
  animation:sheen 7s cubic-bezier(.4,0,.2,1) infinite}
.tray-list li{animation:trayIn .55s cubic-bezier(.16,1,.3,1) forwards,sheen 7s 1s cubic-bezier(.4,0,.2,1) infinite}
.panel-tr{animation-delay:1.2s}.info.panel{animation-delay:.4s}.grid-wrap{animation-delay:2.1s}.chip{animation-delay:3s}
@keyframes sheen{0%,62%{background-position:160% 0,4px 4px,calc(100% - 4px) 4px,4px calc(100% - 4px),calc(100% - 4px) calc(100% - 4px),0 0,0 0,0 0}
  100%{background-position:-60% 0,4px 4px,calc(100% - 4px) 4px,4px calc(100% - 4px),calc(100% - 4px) calc(100% - 4px),0 0,0 0,0 0}}
@media (prefers-reduced-motion:reduce){.panel,.tray-list li,.chip{animation:none}}
/* etiquetas: placa de metal oscuro con borde cromado */
.panel[data-tag]::before{background:linear-gradient(180deg,#6b727b,#1c2025 48%,#07080a 52%,#3c424a) padding-box,var(--chrome-rim) border-box;border:1.5px solid transparent;border-radius:3px;top:-10px;padding:3px 7px 2px;text-shadow:0 1px 0 rgba(0,0,0,.6);letter-spacing:.12em}
/* nombre: cromo líquido con horizonte y reflejo */
.name .nm{background:linear-gradient(180deg,#23272d 0%,#5d646d 22%,#b9bfc6 44%,#0b0d10 50%,#1d2126 58%,#6a717a 78%,#2a2f35 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 1px 0 #fff) drop-shadow(0 2px 3px rgba(20,24,30,.28));padding-bottom:.06em}
/* barra de energía: tubo cromado con celdas de metal */
.segs{height:18px;padding:3px;background:linear-gradient(180deg,#1b1f24,#3b4148) padding-box,var(--chrome-rim) border-box;border:2px solid transparent;border-radius:4px;box-shadow:0 1px 0 #fff}
.segs i{background:linear-gradient(180deg,#4a5058,#2a2f35);border-radius:1px}
.segs i.on{background:linear-gradient(180deg,#ffffff 0%,#d6dbe0 40%,#5a616a 50%,#aeb4bb 62%,#f4f6f8 100%);box-shadow:0 0 4px rgba(255,255,255,.5)}
.segs i.on:nth-child(4n+1),.segs i.on:nth-child(4n+3){background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,0) 48%,rgba(0,0,0,.15) 52%),var(--oil)}
.pieces .st{height:10px;background:linear-gradient(180deg,#1b1f24,#3b4148) padding-box,var(--chrome-rim) border-box;border:1.5px solid transparent;border-radius:3px}
.pieces .st i{background:repeating-linear-gradient(90deg,transparent 0 5px,#1b1f24 5px 6px),linear-gradient(180deg,#fff,#c9ced4 45%,#5a616a 50%,#e8ebee)}
/* botón pedir / start: metal oscuro pulido con aro cromado y destello */
.order,.start{background:var(--sheen) padding-box,linear-gradient(180deg,#646b74 0%,#1d2126 46%,#060709 54%,#33383f 100%) padding-box,var(--chrome-rim) border-box;
  background-size:260% 100%,auto,auto;background-position:160% 0,0 0,0 0;border:2px solid transparent;border-radius:4px;animation:sheenB 5s cubic-bezier(.4,0,.2,1) infinite;text-shadow:0 1px 0 #000}
.start{animation:sheenB 5s cubic-bezier(.4,0,.2,1) infinite,blink 1.4s steps(2) infinite}
@keyframes sheenB{0%,55%{background-position:160% 0,0 0,0 0}100%{background-position:-60% 0,0 0,0 0}}
.order::after{display:none}
.lang{background:var(--chrome-face) padding-box,var(--chrome-rim) border-box;border:2px solid transparent;border-radius:3px}
.slot{background:var(--chrome-face) padding-box,linear-gradient(180deg,#fff,#aeb4bb 50%,#e6e9ec) border-box;border:1.5px solid transparent;border-radius:3px}
.slot[aria-selected="true"]{background:var(--chrome-face) padding-box,var(--oil) border-box}
p.stg{background:linear-gradient(180deg,#6b727b,#1c2025 48%,#07080a 52%,#3c424a) padding-box,var(--chrome-rim) border-box;border:1.5px solid transparent;border-radius:3px}



/* esquinas detalladas: escuadras de cromo tornasol con bisel, filo de luz y diamante */
.panel::after{inset:-6px;background:var(--corners);filter:none}

:root{--corners:
  url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2716%27%20height%3D%2716%27%20viewBox%3D%270%200%2016%2016%27%3E%3Cdefs%3E%3ClinearGradient%20id%3D%27g%27%20x1%3D%270%27%20y1%3D%271%27%20x2%3D%271%27%20y2%3D%270%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%233aa8ad%27/%3E%3Cstop%20offset%3D%27.5%27%20stop-color%3D%27%236a4fb0%27/%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%23f27fc2%27/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg%20transform%3D%27rotate%280%208%208%29%27%3E%3Cpath%20d%3D%27M1.5%2014.5%20V5.5%20Q1.5%201.5%205.5%201.5%20H14.5%27%20fill%3D%27none%27%20stroke%3D%27url%28%23g%29%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27/%3E%3C/g%3E%3C/svg%3E") top left/16px 16px no-repeat,
  url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2716%27%20height%3D%2716%27%20viewBox%3D%270%200%2016%2016%27%3E%3Cdefs%3E%3ClinearGradient%20id%3D%27g%27%20x1%3D%270%27%20y1%3D%271%27%20x2%3D%271%27%20y2%3D%270%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%233aa8ad%27/%3E%3Cstop%20offset%3D%27.5%27%20stop-color%3D%27%236a4fb0%27/%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%23f27fc2%27/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg%20transform%3D%27rotate%2890%208%208%29%27%3E%3Cpath%20d%3D%27M1.5%2014.5%20V5.5%20Q1.5%201.5%205.5%201.5%20H14.5%27%20fill%3D%27none%27%20stroke%3D%27url%28%23g%29%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27/%3E%3C/g%3E%3C/svg%3E") top right/16px 16px no-repeat,
  url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2716%27%20height%3D%2716%27%20viewBox%3D%270%200%2016%2016%27%3E%3Cdefs%3E%3ClinearGradient%20id%3D%27g%27%20x1%3D%270%27%20y1%3D%271%27%20x2%3D%271%27%20y2%3D%270%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%233aa8ad%27/%3E%3Cstop%20offset%3D%27.5%27%20stop-color%3D%27%236a4fb0%27/%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%23f27fc2%27/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg%20transform%3D%27rotate%28180%208%208%29%27%3E%3Cpath%20d%3D%27M1.5%2014.5%20V5.5%20Q1.5%201.5%205.5%201.5%20H14.5%27%20fill%3D%27none%27%20stroke%3D%27url%28%23g%29%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27/%3E%3C/g%3E%3C/svg%3E") bottom right/16px 16px no-repeat,
  url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2716%27%20height%3D%2716%27%20viewBox%3D%270%200%2016%2016%27%3E%3Cdefs%3E%3ClinearGradient%20id%3D%27g%27%20x1%3D%270%27%20y1%3D%271%27%20x2%3D%271%27%20y2%3D%270%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%233aa8ad%27/%3E%3Cstop%20offset%3D%27.5%27%20stop-color%3D%27%236a4fb0%27/%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%23f27fc2%27/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg%20transform%3D%27rotate%28270%208%208%29%27%3E%3Cpath%20d%3D%27M1.5%2014.5%20V5.5%20Q1.5%201.5%205.5%201.5%20H14.5%27%20fill%3D%27none%27%20stroke%3D%27url%28%23g%29%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27/%3E%3C/g%3E%3C/svg%3E") bottom left/16px 16px no-repeat}

.panel[data-tag]::before{left:26px}
/* mismas esquinas en los demás widgets */
.tray-list li{position:relative}
.tray-list li::after,.order::after{content:"";position:absolute;inset:-6px;height:auto;width:auto;pointer-events:none;background:var(--corners);background-size:14px 14px;display:block}
.order::after{inset:-5px;background-size:11px 11px}
.order{overflow:visible}
.order::before{border-radius:3px;overflow:hidden}
.grid-wrap .slot{overflow:visible}
.slot img{border-radius:2px}
.slot[aria-selected="true"]::after{inset:-4px;border:0;-webkit-mask:none;mask:none;background:var(--corners);background-size:10px 10px}


/* ajustes finos de widgets */
.tray{gap:14px}.tray-list{gap:14px}
.tray-list li{padding:9px 16px 9px 10px}
.tray-list li::after{background-size:12px 12px;inset:-5px;filter:none}
.tray-head{padding:0 16px 0 18px}
.ready{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:#4b5159;text-shadow:0 0 6px rgba(255,255,255,.6)}
.panel-tr{padding-left:18px}
.tap{bottom:10px}


/* playlist */
.trk{font-size:9px;color:var(--dim);margin-left:10px;min-width:92px;white-space:nowrap}
.nxt{font-size:7px;letter-spacing:-1px;padding:4px 6px;margin-left:2px;border-radius:2px;background:var(--gun) padding-box,var(--chrome-rim) border-box;border:1.5px solid transparent;color:#fff}
.nxt:hover{filter:brightness(1.2)}
html{overflow-x:clip}




/* ================= OG DETALLADA (plateada, sencilla) ================= */
.panel,.chip{box-shadow:0 0 0 1px rgba(30,34,40,.28),inset 0 0 0 1px rgba(255,255,255,.95),inset 0 2px 0 rgba(255,255,255,.9),inset 0 -2px 3px rgba(40,46,54,.10),0 14px 30px rgba(20,24,30,.12),0 3px 6px rgba(20,24,30,.08);transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s}
@media (hover:hover){.info.panel:hover,.grid-wrap:hover,.panel-tl:hover{box-shadow:0 0 0 1px rgba(30,34,40,.32),inset 0 0 0 1px #fff,inset 0 2px 0 #fff,0 20px 40px rgba(20,24,30,.16),0 4px 8px rgba(20,24,30,.10)}}
.name .nm{-webkit-text-stroke:.6px rgba(20,24,30,.28)}
.rot{margin-bottom:4px}
.ticks{display:flex;justify-content:space-between;margin:0 0 16px 38px;padding-right:48px;font-size:5.5px;color:#9aa0a8;letter-spacing:.04em}
.ticks span{position:relative;padding-top:6px}
.ticks span::before{content:"";position:absolute;top:0;left:50%;width:1px;height:4px;background:linear-gradient(#6b727b,#c9ced4)}
.pieces li{border-bottom:0;background:linear-gradient(90deg,transparent,rgba(107,114,123,.35) 12%,rgba(107,114,123,.35) 88%,transparent) bottom/100% 1px no-repeat,linear-gradient(90deg,transparent,rgba(255,255,255,.95) 12%,rgba(255,255,255,.95) 88%,transparent) 0 calc(100% - 1px)/100% 1px no-repeat}
.bars i{background:linear-gradient(180deg,#fff,#8d939b 45%,#2b3036 55%,#9aa0a8);width:3px}
.lookNum,#lookNum{letter-spacing:.12em}
.hint{letter-spacing:.1em}
.fighter-wrap::after{background:radial-gradient(closest-side,rgba(20,24,30,.22),rgba(20,24,30,.08) 60%,transparent);width:62%;height:20px}

/* ---------- teléfono ---------- */
@media (max-width:860px){
  .panel-tl{position:absolute}
  .roster{height:auto;min-height:100svh;overflow:visible;padding:146px 14px 18px;display:flex;flex-direction:column}
  .stage{position:relative;inset:auto;display:flex;flex-direction:column}
  .ghost{display:none}
  .fighter-wrap{position:relative;left:auto;bottom:auto;transform:none;height:min(54svh,500px);align-self:center;order:2;margin:10px 0 14px}
  .info{position:relative;top:auto;left:auto;width:100%;order:1}
  .info.panel{top:auto;padding:16px 12px 10px;margin-top:10px}
  .menu{flex-wrap:wrap;gap:6px 14px}
  .panel-tl{width:calc(100vw - 124px)}
  .panel-tr{top:18px;bottom:auto;right:14px;position:absolute;height:44px;padding:0 10px}
  .panel-tr #soundTxt,.panel-tr #logo3dMini,.panel-tr .trk{display:none}
  .roster{padding-bottom:18px}
  .info .pieces,.info .tag,#player{display:none}
  .ticks{margin-left:38px;padding-right:44px}
  .name{margin-bottom:12px}
  .rot{margin-bottom:0}
  .order{position:relative;left:auto;bottom:auto;width:100%;order:3}
  .grid-wrap{position:relative;right:auto;bottom:auto;margin-top:8px;justify-content:space-between;flex-wrap:wrap}
  .grid{flex:1;justify-content:space-between}
  .slot{width:calc((100vw - 90px)/8);height:auto;aspect-ratio:.68}
  .hint{width:100%}
  .lineup{overflow-x:auto;justify-content:flex-start;height:240px;padding-bottom:8px;scroll-snap-type:x mandatory}
  .lineup button{scroll-snap-align:center;flex:0 0 auto}
  .lineup:hover button{opacity:1;filter:none}
  .panel-tr .sep,.panel-tr [data-i18n=select],#counter,.panel-tr .dim{display:none}
  .tray{position:fixed;top:auto;left:14px;right:14px;bottom:14px;width:auto;max-height:70svh;overflow:auto;z-index:60;background:var(--bg);padding:4px;border-radius:3px;box-shadow:0 -10px 40px rgba(0,0,0,.08)}
  .tap{position:relative;left:auto;bottom:auto;transform:none;order:2;text-align:center;margin:-8px 0 12px}
  .roster{overflow-x:clip;padding-bottom:70px}
}
@media (max-width:400px){ .menu{gap:12px} }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .pieces li,.rv,.manifest .w{opacity:1!important;transform:none!important}
}

/* sin esquinas decorativas: solo el cromado (pedido 26-sep) */
.panel::after,.tray-list li::after,.order::after{display:none!important}
.slot[aria-selected="true"]::after{display:none}


/* ================= TORNASOL DONDE PASA EL CURSOR ================= */
/* el borde cromado se enciende en tornasol alrededor del puntero (--mx/--my los pone main.js) */
.panel::before{z-index:2}
.panel .glint,.tray-list li .glint,.order .glint{position:absolute;inset:-3px;border-radius:inherit;pointer-events:none;border:3px solid transparent;
  background:radial-gradient(170px circle at var(--mx,-999px) var(--my,-999px),#8d939b,#5d646c 22%,#d6dade 42%,#b6f0ff 55%,transparent 72%) border-box;
  -webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) padding-box exclude,linear-gradient(#000 0 0);
  opacity:0;transition:opacity .35s;z-index:3}
.panel:hover .glint,.tray-list li:hover .glint,.order:hover .glint{opacity:1}
/* textos tocables: tornasol al pasar */
@media (hover:hover){
  .menu a:hover,.brand:hover,.chip:hover,.tray-list a:hover,.lang:hover,.sound:hover #soundTxt,.pieces li:hover b,.hint:hover{
    background:linear-gradient(90deg,#8d939b,#5d646c,#d6dade,#8d939b);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:iriText 1.6s linear infinite}
  .slot:hover{background:var(--chrome-face) padding-box,var(--oil) border-box}
}
@keyframes iriText{to{background-position:200% 0}}
/* toque en el celular: destello tornasol */
.tapfx{position:fixed;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;pointer-events:none;z-index:999;
  background:radial-gradient(circle,rgba(255,255,255,.9),rgba(170,176,184,.6) 35%,rgba(230,233,236,.5) 60%,transparent 70%);animation:tapfx .6s ease-out forwards}
@keyframes tapfx{to{transform:scale(9);opacity:0}}

/* rastro tornasol en textos (clase la pone main.js al pasar el cursor, se va sola en 0.9 s) */
.iri-hit{background:linear-gradient(90deg,#8d939b,#5d646c,#d6dade,#b6f0ff,#8d939b)!important;background-size:220% 100%!important;
  -webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;-webkit-text-fill-color:transparent;
  animation:iriText 1.2s linear infinite;transition:color .3s}


/* ================= TIENDA: precios, tallas, pre-order, drop ================= */
.fit-row{display:flex;align-items:center;gap:10px;margin:-2px 0 14px;font-size:10px}
.fit-row .dots{flex:1;border-bottom:1.5px dotted #9aa0a8;transform:translateY(-3px)}
.fit-row b{font-family:var(--wide);font-weight:400;font-size:15px}
.order .op{margin-left:auto;margin-right:10px;font-size:10px;letter-spacing:.06em;opacity:.9}
.order .arrow{margin-left:0}
.tray{width:340px}
.tray-list li{grid-template-columns:64px 1fr auto;align-items:start}
.tray-list img{width:64px;height:64px}
.tray-list .pc{display:grid;gap:8px;padding-top:2px}
.szs{display:flex;flex-wrap:wrap;gap:4px}
.sz{min-width:26px;height:22px;padding:0 5px;font-family:var(--wide);font-size:8.5px;letter-spacing:.04em;border-radius:3px;
  background:linear-gradient(180deg,#fff,#e6e9ec) padding-box,linear-gradient(180deg,#fff,#9aa0a8 50%,#e6e9ec) border-box;border:1.5px solid transparent;color:#3b4047}
.sz:hover{color:var(--ink)}
.sz.on{background:linear-gradient(180deg,#646b74 0%,#1d2126 46%,#060709 54%,#33383f 100%) padding-box,linear-gradient(180deg,#fff,#6b727b 50%,#d6dade) border-box;color:#fff}
.tray-list .pr{display:grid;justify-items:end;gap:10px;padding-top:2px}
.tray-list .price{font-family:var(--wide);font-weight:400;font-size:13px}
.tray-list li.need{animation:need .5s ease}
@keyframes need{20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}
.tray-list li.need .szs{outline:1.5px solid #4b5159;outline-offset:3px;border-radius:3px}
.tray-list li.tray-total{grid-template-columns:1fr auto;align-items:center;row-gap:10px;padding:12px 14px}
.tray-total span{font-size:9px}
.tray-total b{font-family:var(--wide);font-weight:400;font-size:18px}
.tray-total .order-fit{grid-column:1/-1;display:flex;justify-content:center;height:34px;align-items:center;border-radius:4px;color:#fff!important;font-size:9.5px;letter-spacing:.1em;
  background:linear-gradient(180deg,#646b74 0%,#1d2126 46%,#060709 54%,#33383f 100%) padding-box,var(--chrome-rim) border-box;border:2px solid transparent}
.tray-total .order-fit:hover{filter:brightness(1.25)}
.tray{max-height:calc(100svh - 150px);overflow:auto;padding:8px 8px 12px;margin-right:-8px}
.drop-count{display:grid;justify-items:center;gap:14px;margin-top:10px}
.clock{display:flex;align-items:baseline;gap:6px;font-size:clamp(18px,3vw,34px)}
.clock b{font-weight:400;padding:10px 10px 8px;border-radius:5px;color:#fff;background:linear-gradient(180deg,#646b74 0%,#1d2126 46%,#060709 54%,#33383f 100%) padding-box,var(--chrome-rim) border-box;border:2px solid transparent;box-shadow:0 10px 22px rgba(20,24,30,.18)}
.clock i{font-style:normal;font-size:.35em;color:#9aa0a8;margin-right:6px}
.drop-note{font-size:11px;color:#4a4f56;max-width:420px;text-align:center;line-height:1.8}
@media (max-width:860px){.tray{width:auto;max-height:72svh;margin-right:0}.clock b{padding:8px 7px 6px}}

/* prendas siempre visibles al lado del modelo (26-sep) */
.tap{display:none}
.tray{max-height:calc(100svh - 240px)}
@media (max-width:860px){
  .tray{position:relative;top:auto;left:auto;right:auto;bottom:auto;width:auto;max-height:none;overflow:visible;order:4;margin:14px 0 0;padding:0;background:none;box-shadow:none;z-index:1}
}
@media (min-width:861px){
  .tray-list{gap:10px}.tray{gap:10px}
  .tray-list li{grid-template-columns:52px 1fr auto;padding:7px 12px 7px 8px;column-gap:10px}
  .tray-list img{width:52px;height:52px}
  .tray-list .pc{gap:6px}
  .szs{flex-wrap:nowrap;gap:3px}
  .sz{min-width:22px;height:20px;padding:0 4px;font-size:7.5px}
  .tray-list .pr{gap:6px}
  .tray-list li.tray-total{padding:9px 12px;row-gap:8px}
  .tray-total .order-fit{height:30px}
}
.tray-list .po{white-space:nowrap}
#tray .glint{display:none}

/* celular: scroll natural y liviano (26-sep) */
@media (hover:none){
  html{scroll-behavior:auto}
  .panel,.chip,.order{animation:none!important}
  .glint{display:none}
  .fighter-wrap{touch-action:pan-y}
}
@media (max-width:860px){ .tray-x{display:none} }

/* seguridad: las prendas nunca pueden quedar invisibles si una animación no corre */
@media (hover:none){ .tray-list li{opacity:1;transform:none;animation:none} }
@media (prefers-reduced-motion:reduce){ .tray-list li,.pieces li{opacity:1;transform:none;animation:none} }
/* colección: que la cabeza nunca se corte al seleccionar (26-sep) */
.lineup{padding-top:16px;box-sizing:content-box}
@media (hover:none){ .lineup button:hover,.lineup button:focus-visible,.lineup button:active{transform:none} }
/* íconos dibujados (el iPhone convertía ▶ en emoji) */
.nxt{display:inline-flex;align-items:center;justify-content:center;padding:4px 7px}
.nxt svg{width:14px;height:14px}
.order .play{display:inline-flex}
.order .play svg{width:9px;height:9px}

/* ================= TODO EN PLATA: fondo plateado mate, acentos de plata (26-sep) ================= */
:root{
  --bg:#c8ccd1;
  --oil:linear-gradient(115deg,#f7f8fa 0%,#9aa0a8 22%,#ffffff 42%,#5d646c 60%,#e3e6ea 80%,#aeb4bb 100%);
  --c1:#8d939b; --c2:#d6dade; --dim:#6f757d; --line:#b3b8be;
}
body{
  background-color:#c8ccd1;
  background-image:
    radial-gradient(rgba(40,46,54,.10) 1px,transparent 1.2px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5  0 0 0 0 .52  0 0 0 0 .55  0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(180deg,#d6d9dd 0%,#c5c9ce 45%,#bcc0c5 100%);
  background-size:16px 16px,220px 220px,100% 100%;
}
.intro{background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5  0 0 0 0 .52  0 0 0 0 .55  0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(ellipse at 50% 42%,#dde0e4 0%,#c5c9ce 60%,#b6bbc0 100%)}
.ghost{opacity:.16}
.pieces li::before,.ready,.tray-list .pn span{color:#4b5159;text-shadow:none}
.menu a .dim,.dim{color:#6f757d}
.manifest .w.on:nth-child(7n+3){background:linear-gradient(180deg,#8d939b,#2b3036 50%,#6b727b);-webkit-background-clip:text;background-clip:text;color:transparent}
.iri-hit{background:linear-gradient(90deg,#3b4047,#c9ced4,#5d646c,#ffffff,#3b4047)!important;background-size:220% 100%!important}
.cursor img{filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))}
/* cursor plateado bien visible sobre el fondo plata */
.cursor{width:40px;height:40px;margin:-20px 0 0 -20px}
.cursor img{filter:drop-shadow(0 0 .6px #1d2126) drop-shadow(0 0 .6px #1d2126) drop-shadow(0 3px 4px rgba(0,0,0,.35))!important}

/* fondo BLANCO (26-sep: "déjalo blanco, no gris") y sin efectos al pasar el cursor */
:root{--bg:#ffffff;--line:#d9dcdf}
body{background-color:#ffffff;background-image:radial-gradient(rgba(40,46,54,.07) 1px,transparent 1.2px);background-size:16px 16px}
.intro{background:radial-gradient(ellipse at 50% 42%,#ffffff 0%,#f3f4f6 70%,#e9ebee 100%)}
.glint{display:none!important}
.ghost{opacity:.12}
.menu a:hover,.brand:hover,.chip:hover,.tray-list a:hover,.lang:hover,.sound:hover #soundTxt,.pieces li:hover b,.hint:hover{background:none!important;color:var(--ink)!important;-webkit-text-fill-color:currentColor!important;animation:none!important}
/* botones de pista anterior / siguiente (vuelven: hay 5 pistas) */
.prv{margin-left:6px}.prv svg{transform:scaleX(-1)}

/* letras que BRILLAN al pasar el cursor: destello plateado que cruza + brillo suave (bien recortado al texto) */
.iri-hit{
  background-image:linear-gradient(105deg,#1d2126 0%,#1d2126 38%,#9aa0a8 44%,#ffffff 50%,#9aa0a8 56%,#1d2126 62%,#1d2126 100%)!important;
  background-size:260% 100%!important;background-repeat:no-repeat!important;background-color:transparent!important;
  -webkit-background-clip:text!important;background-clip:text!important;
  color:transparent!important;-webkit-text-fill-color:transparent!important;
  filter:drop-shadow(0 0 3px rgba(255,255,255,.95)) drop-shadow(0 0 6px rgba(140,150,160,.55));
  animation:textShine .9s cubic-bezier(.4,0,.2,1) both!important}
@keyframes textShine{from{background-position:100% 0}to{background-position:0% 0}}
@media (max-width:860px){ .panel-tr[data-tag]::before{left:6px} }

/* ===== ver en grande (prendas y personaje) — visor cromado ===== */
:root{--zoom-bg:rgba(250,250,251,.97);--zoom-fg:#141518;--zoom-acento:#9aa1a9;--zoom-btn-bg:linear-gradient(180deg,#fdfdfd,#d9dde2);--zoom-font:'Michroma',system-ui,sans-serif}
.zv-img{filter:drop-shadow(0 18px 30px rgba(0,0,0,.18))}
.zv-cap{text-transform:uppercase;letter-spacing:.12em;font-size:12px}
.zv-tip{text-transform:uppercase;letter-spacing:.1em;font-size:9px}
.pz{position:relative;display:block;padding:0;border:0;background:none;cursor:zoom-in;line-height:0;color:#3a3f45}
.pz svg{position:absolute;right:3px;bottom:3px;width:15px;height:15px;padding:2px;background:linear-gradient(180deg,#fff,#dfe3e8);border:1px solid #b9bfc6;border-radius:50%;box-sizing:content-box}
.pz:hover img{transform:scale(1.04)}
.pz img{transition:transform .25s ease}
.pz:focus-visible{outline:2px solid #9aa1a9;outline-offset:2px}
/* el cursor plateado va por encima del visor de zoom (si no, desaparece al abrirlo) */
.cursor{z-index:2147483600}
body.has-cursor .zv,body.has-cursor .zv *{cursor:none}
/* en el teléfono los dos botones de pista van más compactos: si no, el panel 1P tapa el botón ES del menú */
@media (max-width:860px){
  /* teléfono y tableta: los dos botones de pista van uno encima del otro, al lado
     de las barras de sonido, así el panel 1P no crece a lo ancho ni tapa el menú */
  .panel-tr{display:grid;grid-template-columns:auto auto;grid-template-rows:1fr 1fr;column-gap:8px;row-gap:3px;align-items:center;padding:4px 20px 4px 12px}
  .panel-tr .sound{grid-row:1 / 3;grid-column:1}
  .panel-tr .prv{grid-row:1;grid-column:2;margin:0}
  .panel-tr .nxt:not(.prv){grid-row:2;grid-column:2;margin:0}
  .panel-tr .nxt{padding:2px 5px}.panel-tr .nxt svg{width:10px;height:10px}
}

/* 3-oct-2026: fuera el panel P1 (LOOK / nombre / barra 360 / total). En su lugar va el botón
   de comprar el conjunto y, a su lado, el selector de conjuntos. En todos los dispositivos. */
.info.panel,.info{display:none!important}
@media (min-width:861px){
  .order{top:132px;bottom:auto;left:18px;width:min(350px,calc(100vw - 36px));height:46px;font-size:11px;z-index:4}
  .grid-wrap{left:18px;right:auto;top:196px;bottom:auto;width:min(350px,calc(100vw - 36px));flex-wrap:wrap;gap:8px 12px;justify-content:space-between}
  .grid-wrap .grid{flex:1 1 100%;justify-content:space-between}
  .grid-wrap .slot{width:calc((100% - 28px)/8);height:auto;aspect-ratio:.68}
}
@media (max-width:860px){
  .order{order:1;height:46px;margin-top:10px;font-size:11px}
  .grid-wrap{order:1;margin-top:10px}
  .fighter-wrap{order:2}
}
@media (max-width:860px){
  /* el selector vive fuera de .stage: se "disuelve" la caja para poder ordenarlo justo debajo del botón */
  .stage{display:contents}
  .order{order:1}.grid-wrap{order:1;margin-top:10px}
  .fighter-wrap{order:2}.tray{order:4}.tap{order:3}
}

/* 3-oct-2026: un solo conjunto real → sin siluetas vecinas ni selector; el botón de compra es lo que más llama */
body.solo .ghost,body.solo .grid-wrap{display:none!important}
.order{height:58px!important;font-size:13px!important;letter-spacing:.08em;padding:0 18px!important;
  background:linear-gradient(180deg,#2b2f36 0%,#0b0c0e 48%,#000 52%,#1b1e23 100%) padding-box,var(--chrome-rim) border-box!important;
  border:2px solid transparent!important;color:#fff!important;overflow:hidden!important;
  box-shadow:0 0 0 0 rgba(15,17,20,.45),0 14px 30px -10px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.35)!important;animation:buyPulse 2.2s ease-out infinite!important}
.order .op{font-size:15px!important;opacity:1!important}
.order::before{content:""!important;position:absolute!important;inset:0 auto 0 -60%!important;width:45%!important;opacity:1!important;border-radius:0!important;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.55),transparent)!important;transform:skewX(-18deg);animation:buySheen 2.6s ease-in-out infinite}
.order::after{display:none!important}
@keyframes buySheen{0%,55%{left:-60%}100%{left:130%}}
@keyframes buyPulse{0%{box-shadow:0 0 0 0 rgba(15,17,20,.5),0 14px 30px -10px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.35)}70%,100%{box-shadow:0 0 0 14px rgba(15,17,20,0),0 14px 30px -10px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.35)}}
@media (hover:hover){.order:hover{transform:translateY(-2px) scale(1.02)}}
.order{transition:transform .2s}
@media (max-width:860px){.order{height:60px!important;font-size:13px!important}}
@media (prefers-reduced-motion:reduce){.order,.order::before{animation:none!important}}
/* el botón de compra "llama": cada pocos segundos da un saltito con resplandor, además del destello y el pulso */
.order{animation:buyPulse 2.2s ease-out infinite,buyNudge 4.5s cubic-bezier(.3,1.6,.5,1) 1.2s infinite!important}
.order .arrow{animation:buyArrow 1.1s ease-in-out infinite}
@keyframes buyNudge{0%,82%,100%{transform:none;filter:none}86%{transform:translateY(-5px) scale(1.035);filter:brightness(1.25)}90%{transform:translateY(0) scale(.99)}94%{transform:translateY(-2px) scale(1.012);filter:brightness(1.1)}}
@keyframes buyArrow{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}
@media (hover:none){.order{animation:buyPulse 2.2s ease-out infinite,buyNudge 4.5s cubic-bezier(.3,1.6,.5,1) 1.2s infinite!important}}
@media (prefers-reduced-motion:reduce){.order,.order .arrow{animation:none!important}}
/* con pocos conjuntos, las miniaturas van juntas a la izquierda (no una en cada punta) */
.grid-wrap .grid,.grid{justify-content:flex-start!important;gap:6px!important}

/* 5-oct-2026 (noche): en el telefono la tira "Elige tu personaje" se desplaza con el dedo (antes cortaba los ultimos conjuntos) */
@media (max-width:860px){
  .grid-wrap .grid,.grid{flex-wrap:nowrap!important;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;touch-action:pan-x;scrollbar-width:none;padding:2px 2px 6px;margin:0 -2px;scroll-padding:0 30%}
  .grid::-webkit-scrollbar{display:none}
  .grid .slot,.grid-wrap .slot{flex:0 0 auto!important;width:76px!important;height:auto!important;aspect-ratio:.68;scroll-snap-align:center}
}