/* social, quests, store, profile and settings screens */

.tabs.sub { margin-bottom: 6px; }
.tabs.sub button { font-size: calc(8px * var(--ts, 1)); padding: 6px 8px; }
.clickable { cursor: pointer; }
.clickable:hover { filter: brightness(1.15); }
.filters { margin: 8px 0; align-items: stretch; }
.filters select, .filters input { padding: 4px 6px; font-size: calc(20px * var(--ts, 1)); }
table.odds { width: 100%; border-collapse: collapse; }
table.odds td { padding: 3px 6px; border-bottom: 1px solid var(--line2); }

/* ---- chat */
.chatlog { height: min(46vh, 420px); min-height: 220px; overflow-y: auto; overflow-x: hidden; background: var(--bg); border: 3px solid var(--line2); padding: 6px 8px; margin-bottom: 8px; }
.chatlog .empty { padding: 40px 0; }
.chat-note { min-height: 1.1em; margin-bottom: 4px; }
.chat-input { flex-wrap: nowrap; }
.chatlog .chatline:not(:nth-last-child(-n+6)) :is(*, *::before, *::after),
.chatlog .chatline:not(:nth-last-child(-n+6)) { animation: none !important; }

/* ---- rosters */
.roster-row { min-width: 0; }
.roster-row .contrib { margin-top: 2px; }
.roster-row > .dim { display: block; text-align: right; padding-right: 4px; }

