:root{
  --wood-dark:#3d2612;
  --wood-mid:#8a5a2b;
  --wood-light:#c89a5e;
  --ink:#2a1a0c;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{
  margin:0;padding:0;
  width:100%;height:100%;
  height:100dvh;                 /* survives the mobile browser chrome */
  background:#241408;
  overflow:hidden;
  overscroll-behavior:none;
  touch-action:none;
  font-family:"Trebuchet MS",Verdana,system-ui,sans-serif;
  user-select:none;-webkit-user-select:none;
  -webkit-touch-callout:none;
  position:fixed;                /* stops iOS rubber-banding the page */
  inset:0;
}
#stage{position:fixed;inset:0;display:block;}
#game{display:block;width:100%;height:100%;touch-action:none;cursor:crosshair;}

.overlay{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(20,10,4,.62);
  z-index:5;
}
.overlay.hidden{display:none;}

/* ------------------------------------------------------------ main menu */
.menu{
  background:linear-gradient(180deg,rgba(20,10,4,.30),rgba(20,10,4,.55));
  overflow:auto;
}
.menuInner{
  width:min(92vw,520px);
  padding:18px 10px 26px;
  text-align:center;
}
.logo{
  margin:0 0 6px;
  line-height:.92;
  transform:rotate(-3deg);
}
.logo span{
  display:block;
  font-family:"Segoe Script","Brush Script MT",cursive;
  font-size:clamp(46px,15vw,86px);
  color:#e23b2c;
  text-shadow:0 0 0 #fff, 3px 3px 0 #7a1409, 0 5px 18px rgba(0,0,0,.55);
  -webkit-text-stroke:4px #fff8ec;
  paint-order:stroke fill;
}
.logo em{
  display:block;
  font-style:normal;
  font-family:"Segoe Script","Brush Script MT",cursive;
  font-size:clamp(26px,8vw,44px);
  color:#e23b2c;
  -webkit-text-stroke:3px #fff8ec;
  paint-order:stroke fill;
  text-shadow:2px 3px 0 #7a1409;
  margin-top:-6px;
}

.leaves{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  margin-top:14px;
}
/* Leaf-shaped buttons: an SVG mask carves the leaf silhouette out of a
   coloured gradient, and a second SVG paints the midrib + side veins. */
