:root,
html[data-theme="orchard"] {
  --burlap: #5a3c22;
  --burlap-deep: #3d2814;
  --bamboo: #e2c15a;
  --bamboo-dark: #8a6a24;
  --wood: #6b4224;
  --wood-hi: #c48a3a;
  --ink: #2a1608;
  --cream: #fff4d2;
  --lime: #8fd14a;
  --arena-deep: #1a1008;
  --screen-overlay: rgba(28, 16, 6, 0.28);
  --panel-top: #6d4728;
  --panel-bottom: #4e3018;
}

html[data-theme="buccaneer"] {
  --burlap: #3a4a58;
  --burlap-deep: #1a2830;
  --bamboo: #8a7048;
  --bamboo-dark: #4a3828;
  --wood: #3a2818;
  --wood-hi: #a08050;
  --ink: #0e1018;
  --cream: #f0e8d0;
  --lime: #6ac8d8;
  --arena-deep: #0a1018;
  --screen-overlay: rgba(10, 16, 24, 0.42);
  --panel-top: #2a3848;
  --panel-bottom: #1a2430;
}

html[data-theme="candy"] {
  --burlap: #f0b8d8;
  --burlap-deep: #d888b8;
  --bamboo: #fff0f8;
  --bamboo-dark: #e878a8;
  --wood: #e85098;
  --wood-hi: #f8b0d0;
  --ink: #5a1848;
  --cream: #fff8fc;
  --lime: #88e8f8;
  --arena-deep: #f8d0e8;
  --screen-overlay: rgba(248, 200, 224, 0.35);
  --panel-top: #f8c0d8;
  --panel-bottom: #e898c0;
}

html[data-theme="gems"] {
  --burlap: #4a3858;
  --burlap-deep: #2a1838;
  --bamboo: #d4a830;
  --bamboo-dark: #8a6018;
  --wood: #3a2838;
  --wood-hi: #a87848;
  --ink: #100818;
  --cream: #f8f0ff;
  --lime: #c8a8f0;
  --arena-deep: #120818;
  --screen-overlay: rgba(18, 8, 24, 0.45);
  --panel-top: #3a2848;
  --panel-bottom: #281830;
}

html[data-theme="arcade"] {
  --burlap: #2828a8;
  --burlap-deep: #101038;
  --bamboo: #68f0f0;
  --bamboo-dark: #3838c8;
  --wood: #181838;
  --wood-hi: #4848d8;
  --ink: #080818;
  --cream: #e8f8ff;
  --lime: #f0d030;
  --arena-deep: #080818;
  --screen-overlay: rgba(8, 8, 32, 0.5);
  --panel-top: #2020a0;
  --panel-bottom: #101060;
}

html[data-theme="combat"] {
  --burlap: #6a7058;
  --burlap-deep: #3a4030;
  --bamboo: #a8a890;
  --bamboo-dark: #5a5848;
  --wood: #4a5040;
  --wood-hi: #8a8878;
  --ink: #101008;
  --cream: #e8e8d8;
  --lime: #a8b878;
  --arena-deep: #181810;
  --screen-overlay: rgba(24, 24, 16, 0.42);
  --panel-top: #4a5040;
  --panel-bottom: #2a3028;
}

html[data-theme="platform"] {
  --burlap: #68c8f8;
  --burlap-deep: #3888c8;
  --bamboo: #f0d030;
  --bamboo-dark: #c87848;
  --wood: #8a4838;
  --wood-hi: #e87848;
  --ink: #181008;
  --cream: #fff8e8;
  --lime: #48a848;
  --arena-deep: #4898e8;
  --screen-overlay: rgba(56, 136, 200, 0.35);
  --panel-top: #c87848;
  --panel-bottom: #8a4838;
}

html[data-theme="ocean"] {
  --burlap: #38a8c8;
  --burlap-deep: #1868a8;
  --bamboo: #88e8f8;
  --bamboo-dark: #2888b8;
  --wood: #2868a8;
  --wood-hi: #68c8e8;
  --ink: #081828;
  --cream: #e8f8ff;
  --lime: #68e8d8;
  --arena-deep: #083858;
  --screen-overlay: rgba(8, 56, 88, 0.4);
  --panel-top: #2888b8;
  --panel-bottom: #1868a8;
}

