#medicine-dock{position:absolute;z-index:12;left:calc(env(safe-area-inset-left) + 22px);bottom:calc(env(safe-area-inset-bottom) + 155px);font:12px/1.4 "Microsoft YaHei",sans-serif;color:#e7ddc8}
#medicine-dock[hidden],#medicine-dock [hidden]{display:none!important}
#medicine-dock:has(#medicine-select[aria-expanded="true"]){z-index:50}
/* Control touches belong to the game; a second finger must not start browser zoom. */
body[data-chronicle] #joystick,#medicine-dock button{touch-action:none}
.medicine-actions{display:flex;align-items:center;gap:5px}
#medicine-dock #adventure-potion{position:relative;left:auto;top:auto;bottom:auto;display:block;width:48px;height:48px;padding:5px;border-color:#c9b58c99;box-shadow:0 3px 10px #0005;transition:border-color .15s}
#medicine-dock #adventure-potion[data-kind="spirit"]{border-color:#8ecbddaa;background:#172f3de8}
#medicine-dock #adventure-potion[data-kind="herb"]{border-color:#a9c0a0aa;background:#263c2fe8}
#medicine-dock #adventure-potion:disabled{opacity:.55;filter:saturate(.55)}
#medicine-dock button:focus-visible{outline:2px solid #f0d9a4;outline-offset:3px}
#medicine-select{position:relative;width:44px;height:44px;min-height:44px;border:1px solid #afa08075;border-radius:10px;background:#142a32ed;color:#e3d6b8;padding:10px;touch-action:manipulation}
#medicine-select[aria-expanded="true"]{background:#31464a;border-color:#e4cfa0}
#medicine-select svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.4}
#medicine-dock kbd{position:absolute;top:-7px;left:1px;background:#182c32e8;border:1px solid #97836985;border-radius:3px;padding:0 3px;font:10px sans-serif;color:#d0c6b2;pointer-events:none}
#medicine-status{position:absolute;top:-24px;left:0;font-size:10px;padding:2px 6px;color:#edc3a2;background:#352a26e8;border-radius:4px;white-space:nowrap}
#medicine-tray{position:absolute;left:0;bottom:62px;width:272px;max-width:calc(100vw - 36px);padding:9px;border:1px solid #b5a27b9c;border-radius:10px;background:linear-gradient(135deg,#20353afc,#13232afc);box-shadow:0 6px 30px #0007;isolation:isolate}
#medicine-tray header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 3px 6px;font-size:12px}
#medicine-tray header span{font-size:10px;color:#aaa994}
#medicine-tray>button{display:flex;width:100%;min-height:52px;align-items:center;gap:8px;text-align:left;margin:3px 0;padding:5px 8px;border:1px solid #758b8538;border-radius:6px;background:#ffffff05;color:inherit;touch-action:manipulation}
#medicine-tray>button[aria-pressed="true"]{border-color:#d0bb85;background:#bfa76c17}
#medicine-tray>button.empty{color:#999e95}
#medicine-tray>button img{width:36px;height:36px;object-fit:contain;flex:none}
#medicine-tray>button span{flex:1;min-width:0}#medicine-tray b{font-weight:500}#medicine-tray small{display:block;font-size:10px;color:#c1bba8;line-height:1.5}#medicine-tray em{font-style:normal;font-size:11px;color:#d6c69d;flex:none}
#medicine-tray footer{font-size:10px;color:#a7aa99;text-align:center;padding-top:6px}
#medicine-tray .medicine-injury{margin:6px 3px 0;font-size:10px;line-height:1.5;color:#e9bc96}
.medicine-used #adventure-potion{animation:medicine-response .4s ease-out}
@keyframes medicine-response{30%{box-shadow:0 0 0 5px #c8dbb440,0 0 18px #b5dbac66}100%{box-shadow:0 3px 10px #0005}}
@media(orientation:landscape) and (max-height:520px){#medicine-dock{bottom:calc(env(safe-area-inset-bottom) + 20px);left:calc(env(safe-area-inset-left) + clamp(118px,19vw,178px))}#medicine-tray{bottom:56px;width:260px;padding:7px;max-height:calc(100dvh - 88px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain}#medicine-tray>button{min-height:48px}#medicine-tray .medicine-injury{max-height:45px;overflow:auto}}
@media(orientation:portrait) and (max-width:600px){#medicine-dock{top:var(--medicine-portrait-top,230px);bottom:auto;left:18px}#medicine-tray{top:62px;bottom:auto}#medicine-status{top:auto;bottom:-22px}}
@media(pointer:coarse){#medicine-dock kbd{display:none}}
@media(prefers-reduced-motion:reduce){.medicine-used #adventure-potion{animation:none}#medicine-dock #adventure-potion{transition:none}}
body.reduced-motion .medicine-used #adventure-potion{animation:none}