/* Shared game components for both WAP and WEB shells. */
.active-buffs {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 7px;
    margin: 10px 0 8px;
    padding: 0 1px;
}
.active-buff {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    width: 30px;
    margin: 0;
    padding: 0;
}
.active-buff-icon {
    display: block;
    width: 28px;
    height: 28px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 4px;
}
.active-buff-track {
    display: block;
    overflow: hidden;
    width: 28px;
    height: 3px;
    margin-top: 3px;
    padding: 0;
    background: #3d3d3d;
    border-radius: 2px;
}
.active-buff-fill {
    display: block;
    height: 3px;
    padding: 0;
    background: #a0a0a0;
    border-radius: 2px;
}
.active-buff-time {
    display: block;
    margin-top: 1px;
    padding: 0;
    color: #8b8b8b;
    font-size: 8px;
    line-height: 9px;
}
.novice-tutorial {
    margin: 8px 0 7px;
    padding: 6px 1px;
    border-top: 1px solid #666666;
    border-bottom: 1px solid #666666;
}
.novice-tutorial-complete { color: #c8c8c8; }
.tutorial-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}
.tutorial-heading span { color: #999999; font-size: 10px; white-space: nowrap; }
.tutorial-progress {
    height: 3px;
    margin: 4px 0 6px;
    overflow: hidden;
    background: #454545;
    border-radius: 2px;
}
.tutorial-progress span {
    display: block;
    height: 100%;
    padding: 0;
    background: #b79b62;
}
.tutorial-overview {
    margin: 7px 0;
    padding: 7px;
    background: #242321;
    border-top: 1px solid #666666;
    border-bottom: 1px solid #3d3d3d;
}
.tutorial-step-list { margin: 8px 0 10px; }
.tutorial-step {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin: 0;
    padding: 8px 2px;
    border-bottom: 1px solid #464646;
}
.tutorial-step:first-child { border-top: 1px solid #464646; }
.tutorial-step-number {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    padding: 0;
    color: #ffdf8c;
    background: #31302d;
    border: 1px solid #69645b;
    border-radius: 50%;
    line-height: 22px;
    text-align: center;
}
.tutorial-step-content { min-width: 0; line-height: 1.4; }
.tutorial-step-content > div { margin: 2px 0 3px; color: #b8b8b8; }
.tutorial-step.is-complete { opacity: .72; }
.tutorial-step.is-complete .tutorial-step-number { color: #b8c7a1; border-color: #68725d; }
.tutorial-step-status { color: #91a17e; font-size: 10px; }
.next-goals { margin-bottom: 10px; }
.goal-row {
    display: flex;
    gap: 7px;
    padding: 6px 2px;
    border-bottom: 1px solid #424242;
}
.goal-row > span { flex: 0 0 13px; color: #b79b62; text-align: center; }
.goal-row > div { min-width: 0; }
.goal-row.is-complete > span { color: #91a17e; }

.monster-recommendation {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 3px 7px;
    margin: 7px 0;
    padding: 6px 7px;
    background: #292720;
    border-left: 2px solid #b79b62;
    border-radius: 3px;
}
.monster-recommendation > span { color: #999999; font-size: 10px; }
.monster-recommendation > small { color: #aaaaaa; }
.monster-list { margin: 8px 0; }
.monster-card {
    margin: 0 0 6px;
    padding: 7px;
    background: #242321;
    border: 1px solid #44413c;
    border-left: 2px solid #55514a;
    border-radius: 4px;
}
.monster-card.is-elite { border-left-color: #b79b62; }
.monster-card.is-raid { background: #2b2420; border-left-color: #b77a62; }
.monster-card-top {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    min-width: 0;
}
.monster-icon { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; }
.monster-card-info { flex: 1 1 auto; min-width: 0; }
.monster-name {
    display: block;
    overflow-wrap: anywhere;
    color: #ffdf8c;
    font-weight: bold;
    line-height: 1.25;
}
.is-raid .monster-name { color: #e4c57a; font-style: italic; }
.monster-meta { display: flex; flex-wrap: wrap; gap: 3px 8px; margin-top: 2px; color: #a7a7a7; font-size: 10px; }
.monster-difficulty {
    flex: 0 0 auto;
    padding: 2px 5px;
    background: #363532;
    border-radius: 8px;
    color: #bbbbbb;
    font-size: 9px;
    white-space: nowrap;
}
.monster-difficulty.easy { color: #999999; }
.monster-difficulty.matched { color: #c9c09d; }
.monster-difficulty.hard { color: #d4a477; }
.monster-difficulty.dangerous, .monster-difficulty.raid { color: #dc8b80; }
.monster-badges { margin: 5px 0 0 25px; color: #b79b62; font-size: 9px; }
.monster-actions { display: flex; gap: 6px; margin-top: 7px; }
.monster-actions .monster-study,
.monster-actions .combat-inline { flex: 1 1 50%; display: block; min-width: 0; }
.monster-actions .monster-study,
.monster-actions .monster-attack {
    box-sizing: border-box;
    display: block;
    width: 100%;
    padding: 5px 4px;
    background: #302f2b;
    border: 1px solid #55514a;
    border-radius: 3px;
    color: #ffdf8c;
    font-size: 11px;
    line-height: 14px;
    text-align: center;
    text-decoration: none;
}
.monster-actions .monster-attack { cursor: pointer; }
.monster-actions .monster-study:hover,
.monster-actions .monster-study:focus,
.monster-actions .monster-attack:hover,
.monster-actions .monster-attack:focus {
    background: #292825;
    border-color: #55514a;
  border-left-color: #b79b62;
    color: #fff0b3;
    text-decoration: none;
    outline: none;
}
.monster-pagination {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 6px;
    margin: 8px 0;
    padding: 6px 0;
    border-top: 1px solid #4b4b4b;
    border-bottom: 1px solid #4b4b4b;
}
.monster-pagination a:last-child { text-align: right; }
.monster-pagination small { color: #999999; text-align: center; white-space: nowrap; }
.monster-summary { margin: 7px 0; color: #999999; }

.guide-section {
    margin: 9px 0;
    padding: 7px 6px;
    border-top: 1px solid #666666;
    border-bottom: 1px solid #3d3d3d;
}
.route-card {
    margin: 6px 0 0;
    padding: 6px 7px;
    background: #242321;
    border-left: 2px solid #55514a;
    border-radius: 3px;
}
.route-recommended { border-left-color: #b79b62; }
.route-mark {
    color: #d6bf86;
    font-size: 10px;
}
.resource-row { margin: 5px 0; line-height: 1.35; }
.muted-text { color: #999999; font-size: 10px; }
.respawn-list {
    margin: 8px 0 3px;
    padding: 6px 7px;
    color: #aaaaaa;
    background: #242321;
    border-left: 2px solid #55514a;
    border-radius: 3px;
}
.combat-inline { display: inline; margin: 0; padding: 0; }
.combat-link {
    display: inline;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #FFDF8C;
    font: 12px Verdana, Arial, Helvetica, sans-serif;
    cursor: pointer;
    vertical-align: baseline;
}
.combat-link:hover { color: #ffffff; text-decoration: underline; }
.combat-primary { font-weight: bold; }
.quest-offers {
    margin: 8px 0;
    padding: 6px 7px;
    background: #242321;
    border-left: 2px solid #b79b62;
    border-radius: 3px;
}
.quest-offer { margin-top: 4px; line-height: 1.3; }
.quest-detail {
    margin: 7px 0;
    padding: 7px;
    background: #242321;
    border-top: 1px solid #666666;
    border-bottom: 1px solid #3d3d3d;
    border-radius: 3px;
}
.quest-progress {
    height: 4px;
    margin: 5px 0 8px;
    overflow: hidden;
    background: #4a4a46;
    border-radius: 2px;
}
.quest-progress > span {
    display: block;
    height: 100%;
    background: #b79b62;
}
.city-npc-note { color: #999999; font-size: 10px; white-space: nowrap; }
.city-npc-heading img { width: 20px; height: 20px; image-rendering: auto; }
.city-npc-dialog {
    margin: 4px 0 8px;
    padding: 8px;
    background: #211f1d;
    border-top: 1px solid #666666;
    border-bottom: 1px solid #3d3d3d;
    border-radius: 3px;
}
.city-npc-heading { display: flex; align-items: center; gap: 8px; }
.city-npc-dialog p { margin: 8px 0; color: #c7c7c7; line-height: 1.4; }
.city-section-title {
    margin: 10px 0 5px;
    padding-top: 6px;
    border-top: 1px solid #44413c;
    color: #b9a06b;
    font-size: 10px;
    font-weight: bold;
}
.city-section-title:first-child { margin-top: 4px; }
.city-service-row { margin: 4px 0; line-height: 1.35; }
.city-service-row img { vertical-align: middle; }
.city-service-note { color: #8f8f8f; font-size: 10px; white-space: nowrap; }
.city-page-intro {
    margin: 5px 0 8px;
    padding: 7px;
    color: #c7c7c7;
    background: #211f1d;
    border-top: 1px solid #55514a;
    border-bottom: 1px solid #3d3d3d;
    border-radius: 3px;
    line-height: 1.4;
}
.city-option {
    margin: 5px 0;
    padding: 6px 7px;
    background: #242321;
    border-left: 2px solid #55514a;
    border-radius: 3px;
    line-height: 1.35;
}
.city-option.is-locked { color: #8f8f8f; border-left-color: #555555; }
.city-option.is-important { border-left-color: #b79b62; }
.city-return { margin-top: 9px; padding-top: 6px; border-top: 1px solid #44413c; }
.shop-category {
    position: relative;
    display: block;
    margin: 5px 0;
    padding: 7px 52px 7px 8px;
    background: #242321;
    border-left: 2px solid #55514a;
    border-radius: 3px;
    line-height: 1.35;
}
.shop-category:hover { background: #292825; border-left-color: #b79b62; text-decoration: none; }
.shop-category:hover b { color: #fff; text-decoration: underline; }
.shop-category-count {
    position: absolute;
    top: 8px;
    right: 8px;
    min-width: 25px;
    padding: 1px 5px;
    color: #bdb6a8;
    background: #34322f;
    border: 1px solid #4b4843;
    border-radius: 8px;
    font-size: 9px;
    text-align: center;
}
.shop-category-description { display: block; margin-top: 2px; color: #929292; font-size: 10px; text-decoration: none !important; }
.market-merchant {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 5px 0;
    padding: 7px;
    color: #ffdf8c;
    background: #242321;
    border-left: 2px solid #55514a;
    border-radius: 3px;
}
.market-merchant:hover { background: #292825; border-left-color: #b79b62; text-decoration: none; }
.market-merchant:hover b { color: #fff; text-decoration: underline; }
.market-merchant img { width: 24px; height: 24px; object-fit: contain; }
.market-merchant span { min-width: 0; display: block; line-height: 1.25; }
.market-merchant small { display: block; margin-top: 2px; color: #929292; font-size: 9px; text-decoration: none !important; }
.market-merchant.is-special { border-left-color: #806f4d; }
.shop-item-card {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 6px 0;
    padding: 7px;
    background: #242321;
    border-left: 2px solid #55514a;
    border-radius: 3px;
}
.shop-item-card:hover { border-left-color: #8b7852; }
.shop-item-card.is-upgrade { border-left-color: #8f7b4f; }
.shop-item-card.is-unavailable { opacity: .72; }
.shop-item-icon {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    object-fit: cover;
    image-rendering: auto;
    background: #171717;
    border: 1px solid #44413c;
    border-radius: 3px;
}
.shop-item-body { min-width: 0; flex: 1; }
.shop-item-title { font-weight: bold; line-height: 1.3; }
.shop-item-meta { margin-top: 2px; color: #a1a1a1; font-size: 10px; line-height: 1.35; }
.shop-price { color: #d6bf86; font-weight: bold; }
.shop-grade {
    display: inline-block;
    padding: 0 4px;
    color: #c9c3b8;
    background: #35332f;
    border: 1px solid #4b4843;
    border-radius: 6px;
    font-size: 9px;
}
.shop-grade.grade-ng { color: #c9c3b8; }
.shop-grade.grade-d { color: #8fc6e8; border-color: #41647b; }
.shop-grade.grade-c { color: #77c985; border-color: #3e6845; }
.shop-grade.grade-b { color: #b792e3; border-color: #60487c; }
.shop-grade.grade-a { color: #e89191; border-color: #7b4545; }
.shop-grade.grade-s { color: #f0c66f; border-color: #806a36; }
.shop-compare { white-space: nowrap; }
.shop-tags { margin-top: 3px; }
.shop-tag { display: inline-block; margin: 1px 3px 0 0; padding: 1px 4px; color: #aaa; background: #302f2c; border-radius: 6px; font-size: 8px; }
.shop-tag.recommended { color: #e4c879; background: #403824; }
.shop-tag.locked { color: #ba9696; }
.shop-filters { margin: 6px 0 8px; padding: 6px; background: #211f1d; border: 1px solid #44413c; border-radius: 3px; }
.shop-filter-row { display: grid; gap: 4px; margin-bottom: 4px; }
.shop-filter-main { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.shop-filter-sort { grid-template-columns: minmax(0, 1fr) auto; }
.shop-filters input[type="text"], .shop-filters select { box-sizing: border-box; width: 100%; min-width: 0; height: 27px; margin: 0; padding: 3px 6px; color: #ddd; background: #171717; border: 1px solid #4b4843; font-size: 10px; }
.shop-filter-checks { display: flex; align-items: center; gap: 14px; min-height: 18px; }
.shop-filters label { display: inline-flex; align-items: center; gap: 3px; margin: 0; color: #aaa; font-size: 9px; white-space: nowrap; }
.shop-filters label input { margin: 0; }
.shop-filters button { min-width: 68px; height: 27px; padding: 3px 9px; color: #ffdf8c; background: #34322f; border: 1px solid #59544b; border-radius: 3px; font-size: 10px; }
.shop-item-actions { margin-top: 4px; font-size: 10px; }
.shop-item-actions a + a:before { content: " · "; color: #666; }
.shop-pagination {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 6px;
    margin: 9px 0;
    padding: 6px 0;
    border-top: 1px solid #44413c;
    border-bottom: 1px solid #44413c;
}
.shop-pagination a:last-child { text-align: right; }
.shop-pagination span { color: #999; font-size: 10px; text-align: center; white-space: nowrap; }
.shop-item-detail { margin: 6px 0; padding: 8px; background: #242321; border-left: 2px solid #b79b62; border-radius: 3px; }
.shop-item-detail-head { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; }
.shop-item-detail-stats { padding-top: 6px; border-top: 1px solid #44413c; line-height: 1.5; }
.shop-purchase { margin-top: 7px; padding-top: 6px; border-top: 1px solid #44413c; }
.supply-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; margin: 6px 0; }
.supply-tabs a { padding: 4px 2px; text-align: center; background: #292825; border-radius: 3px; font-size: 9px; }
.supply-tabs a.active { color: #fff; background: #454038; }
.supply-subtabs { margin: 4px 0 7px; color: #777; font-size: 10px; }
.supply-subtabs a.active { color: #fff; font-weight: bold; }
.supply-buy-form { display: flex; align-items: flex-end; gap: 6px; margin-top: 7px; }
.supply-buy-form label { color: #aaa; font-size: 9px; }
.supply-buy-form input { display: block; width: 78px; margin-top: 2px; padding: 4px; color: #ddd; background: #171717; border: 1px solid #4b4843; }
.supply-buy-form button { padding: 4px 9px; color: #ffdf8c; background: #34322f; border: 1px solid #59544b; border-radius: 3px; }
.supply-quick { display: flex; align-items: center; gap: 4px; margin-top: 7px; color: #888; font-size: 9px; }
.supply-quick .combat-inline { display: inline-block; }
.supply-quick .combat-link { padding: 2px 5px; }
.teleport-list { margin: 6px 0 12px; }
.teleport-route { margin: 5px 0; }
.teleport-route .combat-inline { display: block; }
.teleport-route .teleport-action {
    display: block;
    width: 100%;
    padding: 6px 7px;
    color: #ffdf8c;
    background: #242321;
    border: 1px solid #44413c;
    border-left: 2px solid #55514a;
    border-radius: 3px;
    font: 11px Verdana, Arial, Helvetica, sans-serif;
    line-height: 16px;
    text-align: left;
    cursor: pointer;
}
.teleport-route .teleport-action:hover { color: #fff; background: #292825; border-left-color: #b79b62; text-decoration: none; }
.teleport-route img { width: 18px; height: 18px; vertical-align: middle; }

/* Hunting grounds */
.location-scene {
    margin: 8px 0 6px;
    padding: 8px 9px;
    color: #b8b5ad;
    background: linear-gradient(90deg, #282620 0%, #22211f 100%);
    border-left: 2px solid #806f4d;
    border-radius: 3px;
    line-height: 1.4;
}
.location-scene > span {
    display: block;
    margin-bottom: 2px;
    color: #d6bf86;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: .3px;
}
.quest-trail {
    margin: 5px 0 8px;
    color: #b8a979;
    font-size: 10px;
}
.monster-card.is-quest { border-left-color: #a9955d; }
.monster-badges.quest { color: #c6b875; }
.monster-hp-track {
    height: 3px;
    margin-top: 4px;
    overflow: hidden;
    padding: 0;
    background: #49433e;
    border-radius: 2px;
}
.monster-hp-track > span {
    display: block;
    height: 100%;
    padding: 0;
    background: #8f3737;
}

/* Tactical combat */
.combat-screen { margin: 4px 0 8px; }
.combat-round {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 5px;
    color: #999;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .35px;
}
.combat-round b {
    color: #d6bf86;
    font-size: 9px;
    font-weight: normal;
    text-transform: none;
}
.combat-enemy {
    padding: 9px;
    background: linear-gradient(180deg, #292522 0%, #211f1d 100%);
    border: 1px solid #48433d;
    border-left: 3px solid #72534c;
    border-radius: 5px;
}
.combat-enemy.is-elite { border-left-color: #b79b62; }
.combat-enemy.is-raid { border-left-color: #9c554b; }
.combat-enemy-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 7px;
}
.combat-enemy-head img {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    object-fit: contain;
}
.combat-enemy-head > div { min-width: 0; }
.combat-enemy-head b {
    display: block;
    overflow-wrap: anywhere;
    color: #ffdf8c;
    line-height: 1.3;
}
.combat-enemy-head small {
    display: block;
    margin-top: 1px;
    color: #999;
    font-size: 9px;
}
.combat-bar-label {
    display: flex;
    justify-content: space-between;
    margin-bottom: 3px;
    color: #a7a7a7;
    font-size: 9px;
}
.combat-bar-label b { color: #c9c3b8; font-weight: normal; }
.combat-hp-bar {
    height: 7px;
    overflow: hidden;
    padding: 0;
    background: #403b37;
    border: 1px solid #504944;
    border-radius: 4px;
}
.combat-hp-bar > span {
    display: block;
    height: 100%;
    padding: 0;
    background: linear-gradient(90deg, #7a272b, #b44848);
    border-radius: 3px;
}
.combat-enemy-badge {
    margin-top: 6px;
    color: #c2a86f;
    font-size: 9px;
}
.combat-enemy-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 6px;
    padding-top: 5px;
    border-top: 1px solid #403d38;
    font-size: 9px;
}
.combat-enemy-threat {
    min-width: 0;
    overflow: hidden;
    color: #a9a299;
    font-style: italic;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.combat-enemy-actions.intent-heavy .combat-enemy-threat { color: #c78f83; }
.combat-enemy-actions.intent-guard .combat-enemy-threat { color: #9eae91; }
.combat-enemy-actions.intent-magic .combat-enemy-threat { color: #a99dca; }
.combat-enemy-tactics {
    display: flex;
    flex: 0 0 auto;
    gap: 4px;
}
.combat-enemy-tactics .combat-inline { display: block; }
.combat-stance-button {
    box-sizing: border-box;
    display: block;
    width: 29px;
    height: 29px;
    padding: 2px;
    background: #292725;
    border: 1px solid #4a4640;
    border-radius: 4px;
    cursor: pointer;
}
.combat-stance-button:hover {
    background: #34312d;
    border-color: #716858;
}
.combat-stance-button img {
    display: block;
    width: 23px;
    height: 23px;
    object-fit: cover;
}
.combat-player-state {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    margin: 6px 0;
}
.combat-player-state > div {
    padding: 6px 7px;
    background: #242321;
    border: 1px solid #403e39;
    border-radius: 4px;
}
.combat-player-state span,
.combat-player-state b {
    display: block;
    font-size: 9px;
}
.combat-player-state span { color: #999; }
.combat-player-state b {
    margin-top: 2px;
    color: #d2cec5;
    font-weight: normal;
}
.combat-mini-bar {
    display: block;
    height: 3px;
    margin-top: 4px;
    overflow: hidden;
    background: #46413c;
    border-radius: 2px;
}
.combat-mini-bar em {
    display: block;
    height: 100%;
    padding: 0;
}
.combat-mini-bar.hp em { background: #a33b42; }
.combat-mini-bar.mp em { background: #3d72a9; }
.combat-intent {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2px 8px;
    margin: 6px 0 8px;
    padding: 7px 8px;
    background: #292720;
    border-left: 2px solid #806f4d;
    border-radius: 3px;
}
.combat-intent > span {
    color: #999;
    font-size: 9px;
}
.combat-intent > b {
    color: #d8c58f;
    font-size: 10px;
}
.combat-intent > small {
    grid-column: 1 / -1;
    color: #aaa;
    font-size: 9px;
    line-height: 1.35;
}
.combat-intent.intent-heavy { border-left-color: #9b554c; }
.combat-intent.intent-heavy > b { color: #d59683; }
.combat-intent.intent-guard { border-left-color: #65715c; }
.combat-intent.intent-guard > b { color: #aebd9b; }
.combat-intent.intent-magic { border-left-color: #665b8c; }
.combat-intent.intent-magic > b { color: #b6a7de; }
.combat-archetype {
    margin: -4px 2px 7px;
    color: #777;
    font-size: 8px;
}
.combat-archetype b { color: #9d9689; font-weight: normal; }
.combat-companion {
    display: flex;
    justify-content: space-between;
    margin: 5px 0;
    padding: 5px 7px;
    color: #c7b67d;
    background: #242321;
    border-radius: 3px;
    font-size: 9px;
}
.combat-companion span { color: #999; }
.combat-section-title {
    margin: 10px 0 5px;
    padding-top: 7px;
    color: #b9a06b;
    border-top: 1px solid #46433e;
    font-size: 10px;
    font-weight: bold;
}
.combat-actions-title {
    margin-top: 7px;
    padding-top: 0;
    border-top: 0;
}
.combat-tactic-grid,
.combat-skill-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
}
.combat-tactic-grid .combat-inline,
.combat-skill-card .combat-inline { display: block; width: 100%; }
.combat-tactic-button,
.combat-skill-button {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 43px;
    gap: 7px;
    padding: 6px 7px;
    color: #ffdf8c;
    background: #2b2a27;
    border: 1px solid #4c4943;
    border-radius: 4px;
    font: 10px Verdana, Arial, Helvetica, sans-serif;
    text-align: left;
    cursor: pointer;
    height: 43px;
    overflow: hidden;
}
.combat-tactic-button:hover,
.combat-skill-button:hover {
    color: #fff;
    background: #32302c;
    border-color: #6d6558;
    text-decoration: none;
}
.combat-tactic-button {
    display: block;
    border-left: 2px solid #5d6358;
}
.combat-tactic-button.focus { border-left-color: #7c6c91; }
.combat-tactic-button b,
.combat-tactic-button small { display: block; }
.combat-tactic-button small {
    margin-top: 2px;
    color: #999;
    font-size: 8px;
    line-height: 1.3;
}
.combat-tactics-compact {
    display: grid;
    grid-template-columns: auto 1fr 1fr;
    align-items: center;
    gap: 5px;
    margin-top: 5px;
}
.combat-tactics-compact > span {
    padding-right: 2px;
    color: #777;
    font-size: 8px;
}
.combat-tactics-compact .combat-inline { display: block; width: 100%; }
.combat-tactics-compact .combat-tactic-button {
    min-height: 27px;
    padding: 4px 6px;
    text-align: center;
}
.combat-tactics-compact .combat-tactic-button b {
    overflow-wrap: anywhere;
    font-size: 9px;
    font-weight: normal;
}
.combat-skill-card {
    min-width: 0;
    padding: 0;
}
.combat-skill-card.is-primary .combat-skill-button {
    border-left: 2px solid #9a7f50;
}
.combat-skill-button img {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    object-fit: contain;
}
.combat-skill-mark {
    flex: 0 0 24px;
    width: 24px;
    color: #b99c66;
    font-size: 17px;
    text-align: center;
}
.combat-skill-copy {
    display: block;
    min-width: 0;
}
.combat-skill-copy b {
    display: block;
    overflow: hidden;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.combat-skill-copy small {
    display: block;
    margin-top: 2px;
    overflow: hidden;
    color: #999;
    font-size: 8px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.combat-skill-disabled {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    min-height: 43px;
    gap: 7px;
    padding: 6px 7px;
    color: #8a8478;
    background: #232220;
    border: 1px solid #3b3935;
    border-radius: 4px;
    height: 43px;
    overflow: hidden;
}
.combat-skill-disabled > span:last-child {
    display: block;
    color: #826f68;
    font-size: 8px;
}
.combat-skill-copy > span {
    display: block;
    margin-top: 2px;
    color: #8f746c;
    font-size: 8px;
}
.combat-log {
    overflow: hidden;
    background: #201f1d;
    border: 1px solid #403e39;
    border-radius: 4px;
}
.combat-log-entry {
    margin: 0;
    padding: 6px 7px;
    color: #aaa;
    border-bottom: 1px solid #363531;
    font-size: 9px;
    line-height: 1.4;
}
.combat-log-entry:last-child { border-bottom: 0; }
.combat-log-empty {
    padding: 8px;
    color: #888;
    font-size: 9px;
}
.combat-log .log-damage { color: #d39a8f; }
.combat-log .log-block { color: #9eb292; }
.combat-log .log-miss { color: #999; }
.combat-log .log-player { color: #d5c184; }
.combat-log .log-focus { color: #b7a8d5; }
.combat-supplies {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.combat-supplies a {
    padding: 5px 7px;
    background: #292825;
    border: 1px solid #46433e;
    border-radius: 3px;
    font-size: 9px;
}
.combat-supplies a b { color: #bbb; }
.combat-retreat {
    margin-top: 10px;
    padding-top: 7px;
    border-top: 1px solid #46433e;
    text-align: center;
}
.combat-retreat .combat-inline { display: inline-block; }
.combat-retreat-button {
    padding: 4px 8px;
    color: #8f8f8f;
    background: transparent;
    border: 0;
    font: 9px Verdana, Arial, Helvetica, sans-serif;
    cursor: pointer;
}
.combat-retreat-button:hover { color: #c7c7c7; text-decoration: underline; }
.combat-victory {
    margin: 7px 0;
    padding: 12px;
    background: #292820;
    border: 1px solid #5d5746;
    border-left: 3px solid #a28a58;
    border-radius: 5px;
    text-align: center;
}
.combat-victory b,
.combat-victory span {
    display: block;
}
.combat-victory b { color: #e0c783; font-size: 14px; }
.combat-victory strong {
    display: block;
    margin-top: 3px;
    color: #c8b989;
    font-size: 10px;
    font-weight: normal;
}
.combat-victory span { margin: 5px 0 9px; color: #aaa; font-size: 9px; }
.combat-victory-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    margin: 8px 0 2px;
}
.combat-victory-stats span {
    margin: 0;
    padding: 5px;
    background: #24231f;
    border: 1px solid #474339;
    border-radius: 3px;
}
.combat-victory-stats em {
    display: block;
    margin-top: 2px;
    color: #d8c58f;
    font-style: normal;
}
.combat-reward-button {
    padding: 6px 10px;
    color: #ffdf8c;
    background: #34322f;
    border: 1px solid #665f52;
    border-radius: 3px;
    font: 10px Verdana, Arial, Helvetica, sans-serif;
    cursor: pointer;
}
.combat-reward-summary {
    margin: 7px 0;
    padding: 9px;
    background: #292820;
    border: 1px solid #565141;
    border-left: 3px solid #a28a58;
    border-radius: 5px;
}
.combat-reward-summary > b { display: block; margin-bottom: 6px; color: #dfc987; }
.combat-reward-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
}
.combat-reward-grid span {
    padding: 5px 3px;
    color: #999;
    background: #22211e;
    border: 1px solid #403d35;
    border-radius: 3px;
    font-size: 8px;
    text-align: center;
}
.combat-reward-grid em { display: block; margin-top: 2px; color: #e0c783; font-size: 10px; font-style: normal; }
.combat-reward-summary small { display: block; margin-top: 6px; color: #888; font-size: 8px; }

@media (max-width: 360px) {
    .combat-player-state,
    .combat-tactic-grid,
    .combat-skill-grid { grid-template-columns: 1fr; }
}

hr.ui-duplicate-divider { display: none !important; }