/* ===== Theme tokens — keyed by [data-side] on ===== Default = dark (Sith). Light side = Rebellion orange. */ :root, :root[data-side="dark"] { --bg: #05070a; --bg-elev: #0c1014; --bg-elev-2: #141a20; --border: #1f262f; --border-strong: #2e3742; --text: #e6edf3; --text-muted: #8a94a3; --accent: #e11d2a; /* Sith red */ --accent-strong: #ff3a47; --accent-contrast: #0a0102; --side-bg-image: url("/static/images/dark-side-background.jpg"); --side-bg-opacity: 0.55; } :root[data-side="light"] { --bg: #0a0c0f; --bg-elev: #14181d; --bg-elev-2: #1d2329; --border: #2a3038; --border-strong: #3a414a; --text: #f1e8d8; --text-muted: #9da4ad; --accent: #f58220; /* Rebellion orange */ --accent-strong: #ffa648; --accent-contrast: #1a0a02; --side-bg-image: url("/static/images/light-side-background.jpg"); --side-bg-opacity: 0.50; } :root { --good: #5fb469; --bad: #e57373; --crit: #ffb02a; --shadow: 0 1px 0 rgba(255,255,255,.02), 0 8px 24px rgba(0,0,0,.5); --shadow-lg: 0 12px 40px rgba(0,0,0,.65); --radius: 12px; --radius-sm: 6px; --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; --drawer-w: 420px; /* Reactive vibe — set by static/js/vibe.js. Defaults to neutral so the page looks the same when no vibe is active (portal, fresh load, etc.). */ --vibe-intensity: 1; --scan-speed: 1; } * { box-sizing: border-box; } html { background: var(--bg); color: var(--text); } /* ===== Themed scrollbars ===== WebKit (Chrome/Edge/Safari): pseudo-elements. Firefox: scrollbar-color / scrollbar-width. Theme-aware — `var(--accent)` swaps with the Dark/Light side toggle. */ * { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--accent) 50%, var(--border)) transparent; } ::-webkit-scrollbar { width: 9px; height: 9px; } ::-webkit-scrollbar-track { background: linear-gradient(180deg, #04060a 0%, #08090c 100%); border-left: 1px solid color-mix(in srgb, var(--accent) 14%, var(--border)); } ::-webkit-scrollbar-track:horizontal { border-left: 0; border-top: 1px solid color-mix(in srgb, var(--accent) 14%, var(--border)); } ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 65%, transparent) 0%, color-mix(in srgb, var(--accent) 35%, transparent) 100%); border-radius: 2px; border: 1px solid color-mix(in srgb, var(--accent) 55%, #000); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 0 6px color-mix(in srgb, var(--accent) 30%, transparent); transition: background .15s, box-shadow .15s; } ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 65%, transparent) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 10px color-mix(in srgb, var(--accent) 60%, transparent); } ::-webkit-scrollbar-thumb:active { background: var(--accent); } ::-webkit-scrollbar-corner { background: transparent; } body { margin: 0; font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; min-height: 100vh; background: transparent; /* let body::after show through */ color: var(--text); } /* Fixed atmospheric background image (fades in on load). Lives on html::before so it's not trapped inside body's stacking context. */ html::before { content: ""; position: fixed; inset: 0; background-image: var(--side-bg-image); background-position: center; background-size: cover; background-repeat: no-repeat; opacity: 0; z-index: -2; pointer-events: none; animation: bg-fade-in 1.6s ease-out 0.1s forwards; transition: background-image .4s ease-out; } html::after { /* Dark gradient overlay that keeps text legible, with a subtle accent corona */ content: ""; position: fixed; inset: 0; background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--accent) 10%, transparent) 0%, transparent 45%), radial-gradient(ellipse at 50% 35%, rgba(5, 7, 10, .35) 0%, rgba(5, 7, 10, .65) 60%, rgba(5, 7, 10, .82) 100%); z-index: -1; pointer-events: none; } /* Character page gets a faint HUD grid overlay (accent-tinted) */ body.page-character::before { content: ""; position: fixed; inset: 0; background: linear-gradient(color-mix(in srgb, var(--accent) 6%, transparent) 1px, transparent 1px) 0 0 / 100% 48px, linear-gradient(90deg, color-mix(in srgb, var(--accent) 6%, transparent) 1px, transparent 1px) 0 0 / 48px 100%; z-index: -1; pointer-events: none; mask-image: radial-gradient(ellipse at 50% 30%, black 0%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse at 50% 30%, black 0%, transparent 80%); } @keyframes bg-fade-in { to { opacity: var(--side-bg-opacity, 0.45); } } /* Index page: portal-background image fades in, with a dark-grid scanline overlay for that "Imperial console" feel. NOTE: body must stay transparent so the ::before (z-index: -2) isn't painted behind its own opaque background. */ body.page-index { background: transparent; } body.page-index::before { content: ""; position: fixed; inset: 0; /* Layer 1 (top): solid accent color blended into the image to tint it red on dark side / orange on light side. Layer 2 (bottom): the portal-background photo. */ background-image: linear-gradient(var(--accent), var(--accent)), url("/static/images/portal-background.jpg"); background-blend-mode: color, normal; background-size: cover, cover; background-position: center, center; background-repeat: no-repeat, no-repeat; opacity: 0; z-index: -2; pointer-events: none; animation: portal-bg-fade-in 1.8s ease-out 0.1s forwards; transition: background-color .4s ease-out; } body.page-index::after { content: ""; position: fixed; inset: 0; background: /* Top/bottom accent corona — pulls red on dark, orange on light */ radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--accent) 18%, transparent) 0%, transparent 50%), radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--accent) 10%, transparent) 0%, transparent 55%), /* HUD scanlines + faint grid (accent-tinted) */ linear-gradient(color-mix(in srgb, var(--accent) 6%, transparent) 1px, transparent 1px) 0 0 / 100% 3px, linear-gradient(90deg, transparent 0, transparent calc(100% - 1px), color-mix(in srgb, var(--accent) 8%, transparent) 100%) 0 0 / 64px 100%, /* Edge darkening so cards stay legible — soft so the tinted image reads */ radial-gradient(ellipse at 50% 40%, rgba(5, 7, 10, .28) 0%, rgba(5, 7, 10, .58) 70%, rgba(5, 7, 10, .78) 100%); z-index: -1; pointer-events: none; } @keyframes portal-bg-fade-in { to { opacity: var(--side-bg-opacity, 0.65); } } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-strong); text-decoration: underline; } .muted { color: var(--text-muted); } button { font: inherit; } /* ===== Buttons ===== */ .btn { background: var(--bg-elev-2); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px 12px; cursor: pointer; transition: background .12s, border-color .12s, transform .04s; display: inline-flex; align-items: center; gap: 6px; } .btn:hover { border-color: var(--border-strong); background: #232a35; } .btn:active { transform: translateY(1px); } .btn.ghost { background: transparent; } .btn.primary { background: var(--accent); color: var(--accent-contrast); border-color: transparent; font-weight: 600; } .btn.primary:hover { background: var(--accent-strong); } .btn.icon-btn { padding: 6px 10px; min-width: 32px; justify-content: center; } .btn:disabled { opacity: .5; cursor: not-allowed; } /* ===== App bar (top) — Imperial console strip ===== */ .appbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 16px; padding: 10px 20px; background: linear-gradient(180deg, #0a0c10 0%, #060709 100%); border-bottom: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); backdrop-filter: blur(6px); box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .03), 0 2px 16px rgba(0, 0, 0, .6), 0 0 24px color-mix(in srgb, var(--accent) 8%, transparent); position: sticky; } /* Thin red HUD scan line riding the bottom edge */ .appbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--accent) 70%, transparent) 20%, var(--accent) 50%, color-mix(in srgb, var(--accent) 70%, transparent) 80%, transparent 100%); opacity: .55; pointer-events: none; } /* Icon-logo "home" button at the start of the appbar */ .appbar-brand { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 2px; margin-right: 4px; border-radius: 6px; background: linear-gradient(180deg, #11161c 0%, #06080b 100%); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 0 12px color-mix(in srgb, var(--accent) 20%, transparent); transition: border-color .15s, box-shadow .15s, transform .04s; } .appbar-brand:hover { border-color: var(--accent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 0 18px color-mix(in srgb, var(--accent) 50%, transparent); } .appbar-brand:active { transform: translateY(1px); } .appbar-brand img { width: 100%; height: 100%; display: block; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 55%, transparent)); } .breadcrumb { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; min-width: 0; } .breadcrumb a { color: var(--text-muted); font-weight: 600; } .breadcrumb a:hover { color: var(--accent); text-decoration: none; } .crumb-sep { color: color-mix(in srgb, var(--accent) 60%, var(--text-muted)); } .crumb-current { color: var(--text); font-weight: 500; } .crumb-current:last-child { color: var(--accent); text-shadow: 0 0 8px color-mix(in srgb, var(--accent) 40%, transparent); } .appbar-actions { display: flex; gap: 8px; } .chat-toggle { font-weight: 600; } .chat-toggle[aria-expanded="true"] { background: var(--accent-strong); } /* ===== Live battle ribbon (recent rolls in the appbar) ===== */ .ribbon { flex: 1; min-width: 0; margin: 0 16px; display: flex; gap: 6px; align-items: stretch; padding: 4px 10px; height: 40px; background: linear-gradient(180deg, #060809 0%, #0c1015 50%, #060809 100%); border: 1px solid color-mix(in srgb, var(--accent) 20%, #000); border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .8), inset 0 1px 6px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .03); position: relative; overflow: hidden; } /* Faint scanline overlay for the "tech display" feel */ .ribbon::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient( 180deg, transparent 0, transparent 2px, rgba(255, 255, 255, .015) 2px, rgba(255, 255, 255, .015) 3px ); pointer-events: none; } /* Subtle running glow accent on the left edge */ .ribbon::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: linear-gradient(180deg, transparent 0%, var(--accent) 50%, transparent 100%); opacity: .6; pointer-events: none; } .ribbon-empty { font-family: var(--mono); font-size: 10px; color: color-mix(in srgb, var(--accent) 60%, var(--text-muted)); letter-spacing: .14em; align-self: center; padding-left: 4px; opacity: .55; animation: ribbon-pulse 2s ease-in-out infinite; } @keyframes ribbon-pulse { 0%, 100% { opacity: .35; } 50% { opacity: .75; } } /* When the empty state is hosting a tactical tip it's bold + colored, stops pulsing (tip is informational, not a placeholder), and gains an LED. */ .ribbon-empty.has-tip { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; opacity: 1; animation: none; color: var(--accent); text-shadow: 0 0 6px color-mix(in srgb, var(--accent) 35%, transparent); padding: 0 4px 0 6px; border-left: 2px solid var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .ribbon-empty-mark { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 6px var(--accent), 0 0 12px color-mix(in srgb, var(--accent) 50%, transparent); flex-shrink: 0; animation: tac-pulse 1.8s ease-in-out infinite; } .ribbon-empty.kind-warn { color: #ffce6e; border-left-color: #ffb02a; text-shadow: 0 0 6px rgba(255, 176, 42, .4); } .ribbon-empty.kind-warn .ribbon-empty-mark { background: #ffb02a; box-shadow: 0 0 6px #ffb02a, 0 0 14px rgba(255, 176, 42, .55); } .ribbon-empty.kind-danger { color: #ff9b9b; border-left-color: #ff5050; text-shadow: 0 0 8px rgba(229, 80, 80, .55); animation: tac-danger-flash 1.4s ease-in-out infinite; } .ribbon-empty.kind-danger .ribbon-empty-mark { background: #ff5050; box-shadow: 0 0 8px #ff5050, 0 0 18px rgba(229, 80, 80, .65); animation-duration: 1s; } /* Single roll chip — icon (left) + big total (right), with a quality bar below */ .ribbon-chip { flex: 0 0 auto; min-width: 70px; max-width: 110px; padding: 5px 10px 5px; background: linear-gradient(180deg, #0c1118 0%, #060809 100%); border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border)); border-radius: 4px; position: relative; display: flex; flex-direction: column; gap: 4px; justify-content: center; font-variant-numeric: tabular-nums; animation: chip-slide-in .35s cubic-bezier(.4, 0, .2, 1); transition: opacity .3s, filter .3s, background .25s; opacity: .55; filter: saturate(.7); } .ribbon-chip.latest { opacity: 1; filter: saturate(1); border-color: var(--accent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 60%, transparent), 0 0 12px color-mix(in srgb, var(--accent) 40%, transparent); } /* Slightly highlight the second-newest too — quick at-a-glance ordering */ .ribbon-chip:not(.latest):last-of-type ~ * { opacity: .55; } .ribbon-chip.crit { border-color: #f4d35e; box-shadow: 0 0 0 1px #f4d35e, 0 0 14px rgba(244, 211, 94, .65); background: linear-gradient(180deg, rgba(244, 211, 94, .12) 0%, #060809 100%); } .ribbon-chip.fumble { border-color: #b94343; box-shadow: 0 0 0 1px #b94343, 0 0 12px rgba(185, 67, 67, .5); background: linear-gradient(180deg, rgba(185, 67, 67, .12) 0%, #060809 100%); } .ribbon-chip .chip-row { display: flex; align-items: center; gap: 8px; } .ribbon-chip .chip-icon { width: 18px; height: 18px; flex-shrink: 0; color: var(--text-muted); } .ribbon-chip.latest .chip-icon { color: var(--accent); } .ribbon-chip.crit .chip-icon { color: #f4d35e; } .ribbon-chip.fumble .chip-icon { color: #ff8888; } .ribbon-chip .chip-total { flex: 1; text-align: right; font-family: var(--mono); font-size: 22px; font-weight: 700; line-height: 1; color: var(--accent); text-shadow: 0 0 8px color-mix(in srgb, var(--accent) 50%, transparent); letter-spacing: .02em; } .ribbon-chip.crit .chip-total { color: #f4d35e; text-shadow: 0 0 10px rgba(244, 211, 94, .8); } .ribbon-chip.fumble .chip-total { color: #ff8888; text-shadow: 0 0 8px rgba(229, 115, 115, .6); } .ribbon-chip .chip-bar { height: 2px; background: rgba(0, 0, 0, .8); border-radius: 1px; overflow: hidden; } .ribbon-chip .chip-bar-fill { height: 100%; background: linear-gradient(90deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 60%, white) 100%); box-shadow: 0 0 4px color-mix(in srgb, var(--accent) 70%, transparent); transition: width .4s cubic-bezier(.4, 0, .2, 1); } .ribbon-chip.good .chip-bar-fill { background: linear-gradient(90deg, #5fb469 0%, #87ff95 100%); box-shadow: 0 0 4px rgba(95, 180, 105, .8); } .ribbon-chip.bad .chip-bar-fill { background: linear-gradient(90deg, #b94343 0%, #ff7777 100%); box-shadow: 0 0 4px rgba(185, 67, 67, .8); } .ribbon-chip.crit .chip-bar-fill { background: linear-gradient(90deg, #f4d35e 0%, #fff3a0 100%); box-shadow: 0 0 6px rgba(244, 211, 94, .9); } @keyframes chip-slide-in { from { transform: translateX(20px) scale(.9); opacity: 0; } to { transform: translateX(0) scale(1); opacity: 1; } } /* Chip aging out (after 45s) — collapses width and fades, others reflow */ .ribbon-chip-leaving { pointer-events: none; animation: chip-leave .45s cubic-bezier(.4, 0, .2, 1) forwards; } @keyframes chip-leave { 0% { opacity: var(--start-opacity, 1); } 60% { opacity: 0; transform: scale(.9); } 100% { opacity: 0; transform: scale(.85); min-width: 0; max-width: 0; margin-left: -6px; padding-left: 0; padding-right: 0; border-width: 0; } } /* ===== Crit / Fumble takeover banner ===== */ .ribbon-banner { position: absolute; inset: 2px; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; text-align: center; padding: 0 16px; border-radius: 4px; z-index: 5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; animation: banner-in .4s cubic-bezier(.2, .7, .2, 1); } .ribbon-banner.crit { background: linear-gradient(90deg, rgba(244, 211, 94, .15) 0%, rgba(244, 211, 94, .45) 50%, rgba(244, 211, 94, .15) 100%); color: #f4d35e; border: 1px solid #f4d35e; text-shadow: 0 0 12px rgba(244, 211, 94, 1), 0 0 4px rgba(0, 0, 0, .9); box-shadow: inset 0 0 28px rgba(244, 211, 94, .35), 0 0 12px rgba(244, 211, 94, .55); animation: banner-in .4s cubic-bezier(.2, .7, .2, 1), banner-shimmer 2.4s ease-in-out infinite; } .ribbon-banner.fumble { background: linear-gradient(90deg, rgba(229, 115, 115, .15) 0%, rgba(229, 115, 115, .42) 50%, rgba(229, 115, 115, .15) 100%); color: #ff8888; border: 1px solid #b94343; text-shadow: 0 0 10px rgba(229, 115, 115, .8), 0 0 4px rgba(0, 0, 0, .9); box-shadow: inset 0 0 24px rgba(229, 115, 115, .3); animation: banner-in .4s cubic-bezier(.2, .7, .2, 1), banner-jitter .12s ease-in-out 4; } .ribbon-banner.fading { animation: banner-out .6s ease-in forwards; } @keyframes banner-in { from { opacity: 0; transform: scale(.96); filter: brightness(1.6); } to { opacity: 1; transform: scale(1); filter: brightness(1); } } @keyframes banner-out { to { opacity: 0; transform: scale(1.02); } } @keyframes banner-shimmer { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.25); } } @keyframes banner-jitter { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-1px); } 75% { transform: translateX(1px); } } /* On narrower screens, hide rest button labels and shrink the ribbon */ @media (max-width: 1200px) { .ribbon-chip { min-width: 70px; max-width: 110px; } } /* ===== Floating result numbers ===== */ .floater { position: absolute; transform: translate(-50%, -50%); text-align: center; pointer-events: none; animation: float-up 1.2s cubic-bezier(.2, 0, .1, 1) forwards; font-family: var(--mono); filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .9)); } .floater .float-num { font-size: 42px; font-weight: 800; line-height: 1; color: var(--accent); text-shadow: 0 0 12px color-mix(in srgb, var(--accent) 70%, transparent), 0 0 24px color-mix(in srgb, var(--accent) 35%, transparent); } .floater .float-tag { margin-top: 4px; font-family: system-ui, sans-serif; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--text-muted); text-shadow: 0 1px 2px #000; } .floater.crit { animation: float-up-crit 1.4s cubic-bezier(.2, 0, .1, 1) forwards; } .floater.crit .float-num { font-size: 64px; color: #f4d35e; text-shadow: 0 0 20px rgba(244, 211, 94, 1), 0 0 40px rgba(244, 211, 94, .6); } .floater.crit .float-tag::before { content: "✦ CRIT ✦ "; color: #f4d35e; font-weight: 700; letter-spacing: .15em; } .floater.fumble { animation: float-shake 1.2s ease-out forwards; } .floater.fumble .float-num { color: #ff7676; font-size: 36px; text-shadow: 0 0 14px rgba(229, 115, 115, .8); } .floater.fumble .float-tag::before { content: "✕ FUMBLE "; color: #ff7676; font-weight: 700; letter-spacing: .15em; } @keyframes float-up { 0% { transform: translate(-50%, -50%) scale(.4); opacity: 0; } 18% { transform: translate(-50%, -52%) scale(1.15); opacity: 1; } 30% { transform: translate(-50%, -55%) scale(1); opacity: 1; } 100% { transform: translate(-50%, -120%) scale(.95); opacity: 0; } } @keyframes float-up-crit { 0% { transform: translate(-50%, -50%) scale(.3) rotate(-5deg); opacity: 0; } 20% { transform: translate(-50%, -55%) scale(1.4) rotate(2deg); opacity: 1; } 35% { transform: translate(-50%, -60%) scale(1.05) rotate(-1deg); opacity: 1; } 100% { transform: translate(-50%, -130%) scale(.9) rotate(0); opacity: 0; } } @keyframes float-shake { 0% { transform: translate(-50%, -50%) scale(.6); opacity: 0; } 15% { transform: translate(-50%, -50%) scale(1.1) translateX(-6px); opacity: 1; } 25% { transform: translate(-50%, -50%) scale(1) translateX(6px); } 35% { transform: translate(-50%, -52%) translateX(-4px); } 50% { transform: translate(-50%, -55%) translateX(0); opacity: 1; } 100% { transform: translate(-50%, -90%) scale(.9); opacity: 0; } } /* Sparkles for crits */ .sparkle { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #f4d35e; box-shadow: 0 0 8px rgba(244, 211, 94, 1), 0 0 16px rgba(244, 211, 94, .6); pointer-events: none; animation: sparkle-fly 1s cubic-bezier(.2, .6, .2, 1) var(--delay, 0s) forwards; opacity: 0; } @keyframes sparkle-fly { 0% { transform: translate(-50%, -50%) scale(.5); opacity: 0; } 20% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; } 100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.4); opacity: 0; } } /* Screen flash vignette for crit / fumble */ .screen-flash { position: fixed; inset: 0; pointer-events: none; z-index: 55; animation: flash-fade .9s ease-out forwards; } .screen-flash.crit { background: radial-gradient(circle at center, transparent 50%, rgba(244, 211, 94, .25) 100%); box-shadow: inset 0 0 200px rgba(244, 211, 94, .35); } .screen-flash.fumble { background: radial-gradient(circle at center, transparent 60%, rgba(229, 115, 115, .25) 100%); box-shadow: inset 0 0 180px rgba(229, 115, 115, .35); } @keyframes flash-fade { 0% { opacity: 0; } 18% { opacity: 1; } 100% { opacity: 0; } } /* ===== Hero — WoW-meets-D&D ===== */ .hero { position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 28px; align-items: center; max-width: 1600px; margin: 0 auto; padding: 32px 24px 24px; } /* Atmospheric backdrop tint */ .hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--accent) 22%, transparent) 0%, transparent 55%), radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--accent) 8%, transparent) 0%, transparent 60%); pointer-events: none; z-index: 0; } .hero > * { position: relative; z-index: 1; } /* ----- Ornate portrait (also acts as the "chat with character" button) ----- */ .hero-portrait { position: relative; width: 132px; flex-shrink: 0; /* Reset native button look so it's purely the avatar */ background: transparent; border: 0; padding: 0; cursor: pointer; outline: none; } .hero-portrait:hover .portrait-frame { filter: brightness(1.1); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .5), 0 0 0 3px rgba(0, 0, 0, .55), 0 0 32px color-mix(in srgb, var(--accent) 60%, transparent), 0 12px 30px rgba(0, 0, 0, .55); } .hero-portrait:focus-visible .portrait-frame { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .5), 0 0 0 4px var(--accent), 0 12px 30px rgba(0, 0, 0, .55); } .hero-portrait .portrait-hint { position: absolute; top: -8px; left: -8px; width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: var(--accent-contrast); font-size: 16px; display: flex; align-items: center; justify-content: center; border: 2px solid #1a0e00; box-shadow: 0 4px 12px rgba(0, 0, 0, .5); opacity: 0; transform: scale(.7); transition: opacity .15s, transform .15s; pointer-events: none; } .hero-portrait:hover .portrait-hint, body.drawer-open .hero-portrait .portrait-hint { opacity: 1; transform: scale(1); } /* When chat is open, give the portrait a subtle "speaking" pulse */ body.drawer-open .hero-portrait .portrait-frame { animation: portrait-pulse 1.6s ease-in-out infinite; } @keyframes portrait-pulse { 0%, 100% { box-shadow: inset 0 0 0 1px rgba(0,0,0,.5), 0 0 0 3px rgba(0,0,0,.55), 0 0 16px color-mix(in srgb, var(--accent) 40%, transparent), 0 12px 30px rgba(0,0,0,.55); } 50% { box-shadow: inset 0 0 0 1px rgba(0,0,0,.5), 0 0 0 3px rgba(0,0,0,.55), 0 0 36px color-mix(in srgb, var(--accent) 80%, transparent), 0 12px 30px rgba(0,0,0,.55); } } .portrait-frame { position: relative; width: 132px; height: 132px; border-radius: 50%; /* Sith holo-scanner ring: thin dark base, bright red inner stroke */ background: radial-gradient(circle at 50% 50%, transparent 53%, rgba(0,0,0,.85) 54%, rgba(0,0,0,.85) 57%, var(--accent) 58%, color-mix(in srgb, var(--accent) 75%, #200) 64%, rgba(0,0,0,.9) 70%, var(--accent) 72%, color-mix(in srgb, var(--accent) 55%, #200) 78%, rgba(0,0,0,.9) 86%); padding: 6px; /* Outer halo intensity scales with vibe — hot streaks brighten + widen the glow, cold streaks dim it. transition smooths the score's continuous decay. */ transition: box-shadow .35s ease-out; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .6), 0 0 0 1px rgba(0, 0, 0, .75), 0 0 calc(22px * var(--vibe-intensity, 1)) color-mix(in srgb, var(--accent) calc(45% * var(--vibe-intensity, 1)), transparent), 0 0 calc(44px * var(--vibe-intensity, 1)) color-mix(in srgb, var(--accent) calc(18% * var(--vibe-intensity, 1)), transparent), 0 12px 30px rgba(0, 0, 0, .65); } /* Cardinal crosshair tick marks around the portrait */ .portrait-frame::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; pointer-events: none; background: /* top */ linear-gradient(180deg, var(--accent) 0, var(--accent) 8px, transparent 8px) 50% 0 / 2px 100% no-repeat, /* bottom */ linear-gradient(0deg, var(--accent) 0, var(--accent) 8px, transparent 8px) 50% 100% / 2px 100% no-repeat, /* left */ linear-gradient(90deg, var(--accent) 0, var(--accent) 8px, transparent 8px) 0 50% / 100% 2px no-repeat, /* right */ linear-gradient(270deg, var(--accent) 0, var(--accent) 8px, transparent 8px) 100% 50% / 100% 2px no-repeat; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--accent) 80%, transparent)); opacity: .85; } /* Slow rotating dashed scan ring */ .portrait-frame::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 1px dashed color-mix(in srgb, var(--accent) 55%, transparent); opacity: calc(.55 * var(--vibe-intensity, 1)); animation: scan-rotate calc(18s * var(--scan-speed, 1)) linear infinite; pointer-events: none; } @keyframes scan-rotate { to { transform: rotate(360deg); } } .avatar { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; background: var(--bg-elev-2); /* Inner shadow + slight red tint vignette */ box-shadow: inset 0 0 24px rgba(0, 0, 0, .55), inset 0 0 0 2px rgba(0, 0, 0, .8); filter: contrast(1.05) saturate(.95); } .avatar-frame-img { position: absolute; inset: -10px; width: 152px; height: 152px; pointer-events: none; display: none; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 40%, transparent)); } body[data-has-frame] .avatar-frame-img { display: block; } /* Hex-rank insignia for level */ .portrait-level { position: absolute; right: -6px; bottom: -6px; min-width: 36px; height: 36px; padding: 0 8px; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 95%, black) 0%, color-mix(in srgb, var(--accent) 55%, #100) 100%); color: #fff; font-family: var(--mono); font-weight: 800; font-size: 15px; letter-spacing: .04em; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 0 1px rgba(0, 0, 0, .85), 0 0 12px color-mix(in srgb, var(--accent) 70%, transparent), 0 4px 12px rgba(0, 0, 0, .7); text-shadow: 0 1px 2px rgba(0, 0, 0, .9); font-variant-numeric: tabular-nums; } /* ----- Center column ----- */ .hero-center { min-width: 0; } .hero-name { margin: 0; font-family: var(--mono); font-size: 28px; font-weight: 800; color: var(--accent); letter-spacing: .14em; text-transform: uppercase; line-height: 1.05; /* Vibe-reactive glow: width + intensity ride var(--vibe-intensity). */ text-shadow: 0 2px 8px rgba(0, 0, 0, .65), 0 0 calc(14px * var(--vibe-intensity, 1)) color-mix(in srgb, var(--accent) calc(55% * var(--vibe-intensity, 1)), transparent), 0 0 calc(28px * var(--vibe-intensity, 1)) color-mix(in srgb, var(--accent) calc(22% * var(--vibe-intensity, 1)), transparent); transition: text-shadow .35s ease-out; position: relative; display: inline-block; padding-left: 14px; } /* Imperial bracket "[" to the left of the name */ .hero-name::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 4px; background: linear-gradient(180deg, transparent 0%, var(--accent) 15%, var(--accent) 85%, transparent 100%); box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 70%, transparent); } .hero-sub { margin: 6px 0 16px; padding-left: 14px; color: var(--text-muted); font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; } /* ----- HP bar — hull integrity readout ----- */ .bar-row { margin: 0 0 12px; padding-left: 14px; } .bar { position: relative; height: 22px; background: linear-gradient(180deg, #04060a 0%, #0a1018 100%); border: 1px solid #000; border-radius: 3px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), inset 0 -1px 0 rgba(0, 0, 0, .7), 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent), 0 0 10px color-mix(in srgb, var(--accent) 12%, transparent), 0 1px 2px rgba(0, 0, 0, .8); overflow: hidden; cursor: default; } .bar-fill { height: 100%; width: 100%; transition: width .35s cubic-bezier(.4, 0, .2, 1); position: relative; } /* Top scan-shimmer line */ .bar-fill::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 40%; background: linear-gradient(180deg, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, 0) 100%); pointer-events: none; } /* Hull integrity segment ticks (entire bar, not just the fill, so empty cells show) */ .bar::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0, transparent 11px, rgba(0, 0, 0, .55) 11px, rgba(0, 0, 0, .55) 12px); pointer-events: none; } .bar-hp .bar-fill { background: linear-gradient(180deg, #ff2733 0%, #c41420 55%, #6e0712 100%); box-shadow: inset 0 0 10px rgba(255, 60, 70, .4); } .bar-hp .bar-fill[data-pct-low="true"] { /* Low health: deeper red + subtle pulse */ background: linear-gradient(180deg, #c91111 0%, #7a0606 100%); animation: hp-pulse 1.4s ease-in-out infinite; } @keyframes hp-pulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.3); } } .bar-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 10px; font-family: var(--mono); font-size: 12px; color: #fff; text-shadow: 0 0 8px color-mix(in srgb, var(--accent) 50%, transparent), 0 1px 2px rgba(0, 0, 0, .9); font-variant-numeric: tabular-nums; pointer-events: none; z-index: 2; } .bar-name { font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: 10px; opacity: .85; } .bar-value { font-weight: 700; font-size: 13px; } /* ----- HP controls (damage / heal / temp / hit die) ----- */ .hp-controls { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 12px; align-items: center; } .hp-input { width: 56px; padding: 4px 8px; background: var(--bg-elev-2); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); font: inherit; font-size: 13px; text-align: center; font-variant-numeric: tabular-nums; } .hp-input:focus { outline: 1px solid var(--accent); border-color: var(--accent); } .hp-btn { padding: 4px 10px; font-size: 12px; font-weight: 600; letter-spacing: .03em; } .hp-btn.dmg { background: linear-gradient(180deg, #5a1818 0%, #2d0a0a 100%); border-color: #4a1010; color: #ffd0d0; } .hp-btn.dmg:hover { background: linear-gradient(180deg, #7a2020 0%, #3d0a0a 100%); border-color: #ff4a4a; } .hp-btn.heal { background: linear-gradient(180deg, #1d4f24 0%, #0a2810 100%); border-color: #1d4f24; color: #c8f0d0; } .hp-btn.heal:hover { background: linear-gradient(180deg, #2d6f34 0%, #0a3818 100%); border-color: #5fb469; } .hp-btn.quick { background: var(--bg-elev-2); font-size: 11px; padding: 4px 8px; } .hp-btn.quick[data-step^="-"] { color: #ffaeae; } .hp-btn.quick[data-step^="-"]:hover { border-color: #ff4a4a; } .hp-btn.quick:not([data-step^="-"]) { color: #c8f0d0; } .hp-btn.quick:not([data-step^="-"]):hover { border-color: #5fb469; } .hp-btn.temp { color: #87c8f0; } .hp-btn.dice { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 30%, #1a1f27) 0%, #0a0d11 100%); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); color: var(--accent); } .hp-btn.dice:hover { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 45%, #1a1f27) 0%, #14181f 100%); } .hp-sep { width: 1px; height: 22px; background: var(--border); margin: 0 4px; } /* ----- Resource pips — power crystals ----- */ .resources { display: flex; flex-wrap: wrap; gap: 14px 18px; padding-left: 14px; } .resource { display: flex; flex-direction: column; gap: 4px; } /* Each resource sits on a subtle accent-tinted background so the list reads as discrete rows, not a wall of text. */ .resource { padding: 5px 8px; border-radius: 4px; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 6%, transparent) 0%, color-mix(in srgb, var(--accent) 2%, transparent) 100%); border-left: 2px solid color-mix(in srgb, var(--accent) 32%, transparent); } .resource-name { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .16em; color: var(--text-muted); display: flex; align-items: center; gap: 4px; min-width: 0; /* allow children to shrink/ellipsis */ } .resource-name-text { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .resource-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-left: 18px; /* align under the resource name text (past the 14px icon + 4px gap) */ flex-wrap: wrap; } .resource-reset { font-size: 9px; color: var(--text-muted); opacity: .7; letter-spacing: .12em; } .resource-pips { display: flex; gap: 5px; align-items: center; } /* Compact pool controls for resources whose max > 6 (numeric instead of pips). Styled to match the pip aesthetic — small, subtle, no chrome. */ .resource-pool-btn { appearance: none; width: 18px; height: 18px; padding: 0; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); border-radius: 3px; background: transparent; color: color-mix(in srgb, var(--accent) 75%, var(--text)); font: 700 12px/1 var(--mono); cursor: pointer; display: grid; place-items: center; transition: background .12s, color .12s, border-color .12s; } .resource-pool-btn:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); border-color: var(--accent); } .resource-pool-count { min-width: 42px; text-align: center; font: 700 11px/1 var(--mono); letter-spacing: .04em; color: color-mix(in srgb, var(--accent) 80%, var(--text)); font-variant-numeric: tabular-nums; } .pip { width: 12px; height: 12px; /* Diamond/crystal shape */ clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); background: radial-gradient(circle at 35% 35%, color-mix(in srgb, var(--accent) 35%, white) 0%, var(--accent) 45%, color-mix(in srgb, var(--accent) 60%, #100) 100%); border: 0; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--accent) 80%, transparent)) drop-shadow(0 0 8px color-mix(in srgb, var(--accent) 40%, transparent)); cursor: pointer; transition: transform .08s, filter .12s; padding: 0; } .pip:hover { transform: scale(1.25); filter: drop-shadow(0 0 6px var(--accent)) brightness(1.2); } .pip:active { transform: scale(.95); } .pip.spent { background: linear-gradient(180deg, #14181f 0%, #06080b 100%); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .8); filter: drop-shadow(0 0 0 transparent); outline: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); } .pip.heavy { /* For long lists like Hit Dice where lots of pips would be silly */ display: none; } /* ----- Right column: shield AC + stat pills ----- */ .hero-right { display: flex; flex-direction: column; gap: 10px; align-items: stretch; min-width: 130px; } /* Speed can hold multiple modes (walk, fly, swim, climb…); allow wrap. */ .stat-pill-speed { align-items: flex-start; } .stat-pill-speed .stat-value { white-space: normal; text-align: right; line-height: 1.35; } /* AC — Imperial hex panel. Outer hex frame + 6 glowing bolt-light indicators at each vertex + recessed scanline display in the center showing the AC value. */ .shield-badge { position: relative; width: 92px; height: 106px; /* pointy-top hex aspect */ clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); display: flex; flex-direction: column; align-items: center; justify-content: center; /* Outer hex = metallic frame (this color shows around the inner screen) */ background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 55%, #1a0c08) 0%, color-mix(in srgb, var(--accent) 28%, #07080b) 55%, color-mix(in srgb, var(--accent) 12%, #04060a) 100%); /* drop-shadow respects clip-path, so the glow follows the hex silhouette */ filter: drop-shadow(0 0 16px color-mix(in srgb, var(--accent) 45%, transparent)) drop-shadow(0 0 36px color-mix(in srgb, var(--accent) 16%, transparent)) drop-shadow(0 4px 8px rgba(0, 0, 0, .65)); cursor: default; } /* Inner "screen" plate — smaller hex with HUD scanlines */ .shield-badge::before { content: ""; position: absolute; inset: 7px; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); background: /* HUD scanlines */ repeating-linear-gradient(0deg, transparent 0, transparent 2px, rgba(255, 255, 255, .03) 2px, rgba(255, 255, 255, .03) 3px), /* Hot-spot tint at the top of the screen */ radial-gradient(circle at 50% 25%, color-mix(in srgb, var(--accent) 22%, #0a0d11) 0%, #04060a 85%); pointer-events: none; } /* Six glowing bolt-light indicators, one inset just inside each hex vertex */ .shield-badge::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle, #fff 0 1px, var(--accent) 1px 2px, transparent 2.4px) 50% 6px / 5px 5px no-repeat, /* top */ radial-gradient(circle, #fff 0 1px, var(--accent) 1px 2px, transparent 2.4px) calc(100% - 5px) calc(25% + 3px) / 5px 5px no-repeat, /* top-right */ radial-gradient(circle, #fff 0 1px, var(--accent) 1px 2px, transparent 2.4px) calc(100% - 5px) calc(75% - 3px) / 5px 5px no-repeat, /* bottom-right */ radial-gradient(circle, #fff 0 1px, var(--accent) 1px 2px, transparent 2.4px) 50% calc(100% - 6px) / 5px 5px no-repeat, /* bottom */ radial-gradient(circle, #fff 0 1px, var(--accent) 1px 2px, transparent 2.4px) 5px calc(75% - 3px) / 5px 5px no-repeat, /* bottom-left */ radial-gradient(circle, #fff 0 1px, var(--accent) 1px 2px, transparent 2.4px) 5px calc(25% + 3px) / 5px 5px no-repeat; /* top-left */ filter: drop-shadow(0 0 4px color-mix(in srgb, var(--accent) 95%, transparent)); } .shield-label { font-family: var(--mono); font-size: 9px; text-transform: uppercase; letter-spacing: .28em; color: var(--accent); font-weight: 700; margin-top: 6px; text-shadow: 0 0 8px color-mix(in srgb, var(--accent) 70%, transparent); position: relative; z-index: 1; } /* Tiny HUD brackets around the label */ .shield-label::before { content: "["; opacity: .5; margin-right: 4px; } .shield-label::after { content: "]"; opacity: .5; margin-left: 4px; } .shield-value { font-family: var(--mono); font-size: 32px; font-weight: 800; color: #fff; text-shadow: 0 0 10px color-mix(in srgb, var(--accent) 90%, transparent), 0 0 22px color-mix(in srgb, var(--accent) 45%, transparent), 0 1px 2px rgba(0, 0, 0, .9); line-height: 1; position: relative; z-index: 1; } /* Terminal-readout stat pills */ .stat-pill { display: inline-flex; gap: 8px; align-items: baseline; padding: 6px 12px; background: linear-gradient(180deg, #0c1015 0%, #06080b 100%); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); border-left: 2px solid var(--accent); border-radius: 3px; font-variant-numeric: tabular-nums; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03), 0 0 10px color-mix(in srgb, var(--accent) 12%, transparent); min-width: 92px; justify-content: space-between; } .stat-label { font-family: var(--mono); font-size: 9px; text-transform: uppercase; letter-spacing: .2em; color: var(--text-muted); font-weight: 600; } .stat-value { font-family: var(--mono); font-weight: 700; font-size: 14px; color: var(--accent); text-shadow: 0 0 8px color-mix(in srgb, var(--accent) 40%, transparent); } /* ===== View switcher — console tab strip ===== */ .views { position: sticky; top: 53px; z-index: 10; max-width: 1600px; margin: 0 auto; padding: 0 24px; display: flex; gap: 4px; background: linear-gradient(180deg, #06080b 0%, rgba(6, 8, 11, .85) 100%); border-bottom: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border)); } .view-btn { background: transparent; border: 0; border-bottom: 2px solid transparent; color: var(--text-muted); padding: 12px 18px; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; cursor: pointer; margin-bottom: -1px; transition: color .12s, border-color .12s, text-shadow .12s; } .view-btn:hover { color: var(--text); } .view-btn.active { color: var(--accent); border-bottom-color: var(--accent); text-shadow: 0 0 10px color-mix(in srgb, var(--accent) 55%, transparent); } .view-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; border-radius: 4px; } /* ===== Content area (drawer is a popover overlay, doesn't push content) ===== */ .content { max-width: 1600px; margin: 0 auto; padding: 24px; } .view-pane { display: none; gap: 24px; flex-direction: column; } .view-pane.active { display: flex; } /* Stats view: two-column on wide screens */ .view-pane[data-pane="stats"].active { display: grid; grid-template-columns: 1.6fr 1fr; gap: 24px; } /* ===== Icons (use currentColor via CSS mask) ===== */ .icon { display: inline-block; vertical-align: middle; flex-shrink: 0; color: inherit; line-height: 0; } .icon svg { width: 100%; height: 100%; display: block; } .icon-mask { background-color: currentColor; mask: var(--icon-url) center / contain no-repeat; -webkit-mask: var(--icon-url) center / contain no-repeat; } /* ===== Cards (ornate-edged panels) ===== */ .card { position: relative; background: linear-gradient(180deg, var(--bg-elev) 0%, color-mix(in srgb, var(--bg-elev) 80%, #000) 100%); border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border)); border-radius: var(--radius); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03), inset 0 0 0 1px rgba(0, 0, 0, .35), var(--shadow); display: flex; flex-direction: column; overflow: hidden; } /* Subtle ornate corner brackets: thin gold L's at the 4 corners */ .card::before, .card::after { content: ""; position: absolute; width: 18px; height: 18px; border: 1.5px solid color-mix(in srgb, var(--accent) 70%, transparent); pointer-events: none; opacity: .65; } .card::before { top: 6px; left: 6px; border-right: 0; border-bottom: 0; border-top-left-radius: 4px; } .card::after { bottom: 6px; right: 6px; border-left: 0; border-top: 0; border-bottom-right-radius: 4px; } .card h2 { margin: 0; padding: 14px 20px; font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .22em; color: var(--accent); font-weight: 700; border-bottom: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border)); display: flex; align-items: center; gap: 10px; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 10%, transparent) 0%, transparent 100%); text-shadow: 0 0 10px color-mix(in srgb, var(--accent) 45%, transparent), 0 1px 2px rgba(0, 0, 0, .8); position: relative; } .card h2::after { content: ""; position: absolute; left: 20px; right: 20px; bottom: -1px; height: 1px; background: linear-gradient(90deg, var(--accent) 0%, transparent 60%); opacity: .6; pointer-events: none; } .card h2 .icon { color: var(--accent); } .card-body { padding: 18px 20px; } /* ===== WoW-style action-bar slot (square icon button with metallic frame) ===== */ .actionbar { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; padding: 16px 20px 20px; } .action-slot { position: relative; aspect-ratio: 1; background: radial-gradient(circle at 50% 25%, color-mix(in srgb, var(--accent) 18%, #0c1015) 0%, #04060a 75%); border: 0; border-radius: 4px; cursor: pointer; display: flex; align-items: center; justify-content: center; /* Imperial bezel: thin red rim, deep black inset */ box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .95), inset 0 0 0 2px color-mix(in srgb, var(--accent) 75%, #100), inset 0 0 0 3px rgba(0, 0, 0, .95), inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 10px color-mix(in srgb, var(--accent) 18%, transparent), 0 2px 6px rgba(0, 0, 0, .65); transition: transform .08s, filter .12s, box-shadow .12s; color: var(--accent); padding: 0; } .action-slot:hover { filter: brightness(1.25); transform: translateY(-1px); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .95), inset 0 0 0 2px var(--accent), inset 0 0 0 3px rgba(0, 0, 0, .95), inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 18px color-mix(in srgb, var(--accent) 50%, transparent), 0 2px 6px rgba(0, 0, 0, .65); } .action-slot:active { transform: translateY(0); filter: brightness(1.1); } .action-slot .icon { width: 58%; height: 58%; color: #fff; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--accent) 55%, transparent)) drop-shadow(0 1px 2px rgba(0, 0, 0, .8)); } .action-slot .slot-name { position: absolute; bottom: -18px; left: 0; right: 0; font-size: 10px; text-align: center; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .action-slot .slot-charges { position: absolute; top: 4px; right: 4px; font-size: 11px; font-weight: 700; color: #f6e3c1; background: rgba(0, 0, 0, .8); padding: 1px 5px; border-radius: 3px; border: 1px solid color-mix(in srgb, var(--accent) 50%, #000); font-variant-numeric: tabular-nums; pointer-events: none; } .action-slot .slot-bonus { position: absolute; bottom: 4px; right: 4px; font-family: var(--mono); font-size: 10px; font-weight: 700; color: var(--accent); background: rgba(0, 0, 0, .8); padding: 1px 4px; border-radius: 3px; pointer-events: none; } .action-slot.spent { filter: grayscale(.85) brightness(.55); } .action-slot.spent .icon { color: var(--text-muted); } .action-slot.power-slot.spent::after { content: ""; position: absolute; inset: 4px; background: linear-gradient(135deg, transparent 46%, rgba(0, 0, 0, .55) 47%, rgba(0, 0, 0, .55) 53%, transparent 54%); pointer-events: none; border-radius: 4px; } .action-slot.stowed { filter: brightness(.7) saturate(.6); } .action-slot.stowed .slot-name { font-style: italic; } /* Action bar grouping label */ .actionbar-section { margin-bottom: 24px; } .actionbar-section h3 { margin: 0; padding: 16px 20px 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--text-muted); font-weight: 600; } /* Inline icon helpers (lists) */ .list-row .icon-leading { width: 22px; height: 22px; color: var(--accent); margin-right: 12px; } .list-row { display: flex; align-items: flex-start; gap: 0; } .list-row > .icon { flex-shrink: 0; } .list-row > .list-text { flex: 1; min-width: 0; } .list-name .icon { width: 16px; height: 16px; margin-right: 8px; color: var(--accent); } /* ===== Ability tiles (Stats view) ===== */ .abilities-body { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 20px; } @media (min-width: 1200px) { .abilities-body { grid-template-columns: repeat(3, 1fr); } } .ability-tile { background: linear-gradient(180deg, #0c1015 0%, #06080b 100%); border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border)); border-top: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); border-radius: 3px; padding: 14px 14px 12px; text-align: center; cursor: pointer; transition: transform .08s, border-color .12s, background .12s, box-shadow .12s; position: relative; overflow: hidden; } /* Subtle internal scanline */ .ability-tile::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient( 180deg, transparent 0, transparent 2px, rgba(255, 255, 255, .012) 2px, rgba(255, 255, 255, .012) 3px); pointer-events: none; } .ability-tile:hover { border-color: var(--accent); border-top-color: var(--accent); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 8%, #0c1015) 0%, #06080b 100%); box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 22%, transparent); transform: translateY(-1px); } .ability-tile-name { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .22em; color: var(--accent); text-shadow: 0 0 6px color-mix(in srgb, var(--accent) 40%, transparent); position: relative; z-index: 1; } .ability-tile-mod { font-family: var(--mono); font-size: 32px; font-weight: 800; color: #fff; line-height: 1.1; margin: 6px 0 4px; text-shadow: 0 0 10px color-mix(in srgb, var(--accent) 60%, transparent), 0 1px 2px rgba(0, 0, 0, .9); position: relative; z-index: 1; } .ability-tile-score { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: var(--text-muted); font-variant-numeric: tabular-nums; position: relative; z-index: 1; } /* ===== Saves rows ===== */ .save-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; padding: 10px 8px; border-radius: var(--radius-sm); cursor: pointer; transition: background .1s; } .save-row:hover { background: var(--bg-elev-2); } .save-row + .save-row { border-top: 1px solid var(--border); } .save-name { font-weight: 500; } .save-mod { font-family: var(--mono); font-weight: 600; color: var(--accent-strong); font-size: 16px; } .prof-dot { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--text-muted); margin-right: 10px; display: inline-block; vertical-align: middle; } .prof-dot.proficient { background: var(--accent); border-color: var(--accent); } .prof-dot.expertise { background: var(--good); border-color: var(--good); box-shadow: 0 0 0 2px rgba(95,180,105,.25); } .prof-dot.half-prof { background: linear-gradient(90deg, var(--accent) 50%, transparent 50%); border-color: var(--accent); } /* ===== Skills (bigger rows, two-column on wide) ===== */ [data-slot="skills"] { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 24px; } .skill-row { display: grid; grid-template-columns: 14px 1fr auto auto; gap: 10px; align-items: center; padding: 10px 8px; border-radius: var(--radius-sm); cursor: pointer; transition: background .1s; } .skill-row:hover { background: var(--bg-elev-2); } .skill-name { font-size: 14px; } .skill-ability { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em; width: 36px; text-align: right; } .skill-mod { font-family: var(--mono); font-weight: 600; min-width: 36px; text-align: right; color: var(--accent-strong); font-size: 15px; } @media (max-width: 900px) { [data-slot="skills"] { grid-template-columns: 1fr; } } /* ===== Lists (actions, inventory, features) ===== */ .list-row { padding: 12px 8px; border-radius: var(--radius-sm); } .list-row + .list-row { border-top: 1px solid var(--border); } .list-name { font-weight: 500; font-size: 15px; } .list-meta { font-size: 12px; color: var(--text-muted); margin-top: 4px; } .list-snippet { font-size: 13px; color: var(--text-muted); margin-top: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .list-snippet em, .list-snippet strong, .list-snippet b { color: var(--accent); font-weight: 700; font-style: normal; text-shadow: 0 0 6px color-mix(in srgb, var(--accent) 35%, transparent); } .list-snippet i { color: color-mix(in srgb, var(--accent) 75%, var(--text)); } .chip { display: inline-block; padding: 1px 8px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: 999px; color: var(--text-muted); font-weight: 500; } .chip.equipped { color: var(--accent); border-color: var(--accent); } .chip.attack { color: var(--bad); border-color: rgba(229,115,115,.4); } /* ===== Drawer — speech-bubble popover anchored at the portrait ===== */ .drawer { position: fixed; top: 88px; /* below appbar */ /* Anchor to the centered hero (max-width: 1600px). 184px = hero padding (24) + portrait width (132) + tail gap (~28). On screens wider than ~1648px the hero shifts right, so the drawer must follow. */ left: max(184px, calc((100vw - 1600px) / 2 + 184px)); bottom: auto; right: auto; width: var(--drawer-w); max-width: calc(100vw - 220px); height: auto; max-height: calc(100vh - 120px); background: var(--bg-elev); border: 1px solid color-mix(in srgb, var(--accent) 50%, var(--border)); border-radius: 16px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 0 0 1px rgba(0, 0, 0, .35), 0 16px 48px rgba(0, 0, 0, .55), 0 0 32px color-mix(in srgb, var(--accent) 20%, transparent); display: flex; flex-direction: column; /* Hidden state: scaled small + transparent, growing out of the portrait */ opacity: 0; transform: scale(0.85) translateX(-12px); transform-origin: top left; pointer-events: none; transition: transform .25s cubic-bezier(.4, 0, .2, 1), opacity .2s ease; z-index: 30; } body.drawer-open .drawer { opacity: 1; transform: scale(1) translateX(0); pointer-events: auto; } /* Speech bubble tail — pointing LEFT toward the portrait. Two layers so the border color shows through for the outline effect. */ .drawer::before { content: ""; position: absolute; top: 26px; left: -16px; width: 0; height: 0; border-top: 16px solid transparent; border-bottom: 16px solid transparent; border-right: 16px solid color-mix(in srgb, var(--accent) 50%, var(--border)); } .drawer::after { content: ""; position: absolute; top: 28px; left: -13px; width: 0; height: 0; border-top: 14px solid transparent; border-bottom: 14px solid transparent; border-right: 14px solid var(--bg-elev); } .drawer-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 8%, transparent) 0%, transparent 100%); } .drawer-header h2 { margin: 0; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .22em; color: var(--accent); text-shadow: 0 0 8px color-mix(in srgb, var(--accent) 45%, transparent); display: flex; align-items: center; gap: 10px; } .drawer-header h2::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 6px var(--accent), 0 0 12px color-mix(in srgb, var(--accent) 60%, transparent); animation: status-pulse 1.8s ease-in-out infinite; } .drawer-chat { flex: 1; min-height: 0; display: flex; flex-direction: column; border-bottom: 1px solid var(--border); } .drawer-rolls { flex: 0 0 240px; display: flex; flex-direction: column; min-height: 0; } .drawer-rolls h3 { margin: 0; padding: 12px 20px 8px; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--text-muted); } .drawer-rolls .roll-log-body { flex: 1; overflow-y: auto; padding-bottom: 8px; } .drawer-scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, .35); z-index: 25; opacity: 0; pointer-events: none; transition: opacity .2s; } body.drawer-open .drawer-scrim { opacity: 1; pointer-events: auto; } @media (min-width: 1100px) { /* On wide screens, drawer pushes content; no scrim. */ body.drawer-open .drawer-scrim { display: none; } } /* ===== Roll log entries ===== */ .roll-entry { padding: 10px 20px; border-bottom: 1px solid var(--border); display: grid; grid-template-columns: 1fr auto; gap: 8px; font-variant-numeric: tabular-nums; } .roll-label { font-size: 13px; } .roll-formula { font-family: var(--mono); font-size: 11px; color: var(--text-muted); } .roll-total { font-family: var(--mono); font-size: 18px; font-weight: 700; } .roll-total.crit { color: var(--crit); } .roll-total.fumble { color: var(--bad); } .roll-empty { padding: 20px; color: var(--text-muted); font-size: 13px; text-align: center; } /* ===== Chat (in drawer) ===== */ .chat-messages { flex: 1; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; } .chat-msg { max-width: 88%; padding: 10px 14px; border-radius: 14px; white-space: pre-wrap; word-wrap: break-word; line-height: 1.45; font-size: 14px; } .chat-msg.user { align-self: flex-end; background: var(--accent); color: var(--accent-contrast); border-bottom-right-radius: 4px; } .chat-msg.assistant { align-self: flex-start; background: var(--bg-elev-2); border: 1px solid var(--border); border-bottom-left-radius: 4px; } .chat-msg.error { align-self: stretch; background: rgba(229,115,115,.08); border: 1px solid rgba(229,115,115,.4); color: var(--bad); } .chat-form { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--border); background: var(--bg-elev-2); } .chat-input { flex: 1; resize: none; min-height: 40px; max-height: 140px; background: var(--bg-elev); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 10px; font: inherit; } .chat-input:focus { outline: 1px solid var(--accent); border-color: var(--accent); } /* Quick-prompt chip row (parsed triggers from knowledge file) */ .chat-quickrow { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 12px; border-top: 1px solid var(--border); background: var(--bg-elev); } .chip-btn { background: transparent; color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 50%, var(--border)); border-radius: 999px; padding: 4px 12px; font-size: 12px; font-weight: 500; cursor: pointer; transition: background .12s, border-color .12s, transform .04s; } .chip-btn:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); border-color: var(--accent); } .chip-btn:active { transform: translateY(1px); } /* Streaming caret blinks at end of partially-rendered assistant bubble */ .chat-msg.streaming { position: relative; } .chat-caret { display: inline-block; width: 6px; height: 14px; background: var(--accent); vertical-align: -2px; margin-left: 2px; animation: caret-blink 1s steps(2, end) infinite; } @keyframes caret-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } /* Markdown subset inside assistant bubbles */ .chat-msg p { margin: 0 0 8px; } .chat-msg p:last-child { margin-bottom: 0; } .chat-msg ul, .chat-msg ol { margin: 4px 0 8px 18px; padding: 0; } .chat-msg li { margin: 2px 0; } .chat-msg code { background: rgba(0, 0, 0, .35); border: 1px solid var(--border); padding: 1px 5px; border-radius: 3px; font-family: var(--mono); font-size: 12px; } .chat-msg strong { color: var(--accent); } .chat-msg em { color: var(--text); font-style: italic; } .chat-msg.assistant.ephemeral { opacity: .65; font-style: italic; font-size: 13px; } /* ===== Index page — Imperial portal ===== */ .container { max-width: 1400px; margin: 0 auto; padding: 24px; } .container.narrow { max-width: 820px; } .page-title { margin: 0 0 8px; font-size: 22px; font-family: var(--mono); text-transform: uppercase; letter-spacing: .22em; color: var(--accent); text-shadow: 0 0 12px color-mix(in srgb, var(--accent) 50%, transparent); } .topbar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 16px; padding: 10px 22px; background: linear-gradient(180deg, #0a0c10 0%, #060709 100%); border-bottom: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); box-shadow: 0 2px 16px rgba(0, 0, 0, .6), 0 0 24px color-mix(in srgb, var(--accent) 8%, transparent); } .topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent 0%, var(--accent) 50%, transparent 100%); opacity: .55; pointer-events: none; } .brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); font-size: 13px; } .brand-logo { height: 36px; width: auto; display: block; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--accent) 55%, transparent)); transition: filter .2s; } .brand:hover .brand-logo { filter: drop-shadow(0 0 14px color-mix(in srgb, var(--accent) 90%, transparent)); } a.brand:hover { text-decoration: none; color: var(--accent-strong); } .topbar-right { margin-left: auto; font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--text-muted); display: inline-flex; align-items: center; gap: 8px; } .topbar-right::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent), 0 0 16px color-mix(in srgb, var(--accent) 60%, transparent); animation: status-pulse 1.8s ease-in-out infinite; } @keyframes status-pulse { 0%, 100% { opacity: .55; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.1); } } /* HUD hero panel above the character list */ .portal-hero { position: relative; margin: 24px 0 28px; padding: 28px 28px 24px; background: linear-gradient(180deg, rgba(225, 29, 42, .06) 0%, transparent 60%), linear-gradient(180deg, #0a0d12 0%, #060709 100%); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); border-radius: 14px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), inset 0 0 0 1px rgba(0, 0, 0, .35), 0 12px 32px rgba(0, 0, 0, .55), 0 0 32px color-mix(in srgb, var(--accent) 12%, transparent); overflow: hidden; display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: center; } /* Scanline overlay */ .portal-hero::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient( 180deg, transparent 0, transparent 2px, rgba(255, 255, 255, .018) 2px, rgba(255, 255, 255, .018) 3px); pointer-events: none; } /* Corner brackets */ .portal-hero::after { content: ""; position: absolute; inset: 8px; pointer-events: none; background: /* top-left */ linear-gradient(90deg, var(--accent) 0, var(--accent) 18px, transparent 18px) 0 0 / 100% 1.5px no-repeat, linear-gradient(180deg, var(--accent) 0, var(--accent) 18px, transparent 18px) 0 0 / 1.5px 100% no-repeat, /* top-right */ linear-gradient(270deg, var(--accent) 0, var(--accent) 18px, transparent 18px) 100% 0 / 100% 1.5px no-repeat, linear-gradient(180deg, var(--accent) 0, var(--accent) 18px, transparent 18px) 100% 0 / 1.5px 100% no-repeat, /* bottom-left */ linear-gradient(90deg, var(--accent) 0, var(--accent) 18px, transparent 18px) 0 100% / 100% 1.5px no-repeat, linear-gradient(0deg, var(--accent) 0, var(--accent) 18px, transparent 18px) 0 100% / 1.5px 100% no-repeat, /* bottom-right */ linear-gradient(270deg, var(--accent) 0, var(--accent) 18px, transparent 18px) 100% 100% / 100% 1.5px no-repeat, linear-gradient(0deg, var(--accent) 0, var(--accent) 18px, transparent 18px) 100% 100% / 1.5px 100% no-repeat; opacity: .85; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--accent) 60%, transparent)); } .portal-hero > * { position: relative; z-index: 1; } .portal-hero-logo { height: 96px; width: auto; display: block; filter: drop-shadow(0 0 16px color-mix(in srgb, var(--accent) 60%, transparent)); } .portal-hero-text { min-width: 0; } .portal-hero-title { margin: 0 0 6px; font-family: var(--mono); font-size: 13px; text-transform: uppercase; letter-spacing: .28em; color: var(--accent); text-shadow: 0 0 10px color-mix(in srgb, var(--accent) 60%, transparent); } .portal-hero-sub { margin: 0; color: var(--text-muted); font-size: 13px; line-height: 1.5; } .portal-hero-sub strong { color: var(--text); font-weight: 600; } @media (max-width: 700px) { .portal-hero { grid-template-columns: 1fr; text-align: center; gap: 16px; } .portal-hero-logo { margin: 0 auto; height: 72px; } } /* Character list — terminal roster entries */ .char-list { list-style: none; padding: 0; margin: 18px 0; display: grid; gap: 12px; } .char-list li { position: relative; background: linear-gradient(180deg, #0c1015 0%, #07090c 100%); border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border)); border-left: 3px solid color-mix(in srgb, var(--accent) 70%, transparent); border-radius: 4px; padding: 14px 18px; transition: border-color .15s, box-shadow .15s, transform .06s; overflow: hidden; } .char-list li::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient( 180deg, transparent 0, transparent 2px, rgba(255, 255, 255, .012) 2px, rgba(255, 255, 255, .012) 3px); pointer-events: none; } .char-list li:hover { border-color: var(--accent); border-left-color: var(--accent); box-shadow: 0 0 24px color-mix(in srgb, var(--accent) 18%, transparent); } .char-list li:hover::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: .6; } .char-list a { position: relative; color: var(--text); display: flex; gap: 12px; align-items: baseline; justify-content: space-between; z-index: 1; } .char-list a:hover { text-decoration: none; } .char-list .char-name { font-weight: 700; font-size: 17px; color: var(--accent); letter-spacing: .04em; text-shadow: 0 0 8px color-mix(in srgb, var(--accent) 30%, transparent); } .char-list .char-meta { color: var(--text-muted); font-size: 11px; font-family: var(--mono); text-transform: uppercase; letter-spacing: .14em; } /* ===== Toast ===== */ .toast { position: fixed; right: 16px; bottom: 16px; z-index: 50; background: var(--bg-elev-2); border: 1px solid var(--border); padding: 10px 14px; border-radius: var(--radius); box-shadow: var(--shadow); max-width: 360px; } .toast.error { border-color: rgba(229,115,115,.5); } /* ===== Responsive ===== */ @media (max-width: 1100px) { .hero { grid-template-columns: auto 1fr; gap: 20px; } .hero-right { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: flex-start; } .view-pane[data-pane="stats"].active { grid-template-columns: 1fr; } } @media (max-width: 700px) { .abilities-body { grid-template-columns: repeat(2, 1fr); } .drawer { /* On phones, fall back to a centered overlay (no tail anchoring fits) */ left: 12px; top: 80px; width: calc(100vw - 24px); max-width: none; --drawer-w: calc(100vw - 24px); } .drawer::before, .drawer::after { display: none; } } /* ===== Side picker — "Choose Your Side" on the portal ===== */ .side-picker { position: relative; margin: 24px 0 28px; padding: 32px 24px 28px; background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.6) 100%); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); border-radius: 14px; box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 12px 32px rgba(0,0,0,.55), 0 0 32px color-mix(in srgb, var(--accent) 14%, transparent); overflow: hidden; } .side-picker::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(180deg, transparent 0, transparent 2px, rgba(255,255,255,.018) 2px, rgba(255,255,255,.018) 3px); pointer-events: none; } .side-picker > * { position: relative; } .side-picker-title { margin: 0 0 6px; font-family: var(--mono); font-size: 20px; text-transform: uppercase; letter-spacing: .36em; color: var(--accent); text-shadow: 0 0 14px color-mix(in srgb, var(--accent) 60%, transparent); text-align: center; } .side-picker-sub { margin: 0 0 22px; font-family: var(--mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--text-muted); text-align: center; } .side-picker-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .side-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 30px 20px 24px; min-height: 220px; background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.85) 100%); border: 1px solid color-mix(in srgb, var(--card-accent) 35%, #000); border-radius: 8px; cursor: pointer; overflow: hidden; font: inherit; color: var(--text); text-align: center; transition: transform .15s, box-shadow .2s, border-color .2s; } .side-card[data-side="dark"] { --card-accent: #e11d2a; --card-bg-image: url("/static/images/dark-side-background.jpg"); } .side-card[data-side="light"] { --card-accent: #f58220; --card-bg-image: url("/static/images/light-side-background.jpg"); } .side-card::before { content: ""; position: absolute; inset: 0; background-image: var(--card-bg-image); background-position: center; background-size: cover; background-repeat: no-repeat; opacity: .38; filter: saturate(1.05) brightness(.85); z-index: 0; transition: opacity .25s, transform .5s; } .side-card::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--card-accent) 28%, transparent) 0%, transparent 60%), radial-gradient(ellipse at 50% 100%, rgba(0,0,0,.6) 0%, transparent 60%); z-index: 0; pointer-events: none; } .side-card > * { position: relative; z-index: 1; } .side-card:hover { border-color: var(--card-accent); transform: translateY(-2px); box-shadow: 0 0 32px color-mix(in srgb, var(--card-accent) 45%, transparent), 0 12px 24px rgba(0,0,0,.6); } .side-card:hover::before { opacity: .58; transform: scale(1.05); } .side-card:focus-visible { outline: 2px solid var(--card-accent); outline-offset: 3px; } .side-card.active { border-color: var(--card-accent); box-shadow: inset 0 0 0 1px var(--card-accent), 0 0 36px color-mix(in srgb, var(--card-accent) 55%, transparent), 0 12px 24px rgba(0,0,0,.65); } .side-card.active::before { opacity: .52; } .side-card.active .side-card-check { opacity: 1; transform: scale(1); } .side-card-emblem { display: inline-flex; width: 56px; height: 56px; align-items: center; justify-content: center; color: var(--card-accent); margin-bottom: 4px; filter: drop-shadow(0 0 12px color-mix(in srgb, var(--card-accent) 70%, transparent)) drop-shadow(0 0 24px color-mix(in srgb, var(--card-accent) 30%, transparent)); } .side-card-emblem .icon { width: 100%; height: 100%; } .side-card-title { font-family: var(--mono); font-size: 22px; font-weight: 800; letter-spacing: .26em; text-transform: uppercase; color: var(--card-accent); text-shadow: 0 0 14px color-mix(in srgb, var(--card-accent) 60%, transparent); } .side-card-sub { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: color-mix(in srgb, var(--card-accent) 35%, var(--text-muted)); max-width: 28ch; line-height: 1.5; } .side-card-check { display: inline-flex; align-items: center; gap: 6px; padding: 4px 14px; margin-top: 8px; background: var(--card-accent); color: #fff; font-family: var(--mono); font-size: 10px; letter-spacing: .26em; text-transform: uppercase; font-weight: 700; border-radius: 999px; text-shadow: 0 1px 1px rgba(0,0,0,.7); opacity: 0; transform: scale(.7); transition: opacity .2s, transform .2s; box-shadow: 0 0 12px color-mix(in srgb, var(--card-accent) 50%, transparent); } .side-card-check::before { content: "◆"; font-size: 9px; } @media (max-width: 700px) { .side-picker-grid { grid-template-columns: 1fr; } .side-card { min-height: 180px; } } /* Character-page side toggle button (sits in the appbar-actions) */ .side-toggle { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; padding: 6px 12px; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 18%, #0a0d11) 0%, #04060a 100%); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); color: var(--accent); } .side-toggle:hover { border-color: var(--accent); box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 35%, transparent); } .side-toggle .side-toggle-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 6px var(--accent); margin-right: 8px; vertical-align: middle; } /* Compact icon-only toggle (sun/moon style) */ .btn.side-toggle-icon { width: 36px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 18%, #0a0d11) 0%, #04060a 100%); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); color: var(--accent); } .btn.side-toggle-icon:hover { border-color: var(--accent); box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 40%, transparent); } .btn.side-toggle-icon .icon { width: 16px; height: 16px; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 55%, transparent)); } /* ===== Roster header + Import button ===== */ .roster-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 22px 0 10px; } .roster-title { margin: 0; font-family: var(--mono); font-size: 13px; text-transform: uppercase; letter-spacing: .28em; color: var(--accent); text-shadow: 0 0 8px color-mix(in srgb, var(--accent) 50%, transparent); } .btn.import-btn { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; padding: 8px 14px; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 28%, #0a0d11) 0%, #04060a 100%); border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); color: var(--accent); font-weight: 700; } .btn.import-btn:hover { border-color: var(--accent); box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 45%, transparent); filter: brightness(1.1); } .btn.danger { background: linear-gradient(180deg, #7a1818 0%, #3a0808 100%); border-color: #4a1010; color: #ffd0d0; } .btn.danger:hover { background: linear-gradient(180deg, #9a2020 0%, #4a0a0a 100%); border-color: #ff5050; box-shadow: 0 0 12px rgba(255, 80, 80, .35); } /* Roster row gets a small delete affordance on hover */ .char-list li { display: flex; align-items: stretch; padding: 0; /* padding moves to the link so it fills */ } .char-list .char-link { flex: 1; padding: 14px 18px; display: flex; gap: 12px; align-items: baseline; justify-content: space-between; } .char-delete-btn { flex: 0 0 auto; width: 40px; border: 0; border-left: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border)); background: transparent; color: var(--text-muted); font-size: 14px; cursor: pointer; opacity: 0; transition: opacity .15s, color .12s, background .12s; } .char-list li:hover .char-delete-btn, .char-delete-btn:focus-visible { opacity: 1; } .char-delete-btn:hover { background: rgba(229, 115, 115, .12); color: #ff8888; } /* ===== Modal (shared between import wizard + delete confirm) ===== */ .modal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; } .modal[hidden] { display: none; } .modal-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .65); backdrop-filter: blur(3px); cursor: pointer; } .modal-panel { position: relative; width: min(560px, 92vw); max-height: 88vh; overflow: auto; background: linear-gradient(180deg, rgba(225, 29, 42, .04) 0%, transparent 60%), linear-gradient(180deg, #0a0d12 0%, #06080b 100%); border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border)); border-radius: 14px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 24px 60px rgba(0, 0, 0, .7), 0 0 36px color-mix(in srgb, var(--accent) 18%, transparent); display: flex; flex-direction: column; animation: modal-pop .2s cubic-bezier(.2, .8, .2, 1); } .modal-panel-small { width: min(420px, 92vw); } @keyframes modal-pop { from { transform: scale(.94) translateY(8px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } } .modal-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border)); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 10%, transparent) 0%, transparent 100%); } .modal-title { margin: 0; font-family: var(--mono); font-size: 13px; letter-spacing: .26em; text-transform: uppercase; color: var(--accent); text-shadow: 0 0 10px color-mix(in srgb, var(--accent) 55%, transparent); } /* Wizard step indicator + panes */ .wizard-steps { display: flex; gap: 8px; list-style: none; margin: 0; padding: 14px 20px 0; } .wizard-step { flex: 1; font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; text-align: center; padding: 6px 4px; color: var(--text-muted); border-bottom: 2px solid var(--border); transition: color .15s, border-color .15s; } .wizard-step.done { color: color-mix(in srgb, var(--accent) 70%, var(--text-muted)); border-bottom-color: color-mix(in srgb, var(--accent) 60%, transparent); } .wizard-step.active { color: var(--accent); border-bottom-color: var(--accent); text-shadow: 0 0 10px color-mix(in srgb, var(--accent) 50%, transparent); } .wizard-pane { display: none; padding: 20px; } .wizard-pane.active { display: block; } .wizard-lead { margin: 0 0 14px; color: var(--text); line-height: 1.5; } .wizard-howto { margin: 0 0 16px; padding-left: 22px; color: var(--text-muted); line-height: 1.6; font-size: 14px; } .wizard-howto strong { color: var(--text); } .wizard-field { display: block; margin-bottom: 12px; } .wizard-label { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; } .wizard-field input { width: 100%; padding: 10px 12px; background: linear-gradient(180deg, #0a0d12 0%, #06080b 100%); border: 1px solid var(--border); border-radius: 4px; color: var(--text); font: inherit; font-family: var(--mono); font-size: 13px; } .wizard-field input:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 35%, transparent); } .wizard-hint { display: block; margin-top: 6px; font-size: 11px; color: var(--text-muted); } .wizard-error { margin: 8px 0 0; padding: 10px 12px; background: rgba(229, 115, 115, .08); border: 1px solid rgba(229, 115, 115, .4); border-radius: 4px; color: #ffb0b0; font-size: 13px; line-height: 1.45; } .wizard-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; } /* Preview card on step 2 */ .preview-card { background: linear-gradient(180deg, #0a0d12 0%, #06080b 100%); border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border)); border-left: 3px solid var(--accent); border-radius: 4px; padding: 12px 16px; margin-bottom: 14px; } .preview-row { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; } .preview-row + .preview-row { border-top: 1px solid var(--border); } .preview-key { font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--text-muted); } .preview-val { color: var(--text); text-align: right; font-weight: 600; } /* Done state */ .wizard-done { text-align: center; padding: 20px 0 8px; } .wizard-done-mark { width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 28px; color: var(--accent); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 30%, #0a0d11) 0%, #04060a 100%); border: 2px solid var(--accent); box-shadow: 0 0 22px color-mix(in srgb, var(--accent) 55%, transparent); text-shadow: 0 0 8px color-mix(in srgb, var(--accent) 70%, transparent); } .wizard-done-text { margin: 0 0 4px; font-size: 15px; } .wizard-done-summary { margin: 0; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; } body.modal-open { overflow: hidden; } /* Session modal: 3 buttons (Cancel / Start New / Continue) plus an optional multi-session hint. Wraps cleanly on narrow screens. */ .session-actions { flex-wrap: wrap; } .session-preview .preview-val { font-family: var(--mono); font-size: 12px; } /* ===== Session pill (char page appbar) ===== */ .session-pill-wrap { position: relative; display: inline-flex; } .session-pill { font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; padding: 6px 12px; display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(180deg, #0c1015 0%, #06080b 100%); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); border-left: 2px solid var(--accent); border-radius: 3px; cursor: pointer; transition: border-color .12s, box-shadow .15s, filter .12s; max-width: 240px; } .session-pill:hover { border-color: var(--accent); box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 30%, transparent); } .session-pill[aria-expanded="true"] { border-color: var(--accent); box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 45%, transparent); } .session-pill.pending { color: var(--text-muted); border-color: var(--border); border-left-color: color-mix(in srgb, var(--accent) 40%, var(--border)); filter: saturate(.6); } .session-pill-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 6px var(--accent), 0 0 12px color-mix(in srgb, var(--accent) 60%, transparent); animation: status-pulse 1.8s ease-in-out infinite; flex-shrink: 0; } .session-pill.pending .session-pill-dot { background: var(--text-muted); box-shadow: none; animation: none; } .session-pill-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: .14em; } .session-pill-caret { font-size: 9px; opacity: .6; } .session-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 25; min-width: 200px; background: linear-gradient(180deg, #0c1015 0%, #06080b 100%); border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border)); border-radius: 6px; box-shadow: 0 12px 32px rgba(0, 0, 0, .65), 0 0 16px color-mix(in srgb, var(--accent) 18%, transparent); padding: 4px; display: flex; flex-direction: column; } .session-menu[hidden] { display: none; } .session-menu-item { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; text-align: left; background: transparent; border: 0; color: var(--text); padding: 8px 10px; cursor: pointer; border-radius: 3px; transition: background .1s, color .1s; } .session-menu-item:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); } .session-menu-item.danger:hover { background: rgba(229, 115, 115, .12); color: #ff8888; } .session-menu-item:disabled { color: var(--text-muted); cursor: not-allowed; } .session-menu-item:disabled:hover { background: transparent; color: var(--text-muted); } /* ===== Attack prompt — holo Hit/Miss panel ===== */ /* Full-viewport scrim — catches clicks (no pass-through to action bar) and dims the page so focus locks onto the Hit / Miss / Skip choice. */ .attack-prompt { position: fixed; inset: 0; z-index: 55; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0); opacity: 0; pointer-events: none; transition: opacity .22s cubic-bezier(.2,.7,.2,1), background .25s ease-out; font-family: var(--mono); } .attack-prompt[hidden] { display: none; } .attack-prompt.visible { opacity: 1; pointer-events: auto; /* blocks clicks on everything underneath */ background: rgba(4, 6, 10, 0.55); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } /* The frame slides up + scales in — independent of the scrim fade */ .attack-prompt .attack-prompt-frame { transform: translateY(18px) scale(.97); transition: transform .22s cubic-bezier(.2,.7,.2,1); } .attack-prompt.visible .attack-prompt-frame { transform: translateY(0) scale(1); } .attack-prompt-frame { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 28px 14px; min-width: 360px; background: linear-gradient(180deg, rgba(225, 29, 42, .06) 0%, transparent 60%), linear-gradient(180deg, rgba(8, 11, 16, .94) 0%, rgba(4, 6, 10, .96) 100%); border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border)); border-radius: 6px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 12px 36px rgba(0, 0, 0, .6), 0 0 28px color-mix(in srgb, var(--accent) 26%, transparent); overflow: hidden; } /* HUD scanlines inside the panel */ .attack-prompt-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient( 180deg, transparent 0, transparent 2px, rgba(255, 255, 255, .025) 2px, rgba(255, 255, 255, .025) 3px); } /* Corner brackets — droid display vibe */ .attack-prompt-corner { position: absolute; width: 12px; height: 12px; pointer-events: none; } .attack-prompt-corner.tl { top: 4px; left: 4px; border-top: 1.5px solid var(--accent); border-left: 1.5px solid var(--accent); } .attack-prompt-corner.tr { top: 4px; right: 4px; border-top: 1.5px solid var(--accent); border-right: 1.5px solid var(--accent); } .attack-prompt-corner.bl { bottom: 4px; left: 4px; border-bottom: 1.5px solid var(--accent); border-left: 1.5px solid var(--accent); } .attack-prompt-corner.br { bottom: 4px; right: 4px; border-bottom: 1.5px solid var(--accent); border-right: 1.5px solid var(--accent); } .attack-prompt-title { font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: var(--accent); text-shadow: 0 0 8px color-mix(in srgb, var(--accent) 55%, transparent); position: relative; z-index: 1; } .attack-prompt-total { font-size: 32px; font-weight: 800; color: #fff; line-height: 1; text-shadow: 0 0 12px color-mix(in srgb, var(--accent) 80%, transparent), 0 0 24px color-mix(in srgb, var(--accent) 35%, transparent); font-variant-numeric: tabular-nums; position: relative; z-index: 1; } .attack-prompt.crit .attack-prompt-total { color: #ffe27a; text-shadow: 0 0 14px #ffd35e, 0 0 28px rgba(255, 200, 60, .6); animation: ap-crit-pulse 1.4s ease-in-out infinite; } @keyframes ap-crit-pulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.25); } } .attack-prompt-buttons { display: flex; gap: 10px; margin-top: 6px; position: relative; z-index: 1; } .attack-prompt-btn { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; padding: 8px 16px; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; border-radius: 3px; transition: filter .12s, box-shadow .15s, transform .06s, border-color .12s; } .attack-prompt-btn:hover { filter: brightness(1.15); } .attack-prompt-btn:active { transform: translateY(1px); } .attack-prompt-btn.hit { color: #c8f0d0; background: linear-gradient(180deg, #1d4f24 0%, #0a2810 100%); border: 1px solid #2c7037; box-shadow: 0 0 14px rgba(95, 180, 105, .25); } .attack-prompt-btn.hit:hover { border-color: #5fb469; box-shadow: 0 0 18px rgba(95, 180, 105, .55); } .attack-prompt-btn.miss { color: #ffd0d0; background: linear-gradient(180deg, #5a1818 0%, #2d0a0a 100%); border: 1px solid #5a1818; box-shadow: 0 0 14px rgba(229, 115, 115, .2); } .attack-prompt-btn.miss:hover { border-color: #b94343; box-shadow: 0 0 18px rgba(229, 115, 115, .5); } .attack-prompt-btn:disabled { opacity: .45; cursor: not-allowed; filter: grayscale(.6); } .attack-prompt-btn:disabled:hover { filter: grayscale(.6); box-shadow: 0 0 14px rgba(95, 180, 105, .25); } .attack-prompt-mark { font-size: 14px; line-height: 1; } .attack-prompt-dismiss { position: absolute; top: 6px; right: 30px; font-family: var(--mono); font-size: 9px; letter-spacing: .22em; text-transform: uppercase; color: var(--text-muted); background: transparent; border: 0; padding: 2px 6px; cursor: pointer; z-index: 2; } .attack-prompt-dismiss:hover { color: var(--accent); } @media (max-width: 600px) { .attack-prompt-frame { min-width: unset; width: calc(100vw - 24px); padding: 14px 18px; } .attack-prompt-buttons { flex-direction: column; width: 100%; } .attack-prompt-btn { width: 100%; justify-content: center; } } /* ===== Dashboard overlay ===== */ /* The Dashboard button in the appbar */ .btn.dashboard-btn { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; padding: 6px 14px; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 22%, #0a0d11) 0%, #04060a 100%); border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); color: var(--accent); font-weight: 700; } .btn.dashboard-btn:hover { border-color: var(--accent); box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 45%, transparent); filter: brightness(1.12); } /* Full-screen overlay (uses the shared .modal scrim) */ .dashboard-modal .dashboard-shell { position: relative; width: min(1200px, 96vw); height: min(820px, 92vh); display: flex; flex-direction: column; background: radial-gradient(ellipse at 50% -10%, color-mix(in srgb, var(--accent) 18%, transparent) 0%, transparent 55%), linear-gradient(180deg, #08090c 0%, #050709 100%); border: 1px solid color-mix(in srgb, var(--accent) 50%, var(--border)); border-radius: 10px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 24px 80px rgba(0, 0, 0, .8), 0 0 60px color-mix(in srgb, var(--accent) 25%, transparent), 0 0 120px color-mix(in srgb, var(--accent) 10%, transparent); overflow: hidden; transform-origin: 50% 50%; /* Droid hologram phase-in */ animation: dashboard-phase-in .65s cubic-bezier(.2, .8, .2, 1) forwards; } /* Scanline overlay that sweeps once on entry, then sits at low opacity */ .dashboard-modal .dashboard-scanline { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient( 180deg, transparent 0, transparent 2px, rgba(255, 255, 255, .025) 2px, rgba(255, 255, 255, .025) 3px); z-index: 1; } /* A bright horizontal sweep line that travels top → bottom on entry */ .dashboard-modal .dashboard-shell::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--accent) 70%, transparent) 20%, var(--accent) 50%, color-mix(in srgb, var(--accent) 70%, transparent) 80%, transparent 100%); filter: drop-shadow(0 0 8px var(--accent)); z-index: 3; animation: dashboard-sweep .85s cubic-bezier(.2, .8, .2, 1) forwards; pointer-events: none; } @keyframes dashboard-phase-in { 0% { opacity: 0; transform: scaleY(0.04) scaleX(0.4); filter: brightness(2.4) saturate(.4) blur(2px); } 20% { opacity: .85; transform: scaleY(0.18) scaleX(0.92); filter: brightness(2.1) saturate(.5) blur(2px); } 45% { opacity: .95; transform: scaleY(0.55) scaleX(1.01); filter: brightness(1.6) saturate(.8) blur(1px); } 72% { opacity: 1; transform: scaleY(1.02) scaleX(1); filter: brightness(1.2) saturate(1) blur(0); } 100% { opacity: 1; transform: scaleY(1) scaleX(1); filter: brightness(1) saturate(1); } } @keyframes dashboard-sweep { 0% { top: 0; opacity: 1; } 60% { top: 100%; opacity: 1; } 100% { top: 100%; opacity: 0; } } /* Header — title + signifier + close */ .dashboard-modal .dashboard-header { position: relative; z-index: 2; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 22px 14px; border-bottom: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 10%, transparent) 0%, transparent 100%); } .dashboard-modal .dashboard-header-left { min-width: 0; } .dashboard-modal .dashboard-title { margin: 0; font-family: var(--mono); font-size: 18px; letter-spacing: .3em; text-transform: uppercase; color: var(--accent); text-shadow: 0 0 14px color-mix(in srgb, var(--accent) 55%, transparent); } .dashboard-modal .dashboard-signifier { margin: 4px 0 0; font-family: var(--mono); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--text-muted); } /* Body: left sessions rail + right main */ .dashboard-modal .dashboard-body { position: relative; z-index: 2; display: grid; grid-template-columns: 280px 1fr; flex: 1; min-height: 0; } /* Sessions rail */ .dashboard-modal .dashboard-sessions { display: flex; flex-direction: column; background: linear-gradient(180deg, rgba(8, 11, 16, .8) 0%, rgba(4, 6, 10, .9) 100%); border-right: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border)); min-width: 0; } .dashboard-modal .dashboard-sessions-header { display: flex; align-items: baseline; justify-content: space-between; padding: 12px 16px 8px; font-family: var(--mono); font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--text-muted); border-bottom: 1px solid var(--border); } .dashboard-modal .dashboard-sessions-count { color: var(--accent); font-weight: 700; } .dashboard-modal .dashboard-sessions-list { flex: 1; list-style: none; margin: 0; padding: 4px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; } .dashboard-modal .dashboard-session { position: relative; display: flex; align-items: stretch; background: linear-gradient(180deg, #0c1015 0%, #07090c 100%); border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border)); border-left: 3px solid color-mix(in srgb, var(--accent) 35%, transparent); border-radius: 4px; cursor: pointer; transition: border-color .12s, background .12s, box-shadow .12s; } .dashboard-modal .dashboard-session:hover { border-color: var(--accent); } .dashboard-modal .dashboard-session.selected { border-color: var(--accent); border-left-color: var(--accent); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 10%, #0c1015) 0%, #07090c 100%); box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 25%, transparent); } .dashboard-modal .dashboard-session-main { flex: 1; padding: 10px 12px; min-width: 0; } .dashboard-modal .dashboard-session-label { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dashboard-modal .dashboard-session.selected .dashboard-session-label { color: var(--accent); text-shadow: 0 0 8px color-mix(in srgb, var(--accent) 50%, transparent); } .dashboard-modal .dashboard-session-meta { margin-top: 3px; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); display: inline-flex; gap: 6px; } .dashboard-modal .dashboard-session-sep { opacity: .5; } .dashboard-modal .dashboard-session-delete { flex: 0 0 auto; width: 32px; border: 0; border-left: 1px solid var(--border); background: transparent; color: var(--text-muted); cursor: pointer; opacity: 0; transition: opacity .12s, color .12s, background .12s; } .dashboard-modal .dashboard-session:hover .dashboard-session-delete, .dashboard-modal .dashboard-session-delete:focus-visible { opacity: 1; } .dashboard-modal .dashboard-session-delete:hover { background: rgba(229, 115, 115, .12); color: #ff8888; } .dashboard-modal .dashboard-session-empty { padding: 16px 12px; font-size: 12px; line-height: 1.4; } .dashboard-modal .dashboard-sessions-footer { padding: 8px 16px 12px; font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--text-muted); border-top: 1px solid var(--border); min-height: 28px; } /* Main area (panels) */ .dashboard-modal .dashboard-main { position: relative; padding: 22px; overflow-y: auto; display: flex; flex-direction: column; gap: 18px; } .dashboard-modal .dashboard-empty { margin: auto; max-width: 360px; text-align: center; color: var(--text-muted); font-family: var(--mono); letter-spacing: .14em; } .dashboard-modal .dashboard-empty p { margin: 6px 0; font-size: 12px; text-transform: uppercase; } .dashboard-modal .dashboard-empty p.muted { letter-spacing: .12em; text-transform: none; } .dashboard-modal .dashboard-empty-mark { font-size: 28px; color: var(--accent); margin-bottom: 6px; text-shadow: 0 0 12px color-mix(in srgb, var(--accent) 60%, transparent); } /* Each panel (phase 6 fills these in) */ .dashboard-panel { position: relative; background: linear-gradient(180deg, #0a0d12 0%, #06080b 100%); border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border)); border-radius: 4px; padding: 14px 18px; } .dashboard-panel-title { margin: 0 0 10px; font-family: var(--mono); font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--accent); text-shadow: 0 0 8px color-mix(in srgb, var(--accent) 40%, transparent); } /* Responsive: stack rail above main on narrow viewports */ @media (max-width: 720px) { .dashboard-modal .dashboard-body { grid-template-columns: 1fr; } .dashboard-modal .dashboard-sessions { border-right: 0; border-bottom: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border)); max-height: 30vh; } } /* ===== Panel framework (reusable across all dashboard panels) ===== */ /* Stat strip: small tile row at the top of a panel */ .panel-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin-bottom: 14px; } .panel-stat { position: relative; padding: 8px 10px; background: linear-gradient(180deg, #0a0d12 0%, #06080b 100%); border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border)); border-left: 2px solid var(--accent); border-radius: 3px; } .panel-stat.stat-good { border-left-color: #5fb469; } .panel-stat.stat-bad { border-left-color: #e57373; } .panel-stat-label { font-family: var(--mono); font-size: 9px; letter-spacing: .22em; text-transform: uppercase; color: var(--text-muted); } .panel-stat-value { font-family: var(--mono); font-size: 18px; font-weight: 800; color: var(--accent); text-shadow: 0 0 8px color-mix(in srgb, var(--accent) 40%, transparent); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .panel-stat.stat-good .panel-stat-value { color: #87ff95; text-shadow: 0 0 8px rgba(95,180,105,.5); } .panel-stat.stat-bad .panel-stat-value { color: #ff8888; text-shadow: 0 0 8px rgba(229,115,115,.5); } .panel-note { margin-top: 12px; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; } /* ----- Histograms (d20 luck) ----- */ .panel-histogram { display: grid; gap: 3px; margin-top: 4px; } .panel-histogram-row { display: grid; grid-template-columns: 22px 1fr 32px; gap: 8px; align-items: center; font-family: var(--mono); font-size: 11px; } .panel-histogram-face { text-align: right; color: var(--text-muted); letter-spacing: .06em; } .panel-histogram-track { height: 12px; background: rgba(0, 0, 0, .55); border: 1px solid var(--border); border-radius: 2px; overflow: hidden; } .panel-histogram-fill { height: 100%; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 55%, transparent) 0%, var(--accent) 100%); box-shadow: 0 0 4px color-mix(in srgb, var(--accent) 50%, transparent); transition: width .25s ease-out; } .panel-histogram-fill.fumble { background: linear-gradient(90deg, rgba(229,115,115,.45) 0%, #b94343 100%); box-shadow: 0 0 6px rgba(229, 115, 115, .55); } .panel-histogram-fill.crit { background: linear-gradient(90deg, rgba(244, 211, 94, .45) 0%, #f4d35e 100%); box-shadow: 0 0 6px rgba(244, 211, 94, .6); } .panel-histogram-count { text-align: right; color: var(--text); font-weight: 700; } /* ----- Horizontal bar list (skill usage, kit invocation, hit rate) ----- */ .panel-bar-list { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; } .panel-bar-row { position: relative; } .panel-bar-track { position: relative; height: 32px; background: rgba(0, 0, 0, .55); border: 1px solid var(--border); border-radius: 3px; overflow: hidden; } .panel-bar-fill { position: absolute; top: 0; bottom: 0; left: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 55%, transparent) 0%, color-mix(in srgb, var(--accent) 35%, transparent) 100%); border-right: 1px solid color-mix(in srgb, var(--accent) 60%, transparent); transition: width .25s ease-out, left .25s ease-out; } .panel-bar-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-shadow: 0 1px 2px rgba(0, 0, 0, .9); pointer-events: none; } .panel-bar-label-main { color: var(--text); font-weight: 700; text-transform: uppercase; letter-spacing: .14em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .panel-bar-label-stats { color: var(--text-muted); margin-left: 12px; flex-shrink: 0; } /* Skill usage proficiency tint */ .panel-bar-row.expertise .panel-bar-fill { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 70%, transparent) 0%, color-mix(in srgb, var(--accent) 95%, transparent) 100%); } .panel-bar-row.proficient .panel-bar-fill { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 50%, transparent) 0%, color-mix(in srgb, var(--accent) 35%, transparent) 100%); } .panel-bar-row.untrained .panel-bar-fill { background: linear-gradient(90deg, color-mix(in srgb, var(--text-muted) 35%, transparent) 0%, color-mix(in srgb, var(--text-muted) 22%, transparent) 100%); } /* Kit invocation tint */ .panel-bar-row.kit.untouched .panel-bar-fill { background: rgba(255,255,255,.03); border-right: 0; } .panel-bar-row.kit.untouched .panel-bar-label-main { color: var(--text-muted); } /* Hit rate stacked segments */ .panel-bar-fill.hit { background: linear-gradient(180deg, #2c7037 0%, #1d4f24 100%); border-right-color: #5fb469; } .panel-bar-fill.miss { background: linear-gradient(180deg, #7a1818 0%, #3a0808 100%); border-right-color: #b94343; } .panel-bar-fill.untagged { background: rgba(255, 255, 255, .04); border-right-color: var(--border); } /* Legends */ .panel-legend { margin-top: 10px; display: flex; gap: 14px; flex-wrap: wrap; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; } .panel-legend-item { display: inline-flex; align-items: center; gap: 5px; } .panel-legend-dot { width: 8px; height: 8px; border-radius: 2px; background: var(--accent); } .panel-legend-item.expertise .panel-legend-dot { background: color-mix(in srgb, var(--accent) 90%, white); box-shadow: 0 0 4px var(--accent); } .panel-legend-item.proficient .panel-legend-dot { background: color-mix(in srgb, var(--accent) 50%, transparent); } .panel-legend-item.untrained .panel-legend-dot { background: var(--text-muted); } .panel-legend-item.hit .panel-legend-dot { background: #2c7037; } .panel-legend-item.miss .panel-legend-dot { background: #7a1818; } .panel-legend-item.untagged .panel-legend-dot { background: rgba(255,255,255,.15); } /* ----- Dice cards (dice distribution) ----- */ .panel-dice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; } .panel-dice-card { position: relative; padding: 10px 12px 8px; background: linear-gradient(180deg, #0a0d12 0%, #06080b 100%); border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border)); border-top: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); border-radius: 3px; } .panel-dice-name { font-family: var(--mono); font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: var(--accent); text-shadow: 0 0 6px color-mix(in srgb, var(--accent) 40%, transparent); } .panel-dice-mean { font-family: var(--mono); font-size: 22px; font-weight: 800; line-height: 1.1; color: #fff; text-shadow: 0 0 8px color-mix(in srgb, var(--accent) 50%, transparent); margin: 2px 0 2px; } .panel-dice-mean.stat-good { color: #87ff95; text-shadow: 0 0 8px rgba(95,180,105,.5); } .panel-dice-mean.stat-bad { color: #ff8888; text-shadow: 0 0 8px rgba(229,115,115,.5); } .panel-dice-count { font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; } /* Sparkline of face counts */ .panel-spark { display: flex; align-items: flex-end; gap: 2px; height: 24px; margin-top: 8px; padding: 2px; background: rgba(0, 0, 0, .35); border-radius: 2px; } .panel-spark-bar { flex: 1; height: var(--h, 5%); min-height: 1px; background: linear-gradient(180deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 55%, transparent) 100%); border-radius: 1px; box-shadow: 0 0 4px color-mix(in srgb, var(--accent) 40%, transparent); } /* ===== Timeline scrubber ===== */ .dashboard-timeline { background: linear-gradient(180deg, rgba(8, 11, 16, .96) 0%, rgba(6, 8, 11, .96) 100%); border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border)); border-radius: 4px; padding: 10px 12px; margin: 0 0 4px; } .timeline-title { margin-bottom: 4px; } .timeline-meta { font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--text-muted); display: inline-flex; gap: 8px; align-items: center; margin-bottom: 6px; } .timeline-meta-sep { opacity: .5; } .timeline-track { position: relative; height: 24px; background: linear-gradient(180deg, #04060a 0%, #0a0e14 100%); border: 1px solid var(--border); border-radius: 2px; overflow: visible; } /* A faint center line so the timeline reads as a "time axis" */ .timeline-track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--accent) 35%, transparent) 30%, color-mix(in srgb, var(--accent) 35%, transparent) 70%, transparent 100%); opacity: .4; } .timeline-tick { position: absolute; top: 4px; bottom: 4px; left: var(--pos); width: 3px; border: 0; padding: 0; background: var(--accent); opacity: .85; cursor: pointer; transition: transform .1s, box-shadow .12s, opacity .12s; } .timeline-tick:hover { transform: translateX(-1px) scaleY(1.25); z-index: 2; opacity: 1; box-shadow: 0 0 6px var(--accent); } /* Color per event kind */ .tick-roll { background: color-mix(in srgb, var(--accent) 60%, transparent); } .tick-damage { background: #c8541f; } .tick-attack { background: color-mix(in srgb, var(--accent) 80%, transparent); } .tick-crit { background: #ffd35e; box-shadow: 0 0 6px rgba(244, 211, 94, .5); } .tick-fumble { background: #ff7676; box-shadow: 0 0 6px rgba(229, 115, 115, .5); } .tick-hpdmg { background: #b94343; } .tick-heal { background: #5fb469; } .tick-spend { background: #d4a056; } .tick-restore { background: #88aabb; } .tick-hit { background: #2c7037; } .tick-miss { background: #7a1818; } .tick-rest { background: #5a6d8a; } .tick-other { background: var(--text-muted); } .timeline-legend { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 10px; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--text); /* override .muted for readability */ } .timeline-legend-item { display: inline-flex; align-items: center; gap: 6px; color: var(--text); /* always bright; the dot carries the color cue */ font-weight: 600; } .timeline-legend-dot { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; box-shadow: 0 0 4px rgba(0, 0, 0, .4); } .timeline-legend-item.tick-roll .timeline-legend-dot { background: color-mix(in srgb, var(--accent) 60%, transparent); } .timeline-legend-item.tick-damage .timeline-legend-dot { background: #c8541f; } .timeline-legend-item.tick-crit .timeline-legend-dot { background: #ffd35e; } .timeline-legend-item.tick-fumble .timeline-legend-dot { background: #ff7676; } .timeline-legend-item.tick-hpdmg .timeline-legend-dot { background: #b94343; } .timeline-legend-item.tick-heal .timeline-legend-dot { background: #5fb469; } .timeline-legend-item.tick-spend .timeline-legend-dot { background: #d4a056; } .timeline-legend-item.tick-hit .timeline-legend-dot { background: #2c7037; } .timeline-legend-item.tick-miss .timeline-legend-dot { background: #7a1818; } .timeline-legend-item.tick-rest .timeline-legend-dot { background: #5a6d8a; } .timeline-empty { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; } /* Panel flash — when a timeline tick is clicked */ .dashboard-panel.flashing { animation: panel-flash 1.1s ease-out; } @keyframes panel-flash { 0% { box-shadow: 0 0 0 1px var(--accent), 0 0 28px color-mix(in srgb, var(--accent) 60%, transparent); } 60% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent), 0 0 14px color-mix(in srgb, var(--accent) 28%, transparent); } 100% { box-shadow: none; } } /* ===== Drill-down ===== Buttons that look like rows but are clickable. */ button.panel-histogram-row, button.panel-bar-row, button.panel-dice-card { font: inherit; color: inherit; background: inherit; text-align: inherit; cursor: pointer; padding: 0; width: 100%; } .drillable { transition: filter .12s, box-shadow .15s; } .drillable:hover:not(:disabled) { filter: brightness(1.12); box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 25%, transparent); } .drillable:disabled, .drillable.is-empty { cursor: default; filter: none; opacity: .55; } button.panel-histogram-row { display: grid; grid-template-columns: 22px 1fr 32px; gap: 8px; align-items: center; background: transparent; border: 0; padding: 1px 0; } button.panel-dice-card { display: block; } /* The detail container the drill-down helper inserts */ .panel-drill { margin-top: 10px; padding: 12px 14px; background: linear-gradient(180deg, #06080b 0%, #04060a 100%); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); border-left: 2px solid var(--accent); border-radius: 3px; animation: drill-in .18s ease-out; } @keyframes drill-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .panel-drill-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; } .panel-drill-title { color: var(--accent); text-shadow: 0 0 6px color-mix(in srgb, var(--accent) 45%, transparent); } .panel-drill-count { color: var(--text-muted); } .panel-drill-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; max-height: 260px; overflow-y: auto; } .panel-drill-item { display: grid; grid-template-columns: 56px 1fr auto; gap: 10px; padding: 4px 4px; font-family: var(--mono); font-size: 12px; border-bottom: 1px dashed color-mix(in srgb, var(--accent) 12%, var(--border)); } .panel-drill-item:last-child { border-bottom: 0; } .panel-drill-time { color: var(--text-muted); font-variant-numeric: tabular-nums; letter-spacing: .04em; } .panel-drill-main { color: var(--text); } .panel-drill-meta { color: var(--text-muted); letter-spacing: .08em; text-align: right; } .panel-drill-item.outcome-hit .panel-drill-meta { color: #87ff95; } .panel-drill-item.outcome-miss .panel-drill-meta { color: #ff8888; } /* Dice drill face-count grid */ .panel-drill-facegrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(48px, 1fr)); gap: 4px; margin-bottom: 10px; } .panel-drill-facecell { background: linear-gradient(180deg, #0a0d12 0%, #06080b 100%); border: 1px solid var(--border); border-radius: 2px; padding: 4px 6px; display: flex; align-items: center; justify-content: space-between; font-family: var(--mono); font-size: 11px; } .panel-drill-facecell.is-empty { opacity: .35; } .panel-drill-facenum { color: var(--text-muted); letter-spacing: .06em; } .panel-drill-facecount { color: var(--accent); font-weight: 700; } /* Pulse animations used by the ribbon-empty tactical variant + danger flash */ @keyframes tac-pulse { 0%, 100% { transform: scale(.85); opacity: .7; } 50% { transform: scale(1.1); opacity: 1; } } @keyframes tac-danger-flash { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.2); } } /* ===== Undo toast ===== */ .undo-toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 12px); z-index: 60; display: inline-flex; align-items: center; gap: 12px; padding: 8px 8px 8px 14px; background: linear-gradient(180deg, rgba(8, 11, 16, .96) 0%, rgba(4, 6, 10, .98) 100%); border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border)); border-left: 2px solid var(--accent); border-radius: 4px; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--text); box-shadow: 0 12px 32px rgba(0, 0, 0, .55), 0 0 22px color-mix(in srgb, var(--accent) 22%, transparent); opacity: 0; transition: opacity .2s ease-out, transform .2s ease-out; } .undo-toast.entering, .undo-toast:not(.leaving) { opacity: 1; transform: translate(-50%, 0); } .undo-toast.leaving { opacity: 0; transform: translate(-50%, 12px); } .undo-toast-mark { font-size: 14px; color: var(--accent); text-shadow: 0 0 6px color-mix(in srgb, var(--accent) 55%, transparent); } .undo-toast-text { font-weight: 600; letter-spacing: .12em; } .undo-toast-btn { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; padding: 6px 12px; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 30%, #0a0d11) 0%, #04060a 100%); border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--border)); border-radius: 3px; color: var(--accent); cursor: pointer; transition: filter .12s, box-shadow .15s; } .undo-toast-btn:hover { filter: brightness(1.18); box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 45%, transparent); } /* ===================================================================== HOLOCRON OVERLAY — Sith pyramid (Dark) / Jedi cube (Light) spell projection. Lives alongside the dashboard modal; same SHELL pattern, different chrome. ===================================================================== */ /* Side-keyed Holocron tokens. Default = dark. */ :root, :root[data-side="dark"] { --holo-glow: color-mix(in srgb, var(--accent) 60%, transparent); --holo-glow-soft: color-mix(in srgb, var(--accent) 25%, transparent); --holo-frame: color-mix(in srgb, var(--accent) 70%, #000); --holo-frame-soft: color-mix(in srgb, var(--accent) 25%, #000); --holo-ring-line: color-mix(in srgb, var(--accent) 55%, transparent); --holo-ring-line-cant: color-mix(in srgb, var(--accent) 30%, transparent); --holo-spell-bg: color-mix(in srgb, var(--bg-elev) 80%, transparent); --holo-spell-bg-prep: color-mix(in srgb, var(--accent) 8%, var(--bg-elev)); --holo-stage-bg: radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--accent) 6%, transparent) 0%, transparent 70%); --holo-artifact-show: block; /* pyramid visible */ --holo-cube-show: none; /* cube hidden */ } :root[data-side="light"] { --holo-glow: color-mix(in srgb, var(--accent) 65%, transparent); --holo-glow-soft: color-mix(in srgb, var(--accent) 30%, transparent); --holo-frame: color-mix(in srgb, var(--accent) 80%, #1a0e02); --holo-frame-soft: color-mix(in srgb, var(--accent) 35%, #1a0e02); --holo-ring-line: color-mix(in srgb, var(--accent) 60%, transparent); --holo-ring-line-cant: color-mix(in srgb, var(--accent) 35%, transparent); --holo-spell-bg: color-mix(in srgb, var(--bg-elev) 85%, transparent); --holo-spell-bg-prep: color-mix(in srgb, var(--accent) 10%, var(--bg-elev)); --holo-stage-bg: radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--accent) 8%, transparent) 0%, transparent 72%); --holo-artifact-show: none; /* pyramid hidden */ --holo-cube-show: block; /* cube visible */ } /* ---- Modal shell ---- */ .holocron-modal { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 24px; } .holocron-modal .modal-scrim { position: fixed; inset: 0; background: radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--accent) 12%, transparent) 0%, transparent 55%), rgba(2, 3, 5, .82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: holo-scrim-in .35s ease-out both; } @keyframes holo-scrim-in { from { opacity: 0; } to { opacity: 1; } } .holocron-shell { position: relative; width: min(1180px, 96vw); height: min(820px, 92vh); background: linear-gradient(180deg, color-mix(in srgb, var(--bg-elev) 88%, transparent) 0%, color-mix(in srgb, var(--bg) 90%, transparent) 100%); border: 1px solid var(--holo-frame); border-radius: 6px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent) inset, 0 0 80px color-mix(in srgb, var(--accent) 22%, transparent), 0 30px 90px rgba(0, 0, 0, .75); overflow: hidden; display: grid; grid-template-rows: auto 1fr auto; animation: holo-shell-in .55s cubic-bezier(.2,.7,.2,1) both; } @keyframes holo-shell-in { from { opacity: 0; transform: translateY(14px) scale(.985); filter: blur(6px); } to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } } /* Animated scanline that slowly sweeps top-to-bottom */ .holocron-scanline { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--accent) 75%, transparent) 50%, transparent 100%); opacity: .55; pointer-events: none; animation: holo-scan 7s linear infinite; z-index: 4; } @keyframes holo-scan { 0% { transform: translateY(0); opacity: 0; } 6% { opacity: .6; } 92% { opacity: .6; } 100% { transform: translateY(820px); opacity: 0; } } /* Outer corona — soft radial glow ringing the inside of the shell */ .holocron-corona { position: absolute; inset: -2px; border-radius: inherit; pointer-events: none; background: radial-gradient(ellipse at 50% 50%, transparent 50%, color-mix(in srgb, var(--accent) 14%, transparent) 78%, transparent 100%); mix-blend-mode: screen; opacity: .9; z-index: 1; } /* Faint hexagonal grid + scan ticks on the inside walls */ .holocron-shell::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(color-mix(in srgb, var(--accent) 5%, transparent) 1px, transparent 1px) 0 0 / 100% 32px, linear-gradient(90deg, color-mix(in srgb, var(--accent) 5%, transparent) 1px, transparent 1px) 0 0 / 32px 100%; mask-image: radial-gradient(ellipse at 50% 50%, black 0%, transparent 85%); -webkit-mask-image: radial-gradient(ellipse at 50% 50%, black 0%, transparent 85%); z-index: 0; } /* ---- Header ---- */ .holocron-header { position: relative; display: flex; align-items: center; gap: 16px; padding: 14px 18px; border-bottom: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border)); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 6%, transparent), transparent); z-index: 3; } .holocron-header-left { min-width: 0; flex: 1 1 auto; } .holocron-title { margin: 0; font: 600 18px/1.1 var(--mono); letter-spacing: .22em; color: var(--text); text-shadow: 0 0 12px color-mix(in srgb, var(--accent) 50%, transparent), 0 0 1px color-mix(in srgb, var(--accent) 80%, transparent); } .holocron-signifier { margin: 3px 0 0; font: 500 11px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--text-muted); } .holocron-header-stats { display: flex; gap: 6px; align-items: center; } .holocron-chip { font: 500 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; padding: 5px 9px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); background: color-mix(in srgb, var(--accent) 8%, transparent); color: color-mix(in srgb, var(--accent) 80%, var(--text)); } .holocron-chip-pact { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); background: color-mix(in srgb, var(--accent) 14%, transparent); } /* ---- Tether (concentration indicator) ---- */ .holocron-tether-pip { font: 600 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; padding: 4px 10px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 20%, var(--bg-elev)); border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--border)); color: var(--text); } /* ---- Footer (echoes + empty state) ---- */ .holocron-echoes { display: flex; gap: 8px; font: 500 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); min-height: 18px; } .holocron-echoes:empty::before { content: "// no recent casts"; opacity: .5; } .holocron-empty { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 20px; color: var(--text-muted); font: 500 12px/1.5 var(--mono); letter-spacing: .14em; text-transform: uppercase; } .holocron-empty p { margin: 4px 0; } .holocron-empty .muted { opacity: .6; } /* ---- Header glyph for the appbar button (mini pyramid / cube) ---- */ /* When the Holocron is open, dampen the underlying scanlines so the overlay reads cleanly */ html.holocron-open body.page-character::before { opacity: .4; } /* ---- Echoes (recent casts strip at the bottom) ---- */ .holocron-echo { display: inline-block; padding: 4px 10px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 14%, var(--bg-elev)); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); color: var(--text); font: 600 10px/1 var(--mono); letter-spacing: .14em; text-transform: none; opacity: 0; transform: translateX(-6px); transition: opacity .22s ease-out, transform .22s ease-out; box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 25%, transparent); } .holocron-echo.is-in { opacity: 1; transform: translateX(0); } .holocron-echo:nth-child(n+2) { opacity: .65; } .holocron-echo:nth-child(n+3) { opacity: .4; } .holocron-echo:nth-child(n+4) { opacity: .25; } pointer-events: none; border-radius: inherit; } /* ============================================================ HOLOCRON v2 — Wheel (curated card hand) + Library tabs ============================================================ */ /* Make the shell a proper column flex container so wheel/library panes can fill remaining vertical space below the header. */ .holocron-shell { display: flex; flex-direction: column; } /* ---- School legend (under header, above panes) ---- */ .holo2-legend { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; align-content: flex-start; flex: 0 0 auto; gap: 6px; padding: 8px 22px 10px; border-bottom: 1px solid color-mix(in srgb, var(--accent) 12%, var(--border)); } .holo2-legend-chip { align-self: center; } .holo2-legend-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border: 1px solid color-mix(in srgb, hsl(var(--school-hue, 0), 55%, 45%) 35%, var(--border)); border-radius: 999px; font: 600 9px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: hsl(var(--school-hue, 0), 70%, 80%); background: color-mix(in srgb, hsl(var(--school-hue, 0), 55%, 30%) 14%, var(--bg-elev)); cursor: help; } .holo2-legend-swatch { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: hsl(var(--school-hue, 0), 60%, 55%); box-shadow: 0 0 5px hsl(var(--school-hue, 0), 60%, 50%); } /* ---- Tabs ---- */ .holo2-tabs { display: inline-flex; gap: 4px; padding: 3px; border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); border-radius: 999px; background: color-mix(in srgb, var(--accent) 6%, var(--bg-elev)); margin: 0 12px; } .holo2-tab { appearance: none; border: 0; background: transparent; color: var(--text-muted); padding: 5px 14px; border-radius: 999px; font: 600 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; transition: background .15s, color .15s; } .holo2-tab:hover { color: var(--text); background: color-mix(in srgb, var(--accent) 10%, transparent); } .holo2-tab.is-active { color: var(--bg); background: var(--accent); box-shadow: 0 0 14px var(--holo-glow); } /* ---- Panes (Wheel / Library) ---- */ .holo2-pane { position: relative; z-index: 1; flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; padding: 18px 22px 16px; gap: 14px; } .holo2-pane[hidden] { display: none; } .holo2-slots { display: flex; flex-wrap: wrap; gap: 12px; } .holo2-slots-empty { color: var(--text-muted); font: 500 11px/1 var(--mono); } .holo2-slot-group { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border)); border-radius: 999px; background: color-mix(in srgb, var(--accent) 5%, var(--bg-elev)); } .holo2-slot-label { font: 700 10px/1 var(--mono); letter-spacing: .12em; color: color-mix(in srgb, var(--accent) 75%, var(--text)); } .holo2-slot-pact .holo2-slot-label { color: color-mix(in srgb, hsl(280, 60%, 70%) 80%, var(--text)); } .holo2-slot-rail { display: inline-flex; gap: 4px; } .holo2-slot-pip { appearance: none; border: 1px solid color-mix(in srgb, var(--accent) 50%, var(--border)); background: transparent; width: 11px; height: 11px; border-radius: 50%; cursor: pointer; padding: 0; } .holo2-slot-pip.filled { background: var(--accent); box-shadow: 0 0 6px var(--holo-glow); } .holo2-slot-pip.spent { opacity: .35; } .holo2-slot-pip:hover { transform: scale(1.15); } /* ---- Library pane ---- */ .holo2-lib-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .holo2-search { flex: 1 1 200px; background: var(--bg-elev); border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border)); color: var(--text); padding: 6px 10px; border-radius: 6px; font: 500 12px/1.2 var(--mono); } .holo2-search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 14px var(--holo-glow); } .holo2-lib-filters { display: inline-flex; gap: 4px; } .holo2-filter-chip { appearance: none; border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border)); background: transparent; color: var(--text-muted); padding: 4px 9px; border-radius: 999px; font: 600 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; } .holo2-filter-chip:hover { color: var(--text); border-color: var(--accent); } .holo2-filter-chip.is-active { background: var(--accent); color: var(--bg); border-color: var(--accent); } /* "X/Y prepared (Cleric · WIS +3 + lvl 5)" indicator above the library. */ .holo2-lib-prep-meter { flex: 1 1 100%; display: flex; align-items: baseline; gap: 10px; padding: 6px 10px; border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border)); border-radius: 6px; background: color-mix(in srgb, var(--accent) 5%, var(--bg-elev)); font: 500 11px/1.2 var(--mono); letter-spacing: .04em; } .holo2-lib-prep-meter.is-over { border-color: hsl(0, 70%, 55%); background: color-mix(in srgb, hsl(0, 70%, 40%) 10%, var(--bg-elev)); } .holo2-prep-label { color: var(--text-muted); text-transform: uppercase; letter-spacing: .12em; font-size: 10px; } .holo2-prep-count { font-weight: 700; font-size: 13px; color: var(--accent); } .holo2-lib-prep-meter.is-over .holo2-prep-count { color: hsl(0, 75%, 70%); } .holo2-prep-note { color: var(--text-muted); font-size: 10px; margin-left: auto; text-align: right; } /* Always-prepared spells: lock the toggle so users can't unprepare them. */ .holo2-lib-toggle.is-locked { opacity: .85; cursor: not-allowed; border-style: dotted; } .holo2-library { flex: 1 1 auto; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 4px; } .holo2-lib-empty { padding: 24px 12px; text-align: center; } /* Section header per level — sticky to the top of the scrolling library so the user always knows which level group they're scrolling through. */ .holo2-lib-group-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: baseline; gap: 12px; padding: 10px 8px 5px; margin-top: 6px; background: linear-gradient(180deg, var(--bg-elev) 0%, var(--bg-elev) 65%, transparent 100%); border-bottom: 1px dashed color-mix(in srgb, var(--accent) 22%, var(--border)); font: 700 10px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; } .holo2-lib-group-title { color: color-mix(in srgb, var(--accent) 75%, var(--text)); } .holo2-lib-group-count { color: var(--text-muted); letter-spacing: .14em; font-weight: 500; font-size: 9px; } .holo2-lib-group-slots { margin-left: auto; color: color-mix(in srgb, var(--accent) 60%, var(--text-muted)); letter-spacing: .14em; font-weight: 500; font-size: 9px; } .holo2-lib-list { display: flex; flex-direction: column; gap: 4px; } .holo2-lib-row { display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 10px; padding: 6px 8px; border: 1px solid color-mix(in srgb, var(--accent) 10%, transparent); border-radius: 4px; background: color-mix(in srgb, var(--accent) 3%, var(--bg-elev)); transition: border-color .15s, background .15s; } .holo2-lib-row:hover { border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); background: color-mix(in srgb, var(--accent) 7%, var(--bg-elev)); } .holo2-lib-row.is-prepared { border-color: color-mix(in srgb, hsl(var(--school-hue, 0), 60%, 50%) 35%, var(--border)); } .holo2-lib-row.is-dimmed { /* Unprepared class-list spells fade back — visible but clearly inactive. */ opacity: .5; } .holo2-lib-row.is-dimmed:hover { opacity: .85; } .holo2-lib-row.is-onbar { background: color-mix(in srgb, hsl(var(--school-hue, 0), 60%, 35%) 12%, var(--bg-elev)); border-color: color-mix(in srgb, hsl(var(--school-hue, 0), 60%, 55%) 50%, var(--accent)); } .holo2-lib-row.is-concentrating { border-color: hsl(280, 60%, 65%); box-shadow: 0 0 0 1px hsl(280, 60%, 60%) inset, 0 0 14px color-mix(in srgb, hsl(280, 60%, 55%) 40%, transparent); animation: holo-conc-pulse 2.4s ease-in-out infinite; } .holo2-conc-marker { display: inline-block; margin-left: 2px; color: hsl(280, 60%, 80%); text-shadow: 0 0 6px hsl(280, 60%, 55%); font-size: 11px; animation: holo-conc-marker-pulse 2s ease-in-out infinite; } @keyframes holo-conc-pulse { 0%, 100% { box-shadow: 0 0 0 1px hsl(280, 60%, 60%) inset, 0 0 12px color-mix(in srgb, hsl(280, 60%, 55%) 35%, transparent); } 50% { box-shadow: 0 0 0 2px hsl(280, 60%, 70%) inset, 0 0 22px color-mix(in srgb, hsl(280, 60%, 60%) 55%, transparent); } } @keyframes holo-conc-marker-pulse { 0%, 100% { opacity: .7; } 50% { opacity: 1; transform: scale(1.1); } } /* Row body layout: name row + meta row */ .holo2-lib-name-row { display: inline-flex; align-items: center; gap: 8px; } .holo2-lib-onbar-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 6px var(--holo-glow), 0 0 12px color-mix(in srgb, var(--accent) 60%, transparent); flex-shrink: 0; } .holo2-lib-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 4px; background: color-mix(in srgb, hsl(var(--school-hue, 0), 55%, 30%) 65%, transparent); border: 1px solid hsl(var(--school-hue, 0), 50%, 45%); color: hsl(var(--school-hue, 0), 70%, 85%); } .holo2-lib-icon.is-glyph { font: 500 17px/1 system-ui, var(--mono); } .holo2-lib-icon.is-monogram { font: 700 11px/1 var(--mono); letter-spacing: .04em; } .holo2-lib-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .holo2-lib-name { font: 600 12px/1.2 var(--mono); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .holo2-lib-meta { display: flex; flex-wrap: wrap; gap: 5px; font: 500 9px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); } .holo2-lib-tag { padding: 1px 4px; border: 1px solid color-mix(in srgb, var(--accent) 15%, var(--border)); border-radius: 3px; } .holo2-lib-actions { display: inline-flex; gap: 6px; } .holo2-lib-toggle { appearance: none; border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border)); background: transparent; color: var(--text-muted); padding: 4px 8px; border-radius: 999px; font: 600 9px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; } .holo2-lib-toggle:hover { color: var(--text); border-color: var(--accent); } .holo2-lib-toggle.is-on { background: var(--accent); color: var(--bg); border-color: var(--accent); box-shadow: 0 0 8px var(--holo-glow); } .holo2-lib-locked { padding: 2px 8px; font: 600 9px/1 var(--mono); letter-spacing: .14em; color: color-mix(in srgb, var(--accent) 50%, var(--text-muted)); } /* ---- Status strip at top of Spellbook pane (slots / concentration / echoes) ---- */ .holo2-status-strip { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; padding: 8px 4px; border-bottom: 1px solid color-mix(in srgb, var(--accent) 14%, var(--border)); } .holo2-status-strip .holo2-slots { display: inline-flex; flex-wrap: wrap; gap: 8px; } .holo2-status-strip .holocron-tether[hidden] { display: none; } .holo2-status-strip .holocron-tether { /* Override the v1 absolute positioning so the tether participates in the status strip's normal flex flow instead of floating at the modal bottom. */ position: static; left: auto; bottom: auto; transform: none; display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 12px; border-radius: 999px; background: color-mix(in srgb, hsl(280, 60%, 40%) 22%, var(--bg-elev)); border: 1px solid color-mix(in srgb, hsl(280, 60%, 60%) 45%, var(--accent)); box-shadow: 0 0 14px color-mix(in srgb, hsl(280, 60%, 55%) 35%, transparent); font: 600 10px/1 var(--mono); letter-spacing: .14em; color: color-mix(in srgb, hsl(280, 60%, 80%) 80%, var(--text)); } .holo2-tether-drop { appearance: none; border: 1px solid color-mix(in srgb, hsl(280, 60%, 50%) 50%, var(--border)); background: transparent; color: inherit; width: 18px; height: 18px; border-radius: 50%; cursor: pointer; padding: 0; display: grid; place-items: center; font-size: 10px; } .holo2-tether-drop:hover { background: color-mix(in srgb, hsl(280, 60%, 55%) 50%, transparent); color: var(--text); } .holo2-status-strip .holocron-echoes { flex: 1 1 200px; display: inline-flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; } /* ---- Force Tree placeholder ---- */ .holo2-tree-placeholder { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 8px; padding: 60px 30px; text-align: center; } .holo2-tree-title { font: 700 14px/1 var(--mono); letter-spacing: .32em; color: color-mix(in srgb, var(--accent) 70%, var(--text)); margin: 0; } .holo2-tree-placeholder p.muted { max-width: 360px; line-height: 1.5; } /* ============================================================ THEMED TOOLTIP — replaces native browser tooltips system-wide. Driven by tooltip.js; migrates legacy `title=` attrs on first hover. ============================================================ */ .od20-tooltip { position: fixed; z-index: 9999; padding: 6px 10px; max-width: 280px; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 18%, var(--bg-elev)) 0%, color-mix(in srgb, var(--accent) 10%, var(--bg-elev)) 100%); border: 1px solid color-mix(in srgb, var(--accent) 50%, var(--border)); border-radius: 4px; color: var(--text); font: 500 11px/1.35 var(--mono); letter-spacing: .04em; pointer-events: none; opacity: 0; transform: translateY(2px); transition: opacity .15s ease-out, transform .15s ease-out; box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent) inset, 0 6px 18px rgba(0, 0, 0, .55), 0 0 16px color-mix(in srgb, var(--accent) 25%, transparent); white-space: pre-line; } .od20-tooltip.is-visible { opacity: 1; transform: translateY(0); } /* Pointer arrow — small rotated square with the same border/bg, masked so only the target-facing edges show. Positioned via --arrow-x set by tooltip.js. */ .od20-tooltip::after { content: ""; position: absolute; width: 8px; height: 8px; left: var(--arrow-x, 50%); transform: translateX(-50%) rotate(45deg); background: color-mix(in srgb, var(--accent) 14%, var(--bg-elev)); border: 1px solid color-mix(in srgb, var(--accent) 50%, var(--border)); } .od20-tooltip[data-placement="top"]::after { bottom: -5px; border-top: 0; border-left: 0; } .od20-tooltip[data-placement="bottom"]::after { top: -5px; border-bottom: 0; border-right: 0; } /* ============================================================ ACTIVE EFFECTS — WoW-style buff icons under the portrait. Currently used for concentration; layout is a flex row so we can add more effects (buffs, conditions) later without refactor. ============================================================ */ .hero-portrait-stack { display: flex; flex-direction: column; align-items: center; gap: 8px; } .char-effects { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; /* Hidden visually when empty, but reserves no space (so layout doesn't jitter) */ } .char-effects:empty { display: none; } .char-effect { appearance: none; position: relative; width: 18px; height: 18px; padding: 0; border-radius: 3px; border: 1px solid hsl(280, 60%, 60%); background: linear-gradient(180deg, color-mix(in srgb, hsl(var(--school-hue, 0), 55%, 30%) 35%, var(--bg-elev)) 0%, color-mix(in srgb, var(--bg) 60%, transparent) 100%); color: hsl(var(--school-hue, 0), 75%, 88%); cursor: pointer; display: grid; place-items: center; transition: transform .15s, filter .15s; animation: char-effect-conc-pulse 2.4s ease-in-out infinite; } .char-effect:hover { filter: brightness(1.2); transform: scale(1.12); } @keyframes char-effect-conc-pulse { 0%, 100% { box-shadow: 0 0 5px hsl(280, 60%, 50%); } 50% { box-shadow: 0 0 10px hsl(280, 60%, 55%), 0 0 16px color-mix(in srgb, hsl(280, 60%, 60%) 50%, transparent); } } .char-effect-icon { line-height: 1; } .char-effect-icon.is-glyph { font: 500 11px/1 system-ui, var(--mono); } .char-effect-icon.is-monogram { font: 700 7px/1 var(--mono); letter-spacing: .02em; } .char-effect-marker { position: absolute; bottom: -3px; right: -2px; font-size: 7px; line-height: 1; color: hsl(280, 60%, 88%); text-shadow: 0 0 3px hsl(280, 60%, 55%); background: var(--bg); border-radius: 50%; padding: 1px; pointer-events: none; } /* ============================================================ CAST BAR — persistent bottom strip on the character screen. 12 slots + spell-slot pip rail above. Hotkeys 1-9, 0, -, =. ============================================================ */ /* The fixed-positioned wrapper. Holds two stacked siblings: 1. .cast-bar-tab — Holocron "folder tab" (z-index 0) 2. .cast-bar — main bar with rail + 12 slot tiles (z-index 1, in front) The tab is intentionally narrower + shorter; the bar overlaps its bottom portion so only the top sticks up, like a tab on a manila folder. */ .cast-bar-frame { position: fixed; left: 50%; bottom: 34px; transform: translateX(-50%); z-index: 50; display: flex; flex-direction: column; align-items: stretch; transition: transform .26s ease-out, opacity .22s; } .cast-bar { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 14px 10px; background: color-mix(in srgb, var(--accent) 6%, color-mix(in srgb, var(--bg) 92%, transparent)); border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border)); border-radius: 10px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent) inset, 0 8px 28px rgba(0, 0, 0, .45), 0 0 22px color-mix(in srgb, var(--accent) 14%, transparent); } /* Push the main content up so the cast-bar region doesn't cover the bottom of cards. Frame = tab (~22px peeking) + bar (~96px). */ body.page-character { padding-bottom: 160px; } /* Hide the whole frame while a modal or the side drawer is open. */ body.modal-open #cast-bar-frame, body.drawer-open #cast-bar-frame { transform: translate(-50%, calc(100% + 30px)); opacity: 0; pointer-events: none; } /* EXCEPTION: when the Holocron is open, the cast bar stays visible as a drop target for drag-and-drop equip. */ html.holocron-open body.modal-open #cast-bar-frame { transform: translateX(-50%); opacity: 1; pointer-events: auto; z-index: 1500; } /* Collapsed: frame slides down so only the tab peeks at the bottom. The tab is the persistent handle (click ▾ in the tab tools to expand again). */ #cast-bar-frame.is-collapsed { transform: translate(-50%, calc(100% - 30px)); } .cast-bar.is-collapsed .cast-bar-toggle, #cast-bar-frame.is-collapsed .cast-bar-toggle { transform: rotate(180deg); } /* Toggle button is now part of .cast-bar-toolbar (styled via .cast-bar-tool). Only its collapsed-state rotation lives separately above. */ /* ---- Slot pip rail (above the tile row) ---- */ .cast-bar-rail { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; max-width: 100%; } .cast-rail-empty { font: 500 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); padding: 2px 0; } .cast-rail-group { display: inline-flex; align-items: center; gap: 5px; padding: 2px 7px; border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border)); border-radius: 999px; background: color-mix(in srgb, var(--accent) 5%, var(--bg-elev)); } .cast-rail-label { font: 700 9px/1 var(--mono); letter-spacing: .12em; color: color-mix(in srgb, var(--accent) 75%, var(--text)); } .cast-rail-pact .cast-rail-label { color: color-mix(in srgb, hsl(280, 60%, 70%) 80%, var(--text)); } .cast-rail-pips { display: inline-flex; gap: 3px; } .cast-rail-pip { appearance: none; border: 1px solid color-mix(in srgb, var(--accent) 50%, var(--border)); background: transparent; width: 9px; height: 9px; border-radius: 50%; cursor: pointer; padding: 0; transition: transform .12s; } .cast-rail-pip.filled { background: var(--accent); box-shadow: 0 0 5px var(--holo-glow); } .cast-rail-pip.spent { opacity: .35; } .cast-rail-pip:hover { transform: scale(1.2); } /* ---- The 12 slot tiles ---- */ .cast-bar-slots { display: inline-grid; grid-template-columns: repeat(12, 56px); gap: 6px; } /* Holocron folder tab — sits BEHIND the cast bar (z-index 0 vs bar's 1), narrower than the bar so it only peeks up at the top. Bottom is hidden behind the bar; padding-bottom adds the overlap zone. */ .cast-bar-tab { display: flex; align-items: center; align-self: center; width: 88%; min-width: 520px; /* Visible portion at top + overlap zone hidden behind the cast bar. */ height: 30px; padding: 0 14px 12px 12px; margin-bottom: -16px; box-sizing: content-box; background: color-mix(in srgb, var(--accent) 18%, var(--bg-elev)); border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border)); border-bottom: 0; border-radius: 9px 9px 0 0; gap: 6px; position: relative; z-index: 0; box-shadow: 0 -4px 12px rgba(0, 0, 0, .35), 0 0 12px color-mix(in srgb, var(--accent) 18%, transparent); } html[data-side="dark"] .cast-bar-tab { background: color-mix(in srgb, hsl(280, 60%, 28%) 22%, var(--bg-elev)); } @media (max-width: 700px) { .cast-bar-tab { width: 86%; min-width: 0; } } .holocron-tab-btn { appearance: none; display: inline-flex; align-items: center; gap: 12px; flex: 1 1 auto; min-width: 0; /* allow status chip to ellipsis */ background: transparent; border: 0; color: var(--text); font: 700 11px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; cursor: pointer; padding: 4px 10px; border-radius: 5px; position: relative; text-align: left; transition: background .15s, color .15s; } .holocron-tab-btn:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--text); } .holocron-tab-btn:focus-visible { outline: none; background: color-mix(in srgb, var(--accent) 22%, transparent); box-shadow: 0 0 0 1px var(--accent); } /* Techy 3-line glyph — slightly varied widths so it reads as "data lines" rather than a hamburger menu. Glows softly. */ .holocron-tab-icon { display: inline-flex; flex-direction: column; justify-content: center; gap: 3px; width: 14px; flex-shrink: 0; } .holocron-tab-icon span { display: block; height: 1px; background: var(--accent); border-radius: 1px; box-shadow: 0 0 4px var(--holo-glow); width: 100%; } .holocron-tab-icon span:nth-child(2) { width: 70%; } .holocron-tab-icon span:nth-child(3) { width: 88%; } .holocron-tab-label { color: var(--accent); white-space: nowrap; flex-shrink: 0; } html[data-side="dark"] .holocron-tab-label { color: hsl(280, 70%, 78%); } /* Live status — prep meter + concentration chip, right-side of the button. */ .holocron-tab-status { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; min-width: 0; font: 500 10px/1 var(--mono); letter-spacing: .12em; color: var(--text-muted); overflow: hidden; white-space: nowrap; } .holocron-tab-status:empty { display: none; } .holocron-tab-status .tab-sep { display: inline-block; width: 1px; height: 11px; background: color-mix(in srgb, var(--accent) 35%, var(--border)); flex-shrink: 0; } .holocron-tab-chip { display: inline-flex; align-items: center; gap: 5px; overflow: hidden; text-overflow: ellipsis; } .holocron-tab-chip.is-over { color: hsl(0, 75%, 70%); } .holocron-tab-chip.tab-conc { color: hsl(280, 65%, 80%); animation: tab-conc-pulse 2.2s ease-in-out infinite; } @keyframes tab-conc-pulse { 0%, 100% { opacity: .75; } 50% { opacity: 1; } } /* Right-side icon cluster — rests + collapse. Visually separated from the Holocron button by a thin divider. */ .cast-bar-tab-tools { display: inline-flex; align-items: center; gap: 3px; padding-left: 8px; border-left: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border)); flex-shrink: 0; } /* Drag-onto-tab unequip target — when a tile is being dragged from the bar, the tab lights up to advertise the drop. */ .cast-bar-tab.is-unequip-target { background: color-mix(in srgb, hsl(0, 70%, 45%) 16%, var(--bg-elev)); border-color: hsl(0, 70%, 55%); box-shadow: 0 0 14px hsla(0, 70%, 55%, .5); } .cast-bar-tab.is-unequip-target .holocron-tab-label::after { content: " ← drop to unequip"; margin-left: 8px; color: hsl(0, 75%, 78%); font-size: 10px; letter-spacing: .1em; } .cast-bar-tool { appearance: none; border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); background: color-mix(in srgb, var(--bg-elev) 92%, transparent); color: color-mix(in srgb, var(--accent) 75%, var(--text-muted)); width: 26px; height: 18px; padding: 0; border-radius: 6px 6px 4px 4px; cursor: pointer; font: 700 11px/1 var(--mono); display: grid; place-items: center; transition: color .12s, background .12s, box-shadow .12s, transform .12s; } .cast-bar-tool:hover { color: var(--text); background: color-mix(in srgb, var(--accent) 16%, var(--bg-elev)); box-shadow: 0 0 10px var(--holo-glow); transform: translateY(-1px); } .cast-bar-tool-icon { width: 11px; height: 11px; background-color: currentColor; } .cast-bar-tool.has-left-gap { margin-left: 10px; } /* Empty-bar attention — when no spells are equipped, a glowing comet orbits the perimeter of the entire Holocron tab. The tab itself never moves or resizes; only the comet animates. Pulled onto the wider tab so the affordance reads at-a-glance from across the screen. */ @property --orbit-angle { syntax: ''; inherits: false; initial-value: 0deg; } #cast-bar-frame.is-bar-empty .cast-bar-tab::before { content: ""; position: absolute; inset: -1.5px; pointer-events: none; border-radius: 10px 10px 0 0; padding: 1.5px; /* Only the top portion of the tab is visible (bottom is behind the bar), so the orbit reads as a glow that travels across the visible top edge and down the sides. */ background: conic-gradient( from var(--orbit-angle, 0deg), transparent 0deg, transparent 325deg, color-mix(in srgb, var(--accent) 55%, transparent) 348deg, var(--accent) 358deg, transparent 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; filter: blur(.6px) drop-shadow(0 0 3px var(--accent)); animation: holocron-orbit 2.6s linear infinite; } @keyframes holocron-orbit { to { --orbit-angle: 360deg; } } @media (prefers-reduced-motion: reduce) { #cast-bar-frame.is-bar-empty .cast-bar-tab::before { animation: none; } } .cast-slot { appearance: none; position: relative; width: 56px; height: 56px; padding: 0; border-radius: 6px; border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border)); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 4%, var(--bg-elev)) 0%, color-mix(in srgb, var(--bg) 70%, transparent) 100%); color: var(--text); cursor: pointer; transition: border-color .12s, transform .12s, box-shadow .12s; display: grid; place-items: center; } .cast-slot.is-empty { border-style: dashed; border-color: color-mix(in srgb, var(--accent) 18%, var(--border)); cursor: default; } .cast-slot.is-empty:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); } .cast-slot.is-filled { /* Filled tiles get a school-hued border + faint inner background tint */ border-color: color-mix(in srgb, hsl(var(--school-hue, 0), 60%, 55%) 55%, var(--accent)); background: linear-gradient(180deg, color-mix(in srgb, hsl(var(--school-hue, 0), 55%, 35%) 14%, var(--bg-elev)) 0%, color-mix(in srgb, var(--bg) 70%, transparent) 100%); } .cast-slot.is-filled:hover { transform: translateY(-2px); border-color: hsl(var(--school-hue, 0), 60%, 65%); box-shadow: 0 0 0 1px color-mix(in srgb, hsl(var(--school-hue, 0), 60%, 55%) 50%, var(--accent)) inset, 0 0 14px color-mix(in srgb, hsl(var(--school-hue, 0), 60%, 55%) 30%, var(--holo-glow)), 0 4px 0 color-mix(in srgb, hsl(var(--school-hue, 0), 60%, 30%) 35%, transparent); } .cast-slot.is-cantrip { /* Cantrips never consume slots — mark with a brighter, solid outline */ border-color: color-mix(in srgb, var(--accent) 60%, var(--border)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent) inset; } /* ---- Cast burst: kyber core + force shockwave + starburst streaks ---- Triggered by JS spawning a child on fire and removing it after the animation finishes. Each layer animates on its own curve so the burst feels staged: core ignites, ring expands, streaks trail off. School hue drives every layer via --school-hue. */ .cast-slot.is-firing { animation: cast-slot-pulse .7s cubic-bezier(.22, 1, .36, 1); z-index: 2; } @keyframes cast-slot-pulse { 0% { transform: scale(1) rotate(0); filter: brightness(1); } 10% { transform: scale(1.08) rotate(-1deg); filter: brightness(1.6); } 22% { transform: scale(1.22) rotate(.6deg); filter: brightness(2.1); box-shadow: 0 0 0 2px hsl(var(--school-hue, 0), 80%, 78%) inset, 0 0 36px hsl(var(--school-hue, 0), 70%, 55%), 0 0 14px hsl(var(--school-hue, 0), 85%, 85%) inset; } 45% { transform: scale(1.05) rotate(-.4deg); filter: brightness(1.3); } 100% { transform: scale(1) rotate(0); filter: brightness(1); box-shadow: 0 0 0 1px transparent inset; } } .cast-burst { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; overflow: visible; } /* Kyber core — bright white center that bursts outward in school color, like a lightsaber crystal igniting. Screen-blended for an additive feel. */ .cast-burst-core { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at center, hsla(0, 0%, 100%, .95) 0%, hsl(var(--school-hue, 0), 90%, 80%) 18%, hsl(var(--school-hue, 0), 75%, 55%) 38%, transparent 70%); mix-blend-mode: screen; filter: blur(.4px); animation: cast-kyber-core .6s cubic-bezier(.22, 1, .36, 1) forwards; } @keyframes cast-kyber-core { 0% { opacity: 0; transform: scale(.05); } 15% { opacity: 1; transform: scale(.5); } 55% { opacity: .85; transform: scale(1.05); } 100% { opacity: 0; transform: scale(1.7); } } /* Force shockwave — two staggered rings expanding past the tile bounds. */ .cast-burst-ring { position: absolute; inset: 0; border-radius: 6px; border: 2px solid hsl(var(--school-hue, 0), 80%, 72%); box-shadow: 0 0 10px hsl(var(--school-hue, 0), 75%, 60%), inset 0 0 6px hsl(var(--school-hue, 0), 85%, 85%); animation: cast-force-ring .65s cubic-bezier(.22, 1, .36, 1) forwards; } .cast-burst-ring.is-late { animation: cast-force-ring .75s cubic-bezier(.22, 1, .36, 1) .12s forwards; border-color: hsl(var(--school-hue, 0), 65%, 55%); opacity: 0; } @keyframes cast-force-ring { 0% { transform: scale(1); opacity: 1; border-width: 2px; } 55% { opacity: .45; } 100% { transform: scale(1.55); opacity: 0; border-width: 1px; filter: blur(1.2px); } } /* Starburst streaks — 8 radial spokes (lightsaber-flare style) painted by a conic-gradient; rotates and fades while expanding. */ .cast-burst-streaks { position: absolute; inset: -8%; border-radius: 50%; background: conic-gradient( hsla(0, 0%, 100%, .85) 0deg, transparent 4deg, transparent 41deg, hsl(var(--school-hue, 0), 85%, 78%) 45deg, transparent 49deg, transparent 86deg, hsla(0, 0%, 100%, .85) 90deg, transparent 94deg, transparent 131deg, hsl(var(--school-hue, 0), 85%, 78%) 135deg, transparent 139deg, transparent 176deg, hsla(0, 0%, 100%, .85) 180deg, transparent 184deg, transparent 221deg, hsl(var(--school-hue, 0), 85%, 78%) 225deg, transparent 229deg, transparent 266deg, hsla(0, 0%, 100%, .85) 270deg, transparent 274deg, transparent 311deg, hsl(var(--school-hue, 0), 85%, 78%) 315deg, transparent 319deg); /* Fade spokes toward the center (so they read as streaks shooting outward, not a star with a filled body). */ -webkit-mask: radial-gradient(circle at center, transparent 18%, black 26%, black 62%, transparent 78%); mask: radial-gradient(circle at center, transparent 18%, black 26%, black 62%, transparent 78%); mix-blend-mode: screen; filter: blur(.6px); animation: cast-streaks .55s cubic-bezier(.22, 1, .36, 1) forwards; } @keyframes cast-streaks { 0% { opacity: 0; transform: scale(.4) rotate(0deg); } 20% { opacity: 1; transform: scale(.85) rotate(8deg); } 100% { opacity: 0; transform: scale(1.25) rotate(22deg); } } /* ---- Side-aware burst gating ---- Light side: kyber crystal + clean radial streaks (lightsaber/holocron feel). Dark side : violet smoke + crackling Sith Force-lightning bolts. */ html:not([data-side="dark"]) .cast-burst-smoke, html:not([data-side="dark"]) .cast-burst-bolts { display: none; } html[data-side="dark"] .cast-burst-core, html[data-side="dark"] .cast-burst-streaks { display: none; } /* Dark-side ring is smokier and slower — less "shockwave," more "rolling thunder." Still uses the school hue so each spell still feels distinct. */ html[data-side="dark"] .cast-burst-ring { border-color: hsl(var(--school-hue, 280), 55%, 50%); box-shadow: 0 0 16px hsl(var(--school-hue, 280), 65%, 40%), inset 0 0 6px hsl(280, 85%, 75%); filter: blur(.8px); } /* Sith smoke — three offset blurred clouds that swell outward and dissipate. */ .cast-burst-smoke { position: absolute; inset: -8%; border-radius: 50%; background: radial-gradient(circle at 35% 40%, hsla(280, 45%, 22%, .8) 0, transparent 38%), radial-gradient(circle at 65% 60%, hsla(290, 50%, 28%, .75) 0, transparent 34%), radial-gradient(circle at 50% 35%, hsla(265, 40%, 18%, .7) 0, transparent 30%), radial-gradient(circle at center, hsla(0, 0%, 0%, .55) 0, transparent 50%); mix-blend-mode: multiply; filter: blur(7px); animation: cast-sith-smoke .85s ease-out forwards; } @keyframes cast-sith-smoke { 0% { opacity: 0; transform: scale(.45) rotate(0deg); filter: blur(4px); } 30% { opacity: .95; } 100% { opacity: 0; transform: scale(1.4) rotate(12deg); filter: blur(10px); } } /* Sith Force-lightning — jagged bolts radiating from center, drawn via an SVG mask so the school hue + an electric-white core glow through. */ .cast-burst-bolts { position: absolute; inset: -18%; /* The mask is the bolt geometry; the background is the glow color. */ -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-50 -50 100 100'%3E%3Cg stroke='white' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 0 L7 -11 L3 -22 L11 -33 L6 -47'/%3E%3Cpath d='M0 0 L13 -5 L22 -10 L35 -5 L48 -11'/%3E%3Cpath d='M0 0 L18 6 L13 19 L25 23 L21 39'/%3E%3Cpath d='M0 0 L4 14 L-6 22 L4 34 L-3 47'/%3E%3Cpath d='M0 0 L-12 5 L-22 1 L-36 8 L-48 3'/%3E%3Cpath d='M0 0 L-15 -4 L-12 -18 L-26 -22 L-22 -38'/%3E%3Cpath d='M0 0 L9 4 L14 -2 L19 5 L26 1'/%3E%3Cpath d='M0 0 L-8 -3 L-13 4 L-21 -2 L-27 3'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-50 -50 100 100'%3E%3Cg stroke='white' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 0 L7 -11 L3 -22 L11 -33 L6 -47'/%3E%3Cpath d='M0 0 L13 -5 L22 -10 L35 -5 L48 -11'/%3E%3Cpath d='M0 0 L18 6 L13 19 L25 23 L21 39'/%3E%3Cpath d='M0 0 L4 14 L-6 22 L4 34 L-3 47'/%3E%3Cpath d='M0 0 L-12 5 L-22 1 L-36 8 L-48 3'/%3E%3Cpath d='M0 0 L-15 -4 L-12 -18 L-26 -22 L-22 -38'/%3E%3Cpath d='M0 0 L9 4 L14 -2 L19 5 L26 1'/%3E%3Cpath d='M0 0 L-8 -3 L-13 4 L-21 -2 L-27 3'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat; background: radial-gradient(circle at center, hsla(0, 0%, 100%, 1) 0%, hsl(var(--school-hue, 280), 90%, 80%) 25%, hsl(var(--school-hue, 280), 75%, 55%) 55%, hsl(280, 65%, 35%) 90%); filter: drop-shadow(0 0 6px hsl(280, 85%, 65%)) drop-shadow(0 0 12px hsl(var(--school-hue, 280), 70%, 50%)); mix-blend-mode: screen; animation: cast-sith-bolts .65s cubic-bezier(.22, 1, .36, 1) forwards; } /* Two flicker passes — Sith lightning never holds steady. */ @keyframes cast-sith-bolts { 0% { opacity: 0; transform: scale(.4) rotate(-8deg); } 10% { opacity: 1; transform: scale(.85) rotate(2deg); } 18% { opacity: .35; transform: scale(.88) rotate(-3deg); } 28% { opacity: 1; transform: scale(.95) rotate(4deg); } 60% { opacity: .55; transform: scale(1.1) rotate(-2deg); } 100% { opacity: 0; transform: scale(1.3) rotate(10deg); } } /* ---- Pre-cast charge-up (~90ms) ---- Tile contracts slightly, draws in a school-hued aura, building anticipation before the burst. Sells the cast as "powerful" rather than "instant flash." */ .cast-slot.is-charging { animation: cast-slot-charge .09s ease-in; z-index: 2; } @keyframes cast-slot-charge { 0% { transform: scale(1); filter: brightness(1); } 100% { transform: scale(.94); filter: brightness(1.4); box-shadow: 0 0 0 1px hsl(var(--school-hue, 0), 80%, 70%) inset, 0 0 22px hsl(var(--school-hue, 0), 75%, 55%) inset, 0 0 16px hsl(var(--school-hue, 0), 70%, 50%); } } /* ---- Bar-wide power ripple ---- When any slot fires, the cast bar itself flickers with a school-hued aura, and neighboring tiles shimmer. Connects the cast to the broader UI so the moment doesn't feel siloed to a single 56px square. */ .cast-bar.is-cast-ripple { animation: cast-bar-pulse .7s cubic-bezier(.22, 1, .36, 1); } @keyframes cast-bar-pulse { 0% { box-shadow: var(--cast-bar-shadow, 0 -10px 24px rgba(0,0,0,.5)); } 18% { box-shadow: 0 0 0 1px hsl(var(--firing-hue, 0), 65%, 55%) inset, 0 0 28px hsl(var(--firing-hue, 0), 70%, 50%), 0 -10px 24px rgba(0,0,0,.5); } 100% { box-shadow: var(--cast-bar-shadow, 0 -10px 24px rgba(0,0,0,.5)); } } /* Neighbor tiles ripple outward from the firing slot. Each .cast-slot picks its own delay based on its data-slot vs. --firing-slot, computed via calc() on a derived offset. Falls back gracefully when the var isn't set. */ .cast-bar.is-cast-ripple .cast-slot:not(.is-firing):not(.is-empty) { animation: cast-slot-shimmer .6s ease-out; } @keyframes cast-slot-shimmer { 0%, 100% { filter: brightness(1); } 40% { filter: brightness(1.25); box-shadow: 0 0 0 1px color-mix(in srgb, hsl(var(--school-hue, 0), 60%, 55%) 50%, transparent) inset, 0 0 12px color-mix(in srgb, hsl(var(--school-hue, 0), 60%, 55%) 35%, transparent); } } /* ---- Screen vignette flash ---- A fixed-position overlay that pulses a school-hued vignette around the viewport edges. School hue is read from the firing tile's --school-hue propagated up to the overlay via JS-set body var (planned), or via the default accent if not wired. Pointer-events none so it never blocks UI. */ #cast-flash-overlay { position: fixed; inset: 0; pointer-events: none; z-index: 9999; opacity: 0; background: radial-gradient(ellipse at center, transparent 55%, color-mix(in srgb, var(--accent) 22%, transparent) 88%, color-mix(in srgb, var(--accent) 45%, transparent) 100%); mix-blend-mode: screen; } #cast-flash-overlay.is-flashing { animation: cast-screen-flash .5s ease-out; } @keyframes cast-screen-flash { 0% { opacity: 0; } 18% { opacity: 1; } 100% { opacity: 0; } } html[data-side="dark"] #cast-flash-overlay { background: radial-gradient(ellipse at center, transparent 50%, hsla(280, 70%, 35%, .35) 80%, hsla(280, 80%, 25%, .6) 100%); mix-blend-mode: normal; } /* ---- Light-side signature: kyber crystal facets ---- Six small diamond shapes (clip-path) tumble outward from the tile center, like a holocron shedding its protective shell. Each gets a different trajectory via the data-i attribute. */ .cast-burst-facet { position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; background: linear-gradient(135deg, hsla(0, 0%, 100%, .95) 0%, hsl(var(--school-hue, 0), 80%, 75%) 50%, hsl(var(--school-hue, 0), 70%, 45%) 100%); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); box-shadow: 0 0 8px hsl(var(--school-hue, 0), 80%, 65%); opacity: 0; animation: cast-facet-tumble .7s cubic-bezier(.22, 1, .36, 1) forwards; } .cast-burst-facet[data-i="0"] { --fx: 22px; --fy: -14px; --fr: 540deg; } .cast-burst-facet[data-i="1"] { --fx: -20px; --fy: -18px; --fr: -420deg; } .cast-burst-facet[data-i="2"] { --fx: 18px; --fy: 20px; --fr: 380deg; } .cast-burst-facet[data-i="3"] { --fx: -22px; --fy: 16px; --fr: -520deg; } .cast-burst-facet[data-i="4"] { --fx: 4px; --fy: -26px; --fr: 720deg; } .cast-burst-facet[data-i="5"] { --fx: -6px; --fy: 24px; --fr: -360deg; } @keyframes cast-facet-tumble { 0% { transform: translate(0, 0) rotate(0) scale(.3); opacity: 0; } 15% { transform: translate(calc(var(--fx) * .15), calc(var(--fy) * .15)) rotate(calc(var(--fr) * .15)) scale(1); opacity: 1; } 100% { transform: translate(var(--fx), var(--fy)) rotate(var(--fr)) scale(.4); opacity: 0; } } html[data-side="dark"] .cast-burst-facet { display: none; } /* ---- Dark-side signature: chromatic aberration + secondary tendrils ---- */ /* Glitch overlay — duplicates the tile bounds with red/cyan offsets that jitter for a few frames. Reads as a Force-disturbance in reality. */ .cast-burst-glitch { position: absolute; inset: -2px; border: 1px solid hsla(0, 90%, 60%, .8); box-shadow: -2px 0 0 hsla(0, 90%, 55%, .55), 2px 0 0 hsla(180, 90%, 60%, .55), 0 0 14px hsla(280, 80%, 60%, .4); opacity: 0; border-radius: inherit; mix-blend-mode: screen; animation: cast-glitch-jitter .55s steps(8, end) forwards; } @keyframes cast-glitch-jitter { 0% { opacity: 0; transform: translate(0, 0); } 10% { opacity: 1; transform: translate(-3px, 1px); } 20% { opacity: .4; transform: translate(2px, -2px); } 30% { opacity: 1; transform: translate(-2px, -1px); } 45% { opacity: .6; transform: translate(3px, 2px); } 60% { opacity: .9; transform: translate(-1px, 1px); } 80% { opacity: .3; transform: translate(2px, 0); } 100% { opacity: 0; transform: translate(0, 0); } } html:not([data-side="dark"]) .cast-burst-glitch { display: none; } /* Secondary lightning tendrils — fainter, slower-fading bolts that linger after the main flash. Reuses the same SVG mask, scaled larger + delayed. */ .cast-burst-tendrils { position: absolute; inset: -22%; -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-50 -50 100 100'%3E%3Cg stroke='white' stroke-width='1' fill='none' stroke-linecap='round' stroke-linejoin='round' opacity='.8'%3E%3Cpath d='M0 0 L10 -8 L6 -18 L18 -24 L14 -38 L24 -46'/%3E%3Cpath d='M0 0 L16 -2 L26 -8 L40 -4 L48 -10'/%3E%3Cpath d='M0 0 L20 8 L16 22 L28 28 L24 44'/%3E%3Cpath d='M0 0 L6 16 L-4 26 L8 38'/%3E%3Cpath d='M0 0 L-14 8 L-26 4 L-38 12 L-48 6'/%3E%3Cpath d='M0 0 L-18 -2 L-14 -18 L-30 -22 L-26 -38'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-50 -50 100 100'%3E%3Cg stroke='white' stroke-width='1' fill='none' stroke-linecap='round' stroke-linejoin='round' opacity='.8'%3E%3Cpath d='M0 0 L10 -8 L6 -18 L18 -24 L14 -38 L24 -46'/%3E%3Cpath d='M0 0 L16 -2 L26 -8 L40 -4 L48 -10'/%3E%3Cpath d='M0 0 L20 8 L16 22 L28 28 L24 44'/%3E%3Cpath d='M0 0 L6 16 L-4 26 L8 38'/%3E%3Cpath d='M0 0 L-14 8 L-26 4 L-38 12 L-48 6'/%3E%3Cpath d='M0 0 L-18 -2 L-14 -18 L-30 -22 L-26 -38'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat; background: radial-gradient(circle at center, hsla(0, 0%, 100%, .9) 0%, hsl(280, 85%, 75%) 35%, hsl(var(--school-hue, 280), 65%, 50%) 70%, transparent 95%); filter: drop-shadow(0 0 4px hsl(280, 90%, 65%)); mix-blend-mode: screen; opacity: 0; animation: cast-tendrils .85s cubic-bezier(.22, 1, .36, 1) .15s forwards; } @keyframes cast-tendrils { 0% { opacity: 0; transform: scale(.6) rotate(0); } 20% { opacity: .85; transform: scale(.9) rotate(-6deg); } 55% { opacity: .5; transform: scale(1.15) rotate(8deg); } 100% { opacity: 0; transform: scale(1.5) rotate(18deg); } } html:not([data-side="dark"]) .cast-burst-tendrils { display: none; } @media (prefers-reduced-motion: reduce) { .cast-slot.is-firing, .cast-slot.is-charging, .cast-bar.is-cast-ripple, .cast-bar.is-cast-ripple .cast-slot, #cast-flash-overlay.is-flashing { animation: none; } .cast-burst-core, .cast-burst-ring, .cast-burst-streaks, .cast-burst-bolts, .cast-burst-smoke, .cast-burst-facet, .cast-burst-glitch, .cast-burst-tendrils { animation-duration: .25s; } } /* Empty-state hint — clickable pill button sitting inline in the cast-bar rail. Backup CTA for the labeled Holocron button on the toolbar; both route to opening the Holocron. Hidden while dragging so it doesn't compete with the drop-target highlights. */ .cast-bar-hint { appearance: none; border: 1px dashed color-mix(in srgb, var(--accent) 50%, var(--border)); background: color-mix(in srgb, var(--accent) 8%, var(--bg-elev)); color: color-mix(in srgb, var(--accent) 75%, var(--text-muted)); font: 600 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; cursor: pointer; text-shadow: 0 0 8px color-mix(in srgb, var(--accent) 35%, transparent); animation: cast-bar-hint-pulse 2.6s ease-in-out infinite; transition: background .12s, border-color .12s, color .12s, transform .12s; } .cast-bar-hint:hover { background: color-mix(in srgb, var(--accent) 20%, var(--bg-elev)); border-style: solid; border-color: var(--accent); color: var(--text); transform: translateY(-1px); box-shadow: 0 0 14px var(--holo-glow); } @keyframes cast-bar-hint-pulse { 0%, 100% { opacity: .75; } 50% { opacity: 1; } } body.is-spell-dragging .cast-bar-hint { display: none; } @media (max-width: 700px) { .cast-bar-hint { font-size: 9px; letter-spacing: .08em; padding: 4px 9px; } } /* ---- Drag & drop visual feedback ---- */ /* While dragging anything, dim non-target UI so the bar pops */ body.is-spell-dragging .cast-bar { box-shadow: 0 0 0 1px color-mix(in srgb, hsl(var(--drag-school-hue, 0), 65%, 55%) 40%, transparent) inset, 0 8px 28px rgba(0,0,0,.45), 0 0 24px color-mix(in srgb, hsl(var(--drag-school-hue, 0), 65%, 55%) 35%, transparent); } /* Empty slots pulse with the dragged spell's school hue */ body.is-spell-dragging .cast-slot.is-empty { border-style: solid; border-color: hsl(var(--drag-school-hue, 0), 60%, 55%); animation: cast-slot-drag-target 1s ease-in-out infinite; } @keyframes cast-slot-drag-target { 0%, 100% { box-shadow: 0 0 8px color-mix(in srgb, hsl(var(--drag-school-hue, 0), 65%, 55%) 35%, transparent); } 50% { box-shadow: 0 0 18px color-mix(in srgb, hsl(var(--drag-school-hue, 0), 65%, 60%) 60%, transparent); } } /* Filled slots during drag — dimmer but still drop-able (swap/replace) */ body.is-spell-dragging .cast-slot.is-filled { opacity: .75; } /* Hover-over feedback: extra brightness + lift */ .cast-slot.is-drop-hover { border-color: hsl(var(--drag-school-hue, 0), 70%, 70%) !important; box-shadow: 0 0 0 2px hsl(var(--drag-school-hue, 0), 65%, 60%) inset, 0 0 22px hsl(var(--drag-school-hue, 0), 65%, 55%) !important; transform: translateY(-2px); opacity: 1 !important; } /* Materialize animation when a spell drops into a slot */ .cast-slot.is-materialize { animation: cast-slot-materialize .4s ease-out; } @keyframes cast-slot-materialize { 0% { transform: scale(.55); box-shadow: 0 0 30px hsl(var(--school-hue, 0), 65%, 60%); filter: brightness(1.4); } 50% { transform: scale(1.1); } 100% { transform: scale(1); filter: brightness(1); } } /* The Spellbook row currently being dragged */ .holo2-lib-row.is-dragging { opacity: .4; border-style: dashed; } /* Insufficient-slot error: brief red shake */ .cast-slot.is-invalid-fire { animation: cast-slot-invalid .5s ease-out; } @keyframes cast-slot-invalid { 0%, 100% { transform: translateX(0); border-color: color-mix(in srgb, hsl(var(--school-hue, 0), 60%, 55%) 55%, var(--accent)); } 15% { transform: translateX(-4px); border-color: hsl(0, 80%, 55%); box-shadow: 0 0 12px hsl(0, 70%, 50%); } 30% { transform: translateX(4px); border-color: hsl(0, 80%, 55%); box-shadow: 0 0 12px hsl(0, 70%, 50%); } 45% { transform: translateX(-3px); border-color: hsl(0, 80%, 55%); } 60% { transform: translateX(3px); } 75% { transform: translateX(-2px); } } /* The active concentration spell — purple/violet pulsing border + chain marker */ .cast-slot.is-concentrating { border-color: hsl(280, 65%, 65%); animation: cast-slot-conc-pulse 2.4s ease-in-out infinite; } @keyframes cast-slot-conc-pulse { 0%, 100% { box-shadow: 0 0 0 1px hsl(280, 60%, 55%) inset, 0 0 10px color-mix(in srgb, hsl(280, 60%, 55%) 40%, transparent); } 50% { box-shadow: 0 0 0 2px hsl(280, 65%, 70%) inset, 0 0 22px color-mix(in srgb, hsl(280, 60%, 60%) 60%, transparent); } } .cast-slot-conc-marker { position: absolute; top: 1px; right: 3px; appearance: none; background: transparent; border: 0; padding: 1px 3px; border-radius: 4px; font-size: 11px; line-height: 1; color: hsl(280, 65%, 88%); text-shadow: 0 0 6px hsl(280, 60%, 55%); cursor: pointer; animation: cast-slot-conc-marker-pulse 2s ease-in-out infinite; z-index: 1; } .cast-slot-conc-marker:hover { color: hsl(0, 80%, 80%); text-shadow: 0 0 8px hsl(0, 70%, 55%); transform: rotate(-15deg); background: color-mix(in srgb, hsl(0, 70%, 40%) 35%, transparent); animation: none; } @keyframes cast-slot-conc-marker-pulse { 0%, 100% { opacity: .7; } 50% { opacity: 1; } } .cast-slot-key { position: absolute; top: 3px; left: 5px; font: 700 9px/1 var(--mono); letter-spacing: .04em; color: color-mix(in srgb, var(--accent) 55%, var(--text-muted)); pointer-events: none; } .cast-slot-icon { letter-spacing: .04em; } .cast-slot-icon.is-glyph { font: 500 22px/1 system-ui, var(--mono); color: hsl(var(--school-hue, 0), 75%, 80%); text-shadow: 0 0 8px hsl(var(--school-hue, 0), 70%, 50%); } .cast-slot-icon.is-monogram { font: 700 13px/1 var(--mono); color: hsl(var(--school-hue, 0), 70%, 82%); } /* ---- Responsive: shrink tiles on narrower viewports ---- */ @media (max-width: 900px) { .cast-bar-slots { grid-template-columns: repeat(12, 44px); gap: 5px; } .cast-slot { width: 44px; height: 44px; } .cast-slot-key { font-size: 8px; top: 2px; left: 3px; } .cast-slot-icon { font-size: 13px; } body.page-character { padding-bottom: 116px; } } @media (max-width: 700px) { .cast-bar { padding: 8px 10px; } .cast-bar-slots { grid-template-columns: repeat(12, 38px); gap: 4px; } .cast-slot { width: 38px; height: 38px; } .cast-slot-icon { font-size: 11px; } body.page-character { padding-bottom: 104px; } } /* ============================================================ ADMIN PANEL (/admin) ============================================================ */ .page-admin { padding-bottom: 40px; } .admin-main { max-width: 1100px; margin: 32px auto; padding: 0 24px; } .admin-card { background: color-mix(in srgb, var(--bg-elev) 92%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border)); border-radius: 8px; padding: 24px 28px; margin-bottom: 24px; box-shadow: 0 8px 28px rgba(0, 0, 0, .35), 0 0 14px color-mix(in srgb, var(--accent) 8%, transparent); } .admin-card h2 { margin: 0 0 12px; color: var(--accent); font: 700 16px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; } .admin-form { display: flex; flex-direction: column; gap: 14px; max-width: 360px; } .admin-form label { display: flex; flex-direction: column; gap: 6px; } .admin-form label span { font: 600 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); } .admin-form input[type="password"] { background: var(--bg); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); color: var(--text); padding: 8px 12px; border-radius: 4px; font: 500 13px/1 var(--mono); } .admin-form input[type="password"]:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 14px var(--holo-glow); } .error { color: hsl(0, 75%, 70%); font: 500 12px/1.4 var(--mono); } .admin-roster-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .admin-roster-head h2 { margin: 0; } .admin-roster { width: 100%; border-collapse: collapse; margin-top: 14px; } .admin-roster th, .admin-roster td { padding: 10px 8px; border-bottom: 1px solid color-mix(in srgb, var(--accent) 10%, var(--border)); text-align: left; vertical-align: middle; } .admin-roster th { font: 700 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); background: color-mix(in srgb, var(--accent) 6%, transparent); } .admin-roster .spend-used { font: 500 12px/1 var(--mono); color: var(--text-muted); } .admin-roster input[type="number"] { background: var(--bg); border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border)); color: var(--text); padding: 4px 6px; border-radius: 3px; font: 500 12px/1 var(--mono); } .btn.small { padding: 4px 10px; font-size: 11px; } /* ============================================================ KB button on roster + KB modal ============================================================ */ /* KB button — always visible when the kb_upload feature is enabled for a character. (Conditional rendering happens in JS so locked characters never get the button.) */ .char-kb-btn { flex: 0 0 auto; align-self: stretch; width: 46px; margin: -14px 0; /* cancel li padding so the divider spans full height */ padding: 0; border: 0; border-left: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border)); background: transparent; color: color-mix(in srgb, var(--accent) 70%, var(--text-muted)); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: color .12s, background .12s; } .char-kb-btn:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); } .char-kb-btn:focus-visible { outline: none; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); } .char-kb-btn svg { display: block; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--accent) 40%, transparent)); } .kb-modal .modal-panel { width: min(680px, 95vw); } .kb-panel { padding: 22px 26px 20px; } .kb-panel .kb-sub { margin: 0 0 14px; font-size: 13px; } .kb-panel .kb-sub code { background: color-mix(in srgb, var(--accent) 12%, transparent); padding: 1px 5px; border-radius: 3px; font-size: 11px; } .kb-drop { border: 2px dashed color-mix(in srgb, var(--accent) 35%, var(--border)); border-radius: 8px; padding: 22px 20px; background: color-mix(in srgb, var(--accent) 4%, var(--bg-elev)); cursor: pointer; transition: border-color .15s, background .15s, transform .12s; margin-bottom: 14px; } .kb-drop:hover, .kb-drop:focus-visible { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--bg-elev)); } .kb-drop.is-drag { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, var(--bg-elev)); transform: scale(1.01); } .kb-drop.is-locked { border-color: hsl(0, 35%, 40%); background: color-mix(in srgb, hsl(0, 60%, 30%) 6%, var(--bg-elev)); cursor: not-allowed; opacity: .7; } .kb-drop-inner { display: flex; align-items: center; gap: 14px; } .kb-drop-icon { font-size: 28px; } .kb-drop-text { display: flex; flex-direction: column; gap: 4px; } .kb-drop-text strong { color: var(--text); font: 700 14px/1 var(--mono); letter-spacing: .04em; } .kb-drop-text .muted { font-size: 11px; } .kb-status { margin-bottom: 10px; display: flex; flex-direction: column; gap: 4px; } .kb-status:empty { display: none; } .kb-status-line { font: 500 12px/1.4 var(--mono); color: var(--text-muted); } .kb-status-line.ok { color: hsl(140, 50%, 70%); } .kb-status-line.error { color: hsl(0, 75%, 70%); } .kb-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-height: 360px; overflow-y: auto; } .kb-list li.kb-locked { padding: 14px; background: color-mix(in srgb, hsl(0, 60%, 25%) 12%, var(--bg-elev)); border: 1px solid hsl(0, 50%, 40%); border-radius: 6px; color: hsl(0, 70%, 80%); font-size: 13px; } .kb-list li.kb-locked strong { color: hsl(0, 80%, 85%); } .kb-list li.kb-locked .muted { font-size: 12px; margin-top: 4px; display: block; } .kb-file { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; background: color-mix(in srgb, var(--accent) 4%, var(--bg-elev)); border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border)); border-radius: 6px; } .kb-file-icon { font-size: 22px; flex: 0 0 auto; } .kb-file-body { flex: 1 1 auto; min-width: 0; } .kb-file-name { font: 700 13px/1.2 var(--mono); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kb-file-meta { font: 500 10px/1 var(--mono); letter-spacing: .08em; color: var(--text-muted); margin-top: 4px; } .kb-file-snippet { font-size: 11px; margin-top: 6px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .kb-file-delete { flex: 0 0 auto; width: 28px; height: 28px; border: 0; background: transparent; color: var(--text-muted); font-size: 13px; border-radius: 4px; cursor: pointer; transition: background .12s, color .12s; } .kb-file-delete:hover { background: rgba(229, 115, 115, .12); color: #ff8888; } /* ============================================================ Star Wars-themed chat error bubble ============================================================ */ .chat-msg.assistant.error { background: color-mix(in srgb, hsl(0, 60%, 30%) 12%, var(--bg-elev)); border-left: 3px solid hsl(0, 65%, 55%); color: hsl(0, 60%, 85%); font: 500 12.5px/1.5 var(--mono); white-space: pre-wrap; padding: 12px 14px; border-radius: 4px; } /* ============================================================ Droid console alert (feature-locked / access-denied modal) ============================================================ */ .droid-alert .droid-console { position: relative; width: min(480px, 92vw); background: linear-gradient(180deg, color-mix(in srgb, hsl(0, 60%, 20%) 30%, var(--bg)) 0%, color-mix(in srgb, hsl(0, 50%, 10%) 40%, var(--bg)) 100%); border: 1px solid hsl(0, 60%, 45%); border-radius: 6px; box-shadow: 0 0 0 1px color-mix(in srgb, hsl(0, 80%, 55%) 30%, transparent) inset, 0 0 36px hsla(0, 70%, 40%, .4), 0 24px 64px rgba(0, 0, 0, .7); overflow: hidden; color: hsl(0, 30%, 92%); font-family: var(--mono); } /* CRT scanline overlay — purely cosmetic */ .droid-scanlines { position: absolute; inset: 0; background: repeating-linear-gradient( 180deg, transparent 0, transparent 2px, rgba(255, 0, 0, .05) 2px, rgba(255, 0, 0, .05) 3px); pointer-events: none; mix-blend-mode: overlay; z-index: 1; } .droid-head { display: flex; align-items: center; gap: 14px; padding: 14px 18px 12px; background: linear-gradient(90deg, hsl(0, 65%, 22%) 0%, color-mix(in srgb, hsl(0, 55%, 18%) 70%, transparent) 100%); border-bottom: 1px solid hsl(0, 50%, 35%); position: relative; z-index: 2; } /* Droid head/eye visual — single rotating eye */ .droid-eye { width: 36px; height: 36px; border-radius: 50%; background: radial-gradient(circle at center, hsl(0, 0%, 8%) 0%, hsl(0, 0%, 4%) 60%, hsl(0, 80%, 25%) 100%); border: 2px solid hsl(0, 70%, 45%); box-shadow: 0 0 12px hsla(0, 80%, 55%, .6), inset 0 0 8px hsla(0, 80%, 50%, .4); display: grid; place-items: center; flex: 0 0 auto; } .droid-eye-pupil { width: 9px; height: 9px; background: hsl(0, 90%, 60%); border-radius: 50%; box-shadow: 0 0 8px hsl(0, 90%, 55%); animation: droid-blink 1.4s ease-in-out infinite; } @keyframes droid-blink { 0%, 70%, 100% { transform: scale(1); opacity: 1; } 85% { transform: scale(.2); opacity: .4; } } .droid-id { flex: 1 1 auto; min-width: 0; } .droid-id-line { font: 700 10px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: hsl(0, 30%, 75%); margin-bottom: 4px; } .droid-id-status { font: 700 13px/1 var(--mono); letter-spacing: .14em; color: hsl(0, 80%, 78%); display: inline-flex; align-items: center; gap: 7px; } .droid-led { width: 8px; height: 8px; border-radius: 50%; display: inline-block; } .droid-led-red { background: hsl(0, 90%, 55%); box-shadow: 0 0 8px hsl(0, 90%, 50%); animation: droid-led-pulse 1s ease-in-out infinite; } @keyframes droid-led-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } .droid-body { padding: 16px 20px 14px; position: relative; z-index: 2; } .droid-title { font: 700 16px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: hsl(0, 70%, 88%); margin: 0 0 12px; } .droid-beep { font: 700 12px/1.3 var(--mono); letter-spacing: .14em; color: hsl(0, 80%, 72%); margin: 0 0 12px; text-shadow: 0 0 6px hsla(0, 80%, 50%, .5); } .droid-translation { font: 500 13px/1.5 var(--mono); color: hsl(0, 20%, 88%); margin: 0 0 12px; } .droid-translation::before { content: "// translation: "; color: hsl(0, 25%, 65%); } .droid-hint { font: 500 12px/1.4 var(--mono); color: hsl(0, 30%, 75%); margin: 0; padding: 10px 12px; border-left: 2px solid hsl(0, 60%, 50%); background: color-mix(in srgb, hsl(0, 60%, 30%) 14%, transparent); } .droid-foot { display: flex; justify-content: flex-end; padding: 12px 20px 16px; border-top: 1px solid color-mix(in srgb, hsl(0, 50%, 40%) 40%, transparent); position: relative; z-index: 2; background: color-mix(in srgb, hsl(0, 50%, 15%) 30%, transparent); } .droid-ack { background: hsl(0, 65%, 38%) !important; border-color: hsl(0, 70%, 50%) !important; color: hsl(0, 20%, 95%) !important; font: 700 11px/1 var(--mono) !important; letter-spacing: .18em !important; text-transform: uppercase; padding: 8px 18px !important; } .droid-ack:hover { background: hsl(0, 70%, 45%) !important; box-shadow: 0 0 14px hsla(0, 80%, 50%, .5); } /* ============================================================ Admin globals + activity + sandbox ============================================================ */ .admin-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .admin-card-head h2 { margin: 0; } .admin-card-head .small { font-size: 11px; } .admin-globals-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .admin-block { display: flex; flex-direction: column; gap: 6px; } .admin-block-wide { grid-column: 1 / -1; } .admin-block-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; font: 600 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); } .admin-block-label > span > small { text-transform: none; letter-spacing: .04em; font-weight: 500; } .admin-textarea { width: 100%; min-height: 220px; background: var(--bg); border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border)); color: var(--text); padding: 10px 12px; border-radius: 4px; font: 500 13px/1.5 var(--mono); resize: vertical; } .admin-textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 14px var(--holo-glow); } .admin-input-num { background: var(--bg); border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border)); color: var(--text); padding: 6px 10px; border-radius: 4px; font: 600 13px/1 var(--mono); width: 100px; } .admin-input-num.small { width: 60px; } .admin-input-num:focus { outline: none; border-color: var(--accent); } .admin-inline-row { display: inline-flex; gap: 10px; align-items: center; } .admin-mini-label { display: inline-flex; align-items: center; gap: 6px; font: 600 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); } .admin-mini-label input { margin-left: 4px; } .admin-mini-label-wide { flex: 1 1 240px; } .admin-mini-label-wide input { flex: 1 1 auto; width: 100%; } .admin-checkbox-inline { display: inline-flex; align-items: center; gap: 6px; font: 500 11px/1 var(--mono); letter-spacing: .06em; color: var(--text-muted); } .muted.small, .muted .small { font-size: 11px; } .admin-card .small { font-size: 11px; } /* Save-status dot */ .save-dot { width: 9px; height: 9px; border-radius: 50%; background: transparent; display: inline-block; flex: 0 0 auto; transition: background .15s, box-shadow .15s; } .save-dot[data-state="idle"], .save-dot[data-state="saved"] { background: hsl(140, 60%, 55%); box-shadow: 0 0 6px hsl(140, 60%, 50%); } .save-dot[data-state="typing"] { background: hsl(45, 90%, 60%); box-shadow: 0 0 6px hsl(45, 90%, 55%); } .save-dot[data-state="saving"] { background: hsl(200, 80%, 60%); box-shadow: 0 0 6px hsl(200, 80%, 55%); animation: save-dot-pulse .8s ease-in-out infinite; } .save-dot[data-state="error"] { background: hsl(0, 75%, 55%); box-shadow: 0 0 8px hsl(0, 75%, 50%); } @keyframes save-dot-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } } /* Activity */ .admin-card-activity .admin-card-head { margin-bottom: 8px; } .activity-clock { font-size: 11px; margin-left: 8px; } .activity-rows { display: flex; flex-direction: column; gap: 6px; } .activity-row { display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; gap: 12px; padding: 8px 12px; background: color-mix(in srgb, var(--accent) 4%, var(--bg-elev)); border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--border)); border-radius: 4px; } .activity-row.is-paused { background: color-mix(in srgb, hsl(45, 50%, 30%) 14%, var(--bg-elev)); border-color: hsl(45, 70%, 50%); } .activity-name { display: flex; align-items: center; gap: 8px; } .activity-dot { width: 8px; height: 8px; border-radius: 50%; background: hsl(140, 70%, 55%); box-shadow: 0 0 6px hsl(140, 70%, 50%); } .activity-paused-badge { font: 700 9px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: hsl(45, 90%, 75%); background: color-mix(in srgb, hsl(45, 70%, 40%) 30%, transparent); padding: 3px 6px; border-radius: 3px; } .activity-stats { font: 500 11px/1 var(--mono); color: var(--text-muted); } /* Sandbox */ .admin-card-sandbox .admin-collapsible { cursor: pointer; user-select: none; } .admin-card-sandbox .caret { color: var(--text-muted); font-size: 14px; } .admin-sandbox-body { max-height: 0; overflow: hidden; transition: max-height .25s ease-out; } .admin-sandbox-body.is-open { max-height: 800px; } .admin-sandbox-controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin-bottom: 14px; } .admin-sandbox-controls select, .admin-sandbox-controls input[type="text"] { background: var(--bg); border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border)); color: var(--text); padding: 6px 10px; border-radius: 4px; font: 500 12px/1.2 var(--mono); } .admin-sandbox-controls input[type="text"] { min-width: 240px; } .admin-sandbox-output { background: color-mix(in srgb, var(--accent) 4%, var(--bg-elev)); border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--border)); border-radius: 4px; padding: 14px; min-height: 80px; font: 500 13px/1.5 var(--mono); } .sandbox-estimate, .sandbox-result { display: flex; flex-direction: column; gap: 4px; } .sandbox-result-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; } .sandbox-reply { background: var(--bg); border-left: 2px solid var(--accent); padding: 10px 14px; border-radius: 0 4px 4px 0; white-space: pre-wrap; font-family: var(--mono); } /* Small button sizing for activity rows */ .btn.small { padding: 4px 9px; font-size: 11px; line-height: 1; } @media (max-width: 900px) { .admin-globals-grid { grid-template-columns: 1fr; } }