: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; }
.creator-name { margin: 0 0 6px; color: #ffe28a; font-size: 14px; font-weight: 700; }
.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; }
.touch-controls { display: none; }
.editor-back { position: absolute; top: 12px; left: 12px; z-index: 3; padding: 8px 12px; background: #172440dd; color: #fff; box-shadow: none; }
.message { position: absolute; 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; }
@media (pointer: coarse), (max-width: 650px) {
  body { display: block; height: 100vh; height: var(--viewport-height, 100dvh); overflow: hidden; background: #10182b; }
  .game-shell { width: 100%; height: 100vh; height: var(--viewport-height, 100dvh); padding: 0; }
  .game-header, .legend { display: none; }
  .game-frame { --touch-space: clamp(84px, 20vw, 110px); width: 100%; height: 100vh; height: var(--viewport-height, 100dvh); padding-bottom: var(--touch-space); border: 0; border-radius: 0; box-shadow: none; }
  canvas { width: 100%; height: auto; max-height: calc(100vh - var(--touch-space)); max-height: calc(100dvh - var(--touch-space)); object-fit: contain; }
  .touch-controls { position: absolute; right: 0; bottom: 0; left: 0; z-index: 2; display: flex; align-items: center; justify-content: flex-end; height: var(--touch-space); padding: 8px 14px; background: #10182b; pointer-events: none; }
  .touch-swipe-hint { margin-right: auto; color: #b7c2dd; font-size: 12px; opacity: .85; }
  canvas { touch-action: none; }
  .touch-action { display: flex; gap: 10px; }
  .touch-button { width: clamp(48px, 14vw, 76px); height: clamp(48px, 14vw, 76px); padding: 0; border: 2px solid #ffffff99; border-radius: 18px; color: #ffffff; background: #172440aa; font-size: clamp(22px, 6vw, 34px); line-height: 1; box-shadow: 0 4px 0 #05091466; pointer-events: auto; touch-action: none; -webkit-user-select: none; user-select: none; }
  .touch-button:active { transform: translateY(3px); background: #4d70aacc; box-shadow: 0 1px 0 #05091466; }
  .touch-jump { border-radius: 50%; }
  .touch-attack { color: #8eeaff; }
  .message { z-index: 4; }
  .message-card { padding: 20px; }
  .editor-back { top: 10px; left: 10px; }
}

@media (pointer: coarse) and (orientation: landscape), (max-width: 650px) and (orientation: landscape) {
  .game-frame {
    --touch-space: clamp(76px, 13vw, 104px);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-bottom: 0;
  }
  canvas {
    width: auto;
    max-width: calc(100% - var(--touch-space));
    max-height: 100%;
  }
  .touch-controls {
    top: 0;
    bottom: 0;
    left: auto;
    width: var(--touch-space);
    height: auto;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    padding: 10px 8px;
    background: #10182bcc;
  }
  .touch-swipe-hint {
    display: none;
  }
  .touch-action {
    flex-direction: column;
    gap: 12px;
  }
  .touch-button {
    width: clamp(52px, 11vw, 78px);
    height: clamp(52px, 11vw, 78px);
  }
}