html, body { margin: 0; }
body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: system-ui, sans-serif;
    text-align: center;
    touch-action: manipulation;
    overflow-x: hidden;
    /* subtle dot-grid texture over white, matching the mockup's faint background */
    background:
        radial-gradient(circle, rgba(0,0,0,0.04) 2px, transparent 2px) 0 0/16px 16px,
        #fff;
}
.presented-by {
    margin: 0;
    width: 100%;
    max-width: 402px;
    box-sizing: border-box;
    padding: 1.25rem 2rem;
    font-size: 0.625rem;
    color: #666;
}
.content {
    width: 100%;
    max-width: 402px;
    box-sizing: border-box;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}
.branding {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}
/* Logo built from 3 layered exports (honeycomb behind, gloves on top) instead
   of one flattened image. Offsets/sizes below are the honeycomb/glove-l/
   glove-r source layers' exact positions on their shared 224x224 artboard,
   scaled 0.5x to the 112px display box — keeps the layers pixel-aligned to
   how the original flattened sparring-gloves.webp composited them. */
.gloves-box {
    position: relative;
    width: 112px;
    height: 112px;
}
.gloves-layer {
    position: absolute;
    display: block;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.gloves-layer--honeycomb {
    left: 16px;
    top: 13.5px;
    width: 74px;
    height: 85px;
    background-image: url('img/honeycomb.webp');
}
.gloves-layer--l,
.gloves-layer--r {
    /* Subtle independent float — different duration + negative delay so the
       two gloves drift out of phase instead of bobbing in lockstep. */
    animation: gloves-float 2.6s ease-in-out infinite alternate;
}
.gloves-layer--r {
    animation-duration: 3.1s;
    animation-delay: -1.4s;
}
@keyframes gloves-float {
    from { transform: translateY(-2px); }
    to { transform: translateY(2px); }
}
@media (prefers-reduced-motion: reduce) {
    .gloves-layer--l,
    .gloves-layer--r {
        animation: none;
    }
}
.gloves-layer--l {
    left: 1px;
    top: 2px;
    width: 58.5px;
    height: 73.5px;
}
.gloves-layer--r {
    left: 49.5px;
    top: 35.5px;
    width: 62.5px;
    height: 75.5px;
    z-index: 1;
}
/* Tap target + bounce transform live on this inner element, separate from
   the outer .gloves-layer's own float animation (both animate transform —
   splitting them onto parent/child avoids one clobbering the other), so
   each glove can spring independently on tap without disturbing the float. */
.glove-bounce {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.glove-bounce[data-glove="l"] { background-image: url('img/glove-l.webp'); }
.glove-bounce[data-glove="r"] { background-image: url('img/glove-r.webp'); }
.glove-bounce.bouncing {
    animation: glove-bounce 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes glove-bounce {
    0% { transform: scale(1) translateY(0); }
    35% { transform: scale(0.82) translateY(4px); }
    65% { transform: scale(1.15) translateY(-6px); }
    100% { transform: scale(1) translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .glove-bounce.bouncing { animation: none; }
    .particle-burst { display: none; }
}
/* particles.js appends this canvas to <body> expecting a fixed full-viewport
   overlay (see dojo.css's own copy of this rule) — without it the canvas
   sits in normal document flow after the footer, off-screen. */
.particle-burst {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 20; /* above .gate-card's 10 */
}
/* logo: real "Sparring" / "スパーリング" text stays in the DOM for a11y/SEO,
   visually replaced by the exported logotype PNG — typography is a deliberate
   design choice, not something a system font can reproduce */
.logo {
    position: relative;
    width: 203px;
    height: 58px;
}
.wordmark, .subtitle {
    position: absolute;
    left: 0;
    margin: 0;
    overflow: hidden;
    white-space: nowrap;
    text-indent: -9999px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.wordmark {
    top: 0;
    left: 0;
    width: 203px;
    height: 58px;
    background-image: url('img/logo-sparring-v2b.png');
}
.alpha-notice {
    margin: 0;
    font-size: 0.625rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #666;
}
.copy {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.copy p {
    margin: 0;
    line-height: 1.4;
}
.copy p:first-child { color: #222; font-size: 1rem; }
.copy p:last-child { color: #444; font-size: 0.875rem; }
#start-btn {
    padding: 0.625rem 0.875rem;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 0.5rem;
    border: none;
    background: #d32f2f;
    text-decoration: none;
    color: #fff;
    transition: filter 0.15s ease;
    -webkit-tap-highlight-color: transparent; /* suppress mobile Safari/Chrome's tap-flash */
}
#start-btn:hover { filter: brightness(1.1); }
#start-btn:active { filter: brightness(0.85); }
.learn-more {
    margin: 0;
    font-size: 0.875rem;
    color: #222;
}
.learn-more a {
    color: #d32f2f;
    font-weight: 700;
    text-decoration: underline;
}
.divider {
    width: 140px;
    height: 0;
    border: 0;
    border-top: 1px solid rgba(0,0,0,0.1);
    margin: 0;
}
footer {
    margin: 0;
    padding: 2rem;
    box-sizing: border-box;
    font-size: 0.8125rem;
    color: #666;
}
footer p {
    margin: 0 0 1rem;
}
footer a { color: #666; }
.locale-switcher {
    box-sizing: border-box;
    font-size: 0.75rem;
    display: flex;
    width: fit-content;
    flex: 0 0 auto;
    line-height: 1;
    gap: 0.25rem;
    border: 1px solid #ddd;
    border-radius: 999px;
    padding: 0.125rem;
    margin: 0 auto 1rem;
    background: #f0f0f0;
}
.locale-switcher a, .locale-switcher span { color: #888; text-decoration: none; padding: 0.5rem 0.75rem; }
.locale-switcher .locale-current { color: #222; background: #fff; border-radius: 999px; font-weight: 700; box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1); }

/* Easter-egg dialog: same dark gate-card treatment as dojo.css's
   #confirm-dialog/#eval-dialog, but position:fixed since this page has no
   positioned ancestor to anchor an absolute card to. */
.gate-card {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(92vw, 360px);
    box-sizing: border-box;
    background: #1a1a1a;
    border: 1px solid #333;
    color: #f2f2f2;
    color-scheme: dark;
    padding: 0.75rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    border-radius: 1.25rem;
    z-index: 10;
    text-align: left; /* body is text-align:center for the marketing copy above it; dojo's gate-cards never need this override since dojo's body isn't centered */
    opacity: 1;
    transition: opacity 300ms ease; /* same fade recipe as dojo.css's .gate-card, driven by the same .fading toggle */
}
.gate-card[hidden] { display: none; }
.gate-card.fading { opacity: 0; }
/* Spring scale-in on show, layered on top of the opacity fade — plays once
   via a JS-added class (see start.js's showEggDialog), not looping. */
.gate-card.bouncing-in {
    animation: egg-dialog-in 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes egg-dialog-in {
    0% { transform: translate(-50%, -50%) scale(0.7); }
    60% { transform: translate(-50%, -50%) scale(1.05); }
    100% { transform: translate(-50%, -50%) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .gate-card.bouncing-in { animation: none; }
}
#egg-heading { margin: 0.25rem 0 0.5rem; font-size: 1.125rem; font-weight: 700; color: #fefefe; }
#egg-description { margin: 0; line-height: 1.35; color: #ccc; }
#egg-actions { margin-top: 0.75rem; } /* same spacing as dojo's #confirm-actions/#eval-actions */
#egg-dismiss {
    width: 100%;
    box-sizing: border-box;
    text-align: center; /* button label centered even though .gate-card's heading/description are left-aligned */
    padding: 0.65rem;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 0.5rem;
    border: none;
    background: #d32f2f;
    color: #fff;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
#egg-dismiss:hover { filter: brightness(1.1); }
#egg-dismiss:active { filter: brightness(0.85); }