/* German Dominion - Daily spin wheel on the live dashboard.
   Tokens come from /_shared.css; the .panel vocabulary matches live.css.
   Selectors are the spin.js / live/index.html DOM contract. No emojis and
   English copy only (site copy policy). */

.spin-panel { margin: 0 0 18px; }
.spin-layout { display: grid; grid-template-columns: minmax(260px, 380px) minmax(0, 1fr); gap: 26px 40px; align-items: center; }
@media (max-width: 820px) { .spin-layout { grid-template-columns: 1fr; justify-items: center; } .spin-side { width: 100%; max-width: 420px; } }

/* ---- wheel ---- */
.wheel-wrap { position: relative; width: min(100%, 380px); aspect-ratio: 1; margin: 6px auto; }
.wheel-wrap.idle { cursor: pointer; }
.wheel-wrap.locked { cursor: not-allowed; }
#spin-wheel { width: 100%; height: 100%; display: block; filter: drop-shadow(0 18px 40px rgba(0,0,0,0.45)); transition: filter .3s var(--ease), transform .22s var(--ease); }
#spin-wheel .wheel-rotor { transform-origin: 0 0; }
.wheel-wrap.idle #spin-wheel .wheel-rotor { animation: wheel-idle 90s linear infinite; }
@keyframes wheel-idle { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* hover affordance while the wheel is ready */
.wheel-wrap.idle:hover #spin-wheel { filter: brightness(1.06) drop-shadow(0 18px 44px rgba(0,0,0,0.5)); }
.wheel-wrap.idle:hover .wheel-hub { box-shadow: 0 0 30px rgba(57,201,119,0.42), inset 0 0 14px rgba(0,0,0,0.7); }
/* brief wind-up squash on launch */
.wheel-wrap.winding #spin-wheel { transform: scale(0.965); }
/* one-shot hub pop on a win (hub sits outside the desaturated wheel) */
.wheel-wrap.win .wheel-hub span { display: inline-block; animation: hub-pop .6s var(--ease); }
@keyframes hub-pop { 0% { transform: scale(1); } 34% { transform: scale(1.34); color: var(--amber-hot); } 100% { transform: scale(1); } }
/* self-cleaning confetti canvas (spin.js) */
.spin-confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 7; }

#spin-wheel path.seg { stroke: rgba(4,7,6,0.85); stroke-width: 1.5; }
#spin-wheel text { font-family: var(--display); font-size: 15px; fill: var(--bone); letter-spacing: .04em; }
#spin-wheel text.jackpot-label { fill: #1d1405; font-size: 16px; }
#spin-wheel .seg-hit { opacity: 0; }
#spin-wheel .seg-hit.flash { opacity: 1; animation: seg-flash 1.4s var(--ease) 3; }
@keyframes seg-flash { 0%, 100% { opacity: 0; } 45% { opacity: .85; } }

.wheel-pointer { position: absolute; top: -6px; left: 50%; transform: translateX(-50%); transform-origin: 50% 0; width: 0; height: 0; border-left: 13px solid transparent; border-right: 13px solid transparent; border-top: 22px solid var(--accent-hot); filter: drop-shadow(0 3px 6px rgba(0,0,0,0.6)); z-index: 4; }
/* the pointer flicks once per segment crossing, driven by spin.js in sync with
   the tick sound - it slows as the wheel decelerates */
.wheel-pointer.flick { animation: pointer-flick .13s ease; }
@keyframes pointer-flick { 0% { transform: translateX(-50%) rotate(0); } 42% { transform: translateX(-50%) rotate(11deg); } 100% { transform: translateX(-50%) rotate(0); } }

