:root{--rock:#3a2a1f;--rock2:#5a4130;--ochre:#c8642a;--yellow:#e0a93a;--cream:#f0dfc0;--char:#1b1410;--fire:#ff9a2e}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:radial-gradient(ellipse at top,#4a3424,#140d08 70%);color:var(--cream);font-family:'Bricolage Grotesque',sans-serif;overflow:hidden}
body{display:flex;flex-direction:column;height:100dvh}
button{font-family:inherit;cursor:pointer;color:var(--cream)}
#ledge{display:flex;align-items:center;gap:10px;padding:6px 12px;background:linear-gradient(#5a4130,#3a2a1f);box-shadow:inset 0 -6px 12px #0008;border-bottom:3px solid #221811;flex-wrap:wrap}
.titlebox h1{font-family:'Rubik Dirt',cursive;margin:0;font-size:clamp(22px,4vw,38px);letter-spacing:3px;color:var(--yellow);text-shadow:2px 3px 0 #1b1410}
.titlebox p{margin:0;font-family:'Gochi Hand';opacity:.8;font-size:14px}
.torch{width:12px;height:30px;background:linear-gradient(#7a4b25,#3b2412);border-radius:3px;position:relative;margin-top:14px}
.torch i{position:absolute;left:-7px;top:-22px;width:26px;height:26px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:radial-gradient(circle at 60% 40%,#fff4b0,#ffb030 40%,#e4501a 75%);box-shadow:0 0 22px 8px #ff8a2a88;animation:flick .18s infinite alternate}
@keyframes flick{from{transform:rotate(-45deg) scale(1)}to{transform:rotate(-40deg) scale(1.12);filter:brightness(1.2)}}
#actions{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
.stone,#actions button,#walltype button,.hangrow button{background:linear-gradient(145deg,#7a6450,#4b3a2d);border:2px solid #2a1e15;border-radius:14px 9px 16px 8px/10px 15px 9px 14px;padding:6px 10px;box-shadow:inset 0 2px 0 #fff2,0 3px 0 #1a120c;font-size:14px;transition:transform .08s}
#actions button:active,.tool:active,.bowl:active{transform:scale(.9) rotate(-3deg)}
#cave{flex:1;display:flex;min-height:0}
#tools{display:flex;flex-direction:column;gap:6px;padding:8px;background:linear-gradient(90deg,#2c1f16,#3a2a1f);box-shadow:inset -6px 0 10px #0007;overflow:auto}
.tool{width:64px;min-height:58px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(145deg,#6d5845,#3f3025);border:2px solid #22180f;border-radius:18px 10px 20px 12px/12px 20px 10px 18px;font-size:24px;box-shadow:0 4px 0 #150e09,inset 0 2px 0 #fff2;transition:all .15s}
.tool small{font-size:9px;line-height:1;margin-top:2px;opacity:.85;text-align:center}
.tool.on{transform:translateY(-3px);box-shadow:0 7px 0 #150e09,0 0 18px 4px #ff9a2e99,inset 0 2px 0 #fff4;border-color:var(--fire)}
#wallwrap{flex:1;position:relative;min-width:0;overflow:hidden;touch-action:none}
#wallwrap canvas{position:absolute;inset:0;width:100%;height:100%}
#canvas{cursor:crosshair}
#fx{position:absolute;inset:0;pointer-events:none}
#firelight{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 55%,transparent 45%,#1a0c0499 85%,#000c);animation:glow 3s infinite alternate ease-in-out;mix-blend-mode:multiply}
@keyframes glow{0%{opacity:.85}30%{opacity:1}55%{opacity:.8}100%{opacity:.95}}
#walltype{position:absolute;top:8px;right:8px;display:flex;gap:4px}
#walltype button{font-size:11px;padding:4px 8px}
#walltype button.on{border-color:var(--fire);color:var(--yellow)}
#stamps{position:absolute;top:8px;left:8px;display:none;gap:4px;flex-wrap:wrap;max-width:70%}
#stamps.show{display:flex}
#stamps button{background:#2a1e15e0;border:2px solid #5a4130;border-radius:10px;padding:4px 8px;font-size:12px}
#stamps button.on{border-color:var(--fire)}
.ember{position:absolute;width:5px;height:5px;border-radius:50%;background:#ffb030;box-shadow:0 0 6px #ff6a00;animation:rise .8s forwards}
@keyframes rise{to{transform:translate(var(--dx),-50px);opacity:0}}
.drip{position:absolute;top:-20px;width:6px;background:linear-gradient(#7ab0d8aa,#3f6f99);border-radius:0 0 6px 6px;animation:drip 1s ease-in forwards}
@keyframes drip{from{height:0}to{height:120%}}
#controls{display:flex;align-items:center;gap:14px;padding:8px 12px;background:linear-gradient(#3a2a1f,#24180f);border-top:3px solid #150e09;flex-wrap:wrap}
#bowls{display:flex;gap:6px;flex-wrap:wrap}
.bowl{width:40px;height:30px;border-radius:6px 6px 50% 50%/6px 6px 100% 100%;border:3px solid #6d5845;background:#4b3a2d;position:relative;padding:0;box-shadow:0 3px 0 #150e09}
.bowl span{position:absolute;inset:4px 4px 6px;border-radius:50%}
.bowl.on{border-color:var(--fire);box-shadow:0 0 14px 3px #ff9a2e99}
.bowl.on span{animation:swirl 2s linear infinite}
@keyframes swirl{to{transform:rotate(360deg)}}
.slider{display:flex;flex-direction:column;font-size:11px;font-family:'Gochi Hand';font-size:14px}
input[type=range]{-webkit-appearance:none;width:130px;height:10px;background:linear-gradient(90deg,#6b4423 0%,#8a5a2e 100%);border-radius:2px 8px 8px 2px;clip-path:polygon(0 40%,100% 0,100% 100%,0 60%)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:40% 60%;background:var(--yellow);border:2px solid #3b2412}
#grug{margin-left:auto;display:flex;align-items:center;gap:8px}
#bubble{font-family:'Gochi Hand';font-size:16px;background:var(--cream);color:var(--char);padding:6px 12px;border-radius:16px 16px 4px 16px;max-width:320px;box-shadow:0 3px 0 #0006}
#judge{width:50px;height:50px;border-radius:50%;font-size:28px;background:radial-gradient(#a0785a,#5a4130);border:3px solid var(--yellow)}
#judge.think{animation:flick .3s infinite alternate}
footer{text-align:center;font-size:12px;padding:4px;background:#150e09;opacity:.85}
footer a{color:var(--yellow)}
#modal{position:fixed;inset:0;background:#000b;display:flex;align-items:center;justify-content:center;z-index:9;padding:12px}
.hidden{display:none!important}
.tablet{background:linear-gradient(160deg,#6d5845,#3a2a1f);border:4px solid #22180f;border-radius:30px 18px 26px 20px;width:min(900px,100%);max-height:90vh;display:flex;flex-direction:column;padding:14px;box-shadow:0 10px 40px #000}
.mhead{display:flex;gap:8px;align-items:center}
.mhead h2{font-family:'Rubik Dirt';margin:0;flex:1;color:var(--yellow)}
.mhead select,.hangrow input{background:#2a1e15;color:var(--cream);border:2px solid #5a4130;border-radius:8px;padding:6px;font-family:inherit}
#close{background:none;border:none;font-size:22px}
.hangrow{display:flex;gap:6px;margin:10px 0}
.hangrow input{flex:1}
#gallery{overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;font-family:'Gochi Hand'}
.card{background:#2a1e15;border-radius:14px 8px 16px 10px;padding:6px;border:2px solid #5a4130}
.card img{width:100%;border-radius:8px;display:block}
.card .meta{display:flex;justify-content:space-between;align-items:center;font-size:14px;margin-top:4px}
.card button{background:#4b3a2d;border:1px solid #8a6a4a;border-radius:8px;padding:2px 6px}
.card button.lit{background:var(--ochre)}
@media (max-width:700px){
  #cave{flex-direction:column}
  #tools{flex-direction:row;overflow-x:auto;padding:6px}
  .tool{min-width:58px;min-height:52px}
  #actions b{display:none}
  .torch{display:none}
  #controls{gap:8px;padding:6px}
  .bowl{width:32px;height:26px}
  input[type=range]{width:90px}
  #bubble{font-size:13px;max-width:200px}
}