html, body { height: 100%; background: var(--bg); color: var(--text); font-family: var(--font-body); }
    body { display: flex; align-items: center; justify-content: center; padding: 24px; }

    .wrap { width: 100%; max-width: 440px; text-align: center; }
    .logo { font-family: var(--font-display); font-size: 3.2rem; letter-spacing: .05em; color: var(--text); text-decoration: none; display: inline-block; }
    .logo:hover { opacity: .85; }
    .sub  { color: var(--muted); margin: 4px 0 36px; }

    .choices { display: flex; flex-direction: column; gap: 16px; }
    .choice {
      display: flex; align-items: center; gap: 18px; text-align: left;
      background: var(--surface); border: var(--card-border); border-radius: var(--r);
      padding: 20px 22px; text-decoration: none; color: var(--text);
      transition: transform .12s, border-color .12s, box-shadow .12s;
    }
    .choice:hover, .choice:focus-visible { transform: translateY(-2px); text-decoration: none; }
    .choice .icon { font-size: 2rem; }
    .choice .name { font-family: var(--font-display); font-size: 1.6rem; letter-spacing: .04em; }
    .choice .desc { color: var(--muted); font-size: .85rem; }
    .choice-host:hover,      .choice-host:focus-visible      { border-color: var(--primary); }
    .choice-player:hover,    .choice-player:focus-visible    { border-color: var(--accent-3); }
    .choice-board:hover,     .choice-board:focus-visible     { border-color: var(--accent-2); }
    .choice-standings:hover, .choice-standings:focus-visible { border-color: var(--rank-gold); }
    .choice-account:hover,   .choice-account:focus-visible   { border-color: var(--accent-2); }
    .choice-log:hover,       .choice-log:focus-visible       { border-color: var(--accent-3); }
    .choice-host      .name { color: var(--primary); }
    .choice-player    .name { color: var(--accent-3); }
    .choice-board     .name { color: var(--accent-2); }
    .choice-standings .name { color: var(--rank-gold); }
    .choice-account   .name { color: var(--accent-2); }
    .choice-log       .name { color: var(--accent-3); }