:root {
  --ink: #17131c;
  --paper: #fff6dc;
  --line: #f8f1d2;
  --gold: #f7c948;
  --green: #5ec66b;
  --red: #ef5d60;
  --blue: #4aa8ff;
  --panel: #211b2d;
  --panel-2: #15121d;
  --glass: #1c1726dd;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--paper);
  font-family: "Courier New", monospace;
  background:
    radial-gradient(circle at 16% 10%, #314d64 0 16%, transparent 34%),
    radial-gradient(circle at 82% 18%, #5d3c2a 0 12%, transparent 30%),
    linear-gradient(135deg, #10131a, #232537 55%, #120f14);
  overflow: hidden;
}

button, input { font: inherit; }

.shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  height: 100vh;
  padding: 14px;
}

.game-card, .modal-card {
  border: 2px solid #f8f1d299;
  border-radius: 18px;
  box-shadow: 0 0 0 3px #09070d, 0 22px 70px #000a, inset 0 1px 0 #ffffff18;
  background: linear-gradient(180deg, #2a2234, #17131d);
}

.game-card {
  --game-base-width: min(calc(100vw - 44px), calc((100vh - 36px) * 1.333));
  --game-zoom: 1;
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  width: 100%;
  overflow: hidden;
  padding: 8px;
}

canvas {
  width: var(--game-base-width);
  max-width: none;
  max-height: none;
  transform: scale(var(--game-zoom));
  transform-origin: center;
  image-rendering: pixelated;
  background: #15151a;
}

.world-labels {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--game-base-width);
  aspect-ratio: 4 / 3;
  max-height: none;
  transform: translate(-50%, -50%) scale(var(--game-zoom));
  transform-origin: center;
  pointer-events: none;
}

.world-label {
  position: absolute;
  transform: translate(-50%, -100%);
  padding: 3px 8px;
  border: 2px solid #21192a;
  border-radius: 3px;
  color: #21192a;
  background: #fff8d7;
  font-family: "Courier New", monospace;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 2px 0 #21192a;
  text-shadow: none;
  animation: label-pop .24s ease-out;
}

.world-label.shelf-label {
  color: #fff8d7;
  background: #21192a;
  border-color: #fff8d7;
}

.world-label.bubble-label {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  min-height: 22px;
}

.world-label.bubble-label.warn {
  color: #7c1720;
  background: #fff0e1;
  border-color: #ef5d60;
  animation: label-pop .24s ease-out, tiny-shake .22s ease-out;
}

.hud {
  position: absolute;
  inset: 12px 12px auto 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  pointer-events: none;
  z-index: 6;
}

.tag {
  padding: 8px 12px;
  border: 1px solid #f8f1d255;
  border-radius: 999px;
  color: var(--paper);
  background: linear-gradient(180deg, #272033ee, #14111cee);
  box-shadow: inset 0 1px 0 #ffffff18, 0 8px 24px #0007;
  text-shadow: 0 2px #000;
  letter-spacing: .02em;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.tag span {
  color: #9de7ff;
  font-size: 11px;
  text-transform: uppercase;
  margin-right: 5px;
}

.tag.open {
  border-color: #5ec66b99;
  animation: soft-green-pulse 1.8s ease-in-out infinite;
}
.tag.closed { border-color: #ef5d6099; }
.tag.closing {
  border-color: #f7c94899;
  animation: soft-gold-pulse 1.8s ease-in-out infinite;
}

.touch {
  position: absolute;
  inset: auto 12px 12px 12px;
  display: none;
  justify-content: space-between;
  pointer-events: none;
}

.pad {
  display: grid;
  grid-template-columns: repeat(3, 48px);
  grid-template-rows: repeat(3, 48px);
  gap: 6px;
  pointer-events: auto;
}

.touch button, .pixel-btn {
  border: 1px solid #f8f1d277;
  border-radius: 12px;
  color: var(--paper);
  background: linear-gradient(180deg, #352b48, #211a2e);
  box-shadow: inset 0 1px 0 #ffffff20, 0 8px 18px #0007;
  cursor: pointer;
}

.touch button:active, .pixel-btn:active { transform: translateY(2px) scale(.98); }
.touch button:not(:disabled):hover, .pixel-btn:not(:disabled):hover {
  border-color: #f7c948aa;
  filter: brightness(1.08);
  transform: translateY(-1px);
}
.pad .up { grid-column: 2; }
.pad .left { grid-column: 1; grid-row: 2; }
.pad .right { grid-column: 3; grid-row: 2; }
.pad .down { grid-column: 2; grid-row: 3; }
.act { align-self: end; width: 86px; height: 86px; pointer-events: auto; }

.toast {
  position: absolute;
  right: 18px;
  bottom: 18px;
  display: grid;
  gap: 8px;
  width: min(320px, calc(100% - 36px));
  pointer-events: none;
  z-index: 8;
}

.snack {
  padding: 10px 12px;
  border: 1px solid #f8f1d277;
  border-radius: 14px;
  background: linear-gradient(180deg, #211b2fee, #121019ee);
  box-shadow: inset 0 1px 0 #ffffff18, 0 12px 28px #0009;
  animation: snack-in .18s ease-out;
}

.snack.success {
  border-color: var(--green);
  animation: snack-in .18s ease-out, success-pop .46s ease-out;
}
.snack.warn {
  border-color: var(--gold);
  animation: snack-in .18s ease-out, tiny-shake .22s ease-out;
}
.snack.error {
  border-color: var(--red);
  animation: snack-in .18s ease-out, tiny-shake .22s ease-out;
}

.order-flash {
  position: absolute;
  left: 50%;
  top: 22%;
  transform: translate(-50%, -50%);
  padding: 14px 22px;
  border: 2px solid var(--gold);
  border-radius: 14px;
  color: #241b10;
  background: linear-gradient(180deg, #fff0a8, #f7c948);
  font-weight: 900;
  box-shadow: 0 12px 32px #0009, inset 0 1px 0 #fff8;
  animation: order-pop 1.2s ease-out forwards;
  pointer-events: none;
  z-index: 8;
}

@keyframes order-pop {
  0% { opacity: 0; transform: translate(-50%, -35%) scale(.8); }
  15% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
  75% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -70%) scale(.96); }
}

@keyframes snack-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes success-pop {
  0% { box-shadow: inset 0 1px 0 #ffffff18, 0 12px 28px #0009; transform: translateY(0) scale(1); }
  45% { box-shadow: inset 0 1px 0 #ffffff18, 0 0 0 4px #5ec66b33, 0 16px 34px #000a; transform: translateY(-2px) scale(1.02); }
  100% { box-shadow: inset 0 1px 0 #ffffff18, 0 12px 28px #0009; transform: translateY(0) scale(1); }
}

@keyframes tiny-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-2px); }
  55% { transform: translateX(2px); }
  80% { transform: translateX(-1px); }
}

@keyframes label-pop {
  from { opacity: 0; transform: translate(-50%, -85%) scale(.9); }
  to { opacity: 1; transform: translate(-50%, -100%) scale(1); }
}

@keyframes soft-green-pulse {
  50% { box-shadow: inset 0 1px 0 #ffffff18, 0 0 0 3px #5ec66b22, 0 8px 24px #0007; }
}

@keyframes soft-gold-pulse {
  50% { box-shadow: inset 0 1px 0 #ffffff18, 0 0 0 3px #f7c94822, 0 8px 24px #0007; }
}

.modal {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  background: radial-gradient(circle at 50% 30%, #27334966, #000b 62%);
  backdrop-filter: blur(3px);
}

.hidden { display: none; }

.modal-card {
  width: min(780px, 100%);
  max-height: min(720px, 92vh);
  overflow: auto;
  padding: 16px;
  background:
    linear-gradient(180deg, #2b2440, #17131d 72%),
    var(--panel);
  animation: modal-pop .16s ease-out;
}

.modal-card h1 {
  margin: 0 0 12px;
  color: var(--gold);
  font-size: 28px;
  text-shadow: 0 3px #000;
}

.grid-list {
  display: grid;
  gap: 8px;
}

.row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid #f8f1d222;
  border-radius: 12px;
  background: linear-gradient(180deg, #30283e, #211b2b);
}

.controls {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding: 8px;
  border: 1px solid #f8f1d233;
  border-radius: 14px;
  background: #120f18aa;
}

.terminal-hint,
.terminal-intro p,
.terminal-note {
  margin: 4px 0 0;
  color: #d8d0b8;
  line-height: 1.35;
}

.terminal-card-wrap .controls {
  margin-bottom: 12px;
}

.terminal-grid {
  gap: 10px;
}

.terminal-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid #f8f1d233;
  border-radius: 14px;
  background: linear-gradient(180deg, #30283e, #211b2b);
  transition: border-color .16s ease, transform .16s ease, filter .16s ease;
}

.terminal-card:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}
.terminal-card.warn { border-color: #f7c94899; }
.terminal-card.locked { opacity: .76; }
.terminal-card.owned {
  border-color: #5ec66b99;
  animation: success-pop .46s ease-out;
}

.terminal-card h3 {
  margin: 0 0 8px;
  color: #9de7ff;
  font-size: 16px;
}

.terminal-card-main {
  min-width: 0;
}

.terminal-actions {
  display: flex;
  justify-content: flex-end;
}

.price-actions {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.menu-stack {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.quick-help {
  display: grid;
  gap: 6px;
  margin: 12px 0;
  padding: 12px;
  border: 1px solid #f8f1d233;
  border-radius: 14px;
  background: #120f18aa;
  text-align: left;
}

.quick-help p { margin: 0; }

.settings-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin: 12px 0;
  padding: 12px;
  border: 1px solid #f8f1d233;
  border-radius: 14px;
  background: #120f18aa;
  text-align: left;
}

.settings-actions {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.settings-value {
  min-width: 52px;
  text-align: center;
  color: var(--gold);
  font-weight: 900;
}

.title-card {
  width: min(560px, 100%);
  text-align: center;
}

.pixel-btn {
  min-height: 38px;
  padding: 8px 12px;
  transition: transform .08s, background .12s, border-color .12s, filter .12s;
}

.pixel-btn:focus {
  outline: none;
  border-color: var(--gold);
  background: linear-gradient(180deg, #4c3e64, #302640);
  box-shadow: inset 0 1px 0 #ffffff20, 0 0 0 3px #f7c94855, 0 12px 24px #0008;
}

.pixel-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.good { color: var(--green); }
.bad { color: var(--red); }
.gold { color: var(--gold); }

@keyframes modal-pop {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

@media (max-width: 900px) {
  body { overflow: auto; }
  .shell {
    height: auto;
    min-height: 100vh;
    padding: 8px;
  }
  .touch { display: flex; }
  canvas {
    width: 100%;
  }
  .world-labels {
    width: 100%;
  }
  .toast { bottom: 108px; }
  .terminal-card {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .terminal-actions,
  .price-actions { justify-content: stretch; }
  .terminal-actions .pixel-btn,
  .price-actions .pixel-btn { flex: 1; }
}