/* V9.2.4 — abstract fate wheel UI and motion only */
.fate-wheel-game{
  min-height:calc(100dvh - 150px);
  padding:18px 14px 20px;
  justify-content:flex-start!important;
  background:
    radial-gradient(circle at 50% 34%,rgba(98,80,126,.12),transparent 35%),
    linear-gradient(180deg,#15161d,#111218)!important;
}
.fate-wheel-copy{display:grid;gap:3px;margin:2px 0 12px;text-align:center}
.fate-wheel-copy span{font-size:9px;letter-spacing:.14em;color:#8f8995}
.fate-wheel-copy strong{font-size:17px;letter-spacing:-.02em;color:#eee8dd}
.fate-wheel-stage{
  --wheel-size:min(310px,79vw);
  position:relative;width:var(--wheel-size);height:var(--wheel-size);margin:0 auto 12px;
  display:grid;place-items:center;isolation:isolate;
  filter:drop-shadow(0 26px 32px rgba(0,0,0,.34));
}
.fate-wheel-stage::before{
  content:"";position:absolute;inset:4.5%;border-radius:50%;z-index:-2;
  background:
    radial-gradient(circle at 50% 45%,rgba(196,164,106,.08),transparent 44%),
    radial-gradient(circle at 50% 50%,#1c1d26 0 53%,#111218 54% 61%,#26232a 62% 66%,#111218 67% 100%);
  border:1px solid rgba(224,204,166,.13);
  box-shadow:inset 0 0 0 6px rgba(0,0,0,.18),0 0 0 1px rgba(255,255,255,.025);
}
.fate-wheel-stage::after{
  content:"";position:absolute;inset:0;border-radius:50%;z-index:-3;
  background:conic-gradient(from 10deg,transparent 0 8%,rgba(202,170,111,.13) 8.2% 8.5%,transparent 8.7% 24%,rgba(112,90,128,.13) 24.2% 24.5%,transparent 24.7% 49%,rgba(202,170,111,.1) 49.2% 49.5%,transparent 49.7% 74%,rgba(112,90,128,.12) 74.2% 74.5%,transparent 74.7% 100%);
  opacity:.72;
}
.fate-beacon{
  position:absolute;left:50%;top:-3px;z-index:8;width:32px;height:40px;transform:translateX(-50%);
  display:grid;place-items:start center;pointer-events:none;
}
.fate-beacon::before{
  content:"";width:18px;height:27px;clip-path:polygon(50% 100%,0 24%,18% 0,82% 0,100% 24%);
  background:linear-gradient(180deg,#ead8ae 0%,#c4a165 48%,#725537 100%);
  filter:drop-shadow(0 5px 7px rgba(0,0,0,.48));
}
.fate-beacon i{position:absolute;top:4px;width:5px;height:5px;border-radius:50%;background:#fff3d0;box-shadow:0 0 8px rgba(235,208,147,.7)}
.fate-beacon-glow{position:absolute;left:50%;top:8px;z-index:7;width:58px;height:80px;transform:translateX(-50%);background:radial-gradient(ellipse at 50% 0,rgba(218,184,117,.2),transparent 68%);opacity:.5;pointer-events:none}
.fate-halo{
  position:absolute;left:50%;top:50%;width:94%;height:94%;transform:translate(-50%,-50%);border-radius:50%;z-index:0;
  border:1px solid rgba(214,185,130,.1);pointer-events:none;
}
.fate-halo::before,.fate-halo::after{content:"";position:absolute;inset:7%;border-radius:50%;border:1px dashed rgba(217,192,147,.09)}
.fate-halo::after{inset:17%;border-style:solid;border-color:rgba(116,91,132,.1)}
.fate-halo i{position:absolute;width:5px;height:5px;border-radius:50%;background:#bfa16b;box-shadow:0 0 8px rgba(198,164,106,.5)}
.fate-halo i:nth-child(1){left:50%;top:0;transform:translate(-50%,-50%)}
.fate-halo i:nth-child(2){right:0;top:50%;transform:translate(50%,-50%)}
.fate-halo i:nth-child(3){left:50%;bottom:0;transform:translate(-50%,50%)}
.fate-halo i:nth-child(4){left:0;top:50%;transform:translate(-50%,-50%)}
.fate-wheel{
  position:absolute;inset:10%;border-radius:50%;z-index:2;transform:rotate(0deg);will-change:transform;
  background:
    radial-gradient(circle,#171820 0 27%,transparent 27.5%),
    radial-gradient(circle,transparent 0 45%,rgba(211,184,131,.06) 45.5% 46%,transparent 46.5% 100%),
    linear-gradient(145deg,#20212a,#111218);
  border:1px solid rgba(220,198,155,.16);
  box-shadow:inset 0 0 36px rgba(0,0,0,.48),inset 0 0 0 8px rgba(255,255,255,.012);
}
.fate-wheel-runes{position:absolute;inset:3%;border-radius:50%;opacity:.7;background:repeating-conic-gradient(from -1deg,rgba(210,184,132,.22) 0 .7deg,transparent .7deg 14.3deg)}
.fate-wheel-runes::before{content:"";position:absolute;inset:9px;border-radius:50%;background:#15161d}
.fate-wheel-lines{position:absolute;inset:12%;border-radius:50%;opacity:.5;background:repeating-conic-gradient(from 0deg,rgba(211,186,138,.12) 0 .55deg,transparent .55deg var(--step))}
.fate-wheel-lines::after{content:"";position:absolute;inset:10px;border-radius:50%;background:radial-gradient(circle,transparent 0 55%,rgba(105,82,121,.05) 56% 70%,transparent 71%)}
.fate-player-node{
  position:absolute;left:50%;top:50%;width:0;height:0;z-index:5;
  transform:rotate(var(--angle)) translateY(max(-98px,-25vw));
  transform-origin:center;
}
.fate-player-node__inner{
  position:absolute;left:0;top:0;width:62px;min-height:43px;transform:translate(-50%,-50%) rotate(calc(var(--counter-angle) + var(--counter-rotation)));
  display:grid;grid-template-columns:25px minmax(0,1fr);grid-template-rows:auto auto;align-items:center;gap:0 6px;padding:5px 7px 5px 5px;border-radius:14px;
  background:rgba(18,19,25,.92);border:1px solid color-mix(in srgb,var(--player-tone) 38%,transparent);box-shadow:0 6px 14px rgba(0,0,0,.28);
  transition:border-color .25s ease,background .25s ease,box-shadow .25s ease,opacity .25s ease;will-change:transform;
}
.fate-player-node__inner b{grid-row:1/3;width:25px;height:25px;border-radius:9px;display:grid;place-items:center;background:color-mix(in srgb,var(--player-tone) 22%,#191920 78%);color:#f2ece1;font-size:11px}
.fate-player-node__inner i{font-style:normal;font-size:7px;line-height:1;color:color-mix(in srgb,var(--player-tone) 72%,#c5b79e 28%);letter-spacing:.08em;text-align:left}
.fate-player-node__inner strong{max-width:27px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:9px;line-height:1.25;color:#ddd6cb;text-align:left}
.fate-player-node.nearby .fate-player-node__inner{opacity:.62}
.fate-player-node.selected{z-index:9}
.fate-player-node.selected .fate-player-node__inner{background:linear-gradient(180deg,rgba(49,43,42,.98),rgba(25,23,28,.98));border-color:#d8b97d;box-shadow:0 0 0 3px rgba(198,164,106,.11),0 8px 22px rgba(0,0,0,.42),0 0 24px rgba(198,164,106,.16)}
.fate-player-node.selected .fate-player-node__inner b{background:linear-gradient(180deg,#d5b675,#9e7440);color:#17130e}
.fate-inner-orbit{position:absolute;left:50%;top:50%;width:48%;height:48%;transform:translate(-50%,-50%);border-radius:50%;z-index:5;border:1px solid rgba(215,188,136,.13);will-change:transform}
.fate-inner-orbit::before,.fate-inner-orbit::after{content:"";position:absolute;inset:11%;border-radius:50%;border:1px dashed rgba(105,82,121,.18)}
.fate-inner-orbit::after{inset:24%;border-style:solid;border-color:rgba(215,188,136,.09)}
.fate-inner-orbit span{position:absolute;width:6px;height:6px;border-radius:50%;background:#c8a86d;box-shadow:0 0 10px rgba(198,164,106,.55)}
.fate-inner-orbit span:nth-child(1){left:50%;top:0;transform:translate(-50%,-50%)}
.fate-inner-orbit span:nth-child(2){right:7%;bottom:14%;transform:translate(50%,50%)}
.fate-inner-orbit span:nth-child(3){left:7%;bottom:14%;transform:translate(-50%,50%)}
.fate-core{
  position:absolute;left:50%;top:50%;z-index:7;width:78px;height:78px;transform:translate(-50%,-50%);border-radius:50%;display:grid;place-items:center;align-content:center;
  background:radial-gradient(circle at 40% 28%,#3e3744 0,#24222b 35%,#15161d 70%);border:1px solid rgba(225,204,164,.22);box-shadow:inset 0 0 0 8px rgba(0,0,0,.18),0 8px 20px rgba(0,0,0,.4);
}
.fate-core::before{content:"";position:absolute;inset:9px;border-radius:50%;border:1px solid rgba(199,167,107,.16);background:conic-gradient(from 45deg,transparent 0 12%,rgba(198,164,106,.1) 12.5% 13%,transparent 13.5% 37%,rgba(109,83,124,.13) 37.5% 38%,transparent 38.5% 62%,rgba(198,164,106,.1) 62.5% 63%,transparent 63.5% 87%,rgba(109,83,124,.13) 87.5% 88%,transparent 88.5%)}
.fate-core i{position:absolute;width:8px;height:8px;border-radius:50%;background:#d8ba7f;box-shadow:0 0 14px rgba(211,181,121,.55)}
.fate-core strong{z-index:1;margin-top:-4px;font-size:12px;letter-spacing:.18em;color:#e9ddc6}
.fate-core small{z-index:1;margin-top:-4px;font-size:6px;letter-spacing:.22em;color:#8f8792}
.fate-wheel-hint{margin:0 auto 14px!important;max-width:260px!important;color:#9f9aa4!important;font-size:10px!important;line-height:1.55!important}
.fate-spin-button{width:min(300px,100%);margin-top:auto;min-height:52px}
.fate-wheel-stage.is-spinning .fate-beacon-glow{animation:fateBeaconPulse .72s ease-in-out infinite alternate}
.fate-wheel-stage.is-spinning .fate-core{box-shadow:inset 0 0 0 8px rgba(0,0,0,.18),0 8px 20px rgba(0,0,0,.4),0 0 24px rgba(198,164,106,.14)}
.fate-wheel-stage.is-settled .fate-beacon{animation:fateBeaconSettle .48s cubic-bezier(.16,1,.3,1)}
.fate-result{background:radial-gradient(circle at 50% 40%,rgba(198,164,106,.1),transparent 36%),#15161d!important}
.fate-result-sigil{position:relative;width:124px;height:124px;margin:14px 0 20px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,#25232b 0 48%,#15161d 49% 100%);border:1px solid rgba(218,192,144,.18);box-shadow:0 16px 36px rgba(0,0,0,.34),inset 0 0 0 10px rgba(198,164,106,.035)}
.fate-result-sigil::before,.fate-result-sigil::after{content:"";position:absolute;inset:10px;border-radius:50%;border:1px dashed rgba(210,181,126,.22)}
.fate-result-sigil::after{inset:24px;border-style:solid;border-color:rgba(106,82,121,.24)}
.fate-result-sigil span{position:relative;z-index:2;width:54px;height:54px;border-radius:18px;display:grid;place-items:center;background:linear-gradient(180deg,#d5b675,#9a713e);color:#19140d;font-size:24px;font-weight:900;box-shadow:0 8px 18px rgba(0,0,0,.3)}
.fate-result-sigil i{position:absolute;inset:-1px;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 22%,rgba(211,181,121,.28) 22.4% 22.8%,transparent 23.2% 47%,rgba(116,88,133,.24) 47.4% 47.8%,transparent 48.2% 72%,rgba(211,181,121,.28) 72.4% 72.8%,transparent 73.2% 100%);animation:fateResultOrbit 9s linear infinite}
.fate-result>p{margin-top:-6px!important;margin-bottom:18px!important}
@keyframes fateBeaconPulse{from{opacity:.3;transform:translateX(-50%) scale(.9)}to{opacity:.82;transform:translateX(-50%) scale(1.08)}}
@keyframes fateBeaconSettle{0%{transform:translateX(-50%) translateY(-5px)}45%{transform:translateX(-50%) translateY(4px)}72%{transform:translateX(-50%) translateY(-1px)}100%{transform:translateX(-50%) translateY(0)}}
@keyframes fateResultOrbit{to{transform:rotate(360deg)}}
@media(max-width:360px){
  .fate-wheel-game{padding-left:10px;padding-right:10px}
  .fate-wheel-stage{--wheel-size:min(286px,80vw)}
  .fate-player-node__inner{width:56px;padding-right:5px;grid-template-columns:23px minmax(0,1fr)}
  .fate-player-node__inner b{width:23px;height:23px}
  .fate-player-node__inner strong{max-width:24px;font-size:8px}
  .fate-core{width:70px;height:70px}
}
@media(prefers-reduced-motion:reduce){
  .fate-wheel-stage,.fate-wheel,.fate-inner-orbit,.fate-halo,.fate-player-node__inner{transition:none!important}
  .fate-wheel-stage.is-spinning .fate-beacon-glow,.fate-wheel-stage.is-settled .fate-beacon,.fate-result-sigil i{animation:none!important}
}