/* /Components/Admin/AbilityAutocomplete.razor.rz.scp.css */ .ability-autocomplete[b-dlcb1p7eys] { position: relative; width: 100%; } .autocomplete-menu[b-dlcb1p7eys] { position: absolute; left: 0; right: 0; max-height: 360px; overflow-y: auto; background: var(--bs-body-bg, #fff); color: var(--bs-body-color, #212529); border: 1px solid var(--bs-border-color, #ced4da); border-radius: 6px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18); z-index: 1000; } /* Default downward — anchored just below the input. */ .ability-autocomplete.open-down[b-dlcb1p7eys] .autocomplete-menu, .ability-autocomplete.open-down .autocomplete-menu[b-dlcb1p7eys] { top: calc(100% + 2px); bottom: auto; } /* Flipped upward — anchored just above the input. */ .ability-autocomplete.open-up .autocomplete-menu[b-dlcb1p7eys] { bottom: calc(100% + 2px); top: auto; } .autocomplete-item[b-dlcb1p7eys] { padding: 0.45rem 0.65rem; cursor: pointer; border-bottom: 1px solid var(--bs-border-color-translucent, rgba(0, 0, 0, 0.08)); user-select: none; color: var(--bs-body-color); } .autocomplete-item:last-child[b-dlcb1p7eys] { border-bottom: none; } .autocomplete-item:hover[b-dlcb1p7eys], .autocomplete-item.highlighted[b-dlcb1p7eys] { background: var(--bs-primary-bg-subtle, #cfe2ff); color: var(--bs-primary-text-emphasis, #052c65); } .ac-line-main[b-dlcb1p7eys] { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; } .ac-code[b-dlcb1p7eys] { font-size: 0.72rem; font-family: var(--bs-font-monospace, monospace); color: var(--bs-secondary-color, #6c757d); background: var(--bs-tertiary-bg, #f5f6f7); padding: 0.05rem 0.35rem; border-radius: 3px; border: 1px solid var(--bs-border-color-translucent, rgba(0, 0, 0, 0.08)); } .ac-name[b-dlcb1p7eys] { font-weight: 500; } .ac-meta[b-dlcb1p7eys] { margin-left: auto; font-size: 0.78rem; color: var(--bs-secondary-color, #6c757d); } .ac-desc[b-dlcb1p7eys] { margin-top: 2px; line-height: 1.3; font-size: 0.82rem; color: var(--bs-secondary-color, #6c757d); } .autocomplete-empty[b-dlcb1p7eys], .autocomplete-more[b-dlcb1p7eys] { background: var(--bs-tertiary-bg, #fafbfc); color: var(--bs-secondary-color, #6c757d); font-size: 0.82rem; } /* Dark mode contrast — Bootstrap toggles `data-bs-theme` on . The CSS variables above already remap, but pump up hover/highlight readability. */ [data-bs-theme="dark"] .autocomplete-item:hover[b-dlcb1p7eys], [data-bs-theme="dark"] .autocomplete-item.highlighted[b-dlcb1p7eys] { background: rgba(110, 168, 254, 0.18); color: #e9ecef; } [data-bs-theme="dark"] .ac-code[b-dlcb1p7eys] { color: #adb5bd; background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.08); } /* /Components/Admin/ConfirmDialog.razor.rz.scp.css */ .confirm-backdrop[b-8fvlcmwhlh] { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); display: flex; align-items: center; justify-content: center; z-index: 1080; } .confirm-modal[b-8fvlcmwhlh] { background: #fff; color: #212529; border-radius: 8px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4); padding: 1.5rem; width: min(420px, calc(100vw - 2rem)); } .confirm-title[b-8fvlcmwhlh] { margin: 0 0 0.5rem; font-weight: 600; } .confirm-message[b-8fvlcmwhlh] { margin: 0 0 1.25rem; color: #495057; } .confirm-actions[b-8fvlcmwhlh] { display: flex; gap: 0.5rem; justify-content: flex-end; } /* /Components/Admin/EffectParametersEditor.razor.rz.scp.css */ .effect-params-editor[b-4bza9x4uwh] { min-width: 200px; } .param-fields[b-4bza9x4uwh] { display: flex; flex-wrap: wrap; gap: 6px; } .param-field[b-4bza9x4uwh] { display: flex; flex-direction: column; gap: 1px; margin: 0; } .param-label[b-4bza9x4uwh] { font-size: 0.65rem; font-weight: 600; color: #666; text-transform: uppercase; letter-spacing: 0.3px; line-height: 1; } .param-input-num[b-4bza9x4uwh] { width: 70px; text-align: right; } .param-field select.form-select-sm[b-4bza9x4uwh] { min-width: 110px; } /* /Components/Admin/SortableHeader.razor.rz.scp.css */ .sortable-header[b-xg30kshf3z] { cursor: pointer; user-select: none; white-space: nowrap; } .sortable-header:hover[b-xg30kshf3z] { background-color: rgba(0, 0, 0, 0.04); } .sortable-header.is-active[b-xg30kshf3z] { color: var(--bs-primary, #0d6efd); } .sort-indicator[b-xg30kshf3z] { display: inline-block; margin-left: 0.35rem; font-size: 0.75em; font-weight: 700; } .sort-indicator-idle[b-xg30kshf3z] { opacity: 0.25; } .sortable-header:hover .sort-indicator-idle[b-xg30kshf3z] { opacity: 0.6; } /* /Components/Game/Board3D.razor.rz.scp.css */ .board3d-wrap[b-1ydkdi5g39] { position: relative; width: 100%; height: 100%; min-height: 320px; overflow: hidden; } .board3d-canvas[b-1ydkdi5g39] { display: block; width: 100%; height: 100%; touch-action: none; /* we own pointer gestures (drag) */ user-select: none; -webkit-touch-callout: none; outline: none; } /* /Components/Game/BoardActionBar.razor.rz.scp.css */ /* Subtle, non-blocking warning shown when the player ends the Action phase with unspent resources still in their pool. Self-contained so it doesn't depend on the base .action-hint rule (which is scoped to the parent Board component). */ .action-hint-warning[b-t9is80o192] { font-size: 0.75rem; color: #ffc107; font-weight: 600; margin-right: 8px; } /* /Components/Game/CardPreviewModal.razor.rz.scp.css */ .card-modal-backdrop[b-i303uljfbs] { position: fixed; inset: 0; background: rgba(0,0,0,0.75); z-index: 200; display: flex; align-items: center; justify-content: center; padding: 16px; } /* === Image-first modal: show the full painted card ========================= The painted card already contains name/art/stats/effects, so the modal just presents it big and clean, with engine-state and action affordances stacked beneath. */ .card-modal-image-container[b-i303uljfbs] { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 92vw; max-height: 92vh; } .card-modal-image[b-i303uljfbs] { max-width: 100%; max-height: 78vh; width: auto; height: auto; aspect-ratio: 63 / 88; object-fit: contain; display: block; filter: drop-shadow(0 8px 28px rgba(0,0,0,0.7)); } .card-modal-info-strip[b-i303uljfbs] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; max-width: 100%; color: #fff; } .card-modal-info-strip.minimal[b-i303uljfbs] { /* No badges/reason — only the Close affordance lives here. */ justify-content: center; } .card-modal-state-badge[b-i303uljfbs] { padding: 4px 10px; border-radius: 4px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #fff; } .card-modal-state-badge.standby[b-i303uljfbs] { background: rgba(80, 80, 80, 0.9); } .card-modal-state-badge.tapped[b-i303uljfbs] { background: rgba(100, 70, 40, 0.9); } .card-modal-buttons[b-i303uljfbs] { display: flex; gap: 8px; margin-left: auto; } /* === Fallback modal: cards without painted art ============================= Same data-rich layout as before so designers can inspect WIP cards. */ .card-modal[b-i303uljfbs] { background: var(--bs-body-bg); border-radius: 12px; max-width: 360px; width: 100%; overflow: hidden; box-shadow: 0 8px 32px rgba(0,0,0,0.5); border: 2px solid var(--bs-border-color); } .card-modal-header[b-i303uljfbs] { padding: 10px 16px; display: flex; align-items: center; gap: 8px; color: white; font-weight: 700; } .card-modal-type[b-i303uljfbs] { font-size: 0.65rem; text-transform: uppercase; background: rgba(0,0,0,0.3); padding: 2px 6px; border-radius: 3px; } .card-modal-name[b-i303uljfbs] { flex: 1; font-size: 1.1rem; } .card-modal-rarity[b-i303uljfbs] { font-size: 0.65rem; text-transform: uppercase; opacity: 0.8; } /* Reuse type colors from CardView */ .type-resource[b-i303uljfbs] { background: #5a8f3c; } .type-drone[b-i303uljfbs] { background: #3a6ea5; } .type-trap[b-i303uljfbs] { background: #8b4513; } .type-defence[b-i303uljfbs] { background: #5f6b7c; } .type-surveillance[b-i303uljfbs] { background: #6a5acd; } .type-action[b-i303uljfbs] { background: #c0392b; } .type-upgrade[b-i303uljfbs] { background: #d4a017; } .type-spouse[b-i303uljfbs] { background: #b5446e; } .type-pet[b-i303uljfbs] { background: #e07c24; } .card-modal-art[b-i303uljfbs] { height: 120px; background: var(--bs-tertiary-bg); display: flex; align-items: center; justify-content: center; } .card-modal-type-icon[b-i303uljfbs] { font-size: 3rem; font-weight: bold; color: var(--bs-secondary-color); opacity: 0.2; } .card-modal-body[b-i303uljfbs] { padding: 12px 16px; } .card-modal-desc[b-i303uljfbs] { margin-bottom: 10px; font-size: 0.9rem; line-height: 1.4; } .card-modal-section[b-i303uljfbs] { margin-bottom: 8px; font-size: 0.85rem; } .card-modal-stats[b-i303uljfbs] { display: flex; gap: 6px; flex-wrap: wrap; } .effect-line[b-i303uljfbs] { padding-left: 8px; border-left: 2px solid var(--bs-border-color); margin: 4px 0; font-size: 0.8rem; } .card-modal-actions[b-i303uljfbs] { padding: 12px 16px; border-top: 1px solid var(--bs-border-color); display: flex; gap: 8px; align-items: center; } .card-modal-reason[b-i303uljfbs] { font-size: 0.85rem; font-weight: 600; } /* Reuse resource badge and stat styles */ .resource-badge[b-i303uljfbs] { padding: 2px 8px; border-radius: 12px; font-size: 0.7rem; font-weight: 700; color: white; display: inline-block; margin: 2px; } /* Resource-type glyph shown alongside the cost amount (S3) */ .res-glyph[b-i303uljfbs] { margin-right: 2px; } .res-credits[b-i303uljfbs] { background: #d4a017; color: #000; } .res-tech[b-i303uljfbs] { background: #5e9cf5; } .res-scrap[b-i303uljfbs] { background: #8b8b8b; } .res-chemicals[b-i303uljfbs] { background: #9b59b6; } .res-energy[b-i303uljfbs] { background: #f1c40f; color: #000; } .stat[b-i303uljfbs] { padding: 2px 8px; border-radius: 3px; font-weight: 700; font-size: 0.75rem; color: white; } .stat-health[b-i303uljfbs] { background: #dc3545; } .stat-attack[b-i303uljfbs] { background: #fd7e14; } /* /Components/Game/CardView.razor.rz.scp.css */ .card-view[b-g75pypfvqs] { --card-w: 100px; width: var(--card-w); min-width: var(--card-w); aspect-ratio: 63 / 88; border-radius: 7px; border: 2px solid rgba(0,0,0,0.4); background: #f5f0e6; position: relative; cursor: default; transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; overflow: hidden; font-size: 0.7rem; user-select: none; box-shadow: 1px 2px 4px rgba(0,0,0,0.3); color: #222; } .card-view.compact[b-g75pypfvqs] { --card-w: 76px; font-size: 0.6rem; } /* Image-first card: the painted artwork fills the entire frame. The 63:88 ratio is enforced both at upload time and on the container, so object-fit: cover never has to crop. */ .card-image[b-g75pypfvqs] { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 5px; } .card-view.tapped[b-g75pypfvqs] { transform: rotate(90deg); margin: 18px 16px; transition: transform 0.3s ease, box-shadow 0.15s ease, border-color 0.15s ease; } .card-view.playable[b-g75pypfvqs] { cursor: pointer; border-color: #28a745; box-shadow: 0 0 8px rgba(40, 167, 69, 0.7), 1px 2px 4px rgba(0,0,0,0.3); } .card-view.playable:hover[b-g75pypfvqs] { transform: translateY(-10px) scale(1.08); box-shadow: 0 8px 24px rgba(40, 167, 69, 0.6), 0 4px 8px rgba(0,0,0,0.4); z-index: 10; } .card-view.tapped.playable:hover[b-g75pypfvqs] { transform: rotate(90deg) scale(1.05); } .card-view.selected[b-g75pypfvqs] { border-color: #ffc107; box-shadow: 0 0 14px rgba(255, 193, 7, 0.9), 1px 2px 4px rgba(0,0,0,0.3); } .card-view.targetable[b-g75pypfvqs] { cursor: crosshair; border-color: #dc3545; box-shadow: 0 0 8px rgba(220, 53, 69, 0.6); animation: pulse-target-b-g75pypfvqs 1s infinite; } @keyframes pulse-target-b-g75pypfvqs { 0%, 100% { box-shadow: 0 0 8px rgba(220, 53, 69, 0.5); } 50% { box-shadow: 0 0 16px rgba(220, 53, 69, 0.9); } } .card-view.standby-card[b-g75pypfvqs] { opacity: 0.6; filter: saturate(0.5); } .card-face[b-g75pypfvqs] { width: 100%; height: 100%; display: flex; flex-direction: column; } .card-back[b-g75pypfvqs] { background: /* Diamond lattice pattern */ repeating-linear-gradient( 45deg, transparent 0px, transparent 8px, rgba(255,255,255,0.05) 8px, rgba(255,255,255,0.05) 10px ), repeating-linear-gradient( -45deg, transparent 0px, transparent 8px, rgba(255,255,255,0.03) 8px, rgba(255,255,255,0.03) 10px ), /* Center emblem glow */ radial-gradient(circle at center, rgba(100,180,60,0.2) 0%, transparent 50%), linear-gradient(135deg, #2d5016, #4a7c23, #2d5016); align-items: center; justify-content: center; border-radius: 5px; } .card-back-label[b-g75pypfvqs] { font-size: 2rem; font-weight: bold; color: rgba(255,255,255,0.25); } .card-front[b-g75pypfvqs] { display: flex; flex-direction: column; height: 100%; position: relative; overflow: hidden; } .card-header-strip[b-g75pypfvqs] { padding: 2px 5px; display: flex; gap: 3px; align-items: center; color: white; font-size: 0.6rem; min-height: 19px; flex-shrink: 0; } .card-type-label[b-g75pypfvqs] { background: rgba(0,0,0,0.3); border-radius: 2px; padding: 1px 4px; font-size: 0.48rem; font-weight: 800; letter-spacing: 0.5px; flex-shrink: 0; } .card-name[b-g75pypfvqs] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; font-weight: 700; font-size: 0.58rem; } /* Type header colors */ .type-resource[b-g75pypfvqs] { background: linear-gradient(90deg, #4a7a2e, #5a8f3c); } .type-drone[b-g75pypfvqs] { background: linear-gradient(90deg, #2e5a8f, #3a6ea5); } .type-trap[b-g75pypfvqs] { background: linear-gradient(90deg, #6b3410, #8b4513); } .type-defence[b-g75pypfvqs] { background: linear-gradient(90deg, #4a5568, #5f6b7c); } .type-surveillance[b-g75pypfvqs] { background: linear-gradient(90deg, #5040a0, #6a5acd); } .type-action[b-g75pypfvqs] { background: linear-gradient(90deg, #a02020, #c0392b); } .type-upgrade[b-g75pypfvqs] { background: linear-gradient(90deg, #b08a10, #d4a017); } .type-spouse[b-g75pypfvqs] { background: linear-gradient(90deg, #8f3458, #b5446e); } .type-pet[b-g75pypfvqs] { background: linear-gradient(90deg, #c06418, #e07c24); } .card-art[b-g75pypfvqs] { flex: 1; display: flex; align-items: center; justify-content: center; background: #e8e0d0; min-height: 40px; border-top: 1px solid rgba(0,0,0,0.08); border-bottom: 1px solid rgba(0,0,0,0.08); } .card-art img[b-g75pypfvqs] { width: 100%; height: 100%; object-fit: cover; } .card-art-compact[b-g75pypfvqs] { flex: 1; display: flex; align-items: center; justify-content: center; background: #e8e0d0; min-height: 20px; border-top: 1px solid rgba(0,0,0,0.08); border-bottom: 1px solid rgba(0,0,0,0.08); overflow: hidden; } .card-art-compact img[b-g75pypfvqs] { width: 100%; height: 100%; object-fit: cover; } .card-type-icon[b-g75pypfvqs] { font-size: 1.5rem; opacity: 0.4; } .card-type-icon-compact[b-g75pypfvqs] { font-size: 1.1rem; opacity: 0.5; } .card-text[b-g75pypfvqs] { padding: 2px 5px; font-size: 0.52rem; line-height: 1.25; color: #333; overflow: hidden; max-height: 28px; } /* Cost pips */ .card-cost-bar[b-g75pypfvqs] { display: flex; gap: 2px; padding: 1px 5px; flex-shrink: 0; } .cost-pip[b-g75pypfvqs] { font-size: 0.52rem; font-weight: 800; padding: 0px 4px; border-radius: 3px; color: white; line-height: 1.5; box-shadow: 0 1px 1px rgba(0,0,0,0.2); } /* Resource-type glyph shown alongside a cost amount / production (S3) */ .res-glyph[b-g75pypfvqs] { margin-right: 1px; } /* Stats bar */ .card-stats-bar[b-g75pypfvqs] { display: flex; gap: 2px; padding: 2px 5px; justify-content: flex-end; margin-top: auto; flex-shrink: 0; background: rgba(0,0,0,0.04); } .stat[b-g75pypfvqs] { padding: 0 5px; border-radius: 3px; font-weight: 700; font-size: 0.6rem; color: white; box-shadow: 0 1px 1px rgba(0,0,0,0.2); } .stat-health[b-g75pypfvqs] { background: #dc3545; } .stat-attack[b-g75pypfvqs] { background: #fd7e14; } .stat-armor[b-g75pypfvqs] { background: #6c757d; } .res-credits[b-g75pypfvqs] { background: linear-gradient(135deg, #d4a017, #b8860b); color: #000; } .res-tech[b-g75pypfvqs] { background: linear-gradient(135deg, #5e9cf5, #3a7bd5); } .res-scrap[b-g75pypfvqs] { background: linear-gradient(135deg, #8b8b8b, #6b6b6b); } .res-chemicals[b-g75pypfvqs] { background: linear-gradient(135deg, #9b59b6, #7d3c98); } .res-energy[b-g75pypfvqs] { background: linear-gradient(135deg, #f1c40f, #d4ac0d); color: #000; } /* Badges */ .card-badge[b-g75pypfvqs] { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-15deg); font-weight: 900; font-size: 0.52rem; padding: 2px 8px; border-radius: 3px; color: white; pointer-events: none; text-transform: uppercase; letter-spacing: 1px; box-shadow: 0 1px 3px rgba(0,0,0,0.3); } .card-badge.standby[b-g75pypfvqs] { background: rgba(80, 80, 80, 0.88); } .card-badge.tapped-badge[b-g75pypfvqs] { background: rgba(108, 117, 125, 0.9); } /* S4: a card that can't act this turn (tapped/standby) reads as inactive. The tapped rule already rotates the card; this adds a consistent desaturated look. */ .card-view.inactive .card-face[b-g75pypfvqs] { filter: grayscale(0.5) brightness(0.8); } .card-view.inactive.playable .card-face[b-g75pypfvqs] { /* still playable (e.g. a tappable resource shown standby briefly) — keep it lit */ filter: none; } .card-badge.fast[b-g75pypfvqs] { background: rgba(240, 190, 10, 0.9); color: #000; top: auto; bottom: 4px; left: 4px; transform: none; font-size: 0.45rem; } /* === Card Animations === */ /* 2.1 Deploy: card lands in zone with scale bounce */ .card-view.just-deployed[b-g75pypfvqs] { animation: card-land-b-g75pypfvqs 0.4s ease-out; } @keyframes card-land-b-g75pypfvqs { 0% { opacity: 0; transform: scale(1.3) translateY(-20px); } 60% { opacity: 1; transform: scale(0.95) translateY(2px); } 80% { transform: scale(1.03); } 100% { transform: scale(1); } } /* 2.2 Tap: smooth rotation via transition (handled by .tapped rule above) */ /* Tap pulse: brief scale bump after tapping */ .card-view.just-tapped[b-g75pypfvqs] { animation: tap-pulse-b-g75pypfvqs 0.3s ease; } @keyframes tap-pulse-b-g75pypfvqs { 0% { transform: rotate(90deg) scale(1); } 50% { transform: rotate(90deg) scale(1.08); } 100% { transform: rotate(90deg) scale(1); } } /* 2.3 Destroy: shake then fade out */ .card-view.destroying[b-g75pypfvqs] { animation: card-destroy-b-g75pypfvqs 0.5s ease-out forwards; pointer-events: none; } @keyframes card-destroy-b-g75pypfvqs { 0% { transform: scale(1); opacity: 1; } 10% { transform: translateX(-4px) scale(1); } 20% { transform: translateX(4px) scale(1); } 30% { transform: translateX(-3px) scale(1); } 40% { transform: translateX(3px) scale(1); opacity: 1; } 50% { transform: translateX(0) scale(1); opacity: 0.8; } 100% { transform: scale(0.6) translateY(10px); opacity: 0; } } /* 2.4 Standby activation glow */ .card-view.just-activated[b-g75pypfvqs] { animation: activate-glow-b-g75pypfvqs 0.6s ease-out; } @keyframes activate-glow-b-g75pypfvqs { 0% { box-shadow: 0 0 0 rgba(40, 167, 69, 0); } 40% { box-shadow: 0 0 20px rgba(40, 167, 69, 0.8), 0 0 40px rgba(40, 167, 69, 0.3); } 100% { box-shadow: 1px 2px 4px rgba(0,0,0,0.3); } } /* === Rarity Indicator Dot === */ .rarity-dot[b-g75pypfvqs] { position: absolute; top: 3px; right: 3px; width: 7px; height: 7px; border-radius: 50%; z-index: 5; box-shadow: 0 0 2px rgba(0,0,0,0.4); pointer-events: none; } .rarity-common[b-g75pypfvqs] { background: #888; } .rarity-uncommon[b-g75pypfvqs] { background: #28a745; } .rarity-rare[b-g75pypfvqs] { background: #007bff; box-shadow: 0 0 4px rgba(0,123,255,0.5); } .rarity-legendary[b-g75pypfvqs] { background: linear-gradient(135deg, #ffd700, #ffaa00); box-shadow: 0 0 6px rgba(255,215,0,0.6); } /* === Foil Shimmer for Rare & Legendary === */ .card-view.card-type-drone .card-face .rarity-rare[b-g75pypfvqs], .card-view.card-type-drone .card-face .rarity-legendary[b-g75pypfvqs] { /* Handled by parent overlay */ } .card-view:has(.rarity-rare) .card-front[b-g75pypfvqs]::after, .card-view:has(.rarity-legendary) .card-front[b-g75pypfvqs]::after { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient( 105deg, transparent 30%, rgba(255,255,255,0.08) 45%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.08) 55%, transparent 70% ); animation: foil-shimmer-b-g75pypfvqs 3s ease-in-out infinite; pointer-events: none; z-index: 4; border-radius: 5px; } .card-view:has(.rarity-legendary) .card-front[b-g75pypfvqs]::after { background: linear-gradient( 105deg, transparent 25%, rgba(255,215,0,0.06) 40%, rgba(255,255,255,0.18) 50%, rgba(255,215,0,0.06) 60%, transparent 75% ); animation: foil-shimmer-b-g75pypfvqs 2.5s ease-in-out infinite; } @keyframes foil-shimmer-b-g75pypfvqs { 0% { left: -100%; } 100% { left: 100%; } } /* === Image-first chrome ==================================================== When the painted card image is actually being rendered (i.e. .card-image is present in the DOM, not .card-back or the fallback frame), strip the rectangular bg/border/box-shadow chrome — the painted card supplies its own frame and may have transparent corners that would otherwise leak the beige bg. Replace state highlights with filter:drop-shadow versions that follow the painted shape instead of the bounding box. */ .card-view:has(.card-image)[b-g75pypfvqs] { background: transparent; border-color: transparent; box-shadow: none; } .card-view:has(.card-image).playable[b-g75pypfvqs] { filter: drop-shadow(0 0 8px rgba(40, 167, 69, 0.9)); } .card-view:has(.card-image).playable:hover[b-g75pypfvqs] { filter: drop-shadow(0 0 14px rgba(40, 167, 69, 1)) drop-shadow(0 8px 16px rgba(0,0,0,0.6)); } .card-view:has(.card-image).selected[b-g75pypfvqs] { filter: drop-shadow(0 0 12px rgba(255, 193, 7, 1)); } .card-view:has(.card-image).targetable[b-g75pypfvqs] { animation: pulse-target-image-b-g75pypfvqs 1s infinite; } @keyframes pulse-target-image-b-g75pypfvqs { 0%, 100% { filter: drop-shadow(0 0 8px rgba(220, 53, 69, 0.6)); } 50% { filter: drop-shadow(0 0 16px rgba(220, 53, 69, 1)); } } /* Standby's opacity dim still works through transparency. Override the saturate-only filter from the base rule so it doesn't kill drop-shadow highlights stacked above (last filter wins). */ .card-view:has(.card-image).standby-card[b-g75pypfvqs] { opacity: 0.55; filter: saturate(0.4); } /* /Components/Game/CombatOverlay.razor.rz.scp.css */ .combat-backdrop[b-t56bnmpovu] { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.75); z-index: 150; display: flex; align-items: center; justify-content: center; animation: fade-in-b-t56bnmpovu 0.3s ease; } .combat-overlay[b-t56bnmpovu] { width: 75%; max-width: 800px; max-height: 55vh; background: linear-gradient(180deg, #1a2a1a, #0d1a0d); border-radius: 16px; border: 2px solid rgba(100, 180, 60, 0.4); box-shadow: 0 0 40px rgba(0, 0, 0, 0.6), 0 0 15px rgba(100, 180, 60, 0.2); overflow: hidden; display: flex; flex-direction: column; position: relative; } .combat-header[b-t56bnmpovu] { display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; padding: 10px; font-size: 1.2rem; font-weight: 900; letter-spacing: 4px; color: #ff6b35; text-shadow: 0 0 10px rgba(255, 107, 53, 0.5); border-bottom: 1px solid rgba(255, 255, 255, 0.1); } /* The phase sits above the subject, quieter than it: which phase you are in is the context, what is happening in it is the headline. */ .combat-phase[b-t56bnmpovu] { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.18em; color: rgba(255, 255, 255, 0.62); text-shadow: none; } .combat-arena[b-t56bnmpovu] { display: flex; align-items: center; justify-content: center; padding: 16px; flex: 1; gap: 12px; } .combat-side[b-t56bnmpovu] { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; } .combat-side-label[b-t56bnmpovu] { font-size: 0.6rem; font-weight: 800; letter-spacing: 2px; color: rgba(255, 255, 255, 0.4); text-transform: uppercase; } .combat-cards[b-t56bnmpovu] { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; } .combat-unit[b-t56bnmpovu] { text-align: center; } .combat-unit-stat[b-t56bnmpovu] { font-size: 0.7rem; font-weight: 700; color: #ccc; margin-top: 4px; } .combat-player-name[b-t56bnmpovu] { font-size: 0.7rem; color: rgba(255, 255, 255, 0.5); font-weight: 600; } /* VS indicator */ .combat-vs[b-t56bnmpovu] { display: flex; flex-direction: column; align-items: center; gap: 8px; flex-shrink: 0; min-width: 60px; } .vs-icon[b-t56bnmpovu] { font-size: 1.5rem; font-weight: 900; color: #ff6b35; text-shadow: 0 0 8px rgba(255, 107, 53, 0.5); } .combat-arrow[b-t56bnmpovu] { width: 40px; height: 4px; background: rgba(255, 255, 255, 0.15); border-radius: 2px; position: relative; overflow: hidden; } .combat-arrow.arrow-active[b-t56bnmpovu]::after { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, #ff6b35, transparent); animation: arrow-fire-b-t56bnmpovu 0.6s ease forwards; } @keyframes arrow-fire-b-t56bnmpovu { to { left: 100%; } } /* Hero target (when attacking hero directly) */ .hero-target-icon[b-t56bnmpovu] { width: 64px; height: 64px; border-radius: 50%; background: rgba(220, 53, 69, 0.3); border: 2px solid rgba(220, 53, 69, 0.6); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 900; color: rgba(255, 255, 255, 0.6); } .hero-target-name[b-t56bnmpovu] { font-size: 0.8rem; font-weight: 700; color: #ccc; margin-top: 4px; text-align: center; } /* Result section */ .combat-result[b-t56bnmpovu] { text-align: center; padding: 12px; border-top: 1px solid rgba(255, 255, 255, 0.1); animation: result-appear-b-t56bnmpovu 0.4s ease; } .result-text[b-t56bnmpovu] { font-size: 1.3rem; font-weight: 900; letter-spacing: 2px; } .result-detail[b-t56bnmpovu] { font-size: 0.75rem; color: #aaa; margin-top: 2px; } .result-hit .result-text[b-t56bnmpovu] { color: #dc3545; text-shadow: 0 0 10px rgba(220, 53, 69, 0.5); } .result-blocked .result-text[b-t56bnmpovu] { color: #0d6efd; text-shadow: 0 0 10px rgba(13, 110, 253, 0.5); } .result-cancelled .result-text[b-t56bnmpovu] { color: #ffc107; text-shadow: 0 0 10px rgba(255, 193, 7, 0.5); } @keyframes result-appear-b-t56bnmpovu { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } } .combat-footer[b-t56bnmpovu] { text-align: center; padding: 10px; border-top: 1px solid rgba(255, 255, 255, 0.05); } /* Animation phases */ .phase-intro[b-t56bnmpovu] { animation: overlay-enter-b-t56bnmpovu 0.4s ease; } .phase-attack .attacker-side[b-t56bnmpovu] { animation: shake-b-t56bnmpovu 0.3s ease; } /* Card shake on hit */ .unit-attacking[b-t56bnmpovu] { animation: unit-pulse-b-t56bnmpovu 0.3s ease; } .unit-hit[b-t56bnmpovu] { animation: shake-b-t56bnmpovu 0.4s ease; } .hero-hit[b-t56bnmpovu] { animation: shake-b-t56bnmpovu 0.4s ease; } @keyframes unit-pulse-b-t56bnmpovu { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } @keyframes overlay-enter-b-t56bnmpovu { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } } @keyframes shake-b-t56bnmpovu { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } } @keyframes fade-in-b-t56bnmpovu { from { opacity: 0; } to { opacity: 1; } } /* Floating damage number */ .damage-float[b-t56bnmpovu] { position: absolute; top: 30%; left: 50%; transform: translateX(-50%); pointer-events: none; animation: damage-float-up-b-t56bnmpovu 1s ease-out forwards; } .damage-number[b-t56bnmpovu] { font-size: 2.5rem; font-weight: 900; color: #dc3545; text-shadow: 0 0 15px rgba(220, 53, 69, 0.8), 2px 2px 4px rgba(0,0,0,0.6); } @keyframes damage-float-up-b-t56bnmpovu { 0% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1.2); } 50% { opacity: 1; transform: translateX(-50%) translateY(-30px) scale(1); } 100% { opacity: 0; transform: translateX(-50%) translateY(-60px) scale(0.8); } } /* Impact burst animation slot */ .combat-animation-slot[b-t56bnmpovu] { position: relative; width: 40px; height: 40px; margin-top: 4px; } .impact-burst[b-t56bnmpovu] { position: absolute; top: 50%; left: 50%; width: 30px; height: 30px; border-radius: 50%; transform: translate(-50%, -50%); animation: burst-b-t56bnmpovu 0.5s ease-out forwards; } @keyframes burst-b-t56bnmpovu { 0% { box-shadow: 0 0 0 0 rgba(255, 107, 53, 0.8); opacity: 1; } 50% { box-shadow: 0 0 20px 10px rgba(255, 107, 53, 0.4); } 100% { box-shadow: 0 0 40px 20px rgba(255, 107, 53, 0); opacity: 0; } } /* Direct damage icon */ .direct-damage-icon[b-t56bnmpovu] { font-size: 3rem; animation: direct-pulse-b-t56bnmpovu 0.6s ease infinite; } @keyframes direct-pulse-b-t56bnmpovu { 0%, 100% { transform: scale(1); opacity: 0.8; } 50% { transform: scale(1.15); opacity: 1; } } /* Mobile */ @media (max-width: 767px) { .combat-overlay[b-t56bnmpovu] { width: 100%; max-width: 100%; max-height: 100vh; max-height: 100dvh; border-radius: 0; } .combat-header[b-t56bnmpovu] { font-size: 1rem; padding: 8px; } .combat-arena[b-t56bnmpovu] { padding: 12px 8px; gap: 6px; } .vs-icon[b-t56bnmpovu] { font-size: 1.1rem; } .combat-footer .btn[b-t56bnmpovu] { width: 100%; min-height: 48px; font-size: 0.9rem; } } /* /Components/Game/DayPhaseTimeline.razor.rz.scp.css */ /* Day/phase/turn indicator — styled to match the mockup (content.png): numbered step rail, dashed connector, active pill. Viewer = blue, enemy = red, the same pairing the player bar and the game log use. */ .dpt-panel[b-a517ujbjpa] { width: 256px; background: radial-gradient(120% 80% at 50% -20%, rgba(255, 212, 121, 0.05), transparent 60%), linear-gradient(180deg, rgba(15, 23, 18, 0.95), rgba(8, 13, 10, 0.96)); border: 1px solid rgba(255, 212, 121, 0.45); border-radius: 13px; padding: 13px 15px 14px; color: #e6efe9; font-size: 0.8rem; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.04); backdrop-filter: blur(5px); user-select: none; } .dpt-header[b-a517ujbjpa] { display: flex; align-items: center; gap: 9px; padding-bottom: 11px; margin-bottom: 12px; border-bottom: 1px solid rgba(255, 212, 121, 0.16); } .dpt-sun[b-a517ujbjpa] { color: #ffd479; font-size: 1.05rem; filter: drop-shadow(0 0 4px rgba(255, 212, 121, 0.4)); } .dpt-day[b-a517ujbjpa] { /* One line. The header is a flex row and the turn pill is pushed right, so without this "DAY 12" gets squeezed and breaks after "DAY". */ white-space: nowrap; flex: 0 0 auto; font-weight: 800; letter-spacing: 0.12em; color: #ffd479; font-size: 1.12rem; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); } .dpt-turn[b-a517ujbjpa] { margin-left: auto; white-space: nowrap; font-size: 0.64rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; padding: 4px 11px; border-radius: 999px; } .dpt-turn.is-you[b-a517ujbjpa] { color: #04121f; background: linear-gradient(180deg, #8ecbff, #4b96f0); box-shadow: 0 0 10px rgba(88, 166, 255, 0.35); } .dpt-turn.is-opp[b-a517ujbjpa] { color: #ffeceb; background: linear-gradient(180deg, rgba(248, 113, 106, 0.75), rgba(198, 55, 47, 0.75)); } .dpt-track[b-a517ujbjpa] { margin-bottom: 13px; } .dpt-track:last-of-type[b-a517ujbjpa] { margin-bottom: 0; } .dpt-track-label[b-a517ujbjpa] { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.07em; margin-bottom: 8px; text-transform: uppercase; } .dpt-track.is-you .dpt-track-label[b-a517ujbjpa] { color: #58a6ff; } .dpt-track.is-opp .dpt-track-label[b-a517ujbjpa] { color: #ff7b72; } .dpt-persp[b-a517ujbjpa] { opacity: 0.6; font-weight: 700; } /* Step rail: nodes on the left joined by a dashed vertical connector. */ .dpt-steps[b-a517ujbjpa] { list-style: none; margin: 0; padding: 0; position: relative; } .dpt-steps[b-a517ujbjpa]::before { content: ""; position: absolute; left: 11px; top: 14px; bottom: 14px; width: 0; border-left: 2px dashed rgba(255, 255, 255, 0.15); z-index: 0; } .dpt-step[b-a517ujbjpa] { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; min-height: 30px; } /* The numbered/checked node. */ .dpt-node[b-a517ujbjpa] { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 800; box-sizing: border-box; } /* Pending: hollow circle with the step number. */ .dpt-step.is-pending .dpt-node[b-a517ujbjpa] { border: 2px solid rgba(255, 255, 255, 0.26); color: rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.02); } /* Completed + active: filled in the row's accent colour. */ .dpt-track.is-you .dpt-step.is-completed .dpt-node[b-a517ujbjpa], .dpt-track.is-you .dpt-step.is-active .dpt-node[b-a517ujbjpa] { background: linear-gradient(180deg, #6cb8ff, #2f7fe0); color: #04121f; box-shadow: 0 0 8px rgba(56, 139, 253, 0.4); } .dpt-track.is-opp .dpt-step.is-completed .dpt-node[b-a517ujbjpa], .dpt-track.is-opp .dpt-step.is-active .dpt-node[b-a517ujbjpa] { background: linear-gradient(180deg, #ff9a93, #de5049); color: #1f0705; box-shadow: 0 0 8px rgba(248, 81, 73, 0.4); } .dpt-name[b-a517ujbjpa] { text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.73rem; font-weight: 600; color: #9db4a7; } .dpt-step.is-pending .dpt-name[b-a517ujbjpa] { color: rgba(210, 224, 216, 0.42); } .dpt-step.is-completed .dpt-name[b-a517ujbjpa] { color: #c3d3ca; } /* Active phase: a solid pill with a play glyph, in the row's accent colour. */ .dpt-pill[b-a517ujbjpa] { flex: 1 1 auto; display: flex; align-items: center; justify-content: space-between; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.73rem; font-weight: 800; color: #ffffff; padding: 6px 11px; border-radius: 7px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); } .dpt-track.is-you .dpt-pill[b-a517ujbjpa] { background: linear-gradient(180deg, rgba(56, 139, 253, 0.42), rgba(20, 62, 122, 0.5)); box-shadow: inset 0 0 0 1.5px rgba(121, 192, 255, 0.7), 0 0 12px rgba(56, 139, 253, 0.2); } .dpt-track.is-opp .dpt-pill[b-a517ujbjpa] { background: linear-gradient(180deg, rgba(248, 81, 73, 0.42), rgba(120, 32, 27, 0.5)); box-shadow: inset 0 0 0 1.5px rgba(255, 123, 114, 0.7), 0 0 12px rgba(248, 81, 73, 0.2); } .dpt-play[b-a517ujbjpa] { font-size: 0.62rem; } .dpt-track.is-you .dpt-play[b-a517ujbjpa] { color: #cfe7ff; } .dpt-track.is-opp .dpt-play[b-a517ujbjpa] { color: #ffd8d5; } .dpt-nextday[b-a517ujbjpa] { display: flex; align-items: center; gap: 9px; margin-top: 13px; padding-top: 11px; border-top: 1px solid rgba(255, 212, 121, 0.16); font-size: 0.68rem; color: #8fae9d; } .dpt-nextday-text[b-a517ujbjpa] { display: flex; flex-direction: column; line-height: 1.3; } .dpt-nextday strong[b-a517ujbjpa] { color: #ffd479; letter-spacing: 0.06em; font-size: 0.72rem; text-transform: uppercase; } .dpt-nextday-sub[b-a517ujbjpa] { color: #8fae9d; } .dpt-cal[b-a517ujbjpa] { opacity: 0.85; font-size: 0.95rem; } /* /Components/Game/GameOverModal.razor.rz.scp.css */ /* Endgame modal owns its own styles: scoped CSS from the parent page (Board.razor.css) does not reach a child component, so without this the modal renders unstyled. */ .game-over-modal-backdrop[b-efe4m7j98c] { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.75); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 9000; animation: gameOverFadeIn-b-efe4m7j98c 0.35s ease-out; } .game-over-modal[b-efe4m7j98c] { background: linear-gradient(160deg, #1a1f2e 0%, #2a1f3e 100%); border-radius: 14px; padding: 2.5rem 3rem; text-align: center; min-width: 360px; max-width: 90vw; border: 2px solid rgba(255, 255, 255, 0.1); box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6); animation: gameOverPop-b-efe4m7j98c 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); } .game-over-win[b-efe4m7j98c] { border-color: rgba(102, 187, 106, 0.5); } .game-over-loss[b-efe4m7j98c] { border-color: rgba(229, 57, 53, 0.5); } .game-over-draw[b-efe4m7j98c] { border-color: rgba(255, 167, 38, 0.5); } .game-over-neutral[b-efe4m7j98c] { border-color: rgba(255, 215, 0, 0.4); } .game-over-emoji[b-efe4m7j98c] { font-size: 4rem; line-height: 1; margin-bottom: 0.5rem; } .game-over-title[b-efe4m7j98c] { font-size: 2.5rem; font-weight: 800; margin: 0 0 0.5rem 0; color: #fff; letter-spacing: -0.02em; } .game-over-win .game-over-title[b-efe4m7j98c] { color: #99e0a0; } .game-over-loss .game-over-title[b-efe4m7j98c] { color: #f0908d; } .game-over-draw .game-over-title[b-efe4m7j98c], .game-over-neutral .game-over-title[b-efe4m7j98c] { color: #ffd700; } .game-over-subtitle[b-efe4m7j98c] { color: rgba(255, 255, 255, 0.75); margin: 0 0 0.5rem 0; font-size: 1.05rem; } .game-over-reason[b-efe4m7j98c] { color: rgba(255, 255, 255, 0.5); margin: 0 0 1.25rem 0; font-size: 0.85rem; font-style: italic; } .game-over-stats[b-efe4m7j98c] { display: flex; flex-direction: column; gap: 0.4rem; background: rgba(0, 0, 0, 0.25); border-radius: 10px; padding: 0.85rem 1.1rem; margin: 0 auto 1.5rem auto; max-width: 380px; } .game-over-stat[b-efe4m7j98c] { display: flex; justify-content: space-between; gap: 1.5rem; color: rgba(255, 255, 255, 0.85); font-size: 0.95rem; } .game-over-stat-label[b-efe4m7j98c] { color: rgba(255, 255, 255, 0.6); } .game-over-stat-value[b-efe4m7j98c] { font-weight: 700; font-variant-numeric: tabular-nums; } .game-over-actions[b-efe4m7j98c] { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; } @keyframes gameOverFadeIn-b-efe4m7j98c { from { opacity: 0; } to { opacity: 1; } } @keyframes gameOverPop-b-efe4m7j98c { from { opacity: 0; transform: scale(0.85) translateY(20px); } to { opacity: 1; transform: scale(1) translateY(0); } } /* /Components/Game/HeroCardView.razor.rz.scp.css */ /* Self-contained styles (Razor CSS isolation prevents reuse across components). */ .hero-card-view[b-db7t5is2lh] { --card-w: 110px; width: var(--card-w); min-width: var(--card-w); aspect-ratio: 63 / 88; border-radius: 7px; border: 2px solid rgba(0,0,0,0.4); background: #f5f0e6; position: relative; overflow: hidden; font-size: 0.7rem; user-select: none; box-shadow: 1px 2px 6px rgba(0,0,0,0.4); color: #222; transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; } .hero-card-view.playable[b-db7t5is2lh] { cursor: pointer; } .hero-card-view.selected[b-db7t5is2lh] { border-color: #ffc107; box-shadow: 0 0 14px rgba(255, 193, 7, 0.9), 1px 2px 4px rgba(0,0,0,0.3); } /* --- Image variant: full painted card --- */ .hero-image[b-db7t5is2lh] { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 5px; } /* --- Fallback variant: synthetic card built from data --- */ .card-face[b-db7t5is2lh] { width: 100%; height: 100%; display: flex; flex-direction: column; } .card-front[b-db7t5is2lh] { display: flex; flex-direction: column; height: 100%; position: relative; overflow: hidden; } .card-header-strip[b-db7t5is2lh] { padding: 2px 5px; display: flex; gap: 3px; align-items: center; color: white; font-size: 0.6rem; min-height: 19px; flex-shrink: 0; } .card-type-label[b-db7t5is2lh] { background: rgba(0,0,0,0.3); border-radius: 2px; padding: 1px 4px; font-size: 0.48rem; font-weight: 800; letter-spacing: 0.5px; flex-shrink: 0; } .card-name[b-db7t5is2lh] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; font-weight: 700; font-size: 0.58rem; } .type-hero[b-db7t5is2lh] { background: linear-gradient(90deg, #4a2670, #8a5a1a); } .card-art[b-db7t5is2lh] { flex: 1; display: flex; align-items: center; justify-content: center; background: #e8e0d0; min-height: 50px; border-top: 1px solid rgba(0,0,0,0.08); border-bottom: 1px solid rgba(0,0,0,0.08); overflow: hidden; } .card-type-icon[b-db7t5is2lh] { font-size: 1.6rem; font-weight: 900; opacity: 0.5; } .card-text.hero-title-text[b-db7t5is2lh] { font-style: italic; font-size: 0.5rem; color: #555; padding: 2px 5px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .card-stats-bar[b-db7t5is2lh] { display: flex; gap: 2px; padding: 2px 5px; justify-content: flex-end; margin-top: auto; flex-shrink: 0; background: rgba(0,0,0,0.04); } .stat[b-db7t5is2lh] { padding: 0 5px; border-radius: 3px; font-weight: 700; font-size: 0.55rem; color: white; box-shadow: 0 1px 1px rgba(0,0,0,0.2); } .stat-health[b-db7t5is2lh] { background: #dc3545; } .stat-morale[b-db7t5is2lh] { background: #6f42c1; } /* === Image-first chrome ==================================================== When the painted hero image is rendered, strip the rectangular chrome so transparent corners/cutouts don't leak the beige bg. Use filter:drop-shadow so highlights follow the painted shape. */ .hero-card-view:has(.hero-image)[b-db7t5is2lh] { background: transparent; border-color: transparent; box-shadow: none; } .hero-card-view:has(.hero-image).selected[b-db7t5is2lh] { filter: drop-shadow(0 0 12px rgba(255, 193, 7, 1)); } .hero-card-view:has(.hero-image).playable:hover[b-db7t5is2lh] { filter: drop-shadow(0 4px 12px rgba(0,0,0,0.5)); } /* /Components/Game/LawnView.razor.rz.scp.css */ /* Lawn container — transparent; the continuous felt lives on the .battlefield so both halves read as ONE table (mockup), not two boxed lawns. */ .lawn[b-4vv3zkzte9] { display: flex; flex-direction: column; padding: 0; min-height: 0; } .opponent-lawn[b-4vv3zkzte9], .active-lawn[b-4vv3zkzte9] { background: none; border: none; box-shadow: none; } /* Zone grid layout — compact 2-row strips. The board is a single vertical stack (opponent top / you bottom) with a fence between, so the two halves mirror across it: each player's front line (drones + defence) sits nearest the fence, resources at the back, hero to the outer edge. */ .lawn-zones[b-4vv3zkzte9] { display: grid; grid-template-rows: auto auto; gap: 4px 6px; min-height: 0; } /* You (bottom half): hero on the LEFT, front line (drones/defence) toward the fence at the top, resources at the back (bottom). */ .zones-player[b-4vv3zkzte9] { grid-template-columns: auto 1fr 1fr; grid-template-areas: "hero drones defence" "hero resources resources"; } /* Opponent (top half): mirror — hero on the RIGHT, resources at the back (top), front line (drones/defence) toward the fence at the bottom. */ .zones-opponent[b-4vv3zkzte9] { grid-template-columns: 1fr 1fr auto; grid-template-areas: "resources resources hero" "drones defence hero"; } .zone-hero[b-4vv3zkzte9] { grid-area: hero; } .zone-resources[b-4vv3zkzte9] { grid-area: resources; } .zone-drones[b-4vv3zkzte9] { grid-area: drones; } .zone-defence[b-4vv3zkzte9] { grid-area: defence; } /* Zones are just card rows on the open felt — no box, no border, no background, no label (the mockup has none). */ .zone[b-4vv3zkzte9] { border: none; padding: 2px 4px; min-height: 58px; display: flex; flex-direction: column; background: none; transition: background 0.2s; border-radius: 8px; } /* No zone labels in the mockup — the cards' art identifies the row. */ .zone-header[b-4vv3zkzte9] { display: none; } .zone-count-badge[b-4vv3zkzte9] { display: none; } .zone-cards[b-4vv3zkzte9] { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; flex: 1; min-height: 42px; padding: 3px; } /* Empty row → a faint slot outline on the felt (like the 3D board), not a box. */ .empty-zone[b-4vv3zkzte9] { width: 54px; height: 74px; border: 1px dashed rgba(210, 228, 216, 0.14); border-radius: 6px; display: flex; align-items: center; justify-content: center; margin: 2px; background: none; } .empty-zone-icon[b-4vv3zkzte9] { display: none; } /* Drop zone highlight when dragging */ .zone-drop-active[b-4vv3zkzte9] { border-color: rgba(40, 167, 69, 0.8) !important; border-style: solid !important; background: rgba(40, 167, 69, 0.1) !important; box-shadow: inset 0 0 12px rgba(40, 167, 69, 0.15); animation: zone-pulse-b-4vv3zkzte9 1s ease-in-out infinite; } @keyframes zone-pulse-b-4vv3zkzte9 { 0%, 100% { border-color: rgba(40, 167, 69, 0.5); box-shadow: inset 0 0 12px rgba(40, 167, 69, 0.1); } 50% { border-color: rgba(40, 167, 69, 1); box-shadow: inset 0 0 20px rgba(40, 167, 69, 0.25), 0 0 8px rgba(40, 167, 69, 0.3); } } /* Green flash on successful drop */ .zone-drop-success[b-4vv3zkzte9] { animation: zone-flash-green-b-4vv3zkzte9 0.4s ease-out; } @keyframes zone-flash-green-b-4vv3zkzte9 { 0% { background: rgba(40, 167, 69, 0.4); } 100% { background: transparent; } } /* Red flash on rejected drop */ .zone-drop-rejected[b-4vv3zkzte9] { animation: zone-flash-red-b-4vv3zkzte9 0.4s ease-out; } @keyframes zone-flash-red-b-4vv3zkzte9 { 0% { background: rgba(220, 53, 69, 0.4); border-color: rgba(220, 53, 69, 0.8); } 100% { background: transparent; border-color: rgba(255,255,255,0.15); } } /* Hero zone */ .zone-hero[b-4vv3zkzte9] { border: none; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4px; min-width: 120px; max-width: 130px; gap: 4px; } /* Ability buttons rendered under the hero card image (the painted card carries no interaction chrome — buttons live outside it). */ .hero-ability-list[b-4vv3zkzte9] { display: flex; flex-direction: column; gap: 2px; width: 100%; max-width: 110px; } .hero-ability-btn[b-4vv3zkzte9] { background: linear-gradient(90deg, #4a2670, #6b3a8f); color: white; border: 1px solid rgba(0,0,0,0.3); border-radius: 3px; font-size: 0.5rem; font-weight: 700; padding: 2px 5px; line-height: 1.3; cursor: pointer; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hero-ability-btn.ability-ready:hover[b-4vv3zkzte9] { filter: brightness(1.15); box-shadow: 0 0 6px rgba(180, 120, 220, 0.6); } .hero-ability-btn.ability-disabled[b-4vv3zkzte9], .hero-ability-btn:disabled[b-4vv3zkzte9] { opacity: 0.45; cursor: not-allowed; filter: grayscale(0.5); } .companion-badge[b-4vv3zkzte9] { font-size: 0.45rem; font-weight: 700; padding: 1px 4px; border-radius: 3px; margin-top: 2px; cursor: pointer; color: white; } .pet-badge[b-4vv3zkzte9] { background: rgba(224, 124, 36, 0.7); } .spouse-badge[b-4vv3zkzte9] { background: rgba(181, 68, 110, 0.7); } /* Card slot for upgrade drop targets */ .card-slot[b-4vv3zkzte9] { position: relative; display: inline-flex; flex-direction: column; align-items: center; } .card-slot.card-drop-target[b-4vv3zkzte9] { outline: 2px solid rgba(40, 167, 69, 0.8); outline-offset: 2px; border-radius: 7px; background: rgba(40, 167, 69, 0.1); animation: card-drop-pulse-b-4vv3zkzte9 1s ease-in-out infinite; } @keyframes card-drop-pulse-b-4vv3zkzte9 { 0%, 100% { outline-color: rgba(40, 167, 69, 0.5); background: rgba(40, 167, 69, 0.05); } 50% { outline-color: rgba(40, 167, 69, 1); background: rgba(40, 167, 69, 0.15); } } /* Upgrade cards peeking out underneath parent card */ .card-slot[b-4vv3zkzte9] { z-index: 1; } .card-slot > .card-view[b-4vv3zkzte9] { position: relative; z-index: 2; } .attachment-card[b-4vv3zkzte9] { position: absolute; left: 2px; right: 2px; height: 18px; bottom: calc(var(--att-index, 1) * -14px); border-radius: 0 0 5px 5px; overflow: hidden; z-index: 0; cursor: pointer; border: 1px solid rgba(0,0,0,0.3); border-top: none; box-shadow: 0 2px 4px rgba(0,0,0,0.25); transition: transform 0.15s ease, z-index 0s; } .attachment-card:hover[b-4vv3zkzte9] { transform: translateY(4px); z-index: 3; box-shadow: 0 3px 8px rgba(0,0,0,0.4); } .attachment-card-header[b-4vv3zkzte9] { padding: 1px 4px; color: white; font-size: 0.42rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; height: 100%; display: flex; align-items: center; } /* Upgrade type color */ .attachment-card .type-upgrade[b-4vv3zkzte9] { background: linear-gradient(90deg, #b08a10, #d4a017); } /* Attachment spacing on card slots */ .card-slot.attachments-1[b-4vv3zkzte9] { margin-bottom: 14px; } .card-slot.attachments-2[b-4vv3zkzte9] { margin-bottom: 28px; } .card-slot.attachments-3[b-4vv3zkzte9] { margin-bottom: 42px; } /* Resource zone extra padding for tapped cards */ .zone-resources .zone-cards[b-4vv3zkzte9] { min-height: 48px; padding: 5px 4px; } /* Wide screen: the board stays a single vertical stack (never side-by-side), so keep the compact 2-row grid. Just let each zone's cards scroll horizontally instead of wrapping, so rows stay tidy strips. */ @media (min-width: 1440px) { .zone-cards[b-4vv3zkzte9] { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.2) transparent; } } /* Hero powers live in the top-left panel (mockup) — hide the under-card buttons. */ .hero-ability-list[b-4vv3zkzte9] { display: none; } /* /Components/Game/PhaseClock.razor.rz.scp.css */ /* Countdown + progress ring for the current turn window. The ring is a conic-gradient driven by the --pc-pct custom property so nothing has to be animated in JS — Blazor re-renders once a second and the ring follows. */ .phase-clock[b-j0gifqx2q9] { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 2px 10px; /* Band colour, overridden per state below. Everything else keys off it so the title, ring and digits always agree. */ --pc-color: #35c759; } .phase-clock.is-low[b-j0gifqx2q9] { --pc-color: #ffcc00; } .phase-clock.is-critical[b-j0gifqx2q9] { --pc-color: #ff3b30; } .phase-clock.is-paused[b-j0gifqx2q9] { --pc-color: #8e97a3; } .pc-title[b-j0gifqx2q9] { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; color: rgba(255, 255, 255, 0.72); white-space: nowrap; } .pc-dial[b-j0gifqx2q9] { position: relative; display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: conic-gradient(var(--pc-color) calc(var(--pc-pct) * 1%), rgba(255, 255, 255, 0.12) 0); transition: background 0.4s linear; } /* Punch the middle out so the gradient reads as a ring, not a pie. */ .pc-dial[b-j0gifqx2q9]::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: #10161d; } .pc-count[b-j0gifqx2q9] { position: relative; font-size: 1.35rem; font-weight: 800; font-variant-numeric: tabular-nums; color: #fff; } /* The last ten seconds pulse — but never for someone who asked us not to move things on screen. */ .phase-clock.is-critical .pc-count[b-j0gifqx2q9] { color: var(--pc-color); animation: pc-pulse-b-j0gifqx2q9 1s ease-in-out infinite; } .phase-clock.is-paused .pc-count[b-j0gifqx2q9] { color: var(--pc-color); } .pc-paused-note[b-j0gifqx2q9] { font-size: 0.55rem; font-weight: 700; letter-spacing: 0.1em; color: var(--pc-color); } @keyframes pc-pulse-b-j0gifqx2q9 { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } } @media (prefers-reduced-motion: reduce) { .phase-clock.is-critical .pc-count[b-j0gifqx2q9] { animation: none; } .pc-dial[b-j0gifqx2q9] { transition: none; } } @media (max-width: 900px) { .pc-dial[b-j0gifqx2q9] { width: 48px; height: 48px; } .pc-count[b-j0gifqx2q9] { font-size: 0.82rem; } } /* /Components/Game/PhaseTimeline.razor.rz.scp.css */ /* Five-phase rail under the HUD clock (mockup: Suggestion.pdf). Steps are laid out as icon over name over description, joined by a connector line, so the whole day reads left-to-right at a glance. */ .phase-timeline[b-ydv3c09qmk] { display: inline-flex; align-items: flex-start; justify-content: center; gap: 2px; } .phase-step[b-ydv3c09qmk] { display: inline-flex; flex-direction: column; align-items: center; gap: 1px; min-width: 5.5rem; padding: 2px 6px 3px; border-radius: 8px; border: 1px solid transparent; text-align: center; transition: opacity 0.15s ease, background 0.15s ease; } /* Grey ahead, white behind, lit for the phase you are in. */ .phase-step.is-upcoming[b-ydv3c09qmk] { opacity: 0.4; color: #9aa3ad; } .phase-step.is-done[b-ydv3c09qmk] { opacity: 0.85; color: #fff; } .phase-step.is-active[b-ydv3c09qmk] { opacity: 1; color: #fff; background: rgba(255, 212, 121, 0.16); border-color: rgba(255, 212, 121, 0.5); } /* The active-phase marker. Only the current step shows a filled red dot; the others keep a hollow one so the rail's rhythm doesn't jump as play moves. */ .phase-step-dot[b-ydv3c09qmk] { width: 8px; height: 8px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.35); background: transparent; } .phase-step.is-done .phase-step-dot[b-ydv3c09qmk] { background: rgba(255, 255, 255, 0.55); border-color: rgba(255, 255, 255, 0.55); } .phase-step.is-active .phase-step-dot[b-ydv3c09qmk] { background: #ff3b30; border-color: #ff6b62; box-shadow: 0 0 6px rgba(255, 59, 48, 0.9); } .phase-step-icon[b-ydv3c09qmk] { font-size: 0.8rem; line-height: 1; } .phase-step-name[b-ydv3c09qmk] { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; } .phase-step-desc[b-ydv3c09qmk] { font-size: 0.58rem; opacity: 0.75; white-space: nowrap; } /* Connector between steps, aligned with the dot row at the top of each step. */ .phase-step-link[b-ydv3c09qmk] { flex: 0 0 14px; height: 1px; margin-top: 6px; background: rgba(255, 255, 255, 0.25); } @media (max-width: 900px) { .phase-step[b-ydv3c09qmk] { min-width: 3.6rem; } .phase-step-desc[b-ydv3c09qmk] { display: none; } .phase-step-link[b-ydv3c09qmk] { flex-basis: 8px; } } /* /Components/Game/PlayerBar.razor.rz.scp.css */ /* Top HUD bar (player mockup): one full-width strip, heroes anchored at the far left and right, everything else sharing the space between them. The mockup's photographic backdrop is deliberately a flat colour for now — there is nowhere to upload that image yet. */ .pbar[b-1rllj869u6] { display: flex; align-items: stretch; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 14px; background: linear-gradient(180deg, #10171d, #0a0f14); border: 1px solid rgba(255, 212, 121, 0.42); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05); } /* ── Hero columns (far edges) ─────────────────────────────────────────── */ .pbar-hero[b-1rllj869u6] { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 0 0 auto; width: 116px; } .pbar-portrait[b-1rllj869u6] { position: relative; width: 100px; height: 100px; border-radius: 10px; overflow: hidden; display: grid; place-items: center; background: linear-gradient(160deg, rgba(255, 255, 255, 0.09), rgba(0, 0, 0, 0.35)); } .pbar-hero-you .pbar-portrait[b-1rllj869u6] { box-shadow: inset 0 0 0 2px rgba(121, 192, 255, 0.75); } .pbar-hero-opp .pbar-portrait[b-1rllj869u6] { box-shadow: inset 0 0 0 2px rgba(255, 123, 114, 0.75); } .pbar-portrait img[b-1rllj869u6] { width: 100%; height: 100%; object-fit: cover; display: block; } .pbar-portrait-initial[b-1rllj869u6] { font-size: 2.6rem; font-weight: 800; color: rgba(255, 255, 255, 0.72); } /* Cards left in deck, tucked into the portrait's inner corner like the mockup's hex badge. Title spells it out, because a bare number on a portrait is a guess otherwise. */ .pbar-deck-badge[b-1rllj869u6] { position: absolute; right: 2px; bottom: 2px; min-width: 20px; padding: 1px 4px; border-radius: 6px; font-size: 0.66rem; font-weight: 800; text-align: center; color: #fff; background: rgba(8, 13, 18, 0.88); border: 1px solid rgba(255, 255, 255, 0.28); } /* Hero powers, under their own hero. */ .pbar-powers[b-1rllj869u6] { display: flex; flex-direction: column; align-items: stretch; gap: 2px; width: 100%; } /* ── Identity + vitals ────────────────────────────────────────────────── */ .pbar-id[b-1rllj869u6] { display: flex; flex-direction: column; justify-content: center; gap: 4px; flex: 0 1 auto; min-width: 0; } .pbar-id-opp[b-1rllj869u6] { align-items: flex-end; text-align: right; } .pbar-name[b-1rllj869u6] { display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: 1.3rem; letter-spacing: 0.03em; text-transform: uppercase; white-space: nowrap; max-width: 100%; min-width: 0; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55); } /* A long name truncates rather than shoving the resource pools out of the bar. max-width matters as much as the ellipsis: the enemy column is right-aligned, so an over-wide name box hangs off to the LEFT and paints across the opponent's resource panel. The full name is one glance away on the portrait beside it. Truncation lives on the name itself now that the profile picture and the (YOU)/(ENEMY) tag share the row — an ellipsis on the flex row would have clipped those instead of the name. */ .pbar-name-text[b-1rllj869u6] { min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* The hero being played, beside the name. Round, so it never reads as a second player picture — those are the square plates at the far edges. Contain, not cover: hero artwork is card-shaped, and cropping it to a circle cuts the face off. */ .pbar-hero-badge[b-1rllj869u6] { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; object-fit: contain; background: rgba(0, 0, 0, 0.45); } .pbar-id-you .pbar-hero-badge[b-1rllj869u6] { box-shadow: 0 0 0 2px rgba(121, 192, 255, 0.75); } .pbar-id-opp .pbar-hero-badge[b-1rllj869u6] { box-shadow: 0 0 0 2px rgba(255, 123, 114, 0.75); } .pbar-id-you .pbar-name[b-1rllj869u6] { color: #dceeff; } .pbar-id-opp .pbar-name[b-1rllj869u6] { color: #ffe2df; } .pbar-tag[b-1rllj869u6] { font-size: 0.9rem; font-weight: 800; letter-spacing: 0.04em; } .pbar-tag-you[b-1rllj869u6] { color: #58a6ff; } .pbar-tag-opp[b-1rllj869u6] { color: #ff7b72; } /* Health and Morale sit side by side while there is room and stack when there is not. The bar is over-subscribed at common laptop widths, and without a wrap the pair simply overflowed its column and painted across the resource panel. */ .pbar-vitals[b-1rllj869u6] { display: flex; flex-wrap: wrap; gap: 4px 12px; min-width: 0; } .pbar-vital[b-1rllj869u6] { display: flex; flex-direction: column; gap: 2px; /* Enough for the label, the value/max and the bar, and no more: at 104px the two vitals could not shrink below what the identity block was allotted, so the enemy's name and vitals overlapped the resource panel beside them. */ flex: 1 1 84px; min-width: 84px; --vital-color: #f85149; } .pbar-vital.vital-morale[b-1rllj869u6] { --vital-color: #a371f7; } .vital-head[b-1rllj869u6] { display: flex; align-items: center; gap: 4px; line-height: 1; } .vital-glyph[b-1rllj869u6] { font-size: 1rem; } .vital-head small[b-1rllj869u6] { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.09em; color: rgba(255, 255, 255, 0.6); } .pbar-vital b[b-1rllj869u6] { font-size: 1.35rem; font-variant-numeric: tabular-nums; color: #fff; line-height: 1.05; } .vital-max[b-1rllj869u6] { font-size: 0.8rem; font-weight: 500; opacity: 0.55; } .vital-bar[b-1rllj869u6] { width: 100%; height: 8px; border-radius: 2px; background: rgba(255, 255, 255, 0.14); overflow: hidden; } .vital-fill[b-1rllj869u6] { display: block; height: 100%; background: var(--vital-color); transition: width 0.25s ease; } /* ── Resource pools ───────────────────────────────────────────────────── */ .pool-box[b-1rllj869u6] { /* A real flex basis, not 0: with `flex: 1 1 0` the pools lost every contest for width and collapsed to a sliver behind a long player name, which is how the resource readout ended up unreadably small. Shrinking is proportional to the basis, so the pools now keep a fair share of the bar and grow into whatever the heroes, vitals and clock leave over. */ flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 3px; padding: 4px 8px 6px; border-radius: 10px; border: 1px solid rgba(255, 212, 121, 0.3); background: rgba(255, 255, 255, 0.03); } .pool-head[b-1rllj869u6] { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.14em; text-align: center; color: #e2c87e; white-space: nowrap; /* Clip rather than push the panel wider than its share of the bar. */ overflow: hidden; text-overflow: ellipsis; } /* The pool boxes are stretched to the height of the hero portraits, so the cells claim all of it rather than floating in the middle of an empty panel. Resources are what every decision in a turn is costed against, and they were the smallest thing in the bar (player feedback). A grid, not a row: five pips squeezed into one line can never be large in a panel this narrow, so when the width runs out they wrap into a second line and use the height the panel already had going spare, instead of shrinking to nothing. */ .pool-cells[b-1rllj869u6] { display: grid; grid-template-columns: repeat(auto-fit, minmax(46px, 1fr)); grid-auto-rows: 1fr; gap: 5px; flex: 1 1 auto; min-height: 0; } .pool-cell[b-1rllj869u6] { flex: 1 1 0; min-width: 0; /* Each cell is its own query container, so the icon and the number are sized from the box the cell actually got rather than from a viewport guess. The bar squeezes these panels hard between the heroes, vitals and clock, and the squeeze does not track the viewport width in any way a breakpoint can predict — sized off @media, the icons overflowed their cells and collided. */ container-type: size; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 2px 4px; line-height: 1; border-radius: 8px; border: 1px solid rgba(255, 212, 121, 0.28); background: rgba(0, 0, 0, 0.28); } /* Capped by the cell's width AND its height, so the icon-over-number stack fits whichever of the two runs out first. */ .pool-glyph[b-1rllj869u6] { font-size: min(2.4rem, 62cqw, 46cqh); line-height: 1; } .pool-cell b[b-1rllj869u6] { font-size: min(1.8rem, 52cqw, 44cqh); font-variant-numeric: tabular-nums; color: #fff; } /* An empty pool is still information — dim it, but never to the point of vanishing, because Preparation starts with every pool at zero. */ .pool-cell.is-empty[b-1rllj869u6] { opacity: 0.72; } .pool-cell.is-empty b[b-1rllj869u6] { color: rgba(255, 255, 255, 0.66); } /* ── Centre (clock / VS) ──────────────────────────────────────────────── */ .pbar-centre[b-1rllj869u6] { flex: 0 0 auto; display: grid; place-items: center; min-width: 132px; padding: 2px 10px; border-radius: 10px; border: 1px solid rgba(255, 212, 121, 0.3); background: rgba(255, 255, 255, 0.03); } .pbar-vs[b-1rllj869u6] { font-size: 1.3rem; font-weight: 900; color: #e2c87e; letter-spacing: 0.06em; text-shadow: 0 0 14px rgba(226, 200, 126, 0.5); } /* ── Narrow screens ───────────────────────────────────────────────────── */ @media (max-width: 1100px) { .pbar-hero[b-1rllj869u6] { width: 64px; } .pbar-portrait[b-1rllj869u6] { width: 56px; height: 56px; } .pbar-vitals[b-1rllj869u6] { gap: 8px; } .pbar-vital[b-1rllj869u6] { min-width: 60px; } .pbar-hero-badge[b-1rllj869u6] { width: 26px; height: 26px; } .pool-head[b-1rllj869u6] { letter-spacing: 0.06em; } /* Cell contents need no breakpoint of their own — they follow the cell's own width (see container-type above), which is what actually changes here. */ .pool-cells[b-1rllj869u6] { gap: 3px; } } @media (prefers-reduced-motion: reduce) { .vital-fill[b-1rllj869u6] { transition: none; } } /* /Components/Game/PlayerStatsBar.razor.rz.scp.css */ /* Compact, tucked stat readout — matches the mockup's minimal stats, not the old full-width red/blue bars. Sits inline near the lawn label. */ .player-stats[b-z3aot4u82k] { display: flex; align-items: center; gap: 16px; padding: 3px 10px; border-radius: 6px; background: transparent; } .hero-name[b-z3aot4u82k] { display: flex; align-items: baseline; gap: 7px; min-width: auto; } .hero-name strong[b-z3aot4u82k] { display: inline; font-size: 0.82rem; color: #e6ede8; } .hero-title[b-z3aot4u82k] { font-size: 0.62rem; color: rgba(255, 255, 255, 0.4); } /* Both stats sit on one compact row rather than stacked full-width bars. */ .stat-bars[b-z3aot4u82k] { flex: 0 0 auto; display: flex; flex-direction: row; align-items: center; gap: 14px; } .stat-item[b-z3aot4u82k] { display: flex; align-items: center; gap: 6px; } /* Small segmented bar (~110px), subtle track. */ .stat-bar-bg[b-z3aot4u82k] { width: 110px; height: 5px; background: rgba(0, 0, 0, 0.45); border-radius: 3px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.08); } .stat-bar-fill[b-z3aot4u82k] { height: 100%; border-radius: 3px; transition: width 0.4s ease; } .health .stat-bar-fill[b-z3aot4u82k] { background: #c0392b; } .morale .stat-bar-fill[b-z3aot4u82k] { background: #3a6ea5; } .stat-value[b-z3aot4u82k] { font-size: 0.62rem; font-weight: 600; min-width: auto; text-align: left; color: rgba(230, 237, 232, 0.7); white-space: nowrap; } /* Small numeric token/pill next to each bar. */ .stat-token[b-z3aot4u82k] { width: 18px; height: 18px; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 0.58rem; font-weight: 800; color: white; flex-shrink: 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12); } .health-token[b-z3aot4u82k] { background: #c0392b; } .morale-token[b-z3aot4u82k] { background: #3a6ea5; } /* /Components/Game/ResourceIcon.razor.rz.scp.css */ /* Resource artwork tracks the host's font-size so a single component serves the HUD pool, the card cost pips and the preview modal. The art carries its own rounded plate on a near-black square, so the corners are clipped rather than left to show as dark notches on a coloured pip. */ .res-icon[b-zlwxk471v9] { display: inline-block; width: 1em; height: 1em; border-radius: 22%; vertical-align: -0.15em; object-fit: contain; /* Sub-pixel icon art: let the browser smooth rather than alias it. */ image-rendering: auto; } /* /Components/Game/TrashPileModal.razor.rz.scp.css */ .trash-modal-backdrop[b-lq2gs1nkhn] { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 1.5rem; background: rgba(0, 0, 0, 0.72); } .trash-modal[b-lq2gs1nkhn] { display: flex; flex-direction: column; width: min(1100px, 100%); max-height: 85vh; border-radius: 0.6rem; border: 1px solid rgba(255, 255, 255, 0.16); background: #16241b; color: #e6edf3; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55); } .trash-modal-header[b-lq2gs1nkhn] { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.12); } .trash-modal-title[b-lq2gs1nkhn] { margin: 0; font-size: 1.1rem; } .trash-modal-close[b-lq2gs1nkhn] { border: 0; background: transparent; color: inherit; font-size: 1.6rem; line-height: 1; cursor: pointer; opacity: 0.75; } .trash-modal-close:hover[b-lq2gs1nkhn] { opacity: 1; } .trash-modal-columns[b-lq2gs1nkhn] { /* Two piles plus the hover-preview pane, which is a fixed width because the card inside it is: it is a card at a readable size, not a share of the modal. */ display: grid; grid-template-columns: 1fr 1fr auto; gap: 1rem; padding: 1rem; overflow: hidden; min-height: 0; } .trash-column[b-lq2gs1nkhn] { display: flex; flex-direction: column; min-height: 0; padding: 0.6rem; border-radius: 0.45rem; background: rgba(0, 0, 0, 0.25); } /* The pile the player actually clicked, lifted so it reads as the one in focus. */ .trash-column.is-focused[b-lq2gs1nkhn] { outline: 1px solid rgba(110, 231, 160, 0.45); background: rgba(110, 231, 160, 0.07); } .trash-column-title[b-lq2gs1nkhn] { margin: 0 0 0.5rem; font-size: 0.9rem; letter-spacing: 0.03em; text-transform: uppercase; opacity: 0.85; } .trash-column-count[b-lq2gs1nkhn] { display: inline-block; margin-left: 0.35rem; padding: 0 0.4rem; border-radius: 0.7rem; background: rgba(255, 255, 255, 0.14); font-size: 0.8rem; } .trash-column-empty[b-lq2gs1nkhn] { margin: 0; opacity: 0.6; font-size: 0.85rem; } .trash-column-cards[b-lq2gs1nkhn] { display: flex; flex-wrap: wrap; gap: 0.4rem; overflow-y: auto; min-height: 0; padding-right: 0.2rem; } /* ── hover preview ─────────────────────────────────────────────────────────── The pane scales one ordinary CardView up rather than rendering a second, larger card layout: the big view is then the thumbnail by construction, with nothing to keep in sync as the card design changes. */ .trash-preview[b-lq2gs1nkhn] { --preview-scale: 3.2; display: flex; align-items: flex-start; justify-content: center; padding: 0.6rem; border-radius: 0.45rem; background: rgba(0, 0, 0, 0.25); min-height: 0; overflow: hidden; } .trash-preview-hint[b-lq2gs1nkhn] { /* Centred in the empty pane, and sized so the pane doesn't jump width when a card appears — the frame below is the same width. */ width: calc(100px * var(--preview-scale)); margin: auto; padding: 0 1rem; text-align: center; font-size: 0.85rem; opacity: 0.55; } .trash-preview-frame[b-lq2gs1nkhn] { width: calc(100px * var(--preview-scale)); /* 63:88 is the card aspect enforced at upload time and by .card-view. */ height: calc(100px * 88 / 63 * var(--preview-scale)); } .trash-preview-card[b-lq2gs1nkhn] { width: 100px; transform: scale(var(--preview-scale)); transform-origin: top left; } /* Cards with no artwork yet fall back to a text layout that is truncated to fit a thumbnail — an ellipsis on the name, a clipped rules box. Scaling preserves those cuts faithfully, which defeats the point of a large view, so relax them here. Cards WITH artwork are one image and need none of this. */ .trash-preview-card[b-lq2gs1nkhn] .card-name { overflow: visible; text-overflow: clip; white-space: normal; } .trash-preview-card[b-lq2gs1nkhn] .card-text { overflow: visible; max-height: none; } .trash-card[b-lq2gs1nkhn] { display: contents; } @media (max-width: 1200px) { .trash-preview[b-lq2gs1nkhn] { --preview-scale: 2.4; } } @media (max-width: 820px) { .trash-modal-columns[b-lq2gs1nkhn] { grid-template-columns: 1fr; } .trash-modal[b-lq2gs1nkhn] { max-height: 92vh; } } /* /Components/Game/TurnTransitionScreen.razor.rz.scp.css */ /* === Turn Transition (hot seat) =========================================== These rules used to live in Board.razor.css, which renders this component but not its markup. Blazor CSS isolation scopes a stylesheet to the component that OWNS the elements, so none of it ever matched: the hand-off screen rendered completely unstyled — no centring, no gradient, default text colour — which on the dark game layout came out as near-invisible text in the top-left corner. Reported 2026-07-05 as "I get this screen upon startup and nothing more can be done". ========================================================================= */ .turn-transition[b-c2tjwaync4] { height: 100vh; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at 50% 40%, rgba(60, 100, 40, 0.15) 0%, transparent 60%), linear-gradient(135deg, #0a0e17, #111927); } .transition-content[b-c2tjwaync4] { text-align: center; animation: fade-in-b-c2tjwaync4 0.4s ease; } .transition-content h2[b-c2tjwaync4] { color: rgba(255, 255, 255, 0.35); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 3px; margin-bottom: 8px; } .transition-player-name[b-c2tjwaync4] { font-size: 2.5rem; font-weight: 900; color: #e2c87e; margin-bottom: 4px; text-shadow: 0 0 30px rgba(226, 200, 126, 0.3); } .transition-hero[b-c2tjwaync4] { color: rgba(255, 255, 255, 0.45); font-size: 1rem; margin-bottom: 16px; } .transition-phase[b-c2tjwaync4] { display: flex; gap: 12px; justify-content: center; align-items: center; } /* Also orphaned in Board.razor.css — this span is only ever rendered here. */ .phase-name[b-c2tjwaync4] { background: linear-gradient(135deg, #b8860b, #daa520); color: #1a0f00; padding: 3px 12px; border-radius: 4px; font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.5px; } @keyframes fade-in-b-c2tjwaync4 { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } /* /Components/Layout/AdminLayout.razor.rz.scp.css */ .admin-page[b-7otgzgpqbh] { position: relative; display: flex; flex-direction: column; } main[b-7otgzgpqbh] { flex: 1; } .admin-sidebar[b-7otgzgpqbh] { background-color: var(--bs-body-bg); border-right: 1px solid var(--bs-border-color); } .content[b-7otgzgpqbh] { padding-top: 1.1rem; } @media (min-width: 641px) { .admin-page[b-7otgzgpqbh] { flex-direction: row; } .admin-sidebar[b-7otgzgpqbh] { width: 250px; height: 100vh; position: sticky; top: 0; } } #blazor-error-ui[b-7otgzgpqbh] { color-scheme: light only; background: lightyellow; bottom: 0; box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); box-sizing: border-box; display: none; left: 0; padding: 0.6rem 1.25rem 0.7rem 1.25rem; position: fixed; width: 100%; z-index: 1000; } #blazor-error-ui .dismiss[b-7otgzgpqbh] { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; } /* /Components/Layout/AdminNavMenu.razor.rz.scp.css */ .navbar-toggler[b-34qwuj0nqx] { appearance: none; cursor: pointer; width: 3.5rem; height: 2.5rem; color: var(--bs-body-color); position: absolute; top: 0.5rem; right: 1rem; border: 1px solid var(--bs-border-color); background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28128, 128, 128, 0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem var(--bs-tertiary-bg); } .navbar-toggler:checked[b-34qwuj0nqx] { background-color: var(--bs-tertiary-bg); } .top-row[b-34qwuj0nqx] { min-height: 3.5rem; background-color: var(--bs-tertiary-bg); border-bottom: 1px solid var(--bs-border-color); } .navbar-brand[b-34qwuj0nqx] { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 1.1rem; color: var(--bs-body-color); } /* Wordmark instead of brand text — sized by height to keep the bar's rhythm. */ .navbar-brand img[b-34qwuj0nqx] { height: 30px; width: auto; display: block; } /* "Admin" is a qualifier, not part of the brand, so it stays as text. */ .brand-suffix[b-34qwuj0nqx] { font-weight: 600; letter-spacing: 0.04em; opacity: 0.85; } .bi[b-34qwuj0nqx] { display: inline-block; position: relative; width: 1.25rem; height: 1.25rem; margin-right: 0.75rem; top: -1px; background-size: cover; } .bi-house-door-fill-nav-menu[b-34qwuj0nqx] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E"); } .bi-list-nested-nav-menu[b-34qwuj0nqx] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E"); } .nav-item[b-34qwuj0nqx] { font-size: 0.9rem; padding-bottom: 0.5rem; } .nav-item:first-of-type[b-34qwuj0nqx] { padding-top: 1rem; } .nav-item:last-of-type[b-34qwuj0nqx] { padding-bottom: 1rem; } .nav-item[b-34qwuj0nqx] .nav-link { color: var(--bs-body-color); background: none; border: none; border-radius: 4px; height: 3rem; display: flex; align-items: center; line-height: 3rem; width: 100%; } .nav-item[b-34qwuj0nqx] a.active { background-color: var(--bs-primary); color: white; } .nav-item[b-34qwuj0nqx] .nav-link:hover { background-color: var(--bs-tertiary-bg); } .nav-scrollable[b-34qwuj0nqx] { display: none; } .navbar-toggler:checked ~ .nav-scrollable[b-34qwuj0nqx] { display: block; } @media (min-width: 641px) { .navbar-toggler[b-34qwuj0nqx] { display: none; } .nav-scrollable[b-34qwuj0nqx] { display: block; height: calc(100vh - 3.5rem); overflow-y: auto; } } /* ── Sign out of the admin session ──────────────────────────────────────────── */ .admin-signout[b-34qwuj0nqx] { margin-top: 0.25rem; } .admin-whoami[b-34qwuj0nqx] { font-size: 0.72rem; color: rgba(255, 255, 255, 0.45); padding: 0 1rem 0.15rem; } .admin-signout-button[b-34qwuj0nqx] { background: none; border: none; width: 100%; text-align: left; cursor: pointer; font: inherit; } /* /Components/Layout/FeedbackWidget.razor.rz.scp.css */ .lawn-feedback-root[b-awkg6tv6zb] { position: fixed; right: 0; top: 50%; transform: translateY(-50%); /* Above every in-app overlay (the highest are the game-over / card-inspector backdrops at 9000). The tab is the escape hatch for reporting anything — including bugs you can only see while a modal is open — so it must never end up behind one. The report dialog itself is a native in the top layer, so it still paints above this. */ z-index: 9500; } .lawn-feedback-tab[b-awkg6tv6zb] { writing-mode: vertical-rl; transform: rotate(180deg); background: var(--bs-primary, #0d6efd); color: #fff; border: none; border-radius: 0.4rem 0 0 0.4rem; padding: 0.9rem 0.35rem; font-size: 0.8rem; letter-spacing: 0.04em; cursor: pointer; box-shadow: -2px 0 6px rgba(0, 0, 0, 0.3); padding-right: calc(0.35rem + env(safe-area-inset-right, 0px)); } .lawn-feedback-tab:hover[b-awkg6tv6zb] { filter: brightness(1.1); } /* Shortcut hint, styled to match the chips on the board's action buttons. Inherits the tab's vertical writing mode so it reads with the label. */ .lawn-feedback-tab-key[b-awkg6tv6zb] { /* Logical, not physical: the tab is vertical-rl + rotated, so margin-top would land on the wrong side of the label. */ margin-inline-start: 0.45rem; padding: 0.05rem 0.3rem; border-radius: 0.2rem; background: rgba(0, 0, 0, 0.35); font-size: 0.7rem; font-family: inherit; line-height: 1.4; color: #fff; } @media (max-width: 640px) { .lawn-feedback-tab[b-awkg6tv6zb] { writing-mode: horizontal-tb; transform: none; border-radius: 50%; width: 3rem; height: 3rem; padding: 0; } .lawn-feedback-tab-text[b-awkg6tv6zb] { font-size: 0.65rem; } .lawn-feedback-tab-key[b-awkg6tv6zb] { display: none; } /* no keyboard to press it with */ } .lawn-feedback-dialog[b-awkg6tv6zb] { border: none; border-radius: 0.6rem; padding: 0; width: min(32rem, 92vw); color: var(--bs-body-color, #e9ecef); background: var(--bs-body-bg, #1d2025); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5); } .lawn-feedback-dialog[b-awkg6tv6zb]::backdrop { background: rgba(0, 0, 0, 0.5); } /* When a screenshot is attached, widen the dialog so annotation isn't on a thumbnail. */ .lawn-feedback-dialog.has-shot[b-awkg6tv6zb] { width: min(64rem, 96vw); } .lawn-feedback-form[b-awkg6tv6zb] { padding: 1.1rem 1.25rem 1.25rem; } .lawn-feedback-head[b-awkg6tv6zb] { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; } .lawn-feedback-head h2[b-awkg6tv6zb] { font-size: 1.1rem; margin: 0; } .lawn-feedback-close[b-awkg6tv6zb] { background: none; border: none; color: inherit; font-size: 1.5rem; line-height: 1; cursor: pointer; } .lawn-feedback-field[b-awkg6tv6zb] { display: block; margin-bottom: 0.7rem; } .lawn-feedback-field > span[b-awkg6tv6zb] { display: block; font-size: 0.8rem; margin-bottom: 0.2rem; opacity: 0.85; } .lawn-feedback-field select[b-awkg6tv6zb], .lawn-feedback-field input[b-awkg6tv6zb], .lawn-feedback-field textarea[b-awkg6tv6zb] { width: 100%; padding: 0.45rem 0.55rem; border-radius: 0.35rem; border: 1px solid var(--bs-border-color, #495057); background: var(--bs-tertiary-bg, #2a2e33); color: inherit; font: inherit; resize: vertical; } .lawn-feedback-statusline[b-awkg6tv6zb] { min-height: 1.2rem; margin: 0.4rem 0 0; font-size: 0.85rem; } .lawn-feedback-statusline[data-kind="ok"][b-awkg6tv6zb] { color: var(--bs-success, #4caf50); } .lawn-feedback-statusline[data-kind="error"][b-awkg6tv6zb] { color: var(--bs-danger, #ff5252); } .lawn-feedback-actions[b-awkg6tv6zb] { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.9rem; } .lawn-feedback-actions button[b-awkg6tv6zb] { padding: 0.45rem 1rem; border-radius: 0.35rem; border: 1px solid transparent; cursor: pointer; font: inherit; } .lawn-feedback-cancel[b-awkg6tv6zb] { background: transparent; border-color: var(--bs-border-color, #495057); color: inherit; } .lawn-feedback-submit[b-awkg6tv6zb] { background: var(--bs-primary, #0d6efd); color: #fff; } .lawn-feedback-submit:disabled[b-awkg6tv6zb] { opacity: 0.6; cursor: default; } /* Screenshot capture (Phase 2 — native Screen Capture API) */ .lawn-feedback-shot-actions[b-awkg6tv6zb] { display: flex; gap: 8px; } .lawn-feedback-capture[b-awkg6tv6zb], .lawn-feedback-shot-remove[b-awkg6tv6zb] { background: transparent; border: 1px solid var(--bs-border-color, #495057); color: inherit; border-radius: 6px; padding: 4px 10px; cursor: pointer; font-size: 0.85rem; } .lawn-feedback-capture:hover[b-awkg6tv6zb], .lawn-feedback-shot-remove:hover[b-awkg6tv6zb] { border-color: var(--bs-primary, #0d6efd); } /* States the accepted formats up front, so nobody has to discover them by being rejected — the reporter asked for exactly this. */ .lawn-feedback-hint[b-awkg6tv6zb] { margin: 6px 0 0; font-size: 0.78rem; opacity: 0.7; } /* Attached document (suggestions only) — name echoed back so the reporter can see which file will actually be sent. */ .lawn-feedback-doc-name[b-awkg6tv6zb] { margin: 6px 0 0; font-size: 0.82rem; } /* Both of these are toggled with the `hidden` attribute, and both carry a class that sets `display` — which would otherwise win over the UA's `[hidden]` rule and leave them permanently visible. */ .lawn-feedback-field[hidden][b-awkg6tv6zb], .lawn-feedback-doc-name[hidden][b-awkg6tv6zb] { display: none; } .lawn-feedback-shot-preview[b-awkg6tv6zb] { margin-top: 8px; } .lawn-feedback-shot-tools[b-awkg6tv6zb] { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; } .lawn-feedback-swatch[b-awkg6tv6zb] { width: 20px; height: 20px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; } .lawn-feedback-swatch.is-active[b-awkg6tv6zb] { border-color: var(--bs-body-color, #fff); box-shadow: 0 0 0 1px rgba(0,0,0,0.4); } .lawn-feedback-undo[b-awkg6tv6zb] { margin-left: auto; background: transparent; border: 1px solid var(--bs-border-color, #495057); color: inherit; border-radius: 6px; padding: 2px 8px; cursor: pointer; font-size: 0.8rem; } .lawn-feedback-shot-canvas[b-awkg6tv6zb] { max-width: 100%; max-height: 70vh; /* large enough to annotate, not a thumbnail */ width: auto; height: auto; border: 1px solid var(--bs-border-color, #495057); border-radius: 6px; display: block; margin: 0 auto; touch-action: none; /* let pointer drawing work on touch */ cursor: crosshair; } /* /Components/Layout/GameLayout.razor.rz.scp.css */ .game-shell[b-1fknammzzw] { min-height: 100vh; background: #0a0e17; } #blazor-error-ui[b-1fknammzzw] { color-scheme: light only; background: lightyellow; bottom: 0; box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); box-sizing: border-box; display: none; left: 0; padding: 0.6rem 1.25rem 0.7rem 1.25rem; position: fixed; width: 100%; z-index: 1000; } #blazor-error-ui .dismiss[b-1fknammzzw] { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; } /* /Components/Layout/MainLayout.razor.rz.scp.css */ .page[b-pxdomz4nxa] { position: relative; display: flex; flex-direction: column; } main[b-pxdomz4nxa] { flex: 1; } .sidebar[b-pxdomz4nxa] { background-color: var(--bs-body-bg); border-right: 1px solid var(--bs-border-color); } .top-row[b-pxdomz4nxa] { background-color: var(--bs-tertiary-bg); border-bottom: 1px solid var(--bs-border-color); justify-content: flex-end; height: 3.5rem; display: flex; align-items: center; } .top-row[b-pxdomz4nxa] a, .top-row[b-pxdomz4nxa] .btn-link { white-space: nowrap; margin-left: 1.5rem; text-decoration: none; } .top-row[b-pxdomz4nxa] a:hover, .top-row[b-pxdomz4nxa] .btn-link:hover { text-decoration: underline; } .top-row[b-pxdomz4nxa] a:first-child { overflow: hidden; text-overflow: ellipsis; } @media (max-width: 640.98px) { .top-row[b-pxdomz4nxa] { justify-content: space-between; } .top-row[b-pxdomz4nxa] a, .top-row[b-pxdomz4nxa] .btn-link { margin-left: 0; } } @media (min-width: 641px) { .page[b-pxdomz4nxa] { flex-direction: row; } .sidebar[b-pxdomz4nxa] { width: 250px; height: 100vh; position: sticky; top: 0; } .top-row[b-pxdomz4nxa] { position: sticky; top: 0; z-index: 1; } .top-row.auth[b-pxdomz4nxa] a:first-child { flex: 1; text-align: right; width: 0; } .top-row[b-pxdomz4nxa], article[b-pxdomz4nxa] { padding-left: 2rem !important; padding-right: 1.5rem !important; } } #blazor-error-ui[b-pxdomz4nxa] { color-scheme: light only; background: lightyellow; bottom: 0; box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); box-sizing: border-box; display: none; left: 0; padding: 0.6rem 1.25rem 0.7rem 1.25rem; position: fixed; width: 100%; z-index: 1000; } #blazor-error-ui .dismiss[b-pxdomz4nxa] { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; } /* /Components/Layout/NavMenu.razor.rz.scp.css */ .navbar-toggler[b-1zkc52g5ma] { appearance: none; cursor: pointer; width: 3.5rem; height: 2.5rem; color: var(--bs-body-color); position: absolute; top: 0.5rem; right: 1rem; border: 1px solid var(--bs-border-color); background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28128, 128, 128, 0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem var(--bs-tertiary-bg); } .navbar-toggler:checked[b-1zkc52g5ma] { background-color: var(--bs-tertiary-bg); } .top-row[b-1zkc52g5ma] { min-height: 3.5rem; background-color: var(--bs-tertiary-bg); border-bottom: 1px solid var(--bs-border-color); } .navbar-brand[b-1zkc52g5ma] { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 1.1rem; color: var(--bs-body-color); } /* Wordmark instead of brand text — sized by height to keep the bar's rhythm. */ .navbar-brand img[b-1zkc52g5ma] { height: 30px; width: auto; display: block; } .bi[b-1zkc52g5ma] { display: inline-block; position: relative; width: 1.25rem; height: 1.25rem; margin-right: 0.75rem; top: -1px; background-size: cover; } .bi-house-door-fill-nav-menu[b-1zkc52g5ma] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E"); } .bi-list-nested-nav-menu[b-1zkc52g5ma] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E"); } .nav-item[b-1zkc52g5ma] { font-size: 0.9rem; padding-bottom: 0.5rem; } .nav-item:first-of-type[b-1zkc52g5ma] { padding-top: 1rem; } .nav-item:last-of-type[b-1zkc52g5ma] { padding-bottom: 1rem; } .nav-item[b-1zkc52g5ma] .nav-link { color: var(--bs-body-color); background: none; border: none; border-radius: 4px; height: 3rem; display: flex; align-items: center; line-height: 3rem; width: 100%; } .nav-item[b-1zkc52g5ma] a.active { background-color: var(--bs-primary); color: white; } .nav-item[b-1zkc52g5ma] .nav-link:hover { background-color: var(--bs-tertiary-bg); } .nav-scrollable[b-1zkc52g5ma] { display: none; } .navbar-toggler:checked ~ .nav-scrollable[b-1zkc52g5ma] { display: block; } @media (min-width: 641px) { .navbar-toggler[b-1zkc52g5ma] { display: none; } .nav-scrollable[b-1zkc52g5ma] { display: block; height: calc(100vh - 3.5rem); overflow-y: auto; } } /* /Components/Layout/PlayerLayout.razor.rz.scp.css */ .player-shell[b-9xzao161gq] { min-height: 100vh; display: flex; flex-direction: column; background: linear-gradient(180deg, #0a0e17 0%, #111927 50%, #0d1520 100%); } .player-nav[b-9xzao161gq] { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 2rem; background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255, 255, 255, 0.06); position: sticky; top: 0; z-index: 100; } /* The wordmark replaces the old text brand. Sized by height so the nav bar's rhythm is unchanged; the PNG's surround is transparent, so only the plaque shows against the nav. */ .player-brand[b-9xzao161gq] { display: inline-flex; align-items: center; text-decoration: none; } .player-brand img[b-9xzao161gq] { height: 38px; width: auto; display: block; } .player-brand:hover img[b-9xzao161gq] { filter: brightness(1.12); } .player-nav-links[b-9xzao161gq] { display: flex; gap: 1.5rem; } .player-link[b-9xzao161gq] { color: rgba(255, 255, 255, 0.7); text-decoration: none; font-size: 0.9rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; padding: 0.25rem 0; border-bottom: 2px solid transparent; transition: color 0.2s, border-color 0.2s; } .player-link:hover[b-9xzao161gq] { color: #fff; text-decoration: none; } [b-9xzao161gq] .player-link.active { color: #e2c87e; border-bottom-color: #e2c87e; } .player-main[b-9xzao161gq] { flex: 1; } .player-footer[b-9xzao161gq] { text-align: center; padding: 1.5rem; color: rgba(255, 255, 255, 0.25); font-size: 0.8rem; border-top: 1px solid rgba(255, 255, 255, 0.05); } #blazor-error-ui[b-9xzao161gq] { color-scheme: light only; background: lightyellow; bottom: 0; box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); box-sizing: border-box; display: none; left: 0; padding: 0.6rem 1.25rem 0.7rem 1.25rem; position: fixed; width: 100%; z-index: 1000; } #blazor-error-ui .dismiss[b-9xzao161gq] { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; } /* ── Who you are, and the way out ──────────────────────────────────────────── */ .player-nav-identity[b-9xzao161gq] { margin-left: auto; display: flex; align-items: center; gap: 0.75rem; } .player-who[b-9xzao161gq] { color: rgba(255, 255, 255, 0.75); font-size: 0.9rem; display: inline-flex; align-items: center; gap: 0.4rem; } .player-guest-tag[b-9xzao161gq] { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.1rem 0.35rem; border-radius: 0.25rem; background: rgba(255, 165, 0, 0.2); color: #ffc861; } .player-signout-form[b-9xzao161gq] { margin: 0; } .player-signout[b-9xzao161gq] { background: none; border: none; cursor: pointer; padding: 0; font: inherit; } /* Visually distinct from the player links: this one leaves the game. */ .player-link-admin[b-9xzao161gq] { color: #f0b545; border: 1px solid rgba(240, 181, 69, 0.45); border-radius: 0.3rem; padding: 0.15rem 0.55rem; } /* /Components/Layout/ReconnectModal.razor.rz.scp.css */ .components-reconnect-first-attempt-visible[b-yhxuz65ni4], .components-reconnect-repeated-attempt-visible[b-yhxuz65ni4], .components-reconnect-failed-visible[b-yhxuz65ni4], .components-pause-visible[b-yhxuz65ni4], .components-resume-failed-visible[b-yhxuz65ni4], .components-rejoining-animation[b-yhxuz65ni4] { display: none; } #components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-yhxuz65ni4], #components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-yhxuz65ni4], #components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-yhxuz65ni4], #components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-yhxuz65ni4], #components-reconnect-modal.components-reconnect-retrying[b-yhxuz65ni4], #components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-yhxuz65ni4], #components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-yhxuz65ni4], #components-reconnect-modal.components-reconnect-failed[b-yhxuz65ni4], #components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-yhxuz65ni4] { display: block; } #components-reconnect-modal[b-yhxuz65ni4] { background-color: white; width: 20rem; margin: 20vh auto; padding: 2rem; border: 0; border-radius: 0.5rem; box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3); opacity: 0; transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete; animation: components-reconnect-modal-fadeOutOpacity-b-yhxuz65ni4 0.5s both; &[open] { animation: components-reconnect-modal-slideUp-b-yhxuz65ni4 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-yhxuz65ni4 0.5s ease-in-out 0.3s; animation-fill-mode: both; } } #components-reconnect-modal[b-yhxuz65ni4]::backdrop { background-color: rgba(0, 0, 0, 0.4); animation: components-reconnect-modal-fadeInOpacity-b-yhxuz65ni4 0.5s ease-in-out; opacity: 1; } @keyframes components-reconnect-modal-slideUp-b-yhxuz65ni4 { 0% { transform: translateY(30px) scale(0.95); } 100% { transform: translateY(0); } } @keyframes components-reconnect-modal-fadeInOpacity-b-yhxuz65ni4 { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes components-reconnect-modal-fadeOutOpacity-b-yhxuz65ni4 { 0% { opacity: 1; } 100% { opacity: 0; } } .components-reconnect-container[b-yhxuz65ni4] { display: flex; flex-direction: column; align-items: center; gap: 1rem; } #components-reconnect-modal p[b-yhxuz65ni4] { margin: 0; text-align: center; } #components-reconnect-modal button[b-yhxuz65ni4] { border: 0; background-color: #6b9ed2; color: white; padding: 4px 24px; border-radius: 4px; } #components-reconnect-modal button:hover[b-yhxuz65ni4] { background-color: #3b6ea2; } #components-reconnect-modal button:active[b-yhxuz65ni4] { background-color: #6b9ed2; } .components-rejoining-animation[b-yhxuz65ni4] { position: relative; width: 80px; height: 80px; } .components-rejoining-animation div[b-yhxuz65ni4] { position: absolute; border: 3px solid #0087ff; opacity: 1; border-radius: 50%; animation: components-rejoining-animation-b-yhxuz65ni4 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite; } .components-rejoining-animation div:nth-child(2)[b-yhxuz65ni4] { animation-delay: -0.5s; } @keyframes components-rejoining-animation-b-yhxuz65ni4 { 0% { top: 40px; left: 40px; width: 0; height: 0; opacity: 0; } 4.9% { top: 40px; left: 40px; width: 0; height: 0; opacity: 0; } 5% { top: 40px; left: 40px; width: 0; height: 0; opacity: 1; } 100% { top: 0px; left: 0px; width: 80px; height: 80px; opacity: 0; } } /* /Components/Pages/Account/ProfileChooser.razor.rz.scp.css */ .profile-chooser[b-pr74vcgn4w] { max-width: 1400px; margin: 0 auto; padding: 2rem 1.5rem 3rem; } .chooser-header h1[b-pr74vcgn4w] { font-size: 2rem; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 0.25rem; } .chooser-header p[b-pr74vcgn4w] { color: rgba(255, 255, 255, 0.6); margin-bottom: 1.5rem; } .chooser-alert[b-pr74vcgn4w] { border-radius: 0.5rem; padding: 0.75rem 1rem; margin-bottom: 1.25rem; border: 1px solid transparent; } .chooser-alert-error[b-pr74vcgn4w] { background: rgba(220, 53, 69, 0.12); border-color: rgba(220, 53, 69, 0.5); color: #ffb3ba; } .chooser-alert-notice[b-pr74vcgn4w] { background: rgba(13, 110, 253, 0.12); border-color: rgba(13, 110, 253, 0.5); color: #bcd7ff; } .chooser-suggestions[b-pr74vcgn4w] { margin-top: 0.4rem; font-size: 0.9rem; } .chooser-grid[b-pr74vcgn4w] { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.25rem; align-items: stretch; } .chooser-card[b-pr74vcgn4w] { display: flex; flex-direction: column; background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 0.75rem; padding: 1.5rem; } .chooser-card-guest[b-pr74vcgn4w] { border-color: rgba(255, 165, 0, 0.4); } .chooser-card h2[b-pr74vcgn4w] { font-size: 1.05rem; text-transform: uppercase; letter-spacing: 0.06em; display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; } .chooser-icon[b-pr74vcgn4w] { font-size: 1.35rem; } .chooser-lede[b-pr74vcgn4w] { color: rgba(255, 255, 255, 0.65); font-size: 0.92rem; margin-bottom: 1.25rem; } .chooser-card label[b-pr74vcgn4w] { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.55); margin-bottom: 0.3rem; } .chooser-card input[type="text"][b-pr74vcgn4w], .chooser-card input[type="email"][b-pr74vcgn4w], .chooser-card input[type="password"][b-pr74vcgn4w] { width: 100%; padding: 0.6rem 0.75rem; border-radius: 0.4rem; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(0, 0, 0, 0.3); color: inherit; margin-bottom: 0.25rem; } .chooser-card small[b-pr74vcgn4w] { display: block; color: rgba(255, 255, 255, 0.4); font-size: 0.75rem; margin-bottom: 0.9rem; } .chooser-button[b-pr74vcgn4w] { width: 100%; padding: 0.7rem 1rem; border: none; border-radius: 0.4rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; cursor: pointer; color: #fff; } .chooser-button-create[b-pr74vcgn4w] { background: #2f7d32; } .chooser-button-login[b-pr74vcgn4w] { background: #1b5fb0; } .chooser-button-guest[b-pr74vcgn4w] { background: #d2860b; } .chooser-button:hover[b-pr74vcgn4w] { filter: brightness(1.12); } .chooser-perks[b-pr74vcgn4w] { list-style: none; padding: 0; margin: 1.1rem 0 0; font-size: 0.85rem; } /* Pushes the perk list to the bottom so all three cards close on the same line. */ .chooser-card > .chooser-perks[b-pr74vcgn4w] { margin-top: auto; padding-top: 1.1rem; } .chooser-perks li[b-pr74vcgn4w] { padding-left: 1.35rem; position: relative; margin-bottom: 0.35rem; color: rgba(255, 255, 255, 0.75); } .chooser-perks li[b-pr74vcgn4w]::before { content: "\2713"; position: absolute; left: 0; color: #57b85b; } /* Locked items read as unavailable rather than as things you're being offered. */ .chooser-perks-locked li[b-pr74vcgn4w] { color: rgba(255, 255, 255, 0.45); } .chooser-perks-locked li[b-pr74vcgn4w]::before { content: "\1F512"; color: rgba(255, 255, 255, 0.4); } .guest-warning[b-pr74vcgn4w] { border: 1px solid rgba(255, 165, 0, 0.55); background: rgba(255, 165, 0, 0.1); color: #ffc861; border-radius: 0.4rem; padding: 0.7rem 0.85rem; font-size: 0.83rem; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 1.1rem; } .guest-columns[b-pr74vcgn4w] { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.25rem; } .guest-heading[b-pr74vcgn4w] { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.3rem; } .guest-heading-yes[b-pr74vcgn4w] { color: #57b85b; } .guest-heading-no[b-pr74vcgn4w] { color: #e2707a; } .avatar-picker[b-pr74vcgn4w] { border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 0.5rem; padding: 0.75rem; margin-bottom: 1rem; } .avatar-picker legend[b-pr74vcgn4w] { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.55); padding: 0 0.4rem; } .avatar-picker-empty[b-pr74vcgn4w] { font-size: 0.8rem; color: rgba(255, 255, 255, 0.45); margin: 0; } .avatar-options[b-pr74vcgn4w] { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 0.6rem; } .avatar-option[b-pr74vcgn4w] { text-align: center; cursor: pointer; margin: 0; } .avatar-option img[b-pr74vcgn4w] { width: 100%; aspect-ratio: 1 / 1; border-radius: 50%; object-fit: cover; border: 2px solid transparent; } /* The radio itself is the accessible control; the image is its visible state. */ .avatar-option input[b-pr74vcgn4w] { position: absolute; opacity: 0; width: 0; height: 0; } .avatar-option input:checked + img[b-pr74vcgn4w] { border-color: #d2860b; } .avatar-option input:focus-visible + img[b-pr74vcgn4w] { outline: 2px solid #7fb3ff; outline-offset: 2px; } .avatar-option-name[b-pr74vcgn4w] { display: block; font-size: 0.68rem; color: rgba(255, 255, 255, 0.5); margin-top: 0.2rem; } .chooser-forgot[b-pr74vcgn4w] { margin-top: 0.9rem; } .chooser-forgot summary[b-pr74vcgn4w] { color: #7fb3ff; cursor: pointer; font-size: 0.82rem; list-style-position: inside; } .chooser-forgot summary:hover[b-pr74vcgn4w] { text-decoration: underline; } .chooser-forgot form[b-pr74vcgn4w] { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid rgba(255, 255, 255, 0.12); } .chooser-button-reset[b-pr74vcgn4w] { background: rgba(255, 255, 255, 0.12); font-size: 0.78rem; } .chooser-footer[b-pr74vcgn4w] { margin-top: 2rem; text-align: center; color: rgba(255, 255, 255, 0.45); font-size: 0.85rem; } .visually-hidden[b-pr74vcgn4w] { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } @media (max-width: 700px) { .guest-columns[b-pr74vcgn4w] { grid-template-columns: 1fr; } } /* /Components/Pages/Account/ProfileHub.razor.rz.scp.css */ .profile-hub[b-q1km2hwu31] { display: grid; grid-template-columns: 280px 1fr; gap: 1.5rem; max-width: 1300px; margin: 0 auto; padding: 2rem 1.5rem 3rem; } .hub-alert[b-q1km2hwu31] { grid-column: 1 / -1; border: 1px solid rgba(13, 110, 253, 0.5); background: rgba(13, 110, 253, 0.12); border-radius: 0.5rem; padding: 1rem; } .hub-sidebar[b-q1km2hwu31] { background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 0.75rem; padding: 1.5rem 1.25rem; text-align: center; } .hub-avatar[b-q1km2hwu31] { width: 120px; height: 120px; margin: 0 auto 0.9rem; border-radius: 50%; overflow: hidden; border: 3px solid rgba(210, 134, 11, 0.7); background: rgba(0, 0, 0, 0.35); display: flex; align-items: center; justify-content: center; } .hub-avatar img[b-q1km2hwu31] { width: 100%; height: 100%; object-fit: cover; } .hub-avatar-initial[b-q1km2hwu31] { font-size: 3rem; font-weight: 700; color: rgba(255, 255, 255, 0.5); } /* ── Changing your picture ────────────────────────────────────────────────── */ .hub-avatar-change[b-q1km2hwu31] { display: block; margin: -0.4rem auto 0.9rem; padding: 0.2rem 0.7rem; border: 1px solid rgba(210, 134, 11, 0.55); border-radius: 999px; background: rgba(0, 0, 0, 0.3); color: #e2c87e; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; } .hub-avatar-change:hover[b-q1km2hwu31], .hub-avatar-change:focus-visible[b-q1km2hwu31] { background: rgba(210, 134, 11, 0.18); } .avatar-modal-backdrop[b-q1km2hwu31] { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 1.5rem; background: rgba(0, 0, 0, 0.68); } .avatar-modal[b-q1km2hwu31] { width: min(680px, 100%); max-height: 82vh; overflow-y: auto; padding: 1.25rem 1.4rem 1.1rem; border-radius: 14px; border: 1px solid rgba(210, 134, 11, 0.45); background: linear-gradient(180deg, #131a21, #0b1116); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6); } .avatar-modal-title[b-q1km2hwu31] { margin: 0 0 0.9rem; font-size: 1.15rem; } .avatar-modal-tier[b-q1km2hwu31] { margin: 1rem 0 0.5rem; font-size: 0.8rem; } .avatar-modal-options[b-q1km2hwu31] { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 0.7rem; } .avatar-modal-option[b-q1km2hwu31] { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; padding: 0.4rem 0.3rem; border: 2px solid transparent; border-radius: 10px; background: rgba(255, 255, 255, 0.04); color: inherit; cursor: pointer; } .avatar-modal-option img[b-q1km2hwu31] { width: 68px; height: 68px; border-radius: 50%; object-fit: cover; background: rgba(0, 0, 0, 0.35); } .avatar-modal-option-name[b-q1km2hwu31] { font-size: 0.68rem; text-align: center; /* Long names must not stretch the grid column and reflow the whole picker. */ max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: rgba(255, 255, 255, 0.72); } .avatar-modal-option:hover[b-q1km2hwu31], .avatar-modal-option:focus-visible[b-q1km2hwu31] { border-color: rgba(210, 134, 11, 0.6); } /* The one you are wearing stays obvious while the picker is open. */ .avatar-modal-option.is-current[b-q1km2hwu31] { border-color: #e2c87e; background: rgba(210, 134, 11, 0.16); } .avatar-modal-actions[b-q1km2hwu31] { display: flex; align-items: center; gap: 0.6rem; margin-top: 1.2rem; padding-top: 0.9rem; border-top: 1px solid rgba(255, 255, 255, 0.1); } .avatar-modal-remove[b-q1km2hwu31], .avatar-modal-close[b-q1km2hwu31] { padding: 0.4rem 0.9rem; border-radius: 8px; font-size: 0.8rem; font-weight: 700; cursor: pointer; } .avatar-modal-remove[b-q1km2hwu31] { border: 1px solid rgba(248, 81, 73, 0.5); background: transparent; color: #ff9b95; } .avatar-modal-close[b-q1km2hwu31] { margin-left: auto; border: 1px solid rgba(210, 134, 11, 0.55); background: rgba(210, 134, 11, 0.2); color: #f2dfa8; } /* Same tier colours as the admin library and the card rarity dot. */ .rarity-chip[b-q1km2hwu31] { display: inline-block; padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); } .rarity-chip.rarity-common[b-q1km2hwu31] { background: #888; } .rarity-chip.rarity-uncommon[b-q1km2hwu31] { background: #28a745; } .rarity-chip.rarity-rare[b-q1km2hwu31] { background: #007bff; } .rarity-chip.rarity-unique[b-q1km2hwu31] { background: linear-gradient(135deg, #c264ff, #7d2fd0); } .rarity-chip.rarity-legendary[b-q1km2hwu31] { background: linear-gradient(135deg, #ffd700, #ffaa00); } .hub-name[b-q1km2hwu31] { font-size: 1.4rem; margin: 0 0 0.2rem; } .hub-level[b-q1km2hwu31] { font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: #d2860b; margin-bottom: 0.6rem; } .hub-level-guest[b-q1km2hwu31] { color: rgba(255, 255, 255, 0.5); } .hub-xp-bar[b-q1km2hwu31] { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.12); overflow: hidden; } .hub-xp-fill[b-q1km2hwu31] { height: 100%; background: linear-gradient(90deg, #d2860b, #f0b545); } .hub-xp-text[b-q1km2hwu31] { font-size: 0.78rem; color: rgba(255, 255, 255, 0.55); margin-top: 0.35rem; } .hub-xp-remaining[b-q1km2hwu31] { color: rgba(255, 255, 255, 0.35); } .hub-guest-warning[b-q1km2hwu31] { font-size: 0.8rem; color: #ffc861; margin: 0.75rem 0; } .hub-nav[b-q1km2hwu31] { margin-top: 1.5rem; text-align: left; display: flex; flex-direction: column; gap: 0.15rem; } .hub-nav-item[b-q1km2hwu31] { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.65rem; border-radius: 0.35rem; color: rgba(255, 255, 255, 0.8); text-decoration: none; font-size: 0.9rem; } .hub-nav-item:hover[b-q1km2hwu31] { background: rgba(255, 255, 255, 0.06); } .hub-nav-item.active[b-q1km2hwu31] { background: rgba(210, 134, 11, 0.18); color: #f0b545; } /* Locked rows are visible but plainly unavailable — a roadmap, not an offer. */ .hub-nav-item.locked[b-q1km2hwu31] { color: rgba(255, 255, 255, 0.32); cursor: not-allowed; } .hub-nav-item.locked:hover[b-q1km2hwu31] { background: none; } .hub-lock[b-q1km2hwu31] { margin-left: auto; font-size: 0.75rem; } .hub-main[b-q1km2hwu31] { display: flex; flex-direction: column; gap: 1.25rem; } .hub-panel[b-q1km2hwu31] { background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 0.75rem; padding: 1.5rem; } .hub-panel h2[b-q1km2hwu31] { font-size: 1.05rem; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.4rem; } .hub-panel-lede[b-q1km2hwu31] { color: rgba(255, 255, 255, 0.6); font-size: 0.9rem; margin-bottom: 1.1rem; } .hub-stats[b-q1km2hwu31] { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1rem; margin-bottom: 1.25rem; } .hub-stat[b-q1km2hwu31] { background: rgba(0, 0, 0, 0.25); border-radius: 0.5rem; padding: 0.9rem; text-align: center; } .hub-stat-value[b-q1km2hwu31] { font-size: 1.6rem; font-weight: 700; } .hub-stat-label[b-q1km2hwu31] { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.45); } .hub-cta[b-q1km2hwu31] { display: inline-block; padding: 0.6rem 1.1rem; border-radius: 0.4rem; background: #2f7d32; color: #fff; text-decoration: none; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.82rem; } .hub-panel-danger[b-q1km2hwu31] { border-color: rgba(220, 53, 69, 0.4); } .hub-danger-button[b-q1km2hwu31] { padding: 0.6rem 1.1rem; border-radius: 0.4rem; border: 1px solid rgba(220, 53, 69, 0.7); background: rgba(220, 53, 69, 0.15); color: #ffb3ba; font-weight: 700; cursor: pointer; } .hub-danger-button:hover:not(:disabled)[b-q1km2hwu31] { background: rgba(220, 53, 69, 0.3); } /* Disabled until the typed name matches — dimmed and inert so the gate reads as deliberate rather than as a button that failed to work. */ .hub-danger-button:disabled[b-q1km2hwu31] { opacity: 0.45; cursor: not-allowed; } .hub-confirm-label[b-q1km2hwu31] { display: block; margin-bottom: 0.35rem; font-size: 0.9rem; } .hub-confirm-input[b-q1km2hwu31] { width: 100%; max-width: 18rem; padding: 0.5rem 0.7rem; border-radius: 0.4rem; border: 1px solid rgba(220, 53, 69, 0.45); background: rgba(0, 0, 0, 0.25); color: inherit; font-family: ui-monospace, monospace; } .hub-confirm-input:focus[b-q1km2hwu31] { outline: 2px solid rgba(220, 53, 69, 0.7); outline-offset: 1px; } .hub-confirm-help[b-q1km2hwu31] { margin: 0.35rem 0 0.7rem; font-size: 0.8rem; opacity: 0.7; } .hub-danger-error[b-q1km2hwu31] { margin-bottom: 0.7rem; padding: 0.5rem 0.7rem; border-radius: 0.4rem; border: 1px solid rgba(220, 53, 69, 0.6); background: rgba(220, 53, 69, 0.18); } @media (max-width: 900px) { .profile-hub[b-q1km2hwu31] { grid-template-columns: 1fr; } } /* /Components/Pages/Account/ResetPassword.razor.rz.scp.css */ .reset-page[b-usszaep26u] { max-width: 460px; margin: 0 auto; padding: 3rem 1.5rem; } .reset-page h1[b-usszaep26u] { font-size: 1.6rem; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.5rem; } .reset-lede[b-usszaep26u] { color: rgba(255, 255, 255, 0.65); margin-bottom: 1.5rem; } .reset-alert[b-usszaep26u] { border: 1px solid rgba(220, 53, 69, 0.5); background: rgba(220, 53, 69, 0.12); color: #ffb3ba; border-radius: 0.5rem; padding: 0.75rem 1rem; margin-bottom: 1.25rem; } .reset-page label[b-usszaep26u] { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.55); margin-bottom: 0.3rem; } .reset-page input[type="password"][b-usszaep26u] { width: 100%; padding: 0.6rem 0.75rem; border-radius: 0.4rem; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(0, 0, 0, 0.3); color: inherit; } .reset-page small[b-usszaep26u] { display: block; color: rgba(255, 255, 255, 0.4); font-size: 0.75rem; margin: 0.25rem 0 1rem; } .reset-button[b-usszaep26u] { width: 100%; padding: 0.7rem 1rem; border: none; border-radius: 0.4rem; background: #1b5fb0; color: #fff; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; cursor: pointer; } .reset-note[b-usszaep26u] { margin-top: 1.25rem; font-size: 0.8rem; color: rgba(255, 255, 255, 0.4); } /* /Components/Pages/Admin/AvatarManager.razor.rz.scp.css */ /* ── Page header ──────────────────────────────────────────────────────────── */ /* The window is the scroller here (the admin sidebar is itself sticky against it), so sticking the header to top: 0 needs nothing else. It carries the page background and sits above the grid, or the avatar cards would scroll straight through it. The negative top margin swallows .content's padding, so the header meets the top of the viewport rather than leaving a strip of page showing. */ .avatar-page-head[b-dn3ll7fwk6] { position: sticky; top: 0; z-index: 3; margin-top: -1.1rem; padding: 1.1rem 0 0.75rem; background: var(--bs-body-bg); border-bottom: 1px solid rgba(255, 255, 255, 0.12); } /* ── One library per rarity tier ──────────────────────────────────────────── */ .avatar-tier[b-dn3ll7fwk6], .ai-portraits[b-dn3ll7fwk6] { margin-bottom: 1.75rem; } .avatar-tier-head[b-dn3ll7fwk6] { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.6rem; padding-bottom: 0.35rem; border-bottom: 1px solid rgba(255, 255, 255, 0.12); font-size: 1rem; } .avatar-tier-count[b-dn3ll7fwk6] { font-size: 0.78rem; font-weight: 700; color: rgba(255, 255, 255, 0.55); } .avatar-tier-empty[b-dn3ll7fwk6] { margin: 0; font-size: 0.85rem; color: rgba(255, 255, 255, 0.4); } /* Same tier colours as the card rarity dot, as a readable chip. Legendary and Unique carry a gradient, so the text sits on a dark shadow to stay legible on gold. */ .rarity-chip[b-dn3ll7fwk6] { display: inline-block; padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); } /* The AI slots are not a rarity, so they get their own heading and chip rather than borrowing the tier ones — a neutral steel chip, visually apart from the five tiers below. */ .ai-portraits-head[b-dn3ll7fwk6] { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.6rem; padding-bottom: 0.35rem; border-bottom: 1px solid rgba(255, 255, 255, 0.12); font-size: 1rem; } .ai-chip[b-dn3ll7fwk6] { display: inline-block; padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); background: linear-gradient(135deg, #4a5b6b, #263340); } .ai-portraits-note[b-dn3ll7fwk6] { margin: 0 0 0.75rem; font-size: 0.85rem; color: rgba(255, 255, 255, 0.55); } .ai-portrait-fallback[b-dn3ll7fwk6] { font-size: 0.85rem; color: rgba(255, 255, 255, 0.4); } /* Fixed slots: the difficulty names the card, and there is no editable name field. */ .ai-portrait-name[b-dn3ll7fwk6] { margin-bottom: 0.6rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.85rem; } .rarity-chip.rarity-common[b-dn3ll7fwk6] { background: #888; } .rarity-chip.rarity-uncommon[b-dn3ll7fwk6] { background: #28a745; } .rarity-chip.rarity-rare[b-dn3ll7fwk6] { background: #007bff; } .rarity-chip.rarity-unique[b-dn3ll7fwk6] { background: linear-gradient(135deg, #c264ff, #7d2fd0); } .rarity-chip.rarity-legendary[b-dn3ll7fwk6] { background: linear-gradient(135deg, #ffd700, #ffaa00); } .avatar-grid[b-dn3ll7fwk6] { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; } .avatar-card[b-dn3ll7fwk6] { border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 0.5rem; padding: 0.85rem; background: rgba(255, 255, 255, 0.03); } /* An avatar players cannot pick yet reads as dimmed rather than absent, so the admin can see it exists and what it still needs. */ .avatar-card-inactive[b-dn3ll7fwk6] { opacity: 0.6; border-style: dashed; } /* A name clash is reported on the card that caused it — see the markup comment. */ .avatar-name-error[b-dn3ll7fwk6] { font-size: 0.8rem; color: #ff8b81; } .avatar-preview[b-dn3ll7fwk6] { width: 100%; aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden; margin-bottom: 0.75rem; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.35); border: 2px solid rgba(255, 255, 255, 0.2); } .avatar-preview img[b-dn3ll7fwk6] { width: 100%; height: 100%; object-fit: cover; } .avatar-placeholder[b-dn3ll7fwk6] { font-size: 2.5rem; font-weight: 700; color: rgba(255, 255, 255, 0.45); text-transform: uppercase; } /* /Components/Pages/Admin/CardEditor.razor.rz.scp.css */ .card-preview-wrapper[b-zwm7elq5do] { max-width: 240px; } .card-preview-frame[b-zwm7elq5do] { width: 100%; aspect-ratio: 63 / 88; border-radius: 9px; border: 2px solid rgba(0, 0, 0, 0.4); overflow: hidden; background: #f5f0e6; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); position: relative; } .card-preview-image[b-zwm7elq5do] { width: 100%; height: 100%; object-fit: contain; display: block; } /* When the painted card image is loaded, strip the rectangular chrome so transparent corners/cutouts in the card art aren't filled with beige. The placeholder state keeps its full frame so designers see the upload target clearly. */ .card-preview-frame:has(.card-preview-image)[b-zwm7elq5do] { background: transparent; border-color: transparent; box-shadow: none; } .card-preview-frame:has(.card-preview-image) .card-preview-image[b-zwm7elq5do] { filter: drop-shadow(0 4px 12px rgba(0,0,0,0.3)); } .card-preview-placeholder[b-zwm7elq5do] { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 12px; text-align: center; color: #555; background: repeating-linear-gradient( 45deg, #f5f0e6 0, #f5f0e6 12px, #ece6d8 12px, #ece6d8 14px ); } .card-preview-icon[b-zwm7elq5do] { font-size: 3rem; opacity: 0.35; } .card-preview-name[b-zwm7elq5do] { font-size: 1rem; font-weight: 700; color: #333; word-break: break-word; } .card-preview-type[b-zwm7elq5do] { font-size: 0.65rem; font-weight: 800; letter-spacing: 1px; color: #888; text-transform: uppercase; } .card-preview-hint[b-zwm7elq5do] { font-size: 0.7rem; font-style: italic; color: #999; margin-top: auto; } /* /Components/Pages/Admin/IconManager.razor.rz.scp.css */ /* ── Page header ──────────────────────────────────────────────────────────── */ /* Pinned, same as the avatar library: eight sections means the coverage count and the top of the page are a long scroll away otherwise. The window is the scroller on this layout, so top: 0 needs nothing else; the header just has to carry the page background and sit above the grids. */ .icon-page-head[b-g2pvfb9n1b] { position: sticky; top: 0; z-index: 3; margin-top: -1.1rem; padding: 1.1rem 0 0.75rem; background: var(--bs-body-bg); border-bottom: 1px solid rgba(255, 255, 255, 0.12); } /* The number that answers "how far are the artists". Deliberately in the pinned header, so it is readable from anywhere on the page rather than only at the top. */ .icon-coverage[b-g2pvfb9n1b] { flex: 0 0 auto; padding: 0.4rem 0.9rem; border-radius: 0.5rem; border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.04); white-space: nowrap; } .icon-coverage b[b-g2pvfb9n1b] { font-size: 1.35rem; } .icon-coverage span[b-g2pvfb9n1b] { font-size: 0.8rem; color: rgba(255, 255, 255, 0.55); } /* ── One section per slot ─────────────────────────────────────────────────── */ .icon-slot[b-g2pvfb9n1b] { margin-bottom: 1.75rem; } .icon-slot-head[b-g2pvfb9n1b] { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.4rem; padding-bottom: 0.35rem; border-bottom: 1px solid rgba(255, 255, 255, 0.12); font-size: 1rem; } .icon-slot-chip[b-g2pvfb9n1b] { display: inline-block; padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); background: linear-gradient(135deg, #4a5b6b, #263340); } .icon-slot-count[b-g2pvfb9n1b] { font-size: 0.78rem; font-weight: 700; color: rgba(255, 255, 255, 0.55); } .icon-slot-note[b-g2pvfb9n1b] { margin: 0 0 0.75rem; font-size: 0.85rem; color: rgba(255, 255, 255, 0.55); } /* ── Icon cards ───────────────────────────────────────────────────────────── */ /* Narrower than the avatar grid: an icon is a small square, and eight sections of avatar-sized cards would make the page enormous. */ .icon-grid[b-g2pvfb9n1b] { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0.75rem; } .icon-card[b-g2pvfb9n1b] { border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 0.5rem; padding: 0.7rem; background: rgba(255, 255, 255, 0.03); } /* An undrawn meaning reads as outstanding work rather than as a broken card. */ .icon-card-empty[b-g2pvfb9n1b] { border-style: dashed; border-color: rgba(255, 212, 121, 0.35); } /* Square, on a dark plate — icons are drawn for dark card frames, so a light preview would flatter artwork that will not survive on the card itself. */ .icon-preview[b-g2pvfb9n1b] { width: 100%; aspect-ratio: 1 / 1; border-radius: 0.4rem; overflow: hidden; margin-bottom: 0.6rem; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.45); border: 1px solid rgba(255, 255, 255, 0.12); } .icon-preview img[b-g2pvfb9n1b] { width: 100%; height: 100%; object-fit: contain; } /* What the game itself falls back to while a meaning is undrawn: its own name. */ .icon-missing[b-g2pvfb9n1b] { padding: 0 0.4rem; text-align: center; font-size: 0.8rem; line-height: 1.25; color: rgba(255, 255, 255, 0.4); } .icon-name[b-g2pvfb9n1b] { margin-bottom: 0.5rem; font-weight: 700; font-size: 0.85rem; letter-spacing: 0.02em; } .icon-fallback-note[b-g2pvfb9n1b] { font-size: 0.78rem; color: rgba(255, 255, 255, 0.4); } /* ── Rarity: the one slot that carries meaning beyond a picture ────────────── */ /* Rank and booster-pack chance are edited where the tier list already is, rather than on a page of their own — an operator setting up rarities is looking at exactly these cards. */ .rarity-fields[b-g2pvfb9n1b] { padding: 0.5rem 0 0.1rem; margin-bottom: 0.5rem; border-top: 1px dashed rgba(255, 255, 255, 0.15); } /* The sentence a player will see, when it is still being generated from the percentage rather than typed. Shown under the field so it is obvious what blank means. */ .rarity-explanation[b-g2pvfb9n1b] { margin-bottom: 0.5rem; font-size: 0.78rem; font-style: italic; color: rgba(255, 255, 255, 0.45); } /* /Components/Pages/Decks/DeckEditor.razor.rz.scp.css */ /* === Hero-pick phase ===================================================== */ .hero-pick-grid[b-zvasezfd60] { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; margin-top: 20px; } .hero-pick-tile[b-zvasezfd60] { background: var(--bs-body-bg); border: 2px solid rgba(255,255,255,0.12); border-radius: 10px; padding: 12px; text-align: center; cursor: pointer; transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease; } .hero-pick-tile:hover[b-zvasezfd60] { border-color: #28a745; transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0,0,0,0.18); } .hero-pick-portrait[b-zvasezfd60] { width: 100%; aspect-ratio: 63 / 88; border-radius: 6px; background: linear-gradient(135deg, #2d5016, #4a7c23); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.7); font-size: 2.2rem; font-weight: 800; overflow: hidden; margin-bottom: 8px; } .hero-pick-portrait img[b-zvasezfd60] { width: 100%; height: 100%; object-fit: cover; } .hero-pick-name[b-zvasezfd60] { font-weight: 700; } .hero-pick-title[b-zvasezfd60] { font-size: 0.75rem; color: var(--bs-secondary-color); margin-top: 2px; } /* === Editor phase ======================================================== */ .deck-editor-shell[b-zvasezfd60] { display: flex; flex-direction: column; height: calc(100vh - 120px); /* leave room for the player nav + footer */ padding: 12px 18px; gap: 12px; } .deck-editor-header[b-zvasezfd60] { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; } .header-left[b-zvasezfd60] { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; } .header-right[b-zvasezfd60] { display: flex; align-items: center; gap: 8px; } .deck-name-input[b-zvasezfd60] { font-size: 1.4rem; font-weight: 700; background: transparent; border: 1px solid transparent; border-bottom: 1px dashed rgba(255,255,255,0.25); padding: 4px 6px; min-width: 200px; flex: 1; } .deck-name-input:focus[b-zvasezfd60] { outline: none; border-color: rgba(40, 167, 69, 0.5); background: rgba(40, 167, 69, 0.05); } .deck-hero-pill[b-zvasezfd60] { display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.06); border-radius: 16px; padding: 4px 12px 4px 4px; font-weight: 600; font-size: 0.85rem; } .deck-hero-pill img[b-zvasezfd60] { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; } .count-pill[b-zvasezfd60] { padding: 4px 12px; border-radius: 14px; font-weight: 700; font-size: 0.85rem; } .count-good[b-zvasezfd60] { background: rgba(40, 167, 69, 0.18); color: #7ee2a0; } .count-bad[b-zvasezfd60] { background: rgba(220, 53, 69, 0.18); color: #ff9aa2; } .save-status[b-zvasezfd60] { font-size: 0.75rem; color: var(--bs-secondary-color); font-style: italic; } /* Two-pane body */ .deck-editor-body[b-zvasezfd60] { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; flex: 1; min-height: 0; } .pool-pane[b-zvasezfd60], .deck-pane[b-zvasezfd60] { display: flex; flex-direction: column; /* Lifted a touch off the body and outlined in white-alpha. These were rgba(0,0,0,…) from when the editor rendered on a light surface; on the always-dark theme a black border is invisible and the pane background was byte-identical to the page, so the deck pane — the drop target — could not be seen at all. Reported as "nowhere to drop". */ background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 8px; min-height: 0; } /* Drop cues for dragging a card from the pool into the deck. .drop-ready marks the pane as a valid destination the moment a drag starts (so it's discoverable without dropping first); .drop-over confirms the pointer is over it. */ .deck-pane.drop-ready[b-zvasezfd60] { border-color: rgba(47, 190, 84, 0.55); transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease; } .deck-pane.drop-over[b-zvasezfd60] { border-color: #2fbe54; box-shadow: 0 0 0 3px rgba(47, 190, 84, 0.25); background-color: rgba(47, 190, 84, 0.06); } .card-tile[draggable="true"][b-zvasezfd60] { cursor: grab; } /* Empty-deck drop target. Fills the pane so the whole area reads as droppable rather than leaving a blank rectangle with a line of muted text in it. */ .deck-dropzone[b-zvasezfd60] { flex: 1; margin: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 2px dashed rgba(255, 255, 255, 0.18); border-radius: 10px; color: rgba(255, 255, 255, 0.55); text-align: center; padding: 1rem; } .deck-dropzone-icon[b-zvasezfd60] { font-size: 2rem; line-height: 1; opacity: 0.55; } .deck-dropzone-title[b-zvasezfd60] { font-weight: 700; font-size: 1.05rem; color: rgba(255, 255, 255, 0.8); } .deck-dropzone-hint[b-zvasezfd60] { font-size: 0.85rem; opacity: 0.75; } .deck-pane.drop-ready .deck-dropzone[b-zvasezfd60] { border-color: rgba(47, 190, 84, 0.65); color: rgba(255, 255, 255, 0.85); } .pool-filters[b-zvasezfd60] { display: flex; flex-wrap: wrap; /* four controls now — wrap rather than crush them */ gap: 8px; padding: 10px; border-bottom: 1px solid rgba(255,255,255,0.09); } /* All four controls share ONE row. Bootstrap sets width:100% on .form-control and .form-select, which with an auto flex-basis made each one claim a full line and stack vertically — hence "side by side" being asked for. Override the width and give each an explicit basis; search gets a double share of the slack. They still wrap onto a second line if the pane gets genuinely narrow. */ .pool-filters > input[b-zvasezfd60], .pool-filters > select[b-zvasezfd60] { width: auto; flex: 1 1 8rem; min-width: 6.5rem; } .pool-filters > input[b-zvasezfd60] { flex: 2 1 12rem; } .pool-list[b-zvasezfd60], .deck-list[b-zvasezfd60] { flex: 1; overflow-y: auto; padding: 4px; } .deck-pane-title[b-zvasezfd60] { margin: 0; padding: 12px; border-bottom: 1px solid rgba(255,255,255,0.09); font-size: 1rem; } .pool-row[b-zvasezfd60], .deck-row[b-zvasezfd60] { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; border-bottom: 1px solid rgba(255,255,255,0.06); gap: 8px; } .pool-row:hover[b-zvasezfd60], .deck-row:hover[b-zvasezfd60] { background: rgba(255,255,255,0.05); } .pool-row.illegal[b-zvasezfd60] { opacity: 0.45; cursor: not-allowed; } .pool-row-main[b-zvasezfd60], .deck-row-main[b-zvasezfd60] { flex: 1; min-width: 0; } .pool-row-name[b-zvasezfd60], .deck-row-name[b-zvasezfd60] { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pool-row-meta[b-zvasezfd60], .deck-row-meta[b-zvasezfd60] { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; font-size: 0.7rem; } .type-chip[b-zvasezfd60] { background: rgba(255,255,255,0.10); padding: 1px 6px; border-radius: 3px; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 700; } .cost-chip[b-zvasezfd60] { padding: 1px 6px; border-radius: 3px; color: white; font-weight: 700; } .cost-chip.res-credits[b-zvasezfd60] { background: #d4a017; color: #000; } .cost-chip.res-tech[b-zvasezfd60] { background: #5e9cf5; } .cost-chip.res-scrap[b-zvasezfd60] { background: #8b8b8b; } .cost-chip.res-chemicals[b-zvasezfd60] { background: #9b59b6; } .cost-chip.res-energy[b-zvasezfd60] { background: #f1c40f; color: #000; } .hero-restrict-chip[b-zvasezfd60] { background: rgba(217, 119, 6, 0.15); color: #e8b464; padding: 1px 6px; border-radius: 3px; font-weight: 600; } .pool-row-actions[b-zvasezfd60], .deck-row-actions[b-zvasezfd60] { display: flex; align-items: center; gap: 6px; } .in-deck-pill[b-zvasezfd60], .qty-pill[b-zvasezfd60] { background: rgba(40, 167, 69, 0.18); color: #7ee2a0; padding: 2px 8px; border-radius: 10px; font-weight: 700; font-size: 0.75rem; min-width: 32px; text-align: center; } /* Delete confirm modal */ .modal-backdrop-simple[b-zvasezfd60] { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 1050; display: flex; align-items: center; justify-content: center; padding: 16px; } .modal-box[b-zvasezfd60] { background: var(--bs-body-bg); border-radius: 8px; padding: 20px; max-width: 400px; width: 100%; box-shadow: 0 8px 32px rgba(0,0,0,0.4); } @media (max-width: 768px) { .deck-editor-body[b-zvasezfd60] { grid-template-columns: 1fr; } .deck-editor-shell[b-zvasezfd60] { height: auto; } .pool-pane[b-zvasezfd60], .deck-pane[b-zvasezfd60] { height: 50vh; } } /* ── Pool grid (card-thumbnail tiles) ────────────────────────────────── */ .pool-grid[b-zvasezfd60] { display: grid; /* Uniform columns and uniform rows: every tile is the same card-shaped box, so the grid stays a clean side-by-side matrix. */ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); align-items: start; /* min-content, NOT the default auto. A tile's height comes from .card-tile-art's aspect-ratio, and an aspect-ratio box whose width is a percentage contributes ZERO to a grid row's intrinsic size — so auto rows collapsed to the footer height (measured live: 31.3px rows holding 362px tiles) and every tile spilled over the ones below it, swallowing their clicks. Verified in-browser: auto = 324 overlapping pairs, min-content = 0. */ grid-auto-rows: min-content; gap: 0.6rem; padding: 0.6rem; overflow-y: auto; flex: 1; } .card-tile[b-zvasezfd60] { all: unset; cursor: pointer; display: flex; flex-direction: column; background: rgba(0, 0, 0, 0.25); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 8px; overflow: hidden; transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s; } .card-tile:hover:not(.illegal)[b-zvasezfd60] { transform: translateY(-2px); border-color: rgba(226, 200, 126, 0.5); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4); } .card-tile.illegal[b-zvasezfd60] { opacity: 0.35; cursor: not-allowed; } /* A fixed card-shaped box every tile shares — this is what keeps the grid a regular matrix. Letting the tile take each image's own height (briefly tried) made rows ragged and tiles visually collide as images finished loading. object-fit: contain still shows the WHOLE image, just letterboxed against the backdrop when a card's art isn't exactly 3:4 — nothing is ever cropped. */ .card-tile-art[b-zvasezfd60] { position: relative; width: 100%; aspect-ratio: 3 / 4; background: #111; overflow: hidden; } .card-tile-art img[b-zvasezfd60] { width: 100%; height: 100%; object-fit: contain; display: block; } .card-tile-placeholder[b-zvasezfd60] { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.8); font-size: 3rem; background: linear-gradient(160deg, #2a2a3e 0%, #1a1a2e 100%); } .placeholder-icon[b-zvasezfd60] { line-height: 1; } /* Per-type tinted backgrounds for the placeholder — gives a visual "this is a drone vs a resource vs a trap" cue before art arrives. */ .placeholder-drone[b-zvasezfd60] { background: linear-gradient(160deg, #2a4a3e, #1a2a2e); } .placeholder-resource[b-zvasezfd60] { background: linear-gradient(160deg, #4a3a2a, #2a1a0e); } .placeholder-defence[b-zvasezfd60] { background: linear-gradient(160deg, #2a3a4a, #1a1a3a); } .placeholder-trap[b-zvasezfd60] { background: linear-gradient(160deg, #4a2a3a, #2a0a2a); } .placeholder-surveillance[b-zvasezfd60] { background: linear-gradient(160deg, #3a3a5a, #1a1a3a); } .placeholder-action[b-zvasezfd60] { background: linear-gradient(160deg, #5a4a2a, #2a1a0a); } .placeholder-upgrade[b-zvasezfd60] { background: linear-gradient(160deg, #4a4a3a, #2a2a1a); } .placeholder-spouse[b-zvasezfd60] { background: linear-gradient(160deg, #5a2a3a, #2a0a1a); } .placeholder-pet[b-zvasezfd60] { background: linear-gradient(160deg, #3a4a3a, #1a2a1a); } .in-deck-badge[b-zvasezfd60] { position: absolute; top: 0.4rem; right: 0.4rem; background: rgba(226, 200, 126, 0.95); color: #1a0f00; font-weight: 800; font-size: 0.8rem; padding: 0.15rem 0.4rem; border-radius: 4px; box-shadow: 0 2px 6px rgba(0,0,0,0.5); } .illegal-badge[b-zvasezfd60] { position: absolute; bottom: 0.4rem; right: 0.4rem; font-size: 1rem; background: rgba(0,0,0,0.6); border-radius: 4px; padding: 0.1rem 0.3rem; } .card-tile-footer[b-zvasezfd60] { padding: 0.4rem 0.5rem 0.5rem; background: rgba(0,0,0,0.4); border-top: 1px solid rgba(255,255,255,0.05); } .card-tile-name[b-zvasezfd60] { font-weight: 700; font-size: 0.85rem; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; } .cost-free[b-zvasezfd60] { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.55); } /* ── Deck stats panel ────────────────────────────────────────────────── */ .deck-stats[b-zvasezfd60] { padding: 0.75rem; border-bottom: 1px solid rgba(255,255,255,0.08); background: rgba(0,0,0,0.2); } .stats-row[b-zvasezfd60] { display: flex; justify-content: space-between; align-items: center; padding: 0.3rem 0.5rem; border-radius: 4px; margin-bottom: 0.5rem; } .stats-row-main[b-zvasezfd60] { font-weight: 700; font-size: 0.95rem; } .stats-row-main.ok[b-zvasezfd60] { background: rgba(102,187,106,0.15); color: #99e0a0; } .stats-row-main.warn[b-zvasezfd60] { background: rgba(229,57,53,0.15); color: #f0908d; } .stats-grid[b-zvasezfd60] { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 0.35rem; } .stats-cell[b-zvasezfd60] { background: rgba(255,255,255,0.04); padding: 0.3rem 0.5rem; border-radius: 4px; display: flex; justify-content: space-between; align-items: center; } .stats-cell-label[b-zvasezfd60] { font-size: 0.75rem; color: rgba(255,255,255,0.55); } .stats-cell-value[b-zvasezfd60] { font-weight: 700; color: #fff; } /* ── Inspector modal ────────────────────────────────────────────────── */ .inspector-backdrop[b-zvasezfd60] { position: fixed; inset: 0; background: rgba(0,0,0,0.7); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 9000; animation: inspectorFadeIn-b-zvasezfd60 0.2s ease-out; } .inspector-modal[b-zvasezfd60] { background: linear-gradient(160deg, #1a1f2e 0%, #2a1f3e 100%); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; max-width: 1000px; width: 92vw; max-height: 90vh; overflow: auto; display: grid; grid-template-columns: auto 1fr; gap: 1rem; padding: 1.5rem; position: relative; animation: inspectorPop-b-zvasezfd60 0.25s ease-out; } @media (max-width: 640px) { .inspector-modal[b-zvasezfd60] { grid-template-columns: 1fr; } /* Stacked: width is the binding constraint, not height. */ .inspector-art[b-zvasezfd60] { width: min(100%, 52vh); margin: 0 auto; } } .inspector-close[b-zvasezfd60] { position: absolute; top: 0.5rem; right: 0.75rem; background: none; border: none; color: rgba(255,255,255,0.5); font-size: 1.6rem; cursor: pointer; line-height: 1; } .inspector-close:hover[b-zvasezfd60] { color: #fff; } .inspector-art[b-zvasezfd60] { /* The art was pinned at 240px and read as "way too small". Size it off the viewport instead — the 52vh term keeps the 3:4 box inside the modal's 90vh on short screens, so it never has to scroll to see the whole card. Lands at 480px (2x) on a 1080p display. */ width: min(480px, 40vw, 52vh); aspect-ratio: 3 / 4; border-radius: 8px; overflow: hidden; background: #111; } .inspector-art img[b-zvasezfd60] { width: 100%; height: 100%; object-fit: cover; display: block; } .inspector-placeholder[b-zvasezfd60] { font-size: 5rem; } .inspector-info[b-zvasezfd60] { display: flex; flex-direction: column; gap: 0.6rem; color: #fff; } .inspector-name[b-zvasezfd60] { margin: 0; font-size: 1.5rem; font-weight: 800; } .inspector-meta[b-zvasezfd60] { display: flex; gap: 0.4rem; flex-wrap: wrap; } .inspector-stats[b-zvasezfd60] { display: flex; gap: 0.75rem; font-size: 1.1rem; font-weight: 700; } .stat-atk[b-zvasezfd60] { color: #f0908d; } .inspector-desc[b-zvasezfd60] { color: rgba(255,255,255,0.75); font-size: 0.9rem; margin: 0; line-height: 1.4; } .inspector-restrict[b-zvasezfd60] { color: #ffd700; font-size: 0.85rem; margin: 0; } .inspector-actions[b-zvasezfd60] { display: flex; align-items: center; gap: 1rem; margin-top: auto; padding-top: 0.6rem; border-top: 1px solid rgba(255,255,255,0.08); } /* Typed quantity box between the − / + steppers. */ .inspector-qty-field[b-zvasezfd60] { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 0; } .inspector-qty[b-zvasezfd60] { width: 5rem; padding: 0.35rem 0.4rem; text-align: center; font-weight: 700; font-size: 1.1rem; border-radius: 0.35rem; border: 1px solid rgba(255,255,255,0.25); background: rgba(0,0,0,0.35); color: #fff; } .inspector-qty:focus[b-zvasezfd60] { outline: none; border-color: #2fbe54; box-shadow: 0 0 0 2px rgba(47,190,84,0.25); } .inspector-qty:disabled[b-zvasezfd60] { opacity: 0.5; } .inspector-qty-label[b-zvasezfd60] { font-size: 0.75rem; color: rgba(255,255,255,0.6); } @keyframes inspectorFadeIn-b-zvasezfd60 { from { opacity: 0; } to { opacity: 1; } } @keyframes inspectorPop-b-zvasezfd60 { from { opacity: 0; transform: scale(0.95) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } } /* ── Library-bounded pool ──────────────────────────────────────────────────── A card whose copies are all already in the deck stays visible (the player owns it, and seeing the count is the point) but reads as spent rather than available. Distinct from .illegal, which the hero can never use at all. */ .card-tile.exhausted[b-zvasezfd60] { opacity: 0.55; cursor: default; } .card-tile.exhausted .card-tile-art[b-zvasezfd60] { filter: saturate(0.4); } .in-deck-badge-full[b-zvasezfd60] { background: rgba(210, 134, 11, 0.9); color: #fff; } .deck-editor-notice[b-zvasezfd60] { margin: 0.75rem 1rem 0; } /* /Components/Pages/Decks/DeckList.razor.rz.scp.css */ .deck-grid[b-61j1wpofi7] { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; } .deck-tile[b-61j1wpofi7] { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid rgba(0,0,0,0.15); border-radius: 10px; text-decoration: none; color: inherit; background: var(--bs-body-bg); transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease; } .deck-tile:hover[b-61j1wpofi7] { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0,0,0,0.18); border-color: rgba(40, 167, 69, 0.6); } .deck-hero[b-61j1wpofi7] { width: 56px; height: 78px; flex-shrink: 0; aspect-ratio: 63 / 88; border-radius: 6px; overflow: hidden; background: linear-gradient(135deg, #2d5016, #4a7c23); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.7); } .deck-hero img[b-61j1wpofi7] { width: 100%; height: 100%; object-fit: cover; } .deck-hero-initial[b-61j1wpofi7] { font-size: 1.8rem; font-weight: 800; } .deck-meta[b-61j1wpofi7] { flex: 1; min-width: 0; } .deck-name[b-61j1wpofi7] { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .deck-sub[b-61j1wpofi7] { display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; color: var(--bs-secondary-color); margin-top: 4px; } .deck-count[b-61j1wpofi7] { font-weight: 700; padding: 1px 8px; border-radius: 10px; font-size: 0.7rem; } .deck-count-good[b-61j1wpofi7] { background: rgba(40, 167, 69, 0.15); color: #28a745; } .deck-count-bad[b-61j1wpofi7] { background: rgba(220, 53, 69, 0.15); color: #dc3545; } /* /Components/Pages/Dev/Board3DDemo.razor.rz.scp.css */ .demo3d-shell[b-5pu4t71s1v] { position: fixed; inset: 0; display: flex; flex-direction: column; background: #0c1410; z-index: 1; } .demo3d-bar[b-5pu4t71s1v] { flex: 0 0 auto; display: flex; gap: 18px; align-items: center; padding: 6px 14px; background: #11201a; color: #e6efe9; font-size: 0.85rem; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .demo3d-hint[b-5pu4t71s1v] { color: #8fae9d; } .demo3d-pick[b-5pu4t71s1v] { margin-left: auto; color: #ffd479; font-variant-numeric: tabular-nums; } .demo3d-stage[b-5pu4t71s1v] { flex: 1 1 auto; position: relative; min-height: 0; } .demo3d-warning[b-5pu4t71s1v] { flex: 0 0 auto; padding: 6px 14px; background: #5a1f1f; color: #ffdede; font-size: 0.8rem; border-bottom: 1px solid rgba(255, 120, 120, 0.4); } .demo3d-warning a[b-5pu4t71s1v] { color: #ffd479; font-weight: 600; } /* /Components/Pages/Dev/GltfDemo.razor.rz.scp.css */ .gltf-shell[b-qj8m7kfkpr] { position: fixed; inset: 0; display: flex; flex-direction: column; background: #0d1117; z-index: 1; } .gltf-bar[b-qj8m7kfkpr] { flex: 0 0 auto; display: flex; gap: 18px; align-items: center; padding: 6px 14px; background: #161b22; color: #e6edf3; font-size: 0.85rem; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .gltf-hint[b-qj8m7kfkpr] { color: #8b949e; } .gltf-bar label[b-qj8m7kfkpr] { margin-left: auto; display: flex; gap: 6px; align-items: center; } .gltf-stage[b-qj8m7kfkpr] { flex: 1 1 auto; position: relative; min-height: 0; } .gltf-canvas[b-qj8m7kfkpr] { display: block; width: 100%; height: 100%; touch-action: none; } .gltf-status[b-qj8m7kfkpr] { position: absolute; left: 10px; bottom: 10px; padding: 4px 10px; background: rgba(0, 0, 0, 0.55); color: #7ee787; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8rem; border-radius: 4px; font-variant-numeric: tabular-nums; pointer-events: none; } .gltf-error[b-qj8m7kfkpr] { position: absolute; left: 10px; top: 10px; padding: 6px 12px; background: #5a1f1f; color: #ffdede; font-size: 0.8rem; border-radius: 4px; max-width: 60ch; } .gltf-controls[b-qj8m7kfkpr] { flex: 0 0 auto; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 8px 14px; background: #161b22; color: #e6edf3; font-size: 0.85rem; border-top: 1px solid rgba(255, 255, 255, 0.08); } .gltf-meta[b-qj8m7kfkpr] { color: #8b949e; } .gltf-controls button[b-qj8m7kfkpr] { background: #21262d; color: #e6edf3; border: 1px solid #30363d; border-radius: 5px; padding: 4px 10px; cursor: pointer; font-size: 0.8rem; } .gltf-controls button:hover[b-qj8m7kfkpr] { background: #30363d; } .gltf-clips[b-qj8m7kfkpr] { display: flex; gap: 6px; flex-wrap: wrap; width: 100%; } .gltf-clips button[b-qj8m7kfkpr] { background: #1f6feb22; border-color: #1f6feb55; } .gltf-clips button:hover[b-qj8m7kfkpr] { background: #1f6feb44; } /* /Components/Pages/Dev/Playfield.razor.rz.scp.css */ .pf-shell[b-0e30yfobze] { display: flex; flex-direction: column; height: 100vh; background: #0d1b12; color: #e6edf3; font-size: 0.85rem; } .pf-bar[b-0e30yfobze] { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; padding: 0.5rem 0.9rem; background: #11241a; border-bottom: 1px solid #1e3a2a; } .pf-hint[b-0e30yfobze] { opacity: 0.6; } .pf-bar label[b-0e30yfobze] { display: inline-flex; gap: 0.35rem; align-items: center; cursor: pointer; } .pf-stage[b-0e30yfobze] { position: relative; flex: 1; min-height: 0; } .pf-canvas[b-0e30yfobze] { display: block; width: 100%; height: 100%; } .pf-status[b-0e30yfobze] { position: absolute; top: 0.6rem; left: 0.75rem; padding: 0.2rem 0.5rem; border-radius: 0.25rem; background: rgba(0, 0, 0, 0.55); font-family: ui-monospace, monospace; font-size: 0.75rem; } .pf-error[b-0e30yfobze] { position: absolute; top: 2.4rem; left: 0.75rem; padding: 0.35rem 0.6rem; border-radius: 0.25rem; background: #5c1f1f; } .pf-legend[b-0e30yfobze] { position: absolute; right: 0.75rem; top: 0.6rem; padding: 0.5rem 0.7rem; border-radius: 0.35rem; background: rgba(0, 0, 0, 0.55); font-size: 0.72rem; line-height: 1.55; } .pf-legend .sw[b-0e30yfobze] { display: inline-block; width: 0.7rem; height: 0.7rem; margin-right: 0.4rem; border-radius: 0.15rem; vertical-align: -1px; } .pf-meta[b-0e30yfobze] { padding: 0.4rem 0.9rem; background: #11241a; border-top: 1px solid #1e3a2a; font-family: ui-monospace, monospace; font-size: 0.75rem; opacity: 0.85; } /* /Components/Pages/Game/Board.razor.rz.scp.css */ /* === Game Board Layout === */ .game-board[b-v0539y4sfd] { display: flex; flex-direction: column; height: 100vh; overflow: hidden; color: #e8e8e8; position: relative; /* Dark surround that frames the green felt board — matches the mockup (no wood). */ background: radial-gradient(ellipse 120% 90% at 50% 42%, #16241b 0%, #0c120e 58%, #070a08 100%); } /* --- Top bar (players + settings gear) --- */ /* Top bar: the HUD strip spans the FULL width, with the settings button floating over its right-hand end. The mockup's photographic backdrop is a flat colour for now — there is nowhere to upload that image yet. */ .top-bar[b-v0539y4sfd] { position: relative; padding: 10px 58px 4px 14px; z-index: 30; flex-shrink: 0; background: #0b1116; } .top-bar[b-v0539y4sfd] .pbar { width: 100%; } /* The optional phase rail, centred beneath the bar rather than inside it. */ .hud-rail[b-v0539y4sfd] { display: flex; justify-content: center; margin-top: 3px; } .top-settings[b-v0539y4sfd] { position: absolute; right: 14px; top: 14px; z-index: 31; } /* Enemy hero powers: a read-only reveal, so you can see what they are holding without being able to fire it. */ .top-bar[b-v0539y4sfd] .enemy-powers-pop { position: absolute; top: 100%; right: 0; z-index: 40; width: 250px; margin-top: 4px; padding: 8px 10px; border-radius: 9px; background: rgba(10, 16, 21, 0.98); border: 1px solid rgba(255, 212, 121, 0.45); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6); text-align: left; } .top-bar[b-v0539y4sfd] .enemy-powers-title { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #e2c87e; margin-bottom: 5px; } .top-bar[b-v0539y4sfd] .enemy-power { margin-bottom: 6px; line-height: 1.25; } .top-bar[b-v0539y4sfd] .enemy-power strong { display: block; font-size: 0.74rem; color: #fff; } .top-bar[b-v0539y4sfd] .enemy-power span { font-size: 0.68rem; color: rgba(255, 255, 255, 0.62); } /* The hero column is the popover's positioning context. */ .top-bar[b-v0539y4sfd] .pbar-hero { position: relative; } .gear-btn[b-v0539y4sfd] { width: 38px; height: 38px; border-radius: 9px; background: rgba(16, 24, 19, 0.9); border: 1px solid rgba(255, 212, 121, 0.4); color: #ffd479; font-size: 1.15rem; cursor: pointer; line-height: 1; transition: transform 0.15s ease, background 0.15s ease; } .gear-btn:hover[b-v0539y4sfd], .gear-btn.open[b-v0539y4sfd] { background: rgba(30, 44, 34, 0.95); } .settings-menu[b-v0539y4sfd] { position: absolute; right: 0; top: calc(100% + 6px); min-width: 220px; background: linear-gradient(180deg, rgba(16, 24, 19, 0.97), rgba(10, 16, 12, 0.97)); border: 1px solid rgba(255, 212, 121, 0.4); border-radius: 10px; padding: 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55); z-index: 40; } .settings-row[b-v0539y4sfd] { display: flex; align-items: center; gap: 8px; padding: 5px 4px; } .settings-row + .settings-row[b-v0539y4sfd] { border-top: 1px solid rgba(255, 255, 255, 0.07); } .settings-label[b-v0539y4sfd] { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #8fae9d; min-width: 62px; } .settings-btns[b-v0539y4sfd] { display: flex; gap: 4px; flex-wrap: wrap; } /* View (3D board tilt/zoom). The row is toggled with [hidden] by the renderer, and .settings-row sets display:flex — which would win over the UA's [hidden] rule. */ .settings-row[hidden][b-v0539y4sfd] { display: none; } .lawn-view-row[b-v0539y4sfd] { align-items: flex-start; } .lawn-view-controls[b-v0539y4sfd] { display: flex; flex-direction: column; gap: 5px; flex: 1; } .lawn-view-controls label[b-v0539y4sfd] { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 0.7rem; color: #8fae9d; } .lawn-view-controls label > span[b-v0539y4sfd] { min-width: 34px; } .lawn-view-controls input[type="range"][b-v0539y4sfd] { flex: 1; min-width: 96px; accent-color: #ffd479; cursor: pointer; } .lawn-view-controls button[b-v0539y4sfd] { align-self: flex-start; } /* --- Phase Bar (classic board fallback) --- */ .phase-bar[b-v0539y4sfd] { display: flex; align-items: center; justify-content: center; padding: 6px 16px; background: rgba(0,0,0,0.65); backdrop-filter: blur(4px); gap: 16px; z-index: 20; flex-shrink: 0; border-bottom: 1px solid rgba(255,255,255,0.08); } .phase-info[b-v0539y4sfd] { display: flex; gap: 12px; align-items: center; } .ai-speed-control[b-v0539y4sfd] { display: inline-flex; align-items: center; gap: 0.3rem; } .ai-speed-label[b-v0539y4sfd] { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.55); margin-right: 0.1rem; } .phase-label[b-v0539y4sfd] { font-size: 0.8rem; color: #c0a060; font-weight: 700; letter-spacing: 1px; } .turn-indicator[b-v0539y4sfd] { font-weight: 700; font-size: 0.9rem; color: #fff; } /* Online: clear visual difference between "act now" and "wait" */ .turn-indicator-mine[b-v0539y4sfd] { background: linear-gradient(135deg, #2e7d32, #66bb6a); color: #fff; padding: 3px 10px; border-radius: 4px; animation: turn-indicator-pulse-b-v0539y4sfd 1.8s ease-in-out infinite; } .turn-indicator-theirs[b-v0539y4sfd] { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.65); padding: 3px 10px; border-radius: 4px; font-weight: 500; } @keyframes turn-indicator-pulse-b-v0539y4sfd { 0%, 100% { box-shadow: 0 0 0 0 rgba(102,187,106,0.5); } 50% { box-shadow: 0 0 0 6px rgba(102,187,106,0); } } .action-bar-waiting[b-v0539y4sfd] { opacity: 0.7; } .action-bar-waiting .action-hint[b-v0539y4sfd] { font-style: italic; } .game-over-banner[b-v0539y4sfd] { background: linear-gradient(135deg, #b8860b, #daa520); color: #1a0f00; padding: 4px 14px; border-radius: 4px; font-weight: 700; font-size: 0.85rem; } /* --- Phase Guidance --- */ .phase-guidance[b-v0539y4sfd] { display: flex; align-items: center; gap: 8px; padding: 5px 16px; background: rgba(226, 200, 126, 0.06); border-bottom: 1px solid rgba(226, 200, 126, 0.15); flex-shrink: 0; } .guidance-icon[b-v0539y4sfd] { font-size: 1.1rem; } .guidance-text[b-v0539y4sfd] { font-size: 0.78rem; color: rgba(226, 200, 126, 0.7); line-height: 1.3; } /* --- Battlefield Container --- A single, vertically-stacked board: opponent on top, fence in the middle, you on the bottom. Centered as one narrow column (never a left/right split). */ .battlefield[b-v0539y4sfd] { display: flex; flex-direction: column; align-items: center; flex: 1; min-height: 0; overflow-y: auto; padding: 6px 12px 10px; } /* --- Player Areas --- */ \.player-area[b-v0539y4sfd] { display: flex; flex-direction: column; gap: 3px; padding: 2px 0; width: 100%; background: none; border: none; } /* --- Lawns --- */ .lawn[b-v0539y4sfd] { display: flex; flex-direction: column; gap: 3px; border-radius: 10px; padding: 8px; min-height: 0; position: relative; } /* Dark muted felt (matches LawnView + the 3D board). */ .opponent-lawn[b-v0539y4sfd], .active-lawn[b-v0539y4sfd] { background: repeating-linear-gradient(45deg, transparent 0px, transparent 5px, rgba(0,0,0,0.06) 5px, rgba(0,0,0,0.06) 6px), radial-gradient(ellipse 110% 90% at 50% 50%, #1a2e20 0%, #14241a 55%, #10201a 100%); border: 1px solid rgba(255,255,255,0.08); box-shadow: inset 0 0 55px rgba(0,0,0,0.35), 0 1px 6px rgba(0,0,0,0.35); } .opponent-lawn[b-v0539y4sfd] { border-color: rgba(200, 90, 90, 0.16); } .active-lawn[b-v0539y4sfd] { border-color: rgba(255, 255, 255, 0.09); } .lawn-row[b-v0539y4sfd] { display: flex; align-items: center; gap: 6px; min-height: 55px; position: relative; } .row-label[b-v0539y4sfd] { writing-mode: vertical-lr; text-orientation: mixed; transform: rotate(180deg); font-size: 0.55rem; font-weight: 800; text-transform: uppercase; color: rgba(255,255,255,0.35); letter-spacing: 2px; padding: 4px 3px; flex-shrink: 0; background: rgba(0,0,0,0.15); border-radius: 3px; } .card-row[b-v0539y4sfd] { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; flex: 1; min-height: 55px; padding: 3px; } .empty-zone[b-v0539y4sfd] { color: rgba(255,255,255,0.18); font-size: 0.7rem; font-style: italic; padding: 12px; text-align: center; width: 100%; border: 1px solid rgba(255,255,255,0.06); border-radius: 6px; background: rgba(0,0,0,0.18); } /* --- Fence / Hedge Divider --- */ .fence-divider[b-v0539y4sfd] { flex-shrink: 0; height: 24px; display: flex; align-items: center; justify-content: center; position: relative; padding: 0 10px; margin: 2px 0; } .fence-pattern[b-v0539y4sfd] { width: 100%; height: 3px; border-radius: 3px; position: relative; /* Subtle dark divider — a thin muted line with a faint gold center glow, replacing the loud bright-green hedge. */ background: linear-gradient(90deg, transparent 0%, rgba(255, 212, 121, 0.12) 20%, rgba(255, 212, 121, 0.28) 50%, rgba(255, 212, 121, 0.12) 80%, transparent 100%); box-shadow: 0 0 6px rgba(255, 212, 121, 0.08); border: none; } /* --- Side Zones --- */ .side-zones[b-v0539y4sfd] { display: flex; align-items: center; gap: 12px; padding: 5px 14px; background: rgba(0,0,0,0.45); backdrop-filter: blur(2px); flex-shrink: 0; border-top: 1px solid rgba(255,255,255,0.05); border-bottom: 1px solid rgba(255,255,255,0.05); } .zone-stack[b-v0539y4sfd] { text-align: center; } .zone-label[b-v0539y4sfd] { font-size: 0.6rem; text-transform: uppercase; color: #999; font-weight: 700; letter-spacing: 0.5px; } .deck-pile[b-v0539y4sfd], .trash-pile[b-v0539y4sfd] { width: 42px; height: 58px; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.9rem; color: white; } .deck-pile[b-v0539y4sfd] { background: repeating-linear-gradient(135deg, rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.03) 2px, transparent 2px, transparent 6px), linear-gradient(135deg, #16241b, #1e3327); border: 1px solid rgba(255, 212, 121, 0.35); box-shadow: 2px 2px 4px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.06); } .trash-pile[b-v0539y4sfd] { background: linear-gradient(135deg, #201a1a, #332727); border: 1px solid rgba(255,255,255,0.12); box-shadow: 2px 2px 4px rgba(0,0,0,0.35); } .resource-pool[b-v0539y4sfd] { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; align-items: center; } .resource-badge[b-v0539y4sfd] { padding: 3px 10px; border-radius: 12px; font-size: 0.75rem; font-weight: 700; color: white; box-shadow: 0 1px 3px rgba(0,0,0,0.3); } .res-credits[b-v0539y4sfd] { background: linear-gradient(135deg, #d4a017, #b8860b); color: #000; } .res-tech[b-v0539y4sfd] { background: linear-gradient(135deg, #5e9cf5, #3a7bd5); } .res-scrap[b-v0539y4sfd] { background: linear-gradient(135deg, #8b8b8b, #6b6b6b); } .res-chemicals[b-v0539y4sfd] { background: linear-gradient(135deg, #9b59b6, #7d3c98); } .res-energy[b-v0539y4sfd] { background: linear-gradient(135deg, #f1c40f, #d4ac0d); color: #000; } /* --- Action Bar --- */ .action-bar[b-v0539y4sfd] { display: flex; justify-content: center; align-items: center; gap: 10px; padding: 7px 14px; background: rgba(0,0,0,0.55); backdrop-filter: blur(2px); flex-shrink: 0; } .action-hint[b-v0539y4sfd] { font-size: 0.75rem; color: #bbb; margin-right: 8px; } .action-bar kbd[b-v0539y4sfd] { font-size: 0.6rem; padding: 1px 4px; border-radius: 3px; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.2); color: rgba(255,255,255,0.6); font-family: inherit; margin-left: 4px; vertical-align: baseline; } .surrender-link[b-v0539y4sfd] { font-size: 0.6rem; color: #666; cursor: pointer; text-decoration: underline; } .surrender-link:hover[b-v0539y4sfd] { color: #999; } .surrender-confirm[b-v0539y4sfd] { font-size: 0.6rem; color: #dc3545; font-weight: 700; } .btn-xs[b-v0539y4sfd] { font-size: 0.55rem !important; padding: 1px 6px !important; line-height: 1.4; } /* --- Hand Area --- */ .hand-area[b-v0539y4sfd] { background: rgba(0,0,0,0.65); border-top: 2px solid rgba(192,160,96,0.3); padding: 6px 14px 8px; flex-shrink: 0; max-height: 180px; } .hand-label[b-v0539y4sfd] { font-size: 0.65rem; text-transform: uppercase; color: #c0a060; font-weight: 700; margin-bottom: 5px; letter-spacing: 1px; } .hand-cards[b-v0539y4sfd] { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; scrollbar-color: rgba(192,160,96,0.3) transparent; } /* --- Game Log --- */ .game-log[b-v0539y4sfd] { position: fixed; bottom: 0; right: 0; width: 280px; background: rgba(0,0,0,0.88); backdrop-filter: blur(4px); border-top-left-radius: 10px; z-index: 30; max-height: 30px; overflow: hidden; transition: max-height 0.3s ease; border-top: 1px solid rgba(255,255,255,0.08); border-left: 1px solid rgba(255,255,255,0.08); } .game-log.expanded[b-v0539y4sfd] { max-height: 300px; } .log-header[b-v0539y4sfd] { display: flex; align-items: center; gap: 8px; padding: 5px 12px; } .log-toggle[b-v0539y4sfd] { cursor: pointer; font-size: 0.7rem; font-weight: 600; color: #aaa; flex: 1; } .log-entries[b-v0539y4sfd] { padding: 0 12px 8px; overflow-y: auto; max-height: 260px; } .log-entry[b-v0539y4sfd] { font-size: 0.65rem; padding: 2px 0 2px 7px; border-bottom: 1px solid rgba(255,255,255,0.04); border-left: 2px solid transparent; color: #ccc; } /* Who did what, at a glance: your lines blue, the enemy's red, the game's own lines (phase banners, game over) neutral — the same pairing as the player bar and the day overview. The stripe carries the colour so the text stays legible; see Board.razor.cs LogEntryClass. */ .log-entry.is-you[b-v0539y4sfd] { border-left-color: #58a6ff; color: #cfe4fb; } .log-entry.is-enemy[b-v0539y4sfd] { border-left-color: #ff7b72; color: #f8d5d2; } .log-entry.is-system[b-v0539y4sfd] { color: #9aa5a0; font-style: italic; } /* --- Toast --- */ .toast-message[b-v0539y4sfd] { position: fixed; top: 50px; left: 50%; transform: translateX(-50%); background: #198754; color: white; padding: 8px 24px; border-radius: 8px; font-weight: 600; z-index: 100; animation: toast-in-b-v0539y4sfd 0.3s ease; box-shadow: 0 4px 12px rgba(0,0,0,0.4); } .toast-message.error[b-v0539y4sfd] { background: #dc3545; } @keyframes toast-in-b-v0539y4sfd { from { opacity: 0; transform: translateX(-50%) translateY(-10px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } } /* The .tutorial-* overlay styles live in the global app.css (not here): the TutorialOverlay is its own component, so Blazor CSS-isolation would scope these rules to Board.razor and strip the overlay's fixed positioning/z-index. */ /* === Phase Transition Flash === */ .phase-transition-overlay[b-v0539y4sfd] { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.7); z-index: 150; pointer-events: none; animation: phase-flash-b-v0539y4sfd 1s ease forwards; } .phase-transition-text[b-v0539y4sfd] { font-size: 2.5rem; font-weight: 900; letter-spacing: 6px; color: #e2c87e; text-transform: uppercase; text-shadow: 0 0 30px rgba(226, 200, 126, 0.6), 0 0 60px rgba(226, 200, 126, 0.3); animation: phase-text-pop-b-v0539y4sfd 1s ease forwards; } @keyframes phase-flash-b-v0539y4sfd { 0% { opacity: 0; } 15% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; } } @keyframes phase-text-pop-b-v0539y4sfd { 0% { transform: scale(0.8); opacity: 0; } 20% { transform: scale(1.05); opacity: 1; } 70% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.1); opacity: 0; } } /* === Income Forecast === */ .income-forecast[b-v0539y4sfd] { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; width: 100%; margin-top: 3px; } .forecast-none[b-v0539y4sfd] { font-size: 0.65rem; color: #666; font-style: italic; } /* --- Lawn Labels (small caption above each half) --- */ .lawn-label[b-v0539y4sfd] { display: block; text-align: center; font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: rgba(255,255,255,0.42); padding: 1px 0; } /* === WIDE SCREEN === The classic board deliberately stays a single vertical stack at every width (opponent top / you bottom, horizontal fence) — it must never split into two side-by-side lawns. We only re-center the hand here. */ @media (min-width: 1440px) { .hand-cards[b-v0539y4sfd] { justify-content: center; } } /* The .peek-modal* selection/picker styles live in the global app.css (not here): the modals that use them — AbilityPickerModal, PlayChoiceModal — are separate components, so Blazor CSS-isolation would scope these rules to Board.razor only, leaving the extracted modals' backdrop with no position or z-index. The fixed .game-log (surrender link) would then paint over them and swallow clicks on the modal. */ /* ── Game-over modal: focal-point celebration / commiseration ─────── */ .game-over-modal-backdrop[b-v0539y4sfd] { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.75); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 9000; animation: gameOverFadeIn-b-v0539y4sfd 0.35s ease-out; } .game-over-modal[b-v0539y4sfd] { background: linear-gradient(160deg, #1a1f2e 0%, #2a1f3e 100%); border-radius: 14px; padding: 2.5rem 3rem; text-align: center; min-width: 320px; max-width: 90vw; border: 2px solid rgba(255, 255, 255, 0.1); box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6); animation: gameOverPop-b-v0539y4sfd 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); } .game-over-win[b-v0539y4sfd] { border-color: rgba(102, 187, 106, 0.5); } .game-over-loss[b-v0539y4sfd] { border-color: rgba(229, 57, 53, 0.5); } .game-over-draw[b-v0539y4sfd] { border-color: rgba(255, 167, 38, 0.5); } .game-over-neutral[b-v0539y4sfd] { border-color: rgba(255, 215, 0, 0.4); } .game-over-emoji[b-v0539y4sfd] { font-size: 4rem; line-height: 1; margin-bottom: 0.5rem; } .game-over-title[b-v0539y4sfd] { font-size: 2.5rem; font-weight: 800; margin: 0 0 0.5rem 0; color: #fff; letter-spacing: -0.02em; } .game-over-win .game-over-title[b-v0539y4sfd] { color: #99e0a0; } .game-over-loss .game-over-title[b-v0539y4sfd] { color: #f0908d; } .game-over-draw .game-over-title[b-v0539y4sfd], .game-over-neutral .game-over-title[b-v0539y4sfd] { color: #ffd700; } .game-over-subtitle[b-v0539y4sfd] { color: rgba(255, 255, 255, 0.75); margin: 0 0 0.5rem 0; font-size: 1.05rem; } .game-over-reason[b-v0539y4sfd] { color: rgba(255, 255, 255, 0.5); margin: 0 0 1.5rem 0; font-size: 0.85rem; font-style: italic; } .game-over-actions[b-v0539y4sfd] { display: flex; gap: 0.75rem; justify-content: center; } @keyframes gameOverFadeIn-b-v0539y4sfd { from { opacity: 0; } to { opacity: 1; } } @keyframes gameOverPop-b-v0539y4sfd { from { opacity: 0; transform: scale(0.85) translateY(20px); } to { opacity: 1; transform: scale(1) translateY(0); } } /* ── Peek-hand toast (non-blocking) ───────────────────────────────── */ .peek-toast[b-v0539y4sfd] { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); background: linear-gradient(160deg, rgba(30,40,60,0.95), rgba(50,30,70,0.95)); border: 1px solid rgba(180,140,220,0.5); border-radius: 8px; padding: 0.75rem 1.25rem; color: #fff; box-shadow: 0 8px 32px rgba(0,0,0,0.5); z-index: 8500; cursor: pointer; animation: peekToastIn-b-v0539y4sfd 0.25s ease-out; min-width: 220px; max-width: 360px; } .peek-toast-header[b-v0539y4sfd] { font-weight: 700; font-size: 0.9rem; margin-bottom: 0.35rem; color: #d4b3ff; } .peek-toast-list[b-v0539y4sfd] { list-style: none; padding: 0; margin: 0 0 0.4rem 0; font-size: 0.85rem; color: rgba(255,255,255,0.85); } .peek-toast-list li[b-v0539y4sfd]::before { content: '· '; color: rgba(255,255,255,0.4); } .peek-toast-hint[b-v0539y4sfd] { font-size: 0.7rem; color: rgba(255,255,255,0.45); text-align: right; font-style: italic; } @keyframes peekToastIn-b-v0539y4sfd { from { opacity: 0; transform: translate(-50%, -10px); } to { opacity: 1; transform: translate(-50%, 0); } } /* One-time opening-hand mulligan prompt (Day 1 Preparation) */ .mulligan-prompt[b-v0539y4sfd] { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 4px auto 8px; padding: 6px 12px; border: 1px dashed rgba(255, 212, 121, 0.5); border-radius: 8px; background: rgba(255, 212, 121, 0.08); font-size: 0.85rem; } .mulligan-text[b-v0539y4sfd] { opacity: 0.85; } /* --- Unified bottom bar (phase actions + game log + surrender) --- Not a footer: an overlay pinned to the bottom edge whose background fades out after the left button cluster and back in before the right one, so the hand (canvas or DOM) reaches the very bottom of the screen between them. The bar itself is click-transparent; only the two clusters take pointer events. */ .bottom-bar[b-v0539y4sfd] { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 16px; background: linear-gradient(90deg, rgba(6, 10, 8, 0.92) 0%, rgba(10, 15, 12, 0.85) 14%, rgba(10, 15, 12, 0) 32%, rgba(10, 15, 12, 0) 68%, rgba(10, 15, 12, 0.85) 86%, rgba(6, 10, 8, 0.92) 100%); pointer-events: none; z-index: 30; } .bottom-bar[b-v0539y4sfd] .action-bar { flex: 0 1 auto; justify-content: flex-start; background: transparent; backdrop-filter: none; padding: 0; pointer-events: auto; } .bottom-log[b-v0539y4sfd] { position: relative; flex: 0 0 auto; display: flex; align-items: center; pointer-events: auto; } .bottom-log .log-header[b-v0539y4sfd] { padding: 0; gap: 14px; } .bottom-log .log-toggle[b-v0539y4sfd] { color: #cbd6cf; font-weight: 700; font-size: 0.72rem; letter-spacing: 0.02em; flex: 0 0 auto; } .bottom-log .log-toggle:hover[b-v0539y4sfd] { color: #fff; } .bottom-log .surrender-link[b-v0539y4sfd] { color: #b98; font-size: 0.72rem; text-decoration: none; } .bottom-log .surrender-link:hover[b-v0539y4sfd] { color: #f2c9b8; } .bottom-log .log-entries[b-v0539y4sfd] { position: absolute; bottom: calc(100% + 8px); right: 0; width: 320px; max-height: 280px; overflow-y: auto; background: rgba(4, 8, 6, 0.96); border: 1px solid rgba(255, 212, 121, 0.3); border-radius: 10px; padding: 10px 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6); z-index: 50; } /* Cohesive bottom-bar buttons (override Bootstrap variants toward the mockup). */ .bottom-bar[b-v0539y4sfd] .action-hint { font-size: 0.78rem; color: #cdd7cf; margin-right: 4px; } .bottom-bar[b-v0539y4sfd] .btn { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.02em; border-radius: 7px; padding: 5px 13px; border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(22, 32, 26, 0.92); color: #dfe9e2; box-shadow: none; } .bottom-bar[b-v0539y4sfd] .btn:hover { background: rgba(36, 50, 40, 0.96); color: #fff; } .bottom-bar[b-v0539y4sfd] .btn-primary { background: #2f7a46; border-color: #47b06a; color: #fff; } .bottom-bar[b-v0539y4sfd] .btn-primary:hover { background: #389354; } .bottom-bar[b-v0539y4sfd] .btn-warning { background: rgba(212, 160, 23, 0.22); border-color: rgba(212, 160, 23, 0.6); color: #ffd479; } .bottom-bar[b-v0539y4sfd] .btn-danger { background: #8a3535; border-color: #b45050; color: #fff; } .bottom-bar[b-v0539y4sfd] kbd { background: rgba(0, 0, 0, 0.45); border: 1px solid rgba(255, 255, 255, 0.22); border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; font-size: 0.62rem; margin-left: 5px; color: #cbd6cf; } /* --- Hero power buttons (rendered in the header cluster) --- */ .top-bar[b-v0539y4sfd] .hero-power-btn { width: 100%; font-size: 0.66rem; line-height: 1.15; padding: 3px 5px; /* Wrap rather than ellipsise: truncating to "Coupon Binder …" hid the name AND the uses counter, which is the half that tells you if it is spent. */ white-space: normal; overflow-wrap: anywhere; } .top-bar[b-v0539y4sfd] .hero-power-btn.is-peek { color: rgba(255, 255, 255, 0.75); } .hero-power-btn[b-v0539y4sfd] { text-align: left; font-size: 0.76rem; font-weight: 700; padding: 6px 10px; border-radius: 7px; background: rgba(22, 32, 26, 0.9); border: 1px solid rgba(255, 255, 255, 0.14); color: #cbd6cf; cursor: pointer; transition: background 0.15s ease; } .hero-power-btn.usable[b-v0539y4sfd] { background: rgba(212, 160, 23, 0.18); border-color: rgba(212, 160, 23, 0.6); color: #ffd479; } .hero-power-btn.usable:hover[b-v0539y4sfd] { background: rgba(212, 160, 23, 0.3); } .hero-power-btn:disabled[b-v0539y4sfd] { opacity: 0.55; cursor: default; } /* One continuous felt table holding both halves (mockup look). */ .felt-table[b-v0539y4sfd] { width: 100%; max-width: 1120px; display: flex; flex-direction: column; border-radius: 14px; padding: 10px 16px 14px; background: repeating-linear-gradient(45deg, transparent 0 6px, rgba(0,0,0,0.05) 6px 7px), radial-gradient(ellipse 100% 80% at 50% 45%, #1a2e20 0%, #14241a 55%, #0f1c14 100%); border: 1px solid rgba(255, 212, 121, 0.22); box-shadow: inset 0 0 70px rgba(0,0,0,0.45), 0 8px 30px rgba(0,0,0,0.5); } .felt-table .fence-divider[b-v0539y4sfd] { padding: 0; } .felt-table .fence-pattern[b-v0539y4sfd] { height: 2px; } .lawn-label[b-v0539y4sfd] { display: none; } /* === Classic board layout (mockup 1:1) === The felt is one large surface that fills the whole play area. It reaches from the left edge to a right gutter that leaves room for the day timeline, and stretches top-to-bottom. The hero-powers panel (top-left), timeline (right), and resource text (bottom-left) are absolutely-positioned overlays on top. */ .battlefield-classic[b-v0539y4sfd] { align-items: stretch; padding: 8px 300px 8px 10px; overflow: hidden; } .battlefield-classic .felt-table[b-v0539y4sfd] { flex: 1; width: 100%; max-width: none; min-height: 0; justify-content: space-between; padding: 14px 22px 16px; } /* Opponent sits at the top of the felt, you at the bottom, fence centred. */ .battlefield-classic .player-area[b-v0539y4sfd] { flex: 1 1 0; min-height: 0; } .battlefield-classic .opponent-area[b-v0539y4sfd] { justify-content: flex-start; } .battlefield-classic .active-area[b-v0539y4sfd] { justify-content: flex-end; } /* Deck / trash as small piles on the felt near your hero (mockup). */ .battlefield-classic .felt-piles[b-v0539y4sfd] { display: flex; gap: 12px; justify-content: flex-start; align-items: flex-end; padding: 6px 0 2px 26px; flex-shrink: 0; } .battlefield-classic .felt-pile[b-v0539y4sfd] { width: 76px; height: 106px; border-radius: 7px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 0.55rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #cbd6cf; box-shadow: 1px 2px 5px rgba(0,0,0,0.4); } .battlefield-classic .felt-pile small[b-v0539y4sfd] { opacity: 0.75; } .battlefield-classic .felt-pile b[b-v0539y4sfd] { font-size: 1.05rem; line-height: 1; } /* Deck/trash felt piles look like face-down cards. */ .battlefield-classic .felt-pile.is-deck[b-v0539y4sfd] { background: repeating-linear-gradient(135deg, rgba(255,255,255,0.04) 0 2px, transparent 2px 6px), linear-gradient(135deg, #2d5016, #4a7c23); border: 2px solid #6a9e44; } .battlefield-classic .felt-pile.is-trash[b-v0539y4sfd] { background: linear-gradient(135deg, #3a3a3a, #565656); border: 2px solid #7a7a7a; } .battlefield-classic .felt-pile b[b-v0539y4sfd] { font-size: 1.5rem; line-height: 1; color: #fff; } .battlefield-classic .felt-pile small[b-v0539y4sfd] { opacity: 0.8; } /* /Components/Pages/Game/Demo.razor.rz.scp.css */ /* /watch page — same hero-card vibe as the lobby, plus a difficulty pill picker. */ .watch-page[b-rkb6xeq444] { max-width: 1100px; margin: 0 auto; padding: 2rem 1rem 3rem; color: var(--bs-body-color); } .watch-header[b-rkb6xeq444] { text-align: center; margin-bottom: 1.5rem; } .watch-title[b-rkb6xeq444] { font-size: 2rem; font-weight: 800; margin-bottom: 0.25rem; color: #fff; } .watch-subtitle[b-rkb6xeq444] { color: rgba(255, 255, 255, 0.5); margin: 0; } .watch-loading[b-rkb6xeq444], .watch-alert[b-rkb6xeq444] { text-align: center; padding: 2rem; color: rgba(255, 255, 255, 0.7); } .watch-alert[b-rkb6xeq444] { background: rgba(255, 167, 38, 0.1); border: 1px solid rgba(255, 167, 38, 0.3); border-radius: 8px; } .watch-row[b-rkb6xeq444] { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-bottom: 1.5rem; } @media (max-width: 720px) { .watch-row[b-rkb6xeq444] { grid-template-columns: 1fr; } } .watch-panel[b-rkb6xeq444] { background: rgba(0, 0, 0, 0.25); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 10px; padding: 1rem; } .watch-panel-header[b-rkb6xeq444] { display: flex; align-items: center; margin-bottom: 0.75rem; } .watch-slot-label[b-rkb6xeq444] { font-weight: 800; color: #e2c87e; font-size: 0.85rem; letter-spacing: 0.05em; text-transform: uppercase; } .watch-section-label[b-rkb6xeq444] { margin-top: 0.75rem; margin-bottom: 0.35rem; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.4); font-weight: 700; } /* === Difficulty pill picker (matches the queue's AI rows) === */ .diff-grid[b-rkb6xeq444] { display: flex; gap: 0.4rem; flex-wrap: wrap; } .diff-pill[b-rkb6xeq444] { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.75); padding: 0.35rem 0.9rem; border-radius: 4px; font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; cursor: pointer; transition: all 0.15s; } .diff-pill:hover[b-rkb6xeq444] { background: rgba(255, 255, 255, 0.08); color: #fff; } /* Generic selected pill. Without this only the three difficulty rules below painted a selection, so the AI-playtime pills looked like nothing was picked even though the page defaults to Medium (player feedback). Listed FIRST so the equally-specific difficulty colours below still win on those pills. */ .diff-pill.selected[b-rkb6xeq444] { background: rgba(255, 212, 121, 0.22); color: #ffd479; border-color: rgba(255, 212, 121, 0.5); } .diff-pill-Easy.selected[b-rkb6xeq444] { background: rgba(102,187,106,0.25); color: #99e0a0; border-color: rgba(102,187,106,0.5); } .diff-pill-Normal.selected[b-rkb6xeq444] { background: rgba(33,150,243,0.25); color: #80c7f5; border-color: rgba(33,150,243,0.5); } .diff-pill-Hard.selected[b-rkb6xeq444] { background: rgba(229,57,53,0.25); color: #f0908d; border-color: rgba(229,57,53,0.5); } /* === Hero card grid (lifted from Lobby for visual consistency) === */ .hero-grid[b-rkb6xeq444] { display: flex; flex-direction: column; gap: 0.5rem; } .hero-option[b-rkb6xeq444] { display: flex; align-items: center; gap: 0.75rem; padding: 0.65rem 0.75rem; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.06); background: rgba(0, 0, 0, 0.2); cursor: pointer; transition: all 0.2s; position: relative; } .hero-option:hover:not(.taken)[b-rkb6xeq444] { border-color: rgba(226, 200, 126, 0.3); background: rgba(226, 200, 126, 0.05); } .hero-option.selected[b-rkb6xeq444] { border-color: rgba(226, 200, 126, 0.5); background: rgba(226, 200, 126, 0.08); box-shadow: 0 0 20px rgba(226, 200, 126, 0.08); } .hero-option.taken[b-rkb6xeq444] { opacity: 0.35; cursor: not-allowed; } .hero-portrait[b-rkb6xeq444] { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, rgba(226, 200, 126, 0.15), rgba(226, 200, 126, 0.05)); border: 2px solid rgba(255, 255, 255, 0.1); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .selected .hero-portrait[b-rkb6xeq444] { border-color: rgba(226, 200, 126, 0.5); } .hero-initial[b-rkb6xeq444] { font-size: 1.1rem; font-weight: 800; color: rgba(255, 255, 255, 0.5); } .selected .hero-initial[b-rkb6xeq444] { color: #e2c87e; } .hero-info[b-rkb6xeq444] { flex: 1; min-width: 0; } .hero-name[b-rkb6xeq444] { font-weight: 700; font-size: 0.95rem; color: #fff; } .hero-title-text[b-rkb6xeq444] { font-size: 0.75rem; color: rgba(255, 255, 255, 0.35); } .hero-stats[b-rkb6xeq444] { display: flex; gap: 0.5rem; margin-top: 0.2rem; } .stat-hp[b-rkb6xeq444], .stat-mr[b-rkb6xeq444] { font-size: 0.65rem; font-weight: 700; padding: 0.1rem 0.4rem; border-radius: 3px; } .stat-hp[b-rkb6xeq444] { background: rgba(220, 53, 69, 0.2); color: #ef9a9a; } .stat-mr[b-rkb6xeq444] { background: rgba(30, 136, 229, 0.2); color: #90caf9; } .selected-check[b-rkb6xeq444] { color: #e2c87e; font-size: 1.2rem; font-weight: 700; flex-shrink: 0; } .taken-label[b-rkb6xeq444] { font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.3); flex-shrink: 0; } .watch-footer[b-rkb6xeq444] { text-align: center; margin-top: 0.5rem; } .watch-hint[b-rkb6xeq444] { color: rgba(255, 255, 255, 0.5); margin-top: 0.5rem; font-size: 0.85rem; } /* /Components/Pages/Game/Lobby.razor.rz.scp.css */ /* === LOBBY CONTAINER === */ .lobby[b-sme5fl0frp] { max-width: 1000px; margin: 0 auto; padding: 2rem 1.5rem 4rem; } /* === HEADER === */ .lobby-header[b-sme5fl0frp] { text-align: center; margin-bottom: 2.5rem; } .lobby-title[b-sme5fl0frp] { font-size: clamp(1.5rem, 4vw, 2.25rem); font-weight: 800; color: #fff; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.5rem; text-shadow: 0 0 30px rgba(226, 200, 126, 0.2); } .lobby-subtitle[b-sme5fl0frp] { color: rgba(255, 255, 255, 0.4); font-size: 0.95rem; } /* === LOADING === */ .lobby-loading[b-sme5fl0frp] { text-align: center; padding: 4rem 0; color: rgba(255, 255, 255, 0.5); } .loading-spinner[b-sme5fl0frp] { width: 40px; height: 40px; border: 3px solid rgba(226, 200, 126, 0.15); border-top-color: #e2c87e; border-radius: 50%; margin: 0 auto 1rem; animation: spin-b-sme5fl0frp 0.8s linear infinite; } @keyframes spin-b-sme5fl0frp { to { transform: rotate(360deg); } } /* === ALERTS === */ .lobby-alert[b-sme5fl0frp] { display: flex; align-items: flex-start; gap: 1rem; background: rgba(255, 193, 7, 0.08); border: 1px solid rgba(255, 193, 7, 0.25); border-radius: 8px; padding: 1.25rem 1.5rem; max-width: 500px; margin: 0 auto; color: rgba(255, 255, 255, 0.7); font-size: 0.9rem; } .alert-icon[b-sme5fl0frp] { font-size: 1.5rem; color: #ffc107; flex-shrink: 0; } .lobby-alert a[b-sme5fl0frp] { color: #e2c87e; } /* === PLAYER PANELS === */ .players-row[b-sme5fl0frp] { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; } .player-panel[b-sme5fl0frp] { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 10px; padding: 1.25rem; transition: border-color 0.3s; } .panel-left[b-sme5fl0frp] { border-top: 3px solid rgba(100, 180, 255, 0.4); } .panel-right[b-sme5fl0frp] { border-top: 3px solid rgba(255, 120, 100, 0.4); } .panel-header[b-sme5fl0frp] { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.25rem; } .panel-number[b-sme5fl0frp] { font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.06); padding: 0.3rem 0.6rem; border-radius: 4px; flex-shrink: 0; } .name-input[b-sme5fl0frp] { flex: 1; background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 6px; padding: 0.5rem 0.75rem; color: #fff; font-size: 0.95rem; font-weight: 600; outline: none; transition: border-color 0.2s; } .name-input:focus[b-sme5fl0frp] { border-color: rgba(226, 200, 126, 0.4); } .name-input[b-sme5fl0frp]::placeholder { color: rgba(255, 255, 255, 0.2); } /* === HERO GRID === */ .hero-grid[b-sme5fl0frp] { display: flex; flex-direction: column; gap: 0.5rem; } .hero-option[b-sme5fl0frp] { display: flex; align-items: center; gap: 0.75rem; padding: 0.65rem 0.75rem; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.06); background: rgba(0, 0, 0, 0.2); cursor: pointer; transition: all 0.2s; position: relative; } .hero-option:hover:not(.taken)[b-sme5fl0frp] { border-color: rgba(226, 200, 126, 0.3); background: rgba(226, 200, 126, 0.05); } .hero-option.selected[b-sme5fl0frp] { border-color: rgba(226, 200, 126, 0.5); background: rgba(226, 200, 126, 0.08); box-shadow: 0 0 20px rgba(226, 200, 126, 0.08); } .hero-option.taken[b-sme5fl0frp] { opacity: 0.35; cursor: not-allowed; } .hero-portrait[b-sme5fl0frp] { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, rgba(226, 200, 126, 0.15), rgba(226, 200, 126, 0.05)); border: 2px solid rgba(255, 255, 255, 0.1); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .selected .hero-portrait[b-sme5fl0frp] { border-color: rgba(226, 200, 126, 0.5); } .hero-initial[b-sme5fl0frp] { font-size: 1.1rem; font-weight: 800; color: rgba(255, 255, 255, 0.5); } .selected .hero-initial[b-sme5fl0frp] { color: #e2c87e; } .hero-info[b-sme5fl0frp] { flex: 1; min-width: 0; } .hero-name[b-sme5fl0frp] { font-weight: 700; font-size: 0.95rem; color: #fff; } .hero-title-text[b-sme5fl0frp] { font-size: 0.75rem; color: rgba(255, 255, 255, 0.35); } .hero-stats[b-sme5fl0frp] { display: flex; gap: 0.5rem; margin-top: 0.2rem; } .stat-hp[b-sme5fl0frp], .stat-mr[b-sme5fl0frp] { font-size: 0.65rem; font-weight: 700; padding: 0.1rem 0.4rem; border-radius: 3px; } .stat-hp[b-sme5fl0frp] { background: rgba(220, 53, 69, 0.2); color: #ef9a9a; } .stat-mr[b-sme5fl0frp] { background: rgba(30, 136, 229, 0.2); color: #90caf9; } .selected-check[b-sme5fl0frp] { color: #e2c87e; font-size: 1.2rem; font-weight: 700; flex-shrink: 0; } .taken-label[b-sme5fl0frp] { font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.3); flex-shrink: 0; } /* === HERO PREVIEW === */ .hero-preview[b-sme5fl0frp] { margin-top: 1rem; padding: 0.75rem; background: rgba(226, 200, 126, 0.04); border: 1px solid rgba(226, 200, 126, 0.1); border-radius: 6px; } .preview-name[b-sme5fl0frp] { font-weight: 700; color: #e2c87e; font-size: 0.9rem; } .preview-title[b-sme5fl0frp] { font-size: 0.75rem; color: rgba(255, 255, 255, 0.4); margin-bottom: 0.25rem; } .preview-desc[b-sme5fl0frp] { font-size: 0.8rem; color: rgba(255, 255, 255, 0.5); line-height: 1.4; margin-bottom: 0.5rem; } .preview-abilities[b-sme5fl0frp] { display: flex; flex-direction: column; gap: 0.25rem; } .preview-ability[b-sme5fl0frp] { font-size: 0.75rem; color: rgba(255, 255, 255, 0.45); } .ability-name[b-sme5fl0frp] { color: rgba(255, 255, 255, 0.65); font-weight: 600; } .ability-name[b-sme5fl0frp]::after { content: ' — '; color: rgba(255, 255, 255, 0.2); } /* === FOOTER / START BUTTON === */ .lobby-footer[b-sme5fl0frp] { text-align: center; margin-top: 2.5rem; } .start-button[b-sme5fl0frp] { position: relative; display: inline-block; padding: 1rem 3.5rem; background: linear-gradient(135deg, #b8860b, #daa520, #b8860b); color: #1a0f00; font-size: 1.15rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; border: 1px solid rgba(218, 165, 32, 0.6); border-radius: 4px; cursor: pointer; box-shadow: 0 4px 20px rgba(184, 134, 11, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2); transition: transform 0.2s, box-shadow 0.2s; overflow: hidden; } .start-button:hover:not(.disabled)[b-sme5fl0frp] { transform: translateY(-2px); box-shadow: 0 6px 30px rgba(184, 134, 11, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3); } .start-button:active:not(.disabled)[b-sme5fl0frp] { transform: translateY(0); } .start-button.disabled[b-sme5fl0frp] { opacity: 0.35; cursor: not-allowed; } .start-button-text[b-sme5fl0frp] { position: relative; z-index: 1; } .start-button-glow[b-sme5fl0frp] { position: absolute; inset: -2px; background: linear-gradient(135deg, transparent 30%, rgba(255, 255, 255, 0.2) 50%, transparent 70%); animation: shimmer-b-sme5fl0frp 3s ease-in-out infinite; } .disabled .start-button-glow[b-sme5fl0frp] { animation: none; opacity: 0; } @keyframes shimmer-b-sme5fl0frp { 0%, 100% { transform: translateX(-100%); } 50% { transform: translateX(100%); } } .start-hint[b-sme5fl0frp] { color: rgba(255, 255, 255, 0.3); font-size: 0.85rem; margin-top: 0.75rem; } .mode-toggle[b-sme5fl0frp] { display: inline-flex; gap: 4px; margin-top: 1rem; background: rgba(0, 0, 0, 0.35); border-radius: 999px; padding: 4px; border: 1px solid rgba(255, 255, 255, 0.08); } .mode-btn[b-sme5fl0frp] { background: transparent; color: rgba(255, 255, 255, 0.55); border: none; padding: 6px 18px; border-radius: 999px; font-size: 0.85rem; font-weight: 700; cursor: pointer; transition: background 0.15s, color 0.15s; } .mode-btn:hover[b-sme5fl0frp] { color: rgba(255, 255, 255, 0.85); } .mode-btn.active[b-sme5fl0frp] { background: linear-gradient(135deg, #b8860b, #daa520); color: #1a0f00; } .ai-label[b-sme5fl0frp] { color: #e2c87e; font-weight: 700; font-size: 0.95rem; } .ai-difficulty-picker[b-sme5fl0frp] { margin-top: 1rem; display: flex; flex-direction: column; gap: 6px; } .picker-label[b-sme5fl0frp] { font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: rgba(255, 255, 255, 0.6); margin-bottom: 4px; } .diff-option[b-sme5fl0frp] { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(0, 0, 0, 0.2); cursor: pointer; transition: border-color 0.15s, background 0.15s; } .diff-option:hover[b-sme5fl0frp] { border-color: rgba(226, 200, 126, 0.35); } .diff-option.selected[b-sme5fl0frp] { border-color: rgba(226, 200, 126, 0.55); background: rgba(226, 200, 126, 0.08); } .diff-option input[type="radio"][b-sme5fl0frp] { accent-color: #e2c87e; } .diff-name[b-sme5fl0frp] { font-weight: 700; color: #fff; font-size: 0.9rem; min-width: 60px; } .diff-desc[b-sme5fl0frp] { font-size: 0.75rem; color: rgba(255, 255, 255, 0.55); } .ai-info[b-sme5fl0frp] { margin-top: 12px; padding: 8px 12px; background: rgba(0, 0, 0, 0.25); border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.06); font-size: 0.75rem; color: rgba(255, 255, 255, 0.55); line-height: 1.4; } .deck-picker[b-sme5fl0frp] { margin-top: 12px; padding: 10px 12px; background: rgba(0, 0, 0, 0.25); border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.08); } .deck-picker-label[b-sme5fl0frp] { font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: rgba(255, 255, 255, 0.6); margin-bottom: 6px; } .deck-picker-empty[b-sme5fl0frp] { font-size: 0.8rem; color: rgba(255, 255, 255, 0.7); line-height: 1.4; } .deck-picker-empty a[b-sme5fl0frp] { color: #8eecc6; } /* === RESPONSIVE === */ @media (max-width: 700px) { .players-row[b-sme5fl0frp] { grid-template-columns: 1fr; } .lobby[b-sme5fl0frp] { padding: 1.5rem 1rem 3rem; } } .searching-panel[b-sme5fl0frp] { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.5rem; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; color: var(--bs-body-color); } .searching-text[b-sme5fl0frp] { display: flex; flex-direction: column; flex: 1; } .searching-elapsed[b-sme5fl0frp] { font-size: 0.85rem; opacity: 0.7; } /* "More ways to play" strip: tertiary actions below the primary CTA */ .more-modes-strip[b-sme5fl0frp] { margin-top: 1.5rem; display: flex; align-items: center; justify-content: center; gap: 1rem; opacity: 0.7; font-size: 0.85rem; } .more-modes-label[b-sme5fl0frp] { color: var(--bs-body-color); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; font-size: 0.7rem; } .more-modes-link[b-sme5fl0frp] { background: none; border: 1px solid rgba(255,255,255,0.15); color: rgba(255,255,255,0.8); padding: 4px 12px; border-radius: 4px; text-decoration: none; cursor: pointer; transition: all 0.15s; } .more-modes-link:hover[b-sme5fl0frp] { background: rgba(255,255,255,0.06); color: #fff; border-color: rgba(255,255,255,0.3); } /* ── Queue screen (Quick Match in-progress) ─────────────────────────── */ .queue-screen[b-sme5fl0frp] { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.25rem; } .queue-section[b-sme5fl0frp] { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; overflow: hidden; } .queue-section-you[b-sme5fl0frp] { border-color: rgba(102,187,106,0.4); background: rgba(102,187,106,0.06); } .queue-section-header[b-sme5fl0frp] { padding: 0.5rem 1rem; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.7rem; font-weight: 700; color: rgba(255,255,255,0.6); background: rgba(0,0,0,0.15); } .queue-row[b-sme5fl0frp] { display: flex; align-items: center; gap: 0.75rem; padding: 0.65rem 1rem; border-top: 1px solid rgba(255,255,255,0.05); } .queue-section-header + .queue-row[b-sme5fl0frp] { border-top: none; } .queue-row-you[b-sme5fl0frp] { background: rgba(102,187,106,0.05); } .queue-row-ai[b-sme5fl0frp] { opacity: 0.85; } .queue-avatar[b-sme5fl0frp] { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #4a5b8c, #6e88c8); display: flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; } .queue-avatar-opp[b-sme5fl0frp] { background: linear-gradient(135deg, #8c4a4a, #c86e6e); } /* Practice opponents wear their difficulty's portrait rather than one shared robot emoji, so who you are about to face reads before the label does. */ .queue-avatar-ai[b-sme5fl0frp] { background: rgba(255,255,255,0.1); font-size: 1.1rem; overflow: hidden; flex-shrink: 0; } .queue-avatar-ai img[b-sme5fl0frp] { width: 100%; height: 100%; object-fit: cover; display: block; } .queue-row-main[b-sme5fl0frp] { flex: 1; display: flex; flex-direction: column; } .queue-row-name[b-sme5fl0frp] { font-weight: 600; color: var(--bs-body-color); } .queue-row-meta[b-sme5fl0frp] { font-size: 0.8rem; color: rgba(255,255,255,0.55); } .queue-row-clock[b-sme5fl0frp] { font-size: 0.8rem; color: rgba(255,255,255,0.55); font-variant-numeric: tabular-nums; min-width: 50px; text-align: right; } /* The pace a waiter queued at. Shown on every row because you can only be matched with someone who chose the same one — without it, a greyed-out Play button would look like a bug. */ .queue-row-speed[b-sme5fl0frp] { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 0.15rem 0.5rem; border-radius: 999px; color: rgba(255,255,255,0.75); background: rgba(255,255,255,0.08); white-space: nowrap; } /* Someone playing at a different pace: still listed, so the queue doesn't look empty, but visibly not available to you. */ .queue-row-mismatch[b-sme5fl0frp] { opacity: 0.5; } .queue-row-mismatch .queue-row-speed[b-sme5fl0frp] { color: #ffcc66; background: rgba(255,204,102,0.14); } .ai-diff[b-sme5fl0frp] { font-size: 0.7rem; padding: 1px 6px; border-radius: 3px; margin-left: 4px; text-transform: uppercase; letter-spacing: 0.04em; } .ai-diff-Easy[b-sme5fl0frp] { background: rgba(102,187,106,0.2); color: #99e0a0; } .ai-diff-Normal[b-sme5fl0frp] { background: rgba(33,150,243,0.2); color: #80c7f5; } .ai-diff-Hard[b-sme5fl0frp] { background: rgba(229,57,53,0.2); color: #f0908d; } .queue-empty[b-sme5fl0frp] { padding: 1rem; text-align: center; color: rgba(255,255,255,0.55); font-style: italic; } .queue-auto-match[b-sme5fl0frp] { display: flex; flex-direction: column; gap: 0.5rem; align-items: center; padding: 0.75rem; background: rgba(0,0,0,0.15); border-radius: 6px; } .queue-auto-match-bar[b-sme5fl0frp] { width: 100%; height: 6px; background: rgba(255,255,255,0.08); border-radius: 3px; overflow: hidden; } .queue-auto-match-fill[b-sme5fl0frp] { height: 100%; background: linear-gradient(90deg, #66bb6a, #f0a020); transition: width 0.9s linear; } .queue-auto-match-text[b-sme5fl0frp] { font-size: 0.8rem; color: rgba(255,255,255,0.6); } /* ── Deck-first quick start ────────────────────────────────────────────────── The lobby used to ask for mode, hero, deck, difficulty and pacing before you could start. A deck carries its hero, so picking a deck answers both — and everything else moved behind a disclosure. */ .quick-start[b-sme5fl0frp] { max-width: 900px; margin: 0 auto 1.5rem; } .quick-start-who[b-sme5fl0frp] { color: rgba(255, 255, 255, 0.7); margin-bottom: 1rem; font-size: 0.95rem; } .quick-start-guest-note[b-sme5fl0frp] { color: rgba(255, 255, 255, 0.45); font-size: 0.85rem; } .deck-choice-grid[b-sme5fl0frp] { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0.85rem; } .deck-choice[b-sme5fl0frp] { position: relative; display: flex; align-items: center; gap: 0.75rem; text-align: left; padding: 0.75rem; border-radius: 0.6rem; border: 2px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.04); color: inherit; cursor: pointer; } .deck-choice:hover[b-sme5fl0frp] { border-color: rgba(255, 255, 255, 0.35); } .deck-choice.selected[b-sme5fl0frp] { border-color: #d2860b; background: rgba(210, 134, 11, 0.12); } .deck-choice-portrait[b-sme5fl0frp] { width: 56px; height: 56px; border-radius: 0.4rem; overflow: hidden; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.35); font-size: 1.5rem; font-weight: 700; } .deck-choice-portrait img[b-sme5fl0frp] { width: 100%; height: 100%; object-fit: cover; } .deck-choice-name[b-sme5fl0frp] { font-weight: 700; } .deck-choice-sub[b-sme5fl0frp] { font-size: 0.82rem; color: rgba(255, 255, 255, 0.55); } .lobby-options[b-sme5fl0frp] { margin-top: 1.25rem; } .lobby-options summary[b-sme5fl0frp] { cursor: pointer; color: rgba(255, 255, 255, 0.6); font-size: 0.9rem; } .lobby-options-body[b-sme5fl0frp] { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin-top: 0.85rem; } /* /Components/Pages/Home.razor.rz.scp.css */ /* === HERO SECTION === */ .hero-section[b-za56poivb8] { position: relative; min-height: 80vh; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; background: radial-gradient(ellipse at 50% 30%, rgba(60, 100, 40, 0.25) 0%, transparent 60%), radial-gradient(ellipse at 20% 80%, rgba(180, 140, 50, 0.1) 0%, transparent 50%), radial-gradient(ellipse at 80% 70%, rgba(40, 80, 60, 0.15) 0%, transparent 50%); } .hero-particles[b-za56poivb8] { position: absolute; inset: 0; background-image: radial-gradient(1px 1px at 10% 20%, rgba(226, 200, 126, 0.4) 50%, transparent 50%), radial-gradient(1px 1px at 30% 60%, rgba(226, 200, 126, 0.3) 50%, transparent 50%), radial-gradient(1px 1px at 50% 10%, rgba(226, 200, 126, 0.2) 50%, transparent 50%), radial-gradient(1px 1px at 70% 40%, rgba(226, 200, 126, 0.35) 50%, transparent 50%), radial-gradient(1px 1px at 90% 80%, rgba(226, 200, 126, 0.25) 50%, transparent 50%), radial-gradient(1.5px 1.5px at 15% 90%, rgba(226, 200, 126, 0.3) 50%, transparent 50%), radial-gradient(1.5px 1.5px at 85% 15%, rgba(226, 200, 126, 0.2) 50%, transparent 50%); animation: drift-b-za56poivb8 20s linear infinite; } @keyframes drift-b-za56poivb8 { 0% { transform: translateY(0); } 100% { transform: translateY(-20px); } } .hero-content[b-za56poivb8] { position: relative; z-index: 1; padding: 2rem; } .hero-emblem[b-za56poivb8] { position: relative; width: 100px; height: 100px; margin: 0 auto 2rem; } .emblem-ring[b-za56poivb8] { position: absolute; inset: 0; border: 2px solid rgba(226, 200, 126, 0.4); border-radius: 50%; animation: spin-slow-b-za56poivb8 12s linear infinite; } .emblem-ring[b-za56poivb8]::before { content: ''; position: absolute; inset: -6px; border: 1px solid rgba(226, 200, 126, 0.15); border-radius: 50%; } @keyframes spin-slow-b-za56poivb8 { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .emblem-icon[b-za56poivb8] { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 2.5rem; color: #e2c87e; filter: drop-shadow(0 0 8px rgba(226, 200, 126, 0.5)); } /* The headline is the wordmark now; the

stays for heading structure and the alt text carries the accessible name. */ .hero-logo[b-za56poivb8] { width: min(520px, 78vw); height: auto; display: block; margin: 0 auto; } .hero-title[b-za56poivb8] { font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: 800; color: #fff; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 0.5rem; text-shadow: 0 0 40px rgba(226, 200, 126, 0.3), 0 2px 4px rgba(0, 0, 0, 0.5); } .hero-subtitle[b-za56poivb8] { font-size: clamp(1rem, 2.5vw, 1.35rem); color: rgba(255, 255, 255, 0.6); max-width: 600px; margin: 0 auto 2.5rem; line-height: 1.6; } /* === PLAY BUTTON === */ .play-button[b-za56poivb8] { position: relative; display: inline-block; padding: 1rem 3rem; background: linear-gradient(135deg, #b8860b, #daa520, #b8860b); color: #1a0f00; font-size: 1.15rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; text-decoration: none; border-radius: 4px; border: 1px solid rgba(218, 165, 32, 0.6); box-shadow: 0 4px 20px rgba(184, 134, 11, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2); transition: transform 0.2s, box-shadow 0.2s; overflow: hidden; } .play-button:hover[b-za56poivb8] { transform: translateY(-2px); box-shadow: 0 6px 30px rgba(184, 134, 11, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3); color: #1a0f00; text-decoration: none; } .play-button:active[b-za56poivb8] { transform: translateY(0); } .play-button-text[b-za56poivb8] { position: relative; z-index: 1; } .play-button-glow[b-za56poivb8] { position: absolute; inset: -2px; background: linear-gradient(135deg, transparent 30%, rgba(255, 255, 255, 0.2) 50%, transparent 70%); animation: shimmer-b-za56poivb8 3s ease-in-out infinite; } @keyframes shimmer-b-za56poivb8 { 0%, 100% { transform: translateX(-100%); } 50% { transform: translateX(100%); } } .play-button-alt[b-za56poivb8] { background: linear-gradient(135deg, #2d5a1e, #3d7a28, #2d5a1e); color: #e8f5e0; border-color: rgba(61, 122, 40, 0.6); box-shadow: 0 4px 20px rgba(45, 90, 30, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1); } .play-button-alt:hover[b-za56poivb8] { color: #fff; box-shadow: 0 6px 30px rgba(45, 90, 30, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.15); } /* === FEATURES === */ .features-section[b-za56poivb8] { padding: 5rem 2rem; background: linear-gradient(180deg, transparent 0%, rgba(226, 200, 126, 0.03) 50%, transparent 100%); } .features-grid[b-za56poivb8] { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; max-width: 1000px; margin: 0 auto; } .feature-card[b-za56poivb8] { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 8px; padding: 2rem; text-align: center; transition: border-color 0.3s, background 0.3s; } .feature-card:hover[b-za56poivb8] { border-color: rgba(226, 200, 126, 0.2); background: rgba(255, 255, 255, 0.05); } .feature-icon[b-za56poivb8] { font-size: 2.5rem; margin-bottom: 1rem; color: #e2c87e; filter: drop-shadow(0 0 6px rgba(226, 200, 126, 0.3)); } .feature-card h2[b-za56poivb8] { color: #fff; font-size: 1.15rem; font-weight: 600; margin-bottom: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; } .feature-card p[b-za56poivb8] { color: rgba(255, 255, 255, 0.5); font-size: 0.9rem; line-height: 1.6; margin: 0; } /* === CARD SHOWCASE === */ .card-showcase[b-za56poivb8] { padding: 4rem 2rem 5rem; } .section-title[b-za56poivb8] { text-align: center; color: #fff; font-size: 1.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 3rem; } .section-title[b-za56poivb8]::after { content: ''; display: block; width: 60px; height: 2px; background: linear-gradient(90deg, transparent, #e2c87e, transparent); margin: 0.75rem auto 0; } .card-types-grid[b-za56poivb8] { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem; max-width: 1000px; margin: 0 auto; } .card-type[b-za56poivb8] { background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 6px; padding: 1.25rem; transition: border-color 0.3s; } .card-type:hover[b-za56poivb8] { border-color: rgba(255, 255, 255, 0.12); } .card-type-header[b-za56poivb8] { font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em; padding: 0.35rem 0.75rem; border-radius: 3px; display: inline-block; margin-bottom: 0.75rem; } .card-type-header.resource[b-za56poivb8] { background: rgba(46, 125, 50, 0.3); color: #81c784; } .card-type-header.drone[b-za56poivb8] { background: rgba(198, 40, 40, 0.3); color: #ef9a9a; } .card-type-header.trap[b-za56poivb8] { background: rgba(142, 36, 170, 0.3); color: #ce93d8; } .card-type-header.defence[b-za56poivb8] { background: rgba(30, 136, 229, 0.3); color: #90caf9; } .card-type-header.action[b-za56poivb8] { background: rgba(255, 143, 0, 0.3); color: #ffcc80; } .card-type-header.upgrade[b-za56poivb8] { background: rgba(0, 172, 193, 0.3); color: #80deea; } /* Upgrade is the same tier the board paints gold; hero/spouse/pet reuse the board's own palette so the front page and the felt agree. */ .card-type-header.upgrade[b-za56poivb8] { background: rgba(212, 160, 23, 0.3); color: #ffd479; } .card-type-header.hero[b-za56poivb8] { background: rgba(226, 200, 126, 0.28); color: #e2c87e; } .card-type-header.spouse[b-za56poivb8] { background: rgba(181, 68, 110, 0.3); color: #f0a0bd; } .card-type-header.pet[b-za56poivb8] { background: rgba(224, 124, 36, 0.3); color: #ffbb7a; } .card-type p[b-za56poivb8] { color: rgba(255, 255, 255, 0.45); font-size: 0.85rem; line-height: 1.5; margin: 0; } /* === CTA === */ .cta-section[b-za56poivb8] { text-align: center; padding: 4rem 2rem 5rem; background: radial-gradient(ellipse at 50% 50%, rgba(60, 100, 40, 0.12) 0%, transparent 70%); } .cta-section h2[b-za56poivb8] { color: #fff; font-size: 1.75rem; font-weight: 700; margin-bottom: 0.75rem; } .cta-section p[b-za56poivb8] { color: rgba(255, 255, 255, 0.5); margin-bottom: 2rem; font-size: 1.05rem; } /* === RESPONSIVE === */ @media (max-width: 640px) { .hero-section[b-za56poivb8] { min-height: 70vh; } .features-grid[b-za56poivb8], .card-types-grid[b-za56poivb8] { grid-template-columns: 1fr; } .play-button[b-za56poivb8] { padding: 0.85rem 2.5rem; } }