/* Home only: desktop header owns top safe area; mobile hero owns it without a header. */
.r7-home { --r7-height: calc(100vh - 72px); }
@supports (height: 100dvh) { .r7-home { --r7-height: calc(100dvh - 72px); } }
@media (max-width: 960px) {
  .r7-home { --r7-height: calc(100vh - 66px - env(safe-area-inset-bottom, 0px)); }
  @supports (height: 100dvh) { .r7-home { --r7-height: calc(100dvh - 66px - env(safe-area-inset-bottom, 0px)); } }
}
.r7-home .r7-hero { display: flex; align-items: center; min-height: var(--r7-height); height: auto; padding: clamp(22px, 4vh, 42px) 0; overflow: hidden; background: #0a2150; }
.r7-home .r7-hero::before { z-index: 1; border-color: rgba(255,255,255,.9); }
.r7-home.r7-media-ready .r7-hero::before { display: none; }
.r7-home .r7-canvas { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; background: radial-gradient(ellipse at 50% 30%, #2461c2, #0a2150); }
.r7-home .r7-film, .r7-home .r7-base, .r7-home .r7-paddle { position: absolute; display: block; max-width: none; pointer-events: none; }
.r7-home .r7-film { inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; }
.r7-home .r7-base, .r7-home .r7-paddle { opacity: 0; transform-origin: 0 0; }
.r7-home.r7-media-ready:not(.r7-playing) .r7-base { opacity: 1; }
.r7-home .r7-hero > .wrap { position: relative; z-index: 2; width: min(100% - 2 * var(--page-x), var(--max)); display: block; }
.r7-home .r7-copy { position: relative; width: min(54%, 610px); padding: 1rem 1.2rem 1.2rem; margin-left: -.7rem; background: rgba(3,12,29,.9); border-radius: 12px; text-shadow: 0 2px 10px rgba(0,0,0,.48); }
.r7-home .r7-copy .lead { color: #f3f7ff; max-width: 37rem; }
.r7-home .r7-copy h1 { font-size: clamp(2.65rem, 6.3vw, 5.75rem); }
.r7-home .r7-skip { display: none; position: absolute; z-index: 5; right: clamp(18px, 3vw, 48px); bottom: 18px; background: rgba(4,12,30,.85); border: 1px solid rgba(255,255,255,.7); border-radius: 99px; color: #fff; padding: .5rem .85rem; font-size: .85rem; cursor: pointer; }
.r7-home.r7-playing .r7-skip { display: block; }
.r7-home.r7-boot .r7-copy, .r7-home.r7-playing .r7-copy { opacity: 0; clip-path: inset(0 0 12% 0); }
.r7-home.r7-playing .r7-copy, .r7-home.r7-finished .r7-copy { transition: none; }
.r7-home .r7-copy { transition: opacity .65s ease, clip-path .75s ease; clip-path: inset(0); }
.r7-home.r7-playing .dock-ball img, .r7-home.r7-playing .menu-trigger img { opacity: 0; }
.r7-home .dock-ball img, .r7-home .menu-trigger img { transition: none; }
.r7-home .dock-ball:hover img, .r7-home .menu-trigger:hover img, .r7-home .dock-ball[aria-expanded="true"] img { transform: none; }
.r7-ball { position: fixed; z-index: 80; pointer-events: none; background-repeat: no-repeat; background-size: 800% 800%; will-change: left, top, width, height; }
.r7-home .r7-secondary { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem 2rem; padding: 1.05rem 0 2.1rem; }
.r7-home .r7-secondary .hero-meta { margin: 0; color: #26324b; }
.r7-home .r7-badges { display: flex; flex-wrap: wrap; gap: .5rem; }
.r7-home .r7-badges .hero-tag { position: static; display: block; background: #0a2150; color: #fff; padding: .4rem .7rem; font-size: .7rem; }
.r7-home .r7-badges .hero-tag b { font-size: 1rem; }
.r7-home .scoreboard-float { margin-top: 0; }
@media (max-width: 960px) {
  .r7-home { --r7-safe-top: env(safe-area-inset-top, 0px); }
  .r7-home .site-header { display: none; }
  .r7-home { scroll-padding-top: calc(12px + var(--r7-safe-top)); }
  .r7-home .r7-hero { padding: 14px 0 38px; }
  .r7-home .r7-hero > .wrap { width: min(100% - 28px, 680px); margin: auto; }
  .r7-home .r7-copy { width: 100%; margin: 0; padding: .8rem .8rem 1rem; background: rgba(3,12,29,.9); }
  .r7-home .r7-copy h1 { font-size: clamp(2.1rem, 9.2vw, 3.4rem); line-height: .98; }
  .r7-home .r7-copy .kicker { margin-bottom: .45rem; }
  .r7-home .r7-copy .lead { font-size: clamp(.88rem, 3.7vw, 1rem); line-height: 1.36; margin: .65rem 0 0; }
  .r7-home .r7-copy .hero-actions { margin-top: .85rem; gap: .45rem; }
  .r7-home .r7-copy .btn { min-height: 42px; font-size: .87rem; padding: 0 .8rem; }
  .r7-home .r7-secondary { padding: .7rem 0 1.3rem; }
  .r7-home .r7-skip { bottom: 6px; right: 16px; font-size: .75rem; padding: .3rem .65rem; }
}
@media (max-width: 600px) {
  .r7-home .r7-copy .hero-actions { display: grid; grid-template-columns: 1fr; }
  .r7-home .r7-copy .btn { min-height: 39px; }
}
@media (max-height: 650px) {
  .r7-home .r7-hero { padding-top: 10px; padding-bottom: 26px; }
  .r7-home .r7-copy { padding-block: .4rem; }
  .r7-home .r7-copy .lead { font-size: .86rem; line-height: 1.3; }
  .r7-home .r7-copy .hero-actions { margin-top: .5rem; }
}
@media (orientation: landscape) and (max-height: 650px) and (min-width: 650px) {
  .r7-home .r7-hero { padding: 9px 0; }
  .r7-home .r7-hero > .wrap { width: min(100% - 36px, 1000px); }
  .r7-home .r7-copy { width: 100%; display: grid; grid-template-columns: 46% minmax(0, 54%); grid-template-rows: auto auto auto; gap: .3rem 1rem; align-items: center; padding: .55rem .8rem; }
  .r7-home .r7-copy .kicker { grid-column: 1; grid-row: 1; margin: 0; }
  .r7-home .r7-copy h1 { grid-column: 1; grid-row: 2 / 4; font-size: clamp(2rem, 4.5vw, 3rem); }
  .r7-home .r7-copy .lead { grid-column: 2; grid-row: 2; margin: 0; font-size: clamp(.8rem, 1.45vw, .96rem); line-height: 1.32; }
  .r7-home .r7-copy .hero-actions { grid-column: 2; grid-row: 3; display: flex; flex-wrap: wrap; margin: 0; }
  .r7-home .r7-copy .btn { flex: 1 1 auto; min-height: 35px; font-size: .77rem; }
  .r7-home .r7-skip { bottom: 2px; }
}
@media (prefers-reduced-motion: reduce) { .r7-home .r7-copy { opacity: 1 !important; clip-path: none !important; transition: none; } }

/* The extra groups only name the four court quadrants; desktop keeps R7 flow. */
.r7-home .r8-heading, .r7-home .r8-message { display: contents; }

@media (max-width: 960px) {
  .r7-home .r7-hero { min-height: var(--r7-height); padding: var(--r7-safe-top) 0 0; }
  .r7-home .r7-hero > .wrap {
    position: absolute; z-index: 2;
    left: var(--r8-table-x, 2.5%); top: var(--r8-table-y, 10px);
    width: var(--r8-table-width, 95%); height: var(--r8-table-height, calc(100% - 30px));
    margin: 0; display: block;
  }
  .r7-home .r7-copy {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: clamp(20px, 5vw, 30px);
    width: 100%; height: 100%; padding: clamp(14px, 2.1vh, 22px) clamp(9px, 2.5vw, 16px) clamp(18px, 2.5vh, 26px);
    margin: 0; border-radius: 0; background: none;
    text-shadow: 0 2px 5px #092456, 0 1px 15px rgba(2, 18, 51, .75);
  }
  .r7-home .r8-heading, .r7-home .r8-message { display: block; min-width: 0; align-self: start; }
  .r7-home .r8-heading { grid-column: 1; grid-row: 1; }
  .r7-home .r8-message { grid-column: 2; grid-row: 1; }
  .r7-home .r7-copy .kicker { display: flex; align-items: flex-start; gap: .35rem; margin: 0 0 .6rem; color: #f1f6ff; font-size: clamp(.6rem, 1.45vw, .72rem); line-height: 1.25; letter-spacing: .055em; }
  .r7-home .r7-copy .kicker::before { width: 9px; height: 9px; margin-top: .12em; }
  .r7-home .r7-copy h1 { font-size: clamp(1.55rem, 6.8vw, 3.25rem); font-variation-settings: "wdth" 110; line-height: 1.04; overflow-wrap: normal; }
  .r7-home .r7-copy .lead { margin: 0; max-width: none; color: #fff; font-size: clamp(.875rem, 1.5vw, 1.03rem); line-height: 1.32; overflow-wrap: break-word; }
  .r7-home .r7-copy .hero-actions { display: contents; }
  .r7-home .r7-copy .btn {
    min-width: 0; width: 100%; min-height: 44px; padding: .35rem .28rem;
    align-self: end; justify-self: stretch; gap: .3rem;
    font-size: clamp(.8125rem, 1.35vw, .9rem); line-height: 1.13;
    white-space: normal; text-align: center; text-shadow: none;
  }
  .r7-home .r7-copy .btn-ball { flex: none; width: 18px; height: 18px; margin-left: 0; }
  .r7-home .r7-copy .btn-primary { grid-column: 1; grid-row: 2; }
  .r7-home .r7-copy .btn-ghost { grid-column: 2; grid-row: 2; }
  .r7-home .r7-skip { bottom: 4px; }
}
/* Keep complete copy legible on a short, narrow phone: scroll the naturally taller stage. */
@media (max-width: 350px) and (max-height: 650px) and (orientation: portrait) {
  .r7-home .r7-hero { min-height: 610px; }
  .r7-home .r7-copy h1 { font-size: 1.35rem; }
}
@media (max-width: 960px) and (orientation: landscape) {
  .r7-home .r7-copy { padding-block: 9px 12px; gap: 15px 28px; }
  .r7-home .r7-copy .kicker { margin-bottom: .3rem; }
  .r7-home .r7-copy h1 { font-size: clamp(1.42rem, 3.35vw, 2.5rem); line-height: 1; }
  .r7-home .r7-copy .lead { font-size: clamp(.875rem, 1.45vw, .92rem); line-height: 1.22; }
  .r7-home .r7-copy .btn { min-height: 44px; }
}