/* Approved classic homepage polish — keep the original H5 structure, refine only. */
.app-shell:has(.classic-home.is-active){background:linear-gradient(180deg,#0c090d 0%,#09070a 56%,#070608 100%)}
.app-shell:has(.classic-home.is-active) .topbar{grid-template-columns:1fr auto 1fr;height:68px;padding-left:18px;padding-right:18px;border-bottom:0;background:linear-gradient(180deg,rgba(8,6,9,.96),rgba(8,6,9,.72));box-shadow:none}
.app-shell:has(.classic-home.is-active) .brand-lockup{grid-column:2;justify-self:center;gap:11px}
.app-shell:has(.classic-home.is-active) .brand-lockup b{font-family:Georgia,"Songti SC",serif;font-size:14px;letter-spacing:.05em;color:#f3e9df}
.app-shell:has(.classic-home.is-active) .brand-lockup small{margin-top:3px;font-size:7px;color:#786f72;letter-spacing:.19em}
.app-shell:has(.classic-home.is-active) .brand-mark{width:30px;height:30px;color:#c9a45e;border-color:rgba(201,164,94,.42);background:rgba(201,164,94,.02)}
.classic-home{padding:9px 16px calc(30px + var(--safe-bottom));background:radial-gradient(circle at 50% 29%,rgba(113,26,42,.095),transparent 42%)}
.classic-hero{min-height:calc(100svh - 78px - var(--safe-top));display:flex;flex-direction:column}
.classic-hero-top{display:flex;align-items:center;justify-content:center;gap:12px;color:#b89a65;font-size:9px;font-weight:700;letter-spacing:.24em;text-align:center}
.classic-hero-top i{display:block;width:50px;height:1px;background:linear-gradient(90deg,transparent,rgba(201,164,94,.48))}
.classic-hero-top i:last-child{background:linear-gradient(90deg,rgba(201,164,94,.48),transparent)}
.classic-title{text-align:center;margin-top:17px}
.classic-title h1{margin:0;color:#f7eee6;font-family:Georgia,"Songti SC",serif;font-size:43px;line-height:1.05;letter-spacing:-.045em;font-weight:650;text-shadow:0 8px 28px rgba(0,0,0,.42)}
.classic-title p{margin:12px auto 0;max-width:320px;color:#9c9092;font-size:12px;line-height:1.55;letter-spacing:.015em}
.classic-wheel{--wheel:272px;position:relative;width:var(--wheel);height:var(--wheel);margin:22px auto 17px;border:1px solid rgba(201,164,94,.48);border-radius:50%;background:radial-gradient(circle at 50% 50%,rgba(159,42,55,.085) 0 18%,rgba(79,35,40,.035) 36%,transparent 64%);box-shadow:inset 0 0 0 5px rgba(201,164,94,.025),inset 0 0 48px rgba(120,31,43,.055),0 0 36px rgba(0,0,0,.22)}
.classic-wheel::before,.classic-wheel::after{content:"";position:absolute;border-radius:50%;pointer-events:none}
.classic-wheel::before{inset:8px;border:1px solid rgba(201,164,94,.26)}
.classic-wheel::after{inset:54px;border:1px solid rgba(201,164,94,.14);box-shadow:0 0 26px rgba(159,36,48,.07)}
.classic-wheel-core{position:absolute;z-index:3;left:50%;top:50%;width:92px;height:92px;transform:translate(-50%,-50%);display:grid;place-items:center;border:1px solid rgba(172,66,77,.46);border-radius:50%;background:radial-gradient(circle at 50% 42%,#221115 0,#100a0d 68%);box-shadow:0 0 0 7px rgba(123,38,49,.055),0 0 28px rgba(107,28,38,.17)}
.classic-wheel-core::before{content:"";position:absolute;inset:13px;border:1px solid rgba(145,51,63,.18);border-radius:50%}
.classic-wheel-core span{position:relative;color:#b94250;font-family:Georgia,"Times New Roman",serif;font-size:58px;line-height:1;font-weight:700;text-shadow:0 2px 14px rgba(185,48,64,.16)}
.classic-node{position:absolute;z-index:4;width:66px;height:66px;padding-top:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:1px solid rgba(201,164,94,.48);border-radius:50%;background:radial-gradient(circle at 50% 30%,rgba(91,37,47,.24),rgba(18,12,15,.97) 66%);color:#d9bd86;box-shadow:0 7px 18px rgba(0,0,0,.32),inset 0 0 0 3px rgba(201,164,94,.025)}
.classic-node svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round;opacity:.92}
.classic-node b{font-size:10px;line-height:1;color:#e6d3b4;font-weight:650;letter-spacing:.02em}
.classic-node.n1{left:50%;top:-18px;transform:translateX(-50%)}
.classic-node.n2{right:-8px;top:34px}
.classic-node.n3{right:-21px;top:118px}
.classic-node.n4{right:21px;bottom:-14px}
.classic-node.n5{left:21px;bottom:-14px}
.classic-node.n6{left:-21px;top:118px}
.classic-node.n7{left:-8px;top:34px}
.classic-info-strip{display:grid;grid-template-columns:repeat(3,1fr);margin-top:auto;border:1px solid rgba(246,239,232,.11);border-radius:19px;background:linear-gradient(180deg,rgba(19,15,18,.92),rgba(12,10,12,.92));overflow:hidden;box-shadow:inset 0 1px rgba(255,255,255,.018)}
.classic-info-strip div{min-height:70px;padding:12px 9px;display:grid;grid-template-columns:30px auto;grid-template-rows:auto auto;align-content:center;justify-content:center;column-gap:7px;text-align:left;border-right:1px solid rgba(246,239,232,.09)}
.classic-info-strip div:last-child{border-right:0}
.classic-info-icon{grid-row:1/3;align-self:center;color:#c7a25e!important;font-size:24px!important;line-height:1!important;margin:0!important}
.classic-info-strip strong{display:block;color:#f2e8df;font-size:20px;line-height:1;font-weight:800}
.classic-info-strip small{display:block;margin-top:5px;color:#81777a;font-size:9px;white-space:nowrap}
.classic-mode-pick{grid-template-columns:1fr 1fr;gap:9px;margin-top:11px}
.classic-mode-card{position:relative;min-height:112px;padding:17px 14px 13px!important;border:1px solid rgba(201,164,94,.26)!important;border-radius:18px!important;background:linear-gradient(145deg,rgba(31,24,26,.84),rgba(12,10,12,.90))!important;text-align:left;color:#c7b8b1!important;box-shadow:inset 0 1px rgba(255,255,255,.018)!important;transition:border-color .18s ease,background .18s ease,transform .18s ease!important}
.classic-mode-card::before{position:absolute;left:14px;top:16px;color:#c5a260;font-size:18px;line-height:1;opacity:.86}
.classic-mode-card[data-mode="basic"]::before{content:"♙"}
.classic-mode-card[data-mode="vs"]::before{content:"✧"}
.classic-mode-card::after{display:none!important}
.classic-mode-card.is-selected{border-color:rgba(190,88,102,.52)!important;background:linear-gradient(145deg,rgba(75,30,40,.47),rgba(28,17,24,.95))!important;box-shadow:inset 0 1px rgba(255,255,255,.025),0 10px 26px rgba(91,29,43,.10)!important}
.classic-mode-card>span:last-child{display:block}
.classic-mode-tag{display:inline-flex;align-items:center;margin-left:26px;padding:3px 8px;border:1px solid rgba(239,214,174,.16);border-radius:999px;background:rgba(0,0,0,.18);color:#978b8d;font-size:8px;line-height:1}
.classic-mode-card.is-selected .classic-mode-tag{color:#d9aa70;border-color:rgba(196,126,91,.27);background:rgba(117,50,52,.34)}
.classic-mode-card b{display:block;margin-top:18px!important;color:#eee3dc!important;font-family:Georgia,"Songti SC",serif;font-size:16px!important;line-height:1.18;font-weight:650!important}
.classic-mode-card small{display:block;margin-top:7px!important;color:#81777a!important;font-size:9px!important;line-height:1.35}
.classic-mode-check{position:absolute;right:13px;top:13px;width:19px;height:19px;border:1px solid rgba(255,255,255,.15);border-radius:50%;opacity:.55}
.classic-mode-card.is-selected .classic-mode-check{opacity:1;border-color:#caa45f;background:rgba(202,164,95,.12);box-shadow:inset 0 0 0 4px #1e1116}
.classic-mode-card.is-selected .classic-mode-check::after{content:"";position:absolute;inset:4px;border-radius:50%;background:#d5af65;box-shadow:0 0 9px rgba(213,175,101,.28)}
.classic-start{position:relative;justify-content:center!important;min-height:58px!important;margin-top:12px!important;border-radius:17px!important;background:linear-gradient(135deg,#7f2939,#a83d50 52%,#813146)!important;border:1px solid rgba(216,104,122,.28)!important;box-shadow:0 14px 30px rgba(96,27,43,.20),inset 0 1px rgba(255,255,255,.07)!important;color:#fff2ea!important;font-size:19px!important;font-family:Georgia,"Songti SC",serif;font-weight:650!important;letter-spacing:.05em}
.classic-start::after{content:"›";position:absolute;right:19px;top:50%;transform:translateY(-53%);font-family:system-ui,sans-serif;font-size:28px;font-weight:300;color:rgba(255,244,237,.92)}
.classic-home .trust-note{max-width:none;margin-top:10px;font-size:8px;color:#665e61}
@media(max-width:360px){.classic-wheel{--wheel:250px}.classic-node{width:60px;height:60px}.classic-node.n1{top:-15px}.classic-node.n2{right:-4px}.classic-node.n3{right:-18px;top:109px}.classic-node.n4{right:18px}.classic-node.n5{left:18px}.classic-node.n6{left:-18px;top:109px}.classic-node.n7{left:-4px}.classic-title h1{font-size:39px}}
@media(min-width:700px){.classic-home{padding-top:10px}.classic-hero{min-height:calc(100svh - 112px)}.classic-wheel{--wheel:278px}.classic-title h1{font-size:45px}}
@media(max-height:760px){.app-shell:has(.classic-home.is-active) .topbar{height:60px}.classic-title{margin-top:9px}.classic-title h1{font-size:36px}.classic-title p{margin-top:7px;font-size:10px}.classic-wheel{--wheel:220px;margin-top:10px;margin-bottom:9px}.classic-node{width:54px;height:54px;padding-top:6px}.classic-node svg{width:15px;height:15px}.classic-node b{font-size:8px}.classic-node.n1{top:-15px}.classic-node.n2{right:-4px;top:27px}.classic-node.n3{right:-16px;top:96px}.classic-node.n4{right:16px;bottom:-13px}.classic-node.n5{left:16px;bottom:-13px}.classic-node.n6{left:-16px;top:96px}.classic-node.n7{left:-4px;top:27px}.classic-wheel-core{width:76px;height:76px}.classic-wheel-core span{font-size:48px}.classic-info-strip div{min-height:55px;padding:7px 6px}.classic-info-icon{font-size:18px!important}.classic-info-strip strong{font-size:16px}.classic-mode-card{min-height:86px;padding-top:10px!important}.classic-mode-card::before{top:12px}.classic-mode-tag{margin-left:23px}.classic-mode-card b{margin-top:12px!important;font-size:14px!important}.classic-mode-card small{margin-top:4px!important}.classic-start{min-height:48px!important;margin-top:8px!important;font-size:16px!important}.classic-home .trust-note{display:none}}

/* Wheel fidelity pass — match the approved visual, no structural redesign. */
.classic-hero{min-height:auto!important;display:block!important}
.classic-wheel{
  --wheel:min(82vw,322px)!important;
  width:var(--wheel)!important;height:var(--wheel)!important;
  margin:22px auto 24px!important;
  overflow:visible!important;
  border:0!important;
  background:radial-gradient(circle at 50% 50%,rgba(145,36,51,.12) 0 18%,rgba(72,27,34,.045) 19% 47%,transparent 65%)!important;
  box-shadow:none!important;
}
.classic-wheel::before,.classic-wheel::after{display:none!important}
.classic-wheel-geometry{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.classic-wheel-geometry .ring{fill:none;stroke:#c39a53;stroke-linecap:round}
.classic-wheel-geometry .ring-a{stroke-width:1.25;opacity:.78}
.classic-wheel-geometry .ring-b{stroke-width:.55;opacity:.38}
.classic-wheel-geometry .ring-c{stroke:#88404a;stroke-width:.75;opacity:.34}
.classic-wheel-geometry .star{fill:none;stroke:#987540;stroke-width:.55;opacity:.22}
.classic-wheel-geometry .star-b{stroke:#7e3944;opacity:.20}
.classic-wheel-geometry .ticks{fill:none;stroke:#c39a53;stroke-width:1;opacity:.48}
.classic-node{
  width:72px!important;height:72px!important;padding-top:7px!important;gap:4px!important;
  border-color:rgba(206,165,91,.72)!important;
  background:radial-gradient(circle at 48% 30%,rgba(86,38,47,.38),rgba(20,13,16,.98) 66%)!important;
  box-shadow:0 0 0 3px rgba(201,164,94,.035),0 9px 22px rgba(0,0,0,.42),inset 0 0 0 1px rgba(255,255,255,.018)!important;
}
.classic-node svg{width:21px!important;height:21px!important;stroke:#d1a95f!important;stroke-width:1.6!important}
.classic-node b{font-size:11px!important;color:#f0dfc1!important}
.classic-node.n1{left:50%!important;top:-20px!important;transform:translateX(-50%)!important}
.classic-node.n2{right:-12px!important;top:42px!important}
.classic-node.n3{right:-26px!important;top:132px!important}
.classic-node.n4{right:22px!important;bottom:-18px!important}
.classic-node.n5{left:22px!important;bottom:-18px!important}
.classic-node.n6{left:-26px!important;top:132px!important}
.classic-node.n7{left:-12px!important;top:42px!important}
.classic-wheel-core{
  width:116px!important;height:116px!important;
  border:1px solid rgba(177,67,80,.68)!important;
  background:radial-gradient(circle at 50% 45%,#231015 0 35%,#0d090c 72%)!important;
  box-shadow:0 0 0 8px rgba(137,50,62,.055),0 0 0 22px rgba(129,47,58,.025),0 0 34px rgba(132,38,51,.20)!important;
}
.classic-wheel-core::before{inset:12px!important;border-color:rgba(157,58,70,.32)!important}
.classic-wheel-core::after{content:"";position:absolute;inset:-36px;border-radius:50%;background:repeating-conic-gradient(from 0deg,rgba(172,67,80,.085) 0deg 1deg,transparent 1deg 9deg);-webkit-mask:radial-gradient(circle,transparent 0 44%,#000 45% 47%,transparent 48%);mask:radial-gradient(circle,transparent 0 44%,#000 45% 47%,transparent 48%);pointer-events:none}
.classic-wheel-core span{font-size:68px!important;color:#bd4555!important;font-weight:650!important}
.classic-info-strip{margin-top:20px!important}
.classic-mode-pick{margin-top:12px!important}
.classic-start{margin-top:12px!important}
@media(max-width:360px){
  .classic-wheel{--wheel:min(82vw,296px)!important;margin-top:18px!important;margin-bottom:22px!important}
  .classic-node{width:66px!important;height:66px!important}.classic-node svg{width:19px!important;height:19px!important}.classic-node b{font-size:10px!important}
  .classic-node.n1{top:-18px!important}.classic-node.n2{right:-10px!important;top:38px!important}.classic-node.n3{right:-23px!important;top:121px!important}.classic-node.n4{right:20px!important;bottom:-17px!important}.classic-node.n5{left:20px!important;bottom:-17px!important}.classic-node.n6{left:-23px!important;top:121px!important}.classic-node.n7{left:-10px!important;top:38px!important}
  .classic-wheel-core{width:106px!important;height:106px!important}.classic-wheel-core span{font-size:62px!important}
}
@media(max-height:760px){
  .classic-wheel{--wheel:min(70vw,244px)!important;margin-top:10px!important;margin-bottom:17px!important}
  .classic-node{width:56px!important;height:56px!important}.classic-node svg{width:15px!important;height:15px!important}.classic-node b{font-size:8px!important}
  .classic-node.n1{top:-15px!important}.classic-node.n2{right:-7px!important;top:31px!important}.classic-node.n3{right:-18px!important;top:100px!important}.classic-node.n4{right:16px!important;bottom:-14px!important}.classic-node.n5{left:16px!important;bottom:-14px!important}.classic-node.n6{left:-18px!important;top:100px!important}.classic-node.n7{left:-7px!important;top:31px!important}
  .classic-wheel-core{width:84px!important;height:84px!important}.classic-wheel-core span{font-size:50px!important}
}

/* Approved image-material integration — extracted from the user-approved composition. */
.app-shell:has(.classic-home.is-active) .brand-mark{
  width:44px!important;height:44px!important;
  flex:0 0 44px!important;
  border:0!important;border-radius:0!important;
  color:transparent!important;font-size:0!important;
  background-image:var(--approved-header-emblem)!important;
  background-repeat:no-repeat!important;
  background-position:center!important;
  background-size:142%!important;
  box-shadow:none!important;
}

/* The approved wheel image already contains the seven evenly-spaced badges,
   their final icons, labels, orbital lines and center 7. */
.classic-wheel{
  --wheel:min(92vw,350px)!important;
  width:var(--wheel)!important;
  height:auto!important;
  aspect-ratio:1.12/1!important;
  margin:16px auto 17px!important;
  border:0!important;border-radius:0!important;
  background-image:var(--approved-wheel)!important;
  background-repeat:no-repeat!important;
  background-position:center!important;
  background-size:contain!important;
  box-shadow:none!important;
}
.classic-wheel::before,.classic-wheel::after,
.classic-wheel-geometry,.classic-wheel .classic-node,.classic-wheel-core{
  display:none!important;
}

/* Use the approved in-card ornaments, leaving the text and selection controls as HTML. */
.classic-mode-card{
  overflow:hidden!important;
  padding-right:14px!important;
}
.classic-mode-card::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  z-index:0!important;
  right:4px!important;
  bottom:7px!important;
  width:67px!important;
  height:67px!important;
  background-repeat:no-repeat!important;
  background-position:center!important;
  background-size:contain!important;
  opacity:.58!important;
  pointer-events:none!important;
}
.classic-mode-card[data-mode="basic"]::after{background-image:var(--approved-mode-basic)!important}
.classic-mode-card[data-mode="vs"]::after{background-image:var(--approved-mode-dual)!important}
.classic-mode-card>span,.classic-mode-card>b,.classic-mode-card>small{position:relative;z-index:1}
.classic-mode-card b{max-width:142px;font-size:15px!important;letter-spacing:-.02em}
.classic-mode-card[data-mode="vs"] b{white-space:nowrap;font-size:14px!important}
.classic-mode-card small{max-width:118px}
.classic-mode-card[data-mode="basic"]::before,
.classic-mode-card[data-mode="vs"]::before{opacity:.58!important}

.classic-info-strip{margin-top:6px!important}
.classic-info-strip div{min-height:64px!important}
.classic-info-strip strong{font-family:Georgia,"Times New Roman",serif;font-size:21px!important}
.classic-info-strip small{letter-spacing:.02em}

@media(max-width:360px){
  .app-shell:has(.classic-home.is-active) .brand-mark{width:40px!important;height:40px!important;flex-basis:40px!important}
  .classic-wheel{--wheel:min(94vw,326px)!important;margin-top:13px!important;margin-bottom:14px!important}
  .classic-mode-card{padding-right:11px!important}
  .classic-mode-card::after{width:59px!important;height:59px!important;right:4px!important;bottom:9px!important}
  .classic-mode-card[data-mode="vs"] b{font-size:13px!important}
}
@media(max-height:760px){
  .classic-wheel{--wheel:min(72vw,260px)!important;margin-top:8px!important;margin-bottom:8px!important}
  .classic-mode-card::after{width:60px!important;height:60px!important}
}

/* Final vector pass: no raster crops. All homepage ornamentation stays sharp at any DPR. */
.app-shell:has(.classic-home.is-active) .brand-mark{
  width:34px!important;height:34px!important;flex:0 0 34px!important;
  display:grid!important;place-items:center!important;
  color:#c9a45e!important;font-size:18px!important;line-height:1!important;
  border:1px solid rgba(201,164,94,.44)!important;border-radius:3px!important;
  background:radial-gradient(circle,rgba(155,91,54,.10),transparent 68%)!important;
  box-shadow:inset 0 0 0 5px rgba(201,164,94,.025)!important;
  transform:rotate(45deg)!important;
}
.app-shell:has(.classic-home.is-active) .brand-mark::before{content:"◇";transform:rotate(-45deg);display:block}

.classic-wheel{
  --wheel:min(88vw,338px)!important;
  --orbit:40cqw;
  container-type:inline-size;
  width:var(--wheel)!important;height:var(--wheel)!important;aspect-ratio:1!important;
  margin:18px auto 21px!important;
  overflow:visible!important;
  border:0!important;border-radius:50%!important;
  background:
    radial-gradient(circle at 50% 50%,rgba(152,35,51,.18) 0 15%,rgba(74,25,34,.07) 16% 34%,transparent 58%),
    repeating-conic-gradient(from -90deg,rgba(199,157,83,.055) 0 1deg,transparent 1deg 12deg)!important;
  box-shadow:none!important;
}
.classic-wheel::before{
  display:block!important;content:""!important;position:absolute!important;inset:8cqw!important;
  border:1px solid rgba(199,157,83,.42)!important;border-radius:50%!important;
  box-shadow:inset 0 0 0 1px rgba(199,157,83,.11),0 0 26px rgba(116,33,46,.10)!important;
}
.classic-wheel::after{
  display:block!important;content:""!important;position:absolute!important;inset:15cqw!important;
  border:1px solid rgba(153,65,77,.30)!important;border-radius:50%!important;
  box-shadow:0 0 0 7cqw rgba(130,37,51,.022)!important;
}
.classic-wheel-geometry{display:block!important;position:absolute!important;inset:0!important;width:100%!important;height:100%!important;overflow:visible!important;pointer-events:none!important}
.classic-wheel-geometry .ring{fill:none!important;stroke:#c59b55!important;stroke-linecap:round!important}
.classic-wheel-geometry .ring-a{stroke-width:1.15!important;opacity:.72!important}
.classic-wheel-geometry .ring-b{stroke-width:.65!important;opacity:.34!important}
.classic-wheel-geometry .ring-c{stroke:#984654!important;stroke-width:.8!important;opacity:.38!important}
.classic-wheel-geometry .star{fill:none!important;stroke:#a78048!important;stroke-width:.58!important;opacity:.28!important}
.classic-wheel-geometry .star-b{stroke:#87404b!important;opacity:.25!important}
.classic-wheel-geometry .ticks{fill:none!important;stroke:#c59b55!important;stroke-width:1!important;opacity:.55!important}

.classic-node{
  display:flex!important;position:absolute!important;z-index:5!important;
  left:50%!important;top:50%!important;
  width:21cqw!important;height:21cqw!important;padding:0!important;
  flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:2.4cqw!important;
  transform:translate(-50%,-50%) rotate(var(--a)) translateY(calc(0px - var(--orbit))) rotate(calc(0deg - var(--a)))!important;
  border:1px solid rgba(210,170,96,.72)!important;border-radius:50%!important;
  background:
    radial-gradient(circle at 45% 28%,rgba(104,47,56,.40),rgba(27,15,20,.98) 67%),
    linear-gradient(145deg,rgba(255,255,255,.025),transparent)!important;
  box-shadow:0 0 0 1px rgba(201,164,94,.10),0 7px 20px rgba(0,0,0,.42),inset 0 0 0 3px rgba(201,164,94,.025)!important;
}
.classic-node::before{content:"";position:absolute;inset:5px;border:1px solid rgba(201,164,94,.16);border-radius:50%;pointer-events:none}
.classic-node svg{display:block!important;width:8.2cqw!important;height:8.2cqw!important;fill:none!important;stroke:#d6ad63!important;stroke-width:1.45!important;stroke-linecap:round!important;stroke-linejoin:round!important;opacity:.98!important;filter:drop-shadow(0 0 3px rgba(210,169,96,.11))}
.classic-node b{display:block!important;font-size:3.15cqw!important;line-height:1!important;color:#f1dfc2!important;font-weight:700!important;letter-spacing:.03em!important;text-shadow:0 1px 5px rgba(0,0,0,.55)}

.classic-wheel-core{
  display:grid!important;position:absolute!important;z-index:4!important;
  left:50%!important;top:50%!important;width:31cqw!important;height:31cqw!important;
  transform:translate(-50%,-50%)!important;place-items:center!important;
  border:1px solid rgba(185,67,81,.72)!important;border-radius:50%!important;
  background:radial-gradient(circle at 50% 42%,#281117 0 27%,#120a0e 70%)!important;
  box-shadow:0 0 0 2.2cqw rgba(137,50,62,.055),0 0 0 6.5cqw rgba(129,47,58,.026),0 0 30px rgba(141,38,54,.22)!important;
}
.classic-wheel-core::before{display:block!important;content:""!important;position:absolute!important;inset:3.6cqw!important;border:1px solid rgba(163,60,73,.34)!important;border-radius:50%!important}
.classic-wheel-core::after{display:block!important;content:""!important;position:absolute!important;inset:-8cqw!important;border-radius:50%!important;background:repeating-conic-gradient(from 0deg,rgba(183,70,84,.10) 0deg 1deg,transparent 1deg 8deg)!important;-webkit-mask:radial-gradient(circle,transparent 0 46%,#000 47% 48%,transparent 49%)!important;mask:radial-gradient(circle,transparent 0 46%,#000 47% 48%,transparent 49%)!important;pointer-events:none!important}
.classic-wheel-core span{position:relative!important;color:#c24658!important;font-family:Georgia,"Times New Roman",serif!important;font-size:19cqw!important;line-height:1!important;font-weight:650!important;text-shadow:0 0 18px rgba(194,70,88,.18)!important}

/* Pure-vector-feeling ornaments inside the two mode cards. */
.classic-mode-card{overflow:hidden!important;padding-right:15px!important}
.classic-mode-card::after{
  display:block!important;content:""!important;position:absolute!important;z-index:0!important;
  right:10px!important;bottom:12px!important;width:62px!important;height:62px!important;border-radius:50%!important;
  background-image:none!important;pointer-events:none!important;opacity:.68!important;
}
.classic-mode-card[data-mode="basic"]::after{
  border:1px solid rgba(201,164,94,.32)!important;
  background:
    radial-gradient(circle,transparent 0 17%,rgba(201,164,94,.26) 18% 19%,transparent 20% 33%,rgba(201,164,94,.20) 34% 35%,transparent 36%),
    repeating-conic-gradient(from -90deg,rgba(201,164,94,.32) 0 1deg,transparent 1deg 51.428deg)!important;
  box-shadow:inset 0 0 0 7px rgba(155,57,70,.035)!important;
}
.classic-mode-card[data-mode="vs"]::after{
  border:1px solid rgba(201,164,94,.40)!important;
  background:
    radial-gradient(circle,rgba(201,164,94,.20) 0 3%,transparent 4% 20%,rgba(201,164,94,.20) 21% 22%,transparent 23%),
    conic-gradient(from 0deg,transparent 0 10deg,rgba(201,164,94,.30) 10deg 12deg,transparent 12deg 43deg,rgba(201,164,94,.22) 43deg 45deg,transparent 45deg 90deg,rgba(201,164,94,.30) 90deg 92deg,transparent 92deg 180deg,rgba(201,164,94,.24) 180deg 182deg,transparent 182deg)!important;
  box-shadow:inset 0 0 0 8px rgba(201,164,94,.025)!important;
}
.classic-mode-card[data-mode="vs"]::before{content:"✦"!important}
.classic-mode-card[data-mode="basic"]::before{content:"♙"!important}
.classic-mode-card b{max-width:146px!important;font-size:15px!important}
.classic-mode-card[data-mode="vs"] b{white-space:nowrap!important;font-size:13.5px!important}
.classic-mode-card small{max-width:122px!important}

@media(max-width:360px){
  .classic-wheel{--wheel:min(89vw,318px)!important;--orbit:40cqw;margin-top:15px!important;margin-bottom:19px!important}
  .classic-mode-card::after{width:55px!important;height:55px!important;right:8px!important;bottom:14px!important}
  .classic-mode-card[data-mode="vs"] b{font-size:12.8px!important}
}
@media(max-height:760px){
  .classic-wheel{--wheel:min(70vw,250px)!important;--orbit:39cqw;margin-top:8px!important;margin-bottom:10px!important}
  .classic-mode-card::after{width:50px!important;height:50px!important}
}

/* HD image-material pass — use approved artwork, not hand-drawn vector substitutes. */
.app-shell:has(.classic-home.is-active) .brand-mark{
  width:38px!important;
  height:38px!important;
  flex:0 0 38px!important;
  border:0!important;
  border-radius:0!important;
  background:url('../assets/approved-hd/web/brand-emblem.png') center/contain no-repeat!important;
  box-shadow:none!important;
  color:transparent!important;
  font-size:0!important;
  transform:none!important;
}
.app-shell:has(.classic-home.is-active) .brand-mark::before{display:none!important}

.classic-wheel{
  --wheel:min(91vw,350px)!important;
  --orbit:40.5cqw!important;
  width:var(--wheel)!important;
  height:calc(var(--wheel) * .974)!important;
  margin:14px auto 18px!important;
  border:0!important;
  border-radius:0!important;
  background:url('../assets/approved-hd/web/seven-wheel.png') center/contain no-repeat!important;
  box-shadow:none!important;
  overflow:visible!important;
}
.classic-wheel::before,.classic-wheel::after,.classic-wheel-geometry{display:none!important}
.classic-node{
  width:19cqw!important;
  height:19cqw!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  pointer-events:none!important;
  transform:translate(-50%,-50%) rotate(var(--a)) translateY(calc(0px - var(--orbit))) rotate(calc(0deg - var(--a)))!important;
}
.classic-node::before,.classic-node svg{display:none!important}
.classic-node b{
  position:absolute!important;
  left:50%!important;
  bottom:1.5cqw!important;
  transform:translateX(-50%)!important;
  display:block!important;
  min-width:3.2em!important;
  padding:1.3cqw 1.8cqw!important;
  border-radius:999px!important;
  background:rgba(8,5,7,.64)!important;
  box-shadow:0 1px 8px rgba(0,0,0,.55)!important;
  color:#f4dfb6!important;
  font-size:3.05cqw!important;
  line-height:1!important;
  white-space:nowrap!important;
  letter-spacing:.02em!important;
  text-shadow:0 1px 4px #000!important;
}
.classic-wheel-core{
  width:31cqw!important;
  height:31cqw!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.classic-wheel-core::before,.classic-wheel-core::after{display:none!important}
.classic-wheel-core span{
  color:#cf455b!important;
  font-size:18.5cqw!important;
  text-shadow:0 0 18px rgba(201,56,78,.28),0 2px 3px rgba(0,0,0,.8)!important;
}

.classic-mode-card::after{
  display:block!important;
  right:8px!important;
  bottom:6px!important;
  width:72px!important;
  height:72px!important;
  border:0!important;
  border-radius:0!important;
  background-color:transparent!important;
  background-repeat:no-repeat!important;
  background-position:center!important;
  background-size:contain!important;
  box-shadow:none!important;
  opacity:.56!important;
  filter:none!important;
}
.classic-mode-card[data-mode="basic"]::after{
  background-image:url('../assets/approved-hd/web/seven-wheel.png')!important;
}
.classic-mode-card[data-mode="vs"]::after{
  background-image:url('../assets/approved-hd/web/dual-compass.png')!important;
  opacity:.64!important;
}
.classic-mode-card::before{z-index:2!important}
.classic-mode-card>span:not(.classic-mode-check):not(.classic-mode-tag){position:relative!important;z-index:2!important}
.classic-mode-card b{max-width:145px!important}
.classic-mode-card small{max-width:124px!important}

@media(max-width:360px){
  .classic-wheel{--wheel:min(92vw,332px)!important;--orbit:40.5cqw!important;margin-top:12px!important;margin-bottom:16px!important}
  .classic-mode-card::after{width:66px!important;height:66px!important;right:6px!important;bottom:7px!important}
}
@media(max-height:760px){
  .classic-wheel{--wheel:min(74vw,270px)!important;--orbit:40cqw!important;margin-top:8px!important;margin-bottom:10px!important}
  .classic-mode-card::after{width:58px!important;height:58px!important}
}

/* Approved HD raster assets. These intentionally supersede the handmade vector pass. */
.app-shell:has(.classic-home.is-active) .brand-mark{
  width:38px!important;
  height:38px!important;
  flex:0 0 38px!important;
  border:0!important;
  border-radius:0!important;
  color:transparent!important;
  background:url('../assets/approved-hd/web/brand-emblem.png') center/contain no-repeat!important;
  box-shadow:none!important;
  transform:none!important;
}
.app-shell:has(.classic-home.is-active) .brand-mark::before{display:none!important;content:none!important}

.classic-wheel{
  --wheel:min(91vw,350px)!important;
  width:var(--wheel)!important;
  height:auto!important;
  aspect-ratio:820/799!important;
  margin:14px auto 18px!important;
  border:0!important;
  border-radius:0!important;
  background:url('../assets/approved-hd/web/seven-wheel.png') center/contain no-repeat!important;
  box-shadow:none!important;
  overflow:visible!important;
}
.classic-wheel::before,.classic-wheel::after,
.classic-wheel-geometry,.classic-node{display:none!important}
.classic-wheel-core{
  display:grid!important;
  position:absolute!important;
  z-index:3!important;
  left:50%!important;
  top:50%!important;
  width:25.5%!important;
  height:auto!important;
  aspect-ratio:1!important;
  transform:translate(-50%,-50%)!important;
  place-items:center!important;
  border:0!important;
  border-radius:50%!important;
  background:radial-gradient(circle,rgba(15,8,11,.98) 0 48%,rgba(16,7,10,.72) 64%,transparent 74%)!important;
  box-shadow:none!important;
}
.classic-wheel-core::before,.classic-wheel-core::after{display:none!important;content:none!important}
.classic-wheel-core span{
  color:#c64153!important;
  font-family:Georgia,'Times New Roman',serif!important;
  font-size:52px!important;
  font-weight:650!important;
  line-height:1!important;
  text-shadow:0 0 18px rgba(196,65,83,.24)!important;
}

.classic-mode-card{padding-right:74px!important;overflow:hidden!important}
.classic-mode-card::after{
  display:block!important;
  content:""!important;
  position:absolute!important;
  z-index:0!important;
  right:5px!important;
  bottom:6px!important;
  width:70px!important;
  height:70px!important;
  border:0!important;
  border-radius:0!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  background-size:contain!important;
  box-shadow:none!important;
  pointer-events:none!important;
}
.classic-mode-card[data-mode="basic"]::after{
  background-image:url('../assets/approved-hd/web/seven-wheel.png')!important;
  opacity:.48!important;
}
.classic-mode-card[data-mode="vs"]::after{
  background-image:url('../assets/approved-hd/web/dual-compass.png')!important;
  opacity:.74!important;
}
.classic-mode-card[data-mode="basic"]::before{content:"♙"!important}
.classic-mode-card[data-mode="vs"]::before{content:"✦"!important}
.classic-mode-card b{max-width:140px!important}
.classic-mode-card[data-mode="vs"] b{font-size:13.5px!important;white-space:nowrap!important}
.classic-mode-card small{max-width:128px!important}

@media(max-width:360px){
  .classic-wheel{--wheel:min(92vw,332px)!important;margin-top:12px!important;margin-bottom:17px!important}
  .classic-wheel-core span{font-size:48px!important}
  .classic-mode-card{padding-right:68px!important}
  .classic-mode-card::after{width:68px!important;height:68px!important;right:2px!important;bottom:5px!important}
  .classic-mode-card[data-mode="vs"] b{font-size:12.7px!important}
}
@media(max-height:760px){
  .classic-wheel{--wheel:min(72vw,270px)!important;margin-top:8px!important;margin-bottom:10px!important}
  .classic-wheel-core span{font-size:42px!important}
}

/* Final SVG badge visibility override */
.classic-wheel .classic-node{display:flex!important}


.classic-wheel .classic-node{right:auto!important;bottom:auto!important;margin:0!important}


.classic-wheel .classic-node{left:50%!important;top:50%!important;right:auto!important;bottom:auto!important;transform:translate(-50%,-50%) rotate(var(--a)) translateY(calc(0px - var(--orbit))) rotate(calc(0deg - var(--a)))!important}

/* Raster wheel contains the seven badge artwork itself. */
.classic-wheel .classic-node{display:none!important}

/* FINAL-HD-IMAGE-LAYER: approved image artwork is authoritative. */
.app-shell:has(.classic-home.is-active) .brand-mark{
  width:38px!important;height:38px!important;flex:0 0 38px!important;
  border:0!important;border-radius:0!important;color:transparent!important;font-size:0!important;
  background:url('../assets/approved-hd/web/brand-emblem.png') center/contain no-repeat!important;
  box-shadow:none!important;transform:none!important;
}
.app-shell:has(.classic-home.is-active) .brand-mark::before{display:none!important;content:none!important}

.classic-wheel{
  --wheel:min(91vw,350px)!important;
  --orbit:39.6cqw!important;
  container-type:inline-size;
  width:var(--wheel)!important;height:auto!important;aspect-ratio:820/799!important;
  margin:14px auto 18px!important;border:0!important;border-radius:0!important;
  background:url('../assets/approved-hd/web/seven-wheel.png') center/contain no-repeat!important;
  box-shadow:none!important;overflow:visible!important;
}
.classic-wheel::before,.classic-wheel::after,.classic-wheel-geometry{display:none!important}
.classic-wheel .classic-node{
  display:flex!important;position:absolute!important;z-index:5!important;
  left:50%!important;top:50%!important;right:auto!important;bottom:auto!important;margin:0!important;
  width:18.5cqw!important;height:18.5cqw!important;padding:0!important;
  align-items:flex-end!important;justify-content:center!important;
  border:0!important;background:transparent!important;box-shadow:none!important;pointer-events:none!important;
  transform:translate(-50%,-50%) rotate(var(--a)) translateY(calc(0px - var(--orbit))) rotate(calc(0deg - var(--a)))!important;
}
.classic-wheel .classic-node::before,.classic-wheel .classic-node svg{display:none!important}
.classic-wheel .classic-node b{
  display:block!important;position:static!important;transform:none!important;
  min-width:3.1em!important;padding:1.1cqw 1.6cqw!important;border-radius:999px!important;
  background:rgba(6,4,6,.72)!important;color:#f4dfb6!important;
  box-shadow:0 1px 8px rgba(0,0,0,.55)!important;
  font-size:2.9cqw!important;line-height:1!important;white-space:nowrap!important;
  text-shadow:0 1px 4px #000!important;letter-spacing:.02em!important;
}
.classic-wheel-core{
  display:grid!important;position:absolute!important;z-index:4!important;left:50%!important;top:50%!important;
  width:25.5%!important;height:auto!important;aspect-ratio:1!important;transform:translate(-50%,-50%)!important;
  place-items:center!important;border:0!important;background:transparent!important;box-shadow:none!important;
}
.classic-wheel-core::before,.classic-wheel-core::after{display:none!important;content:none!important}
.classic-wheel-core span{color:#c64153!important;font-family:Georgia,'Times New Roman',serif!important;font-size:52px!important;font-weight:650!important;line-height:1!important;text-shadow:0 0 18px rgba(196,65,83,.24)!important}

.classic-mode-card{padding-right:74px!important;overflow:hidden!important}
.classic-mode-card::after{
  display:block!important;content:""!important;position:absolute!important;z-index:0!important;
  right:5px!important;bottom:6px!important;width:70px!important;height:70px!important;
  border:0!important;border-radius:0!important;background-repeat:no-repeat!important;background-position:center!important;background-size:contain!important;
  box-shadow:none!important;pointer-events:none!important;
}
.classic-mode-card[data-mode="basic"]::after{background-image:url('../assets/approved-hd/web/seven-wheel.png')!important;opacity:.46!important}
.classic-mode-card[data-mode="vs"]::after{background-image:url('../assets/approved-hd/web/dual-compass.png')!important;opacity:.72!important}
.classic-mode-card>span:not(.classic-mode-check):not(.classic-mode-tag){position:relative!important;z-index:2!important}
.classic-mode-card b{max-width:140px!important}
.classic-mode-card[data-mode="vs"] b{font-size:13.5px!important;white-space:nowrap!important}
.classic-mode-card small{max-width:128px!important}

@media(max-width:360px){
  .classic-wheel{--wheel:min(92vw,332px)!important;--orbit:39.6cqw!important;margin-top:12px!important;margin-bottom:17px!important}
  .classic-wheel-core span{font-size:48px!important}
  .classic-mode-card{padding-right:68px!important}
  .classic-mode-card::after{width:66px!important;height:66px!important;right:3px!important;bottom:6px!important}
  .classic-mode-card[data-mode="vs"] b{font-size:12.7px!important}
}
@media(max-height:760px){
  .classic-wheel{--wheel:min(72vw,270px)!important;--orbit:39.4cqw!important;margin-top:8px!important;margin-bottom:10px!important}
  .classic-wheel-core span{font-size:42px!important}
}

/* FINAL HD MATERIAL OVERRIDE — artwork carries the visual detail; HTML only supplies labels. */
.classic-wheel .classic-node{
  display:flex!important;
  position:absolute!important;
  z-index:5!important;
  left:50%!important;
  top:50%!important;
  right:auto!important;
  bottom:auto!important;
  width:19cqw!important;
  height:19cqw!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  pointer-events:none!important;
  transform:translate(-50%,-50%) rotate(var(--a)) translateY(calc(0px - 40.5cqw)) rotate(calc(0deg - var(--a)))!important;
}
.classic-wheel .classic-node::before,.classic-wheel .classic-node svg{display:none!important}
.classic-wheel .classic-node b{
  position:absolute!important;
  left:50%!important;
  bottom:1.7cqw!important;
  transform:translateX(-50%)!important;
  display:block!important;
  min-width:3.15em!important;
  padding:.9cqw 1.35cqw!important;
  border:1px solid rgba(214,172,91,.16)!important;
  border-radius:999px!important;
  background:rgba(7,4,6,.70)!important;
  color:#f4dfb8!important;
  font-size:2.85cqw!important;
  font-weight:700!important;
  line-height:1!important;
  letter-spacing:.02em!important;
  white-space:nowrap!important;
  box-shadow:0 2px 8px rgba(0,0,0,.48)!important;
  text-shadow:0 1px 4px #000!important;
}
.classic-wheel .classic-node.n1 b{bottom:.7cqw!important}
.classic-wheel-core{background:transparent!important;border:0!important;box-shadow:none!important}
.classic-wheel-core span{font-size:50px!important;color:#cc4154!important;text-shadow:0 0 18px rgba(198,59,79,.24),0 2px 4px rgba(0,0,0,.82)!important}

/* Keep history functional but out of the homepage header. */
.app-shell:has(.classic-home.is-active) .collection-button{display:none!important}

@media(max-width:360px){
  .classic-wheel .classic-node b{font-size:2.75cqw!important;padding:.85cqw 1.25cqw!important}
  .classic-wheel-core span{font-size:46px!important}
}

/* Final layering polish for approved image assets. */
.classic-wheel .classic-node b{
  padding:.55cqw 1cqw!important;
  border:0!important;
  background:rgba(5,3,5,.32)!important;
  box-shadow:none!important;
  color:#f5e2bc!important;
  text-shadow:0 1px 5px #000,0 0 6px rgba(0,0,0,.72)!important;
}
.classic-mode-card{isolation:isolate!important}
.classic-mode-card::after{
  z-index:1!important;
  width:76px!important;
  height:76px!important;
  right:6px!important;
  bottom:3px!important;
  opacity:.82!important;
  border:0!important;
  box-shadow:none!important;
  filter:none!important;
}
.classic-mode-card[data-mode="basic"]::after{
  background-image:url('../assets/approved-hd/web/seven-wheel.png')!important;
  background-size:contain!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  border:0!important;
  box-shadow:none!important;
}
.classic-mode-card[data-mode="vs"]::after{
  background-image:url('../assets/approved-hd/web/dual-compass.png')!important;
  background-size:contain!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  border:0!important;
  box-shadow:none!important;
}
.classic-mode-card>span,.classic-mode-card>b,.classic-mode-card>small{position:relative!important;z-index:2!important}
@media(max-width:360px){
  .classic-mode-card::after{width:70px!important;height:70px!important;right:4px!important;bottom:5px!important}
}

/* HD image finishing values — final override only. */
.app-shell:has(.classic-home.is-active) .brand-mark{width:44px!important;height:44px!important;flex-basis:44px!important}
.classic-mode-card::after{width:82px!important;height:82px!important;right:4px!important;bottom:1px!important;opacity:.94!important}
.classic-mode-card[data-mode="basic"]::after{opacity:.88!important}
.classic-mode-card[data-mode="vs"]::after{opacity:.96!important}
@media(max-width:360px){.classic-mode-card::after{width:76px!important;height:76px!important;right:2px!important;bottom:2px!important}}