html[data-theme="spooky"] {
  --burlap: #482868;
  --burlap-deep: #281038;
  --bamboo: #e87828;
  --bamboo-dark: #6828a8;
  --wood: #3a1848;
  --wood-hi: #a878d8;
  --ink: #100818;
  --cream: #f0e8ff;
  --lime: #88d8f0;
  --arena-deep: #180828;
  --screen-overlay: rgba(24, 8, 40, 0.48);
  --panel-top: #482868;
  --panel-bottom: #281038;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}

html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  background: var(--arena-deep);
  overflow: hidden;
  touch-action: none;
  overscroll-behavior: none;
  font-family: Nunito, system-ui, sans-serif;
}

#arena {
  position: fixed;
  inset: 0;
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.07) 0 2px, transparent 2px 7px),
    repeating-linear-gradient(0deg, rgba(255, 220, 160, 0.05) 0 1px, transparent 1px 5px),
    radial-gradient(ellipse at 50% 20%, #7a5230 0%, var(--burlap) 55%, var(--burlap-deep) 100%);
}

#game {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}

.screen {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(12px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom));
  background: var(--screen-overlay);
}

.screen.hidden { display: none; }
.hidden { display: none !important; }

.dev-unlock-btn {
  position: absolute;
  top: max(10px, env(safe-area-inset-top));
  right: 12px;
  z-index: 6;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 2px solid rgba(255, 244, 210, 0.45);
  border-radius: 10px;
  background: rgba(42, 22, 8, 0.55);
  color: var(--cream);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  box-shadow: none;
}
.dev-unlock-btn.on {
  border-color: #ffe27a;
  color: #ffe27a;
}

.pin-screen,
.debug-screen {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: none;
  align-items: center;
  justify-content: center;
  padding: max(14px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom));
  background: rgba(20, 12, 8, 0.72);
  box-sizing: border-box;
}
.pin-screen.open,
.debug-screen.open { display: flex; }

.pin-panel,
.debug-panel {
  width: min(360px, 100%);
}

.pin-display {
  font-size: 22px;
  letter-spacing: 0.35em;
  text-align: center;
  color: var(--cream);
  margin: 2px 0 10px;
  padding: 10px 8px;
  width: 100%;
  background: rgba(16, 10, 8, 0.55);
  border: 2px solid rgba(255, 226, 122, 0.35);
  border-radius: 8px;
}

.pin-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  width: 100%;
  margin-bottom: 8px;
}

.pin-grid button {
  appearance: none;
  border: 0;
  border-radius: 12px;
  padding: 12px 0;
  font-family: Fredoka, Nunito, sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #fff8e4;
  background: linear-gradient(180deg, var(--wood-hi) 0%, var(--wood) 70%, #4a2c14 100%);
  box-shadow: 0 4px 0 #2a1608, inset 0 1px 0 rgba(255, 230, 160, 0.35);
  cursor: pointer;
}
.pin-grid button:active { transform: translateY(2px); box-shadow: 0 2px 0 #2a1608; }

.pin-msg {
  min-height: 16px;
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-align: center;
  color: #ff8a6a;
  text-transform: uppercase;
  text-shadow: 0 1px 0 #2a1608;
}

.debug-label {
  margin: 0 0 8px;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #e8c888;
  width: 100%;
}

.debug-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-bottom: 10px;
}

.debug-row .wood-btn {
  width: auto;
  min-width: 92px;
  padding: 8px 10px;
  font-size: 13px;
  margin: 0;
}
.debug-row .wood-btn.on {
  color: #2a1608;
  background: linear-gradient(180deg, #ffe27a 0%, #e8c040 70%, #b89020 100%);
  box-shadow: 0 4px 0 #6a4a10, inset 0 1px 0 rgba(255, 255, 220, 0.5);
}

.depot-link {
  position: absolute;
  top: max(10px, env(safe-area-inset-top));
  left: 12px;
  z-index: 6;
  color: var(--cream);
  text-decoration: none;
  font-family: Fredoka, Nunito, sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.04em;
  text-shadow: 0 2px 0 #2a1608;
  opacity: 0.9;
}

.bamboo-panel {
  width: min(520px, 100%);
  max-height: 100%;
  overflow: auto;
  padding: 18px 18px 16px;
  color: var(--cream);
  text-align: center;
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.08) 0 2px, transparent 2px 6px),
    linear-gradient(180deg, var(--panel-top) 0%, var(--panel-bottom) 100%);
  border: 10px solid var(--bamboo);
  border-radius: 18px;
  box-shadow:
    inset 0 0 0 4px var(--bamboo-dark),
    0 10px 0 #5a4010,
    0 18px 28px rgba(0, 0, 0, 0.45);
}

