/* Styles for atom-nu-quiz. */
:root{--orange:#22d3ee;--orange2:#38bdf8;--orange3:#4f46e5;--gray:#a7a9ac;--ink:#222329;--ink2:#34363e;--muted:#777b86;--paper:#f4fbff;--white:#fff;--green:#22c55e;--red:#ef4444;--blue:#3b82f6;--purple:#8b5cf6;--yellow:#facc15;--shadow:0 22px 60px rgba(30,31,36,.16);--soft:0 10px 30px rgba(30,31,36,.10)}
*{box-sizing:border-box}html,body{min-height:100%}html{background:#f3f1ed}body{margin:0;color:var(--ink);font-family:"Prompt",sans-serif;background:radial-gradient(circle at 8% 10%,rgba(34,211,238,.24),transparent 28%),radial-gradient(circle at 92% 90%,rgba(52,54,62,.18),transparent 30%),linear-gradient(145deg,#f4fbff 0%,#f1f2f4 52%,#eef2ff 100%);overflow-x:hidden;-webkit-tap-highlight-color:transparent;user-select:none}body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.17;background-image:linear-gradient(rgba(255,255,255,.7) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.7) 1px,transparent 1px);background-size:36px 36px;mask-image:linear-gradient(to bottom,black,transparent 80%)}button,input,select{font:inherit}input,select{user-select:text}button{border:0;cursor:pointer}button:disabled{opacity:.48;cursor:not-allowed}.app{width:min(1320px,calc(100% - 26px));min-height:100vh;margin:auto;padding:16px 0 28px;display:flex;flex-direction:column;position:relative}.orb{position:fixed;border-radius:50%;filter:blur(2px);pointer-events:none;z-index:-1;animation:float 8s ease-in-out infinite}.orb.a{width:180px;height:180px;left:-70px;top:22%;background:linear-gradient(145deg,rgba(34,211,238,.28),rgba(56,189,248,.05))}.orb.b{width:240px;height:240px;right:-110px;bottom:5%;background:linear-gradient(145deg,rgba(52,54,62,.2),rgba(167,169,172,.04));animation-delay:-3s}@keyframes float{50%{transform:translateY(-20px) rotate(9deg)}}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:3px 2px 15px}.brand{display:flex;align-items:center;gap:11px}.brandmark{width:53px;height:53px;border-radius:18px;display:grid;place-items:center;color:white;font-family:"Chakra Petch",sans-serif;font-size:1.15rem;font-weight:800;background:linear-gradient(145deg,var(--orange2),var(--orange3));box-shadow:0 12px 28px rgba(34,211,238,.38);position:relative;overflow:hidden}.brandmark i{font-size:1.5rem;animation:atomSpin 8s linear infinite}@keyframes atomSpin{to{transform:rotate(360deg)}}.brandmark:after{content:"";position:absolute;width:45px;height:8px;background:rgba(255,255,255,.3);transform:rotate(-40deg);top:8px;right:-10px}.brand h1{font-family:"Chakra Petch","Prompt",sans-serif;margin:0;font-size:clamp(1.05rem,2.3vw,1.48rem);letter-spacing:.02em}.brand p{margin:1px 0 0;color:var(--muted);font-size:.78rem}.top-actions{display:flex;align-items:center;gap:8px}.status-pill,.round-icon{border:1px solid rgba(52,54,62,.1);background:rgba(255,255,255,.76);box-shadow:var(--soft);backdrop-filter:blur(15px)}.status-pill{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;font-size:.76rem;color:#656873}.dot{width:9px;height:9px;border-radius:50%;background:#9ca3af}.dot.online{background:var(--green);box-shadow:0 0 0 4px rgba(34,197,94,.14)}.dot.error{background:var(--red);box-shadow:0 0 0 4px rgba(239,68,68,.13)}.round-icon{width:42px;height:42px;border-radius:14px;color:var(--ink2);transition:.2s}.round-icon:hover{transform:translateY(-2px);background:white}.round-icon.active{color:var(--orange3);box-shadow:0 8px 25px rgba(34,211,238,.22)}
main{flex:1;display:grid;place-items:center}.screen{display:none;width:100%;animation:enter .32s ease}.screen.active{display:block}@keyframes enter{from{opacity:0;transform:translateY(9px) scale(.995)}to{opacity:1;transform:none}}.panel{background:rgba(255,255,255,.9);border:1px solid rgba(255,255,255,.92);box-shadow:var(--shadow);backdrop-filter:blur(18px);border-radius:30px}.hero{display:grid;grid-template-columns:1.28fr .72fr;gap:20px}.hero-main{padding:clamp(30px,5vw,66px);position:relative;overflow:hidden;min-height:570px;display:flex;flex-direction:column;justify-content:center}.hero-main:after{content:"ATOM";position:absolute;right:-18px;bottom:-67px;font-family:"Chakra Petch";font-weight:800;font-size:clamp(180px,24vw,340px);line-height:1;color:rgba(34,211,238,.07);transform:rotate(-8deg)}.eyebrow{display:inline-flex;align-self:flex-start;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;color:#0e7490;background:rgba(34,211,238,.13);font-size:.78rem;font-weight:700;letter-spacing:.08em}.hero h2{margin:18px 0 11px;font-family:"Chakra Petch","Prompt";font-size:clamp(2.7rem,7vw,6.25rem);line-height:.84;letter-spacing:-.055em;position:relative;z-index:1}.hero h2 span{color:var(--orange);text-shadow:0 10px 30px rgba(34,211,238,.2)}.lead{max-width:720px;color:#696c75;font-size:clamp(.96rem,1.8vw,1.1rem);line-height:1.8;position:relative;z-index:1}.features{display:flex;flex-wrap:wrap;gap:8px;margin:15px 0 24px;position:relative;z-index:1}.chip{padding:7px 11px;border-radius:12px;background:#f5f5f6;border:1px solid #e9e9eb;font-size:.76rem;font-weight:600}.chip i{color:var(--orange);margin-right:5px}.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;position:relative;z-index:1}.mode{padding:20px;text-align:left;border-radius:22px;color:white;transition:.22s;position:relative;overflow:hidden;min-height:140px}.mode:before{content:"";position:absolute;width:85px;height:85px;border:18px solid rgba(255,255,255,.1);border-radius:50%;right:-24px;top:-28px}.mode:hover{transform:translateY(-5px);box-shadow:0 20px 35px rgba(30,31,36,.22)}.mode.host{background:linear-gradient(145deg,#2d2f36,#17181c)}.mode.player{background:linear-gradient(145deg,#06b6d4,#4f46e5)}.mode .ico{font-size:1.55rem;margin-bottom:12px}.mode strong{display:block;font-size:1.04rem}.mode small{display:block;margin-top:5px;opacity:.78;line-height:1.45}.sidecard{padding:27px;display:flex;flex-direction:column;justify-content:space-between;gap:18px}.sidecard h3{margin:0 0 17px;font-size:1.22rem}.steps{display:grid;gap:13px}.step{display:flex;gap:11px;align-items:flex-start}.step b{flex:0 0 32px;width:32px;height:32px;border-radius:11px;display:grid;place-items:center;background:linear-gradient(145deg,var(--orange2),var(--orange3));color:white;font-family:"Chakra Petch"}.step p{margin:3px 0;color:#686b74;font-size:.86rem;line-height:1.55}.mini-card{border-radius:20px;padding:17px;background:linear-gradient(145deg,#f4f4f5,#eef8ff);border:1px solid #ededee}.mini-card strong{display:block;margin-bottom:5px}.mini-card p{margin:0;color:#737680;font-size:.78rem;line-height:1.55}
.form-panel{width:min(560px,100%);margin:auto;padding:clamp(25px,5vw,43px)}.back{background:transparent;color:#6b6e76;font-weight:600;padding:6px 0}.form-panel h2{font-size:clamp(1.8rem,4vw,2.6rem);margin:18px 0 3px}.sub{color:#777b84;margin:0 0 23px;line-height:1.65}.field{margin-top:14px}.field label{display:block;font-size:.82rem;font-weight:700;margin-bottom:7px}.input,.select{width:100%;border:1px solid #dddfe3;background:#fafafa;border-radius:16px;padding:14px 15px;outline:none;transition:.2s}.input:focus,.select:focus{border-color:var(--orange);box-shadow:0 0 0 4px rgba(34,211,238,.12);background:white}.room-input{text-align:center;text-transform:uppercase;font-family:"Chakra Petch";font-size:1.8rem;font-weight:800;letter-spacing:.22em}.primary,.secondary,.danger{border-radius:16px;padding:13px 20px;font-weight:700;transition:.2s}.primary{color:white;background:linear-gradient(145deg,var(--orange2),var(--orange3));box-shadow:0 11px 27px rgba(34,211,238,.28)}.primary:hover{transform:translateY(-2px)}.secondary{color:var(--ink);background:#eef0f2;border:1px solid #e1e3e7}.danger{background:#fee2e2;color:#b91c1c}.full{width:100%;margin-top:20px}.error{min-height:22px;color:#dc2626;font-size:.82rem;margin-top:9px;text-align:center}
.game-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:18px}.game-main{padding:clamp(22px,3vw,36px);min-height:650px}.side-panel{padding:20px;min-height:650px}.host-head{display:flex;justify-content:space-between;gap:15px;align-items:center}.overline{font-size:.75rem;font-weight:700;color:#777b84;letter-spacing:.08em}.room-code{display:flex;align-items:center;gap:10px;margin-top:5px}.room-code strong{font-family:"Chakra Petch";font-size:clamp(2rem,4vw,3rem);letter-spacing:.16em}.copy-btn{width:39px;height:39px;border-radius:12px;background:#f1f2f4;color:#555963}.lobby-grid{display:grid;grid-template-columns:260px 1fr;gap:22px;align-items:center;margin-top:35px}.qr-card{background:white;border:1px solid #ececee;border-radius:24px;padding:16px;text-align:center;box-shadow:var(--soft)}#qrCode{width:200px;height:200px;margin:auto;display:grid;place-items:center}#qrCode img,#qrCode canvas{max-width:100%;border-radius:9px}.qr-card small{display:block;color:#777b84;margin-top:9px;line-height:1.45}.lobby-copy{text-align:center}.lobby-copy .big-icon{width:102px;height:102px;border-radius:34px;display:grid;place-items:center;margin:0 auto 17px;background:linear-gradient(145deg,rgba(34,211,238,.16),rgba(167,169,172,.12));font-size:2.8rem;color:var(--orange3);animation:pulse 2s infinite}@keyframes pulse{50%{transform:scale(1.04);box-shadow:0 0 0 17px rgba(34,211,238,.06)}}.lobby-copy h2{font-size:clamp(1.7rem,4vw,2.7rem);margin:0}.lobby-copy p{color:#777b84}.share-note{display:inline-flex;gap:7px;align-items:center;padding:8px 11px;border-radius:12px;background:#f4f4f5;color:#656873;font-size:.77rem}.panel-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.panel-title h3{margin:0}.badge{padding:5px 9px;border-radius:999px;background:rgba(34,211,238,.13);color:#4338ca;font-size:.7rem;font-weight:700}.player-list,.rank-list{display:grid;gap:8px;max-height:555px;overflow:auto;padding-right:3px}.empty{padding:35px 8px;text-align:center;color:#999ca3;font-size:.83rem}.player-chip,.rank-item{display:flex;align-items:center;gap:9px;padding:10px;border-radius:15px;background:#f7f7f8;border:1px solid #eeeeef}.avatar{width:38px;height:38px;border-radius:13px;display:grid;place-items:center;color:white;font-weight:800;background:linear-gradient(145deg,var(--orange2),var(--orange3))}.player-meta{min-width:0;flex:1}.player-meta strong,.rank-name{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player-meta small{color:#22a05a;font-size:.68rem}.rank-no{width:31px;height:31px;border-radius:10px;display:grid;place-items:center;background:#e9eaed;font-family:"Chakra Petch";font-weight:800}.rank-name{flex:1}.rank-score{font-family:"Chakra Petch";font-weight:800;color:var(--orange3)}
.question-top{display:flex;align-items:center;justify-content:space-between;gap:15px}.qnum{font-family:"Chakra Petch";font-size:.85rem;font-weight:700;color:var(--orange3);letter-spacing:.08em}.phase-label{font-size:.76rem;color:#777b84;margin-top:2px}.timer{--p:100%;width:76px;height:76px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--orange) var(--p),#e8e8ea 0);position:relative}.timer:after{content:"";position:absolute;inset:7px;border-radius:50%;background:white}.timer span{position:relative;z-index:1;font-family:"Chakra Petch";font-size:1.5rem;font-weight:800}.answer-count{text-align:right;font-size:.68rem;color:#777b84}.answer-count b{display:block;font-family:"Chakra Petch";font-size:1.15rem;color:var(--ink)}.question-box{min-height:160px;display:grid;place-items:center;text-align:center;padding:25px;margin:23px 0 15px;border-radius:25px;background:linear-gradient(145deg,#eef8ff,#f0f1f3);border:1px solid #ececee;position:relative;overflow:hidden}.question-box:before{content:"?";position:absolute;font-family:"Chakra Petch";font-size:130px;font-weight:800;right:18px;bottom:-57px;color:rgba(34,211,238,.065)}.question-box h2{margin:0;font-size:clamp(1.35rem,3.2vw,2.35rem);line-height:1.45;position:relative}.answer-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}.answer{min-height:91px;border-radius:20px;color:white;text-align:left;padding:17px;display:flex;align-items:center;gap:13px;font-weight:700;box-shadow:0 10px 20px rgba(30,31,36,.14);transition:.18s;position:relative;overflow:hidden}.answer:not(:disabled):hover{transform:translateY(-3px) scale(1.01)}.answer:nth-child(1){background:linear-gradient(145deg,#ef4444,#be123c)}.answer:nth-child(2){background:linear-gradient(145deg,#3b82f6,#1d4ed8)}.answer:nth-child(3){background:linear-gradient(145deg,#eab308,#ca8a04)}.answer:nth-child(4){background:linear-gradient(145deg,#22c55e,#15803d)}.shape{width:39px;height:39px;flex:0 0 39px;border-radius:12px;background:rgba(255,255,255,.2);display:grid;place-items:center;font-size:1.2rem}.answer.correct{outline:5px solid rgba(255,255,255,.75);box-shadow:0 0 0 5px var(--green),0 15px 30px rgba(34,197,94,.3);transform:scale(1.01)}.answer.dim{filter:grayscale(.7);opacity:.3}.answer.selected{outline:5px solid white;transform:scale(.98)}.game-controls{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:17px}.status-text{color:#71747e;font-size:.82rem}.control-actions{display:flex;gap:8px}.explanation{margin-top:12px;padding:11px 14px;border-radius:14px;background:#eef2ff;color:#3730a3;font-size:.78rem;display:none}.explanation.show{display:block}
.player-wrap{width:min(880px,100%);margin:auto}.player-card{padding:clamp(22px,4vw,36px)}.waiting{text-align:center;padding:clamp(38px,8vw,78px)}.mega-icon{width:120px;height:120px;border-radius:40px;margin:0 auto 18px;display:grid;place-items:center;font-size:3.2rem;color:var(--orange3);background:linear-gradient(145deg,rgba(34,211,238,.16),rgba(167,169,172,.13));box-shadow:var(--soft)}.waiting h2{font-size:clamp(1.9rem,5vw,3rem);margin:0}.waiting p{color:#777b84}.room-tag,.rank-tag{display:inline-flex;padding:8px 13px;border-radius:999px;background:#f0f1f3;font-family:"Chakra Petch";font-weight:700}.result-card{text-align:center}.result-banner{border-radius:23px;padding:24px;color:white;margin-bottom:22px}.result-banner.correct{background:linear-gradient(145deg,#22c55e,#15803d)}.result-banner.wrong{background:linear-gradient(145deg,#ef4444,#be123c)}.result-banner h2{font-size:clamp(2rem,6vw,3.4rem);margin:0}.gain{font-family:"Chakra Petch";font-size:1.4rem;font-weight:800}.score-big{font-family:"Chakra Petch";font-size:clamp(3.7rem,12vw,7.5rem);font-weight:800;line-height:1;color:var(--orange3);margin:9px 0}.correct-copy{color:#747780;line-height:1.6}.podium{display:flex;align-items:flex-end;justify-content:center;gap:8px;min-height:285px;margin:35px auto 25px}.podium-slot{width:min(180px,31%);text-align:center}.podium-name{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:8px}.podium-block{display:grid;place-items:center;border-radius:19px 19px 7px 7px;color:white;font-family:"Chakra Petch";font-size:2rem;font-weight:800;box-shadow:var(--soft)}.podium-slot:nth-child(1) .podium-block{height:118px;background:linear-gradient(#cfd1d5,#8f9299)}.podium-slot:nth-child(2) .podium-block{height:175px;background:linear-gradient(#ffd85a,#dcae08)}.podium-slot:nth-child(3) .podium-block{height:88px;background:linear-gradient(#db945e,#a65b2b)}.countdown{position:fixed;inset:0;z-index:1000;background:rgba(23,24,28,.76);backdrop-filter:blur(15px);display:none;place-items:center;color:white}.countdown.show{display:grid}.count-number{font-family:"Chakra Petch";font-size:min(34vw,260px);font-weight:800;animation:pop .7s ease both;text-shadow:0 20px 50px rgba(34,211,238,.55)}@keyframes pop{0%{transform:scale(.4);opacity:0}45%{transform:scale(1.12);opacity:1}100%{transform:scale(1);opacity:1}}.toast{position:fixed;left:50%;bottom:25px;transform:translate(-50%,20px);padding:11px 17px;border-radius:14px;background:#222329;color:white;opacity:0;pointer-events:none;transition:.25s;z-index:1200;box-shadow:var(--soft);font-size:.82rem}.toast.show{opacity:1;transform:translate(-50%,0)}footer{text-align:center;color:#8a8d95;font-size:.68rem;padding:18px 8px 0;line-height:1.7}footer a{color:#4338ca;text-decoration:none}.noscript{padding:20px;background:#fee2e2;color:#991b1b;text-align:center}
@media(max-width:960px){.hero{grid-template-columns:1fr}.sidecard{display:none}.game-grid{grid-template-columns:1fr}.side-panel{min-height:auto}.game-main{min-height:620px}.lobby-grid{grid-template-columns:220px 1fr}}
@media(max-width:680px){.app{width:min(100% - 16px,1320px);padding-top:8px}.brand p,.status-pill span{display:none}.hero-main{padding:29px 20px;min-height:auto}.hero h2{font-size:clamp(2.7rem,16vw,4.3rem)}.mode-grid,.answer-grid{grid-template-columns:1fr}.mode{min-height:116px}.game-main,.side-panel,.player-card{border-radius:22px;padding:17px}.game-grid{gap:10px}.host-head{align-items:flex-start}.host-head>.primary{padding:11px 13px}.lobby-grid{grid-template-columns:1fr;margin-top:20px}.qr-card{width:225px;margin:auto}.room-code strong{font-size:2rem}.side-panel{display:none}.question-box{min-height:135px;padding:19px;margin-top:14px}.answer{min-height:73px;padding:13px}.game-controls{align-items:flex-start;flex-direction:column}.control-actions{width:100%}.control-actions button{flex:1}.timer{width:64px;height:64px}.timer span{font-size:1.25rem}.top-actions{gap:5px}.round-icon{width:38px;height:38px}.podium{min-height:230px}.podium-slot:nth-child(1) .podium-block{height:95px}.podium-slot:nth-child(2) .podium-block{height:140px}.podium-slot:nth-child(3) .podium-block{height:72px}}
.home-nav{display:inline-flex;align-items:center;gap:7px;padding:9px 12px;border-radius:14px;color:var(--ink2);text-decoration:none;font-size:.78rem;font-weight:700;border:1px solid rgba(52,54,62,.1);background:rgba(255,255,255,.76);box-shadow:var(--soft);backdrop-filter:blur(15px);transition:.2s}.home-nav:hover{transform:translateY(-2px);background:white;color:var(--orange3)}.emoji-picker{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}.emoji-picker label{margin:0;cursor:pointer}.emoji-picker input{position:absolute;opacity:0;pointer-events:none}.emoji-picker span{display:grid;place-items:center;min-height:48px;border:2px solid #e5e7eb;border-radius:14px;background:#fafafa;font-size:1.55rem;transition:.18s}.emoji-picker label:hover span{transform:translateY(-2px);border-color:var(--orange2);background:#eef2ff}.emoji-picker input:checked+span{border-color:var(--orange);background:#e0f2fe;box-shadow:0 0 0 4px rgba(34,211,238,.13);transform:scale(1.04)}.emoji-picker input:focus-visible+span{outline:3px solid var(--blue);outline-offset:2px}.emoji-avatar{font-size:1.35rem;background:#e0f2fe;border:1px solid #bae6fd}.danger:hover{transform:translateY(-2px);background:#fecaca}.control-actions .danger{white-space:nowrap}@media(max-width:680px){.home-nav span{display:none}.emoji-picker{grid-template-columns:repeat(4,1fr)}.control-actions{flex-wrap:wrap}.control-actions .danger{flex-basis:100%}}.usage-stats{margin-top:20px;padding:18px 22px;display:grid;grid-template-columns:auto 1fr 1fr;align-items:center;gap:14px}.usage-stats-title{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--ink2)}.usage-stats-title i{width:38px;height:38px;border-radius:13px;display:grid;place-items:center;color:white;background:linear-gradient(145deg,var(--orange2),var(--orange3));box-shadow:0 8px 20px rgba(34,211,238,.25)}.stat-box{padding:13px 16px;border-radius:18px;background:linear-gradient(145deg,#eef2ff,#f3f4f6);border:1px solid #ececee;text-align:center}.stat-box strong{display:block;font-family:"Chakra Petch";font-size:clamp(1.55rem,3vw,2.15rem);line-height:1;color:var(--orange3)}.stat-box span{display:block;margin-top:6px;color:#737680;font-size:.75rem}@media(max-width:680px){.usage-stats{grid-template-columns:1fr 1fr;padding:15px;gap:9px}.usage-stats-title{grid-column:1/-1}.stat-box{padding:12px 8px}}@media print{body>*{display:none!important}body:after{content:"เอกสารนี้เป็นเกมออนไลน์ ไม่อนุญาตให้พิมพ์หรือคัดลอก";display:block;padding:40px;text-align:center}}