2670 lines
172 KiB
CSS
2670 lines
172 KiB
CSS
:root {
|
|
color-scheme: dark;
|
|
font-family: "Trebuchet MS", "Segoe UI", sans-serif;
|
|
--ink: #eef2df;
|
|
--muted: #aab6a2;
|
|
--moss: #92b77b;
|
|
--moss-bright: #c7dc8b;
|
|
--gold: #d4ab55;
|
|
--cave: #07110d;
|
|
--panel: rgba(8, 20, 15, 0.84);
|
|
--panel-solid: #0b1a14;
|
|
--edge: rgba(183, 207, 151, 0.22);
|
|
--shadow: 0 18px 50px rgba(0, 0, 0, 0.42);
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
|
|
html, body, #root {
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 0;
|
|
overflow: hidden;
|
|
background: var(--cave);
|
|
}
|
|
|
|
body { color: var(--ink); }
|
|
button { font: inherit; }
|
|
|
|
.game-shell, .scene-shell {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.scene-shell { cursor: crosshair; }
|
|
.scene-shell canvas { display: block; }
|
|
|
|
.hud {
|
|
position: absolute;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
z-index: 10;
|
|
}
|
|
|
|
.manastorm-status {
|
|
position: absolute;
|
|
top: max(12px, env(safe-area-inset-top));
|
|
left: 50%;
|
|
display: flex;
|
|
min-width: 330px;
|
|
align-items: center;
|
|
gap: 11px;
|
|
padding: 7px 12px 7px 8px;
|
|
border: 1px solid rgba(171,226,239,.4);
|
|
border-radius: 25px 9px 9px 25px;
|
|
background: linear-gradient(105deg, rgba(55,31,92,.9), rgba(7,29,36,.88));
|
|
box-shadow: 0 9px 30px rgba(0,0,0,.42), inset 0 0 18px rgba(153,99,220,.13);
|
|
transform: translateX(-50%);
|
|
backdrop-filter: blur(9px);
|
|
}
|
|
.manastorm-status > div { display: grid; width: 43px; height: 43px; flex: 0 0 43px; place-items: center; align-content: center; border: 1px solid rgba(166,237,244,.62); border-radius: 50%; background: rgba(31,16,54,.84); }
|
|
.manastorm-status > div span { color: #a9dce7; font-size: 5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
|
|
.manastorm-status > div strong { color: #f1e8ff; font: 18px Georgia, serif; line-height: 1; }
|
|
.manastorm-status > div small { color: #91bcc6; font-size: 5px; line-height: 1; }
|
|
.manastorm-status > p { display: flex; min-width: 0; flex-direction: column; margin: 0; }
|
|
.manastorm-status > p b { overflow: hidden; color: #f0e7ff; font: 12px Georgia, serif; text-overflow: ellipsis; white-space: nowrap; }
|
|
.manastorm-status > p small { margin-top: 2px; color: #a9c7d0; font-size: 6px; letter-spacing: .03em; }
|
|
.manastorm-affixes { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 3px; }
|
|
.manastorm-affixes i { display: inline-flex; align-items: center; gap: 3px; padding: 2px 4px; border: 1px solid rgba(186,132,234,.35); border-radius: 5px; color: #d8bdf1; font-size: 5px; font-style: normal; letter-spacing: .04em; text-transform: uppercase; }
|
|
.manastorm-affixes img { width: 10px; height: 10px; border-radius: 2px; object-fit: cover; }
|
|
.manastorm-objective {
|
|
position: absolute;
|
|
top: max(72px, calc(env(safe-area-inset-top) + 60px));
|
|
left: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 7px;
|
|
padding: 5px 10px;
|
|
border: 1px solid rgba(174,203,211,.2);
|
|
border-radius: 14px;
|
|
background: rgba(5,15,20,.78);
|
|
color: #d8e7e8;
|
|
font-size: 7px;
|
|
letter-spacing: .08em;
|
|
text-transform: uppercase;
|
|
transform: translateX(-50%);
|
|
backdrop-filter: blur(7px);
|
|
}
|
|
.manastorm-objective > span { color: #ac73ef; font-size: 12px; }
|
|
.manastorm-objective--portal-ready { border-color: rgba(132,237,241,.5); color: #eaffff; box-shadow: 0 0 18px rgba(102,211,228,.16); }
|
|
.manastorm-objective--portal-ready > span { color: #9ef7ff; }
|
|
.manastorm-client-overlay {
|
|
--manastorm-bubble-tone: #79d599;
|
|
--manastorm-bubble-glow: rgba(82,213,135,.18);
|
|
position: absolute;
|
|
top: max(104px, calc(env(safe-area-inset-top) + 92px));
|
|
left: 50%;
|
|
display: flex;
|
|
max-width: min(340px, calc(100vw - 28px));
|
|
align-items: stretch;
|
|
justify-content: center;
|
|
gap: 5px;
|
|
transform: translateX(-50%);
|
|
}
|
|
.manastorm-client-overlay--warning { --manastorm-bubble-tone: #e7bd55; --manastorm-bubble-glow: rgba(231,189,85,.21); }
|
|
.manastorm-client-overlay--danger { --manastorm-bubble-tone: #ed665f; --manastorm-bubble-glow: rgba(237,102,95,.25); }
|
|
.manastorm-countdown,
|
|
.manastorm-safety-bubble {
|
|
margin: 0;
|
|
border: 1px solid color-mix(in srgb, var(--manastorm-bubble-tone) 52%, transparent);
|
|
border-radius: 7px;
|
|
background: linear-gradient(110deg, rgba(8,23,28,.92), rgba(30,18,47,.9));
|
|
box-shadow: 0 7px 20px rgba(0,0,0,.34), 0 0 16px var(--manastorm-bubble-glow);
|
|
backdrop-filter: blur(7px);
|
|
}
|
|
.manastorm-countdown {
|
|
display: flex;
|
|
min-width: 76px;
|
|
align-items: baseline;
|
|
justify-content: center;
|
|
gap: 5px;
|
|
padding: 5px 8px;
|
|
color: #c8dfe4;
|
|
}
|
|
.manastorm-countdown span,
|
|
.manastorm-safety-bubble p span { font-size: 6px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
|
|
.manastorm-countdown strong { color: #f2e7ff; font: 13px Georgia, serif; }
|
|
.manastorm-safety-bubble { width: 178px; padding: 5px 7px 6px; }
|
|
.manastorm-safety-bubble p { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0; color: #c8dfe4; }
|
|
.manastorm-safety-bubble p strong { color: var(--manastorm-bubble-tone); font: 11px Georgia, serif; }
|
|
.manastorm-safety-bubble > i { display: block; height: 4px; margin-top: 3px; overflow: hidden; border-radius: 999px; background: rgba(0,0,0,.62); }
|
|
.manastorm-safety-bubble > i > b { display: block; height: 100%; border-radius: inherit; background: var(--manastorm-bubble-tone); box-shadow: 0 0 8px var(--manastorm-bubble-tone); transition: width 160ms linear, background-color 160ms ease; }
|
|
.manastorm-cache-open { position: absolute; top: max(104px, calc(env(safe-area-inset-top) + 92px)); left: 50%; padding: 4px 9px; border: 1px solid rgba(217,178,91,.5); border-radius: 12px; background: rgba(46,31,11,.86); color: #f3dda0; font-size: 6px; letter-spacing: .08em; text-transform: uppercase; transform: translateX(-50%); pointer-events: auto; }
|
|
.hud:has(.manastorm-client-overlay) .manastorm-cache-open { top: max(150px, calc(env(safe-area-inset-top) + 138px)); }
|
|
.loot-reward {
|
|
position: absolute;
|
|
right: max(14px, env(safe-area-inset-right));
|
|
bottom: max(72px, calc(env(safe-area-inset-bottom) + 58px));
|
|
display: grid;
|
|
max-width: min(310px, calc(100vw - 28px));
|
|
grid-template-columns: 30px minmax(0, 1fr);
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 8px 10px;
|
|
border: 1px solid rgba(226, 197, 101, .52);
|
|
border-radius: 8px 3px 8px 3px;
|
|
background: linear-gradient(110deg, rgba(38,31,12,.94), rgba(8,22,15,.94));
|
|
box-shadow: 0 10px 30px rgba(0,0,0,.48);
|
|
backdrop-filter: blur(7px);
|
|
}
|
|
.loot-reward > span { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid #dac46d; border-radius: 50%; color: #f2dd89; }
|
|
.loot-reward p { display: flex; min-width: 0; flex-direction: column; margin: 0; }
|
|
.loot-reward strong { color: #f1dfa2; font: 11px Georgia, serif; }
|
|
.loot-reward small { margin-top: 2px; overflow: hidden; color: #d8d9c2; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
|
|
.loot-reward em { margin-top: 3px; color: #8fb78a; font-size: 6px; font-style: normal; letter-spacing: .06em; text-transform: uppercase; }
|
|
|
|
.boss-loot-window {
|
|
position: absolute;
|
|
top: 50%;
|
|
right: max(16px, env(safe-area-inset-right));
|
|
width: min(360px, calc(100vw - 32px));
|
|
overflow: hidden;
|
|
border: 1px solid rgba(226, 197, 101, .62);
|
|
border-radius: 12px 4px 12px 4px;
|
|
background:
|
|
radial-gradient(circle at 12% 0%, rgba(216, 174, 68, .17), transparent 38%),
|
|
linear-gradient(145deg, rgba(27, 24, 11, .98), rgba(6, 18, 13, .98));
|
|
box-shadow: 0 20px 60px rgba(0, 0, 0, .62), inset 0 0 28px rgba(202, 172, 76, .05);
|
|
transform: translateY(-50%);
|
|
pointer-events: auto;
|
|
backdrop-filter: blur(12px);
|
|
animation: boss-loot-arrive 260ms ease-out both;
|
|
}
|
|
.boss-loot-window > header {
|
|
display: grid;
|
|
grid-template-columns: 38px minmax(0, 1fr) 28px;
|
|
align-items: center;
|
|
gap: 9px;
|
|
padding: 10px 10px 9px;
|
|
border-bottom: 1px solid rgba(224, 195, 103, .24);
|
|
background: linear-gradient(90deg, rgba(113, 87, 25, .22), transparent);
|
|
}
|
|
.boss-loot-window > header > span {
|
|
display: grid;
|
|
width: 36px;
|
|
height: 36px;
|
|
place-items: center;
|
|
border: 1px solid rgba(236, 207, 111, .7);
|
|
border-radius: 50%;
|
|
color: #f3dd86;
|
|
box-shadow: inset 0 0 12px rgba(232, 194, 77, .12);
|
|
}
|
|
.boss-loot-window > header p { display: flex; min-width: 0; flex-direction: column; margin: 0; }
|
|
.boss-loot-window > header small { color: #bba96d; font-size: 7px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
|
|
.boss-loot-window > header strong { margin-top: 2px; overflow: hidden; color: #f5e9bd; font: 15px Georgia, serif; text-overflow: ellipsis; white-space: nowrap; }
|
|
.boss-loot-window > header button {
|
|
width: 28px;
|
|
height: 28px;
|
|
padding: 0;
|
|
border: 1px solid rgba(225, 204, 136, .24);
|
|
border-radius: 5px;
|
|
background: rgba(0, 0, 0, .22);
|
|
color: #d4ca9e;
|
|
cursor: pointer;
|
|
}
|
|
.boss-loot-window__body { padding: 11px; }
|
|
.boss-loot-window__eyebrow { margin: 0 0 7px; color: #8fb78a; font-size: 7px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
|
|
.boss-loot-window__items { display: grid; max-height: min(210px, 38vh); gap: 6px; overflow-y: auto; }
|
|
.boss-loot-window__item {
|
|
display: grid;
|
|
min-height: 52px;
|
|
grid-template-columns: 38px minmax(0, 1fr) auto;
|
|
align-items: center;
|
|
gap: 9px;
|
|
padding: 7px;
|
|
border: 1px solid color-mix(in srgb, var(--item-quality) 42%, transparent);
|
|
border-left: 3px solid var(--item-quality);
|
|
border-radius: 5px;
|
|
background: color-mix(in srgb, var(--item-quality) 8%, rgba(4, 12, 8, .86));
|
|
}
|
|
.boss-loot-window__item > b {
|
|
display: grid;
|
|
width: 36px;
|
|
height: 36px;
|
|
place-items: center;
|
|
border: 1px solid color-mix(in srgb, var(--item-quality) 55%, transparent);
|
|
border-radius: 5px;
|
|
background: rgba(0, 0, 0, .3);
|
|
color: var(--item-quality);
|
|
font: 11px Georgia, serif;
|
|
}
|
|
.boss-loot-window__item > p { display: flex; min-width: 0; flex-direction: column; margin: 0; }
|
|
.boss-loot-window__item strong { overflow: hidden; color: var(--item-quality); font: 12px Georgia, serif; text-overflow: ellipsis; white-space: nowrap; }
|
|
.boss-loot-window__item small { margin-top: 3px; color: #bdc8b6; font-size: 7px; text-transform: capitalize; }
|
|
.boss-loot-window__item em { color: #d9c873; font-size: 9px; font-style: normal; }
|
|
.boss-loot-window__empty { margin: 6px 0; color: var(--muted); font-size: 9px; }
|
|
.boss-loot-window > footer {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
padding: 8px 11px;
|
|
border-top: 1px solid rgba(224, 195, 103, .17);
|
|
background: rgba(0, 0, 0, .18);
|
|
}
|
|
.boss-loot-window > footer span { color: #aebaa8; font-size: 7px; }
|
|
.boss-loot-window > footer button {
|
|
flex: 0 0 auto;
|
|
padding: 5px 8px;
|
|
border: 1px solid rgba(226, 197, 101, .48);
|
|
border-radius: 5px;
|
|
background: linear-gradient(#5d4d1f, #30280f);
|
|
color: #f3e5ae;
|
|
font-size: 8px;
|
|
font-weight: 800;
|
|
cursor: pointer;
|
|
}
|
|
@keyframes boss-loot-arrive {
|
|
from { opacity: 0; transform: translate(18px, -50%) scale(.97); }
|
|
to { opacity: 1; transform: translate(0, -50%) scale(1); }
|
|
}
|
|
|
|
.eyebrow {
|
|
margin: 0 0 5px;
|
|
color: var(--moss-bright);
|
|
font-size: 0.68rem;
|
|
font-weight: 800;
|
|
letter-spacing: 0.17em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.objective-chip {
|
|
position: absolute;
|
|
top: max(18px, env(safe-area-inset-top));
|
|
left: max(18px, env(safe-area-inset-left));
|
|
width: min(330px, calc(100vw - 36px));
|
|
padding: 13px 17px 12px;
|
|
border: 1px solid var(--edge);
|
|
border-left: 3px solid var(--gold);
|
|
border-radius: 4px 13px 13px 4px;
|
|
background: linear-gradient(110deg, rgba(7, 18, 13, 0.94), rgba(12, 27, 20, 0.77));
|
|
box-shadow: var(--shadow);
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
.objective-chip h1 {
|
|
margin: 0;
|
|
font-family: Georgia, "Times New Roman", serif;
|
|
font-size: clamp(1.05rem, 2vw, 1.35rem);
|
|
font-weight: 500;
|
|
letter-spacing: 0.015em;
|
|
}
|
|
|
|
.objective-chip > p:last-child {
|
|
margin: 4px 0 0;
|
|
color: var(--muted);
|
|
font-size: 0.76rem;
|
|
}
|
|
|
|
.status-strip {
|
|
position: absolute;
|
|
top: max(18px, env(safe-area-inset-top));
|
|
right: max(18px, env(safe-area-inset-right));
|
|
display: flex;
|
|
min-height: 43px;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 5px 6px 5px 10px;
|
|
border: 1px solid var(--edge);
|
|
border-radius: 12px;
|
|
background: var(--panel);
|
|
box-shadow: var(--shadow);
|
|
backdrop-filter: blur(10px);
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.status-strip > span:not(.compass) {
|
|
min-width: 53px;
|
|
color: var(--muted);
|
|
font-size: 0.72rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.status-strip strong { color: var(--ink); font-size: 0.9rem; }
|
|
.status-strip button, .icon-button {
|
|
min-height: 31px;
|
|
border: 1px solid rgba(202, 218, 173, 0.16);
|
|
border-radius: 8px;
|
|
background: rgba(149, 183, 124, 0.08);
|
|
color: var(--ink);
|
|
cursor: pointer;
|
|
}
|
|
.status-strip button { padding: 0 9px; font-size: 0.72rem; }
|
|
.status-strip button:hover, .icon-button:hover { background: rgba(149, 183, 124, 0.2); }
|
|
kbd { color: var(--moss-bright); font: inherit; font-size: 0.64rem; }
|
|
|
|
.compass {
|
|
position: relative;
|
|
display: grid;
|
|
width: 28px;
|
|
height: 28px;
|
|
place-items: center;
|
|
border: 1px solid rgba(207, 222, 181, 0.2);
|
|
border-radius: 50%;
|
|
color: var(--muted);
|
|
font-size: 0.58rem;
|
|
}
|
|
.compass__needle {
|
|
position: absolute;
|
|
width: 2px;
|
|
height: 11px;
|
|
transform-origin: 50% 100%;
|
|
background: linear-gradient(var(--gold) 50%, transparent 50%);
|
|
}
|
|
|
|
.control-hint {
|
|
position: absolute;
|
|
bottom: max(19px, env(safe-area-inset-bottom));
|
|
left: 50%;
|
|
padding: 8px 13px;
|
|
transform: translateX(-50%);
|
|
border: 1px solid var(--edge);
|
|
border-radius: 999px;
|
|
background: rgba(5, 14, 10, 0.78);
|
|
color: #d8e0cb;
|
|
font-size: 0.72rem;
|
|
white-space: nowrap;
|
|
box-shadow: 0 9px 30px rgba(0, 0, 0, 0.32);
|
|
transition: opacity 500ms ease;
|
|
}
|
|
.control-hint--settled { opacity: 0.35; }
|
|
|
|
.reticle {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 5px;
|
|
height: 5px;
|
|
transform: translate(-50%, -50%);
|
|
border: 1px solid rgba(235, 241, 214, 0.72);
|
|
border-radius: 50%;
|
|
box-shadow: 0 0 8px rgba(196, 219, 150, 0.5);
|
|
}
|
|
|
|
.asset-notice {
|
|
position: absolute;
|
|
right: 18px;
|
|
bottom: 18px;
|
|
display: flex;
|
|
max-width: 310px;
|
|
flex-direction: column;
|
|
padding: 9px 12px;
|
|
border: 1px solid rgba(212, 171, 85, 0.3);
|
|
border-radius: 9px;
|
|
background: rgba(35, 28, 10, 0.86);
|
|
color: #d9c98e;
|
|
font-size: 0.67rem;
|
|
}
|
|
.asset-notice span { opacity: 0.75; }
|
|
|
|
.loading-screen, .scene-error, .graphics-recovery {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: grid;
|
|
place-content: center;
|
|
justify-items: center;
|
|
padding: 24px;
|
|
background:
|
|
radial-gradient(circle at 50% 42%, rgba(45, 85, 56, 0.38), transparent 31%),
|
|
#06100c;
|
|
text-align: center;
|
|
pointer-events: auto;
|
|
z-index: 60;
|
|
}
|
|
.loading-screen__mark {
|
|
display: grid;
|
|
width: 64px;
|
|
height: 64px;
|
|
margin-bottom: 18px;
|
|
place-items: center;
|
|
border: 1px solid rgba(199, 220, 139, 0.34);
|
|
border-radius: 50% 44% 51% 43%;
|
|
color: var(--moss-bright);
|
|
font-family: Georgia, serif;
|
|
font-size: 1.15rem;
|
|
box-shadow: inset 0 0 20px rgba(115, 155, 99, 0.18), 0 0 40px rgba(115, 155, 99, 0.15);
|
|
}
|
|
.loading-screen h1, .scene-error h1, .graphics-recovery h1 {
|
|
margin: 0 0 18px;
|
|
font-family: Georgia, serif;
|
|
font-size: clamp(1.5rem, 5vw, 2.5rem);
|
|
font-weight: 400;
|
|
}
|
|
.loading-screen__track {
|
|
width: min(340px, 72vw);
|
|
height: 3px;
|
|
overflow: hidden;
|
|
background: rgba(255, 255, 255, 0.09);
|
|
}
|
|
.loading-screen__track span { display: block; height: 100%; background: var(--moss); transition: width 180ms ease; }
|
|
.loading-screen__item { color: var(--muted); font-size: 0.72rem; }
|
|
.graphics-recovery p:not(.eyebrow) { max-width: 550px; color: var(--muted); }
|
|
.graphics-recovery .button { margin-top: 10px; }
|
|
|
|
.map-panel {
|
|
position: absolute;
|
|
top: 50%;
|
|
right: max(18px, env(safe-area-inset-right));
|
|
z-index: 30;
|
|
width: min(470px, calc(100vw - 36px));
|
|
max-height: calc(100vh - 36px);
|
|
padding: 18px;
|
|
transform: translateY(-50%);
|
|
overflow: auto;
|
|
border: 1px solid var(--edge);
|
|
border-radius: 16px;
|
|
background: linear-gradient(145deg, rgba(12, 29, 21, 0.97), rgba(6, 16, 12, 0.97));
|
|
box-shadow: var(--shadow);
|
|
backdrop-filter: blur(14px);
|
|
}
|
|
.map-panel header { display: flex; align-items: start; justify-content: space-between; }
|
|
.map-panel h2 { margin: 0; font-family: Georgia, serif; font-size: 1.5rem; font-weight: 400; }
|
|
.icon-button { width: 34px; color: var(--muted); }
|
|
.map-panel__canvas { margin: 14px 0 12px; overflow: hidden; border: 1px solid rgba(187, 208, 160, 0.14); border-radius: 10px; background: #07140f; }
|
|
.map-panel svg { display: block; width: 100%; height: auto; }
|
|
.map-contour { fill: none; stroke: rgba(133, 175, 114, 0.3); stroke-width: 15; stroke-linecap: round; }
|
|
.map-contour--thin { stroke: rgba(179, 199, 142, 0.15); stroke-width: 6; }
|
|
.map-patrol polyline { fill: none; stroke: rgba(221, 155, 77, 0.72); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 5 4; }
|
|
.map-patrol circle { fill: #d99a4f; stroke: #ffe2a5; stroke-width: 1; }
|
|
.map-anchor circle { fill: #a78649; stroke: #e1c77d; stroke-width: 1.5; }
|
|
.map-anchor--entrance circle { fill: #7fb68b; stroke: #d8e8b9; }
|
|
.map-player-glow { fill: rgba(195, 222, 144, 0.55); }
|
|
.map-player { fill: #f2f2d5; stroke: #3e6d4c; stroke-width: 2; }
|
|
.map-heading { stroke: #f2f2d5; stroke-width: 2.5; stroke-linecap: round; }
|
|
.map-panel__readout { display: grid; grid-template-columns: 1.4fr 1fr; gap: 8px; }
|
|
.map-panel__readout div { min-width: 0; padding: 9px 10px; border: 1px solid rgba(185, 204, 156, 0.12); border-radius: 8px; background: rgba(148, 179, 124, 0.05); }
|
|
.map-panel__readout span, .map-panel__readout strong { display: block; }
|
|
.map-panel__readout span { margin-bottom: 3px; color: var(--muted); font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.08em; }
|
|
.map-panel__readout strong { overflow: hidden; font-size: 0.73rem; text-overflow: ellipsis; white-space: nowrap; }
|
|
.map-panel__note { margin: 10px 2px 0; color: var(--muted); font-size: 0.66rem; }
|
|
|
|
.modal-backdrop {
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: 90;
|
|
display: grid;
|
|
place-items: center;
|
|
padding: 18px;
|
|
background: rgba(2, 7, 5, 0.67);
|
|
backdrop-filter: blur(7px);
|
|
}
|
|
.pause-menu {
|
|
width: min(440px, 100%);
|
|
max-height: 100%;
|
|
overflow: auto;
|
|
padding: clamp(22px, 5vw, 34px);
|
|
border: 1px solid var(--edge);
|
|
border-radius: 17px;
|
|
background: var(--panel-solid);
|
|
box-shadow: var(--shadow);
|
|
}
|
|
.pause-menu h2 { margin: 0; font-family: Georgia, serif; font-size: clamp(1.7rem, 5vw, 2.3rem); font-weight: 400; }
|
|
.pause-menu > p:not(.eyebrow) { color: var(--muted); line-height: 1.5; }
|
|
.pause-menu__actions { display: grid; gap: 8px; margin: 21px 0; }
|
|
.button { min-height: 42px; padding: 0 16px; border: 1px solid var(--edge); border-radius: 9px; background: rgba(170, 194, 141, 0.07); color: var(--ink); cursor: pointer; }
|
|
.button:hover { background: rgba(170, 194, 141, 0.16); }
|
|
.button--primary { border-color: rgba(200, 222, 151, 0.32); background: #587348; color: #fbfee9; }
|
|
.button--primary:hover { background: #688558; }
|
|
.controls-list { margin: 0; color: var(--muted); font-size: 0.72rem; }
|
|
.controls-list div { display: flex; justify-content: space-between; gap: 20px; padding: 7px 0; border-top: 1px solid rgba(188, 207, 160, 0.09); }
|
|
.controls-list dt { color: var(--ink); }
|
|
.controls-list dd { margin: 0; text-align: right; }
|
|
|
|
.scene-error { position: relative; height: 100%; }
|
|
.scene-error p:not(.eyebrow) { max-width: 550px; color: var(--muted); }
|
|
.scene-error .button { margin-top: 10px; }
|
|
|
|
@media (max-width: 960px), (max-height: 620px) {
|
|
.objective-chip { top: 12px; left: 12px; padding: 10px 13px; }
|
|
.status-strip { top: 12px; right: 12px; }
|
|
.control-hint { bottom: 12px; }
|
|
.asset-notice { right: 12px; bottom: 50px; }
|
|
.map-panel { right: 12px; max-height: calc(100vh - 24px); }
|
|
}
|
|
|
|
@media (max-width: 620px) {
|
|
.objective-chip { width: calc(100vw - 116px); }
|
|
.objective-chip .eyebrow, .objective-chip > p:last-child { display: none; }
|
|
.objective-chip h1 { overflow: hidden; font-size: 0.92rem; text-overflow: ellipsis; white-space: nowrap; }
|
|
.status-strip { min-height: 38px; }
|
|
.status-strip > span:not(.compass), .status-strip button:first-of-type kbd, .status-strip button:last-of-type kbd { display: none; }
|
|
.status-strip button { width: 34px; overflow: hidden; padding: 0; font-size: 0; }
|
|
.status-strip button::first-letter { font-size: 0.7rem; }
|
|
.compass { width: 25px; height: 25px; }
|
|
.control-hint { max-width: calc(100vw - 24px); overflow: hidden; font-size: 0.64rem; text-overflow: ellipsis; }
|
|
.map-panel { right: 10px; width: calc(100vw - 20px); padding: 14px; }
|
|
.map-panel__readout { grid-template-columns: 1fr; }
|
|
.map-panel__readout div:last-child { display: none; }
|
|
}
|
|
|
|
@media (max-height: 540px) {
|
|
.objective-chip > p:last-child { display: none; }
|
|
.map-panel { width: min(420px, calc(100vw - 24px)); padding: 12px; }
|
|
.map-panel header .eyebrow, .map-panel__note { display: none; }
|
|
.map-panel h2 { font-size: 1.1rem; }
|
|
.map-panel__canvas { margin: 8px 0; max-height: 280px; }
|
|
.map-panel svg { max-height: 280px; }
|
|
.pause-menu { padding: 20px; }
|
|
.pause-menu > p:not(.eyebrow) { margin: 7px 0; }
|
|
.pause-menu__actions { margin: 12px 0; grid-template-columns: 1fr 1fr; }
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
|
|
}
|
|
|
|
/* Playable MMO HUD and game panels */
|
|
.player-frame {
|
|
position: absolute;
|
|
top: max(12px, env(safe-area-inset-top));
|
|
left: max(12px, env(safe-area-inset-left));
|
|
display: grid;
|
|
width: 262px;
|
|
grid-template-columns: 58px 1fr;
|
|
gap: 9px;
|
|
padding: 9px;
|
|
border: 1px solid rgba(190, 214, 157, .24);
|
|
border-radius: 14px 5px 14px 5px;
|
|
background: linear-gradient(125deg, rgba(5, 15, 11, .96), rgba(14, 31, 22, .87));
|
|
box-shadow: 0 12px 34px rgba(0, 0, 0, .42), inset 0 0 22px rgba(116, 156, 93, .05);
|
|
backdrop-filter: blur(8px);
|
|
}
|
|
.player-frame__portrait {
|
|
position: relative;
|
|
display: grid;
|
|
height: 58px;
|
|
place-items: center;
|
|
border: 2px solid var(--moss);
|
|
border-radius: 50% 43% 48% 43%;
|
|
background: radial-gradient(circle, rgba(118, 155, 93, .26), rgba(4, 12, 9, .92));
|
|
color: var(--moss-bright);
|
|
font: 700 17px Georgia, serif;
|
|
}
|
|
.player-frame__portrait b {
|
|
position: absolute;
|
|
right: -4px;
|
|
bottom: -4px;
|
|
display: grid;
|
|
width: 22px;
|
|
height: 22px;
|
|
place-items: center;
|
|
border: 1px solid rgba(230, 205, 129, .5);
|
|
border-radius: 50%;
|
|
background: #172219;
|
|
color: #f1d88a;
|
|
font: 700 10px "Segoe UI", sans-serif;
|
|
}
|
|
.player-frame__body { min-width: 0; }
|
|
.player-frame__body header { display: flex; align-items: baseline; justify-content: space-between; gap: 7px; margin-bottom: 5px; }
|
|
.player-frame__body header strong { overflow: hidden; font: 600 15px Georgia, serif; text-overflow: ellipsis; white-space: nowrap; }
|
|
.player-frame__body header span { color: var(--muted); font-size: 8px; text-transform: uppercase; }
|
|
.player-frame__meter { margin-top: 3px; }
|
|
.player-frame__meter-label { display: flex; justify-content: space-between; color: #dce6d1; font-size: 8px; }
|
|
.player-frame__meter-label span { text-transform: uppercase; letter-spacing: .08em; }
|
|
.player-frame__meter-track { height: 7px; margin-top: 2px; overflow: hidden; border: 1px solid rgba(255,255,255,.09); border-radius: 2px; background: rgba(0,0,0,.52); }
|
|
.player-frame__meter-track span { display: block; height: 100%; background: linear-gradient(90deg, #417b43, #84c665); box-shadow: 0 0 8px rgba(113, 196, 97, .25); transition: width 180ms ease; }
|
|
.player-frame__meter--mana .player-frame__meter-track span { background: linear-gradient(90deg, #315f9b, #599fd4); }
|
|
.player-frame__meter--rage .player-frame__meter-track span { background: linear-gradient(90deg, #87342c, #c95947); }
|
|
.player-frame__meter--energy .player-frame__meter-track span { background: linear-gradient(90deg, #958321, #e0cb43); }
|
|
.player-frame__meter--runic-power .player-frame__meter-track span { background: linear-gradient(90deg, #327784, #62c5ce); }
|
|
.player-frame__meter--nature-power .player-frame__meter-track span { background: linear-gradient(90deg, #497d32, #8fc45a); }
|
|
.player-frame__meter--psi .player-frame__meter-track span { background: linear-gradient(90deg, #704292, #bd7bdd); }
|
|
.player-frame__meter--focus .player-frame__meter-track span { background: linear-gradient(90deg, #4b7d6b, #71c8a7); }
|
|
.player-frame__shield, .player-frame__dead-label { position: absolute; right: 9px; bottom: -15px; color: #8bcce9; font-size: 8px; }
|
|
.player-frame__dead-label { color: #e17b6d; }
|
|
.player-frame--dead { filter: saturate(.25); }
|
|
|
|
.party-frames {
|
|
position: absolute;
|
|
top: max(101px, calc(env(safe-area-inset-top) + 89px));
|
|
left: max(12px, env(safe-area-inset-left));
|
|
display: grid;
|
|
width: 224px;
|
|
gap: 3px;
|
|
pointer-events: auto;
|
|
scale: var(--game-ui-scale, 1);
|
|
transform-origin: top left;
|
|
}
|
|
.party-frames > header { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 2px; color: #aebca3; font-size: 7px; letter-spacing: .1em; text-transform: uppercase; text-shadow: 0 1px 2px #000; }
|
|
.party-frames > header b { color: #dfce8a; }
|
|
.party-frames > header b.is-warning { color: #e9a36f; }
|
|
.party-frame {
|
|
display: grid;
|
|
width: 100%;
|
|
min-height: 39px;
|
|
grid-template-columns: 30px minmax(0, 1fr);
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 4px 6px;
|
|
border: 1px solid rgba(190, 214, 157, .16);
|
|
border-radius: 5px 2px 6px 2px;
|
|
background: linear-gradient(100deg, rgba(5, 15, 11, .93), rgba(12, 27, 19, .77));
|
|
color: #e4ebdc;
|
|
box-shadow: 0 5px 16px rgba(0,0,0,.26);
|
|
cursor: pointer;
|
|
text-align: left;
|
|
}
|
|
.party-frame:hover, .party-frame:focus-visible { border-color: rgba(213, 229, 176, .42); outline: none; }
|
|
.party-frame.is-selected { border-color: rgba(229, 207, 110, .75); background: linear-gradient(100deg, rgba(39, 43, 20, .96), rgba(18, 38, 24, .88)); box-shadow: 0 0 0 1px rgba(229,207,110,.14), 0 6px 18px rgba(0,0,0,.32); }
|
|
.party-frame.is-down { filter: grayscale(.75); opacity: .58; }
|
|
.party-frame--player { opacity: .9; }
|
|
.party-frame--player.is-selected { opacity: 1; }
|
|
.party-frame__sigil { display: grid; width: 27px; height: 27px; place-items: center; border: 1px solid color-mix(in srgb, var(--party-class-color, #789b68), white 18%); border-radius: 50%; background: color-mix(in srgb, var(--party-class-color, #789b68) 22%, #06100c); color: #eef4e7; font-size: 7px; font-weight: 800; }
|
|
.party-frame__body { display: grid; min-width: 0; gap: 3px; }
|
|
.party-frame__identity { display: flex; min-width: 0; align-items: baseline; justify-content: space-between; gap: 5px; }
|
|
.party-frame__identity strong { overflow: hidden; font: 600 10px Georgia, serif; text-overflow: ellipsis; white-space: nowrap; }
|
|
.party-frame__identity small { overflow: hidden; color: #a9b69e; font-size: 6px; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
|
|
.party-frame__health { position: relative; display: block; height: 8px; overflow: hidden; border: 1px solid rgba(255,255,255,.09); border-radius: 2px; background: rgba(0,0,0,.62); }
|
|
.party-frame__health i { display: block; height: 100%; background: linear-gradient(90deg, #3e793e, #79b958); transition: width 150ms ease; }
|
|
.party-frame__health b { position: absolute; inset: -1px 2px 0; color: rgba(246,252,240,.9); font-size: 6px; line-height: 8px; text-align: right; text-shadow: 0 1px 2px #000; }
|
|
.timed-effect-strip {
|
|
display: flex;
|
|
max-width: 100%;
|
|
min-width: 0;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
gap: 3px;
|
|
}
|
|
.timed-effect {
|
|
position: relative;
|
|
display: inline-grid;
|
|
width: 20px;
|
|
height: 20px;
|
|
flex: 0 0 auto;
|
|
overflow: hidden;
|
|
place-items: center;
|
|
border: 1px solid rgba(222, 151, 112, .92);
|
|
border-radius: 3px;
|
|
background: #170a08;
|
|
box-shadow: 0 2px 6px rgba(0,0,0,.62), inset 0 0 0 1px rgba(255,255,255,.08);
|
|
}
|
|
.timed-effect--hot { border-color: rgba(107, 221, 137, .94); background: #07170d; }
|
|
.timed-effect img { width: 100%; height: 100%; object-fit: cover; }
|
|
.timed-effect__fallback { color: #f1ba92; font-size: 12px; font-weight: 900; }
|
|
.timed-effect--hot .timed-effect__fallback { color: #9ae7ac; }
|
|
.timed-effect__timer {
|
|
position: absolute;
|
|
right: 1px;
|
|
bottom: 0;
|
|
left: 1px;
|
|
color: #fff;
|
|
font: 800 7px/8px "Segoe UI", sans-serif;
|
|
letter-spacing: -.03em;
|
|
text-align: right;
|
|
text-shadow: 0 1px 2px #000, 0 0 3px #000;
|
|
}
|
|
.timed-effect-strip--party { min-height: 16px; margin-top: 1px; }
|
|
.timed-effect-strip--party .timed-effect { width: 16px; height: 16px; }
|
|
.timed-effect-strip--party .timed-effect__timer { font-size: 6px; line-height: 7px; }
|
|
.timed-effect-strip--target { justify-content: center; margin-top: 4px; }
|
|
.timed-effect-strip--target + small { display: block; margin-top: 1px; }
|
|
.timed-effect-strip--world { width: 144px; justify-content: center; filter: drop-shadow(0 2px 2px rgba(0,0,0,.85)); }
|
|
.timed-effect-strip--world .timed-effect { width: 22px; height: 22px; border-width: 2px; }
|
|
.timed-effect-strip--world .timed-effect__timer { font-size: 8px; line-height: 9px; }
|
|
|
|
.aura-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; }
|
|
.aura { position: relative; display: inline-grid; width: 22px; height: 22px; place-items: center; overflow: hidden; border: 1px solid rgba(255,255,255,.35); border-radius: 3px; color: #fff; background: linear-gradient(145deg, #42669a, #18273e); box-shadow: 0 1px 3px rgba(0,0,0,.7); }
|
|
.aura--debuff { border-color: rgba(243,118,105,.75); background: linear-gradient(145deg, #8c3d45, #35191f); }
|
|
.aura__icon { width: 100%; height: 100%; object-fit: cover; }
|
|
.aura__initial { font: 700 11px/1 var(--font-ui); text-shadow: 0 1px 2px #000; }
|
|
.aura__timer { position: absolute; right: 1px; bottom: 0; font: 700 7px/8px var(--font-ui); text-shadow: 0 1px 2px #000; }
|
|
.aura__stacks { position: absolute; right: 1px; top: 0; font: 700 8px/8px var(--font-ui); color: #fff4b8; text-shadow: 0 1px 2px #000; }
|
|
.aura-strip--target { justify-content: center; margin-top: 3px; }
|
|
.aura-strip--party { min-height: 16px; margin-top: 1px; }
|
|
.aura-strip--party .aura { width: 16px; height: 16px; }
|
|
.aura-strip--party .aura__initial { font-size: 8px; }
|
|
.aura-strip--party .aura__timer, .aura-strip--party .aura__stacks { font-size: 6px; line-height: 6px; }
|
|
.aura-strip--world { width: 144px; justify-content: center; margin-top: 2px; filter: drop-shadow(0 2px 2px rgba(0,0,0,.85)); }
|
|
.aura-strip--world .aura { width: 20px; height: 20px; }
|
|
.party-command-bar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; }
|
|
.party-command-bar button { display: flex; min-width: 0; min-height: 28px; align-items: center; justify-content: space-between; gap: 4px; padding: 3px 5px; border: 1px solid rgba(190,214,157,.18); border-radius: 4px; background: linear-gradient(110deg, rgba(5,15,11,.94), rgba(13,28,20,.86)); color: #c4d0ba; cursor: pointer; }
|
|
.party-command-bar button:hover, .party-command-bar button:focus-visible { border-color: rgba(213,229,176,.44); color: #f0f5e7; }
|
|
.party-command-bar button.is-active { border-color: rgba(224,197,101,.68); background: linear-gradient(110deg, rgba(77,70,29,.88), rgba(25,45,27,.94)); color: #fff0b0; box-shadow: inset 0 0 12px rgba(217,190,91,.1), 0 3px 12px rgba(0,0,0,.24); }
|
|
.party-command-bar strong { min-width: 0; overflow: hidden; font-size: 7px; letter-spacing: .03em; text-overflow: ellipsis; text-transform: uppercase; }
|
|
.party-command-bar kbd { flex: 0 0 auto; padding: 1px 3px; border: 1px solid rgba(230,213,147,.2); border-radius: 3px; background: rgba(0,0,0,.35); color: #dfcf91; font-size: 6px; }
|
|
|
|
.hud-minimap {
|
|
position: absolute;
|
|
top: max(10px, env(safe-area-inset-top));
|
|
right: max(12px, env(safe-area-inset-right));
|
|
width: 154px;
|
|
text-align: center;
|
|
pointer-events: auto;
|
|
}
|
|
.hud-minimap__map {
|
|
position: relative;
|
|
width: 132px;
|
|
height: 132px;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
border: 3px solid #8d7541;
|
|
border-radius: 50%;
|
|
background: #07140f;
|
|
color: var(--ink);
|
|
box-shadow: 0 10px 32px rgba(0,0,0,.48), 0 0 0 2px rgba(10,25,17,.88), inset 0 0 18px #000;
|
|
cursor: pointer;
|
|
}
|
|
.hud-minimap__viewport { position: absolute; inset: -9px; display: block; opacity: .88; transform: rotate(var(--minimap-turn, 0rad)); transition: transform 140ms linear; }
|
|
.hud-minimap__viewport svg { width: 100%; height: 100%; }
|
|
.hud-minimap__north { position: absolute; top: 2px; left: 50%; z-index: 2; transform: translateX(-50%); color: #f4d886; font: 700 10px Georgia, serif; text-shadow: 0 1px 3px #000; }
|
|
.hud-minimap__heading { position: absolute; right: 15px; bottom: 10px; z-index: 2; padding: 2px 4px; border-radius: 4px; background: rgba(0,0,0,.65); color: #dce7cc; font-size: 7px; }
|
|
.hud-minimap__caption { margin-top: -4px; padding: 6px 7px 5px; border: 1px solid rgba(193,210,158,.2); border-radius: 5px 5px 10px 10px; background: rgba(5,15,11,.9); box-shadow: 0 7px 20px rgba(0,0,0,.3); }
|
|
.hud-minimap__caption strong, .hud-minimap__caption span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.hud-minimap__caption strong { font: 600 11px Georgia, serif; }
|
|
.hud-minimap__caption span { margin-top: 2px; color: var(--muted); font-size: 7px; }
|
|
|
|
.hud-bottom-stack {
|
|
position: absolute;
|
|
bottom: max(22px, calc(env(safe-area-inset-bottom) + 16px));
|
|
left: 50%;
|
|
display: flex;
|
|
width: 100%;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
transform: translateX(-50%);
|
|
transform-origin: bottom center;
|
|
pointer-events: none;
|
|
scale: var(--game-ui-scale, 1);
|
|
}
|
|
.hud-bottom-stack > .action-bar {
|
|
position: relative;
|
|
bottom: auto;
|
|
left: auto;
|
|
width: min(420px, calc(100vw - 24px));
|
|
margin-top: 20px;
|
|
transform: none;
|
|
scale: none;
|
|
}
|
|
.hud-bottom-stack > .cast-bar,
|
|
.hud-bottom-stack > .control-hint {
|
|
position: relative;
|
|
right: auto;
|
|
bottom: auto;
|
|
left: auto;
|
|
max-width: min(560px, calc(100vw - 24px));
|
|
transform: none;
|
|
scale: none;
|
|
}
|
|
|
|
.action-bar {
|
|
--action-slot-size: 42px;
|
|
position: absolute;
|
|
bottom: max(22px, calc(env(safe-area-inset-bottom) + 16px));
|
|
left: 50%;
|
|
width: min(420px, calc(100vw - 24px));
|
|
transform: translateX(-50%);
|
|
pointer-events: auto;
|
|
}
|
|
.action-bar__layer-status { display: flex; width: max-content; align-items: center; gap: 2px; margin: 0 auto 3px; padding: 2px; border: 1px solid rgba(202,219,166,.18); border-radius: 999px; background: rgba(4,12,8,.88); box-shadow: 0 7px 18px rgba(0,0,0,.34); }
|
|
.action-bar__layer-status span { min-width: 42px; padding: 2px 7px; border-radius: 999px; color: #8f9d88; font-size: 7px; font-weight: 800; letter-spacing: .08em; text-align: center; text-transform: uppercase; }
|
|
.action-bar__layer-status span.is-active { background: linear-gradient(180deg, rgba(182,205,123,.3), rgba(88,120,70,.24)); color: #eff7cf; box-shadow: inset 0 0 0 1px rgba(223,236,177,.24); }
|
|
.action-bar__controller { display: grid; min-height: 130px; grid-template-columns: 104px 118px 130px; grid-template-rows: 1fr; align-items: end; justify-content: center; gap: 7px; padding: 5px 8px; border: 1px solid rgba(202,219,166,.2); border-radius: 34px 34px 17px 17px; background: linear-gradient(180deg, rgba(9,21,15,.74), rgba(4,12,8,.92)); box-shadow: 0 12px 30px rgba(0,0,0,.45); backdrop-filter: blur(8px); }
|
|
.action-cluster { position: relative; display: grid; align-items: center; justify-content: center; }
|
|
.action-cluster--dpad { grid-column: 1; grid-row: 1; grid-template-columns: var(--action-slot-size) 18px var(--action-slot-size); align-self: end; padding-bottom: 24px; }
|
|
.action-cluster__dpad-center { display: grid; width: 18px; height: 22px; place-items: center; color: rgba(211,224,190,.38); font: 700 15px Georgia, serif; }
|
|
.action-cluster--shoulders { grid-column: 2; grid-row: 1; grid-template-columns: repeat(2, 56px); align-self: start; gap: 4px; padding-top: 4px; }
|
|
.action-cluster--shoulders::after { grid-column: 1 / 3; height: 43px; margin: 3px 14px 0; border: 1px solid rgba(204,220,177,.08); border-radius: 50%; content: ""; opacity: .75; }
|
|
.action-cluster--face { width: 130px; height: 130px; grid-column: 3; grid-row: 1; grid-template: repeat(3, var(--action-slot-size)) / repeat(3, var(--action-slot-size)); gap: 2px; }
|
|
.action-cluster--face .action-slot--face-top { grid-area: 1 / 2; }
|
|
.action-cluster--face .action-slot--face-right { grid-area: 2 / 3; }
|
|
.action-cluster--face .action-slot--face-bottom { grid-area: 3 / 2; }
|
|
.action-cluster--face .action-slot--face-left { grid-area: 2 / 1; }
|
|
.action-slot {
|
|
--ability-color: #789b68;
|
|
position: relative;
|
|
display: grid;
|
|
width: var(--action-slot-size);
|
|
min-width: var(--action-slot-size);
|
|
height: var(--action-slot-size);
|
|
place-items: center;
|
|
padding: 3px;
|
|
overflow: hidden;
|
|
border: 1px solid color-mix(in srgb, var(--ability-color) 54%, #c9d7aa 12%);
|
|
border-radius: 50%;
|
|
background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--ability-color) 35%, transparent), rgba(6,15,10,.96) 70%);
|
|
color: var(--ink);
|
|
cursor: pointer;
|
|
}
|
|
.action-cluster--shoulders .action-slot { width: 56px; min-width: 56px; border-radius: 10px 10px 7px 7px; }
|
|
.action-cluster--dpad .action-slot { border-radius: 7px; }
|
|
.action-slot:not(.action-slot--disabled):hover { border-color: var(--moss-bright); transform: translateY(-1px); }
|
|
.action-slot--disabled { cursor: default; filter: saturate(.4); opacity: .7; }
|
|
.action-slot:focus-visible { outline: 2px solid #f0dc8d; outline-offset: 2px; }
|
|
.action-slot__binding { position: absolute; top: 2px; left: 2px; z-index: 5; display: grid; min-width: 15px; height: 15px; place-items: center; border: 1px solid rgba(239,221,158,.3); border-radius: 50%; background: rgba(0,0,0,.76); color: #f2dc93; font-size: 8px; line-height: 1; }
|
|
.action-slot--face-top .action-slot__binding { color: #77d982; }
|
|
.action-slot--face-right .action-slot__binding { color: #ef7373; }
|
|
.action-slot--face-bottom .action-slot__binding { color: #75bcea; }
|
|
.action-slot--face-left .action-slot__binding { color: #e89bc9; }
|
|
.action-slot__icon { position: relative; z-index: 2; display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid rgba(255,255,255,.18); border-radius: 50% 40% 48% 42%; color: #f3f1d7; font: 700 9px Georgia, serif; text-shadow: 0 1px 3px #000; }
|
|
.action-slot > strong, .action-slot > small { display: none; }
|
|
.action-slot__unlock { position: absolute; right: 2px; bottom: 2px; z-index: 5; padding: 1px 3px; border: 1px solid rgba(221,201,139,.24); border-radius: 4px; background: rgba(7,8,7,.88); color: #d7c483; font-size: 5px; font-weight: 900; letter-spacing: .03em; }
|
|
.action-slot--friendly { border-color: rgba(105, 210, 137, .72); }
|
|
.action-slot__target { position: absolute; top: 3px; right: 3px; z-index: 3; padding: 1px 2px; border-radius: 3px; background: rgba(22, 91, 46, .9); color: #c9f6d5; font-size: 4px; font-weight: 800; letter-spacing: .04em; }
|
|
.action-slot__cooldown { position: absolute; right: 0; bottom: 0; left: 0; z-index: 1; height: var(--cooldown-fill); background: rgba(0,0,0,.68); pointer-events: none; }
|
|
.action-slot > em { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; color: #fff1b6; font: 700 14px Georgia, serif; font-style: normal; text-shadow: 0 2px 4px #000; }
|
|
.action-slot--empty { opacity: .35; }
|
|
.action-bar__detail { grid-column: 2; grid-row: 1; z-index: 3; display: flex; width: 108px; min-width: 0; align-self: end; justify-self: center; flex-direction: column; margin-bottom: 21px; padding: 3px 5px; overflow: hidden; border: 1px solid rgba(201,218,172,.12); border-radius: 5px; background: rgba(2,8,5,.76); text-align: center; pointer-events: none; }
|
|
.action-bar__detail strong, .action-bar__detail span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.action-bar__detail strong { color: #eef4d9; font-size: 8px; }
|
|
.action-bar__detail span { margin-top: 1px; color: #aebba4; font-size: 6px; }
|
|
.action-bar__feedback { position: absolute; right: 0; bottom: 100%; left: 0; min-height: 18px; padding-bottom: 4px; color: #f1d68d; font-size: 10px; font-weight: 700; text-align: center; text-shadow: 0 1px 4px #000; }
|
|
.cast-bar { position: absolute; bottom: 198px; left: 50%; width: min(330px, calc(100vw - 42px)); padding: 7px 9px 6px; transform: translateX(-50%); border: 1px solid rgba(231,207,126,.42); border-radius: 6px 6px 11px 11px; background: rgba(5,13,9,.92); box-shadow: 0 8px 24px rgba(0,0,0,.45); color: #f2e8be; text-align: center; }
|
|
.cast-bar header { display: flex; align-items: center; justify-content: space-between; gap: 12px; font: 600 11px Georgia, serif; }
|
|
.cast-bar header span, .cast-bar small { color: #c8d6b9; font: 700 8px "Segoe UI", sans-serif; }
|
|
.cast-bar__track { height: 9px; margin-top: 5px; overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: 5px; background: rgba(0,0,0,.7); }
|
|
.cast-bar__track span { display: block; height: 100%; background: linear-gradient(90deg, #c39a47, #f2dc80); box-shadow: 0 0 9px rgba(240,210,111,.42); transition: width 80ms linear; }
|
|
.cast-bar--channel .cast-bar__track span { background: linear-gradient(90deg, #7551a9, #bc8be2); }
|
|
.player-frame, .hud-minimap, .target-frame { scale: var(--game-ui-scale, 1); }
|
|
.player-frame { transform-origin: top left; }
|
|
.hud-minimap { transform-origin: top right; }
|
|
.target-frame { transform-origin: top center; }
|
|
.action-slot__icon img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
|
|
|
|
.experience-bar { position: absolute; right: 0; bottom: 0; left: 0; height: 17px; border-top: 1px solid rgba(205,181,108,.32); background: rgba(4,10,7,.92); }
|
|
.experience-bar__track { position: absolute; inset: 0; overflow: hidden; }
|
|
.experience-bar__track span { display: block; height: 100%; background: linear-gradient(90deg, rgba(97,59,151,.85), rgba(148,91,209,.9)); box-shadow: 0 0 10px rgba(151,97,218,.35); transition: width 250ms ease; }
|
|
.experience-bar__label { position: relative; z-index: 1; display: flex; height: 100%; align-items: center; justify-content: center; gap: 10px; color: #f0e5ff; font-size: 8px; text-shadow: 0 1px 3px #000; }
|
|
.experience-bar__label strong { color: #fff3b7; }
|
|
|
|
.target-frame {
|
|
position: absolute;
|
|
top: max(12px, env(safe-area-inset-top));
|
|
left: 50%;
|
|
width: 225px;
|
|
padding: 7px 10px;
|
|
transform: translateX(-50%);
|
|
border: 1px solid rgba(209,117,89,.35);
|
|
border-radius: 4px 4px 12px 12px;
|
|
background: rgba(18,11,9,.88);
|
|
box-shadow: 0 9px 26px rgba(0,0,0,.4);
|
|
text-align: center;
|
|
}
|
|
.target-frame header { display: flex; justify-content: center; gap: 7px; font: 600 12px Georgia, serif; }
|
|
.target-frame header span { color: #d5b56d; font: 700 8px "Segoe UI", sans-serif; text-transform: uppercase; }
|
|
.target-frame__track { height: 6px; margin-top: 5px; overflow: hidden; border-radius: 3px; background: rgba(0,0,0,.65); }
|
|
.target-frame__track span { display: block; height: 100%; background: linear-gradient(90deg, #7f302e, #c85d45); transition: width 160ms ease; }
|
|
.target-frame__cast { margin-top: 5px; }
|
|
.target-frame__cast header { justify-content: space-between; color: #f3dda0; font-size: 9px; }
|
|
.target-frame__cast header span { color: #f0c65f; }
|
|
.target-frame__cast-track { height: 5px; margin-top: 2px; overflow: hidden; border: 1px solid rgba(245, 208, 105, .28); border-radius: 3px; background: rgba(0, 0, 0, .72); }
|
|
.target-frame__cast-track span { display: block; height: 100%; background: linear-gradient(90deg, #b77822, #f1d36e); transition: width 80ms linear; }
|
|
.target-frame__cast--locked header { color: #c5c8cc; }
|
|
.target-frame__cast--locked header span { color: #9da3aa; }
|
|
.target-frame__cast--locked .target-frame__cast-track span { background: linear-gradient(90deg, #666b72, #a8adb3); }
|
|
.target-frame small { color: #d6c4b7; font-size: 7px; }
|
|
.target-frame--friendly { border-color: rgba(93, 190, 119, .88); background: linear-gradient(180deg, rgba(14, 43, 29, .94), rgba(5, 18, 12, .92)); }
|
|
.target-frame--friendly header span { color: #8ed9a2; }
|
|
.target-frame--friendly .target-frame__track span { background: linear-gradient(90deg, #368b50, #78d493); }
|
|
|
|
.threat-widget {
|
|
position: absolute;
|
|
z-index: 8;
|
|
width: 156px;
|
|
overflow: hidden;
|
|
border: 1px solid rgba(209,117,89,.42);
|
|
border-radius: 5px 5px 9px 9px;
|
|
background: rgba(15,10,8,.9);
|
|
box-shadow: 0 6px 18px rgba(0,0,0,.38);
|
|
color: #e5d7c3;
|
|
pointer-events: auto;
|
|
scale: var(--game-ui-scale, 1);
|
|
transform: translate(-50%, -50%);
|
|
transform-origin: center;
|
|
user-select: none;
|
|
}
|
|
.threat-widget.is-dragging { border-color: rgba(236,198,99,.72); box-shadow: 0 8px 22px rgba(0,0,0,.48), 0 0 0 1px rgba(236,198,99,.14); }
|
|
.threat-widget__drag-handle {
|
|
display: grid;
|
|
width: 100%;
|
|
min-height: 17px;
|
|
grid-template-columns: auto minmax(0,1fr) auto;
|
|
align-items: center;
|
|
gap: 4px;
|
|
padding: 2px 5px;
|
|
border: 0;
|
|
border-bottom: 1px solid rgba(213,181,109,.16);
|
|
background: linear-gradient(90deg, rgba(74,35,27,.82), rgba(32,22,16,.82));
|
|
color: inherit;
|
|
cursor: grab;
|
|
touch-action: none;
|
|
}
|
|
.threat-widget.is-dragging .threat-widget__drag-handle { cursor: grabbing; }
|
|
.threat-widget__drag-handle:focus-visible { outline: 1px solid #e9c65e; outline-offset: -2px; }
|
|
.threat-widget__drag-handle strong { color: #e8d4a5; font: 700 7px Georgia, serif; text-transform: uppercase; }
|
|
.threat-widget__drag-handle span { overflow: hidden; color: #b8a995; font-size: 6px; text-overflow: ellipsis; white-space: nowrap; }
|
|
.threat-widget__drag-handle > i { color: #b6a782; font-size: 10px; font-style: normal; line-height: 1; }
|
|
.threat-widget__victim {
|
|
display: flex;
|
|
align-items: baseline;
|
|
justify-content: space-between;
|
|
gap: 4px;
|
|
padding: 2px 5px;
|
|
color: #9f907b;
|
|
font-size: 5px;
|
|
letter-spacing: .06em;
|
|
text-transform: uppercase;
|
|
}
|
|
.threat-widget__victim b { overflow: hidden; color: #e4c982; font-size: 6px; letter-spacing: 0; text-overflow: ellipsis; text-transform: none; white-space: nowrap; }
|
|
.threat-widget__rows { padding: 0 3px 3px; }
|
|
.threat-widget__row { margin-top: 1px; padding: 1px 2px; border: 1px solid transparent; border-radius: 2px; }
|
|
.threat-widget__row.is-target { border-color: rgba(221,91,68,.48); background: rgba(118,35,27,.18); }
|
|
.threat-widget__row.is-forced { border-color: rgba(233,189,78,.62); }
|
|
.threat-widget__row > span { display: flex; align-items: center; justify-content: space-between; gap: 4px; font-size: 5px; line-height: 6px; }
|
|
.threat-widget__row > span b { overflow: hidden; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
|
|
.threat-widget__row > span i { color: #a99a86; font-style: normal; font-weight: 800; }
|
|
.threat-widget__row.is-forced > span i { color: #f2cb63; }
|
|
.threat-widget__row > em { display: block; height: 2px; margin-top: 1px; overflow: hidden; border-radius: 2px; background: rgba(0,0,0,.64); }
|
|
.threat-widget__row > em > i { display: block; height: 100%; background: #a05b4b; }
|
|
.threat-widget__row--tank > em > i { background: #6188b4; }
|
|
.threat-widget__row--healer > em > i { background: #6cae72; }
|
|
.threat-widget__row--damage > em > i { background: #b66750; }
|
|
|
|
.game-panel-backdrop { padding: 14px; }
|
|
.game-panel {
|
|
width: min(780px, 100%);
|
|
max-height: min(610px, 100%);
|
|
overflow: auto;
|
|
padding: clamp(17px, 3vw, 25px);
|
|
border: 1px solid rgba(190, 211, 157, .25);
|
|
border-radius: 17px 6px 17px 6px;
|
|
background: linear-gradient(145deg, rgba(13,30,22,.99), rgba(5,14,10,.99));
|
|
box-shadow: 0 24px 70px rgba(0,0,0,.58), inset 0 0 46px rgba(93,128,74,.06);
|
|
}
|
|
.game-panel__header { display: flex; align-items: center; gap: 14px; padding-bottom: 11px; border-bottom: 1px solid rgba(193,211,160,.14); }
|
|
.game-panel__header > div:first-child { flex: 1; }
|
|
.game-panel__header .eyebrow { margin-bottom: 3px; }
|
|
.game-panel h2 { margin: 0; font: 400 clamp(22px, 4vw, 31px) Georgia, serif; }
|
|
.game-panel h3 { margin: 5px 0 9px; font: 500 21px Georgia, serif; }
|
|
.game-panel__footer { display: flex; justify-content: flex-end; gap: 18px; padding-top: 9px; color: var(--muted); font-size: 9px; }
|
|
.game-panel__empty { color: var(--muted); text-align: center; }
|
|
.spellbook-panel__progress { display: grid; grid-template-columns: auto auto 1px auto auto; align-items: baseline; gap: 4px; color: var(--muted); font-size: 7px; text-transform: uppercase; }
|
|
.spellbook-panel__progress strong { color: #e7d491; font: 700 14px Georgia, serif; }
|
|
.spellbook-panel__progress i { width: 1px; height: 19px; margin: 0 5px; background: rgba(216,226,194,.15); }
|
|
.spellbook-panel__toolbar { display: flex; justify-content: flex-end; margin-top: 10px; }
|
|
.spellbook-panel__filter { display: flex; min-height: 28px; align-items: center; gap: 6px; padding: 4px 8px; border: 1px solid rgba(190,210,157,.17); border-radius: 999px; background: rgba(152,181,122,.05); color: var(--muted); font-size: 7px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; }
|
|
.spellbook-panel__filter:hover { border-color: rgba(190,210,157,.32); background: rgba(152,181,122,.11); color: var(--ink); }
|
|
.spellbook-panel__filter > span { position: relative; width: 22px; height: 12px; border: 1px solid rgba(190,210,157,.26); border-radius: 999px; background: rgba(0,0,0,.26); }
|
|
.spellbook-panel__filter > span::after { position: absolute; top: 2px; left: 2px; width: 6px; height: 6px; border-radius: 50%; background: #899080; content: ""; transition: transform 120ms ease, background 120ms ease; }
|
|
.spellbook-panel__filter.is-active { border-color: rgba(137,190,102,.38); background: rgba(137,190,102,.1); color: #c8dfa9; }
|
|
.spellbook-panel__filter.is-active > span::after { background: #acd584; transform: translateX(10px); }
|
|
.spellbook-panel__layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(220px, .75fr); gap: 14px; margin-top: 8px; }
|
|
.spellbook-panel__list { display: grid; grid-template-columns: 1fr 1fr; align-content: start; gap: 7px; }
|
|
.spellbook-ability { display: grid; min-width: 0; grid-template-columns: 43px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 57px; padding: 7px; border: 1px solid rgba(190,210,157,.13); border-radius: 7px; background: rgba(152,181,122,.05); color: var(--ink); text-align: left; cursor: pointer; }
|
|
.spellbook-ability:hover:not(.spellbook-ability--locked) { background: rgba(152,181,122,.13); }
|
|
.spellbook-ability > span:nth-child(2) { min-width: 0; }
|
|
.spellbook-ability strong, .spellbook-ability small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.spellbook-ability strong { font-size: 11px; }
|
|
.spellbook-ability small { margin-top: 3px; color: var(--muted); font-size: 8px; }
|
|
.spellbook-ability > em { align-self: start; padding: 3px 5px; border: 1px solid rgba(175,183,172,.2); border-radius: 999px; background: rgba(0,0,0,.22); color: #aeb5ad; font-size: 6px; font-style: normal; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
|
|
.spellbook-ability > em.spellbook-ability__known { border-color: rgba(137,190,102,.2); color: #9cc882; }
|
|
.spellbook-ability--locked { border-color: rgba(171,178,174,.12); background: rgba(118,127,123,.045); color: #a9afaa; }
|
|
.spellbook-ability--locked:hover { border-color: rgba(211,195,142,.3); background: rgba(164,151,110,.08); }
|
|
.spellbook-ability--locked .spellbook-ability__icon { filter: grayscale(1) brightness(.58); }
|
|
.spellbook-ability--locked small { color: #c1ad75; }
|
|
.spellbook-ability__icon { --ability-color: #73965e; display: grid; width: 41px; height: 41px; place-items: center; overflow: hidden; border: 1px solid color-mix(in srgb, var(--ability-color) 70%, #ddd 15%); border-radius: 7px; background: radial-gradient(circle, color-mix(in srgb, var(--ability-color) 45%, #08120d), #08120d); color: #f1f0d8; }
|
|
.spellbook-ability__icon img { width: 100%; height: 100%; object-fit: cover; }
|
|
.spellbook-ability__icon b { font: 700 12px Georgia, serif; }
|
|
.spellbook-panel__details { min-width: 0; padding: 14px; border: 1px solid rgba(210,188,119,.18); border-radius: 10px; background: rgba(22,20,12,.4); }
|
|
.spellbook-panel__details > p:not(.eyebrow) { color: var(--muted); font-size: 11px; line-height: 1.45; }
|
|
.spellbook-panel__details dl { margin: 12px 0; }
|
|
.spellbook-panel__details dl div { display: flex; justify-content: space-between; padding: 5px 0; border-top: 1px solid rgba(255,255,255,.06); font-size: 9px; }
|
|
.spellbook-panel__details dd { margin: 0; color: #e6d293; }
|
|
.spellbook-panel__ranks { margin: 12px 0; }
|
|
.spellbook-panel__ranks h4 { margin: 0 0 7px; color: #d8c27d; font: 700 10px Georgia, serif; text-transform: uppercase; }
|
|
.spellbook-panel__ranks ol { display: grid; max-height: 190px; margin: 0; padding: 0; gap: 5px; overflow-y: auto; list-style: none; scrollbar-width: thin; }
|
|
.spellbook-panel__ranks li { display: grid; grid-template-columns: auto 1fr auto; gap: 6px; padding: 6px; border: 1px solid rgba(255,255,255,.07); border-radius: 5px; background: rgba(0,0,0,.16); font-size: 8px; }
|
|
.spellbook-panel__ranks li.is-current { border-color: rgba(137,190,102,.38); background: rgba(137,190,102,.08); }
|
|
.spellbook-panel__ranks li > span { color: #d5c891; }
|
|
.spellbook-panel__ranks li > small { color: var(--muted); }
|
|
.spellbook-panel__ranks li > p { grid-column: 1 / -1; margin: 2px 0 0; color: #b8c0b5; font-size: 8px; line-height: 1.35; }
|
|
|
|
.talents-panel { width: min(1180px, 100%); max-height: calc(100vh - 28px); }
|
|
.talents-panel__points { display: grid; grid-template-columns: auto auto; align-items: center; gap: 7px; }
|
|
.talents-panel__points strong { color: #f0d477; font: 700 27px Georgia, serif; }
|
|
.talents-panel__points span { max-width: 55px; color: var(--muted); font-size: 8px; line-height: 1.1; text-transform: uppercase; }
|
|
.talents-panel__intro { margin: 9px 0; color: var(--muted); font-size: 10px; }
|
|
.talents-panel__tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: 8px; }
|
|
.talent-tree-tab { --talent-color: #76965e; display: grid; min-width: 0; min-height: 36px; grid-template-columns: 29px minmax(0, 1fr); align-items: center; gap: 7px; padding: 4px 7px; border: 1px solid rgba(193,211,160,.12); border-radius: 7px; background: rgba(255,255,255,.025); color: var(--ink); cursor: pointer; text-align: left; }
|
|
.talent-tree-tab.is-active { border-color: color-mix(in srgb, var(--talent-color) 55%, #d7dcbd 18%); background: color-mix(in srgb, var(--talent-color) 22%, rgba(7,17,12,.9)); }
|
|
.talent-tree-tab__icon, .talent-tree-board__icon, .talent-details__icon { display: grid; place-items: center; overflow: hidden; border: 1px solid rgba(255,255,255,.18); background: rgba(0,0,0,.4); }
|
|
.talent-tree-tab__icon { width: 27px; height: 27px; border-radius: 50%; }
|
|
.talent-tree-tab__icon img, .talent-tree-board__icon img, .talent-details__icon img { width: 100%; height: 100%; object-fit: cover; }
|
|
.talent-tree-tab > span:last-child { min-width: 0; }
|
|
.talent-tree-tab strong, .talent-tree-tab small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.talent-tree-tab strong { font: 12px Georgia, serif; }
|
|
.talent-tree-tab small { margin-top: 1px; color: var(--muted); font-size: 7px; text-transform: uppercase; }
|
|
.talent-art-fallback { display: grid; width: 100%; height: 100%; place-items: center; color: #e9d89e; font: 700 8px Georgia, serif; text-shadow: 0 1px 3px #000; }
|
|
.talents-panel__workspace { display: grid; min-height: 0; grid-template-columns: minmax(0, 1fr) 245px; align-items: start; gap: 10px; }
|
|
.talents-panel__boards { display: grid; min-width: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 7px; }
|
|
.talent-tree-board { --talent-color: #76965e; min-width: 0; overflow: hidden; border: 1px solid rgba(188,205,161,.16); border-radius: 9px 4px 9px 4px; background: rgba(3,8,6,.88); box-shadow: 0 8px 18px rgba(0,0,0,.25); }
|
|
.talent-tree-board.is-active { border-color: color-mix(in srgb, var(--talent-color) 58%, #d8d9b0 15%); box-shadow: 0 0 0 1px color-mix(in srgb, var(--talent-color) 24%, transparent), 0 8px 18px rgba(0,0,0,.33); }
|
|
.talent-tree-board__header { display: grid; min-height: 42px; grid-template-columns: 31px minmax(0, 1fr) auto; align-items: center; gap: 6px; padding: 5px 7px; border-bottom: 1px solid rgba(255,255,255,.08); background: linear-gradient(90deg, color-mix(in srgb, var(--talent-color) 18%, rgba(5,13,9,.94)), rgba(3,8,6,.94)); }
|
|
.talent-tree-board__icon { width: 29px; height: 29px; border-radius: 50%; }
|
|
.talent-tree-board__header > span:nth-child(2) { min-width: 0; }
|
|
.talent-tree-board__header strong, .talent-tree-board__header small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.talent-tree-board__header strong { font: 13px Georgia, serif; }
|
|
.talent-tree-board__header small { margin-top: 2px; color: var(--muted); font-size: 6px; }
|
|
.talent-tree-board__header b { color: #f2d378; font: 700 18px Georgia, serif; }
|
|
.talent-tree-board__canvas { position: relative; display: grid; width: 100%; max-width: 218px; aspect-ratio: 1 / 2; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(11, minmax(0, 1fr)); align-items: center; justify-items: center; margin: 0 auto; overflow: hidden; isolation: isolate; background-image: linear-gradient(rgba(2,7,4,.24), rgba(2,7,4,.5)), var(--talent-background); background-position: center; background-repeat: no-repeat; background-size: cover; }
|
|
.talents-panel--coa .talents-panel__points { grid-template-columns: auto auto auto auto; }
|
|
.talents-panel--coa .talents-panel__points span { max-width: 72px; }
|
|
.talents-panel--coa .talents-panel__tabs { grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); }
|
|
.talents-panel--coa .talents-panel__boards { grid-template-columns: minmax(0, 1fr); }
|
|
.talents-panel--coa .talent-tree-board { display: none; }
|
|
.talents-panel--coa .talent-tree-board.is-active { display: block; }
|
|
.talents-panel--coa .talent-tree-board__canvas { max-width: 760px; aspect-ratio: 11 / 10; grid-template-columns: repeat(11, minmax(0, 1fr)); grid-template-rows: repeat(10, minmax(0, 1fr)); background-image: radial-gradient(circle at 50% 20%, color-mix(in srgb, var(--talent-color) 16%, transparent), transparent 58%), linear-gradient(rgba(2,7,4,.34), rgba(2,7,4,.72)); }
|
|
.talent-tree-board__canvas::after { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(0,0,0,.12), transparent 18%, transparent 82%, rgba(0,0,0,.14)); content: ""; pointer-events: none; }
|
|
.talent-tree-board__connectors { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
|
|
.talent-tree-board__connectors line { stroke: rgba(12,13,10,.93); stroke-linecap: round; stroke-width: 6px; vector-effect: non-scaling-stroke; }
|
|
.talent-tree-board__connectors line.is-earned { stroke: #d7a842; filter: drop-shadow(0 0 2px rgba(246,206,89,.65)); }
|
|
.talent-node { position: relative; z-index: 1; display: grid; width: clamp(34px, 3.25vw, 40px); height: clamp(34px, 3.25vw, 40px); place-items: center; align-self: center; justify-self: center; padding: 0; overflow: visible; border: 2px solid #565b50; border-radius: 7px 3px 7px 3px; background: #101511; color: var(--ink); cursor: pointer; box-shadow: 0 2px 5px rgba(0,0,0,.75), inset 0 0 0 1px rgba(255,255,255,.08); }
|
|
.talent-node > img { width: 100%; height: 100%; border-radius: 4px 1px 4px 1px; object-fit: cover; }
|
|
.talent-node:not(.is-learned).is-locked > img, .talent-node:not(.is-learned).is-locked > .talent-art-fallback { filter: grayscale(1) brightness(.34); }
|
|
.talent-node:not(.is-learned).is-unavailable > img, .talent-node:not(.is-learned).is-unavailable > .talent-art-fallback { filter: grayscale(.75) brightness(.58); }
|
|
.talent-node.is-learned { border-color: #78a956; box-shadow: 0 0 0 1px rgba(138,199,88,.28), 0 2px 6px #000; }
|
|
.talent-node.is-max { border-color: #e7bc4f; box-shadow: 0 0 0 1px rgba(255,220,100,.38), 0 0 8px rgba(218,168,50,.5), 0 2px 6px #000; }
|
|
.talent-node.is-inspected { transform: translateY(-1px); }
|
|
.talent-node.is-controller-selected, .talent-node:focus-visible { z-index: 3; }
|
|
.talent-node__rank { position: absolute; right: -5px; bottom: -5px; display: grid; min-width: 19px; height: 14px; place-items: center; padding: 0 3px; border: 1px solid rgba(210,217,192,.35); border-radius: 7px; background: rgba(2,5,3,.95); color: #d5d7ca; font-size: 7px; font-weight: 800; line-height: 1; box-shadow: 0 1px 3px #000; }
|
|
.talent-node.is-learned .talent-node__rank { color: #bce58f; }
|
|
.talent-node.is-max .talent-node__rank { border-color: #c99d3a; color: #ffe393; }
|
|
.talent-details { position: sticky; top: 0; min-height: 250px; padding: 12px; border: 1px solid rgba(191,211,158,.15); border-radius: 9px 4px 9px 4px; background: linear-gradient(145deg, rgba(18,34,25,.96), rgba(4,11,8,.96)); box-shadow: inset 0 0 24px rgba(107,147,78,.05); }
|
|
.talent-details__heading { display: grid; grid-template-columns: 46px minmax(0, 1fr); align-items: center; gap: 9px; padding-bottom: 9px; border-bottom: 1px solid rgba(255,255,255,.08); }
|
|
.talent-details__icon { width: 44px; height: 44px; border-color: rgba(227,194,102,.35); border-radius: 8px 3px 8px 3px; }
|
|
.talent-details__heading small { color: #c6aa62; font-size: 7px; text-transform: uppercase; }
|
|
.talent-details h3 { margin: 3px 0 0; font-size: 17px; line-height: 1.05; }
|
|
.talent-details > p { margin: 11px 0; color: #d2d7c9; font-size: 9px; line-height: 1.5; }
|
|
.talent-details__rank { display: flex; align-items: center; gap: 4px; margin-top: 10px; }
|
|
.talent-details__rank i { width: 12px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.1); }
|
|
.talent-details__rank i.is-filled { background: #d5ab4e; box-shadow: 0 0 3px rgba(226,184,75,.45); }
|
|
.talent-details__rank strong { margin-left: auto; color: #f2d273; font-size: 9px; }
|
|
.talent-details__requirements { display: grid; gap: 4px; margin: 10px 0; padding: 8px; border: 1px solid rgba(255,255,255,.07); border-radius: 6px; background: rgba(0,0,0,.2); }
|
|
.talent-details__requirements small { color: var(--muted); font-size: 6px; letter-spacing: .12em; text-transform: uppercase; }
|
|
.talent-details__requirements span { color: #d17d70; font-size: 8px; }
|
|
.talent-details__requirements span::before { margin-right: 4px; content: "○"; }
|
|
.talent-details__requirements span.is-met { color: #a9d47f; }
|
|
.talent-details__requirements span.is-met::before { content: "✓"; }
|
|
.talent-details__status { display: block; margin-top: 10px; color: #d9907d; font-size: 8px; line-height: 1.35; }
|
|
.talent-details__status.is-ready { color: #b7dc83; }
|
|
.talent-details__status.is-max { color: #f0cb66; }
|
|
.talents-panel__summary { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.07); color: var(--muted); font-size: 10px; }
|
|
.talents-panel__summary strong { color: var(--ink); }
|
|
.talents-panel__footer { padding-top: 6px; }
|
|
|
|
.options-panel { width: min(670px, 100%); }
|
|
.options-panel__list { margin-top: 10px; }
|
|
.option-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; min-height: 42px; padding: 6px 2px; border-bottom: 1px solid rgba(198,214,170,.09); }
|
|
.option-row > span strong, .option-row > span small { display: block; }
|
|
.option-row > span strong { font-size: 11px; }
|
|
.option-row > span small { margin-top: 2px; color: var(--muted); font-size: 8px; }
|
|
.option-row button { min-width: 68px; min-height: 29px; border: 1px solid rgba(191,209,159,.18); border-radius: 7px; background: rgba(255,255,255,.04); color: var(--ink); cursor: pointer; }
|
|
.option-row button.is-on { border-color: rgba(171,213,127,.35); background: rgba(109,155,79,.3); color: #effbdc; }
|
|
.option-stepper { display: grid; grid-template-columns: 30px 52px 30px; align-items: center; gap: 4px; }
|
|
.option-stepper button { min-width: 30px; }
|
|
.option-stepper output { font-size: 10px; text-align: center; }
|
|
.options-panel__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
|
|
|
|
.ability-bindings-panel { width: min(980px, 100%); max-height: calc(100vh - 28px); }
|
|
.ability-bindings__layers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 10px 0; }
|
|
.ability-bindings__layers button { display: grid; min-width: 0; min-height: 42px; grid-template-columns: 31px minmax(0, 1fr); align-items: center; gap: 7px; padding: 5px 8px; border: 1px solid rgba(193,211,160,.13); border-radius: 8px; background: rgba(255,255,255,.025); color: var(--ink); cursor: pointer; text-align: left; }
|
|
.ability-bindings__layers button.is-active { border-color: rgba(196,221,144,.4); background: rgba(103,148,78,.25); }
|
|
.ability-bindings__layers kbd { display: grid; width: 29px; height: 27px; place-items: center; border: 1px solid rgba(229,210,138,.24); border-radius: 7px; background: rgba(0,0,0,.28); color: #ecd98c; }
|
|
.ability-bindings__layers strong, .ability-bindings__layers small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.ability-bindings__layers strong { font-size: 10px; }
|
|
.ability-bindings__layers small { margin-top: 1px; color: var(--muted); font-size: 7px; }
|
|
.ability-bindings__layout { display: grid; min-height: 350px; grid-template-columns: minmax(500px, 1fr) minmax(225px, 270px); gap: 12px; }
|
|
.ability-bindings__diagram { display: grid; min-width: 0; grid-template-columns: minmax(185px, .8fr) minmax(285px, 1.2fr); grid-template-rows: auto 1fr auto; align-items: center; gap: 5px 10px; padding: 11px; border: 1px solid rgba(190,210,157,.14); border-radius: 36px 36px 15px 15px; background: radial-gradient(circle at 66% 54%, rgba(103,141,79,.09), transparent 36%), rgba(4,12,8,.58); }
|
|
.ability-bindings__shoulders { grid-column: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 112px)); justify-content: center; gap: 7px; }
|
|
.ability-bindings__dpad { grid-column: 1; display: grid; grid-template-columns: minmax(0, 96px) 24px minmax(0, 96px); align-items: center; justify-content: center; }
|
|
.ability-bindings__dpad > span { color: rgba(219,230,200,.35); font: 700 21px Georgia, serif; text-align: center; }
|
|
.ability-bindings__face { grid-column: 2; display: grid; width: min(100%, 318px); min-height: 210px; grid-template: repeat(3, 66px) / repeat(3, minmax(88px, 102px)); justify-content: center; gap: 5px; margin: 0 auto; }
|
|
.ability-bindings__face .ability-binding-slot--face-top { grid-area: 1 / 2; }
|
|
.ability-bindings__face .ability-binding-slot--face-right { grid-area: 2 / 3; }
|
|
.ability-bindings__face .ability-binding-slot--face-bottom { grid-area: 3 / 2; }
|
|
.ability-bindings__face .ability-binding-slot--face-left { grid-area: 2 / 1; }
|
|
.ability-binding-slot { position: relative; display: grid; min-width: 0; min-height: 62px; grid-template-columns: 31px minmax(0, 1fr); align-items: center; gap: 5px; padding: 5px; border: 1px solid rgba(194,214,165,.16); border-radius: 9px; background: rgba(255,255,255,.035); color: var(--ink); cursor: pointer; text-align: left; }
|
|
.ability-binding-slot:hover, .ability-binding-slot.is-editing { border-color: rgba(210,226,174,.42); background: rgba(113,153,87,.16); }
|
|
.ability-binding-slot.is-locked { filter: grayscale(.9); opacity: .62; }
|
|
.ability-binding-slot > kbd { position: absolute; align-self: start; justify-self: start; z-index: 2; min-width: 15px; padding: 1px 3px; border-radius: 4px; background: rgba(0,0,0,.78); color: #f0d989; font-size: 7px; text-align: center; }
|
|
.ability-binding-slot > span:last-child { min-width: 0; }
|
|
.ability-binding-slot strong, .ability-binding-slot small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.ability-binding-slot strong { font-size: 8px; }
|
|
.ability-binding-slot small { margin-top: 2px; color: var(--muted); font-size: 6px; }
|
|
.ability-bindings__icon { --ability-color: #789b68; display: grid; width: 30px; height: 30px; place-items: center; overflow: hidden; border: 1px solid color-mix(in srgb, var(--ability-color) 65%, white 14%); border-radius: 7px; background: color-mix(in srgb, var(--ability-color) 20%, #08120d); font: 700 8px Georgia, serif; }
|
|
.ability-bindings__icon img { width: 100%; height: 100%; object-fit: cover; }
|
|
.ability-bindings__empty { display: grid; width: 30px; height: 30px; place-items: center; border: 1px dashed rgba(201,216,177,.2); border-radius: 7px; color: #86917f; font-size: 13px; }
|
|
.ability-bindings__restore { grid-column: 1 / 3; display: flex; justify-content: flex-end; gap: 6px; }
|
|
.ability-bindings__restore button { min-height: 28px; padding: 0 10px; border: 1px solid rgba(198,215,169,.15); border-radius: 6px; background: rgba(255,255,255,.035); color: var(--muted); cursor: pointer; font-size: 7px; }
|
|
.ability-bindings__picker { min-width: 0; padding: 13px; border: 1px solid rgba(210,188,119,.16); border-radius: 10px; background: rgba(22,20,12,.34); }
|
|
.ability-bindings__picker > p:not(.eyebrow) { color: var(--muted); font-size: 10px; line-height: 1.5; }
|
|
.ability-bindings__notice { padding: 8px; border-left: 2px solid rgba(196,220,139,.46); background: rgba(105,143,76,.08); color: #dce9c9 !important; }
|
|
.ability-bindings__choices { display: grid; gap: 6px; }
|
|
.ability-bindings__choices button { display: grid; width: 100%; min-height: 47px; grid-template-columns: 35px minmax(0, 1fr); align-items: center; gap: 7px; padding: 6px; border: 1px solid rgba(194,213,164,.13); border-radius: 7px; background: rgba(255,255,255,.025); color: var(--ink); cursor: pointer; text-align: left; }
|
|
.ability-bindings__choices button:hover { background: rgba(138,171,104,.1); }
|
|
.ability-bindings__choices button.is-current { border-color: rgba(151,199,108,.34); background: rgba(101,151,72,.12); }
|
|
.ability-bindings__choices button.is-locked { filter: grayscale(.85); opacity: .65; }
|
|
.ability-bindings__choices button.is-danger { border-color: rgba(202,111,87,.32); background: rgba(138,48,34,.14); }
|
|
.ability-bindings__choices button > span:last-child { min-width: 0; }
|
|
.ability-bindings__choices strong, .ability-bindings__choices small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.ability-bindings__choices strong { font-size: 9px; }
|
|
.ability-bindings__choices small { margin-top: 2px; color: var(--muted); font-size: 7px; text-transform: capitalize; }
|
|
.ability-bindings__confirm-warning { padding: 9px; border: 1px solid rgba(202,111,87,.18); border-radius: 7px; background: rgba(112,39,30,.1); color: #dbc6ba !important; }
|
|
.ability-bindings__choices--confirm { grid-template-columns: 1fr 1fr; }
|
|
|
|
.party-management-panel { display: flex; width: min(920px, 100%); max-height: min(650px, 100%); flex-direction: column; overflow: hidden; }
|
|
.party-management__layout { display: grid; min-height: 0; flex: 1; grid-template-columns: 205px minmax(0, 1fr); gap: 12px; margin-top: 12px; }
|
|
.party-management__roster { min-height: 0; padding-right: 3px; overflow: auto; }
|
|
.party-management__roster > header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; padding: 0 3px; color: var(--muted); font-size: 8px; letter-spacing: .08em; text-transform: uppercase; }
|
|
.party-management__roster > header strong { color: #dce7d1; }
|
|
.party-management__member { display: grid; width: 100%; min-height: 66px; grid-template-columns: 37px minmax(0, 1fr); align-items: center; gap: 8px; margin-bottom: 5px; padding: 7px; border: 1px solid rgba(190,214,157,.13); border-radius: 8px 3px 8px 3px; background: rgba(255,255,255,.025); color: var(--ink); cursor: pointer; text-align: left; }
|
|
.party-management__member:hover, .party-management__member:focus-visible { border-color: rgba(213,229,176,.38); }
|
|
.party-management__member.is-active { border-color: color-mix(in srgb, var(--party-class-color) 58%, #dfcc83); background: linear-gradient(110deg, color-mix(in srgb, var(--party-class-color) 17%, #0b1811), rgba(13,30,21,.82)); }
|
|
.party-management__member.is-down { filter: grayscale(.72); opacity: .62; }
|
|
.party-management__member-sigil { display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid color-mix(in srgb, var(--party-class-color) 72%, white 12%); border-radius: 50% 44% 50% 43%; background: color-mix(in srgb, var(--party-class-color) 20%, #07110d); color: #f2f6ec; font-size: 8px; font-weight: 800; }
|
|
.party-management__member > span:last-child { display: flex; min-width: 0; flex-direction: column; }
|
|
.party-management__member strong, .party-management__member small, .party-management__member em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.party-management__member strong { font: 600 12px Georgia, serif; }
|
|
.party-management__member small { margin-top: 2px; color: #b8c5ad; font-size: 7px; }
|
|
.party-management__member em { margin-top: 4px; color: color-mix(in srgb, var(--party-class-color) 62%, #d9e5cf); font-size: 7px; font-style: normal; letter-spacing: .06em; text-transform: uppercase; }
|
|
.party-management__details { min-height: 0; padding-right: 4px; overflow: auto; }
|
|
.party-management__profile { display: grid; grid-template-columns: 62px minmax(0, 1fr) minmax(145px, .7fr); align-items: center; gap: 11px; padding: 10px 12px; border: 1px solid rgba(190,214,157,.15); border-radius: 11px 4px 11px 4px; background: linear-gradient(115deg, color-mix(in srgb, var(--party-class-color) 10%, #0b1912), rgba(6,16,11,.88)); }
|
|
.party-management__portrait { display: grid; width: 58px; height: 58px; place-items: center; border: 2px solid color-mix(in srgb, var(--party-class-color) 74%, #dbd094); border-radius: 50% 43% 49% 42%; background: color-mix(in srgb, var(--party-class-color) 22%, #06100c); color: #f1f5e9; font: 700 15px Georgia, serif; }
|
|
.party-management__profile h3 { margin: 1px 0; font: 500 21px Georgia, serif; }
|
|
.party-management__profile p, .party-management__profile small { margin: 0; color: var(--muted); font-size: 8px; }
|
|
.party-management__health > span { display: flex; justify-content: space-between; gap: 8px; color: #dce8d3; font-size: 8px; }
|
|
.party-management__health > span small { color: #b8c8ad; }
|
|
.party-management__health > i { display: block; height: 8px; margin-top: 5px; overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: 4px; background: rgba(0,0,0,.62); }
|
|
.party-management__health > i > b { display: block; height: 100%; background: linear-gradient(90deg, #3e793e, #79b958); }
|
|
.party-management__orders { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .8fr); align-items: center; gap: 13px; margin: 9px 0; padding: 9px 11px; border: 1px solid rgba(220,190,91,.18); border-radius: 7px; background: rgba(75,60,22,.11); }
|
|
.party-management__orders > span { min-width: 0; }
|
|
.party-management__orders small, .party-management__orders strong { display: block; }
|
|
.party-management__orders small { color: #c9b66f; font-size: 7px; letter-spacing: .08em; text-transform: uppercase; }
|
|
.party-management__orders strong { margin-top: 1px; font: 500 15px Georgia, serif; }
|
|
.party-management__orders p { margin: 3px 0 0; color: var(--muted); font-size: 8px; line-height: 1.35; }
|
|
.party-command-bar--management button { min-height: 35px; padding: 5px 7px; }
|
|
.party-command-bar--management strong { font-size: 8px; }
|
|
.party-command-bar--management kbd { font-size: 7px; }
|
|
.party-management__talents { display: grid; min-height: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
|
|
.party-management__talent-column { min-width: 0; padding: 8px; border: 1px solid rgba(190,214,157,.12); border-radius: 8px; background: rgba(255,255,255,.018); }
|
|
.party-management__talent-column--next { border-color: rgba(220,190,91,.2); background: rgba(112,86,25,.055); }
|
|
.party-management__talent-column > header { display: flex; min-height: 34px; align-items: start; justify-content: space-between; gap: 9px; padding: 0 2px 7px; border-bottom: 1px solid rgba(193,211,160,.1); }
|
|
.party-management__talent-column > header span small, .party-management__talent-column > header span strong { display: block; }
|
|
.party-management__talent-column > header span small { color: var(--muted); font-size: 7px; letter-spacing: .06em; text-transform: uppercase; }
|
|
.party-management__talent-column > header span strong { margin-top: 2px; font: 500 13px Georgia, serif; }
|
|
.party-management__talent-column > header > b { color: #d7c17a; font-size: 7px; white-space: nowrap; }
|
|
.party-management__talent-list { display: grid; max-height: 230px; gap: 5px; margin-top: 7px; padding-right: 2px; overflow: auto; }
|
|
.party-talent-card { display: grid; min-width: 0; grid-template-columns: 37px minmax(0, 1fr); gap: 7px; padding: 6px; border: 1px solid rgba(192,211,162,.1); border-radius: 6px; background: rgba(3,10,7,.38); }
|
|
.party-talent-card--upcoming { border-color: rgba(220,190,91,.17); background: rgba(96,76,25,.12); }
|
|
.party-talent-card__icon { display: block; width: 36px; height: 36px; overflow: hidden; border: 1px solid rgba(219,203,138,.28); border-radius: 6px 2px 6px 2px; background: #07100c; }
|
|
.party-talent-card__icon img { display: block; width: 100%; height: 100%; object-fit: cover; }
|
|
.party-talent-card__body { min-width: 0; }
|
|
.party-talent-card__heading { display: flex; min-width: 0; align-items: baseline; justify-content: space-between; gap: 6px; }
|
|
.party-talent-card__heading strong { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
|
|
.party-talent-card__heading b { flex: 0 0 auto; color: #d6bf76; font-size: 6px; text-transform: uppercase; }
|
|
.party-talent-card__body > small { color: #9fb094; font-size: 7px; }
|
|
.party-talent-card__body p { display: -webkit-box; margin: 3px 0 0; overflow: hidden; color: #bdc9b5; font-size: 7px; line-height: 1.3; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
|
|
.party-talent-card--upcoming .party-talent-card__body p { -webkit-line-clamp: 3; }
|
|
.party-management__empty-talents { margin: 7px 3px; color: var(--muted); font-size: 8px; line-height: 1.45; }
|
|
|
|
@media (max-width: 680px) {
|
|
.party-management-panel { padding: 14px; overflow: auto; }
|
|
.party-management__layout { display: block; }
|
|
.party-management__roster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; padding: 0; overflow: visible; }
|
|
.party-management__roster > header { grid-column: 1 / -1; margin-bottom: 0; }
|
|
.party-management__member { min-height: 54px; margin: 0; grid-template-columns: 31px minmax(0, 1fr); padding: 5px; }
|
|
.party-management__member-sigil { width: 30px; height: 30px; }
|
|
.party-management__member em { display: none; }
|
|
.party-management__details { margin-top: 9px; padding: 0; overflow: visible; }
|
|
.party-management__profile { grid-template-columns: 50px minmax(0, 1fr); }
|
|
.party-management__portrait { width: 46px; height: 46px; }
|
|
.party-management__health { grid-column: 1 / 3; }
|
|
.party-management__orders { grid-template-columns: 1fr; }
|
|
.party-management__talents { grid-template-columns: 1fr; }
|
|
.party-management__talent-list { max-height: none; }
|
|
}
|
|
|
|
@media (pointer: coarse) {
|
|
.party-command-bar button { min-height: 44px; }
|
|
}
|
|
|
|
@media (max-width: 760px) {
|
|
.player-frame { width: 225px; grid-template-columns: 48px 1fr; }
|
|
.player-frame__portrait { height: 48px; }
|
|
.party-frames { top: max(91px, calc(env(safe-area-inset-top) + 79px)); width: 194px; }
|
|
.party-frame--player { display: none; }
|
|
.hud-minimap { width: 124px; }
|
|
.hud-minimap__map { width: 108px; height: 108px; }
|
|
.spellbook-panel__layout { grid-template-columns: 1fr; }
|
|
.spellbook-panel__details { display: none; }
|
|
.talents-panel__workspace { grid-template-columns: minmax(250px, 1fr) minmax(190px, 235px); }
|
|
.talents-panel__boards { display: block; }
|
|
.talent-tree-board { display: none; max-width: 270px; margin: 0 auto; }
|
|
.talent-tree-board.is-active { display: block; }
|
|
.talent-tree-board__canvas { max-width: 210px; }
|
|
.ability-bindings__layout { display: block; min-height: 0; }
|
|
.ability-bindings__diagram { min-height: 320px; grid-template-columns: minmax(150px, .7fr) minmax(260px, 1.3fr); }
|
|
.ability-bindings__picker { margin-top: 8px; }
|
|
.ability-bindings__picker > p:not(.eyebrow) { margin-bottom: 0; }
|
|
.ability-bindings-panel .game-panel__footer { flex-wrap: wrap; gap: 5px 12px; }
|
|
}
|
|
|
|
@media (max-width: 520px) {
|
|
.boss-loot-window {
|
|
top: auto;
|
|
right: 10px;
|
|
bottom: max(76px, calc(env(safe-area-inset-bottom) + 66px));
|
|
width: calc(100vw - 20px);
|
|
transform: none;
|
|
}
|
|
.boss-loot-window__items { max-height: min(160px, 30vh); }
|
|
@keyframes boss-loot-arrive {
|
|
from { opacity: 0; transform: translateY(14px) scale(.97); }
|
|
to { opacity: 1; transform: translateY(0) scale(1); }
|
|
}
|
|
.player-frame { width: 205px; }
|
|
.player-frame__body header span { display: none; }
|
|
.party-frames { top: max(87px, calc(env(safe-area-inset-top) + 75px)); width: 176px; }
|
|
.party-frame { min-height: 34px; grid-template-columns: 25px minmax(0,1fr); padding: 3px 4px; }
|
|
.party-frame__sigil { width: 23px; height: 23px; }
|
|
.party-frame__identity small { display: none; }
|
|
.hud-minimap { right: 7px; width: 94px; }
|
|
.hud-minimap__map { width: 86px; height: 86px; }
|
|
.hud-minimap__caption { display: none; }
|
|
.hud-bottom-stack > .action-bar { width: min(360px, calc(100vw - 18px)); }
|
|
.hud-bottom-stack > .control-hint { max-width: min(360px, calc(100vw - 18px)); }
|
|
.action-bar { --action-slot-size: 36px; width: calc(100vw - 12px); }
|
|
.action-bar__controller { min-height: 112px; grid-template-columns: 90px 102px 112px; gap: 4px; padding: 4px; }
|
|
.action-cluster--face { width: 112px; height: 112px; }
|
|
.action-cluster--shoulders { grid-template-columns: repeat(2, 48px); gap: 3px; }
|
|
.action-cluster--shoulders .action-slot { width: 48px; min-width: 48px; }
|
|
.action-bar__detail { width: 94px; margin-bottom: 18px; }
|
|
.target-frame { top: 91px; width: 190px; }
|
|
.spellbook-panel__list { grid-template-columns: 1fr; }
|
|
.talents-panel__workspace { grid-template-columns: minmax(0, 1fr); }
|
|
.talent-tree-board { max-width: 250px; }
|
|
.talent-tree-board__canvas { max-width: 202px; }
|
|
.talent-details { position: relative; min-height: 0; }
|
|
.talent-tree-tab { grid-template-columns: 1fr; justify-items: center; padding: 4px; text-align: center; }
|
|
.talent-tree-tab__icon { display: none; }
|
|
.talent-tree-tab strong { font-size: 10px; }
|
|
.talent-node { width: 35px; height: 35px; }
|
|
.talents-panel__footer { justify-content: space-between; gap: 5px; }
|
|
.ability-bindings__layers button { grid-template-columns: 1fr; justify-items: center; padding: 4px; text-align: center; }
|
|
.ability-bindings__layers kbd, .ability-bindings__layers small { display: none; }
|
|
.ability-bindings__diagram { display: block; min-height: 0; padding: 8px; border-radius: 16px; }
|
|
.ability-bindings__shoulders { display: grid; grid-template-columns: repeat(2, 1fr); margin-bottom: 7px; }
|
|
.ability-bindings__dpad { display: grid; max-width: 230px; margin: 0 auto 7px; }
|
|
.ability-bindings__face { transform: scale(.9); margin-block: -10px; }
|
|
.ability-bindings__restore { margin-top: 2px; }
|
|
.ability-bindings-panel .game-panel__footer span:nth-child(n+4) { display: none; }
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.boss-loot-window { animation: none; }
|
|
.spellbook-panel__filter > span::after { transition: none; }
|
|
}
|
|
|
|
@media (max-height: 560px) {
|
|
.player-frame { top: 7px; left: 7px; transform: scale(.88); transform-origin: top left; }
|
|
.hud-minimap { top: 6px; right: 7px; transform: scale(.86); transform-origin: top right; }
|
|
.hud-bottom-stack > .action-bar { width: min(360px, calc(100vw - 18px)); }
|
|
.hud-bottom-stack > .control-hint { max-width: min(440px, calc(100vw - 18px)); }
|
|
.action-bar { --action-slot-size: 36px; bottom: 19px; width: min(360px, calc(100vw - 18px)); }
|
|
.action-bar__controller { min-height: 112px; grid-template-columns: 90px 102px 112px; gap: 4px; padding: 4px; }
|
|
.action-cluster--face { width: 112px; height: 112px; }
|
|
.action-cluster--shoulders { grid-template-columns: repeat(2, 48px); gap: 3px; }
|
|
.action-cluster--shoulders .action-slot { width: 48px; min-width: 48px; }
|
|
.action-bar__detail { width: 94px; margin-bottom: 18px; }
|
|
.game-panel { max-height: calc(100vh - 18px); padding: 13px 15px; }
|
|
.game-panel__header { padding-bottom: 7px; }
|
|
.game-panel__footer { padding-top: 5px; }
|
|
.spellbook-panel__layout { margin-top: 8px; }
|
|
.spellbook-ability { min-height: 48px; }
|
|
.spellbook-ability__icon { width: 34px; height: 34px; }
|
|
.talents-panel__intro { margin: 7px 0; }
|
|
.talents-panel__workspace { grid-template-columns: minmax(245px, 1fr) minmax(180px, 225px); }
|
|
.talents-panel__boards { display: block; }
|
|
.talent-tree-board { display: none; max-width: 252px; margin: 0 auto; }
|
|
.talent-tree-board.is-active { display: block; }
|
|
.talent-tree-board__canvas { max-width: 190px; }
|
|
.talent-details { min-height: 0; padding: 9px; }
|
|
.talent-details > p { margin: 7px 0; }
|
|
.talent-details__requirements { margin: 6px 0; }
|
|
.option-row { min-height: 34px; padding: 3px 2px; }
|
|
.pause-menu { width: min(560px, 100%); padding: 16px 20px; }
|
|
.pause-menu__actions { grid-template-columns: repeat(2, 1fr); gap: 6px; margin: 9px 0; }
|
|
.pause-menu__actions .button { min-height: 34px; }
|
|
}
|
|
|
|
@media (max-width: 520px) and (max-height: 560px) {
|
|
.talents-panel__workspace { grid-template-columns: minmax(0, 1fr); }
|
|
.talent-tree-board { max-width: 236px; }
|
|
.talent-tree-board__canvas { max-width: 184px; }
|
|
}
|
|
|
|
/* Healer Man front end and AYN Thor display routing */
|
|
:root {
|
|
--thor-main-css-width: 960px;
|
|
--thor-main-css-height: 540px;
|
|
--thor-bottom-css-width: 620px;
|
|
--thor-bottom-css-height: 540px;
|
|
--front-cream: #f2edd9;
|
|
--front-dim: #a8b3a5;
|
|
--front-green: #8cbf78;
|
|
--front-green-bright: #c8e28d;
|
|
--front-gold: #d8ae57;
|
|
--front-red: #a94d43;
|
|
--front-line: rgba(204, 224, 180, 0.18);
|
|
--front-panel: rgba(8, 20, 15, 0.92);
|
|
}
|
|
|
|
button, input { -webkit-tap-highlight-color: transparent; }
|
|
button:focus-visible, input:focus-visible, .is-controller-selected {
|
|
outline: 2px solid var(--front-green-bright) !important;
|
|
outline-offset: 2px;
|
|
box-shadow: 0 0 0 4px rgba(160, 203, 116, 0.16) !important;
|
|
}
|
|
|
|
.single-display-frame,
|
|
.single-primary-surface,
|
|
.dedicated-display-surface,
|
|
.bottom-display-root {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.single-context-layer {
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: 100;
|
|
display: grid;
|
|
place-items: center;
|
|
padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
|
|
}
|
|
.single-context-backdrop {
|
|
position: absolute;
|
|
inset: 0;
|
|
border: 0;
|
|
background: rgba(1, 5, 3, 0.76);
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
.single-context-surface {
|
|
position: relative;
|
|
z-index: 1;
|
|
width: min(var(--thor-bottom-css-width), 100%);
|
|
height: min(var(--thor-bottom-css-height), 100%);
|
|
overflow: hidden;
|
|
border: 1px solid rgba(200, 225, 166, 0.28);
|
|
border-radius: 18px;
|
|
background: #07110d;
|
|
box-shadow: 0 30px 90px rgba(0, 0, 0, 0.68);
|
|
}
|
|
.single-context-toggle {
|
|
position: absolute;
|
|
right: max(14px, env(safe-area-inset-right));
|
|
bottom: max(14px, env(safe-area-inset-bottom));
|
|
z-index: 110;
|
|
display: flex;
|
|
min-width: 116px;
|
|
min-height: 42px;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 9px;
|
|
padding: 7px 11px;
|
|
border: 1px solid rgba(202, 223, 170, 0.25);
|
|
border-radius: 10px;
|
|
background: rgba(8, 21, 15, 0.9);
|
|
color: var(--front-cream);
|
|
cursor: pointer;
|
|
box-shadow: 0 12px 35px rgba(0, 0, 0, 0.38);
|
|
}
|
|
.single-context-toggle b { font-size: 0.72rem; }
|
|
.single-context-toggle small { color: var(--front-green-bright); font-size: 0.56rem; }
|
|
.context-open .single-context-toggle { right: calc(50% - min(310px, 50%) + 12px); }
|
|
|
|
.thor-preview-frame {
|
|
width: 1040px;
|
|
min-height: 1240px;
|
|
margin: 0 auto;
|
|
padding: 24px 40px 52px;
|
|
background: #020504;
|
|
}
|
|
.thor-preview-label { display: flex; width: 960px; justify-content: space-between; padding: 8px 2px; color: var(--front-dim); font-size: 12px; }
|
|
.thor-preview-label b { color: var(--front-cream); }
|
|
.thor-preview-top { width: 960px; height: 540px; overflow: hidden; border: 2px solid #243027; border-radius: 16px 16px 5px 5px; }
|
|
.thor-preview-bottom { width: 620px; height: 540px; margin: 0 auto; overflow: hidden; border: 2px solid #243027; border-radius: 5px 5px 16px 16px; }
|
|
.thor-preview-hinge { display: flex; width: 960px; height: 34px; align-items: center; gap: 18px; color: #637063; font-size: 10px; letter-spacing: 0.2em; }
|
|
.thor-preview-hinge i { height: 2px; flex: 1; background: #202a22; }
|
|
html[data-display-layout="thor-preview"], html[data-display-layout="thor-preview"] body, html[data-display-layout="thor-preview"] #root { overflow: auto; }
|
|
|
|
.front-surface {
|
|
position: relative;
|
|
isolation: isolate;
|
|
width: 100%;
|
|
height: 100%;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
color: var(--front-cream);
|
|
background:
|
|
radial-gradient(circle at 21% 35%, rgba(74, 128, 81, 0.22), transparent 31%),
|
|
radial-gradient(circle at 76% 12%, rgba(182, 141, 69, 0.08), transparent 27%),
|
|
linear-gradient(145deg, #07120e, #040a08 70%);
|
|
}
|
|
.front-surface--top { padding: max(14px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
|
|
.front-surface--bottom { padding: max(12px, env(safe-area-inset-top)) max(13px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(13px, env(safe-area-inset-left)); }
|
|
.front-grain {
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: -1;
|
|
opacity: 0.22;
|
|
pointer-events: none;
|
|
background-image:
|
|
linear-gradient(115deg, transparent 0 48%, rgba(255,255,255,.025) 49% 50%, transparent 51%),
|
|
radial-gradient(circle, rgba(218, 231, 194, 0.16) 0 1px, transparent 1px);
|
|
background-size: 87px 87px, 19px 19px;
|
|
mask-image: linear-gradient(to bottom, black, transparent 90%);
|
|
}
|
|
.front-brand { display: flex; align-items: center; gap: 11px; }
|
|
.front-brand .brand-sigil {
|
|
display: grid;
|
|
width: 40px;
|
|
height: 40px;
|
|
place-items: center;
|
|
border: 1px solid rgba(195, 222, 151, 0.35);
|
|
border-radius: 50% 43% 50% 45%;
|
|
color: var(--front-green-bright);
|
|
font-family: Georgia, serif;
|
|
font-size: 24px;
|
|
box-shadow: inset 0 0 16px rgba(125, 176, 99, 0.18);
|
|
}
|
|
.front-brand > span:last-child { display: flex; flex-direction: column; }
|
|
.front-brand small { color: var(--front-green-bright); font-size: 8px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; }
|
|
.front-brand strong { font-family: Georgia, "Times New Roman", serif; font-size: 20px; font-weight: 400; letter-spacing: 0.02em; }
|
|
.front-brand--compact { gap: 8px; }
|
|
.front-brand--compact .brand-sigil { width: 30px; height: 30px; font-size: 18px; }
|
|
.front-brand--compact small { font-size: 7px; }
|
|
.front-brand--compact strong { font-size: 16px; }
|
|
.front-kicker, .companion-kicker { margin: 0; color: var(--front-green-bright); font-size: 9px; font-weight: 800; letter-spacing: 0.19em; text-transform: uppercase; }
|
|
.controller-legend {
|
|
position: absolute;
|
|
right: max(16px, env(safe-area-inset-right));
|
|
bottom: max(11px, env(safe-area-inset-bottom));
|
|
z-index: 8;
|
|
display: flex;
|
|
gap: 15px;
|
|
color: #87968a;
|
|
font-size: 9px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
}
|
|
.controller-legend b { color: var(--front-cream); }
|
|
.front-button {
|
|
display: flex;
|
|
min-height: 41px;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
padding: 7px 12px;
|
|
border: 1px solid var(--front-line);
|
|
border-radius: 8px;
|
|
background: rgba(168, 198, 143, 0.06);
|
|
color: var(--front-cream);
|
|
cursor: pointer;
|
|
text-align: left;
|
|
}
|
|
.front-button:hover { background: rgba(168, 198, 143, 0.13); }
|
|
.front-button span, .front-button small { display: block; }
|
|
.front-button span { font-size: 12px; font-weight: 800; }
|
|
.front-button small { color: var(--front-dim); font-size: 8px; font-weight: 400; }
|
|
.front-button--primary { border-color: rgba(200, 226, 142, 0.42); background: linear-gradient(135deg, #5a7848, #405f3e); }
|
|
.front-button--primary:hover { background: linear-gradient(135deg, #678854, #4c7048); }
|
|
.front-button--quiet { border-color: transparent; background: rgba(255, 255, 255, 0.025); }
|
|
.front-button--danger { border-color: rgba(209, 103, 90, 0.35); background: rgba(148, 54, 44, 0.18); }
|
|
.front-button:disabled { cursor: not-allowed; filter: saturate(0.2); opacity: 0.45; }
|
|
.text-action { border: 0; background: transparent; color: var(--front-green-bright); cursor: pointer; font-size: 10px; text-decoration: underline; text-underline-offset: 3px; }
|
|
.text-action--danger { color: #cf8176; }
|
|
.front-notice {
|
|
margin: 8px 0 0;
|
|
padding: 7px 9px;
|
|
border-left: 2px solid var(--front-gold);
|
|
background: rgba(185, 139, 57, 0.08);
|
|
color: #d8c994;
|
|
font-size: 9px;
|
|
line-height: 1.35;
|
|
}
|
|
|
|
/* Login */
|
|
.login-screen { display: grid; grid-template-columns: minmax(340px, 1fr) 390px; grid-template-rows: 58px 1fr 28px; column-gap: clamp(24px, 5vw, 72px); }
|
|
.login-screen > .front-brand { grid-column: 1; grid-row: 1; align-self: start; }
|
|
.login-hero { grid-column: 1; grid-row: 2; align-self: center; max-width: 500px; padding: 0 0 18px clamp(6px, 3vw, 36px); }
|
|
.login-rune { display: flex; width: 210px; align-items: center; gap: 12px; margin-bottom: 18px; color: var(--front-green-bright); }
|
|
.login-rune i { height: 1px; flex: 1; background: linear-gradient(90deg, transparent, rgba(195, 222, 145, 0.46)); }
|
|
.login-rune i:last-child { transform: scaleX(-1); }
|
|
.login-rune span { font-family: Georgia, serif; font-size: 24px; text-shadow: 0 0 18px rgba(180, 225, 119, 0.55); }
|
|
.login-hero h1 { margin: 8px 0 12px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(35px, 5.5vw, 64px); font-weight: 400; line-height: 0.92; letter-spacing: -0.035em; }
|
|
.login-hero h1 em { color: var(--front-green-bright); font-weight: 400; }
|
|
.login-hero > p:not(.front-kicker) { max-width: 470px; margin: 0; color: var(--front-dim); font-size: 12px; line-height: 1.55; }
|
|
.login-pill-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
|
|
.login-pill-row span { padding: 5px 8px; border: 1px solid rgba(193, 216, 164, 0.14); border-radius: 999px; color: #b7c5b3; font-size: 8px; text-transform: uppercase; letter-spacing: 0.08em; }
|
|
.login-form {
|
|
grid-column: 2;
|
|
grid-row: 1 / 3;
|
|
align-self: center;
|
|
padding: clamp(21px, 3vw, 31px);
|
|
border: 1px solid var(--front-line);
|
|
border-radius: 18px 5px 18px 5px;
|
|
background: linear-gradient(150deg, rgba(13, 30, 22, 0.95), rgba(6, 15, 11, 0.94));
|
|
box-shadow: 0 26px 70px rgba(0, 0, 0, 0.46);
|
|
}
|
|
.login-form header { margin-bottom: 15px; }
|
|
.login-form header span { display: block; color: var(--front-gold); font-size: 8px; font-weight: 800; letter-spacing: 0.17em; text-transform: uppercase; }
|
|
.login-form header strong { display: block; margin: 4px 0; font-family: Georgia, serif; font-size: 24px; font-weight: 400; }
|
|
.login-form header small { color: var(--front-dim); font-size: 9px; }
|
|
.login-form > label, .appearance-controls > label { display: block; margin: 8px 0 4px; color: #bdc9ba; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; }
|
|
.login-form > input, .appearance-controls > input {
|
|
width: 100%;
|
|
height: 38px;
|
|
padding: 0 11px;
|
|
border: 1px solid rgba(200, 219, 177, 0.18);
|
|
border-radius: 7px;
|
|
background: rgba(2, 8, 5, 0.66);
|
|
color: var(--front-cream);
|
|
font: inherit;
|
|
font-size: 12px;
|
|
}
|
|
.login-form__actions { display: grid; gap: 7px; margin-top: 15px; }
|
|
|
|
/* Character silhouette preview */
|
|
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
|
|
.character-preview { position: relative; display: grid; min-width: 0; height: 100%; margin: 0; place-items: center; overflow: hidden; }
|
|
.character-preview__aura { position: absolute; top: 44%; left: 50%; width: min(27vw, 270px); aspect-ratio: 1; transform: translate(-50%, -50%); border: 1px solid color-mix(in srgb, var(--race-accent), transparent 55%); border-radius: 50%; box-shadow: inset 0 0 70px color-mix(in srgb, var(--race-accent), transparent 80%), 0 0 70px color-mix(in srgb, var(--race-accent), transparent 84%); }
|
|
.character-preview__aura i { position: absolute; inset: 12%; border: 1px dashed rgba(220, 232, 196, 0.12); border-radius: 50%; animation: avatar-orbit 24s linear infinite; }
|
|
.character-preview__aura i:nth-child(2) { inset: 27%; animation-direction: reverse; animation-duration: 17s; }
|
|
.character-preview__aura i:nth-child(3) { inset: -8%; border-style: solid; opacity: 0.18; }
|
|
@keyframes avatar-orbit { to { transform: rotate(360deg); } }
|
|
.character-preview__viewport { position: absolute; z-index: 1; inset: 0 0 42px; pointer-events: none; filter: drop-shadow(0 25px 22px rgba(0,0,0,.55)); }
|
|
.character-preview__viewport canvas { display: block; width: 100% !important; height: 100% !important; }
|
|
.character-avatar { position: relative; z-index: 1; width: 138px; height: 250px; margin-top: -15px; transform: perspective(600px) rotateY(var(--avatar-turn)); transform-style: preserve-3d; filter: drop-shadow(0 25px 22px rgba(0,0,0,.55)); transition: transform 180ms ease; }
|
|
.character-avatar__cloak { position: absolute; top: 80px; left: 30px; width: 80px; height: 146px; clip-path: polygon(18% 0, 82% 0, 100% 100%, 0 100%); background: linear-gradient(90deg, #17251d, color-mix(in srgb, var(--class-color), #18231d 70%), #0b1510); }
|
|
.character-avatar__body { position: absolute; top: 73px; left: 39px; width: 61px; height: 132px; border-radius: 23px 23px 10px 10px; background: linear-gradient(110deg, #2c3d30, color-mix(in srgb, var(--class-color), #24352b 62%) 55%, #111b15); box-shadow: inset 0 0 0 2px rgba(230,240,209,.08); }
|
|
.character-avatar__head { position: absolute; top: 23px; left: 49px; display: grid; width: 43px; height: 55px; place-items: center; border: 2px solid color-mix(in srgb, var(--race-accent), white 12%); border-radius: 49% 49% 42% 42%; background: linear-gradient(145deg, color-mix(in srgb, var(--race-accent), #27332b 58%), #152019); box-shadow: 0 -8px 0 -2px color-mix(in srgb, var(--class-color), #111 50%); }
|
|
.character-avatar__head b { color: rgba(247,248,225,.76); font-size: 10px; letter-spacing: .08em; }
|
|
.character-avatar__shoulder { position: absolute; top: 69px; width: 42px; height: 27px; border: 1px solid color-mix(in srgb, var(--class-color), white 8%); background: #26382b; }
|
|
.character-avatar__shoulder--left { left: 12px; transform: rotate(-14deg); border-radius: 18px 5px 12px 5px; }
|
|
.character-avatar__shoulder--right { right: 11px; transform: rotate(14deg); border-radius: 5px 18px 5px 12px; }
|
|
.character-avatar__staff { position: absolute; top: 36px; right: 4px; width: 5px; height: 210px; transform: rotate(7deg); border-radius: 5px; background: linear-gradient(90deg, #4a3421, #b48a4e, #422c1b); }
|
|
.character-avatar__staff i { position: absolute; top: -13px; left: -10px; width: 25px; height: 25px; border: 3px solid var(--front-green-bright); border-radius: 50% 45% 50% 42%; box-shadow: 0 0 18px rgba(186, 229, 125, 0.65); }
|
|
.character-avatar--female { transform: perspective(600px) rotateY(var(--avatar-turn)) scale(.94); }
|
|
.character-preview figcaption { position: absolute; z-index: 2; bottom: 11px; left: 50%; display: flex; width: 90%; transform: translateX(-50%); flex-direction: column; align-items: center; text-align: center; text-shadow: 0 2px 10px #000; }
|
|
.character-preview figcaption small { color: var(--front-dim); font-size: 8px; text-transform: uppercase; letter-spacing: .13em; }
|
|
.character-preview figcaption strong { font-family: Georgia, serif; font-size: 24px; font-weight: 400; }
|
|
.character-preview figcaption span { font-size: 10px; font-weight: 800; }
|
|
.character-preview--empty { align-content: center; gap: 8px; color: var(--front-dim); text-align: center; }
|
|
.character-preview--empty > span { display: grid; width: 56px; height: 56px; place-items: center; border: 1px solid var(--front-line); border-radius: 50%; color: var(--front-green-bright); font: 28px Georgia, serif; }
|
|
.character-preview--empty p { max-width: 180px; font-size: 10px; line-height: 1.5; }
|
|
.character-preview--compact .character-avatar { width: 80px; height: 150px; transform: perspective(400px) rotateY(var(--avatar-turn)) scale(.65); }
|
|
.character-preview--compact .character-preview__aura { width: 110px; }
|
|
.character-preview--compact figcaption strong { font-size: 16px; }
|
|
.character-preview--compact figcaption small { font-size: 7px; }
|
|
|
|
/* Character select */
|
|
.character-select-screen { display: grid; grid-template-columns: 250px minmax(250px, 1fr) 260px; grid-template-rows: 54px minmax(0, 1fr) 25px; gap: 0; padding-bottom: max(8px, env(safe-area-inset-bottom)); }
|
|
.roster-header { grid-column: 1 / 4; display: flex; align-items: center; gap: 17px; border-bottom: 1px solid var(--front-line); }
|
|
.roster-header > div:nth-child(2) { display: flex; flex: 1; flex-direction: column; }
|
|
.roster-header > div:nth-child(2) span { color: var(--front-dim); font-size: 8px; text-transform: uppercase; letter-spacing: .13em; }
|
|
.roster-header > div:nth-child(2) strong { font: 18px Georgia, serif; }
|
|
.roster-header > button, .creator-header > button { padding: 7px 10px; border: 1px solid var(--front-line); border-radius: 7px; background: transparent; color: var(--front-dim); cursor: pointer; font-size: 9px; }
|
|
.roster-list { grid-column: 1; grid-row: 2; min-height: 0; padding: 12px 12px 18px 0; overflow: auto; border-right: 1px solid var(--front-line); }
|
|
.roster-list__heading { display: flex; justify-content: space-between; margin: 0 5px 8px; color: var(--front-dim); font-size: 8px; text-transform: uppercase; letter-spacing: .12em; }
|
|
.roster-character { display: grid; width: 100%; min-height: 54px; grid-template-columns: 38px 1fr auto; align-items: center; gap: 8px; margin-bottom: 6px; padding: 7px; border: 1px solid transparent; border-radius: 9px; background: rgba(255,255,255,.025); color: var(--front-cream); cursor: pointer; text-align: left; }
|
|
.roster-character.is-active { border-color: rgba(204, 223, 170, 0.26); background: linear-gradient(100deg, rgba(107, 146, 82, .19), rgba(255,255,255,.025)); }
|
|
.roster-character > span { display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid var(--portrait-accent); border-radius: 50%; background: color-mix(in srgb, var(--portrait-accent), transparent 82%); color: #e7eddb; font-size: 9px; font-weight: 800; }
|
|
.roster-character i { display: flex; min-width: 0; flex-direction: column; font-style: normal; }
|
|
.roster-character i strong { overflow: hidden; font: 14px Georgia, serif; text-overflow: ellipsis; white-space: nowrap; }
|
|
.roster-character i small, .roster-character em { color: var(--front-dim); font-size: 7px; font-style: normal; }
|
|
.roster-new { display: flex; width: 100%; min-height: 51px; align-items: center; gap: 9px; padding: 7px 10px; border: 1px dashed rgba(200, 222, 173, .23); border-radius: 9px; background: transparent; color: var(--front-cream); cursor: pointer; text-align: left; }
|
|
.roster-new b { color: var(--front-green-bright); font: 24px Georgia, serif; }
|
|
.roster-new span { display: flex; flex-direction: column; }
|
|
.roster-new span strong { font-size: 10px; }
|
|
.roster-new span small { color: var(--front-dim); font-size: 7px; }
|
|
.roster-empty { display: grid; min-height: 155px; place-content: center; justify-items: center; color: var(--front-dim); text-align: center; }
|
|
.roster-empty span { color: var(--front-green-bright); font: 32px Georgia, serif; }
|
|
.roster-empty strong { color: var(--front-cream); font: 15px Georgia, serif; }
|
|
.roster-empty small { max-width: 160px; margin: 4px 0 12px; font-size: 8px; line-height: 1.4; }
|
|
.roster-stage { position: relative; grid-column: 2; grid-row: 2; min-width: 0; min-height: 0; }
|
|
.roster-stage-continue { position: absolute; right: 12px; bottom: 14px; left: 12px; z-index: 4; display: none; justify-content: center; }
|
|
.roster-character-info { position: absolute; right: 0; bottom: 12px; left: 0; z-index: 2; display: none; text-align: center; }
|
|
.roster-character-info p { margin: 0; color: var(--front-dim); font-size: 8px; text-transform: uppercase; }
|
|
.roster-character-info h1 { margin: 2px 0; font: 26px Georgia, serif; }
|
|
.roster-character-info strong, .roster-character-info small { display: block; }
|
|
.roster-character-info strong { font-size: 10px; }
|
|
.roster-character-info small { max-width: 250px; margin: 4px auto 0; color: var(--front-dim); font-size: 8px; }
|
|
.roster-details { grid-column: 3; grid-row: 2; align-self: stretch; padding: 22px 4px 20px 16px; border-left: 1px solid var(--front-line); }
|
|
.roster-details h2 { margin: 7px 0 17px; font: 22px Georgia, serif; line-height: 1.05; }
|
|
.roster-details > p:not(.front-kicker):not(.front-notice) { color: var(--front-dim); font-size: 10px; line-height: 1.5; }
|
|
.roster-details dl, .companion-panel dl { margin: 0 0 14px; }
|
|
.roster-details dl div, .companion-panel dl div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid rgba(203, 219, 180, .09); }
|
|
.roster-details dt, .companion-panel dt { color: var(--front-dim); font-size: 8px; text-transform: uppercase; }
|
|
.roster-details dd, .companion-panel dd { margin: 0; font-size: 9px; text-align: right; }
|
|
.roster-enter { width: 100%; margin-top: 13px; }
|
|
.roster-details .text-action { display: block; margin: 10px auto 0; }
|
|
.character-select-screen > .controller-legend { grid-column: 1 / 4; grid-row: 3; position: static; align-self: end; justify-self: end; }
|
|
.front-modal-backdrop { position: absolute; inset: 0; z-index: 50; display: grid; place-items: center; padding: 20px; background: rgba(1,5,3,.76); backdrop-filter: blur(8px); }
|
|
.front-confirm { width: min(390px, 100%); padding: 25px; border: 1px solid var(--front-line); border-radius: 14px; background: #0a1812; box-shadow: 0 30px 80px #000; }
|
|
.front-confirm h2 { margin: 7px 0; font: 27px Georgia, serif; }
|
|
.front-confirm > p:not(.front-kicker) { color: var(--front-dim); font-size: 11px; line-height: 1.5; }
|
|
.front-confirm > div { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 18px; }
|
|
|
|
/* Main menu */
|
|
.main-menu-screen {
|
|
display: grid;
|
|
grid-template-columns: minmax(245px, 32%) minmax(0, 1fr);
|
|
grid-template-rows: 54px minmax(0, 1fr) 25px;
|
|
column-gap: 22px;
|
|
padding-bottom: max(8px, env(safe-area-inset-bottom));
|
|
}
|
|
.main-menu-header, .dungeon-select-header, .manastorm-select-header {
|
|
grid-column: 1 / 3;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 17px;
|
|
border-bottom: 1px solid var(--front-line);
|
|
}
|
|
.main-menu-header > div:nth-child(2), .dungeon-select-header > div:nth-child(2), .manastorm-select-header > div:nth-child(2) { display: flex; min-width: 0; flex: 1; flex-direction: column; }
|
|
.main-menu-header > div:nth-child(2) span, .dungeon-select-header > div:nth-child(2) span, .manastorm-select-header > div:nth-child(2) span { color: var(--front-dim); font-size: 8px; letter-spacing: .13em; text-transform: uppercase; }
|
|
.main-menu-header > div:nth-child(2) strong, .dungeon-select-header > div:nth-child(2) strong, .manastorm-select-header > div:nth-child(2) strong { overflow: hidden; font: 18px Georgia, serif; text-overflow: ellipsis; white-space: nowrap; }
|
|
.main-menu-header > button {
|
|
padding: 7px 10px;
|
|
border: 1px solid var(--front-line);
|
|
border-radius: 7px;
|
|
background: rgba(255,255,255,.025);
|
|
color: var(--front-dim);
|
|
cursor: pointer;
|
|
font-size: 9px;
|
|
}
|
|
.main-menu-character {
|
|
grid-column: 1;
|
|
grid-row: 2;
|
|
display: grid;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
grid-template-rows: minmax(0, 1fr) auto;
|
|
border-right: 1px solid var(--front-line);
|
|
}
|
|
.main-menu-character__preview { min-width: 0; min-height: 0; }
|
|
.main-menu-character__preview .character-preview__viewport { bottom: 0; }
|
|
.main-menu-character__preview .character-preview figcaption { display: none; }
|
|
.main-menu-character__summary { padding: 11px 18px 18px 2px; border-top: 1px solid rgba(204,224,180,.1); }
|
|
.main-menu-character__summary h1 { overflow: hidden; margin: 4px 0 2px; font: 27px Georgia, serif; text-overflow: ellipsis; white-space: nowrap; }
|
|
.main-menu-character__summary > strong, .main-menu-character__summary > small { display: block; }
|
|
.main-menu-character__summary > strong { font-size: 10px; }
|
|
.main-menu-character__summary > small { margin-top: 4px; color: var(--front-dim); font-size: 8px; text-transform: capitalize; }
|
|
.main-menu-modes { grid-column: 2; grid-row: 2; min-width: 0; min-height: 0; padding: 18px 0 12px; overflow: auto; }
|
|
.main-menu-modes > header h2 { margin: 3px 0 4px; font: 28px Georgia, serif; font-weight: 400; }
|
|
.main-menu-modes > header > p:last-child { max-width: 570px; margin: 0; color: var(--front-dim); font-size: 9px; line-height: 1.45; }
|
|
.main-menu-mode-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
|
|
.main-menu-mode {
|
|
position: relative;
|
|
display: grid;
|
|
width: 100%;
|
|
min-width: 0;
|
|
min-height: 76px;
|
|
grid-template-columns: 30px minmax(0, 1fr);
|
|
grid-template-rows: 1fr auto;
|
|
align-items: center;
|
|
column-gap: 9px;
|
|
padding: 10px;
|
|
}
|
|
.main-menu-mode > b { grid-row: 1 / 3; align-self: start; color: var(--front-gold); font: 18px Georgia, serif; font-weight: 400; }
|
|
.main-menu-mode > span { min-width: 0; }
|
|
.main-menu-mode > span strong, .main-menu-mode > span small { display: block; }
|
|
.main-menu-mode > span strong { font: 16px Georgia, serif; font-weight: 400; }
|
|
.main-menu-mode > span small { margin-top: 3px; color: var(--front-dim); font-size: 7px; line-height: 1.35; }
|
|
.main-menu-mode > em { grid-column: 2; color: var(--front-dim); font-size: 7px; font-style: normal; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
|
|
.main-menu-mode--available { border-color: rgba(200,226,142,.4); background: linear-gradient(135deg, rgba(91,126,70,.32), rgba(25,48,34,.48)); }
|
|
.main-menu-mode--available > em { color: var(--front-green-bright); }
|
|
.main-menu-mode--available:hover { background: linear-gradient(135deg, rgba(105,145,80,.42), rgba(30,58,40,.58)); }
|
|
.main-menu-mode--coming-soon:disabled { opacity: .62; filter: saturate(.4); }
|
|
.main-menu-mode--coming-soon > b { color: #7d806f; }
|
|
.main-menu-notice { margin-right: 8px; }
|
|
.main-menu-screen > .controller-legend { grid-column: 1 / 3; grid-row: 3; position: static; align-self: end; justify-self: end; }
|
|
|
|
/* Dungeon browser */
|
|
.dungeon-select-screen {
|
|
display: grid;
|
|
grid-template-columns: 292px minmax(0, 1fr);
|
|
grid-template-rows: 54px minmax(0, 1fr) 25px;
|
|
column-gap: 18px;
|
|
padding-bottom: max(8px, env(safe-area-inset-bottom));
|
|
}
|
|
.dungeon-select-header > p { display: flex; flex-direction: column; align-items: flex-end; margin: 0; }
|
|
.dungeon-select-header > p b { font: 13px Georgia, serif; font-weight: 400; }
|
|
.dungeon-select-header > p small { color: var(--front-dim); font-size: 7px; }
|
|
.dungeon-select-list {
|
|
grid-column: 1;
|
|
grid-row: 2;
|
|
display: grid;
|
|
min-height: 0;
|
|
grid-template-rows: auto auto minmax(0, 1fr) auto;
|
|
padding: 17px 16px 12px 0;
|
|
border-right: 1px solid var(--front-line);
|
|
}
|
|
.dungeon-select-list > header { position: relative; }
|
|
.dungeon-select-list > header h1 { margin: 3px 0 10px; font: 28px Georgia, serif; font-weight: 400; }
|
|
.dungeon-select-list > header > small { position: absolute; right: 0; bottom: 14px; color: var(--front-dim); font-size: 7px; letter-spacing: .1em; text-transform: uppercase; }
|
|
.dungeon-category-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 0 3px 10px; }
|
|
.dungeon-category-tab { display: flex; min-height: 39px; align-items: center; justify-content: space-between; gap: 6px; padding: 7px 9px; border: 1px solid rgba(204,224,180,.13); border-radius: 7px; background: rgba(255,255,255,.025); color: var(--front-cream); cursor: pointer; text-align: left; }
|
|
.dungeon-category-tab strong { color: var(--front-dim); font: 14px Georgia, serif; font-weight: 400; }
|
|
.dungeon-category-tab small { color: var(--front-dim); font-size: 6px; letter-spacing: .04em; text-align: right; text-transform: uppercase; }
|
|
.dungeon-category-tab.is-active { border-color: rgba(218,192,102,.52); background: linear-gradient(120deg, rgba(111,126,66,.25), rgba(255,255,255,.03)); }
|
|
.dungeon-category-tab.is-active strong { color: var(--front-gold); }
|
|
.dungeon-category-tab.is-controller-selected { box-shadow: 0 0 0 1px rgba(218,192,102,.65), 0 0 14px rgba(151,177,91,.18); }
|
|
.dungeon-select-list__items { min-height: 0; padding: 2px 3px 8px; overflow: auto; }
|
|
.dungeon-select-row {
|
|
display: grid;
|
|
width: 100%;
|
|
min-height: 66px;
|
|
grid-template-columns: 31px minmax(0,1fr) auto;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-bottom: 7px;
|
|
padding: 8px;
|
|
border: 1px solid rgba(204,224,180,.11);
|
|
border-radius: 9px;
|
|
background: rgba(255,255,255,.025);
|
|
color: var(--front-cream);
|
|
cursor: pointer;
|
|
text-align: left;
|
|
}
|
|
.dungeon-select-row.is-active { border-color: rgba(200,226,142,.42); background: linear-gradient(100deg, rgba(93,135,70,.27), rgba(255,255,255,.03)); }
|
|
.dungeon-select-row > b { color: var(--front-gold); font: 17px Georgia, serif; font-weight: 400; }
|
|
.dungeon-select-row > span { display: flex; min-width: 0; flex-direction: column; }
|
|
.dungeon-select-row > span strong { overflow: hidden; font: 14px Georgia, serif; text-overflow: ellipsis; white-space: nowrap; }
|
|
.dungeon-select-row > span small { overflow: hidden; margin-top: 3px; color: var(--front-dim); font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
|
|
.dungeon-select-row > em { color: var(--front-green-bright); font-size: 7px; font-style: normal; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
|
|
.dungeon-select-row:disabled { cursor: not-allowed; opacity: .48; }
|
|
.dungeon-select-back { justify-content: center; }
|
|
.dungeon-select-detail {
|
|
grid-column: 2;
|
|
grid-row: 2;
|
|
display: grid;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
grid-template-columns: minmax(210px, .9fr) minmax(245px, 1.1fr);
|
|
align-items: stretch;
|
|
gap: 17px;
|
|
padding: 17px 0 12px;
|
|
}
|
|
.dungeon-select-map { min-width: 0; min-height: 0; overflow: hidden; border: 1px solid var(--front-line); border-radius: 13px 4px 13px 4px; background: rgba(4,16,11,.84); box-shadow: inset 0 0 35px rgba(79,119,66,.13); }
|
|
.dungeon-select-map svg { display: block; width: 100%; height: 100%; }
|
|
.dungeon-select-map__placeholder { display: grid; width: 100%; height: 100%; place-items: center; color: var(--front-green-bright); font: 48px Georgia, serif; }
|
|
.dungeon-select-copy { min-width: 0; min-height: 0; padding: 9px 3px 5px 0; overflow: auto; }
|
|
.dungeon-select-copy h2, .dungeon-select-empty h2 { margin: 4px 0 8px; font: 29px Georgia, serif; font-weight: 400; line-height: 1; }
|
|
.dungeon-select-copy > p:not(.front-kicker):not(.front-notice) { margin: 0 0 9px; color: var(--front-dim); font-size: 9px; line-height: 1.5; }
|
|
.dungeon-select-copy dl { margin: 0 0 11px; }
|
|
.dungeon-select-copy dl div { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px solid rgba(203,219,180,.09); }
|
|
.dungeon-select-copy dt { color: var(--front-dim); font-size: 7px; letter-spacing: .06em; text-transform: uppercase; }
|
|
.dungeon-select-copy dd { margin: 0; font-size: 8px; text-align: right; }
|
|
.dungeon-select-enter { width: 100%; }
|
|
.dungeon-role-picker { display: grid; gap: 9px; }
|
|
.dungeon-role-picker > header h3 { margin: 3px 0 4px; font: 21px Georgia, serif; font-weight: 400; }
|
|
.dungeon-role-picker > header > small { display: block; color: var(--front-dim); font-size: 8px; line-height: 1.4; }
|
|
.dungeon-role-picker__options { display: grid; gap: 6px; }
|
|
.dungeon-role-option {
|
|
display: grid;
|
|
width: 100%;
|
|
min-height: 54px;
|
|
grid-template-columns: 34px minmax(0, 1fr);
|
|
align-items: center;
|
|
gap: 9px;
|
|
padding: 7px 9px;
|
|
border: 1px solid rgba(204,224,180,.14);
|
|
border-radius: 9px;
|
|
background: rgba(255,255,255,.025);
|
|
color: var(--front-cream);
|
|
cursor: pointer;
|
|
text-align: left;
|
|
}
|
|
.dungeon-role-option:hover, .dungeon-role-option.is-controller-selected { border-color: rgba(218,192,102,.62); background: rgba(111,126,66,.18); }
|
|
.dungeon-role-option > b { display: grid; width: 31px; height: 31px; place-items: center; border: 1px solid currentColor; border-radius: 50%; color: var(--front-gold); font: 17px Georgia, serif; }
|
|
.dungeon-role-option--healer > b { color: #91d9a5; }
|
|
.dungeon-role-option--damage > b { color: #d68d79; }
|
|
.dungeon-role-option > span { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
|
|
.dungeon-role-option > span strong { font: 13px Georgia, serif; }
|
|
.dungeon-role-option > span small { color: var(--front-dim); font-size: 7px; line-height: 1.35; }
|
|
.dungeon-role-picker__back { justify-content: center; min-height: 34px; }
|
|
.dungeon-select-empty { align-self: center; }
|
|
.dungeon-select-screen > .controller-legend { grid-column: 1 / 3; grid-row: 3; position: static; align-self: end; justify-self: end; }
|
|
|
|
/* Manastorm entry */
|
|
.manastorm-select-screen {
|
|
display: grid;
|
|
grid-template-rows: 54px minmax(0, 1fr) 25px;
|
|
padding-bottom: max(8px, env(safe-area-inset-bottom));
|
|
background:
|
|
radial-gradient(circle at 22% 60%, rgba(104,71,161,.16), transparent 32%),
|
|
radial-gradient(circle at 78% 26%, rgba(70,158,176,.11), transparent 28%);
|
|
}
|
|
.manastorm-select-header { grid-column: 1; }
|
|
.manastorm-select-header > p { display: flex; flex-direction: column; align-items: flex-end; margin: 0; }
|
|
.manastorm-select-header > p b { font: 13px Georgia, serif; font-weight: 400; }
|
|
.manastorm-select-header > p small { color: var(--front-dim); font-size: 7px; }
|
|
.manastorm-select-content {
|
|
display: grid;
|
|
min-height: 0;
|
|
grid-template-columns: minmax(250px, .9fr) minmax(310px, 1.1fr);
|
|
gap: 24px;
|
|
padding: 22px 4px 14px;
|
|
}
|
|
.manastorm-select-intro {
|
|
min-height: 0;
|
|
padding: 19px 24px;
|
|
border: 1px solid rgba(170,143,232,.24);
|
|
border-radius: 15px 5px 15px 5px;
|
|
background: linear-gradient(145deg, rgba(71,43,112,.26), rgba(7,23,27,.48));
|
|
box-shadow: inset 0 0 45px rgba(117,85,178,.08);
|
|
}
|
|
.manastorm-select-intro h1 { margin: 4px 0 8px; color: #ede2ff; font: 34px Georgia, serif; font-weight: 400; }
|
|
.manastorm-select-intro > p:not(.front-kicker) { max-width: 560px; color: var(--front-dim); font-size: 10px; line-height: 1.6; }
|
|
.manastorm-select-intro dl { margin: 18px 0 0; }
|
|
.manastorm-select-intro dl div { display: flex; justify-content: space-between; gap: 14px; padding: 7px 0; border-bottom: 1px solid rgba(207,190,236,.1); }
|
|
.manastorm-select-intro dt { color: var(--front-dim); font-size: 7px; letter-spacing: .08em; text-transform: uppercase; }
|
|
.manastorm-select-intro dd { margin: 0; color: #e9dcff; font-size: 9px; text-align: right; }
|
|
.manastorm-role-select { min-height: 0; padding: 13px 4px; overflow: auto; }
|
|
.manastorm-role-select > header h2 { margin: 4px 0; color: #efe7ff; font: 27px Georgia, serif; font-weight: 400; }
|
|
.manastorm-role-select > header small { color: var(--front-dim); font-size: 8px; }
|
|
.manastorm-setup-block { display: grid; gap: 5px; margin-top: 10px; }
|
|
.manastorm-setup-block > strong, .manastorm-role-label { color: #c9b7e6; font-size: 7px; letter-spacing: .1em; text-transform: uppercase; }
|
|
.manastorm-setup-block > small { color: var(--front-dim); font-size: 7px; }
|
|
.manastorm-party-size-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
|
|
.manastorm-size-option, .manastorm-entry-option { min-height: 30px; justify-content: center; border: 1px solid rgba(174,148,226,.25); border-radius: 7px; background: rgba(77,52,111,.14); color: #d9cbed; font-size: 9px; }
|
|
.manastorm-size-option.is-active, .manastorm-entry-option.is-active { border-color: rgba(142,231,239,.72); background: rgba(81,126,143,.28); color: #efffff; box-shadow: inset 0 0 12px rgba(100,210,225,.11); }
|
|
.manastorm-entry-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
|
|
.manastorm-spell-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; max-height: 122px; overflow-y: auto; padding-right: 2px; scrollbar-width: thin; }
|
|
.manastorm-spell-option { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 7px; min-height: 38px; padding: 5px 7px; border: 1px solid rgba(174,148,226,.25); border-radius: 7px; background: rgba(77,52,111,.14); color: #d9cbed; text-align: left; }
|
|
.manastorm-spell-option img { width: 26px; height: 26px; border: 1px solid rgba(207,190,236,.26); border-radius: 4px; object-fit: cover; }
|
|
.manastorm-spell-option span { display: flex; min-width: 0; flex-direction: column; justify-content: center; gap: 2px; }
|
|
.manastorm-spell-option b { overflow: hidden; font: 9px Georgia, serif; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
|
|
.manastorm-spell-option small { color: var(--front-dim); font-size: 6px; }
|
|
.manastorm-spell-option.is-active { border-color: rgba(142,231,239,.72); background: rgba(81,126,143,.28); color: #efffff; box-shadow: inset 0 0 12px rgba(100,210,225,.11); }
|
|
.manastorm-spell-option:disabled { opacity: .42; }
|
|
.manastorm-role-label { display: block; margin-top: 11px; }
|
|
.manastorm-role-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 5px; }
|
|
.manastorm-role-grid .dungeon-role-option { min-height: 47px; padding: 6px; }
|
|
.manastorm-role-grid .dungeon-role-option > span small { display: none; }
|
|
.manastorm-role-grid .dungeon-role-option { border-color: rgba(174,148,226,.2); background: rgba(77,52,111,.14); }
|
|
.manastorm-role-grid .dungeon-role-option:hover,
|
|
.manastorm-role-grid .dungeon-role-option.is-controller-selected { border-color: rgba(172,224,238,.66); background: rgba(80,75,139,.29); }
|
|
.manastorm-select-back { width: 100%; min-height: 36px; margin-top: 10px; justify-content: center; }
|
|
.manastorm-select-screen > .controller-legend { grid-row: 3; position: static; align-self: end; justify-self: end; }
|
|
|
|
/* Character creation */
|
|
.character-create-screen { display: grid; grid-template-columns: 280px minmax(250px, 1fr) 305px; grid-template-rows: 50px 3px minmax(0, 1fr) 58px; gap: 0; padding-bottom: max(8px, env(safe-area-inset-bottom)); }
|
|
.creator-header { grid-column: 1 / 4; grid-row: 1; display: flex; align-items: center; gap: 15px; border-bottom: 1px solid var(--front-line); }
|
|
.creator-header > div:nth-child(2) { display: flex; flex: 1; flex-direction: column; }
|
|
.creator-header > div:nth-child(2) span { color: var(--front-dim); font-size: 8px; text-transform: uppercase; letter-spacing: .12em; }
|
|
.creator-header > div:nth-child(2) strong { font: 18px Georgia, serif; }
|
|
.creator-progress { grid-column: 1 / 4; grid-row: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
|
|
.creator-progress i { background: rgba(255,255,255,.06); }
|
|
.creator-progress i.is-complete { background: var(--front-green); }
|
|
.creator-races, .creator-classes { min-height: 0; padding-top: 12px; overflow: hidden; }
|
|
.creator-category-tabs { display: flex; gap: 5px; margin-left: auto; }
|
|
.creator-category-tabs button { display: flex; align-items: baseline; gap: 5px; min-width: 82px; padding: 5px 8px; border: 1px solid var(--front-line); border-radius: 4px; color: var(--front-dim); background: rgba(5, 11, 13, .7); }
|
|
.creator-category-tabs button small { font-size: 6px; }
|
|
.creator-category-tabs button.is-active { border-color: var(--front-gold); color: #f0d99a; background: rgba(150, 111, 38, .18); }
|
|
|
|
.class-hall-screen { display: grid; grid-template-columns: minmax(230px, 31%) minmax(0, 1fr); grid-template-rows: 52px minmax(0, 1fr); gap: 14px; }
|
|
.class-hall-header { grid-column: 1 / 3; display: flex; align-items: center; gap: 14px; border-bottom: 1px solid var(--front-line); }
|
|
.class-hall-header > div { display: flex; flex-direction: column; flex: 1; }
|
|
.class-hall-header span { color: var(--front-dim); font-size: 8px; text-transform: uppercase; letter-spacing: .12em; }
|
|
.class-hall-header strong { font: 16px Georgia, serif; }
|
|
.class-hall-character { position: relative; min-height: 0; overflow: hidden; border: 1px solid var(--front-line); background: radial-gradient(circle at 50% 35%, rgba(137,102,44,.16), transparent 55%); }
|
|
.class-hall-character > div:last-child { position: absolute; inset: auto 12px 12px; display: flex; flex-direction: column; padding: 10px; background: linear-gradient(90deg, rgba(4,10,12,.94), rgba(4,10,12,.62)); }
|
|
.class-hall-character h1 { margin: 2px 0; font: 25px Georgia, serif; }
|
|
.class-hall-content { min-height: 0; overflow-y: auto; padding: 14px; border: 1px solid var(--front-line); background: rgba(6,13,15,.72); }
|
|
.class-hall-content h2 { margin: 4px 0 10px; font: 22px Georgia, serif; }
|
|
.class-hall-locked { display: grid; place-items: center; min-height: 100%; text-align: center; }
|
|
.class-hall-locked > span { display: grid; place-items: center; width: 70px; height: 70px; border: 1px solid var(--front-gold); border-radius: 50%; color: var(--front-gold); font: 30px Georgia, serif; }
|
|
.secondary-class-choice > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
|
|
.secondary-class-option { display: grid; grid-template-columns: 34px 1fr; text-align: left; }
|
|
.secondary-class-option b { font: 22px Georgia, serif; }
|
|
.secondary-class-option span { display: flex; flex-direction: column; }
|
|
.class-orientation-card, .elite-milestones { padding: 15px; border: 1px solid var(--front-line); background: rgba(12,22,24,.76); }
|
|
.class-orientation-card h2 span { color: var(--front-gold); }
|
|
.class-orientation-card .front-button { margin-top: 12px; }
|
|
.elite-milestones { margin-top: 10px; }
|
|
.elite-milestones > div { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; margin: 12px 0; }
|
|
.elite-milestones > div span { padding: 7px 3px; border: 1px solid var(--front-line); color: var(--front-dim); text-align: center; }
|
|
.elite-milestones > div span.is-unlocked { border-color: #a88842; color: #f0d99a; background: rgba(150,111,38,.15); }
|
|
.rom-skills-panel { width: min(900px, 94vw); height: min(690px, 91vh); }
|
|
.rom-skills-panel__intro { display: flex; flex-direction: column; margin: 10px 0; color: var(--muted); }
|
|
.rom-skills-panel__intro strong { color: #ead69c; font: 18px Georgia, serif; }
|
|
.rom-skills-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; min-height: 0; overflow-y: auto; }
|
|
.rom-skills-groups > section { min-height: 180px; padding: 10px; border: 1px solid rgba(218,190,121,.18); background: rgba(7,15,14,.72); }
|
|
.rom-skills-groups > section > header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(255,255,255,.08); }
|
|
.rom-skills-groups h3 { margin: 0 0 8px; color: #ead69c; font: 15px Georgia, serif; }
|
|
.rom-skills-groups > section > div { display: grid; gap: 5px; margin-top: 8px; }
|
|
.rom-skill-card { display: grid; grid-template-columns: 32px minmax(0,1fr) auto; align-items: center; gap: 7px; padding: 5px; border: 1px solid rgba(255,255,255,.08); color: #e4e1d1; background: rgba(255,255,255,.025); text-align: left; }
|
|
.rom-skill-card img { width: 30px; height: 30px; object-fit: cover; }
|
|
.rom-skill-card span { display: flex; flex-direction: column; }
|
|
.rom-skill-card small, .rom-skill-card em { color: var(--muted); font-size: 7px; }
|
|
.rom-skill-card.is-locked { opacity: .42; }
|
|
.creator-races { grid-column: 1; grid-row: 3; padding-right: 13px; border-right: 1px solid var(--front-line); overflow-y: auto; scrollbar-width: thin; }
|
|
.creator-classes { grid-column: 3; grid-row: 3; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; padding-left: 13px; border-left: 1px solid var(--front-line); }
|
|
.creator-races > header, .creator-classes > header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
|
|
.creator-races > header > span, .creator-classes > header > span { color: var(--front-gold); font: 20px Georgia, serif; }
|
|
.creator-races > header div, .creator-classes > header div { display: flex; flex-direction: column; }
|
|
.creator-races > header strong, .creator-classes > header strong { font: 15px Georgia, serif; }
|
|
.creator-races > header small, .creator-classes > header small { color: var(--front-dim); font-size: 7px; }
|
|
.race-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
|
|
.race-option { position: relative; display: grid; min-height: 44px; grid-template-columns: 29px 1fr; align-items: center; gap: 6px; padding: 5px; border: 1px solid transparent; border-radius: 7px; background: rgba(255,255,255,.025); color: var(--front-cream); cursor: pointer; text-align: left; }
|
|
.race-option.is-active { border-color: rgba(204,225,172,.3); background: rgba(103,145,82,.18); }
|
|
.race-option > b { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid; border-radius: 50%; font-size: 8px; }
|
|
.race-option > span { font-size: 9px; font-weight: 800; }
|
|
.race-option > small { position: absolute; top: 3px; right: 4px; color: var(--front-dim); font-size: 6px; }
|
|
.gender-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-top: 7px; }
|
|
.gender-picker button { height: 30px; border: 1px solid var(--front-line); border-radius: 6px; background: transparent; color: var(--front-dim); cursor: pointer; font-size: 8px; text-transform: uppercase; }
|
|
.gender-picker button.is-active { background: rgba(107,145,82,.22); color: var(--front-cream); }
|
|
.gender-picker button:disabled { cursor: not-allowed; opacity: .32; }
|
|
.creator-races > p { margin: 8px 2px 0; color: var(--front-dim); font-size: 8px; line-height: 1.4; }
|
|
.creator-preview-stage { grid-column: 2; grid-row: 3; position: relative; min-width: 0; min-height: 0; }
|
|
.preview-rotate { position: absolute; right: 0; bottom: 1px; left: 0; z-index: 3; display: flex; align-items: center; justify-content: center; gap: 8px; }
|
|
.preview-rotate button { width: 30px; height: 27px; border: 1px solid var(--front-line); border-radius: 6px; background: rgba(5,14,10,.7); color: var(--front-cream); cursor: pointer; }
|
|
.preview-rotate span { color: var(--front-dim); font-size: 7px; text-transform: uppercase; }
|
|
.class-grid { display: grid; min-height: 0; grid-template-columns: 1fr 1fr; align-content: start; gap: 5px; padding-right: 4px; overflow-y: auto; scrollbar-color: rgba(151,190,119,.42) transparent; }
|
|
.class-option { position: relative; display: flex; min-height: 45px; align-items: center; gap: 7px; padding: 5px 25px 5px 6px; border: 1px solid transparent; border-radius: 7px; background: rgba(255,255,255,.025); color: var(--front-cream); cursor: pointer; text-align: left; }
|
|
.class-option.is-active { border-color: rgba(204,225,172,.3); background: rgba(103,145,82,.18); }
|
|
.class-option > b { display: grid; min-width: 32px; height: 32px; place-items: center; font-size: 9px; }
|
|
.class-option > b img { display: block; width: 32px; height: 32px; border: 1px solid color-mix(in srgb, currentColor 70%, #fff 30%); border-radius: 5px; object-fit: cover; box-shadow: inset 0 0 0 1px rgba(0,0,0,.72), 0 1px 4px rgba(0,0,0,.58); }
|
|
.class-option > span { display: flex; min-width: 0; flex-direction: column; }
|
|
.class-option > span strong { font-size: 8px; }
|
|
.class-option > span small { overflow: hidden; color: var(--front-dim); font-size: 6px; text-overflow: ellipsis; white-space: nowrap; }
|
|
.class-option > i { position: absolute; top: 4px; right: 4px; color: var(--front-gold); font-size: 5px; font-style: normal; letter-spacing: .08em; text-transform: uppercase; }
|
|
.class-summary { margin: 8px 2px 0; }
|
|
.class-summary strong, .class-summary span { display: block; }
|
|
.class-summary strong { font: 14px Georgia, serif; }
|
|
.class-summary span { margin-top: 2px; color: var(--front-dim); font-size: 8px; line-height: 1.35; }
|
|
.class-summary small { display: block; margin-top: 3px; color: var(--front-gold); font-size: 6px; line-height: 1.35; text-transform: capitalize; }
|
|
.creator-footer { grid-column: 1 / 4; grid-row: 4; display: flex; align-items: center; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--front-line); }
|
|
.creator-footer .front-button { min-width: 145px; }
|
|
/* On one-screen devices the companion launcher occupies the bottom-right corner. */
|
|
.single-display-frame .creator-footer { padding-right: 156px; }
|
|
.single-display-frame .creator-footer .front-button { flex: 0 1 145px; min-width: 0; }
|
|
.character-create-screen > .controller-legend { display: none; }
|
|
.appearance-preview-stage { grid-column: 1; grid-row: 3 / 5; position: relative; min-width: 0; min-height: 0; border-right: 1px solid var(--front-line); }
|
|
.appearance-preview-stage > p { position: absolute; right: 8px; bottom: 13px; left: 8px; display: flex; flex-direction: column; text-align: center; }
|
|
.appearance-preview-stage > p strong { font: 15px Georgia, serif; }
|
|
.appearance-preview-stage > p span { color: var(--front-dim); font-size: 8px; text-transform: uppercase; }
|
|
.appearance-controls { grid-column: 2 / 4; grid-row: 3 / 5; min-height: 0; padding: 15px 8px 8px 22px; overflow: auto; }
|
|
.appearance-controls header h1 { margin: 3px 0; font: 26px Georgia, serif; }
|
|
.appearance-controls header > small { color: var(--front-dim); font-size: 8px; }
|
|
.appearance-controls > input { max-width: 430px; height: 36px; }
|
|
.customization-list { display: grid; max-width: 610px; grid-template-columns: 1fr 1fr; gap: 6px 13px; margin-top: 11px; }
|
|
.customization-row { display: grid; min-height: 42px; grid-template-columns: 94px 27px 1fr 27px; align-items: center; gap: 5px; padding: 5px 7px; border: 1px solid rgba(201,220,178,.1); border-radius: 7px; background: rgba(255,255,255,.02); }
|
|
.customization-row > span { display: flex; min-width: 0; flex-direction: column; }
|
|
.customization-row > span strong { overflow: hidden; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
|
|
.customization-row > span small { color: var(--front-dim); font-size: 7px; }
|
|
.customization-row button { width: 27px; height: 27px; border: 1px solid var(--front-line); border-radius: 5px; background: rgba(131,164,107,.08); color: var(--front-cream); cursor: pointer; }
|
|
.customization-row input[type="range"] { width: 100%; accent-color: var(--front-green); }
|
|
.appearance-actions { display: grid; max-width: 610px; grid-template-columns: 1fr 95px 180px; align-items: center; gap: 8px; margin-top: 10px; }
|
|
|
|
/* Companion / lower Thor screen */
|
|
.companion-panel { display: grid; grid-template-rows: 45px minmax(0, 1fr) 45px; padding: 12px 14px; }
|
|
.companion-panel > header { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--front-line); }
|
|
.companion-panel > header > b { color: var(--front-green-bright); font-size: 7px; letter-spacing: .15em; }
|
|
.companion-panel > main { min-height: 0; overflow: hidden; }
|
|
.companion-panel > footer { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--front-line); color: var(--front-dim); font-size: 7px; letter-spacing: .08em; }
|
|
.companion-login > main { display: grid; align-content: center; padding: 12px 24px; }
|
|
.companion-login h2 { max-width: 390px; margin: 6px 0 15px; font: 28px Georgia, serif; }
|
|
.companion-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
|
|
.companion-feature-grid article { display: flex; min-height: 100px; flex-direction: column; justify-content: space-between; padding: 11px; border: 1px solid var(--front-line); border-radius: 9px; background: rgba(255,255,255,.025); }
|
|
.companion-feature-grid article > b { color: var(--front-gold); font: 18px Georgia, serif; }
|
|
.companion-feature-grid article span { display: flex; flex-direction: column; }
|
|
.companion-feature-grid article strong { font-size: 9px; }
|
|
.companion-feature-grid article small { margin-top: 3px; color: var(--front-dim); font-size: 7px; line-height: 1.35; }
|
|
.companion-roster > main { display: grid; grid-template-columns: 190px 1fr; gap: 11px; padding: 9px 0; }
|
|
.companion-dungeon-browser { display: grid; min-height: 0; grid-template-rows: auto minmax(0, 1fr); gap: 6px; }
|
|
.companion-category-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
|
|
.companion-category-tabs button { display: flex; min-height: 30px; align-items: center; justify-content: space-between; gap: 5px; padding: 5px 7px; border: 1px solid rgba(204,224,180,.13); border-radius: 6px; background: rgba(255,255,255,.025); color: var(--front-cream); cursor: pointer; }
|
|
.companion-category-tabs button.is-active { border-color: rgba(218,192,102,.52); background: rgba(111,126,66,.22); }
|
|
.companion-category-tabs strong { color: var(--front-gold); font: 11px Georgia, serif; font-weight: 400; }
|
|
.companion-category-tabs small { color: var(--front-dim); font-size: 7px; }
|
|
.companion-mini-roster { min-height: 0; overflow: auto; }
|
|
.companion-mini-roster button { display: grid; width: 100%; min-height: 39px; grid-template-columns: 29px 1fr auto; align-items: center; gap: 7px; margin-bottom: 4px; padding: 5px; border: 1px solid transparent; border-radius: 7px; background: rgba(255,255,255,.025); color: var(--front-cream); cursor: pointer; text-align: left; }
|
|
.companion-mini-roster button.is-active { border-color: var(--front-line); background: rgba(99,142,79,.17); }
|
|
.companion-mini-roster button:disabled { cursor: not-allowed; opacity: .42; }
|
|
.companion-mini-roster button > span { display: grid; width: 27px; height: 27px; place-items: center; border: 1px solid var(--front-line); border-radius: 50%; font-size: 7px; }
|
|
.companion-mini-roster button strong { font-size: 9px; }
|
|
.companion-mini-roster button small { color: var(--front-dim); font-size: 7px; }
|
|
.companion-mini-roster > p { color: var(--front-dim); font-size: 9px; }
|
|
.companion-selection-card { display: grid; min-width: 0; grid-template-columns: 145px 1fr; align-items: stretch; border: 1px solid var(--front-line); border-radius: 10px; background: rgba(255,255,255,.02); }
|
|
.companion-selection-card .character-preview { height: 100%; }
|
|
.companion-selection-card dl { align-self: center; padding-right: 12px; }
|
|
.companion-selection-card > p { align-self: center; padding: 16px; color: var(--front-dim); font-size: 9px; line-height: 1.5; }
|
|
.companion-dungeon-role > section { align-self: center; min-width: 0; padding: 10px 12px 10px 4px; }
|
|
.companion-dungeon-role h2 { margin: 3px 0 8px; font: 20px Georgia, serif; font-weight: 400; }
|
|
.companion-role-options { display: grid; gap: 5px; }
|
|
.companion-role-options button { display: flex; min-height: 38px; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; border: 1px solid var(--front-line); border-radius: 6px; background: rgba(126,162,99,.08); color: var(--front-cream); cursor: pointer; text-align: left; }
|
|
.companion-role-options button:hover { background: rgba(126,162,99,.2); }
|
|
.companion-role-options strong { font: 11px Georgia, serif; }
|
|
.companion-role-options small { color: var(--front-dim); font-size: 7px; text-align: right; }
|
|
.companion-actions { gap: 7px; justify-content: flex-end !important; }
|
|
.companion-actions button { min-width: 116px; min-height: 31px; border: 1px solid var(--front-line); border-radius: 6px; background: rgba(126,162,99,.09); color: var(--front-cream); cursor: pointer; font-size: 8px; }
|
|
.companion-actions button:last-child { background: #526f44; }
|
|
.companion-actions button:disabled { opacity: .4; }
|
|
.companion-create > main { display: grid; grid-template-columns: 190px 1fr; align-items: stretch; gap: 14px; padding: 9px 18px; }
|
|
.companion-create main > section { align-self: center; }
|
|
.companion-create h2 { margin: 4px 0 10px; font: 23px Georgia, serif; }
|
|
.companion-character-status { display: grid; grid-template-columns: 34px auto; grid-template-rows: 1fr 1fr; align-items: center; column-gap: 8px; }
|
|
.companion-character-status > span { grid-row: 1 / 3; display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid var(--front-line); border-radius: 50%; font-size: 8px; }
|
|
.companion-character-status strong { align-self: end; font: 13px Georgia, serif; }
|
|
.companion-character-status small { align-self: start; color: var(--front-dim); font-size: 7px; }
|
|
.companion-game { grid-template-rows: 48px minmax(0, 1fr) 48px; }
|
|
.companion-game > main { display: grid; grid-template-columns: 180px 1fr; gap: 10px; padding: 9px 0; }
|
|
.companion-vitals { display: grid; align-content: center; gap: 15px; padding: 10px; border: 1px solid var(--front-line); border-radius: 9px; }
|
|
.companion-vitals > div { display: grid; grid-template-columns: 1fr auto; gap: 4px; }
|
|
.companion-vitals span, .companion-vitals strong { font-size: 8px; }
|
|
.companion-vitals span { color: var(--front-dim); text-transform: uppercase; }
|
|
.companion-vitals i { grid-column: 1 / 3; height: 7px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.08); }
|
|
.companion-vitals i b { display: block; height: 100%; background: linear-gradient(90deg, #5e9b57, #9ad674); }
|
|
.companion-vitals > div:nth-child(2) i b { background: linear-gradient(90deg, #3f73a9, #77b7e3); }
|
|
.companion-vitals .companion-cast { padding: 4px 5px; border: 1px solid rgba(226,199,112,.2); border-radius: 5px; background: rgba(0,0,0,.24); }
|
|
.companion-vitals .companion-cast i b { background: linear-gradient(90deg, #c39a47, #f2dc80); }
|
|
.companion-vitals .companion-cast--channel i b { background: linear-gradient(90deg, #7551a9, #bc8be2); }
|
|
.companion-map-card { display: grid; min-width: 0; grid-template-columns: minmax(180px, 1fr) 132px; overflow: hidden; border: 1px solid var(--front-line); border-radius: 9px; background: #07140f; }
|
|
.companion-map-card svg { width: 100%; height: 100%; min-height: 0; }
|
|
.companion-map-card > div { align-self: center; padding: 8px; }
|
|
.companion-map-card > div span, .companion-map-card > div strong, .companion-map-card > div small { display: block; }
|
|
.companion-map-card > div span { color: var(--front-green-bright); font-size: 7px; text-transform: uppercase; }
|
|
.companion-map-card > div strong { margin: 3px 0; font: 13px Georgia, serif; }
|
|
.companion-map-card > div small { color: var(--front-dim); font-size: 7px; line-height: 1.4; }
|
|
.companion-actions--game button { min-width: 78px; }
|
|
|
|
/* Dedicated native WebViews own separate measured viewports. */
|
|
.native-platform, .native-platform body, .native-platform #root { width: 100%; height: 100%; overscroll-behavior: none; }
|
|
.native-platform .dedicated-display-surface { padding: 0; }
|
|
html[data-display-surface="top"] .single-context-toggle,
|
|
html[data-display-surface="bottom"] .single-context-toggle { display: none; }
|
|
|
|
@media (min-width: 1200px) and (min-height: 700px) {
|
|
.single-context-layer { place-items: stretch end; }
|
|
.single-context-surface { align-self: center; margin-right: 18px; }
|
|
.context-open .single-context-toggle { right: 48px; }
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.character-select-screen { grid-template-columns: 235px 1fr; }
|
|
.roster-header { grid-column: 1 / 3; }
|
|
.roster-details { display: none; }
|
|
.roster-stage-continue { display: flex; }
|
|
.character-select-screen > .controller-legend { grid-column: 1 / 3; }
|
|
.character-create-screen { grid-template-columns: 245px 1fr 270px; }
|
|
.main-menu-screen { grid-template-columns: minmax(225px, 31%) minmax(0, 1fr); column-gap: 16px; }
|
|
.main-menu-mode { min-height: 72px; }
|
|
.dungeon-select-screen { grid-template-columns: 255px minmax(0, 1fr); column-gap: 14px; }
|
|
.dungeon-select-detail { grid-template-columns: minmax(190px, .82fr) minmax(220px, 1.18fr); gap: 13px; }
|
|
}
|
|
|
|
@media (max-width: 760px) {
|
|
.front-surface--top { padding: 11px; }
|
|
.login-screen { display: block; overflow: auto; }
|
|
.login-screen > .front-brand { position: absolute; top: 12px; left: 13px; }
|
|
.login-hero { display: none; }
|
|
.login-form { width: min(390px, calc(100% - 16px)); margin: 48px auto 28px; padding: 18px; }
|
|
.controller-legend { display: none; }
|
|
.character-select-screen { display: grid; grid-template-columns: 43% 57%; grid-template-rows: 48px minmax(0,1fr); }
|
|
.roster-header { grid-column: 1 / 3; }
|
|
.roster-header > div:nth-child(2) strong { font-size: 14px; }
|
|
.roster-header > button { display: none; }
|
|
.roster-list { padding-right: 7px; }
|
|
.roster-character { grid-template-columns: 31px 1fr; }
|
|
.roster-character > span { width: 29px; height: 29px; }
|
|
.roster-character > em { display: none; }
|
|
.roster-stage .character-preview figcaption { bottom: 62px; }
|
|
.character-avatar { transform: perspective(600px) rotateY(var(--avatar-turn)) scale(.78); }
|
|
.main-menu-screen { grid-template-columns: 1fr; grid-template-rows: 48px 86px minmax(0, 1fr); gap: 0; }
|
|
.main-menu-header { grid-column: 1; grid-row: 1; }
|
|
.main-menu-header > div:nth-child(2) strong { font-size: 14px; }
|
|
.main-menu-header > button { padding: 6px 8px; }
|
|
.main-menu-character { grid-column: 1; grid-row: 2; display: grid; grid-template-columns: 86px minmax(0,1fr); grid-template-rows: 1fr; border-right: 0; border-bottom: 1px solid var(--front-line); }
|
|
.main-menu-character__preview { grid-column: 1; }
|
|
.main-menu-character__preview .character-preview__aura { width: 75px; }
|
|
.main-menu-character__summary { grid-column: 2; align-self: center; padding: 7px 8px; border-top: 0; }
|
|
.main-menu-character__summary h1 { font-size: 20px; }
|
|
.main-menu-modes { grid-column: 1; grid-row: 3; padding-top: 10px; }
|
|
.main-menu-modes > header h2 { font-size: 22px; }
|
|
.main-menu-mode-grid { margin-top: 9px; }
|
|
.main-menu-mode { min-height: 64px; }
|
|
.main-menu-mode > span small { display: none; }
|
|
.dungeon-select-screen { grid-template-columns: 40% minmax(0, 60%); grid-template-rows: 48px minmax(0,1fr); column-gap: 10px; }
|
|
.dungeon-select-header { grid-column: 1 / 3; }
|
|
.dungeon-select-header > div:nth-child(2) strong { font-size: 14px; }
|
|
.dungeon-select-header > p { display: none; }
|
|
.dungeon-select-list { padding: 11px 9px 7px 0; }
|
|
.dungeon-select-list > header h1 { margin-bottom: 6px; font-size: 21px; }
|
|
.dungeon-select-list > header > small { bottom: 9px; }
|
|
.dungeon-select-row { min-height: 57px; grid-template-columns: 25px minmax(0,1fr); }
|
|
.dungeon-select-row > em { display: none; }
|
|
.dungeon-select-detail { grid-template-columns: 1fr; padding: 11px 0 7px; }
|
|
.dungeon-select-map { display: none; }
|
|
.dungeon-select-copy { padding: 4px 2px; }
|
|
.dungeon-select-copy h2 { font-size: 23px; }
|
|
.dungeon-select-copy dl div { padding: 4px 0; }
|
|
.dungeon-role-option { min-height: 49px; }
|
|
.dungeon-role-option > span small { display: none; }
|
|
.manastorm-select-content { grid-template-columns: 42% minmax(0, 58%); gap: 11px; padding-top: 12px; }
|
|
.manastorm-select-intro { padding: 13px; }
|
|
.manastorm-select-intro h1 { font-size: 25px; }
|
|
.manastorm-select-intro > p:not(.front-kicker) { font-size: 8px; }
|
|
.manastorm-role-select > header h2 { font-size: 21px; }
|
|
.character-create-screen { grid-template-columns: 42% 58%; grid-template-rows: 47px 3px minmax(0,1fr) 53px; }
|
|
.creator-header { grid-column: 1 / 3; }
|
|
.creator-progress { grid-column: 1 / 3; }
|
|
.creator-races { grid-column: 1; }
|
|
.creator-preview-stage { display: none; }
|
|
.creator-classes { grid-column: 2; }
|
|
.creator-footer { grid-column: 1 / 3; }
|
|
.appearance-preview-stage { display: none; }
|
|
.appearance-controls { grid-column: 1 / 3; padding-left: 8px; }
|
|
.customization-list { grid-template-columns: 1fr; }
|
|
.single-context-surface { border-radius: 10px; }
|
|
}
|
|
|
|
@media (max-width: 520px) {
|
|
.main-menu-header .front-brand small, .main-menu-header .front-brand strong,
|
|
.dungeon-select-header .front-brand small, .dungeon-select-header .front-brand strong,
|
|
.manastorm-select-header .front-brand small, .manastorm-select-header .front-brand strong { display: none; }
|
|
.main-menu-header .front-brand, .dungeon-select-header .front-brand, .manastorm-select-header .front-brand { gap: 0; }
|
|
.main-menu-mode-grid { grid-template-columns: 1fr; }
|
|
.main-menu-mode { min-height: 58px; }
|
|
.dungeon-select-screen { grid-template-columns: 1fr; grid-template-rows: 48px minmax(150px, 42%) minmax(0,58%); gap: 0; }
|
|
.dungeon-select-header { grid-column: 1; grid-row: 1; }
|
|
.dungeon-select-list { grid-column: 1; grid-row: 2; padding-right: 0; border-right: 0; border-bottom: 1px solid var(--front-line); }
|
|
.dungeon-select-list > header { display: none; }
|
|
.dungeon-select-list__items { padding-right: 2px; }
|
|
.dungeon-select-row { min-height: 52px; }
|
|
.dungeon-select-back { min-height: 34px; }
|
|
.dungeon-select-detail { grid-column: 1; grid-row: 3; padding: 9px 0 0; }
|
|
.dungeon-select-copy dl { display: none; }
|
|
.dungeon-role-picker { gap: 5px; }
|
|
.dungeon-role-picker > header h3 { font-size: 18px; }
|
|
.dungeon-role-picker > header > small { display: none; }
|
|
.dungeon-role-picker__options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
|
.dungeon-role-option { display: flex; min-height: 44px; justify-content: center; padding: 5px; }
|
|
.dungeon-role-option > b { width: 25px; height: 25px; font-size: 13px; }
|
|
.dungeon-role-option > span small { display: none; }
|
|
.manastorm-select-header > p { display: none; }
|
|
.manastorm-select-content { grid-template-columns: 1fr; grid-template-rows: auto minmax(0,1fr); gap: 7px; padding: 9px 0 0; }
|
|
.manastorm-select-intro { padding: 9px 12px; }
|
|
.manastorm-select-intro h1 { margin-block: 2px 4px; font-size: 21px; }
|
|
.manastorm-select-intro > p:not(.front-kicker) { margin-block: 3px; line-height: 1.4; }
|
|
.manastorm-select-intro dl { display: none; }
|
|
.manastorm-role-select { padding: 5px 0; }
|
|
.manastorm-role-select > header small { display: none; }
|
|
.manastorm-role-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin-top: 7px; }
|
|
.manastorm-role-grid .dungeon-role-option { display: flex; min-height: 44px; justify-content: center; padding: 5px; }
|
|
}
|
|
|
|
@media (pointer: coarse) {
|
|
.main-menu-mode, .dungeon-category-tab, .dungeon-select-row, .dungeon-select-back, .dungeon-select-enter, .dungeon-role-option, .manastorm-select-back { min-height: 48px; }
|
|
}
|
|
|
|
@media (max-height: 500px) {
|
|
.login-form { padding: 16px 20px; }
|
|
.login-form header { margin-bottom: 8px; }
|
|
.login-form__actions { grid-template-columns: 1fr 1fr 1fr; }
|
|
.login-form__actions .front-button { min-width: 0; }
|
|
.login-form__actions small { display: none; }
|
|
}
|
|
|
|
.world-transition {
|
|
display: grid;
|
|
width: 100%;
|
|
height: 100%;
|
|
place-content: center;
|
|
justify-items: center;
|
|
gap: 8px;
|
|
background: radial-gradient(circle, rgba(79,128,76,.28), transparent 28%), #06100c;
|
|
color: var(--front-cream);
|
|
}
|
|
.world-transition span { display: grid; width: 58px; height: 58px; margin-bottom: 9px; place-items: center; border: 1px solid var(--front-line); border-radius: 50%; color: var(--front-green-bright); font: 16px Georgia, serif; }
|
|
.world-transition strong { font: 23px Georgia, serif; }
|
|
.world-transition small { color: var(--front-dim); }
|
|
|
|
/* Tactical lower-screen gameplay surface */
|
|
.companion-game { grid-template-rows: 48px minmax(0, 1fr) 66px; }
|
|
.companion-game > main.companion-tactical { grid-template-columns: 180px minmax(0, 1fr); grid-template-rows: 74px minmax(0, 1fr) 128px; gap: 8px; }
|
|
.companion-party-strip { grid-column: 1 / 3; min-width: 0; padding: 5px 6px; border: 1px solid rgba(191,210,158,.14); border-radius: 8px; background: rgba(0,0,0,.18); }
|
|
.companion-party-strip > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 14px; }
|
|
.companion-party-strip > header strong { color: #dceacb; font-size: 7px; letter-spacing: .08em; text-transform: uppercase; }
|
|
.companion-party-strip > header small { color: var(--front-dim); font-size: 6px; }
|
|
.companion-party-strip > div { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin-top: 3px; }
|
|
.companion-party-strip button { position: relative; display: grid; min-width: 0; height: 43px; grid-template-columns: 24px minmax(0, 1fr); grid-template-rows: 1fr 6px; align-items: center; gap: 2px 5px; padding: 3px 4px; border: 1px solid rgba(198,216,169,.14); border-radius: 5px; background: rgba(255,255,255,.025); color: var(--front-cream); cursor: pointer; text-align: left; }
|
|
.companion-party-strip button.is-selected { border-color: rgba(231,207,105,.7); background: rgba(115,104,42,.22); }
|
|
.companion-party-strip button.is-down { opacity: .5; filter: grayscale(.7); }
|
|
.companion-party-strip button > b { display: grid; width: 23px; height: 23px; grid-row: 1; place-items: center; border: 1px solid var(--party-class-color, #789b68); border-radius: 50%; background: rgba(0,0,0,.25); font-size: 6px; }
|
|
.companion-party-strip button > span { display: flex; min-width: 0; flex-direction: column; }
|
|
.companion-party-strip button > span strong, .companion-party-strip button > span small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.companion-party-strip button > span strong { font-size: 7px; }
|
|
.companion-party-strip button > span small { color: var(--front-dim); font-size: 5px; }
|
|
.companion-party-strip button > i { grid-column: 1 / 3; display: block; height: 5px; overflow: hidden; border-radius: 3px; background: rgba(0,0,0,.66); }
|
|
.companion-party-strip button > i span { display: block; height: 100%; background: linear-gradient(90deg, #3d7a42, #7abd5e); }
|
|
.companion-tactical__status { position: relative; padding: 8px; }
|
|
.companion-tactical__status .experience-bar { position: relative; right: auto; bottom: auto; left: auto; width: 100%; height: 15px; flex: 0 0 auto; }
|
|
.companion-tactical__status .experience-bar__label { gap: 4px; font-size: 6px; }
|
|
.companion-tactical__actions { position: relative; overflow: visible; }
|
|
.companion-tactical__actions .action-bar { position: relative; bottom: auto; left: auto; width: 100%; transform: none; scale: none; }
|
|
.companion-tactical__actions .action-bar--compact { --action-slot-size: 28px; max-width: 290px; margin: 16px auto 0; }
|
|
.companion-tactical__actions .action-bar--compact .action-bar__layer-status { margin-bottom: 2px; }
|
|
.companion-tactical__actions .action-bar--compact .action-bar__layer-status span { min-width: 31px; padding: 1px 4px; font-size: 5px; }
|
|
.companion-tactical__actions .action-bar--compact .action-bar__controller { min-height: 88px; grid-template-columns: 66px 76px 88px; gap: 3px; padding: 2px 4px; border-radius: 21px 21px 9px 9px; }
|
|
.companion-tactical__actions .action-bar--compact .action-cluster--face { width: 88px; height: 88px; gap: 2px; }
|
|
.companion-tactical__actions .action-bar--compact .action-cluster--dpad { grid-template-columns: 28px 10px 28px; padding-bottom: 18px; }
|
|
.companion-tactical__actions .action-bar--compact .action-cluster__dpad-center { width: 10px; font-size: 9px; }
|
|
.companion-tactical__actions .action-bar--compact .action-cluster--shoulders { grid-template-columns: repeat(2, 36px); gap: 2px; padding-top: 2px; }
|
|
.companion-tactical__actions .action-bar--compact .action-cluster--shoulders .action-slot { width: 36px; min-width: 36px; }
|
|
.companion-tactical__actions .action-bar--compact .action-cluster--shoulders::after { height: 24px; margin: 2px 9px 0; }
|
|
.companion-tactical__actions .action-bar--compact .action-slot__icon { width: 20px; height: 20px; }
|
|
.companion-tactical__actions .action-bar--compact .action-slot__binding { min-width: 11px; height: 11px; font-size: 5px; }
|
|
.companion-tactical__actions .action-bar--compact .action-bar__detail { width: 70px; margin-bottom: 11px; padding: 2px 3px; }
|
|
.companion-tactical__actions .action-bar--compact .action-bar__detail strong { font-size: 6px; }
|
|
.companion-tactical__actions .action-bar--compact .action-bar__detail span { font-size: 5px; }
|
|
.companion-tactical__actions .action-bar--compact .action-slot__target { font-size: 3px; }
|
|
.companion-tactical__actions .action-bar__feedback { min-height: 15px; overflow: hidden; padding-bottom: 2px; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
|
|
.companion-target { padding: 7px; border: 1px solid rgba(191,210,158,.14); border-radius: 7px; background: rgba(0,0,0,.2); }
|
|
.companion-target > header { display: block; height: auto; padding: 0; border: 0; }
|
|
.companion-target > header span, .companion-target > header strong { display: block; }
|
|
.companion-target > header span { color: var(--front-dim); font-size: 6px; letter-spacing: .08em; text-transform: uppercase; }
|
|
.companion-target > header strong { margin-top: 2px; overflow: hidden; font: 11px Georgia, serif; text-overflow: ellipsis; white-space: nowrap; }
|
|
.companion-target__track { height: 6px; margin: 5px 0 3px; overflow: hidden; border-radius: 3px; background: rgba(0,0,0,.6); }
|
|
.companion-target__track span { display: block; height: 100%; background: linear-gradient(90deg, #84352e, #ca6248); }
|
|
.companion-target > small { display: block; overflow: hidden; color: var(--front-dim); font-size: 6px; text-overflow: ellipsis; white-space: nowrap; }
|
|
.companion-target--boss { border-color: rgba(224,176,80,.35); }
|
|
.companion-target--dead { opacity: .55; }
|
|
.companion-target__actions { display: flex; gap: 4px; margin-top: 5px; }
|
|
.companion-target__actions button { flex: 1; min-height: 24px; border: 1px solid var(--front-line); border-radius: 5px; background: rgba(139,183,112,.08); color: var(--front-cream); font-size: 7px; }
|
|
.companion-menu-grid { display: grid; grid-template-columns: repeat(9, 1fr); gap: 4px; padding-top: 7px; }
|
|
.companion-actions--game.companion-menu-grid button { min-width: 0; padding: 0 3px; font-size: 7px; }
|
|
.companion-menu-grid button.is-active { border-color: rgba(198,226,146,.48); background: rgba(102,151,76,.35); color: #f4ffe1; }
|
|
|
|
@media (max-width: 560px) {
|
|
.companion-game > main.companion-tactical { grid-template-columns: 155px minmax(0, 1fr); }
|
|
.companion-menu-grid { gap: 2px; }
|
|
.companion-actions--game.companion-menu-grid button { font-size: 6px; }
|
|
}
|
|
|
|
/* Keep the controller readable on unusually narrow browser windows. */
|
|
@media (max-width: 460px) {
|
|
.hud-bottom-stack > .action-bar { --action-slot-size: 32px; width: 292px; }
|
|
.hud-bottom-stack > .control-hint { max-width: 292px; }
|
|
.hud-bottom-stack .action-bar__controller { min-height: 100px; grid-template-columns: 80px 90px 100px; gap: 3px; padding: 3px 4px; }
|
|
.hud-bottom-stack .action-cluster--face { width: 100px; height: 100px; }
|
|
.hud-bottom-stack .action-cluster--dpad { grid-template-columns: 32px 14px 32px; padding-bottom: 18px; }
|
|
.hud-bottom-stack .action-cluster__dpad-center { width: 14px; }
|
|
.hud-bottom-stack .action-cluster--shoulders { grid-template-columns: repeat(2, 43px); gap: 3px; }
|
|
.hud-bottom-stack .action-cluster--shoulders .action-slot { width: 43px; min-width: 43px; }
|
|
.hud-bottom-stack .action-bar__detail { width: 82px; margin-bottom: 14px; }
|
|
}
|
|
|
|
@media (max-width: 360px) {
|
|
.hud-bottom-stack > .action-bar { --action-slot-size: 28px; width: 252px; }
|
|
.hud-bottom-stack > .control-hint { max-width: 252px; }
|
|
.hud-bottom-stack .action-bar__controller { min-height: 88px; grid-template-columns: 70px 78px 88px; gap: 3px; padding: 2px 4px; }
|
|
.hud-bottom-stack .action-cluster--face { width: 88px; height: 88px; }
|
|
.hud-bottom-stack .action-cluster--dpad { grid-template-columns: 28px 14px 28px; padding-bottom: 16px; }
|
|
.hud-bottom-stack .action-cluster--shoulders { grid-template-columns: repeat(2, 38px); gap: 2px; }
|
|
.hud-bottom-stack .action-cluster--shoulders .action-slot { width: 38px; min-width: 38px; }
|
|
.hud-bottom-stack .action-bar__detail { width: 70px; margin-bottom: 11px; padding-inline: 3px; }
|
|
.hud-bottom-stack .action-bar__detail strong { font-size: 6px; }
|
|
.hud-bottom-stack .action-bar__detail span { font-size: 5px; }
|
|
}
|
|
|
|
@media (pointer: coarse) {
|
|
.hud-bottom-stack { scale: 1; }
|
|
.hud-bottom-stack > .action-bar { --action-slot-size: 44px; width: min(400px, calc(100vw - 16px)); }
|
|
.hud-bottom-stack > .control-hint { max-width: min(400px, calc(100vw - 16px)); }
|
|
.hud-bottom-stack .action-bar__controller { min-height: 144px; grid-template-columns: 106px 122px 136px; gap: 5px; padding: 3px 5px; }
|
|
.hud-bottom-stack .action-cluster--face { width: 136px; height: 136px; }
|
|
.hud-bottom-stack .action-cluster--dpad { grid-template-columns: 44px 18px 44px; padding-bottom: 25px; }
|
|
.hud-bottom-stack .action-cluster--shoulders { grid-template-columns: repeat(2, 58px); gap: 4px; }
|
|
.hud-bottom-stack .action-cluster--shoulders .action-slot { width: 58px; min-width: 58px; }
|
|
.hud-bottom-stack .action-slot__icon { width: 30px; height: 30px; }
|
|
.hud-bottom-stack .action-bar__detail { width: 112px; margin-bottom: 24px; }
|
|
|
|
.companion-game > main.companion-tactical { grid-template-rows: 74px minmax(0, 1fr) 176px; }
|
|
.companion-tactical__actions .action-bar--compact { --action-slot-size: 44px; max-width: 400px; }
|
|
.companion-tactical__actions .action-bar--compact .action-bar__controller { min-height: 144px; grid-template-columns: 106px 122px 136px; gap: 5px; padding: 3px 5px; }
|
|
.companion-tactical__actions .action-bar--compact .action-cluster--face { width: 136px; height: 136px; }
|
|
.companion-tactical__actions .action-bar--compact .action-cluster--dpad { grid-template-columns: 44px 18px 44px; padding-bottom: 25px; }
|
|
.companion-tactical__actions .action-bar--compact .action-cluster__dpad-center { width: 18px; font-size: 12px; }
|
|
.companion-tactical__actions .action-bar--compact .action-cluster--shoulders { grid-template-columns: repeat(2, 58px); gap: 4px; }
|
|
.companion-tactical__actions .action-bar--compact .action-cluster--shoulders .action-slot { width: 58px; min-width: 58px; }
|
|
.companion-tactical__actions .action-bar--compact .action-slot__icon { width: 30px; height: 30px; }
|
|
.companion-tactical__actions .action-bar--compact .action-slot__binding { min-width: 15px; height: 15px; font-size: 8px; }
|
|
.companion-tactical__actions .action-bar--compact .action-bar__detail { width: 112px; margin-bottom: 24px; padding: 3px 5px; }
|
|
.companion-tactical__actions .action-bar--compact .action-bar__detail strong { font-size: 8px; }
|
|
.companion-tactical__actions .action-bar--compact .action-bar__detail span { font-size: 6px; }
|
|
}
|
|
|
|
@media (max-width: 400px) and (pointer: coarse) {
|
|
.hud-bottom-stack > .action-bar { width: 252px; }
|
|
.hud-bottom-stack > .control-hint { max-width: 252px; }
|
|
.hud-bottom-stack .action-bar__controller { min-height: 191px; grid-template-columns: 106px 136px; grid-template-rows: 44px 136px; gap: 3px 2px; padding: 3px; }
|
|
.hud-bottom-stack .action-cluster--shoulders { grid-column: 1 / 3; grid-row: 1; align-self: start; justify-self: center; padding-top: 0; }
|
|
.hud-bottom-stack .action-cluster--shoulders::after { display: none; }
|
|
.hud-bottom-stack .action-cluster--dpad { grid-column: 1; grid-row: 2; align-self: center; padding-bottom: 0; }
|
|
.hud-bottom-stack .action-cluster--face { grid-column: 2; grid-row: 2; }
|
|
.hud-bottom-stack .action-bar__detail { display: none; }
|
|
}
|
|
|
|
@media (max-width: 620px), (max-height: 560px) {
|
|
.manastorm-status { top: 6px; min-width: 190px; padding: 4px 8px 4px 5px; }
|
|
.manastorm-status > div { width: 34px; height: 34px; flex-basis: 34px; }
|
|
.manastorm-status > div strong { font-size: 14px; }
|
|
.manastorm-status > p b { font-size: 9px; }
|
|
.manastorm-status > p small { font-size: 5px; }
|
|
.manastorm-objective { top: 49px; padding-block: 3px; }
|
|
.manastorm-client-overlay { top: 76px; }
|
|
.manastorm-countdown { min-width: 66px; padding-block: 4px; }
|
|
.manastorm-safety-bubble { width: 156px; padding-block: 4px 5px; }
|
|
.hud:has(.manastorm-client-overlay) .manastorm-cache-open { top: 120px; }
|
|
}
|
|
|
|
@media (max-width: 390px) {
|
|
.manastorm-status { left: 8px; min-width: 0; max-width: calc(100vw - 116px); transform: none; }
|
|
.manastorm-status > p small { overflow: hidden; max-width: 145px; text-overflow: ellipsis; white-space: nowrap; }
|
|
.manastorm-objective { top: 49px; left: 8px; max-width: calc(100vw - 116px); transform: none; }
|
|
.manastorm-client-overlay { right: 8px; left: auto; max-width: calc(100vw - 16px); transform: none; }
|
|
}
|
|
|
|
/* Shared loot inventory and party equipment */
|
|
.manastorm-objective--awaiting-loot {
|
|
border-color: rgba(232, 194, 96, .56);
|
|
box-shadow: 0 0 18px rgba(224, 166, 54, .13);
|
|
font-family: inherit;
|
|
cursor: pointer;
|
|
}
|
|
.manastorm-objective--awaiting-loot:hover,
|
|
.manastorm-objective--awaiting-loot:focus-visible {
|
|
border-color: rgba(255, 224, 133, .9);
|
|
background: rgba(42, 30, 12, .92);
|
|
}
|
|
|
|
.equipment-panel { width: min(1120px, 100%); max-height: calc(100vh - 28px); overflow: hidden; }
|
|
.equipment-panel__summary { display: grid; grid-template-columns: auto auto 1px auto auto; align-items: baseline; gap: 4px; color: var(--muted); font-size: 7px; text-transform: uppercase; }
|
|
.equipment-panel__summary strong { color: #e7d491; font: 700 14px Georgia, serif; }
|
|
.equipment-panel__summary i { width: 1px; height: 19px; margin: 0 5px; background: rgba(216,226,194,.15); }
|
|
.equipment-panel__owners { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin: 10px 0; }
|
|
.equipment-owner {
|
|
display: grid;
|
|
min-width: 0;
|
|
min-height: 48px;
|
|
grid-template-columns: 31px minmax(0, 1fr) auto;
|
|
align-items: center;
|
|
gap: 7px;
|
|
padding: 6px;
|
|
border: 1px solid rgba(190,210,157,.13);
|
|
border-radius: 7px;
|
|
background: rgba(152,181,122,.04);
|
|
color: var(--ink);
|
|
text-align: left;
|
|
cursor: pointer;
|
|
}
|
|
.equipment-owner:hover, .equipment-owner.is-active { border-color: color-mix(in srgb, var(--equipment-class-color) 70%, #ded5a3); background: color-mix(in srgb, var(--equipment-class-color) 15%, transparent); }
|
|
.equipment-owner > b { display: grid; width: 29px; height: 29px; place-items: center; border: 1px solid var(--equipment-class-color); border-radius: 50%; font: 700 9px Georgia, serif; }
|
|
.equipment-owner > span { min-width: 0; }
|
|
.equipment-owner strong, .equipment-owner small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.equipment-owner strong { font-size: 9px; }
|
|
.equipment-owner small { margin-top: 2px; color: var(--muted); font-size: 6px; text-transform: capitalize; }
|
|
.equipment-owner > em { color: #d8c478; font: 700 12px Georgia, serif; font-style: normal; }
|
|
|
|
.equipment-panel__body { display: grid; min-height: 0; height: min(430px, calc(100vh - 190px)); grid-template-columns: minmax(250px, .9fr) minmax(300px, 1.15fr) minmax(215px, .75fr); gap: 10px; }
|
|
.equipment-loadout, .equipment-inventory, .equipment-details { min-width: 0; min-height: 0; padding: 10px; border: 1px solid rgba(210,188,119,.15); border-radius: 9px; background: rgba(12,18,12,.5); }
|
|
.equipment-loadout > header, .equipment-inventory > header { display: flex; align-items: end; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
|
|
.equipment-loadout > header span, .equipment-inventory > header span { display: flex; flex-direction: column; }
|
|
.equipment-loadout > header small, .equipment-inventory > header small { color: var(--muted); font-size: 6px; letter-spacing: .08em; text-transform: uppercase; }
|
|
.equipment-loadout > header strong, .equipment-inventory > header strong { font: 15px Georgia, serif; }
|
|
.equipment-loadout > header > b, .equipment-inventory > header > b { color: #c8b66f; font-size: 7px; text-transform: uppercase; }
|
|
.equipment-stat-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; margin-bottom: 4px; }
|
|
.equipment-stat-tabs button { padding: 4px 3px; border: 1px solid rgba(216,196,121,.13); border-radius: 4px; background: rgba(197,169,87,.04); color: var(--muted); font-size: 6px; letter-spacing: .05em; text-transform: uppercase; cursor: pointer; }
|
|
.equipment-stat-tabs button:hover, .equipment-stat-tabs button.is-active { border-color: rgba(223,196,105,.48); background: rgba(197,169,87,.13); color: #ead68e; }
|
|
.equipment-character-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 7px; margin: 0 0 4px; padding: 6px; border: 1px solid rgba(216,196,121,.13); border-radius: 5px; background: rgba(197,169,87,.045); }
|
|
.equipment-character-stats > div { display: flex; min-width: 0; justify-content: space-between; gap: 4px; padding: 2px 0; border-bottom: 1px solid rgba(255,255,255,.035); }
|
|
.equipment-character-stats dt { overflow: hidden; color: var(--muted); font-size: 5px; letter-spacing: .03em; text-overflow: ellipsis; white-space: nowrap; }
|
|
.equipment-character-stats dd { margin: 0; color: #ead68e; font: 700 7px Georgia, serif; white-space: nowrap; }
|
|
.equipment-character-vitals { display: flex; justify-content: space-between; gap: 6px; margin-bottom: 6px; color: var(--muted); font-size: 5px; }
|
|
.equipment-character-vitals strong { color: #9fd184; font-size: 6px; }
|
|
.equipment-loadout__slots { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; overflow: auto; max-height: calc(100% - 153px); padding-right: 2px; }
|
|
.equipment-slot {
|
|
display: flex;
|
|
min-width: 0;
|
|
min-height: 38px;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 5px;
|
|
padding: 5px 6px;
|
|
border: 1px solid rgba(178,193,151,.12);
|
|
border-left: 3px solid var(--item-quality, rgba(178,193,151,.18));
|
|
border-radius: 5px;
|
|
background: rgba(255,255,255,.025);
|
|
color: var(--ink);
|
|
text-align: left;
|
|
}
|
|
button.equipment-slot { cursor: pointer; }
|
|
button.equipment-slot:hover { background: rgba(174,191,131,.1); }
|
|
.equipment-slot > span { min-width: 0; }
|
|
.equipment-slot small, .equipment-slot strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.equipment-slot small { color: var(--muted); font-size: 5px; letter-spacing: .06em; text-transform: uppercase; }
|
|
.equipment-slot strong { margin-top: 2px; font-size: 7px; }
|
|
.equipment-slot > em { color: #c6b77f; font-size: 5px; font-style: normal; text-transform: uppercase; }
|
|
.equipment-slot.is-empty { opacity: .48; border-left-color: rgba(178,193,151,.12); }
|
|
|
|
.equipment-inventory__list { display: grid; align-content: start; gap: 5px; overflow: auto; max-height: calc(100% - 35px); padding-right: 3px; }
|
|
.equipment-item {
|
|
display: grid;
|
|
min-width: 0;
|
|
min-height: 56px;
|
|
grid-template-columns: 34px minmax(0, 1fr) auto;
|
|
align-items: center;
|
|
gap: 7px;
|
|
padding: 6px;
|
|
border: 1px solid rgba(190,210,157,.13);
|
|
border-left: 3px solid var(--item-quality, #839270);
|
|
border-radius: 6px;
|
|
background: rgba(152,181,122,.035);
|
|
color: var(--ink);
|
|
text-align: left;
|
|
cursor: pointer;
|
|
}
|
|
.equipment-item:hover, .equipment-item.is-inspected { background: rgba(152,181,122,.1); }
|
|
.equipment-item.is-incompatible { opacity: .62; }
|
|
.equipment-item > b, .equipment-details__icon { display: grid; place-items: center; border: 1px solid var(--item-quality, #839270); border-radius: 6px; background: color-mix(in srgb, var(--item-quality, #839270) 18%, #08120d); color: #f1f0d8; font: 700 9px Georgia, serif; }
|
|
.equipment-item > b { width: 32px; height: 32px; }
|
|
.equipment-item > span { min-width: 0; }
|
|
.equipment-item strong, .equipment-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.equipment-item strong { font-size: 9px; }
|
|
.equipment-item small { margin-top: 3px; color: var(--muted); font-size: 6px; }
|
|
.equipment-item .equipment-item__stats { color: #9fd184; }
|
|
.equipment-item > em { max-width: 72px; overflow: hidden; color: #c8b66f; font-size: 6px; font-style: normal; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
|
|
|
|
.equipment-details { overflow: auto; background: rgba(22,20,12,.4); }
|
|
.equipment-details__icon { width: 48px; height: 48px; }
|
|
.equipment-details > p:not(.eyebrow) { color: var(--muted); font-size: 10px; line-height: 1.45; }
|
|
.equipment-details dl { margin: 12px 0; }
|
|
.equipment-details dl div { display: flex; justify-content: space-between; gap: 8px; padding: 5px 0; border-top: 1px solid rgba(255,255,255,.06); font-size: 8px; }
|
|
.equipment-details dd { margin: 0; color: #e6d293; text-align: right; }
|
|
.equipment-details__stats { padding: 5px 8px; border: 1px solid rgba(127,180,94,.2); border-radius: 6px; background: rgba(79,125,53,.09); }
|
|
.equipment-details .equipment-details__stats div:first-child { border-top: 0; }
|
|
.equipment-details__stats dd { color: #a9de86; font-weight: 700; }
|
|
.equipment-details__stats dd.is-beneficial { color: #72d56a; }
|
|
.equipment-details__stats dd small { color: var(--muted); font-size: 6px; font-weight: 400; }
|
|
.equipment-details__provenance { margin-top: 8px !important; }
|
|
.equipment-details__feedback { margin-top: 9px; padding: 6px; border-radius: 5px; background: rgba(111,148,81,.12); }
|
|
.equipment-details__feedback.is-error { background: rgba(157,67,49,.17); color: #f0aa94 !important; }
|
|
.equipment-quality--common { --item-quality: #b9b9b0; }
|
|
.equipment-quality--uncommon { --item-quality: #79c65d; }
|
|
.equipment-quality--rare { --item-quality: #62a7e8; }
|
|
.equipment-quality--epic { --item-quality: #aa76e8; }
|
|
.equipment-quality--legendary { --item-quality: #e9a240; }
|
|
|
|
@media (max-width: 820px) {
|
|
.equipment-panel__owners { grid-template-columns: repeat(5, minmax(70px, 1fr)); overflow-x: auto; }
|
|
.equipment-owner { grid-template-columns: 27px minmax(0, 1fr); }
|
|
.equipment-owner > em { display: none; }
|
|
.equipment-panel__body { grid-template-columns: minmax(220px, .9fr) minmax(280px, 1.1fr); }
|
|
.equipment-details { display: none; }
|
|
}
|
|
|
|
@media (max-width: 560px) {
|
|
.equipment-panel { overflow: auto; }
|
|
.equipment-panel__summary { display: none; }
|
|
.equipment-panel__owners { grid-template-columns: repeat(5, 92px); }
|
|
.equipment-panel__body { height: auto; grid-template-columns: 1fr; }
|
|
.equipment-loadout__slots, .equipment-inventory__list { max-height: 235px; }
|
|
.equipment-panel .game-panel__footer { position: sticky; bottom: 0; background: rgba(5,14,10,.96); }
|
|
}
|
|
.naralex-event-prompt {
|
|
display: grid;
|
|
min-width: 9.5rem;
|
|
gap: 0.25rem;
|
|
padding: 0.4rem 0.55rem;
|
|
border: 1px solid rgb(185 214 122 / 55%);
|
|
border-radius: 0.45rem;
|
|
color: #f4f0d6;
|
|
background: rgb(7 17 13 / 88%);
|
|
font-size: 0.72rem;
|
|
text-align: center;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.naralex-event-prompt small {
|
|
color: #b9d67a;
|
|
}
|
|
|
|
.naralex-event-prompt button {
|
|
padding: 0.3rem 0.45rem;
|
|
border: 1px solid #91ae5f;
|
|
border-radius: 0.35rem;
|
|
color: #11190e;
|
|
background: #b9d67a;
|
|
font: inherit;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.content-manager-screen {
|
|
display: grid;
|
|
grid-template-rows: auto minmax(0, 1fr);
|
|
min-height: 100%;
|
|
}
|
|
|
|
.content-manager-header {
|
|
display: grid;
|
|
grid-template-columns: auto 1fr auto;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
padding: 1rem 1.5rem;
|
|
border-bottom: 1px solid rgba(172, 208, 157, 0.2);
|
|
}
|
|
|
|
.content-manager-header div,
|
|
.content-pack-row div {
|
|
display: grid;
|
|
gap: 0.2rem;
|
|
}
|
|
|
|
.content-manager-header span,
|
|
.content-pack-row small,
|
|
.content-manager-summary small {
|
|
color: var(--text-muted, #aab7a6);
|
|
}
|
|
|
|
.content-manager-main {
|
|
display: grid;
|
|
grid-template-columns: minmax(17rem, 0.75fr) minmax(24rem, 1.4fr);
|
|
gap: 1.25rem;
|
|
min-height: 0;
|
|
padding: 1.25rem;
|
|
}
|
|
|
|
.content-manager-summary,
|
|
.content-manager-packs {
|
|
min-height: 0;
|
|
padding: 1.25rem;
|
|
border: 1px solid rgba(172, 208, 157, 0.2);
|
|
background: rgba(4, 12, 9, 0.78);
|
|
}
|
|
|
|
.content-manager-summary__actions {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 0.75rem;
|
|
margin-top: 1.25rem;
|
|
}
|
|
|
|
.content-manager-packs {
|
|
display: grid;
|
|
align-content: start;
|
|
gap: 0.65rem;
|
|
overflow: auto;
|
|
}
|
|
|
|
.content-pack-row {
|
|
display: grid;
|
|
grid-template-columns: minmax(12rem, 1fr) minmax(10rem, auto) auto;
|
|
align-items: center;
|
|
gap: 0.8rem;
|
|
padding: 0.8rem 0.9rem;
|
|
border: 1px solid rgba(172, 208, 157, 0.14);
|
|
background: rgba(13, 27, 20, 0.72);
|
|
}
|
|
|
|
.content-pack-row > span {
|
|
color: #d8b67c;
|
|
font-size: 0.78rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
}
|
|
|
|
.content-pack-row > span.is-installed {
|
|
color: #9ed19d;
|
|
}
|
|
|
|
.content-manager-progress {
|
|
position: relative;
|
|
height: 1.35rem;
|
|
margin-top: 1rem;
|
|
overflow: hidden;
|
|
border: 1px solid rgba(172, 208, 157, 0.3);
|
|
background: #07110d;
|
|
}
|
|
|
|
.content-manager-progress span {
|
|
display: block;
|
|
height: 100%;
|
|
background: linear-gradient(90deg, #4e8f64, #92c889);
|
|
transition: width 120ms linear;
|
|
}
|
|
|
|
.content-manager-progress small {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: grid;
|
|
place-items: center;
|
|
color: #fff;
|
|
text-shadow: 0 1px 2px #000;
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.content-manager-main { grid-template-columns: 1fr; overflow: auto; }
|
|
.content-pack-row { grid-template-columns: 1fr auto; }
|
|
.content-pack-row > span { grid-column: 1 / -1; }
|
|
}
|