/* Mission 10.12 : premier écran, direction « l'écran de jeu ».
   --p vaut un pixel de la maquette (1440 x 900 sur ordinateur, 390 de large sur téléphone) : tout suit la fenêtre. */
:root{--nuit:#0c0620;--encre:#1c0a2e;--or:#ffc629;--creme:#fff4ea;--vert:#9ce8a6;--verre:rgba(10,5,26,.68);
  --entree:cubic-bezier(.22,1,.36,1);--expo:cubic-bezier(.19,1,.22,1);--texte:"Chakra Petch",ui-sans-serif,system-ui,sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--nuit);-webkit-text-size-adjust:100%}
body{font-family:var(--texte);color:var(--creme);background:var(--nuit);overflow-x:hidden}
::selection{background:var(--or);color:var(--encre)}
:focus-visible{outline:2px solid var(--or);outline-offset:3px}
img{display:block}
fieldset{border:0;min-width:0}

.mission{--p:min(100vw / 1440,100svh / 900);--h:72%;position:relative;height:100svh;min-height:560px;overflow:hidden;isolation:isolate}
.scene{position:absolute;inset:0}

/* Ciel : dégradé du soir, soleil sur l'horizon, trois nappes de brume qui dérivent sans jamais revenir en arrière */
.ciel{position:absolute;inset:0;overflow:hidden;background:
  radial-gradient(circle at 58% 72%,#fff1c9 0,#ffd58c 6%,#fca56e 13%,rgba(240,111,134,.6) 22%,rgba(240,111,134,0) 38%),
  linear-gradient(180deg,#130a35 0%,#2c1466 26%,#6b2492 48%,#bf3f8d 62%,#ee7388 70%,#f9a878 72%)}
.brume{position:absolute;left:0;width:200%;background-repeat:repeat-x;background-size:50% 100%;animation:derive linear infinite}
.b1{top:16%;height:15%;opacity:.55;animation-duration:70s;background-image:
  radial-gradient(ellipse 22% 26% at 20% 50%,rgba(255,170,190,.55),transparent 70%),radial-gradient(ellipse 30% 20% at 68% 40%,rgba(255,150,170,.4),transparent 70%)}
.b2{top:37%;height:12%;opacity:.65;animation-duration:46s;background-image:
  radial-gradient(ellipse 26% 24% at 35% 50%,rgba(255,196,160,.55),transparent 70%),radial-gradient(ellipse 18% 30% at 85% 60%,rgba(255,170,150,.45),transparent 70%)}
.b3{top:54%;height:9%;opacity:.75;animation-duration:32s;background-image:
  radial-gradient(ellipse 30% 30% at 55% 50%,rgba(255,214,170,.6),transparent 70%),radial-gradient(ellipse 16% 34% at 8% 50%,rgba(255,190,160,.5),transparent 70%)}
@keyframes derive{to{transform:translateX(-50%)}}

.monts{position:absolute;left:0;width:100%;height:calc(46 * var(--p));top:calc(var(--h) - 45 * var(--p));fill:#3d1a6c}

/* Sol : le lac au crépuscule, avec des reflets qui filent */
.sol{position:absolute;left:0;right:0;top:var(--h);bottom:0;overflow:hidden;border-top:1px solid rgba(255,226,190,.55);background:
  radial-gradient(ellipse 22% 90% at 58% 0%,rgba(255,176,122,.6),rgba(255,176,122,0) 70%),
  linear-gradient(180deg,#4a1a6e 0%,#24104a 22%,#120828 100%)}
.reflets{position:absolute;left:0;top:0;width:200%;height:60%;opacity:.8;animation:derive 30s linear infinite;background-repeat:repeat-x;background-size:50% 100%;
  background-image:
    radial-gradient(ellipse 5% 1.2px at 8% 9%,rgba(255,220,180,.8),transparent),radial-gradient(ellipse 8% 1.4px at 31% 5%,rgba(255,220,180,.7),transparent),
    radial-gradient(ellipse 4% 1.2px at 52% 13%,rgba(255,206,170,.7),transparent),radial-gradient(ellipse 7% 1.4px at 77% 7%,rgba(255,220,180,.75),transparent),
    radial-gradient(ellipse 6% 1.6px at 19% 27%,rgba(255,200,170,.55),transparent),radial-gradient(ellipse 9% 1.6px at 61% 31%,rgba(255,206,170,.5),transparent),
    radial-gradient(ellipse 5% 1.6px at 90% 24%,rgba(255,200,170,.5),transparent),radial-gradient(ellipse 8% 2px at 40% 52%,rgba(255,190,170,.36),transparent),
    radial-gradient(ellipse 10% 2px at 84% 60%,rgba(255,190,170,.3),transparent),radial-gradient(ellipse 7% 2px at 6% 74%,rgba(255,190,170,.24),transparent)}

/* Anneau de ramassage : il émet des ondes, et l'ombre du t-shirt suit sa rotation */
.halo{position:absolute;left:58%;top:80%;width:calc(380 * var(--p));height:calc(76 * var(--p));transform:translate(-50%,-50%)}
.halo b{position:absolute;inset:0;border-radius:50%;border:calc(3 * var(--p)) solid rgba(255,198,41,.95);
  background:radial-gradient(closest-side,rgba(255,198,41,.1) 0%,rgba(255,198,41,.2) 62%,rgba(255,198,41,.34) 100%);
  box-shadow:0 0 calc(30 * var(--p)) calc(6 * var(--p)) rgba(255,198,41,.5),inset 0 0 calc(24 * var(--p)) calc(2 * var(--p)) rgba(255,198,41,.35);
  animation:allume .45s var(--entree) both}
.halo b::after{content:"";position:absolute;inset:16% 12%;border-radius:50%;background:radial-gradient(closest-side,rgba(5,2,15,.66),rgba(5,2,15,0));transform:scaleX(var(--ombre,1))}
.halo i{position:absolute;inset:0;border-radius:50%;border:calc(2 * var(--p)) solid rgba(255,198,41,.8);opacity:0;animation:onde 3.3s linear infinite}
.halo i:nth-child(2){animation-delay:-1.1s}
.halo i:nth-child(3){animation-delay:-2.2s}
@keyframes onde{0%{transform:scale(1);opacity:.75}100%{transform:scale(1.8);opacity:0}}
@keyframes allume{from{opacity:0;scale:.6}to{opacity:1;scale:1}}

.faisceau{--course:calc(-300 * var(--p));position:absolute;left:58%;top:calc(80% - 330 * var(--p));width:calc(300 * var(--p));height:calc(330 * var(--p));transform:translateX(-50%);pointer-events:none;
  background:linear-gradient(180deg,rgba(255,198,41,0) 0%,rgba(255,198,41,.07) 55%,rgba(255,198,41,.24) 100%);
  -webkit-mask:radial-gradient(ellipse 50% 100% at 50% 100%,#000 30%,transparent 72%);mask:radial-gradient(ellipse 50% 100% at 50% 100%,#000 30%,transparent 72%)}
.faisceau i{position:absolute;bottom:0;width:calc(4 * var(--p));height:calc(4 * var(--p));border-radius:50%;background:#ffe9a8;opacity:0;animation:monte linear infinite}
.faisceau i:nth-child(1){left:24%;animation-duration:4.2s;animation-delay:-.4s}
.faisceau i:nth-child(2){left:38%;animation-duration:5.1s;animation-delay:-2.9s}
.faisceau i:nth-child(3){left:47%;animation-duration:3.6s;animation-delay:-1.7s}
.faisceau i:nth-child(4){left:55%;animation-duration:4.8s;animation-delay:-3.8s}
.faisceau i:nth-child(5){left:63%;animation-duration:3.9s;animation-delay:-.9s}
.faisceau i:nth-child(6){left:72%;animation-duration:5.4s;animation-delay:-4.4s}
.faisceau i:nth-child(7){left:31%;animation-duration:4.5s;animation-delay:-2.2s}
@keyframes monte{0%{transform:translateY(0);opacity:0}12%{opacity:.9}100%{transform:translateY(var(--course));opacity:0}}

/* T-shirt : un canevas 3D ; l'image fixe reste tant que la 3D n'est pas prête, ou si elle manque */
.tshirt{position:absolute;left:58%;top:3%;width:calc(620 * var(--p));aspect-ratio:1;transform:translateX(-50%);z-index:3;touch-action:pan-y;cursor:grab}
.tshirt.saisi{cursor:grabbing}
.tshirt canvas,.tshirt .fixe{position:absolute;inset:0;width:100%;height:100%}
.tshirt canvas{opacity:0}
.tshirt .fixe{transform:rotate(-3deg);object-fit:contain}
.tshirt.pret canvas{opacity:1}
.tshirt.pret .fixe{visibility:hidden}

.bandeau{position:absolute;left:0;right:0;top:32%;z-index:2;padding:calc(26 * var(--p)) calc(72 * var(--p)) calc(28 * var(--p));
  background:linear-gradient(90deg,rgba(8,4,22,.8) 0%,rgba(8,4,22,.74) 36%,rgba(8,4,22,0) 66%);animation:deroule .6s var(--expo) .15s both}
.bandeau h1 img{height:calc(72 * var(--p));width:auto;animation:glisse .55s var(--expo) .28s both}
.lot{margin-top:calc(16 * var(--p));font:600 calc(28 * var(--p))/1.15 var(--texte);animation:arrive .45s var(--entree) .5s both}
@keyframes deroule{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes glisse{from{opacity:0;translate:calc(-28 * var(--p)) 0}to{opacity:1;translate:0 0}}
@keyframes arrive{from{opacity:0;translate:0 calc(12 * var(--p))}to{opacity:1;translate:0 0}}

.tete{position:absolute;left:calc(56 * var(--p));top:calc(26 * var(--p));z-index:5;display:flex;align-items:center;gap:calc(34 * var(--p));animation:arrive .45s var(--entree) .55s both}
.logo img{height:calc(22 * var(--p));width:auto}
.onglets{display:flex;gap:calc(4 * var(--p));font:600 max(12px,calc(14 * var(--p)))/1 var(--texte);letter-spacing:.08em;text-transform:uppercase}
.onglets a{flex:none;display:grid;place-items:center;height:calc(42 * var(--p));padding:0 calc(18 * var(--p));background:var(--verre);color:var(--creme);
  text-decoration:none;white-space:nowrap;border-top:calc(3 * var(--p)) solid transparent;transition:background-color .2s ease,color .2s ease}
.onglets .actif{background:var(--creme);color:var(--encre);border-top-color:var(--or)}

.hud{position:absolute;right:calc(56 * var(--p));top:calc(26 * var(--p));z-index:5;display:grid;justify-items:end;gap:calc(9 * var(--p));animation:arrive .45s var(--entree) .62s both}
.etoiles{display:flex;gap:calc(6 * var(--p))}
.etoiles svg{width:calc(30 * var(--p));height:calc(30 * var(--p));overflow:visible;fill:rgba(255,198,41,0);stroke:rgba(255,244,234,.62);stroke-width:1.6;
  filter:drop-shadow(0 2px 3px rgba(5,2,15,.5));animation:apercu 7s linear 1.6s infinite}
.etoiles .gagnee{fill:var(--or);stroke:var(--or);animation-name:eclat}
.etoiles svg:nth-child(2){animation-delay:1.82s}
.etoiles svg:nth-child(3){animation-delay:2.04s}
.etoiles svg:nth-child(4){animation-delay:2.26s}
.etoiles svg:nth-child(5){animation-delay:2.48s}
@keyframes apercu{0%{fill:rgba(255,198,41,0)}3%{fill:rgba(255,198,41,.6)}9%,100%{fill:rgba(255,198,41,0)}}
@keyframes eclat{0%{scale:1}2.5%{scale:1.22}7%,100%{scale:1}}
.regle{font:600 max(11px,calc(13 * var(--p)))/1 var(--texte);letter-spacing:.1em;text-transform:uppercase;text-shadow:0 1px 3px rgba(5,2,15,.75)}
.argent{display:flex;align-items:center}
.argent img{height:calc(35 * var(--p));width:auto;margin-left:calc(-5 * var(--p))}
.argent .chf{margin-left:calc(5 * var(--p))}
.argent span,.cta em span{display:flex}

.achat{position:absolute;left:calc(72 * var(--p));top:calc(32% + 222 * var(--p));z-index:4;display:grid;grid-template-columns:auto auto;grid-template-areas:"tailles quantite" "cta cta";justify-content:start;gap:calc(12 * var(--p));animation:arrive .45s var(--entree) .7s both}
.tailles{grid-area:tailles;display:flex;border:1.5px solid rgba(255,244,234,.5);background:var(--verre)}
.tailles legend{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.tailles label{position:relative;display:block;cursor:pointer;border-left:1.5px solid rgba(255,244,234,.25)}
.tailles label:first-of-type{border-left:0}
.tailles input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer}
.tailles span{display:grid;place-items:center;min-width:calc(54 * var(--p));height:calc(54 * var(--p));padding:0 calc(10 * var(--p));
  font:600 max(13px,calc(16 * var(--p)))/1 var(--texte);letter-spacing:.06em;transition:background-color .15s ease,color .15s ease}
.tailles input:checked + span{background:var(--creme);color:var(--encre)}
.tailles input:focus-visible + span{outline:2px solid var(--or);outline-offset:-4px}
/* plusieurs t-shirts : le nombre roule, le prix, les étoiles et la règle suivent */
.quantite{grid-area:quantite;display:flex;height:calc(54 * var(--p));border:1.5px solid rgba(255,244,234,.5);background:var(--verre)}
.quantite button{display:grid;place-items:center;width:calc(50 * var(--p));padding:0;border:0;background:none;color:var(--creme);cursor:pointer;touch-action:manipulation;transition:background-color .15s ease,color .15s ease}
.quantite svg{width:calc(14 * var(--p));height:calc(14 * var(--p));fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:square;transition:transform .14s var(--entree)}
.quantite button:active svg{transform:scale(.78);transition-duration:0s}
.quantite button[aria-disabled="true"]{color:rgba(255,244,234,.28);cursor:default}
.quantite button:focus-visible{outline:2px solid var(--or);outline-offset:-4px}
.nombre{display:grid;place-items:center;overflow:hidden;min-width:calc(44 * var(--p));border-inline:1.5px solid rgba(255,244,234,.25);font:700 max(15px,calc(20 * var(--p)))/1 var(--texte);font-variant-numeric:tabular-nums}
.nombre span{grid-area:1/1}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.cta{grid-area:cta;justify-content:space-between;position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:calc(16 * var(--p));height:calc(57 * var(--p));padding:0 calc(22 * var(--p)) 0 calc(26 * var(--p));
  border:0;background:var(--or);color:var(--encre);font:700 max(14px,calc(18 * var(--p)))/1 var(--texte);letter-spacing:.05em;text-transform:uppercase;cursor:pointer;
  touch-action:manipulation;box-shadow:0 calc(14 * var(--p)) calc(26 * var(--p)) rgba(5,2,15,.45);transition:transform .14s var(--entree),background-color .2s ease}
.cta:active{transform:scale(.97);transition-duration:0s}
.cta em{display:flex;align-items:baseline;gap:calc(6 * var(--p));padding-left:calc(16 * var(--p));border-left:2px solid rgba(28,10,46,.25);font-style:normal}
.cta em img{height:calc(21 * var(--p));width:auto}
.cta small{font:700 max(12px,calc(15 * var(--p)))/1 var(--texte);letter-spacing:.08em}
.cta::after{content:"";position:absolute;top:0;bottom:0;left:0;width:34%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:translateX(-130%);animation:reflet 5.5s linear 2s infinite}
@keyframes reflet{0%,80%{transform:translateX(-130%)}100%{transform:translateX(330%)}}

.radar{position:absolute;left:calc(56 * var(--p));bottom:calc(40 * var(--p));width:calc(250 * var(--p));z-index:4;animation:arrive .45s var(--entree) .78s both}
.radar svg{display:block;width:100%;height:auto;border:2px solid rgba(8,4,22,.85);box-shadow:0 calc(12 * var(--p)) calc(24 * var(--p)) rgba(5,2,15,.45)}
.radar p{margin-top:calc(9 * var(--p));font:600 max(10px,calc(12 * var(--p)))/1 var(--texte);letter-spacing:.16em;text-transform:uppercase;text-shadow:0 1px 3px rgba(5,2,15,.75)}
.route{fill:none;stroke:var(--or);stroke-width:4;stroke-linejoin:round;stroke-linecap:round}
.appel{fill:none;stroke:var(--or);stroke-width:2;transform-box:fill-box;transform-origin:center;animation:appel 2.6s linear infinite}
@keyframes appel{0%{transform:scale(1);opacity:.9}100%{transform:scale(2.7);opacity:0}}
.joueur{fill:var(--creme);offset-path:path("M150 130l-38-12-20-26-4-26-16-22 14-22");offset-rotate:auto 90deg;animation:trajet 11s linear infinite}
@keyframes trajet{0%{offset-distance:0%;opacity:0}4%{opacity:1}90%{offset-distance:100%;opacity:1}96%,100%{offset-distance:100%;opacity:0}}

.soustitre{position:absolute;left:50%;bottom:calc(58 * var(--p));z-index:4;width:calc(580 * var(--p));min-height:1.3em;transform:translateX(-50%);text-align:center;
  font:600 max(14px,calc(21 * var(--p)))/1.3 var(--texte);text-shadow:0 2px 4px rgba(5,2,15,.9)}
.soustitre b{color:var(--or);font-weight:700}
.soustitre .mot{display:inline-block;white-space:nowrap}
.soustitre .c{display:inline-block;animation:lettre .34s var(--entree) both}
@keyframes lettre{from{opacity:0;translate:0 .45em}to{opacity:1;translate:0 0}}

.barres{position:absolute;right:calc(56 * var(--p));bottom:calc(40 * var(--p));z-index:4;width:calc(356 * var(--p));display:grid;gap:calc(5 * var(--p));animation:arrive .45s var(--entree) .82s both}
.barres div{display:flex;align-items:center;justify-content:space-between;gap:12px;height:calc(40 * var(--p));padding:0 calc(14 * var(--p));background:var(--verre)}
.barres dt{font:600 max(10px,calc(12 * var(--p)))/1 var(--texte);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;color:rgba(255,244,234,.88)}
.barres dd{font:700 max(13px,calc(19 * var(--p)))/1 var(--texte);letter-spacing:.02em;font-variant-numeric:tabular-nums;white-space:nowrap}

.mention{position:absolute;left:50%;bottom:calc(14 * var(--p));z-index:4;transform:translateX(-50%);white-space:nowrap;font:500 max(11px,calc(12 * var(--p)))/1.2 var(--texte);color:rgba(255,244,234,.82)}

@media (hover:hover) and (pointer:fine){
  .onglets a:not(.actif):hover{background:rgba(255,244,234,.18)}
  .tailles label:hover input:not(:checked) + span{background:rgba(255,244,234,.14)}
  .quantite button:not([aria-disabled="true"]):hover{background:rgba(255,244,234,.14)}
  .cta:hover{background:#ffd457}
}

@media (max-width:700px){
  .mission{--p:calc(100vw / 390);height:auto;min-height:100svh;display:flex;flex-direction:column;padding-bottom:calc(142 * var(--p));background:#120828}
  /* la scène prend ce que le titre, les barres et la barre d'achat laissent du premier écran */
  .scene{--h:87%;--sc:clamp(calc(280 * var(--p)),calc(100svh - 434 * var(--p)),calc(440 * var(--p)));position:relative;inset:auto;flex:none;height:var(--sc)}
  .ciel{background:
    radial-gradient(circle at 50% 87%,#fff1c9 0,#ffd58c 7%,#fca56e 15%,rgba(240,111,134,.6) 26%,rgba(240,111,134,0) 46%),
    linear-gradient(180deg,#130a35 0%,#2c1466 34%,#6b2492 58%,#bf3f8d 74%,#ee7388 84%,#f9a878 87%)}
  .sol{background:radial-gradient(ellipse 40% 100% at 50% 0%,rgba(255,176,122,.6),rgba(255,176,122,0) 70%),linear-gradient(180deg,#4a1a6e 0%,#24104a 40%,#120828 100%)}
  .monts{height:calc(28 * var(--p));top:calc(var(--h) - 27 * var(--p))}
  .halo{left:50%;top:94%;width:calc(250 * var(--p));height:calc(42 * var(--p))}
  .halo b{border-width:2px}
  .faisceau{--course:calc(-170 * var(--p));left:50%;top:calc(94% - 190 * var(--p));width:calc(190 * var(--p));height:calc(190 * var(--p))}
  .tshirt{left:50%;top:auto;bottom:calc(var(--sc) * .07);width:min(calc(330 * var(--p)),calc(var(--sc) - 56 * var(--p)))}
  .bandeau{position:relative;top:auto;padding:calc(12 * var(--p)) calc(16 * var(--p)) calc(14 * var(--p));background:linear-gradient(90deg,rgba(8,4,22,.82) 0%,rgba(8,4,22,.74) 70%,rgba(8,4,22,.3) 100%)}
  .bandeau h1 img{height:calc(45 * var(--p))}
  .lot{margin-top:calc(9 * var(--p));font-size:calc(19 * var(--p))}
  .soustitre{position:relative;left:auto;bottom:auto;width:auto;transform:none;margin:calc(10 * var(--p)) calc(16 * var(--p)) 0;text-align:left;font-size:max(14px,calc(15 * var(--p)))}
  .barres{position:relative;right:auto;bottom:auto;width:auto;margin:calc(10 * var(--p)) calc(16 * var(--p)) 0;gap:calc(4 * var(--p))}
  .barres div{height:calc(30 * var(--p));padding:0 calc(10 * var(--p))}
  .barres dt{font-size:max(10px,calc(10.5 * var(--p)))}
  .barres dd{font-size:max(13px,calc(15 * var(--p)))}
  .mention{position:relative;left:auto;bottom:auto;transform:none;white-space:normal;margin:calc(12 * var(--p)) calc(16 * var(--p)) calc(12 * var(--p));font-size:11px}
  .tete{left:calc(16 * var(--p));right:0;top:calc(14 * var(--p));display:block}
  .logo{display:inline-block}
  .logo img{height:calc(17 * var(--p))}
  .onglets{margin-top:calc(13 * var(--p));padding-right:calc(16 * var(--p));overflow-x:auto;overflow-y:hidden;scrollbar-width:none;font-size:12px}
  .onglets::-webkit-scrollbar{display:none}
  .onglets a{height:calc(32 * var(--p));padding:0 calc(12 * var(--p));border-top-width:2px}
  .hud{right:calc(16 * var(--p));top:calc(12 * var(--p));gap:0}
  .etoiles{gap:calc(4 * var(--p))}
  .etoiles svg{width:calc(19 * var(--p));height:calc(19 * var(--p))}
  .regle,.radar{display:none}
  .argent{position:absolute;right:0;top:calc(72 * var(--p))}
  .argent img{height:calc(22 * var(--p));margin-left:calc(-3 * var(--p))}
  .achat{position:fixed;left:0;right:0;top:auto;bottom:0;z-index:20;grid-template-columns:1fr auto;gap:calc(12 * var(--p));
    padding:calc(12 * var(--p)) calc(16 * var(--p)) max(calc(18 * var(--p)),env(safe-area-inset-bottom));background:var(--nuit);border-top:1px solid rgba(255,244,234,.14)}
  .tailles{width:100%}
  .tailles label{flex:1}
  .tailles span{min-width:0;height:calc(42 * var(--p));padding:0;font-size:15px}
  .quantite{height:calc(42 * var(--p))}
  .quantite button{width:calc(38 * var(--p))}
  .nombre{min-width:calc(28 * var(--p));font-size:16px}
  .cta{width:100%;justify-content:space-between;height:calc(56 * var(--p));font-size:18px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* Rien ne dépasse en largeur : les nappes du ciel faisaient défiler la page de gauche à droite sur téléphone (11/11).
   clip plutôt que hidden : ne crée pas de conteneur de défilement, les éléments collants restent collants. */
html,body{overflow-x:hidden;overflow-x:clip}
.ciel-nuit{overflow-x:hidden;overflow-x:clip}