/* Player controls share the stall's paper, jade and brass palette. */
body{padding-bottom:calc(112px + env(safe-area-inset-bottom))}body.is-playing{padding-bottom:0}
.settings-open{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;border:1px solid #c6d0af77;border-radius:50%;color:#e9d29e;background:#294b46;font-size:23px;touch-action:manipulation}
.quick-dock{position:fixed;z-index:30;left:50%;bottom:calc(12px + env(safe-area-inset-bottom));translate:-50% 0;display:flex;align-items:center;gap:10px;width:min(540px,calc(100% - 24px));padding:9px 10px;border:1px solid #e5c881;border-radius:18px;background:#173832f5;box-shadow:0 8px 28px #071e25a6;backdrop-filter:blur(12px)}
.quick-dock>div{min-width:0;flex:1}.quick-dock #dock-kit{width:100%;min-height:44px;padding:2px 4px;background:none;border:0;color:#f4e6c2;text-align:left;font-size:12px;line-height:1.4;overflow-wrap:anywhere}.quick-dock small{display:block;padding:0 4px;font-size:12.1px;color:#c9d6bc;line-height:1.5}
.is-playing #quick-dock,body[data-results=true] #quick-dock{display:none}body:has(dialog[open]) #quick-dock{visibility:hidden}
.work-button{display:flex;align-items:center;justify-content:center;gap:12px;border:1px solid #ffe2a0!important;border-radius:14px!important;background:linear-gradient(135deg,#f4d58f,#e7ba6d)!important;color:#263e35!important;font:650 18px/1.3 var(--display);box-shadow:0 4px 0 #927346,0 0 0 3px #e9c77b1c;min-height:62px;padding:10px 16px!important;touch-action:manipulation}.work-button:active{translate:0 2px;box-shadow:0 2px 0 #927346}.work-button:focus-visible{outline:3px solid #f8edce;outline-offset:4px}
.work-symbol{position:relative;display:block;width:43px;height:43px;flex:0 0 43px}.work-symbol svg{display:block;width:100%;height:100%;overflow:visible}.work-shoe{transform-origin:70% 80%;animation:work-slap 2.8s ease-in-out infinite}.work-bang{animation:work-pop 2.8s ease-in-out infinite}.work-stamp{position:absolute;left:-5px;bottom:-3px;border:1px solid #8f5a37;background:#fff0b9;color:#784c34;padding:1px 3px;font:650 12.1px/1.2 'DM Sans',sans-serif;rotate:-9deg;white-space:nowrap}.quick-dock .work-button{min-height:56px;font-size:17px;gap:8px;padding:7px 13px!important;flex:none}.quick-dock .work-symbol{width:34px;height:34px;flex-basis:34px}
@keyframes work-slap{0%,60%,100%{transform:rotate(-10deg)}68%{transform:translateY(-4px) rotate(16deg)}78%{transform:translateY(3px) rotate(-22deg)}86%{transform:translateY(-2px) rotate(5deg)}}
@keyframes work-pop{0%,70%,100%{opacity:.2;scale:.8}79%,85%{opacity:1;scale:1.12}}
.ux-dialog{inset:0;margin:auto;width:min(440px,calc(100vw - 28px));max-height:calc(100vh - 28px);max-height:calc(100dvh - 28px);overflow:auto;overscroll-behavior:contain;padding:26px 22px;border:1px solid #ddc58b;border-radius:22px;color:#f2e3be;background:#25443e;box-shadow:0 16px 65px #071d22a6}
.ux-dialog::backdrop{background:#0b2027cf;backdrop-filter:blur(4px)}.ux-dialog h2{font:500 25px/1.3 var(--display);margin:4px 30px 14px 0;overflow-wrap:anywhere}.ux-dialog h3{font:500 19px/1.4 var(--display);margin:22px 0 10px}.ux-dialog p,.ux-dialog li{font-size:13px;line-height:1.7;overflow-wrap:anywhere}.ux-dialog ol{padding-left:23px}.ux-dialog li+li{margin-top:9px}.dialog-x{position:absolute;right:6px;top:6px;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:none;color:#eed7a1;font-size:26px}.dialog-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:17px}.dialog-actions button{flex:1 1 140px;min-height:44px;margin:0!important;padding:10px 12px;font-size:13px;line-height:1.4}.ux-dialog .soft-button,.ux-dialog .bbl-button{min-height:44px}.ux-dialog #settings-done{display:block;width:100%;margin:18px 0 0}.settings-voice{display:flex;align-items:center;gap:10px;min-height:44px;font-size:13px}.settings-voice input{width:20px;height:20px;margin:0}.save-banner{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid #e5bc7b;background:#624c35;border-radius:12px;margin:16px 0;font-size:12px;line-height:1.6}.save-banner span{flex:1;min-width:0}.save-banner button{min-height:44px;padding:7px 10px;border:1px solid #efce91;border-radius:9px;color:#f9e6b7;background:#3c493b;flex:none}
body:has(.ux-dialog[open]){overflow:hidden}#pause-kit-note{font-size:12px;line-height:1.6;margin:6px 0;color:#d9dfbd}#pause-exit-note{font-size:12px;line-height:1.6;margin:12px 0;color:#f1c6a4}#pause-skill-help{min-height:44px;font-size:12px;margin:5px 0}.pause-card{max-height:calc(100dvh - 28px);overflow:auto;overscroll-behavior:contain}.pause-card>span{font-size:28px}.pause-card h2{margin:8px 0}
.result-next{display:flex;flex-wrap:wrap;gap:9px;margin:14px 0 20px}.result-next .bbl-button{flex:1 1 100%;margin:0!important}.result-next .soft-button{flex:1 1 130px;margin:0!important;min-height:44px;padding:10px 9px;font-size:13px}.kit-usage-result{padding:13px;border:1px dashed #d4c18a;border-radius:13px;background:#173b33;margin:12px 0}.kit-usage-result p{font-size:12px;line-height:1.7;margin:0 0 9px}.kit-usage-result button{min-height:44px;margin:4px!important;font-size:12px;padding:9px}#result-kit-art{float:left;width:49px;height:59px;margin:0 11px 6px 0}#result-kit-art svg{width:100%;height:100%}#result-kit-art.is-broken{filter:grayscale(.6);rotate:-10deg}
.stall-tabs{position:sticky;top:0;z-index:12;background:#193b35}.shop-tools{position:sticky;top:var(--stall-tabs-height,58px);z-index:11;display:grid;grid-template-columns:minmax(0,1fr) 117px;gap:7px;padding:11px 0;background:#20433b;box-shadow:0 4px 0 #17372e55}.shop-tools p{grid-column:1/-1;font-size:12.1px;line-height:1.5;margin:0;color:#e6d8b3}.shop-tools input,.shop-tools select{width:100%;min-width:0;min-height:44px;padding:9px 10px;border:1px solid #b8c3a477;border-radius:9px;background:#17372f;color:#f2e7ca;font:13px/1.3 'DM Sans',sans-serif}.shop-tools select{padding-right:24px}#kit-empty{padding:16px 0;font-size:12px;line-height:1.6}#kit-empty button{min-height:44px}#kit-filter-count{color:#c1d0af}#shop-message{bottom:calc(112px + env(safe-area-inset-bottom))}
#neighbourhood-hub{scroll-margin-top:12px}.journey-tabs{display:flex;flex-wrap:wrap;gap:5px;position:sticky;top:0;z-index:13;background:#23453d;padding:7px 0;margin-bottom:14px}.journey-tabs button{flex:1 0 51px;min-height:44px;padding:6px;border:1px solid #a6bb9266;border-radius:8px;font:12px/1.3 'DM Sans',sans-serif;color:#dfe4bf;background:#1d3a32}.journey-tabs button[aria-selected=true]{background:#ebcb83;color:#283f31;border-color:#f2d99f}.journey-tabs button:focus-visible{outline:3px solid #f4df9d;outline-offset:2px}
.layout-map{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:18px 0 8px}.layout-map button{min-width:0;min-height:92px;position:relative;display:grid;place-items:center;padding:8px 3px;border:1px solid #a3b58a77;border-radius:10px;background:#193b31;color:#ebdfb8;touch-action:none}.layout-map svg{width:50px;height:50px;pointer-events:none}.layout-map button>span{position:absolute;left:4px;top:4px;font-size:12.1px;background:#ddc783;color:#293f31;border-radius:50%;width:21px;height:21px;display:grid;place-items:center}.layout-map small{display:block;font-size:12.1px;line-height:1.4;overflow-wrap:anywhere;pointer-events:none}.layout-map button[aria-pressed=true],.layout-map button.is-drop-target{outline:3px solid #eccd88;outline-offset:-3px;background:#466044}.layout-map button.is-dragging{opacity:.6;scale:.95}#layout-map-note{font-size:12px;line-height:1.6;color:#e7d9b4}
.piece-manage{position:static;display:block;width:100%;height:100%;min-width:44px;min-height:44px;border:0;background:none;padding:0;color:inherit;cursor:pointer}.piece-manage:focus-visible{outline:3px solid #f2cf83;border-radius:8px;outline-offset:2px}.piece-manage .furnishing-art{display:block}#decor-quick-art{height:110px;text-align:center}#decor-quick-art svg{width:110px;height:110px}#decor-quick-health{width:100%;height:14px;accent-color:#b5ce9f}#decor-quick-discard{color:#f5c1a3}#decor-quick-days{margin:8px 0}
.skill-help-art{position:relative;width:120px;height:120px;margin:8px auto 15px}.skill-help-art svg{width:100%;height:100%;animation:help-tap 2.3s ease-in-out infinite}.skill-help-art[data-gesture=drag] svg,.skill-help-art[data-gesture=swipe] svg,.skill-help-art[data-gesture=trace] svg{animation:help-drag 3s ease-in-out infinite}.skill-help-art[data-gesture=circle] svg{animation:help-circle 4s ease-in-out infinite}#kit-demo{min-height:44px;margin:0 0 8px;font-size:12px;color:#f0d99d}#skill-help-note{background:#183b31;padding:10px 12px;border-radius:10px;color:#e4ddba}
@keyframes help-tap{0%,100%{transform:translateY(0) rotate(-5deg)}45%{transform:translateY(9px) rotate(8deg)}}@keyframes help-drag{0%,100%{transform:translateX(-20px) rotate(-6deg)}50%{transform:translateX(20px) rotate(6deg)}}@keyframes help-circle{0%,100%{transform:translate(-10px,-8px) rotate(-10deg)}50%{transform:translate(10px,8px) rotate(10deg)}}
#kit-step-progress{font-size:12.1px;color:#e7d5a8;margin-left:auto;padding:0 6px;white-space:nowrap}.kit-guidance>div{gap:3px}.kit-guidance>div>b{min-width:0}
.is-playing .beat-panel .personality-hud{height:80px;flex-basis:80px}.is-playing .beat-panel .event-banner{padding:5px 8px;font-size:12.1px;line-height:1.3}.event-copy{flex:1;min-width:0}.event-copy #event-label{display:block}.event-meta{display:flex;align-items:center;gap:7px;margin-top:5px;font-size:12.1px;line-height:1.2;color:#ffedb8}.event-meta>span{white-space:nowrap}.event-meta progress{flex:1;width:40px;min-width:25px;height:5px;accent-color:#f5d48a}.is-playing .beat-panel:has(.event-banner:not([hidden])) .rhythm-rail{opacity:.6}
.bare-hands-button{min-height:44px!important}.welcome-options{min-height:44px}.welcome-options label{display:flex;align-items:center;gap:8px;min-height:44px}.welcome-options input{width:20px;height:20px}.is-playing .beat-panel .gesture-tools .gesture-hint{border:0;border-top:1px dashed #c3c09a88;background:transparent;box-shadow:none;border-radius:0;cursor:default;padding:4px 2px;min-height:44px}.gesture-hint>span{color:#e1bf7b}.gesture-hint.is-prompted{background:#d3b76f24!important;border-top-color:#f4d489!important}
@media(pointer:coarse){.shop-tools input,.shop-tools select,.layout-editor select{font-size:16px}}
@media(max-width:700px){.bbl-header{gap:8px}.bbl-brand{flex:1;min-width:0;gap:7px}.bbl-brand b{white-space:normal;line-height:1.3}.bbl-header .playground-home{flex:0 0 44px;min-width:44px;width:44px;min-height:44px;padding:0;font-size:0;display:flex;justify-content:center;align-items:center}.bbl-header .playground-home>span{font-size:20px}.settings-open{margin-left:0}.header-stamp{display:none}.result-next .soft-button{font-size:12px}.quick-dock .work-button{font-size:16px}.quick-dock #dock-kit{font-size:12.1px}}
@media(max-height:500px) and (min-aspect-ratio:4/3){.shop-tools,.journey-tabs{position:static}.ux-dialog{width:min(620px,calc(100vw - 28px));padding:18px 22px}.skill-help-dialog .skill-help-art{width:75px;height:75px;float:left;margin:0 20px 10px 0}.ux-dialog h2{font-size:22px}.ux-dialog p,.ux-dialog li{font-size:12px}.skill-help-dialog ol{margin-left:100px}.skill-help-dialog .dialog-actions{clear:both}.pause-card{padding:14px 20px}.pause-card>span{display:none}.pause-card h2{font-size:23px}.pause-card p{font-size:12.1px;margin:5px 0}.pause-card .soft-button,.pause-card .bbl-button{font-size:12px;min-height:44px;margin:4px 0}.is-playing .beat-panel .personality-hud{height:104px;flex-basis:104px}}
@media(prefers-reduced-motion:reduce){.work-shoe,.work-bang,.skill-help-art svg{animation:none!important}.work-bang{opacity:1}.layout-map button{transition:none}}
/* Let a focus-ending tap finish before restoring the floating action bar. */
body.editing-text #quick-dock{display:none}
html{scroll-padding-bottom:calc(125px + env(safe-area-inset-bottom))}
.is-playing .beat-panel .gesture-tools .gesture-hint{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:2px}
.is-playing .beat-panel .gesture-tools .gesture-hint>span{font-size:18px;line-height:1}
.kit-row>button,.decor-row>button,.decor-controls>button,.layout-editor button{min-height:44px}

.journey-tabs button{flex-basis:44px}
.skill-help-dialog .dialog-actions{position:sticky;bottom:-22px;padding:10px 0 2px;background:#25443e;box-shadow:0 -8px 10px #25443e}
.skill-help-dialog .dialog-actions button{flex-basis:105px;font-size:12px}
@media(max-height:700px){.skill-help-dialog{padding:20px 18px}.skill-help-dialog h2{font-size:22px;margin-bottom:10px}.skill-help-dialog .skill-help-art{width:76px;height:76px;margin:4px auto 9px}.skill-help-dialog p,.skill-help-dialog li{font-size:12px;line-height:1.55}.skill-help-dialog .dialog-actions{bottom:-20px}}
/* The worry choices are a primary control, with a user-requested fixed size. */

/* Reserve room for enlarged captions on compact phones without shrinking type. */
@media(max-height:700px){.is-playing .play-panel[data-phase=beat] .fong-bubble{height:46px;min-height:46px;flex-basis:46px}}
@media(max-height:600px) and (max-aspect-ratio:1/1){.is-playing .ritual-top .bbl-kicker{display:none}}

/* More moves stay in one fixed-height strip, leaving the paper and event slots steady. */
.is-playing .beat-panel .gesture-tools{position:relative;display:flex;justify-content:flex-start;overflow-x:auto;overflow-y:hidden;gap:5px;scroll-snap-type:x proximity;scrollbar-width:none;touch-action:pan-x;height:48px;flex:none}
.gesture-tools::-webkit-scrollbar{display:none}
.is-playing .beat-panel .gesture-tools .gesture-hint{flex:0 0 76px;min-width:0;height:48px;min-height:48px;scroll-snap-align:center}
.gesture-hint b{font:inherit;font-weight:400;line-height:1.2;white-space:normal;overflow-wrap:anywhere;text-align:center}
.gesture-controls::after{content:'›';position:absolute;right:-3px;top:8px;z-index:1;color:#ffe2a1;background:#29443be8;border-radius:8px;padding:0 2px;font-size:20px;line-height:1;pointer-events:none}
#gesture-charge{right:5px}#hit-zone.is-holding .paper-doll{scale:calc(1 - var(--hold-charge,0)*.12) calc(1 + var(--hold-charge,0)*.08);filter:drop-shadow(0 0 6px #f6ca7399)}
@media(max-height:700px){.is-playing .beat-panel .gesture-tools,.is-playing .beat-panel .gesture-tools .gesture-hint{height:46px;min-height:46px}.is-playing .beat-panel .gesture-tools .gesture-hint{flex-basis:60px}}
@media(prefers-reduced-motion:reduce){#hit-zone.is-holding .paper-doll{scale:none}}

.event-order-tag{position:absolute;right:1px;bottom:1px;display:grid;place-items:center;width:19px;height:19px;border-radius:50%;background:#fff0b9;color:#243d31;font-size:12px;font-weight:700;pointer-events:none}.comic-event-prop[data-event-prop=minibus][data-next=true]{outline:2px solid #ffe2a0;outline-offset:-2px;background:#705e35}.comic-event-prop[data-event-prop=minibus][data-next=false]{opacity:.78}
