:root {
  color-scheme: dark;
  font-family: ui-rounded, "Avenir Next", "Segoe UI", sans-serif;
  background: #122231;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100svh;
  overflow: hidden;
  background: radial-gradient(circle at 50% 0%, #25485e 0%, #122231 58%);
}

button { font: inherit; }

.page-shell {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 12px;
}

.game-card {
  /* Desktop is a stable, horizontal game frame instead of a page that stretches. */
  width: min(94vw, 1280px);
  height: min(calc(100svh - 48px), 720px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 4px solid #314353;
  border-radius: 20px;
  background: #1b2d3a;
  box-shadow: 0 28px 70px rgb(0 0 0 / 45%), inset 0 1px 0 rgb(255 255 255 / 16%);
}

.game-header, .game-footer {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: #243746;
  color: #dce8ef;
}

.game-header { border-bottom: 2px solid #3d5261; }
.game-footer { border-top: 2px solid #3d5261; font-size: 12px; color: #b6c5cf; }
.game-header p { margin: 0; font-size: 13px; font-weight: 700; color: #9cdaef; }

.brand {
  display: grid;
  grid-template-columns: auto auto;
  line-height: .88;
  font-weight: 1000;
  letter-spacing: -1px;
  text-shadow: 2px 2px 0 #0b1520;
}
.brand span:first-child { color: #ffe359; }
.brand span:last-child { color: #ff69b4; }

.canvas-wrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  place-items: center;
  container-type: size;
  background: #243746;
  touch-action: none;
  user-select: none;
}

canvas {
  display: block;
  width: auto;
  height: min(100cqh, 50cqw);
  aspect-ratio: 2 / 1;
  image-rendering: pixelated;
  cursor: pointer;
  filter: saturate(1.08) contrast(1.04);
  box-shadow: 0 18px 28px rgb(0 0 0 / 30%);
}

.game-hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  padding: clamp(12px, 2.2cqw, 28px);
  color: #17253a;
}

.player-control, .sound-button, .score-card { pointer-events: auto; }

.player-control {
  position: absolute;
  top: clamp(12px, 2.2cqw, 28px);
  left: clamp(12px, 2.2cqw, 28px);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 3px solid #182238;
  border-radius: 10px;
  background: rgb(255 255 255 / 88%);
  box-shadow: 3px 4px 0 rgb(24 34 56 / 45%), inset 0 1px 0 white;
}

.player-label, .score-card span, .eyebrow, .control-hint {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.player-control input {
  width: 118px;
  min-width: 0;
  border: 0;
  outline: 0;
  padding: 0;
  color: #182238;
  background: transparent;
  font: 900 15px ui-rounded, "Avenir Next", sans-serif;
}

.edit-mark { color: #e35042; font-size: 21px; line-height: .7; }

.sound-button {
  position: absolute;
  top: clamp(12px, 2.2cqw, 28px);
  left: clamp(12px, 2.2cqw, 28px);
  transform: translateY(57px);
  display: flex;
  align-items: center;
  gap: 6px;
  border: 3px solid #182238;
  border-radius: 9px;
  padding: 7px 10px;
  color: #182238;
  background: #ffe866;
  box-shadow: 3px 4px 0 rgb(24 34 56 / 45%), inset 0 1px 0 rgb(255 255 255 / 75%);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}
.sound-button[aria-pressed="false"] { background: #e7edf1; color: #687482; }

.score-card {
  position: absolute;
  top: clamp(12px, 2.2cqw, 28px);
  right: clamp(12px, 2.2cqw, 28px);
  display: grid;
  justify-items: center;
  color: #fffdf1;
  text-shadow: 2px 2px 0 #182238, -1px -1px 0 #182238, 1px -1px 0 #182238;
}
.score-card strong { font-size: clamp(34px, 5cqw, 58px); line-height: .8; }
.score-card span { margin-top: 7px; font-size: 9px; }

.start-panel {
  position: absolute;
  left: 50%;
  top: 52%;
  translate: -50% -50%;
  display: grid;
  justify-items: center;
  width: min(82%, 520px);
  text-align: center;
  color: #fffdf1;
  text-shadow: 2px 2px 0 #182238;
}
.start-panel[hidden] { display: none; }
.eyebrow { margin: 0 0 6px; color: #fff4aa; }
.title-logo {
  display: flex;
  justify-content: center;
  margin: 0;
  font: 1000 clamp(47px, 9cqw, 110px)/.82 ui-rounded, "Avenir Next", sans-serif;
  letter-spacing: -.075em;
  -webkit-text-stroke: clamp(2px, .38cqw, 5px) #182238;
  paint-order: stroke fill;
  filter: drop-shadow(5px 6px 0 rgb(24 34 56 / 55%));
}
.title-logo span:first-child { color: #ffe65c; }
.title-logo span:last-child { color: #f158a3; }
.start-message { max-width: 360px; margin: 19px 0 16px; font-size: clamp(13px, 1.8cqw, 18px); font-weight: 800; }

.play-button {
  border: 3px solid #432c1a;
  border-radius: 10px;
  padding: 12px 25px;
  color: #fff8d8;
  background: #ef5342;
  box-shadow: inset 0 3px 0 rgb(255 255 255 / 30%), inset 0 -5px 0 #ae3129, 0 5px 0 rgb(0 0 0 / 25%);
  font-weight: 900;
  letter-spacing: .2px;
  cursor: pointer;
}

.control-hint { margin: 14px 0 0; font-size: 9px; color: #f2fbff; }

.play-button:focus-visible { outline: 3px solid white; outline-offset: 3px; }
.play-button[hidden] { display: none; }

.revive-button {
  margin-top: 12px;
  border: 0;
  padding: 4px 8px;
  color: #fffdf1;
  background: transparent;
  font: 900 13px ui-rounded, "Avenir Next", sans-serif;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-shadow: 2px 2px 0 #182238;
  cursor: pointer;
}
.revive-button span { display: block; margin-top: 5px; color: #fff1a4; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }

.ad-panel, .countdown-panel {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  padding: 24px;
  text-align: center;
  color: #fffdf1;
  background: rgb(16 28 52 / 94%);
  text-shadow: 2px 2px 0 #101c34;
}
.ad-panel[hidden], .countdown-panel[hidden] { display: none; }
.ad-panel p:not(.ad-label) { max-width: 500px; margin: 16px 0 21px; font-size: clamp(16px, 2.2cqw, 25px); font-weight: 900; line-height: 1.24; }
.ad-label { margin: 0; color: #ffe866; font-size: 11px; font-weight: 1000; letter-spacing: .16em; text-transform: uppercase; }
.ad-panel strong, .countdown-panel strong { font: 1000 clamp(82px, 16cqw, 180px)/.85 ui-rounded, "Avenir Next", sans-serif; color: #ffdf54; -webkit-text-stroke: 3px #182238; paint-order: stroke fill; }
.countdown-panel { background: rgb(16 28 52 / 34%); pointer-events: none; }
.countdown-panel p { margin: 0 0 12px; font-size: clamp(15px, 2cqw, 24px); font-weight: 1000; text-transform: uppercase; letter-spacing: .12em; }

/* Phones keep the same horizontal game frame, scaled down for touch. */
@media (max-width: 700px) {
  .page-shell { display: grid; place-items: center; min-height: 100svh; padding: 8px; }
  .game-card {
    width: 100%;
    height: min(calc((100vw - 16px) * .62), calc(100svh - 16px));
    min-height: 0;
    border: 3px solid #314353;
    border-radius: 12px;
  }
  .game-header, .game-footer { min-height: 36px; padding: 5px 10px; }
  .game-header p { display: none; }
  .canvas-wrap { background: #172f43; }
  canvas { width: auto; height: min(100cqh, 50cqw); box-shadow: 0 10px 22px rgb(0 0 0 / 28%); }
  .game-hud { padding: 12px; }
  .player-control { gap: 5px; padding: 5px 7px; }
  .player-label { display: none; }
  .player-control input { width: 90px; font-size: 12px; }
  .sound-button { transform: translateY(46px); padding: 5px 7px; }
  .sound-word { display: none; }
  .start-panel { top: 56%; }
  .start-message { margin-block: 12px; font-size: 11px; }
  .control-hint { display: none; }
  .revive-button { margin-top: 8px; font-size: 11px; }
}

@media (min-width: 701px) and (max-height: 760px) {
  .page-shell { padding: 12px; }
  .game-card { height: calc(100svh - 24px); }
}

@media (min-width: 701px) and (max-height: 540px) {
  .game-header, .game-footer { min-height: 36px; padding-block: 5px; }
  .game-header p { display: none; }
  .game-footer { font-size: 10px; }
  .page-shell { padding: 6px; }
  .game-card { height: calc(100svh - 12px); }
}