/* ---------- BASE ---------- */
body{
  background:
  radial-gradient(rgba(255,213,74,.55) 1px, transparent 1px),
  linear-gradient(#FFFBEA,#FFF2C9);
  background-size: 18px 18px, 100% 100%;
  background-attachment: fixed;
  font-family: "SolaimanLipi", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  perspective: 1200px; /* 3D perspective context */
}
.dark body{
  background:
  radial-gradient(rgba(148,163,184,.22) 1px, transparent 1px),
  linear-gradient(#0f172a,#0b1223);
  background-size: 18px 18px, 100% 100%;
  perspective: 1200px;
}

.form-input{
  width:100%;
  border-radius: 0.75rem;
  padding: 0.65rem 0.8rem;
  border: 1px solid #e5e7eb;
  background: #fff;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.form-input:focus{
  outline: none;
  border-color: #22c55e;
  box-shadow: 0 0 0 3px rgba(34,197,94,.18);
}
.dark .form-input{ background:#0f172a; color:#e2e8f0; border-color:#1f2937; }
.dark .form-input:focus{ border-color:#34d399; box-shadow: 0 0 0 3px rgba(52,211,153,.18); }

/* ---------- WHEEL ---------- */
.wheel-surface{
  background:
  conic-gradient(
    from -90deg,
    #FFE7A1 0deg, #FFE7A1 45deg,
    #FFD36E 45deg, #FFD36E 90deg,
    #FFC247 90deg, #FFC247 135deg,
    #FFB027 135deg, #FFB027 180deg,
    #FFE7A1 180deg, #FFE7A1 225deg,
    #FFD36E 225deg, #FFD36E 270deg,
    #FFC247 270deg, #FFC247 315deg,
    #FFB027 315deg, #FFB027 360deg
    );
  position: relative;
  box-shadow:
  inset 0 0 0 10px rgba(255,255,255,.7),
  0 18px 44px rgba(255,180,0,.28);
  transform-style: preserve-3d;
}
.dark .wheel-surface{
  background:
  conic-gradient(
    from -90deg,
    #334155 0deg, #334155 45deg,
    #283548 45deg, #283548 90deg,
    #253247 90deg, #253247 135deg,
    #1e2a40 135deg, #1e2a40 180deg,
    #334155 180deg, #334155 225deg,
    #283548 225deg, #283548 270deg,
    #253247 270deg, #253247 315deg,
    #1e2a40 315deg, #1e2a40 360deg
    );
  box-shadow:
  inset 0 0 0 10px rgba(255,255,255,.06),
  0 18px 44px rgba(0,0,0,.45);
}
.inner-ring{ position:absolute; inset:22px; border-radius:9999px; box-shadow: inset 0 0 0 2px rgba(0,0,0,.06), inset 0 0 26px rgba(0,0,0,.1); background: radial-gradient(ellipse at center, rgba(255,255,255,.55), rgba(255,255,255,.0) 60%); transform: translateZ(12px); }
.dark .inner-ring{ box-shadow: inset 0 0 0 2px rgba(148,163,184,.2), inset 0 0 26px rgba(0,0,0,.4); background: radial-gradient(ellipse at center, rgba(148,163,184,.08), rgba(0,0,0,0) 60%); }

/* HIDE tick points completely */
.tick{ display:none !important; }

/* ---------- HAND (🤚 emoji) ---------- */
#handCursor{
  position:absolute; width:55px; height:55px; z-index:40; pointer-events:none; display:none;
  transform: translate(-50%,-50%) translateZ(60px);
  transition: left .22s cubic-bezier(.22,.61,.36,1), top .22s cubic-bezier(.22,.61,.36,1);
}
#handCursor .bubble{
  width:55px; height:55px; border-radius:9999px; display:flex; align-items:center; justify-content:center;
  background: radial-gradient(circle at 35% 30%, #ffffff 0%, #f6f7fb 55%, #eef0f6 100%);
  border:2px solid #e6e8ec; box-shadow:0 12px 26px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.7);
  position:relative; 
  animation: wag 2.2s ease-in-out infinite, heart 1.05s cubic-bezier(.22,.61,.36,1) infinite;
}
.dark #handCursor .bubble{ background: radial-gradient(circle at 35% 30%, #0e1527 0%, #0b1223 60%, #091021 100%); color:#e2e8f0; border-color:#1f2937; box-shadow:0 12px 28px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06); }
#handCursor .emoji-hand{ font-size:34px; line-height:1; display:inline-block; transform: translateY(1px); }

.target-active{ outline:4px solid #22c55e; outline-offset:2px; }

/* ---------- COIN ---------- */
.coin{
  position:relative; border-radius:9999px; height:52px; display:flex; align-items:center; justify-content:center;
  font-weight:800; letter-spacing:.2px; transition: transform .12s ease, box-shadow .12s ease, border-color .2s ease, background .2s ease;
  border:1px solid #e5b300; color:#7a4f00;
  background:
  radial-gradient(circle at 30% 30%, rgba(255,255,255,.85), rgba(255,255,255,0) 40%),
  radial-gradient(circle at 70% 70%, rgba(255,225,120,.9), rgba(255,225,120,0) 40%),
  linear-gradient(#FFDF6A,#FFC839);
  box-shadow:
  inset 0 2px 0 rgba(255,255,255,.7),
  inset 0 -2px 0 rgba(0,0,0,.08),
  0 6px 16px rgba(0,0,0,.14);
  transform: translateZ(22px);
}
.coin:active{ transform: translateZ(22px) translateY(1px) scale(.98); }
.coin[data-selected="true"]{
  border-color:#22c55e;
  box-shadow:
  inset 0 2px 0 rgba(255,255,255,.8),
  inset 0 -2px 0 rgba(0,0,0,.1),
  0 10px 22px rgba(16,185,129,.25);
  outline: 3px solid rgba(34,197,94,.25); outline-offset: 2px; animation: pulseRing 1.4s ease-out;
}
.dark .coin{ border-color:#a16207; color:#f8fafc; background:
  radial-gradient(circle at 30% 30%, rgba(255,255,255,.15), rgba(255,255,255,0) 40%),
  radial-gradient(circle at 70% 70%, rgba(234,179,8,.2), rgba(234,179,8,0) 40%),
  linear-gradient(#eab308,#a16207);
  box-shadow:
  inset 0 2px 0 rgba(255,255,255,.08),
  inset 0 -2px 0 rgba(0,0,0,.35),
  0 10px 22px rgba(0,0,0,.45);
}

/* ---------- CARD (3D) ---------- */
.card{ 
  background: rgba(255,255,255,.92); 
  border-radius: 1rem;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 10px 28px rgba(0,0,0,.10), 0 1px 0 rgba(255,255,255,.8) inset;
  backdrop-filter: blur(8px);
  transform-style: preserve-3d;
  transform: translateZ(0);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  will-change: transform;
  position: relative;
}
.card::after{ content:''; position:absolute; inset:-1px; border-radius: inherit; pointer-events:none; box-shadow: 0 30px 60px rgba(0,0,0,.18), 0 12px 20px rgba(0,0,0,.08); opacity:.0; transition: opacity .18s ease; }
.card::before{ content:''; position:absolute; inset:0; border-radius: inherit; pointer-events:none; background: radial-gradient(400px 200px at var(--glx,50%) var(--gly,0%), rgba(255,255,255,.35), rgba(255,255,255,0) 60%); mix-blend-mode: screen; opacity:.0; transition: opacity .18s ease; }
.card.tilt-3d:hover{ transform: translateZ(24px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-6px) scale(1.01); box-shadow: 0 22px 46px rgba(0,0,0,.16); }
.card.tilt-3d:hover::after{ opacity:.85; }
.card.tilt-3d:hover::before{ opacity:.6; }
.card:active{ transform: translateZ(18px) translateY(-2px) scale(.999); }
.dark .card{ background: rgba(2,6,23,.72); border:1px solid rgba(148,163,184,.18); box-shadow: 0 12px 34px rgba(0,0,0,.55); }

.scrollbar-thin::-webkit-scrollbar{height:6px;width:6px;} 
.scrollbar-thin::-webkit-scrollbar-thumb{background:#d2d6dc;border-radius:6px;} 
.dark .scrollbar-thin::-webkit-scrollbar-thumb{background:#475569;}

.radio-pill input{ display:none; }
.radio-pill label{
  display:flex; align-items:center; gap:.5rem; 
  border:1px solid #e5e7eb; background:#fff;
  padding:.65rem .85rem; border-radius:.9rem; box-shadow:0 6px 14px rgba(0,0,0,.06);
  cursor:pointer; transition:transform .16s ease, box-shadow .16s ease, border-color .2s ease, background-color .2s ease; user-select:none;
  position:relative; transform-style: preserve-3d;
}
.radio-pill label:hover{ transform: translateY(-1px) translateZ(8px); box-shadow:0 12px 22px rgba(0,0,0,.10); }
.radio-pill input:checked + label{ border-color:#22c55e; box-shadow:0 10px 22px rgba(16,185,129,.18); background:linear-gradient(0deg, rgba(34,197,94,.06), #fff 60%); }
.radio-pill .bet-badge{
  position:absolute; top:-10px; right:-10px; font-size:11px; padding:2px 6px; border-radius:9999px;
  background:#22c55e; color:#fff; border:1px solid rgba(0,0,0,.08); display:none;
  transform: translateZ(20px);
}
.radio-pill label.has-bet .bet-badge{ display:inline-block; }

.dark .radio-pill label{ background:#0f172a; border-color:#1f2937; color:#e2e8f0; box-shadow: 0 8px 18px rgba(0,0,0,.35); }
.dark .radio-pill input:checked + label{ border-color:#34d399; background: linear-gradient(0deg, rgba(34,197,94,.14), #0b1223 70%); box-shadow: 0 10px 24px rgba(16,185,129,.25); }

.menu-panel{ display:none; } .menu-group:hover .menu-panel{ display:block; }

/* ---------- MODAL (3D) ---------- */
dialog{ z-index:80; }
#winModal{ z-index:90; }
dialog::backdrop{ background: radial-gradient(ellipse at 50% 20%, rgba(0,0,0,.55), rgba(0,0,0,.75)); backdrop-filter: blur(2.5px); }

.modal-card{
  animation: popIn .2s ease-out; border-radius: 1rem; overflow:hidden;
  background: rgba(255,255,255,.98);
  border:1px solid rgba(0,0,0,.06);
  color:#0f172a;
  box-shadow: 0 26px 56px rgba(0,0,0,.22), 0 2px 0 rgba(255,255,255,.9) inset;
  transform: translateZ(40px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform .18s ease, box-shadow .18s ease;
  position: relative;
}
.modal-card::before{ content:''; position:absolute; inset:0; pointer-events:none; border-radius: inherit; background: radial-gradient(600px 260px at var(--glx,50%) -10%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%); opacity:.0; transition: opacity .18s ease; mix-blend-mode: screen; }
.modal-card:hover{ transform: translateZ(46px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); box-shadow: 0 32px 64px rgba(0,0,0,.28); }
.modal-card:hover::before{ opacity:.5; }

.dark .modal-card{ background: rgba(2,6,23,.95); border-color:#1f2937; color:#e2e8f0; box-shadow: 0 32px 72px rgba(0,0,0,.65); }
.modal-head{ background: linear-gradient(90deg,#fff7cc,#ffe585); border-bottom:1px solid rgba(0,0,0,.08); color:#0f172a; transform: translateZ(6px); }
.dark .modal-head{ background: linear-gradient(90deg,#0f172a,#1f2b45); border-bottom-color:#263044; color:#e2e8f0; }

.section-head{ border-bottom: 1px solid rgba(224,177,0,.38); box-shadow: inset 0 -1px 0 rgba(0,0,0,.035); transform: translateZ(2px); }
.dark .section-head{ border-bottom: 1px solid #334155; box-shadow: inset 0 -1px 0 rgba(0,0,0,.35); }

.table-wrap {
  overflow-x: auto;
  transform: translateZ(1px);
  max-height: 500px;
}
.table{ min-width: 560px; border-collapse: separate; border-spacing:0; }
.table thead th{ position:sticky; top:0; backdrop-filter: blur(6px); background: rgba(255,255,255,.9); color:#334155; border-bottom:1px solid rgba(0,0,0,.08); }
.dark .table thead th{ background: rgba(15,23,42,.9); color:#cbd5e1; border-bottom-color:#334155; }
.table th, .table td{ padding:.5rem .4rem; }
.table tbody tr{ border-bottom:1px solid rgba(0,0,0,.06); }
.table tbody tr:nth-child(even){ background: rgba(0,0,0,.025); }
.dark .table tbody tr{ border-bottom-color:#263044; }
.dark .table tbody tr:nth-child(even){ background: rgba(148,163,184,.06); }
.table tbody td{ border-right:1px dashed rgba(0,0,0,.06); }
.table tbody td:last-child{ border-right:0; }
.dark .table tbody td{ border-right-color:#2a3a52; }

.slot-badge{
  position:absolute; top:-8px; right:-8px; font-size:10px; line-height:1; padding:2px 6px; border-radius:9999px;
  background:#16a34a; color:#fff; border:1px solid rgba(0,0,0,.25); display:none;
  transform: translateZ(20px);
}
.slot-has-bet .slot-badge{ display:inline-block; }

/* ===== Wheel slots: 2px border, 3D, above pointer ===== */
.wheel-btn{
  position: relative;
  z-index: 60;                 /* slots above hand */
  border-width: 2px !important;
  transform: translateZ(34px);
  box-shadow:
  0 10px 18px rgba(0,0,0,.18),
  inset 0 1px 0 rgba(255,255,255,.75),
  inset 0 -2px 0 rgba(0,0,0,.06);
  transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
  background:
  radial-gradient(circle at 35% 30%, rgba(255,255,255,.92), rgba(255,255,255,0) 42%),
  linear-gradient(#ffffff,#f5f7fb);
}
.dark .wheel-btn{
  box-shadow:
  0 12px 22px rgba(0,0,0,.50),
  inset 0 1px 0 rgba(255,255,255,.06),
  inset 0 -2px 0 rgba(0,0,0,.35);
  background:
  radial-gradient(circle at 35% 30%, rgba(255,255,255,.10), rgba(255,255,255,0) 42%),
  linear-gradient(#0f172a,#0b1223);
}
.wheel-btn:hover{ transform: translateZ(40px) scale(1.04); box-shadow: 0 16px 26px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.85); }
.wheel-btn:active{ transform: translateZ(32px) scale(.98); }

/* type-based 2px border + soft glow */
.slot-toy{   border-color:#3b82f6; filter: drop-shadow(0 4px 8px rgba(59,130,246,.25)); }
.slot-food{  border-color:#22c55e; filter: drop-shadow(0 4px 8px rgba(34,197,94,.25)); }
.dark .slot-toy{  border-color:#60a5fa; filter: drop-shadow(0 4px 8px rgba(96,165,250,.25)); }
.dark .slot-food{ border-color:#34d399; filter: drop-shadow(0 4px 8px rgba(52,211,153,.25)); }

/* emoji bolder look */
.slot-emoji{
  font-size: 22px;
  line-height: 1;
  text-shadow: 0 1px 0 rgba(255,255,255,.8), 0 0 10px rgba(0,0,0,.06);
}
.dark .slot-emoji{ text-shadow: 0 1px 0 rgba(255,255,255,.10), 0 0 10px rgba(0,0,0,.45); }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .card,.modal-card{ transition: none !important; transform: none !important; }
  .card::before,.card::after,.modal-card::before{ display:none !important; }
}
.text-error {
  padding-left: 5px;
  font-size: 12px;
  color: #ff5c5c;
  margin-bottom: 5px;
}
.px-custom {
  padding: 2px 5px !important;
}
.modal-toast {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #1f2937; /* dark gray */
  color: #fff;
  border-radius: 10px;
  padding: 8px 12px;
  margin-bottom: 10px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.3);
  opacity: 0;
  transform: translateX(120%);
  transition: all 0.3s ease;
  pointer-events: all;
  font-family: 'SolaimanLipi', sans-serif;
}

.modal-toast.show {
  opacity: 1;
  transform: translateX(0);
}

.modal-toast button {
  background: none;
  border: none;
  cursor: pointer;
  color: #fff;
}

.pill {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
}

.pill.success { color: #4ade80; }
.pill.error { color: #f87171; }
.pill.info { color: #60a5fa; }
.pill.action { color: #fbbf24; }