.selection { min-height: 72px; padding: 10px; border: 1px solid var(--line); border-radius: 7px; background: #202a22; }
.legend { color: var(--muted); font-size: .75rem; }
.player-dot { display: inline-block; width: 9px; height: 9px; margin-right: 4px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.selection strong { display: block; margin-bottom: 4px; }
.selection p { color: var(--muted); font-size: .78rem; line-height: 1.35; }
.selection-details { display: grid; gap: 4px; margin: 9px 0 0; font-size: .75rem; }
.selection-details div { display: flex; justify-content: space-between; gap: 10px; color: var(--muted); }
.selection-details strong { margin: 0; color: var(--text); font-weight: 600; text-align: right; }
.selection button { width: 100%; margin-top: 10px; }
.info-list { display: grid; gap: 8px; }
.info-item { position: relative; display: flex; align-items: center; gap: 9px; min-height: 42px; padding: 8px; border: 1px solid var(--line); border-radius: 7px; background: #202a22; color: var(--muted); font-size: .75rem; }
.info-item svg { width: 20px; color: var(--accent); }
.info-item span { display: block; font-size: .72rem; }
.info-item strong { color: var(--text); font-size: .9rem; }
.mana strong { color: var(--accent); }
.mana small { color: var(--muted); font-size: .72rem; }
.speed-options { display: flex; gap: 4px; margin-top: 4px; }
.speed-options > button { min-height: 0; gap: 3px; padding: 3px 5px; border-radius: 4px; color: var(--muted); font-size: .7rem; }
.speed-options > button.is-selected { border-color: var(--accent); background: rgb(130 196 108 / .2); color: var(--text); }
.speed-options kbd, .setting-label kbd { padding: 1px 4px; font-size: .62rem; }
.queue-end-mode { width: 100%; justify-content: space-between; color: var(--muted); font: inherit; text-align: left; cursor: pointer; }
.queue-end-mode > strong { padding: 3px 5px; border: 1px solid; border-radius: 4px; font-size: .75rem; }
.queue-end-mode[data-mode="wait"] > strong { border-color: rgb(242 162 119 / .5); background: rgb(242 162 119 / .16); color: #f2a277; }
.queue-end-mode[data-mode="restart-when-complete"] > strong { border-color: rgb(232 202 111 / .5); background: rgb(232 202 111 / .16); color: #e8ca6f; }
.queue-end-mode[data-mode="restart-always"] > strong { border-color: rgb(130 196 108 / .5); background: rgb(130 196 108 / .16); color: var(--accent); }
.mana-spring-grind { width: 100%; justify-content: space-between; color: var(--muted); font: inherit; text-align: left; }
.mana-spring-grind > strong { padding: 3px 5px; border: 1px solid rgb(145 160 149 / .5); border-radius: 4px; color: var(--muted); font-size: .75rem; }
.mana-spring-grind[data-active="true"] > strong { border-color: rgb(130 196 108 / .5); background: rgb(130 196 108 / .16); color: var(--accent); }
.mana-spring-grind-label { display: inline-flex !important; align-items: center; gap: 5px; }
.setting-count { display: inline-grid; min-width: 18px; padding: 1px 5px; border: 1px solid rgb(130 196 108 / .5); border-radius: 999px; background: rgb(130 196 108 / .12); color: var(--accent); font-size: .65rem; line-height: 1.25; text-align: center; }
.setting-label { display: inline-flex !important; align-items: center; gap: 4px; }
.info-item .info-tooltip { position: absolute; z-index: 5; top: calc(100% + 7px); left: 0; display: none; width: 230px; padding: 9px; border: 1px solid var(--line); border-radius: 6px; background: #182018; box-shadow: 0 5px 18px rgb(0 0 0 / .3); color: var(--muted); font-size: .7rem; line-height: 1.45; }
.info-item:hover .info-tooltip, .info-item:focus-visible .info-tooltip, .info-item:has(:focus-visible) .info-tooltip { display: block; }
.info-tooltip .tooltip-line { display: block; margin-top: 7px; }
.info-tooltip strong { display: inline; margin: 0; font-size: inherit; }
.info-tooltip .mode-wait { color: #f2a277; }
.info-tooltip .mode-restart-when-complete { color: #e8ca6f; }
.info-tooltip .mode-restart-always { color: var(--accent); }
.hotkeys-item { cursor: help; }
.hotkeys-tooltip { position: absolute; z-index: 5; top: calc(100% + 7px); left: 0; display: none; width: 330px; padding: 9px; border: 1px solid var(--line); border-radius: 6px; background: #182018; box-shadow: 0 5px 18px rgb(0 0 0 / .3); }
.hotkeys-item:hover .hotkeys-tooltip, .hotkeys-item:focus .hotkeys-tooltip { display: block; }
.hotkeys { display: grid; gap: 8px; margin: 0; }
.hotkeys div { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--muted); font-size: .75rem; }
.hotkeys dt { display: flex; gap: 3px; }
.hotkeys dd { margin: 0; text-align: right; }
.hotkeys .hotkeys-category { display: block; margin-top: 4px; color: var(--accent); font-size: .66rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.hotkeys .hotkeys-category:first-child { margin-top: 0; }
kbd { padding: 2px 5px; border: 1px solid var(--line); border-radius: 4px; background: #202a22; color: var(--text); font: inherit; font-size: .68rem; }

.inventory { display: grid; gap: 12px; }
.inventory-category { display: grid; gap: 6px; }
.inventory-category h3 { margin: 0; color: var(--muted); font-size: .68rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.inventory-category-items { display: flex; justify-content: flex-start; gap: 8px; }
.inventory-item { position: relative; display: grid; justify-items: center; gap: 3px; min-width: 72px; padding: 7px 5px; border: 1px solid color-mix(in srgb, var(--item-color) 45%, var(--line)); border-radius: 7px; background: color-mix(in srgb, var(--item-color) 8%, #202a22); color: var(--muted); font-size: .65rem; line-height: 1.15; text-align: center; cursor: help; }
.inventory-item:hover, .inventory-item:focus { border-color: var(--item-color); outline: none; }
.inventory-item-value { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 26px; color: var(--item-color); font-size: 1.25rem; line-height: 1; }
.inventory-item-value strong { color: var(--item-color); font-size: 1rem; }
.inventory-tooltip { position: absolute; z-index: 5; bottom: calc(100% + 7px); left: 50%; display: none; width: 190px; padding: 9px; border: 1px solid var(--line); border-radius: 6px; background: #182018; box-shadow: 0 5px 18px rgb(0 0 0 / .3); color: var(--muted); font-size: .7rem; line-height: 1.45; text-align: left; transform: translateX(-50%); }
.inventory-item:hover .inventory-tooltip, .inventory-item:focus .inventory-tooltip { display: block; }
.skill strong { color: var(--text); }
.skills { display: grid; gap: 8px; }
.skill { position: relative; display: flex; justify-content: space-between; padding-bottom: 7px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: .78rem; cursor: help; }
.skill strong { margin-right: 5px; }
.skill small { font-size: .65rem; }
.skill-tooltip { position: absolute; z-index: 5; right: 0; bottom: calc(100% + 7px); display: none; width: 210px; padding: 9px; border: 1px solid var(--line); border-radius: 6px; background: #182018; box-shadow: 0 5px 18px rgb(0 0 0 / .3); color: var(--muted); font-size: .7rem; line-height: 1.45; }
.skill-tooltip strong, .skill-tooltip span { display: block; }
.skill-tooltip strong { margin-bottom: 3px; }
.skill:hover .skill-tooltip, .skill:focus .skill-tooltip { display: block; }

.panel-title { display: inline-flex; align-items: center; gap: 5px; }
.panel-title-info { position: relative; display: inline-grid; width: 14px; height: 14px; place-items: center; color: var(--muted); cursor: help; }
.panel-title-info svg { width: 14px; height: 14px; stroke-width: 2; }
.panel-title-info:focus { outline: 1px solid var(--accent); outline-offset: 2px; }
.panel-title-tooltip { position: absolute; z-index: 5; top: calc(100% + 7px); left: 0; display: none; width: 220px; padding: 9px; border: 1px solid var(--line); border-radius: 6px; background: #182018; box-shadow: 0 5px 18px rgb(0 0 0 / .3); color: var(--muted); font-size: .7rem; font-weight: 400; line-height: 1.45; text-transform: none; }
.panel-title-info:hover .panel-title-tooltip, .panel-title-info:focus .panel-title-tooltip { display: block; }