/* The complete storybook dock is one transparent illustration; actions stay native. */
#world .world-controls.village-controls.illustrated-dock{
 --dock-width: min(560px,calc(100vw - 12px));
 position:absolute;inset:auto auto max(5px,env(safe-area-inset-bottom)) 50%;transform:translateX(-50%);
 display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;width:var(--dock-width);height:auto;aspect-ratio:3.6/1;max-width:none;
 box-sizing:border-box;margin:0;padding:0 calc(var(--dock-width) * .04);border:0;border-radius:0;background:none;box-shadow:none;isolation:isolate;
}
#world .world-controls.village-controls.illustrated-dock::before{content:'';position:absolute;inset:0;z-index:-1;width:auto;height:auto;border-radius:0;box-shadow:none;background:url('/assets/img/illustrated-dock/dock-v3.webp') center/100% auto no-repeat;pointer-events:none;filter:drop-shadow(0 4px 5px #05273988)}
#world .illustrated-dock>.world-control:not(#worldStop){
 position:relative;display:block;align-self:stretch;min-width:0;min-height:44px;width:100%;height:100%;padding:0;margin:0;border:0;border-radius:22% 22% 12% 12%;
 background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;color:#fff9e8;text-shadow:0 2px 0 #8b1723,-1px -1px 0 #8b1723,1px -1px 0 #8b1723,-1px 1px 0 #8b1723,1px 1px 0 #8b1723;
 font:800 clamp(11px,2.4vw,16px)/1.05 Georgia,serif;cursor:pointer;overflow:visible;touch-action:manipulation;
}
#world .illustrated-dock>.world-control .dock-label{position:absolute;inset:54% 0 auto;display:block;width:100%;padding:0 2px;box-sizing:border-box;white-space:normal;text-align:center}
#world .illustrated-dock>#worldCharacter .dock-label{inset:54% 0 auto;font-size:.85em}
#world .illustrated-dock>.world-control:hover{background:radial-gradient(ellipse at 50% 48%,#ffef9d33,transparent 68%);filter:none}
#world .illustrated-dock>.world-control:focus-visible{outline:3px solid #fff3a3;outline-offset:-3px;background:radial-gradient(ellipse at 50% 48%,#fff5b733,transparent 68%)}
#world .illustrated-dock>.world-control[aria-expanded=true]::after{content:'✓';position:absolute;right:2px;top:16%;display:grid;place-items:center;width:24px;height:24px;border:2px solid #fff0b1;border-radius:50%;background:#226d37;color:#fffbe4;font:800 16px/1 system-ui;text-shadow:none;box-shadow:0 2px 5px #153721}
#world .illustrated-dock #worldRadio .dock-radio-state{position:absolute;inset:68% 0 auto;display:block;text-align:center;font:750 clamp(8px,1.6vw,10px)/1 system-ui,sans-serif;color:#fffce9;text-shadow:0 1px 2px #452311}
#world .illustrated-dock #worldRadio[data-radio-state=playing]::before{content:'';position:absolute;left:65%;top:38%;width:9px;height:9px;border:1px solid #fff4a9;border-radius:50%;background:#b5ff72;box-shadow:0 0 8px 3px #b9ff7588}
#world .illustrated-dock #worldStop{bottom:calc(100% + 6px);right:6%;border:2px solid #f3d18a;border-radius:16px;background:radial-gradient(circle at 30% 15%,#de6a53,#8d2231);color:#fff5d9;box-shadow:0 3px #442526}
@media(max-width:600px){#world .world-controls.village-controls.illustrated-dock{padding-inline:calc(var(--dock-width) * .04);aspect-ratio:3.6/1}#world .illustrated-dock>.world-control:not(#worldStop){font-size:clamp(11px,3.1vw,16px)}#world .illustrated-dock>#worldCharacter .dock-label{inset:54% 0 auto;font-size:clamp(10px,2.65vw,14px)}#world .illustrated-dock>.world-control[aria-expanded=true]::after{width:18px;height:18px;font-size:12px}}
@media(max-height:520px){#world .world-controls.village-controls.illustrated-dock{--dock-width:min(300px,calc(100vw - 12px));bottom:max(3px,env(safe-area-inset-bottom))}#world .illustrated-dock>.world-control:not(#worldStop){font-size:11px}#world .illustrated-dock #worldRadio .dock-radio-state{font-size:8px}#world .illustrated-dock>#worldCharacter .dock-label{font-size:10px}}
/* Return utility navigation to the end of the header now that radio lives in the dock. */
.topbar .utility-nav{margin-left:auto}

@media(max-width:600px),(max-height:520px){#world .world-controls.village-controls.illustrated-dock::before{background-image:url('/assets/img/illustrated-dock/dock-mobile-v3.webp')}}

/* Caption positions are inside the brown panel, above the candy-cane frame. */
#world .illustrated-dock>#worldRadio[data-radio-state]:not([data-radio-state=""]) .dock-label{inset:54% 0 auto}