:root {
    --bg: #0d0a08;
    --bg-soft: #15100c;
    --panel: #17110d;
    --panel-2: #211711;
    --panel-3: #271b13;
    --line: rgba(198, 143, 72, 0.35);
    --line-soft: rgba(198, 143, 72, 0.18);
    --text: #e8d6b2;
    --muted: #9c7b53;
    --gold: #d6a24e;
    --gold-soft: #e4bb73;
    --danger: #d36d6d;
    --success: #76c48e;
    --shadow: 0 12px 32px rgba(0,0,0,.45);
    --radius: 8px;
    --sidebar-w: 245px;
    --bottom-h: 260px;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
html { background: linear-gradient(180deg, #2b1d14, #0d0a08 140px); }
body {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    color: var(--text);
    background: #0d0a08;
}

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: none; }
button, input, select, textarea { font: inherit; }

h1, h2, h3 { margin: 0 0 .75rem; font-weight: 700; }
p { line-height: 1.55; }
.small { color: var(--muted); font-size: .9rem; }
.muted { color: var(--muted); }
.eyebrow { margin: 0 0 .5rem; color: var(--muted); text-transform: uppercase; font-size: .8rem; letter-spacing: .12em; }

.landing, .auth-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    background: radial-gradient(circle at top, rgba(198,143,72,.18), transparent 36%), #0d0a08;
    padding: 1rem;
}
.hero { width: min(900px, 100%); }
.card {
    background: linear-gradient(180deg, rgba(39,27,19,.95), rgba(18,13,10,.98));
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.2rem;
}
.hero-card { text-align: center; padding: 3rem 2rem; }
.hero-card h1 { font-size: clamp(2.6rem, 8vw, 5rem); }
.auth-card { width: min(460px, 100%); }

label { display: grid; gap: .35rem; margin: 1rem 0; color: var(--muted); }
input, select, textarea {
    width: 100%;
    padding: .78rem .9rem;
    color: var(--text);
    background: #110d0a;
    border: 1px solid var(--line-soft);
    border-radius: 6px;
}
input:focus, select:focus, textarea:focus { outline: 1px solid var(--gold); }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .68rem .95rem;
    border-radius: 6px;
    border: 1px solid var(--line);
    background: linear-gradient(180deg, #4b3421, #2f2218);
    color: var(--text);
    cursor: pointer;
}
.btn.primary {
    background: linear-gradient(180deg, #b98a49, #8f6835);
    color: #120d08;
    border-color: #d1a35b;
    font-weight: 700;
}
.btn.full { width: 100%; }
.button-row { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }

.alert {
    margin-bottom: 1rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: .75rem .9rem;
}
.alert.danger { background: rgba(160, 40, 40, .14); color: #f0c0c0; border-color: rgba(211,109,109,.45); }
.alert.success { background: rgba(34, 98, 58, .15); color: #d8f6df; border-color: rgba(118,196,142,.45); }

.game-body {
    min-height: 100vh;
    background: linear-gradient(180deg, #462f1f 0, #100c0a 140px, #090706 100%);
}
.game-app {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.game-topbar {
    height: 76px;
    display: grid;
    grid-template-columns: 280px 1fr auto;
    align-items: center;
    gap: 1.2rem;
    padding: .8rem 1.2rem;
    background-color: #2c160c;
    background-image:
        radial-gradient(circle at 14% 42%, rgba(148, 236, 58, .08) 0, rgba(148, 236, 58, 0) 16%),
        radial-gradient(circle at 72% 68%, rgba(191, 134, 60, .14) 0, rgba(191, 134, 60, 0) 28%),
        repeating-linear-gradient(90deg, rgba(108, 62, 29, .18) 0 16px, rgba(59, 31, 15, .04) 16px 32px),
        linear-gradient(180deg, rgba(82, 45, 22, .98), rgba(58, 29, 14, .98));
    border-bottom: 1px solid rgba(153, 112, 57, .4);
    box-shadow: inset 0 -1px 0 rgba(255,255,255,.03), 0 4px 12px rgba(0,0,0,.22);
}
.topbar-left, .topbar-right { display: flex; align-items: center; }
.topbar-left { gap: .8rem; }
.avatar-medallion {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--line);
    display: grid;
    place-items: center;
    background: linear-gradient(180deg, #7e5733, #51341f);
    color: #f8e7c3;
    font-weight: 700;
}
.welcome-line { font-size: 1.1rem; }
.subtle-line { color: var(--muted); font-size: .85rem; }
.topbar-center { display: grid; gap: .25rem; max-width: 360px; width: 100%; justify-self: center; }
.top-task-name { text-align: center; color: #e1c89a; }
.top-task-idle { text-align: center; color: var(--muted); font-size: .85rem; }
.top-task-row { display: grid; grid-template-columns: 1fr 34px; gap: .5rem; align-items: center; }
.header-progress {
    height: 12px;
    border: 1px solid var(--line);
    background: #1a130f;
    border-radius: 2px;
    overflow: hidden;
}
.header-progress > span { display: block; height: 100%; background: linear-gradient(90deg, #8f6937, #d0a258); }
.refresh-btn {
    height: 34px; width: 34px; display: grid; place-items: center;
    border: 1px solid var(--line); background: #3b291c; border-radius: 3px;
}
.resource-bar { display: flex; align-items: center; gap: .95rem; font-size: 1rem; }
.resource-item { display: inline-flex; align-items: center; gap: .35rem; color: #f1d8a0; }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.dot.gold { background: #d7aa4f; }
.dot.green { background: #4a8b50; }
.dot.blue { background: #4b6687; }
.star { color: #f5d874; }
.logout-link { margin-left: .3rem; color: #d6b780; }

.game-layout {
    min-height: calc(100vh - 76px);
    display: grid;
    grid-template-columns: var(--sidebar-w) 1fr;
}
.game-sidebar {
    border-right: 1px solid var(--line);
    background: #090706;
    padding: 1.8rem 1.25rem;
}
.sidebar-section + .sidebar-section { margin-top: 1.6rem; }
.sidebar-title {
    color: #d1a15a;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 1.1rem;
    margin-bottom: .7rem;
}
.sidebar-nav { display: grid; gap: .7rem; }
.sidebar-link {
    color: #d4b37b;
    font-size: 1rem;
}
.sidebar-link small { color: var(--muted); }
.sidebar-link.disabled { color: #b08b57; opacity: .75; cursor: default; }
.sidebar-link.active { color: #f0d59f; }

.page-column {
    min-width: 0;
    display: grid;
    grid-template-rows: 1fr var(--bottom-h);
}
.main-panel {
    padding: 2rem 1.6rem;
    background: linear-gradient(180deg, #0a0908 0, #090706 100%);
    overflow-x: hidden;
}
.page-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.2rem;
}
.page-head h1 { font-size: clamp(2rem, 3vw, 3.2rem); text-align: center; }
.page-head.centered { text-align: center; justify-content: center; }
.page-head.centered > div { max-width: 760px; }
.grid { display: grid; gap: 1.2rem; }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stat-line, .skill-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .5rem 0;
    border-bottom: 1px solid var(--line-soft);
}
.stat-line:last-child, .skill-row:last-child { border-bottom: 0; }
.progress {
    margin: .8rem 0;
    height: 12px;
    border: 1px solid var(--line);
    background: #1a130f;
    border-radius: 2px;
    overflow: hidden;
}
.progress > span { display: block; height: 100%; background: linear-gradient(90deg, #8f6937, #d0a258); }
.task-list { display: grid; gap: .8rem; }
.task-card, .node-card, .item-card, .skill-tile {
    display: grid;
    gap: .4rem;
    padding: .95rem;
    border: 1px solid var(--line-soft);
    background: rgba(41, 28, 18, 0.55);
    border-radius: 6px;
}
.inventory-grid, .node-grid, .skill-grid { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.node-grid.wide { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.node-card.locked { opacity: .58; }
.node-form, .inline-form { display: grid; gap: .6rem; }
.inline-form { grid-template-columns: repeat(auto-fit, minmax(120px, auto)); }
.spacing-top { margin-top: 1.2rem; }
.skill-group { margin-bottom: 1rem; }
.skill-tile.disabled { opacity: .6; pointer-events: none; }

.town-hero {
    text-align: center;
    margin: 2.1rem auto 2rem;
}
.town-hero h1 { font-size: clamp(2.4rem, 4vw, 3.8rem); }
.town-hero p { font-size: 1.15rem; color: #b89663; }
.feature-card {
    min-height: 265px;
    display: flex;
    flex-direction: column;
}
.feature-card ul { margin: .4rem 0 0 1.2rem; padding: 0; }
.feature-card li { margin-bottom: .55rem; color: #d9c39b; }

.bottom-shell {
    display: grid;
    grid-template-columns: 300px 1fr;
    border-top: 1px solid var(--line);
    min-height: 0;
    background: #080605;
}
.inventory-shell {
    display: grid;
    grid-template-columns: 54px 1fr;
    border-right: 1px solid var(--line);
    min-height: 0;
}
.inventory-toolbar {
    border-right: 1px solid var(--line);
    padding: .65rem .4rem;
    display: grid;
    gap: .7rem;
    align-content: start;
}
.toolbar-btn {
    width: 38px; height: 38px; border-radius: 6px; border: 1px solid #8a6a3c;
    background: #241912; color: #eed3a0; cursor: pointer;
}
.toolbar-btn.active { background: #624426; }
.inventory-grid-shell {
    padding: .8rem;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 62px;
    gap: .45rem;
}
.inventory-slot {
    position: relative;
    border: 1px dashed rgba(198,143,72,.25);
    background: #0b0908;
    border-radius: 4px;
}
.inventory-slot.filled {
    display: grid;
    place-items: center;
    border-style: solid;
    border-color: #737373;
    background: linear-gradient(180deg, #1a1715, #0e0c0b);
}
.slot-icon { font-size: 1.55rem; line-height: 1; }
.slot-qty {
    position: absolute; left: 6px; bottom: 4px; font-size: .95rem; font-weight: 700;
    text-shadow: 1px 1px 0 #000;
}
.chat-shell { display: grid; grid-template-rows: 48px 1fr 44px; min-height: 0; }
.chat-tabs {
    padding: .5rem .7rem 0;
    display: flex;
    gap: .55rem;
    border-bottom: 1px solid var(--line);
}
.chat-tab {
    padding: .5rem .8rem;
    border: 1px solid #8a6a3c;
    border-bottom: 0;
    background: #211711;
    color: #e2c78f;
    border-radius: 6px 6px 0 0;
}
.chat-tab.active { background: #4d3521; }
.chat-feed { padding: .7rem; overflow: auto; display: grid; gap: .55rem; }
.chat-message {
    background: #171413;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 8px;
    padding: .75rem .85rem;
}
.chat-input-row { border-top: 1px solid var(--line); padding: .45rem .65rem; }
.chat-input-row input { background: #21160f; }

.mobile-menu-fab {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
    display: none;
    z-index: 30;
    padding: .8rem 1rem;
    border: 1px solid var(--line);
    background: linear-gradient(180deg, #5f432a, #3b291b);
    color: #f0d59f;
    border-radius: 999px;
    box-shadow: var(--shadow);
}
.mobile-sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.6);
    opacity: 0;
    visibility: hidden;
    transition: .2s ease;
    z-index: 19;
}

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 760px; }
th, td { text-align: left; padding: .75rem; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
th { color: var(--gold-soft); text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; }
.badge { display: inline-flex; border-radius: 999px; padding: .22rem .55rem; font-size: .78rem; font-weight: 700; }
.badge.low { background: rgba(53, 119, 71, .25); color: #cfead6; }
.badge.medium { background: rgba(147, 103, 35, .28); color: #f0d49a; }
.badge.high { background: rgba(150, 50, 50, .3); color: #f7d6d6; }

@media (max-width: 1100px) {
    .grid.three, .grid.two { grid-template-columns: 1fr; }
    .game-topbar { grid-template-columns: 1fr; height: auto; }
    .topbar-center { justify-self: stretch; max-width: none; }
    .topbar-right { justify-content: flex-end; }
}

@media (max-width: 900px) {
    .game-layout { grid-template-columns: 1fr; }
    .game-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: min(84vw, 320px);
        z-index: 20;
        transform: translateX(-100%);
        transition: transform .22s ease;
        overflow-y: auto;
        padding-top: 90px;
    }
    body.sidebar-open .game-sidebar { transform: translateX(0); }
    body.sidebar-open .mobile-sidebar-backdrop { opacity: 1; visibility: visible; }
    .mobile-menu-fab { display: inline-flex; }
    .page-column { grid-template-rows: 1fr auto; }
    .bottom-shell { grid-template-columns: 1fr; }
    .inventory-shell { border-right: 0; border-bottom: 1px solid var(--line); }
    .inventory-grid-shell { grid-template-columns: repeat(4, minmax(0,1fr)); }
    .main-panel { padding: 1.1rem 1rem 5rem; }
}

@media (max-width: 640px) {
    .resource-bar { gap: .65rem; font-size: .9rem; flex-wrap: wrap; justify-content: flex-end; }
    .topbar-left { align-items: flex-start; }
    .page-head { flex-direction: column; }
    .town-hero { margin-top: .3rem; }
    .inventory-grid-shell { grid-auto-rows: 54px; }
    .slot-icon { font-size: 1.3rem; }
}

.gold-pouch {
    align-self: flex-start;
    border: 1px solid var(--line);
    background: #1b120d;
    border-radius: 6px;
    padding: .8rem 1rem;
    color: #f1d8a0;
    white-space: nowrap;
}
.shop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(245px, 1fr));
    gap: .9rem;
}
.shop-card {
    display: grid;
    grid-template-columns: 54px 1fr;
    gap: .8rem;
    padding: .95rem;
    border: 1px solid var(--line-soft);
    background: rgba(41, 28, 18, 0.55);
    border-radius: 6px;
}
.shop-card form { grid-column: 1 / -1; }
.shop-card.owned { opacity: .72; }
.shop-icon {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #0f0c0a;
    font-size: 1.6rem;
}
.shop-info { display: grid; gap: .2rem; }
button:disabled {
    cursor: not-allowed;
    opacity: .65;
    filter: grayscale(.35);
}
@media (max-width: 640px) {
    .shop-grid { grid-template-columns: 1fr; }
    .shop-card { grid-template-columns: 48px 1fr; }
}

/* Phase 4.2 fixed bottom bar */
.page-column { grid-template-rows: 1fr; }
.main-panel { padding-bottom: 310px; }
.item-img, .slot-img { display: block; max-width: 100%; height: auto; }
.item-card .item-img, .shop-card .item-img { width: 58px; height: 58px; object-fit: contain; }
.fixed-bottom-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 25;
    height: 282px;
    background: linear-gradient(180deg, rgba(20,14,10,.98), rgba(7,5,4,.99));
    border-top: 1px solid var(--line);
    box-shadow: 0 -12px 36px rgba(0,0,0,.55);
    display: grid;
    grid-template-rows: 42px 1fr;
    transition: transform .22s ease;
}
body.bottom-collapsed .fixed-bottom-bar { transform: translateY(calc(100% - 42px)); }
body.bottom-collapsed .main-panel { padding-bottom: 72px; }
.bottom-bar-topline {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .8rem;
    padding: .35rem .75rem;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(180deg, #2b1d14, #17100c);
}
.bottom-tabs { display: flex; gap: .45rem; align-items: center; overflow-x: auto; }
.bottom-tab, .bottom-collapse {
    border: 1px solid #7b5b35;
    background: #241912;
    color: #e8d0a0;
    padding: .42rem .75rem;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
}
.bottom-tab.active { background: #6a4729; color: #fff1cb; box-shadow: 0 0 10px rgba(217,166,88,.2); }
.bottom-collapse { margin-left: auto; }
.bottom-content { min-height: 0; overflow: hidden; }
.bottom-panel { display: none; height: 100%; padding: .7rem; overflow: auto; }
.bottom-panel.active { display: block; }
.panel-heading-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .55rem; }
.panel-heading-row a { color: var(--gold-soft); font-size: .9rem; }
.fixed-bottom-bar .inventory-grid-shell {
    display: grid;
    grid-template-columns: repeat(12, minmax(48px, 1fr));
    grid-auto-rows: 72px;
    gap: .45rem;
    padding: 0;
}
.fixed-bottom-bar .inventory-slot {
    position: relative;
    border: 1px dashed rgba(198,143,72,.25);
    background: #0b0908;
    border-radius: 5px;
    min-width: 0;
}
.fixed-bottom-bar .inventory-slot.filled {
    display: grid;
    place-items: center;
    border-style: solid;
    border-color: #65503a;
    background: linear-gradient(180deg, #1e1915, #0d0b0a);
}
.slot-img { width: 44px; height: 44px; object-fit: contain; }
.slot-qty {
    position: absolute;
    left: 5px;
    bottom: 3px;
    font-size: .82rem;
    font-weight: 700;
    color: #f6e7bd;
    text-shadow: 1px 1px 0 #000;
}
.slot-action-form { position: absolute; right: 3px; top: 3px; margin: 0; }
.slot-action-form button {
    width: 21px;
    height: 21px;
    border-radius: 4px;
    border: 1px solid #8b6a3e;
    background: #5a3d22;
    color: #ffe7ad;
    cursor: pointer;
    font-size: .75rem;
    line-height: 1;
    padding: 0;
}
.equipment-layout-shell {
    display: grid;
    grid-template-columns: minmax(420px, 1.15fr) minmax(300px, .85fr);
    gap: 1rem;
    min-height: 0;
}
.gear-paperdoll-shell, .toolbelt-shell {
    border: 1px solid var(--line-soft);
    background: rgba(14, 10, 8, .45);
    border-radius: 8px;
    padding: .75rem;
    min-height: 0;
}
.equipment-section-title {
    display: flex;
    justify-content: space-between;
    gap: .8rem;
    align-items: center;
    color: #d9b36f;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .82rem;
    margin-bottom: .65rem;
}
.gear-slot-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(84px, 1fr));
    grid-template-areas:
        ". head cape ."
        "main body necklace off"
        "hands legs ring ammo"
        ". feet . .";
    gap: .55rem;
    align-items: stretch;
}
.equipment-slot {
    position: relative;
    min-height: 78px;
    display: grid;
    place-items: center;
    gap: .18rem;
    padding: .5rem;
    border: 1px dashed rgba(198,143,72,.35);
    background: #0b0908;
    border-radius: 6px;
    text-align: center;
    overflow: hidden;
}
.gear-slot-head { grid-area: head; }
.gear-slot-body { grid-area: body; min-height: 92px; }
.gear-slot-hands { grid-area: hands; }
.gear-slot-legs { grid-area: legs; }
.gear-slot-feet { grid-area: feet; }
.gear-slot-main_hand { grid-area: main; }
.gear-slot-off_hand { grid-area: off; }
.gear-slot-cape { grid-area: cape; }
.gear-slot-necklace { grid-area: necklace; }
.gear-slot-ring { grid-area: ring; }
.gear-slot-ammo { grid-area: ammo; }
.toolbelt-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(120px, 1fr));
    gap: .55rem;
}
.toolbelt-slot { min-height: 78px; }
.equipment-slot.filled { border-style: solid; border-color: #7c5e36; background: linear-gradient(180deg, #1d1712, #0d0b0a); }
.equipment-slot.locked { opacity: .5; background: #080605; }
.equipment-label { position: absolute; left: .45rem; top: .35rem; font-size: .65rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.equipment-name { display: block; max-width: 100%; font-size: .78rem; color: #e5c894; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 .2rem; }
.empty-slot, .locked-slot { color: rgba(185,146,92,.55); font-size: .86rem; }
.unequip-form { top: .3rem; right: .3rem; }
.toolbelt-hint { margin: .65rem 0 0; }
.compact-chat-shell { display: grid; grid-template-rows: 42px 1fr 42px; height: 100%; min-height: 0; }
.chat-panels { min-height: 0; overflow: hidden; }
.chat-feed { display: none; height: 100%; overflow: auto; padding: .5rem 0; }
.chat-feed.active { display: grid; align-content: start; gap: .45rem; }
.chat-message { position: relative; }
.chat-time { float: right; color: var(--muted); font-size: .78rem; margin-left: .5rem; }
.compact-chat-shell .chat-input-row { display: grid; grid-template-columns: 1fr auto; gap: .5rem; border-top: 1px solid var(--line); padding: .45rem 0 0; }
.compact-chat-shell .chat-input-row .btn { padding: .45rem .85rem; }

.item-card { position: relative; }
.item-card-visual, .shop-card-visual { display: flex; align-items: center; gap: .85rem; }
.shop-card .shop-icon { display: none; }

@media (max-width: 1100px) {
    .fixed-bottom-bar .inventory-grid-shell { grid-template-columns: repeat(8, minmax(48px, 1fr)); }
    .equipment-layout-shell { grid-template-columns: 1fr; }
    .toolbelt-grid { grid-template-columns: repeat(5, minmax(96px, 1fr)); }
}

@media (max-width: 900px) {
    .fixed-bottom-bar { height: 300px; }
    .main-panel { padding-bottom: 330px; }
    .fixed-bottom-bar .inventory-grid-shell { grid-template-columns: repeat(6, minmax(46px, 1fr)); grid-auto-rows: 62px; }
    .toolbelt-grid { grid-template-columns: repeat(3, minmax(96px, 1fr)); }
    body.bottom-collapsed .main-panel { padding-bottom: 74px; }
}

@media (max-width: 640px) {
    .bottom-bar-topline { padding: .35rem .5rem; }
    .bottom-tab, .bottom-collapse { padding: .42rem .55rem; font-size: .9rem; }
    .fixed-bottom-bar .inventory-grid-shell { grid-template-columns: repeat(4, minmax(50px, 1fr)); }
    .gear-slot-grid { grid-template-columns: repeat(3, minmax(78px, 1fr)); grid-template-areas: ". head ." "main body off" "hands legs feet" "cape necklace ring" "ammo ammo ammo"; }
    .toolbelt-grid { grid-template-columns: repeat(2, minmax(96px, 1fr)); }
    .slot-img { width: 38px; height: 38px; }
}

.has-tooltip { position: relative; }
.has-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    transform: translateX(-50%);
    width: max-content;
    max-width: min(280px, 80vw);
    padding: .65rem .75rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #120d0a;
    color: #f0d8a8;
    box-shadow: var(--shadow);
    white-space: pre-line;
    font-size: .82rem;
    line-height: 1.35;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 60;
}
.has-tooltip:hover::after, .has-tooltip:focus-within::after {
    opacity: 1;
    visibility: visible;
}
.slot-action-form.slot-action-sell { top: auto; bottom: 3px; right: 3px; }
.slot-action-form.slot-action-sell button { background: #3e5128; border-color: #7d9853; }
.item-card small { color: var(--muted); display: block; margin-top: .2rem; }
.sell-form { border-top: 1px solid var(--line-soft); padding-top: .65rem; margin-top: .35rem; }
@media (hover: none) {
    .has-tooltip::after { display: none; }
}

/* Phase 4.5 bank, modal and alignment pass */
.page-head,
.page-head.centered {
    justify-content: center;
    text-align: center;
}
.page-head > div {
    width: min(860px, 100%);
    margin: 0 auto;
}
.page-head h1,
.card h2,
.panel-heading-row strong {
    letter-spacing: .01em;
}
.panel-links { display: flex; gap: .9rem; align-items: center; flex-wrap: wrap; }

.fixed-bottom-bar .inventory-grid-shell {
    grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
    grid-auto-rows: 64px;
    align-content: start;
    max-height: 220px;
    overflow-y: auto;
}
.fixed-bottom-bar .inventory-slot {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    padding: 0;
    color: var(--text);
    font: inherit;
}
.fixed-bottom-bar .inventory-slot.filled {
    cursor: pointer;
}
.fixed-bottom-bar .inventory-slot.filled:hover {
    outline: 1px solid var(--gold-soft);
    transform: translateY(-1px);
}

.item-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 80;
    background: rgba(0,0,0,.68);
    opacity: 0;
    visibility: hidden;
    transition: .18s ease;
}
.item-modal, .bank-modal {
    position: fixed;
    z-index: 81;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -48%) scale(.98);
    width: min(520px, calc(100vw - 24px));
    max-height: calc(100vh - 36px);
    overflow: auto;
    background: linear-gradient(180deg, #2c1f15, #120d0a);
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: 0 24px 80px rgba(0,0,0,.7);
    padding: 1.1rem;
    opacity: 0;
    visibility: hidden;
    transition: .18s ease;
}
body.item-modal-open [data-item-modal],
body.item-modal-open .item-modal-backdrop:not(.bank-modal-backdrop) {
    opacity: 1;
    visibility: visible;
}
body.item-modal-open [data-item-modal] {
    transform: translate(-50%, -50%) scale(1);
}
.item-modal-close {
    position: absolute;
    right: .65rem;
    top: .55rem;
    width: 32px;
    height: 32px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #211711;
    color: var(--text);
    cursor: pointer;
}
.item-modal-head {
    display: grid;
    grid-template-columns: 86px 1fr;
    gap: 1rem;
    align-items: center;
    padding-right: 2rem;
    margin-bottom: 1rem;
}
.item-modal-head img {
    width: 76px;
    height: 76px;
    image-rendering: pixelated;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #0b0908;
    padding: .45rem;
}
.item-modal-actions {
    display: grid;
    gap: .85rem;
}
.item-modal-actions form {
    border: 1px solid var(--line-soft);
    background: rgba(0,0,0,.16);
    border-radius: 8px;
    padding: .8rem;
}
.bank-grid .item-card { align-content: start; }

@media (max-width: 760px) {
    .fixed-bottom-bar .inventory-grid-shell {
        grid-template-columns: repeat(5, minmax(48px, 1fr));
        grid-auto-rows: 56px;
        max-height: 210px;
    }
    .item-modal-head {
        grid-template-columns: 64px 1fr;
    }
    .item-modal-head img {
        width: 58px;
        height: 58px;
    }
}

.sell-total-line {
    margin: .2rem 0 .35rem;
    color: #d9c39b;
}
.sell-total-line strong {
    color: #f0d59f;
}

/* Phase 4.7 final pre-Smithing polish */
.avatar-medallion { text-decoration: none; }
.welcome-line a,
.subtle-line a { color: inherit; text-decoration: none; }
.welcome-line a:hover,
.subtle-line a:hover { color: var(--gold-soft); }
.top-task-name [data-countdown] { color: #f4dca7; font-weight: 700; }
.top-task-row { grid-template-columns: 38px 1fr 34px; }
.tick-orb {
    --tick-fill: 0%;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: conic-gradient(#d0a258 var(--tick-fill), #211711 0);
    border: 1px solid var(--line);
    box-shadow: inset 0 0 0 3px #0d0a08;
}
.tick-orb span {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #100c0a;
    color: transparent;
    font-size: 0;
}

.has-tooltip::after {
    border: 1px solid #b4894d;
    border-radius: 10px;
    background: linear-gradient(180deg, #2d2117, #100c09);
    color: #f3d8a3;
    box-shadow: 0 18px 55px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.08);
    padding: .75rem .85rem;
    font-family: Georgia, "Times New Roman", serif;
    font-size: .86rem;
    min-width: 190px;
    text-align: left;
}

.bank-slot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
    grid-auto-rows: 64px;
    gap: .45rem;
    max-height: 560px;
    overflow-y: auto;
    padding: .55rem;
    border: 1px solid var(--line-soft);
    background: rgba(0,0,0,.18);
    border-radius: 8px;
}
.bank-slot {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    padding: 0;
    color: var(--text);
    font: inherit;
}
.bank-slot.filled { cursor: pointer; }
.bank-slot.filled:hover {
    outline: 1px solid var(--gold-soft);
    transform: translateY(-1px);
}
body.bank-modal-open .bank-modal,
body.bank-modal-open .bank-modal-backdrop {
    opacity: 1;
    visibility: visible;
}
body.bank-modal-open .bank-modal {
    transform: translate(-50%, -50%) scale(1);
}

.profile-header-card {
    display: grid;
    grid-template-columns: 110px 1fr auto;
    gap: 1rem;
    align-items: center;
}
.profile-avatar-large {
    width: 94px;
    height: 94px;
    border: 1px solid var(--line);
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(180deg, #7b5633, #211711);
    font-size: 2.4rem;
}
.profile-title { color: var(--gold-soft); }
.profile-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 1rem; }
.profile-skill-list { display: grid; gap: .45rem; }
.profile-skill-row { display: grid; grid-template-columns: 1fr auto; gap: 1rem; padding: .45rem 0; border-bottom: 1px solid var(--line-soft); }
.badge-list { display: grid; gap: .6rem; }
.badge-card { padding: .75rem; border: 1px solid var(--line-soft); border-radius: 8px; background: rgba(0,0,0,.18); }
.profile-actions { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 820px) {
    .profile-header-card { grid-template-columns: 1fr; text-align: center; justify-items: center; }
    .profile-grid { grid-template-columns: 1fr; }
    .profile-actions { justify-content: center; }
    .top-task-row { grid-template-columns: 34px 1fr 34px; }
}

/* Phase 5.1 compact task cards, smithing tabs, custom tooltips */
.task-card, .node-card, .item-card, .skill-tile {
    padding: .62rem .7rem;
    gap: .24rem;
    font-size: .92rem;
}
.task-card strong, .node-card strong, .item-card strong, .skill-tile span {
    line-height: 1.15;
}
.compact-task-list {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.compact-task-card {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: .45rem .75rem;
}
.compact-task-card > span { font-size: .82rem; color: var(--muted); }
.compact-actions { grid-column: 1 / -1; display: flex; gap: .35rem; }
.btn.tiny { padding: .32rem .55rem; font-size: .8rem; }
.compact-card { padding: .9rem; }
.compact-label { margin: 0; }
.section-title-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: .9rem; }
.smithing-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin-bottom: .85rem;
}
.smithing-tab {
    border: 1px solid var(--line);
    background: linear-gradient(180deg, #2f2218, #19120d);
    color: var(--muted);
    padding: .45rem .75rem;
    border-radius: 999px;
    cursor: pointer;
}
.smithing-tab.active {
    color: #fff1cb;
    background: linear-gradient(180deg, #7d5730, #4a321f);
    box-shadow: 0 0 16px rgba(216,162,78,.18);
}
.smithing-panel { display: none; }
.smithing-panel.active { display: block; }
.compact-node-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
    gap: .55rem;
}
.compact-node-card {
    width: 100%;
    text-align: left;
    color: var(--text);
    cursor: pointer;
    min-height: 112px;
}
.compact-node-card:hover {
    border-color: rgba(216,162,78,.65);
    transform: translateY(-1px);
}
.compact-node-title { color: #f1d8a0; font-weight: 700; }
.recipe-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0,0,0,.72);
}
.recipe-modal-backdrop.open { display: flex; }
.recipe-modal {
    width: min(720px, 100%);
    max-height: min(84vh, 760px);
    overflow: auto;
    position: relative;
    border: 1px solid rgba(216,162,78,.55);
    border-radius: 12px;
    background: linear-gradient(180deg, #2b1d14, #110d0a 70%);
    box-shadow: 0 24px 80px rgba(0,0,0,.65), inset 0 0 0 1px rgba(255,220,160,.06);
    padding: 1.25rem;
}
.modal-stat-grid { margin: .85rem 0; }
.modal-buttons { justify-content: flex-start; }
.furnace-form {
    display: grid;
    grid-template-columns: minmax(90px, 1fr) auto;
    align-items: end;
    gap: .6rem;
}
.game-tooltip-floating {
    position: fixed;
    z-index: 120;
    max-width: 280px;
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .12s ease, transform .12s ease;
    padding: .7rem .85rem;
    border: 1px solid rgba(216,162,78,.65);
    border-radius: 8px;
    background: linear-gradient(180deg, #2d2118, #100c09);
    color: #f0d6a0;
    box-shadow: 0 14px 40px rgba(0,0,0,.58), inset 0 0 0 1px rgba(255,226,170,.06);
    font-size: .9rem;
    line-height: 1.35;
    white-space: pre-line;
}
.game-tooltip-floating.visible { opacity: 1; transform: translateY(0); }
.has-tooltip::after { content: none !important; display: none !important; }

@media (max-width: 720px) {
    .compact-task-card { grid-template-columns: 1fr; }
    .section-title-row { flex-direction: column; }
    .compact-node-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .furnace-form { grid-template-columns: 1fr; }
}

/* Phase 6.6 shop usability and larger bottom panel */
:root { --bottom-h: clamp(360px, 46vh, 540px); }
.main-panel { padding-bottom: calc(var(--bottom-h) + 38px); }
.fixed-bottom-bar { height: var(--bottom-h); }
body.bottom-collapsed .fixed-bottom-bar { transform: translateY(calc(100% - 46px)); }
body.bottom-collapsed .main-panel { padding-bottom: 82px; }
.bottom-content { height: calc(100% - 46px); }
.fixed-bottom-bar .inventory-grid-shell { max-height: calc(var(--bottom-h) - 96px); }
.equipment-layout-shell, .compact-chat-shell { min-height: calc(var(--bottom-h) - 90px); }

.shop-shell-card { padding: 1rem; }
.shop-toolbar {
    display: grid;
    grid-template-columns: minmax(220px, .85fr) minmax(320px, 1.15fr);
    gap: 1rem;
    align-items: end;
    margin-bottom: 1rem;
}
.shop-toolbar h2 { margin-bottom: .2rem; }
.shop-toolbar p { margin: 0; }
.shop-category-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .45rem;
}
.shop-category-tab {
    border: 1px solid var(--line-soft);
    border-radius: 999px;
    background: #17110d;
    color: var(--muted);
    padding: .5rem .75rem;
    cursor: pointer;
}
.shop-category-tab.active,
.shop-category-tab:hover {
    border-color: var(--line);
    background: linear-gradient(180deg, #6a4729, #3a291c);
    color: #fff1cb;
}
.shop-category-panel { display: none; }
.shop-category-panel.active { display: block; }
.shop-action-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: .75rem;
    align-items: stretch;
}
.shop-buy-card {
    display: grid;
    grid-template-rows: 1fr auto;
    min-height: 224px;
    padding: .72rem;
}
.action-card-main.shop-card-main {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: rgba(0,0,0,.13);
    color: inherit;
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: .65rem;
    align-items: center;
    text-align: left;
    padding: .55rem;
    cursor: pointer;
}
.action-card-main.shop-card-main:hover {
    border-color: var(--gold-soft);
    background: rgba(214,162,78,.08);
}
.action-card-icon .item-img { width: 46px; height: 46px; }
.action-card-body { min-width: 0; display: grid; gap: .16rem; }
.action-card-body strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.shop-buy-form {
    display: grid;
    gap: .42rem;
    margin-top: .55rem;
}
.amount-control { margin: 0; gap: .25rem; }
.amount-control input { padding: .48rem .55rem; }
.shop-buy-footer {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: .45rem;
}
.small-btn { padding: .46rem .6rem; }
.buy-total-line { margin: 0; text-align: right; }
.buy-total-line strong { color: #f0d59f; }
.shop-buy-modal-card .shop-buy-form { margin-top: 0; }

@media (max-width: 900px) {
    :root { --bottom-h: clamp(380px, 52vh, 560px); }
    .fixed-bottom-bar { height: var(--bottom-h); }
    .main-panel { padding-bottom: calc(var(--bottom-h) + 36px); }
    .shop-toolbar { grid-template-columns: 1fr; align-items: start; }
    .shop-category-tabs { justify-content: flex-start; }
    .shop-action-grid { grid-template-columns: repeat(auto-fill, minmax(205px, 1fr)); }
}

@media (max-width: 640px) {
    :root { --bottom-h: 56vh; }
    .shop-action-grid { grid-template-columns: 1fr; }
    .shop-buy-card { min-height: 0; }
}

/* Phase 7.1 shop icon and stove polish */
.action-card-icon {
    width: 52px;
    height: 52px;
    min-width: 52px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: radial-gradient(circle at 35% 25%, rgba(214,162,78,.16), rgba(0,0,0,.18) 48%, rgba(0,0,0,.36));
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.025);
    overflow: hidden;
}
.action-card-icon .item-img,
.shop-card .action-card-icon .item-img {
    width: 38px;
    height: 38px;
    max-width: 38px;
    max-height: 38px;
    object-fit: contain;
}
.action-card-main.shop-card-main {
    grid-template-columns: 52px minmax(0, 1fr);
    align-items: center;
}
.stove-fuel-form {
    margin-top: .65rem;
    align-items: end;
}
.stove-fuel-form .amount-control {
    min-width: 120px;
}

/* Phase 7.2 tavern card icon alignment fix */
.shop-buy-card.shop-card {
    display: grid;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto;
    gap: .65rem;
    min-height: 0;
    align-content: start;
}
.shop-buy-card.shop-card form,
.shop-buy-card.shop-card .shop-buy-form {
    grid-column: auto !important;
}
.shop-buy-card .action-card-main.shop-card-main {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    min-height: 76px;
    align-items: center;
    width: 100%;
}
.shop-buy-card .action-card-icon {
    width: 50px;
    height: 50px;
    min-width: 50px;
    max-width: 50px;
    align-self: center;
    justify-self: center;
}
.shop-buy-card .action-card-icon .item-img,
.shop-buy-card.shop-card .action-card-icon .item-img {
    width: 36px;
    height: 36px;
    max-width: 36px;
    max-height: 36px;
}
.shop-buy-card .action-card-body {
    min-width: 0;
    overflow: hidden;
}
.shop-buy-card .action-card-body strong {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.1;
    word-break: normal;
    overflow-wrap: anywhere;
}
.shop-buy-card .action-card-body .small {
    display: block;
    line-height: 1.2;
}
@media (max-width: 640px) {
    .shop-buy-card .action-card-main.shop-card-main {
        grid-template-columns: 56px minmax(0, 1fr);
    }
}

/* Phase 9: collapsible skill sidebar and mobile menu placement */
.sidebar-skill-group {
    border: 1px solid rgba(184, 128, 70, .22);
    background: rgba(27, 18, 12, .55);
    border-radius: 10px;
    overflow: hidden;
}
.sidebar-skill-group + .sidebar-skill-group { margin-top: .65rem; }
.sidebar-group-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .65rem .75rem;
    border: 0;
    border-bottom: 1px solid rgba(184, 128, 70, .14);
    background: linear-gradient(180deg, rgba(70, 45, 27, .78), rgba(32, 21, 14, .82));
    color: #f0d59f;
    font-weight: 800;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
}
.sidebar-chevron { transition: transform .18s ease; color: #d3a45e; }
.sidebar-skill-group.open .sidebar-chevron { transform: rotate(180deg); }
.sidebar-group-nav {
    display: none;
    padding: .55rem .7rem .75rem;
    gap: .42rem;
}
.sidebar-skill-group.open .sidebar-group-nav { display: grid; }
.sidebar-group-nav .sidebar-link {
    display: block;
    padding: .32rem .35rem;
    border-radius: 6px;
    font-size: .94rem;
}
.sidebar-group-nav .sidebar-link.active {
    background: rgba(214, 170, 86, .12);
    box-shadow: inset 3px 0 0 #d0a258;
}

@media (max-width: 900px) {
    .mobile-menu-fab {
        bottom: calc(env(safe-area-inset-bottom, 0px) + 300px);
    }
    body.bottom-collapsed .mobile-menu-fab {
        bottom: calc(env(safe-area-inset-bottom, 0px) + 58px);
    }
}

/* Phase 11: leaderboards, friends and private messages */
.leaderboard-filter-row,
.private-chat-head,
.request-row,
.inline-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.inline-filter-form label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: .9rem;
}
.leaderboard-table-shell {
    width: 100%;
    overflow-x: auto;
    margin-top: 14px;
}
.leaderboard-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 560px;
}
.leaderboard-table th,
.leaderboard-table td {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(214, 170, 95, .16);
    text-align: left;
}
.leaderboard-table th {
    color: var(--gold);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.leaderboard-table tr:hover td {
    background: rgba(255,255,255,.025);
}
.friends-layout {
    display: grid;
    grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}
.friend-list {
    display: grid;
    gap: 8px;
    margin-top: 10px;
}
.friend-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: 1px solid rgba(214, 170, 95, .2);
    border-radius: 12px;
    background: rgba(0,0,0,.16);
    color: var(--text);
    text-decoration: none;
}
.friend-row:hover,
.friend-row.active {
    border-color: rgba(214, 170, 95, .55);
    background: rgba(214, 170, 95, .08);
}
.friend-avatar {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid rgba(214,170,95,.45);
    background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.18), rgba(82,45,18,.72));
    color: var(--gold);
    font-weight: 800;
}
.small-section h3 {
    font-size: .92rem;
    color: var(--gold);
    margin-bottom: 8px;
}
.private-chat-card {
    min-height: 520px;
    display: flex;
    flex-direction: column;
}
.private-chat-feed {
    margin-top: 12px;
    flex: 1;
    min-height: 320px;
    max-height: 52vh;
    overflow: auto;
    padding: 12px;
    border: 1px solid rgba(214, 170, 95, .16);
    border-radius: 14px;
    background: rgba(0,0,0,.18);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.private-message {
    max-width: min(78%, 560px);
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(214, 170, 95, .18);
    background: rgba(255,255,255,.04);
}
.private-message.mine {
    align-self: flex-end;
    border-color: rgba(116, 177, 111, .35);
    background: rgba(59, 111, 65, .20);
}
.private-message.theirs {
    align-self: flex-start;
}
.private-message p {
    margin: 4px 0;
    white-space: pre-wrap;
}
.private-message span {
    display: block;
    color: var(--muted);
    font-size: .74rem;
}
.private-chat-form {
    margin-top: 12px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: end;
}
.private-chat-form textarea {
    min-height: 64px;
    resize: vertical;
}
.btn.tiny {
    padding: 6px 9px;
    min-height: 0;
    font-size: .78rem;
}
@media (max-width: 900px) {
    .friends-layout { grid-template-columns: 1fr; }
    .leaderboard-filter-row,
    .private-chat-head,
    .request-row { align-items: flex-start; flex-direction: column; }
    .private-chat-form { grid-template-columns: 1fr; }
}

/* Phase 12 clan foundation */
.clan-hero { display:flex; justify-content:space-between; gap:18px; align-items:flex-start; }
.clan-hero-note { border:1px solid rgba(205,157,83,.35); background:rgba(75,49,24,.35); border-radius:12px; padding:12px; max-width:320px; color:#e5c993; }
.clan-grid { display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap:16px; }
.clan-create-card .compact-form-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:end; }
.clan-bank-grid { grid-template-columns: repeat(auto-fill, minmax(52px, 52px)); }
.clan-bank-slot { position:relative; border:1px solid rgba(205,157,83,.35); background:rgba(22,15,9,.75); border-radius:10px; min-height:52px; padding:4px; display:grid; place-items:center; }
.clan-bank-slot .slot-img { width:32px; height:32px; object-fit:contain; }
.tiny-slot-btn { position:absolute; right:2px; bottom:2px; min-width:20px; height:18px; border:1px solid rgba(205,157,83,.6); border-radius:6px; background:#3b2512; color:#f4d89b; font-size:11px; cursor:pointer; }
.clan-boss-card .big-progress { height:18px; margin:12px 0; }
.clan-boss-card .big-progress span { transition:width .25s ease; }
.skill-tabs a.tab-button { text-decoration:none; }
@media (max-width: 860px) { .clan-grid, .clan-hero { grid-template-columns:1fr; display:grid; } .clan-create-card .compact-form-row { grid-template-columns:1fr; } }

/* Phase 12.2 clan tab and boss polish */
.clan-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}
.clan-tab-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 16px;
    border: 1px solid rgba(205,157,83,.42);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(84,55,28,.92), rgba(39,25,14,.96));
    color: #e8c98f;
    text-decoration: none;
    font-weight: 800;
    letter-spacing: .01em;
    box-shadow: inset 0 1px 0 rgba(255,230,170,.08), 0 10px 20px rgba(0,0,0,.16);
    transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.clan-tab-button:hover {
    transform: translateY(-1px);
    border-color: rgba(241,196,116,.72);
    color: #fff2c7;
}
.clan-tab-button.active {
    background: linear-gradient(180deg, rgba(127,82,37,.98), rgba(79,48,22,.98));
    border-color: rgba(241,196,116,.88);
    color: #fff4ce;
    box-shadow: 0 0 0 2px rgba(205,157,83,.14), 0 12px 26px rgba(0,0,0,.22);
}
.boss-combat-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 10px;
    margin: 12px 0;
}
.boss-combat-stats span {
    border: 1px solid rgba(205,157,83,.28);
    border-radius: 12px;
    background: rgba(27,18,10,.62);
    padding: 10px 12px;
    color: #d8bd85;
}
.boss-combat-stats strong { color: #fff0bd; }
.boss-upgrade-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
}
.boss-upgrade-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 150px;
    padding: 12px;
    border: 1px solid rgba(205,157,83,.3);
    border-radius: 14px;
    background: rgba(22,15,9,.62);
}
.boss-upgrade-card .btn { margin-top: auto; width: 100%; }
.boss-upgrade-card.is-maxed {
    border-color: rgba(125,211,138,.42);
    background: rgba(31,49,28,.35);
}
.boss-upgrade-head {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: flex-start;
}
.cap-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    padding: 3px 7px;
    border: 1px solid rgba(205,157,83,.42);
    border-radius: 999px;
    color: #f4d99c;
    font-size: .72rem;
    font-weight: 900;
    white-space: nowrap;
    background: rgba(75,49,24,.7);
}
.cap-badge.max {
    color: #ddffd8;
    border-color: rgba(125,211,138,.55);
    background: rgba(43,94,39,.45);
}
.cap-badge.infinite {
    min-width: 28px;
    font-size: .9rem;
}
.mini-cap-track {
    height: 8px;
    overflow: hidden;
    border: 1px solid rgba(205,157,83,.22);
    border-radius: 999px;
    background: rgba(0,0,0,.28);
}
.mini-cap-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #8f5d2f, #d4a351);
}
@media (max-width: 700px) {
    .clan-tab-button { flex: 1 1 calc(50% - 8px); padding: 9px 10px; }
    .boss-upgrade-grid { grid-template-columns: 1fr; }
}

/* Phase 13 - Clan Warfare */
.clan-warfare-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}
.warfare-stockpile-grid {
    max-height: 360px;
    overflow: auto;
}
.compact-grid .compact-action-card form.compact-form-row {
    display: grid;
    grid-template-columns: 80px auto;
    gap: 8px;
    align-items: center;
    margin-top: 10px;
}
.compact-grid .compact-action-card input[type="number"] {
    width: 100%;
    min-width: 0;
}
@media (max-width: 760px) {
    .clan-warfare-hero { align-items: flex-start; flex-direction: column; }
    .compact-grid .compact-action-card form.compact-form-row { grid-template-columns: 1fr; }
}

/* Phase 14: tutorial, vendor wording, live feedback */
.tutorial-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(12, 8, 4, .72);
    backdrop-filter: blur(3px);
}
.tutorial-card {
    width: min(680px, 96vw);
    max-height: min(82vh, 760px);
    overflow: auto;
    border: 2px solid rgba(214, 166, 78, .72);
    border-radius: 18px;
    background: linear-gradient(180deg, #2b1b10, #16100b);
    box-shadow: 0 24px 80px rgba(0,0,0,.62), inset 0 0 0 1px rgba(255,255,255,.04);
    padding: 24px;
}
.tutorial-steps {
    margin: 18px 0;
    padding-left: 24px;
    display: grid;
    gap: 8px;
}
.tutorial-steps li {
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(255,255,255,.04);
    color: #e7d0aa;
}
.tutorial-steps li.done {
    color: #c8f0b4;
    border: 1px solid rgba(111, 202, 94, .45);
    background: rgba(75, 135, 55, .18);
}
.tutorial-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.achievement-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
}
.achievement-card {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    min-height: 118px;
    padding: 14px;
    border: 1px solid rgba(214,166,78,.35);
    border-radius: 14px;
    background: rgba(255,255,255,.035);
}
.achievement-card.featured {
    border-color: rgba(244, 196, 91, .75);
    box-shadow: 0 0 18px rgba(244, 196, 91, .10);
}
.achievement-medal {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: rgba(214,166,78,.16);
    border: 1px solid rgba(214,166,78,.38);
    flex: 0 0 auto;
}
.tick-popup-shell {
    position: fixed;
    right: 18px;
    bottom: calc(var(--bottom-bar-height, 44vh) + 16px);
    z-index: 1400;
    display: grid;
    gap: 8px;
    pointer-events: none;
}
.bottom-collapsed .tick-popup-shell { bottom: 88px; }
.tick-popup {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 170px;
    padding: 8px 10px;
    border: 1px solid rgba(214,166,78,.65);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(45,29,16,.95), rgba(20,13,8,.95));
    color: #f7e3b7;
    opacity: 0;
    transform: translateY(8px) scale(.98);
    transition: opacity .18s ease, transform .18s ease;
    box-shadow: 0 10px 26px rgba(0,0,0,.35);
}
.tick-popup.show { opacity: 1; transform: translateY(0) scale(1); }
.tick-popup img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    image-rendering: auto;
}
.chat-friends-link {
    text-align: right;
    margin: 4px 0 6px;
}

/* Phase 14.1: guided tutorial overlay fix */
.tutorial-modal {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: max(18px, env(safe-area-inset-top)) 18px max(92px, env(safe-area-inset-bottom));
    background: transparent;
    pointer-events: none;
}
body.tutorial-modal-open .tutorial-modal {
    display: flex;
}
.tutorial-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(8, 5, 3, .72);
    backdrop-filter: blur(4px);
    pointer-events: auto;
}
.tutorial-card {
    position: relative;
    z-index: 1;
    width: min(680px, calc(100vw - 28px));
    max-height: min(78vh, 760px);
    overflow: auto;
    border: 2px solid rgba(218, 166, 74, .85);
    border-radius: 20px;
    background: radial-gradient(circle at top left, rgba(92, 58, 27, .82), transparent 42%), linear-gradient(180deg, #2b1b10, #120d09 72%);
    box-shadow: 0 28px 90px rgba(0,0,0,.78), inset 0 0 0 1px rgba(255,255,255,.05);
    padding: 24px;
    pointer-events: auto;
}
.tutorial-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(214,166,78,.65);
    border-radius: 999px;
    background: rgba(16, 10, 6, .92);
    color: #f4dfba;
    font-size: 22px;
    cursor: pointer;
}
.tutorial-current-step {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin: 16px 0;
    padding: 12px 14px;
    border: 1px solid rgba(214,166,78,.45);
    border-radius: 14px;
    background: rgba(214,166,78,.10);
    color: #f4dfba;
}
.tutorial-arrow {
    color: #f0b95d;
    font-size: 22px;
    line-height: 1;
    animation: tutorialArrowPulse 1.2s ease-in-out infinite;
}
@keyframes tutorialArrowPulse {
    0%, 100% { transform: translateX(0); opacity: .75; }
    50% { transform: translateX(6px); opacity: 1; }
}
.tutorial-steps {
    margin: 18px 0;
    padding-left: 0;
    display: grid;
    gap: 8px;
    list-style-position: inside;
}
.tutorial-steps li {
    padding: 9px 11px;
    border-radius: 11px;
    background: rgba(255,255,255,.045);
    color: #e7d0aa;
}
.tutorial-steps li.done {
    color: #c8f0b4;
    border: 1px solid rgba(111, 202, 94, .45);
    background: rgba(75, 135, 55, .18);
}
.tutorial-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.tutorial-pill {
    position: fixed;
    right: 18px;
    bottom: calc(var(--bottom-bar-collapsed-height, 74px) + 18px + env(safe-area-inset-bottom));
    z-index: 2200;
    display: flex;
    gap: 10px;
    align-items: center;
    border: 1px solid rgba(214,166,78,.75);
    border-radius: 999px;
    background: linear-gradient(180deg, #684222, #2a1a10);
    color: #f4dfba;
    padding: 10px 14px;
    font-weight: 800;
    letter-spacing: .03em;
    box-shadow: 0 12px 34px rgba(0,0,0,.55);
    cursor: pointer;
    animation: tutorialPillGlow 1.8s ease-in-out infinite;
}
.tutorial-pill strong {
    color: #ffd985;
}
@keyframes tutorialPillGlow {
    0%, 100% { box-shadow: 0 12px 34px rgba(0,0,0,.55), 0 0 0 rgba(214,166,78,0); }
    50% { box-shadow: 0 12px 34px rgba(0,0,0,.55), 0 0 22px rgba(214,166,78,.35); }
}
.tutorial-highlight {
    position: relative;
    z-index: 2600 !important;
    outline: 2px solid #ffd178 !important;
    box-shadow: 0 0 0 5px rgba(214,166,78,.18), 0 0 24px rgba(214,166,78,.55) !important;
    animation: tutorialHighlightPulse 1.1s ease-in-out infinite;
}
@keyframes tutorialHighlightPulse {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.22); }
}
@media (max-width: 760px) {
    .tutorial-modal {
        align-items: flex-end;
        padding: 16px 12px calc(var(--bottom-bar-collapsed-height, 74px) + 16px + env(safe-area-inset-bottom));
    }
    .tutorial-card {
        max-height: 68vh;
        padding: 18px;
        border-radius: 16px;
    }
    .tutorial-card h2 {
        font-size: 1.55rem;
    }
    .tutorial-pill {
        right: 14px;
        bottom: calc(var(--bottom-bar-collapsed-height, 74px) + 14px + env(safe-area-inset-bottom));
    }
}

/* Phase 14.2: live tick counter and inventory sync */
.top-task-stack {
    display: grid;
    gap: 3px;
    min-width: 0;
}
.tick-counter {
    text-align: center;
    font-size: .78rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #caa46a;
    line-height: 1;
}
.tick-counter span {
    color: #f8e7c3;
    font-weight: 800;
}
@media (max-width: 820px) {
    .tick-counter { font-size: .72rem; }
}

/* Phase 14.3: stable topbar tick display */
.top-task-remaining {
    text-align: center;
    color: var(--muted);
    font-size: .72rem;
    line-height: 1;
}
.top-task-remaining span {
    color: #d8ba82;
    font-weight: 700;
}
.top-task-name [data-top-task-countdown] { color: inherit; }

/* Phase 14.4 fixes */
.top-task-row { grid-template-columns: 38px minmax(0, 1fr) auto !important; }
.top-task-actions { display: inline-flex; align-items: center; gap: .3rem; }
.top-icon-btn { width: 32px; height: 32px; border-radius: 10px; border: 1px solid rgba(211,154,72,.65); background: rgba(74,42,20,.82); color: #f7dfaa; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; text-decoration: none; cursor: pointer; }
.top-icon-btn:hover { background: rgba(165,105,43,.9); color: #160c07; }
.top-icon-btn.danger { border-color: rgba(191,80,66,.8); color: #ffd0ca; }
.top-task-form { margin: 0; }
.queue-edit-card { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.queue-edit-card.active { border-color: rgba(226,184,105,.9); box-shadow: 0 0 0 1px rgba(226,184,105,.2) inset; }
.queue-actions { display:flex; align-items:center; gap:.35rem; flex-wrap:wrap; justify-content:flex-end; }
.btn.danger { border-color: rgba(191,80,66,.8); color: #ffd0ca; }
.upgrade-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap:.8rem; }
.upgrade-card { border:1px solid rgba(140,91,45,.55); border-radius:16px; background:rgba(28,16,9,.55); padding:.85rem; display:flex; flex-direction:column; gap:.45rem; }
.upgrade-card.maxed { opacity:.85; border-color:rgba(226,184,105,.7); }
.danger-card { border-color:rgba(191,80,66,.85)!important; box-shadow:0 0 0 1px rgba(191,80,66,.16) inset; }
body:not(.bottom-collapsed) .mobile-menu-fab { display: none !important; }
@media (max-width: 800px) { .top-task-row { grid-template-columns: 34px minmax(0,1fr) auto !important; } .top-task-actions { gap:.2rem; } .top-icon-btn { width:29px; height:29px; } }

/* Phase 14.4 task controls, queue and farming machine */
.top-task-actions{display:flex;gap:.35rem;align-items:center}.top-task-actions form{margin:0}.danger-icon{color:#ffb6a6;border-color:#8f4438}.queue-list{display:grid;gap:.65rem}.queue-row{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:.75rem;align-items:center;padding:.75rem;border:1px solid rgba(196,146,72,.35);border-radius:12px;background:rgba(20,12,8,.62)}.queue-position{font-size:1.35rem;text-align:center;color:#d9ae69}.queue-actions{display:flex;gap:.35rem;flex-wrap:wrap}.machine-upgrade-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:.75rem}.machine-status-broken{border-color:#a44436!important;box-shadow:0 0 22px rgba(200,60,35,.2)}.loot-modal-actions{display:grid;gap:.55rem;margin-top:.75rem}.loot-modal-actions form{display:none}.loot-modal-actions form.active{display:block}@media(max-width:700px){.top-task-actions{position:absolute;right:.35rem;top:.25rem}.queue-row{grid-template-columns:34px 1fr}.queue-actions{grid-column:1/-1}.mobile-menu-fab{transition:opacity .2s,visibility .2s}body:not(.bottom-collapsed) .mobile-menu-fab{opacity:0;visibility:hidden;pointer-events:none}}

/* Phase 14.6: mobile topbar, compact item modals and touch-safe tooltips */
.modal-hidden-form { display: none !important; }
.compact-item-actions { gap: .75rem; }
.modal-action-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}
.modal-action-buttons .btn { flex: 1 1 130px; }
.modal-amount-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .55rem;
    align-items: end;
    border: 1px solid var(--line-soft);
    background: rgba(0,0,0,.16);
    border-radius: 10px;
    padding: .75rem;
}
.modal-amount-row label { margin: 0; }
.modal-amount-row input { width: 100%; }
.item-modal-actions.compact-item-actions form { padding: 0; border: 0; background: transparent; }

@media(max-width:700px){
    .game-topbar {
        position: relative;
        grid-template-columns: 1fr;
        gap: .55rem;
        padding: .75rem .85rem 1rem;
    }
    .topbar-left {
        align-items: center;
        padding-right: 6.6rem;
        min-height: 44px;
    }
    .welcome-line { font-size: 1rem; line-height: 1.15; }
    .subtle-line { font-size: .78rem; line-height: 1.15; }
    .topbar-center { padding-top: .15rem; }
    .top-task-actions {
        position: static !important;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: .28rem;
    }
    .top-task-row {
        grid-template-columns: 30px minmax(0,1fr) auto !important;
        align-items: center;
        gap: .42rem;
    }
    .top-icon-btn { width: 32px; height: 32px; border-radius: 9px; }
    .resource-bar { justify-content: flex-start; }
    .modal-action-buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .modal-action-buttons .btn { min-width: 0; flex: none; padding-left: .45rem; padding-right: .45rem; }
}


/* Phase 14.7: mobile topbar restore - task info central, actions fixed right */
.top-task-row {
    position: relative;
}
@media(max-width:700px){
    .game-topbar {
        grid-template-columns: 1fr;
        gap: .5rem;
        padding: .72rem .85rem .9rem;
    }
    .topbar-left {
        padding-right: 6.9rem;
        min-height: 44px;
    }
    .topbar-center {
        justify-self: center;
        width: 100%;
        max-width: 390px;
        padding-top: 0;
    }
    .top-task-name {
        padding-right: 0;
        font-size: .96rem;
        line-height: 1.15;
    }
    .top-task-row {
        grid-template-columns: 38px minmax(0, 1fr) !important;
        gap: .55rem;
        padding-right: 0;
    }
    .top-task-stack {
        min-width: 0;
        width: 100%;
    }
    .tick-counter {
        font-size: .82rem;
        line-height: 1.1;
    }
    .top-task-remaining {
        font-size: .78rem;
        line-height: 1.1;
    }
    .top-task-actions {
        position: fixed !important;
        right: calc(.7rem + env(safe-area-inset-right));
        top: calc(.7rem + env(safe-area-inset-top));
        z-index: 35;
        display: inline-flex;
        align-items: center;
        justify-content: flex-end;
        gap: .32rem;
        width: auto;
    }
    .top-icon-btn {
        width: 34px;
        height: 34px;
        border-radius: 10px;
        font-size: .98rem;
    }
    .resource-bar {
        justify-content: flex-start;
        padding-right: 0;
    }
}

/* Phase 14.7: achievement log and reward UI */
.section-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .9rem;
}
.achievement-grid.expanded {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.achievement-card.locked {
    opacity: .78;
    filter: saturate(.75);
}
.achievement-card.unlocked {
    border-color: rgba(226, 184, 105, .72);
    box-shadow: 0 0 0 1px rgba(226,184,105,.12) inset;
}
.achievement-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .7rem;
}
.achievement-card-head h3 { margin-bottom: .25rem; }
.achievement-category {
    flex: 0 0 auto;
    border: 1px solid rgba(211,154,72,.45);
    background: rgba(52,32,18,.6);
    color: #e7c486;
    border-radius: 999px;
    padding: .18rem .48rem;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.achievement-scroll-card {
    border-color: rgba(226,184,105,.7);
}
.achievement-scroll-form {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    align-items: end;
}

/* Phase 14.8: richer item details in compact modals */
.item-modal-details {
    white-space: pre-line;
    margin-top: .45rem;
    padding: .55rem .65rem;
    border: 1px solid rgba(196,146,72,.28);
    border-radius: 10px;
    background: rgba(20,12,8,.45);
    color: #e7d3ad;
    font-size: .88rem;
    line-height: 1.35;
}

/* Phase 14.11: rebuilt topbar layout and player-friendly task quantity controls */
.game-topbar {
    grid-template-columns: minmax(230px, 300px) minmax(260px, 1fr) auto;
    min-height: 76px;
    height: auto;
}
.topbar-center {
    max-width: 440px;
    min-width: 0;
}
.top-task-row {
    grid-template-columns: 38px minmax(0, 1fr) !important;
}
.topbar-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .65rem;
    min-width: 0;
}
.topbar-right .top-task-actions {
    position: static !important;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: .32rem;
    width: auto;
    z-index: auto;
}
.topbar-right .resource-bar {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: .55rem;
    min-width: 0;
    white-space: nowrap;
}
.topbar-left > div {
    min-width: 0;
}
.welcome-line,
.subtle-line {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.quantity-mode-card {
    display: grid;
    gap: .45rem;
    margin: .65rem 0;
}
.quantity-mode-toggle {
    display: inline-grid;
    grid-template-columns: 1fr 1fr;
    gap: .25rem;
    padding: .22rem;
    border: 1px solid rgba(211,154,72,.45);
    background: rgba(0,0,0,.18);
    border-radius: 12px;
}
.quantity-mode-toggle button {
    border: 0;
    border-radius: 9px;
    padding: .45rem .65rem;
    background: transparent;
    color: var(--muted);
    font-weight: 800;
    cursor: pointer;
}
.quantity-mode-toggle button.active {
    background: rgba(211,154,72,.22);
    color: #f8e7c3;
    box-shadow: inset 0 0 0 1px rgba(211,154,72,.36);
}
.quantity-mode-card label {
    margin: 0;
}
.quantity-mode-card .small {
    margin: 0;
}
.quantity-hidden-ticks {
    display: none !important;
}

@media (max-width: 1100px) {
    .game-topbar {
        grid-template-columns: minmax(190px, 260px) minmax(240px, 1fr) auto;
    }
}

@media (max-width: 700px) {
    .game-topbar {
        display: grid;
        grid-template-columns: minmax(0, .95fr) minmax(135px, 1.05fr) auto;
        grid-template-rows: auto auto;
        align-items: center;
        gap: .35rem .45rem;
        padding: calc(.45rem + env(safe-area-inset-top)) .65rem .45rem;
        min-height: 0;
    }
    .topbar-left {
        grid-column: 1;
        grid-row: 1;
        padding-right: 0 !important;
        min-height: 38px;
        min-width: 0;
        gap: .5rem;
        align-items: center;
    }
    .avatar-medallion {
        width: 34px;
        height: 34px;
        flex: 0 0 34px;
    }
    .welcome-line {
        font-size: .9rem;
        line-height: 1.1;
    }
    .subtle-line {
        display: none;
    }
    .topbar-center {
        grid-column: 2;
        grid-row: 1;
        width: 100%;
        max-width: none;
        justify-self: center;
        padding-top: 0 !important;
        gap: .12rem;
    }
    .top-task-name {
        font-size: .86rem;
        line-height: 1.05;
    }
    .top-task-row {
        grid-template-columns: 28px minmax(0, 1fr) !important;
        gap: .32rem;
    }
    .tick-orb {
        width: 28px;
        height: 28px;
    }
    .tick-counter {
        font-size: .75rem;
        line-height: 1.05;
    }
    .top-task-remaining {
        font-size: .72rem;
        line-height: 1.05;
    }
    .header-progress {
        height: 7px;
    }
    .topbar-right {
        display: contents;
    }
    .topbar-right .top-task-actions {
        grid-column: 3;
        grid-row: 1;
        align-self: center;
        justify-self: end;
        display: inline-flex;
        gap: .22rem;
        position: static !important;
    }
    .top-icon-btn {
        width: 30px;
        height: 30px;
        border-radius: 9px;
        font-size: .9rem;
    }
    .topbar-right .resource-bar {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-self: end;
        justify-content: flex-end;
        flex-wrap: nowrap;
        gap: .42rem;
        font-size: .82rem;
        max-width: 100%;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .topbar-right .resource-bar::-webkit-scrollbar { display: none; }
    .resource-item { flex: 0 0 auto; }
    .logout-link { flex: 0 0 auto; }
}

@media (max-width: 430px) {
    .game-topbar {
        grid-template-columns: minmax(0, .75fr) minmax(116px, 1fr) auto;
        gap: .3rem;
        padding-left: .5rem;
        padding-right: .5rem;
    }
    .welcome-line { font-size: .82rem; }
    .top-task-name { font-size: .78rem; }
    .tick-counter { font-size: .68rem; }
    .top-task-remaining { font-size: .66rem; }
    .top-icon-btn { width: 28px; height: 28px; }
}

/* Phase 14.18 - expanded Clans */
.clan-hero { display:grid; grid-template-columns:minmax(180px,.7fr) minmax(0,1.6fr); gap:20px; align-items:center; }
.clan-identity-block h2 { margin:.15rem 0 .55rem; }
.clan-rank-chip { display:inline-flex; align-items:center; min-height:24px; padding:3px 9px; border-radius:999px; border:1px solid rgba(215,173,102,.38); background:rgba(80,52,26,.42); color:#efd29d; font-size:.75rem; letter-spacing:.04em; }
.clan-stat-grid { display:grid; grid-template-columns:repeat(5,minmax(90px,1fr)); gap:9px; }
.clan-stat-grid > div { padding:10px 11px; border:1px solid rgba(255,255,255,.08); border-radius:11px; background:rgba(10,12,17,.42); }
.clan-stat-grid span { display:block; color:var(--muted); font-size:.73rem; margin-bottom:4px; }
.clan-stat-grid strong { font-size:1.04rem; }
.clan-level-progress-wrap { grid-column:1/-1; }
.clan-progress-label { display:flex; justify-content:space-between; gap:12px; margin-bottom:7px; font-size:.82rem; color:var(--muted); }
.clan-progress-label strong { color:#f1d29c; }
.clan-level-progress { height:15px; }
.clan-level-progress span { background:linear-gradient(90deg,#8160d4,#d5a04e); }
.clan-overview-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.clan-motd-panel { position:relative; overflow:hidden; }
.clan-motd-panel:after { content:'✦'; position:absolute; right:18px; top:11px; font-size:3.4rem; opacity:.08; }
.clan-motd-panel blockquote { margin:14px 0 0; padding:16px 18px; border-left:3px solid var(--gold); background:rgba(90,61,28,.22); border-radius:0 12px 12px 0; font-size:1.02rem; line-height:1.6; }
.clan-member-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:12px; }
.clan-member-card { display:grid; grid-template-columns:48px minmax(0,1fr) auto; gap:11px; align-items:center; border:1px solid rgba(255,255,255,.08); background:rgba(12,14,19,.48); border-radius:13px; padding:12px; }
.clan-member-card h3 { margin:0 0 5px; font-size:.98rem; }
.clan-member-card p { margin:5px 0 0; }
.clan-member-avatar { width:45px; height:45px; border-radius:50%; display:grid; place-items:center; border:2px solid rgba(207,164,91,.55); background:linear-gradient(145deg,#3d2d4e,#17151e); font-weight:800; }
.clan-contribution { text-align:right; }
.clan-contribution span { display:block; color:var(--muted); font-size:.68rem; }
.clan-contribution strong { font-size:.86rem; }
.clan-directory-list { display:grid; gap:9px; margin-top:14px; max-height:520px; overflow:auto; }
.clan-directory-card { border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:12px; background:rgba(11,13,18,.42); }
.clan-directory-card > div { display:flex; justify-content:space-between; gap:12px; align-items:start; }
.clan-directory-card h3,.clan-directory-card p { margin:0; }
.clan-directory-card > p { margin-top:8px; line-height:1.45; }
.clan-search-form { grid-template-columns:minmax(0,1fr) auto; }
.clan-invite-row small { display:block; margin-top:4px; }

.clan-bank-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(270px,340px); gap:16px; align-items:start; }
.clan-bank-sidebar { display:grid; gap:16px; }
.clan-bank-tabs { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 14px; }
.clan-bank-tab { padding:8px 12px; border:1px solid rgba(255,255,255,.1); border-radius:10px; color:var(--muted); background:rgba(12,14,19,.5); text-decoration:none; }
.clan-bank-tab:hover,.clan-bank-tab.active { color:#f1d4a1; border-color:rgba(214,164,80,.62); background:rgba(83,52,25,.46); }
.bank-security-summary { border:1px solid rgba(255,255,255,.09); border-radius:12px; padding:11px 13px; margin-bottom:14px; }
.bank-security-summary strong,.bank-security-summary > span { display:block; }
.bank-security-summary > span { color:var(--muted); font-size:.78rem; margin-top:3px; }
.bank-security-summary.allowed { border-color:rgba(87,174,119,.4); background:rgba(26,80,45,.15); }
.bank-security-summary.blocked { border-color:rgba(194,88,88,.4); background:rgba(92,34,34,.14); }
.tag-row { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.bonus-tag { display:inline-flex; align-items:center; border:1px solid rgba(255,255,255,.1); background:rgba(0,0,0,.18); border-radius:999px; padding:4px 8px; font-size:.7rem; color:#c9c5bf; }
.bonus-tag.active { border-color:rgba(99,180,124,.43); color:#9eddb0; }
.clan-bank-action-form { display:grid; grid-template-columns:minmax(0,1fr) 110px auto; gap:10px; align-items:end; margin-top:16px; }
.clan-bank-empty { grid-column:1/-1; }
.clan-bank-slot { cursor:pointer; }
.check-line { display:flex !important; align-items:center; gap:8px; }
.check-line input { width:auto; }

.clan-bonus-summary { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.clan-total-bonus-grid { display:grid; grid-template-columns:repeat(4,minmax(105px,1fr)); gap:8px; min-width:min(100%,590px); }
.clan-total-bonus-grid span { display:flex; flex-direction:column; border:1px solid rgba(255,255,255,.08); border-radius:10px; padding:9px; color:var(--muted); font-size:.68rem; text-align:center; }
.clan-total-bonus-grid strong { color:#f1d29d; font-size:1rem; }
.clan-perk-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:16px; }
.clan-perk-card { display:grid; grid-template-columns:52px minmax(0,1fr); gap:13px; align-items:start; }
.clan-perk-card form { grid-column:1/-1; }
.clan-perk-card form button { width:100%; }
.clan-perk-icon { width:50px; height:50px; display:grid; place-items:center; border-radius:13px; font-size:1.55rem; background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.08); }
.clan-perk-content h3 { margin:.15rem 0 .35rem; }
.clan-perk-content p { margin:.2rem 0; }
.clan-perk-card.is-maxed { border-color:rgba(82,170,111,.38); }

.clan-boss-stage { overflow:hidden; }
.clan-boss-stage-head,.boss-health-line > div:first-child { display:flex; justify-content:space-between; gap:12px; align-items:center; }
.clan-boss-stage-head h2 { margin:.2rem 0 0; }
.boss-health-line { margin:14px 0 10px; }
.clan-boss-arena { position:relative; min-height:280px; display:grid; grid-template-columns:minmax(120px,1fr) minmax(140px,.9fr) minmax(150px,1fr); align-items:end; gap:14px; padding:22px; border:1px solid rgba(132,97,192,.32); border-radius:16px; background:radial-gradient(circle at 50% 45%,rgba(107,70,161,.26),transparent 34%),linear-gradient(180deg,rgba(26,21,39,.92),rgba(10,11,16,.95)); overflow:hidden; }
.clan-boss-arena:after { content:''; position:absolute; inset:auto 7% 23px; height:38px; border-radius:50%; background:rgba(0,0,0,.42); filter:blur(10px); }
.boss-fighter { position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:end; transition:transform .22s ease,filter .22s ease; }
.boss-fighter strong { margin-top:7px; }
.fighter-avatar { width:96px; height:118px; border-radius:48% 48% 38% 38%; display:grid; place-items:center; font-size:2.3rem; font-weight:900; background:linear-gradient(145deg,#705232,#26202b); border:4px solid rgba(229,185,107,.65); box-shadow:0 15px 30px rgba(0,0,0,.45); }
.enemy-fighter img { width:min(190px,100%); max-height:210px; filter:drop-shadow(0 16px 20px rgba(0,0,0,.55)); }
.boss-fighter.is-attacking { transform:translateX(44px) scale(1.04); }
.enemy-fighter.is-hit { filter:brightness(1.8) saturate(.7); transform:translateX(7px); }
.boss-battle-center { position:relative; z-index:3; align-self:center; text-align:center; }
.boss-hit-float { min-height:45px; color:#f3d792; font-size:1.5rem; font-weight:900; text-shadow:0 3px 15px rgba(0,0,0,.8); }
.boss-hit-float.crit { color:#ff8d72; transform:scale(1.18); }
.boss-attack-timer { font-size:1.7rem; font-weight:800; }
.boss-attack-track { height:8px; border-radius:999px; overflow:hidden; background:rgba(255,255,255,.08); margin:9px 0; }
.boss-attack-track span { display:block; width:0; height:100%; background:linear-gradient(90deg,#7353c0,#e2a74d); transition:width .3s linear; }
.boss-running-total { color:var(--muted); font-size:.78rem; }
.clan-boss-result { margin-top:12px; border:1px solid rgba(103,177,121,.4); background:rgba(26,82,46,.16); border-radius:12px; padding:12px; }
.clan-boss-attack-form { text-align:center; margin-top:14px; }
.boss-attack-button { min-width:240px; }
.clan-reward-preview { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:12px 0; }
.clan-reward-preview span { border:1px solid rgba(255,255,255,.08); border-radius:10px; padding:10px; text-align:center; background:rgba(0,0,0,.15); }

.clan-rank-overview-grid,.rank-permission-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:13px; margin-top:15px; }
.clan-rank-overview-card,.rank-permission-card { border:1px solid rgba(255,255,255,.08); background:rgba(11,13,18,.45); border-radius:13px; padding:13px; }
.clan-rank-overview-card > div:first-child,.rank-permission-head,.rank-permission-head > div { display:flex; align-items:center; gap:9px; justify-content:space-between; }
.clan-rank-overview-card h3 { flex:1; margin:0; }
.rank-order-number { width:28px; height:28px; border-radius:50%; display:inline-grid; place-items:center; background:rgba(204,156,77,.15); border:1px solid rgba(204,156,77,.36); color:#e7c384; font-weight:800; }
.rank-permission-preview { display:flex; flex-wrap:wrap; gap:5px; margin-top:10px; }
.rank-permission-preview span { font-size:.65rem; border-radius:999px; padding:3px 6px; background:rgba(255,255,255,.055); color:var(--muted); }
.permission-checkbox-grid { display:grid; grid-template-columns:1fr 1fr; gap:5px 10px; margin:12px 0; }
.permission-checkbox-grid .check-line { font-size:.76rem; }
.clan-member-management-list { display:grid; gap:8px; }
.clan-member-management-row { display:flex; flex-wrap:wrap; align-items:center; gap:8px; justify-content:space-between; border-bottom:1px solid rgba(255,255,255,.065); padding:9px 0; }
.clan-member-management-row > div { min-width:130px; }
.clan-member-management-row small { display:block; color:var(--muted); }

.warfare-preview-hero { display:flex; align-items:center; justify-content:space-between; gap:20px; background:linear-gradient(120deg,rgba(62,39,84,.48),rgba(21,23,31,.75)); }
.warfare-preview-lock { font-size:4rem; opacity:.72; }
.admin-activation-panel { border-color:rgba(202,151,72,.45); }

@media (max-width:1100px) {
  .clan-stat-grid { grid-template-columns:repeat(3,1fr); }
  .clan-total-bonus-grid { grid-template-columns:repeat(2,1fr); min-width:0; }
}
@media (max-width:860px) {
  .clan-hero,.clan-overview-grid,.clan-bank-layout { grid-template-columns:1fr; }
  .clan-stat-grid { grid-template-columns:repeat(2,1fr); }
  .clan-bonus-summary { align-items:stretch; flex-direction:column; }
  .clan-bank-action-form { grid-template-columns:1fr; }
  .clan-boss-arena { min-height:245px; grid-template-columns:1fr .75fr 1fr; padding:14px 8px; }
  .fighter-avatar { width:72px; height:92px; font-size:1.7rem; }
  .enemy-fighter img { max-height:160px; }
  .boss-hit-float { font-size:1.1rem; }
}
@media (max-width:600px) {
  .clan-stat-grid,.clan-total-bonus-grid { grid-template-columns:1fr 1fr; }
  .clan-member-card { grid-template-columns:42px minmax(0,1fr); }
  .clan-contribution { grid-column:1/-1; text-align:left; display:flex; justify-content:space-between; }
  .permission-checkbox-grid { grid-template-columns:1fr; }
  .clan-boss-stage-head { align-items:flex-start; flex-direction:column; }
  .clan-boss-arena { grid-template-columns:1fr 78px 1fr; min-height:220px; }
  .enemy-fighter img { max-height:125px; }
  .fighter-avatar { width:58px; height:76px; }
  .boss-attack-timer { font-size:1.2rem; }
  .clan-reward-preview { grid-template-columns:1fr; }
  .warfare-preview-hero { align-items:flex-start; }
}


/* Phase 14.20 - Clan Boss tiers, round leaderboard and custom ranks */
.boss-cooldown-banner { display:flex; flex-direction:column; gap:4px; margin-top:14px; padding:13px 15px; border:1px solid rgba(111,151,210,.35); border-radius:12px; background:rgba(35,62,104,.17); }
.boss-cooldown-banner span { color:var(--muted); font-size:.82rem; }
.clan-reward-preview.detailed { grid-template-columns:repeat(2,1fr); }
.clan-reward-preview.detailed span { display:flex; flex-direction:column; gap:5px; }
.clan-reward-preview.detailed small { color:var(--muted); }
.clan-reward-preview.detailed strong { color:#efd39d; font-size:1rem; }
.boss-tier-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px; margin-top:15px; }
.boss-tier-card { display:grid; gap:10px; padding:13px; border:1px solid rgba(255,255,255,.08); border-radius:13px; background:rgba(11,13,18,.48); }
.boss-tier-card.is-selected { border-color:rgba(93,178,118,.55); box-shadow:inset 0 0 0 1px rgba(93,178,118,.12); }
.boss-tier-head,.boss-tier-head > div,.boss-tier-hp { display:flex; align-items:center; justify-content:space-between; gap:9px; }
.boss-tier-rewards { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.boss-tier-rewards span { border:1px solid rgba(255,255,255,.065); border-radius:8px; padding:6px 8px; font-size:.72rem; text-align:center; color:#d8cfbe; }
.boss-tier-card form button { width:100%; }
.boss-leaderboard { display:grid; gap:7px; margin-top:14px; }
.boss-leaderboard-row { display:grid; grid-template-columns:44px minmax(120px,1fr) 95px 115px 145px; gap:10px; align-items:center; padding:10px 12px; border:1px solid rgba(255,255,255,.07); border-radius:10px; background:rgba(8,10,14,.38); font-size:.79rem; }
.boss-leaderboard-row.is-you { border-color:rgba(207,164,91,.48); background:rgba(92,62,24,.17); }
.boss-leaderboard-row b { color:#efcf94; text-align:right; }
.leaderboard-place { color:#d6aa63; font-weight:900; }
.clan-create-rank-form { margin-top:14px; }

@media (max-width:760px) {
  .boss-leaderboard-row { grid-template-columns:38px minmax(100px,1fr) auto; }
  .boss-leaderboard-row span:nth-of-type(2),.boss-leaderboard-row span:nth-of-type(3) { display:none; }
  .boss-leaderboard-row b { text-align:right; }
}
@media (max-width:520px) {
  .clan-reward-preview.detailed { grid-template-columns:1fr; }
  .boss-tier-grid { grid-template-columns:1fr; }
}

/* Phase 14.22: branding and Grand Exchange marketplace */
.sidebar-game-brand{display:block;padding:12px 14px 4px;text-align:center}.sidebar-game-brand img{display:block;width:100%;max-width:190px;height:auto;margin:0 auto;filter:drop-shadow(0 0 8px rgba(150,255,35,.14))}
.market-page-head{align-items:flex-end}.market-wallet{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}.market-wallet span,.market-live-tag{border:1px solid rgba(186,139,65,.35);background:rgba(42,24,14,.78);padding:8px 12px;border-radius:999px;color:#f0cf87;font-size:.84rem}.section-heading-row{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:16px}.section-heading-row h2{margin:0}.market-hot-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.market-hot-item{position:relative;display:flex;align-items:center;gap:10px;min-height:82px;padding:12px;border:1px solid rgba(164,119,50,.3);background:linear-gradient(160deg,rgba(39,24,14,.94),rgba(11,10,8,.98));border-radius:10px;overflow:hidden}.market-hot-item:after{content:"";position:absolute;inset:auto 0 0;height:2px;background:linear-gradient(90deg,transparent,#8fee2d,transparent);opacity:.55}.market-rank{position:absolute;top:6px;right:8px;color:#9def3a;font-weight:700;font-size:.76rem}.market-item-icon{width:46px;height:46px;object-fit:contain}.market-hot-copy{display:flex;flex-direction:column;min-width:0}.market-hot-copy strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.market-hot-copy span{color:#d8bd7b;font-size:.82rem}.market-hot-copy small{color:#8e897f;font-size:.72rem}.market-empty-state{padding:24px;text-align:center;border:1px dashed rgba(180,140,70,.28);border-radius:10px;color:#999083}.market-slot-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.market-slot{position:relative;min-height:220px;padding:16px;border:1px solid rgba(163,119,51,.35);border-radius:12px;background:radial-gradient(circle at top,rgba(74,45,20,.38),rgba(12,10,8,.98) 62%);box-shadow:inset 0 0 0 1px rgba(255,209,104,.04)}.market-slot.buy{border-color:rgba(80,147,209,.52)}.market-slot.sell{border-color:rgba(139,211,55,.48)}.market-slot.locked{display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:.52;filter:saturate(.45)}.market-slot-number{color:#b89557;text-transform:uppercase;letter-spacing:.08em;font-size:.72rem;margin-bottom:12px}.market-lock,.market-empty-slot-icon{font-size:2rem;color:#99e836;margin:auto 0 8px;text-align:center}.market-slot.empty{display:flex;flex-direction:column;text-align:center;justify-content:center}.market-slot.empty h3,.market-slot.locked h3{margin:4px 0}.market-order-head{display:flex;align-items:center;gap:12px}.market-order-icon{width:52px;height:52px;object-fit:contain}.market-order-head h3{margin:3px 0 0}.market-side-tag{display:inline-flex;padding:2px 7px;border-radius:999px;font-size:.68rem;font-weight:800;letter-spacing:.08em}.market-side-tag.buy{background:rgba(47,111,169,.2);color:#80c4ff;border:1px solid rgba(80,160,220,.35)}.market-side-tag.sell{background:rgba(103,164,39,.2);color:#a6ef59;border:1px solid rgba(135,210,58,.35)}.market-order-stats{display:flex;justify-content:space-between;gap:8px;margin:18px 0 8px;color:#c6b99d;font-size:.82rem}.market-progress{height:8px;border-radius:999px;overflow:hidden;background:#18130f;border:1px solid rgba(180,135,62,.22)}.market-progress span{display:block;height:100%;background:linear-gradient(90deg,#538d1f,#a7f23e);box-shadow:0 0 8px rgba(138,237,40,.4)}.market-create-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.market-create-card{position:relative;overflow:hidden}.market-create-card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:#497fac}.market-create-card.sell:before{background:#86cf32}.market-order-form{display:grid;gap:14px;margin-top:18px}.market-order-form label{display:grid;gap:6px;color:#c9b88f;font-size:.84rem}.market-order-form select,.market-order-form input{width:100%;min-height:42px;background:#100d0b;border:1px solid rgba(177,132,62,.38);color:#eee0c1;border-radius:7px;padding:8px 10px}.market-form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.warning-card code{color:#a9ef50}.market-hot-card,.market-exchange-card{border-color:rgba(152,112,49,.4)}
@media(max-width:1100px){.market-hot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.market-slot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.sidebar-game-brand{display:none}.market-page-head{align-items:flex-start}.market-wallet{justify-content:flex-start}.section-heading-row{align-items:flex-start;flex-direction:column}.market-hot-grid,.market-slot-grid,.market-create-grid{grid-template-columns:1fr}.market-form-row{grid-template-columns:1fr}.market-slot{min-height:190px}}
.auth-game-logo{display:block;width:min(100%,430px);height:auto;margin:-8px auto 20px;filter:drop-shadow(0 0 12px rgba(145,232,48,.12))}

/* Phase 14.23: topbar branding and guided Marketplace offer builder */
.game-topbar{
    grid-template-columns:190px minmax(210px,280px) minmax(280px,1fr) auto;
    gap:14px;
    min-height:78px;
}
.topbar-game-logo{display:flex;align-items:center;align-self:stretch;min-width:0;padding:7px 0;text-decoration:none}
.topbar-game-logo img{display:block;width:100%;max-width:182px;height:52px;object-fit:contain;object-position:left center;filter:drop-shadow(0 0 8px rgba(143,238,45,.13))}
.topbar-character{display:flex;align-items:center;gap:.7rem;min-width:0}
.topbar-character-copy{min-width:0}
.topbar-center{justify-self:center;width:100%;max-width:470px}
.sidebar-game-brand{display:none!important}
.market-item-search-wrap{display:grid;grid-template-columns:58px minmax(0,1fr);gap:10px;align-items:stretch}
.market-item-preview{position:relative;display:grid;place-items:center;width:58px;height:58px;border:1px solid rgba(170,126,59,.48);border-radius:9px;background:radial-gradient(circle,rgba(83,54,22,.5),rgba(12,10,8,.98));overflow:hidden}
.market-item-preview img{width:44px;height:44px;object-fit:contain}
.market-item-preview span{position:absolute;color:#8e8066;font-size:1.25rem;font-weight:800}
.market-item-preview.has-item span{display:none}
.market-search-field{position:relative;min-width:0}
.market-search-field>input{height:58px!important}
.market-suggestions{position:absolute;z-index:80;left:0;right:0;top:calc(100% + 4px);max-height:280px;overflow-y:auto;border:1px solid rgba(182,137,68,.55);border-radius:9px;background:#100c09;box-shadow:0 16px 32px rgba(0,0,0,.55)}
.market-suggestion{display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:9px;width:100%;padding:9px 10px;border:0;border-bottom:1px solid rgba(255,255,255,.05);background:transparent;color:#ead9b7;text-align:left;cursor:pointer}
.market-suggestion:last-child{border-bottom:0}.market-suggestion:hover,.market-suggestion.active{background:rgba(132,203,50,.12)}
.market-suggestion img{width:34px;height:34px;object-fit:contain}.market-suggestion-copy{display:flex;flex-direction:column;min-width:0}.market-suggestion-copy strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.market-suggestion-copy small{color:#918773}.market-suggestion-price{color:#b7ef72;font-size:.82rem;white-space:nowrap}
.market-no-suggestions{padding:14px;color:#8e8578;text-align:center}
.market-selected-info{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;padding:10px 12px;border:1px solid rgba(139,211,55,.25);border-radius:8px;background:rgba(83,126,35,.08);color:#cfc1a5;font-size:.82rem}.market-selected-info strong{color:#f0dfbd;margin-right:auto}.market-selected-info b{color:#b6ed76}
.market-price-control{display:grid;grid-template-columns:auto minmax(90px,1fr) auto;align-items:stretch}.market-price-control input{border-radius:0!important;text-align:center}.market-price-step{min-width:54px;border:1px solid rgba(177,132,62,.38);background:linear-gradient(#2a1b10,#17100b);color:#e2c88e;font-weight:800;cursor:pointer}.market-price-step:first-child{border-radius:7px 0 0 7px}.market-price-step:last-child{border-radius:0 7px 7px 0}.market-price-step:hover{color:#b9f36e;border-color:rgba(145,222,58,.48)}
.market-offer-total{display:flex;justify-content:flex-end;color:#a99d87;font-size:.85rem}.market-offer-total strong{color:#e9cd91;margin-left:5px}
@media(max-width:1180px){.game-topbar{grid-template-columns:150px minmax(170px,230px) minmax(250px,1fr) auto}.topbar-game-logo img{max-width:145px}}
@media(max-width:800px){
 .game-topbar{grid-template-columns:86px minmax(0,.8fr) minmax(145px,1.2fr) auto;grid-template-rows:auto auto;gap:.35rem .45rem;padding:calc(.42rem + env(safe-area-inset-top)) .6rem .42rem}
 .topbar-game-logo{grid-column:1;grid-row:1;padding:0}.topbar-game-logo img{width:82px;height:38px;object-fit:cover;object-position:left center}
 .topbar-character{grid-column:2;grid-row:1;gap:.42rem}.topbar-character .avatar-medallion{width:32px;height:32px;flex:0 0 32px}.topbar-character .welcome-line{font-size:.8rem}.topbar-character .subtle-line{display:none}
 .topbar-center{grid-column:3;grid-row:1;padding:0!important;max-width:none}
 .topbar-right{display:contents}.topbar-right .top-task-actions{grid-column:4;grid-row:1}.topbar-right .resource-bar{grid-column:1/-1;grid-row:2}
}
@media(max-width:560px){
 .game-topbar{grid-template-columns:70px minmax(0,.72fr) minmax(125px,1.28fr) auto;padding-left:.4rem;padding-right:.4rem}
 .topbar-game-logo img{width:67px;height:34px}.topbar-character .avatar-medallion{display:none}.topbar-character .welcome-line{font-size:.72rem}.top-task-name{font-size:.76rem}.tick-counter{font-size:.67rem}.top-task-remaining{font-size:.65rem}
 .market-item-search-wrap{grid-template-columns:50px minmax(0,1fr)}.market-item-preview{width:50px;height:54px}.market-search-field>input{height:54px!important}.market-form-row{grid-template-columns:1fr}.market-price-step{min-width:58px}
}


/* Phase 14.25: topbar/logo background blend */
.topbar-game-logo{
    position:relative;
    margin-left:-.15rem;
}
.topbar-game-logo img{
    filter:drop-shadow(0 0 10px rgba(143,238,45,.12));
}
@media (min-width: 801px){
    .game-topbar{
        min-height:86px;
    }
    .topbar-game-logo img{
        max-width:216px;
        height:58px;
    }
}
@media (max-width:800px){
    .game-topbar{
        background-image:
            radial-gradient(circle at 18% 28%, rgba(148, 236, 58, .08) 0, rgba(148, 236, 58, 0) 18%),
            radial-gradient(circle at 74% 62%, rgba(191, 134, 60, .16) 0, rgba(191, 134, 60, 0) 24%),
            repeating-linear-gradient(90deg, rgba(108, 62, 29, .14) 0 13px, rgba(59, 31, 15, .03) 13px 26px),
            linear-gradient(180deg, rgba(82, 45, 22, .99), rgba(58, 29, 14, .99));
    }
    .topbar-game-logo img{
        object-fit:contain;
        object-position:left center;
    }
}

/* Phase 14.26: emblem logo refinement and advanced marketplace panels */
.game-topbar{grid-template-columns:84px minmax(190px,240px) minmax(280px,1fr) auto}
.topbar-game-logo{justify-content:flex-start;padding:0}
.topbar-game-logo img{width:64px!important;max-width:64px!important;height:64px!important;object-fit:contain;object-position:center center;filter:drop-shadow(0 0 12px rgba(143,238,45,.22))}
.auth-game-logo{width:min(100%,180px)}
.market-overview-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.market-summary-card h2{margin:.15rem 0 .4rem}.market-inline-form{display:flex;flex-wrap:wrap;gap:10px}.spacing-top-sm{margin-top:12px}.market-banner.success{padding:10px 12px;border-radius:9px;border:1px solid rgba(139,211,55,.35);background:rgba(86,131,35,.12);color:#bbed79}.market-trend-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}.market-trend-item{padding:12px;border:1px solid rgba(169,126,57,.28);border-radius:10px;background:linear-gradient(180deg,rgba(46,29,18,.85),rgba(17,12,9,.95))}.market-trend-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}.market-trend-head strong{display:block}.market-trend-head small{color:#9d917c}.market-mini-chart{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));align-items:end;gap:6px;height:92px}.market-mini-chart.interactive{height:104px;padding:10px 10px 8px;border:1px solid rgba(157,118,58,.24);border-radius:9px;background:rgba(0,0,0,.12)}.market-mini-bar{display:block;width:100%;border-radius:6px 6px 3px 3px;background:linear-gradient(180deg,#b8ff69,#5aa81e);box-shadow:0 0 10px rgba(148,238,66,.18)}.market-mini-stack{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:5px}.market-mini-stack small{font-size:.65rem;color:#8a816f}.market-selected-history{display:grid;gap:8px}.market-history-heading{font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:#b89d68}.market-history-card{border-color:rgba(152,112,49,.4)}.market-history-list{display:grid;gap:10px}.market-history-row{display:grid;grid-template-columns:minmax(0,1.4fr) auto auto;gap:14px;align-items:center;padding:12px;border:1px solid rgba(173,129,57,.24);border-radius:10px;background:linear-gradient(160deg,rgba(33,22,14,.92),rgba(11,9,8,.97))}.market-history-row.completed{border-color:rgba(95,177,55,.28)}.market-history-row.cancelled{border-color:rgba(202,88,68,.24)}.market-history-item{display:flex;align-items:center;gap:12px;min-width:0}.market-history-item strong{display:block}.market-history-item small{color:#978e7e}.market-history-meta{display:grid;gap:3px;text-align:right;color:#d5c3a1;font-size:.82rem}.market-history-date{color:#8f8473;font-size:.78rem;white-space:nowrap}.market-selected-info{align-items:flex-start}.market-selected-info strong{min-width:150px}.market-create-card.sell .market-selected-info{border-color:rgba(139,211,55,.25)}
@media(max-width:1180px){.game-topbar{grid-template-columns:78px minmax(170px,220px) minmax(220px,1fr) auto}.market-trend-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.market-overview-grid{grid-template-columns:1fr}}
@media(max-width:800px){.game-topbar{grid-template-columns:58px minmax(0,.9fr) minmax(145px,1.1fr) auto}.topbar-game-logo img{width:44px!important;max-width:44px!important;height:44px!important}.market-trend-grid{grid-template-columns:1fr 1fr}.market-history-row{grid-template-columns:1fr;gap:8px}.market-history-meta,.market-history-date{text-align:left}}
@media(max-width:560px){.game-topbar{grid-template-columns:50px minmax(0,.8fr) minmax(125px,1.2fr) auto}.topbar-game-logo img{width:40px!important;max-width:40px!important;height:40px!important}.market-trend-grid{grid-template-columns:1fr}.market-overview-grid{grid-template-columns:1fr}}

/* Phase 14.27: Town dashboard panels */
.town-dashboard-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.town-dashboard-panel{min-width:0}.town-panel-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}.town-panel-heading h2{margin:.1rem 0 0}.town-skill-update-list,.town-queue-list{display:grid;gap:8px}.town-skill-update{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px;border:1px solid rgba(173,128,57,.24);border-radius:9px;background:linear-gradient(160deg,rgba(46,29,18,.72),rgba(14,10,8,.92));text-decoration:none}.town-skill-update:hover{border-color:rgba(149,232,61,.4);transform:translateY(-1px)}.town-panel-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:8px;background:rgba(0,0,0,.22);font-size:1.2rem}.town-update-copy{display:flex;flex-direction:column;min-width:0}.town-update-copy strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.town-update-copy small{color:#938977}.town-level-badge{padding:4px 8px;border:1px solid rgba(148,231,61,.28);border-radius:999px;color:#b9ec7e;background:rgba(91,139,37,.1);font-size:.75rem;white-space:nowrap}.town-queue-task{display:grid;grid-template-columns:34px minmax(0,1fr);gap:10px;align-items:center;padding:11px;border:1px solid rgba(173,128,57,.22);border-radius:9px;background:rgba(18,13,10,.62)}.town-queue-task.active{border-color:rgba(147,231,62,.4);box-shadow:inset 3px 0 0 #8edc38}.town-queue-task.background{border-color:rgba(82,136,183,.35)}.town-queue-position{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#2d1d12;color:#e1bd78;font-weight:700}.town-queue-task strong,.town-queue-task small{display:block}.town-queue-task small{margin-top:3px;color:#968b78}.town-empty-panel{display:grid;place-items:center;text-align:center;min-height:210px;padding:24px;border:1px dashed rgba(171,130,64,.26);border-radius:10px}.town-empty-panel>span{font-size:2.2rem}.town-empty-panel p{margin:.5rem 0}.town-clan-summary{display:flex;align-items:center;gap:12px}.town-clan-emblem{display:grid;place-items:center;width:58px;height:58px;border:1px solid rgba(153,231,67,.42);border-radius:12px;background:radial-gradient(circle,rgba(130,227,48,.22),rgba(19,14,10,.96));color:#c8ff8c;font-size:1.65rem;font-weight:800;box-shadow:0 0 18px rgba(122,217,42,.1)}.town-clan-summary h3{margin:0}.town-clan-summary p{margin:.2rem 0 0;color:#978b78}.town-clan-stat-row{display:flex;justify-content:space-between;gap:10px;margin:18px 0 8px;color:#bbae94;font-size:.82rem}.town-clan-progress{height:9px;border:1px solid rgba(166,125,60,.26);border-radius:999px;background:#17110d;overflow:hidden}.town-clan-progress span{display:block;height:100%;background:linear-gradient(90deg,#4f8d20,#a7ed49);box-shadow:0 0 9px rgba(141,232,52,.28)}.town-clan-progress-copy{margin-top:6px;text-align:right;color:#8f8574;font-size:.75rem}.town-clan-motd{margin-top:16px;padding:11px;border-left:3px solid #7dcc34;background:rgba(77,116,36,.08);border-radius:4px 8px 8px 4px}.town-clan-motd span{color:#a9dd72;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em}.town-clan-motd p{margin:.35rem 0 0}.warning-card code{word-break:break-word}
@media(max-width:1100px){.town-dashboard-grid{grid-template-columns:1fr 1fr}.town-clan-panel{grid-column:1/-1}}
@media(max-width:700px){.town-dashboard-grid{grid-template-columns:1fr}.town-clan-panel{grid-column:auto}.town-primary-grid{grid-template-columns:1fr}.town-panel-heading{align-items:center}}

/* Phase 14.28: stable Town dashboard cards on all viewport sizes */
.town-dashboard-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    align-items:start;
    width:100%;
    max-width:100%;
    gap:16px;
}
.town-dashboard-panel{
    min-width:0;
    width:100%;
    max-width:100%;
    overflow:hidden;
    align-self:start;
}
.town-panel-heading{
    display:flex;
    flex-wrap:wrap;
    align-items:flex-start;
    justify-content:space-between;
    gap:10px;
}
.town-panel-heading>div{min-width:0;flex:1 1 180px}
.town-panel-heading h2,.town-update-copy strong,.town-queue-task strong,.town-queue-task small,.town-clan-summary h3,.town-clan-summary p{
    overflow-wrap:anywhere;
    word-break:normal;
}
.town-skill-update-list,.town-queue-list{min-width:0;width:100%}
.town-skill-update{width:100%;max-width:100%;min-width:0}
.town-queue-task{width:100%;max-width:100%;min-width:0;grid-template-columns:34px minmax(0,1fr)}
.town-queue-task>div{min-width:0}
.town-clan-summary{min-width:0;align-items:flex-start}
.town-clan-summary>div:last-child{min-width:0;flex:1}
.town-clan-stat-row{flex-wrap:wrap;align-items:center}
.town-clan-motd p{overflow-wrap:anywhere}
.clan-error-detail{white-space:pre-wrap;overflow-wrap:anywhere;padding:12px;border:1px solid rgba(186,139,65,.3);border-radius:8px;background:#130d09;color:#e4cda4}
@media(max-width:1180px){
    .town-dashboard-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .town-clan-panel{grid-column:1/-1}
}
@media(max-width:760px){
    .town-dashboard-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
    .town-dashboard-panel,.town-clan-panel{grid-column:1!important}
    .town-panel-heading{align-items:center}
    .town-panel-heading .btn{flex:0 0 auto}
    .town-skill-update{grid-template-columns:36px minmax(0,1fr) auto;padding:9px 8px;gap:8px}
    .town-panel-icon{width:34px;height:34px}
    .town-level-badge{font-size:.7rem;padding:3px 7px}
    .town-empty-panel{min-height:150px;padding:18px 12px}
}
@media(max-width:420px){
    .town-panel-heading{display:grid;grid-template-columns:minmax(0,1fr) auto;width:100%}
    .town-panel-heading>div{min-width:0}
    .town-panel-heading h2{font-size:1.05rem}
    .town-skill-update{grid-template-columns:32px minmax(0,1fr)}
    .town-level-badge{grid-column:2;justify-self:start}
    .town-clan-stat-row{display:grid;grid-template-columns:1fr;gap:5px}
}

/* Phase 14.33: Crafting quality and backpack slot */
.quality-tags{display:flex;flex-wrap:wrap;gap:7px;margin:.65rem 0}.quality{display:inline-flex;padding:4px 9px;border-radius:999px;border:1px solid rgba(255,255,255,.14);font-size:.72rem;font-weight:800}.quality.normal{color:#d2c3a6;background:rgba(130,110,80,.12)}.quality.fine{color:#83d7ff;background:rgba(60,145,195,.14)}.quality.superior{color:#d49aff;background:rgba(139,69,190,.15)}.quality.masterwork{color:#ffe079;background:rgba(210,154,34,.16);box-shadow:0 0 10px rgba(255,205,70,.12)}.quality-roll-label{color:#b8f06e;font-size:.72rem}.gear-slot-backpack{border-color:rgba(142,235,62,.42)!important;background:radial-gradient(circle,rgba(86,128,34,.18),rgba(13,10,8,.96))!important}

/* Phase 14.34: Brewing */
.brew-active-list{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}.brew-effect-pill{display:inline-flex;flex-direction:column;padding:7px 9px;border:1px solid rgba(133,221,62,.3);border-radius:8px;background:rgba(78,120,32,.11);color:#c7f092;font-size:.74rem}.brew-inventory-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.brew-item-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:14px;border:1px solid rgba(159,119,59,.3);border-radius:10px;background:linear-gradient(150deg,rgba(43,27,17,.92),rgba(12,10,8,.98))}.brew-item-card h3{margin:0 0 4px}.brew-item-card p{margin:0 0 5px;color:#a99d89;font-size:.8rem}.brew-effect-summary{margin:10px 0;padding:10px 12px;border-left:3px solid #8ee83a;background:rgba(91,137,35,.1);color:#c7ef98;border-radius:0 8px 8px 0}@media(max-width:700px){.brew-inventory-grid{grid-template-columns:1fr}.brew-item-card{grid-template-columns:auto minmax(0,1fr)}.brew-item-card form{grid-column:1/-1}.brew-item-card form .btn{width:100%}}

/* Phase 14.36: Alchemy */
.alchemy-doctrine{display:grid;gap:8px}.alchemy-doctrine span{display:block;padding:8px 10px;border:1px solid rgba(139,211,55,.2);border-radius:8px;background:rgba(77,112,35,.07);color:#cbbd9f}.compact-node-card>.market-order-icon{width:42px;height:42px;margin:0 auto 4px}.compact-node-card{align-content:start}

/* Phase 14.37: Archaeology and Construction house system */
.house-built-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.house-built-card{display:grid;gap:5px;padding:14px;border:1px solid rgba(142,214,55,.28);border-radius:10px;background:linear-gradient(160deg,rgba(58,43,24,.9),rgba(13,10,8,.98))}.house-built-card>span{color:#d5b879;font-size:.82rem}.house-built-card>small{color:#aee96b}.house-project-icon{display:grid;place-items:center;width:44px;height:44px;margin:0 auto 5px;border:1px solid rgba(181,138,67,.4);border-radius:50%;background:radial-gradient(circle,rgba(128,90,42,.42),rgba(17,12,9,.96));font-size:1.45rem;color:#b8f06c}.compact-node-card.completed{border-color:rgba(135,213,59,.52);box-shadow:inset 0 0 0 1px rgba(135,213,59,.08)}
@media(max-width:900px){.house-built-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:600px){.house-built-grid{grid-template-columns:1fr}}
/* Phase 14.39: independent Hunting method networks */
.hunting-upgrade-card{min-width:260px}.hunting-method-slots{margin:1rem 0 1.5rem}.hunting-method-slots .locked{opacity:.55}.smithing-panel:not(.active){display:none}

/* Phase 14.40 - Combat foundation */
.combat-page-head{padding-bottom:10px}.combat-overview-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.combat-health-card .progress{margin-top:10px}.danger-progress span{background:linear-gradient(90deg,#8b1f31,#e35367)}.combat-status-pill{display:inline-flex;align-items:center;gap:6px;margin:12px 0 0;padding:6px 10px;border-radius:999px;font-size:.78rem;font-weight:800}.combat-status-pill.success{background:rgba(69,181,111,.13);color:#78d99b}.combat-status-pill.warning{background:rgba(221,163,68,.14);color:#f0c06c}.combat-status-pill.danger{background:rgba(210,70,89,.15);color:#ff8fa0}.combat-active-section{border-color:rgba(90,220,140,.22)}.combat-area-tabs{margin:18px 0}.combat-area-intro{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:16px}.combat-level-chip{flex:0 0 auto;border:1px solid rgba(106,232,154,.22);background:rgba(60,168,107,.12);border-radius:999px;padding:5px 9px;font-size:.72rem;font-weight:800;color:#9be8b8}.combat-monster-grid{align-items:start}.combat-monster-card{position:relative;overflow:hidden}.combat-monster-card.elite{border-color:rgba(223,181,79,.38);box-shadow:0 12px 36px rgba(93,68,18,.18)}.combat-monster-card.locked{opacity:.64}.combat-monster-header{display:grid;grid-template-columns:60px 1fr auto;gap:12px;align-items:start}.combat-monster-icon{width:58px;height:58px;border-radius:16px;border:1px solid rgba(110,229,155,.18);background:radial-gradient(circle at 40% 35%,rgba(96,235,151,.15),rgba(8,15,12,.86));display:grid;place-items:center;overflow:hidden}.combat-monster-icon img{width:52px;height:52px;object-fit:contain}.combat-stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:14px 0}.combat-stat-grid span{display:flex;flex-direction:column;gap:2px;padding:8px;border-radius:9px;background:rgba(255,255,255,.025);font-size:.7rem;color:var(--muted)}.combat-stat-grid b{font-size:.84rem;color:var(--text)}.combat-mastery-row{display:flex;justify-content:space-between;gap:12px;padding:8px 10px;border-radius:9px;background:rgba(91,205,137,.08);font-size:.75rem;font-weight:800}.combat-drop-list{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}.combat-drop-list strong{width:100%;font-size:.76rem}.combat-drop-list span{border:1px solid rgba(255,255,255,.07);border-radius:999px;padding:4px 7px;font-size:.66rem;color:var(--muted)}.combat-start-form{display:grid;gap:9px;margin-top:12px}.combat-start-form label{display:grid;gap:5px;font-size:.72rem;font-weight:700;color:var(--muted)}.combat-start-form select{width:100%}.combat-form-row{display:grid;grid-template-columns:1fr 1fr;gap:9px}.combat-start-form .check-row{display:flex;align-items:center;gap:8px;font-weight:600}.combat-start-form .check-row input{width:auto}.combat-mastery-milestones{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.combat-mastery-milestones div{padding:12px 8px;border-radius:10px;background:rgba(255,255,255,.025);text-align:center}.combat-mastery-milestones b{display:block;color:#83e2a8;font-size:1.1rem}.combat-mastery-milestones span{font-size:.68rem;color:var(--muted)}.combat-log-list{display:grid;gap:8px;max-height:320px;overflow:auto}.combat-log-list>div{display:grid;grid-template-columns:74px 1fr;gap:10px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.06)}.combat-log-list span{font-size:.66rem;color:var(--muted)}.combat-log-list p{margin:0;font-size:.76rem}.combat-roadmap-card{background:linear-gradient(135deg,rgba(50,147,92,.08),rgba(14,20,17,.93))}.queue-cap-pill{border:1px solid rgba(255,255,255,.08);padding:7px 10px;border-radius:999px;font-size:.72rem;color:var(--muted)}
@media(max-width:1180px){.combat-overview-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.combat-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.combat-overview-grid{grid-template-columns:1fr}.combat-monster-header{grid-template-columns:52px 1fr}.combat-monster-header>.combat-level-chip{grid-column:1/-1;justify-self:start}.combat-form-row{grid-template-columns:1fr}.combat-mastery-milestones{grid-template-columns:repeat(2,minmax(0,1fr))}.combat-area-intro{flex-direction:column}.combat-log-list>div{grid-template-columns:1fr}.combat-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Phase 14.43 bosses */
.boss-builder-grid{align-items:start}.boss-preset-list,.boss-rule-list{display:grid;gap:8px;margin-top:14px}.boss-preset-list article,.boss-rule-list article{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:rgba(8,10,14,.38)}.boss-preset-list article div,.boss-rule-list article div{display:grid;gap:3px}.boss-preset-list span,.boss-rule-list span{font-size:.76rem;color:var(--muted)}.boss-monster-card{border-color:rgba(180,84,84,.35);background:radial-gradient(circle at 80% 0,rgba(122,37,37,.15),transparent 38%),var(--card-bg)}.boss-card-grid{align-items:start}@media(max-width:800px){.boss-builder-grid{grid-template-columns:1fr}.boss-preset-list article,.boss-rule-list article{align-items:flex-start}}


/* Phase 14.47 - equipment-matched pseudo-3D character panel */
:root { --character-panel-w: 338px; }
.game-layout { grid-template-columns: var(--sidebar-w) minmax(0,1fr) var(--character-panel-w); }
.character-visual-panel {
    min-width:0; height:calc(100vh - 76px); position:sticky; top:76px; overflow-y:auto; overflow-x:hidden;
    padding:10px; border-left:1px solid rgba(198,143,72,.42); color:#d8c29b;
    background:radial-gradient(circle at 50% 20%,rgba(88,147,35,.10),transparent 29%),linear-gradient(180deg,#0d0e0c,#070806 72%);
    box-shadow:inset 10px 0 28px rgba(0,0,0,.4); scrollbar-width:thin;
}
.character-panel-heading {height:34px;display:flex;align-items:center;justify-content:space-between;padding:0 10px;border:1px solid rgba(198,143,72,.3);background:linear-gradient(180deg,#1c1b17,#0d0e0c);text-transform:uppercase;letter-spacing:.13em;color:#e3c78f;font-size:.85rem}
.character-panel-heading a{font-size:.65rem;color:#91bf51;letter-spacing:.04em;text-transform:none}
.character-stage-wrap{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr) 48px;gap:6px;align-items:center;min-height:325px;padding:10px 0;perspective:900px}
.character-slots-column{display:grid;gap:8px;z-index:4}.character-side-slot{height:47px;border:1px solid rgba(198,143,72,.4);background:linear-gradient(145deg,#151611,#080907);box-shadow:inset 0 0 12px #000,0 0 0 1px rgba(0,0,0,.8);display:grid;place-items:center;position:relative}.character-side-slot.filled{border-color:rgba(142,205,64,.47);box-shadow:inset 0 0 10px rgba(100,160,42,.1),0 0 8px rgba(86,150,39,.08)}.character-slot-img{width:37px;height:37px;object-fit:contain;filter:drop-shadow(0 2px 3px #000)}.character-slot-rune{color:#7c6849;font-size:.75rem}
.character-model-stage{height:315px;position:relative;display:flex;align-items:center;justify-content:center;transform-style:preserve-3d;transition:transform .18s ease-out}.character-aura{position:absolute;bottom:35px;width:178px;height:42px;border:2px solid var(--avatar-glow,#83bb3e);border-radius:50%;opacity:.45;filter:blur(2px);box-shadow:0 0 18px var(--avatar-glow,#83bb3e),inset 0 0 18px var(--avatar-glow,#83bb3e);animation:characterAura 3.4s ease-in-out infinite}.character-platform{position:absolute;bottom:26px;width:190px;height:46px;border-radius:50%;border:2px solid #55442c;background:radial-gradient(ellipse,#26251d 0,#11120e 55%,#030403 72%);box-shadow:0 10px 18px #000,inset 0 0 0 5px rgba(168,122,55,.12),0 0 24px rgba(112,174,47,.12)}
.character-model{position:absolute;width:155px;height:254px;bottom:42px;transform-style:preserve-3d;filter:drop-shadow(0 13px 8px rgba(0,0,0,.8));animation:characterIdle 4.2s ease-in-out infinite;--metal:#8a908c;--metal2:#3a403d;--accent:#93c644;--avatar-glow:#82c33b}.character-visual-panel[data-tier=bronze]{--avatar-metal:#a56a37;--avatar-metal2:#4d2f1d;--avatar-accent:#d29a48;--avatar-glow:#bd7434}.character-visual-panel[data-tier=iron]{--avatar-metal:#929898;--avatar-metal2:#363b3b;--avatar-accent:#9abf68;--avatar-glow:#75a546}.character-visual-panel[data-tier=steel]{--avatar-metal:#c4c9c9;--avatar-metal2:#4d5556;--avatar-accent:#a7d95e;--avatar-glow:#86c842}.character-visual-panel[data-tier=gold]{--avatar-metal:#d6aa42;--avatar-metal2:#6d4d17;--avatar-accent:#f0cf60;--avatar-glow:#e0a938}.character-visual-panel[data-tier=mithril]{--avatar-metal:#68b9b0;--avatar-metal2:#245751;--avatar-accent:#79e2ca;--avatar-glow:#42c8b1}.character-visual-panel[data-tier=adamantite]{--avatar-metal:#5b9d56;--avatar-metal2:#203f25;--avatar-accent:#a0df53;--avatar-glow:#72c441}.character-visual-panel[data-tier=runite]{--avatar-metal:#4b9bb9;--avatar-metal2:#173d50;--avatar-accent:#78e3df;--avatar-glow:#48c9d1}.character-visual-panel[data-tier=ancient]{--avatar-metal:#8a62a9;--avatar-metal2:#31203f;--avatar-accent:#c07df0;--avatar-glow:#a45fe2}.character-visual-panel[data-tier=leather]{--avatar-metal:#8b5a35;--avatar-metal2:#3a2418;--avatar-accent:#b9844c;--avatar-glow:#8b6b3c}.character-model{--metal:var(--avatar-metal,#929898);--metal2:var(--avatar-metal2,#363b3b);--accent:var(--avatar-accent,#9ac84a)}.character-visual-panel[data-quality=fine] .character-model{filter:drop-shadow(0 0 5px var(--avatar-glow)) drop-shadow(0 13px 8px #000)}.character-visual-panel[data-quality=superior] .character-model{filter:drop-shadow(0 0 9px var(--avatar-glow)) drop-shadow(0 13px 8px #000)}.character-visual-panel[data-quality=masterwork] .character-model{filter:drop-shadow(0 0 14px var(--avatar-glow)) drop-shadow(0 13px 8px #000)}
.model-torso{position:absolute;left:45px;top:74px;width:67px;height:82px;clip-path:polygon(17% 0,83% 0,100% 30%,82% 100%,18% 100%,0 30%);background:linear-gradient(105deg,var(--metal2),var(--metal) 45%,#171a17 49%,var(--metal2));border:2px solid var(--accent);box-shadow:inset 0 0 13px #000}.model-torso:after{content:"";position:absolute;inset:12px 19px;background:linear-gradient(180deg,var(--accent),transparent);clip-path:polygon(50% 0,100% 30%,65% 100%,35% 100%,0 30%);opacity:.65}.model-belt{position:absolute;left:43px;top:149px;width:71px;height:12px;background:#241a10;border:2px solid #b48b43;z-index:3}.model-head{position:absolute;left:61px;top:34px;width:34px;height:43px;background:linear-gradient(100deg,var(--metal2),var(--metal),var(--metal2));border:2px solid var(--accent);clip-path:polygon(15% 0,85% 0,100% 22%,82% 100%,18% 100%,0 22%)}.model-helm{position:absolute;left:55px;top:18px;width:46px;height:45px;background:linear-gradient(105deg,var(--metal2),var(--metal),#181b18);clip-path:polygon(12% 32%,0 0,34% 22%,50% 0,66% 22%,100% 0,88% 32%,85% 100%,15% 100%);border-bottom:3px solid var(--accent);z-index:3}.model-helm:after{content:"";position:absolute;left:9px;right:9px;top:25px;height:4px;background:var(--accent);box-shadow:0 0 8px var(--avatar-glow)}.model-shoulder{position:absolute;top:75px;width:41px;height:33px;background:linear-gradient(135deg,var(--metal),var(--metal2));border:2px solid var(--accent);z-index:4}.model-shoulder.left{left:24px;clip-path:polygon(0 35%,70% 0,100% 35%,80% 100%,18% 75%)}.model-shoulder.right{right:22px;clip-path:polygon(30% 0,100% 35%,82% 75%,20% 100%,0 35%)}.model-arm{position:absolute;top:96px;width:22px;height:82px;background:linear-gradient(90deg,var(--metal2),var(--metal),var(--metal2));border:1px solid var(--accent);z-index:2}.model-arm.left{left:29px;transform:rotate(8deg)}.model-arm.right{right:28px;transform:rotate(-8deg)}.model-leg{position:absolute;top:155px;width:31px;height:73px;background:linear-gradient(90deg,var(--metal2),var(--metal),var(--metal2));border:1px solid var(--accent)}.model-leg.left{left:45px;transform:rotate(2deg)}.model-leg.right{right:43px;transform:rotate(-2deg)}.model-boot{position:absolute;top:218px;width:39px;height:27px;background:linear-gradient(100deg,#10120f,var(--metal2));border:2px solid var(--metal);z-index:3}.model-boot.left{left:37px;transform:skewX(-12deg)}.model-boot.right{right:35px;transform:skewX(12deg)}.model-cape{position:absolute;left:34px;top:69px;width:90px;height:161px;background:linear-gradient(105deg,#07100a,#17351a 48%,#07100a);clip-path:polygon(10% 0,90% 0,100% 100%,70% 87%,50% 100%,28% 88%,0 100%);border-top:3px solid var(--accent);opacity:.88;transform:translateZ(-10px);animation:capeWave 3s ease-in-out infinite}.character-visual-panel .character-side-slot.empty + *{}
.model-weapon{position:absolute;left:7px;top:92px;width:12px;height:150px;background:linear-gradient(90deg,#30220f,#e7cf85,#30220f);border-radius:4px;transform:rotate(24deg);transform-origin:center;z-index:6;box-shadow:0 0 9px var(--avatar-glow)}.model-weapon:before{content:"";position:absolute;left:-9px;top:-62px;width:29px;height:80px;background:linear-gradient(90deg,transparent,var(--accent),#eaffc9,var(--accent),transparent);clip-path:polygon(45% 0,75% 30%,58% 100%,38% 100%,22% 30%);filter:drop-shadow(0 0 6px var(--avatar-glow))}.character-visual-panel[data-weapon=unarmed] .model-weapon{display:none}.character-visual-panel[data-weapon=staff] .model-weapon{height:190px;top:56px;left:9px;transform:rotate(6deg)}.character-visual-panel[data-weapon=staff] .model-weapon:before{top:-18px;left:-12px;width:36px;height:36px;border-radius:50%;clip-path:none;background:radial-gradient(circle,#fff,var(--accent) 28%,transparent 67%)}.character-visual-panel[data-weapon=bow] .model-weapon,.character-visual-panel[data-weapon=crossbow] .model-weapon{width:62px;height:95px;top:104px;left:4px;background:transparent;border:4px solid var(--accent);border-left:0;border-radius:0 80% 80% 0;box-shadow:none}.character-visual-panel[data-weapon=bow] .model-weapon:before,.character-visual-panel[data-weapon=crossbow] .model-weapon:before{display:none}.character-visual-panel[data-weapon=hammer] .model-weapon:before,.character-visual-panel[data-weapon=axe] .model-weapon:before{top:-26px;left:-18px;width:48px;height:32px;clip-path:polygon(0 15%,100% 0,88% 100%,10% 86%);background:linear-gradient(90deg,var(--metal),var(--accent))}.model-offhand{position:absolute;right:-1px;top:101px;width:49px;height:77px;background:linear-gradient(135deg,var(--metal),var(--metal2));border:3px solid var(--accent);clip-path:polygon(50% 0,100% 20%,88% 75%,50% 100%,12% 75%,0 20%);z-index:7;box-shadow:0 0 8px var(--avatar-glow)}.character-visual-panel[data-offhand=none] .model-offhand{display:none}.character-visual-panel[data-offhand=spellbook] .model-offhand{width:42px;height:55px;right:2px;top:118px;clip-path:none;border-radius:3px;background:linear-gradient(90deg,#2b143d,#6d3a91,#2b143d)}.character-visual-panel[data-offhand=dagger] .model-offhand,.character-visual-panel[data-offhand=crossbow] .model-offhand{width:9px;height:75px;right:8px;top:120px;clip-path:polygon(50% 0,100% 70%,50% 100%,0 70%);transform:rotate(-25deg)}
.character-nameplate{position:absolute;bottom:1px;left:0;right:0;text-align:center;text-shadow:0 2px 4px #000}.character-nameplate strong{display:block;color:#eee0b9;font-size:.82rem}.character-nameplate span{display:block;color:#75a846;font-size:.64rem;text-transform:uppercase;letter-spacing:.06em}.character-mini-tabs{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;margin:0 4px 9px}.character-mini-tabs span{display:grid;place-items:center;height:27px;border:1px solid rgba(198,143,72,.32);background:#11120f;color:#bfa36e}
.equipped-stats-panel,.character-bonus-panel{border:1px solid rgba(198,143,72,.3);padding:9px;background:rgba(8,9,7,.72)}.equipped-stats-panel h3,.character-bonus-panel h3{font-size:.76rem;text-transform:uppercase;letter-spacing:.11em;color:#d7bd88;padding-bottom:7px;margin:0 0 7px;border-bottom:1px solid rgba(198,143,72,.22)}.character-stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px}.character-stat-grid div{display:flex;justify-content:space-between;gap:5px;font-size:.71rem}.character-stat-grid span{color:#aa9268}.character-stat-grid strong{color:#e1c58f;font-weight:400}.character-resource-strip{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid rgba(198,143,72,.3);border-top:0}.character-resource-strip div{padding:8px 3px;text-align:center;border-right:1px solid rgba(198,143,72,.22)}.character-resource-strip div:last-child{border:0}.character-resource-strip span{display:block;color:#8bc743}.character-resource-strip strong{font-size:.83rem;color:#e4cf9e}.character-resource-strip small{display:block;text-transform:uppercase;font-size:.57rem;color:#867455}.character-bonus-panel{margin-top:9px}.character-bonus-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}.character-bonus-grid div{text-align:center}.character-bonus-grid span{font-size:1rem;display:block;color:#9fc755}.character-bonus-grid strong{font-size:.64rem;display:block;color:#e4cd9c}.character-bonus-grid small{font-size:.49rem;text-transform:uppercase;color:#8f7954}.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
@keyframes characterIdle{0%,100%{transform:translateY(0) rotateY(-2deg)}50%{transform:translateY(-3px) rotateY(2deg)}}@keyframes characterAura{0%,100%{transform:scale(.94);opacity:.25}50%{transform:scale(1.06);opacity:.58}}@keyframes capeWave{0%,100%{transform:translateZ(-10px) skewX(0)}50%{transform:translateZ(-10px) skewX(-3deg)}}
@media(max-width:1450px){:root{--character-panel-w:290px}.character-stage-wrap{grid-template-columns:42px minmax(0,1fr) 42px}.character-model{transform:scale(.88)}.character-model-stage{height:290px}.character-side-slot{height:42px}.character-slot-img{width:32px;height:32px}.character-stat-grid{gap:3px 7px}.character-stat-grid div{font-size:.65rem}}
@media(max-width:1200px){.game-layout{grid-template-columns:var(--sidebar-w) 1fr}.character-visual-panel{display:none}}
@media(max-width:900px){.game-layout{grid-template-columns:1fr}}

/* Phase 14.48: animated combat theatre preview */
.combat-preview-card{overflow:hidden}
.combat-preview-layout{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(280px,.8fr);gap:18px;align-items:stretch}
.combat-preview-target-pill{min-width:210px;padding:12px 14px;border:1px solid rgba(198,143,72,.3);background:linear-gradient(180deg,rgba(23,24,18,.95),rgba(10,11,8,.95));text-align:right;box-shadow:inset 0 0 16px rgba(0,0,0,.55)}
.combat-preview-target-pill span{display:block;font-size:.68rem;text-transform:uppercase;letter-spacing:.14em;color:#9d8961}
.combat-preview-target-pill strong{display:block;color:#f0ddb0;font-size:1rem;margin-top:2px}
.combat-preview-target-pill small{display:block;color:#8fc84e;margin-top:4px}
.combat-preview-stage-shell{min-height:420px;border:1px solid rgba(198,143,72,.28);background:radial-gradient(circle at 50% 10%,rgba(63,77,48,.22),rgba(14,14,12,.98) 58%);box-shadow:inset 0 0 26px rgba(0,0,0,.8),0 16px 30px rgba(0,0,0,.3);border-radius:18px;padding:16px;perspective:1100px;overflow:hidden}
.combat-preview-stage{position:relative;height:100%;min-height:386px;transform-style:preserve-3d;transition:transform .18s ease-out}
.combat-preview-backdrop{position:absolute;inset:0;background:radial-gradient(circle at 50% 18%,rgba(160,219,96,.18),transparent 26%),radial-gradient(circle at 50% 100%,rgba(82,109,39,.16),transparent 34%),linear-gradient(180deg,rgba(42,48,39,.2),rgba(5,6,5,.05) 42%,rgba(4,5,4,.88) 100%)}
.combat-preview-ground{position:absolute;bottom:30px;width:225px;height:54px;border-radius:50%;border:2px solid rgba(145,200,74,.26);filter:blur(1px);box-shadow:inset 0 0 18px rgba(114,181,61,.14),0 0 26px rgba(114,181,61,.12)}
.combat-preview-ground.player{left:34px;background:radial-gradient(ellipse,rgba(75,120,48,.22),rgba(0,0,0,.05) 65%,transparent 72%)}
.combat-preview-ground.monster{right:34px;background:radial-gradient(ellipse,rgba(160,74,53,.16),rgba(0,0,0,.05) 65%,transparent 72%)}
.combat-preview-player.character-model{left:58px;bottom:62px;width:164px;height:262px;animation:characterIdle 3.7s ease-in-out infinite;z-index:4;transform-origin:50% 86%;transition:transform .34s ease,filter .26s ease}
.combat-preview-player[data-tier=bronze]{--avatar-metal:#a56a37;--avatar-metal2:#4d2f1d;--avatar-accent:#d29a48;--avatar-glow:#bd7434}
.combat-preview-player[data-tier=iron]{--avatar-metal:#929898;--avatar-metal2:#363b3b;--avatar-accent:#9abf68;--avatar-glow:#75a546}
.combat-preview-player[data-tier=steel]{--avatar-metal:#c4c9c9;--avatar-metal2:#4d5556;--avatar-accent:#a7d95e;--avatar-glow:#86c842}
.combat-preview-player[data-tier=gold]{--avatar-metal:#d6aa42;--avatar-metal2:#6d4d17;--avatar-accent:#f0cf60;--avatar-glow:#e0a938}
.combat-preview-player[data-tier=mithril]{--avatar-metal:#68b9b0;--avatar-metal2:#245751;--avatar-accent:#79e2ca;--avatar-glow:#42c8b1}
.combat-preview-player[data-tier=adamantite]{--avatar-metal:#5b9d56;--avatar-metal2:#203f25;--avatar-accent:#a0df53;--avatar-glow:#72c441}
.combat-preview-player[data-tier=runite]{--avatar-metal:#4b9bb9;--avatar-metal2:#173d50;--avatar-accent:#78e3df;--avatar-glow:#48c9d1}
.combat-preview-player[data-tier=ancient]{--avatar-metal:#8a62a9;--avatar-metal2:#31203f;--avatar-accent:#c07df0;--avatar-glow:#a45fe2}
.combat-preview-player[data-tier=leather]{--avatar-metal:#8b5a35;--avatar-metal2:#3a2418;--avatar-accent:#b9844c;--avatar-glow:#8b6b3c}
.combat-preview-player{--metal:var(--avatar-metal,#929898);--metal2:var(--avatar-metal2,#363b3b);--accent:var(--avatar-accent,#9ac84a)}
.combat-preview-player[data-quality=fine]{filter:drop-shadow(0 0 5px var(--avatar-glow)) drop-shadow(0 13px 8px #000)}
.combat-preview-player[data-quality=superior]{filter:drop-shadow(0 0 9px var(--avatar-glow)) drop-shadow(0 13px 8px #000)}
.combat-preview-player[data-quality=masterwork]{filter:drop-shadow(0 0 14px var(--avatar-glow)) drop-shadow(0 13px 8px #000)}
.combat-preview-player[data-weapon=unarmed] .model-weapon{display:none}.combat-preview-player[data-weapon=staff] .model-weapon{height:190px;top:56px;left:9px;transform:rotate(6deg)}.combat-preview-player[data-weapon=staff] .model-weapon:before{top:-18px;left:-12px;width:36px;height:36px;border-radius:50%;clip-path:none;background:radial-gradient(circle,#fff,var(--accent) 28%,transparent 67%)}.combat-preview-player[data-weapon=bow] .model-weapon,.combat-preview-player[data-weapon=crossbow] .model-weapon{width:62px;height:95px;top:104px;left:4px;background:transparent;border:4px solid var(--accent);border-left:0;border-radius:0 80% 80% 0;box-shadow:none}.combat-preview-player[data-weapon=bow] .model-weapon:before,.combat-preview-player[data-weapon=crossbow] .model-weapon:before{display:none}.combat-preview-player[data-weapon=hammer] .model-weapon:before,.combat-preview-player[data-weapon=axe] .model-weapon:before{top:-26px;left:-18px;width:48px;height:32px;clip-path:polygon(0 15%,100% 0,88% 100%,10% 86%);background:linear-gradient(90deg,var(--metal),var(--accent))}
.combat-preview-player[data-offhand=none] .model-offhand{display:none}.combat-preview-player[data-offhand=spellbook] .model-offhand{width:42px;height:55px;right:2px;top:118px;clip-path:none;border-radius:3px;background:linear-gradient(90deg,#2b143d,#6d3a91,#2b143d)}.combat-preview-player[data-offhand=dagger] .model-offhand,.combat-preview-player[data-offhand=crossbow] .model-offhand{width:9px;height:75px;right:8px;top:120px;clip-path:polygon(50% 0,100% 70%,50% 100%,0 70%);transform:rotate(-25deg)}
.combat-preview-player-nameplate,.combat-preview-monster-nameplate{position:absolute;bottom:12px;text-align:center;text-shadow:0 2px 6px rgba(0,0,0,.85);z-index:7}
.combat-preview-player-nameplate{left:34px;width:220px}.combat-preview-monster-nameplate{right:34px;width:220px}
.combat-preview-player-nameplate strong,.combat-preview-monster-nameplate strong{display:block;color:#efddb2;font-size:.86rem}
.combat-preview-player-nameplate span,.combat-preview-monster-nameplate span{display:block;color:#8bc74c;font-size:.62rem;text-transform:uppercase;letter-spacing:.08em}
.combat-preview-monster{position:absolute;right:36px;bottom:58px;width:214px;height:258px;transform-origin:45% 90%;z-index:4;transition:transform .3s ease,filter .25s ease;--monster-accent:#c65143;--monster-secondary:#6d1e1a;--monster-glow:rgba(198,81,67,.45)}
.combat-preview-monster[data-monster-style=magic]{--monster-accent:#7d6be3;--monster-secondary:#302063;--monster-glow:rgba(131,109,235,.45)}
.combat-preview-monster[data-monster-style=ranged]{--monster-accent:#d28f33;--monster-secondary:#6a3e12;--monster-glow:rgba(210,143,51,.42)}
.combat-preview-monster[data-monster-family=undead]{--monster-accent:#82b8c3;--monster-secondary:#2f4f53;--monster-glow:rgba(125,202,220,.42)}
.combat-preview-monster[data-monster-family=beast]{--monster-accent:#b07233;--monster-secondary:#543117;--monster-glow:rgba(182,121,60,.4)}
.combat-preview-monster[data-monster-family=slime]{--monster-accent:#58c96d;--monster-secondary:#1e5728;--monster-glow:rgba(88,201,109,.45)}
.combat-preview-monster[data-monster-family=insect]{--monster-accent:#d97736;--monster-secondary:#6b3410;--monster-glow:rgba(217,119,54,.45)}
.combat-preview-monster[data-monster-family=demon]{--monster-accent:#c04b5f;--monster-secondary:#571723;--monster-glow:rgba(192,75,95,.44)}
.combat-preview-monster[data-monster-family=dragon]{--monster-accent:#41b7d6;--monster-secondary:#11455b;--monster-glow:rgba(65,183,214,.44)}
.combat-preview-monster[data-monster-family=elemental]{--monster-accent:#d7d3a8;--monster-secondary:#5e5b40;--monster-glow:rgba(215,211,168,.36)}
.combat-preview-monster[data-monster-elite="1"]{filter:drop-shadow(0 0 12px rgba(241,209,90,.22))}
.combat-preview-monster-shadow{position:absolute;left:28px;right:28px;bottom:8px;height:34px;border-radius:50%;background:radial-gradient(ellipse,rgba(0,0,0,.7),transparent 70%)}
.combat-preview-monster-aura{position:absolute;left:18px;right:18px;bottom:26px;height:118px;background:radial-gradient(circle,var(--monster-glow),transparent 67%);filter:blur(8px);opacity:.9}
.combat-preview-monster-tail{position:absolute;right:30px;bottom:60px;width:78px;height:72px;border:5px solid var(--monster-accent);border-left:0;border-top:0;border-radius:0 0 90px 0;transform:rotate(-18deg);opacity:.46}
.combat-preview-monster-arm{position:absolute;bottom:102px;width:56px;height:84px;background:linear-gradient(180deg,var(--monster-accent),var(--monster-secondary));border:2px solid rgba(255,255,255,.08);box-shadow:0 0 15px rgba(0,0,0,.25)}
.combat-preview-monster-arm.left{left:16px;clip-path:polygon(33% 0,78% 0,100% 58%,70% 100%,12% 78%,0 24%);transform:rotate(18deg)}
.combat-preview-monster-arm.right{right:20px;clip-path:polygon(22% 0,67% 0,100% 24%,88% 78%,30% 100%,0 58%);transform:rotate(-18deg)}
.combat-preview-monster-body{position:absolute;left:45px;right:45px;bottom:48px;height:164px;border:3px solid rgba(255,255,255,.08);background:linear-gradient(180deg,var(--monster-accent),var(--monster-secondary) 76%,#170d0b);box-shadow:0 0 25px rgba(0,0,0,.35),inset 0 -20px 35px rgba(0,0,0,.28);clip-path:polygon(20% 0,80% 0,100% 26%,92% 84%,72% 100%,28% 100%,8% 84%,0 26%)}
.combat-preview-monster[data-monster-family=slime] .combat-preview-monster-body{clip-path:polygon(18% 11%,82% 11%,98% 36%,94% 86%,71% 100%,31% 100%,6% 86%,2% 36%);border-radius:48% 48% 40% 40%/38% 38% 62% 62%}
.combat-preview-monster[data-monster-family=insect] .combat-preview-monster-body{clip-path:polygon(35% 0,65% 0,100% 22%,85% 100%,15% 100%,0 22%)}
.combat-preview-monster[data-monster-family=dragon] .combat-preview-monster-body{clip-path:polygon(24% 0,76% 0,100% 28%,88% 86%,68% 100%,32% 100%,12% 86%,0 28%)}
.combat-preview-monster-icon{position:absolute;left:50%;top:54%;transform:translate(-50%,-50%);width:82px;height:82px;object-fit:contain;filter:drop-shadow(0 6px 9px rgba(0,0,0,.5))}
.combat-preview-monster-eye{position:absolute;top:34px;width:14px;height:14px;border-radius:50%;background:#f6f0c7;box-shadow:0 0 12px rgba(255,245,175,.55)}
.combat-preview-monster-eye.left{left:38px}.combat-preview-monster-eye.right{right:38px}
.combat-preview-monster-horn{position:absolute;top:-17px;width:26px;height:34px;background:linear-gradient(180deg,#f3ddb1,var(--monster-secondary));clip-path:polygon(50% 0,100% 100%,0 100%);opacity:.9}
.combat-preview-monster-horn.left{left:28px;transform:rotate(-16deg)}.combat-preview-monster-horn.right{right:28px;transform:rotate(16deg)}
.combat-preview-monster[data-monster-family=undead] .combat-preview-monster-horn,.combat-preview-monster[data-monster-family=slime] .combat-preview-monster-horn{display:none}
.combat-preview-monster[data-monster-family=beast] .combat-preview-monster-tail,.combat-preview-monster[data-monster-family=humanoid] .combat-preview-monster-tail{opacity:.2}
.combat-preview-float{position:absolute;top:84px;min-width:80px;padding:7px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.55);text-align:center;font-weight:800;letter-spacing:.02em;opacity:0;transform:translateY(18px) scale(.92);transition:transform .2s ease,opacity .2s ease;z-index:8}
.combat-preview-float.player{left:76px;color:#9ee55c}.combat-preview-float.monster{right:82px;color:#f1d08d}
.combat-preview-float.show{opacity:1;transform:translateY(0) scale(1)}
.combat-preview-effect{position:absolute;opacity:0;pointer-events:none;z-index:6}
.combat-preview-effect.active{opacity:1}
.combat-preview-effect.slash{left:50%;top:46%;width:104px;height:104px;transform:translate(-50%,-50%) rotate(18deg)}
.combat-preview-effect.slash:before,.combat-preview-effect.slash:after{content:"";position:absolute;inset:0;border-radius:50%;border-top:5px solid rgba(244,236,176,.96);border-right:5px solid transparent;border-bottom:5px solid rgba(134,217,74,.72);border-left:5px solid transparent;filter:drop-shadow(0 0 10px rgba(150,214,74,.55));animation:combatSlashArc .42s ease forwards}
.combat-preview-effect.slash:after{inset:12px;animation-delay:.05s;opacity:.7}
.combat-preview-effect.projectile{left:162px;top:164px;width:22px;height:22px;border-radius:50%;background:radial-gradient(circle,#fff,var(--avatar-glow,#9bd35a) 34%,transparent 70%);box-shadow:0 0 16px var(--avatar-glow,#9bd35a);animation:combatProjectileFly .54s linear forwards}
.combat-preview-effect.projectile:after{content:"";position:absolute;left:-26px;top:8px;width:26px;height:4px;background:linear-gradient(90deg,transparent,var(--avatar-glow,#9bd35a));border-radius:999px}
.combat-preview-effect.magic{left:172px;top:138px;width:30px;height:30px;border-radius:50%;background:radial-gradient(circle,#fff,var(--avatar-glow,#b082ff) 34%,transparent 70%);box-shadow:0 0 18px rgba(181,120,255,.72);animation:combatMagicFly .62s linear forwards}
.combat-preview-effect.magic:before,.combat-preview-effect.magic:after{content:"";position:absolute;inset:-10px;border:2px solid rgba(212,181,255,.55);border-radius:50%;animation:combatMagicPulse .6s ease-out forwards}
.combat-preview-effect.magic:after{inset:-18px;animation-delay:.08s}
.combat-preview-card.attack-melee .combat-preview-player.is-attacking{transform:translateX(54px) translateY(-2px) rotate(5deg)}
.combat-preview-card.attack-ranged .combat-preview-player.is-attacking{transform:translateX(16px) rotate(-4deg)}
.combat-preview-card.attack-magic .combat-preview-player.is-attacking{transform:translateX(14px) translateY(-4px) rotate(-4deg);filter:drop-shadow(0 0 12px var(--avatar-glow,#9ad14e)) drop-shadow(0 13px 8px #000)}
.combat-preview-monster.is-hit{animation:combatMonsterHit .36s ease}
.combat-preview-sidecard{border:1px solid rgba(198,143,72,.24);background:linear-gradient(180deg,rgba(18,18,14,.9),rgba(8,9,7,.94));padding:16px;border-radius:14px;box-shadow:inset 0 0 18px rgba(0,0,0,.35)}
.combat-preview-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.combat-preview-info-grid div{padding:10px 11px;border:1px solid rgba(198,143,72,.2);background:rgba(255,255,255,.02);border-radius:10px}
.combat-preview-info-grid span{display:block;color:#9e8a63;font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;margin-bottom:5px}
.combat-preview-info-grid strong{color:#efd9aa;font-size:.92rem}
.combat-preview-tipbox{padding:12px 13px;border:1px solid rgba(142,205,64,.22);background:rgba(80,123,39,.08);border-radius:12px;margin-bottom:14px}.combat-preview-tipbox strong{display:block;color:#bfe68b;margin-bottom:5px}
.combat-preview-target-summary h3{margin-bottom:6px}
.combat-monster-card.preview-selected{border-color:rgba(145,209,78,.58);box-shadow:0 0 0 1px rgba(145,209,78,.35),0 0 22px rgba(145,209,78,.08)}
@keyframes combatSlashArc{0%{opacity:0;transform:scale(.5) rotate(-22deg)}20%{opacity:1}100%{opacity:0;transform:scale(1.15) rotate(22deg)}}
@keyframes combatProjectileFly{0%{opacity:0;transform:translate(0,0) scale(.6)}8%{opacity:1}100%{opacity:0;transform:translate(270px,-40px) scale(1.15)}}
@keyframes combatMagicFly{0%{opacity:0;transform:translate(0,0) scale(.55)}10%{opacity:1}100%{opacity:0;transform:translate(255px,-54px) scale(1.25)}}
@keyframes combatMagicPulse{0%{opacity:.7;transform:scale(.45)}100%{opacity:0;transform:scale(1.25)}}
@keyframes combatMonsterHit{0%,100%{transform:translateX(0)}20%{transform:translateX(-10px) translateY(-4px) scale(1.02)}45%{transform:translateX(8px)}70%{transform:translateX(-6px)}}
@media(max-width:1220px){.combat-preview-layout{grid-template-columns:1fr}.combat-preview-target-pill{text-align:left}.combat-preview-stage-shell{min-height:350px}}
@media(max-width:760px){.combat-preview-stage{min-height:320px}.combat-preview-player.character-model{left:18px;transform:scale(.86);transform-origin:left bottom}.combat-preview-monster{right:0;transform:scale(.86);transform-origin:right bottom}.combat-preview-player-nameplate{left:4px;width:180px}.combat-preview-monster-nameplate{right:0;width:185px}.combat-preview-ground.player{left:0}.combat-preview-ground.monster{right:0}.combat-preview-info-grid{grid-template-columns:1fr}}

/* Phase 14.49: live HP, enemy return attacks and boss/world-boss theatre */
.combat-preview-hud{position:absolute;top:14px;width:255px;z-index:12;padding:9px 11px;border:1px solid rgba(198,143,72,.3);background:linear-gradient(180deg,rgba(12,14,10,.92),rgba(5,6,5,.82));box-shadow:inset 0 0 14px rgba(0,0,0,.55);border-radius:10px;text-shadow:0 2px 4px #000}
.combat-preview-hud.player-hud{left:16px}.combat-preview-hud.monster-hud{right:16px;text-align:right}
.combat-preview-hud strong{display:block;color:#edddb4;font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.combat-preview-hud small{display:block;margin-top:4px;color:#9f8c68;font-size:.66rem}
.combat-preview-hpbar{height:12px;margin-top:6px;border:1px solid rgba(0,0,0,.85);background:#080907;box-shadow:inset 0 0 7px #000;border-radius:999px;overflow:hidden}
.combat-preview-hpbar span{display:block;height:100%;transition:width .34s ease;box-shadow:0 0 10px currentColor}
.combat-preview-hpbar.player span{background:linear-gradient(90deg,#3d8b23,#9dd952);color:#7fd04c}
.combat-preview-hpbar.monster span{background:linear-gradient(90deg,#8f261f,#dc6043);color:#d84f3b}
.combat-preview-effect.enemy-strike{right:170px;top:160px;width:26px;height:26px;border-radius:50%;background:radial-gradient(circle,#fff,var(--monster-accent,#d55543) 30%,transparent 70%);box-shadow:0 0 17px rgba(222,83,59,.62);animation:combatEnemyStrike .58s linear forwards}
.combat-preview-effect.enemy-strike:after{content:"";position:absolute;left:20px;top:10px;width:32px;height:5px;border-radius:999px;background:linear-gradient(90deg,var(--monster-accent,#d55543),transparent)}
.combat-preview-monster.is-attacking{animation:combatMonsterAttack .48s ease}
.combat-preview-player.is-hit{animation:combatPlayerHit .38s ease!important}
.combat-preview-style-control{min-width:190px;color:#a99368;font-size:.7rem;text-transform:uppercase;letter-spacing:.08em}
.combat-preview-style-control select{display:block;width:100%;margin-top:6px}
@keyframes combatEnemyStrike{0%{opacity:0;transform:translate(0,0) scale(.55)}12%{opacity:1}100%{opacity:0;transform:translate(-265px,40px) scale(1.12)}}
@keyframes combatMonsterAttack{0%,100%{transform:translateX(0)}40%{transform:translateX(-42px) translateY(-4px) rotate(-3deg)}}
@keyframes combatPlayerHit{0%,100%{transform:translateX(0)}30%{transform:translateX(-10px) rotate(-4deg)}65%{transform:translateX(7px)}}
@media(max-width:760px){.combat-preview-hud{width:46%;padding:7px}.combat-preview-hud strong{font-size:.68rem}.combat-preview-hud small{font-size:.56rem}.combat-preview-hud.player-hud{left:5px}.combat-preview-hud.monster-hud{right:5px}}

/* Phase 14.50: compact character-panel toolbelt */
.character-toolbelt-panel{border:1px solid rgba(198,143,72,.3);padding:8px;background:rgba(8,9,7,.76);margin-bottom:9px}
.character-toolbelt-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:7px;border-bottom:1px solid rgba(198,143,72,.2);padding-bottom:6px}.character-toolbelt-heading h3{margin:0;font-size:.75rem;text-transform:uppercase;letter-spacing:.11em;color:#d7bd88}.character-toolbelt-heading button{border:0;background:transparent;color:#91c752;font-size:.63rem;cursor:pointer}
.character-toolbelt-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:5px}.character-tool-slot{height:39px;position:relative;display:grid;place-items:center;border:1px solid rgba(198,143,72,.26);background:linear-gradient(145deg,#151611,#080907);box-shadow:inset 0 0 8px #000}.character-tool-slot.filled{border-color:rgba(142,205,64,.48)}.character-tool-slot.locked{opacity:.42}.character-tool-slot>button{width:100%;height:100%;border:0;background:transparent;color:#71804f;cursor:pointer}.character-tool-img{width:29px;height:29px;object-fit:contain}.character-tool-slot small{position:absolute;right:2px;bottom:0;color:#746347;font-size:.48rem}.character-tool-remove{position:absolute;right:-2px;top:-3px}.character-tool-remove button{width:15px;height:15px;padding:0;border-radius:50%;border:1px solid rgba(217,102,70,.45);background:#24100c;color:#f1a087;font-size:.65rem;line-height:12px;cursor:pointer}

/* Phase 14.51: modular equipment-driven character visuals */
.character-visual-panel .character-model,
.combat-preview-player{--slot-head:#8f9694;--slot-head-dark:#343938;--slot-body:#8f9694;--slot-body-dark:#343938;--slot-legs:#8f9694;--slot-legs-dark:#343938;--slot-hands:#8f9694;--slot-feet:#8f9694;--slot-cape:#17351a;--slot-pack:#6f4728;--slot-jewel:#d7bd68}
.character-visual-panel[data-head$="__bronze"] .character-model,.combat-preview-player[data-head$="__bronze"]{--slot-head:#ad7139;--slot-head-dark:#4e2f1c}.character-visual-panel[data-head$="__iron"] .character-model,.combat-preview-player[data-head$="__iron"]{--slot-head:#969c9b;--slot-head-dark:#343a39}.character-visual-panel[data-head$="__steel"] .character-model,.combat-preview-player[data-head$="__steel"]{--slot-head:#c4cbca;--slot-head-dark:#505858}.character-visual-panel[data-head$="__gold"] .character-model,.combat-preview-player[data-head$="__gold"]{--slot-head:#d8ac43;--slot-head-dark:#6f4e17}.character-visual-panel[data-head$="__mithril"] .character-model,.combat-preview-player[data-head$="__mithril"]{--slot-head:#6bc0b7;--slot-head-dark:#245a53}.character-visual-panel[data-head$="__adamantite"] .character-model,.combat-preview-player[data-head$="__adamantite"]{--slot-head:#63a45d;--slot-head-dark:#24442a}.character-visual-panel[data-head$="__runite"] .character-model,.combat-preview-player[data-head$="__runite"]{--slot-head:#4ca0bd;--slot-head-dark:#173e51}.character-visual-panel[data-head$="__ancient"] .character-model,.combat-preview-player[data-head$="__ancient"]{--slot-head:#936bb2;--slot-head-dark:#352345}.character-visual-panel[data-head$="__leather"] .character-model,.combat-preview-player[data-head$="__leather"]{--slot-head:#8f5d37;--slot-head-dark:#3d2719}
.character-visual-panel[data-body$="__bronze"] .character-model,.combat-preview-player[data-body$="__bronze"]{--slot-body:#ad7139;--slot-body-dark:#4e2f1c}.character-visual-panel[data-body$="__iron"] .character-model,.combat-preview-player[data-body$="__iron"]{--slot-body:#969c9b;--slot-body-dark:#343a39}.character-visual-panel[data-body$="__steel"] .character-model,.combat-preview-player[data-body$="__steel"]{--slot-body:#c4cbca;--slot-body-dark:#505858}.character-visual-panel[data-body$="__gold"] .character-model,.combat-preview-player[data-body$="__gold"]{--slot-body:#d8ac43;--slot-body-dark:#6f4e17}.character-visual-panel[data-body$="__mithril"] .character-model,.combat-preview-player[data-body$="__mithril"]{--slot-body:#6bc0b7;--slot-body-dark:#245a53}.character-visual-panel[data-body$="__adamantite"] .character-model,.combat-preview-player[data-body$="__adamantite"]{--slot-body:#63a45d;--slot-body-dark:#24442a}.character-visual-panel[data-body$="__runite"] .character-model,.combat-preview-player[data-body$="__runite"]{--slot-body:#4ca0bd;--slot-body-dark:#173e51}.character-visual-panel[data-body$="__ancient"] .character-model,.combat-preview-player[data-body$="__ancient"]{--slot-body:#936bb2;--slot-body-dark:#352345}.character-visual-panel[data-body$="__leather"] .character-model,.combat-preview-player[data-body$="__leather"]{--slot-body:#8f5d37;--slot-body-dark:#3d2719}
.character-visual-panel[data-legs$="__bronze"] .character-model,.combat-preview-player[data-legs$="__bronze"]{--slot-legs:#ad7139;--slot-legs-dark:#4e2f1c}.character-visual-panel[data-legs$="__iron"] .character-model,.combat-preview-player[data-legs$="__iron"]{--slot-legs:#969c9b;--slot-legs-dark:#343a39}.character-visual-panel[data-legs$="__steel"] .character-model,.combat-preview-player[data-legs$="__steel"]{--slot-legs:#c4cbca;--slot-legs-dark:#505858}.character-visual-panel[data-legs$="__gold"] .character-model,.combat-preview-player[data-legs$="__gold"]{--slot-legs:#d8ac43;--slot-legs-dark:#6f4e17}.character-visual-panel[data-legs$="__mithril"] .character-model,.combat-preview-player[data-legs$="__mithril"]{--slot-legs:#6bc0b7;--slot-legs-dark:#245a53}.character-visual-panel[data-legs$="__adamantite"] .character-model,.combat-preview-player[data-legs$="__adamantite"]{--slot-legs:#63a45d;--slot-legs-dark:#24442a}.character-visual-panel[data-legs$="__runite"] .character-model,.combat-preview-player[data-legs$="__runite"]{--slot-legs:#4ca0bd;--slot-legs-dark:#173e51}.character-visual-panel[data-legs$="__ancient"] .character-model,.combat-preview-player[data-legs$="__ancient"]{--slot-legs:#936bb2;--slot-legs-dark:#352345}.character-visual-panel[data-legs$="__leather"] .character-model,.combat-preview-player[data-legs$="__leather"]{--slot-legs:#8f5d37;--slot-legs-dark:#3d2719}
.character-model .model-torso{background:linear-gradient(105deg,var(--slot-body-dark),var(--slot-body) 45%,#171a17 49%,var(--slot-body-dark))}.character-model .model-head,.character-model .model-helm{background:linear-gradient(105deg,var(--slot-head-dark),var(--slot-head),var(--slot-head-dark))}.character-model .model-leg{background:linear-gradient(90deg,var(--slot-legs-dark),var(--slot-legs),var(--slot-legs-dark))}.character-model .model-boot{background:linear-gradient(100deg,#10120f,var(--slot-feet,var(--slot-legs-dark)));border-color:var(--slot-feet,var(--slot-legs))}
.character-visual-panel[data-head="none"] .model-helm,.combat-preview-player[data-head="none"] .model-helm{display:none}.character-visual-panel[data-head^="hood__"] .model-helm,.combat-preview-player[data-head^="hood__"] .model-helm{clip-path:polygon(18% 0,82% 0,100% 45%,82% 100%,18% 100%,0 45%);border-radius:48% 48% 20% 20%;opacity:.95}.character-visual-panel[data-head^="crown__"] .model-helm,.combat-preview-player[data-head^="crown__"] .model-helm{top:14px;height:36px;clip-path:polygon(0 80%,8% 15%,30% 60%,50% 0,70% 60%,92% 15%,100% 80%)}
.character-visual-panel[data-body="none"] .model-torso,.combat-preview-player[data-body="none"] .model-torso{background:linear-gradient(105deg,#352918,#6f5630 48%,#2b2116);border-color:#8d7349}.character-visual-panel[data-body^="robe__"] .model-torso,.combat-preview-player[data-body^="robe__"] .model-torso{clip-path:polygon(12% 0,88% 0,100% 26%,92% 100%,8% 100%,0 26%);border-radius:8px;background:linear-gradient(105deg,var(--slot-body-dark),var(--slot-body),var(--slot-body-dark))}.character-visual-panel[data-body^="leather_body__"] .model-torso,.combat-preview-player[data-body^="leather_body__"] .model-torso{border-style:dashed;box-shadow:inset 0 0 12px rgba(20,10,3,.75)}.character-visual-panel[data-body^="plate_body__"] .model-shoulder,.combat-preview-player[data-body^="plate_body__"] .model-shoulder{transform:scale(1.08);box-shadow:0 0 7px rgba(0,0,0,.6)}
.character-visual-panel[data-legs="none"] .model-leg,.combat-preview-player[data-legs="none"] .model-leg{background:linear-gradient(90deg,#31291e,#65533b,#31291e);border-color:#78694f}.character-visual-panel[data-legs^="robe_legs__"] .model-leg,.combat-preview-player[data-legs^="robe_legs__"] .model-leg{width:37px;clip-path:polygon(12% 0,88% 0,100% 100%,0 100%)}
.character-visual-panel[data-hands="none"] .model-glove,.combat-preview-player[data-hands="none"] .model-glove{display:none}.model-glove{position:absolute;top:163px;width:22px;height:22px;border-radius:38%;background:linear-gradient(135deg,var(--slot-hands),#242822);border:1px solid var(--accent);z-index:7}.model-glove.left{left:28px}.model-glove.right{right:27px}.character-visual-panel[data-hands$="__bronze"] .character-model,.combat-preview-player[data-hands$="__bronze"]{--slot-hands:#ad7139}.character-visual-panel[data-hands$="__gold"] .character-model,.combat-preview-player[data-hands$="__gold"]{--slot-hands:#d8ac43}.character-visual-panel[data-hands$="__mithril"] .character-model,.combat-preview-player[data-hands$="__mithril"]{--slot-hands:#6bc0b7}.character-visual-panel[data-hands$="__adamantite"] .character-model,.combat-preview-player[data-hands$="__adamantite"]{--slot-hands:#63a45d}.character-visual-panel[data-hands$="__runite"] .character-model,.combat-preview-player[data-hands$="__runite"]{--slot-hands:#4ca0bd}.character-visual-panel[data-hands$="__ancient"] .character-model,.combat-preview-player[data-hands$="__ancient"]{--slot-hands:#936bb2}.character-visual-panel[data-hands$="__leather"] .character-model,.combat-preview-player[data-hands$="__leather"]{--slot-hands:#8f5d37}
.character-visual-panel[data-feet="none"] .model-boot,.combat-preview-player[data-feet="none"] .model-boot{background:#312719;border-color:#6e5b3e}.character-visual-panel[data-feet$="__bronze"] .character-model,.combat-preview-player[data-feet$="__bronze"]{--slot-feet:#ad7139}.character-visual-panel[data-feet$="__gold"] .character-model,.combat-preview-player[data-feet$="__gold"]{--slot-feet:#d8ac43}.character-visual-panel[data-feet$="__mithril"] .character-model,.combat-preview-player[data-feet$="__mithril"]{--slot-feet:#6bc0b7}.character-visual-panel[data-feet$="__adamantite"] .character-model,.combat-preview-player[data-feet$="__adamantite"]{--slot-feet:#63a45d}.character-visual-panel[data-feet$="__runite"] .character-model,.combat-preview-player[data-feet$="__runite"]{--slot-feet:#4ca0bd}.character-visual-panel[data-feet$="__ancient"] .character-model,.combat-preview-player[data-feet$="__ancient"]{--slot-feet:#936bb2}.character-visual-panel[data-feet$="__leather"] .character-model,.combat-preview-player[data-feet$="__leather"]{--slot-feet:#8f5d37}
.character-visual-panel[data-cape="none"] .model-cape,.combat-preview-player[data-cape="none"] .model-cape{display:none}.character-visual-panel[data-cape^="master_cape__"] .model-cape,.combat-preview-player[data-cape^="master_cape__"] .model-cape{background:linear-gradient(105deg,#32151c,#8a3343 48%,#170a0d);border-top-color:#f0c767}.character-visual-panel[data-cape^="artisan_cape__"] .model-cape,.combat-preview-player[data-cape^="artisan_cape__"] .model-cape{background:linear-gradient(105deg,#17213b,#395589 48%,#0b101e);border-top-color:#d1b35d}
.model-backpack{position:absolute;left:47px;top:91px;width:62px;height:89px;border:2px solid #a87d46;border-radius:13px 13px 20px 20px;background:linear-gradient(110deg,#3c2516,var(--slot-pack),#27170e);transform:translateZ(-18px);z-index:-2;box-shadow:0 8px 10px rgba(0,0,0,.45)}.model-backpack:before{content:"";position:absolute;left:14px;right:14px;top:-13px;height:22px;border:5px solid #7d572f;border-bottom:0;border-radius:18px 18px 0 0}.character-visual-panel[data-backpack="none"] .model-backpack,.combat-preview-player[data-backpack="none"] .model-backpack{display:none}.character-visual-panel[data-backpack^="master_pack__"] .model-backpack,.combat-preview-player[data-backpack^="master_pack__"] .model-backpack{--slot-pack:#70459c;border-color:#cfb45a;box-shadow:0 0 12px rgba(159,98,218,.45)}.character-visual-panel[data-backpack^="adventurer_pack__"] .model-backpack,.combat-preview-player[data-backpack^="adventurer_pack__"] .model-backpack{--slot-pack:#526d35}
.model-necklace{position:absolute;left:70px;top:82px;width:18px;height:24px;border:2px solid var(--slot-jewel);border-top:0;border-radius:0 0 50% 50%;z-index:8}.model-necklace:after{content:"";position:absolute;left:5px;bottom:-7px;width:7px;height:7px;transform:rotate(45deg);background:var(--slot-jewel);box-shadow:0 0 6px var(--slot-jewel)}.character-visual-panel[data-necklace="none"] .model-necklace,.combat-preview-player[data-necklace="none"] .model-necklace{display:none}.character-visual-panel[data-necklace$="__silver"] .character-model,.combat-preview-player[data-necklace$="__silver"]{--slot-jewel:#c8d2d0}.character-visual-panel[data-necklace$="__gold"] .character-model,.combat-preview-player[data-necklace$="__gold"]{--slot-jewel:#e5bd48}
.model-ring{position:absolute;right:25px;top:170px;width:9px;height:9px;border:2px solid var(--slot-jewel);border-radius:50%;z-index:9;box-shadow:0 0 4px var(--slot-jewel)}.character-visual-panel[data-ring="none"] .model-ring,.combat-preview-player[data-ring="none"] .model-ring{display:none}
.model-ammo{position:absolute;right:0;top:93px;width:24px;height:84px;border:2px solid #79542d;border-radius:7px;background:linear-gradient(90deg,#2d1b0e,#64401e);transform:translateZ(-12px);z-index:-1}.model-ammo:before,.model-ammo:after{content:"";position:absolute;top:-16px;width:3px;height:52px;background:#d3b56d;transform:rotate(7deg)}.model-ammo:before{left:6px}.model-ammo:after{right:6px}.character-visual-panel[data-ammo="none"] .model-ammo,.combat-preview-player[data-ammo="none"] .model-ammo{display:none}.character-visual-panel[data-ammo^="bolts__"] .model-ammo,.combat-preview-player[data-ammo^="bolts__"] .model-ammo{height:62px;top:108px}.character-visual-panel[data-ammo^="darts__"] .model-ammo,.combat-preview-player[data-ammo^="darts__"] .model-ammo{width:19px;height:45px;top:122px}
.character-mini-tabs{display:none!important}
.character-toolbelt-panel{margin-top:8px}

/* Phase 14.52 cosmetic wardrobe */
.character-panel-links{display:flex;gap:8px;align-items:center}.character-panel-links a{font-size:.62rem;color:#91bf51;letter-spacing:.04em;text-transform:none}.character-panel-links a+a{padding-left:8px;border-left:1px solid rgba(198,143,72,.25)}
.wardrobe-help-card{display:flex;align-items:center;justify-content:space-between;gap:18px}.wardrobe-slot-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.wardrobe-slot-card{min-width:0}.wardrobe-slot-actions{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 14px}.wardrobe-item-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:9px}.wardrobe-item{margin:0}.wardrobe-item button{width:100%;height:100%;min-height:126px;padding:10px;border:1px solid rgba(198,143,72,.24);border-radius:10px;background:linear-gradient(180deg,#171813,#0b0c09);color:#d9c59b;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;cursor:pointer;transition:.18s ease}.wardrobe-item button:hover,.wardrobe-item.active button{border-color:rgba(145,209,78,.65);box-shadow:0 0 16px rgba(112,180,55,.12);transform:translateY(-1px)}.wardrobe-item.active button{background:linear-gradient(180deg,rgba(69,102,37,.25),#0b0c09)}.wardrobe-item-img{width:54px;height:54px;object-fit:contain;filter:drop-shadow(0 4px 5px #000)}.wardrobe-item span{font-size:.74rem;font-weight:700;text-align:center}.wardrobe-item small{font-size:.58rem;color:#8f7c5a;text-align:center}
@media(max-width:900px){.wardrobe-slot-grid{grid-template-columns:1fr}.wardrobe-help-card{align-items:flex-start;flex-direction:column}}

/* Phase 14.53 - visual loadout presets */
.wardrobe-preset-card{position:relative;overflow:hidden;background:radial-gradient(circle at 90% 0,rgba(118,175,53,.1),transparent 32%),linear-gradient(180deg,rgba(24,25,19,.96),rgba(10,11,8,.98))}
.wardrobe-preset-create{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.wardrobe-preset-create input{min-width:210px}
.wardrobe-preset-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px;margin-top:14px}
.wardrobe-preset-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px;border:1px solid rgba(198,143,72,.24);border-radius:11px;background:linear-gradient(180deg,#171813,#0b0c09);box-shadow:inset 0 0 13px rgba(0,0,0,.28)}
.wardrobe-preset-item.favorite{border-color:rgba(145,209,78,.52);background:linear-gradient(180deg,rgba(67,102,34,.22),#0b0c09);box-shadow:0 0 16px rgba(116,183,53,.08),inset 0 0 13px rgba(0,0,0,.28)}
.wardrobe-preset-item>div:first-child{min-width:0}.wardrobe-preset-item strong{display:block;color:#ebd6aa;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wardrobe-preset-item span{display:block;color:#8f7c59;font-size:.66rem;margin-top:3px}
.wardrobe-preset-item .compact-actions{justify-content:flex-end;flex-wrap:wrap}
.character-panel-heading>span:first-child{display:flex;align-items:center;gap:7px;min-width:0}.character-favorite-look{font-size:.54rem;color:#9bd34f;letter-spacing:.04em;text-transform:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:116px}
@media(max-width:760px){.wardrobe-preset-card .section-title-row{align-items:flex-start;flex-direction:column}.wardrobe-preset-create{width:100%}.wardrobe-preset-create input{min-width:0;flex:1}.wardrobe-preset-item{align-items:flex-start;flex-direction:column}.wardrobe-preset-item .compact-actions{justify-content:flex-start}}

/* Phase 14.56 - exact item SVG equipment layers */
.model-item-layer{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:fill;
    pointer-events:none;
    user-select:none;
    transform-origin:50% 85%;
    filter:drop-shadow(0 5px 5px rgba(0,0,0,.58));
}
.model-item-layer-cape{z-index:-1}
.model-item-layer-backpack{z-index:-2}
.model-item-layer-ammo{z-index:-1}
.model-item-layer-legs{z-index:3}
.model-item-layer-feet{z-index:8}
.model-item-layer-body{z-index:5}
.model-item-layer-hands{z-index:14}
.model-item-layer-head{z-index:10}
.model-item-layer-necklace{z-index:11}
.model-item-layer-ring{z-index:12}
.model-item-layer-main_hand{z-index:13}.model-item-layer-off_hand{z-index:12}
.character-visual-panel[data-quality=fine] .model-item-layer,
.combat-preview-player[data-quality=fine] .model-item-layer{filter:brightness(1.04) drop-shadow(0 0 3px var(--avatar-glow)) drop-shadow(0 5px 5px rgba(0,0,0,.62))}
.character-visual-panel[data-quality=superior] .model-item-layer,
.combat-preview-player[data-quality=superior] .model-item-layer{filter:brightness(1.07) saturate(1.05) drop-shadow(0 0 5px var(--avatar-glow)) drop-shadow(0 5px 5px rgba(0,0,0,.62))}
.character-visual-panel[data-quality=masterwork] .model-item-layer,
.combat-preview-player[data-quality=masterwork] .model-item-layer{filter:brightness(1.11) saturate(1.1) drop-shadow(0 0 8px var(--avatar-glow)) drop-shadow(0 5px 6px rgba(0,0,0,.68))}

.character-visual-panel:not([data-head="none"]) .model-helm,
.character-visual-panel:not([data-head="none"]) .model-head,
.combat-preview-player:not([data-head="none"]) .model-helm,
.combat-preview-player:not([data-head="none"]) .model-head{opacity:0}
.character-visual-panel:not([data-body="none"]) .model-torso,
.character-visual-panel:not([data-body="none"]) .model-shoulder,
.combat-preview-player:not([data-body="none"]) .model-torso,
.combat-preview-player:not([data-body="none"]) .model-shoulder{opacity:0}
.character-visual-panel:not([data-hands="none"]) .model-glove,
.combat-preview-player:not([data-hands="none"]) .model-glove{opacity:0}
.character-visual-panel:not([data-legs="none"]) .model-leg,
.combat-preview-player:not([data-legs="none"]) .model-leg{opacity:0}
.character-visual-panel:not([data-feet="none"]) .model-boot,
.combat-preview-player:not([data-feet="none"]) .model-boot{opacity:0}
.character-visual-panel:not([data-cape="none"]) .model-cape,
.combat-preview-player:not([data-cape="none"]) .model-cape{opacity:0}
.character-visual-panel:not([data-backpack="none"]) .model-backpack,
.combat-preview-player:not([data-backpack="none"]) .model-backpack{opacity:0}
.character-visual-panel:not([data-necklace="none"]) .model-necklace,
.combat-preview-player:not([data-necklace="none"]) .model-necklace{opacity:0}
.character-visual-panel:not([data-ring="none"]) .model-ring,
.combat-preview-player:not([data-ring="none"]) .model-ring{opacity:0}
.character-visual-panel:not([data-ammo="none"]) .model-ammo,
.combat-preview-player:not([data-ammo="none"]) .model-ammo{opacity:0}
.character-visual-panel:not([data-weapon="unarmed"]) .model-weapon,
.combat-preview-player:not([data-weapon="unarmed"]) .model-weapon{opacity:0}
.character-visual-panel:not([data-offhand="none"]) .model-offhand,
.combat-preview-player:not([data-offhand="none"]) .model-offhand{opacity:0}


/* Phase 14.59 */
:root { --bottom-panel-height: 282px; }
.fixed-bottom-bar { height: var(--bottom-panel-height); }
.main-panel { padding-bottom: calc(var(--bottom-panel-height) + 28px); }
.bottom-resize-handle { position:absolute; left:0; right:0; top:-6px; width:100%; height:12px; padding:0; border:0; background:transparent; cursor:ns-resize; z-index:4; }
.bottom-resize-handle::after { content:""; position:absolute; width:72px; height:4px; border-radius:8px; background:#9f7540; left:50%; top:3px; transform:translateX(-50%); opacity:.7; }
body.bottom-resizing { user-select:none; cursor:ns-resize; }
.equipment-slot.empty-selectable { cursor:pointer; transition:border-color .15s, background .15s, transform .15s; }
.equipment-slot.empty-selectable:hover, .equipment-slot.empty-selectable:focus { border-color:#d5a45c; background:rgba(105,72,33,.35); transform:translateY(-1px); outline:none; }
.equipment-picker-backdrop { position:fixed; inset:0; z-index:120; background:rgba(0,0,0,.76); display:grid; place-items:center; padding:1rem; }
.equipment-picker-backdrop[hidden] { display:none; }
.equipment-picker-modal { width:min(780px,96vw); max-height:82vh; overflow:auto; position:relative; border:1px solid var(--line); border-radius:14px; background:linear-gradient(180deg,#1d1510,#0b0806); padding:1.25rem; box-shadow:0 22px 70px rgba(0,0,0,.7); }
.equipment-picker-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:.75rem; margin-top:1rem; }
.equipment-picker-item { display:grid; justify-items:center; gap:.45rem; padding:.85rem; border:1px solid var(--line-soft); border-radius:10px; background:rgba(45,31,20,.7); text-align:center; }
.equipment-picker-item[hidden] { display:none; }
.profile-character-showcase { display:grid; grid-template-columns:minmax(220px,320px) 1fr; gap:1.2rem; align-items:start; }
.profile-paperdoll { min-height:430px; display:grid; place-items:center; position:relative; border:1px solid var(--line-soft); border-radius:14px; background:radial-gradient(circle at 50% 38%,rgba(147,102,48,.22),rgba(10,7,5,.95) 64%); }
.profile-paperdoll-avatar { font-size:7rem; filter:drop-shadow(0 12px 20px rgba(0,0,0,.6)); }
.profile-equipment-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:.65rem; }
.profile-equipment-item { min-height:108px; display:grid; justify-items:center; gap:.25rem; padding:.65rem; border:1px solid var(--line-soft); border-radius:9px; background:rgba(37,25,17,.66); text-align:center; }
.profile-equipment-item .slot-img { width:48px; height:48px; object-fit:contain; }
@media (max-width:900px) { .bottom-resize-handle{display:none}.fixed-bottom-bar{height:282px}.main-panel{padding-bottom:310px}.profile-character-showcase{grid-template-columns:1fr}.profile-paperdoll{min-height:280px} }

/* Phase 16.02 calculators */
.calculator-form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:12px;align-items:end}.calculator-form label{display:grid;gap:6px;font-size:.75rem;font-weight:800;color:var(--muted)}.calculator-form input,.calculator-form select{width:100%}.tab-row{display:flex;gap:8px;flex-wrap:wrap}@media(max-width:900px){.calculator-form{grid-template-columns:1fr 1fr}.calculator-form .btn{width:100%}}@media(max-width:560px){.calculator-form{grid-template-columns:1fr}}

/* Phase 16.03: collapsible primary sidebar categories */
.sidebar-category-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin: 0 0 .7rem;
    padding: .15rem 0 .55rem;
    border: 0;
    border-bottom: 1px solid rgba(184, 128, 70, .2);
    background: transparent;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
}
.sidebar-category-toggle:hover,
.sidebar-category-toggle:focus-visible {
    color: #f0d59f;
    outline: none;
    border-bottom-color: rgba(208, 162, 88, .55);
}
.sidebar-category-chevron {
    color: #d3a45e;
    font-size: .95rem;
    transition: transform .18s ease;
}
.sidebar-category.open .sidebar-category-chevron { transform: rotate(180deg); }
.sidebar-category-content { display: none; }
.sidebar-category.open > .sidebar-category-content { display: grid; }
.skill-sidebar-section.sidebar-category.open > .sidebar-category-content { display: block; }
.sidebar-category:not(.open) { margin-bottom: 0; }
.sidebar-category:not(.open) .sidebar-category-toggle { margin-bottom: 0; }

/* Phase 16.07 - personal task duration presets */
.task-preferences-form .preference-duration-row {
    display: grid;
    grid-template-columns: minmax(90px, 1fr) minmax(110px, auto);
    gap: .55rem;
    align-items: center;
}
.task-duration-presets {
    margin-top: .7rem;
    flex-wrap: wrap;
}
.task-duration-preset {
    min-width: 74px;
}
.quantity-mode-card .task-duration-presets + .small {
    margin-top: .4rem;
}
@media (max-width: 620px) {
    .task-preferences-form .preference-duration-row {
        grid-template-columns: 1fr;
    }
    .task-duration-preset {
        flex: 1 1 28%;
    }
}

/* Phase 16.08: complete mobile UX optimisation */
.mobile-sidebar-head,
.mobile-bottom-menu,
.mobile-info-button,
.mobile-info-backdrop,
.mobile-info-sheet {
    display: none;
}

.mobile-info-backdrop {
    position: fixed;
    inset: 0;
    z-index: 80;
    background: rgba(0, 0, 0, .72);
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s ease, visibility .18s ease;
}
.mobile-info-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 81;
    max-height: min(84dvh, 720px);
    overflow: auto;
    padding: .5rem .85rem calc(1rem + env(safe-area-inset-bottom, 0px));
    border: 1px solid var(--line);
    border-bottom: 0;
    border-radius: 18px 18px 0 0;
    background: linear-gradient(180deg, rgba(42, 29, 20, .99), rgba(12, 9, 7, .995));
    box-shadow: 0 -18px 50px rgba(0, 0, 0, .72);
    transform: translateY(105%);
    transition: transform .22s ease;
}
body.mobile-info-open {
    overflow: hidden;
}
body.mobile-info-open .mobile-info-backdrop {
    opacity: 1;
    visibility: visible;
}
body.mobile-info-open .mobile-info-sheet {
    transform: translateY(0);
}
.mobile-info-handle {
    width: 46px;
    height: 5px;
    margin: 0 auto .55rem;
    border-radius: 999px;
    background: rgba(232, 214, 178, .36);
}
.mobile-info-header {
    position: sticky;
    top: -.5rem;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .8rem;
    margin: 0 -.2rem .65rem;
    padding: .55rem .2rem .65rem;
    border-bottom: 1px solid var(--line-soft);
    background: linear-gradient(180deg, #2a1d14 80%, rgba(42,29,20,0));
}
.mobile-info-header h2 { margin: 0; font-size: 1.25rem; }
.mobile-info-header .eyebrow { margin-bottom: .2rem; }
.mobile-info-close,
.mobile-sidebar-close,
.mobile-info-button {
    min-width: 40px;
    min-height: 40px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: linear-gradient(180deg, #4b3421, #2f2218);
    color: #f3d7a1;
    font-weight: 800;
    cursor: pointer;
}
.mobile-info-button {
    width: 34px;
    min-width: 34px;
    min-height: 34px;
    height: 34px;
    padding: 0;
    font-family: system-ui, sans-serif;
    font-size: 1rem;
    line-height: 1;
}
.mobile-info-content > :first-child { margin-top: 0; }
.mobile-info-content > :last-child { margin-bottom: 0; }
.mobile-info-content p,
.mobile-info-content li { color: #d8c39d; line-height: 1.5; }
.mobile-info-content ul,
.mobile-info-content ol { padding-left: 1.25rem; }
.mobile-info-content .mobile-info-clone-title { color: var(--gold-soft); font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; }

@media (max-width: 900px) {
    .mobile-info-backdrop,
    .mobile-info-sheet { display: block; }
    :root { --mobile-dock-h: 54px; }
    html { scroll-padding-top: 64px; }
    body.game-body { font-size: 14px; }

    .game-topbar {
        position: sticky;
        top: 0;
        z-index: 18;
        min-height: 58px;
        height: 58px;
        grid-template-columns: 42px minmax(0, 1fr) auto;
        gap: .55rem;
        padding: .35rem .55rem;
    }
    .topbar-game-logo { display: grid; place-items: center; }
    .topbar-game-logo img { width: 38px !important; height: 38px !important; max-width: 38px !important; object-fit: contain; }
    .topbar-character { display: none !important; }
    .topbar-center { min-width: 0; justify-self: stretch; gap: .12rem; }
    .top-task-name {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: left;
        font-size: .78rem;
        line-height: 1.1;
    }
    .top-task-idle { text-align: left; font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .top-task-row { grid-template-columns: 1fr; gap: .15rem; }
    .tick-orb { display: none !important; }
    .top-task-stack { min-width: 0; }
    .tick-counter,
    .top-task-remaining { display: inline; font-size: .68rem; line-height: 1.1; }
    .top-task-remaining::before { content: " · "; color: var(--muted); }
    .header-progress { height: 5px; margin-top: 3px; border: 0; border-radius: 999px; }
    .topbar-right { min-width: 0; gap: .35rem; justify-content: flex-end; }
    .top-task-actions form { display: none; }
    .top-task-actions { display: flex; }
    .top-icon-btn { width: 32px; height: 32px; min-width: 32px; padding: 0; }
    .resource-bar { gap: .35rem; flex-wrap: nowrap; justify-content: flex-end; font-size: .76rem; }
    .resource-bar .resource-item:nth-child(2),
    .resource-bar .resource-item:nth-child(3),
    .resource-bar .resource-item:nth-child(5),
    .resource-bar .logout-link { display: none; }
    .resource-bar .resource-item { gap: .2rem; white-space: nowrap; }
    .resource-bar .resource-item:nth-child(4) { display: none; }

    .game-layout { min-height: calc(100vh - 58px); }
    .game-sidebar {
        width: min(88vw, 350px);
        padding: 0 .8rem calc(1rem + env(safe-area-inset-bottom, 0px));
        background: linear-gradient(180deg, #1a110c, #090706 150px);
    }
    .mobile-sidebar-head {
        position: sticky;
        top: 0;
        z-index: 3;
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 58px;
        margin: 0 -.8rem .55rem;
        padding: .45rem .8rem;
        border-bottom: 1px solid var(--line);
        background: rgba(18, 12, 9, .98);
    }
    .mobile-sidebar-head strong { color: var(--gold-soft); font-size: 1rem; }
    .mobile-sidebar-close { font-size: 1.3rem; }
    .sidebar-section + .sidebar-section { margin-top: .55rem; }
    .sidebar-section {
        padding: .25rem .45rem;
        border: 1px solid var(--line-soft);
        border-radius: 8px;
        background: rgba(39, 27, 19, .45);
    }
    .sidebar-title { min-height: 42px; margin: 0; font-size: .9rem; }
    .sidebar-nav { gap: .1rem; padding: .2rem 0 .35rem; }
    .sidebar-link { min-height: 38px; display: flex; align-items: center; padding: .35rem .45rem; border-radius: 6px; font-size: .88rem; }
    .sidebar-link.active { background: rgba(214, 162, 78, .12); box-shadow: inset 3px 0 0 var(--gold); }
    .sidebar-group-toggle { min-height: 40px; padding: .35rem .45rem; }
    body.sidebar-open { overflow: hidden; }

    .main-panel {
        padding: .7rem .55rem calc(76px + env(safe-area-inset-bottom, 0px));
    }
    .page-head,
    .page-head.centered {
        position: relative;
        min-height: 42px;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: .5rem;
        margin-bottom: .6rem;
        padding: .15rem .15rem .45rem;
        text-align: left;
        border-bottom: 1px solid var(--line-soft);
    }
    .page-head.centered > div { max-width: none; width: 100%; }
    .page-head h1 { margin: 0; font-size: 1.55rem; line-height: 1.1; text-align: left; }
    .page-head .eyebrow { margin-bottom: .2rem; font-size: .62rem; }
    .town-hero { position: relative; margin: .15rem 0 .65rem; text-align: left; }
    .town-hero h1 { margin: 0; font-size: 1.55rem; line-height: 1.15; }
    .town-hero p { font-size: .9rem; }

    .card {
        padding: .72rem;
        border-radius: 8px;
        box-shadow: 0 6px 18px rgba(0,0,0,.28);
    }
    .spacing-top { margin-top: .65rem; }
    .grid { gap: .55rem; }
    .grid.two,
    .grid.three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid.three > .compact-card:nth-child(3):last-child { grid-column: 1 / -1; }
    .compact-card { min-width: 0; padding: .62rem; }
    .compact-card h2,
    .card > h2,
    .section-title-row h2,
    .section-heading-row h2,
    .town-panel-heading h2 { margin-bottom: .45rem; font-size: 1rem; line-height: 1.15; }
    .stat-line,
    .skill-row { gap: .45rem; padding: .32rem 0; font-size: .78rem; }
    .stat-line strong,
    .skill-row strong { text-align: right; }
    .progress { height: 8px; margin: .45rem 0 .15rem; }
    .section-title-row,
    .section-heading-row,
    .panel-heading-row,
    .town-panel-heading {
        position: relative;
        align-items: center;
        flex-direction: row;
        gap: .5rem;
        margin-bottom: .55rem;
    }
    .section-title-row > div,
    .section-heading-row > div,
    .panel-heading-row > div,
    .town-panel-heading > div { min-width: 0; flex: 1; }

    .mobile-info-button { display: inline-grid; place-items: center; flex: 0 0 34px; }
    .mobile-info-source { display: none !important; }
    .mobile-info-host { position: relative; padding-right: 2.8rem !important; }
    .mobile-info-host > .mobile-info-button.mobile-info-corner {
        position: absolute;
        top: .5rem;
        right: .5rem;
        z-index: 2;
    }
    .mobile-info-only-card {
        min-height: 48px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .55rem;
    }
    .mobile-info-only-card > h2 { margin: 0; }

    .feature-card { min-height: auto; }
    .town-primary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: .45rem; }
    .town-primary-grid .feature-card { min-height: 88px; padding: .55rem; justify-content: space-between; }
    .town-primary-grid .feature-card h2 { font-size: .92rem; }
    .town-primary-grid .feature-card .btn,
    .town-primary-grid .feature-card a.btn { min-height: 36px; padding: .42rem .5rem; font-size: .72rem; }
    .town-dashboard-grid { gap: .6rem; }
    .town-dashboard-panel { padding: .7rem; }
    .town-empty-panel { min-height: 115px; padding: .8rem; }
    .town-skill-update,
    .town-queue-task { padding: .55rem; }

    .compact-node-grid,
    .node-grid,
    .skill-grid,
    .inventory-grid,
    .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: .5rem; }
    .compact-node-card,
    .node-card,
    .skill-tile,
    .shop-card,
    .task-card,
    .item-card { padding: .58rem; gap: .25rem; border-radius: 8px; }
    .compact-node-card { min-height: 92px; font-size: .74rem; }
    .compact-node-card > .market-order-icon { width: 36px; height: 36px; margin-bottom: 1px; }
    .compact-node-title { font-size: .82rem; line-height: 1.15; }
    .compact-node-card .small { display: none; }
    .task-card { font-size: .8rem; }
    .task-list { gap: .45rem; }
    .shop-card { grid-template-columns: 42px minmax(0,1fr); }
    .shop-icon,
    .shop-card .item-img { width: 42px; height: 42px; }

    .btn,
    button,
    input,
    select,
    textarea { min-height: 42px; }
    input,
    select,
    textarea { padding: .6rem .65rem; }
    label { gap: .25rem; margin: .55rem 0; }
    .button-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; }
    .button-row .btn { width: 100%; padding: .55rem .65rem; }
    .inline-form { grid-template-columns: 1fr; }

    .recipe-modal-backdrop {
        align-items: flex-end;
        padding: 0;
    }
    .recipe-modal {
        width: 100%;
        max-width: none;
        max-height: 92dvh;
        overflow-y: auto;
        padding: .8rem .7rem calc(.9rem + env(safe-area-inset-bottom, 0px));
        border-radius: 16px 16px 0 0;
    }
    .recipe-modal > h2 { padding-right: 2.8rem; font-size: 1.25rem; }
    .recipe-modal .item-modal-close { position: sticky; top: 0; float: right; z-index: 4; }
    .modal-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .modal-stat-grid .stat-line { display: grid; gap: .15rem; padding: .45rem; border: 1px solid var(--line-soft); border-radius: 6px; }
    .modal-stat-grid .stat-line strong { text-align: left; }
    .modal-buttons,
    .recipe-modal .button-row:last-child {
        position: sticky;
        bottom: -.9rem;
        z-index: 3;
        margin: .7rem -.7rem -.9rem;
        padding: .6rem .7rem calc(.6rem + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid var(--line);
        background: rgba(18, 12, 9, .98);
    }
    .item-modal {
        left: 0;
        right: 0;
        top: auto;
        bottom: 0;
        width: 100%;
        max-width: none;
        max-height: 90dvh;
        overflow: auto;
        transform: translateY(105%);
        border-radius: 16px 16px 0 0;
    }
    body.item-modal-open .item-modal { transform: translateY(0); }
    .item-modal-head { grid-template-columns: 64px 1fr; gap: .7rem; }
    .item-modal-head img { width: 64px; height: 64px; }

    .fixed-bottom-bar {
        height: min(72dvh, 590px);
        grid-template-rows: var(--mobile-dock-h) 1fr;
        border-radius: 14px 14px 0 0;
    }
    body.bottom-collapsed .fixed-bottom-bar { transform: translateY(calc(100% - var(--mobile-dock-h))); }
    body.bottom-collapsed .main-panel { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
    body:not(.bottom-collapsed) .main-panel { padding-bottom: calc(min(72dvh, 590px) + 1rem); }
    .bottom-bar-topline { min-height: var(--mobile-dock-h); padding: .3rem .4rem; gap: .3rem; }
    .bottom-tabs { width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .25rem; overflow: visible; }
    .mobile-bottom-menu { display: inline-flex; }
    .bottom-tab,
    .bottom-collapse { min-width: 0; min-height: 44px; padding: .35rem .25rem; font-size: .72rem; }
    .bottom-tab { flex-direction: column; gap: .05rem; }
    .bottom-collapse { width: 42px; overflow: hidden; text-indent: -999px; position: relative; }
    .bottom-collapse::after { content: "⌃"; position: absolute; inset: 0; display: grid; place-items: center; text-indent: 0; font-size: 1.1rem; }
    body:not(.bottom-collapsed) .bottom-collapse::after { content: "⌄"; }
    .bottom-panel { padding: .55rem; }
    .fixed-bottom-bar .inventory-grid-shell { grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-rows: 58px; gap: .32rem; }
    .slot-img { width: 38px; height: 38px; }
    .equipment-layout-shell { grid-template-columns: 1fr; }
    .mobile-menu-fab { display: none !important; }

    .mobile-stack-table,
    .mobile-stack-table thead,
    .mobile-stack-table tbody,
    .mobile-stack-table tr,
    .mobile-stack-table th,
    .mobile-stack-table td { display: block; width: 100%; min-width: 0 !important; }
    .mobile-stack-table { white-space: normal; border-collapse: separate; }
    .mobile-stack-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }
    .mobile-stack-table tbody { display: grid; gap: .5rem; }
    .mobile-stack-table tr {
        overflow: hidden;
        border: 1px solid var(--line-soft);
        border-radius: 8px;
        background: rgba(39, 27, 19, .55);
    }
    .mobile-stack-table td {
        display: grid;
        grid-template-columns: minmax(86px, 38%) minmax(0, 1fr);
        align-items: start;
        gap: .5rem;
        padding: .48rem .55rem;
        border-bottom: 1px solid var(--line-soft);
        text-align: left !important;
        white-space: normal;
        word-break: break-word;
    }
    .mobile-stack-table td:last-child { border-bottom: 0; }
    .mobile-stack-table td::before {
        content: attr(data-mobile-label);
        color: var(--gold-soft);
        font-size: .68rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .05em;
    }
    .mobile-stack-table td[colspan] { grid-template-columns: 1fr; }
    .mobile-stack-table td[colspan]::before { display: none; }
    .table-wrap,
    .wiki-table-wrap { overflow: visible; }

    .market-overview-grid,
    .market-hot-grid,
    .market-slot-grid,
    .market-create-grid,
    .market-trend-grid,
    .combat-overview-grid,
    .combat-stat-grid,
    .combat-mastery-milestones,
    .house-built-grid { gap: .5rem; }
    .market-summary-card { padding: .6rem; }
    .market-summary-card h2 { font-size: 1.15rem; }
    .market-hot-item { min-height: 64px; padding: .55rem; }
    .market-item-icon { width: 38px; height: 38px; }
    .market-slot { min-height: 145px; padding: .7rem; }
    .market-order-stats { margin: .7rem 0 .35rem; }
    .combat-monster-header { grid-template-columns: 46px minmax(0,1fr) auto; gap: .55rem; }
    .combat-monster-icon { width: 46px; height: 46px; border-radius: 10px; }
    .combat-monster-icon img { width: 42px; height: 42px; }
    .combat-stat-grid { grid-template-columns: repeat(2, minmax(0,1fr)); margin: .55rem 0; }
    .combat-drop-list { margin: .55rem 0; }
    .combat-preview-stage { min-height: 250px !important; }

    .profile-header-card { padding: .7rem; }
    .profile-avatar-large { width: 58px; height: 58px; }
    .profile-character-showcase { gap: .6rem; }
    .profile-equipment-grid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: .4rem; }
    .profile-equipment-item { padding: .45rem; }

    .alert { padding: .55rem .65rem; margin-bottom: .55rem; }
}

@media (max-width: 560px) {
    .grid.two,
    .grid.three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .town-primary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
    .town-primary-grid .feature-card { min-height: 82px; }
    .town-primary-grid .feature-card h2 { font-size: .82rem; }
    .town-primary-grid .feature-card .btn,
    .town-primary-grid .feature-card a.btn { font-size: .66rem; padding: .35rem .25rem; }
    .compact-node-grid,
    .node-grid,
    .skill-grid,
    .inventory-grid,
    .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .fixed-bottom-bar .inventory-grid-shell { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .bottom-tab span:last-child { font-size: .66rem; }
    .page-head h1,
    .town-hero h1 { font-size: 1.4rem; }
}

@media (max-width: 370px) {
    .grid.two,
    .grid.three { grid-template-columns: 1fr; }
    .grid.three > .compact-card:nth-child(3):last-child { grid-column: auto; }
    .town-primary-grid { grid-template-columns: 1fr !important; }
    .town-primary-grid .feature-card { min-height: auto; }
    .compact-node-grid,
    .node-grid,
    .skill-grid,
    .inventory-grid,
    .shop-grid { grid-template-columns: 1fr !important; }
    .fixed-bottom-bar .inventory-grid-shell { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .town-hero { padding-right: 2.8rem; }
    .town-hero > .mobile-info-button { position: absolute; top: .05rem; right: .05rem; }
}

/* Phase 16.08.1: mobile topbar overflow and readability hotfix */
.top-task-actions-label,
.top-task-remaining-label {
    white-space: nowrap;
}

@media (max-width: 900px) {
    .game-topbar {
        min-width: 0;
        min-height: 62px;
        height: auto;
        overflow: hidden;
        grid-template-columns: 38px minmax(0, 1fr) auto;
        gap: .42rem;
        padding: .32rem .48rem;
    }
    .topbar-game-logo,
    .topbar-center,
    .top-task-row,
    .top-task-stack,
    .tick-counter,
    .top-task-remaining,
    .topbar-right {
        min-width: 0;
    }
    .topbar-game-logo img {
        width: 36px !important;
        height: 36px !important;
        max-width: 36px !important;
    }
    .topbar-center {
        overflow: hidden;
        gap: .16rem;
    }
    .top-task-name {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: .76rem;
        line-height: 1.05;
    }
    .top-task-row {
        display: block !important;
        width: 100%;
    }
    .top-task-stack {
        width: 100%;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: auto 4px;
        align-items: center;
        column-gap: .42rem;
        row-gap: .2rem;
    }
    .tick-counter,
    .top-task-remaining {
        display: block;
        margin: 0;
        font-size: .66rem;
        line-height: 1;
        letter-spacing: 0;
        text-transform: none;
        white-space: nowrap;
    }
    .tick-counter {
        overflow: hidden;
        text-align: left;
        text-overflow: ellipsis;
    }
    .top-task-remaining {
        text-align: right;
    }
    .top-task-remaining::before {
        content: none;
    }
    .header-progress {
        grid-column: 1 / -1;
        width: 100%;
        height: 4px;
        margin: 0;
    }
    .topbar-right {
        display: flex;
        max-width: 118px;
        gap: .3rem;
        overflow: hidden;
        flex-wrap: nowrap;
    }
    .top-task-actions {
        flex: 0 0 auto;
        gap: .2rem;
    }
    .top-icon-btn {
        flex: 0 0 30px;
        width: 30px;
        min-width: 30px;
        height: 30px;
        font-size: .82rem;
    }
    .resource-bar {
        min-width: 0;
        max-width: 78px;
        overflow: hidden;
        gap: .2rem;
        font-size: .68rem;
    }
    .resource-bar .resource-item:first-child {
        min-width: 0;
        max-width: 78px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

@media (max-width: 640px) {
    .game-topbar {
        grid-template-columns: 36px minmax(0, 1fr) 30px;
    }
    .topbar-right {
        width: 30px;
        max-width: 30px;
        overflow: visible;
    }
    .topbar-right .resource-bar {
        display: none !important;
    }
    .top-task-actions {
        width: 30px;
        overflow: hidden;
    }
    .top-task-actions .top-icon-btn {
        width: 30px;
        min-width: 30px;
    }
}

@media (max-width: 440px) {
    .game-topbar {
        min-height: 58px;
        grid-template-columns: 32px minmax(0, 1fr) 28px;
        gap: .32rem;
        padding: .28rem .34rem;
    }
    .topbar-game-logo img {
        width: 31px !important;
        height: 31px !important;
        max-width: 31px !important;
    }
    .top-task-name {
        font-size: .7rem;
    }
    .top-task-stack {
        column-gap: .25rem;
    }
    .tick-counter,
    .top-task-remaining {
        font-size: .61rem;
    }
    .top-task-actions-label {
        font-size: 0;
    }
    .top-task-actions-label::after {
        content: " act.";
        font-size: .61rem;
    }
    .top-task-remaining-label {
        display: none;
    }
    .top-task-remaining::before {
        content: "◷ ";
        color: var(--muted);
    }
    .topbar-right,
    .top-task-actions,
    .top-icon-btn,
    .top-task-actions .top-icon-btn {
        width: 28px;
        min-width: 28px;
        max-width: 28px;
        height: 28px;
    }
}

@media (max-width: 350px) {
    .game-topbar {
        grid-template-columns: 29px minmax(0, 1fr) 26px;
        gap: .25rem;
        padding-left: .26rem;
        padding-right: .26rem;
    }
    .topbar-game-logo img {
        width: 28px !important;
        height: 28px !important;
        max-width: 28px !important;
    }
    .top-task-name { font-size: .68rem; }
    .topbar-right,
    .top-task-actions,
    .top-icon-btn,
    .top-task-actions .top-icon-btn {
        width: 26px;
        min-width: 26px;
        max-width: 26px;
        height: 26px;
    }
}

@media (max-width: 900px) {
    .topbar-game-logo {
        grid-column: 1;
        grid-row: 1;
    }
    .topbar-center {
        grid-column: 2;
        grid-row: 1;
    }
    .topbar-right {
        grid-column: 3;
        grid-row: 1;
    }
    .topbar-right .top-task-actions,
    .topbar-right .resource-bar {
        grid-column: auto;
        grid-row: auto;
    }
}

/* Phase 16.08.2: restore character, currencies and direct task controls in the mobile topbar */
@media (max-width: 900px) {
    html { scroll-padding-top: 90px; }

    .game-topbar {
        min-height: 82px;
        height: auto;
        grid-template-columns: 34px minmax(68px, .72fr) minmax(0, 1.45fr) auto;
        grid-template-rows: minmax(46px, auto) 24px;
        align-items: center;
        column-gap: .38rem;
        row-gap: .18rem;
        padding: .3rem .45rem .28rem;
        overflow: hidden;
    }

    .topbar-game-logo {
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
    }
    .topbar-game-logo img {
        width: 32px !important;
        height: 32px !important;
        max-width: 32px !important;
    }

    .game-topbar .topbar-character {
        display: flex !important;
        grid-column: 2;
        grid-row: 1;
        align-items: center;
        gap: .3rem;
        min-width: 0;
        overflow: hidden;
    }
    .game-topbar .topbar-character .avatar-medallion {
        display: grid !important;
        place-items: center;
        flex: 0 0 26px;
        width: 26px;
        height: 26px;
        min-width: 26px;
        font-size: .7rem;
    }
    .topbar-character-copy,
    .topbar-character-name,
    .topbar-character-name a {
        min-width: 0;
        max-width: 100%;
    }
    .topbar-account-line { display: none !important; }
    .game-topbar .topbar-character-name {
        display: block !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: .7rem;
        line-height: 1.1;
    }
    .topbar-character-label { display: none; }
    .topbar-character-name a {
        display: block;
        overflow: hidden;
        color: var(--gold-soft);
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .topbar-center {
        grid-column: 3;
        grid-row: 1;
        align-self: center;
        min-width: 0;
        overflow: hidden;
    }

    .topbar-right {
        display: contents !important;
        width: auto !important;
        max-width: none !important;
        overflow: visible !important;
    }
    .topbar-right .top-task-actions {
        grid-column: 4;
        grid-row: 1;
        display: flex !important;
        align-items: center;
        justify-content: flex-end;
        gap: .18rem;
        width: auto !important;
        max-width: none !important;
        overflow: visible !important;
    }
    .topbar-right .top-task-actions form {
        display: block !important;
        margin: 0;
    }
    .topbar-right .top-icon-btn,
    .topbar-right .top-task-actions .top-icon-btn {
        display: inline-grid;
        place-items: center;
        flex: 0 0 28px;
        width: 28px;
        min-width: 28px;
        max-width: 28px;
        height: 28px;
        padding: 0;
        border-radius: 8px;
        font-size: .85rem;
        line-height: 1;
    }
    .task-restart-btn {
        border-color: rgba(117, 190, 101, .7);
        color: #c8f3b7;
    }
    .task-cancel-btn {
        border-color: rgba(196, 79, 62, .8);
        color: #ffc0b5;
    }

    .game-topbar .resource-bar {
        grid-column: 1 / -1;
        grid-row: 2;
        display: flex !important;
        align-items: center;
        justify-content: flex-start;
        gap: .28rem;
        width: 100%;
        min-width: 0;
        max-width: none;
        height: 24px;
        overflow: hidden;
        font-size: .66rem;
    }
    .game-topbar .resource-bar .resource-item {
        display: none !important;
    }
    .game-topbar .resource-bar .resource-gold,
    .game-topbar .resource-bar .resource-tokens,
    .game-topbar .resource-bar .resource-level {
        display: inline-flex !important;
        align-items: center;
        gap: .2rem;
        min-width: 0;
        max-width: 34%;
        height: 22px;
        padding: .08rem .36rem;
        overflow: hidden;
        border: 1px solid rgba(188, 139, 73, .34);
        border-radius: 999px;
        background: rgba(35, 24, 17, .78);
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .game-topbar .resource-bar .resource-gold > span:last-child,
    .game-topbar .resource-bar .resource-tokens > span:last-child,
    .game-topbar .resource-bar .resource-level > span:last-child {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .game-topbar .resource-bar .logout-link { display: none !important; }
    .game-topbar .resource-bar .dot {
        flex: 0 0 7px;
        width: 7px;
        height: 7px;
    }
    .game-topbar .resource-bar .star {
        flex: 0 0 auto;
        font-size: .7rem;
    }
}

@media (max-width: 640px) {
    .game-topbar {
        grid-template-columns: 30px minmax(62px, .68fr) minmax(78px, 1.32fr) 58px;
        column-gap: .28rem;
        padding-left: .35rem;
        padding-right: .35rem;
    }
    .topbar-game-logo img {
        width: 29px !important;
        height: 29px !important;
        max-width: 29px !important;
    }
    .topbar-right .task-queue-btn { display: none !important; }
    .topbar-right .top-task-actions {
        width: 58px !important;
        gap: .14rem;
    }
    .topbar-right .top-icon-btn,
    .topbar-right .top-task-actions .top-icon-btn {
        flex-basis: 27px;
        width: 27px;
        min-width: 27px;
        max-width: 27px;
        height: 27px;
    }
    .top-task-actions-label,
    .top-task-remaining-label { display: none; }
    .game-topbar .resource-bar .resource-gold,
    .game-topbar .resource-bar .resource-tokens,
    .game-topbar .resource-bar .resource-level {
        max-width: calc(33.333% - .19rem);
        flex: 1 1 0;
        justify-content: center;
        padding-left: .25rem;
        padding-right: .25rem;
    }
}

@media (max-width: 370px) {
    .game-topbar {
        grid-template-columns: 28px minmax(56px, .6fr) minmax(70px, 1.4fr) 54px;
        column-gap: .22rem;
        padding-left: .28rem;
        padding-right: .28rem;
    }
    .topbar-game-logo img {
        width: 27px !important;
        height: 27px !important;
        max-width: 27px !important;
    }
    .game-topbar .topbar-character { gap: .2rem; }
    .game-topbar .topbar-character .avatar-medallion {
        flex-basis: 23px;
        width: 23px;
        min-width: 23px;
        height: 23px;
        font-size: .62rem;
    }
    .game-topbar .topbar-character-name,
    .top-task-name { font-size: .64rem; }
    .tick-counter,
    .top-task-remaining { font-size: .6rem; }
    .topbar-right .top-task-actions { width: 54px !important; }
    .topbar-right .top-icon-btn,
    .topbar-right .top-task-actions .top-icon-btn {
        flex-basis: 25px;
        width: 25px;
        min-width: 25px;
        max-width: 25px;
        height: 25px;
    }
    .game-topbar .resource-bar { gap: .18rem; font-size: .6rem; }
}

/* Phase 16.08.3 - recipe modal task controls visibility hotfix */
.recipe-task-form {
    display: block;
    width: 100%;
    margin-top: .75rem;
}
.task-output-planner {
    display: grid !important;
    gap: .6rem;
    width: 100%;
    padding: .72rem;
    border: 1px solid rgba(211, 154, 72, .34);
    border-radius: 10px;
    background: rgba(13, 9, 7, .52);
}
.task-output-label {
    display: grid;
    gap: .32rem;
    margin: 0;
    font-weight: 800;
    color: #f1ddba;
}
.task-output-label input {
    width: 100%;
    min-width: 0;
}
.task-output-summary,
.task-planner-blocked {
    margin: 0;
}
.task-output-planner .task-duration-presets {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .45rem;
    margin: 0;
}
.task-output-planner .task-duration-preset {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 0;
    width: 100%;
}
.task-output-planner .task-planner-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .45rem;
    margin: 0;
}
.task-output-planner .task-planner-actions:has(> :only-child) {
    grid-template-columns: 1fr;
}
.task-output-planner button[disabled] {
    opacity: .48;
    cursor: not-allowed;
}

@media (max-width: 900px) {
    .recipe-modal .recipe-task-form,
    .recipe-modal .task-output-planner,
    .recipe-modal .task-duration-presets,
    .recipe-modal .task-planner-actions,
    .recipe-modal .task-output-label,
    .recipe-modal [data-task-output-input] {
        visibility: visible !important;
        opacity: 1;
    }
    .recipe-modal .recipe-task-form,
    .recipe-modal .task-output-planner {
        display: grid !important;
    }
    .recipe-modal .task-duration-presets {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
    .recipe-modal .task-planner-actions {
        display: grid !important;
        position: sticky;
        bottom: calc(-.9rem - env(safe-area-inset-bottom, 0px));
        z-index: 6;
        margin: .15rem -.72rem -.72rem;
        padding: .65rem .72rem calc(.65rem + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid var(--line);
        background: rgba(18, 12, 9, .985);
    }
    .recipe-modal .task-planner-actions .btn {
        display: inline-flex !important;
        min-height: 44px;
        align-items: center;
        justify-content: center;
    }
}

/* Phase 16.09: shared survival controls and desktop character-panel clearance. */
.compact-survival-form { display: grid; gap: .55rem; margin-top: .7rem; }
.compact-survival-form label { display: grid; gap: .3rem; font-size: .72rem; color: var(--muted); }
.compact-survival-form select { width: 100%; min-width: 0; }
.compact-survival-form .compact-form-grid { gap: .45rem; }
.survival-stop-row { align-content: center; grid-template-columns: auto 1fr !important; align-items: center; padding-top: 1.15rem; }
.survival-stop-row input { width: auto; }
.compact-alert { margin: .7rem 0; padding: .55rem .7rem; font-size: .72rem; }
.inventory-eat-form { border-color: rgba(120, 195, 91, .3); background: rgba(70, 120, 45, .08); }

@media (min-width: 1201px) {
    /* The character column has its own scroll area, but the fixed desktop
       bottom panel overlays the viewport. Reserve scrollable space equal to
       the live panel height so Bonuses & resistances can always be brought
       fully above the bottom panel. */
    .character-visual-panel {
        padding-bottom: calc(var(--bottom-panel-height, 282px) + 28px);
        scroll-padding-bottom: calc(var(--bottom-panel-height, 282px) + 28px);
    }
    body.bottom-collapsed .character-visual-panel {
        padding-bottom: 78px;
        scroll-padding-bottom: 78px;
    }
}

/* Phase 16.10: combat tactics, affinities, momentum and bounty contracts. */
.combat-affinity-row{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center;margin:.65rem 0}.combat-affinity-row small{flex-basis:100%;color:var(--muted)}
.combat-affinity-chip{display:inline-flex;align-items:center;border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:.25rem .55rem;font-size:.78rem;font-weight:700;background:rgba(255,255,255,.045)}
.combat-affinity-chip.weakness{border-color:rgba(93,213,132,.45);color:#a7efbd;background:rgba(55,151,88,.14)}
.combat-affinity-chip.resistance{border-color:rgba(229,116,116,.4);color:#ffc0c0;background:rgba(161,55,55,.14)}
.combat-contract-board{overflow:hidden}.combat-contract-offers{align-items:stretch}.combat-contract-card{display:flex;flex-direction:column;gap:.65rem;padding:1rem;border:1px solid rgba(255,255,255,.1);border-radius:14px;background:linear-gradient(145deg,rgba(36,27,20,.9),rgba(18,15,13,.86))}.combat-contract-card.active{border-color:rgba(215,169,79,.5);box-shadow:inset 0 0 0 1px rgba(215,169,79,.1)}
.combat-contract-card h3,.combat-contract-card p{margin:0}.combat-contract-reward{display:flex;flex-wrap:wrap;gap:.45rem}.combat-contract-reward span{padding:.28rem .55rem;border-radius:8px;background:rgba(215,169,79,.1);color:#f0cf86;font-size:.82rem;font-weight:700}.combat-contract-progress,.combat-special-energy{height:8px;border-radius:999px;overflow:hidden;background:rgba(255,255,255,.08)}.combat-contract-progress span,.combat-special-energy span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#987136,#e4ba66)}
.combat-contract-streak{display:grid;grid-template-columns:auto auto;gap:.1rem .55rem;align-items:center;text-align:right}.combat-contract-streak span{color:var(--muted);font-size:.8rem}.combat-contract-streak strong{font-size:1.55rem;color:#efcb7c}.combat-contract-streak small{grid-column:1/-1;color:var(--muted)}
.combat-momentum-card .stat-line strong{color:#efcb7c}.combat-special-energy{width:min(260px,100%);margin-top:.4rem}.compact-task-card .combat-special-energy+small{display:block;margin-top:.25rem;color:var(--muted)}
@media(max-width:700px){.combat-contract-streak{text-align:left}.combat-contract-board .section-title-row{align-items:flex-start}.combat-contract-reward{justify-content:flex-start}.combat-affinity-row small{font-size:.75rem}.combat-start-form label select{max-width:100%}}


/* Phase 16.11: Town Discord callout */
.town-discord-banner{display:grid;grid-template-columns:46px minmax(0,1fr) auto;align-items:center;gap:13px;margin:12px 0 18px;padding:12px 15px;border:1px solid rgba(145,151,255,.35);border-radius:14px;background:linear-gradient(135deg,rgba(88,101,242,.2),rgba(25,30,66,.76));color:#f4f5ff;text-decoration:none;box-shadow:0 10px 30px rgba(32,38,112,.17)}
.town-discord-banner:hover{border-color:rgba(168,173,255,.7);transform:translateY(-1px)}
.town-discord-logo{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:#5865f2;color:#fff}.town-discord-logo svg{width:27px;height:27px}.town-discord-banner strong{display:block;font-size:.94rem}.town-discord-banner small{display:block;margin-top:2px;color:rgba(238,240,255,.72)}.town-discord-arrow{font-size:1.35rem;font-weight:900}
@media(max-width:600px){.town-discord-banner{grid-template-columns:38px minmax(0,1fr) auto;padding:10px 12px}.town-discord-logo{width:36px;height:36px}.town-discord-logo svg{width:23px;height:23px}.town-discord-banner small{font-size:.68rem}}

/* Phase 16.11: compact zone combat cards and attack modal */
.combat-monster-grid-compact{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:start}
.combat-monster-grid-compact .combat-monster-card{padding:12px;display:grid;gap:9px}
.combat-monster-grid-compact .combat-monster-header{grid-template-columns:46px minmax(0,1fr) auto;gap:9px}
.combat-monster-grid-compact .combat-monster-icon{width:44px;height:44px;border-radius:12px}.combat-monster-grid-compact .combat-monster-icon img{width:40px;height:40px}
.combat-monster-grid-compact .combat-monster-header h3{font-size:.95rem;margin:1px 0}.combat-monster-grid-compact .combat-monster-header .small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:2px 0 0;font-size:.68rem}
.combat-monster-grid-compact .combat-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;margin:2px 0}.combat-monster-grid-compact .combat-stat-grid span{padding:6px}
.combat-monster-grid-compact .combat-affinity-row{display:flex;flex-wrap:wrap;gap:5px}.combat-monster-grid-compact .combat-affinity-row small{display:none}
.combat-monster-grid-compact .combat-drop-list{max-height:54px;overflow:hidden;margin:2px 0}.combat-monster-grid-compact .combat-start-form-modal-source{display:none!important}
.combat-open-attack-modal{margin-top:2px}
.combat-attack-dialog{width:min(760px,calc(100vw - 24px));max-height:92vh;padding:0;border:1px solid rgba(115,226,157,.32);border-radius:18px;background:#101713;color:var(--text);box-shadow:0 30px 90px rgba(0,0,0,.65)}
.combat-attack-dialog::backdrop{background:rgba(3,7,5,.78);backdrop-filter:blur(5px)}
.combat-attack-dialog-shell{display:grid;max-height:92vh;overflow:auto}.combat-attack-dialog-head{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;gap:16px;align-items:center;padding:15px 17px;background:rgba(13,21,17,.96);border-bottom:1px solid rgba(255,255,255,.07)}
.combat-attack-dialog-head h2{margin:0}.combat-dialog-close{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:#fff;font-size:1.4rem;cursor:pointer}
.combat-dialog-monster-summary{display:flex;flex-wrap:wrap;gap:7px;padding:12px 17px;border-bottom:1px solid rgba(255,255,255,.06)}.combat-dialog-monster-summary strong{width:100%;font-size:1.05rem}.combat-dialog-monster-summary span{padding:4px 8px;border-radius:999px;background:rgba(86,194,126,.1);font-size:.7rem}.combat-dialog-monster-summary p{width:100%;margin:2px 0 0;color:var(--muted);font-size:.78rem}
.combat-dialog-form-host{padding:16px 17px 20px}.combat-start-form-dialog{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.combat-start-form-dialog>label{display:grid;gap:5px;font-size:.73rem;font-weight:700;color:var(--muted)}.combat-start-form-dialog .combat-form-row,.combat-start-form-dialog>p,.combat-start-form-dialog>.check-row,.combat-start-form-dialog>button{grid-column:1/-1}
@media(max-width:1050px){.combat-monster-grid-compact{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){.combat-monster-grid-compact{grid-template-columns:1fr}.combat-start-form-dialog{grid-template-columns:1fr}.combat-start-form-dialog>*{grid-column:1!important}}

/* Phase 16.11.2 Hunting slot selection */
.hunting-slot-selector{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:.55rem;margin:.55rem 0 .75rem}.hunting-slot-choice{display:block;cursor:pointer}.hunting-slot-choice input{position:absolute;opacity:0;pointer-events:none}.hunting-slot-choice span{display:flex;align-items:center;justify-content:center;min-height:42px;padding:.55rem .7rem;border:1px solid rgba(190,157,86,.42);border-radius:.6rem;background:rgba(30,24,17,.72);font-weight:700}.hunting-slot-choice input:checked+span{border-color:#e3bd62;background:rgba(133,94,32,.48);box-shadow:0 0 0 2px rgba(227,189,98,.15)}.hunting-slot-choice input:focus-visible+span{outline:2px solid #f3d98d;outline-offset:2px}

/* Phase 16.12: expanded Achievement Hall */
.achievement-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.4rem;
    padding: 1.4rem 1.5rem;
    border: 1px solid rgba(224, 178, 88, .58);
    border-radius: 18px;
    background:
        radial-gradient(circle at 88% 20%, rgba(244, 194, 78, .18), transparent 28%),
        linear-gradient(145deg, rgba(61, 38, 18, .98), rgba(24, 16, 11, .98));
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.035), 0 14px 40px rgba(0,0,0,.22);
}
.achievement-hero h1 { margin: .1rem 0 .45rem; }
.achievement-hero p { max-width: 760px; margin: 0; }
.achievement-hero-emblem {
    width: 96px;
    height: 96px;
    display: grid;
    place-items: center;
    font-size: 3.6rem;
    border: 1px solid rgba(238,191,95,.55);
    border-radius: 22px;
    background: rgba(255,255,255,.045);
    box-shadow: inset 0 0 28px rgba(239,188,74,.12);
}
.achievement-overall-progress { margin-top: 1rem; max-width: 620px; }
.achievement-overall-progress > div:first-child,
.achievement-progress-block > div:first-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .35rem;
    color: #d8c39f;
    font-size: .82rem;
}
.achievement-progress-track {
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(0,0,0,.42);
    border: 1px solid rgba(224,178,88,.2);
}
.achievement-progress-track > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #b66a2d, #f0c35e);
    box-shadow: 0 0 12px rgba(240,195,94,.28);
}
.achievement-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .8rem;
}
.achievement-summary-card {
    min-width: 0;
    padding: .95rem 1rem;
    border: 1px solid rgba(214,166,78,.32);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018));
}
.achievement-summary-card span,
.achievement-summary-card small { display: block; color: #bfa98a; }
.achievement-summary-card strong { display: block; margin: .12rem 0; font-size: 1.55rem; color: #f1d89f; }
.achievement-next-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}
.achievement-next-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .75rem;
    align-items: center;
    padding: .75rem;
    border: 1px solid rgba(214,166,78,.28);
    border-radius: 13px;
    background: rgba(255,255,255,.025);
}
.achievement-next-card h3 { margin: 0; font-size: .98rem; }
.achievement-next-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: rgba(214,166,78,.12);
    font-size: 1.45rem;
}
.achievement-category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: .65rem;
}
.achievement-category-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .65rem;
    width: 100%;
    padding: .72rem .8rem;
    border: 1px solid rgba(214,166,78,.26);
    border-radius: 12px;
    background: rgba(255,255,255,.025);
    color: inherit;
    text-align: left;
    cursor: pointer;
}
.achievement-category-card:hover { border-color: rgba(235,190,94,.62); background: rgba(235,190,94,.055); }
.achievement-category-card span:nth-child(2) { min-width: 0; }
.achievement-category-card strong,
.achievement-category-card small { display: block; }
.achievement-category-card small { color: #a99578; margin-top: .12rem; }
.achievement-category-icon { font-size: 1.35rem; }
.achievement-category-percent { color: #e8c67f; font-weight: 800; }
.achievement-recent-list { display: grid; gap: .5rem; }
.achievement-recent-list article {
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto;
    align-items: center;
    gap: .65rem;
    padding: .6rem .7rem;
    border-radius: 11px;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(214,166,78,.2);
}
.achievement-recent-list article > span { font-size: 1.35rem; }
.achievement-recent-list strong,
.achievement-recent-list small { display: block; }
.achievement-recent-list small { color: #a99578; }
.achievement-recent-list b { color: #eac97f; white-space: nowrap; }
.achievement-scroll-card > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    cursor: pointer;
    list-style: none;
}
.achievement-scroll-card > summary::-webkit-details-marker { display: none; }
.achievement-scroll-card > summary span:first-child strong,
.achievement-scroll-card > summary span:first-child small { display: block; }
.achievement-scroll-card > summary span:last-child { color: #e7c486; font-size: .82rem; }
.achievement-scroll-body { padding-top: 1rem; }
.achievement-browser { padding-bottom: 1rem; }
.achievement-toolbar { display: grid; gap: .65rem; margin-bottom: .9rem; }
.achievement-search { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: .65rem; }
.achievement-search span { font-size: .78rem; color: #bba788; text-transform: uppercase; letter-spacing: .06em; }
.achievement-search input { width: 100%; min-width: 0; }
.achievement-filter-group { display: flex; gap: .4rem; flex-wrap: wrap; }
.achievement-filter-group button {
    border: 1px solid rgba(214,166,78,.28);
    border-radius: 999px;
    padding: .4rem .66rem;
    background: rgba(255,255,255,.025);
    color: #d8c39f;
    cursor: pointer;
    font-size: .78rem;
}
.achievement-filter-group button:hover,
.achievement-filter-group button.active { border-color: rgba(239,193,95,.78); background: rgba(239,193,95,.12); color: #ffe3a5; }
.achievement-grid-v2 {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: .7rem;
}
.achievement-card-v2 {
    min-width: 0;
    padding: .8rem;
    border: 1px solid rgba(214,166,78,.27);
    border-radius: 13px;
    background: linear-gradient(180deg, rgba(255,255,255,.032), rgba(255,255,255,.015));
}
.achievement-card-v2[hidden] { display: none !important; }
.achievement-card-v2.featured { box-shadow: inset 0 0 0 1px rgba(239,193,95,.12); }
.achievement-card-v2.status-unlocked { border-color: rgba(116,191,100,.5); background: linear-gradient(180deg, rgba(83,139,66,.09), rgba(255,255,255,.015)); }
.achievement-card-v2.status-secret { border-style: dashed; }
.achievement-card-v2.status-locked { opacity: .82; }
.achievement-card-v2-top {
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto;
    gap: .65rem;
    align-items: start;
}
.achievement-medal-v2 {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(214,166,78,.34);
    border-radius: 10px;
    background: rgba(214,166,78,.1);
    font-size: 1.25rem;
}
.achievement-card-v2-title { min-width: 0; }
.achievement-card-v2-title h3 { margin: 0 0 .25rem; font-size: .98rem; line-height: 1.2; }
.achievement-card-v2-title > div { display: flex; gap: .35rem; flex-wrap: wrap; }
.achievement-tier,
.achievement-points {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: .16rem .42rem;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .045em;
    text-transform: uppercase;
}
.achievement-tier { border: 1px solid rgba(214,166,78,.3); }
.achievement-points { color: #e9ca83; background: rgba(214,166,78,.09); }
.achievement-tier.tier-bronze { color: #d59865; }
.achievement-tier.tier-silver { color: #c8d0da; }
.achievement-tier.tier-gold { color: #f1ca62; }
.achievement-tier.tier-platinum { color: #a9e8f0; }
.achievement-tier.tier-mythic { color: #d6a9ff; }
.achievement-state-icon {
    min-width: 38px;
    text-align: right;
    color: #d9bf89;
    font-weight: 800;
    font-size: .76rem;
}
.achievement-card-v2 > p { margin: .55rem 0; min-height: 2.5em; color: #d2c0a3; font-size: .82rem; line-height: 1.4; }
.achievement-progress-block { margin: .55rem 0; }
.achievement-card-v2-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .55rem;
    margin-top: .62rem;
}
.achievement-reward {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #b9a587;
    font-size: .72rem;
    text-align: right;
}
.achievement-unlocked-date { display: block; margin-top: .48rem; color: #8fb889; }
.achievement-empty-state { padding: 1.2rem; text-align: center; color: #baa88b; }

@media (max-width: 980px) {
    .achievement-summary-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 720px) {
    .achievement-hero { grid-template-columns: minmax(0,1fr); padding: 1rem; }
    .achievement-hero-emblem { display: none; }
    .achievement-summary-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: .55rem; }
    .achievement-summary-card { padding: .72rem; }
    .achievement-summary-card strong { font-size: 1.25rem; }
    .achievement-next-grid { grid-template-columns: 1fr; }
    .achievement-category-grid { grid-template-columns: 1fr 1fr; }
    .achievement-grid-v2 { grid-template-columns: 1fr; }
    .achievement-category-filters { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .25rem; scrollbar-width: thin; }
    .achievement-category-filters button { flex: 0 0 auto; }
    .achievement-card-v2 > p { min-height: 0; }
}
@media (max-width: 430px) {
    .achievement-summary-grid,
    .achievement-category-grid { grid-template-columns: 1fr 1fr; }
    .achievement-summary-card small { font-size: .68rem; }
    .achievement-category-card { grid-template-columns: auto minmax(0,1fr); }
    .achievement-category-percent { grid-column: 2; }
    .achievement-card-v2-footer { align-items: flex-start; flex-direction: column; }
    .achievement-reward { width: 100%; text-align: left; }
}

/* Phase 16.13: named inventory sections and backpack expansion */
.inventory-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .8rem;
    margin-bottom: .9rem;
}
.inventory-summary-card {
    display: grid;
    gap: .25rem;
    min-height: 108px;
    align-content: center;
}
.inventory-summary-card > span,
.inventory-summary-card > small { color: var(--muted); }
.inventory-summary-card > strong { font-size: 1.25rem; color: var(--gold-soft); }
.inventory-section-shell { overflow: hidden; }
.inventory-section-tabs,
.bottom-inventory-section-tabs {
    display: flex;
    gap: .45rem;
    overflow-x: auto;
    padding: .15rem .1rem .65rem;
    scrollbar-width: thin;
}
.inventory-section-tab,
.bottom-inventory-section-tab {
    flex: 0 0 auto;
    display: grid;
    gap: .1rem;
    min-width: 126px;
    padding: .65rem .75rem;
    border: 1px solid rgba(198,143,72,.35);
    border-radius: 10px;
    background: rgba(22,15,11,.76);
    color: var(--text);
    text-decoration: none;
    text-align: left;
    cursor: pointer;
}
.inventory-section-tab span,
.bottom-inventory-section-tab span {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 700;
}
.inventory-section-tab small,
.bottom-inventory-section-tab small { color: var(--muted); }
.inventory-section-tab b {
    color: #9fd8ff;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .07em;
}
.inventory-section-tab.active,
.bottom-inventory-section-tab.active {
    border-color: var(--gold-soft);
    background: linear-gradient(180deg, rgba(107,71,39,.94), rgba(48,31,21,.95));
    box-shadow: 0 0 0 1px rgba(240,195,116,.12) inset, 0 8px 22px rgba(0,0,0,.2);
}
.inventory-section-header {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(260px, 380px);
    gap: 1rem;
    align-items: end;
    padding: .85rem 0 1rem;
    border-top: 1px solid rgba(198,143,72,.2);
}
.inventory-section-header h2 { margin-bottom: .25rem; }
.inventory-section-rename-form {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: .55rem;
    align-items: end;
    margin: 0;
    padding: .65rem;
    border: 1px solid rgba(198,143,72,.22);
    border-radius: 10px;
    background: rgba(0,0,0,.15);
}
.inventory-section-rename-form label { margin: 0; }
.inventory-section-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(105px, 1fr));
    gap: .65rem;
}
.inventory-section-slot {
    position: relative;
    min-height: 112px;
    border: 1px dashed rgba(198,143,72,.28);
    border-radius: 10px;
    background: rgba(9,7,6,.74);
    color: var(--text);
    overflow: hidden;
}
.inventory-section-slot.empty {
    display: grid;
    place-items: center;
    color: rgba(230,210,176,.34);
}
.inventory-section-slot.filled {
    appearance: none;
    display: grid;
    grid-template-rows: 54px minmax(0,1fr) auto;
    justify-items: center;
    gap: .25rem;
    padding: .65rem .45rem .5rem;
    border-style: solid;
    border-color: rgba(198,143,72,.46);
    background: linear-gradient(180deg, rgba(39,31,25,.98), rgba(13,11,9,.98));
    cursor: pointer;
}
.inventory-section-slot.filled:hover,
.inventory-section-slot.filled:focus-visible {
    border-color: var(--gold-soft);
    transform: translateY(-1px);
}
.inventory-section-slot-number {
    position: absolute;
    top: 5px;
    left: 7px;
    color: rgba(236,214,177,.45);
    font-size: .7rem;
}
.inventory-section-item-image { width: 54px; height: 54px; object-fit: contain; }
.inventory-section-item-name {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .78rem;
    font-weight: 700;
}
.inventory-section-slot > strong { color: var(--gold-soft); font-size: .8rem; }
.inventory-backpack-progression { margin-top: .9rem; }
.inventory-backpack-table-wrap { overflow-x: auto; }
.bottom-inventory-section-tabs { margin-bottom: .5rem; padding-bottom: .35rem; }
.bottom-inventory-section-tab {
    min-width: 112px;
    padding: .42rem .58rem;
    font: inherit;
}
.bottom-inventory-section-tab span { max-width: 120px; font-size: .78rem; }
.bottom-inventory-section-tab small { font-size: .68rem; }
.bottom-inventory-section-panel { display: none; }
.bottom-inventory-section-panel.active { display: block; }
.fixed-bottom-bar .section-inventory-grid {
    grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
    grid-auto-rows: 64px;
    max-height: 150px;
}
.modal-inventory-section-row {
    border: 1px solid var(--line-soft);
    background: rgba(0,0,0,.16);
    border-radius: 10px;
    padding: .7rem;
}
.modal-inventory-section-row label { margin: 0; }
.modal-inventory-section-row select { width: 100%; }

@media (max-width: 1050px) {
    .inventory-section-grid { grid-template-columns: repeat(4, minmax(96px, 1fr)); }
}
@media (max-width: 800px) {
    .inventory-summary-grid { grid-template-columns: 1fr; }
    .inventory-summary-card { min-height: 84px; }
    .inventory-section-header { grid-template-columns: 1fr; }
    .inventory-section-grid { grid-template-columns: repeat(3, minmax(82px, 1fr)); gap: .45rem; }
    .inventory-section-slot { min-height: 98px; }
    .inventory-section-slot.filled { grid-template-rows: 46px minmax(0,1fr) auto; }
    .inventory-section-item-image { width: 46px; height: 46px; }
}
@media (max-width: 430px) {
    .inventory-section-tab { min-width: 112px; padding: .55rem .65rem; }
    .inventory-section-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .inventory-section-slot { min-height: 92px; }
    .inventory-section-item-name { font-size: .68rem; }
    .inventory-section-rename-form { grid-template-columns: 1fr; }
}


/* Phase 16.13.3: inventory renaming and mobile bottom-panel fit */
.inventory-rename-status {
    grid-column: 1 / -1;
    min-height: 1em;
    color: var(--muted);
}
.inventory-rename-status.success { color: #a8e884; }
.inventory-rename-status.error { color: #ff9b8e; }
.bottom-inventory-rename-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: .45rem;
    margin: 0 0 .55rem;
    padding: .5rem;
    border: 1px solid rgba(198,143,72,.22);
    border-radius: 9px;
    background: rgba(0,0,0,.16);
}
.bottom-inventory-rename-form label {
    min-width: 0;
    margin: 0;
    gap: .2rem;
}
.bottom-inventory-rename-form label > span {
    color: var(--muted);
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.bottom-inventory-rename-form input { min-width: 0; }
.bottom-inventory-rename-form .btn { white-space: nowrap; }

@media (max-width: 900px) {
    :root { --mobile-bottom-open-height: min(72dvh, 590px); }
    .fixed-bottom-bar { height: var(--mobile-bottom-open-height); }
    body:not(.bottom-collapsed) .main-panel { padding-bottom: calc(var(--mobile-bottom-open-height) + 1rem); }
    .bottom-content {
        height: auto;
        max-height: calc(var(--mobile-bottom-open-height) - var(--mobile-dock-h));
        overflow: auto;
    }
    .bottom-panel {
        height: auto;
        min-height: 0;
        overflow: visible;
    }
    .bottom-panel[data-bottom-panel="chat"] { overflow: hidden; }
    .fixed-bottom-bar .section-inventory-grid {
        max-height: none;
        overflow: visible;
        align-content: start;
    }
    .bottom-inventory-section-panel.active { display: block; }
    .bottom-inventory-rename-form {
        grid-template-columns: minmax(0, 1fr) auto;
        padding: .4rem;
        margin-bottom: .4rem;
    }
    .bottom-inventory-rename-form input,
    .bottom-inventory-rename-form .btn { min-height: 38px; }
}

@media (max-width: 430px) {
    .bottom-inventory-rename-form { grid-template-columns: 1fr auto; }
    .bottom-inventory-rename-form label > span { display: none; }
    .inventory-section-rename-form { padding: .5rem; }
}

/* Phase 16.13.10 - Hunting slot capacity controls */
.hunting-slot-actions{margin:.25rem 0 .65rem;align-items:center}.hunting-slot-actions .btn{min-height:38px}.hunting-upgrade-card .warning-text{margin:.55rem 0 0}
@media (max-width:700px){.hunting-slot-actions{display:grid;grid-template-columns:1fr 1fr}.hunting-slot-actions .btn{width:100%;padding-inline:.45rem}.hunting-slot-selector{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Phase 16.14 - Player-Owned House */
.house-page-head { margin-bottom: .8rem; }
.house-summary-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.house-rules-card { overflow: hidden; }
.house-rule-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .7rem;
}
.house-rule-grid > div {
    display: grid;
    gap: .3rem;
    padding: .8rem;
    border: 1px solid rgba(198,143,72,.24);
    border-radius: 10px;
    background: rgba(0,0,0,.16);
}
.house-rule-grid b { color: var(--gold-soft); }
.house-rule-grid span { color: var(--muted); font-size: .82rem; line-height: 1.45; }
.house-map-card { overflow: hidden; }
.house-map-heading { align-items: center; }
.house-floor-tabs { display: flex; flex-wrap: wrap; gap: .45rem; justify-content: flex-end; }
.house-floor-tabs .disabled { opacity: .52; pointer-events: none; }
.house-grid {
    --house-grid-size: 5;
    display: grid;
    grid-template-columns: repeat(var(--house-grid-size), minmax(0, 1fr));
    gap: .55rem;
    max-width: 860px;
    margin: 1rem auto 0;
    padding: 1rem;
    border: 1px solid rgba(198,143,72,.3);
    border-radius: 14px;
    background:
        linear-gradient(rgba(91,63,37,.13) 1px, transparent 1px),
        linear-gradient(90deg, rgba(91,63,37,.13) 1px, transparent 1px),
        radial-gradient(circle at 50% 40%, rgba(111,76,47,.2), rgba(0,0,0,.22));
    background-size: 20px 20px, 20px 20px, auto;
}
.house-grid-cell {
    position: relative;
    display: grid;
    grid-template-rows: auto auto auto 1fr;
    align-content: center;
    justify-items: center;
    gap: .22rem;
    aspect-ratio: 1;
    min-width: 0;
    padding: .5rem;
    border: 1px solid rgba(198,143,72,.35);
    border-radius: 10px;
    color: var(--text);
    background: rgba(26,18,13,.78);
    font: inherit;
    text-align: center;
    cursor: pointer;
    overflow: hidden;
    transition: transform .16s ease, border-color .16s ease, background .16s ease;
}
.house-grid-cell:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--gold); background: rgba(62,41,25,.9); }
.house-grid-cell:disabled { cursor: not-allowed; opacity: .36; }
.house-grid-cell.empty.connected { border-style: dashed; background: rgba(77,107,55,.13); }
.house-grid-cell.empty.disconnected { border-style: dotted; }
.house-grid-cell.occupied { box-shadow: inset 0 0 0 1px rgba(255,227,158,.08); }
.house-grid-cell.occupied.entrance { background: linear-gradient(145deg, rgba(111,76,47,.62), rgba(34,23,16,.9)); }
.house-grid-cell.occupied.chapel { background: linear-gradient(145deg, rgba(103,87,129,.46), rgba(34,23,35,.9)); }
.house-grid-cell.occupied.workshop { background: linear-gradient(145deg, rgba(111,76,47,.5), rgba(35,28,20,.92)); }
.house-grid-cell.occupied.kitchen { background: linear-gradient(145deg, rgba(139,71,37,.42), rgba(40,24,17,.92)); }
.house-grid-cell.occupied.garden { background: linear-gradient(145deg, rgba(69,102,54,.48), rgba(25,36,22,.92)); }
.house-grid-cell.occupied.stairs { background: linear-gradient(145deg, rgba(93,86,74,.5), rgba(30,27,23,.92)); }
.house-grid-cell.building { animation: house-build-pulse 2.2s ease-in-out infinite; }
@keyframes house-build-pulse { 0%,100% { box-shadow: inset 0 0 0 1px rgba(255,198,83,.08); } 50% { box-shadow: inset 0 0 0 2px rgba(255,198,83,.32), 0 0 18px rgba(255,180,65,.12); } }
.house-room-symbol { font-size: 1.5rem; line-height: 1; color: var(--gold-soft); }
.house-grid-cell b { max-width: 100%; font-size: .82rem; line-height: 1.12; }
.house-grid-cell small { color: var(--muted); font-size: .68rem; line-height: 1.2; }
.house-grid-cell em { color: #ffd584; font-size: .65rem; font-style: normal; }
.house-dialog {
    width: min(960px, calc(100vw - 2rem));
    max-height: min(88vh, 900px);
    padding: 1.15rem;
    border: 1px solid rgba(198,143,72,.52);
    border-radius: 14px;
    color: var(--text);
    background: linear-gradient(160deg, #2d2118, #17110d 72%);
    box-shadow: 0 24px 70px rgba(0,0,0,.72);
    overflow: auto;
}
.house-dialog::backdrop { background: rgba(4,3,2,.78); backdrop-filter: blur(3px); }
.house-dialog .item-modal-close { position: sticky; top: 0; float: right; z-index: 2; }
.house-room-option-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-top: .9rem; }
.house-room-option,
.house-build-option {
    display: grid;
    gap: .55rem;
    padding: .75rem;
    border: 1px solid rgba(198,143,72,.24);
    border-radius: 10px;
    background: rgba(0,0,0,.17);
}
.house-room-option.locked { opacity: .72; }
.house-build-option-head { display: grid; grid-template-columns: 48px minmax(0,1fr); align-items: center; gap: .65rem; }
.house-build-option-head img { width: 48px; height: 48px; object-fit: contain; }
.house-build-option-head > div { display: grid; gap: .15rem; min-width: 0; }
.house-build-option-head b { color: var(--gold-soft); }
.house-build-option-head small { color: var(--muted); }
.house-material-list { display: flex; flex-wrap: wrap; gap: .35rem; }
.house-material {
    display: grid;
    grid-template-columns: 24px minmax(0,1fr);
    grid-template-rows: auto auto;
    column-gap: .35rem;
    align-items: center;
    min-width: 145px;
    padding: .35rem .45rem;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 8px;
    background: rgba(0,0,0,.18);
}
.house-material img { grid-row: 1 / 3; width: 24px; height: 24px; object-fit: contain; }
.house-material b { font-size: .72rem; line-height: 1.2; }
.house-material small { font-size: .64rem; color: var(--muted); }
.house-material.enough { border-color: rgba(113,171,87,.28); }
.house-material.missing { border-color: rgba(207,85,67,.45); background: rgba(122,34,25,.13); }
.house-material.missing small { color: #ff9d8f; }
.house-blueprint-status { font-size: .74rem; font-weight: 700; }
.house-blueprint-status.owned { color: #a9e48d; }
.house-blueprint-status.missing { color: #ff9d8f; }
.house-bonus-line { margin: 0; color: #d7c28a; font-size: .76rem; line-height: 1.35; }
.house-furniture-slot-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-top: 1rem; }
.house-furniture-slot {
    display: grid;
    align-content: start;
    gap: .55rem;
    min-height: 160px;
    padding: .75rem;
    border: 1px solid rgba(198,143,72,.23);
    border-radius: 10px;
    background: rgba(0,0,0,.16);
}
.house-furniture-slot.empty { border-style: dashed; }
.house-slot-number { color: var(--muted); font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; }
.house-build-option-list { display: grid; gap: .65rem; }
.house-destroy-zone {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
    padding: .8rem;
    border: 1px solid rgba(205,74,57,.35);
    border-radius: 10px;
    background: rgba(105,27,20,.14);
}
.house-destroy-zone p { margin: .2rem 0 0; }
.house-blueprint-library { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .65rem; }
.house-blueprint-card { display: grid; grid-template-columns: 52px minmax(0,1fr); align-items: center; gap: .65rem; padding: .65rem; border: 1px solid rgba(198,143,72,.2); border-radius: 10px; background: rgba(0,0,0,.15); }
.house-blueprint-card img { width: 52px; height: 52px; object-fit: contain; }
.house-blueprint-card > div { display: grid; gap: .15rem; min-width: 0; }
.house-blueprint-card b { color: var(--gold-soft); }
.house-blueprint-card span { font-size: .75rem; }
.house-blueprint-card small { color: var(--muted); font-size: .68rem; }
.house-legacy-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .6rem; }
.house-legacy-grid article { display: grid; gap: .25rem; padding: .7rem; border: 1px solid rgba(198,143,72,.2); border-radius: 9px; background: rgba(0,0,0,.14); }
.house-legacy-grid span { color: var(--muted); font-size: .75rem; }

@media (max-width: 1050px) {
    .house-summary-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .house-rule-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .house-blueprint-library, .house-legacy-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 760px) {
    .house-map-heading { align-items: flex-start; }
    .house-floor-tabs { justify-content: flex-start; }
    .house-grid { gap: .32rem; padding: .5rem; }
    .house-grid-cell { padding: .3rem; border-radius: 7px; }
    .house-room-symbol { font-size: 1.15rem; }
    .house-grid-cell b { font-size: .65rem; }
    .house-grid-cell small { display: none; }
    .house-grid-cell em { font-size: .55rem; }
    .house-room-option-grid, .house-furniture-slot-grid { grid-template-columns: 1fr; }
    .house-dialog { width: 100vw; max-width: none; max-height: 92dvh; margin: auto 0 0; border-radius: 18px 18px 0 0; padding: .9rem; }
    .house-blueprint-library, .house-legacy-grid { grid-template-columns: 1fr; }
    .house-destroy-zone { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .house-summary-grid, .house-rule-grid { grid-template-columns: 1fr; }
    .house-grid-cell b { font-size: .58rem; }
    .house-grid-cell { min-height: 58px; aspect-ratio: auto; }
    .house-room-symbol { font-size: 1rem; }
    .house-build-option-head { grid-template-columns: 42px minmax(0,1fr); }
    .house-build-option-head img { width: 42px; height: 42px; }
    .house-material { min-width: 0; width: 100%; }
}

/* Phase 16.14 - Construction plot and player housing */
.construction-page-head{align-items:flex-end}.construction-summary-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.construction-help-card{overflow:hidden}.construction-step-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.construction-step-grid>div{display:grid;gap:5px;padding:12px;border:1px solid rgba(181,138,67,.26);border-radius:10px;background:linear-gradient(155deg,rgba(70,49,27,.58),rgba(16,12,9,.82))}.construction-step-grid strong{color:#f1d28b}.construction-step-grid span{color:#cdbb97;font-size:.84rem;line-height:1.4}.construction-floor-heading{align-items:flex-end;gap:12px}.construction-floor-tabs{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}.construction-floor-tabs .disabled{opacity:.48;pointer-events:none}.construction-plot-wrap{max-width:820px;margin:18px auto 4px;padding:12px;border:1px solid rgba(181,138,67,.32);border-radius:14px;background:radial-gradient(circle at 50% 48%,rgba(78,55,30,.52),rgba(10,8,6,.94));box-shadow:inset 0 0 24px rgba(0,0,0,.5)}.construction-plot{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;aspect-ratio:1/1}.construction-cell{position:relative;display:grid;align-content:center;justify-items:center;gap:4px;min-width:0;padding:8px;border:1px solid rgba(181,138,67,.28);border-radius:10px;background:linear-gradient(150deg,rgba(56,40,23,.78),rgba(15,11,8,.96));color:#e7d9ba;text-align:center;cursor:pointer;overflow:hidden;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}.construction-cell:hover:not(:disabled){transform:translateY(-2px);border-color:rgba(224,184,102,.72);box-shadow:0 8px 18px rgba(0,0,0,.28)}.construction-cell strong{display:block;width:100%;overflow:hidden;text-overflow:ellipsis;font-size:.78rem;line-height:1.15}.construction-cell small{font-size:.67rem;color:#aa9673}.construction-cell-icon{font-size:1.5rem;line-height:1}.construction-cell.empty{border-style:dashed;background:rgba(13,10,8,.54)}.construction-cell.empty.buildable{color:#d6f19a;border-color:rgba(135,213,59,.38)}.construction-cell.empty.blocked{opacity:.3;cursor:not-allowed}.construction-cell.built{border-color:rgba(135,213,59,.42);box-shadow:inset 0 0 0 1px rgba(135,213,59,.06)}.construction-cell.planned{border-color:rgba(86,183,225,.5);background:linear-gradient(150deg,rgba(35,64,76,.72),rgba(12,18,22,.96))}.construction-cell.starter{border-color:rgba(235,188,88,.7);box-shadow:inset 0 0 18px rgba(218,165,67,.13)}.construction-plot-note{text-align:center;margin-top:10px}.construction-blueprint-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.construction-blueprint-card{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:10px;padding:11px;border:1px solid rgba(181,138,67,.22);border-radius:10px;background:rgba(17,13,10,.78)}.construction-blueprint-card.owned{border-color:rgba(135,213,59,.38)}.construction-blueprint-card>div{display:grid;gap:3px;min-width:0}.construction-blueprint-card span,.construction-blueprint-card small{color:#ad9d81;font-size:.78rem}.construction-blueprint-card>b{color:#e8ce8d;font-size:.78rem;white-space:nowrap}.construction-build-room-modal,.construction-room-modal{width:min(900px,96vw)}.construction-room-choice-list,.construction-furniture-list{display:grid;gap:10px}.construction-room-choice{display:grid;gap:10px;padding:12px;border:1px solid rgba(181,138,67,.25);border-radius:11px;background:rgba(15,11,8,.74)}.construction-room-choice.ready{border-color:rgba(135,213,59,.38)}.construction-room-choice-head{display:grid;grid-template-columns:46px minmax(0,1fr) auto;gap:10px;align-items:center}.construction-room-choice-head>div{display:grid;gap:4px}.construction-room-choice-head span{color:#b7a88c;font-size:.82rem}.construction-room-choice-head>b{font-size:.78rem;color:#e6c97e;white-space:nowrap}.construction-room-choice-icon,.construction-room-title-icon{display:inline-grid;place-items:center;font-size:1.65rem}.construction-material-list{display:flex;gap:6px;flex-wrap:wrap}.construction-material-list span{padding:4px 7px;border-radius:999px;background:rgba(62,48,31,.78);font-size:.74rem;color:#cdbb97}.construction-material-list .enough{color:#b9e985;border:1px solid rgba(135,213,59,.22)}.construction-material-list .missing{color:#f2a19a;border:1px solid rgba(221,91,80,.28)}.construction-furniture-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px;border:1px solid rgba(181,138,67,.24);border-radius:10px;background:rgba(17,13,10,.72)}.construction-furniture-card>div:first-child{display:grid;gap:4px}.construction-furniture-card span,.construction-furniture-card small{color:#b9aa8c;font-size:.8rem}.construction-furniture-card.built{border-color:rgba(135,213,59,.36)}.construction-furniture-card.planned{border-color:rgba(86,183,225,.42)}.construction-furniture-card.available{grid-template-columns:minmax(0,1fr);align-items:stretch}.construction-option-footer{display:flex;justify-content:space-between;gap:12px;align-items:flex-end}.house-bonus-line{display:block;color:#aee96b!important}.construction-demolition-zone{display:flex;justify-content:space-between;gap:14px;align-items:center;margin-top:16px;padding:12px;border:1px solid rgba(197,77,64,.3);border-radius:10px;background:rgba(65,25,21,.2)}.construction-demolition-zone>div{display:grid;gap:4px}.construction-demolition-zone span,.construction-demolition-zone small{color:#c5a9a0;font-size:.8rem}
@media(max-width:1050px){.construction-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.construction-step-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.construction-blueprint-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.construction-page-head{align-items:stretch}.construction-page-head .button-row{width:100%;display:grid;grid-template-columns:1fr 1fr}.construction-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.construction-step-grid{grid-template-columns:1fr;gap:6px}.construction-floor-heading{align-items:stretch}.construction-floor-tabs{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px}.construction-floor-tabs .btn{flex:0 0 auto}.construction-plot-wrap{padding:7px;margin-top:12px}.construction-plot{gap:4px}.construction-cell{min-height:59px;padding:4px;border-radius:7px}.construction-cell-icon{font-size:1.15rem}.construction-cell strong{font-size:.62rem}.construction-cell small{font-size:.56rem}.construction-blueprint-grid{grid-template-columns:1fr}.construction-blueprint-card{grid-template-columns:38px minmax(0,1fr) auto;padding:8px}.construction-room-choice-head{grid-template-columns:36px minmax(0,1fr)}.construction-room-choice-head>b{grid-column:2}.construction-furniture-card{grid-template-columns:1fr}.construction-option-footer,.construction-demolition-zone{align-items:stretch;flex-direction:column}.construction-option-footer form,.construction-option-footer .btn,.construction-demolition-zone form,.construction-demolition-zone .btn{width:100%}}
@media(max-width:420px){.construction-summary-grid{grid-template-columns:1fr 1fr}.construction-cell strong{font-size:.56rem}.construction-cell small{display:none}.construction-cell{min-height:52px}.construction-blueprint-card>b{font-size:.68rem}.construction-room-choice{padding:9px}}

/* Phase 16.14 - Player-Owned House & Construction rebuild */
.house-summary-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.house-workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(270px,340px);gap:1rem;align-items:start}
.house-side-column{display:grid;gap:1rem;position:sticky;top:86px}
.house-heading-row{align-items:flex-start;gap:1rem}
.house-floor-tabs{display:flex;flex-wrap:wrap;gap:.45rem;margin:.85rem 0 .9rem}
.house-floor-tab{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:.48rem .85rem;border:1px solid rgba(207,157,78,.42);border-radius:9px;background:rgba(38,24,14,.66);color:var(--text);font-weight:700;text-decoration:none}
.house-floor-tab:hover,.house-floor-tab.active{border-color:#dfb363;background:linear-gradient(180deg,rgba(131,83,35,.9),rgba(67,40,20,.95));color:#fff0c2}
.house-floor-tab.locked{opacity:.48;cursor:not-allowed}
.house-plot-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.48rem;padding:.7rem;border:1px solid rgba(207,157,78,.32);border-radius:12px;background:radial-gradient(circle at 50% 45%,rgba(95,67,36,.23),rgba(10,7,5,.5)),repeating-linear-gradient(45deg,rgba(255,255,255,.018) 0 1px,transparent 1px 9px)}
.house-cell{position:relative;display:flex;min-width:0;min-height:104px;aspect-ratio:1/1;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;padding:.45rem;border:1px solid rgba(207,157,78,.36);border-radius:10px;background:linear-gradient(160deg,rgba(71,43,22,.9),rgba(27,18,12,.97));color:var(--text);text-align:center;overflow:hidden;cursor:pointer;box-shadow:inset 0 0 18px rgba(0,0,0,.28)}
.house-cell:hover:not(:disabled){transform:translateY(-1px);border-color:#e0b363;box-shadow:0 5px 14px rgba(0,0,0,.28),inset 0 0 18px rgba(0,0,0,.2)}
.house-cell strong{font-size:.78rem;line-height:1.1;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.house-cell small{font-size:.62rem;color:var(--muted);line-height:1.15}
.house-cell-icon{font-size:1.45rem;line-height:1}
.house-cell.empty{border-style:dashed;background:rgba(25,18,13,.58)}
.house-cell.empty.buildable{color:#f1d9a2;border-color:rgba(199,145,67,.48)}
.house-cell.empty.blocked{opacity:.25;cursor:not-allowed}
.house-cell.pending{background:linear-gradient(160deg,rgba(84,65,29,.92),rgba(36,27,14,.96));border-color:#c9a14e}
.house-cell.built:after{content:"";position:absolute;inset:4px;border:1px solid rgba(255,232,179,.1);border-radius:7px;pointer-events:none}
.house-cell.room-chapel{background:linear-gradient(160deg,rgba(79,70,92,.92),rgba(32,24,42,.97))}
.house-cell.room-garden{background:linear-gradient(160deg,rgba(45,81,46,.92),rgba(20,37,23,.97))}
.house-cell.room-workshop{background:linear-gradient(160deg,rgba(78,63,45,.94),rgba(33,27,21,.97))}
.house-cell.room-kitchen{background:linear-gradient(160deg,rgba(100,49,27,.93),rgba(42,22,15,.97))}
.house-cell.room-study,.house-cell.room-observatory{background:linear-gradient(160deg,rgba(49,60,94,.93),rgba(21,25,44,.97))}
.house-cell.room-gallery,.house-cell.room-trophy_hall{background:linear-gradient(160deg,rgba(92,65,44,.94),rgba(39,26,19,.97))}
.house-cell.room-stair_hall{background:linear-gradient(160deg,rgba(70,70,70,.94),rgba(30,30,30,.97))}
.house-room-modal,.house-build-modal{width:min(920px,calc(100vw - 2rem));max-height:min(88vh,850px);overflow:auto}
.house-modal-section{margin-top:1rem;padding-top:.8rem;border-top:1px solid rgba(207,157,78,.25)}
.house-blueprint-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}
.house-blueprint-card{display:flex;flex-direction:column;gap:.48rem;padding:.72rem;border:1px solid rgba(207,157,78,.28);border-radius:10px;background:rgba(18,13,9,.54)}
.house-blueprint-card.locked{opacity:.66}
.house-blueprint-card form{margin-top:auto}
.house-blueprint-card .btn{width:100%}
.house-blueprint-title{display:flex;align-items:center;gap:.6rem}
.house-blueprint-title>span{display:grid;place-items:center;flex:0 0 40px;width:40px;height:40px;border-radius:9px;background:rgba(117,76,34,.45);font-size:1.3rem}
.house-blueprint-title>div{display:flex;min-width:0;flex-direction:column;gap:.12rem}
.house-blueprint-title strong{font-size:.88rem}
.house-blueprint-title small{color:var(--muted);font-size:.67rem}
.house-material-list{display:flex;flex-wrap:wrap;gap:.3rem}
.house-material-list>span{display:inline-flex;gap:.22rem;align-items:center;padding:.25rem .4rem;border:1px solid rgba(207,157,78,.2);border-radius:6px;background:rgba(0,0,0,.18);font-size:.68rem}
.house-material-list>span.ok{color:#bddd91}
.house-material-list>span.missing{color:#ff9b8e;border-color:rgba(255,113,96,.35)}
.house-material-list small{opacity:.78}
.house-furniture-row{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.65rem 0;border-bottom:1px solid rgba(207,157,78,.18)}
.house-furniture-row>div{display:flex;min-width:0;flex-direction:column;gap:.15rem}
.house-furniture-row span,.house-furniture-row small{color:var(--muted);font-size:.7rem}
.house-furniture-row.pending{padding:.6rem;border:1px dashed rgba(207,157,78,.3);border-radius:8px;background:rgba(119,86,35,.12)}
.house-destroy-zone{margin-top:1.1rem;padding:.8rem;border:1px solid rgba(203,72,58,.38);border-radius:10px;background:rgba(89,28,22,.14)}
.house-destroy-zone h3{color:#ffb2a9}
.house-guide-list{display:grid;gap:.48rem;margin:.5rem 0 0;padding-left:1.25rem;color:var(--muted);font-size:.78rem;line-height:1.45}
.house-legacy-list{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.6rem}
.house-legacy-list span{padding:.3rem .45rem;border:1px solid rgba(207,157,78,.25);border-radius:7px;background:rgba(0,0,0,.18);font-size:.7rem}

@media(max-width:1100px){
    .house-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .house-workspace{grid-template-columns:1fr}
    .house-side-column{position:static;grid-template-columns:repeat(3,minmax(0,1fr))}
    .house-side-column .card:last-child:nth-child(4){grid-column:1/-1}
}
@media(max-width:760px){
    .house-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem}
    .house-plot-card{padding:.65rem}
    .house-heading-row{display:block}
    .house-heading-row .btn{margin-top:.55rem;width:100%}
    .house-floor-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.35rem}
    .house-floor-tab{min-height:36px;padding:.4rem .3rem;font-size:.72rem}
    .house-plot-grid{gap:.25rem;padding:.35rem;border-radius:9px}
    .house-cell{min-height:58px;padding:.2rem;border-radius:7px}
    .house-cell-icon{font-size:1.05rem}
    .house-cell strong{font-size:.55rem;line-height:1.05}
    .house-cell small{font-size:.48rem}
    .house-side-column{grid-template-columns:1fr}
    .house-blueprint-list{grid-template-columns:1fr}
    .house-room-modal,.house-build-modal{width:100%;max-height:92dvh}
    .house-furniture-row{align-items:flex-start;flex-direction:column}
    .house-furniture-row form,.house-furniture-row .btn{width:100%}
}
@media(max-width:390px){
    .house-summary-grid{grid-template-columns:1fr 1fr}
    .house-cell strong{font-size:.5rem}
    .house-cell small{display:none}
}

/* Phase 16.14 final Player-Owned House refinements */
.construction-cell.study,.construction-cell.observatory{background:linear-gradient(145deg,rgba(55,66,104,.48),rgba(24,27,45,.94))}
.construction-cell.gallery,.construction-cell.trophy_hall{background:linear-gradient(145deg,rgba(112,78,46,.48),rgba(39,27,18,.94))}
.construction-room-choice form,.construction-furniture-card.available form{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center;justify-content:space-between}
.construction-room-choice form small,.construction-furniture-card.available form small{flex:1 1 100%;line-height:1.35}
.construction-map-card{overflow:hidden}
.construction-room-modal h3{margin-top:1rem}
.construction-furniture-card form{margin:0}
@media(max-width:700px){
    .construction-room-choice form,.construction-furniture-card.available form{display:grid;grid-template-columns:1fr}
    .construction-room-choice form .btn,.construction-furniture-card.available form .btn{width:100%}
    .construction-build-room-modal,.construction-room-modal{width:100vw;max-width:none;max-height:92dvh;margin:auto 0 0;border-radius:18px 18px 0 0;padding:.9rem}
}

/* Phase 16.14.1: keep Construction blueprint icons and names in separate layout columns. */
.construction-blueprint-card > img,
.construction-room-choice-head > img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 46px;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    align-self: start;
}
.construction-blueprint-card > img {
    width: 44px;
    height: 44px;
}
.construction-room-choice-head > img {
    width: 46px;
    height: 46px;
}
.construction-blueprint-card > div,
.construction-room-choice-head > div {
    min-width: 0;
    overflow: hidden;
}
.construction-blueprint-card strong,
.construction-room-choice-head strong {
    display: block;
    min-width: 0;
    line-height: 1.25;
    overflow-wrap: anywhere;
    word-break: normal;
}
.construction-blueprint-card span,
.construction-blueprint-card small,
.construction-room-choice-head span,
.construction-room-choice-head small {
    min-width: 0;
    overflow-wrap: anywhere;
}
@media (max-width: 700px) {
    .construction-blueprint-card {
        grid-template-columns: 38px minmax(0, 1fr);
        align-items: start;
    }
    .construction-blueprint-card > img {
        width: 38px;
        height: 38px;
    }
    .construction-blueprint-card > b {
        grid-column: 2;
        justify-self: start;
        white-space: normal;
    }
    .construction-room-choice-head > img {
        width: 36px;
        height: 36px;
    }
}