:root {
  --wood: #b08968;
  --wood-dark: #7f5539;
  --paper: #f5efe6;
  --ink: #2b2d2f;
  --mist: #e8e0d2;
  --sage: #81b29a;
  --terracotta: #e07a5f;
  --sky: #a2d2ff;
  --butter: #f2cc8f;
  --line: rgba(43,45,47,0.12);
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overflow: hidden; }
/* iPhone Safari: use dynamic viewport and safe-area insets */
html { height: 100dvh; }
body {
  background: #d8cfba;
  color: var(--ink);
  font: 14px/1.4 ui-sans-system, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

#scene {
  display: block;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  height: -webkit-fill-available;
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Top bar — safe area for iPhone notch */
#topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: calc(12px + env(safe-area-inset-top)) 16px 12px 16px;
  padding-left: calc(16px + env(safe-area-inset-left));
  padding-right: calc(16px + env(safe-area-inset-right));
  pointer-events: none;
  z-index: 20;
}
#topbar > * { pointer-events: auto; }

.top-left { display: flex; align-items: center; gap: 10px; }
.level-pill {
  background: #2b2d2f;
  color: #fff;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.08em;
  padding: 6px 10px;
  border-radius: 999px;
}
#title {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-family: ui-serif, Georgia, serif;
}
.top-center { display: flex; justify-content: center; }
.progress-wrap {
  background: rgba(255,255,255,0.92);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 8px 14px 7px;
  min-width: 240px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}
