/* Open-case art is a freestanding object, in the same visual language as the reference. */
.case-card { padding: 4px 6px 14px; gap: 0; overflow: visible; border: 1px solid transparent; border-radius: 10px; background: transparent; box-shadow: none; }
.case-card::before { display: none; }
.case-card::after { display: none; }
.case-card .tag { top: 9px; left: 10px; }
.case-card .case-img { width: 100%; aspect-ratio: 1.05; overflow: visible; border-radius: 0; }
.case-card .case-name { min-height: 38px; margin-top: 8px; color: #c7cad4; font-size: 14px; font-weight: 600; line-height: 1.25; text-align: center; white-space: normal; text-overflow: clip; }
.case-card .case-bottom { justify-content: center; margin: 8px 0 0; padding: 0; }
.case-card .price-tag { display: inline-flex; justify-content: center; min-width: 104px; padding: 8px 13px; color: #ffcf53; font-size: 15px; font-weight: 900; border: 4px solid #07090c; border-radius: 15px; background: #202936; box-shadow: inset 0 1px 0 #ffffff12, 0 2px 0 #0008; }
.case-card .case-arrow { display: none; }
.case-card:hover { background: radial-gradient(ellipse at 50% 42%, color-mix(in srgb, var(--case-accent) 8%, transparent), transparent 72%); border-color: transparent; }
.case-scene.case-open-scene { position: relative; display: block; width: 100%; height: 100%; isolation: isolate; overflow: visible; background: transparent; perspective: none; }
.case-scene.case-open-scene::after { display: none; }
.case-open-scene .case-environment, .case-open-scene .case-scene-vignette { display: none; }
.case-open-scene .case-halo { position: absolute; inset: 12% 7% 7%; background: radial-gradient(ellipse at 50% 62%, color-mix(in srgb, var(--case-accent) 44%, transparent), transparent 65%); opacity: .85; }
.case-card .case-open-scene .case-halo { display: none; }
.case-open-scene .case-open-art { position: absolute; z-index: 2; inset: -5%; display: block; width: 110% !important; height: 110% !important; max-width: none !important; max-height: none !important; object-fit: contain !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; filter: none !important; transition: transform .35s ease !important; }
.case-card .case-open-scene .case-open-art { transform: none !important; }
@media (hover: hover) {
  .case-card:hover .case-open-scene .case-open-art { transform: translateY(-7px) scale(1.045) !important; }
}
.case-page .stage { padding: 12px; border-color: #ffffff23; background: #171920; }
.case-page .hero-poster .hero-meta { padding: 9px 8px 5px; }
.case-page .hero-poster .case-open-scene.case-scene-large { width: min(100%, 570px); height: auto; aspect-ratio: 1.15; margin: 0 auto 16px; overflow: hidden; border-radius: 10px; background: radial-gradient(ellipse at 50% 54%, color-mix(in srgb, var(--case-accent) 25%, #141820), #090b10 78%); }
.case-page .case-open-scene .case-environment { position: absolute; inset: -7%; display: block; width: 114%; height: 114%; object-fit: cover; filter: blur(4px) brightness(.28) saturate(.85); opacity: .9; }
.case-page .case-open-scene .case-environment[src*="/open-"] { inset: -22%; width: 144%; height: 144%; object-fit: contain; filter: blur(20px) brightness(.31) saturate(1.35); }
.case-page .case-open-scene .case-scene-vignette { position: absolute; inset: 0; display: block; z-index: 1; background: radial-gradient(ellipse at center, transparent 25%, #07090eb9 89%), linear-gradient(0deg, #080a10a8, transparent 40%); }
.case-page .case-open-scene .case-halo { z-index: 1; inset: 8% 10% 4%; filter: blur(14px); }
.case-page .case-open-scene .case-open-art { z-index: 2; inset: 0; width: 100% !important; height: 100% !important; filter: drop-shadow(0 24px 18px #000c) !important; animation: open-case-float 4.3s ease-in-out infinite; }
.case-page .hero-poster h1 { margin: 0; }
@keyframes open-case-float { 50% { transform: translateY(-7px) scale(1.015); } }
@media (min-width: 1050px) {
  .case-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px 10px; }
}
@media (max-width: 600px) {
  .case-grid { gap: 8px 6px; }
  .case-card { padding: 1px 3px 12px; }
  .case-card .case-img { aspect-ratio: 1.03; }
  .case-card .case-name { min-height: 33px; margin-top: 6px; font-size: 12px; }
  .case-card .price-tag { min-width: 90px; padding: 6px 10px; border-width: 3px; border-radius: 12px; font-size: 13px; }
  .case-page .hero-poster .case-open-scene.case-scene-large { aspect-ratio: 1.17; }
}
@media (prefers-reduced-motion: reduce) {
  .case-open-scene .case-open-art { animation: none !important; transition: none !important; }
}