/* ---- quests and factions */
.quest.claimed { opacity: .6; }
.faction.joined { border-color: var(--accent2); }
.shop-grid .good { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.shop-grid .good.locked { opacity: .65; }
.good-prev { min-height: 54px; }
.good-prev .swatch { width: 100%; }

/* ---- wardrobe and redeem tiles */
.grid.wardrobe { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.opt { border: 3px solid var(--rcol, var(--line2)); background: var(--panel2); padding: 4px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.opt.on { background: var(--panel); box-shadow: 0 0 0 2px var(--accent); }
.opt.locked { opacity: .5; filter: grayscale(.6); }
.opt-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opt .row { gap: 4px; }

/* ---- profile view */
.profile-view .ccard.full { margin-bottom: 8px; }
.pv-info { padding: 0 2px; }
.pv-line { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.pv-skills { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.pv-skill { display: flex; align-items: center; gap: 6px; background: var(--bg2); border: 2px solid var(--line2); padding: 2px 6px; }
.pv-skill span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- store */
.crate h3 { margin-bottom: 4px; }
.odds-line { gap: 8px; }
.odds-btn { border-color: var(--accent2); color: var(--accent2); }
.reveal { z-index: 120; background: #000d; }
.reveal-box { max-width: 760px; }
.reveal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.rv-card { perspective: 600px; min-height: 150px; }
.rv-inner { position: relative; width: 100%; height: 100%; min-height: 150px; transform-style: preserve-3d; transition: transform .35s steps(5); }
.rv-card.flipped .rv-inner { transform: rotateY(180deg); }
.rv-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border: 3px solid var(--rcol, var(--line)); background: var(--panel2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 4px; text-align: center; }
.rv-back { font-family: var(--font-head); font-size: calc(24px * var(--ts, 1)); color: var(--accent); background: repeating-linear-gradient(45deg, var(--panel2) 0 6px, var(--panel) 6px 12px); }
.rv-front { transform: rotateY(180deg); }
.rv-front .swatch { width: 100%; min-height: 48px; }
.rv-dup { color: var(--warn); font-size: calc(15px * var(--ts, 1)); }
.rv-new { color: var(--good); font-size: calc(15px * var(--ts, 1)); }
.rv-card.flash.flipped::after { content: ''; position: absolute; inset: -4px; border: 4px solid var(--rcol); pointer-events: none; animation: rv-flash .8s steps(6) 2; }
@keyframes rv-flash { 0% { opacity: 1; box-shadow: 0 0 0 0 var(--rcol); } 100% { opacity: 0; box-shadow: 0 0 40px 20px var(--rcol); } }
.rv-summary { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.fx-off .rv-inner { transition: none; }

/* ---- settings */
.setting { margin-bottom: 10px; }
.setting .tabs { margin-bottom: 0; }

/* ---- chat screen */
.chat-panel { display: flex; flex-direction: column; gap: 8px; }
.chat-tabs { flex-wrap: wrap; }
.chat-tabs button { position: relative; display: inline-flex; align-items: center; gap: 6px; }
.chat-tabs .badge, .dm-people .badge, .hud-chat .badge { position: static; display: inline-block; min-width: 16px; padding: 0 4px; background: var(--bad, #ff5d73); color: #fff; font-size: calc(12px * var(--ts, 1)); line-height: 16px; text-align: center; border: 2px solid #000; }
.chatlog.big { height: clamp(220px, calc(100vh - 430px), 560px); margin-bottom: 0; }
.chat-to { flex: none; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tag.chan { margin-right: 4px; font-size: calc(11px * var(--ts, 1)); padding: 0 4px; }
.chan-clan { color: #7bd88f; } .chan-party { color: #6be3ff; } .chan-friends { color: #ff8fd1; } .chan-dm { color: #ffd34d; } .chan-global { color: #c9c2e6; }
.tag.chan-admin, .admin-tag { color: #1a1022; background: linear-gradient(90deg, #ffd34d, #ff8f3d); border: 2px solid #000; font-family: var(--font-head); font-size: calc(8px * var(--ts, 1)); padding: 2px 4px; margin-left: 4px; letter-spacing: 1px; box-shadow: 0 0 8px rgba(255, 180, 60, .6); vertical-align: middle; }
.chatline.is-admin { background: linear-gradient(90deg, rgba(255, 211, 77, .16), transparent 70%); border-left: 3px solid var(--accent); padding-left: 4px; }
.chat-friends { display: flex; flex-direction: column; gap: 8px; }
.friend-list { display: flex; flex-direction: column; gap: 6px; max-height: 32vh; overflow-y: auto; }
.friend-row { display: flex; align-items: center; gap: 8px; padding: 4px 6px; background: var(--bg2); border: 2px solid var(--line2); }
.friend-row.on { border-color: var(--good); }
.fr-card { min-width: 0; overflow: hidden; }
.dm-people { display: flex; flex-wrap: wrap; gap: 6px; }
.logline { display: flex; gap: 8px; padding: 3px 0; border-bottom: 1px dashed var(--line2); }
.logline.k-levelup, .logline.k-good, .logline.k-unlock { color: var(--good); }
.logline.k-bad { color: var(--bad, #ff5d73); }
.logline.k-boss, .logline.k-loot { color: var(--accent); }
/* HUD chat button */
.hud-chat { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; background: var(--well); color: var(--text); border: 3px solid #000; box-shadow: 0 0 0 2px var(--line2); font: inherit; cursor: pointer; }
.hud-chat.has-new { box-shadow: 0 0 0 2px var(--accent), 0 0 12px rgba(255, 211, 77, .5); }
.hud-chat .badge.hidden { display: none; }

/* ---- emotes */
img.emote { width: 24px; height: 24px; image-rendering: pixelated; vertical-align: middle; margin: 0 1px; }
.cl-text img.emote { width: 28px; height: 28px; }
.emo-btn { padding: 2px 6px; }
.emo-picker { display: flex; flex-direction: column; gap: 8px; max-height: 40vh; overflow-y: auto; padding: 8px; background: var(--bg2); border: 3px solid var(--line2); }
.emo-pack { display: flex; flex-direction: column; gap: 4px; }
.emo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 4px; }
.emo-cell { display: grid; place-items: center; padding: 4px; background: var(--well); border: 2px solid var(--line2); cursor: pointer; }
.emo-cell img.emote { width: 30px; height: 30px; }
.emo-cell.locked { opacity: .45; cursor: default; filter: grayscale(.6); }
.emo-cell:not(.locked):hover { border-color: var(--accent); }
.chat-panel:has(.emo-picker:not([hidden])) .chatlog.big { height: clamp(160px, 28vh, 300px); }
/* top-bar full screen toggle (browsers only, main.js hudParts.full) */
.hud-full { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; padding: 2px 6px; background: var(--well); color: var(--text); border: 3px solid #000; box-shadow: 0 0 0 2px var(--line2); font: inherit; font-size: calc(20px * var(--ts, 1)); line-height: 1; cursor: pointer; }
.hud-full:hover, .hud-full:focus-visible { box-shadow: 0 0 0 2px var(--accent); color: var(--accent); }