.title-fruit {
  font-size: 28px;
  letter-spacing: 0.2em;
  line-height: 1;
  margin-bottom: 4px;
  filter: drop-shadow(0 2px 0 #2a1608);
}

h1, h2 {
  margin: 0 0 8px;
  font-family: Fredoka, Nunito, sans-serif;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-shadow: 0 3px 0 #2a1608;
}

h1 { font-size: clamp(32px, 8vw, 48px); }
h2 { font-size: clamp(26px, 6vw, 36px); }

.tag {
  margin: 0 0 10px;
  color: #ffe27a;
  font-weight: 800;
  font-size: 15px;
}

.blurb {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.35;
  color: #f3e2c0;
}

.mode-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-bottom: 10px;
}

.wood-btn {
  appearance: none;
  border: 0;
  border-radius: 12px;
  padding: 12px 8px;
  font-family: Fredoka, Nunito, sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #fff8e4;
  background: linear-gradient(180deg, var(--wood-hi) 0%, var(--wood) 70%, #4a2c14 100%);
  box-shadow: 0 4px 0 #2a1608, inset 0 1px 0 rgba(255, 230, 160, 0.35);
  cursor: pointer;
}

.wood-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 #2a1608; }
.wood-btn-wide { width: 100%; margin-top: 8px; }

.theme-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  text-align: left;
}

.theme-label {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #e8c888;
}

.theme-select {
  flex: 1;
  min-width: 0;
  appearance: none;
  border: 0;
  border-radius: 10px;
  padding: 10px 12px;
  font-family: Nunito, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
  background: var(--cream);
  box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

html[data-theme="candy"] .theme-label { color: #a04878; }
html[data-theme="buccaneer"] .theme-label { color: #c8b888; }
html[data-theme="gems"] .theme-label { color: #d4a878; }
html[data-theme="arcade"] .theme-label { color: #68f0f0; }
html[data-theme="combat"] .theme-label { color: #a8b878; }
html[data-theme="platform"] .theme-label { color: #f0d030; }
html[data-theme="ocean"] .theme-label { color: #88e8f8; }
html[data-theme="spooky"] .theme-label { color: #e87828; }

.best-line {
  margin: 12px 0 0;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #e8c888;
}

.objective {
  margin: 0 0 10px;
  color: #ffe27a;
  font-weight: 800;
  font-size: 14px;
}

.objective-rule {
  margin: -4px 0 10px;
  color: #f3e2c0;
  font-weight: 700;
  font-size: 12px;
  line-height: 1.35;
}

.howto-diagram {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 10px;
  margin: 0 0 12px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.18);
  color: #d8ec9a;
  font-size: 12px;
  font-weight: 800;
  text-align: left;
}

.howto-cols {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 10px;
  text-align: left;
}

.howto-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 13px;
  font-weight: 800;
}

.howto-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 5px;
}

.howto-list canvas {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
}

.howto-specials li { align-items: flex-start; }
.howto-specials .spec-copy { line-height: 1.25; color: #f3e2c0; font-weight: 700; }
.howto-specials strong { color: #fff4d2; }

.howto-panel { width: min(560px, 100%); }

.result-stars {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 2px 0 4px;
  font-size: clamp(28px, 8vw, 40px);
  line-height: 1;
  text-shadow: 0 3px 0 #2a1608;
}
.result-stars .star { color: #8a7040; opacity: 0.55; }
.result-stars .star.on { color: #ffe27a; opacity: 1; }

.result-cheer {
  margin: 0 0 4px;
  color: #ffe27a;
  font-weight: 800;
  font-size: 16px;
}

.result-score {
  margin: 4px 0 6px;
  font-family: Fredoka, Nunito, sans-serif;
  font-size: clamp(36px, 10vw, 56px);
  font-weight: 700;
  color: #ffe27a;
  text-shadow: 0 3px 0 #2a1608;
}

.result-sub {
  margin: 0 0 8px;
  color: #f3e2c0;
  font-weight: 800;
}

@media (max-height: 620px) {
  .blurb { display: none; }
  .title-fruit { display: none; }
  .bamboo-panel { padding: 12px; }
}