/* Trophy Room calculator (src/trophy.js), shared by the site and the desktop app */
.tr { --tr-panel: var(--panel, #1b2030); --tr-panel-2: var(--panel-2, #222940); --tr-line: var(--line, rgba(230, 233, 242, .1)); --tr-muted: var(--muted, rgba(230, 233, 242, .62)); --tr-accent: var(--accent, #2a8cff);
	--tr-0: #c98a55; --tr-1: #b9c3d3; --tr-2: #e3bb45;
	display: grid; gap: 14px; }
.tr .panel { background: var(--tr-panel); border: 1px solid var(--tr-line); border-radius: 12px; padding: 0 14px 14px; margin: 0; }
.tr .panel-head { display: flex; justify-content: space-between; align-items: center; margin: 0 -14px 12px; padding: 10px 14px; font-size: 15px; font-weight: 600; border-bottom: 2px solid var(--el, rgba(42, 140, 255, .55)); color: #fff; }

/* numbers */
.tr-big { display: flex; flex-direction: column; }
.tr-big-num { font-size: 30px; font-weight: 700; line-height: 1.1; color: #fff; font-variant-numeric: tabular-nums; }
.tr-big-label { color: var(--tr-muted); font-size: 13px; }
.tr-big--wins .tr-big-num { color: var(--tr-accent); }
.tr-tiers { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tr-tiers > div { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; width: 100%; }
.tr-tiers b { width: 54px; color: var(--tr-muted); font-weight: 500; font-size: 13px; }
.tr-tier { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: #11141c; background: var(--tr-0); white-space: nowrap; }
.tr-tier--1 { background: var(--tr-1); }
.tr-tier--2 { background: var(--tr-2); }
.tr-tier.is-off { opacity: .4; text-decoration: line-through; }
.tr-note { margin: 4px 0 0; color: var(--tr-muted); font-size: 13px; }
.tr-warn { color: #e7b75a; }
.tr-done { margin: 0; color: #5ecb8a; font-weight: 600; }

/* progress */
.tr-progress-body { display: grid; grid-template-columns: auto 1fr; gap: 14px 24px; align-items: start; }
.tr-progress .tr-tiers { gap: 8px; }
.tr-bars { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 6px 20px; }
.tr-bars li { display: grid; grid-template-columns: 56px 1fr 40px; gap: 2px 10px; align-items: center; }
.tr-bars small { grid-column: 2 / -1; color: var(--tr-muted); font-size: 12px; }
.tr-bars-name { font-weight: 600; color: var(--el); }
.tr-bars-num { text-align: right; font-variant-numeric: tabular-nums; }
.tr-bar, .tr-node-bar { height: 8px; border-radius: 4px; background: var(--tr-panel-2); overflow: hidden; }
.tr-bar i, .tr-node-bar i { display: block; height: 100%; background: var(--el, var(--tr-accent)); }

/* calculator */
.tr-calc-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 24px; align-items: start; }
.tr-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tr-fields label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--tr-muted); }
.tr-fields select { padding: 7px 8px; border-radius: 8px; border: 1px solid var(--tr-line); background: var(--tr-panel-2); color: inherit; font: inherit; color: #fff; }
.tr-mine { grid-column: 1; display: flex; gap: 8px; align-items: center; font-size: 13px; }
.tr-mine small { color: var(--tr-muted); }
.tr-result { grid-column: 2; grid-row: 1 / span 2; display: grid; gap: 10px; padding: 12px 14px; border-radius: 10px; background: var(--tr-panel-2); }

/* grid of elements: as in the game, Fire and Earth, Water and Wind, Light and Dark side by side, each with
   its banner on the left and Attack, Defense and Utility as 2 x 2 blocks */
.tr-gridWrap { container-type: inline-size; }
.tr-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@container (min-width: 1180px) { .tr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tr .tr-el { display: grid; grid-template-columns: 92px repeat(3, minmax(0, 1fr)); gap: 0; padding: 0; overflow: hidden;
	border-left: 3px solid var(--el); background: linear-gradient(90deg, color-mix(in srgb, var(--el) 26%, var(--tr-panel)) 0, var(--tr-panel) 55%); }
.tr-el-head { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 12px 8px; text-align: center;
	background: color-mix(in srgb, var(--el) 30%, transparent); border-right: 1px solid var(--tr-line); }
.tr-el-head img { width: 56px; height: 56px; border-radius: 50%; }
.tr-el-head h3 { margin: 0; font-size: 16px; font-weight: 700; color: var(--el); }
.tr-el-bar { width: 100%; height: 6px; }
.tr-el-total { color: var(--tr-muted); font-size: 11.5px; font-variant-numeric: tabular-nums; line-height: 1.2; }
.tr-cats { display: contents; }
.tr-cat { padding: 8px 8px 10px; min-width: 0; }
.tr-cat + .tr-cat { border-left: 1px solid var(--tr-line); }
.tr-cat h4 { margin: 0 0 6px; font-size: 13px; font-weight: 600; color: #fff; text-align: center; }
.tr-nodes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
.tr-node { display: flex; flex-direction: column; gap: 2px; padding: 6px 4px; border-radius: 8px; border: 1px solid var(--tr-line); background: var(--tr-panel-2); color: inherit; font: inherit; text-align: center; cursor: pointer; min-width: 0; }
.tr-node:hover, .tr-node.is-open { border-color: var(--el); }
.tr-node:focus-visible { outline: 2px solid var(--el); outline-offset: 1px; }
.tr-node-name { font-size: 11.5px; font-weight: 600; color: #fff; line-height: 1.2; overflow-wrap: anywhere; }
.tr-node-boost { font-size: 11px; color: var(--el); }
.tr-node-lv { font-size: 11.5px; font-variant-numeric: tabular-nums; }
.tr-node-bar { height: 5px; }
.tr-node-cost { font-size: 11px; color: var(--tr-muted); font-variant-numeric: tabular-nums; }
.tr-node.is-max { border-color: color-mix(in srgb, var(--el) 60%, transparent); }
.tr-node.is-max .tr-node-cost { color: #5ecb8a; }
.tr-hideMine .tr-node-lv, .tr-hideMine .tr-node-bar { visibility: hidden; }

/* one node's levels */
.tr-close { border: 0; background: none; color: var(--tr-muted); font: inherit; cursor: pointer; padding: 2px 6px; }
.tr-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tr-table th { text-align: left; color: var(--tr-muted); font-weight: 500; padding: 6px 8px; border-bottom: 1px solid var(--tr-line); }
.tr-table td { padding: 6px 8px; border-bottom: 1px solid var(--tr-line); font-variant-numeric: tabular-nums; }
.tr-table tr.is-done td { opacity: .45; }
.tr-app { color: var(--tr-muted, rgba(230, 233, 242, .62)); }

@media (max-width: 760px) {
	.tr-calc-body, .tr-progress-body { grid-template-columns: 1fr; }
	.tr-result { grid-column: 1; grid-row: auto; }
	.tr .tr-el { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.tr-el-head { grid-column: 1 / -1; flex-direction: row; border-right: 0; border-bottom: 1px solid var(--tr-line); }
	.tr-el-head img { width: 36px; height: 36px; }
	.tr-el-bar { width: 80px; }
	.tr-cat { padding: 6px 4px 8px; }
}