/* =====================================================================
   BJS WEB SHOP  |  public/css/gacha.css
   ตู้สุ่มรังผึ้ง

   ═══ เรขาคณิตรังผึ้ง (ต้องเป๊ะ ไม่งั้นช่องไม่ติดกัน) ═══

   หกเหลี่ยมหัวแหลม  clip-path: 50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%
     กว้าง w · สูง h = w × 2/√3 = w × 1.1547

     · ช่องข้างกันในแถวเดียว ห่าง w พอดี  ->  gap ต้องเป็น 0
     · แถวถัดไปเลื่อนขึ้นทับ h/4          ->  margin-top: -h × 0.25
     · แถวติดกันเยื้องกันครึ่งช่อง (w/2)

   แถวยาว n สลับ n-1 พอจัดกึ่งกลางทั้งคู่ จะเยื้องกันครึ่งช่องเอง
   ((n − (n−1)) × w ÷ 2 = w/2) — ไม่ต้องใส่ margin-left เอง
   แถวท้ายที่ไม่เต็มอาจเยื้องผิด ฝั่งเซิร์ฟคำนวณแล้วส่ง .is-shift มาให้ขยับ

   ช่องว่างระหว่างช่องมาจาก .cell__in ที่ inset เข้าไป ไม่ใช่จาก gap
   -> ได้เส้นคั่นแบบยาแนวรังผึ้งจริง ไม่ใช่หกเหลี่ยมลอยห่างกัน
   ===================================================================== */

:root{
  --hexw: 96px;
  --hexh: calc(var(--hexw) * 1.1547);
  --hexline: 3px;                 /* ความหนาของ "ยาแนว" ระหว่างช่อง */
}

