:root {
  --ink: #3a2a22;
  --paper: #fff8ea;
  --paper-2: #f6e7c8;
  --accent: #c0573a;
  --accent-2: #2f3f8f;
  --gold: #e3a92b;
  --xp: #7a4fc4;
  --shadow: 0 0.25em 0 rgba(58, 42, 34, 0.25);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: #2b2026;
  overflow: hidden;
  font-family: "Segoe UI", "Rubik", "Assistant", Arial, sans-serif;
  color: var(--ink);
}

body { display: flex; align-items: center; justify-content: center; }

#stage {
  --ui-scale: 1;
  position: relative;
  font-size: calc(16px * var(--ui-scale));
}

#game { display: block; }

/* ---------- HUD ---------- */
#hud { position: absolute; inset: 0; pointer-events: none; }

.stats {
  position: absolute;
  top: 1em;
  right: 1em;
  display: flex;
  gap: 0.6em;
}

.stat {
  background: var(--paper);
  border: 0.16em solid var(--ink);
  border-radius: 0.8em;
  padding: 0.45em 0.9em 0.5em;
  min-width: 7.5em;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 0.1em;
}

.stat .label { font-size: 0.75em; opacity: 0.7; }
.stat strong { font-size: 1.25em; }
.stat.xp strong { color: var(--xp); }
.stat small { font-size: 0.68em; opacity: 0.75; }

.bar {
  height: 0.5em;
  background: #e8dcc4;
  border: 0.1em solid var(--ink);
  border-radius: 1em;
  overflow: hidden;
  margin-top: 0.2em;
}
#xp-bar { height: 100%; width: 0; background: var(--xp); transition: width 0.4s ease; }

.coins { display: inline-flex; align-items: center; gap: 0.35em; color: #8a5a12; }
.coin-icon {
  width: 0.9em; height: 0.9em; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffe29a, #f2c14e 60%, #d29a2a);
  border: 0.12em solid #8a5a12;
  display: inline-block;
}

.actions {
  position: absolute;
  top: 1em;
  left: 1em;
  display: flex;
  gap: 0.4em;
  pointer-events: auto;
}

button {
  font: inherit;
  font-weight: 600;
  color: var(--ink);
  background: var(--paper);
  border: 0.14em solid var(--ink);
  border-radius: 0.7em;
  padding: 0.35em 0.8em;
  cursor: pointer;
  box-shadow: var(--shadow);
}
button:hover { background: var(--paper-2); }
button:active { transform: translateY(0.1em); box-shadow: none; }

#hint {
  position: absolute;
  bottom: 1.4em;
  left: 50%;
  transform: translate(-50%, 0.5em);
  background: rgba(58, 42, 34, 0.85);
  color: var(--paper);
  padding: 0.45em 1.2em;
  border-radius: 2em;
  font-size: 1.1em;
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
  white-space: nowrap;
}
#hint.visible { opacity: 1; transform: translate(-50%, 0); }

#toasts {
  position: absolute;
  top: 6.5em;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4em;
}

.toast {
  background: var(--paper);
  border: 0.14em solid var(--ink);
  border-radius: 0.8em;
  padding: 0.4em 1em;
  font-weight: 600;
  box-shadow: var(--shadow);
  animation: toast-in 0.25s ease-out;
  transition: opacity 0.4s, transform 0.4s;
  white-space: nowrap;
}
.toast.reward { background: #fff1c9; }
.toast.rank { background: #e9ddff; color: var(--xp); font-size: 1.15em; }
.toast.warn { background: #ffe0d6; }
.toast.leaving { opacity: 0; transform: translateY(-0.6em); }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(-0.6em) scale(0.95); }
  to { opacity: 1; transform: none; }
}

/* ---------- Intro / help ---------- */
#intro {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(43, 32, 38, 0.45);
  transition: opacity 0.25s;
}
#intro.hidden { opacity: 0; pointer-events: none; }

.card {
  background: var(--paper);
  border: 0.2em solid var(--ink);
  border-radius: 1.4em;
  padding: 1.6em 2.2em 1.8em;
  width: 32em;
  max-width: 92%;
  box-shadow: 0 0.5em 0 rgba(58, 42, 34, 0.3);
  text-align: center;
  line-height: 1.5;
}
.card h1 { margin: 0; font-size: 2.4em; color: var(--accent); }
.card .sub { margin: 0 0 0.8em; opacity: 0.65; font-size: 0.85em; }
.card .small { font-size: 0.85em; opacity: 0.75; }

.keys { list-style: none; padding: 0; margin: 1em 0; text-align: start; display: inline-block; }
.keys li { margin: 0.35em 0; }
.keys span { margin-inline-start: 0.5em; }

kbd {
  display: inline-block;
  min-width: 1.8em;
  padding: 0.1em 0.45em;
  border: 0.12em solid var(--ink);
  border-bottom-width: 0.25em;
  border-radius: 0.4em;
  background: #fff;
  font-family: inherit;
  font-weight: 700;
  text-align: center;
}

#btn-start {
  margin-top: 0.6em;
  font-size: 1.2em;
  padding: 0.5em 1.4em;
  background: var(--accent);
  color: #fff;
}
#btn-start:hover { background: #a94a30; }
#btn-start small { opacity: 0.8; font-weight: 400; }