/* duelo-lucha.css — las pantallas del Duelo que quedaban fuera, en el lenguaje de
   «Elige tu rival» Lucha (30-sep-2026): «¡Porción!» / «Así vas», los paneles de
   retos (nombre, reto enviado, te ha retado, comparación, mis retos) y el fin de
   partida (victoria, derrota y empate).
   Rayas diagonales, Syne en cursiva gigante, piezas inclinadas y colores con
   significado: azul = tú, --rc = el rival (el color de su dificultad; el amigo,
   naranja), --tb-c = el tema. Nada de cifras que cuentan: salen con su valor y
   dan un golpe. Letra ≥15 px lo que se lee y ≥12 px las etiquetas.
   Va DESPUÉS de duelo-titanes.html y css/duelo-fin-v2.css. */

:root{ --lu-azul:#3b82f6; --lu-pop:cubic-bezier(.3,1.6,.5,1); --lu-cae:cubic-bezier(.2,.9,.3,1.25); }

/* ══════════ ¡PORCIÓN! / ASÍ VAS ══════════ */
.wheel-ov{ background:#060608; --rc:#ff5a5a; }
.wheel-ov .wov-plate{ width:100vw; }
.wheel-ov .wov-plate::before{ background:radial-gradient(70% 42% at 50% 46%, color-mix(in srgb, var(--tb-c) 30%, transparent), transparent 72%), #060608; }
.wheel-ov .wov-plate::after{ background:linear-gradient(180deg, rgba(6,6,8,.4), transparent 30%, transparent 70%, rgba(6,6,8,.6)); }
.wheel-ov .wov-plate i{ position:absolute; inset:-20% -40%; opacity:.2;
  background:repeating-linear-gradient(-62deg, transparent 0 34px, var(--tb-c) 34px 37px, transparent 37px 80px); animation:luRayas 6s linear infinite; }
@keyframes luRayas{ to{ transform:translate3d(-80px,0,0); } }
.wheel-ov .wov-card{ gap:clamp(6px,1.2dvh,12px); max-width:min(94vw,520px); }
.wheel-ov .wov-eyebrow{ font:800 clamp(.8rem,3.3vw,1rem)/1 'DM Sans',sans-serif; letter-spacing:.16em; color:#cfc6b4; }
.wheel-ov .wov-eyebrow b{ color:#fff; }
.wheel-ov .wov-title{ font:800 italic clamp(2.2rem,10.4vw,5rem)/.95 'Syne',system-ui,sans-serif; text-transform:uppercase; letter-spacing:-.02em;
  background:none; -webkit-background-clip:border-box; background-clip:border-box; color:#fff; filter:none; transform:skewX(-8deg);
  text-shadow:4px 4px 0 color-mix(in srgb, var(--tb-c) 85%, #000), 0 0 34px color-mix(in srgb, var(--tb-c) 70%, transparent), 0 8px 22px rgba(0,0,0,.9);
  animation:luSlam .52s var(--lu-pop) both; }
.wheel-ov.wov-crown .wov-title{ animation:luSlam .52s var(--lu-pop) both; }
@keyframes luSlam{ 0%{ opacity:0; transform:skewX(-8deg) scale(2.3); } 60%{ opacity:1; transform:skewX(-8deg) scale(.93); } 100%{ transform:skewX(-8deg); } }
.wheel-ov .wov-tema{ padding:6px 16px; border-radius:6px; transform:skewX(-8deg); white-space:nowrap;
  font:800 clamp(.95rem,4vw,1.25rem)/1 'DM Sans',sans-serif; letter-spacing:.14em; text-transform:uppercase; color:#fff;
  background:color-mix(in srgb, var(--tb-c) 70%, #000); box-shadow:0 0 22px var(--tb-c); animation:luSube .38s var(--lu-cae) .22s both; }
.wheel-ov .pwheel{ width:min(66vw,42dvh,320px); }
.wheel-ov .wov-rule, .wheel-ov .wov-count{ display:none; }
.wheel-ov .wov-score{ gap:clamp(6px,2vw,14px); padding:0; background:none; border:0; box-shadow:none; margin-top:clamp(4px,1dvh,10px); }
.wheel-ov .wov-s{ gap:10px; padding:8px 14px; border-radius:8px; transform:skewX(-8deg); background:rgba(0,0,0,.6); }
.wheel-ov .wov-s > *{ transform:skewX(8deg); }
.wheel-ov .wov-s.azul{ border:2px solid var(--lu-azul); box-shadow:0 0 18px -4px var(--lu-azul); }
.wheel-ov .wov-s.rival{ border:2px solid var(--rc); box-shadow:0 0 18px -4px var(--rc); }
.wheel-ov .wov-s i{ font:800 italic clamp(.85rem,3.6vw,1.1rem)/1 'Syne',sans-serif; letter-spacing:0; text-transform:uppercase; color:#fff; max-width:34vw; }
.wheel-ov .wov-s b{ font:800 italic clamp(1.9rem,8.6vw,2.8rem)/1 'Syne',sans-serif; color:#fff; }
.wheel-ov .wov-s.azul b{ text-shadow:3px 3px 0 #1d4fb8, 0 0 16px rgba(59,130,246,.7); }
.wheel-ov .wov-s.rival b{ text-shadow:3px 3px 0 color-mix(in srgb, var(--rc) 80%, #000), 0 0 16px color-mix(in srgb, var(--rc) 60%, transparent); }
.wheel-ov .wov-s-sep{ width:auto; height:auto; background:none; font:800 italic clamp(1rem,4.4vw,1.4rem)/1 'Syne',sans-serif; color:#f6d06a; }
.wheel-ov .wov-hint{ margin-top:clamp(6px,1.4dvh,14px); font:700 clamp(.78rem,3.2vw,.95rem)/1 'DM Sans',sans-serif; letter-spacing:.1em; color:#bdb4a2; animation:none; }
.wheel-ov.show .wov-s-me{ animation:luDeIzq .42s var(--lu-cae) .3s both; }
.wheel-ov.show .wov-s-you{ animation:luDeDer .42s var(--lu-cae) .36s both; }
@keyframes luDeIzq{ from{ opacity:0; transform:skewX(-8deg) translateX(-60%); } to{ opacity:1; transform:skewX(-8deg); } }
@keyframes luDeDer{ from{ opacity:0; transform:skewX(-8deg) translateX(60%); } to{ opacity:1; transform:skewX(-8deg); } }
@keyframes luSube{ from{ opacity:0; transform:skewX(-8deg) translateY(14px); } to{ opacity:1; transform:skewX(-8deg); } }
/* el golpe de las cifras (duelo/juego-vivo.js) conserva la inclinación */
.wheel-ov .wov-s b.jv-golpe{ animation:luNum .36s var(--lu-pop); }
@keyframes luNum{ 0%{ transform:skewX(8deg) scale(1.6); } 100%{ transform:skewX(8deg); } }

/* ══════════ RETOS (paneles) ══════════ */
#retoOverlay.show:not(:has(.escena-rivales)){ background:#060608; backdrop-filter:none; -webkit-backdrop-filter:none; padding:0; align-items:stretch; }
body:not(.dfin-reto) #retoOverlay.show:not(:has(.escena-rivales))::before{ content:""; position:absolute; inset:-20% -40%; pointer-events:none; opacity:.16;
  background:repeating-linear-gradient(-62deg, transparent 0 34px, #d4a843 34px 37px, transparent 37px 80px); animation:luRayas 6s linear infinite; }
body:not(.dfin-reto) #retoPanel:not(.escena-rivales){ position:relative; width:100%; max-width:560px; max-height:none; height:100dvh; margin:0 auto; border:0; border-radius:0;
  background:none; box-shadow:none; padding:calc(env(safe-area-inset-top,0px) + 64px) clamp(16px,5vw,32px) calc(env(safe-area-inset-bottom,0px) + 22px);
  display:flex; flex-direction:column; justify-content:safe center; text-align:center; overflow-y:auto; }
#retoPanel .reto-kicker{ font:800 clamp(.78rem,3.2vw,.95rem)/1 'DM Sans',sans-serif; letter-spacing:.2em; color:#d4a843; }
/* 5-oct: a 10vw «ENCONTRADO» (una sola palabra) se salía por la derecha a 390 px; a 7,2vw (tope 2,4rem) cabe de 360 a tablet */
#retoPanel .reto-title{ font:800 italic clamp(1.6rem,7.2vw,2.4rem)/.98 'Syne',system-ui,sans-serif; overflow-wrap:break-word; text-transform:uppercase; letter-spacing:-.02em; color:#fff;
  transform:skewX(-8deg); margin:6px 0 10px; text-shadow:3px 3px 0 #8a5f10, 0 0 26px rgba(246,208,106,.55), 0 6px 18px rgba(0,0,0,.9); }
#retoPanel .reto-title b{ color:#ff9a3d; }
#retoPanel .reto-title.win{ color:#fff; text-shadow:3px 3px 0 #17803f, 0 0 26px rgba(74,222,128,.6), 0 6px 18px rgba(0,0,0,.9); }
#retoPanel .reto-title.loss{ color:#fff; text-shadow:3px 3px 0 #8a1f1f, 0 0 26px rgba(255,90,90,.6), 0 6px 18px rgba(0,0,0,.9); }
#retoPanel .reto-title.tie{ color:#fff; text-shadow:3px 3px 0 #8a5f10, 0 0 26px rgba(255,176,32,.6), 0 6px 18px rgba(0,0,0,.9); }
#retoPanel .reto-sub{ font:600 clamp(.95rem,4vw,1.15rem)/1.4 'DM Sans',sans-serif; color:#e6dfcf; }
#retoPanel .reto-sub b{ color:#fff; }
#retoPanel .reto-score{ font:800 italic clamp(3rem,15vw,5rem)/1 'Syne',sans-serif; color:#fff; transform:skewX(-8deg);
  text-shadow:3px 3px 0 #1d4fb8, 0 0 22px rgba(59,130,246,.6); margin:4px 0 10px; }
#retoPanel .reto-score span{ font-size:.42em; color:#bdb4a2; }
#retoPanel .reto-score b.them{ color:#fff; text-shadow:3px 3px 0 #b25b12, 0 0 22px rgba(255,138,31,.6); }
#retoPanel .reto-supera .reto-supera-l{ display:block; font:800 clamp(.78rem,3.2vw,.95rem)/1 'DM Sans',sans-serif; letter-spacing:.2em; text-transform:uppercase; color:#8cc4ff; margin-bottom:4px; }
#retoPanel .reto-lock{ font:700 clamp(.85rem,3.5vw,1rem)/1.3 'DM Sans',sans-serif; color:#e6e6ee; border-radius:8px; transform:skewX(-6deg); border:1px dashed rgba(212,168,67,.6); }
#retoPanel .reto-h2h{ font:800 clamp(.8rem,3.3vw,.95rem)/1.2 'DM Sans',sans-serif; color:#f6d06a; }
/* comparación: tú (azul) contra tu amigo (naranja), placas inclinadas */
#retoPanel .reto-cmp{ gap:10px; margin:6px 0 12px; }
#retoPanel .reto-side{ padding:8px 16px; border-radius:8px; transform:skewX(-8deg); background:rgba(0,0,0,.55); border:2px solid var(--lu-azul); box-shadow:0 0 16px -4px var(--lu-azul); }
#retoPanel .reto-side:last-child{ border-color:#ff8a1f; box-shadow:0 0 16px -4px #ff8a1f; }
#retoPanel .reto-side > *{ transform:skewX(8deg); }
#retoPanel .reto-side .rn{ font:800 italic clamp(.95rem,4vw,1.2rem)/1 'Syne',sans-serif; text-transform:uppercase; color:#fff; max-width:32vw; }
#retoPanel .reto-side .rt{ font:700 clamp(.8rem,3.3vw,.95rem)/1 'DM Sans',sans-serif; color:#cfc6b4; }
#retoPanel .reto-vs{ font:800 italic clamp(1rem,4.4vw,1.4rem)/1 'Syne',sans-serif; color:#f6d06a; }
/* botones: oro y verde, inclinados */
#retoPanel .reto-wa{ min-height:56px; border-radius:10px; transform:skewX(-6deg); font:900 clamp(.95rem,4vw,1.1rem)/1 'DM Sans',sans-serif; letter-spacing:.08em; }
#retoPanel .reto-wa > *{ transform:skewX(6deg); }
#retoPanel .reto-wa:active{ transform:skewX(-6deg) scale(.97); }
#retoPanel .reto-copy, #retoPanel .reto-home{ font:700 clamp(.9rem,3.8vw,1.05rem)/1.2 'DM Sans',sans-serif; border-radius:10px; transform:skewX(-6deg); }
#retoPanel .reto-input{ font:700 1.15rem/1 'DM Sans',sans-serif; padding:14px 16px; border-radius:10px; transform:skewX(-6deg); border:2px solid #d4a843; background:rgba(0,0,0,.6); color:#fff; }
/* el repaso */
#retoPanel .reto-cmp-head{ font:800 clamp(.75rem,3.1vw,.9rem)/1 'DM Sans',sans-serif; letter-spacing:.12em; color:#bdb4a2; }
#retoPanel .reto-row{ border-radius:8px; }
#retoPanel .reto-q{ font:600 clamp(.88rem,3.6vw,1rem)/1.3 'DM Sans',sans-serif; }
#retoPanel .reto-n{ font:800 italic clamp(.85rem,3.4vw,1rem)/1 'Syne',sans-serif; }
#retoPanel .reto-expl{ font:600 clamp(.85rem,3.5vw,.98rem)/1.35 'DM Sans',sans-serif; }
/* 2-oct · revisión pantalla a pantalla: el repaso se lee (≥15 px), las cabeceras
   «Tú / Rival» caben enteras y la pregunta con foto la lleva en pequeño */
#retoPanel .reto-q, #retoPanel .reto-expl{ font-size:max(15px, min(3.8vw, 1.02rem)); }
#retoPanel .reto-cmp-head, #retoPanel .reto-row{ grid-template-columns:22px 1fr 46px 46px; }
#retoPanel .reto-cmp-head span:nth-child(3), #retoPanel .reto-cmp-head span:nth-child(4){ font-size:12px; letter-spacing:.04em; }
#retoPanel .reto-foto{ display:block; width:min(100%,180px); aspect-ratio:4 / 3; object-fit:cover; border-radius:6px; margin:0 0 6px; background:#000; }
#retoPanel .reto-lock{ font-size:max(15px, min(3.8vw, 1rem)); }
/* el armado de Abandonar («✖ ¿Seguro?») se distingue */
.du-abandon.du-armado, #s4Abandon.du-armado, #s5Abandon.du-armado{ background:rgba(120,16,10,.85) !important; color:#fff !important; border-color:#ff5a48 !important; }
/* mis retos: las placas, inclinadas y con el color de su estado */
#retoPanel.escena-rivales .reto-item{ transform:skewX(-6deg); border-radius:10px; }
#retoPanel.escena-rivales .reto-item > *{ transform:skewX(6deg); }
#retoPanel.escena-rivales .rn{ font:800 italic clamp(1.05rem,4.4vw,1.3rem)/1.1 'Syne',sans-serif; text-transform:uppercase; }
#retoPanel.escena-rivales .re{ font:700 clamp(.8rem,3.3vw,.95rem)/1.2 'DM Sans',sans-serif; }
#retoPanel.escena-rivales .reto-item-lab small{ font-size:.75rem; color:#9c958a; }
/* «Cerrar» no se sale de la pantalla (el relleno se sumaba al 100 % del ancho) */
#retoPanel.escena-rivales .reto-home{ box-sizing:border-box; }
/* el estado de cada reto se lee (≥12 px) */
#retoPanel.escena-rivales .re{ font-size:max(12px, min(3.3vw, .95rem)); }
#retoPanel.escena-rivales .reto-item-btn{ font:900 clamp(.8rem,3.3vw,.95rem)/1 'DM Sans',sans-serif; letter-spacing:.08em; transform:skewX(6deg); }
/* entrada con impacto */
#retoOverlay.show #retoPanel .reto-title{ animation:luSlam .5s var(--lu-pop) .05s both; }
#retoOverlay.show #retoPanel .reto-score{ animation:luSlam .5s var(--lu-pop) .22s both; }
#retoOverlay.show #retoPanel .reto-side:first-child{ animation:luDeIzq .42s var(--lu-cae) .28s both; }
#retoOverlay.show #retoPanel .reto-side:last-child{ animation:luDeDer .42s var(--lu-cae) .34s both; }

/* ══════════ FIN DE PARTIDA ══════════ */
#dfin{ --rc:#e2574a; }
/* el rótulo, en texto (el pintado se quitó del dibujo con kie) */
#dfin .titulo img{ display:none; }
/* con el arte nuevo el rótulo iba pintado; ahora es texto, arriba, sobre el cielo del dibujo */
#dfin.arte-nuevo .titulo{ display:flex !important; position:absolute; left:0; right:0; top:calc(env(safe-area-inset-top,0px) + 76px); height:110px; margin:0; pointer-events:none; }
#dfin.arte-nuevo .titulo .rayos{ opacity:.55; }
#dfin .rotulo-txt{ position:relative; z-index:1; display:block; white-space:nowrap; text-align:center; transform:skewX(-8deg);
  font:800 italic 46px/1 'Syne',system-ui,sans-serif; text-transform:uppercase; letter-spacing:-.02em; color:#fff;
  -webkit-text-stroke:.03em #140c02; animation:dfLuSlam .6s var(--lu-pop) .55s both; }
#dfin .rotulo-txt:empty{ display:none; }
#dfin[data-estado="victoria"] .rotulo-txt{ text-shadow:4px 4px 0 #8a5f10, 0 0 30px rgba(246,208,106,.8), 0 0 60px rgba(74,222,128,.35), 0 8px 22px rgba(0,0,0,.9); }
#dfin[data-estado="derrota"] .rotulo-txt{ font-size:58px; text-shadow:4px 4px 0 #6b0d0d, 0 0 30px rgba(255,74,61,.75), 0 8px 22px rgba(0,0,0,.9); }
#dfin[data-estado="empate"] .rotulo-txt{ font-size:54px; text-shadow:4px 4px 0 #7a4a08, 0 0 30px rgba(255,176,32,.75), 0 8px 22px rgba(0,0,0,.9); }
@keyframes dfLuSlam{ 0%{ opacity:0; transform:skewX(-8deg) scale(2.4); } 60%{ opacity:1; transform:skewX(-8deg) scale(.93); } 100%{ opacity:1; transform:skewX(-8deg); } }
#dfin .chip-cab{ font-size:12px; }
/* el marcador: dos placas inclinadas */
#dfin .losa{ background:linear-gradient(180deg, rgba(14,13,20,.86), rgba(6,6,10,.94)); border-radius:10px; }
#dfin .lado{ flex-wrap:wrap; row-gap:4px; padding:6px 8px; border-radius:8px; transform:skewX(-8deg); background:rgba(0,0,0,.45); }
#dfin .lado > *{ transform:skewX(8deg); }
#dfin .lado > div:last-child{ flex:1 1 auto; min-width:0; }
#dfin .lado.tu .cinta, #dfin .lado.rv .cinta{ transform:none; animation:none; opacity:1; }
#dfin .lado.tu{ border:2px solid var(--lu-azul); box-shadow:0 0 16px -4px var(--lu-azul); }
#dfin .lado.rv{ border:2px solid var(--rc); box-shadow:0 0 16px -4px var(--rc); }
#dfin .rul{ width:46px; height:46px; }
#dfin .lado .cinta, #dfin .lado .cinta.largo, #dfin .lado .cinta.az, #dfin .lado .cinta.ro{ flex:1 0 100%; order:-1; text-align:inherit; display:block; max-width:100%; padding:0; background:none; box-shadow:none; clip-path:none; transform:none; border-radius:0;
  font:800 italic 15px/1.05 'Syne',system-ui,sans-serif; letter-spacing:-.01em; text-transform:uppercase; color:#fff; opacity:1; animation:none;
  overflow:hidden; text-overflow:clip; white-space:nowrap; }
#dfin .cinta.az{ text-shadow:2px 2px 0 #1d4fb8; }
#dfin .cinta.ro{ text-shadow:2px 2px 0 color-mix(in srgb, var(--rc) 80%, #000); }
#dfin .num{ font:800 italic 36px/1 'Syne',sans-serif; margin-top:2px; }
#dfin .lado.tu .num{ color:#fff; text-shadow:3px 3px 0 #1d4fb8, 0 0 14px rgba(59,130,246,.6); }
#dfin .lado.rv .num{ color:#fff; text-shadow:3px 3px 0 color-mix(in srgb, var(--rc) 80%, #000), 0 0 14px color-mix(in srgb, var(--rc) 60%, transparent); }
#dfin .rul.rv-c::after{ box-shadow:0 0 0 2px var(--rc), 0 0 14px var(--rc); }
#dfin .vs{ font:800 italic 20px/1 'Syne',sans-serif; border:0; background:none; box-shadow:none; color:#f6d06a; text-shadow:2px 2px 0 #6b4a10; padding:0 2px; }
#dfin .vs-col small{ font-size:12px; letter-spacing:.08em; }
#dfin .num small{ font-size:12px; }
#dfin .dato{ border-radius:8px; transform:skewX(-8deg); }
#dfin .dato > *{ transform:skewX(8deg); }
#dfin .dato b{ font:800 italic 20px/1 'Syne',sans-serif; }
#dfin .fila-datos .dato{ flex-direction:column; gap:3px; padding:6px 4px; }
#dfin .fila-datos .dato span{ font-size:12px; letter-spacing:.02em; max-width:100%; }
#dfin .fila-datos .dato b{ font-size:18px; }
#dfin .xp-linea{ font-size:12px; }
#dfin .mon span{ font-size:12px; letter-spacing:.06em; }
#dfin .df-link{ font-size:14px; }
#dfin .df-golpe{ display:inline-block; animation:dfLuNum .38s var(--lu-pop); }
#dfin .num.df-golpe{ display:block; }
@keyframes dfLuNum{ 0%{ transform:scale(1.7); } 100%{ transform:none; } }
#dfin .lado > * .df-golpe{ transform-origin:50% 60%; }
/* el panel del reto sobre la escena: letra mínima */
body.dfin-reto #retoPanel .reto-h2h{ font-size:12px; }
body.dfin-reto #retoPanel .reto-cmp-head::after{ font-size:12px; }
body.dfin-reto #retoPanel .reto-home{ font-size:14px; }
/* 2-oct · repaso abierto: había dos barras de scroll (el cajón y la lista) y
   «Volver al menú» se quedaba fuera de la pantalla. El cajón ya no se desplaza:
   la lista coge el alto que sobra y los botones quedan siempre a la vista. */
body.dfin-reto #retoPanel.df-open{ display:flex; flex-direction:column; overflow:hidden; max-height:calc(62dvh / var(--dfin-k, 1)); }
body.dfin-reto #retoPanel.df-open > *{ flex:none; }
body.dfin-reto #retoPanel.df-open > .reto-cmp-list{ flex:1 1 auto; min-height:0; max-height:none; }

/* tablet: todo crece con la pantalla (la escena del fin ya escala con --k) */
@media (min-width:700px){
  .wheel-ov .wov-card{ zoom:1.3; }
  .wheel-ov .wov-title{ font-size:3.6rem; }
  .wheel-ov .pwheel{ width:min(42vw,34dvh,320px); }
  body:not(.dfin-reto) #retoPanel:not(.escena-rivales){ max-width:none; }
  body:not(.dfin-reto) #retoPanel:not(.escena-rivales) > *{ zoom:1.3; width:min(100%,520px); margin-left:auto; margin-right:auto; }
  #retoPanel.escena-rivales .reto-muro, #retoPanel.escena-rivales .reto-home{ zoom:1.3; }
}
@media (min-width:980px){
  .wheel-ov .wov-card{ zoom:1.55; }
  body:not(.dfin-reto) #retoPanel:not(.escena-rivales) > *{ zoom:1.5; }
  #retoPanel.escena-rivales .reto-muro, #retoPanel.escena-rivales .reto-home{ zoom:1.5; }
}
@media (prefers-reduced-motion:reduce){
  .wheel-ov *, #retoPanel *, #dfin .rotulo-txt, #dfin .df-golpe, #retoOverlay::before{ animation:none !important; }
}

/* 2-oct · la frase del veredicto del reto («Empate a aciertos: has sido más
   rápido…») se lee: medía 13 px */
#dfin .sub{ font-size:15px; }
/* el nombre largo en la placa del marcador se corta con «…» y no a pelo */
#dfin .lado .cinta{ text-overflow:ellipsis !important; }
/* «RESULTADO PENDIENTE» no cabía a 360 y abría scroll de lado en el panel */
#retoPanel .reto-title.pend{ font-size:clamp(1.6rem,8vw,3rem); }
body:not(.dfin-reto) #retoPanel:not(.escena-rivales){ overflow-x:hidden; }
/* la foto del repaso, pequeña: es para reconocer la pregunta */
#retoPanel .reto-foto{ width:min(100%,140px); }