:root { color-scheme: dark; --start-muted: #cbdaf1; --start-coral: #ff7182; }
.start-page { min-height: 100svh; overflow-x: hidden; background: radial-gradient(ellipse 31rem 23rem at -5% 45%, rgba(19, 67, 143, .37), transparent 72%), radial-gradient(ellipse 32rem 25rem at 104% 40%, rgba(20, 71, 143, .32), transparent 74%), radial-gradient(ellipse 46rem 31rem at 52% 12%, rgba(24, 76, 155, .22), transparent 78%), linear-gradient(150deg, #07102a, #081838 54%, #07112c); }
.start-page::before { display: none; }
main { position: relative; width: min(1450px, calc(100% - 3rem)); margin-inline: auto; padding: clamp(1.85rem, 3vw, 2.8rem) 0 clamp(2.5rem, 4vw, 4rem); }
.start-heading { text-align: center; }
.start-heading h1 { margin: 0; font-size: clamp(2.9rem, 5.2vw, 4.9rem); font-weight: 950; line-height: 1.04; letter-spacing: -.055em; text-wrap: balance; }
.intro { margin: .9rem 0 0; color: #bcd9fa; font-size: clamp(1rem, 1.4vw, 1.25rem); line-height: 1.45; }
.start-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(.9rem, 1.4vw, 1.25rem); margin-top: clamp(1.6rem, 2.3vw, 2.2rem); align-items: stretch; }
.start-option { --accent: #58eee8; position: relative; display: flex; min-width: 0; min-height: 39rem; flex-direction: column; align-items: center; overflow: hidden; padding: 1.25rem clamp(1.1rem, 1.6vw, 1.65rem) 1.35rem; border: 1px solid rgba(54, 135, 227, .59); border-radius: 1.75rem; background: radial-gradient(ellipse at 50% 41%, rgba(30, 87, 185, .27), transparent 62%), linear-gradient(165deg, #0b1c3e, #0a1b3b 70%, #0a1a39); box-shadow: 0 1.4rem 3.5rem rgba(0, 5, 23, .3), inset 0 1px rgba(255, 255, 255, .035); text-align: center; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.start-option.solo { --accent: #ffdb58; background: radial-gradient(ellipse at 50% 41%, rgba(54, 73, 166, .27), transparent 62%), linear-gradient(165deg, #0b1b3d, #0a1a39); }
.start-option.big { --accent: #73c8ff; }
.start-option:hover, .start-option:focus-within { transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 1.6rem 3.7rem rgba(0, 5, 23, .42); }
.start-option:active { transform: scale(.995); }
.option-badge { z-index: 1; display: inline-flex; min-height: 2.35rem; align-items: center; align-self: flex-start; gap: .55rem; max-width: 100%; padding: .45rem .95rem; border-radius: 999px; color: var(--accent); background: rgba(26, 109, 157, .25); font-size: .76rem; font-weight: 900; letter-spacing: .035em; line-height: 1.15; white-space: nowrap; }
.solo .option-badge { background: rgba(147, 148, 69, .15); }
.big .option-badge { background: rgba(43, 112, 202, .27); }
.option-badge svg { display: block; width: 1.35rem; height: 1.35rem; flex: 0 0 auto; fill: currentColor; }
.option-art { position: relative; width: calc(100% + 3.3rem); height: clamp(15.5rem, 19vw, 18rem); flex: 0 0 auto; overflow: hidden; margin: .1rem -1.65rem .15rem; pointer-events: none; }
.option-art img { position: absolute; top: -1.25rem; left: 50%; display: block; width: min(86%, 27rem); max-width: none; height: auto; transform: translateX(-50%); filter: drop-shadow(0 .8rem 1rem rgba(0, 4, 24, .14)); }
.solo .option-art img { top: -3rem; width: min(80%, 26rem); }
.big .option-art img { top: -4.5rem; width: min(100%, 30rem); }
.option-copy { display: flex; width: 100%; min-width: 0; flex: 1; flex-direction: column; align-items: stretch; }
.start-option h2 { margin: .4rem 0 .7rem; color: #fff; font-size: clamp(1.45rem, 2.1vw, 1.95rem); font-weight: 950; line-height: 1.15; letter-spacing: -.035em; text-wrap: balance; }
.option-description { margin: 0; color: var(--start-muted); font-size: clamp(.98rem, 1.15vw, 1.1rem); line-height: 1.48; text-wrap: pretty; }
.screen-note { display: flex; width: 100%; min-height: 2.65rem; align-items: center; justify-content: center; gap: .6rem; margin: auto 0 .7rem; padding: .5rem .7rem; border: 1px solid rgba(102, 162, 246, .18); border-radius: .8rem; color: #f1f6ff; background: rgba(111, 156, 229, .14); font-size: .88rem; font-weight: 850; }
.screen-note svg { width: 1.25rem; height: 1.25rem; flex: 0 0 auto; color: #ffe15d; }
.start-button, .share-button { display: inline-flex; width: 100%; min-height: 3.4rem; align-items: center; justify-content: center; gap: .5rem; padding: .7rem .85rem; border-radius: .8rem; font: inherit; font-size: clamp(.91rem, 1.05vw, 1.02rem); font-weight: 950; line-height: 1.2; text-align: center; cursor: pointer; transition: transform .18s ease, background .18s ease, box-shadow .18s ease; }
.start-button { margin-top: auto; border: 1px solid #ff8b98; color: #180c1b; background: linear-gradient(110deg, #ff7f90, #ff657b); text-decoration: none; box-shadow: 0 .7rem 1.4rem rgba(255, 84, 112, .13); }
.start-button:hover { background: #ff95a1; box-shadow: 0 .75rem 1.4rem rgba(255, 84, 112, .25); }
.start-button:active, .share-button:active { transform: scale(.97); }
.share-button { min-height: 3.1rem; margin-top: .55rem; border: 1px solid rgba(217, 231, 255, .82); color: #f7fbff; background: rgba(7, 16, 44, .38); font-weight: 750; }
.share-button:hover { background: rgba(111, 156, 229, .18); }
.share-button svg { width: 1.15rem; height: 1.15rem; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.copy-message { width: 100%; margin: .4rem 0 0; color: #bdf3e7; font-size: .85rem; text-align: center; }
.copy-message:empty { display: none; }
@media (min-width: 1161px) and (max-height: 1000px) {
  main { display: flex; min-height: calc(100svh - 64px); flex-direction: column; justify-content: center; padding-block: .8rem 1rem; }
  .start-heading h1 { font-size: clamp(3.6rem, 9svh, 4.25rem); }
  .intro { margin-top: .4rem; font-size: 1rem; line-height: 1.35; }
  .start-choices { margin-top: .85rem; }
  .start-option { min-height: 0; padding: .8rem .95rem .85rem; border-radius: 1.5rem; }
  .option-badge { min-height: 2rem; padding: .35rem .75rem; font-size: .72rem; }
  .option-badge svg { width: 1.15rem; height: 1.15rem; }
  .option-art { width: calc(100% + 1.9rem); height: clamp(11rem, 26svh, 15rem); margin: 0 -.95rem; }
  .option-art img { top: -2rem; width: min(82%, 24rem); }
  .solo .option-art img { top: -3.35rem; width: min(77%, 23rem); }
  .big .option-art img { top: -4.5rem; width: min(92%, 25rem); }
  .start-option h2 { margin: .15rem 0 .35rem; font-size: 1.5rem; line-height: 1.12; }
  .option-description { font-size: 1rem; line-height: 1.36; }
  .screen-note { min-height: 2.25rem; margin-bottom: .4rem; padding: .35rem .6rem; font-size: .875rem; }
  .start-button, .share-button { min-height: 2.9rem; padding: .5rem .75rem; font-size: .95rem; }
  .share-button { min-height: 2.75rem; margin-top: .35rem; }
}
@media (min-width: 1161px) and (max-height: 780px) {
  main { padding-block: .55rem .75rem; }
  .start-heading h1 { font-size: clamp(3.6rem, 9svh, 4rem); }
  .start-choices { margin-top: .7rem; }
  .option-art { height: clamp(11rem, 24svh, 12rem); }
  .option-art img { top: -1.8rem; width: min(70%, 20rem); }
  .solo .option-art img { top: -2.4rem; width: min(66%, 19rem); }
  .big .option-art img { top: -3.2rem; width: min(74%, 21rem); }
}
@media (max-width: 1160px) {
  .start-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .start-option { min-height: 36rem; }
  .start-option.big { display: grid; grid-column: 1 / -1; min-height: 23rem; grid-template-columns: minmax(14rem, .85fr) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 1.25rem; text-align: left; }
  .big .option-art { grid-column: 1; grid-row: 1 / 3; width: 100%; height: 100%; align-self: stretch; margin: 0; }
  .big .option-art img { top: 50%; width: min(100%, 28rem); transform: translate(-50%, -50%); }
  .big .option-badge { grid-column: 2; grid-row: 1; }
  .big .option-copy { grid-column: 2; grid-row: 2; }
  .big .screen-note { margin: .8rem 0 .55rem; }
  .big .start-button { margin-top: 0; }
}
@media (max-width: 700px) {
  main { width: min(34rem, calc(100% - 1.5rem)); padding-block: 2rem 3rem; }
  .start-heading h1 { font-size: clamp(2.75rem, 9vw, 3.6rem); }
  .intro { margin-top: .75rem; font-size: 1rem; }
  .start-choices { grid-template-columns: 1fr; gap: 1rem; margin-top: 1.55rem; }
  .start-option, .start-option.big { display: flex; min-height: 0; padding: 1.05rem 1.15rem 1.2rem; text-align: center; }
  .start-option.shared { order: 1; }
  .start-option.solo { order: 2; }
  .start-option.big { order: 3; }
  .option-art, .big .option-art { width: calc(100% + 2.3rem); height: 13rem; margin: .1rem -1.15rem 0; }
  .option-art img { top: -2.35rem; width: min(104%, 30rem); transform: translateX(-50%); }
  .solo .option-art img { top: -2rem; width: min(83%, 25rem); }
  .big .option-art img { top: -3rem; width: min(104%, 30rem); transform: translateX(-50%); }
  .start-option h2 { margin: .1rem 0 .55rem; font-size: clamp(1.45rem, 5vw, 1.85rem); }
  .option-description { font-size: 1rem; }
  .start-button { margin-top: 1.2rem; }
  .big .screen-note { margin: 1rem 0 .2rem; }
  .big .start-button { margin-top: .65rem; }
  .option-badge { font-size: .73rem; }
}
@media (max-width: 350px) {
  main { width: calc(100% - 1rem); }
  .start-option, .start-option.big { padding-inline: .95rem; }
  .option-art, .big .option-art { width: calc(100% + 1.9rem); height: 11.7rem; margin-inline: -.95rem; }
  .start-heading h1 { font-size: 2.55rem; }
  .intro { font-size: .96rem; }
  .start-button, .share-button { min-height: 3rem; }
}