diff --git "a/frontend/styles.css" "b/frontend/styles.css" --- "a/frontend/styles.css" +++ "b/frontend/styles.css" @@ -31,7 +31,9 @@ body { min-height: 100vh; font-family: "Segoe UI", system-ui, sans-serif; color: var(--text); - background: radial-gradient(circle at top, #12182a 0%, var(--bg) 55%); + background: #09090f; + font-size: 14px; + line-height: 1.5; } .bg-glow { @@ -51,10 +53,11 @@ body { } .app:has(#screen-battle.active), -.app:has(#screen-deal.active) { - max-width: none; - width: 100%; - padding: 0; +.app:has(#screen-deal.active), +.app.app-arena-fullwidth:not(.app-scorecard-fullwidth) { + max-width: none !important; + width: 100% !important; + padding: 0 !important; } .screen { @@ -919,7 +922,9 @@ h1 { } .arena-landing-footer { - margin-top: 1.35rem; + margin-top: 1.75rem; + padding-top: 1.1rem; + border-top: 1px solid rgba(255, 255, 255, 0.1); opacity: 0; transition: opacity 0.5s ease 0.2s; } @@ -930,19 +935,21 @@ h1 { .arena-trust-badge { margin: 0; - font-size: 0.62rem; - font-weight: 600; - letter-spacing: 0.14em; + font-size: 0.78rem; + font-weight: 700; + letter-spacing: 0.16em; text-transform: uppercase; - color: rgba(154, 163, 181, 0.7); + color: rgba(126, 255, 240, 0.85); + text-shadow: 0 0 18px rgba(0, 230, 200, 0.2); } .arena-footer-line { - margin: 0.35rem auto 0; - max-width: 380px; - font-size: 0.68rem; - color: rgba(154, 163, 181, 0.45); - line-height: 1.4; + margin: 0.55rem auto 0; + max-width: 480px; + font-size: 0.88rem; + font-weight: 500; + color: rgba(255, 255, 255, 0.62); + line-height: 1.5; } @keyframes arena-spotlight-pulse { @@ -1307,14 +1314,14 @@ textarea { .battle-stage-shell { position: relative; z-index: 1; - width: min(1500px, calc(100vw - 48px)); - max-width: 1500px; + width: 100%; + max-width: 100%; margin: 0 auto; - min-height: calc(100vh - 48px); + min-height: auto; display: flex; flex-direction: column; - gap: 16px; - padding: 0 16px 20px; + gap: 10px; + padding: 0 clamp(16px, 2.5vw, 32px) 20px; } .battle-hud { @@ -2685,9 +2692,11 @@ body.rounds-drawer-open { .dock-assist-hint { margin: 0; - font-size: 0.78rem; - color: rgba(255, 255, 255, 0.45); - font-style: italic; + font-size: 13px; + font-weight: 500; + line-height: 1.45; + color: rgba(255, 255, 255, 0.72); + font-style: normal; } .response-dock-move .response-dock-form textarea { @@ -2741,9 +2750,9 @@ body.rounds-drawer-open { .battle-arena-wrap { position: relative; width: 100%; - min-height: 100vh; - padding: 24px 0 32px; - overflow: hidden; + min-height: auto; + padding: 12px 0 20px; + overflow: visible; } .battle-arena-scene { @@ -2839,3815 +2848,5237 @@ body.rounds-drawer-open { margin: 0 auto; } -.briefing-header { - display: flex; - justify-content: space-between; - align-items: flex-start; - gap: 1rem; - margin-bottom: 1rem; +.briefing-shell-wide { + max-width: 1240px; } -.briefing-title { - margin: 0.35rem 0 0; - font-size: clamp(1.5rem, 3vw, 1.85rem); +.briefing-mode-tabs { + display: flex; + gap: 0.5rem; + margin-bottom: 1rem; + flex-wrap: wrap; } -.briefing-subtitle { - margin: 0.35rem 0 0; +.briefing-mode-tab { + flex: 1; + min-width: 140px; + padding: 0.85rem 1.25rem; + border-radius: 12px; + border: 1px solid rgba(255, 255, 255, 0.1); + background: rgba(0, 0, 0, 0.25); color: var(--muted); + font-weight: 700; font-size: 0.92rem; - max-width: 52ch; + letter-spacing: 0.04em; + cursor: pointer; + transition: border-color 0.2s, color 0.2s, background 0.2s, box-shadow 0.2s; } -.briefing-helper { - margin: 0.5rem 0 0; - font-size: 0.78rem; - color: rgba(244, 211, 94, 0.75); - letter-spacing: 0.04em; +.briefing-mode-tab:hover { + border-color: rgba(244, 211, 94, 0.35); + color: var(--text); } -.briefing-grid { - display: grid; - grid-template-columns: 1.15fr 0.85fr; - gap: 1rem; - align-items: start; +.briefing-mode-tab.active { + border-color: rgba(244, 211, 94, 0.65); + background: linear-gradient(135deg, rgba(244, 211, 94, 0.14), rgba(0, 0, 0, 0.35)); + color: var(--gold); + box-shadow: 0 0 24px rgba(244, 211, 94, 0.12); } -.briefing-panel { - margin-bottom: 0; +.briefing-grid-wide { + grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr); + gap: 1.25rem; + align-items: stretch; } -.briefing-section-title { - margin: 0 0 0.75rem; - font-size: 0.95rem; - letter-spacing: 0.06em; - text-transform: uppercase; - color: var(--gold); +.briefing-left-col { + display: flex; + flex-direction: column; + gap: 0; + min-width: 0; + overflow: visible; } -.briefing-group { - padding: 0.65rem 0.75rem; - border-radius: 10px; - border: 1px solid rgba(255, 255, 255, 0.06); - background: rgba(0, 0, 0, 0.18); +.quick-pitch-panel { + padding: 1.35rem 1.5rem; } -.briefing-group-label { - margin: 0 0 0.5rem; - font-size: 0.68rem; +.quick-pitch-label { + display: block; + margin-bottom: 0.65rem; + font-size: 0.95rem; font-weight: 700; - letter-spacing: 0.14em; - text-transform: uppercase; - color: var(--accent-cyan); + letter-spacing: 0.03em; + color: var(--text); } -.briefing-form .briefing-group + .briefing-group { - margin-top: 0.65rem; +.quick-pitch-textarea { + width: 100%; + min-height: 200px; + padding: 1.1rem 1.2rem; + border-radius: 14px; + border: 1px solid rgba(255, 255, 255, 0.12); + background: rgba(0, 0, 0, 0.35); + color: var(--text); + font-size: 1rem; + line-height: 1.55; + resize: vertical; + box-shadow: inset 0 2px 12px rgba(0, 0, 0, 0.25); } -.btn-arena-start { - margin-top: 1.25rem; - font-weight: 800; - letter-spacing: 0.04em; +.quick-pitch-textarea::placeholder { + color: rgba(255, 255, 255, 0.28); + font-style: italic; + opacity: 1; } -.battle-arena, -.battle-layout { - display: grid; - grid-template-columns: 280px minmax(0, 1fr); - gap: 20px; - align-items: stretch; - width: 100%; +.quick-pitch-textarea:focus { + outline: none; + border-color: rgba(94, 211, 244, 0.55); + box-shadow: 0 0 0 2px rgba(94, 211, 244, 0.15); } -.battle-sidebar, -.arena-status-card { - padding: 1.15rem 1.2rem; +.quick-pitch-actions { display: flex; flex-direction: column; - gap: 0.5rem; - min-height: 0; - border: 1px solid rgba(255, 255, 255, 0.08); - box-shadow: - 0 8px 32px rgba(0, 0, 0, 0.35), - inset 0 1px 0 rgba(255, 255, 255, 0.04); + gap: 0.65rem; + margin-top: 1rem; } -.arena-status-eyebrow { - margin: 0 0 0.25rem; - font-size: 0.68rem; - font-weight: 700; - letter-spacing: 0.18em; - text-transform: uppercase; - color: rgba(244, 211, 94, 0.75); +.quick-pitch-actions .btn-wide { + width: 100%; } -.arena-status-list { - list-style: none; - margin: 0.35rem 0 0; - padding: 0; - display: flex; - flex-direction: column; - gap: 0.15rem; +.quick-pitch-secondary-row { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 0.65rem; } -.arena-status-list li { - display: flex; - justify-content: space-between; - align-items: center; - gap: 0.75rem; - padding: 0.4rem 0; - font-size: 0.9rem; +.quick-pitch-secondary-row .btn { + width: 100%; + padding: 0.65rem 0.75rem; + font-size: 0.88rem; } -.arena-status-list li span { - color: var(--muted); - font-size: 0.8rem; +.quick-pitch-hint { + margin: 0.85rem 0 0; + font-size: 0.85rem; + color: rgba(244, 211, 94, 0.85); } -.arena-status-list li strong { - text-align: right; - font-size: 0.95rem; - color: rgba(255, 255, 255, 0.92); +.brief-preview-panel { + padding: 1.15rem 1.25rem; + overflow: visible; + position: relative; } -.arena-status-pressure strong { - font-size: 1rem; +.brief-preview-panel.is-editing-active::before { + content: ""; + position: absolute; + inset: 0; + border-radius: inherit; + background: rgba(0, 0, 0, 0.55); + z-index: 1; + pointer-events: none; } -.pressure-meter-sidebar { - margin: 0.15rem 0 0.35rem; +.brief-preview-header { + margin-bottom: 0.75rem; } -.sidebar-actions { - margin-top: auto; - padding-top: 1rem; +.brief-preview-title-row { display: flex; - flex-direction: column; - gap: 0.55rem; + align-items: center; + justify-content: space-between; + gap: 0.75rem; + flex-wrap: wrap; } -.judge-persona-card { - margin: 0.25rem 0 0.5rem; - padding: 0.75rem 0.85rem; - border-radius: 12px; - border: 1px solid rgba(78, 205, 196, 0.28); - background: rgba(78, 205, 196, 0.07); - display: flex; - flex-direction: column; - gap: 0.25rem; +.brief-preview-title-row .briefing-section-title { + margin: 0; } -.judge-persona-label { - font-size: 0.62rem; - letter-spacing: 0.16em; - text-transform: uppercase; +.brief-preview-helper { + margin: 0.4rem 0 0; color: var(--muted); + font-size: 0.85rem; } -.judge-persona-card strong { - color: rgba(255, 255, 255, 0.92); - font-size: 0.95rem; +.brief-preview-hint { + margin: 0.5rem 0 0; + font-size: 0.82rem; + color: rgba(244, 211, 94, 0.85); } -.judge-persona-mode { - font-size: 0.75rem; - color: var(--accent-cyan); +.brief-confidence-chip { + display: inline-block; + padding: 0.25rem 0.65rem; + border-radius: 999px; + font-size: 0.72rem; + font-weight: 700; + letter-spacing: 0.06em; + text-transform: uppercase; + border: 1px solid rgba(255, 255, 255, 0.12); + color: var(--muted); } -.pressure-meter { - margin: 0.35rem 0 0.65rem; +.brief-confidence-chip.confidence-high { + border-color: rgba(94, 244, 160, 0.45); + color: #7dffb8; } -.pressure-meter-track { - height: 8px; - border-radius: 999px; - background: rgba(255, 255, 255, 0.08); - overflow: hidden; +.brief-confidence-chip.confidence-medium { + border-color: rgba(244, 211, 94, 0.45); + color: var(--gold); } -.pressure-meter-fill { - height: 100%; - width: 28%; - border-radius: 999px; - transition: width 0.45s ease, background 0.3s ease; +.brief-confidence-chip.confidence-low { + border-color: rgba(255, 140, 120, 0.45); + color: #ffb09a; } -.pressure-meter-fill.pressure-warmup { - background: linear-gradient(90deg, #22d3ee, #4ade80); +.brief-preview-grid { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 0.55rem; } -.pressure-meter-fill.pressure-focused { - background: linear-gradient(90deg, #38bdf8, var(--gold)); +.brief-read-card { + padding: 0.65rem 0.8rem; + border-radius: 12px; + border: 1px solid rgba(255, 255, 255, 0.08); + background: rgba(0, 0, 0, 0.22); + transition: border-color 0.2s, background 0.2s, box-shadow 0.2s, transform 0.2s; } -.pressure-meter-fill.pressure-high { - background: linear-gradient(90deg, var(--gold), #f97316); +.brief-preview-grid.is-editing-active .brief-read-card:not(.is-editing-expanded) { + opacity: 0.35; + filter: blur(0.5px); + pointer-events: none; } -.pressure-meter-fill.pressure-extreme { - background: linear-gradient(90deg, #f97316, var(--red)); - box-shadow: 0 0 12px rgba(230, 57, 70, 0.45); +.brief-read-card.is-editing-expanded { + grid-column: 1 / -1; + position: relative; + z-index: 2; + padding: 1.35rem 1.5rem; + border-color: rgba(244, 211, 94, 0.6); + background: linear-gradient(160deg, rgba(28, 24, 14, 0.98), rgba(12, 12, 12, 0.98)); + box-shadow: + 0 16px 48px rgba(0, 0, 0, 0.55), + 0 0 0 1px rgba(244, 211, 94, 0.25), + 0 0 32px rgba(244, 211, 94, 0.08); + transform: scale(1.01); } -.pressure-warmup { color: #67e8f9; } -.pressure-focused { color: var(--gold); } -.pressure-high { color: #fb923c; } -.pressure-extreme { color: var(--red); } - -.battle-stage, -.battle-panel { - display: flex; - flex-direction: column; - gap: 16px; - padding: 20px 24px 24px; - min-height: calc(100vh - 112px); - width: 100%; - border: 1px solid rgba(255, 255, 255, 0.09); - box-shadow: - 0 12px 48px rgba(0, 0, 0, 0.4), - 0 0 60px rgba(78, 205, 196, 0.04), - inset 0 1px 0 rgba(255, 255, 255, 0.05); -} - -.judge-question-hero { - flex: 0 0 auto; - padding: 24px 28px; - min-height: unset; - display: block; - border-width: 1px; - border-color: rgba(78, 205, 196, 0.45); - box-shadow: - 0 0 32px rgba(78, 205, 196, 0.12), - inset 0 0 40px rgba(78, 205, 196, 0.04); +.brief-read-card.is-editing-expanded .brief-read-label { + font-size: 0.82rem; + color: var(--gold); } -.judge-question-hero .judge-question-text { - font-size: clamp(1.05rem, 1.2vw + 0.65rem, 1.35rem); - line-height: 1.55; - max-width: none; - margin-top: 0.35rem; +.brief-read-card.is-editing-expanded .brief-read-edit { + opacity: 1; + background: rgba(244, 211, 94, 0.22); } -.battle-main { - display: flex; - flex-direction: column; - min-height: min(78vh, 820px); - padding: 0.85rem; - gap: 0.65rem; +.brief-read-card:hover { + border-color: rgba(255, 255, 255, 0.14); } -.battle-round-header { - flex-shrink: 0; - padding: 0.85rem 1rem; - border-radius: 12px; - border: 1px solid rgba(244, 211, 94, 0.18); - background: rgba(0, 0, 0, 0.28); +.brief-read-card.brief-read-wide { + grid-column: span 2; } -.battle-round-header-top { +.brief-read-head { display: flex; - flex-wrap: wrap; align-items: center; justify-content: space-between; - gap: 0.75rem 1.25rem; - width: 100%; -} - -.battle-round-top { - display: flex; - align-items: baseline; - gap: 0.65rem; + gap: 0.5rem; + margin-bottom: 0.35rem; } -.battle-round-label { - margin: 0; - font-size: 0.62rem; - letter-spacing: 0.2em; +.brief-read-label { + font-size: 0.68rem; + font-weight: 700; + letter-spacing: 0.1em; text-transform: uppercase; - color: var(--muted); + color: var(--accent-cyan); } -.round-number { - margin: 0; - font-size: clamp(1.35rem, 2vw, 1.75rem); - font-weight: 800; - letter-spacing: 0.08em; +.brief-read-edit { + opacity: 0; + padding: 0.15rem 0.35rem; + border: none; + border-radius: 6px; + background: rgba(244, 211, 94, 0.12); color: var(--gold); + font-size: 0.85rem; + cursor: pointer; + transition: opacity 0.15s; } -.battle-tag-row { - display: flex; - flex-wrap: wrap; - gap: 0.45rem; - margin-top: 0; -} - -.arena-chip, -.attack-tag, -.pressure-chip, -.mode-chip, -.deal-type-chip, -.deal-focus-chip { - padding: 0.28rem 0.65rem; - border-radius: 999px; - font-size: 0.72rem; - font-weight: 600; - letter-spacing: 0.04em; - border: 1px solid rgba(255, 255, 255, 0.1); - background: rgba(255, 255, 255, 0.04); - color: var(--muted); -} - -.attack-tag { - border-color: rgba(78, 205, 196, 0.35); - color: #7efff0; +.brief-read-card:hover .brief-read-edit, +.brief-read-card.is-editing .brief-read-edit { + opacity: 1; } -.pressure-chip { - border-color: rgba(244, 211, 94, 0.3); - color: var(--gold); +.brief-read-value { + margin: 0; + font-size: 0.88rem; + line-height: 1.4; + color: var(--text); + word-break: break-word; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; } -.mode-chip { - border-color: rgba(255, 255, 255, 0.12); +.brief-read-card.brief-read-wide .brief-read-value { + -webkit-line-clamp: 2; } -.deal-type-chip { - border-color: rgba(74, 222, 128, 0.35); - color: #86efac; +.brief-read-value.is-empty { + color: rgba(255, 255, 255, 0.35); + font-style: italic; } -.battle-progress { - margin-top: 0.65rem; - height: 4px; - border-radius: 999px; - background: rgba(255, 255, 255, 0.07); - overflow: hidden; +.brief-read-input { width: 100%; + padding: 0.5rem 0.65rem; + border-radius: 8px; + border: 1px solid rgba(94, 211, 244, 0.35); + background: rgba(0, 0, 0, 0.4); + color: var(--text); + font-size: 0.88rem; + line-height: 1.4; } -.battle-progress-fill { - height: 100%; - width: 28%; - background: linear-gradient(90deg, var(--gold), rgba(244, 211, 94, 0.4)); - transition: width 0.45s ease; +.brief-read-input[hidden] { + display: none !important; } -.judge-question-card { - position: relative; - padding: 1rem 1.1rem; - border-radius: 14px; - border: 1px solid rgba(78, 205, 196, 0.35); - background: linear-gradient(145deg, rgba(78, 205, 196, 0.1), rgba(0, 0, 0, 0.38)); - overflow: hidden; +.brief-read-textarea { + min-height: 52px; + resize: vertical; } -.judge-attack-meta { - font-size: 0.78rem; - color: rgba(126, 255, 240, 0.85); +.brief-read-card.is-editing-expanded .brief-read-input { + display: block !important; + font-size: 1.02rem; + padding: 0.9rem 1rem; + line-height: 1.55; + border-color: rgba(244, 211, 94, 0.35); + background: rgba(0, 0, 0, 0.5); + min-height: 3.25rem; } -.judge-question-text { - margin: 0; - font-size: clamp(1.05rem, 1.2vw + 0.65rem, 1.35rem); - line-height: 1.55; - color: rgba(255, 255, 255, 0.96); +.brief-read-card.is-editing-expanded .brief-read-textarea { + min-height: 140px; + resize: vertical; } -.deal-judge-card { - border-color: rgba(74, 222, 128, 0.3); - background: linear-gradient(145deg, rgba(74, 222, 128, 0.06), rgba(0, 0, 0, 0.35)); - box-shadow: 0 0 24px rgba(74, 222, 128, 0.06); +.brief-read-edit-actions { + display: none; + margin-top: 1rem; + gap: 0.6rem; + justify-content: flex-end; } -.judge-card-head { +.brief-read-card.is-editing-expanded .brief-read-edit-actions { display: flex; - flex-wrap: wrap; - align-items: center; - gap: 0.5rem; - margin-bottom: 0.55rem; } -.judge-badge { - font-size: 0.62rem; +.brief-read-card.is-editing-expanded .brief-read-edit-actions .btn-primary { + min-width: 100px; font-weight: 700; - letter-spacing: 0.16em; - text-transform: uppercase; - color: var(--accent-cyan); } -.judge-card-scan { - position: absolute; - bottom: 0; - left: 0; - right: 0; - height: 2px; - background: linear-gradient(90deg, transparent, rgba(78, 205, 196, 0.6), transparent); - animation: judge-scan 2.8s ease-in-out infinite; +.brief-read-card.is-editing .brief-read-value { + display: none; } -@keyframes judge-scan { - 0%, 100% { opacity: 0.35; transform: translateX(-20%); } - 50% { opacity: 1; transform: translateX(20%); } +.brief-read-card.is-editing .brief-read-input { + display: block !important; } -.battle-timeline { - flex: 0 1 auto; - min-height: 0; - max-height: min(36vh, 320px); - overflow-y: auto; - padding: 0.5rem 0.25rem; - margin: 0; +.brief-preview-actions { + display: flex; + flex-direction: column; + gap: 0.55rem; + margin-top: 0.85rem; } -.battle-history, -.round-history-drawer { - flex-shrink: 0; - border-radius: 10px; - border: 1px solid rgba(255, 255, 255, 0.07); - background: rgba(0, 0, 0, 0.2); - padding: 0.25rem 0.75rem; +.brief-preview-actions .btn-wide { + width: 100%; } -.battle-history:not([open]) { - padding: 0.35rem 0.75rem; +.advanced-briefing-panel { + padding: 1.25rem 1.35rem; } -.battle-history-summary { - cursor: pointer; +.advanced-briefing-helper { + margin: 0 0 1rem; + color: var(--muted); + font-size: 0.88rem; +} + +.briefing-opponent-note { + margin: 0; font-size: 0.8rem; - font-weight: 600; - letter-spacing: 0.05em; color: var(--muted); - list-style: none; + text-align: center; +} + +.briefing-opponent-panel { + overflow: visible; display: flex; - align-items: center; - gap: 0.4rem; - padding: 0.4rem 0; - user-select: none; + flex-direction: column; + align-self: stretch; + min-height: 100%; + gap: 0; } -.battle-history-summary::-webkit-details-marker { - display: none; +.briefing-opponent-footer { + margin-top: auto; + padding-top: 1.5rem; + display: flex; + flex-direction: column; + gap: 0.75rem; } -.timeline-count { - color: var(--gold); - font-size: 0.75rem; +.briefing-opponent-panel .btn-arena-start { + margin-top: 0; } -.round-archive { - margin: 0.35rem 0; - border-radius: 8px; - border: 1px solid rgba(255, 255, 255, 0.06); - background: rgba(255, 255, 255, 0.02); +#screen-setup .briefing-shell-wide { + overflow: visible; } -.round-archive summary { - cursor: pointer; - padding: 0.45rem 0.55rem; - font-size: 0.8rem; - font-weight: 600; - color: var(--muted); +.briefing-header { + display: flex; + justify-content: space-between; + align-items: flex-start; + gap: 1rem; + margin-bottom: 1rem; } -.round-archive-body { - padding: 0 0.65rem 0.65rem; - display: flex; - flex-direction: column; - gap: 0.45rem; +.briefing-title { + margin: 0.35rem 0 0; + font-size: clamp(1.5rem, 3vw, 1.85rem); } -.archive-judge, -.archive-founder { - margin: 0; - font-size: 0.85rem; - line-height: 1.45; - color: rgba(255, 255, 255, 0.88); +.briefing-subtitle { + margin: 0.35rem 0 0; + color: var(--muted); + font-size: 0.92rem; + max-width: 52ch; } -.archive-label { - display: inline-block; - min-width: 3.2rem; - margin-right: 0.35rem; - font-size: 0.65rem; - font-weight: 700; - letter-spacing: 0.08em; - text-transform: uppercase; - color: var(--accent-cyan); +.briefing-helper { + margin: 0.5rem 0 0; + font-size: 0.78rem; + color: rgba(244, 211, 94, 0.75); + letter-spacing: 0.04em; } -.message.live-pending { - opacity: 0.92; - border-style: dashed; +.briefing-grid { + display: grid; + grid-template-columns: 1.15fr 0.85fr; + gap: 1rem; + align-items: stretch; } -.hint-chips-panel { - margin-left: auto; +.briefing-panel { + margin-bottom: 0; } -.hint-chips-toggle { - cursor: pointer; - font-size: 0.72rem; - font-weight: 600; - color: rgba(255, 255, 255, 0.45); - list-style: none; +.briefing-section-title { + margin: 0 0 0.75rem; + font-size: 0.95rem; + letter-spacing: 0.06em; + text-transform: uppercase; + color: var(--gold); } -.hint-chips-toggle::-webkit-details-marker { - display: none; +.briefing-group { + padding: 0.65rem 0.75rem; + border-radius: 10px; + border: 1px solid rgba(255, 255, 255, 0.06); + background: rgba(0, 0, 0, 0.18); } -.hint-chips-panel:not([open]) .hint-chips { - display: none; +.briefing-group-label { + margin: 0 0 0.5rem; + font-size: 0.68rem; + font-weight: 700; + letter-spacing: 0.14em; + text-transform: uppercase; + color: var(--accent-cyan); } -.hint-chips-panel .hint-chips { - position: absolute; - z-index: 5; - margin-top: 0.35rem; - padding: 0.5rem; - border-radius: 10px; - border: 1px solid rgba(255, 255, 255, 0.08); - background: rgba(8, 12, 20, 0.95); +.briefing-form .briefing-group + .briefing-group { + margin-top: 0.65rem; } -.hint-chips-panel { - position: relative; +.btn-arena-start { + margin-top: 1.25rem; + font-weight: 800; + letter-spacing: 0.04em; } -.response-action-left .hint-chip { - font-size: 0.68rem; - opacity: 0.85; +.battle-arena, +.battle-layout { + display: grid; + grid-template-columns: 280px minmax(0, 1fr); + gap: 20px; + align-items: stretch; + width: 100%; } -.response-console, -.founder-console { - flex: 1 1 auto; - flex-shrink: 0; - margin-top: auto; - padding: 20px; - border: 1px solid rgba(244, 211, 94, 0.2); - background: rgba(0, 0, 0, 0.32); - border-radius: 14px; +.battle-sidebar, +.arena-status-card { + padding: 1.15rem 1.2rem; display: flex; flex-direction: column; - gap: 0.75rem; + gap: 0.5rem; + min-height: 0; + border: 1px solid rgba(255, 255, 255, 0.08); + box-shadow: + 0 8px 32px rgba(0, 0, 0, 0.35), + inset 0 1px 0 rgba(255, 255, 255, 0.04); } -.battle-coach-bar { - margin: 0; - padding: 0.5rem 0.75rem; - border-left: 3px solid rgba(244, 211, 94, 0.55); - border-radius: 0 8px 8px 0; - background: rgba(244, 211, 94, 0.05); - font-size: 0.84rem; - line-height: 1.45; - color: rgba(255, 255, 255, 0.82); +.arena-status-eyebrow { + margin: 0 0 0.25rem; + font-size: 0.68rem; + font-weight: 700; + letter-spacing: 0.18em; + text-transform: uppercase; + color: rgba(244, 211, 94, 0.75); } -.response-console-form { +.arena-status-list { + list-style: none; + margin: 0.35rem 0 0; + padding: 0; display: flex; flex-direction: column; - gap: 0.75rem; - width: 100%; -} - -.response-console-form textarea, -.response-console textarea, -.founder-compose-row textarea { - width: 100%; - min-height: 130px; - resize: vertical; - font-size: 0.95rem; - line-height: 1.5; - padding: 0.85rem 1rem; - border-radius: 10px; + gap: 0.15rem; } -.response-action-row { +.arena-status-list li { display: flex; - flex-wrap: wrap; - align-items: center; justify-content: space-between; + align-items: center; gap: 0.75rem; + padding: 0.4rem 0; + font-size: 0.9rem; } -.response-action-left { - display: flex; - flex-wrap: wrap; - align-items: center; - gap: 0.45rem 0.65rem; - flex: 1 1 auto; - min-width: 0; +.arena-status-list li span { + color: var(--muted); + font-size: 0.8rem; } -.btn-send-answer { - min-width: 140px; - min-height: 44px; - font-weight: 800; - letter-spacing: 0.04em; - flex-shrink: 0; +.arena-status-list li strong { + text-align: right; + font-size: 0.95rem; + color: rgba(255, 255, 255, 0.92); } -.founder-console-head { - display: flex; - flex-wrap: wrap; - align-items: center; - justify-content: space-between; - gap: 0.5rem; - margin-bottom: 0.55rem; +.arena-status-pressure strong { + font-size: 1rem; } -.founder-console-label { - font-size: 0.68rem; - font-weight: 700; - letter-spacing: 0.14em; - text-transform: uppercase; - color: var(--gold); +.pressure-meter-sidebar { + margin: 0.15rem 0 0.35rem; } -.hint-chips { +.sidebar-actions { + margin-top: auto; + padding-top: 1rem; display: flex; - flex-wrap: wrap; - gap: 0.35rem; + flex-direction: column; + gap: 0.55rem; } -.hint-chip { - padding: 0.22rem 0.55rem; - border-radius: 999px; - border: 1px solid rgba(255, 255, 255, 0.08); - background: rgba(255, 255, 255, 0.03); - color: rgba(255, 255, 255, 0.5); - font-size: 0.68rem; - font-weight: 600; - cursor: pointer; - transition: border-color 0.15s ease, color 0.15s ease; +.judge-persona-card { + margin: 0.25rem 0 0.5rem; + padding: 0.75rem 0.85rem; + border-radius: 12px; + border: 1px solid rgba(78, 205, 196, 0.28); + background: rgba(78, 205, 196, 0.07); + display: flex; + flex-direction: column; + gap: 0.25rem; } -.hint-chip:hover { - border-color: rgba(244, 211, 94, 0.25); - color: rgba(244, 211, 94, 0.85); +.judge-persona-label { + font-size: 0.62rem; + letter-spacing: 0.16em; + text-transform: uppercase; + color: var(--muted); } -.founder-input-row { - grid-template-columns: 1fr auto; - align-items: end; +.judge-persona-card strong { + color: rgba(255, 255, 255, 0.92); + font-size: 0.95rem; } -.voice-console-controls { - margin-bottom: 0.5rem; +.judge-persona-mode { + font-size: 0.75rem; + color: var(--accent-cyan); } -.voice-console-preview { +.pressure-meter { + margin: 0.35rem 0 0.65rem; +} + +.pressure-meter-track { + height: 8px; + border-radius: 999px; + background: rgba(255, 255, 255, 0.08); + overflow: hidden; +} + +.pressure-meter-fill { + height: 100%; + width: 28%; + border-radius: 999px; + transition: width 0.45s ease, background 0.3s ease; +} + +.pressure-meter-fill.pressure-warmup { + background: linear-gradient(90deg, #22d3ee, #4ade80); +} + +.pressure-meter-fill.pressure-focused { + background: linear-gradient(90deg, #38bdf8, var(--gold)); +} + +.pressure-meter-fill.pressure-high { + background: linear-gradient(90deg, var(--gold), #f97316); +} + +.pressure-meter-fill.pressure-extreme { + background: linear-gradient(90deg, #f97316, var(--red)); + box-shadow: 0 0 12px rgba(230, 57, 70, 0.45); +} + +.pressure-warmup { color: #67e8f9; } +.pressure-focused { color: var(--gold); } +.pressure-high { color: #fb923c; } +.pressure-extreme { color: var(--red); } + +.battle-stage, +.battle-panel { + display: flex; + flex-direction: column; + gap: 16px; + padding: 20px 24px 24px; + min-height: calc(100vh - 112px); + width: 100%; + border: 1px solid rgba(255, 255, 255, 0.09); + box-shadow: + 0 12px 48px rgba(0, 0, 0, 0.4), + 0 0 60px rgba(78, 205, 196, 0.04), + inset 0 1px 0 rgba(255, 255, 255, 0.05); +} + +.judge-question-hero { + flex: 0 0 auto; + padding: 24px 28px; + min-height: unset; + display: block; + border-width: 1px; + border-color: rgba(78, 205, 196, 0.45); + box-shadow: + 0 0 32px rgba(78, 205, 196, 0.12), + inset 0 0 40px rgba(78, 205, 196, 0.04); +} + +.judge-question-hero .judge-question-text { + font-size: clamp(1.05rem, 1.2vw + 0.65rem, 1.35rem); + line-height: 1.55; + max-width: none; + margin-top: 0.35rem; +} + +.battle-main { + display: flex; + flex-direction: column; + min-height: min(78vh, 820px); + padding: 0.85rem; + gap: 0.65rem; +} + +.battle-round-header { + flex-shrink: 0; + padding: 0.85rem 1rem; + border-radius: 12px; + border: 1px solid rgba(244, 211, 94, 0.18); + background: rgba(0, 0, 0, 0.28); +} + +.battle-round-header-top { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: space-between; + gap: 0.75rem 1.25rem; + width: 100%; +} + +.battle-round-top { + display: flex; + align-items: baseline; + gap: 0.65rem; +} + +.battle-round-label { + margin: 0; + font-size: 0.62rem; + letter-spacing: 0.2em; + text-transform: uppercase; + color: var(--muted); +} + +.round-number { + margin: 0; + font-size: clamp(1.35rem, 2vw, 1.75rem); + font-weight: 800; + letter-spacing: 0.08em; + color: var(--gold); +} + +.battle-tag-row { + display: flex; + flex-wrap: wrap; + gap: 0.45rem; + margin-top: 0; +} + +.arena-chip, +.attack-tag, +.pressure-chip, +.mode-chip, +.deal-type-chip, +.deal-focus-chip { + padding: 0.28rem 0.65rem; + border-radius: 999px; + font-size: 0.72rem; + font-weight: 600; + letter-spacing: 0.04em; + border: 1px solid rgba(255, 255, 255, 0.1); + background: rgba(255, 255, 255, 0.04); + color: var(--muted); +} + +.attack-tag { + border-color: rgba(78, 205, 196, 0.35); + color: #7efff0; +} + +.pressure-chip { + border-color: rgba(244, 211, 94, 0.3); + color: var(--gold); +} + +.mode-chip { + border-color: rgba(255, 255, 255, 0.12); +} + +.deal-type-chip { + border-color: rgba(74, 222, 128, 0.35); + color: #86efac; +} + +.battle-progress { + margin-top: 0.65rem; + height: 4px; + border-radius: 999px; + background: rgba(255, 255, 255, 0.07); + overflow: hidden; + width: 100%; +} + +.battle-progress-fill { + height: 100%; + width: 28%; + background: linear-gradient(90deg, var(--gold), rgba(244, 211, 94, 0.4)); + transition: width 0.45s ease; +} + +.judge-question-card { + position: relative; + padding: 1rem 1.1rem; + border-radius: 14px; + border: 1px solid rgba(78, 205, 196, 0.35); + background: linear-gradient(145deg, rgba(78, 205, 196, 0.1), rgba(0, 0, 0, 0.38)); + overflow: hidden; +} + +.judge-attack-meta { + font-size: 0.78rem; + color: rgba(126, 255, 240, 0.85); +} + +.judge-question-text { + margin: 0; + font-size: clamp(1.05rem, 1.2vw + 0.65rem, 1.35rem); + line-height: 1.55; + color: rgba(255, 255, 255, 0.96); +} + +.deal-judge-card { + border-color: rgba(74, 222, 128, 0.3); + background: linear-gradient(145deg, rgba(74, 222, 128, 0.06), rgba(0, 0, 0, 0.35)); + box-shadow: 0 0 24px rgba(74, 222, 128, 0.06); +} + +.judge-card-head { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 0.5rem; + margin-bottom: 0.55rem; +} + +.judge-badge { + font-size: 0.62rem; + font-weight: 700; + letter-spacing: 0.16em; + text-transform: uppercase; + color: var(--accent-cyan); +} + +.judge-card-scan { + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 2px; + background: linear-gradient(90deg, transparent, rgba(78, 205, 196, 0.6), transparent); + animation: judge-scan 2.8s ease-in-out infinite; +} + +@keyframes judge-scan { + 0%, 100% { opacity: 0.35; transform: translateX(-20%); } + 50% { opacity: 1; transform: translateX(20%); } +} + +.battle-timeline { + flex: 0 1 auto; + min-height: 0; + max-height: min(36vh, 320px); + overflow-y: auto; + padding: 0.5rem 0.25rem; + margin: 0; +} + +.battle-history, +.round-history-drawer { + flex-shrink: 0; + border-radius: 10px; + border: 1px solid rgba(255, 255, 255, 0.07); + background: rgba(0, 0, 0, 0.2); + padding: 0.25rem 0.75rem; +} + +.battle-history:not([open]) { + padding: 0.35rem 0.75rem; +} + +.battle-history-summary { + cursor: pointer; + font-size: 0.8rem; + font-weight: 600; + letter-spacing: 0.05em; + color: var(--muted); + list-style: none; + display: flex; + align-items: center; + gap: 0.4rem; + padding: 0.4rem 0; + user-select: none; +} + +.battle-history-summary::-webkit-details-marker { + display: none; +} + +.timeline-count { + color: var(--gold); + font-size: 0.75rem; +} + +.round-archive { + margin: 0.35rem 0; + border-radius: 8px; + border: 1px solid rgba(255, 255, 255, 0.06); + background: rgba(255, 255, 255, 0.02); +} + +.round-archive summary { + cursor: pointer; + padding: 0.45rem 0.55rem; + font-size: 0.8rem; + font-weight: 600; + color: var(--muted); +} + +.round-archive-body { + padding: 0 0.65rem 0.65rem; + display: flex; + flex-direction: column; + gap: 0.45rem; +} + +.archive-judge, +.archive-founder { + margin: 0; + font-size: 0.85rem; + line-height: 1.45; + color: rgba(255, 255, 255, 0.88); +} + +.archive-label { + display: inline-block; + min-width: 3.2rem; + margin-right: 0.35rem; + font-size: 0.65rem; + font-weight: 700; + letter-spacing: 0.08em; + text-transform: uppercase; + color: var(--accent-cyan); +} + +.message.live-pending { + opacity: 0.92; + border-style: dashed; +} + +.hint-chips-panel { + margin-left: auto; +} + +.hint-chips-toggle { + cursor: pointer; + font-size: 0.72rem; + font-weight: 600; + color: rgba(255, 255, 255, 0.45); + list-style: none; +} + +.hint-chips-toggle::-webkit-details-marker { + display: none; +} + +.hint-chips-panel:not([open]) .hint-chips { + display: none; +} + +.hint-chips-panel .hint-chips { + position: absolute; + z-index: 5; + margin-top: 0.35rem; + padding: 0.5rem; + border-radius: 10px; + border: 1px solid rgba(255, 255, 255, 0.08); + background: rgba(8, 12, 20, 0.95); +} + +.hint-chips-panel { + position: relative; +} + +.response-action-left .hint-chip { + font-size: 0.68rem; + opacity: 0.85; +} + +.response-console, +.founder-console { + flex: 1 1 auto; + flex-shrink: 0; + margin-top: auto; + padding: 20px; + border: 1px solid rgba(244, 211, 94, 0.2); + background: rgba(0, 0, 0, 0.32); + border-radius: 14px; + display: flex; + flex-direction: column; + gap: 0.75rem; +} + +.battle-coach-bar { + margin: 0; + padding: 0.5rem 0.75rem; + border-left: 3px solid rgba(244, 211, 94, 0.55); + border-radius: 0 8px 8px 0; + background: rgba(244, 211, 94, 0.05); + font-size: 0.84rem; + line-height: 1.45; + color: rgba(255, 255, 255, 0.82); +} + +.response-console-form { + display: flex; + flex-direction: column; + gap: 0.75rem; + width: 100%; +} + +.response-console-form textarea, +.response-console textarea, +.founder-compose-row textarea { + width: 100%; + min-height: 130px; + resize: vertical; + font-size: 0.95rem; + line-height: 1.5; + padding: 0.85rem 1rem; + border-radius: 10px; +} + +.response-action-row { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: space-between; + gap: 0.75rem; +} + +.response-action-left { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 0.45rem 0.65rem; + flex: 1 1 auto; + min-width: 0; +} + +.btn-send-answer { + min-width: 140px; + min-height: 44px; + font-weight: 800; + letter-spacing: 0.04em; + flex-shrink: 0; +} + +.founder-console-head { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: space-between; + gap: 0.5rem; + margin-bottom: 0.55rem; +} + +.founder-console-label { + font-size: 0.68rem; + font-weight: 700; + letter-spacing: 0.14em; + text-transform: uppercase; + color: var(--gold); +} + +.hint-chips { + display: flex; + flex-wrap: wrap; + gap: 0.35rem; +} + +.hint-chip { + padding: 0.22rem 0.55rem; + border-radius: 999px; + border: 1px solid rgba(255, 255, 255, 0.08); + background: rgba(255, 255, 255, 0.03); + color: rgba(255, 255, 255, 0.5); + font-size: 0.68rem; + font-weight: 600; + cursor: pointer; + transition: border-color 0.15s ease, color 0.15s ease; +} + +.hint-chip:hover { + border-color: rgba(244, 211, 94, 0.25); + color: rgba(244, 211, 94, 0.85); +} + +.founder-input-row { + grid-template-columns: 1fr auto; + align-items: end; +} + +.voice-console-controls { + margin-bottom: 0.5rem; +} + +.voice-console-preview { + margin-bottom: 0.65rem; + padding: 0.65rem; + border-radius: 10px; + border: 1px solid rgba(78, 205, 196, 0.25); + background: rgba(78, 205, 196, 0.05); +} + +.voice-wave-active { + margin-bottom: 0.5rem; + animation: voice-wave-pulse 1.5s ease-in-out infinite; +} + +@keyframes voice-wave-pulse { + 0%, 100% { opacity: 0.5; } + 50% { opacity: 1; } +} + +.arena-readiness-prompt { + margin: 0; + padding: 0.75rem 0.9rem; + border: 1px solid rgba(244, 211, 94, 0.4); + border-radius: 10px; + background: rgba(244, 211, 94, 0.08); +} + +.arena-readiness-prompt p { + margin: 0 0 0.55rem; + font-size: 0.88rem; + color: rgba(255, 255, 255, 0.9); +} + +.battle-readiness-actions, +.deal-readiness-actions { + display: flex; + flex-wrap: wrap; + gap: 0.45rem; +} + +.deal-arena-subtitle { + margin: 0.25rem 0 0.65rem; + font-size: 0.82rem; + color: var(--muted); + line-height: 1.4; +} + +.deal-persona-card { + border-color: rgba(74, 222, 128, 0.28); + background: rgba(74, 222, 128, 0.06); +} + +.message.message-judge, +.message.ai { + align-self: flex-start; + max-width: 92%; + padding: 0.55rem 0.7rem; + border-radius: 10px; + border: 1px solid rgba(78, 205, 196, 0.2); + background: rgba(78, 205, 196, 0.06); +} + +.message.message-founder, +.message.user { + align-self: flex-end; + max-width: 92%; + padding: 0.55rem 0.7rem; + border-radius: 10px; + border: 1px solid rgba(244, 211, 94, 0.22); + background: rgba(244, 211, 94, 0.06); +} + +.message-collapsed { + opacity: 0.65; + transform: scale(0.98); +} + +.message-collapsed .message-preview { + font-size: 0.78rem; + -webkit-line-clamp: 1; + display: -webkit-box; + -webkit-box-orient: vertical; + overflow: hidden; +} + +.message-preview { + margin: 0; + font-size: 0.82rem; + line-height: 1.4; +} + +.arena-loading .arena-loading-panel { + text-align: center; + padding: 1.5rem 2rem; + border-radius: 14px; + border: 1px solid rgba(78, 205, 196, 0.25); + background: rgba(8, 12, 20, 0.92); + min-width: 240px; +} + +.arena-loading-scan { + height: 3px; + margin: 0.75rem auto 0; + max-width: 180px; + border-radius: 999px; + background: linear-gradient(90deg, transparent, rgba(78, 205, 196, 0.7), transparent); + animation: judge-scan 1.8s ease-in-out infinite; +} + +#loading-message { + margin: 0.75rem 0 0; + font-size: 0.9rem; + color: rgba(255, 255, 255, 0.88); +} + +@media (prefers-reduced-motion: reduce) { + .judge-card-scan, + .arena-loading-scan, + .voice-wave-active, + .pressure-meter-fill, + .battle-progress-fill { + animation: none !important; + transition: none !important; + } +} + +@media (min-width: 1041px) { + .battle-shell, + .arena-shell.battle-arena { + min-width: 1040px; + } +} + +@media (max-width: 1000px) { + .briefing-grid, + .briefing-grid-wide { + grid-template-columns: 1fr; + } + + .brief-preview-grid { + grid-template-columns: 1fr; + } + + .brief-read-card.brief-read-wide { + grid-column: span 1; + } + + .quick-pitch-secondary-row { + grid-template-columns: 1fr; + } + + .battle-shell, + .arena-shell.battle-arena, + .battle-arena, + .battle-layout { + grid-template-columns: 1fr; + width: calc(100vw - 24px); + min-height: auto; + } + + .battle-arena-wrap { + padding: 12px 0 24px; + min-height: auto; + } + + .battle-sidebar { + order: 1; + flex-direction: row; + flex-wrap: wrap; + align-items: center; + gap: 0.65rem 1.25rem; + padding: 0.85rem 1rem; + } + + .arena-status-list { + flex-direction: row; + flex-wrap: wrap; + gap: 0.5rem 1rem; + flex: 1 1 auto; + } + + .arena-status-list li { + padding: 0; + border: none; + } + + .pressure-meter-sidebar { + flex: 1 1 100%; + margin: 0; + } + + .sidebar-actions { + flex-direction: row; + flex-wrap: wrap; + margin-top: 0; + padding-top: 0; + width: 100%; + } + + .sidebar-actions .btn-wide { + flex: 1 1 auto; + } + + .battle-stage, + .battle-panel, + .battle-main { + order: 2; + min-height: auto; + padding: 1rem; + } + + .judge-question-hero { + padding: 18px 20px; + } + + .response-action-row { + flex-direction: column; + align-items: stretch; + } + + .response-action-left { + justify-content: flex-start; + } + + .btn-send-answer { + width: 100%; + } + + .hint-chips-panel { + margin-left: 0; + } +} + +@media (max-width: 640px) { + .battle-round-header-top { + flex-direction: column; + align-items: flex-start; + } + + .response-console-form textarea { + min-height: 110px; + } +} + +.meta-item { + display: flex; + justify-content: space-between; + gap: 0.75rem; + padding: 0.65rem 0; + border-bottom: 1px solid rgba(255, 255, 255, 0.06); +} + +.meta-item span { + color: var(--muted); +} + +.pressure-medium { color: #7dd3fc; } + +.chat-window { + display: flex; + flex-direction: column; + gap: 0.45rem; +} + +.chat-window:not(.battle-timeline) { + flex: 1; + overflow-y: auto; + padding: 0.5rem; + margin-bottom: 1rem; +} + +.message-meta { + display: block; + font-size: 0.68rem; + color: var(--gold); + margin-bottom: 0.25rem; +} + +.chat-input-row { + display: grid; + grid-template-columns: 1fr auto; + gap: 0.75rem; +} + +.status-text { + color: var(--red); + font-size: 0.9rem; + margin: 0.5rem 0 0; +} + +/* ================================ + Results / Scorecards (Pass 2.5) + ================================ */ + +.results-shell { + max-width: 920px; + margin: 0 auto; + padding: 0.25rem 0 1.25rem; + display: grid; + gap: 1.25rem; +} + +.results-compact { + gap: 0.65rem; + padding-bottom: 1rem; +} + +.results-hero-card { + padding: 1.1rem 1.15rem 1rem; + border: 1px solid rgba(244, 211, 94, 0.14); + background: linear-gradient(165deg, rgba(18, 22, 36, 0.92), rgba(8, 10, 18, 0.88)); + box-shadow: 0 12px 48px rgba(0, 0, 0, 0.35), 0 0 40px rgba(244, 211, 94, 0.04); +} + +.results-hero-header { + display: flex; + justify-content: space-between; + align-items: flex-start; + gap: 1rem; margin-bottom: 0.65rem; - padding: 0.65rem; +} + +.results-hero-header-left { + display: flex; + flex-direction: column; + gap: 0.45rem; +} + +.results-hero-header-left .btn-conversation-review { + width: 100%; + max-width: 320px; +} + +.results-eyebrow { + margin: 0; + font-size: 0.62rem; + font-weight: 700; + letter-spacing: 0.28em; + text-transform: uppercase; + color: var(--accent-cyan); +} + +.results-hero-grid { + display: grid; + grid-template-columns: auto 1fr; + gap: 1.25rem 1.5rem; + align-items: center; +} + +.score-orb-wrap { + display: flex; + justify-content: center; +} + +.score-orb { + width: clamp(96px, 16vw, 118px); + height: clamp(96px, 16vw, 118px); + border-radius: 50%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + background: radial-gradient(circle at 35% 30%, rgba(244, 211, 94, 0.22), rgba(12, 14, 24, 0.95) 68%); + border: 2px solid rgba(244, 211, 94, 0.45); + box-shadow: 0 0 32px rgba(244, 211, 94, 0.18), inset 0 0 24px rgba(244, 211, 94, 0.06); +} + +.score-orb-value { + font-size: clamp(1.9rem, 5vw, 2.35rem); + line-height: 1; + color: var(--gold); + font-weight: 800; +} + +.score-orb-label { + margin-top: 0.25rem; + font-size: 0.68rem; + font-weight: 700; + letter-spacing: 0.14em; + text-transform: uppercase; + color: rgba(244, 211, 94, 0.85); +} + +.result-verdict-text { + margin: 0; + font-size: clamp(0.95rem, 2.2vw, 1.1rem); + line-height: 1.4; + color: rgba(255, 255, 255, 0.92); + max-width: 52ch; +} + +.score-triad, +.insight-grid { + display: flex; + flex-wrap: wrap; + gap: 0.35rem; + margin-top: 0.5rem; +} + +.source-chip { + display: inline-flex; + align-items: center; + padding: 0.28rem 0.6rem; + border-radius: 999px; + font-size: 0.68rem; + font-weight: 600; + letter-spacing: 0.04em; + border: 1px solid rgba(255, 255, 255, 0.1); + background: rgba(255, 255, 255, 0.04); + color: var(--muted); +} + +.source-chip.chip-strong { + border-color: rgba(74, 222, 128, 0.3); + color: #86efac; + background: rgba(74, 222, 128, 0.08); +} + +.source-chip.chip-weak { + border-color: rgba(248, 113, 113, 0.3); + color: #fca5a5; + background: rgba(248, 113, 113, 0.08); +} + +.source-chip.chip-source { + border-color: rgba(78, 205, 196, 0.35); + color: #7efff0; + background: rgba(78, 205, 196, 0.08); +} + +.result-next-action { + margin-top: 0.75rem; + padding: 0.6rem 0.85rem; + border-radius: 8px; + border-left: 3px solid var(--gold); + background: rgba(244, 211, 94, 0.06); +} + +.result-next-action-compact .result-next-action-text { + font-size: 0.85rem; + line-height: 1.4; +} + +.result-next-action-text { + margin: 0; + font-size: 0.92rem; + line-height: 1.5; + color: rgba(255, 255, 255, 0.88); + max-width: 62ch; +} + +.results-hero-actions { + margin-top: 1.15rem; +} + +.results-hero-actions-compact { + margin-top: 0.75rem; + gap: 0.5rem; +} + +.results-hero-actions-compact .btn { + padding: 0.65rem 1rem; + font-size: 0.82rem; +} + +.results-fallback-warn { + margin: 0 0 0.75rem; + font-size: 0.78rem; + color: #f87171; +} + +.result-tabs { + display: flex; + gap: 0.35rem; + overflow-x: auto; + padding-bottom: 0.25rem; + scrollbar-width: thin; +} + +.result-tab { + flex: 0 0 auto; + padding: 0.55rem 0.9rem; + border-radius: 999px; + border: 1px solid rgba(255, 255, 255, 0.1); + background: rgba(255, 255, 255, 0.03); + color: var(--muted); + font-size: 0.78rem; + font-weight: 600; + cursor: pointer; + transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease; +} + +.result-tab:hover { + border-color: rgba(244, 211, 94, 0.25); + color: rgba(255, 255, 255, 0.9); +} + +.result-tab.active { + border-color: rgba(244, 211, 94, 0.45); + background: rgba(244, 211, 94, 0.1); + color: var(--gold); +} + +.result-panels { + display: grid; + gap: 0.75rem; +} + +.result-next-action-label { + display: block; + font-size: 0.62rem; + font-weight: 700; + letter-spacing: 0.2em; + text-transform: uppercase; + color: var(--gold); + margin-bottom: 0.25rem; +} + +.judge-verdict-hero { + padding: 0.85rem 1rem; + border: 1px solid rgba(78, 205, 196, 0.28); + background: linear-gradient(165deg, rgba(12, 20, 32, 0.92), rgba(6, 10, 18, 0.88)); + box-shadow: 0 0 28px rgba(78, 205, 196, 0.06); +} + +.judge-verdict-hero .results-eyebrow { + margin-bottom: 0.5rem; +} + +.judge-verdict-hero .judge-verdict-card { + padding: 0.75rem 0.85rem; + margin: 0; + border: none; + background: transparent; +} + +.verdict-reaction-compact { + margin: 0 0 0.5rem; + padding: 0.5rem 0.65rem; + font-size: 0.9rem; + line-height: 1.4; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; +} + +.verdict-meta-compact { + margin-bottom: 0.45rem; + gap: 0.5rem; +} + +.verdict-meta-compact strong { + font-size: 0.82rem; +} + +.clamp-short { + -webkit-line-clamp: 3; +} + +.overview-answers-compact { + gap: 0.55rem; +} + +.overview-answers-compact .feedback-card { + padding: 0.65rem 0.75rem; +} + +.overview-answers-compact .answer-quote { + padding: 0.5rem 0.6rem; + font-size: 0.82rem; + line-height: 1.45; + margin: 0; +} + +.overview-answers-compact .why-weak-note { + padding: 0.4rem 0.55rem; + font-size: 0.78rem; + margin-top: 0.35rem; +} + +.overview-answers-compact .feedback-card-head { + margin-bottom: 0.4rem; +} + +.signals-chips-compact { + margin-top: 0.5rem; +} + +.result-panel { + padding: 0.75rem 0.85rem; + border-radius: 12px; + border: 1px solid rgba(255, 255, 255, 0.07); + background: rgba(0, 0, 0, 0.22); +} + +.result-panel[hidden] { + display: none; +} + +.dimension-list { + display: grid; + gap: 0.85rem; +} + +.dimension-row { + padding: 0.75rem 0.85rem; + border-radius: 10px; + background: rgba(255, 255, 255, 0.03); + border: 1px solid rgba(255, 255, 255, 0.06); +} + +.dimension-row-head { + display: flex; + justify-content: space-between; + align-items: baseline; + gap: 0.75rem; + margin-bottom: 0.4rem; +} + +.dimension-name { + text-transform: capitalize; + font-weight: 600; + font-size: 0.92rem; +} + +.dimension-score { + font-size: 1.05rem; + font-weight: 800; + color: var(--gold); +} + +.dimension-bar { + height: 8px; + border-radius: 999px; + background: rgba(255, 255, 255, 0.08); + overflow: hidden; +} + +.dimension-bar-fill { + height: 100%; + border-radius: 999px; + transition: width 0.55s ease; +} + +.dimension-row.score-high .dimension-bar-fill { + background: linear-gradient(90deg, #22c55e, #4ade80); +} + +.dimension-row.score-mid .dimension-bar-fill { + background: linear-gradient(90deg, #eab308, var(--gold)); +} + +.dimension-row.score-low .dimension-bar-fill { + background: linear-gradient(90deg, var(--red), #f97316); +} + +.dimension-reason { + margin: 0.45rem 0 0; + font-size: 0.85rem; + line-height: 1.45; + color: var(--muted); +} + +.quote-chip { + display: block; + margin-top: 0.45rem; + padding: 0.45rem 0.65rem; + border-radius: 8px; + border-left: 2px solid rgba(78, 205, 196, 0.45); + background: rgba(78, 205, 196, 0.06); + font-size: 0.82rem; + font-style: italic; + color: rgba(255, 255, 255, 0.75); +} + +.signals-chips .signal-chip { + border-color: rgba(244, 211, 94, 0.25); + color: rgba(244, 211, 94, 0.85); +} + +.clamp-text { + display: -webkit-box; + -webkit-line-clamp: 6; + -webkit-box-orient: vertical; + overflow: hidden; +} + +.clamp-text.expanded { + -webkit-line-clamp: unset; + display: block; +} + +.show-more-btn { + margin-top: 0.4rem; + padding: 0; + border: none; + background: none; + color: var(--accent-cyan); + font-size: 0.78rem; + font-weight: 600; + cursor: pointer; +} + +.prep-checklist li { + list-style: none; + padding-left: 1.75rem; + position: relative; +} + +.prep-checklist li::before { + content: "☐"; + position: absolute; + left: 0.45rem; + color: var(--gold); +} + +.combined-score-triad { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 0.65rem; + margin: 0.5rem 0 0.85rem; +} + +.combined-score-triad.compact-triad { + max-width: 420px; +} + +.combined-score-item { + text-align: center; + padding: 0.75rem 0.5rem; border-radius: 10px; + background: rgba(255, 255, 255, 0.04); + border: 1px solid rgba(255, 255, 255, 0.08); +} + +.combined-score-item span { + display: block; + font-size: 0.68rem; + letter-spacing: 0.12em; + text-transform: uppercase; + color: var(--muted); + margin-bottom: 0.25rem; +} + +.combined-score-item strong { + font-size: 1.65rem; + color: var(--gold); +} + +.combined-score-item.combined-highlight { + border-color: rgba(244, 211, 94, 0.35); + background: rgba(244, 211, 94, 0.08); +} + +.combined-summary { + margin: 0.5rem 0 0; + color: var(--muted); + font-size: 0.9rem; + line-height: 1.5; + max-width: 62ch; +} + +.deal-weakest-line { + margin: 0.65rem 0 0; + font-size: 0.9rem; + color: rgba(248, 113, 113, 0.9); +} + +.results-hero-meta { + margin-top: 0.85rem; +} + +.voice-delivery-panel { + display: grid; + gap: 0.85rem; +} + +.voice-delivery-summary { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); + gap: 0.55rem; +} + +.voice-wave-decor { + height: 4px; + border-radius: 999px; + background: linear-gradient(90deg, transparent, rgba(78, 205, 196, 0.5), transparent); + opacity: 0.7; +} + +.voice-delivery-overall { + margin: 0; + font-size: 0.92rem; + line-height: 1.5; + color: rgba(255, 255, 255, 0.88); +} + +.results-modal-panel { + max-height: min(92vh, 900px); + overflow-y: auto; +} + +.conversation-timeline { + display: grid; + gap: 0.75rem; + max-height: min(60vh, 520px); + overflow-y: auto; + padding-right: 0.25rem; +} + +.conversation-timeline .negotiation-turn { + max-width: 88%; +} + +.conversation-timeline .negotiation-judge { + justify-self: start; +} + +.conversation-timeline .negotiation-founder { + justify-self: end; +} + +.path80-panel { + border: 1px solid rgba(244, 211, 94, 0.2); + box-shadow: 0 0 40px rgba(78, 205, 196, 0.08); +} + +.retry-drill-panel { border: 1px solid rgba(78, 205, 196, 0.25); - background: rgba(78, 205, 196, 0.05); } -.voice-wave-active { - margin-bottom: 0.5rem; - animation: voice-wave-pulse 1.5s ease-in-out infinite; -} +.path80-card-retry { + border-color: rgba(244, 211, 94, 0.28); +} + +@media (max-width: 720px) { + .results-hero-grid { + grid-template-columns: 1fr; + text-align: center; + } + + .score-orb-wrap { + justify-content: center; + } + + .result-verdict-text, + .result-next-action-text, + .combined-summary { + max-width: none; + } + + .combined-score-triad { + grid-template-columns: 1fr; + } -@keyframes voice-wave-pulse { - 0%, 100% { opacity: 0.5; } - 50% { opacity: 1; } + .path80-sections-compact, + .path80-retry-grid { + grid-template-columns: 1fr; + } + + .overview-answers-compact { + grid-template-columns: 1fr; + } + + .negotiation-turn { + max-width: 100%; + } } -.arena-readiness-prompt { - margin: 0; - padding: 0.75rem 0.9rem; - border: 1px solid rgba(244, 211, 94, 0.4); - border-radius: 10px; - background: rgba(244, 211, 94, 0.08); +@media (prefers-reduced-motion: reduce) { + .dimension-bar-fill { + transition: none !important; + } } -.arena-readiness-prompt p { - margin: 0 0 0.55rem; - font-size: 0.88rem; - color: rgba(255, 255, 255, 0.9); +.scorecard-header { + display: flex; + justify-content: space-between; + align-items: center; + gap: 1rem; } -.battle-readiness-actions, -.deal-readiness-actions { +.scorecard-header-left { display: flex; - flex-wrap: wrap; - gap: 0.45rem; + flex-direction: column; + gap: 0.5rem; } -.deal-arena-subtitle { - margin: 0.25rem 0 0.65rem; - font-size: 0.82rem; - color: var(--muted); - line-height: 1.4; +.btn-sm { + padding: 0.3rem 0.75rem; + font-size: 0.8rem; + border-radius: 6px; + align-self: flex-start; } -.deal-persona-card { - border-color: rgba(74, 222, 128, 0.28); - background: rgba(74, 222, 128, 0.06); +.overall-score { + text-align: right; } -.message.message-judge, -.message.ai { - align-self: flex-start; - max-width: 92%; - padding: 0.55rem 0.7rem; - border-radius: 10px; - border: 1px solid rgba(78, 205, 196, 0.2); - background: rgba(78, 205, 196, 0.06); +.overall-score strong { + display: block; + font-size: 2.5rem; + color: var(--gold); } -.message.message-founder, -.message.user { - align-self: flex-end; - max-width: 92%; - padding: 0.55rem 0.7rem; - border-radius: 10px; - border: 1px solid rgba(244, 211, 94, 0.22); - background: rgba(244, 211, 94, 0.06); +.score-bars { + display: grid; + gap: 0.9rem; + margin: 1.25rem 0; } -.message-collapsed { - opacity: 0.65; - transform: scale(0.98); +.score-row-head { + display: flex; + justify-content: space-between; + margin-bottom: 0.35rem; + text-transform: capitalize; } -.message-collapsed .message-preview { - font-size: 0.78rem; - -webkit-line-clamp: 1; - display: -webkit-box; - -webkit-box-orient: vertical; +.bar-track { + height: 10px; + border-radius: 999px; + background: rgba(255, 255, 255, 0.08); overflow: hidden; } -.message-preview { - margin: 0; - font-size: 0.82rem; - line-height: 1.4; +.bar-fill { + height: 100%; + background: linear-gradient(90deg, var(--red), var(--gold)); + transition: width 0.4s ease; } -.arena-loading .arena-loading-panel { - text-align: center; - padding: 1.5rem 2rem; - border-radius: 14px; - border: 1px solid rgba(78, 205, 196, 0.25); - background: rgba(8, 12, 20, 0.92); - min-width: 240px; +.score-row.score-high .bar-fill { + background: linear-gradient(90deg, #22c55e, #4ade80); } -.arena-loading-scan { - height: 3px; - margin: 0.75rem auto 0; - max-width: 180px; - border-radius: 999px; - background: linear-gradient(90deg, transparent, rgba(78, 205, 196, 0.7), transparent); - animation: judge-scan 1.8s ease-in-out infinite; +.score-row.score-mid .bar-fill { + background: linear-gradient(90deg, #eab308, var(--gold)); } -#loading-message { - margin: 0.75rem 0 0; +.score-row.score-low .bar-fill { + background: linear-gradient(90deg, var(--red), #f97316); +} + +.score-quote { + margin: 0.35rem 0 0; + padding-left: 0.5rem; + border-left: 2px solid rgba(255, 255, 255, 0.12); + color: rgba(255, 255, 255, 0.65); + font-size: 0.82rem; + font-style: italic; + line-height: 1.4; +} + +.score-reason { + margin: 0.35rem 0 0; + color: var(--muted); font-size: 0.9rem; - color: rgba(255, 255, 255, 0.88); } -@media (prefers-reduced-motion: reduce) { - .judge-card-scan, - .arena-loading-scan, - .voice-wave-active, - .pressure-meter-fill, - .battle-progress-fill { - animation: none !important; - transition: none !important; - } +.score-label { + margin-left: 0.5rem; + font-size: 0.75rem; + color: var(--gold); + font-weight: 600; + opacity: 0.85; + text-transform: uppercase; + letter-spacing: 0.04em; } -@media (min-width: 1041px) { - .battle-shell, - .arena-shell.battle-arena { - min-width: 1040px; - } +.scorecard-section { + margin-top: 1.5rem; } -@media (max-width: 1000px) { - .briefing-grid { - grid-template-columns: 1fr; - } +.scorecard-section-title { + margin: 0; + font-size: 1.05rem; + letter-spacing: 0.02em; +} - .battle-shell, - .arena-shell.battle-arena, - .battle-arena, - .battle-layout { - grid-template-columns: 1fr; - width: calc(100vw - 24px); - min-height: auto; - } +.scorecard-section-desc { + margin: 0.35rem 0 0.85rem; + color: var(--muted); + font-size: 0.85rem; +} - .battle-arena-wrap { - padding: 12px 0 24px; - min-height: auto; - } +.feedback-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); + gap: 0.85rem; +} - .battle-sidebar { - order: 1; - flex-direction: row; - flex-wrap: wrap; - align-items: center; - gap: 0.65rem 1.25rem; - padding: 0.85rem 1rem; - } +.coaching-grid { + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); +} - .arena-status-list { - flex-direction: row; - flex-wrap: wrap; - gap: 0.5rem 1rem; - flex: 1 1 auto; - } +.answer-compare { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + gap: 0.85rem; +} - .arena-status-list li { - padding: 0; - border: none; - } +.feedback-card { + padding: 1rem 1.1rem; + border-radius: 12px; + background: rgba(0, 0, 0, 0.22); + border: 1px solid rgba(255, 255, 255, 0.06); +} - .pressure-meter-sidebar { - flex: 1 1 100%; - margin: 0; - } +.feedback-card-head { + display: flex; + align-items: center; + gap: 0.5rem; + margin-bottom: 0.65rem; + flex-wrap: wrap; +} - .sidebar-actions { - flex-direction: row; - flex-wrap: wrap; - margin-top: 0; - padding-top: 0; - width: 100%; - } +.feedback-card h3 { + margin: 0; + font-size: 0.95rem; +} - .sidebar-actions .btn-wide { - flex: 1 1 auto; - } +.feedback-icon { + font-size: 0.9rem; + opacity: 0.85; +} - .battle-stage, - .battle-panel, - .battle-main { - order: 2; - min-height: auto; - padding: 1rem; - } +.feedback-body { + margin: 0; + line-height: 1.55; + color: rgba(255, 255, 255, 0.92); + font-size: 0.92rem; +} - .judge-question-hero { - padding: 18px 20px; - } +.feedback-card.highlight { + border-color: rgba(244, 211, 94, 0.28); + background: linear-gradient(145deg, rgba(244, 211, 94, 0.06), rgba(0, 0, 0, 0.22)); +} - .response-action-row { - flex-direction: column; - align-items: stretch; - } +.coaching-card .feedback-body { + border-left: 2px solid rgba(244, 211, 94, 0.45); + padding-left: 0.75rem; +} - .response-action-left { - justify-content: flex-start; - } +.answer-card { + display: flex; + flex-direction: column; + gap: 0.5rem; +} - .btn-send-answer { - width: 100%; - } +.answer-card.answer-best { + border-color: rgba(74, 222, 128, 0.28); + background: linear-gradient(145deg, rgba(74, 222, 128, 0.05), rgba(0, 0, 0, 0.22)); +} - .hint-chips-panel { - margin-left: 0; - } +.answer-card.answer-weak { + border-color: rgba(248, 113, 113, 0.28); + background: linear-gradient(145deg, rgba(248, 113, 113, 0.05), rgba(0, 0, 0, 0.22)); } -@media (max-width: 640px) { - .battle-round-header-top { - flex-direction: column; - align-items: flex-start; - } +.answer-badge { + display: inline-block; + padding: 0.2rem 0.55rem; + border-radius: 999px; + font-size: 0.72rem; + font-weight: 700; + letter-spacing: 0.04em; + text-transform: uppercase; +} - .response-console-form textarea { - min-height: 110px; - } +.answer-badge-best { + color: #4ade80; + background: rgba(74, 222, 128, 0.12); + border: 1px solid rgba(74, 222, 128, 0.25); } -.meta-item { - display: flex; - justify-content: space-between; - gap: 0.75rem; - padding: 0.65rem 0; - border-bottom: 1px solid rgba(255, 255, 255, 0.06); +.answer-badge-weak { + color: #f87171; + background: rgba(248, 113, 113, 0.12); + border: 1px solid rgba(248, 113, 113, 0.25); } -.meta-item span { +.round-badge { + margin-left: auto; + padding: 0.15rem 0.5rem; + border-radius: 6px; + font-size: 0.72rem; + font-weight: 600; color: var(--muted); + background: rgba(255, 255, 255, 0.06); + border: 1px solid rgba(255, 255, 255, 0.08); } -.pressure-medium { color: #7dd3fc; } +.answer-quote { + margin: 0; + padding: 0.75rem 0.85rem; + border-radius: 8px; + border-left: 3px solid #4ade80; + background: rgba(0, 0, 0, 0.25); + font-size: 0.92rem; + line-height: 1.55; + color: rgba(255, 255, 255, 0.9); + font-style: normal; +} -.chat-window { - display: flex; - flex-direction: column; - gap: 0.45rem; +.answer-quote-weak { + border-left-color: #f87171; } -.chat-window:not(.battle-timeline) { - flex: 1; - overflow-y: auto; - padding: 0.5rem; - margin-bottom: 1rem; +.why-weak-note { + margin: 0.25rem 0 0; + padding: 0.55rem 0.7rem; + border-radius: 8px; + background: rgba(248, 113, 113, 0.08); + color: var(--muted); + font-size: 0.85rem; + line-height: 1.45; } -.message-meta { - display: block; - font-size: 0.68rem; - color: var(--gold); - margin-bottom: 0.25rem; +.prep-questions { + margin-top: 0; } -.chat-input-row { +.prep-list { + margin: 0; + padding-left: 1.25rem; display: grid; - grid-template-columns: 1fr auto; - gap: 0.75rem; + gap: 0.55rem; } -.status-text { - color: var(--red); +.prep-list li { + padding: 0.55rem 0.7rem; + border-radius: 8px; + background: rgba(255, 255, 255, 0.04); + border: 1px solid rgba(255, 255, 255, 0.06); + line-height: 1.45; font-size: 0.9rem; - margin: 0.5rem 0 0; } -/* ================================ - Results / Scorecards (Pass 2.5) - ================================ */ +.scorecard-actions { + display: flex; + gap: 0.75rem; + flex-wrap: wrap; + margin-top: 1.25rem; +} -.results-shell { - max-width: 920px; - margin: 0 auto; - padding: 0.25rem 0 1.25rem; - display: grid; - gap: 1.25rem; +.signals-summary { + font-size: 0.78rem; + color: var(--muted); + margin: 0.6rem 0 0.2rem; + padding: 0.4rem 0.75rem; + border-left: 2px solid rgba(244, 211, 94, 0.35); + line-height: 1.5; + word-break: break-word; } -.results-compact { - gap: 0.65rem; - padding-bottom: 1rem; +.error-banner { + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: 30; + padding: 0.85rem 1.25rem; + background: rgba(230, 57, 70, 0.92); + color: #fff; + font-weight: 600; + text-align: center; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35); } -.results-hero-card { - padding: 1.1rem 1.15rem 1rem; - border: 1px solid rgba(244, 211, 94, 0.14); - background: linear-gradient(165deg, rgba(18, 22, 36, 0.92), rgba(8, 10, 18, 0.88)); - box-shadow: 0 12px 48px rgba(0, 0, 0, 0.35), 0 0 40px rgba(244, 211, 94, 0.04); +.error-banner[hidden] { + display: none; } -.results-hero-header { - display: flex; - justify-content: space-between; - align-items: flex-start; - gap: 1rem; - margin-bottom: 0.65rem; +.loading-overlay { + position: fixed; + inset: 0; + background: rgba(0, 0, 0, 0.55); + display: grid; + place-items: center; + z-index: 20; } -.results-hero-header-left { - display: flex; - flex-direction: column; - gap: 0.45rem; +.loading-overlay[hidden] { + display: none; } -.results-hero-header-left .btn-conversation-review { - width: 100%; - max-width: 320px; +.spinner { + width: 42px; + height: 42px; + border-radius: 50%; + border: 3px solid rgba(255, 255, 255, 0.15); + border-top-color: var(--gold); + animation: spin 0.8s linear infinite; + margin: 0 auto 0.75rem; } -.results-eyebrow { - margin: 0; - font-size: 0.62rem; +@keyframes spin { + to { transform: rotate(360deg); } +} + +.btn-path80 { + color: #06080f; + background: linear-gradient(135deg, #7dd3fc, #38bdf8); + box-shadow: 0 0 18px rgba(125, 211, 252, 0.35); font-weight: 700; - letter-spacing: 0.28em; - text-transform: uppercase; - color: var(--accent-cyan); } -.results-hero-grid { - display: grid; - grid-template-columns: auto 1fr; - gap: 1.25rem 1.5rem; - align-items: center; +.btn-path80:hover { + box-shadow: 0 0 28px rgba(125, 211, 252, 0.5); } -.score-orb-wrap { +/* Path to 80+ overlay */ +.path80-overlay { + position: fixed; + inset: 0; + background: rgba(0, 0, 0, 0.72); + z-index: 50; + overflow-y: auto; display: flex; + align-items: center; justify-content: center; + padding: 1rem; } -.score-orb { - width: clamp(96px, 16vw, 118px); - height: clamp(96px, 16vw, 118px); - border-radius: 50%; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - background: radial-gradient(circle at 35% 30%, rgba(244, 211, 94, 0.22), rgba(12, 14, 24, 0.95) 68%); - border: 2px solid rgba(244, 211, 94, 0.45); - box-shadow: 0 0 32px rgba(244, 211, 94, 0.18), inset 0 0 24px rgba(244, 211, 94, 0.06); +.path80-overlay[hidden] { + display: none; } -.score-orb-value { - font-size: clamp(1.9rem, 5vw, 2.35rem); - line-height: 1; - color: var(--gold); - font-weight: 800; +.path80-panel { + width: 100%; + max-width: 680px; + padding: 1.15rem 1.2rem; + margin: auto; + max-height: min(92vh, 820px); + overflow-y: auto; } -.score-orb-label { - margin-top: 0.25rem; - font-size: 0.68rem; - font-weight: 700; - letter-spacing: 0.14em; - text-transform: uppercase; - color: rgba(244, 211, 94, 0.85); +.path80-header { + display: flex; + justify-content: space-between; + align-items: flex-start; + gap: 1rem; + margin-bottom: 0.85rem; } -.result-verdict-text { +.path80-title { margin: 0; - font-size: clamp(0.95rem, 2.2vw, 1.1rem); - line-height: 1.4; - color: rgba(255, 255, 255, 0.92); - max-width: 52ch; + font-size: 1.25rem; } -.score-triad, -.insight-grid { +.path80-subtitle { + margin: 0.2rem 0 0; + color: #7dd3fc; + font-size: 0.95rem; + font-weight: 600; + letter-spacing: 0.04em; + text-transform: uppercase; +} + +.path80-score-bar { display: flex; + align-items: center; + gap: 1rem; flex-wrap: wrap; - gap: 0.35rem; - margin-top: 0.5rem; + background: rgba(125, 211, 252, 0.07); + border: 1px solid rgba(125, 211, 252, 0.25); + border-radius: 12px; + padding: 0.75rem 1rem; + margin-bottom: 0.85rem; + position: relative; } -.source-chip { - display: inline-flex; +.path80-score-item { + display: flex; + flex-direction: column; align-items: center; - padding: 0.28rem 0.6rem; - border-radius: 999px; - font-size: 0.68rem; - font-weight: 600; - letter-spacing: 0.04em; - border: 1px solid rgba(255, 255, 255, 0.1); - background: rgba(255, 255, 255, 0.04); - color: var(--muted); + gap: 0.2rem; } -.source-chip.chip-strong { - border-color: rgba(74, 222, 128, 0.3); - color: #86efac; - background: rgba(74, 222, 128, 0.08); +.path80-score-label { + font-size: 0.75rem; + color: var(--muted); + text-transform: uppercase; + letter-spacing: 0.05em; } -.source-chip.chip-weak { - border-color: rgba(248, 113, 113, 0.3); - color: #fca5a5; - background: rgba(248, 113, 113, 0.08); +.path80-score-num { + font-size: 1.75rem; + color: var(--gold); + line-height: 1; } -.source-chip.chip-source { - border-color: rgba(78, 205, 196, 0.35); - color: #7efff0; - background: rgba(78, 205, 196, 0.08); +.path80-sections-compact { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 0.6rem; } -.result-next-action { - margin-top: 0.75rem; - padding: 0.6rem 0.85rem; - border-radius: 8px; - border-left: 3px solid var(--gold); - background: rgba(244, 211, 94, 0.06); +.path80-card-compact { + padding: 0.65rem 0.75rem; } -.result-next-action-compact .result-next-action-text { - font-size: 0.85rem; - line-height: 1.4; +.path80-card-compact .path80-card-title { + font-size: 0.82rem; + margin-bottom: 0.35rem; } -.result-next-action-text { +.path80-card-compact .path80-card-body { + font-size: 0.82rem; + line-height: 1.4; margin: 0; - font-size: 0.92rem; - line-height: 1.5; - color: rgba(255, 255, 255, 0.88); - max-width: 62ch; } -.results-hero-actions { - margin-top: 1.15rem; +.path80-card-retry-compact { + grid-column: 1 / -1; + padding: 0.75rem 0.85rem; } -.results-hero-actions-compact { - margin-top: 0.75rem; - gap: 0.5rem; +.path80-retry-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 0.65rem; + margin-top: 0.45rem; } -.results-hero-actions-compact .btn { - padding: 0.65rem 1rem; +.path80-sample-details { + margin-top: 0.55rem; font-size: 0.82rem; } -.results-fallback-warn { - margin: 0 0 0.75rem; +.path80-sample-details summary { + cursor: pointer; + color: var(--accent-cyan); + font-weight: 600; font-size: 0.78rem; - color: #f87171; } -.result-tabs { - display: flex; - gap: 0.35rem; - overflow-x: auto; - padding-bottom: 0.25rem; - scrollbar-width: thin; +.path80-sample-details .path80-quote { + margin-top: 0.45rem; } -.result-tab { - flex: 0 0 auto; - padding: 0.55rem 0.9rem; - border-radius: 999px; - border: 1px solid rgba(255, 255, 255, 0.1); - background: rgba(255, 255, 255, 0.03); - color: var(--muted); +.path80-why-hurt { + margin-top: 0.45rem; font-size: 0.78rem; - font-weight: 600; - cursor: pointer; - transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease; } -.result-tab:hover { - border-color: rgba(244, 211, 94, 0.25); - color: rgba(255, 255, 255, 0.9); -} - -.result-tab.active { - border-color: rgba(244, 211, 94, 0.45); - background: rgba(244, 211, 94, 0.1); - color: var(--gold); +.path80-score-green { + color: #4ade80; } -.result-panels { - display: grid; - gap: 0.75rem; +.path80-arrow { + font-size: 1.5rem; + color: var(--muted); } -.result-next-action-label { - display: block; - font-size: 0.62rem; - font-weight: 700; - letter-spacing: 0.2em; - text-transform: uppercase; - color: var(--gold); - margin-bottom: 0.25rem; +.path80-estimate-reason { + width: 100%; + margin: 0.5rem 0 0; + font-size: 0.88rem; + color: var(--muted); + font-style: italic; } -.judge-verdict-hero { - padding: 0.85rem 1rem; - border: 1px solid rgba(78, 205, 196, 0.28); - background: linear-gradient(165deg, rgba(12, 20, 32, 0.92), rgba(6, 10, 18, 0.88)); - box-shadow: 0 0 28px rgba(78, 205, 196, 0.06); +.path80-sections { + display: grid; + gap: 1rem; } -.judge-verdict-hero .results-eyebrow { - margin-bottom: 0.5rem; +.path80-card { + padding: 1.1rem 1.25rem; + border-radius: 14px; + background: rgba(0, 0, 0, 0.28); + border: 1px solid rgba(255, 255, 255, 0.07); } -.judge-verdict-hero .judge-verdict-card { - padding: 0.75rem 0.85rem; - margin: 0; - border: none; - background: transparent; +.path80-card-alert { + border-color: rgba(230, 57, 70, 0.3); + background: rgba(230, 57, 70, 0.06); } -.verdict-reaction-compact { - margin: 0 0 0.5rem; - padding: 0.5rem 0.65rem; - font-size: 0.9rem; - line-height: 1.4; - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - overflow: hidden; +.path80-card-retry { + border-color: rgba(125, 211, 252, 0.25); + background: rgba(125, 211, 252, 0.04); } -.verdict-meta-compact { - margin-bottom: 0.45rem; - gap: 0.5rem; +.path80-card-title { + margin: 0 0 0.65rem; + font-size: 1rem; + color: var(--gold); } -.verdict-meta-compact strong { - font-size: 0.82rem; +.path80-card-alert .path80-card-title { + color: #fb7185; } - -.clamp-short { - -webkit-line-clamp: 3; + +.path80-card-retry .path80-card-title { + color: #7dd3fc; } -.overview-answers-compact { - gap: 0.55rem; +.path80-card-body { + margin: 0; + line-height: 1.55; + font-size: 0.95rem; } -.overview-answers-compact .feedback-card { - padding: 0.65rem 0.75rem; +.path80-muted { + color: var(--muted); } -.overview-answers-compact .answer-quote { - padding: 0.5rem 0.6rem; - font-size: 0.82rem; - line-height: 1.45; - margin: 0; +.path80-retry-meta { + display: flex; + gap: 0.6rem; + align-items: center; + margin-bottom: 0.85rem; + flex-wrap: wrap; } -.overview-answers-compact .why-weak-note { - padding: 0.4rem 0.55rem; +.path80-dim-badge { font-size: 0.78rem; - margin-top: 0.35rem; + font-weight: 700; + background: rgba(125, 211, 252, 0.15); + color: #7dd3fc; + border: 1px solid rgba(125, 211, 252, 0.35); + border-radius: 6px; + padding: 0.15rem 0.6rem; + text-transform: capitalize; } -.overview-answers-compact .feedback-card-head { - margin-bottom: 0.4rem; +.path80-round-tag { + font-size: 0.78rem; + color: var(--muted); } -.signals-chips-compact { - margin-top: 0.5rem; +.path80-answer-label { + font-size: 0.78rem; + font-weight: 700; + color: var(--muted); + text-transform: uppercase; + letter-spacing: 0.05em; + margin: 0.85rem 0 0.3rem; } -.result-panel { - padding: 0.75rem 0.85rem; - border-radius: 12px; - border: 1px solid rgba(255, 255, 255, 0.07); - background: rgba(0, 0, 0, 0.22); +.path80-quote { + margin: 0; + padding: 0.65rem 0.9rem; + border-radius: 8px; + font-size: 0.92rem; + line-height: 1.5; + font-style: italic; } -.result-panel[hidden] { - display: none; +.path80-quote-weak { + background: rgba(230, 57, 70, 0.08); + border-left: 3px solid rgba(230, 57, 70, 0.5); + color: var(--muted); } -.dimension-list { - display: grid; - gap: 0.85rem; +.path80-quote-strong { + background: rgba(74, 222, 128, 0.07); + border-left: 3px solid rgba(74, 222, 128, 0.45); + color: var(--text); } -.dimension-row { - padding: 0.75rem 0.85rem; - border-radius: 10px; - background: rgba(255, 255, 255, 0.03); - border: 1px solid rgba(255, 255, 255, 0.06); +.path80-footer { + margin-top: 1.5rem; + display: flex; + flex-wrap: wrap; + gap: 0.65rem; + justify-content: flex-end; } -.dimension-row-head { - display: flex; - justify-content: space-between; - align-items: baseline; - gap: 0.75rem; - margin-bottom: 0.4rem; +.btn-retry-start { + background: linear-gradient(135deg, #0ea5e9, #06b6d4); + color: #041018; + border: none; + font-weight: 700; } -.dimension-name { - text-transform: capitalize; - font-weight: 600; - font-size: 0.92rem; +.btn-retry-start:hover { + filter: brightness(1.08); } -.dimension-score { - font-size: 1.05rem; - font-weight: 800; - color: var(--gold); +.btn-retry-submit { + background: linear-gradient(135deg, #0ea5e9, #06b6d4); + color: #041018; + border: none; + font-weight: 700; + margin-top: 0.75rem; } -.dimension-bar { - height: 8px; - border-radius: 999px; - background: rgba(255, 255, 255, 0.08); - overflow: hidden; +/* Retry weakest question — Phase 8 */ +.retry-overlay { + position: fixed; + inset: 0; + z-index: 45; + background: rgba(0, 0, 0, 0.72); + display: flex; + align-items: flex-start; + justify-content: center; + padding: 1.25rem; + overflow-y: auto; } -.dimension-bar-fill { - height: 100%; - border-radius: 999px; - transition: width 0.55s ease; +.retry-overlay[hidden] { + display: none; } -.dimension-row.score-high .dimension-bar-fill { - background: linear-gradient(90deg, #22c55e, #4ade80); +.retry-panel { + width: min(920px, 100%); + max-height: 92vh; + overflow-y: auto; + padding: 1.25rem 1.35rem 1.5rem; + border: 1px solid rgba(14, 165, 233, 0.35); + box-shadow: 0 12px 48px rgba(14, 165, 233, 0.12); } -.dimension-row.score-mid .dimension-bar-fill { - background: linear-gradient(90deg, #eab308, var(--gold)); +.retry-header { + display: flex; + justify-content: space-between; + gap: 1rem; + margin-bottom: 1rem; } -.dimension-row.score-low .dimension-bar-fill { - background: linear-gradient(90deg, var(--red), #f97316); +.retry-title { + margin: 0; + font-size: 1.35rem; } -.dimension-reason { - margin: 0.45rem 0 0; - font-size: 0.85rem; - line-height: 1.45; - color: var(--muted); +.retry-subtitle { + margin: 0.25rem 0 0; + color: #67e8f9; + font-size: 0.9rem; } -.quote-chip { - display: block; - margin-top: 0.45rem; - padding: 0.45rem 0.65rem; - border-radius: 8px; - border-left: 2px solid rgba(78, 205, 196, 0.45); - background: rgba(78, 205, 196, 0.06); - font-size: 0.82rem; - font-style: italic; - color: rgba(255, 255, 255, 0.75); +.retry-cards { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); + gap: 0.75rem; + margin-bottom: 1rem; } -.signals-chips .signal-chip { - border-color: rgba(244, 211, 94, 0.25); - color: rgba(244, 211, 94, 0.85); +.retry-card { + padding: 0.85rem; + border-radius: 10px; + background: rgba(0, 0, 0, 0.25); + border: 1px solid rgba(255, 255, 255, 0.08); } -.clamp-text { - display: -webkit-box; - -webkit-line-clamp: 6; - -webkit-box-orient: vertical; - overflow: hidden; +.retry-card h3, +.retry-card h4 { + margin: 0 0 0.45rem; + font-size: 0.82rem; + text-transform: uppercase; + letter-spacing: 0.04em; + color: #67e8f9; } -.clamp-text.expanded { - -webkit-line-clamp: unset; - display: block; +.retry-card-body { + margin: 0; + font-size: 0.92rem; + line-height: 1.5; } -.show-more-btn { - margin-top: 0.4rem; - padding: 0; - border: none; - background: none; - color: var(--accent-cyan); - font-size: 0.78rem; - font-weight: 600; - cursor: pointer; +.retry-card-weak { + border-color: rgba(248, 113, 113, 0.35); } -.prep-checklist li { - list-style: none; - padding-left: 1.75rem; - position: relative; +.retry-card-strong { + border-color: rgba(74, 222, 128, 0.35); } -.prep-checklist li::before { - content: "☐"; - position: absolute; - left: 0.45rem; - color: var(--gold); +.retry-card-tip { + border-color: rgba(244, 211, 94, 0.3); } -.combined-score-triad { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 0.65rem; - margin: 0.5rem 0 0.85rem; +.retry-quote { + margin: 0; + padding: 0.55rem 0.7rem; + border-left: 3px solid rgba(248, 113, 113, 0.45); + background: rgba(248, 113, 113, 0.06); + font-size: 0.9rem; } -.combined-score-triad.compact-triad { - max-width: 420px; +.retry-quote-strong { + border-left-color: rgba(74, 222, 128, 0.45); + background: rgba(74, 222, 128, 0.06); } -.combined-score-item { - text-align: center; - padding: 0.75rem 0.5rem; - border-radius: 10px; - background: rgba(255, 255, 255, 0.04); - border: 1px solid rgba(255, 255, 255, 0.08); +.retry-answer-area { + margin-top: 0.5rem; + padding-top: 0.75rem; + border-top: 1px solid rgba(14, 165, 233, 0.2); } -.combined-score-item span { +.retry-input-label { display: block; - font-size: 0.68rem; - letter-spacing: 0.12em; - text-transform: uppercase; + font-size: 0.82rem; color: var(--muted); - margin-bottom: 0.25rem; + margin-bottom: 0.35rem; } -.combined-score-item strong { - font-size: 1.65rem; - color: var(--gold); +.retry-input-row { + display: flex; + align-items: center; + gap: 0.5rem; + margin-bottom: 0.5rem; } -.combined-score-item.combined-highlight { - border-color: rgba(244, 211, 94, 0.35); - background: rgba(244, 211, 94, 0.08); +#retry-answer-input { + width: 100%; + resize: vertical; + min-height: 4.5rem; } -.combined-summary { - margin: 0.5rem 0 0; - color: var(--muted); - font-size: 0.9rem; - line-height: 1.5; - max-width: 62ch; +.retry-voice-preview { + margin-top: 0.5rem; } -.deal-weakest-line { - margin: 0.65rem 0 0; - font-size: 0.9rem; - color: rgba(248, 113, 113, 0.9); +.retry-vs-grid, +.retry-feedback-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: 0.75rem; + margin-bottom: 0.85rem; } -.results-hero-meta { - margin-top: 0.85rem; +.retry-estimate-bar { + display: flex; + flex-wrap: wrap; + gap: 0.65rem; + align-items: center; + margin: 0.75rem 0; + padding: 0.75rem; + border-radius: 10px; + background: rgba(14, 165, 233, 0.08); + border: 1px solid rgba(14, 165, 233, 0.25); } -.voice-delivery-panel { - display: grid; - gap: 0.85rem; +.retry-dim-estimate, +.retry-overall-lift { + font-size: 0.9rem; + font-weight: 600; } -.voice-delivery-summary { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); - gap: 0.55rem; +.retry-overall-lift { + color: var(--gold); } -.voice-wave-decor { - height: 4px; +.retry-verdict-badge { + padding: 0.25rem 0.65rem; border-radius: 999px; - background: linear-gradient(90deg, transparent, rgba(78, 205, 196, 0.5), transparent); - opacity: 0.7; + font-size: 0.78rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.04em; } -.voice-delivery-overall { - margin: 0; - font-size: 0.92rem; - line-height: 1.5; - color: rgba(255, 255, 255, 0.88); +.verdict-improved { + background: rgba(74, 222, 128, 0.2); + color: #86efac; } -.results-modal-panel { - max-height: min(92vh, 900px); - overflow-y: auto; +.verdict-slightly_improved { + background: rgba(14, 165, 233, 0.2); + color: #67e8f9; } -.conversation-timeline { - display: grid; - gap: 0.75rem; - max-height: min(60vh, 520px); - overflow-y: auto; - padding-right: 0.25rem; +.verdict-needs_more_work { + background: rgba(248, 113, 113, 0.18); + color: #fca5a5; } -.conversation-timeline .negotiation-turn { - max-width: 88%; +.retry-next-prompt { + font-size: 0.88rem; + color: var(--muted); + margin: 0 0 0.75rem; } -.conversation-timeline .negotiation-judge { - justify-self: start; +.retry-result-actions { + display: flex; + flex-wrap: wrap; + gap: 0.6rem; + justify-content: flex-end; } -.conversation-timeline .negotiation-founder { - justify-self: end; +/* Phase 9 — Judge Verdict + Deal Arena */ +.judge-verdict-section { + margin-top: 0.5rem; } -.path80-panel { - border: 1px solid rgba(244, 211, 94, 0.2); - box-shadow: 0 0 40px rgba(78, 205, 196, 0.08); +.judge-verdict-card { + padding: 1rem 1.1rem; + border: 1px solid rgba(244, 211, 94, 0.35); + border-radius: 12px; + background: rgba(0, 0, 0, 0.28); } -.retry-drill-panel { - border: 1px solid rgba(78, 205, 196, 0.25); +.judge-verdict-head { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; + margin-bottom: 0.75rem; } -.path80-card-retry { - border-color: rgba(244, 211, 94, 0.28); +.verdict-persona-badge { + font-size: 0.85rem; + font-weight: 700; + color: var(--gold); } -@media (max-width: 720px) { - .results-hero-grid { - grid-template-columns: 1fr; - text-align: center; - } - - .score-orb-wrap { - justify-content: center; - } - - .result-verdict-text, - .result-next-action-text, - .combined-summary { - max-width: none; - } +.verdict-interest-badge { + padding: 0.2rem 0.55rem; + border-radius: 999px; + font-size: 0.72rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.04em; +} - .combined-score-triad { - grid-template-columns: 1fr; - } +.interest-strong_interest { background: rgba(74, 222, 128, 0.18); color: #86efac; } +.interest-mild_interest { background: rgba(14, 165, 233, 0.18); color: #67e8f9; } +.interest-too_early { background: rgba(251, 191, 36, 0.18); color: #fcd34d; } +.interest-no_interest { background: rgba(248, 113, 113, 0.18); color: #fca5a5; } - .path80-sections-compact, - .path80-retry-grid { - grid-template-columns: 1fr; - } +.verdict-reaction { + margin: 0 0 0.85rem; + padding: 0.65rem 0.85rem; + border-left: 3px solid rgba(244, 211, 94, 0.5); + font-style: italic; + line-height: 1.55; +} - .overview-answers-compact { - grid-template-columns: 1fr; - } +.verdict-meta-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); + gap: 0.65rem; + font-size: 0.88rem; + margin-bottom: 0.65rem; +} - .negotiation-turn { - max-width: 100%; - } +.verdict-meta-grid span { + display: block; + color: var(--muted); + font-size: 0.75rem; + margin-bottom: 0.15rem; } -@media (prefers-reduced-motion: reduce) { - .dimension-bar-fill { - transition: none !important; - } +.verdict-opening-offer { + font-size: 0.88rem; + color: #67e8f9; + margin: 0 0 0.75rem; } -.scorecard-header { +.verdict-actions { display: flex; - justify-content: space-between; - align-items: center; - gap: 1rem; + flex-wrap: wrap; + gap: 0.55rem; + margin-top: 0.5rem; } -.scorecard-header-left { - display: flex; - flex-direction: column; - gap: 0.5rem; +.btn-deal-continue { + background: linear-gradient(135deg, #0ea5e9, #06b6d4); + color: #041018; + border: none; + font-weight: 700; + box-shadow: 0 0 18px rgba(14, 165, 233, 0.25); } -.btn-sm { - padding: 0.3rem 0.75rem; - font-size: 0.8rem; - border-radius: 6px; - align-self: flex-start; +.btn-deal-send { + background: linear-gradient(135deg, #0ea5e9, #06b6d4); + color: #041018; + border: none; + font-weight: 700; } -.overall-score { - text-align: right; +.deal-meta .deal-context-item strong { + font-size: 0.82rem; + line-height: 1.35; } -.overall-score strong { - display: block; - font-size: 2.5rem; - color: var(--gold); +.deal-chat { + border: 1px solid rgba(14, 165, 233, 0.2); } -.score-bars { - display: grid; - gap: 0.9rem; - margin: 1.25rem 0; +.combined-scores { + display: flex; + flex-wrap: wrap; + gap: 1rem; + align-items: center; +} + +.combined-score-item { + text-align: center; } -.score-row-head { - display: flex; - justify-content: space-between; - margin-bottom: 0.35rem; - text-transform: capitalize; +.combined-score-item span { + display: block; + font-size: 0.75rem; + color: var(--muted); } -.bar-track { - height: 10px; - border-radius: 999px; - background: rgba(255, 255, 255, 0.08); - overflow: hidden; +.combined-score-item strong { + font-size: 1.6rem; + color: var(--gold); } -.bar-fill { - height: 100%; - background: linear-gradient(90deg, var(--red), var(--gold)); - transition: width 0.4s ease; +.combined-highlight strong { + color: #67e8f9; } -.score-row.score-high .bar-fill { - background: linear-gradient(90deg, #22c55e, #4ade80); +.combined-profile { + font-size: 1.05rem; + font-weight: 600; + margin: 0.75rem 0 0.35rem; } -.score-row.score-mid .bar-fill { - background: linear-gradient(90deg, #eab308, var(--gold)); +.combined-summary, +.combined-next-action { + color: var(--muted); + line-height: 1.5; } -.score-row.score-low .bar-fill { - background: linear-gradient(90deg, var(--red), #f97316); +.deal-outcome-row { + display: flex; + align-items: center; + gap: 0.65rem; + margin-bottom: 0.75rem; } -.score-quote { - margin: 0.35rem 0 0; - padding-left: 0.5rem; - border-left: 2px solid rgba(255, 255, 255, 0.12); - color: rgba(255, 255, 255, 0.65); - font-size: 0.82rem; - font-style: italic; - line-height: 1.4; +.deal-outcome-badge { + padding: 0.25rem 0.65rem; + border-radius: 999px; + font-size: 0.78rem; + font-weight: 700; + text-transform: uppercase; + background: rgba(14, 165, 233, 0.15); + color: #67e8f9; } -.score-reason { - margin: 0.35rem 0 0; - color: var(--muted); - font-size: 0.9rem; +.outcome-strong_win { background: rgba(74, 222, 128, 0.18); color: #86efac; } +.outcome-weak_concession { background: rgba(248, 113, 113, 0.18); color: #fca5a5; } + +/* Voice mode — Phase 7 */ +.start-method-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); + gap: 0.85rem; + margin: 1rem 0 1.25rem; } -.score-label { - margin-left: 0.5rem; - font-size: 0.75rem; - color: var(--gold); - font-weight: 600; - opacity: 0.85; - text-transform: uppercase; - letter-spacing: 0.04em; +.start-method-card { + text-align: left; + padding: 1.1rem; + border-radius: 12px; + border: 1px solid rgba(255, 255, 255, 0.08); + background: rgba(0, 0, 0, 0.2); + color: inherit; + cursor: pointer; + transition: border-color 0.2s, box-shadow 0.2s; } -.scorecard-section { - margin-top: 1.5rem; +.start-method-card.selected { + border-color: rgba(125, 211, 252, 0.45); + box-shadow: 0 0 20px rgba(125, 211, 252, 0.12); } -.scorecard-section-title { - margin: 0; - font-size: 1.05rem; - letter-spacing: 0.02em; +.start-method-card h3 { + margin: 0.35rem 0 0.25rem; + font-size: 1rem; } -.scorecard-section-desc { - margin: 0.35rem 0 0.85rem; +.start-method-card p { + margin: 0; color: var(--muted); font-size: 0.85rem; + line-height: 1.4; } -.feedback-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); - gap: 0.85rem; +.start-method-icon { + font-size: 1.4rem; } -.coaching-grid { - grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); +.voice-panel { + max-width: 640px; + margin: 0 auto; } -.answer-compare { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); - gap: 0.85rem; +.voice-guidance { + padding: 0.85rem 1rem; + border-radius: 10px; + margin-bottom: 1.25rem; + border-left: 3px solid #7dd3fc; + font-size: 0.9rem; + line-height: 1.5; } -.feedback-card { - padding: 1rem 1.1rem; - border-radius: 12px; - background: rgba(0, 0, 0, 0.22); - border: 1px solid rgba(255, 255, 255, 0.06); +.voice-hint { + color: var(--muted); + margin: 0.5rem 0 0; + font-size: 0.82rem; } -.feedback-card-head { +.voice-recorder { display: flex; + flex-direction: column; align-items: center; - gap: 0.5rem; - margin-bottom: 0.65rem; - flex-wrap: wrap; + gap: 0.65rem; + padding: 1.5rem 0; } -.feedback-card h3 { - margin: 0; - font-size: 0.95rem; +.voice-mic-btn { + position: relative; + width: 88px; + height: 88px; + border-radius: 50%; + border: 2px solid rgba(125, 211, 252, 0.5); + background: radial-gradient(circle at 30% 30%, rgba(125, 211, 252, 0.25), rgba(6, 8, 15, 0.9)); + color: #fff; + cursor: pointer; + display: grid; + place-items: center; + box-shadow: 0 0 24px rgba(125, 211, 252, 0.2); + transition: transform 0.15s, box-shadow 0.2s; } -.feedback-icon { +.voice-mic-btn-sm { + width: 48px; + height: 48px; font-size: 0.9rem; - opacity: 0.85; } -.feedback-body { - margin: 0; - line-height: 1.55; - color: rgba(255, 255, 255, 0.92); - font-size: 0.92rem; +.voice-mic-btn:hover { + transform: scale(1.04); + box-shadow: 0 0 32px rgba(125, 211, 252, 0.35); } -.feedback-card.highlight { - border-color: rgba(244, 211, 94, 0.28); - background: linear-gradient(145deg, rgba(244, 211, 94, 0.06), rgba(0, 0, 0, 0.22)); +.voice-mic-btn.recording { + border-color: #f87171; + box-shadow: 0 0 28px rgba(248, 113, 113, 0.45); + animation: voice-pulse 1.2s ease-in-out infinite; } -.coaching-card .feedback-body { - border-left: 2px solid rgba(244, 211, 94, 0.45); - padding-left: 0.75rem; +.voice-mic-btn .mic-ring { + position: absolute; + inset: -6px; + border-radius: 50%; + border: 2px solid transparent; } -.answer-card { - display: flex; - flex-direction: column; - gap: 0.5rem; +.voice-mic-btn.recording .mic-ring { + border-color: rgba(248, 113, 113, 0.35); + animation: voice-ring 1.2s ease-out infinite; } -.answer-card.answer-best { - border-color: rgba(74, 222, 128, 0.28); - background: linear-gradient(145deg, rgba(74, 222, 128, 0.05), rgba(0, 0, 0, 0.22)); +@keyframes voice-pulse { + 0%, 100% { transform: scale(1); } + 50% { transform: scale(1.06); } } -.answer-card.answer-weak { - border-color: rgba(248, 113, 113, 0.28); - background: linear-gradient(145deg, rgba(248, 113, 113, 0.05), rgba(0, 0, 0, 0.22)); +@keyframes voice-ring { + 0% { transform: scale(1); opacity: 0.8; } + 100% { transform: scale(1.35); opacity: 0; } } -.answer-badge { - display: inline-block; - padding: 0.2rem 0.55rem; - border-radius: 999px; - font-size: 0.72rem; +.voice-timer { + font-size: 1.25rem; font-weight: 700; - letter-spacing: 0.04em; - text-transform: uppercase; + color: #7dd3fc; + font-variant-numeric: tabular-nums; } -.answer-badge-best { - color: #4ade80; - background: rgba(74, 222, 128, 0.12); - border: 1px solid rgba(74, 222, 128, 0.25); +.voice-timer-inline { + font-size: 0.85rem; + min-width: 2.5rem; } -.answer-badge-weak { +.voice-status { + font-size: 0.82rem; color: #f87171; - background: rgba(248, 113, 113, 0.12); - border: 1px solid rgba(248, 113, 113, 0.25); -} - -.round-badge { - margin-left: auto; - padding: 0.15rem 0.5rem; - border-radius: 6px; - font-size: 0.72rem; - font-weight: 600; - color: var(--muted); - background: rgba(255, 255, 255, 0.06); - border: 1px solid rgba(255, 255, 255, 0.08); + min-height: 1.2em; } -.answer-quote { - margin: 0; - padding: 0.75rem 0.85rem; - border-radius: 8px; - border-left: 3px solid #4ade80; - background: rgba(0, 0, 0, 0.25); - font-size: 0.92rem; - line-height: 1.55; - color: rgba(255, 255, 255, 0.9); - font-style: normal; +.voice-transcript-card { + padding: 1rem; + border-radius: 10px; + margin-bottom: 1rem; } -.answer-quote-weak { - border-left-color: #f87171; +.voice-transcript-text { + margin: 0.5rem 0; + line-height: 1.55; + font-size: 0.92rem; } -.why-weak-note { - margin: 0.25rem 0 0; - padding: 0.55rem 0.7rem; - border-radius: 8px; - background: rgba(248, 113, 113, 0.08); - color: var(--muted); +.voice-delivery-note { + margin: 0.35rem 0 0; font-size: 0.85rem; - line-height: 1.45; + color: var(--muted); } -.prep-questions { - margin-top: 0; +.delivery-chip { + display: inline-block; + margin-top: 0.5rem; + padding: 0.2rem 0.55rem; + border-radius: 999px; + font-size: 0.72rem; + font-weight: 600; + background: rgba(125, 211, 252, 0.12); + border: 1px solid rgba(125, 211, 252, 0.3); + color: #7dd3fc; } -.prep-list { - margin: 0; - padding-left: 1.25rem; - display: grid; - gap: 0.55rem; +.delivery-chip.confidence-low { + background: rgba(248, 113, 113, 0.12); + border-color: rgba(248, 113, 113, 0.35); + color: #f87171; } -.prep-list li { - padding: 0.55rem 0.7rem; +.voice-low-confidence { + padding: 0.6rem 0.85rem; border-radius: 8px; - background: rgba(255, 255, 255, 0.04); - border: 1px solid rgba(255, 255, 255, 0.06); - line-height: 1.45; - font-size: 0.9rem; + background: rgba(248, 113, 113, 0.1); + border: 1px solid rgba(248, 113, 113, 0.3); + color: #fca5a5; + font-size: 0.88rem; + margin-bottom: 0.85rem; } -.scorecard-actions { +.voice-confirm-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; - margin-top: 1.25rem; + margin-top: 1rem; } -.signals-summary { - font-size: 0.78rem; - color: var(--muted); - margin: 0.6rem 0 0.2rem; - padding: 0.4rem 0.75rem; - border-left: 2px solid rgba(244, 211, 94, 0.35); - line-height: 1.5; - word-break: break-word; +.battle-input-tabs { + display: flex; + align-items: center; + gap: 0.5rem; + flex-wrap: wrap; + margin-bottom: 0.5rem; + padding: 0.35rem 0; } -.error-banner { - position: fixed; - top: 0; - left: 0; - right: 0; - z-index: 30; - padding: 0.85rem 1.25rem; - background: rgba(230, 57, 70, 0.92); - color: #fff; - font-weight: 600; - text-align: center; - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35); +.input-tab-label { + font-size: 0.8rem; + color: var(--muted); + margin-right: 0.25rem; } -.error-banner[hidden] { - display: none; +.voice-turn-preview { + margin-bottom: 0.75rem; + padding: 0.85rem; + border-radius: 10px; + border: 1px solid rgba(125, 211, 252, 0.25); + background: rgba(125, 211, 252, 0.05); } -.loading-overlay { - position: fixed; - inset: 0; - background: rgba(0, 0, 0, 0.55); - display: grid; - place-items: center; - z-index: 20; +.voice-turn-preview h4 { + margin: 0 0 0.5rem; + font-size: 0.85rem; + color: #7dd3fc; } -.loading-overlay[hidden] { - display: none; +.voice-turn-preview textarea { + width: 100%; + margin-bottom: 0.5rem; } -.spinner { - width: 42px; - height: 42px; - border-radius: 50%; - border: 3px solid rgba(255, 255, 255, 0.15); - border-top-color: var(--gold); - animation: spin 0.8s linear infinite; - margin: 0 auto 0.75rem; +.voice-turn-actions { + display: flex; + gap: 0.5rem; + margin-top: 0.5rem; } -@keyframes spin { - to { transform: rotate(360deg); } +.voice-delivery-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); + gap: 0.65rem; } -.btn-path80 { - color: #06080f; - background: linear-gradient(135deg, #7dd3fc, #38bdf8); - box-shadow: 0 0 18px rgba(125, 211, 252, 0.35); - font-weight: 700; +.voice-delivery-stat { + padding: 0.65rem 0.75rem; + border-radius: 8px; + background: rgba(125, 211, 252, 0.06); + border: 1px solid rgba(125, 211, 252, 0.15); } -.btn-path80:hover { - box-shadow: 0 0 28px rgba(125, 211, 252, 0.5); +.voice-delivery-stat span { + display: block; + font-size: 0.72rem; + color: var(--muted); + text-transform: uppercase; + letter-spacing: 0.03em; } -/* Path to 80+ overlay */ -.path80-overlay { - position: fixed; - inset: 0; - background: rgba(0, 0, 0, 0.72); - z-index: 50; - overflow-y: auto; - display: flex; - align-items: center; - justify-content: center; - padding: 1rem; +.voice-delivery-stat strong { + display: block; + margin-top: 0.25rem; + font-size: 0.9rem; } -.path80-overlay[hidden] { - display: none; +.voice-delivery-notes { + grid-column: 1 / -1; + margin: 0.5rem 0 0; + padding-left: 1.1rem; + font-size: 0.88rem; + color: var(--muted); } -.path80-panel { - width: 100%; - max-width: 680px; - padding: 1.15rem 1.2rem; - margin: auto; - max-height: min(92vh, 820px); - overflow-y: auto; +.voice-overall-feedback { + grid-column: 1 / -1; + margin: 0.5rem 0 0; + padding: 0.65rem 0.85rem; + border-radius: 8px; + background: rgba(0, 0, 0, 0.2); + font-size: 0.9rem; + line-height: 1.45; } -.path80-header { - display: flex; - justify-content: space-between; - align-items: flex-start; - gap: 1rem; - margin-bottom: 0.85rem; -} +@media (max-width: 820px) { + .battle-layout { + grid-template-columns: 1fr; + } -.path80-title { - margin: 0; - font-size: 1.25rem; -} + .chat-input-row { + grid-template-columns: 1fr; + } -.path80-subtitle { - margin: 0.2rem 0 0; - color: #7dd3fc; - font-size: 0.95rem; - font-weight: 600; - letter-spacing: 0.04em; - text-transform: uppercase; -} + .path80-score-bar { + flex-direction: column; + align-items: flex-start; + gap: 0.5rem; + } -.path80-score-bar { - display: flex; - align-items: center; - gap: 1rem; - flex-wrap: wrap; - background: rgba(125, 211, 252, 0.07); - border: 1px solid rgba(125, 211, 252, 0.25); - border-radius: 12px; - padding: 0.75rem 1rem; - margin-bottom: 0.85rem; - position: relative; -} + .path80-arrow { + transform: rotate(90deg); + } -.path80-score-item { - display: flex; - flex-direction: column; - align-items: center; - gap: 0.2rem; + .voice-mic-btn { + width: 72px; + height: 72px; + } } -.path80-score-label { - font-size: 0.75rem; - color: var(--muted); - text-transform: uppercase; - letter-spacing: 0.05em; +/* ---- Phase 9.1: Deal readiness prompt ---- */ +.deal-readiness-prompt { + margin: 0.75rem 0; + padding: 0.85rem 1rem; + border: 1px solid rgba(244, 211, 94, 0.45); + border-radius: 12px; + background: rgba(244, 211, 94, 0.08); } -.path80-score-num { - font-size: 1.75rem; +.deal-readiness-prompt[hidden] { + display: none; +} + +.deal-readiness-prompt p { + margin: 0 0 0.6rem; color: var(--gold); - line-height: 1; + font-size: 0.9rem; } -.path80-sections-compact { - display: grid; - grid-template-columns: 1fr 1fr; +.deal-readiness-actions { + display: flex; gap: 0.6rem; + flex-wrap: wrap; } -.path80-card-compact { - padding: 0.65rem 0.75rem; +.scorecard-meta { + margin: 0.75rem 0 0; + font-size: 0.75rem; + color: rgba(226, 232, 240, 0.6); } -.path80-card-compact .path80-card-title { - font-size: 0.82rem; - margin-bottom: 0.35rem; +.scorecard-meta[hidden] { + display: none; } -.path80-card-compact .path80-card-body { - font-size: 0.82rem; - line-height: 1.4; - margin: 0; +/* ---- Phase 9.1: View Negotiation Conversation modal ---- */ +.negotiation-overlay { + position: fixed; + inset: 0; + background: rgba(0, 0, 0, 0.72); + z-index: 55; + overflow-y: auto; + display: flex; + align-items: flex-start; + justify-content: center; + padding: 2rem 1rem; } -.path80-card-retry-compact { - grid-column: 1 / -1; - padding: 0.75rem 0.85rem; +.negotiation-overlay[hidden] { + display: none; } -.path80-retry-grid { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 0.65rem; - margin-top: 0.45rem; +.negotiation-panel { + width: 100%; + max-width: 720px; + padding: 1.5rem; + margin: auto; } -.path80-sample-details { - margin-top: 0.55rem; - font-size: 0.82rem; +.negotiation-header { + display: flex; + justify-content: space-between; + align-items: center; + gap: 1rem; + margin-bottom: 1rem; } -.path80-sample-details summary { - cursor: pointer; - color: var(--accent-cyan); - font-weight: 600; - font-size: 0.78rem; +.negotiation-header h2 { + margin: 0; + color: var(--gold); } -.path80-sample-details .path80-quote { - margin-top: 0.45rem; +.negotiation-transcript { + max-height: 60vh; + overflow-y: auto; + display: flex; + flex-direction: column; + gap: 0.75rem; + padding-right: 0.4rem; } -.path80-why-hurt { - margin-top: 0.45rem; - font-size: 0.78rem; +.negotiation-turn { + padding: 0.7rem 0.9rem; + border-radius: 10px; + border: 1px solid rgba(148, 163, 184, 0.16); + background: rgba(15, 19, 33, 0.6); } -.path80-score-green { - color: #4ade80; +.negotiation-turn.negotiation-founder { + border-left: 3px solid var(--gold); } -.path80-arrow { - font-size: 1.5rem; - color: var(--muted); +.negotiation-turn.negotiation-judge { + border-left: 3px solid rgba(96, 165, 250, 0.7); } -.path80-estimate-reason { - width: 100%; - margin: 0.5rem 0 0; - font-size: 0.88rem; - color: var(--muted); - font-style: italic; +.negotiation-turn-head { + display: flex; + justify-content: space-between; + align-items: center; + gap: 0.5rem; + margin-bottom: 0.35rem; } -.path80-sections { - display: grid; - gap: 1rem; +.negotiation-speaker { + font-size: 0.78rem; + font-weight: 600; + color: rgba(226, 232, 240, 0.85); } -.path80-card { - padding: 1.1rem 1.25rem; - border-radius: 14px; - background: rgba(0, 0, 0, 0.28); - border: 1px solid rgba(255, 255, 255, 0.07); +.negotiation-badges { + display: flex; + gap: 0.35rem; + flex-wrap: wrap; } -.path80-card-alert { - border-color: rgba(230, 57, 70, 0.3); - background: rgba(230, 57, 70, 0.06); +.neg-badge { + font-size: 0.65rem; + padding: 0.1rem 0.45rem; + border-radius: 999px; + background: rgba(148, 163, 184, 0.18); + color: rgba(226, 232, 240, 0.85); } -.path80-card-retry { - border-color: rgba(125, 211, 252, 0.25); - background: rgba(125, 211, 252, 0.04); +.neg-tag { + background: rgba(96, 165, 250, 0.22); } -.path80-card-title { - margin: 0 0 0.65rem; - font-size: 1rem; +.neg-voice { + background: rgba(244, 211, 94, 0.22); color: var(--gold); } -.path80-card-alert .path80-card-title { - color: #fb7185; -} - -.path80-card-retry .path80-card-title { - color: #7dd3fc; -} +.neg-q-strong { background: rgba(74, 222, 128, 0.22); color: #4ade80; } +.neg-q-partial { background: rgba(244, 211, 94, 0.2); color: var(--gold); } +.neg-q-weak, +.neg-q-non_answer { background: rgba(248, 113, 113, 0.2); color: #f87171; } -.path80-card-body { +.negotiation-message { margin: 0; - line-height: 1.55; - font-size: 0.95rem; + font-size: 0.88rem; + line-height: 1.45; + color: rgba(226, 232, 240, 0.92); + white-space: pre-wrap; } -.path80-muted { - color: var(--muted); +.negotiation-empty { + color: rgba(226, 232, 240, 0.6); + text-align: center; + padding: 1.5rem; } -.path80-retry-meta { +.negotiation-footer { + margin-top: 1rem; display: flex; - gap: 0.6rem; - align-items: center; - margin-bottom: 0.85rem; - flex-wrap: wrap; + justify-content: flex-end; } -.path80-dim-badge { - font-size: 0.78rem; - font-weight: 700; - background: rgba(125, 211, 252, 0.15); - color: #7dd3fc; - border: 1px solid rgba(125, 211, 252, 0.35); - border-radius: 6px; - padding: 0.15rem 0.6rem; - text-transform: capitalize; +/* ---- Minimum-viable-answer hint + after-round micro-coach ---- */ +.answer-hint { + margin: 0 0 0.5rem; + font-size: 0.8rem; + color: rgba(226, 232, 240, 0.78); + display: flex; + align-items: center; + gap: 0.5rem; } -.path80-round-tag { - font-size: 0.78rem; - color: var(--muted); -} +.answer-hint[hidden] { display: none; } -.path80-answer-label { - font-size: 0.78rem; +.answer-hint-tag { + font-size: 0.65rem; font-weight: 700; - color: var(--muted); text-transform: uppercase; - letter-spacing: 0.05em; - margin: 0.85rem 0 0.3rem; + letter-spacing: 0.04em; + padding: 0.1rem 0.45rem; + border-radius: 999px; + background: rgba(96, 165, 250, 0.22); + color: #93c5fd; } -.path80-quote { - margin: 0; - padding: 0.65rem 0.9rem; - border-radius: 8px; - font-size: 0.92rem; - line-height: 1.5; - font-style: italic; +.micro-coach { + margin: 0 0 0.5rem; + font-size: 0.8rem; + color: var(--gold); + padding: 0.4rem 0.65rem; + border-left: 3px solid rgba(244, 211, 94, 0.55); + background: rgba(244, 211, 94, 0.07); + border-radius: 0 8px 8px 0; } -.path80-quote-weak { - background: rgba(230, 57, 70, 0.08); - border-left: 3px solid rgba(230, 57, 70, 0.5); - color: var(--muted); -} +.micro-coach[hidden] { display: none; } -.path80-quote-strong { - background: rgba(74, 222, 128, 0.07); - border-left: 3px solid rgba(74, 222, 128, 0.45); - color: var(--text); -} +/* ================================ + Pass 3.6 — Futuristic Arcade HUD + ================================ */ -.path80-footer { - margin-top: 1.5rem; - display: flex; - flex-wrap: wrap; - gap: 0.65rem; - justify-content: flex-end; +.hud-font { + font-family: "Rajdhani", var(--font-sans, system-ui), sans-serif; + font-weight: 700; + letter-spacing: 0.06em; + text-transform: uppercase; } -.btn-retry-start { - background: linear-gradient(135deg, #0ea5e9, #06b6d4); - color: #041018; - border: none; - font-weight: 700; +.hud-font-sm { + font-family: "Rajdhani", var(--font-sans, system-ui), sans-serif; + font-weight: 600; + letter-spacing: 0.04em; + text-transform: uppercase; + font-size: 0.82rem; } -.btn-retry-start:hover { - filter: brightness(1.08); +.arcade-shell { + position: relative; + isolation: isolate; + gap: 12px; } -.btn-retry-submit { - background: linear-gradient(135deg, #0ea5e9, #06b6d4); - color: #041018; - border: none; - font-weight: 700; - margin-top: 0.75rem; +.arcade-grid-bg { + position: absolute; + inset: 0; + z-index: 0; + pointer-events: none; + background: + linear-gradient(rgba(168, 85, 247, 0.05) 1px, transparent 1px), + linear-gradient(90deg, rgba(34, 211, 238, 0.05) 1px, transparent 1px); + background-size: 48px 48px; + mask-image: radial-gradient(ellipse 85% 70% at 50% 40%, black 20%, transparent 75%); + opacity: 0.65; } -/* Retry weakest question — Phase 8 */ -.retry-overlay { - position: fixed; +.arcade-scanlines { + position: absolute; inset: 0; - z-index: 45; - background: rgba(0, 0, 0, 0.72); - display: flex; - align-items: flex-start; - justify-content: center; - padding: 1.25rem; - overflow-y: auto; + z-index: 0; + pointer-events: none; + background: repeating-linear-gradient( + 0deg, + transparent, + transparent 2px, + rgba(0, 0, 0, 0.12) 2px, + rgba(0, 0, 0, 0.12) 4px + ); + opacity: 0.35; } -.retry-overlay[hidden] { - display: none; +.arcade-shell > *:not(.arcade-grid-bg):not(.arcade-scanlines) { + position: relative; + z-index: 1; } -.retry-panel { - width: min(920px, 100%); - max-height: 92vh; - overflow-y: auto; - padding: 1.25rem 1.35rem 1.5rem; - border: 1px solid rgba(14, 165, 233, 0.35); - box-shadow: 0 12px 48px rgba(14, 165, 233, 0.12); +.arcade-shell > .micro-coach, +.arcade-shell > .answer-hint { + display: none !important; } -.retry-header { +/* ---- Top HUD ---- */ +.arcade-hud { + display: grid; + grid-template-columns: auto auto auto auto 1fr auto auto; + align-items: stretch; + gap: 0; + padding: 0; + border: 1px solid rgba(78, 205, 196, 0.22); + border-radius: 4px; + background: linear-gradient(180deg, rgba(8, 14, 28, 0.95) 0%, rgba(4, 8, 16, 0.98) 100%); + box-shadow: + 0 0 24px rgba(78, 205, 196, 0.08), + inset 0 1px 0 rgba(255, 255, 255, 0.06); + overflow: hidden; +} + +.hud-cell { display: flex; - justify-content: space-between; - gap: 1rem; - margin-bottom: 1rem; + flex-direction: column; + justify-content: center; + gap: 2px; + padding: 8px 14px; + border-right: 1px solid rgba(78, 205, 196, 0.12); + min-width: 0; } -.retry-title { - margin: 0; - font-size: 1.35rem; +.hud-cell:last-child { + border-right: none; } -.retry-subtitle { - margin: 0.25rem 0 0; - color: #67e8f9; - font-size: 0.9rem; +.hud-cell-label { + font-size: 0.58rem; + font-weight: 700; + letter-spacing: 0.14em; + text-transform: uppercase; + color: rgba(255, 255, 255, 0.38); } -.retry-cards { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); - gap: 0.75rem; - margin-bottom: 1rem; +.hud-cell-value { + font-size: 0.88rem; + font-weight: 700; + color: rgba(255, 255, 255, 0.92); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } -.retry-card { - padding: 0.85rem; - border-radius: 10px; - background: rgba(0, 0, 0, 0.25); - border: 1px solid rgba(255, 255, 255, 0.08); +.hud-cell-round .hud-cell-value { + font-size: 1.35rem; + color: var(--gold); + text-shadow: 0 0 16px rgba(244, 211, 94, 0.35); } -.retry-card h3, -.retry-card h4 { - margin: 0 0 0.45rem; - font-size: 0.82rem; - text-transform: uppercase; - letter-spacing: 0.04em; - color: #67e8f9; +.hud-accent-cyan { + color: #7efff0 !important; + text-shadow: 0 0 10px rgba(126, 255, 240, 0.25); } -.retry-card-body { - margin: 0; - font-size: 0.92rem; - line-height: 1.5; +.hud-cell-meter { + min-width: 120px; } -.retry-card-weak { - border-color: rgba(248, 113, 113, 0.35); +.hud-cell-combo { + min-width: 100px; } -.retry-card-strong { - border-color: rgba(74, 222, 128, 0.35); +.hud-cell-actions { + flex-direction: row; + align-items: center; + gap: 8px; + padding: 8px 12px; } -.retry-card-tip { - border-color: rgba(244, 211, 94, 0.3); +.arcade-meter { + height: 8px; + border-radius: 2px; + background: rgba(0, 0, 0, 0.5); + border: 1px solid rgba(78, 205, 196, 0.2); + overflow: hidden; } -.retry-quote { - margin: 0; - padding: 0.55rem 0.7rem; - border-left: 3px solid rgba(248, 113, 113, 0.45); - background: rgba(248, 113, 113, 0.06); - font-size: 0.9rem; +.arcade-meter-fill { + display: block; + height: 100%; + width: 72%; + border-radius: 1px; + transition: width 0.45s ease; } -.retry-quote-strong { - border-left-color: rgba(74, 222, 128, 0.45); - background: rgba(74, 222, 128, 0.06); +.confidence-fill { + background: linear-gradient(90deg, #22c55e, #4ade80); + box-shadow: 0 0 12px rgba(74, 222, 128, 0.45); } -.retry-answer-area { - margin-top: 0.5rem; - padding-top: 0.75rem; - border-top: 1px solid rgba(14, 165, 233, 0.2); +.confidence-fill.confidence-mid { + background: linear-gradient(90deg, #eab308, #facc15); + box-shadow: 0 0 12px rgba(250, 204, 21, 0.35); } -.retry-input-label { - display: block; - font-size: 0.82rem; - color: var(--muted); - margin-bottom: 0.35rem; +.confidence-fill.confidence-low { + background: linear-gradient(90deg, #ef4444, #f97316); + box-shadow: 0 0 12px rgba(249, 115, 22, 0.35); } -.retry-input-row { +.combo-meter { display: flex; + gap: 4px; align-items: center; - gap: 0.5rem; - margin-bottom: 0.5rem; } -#retry-answer-input { - width: 100%; - resize: vertical; - min-height: 4.5rem; +.combo-pip { + width: 14px; + height: 14px; + border: 1px solid rgba(244, 211, 94, 0.25); + background: rgba(0, 0, 0, 0.4); + border-radius: 2px; + transition: background 0.25s, box-shadow 0.25s, border-color 0.25s; } -.retry-voice-preview { - margin-top: 0.5rem; +.combo-pip-lit { + background: linear-gradient(180deg, #f4d35e, #b8860b); + border-color: rgba(244, 211, 94, 0.7); + box-shadow: 0 0 10px rgba(244, 211, 94, 0.45); } -.retry-vs-grid, -.retry-feedback-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); - gap: 0.75rem; - margin-bottom: 0.85rem; +.btn-arcade-end { + font-family: "Rajdhani", sans-serif; + font-weight: 700; + letter-spacing: 0.08em; + text-transform: uppercase; + font-size: 0.78rem; + padding: 6px 14px; + border: 1px solid rgba(230, 57, 70, 0.45); + background: rgba(230, 57, 70, 0.12); + color: #fca5a5; + border-radius: 3px; + cursor: pointer; + transition: background 0.15s, box-shadow 0.15s; } -.retry-estimate-bar { - display: flex; - flex-wrap: wrap; - gap: 0.65rem; - align-items: center; - margin: 0.75rem 0; - padding: 0.75rem; - border-radius: 10px; - background: rgba(14, 165, 233, 0.08); - border: 1px solid rgba(14, 165, 233, 0.25); +.btn-arcade-end:hover { + background: rgba(230, 57, 70, 0.22); + box-shadow: 0 0 14px rgba(230, 57, 70, 0.2); +} + +/* ---- Progress strip ---- */ +.arcade-progress { + padding: 8px 14px; + border: 1px solid rgba(255, 255, 255, 0.06); + border-radius: 4px; + background: rgba(0, 0, 0, 0.25); } -.retry-dim-estimate, -.retry-overall-lift { - font-size: 0.9rem; - font-weight: 600; +.arcade-progress .progress-strip-attacks { + gap: 8px; } -.retry-overall-lift { - color: var(--gold); +/* ---- Duel frame ---- */ +.arcade-duel-frame { + flex: 1 1 auto; + display: flex; + flex-direction: column; + gap: 12px; + min-height: 0; + width: 100%; + padding: 14px 18px 12px; + border: 1px solid rgba(78, 205, 196, 0.12); + border-radius: 6px; + background: + radial-gradient(ellipse 50% 80% at 0% 50%, rgba(168, 85, 247, 0.1) 0%, transparent 55%), + radial-gradient(ellipse 50% 80% at 100% 50%, rgba(34, 211, 238, 0.1) 0%, transparent 55%), + rgba(0, 0, 0, 0.35); + box-shadow: + inset 0 0 60px rgba(0, 0, 0, 0.4), + 0 0 40px rgba(124, 58, 237, 0.06); } -.retry-verdict-badge { - padding: 0.25rem 0.65rem; - border-radius: 999px; - font-size: 0.78rem; - font-weight: 700; - text-transform: uppercase; - letter-spacing: 0.04em; +.fighter-row { + display: grid; + grid-template-columns: 1fr auto 1fr; + align-items: stretch; + gap: 12px 20px; } -.verdict-improved { - background: rgba(74, 222, 128, 0.2); - color: #86efac; +.fighter-panel { + display: flex; + flex-direction: column; + align-items: center; + justify-content: flex-start; + gap: 8px; + padding: 14px 18px; + border-radius: 6px; + min-width: 0; + height: 100%; + align-self: stretch; } -.verdict-slightly_improved { - background: rgba(14, 165, 233, 0.2); - color: #67e8f9; +.fighter-founder { + background: rgba(245, 200, 66, 0.03); + border: 1px solid rgba(245, 200, 66, 0.1); + border-top: 1px solid rgba(245, 200, 66, 0.45); + box-shadow: inset 0 0 24px rgba(245, 200, 66, 0.06); } -.verdict-needs_more_work { - background: rgba(248, 113, 113, 0.18); - color: #fca5a5; +.fighter-judge { + background: rgba(0, 230, 200, 0.03); + border: 1px solid rgba(0, 230, 200, 0.12); + border-top: 1px solid rgba(0, 230, 200, 0.45); + box-shadow: inset 0 0 24px rgba(0, 230, 200, 0.06); } -.retry-next-prompt { - font-size: 0.88rem; - color: var(--muted); - margin: 0 0 0.75rem; +.fighter-avatar-wrap { + position: relative; + width: 64px; + height: 70px; } -.retry-result-actions { - display: flex; - flex-wrap: wrap; - gap: 0.6rem; - justify-content: flex-end; +.holo-avatar { + width: 64px; + height: auto; + display: block; + filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.5)); } -/* Phase 9 — Judge Verdict + Deal Arena */ -.judge-verdict-section { - margin-top: 0.5rem; +.fighter-avatar-glow { + position: absolute; + inset: -6px; + border-radius: 50%; + pointer-events: none; } -.judge-verdict-card { - padding: 1rem 1.1rem; - border: 1px solid rgba(244, 211, 94, 0.35); - border-radius: 12px; - background: rgba(0, 0, 0, 0.28); +.founder-glow { + background: radial-gradient(circle, rgba(168, 85, 247, 0.28) 0%, transparent 70%); } -.judge-verdict-head { - display: flex; - flex-wrap: wrap; - gap: 0.5rem; - margin-bottom: 0.75rem; +.judge-glow { + background: radial-gradient(circle, rgba(34, 211, 238, 0.22) 0%, transparent 70%); } -.verdict-persona-badge { - font-size: 0.85rem; - font-weight: 700; - color: var(--gold); +.fighter-label-box { + text-align: center; + line-height: 1.2; } -.verdict-interest-badge { - padding: 0.2rem 0.55rem; - border-radius: 999px; - font-size: 0.72rem; - font-weight: 700; +.fighter-tag { + display: block; + font-size: 9px; + font-weight: 600; + letter-spacing: 3px; text-transform: uppercase; - letter-spacing: 0.04em; + color: rgba(255, 255, 255, 0.2); } -.interest-strong_interest { background: rgba(74, 222, 128, 0.18); color: #86efac; } -.interest-mild_interest { background: rgba(14, 165, 233, 0.18); color: #67e8f9; } -.interest-too_early { background: rgba(251, 191, 36, 0.18); color: #fcd34d; } -.interest-no_interest { background: rgba(248, 113, 113, 0.18); color: #fca5a5; } - -.verdict-reaction { - margin: 0 0 0.85rem; - padding: 0.65rem 0.85rem; - border-left: 3px solid rgba(244, 211, 94, 0.5); - font-style: italic; - line-height: 1.55; +.fighter-name { + display: block; + font-size: 1rem; + font-weight: 700; + color: rgba(255, 255, 255, 0.9); } -.verdict-meta-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); - gap: 0.65rem; - font-size: 0.88rem; - margin-bottom: 0.65rem; +.judge-label-box .fighter-name { + color: #7efff0; } -.verdict-meta-grid span { - display: block; - color: var(--muted); - font-size: 0.75rem; - margin-bottom: 0.15rem; +.signal-stats { + list-style: none; + margin: 4px 0 0; + padding: 0; + width: 100%; + max-width: 220px; + flex: 1 1 auto; } -.verdict-opening-offer { - font-size: 0.88rem; - color: #67e8f9; - margin: 0 0 0.75rem; +.signal-stats li { + display: flex; + justify-content: space-between; + gap: 8px; + font-size: 11px; + letter-spacing: 0.04em; + text-transform: uppercase; + padding: 4px 0; + border-bottom: 1px solid rgba(255, 255, 255, 0.05); } -.verdict-actions { - display: flex; - flex-wrap: wrap; - gap: 0.55rem; - margin-top: 0.5rem; +.signal-stats li span { + color: rgba(255, 255, 255, 0.38); } -.btn-deal-continue { - background: linear-gradient(135deg, #0ea5e9, #06b6d4); - color: #041018; - border: none; +.signal-stats li strong { + color: #7efff0; font-weight: 700; - box-shadow: 0 0 18px rgba(14, 165, 233, 0.25); } -.btn-deal-send { - background: linear-gradient(135deg, #0ea5e9, #06b6d4); - color: #041018; - border: none; - font-weight: 700; +.founder-signals li strong { + color: #c084fc; } -.deal-meta .deal-context-item strong { - font-size: 0.82rem; - line-height: 1.35; +/* ---- Duel node ---- */ +.duel-node { + position: relative; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 2px; + padding: 10px 14px; + min-width: 72px; + align-self: stretch; } -.deal-chat { - border: 1px solid rgba(14, 165, 233, 0.2); +.duel-node-badge { + padding: 4px 10px; + border: 1px solid rgba(244, 211, 94, 0.45); + background: rgba(244, 211, 94, 0.08); + color: var(--gold); + font-size: 1.1rem; + border-radius: 3px; + box-shadow: 0 0 16px rgba(244, 211, 94, 0.15); } -.combined-scores { - display: flex; - flex-wrap: wrap; - gap: 1rem; - align-items: center; +.duel-node-vs { + font-size: 1.6rem; + color: #f97316; + text-shadow: 0 0 20px rgba(249, 115, 22, 0.45); + line-height: 1; + margin: 2px 0; } -.combined-score-item { - text-align: center; +.duel-node-pressure { + font-size: 0.58rem; + font-weight: 600; + letter-spacing: 0.08em; + text-transform: uppercase; + color: rgba(255, 255, 255, 0.45); } -.combined-score-item span { - display: block; - font-size: 0.75rem; - color: var(--muted); +.duel-node-ring { + position: absolute; + inset: -4px; + border-radius: 8px; + border: 1px solid rgba(78, 205, 196, 0.2); + pointer-events: none; + animation: duel-node-pulse 3s ease-in-out infinite; } -.combined-score-item strong { - font-size: 1.6rem; - color: var(--gold); +.duel-node-ring.pressure-core-focused { + border-color: rgba(244, 211, 94, 0.35); + box-shadow: 0 0 20px rgba(244, 211, 94, 0.1); } -.combined-highlight strong { - color: #67e8f9; +.duel-node-ring.pressure-core-high { + border-color: rgba(249, 115, 22, 0.4); + box-shadow: 0 0 24px rgba(249, 115, 22, 0.12); } -.combined-profile { - font-size: 1.05rem; - font-weight: 600; - margin: 0.75rem 0 0.35rem; +.duel-node-ring.pressure-core-extreme { + border-color: rgba(230, 57, 70, 0.45); + box-shadow: 0 0 28px rgba(230, 57, 70, 0.15); + animation-duration: 1.5s; } -.combined-summary, -.combined-next-action { - color: var(--muted); - line-height: 1.5; +@keyframes duel-node-pulse { + 0%, 100% { opacity: 0.5; } + 50% { opacity: 1; } } -.deal-outcome-row { - display: flex; - align-items: center; - gap: 0.65rem; - margin-bottom: 0.75rem; +/* ---- Attack card ---- */ +.attack-card-arena { + position: relative; + margin: 0; + width: 100%; + padding: 0; + border: 1px solid rgba(0, 230, 200, 0.12); + border-top: 1px solid rgba(0, 230, 200, 0.45); + border-radius: 6px; + background: rgba(0, 230, 200, 0.03); + box-shadow: + 0 0 40px rgba(78, 205, 196, 0.12), + inset 0 0 30px rgba(78, 205, 196, 0.04); + overflow: hidden; } -.deal-outcome-badge { - padding: 0.25rem 0.65rem; - border-radius: 999px; - font-size: 0.78rem; - font-weight: 700; - text-transform: uppercase; - background: rgba(14, 165, 233, 0.15); - color: #67e8f9; +.attack-card-banner { + padding: 6px 14px; + text-align: center; + font-size: 0.72rem; + letter-spacing: 0.2em; + color: rgba(126, 255, 240, 0.85); + background: rgba(78, 205, 196, 0.08); + border-bottom: 1px solid rgba(78, 205, 196, 0.2); } -.outcome-strong_win { background: rgba(74, 222, 128, 0.18); color: #86efac; } -.outcome-weak_concession { background: rgba(248, 113, 113, 0.18); color: #fca5a5; } +.attack-card-inner { + position: relative; + z-index: 1; + padding: 24px 32px 28px; + text-align: left; +} -/* Voice mode — Phase 7 */ -.start-method-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); - gap: 0.85rem; - margin: 1rem 0 1.25rem; +.attack-card-tag { + display: inline-block; + margin-bottom: 12px; } -.start-method-card { +.attack-card-question { + margin: 0; + padding: 0; + border: none; + font-size: clamp(18px, 1.6vw, 22px); + font-weight: 600; + line-height: 1.55; + color: rgba(255, 255, 255, 0.96); + quotes: none; + text-wrap: pretty; + max-width: none; text-align: left; - padding: 1.1rem; - border-radius: 12px; - border: 1px solid rgba(255, 255, 255, 0.08); - background: rgba(0, 0, 0, 0.2); - color: inherit; - cursor: pointer; - transition: border-color 0.2s, box-shadow 0.2s; } -.start-method-card.selected { - border-color: rgba(125, 211, 252, 0.45); - box-shadow: 0 0 20px rgba(125, 211, 252, 0.12); +.attack-card-glow { + position: absolute; + inset: 0; + background: radial-gradient(ellipse 70% 50% at 50% 30%, rgba(78, 205, 196, 0.1) 0%, transparent 65%); + pointer-events: none; + animation: judge-glow-breathe 3s ease-in-out infinite; } -.start-method-card h3 { - margin: 0.35rem 0 0.25rem; - font-size: 1rem; +.attack-card-arena .judge-card-scan { + position: absolute; + inset: 0; + background: linear-gradient(180deg, transparent 0%, rgba(78, 205, 196, 0.06) 50%, transparent 100%); + background-size: 100% 200%; + animation: judge-scan-sweep 4s linear infinite; + pointer-events: none; + z-index: 2; } -.start-method-card p { - margin: 0; - color: var(--muted); - font-size: 0.85rem; - line-height: 1.4; +@keyframes judge-scan-sweep { + 0% { background-position: 0 -100%; } + 100% { background-position: 0 200%; } } -.start-method-icon { - font-size: 1.4rem; +.attack-card-arena.judge-attack-enter { + animation: attack-card-enter 0.45s ease-out; } -.voice-panel { - max-width: 640px; - margin: 0 auto; +@keyframes attack-card-enter { + from { opacity: 0; transform: translateY(8px) scale(0.98); } + to { opacity: 1; transform: none; } } -.voice-guidance { - padding: 0.85rem 1rem; - border-radius: 10px; - margin-bottom: 1.25rem; - border-left: 3px solid #7dd3fc; - font-size: 0.9rem; - line-height: 1.5; +/* ---- Battle log ---- */ +.arcade-log-bar { + padding: 8px 14px; + border: 1px solid rgba(255, 255, 255, 0.06); + border-radius: 4px; + background: rgba(0, 0, 0, 0.3); } -.voice-hint { - color: var(--muted); - margin: 0.5rem 0 0; - font-size: 0.82rem; +/* ---- Response dock ---- */ +.arcade-dock { + padding: 0; + border: 1px solid rgba(78, 205, 196, 0.15); + border-radius: 6px; + background: linear-gradient(180deg, rgba(12, 16, 28, 0.98) 0%, rgba(6, 8, 14, 0.99) 100%); + box-shadow: + 0 -8px 32px rgba(0, 0, 0, 0.35), + inset 0 1px 0 rgba(255, 255, 255, 0.04); + overflow: hidden; } -.voice-recorder { +.unified-dock .dock-unified-header { display: flex; - flex-direction: column; + flex-wrap: wrap; align-items: center; - gap: 0.65rem; - padding: 1.5rem 0; + justify-content: space-between; + gap: 10px 16px; + padding: 12px 18px; + border-bottom: 1px solid rgba(255, 255, 255, 0.08); + background: rgba(0, 0, 0, 0.3); } -.voice-mic-btn { - position: relative; - width: 88px; - height: 88px; - border-radius: 50%; - border: 2px solid rgba(125, 211, 252, 0.5); - background: radial-gradient(circle at 30% 30%, rgba(125, 211, 252, 0.25), rgba(6, 8, 15, 0.9)); - color: #fff; +.dock-header-main { + display: flex; + flex-wrap: wrap; + align-items: baseline; + gap: 8px 16px; + flex: 1 1 auto; + min-width: 0; +} + +.btn-arcade-log-inline { + font-family: "Rajdhani", sans-serif; + font-weight: 600; + letter-spacing: 0.08em; + text-transform: uppercase; + font-size: 0.72rem; + padding: 6px 12px; + border: 1px solid rgba(255, 255, 255, 0.12); + background: rgba(255, 255, 255, 0.04); + color: rgba(255, 255, 255, 0.55); + border-radius: 4px; cursor: pointer; - display: grid; - place-items: center; - box-shadow: 0 0 24px rgba(125, 211, 252, 0.2); - transition: transform 0.15s, box-shadow 0.2s; + transition: border-color 0.15s, color 0.15s; + flex-shrink: 0; + white-space: nowrap; } -.voice-mic-btn-sm { - width: 48px; - height: 48px; - font-size: 0.9rem; +.btn-arcade-log-inline:hover { + border-color: rgba(244, 211, 94, 0.35); + color: var(--gold); } -.voice-mic-btn:hover { - transform: scale(1.04); - box-shadow: 0 0 32px rgba(125, 211, 252, 0.35); +.unified-dock .response-dock-form, +.unified-dock .voice-turn-preview { + padding: 12px 16px 16px; } -.voice-mic-btn.recording { - border-color: #f87171; - box-shadow: 0 0 28px rgba(248, 113, 113, 0.45); - animation: voice-pulse 1.2s ease-in-out infinite; +.arcade-dock .response-dock-label { + margin: 0; + font-size: 11px; + font-weight: 700; + letter-spacing: 2.5px; + text-transform: uppercase; + color: rgba(245, 200, 66, 0.9); + text-shadow: 0 0 12px rgba(245, 200, 66, 0.15); } -.voice-mic-btn .mic-ring { - position: absolute; - inset: -6px; - border-radius: 50%; - border: 2px solid transparent; +.unified-dock .dock-assist-hint { + margin: 0; + font-size: 13px; + font-weight: 500; + line-height: 1.45; + color: rgba(255, 255, 255, 0.78); + font-style: normal; } -.voice-mic-btn.recording .mic-ring { - border-color: rgba(248, 113, 113, 0.35); - animation: voice-ring 1.2s ease-out infinite; +.arcade-dock-form textarea, +.unified-dock #user-input { + width: 100%; + min-height: 120px; + max-height: 200px; + padding: 14px 16px; + font-size: 15px; + line-height: 1.5; + color: rgba(255, 255, 255, 0.85); + caret-color: #f5c842; + background: rgba(255, 255, 255, 0.04); + border: 1px solid rgba(255, 255, 255, 0.08); + border-radius: 6px; + resize: vertical; + transition: border-color 0.15s, box-shadow 0.15s, background 0.15s; } -@keyframes voice-pulse { - 0%, 100% { transform: scale(1); } - 50% { transform: scale(1.06); } +.arcade-dock-form textarea:focus, +.unified-dock #user-input:focus { + outline: none; + background: rgba(255, 255, 255, 0.06); + border-color: rgba(34, 211, 238, 0.35); + box-shadow: 0 0 20px rgba(34, 211, 238, 0.12); } -@keyframes voice-ring { - 0% { transform: scale(1); opacity: 0.8; } - 100% { transform: scale(1.35); opacity: 0; } +.arcade-dock-form textarea::placeholder, +.unified-dock #user-input::placeholder { + color: rgba(255, 255, 255, 0.28); + font-style: italic; +} + +.arcade-action-row { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: space-between; + gap: 10px; + margin-top: 10px; } -.voice-timer { - font-size: 1.25rem; +.btn-arcade-voice { + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + gap: 8px; + font-family: "Rajdhani", sans-serif; font-weight: 700; - color: #7dd3fc; - font-variant-numeric: tabular-nums; + letter-spacing: 0.08em; + text-transform: uppercase; + font-size: 0.88rem; + padding: 10px 18px; + min-height: 44px; + border: 1px solid rgba(78, 205, 196, 0.45); + background: linear-gradient(180deg, rgba(78, 205, 196, 0.22), rgba(78, 205, 196, 0.08)); + color: #7efff0; + border-radius: 4px; + cursor: pointer; + box-shadow: 0 0 18px rgba(78, 205, 196, 0.15); + transition: box-shadow 0.15s, background 0.15s, border-color 0.15s, transform 0.15s; + flex-shrink: 0; } -.voice-timer-inline { - font-size: 0.85rem; - min-width: 2.5rem; +.btn-arcade-voice:hover { + border-color: rgba(126, 255, 240, 0.65); + background: linear-gradient(180deg, rgba(78, 205, 196, 0.32), rgba(78, 205, 196, 0.14)); + box-shadow: 0 0 24px rgba(78, 205, 196, 0.28); + transform: translateY(-1px); } -.voice-status { - font-size: 0.82rem; - color: #f87171; - min-height: 1.2em; +.btn-arcade-voice.recording { + border-color: rgba(248, 113, 113, 0.65); + background: linear-gradient(180deg, rgba(248, 113, 113, 0.28), rgba(248, 113, 113, 0.1)); + color: #fca5a5; + box-shadow: 0 0 24px rgba(248, 113, 113, 0.35); + animation: voice-pulse 1.2s ease-in-out infinite; } -.voice-transcript-card { - padding: 1rem; - border-radius: 10px; - margin-bottom: 1rem; +.btn-arcade-voice.recording .arcade-voice-ring { + border-color: rgba(248, 113, 113, 0.4); + animation: voice-ring 1.2s ease-out infinite; } -.voice-transcript-text { - margin: 0.5rem 0; - line-height: 1.55; - font-size: 0.92rem; +.arcade-voice-ring { + position: absolute; + inset: -4px; + border-radius: 6px; + border: 2px solid transparent; + pointer-events: none; } -.voice-delivery-note { - margin: 0.35rem 0 0; - font-size: 0.85rem; - color: var(--muted); +.arcade-voice-icon { + width: 20px; + height: 20px; + flex-shrink: 0; + filter: drop-shadow(0 0 6px rgba(126, 255, 240, 0.35)); } -.delivery-chip { - display: inline-block; - margin-top: 0.5rem; - padding: 0.2rem 0.55rem; - border-radius: 999px; - font-size: 0.72rem; - font-weight: 600; - background: rgba(125, 211, 252, 0.12); - border: 1px solid rgba(125, 211, 252, 0.3); - color: #7dd3fc; +.btn-arcade-voice.recording .arcade-voice-icon { + filter: drop-shadow(0 0 6px rgba(248, 113, 113, 0.45)); } -.delivery-chip.confidence-low { - background: rgba(248, 113, 113, 0.12); - border-color: rgba(248, 113, 113, 0.35); - color: #f87171; +.arcade-voice-label { + white-space: nowrap; } -.voice-low-confidence { - padding: 0.6rem 0.85rem; - border-radius: 8px; - background: rgba(248, 113, 113, 0.1); - border: 1px solid rgba(248, 113, 113, 0.3); - color: #fca5a5; +.btn-arcade-send { + font-family: "Rajdhani", sans-serif; + font-weight: 700; + letter-spacing: 0.1em; + text-transform: uppercase; font-size: 0.88rem; - margin-bottom: 0.85rem; + padding: 10px 22px; + border: 1px solid rgba(244, 211, 94, 0.5); + background: linear-gradient(180deg, rgba(244, 211, 94, 0.25), rgba(244, 211, 94, 0.12)); + color: var(--gold); + border-radius: 4px; + cursor: pointer; + transition: box-shadow 0.15s, background 0.15s; } -.voice-confirm-actions { - display: flex; - gap: 0.75rem; - flex-wrap: wrap; - margin-top: 1rem; +.btn-arcade-send:hover:not(:disabled) { + box-shadow: 0 0 20px rgba(244, 211, 94, 0.25); + background: linear-gradient(180deg, rgba(244, 211, 94, 0.35), rgba(244, 211, 94, 0.18)); } -.battle-input-tabs { - display: flex; - align-items: center; - gap: 0.5rem; - flex-wrap: wrap; - margin-bottom: 0.5rem; - padding: 0.35rem 0; +.btn-arcade-send:disabled { + opacity: 0.4; + cursor: not-allowed; } -.input-tab-label { - font-size: 0.8rem; - color: var(--muted); - margin-right: 0.25rem; +.arcade-dock .hint-chips { + display: inline-flex; + flex-wrap: wrap; + gap: 8px; + margin-left: 10px; } -.voice-turn-preview { - margin-bottom: 0.75rem; - padding: 0.85rem; - border-radius: 10px; - border: 1px solid rgba(125, 211, 252, 0.25); - background: rgba(125, 211, 252, 0.05); +.arcade-dock .hint-chip { + font-size: 11px; + font-weight: 700; + letter-spacing: 0.04em; + padding: 7px 14px; + border-radius: 999px; + border: 1px solid rgba(244, 211, 94, 0.35); + background: rgba(244, 211, 94, 0.1); + color: rgba(245, 200, 66, 0.95); + cursor: pointer; + transition: border-color 0.15s, background 0.15s, transform 0.15s; } -.voice-turn-preview h4 { - margin: 0 0 0.5rem; - font-size: 0.85rem; - color: #7dd3fc; +.arcade-dock .hint-chip:hover { + border-color: rgba(244, 211, 94, 0.55); + background: rgba(244, 211, 94, 0.16); + color: #f5c842; + transform: translateY(-1px); } -.voice-turn-preview textarea { - width: 100%; - margin-bottom: 0.5rem; +.voice-timer-inline.hud-font { + font-size: 0.82rem; + color: rgba(255, 255, 255, 0.55); } -.voice-turn-actions { - display: flex; - gap: 0.5rem; - margin-top: 0.5rem; +/* ---- Deal arcade variant ---- */ +.deal-arcade-shell .arcade-grid-bg { + background: + linear-gradient(rgba(74, 222, 128, 0.04) 1px, transparent 1px), + linear-gradient(90deg, rgba(74, 222, 128, 0.04) 1px, transparent 1px); + background-size: 48px 48px; } -.voice-delivery-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); - gap: 0.65rem; +.deal-arcade-shell .arcade-hud, +.deal-arcade-shell .attack-card-arena { + border-color: rgba(74, 222, 128, 0.22); } -.voice-delivery-stat { - padding: 0.65rem 0.75rem; - border-radius: 8px; - background: rgba(125, 211, 252, 0.06); - border: 1px solid rgba(125, 211, 252, 0.15); -} +@media (max-width: 960px) { + .arcade-hud { + grid-template-columns: repeat(3, 1fr); + } -.voice-delivery-stat span { - display: block; - font-size: 0.72rem; - color: var(--muted); - text-transform: uppercase; - letter-spacing: 0.03em; -} + .hud-cell-meter, + .hud-cell-combo { + grid-column: span 1; + } -.voice-delivery-stat strong { - display: block; - margin-top: 0.25rem; - font-size: 0.9rem; -} + .hud-cell-actions { + grid-column: 1 / -1; + justify-content: flex-end; + } -.voice-delivery-notes { - grid-column: 1 / -1; - margin: 0.5rem 0 0; - padding-left: 1.1rem; - font-size: 0.88rem; - color: var(--muted); -} + .fighter-row { + grid-template-columns: 1fr; + gap: 10px; + } -.voice-overall-feedback { - grid-column: 1 / -1; - margin: 0.5rem 0 0; - padding: 0.65rem 0.85rem; - border-radius: 8px; - background: rgba(0, 0, 0, 0.2); - font-size: 0.9rem; - line-height: 1.45; + .duel-node { + order: -1; + flex-direction: row; + gap: 10px; + padding: 8px; + } + + .duel-node-ring { + display: none; + } + + .attack-card-arena { + width: 100%; + } } -@media (max-width: 820px) { - .battle-layout { - grid-template-columns: 1fr; +@media (max-width: 560px) { + .arcade-hud { + grid-template-columns: 1fr 1fr; } - .chat-input-row { - grid-template-columns: 1fr; + .hud-cell-round { + grid-column: 1 / -1; } - .path80-score-bar { - flex-direction: column; - align-items: flex-start; - gap: 0.5rem; + .signal-stats { + max-width: 100%; } - .path80-arrow { - transform: rotate(90deg); + .arcade-dock .hint-chips { + margin-left: 0; + margin-top: 6px; } - .voice-mic-btn { - width: 72px; - height: 72px; + .btn-arcade-voice { + width: 100%; + justify-content: center; } } -/* ---- Phase 9.1: Deal readiness prompt ---- */ -.deal-readiness-prompt { - margin: 0.75rem 0; - padding: 0.85rem 1rem; - border: 1px solid rgba(244, 211, 94, 0.45); - border-radius: 12px; - background: rgba(244, 211, 94, 0.08); -} - -.deal-readiness-prompt[hidden] { - display: none; +@media (prefers-reduced-motion: reduce) { + .duel-node-ring, + .attack-card-glow, + .attack-card-arena .judge-card-scan, + .attack-card-arena.judge-attack-enter { + animation: none !important; + } } -.deal-readiness-prompt p { - margin: 0 0 0.6rem; - color: var(--gold); - font-size: 0.9rem; -} +/* ================================ + PitchFight Unified Design System + ================================ */ -.deal-readiness-actions { - display: flex; - gap: 0.6rem; - flex-wrap: wrap; +.arena-section-label { + margin: 0 0 0.5rem; + font-size: 9px; + font-weight: 600; + letter-spacing: 3.5px; + text-transform: uppercase; + color: rgba(255, 255, 255, 0.2); } -.scorecard-meta { - margin: 0.75rem 0 0; - font-size: 0.75rem; - color: rgba(226, 232, 240, 0.6); +.pf-card { + border: 1px solid rgba(255, 255, 255, 0.07); + border-radius: 10px; + background: rgba(12, 12, 16, 0.85); } -.scorecard-meta[hidden] { - display: none; +.pf-card.is-active, +.persona-card.selected, +.difficulty-card.selected { + border-color: rgba(245, 200, 66, 0.3); + background: rgba(245, 200, 66, 0.04); } -/* ---- Phase 9.1: View Negotiation Conversation modal ---- */ -.negotiation-overlay { - position: fixed; - inset: 0; - background: rgba(0, 0, 0, 0.72); - z-index: 55; - overflow-y: auto; - display: flex; - align-items: flex-start; - justify-content: center; - padding: 2rem 1rem; +#screen-battle.active .battle-arena-wrap, +#screen-deal.active .battle-arena-wrap { + width: 100%; + max-width: 100%; + padding: 8px 0 16px; } -.negotiation-overlay[hidden] { - display: none; +#screen-battle.active .battle-stage-shell, +#screen-deal.active .battle-stage-shell { + width: 100%; + max-width: 100%; + margin: 0; + padding-left: clamp(16px, 2.5vw, 40px); + padding-right: clamp(16px, 2.5vw, 40px); } -.negotiation-panel { +/* Battle arena — attack card is the hero, fighters stay compact */ +#screen-battle .arcade-duel-frame, +#screen-deal .arcade-duel-frame { width: 100%; - max-width: 720px; - padding: 1.5rem; - margin: auto; + max-width: 100%; } -.negotiation-header { - display: flex; - justify-content: space-between; - align-items: center; - gap: 1rem; - margin-bottom: 1rem; +#screen-battle .fighter-row, +#screen-deal .fighter-row { + grid-template-columns: minmax(160px, 1fr) auto minmax(160px, 1fr); + gap: 16px 24px; + flex-shrink: 0; } -.negotiation-header h2 { - margin: 0; - color: var(--gold); +#screen-battle .fighter-panel, +#screen-deal .fighter-panel { + padding: 12px 16px; } -.negotiation-transcript { - max-height: 60vh; - overflow-y: auto; +#screen-battle .attack-card-arena, +#screen-deal .attack-card-arena { + width: 100%; + max-width: 100%; + min-height: 150px; + flex: 1 1 auto; display: flex; flex-direction: column; - gap: 0.75rem; - padding-right: 0.4rem; + justify-content: center; } -.negotiation-turn { - padding: 0.7rem 0.9rem; - border-radius: 10px; - border: 1px solid rgba(148, 163, 184, 0.16); - background: rgba(15, 19, 33, 0.6); +#screen-battle .attack-card-inner, +#screen-deal .attack-card-inner { + padding: 28px 36px 32px; } -.negotiation-turn.negotiation-founder { - border-left: 3px solid var(--gold); +#screen-battle .attack-card-question, +#screen-battle #judge-question-text, +#screen-deal .attack-card-question, +#screen-deal #judge-question-text { + font-size: clamp(18px, 1.75vw, 24px) !important; + line-height: 1.55 !important; + max-width: none !important; + text-align: left !important; } -.negotiation-turn.negotiation-judge { - border-left: 3px solid rgba(96, 165, 250, 0.7); +#screen-battle .arcade-hud, +#screen-battle .arcade-progress, +#screen-battle .arcade-dock, +#screen-deal .arcade-hud, +#screen-deal .arcade-progress, +#screen-deal .arcade-dock { + width: 100%; + max-width: 100%; } -.negotiation-turn-head { - display: flex; - justify-content: space-between; - align-items: center; - gap: 0.5rem; - margin-bottom: 0.35rem; +#screen-battle .judge-question-text, +#screen-deal .judge-question-text { + max-width: none; } -.negotiation-speaker { - font-size: 0.78rem; - font-weight: 600; - color: rgba(226, 232, 240, 0.85); +#screen-scorecard.active, +.sc-page.active { + background: #09090f; } -.negotiation-badges { - display: flex; - gap: 0.35rem; - flex-wrap: wrap; +.app:has(#screen-scorecard.active), +.app.app-scorecard-fullwidth { + max-width: none !important; + width: 100% !important; + padding: 0 !important; } -.neg-badge { - font-size: 0.65rem; - padding: 0.1rem 0.45rem; - border-radius: 999px; - background: rgba(148, 163, 184, 0.18); - color: rgba(226, 232, 240, 0.85); -} +/* ================================ + Scorecard v3 — hero + body grid + ================================ */ -.neg-tag { - background: rgba(96, 165, 250, 0.22); +.sc-shell { + width: 100%; + max-width: none; + margin: 0; + padding: 24px 32px; } -.neg-voice { - background: rgba(244, 211, 94, 0.22); - color: var(--gold); +/* ---- Hero ---- */ +.sc-hero { + padding: 20px 24px; + border-bottom: 1px solid rgba(255, 255, 255, 0.06); + margin: 0 -8px 0; } -.neg-q-strong { background: rgba(74, 222, 128, 0.22); color: #4ade80; } -.neg-q-partial { background: rgba(244, 211, 94, 0.2); color: var(--gold); } -.neg-q-weak, -.neg-q-non_answer { background: rgba(248, 113, 113, 0.2); color: #f87171; } - -.negotiation-message { - margin: 0; - font-size: 0.88rem; - line-height: 1.45; - color: rgba(226, 232, 240, 0.92); - white-space: pre-wrap; +.sc-hero-row { + display: flex; + gap: 20px; + align-items: flex-start; } -.negotiation-empty { - color: rgba(226, 232, 240, 0.6); - text-align: center; - padding: 1.5rem; +.sc-hero-conversation { + margin-left: auto; + flex-shrink: 0; + align-self: center; } -.negotiation-footer { - margin-top: 1rem; - display: flex; - justify-content: flex-end; +.sc-ring-wrap { + flex-shrink: 0; } -/* ---- Minimum-viable-answer hint + after-round micro-coach ---- */ -.answer-hint { - margin: 0 0 0.5rem; - font-size: 0.8rem; - color: rgba(226, 232, 240, 0.78); +.sc-ring { + width: 80px; + height: 80px; + min-width: 80px; + min-height: 80px; + border-radius: 50%; + border: 3px solid #f5c842; + background: rgba(245, 200, 66, 0.05); display: flex; + flex-direction: column; align-items: center; - gap: 0.5rem; + justify-content: center; + box-shadow: none; } -.answer-hint[hidden] { display: none; } +.sc-ring .score-orb-value { + font-size: 28px; + font-weight: 800; + line-height: 1; + color: #f5c842; +} -.answer-hint-tag { - font-size: 0.65rem; - font-weight: 700; +.sc-ring .score-orb-label { + margin-top: 2px; + font-size: 9px; + font-weight: 800; + letter-spacing: 0.1em; text-transform: uppercase; - letter-spacing: 0.04em; - padding: 0.1rem 0.45rem; - border-radius: 999px; - background: rgba(96, 165, 250, 0.22); - color: #93c5fd; + color: rgba(245, 200, 66, 0.85); } -.micro-coach { - margin: 0 0 0.5rem; - font-size: 0.8rem; - color: var(--gold); - padding: 0.4rem 0.65rem; - border-left: 3px solid rgba(244, 211, 94, 0.55); - background: rgba(244, 211, 94, 0.07); - border-radius: 0 8px 8px 0; +.sc-hero-meta { + flex: 1; + min-width: 0; } -.micro-coach[hidden] { display: none; } - -/* ================================ - Pass 3.6 — Futuristic Arcade HUD - ================================ */ - -.hud-font { - font-family: "Rajdhani", var(--font-sans, system-ui), sans-serif; +.sc-hero-kicker { + margin: 0 0 8px; + font-size: 10px; font-weight: 700; - letter-spacing: 0.06em; + letter-spacing: 0.14em; text-transform: uppercase; + color: rgba(255, 255, 255, 0.38); } -.hud-font-sm { - font-family: "Rajdhani", var(--font-sans, system-ui), sans-serif; +.sc-hero-summary { + margin: 0 0 12px; + font-size: 16px; font-weight: 600; + line-height: 1.55; + color: rgba(255, 255, 255, 0.92); + overflow: visible; + word-break: break-word; +} + +.sc-hero-actions { + display: flex; + flex-wrap: wrap; + gap: 8px; + margin-top: 12px; +} + +.sc-btn-conversation { + padding: 14px 22px; + font-size: 14px; + font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; - font-size: 0.82rem; + border-radius: 12px; + border: 2px solid rgba(94, 211, 244, 0.75); + background: rgba(94, 211, 244, 0.12); + color: #5ed3f4; + box-shadow: + 0 0 24px rgba(94, 211, 244, 0.22), + inset 0 0 16px rgba(94, 211, 244, 0.08); + cursor: pointer; + white-space: nowrap; + transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; } -.arcade-shell { - position: relative; - isolation: isolate; - gap: 12px; +.sc-btn-conversation:hover { + border-color: #5ed3f4; + background: rgba(94, 211, 244, 0.2); + box-shadow: + 0 0 32px rgba(94, 211, 244, 0.35), + inset 0 0 20px rgba(94, 211, 244, 0.12); } -.arcade-grid-bg { - position: absolute; - inset: 0; - z-index: 0; - pointer-events: none; - background: - linear-gradient(rgba(168, 85, 247, 0.05) 1px, transparent 1px), - linear-gradient(90deg, rgba(34, 211, 238, 0.05) 1px, transparent 1px); - background-size: 48px 48px; - mask-image: radial-gradient(ellipse 85% 70% at 50% 40%, black 20%, transparent 75%); - opacity: 0.65; +.sc-fallback-warn { + margin: 12px 0 0; + font-size: 12px; + color: #ff9840; +} + +.sc-chips { + display: flex; + flex-wrap: wrap; + gap: 8px; + margin-bottom: 0; +} + +.sc-chip { + font-size: 12px; + font-weight: 600; + padding: 6px 12px; + border-radius: 999px; + border: 1px solid rgba(255, 255, 255, 0.12); +} + +.sc-chip-strong { + color: #00e6c8; + border-color: rgba(0, 230, 200, 0.25); + background: rgba(0, 230, 200, 0.06); +} + +.sc-chip-weak { + color: #ff8888; + border-color: rgba(255, 80, 80, 0.25); + background: rgba(255, 80, 80, 0.06); } -.arcade-scanlines { - position: absolute; - inset: 0; - z-index: 0; - pointer-events: none; - background: repeating-linear-gradient( - 0deg, - transparent, - transparent 2px, - rgba(0, 0, 0, 0.12) 2px, - rgba(0, 0, 0, 0.12) 4px - ); - opacity: 0.35; +.sc-chip-model { + color: rgba(255, 255, 255, 0.45); + border-color: rgba(255, 255, 255, 0.1); + background: rgba(255, 255, 255, 0.04); } -.arcade-shell > *:not(.arcade-grid-bg):not(.arcade-scanlines) { - position: relative; - z-index: 1; +/* ---- Body grid ---- */ +.sc-body-grid { + display: grid; + grid-template-columns: minmax(320px, 380px) 1fr; + min-height: 400px; + width: 100%; } -.arcade-shell > .micro-coach, -.arcade-shell > .answer-hint { - display: none !important; +.sc-left-col { + padding: 18px 20px; + border-right: 1px solid rgba(255, 255, 255, 0.06); + min-width: 0; } -/* ---- Top HUD ---- */ -.arcade-hud { - display: grid; - grid-template-columns: auto auto auto auto 1fr auto auto; - align-items: stretch; - gap: 0; - padding: 0; - border: 1px solid rgba(78, 205, 196, 0.22); - border-radius: 4px; - background: linear-gradient(180deg, rgba(8, 14, 28, 0.95) 0%, rgba(4, 8, 16, 0.98) 100%); - box-shadow: - 0 0 24px rgba(78, 205, 196, 0.08), - inset 0 1px 0 rgba(255, 255, 255, 0.06); - overflow: hidden; +.sc-section-label { + margin: 0 0 14px; + font-size: 10px; + font-weight: 800; + letter-spacing: 0.14em; + text-transform: uppercase; + color: rgba(255, 255, 255, 0.5); } -.hud-cell { +.sc-signals-block { + margin-top: 16px; +} + +.sc-signals-groups { display: flex; flex-direction: column; - justify-content: center; - gap: 2px; - padding: 8px 14px; - border-right: 1px solid rgba(78, 205, 196, 0.12); - min-width: 0; + gap: 14px; } -.hud-cell:last-child { - border-right: none; +.sc-signals-groups:empty { + display: none; } -.hud-cell-label { - font-size: 0.58rem; - font-weight: 700; - letter-spacing: 0.14em; +.sc-signal-group-label { + margin: 0 0 8px; + font-size: 10px; + font-weight: 800; + letter-spacing: 0.12em; text-transform: uppercase; - color: rgba(255, 255, 255, 0.38); + color: rgba(255, 255, 255, 0.45); } -.hud-cell-value { - font-size: 0.88rem; - font-weight: 700; - color: rgba(255, 255, 255, 0.92); - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; +.sc-signal-chips { + display: flex; + flex-wrap: wrap; + gap: 8px; } -.hud-cell-round .hud-cell-value { - font-size: 1.35rem; - color: var(--gold); - text-shadow: 0 0 16px rgba(244, 211, 94, 0.35); +.sc-signal-chip { + font-size: 14px; + font-weight: 700; + padding: 8px 14px; + border-radius: 10px; + background: rgba(255, 255, 255, 0.07); + border: 1px solid rgba(255, 255, 255, 0.16); + color: rgba(255, 255, 255, 0.9); + line-height: 1.2; } -.hud-accent-cyan { - color: #7efff0 !important; - text-shadow: 0 0 10px rgba(126, 255, 240, 0.25); +.sc-signals-empty { + margin: 0; + font-size: 13px; + font-weight: 500; + color: rgba(255, 255, 255, 0.5); } -.hud-cell-meter { - min-width: 120px; +.sc-signals-groups:not(:empty) + .sc-signals-empty { + display: none; } -.hud-cell-combo { - min-width: 100px; +.sc-dim-list { + display: flex; + flex-direction: column; + gap: 10px; } -.hud-cell-actions { - flex-direction: row; - align-items: center; - gap: 8px; - padding: 8px 12px; +.sc-dim-list .dimension-row-scorecard { + display: flex; + flex-direction: column; + gap: 10px; + padding: 12px 14px; + border: 1px solid rgba(255, 255, 255, 0.08); + border-radius: 12px; + background: rgba(255, 255, 255, 0.03); + transition: border-color 0.15s ease, background 0.15s ease; } -.arcade-meter { - height: 8px; - border-radius: 2px; - background: rgba(0, 0, 0, 0.5); - border: 1px solid rgba(78, 205, 196, 0.2); - overflow: hidden; +.sc-dim-list .sc-dim-card:hover { + background: rgba(255, 255, 255, 0.045); + border-color: rgba(255, 255, 255, 0.12); } -.arcade-meter-fill { - display: block; - height: 100%; - width: 72%; - border-radius: 1px; - transition: width 0.45s ease; +.sc-dim-list .sc-dim-weakest { + border-color: rgba(255, 80, 80, 0.35); + background: rgba(255, 80, 80, 0.06); + box-shadow: inset 0 0 0 1px rgba(255, 80, 80, 0.08); } -.confidence-fill { - background: linear-gradient(90deg, #22c55e, #4ade80); - box-shadow: 0 0 12px rgba(74, 222, 128, 0.45); +.sc-dim-list .sc-dim-strongest { + border-color: rgba(0, 230, 200, 0.3); + background: rgba(0, 230, 200, 0.05); + box-shadow: inset 0 0 0 1px rgba(0, 230, 200, 0.08); } -.confidence-fill.confidence-mid { - background: linear-gradient(90deg, #eab308, #facc15); - box-shadow: 0 0 12px rgba(250, 204, 21, 0.35); +.sc-dim-head { + display: flex; + align-items: flex-start; + justify-content: space-between; + gap: 10px; } -.confidence-fill.confidence-low { - background: linear-gradient(90deg, #ef4444, #f97316); - box-shadow: 0 0 12px rgba(249, 115, 22, 0.35); +.sc-dim-title { + display: flex; + flex-direction: column; + gap: 4px; + min-width: 0; } -.combo-meter { +.sc-dim-meta { display: flex; - gap: 4px; - align-items: center; + flex-direction: column; + align-items: flex-end; + gap: 6px; + flex-shrink: 0; } -.combo-pip { - width: 14px; - height: 14px; - border: 1px solid rgba(244, 211, 94, 0.25); - background: rgba(0, 0, 0, 0.4); - border-radius: 2px; - transition: background 0.25s, box-shadow 0.25s, border-color 0.25s; +.sc-dim-flag { + display: inline-block; + width: fit-content; + font-size: 9px; + font-weight: 800; + letter-spacing: 0.08em; + text-transform: uppercase; + padding: 2px 7px; + border-radius: 4px; } -.combo-pip-lit { - background: linear-gradient(180deg, #f4d35e, #b8860b); - border-color: rgba(244, 211, 94, 0.7); - box-shadow: 0 0 10px rgba(244, 211, 94, 0.45); +.sc-dim-flag-weak { + color: #ff7070; + background: rgba(255, 80, 80, 0.14); } -.btn-arcade-end { - font-family: "Rajdhani", sans-serif; - font-weight: 700; - letter-spacing: 0.08em; - text-transform: uppercase; - font-size: 0.78rem; - padding: 6px 14px; - border: 1px solid rgba(230, 57, 70, 0.45); - background: rgba(230, 57, 70, 0.12); - color: #fca5a5; - border-radius: 3px; - cursor: pointer; - transition: background 0.15s, box-shadow 0.15s; +.sc-dim-flag-strong { + color: #00e6c8; + background: rgba(0, 230, 200, 0.12); } -.btn-arcade-end:hover { - background: rgba(230, 57, 70, 0.22); - box-shadow: 0 0 14px rgba(230, 57, 70, 0.2); +.sc-dim-list .dimension-name { + font-size: 14px; + font-weight: 700; + color: rgba(255, 255, 255, 0.94); + text-transform: capitalize; + line-height: 1.25; } -/* ---- Progress strip ---- */ -.arcade-progress { - padding: 8px 14px; - border: 1px solid rgba(255, 255, 255, 0.06); +.sc-dim-list .dimension-bar { + width: 100%; + height: 8px; border-radius: 4px; - background: rgba(0, 0, 0, 0.25); + background: rgba(255, 255, 255, 0.08); + overflow: hidden; } -.arcade-progress .progress-strip-attacks { - gap: 8px; +.sc-dim-list .dimension-bar-fill { + height: 8px; + border-radius: 4px; + transition: width 0.5s ease; } -/* ---- Duel frame ---- */ -.arcade-duel-frame { - flex: 1 1 auto; - display: flex; - flex-direction: column; - gap: 14px; - min-height: 0; - padding: 16px; - border: 1px solid rgba(78, 205, 196, 0.12); - border-radius: 6px; - background: - radial-gradient(ellipse 50% 80% at 0% 50%, rgba(168, 85, 247, 0.1) 0%, transparent 55%), - radial-gradient(ellipse 50% 80% at 100% 50%, rgba(34, 211, 238, 0.1) 0%, transparent 55%), - rgba(0, 0, 0, 0.35); - box-shadow: - inset 0 0 60px rgba(0, 0, 0, 0.4), - 0 0 40px rgba(124, 58, 237, 0.06); +.sc-dim-list .dim-fill-strong, +.sc-dim-list .dim-fill-excellent { + background: #00e6c8; } -.fighter-row { - display: grid; - grid-template-columns: 1fr auto 1fr; - align-items: stretch; - gap: 12px 20px; +.sc-dim-list .dim-fill-solid { + background: #f5c842; } -.fighter-panel { - display: flex; - flex-direction: column; - align-items: center; - justify-content: flex-start; - gap: 8px; - padding: 14px 18px; - border-radius: 6px; - min-width: 0; - height: 100%; - align-self: stretch; +.sc-dim-list .dim-fill-developing { + background: #ff9840; } -.fighter-founder { - background: linear-gradient(160deg, rgba(168, 85, 247, 0.12), rgba(124, 58, 237, 0.04) 70%); - border: 1px solid rgba(168, 85, 247, 0.28); - box-shadow: inset 0 0 24px rgba(168, 85, 247, 0.08); +.sc-dim-list .dim-fill-not-addressed, +.sc-dim-list .dim-fill-weak { + background: #ff5050; } -.fighter-judge { - background: linear-gradient(200deg, rgba(34, 211, 238, 0.12), rgba(78, 205, 196, 0.04) 70%); - border: 1px solid rgba(34, 211, 238, 0.28); - box-shadow: inset 0 0 24px rgba(34, 211, 238, 0.08); +.sc-dim-list .dimension-score { + font-size: 22px; + font-weight: 800; + font-variant-numeric: tabular-nums; + line-height: 1; + color: rgba(255, 255, 255, 0.98); } -.fighter-avatar-wrap { - position: relative; - width: 64px; - height: 70px; +.sc-dim-list .dimension-badge { + text-align: center; + font-size: 10px; + font-weight: 800; + letter-spacing: 0.06em; + text-transform: uppercase; + padding: 4px 8px; + border-radius: 6px; + margin: 0; + line-height: 1.2; + white-space: nowrap; } -.holo-avatar { - width: 64px; - height: auto; - display: block; - filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.5)); +.sc-dim-list .sc-dim-card:has(.score-label-strong) .dimension-score, +.sc-dim-list .sc-dim-card:has(.score-label-excellent) .dimension-score { + color: #00e6c8; } -.fighter-avatar-glow { - position: absolute; - inset: -6px; - border-radius: 50%; - pointer-events: none; +.sc-dim-list .sc-dim-card:has(.score-label-solid) .dimension-score { + color: #f5c842; } - -.founder-glow { - background: radial-gradient(circle, rgba(168, 85, 247, 0.28) 0%, transparent 70%); + +.sc-dim-list .sc-dim-card:has(.score-label-developing) .dimension-score { + color: #ff9840; } -.judge-glow { - background: radial-gradient(circle, rgba(34, 211, 238, 0.22) 0%, transparent 70%); +.sc-dim-list .sc-dim-card:has(.score-label-not-addressed) .dimension-score, +.sc-dim-list .sc-dim-card:has(.score-label-weak) .dimension-score { + color: #ff7070; } -.fighter-label-box { - text-align: center; - line-height: 1.2; +.sc-dim-list .score-label-strong, +.sc-dim-list .score-label-excellent { + background: rgba(0, 230, 200, 0.1); + color: #00e6c8; } -.fighter-tag { - display: block; - font-size: 0.62rem; - font-weight: 700; - letter-spacing: 0.12em; - text-transform: uppercase; - color: rgba(255, 255, 255, 0.4); +.sc-dim-list .score-label-solid { + background: rgba(245, 200, 66, 0.1); + color: #f5c842; } -.fighter-name { - display: block; - font-size: 0.92rem; - font-weight: 700; - color: rgba(255, 255, 255, 0.9); +.sc-dim-list .score-label-developing { + background: rgba(255, 152, 64, 0.1); + color: #ff9840; } -.judge-label-box .fighter-name { - color: #7efff0; +.sc-dim-list .score-label-not-addressed, +.sc-dim-list .score-label-weak { + background: rgba(255, 80, 80, 0.1); + color: #ff5050; } -.signal-stats { - list-style: none; - margin: 4px 0 0; - padding: 0; - width: 100%; - max-width: 220px; - flex: 1 1 auto; +.sc-dim-list .dimension-reason, +.sc-dim-list .quote-chip { + display: none !important; } -.signal-stats li { +.sc-right-col { + min-width: 0; display: flex; - justify-content: space-between; - gap: 8px; - font-size: 0.68rem; - letter-spacing: 0.04em; - text-transform: uppercase; - padding: 4px 0; - border-bottom: 1px solid rgba(255, 255, 255, 0.05); + flex-direction: column; + min-height: 100%; } -.signal-stats li span { - color: rgba(255, 255, 255, 0.38); +.sc-tabs { + display: flex; + border-bottom: 1px solid rgba(255, 255, 255, 0.06); + padding: 0 4px; } -.signal-stats li strong { - color: #7efff0; +.sc-tab { + font-size: 11px; font-weight: 700; + letter-spacing: 1.2px; + text-transform: uppercase; + padding: 14px 16px; + color: rgba(255, 255, 255, 0.45); + border: none; + border-bottom: 2px solid transparent; + background: transparent; + cursor: pointer; + margin-bottom: -1px; } -.founder-signals li strong { - color: #c084fc; +.sc-tab.active { + color: #f5c842; + border-bottom-color: #f5c842; } -/* ---- Duel node ---- */ -.duel-node { - position: relative; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - gap: 2px; - padding: 10px 14px; - min-width: 72px; - align-self: stretch; +.sc-tab-panels { + flex: 1; + min-height: 0; } -.duel-node-badge { - padding: 4px 10px; - border: 1px solid rgba(244, 211, 94, 0.45); - background: rgba(244, 211, 94, 0.08); - color: var(--gold); - font-size: 1.1rem; - border-radius: 3px; - box-shadow: 0 0 16px rgba(244, 211, 94, 0.15); +.sc-tab-panel { + display: none; + padding: 18px 22px; + overflow-y: auto; + max-height: none; } -.duel-node-vs { - font-size: 1.6rem; - color: #f97316; - text-shadow: 0 0 20px rgba(249, 115, 22, 0.45); - line-height: 1; - margin: 2px 0; +.sc-tab-panel.active { + display: block; } -.duel-node-pressure { - font-size: 0.58rem; - font-weight: 600; - letter-spacing: 0.08em; +.sc-tab-eyebrow, +.sc-answer-eyebrow { + margin: 0 0 10px; + font-size: 9px; + font-weight: 800; + letter-spacing: 2.5px; text-transform: uppercase; - color: rgba(255, 255, 255, 0.45); + color: rgba(255, 255, 255, 0.5); } -.duel-node-ring { - position: absolute; - inset: -4px; - border-radius: 8px; - border: 1px solid rgba(78, 205, 196, 0.2); - pointer-events: none; - animation: duel-node-pulse 3s ease-in-out infinite; -} +.sc-eyebrow-cyan { color: rgba(0, 230, 200, 0.85); } +.sc-eyebrow-weak { color: rgba(255, 120, 120, 0.9); } +.sc-eyebrow-gold { color: rgba(245, 200, 66, 0.9); } +.sc-eyebrow-dim { color: rgba(255, 255, 255, 0.5); } -.duel-node-ring.pressure-core-focused { - border-color: rgba(244, 211, 94, 0.35); - box-shadow: 0 0 20px rgba(244, 211, 94, 0.1); +.sc-tab-text { + margin: 0; + font-size: 14px; + font-weight: 500; + line-height: 1.65; + color: rgba(255, 255, 255, 0.88); + overflow: visible; + word-break: break-word; } -.duel-node-ring.pressure-core-high { - border-color: rgba(249, 115, 22, 0.4); - box-shadow: 0 0 24px rgba(249, 115, 22, 0.12); +.sc-tab-text-gold { + font-weight: 600; + color: rgba(245, 200, 66, 0.95); } -.duel-node-ring.pressure-core-extreme { - border-color: rgba(230, 57, 70, 0.45); - box-shadow: 0 0 28px rgba(230, 57, 70, 0.15); - animation-duration: 1.5s; +.sc-tab-block { + margin-bottom: 0; } -@keyframes duel-node-pulse { - 0%, 100% { opacity: 0.5; } - 50% { opacity: 1; } +.sc-tab-divider { + height: 1px; + background: rgba(255, 255, 255, 0.08); + margin: 16px 0; } -/* ---- Attack card ---- */ -.attack-card-arena { - position: relative; - margin: 0 auto; - width: min(820px, 100%); - padding: 0; - border: 1px solid rgba(78, 205, 196, 0.35); - border-radius: 6px; - background: linear-gradient(180deg, rgba(10, 20, 36, 0.95) 0%, rgba(4, 10, 20, 0.98) 100%); - box-shadow: - 0 0 40px rgba(78, 205, 196, 0.12), - inset 0 0 30px rgba(78, 205, 196, 0.04); - overflow: hidden; +.sc-voice-inline { + margin-top: 4px; } -.attack-card-banner { - padding: 6px 14px; - text-align: center; - font-size: 0.72rem; - letter-spacing: 0.2em; - color: rgba(126, 255, 240, 0.85); - background: rgba(78, 205, 196, 0.08); - border-bottom: 1px solid rgba(78, 205, 196, 0.2); +.sc-answers-stack { + display: flex; + flex-direction: column; + gap: 12px; } -.attack-card-inner { - position: relative; - z-index: 1; - padding: 20px 24px 24px; - text-align: center; +.sc-answer-card { + padding: 16px 18px; + border-radius: 8px; + background: rgba(255, 255, 255, 0.04); + border: 1px solid rgba(255, 255, 255, 0.09); + overflow: visible; } -.attack-card-tag { - display: inline-block; - margin-bottom: 12px; -} +.sc-answer-cyan { border-left: 3px solid rgba(0, 230, 200, 0.5); } +.sc-answer-red { border-left: 3px solid rgba(255, 80, 80, 0.5); } +.sc-answer-gold { border-left: 3px solid rgba(245, 200, 66, 0.55); } +.sc-answer-dim { border-left: 3px solid rgba(255, 255, 255, 0.2); } -.attack-card-question { +.sc-answer-text { margin: 0; + font-size: 14px; + font-weight: 500; + line-height: 1.65; + color: rgba(255, 255, 255, 0.9); + overflow: visible; + word-break: break-word; +} + +blockquote.sc-answer-text { padding: 0; border: none; - font-size: clamp(1.12rem, 1.4vw + 0.5rem, 1.55rem); - font-weight: 600; - line-height: 1.48; - color: rgba(255, 255, 255, 0.96); quotes: none; + font-style: normal; } -.attack-card-glow { - position: absolute; - inset: 0; - background: radial-gradient(ellipse 70% 50% at 50% 30%, rgba(78, 205, 196, 0.1) 0%, transparent 65%); - pointer-events: none; - animation: judge-glow-breathe 3s ease-in-out infinite; +.sc-round-tag { + display: inline-block; + margin-bottom: 8px; + font-size: 12px; + font-weight: 600; + color: rgba(255, 255, 255, 0.55); } -.attack-card-arena .judge-card-scan { - position: absolute; - inset: 0; - background: linear-gradient(180deg, transparent 0%, rgba(78, 205, 196, 0.06) 50%, transparent 100%); - background-size: 100% 200%; - animation: judge-scan-sweep 4s linear infinite; - pointer-events: none; - z-index: 2; +.sc-why-hurt { + margin: 8px 0 0; + font-size: 13px; + font-weight: 600; + line-height: 1.5; + color: rgba(255, 120, 120, 0.9); + overflow: visible; + word-break: break-word; } -@keyframes judge-scan-sweep { - 0% { background-position: 0 -100%; } - 100% { background-position: 0 200%; } +.sc-answers-empty { + text-align: center; + padding: 32px 16px; + border: 1px solid rgba(255, 255, 255, 0.06); + border-radius: 8px; + background: rgba(255, 255, 255, 0.02); } -.attack-card-arena.judge-attack-enter { - animation: attack-card-enter 0.45s ease-out; +.sc-empty-title { + margin: 0 0 6px; + font-size: 13px; + color: rgba(255, 255, 255, 0.55); } -@keyframes attack-card-enter { - from { opacity: 0; transform: translateY(8px) scale(0.98); } - to { opacity: 1; transform: none; } +.sc-empty-sub { + margin: 0 0 14px; + font-size: 12px; + color: rgba(255, 255, 255, 0.3); } -/* ---- Battle log ---- */ -.arcade-log-bar { - padding: 8px 14px; - border: 1px solid rgba(255, 255, 255, 0.06); - border-radius: 4px; - background: rgba(0, 0, 0, 0.3); +.sc-empty-actions { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 8px; } -/* ---- Response dock ---- */ -.arcade-dock { +.sc-prep-list { + list-style: none; + margin: 0 0 16px; padding: 0; - border: 1px solid rgba(78, 205, 196, 0.15); - border-radius: 6px; - background: linear-gradient(180deg, rgba(12, 16, 28, 0.98) 0%, rgba(6, 8, 14, 0.99) 100%); - box-shadow: - 0 -8px 32px rgba(0, 0, 0, 0.35), - inset 0 1px 0 rgba(255, 255, 255, 0.04); - overflow: hidden; + counter-reset: sc-prep; } -.unified-dock .dock-unified-header { +.sc-prep-list li { + counter-increment: sc-prep; display: flex; - flex-wrap: wrap; - align-items: center; - justify-content: space-between; - gap: 8px 16px; - padding: 10px 16px; + align-items: flex-start; + gap: 12px; + padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); - background: rgba(0, 0, 0, 0.25); -} - -.dock-header-main { - display: flex; - flex-wrap: wrap; - align-items: baseline; - gap: 6px 14px; - flex: 1 1 auto; - min-width: 0; + font-size: 14px; + font-weight: 500; + line-height: 1.6; + color: rgba(255, 255, 255, 0.88); + overflow: visible; + word-break: break-word; } -.btn-arcade-log-inline { - font-family: "Rajdhani", sans-serif; - font-weight: 600; - letter-spacing: 0.08em; - text-transform: uppercase; - font-size: 0.72rem; - padding: 6px 12px; - border: 1px solid rgba(255, 255, 255, 0.12); - background: rgba(255, 255, 255, 0.04); - color: rgba(255, 255, 255, 0.55); - border-radius: 4px; - cursor: pointer; - transition: border-color 0.15s, color 0.15s; +.sc-prep-list li::before { + content: counter(sc-prep); flex-shrink: 0; - white-space: nowrap; -} - -.btn-arcade-log-inline:hover { - border-color: rgba(244, 211, 94, 0.35); - color: var(--gold); + width: 24px; + height: 24px; + border-radius: 50%; + background: rgba(245, 200, 66, 0.15); + color: #f5c842; + font-size: 11px; + font-weight: 800; + display: grid; + place-items: center; } -.unified-dock .response-dock-form, -.unified-dock .voice-turn-preview { - padding: 12px 16px 16px; +.sc-prep-retry-box { + margin-top: 8px; + padding: 12px; + text-align: center; + background: rgba(245, 200, 66, 0.04); + border: 1px solid rgba(245, 200, 66, 0.1); + border-radius: 6px; } -.arcade-dock .response-dock-label { - margin: 0; - font-size: 0.82rem; - color: var(--gold); - text-shadow: 0 0 12px rgba(244, 211, 94, 0.2); +.sc-prep-retry-prompt { + margin: 0 0 10px; + font-size: 13px; + font-weight: 500; + color: rgba(255, 255, 255, 0.65); } -.unified-dock .dock-assist-hint { - margin: 0; - font-size: 0.78rem; - color: rgba(255, 255, 255, 0.45); - font-style: italic; +/* ---- Verdict (inline in right column) ---- */ +.sc-verdict-section { + padding: 16px 24px 20px; + border-top: 1px solid rgba(255, 255, 255, 0.06); + margin: 0 -8px; } -.arcade-dock-form textarea, -.unified-dock #user-input { - width: 100%; - min-height: 88px; - max-height: 130px; - padding: 14px 16px; - font-size: 0.95rem; - line-height: 1.45; - color: rgba(255, 255, 255, 0.85); - caret-color: #f5c842; - background: rgba(255, 255, 255, 0.04); - border: 1px solid rgba(255, 255, 255, 0.08); - border-radius: 6px; - resize: vertical; - transition: border-color 0.15s, box-shadow 0.15s, background 0.15s; +.sc-verdict-inline { + margin-top: auto; + margin-left: 0; + margin-right: 0; + padding: 20px 22px 22px; + border-top: 1px solid rgba(255, 255, 255, 0.08); + background: rgba(0, 0, 0, 0.15); } -.arcade-dock-form textarea:focus, -.unified-dock #user-input:focus { - outline: none; - background: rgba(255, 255, 255, 0.06); - border-color: rgba(34, 211, 238, 0.35); - box-shadow: 0 0 20px rgba(34, 211, 238, 0.12); +.sc-verdict-heading { + margin-bottom: 12px; } -.arcade-dock-form textarea::placeholder, -.unified-dock #user-input::placeholder { - color: rgba(255, 255, 255, 0.28); - font-style: italic; +.sc-verdict-card { + padding: 14px 16px; + border-radius: 8px; + background: rgba(255, 255, 255, 0.03); + border: 1px solid rgba(255, 255, 255, 0.07); + border-top: 2px solid rgba(0, 230, 200, 0.3); + overflow: visible; } -.arcade-action-row { +.sc-verdict-head { display: flex; flex-wrap: wrap; align-items: center; - justify-content: space-between; - gap: 10px; - margin-top: 10px; + gap: 8px; + margin-bottom: 8px; } -.btn-arcade-voice { - position: relative; - display: inline-flex; - align-items: center; - justify-content: center; - gap: 8px; - font-family: "Rajdhani", sans-serif; - font-weight: 700; - letter-spacing: 0.08em; - text-transform: uppercase; - font-size: 0.88rem; - padding: 10px 18px; - min-height: 44px; - border: 1px solid rgba(78, 205, 196, 0.45); - background: linear-gradient(180deg, rgba(78, 205, 196, 0.22), rgba(78, 205, 196, 0.08)); - color: #7efff0; - border-radius: 4px; - cursor: pointer; - box-shadow: 0 0 18px rgba(78, 205, 196, 0.15); - transition: box-shadow 0.15s, background 0.15s, border-color 0.15s, transform 0.15s; - flex-shrink: 0; +.sc-verdict-judge { + font-size: 15px; + font-weight: 800; + color: #00e6c8; } -.btn-arcade-voice:hover { - border-color: rgba(126, 255, 240, 0.65); - background: linear-gradient(180deg, rgba(78, 205, 196, 0.32), rgba(78, 205, 196, 0.14)); - box-shadow: 0 0 24px rgba(78, 205, 196, 0.28); - transform: translateY(-1px); +.sc-verdict-pill { + padding: 4px 10px; + border-radius: 999px; + font-size: 12px; + font-weight: 800; + letter-spacing: 0.04em; + text-transform: uppercase; } -.btn-arcade-voice.recording { - border-color: rgba(248, 113, 113, 0.65); - background: linear-gradient(180deg, rgba(248, 113, 113, 0.28), rgba(248, 113, 113, 0.1)); - color: #fca5a5; - box-shadow: 0 0 24px rgba(248, 113, 113, 0.35); - animation: voice-pulse 1.2s ease-in-out infinite; +.sc-verdict-pill.interest-no_interest { + background: rgba(255, 80, 80, 0.12); + color: #ff8888; } -.btn-arcade-voice.recording .arcade-voice-ring { - border-color: rgba(248, 113, 113, 0.4); - animation: voice-ring 1.2s ease-out infinite; +.sc-verdict-pill.interest-too_early { + background: rgba(255, 152, 64, 0.12); + color: #ff9840; } -.arcade-voice-ring { - position: absolute; - inset: -4px; - border-radius: 6px; - border: 2px solid transparent; - pointer-events: none; +.sc-verdict-pill.interest-mild_interest { + background: rgba(0, 230, 200, 0.12); + color: #00e6c8; } -.arcade-voice-icon { - width: 20px; - height: 20px; - flex-shrink: 0; - filter: drop-shadow(0 0 6px rgba(126, 255, 240, 0.35)); +.sc-verdict-pill.interest-strong_interest { + background: rgba(74, 222, 128, 0.12); + color: #4ade80; } -.btn-arcade-voice.recording .arcade-voice-icon { - filter: drop-shadow(0 0 6px rgba(248, 113, 113, 0.45)); +.sc-verdict-quote { + margin: 12px 0; + padding: 0 0 0 14px; + border: none; + border-left: 3px solid rgba(255, 255, 255, 0.15); + font-style: italic; + font-size: 15px; + font-weight: 500; + line-height: 1.6; + color: rgba(255, 255, 255, 0.88); + overflow: visible; + word-break: break-word; } -.arcade-voice-label { - white-space: nowrap; +.sc-verdict-meta { + display: grid; + grid-template-columns: 160px 1fr; + gap: 16px; } -.btn-arcade-send { - font-family: "Rajdhani", sans-serif; +.sc-meta-label { + display: block; + margin-bottom: 6px; + font-size: 10px; font-weight: 700; - letter-spacing: 0.1em; + letter-spacing: 0.12em; text-transform: uppercase; - font-size: 0.88rem; - padding: 10px 22px; - border: 1px solid rgba(244, 211, 94, 0.5); - background: linear-gradient(180deg, rgba(244, 211, 94, 0.25), rgba(244, 211, 94, 0.12)); - color: var(--gold); - border-radius: 4px; - cursor: pointer; - transition: box-shadow 0.15s, background 0.15s; + color: rgba(255, 255, 255, 0.45); } -.btn-arcade-send:hover:not(:disabled) { - box-shadow: 0 0 20px rgba(244, 211, 94, 0.25); - background: linear-gradient(180deg, rgba(244, 211, 94, 0.35), rgba(244, 211, 94, 0.18)); +.sc-meta-value { + display: block; + font-size: 14px; + font-weight: 600; + color: rgba(255, 255, 255, 0.92); + line-height: 1.55; + overflow: visible; + word-break: break-word; } -.btn-arcade-send:disabled { - opacity: 0.4; - cursor: not-allowed; +.sc-verdict-offer { + margin: 10px 0 0; + font-size: 12px; + color: #7efff0; } -.arcade-dock .hint-chips { - display: inline-flex; +.sc-verdict-section #verdict-actions { + display: none; flex-wrap: wrap; - gap: 4px; - margin-left: 8px; + gap: 8px; + margin-top: 10px; } -.arcade-dock .hint-chip { - font-size: 0.62rem; - padding: 3px 8px; - border-radius: 999px; - border: 1px solid rgba(244, 211, 94, 0.2); - background: rgba(244, 211, 94, 0.06); - color: rgba(244, 211, 94, 0.75); +.sc-verdict-section #verdict-actions:has(.btn-deal-continue) { + display: flex; +} + +.sc-btn-gold { + padding: 10px 16px; + font-size: 13px; + font-weight: 800; + border-radius: 6px; + border: none; + background: #f5c842; + color: #0a0a0a; cursor: pointer; } -.arcade-dock .hint-chip:hover { - border-color: rgba(244, 211, 94, 0.45); - color: var(--gold); +.sc-btn-secondary { + padding: 10px 16px; + font-size: 13px; + font-weight: 700; + border-radius: 6px; + border: 1px solid rgba(255, 255, 255, 0.18); + background: rgba(255, 255, 255, 0.08); + color: rgba(255, 255, 255, 0.88); + cursor: pointer; } -.voice-timer-inline.hud-font { - font-size: 0.82rem; - color: rgba(255, 255, 255, 0.55); +.sc-btn-ghost { + padding: 10px 16px; + font-size: 13px; + font-weight: 600; + border-radius: 6px; + border: 1px solid transparent; + background: transparent; + color: rgba(255, 255, 255, 0.72); + cursor: pointer; } -/* ---- Deal arcade variant ---- */ -.deal-arcade-shell .arcade-grid-bg { - background: - linear-gradient(rgba(74, 222, 128, 0.04) 1px, transparent 1px), - linear-gradient(90deg, rgba(74, 222, 128, 0.04) 1px, transparent 1px); - background-size: 48px 48px; +.sc-page .show-more-btn { + display: none !important; } -.deal-arcade-shell .arcade-hud, -.deal-arcade-shell .attack-card-arena { - border-color: rgba(74, 222, 128, 0.22); +.sc-page .clamp-text { + display: block; + overflow: visible; + -webkit-line-clamp: unset; } @media (max-width: 960px) { - .arcade-hud { - grid-template-columns: repeat(3, 1fr); - } - - .hud-cell-meter, - .hud-cell-combo { - grid-column: span 1; - } - - .hud-cell-actions { - grid-column: 1 / -1; - justify-content: flex-end; - } - - .fighter-row { - grid-template-columns: 1fr; - gap: 10px; + .sc-shell { + padding: 20px 16px; } - .duel-node { - order: -1; - flex-direction: row; - gap: 10px; - padding: 8px; + .sc-hero-row { + flex-wrap: wrap; } - .duel-node-ring { - display: none; + .sc-hero-conversation { + margin-left: 0; + width: 100%; + align-self: stretch; } - .attack-card-arena { + .sc-btn-conversation { width: 100%; + text-align: center; } -} -@media (max-width: 560px) { - .arcade-hud { - grid-template-columns: 1fr 1fr; + .sc-body-grid { + grid-template-columns: 1fr; } - .hud-cell-round { - grid-column: 1 / -1; + .sc-left-col { + border-right: none; + border-bottom: 1px solid rgba(255, 255, 255, 0.06); } - .signal-stats { - max-width: 100%; + .sc-verdict-meta { + grid-template-columns: 1fr; } - .arcade-dock .hint-chips { - margin-left: 0; - margin-top: 6px; - } +} - .btn-arcade-voice { +@media (max-width: 720px) { + #screen-battle.active .battle-stage-shell, + #screen-deal.active .battle-stage-shell { width: 100%; - justify-content: center; + padding: 0 12px 16px; } -} -@media (prefers-reduced-motion: reduce) { - .duel-node-ring, - .attack-card-glow, - .attack-card-arena .judge-card-scan, - .attack-card-arena.judge-attack-enter { - animation: none !important; + .fighter-row { + grid-template-columns: 1fr; + gap: 8px; + } + + .duel-node { + order: -1; + flex-direction: row; + padding: 8px; } }