.progress-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.7;
  text-align: center;
  margin-bottom: 5px;
}
.progress-bar {
  height: 6px;
  background: #ece6d9;
  border-radius: 999px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #81b29a, #3d8361);
  border-radius: 999px;
  transition: width 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.dots {
  display: flex;
  gap: 4px;
  justify-content: center;
  margin-top: 6px;
}
.dots i {
  width: 6px; height: 6px;
  border-radius: 999px;
  background: #ddd6c6;
  display: block;
  transition: all 0.3s ease;
}
.dots i.on { background: #3d8361; transform: scale(1.2); }
.dots i.wrong { background: #e07a5f; }

.top-right { display: flex; justify-content: flex-end; gap: 8px; }
.icon-btn {
  width: 36px; height: 36px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.92);
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
.icon-btn:active { transform: scale(0.96); }
.dev-burger { font-size: 15px; letter-spacing: 0; }
.dev-burger[aria-expanded="true"] { background: #2b2d2f; color: #fff; border-color: #2b2d2f; }

/* Dev jump menu — floating dropdown */
#devMenu {
  position: fixed;
  left: 14px;
  top: 54px;
  width: 220px;
  max-height: min(68vh, 520px);
  overflow-y: auto;
  background: rgba(255,255,255,0.98);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 16px 36px rgba(0,0,0,0.16);
  z-index: 25;
  padding: 10px 8px 8px;
  backdrop-filter: blur(8px);
}
#devMenu.hidden { display: none; }
.dev-menu-head {
  font-size: 10px; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; opacity: 0.55; padding: 4px 6px 8px;
}
.dev-level-btn {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
  text-align: left;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 7px 8px;
  margin-bottom: 6px;
  cursor: pointer;
  font-size: 12px; font-weight: 600;
}
.dev-level-btn:hover { background: #f5efe6; border-color: #d8c2a6; }
.dev-level-btn.active { background: #2b2d2f; color: #fff; border-color: #2b2d2f; }
.dev-level-btn.active .dev-lvl-id { color: #ffd60a; }
.dev-lvl-id { font-size: 10px; font-weight: 800; opacity: 0.7; }
.dev-lvl-meta { font-size: 10px; opacity: 0.6; text-align: right; }
.dev-menu-foot { font-size: 10px; opacity: 0.5; padding: 6px; line-height: 1.3; }

/* Legend */
#legend {
  position: fixed;
  left: 14px;
  top: 74px;
  width: 150px;
  background: rgba(255,255,255,0.93);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 12px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.08);
  z-index: 12;
}
.legend-head {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.55;
  margin-bottom: 8px;
}
#legendList { display: flex; flex-direction: column; gap: 6px; }
.legend-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
}
.legend-swatch {
  width: 18px; height: 18px;
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,0.08);
  flex-shrink: 0;
}
.legend-hint {
  margin-top: 10px;
  font-size: 11px;
  line-height: 1.4;
  opacity: 0.6;
  border-top: 1px solid var(--line);
  padding-top: 8px;
}

/* Vertical timer bar — right edge */
#timerBar {
  position: fixed;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 8px 10px;
  background: rgba(255,255,255,0.93);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.08);
  z-index: 6;
}
.timer-head {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  opacity: 0.55;
}
.timer-track {
  position: relative;
  width: 18px;
  height: 42vh;
  min-height: 160px;
  max-height: 320px;
  background: #ece6d9;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(43,45,47,0.08);
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.08);
}
.timer-fill {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 100%;
  background: linear-gradient(180deg, #81b29a 0%, #3d8361 52%, #f59e0b 78%, #e07a5f 100%);
  border-radius: 999px;
  transition: height 0.12s linear, filter 0.3s ease;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.55);
}
.timer-fill.low { filter: saturate(1.15) brightness(1.02); background: linear-gradient(180deg, #f2cc8f 0%, #e07a5f 55%, #c1121f 100%); }
.timer-fill.critical { animation: timerPulse 0.7s ease-in-out infinite alternate; }
@keyframes timerPulse { from { filter: brightness(1); } to { filter: brightness(1.18) saturate(1.25); } }
.timer-ticks {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(to top, transparent 0 18px, rgba(43,45,47,0.07) 18px 19px);
  pointer-events: none;
  border-radius: 999px;
}
.timer-label {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  padding: 4px 8px;
  border-radius: 999px;
  min-width: 44px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.timer-label.low { color: #9a3a24; border-color: #f0b8a8; background: #fff1ed; }
.timer-bonus {
  position: absolute;
  right: 64px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  font-weight: 900;
  color: #3d8361;
  background: #e6f4ea;
  border: 1px solid #b7dfc4;
  padding: 6px 9px;
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.35s ease;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(0,0,0,0.10);
}
.timer-bonus.show { opacity: 1; transform: translateY(-50%) translateX(-4px); }

/* Ribbon — Minecraft hotbar at bottom — iPhone safe area, lowered after helper removal */
#ribbon {
  position: fixed;
  left: 50%;
  bottom: calc(14px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  padding: 8px;
  background: rgba(43,45,47,0.88);
  border: 2px solid #2b2d2f;
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.12);
  max-width: min(96vw, 760px);
  flex-wrap: wrap;
  justify-content: center;
  z-index: 5;
}
.rib-slot {
  width: 68px;
  height: 78px;
  background: #c6c6c6;
  border: 2px solid #373737;
  border-top-color: #fff;
  border-left-color: #fff;
  border-right-color: #555;
  border-bottom-color: #555;
  box-shadow: inset 0 0 0 2px #8b8b8b;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 4px 0 3px;
  gap: 0;
  cursor: pointer;
  position: relative;
  image-rendering: pixelated;
}
.rib-slot.hint-pulse { animation: hintPulse 0.6s ease-in-out 2; border-color: #10b981 !important; box-shadow: 0 0 0 3px #10b981, 0 6px 18px rgba(16,185,129,0.35) !important; }
@keyframes hintPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.rib-slot:hover { filter: brightness(1.06); }
.rib-slot.selected {
  background: #fef3c7;
  border-color: #f59e0b;
  box-shadow: 0 0 0 2px #f59e0b, inset 0 0 0 2px #fff7cc;
  transform: translateY(-2px);
}
.rib-slot.placed {
  opacity: 0.32;
  pointer-events: none;
  filter: grayscale(0.55);
}
.rib-slot.placed::after {
  content: "✓";
  position: absolute;
  top: 2px; right: 4px;
  font-size: 11px; font-weight: 900;
  color: #3d8361;
  z-index: 2;
}
.rib-preview {
  width: 64px; height: 58px;
  display: block;
  image-rendering: auto;
}
.rib-badge {
  position: absolute;
  top: 3px; right: 3px;
  min-width: 18px; height: 18px;
  padding: 0 4px;
  background: #2b2d2f;
  color: #fff;
  font-size: 10px; font-weight: 900;
  line-height: 18px;
  text-align: center;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.55);
  box-shadow: 0 2px 6px rgba(0,0,0,0.22);
  pointer-events: none;
}
.rib-label {
  font-size: 8px; font-weight: 800;
  letter-spacing: 0.04em;
  opacity: 0.82;
  margin-top: 1px;
  line-height: 1;
  text-transform: uppercase;
  pointer-events: none;
}

/* Bottom hint — removed per request, ribbon lowered */
#bottomHint {
  display: none !important;
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  background: #2b2d2f;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 9px 14px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.18);
  pointer-events: none;
  max-width: min(92vw, 520px);
  text-align: center;
  z-index: 12;
}
.hint-icon { opacity: 0.9; }

/* Modal — above ribbon */
#modal {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(43,45,47,0.28);
  backdrop-filter: blur(6px);
  z-index: 30;
}
#modal.hidden { display: none; }
.modal-card {
  background: #fffefb;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 22px 20px 18px;
  width: min(360px, 90vw);
  text-align: center;
  box-shadow: 0 18px 44px rgba(0,0,0,0.18);
}
.modal-emoji { font-size: 28px; margin-bottom: 6px; }
.modal-card h2 {
  margin: 0;
  font-family: ui-serif, Georgia, serif;
  font-size: 22px;
  letter-spacing: -0.02em;
}
.modal-card p { margin: 6px 0 14px; opacity: 0.7; font-size: 13px; line-height: 1.5; }
.primary-btn {
  width: 100%;
  border: 0;
  background: #2b2d2f;
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.02em;
  padding: 12px;
  border-radius: 12px;
  cursor: pointer;
}
.primary-btn:active { transform: scale(0.98); }

/* Toast — above ribbon */
#toast {
  position: fixed;
  left: 50%;
  top: 68px;
  transform: translateX(-50%);
  background: #fff;
  border: 1px solid var(--line);
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 8px 22px rgba(0,0,0,0.12);
  z-index: 40;
}
#toast.hidden { display: none; }
#toast.bad { background: #fff1ed; border-color: #f0b8a8; color: #9a3a24; }

