:root {
  color-scheme: dark;
  --ink: #f5efd4;
  --red: #d53b2e;
  --green: #43a047;
  --yellow: #f2c94c;
  --blue: #2389b8;
  --night: #080a0f;
  --panel: #161824;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; overscroll-behavior: none; }
body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  color: var(--ink);
  background:
    radial-gradient(circle at 15% 15%, rgba(35,137,184,.18), transparent 35%),
    radial-gradient(circle at 85% 80%, rgba(213,59,46,.14), transparent 38%),
    #080a0f;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  touch-action: manipulation;
}

button, select { font: inherit; color: inherit; }
button { cursor: pointer; }
button, select { transition: border-color .15s ease, background-color .15s ease, color .15s ease, transform .15s ease; }
button:focus-visible, select:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }

.cabinet {
  width: min(960px, 100%);
  padding: clamp(12px, 2vw, 24px);
}

.masthead {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 3px solid var(--green);
  padding: 0 2px 10px;
  margin-bottom: 14px;
}

.eyebrow { margin: 0 0 3px; color: #a8b7c6; font-size: 11px; letter-spacing: .12em; }
h1 { margin: 0; line-height: .9; font-size: clamp(26px, 5vw, 44px); letter-spacing: -.1em; white-space: nowrap; }
h1 span:nth-child(odd) { color: var(--red); }
h1 span:nth-child(even) { color: var(--green); }
h1 b { color: var(--yellow); margin-left: .12em; }
nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
nav button, nav select {
  min-height: 36px;
  border: 1px solid #465060;
  border-radius: 3px;
  background: #11151d;
  padding: 7px 10px;
}
nav button:hover, nav select:hover { border-color: var(--yellow); background: #18202b; }
nav button:active { transform: translateY(1px); }

.screen-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #000;
  border: 5px solid #2b3040;
  border-top-color: #596273;
  border-bottom-color: #12141a;
  box-shadow: 0 16px 50px #000, 0 0 0 2px #090a0d;
  touch-action: none;
}
.screen-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, transparent 0 3px, rgba(0,0,0,.045) 3px 4px);
  box-shadow: inset 0 0 26px rgba(0,0,0,.28);
}

canvas {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  outline: none;
  touch-action: none;
}

