rows; the icon, equip, and trade cells use rowspan=2
so they span both rows while the name + description sit one above
the other in the middle column. Browser-native column alignment
keeps the layout strict -- long names can't bleed back over the
icon column the way they did under CSS grid.
The iconScale modifier on the wrapper (.inv-icon-scale-1 vs -3)
controls the icon column width via a CSS variable. */
.inspect-inv-card.inv-icon-scale-1 { --inv-icon-w: 28px; }
.inspect-inv-card.inv-icon-scale-3 { --inv-icon-w: 72px; }
/* BUILD 203: 4x of the original "small" 28px tile -- used by the
inspect view so painted PNG item art reads at a useful size. */
.inspect-inv-card.inv-icon-scale-4 { --inv-icon-w: 112px; }
/* BUILD 203: hover callout for inspect-view inventory icons. Floats
next to the icon with a 200px version of the painted art + the
item's name/description/stats. Position is set inline from JS so
the anchor logic can clamp to the viewport. */
.inv-icon-callout {
position: fixed;
z-index: 900;
width: 260px;
padding: 10px 12px;
background: #0c0c0c;
border: 2px solid var(--orange);
border-radius: 4px;
box-shadow: 0 0 12px rgba(255,154,58,0.5);
pointer-events: none; /* don't trap mouse -- closes when icon mouseleave fires */
font-size: 12px;
letter-spacing: 0.02em;
}
.inv-icon-callout-art {
display: flex; align-items: center; justify-content: center;
margin: 0 auto 8px;
}
.inv-icon-callout-art img,
.inv-icon-callout-art svg {
width: auto;
height: 200px;
max-width: 100%;
object-fit: contain;
image-rendering: auto;
display: block;
}
.inv-icon-callout-name {
margin: 0 0 4px;
color: var(--orange);
text-align: center;
letter-spacing: 0.08em;
font-size: 14px;
}
.inv-icon-callout-desc {
margin: 0 0 6px;
color: #ccc;
line-height: 1.3;
}
.inv-icon-callout-stats {
border-top: 1px dotted #444;
padding-top: 6px;
color: var(--green);
font-size: 11px;
letter-spacing: 0.04em;
display: flex; flex-direction: column; gap: 2px;
}
.inspect-inv-table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
margin: 0;
}
.inspect-inv-table .inv-col-icon { width: var(--inv-icon-w, 72px); }
.inspect-inv-table .inv-col-text { width: auto; }
.inspect-inv-table .inv-col-action { width: 56px; }
.inspect-inv-table td {
padding: 4px 8px;
vertical-align: middle;
word-wrap: break-word;
overflow-wrap: break-word;
}
/* Top of each item row pair gets a thin separator. The FIRST item
(no .divider class on tr) is flush against the card border. */
.inspect-inv-table tr.divider > td { border-top: 1px solid #2a2a2a; }
/* ICON CELL -- centered, sized via the column width. */
.inspect-inv-table .inv-cell-icon {
width: var(--inv-icon-w, 72px);
height: var(--inv-icon-w, 72px);
padding: 8px 4px;
text-align: center;
}
.inspect-inv-table .inv-cell-icon svg,
.inspect-inv-table .inv-cell-icon img {
width: var(--inv-icon-w, 72px);
height: var(--inv-icon-w, 72px);
max-width: 100%;
max-height: 100%;
display: inline-block;
object-fit: contain;
}
/* NAME row -- top of the middle column. */
.inspect-inv-table .inv-cell-name {
color: var(--fg);
font-size: 13px;
font-weight: bold;
letter-spacing: 0.06em;
padding-top: 6px;
padding-bottom: 0;
}
.inspect-inv-table .inv-cell-name.equipped { color: var(--orange); }
/* DESC row -- bottom of the middle column. */
.inspect-inv-table .inv-cell-desc {
color: var(--fg-dim);
font-size: 11px;
line-height: 1.3;
padding-top: 0;
padding-bottom: 6px;
}
/* ACTION CELLS (equip + trade) -- icon button stacked over its
callout label. Each cell is only as wide as the column. */
.inspect-inv-table .inv-cell-action {
text-align: center;
padding: 4px 6px;
}
.inspect-inv-icon-btn {
width: 36px;
height: 36px;
padding: 4px;
background: #111;
border: 1px solid var(--fg-dim);
border-radius: 4px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
}
.inspect-inv-icon-btn {
position: relative; /* anchor for the CSS tooltip below */
}
.inspect-inv-icon-btn:hover {
border-color: var(--orange);
background: #1a1100;
box-shadow: 0 0 4px rgba(255, 122, 0, 0.4);
}
.inspect-inv-icon-btn svg { width: 100%; height: 100%; display: block; }
/* CSS-only tooltip for the inventory action buttons. Reads the text
from data-tip and renders a small orange-bordered callout above
the button on hover (and on keyboard focus for accessibility).
The native browser title= attribute still works as a backup but
can fail to fire on some platforms / setups -- this rule guarantees
the hint shows up. */
.inspect-inv-icon-btn[data-tip]::after {
content: attr(data-tip);
position: absolute;
bottom: calc(100% + 6px);
left: 50%;
transform: translateX(-50%);
background: #000;
color: var(--orange);
border: 1px solid var(--orange);
padding: 4px 8px;
font-size: 11px;
letter-spacing: 0.04em;
white-space: nowrap;
pointer-events: none;
opacity: 0;
transition: opacity 120ms ease-in-out 200ms;
z-index: 100;
box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
}
.inspect-inv-icon-btn[data-tip]:hover::after,
.inspect-inv-icon-btn[data-tip]:focus-visible::after {
opacity: 1;
}
/* ----- Camp screen ----- */
.camp-top {
display: grid;
grid-template-columns: auto 1fr;
gap: 12px;
align-items: start;
}
.campfire-art {
background: radial-gradient(ellipse at 50% 80%, #2a1208 0%, #000 80%);
border: 1px solid #444;
}
/* BUILD 205: campfire is now a looping MP4 (with SVG fallback). The
host needs to clip the video to its border box and not pick up
any inline-flow whitespace. */
.campfire-art-video {
overflow: hidden;
line-height: 0;
box-sizing: border-box;
}
/* ----- Camp info pane (upper-right of camp screen) -----
FIXED height (matching the campfire) + internal scroll so the panel
never grows tall enough to overlap the controls or roster below it.
Anything beyond the visible window is reachable via the scrollbar. */
.camp-info-pane {
min-width: 320px;
/* BUILD 193: shorter default so all six party rows below stay above
the fold. The pane expands to a tall popover when activePane is
'inspect' (see #screen-camp.inspect-mode .camp-info-pane below). */
height: 230px;
box-sizing: border-box;
border: 1px dotted #444;
padding: 8px 12px;
font-size: 12px;
overflow-y: auto;
overflow-x: hidden;
}
/* BUILD 193: the "USE THE COMMAND BAR..." hint pinned just under the
campfire image. Tight margins so it doesn't add a tall row. */
.camp-left { display: flex; flex-direction: column; gap: 4px; }
.camp-left .camp-hint {
margin: 0;
font-size: 11px;
letter-spacing: 0.04em;
line-height: 1.3;
color: var(--violet);
max-width: 320px;
}
/* INSPECT MODE: the info pane balloons to fill the rest of the screen
above the command bar, and the bottom party-roster (#camp-log) is
hidden until ESC dismisses inspect. */
#screen-camp.inspect-mode .camp-info-pane {
height: auto;
min-height: 360px;
/* Subtract some chrome (campfire/hint/command bar) from viewport. */
max-height: calc(100vh - 260px);
}
#screen-camp.inspect-mode #camp-log { display: none; }
/* Make sure long lines wrap rather than blow out the width. */
.camp-info-pane p, .camp-info-pane div { word-wrap: break-word; }
.camp-pane-title { color: var(--orange); margin: 0 0 6px; letter-spacing: 0.10em; }
.camp-inspect-title {
color: var(--orange);
letter-spacing: 0.10em;
font-size: 15px;
margin: 0 0 6px;
border-bottom: 1px solid #444;
padding-bottom: 4px;
}
.camp-inspect-selector { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.camp-inspect-selector button { padding: 2px 6px; font-size: 11px; }
.camp-inspect-selector button.selected { background: var(--orange); color: #000; }
.camp-inspect-close { margin-left: auto; }
.camp-inspect-vitals { margin: 4px 0 6px; color: var(--green); }
.camp-inspect-vitals .gold-label { color: var(--orange); }
.camp-inspect-vitals .gold-amt { color: var(--orange); font-weight: bold; }
.camp-inspect-section { color: var(--orange); margin: 6px 0 3px; font-size: 12px; letter-spacing: 0.08em; }
.camp-equipped-list { display: flex; flex-wrap: wrap; gap: 6px; }
.camp-equipped-list .equipped-item { color: var(--green); }
.camp-inspect-item-row {
display: flex; gap: 6px; align-items: center; padding: 2px 0;
border-bottom: 1px dotted #1d1d1d;
}
.camp-inspect-item-row span { flex: 1; }
.camp-inspect-item-row .equipped { color: var(--green); }
.camp-inspect-item-row button { padding: 2px 6px; font-size: 11px; }
.camp-gold-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.camp-gold-row input { width: 70px; padding: 2px; font-size: 12px; }
.camp-gold-row button { padding: 2px 6px; font-size: 11px; }
/* ----------------------------------------------------------------------
Camp INSPECT redesign (BUILD 126):
Card-style sections inside the camp info pane. The pane keeps its
fixed height + scroll, so even a heavily-loaded character page can
grow vertically without disturbing the camp layout around it.
---------------------------------------------------------------------- */
.inspect-card {
border: 1px solid #2d2d2d;
border-left: 3px solid var(--orange);
padding: 6px 8px;
margin: 6px 0;
background: rgba(255,255,255,0.015);
}
.inspect-card-title {
color: var(--orange);
font-size: 11px;
letter-spacing: 0.14em;
margin: 0 0 5px;
text-transform: uppercase;
}
.inspect-identity {
display: flex; gap: 10px; align-items: center;
}
.inspect-identity .who {
flex: 1; line-height: 1.4;
}
.inspect-identity .who .name {
color: var(--green); font-size: 15px; letter-spacing: 0.08em;
}
.inspect-identity .who .sub { color: #c9c9c9; font-size: 12px; }
.inspect-identity .who .sub.note { color: #888; }
/* BUILD 374/375: large identity card rendered in the camp LEFT column
(under the campfire) while inspect mode is active. Naked layout --
no orange left bar, no card border, no portrait outline -- so the
player's eye lands on the artwork, not the frame. A thin decorative
rule with a centered diamond separates the camp-hint text above
from the identity block. */
.big-identity-card {
margin-top: 6px;
padding: 0;
background: transparent;
border: none;
display: flex; flex-direction: column; gap: 8px; align-items: center;
}
.big-identity-separator {
position: relative;
width: 100%;
height: 14px;
margin: 4px 0 2px;
display: flex; align-items: center; justify-content: center;
}
.big-identity-separator::before,
.big-identity-separator::after {
content: '';
flex: 1;
height: 1px;
background: linear-gradient(to right, transparent, var(--orange) 40%, var(--orange) 60%, transparent);
opacity: 0.55;
}
.big-identity-separator-mark {
color: var(--orange);
font-size: 10px;
padding: 0 8px;
opacity: 0.85;
}
.big-identity-portrait {
width: 260px; height: 320px;
display: flex; align-items: center; justify-content: center;
overflow: hidden;
background: transparent;
border: none;
}
.big-identity-portrait img,
.big-identity-portrait svg {
width: 100%; height: 100%; object-fit: contain;
}
.big-identity-who {
width: 100%; line-height: 1.5; text-align: center;
}
.big-identity-who .name {
color: var(--orange); font-size: 18px; letter-spacing: 0.10em;
margin-bottom: 4px;
}
.big-identity-who .arc-line {
/* Alignment / Race / Class -- a couple of points larger than the
default so the build reads at a glance. Slightly muted color so
the name still dominates. */
color: #d8d8b8; font-size: 15px; letter-spacing: 0.06em;
margin-bottom: 2px;
text-transform: uppercase;
}
.big-identity-who .owner-line {
color: #888; font-size: 13px; font-style: italic;
margin-bottom: 4px;
}
.big-identity-who .status-line {
margin-top: 4px; font-size: 13px;
}
.big-identity-who .status-line .status-label { color: #c9c9c9; }
.big-identity-who .status-line .status-value { font-weight: bold; }
/* BUILD 374: spell-target picker banner (camp info-pane top) and combat
command-panel title. The banner is a thin orange-bordered card. */
.spell-pick-banner {
border: 1px solid var(--orange);
background: rgba(255,140,0,0.08);
padding: 8px 10px;
margin-bottom: 8px;
}
.spell-pick-banner button { margin-top: 6px; }
.spell-pick-title {
color: var(--orange);
letter-spacing: 0.10em;
margin: 0 0 4px;
}
/* BUILD 376: target-pick feedback chrome.
- .picker-active on the roster wrapper enables a strong hover
highlight on every row while a spell/potion target is pending.
- .row-flash is a one-shot animation applied to the row that was
just clicked, so the user sees an unmistakable confirmation.
- .spell-pick-action-row lays out CANCEL + hovered-name preview.
- .pick-feedback-box is the transient (3s) result panel that
flashes the target name + describes what happened. */
.roster-table.picker-active .roster-row {
cursor: pointer;
transition: background-color 0.08s linear, box-shadow 0.08s linear;
}
.roster-table.picker-active .roster-row:hover {
background-color: rgba(255, 140, 0, 0.18) !important;
box-shadow: inset 0 0 0 2px var(--orange);
}
@keyframes camp-row-flash {
0%, 100% { background-color: rgba(255, 140, 0, 0.05); }
20%, 60% { background-color: rgba(255, 140, 0, 0.65); }
40%, 80% { background-color: rgba(255, 140, 0, 0.15); }
}
.roster-table .roster-row.row-flash {
animation: camp-row-flash 1.2s ease-in-out;
}
/* BUILD 376: same flash treatment for combat party tiles. The
combat tile sits on a darker background; the box-shadow ring gives
the user a strong "you clicked HERE" beat. */
@keyframes combat-tile-flash {
0%, 100% { box-shadow: 0 0 0 0 rgba(255,140,0,0); }
25% { box-shadow: 0 0 24px 4px rgba(255,217,122,0.95); }
50% { box-shadow: 0 0 12px 2px rgba(255,140,0,0.65); }
75% { box-shadow: 0 0 24px 4px rgba(255,217,122,0.95); }
}
.combat-char.row-flash {
animation: combat-tile-flash 1.2s ease-in-out;
}
.spell-pick-action-row {
margin-top: 6px;
display: flex; align-items: center; gap: 10px;
}
.spell-pick-action-row button { padding: 4px 10px; }
.spell-pick-hovered-name {
color: var(--orange);
font-weight: bold;
font-size: 13px;
letter-spacing: 0.06em;
padding: 2px 8px;
border: 1px dashed rgba(255,140,0,0.55);
min-width: 140px;
text-align: center;
}
.spell-pick-hovered-name.empty {
color: #777;
font-style: italic;
font-weight: normal;
border-style: dotted;
border-color: rgba(200,200,200,0.25);
}
@keyframes pick-feedback-name-flash {
0%, 100% { color: var(--orange); text-shadow: 0 0 6px rgba(255,140,0,0.0); transform: scale(1); }
25% { color: #ffe7a3; text-shadow: 0 0 14px rgba(255,217,122,0.95); transform: scale(1.06); }
50% { color: var(--orange); text-shadow: 0 0 6px rgba(255,140,0,0.4); transform: scale(1); }
75% { color: #ffe7a3; text-shadow: 0 0 14px rgba(255,217,122,0.95); transform: scale(1.06); }
}
.pick-feedback-box {
border: 2px solid var(--orange);
background: rgba(255,140,0,0.10);
box-shadow: 0 0 14px rgba(255,140,0,0.30);
padding: 8px 12px;
margin-bottom: 8px;
text-align: center;
}
.pick-feedback-name {
font-size: 18px;
font-weight: bold;
letter-spacing: 0.10em;
animation: pick-feedback-name-flash 0.5s ease-in-out 4;
display: inline-block;
}
.pick-feedback-line {
margin-top: 4px;
color: var(--green);
font-size: 13px;
letter-spacing: 0.06em;
}
/* BUILD 375: Boltac avatar hover callout. Floats next to the cursor
after a 1.5s linger; clicking opens the full-portrait popout. The
wrapper is pointer-events:none so mouse-move on the underlying
portrait still fires and dismisses the callout. The inner button
re-enables pointer events for itself. */
.boltac-avatar-callout {
position: fixed; z-index: 9999;
pointer-events: none;
}
.boltac-avatar-callout-btn {
pointer-events: auto;
font-family: 'Courier New', monospace;
font-size: 11px;
letter-spacing: 0.10em;
background: #0a0a0a;
color: var(--orange);
border: 1px solid var(--orange);
padding: 4px 10px;
cursor: pointer;
box-shadow: 0 0 10px rgba(255,140,0,0.35);
}
.boltac-avatar-callout-btn:hover {
background: var(--orange);
color: #000;
}
/* BUILD 374: party-row visual hint that the row is the click target
for an in-progress spell pick. Works for both the combat .combat-char
tile and the camp UI.partyRoster row. Soft orange glow + pointer
cursor so the player knows they should click someone. */
.spell-pick-eligible {
outline: 2px solid var(--orange) !important;
outline-offset: -2px;
box-shadow: 0 0 12px rgba(255,140,0,0.45) !important;
cursor: pointer;
}
.spell-pick-ineligible {
opacity: 0.45;
filter: grayscale(40%);
}
/* Vitals & attribute pill grids. */
.inspect-pill-grid {
display: grid;
grid-template-columns: repeat(3, minmax(80px, 1fr));
gap: 4px 8px;
}
.inspect-pill {
display: flex; align-items: baseline; gap: 5px;
padding: 3px 6px;
border: 1px dotted #333;
background: rgba(255,255,255,0.02);
font-size: 12px;
white-space: nowrap;
}
.inspect-pill .pill-icon { font-size: 13px; line-height: 1; }
.inspect-pill .pill-label {
color: var(--orange); font-size: 10px; letter-spacing: 0.06em;
min-width: 28px;
}
.inspect-pill .pill-val {
color: var(--green); font-weight: bold;
margin-left: auto; /* push value to the right of each pill */
}
.inspect-pill .pill-val.subtle { color: #c9c9c9; font-weight: normal; }
.inspect-pill .pill-val.bad { color: #d44; }
/* Gold (GP) pill matches Boltac's gold-yellow styling. */
.inspect-pill .pill-val.gold { color: #ffd400; }
/* Spell slot rows -- one line per school */
.inspect-spell-row {
display: flex; gap: 6px; align-items: center; font-size: 12px; padding: 2px 0;
}
.inspect-spell-row .school {
color: var(--orange); width: 56px; letter-spacing: 0.08em;
}
.inspect-spell-row .slots { color: var(--green); font-family: monospace; }
.inspect-spell-row .slots .empty { color: #555; }
.inspect-spell-row .slots .full { color: var(--green); }
.inspect-spell-row .slots .partial { color: #ffd400; }
/* Equipped chips. */
.inspect-equip-chips {
display: flex; flex-wrap: wrap; gap: 5px;
}
.inspect-equip-chip {
display: inline-flex; align-items: center; gap: 4px;
padding: 2px 6px;
border: 1px solid #2d2d2d;
background: rgba(0,0,0,0.25);
font-size: 12px;
}
.inspect-equip-chip .chip-icon { font-size: 13px; }
.inspect-equip-chip .chip-name { color: var(--green); }
.inspect-equip-chip.empty { color: #555; border-style: dashed; }
/* Inventory rows -- icon + name (+ E badge) + desc + buttons. */
.inspect-inv-row {
display: grid;
grid-template-columns: 18px 1fr 1fr auto auto;
gap: 6px;
align-items: center;
padding: 3px 0;
border-bottom: 1px dotted #1d1d1d;
font-size: 12px;
}
.inspect-inv-row .inv-icon { text-align: center; }
.inspect-inv-row .inv-name { color: #c9c9c9; }
.inspect-inv-row .inv-name.equipped { color: var(--green); font-weight: bold; }
.inspect-inv-row .inv-name .eq-badge {
margin-left: 4px; font-size: 10px; color: var(--orange);
letter-spacing: 0.08em;
}
.inspect-inv-row .inv-desc { color: #888; font-size: 11px; }
.inspect-inv-row button { padding: 2px 6px; font-size: 11px; }
.inspect-inv-empty { color: #555; font-style: italic; }
/* Monster intel callout (BUILD 128) -- leader-only right-click on a
monster group in combat. Floats above the combat screen near the
pointer; dismisses on any click outside it. */
.monster-callout {
position: fixed;
z-index: 95;
background: #050505;
border: 2px solid var(--orange);
padding: 10px 12px;
min-width: 280px;
max-width: 380px;
max-height: 50vh;
overflow-y: auto;
box-shadow: 0 0 14px rgba(0,0,0,0.8);
font-size: 12px;
color: var(--green);
}
.monster-callout .callout-title {
color: var(--orange);
font-size: 13px;
letter-spacing: 0.14em;
margin: 0 0 6px;
text-transform: uppercase;
border-bottom: 1px solid #444;
padding-bottom: 4px;
display: flex; justify-content: space-between; align-items: center;
}
.monster-callout .callout-close {
background: none;
border: 1px solid #444;
color: #888;
font-size: 11px;
padding: 1px 6px;
cursor: pointer;
}
.monster-callout .callout-close:hover { color: var(--orange); border-color: var(--orange); }
.monster-callout .callout-summary {
color: #c9c9c9; font-size: 11px; margin-bottom: 6px;
}
/* CSS-grid table for the monster callout (BUILD 130).
Rationale: the previous monospace padded-string layout drifted right
because inherited letter-spacing scaled every data-row char by a hair.
With a real grid the browser owns column placement, so alignment is
independent of font metrics, letter-spacing, or any cascade quirks.
Each .callout-row uses `display: contents` so its child spans land
directly in the parent grid -- which means every row's cells line up
with the header's cells perfectly. The ability sub-line spans all
columns via grid-column: 1 / -1. */
.monster-callout .callout-table {
display: grid;
/* Columns: # | NAME | LV | HP/MHP | AC | T */
grid-template-columns: 2ch 18ch 4ch 11ch 6ch auto;
column-gap: 2ch;
row-gap: 0;
font-family: 'Courier New', Courier, monospace;
font-size: 12px;
line-height: 1.4;
letter-spacing: 0;
}
.monster-callout .callout-row { display: contents; }
.monster-callout .callout-row > span {
/* Tabular nums keeps digit widths uniform even on systems where
Courier substitutes. White-space:pre preserves any embedded space
(we shouldn't have any, but defence-in-depth). */
font-variant-numeric: tabular-nums;
white-space: pre;
letter-spacing: 0;
}
.monster-callout .callout-row > .c-num,
.monster-callout .callout-row > .c-lv,
.monster-callout .callout-row > .c-hp,
.monster-callout .callout-row > .c-ac { text-align: right; }
.monster-callout .callout-row > .c-name,
.monster-callout .callout-row > .c-t { text-align: left; }
/* Header row sits at the top -- orange + a subtle underline. */
.monster-callout .callout-row.header > span { color: var(--orange); }
.monster-callout .callout-row.header { border-bottom: 1px solid #2d2d2d; }
/* Per-row state coloring works through descendant selectors so the
contents wrapper doesn't need its own paint surface. */
.monster-callout .callout-row.alive > span { color: var(--green); }
.monster-callout .callout-row.hurt > span { color: #ffd400; }
.monster-callout .callout-row.low > span { color: #d44; }
.monster-callout .callout-row.asleep > span { color: #8af; }
.monster-callout .callout-row.dead > span {
color: #555; text-decoration: line-through;
}
/* The ability sub-line stretches across all columns. */
.monster-callout .callout-special {
grid-column: 1 / -1;
padding-left: 4ch;
color: #ffd400;
font-size: 11px;
letter-spacing: 0;
}
.monster-callout .callout-special.none { color: #888; }
.monster-callout .callout-special.boss { color: #ff66ff; }
/* Status badge for non-OK characters. */
.inspect-status-badge {
display: inline-block; padding: 1px 6px; margin-left: 6px;
font-size: 11px; letter-spacing: 0.08em;
border: 1px solid #d44; color: #d44;
}
.inspect-status-badge.ok { border-color: var(--green); color: var(--green); }
.inspect-status-badge.poisoned { border-color: #4dd44d; color: #4dd44d; }
.inspect-status-badge.stoned { border-color: #888; color: #888; }
/* BUILD 186: badge inherits border color from the status-* class so
all afflictions read with their proper colors. */
.inspect-status-badge.status-ok-full,
.inspect-status-badge.status-ok-warn,
.inspect-status-badge.status-alive,
.inspect-status-badge.status-notgood,
.inspect-status-badge.status-critical { border-color: currentColor; }
.inspect-status-badge.status-dead { border-color: #8a0000; }
.inspect-status-badge.status-ashes { border-color: #666; }
.inspect-status-badge.status-bad,
.inspect-status-badge.status-poisoned,
.inspect-status-badge.status-stoned,
.inspect-status-badge.status-paralyzed,
.inspect-status-badge.status-asleep,
.inspect-status-badge.status-afraid,
.inspect-status-badge.status-silenced,
.inspect-status-badge.status-confused,
.inspect-status-badge.status-blinded { border-color: currentColor; }
.trade-banner {
text-align: center; padding: 6px;
border: 1px solid var(--orange);
margin: 4px 0;
letter-spacing: 0.10em;
}
.trade-banner.success { color: var(--green); border-color: var(--green); }
.trade-banner.error { color: #ff5050; border-color: #ff5050; }
.camp-heal-section { margin-top: 8px; }
.camp-potion-card {
border: 1px dotted #444;
padding: 4px 8px;
margin: 4px 0;
}
.camp-potion-card .caster-name {
color: var(--violet);
font-weight: bold;
margin-bottom: 2px;
}
/* When augmented (camp), roster gets two extra columns: XP + TO-NEXT. */
.roster-table.augmented .roster-row {
grid-template-columns: 32px 26px 150px 80px 32px 32px 56px 120px 80px 1fr;
}
.roster-row .col-xp { color: var(--blue); text-align: right; }
.roster-row .col-need { color: var(--green); }
.roster-row .col-need.ready { color: var(--orange); font-weight: bold; }
.camp-caster-row {
display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
padding: 2px 0;
}
.camp-caster-row .caster-name { color: var(--violet); min-width: 120px; }
/* #camp-log is now repurposed as the bottom-of-screen party roster
container, so it no longer needs the log-style scrolling box. */
#camp-log {
margin-top: 10px;
padding: 4px 0 0;
border-top: 1px dotted #444;
font-size: 12px;
}
/* ----- Chest art ----- */
.chest-art-box {
display: flex;
justify-content: center;
margin: 8px 0 6px;
}
.chest-art {
background: #000;
border: 1px solid #444;
box-shadow: 0 0 0 3px #222;
}
/* Painted chest PNG. Capped at a sensible max height so the giant
source artwork doesn't dominate the screen, but lets the image
scale down on narrow viewports. */
.chest-art-image {
display: block;
width: auto;
height: auto;
max-width: 100%;
max-height: 320px;
object-fit: contain;
border-radius: 4px;
filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.6));
}
.chest-distribution {
margin-top: 8px;
padding: 6px 8px;
border-left: 3px solid var(--orange);
}
.chest-distribution p {
margin: 4px 0;
color: var(--green);
}
/* Per-item loot rows shown beneath each recipient's headline. */
.chest-loot-list {
margin: 2px 0 8px 18px;
padding: 4px 8px;
border-left: 1px dotted #444;
}
.chest-loot-row {
display: grid;
grid-template-columns: 22px 1fr auto;
align-items: center;
gap: 6px;
padding: 2px 0;
font-size: 12px;
}
.chest-loot-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 22px; height: 22px;
}
.chest-loot-icon svg { display: block; }
.chest-loot-name { color: var(--green); }
.chest-loot-desc { color: #888; font-size: 11px; }
/* BUILD 207: loot-reveal Boltac-style mini-cards. A flex-wrap container
lays each character's loot out horizontally so multi-piece drops
form a tidy row of cards. Each card has a 50px icon on the left and
name/desc/stat lines stacked on the right -- same shape as the shop
cards in Boltac's. */
.chest-loot-cards {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 4px 0 10px 18px;
}
.chest-loot-card {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 8px;
border: 1px solid #654221;
border-radius: 3px;
background: rgba(60, 40, 18, 0.32);
width: 260px;
box-sizing: border-box;
}
.chest-loot-card-icon {
width: 56px;
height: 56px;
flex: 0 0 56px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0,0,0,0.35);
border: 1px solid #333;
border-radius: 3px;
}
.chest-loot-card-icon svg,
.chest-loot-card-icon img {
display: block;
max-width: 50px;
max-height: 50px;
height: 50px;
width: auto;
}
.chest-loot-card-text {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
flex: 1 1 auto;
}
.chest-loot-card-name {
color: var(--green);
font-size: 13px;
letter-spacing: 0.04em;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.chest-loot-card-desc {
color: #c8b48c;
font-size: 11px;
line-height: 1.25;
}
.chest-loot-card-stat {
color: var(--orange);
font-size: 11px;
letter-spacing: 0.04em;
}
.chest-trap-log {
margin-top: 8px;
padding: 6px 10px;
border: 1px solid #5a1a1a;
background: rgba(255, 0, 0, 0.06);
}
.chest-trap-log h3 { color: #ff8080; margin: 0 0 4px; font-size: 13px; letter-spacing: 0.08em; }
.chest-trap-log p { margin: 2px 0; font-size: 12px; }
/* ----- Chest ACTION-phase two-column layout -----
Left column carries the character + action buttons (the things the
designated player actually has to interact with), right column shows
the chest art with the TRAP STATUS card directly underneath. Goal:
everything visible without scrolling. */
.chest-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 320px;
gap: 18px;
align-items: start;
margin: 6px 0 4px;
}
.chest-grid-left { display: flex; flex-direction: column; gap: 6px; }
.chest-grid-left .option-row { flex-wrap: wrap; }
.chest-grid-left h3 { margin: 6px 0 2px; }
.chest-grid-left p { margin: 2px 0; }
.chest-grid-right {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.chest-grid-right .chest-art-box { margin: 0; }
.chest-grid-right .chest-art-image { max-height: 240px; }
.chest-trap-status-card {
width: 100%;
border: 2px solid var(--orange);
background: rgba(255, 140, 0, 0.08);
border-radius: 6px;
padding: 10px 12px;
text-align: center;
box-shadow: 0 0 12px rgba(255, 140, 0, 0.18);
}
.chest-trap-status-label {
font-size: 13px;
letter-spacing: 0.14em;
color: var(--green);
margin-bottom: 6px;
}
.chest-trap-status-value {
font-size: 26px;
font-weight: bold;
letter-spacing: 0.08em;
color: var(--orange);
text-shadow: 0 0 6px rgba(255, 140, 0, 0.5);
line-height: 1.1;
word-break: break-word;
}
.chest-trap-status-value.chest-trap-status-known {
color: #ffb84d;
}
.chest-trap-status-value.chest-trap-status-failed {
color: #ff7a3a;
font-size: 22px;
}
@media (max-width: 720px) {
.chest-grid { grid-template-columns: minmax(0, 1fr); }
.chest-grid-right { order: -1; }
}
/* ----- Chest volunteer phase -----
BUILD 201: VOLUNTEER phase rides the same .chest-grid 2-column
layout that ACTION uses. ME/PASS + text input + PICK NOW button
stack on the left; countdown + tally + volunteer roster sit on
the right alongside the chest art. Keeps every actionable widget
above the scroll line. */
.chest-volunteer-row {
margin-top: 8px;
}
.chest-pick-now-btn {
margin-top: 6px;
background: #1a1a1a;
color: var(--orange);
border: 1px solid var(--orange);
padding: 4px 12px;
letter-spacing: 0.08em;
font-weight: bold;
cursor: pointer;
}
.chest-pick-now-btn:hover { background: var(--orange); color: #000; }
.chest-volunteer-status {
margin-top: 10px;
padding: 6px 10px;
border: 1px dotted #444;
border-radius: 4px;
background: rgba(20,20,20,0.45);
}
.chest-volunteer-time { margin: 0 0 6px; }
.chest-volunteer-tally {
display: flex;
flex-direction: column;
gap: 2px;
font-size: 12px;
margin-bottom: 4px;
}
.chest-tally-label { color: var(--violet); letter-spacing: 0.06em; }
.chest-tally-num { color: var(--green); font-weight: bold; }
.chest-volunteer-names { margin: 4px 0 0; }
.chest-me-btn {
font-size: 22px;
padding: 10px 24px;
letter-spacing: 0.18em;
color: var(--orange);
border-color: var(--orange);
}
.chest-me-btn:hover {
background: var(--orange);
color: #000;
}
.countdown {
color: var(--orange);
font-weight: bold;
letter-spacing: 0.1em;
}
#chest-me-input {
background: #000;
border: 1px solid var(--orange);
color: var(--orange);
font-family: inherit;
font-size: inherit;
padding: 4px 8px;
width: 220px;
letter-spacing: 0.08em;
text-transform: uppercase;
margin-top: 6px;
}
#chest-me-input:focus { outline: 2px solid var(--green); }
/* ----- Character creation ----- */
#training-controls .stat-table {
display: grid;
grid-template-columns: 80px 60px 80px;
gap: 4px 12px;
margin: 8px 0;
}
#training-controls .stat-table .stat-name { color: var(--violet); }
#training-controls .stat-table .stat-val { color: var(--green); text-align: right; }
/* ----- Roll stage: stats left, qualifying-class portraits right ----- */
.roll-grid {
display: grid;
grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
gap: 18px;
align-items: start;
margin-top: 6px;
}
.roll-stats { display: flex; flex-direction: column; gap: 6px; }
.roll-stats button { align-self: flex-start; }
.roll-qualifies {
border: 1px solid #444;
border-radius: 6px;
background: rgba(20, 20, 20, 0.45);
padding: 10px 12px;
min-height: 220px;
}
.roll-qualify-title {
margin: 0 0 8px;
color: var(--orange);
letter-spacing: 0.12em;
font-size: 14px;
}
.roll-qualify-empty {
color: #888;
font-style: italic;
}
.roll-qualify-hint {
margin-top: 10px;
color: var(--green);
font-size: 12px;
letter-spacing: 0.06em;
}
/* Grid of qualifying-class cards. --card-size is set inline from JS based
on how many classes the candidate qualifies for, so 1-class shows a
big portrait and 8-class shrinks to fit. */
.class-card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(var(--card-size, 100px), 1fr));
gap: 10px;
justify-items: center;
}
.class-card {
background: rgba(10, 10, 10, 0.5);
border: 1px solid #555;
border-radius: 6px;
padding: 6px 6px 8px;
cursor: pointer;
color: var(--green);
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
width: 100%;
max-width: calc(var(--card-size, 100px) + 24px);
transition: border-color 0.12s, transform 0.12s, box-shadow 0.12s;
}
.class-card:hover {
border-color: var(--orange);
transform: translateY(-1px);
box-shadow: 0 0 8px rgba(255, 140, 0, 0.35);
}
.class-card:active { transform: translateY(0); }
.class-card-img {
width: var(--card-size, 100px);
height: var(--card-size, 100px);
max-width: 100%;
object-fit: contain;
image-rendering: pixelated;
border-radius: 4px;
background: #000;
}
.class-card-name {
color: var(--orange);
font-weight: bold;
letter-spacing: 0.08em;
font-size: 12px;
text-align: center;
}
/* Bonus-points flash cue. Toggled by JS when the player tries to commit
a class with points unspent. Pulses red->white->orange so the eye
catches both the number and the SPEND-ALL message below it. */
.roll-bonus-header { transition: color 0.15s; }
.roll-bonus-number {
font-weight: bold;
color: var(--orange);
font-size: 16px;
}
@keyframes flashBonusKf {
0% { background: rgba(255, 60, 60, 0.0); color: var(--green); transform: scale(1); }
20% { background: rgba(255, 60, 60, 0.45); color: #fff; transform: scale(1.06); }
40% { background: rgba(255, 140, 0, 0.45); color: var(--orange); transform: scale(1.02); }
60% { background: rgba(255, 60, 60, 0.45); color: #fff; transform: scale(1.06); }
100% { background: rgba(255, 60, 60, 0.0); color: var(--green); transform: scale(1); }
}
.flash-bonus {
animation: flashBonusKf 0.9s ease-in-out 1;
border-radius: 4px;
padding-left: 6px;
padding-right: 6px;
}
@media (max-width: 760px) {
.roll-grid { grid-template-columns: minmax(0, 1fr); }
}
.option-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.option-row button.selected { background: var(--green); color: #000; }
/* ====================================================================
BUILD 211: account login / signup / verify / forgot / reset panels.
Layout sits inside #screen-connect, replacing the old single-input
"ENTER YOUR NAME" prompt. Keeps the amber/green terminal aesthetic.
==================================================================== */
.auth-root {
margin: 18px auto 10px;
max-width: 380px;
text-align: left;
position: relative;
z-index: 2;
}
.auth-panel {
background: rgba(0, 0, 0, 0.62);
border: 1px solid var(--orange);
border-radius: 4px;
padding: 18px 22px 14px;
box-shadow: 0 0 14px rgba(255, 160, 60, 0.18);
}
.auth-panel[hidden] { display: none; }
.auth-title {
margin: 0 0 14px;
color: var(--orange);
letter-spacing: 0.12em;
text-align: center;
font-size: 16px;
}
.auth-panel label {
display: block;
color: var(--fg-dim);
font-size: 11px;
letter-spacing: 0.08em;
margin: 8px 0 3px;
}
.auth-panel input[type="text"],
.auth-panel input[type="email"],
.auth-panel input[type="password"] {
width: 100%;
background: #0a0a0a;
border: 1px solid var(--fg-dim);
color: var(--green);
font-family: 'Courier New', monospace;
font-size: 14px;
letter-spacing: 0.06em;
padding: 6px 8px;
box-sizing: border-box;
}
.auth-panel input:focus {
outline: none;
border-color: var(--orange);
box-shadow: 0 0 4px rgba(255, 160, 60, 0.4);
}
/* BUILD 337: password wrap + show/hide eye button.
The wrap is relative so the eye can sit absolutely at the right
edge of the input. Padding-right on the input keeps typed text
from sliding under the eye. The button is full input height so
the click target is generous. */
.auth-panel .pw-wrap {
position: relative;
width: 100%;
}
.auth-panel .pw-wrap input[type="password"],
.auth-panel .pw-wrap input[type="text"] {
padding-right: 34px; /* room for the eye */
}
.auth-panel .pw-eye {
position: absolute;
top: 0; right: 0; bottom: 0;
width: 32px;
background: transparent;
border: none;
color: var(--green);
cursor: pointer;
font-size: 16px;
line-height: 1;
padding: 0;
display: flex; align-items: center; justify-content: center;
opacity: 0.7;
transition: opacity 100ms ease-out;
}
.auth-panel .pw-eye:hover { opacity: 1; }
.auth-panel .pw-eye:focus { outline: none; opacity: 1; }
.auth-primary {
display: block;
width: 100%;
margin: 14px 0 8px;
background: #0a1a08;
border: 1px solid var(--green);
color: var(--green);
padding: 8px;
cursor: pointer;
font-family: 'Courier New', monospace;
font-size: 13px;
letter-spacing: 0.12em;
font-weight: 700;
}
.auth-primary:hover {
background: #14301a;
box-shadow: 0 0 6px rgba(80, 220, 80, 0.5);
}
.auth-links {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 6px 14px;
margin-top: 8px;
font-size: 11px;
}
.auth-links a {
color: var(--fg-dim);
text-decoration: none;
letter-spacing: 0.04em;
}
.auth-links a:hover { color: var(--orange); text-decoration: underline; }
/* BUILD 288: real buttons instead of clickable text for FORGOT PASSWORD,
CREATE ACCOUNT, SIGN OUT, etc. Same dim look as the old links but
with an obvious bordered hit target so nobody has to guess what's
clickable. */
.auth-link-btn {
background: transparent;
color: var(--fg-dim);
border: 1px solid var(--fg-dim);
border-radius: 2px;
padding: 4px 10px;
font-family: inherit;
font-size: 11px;
letter-spacing: 0.04em;
cursor: pointer;
text-transform: none;
line-height: 1.1;
}
.auth-link-btn:hover {
color: var(--orange);
border-color: var(--orange);
background: rgba(255, 132, 0, 0.06);
}
.auth-link-btn:focus-visible {
outline: 1px solid var(--orange);
outline-offset: 1px;
}
.auth-note {
color: var(--fg-dim);
font-size: 11px;
letter-spacing: 0.05em;
margin: 0 0 10px;
text-align: center;
}
.auth-message {
margin: 10px 0 0;
text-align: center;
font-size: 12px;
letter-spacing: 0.04em;
min-height: 16px;
}
.auth-message-ok { color: var(--green); }
.auth-message-error { color: #ff7070; }
.auth-message-info { color: var(--orange); }
.auth-lobby-greeting {
text-align: center;
margin: 4px 0 12px;
line-height: 1.4;
}
.auth-lobby-name {
color: var(--green);
font-size: 16px;
letter-spacing: 0.08em;
font-weight: 700;
}
.auth-lobby-meta {
color: var(--fg-dim);
font-size: 11px;
letter-spacing: 0.06em;
}
/* BUILD 212: OR divider + Google sign-in slot inside the login/signup
auth panels. The Google button itself renders as an iframe inside
.auth-google-btn-host -- no CSS needed for the button; we just give
it a centered slot. */
.auth-oauth-row {
margin: 10px 0 6px;
}
.auth-oauth-divider {
position: relative;
text-align: center;
font-size: 11px;
color: var(--fg-dim);
letter-spacing: 0.18em;
margin: 10px 0 12px;
}
.auth-oauth-divider::before,
.auth-oauth-divider::after {
content: '';
position: absolute;
top: 50%;
width: 38%;
height: 1px;
background: #444;
}
.auth-oauth-divider::before { left: 0; }
.auth-oauth-divider::after { right: 0; }
.auth-oauth-divider span {
background: rgba(0,0,0,0.92);
padding: 0 8px;
position: relative;
z-index: 1;
}
.auth-google-btn-host {
display: flex;
justify-content: center;
align-items: center;
min-height: 44px;
}
/* BUILD 216: tavern roster row -- six small numbered slot buttons that
assign the row's character to that party slot. Replaces the older
single "+ ADD TO PARTY (SLOT N)" button. Buttons render in shades:
- empty slot -> neutral grey/green
- occupied -> amber outline (a click will REPLACE the occupant)
- already in -> dimmed/disabled (this character already lives there) */
.roster-slot-row {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
padding: 4px 0 6px;
}
.roster-slot-label {
font-size: 11px;
letter-spacing: 0.08em;
color: var(--fg-dim);
margin-right: 4px;
}
.tavern-slot-btn {
min-width: 32px;
padding: 4px 0;
background: #0a1a08;
border: 1px solid var(--green);
color: var(--green);
cursor: pointer;
font-family: 'Courier New', monospace;
font-weight: 700;
letter-spacing: 0.06em;
border-radius: 3px;
}
.tavern-slot-btn:hover { background: #14301a; box-shadow: 0 0 5px rgba(80,220,80,0.5); }
.tavern-slot-btn.has-occupant {
border-color: var(--orange);
color: var(--orange);
background: #1a1108;
}
.tavern-slot-btn.has-occupant:hover { background: #2a1f0a; box-shadow: 0 0 5px rgba(255,160,60,0.5); }
.tavern-slot-btn.is-self,
.tavern-slot-btn:disabled {
opacity: 0.4;
cursor: default;
box-shadow: none;
background: #0a0a0a;
}
/* BUILD 217 (Phase L2): play-mode picker. Three big buttons in the
AuthView lobby panel -- solo (always live), private + public
("COMING SOON" until L3/L4). */
.play-mode-list {
display: flex;
flex-direction: column;
gap: 8px;
margin: 14px 0 6px;
}
.play-mode-btn {
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
padding: 10px 12px;
background: #0a1a08;
border: 1px solid var(--green);
color: var(--green);
cursor: pointer;
font-family: 'Courier New', monospace;
border-radius: 3px;
gap: 4px;
}
.play-mode-btn:hover:not(:disabled) {
background: #14301a;
box-shadow: 0 0 6px rgba(80, 220, 80, 0.45);
}
.play-mode-btn .play-mode-title {
font-size: 14px;
letter-spacing: 0.1em;
font-weight: 700;
}
.play-mode-btn .play-mode-sub {
color: var(--fg-dim);
font-size: 11px;
letter-spacing: 0.03em;
text-transform: none;
line-height: 1.3;
}
.play-mode-btn.coming-soon,
.play-mode-btn:disabled {
border-color: var(--fg-dim);
color: var(--fg-dim);
cursor: default;
opacity: 0.65;
}
.play-mode-btn.coming-soon:hover { box-shadow: none; background: #0a1a08; }
/* BUILD 218 (Phase L3): private-room sub-panel. CREATE / JOIN tabs at
the top, a tabpane for each, and a prominent room-code reveal box
that appears after a successful CREATE. */
.priv-tabs {
display: flex;
gap: 0;
margin: 0 0 10px;
border-bottom: 1px dotted #444;
}
.priv-tab {
flex: 1;
padding: 6px 8px;
background: transparent;
border: none;
border-bottom: 2px solid transparent;
color: var(--fg-dim);
font-family: 'Courier New', monospace;
font-size: 12px;
letter-spacing: 0.1em;
cursor: pointer;
}
.priv-tab.selected {
color: var(--orange);
border-bottom-color: var(--orange);
}
.priv-tabpane { display: block; }
.priv-tabpane[hidden] { display: none; }
.priv-room-code {
margin: 14px 0 10px;
padding: 10px;
text-align: center;
border: 1px solid var(--orange);
background: rgba(60, 40, 18, 0.32);
border-radius: 3px;
}
.priv-room-code-label {
display: block;
font-size: 10px;
letter-spacing: 0.15em;
color: var(--fg-dim);
}
.priv-room-code-value {
display: block;
margin: 4px 0;
font-size: 28px;
letter-spacing: 0.30em;
color: #ffd97a;
font-weight: 700;
font-family: 'Courier New', monospace;
}
.priv-room-code-hint {
display: block;
font-size: 10px;
letter-spacing: 0.10em;
color: var(--fg-dim);
}
/* BUILD 219 (Phase L4): roster row for a character that's currently
checked out to a DIFFERENT room. Visible in the tavern roster so the
user knows the character is alive and playing elsewhere, but the
slot buttons are replaced with this banner. */
/* BUILD 259: elsewhere banner is now a solid red block with bold
white text -- impossible to miss. The whole row dims heavily so
the character feels truly off-limits. */
.roster-elsewhere-row {
display: flex;
align-items: center;
justify-content: center;
padding: 6px 10px;
margin-top: 2px;
background: #b40000;
border: 1px solid #ff5050;
border-radius: 3px;
box-shadow: 0 0 6px rgba(255, 80, 80, 0.4);
}
.roster-elsewhere-label {
color: #ffffff;
font-size: 12px;
letter-spacing: 0.14em;
font-weight: 700;
text-shadow: 0 0 4px rgba(0, 0, 0, 0.7);
}
/* BUILD 239: roster row dimming for non-clickable states. The roster
now lists every character the user owns; party members and chars
checked out to other rooms appear here too, dimmed, with a status
banner in place of the 1-6 slot buttons. */
.roster-entry.is-in-party {
opacity: 0.55;
filter: saturate(0.6);
}
.roster-entry.is-in-party:hover {
opacity: 0.75;
}
/* BUILD 259: elsewhere rows are MUCH dimmer + desaturated to make
the unavailability immediate. The red banner provides the actual
call-out; this just pushes the whole row to the background. */
.roster-entry.is-elsewhere {
opacity: 0.40;
filter: saturate(0.25) grayscale(0.3);
}
.roster-entry.is-elsewhere:hover {
opacity: 0.60;
filter: saturate(0.4) grayscale(0.2);
}
/* The banner ITSELF stays bright -- it should pop even when the rest
of the row is muted. */
.roster-entry.is-elsewhere .roster-elsewhere-row {
opacity: 1;
filter: none;
}
.roster-inparty-row {
display: flex;
align-items: center;
padding: 6px 8px;
margin-top: 2px;
background: rgba(40, 80, 130, 0.18);
border: 1px dashed #4f7ba6;
border-radius: 3px;
}
.roster-inparty-label {
color: #80c8ff;
font-size: 11px;
letter-spacing: 0.08em;
font-weight: 600;
}
/* BUILD 220 (Phase L5): matchmaking panel. Shown while the user is
sitting in the public-game queue. The status block updates 1Hz
via authView.js polling /lobby/queue-status. */
.match-status {
margin: 8px 0 14px;
padding: 10px;
background: rgba(40, 30, 10, 0.5);
border: 1px solid #4a3a18;
border-radius: 3px;
}
.match-line {
margin: 4px 0;
font-size: 12px;
letter-spacing: 0.04em;
display: flex;
justify-content: space-between;
}
.match-line-label {
color: var(--fg-dim);
letter-spacing: 0.08em;
}
.match-line-value {
color: #ffd97a;
font-weight: 600;
}
.match-status .auth-note {
margin-top: 8px;
text-align: center;
}
/* BUILD 335: ambient dragon-fire loop behind the connect screen.
Anchored to the bottom-center, behind the connect grid (the grid is
z-index:2 inside #screen-connect; the video sits at z-index:0).
- max-height capped at 55% of the viewport so it never crowds the
login form on short laptop screens.
- object-fit:contain + object-position bottom keeps the dragon's
feet flush with the screen bottom regardless of aspect ratio.
- opacity:0.55 + soft top fade-out so the dragon eases into the
dark background instead of cutting off as a hard edge.
- pointer-events:none so any UI that overlaps still gets clicks.
- body.is-joined hides it once you're past the login screen (the
game UI doesn't need atmospheric background). */
#screen-connect { position: relative; }
.connect-dragon-bg {
position: absolute;
left: 0; right: 0; bottom: 0;
width: 100%;
max-height: 55vh;
object-fit: contain;
object-position: center bottom;
opacity: 0.55;
pointer-events: none;
z-index: 0;
-webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 100%);
mask-image: linear-gradient(to top, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 100%);
}
body.is-joined .connect-dragon-bg { display: none; }
/* BUILD 221: two-column connect screen.
- Left column: branding (h1/h2/copy/build-tag) on top, status +
player-lobby below the auth box.
- Right column: the auth panel stack (login / signup / verify /
forgot / reset / lobby / matchmaking / private). Sticky enough
to stay above the fold.
Narrow viewports collapse to a single column. */
.connect-grid {
display: grid;
grid-template-columns: 1fr 420px;
grid-template-areas:
"left right"
"bottom right";
gap: 24px;
max-width: 1100px;
margin: 0 auto;
padding: 18px 22px;
align-items: start;
position: relative;
z-index: 2;
}
.connect-col-left { grid-area: left; text-align: center; }
.connect-col-right { grid-area: right; text-align: left; }
.connect-col-left-bottom { grid-area: bottom; text-align: center; }
.connect-grid .auth-root { margin: 0; max-width: none; }
.connect-grid #connect-lobby { margin-top: 14px; }
@media (max-width: 760px) {
.connect-grid {
grid-template-columns: 1fr;
grid-template-areas: "left" "right" "bottom";
padding: 12px;
}
.connect-col-right { text-align: center; }
}
/* BUILD 221: play-mode hover -- orange highlight (was dark green
which was too low contrast against the dim body text). */
.play-mode-btn:hover:not(:disabled) {
background: rgba(255, 160, 60, 0.16);
border-color: var(--orange);
color: var(--orange);
box-shadow: 0 0 7px rgba(255, 160, 60, 0.45);
}
.play-mode-btn:hover:not(:disabled) .play-mode-sub {
color: #ffd97a;
}
/* BUILD 225: full-resolution avatar popout. Clicking any character
portrait opens this modal showing the same PNG at 80% of its
intrinsic disk size, centered, with a dimmed backdrop. */
.avatar-popout-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.85);
z-index: 2000;
display: flex;
align-items: center;
justify-content: center;
animation: avatar-popout-fade 0.18s ease-out;
}
@keyframes avatar-popout-fade {
from { opacity: 0; }
to { opacity: 1; }
}
.avatar-popout-panel {
position: relative;
background: #000;
border: 2px solid var(--orange);
border-radius: 4px;
box-shadow: 0 0 24px rgba(255, 160, 60, 0.55);
padding: 10px;
max-width: 95vw;
max-height: 95vh;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
}
.avatar-popout-img {
display: block;
object-fit: contain;
/* The JS sizes width/height inline at 80% of natural size; here we
just clamp to viewport so very large portraits stay on-screen. */
max-width: 90vw;
max-height: 85vh;
background: #000;
}
.avatar-popout-caption {
color: var(--orange);
font-size: 12px;
letter-spacing: 0.08em;
text-align: center;
padding: 4px 8px;
}
.avatar-popout-close {
position: absolute;
top: -2px;
right: -2px;
width: 28px;
height: 28px;
background: #000;
border: 1px solid var(--orange);
color: var(--orange);
font-size: 18px;
line-height: 24px;
cursor: pointer;
border-radius: 14px;
}
.avatar-popout-close:hover {
background: var(--orange);
color: #000;
}
/* The portrait box on the inspect screen needs a bit more room now
that the avatar is 154px instead of 128px. */
.inspect-portrait .char-avatar {
background: #000;
border: 2px solid #444;
/* contain: image is now letterboxed inside the box, never cropped */
}
/* BUILD 233: tiny BACK button shown at the top of the race / align /
roll character-creation steps. Lets the player rewind their choices
without losing prior state. */
.training-back-btn {
background: transparent;
border: 1px solid var(--fg-dim);
color: var(--fg-dim);
padding: 2px 10px;
font-size: 11px;
letter-spacing: 0.08em;
margin-bottom: 8px;
cursor: pointer;
border-radius: 2px;
}
.training-back-btn:hover {
color: var(--orange);
border-color: var(--orange);
background: rgba(255, 160, 60, 0.08);
}
/* ======================================================================
* BUILD 242: dungeon HUD spell-timer rows shown beside the compass.
* Live countdown for PHOSPHIA (the next-tile light spell) and CARTOMA
* (the mini-map reveal spell). Each is a small chip in its own color
* so they're easy to recognize at a glance. */
#dungeon-spell-timers {
display: flex;
flex-direction: column;
gap: 3px;
margin-top: 4px;
}
.spell-timer-row {
font-size: 11px;
letter-spacing: 0.08em;
padding: 3px 8px;
border: 1px solid currentColor;
border-radius: 2px;
text-align: center;
font-weight: 600;
}
.spell-timer-phosphia { color: #ffd680; background: rgba(255, 200, 100, 0.08); }
.spell-timer-cartoma { color: #80c8ff; background: rgba(80, 160, 255, 0.08); }
/* BUILD 250: short transport flash drawn inside the wireframe
* canvas wrap. Quick + non-blocking so it doesn't impede play. */
.transport-flash {
position: absolute;
inset: 0;
pointer-events: none;
display: flex;
align-items: center;
justify-content: center;
z-index: 5;
background: rgba(0, 0, 0, 0.35);
animation: transport-flash-fade 0.65s linear forwards;
}
.transport-flash svg {
width: 70%;
height: 70%;
animation: transport-flash-swirl 0.65s ease-out forwards;
filter: drop-shadow(0 0 4px rgba(65, 255, 0, 0.7));
}
@keyframes transport-flash-fade {
0% { background: rgba(0, 0, 0, 0.0); }
20% { background: rgba(255, 255, 255, 0.20); }
50% { background: rgba(65, 255, 0, 0.18); }
100% { background: rgba(0, 0, 0, 0.0); }
}
@keyframes transport-flash-swirl {
0% { opacity: 0; transform: scale(0.2) rotate(0deg); }
35% { opacity: 1; transform: scale(1.0) rotate(180deg); }
100% { opacity: 0; transform: scale(2.0) rotate(540deg); }
}
/* BUILD 243: Town Portal / EVASIO teleport cinematic.
* Full-screen overlay played when the rift actually succeeds. The
* pieces animate via keyframes; the JS just appends and removes the
* overlay element. Pointer events captured for the whole 3.4s so the
* player can't click stale UI behind the transition. */
.teleport-cinematic {
position: fixed;
inset: 0;
z-index: 5000;
background: rgba(0, 0, 0, 0.92);
display: flex;
align-items: center;
justify-content: center;
pointer-events: auto;
cursor: wait;
overflow: hidden;
}
.teleport-banner {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
color: #41ff00;
font-size: 32px;
letter-spacing: 0.32em;
font-weight: 700;
text-shadow: 0 0 12px rgba(65, 255, 0, 0.7);
opacity: 0;
animation: tp-banner 1.4s ease-out forwards;
}
@keyframes tp-banner {
0% { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
20% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
60% { opacity: 1; transform: translate(-50%, -50%) scale(1.0); }
100% { opacity: 0; transform: translate(-50%, -50%) scale(1.0); }
}
.teleport-swirl {
position: absolute;
top: 50%;
left: 50%;
width: 380px;
height: 380px;
margin-left: -190px;
margin-top: -190px;
opacity: 0;
animation: tp-swirl 3.0s cubic-bezier(0.55, 0.0, 0.55, 1) 0.2s forwards;
transform-origin: 50% 50%;
}
.teleport-swirl svg {
width: 100%;
height: 100%;
filter: drop-shadow(0 0 8px rgba(65, 255, 0, 0.6));
}
@keyframes tp-swirl {
0% { opacity: 0; transform: scale(0) rotate(0deg); }
20% { opacity: 1; transform: scale(0.6) rotate(180deg); }
60% { opacity: 1; transform: scale(1.5) rotate(900deg); }
85% { opacity: 1; transform: scale(2.4) rotate(1620deg); }
100% { opacity: 0; transform: scale(0.05) rotate(2160deg); }
}
.teleport-blackout {
position: absolute;
inset: 0;
background: #000;
opacity: 0;
animation: tp-blackout 3.4s linear forwards;
}
@keyframes tp-blackout {
0%, 75% { opacity: 0; }
76%, 82% { opacity: 1; }
100% { opacity: 0; }
}
.teleport-flash {
position: absolute;
inset: 0;
background: #ffffff;
opacity: 0;
animation: tp-flash 3.4s linear forwards;
}
@keyframes tp-flash {
0%, 84% { opacity: 0; }
85% { opacity: 1; }
100% { opacity: 0; }
}
/* BUILD 237: in-maze spell-cast modal. Opened from the CAST button on
* the leader's dungeon command bar. Lists casters in the active party
* and their dungeon-eligible spells with remaining slot counts. The
* orange border + dark backdrop matches the avatar-popout look so the
* UI feels of a piece with the rest of the dungeon overlays.
* ====================================================================== */
.dungeon-cast-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.82);
z-index: 2100;
display: flex;
align-items: center;
justify-content: center;
animation: avatar-popout-fade 0.16s ease-out;
}
.dungeon-cast-panel {
position: relative;
background: #000;
border: 2px solid var(--orange);
border-radius: 4px;
box-shadow: 0 0 24px rgba(255, 160, 60, 0.55);
padding: 18px 22px 14px;
min-width: 360px;
max-width: 560px;
max-height: 80vh;
display: flex;
flex-direction: column;
gap: 10px;
}
.dungeon-cast-header {
color: var(--orange);
font-size: 14px;
letter-spacing: 0.14em;
text-align: center;
border-bottom: 1px solid #4a2a08;
padding-bottom: 8px;
}
.dungeon-cast-close {
position: absolute;
top: -2px;
right: -2px;
width: 28px;
height: 28px;
background: #000;
border: 1px solid var(--orange);
color: var(--orange);
font-size: 18px;
line-height: 24px;
cursor: pointer;
border-radius: 14px;
}
.dungeon-cast-close:hover {
background: var(--orange);
color: #000;
}
.dungeon-cast-body {
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 10px;
}
.dungeon-cast-empty {
color: var(--fg-dim);
font-style: italic;
text-align: center;
padding: 16px 8px;
}
.dungeon-cast-caster {
border: 1px solid #2c2c2c;
border-radius: 3px;
padding: 8px 10px;
background: #0a0a0a;
}
.dungeon-cast-caster-name {
color: var(--fg);
font-size: 12px;
letter-spacing: 0.08em;
margin-bottom: 6px;
}
.dungeon-cast-spell-btn {
display: block;
width: 100%;
text-align: left;
background: transparent;
border: 1px solid #555;
color: var(--fg);
padding: 6px 10px;
font-size: 12px;
letter-spacing: 0.06em;
margin-bottom: 4px;
cursor: pointer;
border-radius: 2px;
}
.dungeon-cast-spell-btn:hover:not(:disabled) {
color: var(--orange);
border-color: var(--orange);
background: rgba(255, 160, 60, 0.08);
}
.dungeon-cast-spell-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.dungeon-cast-footer {
text-align: right;
border-top: 1px solid #4a2a08;
padding-top: 8px;
}
.dungeon-cast-cancel {
background: transparent;
border: 1px solid var(--fg-dim);
color: var(--fg-dim);
padding: 4px 14px;
font-size: 11px;
letter-spacing: 0.10em;
cursor: pointer;
border-radius: 2px;
}
.dungeon-cast-cancel:hover {
color: var(--orange);
border-color: var(--orange);
}
/* BUILD 234: prominent instruction banner at the top of the
qualifying-classes panel during character creation. Replaces the
easy-to-miss tiny note at the bottom. */
.roll-qualify-instruction {
margin: 4px 0 10px;
padding: 8px 10px;
border: 1px solid var(--orange);
background: rgba(255, 160, 60, 0.10);
color: var(--orange);
font-size: 12px;
letter-spacing: 0.06em;
line-height: 1.4;
text-align: center;
border-radius: 3px;
}
/* BUILD 234: class-card portraits use Avatar.create now, which
returns an ![]() tagged with .char-avatar. Make sure that scope
doesn't override the size driven by the card-grid CSS variable. */
.class-card .class-card-img.char-avatar {
width: var(--card-size);
height: var(--card-size);
}
/* BUILD 234: class-card portraits should commit the class on click,
not open the avatar-popout modal. Avatar.create wires its own click
handler that stopPropagation's; disabling pointer-events on the
image lets the click fall through to the parent .class-card button. */
.class-card .class-card-img {
pointer-events: none;
}
|