new rpg mode
This commit is contained in:
Warren H
+505
-16
@@ -374,6 +374,9 @@ button:focus-visible {
|
||||
.boss-bar-wrap.is-trio { top: 1.1%; width: 42%; gap: 2px; }
|
||||
.boss-bar-wrap.is-trio .boss-name strong { font-size: 8px; }
|
||||
.boss-bar-wrap.is-trio .boss-bar { height: 5px; margin-top: 1px; }
|
||||
.boss-bar-wrap.is-pvp { width: 42%; }
|
||||
.boss-bar-entry.is-opponent .boss-bar { border-color: rgba(190, 92, 153, 0.52); }
|
||||
.boss-bar-entry.is-opponent .boss-bar i { background: linear-gradient(90deg, #6f315f, #d65c96); box-shadow: 0 0 9px rgba(214, 92, 150, 0.55); }
|
||||
|
||||
.boss-name {
|
||||
display: grid;
|
||||
@@ -431,6 +434,25 @@ button:focus-visible {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.objective-chip.is-hockey {
|
||||
border-right-color: #67e8ff;
|
||||
background: linear-gradient(90deg, rgba(7, 24, 30, 0.62), rgba(5, 18, 24, 0.94));
|
||||
}
|
||||
|
||||
.objective-chip.is-hockey span { color: #89efff; }
|
||||
.objective-chip.is-pvp { border-right-color: #ef6c9f; background: linear-gradient(90deg, rgba(17, 24, 39, 0.64), rgba(37, 11, 25, 0.94)); }
|
||||
.objective-chip.is-pvp span { color: #ff9cc2; }
|
||||
.objective-chip.is-blockbreaker {
|
||||
border-right-color: #a9ef64;
|
||||
background: linear-gradient(90deg, rgba(9, 28, 32, 0.65), rgba(22, 34, 13, 0.95));
|
||||
}
|
||||
.objective-chip.is-blockbreaker span { color: #baf77e; }
|
||||
.objective-chip.is-aether {
|
||||
border-right-color: #66f1ff;
|
||||
background: linear-gradient(90deg, rgba(11, 37, 48, 0.68), rgba(15, 28, 50, 0.95));
|
||||
}
|
||||
.objective-chip.is-aether span { color: #9ef7ff; }
|
||||
|
||||
.objective-chip span {
|
||||
color: var(--gold);
|
||||
font-size: 7px;
|
||||
@@ -463,6 +485,28 @@ button:focus-visible {
|
||||
.encounter-callout.is-urgent { border-color: var(--red); animation: warning-pulse 0.7s ease-in-out infinite alternate; }
|
||||
.encounter-callout.is-urgent strong { color: #ff826b; }
|
||||
|
||||
.dampening-indicator {
|
||||
position: absolute;
|
||||
top: 13.5%;
|
||||
right: 2.3%;
|
||||
width: 148px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
align-items: center;
|
||||
gap: 3px 8px;
|
||||
padding: 5px 7px 6px 9px;
|
||||
border: 1px solid rgba(255, 126, 91, 0.38);
|
||||
border-right: 2px solid #ff795d;
|
||||
background: linear-gradient(90deg, rgba(38, 13, 12, 0.58), rgba(37, 10, 13, 0.92));
|
||||
text-align: right;
|
||||
text-shadow: 0 1px 3px #000;
|
||||
}
|
||||
|
||||
.dampening-indicator span { color: #e3a092; font-size: 7px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; }
|
||||
.dampening-indicator strong { color: #ffb19c; font-size: 12px; }
|
||||
.dampening-indicator > i { grid-column: 1 / -1; height: 3px; overflow: hidden; background: #240908; }
|
||||
.dampening-indicator > i em { display: block; height: 100%; background: linear-gradient(90deg, #c84635, #ff9776); box-shadow: 0 0 6px rgba(255, 104, 72, 0.75); transition: width 180ms ease; }
|
||||
|
||||
.casting-bar {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
@@ -570,6 +614,72 @@ button:focus-visible {
|
||||
.phase-intermission { background: radial-gradient(circle at center, rgba(94, 76, 26, 0.38), rgba(3, 9, 8, 0.84)); }
|
||||
.phase-defeat { background: radial-gradient(circle at center, rgba(85, 31, 21, 0.45), rgba(6, 5, 4, 0.86)); }
|
||||
|
||||
.goal-popup {
|
||||
position: absolute;
|
||||
z-index: 11;
|
||||
top: 44%;
|
||||
left: 50%;
|
||||
min-width: 26%;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: 10px 28px 12px;
|
||||
border-top: 2px solid #9df4ff;
|
||||
border-bottom: 2px solid #9df4ff;
|
||||
color: #eaffff;
|
||||
background: linear-gradient(90deg, transparent, rgba(13, 91, 104, 0.88) 20%, rgba(8, 43, 48, 0.94) 50%, rgba(13, 91, 104, 0.88) 80%, transparent);
|
||||
filter: drop-shadow(0 0 16px rgba(83, 228, 255, 0.72));
|
||||
pointer-events: none;
|
||||
transform: translate(-50%, -50%);
|
||||
animation: goal-popup-burst 1.2s ease-out both;
|
||||
}
|
||||
|
||||
.goal-popup::before,
|
||||
.goal-popup::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 34%;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent, #b8f8ff);
|
||||
}
|
||||
|
||||
.goal-popup::before { right: 100%; }
|
||||
.goal-popup::after { left: 100%; transform: scaleX(-1); }
|
||||
.goal-popup strong { font: 700 clamp(34px, 7.2vw, 76px) "Cinzel", serif; letter-spacing: 0.16em; text-indent: 0.16em; text-shadow: 0 0 10px #59dff5, 0 3px 5px #001315; }
|
||||
.goal-popup.is-conceded { border-color: #ffb087; background: linear-gradient(90deg, transparent, rgba(132, 47, 31, 0.88) 20%, rgba(58, 19, 14, 0.94) 50%, rgba(132, 47, 31, 0.88) 80%, transparent); filter: drop-shadow(0 0 16px rgba(255, 111, 73, 0.74)); }
|
||||
.goal-popup.is-conceded::before,
|
||||
.goal-popup.is-conceded::after { background: linear-gradient(90deg, transparent, #ffd0ac); }
|
||||
.goal-popup.is-conceded strong { text-shadow: 0 0 10px #ff815e, 0 3px 5px #190400; }
|
||||
|
||||
.blockbreaker-score-popup {
|
||||
position: absolute;
|
||||
z-index: 11;
|
||||
top: 58%;
|
||||
left: 50%;
|
||||
min-width: 150px;
|
||||
display: grid;
|
||||
justify-items: center;
|
||||
padding: 8px 22px 10px;
|
||||
border-top: 1px solid #a9ef64;
|
||||
border-bottom: 1px solid #45d9ec;
|
||||
color: #f2ffe7;
|
||||
background: linear-gradient(90deg, transparent, rgba(28, 70, 35, 0.9) 30%, rgba(9, 44, 49, 0.92) 70%, transparent);
|
||||
filter: drop-shadow(0 0 13px rgba(131, 235, 102, 0.58));
|
||||
pointer-events: none;
|
||||
transform: translate(-50%, -50%);
|
||||
animation: blockbreaker-score-burst 850ms ease-out both;
|
||||
}
|
||||
.blockbreaker-score-popup strong { font: 700 clamp(24px, 4.5vw, 48px) "Cinzel", serif; letter-spacing: .06em; text-shadow: 0 0 9px rgba(84, 231, 239, .8); }
|
||||
.blockbreaker-score-popup small { color: #bef29b; font-size: clamp(7px, 1.1vw, 11px); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
|
||||
.aether-score-popup {
|
||||
border-top-color: #ffcf77;
|
||||
border-bottom-color: #66efff;
|
||||
color: #f1fdff;
|
||||
background: linear-gradient(90deg, transparent, rgba(19, 52, 76, .9) 28%, rgba(35, 32, 76, .92) 72%, transparent);
|
||||
filter: drop-shadow(0 0 13px rgba(102, 239, 255, .62));
|
||||
}
|
||||
.aether-score-popup small { color: #9ef7ff; }
|
||||
|
||||
.pause-overlay { position: absolute; z-index: 12; inset: 0; display: grid; place-items: center; background: rgba(2,8,7,0.76); backdrop-filter: blur(5px); pointer-events: auto; }
|
||||
.pause-panel { width: min(370px, 62%); display: grid; justify-items: center; padding: 25px 30px 20px; border: 1px solid rgba(232,200,114,0.48); background: linear-gradient(145deg, rgba(12,29,24,0.97), rgba(4,11,9,0.98)); box-shadow: 0 18px 55px rgba(0,0,0,0.6), inset 0 0 30px rgba(232,200,114,0.035); text-align: center; }
|
||||
.pause-panel > span { color: var(--gold); font-size: 7px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; }
|
||||
@@ -578,7 +688,7 @@ button:focus-visible {
|
||||
.pause-actions { width: 100%; display: grid; gap: 7px; }
|
||||
.pause-actions button { display: flex; align-items: center; justify-content: space-between; min-height: 38px; padding: 8px 12px; border: 1px solid var(--gold); color: #172019; background: linear-gradient(110deg, #ffe499, #d1af54); font-family: "Cinzel", serif; font-size: 10px; text-align: left; }
|
||||
.pause-actions button.secondary { border-color: rgba(197,218,209,0.25); color: #dce9e4; background: rgba(8,20,17,0.9); }
|
||||
.pause-actions button.is-controller-focused { outline: 2px solid #fff1b6; outline-offset: 2px; }
|
||||
.pause-actions button.is-controller-selected { outline: 2px solid #fff1b6; outline-offset: 2px; }
|
||||
.pause-actions small { font-family: Inter, sans-serif; font-size: 6px; letter-spacing: 0.08em; }
|
||||
.pause-panel footer { display: flex; align-items: center; gap: 6px; margin-top: 14px; color: #72877f; font-size: 7px; text-transform: uppercase; }
|
||||
.pause-panel footer b { color: #dce9e4; }
|
||||
@@ -799,6 +909,8 @@ button:focus-visible {
|
||||
|
||||
.shield-effect { border: 1px solid #63bfff; color: #9edbff; background: #153d58; }
|
||||
.renew-effect { border: 1px solid #59c888; color: #b5f1cd; background: #163e29; }
|
||||
.earth-shield-effect { border: 1px solid #d2b66c; color: #fff0ae; background: #51451b; }
|
||||
.spirit-link-effect { border: 1px solid #a28cff; color: #e2d8ff; background: #352759; box-shadow: 0 0 7px rgba(162, 140, 255, 0.5); }
|
||||
.barrier-effect { border: 1px solid #ebca60; color: #fff1a8; background: #554715; box-shadow: 0 0 7px rgba(235, 202, 96, 0.55); }
|
||||
.tank-aura-effect { border: 1px solid #66bdf2; color: #cceeff; background: #174764; box-shadow: 0 0 7px rgba(102, 189, 242, 0.55); }
|
||||
.debuff-effect { border: 1px solid #ff795e; color: white; background: #9a3528; box-shadow: 0 0 8px rgba(229, 80, 54, 0.66); animation: warning-pulse 0.6s infinite alternate; }
|
||||
@@ -822,6 +934,28 @@ button:focus-visible {
|
||||
background: rgba(15, 31, 27, 0.66);
|
||||
}
|
||||
|
||||
.ability-meta.is-hockey { grid-template-columns: 0.85fr 1.1fr 1fr; }
|
||||
|
||||
.hockey-run-meta {
|
||||
min-width: 0;
|
||||
display: grid;
|
||||
grid-template-columns: auto auto;
|
||||
align-items: baseline;
|
||||
gap: 0 5px;
|
||||
padding-left: 7px;
|
||||
border-left: 1px solid rgba(103, 232, 255, 0.2);
|
||||
}
|
||||
|
||||
.hockey-run-meta span { color: #70a8b1; font-size: 7px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
|
||||
.hockey-run-meta strong { color: #8ff1ff; font-size: 13px; }
|
||||
.hockey-run-meta small { grid-column: 1 / -1; overflow: hidden; color: #6d8b90; font-size: 6px; letter-spacing: 0.06em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
|
||||
.pvp-run-meta { border-left-color: rgba(239, 108, 159, 0.32); }
|
||||
.pvp-run-meta strong { color: #ff9cc2; }
|
||||
.blockbreaker-run-meta { border-left-color: rgba(169, 239, 100, 0.32); }
|
||||
.blockbreaker-run-meta strong { color: #baf77e; }
|
||||
.aether-run-meta { border-left-color: rgba(102, 241, 255, 0.35); }
|
||||
.aether-run-meta strong { color: #9ef7ff; }
|
||||
|
||||
.target-chip,
|
||||
.mana-wrap {
|
||||
min-width: 0;
|
||||
@@ -830,6 +964,11 @@ button:focus-visible {
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.resource-stack { min-width: 0; display: grid; gap: 2px; }
|
||||
.class-resource { min-width: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
|
||||
.class-resource span { overflow: hidden; color: #6fa984; font-size: 6px; font-weight: 700; letter-spacing: 0.09em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
|
||||
.class-resource b { color: #9be9ae; font-size: 8px; white-space: nowrap; }
|
||||
|
||||
.target-chip span,
|
||||
.mana-wrap span { color: #63786f; font-size: 7px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; }
|
||||
.target-chip strong { overflow: hidden; color: var(--gold-strong); font-size: 11px; letter-spacing: 0.07em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
|
||||
@@ -1076,7 +1215,7 @@ button:focus-visible {
|
||||
.end-actions { display: flex; gap: 9px; margin-top: 18px; }
|
||||
.end-actions button { padding: 9px 18px; border: 1px solid var(--gold); color: #13170f; background: var(--gold); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; }
|
||||
.end-actions button.secondary { color: #9eafa8; background: transparent; border-color: #43564f; }
|
||||
.end-actions button.is-controller-focused { outline: 2px solid #fff1b6; outline-offset: 2px; }
|
||||
.end-actions button.is-controller-selected { outline: 2px solid #fff1b6; outline-offset: 2px; }
|
||||
.endless-choice-actions button:first-child { display: grid; gap: 3px; min-width: 155px; }
|
||||
.endless-choice-actions button:first-child small { font-size: 7px; font-weight: 600; letter-spacing: 0.06em; opacity: 0.72; }
|
||||
|
||||
@@ -1140,9 +1279,9 @@ button:focus-visible {
|
||||
background: linear-gradient(155deg, color-mix(in srgb, var(--buff-accent), #081310 91%), rgba(5, 13, 11, 0.94));
|
||||
text-align: left;
|
||||
}
|
||||
.buff-choice-grid button.is-controller-focused { outline: 2px solid var(--gold-strong); outline-offset: 2px; transform: translateY(-2px); }
|
||||
.buff-choice-grid button.is-controller-selected { outline: 2px solid var(--gold-strong); outline-offset: 2px; transform: translateY(-2px); }
|
||||
.buff-draft.is-input-locked .buff-choice-grid button { cursor: default; filter: saturate(0.55) brightness(0.78); }
|
||||
.buff-draft.is-input-locked .buff-choice-grid button.is-controller-focused { outline-color: #60726b; transform: none; }
|
||||
.buff-draft.is-input-locked .buff-choice-grid button.is-controller-selected { outline-color: #60726b; transform: none; }
|
||||
.buff-choice-grid button > i { grid-row: 1 / 3; width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--buff-accent); color: var(--buff-accent); font-family: "Cinzel", serif; font-size: 16px; font-style: normal; }
|
||||
.buff-choice-grid button > span { min-width: 0; display: grid; }
|
||||
.buff-choice-grid button small { color: var(--buff-accent); font-size: 6px; letter-spacing: 0.1em; text-transform: uppercase; }
|
||||
@@ -1179,6 +1318,11 @@ button:focus-visible {
|
||||
.legend-party { background: var(--gold); }
|
||||
.legend-boss { background: var(--red); }
|
||||
.legend-exit { border: 1px solid var(--teal); }
|
||||
.legend-paddle { width: 12px !important; border-radius: 2px !important; background: #ff9a61; box-shadow: 0 0 5px rgba(255, 118, 79, 0.7); }
|
||||
.legend-opponent { background: #ef6c9f; box-shadow: 0 0 5px rgba(239, 108, 159, 0.65); }
|
||||
.legend-brick { border-radius: 1px !important; background: linear-gradient(90deg, #36d9ef 0 25%, #f1b74f 25% 50%, #e85aa9 50% 75%, #93db54 75%); }
|
||||
.legend-ship { border-radius: 1px !important; background: #66eaff; box-shadow: 0 0 5px rgba(102, 234, 255, .72); transform: rotate(45deg); }
|
||||
.legend-shot { background: #ff2518; box-shadow: 0 0 5px rgba(255, 37, 24, .78); }
|
||||
|
||||
.map-canvas {
|
||||
position: relative;
|
||||
@@ -1192,11 +1336,27 @@ button:focus-visible {
|
||||
}
|
||||
|
||||
.map-canvas svg { width: auto; height: 94%; }
|
||||
.hockey-map-room { stroke: rgba(111, 218, 235, 0.36); stroke-width: 2; }
|
||||
.hockey-map-goal { fill: none; stroke-width: 5; stroke-linecap: round; }
|
||||
.hockey-map-goal.is-npc { stroke: #e76a5b; filter: drop-shadow(0 0 4px rgba(231, 106, 91, 0.65)); }
|
||||
.hockey-map-goal.is-healer { stroke: #67e8ff; filter: drop-shadow(0 0 4px rgba(103, 232, 255, 0.7)); }
|
||||
.hockey-map-puck { fill: #ecfdff; stroke: #4cddff; stroke-width: 2; filter: drop-shadow(0 0 5px rgba(76, 221, 255, 0.9)); }
|
||||
.hockey-map-paddle { fill: #ff8a5b; stroke: #ffe0a8; stroke-width: 1.4; filter: drop-shadow(0 0 5px rgba(255, 91, 61, 0.85)); }
|
||||
.blockbreaker-map-danger { fill: none; stroke: #ff6d5d; stroke-width: 2; stroke-dasharray: 5 3; filter: drop-shadow(0 0 4px rgba(255, 83, 66, .75)); }
|
||||
.blockbreaker-map-brick { stroke: rgba(244, 255, 245, .76); stroke-width: .8; filter: drop-shadow(0 0 2px rgba(190, 246, 220, .42)); }
|
||||
.aether-map-lanes { stroke: rgba(67, 185, 205, .34); stroke-dasharray: 6 5; }
|
||||
.aether-map-ship { fill: #34cee7; stroke: #e0fcff; stroke-width: 1; filter: drop-shadow(0 0 4px rgba(52, 206, 231, .8)); }
|
||||
.aether-map-ship.is-armored { fill: #e8aa58; stroke: #fff0c8; filter: drop-shadow(0 0 4px rgba(232, 170, 88, .82)); }
|
||||
.aether-map-warning { fill: rgba(255, 122, 78, .12); stroke: #ff7a4e; stroke-width: 1.5; stroke-dasharray: 3 2; animation: map-pulse 1s infinite; transform-box: fill-box; transform-origin: center; }
|
||||
.aether-map-player-shot { fill: #f8ffff; stroke: #55e9ff; stroke-width: 1; }
|
||||
.aether-map-enemy-shot { fill: #ff2518; stroke: #8f0b05; stroke-width: 1; filter: drop-shadow(0 0 3px rgba(255, 37, 24, .86)); }
|
||||
.map-room { stroke: #36554a; stroke-width: 2; }
|
||||
.map-ring { fill: none; stroke: #2b493f; stroke-width: 1; stroke-dasharray: 3 4; }
|
||||
.map-glyph { fill: none; stroke: #755f34; stroke-width: 1; opacity: 0.7; }
|
||||
.map-pillar { fill: #315247; stroke: #66877a; stroke-width: 1; }
|
||||
.map-boss { fill: #8c3929; stroke: #ff8a63; stroke-width: 2; filter: drop-shadow(0 0 5px #b74731); }
|
||||
.map-boss.is-opponent { fill: #742c5c; stroke: #ff84bd; filter: drop-shadow(0 0 5px #b63f7b); }
|
||||
.map-opponent { fill: #ef6c9f !important; stroke: #ffe2ee !important; }
|
||||
.map-boss-arrow { fill: #ff9f74; }
|
||||
.map-player-pulse { fill: rgba(237, 205, 116, 0.14); stroke: #e8c872; stroke-width: 1; animation: map-pulse 1.2s infinite; transform-box: fill-box; transform-origin: center; }
|
||||
.map-barrier { fill: rgba(237, 201, 83, 0.18); stroke: #f4d96f; stroke-width: 1.5; stroke-dasharray: 3 2; }
|
||||
@@ -1216,6 +1376,63 @@ button:focus-visible {
|
||||
padding: 4%;
|
||||
}
|
||||
|
||||
/* PVP opponent telemetry */
|
||||
|
||||
.pvp-panel {
|
||||
height: 100%;
|
||||
display: grid;
|
||||
grid-template-rows: auto minmax(0, 1fr);
|
||||
gap: 3%;
|
||||
padding: 3.2% 4%;
|
||||
background:
|
||||
radial-gradient(circle at 84% -8%, rgba(226, 73, 134, 0.12), transparent 38%),
|
||||
linear-gradient(145deg, rgba(12, 28, 25, 0.3), rgba(13, 8, 18, 0.28));
|
||||
}
|
||||
|
||||
.pvp-roster-header {
|
||||
min-height: 58px;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(150px, 1.8fr) repeat(3, minmax(72px, 0.72fr));
|
||||
align-items: stretch;
|
||||
border: 1px solid rgba(239, 108, 159, 0.3);
|
||||
border-left: 3px solid #ef6c9f;
|
||||
background: linear-gradient(90deg, rgba(80, 22, 59, 0.42), rgba(10, 22, 20, 0.88));
|
||||
box-shadow: inset 0 0 22px rgba(239, 108, 159, 0.035);
|
||||
}
|
||||
|
||||
.pvp-roster-header > span,
|
||||
.pvp-roster-header > div { min-width: 0; display: grid; align-content: center; gap: 3px; padding: 8px 12px; }
|
||||
.pvp-roster-header > div { border-left: 1px solid rgba(239, 108, 159, 0.16); text-align: center; }
|
||||
.pvp-roster-header small { color: #9b7086; font-size: clamp(6px, 1.3cqw, 8px); font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; }
|
||||
.pvp-roster-header strong { overflow: hidden; color: #f6e9ef; font: 600 clamp(11px, 2.5cqw, 16px) "Cinzel", serif; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.pvp-roster-header > div strong { color: #ff9fc4; }
|
||||
|
||||
.pvp-party-list {
|
||||
min-height: 0;
|
||||
display: grid;
|
||||
grid-template-rows: 22px repeat(5, minmax(0, 1fr));
|
||||
gap: 1.5%;
|
||||
}
|
||||
|
||||
.pvp-party-frame {
|
||||
min-height: 0;
|
||||
display: grid;
|
||||
grid-template-columns: 42px minmax(0, 1fr) 54px;
|
||||
align-items: center;
|
||||
gap: 9px;
|
||||
padding: 4px 9px 4px 6px;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(194, 124, 158, 0.18);
|
||||
border-left: 2px solid rgba(239, 108, 159, 0.54);
|
||||
border-radius: 4px;
|
||||
background: linear-gradient(90deg, rgba(39, 17, 31, 0.9), rgba(9, 24, 20, 0.82));
|
||||
}
|
||||
|
||||
.pvp-party-frame > b { color: #d697b4; font-size: clamp(8px, 1.7cqw, 10px); letter-spacing: 0.06em; text-align: right; }
|
||||
.pvp-party-frame .health-bar > i { background: linear-gradient(90deg, #8e345f, #ef6c9f); }
|
||||
.pvp-party-frame .health-bar > i.is-low { background: linear-gradient(90deg, #8d392d, #e45b45); }
|
||||
.pvp-party-frame.is-down { filter: grayscale(0.85); opacity: 0.46; }
|
||||
|
||||
.item-list {
|
||||
min-width: 0;
|
||||
display: grid;
|
||||
@@ -1286,6 +1503,21 @@ button:focus-visible {
|
||||
to { transform: scale(1.5); opacity: 0; }
|
||||
}
|
||||
|
||||
@keyframes goal-popup-burst {
|
||||
0% { opacity: 0; transform: translate(-50%, -50%) scale(0.55); }
|
||||
16% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
|
||||
26% { transform: translate(-50%, -50%) scale(1); }
|
||||
76% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
|
||||
100% { opacity: 0; transform: translate(-50%, -50%) scale(1.05); }
|
||||
}
|
||||
|
||||
@keyframes blockbreaker-score-burst {
|
||||
0% { opacity: 0; transform: translate(-50%, -42%) scale(.72); }
|
||||
20% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
|
||||
72% { opacity: 1; transform: translate(-50%, -58%) scale(1); }
|
||||
100% { opacity: 0; transform: translate(-50%, -68%) scale(.98); }
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.app-shell { padding: 10px 7px 45px; }
|
||||
.app-header { padding: 0 4px; }
|
||||
@@ -1311,6 +1543,9 @@ button:focus-visible {
|
||||
.encounter-callout { bottom: 8%; padding: 3px 5px; }
|
||||
.encounter-callout span { font-size: 5px; }
|
||||
.encounter-callout strong { font-size: 8px; }
|
||||
.dampening-indicator { top: 15%; width: 106px; gap: 2px 5px; padding: 3px 4px 4px 6px; }
|
||||
.dampening-indicator span { font-size: 5px; }
|
||||
.dampening-indicator strong { font-size: 8px; }
|
||||
.casting-bar { bottom: 7.5%; min-width: 120px; padding: 3px 5px 4px; }
|
||||
.casting-bar strong, .casting-bar > b { font-size: 7px; }
|
||||
.casting-bar small { display: none; }
|
||||
@@ -1326,6 +1561,8 @@ button:focus-visible {
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.001ms !important;
|
||||
}
|
||||
.goal-popup { animation: none !important; }
|
||||
.blockbreaker-score-popup { animation: none !important; }
|
||||
}
|
||||
|
||||
/* Capacitor single-display fallback. Thor dual-display routing will replace this
|
||||
@@ -1544,7 +1781,7 @@ button:focus-visible {
|
||||
opacity: 0.35;
|
||||
}
|
||||
|
||||
.front-surface button.is-controller-focused,
|
||||
.front-surface button.is-controller-selected,
|
||||
.front-surface button:focus-visible {
|
||||
outline: 2px solid var(--gold-strong);
|
||||
outline-offset: 2px;
|
||||
@@ -1673,7 +1910,7 @@ button:focus-visible {
|
||||
.login-panel label { color: #81978e; font-size: 8px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
|
||||
.login-panel input { height: 36px; padding: 0 11px; border: 1px solid rgba(155,190,176,0.28); outline: 0; color: #e8f2ee; background: #071310; font: 600 12px "Rajdhani", sans-serif; }
|
||||
.login-panel input:focus,
|
||||
.login-panel input.is-controller-focused { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(232,200,114,0.12); }
|
||||
.login-panel input.is-controller-selected { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(232,200,114,0.12); }
|
||||
.login-panel .front-primary,
|
||||
.login-panel .front-secondary { min-height: 40px; padding-top: 6px; padding-bottom: 6px; }
|
||||
.login-surface > .front-notice { position: absolute; right: 44px; bottom: 83px; width: 300px; }
|
||||
@@ -1737,7 +1974,8 @@ button:focus-visible {
|
||||
.front-dialog form > span { color: var(--gold); font-size: 8px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; }
|
||||
.front-dialog form > label { justify-self: start; margin-top: 12px; color: #82978f; font-size: 8px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
|
||||
.front-dialog form > input { width: 100%; height: 38px; margin-top: 5px; padding: 0 11px; border: 1px solid rgba(155,190,176,0.32); outline: 0; color: #eef8f4; background: #06120f; font: 600 13px "Rajdhani", sans-serif; text-align: center; }
|
||||
.front-dialog form > input:focus { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(232,200,114,0.14); }
|
||||
.front-dialog form > input:focus,
|
||||
.front-dialog form > input.is-controller-selected { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(232,200,114,0.14); }
|
||||
.front-dialog form > small { justify-self: end; margin-top: 3px; color: #647a71; font-size: 7px; }
|
||||
.front-dialog h2 { margin: 7px 0; font-family: "Cinzel", serif; font-size: 24px; font-weight: 500; }
|
||||
.front-dialog p { margin: 0; color: #8ca198; font-size: 11px; line-height: 1.4; }
|
||||
@@ -1797,9 +2035,13 @@ button:focus-visible {
|
||||
.home-header > span { margin-left: auto; color: #8fa39b; font-size: 10px; }
|
||||
.home-header > span b { color: #dce9e4; }
|
||||
.home-header > i { color: #6ecaa7; font-size: 8px; font-style: normal; font-weight: 700; letter-spacing: 0.08em; }
|
||||
.mode-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, 78px); gap: 10px; margin-top: 18px; }
|
||||
.mode-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, 78px); grid-auto-rows: 78px; gap: 10px; margin-top: 18px; }
|
||||
.mode-card { position: relative; display: grid; grid-template-columns: 54px 1fr 17px; align-items: center; gap: 12px; padding: 13px; overflow: hidden; text-align: left; }
|
||||
.mode-card::after { position: absolute; inset: 0; content: ""; background: linear-gradient(110deg, rgba(69,153,131,0.13), transparent 60%); pointer-events: none; }
|
||||
.mode-card-blockbreaker::after { background: linear-gradient(110deg, rgba(54,217,239,.15), rgba(232,90,169,.1) 54%, rgba(147,219,84,.12)); }
|
||||
.mode-card-blockbreaker > i { border-radius: 5px; color: #baf77e; box-shadow: inset 0 0 13px rgba(54,217,239,.09); }
|
||||
.mode-card-aether-assault::after { background: linear-gradient(110deg, rgba(66, 222, 242, .18), rgba(100, 110, 225, .11) 62%, transparent); }
|
||||
.mode-card-aether-assault > i { border-radius: 5px; color: #8cf5ff; box-shadow: inset 0 0 13px rgba(66, 222, 242, .1); }
|
||||
.mode-card.is-wide { grid-row: 1 / 3; }
|
||||
.mode-card > i { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid rgba(232,200,114,0.42); border-radius: 50%; color: var(--gold); background: rgba(2,9,7,0.45); font-family: "Cinzel", serif; font-size: 20px; font-style: normal; }
|
||||
.mode-card.is-wide > i { width: 64px; height: 64px; font-size: 27px; }
|
||||
@@ -1907,7 +2149,7 @@ button:focus-visible {
|
||||
.trophy-note { margin-top: 8px; }
|
||||
.boss-stats-heading { padding-top: 10px; }
|
||||
.boss-stats-layout { height: 331px; display: grid; grid-template-columns: minmax(235px, .78fr) minmax(0, 1.22fr); gap: 11px; }
|
||||
.boss-stat-selector { min-width: 0; display: grid; align-content: start; gap: 5px; }
|
||||
.boss-stat-selector { min-width: 0; display: grid; align-content: start; gap: 5px; overflow-y: auto; scrollbar-width: thin; }
|
||||
.boss-stat-selector button { width: 100%; min-height: 51px; display: grid; grid-template-columns: 30px minmax(0, 1fr) 32px; align-items: center; gap: 8px; padding: 6px 9px; text-align: left; }
|
||||
.boss-stat-selector button.is-selected { border-color: var(--gold); box-shadow: inset 3px 0 var(--gold); background: linear-gradient(90deg, rgba(93,73,23,.27), rgba(8,18,15,.88)); }
|
||||
.boss-stat-selector button > i { width: 27px; height: 27px; display: grid; place-items: center; border: 1px solid #496159; color: var(--gold); font-style: normal; }
|
||||
@@ -1920,9 +2162,11 @@ button:focus-visible {
|
||||
.leaderboard-panel > header span { min-width: 0; display: grid; }
|
||||
.leaderboard-panel > header small { color: var(--gold); font-size: 7px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
|
||||
.leaderboard-panel > header strong { overflow: hidden; font: 500 13px "Cinzel", serif; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.leaderboard-panel > header > b { color: #88a79b; font-size: 8px; text-transform: uppercase; }
|
||||
.leaderboard-header-actions { display: flex; align-items: center; gap: 8px; }
|
||||
.leaderboard-header-actions > b { color: #88a79b; font-size: 8px; text-transform: uppercase; white-space: nowrap; }
|
||||
.leaderboard-refresh { min-height: 27px; padding: 4px 7px; color: var(--gold-strong); font-size: 7px; font-weight: 700; text-transform: uppercase; }
|
||||
.leaderboard-rows { min-height: 218px; padding: 4px 8px; }
|
||||
.leaderboard-rows > div, .leaderboard-self { min-height: 40px; display: grid; grid-template-columns: 34px minmax(0, 1fr) 44px; align-items: center; gap: 8px; padding: 4px 7px; border-bottom: 1px solid rgba(164,195,184,.1); }
|
||||
.leaderboard-rows > div, .leaderboard-self { min-height: 40px; display: grid; grid-template-columns: 34px minmax(0, 1fr) 64px; align-items: center; gap: 8px; padding: 4px 7px; border-bottom: 1px solid rgba(164,195,184,.1); }
|
||||
.leaderboard-rows > div.is-you { background: rgba(102,81,24,.2); }
|
||||
.leaderboard-rows > div > b, .leaderboard-self > b { color: var(--gold); font: 600 12px "Cinzel", serif; }
|
||||
.leaderboard-rows span, .leaderboard-self span { min-width: 0; display: grid; }
|
||||
@@ -1934,11 +2178,16 @@ button:focus-visible {
|
||||
.leaderboard-empty { min-height: 200px !important; border: 0 !important; }
|
||||
.profile-context { padding: 0 5.5% 18px; }
|
||||
.profile-context .context-header { margin: 0 -5.8%; }
|
||||
.profile-stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
|
||||
.profile-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
|
||||
.profile-stats span { min-width: 0; display: grid; padding: 8px 6px; border-right: 1px solid var(--line); }
|
||||
.profile-stats span:last-child { border-right: 0; }
|
||||
.profile-stats small { color: #6d8179; font-size: clamp(7px, 1.5cqw, 9px); text-transform: uppercase; }
|
||||
.profile-stats strong { color: var(--gold-strong); font-family: "Cinzel", serif; font-size: clamp(14px, 2.8cqw, 17px); font-weight: 500; }
|
||||
.blockbreaker-profile-records { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 7px 0; border: 1px solid rgba(147,219,84,.22); background: linear-gradient(90deg, rgba(54,217,239,.07), rgba(232,90,169,.06), rgba(147,219,84,.07)); }
|
||||
.blockbreaker-profile-records > span { min-width: 0; display: grid; padding: 6px 9px; border-right: 1px solid rgba(147,219,84,.15); }
|
||||
.blockbreaker-profile-records > span:last-child { border-right: 0; }
|
||||
.blockbreaker-profile-records small { color: #78968b; font-size: clamp(6px, 1.25cqw, 8px); letter-spacing: .07em; text-transform: uppercase; }
|
||||
.blockbreaker-profile-records strong { overflow: hidden; color: #baf77e; font: 500 clamp(12px, 2.4cqw, 15px) "Cinzel", serif; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.boss-log { margin-top: 7px; }
|
||||
.boss-log > span { color: #6c8179; font-size: 8px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
|
||||
.boss-log button { width: 100%; min-height: 36px; display: grid; grid-template-columns: 28px 1fr 30px; align-items: center; gap: 7px; margin-top: 3px; padding: 3px 8px; text-align: left; }
|
||||
@@ -1949,6 +2198,77 @@ button:focus-visible {
|
||||
.boss-log small { color: #687d75; font-size: clamp(7px, 1.45cqw, 9px); text-transform: uppercase; }
|
||||
.boss-log button > b { color: #85a198; font-size: 10px; }
|
||||
|
||||
.boss-index-panel,
|
||||
.profile-records-panel { min-width: 0; height: 100%; overflow: hidden; }
|
||||
.boss-index-panel { border: 1px solid #435950; background: linear-gradient(180deg, rgba(11,25,21,.96), rgba(5,13,11,.96)); }
|
||||
.boss-index-panel > header,
|
||||
.profile-records-panel > header { height: 43px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 10px; border: 1px solid #435950; background: linear-gradient(90deg, rgba(76,59,20,.25), rgba(8,20,17,.92)); }
|
||||
.boss-index-panel > header { border-width: 0 0 1px; }
|
||||
.boss-index-panel > header span,
|
||||
.profile-records-panel > header span { min-width: 0; display: grid; }
|
||||
.boss-index-panel > header small,
|
||||
.profile-records-panel > header small { color: var(--gold); font-size: 7px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
|
||||
.boss-index-panel > header strong,
|
||||
.profile-records-panel > header strong { overflow: hidden; font: 500 12px "Cinzel", serif; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.boss-index-panel > header > b,
|
||||
.profile-records-panel > header > b { color: #8ca59c; font-size: 8px; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
|
||||
.boss-pet-grid { height: calc(100% - 43px); display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 5px; }
|
||||
.boss-pet-card { --boss-accent: var(--gold); position: relative; min-width: 0; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto auto; align-items: end; gap: 1px; overflow: hidden; padding: 5px 5px 4px; border-color: color-mix(in srgb, var(--boss-accent) 30%, #40544d); background: radial-gradient(circle at 48% 35%, color-mix(in srgb, var(--boss-accent) 17%, transparent), transparent 48%), rgba(6,16,13,.92); text-align: left; }
|
||||
.boss-pet-card::after { content: ""; position: absolute; inset: 2px; border: 1px solid rgba(220,237,229,.045); pointer-events: none; }
|
||||
.boss-pet-card.is-selected { border-color: color-mix(in srgb, var(--boss-accent) 72%, var(--gold)); box-shadow: inset 0 0 14px color-mix(in srgb, var(--boss-accent) 13%, transparent), 0 0 0 1px color-mix(in srgb, var(--boss-accent) 28%, transparent); }
|
||||
.boss-pet-icon { align-self: center; justify-self: center; color: color-mix(in srgb, var(--boss-accent) 74%, #fff2c9); font: 500 23px "Cinzel", serif; filter: drop-shadow(0 2px 5px rgba(0,0,0,.65)); }
|
||||
.boss-pet-card.is-unowned .boss-pet-icon { color: #819089; filter: grayscale(1); opacity: .58; }
|
||||
.boss-kill-badge { position: absolute; top: 4px; right: 4px; z-index: 2; min-width: 27px; display: grid; padding: 2px 4px; border: 1px solid color-mix(in srgb, var(--boss-accent) 52%, #786e50); color: #fff0bb; background: rgba(3,9,7,.9); text-align: center; }
|
||||
.boss-kill-badge small { color: #9a9d8d; font-size: 4px; font-weight: 700; letter-spacing: .1em; line-height: 1; text-transform: uppercase; }
|
||||
.boss-kill-badge b { font: 600 10px "Cinzel", serif; line-height: 1.1; }
|
||||
.boss-pet-card > strong { position: relative; z-index: 1; overflow: hidden; font-size: 7px; line-height: 1.05; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.boss-pet-card > small { position: relative; z-index: 1; overflow: hidden; color: color-mix(in srgb, var(--boss-accent) 55%, #74877f); font-size: 5px; line-height: 1.05; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
|
||||
.boss-pet-card.is-unowned > small { color: #68766f; }
|
||||
.profile-records-panel { display: grid; grid-template-rows: 43px 68px minmax(0, 1fr); gap: 5px; }
|
||||
.profile-metric-grid { min-width: 0; display: grid; gap: 5px; }
|
||||
.profile-metric-grid.metric-count-1 { grid-template-columns: 1fr; }
|
||||
.profile-metric-grid.metric-count-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
.profile-metric-grid.metric-count-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
||||
.profile-metric-grid button { min-width: 0; display: grid; align-content: center; padding: 6px 9px; border-color: #40584f; background: linear-gradient(145deg, rgba(14,31,26,.94), rgba(6,16,13,.94)); text-align: left; }
|
||||
.profile-metric-grid button.is-selected { border-color: var(--gold); box-shadow: inset 3px 0 var(--gold); background: linear-gradient(110deg, rgba(91,72,25,.29), rgba(8,20,17,.94)); }
|
||||
.profile-metric-grid button > small { color: var(--gold); font-size: 6px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
|
||||
.profile-metric-grid button > strong { overflow: hidden; margin-top: 1px; color: #f0f5f2; font: 500 15px "Cinzel", serif; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.profile-metric-grid button > span { overflow: hidden; color: #758a82; font-size: 6px; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
|
||||
.profile-leaderboard { min-height: 0; display: grid; grid-template-rows: 39px minmax(0, 1fr) 35px; }
|
||||
.profile-leaderboard > header { height: auto; min-height: 0; padding: 4px 8px; }
|
||||
.profile-leaderboard .leaderboard-header-actions { gap: 5px; }
|
||||
.profile-leaderboard .leaderboard-refresh { min-height: 22px; padding: 3px 6px; }
|
||||
.profile-leaderboard .leaderboard-rows { min-height: 0; overflow: hidden; padding: 2px 6px; }
|
||||
.profile-leaderboard .leaderboard-rows > div { min-height: 26px; grid-template-columns: 29px minmax(0, 1fr) 55px; gap: 6px; padding: 2px 5px; }
|
||||
.profile-leaderboard .leaderboard-rows > div > b { font-size: 9px; }
|
||||
.profile-leaderboard .leaderboard-rows strong { font-size: 7px; }
|
||||
.profile-leaderboard .leaderboard-rows small { font-size: 5px; }
|
||||
.profile-leaderboard .leaderboard-rows em { font-size: 11px; }
|
||||
.profile-leaderboard .leaderboard-self { min-height: 0; margin: 0 6px 4px; grid-template-columns: 29px minmax(0, 1fr) 55px; gap: 6px; padding: 2px 5px; }
|
||||
.profile-leaderboard .leaderboard-self > b { font-size: 9px; }
|
||||
.profile-leaderboard .leaderboard-self strong { font-size: 7px; }
|
||||
.profile-leaderboard .leaderboard-self small { font-size: 5px; }
|
||||
.profile-leaderboard .leaderboard-self em { font-size: 11px; }
|
||||
.profile-leaderboard .leaderboard-status,
|
||||
.profile-leaderboard .leaderboard-empty { min-height: 0 !important; padding: 7px; font-size: 6px; }
|
||||
.selected-boss-dossier { --boss-accent: var(--gold); min-height: 180px; display: grid; grid-template-columns: 145px minmax(0, 1fr); align-items: center; gap: 19px; margin-top: 17px; padding: 14px; border: 1px solid color-mix(in srgb, var(--boss-accent) 45%, #40564e); background: radial-gradient(circle at 13% 50%, color-mix(in srgb, var(--boss-accent) 18%, transparent), transparent 31%), linear-gradient(120deg, rgba(14,31,26,.96), rgba(6,15,12,.96)); }
|
||||
.selected-boss-pet { height: 146px; display: grid; place-items: center; align-content: center; gap: 8px; border: 1px solid color-mix(in srgb, var(--boss-accent) 55%, #53645e); background: rgba(3,10,8,.62); }
|
||||
.selected-boss-pet span { color: color-mix(in srgb, var(--boss-accent) 72%, #fff1bf); font: 500 55px "Cinzel", serif; filter: drop-shadow(0 5px 12px rgba(0,0,0,.7)); }
|
||||
.selected-boss-pet small { color: color-mix(in srgb, var(--boss-accent) 60%, #82928c); font-size: 7px; letter-spacing: .13em; text-transform: uppercase; }
|
||||
.selected-boss-pet.is-unowned span { color: #77857f; filter: grayscale(1); opacity: .56; }
|
||||
.selected-boss-copy { min-width: 0; }
|
||||
.selected-boss-copy > small { color: var(--boss-accent); font-size: 8px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
|
||||
.selected-boss-copy h2 { margin: 5px 0 8px; font: 500 clamp(20px, 4.4cqw, 27px) "Cinzel", serif; }
|
||||
.selected-boss-copy p { max-width: 390px; margin: 0; color: #91a69e; font-size: clamp(10px, 2.1cqw, 13px); line-height: 1.35; }
|
||||
.selected-boss-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
|
||||
.selected-boss-stats span { min-width: 0; display: grid; min-height: 67px; align-content: center; padding: 8px 10px; border: 1px solid var(--line); background: rgba(6,17,14,.82); }
|
||||
.selected-boss-stats small { color: #748a81; font-size: 7px; letter-spacing: .08em; text-transform: uppercase; }
|
||||
.selected-boss-stats strong { overflow: hidden; color: var(--gold-strong); font: 500 clamp(13px, 2.7cqw, 17px) "Cinzel", serif; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.selected-boss-mechanics { display: grid; gap: 3px; margin-top: 10px; padding: 10px 12px; border-left: 2px solid var(--gold); background: rgba(61,48,16,.15); }
|
||||
.selected-boss-mechanics span { color: var(--gold); font-size: 7px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
|
||||
.selected-boss-mechanics strong { font-size: clamp(9px, 2cqw, 12px); font-weight: 600; }
|
||||
.selected-boss-mechanics small { color: #72867f; font-size: clamp(7px, 1.5cqw, 9px); }
|
||||
|
||||
/* Settings */
|
||||
|
||||
.settings-surface { padding: 0 30px; }
|
||||
@@ -2000,6 +2320,7 @@ button:focus-visible {
|
||||
.mode-surface::after { position: absolute; right: -90px; bottom: -160px; width: 560px; height: 560px; z-index: -1; border: 1px solid rgba(232,200,114,0.13); border-radius: 50%; content: ""; box-shadow: inset 0 0 0 70px rgba(61,142,120,0.025), inset 0 0 0 140px rgba(232,200,114,0.018); }
|
||||
.mode-roguelike-pvp::after { border-color: rgba(192,99,92,0.2); }
|
||||
.mode-stadium-pvp::after { border-color: rgba(91,150,212,0.2); }
|
||||
.mode-blockbreaker::after { border-color: rgba(147,219,84,.24); box-shadow: inset 0 0 0 70px rgba(54,217,239,.025), inset 0 0 0 140px rgba(232,90,169,.018); }
|
||||
.mode-hero { width: 56%; margin: 52px 0 0 22px; }
|
||||
.mode-hero > span { color: var(--gold); font-size: 9px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; }
|
||||
.mode-hero h2 { margin: 8px 0; font-family: "Cinzel", serif; font-size: 35px; font-weight: 500; line-height: 1; }
|
||||
@@ -2033,6 +2354,8 @@ button:focus-visible {
|
||||
.mode-launch { position: absolute; right: 38px; bottom: 18px; width: 275px; min-height: 52px; display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-color: var(--gold) !important; color: #182019 !important; background: linear-gradient(110deg, #ffe499, #d1af54) !important; text-align: left; }
|
||||
.mode-launch span { font-family: "Cinzel", serif; font-size: 13px; font-weight: 600; }
|
||||
.mode-launch small { font-size: 8px; font-weight: 700; text-transform: uppercase; opacity: 0.65; }
|
||||
.mode-launch.is-queueing { border-color: #ff8eb9 !important; color: #fbe8ef !important; background: linear-gradient(110deg, #6f2348, #351525) !important; box-shadow: 0 0 18px rgba(239, 108, 159, 0.28); }
|
||||
.mode-hockey-healing-pvp > .front-notice { right: 330px; bottom: 24px; width: min(360px, calc(100% - 400px)); }
|
||||
.mode-surface > .front-notice { position: absolute; right: 38px; bottom: 20px; width: 360px; }
|
||||
.mode-context { padding: 0 5.5% 18px; }
|
||||
.mode-context .context-header { margin: 0 -5.8%; }
|
||||
@@ -2083,6 +2406,8 @@ button:focus-visible {
|
||||
.force-reduced-motion *,
|
||||
.force-reduced-motion *::before,
|
||||
.force-reduced-motion *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
|
||||
.force-reduced-motion .goal-popup { animation: none !important; }
|
||||
.force-reduced-motion .blockbreaker-score-popup { animation: none !important; }
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.bottom-display { width: 100%; }
|
||||
@@ -2145,7 +2470,7 @@ button:focus-visible {
|
||||
.version-actions button small { font-size: 6px; }
|
||||
.home-header { height: 35px; }
|
||||
.home-header > span, .home-header > i { font-size: 5px; }
|
||||
.mode-grid { grid-template-rows: repeat(2, 43px); gap: 5px; margin-top: 6px; }
|
||||
.mode-grid { grid-template-rows: repeat(2, 43px); grid-auto-rows: 43px; gap: 5px; margin-top: 6px; }
|
||||
.mode-card { grid-template-columns: 25px 1fr 8px; gap: 4px; padding: 4px; }
|
||||
.mode-card > i, .mode-card.is-wide > i { width: 23px; height: 23px; font-size: 10px; }
|
||||
.mode-card strong, .mode-card.is-wide strong { font-size: 8px; }
|
||||
@@ -2202,7 +2527,9 @@ button:focus-visible {
|
||||
.leaderboard-panel > header { height: 35px; padding: 3px 6px; }
|
||||
.leaderboard-panel > header small { font-size: 4px; }
|
||||
.leaderboard-panel > header strong { font-size: 7px; }
|
||||
.leaderboard-panel > header > b { font-size: 4px; }
|
||||
.leaderboard-header-actions { gap: 3px; }
|
||||
.leaderboard-header-actions > b { font-size: 4px; }
|
||||
.leaderboard-refresh { min-height: 18px; padding: 2px 3px; font-size: 4px; }
|
||||
.leaderboard-rows { min-height: 139px; padding: 2px 4px; }
|
||||
.leaderboard-rows > div, .leaderboard-self { min-height: 25px; grid-template-columns: 20px minmax(0, 1fr) 24px; gap: 3px; padding: 2px 3px; }
|
||||
.leaderboard-rows > div > b, .leaderboard-self > b { font-size: 7px; }
|
||||
@@ -2212,6 +2539,45 @@ button:focus-visible {
|
||||
.leaderboard-self { min-height: 29px; margin: 0 4px 3px; }
|
||||
.leaderboard-status, .leaderboard-empty { min-height: 139px; padding: 7px; font-size: 5px; }
|
||||
.leaderboard-empty { min-height: 130px !important; }
|
||||
.boss-index-panel > header,
|
||||
.profile-records-panel > header { height: 26px; gap: 3px; padding: 2px 4px; }
|
||||
.boss-index-panel > header small,
|
||||
.profile-records-panel > header small { font-size: 3px; }
|
||||
.boss-index-panel > header strong,
|
||||
.profile-records-panel > header strong { font-size: 6px; }
|
||||
.boss-index-panel > header > b,
|
||||
.profile-records-panel > header > b { font-size: 3px; }
|
||||
.boss-pet-grid { height: calc(100% - 26px); gap: 2px; padding: 2px; }
|
||||
.boss-pet-card { gap: 0; padding: 2px; }
|
||||
.boss-pet-card::after { inset: 1px; }
|
||||
.boss-pet-icon { font-size: 12px; }
|
||||
.boss-kill-badge { top: 2px; right: 2px; min-width: 15px; padding: 1px 2px; }
|
||||
.boss-kill-badge small { font-size: 2px; }
|
||||
.boss-kill-badge b { font-size: 5px; }
|
||||
.boss-pet-card > strong { font-size: 4px; }
|
||||
.boss-pet-card > small { font-size: 3px; }
|
||||
.profile-records-panel { grid-template-rows: 26px 40px minmax(0, 1fr); gap: 2px; }
|
||||
.profile-metric-grid { gap: 2px; }
|
||||
.profile-metric-grid button { padding: 2px 4px; }
|
||||
.profile-metric-grid button > small { font-size: 3px; }
|
||||
.profile-metric-grid button > strong { font-size: 7px; }
|
||||
.profile-metric-grid button > span { font-size: 3px; }
|
||||
.profile-leaderboard { grid-template-rows: 25px minmax(0, 1fr) 25px; }
|
||||
.profile-leaderboard > header { height: auto; padding: 2px 4px; }
|
||||
.profile-leaderboard .leaderboard-refresh { min-height: 14px; padding: 1px 3px; }
|
||||
.profile-leaderboard .leaderboard-rows { min-height: 0; padding: 1px 3px; }
|
||||
.profile-leaderboard .leaderboard-rows > div { min-height: 18px; grid-template-columns: 16px minmax(0, 1fr) 27px; gap: 2px; padding: 1px 2px; }
|
||||
.profile-leaderboard .leaderboard-rows > div > b,
|
||||
.profile-leaderboard .leaderboard-self > b { font-size: 4px; }
|
||||
.profile-leaderboard .leaderboard-rows strong,
|
||||
.profile-leaderboard .leaderboard-self strong { font-size: 4px; }
|
||||
.profile-leaderboard .leaderboard-rows small,
|
||||
.profile-leaderboard .leaderboard-self small { font-size: 2px; }
|
||||
.profile-leaderboard .leaderboard-rows em,
|
||||
.profile-leaderboard .leaderboard-self em { font-size: 5px; }
|
||||
.profile-leaderboard .leaderboard-self { min-height: 0; margin: 0 3px 2px; grid-template-columns: 16px minmax(0, 1fr) 27px; gap: 2px; padding: 1px 2px; }
|
||||
.profile-leaderboard .leaderboard-status,
|
||||
.profile-leaderboard .leaderboard-empty { min-height: 0 !important; padding: 3px; font-size: 3px; }
|
||||
.settings-layout { gap: 7px; padding-top: 7px; }
|
||||
.volume-setting { height: 98px; padding: 7px; }
|
||||
.volume-setting strong { font-size: 8px; }
|
||||
@@ -2249,12 +2615,13 @@ button:focus-visible {
|
||||
.mode-launch { right: 14px; bottom: 25px; width: 33%; min-height: 33px; padding: 5px 7px; }
|
||||
.mode-launch span { font-size: 7px; }
|
||||
.mode-launch small { font-size: 4px; }
|
||||
.mode-hockey-healing-pvp > .front-notice { right: 37%; bottom: 27px; width: 36%; padding: 3px 5px; font-size: 5px; }
|
||||
.game-menu-button { padding: 3px 5px; font-size: 6px; }
|
||||
}
|
||||
|
||||
/* Data-driven loot and gear workshop */
|
||||
|
||||
.home-secondary-actions { grid-template-columns: repeat(3, 1fr); }
|
||||
.home-secondary-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
.collection-grid { grid-template-columns: repeat(3, 1fr); gap: 9px; }
|
||||
.collection-drop { height: 154px; padding: 8px 9px; }
|
||||
.collection-drop.rarity-epic { border-top-color: #a071c1; }
|
||||
@@ -2392,13 +2759,131 @@ button:focus-visible {
|
||||
.gear-passive-ability-filter button { min-height: 14px; padding: 1px 2px; font-size: 3px; }
|
||||
}
|
||||
|
||||
/* Appearance Lab */
|
||||
|
||||
.appearance-surface { padding: 0 24px 15px; }
|
||||
.appearance-header { height: 58px; }
|
||||
.appearance-preview-stage {
|
||||
position: relative;
|
||||
height: calc(100% - 91px);
|
||||
margin-top: 8px;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(151, 194, 178, .28);
|
||||
background: #07100e;
|
||||
box-shadow: inset 0 0 70px rgba(0, 0, 0, .4);
|
||||
}
|
||||
.appearance-preview-stage::after {
|
||||
position: absolute;
|
||||
inset: 7px;
|
||||
z-index: 2;
|
||||
border: 1px solid rgba(230, 207, 137, .1);
|
||||
content: "";
|
||||
pointer-events: none;
|
||||
}
|
||||
.appearance-preview-stage > div:first-child,
|
||||
.appearance-preview-stage canvas { width: 100% !important; height: 100% !important; }
|
||||
.appearance-preview-loading { height: 100%; display: grid; place-content: center; gap: 6px; color: #7e948b; text-align: center; }
|
||||
.appearance-preview-loading span { color: var(--gold); font-size: 25px; }
|
||||
.appearance-preview-loading strong { font: 500 12px "Cinzel", serif; }
|
||||
.appearance-preview-mode {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
left: 17px;
|
||||
z-index: 3;
|
||||
display: grid;
|
||||
gap: 2px;
|
||||
padding: 7px 10px;
|
||||
border-left: 2px solid #67c89e;
|
||||
background: rgba(3, 12, 10, .84);
|
||||
pointer-events: none;
|
||||
}
|
||||
.appearance-preview-mode span { color: #aee8d0; font-size: 8px; font-weight: 800; letter-spacing: .13em; }
|
||||
.appearance-preview-mode small { color: #71877e; font-size: 7px; text-transform: uppercase; }
|
||||
.appearance-preview-mode.is-legacy { border-color: #db9b65; }
|
||||
.appearance-preview-mode.is-legacy span { color: #f0b47d; }
|
||||
.appearance-preview-name {
|
||||
position: absolute;
|
||||
right: 18px;
|
||||
bottom: 16px;
|
||||
z-index: 3;
|
||||
min-width: 195px;
|
||||
display: grid;
|
||||
justify-items: end;
|
||||
padding: 9px 12px;
|
||||
border-right: 2px solid var(--gold);
|
||||
background: linear-gradient(90deg, transparent, rgba(3, 11, 9, .9) 28%);
|
||||
pointer-events: none;
|
||||
}
|
||||
.appearance-preview-name small { color: #81968e; font-size: 7px; letter-spacing: .12em; text-transform: uppercase; }
|
||||
.appearance-preview-name strong { font: 500 22px "Cinzel", serif; }
|
||||
.appearance-preview-name span { margin-top: 2px; color: var(--gold); font-size: 7px; font-weight: 800; letter-spacing: .12em; }
|
||||
.appearance-top-hint { height: 25px; display: flex; align-items: end; justify-content: space-between; color: #71867e; font-size: 7px; text-transform: uppercase; }
|
||||
.appearance-top-hint b { color: var(--gold-strong); }
|
||||
|
||||
.appearance-context { padding: 0 12px 9px; }
|
||||
.appearance-context .context-header { height: 40px; margin: 0 -12px; padding: 0 12px; }
|
||||
.appearance-context .context-header b { color: var(--gold-strong); }
|
||||
.appearance-class-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin-top: 6px; }
|
||||
.appearance-class-tabs button { min-width: 0; min-height: 38px; display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: center; gap: 4px; padding: 4px 6px; color: #81978e; font-size: 8px; text-align: left; }
|
||||
.appearance-class-tabs button i { display: grid; place-items: center; font-size: 10px; font-style: normal; }
|
||||
.appearance-class-tabs button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.appearance-class-tabs button.is-selected { border-color: var(--gold); color: #edf8f3; background: rgba(73, 59, 21, .3); }
|
||||
.appearance-animation-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 5px; }
|
||||
.appearance-animation-tabs button { min-height: 29px; padding: 4px; color: #778c84; font-size: 8px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
|
||||
.appearance-animation-tabs button.is-selected { border-color: #60b997; color: #9ae0c2; background: rgba(39, 101, 78, .2); }
|
||||
.appearance-slot-list { display: grid; gap: 3px; margin-top: 5px; }
|
||||
.appearance-slot-row {
|
||||
min-height: 36px;
|
||||
display: grid;
|
||||
grid-template-columns: 132px 31px minmax(0, 1fr) 31px;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 3px 4px 3px 8px;
|
||||
border: 1px solid rgba(139, 178, 164, .15);
|
||||
background: rgba(5, 16, 13, .72);
|
||||
}
|
||||
.appearance-slot-row.is-controller-active { border-color: rgba(232, 200, 114, .42); background: linear-gradient(90deg, rgba(77, 62, 22, .22), rgba(5, 16, 13, .78)); }
|
||||
.appearance-slot-row > span { min-width: 0; display: grid; }
|
||||
.appearance-slot-row > span strong { color: #dce9e4; font-size: 9px; }
|
||||
.appearance-slot-row > span small { overflow: hidden; color: #647a71; font-size: 6px; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
|
||||
.appearance-slot-row > b { overflow: hidden; color: var(--gold-strong); font: 500 9px "Cinzel", serif; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.appearance-slot-row button { min-width: 0; height: 28px; padding: 0; color: #c9d8d2; font-size: 18px; line-height: 1; }
|
||||
.appearance-slot-row.is-disabled { opacity: .55; }
|
||||
.appearance-slot-row.is-disabled > b { color: #8f9c97; }
|
||||
.appearance-actions { display: grid; grid-template-columns: 1.25fr .75fr 1fr .75fr; gap: 4px; margin-top: 6px; }
|
||||
.appearance-actions button { min-width: 0; min-height: 42px; display: grid; align-content: center; padding: 5px 7px; text-align: left; }
|
||||
.appearance-actions strong { overflow: hidden; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.appearance-actions small { color: #687d75; font-size: 6px; text-transform: uppercase; }
|
||||
.appearance-actions button.is-primary { border-color: var(--gold); color: #172019; background: linear-gradient(110deg, #ffe499, #cfaa4c); }
|
||||
.appearance-actions button.is-primary small { color: #615129; }
|
||||
.appearance-save-state { margin-top: 5px; padding: 5px 8px; border-left: 2px solid #5fc197; color: #81978e; background: rgba(5, 16, 13, .72); font-size: 7px; }
|
||||
.appearance-save-state.is-dirty { border-color: var(--gold); color: #d8bd72; }
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.home-secondary-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
.appearance-surface { padding: 0 12px 8px; }
|
||||
.appearance-header { height: 44px; }
|
||||
.appearance-preview-stage { height: calc(100% - 68px); margin-top: 5px; }
|
||||
.appearance-preview-name { right: 10px; bottom: 10px; min-width: 145px; padding: 6px 8px; }
|
||||
.appearance-preview-name strong { font-size: 15px; }
|
||||
.appearance-preview-mode { top: 10px; left: 10px; padding: 5px 7px; }
|
||||
.appearance-top-hint { height: 18px; font-size: 5px; }
|
||||
.appearance-context { padding: 0 8px 6px; }
|
||||
.appearance-context .context-header { margin: 0 -8px; padding: 0 8px; }
|
||||
.appearance-class-tabs button { padding: 3px 4px; font-size: 7px; }
|
||||
.appearance-slot-row { grid-template-columns: 122px 29px minmax(0, 1fr) 29px; min-height: 34px; padding: 2px 3px 2px 7px; }
|
||||
.appearance-slot-row button { height: 27px; }
|
||||
.appearance-slot-row > span strong { font-size: 8px; }
|
||||
.appearance-slot-row > b { font-size: 8px; }
|
||||
}
|
||||
|
||||
.reward-summary { display: grid; gap: 4px; margin: 8px 0; }
|
||||
.reward-summary > span { padding: 5px 7px; border: 1px solid rgba(232,200,114,.25); color: #dbe8e3; background: rgba(68,54,18,.17); font-size: 8px; }
|
||||
.reward-summary b { margin-right: 6px; color: var(--gold); }
|
||||
.reward-summary i { color: #d79b42; font-style: normal; }
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.home-secondary-actions { grid-template-columns: repeat(3, 1fr); }
|
||||
.home-secondary-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
.collection-grid { grid-template-columns: repeat(3, 1fr); }
|
||||
.collection-drop { height: 96px; padding: 4px 5px; }
|
||||
.collection-drop .drop-icon { width: 25px; height: 25px; margin: 1px auto 2px; font-size: 10px; }
|
||||
@@ -2407,6 +2892,10 @@ button:focus-visible {
|
||||
.collection-note { margin-top: 3px; padding: 2px 4px; }
|
||||
.profile-stats span { padding: 5px 7px; }
|
||||
.profile-stats strong { font-size: 12px; }
|
||||
.blockbreaker-profile-records { margin: 3px 0; }
|
||||
.blockbreaker-profile-records > span { padding: 3px 5px; }
|
||||
.blockbreaker-profile-records small { font-size: 4px; }
|
||||
.blockbreaker-profile-records strong { font-size: 8px; }
|
||||
.boss-log { margin-top: 5px; }
|
||||
.boss-log button { min-height: 40px; gap: 5px; margin-top: 3px; padding: 3px 6px; }
|
||||
.boss-log button > i { width: 23px; height: 23px; }
|
||||
|
||||
Reference in New Issue
Block a user