/* The compact metal clasp is always reachable; the four existing tabs slide out beneath it. */
body{padding-bottom:calc(var(--menu-height,122px) + 12px)}
#menu-dock{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;z-index:25;display:flex;flex-direction:column;align-items:center;pointer-events:none;padding-bottom:env(safe-area-inset-bottom)}
#menu-handle{pointer-events:auto;touch-action:manipulation;position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;gap:4px;width:88px;min-height:32px;height:32px;margin:0;padding:0 7px;border:0;border-radius:10px 10px 0 0;background:none;color:#e4c68c;font:600 9px/1 system-ui;letter-spacing:.06em;text-shadow:0 1px 2px #000;box-shadow:none;flex:none}
#menu-handle:before{content:"";position:absolute;inset:0;z-index:-1;border:1px solid #a88d58;border-bottom:0;border-radius:inherit;background:linear-gradient(180deg,#726044,#293329 26%,#121d19 77%,#413c29);box-shadow:inset 0 1px #ffe2a34d,inset 0 -2px #080e0b,0 -2px 8px #0006}
#menu-handle:after{content:"";position:absolute;left:8px;right:8px;top:4px;height:1px;background:linear-gradient(90deg,#c8a86a,transparent 25%,transparent 75%,#c8a86a);pointer-events:none}
#menu-handle svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 1px #000)}
#menu-handle .handle-arrow{width:11px;transition:transform 200ms}
#menu-dock[data-open="true"] .handle-arrow{transform:rotate(180deg)}
#menu-handle:hover{color:#fff0cb}#menu-handle:hover:before{border-color:#e7c17b}
#menu-handle:active{transform:none}
#menu-handle:focus-visible{outline:2px solid #ffe2a3;outline-offset:-3px;border-radius:13px}
.handle-notice{position:absolute;right:2px;top:1px;width:7px;height:7px;border:1px solid #ffe2aa;border-radius:50%;background:#c96d34;box-shadow:0 0 7px #ffc45d;pointer-events:none}
.handle-notice[hidden]{display:none}
#menu-dock nav.tabs{pointer-events:auto;position:relative;top:auto;bottom:auto;left:auto;transform:none;width:100%;max-width:none;padding-bottom:5px;border-radius:0;margin:0}
#menu-dock nav.tabs[hidden]{display:none}
#menu-dock[data-open="true"]{background:linear-gradient(0deg,#101512 0,#101512 calc(100% - 32px),transparent calc(100% - 32px))}
#menu-dock[data-open="false"] #menu-handle:before{bottom:calc(-1 * env(safe-area-inset-bottom))}
#toast{bottom:calc(var(--menu-height,122px) + 12px)}
@media(min-width:900px){#menu-dock{width:580px}#menu-dock nav.tabs{border-radius:14px 14px 0 0}}
@media(prefers-reduced-motion:reduce){#menu-handle .handle-arrow{transition:none}}
.reduce-motion #menu-handle .handle-arrow{transition:none}
/* The current portrait is the visual anchor; no extra NOW badge or round label. */
.battle-layout .initiative-portraits{height:42px;min-height:42px;align-items:center;gap:11px;overflow:visible;padding:3px 9px;margin-bottom:4px}
.battle-layout .initiative-actor{gap:0;width:28px;height:28px;justify-content:center}
.battle-layout .initiative-actor .portrait{width:26px;height:26px;transition:width 240ms,height 240ms;box-shadow:0 1px 4px #0008}
.battle-layout .initiative-actor.active{width:38px;height:38px}
.battle-layout .initiative-actor.active .portrait{width:36px;height:36px;border:2px solid #f6d58d;box-shadow:0 0 10px #eec46d66}
.battle-layout .initiative-actor:not(:last-child):after{content:"›";position:absolute;right:-10px;color:#baa778;font:14px Georgia}
.battle-history-toggle svg{display:block;width:27px;height:27px;fill:none;stroke:#e1c58a;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 1px #000)}
.battle-history-toggle{display:grid;place-items:center;background:linear-gradient(145deg,#3f4533,#15221c);box-shadow:inset 0 1px #c5aa6133}
@media(max-height:500px){.battle-layout .initiative-portraits{height:34px;min-height:34px}.battle-layout .initiative-actor.active,.battle-layout .initiative-actor.active .portrait{width:29px;height:29px}.battle-layout .initiative-actor .portrait{width:22px;height:22px}}
@media(prefers-reduced-motion:reduce){.battle-layout .initiative-actor .portrait{transition:none}}
.reduce-motion .battle-layout .initiative-actor .portrait{transition:none}