/* The logo and arena share one footprint. */
[hidden] { display: none !important; }
.logo-playground { padding-bottom: 148px; }
.logo-orbit { top: calc(50% - 54px); }
.logo-spark { transition: opacity .4s; }
.logo-playground.is-playing .logo-spark { opacity: .2; }
.orbit-shell { position: relative; width: min(100%, 410px); aspect-ratio: 1; }
.logo-front { position: absolute; inset: 0; border-radius: 50%; }
.orbit-shell .logo-trigger { width: 100%; height: 100%; --shine-x: 50%; --shine-y: 30%; --hover-angle: -.6rad; }
.orbit-shell[data-mode="entering"], .orbit-shell[data-mode="exiting"] { pointer-events: none; }
.orbit-shell .logo-trigger::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at var(--shine-x) var(--shine-y), #8fc4ff30, transparent 48%); opacity: 0; transition: opacity .35s; pointer-events: none; }
.logo-trigger:hover::after, .logo-trigger:focus-visible::after { opacity: 1; }
.hover-track { position: absolute; inset: 5.5%; border-radius: 50%; transform: rotate(var(--hover-angle)); opacity: 0; transition: opacity .3s, transform .16s ease-out; pointer-events: none; }
.hover-track i { position: absolute; top: -4px; left: calc(50% - 4px); width: 8px; height: 8px; border-radius: 50%; background: #d6f3ff; box-shadow: 0 0 12px #87dbff, 0 0 25px #2d87ff; }
.logo-trigger:hover .hover-track, .logo-trigger:focus-visible .hover-track { opacity: 1; }
.logo-art { transition: filter .45s, opacity .45s; }
.game-chooser { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 15px; border-radius: 50%; opacity: 0; visibility: hidden; transform: translateY(9px) scale(.97); pointer-events: none; transition: opacity .28s, transform .35s, visibility .28s; }
.logo-front:hover .game-chooser, .logo-front:has(:focus-visible) .game-chooser, .logo-front.is-revealed .game-chooser { opacity: 1; visibility: visible; transform: none; }
.game-chooser button { pointer-events: auto; }
.logo-front:hover .logo-art, .logo-front:has(:focus-visible) .logo-art, .logo-front.is-revealed .logo-art { filter: brightness(.19) saturate(.8); }
.logo-front:hover .hover-track, .logo-front:has(:focus-visible) .hover-track, .logo-front.is-revealed .hover-track { opacity: 1; }
.logo-front:hover .logo-trigger::after, .logo-front:has(:focus-visible) .logo-trigger::after { opacity: 1; }
.chooser-kicker { font-size: .57rem; color: #a7bada; letter-spacing: .15em; }
.game-options { display: flex; gap: 7px; padding: 5px; border: 1px solid #314668; background: #0c1420d9; border-radius: 17px; }
.game-option { display: flex; align-items: center; gap: 9px; min-height: 46px; min-width: 92px; justify-content: center; border: 1px solid transparent; padding: 9px 12px; border-radius: 12px; color: #9caeca; background: transparent; font-size: .8rem; transition: background .25s, color .25s, border-color .25s; }
.game-option[aria-pressed="true"] { color: #fff; background: #1e3d69; border-color: #3b679a; }
.game-option:hover { color: #fff; background: #233952; }
.game-option:focus-visible, .game-chooser .play-pill:focus-visible { outline-offset: 3px; }
.mode-icon { width: 18px; height: 18px; position: relative; display: block; flex-shrink: 0; border: 1px solid #547daf; border-radius: 50%; }
.mode-icon-orbit::before { content: ""; position: absolute; inset: -2px; border: 3px solid transparent; border-top-color: #a7d7ff; border-radius: 50%; transform: rotate(-35deg); }
.mode-icon-orbit::after { content: ""; position: absolute; width: 4px; height: 4px; background: #b9e8ff; border-radius: 50%; top: 6px; left: 8px; }
.mode-icon-core::before { content: ""; position: absolute; width: 6px; height: 6px; border: 2px solid #b8f4ea; border-radius: 50%; left: 4px; top: 4px; }
.mode-icon-core::after { content: ""; position: absolute; width: 3px; height: 8px; background: #b8f4ea; left: 7px; top: -2px; transform: rotate(30deg); transform-origin: bottom; }
.chooser-description { font-size: .72rem; color: #b3c2d7; text-align: center; }
.game-chooser .play-pill { min-height: 44px; font-size: .8rem; padding: 10px 24px; cursor: pointer; }
.game-chooser .play-pill > span:last-child { font-size: inherit; }
.orbit-shell[data-game="core"] .play-pill { background: #246879; border-color: #81c2cb; box-shadow: 0 0 32px #50bcba28; }
.play-pill { display: inline-flex; align-items: center; gap: 14px; border-radius: 40px; background: #287cff; border: 1px solid #95beff; box-shadow: 0 0 35px #1875ff80; padding: 12px 28px; font-size: 1.05rem; font-weight: 600; color: #fff; }
.play-pill > span { font-size: .8rem; }
.orbit-game { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 50% 50%, #10264655, #070809 67%); }
#orbit-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border-radius: 50%; touch-action: none; cursor: crosshair; outline: none; }
#orbit-canvas:focus-visible { outline: 1px dashed #669cf68c; outline-offset: 8px; }
.orbit-score { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; opacity: .45; transition: opacity .25s; padding-bottom: 6px; }
.orbit-score > span { font-size: clamp(4rem, 8vw, 7rem); font-weight: 600; letter-spacing: -.08em; line-height: 1.1; color: #a5c7ff; font-variant-numeric: tabular-nums; }
.orbit-score small { margin-top: 6px; font-size: .625rem; letter-spacing: .28em; padding-left: .28em; color: #b2c6e6; }
.orbit-shell[data-mode="over"] .orbit-score, .orbit-shell[data-mode="paused"] .orbit-score { opacity: .07; }
.orbit-overlay { position: absolute; z-index: 2; inset: 16%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; border-radius: 50%; background: radial-gradient(circle, #070d19ed, #070d19bd 60%, transparent 73%); }
.orbit-overlay-kicker { font-size: .6rem; letter-spacing: .16em; color: #8eb7ff; margin-bottom: 13px; }
.orbit-overlay h3 { font-size: clamp(1.65rem, 3vw, 2.4rem); font-weight: 500; letter-spacing: -.055em; }
.orbit-overlay > p:not(.orbit-overlay-kicker) { font-size: .8rem; color: #adbace; margin: 12px 0 22px; }
.orbit-main-button { display: inline-flex; gap: 20px; align-items: center; border: 1px solid #579aff; color: #fff; background: #1765d8; min-height: 44px; padding: 10px 20px; border-radius: 30px; font-size: .8rem; transition: background .2s, box-shadow .2s; }
.orbit-main-button:hover { background: #287cff; box-shadow: 0 0 26px #287cff55; }
.orbit-bottom { position: absolute; top: calc(100% - 132px); left: 0; width: 100%; text-align: center; }
.orbit-bottom .logo-hint { position: static; padding-top: 14px; }
.orbit-hud { width: min(100%, 350px); margin-inline: auto; }
.orbit-meta { display: flex; justify-content: space-between; align-items: center; padding-inline: 10px; color: #828b9b; font-size: .625rem; letter-spacing: .17em; }
.orbit-meta strong { color: #b3c9ea; font-size: .75rem; font-variant-numeric: tabular-nums; margin-left: 6px; font-weight: 500; }
.orbit-name { color: #bdcde7; display: flex; align-items: center; gap: 8px; }
.orbit-name i { display: block; width: 5px; height: 5px; border-radius: 50%; background: #62aaff; box-shadow: 0 0 8px #287cff; }
.orbit-instructions { margin: 10px 0 5px; color: #929baa; font-size: .625rem; line-height: 1.8; }
.orbit-controls { display: flex; justify-content: center; gap: 8px; }
.orbit-controls button { padding: 6px 11px; min-height: 44px; border: 0; border-radius: 8px; background: transparent; color: #bbc6d8; font-size: .6875rem; }
.orbit-controls button:hover { color: #fff; background: #142138; }
.orbit-controls button:disabled { opacity: .3; cursor: default; }
.orbit-controls button[aria-pressed="true"] { color: #7ab1ff; }
.orbit-controls button span { margin-left: 5px; }
.orbit-shell[data-game="core"] .orbit-score { padding-bottom: 0; justify-content: flex-start; padding-top: 21%; opacity: .35; }
.orbit-shell[data-game="core"] .orbit-score > span { font-size: clamp(2.5rem, 5vw, 4rem); letter-spacing: -.06em; }
.orbit-shell[data-game="core"] .orbit-score small { margin-top: 1px; font-size: .5rem; }
.orbit-shell[data-game="core"][data-mode="over"] .orbit-score, .orbit-shell[data-game="core"][data-mode="paused"] .orbit-score { opacity: .07; }
.core-lives { display: flex; align-items: center; gap: 5px; }
.core-lives i { display: block; width: 6px; height: 6px; border-radius: 2px; background: #9fe3e4; box-shadow: 0 0 8px #69cace35; transition: background .15s; }
.core-lives i.is-lost { background: #233045; box-shadow: none; }
.enemy-guide { display: flex; justify-content: center; gap: 16px; font-size: .625rem; line-height: 1.7; }
.enemy-guide-drifter { color: #71dfff; }
.enemy-guide-armoured { color: #ffbf70; }
.enemy-guide-dart { color: #ff83ab; }
@media (hover: none) {
  .logo-front:not(.is-revealed):not(:has(:focus-visible)) .game-chooser { opacity: 0; visibility: hidden; pointer-events: none; }
  .logo-front:not(.is-revealed):not(:has(:focus-visible)) .logo-art { filter: none; }
}
@media (max-width: 760px) {
  .logo-playground { padding-bottom: 158px; }
  .logo-orbit { top: calc(50% - 67px); }
  .orbit-bottom { top: calc(100% - 138px); }
  .orbit-score > span { font-size: clamp(4.5rem, 20vw, 7rem); }
  .orbit-overlay h3 { font-size: clamp(1.65rem, 7vw, 2.4rem); }
}
@media (max-width: 390px) {
  .orbit-overlay-kicker { font-size: .5rem; margin-bottom: 8px; }
  .orbit-overlay > p:not(.orbit-overlay-kicker) { font-size: .7rem; margin: 9px 0 14px; }
  .orbit-main-button { padding: 9px 14px; }
  .game-chooser { gap: 11px; }
  .game-option { min-width: 78px; font-size: .75rem; padding-inline: 9px; gap: 6px; }
  .chooser-description { font-size: .625rem; }
  .chooser-kicker { font-size: .5rem; }
  .game-options { padding: 3px; gap: 4px; }
}