:root {
  --wood-a: #e4c08a;
  --wood-b: #c99562;
  --ink: #6a3b16;
  --card: #f4e2c4;
  --card-edge: #c9a06a;
  color-scheme: light;
}

* {
  box-sizing: border-box;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

input, textarea {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  min-height: 100dvh;
  font-family: Nunito, "Trebuchet MS", sans-serif;
  color: var(--ink);
  background:
    repeating-linear-gradient(90deg,
      #4a301f 0 10px,
      #5c3d28 10px 18px,
      #3e291b 18px 34px,
      #6b4630 34px 46px,
      #2c1c12 46px 58px,
      #543828 58px 72px);
}
button, dialog { font: inherit; }
button { cursor: pointer; }

.app {
  width: min(440px, 100%);
  height: 100dvh;
  margin: 0 auto;
  position: relative;
  padding: calc(18px + env(safe-area-inset-top)) 16px calc(18px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
}
.app:has(#screen-game:not([hidden])) {
  padding-top: calc(8px + env(safe-area-inset-top));
  padding-bottom: calc(8px + env(safe-area-inset-bottom));
}

.screen { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; flex: 1; min-height: 0; }
#screen-home { overflow: auto; }
#screen-game { overflow: hidden; gap: 4px; }
.screen[hidden] { display: none; }

.leaves { position: absolute; pointer-events: none; }
.leaves-left { top: 0; left: 0; width: 150px; }
.leaves-right { top: 8px; right: 54px; width: 64px; }

.round-btn {
  position: absolute;
  top: calc(12px + env(safe-area-inset-top));
  right: 12px;
  width: 46px;
  height: 46px;
  border: 3px solid #a56b32;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f0d7a4, #c48945);
  color: #6a3b16;
  font-size: 20px;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.5), 0 3px 0 #8a5424;
}
.round-btn.small { position: static; width: 42px; height: 42px; }
.back-btn {
  flex: none;
  min-width: 72px;
  min-height: 36px;
  border: 3px solid #a56b32;
  border-radius: 12px;
  background: linear-gradient(180deg, #f0d7a4, #c48945);
  color: #6a3b16;
  font-weight: 800;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.5), 0 3px 0 #8a5424;
}
.journey-card { cursor: pointer; }

.logo-title {
  margin: 54px 0 6px;
  text-align: center;
  font-family: "Lilita One", "Trebuchet MS", sans-serif;
  font-size: 68px;
  font-weight: 400;
  line-height: .86;
  letter-spacing: 1px;
  color: #e36b24;
  -webkit-text-stroke: 8px #f6e6cc;
  paint-order: stroke fill;
  text-shadow: 0 6px 0 #b85a22, 0 10px 0 rgba(90, 40, 10, .25);
}
.logo-title span { display: block; }

.card {
  width: 100%;
  background: linear-gradient(180deg, #f8e7cb, #efd7b0);
  border: 3px solid var(--card-edge);
  border-radius: 16px;
  box-shadow: 0 4px 0 #b88955, inset 0 1px 0 rgba(255,255,255,.7);
  position: relative;
}
.journey-card { padding: 12px 12px 14px; }
.tag {
  position: absolute;
  top: 10px;
  left: 12px;
  background: #f3d7a4;
  border: 2px solid #d7b278;
  border-radius: 8px;
  padding: 2px 8px;
  font-weight: 800;
  font-size: 13px;
}
.mosaic {
  height: 92px;
  margin: 8px 8px 12px 78px;
  border-radius: 10px;
  background: #f6e7cf;
  overflow: hidden;
  border: 2px solid #d7b278;
}
.mosaic svg { width: 100%; height: 100%; display: block; }
.mosaic i {
  display: block;
  border-radius: 3px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45);
}
.meter {
  position: relative;
  height: 28px;
  border-radius: 999px;
  background: #5c3a22;
  overflow: hidden;
  border: 2px solid #3e2716;
}
.meter-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(180deg, #ffe08a, #e2a322);
}
.meter-label {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff6e4;
  font-weight: 800;
  text-shadow: 0 1px 1px rgba(0,0,0,.45);
}

.streak-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  min-height: 92px;
}
.crown { width: 64px; height: 64px; flex: none; }
.crown svg { width: 100%; height: 100%; }
.streak-copy { flex: 1; }
.streak-copy p { margin: 0; font-weight: 800; }
.streak-num { font-family: "Lilita One", sans-serif; font-size: 34px; line-height: 1; color: #8a4b16; }
.tick {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  background: #e7c48a;
  color: #6a3b16;
  font-weight: 800;
}
.alert {
  position: absolute;
  top: -8px;
  right: 36px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #e23b32;
  color: white;
  font-size: 14px;
  font-weight: 800;
  display: grid;
  place-items: center;
}

.mode-row { display: flex; gap: 12px; width: 100%; margin-top: 8px; }
.leader-link {
  width: 100%;
  display: grid;
  place-items: center;
  text-decoration: none;
  min-height: 56px;
}
.mode {
  position: relative;
  flex: 1;
  border: 0;
  border-radius: 14px;
  min-height: 64px;
  font-family: "Lilita One", sans-serif;
  font-size: 26px;
  letter-spacing: .4px;
  color: #fffaf2;
  text-shadow: 0 2px 0 rgba(0,0,0,.2);
}
.mode.journey {
  background: linear-gradient(180deg, #f07a52, #d84b3c);
  box-shadow: 0 5px 0 #a43328;
}
.mode.classic {
  background: linear-gradient(180deg, #f0c07a, #d49245);
  box-shadow: 0 5px 0 #a86a2c;
  color: #fff8ee;
}
.mode:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0,0,0,.25); }
.dot {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ff3b30;
  box-shadow: 0 0 0 2px rgba(255,255,255,.35);
}
.version { margin: 18px 0 0; color: rgba(243, 230, 208, .75); font-weight: 800; }

.hud {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
}
.hud-mid { flex: 1; text-align: center; }
.hud-kicker, .hud-best, .hud-score, .hud-goal { margin: 0; }
.hud-kicker, .hud-goal { font-weight: 800; font-size: 13px; color: #f3e6d0; }
.hud-score { font-family: "Lilita One", sans-serif; font-size: 22px; line-height: 1; color: #ffd84a; }
.hud-best { font-weight: 800; min-width: 88px; max-width: 120px; text-align: right; }

.play-top {
  width: 100%;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 4px;
  flex: 0 0 auto;
}
.play-bar { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; }
.best-mark {
  display: flex;
  align-items: center;
  flex: none;
  gap: 4px;
  margin: 0;
  padding: 3px 8px 3px 6px;
  border: 2px solid #5c4030;
  border-radius: 12px;
  background: #2c1e16;
  white-space: nowrap;
}
.best-mark svg { width: 28px; height: 22px; flex: none; }
.best-mark span {
  font-family: "Lilita One", sans-serif;
  font-size: 24px;
  line-height: 1;
  color: #ffd84a;
  white-space: nowrap;
}
.play-level {
  margin: 0 0 0 auto;
  min-width: 0;
  text-align: right;
  font-weight: 800;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #f3e6d0;
}
.goal-card, .score-card {
  width: 100%;
  background: #2c1e16;
  border: 2px solid #5c4030;
  border-radius: 12px;
  padding: 4px 8px;
  color: #f3e6d0;
}
.goal-kicker { margin: 0; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #e2c49a; }
.goal-main { margin: 0; font-family: "Lilita One", "Trebuchet MS", sans-serif; font-size: 18px; line-height: 1.05; }
.goal-progress { margin: 1px 0 0; font-weight: 800; font-size: 13px; }
.goal-obstacles { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.goal-obstacles:empty { display: none; }
.obs-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 2px 6px;
  border: 1px solid #5c4030;
  border-radius: 8px;
  background: #1a120e;
  color: #f3e6d0;
  font-size: 11px;
  font-weight: 800;
}
.how-link {
  margin: 2px 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #e2c49a;
  font-size: 12px;
  font-weight: 800;
  text-decoration: underline;
}
.swatch {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  display: block;
  flex: none;
}
.swatch.mini { width: 14px; height: 14px; border-radius: 3px; }
.swatch.stone { background: linear-gradient(180deg, #d9d4cc, #8d877e); }
.swatch.cracked { background: linear-gradient(180deg, #c4beb4, #6e675e); box-shadow: inset 0 0 0 2px rgba(60, 40, 20, .45); }
.swatch.ice { background: linear-gradient(180deg, #f4fbff, #9fd4ee); box-shadow: inset 0 0 0 2px rgba(255,255,255,.8); }
.swatch.gem { background: radial-gradient(circle at 50% 45%, #fff4c2 0 28%, #f0c14a 45%, #c98420 78%); }
.swatch.barrier {
  background:
    linear-gradient(#2a241c, #2a241c) center/70% 4px no-repeat,
    linear-gradient(#2a241c, #2a241c) center/4px 70% no-repeat,
    #5c4632;
}
dialog.how-dialog { width: min(380px, calc(100% - 24px)); }
.how-item { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 12px; text-align: left; }
.how-item strong { display: block; font-size: 16px; }
.how-item p { margin: 2px 0 0; font-size: 14px; line-height: 1.3; font-weight: 800; }
.score-card { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.star-readout { text-align: left; }
.stars.live { font-size: 16px; margin: 0; line-height: 1; }
.star-note { margin: 1px 0 0; font-weight: 800; font-size: 12px; line-height: 1.15; white-space: pre-line; }

.map { width: 100%; flex: 1; min-height: 0; overflow: auto; padding-bottom: 12px; }
.chapter { width: 100%; margin: 14px 0 0; font-family: "Lilita One", sans-serif; font-size: 22px; color: #ffd84a; }
.chapter-note { width: 100%; margin: 0 0 8px; font-size: 13px; font-weight: 800; color: #f3e6d0; }
.level-grid { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.level-btn {
  min-height: 64px;
  border: 3px solid #5c4030;
  border-radius: 12px;
  background: #2c1e16;
  color: #f3e6d0;
  font-weight: 800;
}
.level-btn b { display: block; font-family: "Lilita One", sans-serif; font-size: 22px; color: #ffd84a; }
.level-btn small { display: block; font-size: 12px; }
.level-btn.done { background: #3a2a1c; border-color: #c9a15a; }
.level-btn.current { outline: 3px solid #d84b3c; }
.level-btn.locked { opacity: 0.45; }
.level-btn.rank-easy small:first-of-type { color: #8fd18a; }
.level-btn.rank-normal small:first-of-type { color: #f3e6d0; }
.level-btn.rank-hard small:first-of-type { color: #f0a05a; }
.level-btn.rank-super small:first-of-type { color: #ff8a80; }
.stars { letter-spacing: 1px; font-size: 14px; }
.stars i { color: #8a7560; font-style: normal; }
.stars i.on { color: #ffd84a; }
.stars.big { font-size: 34px; text-align: center; margin-bottom: 8px; }

.board-wrap { width: 100%; flex: 1 1 auto; min-height: 0; display: grid; place-items: center; container-type: size; }
.board {
  width: min(100cqw, 100cqh);
  height: min(100cqw, 100cqh);
  aspect-ratio: 1;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
  padding: 10px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), transparent 30%),
    #6b4428;
  border: 6px solid #ffd84a;
  box-shadow:
    inset 0 0 0 4px #8a5a12,
    0 0 0 3px #2c1e16,
    0 0 0 7px #f0c14a;
}
.board.classic-board {
  border: 6px solid #ffd84a;
  box-shadow:
    inset 0 0 0 4px #8a5a12,
    0 0 0 3px #2c1e16,
    0 0 0 7px #f0c14a;
}
.cell {
  border-radius: 6px;
  background: rgba(40, 22, 10, .35);
}
.cell.on {
  box-shadow: inset 0 2px 0 rgba(255,255,255,.5), inset 0 -3px 0 rgba(0,0,0,.22);
}
.cell.hint { box-shadow: inset 0 0 0 3px rgba(255, 246, 228, .95); }
.cell.bad { box-shadow: inset 0 0 0 3px rgba(216, 75, 60, .95); }
.cell.clearing {
  animation: wood-clear 200ms ease forwards;
  transform-origin: center;
}
@keyframes wood-clear {
  from { transform: scale(1); filter: brightness(1.45); }
  to { transform: scale(.72); opacity: .2; }
}
.cell.gem {
  background:
    radial-gradient(circle at 50% 45%, #fff4c2 0 28%, #f0c14a 45%, #c98420 78%);
}
.cell.ice {
  background: linear-gradient(180deg, #f4fbff, #9fd4ee);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.8);
}
.cell.stone { background: linear-gradient(180deg, #d9d4cc, #8d877e); }
.cell.stone.cracked { background: linear-gradient(180deg, #c4beb4, #6e675e); }
.cell.barrier {
  background:
    linear-gradient(#2a241c, #2a241c) center/70% 4px no-repeat,
    linear-gradient(#2a241c, #2a241c) center/4px 70% no-repeat,
    #5c4632;
}

.tray-wrap {
  flex: 0 0 auto;
  width: 100%;
  background: #000;
  border: 3px solid #2b2b2b;
  border-radius: 12px;
  padding: 1px 6px 2px;
}
.tray-label { margin: 0; font-weight: 800; font-size: 11px; text-align: center; color: #f6e6cc; }
.tray {
  width: 100%;
  min-height: 96px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  justify-items: center;
  gap: 4px;
}
.slot { min-height: 96px; display: grid; place-items: center; }
.piece {
  --bit: 18px;
  touch-action: none;
  display: grid;
  gap: 2px;
  padding: 2px;
  user-select: none;
  -webkit-user-select: none;
}
.piece.selected { outline: 3px solid #fff6e4; border-radius: 10px; }
.piece b {
  width: var(--bit);
  height: var(--bit);
  border-radius: 4px;
  display: block;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.5), inset 0 -2px 0 rgba(0,0,0,.2);
}
.ghost {
  position: fixed;
  z-index: 20;
  pointer-events: none;
  margin: 0;
  padding: 0;
  filter: drop-shadow(0 10px 8px rgba(0,0,0,.35));
}
.ghost.miss b { background: #d84b3c !important; }

dialog {
  border: 3px solid #5c4030;
  border-radius: 18px;
  background: #2c1e16;
  color: #ffd84a;
  width: min(320px, calc(100% - 32px));
  padding: 18px;
}
dialog h2 { margin: 0 0 8px; font-family: "Lilita One", sans-serif; font-size: 32px; color: #ffd84a; }
dialog p,
dialog strong { margin: 0 0 14px; font-weight: 800; color: #ffd84a; }
dialog strong { margin: 0; }
dialog .how-item p { margin: 2px 0 0; }
dialog .mode { width: 100%; margin-top: 8px; }
.name-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 8px;
  font-weight: 800;
  color: #ffd84a;
}
.name-row input {
  font: inherit;
  font-weight: 800;
  color: #6a3b16;
  background: #f8e7cb;
  border: 3px solid #c9a06a;
  border-radius: 12px;
  min-height: 48px;
  padding: 8px 12px;
}
#board-note { margin: 0 0 8px; font-weight: 800; color: #ffd84a; }

html.leaders, body.leaders { overflow: auto; height: auto; min-height: 100%; }
.leaders-app { height: auto; min-height: 100dvh; overflow: visible; }
.leaders-bar {
  position: sticky;
  top: 0;
  z-index: 3;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: calc(8px + env(safe-area-inset-top)) 0 10px;
  background: #3e291b;
}
.leaders-bar h1 {
  margin: 0;
  font-family: "Lilita One", sans-serif;
  font-size: 32px;
  font-weight: 400;
  color: #ffd84a;
}
.leaders-back {
  min-width: 88px;
  min-height: 48px;
  font-size: 18px;
  text-decoration: none;
  display: grid;
  place-items: center;
}
.leaders-note {
  width: 100%;
  margin: 0 0 10px;
  text-align: center;
  font-weight: 800;
  color: #f6e6cc;
}
.leaders-list {
  list-style: none;
  width: 100%;
  margin: 0;
  padding: 0 0 calc(24px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.leaders-list li {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  gap: 8px;
  align-items: center;
  background: linear-gradient(180deg, #7a221c, #4e1210);
  border: 3px solid #3a0d0c;
  border-radius: 14px;
  box-shadow: 0 4px 0 #2a0908;
  padding: 10px 12px;
  color: #ffd84a;
  font-weight: 800;
}
.leaders-list li.mine { border-color: #ffd84a; box-shadow: 0 4px 0 #8a5a12; }
.leaders-list .rank,
.leaders-list .score {
  font-family: "Lilita One", sans-serif;
  font-size: 22px;
  font-weight: 400;
  color: #ffd84a;
}
.leaders-list .who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leaders-status {
  width: 100%;
  margin: 12px 0 0;
  text-align: center;
  font-weight: 800;
  color: #f6e6cc;
}
dialog::backdrop { background: rgba(40, 24, 10, .45); }