*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; padding:0; }
body{
  font-family:'Arial Black','Segoe UI',system-ui,-apple-system,sans-serif; font-weight:900;
  background: radial-gradient(1200px 800px at 50% -10%, #ff3b3b 0%, #c40f0f 45%, #6d0505 100%) fixed #6d0505;
  color:#fff; min-height:100vh; overflow-x:hidden;
  user-select:none; -webkit-user-select:none; touch-action:manipulation;
}
body::before{ content:''; position:fixed; inset:0; z-index:1; pointer-events:none;
  background: repeating-linear-gradient(-45deg, rgba(255,255,255,.04) 0 14px, transparent 14px 34px); }
:root{ --cw: clamp(58px, 18vw, 120px); --pcw: clamp(56px, 15vw, 96px); --gold:#ffd400; }
@media (min-width:700px){ :root{ --cw: clamp(84px, 12vw, 132px); } }
.hidden{ display:none !important; }

/* ---------- ANUNCIOS (banner inferior) ---------- */
#pp-ad-banner{ position:fixed; left:0; right:0; bottom:0; z-index:75; min-height:56px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.55); border-top:2px solid rgba(255,212,0,.35);
  padding-bottom: env(safe-area-inset-bottom); }
#pp-ad-banner .adsbygoogle{ display:block; width:100%; height:56px; }
body.pp-ad-space{ padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
.langbtn{ position:fixed; top:10px; right:10px; z-index:80; font-family:inherit; font-weight:900; cursor:pointer;
  background:rgba(0,0,0,.55); color:var(--gold); border:2px solid var(--gold); border-radius:999px;
  padding:7px 14px; font-size:14px; letter-spacing:1px; box-shadow:0 4px 14px rgba(0,0,0,.4);
  text-decoration:none; display:inline-flex; align-items:center; }
.langbtn:active{ transform:scale(.94); }

/* ---------- ANUNCIOS LATERALES (solo web, pantallas anchas) ---------- */
.pp-ad-rail{ position:fixed; top:50%; transform:translateY(-50%); z-index:70; width:160px; display:none; }
.pp-ad-rail.left{ left:16px; }
.pp-ad-rail.right{ right:16px; }
.pp-ad-rail .adsbygoogle{ display:block; width:160px; height:600px; }
/* aparecen solo cuando hay hueco a los lados del juego (960px) y AdSense está activo */
@media (min-width:1330px){ body.pp-rails-on .pp-ad-rail{ display:block; } }

/* ---------- CONTENIDO SEO (solo web; oculto en la app Android) ---------- */
.seo{ position:relative; z-index:10; max-width:820px; margin:26px auto 0; padding:22px 18px 40px;
  text-align:left; font-weight:700; line-height:1.6; color:rgba(255,255,255,.92);
  border-top:2px solid rgba(255,212,0,.28); }
.seo h2{ color:var(--gold); font-size:clamp(19px,3.4vw,26px); margin:24px 0 8px; text-shadow:2px 2px 0 #6d0000; }
.seo h3{ color:var(--gold); font-size:clamp(15px,2.6vw,19px); margin:16px 0 4px; }
.seo p{ font-size:clamp(13px,2.2vw,16px); margin:6px 0; }
.seo ul{ margin:6px 0 6px 2px; padding-left:20px; }
.seo li{ font-size:clamp(13px,2.2vw,16px); margin:4px 0; }
.seo b{ color:var(--gold); }
.seo .warn18{ margin-top:22px; padding:12px 14px; border-radius:14px; background:rgba(0,0,0,.35);
  border:2px solid rgba(255,212,0,.45); font-size:clamp(12px,2vw,14px); }
.seo .foot{ margin-top:20px; font-size:12px; opacity:.7; }
.seo a{ color:var(--gold); }
/* dentro de la app nativa no mostramos nada de web (rieles ni texto SEO) */
html.pp-native .web-only{ display:none !important; }
/* durante la partida (cualquier pantalla que no sea el menú) se oculta el texto SEO */
body.pp-playing .seo{ display:none !important; }

/* ---------- FONDO ---------- */
.cheers{ position:fixed; inset:0; z-index:0; display:flex; align-items:center; justify-content:center; pointer-events:none; opacity:.5; }
.mug{ font-size: clamp(90px, 30vmin, 260px); line-height:1; transform-origin:50% 90%;
  filter: drop-shadow(0 10px 30px rgba(0,0,0,.45)) saturate(1.2); }
.mug.left{ animation: clinkL 2.6s ease-in-out infinite; }
.mug.right{ animation: clinkR 2.6s ease-in-out infinite; }
@keyframes clinkL{ 0%,100%{ transform: translateX(20%) rotate(-22deg);} 42%,58%{ transform: translateX(-6%) rotate(7deg);} }
@keyframes clinkR{ 0%,100%{ transform: translateX(-20%) rotate(22deg);} 42%,58%{ transform: translateX(6%) rotate(-7deg);} }
.salud{ position:absolute; top: calc(50% - clamp(95px, 27vmin, 240px)); font-size: clamp(22px, 6vmin, 54px);
  color:var(--gold); text-shadow: 3px 3px 0 #7a0000, 0 0 25px rgba(255,212,0,.8);
  opacity:0; animation: saludPop 2.6s ease-in-out infinite; }
@keyframes saludPop{ 0%,38%,74%,100%{ opacity:0; transform: translateY(8px) scale(.6) rotate(-6deg);}
  46%,64%{ opacity:1; transform: translateY(-8px) scale(1.15) rotate(-6deg);} }
.bubble{ position:fixed; bottom:-40px; border-radius:50%; z-index:0; pointer-events:none;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.9), rgba(255,212,0,.35)); animation: rise linear infinite; }
@keyframes rise{ to{ transform: translateY(-118vh); } }

/* ---------- ESTRUCTURA ---------- */
#app{ position:relative; z-index:10; width:100%; max-width:960px; margin:0 auto; padding:14px 14px 46px; text-align:center; }
.screen{ animation: fadeUp .4s ease-out; }
@keyframes fadeUp{ from{ opacity:0; transform: translateY(18px);} }
.logo{ font-size: clamp(46px, 13vw, 120px); line-height:.95; color:var(--gold); margin:10px 0 4px; letter-spacing:2px;
  text-shadow: 4px 4px 0 #7a0000, 8px 8px 0 rgba(0,0,0,.35), 0 0 40px rgba(255,212,0,.5);
  animation: wobble 3s ease-in-out infinite; }
@keyframes wobble{ 0%,100%{ transform: rotate(-2deg) scale(1);} 50%{ transform: rotate(2deg) scale(1.03);} }
.tag{ font-size: clamp(14px, 2.8vw, 22px); text-shadow:2px 2px 0 rgba(0,0,0,.4); margin:6px 0 16px; }
.tiny{ font-size:12px; opacity:.75; margin-top:18px; font-weight:700; line-height:1.6; }
.tiny2{ font-size:11px; opacity:.75; margin:6px 0; font-weight:700; }
.sec-title{ color:var(--gold); font-size:clamp(15px,2.8vw,20px); letter-spacing:2px; margin:16px 0 10px; text-shadow:2px 2px 0 #6d0000; }

/* ---------- SETUP ---------- */
.modes{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-bottom:6px; }
.mode-card{ position:relative; flex:1; min-width:240px; max-width:340px; cursor:pointer; font-family:inherit;
  background:rgba(0,0,0,.35); color:#fff; border:3px solid rgba(255,255,255,.25); border-radius:18px;
  padding:14px; text-align:center; transition:.15s; }
.mode-card.selected::after{ content:"✓"; position:absolute; top:8px; right:10px; width:28px; height:28px;
  border-radius:50%; background:var(--gold); color:#8f0000; font-size:17px; font-weight:900;
  display:flex; align-items:center; justify-content:center; box-shadow:0 2px 8px rgba(0,0,0,.45); }
.mode-card .m-emoji{ font-size:40px; }
.mode-card .m-name{ font-size:clamp(17px,3vw,22px); color:var(--gold); margin:4px 0; letter-spacing:1px; }
.mode-card .m-desc{ font-size:clamp(11px,2vw,13px); font-weight:700; opacity:.85; line-height:1.45; }
.mode-card.selected{ border-color:var(--gold); background:rgba(255,212,0,.14); box-shadow:0 0 26px rgba(255,212,0,.45); transform:scale(1.03); }
.rules{ max-width:620px; margin:0 auto 18px; display:flex; flex-direction:column; gap:6px; text-align:left; }
.rule{ background:rgba(0,0,0,.32); border:2px solid rgba(255,212,0,.45); border-radius:14px;
  padding:8px 12px; font-size:clamp(12px,2.3vw,15px); font-weight:700; }
.rule b{ color:var(--gold); }
.rn{ display:inline-flex; width:22px; height:22px; border-radius:50%; background:var(--gold); color:#8f0000;
  align-items:center; justify-content:center; font-size:13px; margin-right:6px; }
.countpick{ display:flex; align-items:center; justify-content:center; gap:18px; margin-bottom:14px; }
.countnum{ font-size:clamp(34px,8vw,54px); color:var(--gold); min-width:64px; text-shadow:3px 3px 0 #6d0000; }
.names{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:8px; max-width:660px; margin:0 auto 20px; }
.namein{ display:flex; align-items:center; gap:8px; background:rgba(0,0,0,.32); border:2px solid rgba(255,212,0,.45);
  border-radius:14px; padding:9px 12px; font-size:18px; }
.namein input{ flex:1; min-width:0; background:transparent; border:none; outline:none; color:var(--gold);
  font-family:inherit; font-weight:900; font-size:16px; }
.namein input::placeholder{ color:rgba(255,255,255,.5); font-weight:700; }
.namein .charcount{ font-size:11px; font-weight:700; color:var(--gold); opacity:.6; min-width:34px; text-align:right; }
.histbtn{ font-family:inherit; font-weight:900; cursor:pointer; border:2px solid rgba(255,212,0,.5);
  background:rgba(0,0,0,.35); color:var(--gold); border-radius:999px; padding:9px 18px; font-size:15px; margin-top:10px; }
.histbtn:active{ transform:scale(.96); }
.hist-item{ background:rgba(0,0,0,.18); border-radius:12px; padding:9px 12px; margin:7px 0; text-align:left; }
.hist-item .hi-top{ display:flex; justify-content:space-between; gap:8px; font-size:13px; opacity:.85; }
.hist-item .hi-champ{ color:#a00d0d; font-weight:900; margin:2px 0; }
.hist-item .hi-players{ font-size:13px; opacity:.9; }

/* ---------- BOTONES ---------- */
.btn{ font-family:inherit; font-weight:900; cursor:pointer; border:none; border-radius:16px;
  background: linear-gradient(180deg,#ffe25c,#ffc400); color:#8f0000; letter-spacing:1px;
  font-size: clamp(17px, 2.6vw, 24px); padding:14px 22px;
  box-shadow: 0 6px 0 #b27f00, 0 10px 24px rgba(0,0,0,.35);
  transition: transform .12s, box-shadow .12s, filter .12s; }
.btn:hover{ transform: translateY(-2px) scale(1.02); filter:brightness(1.05); }
.btn:active{ transform: translateY(3px); box-shadow: 0 2px 0 #b27f00, 0 4px 10px rgba(0,0,0,.3); }
.btn:disabled{ opacity:.45; cursor:default; transform:none; }
.btn.big{ font-size: clamp(19px, 3.4vw, 29px); padding:18px 30px; animation: pulseBtn 1.6s infinite; }
@keyframes pulseBtn{ 0%,100%{ box-shadow:0 6px 0 #b27f00, 0 0 0 0 rgba(255,212,0,.55);}
  50%{ box-shadow:0 6px 0 #b27f00, 0 0 0 18px rgba(255,212,0,0);} }
.choices{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:16px; }
.choice{ min-width:150px; font-size: clamp(18px, 3vw, 26px); }
.choice.c-red{ background:linear-gradient(180deg,#ff7a6b,#e11d1d); color:#fff; box-shadow:0 6px 0 #8f0000,0 10px 24px rgba(0,0,0,.35); text-shadow:1px 1px 0 rgba(0,0,0,.35); }
.choice.c-black{ background:linear-gradient(180deg,#4a4a4a,#111); color:var(--gold); box-shadow:0 6px 0 #000,0 10px 24px rgba(0,0,0,.35); }
.choice.suit{ min-width:0; width: clamp(72px, 19vw, 104px); padding:10px 6px; display:flex; flex-direction:column; align-items:center; gap:2px;
  font-size: clamp(26px, 6vw, 38px); line-height:1; }
.choice.suit small{ font-size: clamp(9px, 1.8vw, 12px); letter-spacing:.5px; }
.choice.suit.s-red{ background:linear-gradient(180deg,#ff7a6b,#e11d1d); color:#fff; box-shadow:0 6px 0 #8f0000,0 10px 24px rgba(0,0,0,.35); }
.choice.suit.s-blk{ background:linear-gradient(180deg,#4a4a4a,#111); color:var(--gold); box-shadow:0 6px 0 #000,0 10px 24px rgba(0,0,0,.35); }
.stepbtn{ width:38px; height:38px; border-radius:12px; border:none; font-size:22px; font-weight:900; cursor:pointer;
  background:#8f0000; color:var(--gold); box-shadow:0 3px 0 #5c0000; font-family:inherit; flex:none; }
.stepbtn:active{ transform:translateY(2px); box-shadow:none; }
.stepbtn:disabled{ opacity:.35; cursor:default; }
.stepbtn.big{ width:56px; height:56px; font-size:32px; border-radius:16px; }
.stepbtn.sm{ width:30px; height:30px; font-size:17px; border-radius:9px; }

/* ---------- HUD ---------- */
.hud{ display:flex; gap:8px; justify-content:center; align-items:center; flex-wrap:wrap; margin-top:4px; }
.chip{ background:rgba(0,0,0,.38); border:2px solid rgba(255,212,0,.5); border-radius:999px;
  padding:6px 14px; font-size: clamp(12px, 1.9vw, 15px); color:#fff; font-family:inherit; font-weight:900; }
.chip b{ color:var(--gold); }
.chipbtn{ cursor:pointer; }
.round-title{ text-align:center; color:var(--gold); font-size: clamp(18px, 4.2vw, 32px);
  text-shadow: 3px 3px 0 #6d0000; margin:12px 0 2px; letter-spacing:1px; animation: wobble 3s infinite; }
.turnbanner{ margin-top:10px; }
.tb-small{ font-size:clamp(11px,2.2vw,15px); letter-spacing:3px; opacity:.9; }
.tb-name{ font-size:clamp(26px,6.5vw,46px); color:var(--gold); text-shadow:3px 3px 0 #6d0000; animation:wobble 3s infinite; }
.pchips,.pychips{ display:flex; gap:6px; justify-content:center; flex-wrap:wrap; margin:10px 0; }
.pchip{ font-family:inherit; font-weight:900; cursor:pointer; border-radius:999px; border:2px solid rgba(255,212,0,.4);
  background:rgba(0,0,0,.35); color:#fff; font-size:clamp(11px,2vw,14px); padding:5px 11px; }
.pchip.current{ border-color:var(--gold); background:rgba(255,212,0,.18); color:var(--gold); animation:slotPulse 1.4s infinite; }

/* ---------- CARTAS ---------- */
.slots{ display:flex; gap: clamp(6px, 1.6vw, 18px); justify-content:center; margin:14px 0 6px; }
.slot{ width:var(--cw); height: calc(var(--cw)*1.42); border-radius:12px; border:3px dashed rgba(255,255,255,.35);
  position:relative; perspective:800px; }
.slot.active{ border:3px solid var(--gold); animation: slotPulse 1.2s infinite; }
@keyframes slotPulse{ 0%,100%{ box-shadow:0 0 16px rgba(255,212,0,.45);} 50%{ box-shadow:0 0 34px rgba(255,212,0,.9);} }
.slot .num{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size: calc(var(--cw)*.45); color:rgba(255,255,255,.22); }
.card{ position:absolute; inset:0; transform-style:preserve-3d; transition: transform .55s cubic-bezier(.3,1.4,.5,1);
  animation: dealIn .35s ease-out; }
@keyframes dealIn{ from{ transform: translateY(-70px) scale(.5) rotate(10deg); opacity:0; } }
.card.flipped{ transform: rotateY(180deg); }
.face{ position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  border-radius:12px; border:3px solid #fff; box-shadow: 0 8px 20px rgba(0,0,0,.4); }
.back{ background: repeating-linear-gradient(45deg, #d01111 0 10px, #a30b0b 10px 20px);
  display:flex; align-items:center; justify-content:center; }
.back-logo{ width:58%; aspect-ratio:1; border-radius:50%; background:#7a0000; border:3px solid var(--gold);
  display:flex; align-items:center; justify-content:center; font-size: calc(var(--cw)*.32); }
.front{ background:#fffdf5; transform: rotateY(180deg); display:flex; align-items:center; justify-content:center; }
.front.red{ color:#e11d1d; } .front.black{ color:#161616; }
.big{ font-size: calc(var(--cw)*.58); line-height:1; }
.corner{ position:absolute; display:flex; flex-direction:column; align-items:center; line-height:1; font-size: calc(var(--cw)*.19); }
.corner span{ font-size: calc(var(--cw)*.17); }
.tl{ top:5%; left:8%; } .br{ bottom:5%; right:8%; transform:rotate(180deg); }
.card.goodglow .front{ box-shadow:0 0 26px 8px rgba(255,212,0,.85); }
.card.badglow .front{ box-shadow:0 0 26px 8px rgba(255,0,0,.75); animation: badPulse .35s 3; }
@keyframes badPulse{ 50%{ filter:brightness(.7);} }
.prompt{ font-size: clamp(15px, 2.8vw, 23px); text-align:center; margin:12px 12px 4px;
  text-shadow: 2px 2px 0 rgba(0,0,0,.4); line-height:1.45; }
.prompt b, .hl{ color:var(--gold); }
.prompt small{ color:var(--gold); opacity:.9; font-size:.72em; font-weight:700; }

/* ---------- PIRÁMIDE ---------- */
.pyr{ display:flex; flex-direction:column; align-items:center; gap:clamp(6px,1.4vh,14px); margin:14px 0 6px; }
.pyr-row{ display:flex; align-items:center; gap:clamp(8px,3vw,22px); }
.pslot{ --cw: var(--pcw); width:var(--pcw); height:calc(var(--pcw)*1.42); border-radius:10px; position:relative;
  perspective:700px; border:3px dashed rgba(255,255,255,.35); }
.pslot.sideL{ border-color:rgba(255,96,96,.8); }
.pslot.sideR{ border-color:rgba(255,212,0,.8); }
.pnum{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:calc(var(--pcw)*.38); opacity:.5; }
.plv{ background:var(--gold); color:#8f0000; border-radius:10px; padding:4px 9px;
  font-size:clamp(13px,2.6vw,18px); box-shadow:0 3px 0 #b27f00; }
.pyr-legend{ font-size:clamp(11px,2.2vw,14px); color:var(--gold); margin:4px 0; text-shadow:1px 1px 0 rgba(0,0,0,.5); }

/* ---------- OVERLAYS ---------- */
.overlay{ position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center;
  background:rgba(30,0,0,.55); backdrop-filter: blur(3px); padding:20px; }
.overlay.dark{ background:rgba(40,0,0,.92); flex-direction:column; gap:24px; z-index:65; text-align:center; }
.panel{ max-width:500px; width:100%; text-align:center; border-radius:24px; padding:24px 20px;
  background: linear-gradient(165deg,#ffe97a,#ffc400); color:#a00d0d; border:5px solid #fff;
  box-shadow: 0 24px 70px rgba(0,0,0,.6); animation: popIn .4s cubic-bezier(.3,1.6,.5,1);
  max-height:92vh; overflow-y:auto; position:relative; z-index:2; }
.panel.lose{ background: linear-gradient(165deg,#4d0000,#8f0f0f); color:var(--gold); border-color:var(--gold); }
@keyframes popIn{ from{ transform:scale(.5) rotate(-5deg); opacity:0; } }
.panel-emoji{ font-size: clamp(46px, 9vw, 78px); animation: bounceE 1s infinite; }
@keyframes bounceE{ 50%{ transform: translateY(-10px) scale(1.12);} }
#p-who{ margin:2px 0; font-size:clamp(14px,2.8vw,19px); opacity:.95; }
#p-title{ font-size: clamp(24px, 5.6vw, 42px); margin:4px 0; }
#p-sub{ font-size: clamp(13px, 2.4vw, 17px); margin:0 0 16px; opacity:.92; }
.a-left{ font-size:clamp(13px,2.4vw,16px); margin:4px 0 10px; }
.mlist{ max-height:42vh; overflow-y:auto; margin:8px 0 14px; }
.mrow{ display:flex; align-items:center; gap:10px; background:rgba(0,0,0,.16); border-radius:12px;
  padding:8px 10px; margin:6px 0; flex-wrap:wrap; justify-content:center; }
.mname{ flex:1; text-align:left; font-size:clamp(14px,2.8vw,17px); min-width:130px; }
.msub{ display:block; font-size:.72em; opacity:.8; }
.stepper{ display:flex; align-items:center; gap:8px; }
.mcount{ min-width:34px; font-size:22px; }
.scol{ display:flex; align-items:center; gap:5px; font-size:15px; }
.frow{ display:flex; align-items:center; gap:10px; background:rgba(0,0,0,.16); border-radius:12px;
  padding:9px 12px; margin:6px 0; font-size:clamp(14px,2.8vw,18px); }
.frack{ font-size:1.35em; }
.fname{ flex:1; text-align:left; }
.endpanel{ max-width:560px; margin:14px auto; }
.inter-emoji{ font-size:64px; animation:bounceE 1.2s infinite; }
.inter-title{ color:var(--gold); font-size:clamp(24px,6vw,40px); text-shadow:3px 3px 0 #500; }
.inter-desc{ max-width:540px; font-size:clamp(13px,2.6vw,17px); line-height:1.6; font-weight:700; padding:0 10px; }
.inter-desc b{ color:var(--gold); }
.shuffle-cards{ position:relative; width:86px; height:116px; }
.shufcard{ position:absolute; inset:0; width:84px; height:114px; border-radius:10px; border:3px solid #fff;
  background: repeating-linear-gradient(45deg,#d01111 0 10px,#a30b0b 10px 20px);
  display:flex; align-items:center; justify-content:center; font-size:32px;
  box-shadow:0 8px 20px rgba(0,0,0,.5); animation: shuf 1.5s ease-in-out infinite;
  animation-delay: calc(var(--i)*0.045s); }
@keyframes shuf{ 0%,100%{ transform:translate(0,0) rotate(0);}
  30%{ transform:translate(calc(var(--i)*48px),-28px) rotate(calc(var(--i)*14deg)); }
  65%{ transform:translate(calc(var(--i)*-32px),16px) rotate(calc(var(--i)*-10deg)); } }
.shuffle-text{ color:var(--gold); font-size: clamp(22px, 5vw, 36px); text-shadow:3px 3px 0 #500; animation: wobble 1s infinite; }
.hand-cards{ --cw: clamp(46px,12vw,72px); display:flex; gap:6px; justify-content:center; margin:12px 0; flex-wrap:wrap; }
.hslot{ position:relative; width:var(--cw); height:calc(var(--cw)*1.42); }
.confetti{ position:fixed; top:-26px; z-index:60; border-radius:3px; pointer-events:none; animation: fall linear forwards; }
@keyframes fall{ to{ transform: translateY(114vh) rotate(900deg); } }
.toast{ position:fixed; top:14px; left:50%; transform:translateX(-50%) translateY(-90px); z-index:70;
  background:var(--gold); color:#8f0000; padding:10px 22px; border-radius:999px;
  font-size: clamp(14px, 2.4vw, 18px); box-shadow:0 8px 24px rgba(0,0,0,.4);
  transition: transform .3s cubic-bezier(.3,1.5,.5,1); }
.toast.show{ transform:translateX(-50%) translateY(0); }
#app.shake{ animation: shakeAnim .5s; }
@keyframes shakeAnim{ 10%{ transform:translate(-9px,3px) rotate(-1.5deg);} 30%{ transform:translate(8px,-3px) rotate(1.3deg);}
  50%{ transform:translate(-7px,2px);} 70%{ transform:translate(6px,-2px);} 90%{ transform:translate(-3px,1px);} }
@media (max-width:380px){ .choice{ min-width:126px; } .mname{ min-width:105px; } }