* {
  box-sizing: border-box;
}

html { min-height: 100%; background: #050505; font-size: 125%; -webkit-text-size-adjust: 100%; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: #050505; color: #d7d7d7; font-family: Arial, Helvetica, sans-serif; font-size: 1em; overflow-x: hidden; }
.interstitial-wrapper { width: min(100%, 600px); min-height: 100vh; margin: 0 auto; padding: 50px 0 42px; background: #050505; line-height: 1.6; }
.intro { position: relative; text-align: center; }
.intro h1 { margin: 0 0 2px; color: #f5f5f5; font-size: 30px; font-weight: 400; line-height: 1.25; }
.intro p { margin: 0; color: #9b9b9b; font-family: Georgia, "Times New Roman", serif; font-size: 16px; line-height: 1.2; }
.wallet-picker { position: absolute; top: 0; right: 0; z-index: 5; }
.wallet-button { display: inline-flex; align-items: center; justify-content: center; min-width: 72px; height: 32px; padding: 0 16px; border: 1px solid #777; border-radius: 2px; color: #ddd; background: transparent; font: 14px Arial, Helvetica, sans-serif; line-height: 1; cursor: pointer; transition: color 160ms ease, background 160ms ease; }
.wallet-button:hover, .wallet-button:focus-visible { color: #fff; background: #202020; outline: none; }
.wallet-menu { position: absolute; top: 40px; right: 0; display: grid; width: 214px; padding: 8px 0; border: 1px solid #444; border-radius: 2px; background: #151515; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.6); text-align: left; }
.wallet-menu[hidden] { display: none; }
.wallet-menu p { margin: 3px 12px 6px; color: #aaa; font-size: 12px; }
.wallet-menu a { display: block; padding: 7px 12px; color: #ddd; font-size: 13px; line-height: 1.2; text-decoration: none; }
.wallet-menu a:hover, .wallet-menu a:focus-visible { background: #292929; color: #fff; outline: none; }
.wallet-menu small { margin: 7px 12px 3px; color: #888; font-size: 10px; line-height: 1.25; }
.wallet-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; margin-top: 30px; padding: 12px 14px; border-top: 1px solid #333; border-bottom: 1px solid #333; font-size: 13px; }
.wallet-stat, .entry-control { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.wallet-stat strong { color: #f1f1f1; font-weight: 600; }
.entry-control input { width: 64px; height: 28px; border: 1px solid #555; border-radius: 2px; padding: 2px 6px; color: #eee; background: #161616; font: inherit; text-align: right; }
.round-status { grid-column: 1 / -1; margin: 0; color: #999; font-size: 12px; line-height: 1.35; }
.leaderboard { margin-top: 18px; padding: 10px 14px 8px; border-bottom: 1px solid #333; }
.leaderboard-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.leaderboard h2 { margin: 0; color: #f1f1f1; font-size: 14px; font-weight: 600; }
.leaderboard-heading span { color: #888; font-size: 11px; }
.player-control { display: flex; align-items: center; justify-content: space-between; margin-top: 7px; color: #aaa; font-size: 12px; }
.player-control input { width: 130px; height: 26px; border: 1px solid #555; border-radius: 2px; padding: 2px 7px; color: #eee; background: #161616; font: inherit; }
#leaderboard-list { display: grid; gap: 3px; margin: 9px 0 0; padding-left: 25px; color: #d1d1d1; font-size: 12px; }
#leaderboard-list li { padding: 2px 0 2px 3px; }
#leaderboard-list li::marker { color: #aaa; font-weight: 600; }
.leaderboard-empty { color: #888; list-style: none; margin-left: -25px; }
.game-shell { position: relative; width: 100%; height: 174px; margin-top: 70px; }
#runner-canvas { display: block; width: 600px; max-width: 100%; height: 150px; margin: 0 auto; background: #050505; image-rendering: pixelated; outline: none; }
#start-button { position: absolute; left: 50%; top: 56px; transform: translateX(-50%); border: 1px solid #666; border-radius: 2px; padding: 7px 18px; color: #eee; background: rgba(15, 15, 15, 0.94); font: 500 14px Arial, Helvetica, sans-serif; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity 160ms ease, background 160ms ease; }
#start-button:hover, #start-button:focus-visible { background: #252525; }
.game-shell.is-ready #start-button { opacity: 1; pointer-events: auto; }
.game-hint { display: none; }
@media (max-width: 700px) { .interstitial-wrapper { padding: 12vh 24px 30px; } .wallet-panel { grid-template-columns: 1fr; gap: 8px; } .game-shell { margin-top: 44px; } }
@media (max-height: 350px) { .interstitial-wrapper { padding-top: 5%; } }
