:root {
  --field-top: max(112px, calc(env(safe-area-inset-top) + 106px));
  --field-bottom: max(110px, calc(env(safe-area-inset-bottom) + 100px));
  --tomato: #ef321b;
  --tomato-dark: #9b1207;
  --cream: #fff7df;
  --gold: #ffd43b;
  --cyan: #21d7ff;
}

/* Codex v1: HUD and controls have their own space outside the play field. */

* { box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #120805;
  font-family: "Arial Rounded MT Bold", "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

html { height: 100dvh; }

body {
  position: fixed;
  inset: 0;
  min-height: 0;
}

button, a { font: inherit; -webkit-tap-highlight-color: transparent; }

#game-shell {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  height: 100dvh;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  background: #f6b36a;
}

.screen { position: absolute; inset: 0; display: none; }
.screen.active { display: block; }

#title-screen {
  overflow: clip;
  background: #6c170b;
}

#title-screen::before,
#title-screen::after {
  content: "";
  position: absolute;
  inset: -3%;
  background: center / cover no-repeat url("assets/title.webp");
}

#title-screen::before {
  filter: blur(28px) brightness(.58) saturate(1.2);
  transform: scale(1.08);
}

#title-screen::after {
  inset: 0;
  background-size: contain;
  filter: drop-shadow(0 0 28px rgba(30, 0, 0, .5));
}

.title-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, transparent 45%, rgba(65, 8, 0, .08) 58%, rgba(45, 5, 0, .88) 100%);
}

.title-actions {
  position: absolute;
  z-index: 3;
  left: 50%;
  width: min(84%, 430px);
  transform: translateX(-50%);
  bottom: max(4%, env(safe-area-inset-bottom));
  display: grid;
  gap: 10px;
}

