/* Styles for number_bingo. */
:root{--navy:#2a0508;--blue:#dc2626;--cyan:#fb7185;--teal:#991b1b;--purple:#7f1d1d;--pink:#f43f5e;--yellow:#fbbf24;--green:#22c55e;--paper:#fff7f7;--ink:#2a080a;--muted:#7f4b50;--line:#f2c9cd;--shadow:0 24px 70px rgba(127,29,29,.24)}
*{box-sizing:border-box}html,body{min-height:100%;margin:0}body{font-family:"Noto Sans Thai",sans-serif;color:var(--ink);background:linear-gradient(rgba(24,0,3,.78),rgba(45,0,6,.7)),url("assets/numbers-red-bg.png") center/cover fixed,#180003;overflow-x:hidden}button,input{font:inherit}button{cursor:pointer}h1,h2,h3,.room-code,.symbol,.draw-symbol{font-family:"Mitr","Fredoka",sans-serif}.hidden{display:none!important}
.topbar{position:sticky;z-index:20;top:0;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px max(13px,calc((100vw - 1260px)/2));border-bottom:1px solid #2563eb18;background:#ffffffdf;backdrop-filter:blur(16px)}.brand{display:flex;align-items:center;gap:9px;font:700 1.08rem Fredoka;color:var(--navy)}.brand-icon{width:43px;height:43px;display:grid;place-items:center;border-radius:14px;color:white;background:linear-gradient(145deg,var(--teal),var(--purple));font:700 1.25rem Mitr}.actions{display:flex;align-items:center;gap:7px}.nav-btn,.status{display:flex;align-items:center;gap:7px;padding:8px 11px;border:1px solid var(--line);border-radius:99px;color:var(--ink);background:white;text-decoration:none;font-size:.72rem;font-weight:900}.status{color:var(--muted)}.dot{width:8px;height:8px;border-radius:50%;background:#eab308}.dot.online{background:var(--green)}.dot.error{background:#ef4444}
.wrap{width:min(1220px,calc(100% - 24px));margin:auto;padding:24px 0 50px}.screen{display:none}.screen.active{display:block;animation:appear .35s ease}@keyframes appear{from{opacity:0;translate:0 10px}}.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:28px;align-items:center;min-height:calc(100vh - 130px)}.eyebrow{display:inline-flex;padding:7px 11px;border:1px solid #a5f3fc;border-radius:99px;color:#0e7490;background:#ecfeff;font-size:.7rem;font-weight:900;letter-spacing:.08em}.hero h1{margin:16px 0;font-size:clamp(3.8rem,9vw,7.2rem);line-height:.82;letter-spacing:-.06em}.element-word{display:block;color:transparent;background:linear-gradient(90deg,var(--teal),var(--blue),var(--purple));-webkit-background-clip:text;background-clip:text}.bingo-word{display:block;color:var(--navy)}.lead{color:var(--muted);font-size:clamp(.95rem,2vw,1.1rem);line-height:1.75}.en{display:block;margin-top:3px;font-family:Fredoka;font-size:.72em;opacity:.72}.chips{display:flex;flex-wrap:wrap;gap:7px;margin:18px 0}.chip{padding:7px 10px;border:1px solid var(--line);border-radius:99px;background:white;font-size:.7rem;font-weight:900}.role-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-top:22px}.role{padding:20px;border:1px solid var(--line);border-radius:23px;background:#fffffff2;box-shadow:var(--shadow);text-align:left;transition:.2s}.role:hover{translate:0 -4px;border-color:var(--cyan)}.role-icon{width:52px;height:52px;display:grid;place-items:center;margin-bottom:10px;border-radius:17px;color:white;background:linear-gradient(145deg,var(--teal),var(--blue));font-size:1.3rem}.role.player .role-icon{background:linear-gradient(145deg,var(--purple),var(--pink))}.role strong,.role small{display:block}.role small{margin-top:4px;color:var(--muted);line-height:1.5}
.periodic-art{display:grid;grid-template-columns:repeat(6,1fr);gap:9px;rotate:3deg}.atom-tile{aspect-ratio:1;padding:8px;border:2px solid white;border-radius:18px;color:white;background:linear-gradient(145deg,var(--teal),var(--blue));box-shadow:0 16px 35px #1e40af30}.atom-tile:nth-child(3n){background:linear-gradient(145deg,var(--purple),var(--pink))}.atom-tile:nth-child(4n){background:linear-gradient(145deg,#f59e0b,#ef4444)}.atom-tile strong{display:block;font:700 clamp(1.3rem,4vw,2.4rem) Mitr}.atom-tile small{font-size:.55rem}
.panel{padding:clamp(19px,3vw,34px);border:1px solid white;border-radius:29px;background:#fffffff2;box-shadow:var(--shadow)}.setup{width:min(630px,100%);margin:30px auto}.panel-head{text-align:center}.round-icon{width:66px;height:66px;display:grid;place-items:center;margin:0 auto 11px;border-radius:21px;color:white;background:linear-gradient(145deg,var(--teal),var(--purple));font-size:1.65rem}.panel h2{margin:5px 0;font-size:clamp(1.7rem,4vw,2.5rem)}.sub{color:var(--muted);line-height:1.65}.field{display:grid;gap:7px;margin:13px 0;color:#41506d;font-size:.8rem;font-weight:900}.field input{width:100%;padding:14px;border:2px solid var(--line);border-radius:15px;outline:0}.field input:focus{border-color:var(--blue);box-shadow:0 0 0 4px #2563eb15}.room-input{text-align:center;text-transform:uppercase;font:700 1.7rem Fredoka;letter-spacing:.18em}.emoji-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}.emoji-option{position:relative}.emoji-option input{position:absolute;opacity:0}.emoji-option span{display:grid;place-items:center;aspect-ratio:1;border:2px solid var(--line);border-radius:14px;background:white;font-size:1.7rem}.emoji-option input:checked+span{border-color:var(--purple);background:#f5f3ff;scale:1.07}.primary,.secondary,.bingo-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:52px;padding:12px 17px;border-radius:16px;font-weight:900}.primary{border:0;color:white;background:linear-gradient(135deg,var(--teal),var(--blue),var(--purple));box-shadow:0 13px 28px #2563eb35}.primary:disabled,.bingo-btn:disabled{opacity:.45;filter:grayscale(.55);cursor:not-allowed}.secondary{margin-top:8px;border:2px solid var(--line);color:var(--ink);background:white}.error{min-height:22px;margin-top:7px;color:#dc3545;text-align:center;font-size:.78rem}
.host-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:17px}.host-main,.side{min-height:690px}.lobby{display:grid;grid-template-columns:245px 1fr;gap:25px;align-items:center}.qr-card{padding:15px;border:1px solid var(--line);border-radius:22px;background:white;text-align:center}.qr-card #qrCode{width:200px;height:200px;display:grid;place-items:center;margin:auto}.qr-card img,.qr-card canvas{max-width:100%}.qr-hint{margin-top:8px;color:var(--muted);font-size:.68rem}.room-code{margin:4px 0;font-size:clamp(2.5rem,7vw,4.7rem);letter-spacing:.12em;color:var(--purple)}.copy-btn{padding:8px 11px;border:1px solid var(--line);border-radius:11px;background:white;font-weight:800}.player-count{display:inline-flex;padding:7px 11px;border-radius:99px;color:#1d4ed8;background:#dbeafe;font-weight:900}.side-head{display:flex;align-items:center;justify-content:space-between}.badge{padding:5px 9px;border-radius:99px;color:#6d28d9;background:#ede9fe;font-weight:900}.player-list{display:grid;gap:8px;margin-top:12px;max-height:590px;overflow:auto}.player-chip{display:flex;align-items:center;gap:9px;padding:9px;border:1px solid var(--line);border-radius:14px;background:white}.avatar{width:41px;height:41px;display:grid;place-items:center;border-radius:13px;background:#ecfeff;font-size:1.4rem}.player-meta{min-width:0;flex:1}.player-meta strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.player-meta small{color:#16a34a;font-size:.67rem}.empty{padding:42px 8px;color:#8b96aa;text-align:center}
.draw-stage{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:center;min-height:590px}.draw-card{display:grid;place-items:center;min-height:390px;padding:20px;border:8px solid white;border-radius:40px;color:white;background:radial-gradient(circle at 50% 25%,#ffffff30,transparent 30%),linear-gradient(145deg,var(--teal),var(--blue),var(--purple));box-shadow:0 28px 60px #1e40af40;text-align:center}.draw-number{font:700 .8rem Fredoka;opacity:.75}.draw-symbol{font-size:clamp(6rem,16vw,11rem);line-height:1}.draw-name{font:600 clamp(1.2rem,3vw,2rem) Fredoka}.draw-controls h2{font-size:clamp(2rem,5vw,3.4rem)}.recent{display:flex;flex-wrap:wrap;gap:6px;margin:15px 0}.recent span{padding:6px 9px;border-radius:10px;color:#1e40af;background:#dbeafe;font:700 .72rem Fredoka}.progress-text{color:var(--muted);font-weight:800}.winner{text-align:center;padding:25px}.winner-icon{font-size:8rem}.winner-name{font-size:clamp(2.5rem,7vw,5rem);color:var(--purple)}
.player-shell{width:min(760px,100%);margin:24px auto}.player-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}.player-id{display:flex;align-items:center;gap:9px}.player-id .avatar{font-size:1.8rem}.current-call{padding:8px 12px;border-radius:13px;color:white;background:linear-gradient(135deg,var(--teal),var(--purple));font-size:.75rem;font-weight:900;text-align:center}.current-call strong{display:block;font:700 1.2rem Fredoka}.bingo-board{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(4px,1vw,8px);padding:clamp(6px,1.5vw,12px);border:3px solid #c7dff0;border-radius:22px;background:#eaf5fb}.cell{position:relative;aspect-ratio:1;padding:3px;border:2px solid white;border-radius:clamp(9px,2vw,15px);color:var(--ink);background:white;box-shadow:0 4px 10px #14315b18;transition:.18s;overflow:hidden}.cell .symbol{display:block;font-size:clamp(1.05rem,5vw,2rem);line-height:1.05}.cell .element-name{display:block;margin-top:2px;color:var(--muted);font:600 clamp(.38rem,1.5vw,.6rem) Fredoka;line-height:1.05;overflow-wrap:anywhere}.cell.callable{border-color:var(--cyan);box-shadow:0 0 0 3px #22d3ee25;animation:pulse 1s infinite}.cell.marked{color:white;border-color:#6d28d9;background:linear-gradient(145deg,var(--teal),var(--purple));transform:scale(.96)}.cell.marked .element-name{color:#e0f2fe}.cell.free{color:#713f12;background:linear-gradient(145deg,#fef08a,#facc15)}.cell.free .element-name{color:#713f12}.cell:disabled{cursor:default}.bingo-btn{margin-top:12px;border:0;color:#4c1d95;background:linear-gradient(135deg,#fde047,#f59e0b);box-shadow:0 12px 26px #f59e0b30;font-size:1.15rem}.rules{margin-top:14px;padding:14px 16px;border:1px solid var(--line);border-radius:16px;color:#54617a;background:#f8fbff;font-size:.76rem;line-height:1.65}.rules strong{color:var(--ink)}.player-wait{text-align:center;padding:30px}.player-wait .emoji{font-size:5rem}.player-result{text-align:center;padding:30px}.player-result .trophy{font-size:7rem}.toast{position:fixed;z-index:100;left:50%;bottom:22px;translate:-50% 20px;padding:10px 15px;border-radius:13px;color:white;background:var(--navy);opacity:0;transition:.2s}.toast.show{opacity:1;translate:-50% 0}@keyframes pulse{50%{scale:.97}}
@media(max-width:930px){.hero{grid-template-columns:1fr}.periodic-art{display:none}.host-layout{grid-template-columns:1fr}.side{min-height:auto}.player-list{max-height:250px}.lobby{grid-template-columns:1fr;text-align:center}.qr-card{width:235px;margin:auto}.draw-stage{grid-template-columns:1fr}.draw-card{min-height:300px}}
@media(max-width:600px){.wrap{width:calc(100% - 12px);padding-top:10px}.brand>span:last-child,.status span:last-child,.nav-btn span{display:none}.nav-btn{width:38px;height:38px;justify-content:center;padding:0}.hero{min-height:auto}.role-grid{grid-template-columns:1fr}.hero h1{font-size:clamp(3.8rem,20vw,5.8rem)}.panel{padding:14px;border-radius:21px}.emoji-grid{grid-template-columns:repeat(4,1fr)}.player-head{align-items:flex-start}.cell{border-width:1px}.current-call{padding:6px 8px}.host-main{min-height:600px}}

/* Number Bingo 99 — cinematic red number arena */
.topbar{border-bottom-color:#fb718533;background:#210306e8}.brand,.nav-btn{color:#fff}.nav-btn,.status{border-color:#fb718540;background:#45080dcc;color:#ffe4e6}.brand-icon{background:linear-gradient(145deg,#ef4444,#7f1d1d);box-shadow:0 0 24px #ef444466}.hero>div:first-child{padding:clamp(24px,4vw,46px);border:1px solid #fb718542;border-radius:32px;background:linear-gradient(145deg,#250205e8,#5b0b13c9);box-shadow:0 30px 90px #0008;backdrop-filter:blur(8px)}.eyebrow{border-color:#fb718566;color:#fecdd3;background:#7f1d1d66}.element-word{background:linear-gradient(90deg,#fff,#fb7185,#ef4444);-webkit-background-clip:text;background-clip:text}.bingo-word{color:#fff;text-shadow:0 10px 38px #ef444499}.hero .lead{color:#ffe4e6}.hero .chip{border-color:#fb71854d;color:#fff;background:#7f1d1d99}.role{border-color:#fb718542;background:#fffafaed}.periodic-art{padding:14px;border:1px solid #fb718542;border-radius:28px;background:#260307b8;box-shadow:0 28px 80px #0008;backdrop-filter:blur(5px)}.atom-tile{display:grid;place-items:center;background:linear-gradient(145deg,#ef4444,#991b1b);box-shadow:0 14px 30px #0006}.atom-tile:nth-child(3n){background:linear-gradient(145deg,#fb7185,#be123c)}.atom-tile:nth-child(4n){background:linear-gradient(145deg,#dc2626,#450a0a)}.atom-tile small{color:#fecdd3}.primary{background:linear-gradient(135deg,#ef4444,#b91c1c,#7f1d1d);box-shadow:0 13px 28px #991b1b55}.draw-card{background:radial-gradient(circle at 50% 25%,#ffffff30,transparent 30%),linear-gradient(145deg,#ef4444,#b91c1c,#450a0a);box-shadow:0 28px 60px #450a0a66}.room-code,.winner-name{color:#b91c1c}.player-count{color:#991b1b;background:#fee2e2}.badge{color:#991b1b;background:#ffe4e6}.recent span{color:#991b1b;background:#fee2e2}.current-call{background:linear-gradient(135deg,#ef4444,#7f1d1d)}.bingo-board{border-color:#fecaca;background:#fff1f2}.cell.callable{border-color:#ef4444;box-shadow:0 0 0 3px #ef444425}.cell.marked{border-color:#7f1d1d;background:linear-gradient(145deg,#ef4444,#7f1d1d)}.cell.marked .element-name{color:#ffe4e6}.bingo-btn{color:#fff;background:linear-gradient(135deg,#ef4444,#991b1b);box-shadow:0 12px 26px #991b1b4d}