/* ---------- แผงตู้ ---------- */
.combwrap{
  position:relative; overflow:hidden;
  padding:34px 18px 38px;
  border-radius:var(--r-lg); border:1px solid transparent;
  background:
    radial-gradient(85% 110% at 50% -10%, rgba(var(--o),.14), transparent 62%),
    linear-gradient(170deg, rgba(26,17,9,.97), rgba(8,5,3,.98)) padding-box,
    var(--edge) border-box;
  box-shadow:var(--shadow);
}
.combwrap::before{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.35;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='64' viewBox='0 0 56 64'%3E%3Cpath d='M28 1 55 16.5v31L28 63 1 47.5v-31z' fill='none' stroke='%23ff8a1f' stroke-opacity='.13'/%3E%3C/svg%3E");
  mask-image:radial-gradient(75% 85% at 50% 40%, #000 20%, transparent 80%);
  -webkit-mask-image:radial-gradient(75% 85% at 50% 40%, #000 20%, transparent 80%);
}

.comb{ position:relative; display:flex; flex-direction:column; align-items:center; }
.comb__row{ display:flex; gap:0; }
.comb__row + .comb__row{ margin-top:calc(var(--hexh) * -0.25); }
/* แถวท้ายที่เยื้องผิด lattice — เซิร์ฟบอกมาว่าต้องขยับ */
.comb__row.is-shift{ margin-left:var(--hexw); }
/*  เยื้องครึ่งช่อง — ใช้กับทรงที่แอดมินวาดเอง ให้ลายตรงกับตารางที่วาด
    ⚠ ต้องเป็นครึ่งช่องเป๊ะ ๆ ไม่ใช่หนึ่งช่อง ไม่งั้นช่องไม่ประกบร่องกัน  */
.comb__row.is-half{ margin-left:calc(var(--hexw) * 0.5); }

/* ---------- ช่องหนึ่งช่อง ---------- */
.cell{
  position:relative; flex:none;
  width:var(--hexw); height:var(--hexh);
  clip-path:var(--hex);
  display:grid; place-items:center;
  background:linear-gradient(165deg, rgba(255,255,255,.15), rgba(255,255,255,.04));
  transition:filter .16s var(--ease);
  cursor:pointer; border:0; padding:0;

  /*  ⚠ กันอาการ "กดแล้วเหมือนลากค้าง"
      ช่องนี้เป็น <button> ที่มี <img> อยู่ข้างใน
      กดค้างแล้วขยับเมาส์นิดเดียว เบราว์เซอร์จะเริ่ม drag รูปนั้นออกมาเป็นเงา
      ติดมือไปทั้งจอ ปล่อยแล้วก็ยังค้าง ต้องคลิกที่อื่นถึงจะหาย
      และตัวหนังสือในช่องก็โดนลากคลุมเป็นแถบน้ำเงินไปด้วย

      user-select   กันลากคลุมตัวหนังสือ
      -webkit-user-drag  กันลากตัวปุ่มเอง (WebKit/Blink)
      touch-action  บนมือถือ กันหน่วง 300ms กับการ pan ทับ  */
  user-select:none; -webkit-user-select:none;
  -webkit-user-drag:none;
  touch-action:manipulation;
}

/*  ⚠ ของข้างในต้องไม่รับ event เลย
    ปล่อยให้รับ = e.target เป็น <img> บ้าง <span> บ้าง แล้วแต่ว่ากดโดนตรงไหน
    ทำให้ closest('.cell') ทำงานถูกก็จริง แต่ native drag ของ <img> ยังเกิดอยู่
    ปิดที่ต้นทางเลยจบทั้งสองเรื่อง  */
.cell > *{ pointer-events:none; }
.cell img{ -webkit-user-drag:none; user-select:none; }
.cell__in{
  position:absolute; inset:var(--hexline); clip-path:var(--hex);
  background:linear-gradient(170deg, #23160c, #0b0705);
  display:grid; place-items:center;
  transition:background .18s var(--ease);
}
.cell__q{
  font-family:'Orbitron','Sukhumvit',sans-serif; font-size:1.5rem; font-weight:700;
  color:rgba(var(--o),.55); transition:.18s var(--ease);
}
.cell__icon{
  width:34%; height:34%; margin-top:-8%;
  fill:none; stroke:var(--or-hi); stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round; opacity:.85;
}
.cell__no{ position:absolute; bottom:15%; font-size:.54rem; color:var(--dim-2); letter-spacing:.08em; }

/*  ═══ วางของในหกเหลี่ยมยังไงไม่ให้ล้น ═══
    หกเหลี่ยมหัวแหลมกว้างเต็มเฉพาะช่วง y 25%–75% · บนล่างเรียวเป็นจุด
    ข้อความจึงต้องอยู่ในโซนกลาง ไม่งั้นโดน clip-path เฉือนหัวท้าย  */
.cell__img{
  width:50%; height:50%; object-fit:contain; margin-top:-8%;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.7));
}
.cell__name{
  position:absolute; left:15%; right:15%; bottom:24%;
  font-size:.5rem; line-height:1.15; text-align:center; color:var(--dim);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* ยังไม่เปิด + กดได้ — ยกขึ้นด้วย scale ไม่ใช่ translateY
   translateY จะทำให้ช่องหลุดจากลายรังผึ้ง เห็นรอยต่อโหว่

   เคอร์เซอร์เป็นรูปค้อน : SVG ฝังเป็น data URI ไม่ต้องโหลดไฟล์เพิ่ม
   จุดกด (hotspot) อยู่ที่หัวค้อน 6,6 ไม่ใช่มุมซ้ายบนของภาพ */
.cell.is-shut{
  z-index:1;
  cursor:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34'%3E%3Cg transform='rotate(-38 17 17)'%3E%3Crect x='4' y='3' width='19' height='11' rx='2.5' fill='%23d9a86a' stroke='%23000' stroke-width='1.6'/%3E%3Crect x='22' y='5' width='6' height='7' rx='1.5' fill='%23b9884c' stroke='%23000' stroke-width='1.4'/%3E%3Crect x='11' y='13' width='5' height='18' rx='2' fill='%238a5a2b' stroke='%23000' stroke-width='1.5'/%3E%3C/g%3E%3C/svg%3E") 6 6, pointer;
}
.cell.is-shut:hover{ z-index:4; filter:brightness(1.28) drop-shadow(0 0 14px rgba(var(--o),.5)); }
.cell.is-shut:hover .cell__in{ background:linear-gradient(170deg, #422a11, #1a1008); }
.cell.is-shut:hover .cell__q{ color:var(--or-hi); transform:scale(1.12); }
.cell.is-shut:active{ filter:brightness(.85); }
.cell.is-shut:focus-visible{ outline:none; z-index:4; }
.cell.is-shut:focus-visible .cell__in{ background:linear-gradient(170deg,#422a11,#1a1008); }

/*  ช่องที่ล็อกต้อง "ดูออกตั้งแต่ยังไม่กด" ว่ากดไม่ได้
    ของเดิมต่างจากช่องปกติแค่รูปเมาส์กับสีจาง ๆ — มองยังไงก็เหมือนกดได้
    พอกดแล้วไม่มีอะไรเกิดขึ้นเลยกลายเป็น "เว็บพัง" ทั้งที่แค่ยังไม่ได้ผูกตัวละคร  */
.cell.is-locked{ cursor:not-allowed; opacity:.5; }
.cell.is-locked:hover{ filter:none; opacity:.72; }
.cell.is-locked .cell__q{ color:rgba(255,255,255,.14); }
.cell.is-locked .cell__lock{ width:15px; height:15px; color:rgba(255,255,255,.3); }
.cell.is-locked .cell__no{ color:rgba(255,255,255,.2); }

/*  กะพริบกล่องเหตุผลตอนคนกดช่องที่ล็อก — พาสายตาไปที่คำอธิบาย  */
.notice.is-flash, .linkwarn.is-flash{ animation:noticeFlash 1.4s ease; }
@keyframes noticeFlash{
  0%, 100%{ box-shadow:0 0 0 0 rgba(var(--o),0); }
  22%{ box-shadow:0 0 0 3px rgba(var(--o),.5); }
  60%{ box-shadow:0 0 0 3px rgba(var(--o),.22); }
}

/* เปิดแล้ว */
.cell.is-open{ cursor:default; background:linear-gradient(165deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); }
.cell.is-open:hover{ filter:none; }
.cell.is-open .cell__in{ background:linear-gradient(170deg, #150d07, #090604); }

/* ระดับรางวัล — เห็นแต่ไกลว่ามีของดีออกตรงไหน */
.cell.tier-grand{ background:linear-gradient(165deg, var(--or-hi), var(--or) 55%, var(--or-lo)); z-index:2; }
.cell.tier-grand .cell__in{ background:linear-gradient(170deg, #4a2a08, #1d1005); }
.cell.tier-grand .cell__name{ color:var(--or-hi); font-weight:600; }
.cell.tier-rare{ background:linear-gradient(165deg, #8fd0ff, #3f7fbf 60%); z-index:2; }
.cell.tier-rare .cell__in{ background:linear-gradient(170deg, #0f2437, #070f18); }
.cell.tier-rare .cell__name{ color:#a9d4f5; }

/* ช่องที่เป็นโมฆะเพราะตู้จบ */
.cell.is-void{ opacity:.25; cursor:not-allowed; }
.cell.is-void:hover{ filter:none; }
.cell.is-void .cell__q{ color:rgba(255,255,255,.1); }

/* =====================================================================
   ค้อนทุบ

   ลำดับ 620ms :
     0–180   ค้อนเหวี่ยงลงมาจากขวาบน
     180     กระทบ -> ช่องสั่น + รอยแตกโผล่ + เศษกระเด็น 6 ทิศ
     180–420 ช่องยุบแล้วเด้ง เผยของข้างใน
     420–620 ค้อนถอยกลับ เศษจาง

   ทำด้วย CSS ล้วน ไม่มีรูปค้อน ไม่มีไลบรารี — โหลดเร็วและปรับสีตามธีมได้
   ===================================================================== */
.cell.is-hit{ z-index:12; }

/* --- ตัวค้อน --- */
.hammer{
  position:absolute; z-index:14; pointer-events:none;
  width:56px; height:56px;
  transform-origin:78% 78%;          /* หมุนรอบด้ามจับ ไม่ใช่กลางรูป */
  animation:hammerSwing .62s cubic-bezier(.3,.9,.4,1) forwards;
}
.hammer__head{
  position:absolute; top:2px; left:6px; width:30px; height:19px; border-radius:4px;
  background:linear-gradient(160deg,#f0d7bd,#b98a5b 45%,#6d4a2a);
  box-shadow:inset 0 -2px 3px rgba(0,0,0,.45), 0 2px 5px rgba(0,0,0,.5);
}
.hammer__head::after{
  content:''; position:absolute; right:-7px; top:3px; width:9px; height:13px; border-radius:2px 5px 5px 2px;
  background:linear-gradient(160deg,#d9bb9a,#8d6437);
}
.hammer__grip{
  position:absolute; top:16px; left:20px; width:7px; height:36px; border-radius:3px;
  transform:rotate(-32deg); transform-origin:top center;
  background:linear-gradient(180deg,#c98f4f,#6b431f);
  box-shadow:inset -1px 0 2px rgba(0,0,0,.4);
}
@keyframes hammerSwing{
  0%   { transform:translate(46px,-52px) rotate(-72deg); opacity:0; }
  18%  { transform:translate(30px,-34px) rotate(-52deg); opacity:1; }
  30%  { transform:translate(4px,-6px)   rotate(4deg); }    /* กระทบ */
  40%  { transform:translate(6px,-10px)  rotate(-8deg); }   /* เด้งกลับนิดหน่อย */
  70%  { transform:translate(14px,-22px) rotate(-30deg); opacity:1; }
  100% { transform:translate(40px,-48px) rotate(-64deg); opacity:0; }
}

/* --- ช่องสั่นตอนโดนตี --- */
@keyframes cellShake{
  0%,100%{ transform:translate(0,0); }
  30%{ transform:translate(0,0); }
  34%{ transform:translate(-3px,2px) scale(.94); }
  38%{ transform:translate(3px,-2px) scale(1.05); }
  44%{ transform:translate(-2px,1px) scale(.98); }
  50%{ transform:translate(1px,0) scale(1.02); }
  60%{ transform:translate(0,0) scale(1); }
}
.cell.is-hit{ animation:cellShake .62s var(--ease); }

/* --- รอยแตก --- */
.crack{
  position:absolute; inset:0; z-index:13; pointer-events:none;
  opacity:0; animation:crackShow .62s var(--ease) forwards;
}
.crack line{ stroke:rgba(255,255,255,.85); stroke-width:1.6; stroke-linecap:round; }
@keyframes crackShow{
  0%,28%{ opacity:0; }
  32%{ opacity:1; }
  70%{ opacity:.7; }
  100%{ opacity:0; }
}

/* --- เศษกระเด็น --- */
.chip{
  position:absolute; z-index:13; left:50%; top:50%; width:7px; height:8px;
  clip-path:var(--hex); pointer-events:none;
  background:linear-gradient(160deg,var(--or-hi),var(--or-lo));
  opacity:0; animation:chipFly .62s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes chipFly{
  0%,28%{ opacity:0; transform:translate(-50%,-50%) scale(.4); }
  33%{ opacity:1; transform:translate(-50%,-50%) scale(1); }
  100%{
    opacity:0;
    transform:translate(calc(-50% + var(--cx)), calc(-50% + var(--cy))) scale(.35) rotate(var(--cr));
  }
}

/* --- แสงวาบตอนได้รางวัลใหญ่ --- */
@keyframes grandFlash{
  0%,100%{ box-shadow:0 0 0 0 rgba(var(--o),0); }
  45%{ box-shadow:0 0 44px 12px rgba(var(--o),.75); }
}
.cell.just-grand{ animation:cellShake .62s var(--ease), grandFlash 1.1s var(--ease) .3s 2; }

/*  เปิดเผยของหลังค้อนกระทบ — ของโผล่ตอน 40% ของอนิเมชัน ไม่ใช่ตั้งแต่แรก
    ถ้าโผล่ทันทีจะเห็นของก่อนค้อนลง แล้วอนิเมชันหมดความหมาย  */
@keyframes revealIn{
  0%,32%{ opacity:0; transform:scale(.5); }
  46%{ opacity:1; transform:scale(1.14); }
  60%{ transform:scale(.97); }
  100%{ opacity:1; transform:scale(1); }
}
.cell.is-hit .cell__img,
.cell.is-hit .cell__icon,
.cell.is-hit .cell__name{ animation:revealIn .62s var(--ease); }

/*  คนที่ปิดเอฟเฟกต์ไว้ในระบบปฏิบัติการ — ข้ามอนิเมชันทั้งหมด
    ผลลัพธ์ยังเหมือนเดิมทุกอย่าง แค่ไม่มีการเคลื่อนไหว  */
@media (prefers-reduced-motion: reduce){
  .hammer, .crack, .chip{ display:none !important; }
  .cell.is-hit, .cell.just-grand{ animation:none !important; }
  .cell.is-hit .cell__img,
  .cell.is-hit .cell__icon,
  .cell.is-hit .cell__name{ animation:none !important; }
}

/* ---------- โครงหน้าตู้ ---------- */
.gboard{ display:grid; grid-template-columns:1fr 350px; gap:20px; align-items:start; }
@media (max-width: 1040px){ .gboard{ grid-template-columns:1fr; } }

/* =====================================================================
   แถบราคาเหนือรังผึ้ง  (.hitbar)

   ก่อนกดทุบทุกครั้ง ผู้เล่นถามตัวเองคำเดียว : "ทีนี้เสียเท่าไหร่"
   ราคาครั้งถัดไปเลยเป็นตัวเลขใหญ่สุดของหน้า อยู่ซ้ายมือ อ่านก่อนเสมอ
   ทุบเสร็จเลขเลื่อนเป็นครั้งถัดไปพร้อมกะพริบ — เห็นชัดว่าราคาขยับแล้ว
   ===================================================================== */
.hitbar{
  display:grid; grid-template-columns:auto 1fr auto; gap:22px; align-items:center;
  padding:0; margin-bottom:16px; overflow:hidden;
  border-radius:var(--r-sm); border:1px solid rgba(var(--o),.28);
  background:linear-gradient(110deg, rgba(var(--o),.14), rgba(255,255,255,.02) 55%);
}

/* ── ช่องราคา ── */
.hitbar__price{
  position:relative; padding:13px 22px 13px 20px; align-self:stretch;
  display:flex; flex-direction:column; gap:2px; justify-content:center;
  background:linear-gradient(180deg, rgba(var(--o),.16), rgba(var(--o),.05));
  border-right:1px solid rgba(var(--o),.22);
}
/* ริมซ้ายเป็นแท่งส้มเรือง — ยึดสายตาไว้ที่ราคา */
.hitbar__price::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(180deg,var(--or-hi),var(--or-lo));
  box-shadow:0 0 18px rgba(var(--o),.8); }

.hitbar__round{ font-size:.7rem; color:var(--dim-2); letter-spacing:.02em; }
.hitbar__round b{ font-family:var(--f-num); font-size:.86rem; color:var(--or); margin:0 1px; }

.hitbar__amt{ display:flex; align-items:baseline; gap:6px; }
.hitbar__amt b{ font-family:var(--f-num); font-size:2rem; line-height:1;
  color:var(--or-hi); text-shadow:0 0 26px rgba(var(--o),.55); }
.hitbar__amt span{ font-size:.74rem; color:var(--dim-2); }

.hitbar__trend{ display:inline-flex; align-items:center; gap:4px; margin-top:2px;
  font-size:.66rem; color:var(--dim-2); }
.hitbar__trend .ic{ width:11px; height:11px; color:var(--or); }

/* เลขราคาขยับหลังทุบ — เลื่อนขึ้นแล้วสว่างวาบ ให้รู้ว่า "ไม่ใช่ราคาเดิมแล้ว" */
@keyframes hitRoll{
  0%{ transform:translateY(9px); opacity:0; }
  55%{ transform:translateY(-2px); opacity:1; color:#fff; text-shadow:0 0 30px rgba(var(--o),1); }
  100%{ transform:translateY(0); opacity:1; }
}
.hitbar__amt b.is-roll,
.hitbar__round b.is-roll{ display:inline-block; animation:hitRoll .5s var(--ease); }

/* ── ช่องกลาง : ช่องเหลือ + ยอดเหมาทั้งใบ ── */
.hitbar__mid{ min-width:0; padding:13px 0; }
.hitbar__cells{ display:flex; align-items:baseline; gap:7px; }
.hitbar__cells b{ font-family:var(--f-num); font-size:1.2rem; color:var(--txt); line-height:1; }
.hitbar__cells span{ font-size:.72rem; color:var(--dim-2); }
.hitbar__track{ height:5px; border-radius:99px; background:rgba(0,0,0,.45); overflow:hidden;
  margin:7px 0 6px; max-width:340px; }
.hitbar__track span{ display:block; height:100%; border-radius:99px;
  background:linear-gradient(90deg,var(--or-lo),var(--or),var(--or-hi)); transition:width .45s var(--ease); }
.hitbar__sub{ font-size:.7rem; color:var(--dim-2); }
.hitbar__sub b{ font-family:var(--f-num); color:var(--dim); }

.hitbar .skipbox{ padding-right:18px; }

@media (max-width: 860px){
  .hitbar{ grid-template-columns:auto 1fr; gap:16px; }
  .hitbar .skipbox{ grid-column:1/-1; padding:0 0 12px 20px; }
}
@media (max-width: 560px){
  .hitbar{ grid-template-columns:1fr; gap:0; }
  .hitbar__price{ border-right:0; border-bottom:1px solid rgba(var(--o),.22); }
  .hitbar__mid{ padding:12px 20px; }
  .hitbar__track{ max-width:none; }
  .hitbar .skipbox{ padding:0 20px 13px; }
}

/* ติ๊กข้ามอนิเมชัน */
.skipbox{ display:flex; align-items:center; gap:8px; cursor:pointer; flex:none; color:var(--dim); }
.skipbox input{ position:absolute; opacity:0; width:0; height:0; }
.skipbox__box{
  width:19px; height:19px; border-radius:6px; display:grid; place-items:center; flex:none;
  border:1px solid var(--hair-2); background:rgba(0,0,0,.3); transition:.16s var(--ease);
}
.skipbox__box .ic{ width:13px; height:13px; color:#1a0d03; opacity:0; stroke-width:2.6; transition:.16s var(--ease); }
.skipbox input:checked + .skipbox__box{ background:linear-gradient(180deg,var(--or-hi),var(--or)); border-color:transparent; }
.skipbox input:checked + .skipbox__box .ic{ opacity:1; }
.skipbox:hover{ color:var(--txt); }
.skipbox input:focus-visible + .skipbox__box{ outline:2px solid var(--or); outline-offset:2px; }

/* =====================================================================
   แผงขวา : ของที่ได้ + ประวัติการทุบ

   เดิมตรงนี้เป็นตารางของที่เหลือในตู้พร้อม % โอกาส (.plist/.prow)
   เอาออกแล้ว — เปลี่ยนเป็นสองอย่างที่ผู้เล่นถามจริง ๆ ระหว่างเล่น :
     1. "ได้อะไรไปแล้วบ้าง และของถึงมือหรือยัง"
     2. "กดส่งเข้าเกมทีเดียวได้ไหม"
   ===================================================================== */
.gside{ display:flex; flex-direction:column; gap:16px; }

/* ---------- กองของที่รอส่ง ---------- */
.bag__list{ display:flex; flex-direction:column; gap:7px; max-height:290px; overflow:auto; }
.bag__row{
  display:flex; align-items:center; gap:11px; padding:8px 11px;
  border-radius:10px; border:1px solid var(--hair); background:rgba(255,255,255,.025);
}
.bag__img{
  width:34px; height:34px; flex:none; display:grid; place-items:center; border-radius:8px;
  background:radial-gradient(70% 70% at 50% 40%, rgba(var(--o),.16), transparent 72%);
}
.bag__img img{ width:100%; height:100%; object-fit:contain; }
.bag__img .ic{ width:17px; height:17px; color:var(--or-hi); }
.bag__name{ flex:1; min-width:0; font-size:.85rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/*  จำนวนเป็น "ตัวหนังสือสีส้ม" ไม่ใช่ป้ายพื้นส้ม — พื้นส้มทึบอ่านยากบนพื้นดำ  */
.bag__x{ flex:none; font-family:'Orbitron','Sukhumvit',sans-serif; font-size:.95rem; color:var(--or-hi); }

.bag__empty{ padding:22px 0; text-align:center; font-size:.78rem; color:var(--dim-2); line-height:1.7; }
.bag__send{ margin-top:13px; }
.bag__note{ margin-top:11px; font-size:.7rem; color:var(--dim-2); line-height:1.75; }

/*  ของเพิ่งเข้ากอง — กะพริบสั้น ๆ ให้รู้ว่ารายการขยับ
    ไม่งั้นของโผล่มาเงียบ ๆ ตอนสายตายังอยู่ที่รังผึ้ง  */
@keyframes bagIn{
  0%{ opacity:0; transform:translateX(10px); }
  60%{ border-color:rgba(var(--o),.55); background:rgba(var(--o),.1); }
  100%{ opacity:1; transform:none; }
}
.bag__row.is-new{ animation:bagIn .5s var(--ease); }
@media (prefers-reduced-motion: reduce){ .bag__row.is-new{ animation:none; } }

/* ---------- ประวัติการทุบ ---------- */
.txlog{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:6px;
  max-height:360px; overflow:auto;
}
.tx{
  display:flex; align-items:center; gap:10px; padding:8px 10px 8px 9px;
  border-radius:9px; background:rgba(255,255,255,.022);
  border:1px solid var(--hair); border-left:2px solid rgba(255,255,255,.18);
}
.tx.tier-grand{ border-left-color:var(--or); background:rgba(var(--o),.07); }
.tx.tier-rare{ border-left-color:#5fa8e0; background:rgba(var(--i),.05); }
/*  ครั้งที่เท่าไหร่ — เลขเล็ก ๆ ไว้เทียบกับแถบราคาด้านซ้าย  */
.tx__hit{
  flex:none; min-width:22px; text-align:center;
  font-family:'Orbitron','Sukhumvit',sans-serif; font-size:.78rem; color:var(--dim-2);
}
.tx__body{ flex:1; min-width:0; }
.tx__name{ font-size:.82rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tx.tier-grand .tx__name{ color:var(--or-hi); font-weight:500; }
.tx.tier-rare .tx__name{ color:#a9d4f5; }
.tx__meta{ display:flex; gap:9px; margin-top:2px; font-size:.65rem; color:var(--dim-2); }
.tx__meta b{ font-family:'Orbitron','Sukhumvit',sans-serif; }
/*  สถานะเป็นตัวหนังสือล้วน — แถวเดียวมีป้ายสามใบแล้วมันรกจนอ่านไม่ออก  */
.tx__state{
  flex:none; font-size:.65rem; letter-spacing:.04em;
  color:var(--or); border:1px solid rgba(var(--o),.35);
  border-radius:99px; padding:2px 8px; background:rgba(var(--o),.07);
}
.tx.is-sent .tx__state{ color:var(--dim-2); border-color:var(--hair); background:none; }
.tx.is-sent{ opacity:.72; }

.pbar{ height:3px; border-radius:99px; background:rgba(255,255,255,.08); overflow:hidden; margin-top:5px; }
.pbar__fill{ height:100%; border-radius:99px; background:linear-gradient(90deg,var(--or-lo),var(--or),var(--or-hi));
  transition:width .4s var(--ease); }

/* =====================================================================
   การ์ดตู้ในหน้ารวม  (.gcard)

   สิ่งที่คนกวาดสายตาหาในหน้านี้มีสามอย่าง เรียงตามลำดับ :
     1. "ตู้นี้มีอะไรใหญ่ ๆ ให้ลุ้น"   → แถบรางวัลใหญ่ทับบนรูป ตัวใหญ่สุด
     2. "ทุบทีละเท่าไหร่"             → ราคาที่ฐานการ์ด ตัวเลข Orbitron
     3. "ของหมดยัง / เล่นค้างไว้ไหม"  → แถบความคืบหน้า + ป้ายมุมบน
   ดีไซน์เลยจัดสามอย่างนี้เป็นสามชั้นชัด ๆ ไม่ปนกันเป็นย่อหน้าเดียว
   ===================================================================== */
.gcards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:20px; }

.gcard{
  position:relative; overflow:hidden; display:flex; flex-direction:column;
  border-radius:var(--r); border:1px solid transparent; isolation:isolate;
  background:linear-gradient(180deg,#120c07,#0a0705) padding-box, var(--edge) border-box;
  box-shadow:0 22px 48px -32px rgba(0,0,0,.95);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
/* ขอบส้มเรืองตอนชี้ — ทำด้วย ::after กันไม่ให้ border ขยับ layout */
.gcard::after{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(var(--o),0); transition:box-shadow .25s var(--ease);
}
.gcard:hover{ transform:translateY(-5px);
  box-shadow:0 32px 60px -28px rgba(0,0,0,1), 0 0 52px -24px rgba(var(--o),.55); }
.gcard:hover::after{ box-shadow:inset 0 0 0 1px rgba(var(--o),.45); }

/* ---------- ชั้นบน : รูป + รางวัลใหญ่ ---------- */
.gcard__media{
  position:relative; aspect-ratio:16/9; overflow:hidden;
  background:#0d0906; border-bottom:1px solid var(--hair);
}
/* ไม่มีรูปก็ไม่ต้องกันที่ไว้เท่ารูป — ลายรังผึ้งเปล่า ๆ สูงเท่านี้พอ */
.gcard__media--ph{ aspect-ratio:16/6; }
.gcard__media img{ width:100%; height:100%; object-fit:cover;
  transition:transform .5s var(--ease); }
.gcard:hover .gcard__media img{ transform:scale(1.05); }

/* ไม่มีรูป → ปูรังผึ้งจริงเป็นลาย บอกตัวตนของตู้โดยไม่ต้องมีอาร์ตเวิร์ก */
.gcard__comb{
  position:absolute; inset:0;
  background-image:
    radial-gradient(60% 90% at 50% 0%, rgba(var(--o),.28), transparent 72%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 0 56 16v32L28 64 0 48V16z' fill='none' stroke='%23ff8a1f' stroke-opacity='.16' stroke-width='2'/%3E%3Cpath d='M0 48v32l28 16 28-16V48' fill='none' stroke='%23ff8a1f' stroke-opacity='.16' stroke-width='2'/%3E%3C/svg%3E");
  background-size:auto, 56px 97px;
}

/* ไล่เฉดดำจากล่างขึ้น — ตัวหนังสือบนรูปต้องอ่านออกไม่ว่ารูปจะสว่างแค่ไหน */
.gcard__scrim{ position:absolute; inset:0;
  background:linear-gradient(0deg, #0a0705 4%, rgba(10,7,5,.72) 34%, transparent 68%); }

.gcard__badge{ position:absolute; top:11px; left:11px; display:flex; gap:6px; }

/* แถบรางวัลใหญ่ — พระเอกของการ์ด */
.gcard__hl{ position:absolute; left:13px; right:13px; bottom:11px;
  display:flex; flex-direction:column; gap:5px; }
.gcard__hlab{ display:inline-flex; align-items:center; gap:5px; align-self:flex-start;
  font-size:.61rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--or); font-weight:700; }
.gcard__hlab::before{ content:''; width:13px; height:15px; clip-path:var(--hex);
  background:linear-gradient(160deg,var(--or-hi),var(--or-lo)); flex:none;
  box-shadow:0 0 12px rgba(var(--o),.75); }
.gcard__hgrand{ display:flex; align-items:center; gap:8px; min-width:0; }
.gcard__hgrand img{ width:30px; height:30px; object-fit:contain; flex:none;
  filter:drop-shadow(0 3px 8px rgba(0,0,0,.8)); }
.gcard__hgrand b{ font-size:.98rem; font-weight:600; color:#fff; line-height:1.25;
  text-shadow:0 2px 10px rgba(0,0,0,.9);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.gcard__hmore{ font-size:.68rem; color:var(--dim-2); flex:none; }

/* ---------- ชั้นกลาง : ชื่อ + สเปกตู้ ---------- */
.gcard__body{ padding:14px 16px 12px; display:flex; flex-direction:column; gap:9px; flex:1; }
.gcard__name{ font-size:1.04rem; font-weight:600; line-height:1.3; }
.gcard__desc{ font-size:.78rem; color:var(--dim-2); line-height:1.6;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* สเปก 3 ช่อง คั่นด้วยเส้นบาง — อ่านเทียบกันระหว่างตู้ได้เร็ว */
.gcard__spec{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:auto;
  background:var(--hair); border:1px solid var(--hair); border-radius:10px; overflow:hidden; }
.gcard__spec > div{ background:rgba(255,255,255,.022); padding:7px 9px;
  display:flex; flex-direction:column; gap:1px; }
.gcard__spec b{ font-family:var(--f-num); font-size:.94rem; color:#fff; line-height:1.15; }
.gcard__spec b.is-or{ color:var(--or); }
.gcard__spec span{ font-size:.62rem; color:var(--dim-2); letter-spacing:.02em; }

/* แถบความคืบหน้าใบของคุณ */
.gcard__prog{ display:flex; flex-direction:column; gap:5px; }
.gcard__prog .pbar{ margin-top:0; }
.gcard__progtx{ display:flex; justify-content:space-between; gap:8px;
  font-size:.68rem; color:var(--dim-2); }

/* ---------- ชั้นล่าง : ราคา + ปุ่มเปิดตู้ ---------- */
.gcard__foot{ padding:12px 14px 14px; display:grid; grid-template-columns:1fr; gap:10px;
  border-top:1px solid var(--hair); background:rgba(0,0,0,.32); }
.gcard__price{ display:flex; align-items:baseline; gap:8px; min-width:0; }
.gcard__price em{ font-style:normal; font-size:.62rem; color:var(--dim-2);
  letter-spacing:.1em; text-transform:uppercase; }
.gcard__price b{ font-family:var(--f-num); font-size:1.3rem; color:var(--or-hi);
  line-height:1.1; text-shadow:0 0 22px rgba(var(--o),.4); }
.gcard__price b i{ font-style:normal; font-size:.66rem; color:var(--dim-2);
  font-family:var(--f); margin-left:4px; }

/* ปุ่มเปิดตู้ — แผ่นเต็มความกว้าง มีค้อนอยู่ในหกเหลี่ยมนำหน้า
   ค้อนกระดกตอนชี้ บอกล่วงหน้าว่าเข้าไปแล้วต้องทำอะไร */
.gcard__go{
  position:relative; overflow:hidden;
  display:flex; align-items:center; gap:11px; padding:9px 12px;
  border-radius:11px; font-size:.92rem; font-weight:600; color:#ffd7ab;
  border:1px solid rgba(var(--o),.5);
  background:linear-gradient(100deg, rgba(var(--o),.2), rgba(var(--o),.05) 70%), rgba(10,6,3,.7);
  transition:.2s var(--ease);
}
.gcard__go-ic{
  width:28px; height:32px; flex:none; clip-path:var(--hex); display:grid; place-items:center;
  background:linear-gradient(160deg, rgba(var(--o),.62), rgba(var(--o),.2));
  transition:.25s var(--ease);
}
.gcard__go-ic .ic{ width:15px; height:15px; color:#fff1e0; }
.gcard__go > span:nth-child(2){ flex:1; }
.gcard__go-ar{ width:15px; height:15px; flex:none; opacity:.5; transition:.2s var(--ease); }

.gcard__go:hover{
  color:#fff6ec; border-color:rgba(var(--o),.95);
  background:linear-gradient(100deg, rgba(var(--o),.32), rgba(var(--o),.1) 70%), rgba(10,6,3,.7);
  box-shadow:0 0 28px -10px rgba(var(--o),.8);
}
.gcard__go:hover .gcard__go-ic{ transform:rotate(-18deg) scale(1.06); }
.gcard__go:hover .gcard__go-ar{ opacity:1; transform:translateX(3px); }
@media (prefers-reduced-motion: reduce){
  .gcard__go:hover .gcard__go-ic{ transform:none; }
}

@media (max-width:520px){
  .gcards{ grid-template-columns:1fr; gap:14px; }
  .gcard__spec b{ font-size:.86rem; }
}

/* =====================================================================
   เวทีเปิดของ  (.stage)

   ═══ จังหวะทั้งหมด ═══
     1. กดช่อง        ช่องนั้นย่อหาย · เวทีเฟดเข้า · หกเหลี่ยมยักษ์ลอยขึ้นมากลางจอ
     2. ลุ้น 5 วิ      ค้อนกระแทกเป็นจังหวะ · รอยแตกลามทีละเส้น · แสงรั่วออกจากรอย
                      วงแหวนนับถอยหลังรอบปุ่ม — กดข้ามได้ตลอด
     3. แตก           ระเบิดแสงสีตาม rarity · เศษกระจาย · ของโผล่
     4. ผลลัพธ์        ชื่อของ · ครั้งที่เท่าไหร่ · จ่ายไปเท่าไหร่ · ปุ่มทุบต่อ

   ติ๊ก "ข้ามอนิเมชัน" = กระโดดไปข้อ 4 ทันที
   ===================================================================== */
.stage{ position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:20px; }
.stage[hidden]{ display:none; }
/*  ⚠ ม่านต้องโปร่งพอให้เห็นว่าเว็บยังอยู่ข้างหลัง
    ดำทึบ 90% = เหมือนเปลี่ยนไปอีกหน้าหนึ่งเลย ไม่รู้ว่ากดปิดแล้วจะกลับไปไหน
    ลดลงเหลือ 62% แล้วเพิ่มเบลอแทน — ยังอ่านของบนเวทีได้ชัด
    และยังเห็นรังผึ้งกับแผงข้างหลังราง ๆ ว่ายังอยู่ที่เดิม  */
.stage__veil{
  position:absolute; inset:0;
  background:radial-gradient(120% 90% at 50% 45%, rgba(6,4,3,.5), rgba(3,2,1,.82));
  backdrop-filter:blur(14px) saturate(.7);
  -webkit-backdrop-filter:blur(14px) saturate(.7);
  animation:fadeIn .25s var(--ease);
}

/* แสงพุ่งด้านหลัง — โผล่ตอนแตกเท่านั้น สีเปลี่ยนตาม rarity
   ⚠ ต้องมี inset:0 + margin:auto : เดิมใส่แต่ width/height ไม่ได้บอกตำแหน่ง
   absolute เลยไปเกาะ static position (มุมซ้ายบนของ grid) แสงพุ่งออกนอกจอเฉียง ๆ
   กลายเป็นแถบเทาพาดจอแทนที่จะเป็นรัศมีรอบหกเหลี่ยม
   และมุมของ conic ต้องกระจายรอบวง 360° ไม่ใช่กระจุกอยู่ 0-64° */
/*  เคยเป็นแฉกแบบ conic — ได้หนามดำ ๆ แผ่รอบจอ ดูเหมือนดวงอาทิตย์สีดำ
    ไม่ว่าจะปรับสีหรือมุมยังไงก็ยังเป็น "หนาม" อยู่ดี
    เปลี่ยนเป็นแสงฟุ้งกลม ๆ แทน — นุ่ม อ่านง่าย และเข้ากับโทนเรืองส้มของธีม */
.stage__rays{
  position:absolute; inset:0; margin:auto; pointer-events:none;
  width:min(90vmin,700px); height:min(90vmin,700px);
  opacity:0; transition:opacity .7s var(--ease);
  background:
    radial-gradient(circle, var(--rc, rgba(255,138,31,.5)) 0%, transparent 46%),
    radial-gradient(circle, transparent 30%, var(--rc, rgba(255,138,31,.5)) 42%, transparent 56%);
  filter:blur(26px);
}
.stage.is-told .stage__rays{ opacity:.55; animation:bloomIn .9s var(--ease); }
@keyframes bloomIn{
  0%{ opacity:0; transform:scale(.35); }
  55%{ opacity:.85; transform:scale(1.06); }
  100%{ opacity:.55; transform:scale(1); }
}
@media (prefers-reduced-motion: reduce){ .stage.is-told .stage__rays{ animation:none; } }

/*  ช่องไฟเดิม 20px ทุกช่วง ทำให้คำสั่ง–รังผึ้ง–ปุ่ม ลอยห่างกันเป็นสามก้อน
    บีบให้ชิดขึ้นเป็นก้อนเดียว สายตาไม่ต้องกวาดขึ้นลงทั้งจอ  */
.stage__box{ position:relative; display:grid; place-items:center; gap:14px; width:min(460px,100%); }

/* ---------- หกเหลี่ยมกลางจอ ---------- */
.stage__hex{
  position:relative; width:min(230px,58vw); aspect-ratio:1/1.1547;
  display:grid; place-items:center;
  animation:stageIn .45s cubic-bezier(.2,1.3,.4,1);
}
/*  ⚠ ตัวนี้ tabindex=0 และ JS โฟกัสให้ตอนเปิดเวที
    :focus-visible ของกลางเลยวาด "กรอบสี่เหลี่ยมส้ม" ทับรังผึ้ง
    (theme.css : outline 2px solid var(--or)) — เป็นสี่เหลี่ยมเพราะ outline
    ไม่รู้จัก clip-path · ต้องปิดแล้ววาดเป็นทรงหกเหลี่ยมเองแทน  */
.stage__hex:focus-visible{ outline:none; }
.stage__hex:focus-visible .stage__shell::before{
  box-shadow:inset 0 0 0 2px var(--or), inset 0 0 22px -6px rgba(var(--o),.8);
}
@keyframes stageIn{
  0%{ opacity:0; transform:scale(.3) rotate(-22deg); }
  100%{ opacity:1; transform:scale(1) rotate(0); }
}
/* ชั้นใน — อยู่ใต้เปลือกรังผึ้ง เผยออกมาตอนเศษกระเด็นหมด */
.stage__core{
  position:absolute; inset:0; z-index:1; clip-path:var(--hex);
  background:linear-gradient(170deg,#22150a,#0a0605);
  box-shadow:inset 0 0 60px -12px rgba(0,0,0,.9);
  transition:background .45s var(--ease) .25s, box-shadow .45s var(--ease) .25s;
}
/*  ? กับรูปของรางวัลต้องซ้อน "ช่องกริดเดียวกัน"
    เดิมทั้งคู่เป็น in-flow ในกริด place-items:center เลยกลายเป็นสองแถว
    ? ถูกดันขึ้นไปอยู่ค่อนบน ของรางวัลตกลงไปค่อนล่าง ไม่มีอันไหนอยู่กลางเลย  */
.stage__q, .stage__prize{ grid-area:1 / 1; }
.stage__q{
  position:relative; z-index:5; font-family:'Orbitron','Sukhumvit',sans-serif;
  font-size:3.4rem; font-weight:700; color:rgba(255,215,170,.5);
  /* ปั๊มอยู่บนฝารังผึ้ง — เงามืดด้านล่างทำให้ดูจมลงไปในเนื้อฝา */
  text-shadow:0 2px 0 rgba(0,0,0,.55), 0 0 26px rgba(var(--o),.35);
  transition:opacity .2s var(--ease), transform .2s var(--ease);
}

/*  เดิมทั้งใบสั่นตลอดเวลาที่นับถอยหลัง — เอาออกแล้ว
    ตู้สั่นทำให้เล็งช่องไม่ถูก และช่องที่ชี้อยู่ก็ขยับหนีนิ้ว
    ความกดดันย้ายไปอยู่ที่วงแหวนนับถอยหลังกับรอยร้าวที่ลามขึ้นเรื่อย ๆ แทน  */

/* ---------------------------------------------------------------------
   เปลือกรังผึ้ง  (.stage__shell + .shard)

   ฝาหกเหลี่ยมใหญ่ทำจากหกเหลี่ยมย่อย 37 ชิ้น — เนื้อฝาเลยเป็น "รังผึ้ง" จริง ๆ
   เดิมเป็นเส้นขีดสุ่มพาดหน้าจอ ดูเหมือนรอยขีดข่วน ไม่เข้ากับตู้รังผึ้งเลย

   จังหวะ : ทุบตรงไหน ชิ้นตรงนั้นร้าวก่อน (is-lit) แล้วลามออกเป็นวง
            พอแตกจริง เศษกระเด็นออกทีละวงตาม --d เผยของที่อยู่ข้างใน
   --------------------------------------------------------------------- */
/*  ปูรังผึ้งล้นกรอบแล้วตัดด้วยรูปหกเหลี่ยมเดียวกัน — ฝาเลยเป็นรังผึ้งเต็มใบ
    ไม่มีมุมดำเหลือ · ตอนแตกปลด clip ทิ้ง เศษจะได้กระเด็นออกนอกกรอบ  */
.stage__shell{ position:absolute; inset:0; z-index:3; pointer-events:none; clip-path:var(--hex); }
.stage.is-open .stage__shell{ clip-path:none; }

/*  ⚠ แผ่นรองทึบใต้เศษรังผึ้ง
    รังผึ้งย่อยต่อกันเป๊ะในทางคณิตศาสตร์ แต่บนจอจริงมีการปัดเศษพิกเซล
    เหลือรอยเข็มบาง ๆ ตามรอยต่อ — พอของรางวัลอยู่ข้างหลังก็เห็นแวบ ๆ ตั้งแต่ยังไม่ทุบ
    (เห็นของก่อนทุบ = หมดความลุ้นทันที)

    ปูแผ่นทึบไว้ใต้เศษอีกชั้น แล้วให้มันจางหายตอนแตก
    เศษกระเด็นไปเรื่อย ๆ พร้อมกับแผ่นรองจางลง = ของค่อย ๆ โผล่ตามรอยที่เศษหลุด  */
.stage__shell::before{
  content:''; position:absolute; inset:0; clip-path:var(--hex);
  background:linear-gradient(168deg,#3c2a14,#1a1108 60%,#120c06);
  transition:opacity .75s var(--ease);
}
/*  หน่วงไว้ให้เศษออกไปพอสมควรก่อน แล้วค่อยจาง — ไม่ใช่หายพร้อมกันทั้งแผ่น  */
.stage.is-open .stage__shell::before{ opacity:0; transition-delay:.55s; }

/*  ตอนเปิดให้ทุบ ช่องรังผึ้งกลายเป็นเป้าจริง — ชี้ช่องไหนก็เล็งช่องนั้น
    นอกช่วงนั้นปิดรับเมาส์ไว้ ไม่งั้นบังปุ่มปิดเวที  */
.stage__hex.is-armed .stage__shell{ pointer-events:auto; }
.shard{
  position:absolute; display:block;
  width:var(--sw,13.16%); height:var(--sw,13.16%);
  translate:-50% -50%;
  clip-path:var(--hex);
  /*  ⚠ ต้องทึบ ห้ามโปร่งแสง
      เดิมเป็น rgba โปร่ง ๆ ทับพื้นดำ — ฝาเลยไม่ได้ "ปิด" อะไรจริง
      ของรางวัลจึงต้องซ่อนด้วยการตั้ง opacity:0 แล้วค่อย fade เข้ามาทีหลัง
      ผลคือฝาแตกไปทางหนึ่ง ของโผล่มาอีกทางหนึ่ง ไม่ได้ต่อเนื่องกันเลย
      ทำให้ทึบแล้ววางของไว้ข้างหลังตั้งแต่แรก — เศษหลุดตรงไหน เห็นของตรงนั้น
      ซึ่งเป็นสิ่งที่ตาคาดหวังจากคำว่า "ทุบ"  */
  background:linear-gradient(165deg, #4a3418, #2a1c0d 55%, #1a1108);
  box-shadow:inset 0 0 0 1.5px rgba(8,5,3,.92),
             inset 0 6px 10px -6px rgba(255,214,160,.30);
  transition:background .25s var(--ease), box-shadow .25s var(--ease),
             filter .25s var(--ease), scale .18s var(--ease);
}
/*  ร้าวแล้ว — เรืองเป็นสีไฟส้ม ยังไม่ใช่สีของระดับรางวัล
    ⚠ ห้ามใช้ --rc ตอนนี้เด็ดขาด : สีระดับรางวัลคือคำเฉลย (เทา=ธรรมดา ฟ้า=หายาก ส้ม=ใหญ่)
      ถ้าให้รอยร้าวเป็นสีนั้นตั้งแต่ตอนลุ้น ก็รู้ผลก่อนฝาแตก หมดความลุ้นพอดี  */
/*  ⚠ "ร้าว" ไม่ใช่ "เปลี่ยนเป็นสีทอง"
    ตอนเล็ง รอยร้าวลามได้ถึง 45% ของฝา (PRE_MAX) — ถ้าชิ้นที่ร้าวกลายเป็นทองสว่าง
    ฝาครึ่งใบจะเหลืองพรึ่บตั้งแต่ยังไม่ทุบ ดูเหมือนตู้เปลี่ยนสีเล่น ไม่ใช่ตู้กำลังจะแตก
    (ของเดิมเป็น rgba โปร่ง ๆ เลยดูเป็นแค่ประกาย — แต่โปร่งแล้วของข้างหลังทะลุ)

    ทางออก : คงพื้นให้เข้มเหมือนเดิม แล้วบอกว่า "ร้าว" ด้วย
      · สว่างขึ้นนิดเดียว (ยังเป็นโทนน้ำตาล ไม่ใช่ทอง)
      · เส้นขอบในเรืองส้ม  = รอยแตกตามขอบชิ้น
      · เงาส้มรอบนอกจาง ๆ = แสงลอดออกมาจากรอยร้าว  */
.shard.is-lit{
  /*  ⚠ พื้นต้องเป็นสีเดิมเป๊ะ ห้ามแตะ background
      crackTo() ไล่ใส่ is-lit จนครบทั้ง 73 ช่องก่อนฝาแตก
      เพราะฉะนั้น "ทุกอย่างที่ใส่ตรงนี้ = สภาพของทั้งใบตอนก่อนแตก"
      เคยไล่สีพื้นให้อ่อนขึ้น ผลคือฝาทั้งใบเปลี่ยนจากน้ำตาลเข้มเป็นเหลืองทั้งแผ่น
      ซึ่งอ่านว่า "ตู้เปลี่ยนสี" ไม่ใช่ "ตู้กำลังจะแตก"

      รอยร้าวของจริงคือ "เส้น" ไม่ใช่ "แผ่น" — ตัวแผ่นยังเป็นวัสดุเดิม
      มีแค่ตามแนวรอยแยกที่แสงลอดออกมา
      เลยเหลือไว้แค่ขอบในเรืองส้ม + แสงรอดจาง ๆ ตามขอบ
      73 ช่องที่ร้าวจึงเห็นเป็น "ใยรอยแตกสีส้มบนฝาที่ยังดำอยู่"  */
  box-shadow:inset 0 0 0 1.4px rgba(255,146,44,.72),
             inset 0 0 9px -3px rgba(255,170,70,.42),
             0 0 7px -3px rgba(255,130,30,.5);
}
/*  ⚠ ห้ามเปลี่ยนสีเศษตอน is-open
    เศษกำลังลอยออกอยู่ ถ้าเปลี่ยนเป็นสีระดับรางวัลตรงนี้
    = เฉลยตั้งแต่เศษชิ้นแรกยังไม่ทันพ้นขอบ ทั้งที่ยังเหลืออีก 2 วินาที
    สีเฉลยย้ายไปที่คลาส .is-told ซึ่ง JS ใส่ให้ "หลังเศษออกหมดแล้ว"  */
/* ชิ้นที่โดนค้อนเต็ม ๆ — ยุบลงไปก่อนเพื่อน บอกจุดกระแทกชัด ๆ */
/*  ⚠ ต้องเขียน "หลัง" .is-lit
    ชิ้นที่เล็งอยู่ก็ติด is-lit ไปด้วย (มันคือจุดศูนย์กลางของรอยร้าว)
    ประกาศไว้ก่อน is-lit เมื่อไหร่ก็โดนทับ ชิ้นที่เล็งเลยกลืนไปกับชิ้นอื่น
    แล้วคนเล็งก็ไม่รู้ว่ากำลังจะทุบตรงไหน  */
.shard.is-aim, .shard.is-aim.is-lit{
  scale:1.12; z-index:1;
  background:linear-gradient(165deg, #c98c2e, #7a4c18 60%, #43290c);
  box-shadow:inset 0 0 0 1.5px rgba(255,190,110,.85),
             0 0 20px -2px rgba(255,160,60,.9);
}

/*  ชิ้นเดียวที่โดนค้อนเต็ม ๆ — สว่างได้เต็มที่ เพราะมีชิ้นเดียว  */
.shard.is-hit{
  scale:.72; filter:brightness(2.2);
  box-shadow:inset 0 0 0 1.5px rgba(8,5,3,.92), 0 0 26px 2px var(--rc, rgba(255,138,31,1));
  transition:scale .18s cubic-bezier(.3,-.6,.7,1.6), filter .18s var(--ease);
}

/* แตก — เศษกระเด็นออก หน่วงตามระยะจากจุดตี ทำให้เห็นเป็นคลื่นเปิดออก */
/*  ⚠ เศษต้อง "ค้างให้เห็นก่อน" แล้วค่อยลอยออก
    ของเดิมจางหายตั้งแต่เฟรมแรก เลยดูเหมือนละลายมากกว่าแตกกระเด็น
    ใส่จุดกลางไว้ที่ 25% : ช่วงแรกยังทึบเต็มแต่เริ่มขยับ+หมุนแล้ว
    ตาเลยจับได้ว่ามันเป็น "ชิ้นส่วนที่กระเด็นออกไป" ไม่ใช่แค่จางหาย  */
@keyframes shardFly{
  0%{ opacity:1; }
  25%{ opacity:1; translate:calc(-50% + var(--fx) * .18) calc(-50% + var(--fy) * .18);
       rotate:calc(var(--rr) * .15); scale:1.04; }
  100%{ opacity:0; translate:calc(-50% + var(--fx)) calc(-50% + var(--fy));
        rotate:var(--rr); scale:.42; }
}
/*  หน่วงตามระยะจากจุดตี — เศษเลยกระเด็นไล่ออกเป็นคลื่น
    ยาวขึ้นเป็น .62s เพื่อให้ "ค่อย ๆ แตกออกไปเรื่อย ๆ" อ่านออกจริง
    สั้นกว่านี้จะเห็นเป็นหายพรึ่บทั้งใบพร้อมกัน */
/*  ⚠ ช้าลงและเหลื่อมกันมากขึ้น — ให้ "ลุ้น" ได้จริง
    .6s/.62s ของเดิมเร็วจนวงคลื่นแทบทับกันหมด เห็นเป็นแตกพรึ่บทีเดียว
    ตัวเศษ .9s · เหลื่อมกันตามระยะ 1.05s = ไล่จากจุดที่ตีออกไปจนขอบเห็นชัด  */
.stage.is-open .shard{
  animation:shardFly .9s cubic-bezier(.25,.6,.3,1) forwards;
  animation-delay:calc(var(--d, 0) * 1.05s);
}
@media (prefers-reduced-motion: reduce){
  .stage.is-open .shard{ animation:none; opacity:0; }
  .shard{ transition:none; }
}

/* ---------------------------------------------------------------------
   คำสั่ง  (.stage__ask)
   สองบรรทัดสั้น ๆ : ทำอะไร · ไม่ทำแล้วยังไง
   เลขวินาทีย้ายลงไปอยู่ในวงแหวนของปุ่มข้างล่างแล้ว — เดิมเป็นป้ายเลขตัวโต
   ลอยอยู่สูงเหนือรังผึ้ง แย่งสายตาไปจากตัวตู้ซึ่งเป็นพระเอกของฉาก
   --------------------------------------------------------------------- */
.stage__ask{
  display:grid; justify-items:center; gap:3px; text-align:center;
  animation:resultIn .35s var(--ease);
}
.stage__ask[hidden]{ display:none; }
.stage__asktx{ font-size:.9rem; font-weight:600; color:var(--txt); }
.stage__askhint{ font-size:.72rem; color:var(--dim-2); }

/* ---------------------------------------------------------------------
   โหมดเลือกช่อง
   เดิมมีวงกลมเรืองแสงวิ่งตามเคอร์เซอร์ — มันลอยทับรังผึ้งโดยไม่ตรงกับ
   ช่องใดช่องหนึ่ง เลยไม่ได้บอกอะไรเลยว่าจะแตกจากตรงไหน
   ตอนนี้ตัวช่องเองสว่างขึ้นมา (.shard.is-aim) ชัดกว่าและเป็นรังผึ้งจริง ๆ
   --------------------------------------------------------------------- */
.stage__hex.is-armed{
  cursor:pointer;
  /* เคอร์เซอร์ค้อน — data-URI ไม่ต้องโหลดไฟล์เพิ่ม */
  cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34'%3E%3Cg transform='rotate(-32 17 17)'%3E%3Crect x='7' y='5' width='19' height='11' rx='2.5' fill='%23ffb055' stroke='%23241202' stroke-width='2'/%3E%3Crect x='14.5' y='14' width='5' height='15' rx='2' fill='%238a5a2a' stroke='%23241202' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E") 17 17, pointer;
}
/* ---------- ค้อน ---------- */
.stage__hammer{
  position:absolute; z-index:7; left:50%; top:50%;
  width:96px; height:96px; transform-origin:78% 78%; pointer-events:none;
  transform:translate(60px,-70px) rotate(-70deg); opacity:0;
  transition:left .18s var(--ease), top .18s var(--ease);
}
.stage__hammer .hammer__head{ width:52px; height:32px; top:4px; left:10px; border-radius:6px; }
.stage__hammer .hammer__head::after{ right:-12px; top:5px; width:15px; height:22px; }
.stage__hammer .hammer__grip{ width:12px; height:62px; top:28px; left:35px; }
@keyframes stageSwing{
  0%{ transform:translate(60px,-70px) rotate(-70deg); opacity:0; }
  25%{ transform:translate(24px,-30px) rotate(-40deg); opacity:1; }
  45%{ transform:translate(-6px,6px) rotate(6deg); opacity:1; }
  60%{ transform:translate(6px,-8px) rotate(-14deg); opacity:1; }
  100%{ transform:translate(60px,-70px) rotate(-70deg); opacity:0; }
}
.stage__hammer.is-swing{ animation:stageSwing .55s cubic-bezier(.3,.9,.4,1); }

/* ---------- ปุ่มข้าม + วงแหวนนับถอยหลัง ---------- */
.stage__skip{
  position:relative; display:flex; align-items:center; gap:11px;
  padding:9px 20px 9px 9px; border-radius:99px;
  border:1px solid var(--hair-2); background:rgba(255,255,255,.05); color:var(--dim);
  font-size:.86rem; transition:.16s var(--ease);
}
.stage__skip:hover{ border-color:rgba(var(--o),.55); background:rgba(var(--o),.14); color:var(--txt); }

/*  เลขวินาทีอยู่กลางวงแหวน — วงบอกเวลาเป็นภาพ เลขบอกเป็นตัวเลข ที่เดียวกัน
    เดิมแยกเป็นป้ายเลขตัวโตลอยอยู่เหนือรังผึ้ง กลายเป็นบอกเรื่องเดียวกันสองที่  */
.stage__ringwrap{ position:relative; display:grid; place-items:center; flex:none; }
.stage__count{
  position:absolute; font-family:var(--f-num); font-size:.86rem; font-weight:700;
  color:var(--or-hi); line-height:1; font-variant-numeric:tabular-nums;
  transition:color .2s var(--ease);
}
.stage.is-tense-3 .stage__count{ color:#ffb3b3; }
.stage__ring{ width:30px; height:30px; transform:rotate(-90deg); flex:none; display:block; }
.stage__ringbg{ fill:none; stroke:rgba(255,255,255,.12); stroke-width:3; }
.stage__ringfg{
  fill:none; stroke:var(--or); stroke-width:3; stroke-linecap:round;
  stroke-dasharray:119.4;             /* 2πr · r=19 */
  stroke-dashoffset:0;
}
.stage.is-counting .stage__ringfg{
  animation:ringDrain var(--wait,5s) linear forwards;
}
@keyframes ringDrain{ to{ stroke-dashoffset:119.4; } }
.stage.is-open .stage__skip{ display:none; }

/* ---------- ระเบิดตอนแตก ---------- */
@keyframes burst{
  0%{ transform:scale(1); }
  18%{ transform:scale(1.22); }
  40%{ transform:scale(.94); }
  100%{ transform:scale(1); }
}
.stage.is-told .stage__hex{ animation:burst .6s cubic-bezier(.2,1.4,.4,1); }
.stage.is-open .stage__q{ opacity:0; transform:scale(.4); }
/*  ⚠ พื้นหลังสีระดับรางวัลขึ้นตอน .is-told เท่านั้น (หลังเศษออกหมด)
    ผูกกับ .is-open แบบเดิม = สีขึ้นตั้งแต่วินาทีแรกที่เริ่มแตก
    คนดูเห็นพื้นเปลี่ยนเป็นสีทอง/ฟ้า ก่อนที่ฝาจะเปิดจริงด้วยซ้ำ  */
.stage.is-told .stage__core{
  background:var(--rin, linear-gradient(170deg,#4a2a08,#150c04));
  box-shadow:inset 0 0 0 2px var(--rc, rgba(255,138,31,.6)), inset 0 0 70px -14px var(--rc, rgba(255,138,31,.55));
}

/* วงแหวนแสงที่พุ่งออกตอนแตก */
.stage__hex::after{
  content:''; position:absolute; inset:0; clip-path:var(--hex); pointer-events:none;
  box-shadow:0 0 0 0 var(--rc, rgba(255,138,31,.6)); opacity:0;
}
@keyframes shock{
  0%{ opacity:1; transform:scale(1); box-shadow:0 0 0 0 var(--rc, rgba(255,138,31,.75)); }
  100%{ opacity:0; transform:scale(1.7); box-shadow:0 0 0 40px transparent; }
}
.stage.is-told .stage__hex::after{ animation:shock .75s var(--ease); }

/* ---------- ของที่ได้ ---------- */
/*  ⚠ ของรางวัลต้อง "อยู่ข้างหลังฝาตั้งแต่แรก" ไม่ใช่ fade เข้ามาทีหลัง
    z-index ต่ำกว่า .stage__shell (3) — ฝาบังไว้สนิทเพราะเศษทึบแล้ว
    เศษหลุดตรงไหน ก็เห็นของตรงนั้นทันที = "ค่อย ๆ แตกแล้วเห็นของข้างหลัง"

    ของเดิมตั้ง opacity:0 แล้วค่อย fade — ฝาแตกไปทางหนึ่ง ของโผล่มาอีกทางหนึ่ง
    สองอย่างไม่ได้เกี่ยวกันเลย ดูเป็นสองอนิเมชันคนละชุดที่บังเอิญเล่นพร้อมกัน  */
.stage__prize{
  position:relative; z-index:2; display:grid; place-items:center;
  width:56%; height:56%;
  transform:scale(.94);
  transition:transform .55s cubic-bezier(.2,1.4,.4,1) .5s;
}
/*  แตกเสร็จแล้วค่อยขยับขึ้นนิดเดียว — ให้รู้สึกว่า "ของหลุดออกมา"
    ไม่ใช่กระโดดเข้ามาใหม่  */
.stage.is-told .stage__prize{ transform:scale(1.06); }

/* ---------------------------------------------------------------------
   ข้ามอนิเมชัน — เวทีต้องขึ้นมาในสภาพ "เปิดแล้ว" ไม่ใช่ "กำลังเปิด"
   ---------------------------------------------------------------------
   ⚠ ทุกอย่างในบล็อกนี้คือการ "ไม่เล่น" ไม่ใช่ "เล่นให้เร็วขึ้น"
     เร่งความเร็วยังเห็นของกระตุกอยู่ดี ซึ่งแย่กว่าไม่มีอนิเมชันเลย

   สภาพที่ต้องได้ : ของรางวัลอยู่กลางวงสีระดับรางวัล ไม่มีฝา ไม่มีเศษ
   ไม่มีค้อน ไม่มี "?" ค้าง และไม่มีปุ่มข้ามที่กดไปแล้ว  */

/*  ฝาทั้งใบ (รวมแผ่นรองทึบใน ::before) — เอาออกไปเลย ไม่ต้องแตก  */
.stage.is-skip .stage__shell,
.stage.is-skip .stage__hammer{ display:none; }

/*  "?" กับปุ่มข้าม ปกติหายไปตอน is-open — ทางนี้ไม่มี is-open ต้องสั่งเอง
    ไม่งั้น ? ค้างทับรูปของรางวัลพอดี  */
.stage.is-skip .stage__q{ display:none; }
.stage.is-skip .stage__skip{ display:none; }

/*  เฉลยทันที : สีระดับรางวัลกับลำแสงยังอยู่ (นั่นคือ "ผล" ไม่ใช่ "ฉาก")
    แต่ตัดอนิเมชันเข้าออกทิ้งหมด — ทั้งเวทีเด้งเข้า วงกระแทก และของขยาย  */
.stage.is-skip .stage__hex,
.stage.is-skip .stage__hex::after,
.stage.is-skip .stage__rays{ animation:none; }
.stage.is-skip .stage__prize{ transform:none; }
.stage__prize img{ width:100%; height:100%; object-fit:contain;
  filter:drop-shadow(0 10px 20px rgba(0,0,0,.8)); }
.stage__prize .ic{ width:70%; height:70%; color:var(--or-hi); stroke-width:1.3; }

/* ---------- ผลลัพธ์ ---------- */
/* ---------------------------------------------------------------------
   แผงผลรางวัล

   ⚠ ของเดิมเป็นข้อความสี่ก้อนเรียงลงมาโดยไม่มีอะไรมัดรวม
     ทุกก้อนน้ำหนักพอ ๆ กัน ตาไม่รู้ว่าควรอ่านอะไรก่อน
     และ "ได้ของหายาก" กับ "ได้ของธรรมดา" หน้าตาเหมือนกันเป๊ะ
     ทั้งที่เป็นความรู้สึกคนละเรื่องกันเลยสำหรับคนเปิดตู้

   ใหม่ : มัดเป็นแผงเดียวมีกรอบ · กรอบกับแสงเปลี่ยนสีตามระดับรางวัล
   --------------------------------------------------------------------- */
.stage__result{ display:grid; gap:15px; justify-items:center;
  animation:resultIn .4s var(--ease); width:min(420px,100%); }
.stage__result[hidden]{ display:none; }
@keyframes resultIn{ from{ opacity:0; transform:translateY(14px); } }

.rescard{
  position:relative; width:100%; text-align:center;
  display:grid; justify-items:center; gap:9px;
  padding:20px 22px 18px;
  border-radius:var(--r); overflow:hidden;
  border:1px solid var(--rc, rgba(255,255,255,.14));
  background:
    radial-gradient(120% 100% at 50% 0%,
      color-mix(in srgb, var(--rc, #888) 16%, transparent), transparent 62%),
    linear-gradient(180deg, rgba(22,16,11,.92), rgba(9,6,4,.96));
  box-shadow:0 24px 60px -26px #000,
             0 0 44px -22px var(--rc, rgba(255,255,255,.4));
}
/*  เส้นเรืองบนขอบบน — จุดเดียวที่สีระดับรางวัลเข้มเต็มที่  */
.rescard::before{
  content:''; position:absolute; left:14%; right:14%; top:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--rc, #aaa), transparent);
}

.rescard__tier{
  font-size:.68rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--dim-2);
}
/*  ชื่อรางวัล = ตัวใหญ่สุดในแผง เพราะเป็นสิ่งเดียวที่คนเปิดตู้อยากรู้  */
.rescard__name{
  margin:0; font-size:1.62rem; font-weight:700; line-height:1.3;
  text-shadow:0 2px 14px rgba(0,0,0,.6);
}

/*  ตัวเลขสามช่อง — ป้ายเล็กบน เลขใหญ่ล่าง อ่านเทียบกันได้ในแถวเดียว  */
.rescard__meta{
  display:grid; grid-auto-flow:column; grid-auto-columns:1fr;
  width:100%; margin-top:3px;
  border-top:1px solid var(--hair); border-bottom:1px solid var(--hair);
}
.resnum{ padding:10px 4px; display:grid; gap:2px; }
.resnum + .resnum{ border-left:1px solid var(--hair); }
.resnum > span{ font-size:.62rem; color:var(--dim-2); letter-spacing:.04em; }
.resnum b{ font-family:var(--f-num); font-size:1.12rem; line-height:1.1; color:var(--txt); }
.resnum b i{ font-style:normal; font-size:.56rem; color:var(--dim-2);
  margin-left:3px; letter-spacing:.02em; }

.rescard__deliver{
  display:flex; align-items:flex-start; gap:9px; text-align:left; margin-top:3px;
  padding:9px 13px; border-radius:var(--r-sm);
  border:1px solid rgba(var(--g),.28); background:rgba(var(--g),.07);
  color:#a8ecc6; font-size:.76rem; line-height:1.6;
}
.rescard__deliver .ic{ width:15px; height:15px; flex:none; margin-top:2px; }

.stage__acts{ margin-top:0; }
@media (max-width: 460px){
  .rescard{ padding:16px 14px 14px; }
  .rescard__name{ font-size:1.34rem; }
  .resnum b{ font-size:1rem; }
}

/* ---------- สีตามระดับรางวัล ----------
   ตั้งเป็นตัวแปรบน .stage แล้วให้ทุกชิ้นดึงไปใช้ — เปลี่ยนที่เดียวเปลี่ยนทั้งฉาก */
.stage.rarity-common{
  --rc:rgba(200,200,200,.5);
  --rg:linear-gradient(160deg,#e8e8e8,#9a9a9a 50%,#5a5a5a);
  --rin:linear-gradient(170deg,#2a2a2a,#111);
}
.stage.rarity-rare{
  --rc:rgba(90,169,230,.65);
  --rg:linear-gradient(160deg,#bfe4ff,#3f9fe0 50%,#1d5b8d);
  --rin:linear-gradient(170deg,#0f2c45,#060f18);
}
.stage.rarity-grand{
  --rc:rgba(255,138,31,.8);
  --rg:linear-gradient(160deg,var(--or-hi),var(--or) 45%,var(--or-lo));
  --rin:linear-gradient(170deg,#4a2a08,#170d04);
}
.stage.rarity-common .rescard__name{ color:#e8e8e8; }
.stage.rarity-rare .rescard__name{ color:#a9d4f5; }
.stage.rarity-grand .rescard__name{ color:var(--or-hi); }
.stage.rarity-grand .rescard__tier{ color:var(--or); }

/* เศษกระเด็นตอนแตก — JS เป็นคนสร้าง */
.spark{
  position:absolute; left:50%; top:50%; width:9px; height:10px; clip-path:var(--hex);
  background:var(--rc, var(--or)); pointer-events:none; opacity:0;
  animation:sparkFly .85s cubic-bezier(.15,.7,.3,1) forwards;
}
@keyframes sparkFly{
  0%{ opacity:1; transform:translate(-50%,-50%) scale(1.1); }
  100%{ opacity:0; transform:translate(calc(-50% + var(--sx)), calc(-50% + var(--sy))) scale(.2) rotate(var(--sr)); }
}

@media (prefers-reduced-motion: reduce){
  .stage__hex, .stage__result, .stage__veil{ animation:none !important; }
  .stage.is-tense .stage__hex{ animation:none !important; }
  .stage__rays{ animation:none; }
  .spark{ display:none; }
}

/* ---------- โมดัลผลรางวัล (เก่า · เก็บไว้เผื่อหน้าอื่นใช้) ---------- */
.winbox{ position:relative; overflow:hidden; display:grid; place-items:center; gap:16px; padding:30px 24px; text-align:center; }
.winbox__hex{ position:relative; width:120px; height:139px; display:grid; place-items:center; }
.winbox__hex::before{ content:''; position:absolute; inset:0; clip-path:var(--hex);
  background:linear-gradient(160deg,var(--or-hi),var(--or) 45%,var(--or-lo)); }
.winbox__hex::after{ content:''; position:absolute; inset:3px; clip-path:var(--hex);
  background:linear-gradient(175deg,#241505,#0c0704); }
.winbox__hex img{ position:relative; z-index:1; width:62%; height:62%; object-fit:contain; }
.winbox__hex .ic{ position:relative; z-index:1; width:46%; height:46%; color:var(--or-hi); stroke-width:1.4; }
.winbox__name{ font-size:1.24rem; font-weight:700; }
.winbox--grand .winbox__name{ color:var(--or-hi); }
.winbox__list{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; max-height:230px; overflow-y:auto; }
.winmini{ display:flex; align-items:center; gap:7px; padding:5px 10px 5px 5px; border-radius:99px;
  border:1px solid var(--hair); background:rgba(0,0,0,.3); font-size:.78rem; }
.winmini img{ width:24px; height:24px; object-fit:contain; }
.winmini.tier-grand{ border-color:rgba(var(--o),.5); background:rgba(var(--o),.14); color:var(--or-hi); }
.winmini.tier-rare{ border-color:rgba(var(--i),.4); background:rgba(var(--i),.12); color:#a9d4f5; }

@keyframes rayspin{ to{ transform:rotate(360deg); } }
.winbox--grand::before{
  content:''; position:absolute; width:340px; height:340px; pointer-events:none;
  background:conic-gradient(from 0deg, transparent 0 12deg, rgba(var(--o),.18) 12deg 24deg,
    transparent 24deg 36deg, rgba(var(--o),.18) 36deg 48deg, transparent 48deg 60deg);
  animation:rayspin 9s linear infinite;
  mask-image:radial-gradient(circle, #000 25%, transparent 70%);
  -webkit-mask-image:radial-gradient(circle, #000 25%, transparent 70%);
}
@media (prefers-reduced-motion: reduce){ .winbox--grand::before{ animation:none; } }

/* ---------- ประวัติคนได้รางวัล ---------- */
.wintick{ display:flex; flex-direction:column; gap:7px; max-height:300px; overflow-y:auto; }
.wintick__row{ display:flex; align-items:center; gap:9px; padding:7px 10px; border-radius:9px;
  border:1px solid var(--hair); background:rgba(255,255,255,.02); font-size:.78rem; }
.wintick__row img{ width:24px; height:24px; object-fit:contain; flex:none; }
.wintick__row.tier-grand{ border-color:rgba(var(--o),.35); background:rgba(var(--o),.09); }
.wintick__who{ color:var(--dim-2); font-size:.7rem; }

/* ---------- แถบเตือนยังไม่ผูกตัวละคร ---------- */
.linkwarn{
  display:flex; align-items:center; gap:13px; flex-wrap:wrap;
  padding:14px 17px; margin-bottom:18px; border-radius:var(--r-sm);
  border:1px solid rgba(var(--w),.4); background:rgba(var(--w),.09);
}
.linkwarn .ic{ width:20px; height:20px; color:var(--warn); flex:none; }
.linkwarn__body{ flex:1; min-width:200px; }

/* ---------- มือถือ ---------- */
@media (max-width: 760px){
  :root{ --hexw:62px; --hexline:2px; }
  .cell__q{ font-size:1.05rem; }
  .cell__name{ font-size:.44rem; bottom:22%; }
  .cell__no{ display:none; }
  .combwrap{ padding:20px 6px 24px; }
  .hammer{ width:40px; height:40px; }
  .hammer__head{ width:22px; height:14px; left:4px; }
  .hammer__grip{ width:5px; height:26px; top:12px; left:15px; }
}
@media (max-width: 430px){
  :root{ --hexw:50px; }
}

/*  ช่องว่างในทรงที่แอดมินวาดเอง — กินที่เท่าช่องจริงเพื่อให้ลายรังผึ้งไม่เลื่อน
    ต้องมีตัวคั่นจริง ๆ ไม่ใช่แค่ข้ามไป ไม่งั้นช่องที่เหลือจะไหลมาชิดกัน  */
.cell--gap{ visibility:hidden; pointer-events:none; }




/* =====================================================================
   ของในตู้ + โอกาสออก  (ใต้รังผึ้ง)

   เคยอยู่แผงขวาเป็นรายการแนวตั้งยาว ๆ แล้วถูกแทนด้วยของที่ได้/ประวัติ
   ย้ายมาอยู่ใต้รังผึ้งแทนกล่องคำอธิบายตู้ที่กินที่ไปทั้งแถบเพื่อข้อความบรรทัดเดียว

   วางเป็นตารางการ์ดใบเล็ก : รูปใหญ่พอให้จำของได้ · % ตัวโต ๆ อ่านง่าย
   แถบยาวเท่า % ไว้เทียบด้วยสายตา เร็วกว่าไล่อ่านตัวเลขทีละใบ
   ===================================================================== */
.pzcard{ margin-top:16px; }
.pzgrid{
  display:grid; gap:9px;
  grid-template-columns:repeat(auto-fill, minmax(132px, 1fr));
}

.pz{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:22px 10px 11px; border-radius:12px;
  border:1px solid var(--hair); background:rgba(255,255,255,.025);
  transition:.16s var(--ease);
}
.pz:hover{ border-color:rgba(var(--o),.4); background:rgba(var(--o),.05); }

/*  ป้ายระดับรางวัลเกาะขอบบน — ตัวหนังสือล้วน ไม่ใช่พื้นทึบ
    การ์ดสิบใบเรียงกันแล้วมีป้ายสีทึบสิบใบ มันแย่งกันเด่นจนไม่เหลืออะไรเด่น  */
.pz__tier{
  position:absolute; top:6px; left:0; right:0; text-align:center;
  font-size:.56rem; letter-spacing:.16em; text-transform:uppercase; color:var(--dim-2);
}
.pz.tier-grand{ border-color:rgba(var(--o),.45); background:rgba(var(--o),.08); }
.pz.tier-grand .pz__tier{ color:var(--or-hi); }
.pz.tier-rare{ border-color:rgba(var(--i),.32); background:rgba(var(--i),.05); }
.pz.tier-rare .pz__tier{ color:#a9d4f5; }

.pz__img{
  width:52px; height:52px; display:grid; place-items:center; border-radius:10px;
  background:radial-gradient(70% 70% at 50% 40%, rgba(var(--o),.18), transparent 72%);
}
.pz__img img{ width:100%; height:100%; object-fit:contain; }
.pz__img .ic{ width:24px; height:24px; color:var(--or-hi); }

.pz__name{
  width:100%; text-align:center; font-size:.76rem; line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.pz.tier-grand .pz__name{ color:var(--or-hi); font-weight:500; }
.pz.tier-rare .pz__name{ color:#a9d4f5; }

.pz__bar{
  width:100%; height:3px; border-radius:99px; overflow:hidden; margin-top:auto;
  background:rgba(255,255,255,.08);
}
.pz__bar i{
  display:block; height:100%; border-radius:99px;
  background:linear-gradient(90deg, var(--or-lo), var(--or), var(--or-hi));
  transition:width .4s var(--ease);
}

.pz__foot{ display:flex; align-items:baseline; gap:3px; }
.pz__foot b{ font-family:'Orbitron','Sukhumvit',sans-serif; font-size:1rem; color:var(--or-hi); }
.pz__foot > span{ font-size:.66rem; color:var(--or); }

/*  ของหมดแล้ว — จางลงให้เห็นชัดว่าลุ้นไม่ได้แล้ว แต่ยังอยู่ในรายการ
    เอาออกเลยจะดูเหมือนตู้มีของน้อยกว่าที่ประกาศไว้  */
.pz.is-out{ opacity:.38; }
.pz.is-out .pz__foot b,
.pz.is-out .pz__foot > span{ color:var(--dim-2); }

.pznote{ margin-top:13px; line-height:1.75; }

/*  โอกาสขยับแล้วกะพริบ — ไม่งั้นตัวเลขเปลี่ยนเงียบ ๆ ไม่มีใครสังเกต  */
@keyframes oddsBump{
  0%{ transform:scale(1); }
  35%{ transform:scale(1.22); color:#fff; text-shadow:0 0 16px rgba(var(--o),.9); }
  100%{ transform:scale(1); }
}
.oddsbump{ display:inline-block; animation:oddsBump .55s var(--ease); }
@media (prefers-reduced-motion: reduce){ .oddsbump{ animation:none; } }

/*  คำอธิบายตู้ที่ย้ายมาต่อท้ายชื่อตู้
    บีบเหลือบรรทัดเดียว — ยาวกว่านั้นแถวหัวเรื่องจะสูงจนดันรังผึ้งลงไป
    ข้อความเต็มอยู่ใน title ชี้เมาส์อ่านได้  */
.gdesc{
  flex:1; min-width:0; line-height:1.6;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
@media (max-width: 620px){ .gdesc{ flex-basis:100%; } }


/* =====================================================================
   แถบบอกรอบ  (เหนือรังผึ้ง)

   ต้องมีเพราะกติการางวัลใหญ่ผูกกับ "รอบที่เท่าไหร่" โดยตรง
   รอบ 2 ออกช่อง 27-30 · รอบ 3 ออกช่อง 28-30
   ไม่บอกว่าตอนนี้อยู่รอบไหน ผู้เล่นก็ไม่มีทางรู้ว่ากำลังลุ้นอะไรอยู่
   ===================================================================== */
.roundbar{
  display:flex; align-items:center; gap:11px; flex-wrap:wrap;
  margin:0 0 12px; padding:9px 14px; border-radius:var(--r-sm);
  border:1px solid var(--hair); background:rgba(0,0,0,.28);
}
.roundbar__k{
  font-family:'Orbitron','Sukhumvit',sans-serif; font-size:.62rem;
  letter-spacing:.22em; color:var(--dim-2);
}
.roundbar__dots{ display:flex; align-items:center; gap:5px; }

/*  จุดบอกรอบ : ผ่านมาแล้ว = จาง · รอบนี้ = เน้น · ยังไม่ถึง = โครงเปล่า
    ใช้ตัวเลขในจุดเลย จะได้ไม่ต้องนับจุดเอาเองว่ารอบที่เท่าไหร่

    ⚠ รอบนี้ห้ามถมพื้นส้มเป็นวงกลม
      วงกลมส้มทึบเด่นจนกลบทุกอย่างรอบตัว และตัวเลขข้างในต้องกลับเป็นสีเข้ม
      ซึ่งอ่านยากบนพื้นสว่างจัด · เป็นทรงเดียวในเว็บที่ไม่เข้ากับธีมที่เหลือ
      (ธีมนี้ใช้ส้มกับตัวอักษรและเส้นขอบเท่านั้น)
      ใช้ทรงหกเหลี่ยมเหมือนที่อื่น + ตัวอักษรส้ม + เรืองแสงจาง ๆ แทน  */
.rdot{
  width:24px; height:26px; display:grid; place-items:center;
  font-family:'Orbitron','Sukhumvit',sans-serif; font-size:.62rem;
  color:var(--dim-2); position:relative;
  clip-path:var(--hex); background:rgba(255,255,255,.05);
}
/*  ขอบบางด้านในให้เห็นทรงหกเหลี่ยม — clip-path ตัด border ทิ้ง ใช้ inset shadow แทน  */
.rdot::before{
  content:''; position:absolute; inset:1px; clip-path:var(--hex);
  background:#0d0806;
}
.rdot > *, .rdot{ z-index:0; }
.rdot span{ position:relative; z-index:1; }

.rdot.is-done{ background:rgba(var(--o),.28); color:rgba(255,138,31,.6); }
.rdot.is-now{
  background:linear-gradient(180deg, var(--or-hi), var(--or));
  color:var(--or-hi); font-weight:700;
  filter:drop-shadow(0 0 9px rgba(var(--o),.45));
}
.roundbar__of{ font-size:.78rem; color:var(--dim); }
.roundbar__of b{ color:var(--or-hi); font-size:.92rem; }


@media (max-width: 560px){
  .roundbar__of{ width:100%; }
}

/*  ตัวเลขสามช่องในแผงผล — ป้ายเล็กบน เลขใหญ่ล่าง อ่านเทียบกันได้แถวเดียว
    ⚠ เขียนแยกจาก .rescard__meta เพราะ JS เป็นคนสร้าง .resnum ทีหลัง  */
.rescard__meta:empty{ display:none; border:0; }