/* /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-defencesystem[b-i303uljfbs] { background: #5f6b7c; } .type-surveillance[b-i303uljfbs] { background: #6a5acd; } .type-action[b-i303uljfbs] { background: #c0392b; } .type-enhancement[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-defencesystem[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-enhancement[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-ultrarare[b-g75pypfvqs] { background: linear-gradient(135deg, #ffd700, #ffaa00); box-shadow: 0 0 6px rgba(255,215,0,0.6); } /* === Foil Shimmer for Rare & UltraRare === */ .card-view.card-type-drone .card-face .rarity-rare[b-g75pypfvqs], .card-view.card-type-drone .card-face .rarity-ultrarare[b-g75pypfvqs] { /* Handled by parent overlay */ } .card-view:has(.rarity-rare) .card-front[b-g75pypfvqs]::after, .card-view:has(.rarity-ultrarare) .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-ultrarare) .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] { 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); } .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 = green, opponent = purple. */ .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] { 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; 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: #0c1410; background: linear-gradient(180deg, #8ff09a, #58cf6f); box-shadow: 0 0 10px rgba(126, 231, 135, 0.35); } .dpt-turn.is-opp[b-a517ujbjpa] { color: #f2e9ff; background: linear-gradient(180deg, rgba(174, 141, 250, 0.7), rgba(130, 96, 220, 0.7)); } .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: #7ee787; } .dpt-track.is-opp .dpt-track-label[b-a517ujbjpa] { color: #c4a7ff; } .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, #3fd067, #229544); color: #08130c; box-shadow: 0 0 8px rgba(47, 190, 84, 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, #b394fb, #8a63ee); color: #120b1f; box-shadow: 0 0 8px rgba(157, 120, 245, 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(47, 190, 84, 0.42), rgba(24, 90, 46, 0.5)); box-shadow: inset 0 0 0 1.5px rgba(126, 231, 135, 0.7), 0 0 12px rgba(47, 190, 84, 0.2); } .dpt-track.is-opp .dpt-pill[b-a517ujbjpa] { background: linear-gradient(180deg, rgba(157, 120, 245, 0.42), rgba(88, 60, 170, 0.5)); box-shadow: inset 0 0 0 1.5px rgba(196, 167, 255, 0.7), 0 0 12px rgba(157, 120, 245, 0.2); } .dpt-play[b-a517ujbjpa] { font-size: 0.62rem; } .dpt-track.is-you .dpt-play[b-a517ujbjpa] { color: #b6ffbf; } .dpt-track.is-opp .dpt-play[b-a517ujbjpa] { color: #ddccff; } .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 enhancement 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); } } /* Enhancement 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; } /* Enhancement type color */ .attachment-card .type-enhancement[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/PhaseTimeline.razor.rz.scp.css */ .phase-timeline[b-ydv3c09qmk] { display: inline-flex; align-items: center; gap: 3px; } .phase-step[b-ydv3c09qmk] { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px; border-radius: 10px; font-size: 0.7rem; border: 1px solid transparent; opacity: 0.45; transition: opacity 0.15s ease, background 0.15s ease; } .phase-step.done[b-ydv3c09qmk] { opacity: 0.7; } .phase-step.active[b-ydv3c09qmk] { opacity: 1; font-weight: 700; background: rgba(255, 212, 121, 0.22); border-color: rgba(255, 212, 121, 0.6); } .phase-step-icon[b-ydv3c09qmk] { font-size: 0.85em; } .phase-step-sep[b-ydv3c09qmk] { opacity: 0.4; font-size: 0.8rem; } /* /Components/Game/PlayerBar.razor.rz.scp.css */ /* Top player bar (mockup: content.png) — full-width dark, gold-bordered panel. You (green) hug the left edge, opponent (purple) mirrors on the right with the deck/trash counts pushed to the far edge, and a gold VS medallion in the centre. */ .pbar[b-1rllj869u6] { display: flex; align-items: center; gap: 14px; background: radial-gradient(120% 160% at 50% -40%, rgba(255, 212, 121, 0.06), transparent 60%), linear-gradient(180deg, rgba(18, 27, 21, 0.96), rgba(9, 14, 11, 0.97)); border: 1px solid rgba(255, 212, 121, 0.42); border-radius: 14px; padding: 9px 18px; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.04); backdrop-filter: blur(5px); color: #e6efe9; user-select: none; } .pbar-side[b-1rllj869u6] { display: flex; align-items: center; gap: 14px; flex: 1 1 0; min-width: 0; } /* Same badge/name/piles layout as the "you" side, hugging the right edge. */ .pbar-opp[b-1rllj869u6] { justify-content: flex-end; } /* Crest / crate badge. */ .pbar-badge[b-1rllj869u6] { width: 46px; height: 46px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; line-height: 1; flex: 0 0 auto; } .pbar-badge-you[b-1rllj869u6] { background: linear-gradient(160deg, rgba(47, 190, 84, 0.28), rgba(20, 70, 38, 0.35)); box-shadow: inset 0 0 0 1.5px rgba(126, 231, 135, 0.6), 0 0 14px rgba(47, 190, 84, 0.22); } .pbar-badge-opp[b-1rllj869u6] { background: linear-gradient(160deg, rgba(157, 120, 245, 0.28), rgba(70, 45, 120, 0.35)); box-shadow: inset 0 0 0 1.5px rgba(196, 167, 255, 0.6), 0 0 14px rgba(157, 120, 245, 0.22); } .pbar-id[b-1rllj869u6] { line-height: 1.15; min-width: 0; } .pbar-name[b-1rllj869u6] { font-weight: 800; font-size: 1.16rem; letter-spacing: 0.03em; text-transform: uppercase; white-space: nowrap; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55); } .pbar-you .pbar-name[b-1rllj869u6] { color: #d9f5e2; } .pbar-opp .pbar-name[b-1rllj869u6] { color: #ece3ff; } .pbar-tag[b-1rllj869u6] { font-size: 0.82rem; font-weight: 800; letter-spacing: 0.04em; } .pbar-tag-you[b-1rllj869u6] { color: #7ee787; } .pbar-tag-opp[b-1rllj869u6] { color: #c4a7ff; } /* Deck / trash count pills — small caps label over a big tabular number. */ .pbar-piles[b-1rllj869u6] { display: flex; gap: 9px; margin-top: 6px; } .pbar-pile[b-1rllj869u6] { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 50px; padding: 4px 10px 5px; border-radius: 9px; line-height: 1; } .pbar-pile small[b-1rllj869u6] { font-size: 0.56rem; letter-spacing: 0.12em; font-weight: 800; opacity: 0.72; margin-bottom: 3px; } .pbar-pile b[b-1rllj869u6] { font-size: 1.32rem; font-weight: 800; font-variant-numeric: tabular-nums; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); } .pbar-deck[b-1rllj869u6] { background: linear-gradient(180deg, rgba(45, 110, 66, 0.42), rgba(24, 60, 36, 0.5)); box-shadow: inset 0 0 0 1px rgba(110, 170, 90, 0.45); color: #dff3e4; } .pbar-trash[b-1rllj869u6] { background: linear-gradient(180deg, rgba(120, 47, 47, 0.42), rgba(64, 24, 24, 0.5)); box-shadow: inset 0 0 0 1px rgba(170, 80, 80, 0.45); color: #f3dede; } /* Centre VS medallion. */ .pbar-vs[b-1rllj869u6] { flex: 0 0 auto; position: relative; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; } .pbar-vs[b-1rllj869u6]::before, .pbar-vs[b-1rllj869u6]::after { content: ""; position: absolute; top: 50%; width: 20px; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 212, 121, 0.55)); } .pbar-vs[b-1rllj869u6]::before { right: 100%; margin-right: 4px; transform: scaleX(-1); } .pbar-vs[b-1rllj869u6]::after { left: 100%; margin-left: 4px; } .pbar-vs span[b-1rllj869u6] { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; font-weight: 900; font-size: 1.02rem; letter-spacing: 0.05em; color: #ffd479; background: radial-gradient(circle at 50% 40%, rgba(255, 212, 121, 0.16), rgba(20, 16, 8, 0.7)); box-shadow: inset 0 0 0 1.5px rgba(255, 212, 121, 0.6), 0 0 12px rgba(255, 212, 121, 0.2); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); } /* /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/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] { font-size: 1.1rem; color: var(--bs-body-color); } .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; } } /* /Components/Layout/FeedbackWidget.razor.rz.scp.css */ .lawn-feedback-root[b-awkg6tv6zb] { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 1040; /* above board, below GameOverModal backdrop + the dialog */ } .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); } @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-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); } .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] { font-size: 1.1rem; color: var(--bs-body-color); } .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; } .player-brand[b-9xzao161gq] { font-size: 1.25rem; font-weight: 700; color: #e2c87e; text-decoration: none; letter-spacing: 0.05em; text-transform: uppercase; } .player-brand:hover[b-9xzao161gq] { color: #f0d88a; text-decoration: none; } .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; } /* /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/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/Decks/DeckEditor.razor.rz.scp.css */ /* === Hero-pick phase ===================================================== */ .hero-pick-grid[b-zvasezfd60] { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; margin-top: 20px; } .hero-pick-tile[b-zvasezfd60] { background: var(--bs-body-bg); border: 2px solid rgba(0,0,0,0.15); 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(0,0,0,0.2); 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(0,0,0,0.05); 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: #0d5320; } .count-bad[b-zvasezfd60] { background: rgba(220, 53, 69, 0.18); color: #842029; } .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; background: var(--bs-body-bg); border: 1px solid rgba(0,0,0,0.15); border-radius: 8px; min-height: 0; } .pool-filters[b-zvasezfd60] { display: flex; gap: 8px; padding: 10px; border-bottom: 1px solid rgba(0,0,0,0.1); } .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(0,0,0,0.1); 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(0,0,0,0.05); gap: 8px; } .pool-row:hover[b-zvasezfd60], .deck-row:hover[b-zvasezfd60] { background: rgba(0,0,0,0.03); } .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(0,0,0,0.08); 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: #b45309; 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: #0d5320; 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; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); 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; } .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: cover; 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-defencesystem[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-enhancement[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; } .card-tile-meta[b-zvasezfd60] { display: flex; gap: 0.25rem; flex-wrap: wrap; margin-top: 0.2rem; } .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: 640px; width: 92vw; max-height: 90vh; overflow: auto; display: grid; grid-template-columns: 240px 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; } } .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] { width: 240px; 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); } .inspector-count[b-zvasezfd60] { font-weight: 700; color: rgba(255,255,255,0.8); min-width: 80px; text-align: center; } @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); } } /* /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/Game/Board.razor.rz.scp.css */ /* === Turn Transition (hot seat) === */ .turn-transition[b-v0539y4sfd] { 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-v0539y4sfd] { text-align: center; animation: fade-in-b-v0539y4sfd 0.4s ease; } .transition-content h2[b-v0539y4sfd] { color: rgba(255, 255, 255, 0.35); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 3px; margin-bottom: 8px; } .transition-player-name[b-v0539y4sfd] { 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-v0539y4sfd] { color: rgba(255, 255, 255, 0.45); font-size: 1rem; margin-bottom: 16px; } .transition-phase[b-v0539y4sfd] { display: flex; gap: 12px; justify-content: center; align-items: center; } @keyframes fade-in-b-v0539y4sfd { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } /* === 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[b-v0539y4sfd] { display: flex; justify-content: center; align-items: flex-start; padding: 10px 14px 4px; position: relative; z-index: 30; flex-shrink: 0; } .top-bar[b-v0539y4sfd] .pbar { width: min(880px, 100%); } .top-settings[b-v0539y4sfd] { position: absolute; right: 14px; top: 10px; } /* Hero powers live in the header (top-left), mirroring the settings gear on the right — one cluster serving both the 3D and classic boards. */ .top-hero-powers[b-v0539y4sfd] { position: absolute; left: 14px; top: 10px; z-index: 35; display: flex; flex-direction: column; gap: 4px; max-width: 280px; background: linear-gradient(180deg, rgba(16, 24, 19, 0.92), rgba(10, 16, 12, 0.92)); border: 1px solid rgba(255, 212, 121, 0.4); border-radius: 10px; padding: 6px 10px 8px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4); } .top-hero-title[b-v0539y4sfd] { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.06em; color: #ffd479; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .top-hero-btns[b-v0539y4sfd] { display: flex; gap: 6px; flex-wrap: wrap; } .top-hero-powers .hero-power-btn[b-v0539y4sfd] { font-size: 0.72rem; padding: 4px 10px; } .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); transform: rotate(35deg); } .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; } /* --- 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; } .phase-name[b-v0539y4sfd] { 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; } .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; border-bottom: 1px solid rgba(255,255,255,0.04); color: #ccc; } /* --- 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-label[b-v0539y4sfd] { font-size: 0.65rem; color: #888; font-weight: 600; } .forecast-resource[b-v0539y4sfd] { font-size: 0.65rem; font-weight: 700; padding: 1px 6px; border-radius: 8px; opacity: 0.7; color: white; } .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; } /* --- 3D resource pool overlay (bottom-left, fades to transparent so cards show) --- */ .resource-overlay-3d[b-v0539y4sfd] { position: absolute; left: 14px; bottom: 10px; z-index: 5; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; max-width: 55%; padding: 8px 40px 8px 6px; background: linear-gradient(90deg, rgba(6, 10, 8, 0.72) 0%, rgba(6, 10, 8, 0.5) 45%, transparent 100%); font-size: 0.75rem; pointer-events: none; } /* On the 3D board the canvas now runs to the screen bottom behind the overlay bottom-bar, so lift the pool clear of the End Actions/Undo cluster. */ .battlefield-3d .resource-overlay-3d[b-v0539y4sfd] { bottom: 54px; } .res-none-3d[b-v0539y4sfd] { color: #8fae9d; font-style: italic; } .resource-overlay-3d .forecast-label[b-v0539y4sfd] { color: #8fae9d; font-size: 0.7rem; margin-left: 4px; } /* --- Hero power buttons (rendered in the header cluster) --- */ .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; } .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); } .queue-avatar-ai[b-sme5fl0frp] { background: rgba(255,255,255,0.1); font-size: 1.1rem; } .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; } .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); } /* /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)); } .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.enhancement[b-za56poivb8] { background: rgba(0, 172, 193, 0.3); color: #80deea; } .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; } }