:root {
  --ink: #8e5f5d;
  --ink-d: #6e4644;
  --cream: #fef2da;
  --cream2: #fdf3de;
  --edge: #c9a29d;
  --rose: #ba8180;
  --rose-d: #845251;
  --red: #e8676b;
  --u: 2px; /* one art pixel in CSS px, set by main.js */
}
html, body {
  margin: 0; height: 100%; overflow: hidden; overscroll-behavior: none;
  background: linear-gradient(#8fcdf2 0%, #bfe38f 40%, #a9d77f 100%);
  touch-action: none; user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
}
#wrap { position: fixed; inset: 0; }
canvas { display: block; image-rendering: pixelated; }
canvas.soft { image-rendering: auto; }
#ui { position: absolute; pointer-events: none; color: var(--ink); }
.layer {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; pointer-events: auto;
}
.layer.pass { pointer-events: none; }
.layer.pass > * { pointer-events: auto; }
.modal-bg { position: fixed; background: rgba(94, 58, 60, .38); justify-content: center; animation: fade .18s ease-out; }
@keyframes fade { from { opacity: 0 } }
@keyframes pop { from { transform: scale(.85); opacity: 0 } }
.panel {
  background: var(--cream);
  border: calc(var(--u) * 1.2) solid var(--ink);
  border-radius: calc(var(--u) * 7);
  box-shadow: inset 0 0 0 calc(var(--u) * 2) #f3dfc0, 0 calc(var(--u) * 2.5) 0 rgba(94, 58, 60, .3);
  padding: calc(var(--u) * 9) calc(var(--u) * 9) calc(var(--u) * 8);
  width: calc(var(--u) * 172); box-sizing: border-box;
  text-align: center; animation: pop .22s ease-out;
}
.panel h2 { margin: 0 0 calc(var(--u) * 5); font-size: calc(var(--u) * 13); color: var(--ink); }
.panel p { margin: calc(var(--u) * 3) 0; font-size: calc(var(--u) * 7.2); line-height: 1.55; }
.panel .rules { text-align: left; font-size: calc(var(--u) * 6.6); max-height: calc(var(--u) * 300); overflow: auto; }
.panel .rules b { color: var(--rose-d); }
.btn {
  display: block; width: 100%; box-sizing: border-box;
  margin: calc(var(--u) * 4) 0 0; padding: calc(var(--u) * 4.5) 0;
  border: calc(var(--u) * 1) solid var(--ink); border-radius: calc(var(--u) * 7);
  background: #fff7e8; color: var(--ink); font: inherit; font-weight: 700;
  font-size: calc(var(--u) * 8.5);
  box-shadow: inset 0 calc(var(--u) * -2) 0 #efd9bd, 0 calc(var(--u) * 1.5) 0 rgba(94, 58, 60, .3);
  cursor: pointer;
}
.btn:active { transform: translateY(calc(var(--u) * 1)); box-shadow: inset 0 calc(var(--u) * -1) 0 #efd9bd; }
.btn.primary { background: var(--rose); color: #fff; border-color: var(--rose-d); box-shadow: inset 0 calc(var(--u) * -2) 0 #a06b6a, 0 calc(var(--u) * 1.5) 0 rgba(94, 58, 60, .3); }
.btn[disabled] { opacity: .45; cursor: default; }
.btn small { font-weight: 400; font-size: .75em; opacity: .9; margin-left: .4em; }
.btn:focus-visible { outline: calc(var(--u) * 1.2) solid #4f8fd8; outline-offset: calc(var(--u) * 1); }
.row { display: flex; gap: calc(var(--u) * 4); }
.row .btn { flex: 1; }
img.pix { image-rendering: pixelated; }
.res-bar { display: flex; gap: calc(var(--u) * 3); margin-top: calc(var(--u) * 10); }
.res {
  display: flex; align-items: center; gap: calc(var(--u) * 2);
  background: var(--cream); border: calc(var(--u) * 1) solid var(--ink);
  border-radius: calc(var(--u) * 6); padding: calc(var(--u) * 1.5) calc(var(--u) * 4) calc(var(--u) * 1.5) calc(var(--u) * 2);
  font-weight: 700; font-size: calc(var(--u) * 7.5); min-width: calc(var(--u) * 44); box-sizing: border-box;
}
.res img { height: calc(var(--u) * 13); width: calc(var(--u) * 16); object-fit: contain; }
.res small { font-weight: 400; font-size: calc(var(--u) * 5.5); margin-left: calc(var(--u) * 1); }
.logo { width: calc(var(--u) * 181); margin-top: calc(var(--u) * 26); filter: drop-shadow(0 calc(var(--u) * 2) 0 rgba(94, 58, 60, .25)); }
.menu-btns { width: calc(var(--u) * 140); margin-top: calc(var(--u) * 22); }
.menu-btns .btn.big { font-size: calc(var(--u) * 11); padding: calc(var(--u) * 6) 0; }
.lvl { margin-top: calc(var(--u) * 10); font-weight: 700; font-size: calc(var(--u) * 9); color: var(--ink); background: rgba(254, 242, 218, .85); padding: calc(var(--u) * 1.5) calc(var(--u) * 8); border-radius: calc(var(--u) * 6); }
.shop-row { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 3); margin-top: calc(var(--u) * 4); font-size: calc(var(--u) * 7); font-weight: 700; }
.shop-row .what { display: flex; align-items: center; gap: calc(var(--u) * 1.5); }
.shop-row img { height: calc(var(--u) * 11); }
.shop-row .btn { width: auto; margin: 0; padding: calc(var(--u) * 2.5) calc(var(--u) * 6); font-size: calc(var(--u) * 7); }
.reward { display: flex; justify-content: center; gap: calc(var(--u) * 8); font-weight: 700; font-size: calc(var(--u) * 9); margin: calc(var(--u) * 5) 0; }
.reward span { display: flex; align-items: center; gap: calc(var(--u) * 2); }
.reward img { height: calc(var(--u) * 13); }
.back {
  position: absolute; left: calc(var(--u) * 6); top: calc(var(--u) * 6);
  width: calc(var(--u) * 20); height: calc(var(--u) * 20); padding: 0; margin: 0;
  font-size: calc(var(--u) * 10); line-height: 1; border-radius: calc(var(--u) * 6);
}
.hint {
  position: absolute; top: calc(var(--u) * 92); left: 50%; transform: translateX(-50%);
  background: var(--rose-d); color: #fff; font-weight: 700; white-space: nowrap;
  font-size: calc(var(--u) * 6.5); padding: calc(var(--u) * 2) calc(var(--u) * 7); border-radius: calc(var(--u) * 6);
  pointer-events: none; z-index: 2;
}
.toast {
  position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%);
  background: rgba(110, 70, 68, .92); color: #fff; font-weight: 700;
  font-size: calc(var(--u) * 7.5); padding: calc(var(--u) * 4) calc(var(--u) * 9);
  border-radius: calc(var(--u) * 6); pointer-events: none; z-index: 5;
  animation: toast 1.6s ease-out forwards; white-space: nowrap;
}
@keyframes toast { 0% { opacity: 0; transform: translate(-50%, -30%) } 12% { opacity: 1; transform: translate(-50%, -50%) } 80% { opacity: 1 } 100% { opacity: 0 } }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; } }