* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #140d1c;
  --ink: #f3e9ff;
  --accent: #ffce4a;
  --accent2: #ff5d7e;
  --panel: #241730;
  --line: rgba(255, 206, 74, .35);
}

html, body {
  height: 100%;
  background:
    radial-gradient(120% 80% at 50% -10%, #2a1838 0%, #140d1c 60%, #0c0712 100%);
  color: var(--ink);
  font-family: "Trebuchet MS", system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}

.topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  height: 48px;
}
.topbar .back {
  color: #c9b6e8;
  text-decoration: none;
  font-size: 14px;
  opacity: .85;
}
.topbar .back:hover { opacity: 1; }
.topbar .brand { font-weight: 800; letter-spacing: .5px; }

.stage {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  height: calc(100% - 48px - 30px);
  padding: 6px;
}

.frame {
  position: relative;
  height: 100%;
  aspect-ratio: 360 / 640;
  max-width: 100%;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 0 0 3px #3a2550, 0 18px 50px rgba(0, 0, 0, .6);
  background: #0c0712;
}

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

/* ---------- 오버레이 ---------- */
.overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(10, 6, 16, .82);
  backdrop-filter: blur(3px);
}
.overlay.hidden { display: none; }

.panel {
  width: 100%;
  max-width: 320px;
  background: linear-gradient(180deg, #2a1a3a, #1c1228);
  border: 2px solid var(--line);
  border-radius: 14px;
  padding: 18px 16px;
  text-align: center;
}

.panel h1 { font-size: 30px; margin-bottom: 8px; text-shadow: 0 2px 0 #803017; }
.panel h2 { font-size: 22px; margin-bottom: 8px; }
.tag { font-size: 13px; line-height: 1.5; color: #cdbbe6; margin-bottom: 12px; }
.tag b { color: var(--accent); }

.how {
  list-style: none;
  text-align: left;
  font-size: 12px;
  line-height: 1.45;
  color: #d7c9ec;
  margin: 0 0 14px;
  display: grid;
  gap: 6px;
}
.how b { color: var(--accent); }

.btn {
  cursor: pointer;
  border: none;
  border-radius: 10px;
  font-weight: 800;
  font-family: inherit;
  color: #2a1606;
  background: linear-gradient(180deg, #ffd75a, #ff9e2c);
  box-shadow: 0 4px 0 #b85d12;
  transition: transform .05s, box-shadow .05s;
}
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #b85d12; }
.btn.big { width: 100%; padding: 13px; font-size: 17px; margin-top: 4px; }

.best { font-size: 12px; color: #a892c4; margin-top: 12px; }
.best span { color: var(--accent); font-weight: 700; }

.stats {
  display: flex;
  justify-content: center;
  gap: 22px;
  font-size: 14px;
  margin: 10px 0;
  color: #cdbbe6;
}
.stats b { color: var(--accent); font-size: 20px; display: block; }

/* ---------- 상점 ---------- */
.shopgrid {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}
.shopitem {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 206, 74, .22);
  border-radius: 10px;
  padding: 8px 10px;
}
.shopitem .ic { font-size: 22px; width: 26px; text-align: center; }
.shopitem .meta { flex: 1; min-width: 0; }
.shopitem .meta .nm { font-weight: 700; font-size: 13px; }
.shopitem .meta .ds { font-size: 11px; color: #b6a4d2; line-height: 1.3; }
.shopitem .lv { font-size: 10px; color: #8d7aab; }
.shopitem .buy {
  cursor: pointer;
  border: none;
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 800;
  font-family: inherit;
  color: #2a1606;
  background: linear-gradient(180deg, #ffd75a, #ff9e2c);
  white-space: nowrap;
}
.shopitem .buy:disabled {
  filter: grayscale(.8) brightness(.7);
  cursor: not-allowed;
  color: #6b5a3a;
}
.shopitem.max .buy { background: #3a2b18; color: #9a8a6a; }

.foot {
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: #6f5d8a;
}