*{box-sizing:border-box;margin:0;padding:0}:root{--bg:#08161f;--card:#0f2532;--card2:#16323f;--line:#23485a;--text:#eaf4f8;--dim:#8fb0c0;--accent:#ffc247;--ok:#35c98a;--bad:#ff6b6b}body{background:var(--bg);color:var(--text);font-family:Kanit,Noto Sans Thai,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}.wrap{max-width:620px;margin:0 auto;padding:14px 14px calc(96px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:14px}.wrap.center{min-height:100dvh;justify-content:center}header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:4px 2px}h1{font-size:22px;letter-spacing:.3px}h1,h2{font-weight:600}h2{font-size:15px;color:var(--dim);margin-bottom:10px}.pill{font-size:12px;padding:5px 11px;border-radius:999px;white-space:nowrap}.pill.on{background:rgba(53,201,138,.16);color:var(--ok)}.pill.off{background:hsla(0,100%,71%,.16);color:var(--bad)}.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px}.card.warn{border-color:rgba(255,194,71,.45);background:rgba(255,194,71,.08)}.card.warn p{color:var(--dim);font-size:13px;margin-top:5px}.login{display:flex;flex-direction:column;gap:12px;text-align:center}.login input{font-size:16px;padding:14px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--text);font-family:inherit;text-align:center}.games{gap:10px}.game,.games{display:flex;flex-direction:column}.game{position:relative;gap:2px;text-align:left;padding:15px 16px;border-radius:12px;border:1px solid var(--line);background:var(--card2);color:var(--text);font-family:inherit;cursor:pointer;min-height:62px}.game .th{font-size:17px;font-weight:500}.game .en{font-size:12px;color:var(--dim)}.game.on{border-color:var(--accent);background:rgba(255,194,71,.12)}.game .badge{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-size:11px;color:var(--accent);background:rgba(255,194,71,.16);padding:4px 10px;border-radius:999px}.game:disabled{opacity:.5}.group+.group{margin-top:14px}.label{font-size:12px;margin-bottom:7px}.btns{display:flex;flex-wrap:wrap;gap:8px}.btn{flex:1 1 auto;min-width:120px;min-height:48px;padding:12px 14px;border-radius:10px;font-size:14px;font-family:inherit;cursor:pointer;border:1px solid var(--line);background:var(--card2);color:var(--text)}.btn.wide{width:100%;margin-top:12px;flex:none}.btn.primary{background:var(--accent);color:#23180a;border-color:var(--accent);font-weight:600}.btn.danger{background:hsla(0,100%,71%,.14);color:var(--bad);border-color:hsla(0,100%,71%,.4)}.btn.test{background:transparent;color:var(--dim)}.btn.phase,.btn.test{font-size:13px}.btn.pressed{outline:2px solid var(--accent);outline-offset:1px}.btn:active{transform:scale(.98)}.log{list-style:none;display:flex;flex-direction:column;gap:7px}.log li{display:flex;gap:10px;font-size:13px;color:var(--dim)}.log li.bad span{color:var(--bad)}.log time{font-feature-settings:"tnum";font-variant-numeric:tabular-nums;opacity:.7;flex:none}.status.working{border-color:var(--accent);background:rgba(255,194,71,.08)}.status.ready{border-color:rgba(53,201,138,.45)}.status.error{border-color:hsla(0,100%,71%,.5);background:hsla(0,100%,71%,.08)}.statusrow{display:flex;align-items:center;gap:10px}.statusrow strong{font-size:16px}.spin{width:15px;height:15px;flex:none;border-radius:50%;border:2px solid rgba(255,194,71,.28);border-top:2px solid var(--accent);animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(1turn)}}@media (prefers-reduced-motion:reduce){.spin{animation:none}}.steps{list-style:none;margin-top:12px;display:flex;flex-direction:column;gap:6px}.steps li{display:flex;gap:9px;font-size:13px;color:var(--dim);align-items:center}.steps li.ok{color:var(--ok)}.steps .mark{width:14px;text-align:center;flex:none}.camrow{text-align:left;min-width:100%}.cam{width:100%;border-radius:10px;border:1px solid var(--line);image-rendering:pixelated;margin-bottom:10px;display:block}.dim{color:var(--dim)}.dim,.err{font-size:13px}.err{color:var(--bad)}header{position:-webkit-sticky;position:sticky;top:0;z-index:20;background:linear-gradient(var(--bg) 72%,transparent);margin:-14px -14px 0;padding:10px 16px 12px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;background:rgba(8,22,31,.93);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}.tab{flex:1 1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:11px 0 13px;font-size:12px;font-family:inherit;background:none;border:0;color:var(--dim);cursor:pointer}.tab .ico{font-size:17px;line-height:1}.tab.on{color:var(--accent)}.carousel-wrap{display:flex;flex-direction:column;gap:12px}.carousel{display:flex;gap:0;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 -14px;padding:0}.carousel::-webkit-scrollbar{display:none}.slide{flex:0 0 100%;scroll-snap-align:center;padding:0 14px}.art{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--line);line-height:0}.slide.on .art{border-color:var(--accent);box-shadow:0 0 0 2px rgba(255,194,71,.28)}.cover{width:100%;height:auto;display:block}.live{position:absolute;left:12px;top:12px;background:var(--accent);color:#23180a;font-size:11px;font-weight:600;padding:5px 11px;border-radius:999px}.meta{padding:11px 2px 0}.meta h3{font-size:19px;font-weight:600}.meta p{font-size:12px;color:var(--dim);margin-top:2px}.dots{display:flex;justify-content:center;gap:8px}.dot{width:8px;height:8px;border-radius:50%;padding:0;border:0;background:var(--line);cursor:pointer;transition:width .18s ease,background .18s ease}.dot.on{width:22px;border-radius:4px}.cta,.dot.on{background:var(--accent)}.cta{width:100%;min-height:56px;border-radius:14px;font-family:inherit;font-size:17px;font-weight:600;cursor:pointer;color:#23180a;border:0}.cta.danger{background:hsla(0,100%,71%,.16);color:var(--bad);border:1px solid hsla(0,100%,71%,.45)}.cta:disabled{opacity:.45}.cta:active{transform:scale(.985)}