/* The shift page: the floor on the left, the scoreboard beside it on a desktop, below it on a phone. */
#game-canvas { display: block; width: 100%; max-height: 72vh; margin: 0 auto; background: #1d2230; border-radius: .5rem; image-rendering: pixelated; cursor: pointer; }
#game-hud { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; align-items: center; justify-content: space-between; margin-bottom: .5rem; }
.hud-stats { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.hud-stat { display: flex; flex-direction: column; line-height: 1.1; }
.hud-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; opacity: .7; }
.hud-value { font-size: 1.4rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.hud-controls { display: flex; gap: .5rem; flex-wrap: wrap; }
.game-stage { display: grid; grid-template-columns: 1fr; gap: .75rem; }
@media (min-width: 992px) { .game-stage { grid-template-columns: minmax(0, 1fr) 17rem; align-items: start; } }
.hud-board, .game-end-list { list-style: none; margin: .25rem 0 0; padding: 0; }
.hud-row { display: flex; align-items: center; gap: .5rem; padding: .35rem .5rem; border-radius: .4rem; cursor: pointer; border: 2px solid transparent; }
.game-end-list .hud-row { cursor: default; }
.hud-row:hover { background: rgba(127, 127, 127, .15); }
.hud-row.is-followed { border-color: #ffd23f; }
.hud-dot { width: .9rem; height: .9rem; border-radius: 50%; flex: none; box-shadow: 0 0 0 2px rgba(0, 0, 0, .35); }
.hud-who { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.1; }
.hud-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hud-role { font-size: .75rem; opacity: .7; text-transform: capitalize; }
.hud-pts { font-weight: 700; font-variant-numeric: tabular-nums; }
.hud-keys { font-size: .75rem; opacity: .6; margin-top: .5rem; }
#game.is-paused #game-canvas { filter: brightness(.6); }
.game-end { position: fixed; inset: 0; z-index: 1050; background: rgba(10, 12, 20, .75); display: flex; align-items: center; justify-content: center; padding: 1rem; overflow-y: auto; }
.game-end-box { width: 100%; max-width: 26rem; max-height: 100%; overflow-y: auto; padding: 1.25rem; text-align: center; }
.game-end-stars { font-size: 2.5rem; color: #ffb703; letter-spacing: .15em; }
.game-end-list { text-align: left; margin-bottom: 1rem; }
.game-end-levels { margin-bottom: 1rem; color: #198754; font-weight: 600; }
.game-end-actions { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; }

/* Home page */
.home-hero { display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: center; padding: 1rem 0 1.5rem; }
@media (min-width: 992px) { .home-hero { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.home-title { font-size: clamp(1.8rem, 5vw, 2.8rem); font-weight: 700; line-height: 1.1; margin: .25rem 0 .75rem; }
.home-lead { font-size: 1.05rem; opacity: .85; max-width: 38rem; }
.home-cta { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1rem; }
.home-cta .btn { min-height: 2.75rem; }
.home-preview canvas { display: block; width: 100%; max-height: 60vh; background: #1d2230; border-radius: .5rem; image-rendering: pixelated; }
.home-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .75rem; margin-bottom: 1.5rem; }
.home-steps p { margin-bottom: 0; opacity: .8; }

/* The shift on a phone: thumb-sized controls, a compact HUD, and the floor takes the width. */
.game-panel { padding: .75rem; }
.hud-btn { min-height: 2.75rem; min-width: 2.75rem; touch-action: manipulation; }
.hud-controls { align-items: center; }
@media (max-width: 575.98px) {
  .game-panel { padding: .5rem; }
  .hud-stats { gap: .75rem; width: 100%; justify-content: space-between; }
  .hud-value { font-size: 1.2rem; }
  .hud-controls { width: 100%; justify-content: space-between; }
  .hud-keys { display: none; }
}
/* A phone held sideways: the floor fills the height, the scoreboard sits beside it, and the HUD is one row. */
@media (max-height: 500px) and (orientation: landscape) {
  .game-panel { padding: .4rem; }
  #game-hud { flex-wrap: nowrap; margin-bottom: .25rem; }
  .hud-stats { flex-wrap: nowrap; gap: 1rem; }
  .hud-controls { flex-wrap: nowrap; }
  .hud-btn { min-height: 2.5rem; }
  .game-stage { grid-template-columns: minmax(0, 1fr) 12rem; }
  .ui-page-header { display: none; }
  .ui-content { padding-top: .4rem; padding-bottom: .4rem; }
  #game-canvas { height: calc(100dvh - 10.25rem); max-height: none; width: auto; max-width: 100%; }
  .game-side { max-height: calc(100dvh - 10.25rem); overflow-y: auto; }
  .hud-keys { display: none; }
}

/* Crew roster */
.crew-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .75rem; margin-bottom: 1.25rem; }
.crew-card { display: flex; flex-direction: column; align-items: center; gap: .25rem; padding: .75rem; text-align: center; text-decoration: none; color: inherit; }
.crew-card:hover { border-color: #ffd23f; }
.crew-sprite { width: 64px; height: 64px; image-rendering: pixelated; }
.crew-name { font-weight: 700; }
.crew-role { font-size: .8rem; opacity: .75; }
.crew-card .progress { width: 100%; height: .5rem; }
.crew-xp { font-size: .7rem; opacity: .65; }

/* Store feed, banners and the wave clock (economy shifts only). */
.game-panel { position: relative; }
.store-list { list-style: none; margin: .25rem 0 .75rem; padding: 0; max-height: 16rem; overflow-y: auto; }
.store-row { padding: .3rem .4rem; border-bottom: 1px solid rgba(127, 127, 127, .25); font-size: .85rem; }
.store-top { display: flex; justify-content: space-between; gap: .5rem; }
.store-value { font-variant-numeric: tabular-nums; }
.store-items { opacity: .85; }
.store-item.is-out { color: #b26a00; font-weight: 600; }
.store-status { font-size: .75rem; opacity: .75; }
.store-status.is-ok { color: #198754; opacity: 1; }
.store-status.is-late { color: #dc3545; opacity: 1; }
.store-ticker { display: none; font-size: .85rem; padding: .25rem .5rem; margin-bottom: .5rem; border-radius: .4rem; background: rgba(127, 127, 127, .15); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 991.98px) { .has-store .store-ticker:not([hidden]) { display: block; } .store-panel { display: none; } }
.game-banner { position: absolute; left: 0; right: 0; top: 38%; z-index: 5; text-align: center; font-size: clamp(1.6rem, 6vw, 3rem); font-weight: 800; letter-spacing: .08em; color: #fff; background: rgba(214, 40, 40, .88); padding: .5rem 1rem; pointer-events: none; }
.game-notice { position: absolute; left: 50%; transform: translateX(-50%); top: 6rem; z-index: 5; max-width: 90%; background: rgba(30, 40, 60, .92); color: #fff; padding: .4rem .9rem; border-radius: .5rem; font-weight: 600; pointer-events: none; }
.game-banner[hidden], .game-notice[hidden] { display: none; }
#game.is-wave #hud-clock { color: #dc3545; }

/* Crew panel: what each character is doing; folded on a phone so the floor comes first. */
.crew-panel > summary { cursor: pointer; list-style: none; }
.crew-panel > summary::-webkit-details-marker { display: none; }
.crew-panel > summary::after { content: ' ▾'; }
.crew-panel:not([open]) > summary::after { content: ' ▸'; }
.hud-doing { font-size: .75rem; opacity: .85; overflow-wrap: anywhere; line-height: 1.2; }
.game-bininfo { position: absolute; left: 50%; transform: translateX(-50%); bottom: 1rem; z-index: 5; max-width: 90%; background: rgba(30, 40, 60, .92); color: #fff; padding: .35rem .8rem; border-radius: .5rem; font-weight: 600; pointer-events: none; }
.game-bininfo[hidden] { display: none; }
.home-by { opacity: .75; margin-top: .75rem; }