:root {
  color-scheme: dark;
  background: #060409;
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --module-red: #c084fc;
  --module-red-fill: rgba(192, 132, 252, .2);
  --module-red-shadow: rgba(192, 132, 252, .2);
}

* { box-sizing: border-box; }

html, body, #app {
  width: 100%;
  min-height: 100%;
  margin: 0;
}

body {
  min-height: 100dvh;
  background: #060409;
  color: #f4f4f5;
  overflow-x: hidden;
}

button, input { font: inherit; }
button { cursor: pointer; }

.loading {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  color: #b478ff;
  font: 600 16px ui-monospace, SFMono-Regular, Menlo, monospace;
}

.game-shell {
  min-height: 100dvh;
  background: #060409;
  overflow: visible;
  user-select: none;
  -webkit-user-select: none;
}

.topbar {
  min-height: 57px;
  padding: 10px 16px;
  border-bottom: 1px solid #2c2244;
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.back-button, .reset-button {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid #6d28d9;
  background: rgba(76, 29, 149, .14);
  color: #b478ff;
}

.back-button {
  width: 24px;
  height: 24px;
  border-radius: 5px;
  font-size: 17px;
  line-height: 1;
}

.reset-button {
  width: 29px;
  height: 29px;
  border-color: #3f3f46;
  border-radius: 6px;
  color: #a1a1aa;
  font-size: 16px;
}

.brand {
  min-width: 55px;
  margin-right: auto;
}

.brand-title {
  color: #b478ff;
  font: 800 13px ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: -.08em;
}

.brand-sub {
  margin-top: 1px;
  color: #52525b;
  font: 700 6px ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .12em;
}

.stats {
  display: flex;
  align-items: center;
  gap: 7px;
}

.stat {
  min-width: 16px;
  text-align: center;
}

.stat-label {
  color: #52525b;
  font: 700 5px ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .08em;
}

.stat-value {
  margin-top: 2px;
  color: #f4f4f5;
  font: 800 10px ui-monospace, SFMono-Regular, Menlo, monospace;
}

.stat-value.done, .stat-value.status { color: #b478ff; }

.divider {
  width: 1px;
  height: 18px;
  background: #2c2244;
}

.top-action {
  min-height: 29px;
  padding: 0 8px;
  border: 1px solid #047857;
  background: rgba(76, 29, 149, .12);
  color: #b478ff;
  font: 700 8px ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .03em;
}

.top-action.order { border-color: #6d28d9; }

.board-section {
  padding: 17px 8px 0;
}

.board-frame {
  width: calc(100vw - 16px);
  min-height: 422px;
  border: 1px solid #2c2244;
  border-radius: 15px;
  background: #060409;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 15px 10px;
}

.board {
  --cell: 21px;
  --gap: 2px;
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--cols), var(--cell));
  grid-template-rows: repeat(var(--rows), var(--cell));
  gap: var(--gap);
  width: max-content;
  height: max-content;
}

.target-cell {
  width: var(--cell);
  height: var(--cell);
  border: 1px solid #4a4c53;
  border-radius: 2px;
  background: linear-gradient(145deg, #32343a 0%, #26282d 100%);
  box-shadow: inset 0 1px rgba(255,255,255,.05), inset 0 -1px rgba(0,0,0,.25);
  position: relative;
}

.placed-block, .drop-preview {
  position: relative;
  z-index: 3;
  min-width: 0;
  min-height: 0;
  border: 1px solid var(--module-red);
  border-radius: 2px;
  background: transparent;
  box-shadow: 0 0 0 1px rgba(192, 132, 252, .08), inset 0 0 5px var(--module-red-shadow);
  overflow: hidden;
  isolation: isolate;
}

.item-grid-layer, .item-image-layer {
  position: absolute;
  inset: 0;
}

.item-grid-layer {
  z-index: 0;
  display: grid;
  grid-template-columns: repeat(var(--span-cols), 1fr);
  grid-template-rows: repeat(var(--span-rows), 1fr);
  gap: var(--grid-gap, var(--gap, 2px));
  pointer-events: none;
}

.item-grid-cell {
  min-width: 0;
  min-height: 0;
  border: 1px solid var(--module-red);
  border-radius: 1px;
  background: transparent;
}

.item-image-layer {
  z-index: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.item-image-layer img {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 0;
  height: 0;
  min-width: 0;
  min-height: 0;
  object-fit: contain;
  transform-origin: center;
  pointer-events: none;
}

.placed-block { cursor: grab; touch-action: none; }
.placed-block:active { cursor: grabbing; }
.placed-block.is-moving { opacity: .24; pointer-events: none; }
.drop-preview { opacity: .52; pointer-events: none; }
.drop-preview.invalid { border-color: #f43f5e; background: rgba(244, 63, 94, .18); }

.resource-section {
  padding: 24px 8px 30px;
}

.resource-heading {
  margin: 0 0 12px;
  color: #a1a1aa;
  font: 800 11px ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .08em;
}

.resource-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.resource-scroll {
  height: clamp(330px, 48dvh, 480px);
  overflow-y: scroll;
  overscroll-behavior: contain;
  padding: 0 12px;
  scrollbar-color: #4c2d80 #171126;
  scrollbar-gutter: stable both-edges;
  scrollbar-width: thin;
}

.resource-scroll::-webkit-scrollbar { width: 8px; }
.resource-scroll::-webkit-scrollbar-track { border-radius: 8px; background: #171126; }
.resource-scroll::-webkit-scrollbar-thumb { border: 2px solid #171126; border-radius: 8px; background: #4c2d80; }
.resource-scroll::-webkit-scrollbar-thumb:hover { background: var(--module-red); }

.resource-card {
  position: relative;
  min-width: 0;
  height: 136px;
  overflow: hidden;
  border: 1px solid #2c2244;
  border-radius: 9px;
  background: #0b0714;
  touch-action: none;
}

.resource-card:active, .resource-card.selected { border-color: var(--module-red); }
.resource-card.selected { box-shadow: 0 0 0 1px rgba(192, 132, 252, .2), 0 8px 18px rgba(192, 132, 252, .12); }

.resource-visual {
  position: absolute;
  inset: 8px 8px 43px;
  display: grid;
  place-items: center;
  overflow: hidden;
  pointer-events: none;
}

.resource-footprint {
  --grid-gap: 2px;
  position: relative;
  flex: 0 0 auto;
  overflow: hidden;
  isolation: isolate;
}

.resource-name {
  position: absolute;
  right: 30px;
  bottom: 22px;
  left: 9px;
  overflow: hidden;
  color: #a1a1aa;
  font-size: 9px;
  line-height: 13px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.resource-size {
  position: absolute;
  right: 31px;
  bottom: 8px;
  left: 9px;
  overflow: hidden;
  color: #71717a;
  font: 800 8px ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .05em;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rotate-button {
  position: absolute;
  right: 8px;
  bottom: 7px;
  width: 17px;
  height: 17px;
  border: 1px solid #3f3f46;
  border-radius: 50%;
  background: rgba(24, 24, 27, .9);
  color: #71717a;
  font-size: 12px;
  line-height: 13px;
  padding: 0;
}

.empty-resources {
  min-height: 100px;
  display: grid;
  place-items: center;
  color: #71717a;
  font: 700 11px ui-monospace, SFMono-Regular, Menlo, monospace;
}

.toast {
  position: fixed;
  top: 70px;
  left: 50%;
  z-index: 20;
  max-width: calc(100vw - 32px);
  transform: translateX(-50%);
  padding: 8px 12px;
  border: 1px solid rgba(52, 211, 153, .55);
  border-radius: 5px;
  background: rgba(76, 29, 149, .92);
  color: #ecfdf5;
  font: 700 10px ui-monospace, SFMono-Regular, Menlo, monospace;
  text-align: center;
}

.scrim {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(0, 0, 0, .8);
}

.celebration {
  position: fixed;
  inset: 0;
  z-index: 40;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}

.celebration-particle {
  position: absolute;
  top: -14%;
  left: var(--fall-x);
  width: var(--particle-size);
  height: var(--particle-size);
  opacity: 0;
  animation: original-fullscreen-fall var(--fall-duration) cubic-bezier(.18, .67, .29, 1) var(--fall-delay) both;
}

.celebration-particle.shard {
  background: #facc15;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  box-shadow: 0 0 14px rgba(250, 204, 21, .55);
}

.celebration-particle.dot {
  border-radius: 50%;
  background: #fb7185;
  box-shadow: 0 0 13px rgba(251, 113, 133, .52);
}

.celebration-particle.ring {
  border: max(1px, calc(var(--particle-size) / 5)) solid #5eead4;
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(216, 180, 254, .48);
}

@keyframes original-fullscreen-fall {
  0% { opacity: 0; transform: translate3d(-6vw, -9vh, 0) rotate(0deg) scale(.72); }
  12% { opacity: 1; }
  78% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(calc(var(--particle-turn) * 13vw), 118vh, 0) rotate(calc(var(--particle-turn) * 620deg)) scale(1.12); }
}

@media (prefers-reduced-motion: reduce) {
  .celebration-particle { animation: none; }
}

.dialog {
  width: min(100%, 520px);
  max-height: min(82dvh, 680px);
  overflow: auto;
  border: 1px solid rgba(52, 211, 153, .42);
  border-radius: 8px;
  background: #060409;
  box-shadow: 0 18px 50px rgba(0,0,0,.68);
  padding: 24px;
}

.dialog h2 {
  margin: 0 0 8px;
  color: #b478ff;
  font: 800 19px ui-monospace, SFMono-Regular, Menlo, monospace;
  text-align: center;
}

.dialog p {
  margin: 0 0 20px;
  color: #a1a1aa;
  font-size: 12px;
  text-align: center;
}

.level-list { display: grid; gap: 9px; }

.level-option {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px;
  border: 1px solid #2c2244;
  border-radius: 6px;
  background: #0b0714;
  color: #e4e4e7;
  text-align: left;
}

.level-option.active { border-color: #b478ff; }
.level-index { color: #b478ff; font: 800 12px ui-monospace, monospace; }
.level-copy strong { display: block; font-size: 12px; }
.level-copy span { color: #71717a; font-size: 10px; }

.dialog-actions { display: grid; gap: 9px; margin-top: 20px; }

.dialog-action {
  min-height: 40px;
  border: 1px solid #059669;
  border-radius: 5px;
  background: rgba(5, 150, 105, .15);
  color: #b478ff;
  font: 800 11px ui-monospace, monospace;
}

.dialog-action.secondary { border-color: #3f3f46; background: #1b1430; color: #d4d4d8; }

.order-form { display: grid; gap: 11px; }
.order-form input { min-height: 42px; border: 1px solid #3f3f46; border-radius: 5px; background: #1b1430; color: white; padding: 0 12px; }
.order-form small { color: #71717a; font-size: 10px; line-height: 1.6; }

@media (min-width: 640px) {
  .topbar { padding-inline: 24px; }
  .brand { min-width: 100px; }
  .brand-title { font-size: 16px; }
  .stats { gap: 14px; }
  .stat-label { font-size: 7px; }
  .stat-value { font-size: 13px; }
  .top-action { padding-inline: 14px; font-size: 10px; }
  .board-section { width: min(92vw, 860px); margin: 0 auto; padding: 25px 0 0; }
  .board-frame { width: 100%; min-height: 600px; padding: 28px; }
  .board { --cell: 32px; --gap: 5px; }
  .resource-section { width: min(92vw, 860px); margin: 0 auto; padding-inline: 0; }
  .resource-scroll { height: min(520px, 48dvh); }
  .resource-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 11px; }
  .resource-card { height: 158px; }
  .resource-name { font-size: 10px; }
}