/* Title: an original street-sports poster over the live table. */
.screen-title.is-active {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  padding: 32px 6%; gap: 12px; text-align: left; background: transparent;
  overflow: hidden; isolation: isolate;
}
.screen-title::before {
  content: ''; position: absolute; inset: 0; z-index: -1; background: var(--ink);
  clip-path: polygon(0 0, 41% 0, 52% 100%, 0 100%); opacity: .86;
}
.home-edition { margin: 0; font: 800 var(--text-sm)/1.4 var(--font-body); color: var(--yellow); }
/* The KONK! logo carries its own slant, outline and descriptor; it only needs a size and a grounding shadow. */
.home-logo { margin: 0 0 0 -8px; width: min(560px, 44vw); line-height: 0; filter: drop-shadow(0 8px 14px rgb(var(--ink-rgb) / .55)); }
.home-logo img { display: block; width: 100%; height: auto; }
.tagline { max-width: 34ch; margin: 0; font: var(--text-xl)/1.1 var(--font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--paper); text-shadow: var(--shadow-text); }
.home-edition { margin-top: 8px; text-transform: uppercase; letter-spacing: .06em; }
.home-location { display: flex; align-items: center; gap: 12px; margin: 8px 0; color: var(--paper); font: var(--text-sm)/1.4 var(--font-body); }
.home-location b { font: var(--text-xl)/1 var(--font-display); color: var(--yellow); border-right: 3px solid; padding-right: 12px; }
.screen-title .menu-stack { display: grid; gap: 8px; width: 340px; max-width: 100%; }
.screen-title .home-play { background: var(--yellow); color: var(--ink); display: flex; justify-content: space-between; align-items: center; min-height: 66px; font: var(--text-2xl)/1 var(--font-display); }
.home-play span[aria-hidden] { font-family: var(--font-body); font-size: var(--text-2xl); }
@media (hover: hover) { .screen-title .btn:hover { background: var(--paper); color: var(--ink); } }
.screen-title .home-venues { text-align: left; padding: 12px 20px; }
.home-secondary { display: flex; gap: 8px; }
.home-secondary .btn { flex: 1; font-size: var(--text-xs); padding: 8px; }
.title-stars { align-self: start; margin: 4px 0; font: var(--text-xs)/1.4 var(--font-body); color: var(--paper); }
@media (max-width: 700px) {
  .screen-title.is-active { justify-content: flex-end; padding: 24px 20px 72px; gap: 8px; }
  .screen-title::before { clip-path: polygon(0 20%, 100% 38%, 100% 100%, 0 100%); opacity: .9; }
  .home-logo { width: min(420px, 88vw); }
  .home-edition { font-size: var(--text-xs); }
  .home-location { margin: 4px 0; font-size: var(--text-xs); }
  .tagline { font-size: var(--text-md); }
  .screen-title .menu-stack { width: 100%; gap: 4px; }
  .screen-title .home-play { min-height: 56px; font-size: var(--text-xl); }
}
@media (max-width: 350px) { .screen-title.is-active { padding-inline: 16px; } }
@media (max-height: 620px) {
  .home-logo { width: min(250px, 32vw); } .home-location { display: none; }
  .screen-title.is-active { gap: 4px; padding-top: 16px; padding-bottom: 60px; }
  .tagline, .title-stars { display: none; }
  .screen-title .home-play { min-height: 48px; font-size: var(--text-xl); }
}

/* First launch: the big button offers Kwame's Corner, with a quieter way straight into a match. */
.screen-title .home-learn-label { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.screen-title .home-learn small { font: 700 var(--text-xs)/1 var(--font-body); letter-spacing: .04em; text-transform: uppercase; opacity: .7; }
.screen-title .home-just-play { text-align: left; padding: 10px 20px; font-size: var(--text-sm); }