.top__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); align-items: start; padding-bottom: calc(var(--sp-8) + env(safe-area-inset-bottom, 0px)); } .top__main { width: 100%; max-width: var(--maxw-content); justify-self: center; text-align: center; } .top__hero { padding-top: var(--sp-6); } .top__title { margin: 0; font-family: var(--ff-ui); font-weight: 700; font-size: var(--fs-800); line-height: .92; letter-spacing: -.03em; color: var(--ink-9); text-transform: uppercase; } .top__word { display: block; } .top__tagline { margin-top: var(--sp-2); font-size: var(--fs-200); line-height: var(--lh-base); letter-spacing: .06em; color: var(--ink-6); } .top__mode { margin-top: var(--sp-5); } .top__objective { margin-top: 0; margin-inline: auto; max-width: 34em; font-size: var(--fs-400); line-height: var(--lh-base); letter-spacing: 0; color: var(--ink-8); text-wrap: balance; } .top__hint { margin-top: var(--sp-2); margin-inline: auto; max-width: 34em; font-size: var(--fs-200); line-height: var(--lh-base); letter-spacing: 0; color: var(--ink-6); text-wrap: balance; } .top__rule { margin-top: var(--sp-5); } .top__play { margin-top: var(--sp-5); display: flex; justify-content: center; } .top__endless-btn { max-width: 100%; text-transform: none; letter-spacing: 0; padding-inline: var(--sp-5); } .top__retry { margin-top: var(--sp-4); text-align: center; font: var(--fs-200)/1 var(--ff-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-6); } .top__ad-rule { margin-top: var(--sp-8); } .top__ad { margin-top: var(--sp-5); } .top__share { position: relative; margin-top: var(--sp-7); display: flex; justify-content: center; } .top__share-btn { max-width: 100%; text-transform: none; letter-spacing: 0; } .top__toast { position: absolute; z-index: 30; left: 50%; bottom: calc(100% + var(--sp-2)); transform: translateX(-50%); max-width: 100%; margin: 0; padding: var(--sp-2) var(--sp-4); pointer-events: none; background: var(--ink-0); border: var(--bw-1) solid var(--ink-4); border-radius: var(--r-1); text-align: center; font-size: var(--fs-300); line-height: var(--lh-snug); letter-spacing: 0; white-space: nowrap; color: var(--ink-9); opacity: 0; } .top__toast.is-on { animation: toast-show 1600ms var(--ease-out) 1; } @keyframes toast-show { 0% { opacity: 0; } 8% { opacity: 1; } 76% { opacity: 1; } 100% { opacity: 0; } } @keyframes toast-static { 0% { opacity: 1; } 99% { opacity: 1; } 100% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .top__toast.is-on { animation: toast-static 1600ms step-end 1; } }