.leaf{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  width:min(80vw,320px);
  min-height:104px;
  padding:14px 30px;
  cursor:pointer;
  font-family:"Segoe Script","Brush Script MT",cursive;
  font-size:clamp(26px,7vw,38px);
  color:#fff;
  text-shadow:0 2px 5px rgba(0,0,0,.55);
  border:none;
  background-color:transparent;
  filter:drop-shadow(0 8px 12px rgba(0,0,0,.5));
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 120' preserveAspectRatio='none'><path d='M4,72 C64,2 250,-10 316,44 C264,118 76,132 4,72 Z' fill='black'/></svg>");
  mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 120' preserveAspectRatio='none'><path d='M4,72 C64,2 250,-10 316,44 C264,118 76,132 4,72 Z' fill='black'/></svg>");
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  transition:transform .1s ease, filter .1s ease;
}
.leaf::after{
  /* midrib + side veins */
  content:"";
  position:absolute;inset:0;
  pointer-events:none;
  opacity:.5;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 120' preserveAspectRatio='none'><g stroke='white' fill='none' stroke-linecap='round'><path d='M10,70 C110,44 220,34 312,44' stroke-width='3'/><path d='M60,58 C74,40 92,30 108,24' stroke-width='2'/><path d='M110,52 C124,36 142,26 158,20' stroke-width='2'/><path d='M160,46 C174,32 192,24 208,20' stroke-width='2'/><path d='M210,42 C224,32 240,26 256,24' stroke-width='2'/><path d='M62,60 C78,76 96,88 116,96' stroke-width='2'/><path d='M112,54 C128,72 146,84 166,92' stroke-width='2'/><path d='M162,48 C178,66 196,78 214,84' stroke-width='2'/><path d='M212,44 C226,58 242,68 258,74' stroke-width='2'/></g></svg>");
  background-size:100% 100%;
  background-repeat:no-repeat;
}
.leaf-green{background-image:radial-gradient(120% 130% at 28% 18%,#6ccf3f,#2c8a20 62%,#14571a);transform:rotate(-5deg);}
.leaf-teal{background-image:radial-gradient(120% 130% at 28% 18%,#48c2d2,#127886 62%,#0b4d58);transform:rotate(4deg) translateX(9%);}
.leaf-gold{background-image:radial-gradient(120% 130% at 28% 18%,#f0d445,#bb8f10 62%,#7d5d08);transform:rotate(-3deg) translateX(-7%);font-size:clamp(20px,5.4vw,28px);}
.leaf-green:active{transform:rotate(-5deg) scale(.95);}
.leaf-teal:active{transform:rotate(4deg) translateX(9%) scale(.95);}
.leaf-gold:active{transform:rotate(-3deg) translateX(-7%) scale(.95);}
.leaf:active{filter:brightness(1.12) drop-shadow(0 4px 8px rgba(0,0,0,.5));}

/* Settings gear, tucked in the corner clear of the notch */
.gear{
  position:absolute;
  top:calc(10px + env(safe-area-inset-top));
  right:calc(10px + env(safe-area-inset-right));
  width:52px;height:52px;
  display:flex;align-items:center;justify-content:center;
  font-size:26px;line-height:1;
  color:#3a2109;
  cursor:pointer;
  border-radius:50%;
  border:3px solid #4d2e12;
  background:linear-gradient(180deg,#ffd98a,#d69f47);
  box-shadow:0 4px 0 #6b4118, 0 6px 12px rgba(0,0,0,.45);
}
.gear:active{transform:translateY(3px);box-shadow:0 1px 0 #6b4118;}

.bestLine{
  margin:18px 0 0;
  color:#ffe6b8;
  letter-spacing:3px;
  font-size:14px;
  text-shadow:0 2px 3px rgba(0,0,0,.6);
}
.bestLine b{font-size:20px;color:#fff6dd;}

/* ------------------------------------------------------- wooden panels */
.panel{
  width:min(84vw,360px);
  max-height:88vh;
  overflow:auto;
  padding:26px 22px 22px;
  text-align:center;
  border-radius:14px;
  color:#f6e6c8;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.10) 0 2px, rgba(255,255,255,.03) 2px 6px),
    linear-gradient(180deg,#a9702f,#7a4a1f 60%,#5d3616);
  border:3px solid #43280f;
  box-shadow:0 14px 34px rgba(0,0,0,.55), inset 0 2px 0 rgba(255,225,170,.25);
}
.panel h1{
  margin:0 0 14px;
  font-size:clamp(24px,7vw,34px);
  letter-spacing:2px;
  color:#ffe9bd;
  text-shadow:0 2px 0 #3a2109, 0 0 12px rgba(0,0,0,.4);
}
.panel .row{
  display:flex;justify-content:space-between;align-items:center;
  margin:8px 4px;font-size:16px;letter-spacing:1px;
  color:#f0dcb4;
}
.panel .row b{font-size:20px;color:#fff4d6;}
.panel .hint{
  margin:12px 2px;font-size:14px;line-height:1.45;color:#e8d2a6;
}
.panel .warn{
  margin:12px 0;padding:10px;
  font-size:14px;font-weight:bold;line-height:1.4;
  color:#ffdfd4;
  background:rgba(150,25,10,.55);
  border:2px solid #59180c;
  border-radius:8px;
}

.woodBtn{
  display:block;width:100%;margin:16px auto 0;
  padding:14px 10px;
  font:inherit;font-size:18px;font-weight:bold;letter-spacing:2px;
  color:#3a2109;
  cursor:pointer;
  border-radius:10px;
  border:3px solid #4d2e12;
  background:linear-gradient(180deg,#ffd98a,#e0a94f 55%,#c1873a);
  box-shadow:0 5px 0 #6b4118, 0 8px 14px rgba(0,0,0,.4);
  transition:transform .06s ease, box-shadow .06s ease;
}
.woodBtn.small{font-size:14px;padding:12px;margin-top:10px;opacity:.92;}
.woodBtn:active{transform:translateY(4px);box-shadow:0 1px 0 #6b4118, 0 3px 8px rgba(0,0,0,.4);}
.woodBtn.off{
  color:#6b5a45;
  background:linear-gradient(180deg,#c7b596,#a08f74 55%,#87775f);
}

.newBest{
  margin:0 0 10px;
  font-size:16px;font-weight:bold;letter-spacing:3px;
  color:#b6ff7a;
  text-shadow:0 2px 0 #24400f;
  animation:newBestPulse .9s ease-in-out infinite;
}
.newBest.hidden{display:none;}
@keyframes newBestPulse{
  0%,100%{transform:scale(1);}
  50%{transform:scale(1.12);}
}

@media (prefers-reduced-motion: reduce){
  .newBest{animation:none;}
  .leaf,.woodBtn{transition:none;}
}

/* Short viewports (landscape phones): tighten the menu so it still fits */
@media (max-height:520px){
  .leaf{min-height:70px;padding:8px 24px;font-size:22px;}
  .leaves{gap:0;}
  .logo span{font-size:40px;}
  .logo em{font-size:22px;}
}

/* ------------------------------------------------------- custom game screen */
.leaf-purple{background-image:radial-gradient(120% 130% at 28% 18%,#b46ce0,#7429ad 62%,#4d1275);transform:rotate(3deg) translateX(6%);}
.leaf-purple:active{transform:rotate(3deg) translateX(6%) scale(.95);}

#customOverlay{align-items:stretch;justify-content:center;padding:0;}
.customPanel{
  display:flex;flex-direction:column;
  width:min(100vw,520px);height:100%;
  background:linear-gradient(180deg,#7a4a1f,#5d3616);
  color:#f6e6c8;
}
.customHead{
  display:flex;align-items:center;gap:10px;
  padding:calc(10px + env(safe-area-inset-top)) 12px 10px;
  background:linear-gradient(180deg,#e6c489,#bf9358);
  border-bottom:3px solid #43280f;
}
.customHead h1{margin:0;font-size:20px;letter-spacing:2px;color:#3a2109;}
.backBtn{
  width:42px;height:42px;flex:none;
  font-size:22px;line-height:1;color:#3a2109;cursor:pointer;
  border-radius:10px;border:2px solid #4d2e12;
  background:linear-gradient(180deg,#ffd98a,#d69f47);
}
.backBtn:active{transform:translateY(2px);}
.customBody{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:12px;touch-action:pan-y;}
.customBody h2{
  margin:16px 2px 8px;font-size:13px;letter-spacing:3px;
  color:#ffd79a;text-transform:uppercase;
}
.customBody h2:first-child{margin-top:2px;}

.cuRow{
  display:flex;align-items:center;gap:10px;
  margin-bottom:8px;padding:8px;
  background:rgba(0,0,0,.18);
  border:2px solid #43280f;border-radius:10px;
}
.cuRow.off{opacity:.45;}
.cuRow.standalone{margin:12px 0;}
.cuTick{
  width:34px;height:34px;flex:none;
  font-size:18px;line-height:1;color:#1d4a0c;cursor:pointer;
  border-radius:8px;border:2px solid #43280f;
  background:linear-gradient(180deg,#cfe9a8,#9dc772);
}
.cuRow.off .cuTick{background:linear-gradient(180deg,#b6a98f,#8d8069);}
.cuName{
  flex:1;display:block;text-align:left;
  background:none;border:none;color:inherit;font:inherit;cursor:pointer;padding:2px 0;
}
.cuName b{display:block;font-size:15px;letter-spacing:1px;color:#ffeec6;}
.cuName b em{font-style:normal;font-size:10px;letter-spacing:2px;color:#ff9c7a;}
.cuName span{display:block;font-size:11px;color:#d8c2a0;margin-top:2px;}
.cuGo{
  width:30px;flex:none;background:none;border:none;
  color:#ffd79a;font-size:22px;cursor:pointer;
}
.cuEnabled{font-size:14px;letter-spacing:1px;}

.cuEditHead{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.cuEditHead h2{margin:0;font-size:16px;color:#ffeec6;}
.cuPreview{
  display:block;width:100%;max-width:260px;height:150px;margin:0 auto 6px;
  background:rgba(0,0,0,.22);border:2px solid #43280f;border-radius:10px;
}
.cuWarn{
  margin:10px 0;padding:10px;font-size:12px;line-height:1.4;
  color:#ffdfd4;background:rgba(150,25,10,.5);
  border:2px solid #59180c;border-radius:8px;
}

.cuSlider{display:block;margin:14px 2px;}
.cuSliderTop{
  display:flex;justify-content:space-between;align-items:baseline;
  font-size:13px;letter-spacing:1px;color:#f0dcb4;margin-bottom:6px;
}
.cuSliderTop b{color:#ffeec6;font-size:14px;}
.cuSlider input[type=range]{
  -webkit-appearance:none;appearance:none;
  width:100%;height:26px;background:transparent;cursor:pointer;touch-action:pan-y;
}
.cuSlider input[type=range]::-webkit-slider-runnable-track{
  height:8px;border-radius:5px;
  background:linear-gradient(180deg,#3a2109,#6b4a24);
  border:1px solid #2c1a08;
}
.cuSlider input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:26px;height:26px;margin-top:-10px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#ffe6a8,#d69f47 70%,#9c6a24);
  border:2px solid #43280f;
}
.cuSlider input[type=range]::-moz-range-track{
  height:8px;border-radius:5px;background:#4a2c12;
}
.cuSlider input[type=range]::-moz-range-thumb{
  width:24px;height:24px;border-radius:50%;
  background:#e8b563;border:2px solid #43280f;
}

.ghostBtn{
  display:block;width:100%;margin:6px 0 2px;padding:12px;
  font:inherit;font-size:13px;letter-spacing:2px;
  color:#c9b48c;background:rgba(0,0,0,.15);
  border:2px dashed #6b4a24;border-radius:10px;
}

.customFoot{
  flex:none;padding:10px 12px calc(12px + env(safe-area-inset-bottom));
  background:rgba(0,0,0,.28);
  border-top:3px solid #43280f;
}
.cuDiff{display:flex;flex-direction:column;align-items:center;gap:2px;margin-bottom:8px;}
.cuBars{font-size:15px;letter-spacing:2px;line-height:1;}
.cuDiff b{font-size:16px;letter-spacing:3px;}
.cuSurvival{font-size:11px;color:#d8c2a0;letter-spacing:1px;}
.cuButtons{display:flex;gap:8px;}
.cuButtons .woodBtn{margin-top:0;}
.customFoot .woodBtn{margin-top:8px;}

/* ------------------------------------------------------------- creator */
.cuRow.made{border-color:#7a3fb0;box-shadow:inset 0 0 0 1px rgba(180,110,224,.35);}
.cuName b i{font-style:normal;font-size:10px;letter-spacing:2px;color:#c79cf0;}

.customBody h3{
  margin:14px 2px 6px;font-size:12px;letter-spacing:2px;
  color:#ffd79a;text-transform:uppercase;
}
.chips{display:flex;flex-wrap:wrap;gap:6px;}
.chip{
  padding:9px 13px;min-height:40px;
  font:inherit;font-size:13px;letter-spacing:1px;
  color:#f0dcb4;cursor:pointer;
  background:rgba(0,0,0,.22);
  border:2px solid #43280f;border-radius:9px;
}
.chip.on{
  color:#2a1a08;font-weight:bold;
  background:linear-gradient(180deg,#ffd98a,#d69f47);
  border-color:#ffe9bd;
}
.chip:active{transform:translateY(2px);}

.swatch{
  width:40px;height:40px;padding:0;cursor:pointer;
  border:2px solid #43280f;border-radius:9px;
}
.swatch.on{border-color:#fff3d4;box-shadow:0 0 0 2px rgba(255,235,190,.5);}

.cuName-input{display:block;margin:6px 2px 2px;}
.cuName-input span{
  display:block;font-size:12px;letter-spacing:2px;
  color:#ffd79a;text-transform:uppercase;margin-bottom:5px;
}
.cuName-input input{
  width:100%;padding:11px 12px;
  font:inherit;font-size:15px;color:#3a2109;
  background:linear-gradient(180deg,#f4e0b8,#dcc094);
  border:2px solid #43280f;border-radius:9px;
}
.cuNote{margin:6px 2px;font-size:11px;color:#c9b48c;line-height:1.4;}
.woodBtn.danger{
  color:#ffe2da;
  background:linear-gradient(180deg,#d4523a,#a32d18 55%,#7d1f0e);
}