/* CAPI BONUS: estilos y animaciones editables en un único lugar. */

:root{--dark:#070b17;--dark2:#101930;--espresso:#150d20;--amber:#ffd94a;--red:#ff4e7b;--cream:#f5fbff;--clay:#5d1d8e;--green:#21d7d7;--neon1:#5cf2ff;--neon2:#ff4fd8;--neon3:#7cff4f;--neon4:#6a7dff;--shadow:0 5px 0 #09060f;--ease:cubic-bezier(.2,.85,.23,1)}
*,*::before,*::after{box-sizing:border-box}html{scroll-behavior:smooth;background:var(--dark)}
body{margin:0;min-height:100svh;color:#eefbff;font-family:ui-rounded,"Trebuchet MS",system-ui,-apple-system,"Segoe UI",sans-serif;background:radial-gradient(circle at 10% 0%,#19c6ff55 0,transparent 26%),radial-gradient(circle at 100% 12%,#ff4fd855 0,transparent 23%),radial-gradient(circle at 50% 100%,#ffe14d33 0,transparent 30%),linear-gradient(180deg,#040713,#091126 28%,#120d28 62%,#090c19 100%);-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,.tile:focus-visible,summary:focus-visible{outline:3px solid #4de0b3;outline-offset:3px}button:disabled{cursor:not-allowed}
.app{width:min(100%,460px);min-height:100svh;margin:auto;position:relative;overflow:hidden;padding:0 14px calc(18px + env(safe-area-inset-bottom));box-shadow:0 28px 140px #000d;background:radial-gradient(circle at 15% 0%,#1ecbff2f 0,transparent 22%),radial-gradient(circle at 88% 7%,#ff4fd83b 0,transparent 19%),radial-gradient(circle at 55% 55%,#6cff6630 0,transparent 18%),linear-gradient(180deg,#0c1124,#17153a 26%,#101632 55%,#0b1021 100%)}
.app::before{content:"";position:absolute;inset:0 0 auto;height:8px;background:linear-gradient(90deg,#00e5ff 0%,#5f6dff 18%,#ff4ad8 42%,#ffe14d 68%,#5cff85 100%);box-shadow:0 0 22px #4df8ff;z-index:9}
.app::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 12% 20%,#59f3ff1a 0 2px,transparent 3px),radial-gradient(circle at 84% 14%,#ff62dc22 0 2px,transparent 3px),radial-gradient(circle at 25% 78%,#ffe45a1e 0 2px,transparent 3px),radial-gradient(circle at 78% 70%,#71ff8018 0 2px,transparent 3px);background-size:180px 180px,230px 230px,200px 200px,210px 210px;z-index:0}
.mast{height:43px;display:flex;gap:7px;justify-content:space-between;align-items:center;padding-top:8px;color:#b9cfff;font-weight:950;font-size:10px;letter-spacing:.7px}.mast-left{display:flex;align-items:center;gap:5px}.mast-left b{display:inline-block;transform:rotate(-5deg)}.mast-actions{display:flex;align-items:center;gap:6px}.dev-tag{border:1px solid #37e8ff;background:linear-gradient(180deg,#18304a,#0d162b);padding:5px 8px;color:#79f7ff;border-radius:100px;letter-spacing:.35px;font-weight:1000;font-size:9px;box-shadow:0 0 12px #00d9ff44,inset 0 0 8px #ffffff14}.audio-btn{background:linear-gradient(180deg,#162544,#0d1427);border:1.5px solid #64efff;width:30px;height:29px;border-radius:10px;display:grid;place-items:center;font-size:15px;color:#8ffaff;box-shadow:0 0 10px #00d9ff33,inset 0 0 8px #fff1}.audio-btn:active{transform:translateY(1px);box-shadow:0 0 5px #00d9ff33}
.hero{height:192px;border-radius:24px;position:relative;display:flex;align-items:center;overflow:hidden;isolation:isolate;background:radial-gradient(circle at 85% 18%,#28d6ff55 0,transparent 38%),radial-gradient(circle at 12% 18%,#ff49d955 0,transparent 32%),radial-gradient(circle at 48% 102%,#ffe14d35 0,transparent 34%),linear-gradient(135deg,#1a1b45,#12214a 34%,#30124d 68%,#15203f 100%);border:3px solid #74f8ff;box-shadow:0 0 0 2px #13203f,0 0 26px #3bdcff66,0 0 36px #ff57d633,0 12px 28px #0008;animation:arrive .8s var(--ease) both}
.hero::before{content:"";position:absolute;inset:6px;border:1px solid #9ef7ff88;border-radius:18px;pointer-events:none;z-index:5;box-shadow:inset 0 0 18px #6f50ff33,inset 0 0 35px #ff5dd91a}
.hero::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 18px,#8af4ff12 18px 20px),repeating-linear-gradient(0deg,transparent 0 18px,#ff66dc0f 18px 20px),linear-gradient(135deg,transparent 0%,#ffffff08 40%,transparent 80%);opacity:.8;z-index:-1}
.hero-copy{position:relative;z-index:4;width:65%;padding:4px 0 8px 14px}.hello{display:inline-flex;gap:5px;align-items:center;background:linear-gradient(90deg,#11d8ff,#7f63ff);color:#f6fdff;padding:4px 10px;border:2px solid #dffcff;box-shadow:0 0 14px #19d8ff55;border-radius:999px;font-size:10px;font-weight:1000;transform:rotate(-4deg);letter-spacing:.7px}
.hero h1{font-family:Impact,"Arial Black",system-ui,sans-serif;line-height:.87;font-size:clamp(53px,14vw,72px);color:#ffe97a;letter-spacing:-1px;margin:14px 0 9px;transform:rotate(-2deg);-webkit-text-stroke:1.5px #08101f;paint-order:stroke fill;text-shadow:0 0 16px #ff53d077,3px 3px 0 #0a1120,0 0 26px #55f3ff55}
.hero h1 span{display:block;color:#f8fbff;font-size:.94em;-webkit-text-stroke:1.5px #08101f;text-shadow:0 0 18px #52f7ff88,3px 3px 0 #08101f}.hero small{color:#cfe7ff;font-weight:1000;font-size:10px;text-shadow:0 0 10px #59f7ff55;letter-spacing:.8px}
.hero-capi{position:absolute;right:-8px;bottom:-20px;width:46%;height:212px;object-fit:cover;object-position:52% 22%;clip-path:ellipse(54% 65% at 56% 53%);filter:drop-shadow(-6px 7px 7px #25160b44);animation:breathe 4.2s ease-in-out infinite;z-index:2}
.hero-bubble{position:absolute;z-index:4;right:4px;bottom:10px;border:2px solid #65f7ff;border-radius:16px 16px 6px 16px;padding:6px 8px;background:linear-gradient(180deg,#1b2346,#0f1630);color:#f6fbff;font-size:9px;font-weight:1000;transform:rotate(7deg);box-shadow:0 0 12px #3bdcff55}.hero-bubble::after{content:"";position:absolute;bottom:-9px;right:10px;border-style:solid;border-width:9px 5px 0 5px;border-color:#65f7ff transparent transparent transparent}
.hero-spark{position:absolute;width:8px;height:8px;background:#ffe799;rotate:45deg;box-shadow:0 0 0 6px #ffedb528;z-index:3;animation:twinkle 2.7s ease-in-out infinite}.hero-spark.a{right:37%;top:12%}.hero-spark.b{right:4%;top:29%;animation-delay:1.3s;scale:.7}
.ticket-strip{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;margin:13px 0 11px;padding:10px 11px;border:2px solid #54efff;border-radius:15px;background:linear-gradient(90deg,#151c43,#172f61 34%,#3f1955 68%,#15183f 100%);box-shadow:0 0 0 1px #1a2750,0 0 15px #44d8ff33,0 0 18px #ff57d622;color:#effbff;animation:slideUp .6s .1s var(--ease) both}.ticket-strip strong{font-size:11px;letter-spacing:1.2px}.ticket-strip small{font-size:9px;display:block;opacity:.86;margin-top:2px;font-weight:700;color:#d0ddff}.ticket-price{padding:6px 10px;border:2px solid #ffe36f;border-radius:11px;background:linear-gradient(90deg,#ffe95b,#ff9f1a 42%,#ff4fd8 100%);box-shadow:0 0 16px #ffb34755;color:#2a170e;font-weight:1000;font-size:21px;white-space:nowrap;letter-spacing:-.4px}
.intro{display:flex;align-items:center;gap:9px;justify-content:space-between;margin:9px 2px 11px}.intro-copy{min-width:0}.intro-kicker{margin:0 0 1px;font-size:10px;font-weight:950;color:#ff7de6;letter-spacing:1.2px;text-transform:uppercase}.intro h2{font-family:Impact,"Arial Black",sans-serif;font-size:32px;margin:0;color:#fff7ff;line-height:1.1;letter-spacing:.5px;text-shadow:0 0 14px #56f5ff44}.how-pill{flex-shrink:0;border:1.5px solid #67efff;border-radius:14px;padding:6px 10px;background:linear-gradient(180deg,#151c35,#121426);font-size:9px;line-height:1.35;text-align:center;color:#eaffff;font-weight:900;box-shadow:0 0 12px #32dcff33}.how-pill b{font-size:15px;color:#ffe35e}
.progressbox{display:flex;align-items:center;gap:10px;margin:0 2px 11px;font-size:11px;color:#c9ddff;font-weight:1000}.progressbox strong{font-size:11px;color:#f7fbff;min-width:82px}.track{flex:1;border:2px solid #58edff;border-radius:100px;height:13px;overflow:hidden;background:#11192e;box-shadow:inset 0 2px 5px #0008,0 0 10px #2dd9ff2b,0 0 12px #ff59d51c}.bar{height:100%;width:0;background:linear-gradient(90deg,#ff53d0 0%,#58edff 35%,#ffe760 68%,#68ff92 100%);transition:width .3s var(--ease);position:relative}.bar::after{content:"";position:absolute;top:0;right:0;width:10px;height:100%;background:#fff9;filter:blur(3px)}
.board-frame{border:3px solid #67efff;border-radius:22px;background:linear-gradient(145deg,#191f42,#16122f 32%,#251151 62%,#12162d 100%);padding:10px;box-shadow:0 0 0 2px #0c1224,0 0 24px #31ddff44,0 0 30px #ff57d622,0 16px 26px #0009;position:relative;animation:slideUp .8s .18s var(--ease) both}
.board-frame::before,.board-frame::after{content:"◉";position:absolute;top:2px;font-size:10px;color:#67efff;text-shadow:0 0 8px #67efff,0 0 14px #ff5dd9}.board-frame::before{left:6px}.board-frame::after{right:6px}
.board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;position:relative}.tile{min-width:0;aspect-ratio:.88;position:relative;border:2px solid var(--tile-border,#7af5ff);overflow:hidden;border-radius:16px;background:#0d152b;box-shadow:0 0 0 2px #0a0f21,inset 0 0 0 1px #ffffff14,0 0 18px var(--tile-glow,#2bdeff33),0 0 22px var(--tile-glow-2,#ff57d622);touch-action:pan-y pinch-zoom;user-select:none;-webkit-user-select:none;outline-offset:1px;isolation:isolate;animation:tileIn .48s var(--ease) both;animation-delay:calc(.2s + var(--i)*.055s);transform-origin:center bottom}.tile[data-rarity="capo"]{border-width:2.5px}
.tile::before{position:absolute;content:"";inset:0;z-index:1;pointer-events:none;border:1.5px solid #ffffff6a;border-radius:12px;box-shadow:inset 0 0 18px var(--frame-glow,#ffffff14)}.tile-body{position:absolute;inset:0;overflow:hidden;background:radial-gradient(circle at 50% 4%,#ffffff26,transparent 34%),linear-gradient(180deg,var(--tile-top,color-mix(in srgb,var(--color) 92%,white 8%)),var(--tile-bottom,color-mix(in srgb,var(--color) 74%,black 22%)));box-shadow:inset 0 0 18px #ffffff0e}.tile-body::before{content:"";position:absolute;inset:0;background:var(--tile-pattern,linear-gradient(135deg,transparent 0%,#ffffff10 50%,transparent 100%));opacity:.38;mix-blend-mode:screen;pointer-events:none}.tile-image{position:absolute;z-index:1;left:4px;right:4px;top:4px;bottom:72px;display:block;width:calc(100% - 8px);height:calc(100% - 76px);object-fit:contain;object-position:center bottom;transform:scale(1);transition:transform .5s var(--ease),filter .5s var(--ease);filter:saturate(1.18) contrast(1.08) drop-shadow(0 6px 8px rgba(0,0,0,.28))}.tile.open .tile-image{transform:scale(1.04);filter:saturate(1.24) contrast(1.1) drop-shadow(0 6px 10px rgba(0,0,0,.35))}.tile-body::after{content:"";position:absolute;left:0;right:0;bottom:0;height:78px;background:linear-gradient(180deg,transparent 0,#08111f88 15%,#07101de8 62%,#040912 100%)}.tile-mark{position:absolute;z-index:2;left:6px;top:6px;min-height:20px;padding:3px 8px;border-radius:999px;background:linear-gradient(90deg,var(--mark1,#111a34),var(--mark2,#2a1457));border:1.5px solid var(--mark-border,#76f6ff);box-shadow:0 0 0 1px #0b1020,0 0 10px var(--mark-glow,#38dcff55);font-size:9px;line-height:1;font-weight:1000;letter-spacing:.7px;color:#fff;text-transform:uppercase;display:flex;align-items:center}.tile-name{position:absolute;z-index:2;left:6px;right:6px;bottom:44px;padding:4px 5px 5px;border-radius:999px;background:linear-gradient(90deg,var(--name1,#151e40ee) 0%,var(--name2,#2a1457ee) 50%,var(--name3,#111a34ee) 100%);border:1.5px solid var(--name-border,#76f6ff);box-shadow:0 0 0 1px #0b1020,0 0 14px var(--name-glow,#38dcff55),0 0 16px var(--name-glow-2,#ff59d633),inset 0 0 12px #ffffff12;font-family:Impact,"Arial Black",system-ui,sans-serif;text-transform:uppercase;font-size:clamp(13px,3.55vw,17px);letter-spacing:.25px;text-align:center;color:#ffffff;-webkit-text-stroke:.35px #08101f;text-shadow:0 0 8px #69edff3d,0 1px 0 #03070f;font-weight:1000;white-space:nowrap}.tile-award{position:absolute;z-index:2;left:6px;right:6px;bottom:6px;height:33px;display:flex;align-items:center;justify-content:center;background:linear-gradient(90deg,var(--award1,#ffe95a) 0%,var(--award2,#ff8f2d) 32%,var(--award3,#ff48cb) 68%,var(--award4,#62efff) 100%);border-radius:10px;border:1.5px solid var(--award-border,#fff2a7);box-shadow:0 0 0 2px #31120d,0 0 16px var(--award-glow,#ff8c2270),0 0 16px var(--award-glow-2,#36deff33),inset 0 1px 0 #fff8d9;color:#1f120c;font-family:Impact,"Arial Black",system-ui,sans-serif;font-size:clamp(14px,4vw,19px);letter-spacing:.1px;white-space:nowrap;text-shadow:0 1px 0 #fff6cc}
.tile canvas{position:absolute;inset:0;display:block;width:100%;height:100%;z-index:4;cursor:crosshair;touch-action:pan-y pinch-zoom;transition:opacity .32s ease}.tile:not(.open)::after{content:"";position:absolute;top:-30%;bottom:-30%;left:-54%;width:25%;z-index:5;pointer-events:none;background:linear-gradient(90deg,transparent,var(--foil1,#85f7ff66) 22%,var(--foil2,#ff58ce55) 48%,var(--foil3,#fff07a66) 78%,transparent);transform:skewX(-25deg);animation:foilSweep 4.4s 1.7s ease-in-out infinite}.tile.open canvas{opacity:0;pointer-events:none}.tile.open{animation:tilePop .48s var(--ease) both}.tile.won{box-shadow:0 0 0 2px #ffe863,0 0 0 4px #ffffff,0 0 26px #53efff,0 0 40px #ff56cd66,0 0 50px #72ff9355;z-index:3;animation:wonDance .65s ease both}.tile.won::after{content:"✦";position:absolute;right:4px;top:2px;color:#fff893;z-index:6;font-size:22px;text-shadow:0 0 8px gold;animation:twinkle .8s infinite alternate}.tile.active{box-shadow:0 0 0 2px #ffc75a,0 0 18px #59f1ff99177;z-index:2}.dust{pointer-events:none;position:absolute;z-index:6;width:4px;height:4px;background:#e7eeeb;box-shadow:0 0 2px #fff9;border-radius:1px;animation:dust .52s ease-out forwards}
.helper{display:flex;justify-content:space-between;gap:10px;align-items:center;margin:12px 2px 0;color:#b8d7ff;font-size:10px;font-weight:800}.helper span:first-child{display:flex;align-items:center;gap:5px}.hand{font-size:17px;display:inline-block;animation:hand 2.7s ease-in-out infinite}
.buttons{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0 10px}.btn{min-height:56px;border:2px solid #8af7ff;border-radius:16px;font-size:13px;font-weight:1000;padding:10px 8px;letter-spacing:.35px;box-shadow:0 0 0 1px #0b1020,0 0 14px #3ad9ff2b,0 0 18px #ff57d61f;transition:transform .16s,box-shadow .16s,filter .16s;display:flex;gap:6px;align-items:center;justify-content:center}.btn span{font-size:17px}.btn:active:not(:disabled){transform:translateY(3px);box-shadow:0 0 0 1px #0b1020,0 0 7px #3ad9ff2b}.btn:hover:not(:disabled){filter:brightness(1.12)}.btn-new{background:linear-gradient(90deg,#ff4fd8 0%,#ff8d34 50%,#ffe85d 100%);color:#fffafd}.btn-show{background:linear-gradient(90deg,#1ecbff 0%,#636dff 52%,#a45cff 100%);color:white}.btn:disabled{opacity:.54;box-shadow:0 0 0 1px #0b1020}
.result{display:none;overflow:hidden;text-align:center;background:linear-gradient(180deg,#161e43,#25104a 54%,#12162e);border-radius:20px;padding:16px 12px 18px;border:2px solid #67efff;box-shadow:0 0 0 1px #0b1020,0 0 20px #2fddff33,0 0 24px #ff59d922;margin:14px 1px 0;position:relative}.result.show{display:block;animation:resultIn .55s var(--ease) both}.result.win{border-color:#ffe45e;background:linear-gradient(180deg,#2a1b53,#1b1640)}.result.win::before{content:"";position:absolute;inset:-100px;background:repeating-conic-gradient(#59efff26 0 14deg,transparent 14deg 28deg);animation:turn 28s linear infinite;pointer-events:none}.result-content{position:relative;z-index:1}.result-em{font-size:30px;display:block;line-height:1.15}.result h3{font-family:Impact,"Arial Black",sans-serif;font-size:30px;line-height:1.1;color:#f2f8ff;margin:7px 0;text-shadow:0 0 10px #59efff44,0 0 12px #ff59d933}.result.win h3{color:#ffe45e}.result p{font-size:12px;margin:5px 0 0;color:#d7e3ff;font-weight:800}.big-prize{font-family:Impact,"Arial Black",sans-serif;font-weight:1000;font-size:41px;line-height:1.2;color:#fff4a8;text-shadow:0 0 10px #ff58ce55,0 0 18px #57f3ff55,0 0 18px #ffe45a44;margin-top:4px}.winner-name{text-transform:uppercase;color:#ffffff!important;font-size:13px!important}.result-avatar{height:86px;width:86px;margin:0 auto;border-radius:50%;border:3px solid #67efff;box-shadow:0 0 16px #2fdcff55,0 0 14px #ff59d933;object-fit:cover;object-position:center 34%}.result-cta{margin-top:12px;border:2px solid #72f6ff;border-radius:12px;background:linear-gradient(90deg,#1ecbff 0%,#636dff 50%,#ff59d9 100%);color:#f8fdff;font-weight:1000;padding:10px 16px;box-shadow:0 0 14px #1ecbff33}
.foot-panel{margin-top:17px;border:2px solid #67efff;background:linear-gradient(180deg,#131d39,#25114a);border-radius:15px;overflow:hidden;box-shadow:0 0 14px #34dcff22,0 0 18px #ff57d61f}summary{list-style:none;padding:12px 14px;cursor:pointer;color:#f2f8ff;font-size:12px;font-weight:1000;display:flex;justify-content:space-between;align-items:center}summary::-webkit-details-marker{display:none}summary::after{content:"＋";font-size:20px;color:#7bf7ff}details[open] summary::after{content:"−"}.foot-content{padding:0 14px 13px;color:#d2dfff;font-size:11px;line-height:1.55}.legend{display:grid;grid-template-columns:1fr 1fr;gap:5px 13px;margin-top:10px}.legend>div{border-bottom:1px dotted #4cb8cf;display:flex;gap:4px;justify-content:space-between;padding:4px 0}.legend b{white-space:nowrap;color:#ffe569}.fine-print{text-align:center;margin:15px 8px 0;color:#a4bfff;font-size:10px;line-height:1.5;font-weight:700}
.confetti{pointer-events:none;position:fixed;inset:0;overflow:hidden;z-index:40}.confetti i{position:absolute;top:-12%;display:block;width:9px;height:13px;background:var(--c);left:var(--x);border-radius:2px;animation:confettiFall var(--dur) linear var(--delay) both;transform-origin:center}.toast{position:fixed;left:50%;bottom:max(24px,env(safe-area-inset-bottom));width:min(calc(100% - 42px),400px);z-index:50;padding:11px 13px;border-radius:14px;border:2px solid #68f4ff;background:linear-gradient(90deg,#171f3a,#4a1456);color:#f4fbff;font-weight:900;text-align:center;transform:translate(-50%,140px);opacity:0;box-shadow:0 0 16px #30dcff33,0 0 18px #ff57d622;pointer-events:none;transition:transform .3s var(--ease),opacity .3s}.toast.visible{transform:translate(-50%,0);opacity:1}
@keyframes foilSweep{0%,17%{left:-54%;opacity:0}28%{opacity:.75}43%,100%{left:130%;opacity:0}}@keyframes arrive{0%{opacity:0;transform:translateY(-20px) scale(.98)}100%{opacity:1;transform:none}}@keyframes slideUp{0%{opacity:0;transform:translateY(16px)}100%{opacity:1;transform:none}}@keyframes tileIn{from{opacity:0;transform:translateY(12px) scale(.92)}to{opacity:1;transform:none}}@keyframes tilePop{0%{transform:scale(.91)}55%{transform:scale(1.055)}100%{transform:scale(1)}}@keyframes wonDance{0%,100%{transform:rotate(0)}25%{transform:rotate(-3deg) scale(1.04)}60%{transform:rotate(3deg) scale(1.04)}}@keyframes resultIn{0%{opacity:0;transform:translateY(16px) scale(.96)}75%{transform:translateY(-2px) scale(1.01)}100%{opacity:1;transform:none}}@keyframes dust{from{opacity:1;transform:translate(0,0) rotate(0)}to{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(110deg)}}@keyframes breathe{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-4px) rotate(.6deg)}}@keyframes hand{0%,83%,100%{transform:rotate(-10deg) translateY(-1px)}88%{transform:rotate(6deg) translateY(1px)}}@keyframes twinkle{0%,100%{opacity:.5;scale:.75}50%{opacity:1;scale:1.2}}@keyframes turn{to{transform:rotate(360deg)}}@keyframes confettiFall{0%{transform:translateY(0) translateX(0) rotate(0);opacity:1}85%{opacity:1}100%{transform:translateY(112vh) translateX(var(--drift)) rotate(var(--spin));opacity:0}}
@media(max-width:360px){.app{padding-left:9px;padding-right:9px}.hero{height:172px}.hero h1{font-size:47px}.board{gap:6px}.board-frame{padding:7px}.tile-name{font-size:9px;bottom:26px}.tile-award{font-size:10px;height:22px}.hero-bubble{font-size:8px}}@media(min-width:650px){.app{border-radius:22px;border:2px solid #a98c64;margin:22px auto;min-height:calc(100svh - 44px)}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* Resultado modal a primer plano, sin cambiar el aspecto del juego */
.result-overlay[hidden]{display:none!important}
.result-overlay{position:fixed;inset:0;z-index:100;display:grid;place-items:center;overflow-y:auto;padding:calc(18px + env(safe-area-inset-top)) 14px calc(18px + env(safe-area-inset-bottom));background:radial-gradient(circle at 20% 10%,#1ed3ff22 0,transparent 20%),radial-gradient(circle at 80% 15%,#ff59d922 0,transparent 22%),rgba(2,6,19,.86);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);overscroll-behavior:contain;animation:modalBackdrop .24s ease both}
.modal-shell{position:relative;width:min(100%,400px);max-height:calc(100svh - 36px - env(safe-area-inset-top) - env(safe-area-inset-bottom));animation:modalLift .48s cubic-bezier(.16,.92,.2,1.1) both}
.result-overlay .result{display:block;width:100%;max-height:calc(100svh - 75px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain;margin:0;padding:27px 15px 18px;border-radius:24px;border-width:3px;box-shadow:0 0 0 2px #11213b,0 0 24px #45efff88,0 0 56px #7461ff52,0 22px 65px #000b}
.result-overlay .result.win{box-shadow:0 0 0 2px #342616,0 0 24px #ffdb6599,0 0 54px #ff56d866,0 22px 65px #000b}
.result-overlay .result h3{font-size:clamp(30px,8vw,39px);letter-spacing:.5px;margin:9px 0 7px}
.result-overlay .big-prize{font-size:clamp(40px,11vw,53px)}
.result-overlay .result-avatar{width:100px;height:100px;border-width:4px}
.result-overlay .result p{font-size:13px;line-height:1.5}
.result-overlay .result-cta{min-height:49px;font-size:14px;margin-top:18px;padding:10px 20px}
.modal-close{position:absolute;top:10px;right:10px;z-index:6;display:grid;place-items:center;width:37px;height:37px;border-radius:12px;background:#10192cf5;color:#f1fbff;font-size:21px;font-weight:900;border:2px solid #71efff;box-shadow:0 0 12px #40dfffb8;cursor:pointer}
.modal-close:active{transform:scale(.93)}
.modal-close:focus-visible{outline:3px solid #fff59a;outline-offset:3px}
.modal-hint{font-size:11px;font-weight:900;letter-spacing:.2px;color:#eafaff;text-align:center;margin-top:12px;text-shadow:0 0 12px #47efff88}
@keyframes modalBackdrop{from{opacity:0}to{opacity:1}}
@keyframes modalLift{from{opacity:0;transform:translateY(28px) scale(.88)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-height:590px){.result-overlay .result{padding-top:16px}.result-overlay .result-avatar{width:62px;height:62px}.result-overlay .result h3{font-size:26px}.result-overlay .big-prize{font-size:36px}.modal-hint{display:none}}
.confetti{z-index:115}

/* FINAL SUSPENSE MODE */
body.final-mode .app{filter:brightness(.45) saturate(.8) blur(.8px);transform:scale(.985);transition:filter .32s ease,transform .32s ease}
body.final-mode .hero,body.final-mode .ticket-strip,body.final-mode .progressbox,body.final-mode .buttons,body.final-mode .foot-panel,body.final-mode .fine-print{opacity:.35}
.final-focus[hidden]{display:none!important}.final-focus{position:fixed;inset:0;z-index:95;display:grid;place-items:center;padding:18px;background:radial-gradient(circle at center,#0e1531aa 0%,#050914ee 52%,#02050bcc 100%);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);animation:modalBackdrop .28s ease both}.final-shell{width:min(100%,420px);padding:18px 14px 16px;border-radius:28px;border:2px solid #78f7ff;background:linear-gradient(180deg,#191f45,#2c1250 54%,#11162e);box-shadow:0 0 0 1px #0a1020,0 0 25px #4ddfff55,0 0 40px #ff59d933;text-align:center;position:relative;overflow:hidden}.final-shell::before{content:"";position:absolute;inset:-40% -10%;background:conic-gradient(from 0deg,#59f1ff20,#ff59d920,#ffe66c20,#6bff8f20,#59f1ff20);animation:turn 14s linear infinite;pointer-events:none}.final-shell>*{position:relative;z-index:1}.final-kicker{display:inline-flex;align-items:center;justify-content:center;min-height:26px;padding:4px 12px;border-radius:999px;background:linear-gradient(90deg,#17cbff,#6a6dff,#ff57d8);border:1px solid #aef9ff;color:#fff;font-size:11px;font-weight:1000;letter-spacing:1px;box-shadow:0 0 16px #42dbff55}.final-shell h3{margin:10px 0 5px;font-family:Impact,"Arial Black",sans-serif;font-size:34px;line-height:1;color:#fff8ad;text-shadow:0 0 10px #ffde5c66,0 0 18px #59f1ff44}.final-shell p{margin:0 auto 12px;max-width:33ch;color:#dce8ff;font-weight:800;font-size:13px;line-height:1.35}.final-tip{margin-top:12px;color:#9fc2ff;font-size:11px;font-weight:1000;letter-spacing:.3px}.final-slot{display:flex;justify-content:center;align-items:center;min-height:360px}.final-slot .tile{width:min(74vw,280px)!important;aspect-ratio:.78;border-width:3px;box-shadow:0 0 0 2px #0a1020,inset 0 0 0 1px #ffffff18,0 0 30px var(--tile-glow,#2bdeff55),0 0 46px var(--tile-glow-2,#ff57d655)!important;animation:finalPulse 1.25s ease-in-out infinite alternate}.final-slot .tile canvas{cursor:crosshair}.tile.final-locked{cursor:not-allowed}.tile.final-locked::after{content:"ÚLTIMA";position:absolute;top:7px;right:7px;z-index:7;padding:4px 8px;border-radius:999px;background:linear-gradient(90deg,#111a34,#2a1457);border:1px solid #73f5ff;color:#fff;font-size:9px;font-weight:1000;letter-spacing:.7px;box-shadow:0 0 10px #3edbff44}.tile-final-placeholder{opacity:.23;filter:grayscale(1) saturate(.25)}.tile-final-placeholder .tile-placeholder-core{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:1000;letter-spacing:1px;color:#b9cfff;text-shadow:0 0 10px #7cecff66;background:linear-gradient(180deg,#ffffff09,#00000022)}@keyframes finalPulse{from{transform:translateY(0) scale(1);filter:drop-shadow(0 0 0 transparent)}to{transform:translateY(-4px) scale(1.02);filter:drop-shadow(0 0 18px #8af7ff99)}}


/* Capi Bonus · última casilla — dirección UI v2 */
.buttons{grid-template-columns:1fr}.buttons .btn-new{background:linear-gradient(100deg,#28dfff,#7257f6 42%,#ff5bc0);border-color:#9bf8ff;box-shadow:0 0 24px #2de4ff3a,0 0 18px #ff60ca32}
body.final-mode .app{filter:brightness(.30) saturate(.66) blur(1.6px);transition:filter .35s ease}
.final-focus{background:radial-gradient(ellipse at 50% 48%,#12224d9e,#050716ee 65%),linear-gradient(120deg,#040716ee,#1b0930dd);padding:12px;overflow-y:auto}
.final-shell{width:min(100%,405px);max-height:calc(100dvh - 24px);overflow-y:auto;overscroll-behavior:contain;padding:14px 14px 16px;border:3px solid transparent;background:linear-gradient(#10132b,#11152d) padding-box,conic-gradient(from var(--ring-angle,0deg),#2cf8ff,#8566ff,#ff51d3,#ffe665,#72ffae,#2cf8ff) border-box;box-shadow:0 0 0 2px #0b0f29,0 0 20px #47eaff7d,0 0 43px #ff51db69,0 0 85px #8462ff2d;animation:finalEntrance .46s cubic-bezier(.15,.9,.22,1) both}
.final-shell::before{inset:-55%;background:conic-gradient(from 40deg,#00f5ff22,#725cff1c,#ff48d924,#ffde4f15,#00f5ff22);animation:turn 18s linear infinite}
.final-shell::after{content:"";position:absolute;inset:6px;border-radius:22px;border:1px solid #ffffff22;pointer-events:none;z-index:1}
.final-kicker{font-size:11px;letter-spacing:2px;padding:6px 15px;box-shadow:0 0 17px #52eaff7f,0 0 25px #ff57d95c}
.final-shell h3{font-size:clamp(31px,8vw,39px);margin:10px 0 3px;color:#fff7aa;text-shadow:0 0 13px #ffe55a88,0 0 19px #ff50cf55}
.final-shell p{font-size:12px;max-width:35ch;line-height:1.4;margin-bottom:9px;color:#e9eaff}
.final-slot{min-height:0;position:relative;padding:8px 0 10px}
.final-slot::before{content:"";position:absolute;left:50%;top:50%;width:min(80vw,295px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,#58f5ff35 0%,#ff51d329 33%,transparent 70%);filter:blur(11px);animation:auraBreathe 2.6s ease-in-out infinite;pointer-events:none}
.final-slot .tile{width:min(66vw,229px,calc((100svh - 250px)*.72))!important;min-width:130px;aspect-ratio:.81!important;border:3px solid #fff2a3;box-shadow:0 0 0 2px #091126,0 0 0 5px #34eaff99,0 0 24px #27e6ffcc,0 0 38px #ff43d8a0,0 0 54px #f9ed6799!important;animation:finalGlow 1.6s ease-in-out infinite alternate}
.final-slot .tile::before{border:2px solid #ffffff98;border-radius:13px;box-shadow:inset 0 0 13px #fff4aa77}
.final-slot .tile:not(.open)::after{background:linear-gradient(90deg,transparent,#fff89d66,#47ffff66,#ff56d188,transparent);animation:foilSweep 2.9s ease-in-out infinite}
.final-slot .tile .tile-name{font-size:18px;bottom:48px}
.final-slot .tile .tile-award{height:37px;font-size:22px}
.final-slot .tile .tile-mark{font-size:11px;padding:5px 10px}
.final-meter{position:relative;z-index:2;display:flex;align-items:center;gap:8px;width:min(100%,315px);margin:auto;color:#ecf9ff;font-size:10px;letter-spacing:.9px;font-weight:1000}
.final-meter-track{height:14px;flex:1;overflow:hidden;background:#060c23;border-radius:999px;border:1px solid #68f2ff;box-shadow:0 0 10px #38e6ff44;position:relative}
.final-meter-track>div{width:0;height:100%;border-radius:999px;background:linear-gradient(90deg,#33ecff,#8264ff,#ff55d5,#ffe960);box-shadow:0 0 12px #fff;transition:width .15s ease}
.final-meter b{min-width:36px;text-align:right;color:#fff7ae;font-size:12px}
.final-tip{margin-top:9px;color:#e4c8ff;font-size:10px;letter-spacing:.4px;text-shadow:0 0 9px #ff50d966}
@keyframes finalEntrance{from{opacity:0;transform:translateY(26px) scale(.90)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes finalGlow{0%{filter:brightness(.97);border-color:#59f3ff;box-shadow:0 0 0 2px #091126,0 0 0 5px #48f4ff99,0 0 18px #46dfff99,0 0 31px #ff42d777!important}100%{filter:brightness(1.10);border-color:#ffe96a;box-shadow:0 0 0 2px #091126,0 0 0 5px #ff66cd99,0 0 24px #ff6dcbcc,0 0 36px #ffef69a6,0 0 48px #49edffaa!important}}
@keyframes auraBreathe{0%,100%{opacity:.55;scale:.95}50%{opacity:1;scale:1.06}}
@media(max-height:650px){.final-shell{padding:10px}.final-slot .tile{width:min(55vw,180px)!important}.final-shell h3{font-size:28px;margin:5px 0 2px}.final-shell p{margin-bottom:4px;font-size:11px}.final-slot{padding:3px 0 5px}.final-tip{margin-top:4px}}
@media(prefers-reduced-motion:reduce){.final-slot .tile,.final-slot::before,.final-shell::before,.final-shell{animation:none!important}.final-slot .tile{filter:none!important}.final-focus{scroll-behavior:auto}}

.panel-entry{border:1.5px solid #ffe36f;background:linear-gradient(180deg,#3a2458,#1a1638);color:#ffe9a0;border-radius:100px;padding:5px 8px;font-size:9px;font-weight:1000;letter-spacing:.6px;box-shadow:0 0 10px #ff57d233}
.carton-banner{margin:0 2px 10px;padding:8px 10px;border-radius:12px;border:1.5px solid #ffe36f;background:#2a2140;color:#fff4c8;font-size:12px;font-weight:900;text-align:center}
.carton-banner[hidden],.panel-root[hidden]{display:none!important}
.panel-root{z-index:1}
.panel-top{display:flex;align-items:center;gap:8px;margin:12px 0}
.panel-top.sola{margin-top:16px}
.panel-top div{flex:1;min-width:0}
.panel-top strong{display:block;font-size:22px;line-height:1.05;letter-spacing:.2px}
.panel-top small,.panel-top em{display:block;font-style:normal}
.panel-top small{color:#8eefff;font-size:10px;font-weight:900;letter-spacing:1px}
.panel-top em{color:#d5def5;font-size:12px;font-weight:700}
.panel-back{width:38px;height:38px;border-radius:12px;border:1.5px solid #67efff;background:#12182f;color:#e8fbff;font-size:18px}
.panel-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.panel-stats div{border:1.5px solid #67efff55;border-radius:14px;padding:10px;background:#12182fcc}
.panel-stats b{display:block;font-size:16px;color:#fff;overflow-wrap:anywhere}
.panel-stats span{font-size:10px;color:#b7c9ee;font-weight:800}
.steps{margin:4px 0 12px;padding-left:18px;color:#d5e4ff;font-size:13px;line-height:1.5}
.role-card{width:100%;display:block;text-align:left;margin-top:8px;padding:14px;border-radius:16px;border:2px solid #67efff;background:#141c38;color:#f7fbff}
.role-card b,.role-card span,.role-card em{display:block}
.role-card b{font-size:16px}
.role-card span{margin-top:3px;color:#c5d4f5;font-size:12px;font-weight:700}
.role-card em{margin-top:6px;font-style:normal;color:#ffe36f;font-size:11px;font-weight:900}
.role-card.caja{border-color:#ff8d34}
.role-card.cliente{border-color:#7dffb0}
.panel-card{margin-top:12px;padding:12px;border-radius:16px;border:2px solid #35507a;background:linear-gradient(180deg,#141b36,#1a1440)}
.panel-card h3{margin:0 0 6px;font-size:15px}
.panel-card p,.panel-vacio,.panel-legal{color:#c9d7f5;font-size:12px;line-height:1.45;font-weight:700}
.panel-legal{margin:16px 0 8px;text-align:center}
.panel-form{display:grid;gap:8px;margin-top:8px}
.panel-form input,.panel-form select{width:100%;min-height:46px;border-radius:12px;border:1.5px solid #67efff;background:#0d1428;color:#f4fbff;padding:0 12px;font:inherit;font-weight:800}
.row-actions{display:flex;gap:8px;margin-top:8px}
.row-actions button,.panel-form button,.mini-raspar,.pager button,.demo-link,.text-btn{border-radius:12px;border:1.5px solid #8af7ff;background:#17233f;color:#f4fbff;font-weight:900;min-height:42px;padding:8px 10px}
.row-actions button{flex:1}
.panel-form button,.demo-link,.sell-btn{width:100%}
.caja-card{display:grid;gap:8px;margin-top:8px;padding:10px;border-radius:12px;background:#10182e}
.caja-card b{display:block}
.caja-card span{display:block;margin-top:3px;color:#b7c9ee;font-size:11px;font-weight:700;line-height:1.35}
.sell-btn{min-height:58px;margin-top:10px;border:0;font-size:16px;color:#2a1208;background:linear-gradient(90deg,#ffe85d,#ff8d34 55%,#ff4fd8);cursor:pointer}
.wallet-btn{width:100%;min-height:46px;margin-top:8px;border-radius:12px;border:1.5px solid #8af7ff;background:transparent;color:#dff7ff;font-weight:900}
.agent-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 12px}
.agent-tabs button{min-height:44px;border-radius:12px;border:1.5px solid #35507a;background:#12182f;color:#d5e4ff;font-weight:900}
.agent-tabs button.on{border-color:#ff8d34;background:#ff8d34;color:#2a1208}
.sell-btn:disabled,.row-actions button:disabled,.pager button:disabled{opacity:.45;cursor:not-allowed}
.pick{width:100%;text-align:left;margin-top:6px;padding:12px;border-radius:12px;border:1.5px solid #3d4e88;background:#10182e;color:#fff;font-weight:800}
.pick.on{border-color:#ffe36f;box-shadow:0 0 0 1px #ffe36f}
.carton-row{display:flex;justify-content:space-between;gap:8px;align-items:center;padding:10px;border:1px solid #3d4e88;border-radius:12px;margin-top:6px;background:#10162c}
.ya-pago{font-style:normal;color:#7dffb0;font-size:11px;font-weight:900}
.catalogo{display:grid;gap:4px;margin-top:8px}
.catalogo div{display:flex;justify-content:space-between;gap:8px;padding:8px 10px;border-radius:10px;background:#10182e;font-size:12px;font-weight:800}
.catalogo span{color:#ffe36f}
.carton-row b{display:block;font-size:13px}
.carton-row span{display:block;color:#b7c9ee;font-size:11px;font-weight:700}
.mini-raspar{background:linear-gradient(90deg,#ffe85d,#ff8d34);color:#2a1208;border-color:#ffe36f}
.pager{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:8px;color:#d5e4ff;font-size:12px;font-weight:800}
.demo-link{display:block;margin-top:14px;background:transparent}
.text-btn{display:block;width:100%;margin-top:8px;background:transparent;border-color:transparent;color:#9eb4dd;font-size:12px}
.panel-aviso{margin:0 0 10px;padding:10px;border-radius:12px;background:#12382e;border:1.5px solid #3dffc2;color:#e9fff6;font-weight:800;font-size:13px}
.panel-aviso.malo{background:#3a1830;border-color:#ff6d93;color:#ffe8f0}



/* Mejoras de uso táctil sin alterar la estética original. */
.carton-row .row-actions {display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.link-boleta {background:#123e49;border:1px solid #67d4b1;color:#e6fff1}
@media(max-width:580px){.carton-row .row-actions {width:100%;justify-content:stretch}.carton-row .row-actions button{flex:1;min-height:42px}.hero{overflow:hidden}.panel-card{min-width:0}}

.control-form{display:flex;flex-wrap:wrap;gap:16px;align-items:end}.control-form label{flex:1 1 180px;display:flex;flex-direction:column;gap:8px}.control-form .check{flex-basis:100%;flex-direction:row;align-items:center}.control-form .check input{width:22px;height:22px;flex:none}.control-form>p{flex-basis:100%}.control-form textarea{width:100%;color:#fff;background:#101827;padding:12px;border:1px solid #394256;border-radius:10px}.carton-row{flex-wrap:wrap}.ticket-share{width:100%;padding:12px;border:1px solid #475e32;border-radius:12px}.panel-root{max-width:1100px}.agent-tabs{flex-wrap:wrap}.control-form button{min-height:46px}

/* Pantallas separadas: demo libre y boleta única */
body[data-game-mode="demo"] .ticket-strip{border-color:#ffde6c;box-shadow:0 0 17px #ffbf403b}
body[data-game-mode="demo"] .dev-tag{color:#ffebad;border-color:#ffc960;background:#382715}
body[data-game-mode="boleta"] .dev-tag{color:#b9ffda;border-color:#7befaf;background:#17392c}
body[data-game-mode="boleta"] .ticket-strip{border-color:#82f3ad;background:linear-gradient(115deg,#102639,#172c45 62%,#173b31)}
body[data-game-mode="boleta"] .ticket-price{font-size:clamp(13px,4.2vw,19px)}
body[data-game-mode="boleta"] #gameHome,body[data-game-mode="boleta"] #newBtn{display:none!important}
.boleta-status{grid-column:1/-1;display:grid;place-content:center;min-height:220px;line-height:1.6;text-align:center;padding:18px 20px;border:2px dashed #70edf4;border-radius:18px;background:#0c1736;color:#dcf7ff;font-weight:800;font-size:15px}
.boleta-status.boleta-error{border-color:#ff9a9a;color:#ffd2d2}

/* Portada jugable: mantiene el tablero como protagonista, sin mezclarlo con boletas asignadas. */
body[data-game-mode="demo"] .home-demo-hint {
  display:block;margin:4px 0 12px;padding:10px 12px;border:1px solid #4fe8dc66;
  border-radius:12px;background:linear-gradient(100deg,#103347d9,#1d234bda);
  color:#d8fcff;font-weight:800;font-size:11px;line-height:1.5;text-align:center;
}
.home-card-help {margin:12px 0 14px;padding:12px 13px;border:1px solid #ffd66a4f;
  border-radius:12px;background:#18152c;color:#d0d9f7;text-align:center;
  font-size:11px;line-height:1.55}
.home-card-help strong{display:block;color:#ffe9a0;font-weight:850}
@media(max-width:360px){body[data-game-mode="demo"] .home-demo-hint{padding:8px;font-size:10px}}
.tile-award{font-size:clamp(11px,3.2vw,16px)}

/* Mobile rendering: static glow, compositor animations and safe touch targets. */
.app{padding-left:max(10px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right))}
.mast{height:auto;min-height:52px;flex-wrap:wrap;padding-bottom:6px}
.mast-actions{flex-wrap:wrap;justify-content:flex-end;max-width:100%}
.audio-btn{width:44px;height:44px;flex-shrink:0;touch-action:manipulation}
.account-link,.panel-entry{min-height:40px;display:inline-flex;align-items:center;justify-content:center;touch-action:manipulation}
.carton-banner{overflow-wrap:anywhere}
.board-frame{isolation:isolate}
.tile{contain:layout paint;animation:none}
.tile canvas{transition:opacity .18s ease;touch-action:pan-y pinch-zoom}
.tile:not(.open)::after{left:0;animation:foilGlide 5s 1.5s ease-in-out infinite;will-change:auto}
@keyframes foilGlide{0%,18%{transform:translateX(-250%) skewX(-25deg);opacity:0}28%{opacity:.6}48%,100%{transform:translateX(650%) skewX(-25deg);opacity:0}}
.tile.active::after{animation-play-state:paused}
.tile[aria-busy="true"]{cursor:progress}
.tile[aria-busy="true"]::after{content:'GUARDANDO…';inset:auto 2px 6px;width:auto;padding:5px 2px;transform:none;animation:none;background:#10223bed;color:#fff;text-align:center;font-size:9px;letter-spacing:.3px;border-radius:6px;opacity:1}
.final-focus,.result-overlay{padding-top:max(12px,env(safe-area-inset-top));padding-bottom:max(12px,env(safe-area-inset-bottom));backdrop-filter:none;-webkit-backdrop-filter:none;overscroll-behavior:contain}
body.final-mode .app{filter:none;pointer-events:none}
.final-focus{background:#050716f5}
.final-slot .tile{animation:none!important;filter:none!important}
.final-slot .tile:not(.open)::after{animation:foilGlide 4s ease-in-out infinite}
.tile-image,.tile.open .tile-image{filter:none;transition:transform .25s ease}
.game-paused *,.game-paused *::before,.game-paused *::after{animation-play-state:paused!important}
.effects-lite .tile::after,.effects-lite .hero-capi,.effects-lite .hero-spark,.effects-lite .hand,.effects-lite .result.win::before,.effects-lite .final-shell::before,.effects-lite .final-slot::before{animation:none!important}
.effects-lite .tile{box-shadow:0 0 0 1px #0a0f21}
.effects-lite .tile-body::before{mix-blend-mode:normal}
.effects-lite .hero-capi{filter:none}
.effects-lite .final-slot::before{filter:none}
@media(pointer:coarse){.hero-capi,.hero-spark,.hand{animation:none}.tile:not(.open)::after{animation:none;opacity:0}.tile.won::after{animation:none}.final-shell::before,.final-slot::before,.result.win::before{animation:none}}
@media(max-width:380px){.mast-left{font-size:9px}.mast-actions{gap:4px}.board{gap:6px}.board-frame{padding:7px}.tile{border-radius:12px;aspect-ratio:.74}.tile-mark{font-size:7px;padding:3px 4px;left:3px;top:3px;min-height:16px}.tile-name{font-size:clamp(9px,2.8vw,11px);left:3px;right:3px;bottom:30px;padding:3px 1px}.tile-award{left:3px;right:3px;bottom:4px;height:23px;font-size:clamp(10px,3vw,12px)}.tile-image{bottom:54px;height:calc(100% - 58px)}.tile-body::after{height:60px}.intro h2{font-size:clamp(24px,8vw,30px)}}
@media(orientation:landscape) and (max-height:500px){.final-focus{align-items:flex-start}.final-shell{margin:auto;max-height:calc(100dvh - 24px)}.final-slot .tile{width:min(32vw,150px)!important;min-width:100px}.final-shell h3{font-size:24px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.tile:not(.open)::after{opacity:0}}

.helper>span:first-child{min-width:0;line-height:1.5}.helper>span:last-child{flex-shrink:0}@media(max-width:440px){.helper{flex-wrap:wrap}.helper>span:last-child{display:none}}