.tavern-page {
    --tavern-red: #9d2929;
    --tavern-red-bright: #d84a3f;
    --tavern-gold: #d8ae58;
    --tavern-ink: #08090a;
    --tavern-line: rgba(216, 174, 88, 0.22);
    width: 100%;
    min-height: 660px;
    padding: 0;
    overflow: hidden;
    color: #e8e4dd;
    font-family: Cairo, sans-serif;
    background:
        linear-gradient(90deg, rgba(4, 5, 6, 0.98), rgba(12, 9, 9, 0.94) 52%, rgba(4, 5, 6, 0.98)),
        url('assets/ui/bg.png') center / cover fixed;
    border: 1px solid rgba(157, 41, 41, 0.55);
    box-shadow: inset 0 0 70px rgba(0, 0, 0, 0.78);
}

.tavern-hero {
    min-height: 132px;
    padding: 20px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    border-bottom: 1px solid rgba(157, 41, 41, 0.65);
    background: linear-gradient(90deg, rgba(18, 7, 7, 0.96), rgba(8, 9, 10, 0.92));
    position: relative;
}

.tavern-hero::after {
    content: '';
    position: absolute;
    inset-inline: 28px;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--tavern-gold), transparent);
    opacity: 0.55;
}

.tavern-keeper { display: flex; align-items: center; gap: 18px; min-width: 0; }
.tavern-keeper__portrait {
    width: 82px;
    height: 82px;
    object-fit: cover;
    border: 1px solid var(--tavern-gold);
    background: #050505;
    box-shadow: 0 0 0 5px rgba(157, 41, 41, 0.16), 0 12px 30px rgba(0, 0, 0, 0.65);
}
.tavern-keeper__eyebrow { color: var(--tavern-gold); font-size: 12px; font-weight: 800; }
.tavern-keeper h2 { margin: 2px 0 4px; color: #fff; font-size: 27px; letter-spacing: 0; }
.tavern-keeper p { margin: 0; color: #938f89; font-size: 13px; }

.tavern-tabs { display: flex; align-self: stretch; gap: 1px; background: rgba(255, 255, 255, 0.05); }
.tavern-tab {
    min-width: 150px;
    padding: 14px 18px;
    border: 0;
    border-bottom: 2px solid transparent;
    color: #928d86;
    background: #0b0c0d;
    font: 800 14px Cairo, sans-serif;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    transition: color 160ms ease, background 160ms ease, border-color 160ms ease;
}
.tavern-tab:hover { color: #fff; background: #141112; }
.tavern-tab.is-active { color: #fff; border-bottom-color: var(--tavern-red-bright); background: #181010; }
.tavern-tab__mark { color: var(--tavern-gold); font: 700 11px Arial, sans-serif; }

.tavern-section { padding: 22px 28px 28px; }
.tavern-board-summary {
    display: grid;
    grid-template-columns: minmax(250px, 1.25fr) minmax(190px, 0.75fr) minmax(240px, 1fr);
    gap: 1px;
    border: 1px solid var(--tavern-line);
    background: var(--tavern-line);
    margin-bottom: 18px;
}
.tavern-summary-block { min-height: 112px; padding: 16px 18px; background: rgba(8, 9, 10, 0.96); }
.tavern-summary-label { color: #817c74; font-size: 11px; font-weight: 800; }
.tavern-summary-value { display: block; margin-top: 4px; color: #fff; font-size: 22px; font-weight: 900; }
.tavern-summary-value.is-gold { color: var(--tavern-gold); direction: ltr; text-align: right; }
.tavern-summary-note { color: #7e7a74; font-size: 11px; margin-top: 6px; }
.tavern-countdown { direction: ltr; text-align: right; font-family: Arial, sans-serif; }

.tavern-bp-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 9px; }
.tavern-bp-row strong { color: #d9b96b; font-size: 13px; }
.tavern-bp-open {
    border: 1px solid #755c2c;
    padding: 5px 10px;
    color: #e7ca82;
    background: transparent;
    font: 700 11px Cairo, sans-serif;
    cursor: pointer;
}
.tavern-bp-open:hover { background: rgba(216, 174, 88, 0.1); border-color: var(--tavern-gold); }
.tavern-progress { height: 7px; margin-top: 10px; overflow: hidden; background: #171719; border: 1px solid #29272a; }
.tavern-progress > i { display: block; height: 100%; background: linear-gradient(90deg, #7d1f24, #d84a3f); box-shadow: 0 0 12px rgba(216, 74, 63, 0.5); transition: width 260ms ease; }

.tavern-milestones { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; margin-top: 10px; }
.tavern-milestone { height: 25px; display: grid; place-items: center; color: #5f5b56; background: #111214; border: 1px solid #272729; font-size: 11px; font-weight: 900; }
.tavern-milestone.is-done { color: #bfe4cb; border-color: #316b48; background: rgba(35, 101, 65, 0.2); }
.tavern-milestone.is-bonus { color: #a98b4d; border-color: #5d4926; }
.tavern-milestone.is-bonus.is-done { color: #f0d489; border-color: #b28a39; background: rgba(178, 138, 57, 0.15); }

.tavern-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 14px; }
.tavern-section-heading span { color: var(--tavern-red-bright); font-size: 11px; font-weight: 900; }
.tavern-section-heading h3 { margin: 2px 0 0; color: #fff; font-size: 20px; }
.tavern-section-heading p { max-width: 560px; margin: 0; color: #817d77; font-size: 12px; }

.tavern-contract-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.tavern-contract {
    min-height: 310px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    border: 1px solid #29282a;
    border-top: 2px solid #6d2327;
    background: linear-gradient(180deg, rgba(18, 18, 20, 0.98), rgba(7, 8, 9, 0.99));
}
.tavern-contract::before { content: attr(data-index); position: absolute; left: 10px; top: 8px; color: #353235; font: 900 34px Arial, sans-serif; }
.tavern-contract.is-elite { border-top-color: #b18a3a; }
.tavern-contract.is-ready { border-color: #3a8258; box-shadow: inset 0 0 24px rgba(40, 130, 78, 0.1); }
.tavern-contract.is-claimed { opacity: 0.62; filter: saturate(0.7); }
.tavern-contract__top { display: flex; align-items: center; gap: 10px; position: relative; z-index: 1; }
.tavern-contract__icon { width: 58px; height: 58px; object-fit: cover; background: #050505; border: 1px solid #4b3a2b; }
.tavern-contract__meta { min-width: 0; }
.tavern-contract__difficulty { color: #b88c4d; font-size: 10px; font-weight: 900; }
.tavern-contract__category { color: #706c66; font-size: 10px; }
.tavern-contract h4 { min-height: 50px; margin: 14px 0 5px; color: #f0eee9; font-size: 16px; line-height: 1.55; }
.tavern-contract__brief { min-height: 54px; margin: 0 0 12px; color: #817d77; font-size: 11px; line-height: 1.65; }
.tavern-contract__objective { padding-block: 9px; border-block: 1px solid #272527; color: #c9c5be; font-size: 12px; line-height: 1.55; }
.tavern-contract__count { display: flex; justify-content: space-between; margin-top: 9px; color: #88837c; font: 700 11px Arial, Cairo, sans-serif; }
.tavern-contract__count strong { color: #dfd9d0; }
.tavern-contract__rewards { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.tavern-reward-chip { padding: 4px 7px; color: #a9a49c; background: #121214; border: 1px solid #2d2b2d; font-size: 10px; font-weight: 800; }
.tavern-reward-chip.is-gold { color: #e2bf6b; border-color: #594522; }
.tavern-reward-chip.is-pass { color: #d69191; border-color: #64282b; }
.tavern-contract__action {
    width: 100%;
    min-height: 38px;
    margin-top: auto;
    border: 1px solid #5e2529;
    color: #e5ded7;
    background: #251113;
    font: 800 12px Cairo, sans-serif;
    cursor: pointer;
}
.tavern-contract__action:hover { border-color: var(--tavern-red-bright); background: #351618; }
.tavern-contract__action.is-claim { color: #d5f0de; border-color: #3a8258; background: #11281b; }
.tavern-contract__action:disabled { color: #70706d; border-color: #303033; background: #121214; cursor: default; }

.tavern-drinks-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tavern-drink { display: grid; grid-template-columns: 72px 1fr; gap: 14px; padding: 16px; border: 1px solid #312b27; background: rgba(8, 9, 10, 0.95); }
.tavern-drink img { width: 72px; height: 72px; object-fit: cover; background: #030303; border: 1px solid #604a32; }
.tavern-drink h4 { margin: 0; color: #e6c47b; font-size: 16px; }
.tavern-drink p { margin: 5px 0; color: #817c75; font-size: 11px; line-height: 1.55; }
.tavern-drink strong { color: #9fd5ac; font-size: 12px; }
.tavern-drink button { grid-column: 1 / -1; min-height: 38px; border: 1px solid #343236; color: #69666a; background: #121214; font: 800 12px Cairo, sans-serif; }

@media (max-width: 1180px) {
    .tavern-contract-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .tavern-drinks-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    .tavern-page { min-height: 0; }
    .tavern-hero { padding: 16px; align-items: stretch; flex-direction: column; }
    .tavern-keeper__portrait { width: 68px; height: 68px; }
    .tavern-keeper h2 { font-size: 21px; }
    .tavern-tabs { width: 100%; }
    .tavern-tab { min-width: 0; flex: 1; }
    .tavern-section { padding: 16px; }
    .tavern-board-summary { grid-template-columns: 1fr; }
    .tavern-summary-block { min-height: 0; }
    .tavern-contract-grid, .tavern-drinks-grid { grid-template-columns: 1fr; }
    .tavern-contract { min-height: 290px; }
    .tavern-section-heading { align-items: start; flex-direction: column; gap: 6px; }
}

.tavern-contract-toolbar {
    display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-bottom:18px;
}
.tavern-contract-toolbar > div {
    display:flex; flex-direction:column; gap:4px; min-width:0; padding:11px;
    border:1px solid #393031; border-radius:4px; background:#121112;
}
.tavern-contract-toolbar span { color:#a99489; font:700 11px Cairo,sans-serif; }
.tavern-contract-toolbar strong { color:#f2d28f; font:900 18px Cairo,sans-serif; }
.tavern-contract-toolbar small { color:#9c9690; font:600 11px Cairo,sans-serif; }
.tavern-contract-refresh { display:grid !important; grid-template-columns:1fr 1fr; align-items:center; }
.tavern-contract-refresh button {
    min-height:32px; padding:5px; border:1px solid #744130; border-radius:3px;
    background:#301816; color:#f2d6c2; font:800 11px Cairo,sans-serif; cursor:pointer;
}
.tavern-contract-refresh button:disabled { opacity:.45; cursor:not-allowed; }
.tavern-contract-refresh small { grid-column:1/-1; }
.tavern-contract--0 { border-top-color:#6a795d; }
.tavern-contract--1 { border-top-color:#ad7d43; }
.tavern-contract--2 { border-top-color:#b64f50; }
.tavern-contract.is-expired { opacity:.65; }
.tavern-contract__deadline { margin:8px 0; color:#b7a597; font:700 11px Cairo,sans-serif; }
.tavern-contract__link {
    width:100%; min-height:31px; margin-top:5px; border:1px solid #4e4440;
    background:#151313; color:#dbbe88; font:700 11px Cairo,sans-serif; cursor:pointer;
}
.tavern-accepted-heading { margin-top:22px; }
.tavern-empty { grid-column:1/-1; padding:24px; border:1px dashed #51403c; color:#b7a99d; text-align:center; }
@media (max-width:1100px) { .tavern-contract-toolbar { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:600px) { .tavern-contract-toolbar { grid-template-columns:1fr; } }

/* The keeper art spans the header's right side and fades into the dark left edge. */
.tavern-hero {
    min-height:105px; padding:15px 24px; isolation:isolate;
    background:#0a0909;
}
.tavern-hero::before {
    content:''; position:absolute; z-index:0; inset:0 0 0 auto; width:55%;
    background:url('assets/npc/tavernkeeper.png') center 44% / cover no-repeat;
    -webkit-mask-image:linear-gradient(to left,#000 0%,rgba(0,0,0,.75) 25%,transparent 100%);
    mask-image:linear-gradient(to left,#000 0%,rgba(0,0,0,.75) 25%,transparent 100%);
    opacity:.8;
}
.tavern-keeper { position:relative; z-index:1; }
.tavern-keeper h2 { font-size:23px; }
.tavern-keeper p { color:#cbc3b9; }
.tavern-board-top {
    display:flex; align-items:stretch; gap:8px; padding:7px 14px;
    border-bottom:1px solid #3c2926; background:#0d0d0e;
}
.tavern-board-top .tavern-tabs { flex:none; align-self:auto; }
.tavern-board-top .tavern-tab { min-width:125px; padding:7px 11px; font-size:12px; }
.tavern-board-top .tavern-contract-toolbar {
    flex:1; min-width:0; margin:0; grid-template-columns:repeat(3,minmax(0,1fr)) minmax(230px,1.5fr); gap:6px;
}
.tavern-board-top .tavern-contract-toolbar > div { min-height:58px; padding:6px 9px; gap:1px; }
.tavern-board-top .tavern-contract-toolbar strong { font-size:15px; line-height:1.25; }
.tavern-board-top .tavern-contract-toolbar small,
.tavern-board-top .tavern-contract-toolbar span { font-size:10px; }
.tavern-board-top .tavern-contract-refresh { gap:3px; }
.tavern-board-top .tavern-contract-refresh button { min-height:27px; font-size:10px; }
.tavern-section { padding:11px 15px 18px; }
.tavern-section-heading { margin-bottom:8px; }
.tavern-section-heading h3 { font-size:16px; }
.tavern-contract-grid { gap:7px; }
.tavern-contract { min-height:212px; padding:9px 10px; }
.tavern-contract::before { display:none; }
.tavern-contract__icon { width:42px; height:42px; }
.tavern-contract h4 { min-height:0; margin:7px 0 4px; font-size:14px; line-height:1.35; }
.tavern-contract__objective { padding-block:5px; font-size:11px; }
.tavern-contract__rewards { margin-top:6px; }
.tavern-reward-chip { padding:2px 5px; font-size:9px; }
.tavern-contract__action { min-height:31px; }
.tavern-contract__count { margin-top:5px; }
.tavern-progress { margin-top:5px; }
.tavern-contract__deadline { margin:5px 0; }
.tavern-accepted-heading { margin-top:14px; }
@media(max-width:1250px) {
    .tavern-board-top { flex-wrap:wrap; }
    .tavern-board-top .tavern-contract-toolbar { flex-basis:100%; }
    .tavern-board-top .tavern-tabs { width:100%; }
    .tavern-board-top .tavern-tab { flex:1; }
}
@media(max-width:700px) {
    .tavern-hero { min-height:100px; padding:12px 15px; }
    .tavern-hero::before { width:70%; }
    .tavern-keeper h2 { font-size:19px; }
    .tavern-keeper p { font-size:11px; }
    .tavern-board-top .tavern-contract-toolbar { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .tavern-contract { min-height:0; }
}

.tavern-hero {
    display:grid; grid-template-columns:minmax(250px,.75fr) minmax(0,1.65fr);
    align-items:start; gap:12px 20px; min-height:154px; padding:16px 20px 43px;
    background-image:linear-gradient(to right,#0a0909 0%,rgba(10,9,9,.5) 50%,rgba(10,9,9,0) 100%),url('assets/ui/tavern_contracts_header_v2.png');
    background-position:center,right 8%; background-size:100% 100%,auto 180%; background-repeat:no-repeat;
}
.tavern-hero::before { display:none; }
.tavern-hero::after { inset-inline:20px; }
.tavern-keeper { position:absolute; right:20px; bottom:14px; z-index:1; max-width:300px; }
.tavern-keeper__eyebrow { color:#f2cf8a; }
.tavern-keeper h2 { text-shadow:0 2px 8px #000; }
.tavern-keeper p { color:#e2d5c5; text-shadow:0 1px 5px #000; }
.tavern-hero #tavern-status-strip {
    grid-column:2; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)) minmax(210px,1.4fr);
    gap:4px; min-width:0; margin:0;
}
.tavern-hero #tavern-status-strip > div {
    min-height:64px; padding:6px 9px; gap:1px; border:1px solid rgba(175,138,95,.33);
    background:rgba(7,7,8,.7); backdrop-filter:blur(2px);
}
.tavern-hero #tavern-status-strip strong { font-size:15px; }
.tavern-hero #tavern-status-strip span,
.tavern-hero #tavern-status-strip small { font-size:10px; color:#c4b7a8; }
.tavern-hero #tavern-status-strip .tavern-contract-refresh { gap:3px; }
.tavern-hero #tavern-status-strip .tavern-contract-refresh button { min-height:28px; font-size:10px; }
.tavern-hero .tavern-tabs {
    position:absolute; right:auto; left:20px; bottom:0; z-index:2; height:33px;
    align-self:auto; background:rgba(6,6,7,.78);
}
.tavern-hero .tavern-tab { min-width:128px; padding:4px 11px; font-size:12px; background:rgba(9,9,10,.82); }
.tavern-contract--0 { --difficulty:#50c879; border-top-color:var(--difficulty); background:linear-gradient(180deg,rgba(35,84,54,.16),#090a0a 48%); }
.tavern-contract--1 { --difficulty:#58a9e4; border-top-color:var(--difficulty); background:linear-gradient(180deg,rgba(35,72,101,.18),#090a0a 48%); }
.tavern-contract--2 { --difficulty:#e65b59; border-top-color:var(--difficulty); background:linear-gradient(180deg,rgba(106,37,42,.19),#090a0a 48%); }
.tavern-contract--0,.tavern-contract--1,.tavern-contract--2 { border-right:2px solid var(--difficulty); }
.tavern-contract--0 .tavern-contract__difficulty,
.tavern-contract--1 .tavern-contract__difficulty,
.tavern-contract--2 .tavern-contract__difficulty { color:var(--difficulty); }
.tavern-contract--0 .tavern-contract__icon,
.tavern-contract--1 .tavern-contract__icon,
.tavern-contract--2 .tavern-contract__icon { border-color:var(--difficulty); }
@media(max-width:1280px) {
    .tavern-hero { grid-template-columns:minmax(210px,.65fr) minmax(0,1.6fr); min-height:190px; }
    .tavern-hero #tavern-status-strip { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:740px) {
    .tavern-hero { display:flex; flex-direction:column; min-height:0; padding:13px 12px 42px; background-size:100% 100%,auto 115%; background-position:center,right 8%; }
    .tavern-keeper { position:relative; right:auto; bottom:auto; order:1; margin-top:10px; margin-bottom:0; }
    .tavern-hero #tavern-status-strip { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .tavern-hero .tavern-tabs { left:12px; right:auto; }
    .tavern-hero .tavern-tab { min-width:0; padding:4px 9px; }
}