/* Rarity retains its own color; value adds an independent warm accent. */
#detail-view #contents .graded-skin{position:relative;isolation:isolate;overflow:hidden;padding-top:27px;background:radial-gradient(ellipse at 50% 25%,color-mix(in srgb,var(--tone) 18%,transparent),transparent 72%),#121b27;border:1px solid color-mix(in srgb,var(--tone) 28%,#263140);border-bottom:2px solid var(--tone)}
#detail-view #contents .graded-skin img{filter:drop-shadow(0 6px 10px color-mix(in srgb,var(--tone) 20%,transparent))}
#detail-view #contents .skin-grade{display:block;margin-top:8px;color:var(--tone);font-size:8px;line-height:1.4;letter-spacing:.2px}
#detail-view #contents .valuable-skin{background:radial-gradient(ellipse at 50% 30%,color-mix(in srgb,var(--tone) 26%,transparent),transparent 70%),linear-gradient(145deg,#28251d,#131a28 65%);box-shadow:inset 0 1px #f2cf8055,0 0 17px color-mix(in srgb,var(--tone) 10%,transparent);border-top-color:#edc67b80}
#detail-view #contents .valuable-skin p{color:#ffdc94;font-weight:700;text-shadow:0 0 12px #e8b65422}
.value-badge{position:absolute;right:7px;top:8px;color:#f3d39b;font-size:7px;line-height:1.3;letter-spacing:.3px}
#detail-view #contents .graded-skin .chance{position:absolute;top:8px;left:7px;right:auto;font-size:8px;color:#aebcd0}
.selected-case-stage .reel-card.graded-reel{position:relative;isolation:isolate}
.selected-case-stage .reel-card.graded-reel:before{content:'';position:absolute;left:2%;right:2%;top:15%;bottom:10%;background:radial-gradient(ellipse at 50% 65%,color-mix(in srgb,var(--tone) 20%,transparent),transparent 72%);pointer-events:none;z-index:-1}
.selected-case-stage .reel-card.graded-reel:after{content:'';position:absolute;left:25%;right:25%;bottom:3px;height:2px;border-radius:50%;background:linear-gradient(90deg,transparent,var(--tone),transparent);box-shadow:0 0 10px color-mix(in srgb,var(--tone) 35%,transparent);opacity:.65;pointer-events:none}
.selected-case-stage .reel-card.graded-reel span{color:color-mix(in srgb,var(--tone) 42%,#edf2fa)}
.selected-case-stage .reel-card.valuable-skin{opacity:calc(.8 + var(--reel-focus,1)*.2)}
.selected-case-stage .reel-card.valuable-skin:before{left:-7%;right:-7%;top:0;bottom:0;background:radial-gradient(ellipse at 50% 45%,color-mix(in srgb,var(--tone) 38%,transparent),transparent 73%)}
.selected-case-stage .reel-card.valuable-skin img{filter:drop-shadow(0 0 9px color-mix(in srgb,var(--tone) 58%,transparent)) drop-shadow(0 6px 8px #0009)}
.selected-case-stage .reel-card.valuable-skin:after{left:15%;right:15%;height:2px;opacity:1;background:linear-gradient(90deg,transparent,var(--tone),#ffe0a0,var(--tone),transparent);box-shadow:0 0 16px color-mix(in srgb,var(--tone) 65%,transparent)}
.selected-case-stage .reel-card.valuable-skin span{color:#ffdfaa;text-shadow:0 0 9px color-mix(in srgb,var(--tone) 50%,transparent);font-weight:700}
.selected-case-stage.case-awarded .reel-card.valuable-skin.winner:before{animation:valuable-reveal .85s ease-out}
@keyframes valuable-reveal{from{opacity:.3;scale:.7}60%{opacity:1;scale:1.18}to{opacity:1;scale:1}}
@media(max-width:720px){#detail-view #contents .skin-grade{font-size:7px}.value-badge{font-size:6px;right:5px}.selected-case-stage .reel-card.valuable-skin img{filter:drop-shadow(0 0 5px color-mix(in srgb,var(--tone) 55%,transparent))}}
body:has(#short-animation:checked) .reel-card.valuable-skin.winner:before{animation:none!important}@media(prefers-reduced-motion:reduce){.selected-case-stage.case-awarded .reel-card.valuable-skin.winner:before{animation:none}}
/* Explicit value treatment and clear rarity markers. */
#detail-view #contents .graded-skin{border:1px solid #485369;border-bottom:4px solid var(--tone);background:linear-gradient(180deg,color-mix(in srgb,var(--tone) 48%,#111923) 0%,color-mix(in srgb,var(--tone) 24%,#111923) 38%,#121b27 88%)}
#detail-view #contents .skin-grade{display:flex;align-items:center;gap:5px;font-size:9px;color:#d3ddeb}
#detail-view #contents .skin-grade:before{content:'';width:7px;height:7px;flex-shrink:0;border-radius:2px;background:var(--tone);box-shadow:0 0 7px color-mix(in srgb,var(--tone) 35%,transparent)}
#detail-view #contents .valuable-skin{border:1px solid #e6b95e;border-bottom:4px solid var(--tone);background:linear-gradient(180deg,#8d6728 0%,#4d3b23 38%,#161c27 88%);box-shadow:inset 0 0 20px #d9a74210,0 0 12px #d9a74215}
#detail-view #contents .valuable-skin .value-badge{background:#eac579;color:#302318;padding:3px 5px;border-radius:4px;top:6px;right:5px;font-weight:700;font-size:7px}
#detail-view #contents .valuable-skin img{filter:drop-shadow(0 0 10px #efc77840)}
.selected-case-stage .reel-card.graded-reel:before{background:radial-gradient(ellipse at 50% 60%,color-mix(in srgb,var(--tone) 30%,transparent),transparent 75%)}
.selected-case-stage .reel-card.graded-reel:after{left:12%;right:12%;height:3px;bottom:2px;background:var(--tone);box-shadow:0 0 8px var(--tone);opacity:.8}
.selected-case-stage .reel-card.valuable-skin:before{background:radial-gradient(ellipse at 50% 45%,#efbd5e50,transparent 72%)}
.selected-case-stage .reel-card.valuable-skin img{filter:drop-shadow(0 0 9px #eac16580) drop-shadow(0 5px 8px #0009)}
.selected-case-stage .reel-card.valuable-skin:after{background:#f6ce7b;box-shadow:0 0 12px #f3c66e;opacity:1}
.selected-case-stage .reel-card.graded-reel .reel-price{display:block;font-size:9px;line-height:1.3;color:#aabbcf;margin-top:2px;font-weight:600}
.selected-case-stage .reel-card.valuable-skin .reel-price{color:#ffe0a0}
.selected-case-stage .reel-card.graded-reel>span{font-size:9px;max-height:none;padding-bottom:7px}
.selected-case-stage .machine-cavity .pointer{display:none}
.reel-lens .reel-arrow{position:absolute;left:50%;width:24px;height:18px;margin-left:-12px;z-index:6;pointer-events:none;filter:drop-shadow(0 0 5px #edc67d80)}
.reel-arrow svg{display:block;width:100%;height:100%;fill:none;stroke:#ffe1a0;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.reel-lens .arrow-top{top:2px;animation:arrow-in-top 1.6s ease-in-out infinite}
.reel-lens .arrow-bottom{bottom:2px;animation:arrow-in-bottom 1.6s ease-in-out infinite}
.arrow-bottom svg{transform:rotate(180deg)}
@keyframes arrow-in-top{50%{translate:0 3px;opacity:.65}}@keyframes arrow-in-bottom{50%{translate:0 -3px;opacity:.65}}
#detail-view .contents-legend{font-size:10px;line-height:1.5;max-width:400px;text-align:right}
@media(max-width:720px){.selected-case-stage .reel-card.graded-reel>span{font-size:7px;line-height:1.2}.selected-case-stage .reel-card.graded-reel .reel-price{font-size:7px}.reel-lens .reel-arrow{width:18px;height:14px;margin-left:-9px}#detail-view #contents .skin-grade{font-size:7px}#detail-view .section-heading>.contents-legend{display:block;font-size:8px;max-width:155px}}
body:has(#short-animation:checked) .reel-arrow{animation:none!important}@media(prefers-reduced-motion:reduce){.reel-lens .reel-arrow{animation:none}}
/* High-value items remain recognizable while the reel is moving. */
.selected-case-stage .reel-card.valuable-skin{opacity:1}
.selected-case-stage .reel-card.valuable-skin:before{left:-12%;right:-12%;top:-2%;bottom:0;background:radial-gradient(ellipse at 50% 48%,#ffdd8099 0%,#f3ae4666 28%,#d585292b 52%,transparent 74%);opacity:1}
.selected-case-stage .reel-card.valuable-skin img{filter:drop-shadow(0 0 3px #fff0b9) drop-shadow(0 0 13px #ffc65a) drop-shadow(0 7px 8px #0009)}
.selected-case-stage .reel-card.valuable-skin:after{left:6%;right:6%;height:4px;background:linear-gradient(90deg,transparent,#ffc74c 15%,#fff0af 50%,#ffc74c 85%,transparent);box-shadow:0 0 16px #ffbe4d;opacity:1}
.selected-case-stage .reel-card.valuable-skin>span{color:#fff4d8;opacity:1;text-shadow:0 2px 5px #000;font-weight:700}
.selected-case-stage .reel-card.valuable-skin .reel-price{display:table;margin:3px auto 0;padding:2px 7px;border-radius:4px;background:#ffd27d;color:#36210a;font-size:10px;font-weight:700;text-shadow:none;box-shadow:0 0 12px #e6a83e55}
.reel-expensive-tag{position:absolute;top:5px;left:50%;transform:translateX(-50%);white-space:nowrap;color:#ffe3a3;font:700 8px var(--font-ui);letter-spacing:1px;text-shadow:0 1px 4px #000,0 0 8px #f0b444;pointer-events:none;z-index:2}
@media(max-width:720px){.reel-expensive-tag{top:4px;font-size:6px;letter-spacing:.2px}.selected-case-stage .reel-card.valuable-skin .reel-price{font-size:7px;padding:2px 4px}.selected-case-stage .reel-card.valuable-skin img{filter:drop-shadow(0 0 3px #ffe8a1) drop-shadow(0 0 8px #ffc65a)}}