:root{--bg:#090b0a;--panel:#101411;--line:#2b342e;--lime:#b9ff21;--gold:#f5b800;--white:#f8faf8;--muted:#9ba69e}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#050605;color:var(--white);font-family:Arial Black,Inter,Arial,sans-serif;touch-action:none;user-select:none}
body{background:radial-gradient(circle at 70% 20%,#1c2a18 0,transparent 35%),linear-gradient(145deg,#070907,#11150f)}
.game-shell{width:100%;height:100%;min-height:500px;display:grid;grid-template-rows:68px 1fr 82px;padding:max(12px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));gap:12px}
.topbar{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding:0 4px 12px}.brand{display:flex;align-items:center;gap:12px;font-size:clamp(1rem,2.2vw,1.55rem);letter-spacing:.08em}.brand-mark{display:grid;place-items:center;width:44px;height:44px;border:3px solid var(--lime);border-radius:12px;color:var(--lime);transform:rotate(-6deg);box-shadow:0 0 20px #b9ff2145}.status-pill{display:flex;align-items:center;gap:9px;border:1px solid #32402f;border-radius:999px;padding:9px 15px;color:#c8d1c9;font:700 .72rem Arial,sans-serif;letter-spacing:.12em}.pulse{width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 12px var(--lime)}.icon-button{width:44px;height:44px;border:1px solid #39433c;border-radius:50%;background:#141814;color:white;font-size:1.2rem}
.play-layout{min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(210px,27vw);gap:14px}.arena-wrap{position:relative;overflow:hidden;border:1px solid #303a32;border-radius:24px;background:#060807;box-shadow:inset 0 0 50px #000,0 18px 60px #0007}.arena-wrap:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 120%,#b9ff2118,transparent 48%);pointer-events:none;z-index:1}canvas{display:block;width:100%;height:100%;touch-action:none}.scanlines{position:absolute;inset:0;pointer-events:none;z-index:2;opacity:.13;background:repeating-linear-gradient(0deg,transparent 0 3px,#fff 4px)}.hud{position:absolute;left:18px;right:18px;top:16px;display:flex;justify-content:space-between;z-index:3;color:#aeb7b0;font:700 .72rem Arial,sans-serif;letter-spacing:.12em}.hud strong{color:white;font-size:1rem;margin-left:5px}.overlay{position:absolute;inset:0;z-index:8;display:grid;place-items:center;background:#050706b8;backdrop-filter:blur(8px);opacity:0;visibility:hidden;transition:.25s}.overlay.visible{opacity:1;visibility:visible}.overlay-card{text-align:center;max-width:430px;padding:26px}.mini-kicker{color:var(--lime);font-size:.8rem;letter-spacing:.3em;margin-bottom:9px}.overlay h1,.overlay h2{margin:0;font-size:clamp(2.7rem,7vw,5.8rem);line-height:.82;letter-spacing:-.06em;text-shadow:0 7px 0 #182013}.overlay h2{font-size:clamp(2.2rem,5vw,4.8rem)}.overlay p{font:600 clamp(.95rem,1.6vw,1.15rem)/1.5 Arial,sans-serif;color:#c2c9c3;margin:22px 0}.start-button{min-width:190px;border:0;border-radius:999px;background:var(--lime);color:#0a0d09;font:900 1rem Arial,sans-serif;letter-spacing:.12em;padding:18px 28px;box-shadow:0 0 34px #b9ff2150}.start-button:active{transform:scale(.97)}.trophy{font-size:3rem;color:var(--gold);margin-bottom:14px;filter:drop-shadow(0 0 15px #f5b80080)}
.dyu-watermark{position:absolute;z-index:1;left:50%;top:50%;width:min(34%,210px);aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;transform:translate(-50%,-50%) rotate(-10deg);border:5px double #fff;border-radius:50%;color:#fff;opacity:.14;pointer-events:none;text-align:center;filter:drop-shadow(0 0 10px #fff4)}.dyu-watermark:before,.dyu-watermark:after{content:"★";position:absolute;left:50%;transform:translateX(-50%);font-size:1rem}.dyu-watermark:before{top:9%}.dyu-watermark:after{bottom:8%}.dyu-watermark span{font-size:clamp(2rem,6vw,4.8rem);line-height:.8;font-weight:900;letter-spacing:-.07em}.dyu-watermark small{margin-top:9px;font:900 clamp(.48rem,1.25vw,.8rem)/1 Arial,sans-serif;letter-spacing:.22em}
.beer-panel{position:relative;overflow:hidden;border:1px solid #303a32;border-radius:24px;background:linear-gradient(180deg,#151a16,#0b0e0c);display:flex;flex-direction:column;align-items:center;padding:18px 18px 16px;box-shadow:inset 0 0 70px #0006}.panel-title{font-size:clamp(.7rem,1.2vw,.9rem);letter-spacing:.18em;color:#c2cbc4;text-align:center}.glass-wrap{position:relative;width:min(70%,190px);flex:1;min-height:190px;margin:14px 0 2px}.glass{position:absolute;inset:0 14% 0 0;border:5px solid #d9e1da;border-top-width:3px;border-radius:9px 9px 27px 27px;overflow:hidden;background:#ffffff09;box-shadow:inset 12px 0 18px #fff1,0 0 26px #fff1}.handle{position:absolute;right:0;top:24%;width:35%;height:48%;border:6px solid #d9e1da;border-left:0;border-radius:0 40px 40px 0}.beer-fill{position:absolute;left:0;right:0;bottom:0;height:0;background:linear-gradient(90deg,#d58b00,#ffcc19 52%,#d99000);transition:height .32s cubic-bezier(.2,.9,.3,1);box-shadow:0 -8px 25px #ffc40055}.foam{position:absolute;left:-3px;right:-3px;bottom:0;height:14px;transform:translateY(50%);background:#fffbe8;border-radius:50%;transition:bottom .32s cubic-bezier(.2,.9,.3,1),opacity .2s;opacity:0}.foam:before,.foam:after{content:"";position:absolute;background:#fffbe8;border-radius:50%}.foam:before{width:28px;height:22px;left:18%;top:-6px}.foam:after{width:34px;height:25px;right:18%;top:-8px}.glass-shine{position:absolute;left:12%;top:10%;bottom:12%;width:9%;border-radius:999px;background:#fff5}.bubbles{position:absolute;inset:0;background-image:radial-gradient(circle,#fff9 0 2px,transparent 3px),radial-gradient(circle,#fff7 0 1px,transparent 2px);background-size:31px 39px,23px 29px;animation:bubble 2.7s linear infinite}@keyframes bubble{to{background-position:0 -78px,0 -58px}}.percent{font-size:clamp(2.3rem,5vw,4.4rem);line-height:1;color:var(--gold);letter-spacing:-.06em}.percent small{font-size:.38em}.progress-track{width:100%;height:8px;background:#283029;border-radius:999px;margin-top:12px;overflow:hidden}.progress-track div{height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--lime));transition:width .3s}.progress-copy{font:700 .78rem Arial,sans-serif;letter-spacing:.08em;color:#aeb7b0;margin:12px 0 0;text-align:center}
.controls{display:grid;grid-template-columns:76px 1fr 76px;gap:12px;align-items:center}.control-button{height:64px;border:1px solid #3b463d;border-radius:18px;background:#151a16;color:var(--lime);font-size:1.55rem;box-shadow:inset 0 -4px 0 #070907}.control-button:active,.control-button.active{background:var(--lime);color:#080a08}.touch-tip{text-align:center;color:#939e96;font:700 clamp(.65rem,1.2vw,.85rem) Arial,sans-serif;letter-spacing:.15em}
@media (max-width:700px){.game-shell{grid-template-rows:55px 1fr 70px;padding:8px;gap:8px}.topbar{padding-bottom:7px}.brand span:last-child{display:none}.brand-mark,.icon-button{width:38px;height:38px}.status-pill{padding:7px 10px;font-size:.58rem}.play-layout{grid-template-columns:minmax(0,1fr) 118px;gap:7px}.arena-wrap,.beer-panel{border-radius:16px}.beer-panel{padding:11px 8px}.panel-title{font-size:.55rem}.glass-wrap{width:88%;min-height:150px;margin:8px 0}.glass{border-width:3px}.handle{border-width:4px}.progress-copy{font-size:.58rem}.controls{grid-template-columns:64px 1fr 64px;gap:7px}.control-button{height:56px}.touch-tip{font-size:.52rem}.hud{left:10px;right:10px;top:9px;font-size:.55rem}.hud strong{font-size:.72rem}.overlay-card{padding:15px}.overlay h1{font-size:clamp(2.4rem,12vw,4.2rem)}}
@media (orientation:portrait) and (min-width:701px){.play-layout{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) 230px}.beer-panel{display:grid;grid-template-columns:1fr 180px 130px;grid-template-rows:auto 1fr;column-gap:20px}.panel-title{grid-column:1}.glass-wrap{grid-column:2;grid-row:1/3;width:160px;min-height:180px}.percent{grid-column:3;grid-row:1}.progress-track,.progress-copy{grid-column:1;align-self:start}.progress-track{margin-top:20px}}

.bottle-wrap{position:relative;width:min(58%,150px);flex:1;min-height:220px;margin:14px 0 2px;padding-top:40px}.bottle-neck{position:absolute;z-index:2;top:0;left:31%;width:38%;height:64px;border:4px solid #8bc59d;border-bottom:0;border-radius:8px 8px 3px 3px;background:linear-gradient(90deg,#0a321d,#217544 50%,#0b3d23);box-shadow:inset 7px 0 9px #fff2,0 0 18px #4cc67633}.bottle-cap{position:absolute;top:-5px;left:-5px;right:-5px;height:14px;border:2px solid #d9e1da;border-radius:4px;background:repeating-linear-gradient(90deg,#d9e1da 0 3px,#8b958d 3px 5px)}.bottle{position:absolute;inset:40px 0 0;border:5px solid #8bc59d;border-radius:32% 32% 24px 24px/15% 15% 12px 12px;overflow:hidden;background:linear-gradient(90deg,#082817dd,#16683bbb 52%,#092d1bdd);box-shadow:inset 12px 0 18px #fff1,0 0 26px #36b56526}.bottle .beer-fill{z-index:1}.bottle .foam{z-index:2}.bottle-label{position:absolute;z-index:3;left:13%;right:13%;top:42%;padding:9px 3px 7px;border:2px solid #e9eee9;background:#0a0d0bdd;color:#fff;text-align:center;transform:rotate(-2deg);box-shadow:0 3px 12px #0008}.bottle-label b{display:block;font-size:1.25rem;letter-spacing:.04em}.bottle-label span{display:block;color:var(--lime);font:900 .58rem Arial,sans-serif;letter-spacing:.18em}.bottle-shine{position:absolute;z-index:4;left:14%;top:10%;bottom:12%;width:8%;border-radius:999px;background:#fff4}
@media (max-width:700px){.bottle-wrap{width:72%;min-height:175px;margin:8px 0;padding-top:30px}.bottle-neck{height:48px;border-width:3px}.bottle{inset:30px 0 0;border-width:3px}.bottle-label{padding:6px 2px 5px}.bottle-label b{font-size:.82rem}.bottle-label span{font-size:.43rem}}
@media (orientation:portrait) and (min-width:701px){.bottle-wrap{grid-column:2;grid-row:1/3;width:125px;min-height:190px}}
.mae-bottle{width:min(74%,185px);height:260px;flex:0 1 260px;min-height:180px;padding:0;overflow:hidden}.mae-bottle .bottle-ghost{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:grayscale(1) brightness(.38);opacity:.48}.bottle-reveal{position:absolute;z-index:2;left:0;right:0;bottom:0;height:0;overflow:hidden;transition:height .42s cubic-bezier(.2,.9,.3,1);filter:drop-shadow(0 0 16px #f5b80055)}.bottle-reveal img{position:absolute;left:0;right:0;bottom:0;width:100%;height:260px;object-fit:contain}.mae-bottle>.foam{z-index:3;left:22%;right:22%;height:10px;background:#fffbe8cc}.mae-bottle>.foam:before{width:22px;height:16px}.mae-bottle>.foam:after{width:25px;height:17px}
@media (max-width:700px){.mae-bottle{width:88%;height:175px;flex-basis:175px;padding:0}.bottle-reveal img{height:175px}}
@media (orientation:portrait) and (min-width:701px){.mae-bottle{width:145px;height:190px;flex-basis:190px}.bottle-reveal img{height:190px}}
.stage-marks{position:absolute;z-index:4;inset:0;pointer-events:none}.stage-marks span{position:absolute;left:2px;right:2px;bottom:calc(var(--p)*1%);height:1px;border-top:1px dashed #fff9;color:#fff;font:900 .58rem/1 Arial,sans-serif;text-align:right;text-shadow:0 1px 3px #000;transform:translateY(50%)}.stage-marks span:first-child{transform:translateY(100%)}.stage-marks span:last-child{transform:none}.mae-bottle[data-level="100"]{filter:drop-shadow(0 0 16px #f5b80099)}
@media (max-width:700px){.stage-marks span{font-size:.48rem}}
@media (max-width:700px){.dyu-watermark{width:min(46%,150px);border-width:3px}.dyu-watermark span{font-size:2.1rem}.dyu-watermark small{font-size:.45rem}}
.mae-bottle{width:min(100%,250px);height:auto;flex:1 1 auto;min-height:300px;margin:8px 0 2px}.bottle-reveal{inset:0;height:100%;overflow:hidden;clip-path:inset(100% 0 0 0);transition:clip-path .42s cubic-bezier(.2,.9,.3,1)}.bottle-reveal img{inset:0;width:100%;height:100%;object-fit:contain}.beer-panel{padding-left:10px;padding-right:10px}
@media (max-width:700px){.mae-bottle{width:100%;height:auto;flex:1 1 auto;min-height:210px;margin:5px 0}.bottle-reveal img{height:100%}.beer-panel{padding-left:4px;padding-right:4px}}
@media (orientation:portrait) and (min-width:701px){.mae-bottle{width:170px;height:auto;min-height:200px}.bottle-reveal img{height:100%}}
.play-layout{grid-template-columns:minmax(0,1fr) minmax(285px,36vw)}.mae-bottle{width:min(100%,350px);min-height:360px}.dyu-watermark{width:min(75%,650px);aspect-ratio:1;border:0;opacity:.20;transform:translate(-50%,-50%) rotate(-7deg);filter:drop-shadow(0 0 16px #fff5)}.dyu-watermark:before,.dyu-watermark:after{display:none}.dyu-watermark img{display:block;width:100%;height:100%;object-fit:contain}
@media (max-width:700px){.play-layout{grid-template-columns:minmax(0,1fr) 155px}.mae-bottle{width:100%;min-height:280px}.dyu-watermark{width:min(88%,420px);opacity:.18}}
@media (orientation:portrait) and (min-width:701px){.play-layout{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) 290px}.mae-bottle{width:230px;min-height:250px}.dyu-watermark{width:min(70%,600px)}}

/* Selección de jugadores y resultados multijugador */
.overlay-card{max-width:560px}
.overlay p{margin:18px 0}
.player-select{margin:0 0 18px;padding:0;border:0}
.player-select legend{width:100%;margin-bottom:10px;color:#c7d0c9;font:900 .74rem Arial,sans-serif;letter-spacing:.16em}
.player-options{display:flex;justify-content:center;gap:10px}
.player-count{width:54px;height:48px;border:1px solid #435044;border-radius:14px;background:#111713;color:#fff;font:900 1.15rem Arial,sans-serif;box-shadow:inset 0 -4px 0 #060806}
.player-count.active{border-color:var(--lime);background:var(--lime);color:#070a07;box-shadow:0 0 22px #b9ff2155}
.result-detail{margin-top:-12px!important;color:var(--gold)!important}
.rankings{display:grid;gap:6px;width:min(390px,78vw);margin:0 auto 18px;font:800 .78rem Arial,sans-serif}
.ranking-row{display:flex;justify-content:space-between;gap:18px;padding:8px 12px;border:1px solid #344037;border-radius:10px;background:#101511;color:#cbd3cd}
.ranking-row.winner{border-color:var(--lime);color:var(--lime)}
@media (max-width:700px){.player-select{margin-bottom:12px}.player-select legend{font-size:.62rem}.player-options{gap:7px}.player-count{width:44px;height:40px;border-radius:11px}.start-button{padding:14px 22px}.rankings{font-size:.66rem;gap:4px}.ranking-row{padding:6px 8px}.result-card .trophy{font-size:2rem;margin-bottom:7px}.result-card p{margin:10px 0}}

/* Resultado completo incluso en celulares y pantallas horizontales bajas */
#result{padding:10px;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y}
.result-card{width:min(100%,560px);max-height:100%;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;scrollbar-width:thin}
@media (max-height:700px){
  #result{place-items:center;padding:6px}
  .result-card{padding:8px 12px}
  .result-card .trophy{font-size:clamp(1.15rem,4vh,2rem);line-height:1;margin:0 0 4px}
  .result-card h2{font-size:clamp(1.35rem,7vh,3rem);line-height:.84}
  .result-card p{font-size:clamp(.7rem,2.4vh,.95rem);line-height:1.2;margin:6px 0}
  .result-card .result-detail{margin:2px 0 5px!important}
  .result-card .rankings{width:min(390px,92%);gap:3px;margin:3px auto 7px;font-size:clamp(.58rem,1.9vh,.72rem)}
  .result-card .ranking-row{padding:4px 8px}
  .result-card .start-button{min-width:165px;padding:9px 18px;font-size:.78rem}
}
@media (max-height:470px){
  .result-card .trophy{display:none}
  .result-card h2{font-size:clamp(1.2rem,6.5vh,1.8rem);line-height:.88}
  .result-card p{margin:3px 0}
  .result-card .rankings{gap:2px;margin:2px auto 5px}
  .result-card .ranking-row{padding:3px 7px}
  .result-card .start-button{padding:7px 16px}
}