.primary-button, .secondary-button, .back-button {
  width: 100%;
  min-height: 52px;
  border-radius: 999px;
  border: 3px solid white;
  text-align: center;
  text-decoration: none;
  font-weight: 900;
  letter-spacing: .04em;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.primary-button {
  color: white;
  background: linear-gradient(#ff6b34, #d91c0d);
  box-shadow: 0 0 0 3px #a30c05, 0 0 24px rgba(255, 73, 30, .85);
}

.secondary-button {
  color: #7c1b0e;
  background: linear-gradient(#fffdf2, #ffd86a);
  box-shadow: 0 0 0 3px #c5760d;
}

.back-button {
  min-height: 42px;
  color: white;
  background: rgba(25, 5, 2, .72);
  border-width: 2px;
  font-size: 13px;
}

.primary-button:active, .secondary-button:active, .move-button:active { transform: scale(.96); }

.how-panel, .pause-panel {
  position: absolute;
  z-index: 10;
  left: 50%;
  width: min(86%, 520px);
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 24px;
  border: 4px solid white;
  border-radius: 28px;
  color: #62200d;
  background: rgba(255, 250, 225, .97);
  box-shadow: 0 0 0 5px var(--tomato), 0 18px 60px rgba(62, 7, 0, .55);
  text-align: center;
}

.how-panel h2, .pause-panel h2 { margin: 0 0 12px; font-size: clamp(22px, 6vw, 34px); }
.how-panel p { line-height: 1.55; }
.controller-help { margin: 10px 0; font-size: 12px; font-weight: 800; line-height: 1.45; }
.how-panel ul { margin: 12px auto 20px; padding: 0; list-style: none; line-height: 1.75; text-align: left; width: max-content; max-width: 100%; }
.small { min-height: 46px; }

#game-canvas { width: 100%; height: 100%; display: block; touch-action: none; }

.hud {
  position: absolute;
  z-index: 3;
  top: max(10px, env(safe-area-inset-top));
  left: 50%;
  width: min(94%, 900px);
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: 1.2fr .8fr 1.05fr;
  gap: 7px;
}

.hud-box {
  min-width: 0;
  padding: 5px 8px 7px;
  border: 3px solid white;
  border-radius: 16px;
  color: white;
  background: linear-gradient(#7a3219, #421507);
  box-shadow: 0 0 0 3px rgba(115, 36, 8, .9), 0 4px 10px rgba(0,0,0,.25);
  text-align: center;
}

.hud-box span { display: block; font-size: clamp(9px, 2.5vw, 13px); line-height: 1; }
.hud-box b { color: var(--gold); font-size: clamp(20px, 6.5vw, 34px); line-height: 1.1; text-shadow: 0 2px #8d210b; }
.hud-box.lives { display: grid; place-items: center; font-size: clamp(15px, 5vw, 27px); white-space: nowrap; }

.mission {
  position: absolute;
  z-index: 3;
  top: max(84px, calc(env(safe-area-inset-top) + 76px));
  left: 50%;
  width: min(74%, 520px);
  transform: translateX(-50%);
  padding: 7px 5px;
  border: 3px solid var(--tomato);
  border-radius: 12px;
  color: #6b150b;
  background: rgba(255, 251, 232, .94);
  font-weight: 900;
  font-size: clamp(12px, 3.5vw, 19px);
  text-align: center;
  box-shadow: 0 3px 8px rgba(0,0,0,.2);
}

.controls {
  position: absolute;
  z-index: 4;
  left: 5%;
  right: 5%;
  bottom: max(16px, env(safe-area-inset-bottom));
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}

.move-button {
  width: clamp(70px, 21vw, 104px);
  aspect-ratio: 1;
  border: 5px solid white;
  border-radius: 50%;
  color: white;
  background: linear-gradient(#32deff, #0575e8);
  box-shadow: 0 0 0 4px #03bde7, 0 0 28px rgba(0, 218, 255, .9), inset 0 5px 12px rgba(255,255,255,.45);
  font-size: clamp(38px, 12vw, 62px);
  font-weight: 900;
  line-height: 1;
  pointer-events: auto;
  cursor: pointer;
}

.pause-button {
  position: absolute;
  z-index: 5;
  bottom: max(30px, calc(env(safe-area-inset-bottom) + 14px));
  left: 50%;
  transform: translateX(-50%);
  width: 56px;
  height: 42px;
  border: 3px solid white;
  border-radius: 14px;
  color: #55200d;
  background: #fff1c9;
  box-shadow: 0 3px 0 #9b5b24;
  font-weight: 900;
  cursor: pointer;
}

.sound-button {
  position: absolute;
  z-index: 20;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  width: 46px;
  height: 46px;
  border: 3px solid white;
  border-radius: 50%;
  color: white;
  background: rgba(87, 20, 7, .84);
  box-shadow: 0 0 16px rgba(255, 213, 57, .65);
  font-size: 22px;
  cursor: pointer;
}

.sound-button.muted { filter: grayscale(1); opacity: .72; }
.play-sound { top: max(132px, calc(env(safe-area-inset-top) + 120px)); }

.pause-panel[hidden], .how-panel[hidden] { display: none; }
.pause-panel { background: rgba(255, 250, 225, .98); }
.pause-panel button + button { margin-top: 14px; }

.controller-status {
  position: absolute;
  z-index: 40;
  left: 50%;
  bottom: max(16px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  padding: 9px 18px;
  border: 2px solid white;
  border-radius: 999px;
  color: white;
  background: rgba(36, 15, 8, .9);
  box-shadow: 0 0 18px rgba(33, 215, 255, .7);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
  pointer-events: none;
  animation: controller-in 2.4s both;
}

@keyframes controller-in {
  0% { opacity: 0; transform: translate(-50%, 12px); }
  12%, 78% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, 0); }
}

.result-screen {
  background: linear-gradient(rgba(105, 18, 0, .28), rgba(56, 5, 0, .78)), center / cover url("assets/kitchen-bg.webp");
}

.result-card {
  position: absolute;
  left: 50%;
  width: min(86%, 540px);
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 24px 20px;
  border: 5px solid white;
  border-radius: 30px;
  color: #6b180b;
  background: rgba(255, 249, 221, .96);
  box-shadow: 0 0 0 6px var(--tomato), 0 15px 55px rgba(60, 6, 0, .55);
  text-align: center;
}

.result-kicker { margin: 0; color: var(--tomato); font-weight: 900; letter-spacing: .2em; }
.result-card h1 { margin: 5px 0 14px; font-size: clamp(25px, 7vw, 38px); }
.result-score { margin: 0 auto 6px; padding: 10px; border-radius: 18px; color: white; background: #6a260f; }
.result-score span { display: block; font-size: 13px; }
.result-score b { color: var(--gold); font-size: clamp(42px, 13vw, 68px); line-height: 1; }
.high-score { margin: 10px 0; font-weight: 900; }
.result-message { min-height: 2.8em; margin: 9px 0 16px; font-weight: 700; line-height: 1.4; }
.result-card .secondary-button, .result-card .back-button { margin-top: 12px; }

@media (max-aspect-ratio: 3/4) {
  #title-screen::after {
    background-size: contain;
    background-position: center top;
  }
}

/* スマホはブラウザの操作バーとノッチを避け、全UIを実画面内に収める */
@media (max-width: 899px) and (orientation: portrait) {
  .title-actions {
    width: min(88%, 390px);
    bottom: max(10px, calc(env(safe-area-inset-bottom) + 8px));
    gap: 7px;
  }

  .primary-button, .secondary-button { min-height: 46px; }
  .back-button { min-height: 38px; }

  .hud {
    top: max(6px, env(safe-area-inset-top));
    width: 96%;
    gap: 4px;
  }

  .hud-box {
    padding: 4px 5px 5px;
    border-width: 2px;
    border-radius: 12px;
  }

  .mission {
    top: max(68px, calc(env(safe-area-inset-top) + 62px));
    width: 70%;
    padding: 5px;
  }

  .play-sound {
    top: max(112px, calc(env(safe-area-inset-top) + 106px));
  }

  .controls {
    left: 3%;
    right: 3%;
    bottom: max(10px, calc(env(safe-area-inset-bottom) + 8px));
  }

  .move-button {
    width: clamp(64px, 18vw, 82px);
    border-width: 4px;
  }

  .pause-button {
    bottom: max(18px, calc(env(safe-area-inset-bottom) + 10px));
    width: 50px;
    height: 38px;
  }
}

/* PCでは専用の横長タイトル画像で画面いっぱいに表示する */
@media (min-width: 900px) and (min-aspect-ratio: 4/3) {
  :root { --field-top: max(132px, calc(env(safe-area-inset-top) + 126px)); }
  .mission { top: max(88px, calc(env(safe-area-inset-top) + 82px)); }
  #title-screen::before,
  #title-screen::after {
    background-image: url("assets/title-wide.webp");
  }

  #title-screen::after {
    background-size: cover;
    background-position: center;
    transform: scale(1.12);
    transform-origin: center;
  }

  .title-actions {
    width: min(38vw, 480px);
    bottom: max(3%, env(safe-area-inset-bottom));
  }
}

@media (max-height: 650px) {
  .mission { top: 70px; }
  .title-actions { gap: 6px; }
  .primary-button, .secondary-button { min-height: 44px; }
  .result-card { padding-block: 16px; }
}

#play-screen { background: center / cover url('assets/kitchen-bg.webp'); }
#game-canvas { position: absolute; top: var(--field-top); bottom: var(--field-bottom); left: 50%; transform: translateX(-50%); width: min(100%, calc((100dvh - 222px) * 1.65)); height: calc(100% - var(--field-top) - var(--field-bottom)); border-radius: 18px; }
.play-sound { top: max(67px, calc(env(safe-area-inset-top) + 61px)); right: 10px; }
.mission { top: max(70px, calc(env(safe-area-inset-top) + 64px)); font-size: clamp(12px, 2vw, 16px); width: min(70%, 520px); }
button, .back-button { min-height: 44px; touch-action: none; }
button:focus-visible, a:focus-visible { outline: 4px solid #2ef6ff; outline-offset: 5px; }
button:disabled { opacity: .7; cursor: wait; }
.pad-hint { margin: 0; color: #fff8d7; text-align: center; font-size: 12px; font-weight: bold; text-shadow: 0 2px 3px #341008; }
.move-button { position: relative; overflow: hidden; }
.move-button.held { filter: brightness(1.4); box-shadow: 0 0 0 5px white, 0 0 42px #00dcff; }
.move-button.pulse::after { content: ''; position: absolute; inset: 15%; border: 4px solid white; border-radius: 50%; animation: ripple .4s ease-out forwards; }
.pulse { animation: tap-flash .22s ease-out; }
@keyframes ripple { to { transform: scale(2); opacity: 0; } }
@keyframes tap-flash { 40% { filter: brightness(1.4); } }
#notice { position: absolute; z-index: 50; left: 8px; right: 8px; bottom: 0; text-align: center; background: #421507; color: white; font-size: 11px; pointer-events: none; }
#notice:empty { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); }
.how-panel { padding: 18px; }
.how-panel p { margin: 8px 0; }
.how-panel ul { font-size: 13px; margin: 8px auto 14px; }
.pause-panel { z-index: 30; }
.result-card { max-height: calc(100% - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
@media (orientation: portrait) {
  #title-screen::after { bottom: 190px; top: env(safe-area-inset-top); background-position: center; }
  .title-actions { bottom: max(12px, calc(env(safe-area-inset-bottom) + 8px)); }
}
@media (min-width: 900px) and (min-aspect-ratio: 4/3) {
  #title-screen::after { background-size: contain; transform: none; }
  .mission { top: max(88px, calc(env(safe-area-inset-top) + 82px)); }
}
@media (max-height: 620px) {
  .result-card { padding: 12px 16px; }
  .result-card h1 { font-size: 24px; margin: 4px 0 8px; }
  .result-score b { font-size: 42px; }
  .result-message { font-size: 13px; min-height: 0; margin: 6px 0 10px; }
  .result-card .secondary-button, .result-card .back-button { margin-top: 8px; }
  .high-score { margin: 6px 0; }
}
@media (orientation: landscape) and (max-height: 540px) {
  :root { --field-top: 72px; --field-bottom: 64px; }
  #game-canvas { width: min(70%, calc((100dvh - 136px) * 1.65)); }
  .mission { display: none; }
  .hud { width: 66%; }
  .play-sound { top: 12px; }
  .move-button { width: 64px; font-size: 40px; }
  .controls { bottom: max(12px, env(safe-area-inset-bottom)); }
  .title-actions { left: auto; right: 4%; width: 36%; transform: none; bottom: 15px; }
  #title-screen::after { right: 42%; background-size: contain; }
  .how-panel { width: 94%; padding: 12px; }
  .how-panel h2 { font-size: 22px; margin: 0; }
  .how-panel ul { display: inline-block; vertical-align: top; margin: 6px 20px; }
  .how-panel .controller-help { display: inline-block; text-align: left; font-size: 11px; }
  .how-panel > p:not(.controller-help) { font-size: 12px; margin: 3px; }
  .result-card { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 14px; width: 90%; padding: 12px; }
  .result-kicker, .result-card h1, .result-score, .high-score, .result-message { grid-column: 1; margin: 0; }
  .result-card .controller-help { grid-column: 2; grid-row: 1 / 3; margin: 0; align-self: center; }
  #retry-button { grid-column: 2; grid-row: 3; }
  #result-title-button { grid-column: 2; grid-row: 4; margin: 0; }
  .result-card .back-button { grid-column: 2; grid-row: 5; margin: 0; }
}

/* v2: desktop uses every horizontal pixel, with the v1 character scale. */
@media (min-width: 900px) and (min-height: 541px) and (min-aspect-ratio: 4/3) {
  #game-canvas { inset: 0; width: 100%; height: 100%; transform: none; border-radius: 0; }
}
.pair-status { position: absolute; z-index: 3; top: max(68px, calc(env(safe-area-inset-top) + 62px)); left: 50%; transform: translateX(-50%); width: min(70%, 350px); height: 40px; padding: 1px 10px 7px; display: flex; justify-content: center; align-items: center; gap: 8px; background: #fff9df; color: #76250b; border: 2px solid #ed5a12; border-radius: 12px; font-size: 14px; box-shadow: 0 0 14px #ffd34d99; pointer-events: none; }
.pair-status img { width: 30px; height: 28px; object-fit: contain; }
#pair-seconds { font-size: 11px; font-variant-numeric: tabular-nums; }
.pair-track { position: absolute; bottom: 3px; left: 12px; right: 12px; height: 4px; border-radius: 4px; overflow: hidden; background: #eed7af; }
#pair-meter { display: block; height: 100%; background: #ed4b18; transform-origin: left; }
#time.urgent { color: #ff8063; text-shadow: 0 0 12px #ef321b; }
.countdown { position: absolute; top: 19%; right: 5%; font-size: clamp(40px, 7vw, 88px); font-weight: 900; color: #fff2c4; -webkit-text-stroke: 2px #b6280e; text-shadow: 0 3px 15px #ff4f19; pointer-events: none; opacity: .88; }
[hidden] { display: none !important; }
@media (min-width: 900px) and (min-aspect-ratio: 4/3) { .pair-status { top: max(88px, calc(env(safe-area-inset-top) + 82px)); } }
@media (orientation: landscape) and (max-height: 540px) { .pair-status { top: 82px; left: 50%; width: 210px; height: 32px; } .pair-status img { height: 22px; } }

/* v3: bottom-anchored floor survives both portrait and wide viewport crops. */
#play-screen { background: #e9b68a url('assets/kitchen-floor-v3.png') center bottom / cover no-repeat; }
.result-screen { background: linear-gradient(#4a1d0033, #40110088), url('assets/kitchen-floor-v3.png') center bottom / cover no-repeat; }
.result-message { display: flex; flex-wrap: wrap; justify-content: center; column-gap: .35em; row-gap: .15em; font-size: clamp(12px, 3.3vw, 16px); line-height: 1.6; }
.result-message span { display: inline-block; white-space: nowrap; }
.result-card { container-type: inline-size; }
.result-message { font-size: min(16px, 5.3cqw); }
@media (min-width: 900px) and (min-aspect-ratio: 4/3) {
  #title-screen::before { inset: 0; background-image: url('assets/title-extended-v3.png'); background-size: cover; filter: none; transform: none; }
  #title-screen::after { inset: 0; background-image: url('assets/title-wide.webp'); background-size: contain; filter: none; transform: none; }
}
@media (min-width: 900px) and (min-aspect-ratio: 4/3) {
  #title-screen::after { width: min(100%, calc(100dvh * 1.777)); left: 50%; right: auto; transform: translateX(-50%); background-size: cover; mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); }
}

/* Persistent selection for keyboard, mouse and controller menus. */
.primary-button, .secondary-button, .back-button { position: relative; }
.menu-selected { outline: 4px solid #20efff !important; outline-offset: 4px; border-color: #fff48b !important; box-shadow: 0 0 0 7px #073d5b, 0 0 28px #1be9ff !important; }
.menu-selected::before { content: '▶'; position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: #fff36a; font-size: 15px; line-height: 1; text-shadow: 0 1px 3px #432600; pointer-events: none; }
.secondary-button.menu-selected::before { color: #843109; text-shadow: none; }
.sound-button.menu-selected::before { left: -17px; }

/* v7: fill the mobile title, including the area behind its menu. */
@media (max-width: 899px), (orientation: portrait) {
  #title-screen::before { inset: 0; background: url('assets/title.webp') center / cover no-repeat; filter: none; transform: none; }
  #title-screen::after { inset: 0; background-size: cover; background-position: center; filter: none; }
  .title-actions { gap: 8px; }
  .pad-hint { display: none; }
}
#endless-button { font-size: clamp(12px, 3.4vw, 16px); }
#endless-button:disabled { opacity: 1; color: #eee0c7; background: #583322; border-color: #bb9971; cursor: default; box-shadow: none; }
#unlock-message { color: #a32b05; font-weight: 900; font-size: 14px; margin: 6px 0; }
@media (orientation: portrait) {
  #title-screen::after { background-size: 100% 100%; }
}
@media (max-height: 650px) { .how-panel { padding: 12px; } .how-panel .controller-help { font-size: 11px; line-height: 1.3; } }