/* ===================================================================
   Wheel.styles.css — Wheel mini-game page
   Left: bet controls + sector picker. Right: wheel machine + bet columns.
   The wheel disc is a conic-gradient; only the top half is visible.
   =================================================================== */
@import url('game-shared.css');

.how-btn { gap: 6px; }
.how-btn svg { width: 15px; height: 15px; color: var(--text-secondary); }

/* =====================================================
   LAYOUT
   ===================================================== */
.wheelpage {
  display: grid;
  grid-template-columns: 445px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

/* =====================================================
   LEFT: BET CONTROLS
   ===================================================== */
.wheelbet {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.wheelbet__card {
  padding: 18px;
  border-radius: var(--r-lg);
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
}

.wheelbet__label {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 12px;
}

/* --- amount input with currency dropdown --- */
.wheelbet__input {
  display: flex;
  align-items: center;
  height: 46px;
  border-radius: var(--r-sm);
  background: var(--bg-surface-2);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: border-color var(--t) var(--ease);
}

.wheelbet__input:focus-within { border-color: var(--accent-blue); }

.wheelbet__input input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0 14px;
  background: none;
  border: 0;
  font-size: 15px;
  font-weight: 700;
  outline: none;
}

.wheelbet__cur {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 100%;
  padding: 0 12px;
  border-left: 1px solid var(--border);
  background: var(--bg-surface-3);
  color: var(--text-secondary);
  transition: background-color var(--t) var(--ease);
}

.wheelbet__cur:hover { background: var(--bg-elevated); }
.wheelbet__cur svg { width: 13px; height: 13px; }

/* --- quick multipliers --- */
.wheelbet__quick {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.wheelbet__quick .btn {
  height: 42px;
  border-radius: var(--r-sm);
  background: var(--bg-surface-2);
  font-size: 14px;
}

.wheelbet__quick .btn:hover { background: var(--bg-surface-3); }

/* =====================================================
   SECTOR PICKER
   ===================================================== */
.sectors {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.sector {
  --sec-c: var(--accent-blue);
  position: relative;
  display: flex;
  align-items: center;
  height: 86px;
  padding: 0 14px;
  border-radius: var(--r-md);
  background: var(--bg-surface);
  border: 2px solid transparent;
  overflow: hidden;
  transition: border-color var(--t) var(--ease),
              background-color var(--t) var(--ease),
              transform var(--t) var(--ease);
}

.sector:hover {
  transform: translateY(-2px);
  background: var(--bg-surface-2);
  border-color: color-mix(in srgb, var(--sec-c) 50%, transparent);
}

.sector.is-active {
  border-color: var(--sec-c);
  background: color-mix(in srgb, var(--sec-c) 12%, var(--bg-surface));
}

.sector--blue { --sec-c: var(--accent-blue); }
.sector--green { --sec-c: var(--accent-green); }
.sector--red { --sec-c: var(--brand-red); }
.sector--gold { --sec-c: var(--accent-yellow); }

.sector__mult {
  position: relative;
  z-index: 1;
  font-size: 19px;
  font-weight: 800;
}

.sector__img {
  position: absolute;
  right: 6px;
  bottom: 0;
  width: 74px;
  height: 78px;
  object-fit: contain;
  filter: grayscale(.5) brightness(.85);
  transition: filter var(--t) var(--ease), transform var(--t) var(--ease);
}

.sector:hover .sector__img,
.sector.is-active .sector__img {
  filter: none;
  transform: scale(1.06);
}

/* --- actions --- */
.wheelbet__actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 110px;
  gap: 12px;
}

.wheelbet__actions .btn { border-radius: var(--r-md); }
.wheelbet__go { font-size: 15px; }

/* =====================================================
   RIGHT: WHEEL MACHINE
   ===================================================== */
.wheelstage {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.wheelmachine {
  position: relative;
  padding: 14px;
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, #1e1e23, #141417);
  border: 1px solid var(--border);
  overflow: hidden;
}

/* --- the visible half-wheel window --- */
.wheelmachine__frame {
  position: relative;
  height: 340px;
  border-radius: var(--r-md);
  background: linear-gradient(180deg, #2a2a31 0%, #1a1a1e 68%);
  overflow: hidden;
}

.wheel {
  position: absolute;
  top: 14px;
  left: 50%;
  width: 560px;
  height: 560px;
  transform: translateX(-50%);
}

/* Coloured sectors — conic gradient keeps this asset-free */
.wheel__disc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 14px solid #23232a;
  background: conic-gradient(
    #3b82f6 0deg 22.5deg,
    #ec1c3c 22.5deg 45deg,
    #2ecc71 45deg 67.5deg,
    #3b82f6 67.5deg 90deg,
    #ec1c3c 90deg 112.5deg,
    #2ecc71 112.5deg 135deg,
    #3b82f6 135deg 157.5deg,
    #ec1c3c 157.5deg 180deg,
    #2ecc71 180deg 202.5deg,
    #3b82f6 202.5deg 225deg,
    #ec1c3c 225deg 247.5deg,
    #2ecc71 247.5deg 270deg,
    #3b82f6 270deg 292.5deg,
    #ec1c3c 292.5deg 315deg,
    #2ecc71 315deg 337.5deg,
    #3b82f6 337.5deg 360deg
  );
  box-shadow: inset 0 0 42px rgba(0, 0, 0, .6);
  animation: wheel-spin 26s linear infinite;
}

@keyframes wheel-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* --- centre hub with the countdown display --- */
.wheel__hub {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 214px;
  height: 214px;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 34%, #35353d, #16161a 74%);
  border: 10px solid #202026;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .6);
}

.wheel__display {
  display: grid;
  place-items: center;
  min-width: 128px;
  padding: 7px 14px;
  border-radius: var(--r-sm);
  background: #0c0c0e;
  border: 1px solid #2c2c33;
  color: #e6e6ee;
  font-size: 27px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: .06em;
  box-shadow: inset 0 0 14px rgba(0, 0, 0, .9);
}

/* --- pointer at the top of the window --- */
.wheel__pointer {
  position: absolute;
  top: 236px;
  left: 50%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  transform: translateX(-50%);
  color: #d8d8e2;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .7));
}

.wheel__pointer svg { width: 100%; height: 100%; }

/* =====================================================
   RESULT STRIP
   ===================================================== */
.wheelstrip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-top: 10px;
  padding: 9px 12px;
  border-radius: var(--r-pill);
  background: #0e0e11;
  border: 1px solid var(--border-soft);
  overflow: hidden;
}

.wheelstrip__dot {
  width: 15px;
  height: 15px;
  flex: none;
  border-radius: 50%;
}

.wheelstrip__dot--blue { background: #3b82f6; }
.wheelstrip__dot--red { background: #ec1c3c; }
.wheelstrip__dot--green { background: #2ecc71; }

/* =====================================================
   MACHINE FOOTER BAR
   ===================================================== */
.wheelmachine__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.wheelmachine__players,
.wheelmachine__bank {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border-radius: var(--r-sm);
  background: var(--bg-surface-2);
  font-size: 13px;
  font-weight: 700;
}

.wheelmachine__players svg { width: 15px; height: 15px; color: var(--accent-yellow); }
.wheelmachine__spacer { flex: 1; }

.wheelmachine__top {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 12px;
  border-radius: var(--r-sm);
  background: var(--bg-surface-2);
  font-size: 12.5px;
  font-weight: 700;
}

.wheelmachine__crown { width: 14px; height: 14px; color: var(--accent-yellow); }

.wheelmachine__chip {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--brand-red);
}

.wheelmachine__avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-inset);
}

.wheelmachine__avatar img { width: 100%; height: 100%; object-fit: cover; }
.wheelmachine__name { color: var(--text-secondary); }
.wheelmachine__amount { color: var(--diamond); }

/* =====================================================
   BET COLUMNS
   ===================================================== */
.betcols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.betcol {
  display: flex;
  flex-direction: column;
  min-height: 250px;
  padding: 12px;
  border-radius: var(--r-lg);
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
}

.betcol__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 12px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--border-soft);
}