/* Sound popup — small, first load */
#soundPopup { position: fixed; inset: 0; display: grid; place-items: center; background: rgba(43,45,47,0.18); backdrop-filter: blur(2px); z-index: 35; }
#soundPopup.hidden { display: none; }
.sound-card { background: #fffefb; border: 1px solid var(--line); border-radius: 16px; padding: 14px 14px 12px; width: min(320px, 88vw); box-shadow: 0 14px 32px rgba(0,0,0,0.16); display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.sound-icon { width: 38px; height: 38px; display: grid; place-items: center; background: #2b2d2f; color: #fff; border-radius: 10px; font-size: 16px; flex-shrink: 0; }
.sound-text { flex: 1; min-width: 120px; display: flex; flex-direction: column; gap: 2px; }
.sound-text strong { font-size: 13px; letter-spacing: -0.01em; }
.sound-text span { font-size: 11px; opacity: 0.65; }
.sound-actions { display: flex; gap: 8px; width: 100%; }
.sound-btn { flex: 1; padding: 9px 10px; font-size: 12px; border-radius: 10px; }
.ghost-btn { background: #fff; color: #2b2d2f; border: 1px solid var(--line); font-weight: 700; cursor: pointer; }
.ghost-btn:active { transform: scale(0.98); }

/* Fullscreen button — desktop right, mobile left to keep right only timer */
.fs-btn {
  position: fixed;
  right: 16px;
  bottom: 88px;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  font-size: 18px;
  z-index: 7;
  background: rgba(255,255,255,0.94);
  border: 1px solid var(--line);
}
.fs-btn:fullscreen { display: none; }

/* Portrait gate — covers game until rotated */
#rotateGate {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(244, 238, 227, 0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 99;
  padding: 20px;
}
#rotateGate.hidden { display: none; }
.rotate-card {
  background: #fffefb;
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 28px 22px 20px;
  width: min(360px, 92vw);
  text-align: center;
  box-shadow: 0 20px 48px rgba(0,0,0,0.16);
}
.rotate-icon {
  width: 56px; height: 56px;
  margin: 0 auto 12px;
  display: grid; place-items: center;
  background: #2b2d2f;
  color: #fff;
  font-size: 26px;
  border-radius: 16px;
  animation: rotateWiggle 1.6s ease-in-out infinite;
}
@keyframes rotateWiggle { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(82deg); } }
.rotate-card h2 { margin: 0 0 8px; font-family: ui-serif, Georgia, serif; font-size: 22px; letter-spacing: -0.02em; }
.rotate-card p { margin: 0 0 16px; opacity: 0.72; font-size: 13px; line-height: 1.5; }
.rotate-hint { margin-top: 10px; font-size: 11px; opacity: 0.5; }

@media (max-width: 700px) {
  #topbar { grid-template-columns: auto 1fr auto; }
  #title { display: none; }
  /* sorted info — vertical on the left on mobile */
  .top-center { position: fixed; left: 6px; top: 52px; z-index: 13; justify-content: flex-start; }
  .progress-wrap { min-width: 70px; width: 70px; padding: 8px 6px; flex-direction: column; gap: 6px; align-items: center; }
  .progress-label { font-size: 9px; margin-bottom: 0; text-align: center; }
  .progress-bar { width: 56px; }
  .dots { gap: 3px; }
  #legend { width: 122px; padding: 10px; top: 186px; }
  #bottomHint { display: none; }
  #timerBar { right: 6px; width: 48px; padding: 10px 6px; }
  .timer-track { width: 14px; min-height: 140px; }
}

