/* ===== Route Panel Grid ===== */ .panel-route { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 0.75rem; } .panel-route.expedition-panel { padding: 0.85rem; grid-template-rows: auto auto minmax(0, 1fr) auto; } /* ===== Expedition Panel Head ===== */ .expedition-panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.75rem; margin-bottom: 0.55rem; } .expedition-panel-head h2 { margin: 0.25rem 0 0; font-size: 1.15rem; line-height: 1; letter-spacing: -0.02em; } .expedition-weather-meta { display: flex; gap: 0.65rem; color: var(--muted); font-size: 0.72rem; } /* ===== Route Summary Card (legacy) ===== */ .route-summary-card { padding: 1rem; border-radius: 18px; border-color: rgba(215, 138, 51, 0.32); background: linear-gradient(180deg, rgba(215, 138, 51, 0.12), rgba(255, 255, 255, 0)), rgba(7, 7, 7, 0.46); } .route-summary-card h2, .viewport-copy h2, .auth-hero-copy h1, .new-game-copy h1 { margin: 0.42rem 0 0; font-size: clamp(1.55rem, 3.4vw, 3.8rem); line-height: 0.96; letter-spacing: -0.05em; text-wrap: balance; } .route-summary-card h2 { font-size: clamp(1.9rem, 3vw, 2.8rem); } .route-summary-card p, .viewport-copy p, .auth-hero-copy p, .new-game-copy p, .modal-copy { color: rgba(239, 226, 206, 0.78); line-height: 1.5; } .route-summary-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.55rem; margin-top: 0.85rem; } .route-summary-meta div, .combat-health, .mini-intel-card { padding: 0.78rem; border-radius: 16px; background: rgba(255, 255, 255, 0.04); } .route-summary-meta small { display: block; margin-bottom: 0.25rem; color: var(--muted); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; } .route-summary-meta strong { font-size: 0.94rem; } .intel-meta { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.85rem; } /* ===== Route Card Thumb ===== */ .route-card-thumb { min-height: 88px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.08); background-position: center; background-size: cover; } .route-card-detail { display: flex; flex-wrap: wrap; gap: 0.45rem; color: var(--muted); font-size: 0.72rem; } /* ===== Risk Dots ===== */ .risk-dots { display: flex; gap: 0.28rem; margin-top: 0.58rem; } .risk-dots span { width: 13px; height: 13px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.03); } /* ===== Expedition Location Card ===== */ .expedition-location-card { padding: 0.65rem; border-radius: 14px; border: 1px solid rgba(215, 138, 51, 0.18); background: linear-gradient(180deg, rgba(215, 138, 51, 0.06), rgba(255, 255, 255, 0)), rgba(9, 8, 7, 0.52); display: grid; gap: 0.4rem; } .expedition-location-card strong { font-size: 1.05rem; } /* ===== Weather Block ===== */ .expedition-weather-block { display: flex; justify-content: space-between; align-items: center; padding: 0.55rem 0.7rem; border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06); } .expedition-weather-main { display: flex; align-items: center; gap: 0.5rem; } .expedition-weather-icon { width: 20px; height: 20px; flex: 0 0 20px; opacity: 0.85; } .expedition-weather-main span { font-size: 0.88rem; } /* ===== Risk Line ===== */ .expedition-risk-line { display: flex; justify-content: space-between; align-items: center; padding-top: 0.35rem; border-top: 1px solid rgba(255, 255, 255, 0.06); } .expedition-risk-line span { color: var(--muted); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; } .expedition-risk-line strong { font-size: 0.88rem; } /* ===== Expedition Head ===== */ .expedition-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; } .expedition-head h2 { margin: 0.3rem 0 0; font-size: 1.28rem; line-height: 1; letter-spacing: -0.03em; } .expedition-head-copy { display: flex; align-items: center; gap: 0.7rem; } /* ===== Expedition Core ===== */ .expedition-core { display: grid; gap: 0.8rem; padding: 0.95rem; border-radius: 18px; border: 1px solid rgba(215, 138, 51, 0.2); background: linear-gradient(180deg, rgba(215, 138, 51, 0.08), rgba(255, 255, 255, 0)), rgba(10, 8, 7, 0.68); } .expedition-core p { margin: 0; } /* ===== Expedition Status ===== */ .expedition-status-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; } .expedition-status-card { display: grid; gap: 0.6rem; padding: 0.75rem; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(9, 8, 7, 0.48); } .expedition-status-card small { display: block; margin-bottom: 0.25rem; color: var(--muted); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; } .expedition-status-cell { padding: 0.55rem; border-radius: 12px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.06); text-align: center; } .expedition-status-cell small { display: block; margin-bottom: 0.2rem; color: var(--muted); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; } .expedition-status-cell strong { font-size: 1rem; } .expedition-launch-button { width: 100%; min-height: 44px; font-size: 0.85rem; } /* ===== Expedition Routes Card ===== */ .expedition-routes-card { display: grid; gap: 0.6rem; min-height: 0; } .expedition-section-head { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; } .expedition-section-head > span { font-size: 0.82rem; font-weight: 600; letter-spacing: 0.06em; } /* ===== Expedition Toggle ===== */ .expedition-toggle { min-height: 30px; padding: 0 0.7rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.04); color: var(--muted); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; transition: border-color 150ms ease, background 150ms ease; } .expedition-toggle:hover { border-color: rgba(215, 138, 51, 0.28); background: rgba(215, 138, 51, 0.08); color: var(--text); } .expedition-toggle.active { border-color: rgba(141, 194, 106, 0.32); background: rgba(141, 194, 106, 0.1); color: #addb7f; } /* ===== Route Stack ===== */ .route-stack, .expedition-map-panel, .survivor-supply-panel, .survivor-actions-panel { min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); } .expedition-route-list, .expedition-map-grid { align-content: start; } .expedition-route-stack { display: grid; gap: 0.5rem; min-height: 0; overflow: auto; align-content: start; } /* ===== Expedition Route Card ===== */ .expedition-route-card { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 0.6rem; width: 100%; padding: 0.6rem; text-align: left; background: rgba(5, 5, 4, 0.48); color: var(--text); border-radius: 14px; border: 0; transition: border-color 150ms ease, transform 150ms ease; } .expedition-route-card::before { background-image: var(--hud-frame-route-idle); } .expedition-route-card.recommended::before { background-image: var(--hud-frame-route-active); } .expedition-route-card:hover:not(:disabled) { border-color: rgba(215, 138, 51, 0.22); transform: translateY(-1px); } .expedition-route-card.active { border-color: rgba(215, 138, 51, 0.28); } .expedition-route-card.tone-safe .risk-dots span.active { background: var(--safe); border-color: rgba(141, 194, 106, 0.6); } .expedition-route-card.tone-warn .risk-dots span.active { background: var(--warn); border-color: rgba(224, 180, 102, 0.6); } .expedition-route-card.tone-danger .risk-dots span.active { background: var(--danger); border-color: rgba(225, 109, 76, 0.6); } .expedition-route-card .route-card-thumb { min-height: 56px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.08); background-position: center; background-size: cover; overflow: hidden; } .expedition-route-card .route-card-copy { display: grid; gap: 0.2rem; align-content: center; } .expedition-route-card .route-card-copy strong { font-size: 0.94rem; } .expedition-route-card .route-card-copy p { margin: 0.2rem 0 0; color: rgba(239, 226, 206, 0.72); font-size: 0.78rem; line-height: 1.4; } .route-card-topline { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; } .route-card-topline strong { font-size: 0.94rem; } .route-card-topline span { color: var(--muted); font-size: 0.66rem; letter-spacing: 0.08em; } .route-card-detail { display: flex; gap: 0.55rem; margin-top: 0.35rem; color: var(--muted); font-size: 0.72rem; }