.betcol__badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 10px;
  border-radius: var(--r-pill);
  font-size: 12.5px;
  font-weight: 800;
}

.betcol__badge img { width: 15px; height: 15px; object-fit: contain; }

.betcol__badge--blue { background: rgba(59, 130, 246, .18); color: #7fb0fb; }
.betcol__badge--green { background: rgba(46, 204, 113, .18); color: #5fe09b; }
.betcol__badge--red { background: rgba(236, 28, 60, .18); color: #f4788c; }
.betcol__badge--gold { background: rgba(168, 85, 247, .18); color: #c69cfb; }

.betcol__total {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--diamond);
}

.betcol__list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.betcol__row {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--r-sm);
  background: var(--bg-surface-2);
  transition: background-color var(--t) var(--ease);
}

.betcol__row:hover { background: var(--bg-surface-3); }

.betcol__ava {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: var(--r-xs);
  background: var(--bg-inset);
  overflow: hidden;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-dim);
}

.betcol__ava img { width: 100%; height: 100%; object-fit: cover; }

.betcol__name {
  font-size: 11.5px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.betcol__val {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--accent-yellow);
  white-space: nowrap;
}

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width: 1400px) {
  .wheelpage { grid-template-columns: 390px minmax(0, 1fr); }
  .wheel { width: 500px; height: 500px; }
  .wheel__pointer { top: 210px; }
}

@media (max-width: 1180px) {
  .wheelpage { grid-template-columns: 340px minmax(0, 1fr); }
  .betcols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
  .wheelpage { grid-template-columns: minmax(0, 1fr); }
  .sectors { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  .wheelmachine__frame { height: 240px; }
  .wheel { width: 380px; height: 380px; top: 10px; }
  .wheel__hub { width: 150px; height: 150px; border-width: 7px; }
  .wheel__display { min-width: 96px; font-size: 20px; padding: 5px 10px; }
  .wheel__pointer { top: 158px; width: 24px; height: 24px; }
  .sectors { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .sector { height: 74px; }
  .sector__img { width: 62px; height: 66px; }
  .wheelstrip__dot { width: 11px; height: 11px; }
  .wheelmachine__spacer { display: none; }
  .wheelmachine__top { width: 100%; justify-content: center; }
}

@media (max-width: 560px) {
  .betcols { grid-template-columns: minmax(0, 1fr); }
  .wheelbet__actions { grid-template-columns: minmax(0, 1fr); }
  .wheel { width: 300px; height: 300px; }
  .wheelmachine__frame { height: 190px; }
  .wheel__hub { width: 118px; height: 118px; }
  .wheel__pointer { top: 122px; }
}