/* CI ร้าน Craftfiti (design-system/tokens.json) + ชั้นฮาโลวีน
   หมึก/ครีม/เหลือง · สติกเกอร์เอียง Permanent Marker · เส้นขอบหมึกหนาแทนเงา · ไม่ใช้อีโมจิ
   ฮาโลวีน = ส้มฟักทอง (โลโก้ส้มของร้าน) + ค้างคาวลายเส้น — ถอดไฟล์นี้ = กลับโทนปกติ */
:root { --pumpkin: #ff7a1a; }

body:not(.tv) {
  background:
    radial-gradient(ellipse at 50% -10%, rgba(255,122,26,.16), transparent 55%),
    var(--ink);
}

/* หัวเว็บ: โลโก้ร้าน + สติกเกอร์ HALLOWEEN */
.brand { align-items: center; gap: 14px; }
.brand .wm { height: 30px; width: auto; display: block; }
.sticker {
  display: inline-block; font-family: var(--marker); font-size: 15px; line-height: 1.2;
  background: var(--pumpkin); color: var(--ink); padding: 4px 10px;
  box-shadow: 3px 3px 0 var(--cream); transform: rotate(-7deg); white-space: nowrap;
}
.sticker.y { background: var(--yellow); }
.kicker { font-weight: 700; letter-spacing: 2px; text-transform: uppercase; font-size: 13px; color: var(--yellow); }

.card { border: 2px solid var(--ink4); }
.btn { border-radius: 14px; text-transform: uppercase; letter-spacing: 1px; }
.btn.ghost { border: 2px solid var(--ink4); }
.huge { color: var(--yellow); }
.dot { background: var(--pumpkin); }
.qno { color: var(--pumpkin); }

/* ค้างคาว — ตกแต่งอย่างเดียว ไม่บังปุ่ม */
.spooky { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; }
.spooky img { position: absolute; width: 46px; opacity: .8; animation: flap 7s ease-in-out infinite; }
.spooky img:nth-child(1) { left: 5%; top: 7%; }
.spooky img:nth-child(2) { right: 7%; top: 16%; width: 32px; animation-duration: 9s; animation-delay: -3s; }
.spooky img:nth-child(3) { left: 12%; bottom: 10%; width: 28px; animation-duration: 8s; animation-delay: -5s; opacity: .5; }
.spooky .pumpkin { position: absolute; right: 3%; bottom: 3%; width: 70px; height: auto; animation: none; opacity: 1; transform: rotate(8deg); }
@keyframes flap { 0%,100% { transform: translate(0,0) rotate(-8deg) scaleY(1); } 25% { transform: translate(18px,-14px) rotate(6deg) scaleY(.7); } 50% { transform: translate(36px,4px) rotate(-4deg) scaleY(1); } 75% { transform: translate(14px,12px) rotate(8deg) scaleY(.75); } }
.wrap { position: relative; z-index: 2; }

/* ---------- จอทีวี ---------- */
.tv .spooky img:nth-child(1) { width: 6vw; } .tv .spooky img:nth-child(2) { width: 4vw; }
.tv .spooky img:nth-child(3) { width: 3.4vw; } .spooky .pumpkin { display: none !important; }
.tv #stage { box-shadow: inset 0 0 0 .7vw var(--ink); }
.tv .brand-tv { position: absolute; top: 2.2vh; left: 2vw; z-index: 3; display: flex; align-items: center; gap: 1vw; background: var(--ink); padding: .8vw 1.2vw; border-radius: 14px; }
.tv .brand-tv img { height: 3vw; min-height: 24px; }
.tv .brand-tv .sticker { font-size: clamp(14px, 1.4vw, 26px); }
/* ปุ่มอยู่เหนือหน้า QR เสมอ (กดเริ่มเกมได้ทั้งที่ QR ยังเปิด) แต่อยู่ใต้หน้าผลคะแนน/ตั้งค่า */
.tv .dock { z-index: 20; background: var(--ink); border: 2.5px solid var(--yellow); box-shadow: none; }
.tv .dk { text-transform: uppercase; letter-spacing: .06em; }
.tv .dk.stop { background: var(--red); color: var(--cream); }
.tv .dk.win { background: var(--pumpkin); color: var(--ink); }
.tv .chip { z-index: 3; background: var(--ink); border: 2px solid var(--ink4); }
.tv .chip .live { color: var(--pumpkin); }
.tv #ov-qr { z-index: 10; padding-bottom: 12vh; }
.tv #ov-res, .tv #ov-more { z-index: 30; }
.tv .code { color: var(--yellow); }
.ov-t { font-family: var(--marker); font-weight: 400; color: var(--yellow); transform: rotate(-2deg); display: inline-block; }
.res-head { font-family: var(--marker); font-weight: 400; color: var(--pumpkin); transform: rotate(-2deg); }
.res { background: radial-gradient(ellipse at 50% 20%, #3a1f0c 0%, var(--ink) 60%, #0e0b08 100%); }
.slot { background: var(--ink); border: 3px solid var(--ink4); }
.slot.land { border-color: var(--yellow); background: var(--ink); box-shadow: 8px 8px 0 var(--pumpkin); transform: rotate(-1.2deg) scale(1.04); }
.slot.land .slot-name { color: var(--yellow); }
.slot.none.land { border-color: var(--red); box-shadow: 8px 8px 0 var(--red); }
.slot.none.land .slot-name { color: var(--cream); }
.res-answer b { color: var(--pumpkin); }
.rr { background: #1e1812; border: 2px solid var(--ink4); }
.rr.winner { background: #1e1812; border-color: var(--yellow); }