/* BDO Ship Upgrade Tracker — interface Chakra Petch for display, numbers and labels; Noto Sans for prose. */ :root { --bg: #0a1728; --ocean-deep: #0a1728; --ocean-mid: #0f2847; --ocean-surface: #1e3a8a; --panel: rgba(10, 24, 40, 0.66); --panel-solid: rgba(10, 24, 40, 0.9); --panel-strong: rgba(10, 24, 40, 0.75); --panel-inset: rgba(8, 20, 34, 0.6); --line: rgba(125, 175, 225, 0.13); --line-soft: rgba(125, 175, 225, 0.06); --line-head: rgba(125, 175, 225, 0.1); --line-btn: rgba(125, 175, 225, 0.22); --line-btn-hi: rgba(125, 175, 225, 0.5); --track: rgba(125, 175, 225, 0.1); --ink: #d9e6f2; --ink-hi: #eef5fb; --ink-row: #e6eff8; --ink-mid: #b7c9da; --ink-dim: #9fb6cd; --ink-soft: #8aa2ba; --ink-mute: #6f88a3; --ink-faint: #58708c; --ink-off: #7d93ab; --blue: #7cc3ee; --blue-hi: #9fd0f2; --blue-bar: #3a89c9; --blue-glow: rgba(88, 168, 232, 0.15); --blue-edge: rgba(88, 168, 232, 0.4); --teal: #4ec9ae; --teal-hi: #7fe0c9; --teal-edge: rgba(78, 201, 174, 0.4); --teal-glow: rgba(78, 201, 174, 0.12); --amber: #e8b661; --red: #e87a6d; --red-soft: #e0988e; --red-edge: rgba(232, 122, 109, 0.35); --font-display: 'Chakra Petch', 'Segoe UI', sans-serif; --font-body: 'Noto Sans', system-ui, sans-serif; --r-panel: 12px; --r-tile: 10px; --r-btn: 8px; --r-sm: 7px; --r-icon: 6px; } * { box-sizing: border-box; } html { margin: 0; padding: 0; } /* The ocean ground the water shader ripples over. The shader draws its own gradient in these same colours, so with the effect on or off the page reads as the same body of water. * * This background must stay on with left transparent. An * unstyled root lets the body background propagate to the viewport, where * it paints beneath everything -- which is what leaves the shader's * canvas (a z-index:-1 child of body) visible. Give a background * of its own and propagation stops, body paints over the canvas, and the * water silently disappears. */ body { margin: 0; padding: 0; background: radial-gradient(circle at 30% 20%, rgba(14, 165, 233, 0.15) 0%, transparent 50%), radial-gradient(circle at 70% 60%, rgba(59, 130, 246, 0.10) 0%, transparent 50%), radial-gradient(circle at 40% 80%, rgba(6, 182, 212, 0.08) 0%, transparent 50%), linear-gradient(180deg, var(--ocean-deep) 0%, var(--ocean-mid) 30%, var(--ocean-surface) 60%, var(--ocean-mid) 100%); background-attachment: fixed; font-family: var(--font-body); font-size: 14px; color: var(--ink); min-height: 100vh; position: relative; overflow-x: hidden; -webkit-font-smoothing: antialiased; } a { color: #6db9e8; text-decoration: none; } a:hover { color: #a5d5f2; } ::selection { background: rgba(88, 168, 232, 0.3); } input, select { outline: none; font-family: inherit; } button { cursor: pointer; font-family: inherit; } button:disabled { cursor: not-allowed; opacity: 0.4; } :focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: rgba(110, 150, 190, 0.25); border-radius: 5px; } ::-webkit-scrollbar-track { background: transparent; } .shell { position: relative; z-index: 1; max-width: 1300px; margin: 0 auto; padding: 0 24px 90px; } /* ---- header ------------------------------------------------------- */ .masthead { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 24px 0 18px; flex-wrap: wrap; } .brand { display: flex; align-items: center; gap: 13px; } .brand-mark { width: 40px; height: 40px; border-radius: var(--r-tile); background: linear-gradient(160deg, #123a5e, #0a1f38); border: 1px solid rgba(120, 180, 230, 0.3); display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--blue); flex: none; } .brand-name { font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: 0.07em; color: var(--ink-hi); text-transform: uppercase; line-height: 1.1; } .brand-sub { font-size: 12px; color: var(--ink-mute); letter-spacing: 0.03em; } .masthead-actions { display: flex; gap: 8px; flex-wrap: wrap; } .ghost-btn { background: none; border: 1px solid var(--line-btn); color: var(--ink-dim); border-radius: var(--r-btn); padding: 7px 15px; font-size: 12.5px; font-weight: 600; } .ghost-btn:hover:not(:disabled) { color: var(--ink-hi); border-color: var(--line-btn-hi); } .ghost-btn.on { color: var(--teal); } /* ---- account ------------------------------------------------------ * Present only where the deployment offers sync; otherwise #account is empty and this costs nothing. The chip is the sync status as much as it is the name -- the dot is the whole of the reporting, so a normal save never interrupts anything. */ .account { display: inline-flex; } .account-chip { display: inline-flex; align-items: center; gap: 8px; } .account-avatar { border-radius: 50%; display: block; } .account-name { font-weight: 600; } .account-note { position: relative; padding-left: 12px; font-size: 11.5px; font-weight: 500; color: var(--ink-mute); letter-spacing: 0.02em; } .account-note::before { content: ''; position: absolute; left: 0; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--ink-faint); } .account-chip.idle .account-note::before { background: var(--teal); } .account-chip.syncing .account-note::before { background: var(--blue); animation: account-pulse 1.1s ease-in-out infinite; } .account-chip.conflict .account-note::before { background: var(--amber); } .account-chip.error .account-note::before { background: var(--red); } .account-chip.conflict, .account-chip.error { border-color: var(--red-edge); } @keyframes account-pulse { 50% { opacity: 0.35; } } /* A steady dot says as much as a blinking one, and does not drag the eye away from the screen the user is actually reading. */ @media (prefers-reduced-motion: reduce) { .account-chip.syncing .account-note::before { animation: none; } } /* The name is the least useful part on a narrow screen: the avatar says who, and the dot says whether. */ @media (max-width: 640px) { .account-name { display: none; } } /* ---- tabs --------------------------------------------------------- */ .tabs { display: flex; gap: 2px; border-bottom: 1px solid rgba(120, 170, 220, 0.15); margin-bottom: 26px; overflow-x: auto; } .tab { background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 10px 16px 12px; font-family: var(--font-display); font-size: 14px; font-weight: 600; letter-spacing: 0.05em; color: var(--ink-off); display: flex; align-items: center; gap: 8px; white-space: nowrap; } .tab:hover { color: var(--ink-hi); } .tab.active { color: var(--blue-hi); border-bottom-color: var(--blue-bar); } .tab-count { font-size: 11px; font-weight: 700; font-family: var(--font-body); background: var(--blue-glow); color: var(--blue); border-radius: 10px; padding: 1px 7px; } /* ---- panels ------------------------------------------------------- */ .screen { display: flex; flex-direction: column; gap: 20px; } .panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-panel); backdrop-filter: blur(6px); overflow: hidden; } .panel-head { display: flex; align-items: baseline; gap: 10px; padding: 14px 20px 12px; border-bottom: 1px solid var(--line-head); flex-wrap: wrap; } .panel-title { font-family: var(--font-display); font-size: 13.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; margin: 0; color: var(--blue); } .panel-title.teal { color: var(--teal); } .panel-title.amber { color: var(--amber); } .panel-title.red { color: var(--red); } .panel-title.plain { color: var(--ink-hi); } .panel-sub { font-size: 12px; color: var(--ink-faint); } .panel-spacer { flex: 1; } .empty { color: var(--ink-faint); font-size: 13px; text-align: center; padding: 34px 20px; } /* ---- stat strip --------------------------------------------------- */ .stats { display: flex; flex-wrap: wrap; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-panel); backdrop-filter: blur(6px); overflow: hidden; } .stat { flex: 1 1 170px; padding: 16px 22px; border-right: 1px solid rgba(125, 175, 225, 0.09); } .stat:last-child { border-right: none; } .stat-k { font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 5px; } .stat-v { font-family: var(--font-display); font-size: 21px; font-weight: 600; color: var(--ink-hi); } .stat-v.teal { color: var(--teal); } .stat-v.amber { color: var(--amber); } .stat-v.blue { color: var(--blue-hi); } .stat-v.off { color: var(--ink-off); } .stat-sub { font-size: 11.5px; color: var(--ink-faint); margin-top: 2px; } /* ---- ready-to-craft banner ---------------------------------------- */ .readybar { background: linear-gradient(90deg, rgba(30, 80, 70, 0.4), var(--panel)); border: 1px solid rgba(78, 201, 174, 0.3); border-radius: var(--r-panel); padding: 14px 20px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; backdrop-filter: blur(6px); } .readybar-label { font-family: var(--font-display); font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal); white-space: nowrap; } .readybar-list { display: flex; gap: 8px; flex-wrap: wrap; } .ready-chip { display: flex; align-items: center; gap: 8px; background: rgba(78, 201, 174, 0.1); border: 1px solid rgba(78, 201, 174, 0.35); border-radius: var(--r-btn); padding: 6px 12px; color: var(--ink); font-size: 12.5px; font-weight: 600; } .ready-chip:hover { background: rgba(78, 201, 174, 0.22); } .ready-chip img { width: 22px; height: 22px; border-radius: 4px; } /* ---- controls ----------------------------------------------------- */ .controls { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .field { flex: 1 1 220px; background: var(--panel); border: 1px solid rgba(125, 175, 225, 0.16); border-radius: var(--r-btn); padding: 9px 14px; color: var(--ink); font-size: 13px; } .field::placeholder { color: var(--ink-faint); } .chips { display: flex; gap: 6px; flex-wrap: wrap; } .chip { background: transparent; border: 1px solid rgba(125, 175, 225, 0.2); color: var(--ink-off); border-radius: 18px; padding: 6px 14px; font-size: 12px; font-weight: 600; } .chip:hover { color: var(--ink-hi); } .chip.active { background: rgba(88, 168, 232, 0.18); border-color: rgba(88, 168, 232, 0.55); color: var(--blue-hi); } .select { background: var(--panel-solid); border: 1px solid rgba(125, 175, 225, 0.25); color: var(--ink); border-radius: var(--r-btn); padding: 8px 12px; font-size: 13px; } /* ---- generic rows ------------------------------------------------- */ .row { display: flex; align-items: center; gap: 14px; padding: 11px 20px; border-bottom: 1px solid var(--line-soft); flex-wrap: wrap; } .row:last-child { border-bottom: none; } .row:hover { background: rgba(88, 168, 232, 0.05); } .row-icon { width: 34px; height: 34px; border-radius: var(--r-icon); border: 1px solid rgba(125, 175, 225, 0.2); flex-shrink: 0; object-fit: contain; background: rgba(125, 175, 225, 0.05); } .row-icon.sm { width: 28px; height: 28px; border-radius: 5px; } .row-icon.md { width: 30px; height: 30px; } .row-icon.lg { width: 46px; height: 46px; border-radius: var(--r-btn); } .row-main { flex: 1 1 200px; min-width: 0; } .row-name { font-weight: 600; font-size: 13.5px; color: var(--ink-row); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .row-sub { font-size: 11.5px; color: var(--ink-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .row-meter { flex: 2 1 220px; min-width: 160px; } .row-tail { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; } .bar { display: flex; height: 7px; border-radius: 4px; overflow: hidden; background: var(--track); } .bar.tall { height: 8px; } .bar i { display: block; height: 100%; } .bar .take { background: var(--teal); } .bar .make { background: var(--blue-bar); } .bar .lack { background: var(--red); } .bar .fill { background: linear-gradient(90deg, #3a89c9, #4ec9ae); } .bar-legend { display: flex; justify-content: space-between; gap: 10px; font-size: 11px; color: var(--ink-faint); margin-top: 4px; } .bar-legend .n { font-family: var(--font-display); color: var(--ink-dim); } .badge { font-family: var(--font-display); font-size: 12.5px; font-weight: 600; min-width: 86px; text-align: right; color: var(--ink-dim); } .badge.teal { color: var(--teal); } .badge.red { color: var(--red); } .badge.blue { color: var(--blue); } .mini-btn { background: var(--blue-glow); border: 1px solid var(--blue-edge); color: var(--blue); border-radius: var(--r-sm); padding: 5px 13px; font-size: 12px; font-weight: 600; } .mini-btn:hover:not(:disabled) { background: rgba(88, 168, 232, 0.25); } /* ---- builds ------------------------------------------------------- */ .queue-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .queue-title { font-family: var(--font-display); font-size: 15px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-hi); } .queue-note { font-size: 12.5px; color: var(--ink-mute); } .build { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-panel); padding: 16px 20px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; backdrop-filter: blur(6px); } .build.paused { opacity: 0.45; } .build-main { flex: 1 1 260px; min-width: 0; } .build-titles { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .build-name { font-weight: 700; font-size: 15px; color: var(--ink-hi); } .build-state { font-size: 11.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--blue); } .build-state.done { color: var(--teal); } .build-state.paused { color: var(--ink-off); } .build .bar { margin: 9px 0 6px; } .build-meta { font-size: 11.5px; color: var(--ink-mute); } .build-meta .n { font-family: var(--font-display); color: var(--ink-dim); } .build-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .sq-btn { width: 30px; height: 30px; background: none; border: 1px solid rgba(125, 175, 225, 0.2); color: var(--ink-dim); border-radius: var(--r-sm); font-size: 11px; display: grid; place-items: center; } .sq-btn:hover:not(:disabled) { border-color: var(--line-btn-hi); color: var(--ink-hi); } .sq-btn.danger { border-color: rgba(232, 122, 109, 0.25); color: #c98a80; } .sq-btn.danger:hover { border-color: rgba(232, 122, 109, 0.6); color: var(--red); } .stepper { display: flex; align-items: center; border: 1px solid rgba(125, 175, 225, 0.2); border-radius: var(--r-sm); overflow: hidden; margin: 0 4px; } .stepper button { width: 26px; height: 30px; background: none; border: none; color: var(--ink-dim); } .stepper button:hover { color: var(--ink-hi); } .stepper .val { width: 46px; height: 30px; border: none; border-left: 1px solid rgba(125, 175, 225, 0.14); border-right: 1px solid rgba(125, 175, 225, 0.14); background: rgba(0, 0, 0, 0.18); font-family: var(--font-display); font-size: 13px; text-align: center; color: var(--ink-hi); } /* ---- inventory ---------------------------------------------------- */ .inv-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); gap: 20px; align-items: start; } .inv-left { display: flex; flex-direction: column; gap: 14px; min-width: 0; } .inv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; } .tile { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-tile); padding: 10px 8px 8px; display: flex; flex-direction: column; align-items: center; gap: 6px; backdrop-filter: blur(6px); text-align: center; } .tile:hover { border-color: rgba(88, 168, 232, 0.6); } .tile.short { border-color: rgba(232, 122, 109, 0.4); } .tile.selected { border-color: rgba(88, 168, 232, 0.85); } .tile img { width: 38px; height: 38px; border-radius: var(--r-icon); object-fit: contain; } .tile-qty { font-family: var(--font-display); font-size: 14px; font-weight: 700; color: var(--ink-hi); } .tile-name { font-size: 10px; color: var(--ink-soft); line-height: 1.25; height: 25px; overflow: hidden; } .tile .bar { width: 100%; height: 4px; border-radius: 2px; background: rgba(125, 175, 225, 0.12); } .detail { background: var(--panel-strong); border: 1px solid rgba(125, 175, 225, 0.16); border-radius: var(--r-panel); padding: 20px; backdrop-filter: blur(8px); position: sticky; /* Clear the pouch, which sticks above it. */ top: calc(var(--pouch-h, 0px) + 16px); } .detail-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .detail-head img { width: 44px; height: 44px; border-radius: var(--r-btn); border: 1px solid rgba(125, 175, 225, 0.25); object-fit: contain; } .detail-name { font-weight: 700; font-size: 15px; color: var(--ink-hi); line-height: 1.3; } .qty-row { display: flex; align-items: center; gap: 6px; margin-bottom: 18px; } .qty-btn { height: 32px; min-width: 32px; padding: 0 10px; background: none; border: 1px solid rgba(125, 175, 225, 0.25); color: var(--ink-dim); border-radius: var(--r-sm); font-size: 12px; font-weight: 600; } .qty-btn:hover { color: var(--ink-hi); border-color: var(--line-btn-hi); } .qty-val { flex: 1; min-width: 0; height: 32px; padding: 0 8px; border: 1px solid rgba(125, 175, 225, 0.25); border-radius: var(--r-sm); background: rgba(0, 0, 0, 0.22); text-align: center; font-family: var(--font-display); font-size: 19px; font-weight: 700; color: var(--ink-hi); } .qty-hint { font-size: 11px; color: var(--ink-faint); margin: -12px 0 16px; text-align: center; } /* ---- enhancement level, recorded rather than attempted -------------- */ .lvl-strip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; margin-bottom: 8px; } .lvl { min-width: 0; height: 30px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; border: 1px solid rgba(125, 175, 225, 0.18); border-radius: var(--r-sm); background: rgba(0, 0, 0, 0.18); color: var(--ink-off); font-family: var(--font-display); font-size: 12px; font-weight: 600; } .lvl:hover { color: var(--ink-hi); border-color: var(--line-btn-hi); } .lvl.wanted { border-color: rgba(88, 168, 232, 0.35); color: var(--blue); } .lvl.has { color: var(--teal-hi); border-color: var(--teal-edge); background: rgba(78, 201, 174, 0.1); } .lvl.on { color: var(--ink-hi); border-color: var(--blue-edge); background: rgba(88, 168, 232, 0.16); } .lvl-n { font-size: 10px; font-weight: 700; border-radius: 8px; padding: 0 4px; background: rgba(0, 0, 0, 0.35); } .detail-note { font-size: 11px; color: var(--ink-faint); line-height: 1.5; } .act.wide { width: 100%; justify-content: center; margin-bottom: 16px; } /* The level a part is currently at, on its inventory tile. */ .tile-lvl { position: absolute; top: 6px; right: 6px; font-family: var(--font-display); font-size: 10.5px; font-weight: 700; line-height: 1; padding: 3px 5px; border-radius: 6px; background: rgba(78, 201, 174, 0.16); border: 1px solid var(--teal-edge); color: var(--teal-hi); } .kv { display: flex; flex-direction: column; gap: 7px; padding-bottom: 14px; border-bottom: 1px solid rgba(125, 175, 225, 0.12); margin-bottom: 14px; } .kv-row { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; } .kv-row span:first-child { color: var(--ink-mute); } .kv-row .n { font-family: var(--font-display); } .kv-row .n.blue { color: var(--blue); } .kv-row .n.teal { color: var(--teal); } .kv-row .n.red { color: var(--red); } .kv-row .n.faint { color: var(--ink-faint); } .detail-label { font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 8px; } .detail-block { margin-bottom: 14px; } .detail-line { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; padding: 4px 0; } .detail-line span:first-child { color: var(--ink-mid); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .detail-line .n { font-family: var(--font-display); color: var(--ink-dim); flex-shrink: 0; } .detail-src { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; margin-bottom: 16px; } .detail-src span:first-child { color: var(--ink-mute); } .detail-src span:last-child { color: var(--ink-mid); text-align: right; } .detail-actions { display: flex; gap: 8px; } .act { flex: 1; background: rgba(88, 168, 232, 0.15); border: 1px solid rgba(88, 168, 232, 0.45); color: var(--blue-hi); border-radius: var(--r-btn); padding: 9px 0; font-size: 13px; font-weight: 700; } .act:hover:not(:disabled) { background: rgba(88, 168, 232, 0.3); } .act.quiet { background: none; border-color: rgba(125, 175, 225, 0.25); color: var(--ink-dim); font-weight: 600; } .act.quiet:hover:not(:disabled) { border-color: var(--line-btn-hi); color: var(--ink-hi); } /* For the one action in the app that cannot be undone. */ .act.bad { background: rgba(232, 122, 109, 0.16); border-color: var(--red-edge); color: var(--red-soft); } .act.bad:hover:not(:disabled) { background: rgba(232, 122, 109, 0.3); } /* ---- workshop ----------------------------------------------------- */ .craft-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; padding: 16px 20px; } .craft-card { background: var(--panel-inset); border: 1px solid rgba(78, 201, 174, 0.25); border-radius: var(--r-tile); padding: 14px; } .craft-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .craft-top img { width: 34px; height: 34px; border-radius: var(--r-icon); object-fit: contain; } .craft-name { font-weight: 700; font-size: 13.5px; color: var(--ink-hi); } .craft-times { font-size: 11.5px; color: var(--teal); font-family: var(--font-display); } .ings { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; } .ing { display: flex; align-items: center; gap: 5px; background: rgba(125, 175, 225, 0.08); border-radius: var(--r-icon); padding: 3px 7px; font-size: 11px; color: var(--ink-mid); } .ing.short { color: var(--red); } .ing img { width: 16px; height: 16px; border-radius: 3px; object-fit: contain; } .craft-actions { display: flex; gap: 8px; align-items: center; } .craft-n { width: 56px; flex: none; height: 32px; padding: 0 6px; border: 1px solid rgba(125, 175, 225, 0.25); border-radius: var(--r-sm); background: rgba(0, 0, 0, 0.22); text-align: center; font-family: var(--font-display); font-size: 13px; font-weight: 600; color: var(--ink-hi); } .act.go { background: rgba(78, 201, 174, 0.14); border-color: var(--teal-edge); color: var(--teal-hi); padding: 7px 0; font-size: 12.5px; } .act.go:hover:not(:disabled) { background: rgba(78, 201, 174, 0.28); } .enh-level { font-family: var(--font-display); font-size: 13px; color: var(--ink-dim); flex-shrink: 0; } .enh-cost { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--ink-mute); flex-shrink: 0; min-width: 70px; } .enh-cost img { width: 18px; height: 18px; border-radius: 3px; object-fit: contain; } .enh-actions { display: flex; gap: 7px; flex-shrink: 0; } .pill-btn { border-radius: var(--r-sm); padding: 6px 14px; font-size: 12px; font-weight: 700; background: var(--teal-glow); border: 1px solid var(--teal-edge); color: var(--teal-hi); } .pill-btn:hover:not(:disabled) { background: rgba(78, 201, 174, 0.26); } .pill-btn.bad { background: rgba(232, 122, 109, 0.08); border-color: var(--red-edge); color: var(--red-soft); } .pill-btn.bad:hover:not(:disabled) { background: rgba(232, 122, 109, 0.2); } /* ---- to get ------------------------------------------------------- */ .summary { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-panel); padding: 16px 20px; display: flex; align-items: center; gap: 26px; flex-wrap: wrap; backdrop-filter: blur(6px); } .summary-title { font-family: var(--font-display); font-size: 14px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-hi); } .summary-stats { display: flex; gap: 26px; flex-wrap: wrap; flex: 1; } .summary-k { font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); } .summary-v { font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--ink); } .summary-v.amber { color: var(--amber); } .summary-v.blue { color: var(--blue-hi); } .group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 13px 20px 11px; border-bottom: 1px solid var(--line-head); } .group-total { font-family: var(--font-display); font-size: 12.5px; } .qty-out { font-family: var(--font-display); font-size: 13.5px; font-weight: 600; color: var(--red); } /* ---- toast & dialog ----------------------------------------------- */ @keyframes toastIn { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } } /* ---- hover card: what a thing is made of ---------------------------- */ .peek { position: fixed; z-index: 45; width: 300px; max-width: calc(100vw - 24px); padding: 12px 14px; border-radius: var(--r-panel); border: 1px solid rgba(120, 180, 230, 0.28); background: rgba(9, 24, 43, 0.97); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55); backdrop-filter: blur(10px); pointer-events: none; } .peek[hidden] { display: none; } .peek-head { display: flex; align-items: center; gap: 9px; padding-bottom: 9px; margin-bottom: 9px; border-bottom: 1px solid rgba(125, 175, 225, 0.14); font-weight: 700; font-size: 13px; color: var(--ink-hi); line-height: 1.3; } .peek-label { font-size: 10px; letter-spacing: 0.11em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 6px; } .peek-line, .ing-line { display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 3px 0; color: var(--ink-row); } .peek-icon { width: 20px; height: 20px; border-radius: 4px; object-fit: contain; flex: none; } .peek-icon.lg { width: 28px; height: 28px; border-radius: 6px; } .peek-need { font-family: var(--font-display); font-weight: 700; min-width: 40px; text-align: right; font-variant-numeric: tabular-nums; } .peek-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .peek-have { font-family: var(--font-display); font-size: 11.5px; font-variant-numeric: tabular-nums; } .peek-line.ok .peek-have, .ing-line.ok .peek-have { color: var(--teal); } .peek-line.short .peek-have, .ing-line.short .peek-have { color: var(--red); } /* With no ingredient list between them, the head rule and the foot rule sit on top of each other. */ .peek:not(:has(.peek-label)) .peek-head { border-bottom: none; padding-bottom: 0; margin-bottom: 6px; } .peek:not(:has(.peek-label)) .peek-foot { border-top: none; padding-top: 0; margin-top: 0; } .peek-foot { margin-top: 9px; padding-top: 8px; border-top: 1px solid rgba(125, 175, 225, 0.14); font-size: 11px; color: var(--ink-faint); } .toast { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%); z-index: 50; background: rgba(12, 30, 50, 0.95); border: 1px solid rgba(110, 180, 230, 0.35); border-radius: var(--r-tile); padding: 10px 18px; font-size: 13px; color: #cfe4f5; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5); animation: toastIn 0.2s ease; backdrop-filter: blur(8px); display: flex; align-items: center; gap: 14px; } .toast[hidden] { display: none; } .toast button { background: none; border: none; color: var(--blue); font-weight: 700; font-size: 13px; } .dialog { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: rgba(3, 9, 16, 0.72); padding: 16px; backdrop-filter: blur(3px); } .dialog[hidden] { display: none; } .dialog-box { width: 100%; max-width: 560px; max-height: 82vh; overflow-y: auto; background: #0a1826; border: 1px solid rgba(125, 175, 225, 0.2); border-radius: var(--r-panel); padding: 22px; } .dialog-box h2 { margin: 0 0 8px; font-family: var(--font-display); font-size: 16px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-hi); } .dialog-box p { margin: 0 0 14px; font-size: 13px; line-height: 1.55; color: var(--ink-dim); } .dialog-list { max-height: 220px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--r-btn); padding: 10px 14px; margin-bottom: 14px; } .dialog-row { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; font-size: 12.5px; color: var(--ink-mid); } .dialog-row .n { font-family: var(--font-display); color: var(--ink-hi); } .dialog-actions { display: flex; gap: 8px; justify-content: flex-end; } /* ---- responsive --------------------------------------------------- */ @media (max-width: 960px) { .inv-layout { grid-template-columns: minmax(0, 1fr); } .detail { position: static; } } @media (max-width: 720px) { .shell { padding: 0 16px 70px; } .masthead { padding: 18px 0 14px; } .brand-name { font-size: 16px; } .row { gap: 10px; padding: 11px 14px; } .row-meter { flex-basis: 100%; min-width: 0; } .row-tail { width: 100%; justify-content: space-between; } .badge { text-align: left; min-width: 0; } .panel-head, .group-head { padding: 12px 14px 10px; } .stat { padding: 13px 16px; } .craft-grid { padding: 12px 14px; } .build { padding: 14px; gap: 12px; } .build-actions { width: 100%; justify-content: flex-end; } } @media (max-width: 480px) { .inv-grid { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); } .masthead-actions { width: 100%; } .ghost-btn { flex: 1 1 auto; text-align: center; } .tab { padding: 10px 11px 12px; font-size: 13px; } } @media (prefers-reduced-motion: reduce) { .toast { animation: none; } * { transition: none !important; } } /* ---- build picker -------------------------------------------------- */ .add-build { flex: 0 0 auto; padding: 8px 16px; font-size: 13px; } .picker-search { width: 100%; margin-bottom: 12px; } .picker { max-height: 320px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--r-btn); margin-bottom: 14px; } .picker-row { display: grid; grid-template-columns: 28px 1fr auto; gap: 12px; align-items: center; width: 100%; padding: 8px 12px; background: none; border: none; border-bottom: 1px solid var(--line-soft); color: var(--ink-mid); font-size: 13px; text-align: left; } .picker-row:last-child { border-bottom: none; } .picker-row:hover:not(:disabled) { background: rgba(88, 168, 232, 0.08); color: var(--ink-hi); } .picker-row:disabled { opacity: 0.45; cursor: default; } .picker-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .picker-tag { font-family: var(--font-display); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); } /* ---- record what you own, straight from a plan row ------------------ */ .own { display: flex; align-items: center; border: 1px solid rgba(125, 175, 225, 0.18); border-radius: var(--r-sm); overflow: hidden; } .own .sq-btn { border: none; border-radius: 0; width: 26px; height: 28px; } .own-input { width: 66px; height: 28px; border: none; border-left: 1px solid rgba(125, 175, 225, 0.14); border-right: 1px solid rgba(125, 175, 225, 0.14); background: rgba(0, 0, 0, 0.18); color: var(--ink-hi); font-family: var(--font-display); font-size: 12.5px; text-align: center; -moz-appearance: textfield; } .own-input::-webkit-outer-spin-button, .own-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* Every quantity in the app is typed into the same way. */ .amt { -moz-appearance: textfield; font-variant-numeric: tabular-nums; } .amt::-webkit-outer-spin-button, .amt::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .amt:focus { outline: none; box-shadow: inset 0 0 0 1px var(--blue-edge); color: var(--blue-hi); } .amt:focus::selection { background: rgba(88, 168, 232, 0.35); } /* ---- first-run guidance -------------------------------------------- */ .steps { list-style: none; margin: 0; padding: 0; } .step { display: grid; grid-template-columns: 30px 1fr auto; gap: 14px; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--line-soft); } .step:last-child { border-bottom: none; } .step-n { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--blue-edge); background: var(--blue-glow); color: var(--blue); font-family: var(--font-display); font-size: 13px; font-weight: 700; } .step-title { font-weight: 600; font-size: 14px; color: var(--ink-hi); } .step-body { font-size: 12.5px; color: var(--ink-mute); margin-top: 2px; line-height: 1.5; } .step-cta { flex: 0 0 auto; padding: 8px 14px; font-size: 12.5px; white-space: nowrap; } @media (max-width: 640px) { .step { grid-template-columns: 30px 1fr; } .step-cta { grid-column: 2; justify-self: start; } } /* ---- next step + pouch --------------------------------------------- */ .next-step { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 13px 20px; border-radius: var(--r-panel); border: 1px solid rgba(88, 168, 232, 0.28); background: linear-gradient(90deg, rgba(24, 62, 96, 0.5), var(--panel)); backdrop-filter: blur(6px); } .next-label { font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue); white-space: nowrap; } .next-msg { flex: 1 1 260px; font-size: 13px; color: var(--ink-row); } .next-cta { flex: 0 0 auto; padding: 7px 14px; font-size: 12.5px; white-space: nowrap; } /* The pouch sits between the tabs and the screen and follows you across all five of them, because coins and stones are spent from every one. */ .pouch { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; position: sticky; top: 0; z-index: 6; margin: -26px 0 22px; padding: 11px 18px; border-radius: var(--r-panel); border: 1px solid var(--line); background: rgba(9, 24, 43, 0.86); backdrop-filter: blur(10px); } .pouch:empty { display: none; } .pouch-title { font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); white-space: nowrap; } .pouch-list { display: flex; align-items: stretch; gap: 10px; flex: 1 1 auto; flex-wrap: wrap; } .pouch-item { display: flex; align-items: center; gap: 10px; padding: 6px 12px 6px 8px; border-radius: var(--r-btn); border: 1px solid transparent; background: rgba(0, 0, 0, 0.2); cursor: text; } .pouch-item:hover { border-color: rgba(125, 175, 225, 0.22); } .pouch-item.short { border-color: rgba(232, 122, 109, 0.3); } .pouch-item.ok { border-color: rgba(78, 201, 174, 0.26); } .pouch-icon, .pouch-glyph { width: 26px; height: 26px; flex: none; border-radius: 6px; object-fit: contain; } .pouch-glyph { display: flex; align-items: center; justify-content: center; font-size: 17px; color: #b9c9dc; background: rgba(120, 160, 200, 0.12); } .pouch-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .pouch-k { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); white-space: nowrap; } .pouch-input { /* Wide enough for thirteen characters: silver reached ten figures the day the yellow permits arrived at five billion each. */ width: 148px; /* The chips wrap, so a phone can spare the width -- and 34vw used to cut the last two digits off a ten-figure silver balance. */ max-width: 60vw; padding: 0; border: none; background: none; color: var(--ink-hi); font-family: var(--font-display); font-size: 17px; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; -moz-appearance: textfield; } .pouch-input::-webkit-outer-spin-button, .pouch-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .pouch-input:focus { outline: none; color: var(--blue-hi); } .pouch-item.short .pouch-input { color: var(--amber); } .pouch-item.ok .pouch-input { color: var(--teal); } .pouch-need { font-size: 10.5px; color: var(--ink-faint); white-space: nowrap; } .pouch-item.short .pouch-need { color: var(--red); } /* One scrolling row beats three stacked ones on a bar that is always on screen. Kept here, after the base rules, so it actually wins. */ @media (max-width: 720px) { .pouch { gap: 10px; padding: 9px 12px; margin: -26px 0 18px; } .pouch-title { display: none; } .pouch-list { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; } .pouch-item { flex: none; } /* The row scrolls here, so the extra width costs nothing but a swipe, and ten-figure silver no longer loses its last two digits. */ .pouch-input { width: 124px; font-size: 15px; } } .summary-sub { font-size: 11px; color: var(--ink-faint); margin-top: 3px; } .purse-inline { width: 96px; padding: 2px 6px; border-radius: 5px; border: 1px solid rgba(125, 175, 225, 0.2); background: rgba(0, 0, 0, 0.22); color: var(--ink-dim); font-family: var(--font-display); font-size: 11px; -moz-appearance: textfield; } .purse-inline::-webkit-outer-spin-button, .purse-inline::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .purse-inline:focus { border-color: var(--blue-edge); color: var(--ink-hi); } /* ---- what an enhancement really costs ------------------------------ */ .enh-odds { display: block; font-size: 10.5px; color: var(--ink-faint); white-space: nowrap; margin-top: 2px; } .enh-outlook { flex: 0 0 auto; font-size: 11px; color: var(--ink-mute); white-space: nowrap; padding: 3px 9px; border-radius: var(--r-btn); border: 1px solid rgba(125, 175, 225, 0.16); background: rgba(0, 0, 0, 0.18); } .enh-outlook b { color: var(--amber); font-family: var(--font-display); } /* ---- two ways to build the same ship -------------------------------- */ .route-list { display: flex; flex-direction: column; gap: 6px; } .route { display: flex; flex-direction: column; gap: 3px; text-align: left; padding: 9px 12px; border-radius: var(--r-sm); border: 1px solid rgba(125, 175, 225, 0.18); background: rgba(0, 0, 0, 0.18); color: var(--ink-dim); } .route:hover { border-color: var(--line-btn-hi); color: var(--ink-hi); } .route.on { border-color: var(--blue-edge); background: rgba(88, 168, 232, 0.12); color: var(--ink-hi); } .route-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .route-name { font-weight: 600; font-size: 12.5px; } .route-have { font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--teal); border: 1px solid var(--teal-edge); border-radius: 8px; padding: 1px 6px; } .route-cost { font-size: 11px; color: var(--ink-mute); font-variant-numeric: tabular-nums; } .route-gain { font-size: 11px; color: var(--ink-faint); line-height: 1.45; } /* ---- the requirement tree ------------------------------------------- */ .tbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } /* One button naming the build on screen, whatever the queue length. */ .tpick { display: flex; align-items: center; gap: 9px; min-width: 0; flex: 1 1 260px; max-width: 460px; padding: 8px 13px; border-radius: 9px; border: 1px solid var(--blue-edge); background: rgba(88, 168, 232, 0.12); color: var(--ink-hi); font-size: 13px; font-weight: 600; } .tpick:hover { border-color: rgba(88, 168, 232, 0.7); } .tpick-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; } .tpick-of { font-size: 11px; font-weight: 500; color: var(--ink-mute); white-space: nowrap; } .tpick-caret { color: var(--ink-mute); font-size: 11px; } .tchip-icon { width: 22px; height: 22px; border-radius: 4px; object-fit: contain; flex: none; } .picker-row.on { border-color: var(--blue-edge); background: rgba(88, 168, 232, 0.12); } .tpanel { padding: 10px 14px 12px; overflow-x: auto; } .trow { display: flex; align-items: center; gap: 9px; padding: 5px 6px; border-radius: 8px; min-width: 620px; } .trow:hover { background: rgba(88, 168, 232, 0.05); } /* One cell per ancestor: a line where the branch continues below, an elbow on the last one. */ /* The negative margin is what makes the vertical lines meet across rows: without it each stops at the row's padding and the branch looks broken. */ .tguide { position: relative; width: 22px; flex: none; align-self: stretch; margin: -5px 0; } .tguide::before { content: ''; position: absolute; left: 10px; top: 0; bottom: 0; width: 1px; background: rgba(125, 175, 225, 0.2); } .tguide.stop::before { bottom: 50%; } .tguide.elbow::after { content: ''; position: absolute; left: 10px; top: 50%; width: 11px; height: 1px; background: rgba(125, 175, 225, 0.2); } .tguide.elbow::before { bottom: 50%; } .tcaret { width: 20px; height: 20px; flex: none; border-radius: 5px; border: 1px solid rgba(125, 175, 225, 0.25); background: none; color: var(--ink-mute); font-size: 11px; line-height: 1; } .tcaret:hover { color: var(--ink-hi); border-color: var(--line-btn-hi); } .tcaret.empty { border: none; } .trow-icon { width: 26px; height: 26px; border-radius: 5px; object-fit: contain; flex: none; } .trow-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } .trow-name { font-size: 12.5px; color: var(--ink-row); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .trow.missing .trow-name { color: var(--ink-hi); } .trow-sub { font-size: 10.5px; color: var(--ink-faint); white-space: nowrap; } .trow-need, .trow-own { font-family: var(--font-display); font-size: 11.5px; font-variant-numeric: tabular-nums; flex: none; text-align: right; } .trow-need { min-width: 54px; color: var(--ink-dim); } .trow-own { min-width: 68px; color: var(--ink-faint); } .tlegend { display: flex; gap: 18px; flex-wrap: wrap; font-size: 11.5px; color: var(--ink-mute); padding-left: 4px; } .tlegend span { display: flex; align-items: center; gap: 7px; } .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; } .dot.teal { background: var(--teal); } .dot.blue { background: var(--blue); } .dot.red { background: var(--red); } @media (max-width: 720px) { .trow { min-width: 520px; } .trow-own { display: none; } } /* An inline "change" that reads as part of the sentence around it. */ .linky { background: none; border: none; padding: 0; font: inherit; color: var(--blue); text-decoration: underline; text-underline-offset: 2px; } .linky:hover { color: var(--blue-hi); } .detail-close { margin-left: auto; align-self: flex-start; width: 26px; height: 26px; flex: none; border-radius: var(--r-sm); border: 1px solid transparent; background: none; color: var(--ink-mute); font-size: 17px; line-height: 1; } .detail-close:hover { color: var(--ink-hi); border-color: var(--line-btn-hi); } /* ---- the header on a phone ------------------------------------------ */ /* Hidden until there is not room for the buttons themselves. */ .hamburger { display: none; } @media (max-width: 780px) { .masthead { position: relative; } .hamburger { display: flex; flex-direction: column; justify-content: center; gap: 4px; width: 40px; height: 40px; flex: none; padding: 0 9px; border-radius: var(--r-btn); border: 1px solid var(--line-btn); background: none; } .hamburger span { display: block; height: 2px; border-radius: 1px; background: var(--ink-dim); } .hamburger[aria-expanded="true"] { border-color: var(--blue-edge); } .hamburger[aria-expanded="true"] span { background: var(--blue-hi); } /* Out of the flow entirely, so the header stays one line high. */ .masthead-actions { display: none; position: absolute; top: 100%; right: 0; z-index: 20; flex-direction: column; align-items: stretch; gap: 4px; min-width: 210px; padding: 8px; border-radius: var(--r-panel); border: 1px solid var(--line); background: rgba(9, 24, 43, 0.97); backdrop-filter: blur(10px); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5); } .masthead-actions.open { display: flex; } .masthead-actions .ghost-btn { text-align: left; width: 100%; } .brand-sub { display: none; } } /* Six tabs have to fit a 360px screen, and scroll rather than clip if a seventh ever arrives. */ @media (max-width: 640px) { .tabs { gap: 0; margin-bottom: 20px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .tabs::-webkit-scrollbar { display: none; } .tab { padding: 9px 9px 11px; font-size: 12px; letter-spacing: 0.02em; gap: 5px; } .tab-count { padding: 1px 5px; font-size: 10px; } } @media (max-width: 720px) { .tbar { gap: 6px; } .tpick { flex: 1 1 100%; max-width: none; } .tbar .ghost-btn { flex: 1 1 auto; text-align: center; } } /* A tab row that scrolls should look like one. The fade sits on the right edge and only appears while there is more to reach. */ .tabs { position: relative; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent 100%); mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent 100%); } .tabs:not(.scrolls) { -webkit-mask-image: none; mask-image: none; } @media (max-width: 640px) { /* The tree has to fit the screen rather than scroll sideways inside a panel that is already the width of the phone. */ .tpanel { padding: 8px 10px 10px; } .trow { min-width: 0; gap: 7px; padding: 5px 2px; } .tguide { width: 14px; } .tguide::before { left: 6px; } .tguide.elbow::after { left: 6px; width: 7px; } .trow-need { display: none; } .trow-name { white-space: normal; line-height: 1.3; } .trow-icon { width: 22px; height: 22px; } } /* The walkthrough film, in the help dialog. */ .help-film { display: block; width: 100%; max-height: 62vh; margin: 4px 0 14px; border-radius: var(--r-panel); border: 1px solid rgba(125, 175, 225, 0.2); background: #06111e; } @media (max-width: 720px) { /* Leave room for the buttons under it: the dialog scrolls, but the thing you are meant to press should not start below the fold. */ .help-film { max-height: 42vh; } } /* ---- the detail panel on a phone ------------------------------------ */ .detail-veil { display: none; } @media (max-width: 720px) { /* Below this width the layout is one column, so the panel used to land under the whole grid -- tapping a tile looked like it did nothing. It comes up over the page instead, where it can be seen. */ .detail { display: none; } .detail.open { display: block; position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 55; max-height: 78vh; overflow-y: auto; border-radius: var(--r-panel) var(--r-panel) 0 0; border-bottom: none; padding-bottom: 26px; animation: sheetUp 0.22s ease; box-shadow: 0 -14px 40px rgba(0, 0, 0, 0.5); } @keyframes sheetUp { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } } /* A grab bar, so it reads as something that can be dismissed. */ .detail.open::before { content: ''; display: block; width: 40px; height: 4px; margin: 0 auto 14px; border-radius: 2px; background: rgba(125, 175, 225, 0.35); } .detail-veil { display: block; position: fixed; inset: 0; z-index: 54; background: rgba(3, 9, 16, 0.6); backdrop-filter: blur(2px); } .detail-close { position: absolute; top: 14px; right: 14px; } } @media (prefers-reduced-motion: reduce) { .detail.open { animation: none; } } /* ---- links out to BDOCodex ------------------------------------------ */ /* Every item name in the app is a link to the game's own reference. It has to read as a name first and a link second, or the Plan turns into a page of blue text. */ a.codex { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; } a.codex:hover, a.codex:focus-visible { color: var(--blue-hi); border-bottom-color: rgba(124, 195, 238, 0.45); } .codex-mark { font-size: 0.75em; margin-left: 3px; color: var(--ink-faint); opacity: 0; transition: opacity 120ms ease; } a.codex:hover .codex-mark, a.codex:focus-visible .codex-mark { opacity: 1; color: var(--blue); } /* The hover card cannot be clicked, so it must not advertise links. */ .peek a.codex { color: inherit; border-bottom: none; pointer-events: none; } .peek .codex-mark { display: none; } /* ---- what a thing really costs -------------------------------------- */ .way { padding: 8px 10px; border-radius: var(--r-btn); border: 1px solid rgba(125, 175, 225, 0.14); background: rgba(255, 255, 255, 0.015); } .way + .way { margin-top: 6px; } .way.on { border-color: var(--blue-edge); background: var(--blue-glow); } .way-top { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; } .way-label { font-size: 11.5px; font-weight: 700; color: var(--ink-mid); } .way-tag { font-size: 10px; color: var(--blue); margin-left: auto; } .way-cost { font-family: var(--font-display); font-size: 12.5px; color: var(--ink-row); font-variant-numeric: tabular-nums; } .way-unit { font-family: inherit; font-size: 11px; color: var(--ink-faint); } .way-total { font-size: 11.5px; color: var(--amber); font-variant-numeric: tabular-nums; margin-top: 2px; } .way-parts { font-size: 10.5px; color: var(--ink-faint); margin-top: 4px; line-height: 1.45; } .peek-cost { margin-top: 8px; font-size: 11.5px; color: var(--ink-mid); font-variant-numeric: tabular-nums; } .row-alt { font-size: 11px; color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Nothing hovers on a phone, so the arrow has to be there all along or nobody ever finds out the names are links. */ @media (hover: none) { .codex-mark { opacity: 0.55; } .peek .codex-mark { display: none; } } .build-cost { font-size: 11.5px; color: var(--amber); font-variant-numeric: tabular-nums; margin-top: 4px; }