:root {
  color-scheme: dark;
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", system-ui, sans-serif;
  background: #10182b;
  color: #f5f7ff;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; background: radial-gradient(circle at 50% 0%, #29395a, #10182b 68%); }
.game-shell { width: min(1100px, 100%); padding: 22px; }
.game-header { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 14px; }
.eyebrow { margin: 0 0 5px; color: #7ed9ff; font-size: 11px; font-weight: 800; letter-spacing: .2em; }
h1 { margin: 0; font-size: clamp(25px, 4vw, 42px); letter-spacing: .04em; }
.hint { margin: 7px 0 0; color: #b7c2dd; font-size: 13px; }
.actions { display: flex; align-items: center; gap: 12px; }
.status { display: none; }
button { border: 0; border-radius: 999px; padding: 10px 18px; color: #102039; background: #ffe28a; font: inherit; font-weight: 800; cursor: pointer; box-shadow: 0 4px 0 #bc8f36; }
button:hover { filter: brightness(1.08); }
button:active { transform: translateY(2px); box-shadow: 0 2px 0 #bc8f36; }
.game-frame { position: relative; overflow: hidden; border: 3px solid #43557e; border-radius: 18px; background: #86cbe9; box-shadow: 0 18px 45px #080d1d99; }
canvas { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.message { position: absolute; z-index: 3; inset: 0; display: grid; place-items: center; background: #0b122499; }
.message[hidden] { display: none; }
.message-card { width: min(380px, calc(100% - 40px)); padding: 27px; border: 1px solid #ffffff30; border-radius: 18px; background: #172440ee; text-align: center; box-shadow: 0 12px 35px #05091499; }
.message-card p { color: #b9c6e3; }
.message-card h2 { margin: 7px 0; font-size: 30px; }
#message-kicker { margin: 0; color: #7ed9ff; font-size: 12px; font-weight: 800; letter-spacing: .16em; }
.legend { display: flex; justify-content: space-between; gap: 15px; margin-top: 12px; color: #aebbd6; font-size: 12px; }
.dot { display: inline-block; width: 9px; height: 9px; margin-right: 6px; border-radius: 50%; background: #7ed9ff; }
.mobile-controls { display: none; }
.control-button {
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  user-select: none;
}
@media (max-width: 768px), (hover: none) and (pointer: coarse) and (max-width: 1024px) {
  body { place-items: start center; }
  .game-header, .legend { align-items: flex-start; flex-direction: column; }
  .actions { width: 100%; justify-content: space-between; }
  .game-shell { padding: 12px; }
  .hint { display: none; }
  .mobile-controls {
    display: flex;
    position: absolute;
    z-index: 2;
    right: 0;
    bottom: 0;
    left: 0;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding: 12px 14px 16px;
    pointer-events: none;
  }
  .mobile-controls__move { display: flex; gap: 14px; }
  .control-button {
    display: grid;
    place-items: center;
    width: 68px;
    height: 68px;
    padding: 0;
    border: 2px solid #ffffff66;
    border-radius: 50%;
    color: #fff;
    background: #29395a;
    box-shadow: 0 5px 0 #080d1d;
    font-size: 28px;
    opacity: .82;
    pointer-events: auto;
  }
  .control-button--jump {
    width: 78px;
    height: 78px;
    background: #e45f73;
    box-shadow: 0 5px 0 #873242;
    font-size: 14px;
    letter-spacing: .08em;
  }
  .control-button.is-pressed {
    filter: brightness(1.2);
    transform: translateY(3px) scale(.97);
    box-shadow: 0 2px 0 #080d1d;
  }
  .legend { margin-top: 4px; }
}
@media (orientation: landscape) and (hover: none) and (pointer: coarse),
       (orientation: landscape) and (max-width: 1024px) and (max-height: 600px) {
  body { min-height: 100dvh; overflow: hidden; }
  .game-shell { width: 100%; padding: 6px; }
  .game-header, .legend { display: none; }
  .game-frame {
    width: min(100%, calc((100vh - 12px) * 16 / 9));
    width: min(100%, calc((100dvh - 12px) * 16 / 9));
    margin: 0 auto;
    border-width: 2px;
    border-radius: 10px;
  }
  .mobile-controls { padding: 8px 18px 12px; }
  .control-button { width: 58px; height: 58px; font-size: 24px; }
  .control-button--jump { width: 66px; height: 66px; font-size: 12px; }
}