.message {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(84%, 540px);
  padding: 18px;
  color: #fff7cf;
  text-align: center;
  white-space: pre-line;
  background: rgba(4, 6, 10, .92);
  border: 2px solid var(--yellow);
  box-shadow: 7px 7px 0 rgba(0,0,0,.45);
  z-index: 3;
}
#hint-toast {
  position: absolute;
  left: 50%; top: 8px;
  transform: translateX(-50%);
  width: max-content;
  max-width: min(88%, 620px);
  padding: 6px 10px;
  color: #fff7cf;
  text-align: center;
  font-size: 10px;
  line-height: 1.35;
  background: rgba(5,8,13,.9);
  border-left: 3px solid var(--yellow);
  box-shadow: 3px 4px 0 rgba(0,0,0,.35);
  pointer-events: none;
  z-index: 2;
}
.message strong { display: block; margin-bottom: 10px; color: var(--yellow); }
.shop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 10px; }
.shop-grid button, .shop-close {
  border: 1px solid #637084;
  border-radius: 3px;
  padding: 8px 6px;
  color: #f7f0d2;
  background: #19212d;
}
.shop-grid button:hover, .shop-grid button:focus-visible { border-color: var(--yellow); background: #263345; }
.shop-close { margin-top: 8px; width: 100%; background: #111720; }

.start {
  position: absolute;
  left: 50%; bottom: 9%;
  transform: translateX(-50%);
  min-width: 180px;
  border: 0;
  border-radius: 3px;
  padding: 11px 20px;
  color: #071006;
  font-weight: 800;
  background: var(--yellow);
  box-shadow: 0 5px 0 #8c6d10;
  z-index: 4;
}
.start:active { transform: translate(-50%, 3px); box-shadow: 0 2px 0 #8c6d10; }
.start.presentation-action { min-width: 154px; padding: 8px 15px; bottom: 6%; }

.mobile-controls {
  display: none;
  justify-content: space-between;
  padding: 14px 2px 4px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.dpad, .actions { display: flex; gap: 10px; align-items: end; }
.mobile-controls button {
  width: clamp(54px, 15vw, 72px);
  height: clamp(48px, 13vw, 64px);
  border: 1px solid #536070;
  border-radius: 10px;
  background: linear-gradient(#2b3340, #151923);
  box-shadow: 0 5px 0 #07090e;
  font-size: 22px;
  touch-action: none;
}
.mobile-controls button.active { transform: translateY(4px); box-shadow: 0 1px 0 #07090e; background: #3d4b5d; }
.mobile-controls button.unavailable { opacity: .38; filter: grayscale(1); }
.mobile-controls .jump { color: var(--yellow); height: clamp(58px, 17vw, 80px); }

footer { display: flex; justify-content: space-between; gap: 20px; color: #adb5c2; font-size: 12px; padding-top: 13px; }
footer p { margin: 0; }
.footer-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; white-space: nowrap; }
.text-button { border: 0; padding: 2px; color: #d5dded; background: transparent; text-decoration: underline; text-underline-offset: 3px; }
.text-button:hover, .text-button:focus-visible { color: var(--yellow); }

#settings-dialog {
  width: min(92vw, 460px);
  padding: 20px;
  color: var(--ink);
  background: #11151d;
  border: 2px solid var(--yellow);
  border-radius: 3px;
  box-shadow: 10px 14px 0 rgba(0,0,0,.45), 0 24px 70px #000;
  font-family: inherit;
}
#settings-dialog::backdrop { background: rgba(2,3,8,.82); }
#settings-dialog h2 { margin: 0 0 10px; color: var(--yellow); font-size: 20px; }
#settings-dialog p { margin: 0 0 18px; color: #c5cedb; font-size: 12px; line-height: 1.5; }
.settings-toggle { display: flex; align-items: center; gap: 9px; margin: 0 0 18px; color: #f7f0d2; font-size: 12px; }
.settings-toggle input { width: 18px; height: 18px; accent-color: var(--yellow); }
.settings-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.settings-actions button {
  min-height: 36px;
  border: 1px solid #637084;
  border-radius: 3px;
  padding: 8px 11px;
  color: #f7f0d2;
  background: #19212d;
}
#reset-achievements { border-color: var(--red); color: #ffd8d0; }
.settings-actions button:hover, .settings-actions button:focus-visible { border-color: var(--yellow); background: #263345; }

#tiles-dialog {
  width: min(96vw, 940px);
  max-height: min(88vh, 820px);
  padding: 0;
  color: var(--ink);
  background: #0d1118;
  border: 2px solid var(--blue);
  border-radius: 3px;
  box-shadow: 10px 14px 0 rgba(0,0,0,.45), 0 24px 70px #000;
  font-family: inherit;
  overflow: auto;
}
#tiles-dialog::backdrop { background: rgba(2,3,8,.88); }
.tiles-header {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px 12px;
  background: rgba(13,17,24,.97);
  border-bottom: 2px solid var(--green);
}
.tiles-header h2 { margin: 0 0 5px; color: var(--yellow); font-size: 20px; }
.tiles-header p { margin: 0; max-width: 680px; color: #c5cedb; font-size: 11px; line-height: 1.45; }
#tiles-close {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border: 1px solid #637084;
  border-radius: 3px;
  color: #f7f0d2;
  background: #19212d;
  font-size: 22px;
  line-height: 1;
}
#tiles-close:hover, #tiles-close:focus-visible { border-color: var(--yellow); background: #263345; }
.tile-inspector {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  margin: 14px 18px;
  padding: 12px;
  background: #151b25;
  border-left: 3px solid var(--yellow);
}
.tile-sprite {
  width: 42px;
  height: 42px;
  background-color: #89919b;
  background-image: url("assets/images/sprites.png");
  background-repeat: no-repeat;
  background-size: 462px 252px;
  background-position: calc(var(--tile-x, 0) * -42px) calc(var(--tile-y, 0) * -42px);
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.tile-preview { width: 84px; height: 84px; background-size: 924px 504px; background-position: calc(var(--tile-x, 0) * -84px) calc(var(--tile-y, 0) * -84px); }
.tile-details { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; min-width: 0; }
.tile-details strong { color: #fff7cf; font-size: 14px; }
.tile-details > span { color: #8fc9e3; font-size: 11px; text-align: right; }
.tile-details label { grid-column: 1 / -1; margin-top: 5px; color: #adb8c7; font-size: 10px; }
#tile-note {
  grid-column: 1 / -1;
  width: 100%;
  min-height: 34px;
  border: 1px solid #526073;
  border-radius: 2px;
  padding: 7px 9px;
  color: #fff7cf;
  background: #090d13;
  font: inherit;
  font-size: 11px;
}
#tile-note:focus { outline: 2px solid var(--yellow); outline-offset: 1px; }
.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(116px, 1fr));
  gap: 8px;
  padding: 0 18px 18px;
}
.tile-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 2px 8px;
  align-items: center;
  min-height: 58px;
  border: 1px solid #313c4b;
  border-radius: 2px;
  padding: 7px;
  text-align: left;
  color: #f5efd4;
  background: #111720;
}
.tile-card .tile-sprite { grid-row: 1 / 3; }
.tile-card strong { align-self: end; color: var(--yellow); font-size: 11px; }
.tile-card small { align-self: start; min-width: 0; overflow: hidden; color: #a8b7c6; font-size: 9px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.tile-card:hover, .tile-card:focus-visible { border-color: var(--blue); background: #182431; }
.tile-card.selected { border-color: var(--yellow); box-shadow: inset 0 0 0 1px var(--yellow); background: #20251c; }

#editor-dialog {
  width: min(98vw, 1180px);
  max-height: 94vh;
  padding: 0;
  color: var(--ink);
  background: #0d1118;
  border: 2px solid var(--green);
  border-radius: 3px;
  box-shadow: 10px 14px 0 rgba(0,0,0,.45), 0 24px 70px #000;
  font-family: inherit;
  overflow: auto;
}
#editor-dialog::backdrop { background: rgba(2,3,8,.9); }
.editor-header {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px 11px;
  background: rgba(13,17,24,.98);
  border-bottom: 2px solid var(--green);
}
.editor-header h2 { margin: 0 0 4px; color: var(--yellow); font-size: 20px; }
.editor-header p { margin: 0; max-width: 760px; color: #c5cedb; font-size: 11px; line-height: 1.45; }
#editor-close {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border: 1px solid #637084;
  border-radius: 3px;
  color: #f7f0d2;
  background: #19212d;
  font-size: 22px;
  line-height: 1;
}
.editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 7px;
  padding: 12px 16px 8px;
}
.editor-toolbar label { display: grid; gap: 3px; color: #aeb8c7; font-size: 9px; }
.editor-toolbar button, .editor-toolbar select, .editor-toolbar input, .editor-file-button {
  min-height: 34px;
  border: 1px solid #526073;
  border-radius: 2px;
  padding: 7px 9px;
  color: #f7f0d2;
  background: #151c26;
  font: inherit;
  font-size: 10px;
}
.editor-toolbar button:hover, .editor-toolbar button:focus-visible, .editor-file-button:hover { border-color: var(--yellow); background: #233041; }
.editor-toolbar button:disabled { cursor: default; opacity: .35; }
.editor-toolbar .editor-primary { border-color: var(--green); color: #e9ffe4; background: #18301c; }
.editor-toolbar .editor-danger { border-color: #9b443b; color: #ffd8d0; }
.editor-width-field input { width: 76px; }
.editor-file-button { display: inline-flex !important; align-items: center; cursor: pointer; }
.editor-file-button input { display: none; }
.editor-status { min-height: 16px; margin: 0; padding: 0 16px 7px; color: #8fc9e3; font-size: 10px; }
.editor-palette {
  display: flex;
  gap: 6px;
  padding: 4px 16px 11px;
  overflow-x: auto;
  scrollbar-color: #4b5d72 #0b0f15;
}
.editor-tool {
  flex: 0 0 70px;
  display: grid;
  justify-items: center;
  gap: 4px;
  min-height: 66px;
  border: 1px solid #354253;
  border-radius: 2px;
  padding: 6px 4px;
  color: #e6ebf2;
  background: #111720;
  font-size: 9px;
}
.editor-tool:hover, .editor-tool:focus-visible { border-color: var(--blue); background: #182431; }
.editor-tool.selected { border-color: var(--yellow); box-shadow: inset 0 0 0 1px var(--yellow); background: #20251c; }
.editor-tool-icon { display: grid; place-items: center; width: 36px; height: 36px; color: var(--yellow); background: #222b38; font-size: 22px; }
.editor-palette-sprite {
  width: 36px;
  height: 36px;
  background-color: #89919b;
  background-image: url("assets/images/sprites.png");
  background-repeat: no-repeat;
  background-size: 396px 216px;
  background-position: calc(var(--tile-x, 0) * -36px) calc(var(--tile-y, 0) * -36px);
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.editor-tool code { max-width: 62px; overflow: hidden; color: #fff7cf; font: inherit; text-overflow: ellipsis; white-space: nowrap; }
.editor-viewport {
  margin: 0 16px 16px;
  max-width: calc(100% - 32px);
  overflow: auto;
  background: #05070b;
  border: 2px solid #354255;
  box-shadow: inset 0 0 18px #000;
  scrollbar-color: #5a6c81 #0b0f15;
}
#editor-canvas {
  display: block;
  width: auto;
  height: auto;
  max-width: none;
  background: #090d14;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  touch-action: none;
  cursor: crosshair;
}
#editor-dialog.pan-active #editor-canvas { cursor: grab; }
#editor-dialog.pan-active #editor-canvas:active { cursor: grabbing; }

@media (pointer: coarse), (max-width: 760px) {
  body { display: block; }
  .cabinet { padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom)); }
  .masthead { align-items: flex-start; gap: 8px; margin-bottom: 8px; }
  .eyebrow, footer p { display: none; }
  .mobile-controls { display: flex; }
  footer { justify-content: center; padding-top: 8px; }
  nav select { max-width: 112px; }
  #level { max-width: 96px; }
  .message { width: 92%; padding: 12px; font-size: 12px; }
  #hint-toast { top: 5px; max-width: 94%; font-size: 9px; }
  .shop-grid button { padding: 7px 3px; }
}

@media (max-width: 520px) {
  .masthead { display: grid; grid-template-columns: minmax(0, 1fr); padding-bottom: 8px; }
  .masthead > div { min-width: 0; }
  .masthead h1 { font-size: 28px; }
  nav {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) repeat(4, 36px);
    width: 100%;
    gap: 6px;
  }
  nav button, nav select { width: 100%; min-width: 0; padding: 6px; }
  nav select, #level { max-width: none; }
}

@media (max-width: 560px) {
  #tiles-dialog { width: 98vw; max-height: 92vh; }
  .tiles-header { padding: 12px; }
  .tile-inspector { grid-template-columns: 64px minmax(0, 1fr); margin: 10px 12px; padding: 9px; }
  .tile-preview { width: 64px; height: 64px; background-size: 704px 384px; background-position: calc(var(--tile-x, 0) * -64px) calc(var(--tile-y, 0) * -64px); }
  .tile-details { grid-template-columns: 1fr; }
  .tile-details > span { text-align: left; }
  .tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0 12px 14px; gap: 6px; }
  #editor-dialog { width: 99vw; max-height: 96vh; }
  .editor-header { padding: 10px 11px; }
  .editor-header p { font-size: 9px; }
  .editor-toolbar { padding: 9px 10px 6px; gap: 5px; }
  .editor-toolbar button, .editor-toolbar select, .editor-toolbar input, .editor-file-button { min-height: 32px; padding: 6px 7px; }
  .editor-status { padding-inline: 10px; }
  .editor-palette { padding: 3px 10px 9px; }
  .editor-tool { flex-basis: 62px; }
  .editor-viewport { margin: 0 10px 10px; max-width: calc(100% - 20px); }
}

@media (max-height: 560px) and (orientation: landscape) {
  .cabinet { width: min(780px, 100%); padding: 4px; }
  .masthead, footer { display: none; }
  .screen-wrap { width: min(72vw, 640px); margin: auto; }
  .mobile-controls { position: fixed; inset: 50% 8px auto; transform: translateY(-50%); padding: 0; }
  .dpad, .actions { gap: 5px; }
  .mobile-controls button { width: 48px; height: 48px; opacity: .85; }
  .mobile-controls .jump { height: 58px; }
}

@media (prefers-reduced-motion: reduce) {
  button, select { transition: none; }
  .screen-wrap::after { background: rgba(0,0,0,.015); }
}