.wheel-hub { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 21%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 38% 30%, #10241a, var(--bg-0) 78%); border: 2px solid var(--glass-border-lit); box-shadow: 0 0 24px rgba(57,201,119,0.25), inset 0 0 14px rgba(0,0,0,0.7); z-index: 3; }
.wheel-hub span { font: 400 26px/1 var(--display); color: var(--accent-hot); letter-spacing: .08em; }

/* ---- locked state ---- */
.wheel-wrap.locked #spin-wheel { filter: saturate(.28) brightness(.62) drop-shadow(0 18px 40px rgba(0,0,0,0.45)); transition: filter .8s var(--ease); }
.wheel-lock { position: absolute; inset: 0; z-index: 5; display: grid; place-content: center; justify-items: center; gap: 8px; border-radius: 50%; background: radial-gradient(circle, rgba(4,7,6,0.42) 30%, rgba(4,7,6,0.72) 72%, transparent 74%); }
.padlock { width: 64px; height: 64px; color: var(--bone); transform-origin: 50% 60%; animation: padlock-breathe 2.6s var(--ease) infinite; }
@keyframes padlock-breathe { 0%, 100% { transform: scale(1); opacity: .92; } 50% { transform: scale(1.05); opacity: 1; } }
.padlock-shackle { transform-origin: 20px 28px; transition: transform .5s var(--ease); }
.wheel-lock.deny .padlock { animation: padlock-deny .4s ease-in-out 2; }
@keyframes padlock-deny { 0%, 100% { transform: translateX(0) rotate(0); } 25% { transform: translateX(-5px) rotate(-3deg); } 75% { transform: translateX(5px) rotate(3deg); } }
.wheel-lock.opening .padlock-shackle { transform: rotate(-38deg); }
.wheel-lock.opening { animation: lock-fade .7s var(--ease) forwards; }
@keyframes lock-fade { to { opacity: 0; } }
.lock-count { font: 400 34px/1 var(--display); color: var(--bone); letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.lock-label { color: var(--bone-62); font: 600 9px/1 var(--mono); text-transform: uppercase; letter-spacing: .16em; order: -1; }

/* ---- win burst ---- */
.wheel-burst { position: absolute; inset: 0; z-index: 6; display: grid; place-content: center; justify-items: center; gap: 2px; pointer-events: none; }
.wheel-burst b { font: 400 64px/1 var(--display); color: var(--accent-hot); text-shadow: 0 0 34px rgba(57,201,119,0.65); animation: burst-pop 2.6s var(--ease) forwards; }
.wheel-burst span { color: var(--bone-80); font: 600 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .22em; animation: burst-pop 2.6s var(--ease) forwards; }
@keyframes burst-pop { 0% { opacity: 0; transform: scale(.4); } 12% { opacity: 1; transform: scale(1.08); } 22% { transform: scale(1); } 78% { opacity: 1; } 100% { opacity: 0; transform: scale(1) translateY(-14px); } }

/* ---- side column ---- */
.spin-side { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.spin-copy { margin: 0; color: var(--bone-62); font-size: 14px; line-height: 1.55; }
.spin-copy b { color: var(--amber-hot); font-weight: 600; }
.spin-stats { display: grid; grid-template-columns: repeat(3, minmax(90px, 1fr)); gap: 10px; width: 100%; }
.spin-stat { padding: 12px 14px; border-radius: 11px; border: 1px solid var(--glass-border); background: var(--bg-1); }
.spin-stat .lab { display: block; color: var(--bone-34); font: 600 9px/1 var(--mono); text-transform: uppercase; letter-spacing: .1em; }
.spin-stat .val { display: block; margin-top: 7px; color: var(--bone); font: 400 24px/1 var(--display); font-variant-numeric: tabular-nums; }
@media (max-width: 460px) { .spin-stats { grid-template-columns: 1fr 1fr; } }

.spin-button { align-self: stretch; padding: 15px 22px; font: 600 14px/1 var(--ui); letter-spacing: .04em; text-transform: uppercase; }
.spin-button:not(:disabled) { box-shadow: 0 0 22px rgba(57,201,119,0.22); animation: spin-btn-glow 2.4s var(--ease) infinite; }
@keyframes spin-btn-glow { 0%, 100% { box-shadow: 0 0 14px rgba(57,201,119,0.16); } 50% { box-shadow: 0 0 30px rgba(57,201,119,0.38); } }
.spin-cooldown-note { color: var(--bone-34); font: 600 10px/1.5 var(--mono); text-transform: uppercase; letter-spacing: .1em; }
.spin-shop-link { font-size: 13px; }

@media (prefers-reduced-motion: reduce) {
  .wheel-wrap.idle #spin-wheel .wheel-rotor,
  .padlock,
  .spin-button:not(:disabled),
  .wheel-wrap.win .wheel-hub span,
  .wheel-pointer.flick { animation: none; }
  #spin-wheel, #spin-wheel .wheel-rotor { transition: none !important; }
}