/* Shovel Rush: a full-height canvas with the menu and end card laid over it. Portrait first; wider screens get a
   phone-shaped column in the middle so the tunnel never gets too wide to read. */
body.ed { overflow: hidden; background: #2a1636; }
body.ed #app { height: 100vh; height: 100dvh; display: flex; flex-direction: column; }
.ed-top { position: absolute; top: 0; left: 0; right: 0; z-index: 5; min-height: 60px; padding: max(8px, env(safe-area-inset-top)) 12px 8px; pointer-events: none; }
.ed-top > * { pointer-events: auto; }
.ed-top .tv-hud { margin-left: auto; }
.ed-top .tv-hud + .sound-btn { margin-left: 6px; }
.ed-top .sound-btn { margin-left: auto; min-width: 44px; min-height: 44px; background: #1d1433aa; }
#stage { position: relative; flex: 1; width: min(100%, 520px); margin: 0 auto; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
#field { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.hud { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; min-width: 0; }
.chip { display: inline-flex; align-items: center; gap: 6px; background: #1d1433cc; border: 2px solid #ffffff22; border-radius: 999px; padding: 4px 12px; font-weight: 700; font-size: 17px; }
.hearts { display: inline-flex; align-items: center; gap: 4px; background: #1d1433cc; border: 2px solid #ffffff22; border-radius: 999px; padding: 4px 12px; font-size: 17px; }
.place { background: #ff5d8f; color: #fff; }
.coin-i { display: inline-block; width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff2b0 0 25%, #ffd23f 26%); border: 2px solid #8a5a00; }

.depth { position: absolute; left: 12px; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 4; background: #1d1433cc; border-radius: 14px; padding: 6px 12px; line-height: 1.15; pointer-events: none; }
.depth b { display: block; font-size: 20px; }
.depth span { font-size: 13px; color: var(--soft); }
.powers { position: absolute; left: 12px; top: 70px; z-index: 4; display: grid; gap: 6px; pointer-events: none; }
.powers .chip { font-size: 14px; padding: 3px 10px; }
.powers .bar { width: 46px; height: 6px; border-radius: 3px; background: #ffffff33; overflow: hidden; }
.powers .bar i { display: block; height: 100%; background: var(--accent); }

.banner { position: absolute; left: 50%; top: 36%; transform: translate(-50%, -50%); z-index: 6; pointer-events: none; text-align: center; white-space: nowrap;
  font-weight: 700; font-size: clamp(26px, 8vw, 40px); color: #fff2b0; -webkit-text-stroke: 2px #1d1433; text-shadow: 0 4px 0 #1d1433; animation: ed-pop .5s cubic-bezier(.2,1.5,.4,1) both; }
.banner small { display: block; font-size: 17px; -webkit-text-stroke: 0; text-shadow: 0 2px 0 #1d1433; color: #fff8ec; }
.count { position: absolute; inset: 0; display: grid; place-items: center; z-index: 6; font-weight: 700; font-size: 96px; color: #ffd23f; -webkit-text-stroke: 4px #1d1433; text-shadow: 0 6px 0 #1d1433; pointer-events: none; }
.count span { animation: ed-pop .45s cubic-bezier(.2,1.5,.4,1) both; }
.steer-tip { position: absolute; left: 50%; bottom: 80px; transform: translateX(-50%); z-index: 6; margin: 0; background: #fff8ec; color: var(--ink); border: 3px solid var(--ink); border-radius: 999px; padding: 6px 16px; font-weight: 700; box-shadow: 0 4px 0 var(--ink); white-space: nowrap; pointer-events: none; }
@keyframes ed-pop { from { transform: translate(-50%, -50%) scale(.5); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
.count span { display: inline-block; }
@keyframes ed-count { from { transform: scale(.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.count span { animation-name: ed-count; }

/* the menu over the attract-mode tunnel */
.title-card { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 62px 16px max(12px, env(safe-area-inset-bottom)); text-align: center;
  background: linear-gradient(180deg, #1d143300 0%, #1d1433aa 30%, #1d1433dd 100%); overflow-y: auto; }
#app:not(.on-title) .title-card { display: none; }
.ed-logo { width: min(340px, 90%); margin: 0; }
.ed-logo svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 6px 0 #1d1433); }
.tagline { margin: 0; font-weight: 600; }
.wallet-row { display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap; }
.gold-btn { display: inline-flex; gap: 6px; align-items: center; background: #1d1433aa; }
.streak { font-weight: 600; color: #ffd23f; }
.modes { display: grid; gap: 10px; width: min(380px, 100%); }
.mode { display: grid; gap: 2px; text-align: left; padding: 12px 18px; }
.mode b { font-size: 22px; }
.mode span { font-size: 15px; font-weight: 600; opacity: .92; }
.boost-line { margin: 0; font-size: 14.5px; }
.boost-line:empty { display: none; }
/* difficulty chips: Easy, Normal, Hard (the picked one is lit) */
.levels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: min(380px, 100%); }
.levels button { min-height: 44px; padding: 6px 8px; font-size: 17px; background: #1d1433aa; color: var(--text); border: 2px solid #ffffff44; box-shadow: none; }
.levels button[aria-pressed="true"] { background: var(--accent); color: var(--ink); border-color: var(--ink); box-shadow: 0 4px 0 var(--ink); }
.level-line { margin: -4px 0 0; font-size: 14.5px; font-weight: 600; color: #fff2b0; }
.level-line:empty { display: none; }
.tv-level { display: inline-block; background: var(--accent); color: var(--ink); border-radius: 999px; padding: 0 12px; font-weight: 700; margin-right: 6px; }
.row-btns { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.row-btns button { background: #1d1433aa; }
.fine { margin: 0; font-size: 13.5px; }

.end-card { position: absolute; inset: 0; z-index: 7; display: grid; place-items: center; padding: 64px 16px 16px; background: #1d1433aa; overflow-y: auto; }
.end-card .card { width: min(420px, 100%); padding: 20px; text-align: center; }
.stack > * + * { margin-top: 12px; }
.end-card h2 { font-size: 28px; }
.places { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; text-align: left; }
.places li { display: flex; gap: 10px; align-items: center; background: #ffffff10; border-radius: 12px; padding: 6px 12px; }
.places li.me { background: #ff5d8f44; outline: 2px solid #ff5d8f; }
.places li b { width: 32px; }
.places li span { flex: 1; }
.places li small { color: var(--soft); }
.gold-lines { list-style: none; margin: 0; padding: 0; text-align: left; display: grid; gap: 2px; }
.gold-lines li { display: flex; justify-content: space-between; gap: 10px; }
.gold-lines li.total { border-top: 2px solid var(--line); padding-top: 4px; font-weight: 700; color: #ffd23f; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.end-board:empty { display: none; }
.end-board input { width: 100%; min-height: 48px; border-radius: 14px; border: 3px solid var(--ink); padding: 8px 12px; background: #fff8ec; color: var(--ink); }

/* sheets: shop, leaderboard, how to play, sign in */
.ed-sheet { max-height: calc(100dvh - 32px); overflow-y: auto; }
.shop-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; text-align: left; }
.shop-list li { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; background: #ffffff10; border-radius: 14px; padding: 8px 12px; }
.shop-list li p { margin: 0; font-size: 14px; color: var(--soft); grid-column: 1; }
.shop-list .swatch { display: inline-block; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--ink); vertical-align: -3px; margin-right: 6px; }
.shop-list button { grid-row: span 2; min-height: 44px; font-size: 15px; padding: 6px 12px; }
.board-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; text-align: left; }
.board-list li { display: grid; grid-template-columns: 34px 1fr auto; gap: 8px; background: #ffffff10; border-radius: 10px; padding: 6px 10px; }
.board-list li.me { outline: 2px solid #2ec4b6; }
.how-list { text-align: left; padding-left: 20px; margin: 0; }
.how-list li + li { margin-top: 6px; }

@media (prefers-reduced-motion: reduce) {
  .banner, .count span { animation: none; }
}
/* The menu fits one screen with no scrolling (390x844, 360x640, and phones held sideways). Short screens drop the
   tagline, shrink the logo and the mode buttons, and show the small buttons as icons (their words stay for screen
   readers). */
@media (max-height: 760px) {
  .title-card { gap: 6px; padding-top: 52px; }
  .ed-logo { width: min(250px, 70%); }
  .title-card .tagline { display: none; }
  .mode { padding: 6px 14px; }
  .mode b { font-size: 19px; }
  .mode span { font-size: 14px; }
  .levels button { min-height: 40px; font-size: 16px; }
  .row-btns .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .row-btns button { min-width: 52px; font-size: 20px; padding: 4px 10px; }
  .title-card .more-games { margin-top: 0; padding: 6px 16px; }
}
@media (max-height: 560px) {
  .ed-logo { width: min(200px, 60%); }
  .level-line { display: none; }
}
/* phones held sideways: two columns (logo, gold and levels on the left; the modes and buttons on the right) */
@media (orientation: landscape) and (max-height: 500px) {
  .title-card { display: grid; grid-template-columns: 1fr 1.25fr; grid-auto-rows: min-content; align-content: center; justify-items: center; column-gap: 14px; row-gap: 6px; padding-top: 54px; }
  .title-card > * { grid-column: 1; }
  .title-card > .modes, .title-card > .boost-line, .title-card > .row-btns, .title-card > .more-games { grid-column: 2; }
  .title-card > .modes { grid-row: 1 / span 4; }
  .ed-logo { width: min(170px, 100%); }
  .streak { font-size: 14px; }
  .level-line { display: block; font-size: 13px; }
  .mode { padding: 4px 12px; }
  .mode b { font-size: 17px; }
  .mode span { font-size: 12.5px; }
  .fine { font-size: 12.5px; }
}

/* online races: the TV shows every lane side by side, full width */
.ed-tv #stage { width: 100%; }
.ed-tv .count { font-size: clamp(96px, 16vw, 200px); }
.ed-tv .tv-win { width: min(560px, 100%); padding: 24px; text-align: center; }
.ed-tv .tv-win h2 { font-size: clamp(28px, 4vw, 44px); }
.ed-tv .places li { font-size: 22px; }
.places li svg { flex: none; }

/* online races on a phone: the room card over the tunnel */
body.ed:not(.ed-tv) .big-code { display: inline-block; font-size: 44px; font-weight: 700; line-height: 1; padding: 6px 18px 8px 24px; letter-spacing: .12em; color: var(--ink); background: var(--accent); border: 4px solid var(--ink); border-radius: 18px; box-shadow: 0 6px 0 var(--ink); }
.room-card .join-form { width: min(380px, 100%); display: grid; gap: 8px; }
.room-card input { width: 100%; min-height: 52px; border-radius: 14px; border: 3px solid var(--ink); padding: 8px 12px; background: #fff8ec; color: var(--ink); font-size: 20px; }
.room-people { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; width: min(380px, 100%); }
.room-people li { display: flex; align-items: center; gap: 10px; background: #1d1433cc; border-radius: 12px; padding: 6px 12px; font-weight: 700; text-align: left; }
.room-people li span { flex: 1; }
.room-people li.away { opacity: .5; }
.room-people li small { font-size: 13px; color: var(--ink); background: var(--accent); border-radius: 999px; padding: 1px 8px; }
.room-people li button { min-height: 36px; padding: 2px 10px; font-size: 14px; }
.room-card .err { color: #ff8fb0; font-weight: 700; margin: 0; }
.room-card .err:empty { display: none; }
.tv-sheet { text-align: center; }
.tv-sheet .how-list { margin-top: 12px; }
/* a room adds the TV button to the top bar: tighten it so everything fits a 360px phone */
.in-room .ed-top { padding-left: 8px; padding-right: 8px; }
.in-room .hud { gap: 4px; }
.in-room .chip, .in-room .hearts { padding: 3px 8px; font-size: 15px; gap: 4px; }
.in-room .ed-top .sound-btn { min-width: 40px; padding: 4px 6px; }