/* กัน layout เบี้ยวใน Chrome – ให้เนื้อหาอยู่กลางจอ */
html, body {
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  display: block;
}
/* container หลักของหน้า share */
.share-page-wrap {
  display: block;
  width: 100%;
}
.share-page-inner {
  display: block;
  width: 100%;
  max-width: 72rem;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/* Wheel container & arrow – responsive ทุกอุปกรณ์ */
.contain {
  margin: 0 auto;
  text-align: center;
  position: relative;
  padding-top: 1rem;
}
@media (min-width: 640px) {
  .contain { padding-top: 1.5rem; }
}
@media (min-width: 768px) {
  .contain { padding-top: 2rem; }
}

.contain--center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 0;
}

/* วงล้อ scale ตาม viewport */
.wheel-wrap {
  max-height: 85vmin;
}
.wheel-canvas {
  object-fit: contain;
}

.pointer {
  position: absolute;
  left: 50%;
  top: 4px;
  transform: translate(-50%, -50%);
  z-index: 10;
  pointer-events: none;
}
@media (min-width: 640px) {
  .pointer { top: 6px; }
}
@media (min-width: 768px) {
  .pointer { top: 8px; }
}

/* Scrollbar (dark theme) */
body::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

body::-webkit-scrollbar-track {
  background: #0f172a;
}

body::-webkit-scrollbar-thumb {
  background: #334155;
  border-radius: 4px;
}

body::-webkit-scrollbar-thumb:hover {
  background: #475569;
}

/* ปุ่มแนบลิ้ง - สีเหลือง เด้งๆ */
.btn-paste-link {
  animation: paste-link-bounce 2s ease-in-out infinite;
}

@keyframes paste-link-bounce {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}

/* รูปไอเทมในตารางรางวัล – วงกลมสีขาว */
.reward-item-circle {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
}
.reward-item-img {
  width: 2.75rem;
  height: 2.75rem;
  object-fit: contain;
}

/* SweetAlert overlay */
.swal2-container.swal2-shown {
  background-color: rgba(0, 0, 0, 0.5);
}