:root {
  --panel: #c8322f;
  --panel-dark: #9d1f1f;
  --accent: #ffd75e;
  --cream: #ffeedd;
  --cream-deep: #f6dcc4;
  --ink: #5a2a1e;
  --font: ui-rounded, "Baloo 2", "Chalkboard SE", "Trebuchet MS", system-ui, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: #171021;
  font-family: var(--font);
  color: #fff;
  user-select: none;
  touch-action: manipulation;
}

#stage { position: fixed; inset: 0; }
#board { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* ------------------------------------------------------------------ panels */
.hud { position: absolute; z-index: 5; display: flex; flex-direction: column; align-items: center; }

.hud-left { left: clamp(8px, 1.6vw, 26px); top: 50%; transform: translateY(-50%); gap: 0; }
.hud-right { right: clamp(8px, 1.6vw, 26px); top: 50%; transform: translateY(-50%); }

.panel-body {
  background: linear-gradient(180deg, var(--panel) 0%, var(--panel-dark) 100%);
  border-radius: 999px;
  padding: clamp(8px, 1vw, 14px) clamp(6px, 0.7vw, 10px);
  box-shadow: 0 10px 26px rgba(20, 8, 40, 0.45), inset 0 2px 0 rgba(255, 255, 255, 0.22);
  border: 2px solid rgba(255, 255, 255, 0.18);
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(6px, 0.7vw, 11px);
}

.avatar {
  width: clamp(54px, 6vw, 92px); height: clamp(54px, 6vw, 92px);
  border-radius: 50%;
  background: radial-gradient(circle at 40% 30%, #7fb6e8, #3f6fbe);
  border: clamp(4px, 0.5vw, 7px) solid var(--panel);
  box-shadow: 0 6px 16px rgba(20, 8, 40, 0.45), inset 0 0 0 2px rgba(255, 255, 255, 0.3);
  overflow: hidden; display: grid; place-items: center;
  margin-bottom: -8px; z-index: 2;
}
.avatar img { width: 112%; height: 112%; object-fit: cover; }

.goal-list {
  background: linear-gradient(180deg, var(--cream) 0%, var(--cream-deep) 100%);
  border-radius: clamp(14px, 1.6vw, 24px);
  padding: clamp(8px, 0.9vw, 14px) clamp(5px, 0.6vw, 9px);
  display: flex; flex-direction: column; gap: clamp(6px, 0.8vw, 12px);
  box-shadow: inset 0 -3px 0 rgba(150, 90, 60, 0.18);
  min-width: clamp(52px, 5.4vw, 82px);
}

.goal {
  position: relative; display: grid; place-items: center;
  width: clamp(40px, 4.4vw, 66px); height: clamp(40px, 4.4vw, 66px);
}
.goal img { width: 84%; height: 84%; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(90, 42, 30, 0.35)); }
.goal .count {
  position: absolute; right: -2px; bottom: -4px;
  font-size: clamp(13px, 1.4vw, 21px); font-weight: 800; color: #fff;
  -webkit-text-stroke: clamp(2px, 0.25vw, 4px) var(--ink); paint-order: stroke fill;
}
.goal.done .count { display: none; }
.goal .tick {
  position: absolute; right: -6px; bottom: -6px; width: 58%; height: 58%; display: none;
}
.goal.done .tick { display: block; }
.goal.bump { animation: bump 0.32s ease-out; }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.22); } 100% { transform: scale(1); } }

.moves-chip {
  display: flex; align-items: center; gap: 4px;
  font-size: clamp(22px, 2.6vw, 40px); font-weight: 800; color: #fff;
  -webkit-text-stroke: clamp(3px, 0.32vw, 5px) var(--panel-dark); paint-order: stroke fill;
  filter: drop-shadow(0 3px 4px rgba(20, 8, 40, 0.5));
}
.moves-chip.low { color: #ffd0d0; animation: pulse 0.9s infinite; }
@keyframes pulse { 50% { transform: scale(1.1); } }
.moves-chip svg { width: clamp(16px, 1.7vw, 26px); height: clamp(16px, 1.7vw, 26px); }

.luck-chip {
  margin-top: 8px; padding: 4px 12px; border-radius: 999px;
  background: rgba(24, 12, 40, 0.62); border: 1.5px solid rgba(255, 255, 255, 0.28);
  font-size: clamp(10px, 1vw, 14px); font-weight: 700; letter-spacing: 0.4px;
  display: flex; align-items: center; gap: 6px; white-space: nowrap;
}
.luck-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }

