/* ufasofilmebi.tv — „კინო-ორბიტა" (ufaso-wheel2) · prefix .uwo */
@font-face { font-family: "UWO Display"; src: url("../ufaso-wheel/fonts/ufw-georgian.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

.uwo-site-page{ background: #07070b; }
.uwo-portal{ --pink: #ff2d95; --pink2: #ff6ab8; --violet: #7a5cff; --muted: #a6a3bd; --line: rgba(255, 255, 255, .09); --disp: "UWO Display", "BPG ExtraSquare Mtavruli", system-ui, sans-serif; color: #f4f2fb; font-size: 14px; line-height: 1.45; }
.uwo{
  --bg: #07070b; --bg2: #0e0f1a; --panel: rgba(17, 20, 38, .62); --line: rgba(255, 255, 255, .09);
  --pink: #ff2d95; --pink2: #ff6ab8; --violet: #7a5cff; --cyan: #27d8ff; --gold: #f8c55f;
  --txt: #f4f2fb; --muted: #a6a3bd; --aura: #ff2d95; --speed: 0;
  --disp: "UWO Display", "BPG ExtraSquare Mtavruli", system-ui, sans-serif;
  position: relative; isolation: isolate; min-height: 100vh; min-height: 100dvh; overflow: hidden;
  color: var(--txt); font-size: 14px; line-height: 1.45; -webkit-font-smoothing: antialiased;
}
.uwo *, .uwo *::before, .uwo *::after, .uwo-portal *, .uwo-portal *::before, .uwo-portal *::after{ box-sizing: border-box; }
:where(.uwo, .uwo-portal) button{ font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; }
:where(.uwo, .uwo-portal) img{ max-width: none; border: 0; box-shadow: none; }
:where(.uwo, .uwo-portal) a{ color: inherit; text-decoration: none; }
.uwo svg.uwo-i, .uwo-portal svg.uwo-i{ width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ── background: the current film's own still, blurred, plus light ── */
.uwo-bg{ position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; background: var(--bg); }
.uwo-bg-img{ position: absolute; inset: -40px; width: calc(100% + 80px); height: calc(100% + 80px); object-fit: cover; filter: blur(14px) saturate(1.25) brightness(.5); opacity: 0; transform: scale(1.04); transition: opacity 1.2s ease, transform 8s ease; }
.uwo-bg-img.is-on{ opacity: .85; transform: scale(1); }
.uwo-bg::before{ content: ""; position: absolute; inset: 0; z-index: 1; background:
  radial-gradient(60% 55% at 50% 45%, color-mix(in srgb, var(--aura) 26%, transparent), transparent 70%),
  radial-gradient(40% 40% at 18% 20%, rgba(122, 92, 255, .22), transparent 70%),
  radial-gradient(40% 40% at 85% 75%, rgba(39, 216, 255, .12), transparent 70%),
  linear-gradient(180deg, rgba(7, 7, 11, .55) 0%, rgba(7, 7, 11, .25) 40%, rgba(7, 7, 11, .9) 100%); transition: background .8s; }
.uwo-bg::after{ content: ""; position: absolute; inset: 0; z-index: 2; background: radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(0, 0, 0, .75)); }
.uwo-bokeh{ position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; }

/* ── layout ── */
.uwo-in{ position: relative; display: grid; grid-template-columns: 300px minmax(0, 1fr) minmax(300px, 360px); gap: clamp(14px, 1.6vw, 28px); align-items: start; padding: 96px clamp(12px, 1.8vw, 32px) 40px; max-width: 1920px; margin: 0 auto; }

/* ── glass panels ── */
.uwo-glass{ background: linear-gradient(180deg, rgba(22, 19, 40, .72), rgba(12, 12, 24, .66)); border: 1px solid var(--line); border-radius: 20px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 20px 60px rgba(0, 0, 0, .45); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); }

/* ── left rail ── */
.uwo-rail{ padding: 10px; }
.uwo-rail::-webkit-scrollbar{ width: 6px; } .uwo-rail::-webkit-scrollbar-thumb{ background: rgba(255, 45, 149, .45); border-radius: 6px; }
.uwo-rail-h{ margin: 8px 8px 8px; font: 700 11px/1 var(--disp); letter-spacing: .14em; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.uwo-rail-h::after{ content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line), transparent); }
.uwo-row{ --c: var(--pink); position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto 12px; align-items: center; gap: 9px; width: 100%; min-height: 62px; margin: 0 0 7px; padding: 0 9px 0 14px; border-radius: 15px; text-align: left; overflow: hidden; isolation: isolate;
  background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .07); transition: transform .25s cubic-bezier(.2, .8, .2, 1), border-color .25s, box-shadow .25s, background .25s; }
.uwo-row::before{ content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 3px; background: var(--c); box-shadow: 0 0 12px var(--c); }
.uwo-row-art{ position: absolute; inset: 0 0 0 30%; z-index: -1; background-size: cover; background-position: center 25%; opacity: 0; transition: opacity .6s, transform .7s;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 55%); mask-image: linear-gradient(90deg, transparent, #000 55%); }
.uwo-row-art.is-on{ opacity: .42; }
.uwo-row::after{ content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(12, 12, 24, .92) 30%, rgba(12, 12, 24, .45)); }
.uwo-row-ic{ display: grid; place-items: center; width: 34px; height: 34px; font-size: 25px; color: var(--c); filter: drop-shadow(0 0 7px var(--c)); transition: transform .25s, filter .25s; }
.uwo-row:hover .uwo-row-ic{ transform: scale(1.1); filter: drop-shadow(0 0 14px var(--c)) brightness(1.15); }
.uwo-row-tx{ min-width: 0; }
.uwo-row-l{ display: block; font: 800 14.5px/1.25 var(--disp); letter-spacing: -.1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uwo-row-s{ display: block; margin-top: 2px; font-size: 11px; font-weight: 600; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uwo-row-n{ padding: 3px 9px; border-radius: 999px; font-weight: 800; font-size: 12px; color: var(--c); background: rgba(0, 0, 0, .45); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); font-variant-numeric: tabular-nums; }
.uwo-row-n:empty{ display: none; }
.uwo-row-ch{ color: var(--muted); font-size: 14px; }
.uwo-row:hover{ transform: translateX(3px); border-color: color-mix(in srgb, var(--c) 40%, transparent); }
.uwo-row:hover .uwo-row-art{ transform: scale(1.05); }
.uwo-row.is-on{ border-color: var(--c); box-shadow: 0 0 0 1px var(--c), 0 0 26px color-mix(in srgb, var(--c) 45%, transparent), inset 0 0 30px color-mix(in srgb, var(--c) 14%, transparent); }
.uwo-row.is-on .uwo-row-n{ color: #fff; background: var(--c); border-color: transparent; }
.uwo-row.is-on .uwo-row-ch{ color: var(--c); }
.uwo-row.is-zero{ opacity: .45; }
.uwo-row:focus-visible{ outline: 2px solid var(--c); outline-offset: 2px; }

/* ── centre: tabs, wheel, stage ── */
.uwo-mid{ display: flex; flex-direction: column; align-items: center; min-width: 0; }
.uwo-top{ display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; margin-bottom: 6px; flex-wrap: wrap; }
.uwo-tabs{ display: inline-flex; padding: 5px; gap: 4px; border-radius: 999px; }
.uwo-tab{ padding: 9px 20px; border-radius: 999px; font: 700 13px/1 var(--disp); letter-spacing: .03em; color: var(--muted); transition: color .2s, background .25s, box-shadow .25s; }
.uwo-tab:hover{ color: #fff; }
.uwo-tab.is-on{ color: #fff; background: linear-gradient(135deg, var(--pink2), var(--pink) 55%, #c4006b); box-shadow: 0 0 22px rgba(255, 45, 149, .55); }
.uwo-ctl{ display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; font-size: 18px; color: var(--muted); }
.uwo-ctl:hover, .uwo-ctl[aria-pressed="true"]{ color: #fff; }

.uwo-stage{ position: relative; width: min(100%, calc(100vh - 210px), 860px); min-width: 300px; aspect-ratio: 1; }
.uwo-wheel{ position: absolute; left: 0; right: 0; top: 0; aspect-ratio: 1; }
.uwo-wheel > svg{ position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.uwo-glow{ position: absolute; inset: -9%; border-radius: 50%; z-index: -1; background: radial-gradient(closest-side, color-mix(in srgb, var(--aura) 40%, transparent), rgba(122, 92, 255, .18) 62%, transparent 100%); filter: blur(6px); opacity: calc(.75 + var(--speed) * .25); transition: background .8s; }
.uwo-sec-lbl{ font-family: var(--disp); font-weight: 800; fill: #fff; paint-order: stroke; stroke: rgba(5, 3, 14, .82); stroke-width: 7px; stroke-linejoin: round; letter-spacing: .02em; pointer-events: none; }
.uwo-sec-edge{ fill: none; stroke: rgba(255, 140, 210, .55); stroke-width: 2.2; }
.uwo-sec.is-win .uwo-sec-edge{ stroke: #fff; stroke-width: 5; filter: url(#uwo-f-glow); }
.uwo-sec.is-dim image{ opacity: .35; transition: opacity .6s; }
.uwo-sec image{ transition: opacity .6s; }
.uwo-streak{ opacity: calc(var(--speed) * .85); mix-blend-mode: screen; }
.uwo-bulb{ fill: #ffd1ea; filter: url(#uwo-f-bulb); }
.uwo.is-spinning .uwo-bulb{ animation: uwo-bulb .7s steps(2, jump-none) infinite; }
.uwo.is-spinning .uwo-bulb:nth-child(2n){ animation-delay: -.35s; }
@keyframes uwo-bulb{ 0%{ fill: #ffd1ea; opacity: 1; } 100%{ fill: #ff2d95; opacity: .45; } }
.uwo-pointer{ transform-origin: 500px 40px; transition: transform .08s; }
.uwo-pointer.is-tick{ transform: rotate(-9deg); }

@keyframes uwo-orbit{ to{ transform: rotate(360deg); } }


.uwo-caption{ margin-top: 6px; min-height: 34px; padding: 8px 18px; border-radius: 999px; font-size: 13px; color: var(--muted); text-align: center; background: rgba(10, 8, 20, .6); border: 1px solid var(--line); }
.uwo-caption b{ color: #fff; }


/* states */
.uwo-state{ position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); z-index: 7; width: min(80%, 360px); padding: 22px; text-align: center; border-radius: 18px; display: none; }
.uwo-state.is-on{ display: block; }
.uwo-state h4{ margin: 0 0 6px; font: 800 17px/1.3 var(--disp); }
.uwo-state p{ margin: 0 0 12px; color: var(--muted); font-size: 13px; }
.uwo-skel{ position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(255, 255, 255, .03), rgba(255, 45, 149, .12), rgba(255, 255, 255, .03)); animation: uwo-orbit 1.6s linear infinite; opacity: 0; transition: opacity .3s; pointer-events: none; }
.uwo.is-loading .uwo-skel{ opacity: 1; }

/* ── right: the film card ── */
.uwo-card-wrap{ position: sticky; top: 96px; }
.uwo-card{ position: relative; padding: 12px; overflow: hidden; }
.uwo-card-bd{ position: absolute; inset: 0; z-index: -1; background-size: cover; background-position: center; filter: blur(30px) brightness(.35) saturate(1.3); transform: scale(1.2); opacity: .9; transition: background-image .6s; }
.uwo-poster{ position: relative; aspect-ratio: 2 / 3; max-height: 36vh; width: 100%; border-radius: 14px; overflow: hidden; background: #12101f; box-shadow: 0 18px 40px rgba(0, 0, 0, .55); }
.uwo-poster img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s; }
.uwo-poster img.is-on{ opacity: 1; }
.uwo-poster::after{ content: ""; position: absolute; inset: 55% 0 0; background: linear-gradient(transparent, rgba(8, 6, 18, .75)); pointer-events: none; }
.uwo-play{ position: absolute; right: 12px; top: 12px; z-index: 2; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; font-size: 18px; background: rgba(10, 8, 20, .55); border: 1px solid rgba(255, 255, 255, .35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: transform .2s, background .2s; }
.uwo-play:hover{ transform: scale(1.08); background: var(--pink); }
.uwo-play[hidden]{ display: none; }
.uwo-badge{ position: absolute; left: 12px; top: 12px; z-index: 2; padding: 4px 9px; border-radius: 8px; font-weight: 800; font-size: 11.5px; background: rgba(10, 8, 20, .7); border: 1px solid rgba(255, 255, 255, .25); }
.uwo-badge:empty{ display: none; }
.uwo-ct{ padding: 14px 4px 2px; }
.uwo-t{ margin: 0; font: 900 clamp(18px, 1.5vw, 23px)/1.2 var(--disp); letter-spacing: .02em; }
.uwo-sub{ display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; color: var(--muted); font-size: 13px; }
.uwo-sub span:first-child{ min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uwo-star{ display: inline-flex; align-items: center; gap: 5px; flex: none; color: var(--gold); font-weight: 800; }
.uwo-star small{ color: var(--muted); font-weight: 600; }
.uwo-star:empty{ display: none; }
.uwo-chips{ display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.uwo-chip{ padding: 5px 11px; border-radius: 999px; font-size: 12px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .16); }
.uwo-meta{ display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 12px; color: #d7d4e8; font-size: 13px; }
.uwo-meta span{ display: inline-flex; align-items: center; gap: 6px; }
.uwo-meta span:empty{ display: none; }
.uwo-meta .uwo-q{ padding: 2px 7px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, .3); font-weight: 800; font-size: 11.5px; }
.uwo-desc{ margin: 12px 0 0; color: #cfcbe0; font-size: 13.5px; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.uwo-why{ display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; padding: 10px 12px; border-radius: 12px; font-size: 12.5px; color: #f3e9ff; background: linear-gradient(135deg, rgba(122, 92, 255, .18), rgba(255, 45, 149, .12)); border: 1px solid rgba(122, 92, 255, .35); }
.uwo-why svg{ color: var(--gold); margin-top: 2px; }
.uwo-why:empty{ display: none; }
.uwo-cast{ display: flex; align-items: center; margin-top: 12px; }
.uwo-cast:empty{ display: none; }
.uwo-cast a{ position: relative; width: 38px; height: 38px; margin-right: -8px; border-radius: 50%; overflow: hidden; border: 2px solid #171428; background: linear-gradient(135deg, #2a2342, #1a1530); transition: transform .2s, z-index 0s; }
.uwo-cast a:hover{ transform: translateY(-3px) scale(1.12); z-index: 2; }
.uwo-cast img{ width: 100%; height: 100%; object-fit: cover; }
.uwo-cast-l{ margin-left: 18px; color: var(--muted); font-size: 12px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uwo-btns{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.uwo-btn{ display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 46px; padding: 0 14px; border-radius: 13px; font: 700 13.5px/1 var(--disp); letter-spacing: .02em; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .14); transition: transform .15s, background .2s, border-color .2s, box-shadow .2s; }
.uwo-btn:hover{ border-color: rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .09); }
.uwo-btn:active{ transform: scale(.97); }
.uwo-btn.is-main{ grid-column: 1 / -1; min-height: 54px; font-size: 16px; border: 0; background: linear-gradient(135deg, var(--pink2), var(--pink) 50%, #c4006b); box-shadow: 0 10px 30px rgba(255, 45, 149, .45), inset 0 1px 0 rgba(255, 255, 255, .35); }
.uwo-btn.is-main:hover{ box-shadow: 0 12px 40px rgba(255, 45, 149, .7), inset 0 1px 0 rgba(255, 255, 255, .35); }
.uwo-btn[aria-pressed="true"]{ color: var(--pink2); border-color: var(--pink); }
.uwo-btn[aria-pressed="true"] svg{ fill: currentColor; }
.uwo-btn[disabled]{ opacity: .4; cursor: default; }
.uwo-more{ display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 10px; padding: 8px; color: var(--muted); font-size: 12.5px; border-radius: 10px; }
.uwo-more:hover{ color: #fff; background: rgba(255, 255, 255, .04); }
.uwo-card.is-swap .uwo-ct, .uwo-card.is-swap:not(.is-instant) .uwo-poster{ animation: uwo-in .55s cubic-bezier(.2, .8, .2, 1); }
@keyframes uwo-in{ from{ opacity: 0; transform: translateY(10px); } }
.uwo-card.is-blank .uwo-btns, .uwo-card.is-blank .uwo-play, .uwo-card.is-blank .uwo-more{ visibility: hidden; }

.uwo-hist{ margin-top: 14px; padding: 12px; }
.uwo-hist h5{ margin: 0 0 10px; font: 700 12px/1 var(--disp); letter-spacing: .1em; color: var(--muted); }
.uwo-hist-l{ display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.uwo-hist-l a{ aspect-ratio: 2 / 3; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); }
.uwo-hist-l img{ width: 100%; height: 100%; object-fit: cover; }
.uwo-hist-e{ color: var(--muted); font-size: 12px; }

/* trailer window */
.uwo-modal{ position: fixed; inset: 0; z-index: 100000; display: none; place-items: center; padding: 16px; background: rgba(4, 3, 10, .86); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.uwo-modal.is-on{ display: grid; }
.uwo-modal-box{ position: relative; width: min(1100px, 100%, calc((100vh - 80px) * 1.7778)); aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #000; box-shadow: 0 0 0 1px rgba(255, 45, 149, .5), 0 0 60px rgba(255, 45, 149, .3); }
.uwo-modal iframe{ width: 100%; height: 100%; border: 0; }
.uwo-modal-x{ position: absolute; right: 12px; top: 12px; z-index: 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; font-size: 18px; background: rgba(0, 0, 0, .6); color: #fff; border: 1px solid rgba(255, 255, 255, .3); cursor: pointer; }
.uwo-toast{ position: fixed; left: 50%; bottom: 24px; z-index: 100001; transform: translateX(-50%) translateY(20px); padding: 10px 18px; border-radius: 12px; font-size: 13px; background: rgba(20, 16, 36, .95); border: 1px solid var(--line); opacity: 0; transition: opacity .25s, transform .25s; pointer-events: none; color: #fff; }
.uwo-toast.is-on{ opacity: 1; transform: translateX(-50%); }

/* ── smaller screens ── */
@media (max-width: 1280px){
  .uwo-in{ grid-template-columns: 256px minmax(0, 1fr) 300px; }
  .uwo-row{ grid-template-columns: 30px minmax(0, 1fr) auto; min-height: 56px; gap: 8px; padding-left: 12px; }
  .uwo-row-ic{ width: 30px; height: 30px; font-size: 22px; }
  .uwo-row-ch{ display: none; }
}
@media (max-width: 1060px){
  .uwo-in{ grid-template-columns: 230px minmax(0, 1fr); }
  .uwo-side{ grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
  .uwo-card-wrap{ position: relative; top: 0; }
  .uwo-card{ display: grid; grid-template-columns: 200px 1fr; gap: 16px; }
  .uwo-card .uwo-ct{ padding-top: 0; }
  .uwo-hist{ margin-top: 0; }
}
@media (max-width: 760px){
  .uwo-in{ grid-template-columns: minmax(0, 1fr); padding-top: 86px; gap: 14px; }
  .uwo-rail{ position: relative; top: 0; max-height: none; padding: 8px; display: flex; gap: 8px; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
  .uwo-rail-h{ display: none; }
  .uwo-row{ flex: none; width: auto; min-height: 0; margin: 0; padding: 8px 12px 8px 10px; grid-template-columns: auto auto auto; gap: 8px; border-radius: 999px; scroll-snap-align: start; }
  .uwo-row::before, .uwo-row-art, .uwo-row-s{ display: none; }
  .uwo-row-ic{ width: 26px; height: 26px; border-radius: 50%; font-size: 14px; }
  .uwo-row-l{ font-size: 12.5px; }
  .uwo-row-n{ font-size: 11px; padding: 2px 7px; }
  .uwo-stage{ width: 100%; min-width: 0; }
  .uwo-tab{ padding: 8px 13px; font-size: 12px; }
  .uwo-side{ grid-template-columns: minmax(0, 1fr); }
  .uwo-card{ grid-template-columns: minmax(0, 1fr); }
  .uwo-poster{ max-height: none; width: 62%; margin: 0 auto; }
  .uwo-sec-lbl{ stroke-width: 9px; }
}
@media (prefers-reduced-motion: reduce){
  .uwo *, .uwo *::before, .uwo *::after{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* centre button — the same SPIN button as the first wheel (/borbali/) */
.uwo-wheel{ container-type: inline-size; }
.uwo-spin-wrap{ position: absolute; z-index: 6; left: 50%; top: 50%; width: 27%; aspect-ratio: 1; transform: translate(-50%, -50%); }
.uwo-spin-wrap > *{ position: absolute; }
.uwo-spin-aura{ inset: -30%; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(255, 22, 139, .55) 0%, rgba(255, 22, 139, .22) 38%, transparent 66%); animation: uwo-breath 3.8s ease-in-out infinite alternate; }
.uwo.is-spinning .uwo-spin-aura{ animation: uwo-pulse 1.1s ease-in-out infinite alternate; }
.uwo-spin-wrap:hover .uwo-spin-aura{ animation-play-state: paused; transform: scale(1.12); opacity: 1; transition: transform .24s, opacity .24s; }
.uwo-spin-flash{ inset: -12%; border-radius: 50%; pointer-events: none; opacity: 0; background: radial-gradient(circle, rgba(255, 255, 255, .85) 0%, rgba(255, 99, 181, .45) 35%, transparent 70%); }
.uwo-spin-flash.is-on{ animation: uwo-flash .6s ease-out; }
.uwo-spin-ripple{ inset: 0; border-radius: 50%; border: 2px solid rgba(255, 99, 181, .9); box-shadow: 0 0 18px rgba(255, 22, 139, .6); opacity: 0; pointer-events: none; }
.uwo-spin-ripple.is-on{ animation: uwo-ripple .9s ease-out; }
.uwo-spin-ripple + .uwo-spin-ripple.is-on{ animation-delay: .15s; }
:where(.uwo, .uwo-portal) .uwo-spin{ inset: 0; width: 100%; height: 100%; border-radius: 50%; border: 4px solid #ff63b5; padding: 0; color: #fff; text-transform: uppercase; cursor: pointer;
  background: radial-gradient(circle at 32% 24%, #ff63b5 0%, #ff168b 42%, #b1005f 70%, #790044 100%);
  box-shadow: 0 0 0 8px rgba(255, 22, 139, .12), 0 0 28px rgba(255, 22, 139, .6), 0 16px 36px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -18px 30px rgba(80, 0, 40, .55);
  transition: transform .22s cubic-bezier(.3, .7, .3, 1), border-color .3s; }
.uwo-spin:not([disabled]):hover{ transform: scale(1.04); }
.uwo-spin.is-press{ transform: scale(.95); transition-duration: 110ms; }
.uwo-spin[disabled]{ cursor: progress; pointer-events: none; }
.uwo.is-spinning .uwo-spin{ border-color: #ffd9ee; }
.uwo-spin-ring{ position: absolute; inset: -7px; border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity .22s;
  background: conic-gradient(from 0deg, transparent 0 62%, rgba(255, 255, 255, .95) 80%, transparent 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px)); mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px));
  animation: uwo-orbit 2.4s linear infinite paused; }
.uwo-spin-ring.is-fast{ animation-duration: 1.1s; background: conic-gradient(from 0deg, transparent 0 40%, rgba(255, 255, 255, .95) 50%, transparent 60%, transparent 90%, rgba(88, 216, 255, .9) 100%); }
.uwo-spin:not([disabled]):hover .uwo-spin-ring:not(.is-fast){ opacity: .9; animation-play-state: running; }
.uwo.is-spinning .uwo-spin-ring.is-fast{ opacity: 1; animation-play-state: running; }
.uwo-spin-face{ position: absolute; inset: 0; border-radius: 50%; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.uwo-spin-face::before{ content: ""; position: absolute; inset: 6%; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25); pointer-events: none; }
.uwo-spin-sheen{ position: absolute; top: -30%; bottom: -30%; left: 0; width: 38%; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .22) 50%, rgba(255, 255, 255, 0)); animation: uwo-sheen 5.6s cubic-bezier(.4, 0, .2, 1) infinite; pointer-events: none; }
.uwo-spin .uwo-i{ position: relative; font-size: clamp(16px, 4.6cqw, 34px); stroke-width: 1.8; margin-bottom: 4px; transition: opacity .18s; }
.uwo-spin .uwo-i.is-reel{ position: absolute; top: 50%; left: 50%; margin: 0; transform: translate(-50%, -50%) translateY(-1.3em); opacity: 0; }
.uwo.is-spinning .uwo-spin .uwo-i.is-clap{ opacity: 0; }
.uwo.is-spinning .uwo-spin .uwo-i.is-reel{ opacity: 1; animation: uwo-reel 1.4s linear infinite; }
.uwo-spin strong{ position: relative; font: 900 clamp(16px, 5.4cqw, 40px)/1 system-ui, sans-serif; letter-spacing: 1px; text-shadow: 0 2px 10px rgba(0, 0, 0, .35); }
.uwo-spin small{ position: relative; font: 700 clamp(9px, 1.9cqw, 14px)/1.2 var(--disp); white-space: nowrap; letter-spacing: .5px; text-transform: none; opacity: .95; }
.uwo.is-spinning .uwo-spin small{ opacity: .6; }
@keyframes uwo-breath{ from{ opacity: .6; transform: scale(1); } to{ opacity: .95; transform: scale(1.06); } }
@keyframes uwo-pulse{ from{ opacity: .7; transform: scale(1.04); } to{ opacity: 1; transform: scale(1.14); } }
@keyframes uwo-sheen{ 0%{ transform: translateX(-180%) rotate(18deg); } 26%{ transform: translateX(420%) rotate(18deg); } 100%{ transform: translateX(420%) rotate(18deg); } }
@keyframes uwo-reel{ to{ transform: translate(-50%, -50%) translateY(-1.3em) rotate(360deg); } }
@keyframes uwo-flash{ 0%{ opacity: 0; transform: scale(.8); } 25%{ opacity: 1; } 100%{ opacity: 0; transform: scale(1.25); } }
@keyframes uwo-ripple{ 0%{ opacity: .9; transform: scale(1); } 100%{ opacity: 0; transform: scale(1.7); } }

/* the winner, as on the first wheel: the wedge rises and floats, a ring pulse, a light sweep, the card lights up */
.uwo-sec.is-pop{ transform-box: fill-box; transform-origin: 50% 100%; animation: uwo-popin .95s cubic-bezier(.34, 1.56, .64, 1) both, uwo-popfloat 3.4s ease-in-out .95s infinite alternate; filter: drop-shadow(0 0 22px rgba(0, 0, 0, .78)) drop-shadow(0 0 16px var(--sp, rgba(255, 99, 181, .7))); }
.uwo-sec.is-pop .uwo-sec-edge{ stroke: rgba(255, 255, 255, .9); stroke-width: 4; }
@keyframes uwo-popin{ 0%{ transform: translateY(0) scale(1); } 55%{ transform: translateY(-2.5%) scale(1.08); } 100%{ transform: translateY(-1.8%) scale(1.06); } }
@keyframes uwo-popfloat{ from{ transform: translateY(-1.8%) scale(1.06); } to{ transform: translateY(-2.4%) scale(1.07); } }
.uwo-sheen{ opacity: 0; transform-box: fill-box; }
.uwo-sec.is-pop .uwo-sheen{ animation: uwo-winsheen 1.5s ease-in-out .35s both, uwo-winsheen 1.6s ease-in-out 4.5s infinite; }
@keyframes uwo-winsheen{ 0%{ transform: translateX(0); opacity: 0; } 10%{ opacity: 1; } 60%{ opacity: 1; } 100%{ transform: translateX(320%); opacity: 0; } }
.uwo-pulse{ opacity: 0; transform-box: view-box; transform-origin: 500px 500px; pointer-events: none; }
.uwo-sweep{ position: absolute; left: 0; top: 0; width: 160px; height: 6px; margin: -3px 0 0 -80px; border-radius: 6px; opacity: 0; pointer-events: none; z-index: 6; transform-origin: 50% 50%;
  background: linear-gradient(90deg, rgba(255, 22, 139, 0), rgba(255, 99, 181, .9) 45%, rgba(88, 216, 255, .95) 70%, rgba(247, 247, 252, 1) 100%); box-shadow: 0 0 18px rgba(255, 22, 139, .55), 0 0 32px rgba(25, 191, 255, .35); }
.uwo-card{ transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
.uwo-card::before{ content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none; border: 1px solid rgba(255, 99, 181, .9); box-shadow: 0 0 0 1px rgba(255, 22, 139, .3), 0 0 44px rgba(255, 22, 139, .35); opacity: 0; transition: opacity .3s; }
.uwo-card.is-reveal{ transform: translateY(-4px) scale(1.012); }
.uwo-card.is-reveal::before{ opacity: 1; }
.uwo-card.is-lit::before{ border-color: #fff; box-shadow: 0 0 0 2px rgba(255, 99, 181, .9), 0 0 60px rgba(255, 22, 139, .6), 0 0 24px rgba(88, 216, 255, .45); transition: box-shadow .25s, border-color .25s; }
.uwo[data-special]:not([data-special-off]) .uwo-card.is-lit::before{ border-color: var(--sp-soft); box-shadow: 0 0 0 2px var(--sp), 0 0 60px var(--sp); }
.uwo-card.is-reveal .uwo-poster img.is-on{ animation: uwo-posterin .6s cubic-bezier(.2, .8, .2, 1) both; }
.uwo-card.is-reveal .uwo-t{ animation: uwo-rise .38s cubic-bezier(.2, .8, .2, 1) .42s both; }
.uwo-card.is-reveal .uwo-sub{ animation: uwo-rise .32s cubic-bezier(.2, .8, .2, 1) .5s both; }
.uwo-card.is-reveal .uwo-chip{ animation: uwo-tag .32s cubic-bezier(.2, .8, .2, 1) .6s both; }
.uwo-card.is-reveal .uwo-meta, .uwo-card.is-reveal .uwo-desc, .uwo-card.is-reveal .uwo-why, .uwo-card.is-reveal .uwo-cast{ animation: uwo-fade .32s ease-out .7s both; }
.uwo-card.is-reveal .uwo-btns{ animation: uwo-cta .32s cubic-bezier(.2, .8, .2, 1) .9s both; }
@keyframes uwo-posterin{ from{ opacity: 0; transform: translateY(22px) scale(1.04); } to{ opacity: 1; transform: translateY(0) scale(1); } }
@keyframes uwo-rise{ from{ opacity: 0; transform: translateY(8px); } to{ opacity: 1; transform: translateY(0); } }
@keyframes uwo-tag{ from{ opacity: 0; transform: translateY(6px) scale(.96); } to{ opacity: 1; transform: translateY(0) scale(1); } }
@keyframes uwo-fade{ from{ opacity: 0; } to{ opacity: 1; } }
@keyframes uwo-cta{ from{ opacity: .5; transform: translateY(8px) scale(.98); } to{ opacity: 1; transform: translateY(0) scale(1); } }

/* ── the first wheel's effects ── */
:where(.uwo, .uwo-portal) img, .uwo svg image{ -webkit-user-drag: none; user-select: none; -webkit-touch-callout: none; }
.uwo-poster img{ pointer-events: none; }
.uwo-fx{ position: absolute; inset: -30%; z-index: 4; width: 160%; height: 160%; pointer-events: none; }
.uwo-card-fx{ position: absolute; inset: -64px; width: calc(100% + 128px); height: calc(100% + 128px); pointer-events: none; z-index: 4; opacity: 0; transition: opacity .6s; }
.uwo-card-fx.is-on{ opacity: 1; }
.uwo-bg-special{ position: absolute; inset: 0; z-index: 2; opacity: 0; transition: opacity 1s; }
.uwo[data-special="fire"]{ --sp: #ff7a1a; --sp-soft: #ffd27f; }
.uwo[data-special="love"]{ --sp: #ff3d6e; --sp-soft: #ffd1dc; }
.uwo[data-special="horror"]{ --sp: #ff2a2a; --sp-soft: #ff6b6b; }
.uwo[data-special="fire"] .uwo-bg-special{ background: radial-gradient(ellipse 70% 60% at 50% 45%, rgba(255, 110, 20, .3), transparent 70%), linear-gradient(180deg, rgba(60, 10, 0, .35), rgba(20, 5, 0, .5)); }
.uwo[data-special="love"] .uwo-bg-special{ background: radial-gradient(ellipse 70% 60% at 50% 45%, rgba(255, 61, 110, .28), transparent 70%), linear-gradient(180deg, rgba(60, 0, 30, .35), rgba(30, 0, 20, .5)); }
.uwo[data-special="horror"] .uwo-bg-special{ background: radial-gradient(ellipse 60% 50% at 50% 45%, rgba(120, 0, 0, .35), transparent 70%), linear-gradient(180deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, .7)); }
.uwo[data-special]:not([data-special-off]) .uwo-bg-special{ opacity: 1; }
.uwo-spin-tint{ position: absolute; inset: 0; border-radius: 50%; opacity: 0; transition: opacity .6s; pointer-events: none; }
.uwo[data-special="fire"] .uwo-spin-tint{ background: radial-gradient(circle at 32% 24%, #ffc078 0%, #ff7a1a 42%, #c2410c 70%, #6b1a00 100%); }
.uwo[data-special="love"] .uwo-spin-tint{ background: radial-gradient(circle at 32% 24%, #ffb4c8 0%, #ff3d6e 42%, #b4123f 70%, #5c0a22 100%); }
.uwo[data-special="horror"] .uwo-spin-tint{ background: radial-gradient(circle at 32% 24%, #5a1010 0%, #2a0606 42%, #140202 70%, #000 100%); }
.uwo[data-special]:not([data-special-off]) .uwo-spin-tint{ opacity: 1; }
.uwo[data-special]:not([data-special-off]) .uwo-spin{ border-color: var(--sp-soft); box-shadow: 0 0 0 8px rgba(255, 255, 255, .06), 0 0 36px var(--sp), 0 16px 36px rgba(0, 0, 0, .55); }
.uwo[data-special]:not([data-special-off]) .uwo-spin-aura{ background: radial-gradient(circle, color-mix(in srgb, var(--sp) 55%, transparent) 0%, color-mix(in srgb, var(--sp) 22%, transparent) 38%, transparent 66%); }
.uwo[data-special]:not([data-special-off]) .uwo-rim{ stroke: var(--sp); }
.uwo[data-special]:not([data-special-off]) .uwo-rim-glow{ opacity: .5; }
.uwo[data-special]:not([data-special-off]) .uwo-glow{ background: radial-gradient(closest-side, color-mix(in srgb, var(--sp) 45%, transparent), transparent 100%); }
.uwo[data-special]:not([data-special-off]) .uwo-pointer path:first-child{ fill: var(--sp); }
.uwo-rim{ transition: stroke .6s; }
.uwo-blackout{ position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: 0; visibility: hidden; background: radial-gradient(circle at var(--bx, 50%) var(--by, 40%), rgba(0, 0, 0, .35) 0, rgba(0, 0, 0, .84) var(--br, 300px), rgba(2, 0, 4, .97) calc(var(--br, 300px) * 2.3)); }
.uwo-blackout.is-on{ visibility: visible; }
.uwo-blackout-red{ position: absolute; left: var(--bx, 50%); top: var(--by, 40%); width: calc(var(--br, 300px) * 3.2); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(255, 30, 30, 0) 36%, rgba(255, 20, 20, .32) 52%, rgba(255, 0, 0, .1) 62%, transparent 70%); animation: uwo-emergency 1.3s ease-in-out infinite alternate; }
.uwo-blackout-flash{ position: absolute; inset: 0; background: rgba(210, 220, 255, .55); opacity: 0; }
@keyframes uwo-emergency{ from{ opacity: .45; } to{ opacity: 1; } }
.uwo-next{ display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; font: 700 12px/1 var(--disp); color: #fff; background: color-mix(in srgb, var(--sp, #ff2d95) 22%, rgba(10, 8, 20, .7)); border: 1px solid var(--sp, #ff2d95); box-shadow: 0 0 18px color-mix(in srgb, var(--sp, #ff2d95) 45%, transparent); }
.uwo-next svg{ color: var(--sp); font-size: 15px; }
.uwo-next[hidden]{ display: none; }

/* ── filter panel: the first wheel's own (ufw.css); here it only needs its place in the grid ── */
.uwo-ufw{ grid-column: 2 / -1; grid-row: 2; align-self: start; min-height: 0; }
/* the rail runs down beside the wheel AND the filters, so every category shows */
.uwo-rail{ grid-row: 1 / span 2; align-self: start; }
@media (max-width: 1060px){ .uwo-ufw{ grid-column: 1 / -1; grid-row: auto; } .uwo-rail{ grid-row: auto; } }
.uwo-ufw .ufw-filters{ margin: 0; }
@media (max-width: 560px){ .uwo-ufw .ufw-filters-head{ flex-wrap: wrap; gap: 10px; } .uwo-ufw .ufw-filters-count{ width: 100%; white-space: normal; } }
/* ── share ── */
.uwo-btn.uwo-shr{ grid-column: 1 / -1; width: 100%; margin-top: 10px; min-height: 44px; border-color: rgba(255, 106, 184, .45); background: linear-gradient(135deg, rgba(255, 45, 149, .14), rgba(122, 92, 255, .14)); }
.uwo-btn.uwo-shr:hover{ border-color: #ff6ab8; box-shadow: 0 0 22px rgba(255, 45, 149, .35); }
.uwo-sh{ position: fixed; inset: 0; z-index: 2147483000; display: grid; place-items: center; padding: 16px; background: rgba(4, 3, 10, .82); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; transition: opacity .25s; }
.uwo-sh[hidden]{ display: none; }
.uwo-sh.is-on{ opacity: 1; }
.uwo-sh-box{ position: relative; width: min(620px, 100%); max-height: calc(100dvh - 32px); overflow: auto; padding: 22px; border-radius: 22px; color: #f4f2fb; scrollbar-width: thin;
  background: linear-gradient(180deg, rgba(26, 20, 48, .97), rgba(12, 10, 24, .98)); border: 1px solid rgba(255, 45, 149, .5); box-shadow: 0 0 0 1px rgba(122, 92, 255, .2), 0 0 70px rgba(255, 45, 149, .28), 0 40px 90px rgba(0, 0, 0, .6);
  transform: translateY(14px) scale(.97); transition: transform .35s cubic-bezier(.2, .9, .3, 1.15); }
.uwo-sh.is-on .uwo-sh-box{ transform: none; }
:where(.uwo, .uwo-portal) .uwo-sh-x{ position: absolute; right: 14px; top: 14px; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; font-size: 17px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); }
.uwo-sh-x:hover{ background: var(--pink); }
.uwo-sh-h{ display: flex; flex-direction: column; gap: 4px; padding-right: 44px; }
.uwo-sh-k{ font: 800 12px/1 var(--disp); letter-spacing: .14em; color: var(--pink2); }
.uwo-sh-t{ font: 900 20px/1.25 var(--disp); }
.uwo-sh-tabs{ display: inline-flex; gap: 4px; margin: 14px 0 12px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); }
:where(.uwo, .uwo-portal) .uwo-sh-tabs button{ padding: 8px 18px; border-radius: 999px; font: 700 13px/1 var(--disp); color: var(--muted); }
.uwo-sh-tabs button.is-on{ color: #fff; background: linear-gradient(135deg, #ff6ab8, #ff2d95 55%, #c4006b); box-shadow: 0 0 16px rgba(255, 45, 149, .5); }
.uwo-sh-stage{ position: relative; display: grid; place-items: center; aspect-ratio: 1200 / 630; border-radius: 14px; overflow: hidden; background: radial-gradient(circle at 50% 45%, rgba(255, 45, 149, .18), rgba(10, 8, 20, .9) 70%); border: 1px solid rgba(255, 255, 255, .08); }
.uwo-sh-stage.is-story{ aspect-ratio: 1080 / 1920; width: min(100%, 300px); margin: 0 auto; }
.uwo-sh-img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.uwo-sh-stage.is-ready .uwo-sh-img{ animation: uwo-shin .7s cubic-bezier(.2, .9, .3, 1.1) both; }
.uwo-sh-stage.is-ready::after{ content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 30%; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .35), rgba(255, 255, 255, 0)); transform: translateX(-150%) rotate(14deg); animation: uwo-shsheen 1.1s ease-in-out .45s both; pointer-events: none; }
@keyframes uwo-shin{ 0%{ opacity: 0; transform: scale(1.12); filter: brightness(1.8) blur(4px); } 100%{ opacity: 1; transform: scale(1); filter: none; } }
@keyframes uwo-shsheen{ to{ transform: translateX(480%) rotate(14deg); } }
/* the wheel while the card is being drawn */
.uwo-sh-ring{ position: relative; width: 42%; max-width: 170px; aspect-ratio: 1; border-radius: 50%; opacity: 0; transition: opacity .3s;
  background: conic-gradient(#ff2d95 0 30deg, #2a1846 30deg 60deg, #7a5cff 60deg 90deg, #2a1846 90deg 120deg, #ff6ab8 120deg 150deg, #2a1846 150deg 180deg, #27d8ff 180deg 210deg, #2a1846 210deg 240deg, #ff2d95 240deg 270deg, #2a1846 270deg 300deg, #a86bff 300deg 330deg, #2a1846 330deg 360deg);
  box-shadow: 0 0 0 8px #ff3d9a, 0 0 0 12px #9a4dff, 0 0 40px rgba(255, 45, 149, .7); }
.uwo-sh-ring::before{ content: ""; position: absolute; inset: -8px; border-radius: 50%; background: repeating-conic-gradient(#ffe3f2 0 2deg, transparent 2deg 15deg); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px)); mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px)); }
.uwo-sh-ring i{ position: absolute; inset: 32%; border-radius: 50%; background: radial-gradient(circle at 32% 24%, #ff63b5, #ff168b 42%, #b1005f 70%, #790044); box-shadow: 0 0 0 4px #ff63b5, 0 0 20px rgba(255, 45, 149, .8); }
.uwo-sh-stage.is-wait .uwo-sh-ring{ opacity: 1; animation: uwo-orbit .8s linear infinite; }
.uwo-sh-stage::before{ content: ""; position: absolute; left: 50%; top: calc(50% - min(21%, 85px) - 22px); width: 0; height: 0; border-left: 11px solid transparent; border-right: 11px solid transparent; border-top: 20px solid #ff2d95; transform: translateX(-50%); filter: drop-shadow(0 0 6px #ff2d95); opacity: 0; z-index: 1; }
.uwo-sh-stage.is-wait::before{ opacity: 1; }
.uwo-sh-stage.is-story.is-wait::before{ top: calc(50% - 85px - 22px); }
.uwo-sh-wait{ position: absolute; bottom: 12px; left: 0; right: 0; text-align: center; font-size: 12.5px; color: var(--muted); opacity: 0; }
.uwo-sh-stage.is-wait .uwo-sh-wait, .uwo-sh-stage:not(.is-wait):not(.is-ready) .uwo-sh-wait{ opacity: 1; }
.uwo-sh-net{ display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px; margin-top: 14px; }
.uwo-sn{ display: flex; align-items: center; gap: 9px; padding: 11px 12px; border-radius: 12px; font-size: 13px; font-weight: 700; color: #fff; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1); transition: transform .15s, border-color .2s, background .2s; }
.uwo-sn svg{ font-size: 19px; color: var(--n); }
.uwo-sn:hover{ transform: translateY(-2px); border-color: var(--n); background: color-mix(in srgb, var(--n) 14%, transparent); }
.uwo-sn-touch{ display: none; }
@media (hover: none) and (pointer: coarse){ .uwo-sn-touch{ display: flex; } }
.uwo-sh-row{ display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-top: 10px; }
.uwo-sh-link{ display: flex; align-items: center; gap: 8px; min-width: 0; padding: 5px 5px 5px 14px; border-radius: 12px; background: rgba(0, 0, 0, .35); border: 1px solid rgba(255, 255, 255, .1); }
.uwo-sh-link span{ flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--muted); }
:where(.uwo, .uwo-portal) .uwo-sh-copy, :where(.uwo, .uwo-portal) .uwo-sh-dl{ display: inline-flex; align-items: center; gap: 7px; padding: 10px 14px; border-radius: 10px; font: 700 12.5px/1 var(--disp); white-space: nowrap; background: linear-gradient(135deg, #ff6ab8, #ff2d95 55%, #c4006b); }
:where(.uwo, .uwo-portal) .uwo-sh-dl{ background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .16); }
.uwo-sh-dl:hover{ border-color: #fff; }
@media (max-width: 560px){ .uwo-sh-box{ padding: 16px; } .uwo-sh-net{ grid-template-columns: repeat(4, 1fr); } .uwo-sn{ flex-direction: column; gap: 5px; padding: 10px 4px; font-size: 10.5px; text-align: center; } .uwo-sh-row{ grid-template-columns: 1fr; } }

/* the theme paints visited links pink: the card's links keep their own colour */
.uwo a, .uwo a:visited, .uwo a:hover, .uwo a:focus{ color: inherit; text-decoration: none; }
.uwo a.uwo-btn, .uwo a.uwo-btn:visited, .uwo a.uwo-btn:hover, .uwo a.uwo-btn:focus, .uwo a.uwo-btn:active{ color: #fff; }
.uwo .uwo-watch svg{ fill: #fff; }

/* share button: neon frame, moving light, as premium as the rest */
.uwo .uwo-btn.uwo-shr{ position: relative; overflow: hidden; isolation: isolate; min-height: 48px; font-size: 14px; color: #fff; border: 0; background: linear-gradient(135deg, rgba(255, 45, 149, .22), rgba(122, 92, 255, .26)); box-shadow: inset 0 0 0 1px rgba(255, 140, 210, .55), 0 0 24px rgba(255, 45, 149, .25); }
.uwo .uwo-btn.uwo-shr::before{ content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1.5px; background: conic-gradient(from var(--a, 0deg), #ff2d95, #7a5cff, #27d8ff, #ff2d95); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: uwo-shrspin 4s linear infinite; }
.uwo .uwo-btn.uwo-shr::after{ content: ""; position: absolute; top: -40%; bottom: -40%; left: 0; width: 28%; z-index: -1; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .28), rgba(255, 255, 255, 0)); transform: translateX(-160%) rotate(16deg); animation: uwo-shrsheen 5s ease-in-out 1s infinite; }
.uwo .uwo-btn.uwo-shr svg{ font-size: 17px; filter: drop-shadow(0 0 6px rgba(255, 106, 184, .9)); }
.uwo .uwo-btn.uwo-shr:hover{ box-shadow: inset 0 0 0 1px #ff8cd2, 0 0 34px rgba(255, 45, 149, .5); transform: translateY(-1px); }
@property --a{ syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes uwo-shrspin{ to{ --a: 360deg; } }
@keyframes uwo-shrsheen{ 0%, 55%{ transform: translateX(-160%) rotate(16deg); } 85%, 100%{ transform: translateX(460%) rotate(16deg); } }

/* SPIN core leans to the cursor, as on the first wheel (off with the 5D setting) */
.uwo .uwo-spin:not([disabled]):hover{ transform: perspective(700px) rotateX(calc(var(--sy, 0) * -9deg)) rotateY(calc(var(--sx, 0) * 9deg)) scale(1.04); }
.uwo .uwo-spin.is-press{ transform: perspective(700px) rotateX(calc(var(--sy, 0) * -16deg)) rotateY(calc(var(--sx, 0) * 16deg)) translateZ(-34px) scale(.95); }
.uwo[data-no5d] .uwo-spin:not([disabled]):hover{ transform: scale(1.04); }
.uwo[data-no5d] .uwo-spin.is-press{ transform: scale(.95); }
/* the ⚙ icon comes from the first wheel (class ufw-icon): draw it as a line icon */
.uwo .uwo-gear svg{ width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }