:root { --ink:#241b35; --purple:#6d3ee8; --coral:#ff5c57; --yellow:#ffd84d; --cream:#fff8e9; --mint:#baf0d3; --line:#2c2340; }
* { box-sizing:border-box; }
html { background:var(--cream); }
body { margin:0; color:var(--ink); background:var(--cream); font-family:var(--font-body),sans-serif; }
button,input,textarea { font:inherit; }
button { color:inherit; }
.site-shell { min-height:100vh; overflow:hidden; }
.topbar { height:86px; max-width:1240px; margin:auto; padding:0 34px; display:flex; align-items:center; justify-content:space-between; position:relative; z-index:20; }
.logo { border:0; background:transparent; display:flex; align-items:center; gap:9px; cursor:pointer; padding:0; }
.logo-ball { width:48px; height:48px; border:3px solid var(--ink); border-radius:50%; display:grid; place-items:center; background:var(--coral); color:white; font:900 24px/1 var(--font-display); transform:rotate(-8deg); box-shadow:3px 3px 0 var(--ink); }
.logo-copy { display:flex; line-height:.72; flex-direction:column; align-items:flex-start; font-family:var(--font-display); }
.logo-copy strong { font-size:27px; letter-spacing:1px; }
.logo-copy em { font-style:normal; font-weight:900; color:var(--coral); font-size:22px; letter-spacing:3px; }
.nav-actions { display:flex; gap:24px; align-items:center; }
.text-button { border:0; background:transparent; font-weight:900; cursor:pointer; }
.pill-button { border:3px solid var(--ink); border-radius:999px; padding:15px 25px; font-weight:900; box-shadow:4px 5px 0 var(--ink); cursor:pointer; transition:.16s transform,.16s box-shadow; }
.pill-button:hover { transform:translate(2px,2px); box-shadow:2px 3px 0 var(--ink); }
.pill-button:active { transform:translate(4px,5px); box-shadow:0 0 0 var(--ink); }
.pill-button.small { padding:11px 20px; }
.pill-button.purple { background:var(--purple); color:white; }
.pill-button.coral { background:var(--coral); color:white; }
.pill-button.cream { background:white; }
.pill-button.yellow { background:var(--yellow); }
.pill-button.wide { width:100%; }
.hero { min-height:650px; background:var(--yellow); border-block:3px solid var(--ink); position:relative; display:grid; grid-template-columns:1fr 1fr; padding:70px max(6vw,34px); overflow:hidden; }
.hero:before { content:""; position:absolute; inset:0; opacity:.11; background-image:radial-gradient(var(--ink) 1.2px, transparent 1.2px); background-size:18px 18px; }
.hero-copy,.hero-art { position:relative; z-index:2; }
.hero-copy { max-width:650px; }
.eyebrow { display:inline-flex; align-items:center; gap:8px; color:#513c00; font-size:12px; letter-spacing:2px; font-weight:900; }
.eyebrow span { color:var(--coral); }
.eyebrow.dark { color:var(--purple); }
.hero h1,.auth-copy h1,.page-title h1,.wait-card h1 { font:900 clamp(58px,6.4vw,96px)/.83 var(--font-display); text-transform:uppercase; margin:22px 0 25px; letter-spacing:-2px; }
mark { background:transparent; color:var(--coral); position:relative; }
.hero h1 mark { color:var(--purple); text-shadow:3px 3px 0 white; }
.hero-copy>p { max-width:510px; font-size:18px; line-height:1.6; font-weight:700; }
.hero-buttons { display:flex; gap:15px; margin:32px 0 25px; }
.micro-proof { font-size:12px; font-weight:800; }
.micro-proof span { color:var(--coral); letter-spacing:2px; }
.hero-art { min-height:480px; display:grid; place-items:center; }
.mini-card { width:min(390px,75%); background:white; border:5px solid var(--ink); border-radius:26px; padding:22px; transform:rotate(5deg); box-shadow:15px 18px 0 var(--purple); position:relative; }
.mini-title { font:900 30px var(--font-display); text-align:center; margin-bottom:14px; }
.mini-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:7px; }
.mini-grid span { aspect-ratio:1; display:grid; place-items:center; border:2px solid var(--ink); border-radius:8px; font-weight:900; background:#fff9ec; }
.mini-grid .hit { color:white; background:var(--coral); box-shadow:inset 0 0 0 4px #ff9e88; }
.stamp { position:absolute; right:-45px; bottom:42px; color:white; background:var(--coral); border:4px solid var(--ink); border-radius:50%; width:110px; height:110px; display:grid; place-items:center; font:900 29px var(--font-display); transform:rotate(-13deg); }
.burst { position:absolute; top:12px; right:28px; color:white; background:var(--coral); clip-path:polygon(50% 0,61% 25%,83% 8%,80% 35%,100% 39%,78% 56%,94% 77%,67% 72%,64% 100%,47% 78%,28% 96%,31% 69%,4% 73%,24% 52%,0 39%,28% 32%,19% 7%,42% 25%); width:130px; aspect-ratio:1; display:grid; place-items:center; font:900 30px var(--font-display); transform:rotate(10deg); }
.floating-ball { position:absolute; width:76px; height:76px; display:grid; place-items:center; background:white; border:4px solid var(--ink); border-radius:50%; font:900 14px/.9 var(--font-display); box-shadow:5px 6px 0 var(--ink); text-align:center; z-index:3; }
.floating-ball b { font-size:28px; }.ball-a{left:8%;top:18%;transform:rotate(-13deg)}.ball-b{right:1%;bottom:12%;background:var(--mint);transform:rotate(12deg)}.ball-c{left:4%;bottom:3%;background:#ffb5d6;}
.confetti { position:absolute; font-size:40px; font-weight:900; z-index:1; }.c1{left:2%;top:9%;color:var(--coral)}.c2{left:48%;bottom:4%;color:var(--purple)}.c3{right:2%;top:40%;color:white;transform:rotate(20deg)}
.how { max-width:1180px; margin:auto; padding:85px 35px 100px; }
.section-heading { text-align:center; }.section-heading>span { color:var(--coral); font-size:12px; letter-spacing:2px; font-weight:900; }.section-heading h2 { font:900 48px var(--font-display); text-transform:uppercase; margin:8px 0 44px; }
.how-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:25px; }
.how-grid article { background:white; border:3px solid var(--ink); border-radius:24px; padding:28px; box-shadow:7px 8px 0 var(--ink); position:relative; }
.how-grid article>b { position:absolute; right:23px; top:15px; color:#e4dfd3; font:900 45px var(--font-display); }
.how-icon,.icon-box { display:grid; place-items:center; width:62px; height:62px; border:3px solid var(--ink); border-radius:16px; font-size:28px; transform:rotate(-3deg); }
.purple-bg{background:#c7b1ff}.yellow-bg{background:var(--yellow)}.coral-bg{background:#ff9b8c}
.how-grid h3 { font:900 27px var(--font-display); text-transform:uppercase; margin:20px 0 5px; }.how-grid p { color:#766e7f; font-weight:700; line-height:1.55; }
.flow-page { min-height:calc(100vh - 86px); padding:30px 35px 80px; background:linear-gradient(135deg,#fff8e9 0%,#fff8e9 65%,#f1eaff 65%); }
.flow-page.compact { padding-top:22px; }
.steps { max-width:630px; margin:0 auto 40px; display:flex; justify-content:space-between; position:relative; }
.steps:before { content:""; height:3px; background:#dcd4c5; position:absolute; top:17px; left:8%; right:8%; }
.step { z-index:1; display:flex; flex-direction:column; align-items:center; gap:5px; color:#afa795; font-weight:800; }
.step span { width:36px; height:36px; border:3px solid #dcd4c5; background:var(--cream); display:grid; place-items:center; border-radius:50%; }
.step.active { color:var(--purple); }.step.active span { background:var(--purple); color:white; border-color:var(--ink); box-shadow:2px 2px 0 var(--ink); }
.step small { font-size:11px; }
.auth-layout { max-width:1080px; margin:auto; display:grid; grid-template-columns:.9fr 1.1fr; align-items:center; gap:80px; }
.auth-copy { position:relative; }.auth-copy h1 { font-size:64px; }.auth-copy p { color:#71697a; font-size:17px; line-height:1.6; font-weight:700; max-width:440px; }
.character { width:95px; height:95px; display:grid; place-items:center; font-size:55px; background:var(--yellow); border:4px solid var(--ink); border-radius:45% 55% 48% 52%; box-shadow:7px 7px 0 var(--ink); transform:rotate(-5deg); }
.player-character { background:#ffb5d6; }.speech { position:absolute; top:20px; left:112px; background:white; border:3px solid var(--ink); border-radius:18px; padding:10px 14px; font-weight:900; font-size:13px; transform:rotate(2deg); }
.form-card,.panel { background:white; border:3px solid var(--ink); border-radius:25px; box-shadow:8px 9px 0 var(--ink); padding:34px; }
.form-card { max-width:540px; }
.form-title,.panel-title { display:flex; align-items:center; gap:15px; margin-bottom:26px; }.form-title>span { font-size:38px; }.form-title small,.panel-title small,.purchase-card>small { color:var(--purple); font-size:10px; font-weight:900; letter-spacing:1.5px; }.form-title h2,.panel-title h2 { margin:2px 0 0; font:900 27px var(--font-display); text-transform:uppercase; }
.field { display:flex; flex-direction:column; gap:7px; margin-bottom:17px; }.field>span,.game-mode>span { font-size:12px; font-weight:900; }
.field input,.field textarea,.manual-number input { width:100%; border:2px solid #ded8cc; border-radius:12px; padding:13px 14px; outline:0; background:#fffcf5; color:var(--ink); font-weight:700; }.field input:focus,.field textarea:focus { border-color:var(--purple); box-shadow:0 0 0 3px #e6dcff; }.field textarea{min-height:75px;resize:vertical}
.check { display:flex; align-items:flex-start; gap:10px; color:#756e7c; font-size:11px; font-weight:700; margin:3px 0 20px; }.check input { accent-color:var(--purple); }
.login-hint { text-align:center; font-size:12px; font-weight:700; margin:18px 0 0; }.login-hint button { border:0; background:transparent; color:var(--purple); font-weight:900; cursor:pointer; }
.page-title { max-width:1130px; margin:0 auto 25px; display:flex; justify-content:space-between; align-items:flex-end; }.page-title h1 { font-size:52px; margin:10px 0 0; }.doodle{font-size:60px;color:var(--coral);transform:rotate(-15deg)}
.setup-grid,.checkout-grid { max-width:1130px; margin:auto; display:grid; grid-template-columns:1.45fr .8fr; gap:24px; align-items:start; }
.setup-form { box-shadow:5px 6px 0 var(--ink); }.preview-panel { background:#f1eaff; box-shadow:5px 6px 0 var(--ink); }.two-fields { display:grid; grid-template-columns:1fr 1fr; gap:15px; }.money-input { display:flex; border:2px solid #ded8cc; border-radius:12px; overflow:hidden; background:#fffcf5; }.money-input b { padding:13px;background:var(--yellow);border-right:2px solid #ded8cc}.money-input input{border:0;border-radius:0}.game-mode>div { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:8px; }.mode { border:2px solid #ded8cc; border-radius:12px; padding:12px 8px; font-size:11px; font-weight:800; text-align:center; }.mode input{display:none}.mode b{display:block;font-size:20px}.mode.active{border-color:var(--purple);background:#f1eaff;color:var(--purple)}
.preview-label { text-align:center; font-size:10px; letter-spacing:2px; font-weight:900; color:var(--purple); margin-bottom:12px; }.room-ticket,.product-card { overflow:hidden; }.room-ticket { background:white; border:3px solid var(--ink); border-radius:20px; transform:rotate(-1deg); box-shadow:5px 5px 0 var(--coral); margin-bottom:20px; }.ticket-top,.room-banner { background:var(--purple); color:white; padding:16px; text-align:center; display:flex; flex-direction:column; font-family:var(--font-display); }.ticket-top span,.room-banner span{font-weight:700;letter-spacing:4px}.ticket-top b,.room-banner b{font-size:26px;line-height:1}.ticket-top small,.room-banner small{margin-top:7px;color:var(--yellow);font-family:var(--font-body);font-weight:900}.ticket-prize { padding:19px;text-align:center;position:relative}.ticket-prize small{font-weight:900}.ticket-prize strong{display:block;font:900 50px var(--font-display);color:var(--coral)}.ticket-prize span{position:absolute;right:18px;top:28px;font-size:32px}.ticket-info{display:grid;grid-template-columns:1fr 1fr;border-top:2px dashed #cfc7ba}.ticket-info>span{padding:12px;text-align:center;font-weight:900}.ticket-info>span+span{border-left:2px dashed #cfc7ba}.ticket-info small{display:block;font-size:8px}.ticket-code{background:var(--yellow);padding:9px;text-align:center;font-size:10px;font-weight:900}.summary{font-size:10px;margin:17px 0;display:flex;flex-direction:column;gap:8px}.summary span i,.availability i{display:inline-block;width:8px;height:8px;background:#28b675;border-radius:50%;margin-right:5px}.summary b{display:flex;justify-content:space-between}.summary strong{font-size:16px;color:var(--purple)}
.dashboard { min-height:100vh; background:#f7f3ea; display:grid; grid-template-columns:238px minmax(0,1fr); }.sidebar { background:var(--purple); color:white; padding:25px 18px; display:flex; flex-direction:column; min-height:100vh; height:100vh; position:sticky; top:0; overflow-y:auto; }.sidebar .logo-copy strong{color:white}.sidebar .logo-copy em{color:var(--yellow)}.side-user{display:flex;gap:10px;align-items:center;margin:32px 0 23px;padding:14px 8px;border-block:1px solid #ffffff38}.side-user>span{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--yellow);color:var(--ink);font-weight:900}.side-user div{display:flex;flex-direction:column}.side-user small{font-size:9px;color:#d9cdff}.sidebar nav{display:flex;flex-direction:column;gap:5px}.sidebar nav button{border:0;background:transparent;color:#ddd3ff;text-align:left;padding:11px 12px;border-radius:10px;font-weight:800;cursor:pointer}.sidebar nav button.active{background:white;color:var(--purple)}.side-help{margin-top:auto;background:#5b31c7;border:2px solid #a789ff;border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:5px}.side-help>b{font-size:12px}.side-help small{font-size:9px;color:#d8cbff}.side-help button{border:0;background:var(--yellow);border-radius:8px;padding:7px;font-size:9px;font-weight:900;margin-top:5px}.dash-content{padding:35px 4vw;min-width:0}.host-dashboard-content{background:linear-gradient(135deg,#fff8e9 0%,#fff8e9 65%,#f1eaff 65%)}.host-flow-content{background:linear-gradient(135deg,#fff8e9 0%,#fff8e9 65%,#f1eaff 65%)}.dash-head{display:flex;justify-content:space-between;align-items:start;margin-bottom:28px}.dash-head h1{font:900 38px var(--font-display);text-transform:uppercase;margin:7px 0 2px}.dash-head p{margin:0;font-size:11px;color:#756e7c}.live-dot{color:#20a66a;background:#dcf8e9;border-radius:999px;padding:5px 9px;font-size:8px;font-weight:900;letter-spacing:1px}.outline-button{background:white;border:2px solid var(--ink);border-radius:10px;padding:10px 14px;font-size:10px;font-weight:900;box-shadow:3px 3px 0 var(--ink);cursor:pointer}.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:20px}.stats-grid article{background:white;border:2px solid var(--ink);border-radius:17px;padding:18px;box-shadow:3px 4px 0 var(--ink);display:flex;gap:13px;align-items:center;position:relative}.stats-grid article>span{font-size:25px}.stats-grid div{display:flex;flex-direction:column}.stats-grid strong{font:900 29px var(--font-display)}.stats-grid small{font-size:9px;color:#807887;font-weight:700}.stats-grid article>b{position:absolute;right:12px;top:12px;background:#eee7ff;color:var(--purple);font-size:8px;border-radius:7px;padding:4px 6px}.stats-grid article>b.green{background:#d9f8e7;color:#168656}.host-grid{display:grid;grid-template-columns:1.45fr .75fr;gap:20px}.host-grid .panel{box-shadow:4px 5px 0 var(--ink);padding:27px}.invite-card>p{font-size:12px;color:#756e7c}.copy-box{display:flex;border:2px dashed var(--purple);background:#f3eeff;border-radius:12px;padding:6px 7px 6px 12px;align-items:center;margin:20px 0 12px}.copy-box span{font-size:11px;font-weight:800;flex:1;color:var(--purple)}.copy-box button{border:0;background:var(--purple);color:white;border-radius:8px;padding:8px 12px;font-size:9px;font-weight:900;cursor:pointer}.share-buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.share-buttons button{border:2px solid #ddd7cc;border-radius:9px;background:white;padding:9px 5px;font-size:9px;font-weight:800}.sales-row{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;margin-top:25px;font-size:9px}.sales-row>div{height:10px;background:#e8e1d5;border-radius:10px;overflow:hidden}.sales-row i{display:block;height:100%;background:var(--coral);border-radius:10px}.ready-card{text-align:center;background:#fff8df!important}.countdown-orb{width:130px;height:130px;margin:-2px auto 15px;border-radius:50%;background:var(--yellow);border:3px solid var(--ink);background:var(--yellow);display:flex;flex-direction:column;justify-content:center;box-shadow:5px 5px 0 var(--ink)}.countdown-orb span{font-size:20px}.countdown-orb b{font:900 32px var(--font-display)}.countdown-orb small{font-size:8px;font-weight:900}.ready-card h2{font:900 27px var(--font-display);margin:0}.ready-card>p{font-size:10px;color:#766e7c}.ready-card ul{text-align:left;padding:0;list-style:none;font-size:10px;line-height:2;margin:14px 0}.live-host-grid{display:grid;grid-template-columns:1.5fr .8fr;gap:22px}.draw-stage{min-height:560px;background:var(--purple);border:3px solid var(--ink);border-radius:25px;box-shadow:7px 8px 0 var(--ink);display:flex;flex-direction:column;align-items:center;color:white;padding:30px;position:relative}.draw-stage:before{content:"";position:absolute;inset:0;background:radial-gradient(#ffffff27 2px,transparent 2px);background-size:22px 22px;border-radius:22px}.draw-heading{align-self:stretch;display:flex;justify-content:space-between;position:relative;z-index:1}.draw-heading span{background:var(--coral);border-radius:999px;padding:5px 9px;font-size:8px;font-weight:900}.draw-heading small{color:#d6c8ff}.mega-ball{position:relative;z-index:1;margin:42px 0 10px;width:240px;height:240px;border-radius:50%;border:6px solid var(--ink);background:var(--yellow);color:var(--ink);display:flex;align-items:center;justify-content:center;box-shadow:12px 14px 0 var(--ink)}.mega-ball small{font:900 55px var(--font-display);position:absolute;top:18px}.mega-ball strong{font:900 115px var(--font-display);margin-top:30px}.draw-stage>p{position:relative;z-index:1;font-weight:900}.draw-stage .pill-button{position:relative;z-index:1}.manual-number{position:relative;z-index:1;display:flex;align-items:center;gap:8px;margin-top:25px}.manual-number span{font-size:9px;color:#d9d0f4}.manual-number input{width:65px;text-align:center;padding:8px}.manual-number button{border:2px solid var(--ink);background:white;border-radius:9px;padding:8px;font-size:9px;font-weight:900}.live-panel{background:white;border:3px solid var(--ink);border-radius:23px;box-shadow:5px 6px 0 var(--ink);padding:25px}.live-panel-head{display:flex;justify-content:space-between}.live-panel-head small{font-size:8px;color:var(--purple);font-weight:900}.live-panel-head h2{font:900 24px var(--font-display);margin:2px 0}.live-panel-head>span{font-size:9px;font-weight:900}.called-balls{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0}.called-balls span{width:43px;height:43px;border:2px solid var(--ink);border-radius:50%;display:grid;place-items:center;font-weight:900;background:#f6f1e8}.called-balls .current{background:var(--coral);color:white;box-shadow:3px 3px 0 var(--ink)}.live-alert{display:flex;gap:10px;background:#fff3bd;border:2px solid #e1bf30;border-radius:12px;padding:13px;font-size:18px;margin-top:28px}.live-alert span{display:flex;flex-direction:column;font-size:10px}.live-alert small{margin-top:3px;color:#756e7c}.outline-button.danger{margin-top:25px;width:100%;color:#d94343;border-color:#d94343;box-shadow:none}
.checkout-grid{grid-template-columns:1fr 1fr;max-width:900px}.checkout-grid .panel{box-shadow:5px 6px 0 var(--ink)}.product-card{padding:0}.room-banner{padding:30px}.room-banner b{font-size:35px}.prize-line{display:flex;align-items:center;justify-content:center;gap:15px;padding:35px}.prize-line>span{font-size:50px}.prize-line div{display:flex;flex-direction:column}.prize-line small{font-weight:900;color:var(--purple)}.prize-line strong{font:900 56px var(--font-display);color:var(--coral)}.prize-line p{margin:0;font-weight:900}.availability{border-top:2px dashed #cfc7ba;padding:15px 22px;display:flex;justify-content:space-between;font-size:10px;font-weight:800}.availability b{color:var(--coral)}.purchase-card h2{font:900 29px var(--font-display);text-transform:uppercase;margin:5px 0}.purchase-card>p{font-size:11px;color:#746d7b}.quantity{display:flex;justify-content:center;align-items:center;gap:25px;margin:25px 0}.quantity button{width:42px;height:42px;border:2px solid var(--ink);border-radius:50%;background:var(--yellow);font-size:25px;font-weight:900;cursor:pointer}.quantity strong{font:900 47px var(--font-display)}.price-row{display:flex;justify-content:space-between;padding:14px 0;border-block:1px solid #e5dfd5;font-size:11px}.price-row b{font-size:17px}.payment-options{display:grid;gap:8px;margin:16px 0}.payment-options label{display:flex;align-items:center;justify-content:space-between;border:2px solid #dfd9cf;border-radius:11px;padding:11px;font-size:11px;font-weight:900}.payment-options label.selected{border-color:var(--purple);background:#f2edff}.payment-options label input{accent-color:var(--purple)}.secure{display:block;text-align:center;margin-top:14px;color:#807887}
.wait-page{min-height:100vh;padding:30px;background:var(--yellow);background-image:radial-gradient(#5c451d38 1.5px,transparent 1.5px);background-size:20px 20px}.wait-card{max-width:570px;margin:20px auto;background:white;border:4px solid var(--ink);border-radius:28px;box-shadow:10px 12px 0 var(--purple);padding:38px 50px;text-align:center;position:relative}.ticket-check{width:63px;height:63px;background:var(--mint);border:3px solid var(--ink);border-radius:50%;display:grid;place-items:center;margin:-72px auto 20px;font-size:30px;font-weight:900;box-shadow:4px 4px 0 var(--ink)}.wait-card h1{font-size:55px;margin:10px 0 16px}.wait-card>p{font-size:13px;color:#756e7c;line-height:1.6}.waiting-room{background:var(--purple);color:white;border:3px solid var(--ink);border-radius:19px;padding:17px;display:flex;align-items:center;gap:22px;text-align:left;margin:25px 0;box-shadow:4px 4px 0 var(--ink)}.pulse-ring{width:75px;height:75px;border-radius:50%;background:var(--yellow);border:3px solid var(--ink);display:grid;place-items:center;font-size:35px;animation:pulse 1.8s infinite}.waiting-room>div+div{display:flex;flex-direction:column}.waiting-room small{font-size:8px;color:#ddd3ff;font-weight:900;letter-spacing:1px}.waiting-room strong{font:900 40px var(--font-display);color:var(--yellow)}.waiting-room span{font-size:9px}.cart-id{display:grid;grid-template-columns:1fr auto;text-align:left;align-items:end;border:2px dashed #bdb5a7;border-radius:12px;padding:13px;margin-bottom:20px}.cart-id span{font-size:9px;font-weight:900}.cart-id b{grid-row:1/3;grid-column:2;font:900 25px var(--font-display);color:var(--purple)}.cart-id small{font-size:8px;color:#807887}.dont-close{display:block;margin-top:15px;color:#777080}
.player-live{min-height:100vh;background:#ece4ff}.gamebar{height:78px;background:var(--purple);color:white;border-bottom:3px solid var(--ink);display:flex;align-items:center;justify-content:space-between;padding:0 35px}.gamebar .logo-copy strong{color:white}.gamebar .logo-copy em{color:var(--yellow)}.game-name{display:flex;flex-direction:column;align-items:center}.game-name .live-dot{font-size:7px}.game-name>b{font:900 18px var(--font-display);text-transform:uppercase;margin-top:4px}.player-chip{display:flex;align-items:center;gap:8px}.player-chip>span{width:37px;height:37px;background:var(--yellow);border:2px solid var(--ink);border-radius:50%;display:grid;place-items:center}.player-chip div{display:flex;flex-direction:column;font-size:10px}.player-chip small{color:#d8ccff;font-size:8px}.player-chip button{border:0;background:#ffffff20;border-radius:8px;padding:7px;cursor:pointer}.game-layout{display:grid;grid-template-columns:1.4fr .6fr;gap:22px;max-width:1150px;margin:auto;padding:25px}.player-stage{display:flex;flex-direction:column;gap:20px}.now-called{background:var(--ink);color:white;border-radius:20px;border:3px solid var(--ink);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:15px 25px;box-shadow:5px 6px 0 var(--coral)}.now-called>div:first-child{display:flex;flex-direction:column}.now-called small{font-size:8px;color:var(--yellow);font-weight:900}.now-called span{font-size:11px}.current-ball{width:110px;height:110px;background:var(--yellow);color:var(--ink);border:4px solid white;border-radius:50%;display:flex;justify-content:center;align-items:center;position:relative;box-shadow:5px 5px 0 var(--coral)}.current-ball small{position:absolute;top:7px;color:var(--purple);font-size:20px}.current-ball b{font:900 54px var(--font-display);margin-top:14px}.recent-mini{display:flex;gap:8px;justify-content:flex-end}.recent-mini span{width:39px;height:39px;background:#51465f;border-radius:50%;display:grid;place-items:center;font-weight:900}.bingo-board{background:white;border:3px solid var(--ink);border-radius:23px;padding:23px;box-shadow:7px 8px 0 var(--ink)}.board-top{display:flex;justify-content:space-between;margin-bottom:12px}.board-top>div:first-child{display:flex;align-items:baseline;gap:8px}.board-top span{font:900 25px var(--font-display)}.board-top small,.board-top b{color:var(--purple)}.progress-chips{display:flex;align-items:center;gap:7px;font-size:9px}.progress-chips span{font:800 9px var(--font-body);background:#eee8ff;border-radius:999px;padding:6px 9px}.progress-chips b{background:#fff0b8;color:#7d5900;border-radius:999px;padding:6px 9px}.letters{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:7px}.letters b{text-align:center;background:var(--purple);color:white;border:2px solid var(--ink);border-radius:8px;padding:4px;font:900 22px var(--font-display)}.letters b:nth-child(2){background:var(--coral)}.letters b:nth-child(3){background:#14a875}.letters b:nth-child(4){background:#efab18}.letters b:nth-child(5){background:#ef5796}.card-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.card-grid button{aspect-ratio:1;border:2px solid #c9c1b4;background:#fffaf0;border-radius:10px;font:900 21px var(--font-display);position:relative}.card-grid button.marked{background:#d7caff;border-color:var(--purple);color:var(--purple)}.card-grid button.marked i{position:absolute;right:3px;top:2px;width:15px;height:15px;border-radius:50%;background:var(--purple);color:white;font:900 9px var(--font-body);display:grid;place-items:center}.card-grid button.fresh{animation:pop .7s ease both;background:var(--yellow);box-shadow:0 0 0 4px #fff1a2}.auto-note{display:flex;gap:10px;align-items:center;background:#eefbf4;border:2px solid #8bd6ae;border-radius:11px;padding:10px;margin-top:14px}.auto-note span{font-size:20px}.auto-note div{display:flex;flex-direction:column;font-size:9px}.auto-note small{color:#66746d}.player-aside{display:flex;flex-direction:column;gap:14px}.host-message,.called-list,.almost{background:white;border:3px solid var(--ink);border-radius:17px;padding:17px;box-shadow:4px 5px 0 var(--ink)}.host-message{display:flex;gap:10px}.host-message>span{width:40px;height:40px;border-radius:50%;background:var(--yellow);display:grid;place-items:center}.host-message small,.called-list small{font-size:8px;color:var(--purple);font-weight:900}.host-message p{font-size:11px;font-weight:800;margin:5px 0 0}.called-list>div{display:flex;justify-content:space-between;align-items:center}.called-list section{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}.called-list section span{width:33px;height:33px;border:2px solid var(--ink);border-radius:50%;display:grid;place-items:center;font-size:10px;font-weight:900}.called-list section span.new{background:var(--coral);color:white}.almost{display:flex;gap:10px;align-items:center;background:#fff6ce}.almost>span{font-size:28px}.almost div{display:flex;flex-direction:column;font-size:10px}.almost small{color:#776e64}.bingo-button{background:#d8d2c8;color:#918a80;border:3px solid #a8a198;border-radius:15px;padding:18px;font:900 27px var(--font-display);text-transform:uppercase}.bingo-hint{text-align:center;color:#776f7e;font-size:8px}
@keyframes pulse{50%{transform:scale(1.08);box-shadow:0 0 0 10px #ffffff20}}@keyframes pop{0%{transform:scale(.7)}55%{transform:scale(1.13)}100%{transform:scale(1)}}
@media(max-width:900px){.hero{grid-template-columns:1fr;padding-top:45px}.hero-art{margin-top:20px}.auth-layout,.setup-grid,.checkout-grid,.host-grid,.live-host-grid,.game-layout{grid-template-columns:1fr}.dashboard{grid-template-columns:1fr}.sidebar{display:none}.stats-grid{grid-template-columns:1fr}.auth-copy{text-align:center}.character{margin:auto}.speech{position:relative;left:auto;top:auto;display:inline-block;margin-top:18px}.gamebar{padding:0 15px}.game-name{display:none}.player-live .game-layout{padding:15px}.page-title h1{font-size:42px}}
@media(max-width:600px){.topbar{height:72px;padding:0 17px}.nav-actions .text-button{display:none}.logo-ball{width:40px;height:40px}.logo-copy strong{font-size:22px}.logo-copy em{font-size:17px}.hero{padding:45px 20px;min-height:auto}.hero h1{font-size:58px}.hero-buttons{flex-direction:column;align-items:stretch}.mini-card{width:84%;padding:14px}.floating-ball{width:60px;height:60px}.burst{width:90px}.how{padding:60px 20px}.how-grid{grid-template-columns:1fr}.flow-page{padding:25px 17px 60px}.steps small{display:none}.auth-layout{gap:25px}.auth-copy h1,.wait-card h1{font-size:47px}.form-card,.panel{padding:22px}.page-title h1{font-size:37px}.two-fields,.game-mode>div{grid-template-columns:1fr}.dash-content{padding:22px 15px}.dash-head{flex-direction:column;gap:13px}.share-buttons{grid-template-columns:1fr}.wait-card{padding:35px 20px;margin-top:35px}.gamebar .player-chip div{display:none}.now-called{grid-template-columns:1fr auto;padding:12px}.recent-mini{display:none}.current-ball{width:90px;height:90px}.current-ball b{font-size:45px}.bingo-board{padding:12px}.card-grid,.letters{gap:5px}.card-grid button{font-size:17px}.board-top{flex-direction:column;gap:7px}.game-layout{padding-bottom:50px}}

/* === bingo-datastar: agregados === */
a.pill-button,a.outline-button{display:inline-block;text-decoration:none}
a.logo,a.text-button{text-decoration:none}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:26px;background:var(--ink);color:#fff;border-radius:14px;padding:14px 24px;font-weight:900;font-size:13px;z-index:99;box-shadow:4px 5px 0 rgba(36,27,53,.2);max-width:90vw;text-align:center}
.toast.error{background:var(--coral)}
.form-error{background:#ffe3e2;border:2px solid var(--coral);color:#a12824;border-radius:12px;padding:10px 14px;font-size:12px;font-weight:800;margin-bottom:14px}
.finished-card{max-width:640px;margin:40px auto;text-align:center}
.finished-card h2{font:900 34px var(--font-display);text-transform:uppercase;margin-bottom:10px}
.winner-banner{margin-bottom:18px}
.sidebar nav a.nav-link{display:block;border:0;background:transparent;color:#ddd3ff;text-align:left;padding:11px 12px;border-radius:10px;font-weight:800;cursor:pointer;text-decoration:none;font-size:inherit}
.sidebar nav a.nav-link.active{background:white;color:var(--purple)}
.sidebar nav a.nav-link:hover{background:#ffffff22;color:white}
.sidebar nav a.nav-link.active:hover{background:white;color:var(--purple)}
.sidebar nav .logout-link{margin-top:10px;border-top:1px solid #ffffff38;border-radius:0;padding-top:16px}
.rooms-list{display:flex;flex-direction:column;gap:16px;max-width:860px}
.room-row{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 22px}
.room-info{display:flex;flex-direction:column;gap:6px;min-width:0}
.room-info h2{font:900 26px var(--font-display);text-transform:uppercase;margin:0}
.room-info p{margin:0;font-size:12px;color:#756e7c}
.room-info p b{color:var(--ink)}
.room-row .live-dot{align-self:flex-start}
.room-row .live-dot.live{color:#d61f4d;background:#ffe3ea}
.empty-rooms{max-width:560px;margin:30px auto;text-align:center;padding:40px 30px;display:flex;flex-direction:column;gap:10px;align-items:center}
.empty-rooms>span{font-size:42px}
.empty-rooms h2{font:900 30px var(--font-display);text-transform:uppercase;margin:0}
.empty-rooms p{margin:0 0 10px;font-size:13px;color:#756e7c}
.login-hint a{color:var(--purple);font-weight:800}
.player-chip a{color:var(--purple);font-weight:900;text-decoration:none}.player-chip a:hover{text-decoration:underline}
.celebration{position:fixed;inset:0;z-index:999;pointer-events:none;display:grid;place-items:center;overflow:hidden;animation:celebration-life 11s ease forwards}
.celebration-backdrop{position:absolute;inset:0;background:rgba(24,10,58,.62)}
.celebration-card{position:relative;z-index:2;background:white;border:3px solid var(--ink);border-radius:24px;padding:36px 52px 30px;text-align:center;box-shadow:10px 10px 0 rgba(0,0,0,.28);max-width:min(92vw,560px);animation:celebration-pop .65s cubic-bezier(.2,1.5,.4,1) both}
.celebration-eyebrow{display:inline-block;background:var(--yellow);color:var(--ink);border:2px solid var(--ink);border-radius:999px;padding:7px 16px;font-size:12px;font-weight:900;letter-spacing:1.5px;animation:celebration-wiggle 1.2s ease-in-out infinite}
.celebration-card h2{font:900 clamp(40px,8vw,64px)/1.05 var(--font-display);text-transform:uppercase;color:var(--purple);margin:16px 0 4px;word-break:break-word}
.celebration-card p{margin:0 0 10px;font-size:18px;font-weight:800;color:var(--ink)}
.celebration-card p mark{background:var(--coral);color:white;border-radius:8px;padding:2px 12px}
.celebration-card small{font-size:12px;font-weight:700;color:#756e7c}
.balloons span{position:absolute;bottom:-70px;z-index:1;font-size:46px;animation:balloon-rise 5s linear infinite}
.confetti i{position:absolute;top:-18px;z-index:1;width:10px;height:15px;border-radius:2px;animation:confetti-fall 3.4s linear infinite}
@keyframes balloon-rise{0%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-55vh) rotate(5deg)}100%{transform:translateY(-115vh) rotate(-4deg)}}
@keyframes confetti-fall{0%{transform:translateY(0) rotate(0)}100%{transform:translateY(108vh) rotate(560deg)}}
@keyframes celebration-pop{0%{transform:scale(.4) rotate(-4deg);opacity:0}100%{transform:scale(1) rotate(0);opacity:1}}
@keyframes celebration-wiggle{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
@keyframes celebration-life{0%{opacity:0}5%{opacity:1}85%{opacity:1;visibility:visible}100%{opacity:0;visibility:hidden}}

/* Modalidades configurables */
.mode{cursor:pointer}
.mode:has(input:checked){border-color:var(--purple);background:#f1eaff;color:var(--purple)}
.pattern-options{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.pattern-config{min-width:0;margin:0;border:2px solid #ded8cc;border-radius:14px;padding:12px;background:#fffcf5}
.pattern-config legend{padding:0 6px;font-size:10px;font-weight:900;color:var(--ink)}
.pattern-config>small{display:block;margin-top:9px;color:#756e7c;font-size:9px;line-height:1.45}
.bingo-letter-options,.figure-options{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.bingo-letter-options label,.figure-options label{cursor:pointer;min-width:0}
.bingo-letter-options input,.figure-options input{position:absolute;opacity:0;pointer-events:none}
.bingo-letter-options span,.figure-options span{display:grid;place-items:center;min-height:38px;border:2px solid #d9d2c7;border-radius:9px;background:white;font:900 18px var(--font-display);transition:.15s ease}
.bingo-letter-options label:has(input:checked) span,.figure-options label:has(input:checked) span{border-color:var(--purple);background:var(--purple);color:white;box-shadow:2px 2px 0 var(--ink);transform:translate(-1px,-1px)}
.figure-options label:last-child span{font-size:13px}
.winning-preview{margin:12px 0 16px;padding:12px 14px;border:2px solid var(--purple);border-radius:12px;background:white;display:flex;align-items:center;justify-content:space-between;gap:10px}
.winning-preview small{font-size:8px;font-weight:900;color:var(--purple)}
.winning-preview strong{font-size:11px;text-align:right}
.preview-line,.preview-figure,.chosen-letter i,.chosen-figure i{display:none}
.setup-grid:has(input[name="win_pattern"][value="any_line"]:checked) .preview-full{display:none}
.setup-grid:has(input[name="win_pattern"][value="any_line"]:checked) .preview-line{display:block}
.setup-grid:has(input[name="win_pattern"][value="four_corners"]:checked) .preview-full{display:none}
.setup-grid:has(input[name="win_pattern"][value="four_corners"]:checked) .preview-figure{display:block}
.setup-grid:has(input[name="line_column"][value="B"]:checked) [data-letter="B"],.setup-grid:has(input[name="line_column"][value="I"]:checked) [data-letter="I"],.setup-grid:has(input[name="line_column"][value="N"]:checked) [data-letter="N"],.setup-grid:has(input[name="line_column"][value="G"]:checked) [data-letter="G"],.setup-grid:has(input[name="line_column"][value="O"]:checked) [data-letter="O"]{display:inline;font-style:normal;color:var(--coral)}
.setup-grid:has(input[name="figure_pattern"][value="x"]:checked) [data-figure="x"],.setup-grid:has(input[name="figure_pattern"][value="t"]:checked) [data-figure="t"],.setup-grid:has(input[name="figure_pattern"][value="l"]:checked) [data-figure="l"],.setup-grid:has(input[name="figure_pattern"][value="h"]:checked) [data-figure="h"],.setup-grid:has(input[name="figure_pattern"][value="four_corners"]:checked) [data-figure="four_corners"]{display:inline;font-style:normal;color:var(--coral)}
@media(max-width:700px){.pattern-options{grid-template-columns:1fr}}

/* La cartilla siempre muestra sus 25 celdas; el patrón define cuáles se marcan. */
.letters b.target-letter{outline:4px solid var(--yellow);outline-offset:2px;box-shadow:0 0 0 2px var(--ink)}
.card-grid button.pattern-cell:not(.marked){border-color:var(--purple);box-shadow:inset 0 0 0 1px #d8caff;background:#faf7ff}
.card-grid button.outside-pattern{background:#f5f1e9;color:#746d7b;border-color:#ded8cc}
.pill-button:disabled{cursor:not-allowed;filter:grayscale(.35);opacity:.58;box-shadow:none;transform:none}
.start-blocked{display:block;margin-top:10px;color:#8a6570;font-size:9px;font-weight:800;text-align:center}
.no-card-state{text-align:center;padding:42px 28px}
.no-card-state>span{font-size:46px}
.no-card-state h2{font:900 28px var(--font-display);text-transform:uppercase;margin:12px 0 7px}
.no-card-state p{max-width:560px;margin:0 auto 10px;color:#756e7c;font-size:12px;line-height:1.55}
.no-card-state small{color:var(--purple);font-weight:800}

/* Lobby del jugador */
.player-lobby{max-width:1160px;margin:auto}
.lobby-heading p{margin:8px 0 0;color:#756e7c;font-size:13px}
.room-search{margin:0 0 22px;padding:18px 20px;box-shadow:4px 5px 0 var(--ink)}
.room-search>label{display:block;margin-bottom:8px;font-size:11px;font-weight:900}
.room-search>div{display:flex;align-items:center;gap:10px}
.room-search input{flex:1;min-width:0;border:2px solid #d8d1c5;border-radius:12px;padding:13px 15px;font:700 13px var(--font-body);background:#fffcf5}
.player-room-list{max-width:none}
.player-room-row{align-items:stretch}
.room-meta{display:flex;flex-wrap:wrap;gap:7px;margin-top:7px}
.room-meta span{background:#f2edff;color:#53466a;border-radius:999px;padding:6px 9px;font-size:9px;font-weight:800}
.room-choice{min-width:190px;display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:10px;text-align:right}
.room-choice small{max-width:180px;color:#756e7c;font-size:9px;line-height:1.4}
@media(max-width:700px){.room-search>div{align-items:stretch;flex-direction:column}.room-search input,.room-search .pill-button{width:100%}.player-room-row{align-items:flex-start;flex-direction:column}.room-choice{min-width:0;width:100%;align-items:stretch;text-align:left}.room-choice small{max-width:none}}

/* Navegación persistente del jugador dentro de una sala */
.gamebar-player-tools{display:flex;align-items:center;gap:14px}
.gamebar-actions{display:flex;align-items:center;gap:7px}
.gamebar-actions a{color:white;text-decoration:none;border:1px solid #ffffff55;border-radius:8px;padding:7px 9px;font-size:8px;font-weight:900;white-space:nowrap}
.gamebar-actions a:last-child{background:#ffffff18}
.gamebar-actions a:hover{background:#ffffff2b}
@media(max-width:700px){.gamebar{height:auto;min-height:78px;padding:10px 12px}.gamebar-player-tools{gap:7px}.gamebar .player-chip>span,.gamebar .player-chip>div{display:none}.gamebar-actions{gap:5px}.gamebar-actions a{padding:8px 7px}.nav-actions{gap:6px}.nav-actions .text-button{display:inline-block}.nav-actions .pill-button.small{padding:9px 10px;font-size:9px}}

/* El menú del jefe sigue disponible en pantallas pequeñas como barra desplazable. */
@media(max-width:900px){.dashboard .sidebar{display:flex;position:static;height:auto;min-height:auto;padding:14px 16px;overflow:visible}.dashboard .sidebar .logo{margin-bottom:12px}.dashboard .sidebar .side-user,.dashboard .sidebar .side-help{display:none}.dashboard .sidebar nav{flex-direction:row;overflow-x:auto;padding-bottom:3px}.dashboard .sidebar nav a.nav-link,.dashboard .sidebar nav button{flex:0 0 auto;white-space:nowrap}.dashboard .sidebar nav .logout-link{margin-top:0;border-top:0;border-radius:10px;padding-top:11px}}

/* Panel en vivo del jefe: escala móvil sin desbordamiento horizontal. */
@media(max-width:900px){.dashboard{grid-template-columns:minmax(0,1fr)}.dashboard .sidebar{min-width:0;max-width:100vw;overflow:hidden}.dashboard .sidebar nav{width:100%;max-width:100%}}
@media(max-width:600px){.dashboard .dash-content,.live-host-grid,.draw-stage,.live-panel{min-width:0;max-width:100%}.dashboard .dash-content{overflow:hidden}.dash-head h1{font-size:30px;line-height:.95}.live-host-grid{gap:16px}.draw-stage{min-height:auto;padding:18px 14px 24px;border-width:2px;border-radius:19px;box-shadow:4px 5px 0 var(--ink)}.draw-heading{gap:8px;align-items:center}.draw-heading span,.draw-heading small{font-size:7px}.mega-ball{width:min(190px,62vw);height:min(190px,62vw);margin:24px 0 8px;border-width:5px;box-shadow:7px 8px 0 var(--ink)}.mega-ball small{top:12px;font-size:40px}.mega-ball strong{font-size:86px;margin-top:23px}.draw-stage>p{margin:10px 0 14px;font-size:13px}.draw-stage>.pill-button{width:100%;max-width:280px;padding:13px 15px;font-size:12px}.manual-number{width:100%;max-width:280px;margin-top:18px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}.manual-number span{grid-column:1/-1;text-align:center}.manual-number input{width:100%;min-width:0;padding:10px}.manual-number button{padding:10px 14px}.live-panel{padding:18px 15px;border-width:2px;border-radius:18px;box-shadow:4px 5px 0 var(--ink)}.live-panel-head h2{font-size:21px}.called-balls{gap:6px;margin:15px 0}.called-balls span{width:38px;height:38px;font-size:12px}.live-alert{margin-top:18px}.outline-button.danger{padding:12px}}
.draw-stage .pill-button.yellow,.draw-stage .manual-number button{color:var(--ink)}