body { overflow-x: clip; }
.small-cta { white-space: nowrap; }
.hero { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 24px; }
.hero-copy { min-width: 0; }
.hero-note { margin: 18px 0 0; color: #9fd0e8; font-size: 13px; font-weight: 700; }
.hero-visual { position: relative; display: grid; place-items: center; min-width: 0; height: 440px; isolation: isolate; }
.hero-visual::before { content: ''; position: absolute; inset: 12% 0; border-radius: 50%; background: #1999d62e; filter: blur(65px); z-index: -1; }
.hero-visual .rink { width: min(100%, 470px); height: 330px; margin: 0; border: 8px solid #e7f7ff; border-radius: 39% / 23%; transform: rotate(-11deg) scale(.94); background: radial-gradient(circle at 45% 40%,#f5fcff,#cce8f4 74%); box-shadow: 0 25px 60px #0008, inset 0 0 20px #3279a044, 0 0 0 5px #3a84ac66; overflow: hidden; }
.hero-visual .rink::before,.hero-visual .rink::after { display: none; }
.hero-visual .rink-line,.hero-visual .rink-blue { position:absolute; top: 0; bottom: 0; width: 4px; }
.hero-visual .rink-line { left: 50%; background: #e16977; }
.hero-visual .rink-blue { background: #4494cb; width: 6px; }
.hero-visual .rink-blue.left { left: 28%; }
.hero-visual .rink-blue.right { left: 72%; }
.hero-visual .rink-circle { position: absolute; border: 3px solid #d66570; border-radius: 50%; width: 72px; height: 72px; top: calc(50% - 36px); }
.hero-visual .rink-circle.center { width: 104px; height: 104px; top: calc(50% - 52px); left: calc(50% - 52px); border-color: #508abb; }
.hero-visual .rink-circle.end.left { left: 9%; }
.hero-visual .rink-circle.end.right { right: 9%; }
.hero-visual .rink span { bottom: auto; right: auto; transform: none; border: 0; padding: 0; font-size: inherit; }
.hero-visual .skater { position: absolute; display: block; width: 20px; height: 25px; border-radius: 10px 10px 7px 7px; box-shadow: 0 7px 12px #1237, inset 0 3px 0 #fff8; }
.hero-visual .skater::before { content: ''; position: absolute; top: -8px; left: 5px; width: 10px; height: 10px; border-radius: 50%; background: #203747; box-shadow: inset 0 0 0 2px #f5f7fa; }
.hero-visual .skater::after { content: ''; position: absolute; width: 2px; height: 28px; left: 20px; top: 13px; background: #594635; transform: rotate(-23deg); transform-origin: top; }
.hero-visual .skater.home { background: #1c6baf; }
.hero-visual .skater.away { background: #c74354; }
.hero-visual .skater.home.one { left: 17%; top: 28%; }.hero-visual .skater.home.two { left: 35%; top: 61%; }.hero-visual .skater.home.three { left: 43%; top: 29%; }
.hero-visual .skater.away.one { right: 17%; top: 66%; }.hero-visual .skater.away.two { right: 31%; top: 26%; }.hero-visual .skater.away.three { right: 43%; top: 58%; }
.hero-visual .puck { width: 16px; height: 10px; left: 59%; top: 47%; border-radius: 50%; box-shadow: 0 4px 8px #0008,0 0 0 4px #0f27344a; }
.rink-caption { position: absolute; right: 0; bottom: 5px; display: grid; gap: 4px; padding: 13px 18px; border: 1px solid #8ad2ee7a; border-radius: 14px; background: #092c49ed; box-shadow: 0 12px 30px #00182c9c; transform: rotate(3deg); }
.rink-caption strong { font-size: 12px; letter-spacing: .12em; color: #f7d67e; }.rink-caption span { font-size: 12px; color: #d8f0ff; }
@media (max-width:850px) { .hero { grid-template-columns: 1fr; }.hero-visual { height: 390px; }.hero-visual .rink { height: 310px; } }
@media (max-width:560px) { .header nav { gap: 0; }.small-cta { padding: 10px 12px; }.hero-visual { height: 270px; }.hero-visual .rink { height: 210px; transform: rotate(-8deg) scale(.92); }.hero-visual .rink-circle { width: 46px; height: 46px; top: calc(50% - 23px); }.hero-visual .rink-circle.center { width: 70px; height: 70px; top: calc(50% - 35px); left: calc(50% - 35px); }.hero-visual .skater { transform: scale(.8); }.rink-caption { bottom: -8px; right: 8px; padding: 8px 11px; }.rink-caption strong,.rink-caption span { font-size: 10px; } }