.home-scene { width: 100%; min-width: 0; }
.home-scene__card { min-width: 0; overflow: hidden; border: 1px solid var(--color-line); border-radius: var(--radius-lg); background: var(--color-white); box-shadow: var(--shadow-soft); }
.home-scene__card-top { display: flex; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.3rem .2rem; background: #e0e8d6; color: var(--color-ink-soft); font-size: var(--text-xs); letter-spacing: .05em; }
.home-scene__live { color: var(--color-ink); }
.home-scene__live::before { display: inline-block; width: 6px; height: 6px; margin-right: .5rem; border-radius: 50%; background: var(--color-ocean); vertical-align: .1em; content: ""; }
.home-scene__stage { position: relative; width: 100%; height: 320px; overflow: hidden; background: radial-gradient(ellipse at 48% 70%, #f5f5e9 0%, #e0e8d6 68%); isolation: isolate; }
.home-scene__stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; z-index: 2; }
.home-scene__halo { position: absolute; width: 78%; aspect-ratio: 1; left: 12%; top: -80%; border: 1px solid rgba(28, 84, 69, .13); border-radius: 50%; }
.home-scene__tank { position: absolute; width: 53%; height: 57%; left: 22%; top: 19%; transform: perspective(800px) rotateY(-19deg) rotateX(5deg); border: 2px solid #729784; border-radius: 3px; background: linear-gradient(to bottom, rgba(255, 254, 249, .35) 0 9%, rgba(130, 181, 153, .25) 10% 88%, #798676 89% 100%); box-shadow: 13px 21px 22px -13px rgba(25, 60, 51, .26), inset 5px 0 2px rgba(255, 255, 255, .4); transition: width .25s, left .25s; }
.home-scene[data-scene="planted"] .home-scene__tank { width: 66%; left: 16%; }
.home-scene__tank::before { position: absolute; left: 100%; top: -2px; bottom: -2px; width: 19%; border: 2px solid #729784; background: rgba(138, 185, 159, .23); transform-origin: left; transform: skewY(-17deg); content: ""; }
.home-scene__tank::after { position: absolute; left: 4%; right: 4%; top: -14px; height: 7px; border-radius: 2px; background: var(--color-ocean); box-shadow: 0 4px 0 -1px #fff9da; content: ""; }
.home-scene__water { position: absolute; left: 0; right: 0; top: 12%; height: 1px; background: rgba(255, 254, 249, .75); }
.home-scene__base { position: absolute; left: 0; right: 0; bottom: 0; height: 8%; background: #6c7b67; }
.home-scene__leaf { position: absolute; bottom: 8%; left: 19%; width: 12%; height: 59%; border-radius: 85% 0 85% 0; background: #5b8251; transform-origin: bottom; box-shadow: inset 2px 0 rgba(255, 255, 255, .25); }
.home-scene__leaf--one { transform: rotate(-22deg); }.home-scene__leaf--two { left: 29%; height: 72%; transform: rotate(3deg); }.home-scene__leaf--three { left: 38%; height: 47%; transform: rotate(22deg); }.home-scene__leaf--four { left: 48%; height: 34%; transform: rotate(38deg); opacity: .75; }
.home-scene__rock { position: absolute; bottom: 9%; right: 16%; width: 30%; height: 29%; clip-path: polygon(8% 62%, 31% 8%, 70% 0, 93% 45%, 100% 86%, 47% 100%, 0 84%); background: #9a9b81; }.home-scene__rock--two { right: 32%; width: 20%; height: 19%; background: #b1b19a; }
.home-scene__card[data-active="true"] .home-scene__tank { visibility: hidden; }
.home-scene__stage-foot { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .1rem 1.2rem 1rem; background: #e0e8d6; color: var(--color-ink-soft); font-size: var(--text-xs); }
.home-scene__rotate { min-height: 44px; display: inline-flex; align-items: center; gap: .7rem; padding: .55rem .9rem; border: 1px solid var(--color-line); border-radius: 99px; background: var(--color-white); color: var(--color-ink); cursor: pointer; white-space: nowrap; }
.home-scene__rotate[hidden] { display: none; }
.home-scene__rotate:hover { border-color: var(--color-ocean); }
.home-scene__rotate:disabled { cursor: default; opacity: .65; }
.home-scene__choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .3rem; margin: 1.1rem 1.2rem; padding: .3rem; border-radius: 13px; background: var(--color-foam); }
.home-scene__choices:has(> :only-child) { grid-template-columns: 1fr; }
.home-scene__choices a { display: grid; place-items: center; min-height: 44px; padding: .4rem .2rem; border-radius: 10px; color: var(--color-ink-soft); font-size: var(--text-sm); text-decoration: none; text-align: center; }
.home-scene__choices a[aria-current="true"] { background: var(--color-white); color: var(--color-ocean); font-weight: 700; box-shadow: 0 2px 7px rgba(38, 60, 41, .08); }
.home-scene__cta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 53px; margin: 0 1.2rem 1.2rem; padding: .8rem 1.1rem; border-radius: 12px; background: var(--color-ocean); color: var(--color-white); font-weight: 650; text-decoration: none; }
.home-scene__cta:hover { background: var(--color-aqua-dark); color: var(--color-white); }
@media (prefers-reduced-motion: reduce) { .home-scene__tank { transition: none; } }
@media (max-width: 680px) { .home-scene__stage { height: 216px; }.home-scene__card-top { padding-inline: 1rem; }.home-scene__stage-foot { padding-inline: 1rem; }.home-scene__choices { margin-inline: 1rem; }.home-scene__cta { margin-inline: 1rem; } }
