:root{--g:#398261;--gd:#245f46;--b:#ead9ba;--bl:#c9ad7d;--y:#f4ac00;--r:#f12618;--m:rgba(57,130,97,.58);--font:"Arial Rounded MT Bold","Trebuchet MS",Arial,sans-serif}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;min-height:100%;font-family:var(--font);text-transform:uppercase;color:var(--g);background:#f5f5f2}button,input{font:inherit;text-transform:uppercase}button{cursor:pointer}.desktop{min-height:100vh;display:flex;justify-content:center}.app{width:100%;max-width:430px;min-height:100dvh;background:#fff;position:relative;overflow:hidden;box-shadow:0 0 35px rgba(36,95,70,.08)}
.topbar{height:76px;padding:calc(14px + env(safe-area-inset-top)) 18px 8px;position:absolute;left:0;right:0;top:0;z-index:10;display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none}.brand{width:70px}.sound{pointer-events:auto;border:2px solid var(--g);background:#fff;color:var(--g);border-radius:999px;padding:8px 11px 7px;font-size:10px;font-weight:900;box-shadow:0 3px 0 var(--g)}
.screen{display:none;min-height:100dvh;padding:calc(88px + env(safe-area-inset-top)) 18px calc(18px + env(safe-area-inset-bottom));position:relative;overflow:hidden}.screen.active{display:flex;flex-direction:column;animation:in .25s ease}.step{display:flex;justify-content:space-between;color:var(--m);font-size:9px;font-weight:900;margin-bottom:10px}.heading{display:block;max-width:290px;max-height:92px;object-fit:contain;margin:0 auto 7px}.sub{text-align:center;font-size:11px;line-height:1.45;font-weight:900;color:var(--m);margin:0}.primary,.secondary{width:100%;min-height:52px;border-radius:15px;padding:13px 14px 11px;font-weight:900;font-size:13px}.primary{border:0;background:var(--g);color:#fff;box-shadow:0 5px 0 var(--gd)}.secondary{border:2px solid var(--g);background:#fff;color:var(--g);box-shadow:0 3px 0 var(--g)}.primary:active{transform:translateY(3px);box-shadow:0 2px 0 var(--gd)}
.intro{justify-content:flex-start}.intro-copy{padding-top:55px;z-index:2}.eyebrow{text-align:center;color:var(--m);font-size:9px;font-weight:900;margin:0 0 15px}.title{display:block;width:92%;max-width:360px;margin:0 auto 20px}.intro-text{text-align:center;font-size:12px;line-height:1.45;font-weight:900;margin:0 0 22px}.watching{position:absolute;right:20px;bottom:186px;font-size:9px;font-weight:900;text-align:center}.intro-peek{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:350px;max-width:92%}.intro-peek img{width:100%;display:block}.watching{bottom:250px}
.draw{overflow-y:auto;padding-bottom:calc(42px + env(safe-area-inset-bottom))}.draw-stage{height:auto;min-height:590px;position:relative;margin:8px 0 18px;display:flex;justify-content:center;align-items:flex-start}.draw-stage canvas{width:min(100%,394px);height:auto;display:block;margin:0 auto;touch-action:none}.steam{position:absolute;left:50%;top:26px;width:132px;height:90px;transform:translateX(-50%);z-index:3;pointer-events:none}.steam i,.small-steam i{position:absolute;width:30px;height:70px;border-left:3px solid rgba(57,130,97,.18);border-radius:50%;animation:steam 2.7s infinite ease-in-out}.steam i:nth-child(1){left:10px}.steam i:nth-child(2){left:50px;animation-delay:-.9s}.steam i:nth-child(3){left:90px;animation-delay:-1.7s}.palette{display:grid;grid-template-columns:repeat(4,1fr);gap:13px 8px;width:100%;max-width:344px;margin:4px auto 15px}.color-option{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}.color-option span{font-size:7px;line-height:1;text-align:center;font-weight:900;color:var(--m);white-space:nowrap}.swatch{width:42px;height:42px;border-radius:50%;border:4px solid #fff;background:var(--c);box-shadow:0 0 0 2px var(--g);transition:transform .14s ease}.swatch.selected{transform:scale(1.14)}.swatch.white{box-shadow:0 0 0 2px var(--g),inset 0 0 0 1px #ddd}.swatch.black{box-shadow:0 0 0 2px var(--g)}.two{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:10px}
.order{overflow-y:auto}.order-heading{max-height:82px}.order-scene{height:175px;position:relative;margin:6px 0 8px}.order-scene>img{display:block;height:175px;max-width:100%;margin:0 auto}.small-steam{position:absolute;width:50px;height:80px;left:58%;top:15px}.small-steam i:nth-child(2){left:22px;animation-delay:-1.1s}.drink-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:5px 0 9px}.drink-grid button{border:2px solid var(--g);background:#fff;color:var(--g);border-radius:12px;min-height:40px;padding:8px 5px 7px;font-size:10px;font-weight:900}.drink-grid button.selected{background:var(--y);border-color:var(--y);color:#fff}.order input{width:100%;min-height:48px;border:2px solid var(--g);border-radius:13px;padding:12px;margin-bottom:9px;color:var(--g);font-weight:900}
.judging{align-items:stretch}.judge-heading{max-height:83px}.inspect-scene{height:315px;position:relative;display:flex;justify-content:center;align-items:center;margin:4px 0 2px}.inspect-scene img{height:305px;max-width:95%;object-fit:contain}.lens-glint{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--y);left:63%;top:37%;opacity:0}.lens-glint.flash{animation:flash .4s ease}.checks{margin-top:auto}.checks div{display:grid;grid-template-columns:1fr auto;gap:10px;padding:11px 0;border-bottom:2px dotted rgba(57,130,97,.18);font-size:10px;font-weight:900}.checks b{color:var(--m)}.checks .done b{color:var(--g)}
.result{overflow-y:auto}.result-heading{max-height:83px}.result-card{position:relative;margin-top:7px;padding-bottom:5px}.result-meta{display:flex;justify-content:space-between;color:var(--m);font-size:8px;font-weight:900}.result-cup{position:relative;height:345px}.result-cup canvas{display:block;width:300px;height:auto;margin:0 auto}.stamp{position:absolute;right:13px;top:150px;border:6px solid var(--r);color:var(--r);background:rgba(255,255,255,.88);padding:7px 9px 5px;text-align:center;font-size:20px;line-height:.83;font-weight:900;transform:rotate(-8deg) scale(2);opacity:0}.stamp.slam{animation:stamp .45s cubic-bezier(.15,1.5,.3,1) forwards}.comment-label{text-align:center;color:var(--m);font-size:8px;font-weight:900;margin:0}.comment{text-align:center;font-size:19px;line-height:1.04;font-weight:900;min-height:55px;margin:7px 10px 4px}.order-meta{text-align:center;color:var(--m);font-size:9px;font-weight:900;margin:0}.result-joe{height:165px;display:flex;justify-content:center;align-items:flex-end;overflow:hidden;position:relative}.result-joe img{height:160px;max-width:210px;object-fit:contain}.result-buttons{display:grid;gap:9px;margin-top:auto;position:relative;z-index:3}
@keyframes in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}@keyframes steam{0%{transform:translateY(8px);opacity:0}20%{opacity:1}100%{transform:translate(8px,-25px) scaleY(1.1);opacity:0}}@keyframes flash{0%{opacity:0;box-shadow:0 0 0 0 rgba(244,172,0,.5)}30%{opacity:1;box-shadow:0 0 0 55px rgba(244,172,0,.12)}100%{opacity:0;box-shadow:0 0 0 100px rgba(244,172,0,0)}}@keyframes stamp{0%{transform:rotate(-8deg) scale(2);opacity:0}70%{transform:rotate(-8deg) scale(.9);opacity:1}100%{transform:rotate(-8deg) scale(1);opacity:1}}
@media(max-height:720px){.intro-copy{padding-top:20px}.intro-peek{bottom:0;width:315px}.watching{bottom:215px}.draw-stage{min-height:540px;margin-bottom:14px}.draw-stage canvas{width:min(100%,372px)}.steam{top:24px}.palette{gap:8px 6px;margin-bottom:10px}.swatch{width:38px;height:38px}.color-option span{font-size:6px}.inspect-scene{height:260px}.inspect-scene img{height:250px}.result-cup{height:300px}.result-cup canvas{width:255px}.result-joe{height:128px}.result-joe img{height:124px}}


/* LARGE DRAWING SPACE UPDATE */
.draw{
  overflow-y:auto;
  padding-left:8px;
  padding-right:8px;
  padding-bottom:calc(46px + env(safe-area-inset-bottom));
}
.draw .step,
.draw .heading,
.draw .sub,
.draw .palette,
.draw .pen-tools,
.draw .two,
.draw > .primary{
  width:calc(100% - 20px);
  margin-left:auto;
  margin-right:auto;
}
.draw-stage{
  min-height:680px;
  width:100%;
  margin:8px 0 18px;
  display:flex;
  justify-content:center;
  align-items:flex-start;
}
.draw-stage canvas{
  width:min(100%,414px);
  max-width:none;
  height:auto;
  margin:0 auto;
}
.steam{
  top:21px;
  width:142px;
  height:94px;
}
.steam i{
  height:76px;
}
.steam i:nth-child(1){left:12px}
.steam i:nth-child(2){left:54px}
.steam i:nth-child(3){left:96px}
.palette{
  max-width:360px;
  margin-top:2px;
}
.pen-tools{
  max-width:360px;
  margin-bottom:13px;
  text-align:center;
}
.pen-label{
  display:block;
  margin-bottom:8px;
  color:var(--m);
  font-size:8px;
  font-weight:900;
}
.pen-sizes{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:9px;
}
.pen-size{
  min-height:54px;
  border:2px solid var(--g);
  border-radius:14px;
  background:#fff;
  color:var(--g);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:8px 6px;
  font-size:8px;
  font-weight:900;
}
.pen-size.selected{
  background:var(--g);
  color:#fff;
}
.pen-dot{
  display:block;
  flex:0 0 auto;
  border-radius:50%;
  background:currentColor;
}
.pen-dot.thin{width:7px;height:7px}
.pen-dot.regular{width:13px;height:13px}
.pen-dot.thick{width:21px;height:21px}
.result-cup{height:390px}
.result-cup canvas{width:310px}
@media(max-height:720px){
  .draw-stage{min-height:625px}
  .draw-stage canvas{width:min(100%,400px)}
  .result-cup{height:320px}
  .result-cup canvas{width:265px}
}


.pen-type-tools{max-width:360px;margin-bottom:13px;text-align:center}
.pen-types{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}
.pen-type{min-height:48px;border:2px solid var(--g);border-radius:14px;background:#fff;color:var(--g);display:flex;align-items:center;justify-content:center;padding:8px 10px;font-size:9px;font-weight:900}
.pen-type.selected{background:var(--g);color:#fff}
@media(max-height:720px){.pen-type{min-height:44px;font-size:8px}}


/* RESULT LAYOUT FIX */
.result-card{
  margin-top:10px;
  padding-bottom:18px;
  overflow:visible;
}
.result-cup{
  position:relative;
  width:min(100%,340px);
  height:auto;
  margin:0 auto 20px;
  overflow:visible;
}
.result-cup canvas{
  display:block;
  width:100%;
  height:auto;
  margin:0 auto;
}
.stamp{
  right:-2px;
  top:44%;
  font-size:18px;
  border-width:5px;
  padding:8px 10px 6px;
  max-width:210px;
}
.comment-label{
  margin:0 0 5px;
}
.comment{
  width:100%;
  max-width:370px;
  min-height:0;
  margin:0 auto 12px;
  padding:0 8px;
  font-size:18px;
  line-height:1.08;
  overflow:visible;
  overflow-wrap:anywhere;
}
.order-meta{
  margin:0 0 14px;
}
.result-joe{
  width:100%;
  height:250px;
  margin:0 auto 10px;
  overflow:visible;
  align-items:flex-end;
}
.result-joe img{
  width:auto;
  height:240px;
  max-width:88%;
  object-fit:contain;
}
.result-buttons{
  margin-top:8px;
}
@media(max-height:720px){
  .result-cup{width:min(100%,320px);height:auto}
  .result-cup canvas{width:100%}
  .result-joe{height:220px}
  .result-joe img{height:210px}
}


/* FINAL MOBILE DRAWING BALANCE */
.draw{
  padding-left:14px;
  padding-right:14px;
  padding-bottom:calc(38px + env(safe-area-inset-bottom));
  overscroll-behavior-y:contain;
  -webkit-overflow-scrolling:touch;
}
.draw .step{
  width:100%;
  margin:0 0 5px;
}
.draw .heading{
  width:auto;
  max-width:270px;
  max-height:72px;
  margin:0 auto 3px;
}
.draw .sub{
  width:100%;
  font-size:10px;
  line-height:1.35;
}
.draw-stage{
  width:100%;
  min-height:0;
  height:auto;
  margin:7px 0 6px;
  padding:0;
  align-items:flex-start;
}
.draw-stage canvas{
  width:min(82vw,318px);
  max-width:318px;
  height:auto;
  margin:0 auto;
  touch-action:pan-y;
  -webkit-user-select:none;
  user-select:none;
}
.draw .steam{
  top:17px;
  width:118px;
  height:76px;
}
.draw .steam i{
  height:62px;
}
.draw .steam i:nth-child(1){left:7px}
.draw .steam i:nth-child(2){left:44px}
.draw .steam i:nth-child(3){left:81px}
.tools-jump{
  display:block;
  width:auto;
  min-height:34px;
  margin:0 auto 11px;
  padding:7px 13px 6px;
  border:0;
  border-radius:999px;
  background:transparent;
  color:var(--m);
  font-size:8px;
  font-weight:900;
  text-decoration:underline;
  text-underline-offset:3px;
}
.draw .palette,
.draw .pen-tools,
.draw .two,
.draw > .primary{
  width:100%;
  max-width:360px;
  margin-left:auto;
  margin-right:auto;
}
.draw .palette{margin-top:0}
@media(max-width:370px){
  .draw-stage canvas{width:min(80vw,300px);max-width:300px}
  .draw .heading{max-height:66px}
}
@media(max-height:720px){
  .draw .heading{max-height:62px}
  .draw-stage{min-height:0;margin-top:5px}
  .draw-stage canvas{width:min(78vw,288px);max-width:288px}
  .draw .steam{top:14px;transform:translateX(-50%) scale(.9)}
  .tools-jump{margin-bottom:8px}
}



/* RELIABLE PAGE SCROLL + EXPLICIT DRAW MODE */
html,body{
  min-height:100%;
  height:auto;
  overflow-x:hidden;
  overflow-y:auto;
}
.desktop{
  min-height:100dvh;
  height:auto;
  overflow:visible;
}
.app{
  min-height:100dvh;
  height:auto;
  overflow-x:hidden;
  overflow-y:visible;
}
.screen,
.screen.active{
  min-height:100dvh;
  height:auto;
  overflow-x:hidden;
  overflow-y:visible;
}
.draw{
  overflow:visible !important;
  overscroll-behavior-y:auto;
  -webkit-overflow-scrolling:touch;
}
.interaction-bar{
  position:sticky;
  top:8px;
  z-index:20;
  width:100%;
  max-width:360px;
  margin:8px auto 5px;
  padding:7px;
  border:2px solid rgba(57,130,97,.2);
  border-radius:16px;
  background:rgba(255,255,255,.96);
  box-shadow:0 5px 15px rgba(36,95,70,.08);
  text-align:center;
  backdrop-filter:blur(8px);
}
.interaction-switch{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
}
.interaction-button{
  min-height:39px;
  border:2px solid var(--g);
  border-radius:11px;
  background:#fff;
  color:var(--g);
  font-size:10px;
  font-weight:900;
}
.interaction-button.selected{
  background:var(--g);
  color:#fff;
}
.interaction-bar>span{
  display:block;
  margin-top:6px;
  color:var(--m);
  font-size:7px;
  line-height:1.15;
  font-weight:900;
}
.draw-stage canvas{
  width:min(78vw,300px) !important;
  max-width:300px !important;
  height:auto;
  -webkit-user-select:none;
  user-select:none;
}
.draw-stage canvas.scroll-enabled{
  pointer-events:none;
  touch-action:auto;
}
.draw-stage canvas.drawing-enabled{
  pointer-events:auto;
  touch-action:none;
}
@media(max-width:370px){
  .draw-stage canvas{
    width:min(76vw,286px) !important;
    max-width:286px !important;
  }
}
@media(max-height:720px){
  .draw-stage canvas{
    width:min(74vw,278px) !important;
    max-width:278px !important;
  }
  .interaction-bar{margin-top:5px;padding:6px}
  .interaction-button{min-height:35px;font-size:9px}
}