:root{
  box-sizing:border-box;
  --bg:#D6D0C6; --panel:#F3F0EA; --panel-2:#E6E1D8; --slot:#DCD6CB; --line:#B8AFA2;
  --text:#231E19; --muted:#6A6157; --molten:#C9541A; --brass:#8A6A1F;
  --c-common:#6E7380; --c-uncommon:#3E8A2E; --c-rare:#2468B8; --c-epic:#8040B0; --c-legendary:#B87410;
  --up:#2F8A3A; --down:#B83A3A;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#16120F; --panel:#211B17; --panel-2:#2C251F; --slot:#1A1511; --line:#4A3F35;
    --text:#EFE6DA; --muted:#A89A8A; --molten:#FF8A3D; --brass:#D1AE57;
    --c-common:#B8BCC6; --c-uncommon:#6FBF5A; --c-rare:#58A2EE; --c-epic:#B978E6; --c-legendary:#EDAE40;
    --up:#7BD17F; --down:#F07A6E;
  }
}
:root[data-theme="dark"]{
  --bg:#16120F; --panel:#211B17; --panel-2:#2C251F; --slot:#1A1511; --line:#4A3F35;
  --text:#EFE6DA; --muted:#A89A8A; --molten:#FF8A3D; --brass:#D1AE57;
  --c-common:#B8BCC6; --c-uncommon:#6FBF5A; --c-rare:#58A2EE; --c-epic:#B978E6; --c-legendary:#EDAE40;
  --up:#7BD17F; --down:#F07A6E;
}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%;margin:0;overflow:hidden;background:#000}
body{background:#000;color:var(--text);font-family:'Alegreya Sans',system-ui,-apple-system,sans-serif;font-size:15px;user-select:none;-webkit-user-select:none}
#scene{position:fixed;inset:0}
#scene canvas{display:block;cursor:none;touch-action:none;width:100%!important;height:100%!important}
/* a slightly bigger HUD on computers; each card grows from the corner it is pinned to */
/* the HUD scales with the window so it always fits: bigger on large screens, smaller on short laptops */
:root{--hs:1}
body:not(.touch) #hud,body:not(.touch) #side,body:not(.touch) #whud{scale:var(--hs);transform-origin:top left}
body:not(.touch) #side{top:calc(12px + 96px*var(--hs) + env(safe-area-inset-top,0px));max-height:calc((100% - 30px)/var(--hs) - 96px)}
body:not(.touch) #help,body:not(.touch) #whelp{scale:var(--hs);transform-origin:bottom right;max-height:calc((100% - 40px)/var(--hs));overflow:auto}
body:not(.touch) #status,body:not(.touch) #wprompt,body:not(.touch) #dhud{scale:var(--hs);transform-origin:bottom center}
body:not(.touch) #toast{scale:var(--hs);transform-origin:top center}
body:not(.touch) #hudBtn{scale:var(--hs);transform-origin:top right}
.meter label{display:flex;flex-wrap:wrap;gap:0 4px}
#hudBtn{position:fixed;top:calc(10px + env(safe-area-inset-top,0px));right:calc(10px + env(safe-area-inset-right,0px));z-index:45;padding:7px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.35);background:rgba(18,18,22,.55);color:#fff;font:600 12px system-ui,sans-serif;cursor:pointer;-webkit-tap-highlight-color:transparent}
#hudBtn:hover{background:rgba(18,18,22,.75)}
#pause{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:60;background:rgba(8,12,20,.6)}
#pause .btn{width:100%;justify-content:center}
#pauseBtn{display:block;position:fixed;top:calc(10px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);z-index:45;padding:7px 14px;border-radius:14px;border:1px solid rgba(255,255,255,.35);background:rgba(18,18,22,.55);color:#fff;font:600 12px system-ui,sans-serif;-webkit-tap-highlight-color:transparent}
#pauseBtn:hover{background:rgba(18,18,22,.75)} #pauseBtn{cursor:pointer}
#uvBtn{position:fixed;top:calc(10px + env(safe-area-inset-top,0px));left:calc(50% + 58px);z-index:45;padding:7px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.35);background:rgba(18,18,22,.55);color:#fff;font:600 12px system-ui,sans-serif;cursor:pointer;-webkit-tap-highlight-color:transparent}
#uvBtn.on{background:rgba(110,50,230,.75);border-color:rgba(190,150,255,.8);box-shadow:0 0 12px rgba(140,80,255,.7)}
#uvTint{display:none;position:fixed;inset:0;z-index:4;pointer-events:none;background:radial-gradient(ellipse at center,rgba(80,30,190,.06) 25%,rgba(30,8,80,.42) 100%)}
body.dlg #uvBtn{display:none!important}
body.dlg #pauseBtn,body.dlg #fsBtn,body.dlg #touchUI{display:none!important}
#fsBtn{display:none;position:fixed;top:calc(10px + env(safe-area-inset-top,0px));right:calc(50% + 50px);z-index:45;padding:7px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.35);background:rgba(18,18,22,.55);color:#fff;font:600 12px system-ui,sans-serif;cursor:pointer;-webkit-tap-highlight-color:transparent}
#fsBtn:hover{background:rgba(18,18,22,.75)}
body.hudHidden #hud,body.hudHidden #side,body.hudHidden #status,body.hudHidden #help,body.hudHidden #toast,body.hudHidden #whud,body.hudHidden #wprompt,body.hudHidden #lockHint,body.hudHidden #whelp,body.hudHidden #dhud,body.hudHidden #tHint{display:none!important}
kbd{font-family:inherit;font-weight:700;font-size:12px;padding:1px 6px;border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;background:var(--panel-2);color:var(--text)}
.card{background:color-mix(in srgb,var(--panel) 92%,transparent);border:1px solid var(--line);border-radius:10px}
.btn{font:inherit;font-size:14px;background:var(--panel-2);color:var(--text);border:1px solid var(--line);border-radius:7px;padding:7px 12px;cursor:pointer;text-align:left}
.btn:hover{border-color:var(--molten)}
.btn.primary{background:var(--molten);border-color:var(--molten);color:#1B0E05;font-weight:700}
.btn:focus-visible,.sw:focus-visible,.tool:focus-visible{outline:3px solid var(--brass);outline-offset:2px}

#hud{position:fixed;top:calc(12px + env(safe-area-inset-top,0px));left:12px;padding:10px 14px;z-index:10;width:250px}
#hud h1{font-family:'Marcellus',serif;font-weight:400;font-size:24px;margin:0;color:var(--molten);line-height:1.1}
#hud .sub{font-size:14px;color:var(--muted)}
#side{position:fixed;top:calc(96px + env(safe-area-inset-top,0px));left:12px;width:250px;padding:12px 14px;z-index:10;max-height:calc(100% - 110px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));overflow:auto}
#side h2{font-family:'Marcellus',serif;font-weight:400;font-size:17px;margin:0 0 6px}
#side h2:not(:first-child){margin-top:14px}
.tool{display:grid;grid-template-columns:28px 1fr auto;gap:8px;align-items:center;width:100%;font:inherit;color:var(--text);background:none;border:1px solid transparent;border-radius:8px;padding:5px 8px;cursor:pointer;text-align:left}
.tool:hover{background:var(--panel-2)}
.tool[aria-pressed="true"]{border-color:var(--molten);background:var(--panel-2)}
.tool .ic{font-size:20px;text-align:center}
.tool .d{font-size:12.5px;color:var(--muted);display:block;line-height:1.3}
#toolHeat{font-size:12.5px;color:var(--muted);margin:2px 0 10px;line-height:1.35}
#toolHeat .swatches{margin-top:4px}
#toolHeat b{color:var(--ink,inherit)}
#toolHeat .press{margin-top:2px}
.swatches{display:flex;flex-wrap:wrap;gap:5px}
.sw{display:flex;align-items:center;gap:5px;font:inherit;font-size:13px;background:var(--panel-2);color:var(--text);border:2px solid var(--line);border-radius:20px;padding:3px 9px 3px 4px;cursor:pointer}
.sw i{width:14px;height:14px;border-radius:50%;border:1px solid rgba(0,0,0,.35)}
.sw[aria-pressed="true"]{border-color:var(--molten)}
.actions{display:grid;gap:6px}
.actions .btn{display:flex;justify-content:space-between;align-items:center}

#status{position:fixed;left:50%;bottom:calc(6px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);width:min(520px,calc(100vw - 24px));padding:10px 16px 12px;z-index:10}
.meters{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.meter label{display:flex;justify-content:space-between;font-size:13px;color:var(--muted)}
.meter label b{color:var(--text)}
.bar{height:7px;border-radius:4px;background:color-mix(in srgb,var(--text) 15%,transparent);overflow:hidden;margin-top:3px}
.bar i{display:block;height:100%;width:50%;transition:background .2s}
#heatBar{background:linear-gradient(90deg,#B3361A,var(--molten),#FFD27A)}
#hint{margin-top:8px;font-size:14.5px;text-align:center;min-height:21px}
#result{position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);width:min(520px,calc(100vw - 24px));padding:14px 18px;z-index:11;text-align:center;display:none}
#result h2{font-family:'Marcellus',serif;font-weight:400;font-size:24px;margin:2px 0}
#result p{margin:4px 0 10px;color:var(--muted)}
/* phone result screen (RESULT SCREEN): a summary card instead of the paragraph; the desktop card keeps the paragraph */
#resGrab,#resBadge,#resStats,#resWarn,#resNote{display:none}
body.touch.resOn #touchUI,body.touch.resOn #side,body.touch.resOn #tTools{display:none!important}
body.touch #result{left:0;right:0;bottom:0;transform:none;width:auto;max-width:560px;margin:0 auto;border-radius:18px 18px 0 0;border-bottom:0;padding:8px 16px calc(14px + env(safe-area-inset-bottom,0px));text-align:left;max-height:62vh;overflow-y:auto;-webkit-overflow-scrolling:touch;z-index:45;box-shadow:0 -8px 30px rgba(0,0,0,.35)}
body.touch #result #resText{display:none}
body.touch #result kbd{display:none}
body.touch #resGrab{display:block;width:40px;height:4px;border-radius:2px;background:var(--line);margin:2px auto 10px}
body.touch #resBadge:not(:empty){display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:3px 9px;border-radius:999px;border:1px solid currentColor}
body.touch #result h2{font-size:22px;line-height:1.2;margin:6px 0 10px}
body.touch #resStats:not(:empty){display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:0 0 10px}
#resStats .st{background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:7px 4px;text-align:center;min-width:0}
#resStats .st b{display:block;font-size:17px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#resStats .st span{display:block;font-size:11px;color:var(--muted);margin-top:1px}
#resStats .st.gold b{color:var(--brass)}
body.touch #resWarn:not(:empty){display:flex;gap:10px;align-items:center;border-radius:10px;padding:9px 11px;margin:0 0 10px;font-size:14px;line-height:1.35;background:var(--panel-2);border:1px solid var(--line);color:var(--text)}
#resWarn .wi{font-size:20px;line-height:1;flex:none}
#resWarn .wt{flex:1;min-width:0}
#resWarn .wc{flex:none;font-weight:700;font-size:20px;font-variant-numeric:tabular-nums}
body.touch #resWarn.bad{border-color:var(--down,#C0392B);background:color-mix(in srgb,var(--down,#C0392B) 14%,var(--panel-2))}
body.touch #resWarn.warn{border-color:var(--molten);background:color-mix(in srgb,var(--molten) 12%,var(--panel-2))}
body.touch #resWarn.ok{border-color:var(--c-uncommon)}
body.touch #resNote:not(:empty){display:block;font-size:14px;line-height:1.4;margin:0 0 12px}
body.touch #resBtns{flex-direction:column;gap:8px}
body.touch #resBtns .btn{width:100%;min-height:48px;font-size:16px;justify-content:center;text-align:center;border-radius:12px}
body.touch #resBtns.urgent #toKilnBtn{order:-1;background:var(--molten);border-color:var(--molten);color:#1B0E05;font-weight:700}
body.touch #resBtns.urgent #newBtn{background:var(--panel-2);border-color:var(--line);color:var(--text);font-weight:400}
@media (orientation:landscape) and (max-height:540px){
  body.touch #result{left:auto;right:calc(10px + env(safe-area-inset-right,0px));top:calc(50px + env(safe-area-inset-top,0px));bottom:auto;width:min(380px,46vw);max-width:none;margin:0;max-height:calc(100vh - 58px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));border-radius:16px;border-bottom:1px solid var(--line);padding:10px 14px;box-shadow:0 8px 30px rgba(0,0,0,.35)}
  body.touch #resGrab{display:none}
  body.touch #result h2{font-size:19px;margin:4px 0 8px}
  body.touch #result h2{font-size:18px;margin:3px 0 7px}
  body.touch #resStats:not(:empty){gap:5px;margin-bottom:8px} #resStats .st{padding:5px 2px} #resStats .st b{font-size:15px}
  body.touch #resWarn:not(:empty){padding:7px 10px;margin-bottom:8px;font-size:13px}
  body.touch #resNote:not(:empty){font-size:13px;margin-bottom:8px}
  body.touch #resBtns{flex-direction:row} body.touch #resBtns .btn{min-height:42px;font-size:15px;flex:1 1 0;min-width:0;padding:7px 8px}
}
#help{position:fixed;right:12px;bottom:calc(14px + env(safe-area-inset-bottom,0px));padding:8px 12px;font-size:13px;line-height:1.95;color:var(--muted);z-index:9;width:220px}
#help b{color:var(--text);font-weight:500}
#toast{position:fixed;top:calc(14px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);padding:6px 14px;z-index:12;display:none;font-weight:700}
@media (max-width:1050px){#help{display:none}}
@media (max-width:700px){#side{top:auto;bottom:150px;max-height:35%}}
.walkonly{display:none}
#whud{position:fixed;top:calc(12px + env(safe-area-inset-top,0px));left:12px;padding:10px 14px;z-index:10;width:240px}
#whud h1{font-family:'Marcellus',serif;font-weight:400;font-size:22px;margin:0 0 4px;color:var(--molten);line-height:1.1}
#whud .row{display:flex;justify-content:space-between;font-size:14px;color:var(--muted);margin-top:2px}
#whud .row b{color:var(--text)}
#whud .gold{color:var(--c-legendary)}
#cross{position:fixed;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:#fff;box-shadow:0 0 0 1.5px rgba(0,0,0,.6);z-index:9;pointer-events:none;transition:transform .12s,background .12s}
#cross.on{background:var(--molten);transform:scale(1.8)}
#wprompt{position:fixed;left:50%;top:calc(50% + 28px);transform:translateX(-50%);padding:6px 14px;z-index:9;white-space:nowrap}
#lockHint{position:fixed;left:50%;top:calc(50% + 70px);transform:translateX(-50%);padding:6px 14px;z-index:9;pointer-events:none}
#whelp{position:fixed;right:12px;bottom:calc(14px + env(safe-area-inset-bottom,0px));padding:8px 12px;font-size:13px;line-height:1.7;color:var(--muted);z-index:9;width:270px}
#whelp b{color:var(--text);font-weight:500}
.speech{position:fixed;pointer-events:none;transform:translate(-50%,-100%);padding:3px 9px;border-radius:10px;font-size:13.5px;font-weight:700;background:var(--panel);color:var(--text);border:1px solid var(--line);z-index:8;white-space:nowrap}
#dhud{position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);padding:10px 16px;z-index:10;text-align:center;max-width:calc(100vw - 24px)}
#dhud .drow{display:flex;justify-content:space-between;gap:30px;font-size:18px;font-family:'Marcellus',serif}
#dhud #dspeed{font-size:26px;color:var(--molten)}
#dhud .dkeys{font-size:13px;color:var(--muted);margin-top:4px;line-height:1.9}
#kiln{position:fixed;inset:0;display:none;place-items:center;z-index:20;background:rgba(8,12,20,.45)}
#gasShop{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:30;background:rgba(8,12,20,.5)}
#shop{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:30;background:rgba(8,12,20,.5)}
.shoprow{display:flex;align-items:center;gap:8px;padding:5px 0;border-bottom:1px solid var(--line)}.shoprow .btn{padding:5px 8px;font-size:12px}.price{font-weight:700;color:var(--molten);min-width:42px;text-align:right}
.swatch{width:22px;height:22px;border-radius:6px;display:inline-block;border:1px solid var(--line)}
/* glossy glass-rod swatches: a bright top highlight and a darker underside, like a lit color rod */
.rodbtn i,.rodsw{background-image:linear-gradient(180deg,rgba(255,255,255,.7) 0%,rgba(255,255,255,.18) 30%,rgba(255,255,255,0) 52%,rgba(0,0,0,.12) 75%,rgba(0,0,0,.38) 100%)}
.rodbtn{padding:3px 7px 3px 3px}.rodbtn i{width:18px;height:18px}
.rodsw{width:34px;height:12px;border-radius:6px}
#casino{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:30;background:rgba(8,12,20,.5)}
.reels{display:flex;gap:8px;justify-content:center;margin:8px 0}.reel{width:86px;height:96px;background:#F4F1EA;border:4px solid #C9A04A;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:52px}
.reel.spinning{filter:blur(1.5px);opacity:.85}.casmsg{text-align:center;font-weight:700;font-size:16px;margin:6px 0;color:var(--molten)}
.felt{background:#1A6A3A;border:6px solid #5A3218;border-radius:14px;padding:10px 12px}.cards{display:flex;gap:6px;flex-wrap:wrap;min-height:66px}
.pcard{width:44px;height:62px;background:#FFF;border-radius:6px;color:#111;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:20px;box-shadow:0 2px 6px rgba(0,0,0,.4)}
.pcard b{font-size:16px}.pcard.red{color:#C81E2A}.pcard.back{background:repeating-linear-gradient(45deg,#8A1A2A 0 6px,#B82A3A 6px 12px);border:3px solid #FFF}
#saw{position:fixed;left:0;right:0;bottom:0;display:none;align-items:flex-end;justify-content:center;z-index:30;pointer-events:none;padding:0 8px calc(8px + env(safe-area-inset-bottom,0px))}
#saw .panel{pointer-events:auto;max-height:42vh;overflow:auto;padding:12px 14px;border-radius:14px;border:1px solid var(--line);box-sizing:border-box;background:color-mix(in srgb,var(--panel) 94%,transparent)}
/* wet saw panel (renderSaw): header with the bowl count, status, three slim gauges, motor/water toggles, a fence stepper,
   a strip of canes and two big hold buttons along the bottom; phones get a bottom sheet (portrait) or a right-hand panel (landscape) */
.sawHead{display:flex;align-items:center;gap:8px;margin-bottom:4px}.sawHead h2{margin:0}
.sawBowlN{font-size:13px;color:var(--muted);background:var(--panel-2);border:1px solid var(--line);border-radius:999px;padding:2px 9px}.sawBowlN b{color:var(--text)}
#sawClose{margin-left:auto}
.sawMsg{min-height:2.6em;margin:2px 0 6px;font-size:13px;line-height:1.35}
.sawG{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 8px}
.sawG div{display:flex;flex-direction:column;gap:3px;font-size:11px;color:var(--muted)}
.sawG i{display:block;height:8px;background:var(--panel-2);border:1px solid var(--line);border-radius:5px;overflow:hidden}.sawG em{display:block;height:100%;width:0}
.sawRow{display:flex;gap:6px;flex-wrap:wrap;align-items:stretch;margin-bottom:8px}
.sawTg{display:flex;align-items:center;gap:7px;padding:6px 10px}.sawTg .sti{font-size:18px;line-height:1;filter:grayscale(1);opacity:.6}
.sawTg b{display:block;font-size:13px}.sawTg small{display:block;font-size:11px;color:var(--muted)}
.sawTg.on{border-color:var(--up);background:color-mix(in srgb,var(--up) 14%,var(--panel-2))}.sawTg.on .sti{filter:none;opacity:1}.sawTg.on small{color:var(--up);font-weight:700}
.sawFence{display:flex;align-items:center;gap:6px;margin-left:auto;font-size:12px;color:var(--muted)}.sawFence .btn{width:34px;height:34px;padding:0;justify-content:center;text-align:center;font-size:18px}
.sawFence b{min-width:52px;text-align:center;color:var(--text);font-size:14px}.sawFence.busy{opacity:.5}
.sawCanes{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;margin-bottom:8px;scrollbar-width:thin}
.sawCanes .btn{flex:none;display:flex;flex-direction:column;align-items:center;gap:3px;padding:5px 6px;font-size:11px}.sawCanes img{border-radius:50%;display:block}
.sawCanes .btn.on{border-color:var(--molten);box-shadow:0 0 0 1px var(--molten)}
.sawHold{display:flex;gap:8px}.sawHold .btn{flex:1 1 0;justify-content:center;text-align:center;min-height:44px;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.sawHold .btn.primary{flex:1.6 1 0}.sawHold .btn.down{filter:brightness(1.15);transform:scale(.98)}.sawHold .btn:disabled{opacity:.45}
body.touch.sawOn #touchUI,body.touch.sawOn #whud,body.touch.sawOn #cross,body.touch.sawOn #wprompt{display:none!important}
body.sawOn #lockHint{display:none!important}
body.touch #saw{padding:0}
body.touch #saw .panel{width:100%!important;max-width:560px;max-height:47vh;border-radius:18px 18px 0 0;border-bottom:0;padding:10px 14px calc(12px + env(safe-area-inset-bottom,0px));box-shadow:0 -8px 30px rgba(0,0,0,.35)}
body.touch #saw kbd{display:none}
body.touch .sawHold .btn{min-height:56px;font-size:16px;border-radius:12px}
body.touch .sawTg{min-height:44px}
body.touch .sawFence .btn{width:40px;height:40px}
@media (orientation:landscape) and (max-height:540px){
  body.touch #saw{justify-content:flex-end;align-items:stretch;top:calc(50px + env(safe-area-inset-top,0px));padding:0 calc(10px + env(safe-area-inset-right,0px)) calc(8px + env(safe-area-inset-bottom,0px)) 0}
  body.touch #saw .panel{width:min(380px,46vw)!important;max-height:none;height:auto;align-self:flex-end;border-radius:16px;border-bottom:1px solid var(--line);padding:10px 12px;overflow:auto;max-height:100%}
  body.touch .sawMsg{min-height:0}
  body.touch .sawHold .btn{min-height:48px}
}
#milli{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:30;background:rgba(8,12,20,.5)}
#milliPanel{width:min(820px,calc(100vw - 16px));padding:12px 14px;max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px);overflow:auto;overscroll-behavior:contain}
/* phones: the Millefiori panel fills the screen and scrolls, the tab row (with Close) stays pinned on top, bigger tap targets;
   the game's own buttons (Pause, HUD, stick, Blow) are hidden while it is open (body.mlo) */
body.mlo #pauseBtn,body.mlo #fsBtn,body.mlo #hudBtn,body.mlo #touchUI{display:none!important}
body.touch #milli{align-items:flex-start;padding:calc(6px + env(safe-area-inset-top,0px)) calc(6px + env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom,0px)) calc(6px + env(safe-area-inset-left,0px));background:rgba(8,12,20,.7)}
body.touch #milliPanel{width:100%;max-width:820px;margin:0 auto;padding:0 10px 10px;max-height:calc(100dvh - 12px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))}
body.touch #milliPanel .mtabs{position:sticky;top:0;z-index:2;background:var(--panel-2);margin:0 -10px 8px;padding:8px 10px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
body.touch #milliPanel .mtabs .btn{flex:none;min-height:38px;padding:6px 12px;font-size:14px}
body.touch #milliPanel .mrow{gap:6px}
body.touch #milliPanel .mrow .btn{min-height:38px;padding:6px 11px;font-size:13px}
body.touch #milliPanel .mrow .sw{min-width:40px;min-height:40px;font-size:18px}
body.touch #milliPanel .mcols .sw i{width:24px;height:24px}
body.touch #milliPanel .mlab{font-size:13px;min-height:36px}
body.touch #milliPanel .mlab input[type=range]{height:30px}
body.touch #milliPanel .mlab input[type=checkbox]{width:22px;height:22px}
body.touch #milliPanel select,body.touch #milliPanel input:not([type]),body.touch #milliPanel input[type=text]{min-height:38px;font-size:16px}
body.touch #milliPanel .mmilli img{width:64px;height:64px}
body.touch #milliPanel .mlist{max-height:none}
/* landscape phone: the pattern on the left, sized to the screen height and kept in view; the controls scroll beside it */
@media (orientation:landscape) and (max-height:540px){ body.touch #milliPanel .mgrid{grid-template-columns:auto minmax(0,1fr);align-items:start} body.touch #milliPanel .mgrid>div:first-child{position:sticky;top:62px} body.touch #mdCanvas{width:min(320px,calc(100dvh - 120px));height:auto} }
/* portrait phone: one column, the pattern as wide as the screen allows */
@media (orientation:portrait){ body.touch #milliPanel .mgrid{grid-template-columns:1fr} body.touch #mdCanvas{display:block;width:min(100%,360px);height:auto;margin:0 auto} }
.mtabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}.mtabs .btn.on{border-color:var(--molten);color:var(--molten)}
.mgrid{display:grid;grid-template-columns:minmax(0,340px) 1fr;gap:12px}@media(max-width:640px){.mgrid{grid-template-columns:1fr}}
.mside{display:flex;flex-direction:column;gap:6px}.mrow{display:flex;flex-wrap:wrap;gap:4px}.mrow .btn{padding:5px 8px;font-size:12px}
.mrow .sw.on{border-color:var(--molten)}.mcols .sw{padding:3px}.mcols .sw i{width:18px;height:18px}
.mlab{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:6px}.mlab input[type=range]{flex:1}
.mdes{display:inline-flex;gap:2px}.mlist{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;max-height:340px;overflow:auto}
.mmilli{background:var(--panel-2);border:2px solid var(--line);border-radius:10px;padding:3px;display:flex;flex-direction:column;align-items:center;font-size:11px;color:var(--muted);cursor:pointer}
.mmilli.on{border-color:var(--molten)}.mmilli img{width:56px;height:56px}
.mcane{display:flex;align-items:center;gap:8px;margin:4px 0;font-size:12px;color:var(--muted)}.mcane img{width:44px;height:44px}
#kiln.open{display:grid}
#kiln .panel{width:min(600px,calc(100vw - 20px));max-height:calc(100% - 40px);overflow:auto;padding:18px 20px;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:0 20px 60px rgba(0,0,0,.4)}
#kiln h2{font-family:'Marcellus',serif;font-weight:400;font-size:22px;margin:0;flex:1}
#kiln h3{font-family:'Marcellus',serif;font-weight:400;font-size:17px;margin:16px 0 4px}
.kbar{height:6px;border-radius:3px;background:color-mix(in srgb,var(--text) 15%,transparent);overflow:hidden;margin-top:4px;width:160px}
.kbar i{display:block;height:100%;background:linear-gradient(90deg,#B3361A,var(--molten),#FFD27A)}
#ped{position:fixed;inset:0;display:none;place-items:center;z-index:20;background:rgba(8,12,20,.45)}
#ped.open{display:grid}
#ped .panel{width:min(620px,calc(100vw - 20px));max-height:calc(100% - 40px);overflow:auto;padding:18px 20px;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:0 20px 60px rgba(0,0,0,.4)}
#ped h2{font-family:'Marcellus',serif;font-weight:400;font-size:22px;margin:0;flex:1}
#pedPanel.wide{width:min(760px,calc(100vw - 20px))}
.invwrap{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-start;margin-top:10px}
#pedPanel.wide2{width:min(1040px,calc(100vw - 20px))}
.invcol{flex:none}
.invGrid{position:relative;flex:none;border:1px solid var(--line);border-radius:6px;background-color:rgba(0,0,0,.18);background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);touch-action:none;user-select:none}
#invSide{flex:1;min-width:180px}
.invit{position:absolute;border-radius:5px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.35),0 1px 3px rgba(0,0,0,.3);cursor:grab;overflow:hidden;display:flex;align-items:center;justify-content:center;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.8);font-size:11px;font-weight:700;line-height:1.05;text-align:center;padding:2px;box-sizing:border-box;touch-action:none}
.invit span{overflow-wrap:anywhere;max-width:100%;max-height:100%}.invit.dk{color:#1A2A3A;text-shadow:none}.invit .vt{writing-mode:vertical-rl;transform:rotate(180deg)}
.invit b{position:absolute;right:3px;bottom:2px;font-size:11px;background:rgba(0,0,0,.55);color:#fff;border-radius:6px;padding:0 4px;text-shadow:none}
.invit.sel{outline:2px solid var(--molten);outline-offset:1px}.invit.drag{z-index:5;cursor:grabbing;opacity:.92}
#ped h3{font-family:'Marcellus',serif;font-weight:400;font-size:17px;margin:16px 0 4px}
.phead{display:flex;align-items:center;gap:10px}
.prow{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.prow:last-child{border-bottom:0}
.prow .nm{font-weight:700}
.prow .mt{font-size:13px;color:var(--muted)}
.pricebox{display:flex;gap:8px;align-items:center;margin-top:8px;flex-wrap:wrap}
.pricebox input{font:inherit;width:100px;padding:6px 8px;border:1px solid var(--line);border-radius:6px;background:var(--slot);color:var(--text)}
.note{font-size:13px;color:var(--muted);line-height:1.5;margin:6px 0 0}