/* The interface, take 3 (index.html only: , set by src/hub3.js). Every screen in one
window under the client bar, the city dimmed around it; a compact head (icon, title, back) over a strip
of underlined tabs; lighter panels, buttons and cards in one set of bevels and colours, the same family
as the new Home and Play. */
.ui3 {
--v3-bg: #15111a;
--v3-win: rgba(21, 17, 26, 0.97);
--v3-panel: #201a27;
--v3-panel-2: #2a2232;
--v3-panel-3: #342a3d;
--v3-edge: #000;
--v3-rim: rgba(200, 105, 46, 0.55);
--v3-rim-soft: rgba(255, 246, 220, 0.08);
--v3-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
--v3-radius: 0px;
}
/* ------------------------------------------------------------------ the window */
.ui3 #app > .screen.win {
top: calc(var(--safe-t) + var(--hub-bar-h) + 12px);
bottom: calc(var(--safe-b) + var(--hub-bottom-h) + 12px);
left: 0;
right: 0;
width: min(1240px, calc(100vw - 32px));
margin: 0 auto;
background: var(--v3-win);
border: 3px solid var(--v3-edge);
box-shadow: inset 0 0 0 1px var(--v3-rim), 0 0 0 100vmax rgba(8, 6, 12, 0.5), 0 16px 44px rgba(0, 0, 0, 0.6);
}
@media (max-width: 760px) {
.ui3 #app > .screen.win { width: 100%; top: calc(var(--safe-t) + var(--hub-bar-h)); bottom: calc(var(--safe-b) + var(--hub-bottom-h)); border-width: 0; box-shadow: none; }
}
/* ------------------------------------------------------------------ the head: back, title, (its own buttons) */
.ui3 .screen.win > .screen-head {
min-height: 0;
padding: 12px 22px 10px;
gap: 12px;
background: linear-gradient(180deg, rgba(52, 38, 50, 0.9), rgba(30, 23, 36, 0.9));
border-bottom: 1px solid #000;
box-shadow: 0 1px 0 var(--v3-rim);
}
.ui3 .screen-head .title {
font-size: 20px;
letter-spacing: 2px;
color: var(--copper-hi);
text-shadow: 0 3px 0 var(--copper-dk), 0 0 14px rgba(240, 161, 74, 0.18);
}
.ui3 .screen-head > .btn.icon:first-child {
min-width: 36px; min-height: 36px; width: 36px; height: 36px; padding: 0;
background: rgba(0, 0, 0, 0.25); border: 1px solid var(--v3-rim); box-shadow: none;
}
.ui3 .screen-head > .btn.icon:first-child [data-hint] { display: none; }
.ui3 .screen-head > .btn.icon:first-child:hover { background: rgba(240, 161, 74, 0.15); }
.ui3 .screen-body { padding: 14px 26px 26px; }
@media (max-width: 760px) {
.ui3 .screen.win > .screen-head { padding: 8px 12px; }
.ui3 .screen-head .title { font-size: 15px; }
.ui3 .screen-body { padding: 10px 12px 18px; }
}
/* ------------------------------------------------------------------ tabs: an underlined strip */
.ui3 .tabs {
justify-content: flex-start;
gap: 0;
border-bottom: 1px solid rgba(255, 246, 220, 0.1);
margin-bottom: 14px;
}
.ui3 .tabs .btn {
min-height: 40px;
padding: 4px 16px;
font-size: var(--fs-xs);
text-transform: uppercase;
letter-spacing: 1px;
color: var(--muted);
background: none;
border: 0;
border-bottom: 3px solid transparent;
box-shadow: none;
text-shadow: none;
}
.ui3 .tabs .btn:hover:not(:disabled) { color: var(--text); background: rgba(255, 255, 255, 0.04); filter: none; }
.ui3 .tabs .btn.on { color: var(--gold); border-bottom-color: var(--gold); background: linear-gradient(0deg, rgba(245, 197, 66, 0.12), transparent); filter: none; }
.ui3 .tabs .btn.on::after { display: none; }
.ui3 .tabs .btn canvas, .ui3 .tabs .btn img { opacity: 0.75; }
.ui3 .tabs .btn.on canvas, .ui3 .tabs .btn.on img { opacity: 1; }
.ui3 .tabs .kbd, .ui3 .tabs > .hint { opacity: 0.55; }
/* ------------------------------------------------------------------ panels */
.ui3 .panel {
background: linear-gradient(180deg, var(--v3-panel-2), var(--v3-panel));
border: 2px solid var(--v3-edge);
border-image: none;
box-shadow: inset 0 0 0 1px var(--v3-rim), inset 0 1px 0 rgba(255, 246, 220, 0.06), var(--v3-shadow);
padding: 12px 14px;
}
.ui3 .panel.flat { box-shadow: inset 0 0 0 1px var(--v3-rim-soft); background: var(--v3-panel); }
.ui3 .panel.inset { background: #120e17; border: 2px solid #000; border-image: none; box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(255, 246, 220, 0.04); }
.ui3 .panel > .tab { border: 2px solid #000; border-image: none; background: var(--v3-panel-3); box-shadow: inset 0 0 0 1px var(--v3-rim); }
.ui3 .h2 { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; }
/* ------------------------------------------------------------------ buttons: a bevel, one look */
.ui3 .btn {
min-height: 40px;
padding: 6px 16px;
background: linear-gradient(180deg, #3d3247, #2a2232);
border: 2px solid #000;
border-image: none;
box-shadow: inset 0 1px 0 rgba(255, 246, 220, 0.14), inset 0 -3px 0 rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(200, 105, 46, 0.35);
}
.ui3 .btn:hover:not(:disabled) { filter: brightness(1.15); }
.ui3 .btn.primary {
background: linear-gradient(180deg, #d8463e, #9c2229);
box-shadow: inset 0 1px 0 rgba(255, 220, 200, 0.35), inset 0 -3px 0 rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.2);
}
.ui3 .btn.teal { color: var(--teal-hi); box-shadow: inset 0 1px 0 rgba(255, 246, 220, 0.14), inset 0 -3px 0 rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(63, 224, 184, 0.45); }
.ui3 .btn.small { min-height: 32px; padding: 2px 10px; }
.ui3 .btn.big { min-height: 54px; padding: 8px 26px; }
.ui3 .btn.link { background: none; border: 0; box-shadow: none; }
.ui3 .btn.selected { box-shadow: 0 0 0 2px var(--teal), 0 0 14px rgba(63, 224, 184, 0.45); }
/* ------------------------------------------------------------------ cards (champions, mascots, skins...) */
.ui3 .card {
border: 2px solid #000;
border-image: none;
background: radial-gradient(ellipse at 50% 34%, #3d3249 0, #2a2232 46%, #1e1826 100%);
box-shadow: inset 0 0 0 1px var(--v3-rim), inset 0 1px 0 rgba(255, 246, 220, 0.07), 0 4px 10px rgba(0, 0, 0, 0.4);
padding: 10px 6px 8px;
transition: transform 0.1s, box-shadow 0.1s;
}
.ui3 .card:hover { transform: translateY(-2px); filter: none; box-shadow: inset 0 0 0 1px var(--copper-hi), 0 0 0 1px rgba(240, 161, 74, 0.5), 0 8px 16px rgba(0, 0, 0, 0.5); }
.ui3 .card .name { margin-top: 2px; }
.ui3 .card.locked { filter: grayscale(1) brightness(0.5); }
.ui3 .card.locked:hover { transform: none; }
/* ------------------------------------------------------------------ inputs, chips, windows, tooltips */
.ui3 .input, .ui3 select.input { background: #120e17; border: 2px solid #000; border-image: none; box-shadow: inset 0 0 0 1px rgba(255, 246, 220, 0.08), inset 0 2px 4px rgba(0, 0, 0, 0.5); }
.ui3 .chip { border-radius: 0; }
.ui3 .modal {
background: linear-gradient(180deg, #2a2232, #1c1723);
border: 3px solid #000;
border-image: none;
box-shadow: inset 0 0 0 1px var(--v3-rim), 0 18px 48px rgba(0, 0, 0, 0.65);
}
.ui3 .modal::before, .ui3 .modal::after { display: none; }
.ui3 #tooltip {
border: 2px solid #000;
border-image: none;
background: rgba(24, 19, 30, 0.97);
box-shadow: inset 0 0 0 1px var(--v3-rim), 0 8px 20px rgba(0, 0, 0, 0.55);
}
/* the client bar: a little calmer, a copper hairline under it */
.ui3 .hub-bar { box-shadow: 0 1px 0 var(--v3-rim), 0 8px 18px rgba(0, 0, 0, 0.45); border-bottom: 2px solid #000; }
/* ================================================================== the client bar */
.ui3 .hub-bar { background: linear-gradient(180deg, #1c1622, #141018); }
.ui3 .hub-tab, .ui3 .hub-btab {
background: none; border: 0; box-shadow: none; text-shadow: none;
border-bottom: 3px solid transparent; min-height: 0;
}
.ui3 .hub-tab { height: 100%; padding: 0 14px; }
.ui3 .hub-tab:hover:not(:disabled) { background: rgba(255, 255, 255, 0.05); filter: none; }
.ui3 .hub-tab.on { color: var(--gold); border-bottom-color: var(--gold); background: linear-gradient(0deg, rgba(245, 197, 66, 0.14), transparent); }
/* PLAY: the gold angled button */
.ui3 .hub-play {
min-height: 0; height: 42px; padding: 0 26px;
color: #241405; text-shadow: 0 1px 0 rgba(255, 240, 200, 0.5);
background: linear-gradient(180deg, #ffe08a 0%, #f0a14a 55%, #c8692e 100%);
border: 2px solid #000;
box-shadow: inset 0 2px 0 rgba(255, 250, 230, 0.7), inset 0 -4px 0 rgba(122, 58, 28, 0.6);
}
.ui3 .hub-play:hover:not(:disabled) { filter: brightness(1.1); }
.ui3 .hub-play.on { background: linear-gradient(180deg, #fff1b8, #f5c542 60%, #c98f2a); }
.ui3 .hub-bplay {
background: linear-gradient(180deg, #ffe08a, #f0a14a 55%, #c8692e); border: 2px solid #000;
box-shadow: inset 0 2px 0 rgba(255, 250, 230, 0.7), inset 0 -4px 0 rgba(122, 58, 28, 0.6);
}
.ui3 .hub-tools .btn { min-width: 34px; min-height: 34px; padding: 2px; background: rgba(0, 0, 0, 0.25); border: 1px solid var(--v3-rim); box-shadow: none; }
.ui3 .hub-me { background: linear-gradient(180deg, #2a2232, #1c1723); border: 2px solid #000; box-shadow: inset 0 0 0 1px var(--v3-rim); }
.ui3 .hub-bar .currencies .cur { background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 246, 220, 0.1); box-shadow: none; }
/* ================================================================== champion select (draft, Fast) */
.ui3 .dr-head, .ui3 .dr-choice-bar {
background: linear-gradient(180deg, rgba(52, 38, 50, 0.95), rgba(28, 22, 34, 0.95));
border: 2px solid #000; border-image: none;
}
.ui3 .dr-title .t { font-size: 13px; letter-spacing: 1px; }
.ui3 .dr-steps { border-width: 1px; background: rgba(0, 0, 0, 0.4); }
.ui3 .dr-team { background: linear-gradient(180deg, var(--v3-panel-2), var(--v3-panel)); }
.ui3 .dr-team.p0 { box-shadow: inset 0 3px 0 var(--blue), inset 0 0 0 1px rgba(76, 134, 240, 0.35), var(--v3-shadow); }
.ui3 .dr-team.p1 { box-shadow: inset 0 3px 0 var(--team-red), inset 0 0 0 1px rgba(224, 74, 62, 0.35), var(--v3-shadow); }
.ui3 .dr-team-head b { font-family: var(--font-title); font-size: 11px; letter-spacing: 1px; }
.ui3 .dr-slot { background: #120e17; border: 1px dashed rgba(255, 246, 220, 0.15); }
.ui3 .dr-slot.filled { border: 2px solid #000; background: radial-gradient(circle at 50% 36%, #43374f, #1d1724 74%); box-shadow: inset 0 0 0 1px var(--v3-rim); }
.ui3 .dr-team.p0 .dr-slot.filled { box-shadow: inset 0 -3px 0 rgba(76, 134, 240, 0.7), inset 0 0 0 1px rgba(76, 134, 240, 0.4); }
.ui3 .dr-team.p1 .dr-slot.filled { box-shadow: inset 0 -3px 0 rgba(224, 74, 62, 0.7), inset 0 0 0 1px rgba(224, 74, 62, 0.4); }
/* the pool's tiles: a plinth for the portrait, the name under it */
.ui3 .champ-tile {
border: 2px solid #000; border-image: none;
background: linear-gradient(180deg, #2e2638, #201a27);
box-shadow: inset 0 0 0 1px var(--v3-rim-soft), 0 3px 8px rgba(0, 0, 0, 0.4);
padding: 8px 4px 6px;
}
.ui3 .champ-tile:not(.disabled):hover { box-shadow: inset 0 0 0 1px var(--copper-hi), 0 6px 14px rgba(0, 0, 0, 0.5); filter: none; }
.ui3 .ct-icon { border: 0; background: radial-gradient(ellipse at 50% 60%, #4a3d58 0, #2a2232 62%, transparent 72%); box-shadow: none; }
.ui3 .ct-tier { border: 1px solid #000; background: #2a2232; box-shadow: inset 0 0 0 1px var(--v3-rim); }
.ui3 .champ-tile.chosen { box-shadow: 0 0 0 2px var(--gold), 0 0 16px rgba(245, 197, 66, 0.45); }
.ui3 .pool, .ui3 .dr-pool { background: rgba(14, 11, 18, 0.6); }
/* ================================================================== the battle: rosters, action bar, chronicle */
.ui3 .battle:not(.narrow) .roster {
background: linear-gradient(180deg, rgba(34, 27, 42, 0.94), rgba(20, 16, 26, 0.94));
border: 2px solid #000; border-top: 3px solid var(--line);
box-shadow: inset 0 0 0 1px var(--v3-rim-soft), var(--v3-shadow);
}
.ui3 .battle:not(.narrow) .roster.p0 { border-top-color: var(--blue); }
.ui3 .battle:not(.narrow) .roster.p1 { border-top-color: var(--team-red); }
.ui3 .roster-hero { background: rgba(10, 8, 14, 0.55); border: 1px solid #000; box-shadow: inset 0 0 0 1px rgba(255, 246, 220, 0.06); }
.ui3 .roster-hero:hover { box-shadow: inset 0 0 0 1px var(--copper-hi); }
.ui3 .action-bar:not(:empty) {
background: linear-gradient(180deg, #2a2232, #1c1723); border: 2px solid #000; border-image: none;
box-shadow: inset 0 0 0 1px var(--v3-rim), 0 10px 24px rgba(0, 0, 0, 0.55);
}
.ui3 .chronicle { border-image: none; }
.ui3 .chronicle.panel, .ui3 .panel.chronicle { background: linear-gradient(180deg, rgba(34, 27, 42, 0.95), rgba(20, 16, 26, 0.95)); }
/* ================================================================== results */
.ui3 .screen-results .title { letter-spacing: 3px; }
/* ================================================================== the Inventory: grid | panel */
.ui3 .inv { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 18px; align-items: start; }
.ui3 .inv-grid { grid-template-columns: repeat(auto-fill, minmax(102px, 1fr)); gap: 8px; }
.ui3 .inv-grid .card { padding: 8px 4px 6px; }
.ui3 .inv-grid .card .name { font-size: 12px; }
.ui3 .inv-grid .card .sub { font-size: 10px; }
.ui3 .inv-detail { position: sticky; top: 0; display: flex; flex-direction: column; gap: 10px; padding: 16px; }
.ui3 .inv-hero { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 14px; align-items: center; }
.ui3 .inv-pic { width: 128px; height: 128px; display: grid; place-items: center;
background: radial-gradient(ellipse at 50% 70%, rgba(63, 224, 184, 0.16), transparent 62%), radial-gradient(circle at 50% 42%, #43374f, #1d1724 72%);
border: 2px solid #000; box-shadow: inset 0 0 0 1px var(--v3-rim); }
.ui3 .inv-pic canvas { width: 128px; height: 128px; image-rendering: pixelated; }
.ui3 .inv-pic.holo { box-shadow: inset 0 0 0 1px #c8a0ff, 0 0 14px rgba(200, 160, 255, 0.45); }
.ui3 .inv-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ui3 .inv-name { font-family: var(--font-title); font-size: 16px; color: var(--copper-hi); text-shadow: 0 2px 0 var(--copper-dk); }
.ui3 .inv-stats { display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.ui3 .inv-stats > span { display: flex; flex-direction: column; align-items: center; min-width: 56px; padding: 3px 8px; background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 246, 220, 0.08); }
.ui3 .inv-stats small { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }
.ui3 .inv-stats b.num { font-size: 22px; }
.ui3 .inv-bar { display: flex; flex-direction: column; gap: 2px; }
.ui3 .inv-tabs { margin: 4px 0 0; }
.ui3 .inv-tabs .btn { padding: 4px 10px; }
/* the paper doll: three gear slots */
.ui3 .inv-doll { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ui3 .inv-slot { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 6px 8px; text-align: center; font: inherit; color: var(--text); cursor: pointer;
background: linear-gradient(180deg, #2e2638, #1d1724); border: 2px solid #000; box-shadow: inset 0 0 0 1px var(--v3-rim-soft); }
.ui3 .inv-slot:hover { box-shadow: inset 0 0 0 1px var(--copper-hi); }
.ui3 .inv-slot.on { box-shadow: 0 0 0 2px var(--gold), inset 0 0 0 1px var(--gold); }
.ui3 .inv-slot-ico { width: 52px; height: 52px; display: grid; place-items: center; background: #120e17; border: 1px solid #000; box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.6); }
.ui3 .inv-slot-ico canvas, .ui3 .inv-slot-ico img { width: 40px; height: 40px; image-rendering: pixelated; }
.ui3 .inv-plus { font-size: 22px; color: var(--muted); }
.ui3 .inv-slot b { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui3 .inv-fits { max-height: 280px; overflow-y: auto; }
.ui3 .inv-fits .list-item.on { box-shadow: inset 0 0 0 1px var(--gold); }
@media (max-width: 900px) {
.ui3 .inv { grid-template-columns: minmax(0, 1fr); }
.ui3 .inv-detail { position: static; }
}
/* the numbers with their items' bonus; the gear's effects under them */
.ui3 .inv-buff { font-style: normal; font-size: 11px; color: var(--good); cursor: help; border-bottom: 1px dotted rgba(95, 208, 104, 0.6); }
.ui3 .inv-gearfx { display: flex; flex-direction: column; gap: 3px; padding: 6px 8px; background: rgba(0, 0, 0, 0.25); border: 1px solid rgba(255, 246, 220, 0.07); }
.ui3 .inv-gearfx canvas, .ui3 .inv-gearfx img { width: 18px; height: 18px; image-rendering: pixelated; }
.ui3 .inv-stats > span.inv-reach { align-items: flex-start; gap: 4px; flex: 1 1 100%; }
.ui3 .inv-reach .reach-grid { grid-template-columns: repeat(3, 12px); }
.ui3 .inv-reach .reach-grid i { width: 12px; height: 12px; }
/* ================================================================== widths, sections */
.ui3 .max-s { max-width: 820px; }
.ui3 .max-m { max-width: 980px; }
/* a panel's tab: a heading inside it, not a label floating on its edge */
.ui3 .panel.has-tab { margin-top: 0; padding-top: 12px; }
.ui3 .panel > .tab {
position: static; transform: none; display: inline-block; align-self: flex-start;
margin: 0 0 8px; padding: 2px 10px 2px 8px;
font-family: var(--font-title); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--teal);
background: none; border: 0; border-left: 3px solid var(--teal); box-shadow: none;
white-space: normal; max-width: 100%; overflow-wrap: anywhere; /* (a long title wraps instead of running off a phone) */
}
/* lists and rows */
.ui3 .list-item { background: linear-gradient(180deg, #2a2232, #211b28); border: 2px solid #000; border-image: none; box-shadow: inset 0 0 0 1px var(--v3-rim-soft); }
.ui3 .list-item:hover:not(:disabled) { box-shadow: inset 0 0 0 1px var(--copper-hi); }
/* the toggles and sliders of Settings */
.ui3 .toggle { background: rgba(0, 0, 0, 0.22); border: 1px solid rgba(255, 246, 220, 0.08); border-image: none; box-shadow: none; }
.ui3 .toggle:hover { background: rgba(255, 255, 255, 0.04); }
/* currencies in a head (the bar has them already) */
.ui3 .screen.win .screen-head .currencies { display: none; }
/* ================================================================== a window with no bar above it (results, a game's own screens) */
.ui3:not(.hub-bar-on) #app > .screen.win { top: calc(var(--safe-t) + 12px); bottom: calc(var(--safe-b) + 12px); }
/* (phones: the whole screen, top to bottom, its content clear of the notch and the home bar) */
@media (max-width: 760px) {
.ui3:not(.hub-bar-on) #app > .screen.win { top: 0; bottom: 0; padding-top: var(--safe-t); padding-bottom: var(--safe-b); }
}
/* ================================================================== Profile: the playercard as the page's hero */
.ui3 .screen-profile .playercard { max-width: none; width: 100%; aspect-ratio: auto; height: 150px; box-shadow: inset 0 0 0 1px var(--v3-rim), 0 8px 20px rgba(0, 0, 0, 0.45); }
.ui3 .screen-profile .playercard .pc-emblem, .ui3 .screen-profile .playercard .pc-frame { left: 24px; top: 15px; height: 120px; }
.ui3 .screen-profile .playercard .pc-text { left: 170px; right: 160px; }
.ui3 .screen-profile .playercard .pc-name { font-size: 22px; }
.ui3 .screen-profile .playercard .pc-sub { font-size: 14px; }
.ui3 .screen-profile .playercard .pc-rank { right: 24px; top: 15px; height: 120px; }
@media (max-width: 760px) {
.ui3 .screen-profile .playercard { height: 96px; }
.ui3 .screen-profile .playercard .pc-emblem, .ui3 .screen-profile .playercard .pc-frame, .ui3 .screen-profile .playercard .pc-rank { height: 72px; top: 12px; left: 10px; }
.ui3 .screen-profile .playercard .pc-rank { left: auto; right: 10px; }
.ui3 .screen-profile .playercard .pc-text { left: 92px; right: 88px; }
.ui3 .screen-profile .playercard .pc-name { font-size: 14px; }
}
/* ================================================================== results */
.ui3 .screen-results .title { font-size: 40px; letter-spacing: 4px; }
/* ================================================================== the Shop: product tiles */
.ui3 .screen-shop .panel { transition: transform 0.1s, box-shadow 0.1s; }
.ui3 .screen-shop .grid .panel:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--copper-hi), 0 10px 22px rgba(0, 0, 0, 0.5); }
.ui3 .screen-shop .btn.small { min-width: 70px; }
/* ================================================================== phones: the bottom bar as a box of square buttons
(like the battle's action bar): each tab a framed square, its icon and its name inside; PLAY a gold square.
The bar sits flush on the screen's sides and bottom (down through the phone's safe area), and the screens
end where it starts, so nothing of the background shows around it. */
@media (max-width: 760px) {
.ui3 { --hub-bottom-h: 74px; }
.ui3 .hub-bottom {
left: 0; right: 0; bottom: 0; height: auto; padding: 6px 6px calc(6px + var(--safe-b));
grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: stretch; gap: 6px;
background: linear-gradient(180deg, #2a2232, #1c1723);
border: 0; border-top: 2px solid #000;
box-shadow: inset 0 1px 0 var(--v3-rim), 0 -6px 18px rgba(0, 0, 0, 0.5);
}
.ui3 .hub-btab, .ui3 .hub-bplay {
height: 60px; min-height: 0; margin: 0; padding: 4px 2px 3px;
flex-direction: column; justify-content: center; gap: 3px;
border-radius: 0; font-size: 10px; line-height: 1.1;
border: 2px solid #000;
}
.ui3 .hub-btab {
color: var(--text-2);
background: linear-gradient(180deg, #3d3247, #2a2232);
box-shadow: inset 0 1px 0 rgba(255, 246, 220, 0.14), inset 0 -3px 0 rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(200, 105, 46, 0.35);
}
.ui3 .hub-btab.on { color: var(--gold); box-shadow: 0 0 0 2px var(--gold), inset 0 0 0 1px var(--gold), inset 0 -3px 0 rgba(0, 0, 0, 0.35); }
.ui3 .hub-btab canvas, .ui3 .hub-btab img { width: 22px; height: 22px; image-rendering: pixelated; }
.ui3 .hub-btab .lbl { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* PLAY: a gold square, a little taller than the others */
.ui3 .hub-bplay {
height: 68px; margin-top: -8px;
font-family: var(--font-title); font-size: 10px; letter-spacing: 1px; color: #241405;
background: linear-gradient(180deg, #ffe08a 0%, #f0a14a 55%, #c8692e 100%);
box-shadow: inset 0 2px 0 rgba(255, 250, 230, 0.7), inset 0 -4px 0 rgba(122, 58, 28, 0.6), 0 0 0 1px rgba(0, 0, 0, 0.3);
}
.ui3 .hub-bplay.on { background: linear-gradient(180deg, #fff1b8, #f5c542 60%, #c98f2a); }
.ui3 .hub-bplay canvas, .ui3 .hub-bplay img { width: 26px; height: 26px; }
}
/* ================================================================== the bar's player box: your calling card behind
your picture, clan tag, name and level (as on your profile), the same sizes, the box wider to fit the card */
.ui3 .hub-me.with-banner {
position: relative; overflow: hidden; isolation: isolate;
width: 236px; min-width: 236px; max-width: 236px; height: 50px; padding: 4px 10px 4px 5px;
grid-template-columns: 40px minmax(0, 1fr);
}
.ui3 .hub-me .hub-banner { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.ui3 .hub-me.with-banner::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(10, 8, 14, 0.55), rgba(10, 8, 14, 0.15) 70%); }
.ui3 .hub-me.with-banner .hub-pic { background: rgba(10, 8, 14, 0.55); }
.ui3 .hub-me.with-banner .hub-who b { color: #fff; text-shadow: 0 2px 0 #000, 0 0 4px #000; }
.ui3 .hub-me.with-banner .hub-who small { color: #e8dcc8; text-shadow: 0 1px 0 #000, 0 0 4px #000; }
.ui3 .hub-me .hub-clan { color: var(--gold); }
.ui3 .hub-me.with-banner .hub-xp { background: rgba(0, 0, 0, 0.6); }
@media (max-width: 760px) {
/* phones: the avatar alone, no box around it */
.ui3 .hub-me, .ui3 .hub-me.with-banner { width: 44px; min-width: 0; max-width: none; height: 44px; padding: 0; grid-template-columns: 44px; background: none; border: 0; box-shadow: none; }
.ui3 .hub-me.with-banner .hub-banner, .ui3 .hub-me.with-banner::after { display: none; }
.ui3 .hub-me .hub-pic, .ui3 .hub-me.with-banner .hub-pic { width: 44px; height: 44px; background: none; border: 0; }
.ui3 .hub-me .hub-pic canvas { width: 40px; height: 40px; }
}
/* the medal on the right of the bar's player box (desktop), as on the profile's card */
.ui3 .hub-me.with-banner { width: 270px; min-width: 270px; max-width: 270px; grid-template-columns: 40px minmax(0, 1fr) 36px; }
.ui3 .hub-me .hub-medal { grid-column: 3; grid-row: 1 / 3; width: 36px; height: 36px; image-rendering: pixelated; filter: drop-shadow(0 2px 0 #000); }
@media (max-width: 760px) { .ui3 .hub-me .hub-medal { display: none; } }
@media (max-width: 760px) {
.ui3 .hub-me.with-banner { width: 44px; min-width: 0; max-width: none; grid-template-columns: 44px; }
}
/* the Inventory's items: tiles (picture, name, what it gives, ×count, a badge when worn) | the panel */
.ui3 .chip-btn.on { box-shadow: inset 0 0 0 1px var(--gold); color: var(--gold); }
.ui3 .it-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.ui3 .it-tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 8px 8px; text-align: center; font: inherit; color: var(--text); cursor: pointer;
background: linear-gradient(180deg, #2e2638, #1d1724); border: 2px solid #000; box-shadow: inset 0 0 0 1px var(--v3-rim-soft); }
.ui3 .it-tile:hover { box-shadow: inset 0 0 0 1px var(--copper-hi); }
.ui3 .it-tile.r-rare { box-shadow: inset 0 0 0 1px var(--rarity-rare); }
.ui3 .it-tile.r-epic { box-shadow: inset 0 0 0 1px var(--rarity-epic); }
.ui3 .it-tile.r-legendary { box-shadow: inset 0 0 0 1px var(--rarity-legendary), 0 0 8px rgba(245, 166, 35, 0.25); }
.ui3 .it-tile.selected { box-shadow: 0 0 0 2px var(--gold), inset 0 0 0 1px var(--gold); }
.ui3 .it-pic { width: 56px; height: 56px; display: grid; place-items: center; background: #120e17; border: 1px solid #000; box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.6); }
.ui3 .it-pic canvas, .ui3 .it-pic img { width: 48px; height: 48px; image-rendering: pixelated; }
.ui3 .it-name { font-size: 12px; line-height: 1.2; }
.ui3 .it-perk { font-size: 10.5px; line-height: 1.25; color: var(--muted); }
.ui3 .it-eq { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; display: grid; place-items: center; cursor: help;
background: #120e17; border: 1px solid var(--gold); border-radius: 50%; overflow: hidden; }
.ui3 .it-eq canvas, .ui3 .it-eq img { width: 18px; height: 18px; image-rendering: pixelated; }
.ui3 .inv-pic.it-big canvas, .ui3 .inv-pic.it-big img { width: 96px; height: 96px; }
.ui3 .it-champs { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; max-height: 260px; overflow-y: auto; }
.ui3 .it-champ { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; font: inherit; color: var(--text); cursor: pointer;
background: rgba(0, 0, 0, 0.25); border: 1px solid #000; box-shadow: inset 0 0 0 1px var(--v3-rim-soft); }
.ui3 .it-champ:hover { box-shadow: inset 0 0 0 1px var(--copper-hi); }
.ui3 .it-champ.on { box-shadow: inset 0 0 0 2px var(--gold); }
.ui3 .it-champ small { font-size: 10px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui3 .it-check { position: absolute; top: 2px; right: 4px; color: var(--gold); font-size: 12px; }
@media (max-width: 600px) { .ui3 .it-grid { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); } }
.ui3 .it-head { font-family: var(--font-title); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--copper-hi); margin-top: 4px; }
/* the Shop's Crafting */
.ui3 .craft-head { align-items: center; margin-bottom: 10px; }
.ui3 .craft-funds { align-items: center; padding: 4px 12px; background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(200, 160, 255, 0.35); }
.ui3 .craft-funds b { font-size: 20px; color: #c8a0ff; }
.ui3 .craft-items .card { gap: 4px; }
.ui3 .craft-perk { font-size: 10.5px; line-height: 1.25; text-align: center; }
/* ================================================================== phones: the tabs as a burger menu, the patrol on top */
.tabs-burger { display: none; }
.tabs-menu { position: fixed; z-index: 60; display: flex; flex-direction: column; gap: 2px; padding: 6px; max-height: 70vh; overflow-y: auto;
background: linear-gradient(180deg, #2a2232, #1c1723); border: 2px solid #000; box-shadow: inset 0 0 0 1px var(--v3-rim, rgba(200, 105, 46, 0.4)), 0 12px 28px rgba(0, 0, 0, 0.6); }
.tabs-menu-item { position: relative; display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 6px 12px; text-align: left; font: inherit; font-size: 14px; color: var(--text-2, #c7b9a8); background: none; border: 0; cursor: pointer; }
.tabs-menu-item canvas, .tabs-menu-item img { width: 20px; height: 20px; image-rendering: pixelated; }
.tabs-menu-item:hover, .tabs-menu-item:focus-visible { background: rgba(255, 246, 220, 0.06); outline: none; }
.tabs-menu-item.on { color: var(--gold); background: rgba(245, 197, 66, 0.08); box-shadow: inset 3px 0 0 var(--gold); }
.tabs-menu-item .tb-check { margin-left: auto; color: var(--gold); }
.tabs-menu-item.badge::after { top: 50%; right: 12px; transform: translateY(-50%); }
@media (max-width: 760px) {
.ui3 .tabs > .btn, .ui3 .tabs > [data-hint] { display: none; }
.ui3 .tabs { display: block; overflow: visible; }
.ui3 .tabs-burger {
position: relative; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 6px 12px;
font: inherit; font-size: 14px; color: var(--gold); cursor: pointer; text-align: left;
background: linear-gradient(180deg, #3d3247, #2a2232); border: 2px solid #000;
box-shadow: inset 0 1px 0 rgba(255, 246, 220, 0.14), inset 0 -3px 0 rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(200, 105, 46, 0.35);
}
.ui3 .tabs-burger canvas { width: 18px; height: 18px; image-rendering: pixelated; }
.ui3 .tabs-burger .tb-ico { font-size: 18px; color: var(--text-2, #c7b9a8); }
.ui3 .tabs-burger .tb-lbl { flex: 1; }
.ui3 .tabs-burger .tb-caret { color: var(--text-2, #c7b9a8); }
.ui3 .tabs-burger.badge::after { top: -6px; right: -6px; }
/* the patrol: a strip under the top bar (head line, its HP bars when open), the screens below it */
.ui3.hub-bar-on body > .patrol-widget {
left: 6px; right: 6px; top: calc(var(--safe-t) + var(--hub-bar-h) + 6px); bottom: auto; width: auto; z-index: 39;
}
.ui3.hub-bar-on body > .patrol-widget .pw-stage { display: none; }
.ui3.hub-bar-on:has(body > .patrol-widget) #app > .screen { top: calc(var(--safe-t) + var(--hub-bar-h) + var(--pw-h, 92px)); }
}
.ui3 .it-grid { padding-top: 20px; row-gap: 26px; }
/* the count cards and the wearer lower in the tile: clear of its top border and of the EQUIPPED tag */
.ui3 .it-tile .it-stack { top: 16px; left: 8px; }
.ui3 .it-tile .it-eq { top: 14px; right: 8px; }
.ui3 .it-tile { padding-top: 16px; }
/* comparing two items */
.it-compare { padding: 8px 10px; background: rgba(0, 0, 0, 0.22); border: 1px solid rgba(255, 246, 220, 0.07); }
.it-cmp { width: 100%; border-collapse: collapse; }
.it-cmp th, .it-cmp td { padding: 4px 6px; text-align: center; border-bottom: 1px solid rgba(255, 246, 220, 0.06); }
.it-cmp td:first-child { text-align: left; color: var(--text-2, #c7b9a8); }
.it-cmp td.good { color: var(--good); font-weight: bold; }
.it-cmp-pic canvas { width: 32px; height: 32px; image-rendering: pixelated; }
/* the paper doll (the equipment preview): the champion in the middle, the weapon left, the trinket right, the armour below */
.ui3 .inv-doll.doll2 { position: relative; display: grid; grid-template-columns: 1fr 120px 1fr; grid-template-rows: auto auto; gap: 10px; justify-items: center; align-items: center;
padding: 16px 10px; background: rgba(0, 0, 0, 0.25); border: 2px solid #000; box-shadow: inset 0 0 0 1px rgba(255, 246, 220, 0.06); }
.ui3 .doll2 .doll-champ { grid-column: 2; grid-row: 1; display: grid; place-items: center; width: 120px; height: 120px;
background: radial-gradient(circle at 50% 60%, rgba(245, 197, 66, 0.12), transparent 65%); }
.ui3 .doll2 .doll-champ canvas { width: 96px; height: 96px; image-rendering: pixelated; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, 0.6)); }
.ui3 .doll2 .inv-slot { width: 100%; max-width: 128px; }
.ui3 .doll2 .inv-slot.at-w { grid-column: 1; grid-row: 1; }
.ui3 .doll2 .inv-slot.at-t { grid-column: 3; grid-row: 1; }
.ui3 .doll2 .inv-slot.at-a { grid-column: 2; grid-row: 2; }
.ui3 .doll2 .inv-slot.full.q-rare { box-shadow: inset 0 0 0 2px var(--rarity-rare); }
.ui3 .doll2 .inv-slot.full.q-epic { box-shadow: inset 0 0 0 2px var(--rarity-epic); }
.ui3 .doll2 .inv-slot.full.q-legendary { box-shadow: inset 0 0 0 2px var(--rarity-legendary), 0 0 10px rgba(245, 166, 35, 0.35); }
.ui3 .doll2 .inv-slot.on { box-shadow: 0 0 0 2px var(--gold), inset 0 0 0 1px var(--gold); }
.doll-bonus { display: flex; flex-direction: column; gap: 0; padding: 10px 12px; background: rgba(0, 0, 0, 0.25); border: 2px solid #000; box-shadow: inset 0 0 0 1px rgba(245, 197, 66, 0.35); }
.doll-bonus-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid rgba(255, 246, 220, 0.07); font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; }
.doll-bonus-row canvas { width: 18px; height: 18px; image-rendering: pixelated; }
.doll-bonus-row small { text-transform: none; letter-spacing: 0; }
/* the boosts (every item that fits the champion) */
.boost-sec { font-family: var(--font-title); font-size: 11px; letter-spacing: 3px; color: var(--teal); text-transform: uppercase; margin-top: 4px; }
.boost-sec.miss { color: var(--muted); }
.boost { display: flex; flex-direction: column; gap: 6px; padding: 10px; background: rgba(0, 0, 0, 0.25); border: 2px solid #000; box-shadow: inset 0 0 0 1px rgba(255, 246, 220, 0.07); }
.boost-head { display: flex; gap: 10px; align-items: center; }
.boost-pic { width: 50px; height: 50px; flex: 0 0 auto; display: grid; place-items: center; background: #120e17; border: 2px solid #000; box-shadow: inset 0 0 0 1px rgba(255, 246, 220, 0.12); }
.boost-pic canvas { width: 40px; height: 40px; image-rendering: pixelated; }
.boost.missing .boost-pic canvas { filter: grayscale(1) brightness(0.7); }
.boost-tag { align-self: flex-start; padding: 2px 8px; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; border: 1px solid; }
.boost-tag.miss { color: var(--muted); border-color: rgba(255, 246, 220, 0.25); }
.boost-tag.eq { color: var(--good); border-color: rgba(95, 208, 104, 0.6); background: rgba(95, 208, 104, 0.1); }
.boost-tag.own { color: var(--gold); border-color: rgba(245, 197, 66, 0.55); background: rgba(245, 197, 66, 0.08); }
.boost-perk { font-size: 12px; color: var(--good); }
.boost-perk::before { content: "✦ "; color: #fff1a0; }
.boost-how { font-family: var(--font-title); font-size: 10px; letter-spacing: 2px; color: #8cc0ff; text-transform: uppercase; }
.boost-src { display: flex; align-items: center; gap: 8px; }
.boost-src canvas { width: 20px; height: 20px; image-rendering: pixelated; }
.boost-locked { color: var(--muted); white-space: nowrap; }
/* ================================================================== the battle's HUD: the turn on a plate */
.ui3 .battle .turn-banner {
flex: 0 1 auto; margin: 0 auto; padding: 6px 18px 5px; max-width: min(560px, 60vw);
background: linear-gradient(180deg, rgba(42, 34, 50, 0.94), rgba(26, 21, 32, 0.94));
border: 2px solid #000; box-shadow: inset 0 0 0 1px var(--v3-rim), 0 6px 14px rgba(0, 0, 0, 0.45);
}
.ui3 .battle .turn-banner .t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui3 .battle .turn-banner .gold { font-size: 10px; opacity: 0.85; }
.ui3 .narrow .hud-top { row-gap: 6px; }
.ui3 .narrow .hud-top .turn-banner { order: 10; flex: 1 1 100%; max-width: none; padding: 4px 10px; }
.ui3 .narrow .hud-top .turn-banner .t { font-size: 10px; line-height: 1.3; }
.ui3 .narrow .hud-top .turn-banner .gold { display: none; }
/* ================================================================== Patrol, Gauntlet, the emblem editor */
.ui3 .patrol-route, .ui3 .gx-card { font: inherit; color: var(--text); }
.ui3 .patrol-route { gap: 4px; padding: 12px 8px; transition: transform 0.1s; }
.ui3 .patrol-route:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--copper-hi), var(--v3-shadow); }
.ui3 .patrol-route.selected { box-shadow: 0 0 0 2px var(--gold), inset 0 0 0 1px var(--gold), 0 0 14px rgba(245, 197, 66, 0.3); background: linear-gradient(180deg, #3a2e22, #241c16); }
.ui3 .patrol-route b { font-size: 14px; color: #fff6dc; }
.ui3 .patrol-route-icon { font-size: 32px; filter: drop-shadow(0 2px 0 #000); }
.ui3 .gx-card { text-align: left; transition: transform 0.1s; }
.ui3 .gx-card:not(.locked):hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--copper-hi), var(--v3-shadow); }
.ui3 .gx-card.selected { box-shadow: 0 0 0 2px var(--gold), inset 0 0 0 1px var(--gold); }
.ui3 .gx-card.locked { opacity: 0.55; filter: saturate(0.4); }
.ui3 .gx-card.locked:hover { opacity: 0.75; }
.ui3 .emblem-side { padding: 12px; background: linear-gradient(180deg, var(--v3-panel-2), var(--v3-panel)); border: 2px solid var(--v3-edge, #000); box-shadow: inset 0 0 0 1px var(--v3-rim), var(--v3-shadow); }