/* Shared presentation layer: browser, touch browser and the packaged app. */
@font-face { font-family: 'Valendor Cinzel'; src: url('assets/projectx/fonts/Cinzel-Variable.ttf') format('truetype'); font-style: normal; font-weight: 400 900; font-display: swap; }
:root { --font-display: 'Valendor Cinzel', Georgia, serif; --font-gothic: var(--font-display); --font-medieval: system-ui, sans-serif; --font-sans: system-ui, -apple-system, 'Segoe UI', sans-serif; }
button, a, input, select { -webkit-tap-highlight-color: transparent; }
.login-feedback { background: #3a3024; border: 1px solid #b39862; border-radius: 5px; padding: 14px; color: #f1e2bd; font-size: .85rem; line-height: 1.6; margin: 14px 0; }
.login-feedback[hidden], .connected-logins[hidden] { display: none; }
.connected-logins { background: #23362a; border: 1px solid #5e7052; padding: 18px; border-radius: 6px; margin-bottom: 16px; }
.connected-logins h3 { font: 600 1rem var(--font-sans); color: #e7d3a0; }
.connected-logins p { font-size: .82rem; line-height: 1.6; color: #c5d0ba; margin: 10px 0; }
.connected-logins > div { display: flex; flex-wrap: wrap; gap: 10px; }
.ambient-bg { background-image: linear-gradient(#10201870,#102018b0),url('assets/projectx/ui/campaign-map.jpg'); opacity: .3; filter: saturate(.6); }
.hub-card { max-width: 1080px; padding: 24px; border-color: #667056; }
.main-lobby-card { margin-top: 6px !important; }
.hub-user-greeting { min-height: 108px; padding: 20px !important; border: 1px solid #697353; border-radius: 5px; background: linear-gradient(90deg,#15251bf2 20%,#15251b80 70%,#15251b20),url('assets/projectx/ui/siege.png') right 39%/50% auto no-repeat; }
.hub-card .user-greeting-meta h2 { font: 500 clamp(1rem,2.3vw,1.4rem)/1.4 var(--font-display); }
.user-crest { background: #263b2b url('assets/ui/crest.svg') center/30px auto no-repeat; font-size: 0; }
.hub-card .lobby-tabs-bar { margin-top: 4px; }
.hub-card .gateway-footer { margin: 8px -24px -24px !important; }
.gateway-card .entry-hero { background: linear-gradient(#12201970,#122019e6),url('assets/projectx/ui/siege.png') center 37%/cover; }
.campaign-subtabs-bar .subtab-btn { min-height: 86px; position: relative; overflow: hidden; background: linear-gradient(90deg,#203127f5 30%,#20312770),url('assets/projectx/ui/campaign-map.jpg') center/cover; }
.campaign-subtabs-bar .subtab-btn[data-subtab=zombies] { background-image: linear-gradient(90deg,#203127f5 30%,#20312770),url('assets/projectx/ui/siege.png'); }
.campaign-subtabs-bar .subtab-btn[data-subtab=hordes] { background-image: linear-gradient(90deg,#203127f5 30%,#20312770),url('assets/projectx/ui/siege.png'); background-position: center,60% 60%; }
.campaign-subtabs-bar .subtab-btn.active { box-shadow: inset 0 -3px 0 #d9b86d; }
.section-title { flex-wrap: wrap; }
.battle-entry-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.battle-entry-actions .btn { min-height: 44px; }
.battle-entry-actions #quickJoinCasualBtn { flex: 1; min-width: 220px; }
.shop-circle-card .unit-portrait { width: 100%; height: 100%; margin: 0; object-fit: cover; object-position: center 25%; }
.shop-circle-card .unit-portrait[src$='.svg'] { object-fit: contain; padding: 4px 3px 13px; }
.shop-circle-card .price-tag { position: absolute; bottom: 0; left: 0; right: 0; background: #122319ed; }
.shop-circle-wrapper.is-unaffordable .price-tag { color: #d4b3a1; }
.shop-circle-wrapper .recruit-reason { color: #b8c8aa; font-size: .62rem; line-height: 1.4; min-height: 1.4em; text-align: center; }
.modal-overlay { padding: max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; height: 100dvh; background: #07110de8; }
.modal-overlay > .parchment-card { max-height: calc(100dvh - 32px); overflow-y: auto; background: #1b2b22; color: #e4e9d8; color-scheme: dark; }
#hordesCardDraftOverlay .draft-panel { width: min(760px,100%); max-width: 760px; padding: 26px; color: #e6e9da; color-scheme: dark; background: #1b2b22; border-color: #a28d57; }
.draft-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.draft-heading h3 { font: 500 clamp(1.3rem,3vw,1.8rem)/1.35 var(--font-display); color: #f1dfaf; margin: 4px 0; }
.draft-eyebrow { font-size: .72rem; letter-spacing: .08em; color: #b8c5aa; }
.draft-treasury { padding: 10px 15px; border: 1px solid #766b44; border-radius: 5px; background: #353b27; white-space: nowrap; text-align: right; }
.draft-treasury span { display: block; font-size: .63rem; color: #d1c9a5; margin-bottom: 4px; }
.draft-treasury strong { font-size: 1.25rem; color: #f2d18b; font-variant-numeric: tabular-nums; }
.draft-steps { list-style: none; display: grid; grid-template-columns: repeat(3,1fr); margin: 20px 0 12px; padding: 0; gap: 8px; }
.draft-steps li { border-bottom: 2px solid #40533e; color: #aabb9e; padding: 8px 0; font-size: .75rem; }
.draft-steps .is-current { color: #f2d592; border-color: #d5b56b; }
#hordesDraftHint { min-height: 2.6em; margin: 12px 0; font-size: .8rem; line-height: 1.55; color: #c2cfb6; }
#hordesCardsContainer .hordes-card { display: flex; flex-direction: column; gap: 10px; padding: 10px; border: 1px solid #59684c; border-radius: 7px; text-align: left; cursor: default; background: #263a2b; transform: none; }
#hordesCardsContainer .hordes-card:hover { border-color: #9b9d6d; transform: none; box-shadow: none; }
#hordesCardsContainer .hordes-card.is-claimed { border-color: #bca462; background: #30432e; }
.draft-portrait { width: 100%; height: 150px; object-fit: cover; object-position: center 23%; border-radius: 4px; background: #182c21; }
.draft-portrait[src$='.svg'] { object-fit: contain; padding: 10px; }
#hordesCardsContainer .card-unit-name { font-size: .95rem; color: #f0dfb4; margin: 0; }
.draft-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; }
#hordesCardsContainer .card-stat { display: flex; justify-content: space-between; color: #bbcab0; font-size: .66rem; gap: 4px; }
#hordesCardsContainer .card-stat strong { color: #eef1e2; }
#hordesCardsContainer .btn { min-height: 44px; margin-top: auto; padding: 8px 4px; font: 600 .75rem var(--font-sans); width: 100%; }
.draft-claimed { display: grid; place-items: center; min-height: 44px; margin-top: auto; border-radius: 5px; background: #3b5635; color: #e1eecb; font-size: .76rem; font-weight: 600; }
#hordesDraftPlayersContainer { margin-top: 16px !important; padding: 12px !important; border: 1px solid #455b41 !important; background: #16251b !important; }
.draft-team-title { color: #b9c8a9; font: 600 .7rem var(--font-sans); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 8px; }
.draft-status { color: #e4cd94; font-size: .73rem; }
.draft-status.ready { color: #c1e2a2; }
.draft-actions { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; margin-top: 18px; }
#hordesLeaveBtn { grid-column: 1; grid-row: 1; margin: 0 !important; }
#hordesProceedBtn { grid-column: 2; margin: 0 !important; font: 600 .85rem var(--font-sans) !important; }
#hordesDraftCountdownTimer { color: #f0d493 !important; font: 600 1.1rem var(--font-sans) !important; }
#connectionStatus { position: fixed; z-index: 15000; left: 50%; top: 12px; transform: translateX(-50%); padding: 12px 18px; max-width: calc(100vw - 24px); border: 1px solid #d6b575; border-radius: 7px; background: #332d1b; color: #fff1cc; font: 500 .85rem/1.45 var(--font-sans); box-shadow: 0 8px 30px #0006; }
#connectionStatus[hidden] { display: none; }
@media(max-width:600px) {
 #gameUI .hud-header { display: grid; grid-template-columns: 1fr 1fr 1.2fr auto auto; gap: 6px; padding: 5px 7px !important; }
 #gameUI .hud-item { min-width: 0; gap: 2px; flex-direction: column; }
 #gameUI .hud-item .value { font-size: .85rem; white-space: nowrap; }
 #gameUI .hud-item .label { font-size: .52rem; }
 #gameUI .gold-box { padding: 5px 6px; gap: 4px; }
 #gameUI .sound-control .btn, #hudLeaveBtn { padding: 6px !important; font-size: .68rem !important; min-height: 44px; }
 #hudLeaveBtn { max-width: 60px; }
 .hub-card .tab-btn { font-size: .65rem; padding: 12px 3px; letter-spacing: 0; overflow-wrap: anywhere; }
 .hub-card { padding: 14px; } .hub-card .gateway-footer { margin: 8px -14px -14px !important; }
 .hub-user-greeting { padding: 14px !important; background-size: auto,80% auto; min-height: 90px; }
 .nav-links { gap: 0; } .nav-link { padding: 9px 7px; font-size: .75rem; }
 #hordesCardDraftOverlay .draft-panel { padding: 16px; }
 .draft-treasury { padding: 8px 10px; }
 #hordesCardsContainer { grid-template-columns: 1fr !important; gap: 9px !important; }
 #hordesCardsContainer .hordes-card { display: grid; grid-template-columns: 78px 1fr; gap: 5px 12px; padding: 10px; }
 .draft-portrait { grid-row: 1 / 4; height: 116px; width: 78px; }
 #hordesCardsContainer .btn,.draft-claimed { grid-column: 2; min-height: 42px; }
 .draft-stats { gap: 4px 14px; }
 .draft-actions { position: sticky; bottom: -16px; padding: 12px 0 16px; margin-bottom: -16px; background: #1b2b22; }
 .draft-actions .btn { min-height: 48px; }
 .draft-steps { margin-top: 12px; } .draft-steps li { font-size: .68rem; }
}
@media(max-height:560px) and (min-width:601px) {
 #gameUI { padding-bottom: calc(72px + env(safe-area-inset-bottom,0px)); }
 #battleControls { grid-template-columns: minmax(80px,1fr) repeat(6,minmax(44px,1fr)) minmax(90px,1.3fr); gap: 6px; }
 #battleSelectionCount, #battleControls #battleRecruit { grid-column: span 1; }
 body.recruit-open #gameUI #shopPanel { bottom: calc(66px + env(safe-area-inset-bottom,0px)); max-height: calc(100dvh - 140px); }
 #gameUI .chat-container { display: none; }
 #hordesCardDraftOverlay .draft-panel { padding: 16px; }
 .draft-portrait { height: 70px; } .draft-steps { margin: 8px 0; }
 #hordesDraftHint { min-height: 0; margin: 6px 0; }
 .draft-actions { margin-top: 10px; }
}