/* Mobile — keep right side only timer, ribbon one line compact — hide helper on mobile */
@media (max-width: 1024px) {
  #timerBar { right: 6px; }
  .fs-btn { left: 10px; right: auto; bottom: 10px; width: 38px; height: 38px; font-size: 15px; }
  #ribbon {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    justify-content: flex-start;
    max-width: 88vw;
    gap: 6px;
    padding: 6px;
    bottom: calc(14px + env(safe-area-inset-bottom));
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  #ribbon::-webkit-scrollbar { display: none; }
  .rib-slot { width: 52px; height: 60px; flex-shrink: 0; padding: 3px 0 2px; }
  .rib-preview { width: 48px; height: 42px; }
  .rib-label { font-size: 7px; }
  #bottomHint, .legend-hint { display: none; }
  /* sorted info — vertical on the left on any mobile */
  .top-center { position: fixed; left: 6px; top: 52px; z-index: 13; justify-content: flex-start; }
  .progress-wrap { min-width: 70px; width: 70px; padding: 8px 6px; flex-direction: column; gap: 6px; align-items: center; }
  .progress-label { font-size: 9px; margin-bottom: 0; text-align: center; }
  .progress-bar { width: 56px; }
  #legend { top: 186px; }
}

/* Landscape-only mobile tuning — short viewport height */
@media (max-height: 520px) and (orientation: landscape) {
  #topbar { padding: 7px 10px; gap: 8px; }
  .progress-wrap { padding: 6px 10px 5px; min-width: 170px; }
  .progress-label { font-size: 10px; margin-bottom: 3px; }
  #legend { top: 138px; width: 116px; padding: 8px; }
  .legend-hint { display: none; }
  #timerBar { padding: 8px 6px; gap: 6px; width: 46px; right: 6px; }
  .timer-track { min-height: 110px; max-height: 38vh; width: 13px; }
  #ribbon { bottom: 8px; padding: 5px; gap: 5px; max-width: 74vw; flex-wrap: nowrap; overflow-x: auto; right: auto; left: 50%; transform: translateX(-50%); }
  .rib-slot { width: 48px; height: 56px; }
  .rib-preview { width: 44px; height: 38px; }
  #bottomHint { display: none; }
  .fs-btn { bottom: 8px; left: 8px; right: auto; width: 36px; height: 36px; }
  .top-center { top: 12px !important; }
  .progress-wrap { width: 70px !important; min-width: 70px !important; }
}

/* iPhone — truly compact, no overlap, playable without fullscreen */
@media (max-width: 900px) and (max-height: 450px) and (orientation: landscape) {
  #legend { display: none !important; }
  #bottomHint { display: none !important; }
  #topbar { padding: 6px 8px; gap: 6px; padding-top: calc(6px + env(safe-area-inset-top)); }
  #title { display: none; }
  .level-pill { font-size: 10px; padding: 5px 8px; }
  .top-center { position: fixed !important; left: 6px !important; top: 6px !important; right: auto !important; justify-content: flex-start !important; }
  .progress-wrap { min-width: 68px !important; width: 68px !important; padding: 6px 5px !important; }
  .progress-label { font-size: 8px !important; }
  .progress-bar { width: 54px !important; height: 6px !important; }
  .dots { gap: 3px !important; }
  .dot { width: 6px !important; height: 6px !important; }
  #timerBar { right: 4px !important; width: 36px !important; padding: 6px 4px !important; gap: 4px !important; top: 50% !important; transform: translateY(-50%); }
  .timer-head { font-size: 8px !important; }
  .timer-track { min-height: 90px !important; max-height: 32vh !important; width: 10px !important; }
  .timer-label { font-size: 10px !important; }
  #ribbon { bottom: calc(6px + env(safe-area-inset-bottom)) !important; padding: 4px !important; gap: 4px !important; max-width: 78vw !important; }
  .rib-slot { width: 44px !important; height: 52px !important; }
  .rib-preview { width: 40px !important; height: 34px !important; }
  .rib-label { font-size: 6px !important; }
  .fs-btn { display: none !important; } /* iPhone has no fullscreen */
  #topbar .top-right { gap: 6px; }
  .icon-btn { width: 32px !important; height: 32px !important; font-size: 14px !important; }
}

@media (max-height: 380px) and (orientation: landscape) {
  #legend { display: none; }
  #timerBar { width: 40px; padding: 6px 4px; }
  #ribbon { max-width: 82vw; }
}