@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;500;700;800;900&display=swap');
*{box-sizing:border-box}
body{margin:0;font-family:'Noto Sans Thai',sans-serif;color:#241b32;background:#f6f4fa}
.student-bg{background:linear-gradient(135deg,#fff1f2,#fff9e8,#f4f0ff);min-height:100vh}
.game-bg{background:linear-gradient(135deg,#fff5f5,#fff9e8,#f6f0ff);min-height:100vh}
.admin-bg{background:linear-gradient(135deg,#180d2d,#3b174f);min-height:100vh}
.container{width:min(1100px,94%);margin:auto;padding:28px 0 50px}
.narrow{max-width:650px}
.hero{text-align:center;padding:28px 15px 20px}
.hero h1{font-size:clamp(30px,6vw,55px);margin:10px 0 2px;font-weight:900}
.hero p{font-size:18px;margin:0}
.badge{display:inline-block;padding:6px 14px;border-radius:999px;background:#e11d48;color:white;font-weight:800;font-size:13px}
.card,.control-card{background:#fff;border-radius:24px;padding:26px;margin:18px 0;box-shadow:0 10px 35px #00000012}
.card h2{margin-top:0}
label{display:block;font-weight:700;margin:14px 0 6px}
input{width:100%;padding:14px 16px;border:2px solid #e8e3ee;border-radius:14px;font:inherit;outline:none}
input:focus{border-color:#e11d48}
.btn{border:0;border-radius:14px;padding:13px 20px;font:inherit;font-weight:800;cursor:pointer;transition:.15s;box-shadow:0 5px 15px #0002}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:#e11d48;color:#fff}.btn-success{background:#16a34a;color:#fff}.btn-warning{background:#f59e0b;color:#241b32}.btn-danger{background:#6d28d9;color:#fff}
.btn-lg{width:100%;margin-top:22px;font-size:18px}
.notice{margin-top:16px;background:#fff7ed;border-radius:14px;padding:12px;text-align:center}
.center{text-align:center}.admin-link{color:#6d28d9;font-weight:700}
.game-top{display:flex;justify-content:space-between;gap:20px;align-items:center}.game-top h2{margin:8px 0}.game-top small{font-weight:500;color:#777}
.status-pill{background:#fff;padding:10px 15px;border-radius:999px;font-weight:800;box-shadow:0 3px 12px #0001}
.drawn-box{text-align:center;margin:15px auto 20px;background:#fff;border-radius:22px;padding:15px;box-shadow:0 8px 25px #0001;max-width:600px}
.drawn-label{font-size:13px;color:#777}.drawn-box #drawnName{font-size:26px;font-weight:900}.drawn-box.flash{animation:flash .7s}
@keyframes flash{50%{transform:scale(1.03);box-shadow:0 0 0 6px #f59e0b55}}
.bingo-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;max-width:820px;margin:auto}
.bingo-cell{position:relative;min-height:160px;border:2px solid #eadff0;background:#fff;border-radius:18px;padding:12px 8px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;font-family:inherit;box-shadow:0 5px 14px #0000000b}
.bingo-cell img{width:82px;height:72px;object-fit:contain}.bingo-cell strong{font-size:15px}.bingo-cell span{font-size:11px;color:#888}.bingo-cell i{display:none;position:absolute;inset:0;border-radius:16px;background:#16a34ae8;color:white;font-style:normal;font-size:55px;align-items:center;justify-content:center}
.bingo-cell.marked{transform:scale(.98);border-color:#16a34a}.bingo-cell.marked i{display:flex}
.hint{text-align:center;color:#777}.message{text-align:center;font-weight:800;margin:15px}.message.win{font-size:25px;background:#fff;padding:18px;border-radius:18px;color:#16a34a;box-shadow:0 8px 30px #16a34a33}
.admin-bg{color:#fff}.admin-hero{padding-bottom:10px}.admin-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:10px 0 20px}
.control-card{color:#241b32;text-align:center}.big-label{font-size:14px;color:#777}.current-device{font-size:42px;font-weight:900;display:flex;justify-content:center;align-items:center;gap:15px;min-height:100px}.current-device img{width:100px;height:90px;object-fit:contain}.current-en{color:#888}.countdown{font-size:20px;font-weight:800}
table{width:100%;border-collapse:collapse;color:#241b32}th,td{padding:11px;border-bottom:1px solid #eee;text-align:left}th{background:#faf7fc}
@media(max-width:650px){.container{padding-top:15px}.bingo-grid{gap:6px}.bingo-cell{min-height:105px;border-radius:12px;padding:5px}.bingo-cell img{width:55px;height:48px}.bingo-cell strong{font-size:12px}.bingo-cell span{font-size:8px}.game-top{align-items:flex-start}.status-pill{font-size:11px}.current-device{font-size:30px}.current-device img{width:70px;height:65px}}