/* Terra Crisis – in-game HUD in the manner of a classic MMO (loaded last).
   Unit frames top left (you, then the opponents as a party), chat frame bottom left with tabs and
   text straight on the world, an action bar at the bottom (hand cards as action buttons with
   item-style tooltips, points as an XP bar, micro menu), objectives as gold text above it and the
   quest tracker (goals, titles, events, trade) on the right. Dark iron and black glass with thin
   gold trim; text in white/gold with hard shadows so it reads on any part of the island. */

:root {
	--mmo-ink: rgba(9, 8, 7, .88);
	--mmo-ink-2: rgba(22, 19, 15, .9);
	--mmo-gold: #c9a24f;
	--mmo-gold-hi: #ffd76a;
	--mmo-yellow: #ffd100;
	--mmo-edge: #6b5530;
	--mmo-party: #aab4ff;
	--mmo-shadow: 1px 1px 0 #000, 0 0 3px rgba(0, 0, 0, .9);
	--r-bronze: #e09a5a;
	--r-silver: #d6dfea;
	--r-gold: #ffd257;
	--r-platinum: #6ff3e4;
}

/* ---------- unit frames ---------- */
.unitframes:has(.uf) { background: none !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; padding: 0 !important; }
.uf { --ps: 50px; display: flex; align-items: center; position: relative; color: #fff; font-family: 'Alegreya', Georgia, serif; user-select: none; }
.uf.own { --ps: 74px; }
.uf + .party, .party .uf + .uf { margin-top: 12px; }
.uf-portrait { position: relative; z-index: 2; flex: none; width: var(--ps); height: var(--ps); border-radius: 50%;
	background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--pc) 45%, #3a2a1a), #0b0806 75%);
	box-shadow: 0 0 0 2px #120c06, 0 0 0 4px var(--mmo-gold), 0 0 0 5px #1a1208, 0 4px 12px rgba(0, 0, 0, .6); }
.uf-portrait img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.uf-portrait img:not([src]) { visibility: hidden; }
.uf-portrait::after { content: ''; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 10px rgba(0, 0, 0, .75), inset 0 2px 0 rgba(255, 230, 170, .15); pointer-events: none; }
.uf-level { position: absolute; left: -6px; bottom: -5px; z-index: 3; min-width: 25px; height: 25px; padding: 0 4px; display: grid; place-items: center; border-radius: 999px;
	background: radial-gradient(circle at 50% 30%, #4a3418, #120b04); border: 2px solid var(--mmo-gold); color: var(--mmo-yellow);
	font: 800 13px/1 'Cinzel', serif; text-shadow: var(--mmo-shadow); box-shadow: 0 2px 5px rgba(0, 0, 0, .7); }
.uf.own .uf-level { min-width: 30px; height: 30px; font-size: 15px; left: -4px; bottom: -3px; }
.uf-turn { position: absolute; inset: -7px; border-radius: 50%; border: 2px solid var(--mmo-gold-hi); box-shadow: 0 0 16px 4px rgba(255, 200, 60, .55); animation: uf-pulse 1.6s ease-in-out infinite; pointer-events: none; }
@keyframes uf-pulse { 50% { box-shadow: 0 0 26px 8px rgba(255, 200, 60, .85); opacity: .75; } }
.uf-body { flex: 1; min-width: 0; margin-left: calc(var(--ps) * -0.22); padding: 5px 9px 6px calc(var(--ps) * 0.22 + 8px);
	background: linear-gradient(180deg, var(--mmo-ink-2), var(--mmo-ink)); border: 1px solid var(--mmo-edge); border-left: 0; border-radius: 0 7px 7px 0;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 220, 150, .1), 0 4px 14px rgba(0, 0, 0, .45); }
.uf-name { display: flex; align-items: center; gap: 4px; font-weight: 800; font-size: 13.5px; line-height: 1.25; text-shadow: var(--mmo-shadow); white-space: nowrap; }
.uf.own .uf-name { font-size: 15px; }
.uf-n { color: color-mix(in srgb, var(--pc) 65%, #fff); overflow: hidden; text-overflow: ellipsis; }
.uf-ic { display: inline-flex; width: 13px; height: 13px; color: var(--mmo-gold); opacity: .9; }
.uf-ic svg { width: 100%; height: 100%; }
.uf-off { font: 600 10px 'Alegreya', serif; color: #ff8f80; }
.uf-cash { margin-left: auto; padding-left: 8px; color: var(--mmo-gold-hi); font: 700 12px 'Alegreya', serif; }
.uf-cash.neg { color: #ff6b5a; }
.uf-bar { position: relative; height: 11px; margin-top: 3px; background: #050505; border: 1px solid #000; box-shadow: 0 0 0 1px rgba(201, 162, 79, .28); border-radius: 2px; overflow: hidden; }
.uf.own .uf-bar { height: 14px; }
.uf-bar > i { position: absolute; inset: 0 auto 0 0; transition: width .5s ease; }
.uf-bar.hp > i { background: linear-gradient(180deg, #5fe35f, #1f9a1f 55%, #146b14); }
.uf-bar.mp > i { background: linear-gradient(180deg, #5b9bff, #1d55c8 55%, #123a8c); }
.uf-bar.mp.over > i { background: linear-gradient(180deg, #ff7a6a, #c42d1d 55%, #8a1a10); animation: uf-warn 1.2s ease-in-out infinite; }
@keyframes uf-warn { 50% { filter: brightness(1.35); } }
.uf-bar > span { position: relative; display: block; text-align: center; font: 700 9.5px/11px 'Alegreya', serif; color: #fff; text-shadow: var(--mmo-shadow); letter-spacing: .3px; }
.uf.own .uf-bar > span { font-size: 10.5px; line-height: 14px; }
.uf-buffs { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 4px; }
.buff { position: relative; display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 2px; font-style: normal; font-size: 12px; line-height: 1;
	background: radial-gradient(circle at 50% 30%, #3a3226, #0e0c09); border: 1px solid #000; box-shadow: 0 0 0 1px rgba(201, 162, 79, .55); border-radius: 3px; cursor: help; }
.buff sub { position: absolute; right: 1px; bottom: 0; font: 800 9px 'Alegreya', serif; color: #fff; text-shadow: var(--mmo-shadow); }
.buff.title { font: 800 9px 'Cinzel', serif; color: var(--mmo-yellow); padding: 0 4px; }
.buff.bad { box-shadow: 0 0 0 1px #d0402c; }
.buff.good { box-shadow: 0 0 0 1px #3fbf4f; color: #8dff9a; font-weight: 800; }
.uf.dead { filter: grayscale(1); opacity: .5; }
.uf.offline .uf-portrait img { filter: grayscale(.8) brightness(.7); }
.uf.targetable { cursor: crosshair; }
.uf.targetable .uf-body { border-color: #ff4a3a; animation: uf-target 1s ease-in-out infinite; }
.uf.targetable .uf-portrait { box-shadow: 0 0 0 2px #120c06, 0 0 0 4px #ff4a3a, 0 0 18px 4px rgba(255, 70, 50, .7); }
.uf.targetable:hover .uf-body { background: linear-gradient(180deg, rgba(90, 20, 14, .92), rgba(40, 8, 6, .92)); }
@keyframes uf-target { 50% { box-shadow: inset 0 0 0 1px #000, 0 0 16px rgba(255, 70, 50, .65); } }

/* ---------- chat frame ---------- */
.chatframe { display: flex; flex-direction: column; min-height: 0; font-family: 'Alegreya', Georgia, serif; }
.cf-tabs { display: flex; gap: 2px; padding-left: 4px; }
.cf-tab { position: relative; font: 700 11.5px 'Alegreya', serif; letter-spacing: .3px; color: #d8c9a4; padding: 3px 11px 4px; cursor: pointer;
	background: linear-gradient(180deg, rgba(30, 26, 20, .72), rgba(10, 9, 7, .72)); border: 1px solid rgba(201, 162, 79, .35); border-bottom: 0; border-radius: 6px 6px 0 0; text-shadow: var(--mmo-shadow); }
.cf-tab:hover { color: #fff; }
.cf-tab.on { color: var(--mmo-yellow); background: linear-gradient(180deg, rgba(70, 56, 30, .85), rgba(18, 15, 10, .8)); border-color: rgba(201, 162, 79, .7); }
.cf-tab .unread { position: absolute; top: -8px; right: -6px; min-width: 16px; height: 16px; font-size: 10px !important; }
.chatframe .chat-list { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 9px; display: flex; flex-direction: column; gap: 1px; max-height: none;
	background: linear-gradient(180deg, rgba(0, 0, 0, .18), rgba(0, 0, 0, .48)); border: 1px solid rgba(201, 162, 79, .22); border-radius: 0 6px 0 0;
	scrollbar-width: thin; scrollbar-color: rgba(201, 162, 79, .5) transparent; }
.cf-line { font-size: 13.5px; line-height: 1.32; color: #fff; text-shadow: var(--mmo-shadow); overflow-wrap: anywhere; }
.cf-line.sys { color: #f3d98f; }
.cf-line.party { color: var(--mmo-party); }
.cf-line .cf-ch { color: var(--mmo-party); }
.cf-line.muted { color: #b9ab8c; font-style: italic; }
.chatframe .chat-form { display: flex; align-items: center; gap: 6px; padding: 3px 8px; background: rgba(0, 0, 0, .62); border: 1px solid rgba(201, 162, 79, .3); border-top: 0; border-radius: 0 0 6px 6px; }
.chatframe .chat-form label { color: var(--mmo-party); font: 700 13px 'Alegreya', serif; text-shadow: var(--mmo-shadow); }
.chatframe .chat-form input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: #fff; font: 500 13.5px 'Alegreya', serif; padding: 3px 0; text-shadow: var(--mmo-shadow); }
.chatframe .chat-form input::placeholder { color: rgba(255, 255, 255, .35); }
.chatframe:not(:focus-within) .chat-form { opacity: .7; }

/* ---------- objective text and decision popup ---------- */
.hud { background: none !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; padding: 0 !important;
	display: flex !important; flex-direction: column; align-items: center; gap: 10px; overflow: visible !important; pointer-events: none; }
.hud > * { pointer-events: auto; }
.objective { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center; max-width: min(900px, 100%); padding: 8px 18px; text-align: center;
	background: radial-gradient(closest-side, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0)); }
.objective .prompt { font: 600 16px/1.35 'Alegreya', serif; color: #fff; text-shadow: var(--mmo-shadow); }
.objective .prompt b { color: var(--mmo-yellow); }
.objective.choice { background: linear-gradient(180deg, rgba(20, 17, 13, .95), rgba(8, 7, 5, .95)); border: 1px solid #000; border-radius: 8px;
	box-shadow: inset 0 0 0 1px var(--mmo-gold), inset 0 0 0 3px #120c06, inset 0 0 0 4px rgba(201, 162, 79, .35), 0 10px 30px rgba(0, 0, 0, .6); padding: 12px 18px; }
.objective .hud-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.objective .btn { font-family: 'Cinzel', serif; letter-spacing: .8px; background: linear-gradient(180deg, #7c1d12, #4a0d07); border: 1px solid #000; color: var(--mmo-yellow);
	box-shadow: inset 0 0 0 1px rgba(255, 190, 120, .45), inset 0 1px 0 rgba(255, 220, 180, .35), 0 3px 0 rgba(0, 0, 0, .5); text-shadow: var(--mmo-shadow); }
.objective .btn:hover:not(:disabled) { filter: brightness(1.2); }
.objective .btn.ghost { background: linear-gradient(180deg, #3a332a, #1a1610); color: #e8dcc0; }
.objective .btn.good { background: linear-gradient(180deg, #2c7a2c, #134813); color: #fff7c8; }

/* ---------- action bar ---------- */
.actionbar { position: relative; display: flex; flex-direction: column; padding: 0 30px; }
.actionbar::before, .actionbar::after { content: '⚜'; position: absolute; bottom: -2px; width: 46px; height: 64px; display: grid; place-items: center; font-size: 26px; color: #3a2a10;
	background: linear-gradient(180deg, #f3d27a, #b88a32 45%, #6e4f17); clip-path: polygon(50% 0, 100% 14%, 100% 64%, 50% 100%, 0 64%, 0 14%);
	filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .6)); text-shadow: 0 1px 0 rgba(255, 240, 200, .6); z-index: 2; }
.actionbar::before { left: 0; }
.actionbar::after { right: 0; }
.xpbar { position: relative; height: 11px; margin: 0 6px; background: #07050a; border: 1px solid #000; border-bottom: 0; border-radius: 4px 4px 0 0; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(201, 162, 79, .4); }
.xpbar > i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(180deg, #c27bff, #7a1fc8 55%, #4d0f86); transition: width .6s ease; }
.xpbar > b { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(0, 0, 0, .7); }
.xpbar > span { position: relative; display: block; text-align: center; font: 700 9.5px/11px 'Alegreya', serif; color: #fff; text-shadow: var(--mmo-shadow); opacity: 0; transition: opacity .2s; }
.xpbar:hover > span { opacity: 1; }
.ab-row { display: flex; align-items: center; gap: 10px; padding: 7px 12px; background: linear-gradient(180deg, #2c2721, #17140f 55%, #0d0b08);
	border: 1px solid #000; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(201, 162, 79, .55), inset 0 2px 0 rgba(255, 225, 160, .12), 0 8px 26px rgba(0, 0, 0, .55); }
.ab-slots { display: flex; gap: 5px; align-items: center; }
.ab-btn { --rc: #555; position: relative; flex: none; width: 50px; height: 50px; padding: 0; display: grid; place-items: center; cursor: pointer; border-radius: 5px;
	background: radial-gradient(circle at 50% 35%, #3a3530, #0c0b09 80%); border: 1px solid #000;
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rc) 70%, #000), inset 0 0 12px color-mix(in srgb, var(--rc) 30%, transparent), 0 0 0 1px rgba(201, 162, 79, .4); transition: transform .12s, box-shadow .12s, filter .12s; }
.ab-btn.r-bronze { --rc: var(--r-bronze); }
.ab-btn.r-silver { --rc: var(--r-silver); }
.ab-btn.r-gold { --rc: var(--r-gold); }
.ab-btn.r-platinum { --rc: var(--r-platinum); }
.ab-btn.r-platinum::before { content: ''; position: absolute; inset: 1px; border-radius: 4px; pointer-events: none; background: linear-gradient(115deg, transparent 35%, rgba(160, 255, 245, .35) 50%, transparent 65%); background-size: 300% 100%; animation: cc-shimmer 4s ease-in-out infinite; }
/* freshly drawn cards fly in from the draw pile */
.ab-btn.drawn { animation: ab-draw .7s cubic-bezier(.2, .9, .3, 1.2) both; }
@keyframes ab-draw { 0% { transform: translate(120px, -60px) rotate(25deg) scale(.4); opacity: 0; } 60% { opacity: 1; } 100% { transform: none; } }
/* over the hand limit: clicking discards */
.ab-btn.discard:not(.empty) { cursor: pointer; box-shadow: inset 0 0 0 2px #ff5a4a, 0 0 10px rgba(255, 80, 60, .6); }
.ab-btn.empty { cursor: default; background: radial-gradient(circle at 50% 35%, rgba(40, 36, 30, .7), rgba(6, 5, 4, .85) 80%); box-shadow: inset 0 0 8px #000, 0 0 0 1px rgba(201, 162, 79, .22); }
.ab-btn:not(.empty):hover { transform: translateY(-2px); filter: brightness(1.18); box-shadow: inset 0 0 0 1px var(--rc), inset 0 0 16px color-mix(in srgb, var(--rc) 45%, transparent), 0 0 0 1px var(--mmo-gold-hi), 0 0 12px rgba(255, 215, 106, .45); }
.ab-btn:not(.empty):active { transform: translateY(0) scale(.96); }
.ab-btn.sel { box-shadow: inset 0 0 0 2px var(--mmo-gold-hi), 0 0 0 1px #000, 0 0 16px 3px rgba(255, 215, 106, .75); animation: uf-pulse 1.2s ease-in-out infinite; }
.ab-btn.short .ab-icon { filter: grayscale(.6) brightness(.75); }
.ab-btn.short::after { content: ''; position: absolute; inset: 1px; border-radius: 4px; background: rgba(160, 20, 10, .28); pointer-events: none; }
.ab-btn:disabled { cursor: not-allowed; filter: grayscale(1) brightness(.6); }
.ab-btn.dragging { opacity: .35; }
.ab-icon { font-size: 28px; line-height: 1; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .8)); }
.ab-key { position: absolute; top: 2px; right: 4px; font: 800 10px 'Alegreya', serif; color: #e8e8e8; text-shadow: var(--mmo-shadow); }
.ab-count { align-self: flex-end; margin-left: 2px; font: 700 11px 'Alegreya', serif; color: #c9b88e; text-shadow: var(--mmo-shadow); }

/* item-style tooltip */
.wtip { display: none; position: absolute; bottom: calc(100% + 14px); left: 50%; transform: translateX(-50%); z-index: 60; width: 270px; padding: 9px 11px 10px; text-align: left; pointer-events: none;
	flex-direction: column; gap: 3px; background: linear-gradient(180deg, rgba(10, 12, 30, .96), rgba(4, 5, 14, .96)); border: 1px solid #8b8fa8; border-radius: 5px;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .9), 0 8px 24px rgba(0, 0, 0, .7); font: 500 13px/1.35 'Alegreya', serif; color: #fff; white-space: normal; }
.ab-btn:hover .wtip, .ab-btn:focus-visible .wtip { display: flex; }
.drag-ghost .wtip { display: none !important; }
.wt-name { font: 800 15px 'Alegreya', serif; }
.wt-name.r-bronze { color: var(--r-bronze); }
.wt-name.r-silver { color: var(--r-silver); }
.wt-name.r-gold { color: var(--r-gold); }
.wt-name.r-platinum { color: var(--r-platinum); text-shadow: 0 0 8px rgba(110, 240, 228, .6); }
.wt-kind { color: #fff; font-size: 12.5px; }
.wt-stat { color: #fff; }
.wt-cost { color: #fff; display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.wt-cost .rc { background: rgba(255, 255, 255, .08); border-radius: 3px; padding: 0 3px; color: #fff; }
.wt-cost .rc.miss { color: #ff5a4a; }
.wt-use { color: #8dff6a; }
.wt-when { color: var(--mmo-yellow); font-size: 12.5px; }
.wt-hint { color: #8d8d9a; font-size: 11.5px; margin-top: 2px; }

/* dice, purse and Fürstentum inside the bar */
.ab-row .dice { gap: 4px; }
.ab-row .resbar { background: rgba(0, 0, 0, .45); border: 1px solid #000; box-shadow: inset 0 0 0 1px rgba(201, 162, 79, .3); border-radius: 5px; color: #fff; }
.ab-row .resbar .money { color: var(--mmo-gold-hi); text-shadow: var(--mmo-shadow); }

/* micro menu */
.micromenu { display: grid; grid-template-columns: repeat(3, 26px); gap: 3px; }
.mm-btn { width: 26px; height: 26px; padding: 0; display: grid; place-items: center; font-size: 14px; cursor: pointer; border-radius: 4px;
	background: linear-gradient(180deg, #4a1e14, #22100a); border: 1px solid #000; box-shadow: inset 0 0 0 1px rgba(201, 162, 79, .6), inset 0 1px 0 rgba(255, 220, 180, .25); color: var(--mmo-gold-hi); }
.mm-btn svg { width: 14px; height: 14px; }
.mm-btn:hover:not(:disabled) { filter: brightness(1.3); }
.mm-btn.on { box-shadow: inset 0 0 0 1px var(--mmo-gold-hi), 0 0 8px rgba(255, 215, 106, .7); }
.mm-btn:disabled { filter: grayscale(1) brightness(.55); cursor: default; }

/* the old card fan and map pills are replaced by the action bar and the micro menu */
.map-ctrl { display: none !important; }

/* ---------- quest tracker (right) ---------- */
@media (min-width: 1151px) {
	.side.left { width: 300px; }
	.side.left .logo { display: none; }
	.side.left .share-fold { display: none; }
	.chatframe { position: fixed; left: 12px; bottom: 12px; width: min(400px, 28vw); height: 236px; z-index: 16; }
	.hud { width: auto !important; max-width: calc(100vw - 2 * min(412px, 28vw + 12px) - 24px); }
	.side.right .card { background: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .5) 35%) !important; border: 0 !important; box-shadow: none !important;
		backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-radius: 0 !important; padding: 6px 4px 8px 22px !important; }
	.side.right .card h3 { color: var(--mmo-yellow) !important; text-shadow: var(--mmo-shadow); justify-content: flex-end; }
	.side.right .card h3::before { display: none; }
	.side.right .mission, .side.right .effect, .side.right .trade-item { background: none !important; border: 0 !important; padding: 2px 0 !important; text-shadow: var(--mmo-shadow); color: #fff !important; }
	.side.right .mission b, .side.right .effect b { color: #fff; }
	.side.right .muted { color: #e0d2ae !important; }
	.side.right .mission.done b { color: #8dff9a; }
	.side.right .title-row { text-shadow: var(--mmo-shadow); color: #fff; }
	.tileinfo { left: 324px; }
	.event-card { left: 324px; }
}

@media (max-width: 1150px) {
	.chatframe { height: 230px; margin-top: 10px; }
	.ab-row { flex-wrap: wrap; justify-content: center; }
	.actionbar { padding: 0; }
	.actionbar::before, .actionbar::after { display: none; }
	.ab-btn { width: 44px; height: 44px; }
	.ab-icon { font-size: 24px; }
	.wtip { width: 230px; }
}

/* the action buttons reuse the hand-card class (drag and drop); neutralise the old card look */
.ab-slots .acard.ab-btn { min-height: 0; width: 50px; height: 50px; padding: 0; gap: 0; display: grid; place-items: center; border-radius: 5px; color: #fff;
	background: radial-gradient(circle at 50% 35%, #3a3530, #0c0b09 80%); border: 1px solid #000; }
.ab-slots .acard.ab-btn::before { display: none; }
.ab-slots .acard.ab-btn:not(:disabled):hover { transform: translateY(-2px); }
@media (max-width: 1150px) { .ab-slots .acard.ab-btn { width: 44px; height: 44px; } }
@media (min-width: 1151px) { .topbar { max-width: calc(100vw - 2 * 324px) !important; } }

.ab-count { line-height: 1.25; text-align: right; }

/* waiting room: deck choice and each seat's deck */
.wr-deck { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 0 22px 12px; }
.wr-deck .label { width: 100%; }
.wr-deck select { min-width: 220px; }
.slot-deck { font-size: 12px; color: var(--forest, #243a32); opacity: .8; }

/* bank: card trades */
.bank-special { margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(0, 0, 0, .15); display: flex; flex-direction: column; gap: 8px; }
.bank-special > div { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.menu-acc .coins { color: #8a5a10; }

/* ---------- ranked: teams ---------- */
.uf.team-0 .uf-portrait { box-shadow: 0 0 0 2px #120c06, 0 0 0 4px #d0453a, 0 0 0 5px #1a1208, 0 4px 12px rgba(0, 0, 0, .6); }
.uf.team-1 .uf-portrait { box-shadow: 0 0 0 2px #120c06, 0 0 0 4px #3d7fd6, 0 0 0 5px #1a1208, 0 4px 12px rgba(0, 0, 0, .6); }
.uf.ally .uf-body { border-color: #3fbf4f; }
.uf-team { font: 700 10px 'Alegreya', serif; padding: 0 5px; border-radius: 99px; background: rgba(255, 255, 255, .12); color: #e8e8e8; }
.uf.team-0 .uf-team { background: rgba(208, 69, 58, .45); }
.uf.team-1 .uf-team { background: rgba(61, 127, 214, .45); }
.uf.ally .uf-team { background: rgba(63, 191, 79, .55); color: #fff; }
.tb-teams { gap: 8px; }
.tb-team { padding: 1px 8px; border-radius: 99px; }
.tb-team.team-0 { background: rgba(208, 69, 58, .55); }
.tb-team.team-1 { background: rgba(61, 127, 214, .55); }
.slot-team { position: absolute; top: 8px; left: 8px; font: 700 11px 'Alegreya', serif; color: #fff; padding: 1px 8px; border-radius: 99px; }
.slot-team.team-0 { background: #b8392e; }
.slot-team.team-1 { background: #2f68b4; }

/* ranked card in the main menu */
.ranked-card h3 span { font-size: 11px; letter-spacing: 0; text-transform: none; }
.rk-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.rk-mode { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 8px; cursor: pointer; border-radius: 10px; color: #f3e7cc;
	background: linear-gradient(180deg, #3a2a1a, #1c140c); border: 1px solid rgba(201, 162, 79, .55); box-shadow: inset 0 1px 0 rgba(255, 230, 170, .2), 0 4px 10px rgba(0, 0, 0, .35); transition: transform .15s; }
.rk-mode:hover:not(:disabled) { transform: translateY(-3px); border-color: #ffd76a; }
.rk-mode:disabled { opacity: .45; cursor: default; }
.rk-mode.on { border-color: #ffd76a; box-shadow: 0 0 0 2px rgba(255, 215, 106, .5), 0 0 18px rgba(255, 215, 106, .45); }
.rk-short { font: 800 22px 'Cinzel', serif; color: #ffd76a; }
.rk-name { font: 600 12px 'Alegreya', serif; color: #d8c9a4; }
.rk-rating { font: 800 16px 'Cinzel', serif; color: #fff; }
.rk-games { font-size: 11px; color: #b9ab8c; }
.rk-queue { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 10px 12px; border-radius: 8px; background: rgba(36, 58, 50, .12); border: 1px solid rgba(201, 162, 79, .4); }
.rk-spin { width: 22px; height: 22px; flex: none; border-radius: 50%; border: 3px solid rgba(201, 162, 79, .3); border-top-color: #c9a24f; animation: rk-spin 1s linear infinite; }
@keyframes rk-spin { to { transform: rotate(360deg); } }
.rk-queue > div { flex: 1; }
.rk-board { margin-top: 12px; }
.rk-tabs { display: flex; gap: 4px; margin-bottom: 6px; }
.rk-tabs button { font: 700 12px 'Cinzel', serif; padding: 2px 10px; border-radius: 99px; border: 1px solid rgba(201, 162, 79, .4); background: none; cursor: pointer; color: inherit; }
.rk-tabs button.on { background: #c9a24f; color: #1a1206; }
.rk-board ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.rk-board li { display: grid; grid-template-columns: 24px 1fr auto 52px; gap: 6px; align-items: center; }
.rk-board .rk-rating { color: inherit; font-size: 13px; text-align: right; }

/* waiting room: keep clear of the unit frames and the chat on the left */
@media (min-width: 1151px) {
	.overlay-center:has(.waiting-room) { padding-left: 330px !important; }
	body:has(.waiting-room) .chatframe { width: 300px; height: 210px; }
}
.rk-board li.muted { display: block; }

/* ---------- the hand: a fan of real cards above the action bar ---------- */
.hand { position: absolute !important; left: 50% !important; right: auto !important; bottom: calc(var(--hud-h, 90px) - 22px) !important; translate: -50% 0; z-index: 21; pointer-events: none; display: block !important; }
.hand-fan { display: flex; align-items: flex-end; justify-content: center; padding: 0 20px; }
.hcard { position: relative; margin: 0 -13px; padding: 0; border: 0; background: none; cursor: pointer; pointer-events: auto; z-index: var(--i);
	transform-origin: 50% 130%; transform: translateY(var(--y)) rotate(var(--a)); transition: transform .2s cubic-bezier(.2, .9, .3, 1.2), filter .2s; }
.hcard .ccard { --w: 104px; }
.hcard:hover, .hcard:focus-visible { transform: translateY(-78px) rotate(0) scale(1.8); z-index: 60; filter: none; }
.hcard.ok .ccard { box-shadow: 0 0.3em 0 rgba(0, 0, 0, .35), 0 1em 2em rgba(0, 0, 0, .45), 0 0 0 2px #8dff9a, 0 0 16px rgba(141, 255, 154, .55); }
.hcard.off { filter: saturate(.5) brightness(.78); }
.hcard.sel .ccard { box-shadow: 0 0 0 3px #ffd76a, 0 0 24px rgba(255, 215, 106, .85); }
.hcard.sel { transform: translateY(-34px) rotate(0); }
.hcard.discard .ccard { box-shadow: 0 0 0 2px #ff5a4a, 0 0 16px rgba(255, 90, 74, .6); }
.hcard.drawn { animation: hc-draw .75s cubic-bezier(.2, .9, .3, 1.15) both; }
@keyframes hc-draw { from { transform: translate(240px, 60px) rotate(30deg) scale(.4); opacity: 0; } }
.hcard.dragging { opacity: .35; }
.hc-why { position: absolute; left: 50%; bottom: 10px; translate: -50% 0; z-index: 5; padding: 2px 7px; border-radius: 99px; white-space: nowrap; font: 700 10px 'Alegreya', serif; color: #ffe0d8; background: rgba(40, 12, 8, .9); box-shadow: 0 0 0 1px rgba(255, 140, 120, .5); }
.hc-why.bad { background: #8a1d12; color: #fff; }
.hc-key { position: absolute; top: -7px; left: -5px; z-index: 5; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; font: 800 11px 'Alegreya', serif; color: #1a1206; background: linear-gradient(180deg, #ffe08a, #c9a24f); box-shadow: 0 2px 4px rgba(0, 0, 0, .5); }
.drag-ghost .hc-why, .drag-ghost .hc-key { display: none; }
.hud .objective { margin-bottom: var(--fan-h, 0px); }
.ab-pile { padding: 0; border: 0; background: none; cursor: pointer; }
.ab-pile .ccard-back { width: 38px; border-radius: 5px; box-shadow: inset 0 0 0 2px #c9a24f, 0 2px 0 #1e0603, 0 4px 0 #c9a24f, 0 6px 8px rgba(0, 0, 0, .5); }
.ab-pile .ccard-back .cb-crest { font-size: 18px; }
.ab-pile .ccard-back b { bottom: 2px; font-size: 11px; }
.ab-count { text-align: left; }
@media (max-width: 1150px) {
	.hcard .ccard { --w: 74px; }
	.hcard { margin: 0 -10px; }
	.hcard:hover { transform: translateY(-50px) scale(1.5); }
}
.hand > .hand-fan { pointer-events: none; }
.hcard.drag-ghost { position: fixed; margin: 0; transform: translate(-50%, -60%) rotate(-4deg) scale(1.1); transition: none; }