/* Original TibiaNexus Wheel artwork. The familiar four-domain structure is factual UI geometry;
   every frame, texture, symbol, and ornament below is a TibiaNexus-created treatment. */

.wheel-planner {
  --wheel-parchment: #d9c59b;
  --wheel-brass-dark: #594116;
  --wheel-brass: #bc9141;
  --wheel-brass-light: #f0cd72;
}

.wheel-planner-workspace {
  grid-template-columns: minmax(250px, 300px) minmax(610px, 1fr);
  align-items: start;
}

.wheel-planner-canvas-card {
  min-height: 850px;
  padding: 16px 18px 12px;
  background:
    radial-gradient(circle at 50% 47%, rgba(186, 140, 51, 0.1), transparent 31rem),
    linear-gradient(155deg, rgba(14, 21, 28, 0.98), rgba(6, 11, 16, 0.99));
  border-color: rgba(210, 174, 99, 0.23);
  position: relative;
}

.wheel-build-effects {
  border-color: rgba(210, 174, 99, 0.23);
  background:
    linear-gradient(155deg, rgba(199, 149, 223, 0.04), transparent 48%),
    rgba(17, 26, 35, 0.88);
}

.wheel-build-effects > .wheel-side-card-header {
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(210, 174, 99, 0.14);
}

.wheel-build-effects .wheel-summary-group { padding-top: 10px; }

.wheel-planner-support {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
  gap: 12px;
  align-items: start;
}

.wheel-build-totals {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 12px;
}
.wheel-build-totals > .wheel-side-card-header { grid-column: 1 / -1; }
.wheel-build-totals > .wheel-summary-group { padding-top: 0; border-top: 0; }
.wheel-planner-toolbar {
  background:
    linear-gradient(180deg, rgba(41, 36, 26, 0.42), rgba(9, 15, 21, 0.94)),
    rgba(10, 16, 23, 0.9);
  border-bottom-color: rgba(214, 175, 92, 0.2);
}

.wheel-planner-canvas-card .wheel-canvas-header {
  align-items: center;
  padding: 0 2px 7px;
}

.wheel-artwork-svg {
  width: min(100%, 880px);
  max-height: 820px;
  margin: -4px auto -1px;
  overflow: visible;
  isolation: isolate;
}

.wheel-art-shadow {
  fill: rgba(0, 0, 0, 0.6);
  filter: drop-shadow(0 20px 25px rgba(0, 0, 0, 0.5));
}

