:root{--paper:#FBF3E4;--peach:#F6D7B0;--coral:#E8674A;--ink:#2A1F3D;--star:#F5C842;--pink:#F9C9D4;--sky:#BFE4F5;--white:#FFFDF7;--grey:#8E8A9A;--k:1;--u:calc(1px*var(--k))}.skin-pink{--paper:#FCE6EA;--peach:#F8CDD3;--coral:#E4557C;--pink:#F6AFC3;--sky:#D9DCF6}.skin-peach{--paper:#FCE5CF;--peach:#F5C495;--coral:#E9733A;--pink:#F8CDB5;--sky:#CFE6EF}.skin-blue{--paper:#E6F2F9;--peach:#C4DFF0;--coral:#3E8FD9;--pink:#CBD8F6;--sky:#A5D5EE}.skin-gold{--paper:#FFF1C9;--peach:#F9DC8B;--coral:#D9962B;--pink:#FBE3A6;--sky:#FFE9A8;--star:#FFC93C}*{box-sizing:border-box}html,body{height:100%;margin:0;overflow:hidden;background:#2a1f3d;overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:none;-webkit-text-size-adjust:100%;text-size-adjust:100%}#app{position:fixed;inset:0;overflow:hidden;touch-action:none;color:var(--ink);font-family:Patrick Hand,Segoe Print,Comic Sans MS,cursive}#paperBg{position:absolute;inset:0;width:100%;height:100%}svg{overflow:visible}path{vector-effect:none}.ink{fill:none;stroke:var(--ink);stroke-linecap:round;stroke-linejoin:round;stroke-width:3}.ink2{stroke:var(--ink);stroke-linecap:round;stroke-linejoin:round;stroke-width:3}.f-paper{fill:var(--paper)}.f-peach{fill:var(--peach)}.f-coral{fill:var(--coral)}.f-ink{fill:var(--ink)}.f-star{fill:var(--star)}.f-pink{fill:var(--pink)}.f-sky{fill:var(--sky)}.f-white{fill:var(--white)}.f-grey{fill:var(--grey)}.f-none{fill:none}.thin{stroke-width:1.6}.thick{stroke-width:4.5}.s-coral{stroke:var(--coral)}.s-star{stroke:var(--star)}.s-white{stroke:var(--white)}.s-grey{stroke:var(--grey)}.s-none{stroke:none}.glyph{fill:none;stroke-linecap:round;stroke-linejoin:round}.t-ink{stroke:var(--ink)}.t-paper{stroke:var(--white)}.t-coral{stroke:var(--coral)}.t-star{stroke:var(--star)}.t-grey{stroke:var(--grey)}body.boil .wob{filter:url(#wobble)}body.boil .wobi{filter:url(#wobbleInk)}body.boil.q-medium .wobi{filter:url(#wobble)}body.boil.q-low .wob,body.boil.q-low .wobi{filter:none}body.q-low #paperBg{filter:none!important}#stage{position:absolute;inset:0;display:flex;flex-direction:column;gap:8px;padding:max(8px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));transform-origin:50% 50%;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;scrollbar-width:none}#stage::-webkit-scrollbar{display:none}#app[data-mode=draw] #stage{overflow:hidden;overflow:clip}#hud{flex:0 0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;position:relative;z-index:6}.hud-btns{display:flex;gap:6px;order:1}.hud-btns .dbtn{width:calc(44px*var(--k))}.starwrap{order:2;margin-left:auto}.starwrap .chip{width:calc(96px*var(--k))}.hud-chips{order:3;flex:1 1 100%;display:flex;justify-content:center;gap:6px}.hud-chips .chip{flex:1 1 0;min-width:0;max-width:calc(122px*var(--k))}.chip{position:relative;filter:drop-shadow(3px 4px 0 var(--ink))}.chip svg{display:block;width:100%;height:auto}#skyWrap{position:absolute;left:0;top:0;width:0;height:0;z-index:2;opacity:0;pointer-events:none}#skyWrap svg{display:block;width:100%;height:100%}#app[data-mode=draw] #playfield{will-change:transform}#playfield{flex:1 1 0;min-height:170px;display:flex;gap:8px;position:relative;z-index:4;transform-origin:50% 100%}#boardWrap{flex:1 1 0;min-width:0;position:relative}#board{width:100%;height:100%;display:block;touch-action:manipulation}#side{flex:0 0 clamp(78px,18vw,170px);display:flex;flex-direction:column;justify-content:space-between;align-items:center;min-height:0;gap:6px}#ladder{width:100%;min-height:0;flex:0 1 auto;margin:auto 0}#ladder svg{display:block;width:100%;height:auto;max-height:100%}#buddy{width:100%;flex:0 0 auto;max-width:120px}#buddy svg{display:block;width:100%;height:auto}#lamp{position:absolute;inset:-8px;width:calc(100% + 16px);height:calc(100% + 16px);pointer-events:none;opacity:0}#controls{flex:0 0 auto;position:relative;z-index:6;width:100%;max-width:calc(560px*var(--k));margin-inline:auto}#ctrlDraw{display:flex;flex-direction:column;gap:8px}#app[data-mode=draw] #ctrlIdle{display:none}#app:not([data-mode=draw]) #ctrlDraw{display:none}.crow{display:flex;gap:8px;align-items:stretch;justify-content:center}.crow>*{flex:1 1 0;min-width:0}.dbtn.fl,.chip.fl{display:block;min-width:0;min-height:0}.dbtn.fl svg,.chip.fl svg{display:block;width:100%;height:100%}#ctrlIdle{--bh:clamp(38px,5.6vh,56px);--ph:clamp(48px,7.4vh,74px);--g:clamp(6px,1.1vh,10px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:var(--bh) var(--ph) var(--bh);gap:var(--g)}#ctrlIdle .c-qp{grid-area:1/1/2/4}#ctrlIdle .c-clr{grid-area:1/4/2/7}#ctrlIdle .c-hot{grid-area:1/7/2/10}#ctrlIdle .c-pay{grid-area:1/10/2/13}#ctrlIdle .c-bet{grid-area:2/1/3/7}#ctrlIdle .c-play{grid-area:2/7/3/13}#ctrlIdle .c-auto{grid-area:3/1/4/5}#ctrlIdle .c-turbo{grid-area:3/5/4/9}#ctrlIdle .c-buy{grid-area:3/9/4/13}.betbox{display:flex;align-items:stretch;gap:var(--g);min-width:0}.betbox .step{flex:0 0 min(var(--ph),26%);height:100%}.betbox .chip{flex:1 1 0;height:100%}.dbtn.off{opacity:.55;filter:grayscale(.35)}#overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:20}#overlay .tap{pointer-events:auto;cursor:pointer}#modal{position:absolute;inset:0;z-index:50;pointer-events:none}#curl{position:absolute;inset:0;z-index:60;pointer-events:none;overflow:hidden}#toast{position:absolute;left:0;right:0;top:14%;z-index:55;display:flex;justify-content:center;pointer-events:none}#app[data-mode=draw] .hud-btns .dbtn:nth-child(2),#app[data-mode=draw] .hud-btns .dbtn:nth-child(3),#app[data-mode=draw] .hud-chips .chip:nth-child(2),#app[data-mode=draw] .hud-chips .chip:nth-child(4){display:none}@media (orientation:landscape){#stage{display:grid;grid-template-columns:minmax(0,1fr) clamp(190px,34vw,340px);grid-template-rows:auto minmax(150px,1fr);column-gap:12px}#hud{grid-column:1/-1;flex-wrap:nowrap}.hud-chips{order:2;flex:1 1 auto;gap:10px}.starwrap{order:3;margin-left:0}.hud-chips{min-width:0}.hud-chips .chip{flex:0 1 auto;max-width:none;min-width:0;width:calc(clamp(28px,11vh,calc(46px*var(--k)))*2.4)}.hud-chips .chip svg{width:100%;height:auto}#playfield{grid-row:2;grid-column:1}#controls{grid-row:2;grid-column:2;align-self:stretch;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;scrollbar-width:none;max-width:none;margin:0}#controls::-webkit-scrollbar{display:none}#ctrlIdle{--sh:clamp(32px,7.6vh,48px);--ph:clamp(46px,13vh,82px);--bh:clamp(38px,10.4vh,64px);--xh:clamp(34px,7.6vh,48px);--rg:clamp(8px,3.4vh,30px);--cg:clamp(6px,2vw,22px);min-height:100%;padding:4px clamp(0px,1vw,12px);grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:var(--sh) var(--ph) var(--bh) var(--bh) var(--xh);row-gap:var(--rg);column-gap:var(--cg);align-content:safe center}#ctrlIdle .c-bet{grid-area:1/1/2/13}#ctrlIdle .c-play{grid-area:2/1/3/13}#ctrlIdle .c-qp{grid-area:3/1/4/7}#ctrlIdle .c-clr{grid-area:3/7/4/13}#ctrlIdle .c-hot{grid-area:4/1/5/7}#ctrlIdle .c-pay{grid-area:4/7/5/13}#ctrlIdle .c-auto{grid-area:5/1/6/5}#ctrlIdle .c-turbo{grid-area:5/5/6/9}#ctrlIdle .c-buy{grid-area:5/9/6/13}#ctrlIdle .betbox{justify-content:space-between;gap:0}#ctrlIdle .betbox .step{flex:0 0 auto;aspect-ratio:1/1;width:auto}#ctrlIdle .betbox .chip{flex:0 1 46%}#controls{position:static}#side{flex-basis:clamp(78px,14vw,172px)}}#app.lefty #playfield,#app.lefty .crow{flex-direction:row-reverse}@media (orientation:landscape){#app.lefty #stage{grid-template-columns:clamp(190px,34vw,340px) minmax(0,1fr)}#app.lefty #playfield{grid-column:2}#app.lefty #controls{grid-column:1}}.dbtn{all:unset;box-sizing:border-box;cursor:pointer;display:block;position:relative;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.dbtn svg{display:block;width:100%;height:auto;overflow:visible}.dbtn .face{transition:transform .07s ease-out}.dbtn .sh{transition:transform .07s ease-out;transform-origin:0 0}.dbtn:active:not(:disabled) .face,.dbtn.down .face{transform:translate(5px,5px)}.dbtn:active:not(:disabled) .sh,.dbtn.down .sh{transform:scale(.97)}.dbtn:disabled{opacity:.42;filter:grayscale(.5);cursor:default}.dbtn{transition:opacity .15s,filter .15s}.dbtn.wait{opacity:.5;filter:grayscale(.45);cursor:wait}.dbtn:focus-visible{outline:3px dashed var(--coral);outline-offset:4px;border-radius:12px}.dbtn.on .fc{fill:var(--star)}.txtsvg{display:inline-block;vertical-align:middle;overflow:visible}.scrim{position:absolute;inset:0;background:#2a1f3d8c;pointer-events:auto;display:flex;align-items:safe center;justify-content:safe center;overflow:auto;touch-action:pan-y;padding:max(14px,env(safe-area-inset-top)) 16px max(14px,env(safe-area-inset-bottom))}.card{position:relative;display:flex;flex-direction:column;width:min(94vw,520px);max-height:100%;min-height:0;filter:drop-shadow(7px 8px 0 var(--ink))}.card .cardbg{position:absolute;inset:0;width:100%;height:100%;z-index:0}.card .body{position:relative;z-index:1;flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;touch-action:pan-y;padding:calc(24px*var(--k)) calc(22px*var(--k));display:flex;flex-direction:column;align-items:center;gap:calc(12px*var(--k));scrollbar-width:none}.card .body::-webkit-scrollbar{display:none}.card .body>*{flex:0 0 auto;max-width:100%}.card .wide{width:100%}.row{display:flex;align-items:center;justify-content:space-between;width:100%;gap:10px}.rowc{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;width:100%}.stack{display:flex;flex-direction:column;gap:8px;width:100%}.stack .dbtn{width:100%}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}.card{--mbh:clamp(40px,5.6vh,52px)}.dbtn.mb{width:100%;height:var(--mbh)}.brow{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:8px;width:100%}.card .body>.brow,.card .body>.stack,.card .body>.dbtn.mb{max-width:calc(360px*var(--k))}.trow{min-height:var(--mbh)}.trow .dbtn.tg{flex:0 0 calc(86px*var(--k));width:calc(86px*var(--k))}.card .cap{margin:4px 0 -4px}.btnw{width:calc(150px*var(--k))}.btnw.sm{width:calc(104px*var(--k))}.btnw.lg{width:calc(210px*var(--k))}.card .body{padding-inline:calc(3% + 16px);margin:10px 0 14px}.tgrid{display:flex;flex-direction:column;gap:calc(12px*var(--k));width:100%}@media (orientation:landscape) and (max-height:560px){.card{width:min(90vw,560px);--mbh:clamp(32px,9vh,42px)}.card .body>.brow,.card .body>.stack,.card .body>.dbtn.mb{max-width:none}.card .body{padding:4px calc(3% + 18px) 2px;gap:8px}.card .stack.menu{display:grid;grid-template-columns:1fr 1fr}.tgrid{display:grid;grid-template-columns:1fr 1fr;column-gap:24px;row-gap:8px}.card .spage{height:clamp(70px,22vh,120px)!important}}.card .body>.dbtn.mb:last-child,.card .body>.brow:last-child{position:sticky;bottom:0;z-index:3;background:var(--paper);box-shadow:0 -4px 0 0 var(--paper);margin-top:6px}.sticky{filter:drop-shadow(4px 5px 0 var(--ink))}#modal .drag{touch-action:none;cursor:grab}body.q-low .card,body.q-low .chip{filter:none}@media (prefers-reduced-motion:reduce){.dbtn .face,.dbtn .sh{transition:none}}.cloudfill{fill:var(--cloudc,#CFE8F8);stroke:none}.cloudline{fill:#fffdf7;fill-opacity:.72;stroke:#7d7789;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}.cloudmark{fill:none;stroke:#7d7789;stroke-width:2.2;stroke-linecap:round;opacity:.8}.sundisc{fill:#ffd54f;stroke:none}.sunline{fill:none;stroke:#7d7789;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}.sunface{fill:none;stroke:#6b6478;stroke-width:2.4;stroke-linecap:round}.suncheek{fill:#ffb4b8;stroke:none;opacity:.7}body.q-low #paperBg .paperfill{filter:none}body.boil.q-high #overlay{filter:url(#wobble)}#app.golden #ctrlIdle .play{filter:drop-shadow(0 0 10px #F5C842)}.toasttag{filter:drop-shadow(4px 5px 0 var(--ink));padding:0}.toasttag svg{display:block}#app[data-mode=draw] #controls{position:static}#app[data-mode=draw] #ctrlDraw{display:grid;grid-template-columns:var(--lw,1fr) var(--rw,1fr);column-gap:var(--cgap,10px);grid-template-rows:var(--rowh,52px)}#ctrlDraw .collect{grid-area:1/1/2/2}#ctrlDraw .drawrow{grid-area:1/2/2/3}#ctrlDraw .crow,.collect{display:flex;flex-direction:row;align-items:stretch;justify-content:center;gap:clamp(8px,1.6vw,14px);min-width:0;height:var(--rowh,52px);position:relative}#ctrlDraw .crow>.dbtn,.collect>.dbtn{flex:0 1 calc(var(--rowh,52px)*3.1);min-width:0;height:100%}#ctrlDraw .dbtn svg{width:100%;height:100%}.cdbar{position:absolute;left:4%;right:4%;top:-9px;height:4px;border-radius:2px;background:#2a1f3d2e;overflow:hidden;pointer-events:none}.cdbar>div{width:100%;height:100%;background:var(--star);border-right:2px solid var(--ink);transform-origin:0 50%}#app[data-mode=draw][data-orient=portrait] #side{display:none}#app.intro #stage,#app.intro #toast{visibility:hidden}
