.star-status {
  position: absolute; top: 142px; left: 32px; z-index: 2;
  display: flex; align-items: center; gap: 10px;
  width: 190px; max-width: calc(100% - 36px); padding: 10px 13px 13px;
  color: #fff0bf; border: 1px solid #f3d58e80; border-radius: 12px;
  background: linear-gradient(125deg, #44381feb, #172b3bf2);
  box-shadow: 0 0 24px #f5cf6b18; pointer-events: none;
}
.star-status[hidden] { display: none; }
.star-status-icon { font-size: 26px; line-height: 1; color: #ffe49a; }
.star-status div { flex: 1; min-width: 0; }
.star-status strong { display: block; font-size: 12px; font-weight: 700; letter-spacing: 1px; }
.star-status small { display: block; margin-top: 3px; color: #d3c7a3; font-size: 9px; white-space: nowrap; }
.star-status > b { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.star-meter { position: absolute; left: 13px; right: 13px; bottom: 5px; height: 2px; background: #ffe3a41c; overflow: hidden; border-radius: 2px; }
.star-meter i { display: block; height: 100%; background: linear-gradient(90deg, #efb851, #fff2bf); transform-origin: left; transition: transform .1s linear; }
.star-status.ending { border-color: #ffbb72; }
.star-status.ending > b { color: #ffd197; }
.star-status.super { color: #e6f8ff; border-color: #9be8ffb3; background: linear-gradient(125deg, #173a66f0, #4a3b16eb); box-shadow: 0 0 26px #7fd6ff55, 0 0 14px #ffd36c40; }
.star-status.super .star-status-icon { color: #c4f2ff; text-shadow: 0 0 10px #7fd6ff, 0 0 18px #ffd36c; }
.star-status.super small { color: #b9dcef; }
.star-status.super .star-meter i { background: linear-gradient(90deg, #7fd6ff, #fff2bf); }
.star-help-symbol { color: #ffe49a; }
.pit-help-symbol { color: #ffb347; }
.monster-help-symbol { color: #ff5aa5; }
.header-actions { display: flex; align-items: center; gap: 22px; }
.sound-icon { font-size: 10px; }
#headerSound[aria-pressed="false"] { opacity: .6; }
.hud-meters { display: block; margin-top: 5px; font-style: normal; font-size: 13px; color: #92b3cc; letter-spacing: 1px; font-variant-numeric: tabular-nums; }
.hud-meters span { margin-left: 3px; font-size: 10px; }
.result-stats { flex-wrap: wrap; row-gap: 10px; }
@media (max-width: 900px) { .header-actions { gap: 12px; } .hud-meters { font-size: 11px; margin-top: 3px; } }
@media (max-width: 380px) { #headerSoundLabel { display: none; } }

/* Phones: a compact prompt for landscape full screen. It sits in the free floor band under Yotta's feet in portrait,
   and in the bottom-left corner under the start button in landscape, so it never covers the character. */
.screen-tip { position: absolute; z-index: 3; left: 14px; right: 14px; bottom: 44px; display: flex; align-items: center; gap: 10px;
  padding: 8px 34px 8px 10px; border: 1px solid #7fe2ff40; border-radius: 12px; background: #081a2ee6; backdrop-filter: blur(8px); color: #d7f3ff; }
.screen-tip[hidden] { display: none; }
.screen-tip-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.screen-tip strong { font-size: 12px; font-weight: 700; line-height: 1.35; letter-spacing: .3px; }
.screen-tip small { font-size: 10px; line-height: 1.45; color: #8fb6cf; }
.screen-tip small:empty { display: none; }
.tip-action { flex-shrink: 0; min-height: 38px; padding: 7px 12px; border-radius: 8px; background: #9ce9ff; color: #08203a; font-size: 12px; font-weight: 700; white-space: nowrap; }
.tip-close { position: absolute; top: 50%; right: 2px; transform: translateY(-50%); width: 30px; height: 30px; background: transparent; color: #8fb6cf; font-size: 18px; }
.rotate-icon { flex-shrink: 0; display: grid; place-items: center; width: 28px; height: 28px; }
.rotate-icon i { display: block; width: 12px; height: 20px; border: 2px solid #9ce9ff; border-radius: 4px; animation: tip-rotate 2.4s ease-in-out infinite; }
@keyframes tip-rotate { 0%, 25% { transform: rotate(0); } 50%, 85% { transform: rotate(90deg); } 100% { transform: rotate(0); } }
@media (prefers-reduced-motion: reduce) { .rotate-icon i { animation: none; transform: rotate(90deg); } }
@media (orientation: landscape) {
  .screen-tip { left: 7%; right: auto; bottom: 8px; max-width: 46%; padding-block: 4px; }
  .screen-tip small { display: none; }
  .tip-action { min-height: 34px; padding-block: 5px; }
  body.tip-on .ready-bottom > span:first-child { visibility: hidden; }
}
#fullscreenButton[hidden] { display: none; }

/* Full screen: only the game, edge to edge, with controls clear of the notch. */
body.fullscreen { background: #070f1d; }
body.fullscreen .header, body.fullscreen .below-game, body.fullscreen .detail-line, body.fullscreen footer { display: none !important; }
body.fullscreen .app { max-width: none; height: 100vh; height: 100dvh; padding: 0 !important; display: flex; flex-direction: column; }
body.fullscreen main { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 0 !important; }
body.fullscreen .game-shell { flex: 1; height: auto !important; min-height: 0; margin: 0 !important; border: 0; border-radius: 0; }
body.fullscreen .hud { left: max(18px, env(safe-area-inset-left)); right: max(18px, env(safe-area-inset-right)); }
body.fullscreen .stage-top { left: max(20px, env(safe-area-inset-left)); right: max(20px, env(safe-area-inset-right)); }
body.fullscreen .intro { right: max(5%, env(safe-area-inset-right)); }
body.fullscreen.playing .mobile-controls { margin-inline: max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-right)); }
@media (orientation: landscape) {
  body.fullscreen.playing .mobile-controls { position: absolute; left: max(26px, env(safe-area-inset-left)); right: max(26px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom));
    display: flex; justify-content: space-between; margin: 0; pointer-events: none; }
  body.fullscreen.playing .mobile-controls button { width: 150px; min-height: 56px; background: #102139d9; backdrop-filter: blur(6px); pointer-events: auto; }
  body.fullscreen.playing .mobile-controls button:last-child { background: #173e54d9; }
}
.level-chip { display: inline-block; margin-right: 10px; padding: 2px 7px; border: 1px solid #9ce9ff44; border-radius: 9px; color: #c5eaff; font-weight: 600; letter-spacing: .5px; }
.level-chip b { font-weight: 600; }
@media (max-width: 900px) {
  .star-status { top: 124px; left: 18px; width: 176px; padding: 8px 11px 11px; gap: 8px; }
  .star-status > b { font-size: 18px; }
}
@media (max-width: 380px) { .star-status { left: 14px; } }
@media (max-width: 900px) and (orientation: portrait) and (max-height: 800px) {
  .star-status:not([hidden]) ~ .message { display: none; }
}
@media (max-width: 1100px) and (orientation: landscape) and (max-height: 600px) {
  body.playing .star-status { top: 66px; left: 18px; width: 170px; }
}
@media (prefers-reduced-motion: reduce) { .star-meter i { transition: none; } }

/* Start page: the cover art fills the stage; the YOTTA RUN title and the start button sit on the darkened road at
   the lower right (lower middle on portrait phones), clear of Yotta. Starting a run hides it and shows the game. */
.title-art { position: absolute; inset: 0; z-index: 1; overflow: hidden; border-radius: inherit; }
.title-art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 46% 40%; }
.title-art::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, #04122ad9, #04122a59 32%, #04122a00 58%), linear-gradient(to left, #04122aa6, #04122a00 48%); }
.ready-bottom { z-index: 2; }
.intro { top: auto; left: auto; right: 5%; bottom: 15%; display: grid; justify-items: end; gap: 6px; text-align: right; }
.title-brand svg { display: block; width: clamp(34px, 3.4vw, 52px); height: auto; fill: none; stroke: #fff; stroke-width: 2; }
.title-brand svg path { fill: #fff; stroke: none; }
.intro .title-logo { margin: 0; padding-right: .08em; font: italic 700 clamp(38px, 5.4vw, 82px)/1 'Space Grotesk', 'Noto Sans TC', sans-serif; letter-spacing: .01em;
  background: linear-gradient(180deg, #fff 35%, #a6e6ff); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 16px #0d4fd699); }
.title-tag { margin-bottom: 12px; font: 600 clamp(10px, 1.05vw, 14px)/1.5 'Space Grotesk', 'Noto Sans TC', sans-serif; letter-spacing: .24em; color: #d8f1ff; }
.intro .start-note { color: #b9d4ea; }
@media (orientation: portrait) {
  .title-art img { object-position: 45% 45%; }
  .title-art::after { background: linear-gradient(to top, #04122ae6, #04122a8c 40%, #04122a00 66%); }
  .intro { left: 0; right: 0; bottom: 13%; justify-items: center; text-align: center; }
  body.tip-on .intro { bottom: 118px; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .title-brand { display: none; }
  .intro { bottom: 17%; gap: 3px; }
  .intro .title-logo { font-size: clamp(32px, 11vh, 50px); }
  .title-tag { margin-bottom: 6px; }
}

/* Leaderboard: the top five on the results screen (beside the score on wide screens), the top twenty in a dialog. */
.result-dialog { max-height: calc(100% - 20px); overflow-y: auto; }
.result-board { margin-top: 18px; padding-top: 14px; border-top: 1px solid #88bff52b; text-align: left; }
.dialog .board-status, .board-status { min-height: 1.5em; margin: 0 0 8px; font-size: 11px; line-height: 1.5; color: #bfe6ff; text-align: center; }
.board-join { display: flex; gap: 8px; margin-bottom: 10px; }
.board-join input { flex: 1; min-width: 0; height: 38px; padding: 0 12px; border: 1px solid #88bff55c; border-radius: 8px; background: #071426; color: #eaf6ff;
  font: 500 14px 'Noto Sans TC', sans-serif; -webkit-user-select: text; user-select: text; }
.board-join input:focus { outline: 2px solid #7ee8ff; outline-offset: 1px; }
.board-join button { padding: 0 16px; border-radius: 8px; background: #9ce9ff; color: #08203a; font-size: 13px; font-weight: 700; }
.board-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.board-list li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 5px 10px; border-radius: 6px; background: #ffffff08; color: #d7ecfb; font-size: 12px; }
.board-list li b { color: #8fb4cf; font-weight: 600; font-variant-numeric: tabular-nums; }
.board-list li:nth-child(1):not(.gap) b { color: #ffd98a; }
.board-list li:nth-child(2):not(.gap) b { color: #e4eef8; }
.board-list li:nth-child(3):not(.gap) b { color: #f0b98e; }
.board-list li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-list li strong { color: #eaf6ff; font-weight: 600; font-variant-numeric: tabular-nums; }
.board-list li.mine { background: #9ce9ff26; box-shadow: inset 0 0 0 1px #9ce9ff70; }
.board-list li.gap { display: block; padding: 2px; background: none; color: #5f7f99; text-align: center; }
.board-links { display: flex; justify-content: center; gap: 18px; margin-top: 8px; }
.link-button { padding: 4px 2px; background: none; color: #8fd8f5; font-size: 11px; letter-spacing: 1px; text-decoration: underline; text-underline-offset: 3px; }
#boardDialog .board-list-full { max-height: min(56vh, 520px); overflow-y: auto; margin-top: 6px; }
.board-icon svg { width: 11px; height: 11px; stroke-width: 1.8; }
@media (min-width: 900px) and (min-height: 560px) {
  .result-dialog:has(.result-board:not([hidden])) { width: min(780px, 94%); display: grid; grid-template-columns: minmax(0, 1fr) 300px; column-gap: 34px; align-items: start; }
  .result-dialog:has(.result-board:not([hidden])) > :not(.result-board) { grid-column: 1; }
  .result-board { grid-column: 2; grid-row: 1 / span 9; align-self: stretch; margin: 0; padding: 0 0 0 30px; border-top: 0; border-left: 1px solid #88bff52b; }
}
@media (max-height: 500px) and (orientation: landscape) {
  /* Short landscape: title, then score | stats, note | leaderboard line, retry | home. */
  .result-dialog { padding: 14px 20px; row-gap: 6px; }
  .result-dialog > .dialog-kicker { display: none; }
  .result-dialog > h2 { grid-row: 1; margin: 0; font-size: 20px; }
  .result-dialog > .result-distance { grid-row: 2; }
  .result-dialog > .result-stats { grid-row: 2; }
  .result-dialog > .result-note { grid-row: 3; grid-column: 1; font-size: 11px; }
  .result-board { grid-row: 3; grid-column: 2; margin: 0; padding: 0; border: 0; }
  .result-board .board-list { display: none; }
  .result-board .board-status { margin-bottom: 2px; }
  .board-join { margin-bottom: 2px; }
  .board-join input { height: 32px; }
  .board-links { margin-top: 0; }
  .result-dialog > .primary-button, .result-dialog > .secondary-button { grid-row: 4; }
}
@media (max-width: 720px) { .board-label { display: none; } }
@media (max-width: 720px) and (orientation: portrait) { .result-board { margin-top: 12px; padding-top: 10px; } .result-dialog .result-distance { margin: 8px 0 12px; } }

/* Start page: the leaderboard sits right beside the start button. */
.title-actions { display: flex; align-items: stretch; gap: 10px; }
.title-board { display: inline-flex; align-items: center; gap: 8px; padding: 0 18px; border: 1px solid #9ce9ff8c; border-radius: 5px;
  background: #06142ab3; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #e3f7ff; font-size: 13px; font-weight: 700; letter-spacing: 1px; }
.title-board:hover { background: #0d2443d9; }
.title-board svg { width: 18px; height: 18px; stroke-width: 1.8; }
@media (max-height: 500px) and (orientation: landscape) { .title-board { padding: 0 12px; font-size: 12px; } }