/* ==========================================================================
   12Tails:Remastered - Modern Refactoring (Custom Overrides)
   ========================================================================== */

/*SRVSTATUS*/
/* Marker above is load-bearing: tools/apply_status.py treats any page linking
   this file as already carrying the server-status CSS and skips its inline
   <style> injection. The .tab-b a.srv-live rules below ARE that block.
   Keep the marker if these rules move. */

/* --- Server Status Modernization (แก้ Layout ให้เป๊ะตามต้นฉบับ 100%) --- */
.tab-b a.srv-live {
    display: flex;
    align-items: center;
    gap: 8px; /* คืนค่าดั้งเดิม: ระยะห่างไอคอนกับข้อความ */
    text-decoration: none;
    color: inherit;
    padding: 8px 4px; /* คืนค่าดั้งเดิม: ระยะขอบ ป้องกันกล่องทะลุ */
    border-radius: 8px;
    transition: background-color 0.25s ease, color 0.2s ease, transform 0.2s ease;
}

/* เอฟเฟกต์เมื่อเอาเมาส์ชี้ (คงความนุ่มนวลไว้) */
.tab-b a.srv-live:hover {
    color: #f6c454;
    background-color: rgba(246, 196, 84, 0.08); 
    transform: translateX(4px); 
}

.tab-b a.srv-live .blk img {
    width: 26px; /* คืนค่าดั้งเดิม: ขนาดรูปไอคอน */
    height: 26px; /* คืนค่าดั้งเดิม: ขนาดรูปไอคอน */
    display: block;
    transition: transform 0.2s ease;
}

.tab-b a.srv-live:hover .blk img {
    transform: scale(1.1); 
}

.tab-b a.srv-live span small {
    display: block;
}

/* ป้องกันตัวหนังสือและเวลาตกบรรทัดเด็ดขาด */
.tab-b a.srv-live .right {
    white-space: nowrap; 
}
.tab-b a.srv-live span {
    white-space: nowrap;
}

/* ปุ่ม Back-to-top */
#toTop {
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
}
#toTop.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
/* ============================================================
   ดีไซน์กล่อง Pre-register (OG Theme + Fantasy RPG UI - แยกบรรทัด)
   ============================================================ */
.prereg-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
.dimmed-ann {
  opacity: 0.7;
  margin: 0 !important;
  transition: opacity 0.3s;
}
.dimmed-ann:hover {
  opacity: 1; 
}

/* กล่องพื้นหลังใหญ่ พร้อมลวดลายมุมขอบ (Corner Brackets) */
.highlight-ann {
  margin: 0 0 20px 0 !important;
  text-align: center;
  padding: 16px 20px !important;
  background: linear-gradient(180deg, rgba(65, 50, 35, 0.7) 0%, rgba(45, 30, 20, 0.85) 100%);
  box-shadow: inset 0 0 15px rgba(0,0,0,0.4), 0 4px 15px rgba(0,0,0,0.5);
  position: relative;
  border-top: 1px solid #7a5c38;
  border-bottom: 1px solid #7a5c38;
}
.highlight-ann::before, .highlight-ann::after {
  content: ''; position: absolute; width: 12px; height: 12px;
  border: 2px solid #8a7c5c;
  pointer-events: none;
}
.highlight-ann::before { top: 8px; left: 8px; border-right: none; border-bottom: none; }
.highlight-ann::after { bottom: 8px; right: 8px; border-left: none; border-top: none; }

/* โครงสร้างแถวบน (ปุ่ม + ตัวเลขวิ่ง) */
.prereg-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 15px;
  padding: 5px 0;
}

.prereg-left-box {
  flex: 0 0 auto;
}

.prereg-middle-box {
  width: 100%;
  margin-bottom: 20px;
}

.prereg-right-box {
  flex: 0 0 auto;
}

.prereg-digit-wrapper {
  display: flex;
  justify-content: center;
  gap: 4px;
}