.wheel-art-brass-rim {
  fill: url(#tn-wheel-brass);
  stroke: #2d210c;
  stroke-width: 4;
}

.wheel-art-wheel-face {
  fill: url(#tn-wheel-checker);
  stroke: #d0a94f;
  stroke-width: 2;
}

.wheel-art-inner-rim {
  fill: none;
  stroke: rgba(42, 29, 8, 0.92);
  stroke-width: 4;
}

.wheel-art-face-outline {
  fill: none;
  stroke: rgba(255, 224, 150, 0.42);
  stroke-width: 1.5;
}

.wheel-art-domain {
  fill: rgba(22, 25, 27, 0.38);
  stroke: none;
}

.wheel-art-ring-line,
.wheel-art-domain-line {
  fill: none;
  stroke: rgba(0, 0, 0, 0.72);
  stroke-width: 2.35;
  pointer-events: none;
}

.wheel-art-domain-line {
  stroke: rgba(221, 183, 101, 0.48);
  stroke-width: 2.2;
}
.wheel-art-ornaments {
  --ornament-core: #111416;
  --ornament-accent: #c99c43;
  --ornament-detail: #e4c56e;
  pointer-events: none;
  filter: drop-shadow(0 6px 7px rgba(0, 0, 0, 0.52));
}

.wheel-art-ornaments.vocation-knight { --ornament-core: #121a20; --ornament-accent: #b7c7cf; --ornament-detail: #e1edf0; }
.wheel-art-ornaments.vocation-paladin { --ornament-core: #17202a; --ornament-accent: #e6c85d; --ornament-detail: #f5e89c; }
.wheel-art-ornaments.vocation-sorcerer { --ornament-core: #25172e; --ornament-accent: #ae7ed5; --ornament-detail: #dfb6f2; }
.wheel-art-ornaments.vocation-druid { --ornament-core: #12231a; --ornament-accent: #70b684; --ornament-detail: #b3dda8; }
.wheel-art-ornaments.vocation-monk { --ornament-core: #11241f; --ornament-accent: #62bea9; --ornament-detail: #a9e0d2; }

.wheel-art-ornament-plate {
  fill: url(#tn-wheel-brass);
  stroke: #332309;
  stroke-width: 3;
  stroke-linejoin: round;
}

.wheel-art-ornament-inlay {
  fill: none;
  stroke: color-mix(in srgb, var(--ornament-accent) 55%, #e0b85c);
  stroke-width: 1.5;
  stroke-linejoin: round;
}

.wheel-art-ornament-emblem-base {
  fill: var(--ornament-core);
  stroke: color-mix(in srgb, var(--ornament-accent) 58%, #72551f);
  stroke-width: 1.5;
}

.wheel-art-ornament-emblem {
  fill: none;
  stroke: var(--ornament-accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wheel-art-ornament-detail {
  fill: none;
  stroke: var(--ornament-detail);
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.76;
}

.wheel-art-ornament-stud {
  fill: #f0cd72;
  stroke: #4b3510;
  stroke-width: 1.2;
}

.wheel-art-filigree {
  fill: none;
  stroke: #a87c2f;
  stroke-width: 4.2;
  stroke-linecap: round;
}
.wheel-art-slice {
  cursor: default;
  outline: none;
  --icon-color: #b7c3cb;
  --domain-color: #7b8790;
  --domain-light: #c8d0d5;
}

.wheel-art-slice.domain-tl { --domain-color: #609944; --domain-light: #b7dc7b; }
.wheel-art-slice.domain-tr { --domain-color: #b23e5c; --domain-light: #ee8c9f; }
.wheel-art-slice.domain-bl { --domain-color: #268b78; --domain-light: #7bd5c2; }
.wheel-art-slice.domain-br { --domain-color: #84449a; --domain-light: #ca8ee0; }

.wheel-art-slice-shape {
  fill: rgba(9, 13, 16, 0.26);
  transition: fill 130ms ease, filter 130ms ease;
}

.wheel-art-slice:nth-child(even) .wheel-art-slice-shape {
  fill: rgba(255, 255, 255, 0.018);
}

.wheel-art-slice.is-available .wheel-art-slice-shape {
  fill: color-mix(in srgb, var(--domain-color) 26%, #252d30);
}

.wheel-art-slice-aura {
  fill: var(--domain-color);
  stroke: none;
  pointer-events: none;
  filter: saturate(0.96);
  transition: filter 160ms ease;
}

.wheel-art-slice.is-unlocked:hover .wheel-art-slice-aura,
.wheel-art-slice.is-unlocked:focus .wheel-art-slice-aura,
.wheel-art-slice.is-selected .wheel-art-slice-aura {
  filter: brightness(1.22) saturate(1.14);
}

.wheel-art-slice.is-unlocked:hover .wheel-art-slice-shape,
.wheel-art-slice.is-unlocked:focus .wheel-art-slice-shape {
  fill: color-mix(in srgb, var(--domain-color) 46%, #151d20);
  filter: brightness(1.2) saturate(1.12);
}

.wheel-art-slice.has-points .wheel-art-slice-shape {
  fill: rgba(10, 15, 18, 0.34);
}

.wheel-art-slice.is-full .wheel-art-slice-shape {
  fill: rgba(10, 15, 18, 0.38);
}

.wheel-art-slice.is-selected .wheel-art-slice-shape,
.wheel-art-slice.is-selected:hover .wheel-art-slice-shape {
  fill: color-mix(in srgb, var(--domain-color) 48%, #152024);
  filter: brightness(1.15) saturate(1.16);
}
.wheel-art-slice.is-locked {
  cursor: default;
  opacity: 0.42;
  filter: saturate(0.25);
}

.wheel-art-slice-fill {
  fill: color-mix(in srgb, var(--domain-color) 88%, #161a1c);
  stroke: none;
  pointer-events: none;
  transition: fill 130ms ease, filter 130ms ease;
}

.wheel-art-slice.is-full .wheel-art-slice-fill {
  fill: color-mix(in srgb, var(--domain-color) 94%, var(--domain-light));
  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--domain-color) 26%, transparent));
}

.wheel-art-slice.is-unlocked:hover .wheel-art-slice-fill,
.wheel-art-slice.is-unlocked:focus .wheel-art-slice-fill,
.wheel-art-slice.is-selected .wheel-art-slice-fill {
  fill: color-mix(in srgb, var(--domain-color) 72%, var(--domain-light));
  filter: brightness(1.18) saturate(1.16) drop-shadow(0 0 4px color-mix(in srgb, var(--domain-light) 22%, transparent));
}

.wheel-art-slice-outline {
  fill: none;
  stroke: rgba(0, 0, 0, 0.9);
  stroke-width: 2.45;
  pointer-events: none;
  transition: stroke 130ms ease, stroke-width 130ms ease, filter 130ms ease;
}

.wheel-art-slice.is-unlocked:hover .wheel-art-slice-outline,
.wheel-art-slice.is-unlocked:focus .wheel-art-slice-outline {
  stroke: color-mix(in srgb, var(--domain-light) 82%, #f5d884);
  stroke-width: 2.3;
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--domain-light) 30%, transparent));
}

.wheel-art-slice.is-selected .wheel-art-slice-outline,
.wheel-art-slice.is-selected:hover .wheel-art-slice-outline {
  stroke: #fff6cf;
  stroke-width: 2.35;
  filter: drop-shadow(0 0 6px rgba(255, 236, 171, 0.5));
}

.wheel-art-icon {
  color: var(--icon-color);
  pointer-events: none;
}

.wheel-art-icon-disc {
  fill: rgba(8, 12, 15, 0.94);
  stroke: color-mix(in srgb, var(--icon-color) 67%, #786337);
  stroke-width: 2.2;
}

.wheel-art-icon-symbol,
.wheel-art-medallion-icon,
.wheel-art-center-icon {
  color: var(--icon-color);
}

.wheel-art-slice.has-points .wheel-art-icon-disc {
  fill: color-mix(in srgb, var(--wheel-accent) 22%, #080c0f);
  stroke: #e8c76f;
}

.wheel-art-slice.is-full .wheel-art-icon-disc {
  stroke: #ffe9a8;
  stroke-width: 3;
}

.wheel-art-complete-ring {
  fill: none;
  stroke: rgba(242, 203, 109, 0.5);
  stroke-width: 1;
  stroke-dasharray: 2 3;
}

.wheel-art-dedication circle {
  fill: #112015;
  stroke: #69ad70;
  stroke-width: 1.7;
}

.wheel-art-dedication use { color: #87d48d; }

.wheel-art-dedication-plus {
  fill: none;
  stroke: #dfc761;
  stroke-width: 1.4;
}


.kind-fire { --icon-color: #ef7848; }
.kind-ice { --icon-color: #73cde4; }
.kind-energy { --icon-color: #b58cf0; }
.kind-nature { --icon-color: #75c77f; }
.kind-holy { --icon-color: #f0d76d; }
.kind-death { --icon-color: #b778d4; }
.kind-mana { --icon-color: #62a9e8; }
.kind-life { --icon-color: #e46f73; }
.kind-shield { --icon-color: #91a8b7; }
.kind-bow { --icon-color: #d8a75f; }
.kind-fist { --icon-color: #d58d65; }
.kind-blades { --icon-color: #c9d0d4; }
.kind-arcane { --icon-color: #c48ce4; }
.kind-pack { --icon-color: #c6a665; }
.kind-augment { --icon-color: #e59355; }
.kind-crystal { --icon-color: #71d6c7; }
.kind-drop { --icon-color: #7bbce7; }
.kind-star { --icon-color: #f0cd72; }
.kind-rune { --icon-color: #a3b4c0; }

.wheel-art-revelation-dot-layer,
.wheel-art-revelation-dots {
  pointer-events: none;
}

.wheel-art-revelation-dot-layer {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.88));
}

.wheel-art-revelation-dot {
  fill: #12191a;
  stroke: #7d652c;
  stroke-width: 1.8;
  opacity: 0.78;
}

.wheel-art-revelation-dot.is-active {
  fill: #55bd64;
  stroke: #b8e88f;
  opacity: 1;
  filter: drop-shadow(0 0 4px rgba(85, 189, 100, 0.75));
}
.wheel-art-medallion-bridge {
  fill: none;
  stroke: url(#tn-wheel-brass);
  stroke-width: 12;
}

.wheel-art-medallion {
  color: var(--icon-color);
  cursor: pointer;
  opacity: 1;
  outline: none;
}

.wheel-art-medallion.stage-0 .wheel-art-medallion-frame,
.wheel-art-medallion.stage-0 .wheel-art-medallion-ring,
.wheel-art-medallion.stage-0 .wheel-art-medallion-core,
.wheel-art-medallion.stage-0 .wheel-art-medallion-icon,
.wheel-art-medallion.stage-0 .wheel-art-medallion-stud { opacity: 0.58; }

.wheel-art-medallion-backing {
  fill: #070b0e;
  stroke: rgba(205, 165, 77, 0.42);
  stroke-width: 1.5;
  pointer-events: none;
}
.wheel-art-medallion-progress-track,
.wheel-art-medallion-progress {
  fill: none;
  stroke-width: 4;
  pointer-events: none;
}

.wheel-art-medallion-progress-track { stroke: rgba(12, 18, 20, 0.92); }
.wheel-art-medallion-progress {
  stroke: color-mix(in srgb, var(--icon-color) 72%, #77cf75);
  stroke-linecap: round;
  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--icon-color) 48%, transparent));
}

.wheel-art-medallion.is-selected .wheel-art-medallion-core,
.wheel-art-medallion:focus .wheel-art-medallion-core {
  stroke: #fff0b4;
  stroke-width: 3;
  filter: drop-shadow(0 0 5px rgba(255, 225, 143, 0.48));
}

.wheel-art-medallion-frame {
  fill: url(#tn-wheel-brass);
  stroke: #32240b;
  stroke-width: 3;
}

.wheel-art-medallion-ring {
  fill: #4b3715;
  stroke: #e2bd62;
  stroke-width: 1.3;
}

.wheel-art-medallion-core {
  fill: #090d10;
  stroke: color-mix(in srgb, var(--icon-color) 72%, #d3b15b);
  stroke-width: 2;
}

.wheel-art-medallion-stud {
  fill: #dbb653;
  stroke: #34240b;
  stroke-width: 0.8;
}

.wheel-art-medallion:not(.stage-0) {
  opacity: 1;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--icon-color) 38%, transparent));
}

.wheel-art-medallion-stage {
  fill: #c9b884;
  font-size: 8px;
  font-weight: 800;
  paint-order: stroke;
  stroke: #080b0d;
  stroke-width: 3px;
}

.wheel-art-vessel {
  --vessel-color: #68777c;
  color: var(--vessel-color);
  cursor: pointer;
  outline: none;
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.42));
}

.wheel-art-vessel.quality-1 { --vessel-color: #77d8c9; }
.wheel-art-vessel.quality-2 { --vessel-color: #8acfea; }
.wheel-art-vessel.quality-3 { --vessel-color: #d09af0; }

.wheel-art-vessel-hit {
  fill: transparent;
  pointer-events: all;
}

.wheel-art-vessel-frame {
  fill: url(#tn-wheel-brass);
  stroke: #34240b;
  stroke-width: 2.2;
  transition: stroke 140ms ease, filter 140ms ease;
}

.wheel-art-vessel-core {
  fill: #05090b;
  stroke: #78602d;
  stroke-width: 1.7;
  transition: fill 140ms ease, stroke 140ms ease;
}

.wheel-art-vessel:hover .wheel-art-vessel-frame,
.wheel-art-vessel:focus .wheel-art-vessel-frame,
.wheel-art-vessel.is-selected .wheel-art-vessel-frame {
  stroke: #ffe093;
  filter: drop-shadow(0 0 7px rgba(230, 190, 93, 0.72));
}

.wheel-art-vessel:hover .wheel-art-vessel-core,
.wheel-art-vessel:focus .wheel-art-vessel-core,
.wheel-art-vessel.is-selected .wheel-art-vessel-core {
  fill: #0e171a;
  stroke: var(--vessel-color);
}

.wheel-art-vessel.has-gem {
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--vessel-color) 48%, transparent));
}

.wheel-art-vessel.has-gem .wheel-art-vessel-core { stroke: color-mix(in srgb, var(--vessel-color) 62%, #d7b65e); }

.wheel-art-vessel-crystal {
  color: var(--vessel-color);
  pointer-events: none;
}

.wheel-art-vessel-add {
  fill: #8a989c;
  font: 800 22px/1 Arial, sans-serif;
  pointer-events: none;
}

.wheel-art-vessel-quality-pips { pointer-events: none; }
.wheel-art-vessel-quality-pips circle {
  fill: #172126;
  stroke: #66777e;
  stroke-width: 0.7;
}
.wheel-art-vessel-quality-pips circle.is-active {
  fill: var(--vessel-color);
  stroke: #f1d88f;
  filter: drop-shadow(0 0 2px var(--vessel-color));
}

.wheel-art-vessel-label {
  fill: #9aa9aa;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 0.08em;
  paint-order: stroke;
  pointer-events: none;
  stroke: #05080a;
  stroke-width: 2.5px;
}

.wheel-art-vessel.has-gem .wheel-art-vessel-label { fill: #e7d69d; }
.wheel-art-center-rim {
  fill: url(#tn-wheel-brass);
  stroke: #34250c;
  stroke-width: 4;
}

.wheel-art-center-inner-ring {
  fill: #4a3615;
  stroke: #f0cd72;
  stroke-width: 1.3;
}

.wheel-art-center-face {
  fill: #070b0e;
  stroke: rgba(255, 225, 151, 0.52);
  stroke-width: 1.4;
}

.wheel-art-center { --icon-color: var(--wheel-accent); }
.wheel-art-center-points {
  fill: #fff0bd;
  font: 800 21px Georgia, serif;
}

.wheel-art-center-caption {
  fill: #b39d68;
  font-size: 6.5px;
  font-weight: 800;
  letter-spacing: 0.13em;
}

.wheel-art-center-vocation {
  fill: var(--wheel-accent);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
@media (max-width: 1180px) {
  .wheel-planner-workspace { grid-template-columns: 1fr; }
  .wheel-planner-config {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .wheel-planner-config > .wheel-build-effects {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 12px;
  }
  .wheel-build-effects > .wheel-side-card-header { grid-column: 1 / -1; }
  .wheel-build-effects > .wheel-summary-group:nth-of-type(1),
  .wheel-build-effects > .wheel-summary-group:nth-of-type(2) {
    padding-top: 0;
    border-top: 0;
  }
  .wheel-planner-config > :last-child { grid-column: 1 / -1; }
  .wheel-planner-canvas-card { min-height: 680px; }
}

@media (max-width: 760px) {
  .wheel-planner-config,
  .wheel-planner-support { grid-template-columns: 1fr; }
  .wheel-planner-config > .wheel-build-effects,
  .wheel-build-totals { display: block; grid-column: auto; }
  .wheel-build-totals > .wheel-summary-group + .wheel-summary-group {
    padding-top: 10px;
    border-top: 1px solid var(--wheel-line);
  }
  .wheel-planner-config > :last-child { grid-column: auto; }
  .wheel-planner-canvas-card { min-height: 560px; padding-inline: 8px; }
  .wheel-artwork-svg { max-height: 560px; }
}

@media (prefers-reduced-motion: reduce) {
  .wheel-art-slice-shape,
  .wheel-art-slice-aura,
  .wheel-art-slice-fill,
  .wheel-art-slice-outline { transition: none; }
}

.wheel-vocation-field { grid-column: 1 / -1; }

.wheel-vocation-choices {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
}

.wheel-vocation-choice {
  position: relative;
  display: inline-flex;
  min-width: 0;
  min-height: 31px;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 5px 2px;
  border: 1px solid rgba(164, 179, 188, 0.18);
  border-radius: 5px;
  background: linear-gradient(180deg, rgba(41, 49, 54, 0.86), rgba(17, 23, 28, 0.95));
  color: #9eacb5;
  font-size: 8px;
  font-weight: 800;
  white-space: nowrap;
}

.wheel-vocation-choice::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border: 1px solid #7e8d97;
  border-radius: 50%;
  background: #080c0f;
  box-shadow: inset 0 0 0 2px #080c0f;
}

.wheel-vocation-choice:hover {
  border-color: rgba(224, 190, 111, 0.42);
  color: #e7dcc2;
}

.wheel-vocation-choice.is-active {
  border-color: #c59b48;
  background: linear-gradient(180deg, rgba(105, 83, 43, 0.76), rgba(45, 37, 25, 0.96));
  color: #fff0bd;
  box-shadow: inset 0 0 0 1px rgba(255, 224, 151, 0.12), 0 0 8px rgba(197, 155, 72, 0.15);
}

.wheel-vocation-choice.is-active::before {
  border-color: #f2cf73;
  background: #5ed0bd;
  box-shadow: inset 0 0 0 2px #10231f, 0 0 5px rgba(94, 208, 189, 0.55);
}
.wheel-selection-panel,
.wheel-information-panel {
  overflow: hidden;
  padding: 0;
  border-radius: 8px;
  border-color: rgba(210, 174, 99, 0.28);
  background: linear-gradient(160deg, rgba(23, 31, 38, 0.98), rgba(11, 17, 22, 0.99));
}

.wheel-selection-panel > .wheel-side-card-header,
.wheel-information-panel > .wheel-side-card-header {
  min-height: 36px;
  margin: 0;
  padding: 8px 11px;
  border-bottom: 1px solid rgba(214, 178, 100, 0.28);
  background: linear-gradient(180deg, rgba(102, 80, 49, 0.52), rgba(47, 42, 35, 0.56));
}

.wheel-selection-panel > .wheel-side-card-header strong,
.wheel-information-panel > .wheel-side-card-header strong {
  color: #f1e4c1;
  font: 700 13px/1.1 Georgia, serif;
}

.wheel-selection-panel > .wheel-side-card-header small {
  color: #d5b86f;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.wheel-slice-panel-details {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 11px;
  min-width: 0;
}

.wheel-slice-panel-meter {
  position: relative;
  display: grid;
  place-items: center;
  height: 19px;
  overflow: hidden;
  border: 1px solid #7e6a3d;
  border-radius: 3px;
  background: #070a0c;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.035);
}

.wheel-slice-panel-meter-fill {
  position: absolute;
  inset: 2px auto 2px 2px;
  width: 0;
  max-width: calc(100% - 4px);
  background: linear-gradient(180deg, #66bf55, #24772c);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.38), 0 0 7px rgba(72, 168, 73, 0.35);
}

.wheel-slice-panel-meter strong {
  position: relative;
  z-index: 1;
  color: #f2f5e9;
  font-size: 10px;
  line-height: 1;
  paint-order: stroke;
  text-shadow: 0 1px 2px #000, 0 0 3px #000;
}

.wheel-slice-panel-perk {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 2px;
}

.wheel-slice-panel-perk > span {
  color: #d6b766;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.wheel-slice-panel-perk strong {
  overflow-wrap: anywhere;
  color: #f1f3f4;
  font-size: 11px;
  line-height: 1.25;
}

.wheel-slice-panel-perk small {
  overflow-wrap: anywhere;
  color: #94a7b4;
  font-size: 9px;
  line-height: 1.35;
}

.wheel-slice-panel-notes {
  padding: 0;
}

.wheel-slice-panel-notes p {
  margin: 0 0 5px;
  overflow-wrap: anywhere;
  color: #b2c0c8;
  font-size: 9px;
  line-height: 1.4;
}

.wheel-slice-panel-notes p:last-child { margin-bottom: 0; }
.wheel-slice-unlock-tiers {
  display: grid;
  gap: 6px;
}

.wheel-slice-unlock-tier {
  display: grid;
  grid-template-columns: 17px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  color: #657078;
}

.wheel-slice-unlock-marker {
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
  border: 1px solid #576168;
  border-radius: 50%;
  color: #737d83;
  font: 800 8px/1 Georgia, serif;
}

.wheel-slice-unlock-copy {
  font-size: 9px;
  line-height: 1.3;
}

.wheel-slice-unlock-tier.is-unlocked { color: #d4d9d8; }
.wheel-slice-unlock-tier.is-unlocked .wheel-slice-unlock-marker {
  border-color: #caa84f;
  background: #173d2d;
  color: #d9edb0;
  box-shadow: 0 0 5px rgba(93, 189, 109, 0.32);
}


.wheel-revelation-selection-details {
  display: grid;
  gap: 9px;
  padding: 10px 11px 12px;
}

.wheel-revelation-selection-heading {
  display: grid;
  gap: 2px;
}

.wheel-revelation-selection-heading > span {
  color: #d6b766;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.wheel-revelation-selection-heading > strong {
  color: #f1f3f4;
  font: 700 13px/1.2 Georgia, serif;
}

.wheel-revelation-selection-stage {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  color: #9eacb4;
  font-size: 9px;
}

.wheel-revelation-selection-stage strong { color: #e5ca79; font-size: 11px; }

.wheel-revelation-selection-meter {
  position: relative;
  display: grid;
  place-items: center;
  height: 19px;
  overflow: hidden;
  border: 1px solid #6f613b;
  border-radius: 3px;
  background: #070a0c;
}

.wheel-revelation-selection-meter-fill {
  position: absolute;
  inset: 2px auto 2px 2px;
  max-width: calc(100% - 4px);
  background: linear-gradient(180deg, #66bf55, #24772c);
}

.wheel-revelation-selection-meter strong {
  position: relative;
  z-index: 1;
  color: #f2f5e9;
  font-size: 8px;
  text-shadow: 0 1px 2px #000, 0 0 3px #000;
}

.wheel-revelation-selection-stages {
  display: flex;
  gap: 6px;
}

.wheel-revelation-selection-stages span {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 1px solid #4f5960;
  border-radius: 50%;
  color: #657078;
  font: 800 8px/1 Georgia, serif;
}

.wheel-revelation-selection-stages span.is-active {
  border-color: #caa84f;
  background: #173d2d;
  color: #d9edb0;
}

.wheel-revelation-selection-copy,
.wheel-revelation-selection-effect,
.wheel-revelation-selection-note {
  margin: 0;
  color: #aebbc2;
  font-size: 9px;
  line-height: 1.4;
}

.wheel-revelation-selection-effect {
  max-height: 72px;
  overflow-y: auto;
  color: #85939a;
  scrollbar-gutter: stable;
}

.wheel-revelation-selection-note {
  color: #d0b66f;
}.wheel-selection-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  padding: 0 11px 11px;
}

.wheel-selection-actions button {
  min-width: 0;
  min-height: 30px;
  padding: 5px 3px;
  font-size: 9px;
  white-space: nowrap;
}

.wheel-information-panel {
  height: 272px;
  min-height: 272px;
  max-height: 272px;
  contain: layout paint;
}
.wheel-information-body {
  display: flex;
  height: calc(100% - 36px);
  min-height: 0;
  overflow: hidden;
  flex-direction: column;
}

.wheel-information-body > .wheel-slice-panel-details {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.wheel-panel-empty {
  margin: 0;
  padding: 12px 11px;
  color: #97a8b4;
  font-size: 10px;
  line-height: 1.45;
}

.wheel-information-hint {
  flex: 0 0 auto;
  margin: 0 11px 11px;
  padding-top: 10px;
  border-top: 1px solid rgba(170, 184, 193, 0.12);
  color: #d5b86f;
  font-size: 9px;
}

@media (max-width: 760px) {
  .wheel-information-panel {
    height: 272px;
    min-height: 272px;
    max-height: 272px;
  }
}
@media (max-width: 520px) {
  .wheel-vocation-choices { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Wheel actions stay inside the planner's visual language instead of opening a
   browser/operating-system confirmation box. */
.wheel-confirm-backdrop {
  z-index: 1200;
  background:
    radial-gradient(circle at 50% 42%, rgba(184, 139, 49, 0.13), transparent 34%),
    rgba(2, 7, 10, 0.84);
  backdrop-filter: blur(5px) saturate(0.78);
  animation: wheel-confirm-backdrop-in 130ms ease-out;
}

.wheel-confirm-dialog {
  position: relative;
  width: min(470px, calc(100vw - 32px));
  gap: 12px;
  padding: 22px 20px 18px;
  overflow: hidden;
  border: 1px solid #8c6a27;
  border-radius: 4px;
  background:
    linear-gradient(135deg, rgba(255, 221, 132, 0.045) 0 1px, transparent 1px 8px),
    radial-gradient(circle at 50% 0, rgba(190, 144, 51, 0.12), transparent 44%),
    linear-gradient(180deg, #172027 0%, #0b1217 100%);
  box-shadow:
    0 26px 70px rgba(0, 0, 0, 0.72),
    0 0 0 3px #05090c,
    0 0 0 4px rgba(190, 145, 54, 0.35),
    inset 0 1px 0 rgba(255, 225, 151, 0.16);
  animation: wheel-confirm-dialog-in 150ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.wheel-confirm-dialog::before {
  content: "";
  position: absolute;
  inset: 5px;
  z-index: 0;
  border: 1px solid rgba(212, 174, 88, 0.18);
  border-radius: 2px;
  pointer-events: none;
}

.wheel-confirm-dialog::after {
  content: "";
  position: absolute;
  top: 0;
  left: 20px;
  width: 62px;
  height: 3px;
  background: linear-gradient(90deg, #d3aa4d, rgba(211, 170, 77, 0));
  pointer-events: none;
}

.wheel-confirm-dialog[data-tone="danger"] {
  border-color: #925046;
  box-shadow:
    0 26px 70px rgba(0, 0, 0, 0.72),
    0 0 0 3px #05090c,
    0 0 0 4px rgba(146, 80, 70, 0.32),
    inset 0 1px 0 rgba(255, 210, 151, 0.12);
}

.wheel-confirm-dialog > * {
  position: relative;
  z-index: 1;
}

.wheel-confirm-title {
  padding: 0 0 9px 30px;
  border-bottom: 1px solid rgba(192, 148, 57, 0.3);
  color: #f2d783;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
  letter-spacing: 0.01em;
}

.wheel-confirm-title::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border: 2px solid #c69a3e;
  border-radius: 50%;
  box-shadow:
    0 0 0 2px #171006,
    inset 0 0 0 3px #27343a,
    0 0 12px rgba(210, 168, 73, 0.24);
}

.wheel-confirm-copy {
  padding: 0 2px;
  color: #b9c6cd;
  font-size: 11px;
  line-height: 1.55;
}

.wheel-text-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 2px;
}

.wheel-text-field > span {
  color: #d8bf7e;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.wheel-text-input {
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid rgba(184, 148, 71, 0.54);
  border-radius: 4px;
  outline: none;
  background: linear-gradient(180deg, #071016, #0d171d);
  color: #f2ead3;
  font: 700 12px/1.2 Georgia, "Times New Roman", serif;
  box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.7);
}

.wheel-text-input:focus {
  border-color: #d4aa4d;
  box-shadow:
    inset 0 1px 5px rgba(0, 0, 0, 0.7),
    0 0 0 2px rgba(212, 170, 77, 0.16);
}

.wheel-text-dialog .wheel-confirm-actions button:disabled {
  opacity: 0.42;
  cursor: default;
}
.wheel-confirm-actions {
  padding-top: 4px;
  border-top: 1px solid rgba(144, 162, 172, 0.12);
}

.wheel-confirm-actions button {
  min-width: 128px;
  min-height: 34px;
  border-color: rgba(174, 144, 78, 0.45);
  border-radius: 4px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 11px;
}

.wheel-confirm-actions button:not(.secondary):not(.danger) {
  border-color: #9f792d;
  background:
    linear-gradient(180deg, rgba(255, 236, 181, 0.12), transparent 48%),
    linear-gradient(180deg, #574726, #2e281b);
  color: #fff2c7;
}

.wheel-confirm-actions button:not(.secondary):not(.danger):hover {
  border-color: #d2a94c;
  background:
    linear-gradient(180deg, rgba(255, 239, 190, 0.18), transparent 50%),
    linear-gradient(180deg, #68542b, #362d1c);
}

@keyframes wheel-confirm-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes wheel-confirm-dialog-in {
  from { opacity: 0; transform: translateY(7px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 520px) {
  .wheel-confirm-dialog { padding: 19px 16px 15px; }
  
.wheel-confirm-actions { display: grid; grid-template-columns: 1fr; }
  .wheel-confirm-actions button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .wheel-confirm-backdrop,
  .wheel-confirm-dialog { animation: none; }
}