
:root{--ink:#203b32;--green:#174c3c;--mint:#dce8dc;--paper:#fffcf1;--red:#ba3f32;--gold:#ecb953;--line:#d9dfd2;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:#f3f2e9;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer;border:0;border-radius:10px;background:var(--green);color:white;padding:13px 18px;font-weight:700;min-height:44px}button:disabled{opacity:.45;cursor:not-allowed}button.secondary{background:#e6ebe1;color:var(--green)}button.danger{background:#f6e4dc;color:#a33228}button.gold{background:var(--gold);color:#342c16}button:focus-visible,a:focus-visible{outline:3px solid #bf6f1f;outline-offset:3px}a{color:var(--green)}input,select{width:100%;border:1px solid #bdc9bd;border-radius:8px;background:#fffef8;padding:12px;color:var(--ink);min-height:45px}label{display:grid;gap:7px;font-size:14px;font-weight:700;margin:15px 0}small,.muted{color:#637467;line-height:1.6}h1,h2,h3,p{margin-top:0}h1{font-family:Georgia,serif;font-size:clamp(38px,5vw,68px);line-height:1.06;letter-spacing:-2px}h2{font-family:Georgia,serif;font-size:30px;letter-spacing:-.5px}h3{font-size:17px}p{line-height:1.6}.top{height:85px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;max-width:1400px;margin:auto;padding:0 32px}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-weight:900;font-size:23px}.brand em{display:block;font-size:12px;font-weight:400;font-style:normal;letter-spacing:2px;text-transform:uppercase;margin-top:3px}.brand-ball{display:grid;place-items:center;width:42px;height:42px;border:7px solid var(--red);border-radius:50%;background:white;font-family:Georgia,serif}.badge,.eyebrow{font-size:11px;letter-spacing:2px;font-weight:800}.badge{padding:9px 12px;border:1px solid #cad4c5;border-radius:30px}.eyebrow{color:#9c562c;margin-bottom:18px;display:block}main{max-width:1300px;margin:auto;padding:30px 32px 70px}.hero{display:grid;grid-template-columns:1fr 1fr;gap:65px;align-items:center;padding:40px 0 70px}.hero p{max-width:470px;color:#627364}.hero .actions{margin:25px 0}.actions{display:flex;gap:10px;flex-wrap:wrap}.panel{border:1px solid var(--line);background:#fffef8;border-radius:18px;padding:26px;box-shadow:0 6px 24px #213c3105}.setup{max-width:670px;margin:20px auto}.two{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}.separator{border-top:1px solid var(--line);padding-top:20px;margin-top:24px}.layout{display:grid;grid-template-columns:minmax(290px,380px) 1fr;gap:24px;align-items:start}.room-head{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:24px}.room-head h2{margin-bottom:5px}.status{font-size:12px;font-weight:700;border-radius:20px;padding:8px 12px;background:var(--mint);white-space:nowrap}.drum-panel{background:var(--green);color:#fff9e9;border-radius:20px;padding:24px;position:relative;overflow:hidden}.drum-panel .muted{color:#bfcebe}.drum{height:255px;max-width:360px;margin:0 auto;position:relative;display:grid;place-items:center;perspective:600px}.cage{position:absolute;width:205px;height:205px;border:5px solid #dfb657;border-radius:50%;background:radial-gradient(ellipse at 35% 25%,#ffffff13,transparent 60%);box-shadow:inset 0 0 0 7px #caa55635,0 0 40px #061e2233;transform:rotate(-15deg)}.cage::before,.cage::after{content:'';position:absolute;inset:0;border-radius:50%;border:3px solid #c6a35d}.cage::before{transform:rotateY(60deg)}.cage::after{transform:rotateX(60deg)}.wires{position:absolute;inset:15px -3px;border-top:2px solid #dfb657a0;border-bottom:2px solid #dfb657a0;border-radius:50%;transform:rotate(45deg)}.wires::after{content:'';position:absolute;inset:30px -3px;border-top:2px solid #dfb657a0;border-bottom:2px solid #dfb657a0;border-radius:50%;transform:rotate(-90deg)}.crank{position:absolute;right:-39px;top:90px;width:35px;height:30px;border-top:5px solid #dfb657;border-right:5px solid #dfb657}.crank::after{content:'';position:absolute;right:-9px;bottom:-5px;width:14px;height:24px;background:#ab4c34;border-radius:5px}.stand{position:absolute;bottom:5px;width:155px;height:40px;border-left:8px solid #d7b064;border-right:8px solid #d7b064;border-bottom:8px solid #d7b064;transform:perspective(100px) rotateX(20deg)}.tiny-ball{position:absolute;border-radius:50%;width:30px;height:30px;background:var(--ball,#f1b84a);color:#203b32;font-weight:bold;font-size:12px;display:grid;place-items:center;border:4px solid #ffffff70;box-shadow:2px 4px 5px #0004}.spinning .cage{animation:spin 1s ease-in-out}.spinning .tiny-ball{animation:bounce .3s alternate infinite}.current-ball{position:relative;z-index:2;width:108px;height:108px;border:11px solid var(--red);border-radius:50%;background:#fffaf0;color:var(--ink);display:flex;flex-direction:column;justify-content:center;align-items:center;box-shadow:0 8px 0 #0002,0 18px 30px #0004;margin:0 auto}.current-ball b{font-size:46px;line-height:1}.current-ball span{font-weight:900;font-size:15px}.drum-caption{text-align:center;font-size:11px;letter-spacing:2px;color:#dfc58c;margin:15px 0}.drum-panel .actions button{flex:1}.recent{display:flex;gap:7px;justify-content:center;margin:20px 0}.recent span{display:grid;place-items:center;border:1px solid #ffffff35;border-radius:50%;width:42px;height:42px;font-size:13px}.recent span:first-child{background:var(--gold);color:var(--ink);border:0}.board{display:grid;grid-template-columns:repeat(15,1fr);gap:4px;margin-top:15px}.board span{aspect-ratio:1;display:grid;place-items:center;background:#e9ede5;color:#788477;border-radius:50%;font-size:11px}.board span.called{background:var(--green);color:white}.board span.latest{background:var(--red)}.board-label{font-size:11px;font-weight:800;letter-spacing:2px;margin:20px 0 5px}.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}.ticket{background:var(--paper);border:1px solid #c7bda2;padding:12px;box-shadow:3px 6px 0 #d9d6c7;border-radius:3px;position:relative}.ticket:nth-child(3n+2){--ticket:#28578e}.ticket:nth-child(3n+3){--ticket:#a37423}.ticket{--ticket:var(--red)}.ticket-top{display:flex;justify-content:space-between;align-items:center;color:var(--ticket);font-size:11px;font-weight:900;letter-spacing:1px;padding:3px 1px 11px}.ticket-grid{display:grid;grid-template-columns:repeat(5,1fr);border-top:2px solid var(--ticket);border-left:2px solid var(--ticket)}.letter{background:var(--ticket);color:#fffcf0;text-align:center;font-size:27px;font-weight:900;padding:7px 0;border-right:2px solid var(--ticket)}.cell{aspect-ratio:1;min-height:44px;position:relative;border-radius:0;background:transparent;color:#242c25;border-right:2px solid var(--ticket);border-bottom:2px solid var(--ticket);padding:0;font-size:clamp(22px,3vw,30px);font-weight:800;display:grid;place-items:center}.cell:disabled{opacity:1}.cell.marked::after{content:'';position:absolute;width:77%;height:77%;border-radius:50%;background:#c43d3550;border:2px solid #a72d2c99;box-shadow:inset 0 0 0 3px #ffffff30}.cell.free{font-size:10px;color:var(--ticket);line-height:1.3;text-align:center}.cell.hint{background:#f4df9a}.ticket-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px;font-size:10px;color:#716954}.ticket-foot button{padding:7px 10px;min-height:36px;font-size:12px;background:var(--ticket)}.player-top{position:sticky;top:0;z-index:5;background:#f3f2e9f5;backdrop-filter:blur(10px);padding:12px 0;border-bottom:1px solid var(--line);margin-bottom:22px;display:flex;gap:15px;align-items:center;justify-content:space-between}.player-top .current-ball{width:67px;height:67px;border-width:6px;margin:0;flex-shrink:0}.player-top .current-ball b{font-size:30px}.player-top .current-ball span{font-size:10px}.player-top p{margin:0;font-size:13px}.compact{display:flex;gap:12px;align-items:center}.notice{padding:15px 18px;border:1px solid #dfc586;background:#fff5d9;border-radius:10px;margin:18px 0;font-size:14px;line-height:1.6}.success{background:#e6f0df;border-color:#b6cba9}.person{display:flex;justify-content:space-between;gap:15px;padding:17px 0;border-bottom:1px solid var(--line);align-items:center}.person strong,.person small{display:block}.person button{font-size:12px;padding:9px}.qr{max-width:220px;max-height:240px;display:block;margin:20px auto;object-fit:contain}.linkbox{background:#edf0e7;border:1px dashed #a6b79d;padding:12px;border-radius:8px;overflow-wrap:anywhere;font-size:13px}.claim{padding:16px;border:1px solid #d9c88a;background:#fff7da;border-radius:10px;margin:12px 0}.claim b{display:block;margin-bottom:8px}details{margin:18px 0}summary{cursor:pointer;font-weight:700;padding:10px 0}#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);background:#243e32;color:white;border-radius:10px;padding:15px 22px;max-width:90vw;z-index:100;display:none}#toast.show{display:block}.offline{background:#f7ddd2;border:1px solid #bf6c50;padding:12px;border-radius:8px;margin-bottom:15px}.steps{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);gap:30px;padding-top:26px}.steps b{font-family:Georgia,serif;font-size:24px;color:var(--red);display:block;margin-bottom:9px}.steps p{font-size:14px;color:#637467}.hero-art{position:relative;min-height:420px;background:#e2e8d9;border-radius:50% 50% 18px 18px;display:grid;place-items:center}.hero-art .drum-panel{width:82%;transform:rotate(-3deg);box-shadow:10px 15px 0 #bcc9b7}.hero-art .label{position:absolute;bottom:15px;right:-6px;background:var(--gold);padding:15px 20px;transform:rotate(-5deg);font-family:Georgia,serif;font-size:20px;font-weight:bold}.present .layout{grid-template-columns:1fr 1fr}.present .drum{height:400px}.present .cage{width:300px;height:300px}.present .current-ball{width:150px;height:150px}.present .current-ball b{font-size:70px}.present .board span{font-size:18px}.present .top{display:none}@keyframes spin{from{transform:rotate(-15deg)}to{transform:rotate(345deg)}}@keyframes bounce{to{translate:0 -50px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}}@media(max-width:760px){.top{height:72px;padding:0 18px}.top .badge{display:none}main{padding:22px 16px 50px}.hero{grid-template-columns:1fr;gap:30px;padding:15px 0 40px}.hero-art{min-height:350px}.hero h1{max-width:400px}.layout,.present .layout{grid-template-columns:1fr}.room-head{align-items:start}.room-head h2{font-size:27px}.panel{padding:18px}.cards{grid-template-columns:1fr}.cell{font-size:32px}.ticket{padding:14px}.player-top .actions{gap:5px}.player-top button{font-size:11px;padding:8px}.two{grid-template-columns:1fr}.steps{grid-template-columns:1fr;gap:10px}.person{align-items:start;flex-wrap:wrap}.board{gap:3px}.board span{font-size:10px}.player-top{top:0}.present .drum{height:300px}}


/* El tablero es el centro del panel del anfitrión. */
.draw-stage{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;align-items:start}
.master-board{padding:28px;min-width:0;background:#fffdf3;border:2px solid #c4cfbd}
.master-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}
.master-heading h2{font-size:36px;margin-bottom:0}.master-heading .eyebrow{margin-bottom:10px}
.master-legend{display:flex;gap:18px;flex-wrap:wrap;margin:22px 0 28px;font-size:12px;color:#5d705f}
.master-legend .last-label{color:var(--red);font-weight:bold}
.master-rows{display:grid;gap:16px}.master-row{display:grid;grid-template-columns:38px 1fr;gap:12px;align-items:center}
.master-letter{font-size:29px;font-weight:900;color:var(--green);text-align:center}
.master-numbers{display:grid;grid-template-columns:repeat(15,minmax(0,1fr));gap:5px}
.master-number{aspect-ratio:1;display:grid;place-items:center;min-height:32px;border-radius:50%;border:1px solid #d2d9ca;background:#eeeee2;color:#6c796b;font-size:18px;font-weight:800;font-variant-numeric:tabular-nums}
.master-number.called{background:var(--green);color:white;border-color:var(--green)}
.master-number.latest{background:var(--red);color:white;border-color:var(--red);box-shadow:0 0 0 3px #ba3f3224;transform:scale(1.08)}
.draw-controls .drum-panel{padding:19px}.draw-controls .drum{height:245px}.draw-controls .notice{font-size:12px}
.host-management{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start;margin-top:32px;padding-top:28px;border-top:1px solid var(--line)}
.host-management>.separator{margin:0}.host-management>details{grid-column:1/-1}
.present .draw-stage{grid-template-columns:minmax(0,1fr) 300px}.present .host-management{display:none}
@media(min-width:1100px){.master-number{font-size:21px}.master-rows{gap:26px}.master-row{padding:10px 0}.master-board{min-height:510px}}
@media(max-width:1050px){.draw-stage,.present .draw-stage{grid-template-columns:1fr}.draw-controls{display:grid;grid-template-columns:minmax(260px,1fr) 1fr;gap:16px}.draw-controls>.drum-panel{grid-row:span 2}.master-number{font-size:22px;min-height:36px}.master-board{padding:22px}}
@media(max-width:600px){.master-heading h2{font-size:27px}.master-heading .eyebrow{font-size:9px;letter-spacing:1px}.master-board{padding:15px}.master-row{grid-template-columns:26px 1fr;gap:8px}.master-letter{font-size:25px}.master-numbers{grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}.master-number{font-size:22px;min-height:40px}.master-rows{gap:18px}.master-row+.master-row{border-top:1px solid var(--line);padding-top:18px}.master-legend{font-size:11px;gap:10px;margin:18px 0}.draw-controls,.host-management{grid-template-columns:1fr}.host-management{gap:18px}.draw-controls>.drum-panel{grid-row:auto}}

.claim-stop{display:flex;justify-content:space-between;align-items:center;gap:16px;background:#fff0d4;border:2px solid #bd6d31;border-radius:14px;padding:18px 22px;margin-bottom:22px}.claim-stop strong{font-size:20px;color:#8b3e23}.claim-stop p{margin:6px 0 0;font-size:14px}.claim-stop button{flex-shrink:0;background:#963c28}
.claim-alert{width:min(600px,calc(100% - 32px));max-height:85vh;overflow-y:auto;border:0;border-radius:20px;padding:0;background:#fffdf4;color:var(--ink);box-shadow:0 30px 100px #0005}.claim-alert::backdrop{background:#102a24b8;backdrop-filter:blur(4px)}.claim-alert-head{padding:28px 28px 15px;border-bottom:1px solid var(--line)}.claim-alert-head .eyebrow{color:#a03e26;margin-bottom:12px}.claim-alert-head h2{font-size:35px;margin-bottom:10px}.claim-alert-head p{color:#637467;font-size:14px;margin-bottom:8px}.claim-result{margin:20px 28px;padding:20px;border-radius:12px;border:1px solid #dcb7a2;background:#fff1e5}.claim-result.valid{background:#eaf3e3;border-color:#b4cfa5}.claim-person{font-size:25px;font-weight:800}.claim-result p{font-size:14px;margin:8px 0}.claim-verdict{display:block;margin-top:18px;color:#9f4026;font-size:17px}.valid .claim-verdict{color:#215e37}.claim-alert-footer{padding:0 28px 28px}.claim-alert-footer p{font-size:13px;color:#637467}.claim-alert-footer button{width:100%}@media(max-width:600px){.claim-stop{align-items:stretch;flex-direction:column}.claim-alert-head,.claim-alert-footer{padding:22px}.claim-result{margin:16px 22px}.claim-alert-head h2{font-size:29px}}

.prize-panel{display:flex;justify-content:space-between;align-items:center;gap:20px;background:#174c3c;color:#fff9e8;border-radius:16px;padding:22px 28px;margin:0 0 24px}.prize-panel .eyebrow{color:#efd18e;margin-bottom:8px}.prize-panel strong{display:block;font-size:42px;letter-spacing:-1px}.prize-panel small{display:block;color:#d3dfca;margin-top:5px}.prize-private{display:grid;gap:8px;border-left:1px solid #ffffff40;padding-left:25px;font-size:14px}.prize-private b{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:#efd18e}.payout-panel{margin-bottom:24px;border:2px solid #d3b66f}.payout-panel>p{font-size:14px;color:#637467}.payout-row{display:flex;justify-content:space-between;gap:18px;align-items:center;padding:18px 0;border-top:1px solid var(--line)}.payout-row p{margin:7px 0}.card-ready{background:#e7efcf;color:#355629;font-size:12px;font-weight:700;padding:10px;margin-top:10px}.auto-label{font-size:11px;color:var(--green);background:#e2ead9;padding:10px;border-radius:8px}.cell{cursor:default}.cell.marked{pointer-events:none}@media(max-width:600px){.prize-panel{align-items:start;flex-direction:column;padding:20px}.prize-private{border-left:0;border-top:1px solid #ffffff40;padding:15px 0 0;width:100%}.payout-row{align-items:stretch;flex-direction:column}}

.closed-summary{margin-bottom:24px;border:2px solid #9bb88d;background:#f0f5e7}.closed-summary .eyebrow{color:#35643d}.closed-summary p{font-size:14px}