/* การ์ดตัวเลข (ขยายสเกลฟอนต์และกรอบให้ใหญ่และโดดเด่นขึ้นอีกตามที่ต้องการ) */
.digit-card {
  background: 
    repeating-linear-gradient(
      to bottom,
      transparent,
      transparent 3px,
      rgba(0,0,0,0.15) 4px,
      rgba(0,0,0,0.15) 5px
    ),
    linear-gradient(180deg, #5c3e21 0%, #2b1d0f 100%);
  border: 2px solid #1a1007;
  border-radius: 4px;
  position: relative;
  color: #f6c454;
  font-family: 'Almendra', serif;
  font-size: 3.4rem; /* ขยายขนาดตัวเลขให้ใหญ่ขึ้น */
  font-weight: 700;
  padding: 8px 18px; /* เพิ่มพื้นที่กรอบไม้ให้กว้างขึ้น */
  box-shadow: 0 4px 8px rgba(0,0,0,0.6), inset 0 0 8px rgba(0,0,0,0.8);
  line-height: 1;
  min-width: 58px; /* ขยายความกว้างขั้นต่ำของแผ่นไม้ */
  text-align: center;
  text-shadow: 2px 2px 4px #000;
  perspective: 400px;
  overflow: hidden;
}
/* ขอบร่องไม้ด้านใน */
.digit-card::before {
  content: ''; position: absolute; z-index: 0;
  top: 2px; left: 2px; right: 2px; bottom: 2px;
  border: 1px solid rgba(0,0,0,0.5);
  border-radius: 2px;
  pointer-events: none;
}
/* หัวตะปู 4 มุม มิติคมชัดสมจริงตามสไตล์ RPG คลาสสิก */
.digit-card::after {
  content: ''; position: absolute; z-index: 0;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: 
    radial-gradient(circle at 4px 4px, #999 0.4px, #222 1.5px, #000 2px, transparent 2.5px),
    radial-gradient(circle at calc(100% - 4px) 4px, #999 0.4px, #222 1.5px, #000 2px, transparent 2.5px),
    radial-gradient(circle at 4px calc(100% - 4px), #999 0.4px, #222 1.5px, #000 2px, transparent 2.5px),
    radial-gradient(circle at calc(100% - 4px) calc(100% - 4px), #999 0.4px, #222 1.5px, #000 2px, transparent 2.5px);
  pointer-events: none;
}

.digit-card span {
  display: inline-block;
  position: relative;
  z-index: 1;
  transform-origin: bottom center; 
}

@keyframes flipPage {
  0% { transform: rotateX(75deg); opacity: 0.4; }
  100% { transform: rotateX(0deg); opacity: 1; }
}

/* ระบบหลอดสะสมพลัง Progress Bar (Gold & Sparkle Theme) */
.progress-bar-container {
  width: 100%;
  height: 24px; /* ปรับให้หนาขึ้นนิดนึงเพื่อรับแสง */
  background: #110c08; /* พื้นหลังหลอดเปล่าสีเข้ม */
  border: 2px solid #a37c44; /* ขอบโลหะทอง */
  border-radius: 12px;
  box-shadow: inset 0 4px 8px rgba(0,0,0,0.8), 0 0 4px rgba(255, 200, 100, 0.2);
  position: relative;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  /* ไล่เฉดสีทองสว่าง */
  background: linear-gradient(180deg, #fff2a8 0%, #ffc125 35%, #e08900 70%, #9e4b00 100%);
  box-shadow: inset 0 2px 4px rgba(255,255,255,0.7), 0 0 15px rgba(255, 180, 50, 0.8);
  width: 0%;
  border-radius: 10px;
  transition: width 1.5s cubic-bezier(0.1, 0.8, 0.25, 1);
  position: relative;
}

/* ลูกเล่นคลื่นแสงวิ่งผ่านหลอด (Sweep Animation) */
.progress-bar-fill::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  background: linear-gradient(
    90deg, 
    transparent 0%, 
    rgba(255, 255, 255, 0) 20%, 
    rgba(255, 255, 255, 0.7) 50%, 
    rgba(255, 255, 255, 0) 80%, 
    transparent 100%
  );
  animation: goldShine 2.5s infinite linear;
  border-radius: 10px;
  z-index: 1;
}

/* แสงวาบสว่างวิ๊งๆ ที่ปลายหลอด (Glowing Tip) */
.progress-bar-fill::after {
  content: '';
  position: absolute;
  top: -5px; 
  right: -8px; /* ให้ดวงแสงเกาะอยู่ตรงปลายหลอดพอดี */
  width: 20px;
  height: calc(100% + 10px);
  background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,230,120,0.9) 30%, transparent 70%);
  box-shadow: 0 0 12px 6px rgba(255, 200, 50, 0.7);
  border-radius: 50%;
  z-index: 2;
}

.progress-bar-text {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Cinzel', sans-serif;
  font-size: 0.8rem;
  font-weight: 900; /* ปรับให้ตัวหนาขึ้น */
  color: #fff;
  /* ปรับเงาให้เข้มและฟุ้งขึ้น เพื่อให้ตัวหนังสืออ่านง่ายแม้พื้นหลังจะเป็นสีทองสว่าง */
  text-shadow: 1px 1px 3px #000, -1px -1px 3px #000, 0 0 5px #000;
  letter-spacing: 0.05em;
  pointer-events: none;
  z-index: 3; /* ให้ตัวหนังสืออยู่บนสุด เหนือแสง */
}

/* Keyframes สำหรับคลื่นแสงวิ่ง */
@keyframes goldShine {
  0% { transform: translateX(-150%); }
  100% { transform: translateX(200%); }
}

/* ============================================================
   Milestone: Guild Quest Board (แบบแถวเดี่ยว เรียบหรูคลาสสิก)
   ============================================================ */
.quest-board-section {
  padding-top: 5px;
  border-top: 1px dashed rgba(138, 124, 92, 0.25);
}
.qb-title {
  font-family: 'Cinzel', 'Noto Serif Thai', serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: #cdbb95;
  letter-spacing: 0.08em;
  margin-bottom: 14px;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}
.quest-board {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 0;
  width: 100%;
}
.quest-paper {
  flex: 1;
  max-width: 18%;
  height: 95px;
  background: #efe4c8;
  background-image: linear-gradient(transparent 85%, rgba(180, 150, 110, 0.3) 100%);
  border: 1px solid #c5b48c;
  box-shadow: 2px 3px 6px rgba(0,0,0,0.4);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 4px 4px 4px;
  transition: all 0.25s ease;
  transform: rotate(0deg) !important;
  margin: 0 !important;
}
.quest-paper:hover { 
  transform: translateY(-4px) !important; 
  z-index: 10; 
  box-shadow: 3px 6px 12px rgba(0,0,0,0.6); 
}

.q-pin {
  position: absolute;
  top: 4px; left: 50%;
  transform: translateX(-50%);
  width: 8px; height: 8px;
  background: radial-gradient(circle at 30% 30%, #a8392b, #4a1510);
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.q-target {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 0.85rem;
  color: #7d281d;
  border-bottom: 1px solid rgba(200, 180, 140, 0.5);
  padding-bottom: 2px;
  margin-bottom: 6px;
  width: 100%;
}
.q-reward {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.q-reward img {
  width: 26px; height: 26px;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
}
.q-reward span {
  font-family: 'Noto Serif Thai', serif;
  font-size: 0.65rem;
  color: #3a2a1c;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 85px;
}

/* ตราประทับขนาดมินิมอล ไม่ทับซ้อน */
.quest-stamp {
  position: absolute;
  top: 45%; left: 50%;
  transform: translate(-50%, -50%) rotate(-12deg);
  color: #a8392b;
  font-family: 'Cinzel', serif;
  font-weight: 900;
  font-size: 0.65rem;
  border: 1.5px solid #a8392b;
  padding: 1px 4px;
  border-radius: 2px;
  opacity: 0;
  pointer-events: none;
  background: rgba(239, 228, 200, 0.9);
  white-space: nowrap;
}

.q-cleared .quest-stamp {
  animation: stampIn 0.35s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes stampIn {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(-25deg) scale(2); }
  100% { opacity: 0.9; transform: translate(-50%, -50%) rotate(-12deg) scale(1); }
}

/* ============================================================
   ปุ่มสมัครสมาชิกล่วงหน้า (Fantasy RPG Premium Button - ตรงตามแบบ)
   ============================================================ */
.btn-prereg-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  /* พื้นหลังไล่สีโทนน้ำตาลเงา (Glossy Brown) */
  background: linear-gradient(180deg, #874927 0%, #5a2913 45%, #3d1a08 100%);
  border: 1px solid #1a0a03; /* ขอบมืดด้านนอกสุด */
  border-radius: 6px;
  color: #ebd39b; /* ตัวอักษรสีทองอ่อน */
  font-family: 'Noto Serif Thai', serif;
  font-weight: 700;
  font-size: 1.25rem;
  padding: 12px 35px;
  text-decoration: none;
  /* การซ้อนชาโดว์ 5 ชั้นเพื่อทำมิติขอบนูน แสงตกกระทบ และออร่าเรืองแสงรอบปุ่ม */
  box-shadow: 
    inset 0 1px 1px #d9a773, 
    inset 0 -2px 4px rgba(0,0,0,0.6),
    0 0 0 1px #916135,
    0 0 18px 4px rgba(224, 164, 85, 0.45),
    0 6px 12px rgba(0,0,0,0.7);
  transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
  text-shadow: 2px 2px 4px rgba(0,0,0,0.9), 0 0 10px rgba(235, 211, 155, 0.4);
  white-space: nowrap;
}

/* ไอคอนรูปดาวด้านข้างปุ่ม */
.btn-prereg-cta::before, .btn-prereg-cta::after {
  content: '✦';
  color: #e5b967;
  font-size: 1.3rem;
  opacity: 0.95;
  text-shadow: 0 0 8px rgba(229, 185, 103, 0.8);
}

/* เอฟเฟกต์ตอนเอาเมาส์ชี้ (ปุ่มสว่างขึ้นและออร่ากระจายตัว) */
.btn-prereg-cta:hover {
  background: linear-gradient(180deg, #9b5731 0%, #6e3519 45%, #4a210b 100%);
  box-shadow: 
    inset 0 1px 2px #f2c79a, 
    inset 0 -2px 4px rgba(0,0,0,0.6),
    0 0 0 1px #b07a47,
    0 0 25px 6px rgba(224, 164, 85, 0.65),
    0 8px 16px rgba(0,0,0,0.8);
  transform: translateY(-2px);
  color: #fff4d4;
}
.btn-prereg-cta::before, .btn-prereg-cta::after {
  content: '✦';
  color: #f6c454;
  font-size: 0.9rem;
  opacity: 0.8;
}
.btn-prereg-cta:hover {
  background: linear-gradient(180deg, #a62e1f 0%, #731e13 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(246, 196, 84, 0.2), inset 0 0 8px rgba(246, 196, 84, 0.4);
  border-color: #fff;
}

/* Responsive Handling */
@media(max-width: 900px) {
  /* ถอด flex-direction: column ออก เพื่อให้ปุ่มและตัวเลขอยู่บรรทัดเดียวกันเสมอ */
  .quest-board { flex-wrap: wrap; justify-content: center; gap: 8px; }
  .quest-paper { max-width: 30%; flex: 0 0 30%; }
}
@media(max-width: 768px) { 
  .prereg-grid { grid-template-columns: 1fr; } 
  .quest-paper { max-width: 45%; flex: 0 0 45%; }
}
/* บังคับย่อสเกลปุ่มและตัวเลขลงเมื่อเปิดบนหน้าจอมือถือขนาดเล็ก เพื่อไม่ให้ตกบรรทัด */
@media(max-width: 550px) {
  .digit-card { font-size: 1.6rem; min-width: 30px; padding: 4px 6px; }
  .btn-prereg-cta { padding: 8px 12px; font-size: 0.85rem; gap: 4px; }
  .btn-prereg-cta::before, .btn-prereg-cta::after { font-size: 0.75rem; }
}
/* ============================================================
   CSS โครงสร้างหลักของ Preregister Widget (จากต้นฉบับลูกค้า)
   ============================================================ */
.widget { width:100%; max-width:720px; background:linear-gradient(180deg,#2b1d0e 0%,#241809 100%); border:1px solid #6b5227; border-radius:14px; padding:22px 24px 26px; box-shadow:0 8px 30px rgba(0,0,0,0.6); margin: 0 auto; }

.cta-row { text-align:center; margin:2px 0 8px; }
.cta { display:inline-block; font-family:Cinzel,serif; font-size:18px; font-weight:700; letter-spacing:2px; color:#2a1c0a; text-decoration:none; background:linear-gradient(180deg, #ffe9a8 0%, #e0b448 55%, #c9962e 100%); border:2px solid #8a6820; border-radius:12px; padding:13px 42px; box-shadow:0 0 18px rgba(243,213,133,0.35), 0 4px 12px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.5); animation:ctaBreathe 3.5s ease-in-out infinite; cursor:pointer; }
.cta:hover { filter:brightness(1.08); }
.cta small { display:block; font-family:Cinzel,serif; font-size:11px; font-weight:700; letter-spacing:3px; margin-top:2px; }
@keyframes ctaBreathe { 0%,100%{box-shadow:0 0 14px rgba(243,213,133,0.3), 0 4px 12px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.5)} 50%{box-shadow:0 0 26px rgba(243,213,133,0.6), 0 4px 12px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.5)} }

.lbl { font-family:Cinzel,'Noto Serif Thai',serif; font-size:14px; color:#f3d585; letter-spacing:2px; text-align:center; margin-top:2px; }

.spot-row { display:flex; align-items:center; justify-content:center; gap:20px; margin:12px 0 6px; }
.num-wrap { text-align:center; min-width:150px; }
.num { font-family:Cinzel,serif; font-size:48px; font-weight:700; color:#f3d585; text-shadow:0 2px 12px rgba(243,213,133,0.3); line-height:1; }
.unit { font-size:14px; color:#a08c62; margin-top:2px; }
.spot-card { width:168px; background:#1c1309; border:1px solid #4a3a1c; border-radius:10px; padding:10px 12px; display:flex; align-items:center; gap:10px; }
.av { width:38px; height:38px; border-radius:50%; border:2px solid #c9a44c; display:flex; align-items:center; justify-content:center; font-family:Cinzel,serif; font-weight:700; font-size:14px; color:#241809; box-shadow:0 2px 6px rgba(0,0,0,0.5); flex:none; }
.spot-kick { font-size:10px; letter-spacing:1px; color:#7a6845; font-family:Cinzel,serif; }
.spot-name { font-size:13.5px; color:#f3d585; line-height:1.2; }
.spot-no { font-size:11px; color:#a08c62; }
.fade { transition:opacity 0.45s ease, transform 0.45s ease; }
.fade.out { opacity:0; transform:translateY(6px); }

.progress-container { position:relative; width:100%; height:22px; background:radial-gradient(circle, #241a0c, #120c05); border-radius:30px; box-shadow:0 8px 20px rgba(0,0,0,0.5); box-sizing:border-box; border:1px solid #5a4520; margin-top:16px; }
.progress-clip { position:absolute; inset:0; border-radius:30px; overflow:hidden; }
.progress-bar { position:absolute; top:0; left:0; height:100%; width:0%; background:linear-gradient(90deg, #a3721e, #f3d585); border-radius:30px; transition:width 1.2s ease-in-out; box-shadow:0 0 15px #d9b45c, 0 0 30px #f3d585; }
.progress-bar::before { content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:200%; height:200%; background:radial-gradient(circle, rgba(255,244,210,0.18), transparent); opacity:0.5; animation:ripple 3s infinite; }
.particles { position:absolute; inset:0; overflow:hidden; border-radius:30px; }
.particle { position:absolute; width:8px; height:8px; background:#ffedbb; clip-path:polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%); opacity:0.75; animation:float 5s infinite ease-in-out, twinkle 2.4s infinite ease-in-out; }
@keyframes ripple { 0%{transform:translate(-50%,-50%) scale(0.5); opacity:0.7} 100%{transform:translate(-50%,-50%) scale(1.5); opacity:0} }
@keyframes float { 0%{transform:translateY(0) translateX(0) rotate(0deg)} 50%{transform:translateY(-14px) translateX(10px) rotate(20deg)} 100%{transform:translateY(0) translateX(0) rotate(0deg)} }
@keyframes twinkle { 0%,100%{opacity:0.45; scale:0.8} 50%{opacity:0.95; scale:1.1} }
.particle:nth-child(1){ top:16%; left:9%; animation-delay:0s; }
.particle:nth-child(2){ top:34%; left:28%; animation-delay:1s; }
.particle:nth-child(3){ top:48%; left:19%; animation-delay:2s; }
.particle:nth-child(4){ top:60%; left:5%; animation-delay:1.5s; }
.particle:nth-child(5){ top:52%; left:32%; animation-delay:2.5s; }

.cp { position:absolute; top:50%; z-index:4; width:14px; height:14px; margin:-7px 0 0 -7px; transform:rotate(45deg); border-radius:2px; box-sizing:border-box; }
.cp.hit { background:linear-gradient(135deg, #ffedbb 0%, #e0b448 55%, #b58a2a 100%); border:2px solid #2a1c0a; box-shadow:0 0 10px rgba(243,213,133,0.8), 0 0 18px rgba(243,213,133,0.4); animation:cpPulse 3s ease-in-out infinite; }
.cp.hit::after { content:'✓'; position:absolute; left:50%; top:50%; transform:translate(-50%,-54%) rotate(-45deg); font-size:19px; font-weight:700; line-height:1; color:#ffffff; text-shadow:0 0 3px #2a1c0a, 0 0 6px #2a1c0a, 0 1px 2px rgba(0,0,0,0.9); }
.cp.dim { background:#171006; border:2px solid #4a3a1c; box-shadow:inset 0 0 5px rgba(0,0,0,0.8); }
@keyframes cpPulse { 0%,100%{box-shadow:0 0 8px rgba(243,213,133,0.7), 0 0 14px rgba(243,213,133,0.3)} 50%{box-shadow:0 0 14px rgba(243,213,133,1), 0 0 26px rgba(243,213,133,0.55)} }
.cp1{ left:10%; } .cp2{ left:30%; } .cp3{ left:50%; } .cp4{ left:70%; } .cp5{ left:90%; }

.ticks { position:relative; height:16px; margin-top:8px; font-size:11.5px; }
.ticks span { position:absolute; transform:translateX(-50%); }
.hit-t { color:#f3d585; font-weight:600; }
.nxt-t { color:#a08c62; }

.tiles { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-top:14px; }
.tile { text-align:center; border-radius:10px; padding:6px 5px 10px; }
.tile.on { background:#33240f; border:1px solid #c9a44c; box-shadow:0 0 14px rgba(201,164,76,0.28) inset; }

/* stage now hosts box + floating ITEM slot in the aura */
.stage { height:104px; display:flex; align-items:flex-end; justify-content:center; position:relative; }
.stage svg.boxsvg { position:relative; z-index:2; }

.stage svg.boxsvg { width:78px; height:78px; display:block; }
.item-slot {
  position:absolute; left:50%; top:6px; transform:translateX(-50%);
  width:64px; height:52px; z-index:5;
  display:flex; align-items:center; justify-content:center;
  animation:itemBob 4s ease-in-out infinite;
  filter:drop-shadow(0 6px 6px rgba(0,0,0,0.55));
}
.item-slot img { max-width:44px; max-height:44px; display:block; }
@keyframes itemBob { 0%,100%{ translate:0 0; } 50%{ translate:0 7px; } }
/* placeholder gem shown until real icons are supplied */
.ph-gem { width:30px; height:30px; transform:rotate(45deg); border-radius:5px; border:2px solid rgba(255,255,255,0.8); box-shadow:0 0 12px rgba(255,255,255,0.35), inset 0 0 8px rgba(255,255,255,0.4); }
/* item cluster: 5 icons piled like the reference server */
.cluster { position:relative; width:64px; height:52px; }
.cluster img { position:absolute; width:30px; height:30px; image-rendering:auto; filter:drop-shadow(0 2px 3px rgba(0,0,0,0.6)); }
.cluster .ci1 { left:2px;  top:16px; transform:rotate(-10deg); z-index:1; }
.cluster .ci2 { left:32px; top:14px; transform:rotate(8deg);  z-index:1; }
.cluster .ci3 { left:16px; top:18px; z-index:2; width:34px; height:34px; }
.cluster .ci4 { left:4px;  top:0px;  transform:rotate(-6deg); z-index:3; width:26px; height:26px; }
.cluster .ci5 { left:34px; top:2px;  transform:rotate(10deg); z-index:3; width:26px; height:26px; }
.cluster .ci6 { left:11px; top:-4px; transform:rotate(-4deg); z-index:0; width:42px; height:42px; }

@keyframes bounce  { 0%,100% { translate:0px 36px; } 50% { translate:0px 46px; } }
@keyframes bounce2 { 0%,100% { translate:0px 46px; } 50% { translate:0px 56px; } }
@keyframes umbral  { 0%,100% { stop-opacity:0.24; } 50% { stop-opacity:0.66; } }
@keyframes partciles { 0%,100% { translate:0px 16px; } 50% { translate:0px 6px; } }
.boxp { animation:partciles 4s ease-in-out infinite; }
.animatedStop { animation:umbral 4s infinite; }
.bounce  { animation:bounce 4s ease-in-out infinite; translate:0px 36px; }
.bounce2 { animation:bounce2 4s ease-in-out infinite; translate:0px 46px; animation-delay:0.5s; }
.pearl { animation:pearlShift 16s linear infinite; }
@keyframes pearlShift { 0%{filter:hue-rotate(0deg)} 50%{filter:hue-rotate(40deg)} 100%{filter:hue-rotate(0deg)} }

.t-st { font-family:Cinzel,serif; font-size:14px; font-weight:700; margin-top:2px; color:#c9a44c; }
.prisma-label { background:linear-gradient(90deg,#f0b0b0,#f3d9a0,#b8dcb8,#b0c8ec,#d0b8e8); -webkit-background-clip:text; background-clip:text; color:transparent; }

.rw-list { margin-top:6px; text-align:left; padding:0 2px; }
.rw-item { display:flex; justify-content:space-between; gap:4px; font-size:10.5px; line-height:1.55; color:#e8d8b0; border-bottom:1px dashed rgba(107,82,39,0.35); }
.rw-item:last-child { border-bottom:none; }
.rw-item .qty { color:#c9a44c; font-family:Cinzel,serif; font-size:10px; flex:none; }
.rw-item .nm { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.bind-note { text-align:center; font-size:11.5px; font-style:italic; color:#a08c62; margin-top:14px; }
.count-strip { display:flex; align-items:center; justify-content:center; gap:12px; margin-top:16px; background:#171006; border:1px solid #5a4520; border-radius:10px; padding:10px 14px; flex-wrap:wrap; }
.cd-lbl { font-size:13px; color:#cbb684; }
.cd-tba { font-family:Cinzel,serif; font-size:14px; color:#f3d585; letter-spacing:2px; }

.share-row { display:flex; justify-content:center; gap:10px; margin-top:12px; flex-wrap:wrap; }
.share-btn { display:flex; align-items:center; gap:6px; background:#33240f; border:1px solid #6b5227; color:#e8d8b0; font-size:12px; border-radius:8px; padding:7px 13px; cursor:pointer; font-family:'Noto Serif Thai',serif; }
.share-btn:hover { border-color:#c9a44c; color:#f3d585; }
.sb-ico { width:17px; height:17px; border-radius:4px; flex:none; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; color:#fff; font-family:sans-serif; }
.sb-ico svg { display:block; }
.fb { background:#1877f2; } .dc { background:#5865f2; } .link { background:#7a6845; }

.footnote { text-align:center; font-size:12px; color:#7a6845; margin-top:14px; line-height:1.7; }
.footnote .en { display:block; }

@media (max-width:600px) {
  .spot-row { flex-direction:column; gap:10px; }
  .num { font-size:40px; }
  .tiles { grid-template-columns:repeat(2,1fr); }
  .stage svg.boxsvg { width:70px; height:70px; }
}