/* ==========================================================
   Back to School — chalkboard, crayons, notebook paper
   โหลดต่อจาก app.css เมื่อเลือกธีม school
   ========================================================== */
.theme-school {
  --bg-0: #142620;
  --bg-1: #1f3a30;
  --bg-2: #284a3d;
  --ink: #f7f5ee;
  --ink-dim: rgba(247, 245, 238, 0.72);
  --ink-mute: rgba(247, 245, 238, 0.48);
  --gold-1: #fff2a8;
  --gold-2: #ffd84d;
  --gold-3: #ffb03b;
  --gold-4: #ff8fab;
  --rose: #ff6b6b;
  --mint: #7ee2b8;
  --sky: #7cc4ff;
  --glass: rgba(255, 255, 255, 0.05);
  --glass-2: rgba(255, 255, 255, 0.1);
  --line: rgba(255, 255, 255, 0.16);
  --line-2: rgba(255, 255, 255, 0.34);
  --gold-grad: linear-gradient(120deg, #fff2a8 0%, #ffd84d 30%, #ffb03b 62%, #ff8fab 100%);
  --font-head: 'Itim', 'Mali', system-ui, sans-serif;
  --font-body: 'Mali', 'Itim', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --chalk-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --wood: repeating-linear-gradient(90deg, #8a5a33 0 7px, #7a4c29 7px 10px, #976640 10px 18px, #835530 18px 22px);
  --hand: 18px 24px 16px 26px / 24px 16px 26px 18px;
}

body.theme-school {
  font-weight: 400;
  background:
    var(--chalk-noise),
    radial-gradient(1000px 650px at 18% 8%, rgba(255, 255, 255, 0.08), transparent 60%),
    radial-gradient(900px 600px at 88% 85%, rgba(255, 255, 255, 0.06), transparent 60%),
    radial-gradient(600px 400px at 60% 40%, rgba(255, 216, 77, 0.04), transparent 70%),
    linear-gradient(180deg, #24443a, #1a3029);
  background-attachment: fixed;
}

/* กรอบไม้รอบกระดานดำ (หน้าเช็คอิน / จอหน้างาน / Lucky Draw) */
body.theme-school.framed::after {
  content: '';
  position: fixed; inset: 0; z-index: 60; pointer-events: none;
  border: clamp(7px, 1.1vw, 18px) solid #8a5a33;
  border-image: var(--wood) 30;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.35), inset 0 10px 40px rgba(0, 0, 0, 0.45);
}

.theme-school h1, .theme-school h2, .theme-school h3, .theme-school h4 { font-weight: 400; }
.theme-school .eyebrow { color: var(--gold-2); letter-spacing: 0.32em; font-size: 0.78rem; }
.theme-school .gold-text { animation-duration: 9s; }

/* ---------- การ์ด: กรอบชอล์กวาดมือ ---------- */
.theme-school .card {
  background: rgba(255, 255, 255, 0.045);
  border: 2px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--hand);
  box-shadow: 0 14px 40px -12px rgba(0, 0, 0, 0.45);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.theme-school .card.glow::before { display: none; }
.theme-school .card.glow { border-color: rgba(255, 216, 77, 0.45); }

/* ---------- ปุ่ม: ดินสอสีเหลือง / ป้ายสติกเกอร์ ---------- */
.theme-school .btn {
  border: 2px solid rgba(255, 255, 255, 0.32);
  border-radius: 14px 18px 13px 19px / 18px 13px 19px 14px;
  background: rgba(255, 255, 255, 0.06);
  font-weight: 400;
}
.theme-school .btn:hover { border-color: #fff; box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.5); transform: translateY(-2px) rotate(-0.6deg); }
.theme-school .btn-gold {
  background: #ffd84d;
  color: #2d2a1f;
  border-color: #2d2a1f;
  box-shadow: 0 5px 0 #c99a1a, 0 12px 26px -8px rgba(0, 0, 0, 0.5);
}
.theme-school .btn-gold:hover { background: #ffe066; color: #1c1a12; border-color: #1c1a12; box-shadow: 0 7px 0 #c99a1a, 0 16px 30px -8px rgba(0, 0, 0, 0.55); }
.theme-school .btn-gold:active { transform: translateY(4px); box-shadow: 0 1px 0 #c99a1a, 0 6px 14px -6px rgba(0, 0, 0, 0.5); }
.theme-school .btn-danger { border-color: rgba(255, 107, 107, 0.6); color: #ffd1d1; }
.theme-school .btn-danger:hover { border-color: #ff6b6b; color: #fff; }

.theme-school .input { border-width: 2px; border-radius: 12px 15px 11px 16px / 15px 11px 16px 12px; background: rgba(0, 0, 0, 0.22); }
.theme-school .input:focus { border-color: #ffd84d; box-shadow: 0 0 0 4px rgba(255, 216, 77, 0.18); }
.theme-school select.input option { background: #1f3a30; }
.theme-school .spinner { border-color: rgba(45, 42, 31, 0.3); border-top-color: #2d2a1f; }

/* ---------- หน้าเช็คอิน ---------- */
.theme-school .hero::before {
  content: '🎒  ✏️  📚';
  display: block;
  font-size: 1.9rem;
  letter-spacing: 0.1em;
  margin-bottom: 10px;
  animation: bob 3.2s ease-in-out infinite;
}
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-6px) rotate(2deg); } }
.theme-school .hero .year { font-weight: 400; letter-spacing: 0.02em; filter: drop-shadow(0 6px 0 rgba(0, 0, 0, 0.25)); }
.theme-school .hero .title { font-family: var(--font-head); letter-spacing: 0.04em; }

/* การ์ดเช็คอิน = กระดาษสมุดติดเทป */
.theme-school .checkin-card {
  --ink: #2d3047;
  --ink-dim: #565a75;
  --ink-mute: #8b8fa8;
  --line: rgba(45, 48, 71, 0.2);
  --line-2: rgba(45, 48, 71, 0.38);
  --gold-1: #e63946;
  --gold-2: #e63946;
  --gold-grad: linear-gradient(120deg, #e63946, #f77f00 55%, #e63946);
  color: var(--ink);
  border: 0;
  border-radius: 4px 4px 6px 4px;
  padding: 36px 26px 30px 50px;
  transform: rotate(-0.8deg);
  background:
    linear-gradient(90deg, transparent 34px, rgba(230, 57, 70, 0.55) 34px 36px, transparent 36px),
    repeating-linear-gradient(180deg, transparent 0 29px, rgba(70, 130, 200, 0.22) 29px 30px),
    linear-gradient(180deg, #fffdf6, #fbf6e6);
  box-shadow: 0 2px 0 #e9e1c9, 0 24px 50px -14px rgba(0, 0, 0, 0.6), 0 6px 14px rgba(0, 0, 0, 0.25);
}
.theme-school .card.glow.checkin-card::before {
  content: '';
  display: block;
  position: absolute;
  top: -14px; left: 50%;
  width: 120px; height: 30px;
  transform: translateX(-50%) rotate(-3deg);
  background: rgba(255, 216, 77, 0.78);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  -webkit-mask: none; mask: none;
  padding: 0;
  border-radius: 2px;
}
.theme-school .checkin-card .input { background: #fff; color: var(--ink); border-color: rgba(45, 48, 71, 0.3); }
.theme-school .checkin-card .input:focus { border-color: #4d96ff; box-shadow: 0 0 0 4px rgba(77, 150, 255, 0.18); }
.theme-school .checkin-card .btn:not(.btn-gold) { color: var(--ink); border-color: rgba(45, 48, 71, 0.35); background: transparent; }
.theme-school .checkin-card .err-box { color: #b42335; background: rgba(230, 57, 70, 0.08); border-color: rgba(230, 57, 70, 0.4); }
.theme-school .checkin-card .badge-ok {
  background: #2a9d8f;
  box-shadow: 0 0 0 6px rgba(42, 157, 143, 0.15), 0 0 0 9px rgba(42, 157, 143, 0.08);
  border-radius: 50%;
}
.theme-school .checkin-card .badge-ok svg { stroke: #fff; }
.theme-school .checkin-card .ticket { border: 2px dashed rgba(45, 48, 71, 0.3); background: rgba(255, 216, 77, 0.12); }
.theme-school .checkin-card .ticket b { color: #e63946; }
.theme-school .footer-note { font-family: var(--font-head); letter-spacing: 0.15em; }

/* ---------- จอหน้างาน ---------- */
.theme-school .stage-left::before {
  content: '✏️ 📐 🍎 📚';
  display: block;
  font-size: 2.4vw;
  margin-bottom: 1.5vh;
  animation: bob 3.4s ease-in-out infinite;
}
.theme-school .stage-left .year { font-weight: 400; filter: drop-shadow(0 8px 0 rgba(0, 0, 0, 0.25)); }
.theme-school .stage-left .title { font-family: var(--font-head); }
.theme-school .counter .num { font-weight: 400; }
/* แถบความคืบหน้า = ดินสอ */
.theme-school .progress { height: 16px; border-radius: 3px 10px 10px 3px; background: rgba(255, 255, 255, 0.1); border: 2px solid rgba(255, 255, 255, 0.25); overflow: visible; position: relative; }
.theme-school .progress > i {
  position: relative;
  border-radius: 2px 0 0 2px;
  background: repeating-linear-gradient(180deg, #ffd84d 0 4px, #f5c518 4px 8px);
  box-shadow: none;
}
.theme-school .stage .progress > i::after {
  content: '';
  position: absolute; right: -14px; top: -2px;
  border-left: 14px solid #f1d1a5;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}
.theme-school .scan-box .qr { border-radius: 6px; transform: rotate(-2deg); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.4); }
.theme-school .feed li { border: 2px solid rgba(255, 255, 255, 0.14); border-radius: 12px 16px 11px 17px / 16px 11px 17px 12px; }
.theme-school .feed li.new { background: linear-gradient(90deg, rgba(255, 216, 77, 0.2), rgba(255, 255, 255, 0.03)); border-color: rgba(255, 216, 77, 0.55); }
.theme-school .avatar { background: #ffd84d; color: #2d2a1f; border: 2px solid rgba(0, 0, 0, 0.2); }
.theme-school .avatar.subcontract { background: #7cc4ff; }
.theme-school .avatar.guest { background: #ff8fab; }
.theme-school .live { color: #7ee2b8; }
.theme-school .welcome-toast {
  background: var(--chalk-noise), radial-gradient(circle at 50% 0%, rgba(255, 216, 77, 0.22), rgba(26, 48, 41, 0.97) 70%);
  border: clamp(6px, .8vw, 12px) solid #8a5a33;
  border-image: var(--wood) 30;
  border-radius: 0;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.7);
}

/* ---------- Lucky draw ---------- */
.theme-school .draw-side { background: rgba(0, 0, 0, 0.18); border-right: 2px dashed rgba(255, 255, 255, 0.18); }
.theme-school .prize-item { border: 2px solid rgba(255, 255, 255, 0.14); border-radius: 12px 16px 11px 17px / 16px 11px 17px 12px; }
.theme-school .prize-item.active { border-color: #ffd84d; background: rgba(255, 216, 77, 0.12); box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.25); }
.theme-school .spotlight { background: radial-gradient(ellipse at top, rgba(255, 255, 255, 0.12), transparent 60%); }
.theme-school .prize-hero img { border-radius: 6px; border: 6px solid #fff; transform: rotate(-2deg); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5); }
.theme-school .prize-hero .pname { font-weight: 400; }
.theme-school .prize-hero .pleft { border: 2px dashed rgba(255, 216, 77, 0.6); }
.theme-school .slot {
  border-radius: 10px;
  border: clamp(8px, 1vw, 16px) solid #8a5a33;
  border-image: var(--wood) 30;
  background: var(--chalk-noise), linear-gradient(180deg, #1c352c, #24443a 50%, #1c352c);
  box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.5), 0 24px 60px -10px rgba(0, 0, 0, 0.7);
}
.theme-school .slot::before { background: linear-gradient(180deg, rgba(24, 44, 37, 0.96), transparent); }
.theme-school .slot::after { background: linear-gradient(0deg, rgba(24, 44, 37, 0.96), transparent); }
.theme-school .slot .line { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent); }
.theme-school .slot .reel div { font-weight: 400; }
.theme-school .slot.win { animation: chalkPulse 1.4s ease-in-out infinite; }
@keyframes chalkPulse {
  0%, 100% { box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.5), 0 0 60px -10px rgba(255, 216, 77, 0.5); }
  50% { box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.5), 0 0 140px 0 rgba(255, 216, 77, 0.75); }
}
.theme-school .eyebrow.th { letter-spacing: 0.1em; }
.theme-school .mode-pick button { border: 2px solid rgba(255, 255, 255, 0.16); border-radius: 12px 16px 11px 17px / 16px 11px 17px 12px; }
.theme-school .mode-pick button.on { border-color: #ffd84d; color: #ffd84d; background: rgba(255, 216, 77, 0.12); box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.25); }
.theme-school .wheel-pointer { border-top-color: #e63946; }
.theme-school .wheel-hub { background: #ffd84d; color: #2d2a1f; box-shadow: 0 0 0 5px #8a5a33, 0 6px 20px rgba(0, 0, 0, 0.5); }
.theme-school .name-grid .tile { border: 2px solid rgba(255, 255, 255, 0.2); border-radius: 10px 14px 9px 15px / 14px 9px 15px 10px; background: rgba(255, 255, 255, 0.05); }
.theme-school .name-grid .tile:nth-child(3n) { transform: rotate(-1.5deg); }
.theme-school .name-grid .tile:nth-child(4n+1) { transform: rotate(1.2deg); }
.theme-school .name-grid .tile.on { background: #ffd84d; color: #2d2a1f; border-color: #2d2a1f; transform: scale(1.12) rotate(-2deg); box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.3); }
.theme-school .name-grid .tile.win { transform: scale(1.35) rotate(-2deg); }
.theme-school .scramble {
  border-radius: 10px;
  border: clamp(8px, 1vw, 16px) solid #8a5a33;
  border-image: var(--wood) 30;
  background: var(--chalk-noise), linear-gradient(180deg, #1c352c, #24443a 50%, #1c352c);
  box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.5), 0 24px 60px -10px rgba(0, 0, 0, 0.7);
}
.theme-school .scramble .sc-name { font-weight: 400; }
.theme-school .scramble.win { animation: chalkPulse 1.4s ease-in-out infinite; }
.theme-school .result-pop {
  border-radius: 6px;
  color: #2d3047;
  --ink-dim: #565a75;
  --gold-grad: linear-gradient(120deg, #e63946, #f77f00 55%, #e63946);
  --gold-2: #e63946;
  background: repeating-linear-gradient(180deg, transparent 0 29px, rgba(70, 130, 200, 0.22) 29px 30px), linear-gradient(180deg, #fffdf6, #fbf6e6);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}
.theme-school .result-pop.show { transform: translate(-50%, -50%) scale(1) rotate(-1.5deg); }
.theme-school .chip { border: 2px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.05); }

/* ---------- Admin ---------- */
.theme-school .sidebar { background: rgba(14, 28, 22, 0.55); border-right: 2px dashed rgba(255, 255, 255, 0.14); backdrop-filter: none; }
.theme-school .brand .logo { background: #ffd84d; color: #2d2a1f; border: 2px solid #2d2a1f; border-radius: 12px 15px 11px 16px; box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.35); transform: rotate(-4deg); }
.theme-school .nav a.active { background: rgba(255, 216, 77, 0.1); color: #ffd84d; box-shadow: none; }
.theme-school .nav a.active span { background: linear-gradient(transparent 62%, rgba(255, 216, 77, 0.35) 62% 90%, transparent 90%); }
.theme-school .stat .v { font-weight: 400; }
.theme-school .ring { background: conic-gradient(#ffd84d calc(var(--p) * 1%), rgba(255, 255, 255, 0.1) 0); }
.theme-school .tbl td { background: rgba(255, 255, 255, 0.035); }
.theme-school .tbl .code, .theme-school .winner-list .code { color: #ffd84d; }
.theme-school .tag { border-width: 1.5px; }
.theme-school .tag.gold { color: #ffe680; border-color: rgba(255, 216, 77, 0.5); }
.theme-school .seg { background: rgba(0, 0, 0, 0.2); border: 2px solid rgba(255, 255, 255, 0.14); }
.theme-school .modal .card { background: var(--chalk-noise), linear-gradient(160deg, #2a4c40, #1d362d); border-color: rgba(255, 255, 255, 0.3); }
.theme-school .ac-list { background: #1d362d; border: 2px solid rgba(255, 255, 255, 0.25); }
.theme-school .ac-list button:hover, .theme-school .ac-list button.hi { background: rgba(255, 216, 77, 0.12); }
.theme-school .prize-card .img { background: linear-gradient(135deg, rgba(255, 216, 77, 0.14), rgba(124, 196, 255, 0.1)); }
.theme-school .prize-card .bar i, .theme-school .progress > i { background: repeating-linear-gradient(180deg, #ffd84d 0 4px, #f5c518 4px 8px); }
.theme-school .qr-poster {
  background: var(--chalk-noise), linear-gradient(180deg, #24443a, #1a3029);
  border: 14px solid #8a5a33;
  border-image: var(--wood) 30;
  border-radius: 0;
}
.theme-school .qr-poster .qrbox { border-radius: 6px; transform: rotate(-1.5deg); box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45); }
.theme-school .flash { border-width: 2px; border-radius: var(--hand); }
.theme-school .login-card::after {
  content: '🍎';
  position: absolute; top: -22px; right: 18px;
  font-size: 2.6rem;
  transform: rotate(14deg);
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.35));
}