/* -------------------------------------------------------------------- rail */
.tool {
  position: relative; border: 0; padding: 0; cursor: pointer;
  width: clamp(42px, 4.6vw, 70px); height: clamp(42px, 4.6vw, 70px);
  border-radius: 50%; background: radial-gradient(circle at 38% 28%, #8fd9fb, #3aa2dd);
  box-shadow: 0 5px 0 #1f78ab, 0 9px 18px rgba(20, 8, 40, 0.4), inset 0 0 0 3px rgba(255, 255, 255, 0.55);
  display: grid; place-items: center; transition: transform 0.09s, box-shadow 0.09s;
}
.tool:active { transform: translateY(3px); box-shadow: 0 2px 0 #1f78ab, 0 5px 10px rgba(20, 8, 40, 0.4), inset 0 0 0 3px rgba(255, 255, 255, 0.55); }
.tool svg { width: 62%; height: 62%; filter: drop-shadow(0 2px 2px rgba(10, 40, 70, 0.4)); }
.tool.armed { background: radial-gradient(circle at 38% 28%, #ffe89a, #f2a93c); box-shadow: 0 5px 0 #b8741b, 0 0 22px #ffd35e, inset 0 0 0 3px rgba(255, 255, 255, 0.7); }
.tool[disabled] { filter: grayscale(0.55) brightness(0.8); cursor: default; }
.tool .badge {
  position: absolute; right: -3px; bottom: -3px; min-width: 42%; height: 42%;
  border-radius: 999px; background: #e2352f; border: 2px solid #fff;
  display: grid; place-items: center; padding: 0 3px;
  font-size: clamp(9px, 0.95vw, 14px); font-weight: 800; color: #fff;
}
.tool .badge.plus { background: #46b93f; }
.gear {
  margin-top: 6px; width: clamp(34px, 3.6vw, 54px); height: clamp(34px, 3.6vw, 54px);
  border-radius: 50%; border: 0; cursor: pointer;
  background: radial-gradient(circle at 38% 28%, #b6ef8c, #4ba83c);
  box-shadow: 0 4px 0 #2c7524, inset 0 0 0 3px rgba(255, 255, 255, 0.5);
  display: grid; place-items: center;
}
.gear svg { width: 60%; height: 60%; }

/* ---------------------------------------------------------------- toasts */
#toast {
  position: absolute; left: 50%; bottom: 3%; transform: translateX(-50%);
  z-index: 20; display: flex; flex-direction: column-reverse; gap: 6px; align-items: center;
  pointer-events: none;
}
.toast {
  background: rgba(28, 14, 46, 0.7); border: 1.5px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px; padding: 7px 18px; font-weight: 700;
  font-size: clamp(11px, 1.05vw, 15px); backdrop-filter: blur(4px);
  animation: toastIn 0.22s ease-out, toastOut 0.4s ease-in 2.1s forwards;
}
@keyframes toastIn { from { opacity: 0; transform: translateY(10px); } }
@keyframes toastOut { to { opacity: 0; transform: translateY(10px); } }

/* --------------------------------------------------------------- dialogs */
.scrim {
  position: absolute; inset: 0; z-index: 30;
  background: rgba(14, 6, 24, 0.72);
  display: grid; place-items: center; padding: 3vh 3vw;
  animation: fade 0.2s ease-out;
}
@keyframes fade { from { opacity: 0; } }

.card {
  background: linear-gradient(180deg, var(--cream) 0%, var(--cream-deep) 100%);
  border: clamp(4px, 0.5vw, 8px) solid var(--panel);
  border-radius: clamp(18px, 2vw, 30px);
  box-shadow: 0 20px 50px rgba(10, 4, 20, 0.6);
  color: var(--ink);
  padding: clamp(14px, 1.8vw, 28px);
  max-width: min(760px, 92vw); max-height: 94vh; overflow: auto;
  position: relative; text-align: center;
  animation: cardIn 0.28s cubic-bezier(0.2, 1.3, 0.5, 1);
}
@keyframes cardIn { from { transform: scale(0.82) translateY(18px); opacity: 0; } }

.card h2 {
  margin: -4px auto 10px; padding: 6px 26px; width: fit-content;
  background: var(--accent); border-radius: 999px;
  color: #7a4a12; font-size: clamp(18px, 2.2vw, 32px);
  box-shadow: inset 0 -3px 0 rgba(150, 100, 20, 0.28);
}
.card p { margin: 6px 0; font-size: clamp(12px, 1.2vw, 17px); line-height: 1.45; }
.card .close {
  position: absolute; right: 10px; top: 8px; border: 0; background: none;
  font-size: clamp(20px, 2vw, 30px); color: #d8443c; cursor: pointer; font-weight: 800;
}

.btn {
  border: 0; cursor: pointer; font-family: var(--font); font-weight: 800;
  color: #fff; border-radius: 999px;
  padding: clamp(8px, 0.9vw, 13px) clamp(20px, 2.4vw, 40px);
  font-size: clamp(15px, 1.7vw, 25px);
  background: linear-gradient(180deg, #6cd15a, #3f9c33);
  box-shadow: 0 5px 0 #2c7524, 0 8px 18px rgba(20, 8, 40, 0.35);
  -webkit-text-stroke: 0; transition: transform 0.08s, box-shadow 0.08s;
  margin: 6px;
}
.btn:active { transform: translateY(3px); box-shadow: 0 2px 0 #2c7524; }
.btn.alt { background: linear-gradient(180deg, #ffb64d, #e4842a); box-shadow: 0 5px 0 #a85c14; }
.btn.ghost { background: linear-gradient(180deg, #b9a9c9, #8d7a9e); box-shadow: 0 5px 0 #5f5070; }
.btn[disabled] { filter: grayscale(0.6) brightness(0.85); cursor: default; }

.booster-row { display: flex; justify-content: center; gap: clamp(10px, 1.4vw, 22px); margin: 10px 0 4px; flex-wrap: wrap; }
.booster {
  border: 0; cursor: pointer; background: none; padding: 0;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
}
.booster .disc {
  width: clamp(56px, 6vw, 92px); height: clamp(56px, 6vw, 92px); border-radius: 50%;
  background: radial-gradient(circle at 38% 28%, #cdf0ff, #8ecbee);
  box-shadow: 0 5px 0 #5c9dc0, inset 0 0 0 4px #fff;
  display: grid; place-items: center; transition: transform 0.1s;
}
.booster .disc img { width: 76%; height: 76%; object-fit: contain; }
.booster.on .disc { background: radial-gradient(circle at 38% 28%, #ffef9d, #f5b53c); box-shadow: 0 5px 0 #b8741b, 0 0 20px #ffd35e, inset 0 0 0 4px #fff; transform: translateY(-3px); }
.booster .stock {
  background: #46b93f; color: #fff; border-radius: 999px; padding: 2px 12px;
  font-size: clamp(11px, 1.1vw, 16px); font-weight: 800; min-width: 46px;
}
.booster[disabled] { filter: grayscale(0.6) opacity(0.7); cursor: default; }

.goal-preview { display: flex; justify-content: center; gap: clamp(8px, 1vw, 16px); flex-wrap: wrap; margin: 8px 0 2px; }
.goal-preview .gp { display: flex; flex-direction: column; align-items: center; font-weight: 800; font-size: clamp(12px, 1.2vw, 18px); }
.goal-preview .gp img { width: clamp(30px, 3.2vw, 48px); height: clamp(30px, 3.2vw, 48px); object-fit: contain; }
.goal-preview .gp svg { width: clamp(34px, 4vw, 60px); height: clamp(34px, 4vw, 60px); }

.progress { background: #e7c7ad; border-radius: 999px; height: clamp(14px, 1.5vw, 22px); overflow: hidden; box-shadow: inset 0 2px 4px rgba(120, 70, 40, 0.3); }
.progress > i { display: block; height: 100%; background: linear-gradient(180deg, #7ee06a, #46b93f); transition: width 0.4s; }

.catgift { display: flex; align-items: center; gap: 10px; background: #f3d9c0; border-radius: 999px; padding: 6px 12px; margin: 4px 0 10px; }
.catgift img { width: clamp(34px, 3.4vw, 52px); height: clamp(34px, 3.4vw, 52px); }
.catgift .progress { flex: 1; }
.catgift b { font-size: clamp(11px, 1.1vw, 16px); }

/* ------------------------------------------------------------------- map */
.map-wrap { position: absolute; inset: 0; z-index: 10; overflow: auto; background: #1b1226; }
.map-bg { position: absolute; inset: 0; background-size: cover; background-position: center; filter: brightness(0.55) saturate(0.85); }
.map-inner { position: relative; min-height: 100%; padding: clamp(60px, 8vh, 110px) 4vw clamp(30px, 5vh, 60px); }
.map-title { text-align: center; font-size: clamp(22px, 3vw, 44px); font-weight: 800; text-shadow: 0 4px 12px rgba(0, 0, 0, 0.6); margin-bottom: 4px; }
.map-sub { text-align: center; opacity: 0.85; font-size: clamp(11px, 1.2vw, 16px); margin-bottom: 18px; }
.map-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(140px, 15vw, 210px), 1fr)); gap: clamp(10px, 1.4vw, 22px); max-width: 1400px; margin: 0 auto; }

.node {
  position: relative; border: 0; cursor: pointer; text-align: left;
  border-radius: clamp(12px, 1.4vw, 20px); overflow: hidden;
  background: #2c2138; color: #fff; font-family: var(--font);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
  transition: transform 0.12s;
}
.node:hover { transform: translateY(-3px); }
.node .thumb { height: clamp(76px, 8vw, 116px); background-size: cover; background-position: center; }
.node .meta { padding: 8px 10px 10px; }
.node .no { font-size: clamp(15px, 1.6vw, 22px); font-weight: 800; }
.node .nm { font-size: clamp(10px, 1.05vw, 14px); opacity: 0.8; }
.node .stars { position: absolute; right: 8px; top: 8px; display: flex; gap: 2px; }
.node .stars svg { width: clamp(14px, 1.5vw, 20px); height: clamp(14px, 1.5vw, 20px); }
.node.locked { filter: grayscale(0.85) brightness(0.55); cursor: default; }
.node.locked:hover { transform: none; }
.node .lock { position: absolute; inset: 0; display: grid; place-items: center; font-size: clamp(22px, 2.4vw, 34px); }
.node.current { outline: 3px solid var(--accent); outline-offset: -3px; }

.topbar {
  position: absolute; left: 0; right: 0; top: 0; z-index: 12; display: flex; gap: 10px;
  align-items: center; padding: clamp(8px, 1vw, 16px) clamp(10px, 1.6vw, 26px);
  background: linear-gradient(180deg, rgba(14, 6, 24, 0.8), rgba(14, 6, 24, 0));
}
.stat {
  display: flex; align-items: center; gap: 6px;
  background: rgba(24, 12, 40, 0.7); border: 1.5px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px; padding: 5px 14px; font-weight: 800;
  font-size: clamp(11px, 1.2vw, 17px);
}
.stat svg { width: clamp(14px, 1.5vw, 21px); height: clamp(14px, 1.5vw, 21px); }
.spacer { flex: 1; }

.rows { display: flex; flex-direction: column; gap: 10px; text-align: left; margin: 10px 0; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 14px; background: #f3d9c0; border-radius: 14px; padding: 8px 14px; }
.row label { font-weight: 800; font-size: clamp(12px, 1.2vw, 17px); }
.row .hintline { font-size: clamp(10px, 1vw, 13px); opacity: 0.72; font-weight: 600; }
.switch { width: 56px; height: 30px; border-radius: 999px; border: 0; cursor: pointer; background: #b9a9c9; position: relative; transition: background 0.15s; flex: 0 0 auto; }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: left 0.15s; }
.switch.on { background: #46b93f; }
.switch.on::after { left: 29px; }
.slider { flex: 1; max-width: 220px; }

.loading { position: absolute; inset: 0; display: grid; place-items: center; z-index: 40; background: #171021; }
.loading .inner { text-align: center; }
.loading .bar { width: min(340px, 70vw); height: 16px; border-radius: 999px; background: #2f2440; overflow: hidden; margin-top: 14px; }
.loading .bar > i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ffd75e, #ff9b4a); transition: width 0.2s; }

.hidden { display: none !important; }

@media (orientation: portrait) {
  .rotate-note {
    position: absolute; inset: 0; z-index: 60; display: grid; place-items: center;
    background: #171021; text-align: center; padding: 8vw; font-size: 5vw; font-weight: 800;
  }
}
.rotate-note { display: none; }
@media (orientation: portrait) { .rotate-note { display: grid; } }