diff --git "a/frontend/styles.css" "b/frontend/styles.css" --- "a/frontend/styles.css" +++ "b/frontend/styles.css" @@ -1,12 +1,25 @@ :root { - --bg: #06080f; - --bg-panel: rgba(18, 22, 36, 0.78); - --text: #f8f4e8; - --muted: #b9b3a4; - --red: #e63946; - --gold: #f4d35e; - --border: rgba(244, 211, 94, 0.18); - --shadow: 0 12px 40px rgba(0, 0, 0, 0.45); + /* Arena visual tokens (Pass 1) */ + --bg-deep: #040508; + --bg-panel: rgba(14, 18, 30, 0.82); + --text-main: #f5f0e6; + --text-muted: #9aa3b5; + --accent-gold: #f4d35e; + --accent-red: #e63946; + --accent-cyan: #4ecdc4; + --border-soft: rgba(244, 211, 94, 0.16); + --glow-gold: rgba(244, 211, 94, 0.42); + --glow-red: rgba(230, 57, 70, 0.35); + --glow-cyan: rgba(78, 205, 196, 0.28); + + /* Legacy aliases — keep existing screens working */ + --bg: var(--bg-deep); + --text: var(--text-main); + --muted: var(--text-muted); + --red: var(--accent-red); + --gold: var(--accent-gold); + --border: var(--border-soft); + --shadow: 0 12px 40px rgba(0, 0, 0, 0.55); } * { @@ -37,6 +50,13 @@ body { padding: 2rem 1rem 3rem; } +.app:has(#screen-battle.active), +.app:has(#screen-deal.active) { + max-width: none; + width: 100%; + padding: 0; +} + .screen { display: none; } @@ -89,365 +109,6545 @@ h1 { margin-top: 2rem; } -.btn { - border: none; - border-radius: 12px; - padding: 0.85rem 1.25rem; - font-weight: 700; - cursor: pointer; - transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease; +/* ================================ + PitchFight Arena Landing (Pass 1) + ================================ */ + +#screen-landing.active { + display: block; } -.btn:hover { - transform: translateY(-1px); +.arena-landing { + position: relative; + width: 100vw; + min-height: calc(100vh - 2rem); + margin-left: calc(50% - 50vw); + margin-right: calc(50% - 50vw); + overflow: hidden; + display: flex; + align-items: center; + justify-content: center; } -.btn:disabled { - opacity: 0.6; - cursor: not-allowed; +/* ---- Landing Scene Layers (Pass 1.5) ---- */ + +.arena-scene { + position: absolute; + inset: 0; + pointer-events: none; + z-index: 0; + overflow: hidden; } -.btn-primary { - color: #1a0b0d; - background: linear-gradient(135deg, var(--gold), #ffd86b); - box-shadow: 0 0 18px rgba(244, 211, 94, 0.35); +.arena-scene-base { + position: absolute; + inset: 0; + background: + radial-gradient(ellipse 90% 60% at 50% 35%, rgba(18, 24, 42, 0.95) 0%, transparent 65%), + radial-gradient(ellipse 120% 80% at 50% 100%, rgba(20, 28, 48, 0.92) 0%, transparent 55%), + linear-gradient(180deg, #0c101c 0%, var(--bg-deep) 42%, #010102 100%); } -.btn-secondary { - color: var(--text); - background: rgba(255, 255, 255, 0.06); - border: 1px solid var(--border); +.spotlight-core { + position: absolute; + top: 0; + left: 50%; + transform: translateX(-50%); + width: min(680px, 86vw); + height: 72%; + background: radial-gradient( + ellipse 55% 100% at 50% 0%, + rgba(244, 211, 94, 0.32) 0%, + rgba(244, 211, 94, 0.12) 38%, + transparent 72% + ); + animation: arena-spotlight-pulse 5s ease-in-out infinite, spotlight-shimmer 8s ease-in-out infinite; } -.btn-danger { - color: white; - background: linear-gradient(135deg, var(--red), #ff6b6b); - box-shadow: 0 0 18px rgba(230, 57, 70, 0.35); +.hero-center-haze { + position: absolute; + top: 18%; + left: 50%; + transform: translateX(-50%); + width: min(480px, 70vw); + height: 42%; + background: radial-gradient( + ellipse at 50% 50%, + rgba(255, 248, 230, 0.06) 0%, + transparent 70% + ); + filter: blur(20px); + pointer-events: none; } -.btn-ghost { - background: transparent; - color: var(--muted); - border: 1px solid transparent; +.hero-spotlight-particles { + position: absolute; + top: 12%; + left: 50%; + transform: translateX(-50%); + width: min(400px, 60vw); + height: 50%; + background-image: + radial-gradient(1px 1px at 20% 30%, rgba(244, 211, 94, 0.5) 0%, transparent 100%), + radial-gradient(1px 1px at 70% 20%, rgba(255, 255, 255, 0.35) 0%, transparent 100%), + radial-gradient(1.5px 1.5px at 45% 60%, rgba(244, 211, 94, 0.4) 0%, transparent 100%), + radial-gradient(1px 1px at 85% 45%, rgba(78, 205, 196, 0.3) 0%, transparent 100%); + animation: hero-particles-float 10s ease-in-out infinite; + opacity: 0.7; } -.btn-wide { - width: 100%; - margin-top: 1rem; +@keyframes spotlight-shimmer { + 0%, 100% { opacity: 0.92; } + 50% { opacity: 1; } } -.panel { - padding: 1.25rem; - margin-bottom: 1.25rem; +@keyframes hero-particles-float { + 0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.6; } + 50% { transform: translateX(-50%) translateY(-8px); opacity: 0.85; } } -.panel-header { +.spotlight-beam { + position: absolute; + top: -5%; + left: 50%; + transform: translateX(-50%); + width: min(280px, 42vw); + height: 70%; + background: linear-gradient( + 180deg, + rgba(255, 248, 220, 0.12) 0%, + rgba(244, 211, 94, 0.06) 35%, + transparent 85% + ); + clip-path: polygon(18% 0%, 82% 0%, 100% 100%, 0% 100%); + opacity: 0.75; +} + +.arena-floor { + position: absolute; + bottom: -2%; + left: -10%; + right: -10%; + height: 48%; + background: + linear-gradient(to top, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.4) 45%, transparent 100%), + repeating-linear-gradient( + 90deg, + transparent, + transparent 39px, + rgba(244, 211, 94, 0.055) 39px, + rgba(244, 211, 94, 0.055) 40px + ), + repeating-linear-gradient( + 0deg, + transparent, + transparent 39px, + rgba(78, 205, 196, 0.04) 39px, + rgba(78, 205, 196, 0.04) 40px + ); + transform: perspective(520px) rotateX(62deg); + transform-origin: bottom center; + opacity: 0.65; + mask-image: linear-gradient(to top, black 15%, transparent 95%); +} + +.pressure-line { + position: absolute; + bottom: 28%; + left: 50%; + transform: translateX(-50%); + width: min(560px, 82vw); + height: 2px; + background: linear-gradient( + 90deg, + transparent 0%, + rgba(244, 211, 94, 0.25) 12%, + rgba(78, 205, 196, 0.45) 50%, + rgba(244, 211, 94, 0.25) 88%, + transparent 100% + ); + box-shadow: + 0 0 20px rgba(78, 205, 196, 0.18), + 0 8px 32px rgba(0, 0, 0, 0.5); +} + +.pressure-line::before { + content: ""; + position: absolute; + left: 8%; + right: 8%; + top: -14px; + height: 14px; + background: linear-gradient( + 180deg, + rgba(14, 20, 34, 0.85) 0%, + rgba(14, 20, 34, 0.35) 100% + ); + border-top: 1px solid rgba(78, 205, 196, 0.12); + border-radius: 2px 2px 0 0; + opacity: 0.55; +} + +.arena-glow { + position: absolute; + top: 22%; + width: 42%; + height: 58%; + filter: blur(72px); + opacity: 0.55; +} + +.arena-glow-founder { + left: -6%; + opacity: 0.62; + background: radial-gradient(circle at 30% 50%, var(--glow-gold) 0%, transparent 65%); +} + +.arena-glow-judge { + right: -6%; + opacity: 0.62; + background: radial-gradient(circle at 70% 50%, var(--glow-cyan) 0%, transparent 65%); +} + +/* ---- Founder / Judge Characters (SVG Scene) ---- */ + +.founder-silhouette, +.judge-silhouette { + position: absolute; + bottom: 20%; + pointer-events: none; display: flex; - justify-content: space-between; + flex-direction: column; align-items: center; - gap: 1rem; } -.startup-form { - display: grid; - gap: 0.85rem; - margin-top: 1rem; +.founder-silhouette { + left: clamp(5%, 11vw, 14%); + width: clamp(150px, 19vw, 228px); + height: clamp(240px, 29vw, 350px); } -.startup-form label { - display: grid; - gap: 0.35rem; - font-size: 0.92rem; - color: var(--muted); +.judge-silhouette { + right: clamp(5%, 11vw, 14%); + width: clamp(160px, 20vw, 245px); + height: clamp(250px, 30vw, 365px); } -input, -textarea { +.character-svg { width: 100%; - border-radius: 10px; - border: 1px solid rgba(255, 255, 255, 0.08); - background: rgba(0, 0, 0, 0.25); - color: var(--text); - padding: 0.7rem 0.8rem; - font: inherit; + height: auto; + position: relative; + z-index: 1; } -.persona-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); - gap: 0.85rem; - margin-top: 1rem; +.character-svg-founder { + animation: founder-svg-breathe 4.5s ease-in-out infinite; + filter: drop-shadow(0 12px 36px rgba(0, 0, 0, 0.65)) drop-shadow(0 0 32px rgba(244, 211, 94, 0.14)); } -.persona-card { - text-align: left; - padding: 1rem; - border-radius: 14px; - border: 1px solid rgba(255, 255, 255, 0.08); - background: rgba(0, 0, 0, 0.22); - color: var(--text); - cursor: pointer; - transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; +.character-svg-judge { + animation: judge-svg-idle 5s ease-in-out infinite; + filter: drop-shadow(0 12px 36px rgba(0, 0, 0, 0.65)) drop-shadow(0 0 36px rgba(78, 205, 196, 0.18)); } -.persona-card:hover, -.persona-card.selected { - border-color: var(--gold); - box-shadow: 0 0 16px rgba(244, 211, 94, 0.18); - transform: translateY(-2px); +/* Shared character labels */ +.character-label { + position: absolute; + bottom: -2%; + left: 50%; + transform: translateX(-50%); + font-size: 0.58rem; + font-weight: 600; + letter-spacing: 0.24em; + text-transform: uppercase; + white-space: nowrap; + opacity: 0.85; + z-index: 2; } -.persona-card h3 { - margin: 0.35rem 0; +.character-label-founder { + color: rgba(244, 211, 94, 0.6); + text-shadow: 0 0 12px rgba(244, 211, 94, 0.3); } -.persona-card p { - margin: 0; - color: var(--muted); - font-size: 0.9rem; +.character-label-judge { + color: rgba(78, 205, 196, 0.65); + text-shadow: 0 0 12px rgba(78, 205, 196, 0.35); } -.battle-layout { - display: grid; - grid-template-columns: 260px 1fr; - gap: 1rem; +.character-shadow { + position: absolute; + bottom: 0; + left: 50%; + transform: translateX(-50%); + width: 90%; + height: 12px; + border-radius: 50%; + filter: blur(4px); + z-index: 0; } -.battle-meta { - padding: 1.25rem; +.character-shadow-founder { + background: radial-gradient(ellipse, rgba(244, 211, 94, 0.15) 0%, rgba(0, 0, 0, 0.5) 55%, transparent 75%); } -.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); +.character-shadow-judge { + background: radial-gradient(ellipse, rgba(78, 205, 196, 0.12) 0%, rgba(0, 0, 0, 0.5) 55%, transparent 75%); } -.meta-item span { - color: var(--muted); +/* ---- Founder aura ---- */ + +.founder-aura { + position: absolute; + top: 5%; + left: 50%; + transform: translateX(-50%); + width: 130%; + height: 75%; + border-radius: 50%; + background: radial-gradient( + ellipse at 50% 40%, + rgba(244, 211, 94, 0.2) 0%, + rgba(244, 211, 94, 0.05) 50%, + transparent 72% + ); + animation: founder-breathe 4.5s ease-in-out infinite; } -.pressure-medium { color: #7dd3fc; } -.pressure-high { color: var(--gold); } -.pressure-extreme { color: var(--red); } +/* ---- Judge aura ---- */ -.battle-chat { - display: flex; - flex-direction: column; - min-height: 70vh; - padding: 1rem; +.judge-aura { + position: absolute; + top: 2%; + left: 50%; + transform: translateX(-50%); + width: 140%; + height: 80%; + border-radius: 4px; + background: radial-gradient( + ellipse at 50% 35%, + rgba(78, 205, 196, 0.2) 0%, + rgba(78, 205, 196, 0.05) 50%, + transparent 75% + ); + animation: judge-aura-scan 5s ease-in-out infinite; } -.chat-window { - flex: 1; - overflow-y: auto; - display: flex; - flex-direction: column; - gap: 0.75rem; - padding: 0.5rem; - margin-bottom: 1rem; +@keyframes judge-aura-scan { + 0%, 100% { opacity: 0.75; transform: translateX(-50%) scale(1); } + 50% { opacity: 1; transform: translateX(-50%) scale(1.04); } } -.message { - max-width: 85%; - padding: 0.8rem 1rem; - border-radius: 14px; - line-height: 1.45; +/* ---- SVG prop animations ---- */ + +.prop-money-bag { + animation: money-bag-sway 3.5s ease-in-out infinite; + transform-origin: 30px 185px; } -.message.user { - align-self: flex-end; - background: rgba(230, 57, 70, 0.18); - border: 1px solid rgba(230, 57, 70, 0.35); +.prop-pitch-deck { + animation: pitch-deck-tilt 4s ease-in-out infinite; + transform-origin: 106px 132px; } -.message.ai { - align-self: flex-start; - background: rgba(244, 211, 94, 0.08); - border: 1px solid rgba(244, 211, 94, 0.22); +.prop-cash-stack { + animation: cash-shimmer 2.8s ease-in-out infinite; } -.message-meta { - display: block; - font-size: 0.75rem; - color: var(--gold); - margin-bottom: 0.35rem; +.prop-briefcase { + animation: briefcase-pulse 3.2s ease-in-out infinite; } -.chat-input-row { - display: grid; - grid-template-columns: 1fr auto; - gap: 0.75rem; +.judge-visor-svg { + animation: judge-visor-pulse-svg 3s ease-in-out infinite; } -.status-text { - color: var(--red); - font-size: 0.9rem; - margin: 0.5rem 0 0; +.judge-sensor-svg { + animation: judge-sensor-blink-svg 2.5s step-end infinite; } -.scorecard-header { - display: flex; - justify-content: space-between; - align-items: center; - gap: 1rem; +.judge-sensor-svg:nth-of-type(2) { + animation-delay: 0.8s; } -.scorecard-header-left { - display: flex; - flex-direction: column; - gap: 0.5rem; +.judge-sensor-svg:nth-of-type(3) { + animation-delay: 1.4s; } -.btn-sm { - padding: 0.3rem 0.75rem; - font-size: 0.8rem; - border-radius: 6px; - align-self: flex-start; +@keyframes founder-breathe { + 0%, 100% { opacity: 0.8; transform: translateX(-50%) scale(1); } + 50% { opacity: 1; transform: translateX(-50%) scale(1.05); } } -.overall-score { - text-align: right; +@keyframes founder-svg-breathe { + 0%, 100% { transform: translateY(0); } + 50% { transform: translateY(-3px); } } -.overall-score strong { - display: block; - font-size: 2.5rem; - color: var(--gold); +@keyframes judge-svg-idle { + 0%, 100% { transform: translateY(0); } + 50% { transform: translateY(-2px); } } -.score-bars { - display: grid; - gap: 0.9rem; - margin: 1.25rem 0; +@keyframes money-bag-sway { + 0%, 100% { transform: rotate(-2deg); } + 50% { transform: rotate(2deg); } } -.score-row-head { - display: flex; - justify-content: space-between; - margin-bottom: 0.35rem; - text-transform: capitalize; +@keyframes pitch-deck-tilt { + 0%, 100% { transform: rotate(0deg); } + 50% { transform: rotate(2deg); } } -.bar-track { - height: 10px; - border-radius: 999px; - background: rgba(255, 255, 255, 0.08); - overflow: hidden; +@keyframes cash-shimmer { + 0%, 100% { opacity: 0.85; } + 50% { opacity: 1; } } -.bar-fill { - height: 100%; - background: linear-gradient(90deg, var(--red), var(--gold)); +@keyframes briefcase-pulse { + 0%, 100% { opacity: 0.9; } + 50% { opacity: 1; filter: brightness(1.15); } } -.score-reason { - margin: 0.35rem 0 0; - color: var(--muted); - font-size: 0.9rem; +@keyframes judge-visor-pulse-svg { + 0%, 100% { opacity: 0.8; } + 50% { opacity: 1; } } -.score-label { - margin-left: 0.5rem; - font-size: 0.75rem; - color: var(--gold); - font-weight: 600; +@keyframes judge-sensor-blink-svg { + 0%, 40%, 100% { opacity: 0.4; } + 45%, 55% { opacity: 1; } +} + +/* ---- Floating battle artifacts (Pass 2) ---- */ + +.arena-artifacts { + position: absolute; + inset: 0; + pointer-events: none; + z-index: 2; +} + +.artifact { + position: absolute; + border-radius: 4px; opacity: 0.85; - text-transform: uppercase; - letter-spacing: 0.04em; } -.feedback-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); - gap: 0.85rem; +.arena-artifacts-founder .artifact-pitch-card { + top: 18%; + right: -18%; + width: 36px; + height: 48px; + background: rgba(18, 14, 8, 0.92); + border: 1px solid rgba(244, 211, 94, 0.45); + transform: rotate(12deg); + box-shadow: 0 0 14px rgba(244, 211, 94, 0.2); + animation: artifact-float-founder 5s ease-in-out infinite; } -.feedback-card { - padding: 1rem; - border-radius: 12px; - background: rgba(0, 0, 0, 0.22); - border: 1px solid rgba(255, 255, 255, 0.06); +.arena-artifacts-founder .artifact-pitch-card::before, +.arena-artifacts-founder .artifact-pitch-card::after { + content: ""; + position: absolute; + left: 6px; + right: 6px; + height: 2px; + background: rgba(244, 211, 94, 0.35); + border-radius: 1px; } -.feedback-card.highlight { - border-color: rgba(244, 211, 94, 0.25); +.arena-artifacts-founder .artifact-pitch-card::before { top: 12px; } +.arena-artifacts-founder .artifact-pitch-card::after { top: 22px; width: 60%; } + +.arena-artifacts-founder .artifact-deck-tile { + top: 42%; + left: -22%; + width: 32px; + height: 32px; + background: rgba(20, 16, 10, 0.9); + border: 1px solid rgba(244, 211, 94, 0.3); + animation: artifact-float-founder 6s ease-in-out infinite 0.8s; } -.prep-questions { - margin-top: 1.25rem; +.arena-artifacts-founder .artifact-deck-tile::before { + content: ""; + position: absolute; + top: 8px; + left: 6px; + right: 6px; + height: 2px; + background: rgba(244, 211, 94, 0.4); + box-shadow: 0 6px 0 rgba(244, 211, 94, 0.28), 0 12px 0 rgba(244, 211, 94, 0.18); + border-radius: 1px; } -.scorecard-actions { - display: flex; - gap: 0.75rem; - flex-wrap: wrap; - margin-top: 1.25rem; +.arena-artifacts-founder .artifact-traction-graph { + bottom: 38%; + right: -8%; + width: 44px; + height: 28px; + border-bottom: 1px solid rgba(244, 211, 94, 0.25); + border-left: 1px solid rgba(244, 211, 94, 0.25); + animation: artifact-float-founder 4.5s ease-in-out infinite 1.2s; } -.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; +.arena-artifacts-founder .artifact-traction-graph::before { + content: ""; + position: absolute; + bottom: 0; + left: 4px; + width: 6px; + height: 10px; + background: rgba(244, 211, 94, 0.35); + box-shadow: 10px -6px 0 rgba(244, 211, 94, 0.5), 20px -12px 0 rgba(244, 211, 94, 0.65), 30px -8px 0 rgba(244, 211, 94, 0.45); } -.error-banner { - position: fixed; - top: 0; +.arena-artifacts-judge .artifact-score-tile { + top: 12%; + left: -24%; + width: 42px; + height: 42px; + background: rgba(6, 14, 22, 0.95); + border: 1px solid rgba(78, 205, 196, 0.45); + display: flex; + align-items: center; + justify-content: center; + box-shadow: 0 0 16px rgba(78, 205, 196, 0.25); + animation: artifact-float-judge 4.8s ease-in-out infinite; +} + +.artifact-score-num { + font-size: 0.85rem; + font-weight: 800; + color: rgba(78, 205, 196, 0.9); + letter-spacing: -0.02em; +} + +.arena-artifacts-judge .artifact-scanner { + top: 38%; + right: -20%; + width: 38px; + height: 38px; + border: 1px solid rgba(78, 205, 196, 0.4); + background: rgba(4, 10, 18, 0.85); + overflow: hidden; + animation: artifact-float-judge 5.5s ease-in-out infinite 0.6s; +} + +.arena-artifacts-judge .artifact-scanner::after { + content: ""; + position: absolute; left: 0; right: 0; - z-index: 30; + height: 2px; + background: rgba(120, 255, 240, 0.7); + box-shadow: 0 0 8px rgba(78, 205, 196, 0.6); + animation: artifact-scan-line 2.5s ease-in-out infinite; +} + +.arena-artifacts-judge .artifact-deal-chip { + bottom: 36%; + left: -16%; + padding: 0.25rem 0.45rem; + font-size: 0.55rem; + font-weight: 700; + letter-spacing: 0.14em; + color: rgba(244, 211, 94, 0.75); + background: rgba(8, 16, 24, 0.92); + border: 1px solid rgba(78, 205, 196, 0.35); + animation: artifact-float-judge 6s ease-in-out infinite 1s; +} + +@keyframes artifact-float-founder { + 0%, 100% { transform: translateY(0) rotate(12deg); opacity: 0.75; } + 50% { transform: translateY(-5px) rotate(10deg); opacity: 1; } +} + +@keyframes artifact-float-judge { + 0%, 100% { transform: translateY(0); opacity: 0.8; } + 50% { transform: translateY(-4px); opacity: 1; } +} + +@keyframes artifact-scan-line { + 0%, 100% { top: 0; opacity: 0.5; } + 50% { top: calc(100% - 2px); opacity: 1; } +} + +@media (max-width: 900px) { + .founder-silhouette { + left: clamp(2%, 7vw, 9%); + transform: scale(0.9); + transform-origin: bottom center; + } + + .judge-silhouette { + right: clamp(2%, 7vw, 9%); + transform: scale(0.9); + transform-origin: bottom center; + } +} + +.arena-dust { + position: absolute; + inset: 0; + background-image: + radial-gradient(1px 1px at 8% 18%, rgba(255, 255, 255, 0.28) 0%, transparent 100%), + radial-gradient(1px 1px at 22% 72%, rgba(244, 211, 94, 0.2) 0%, transparent 100%), + radial-gradient(1px 1px at 68% 28%, rgba(255, 255, 255, 0.18) 0%, transparent 100%), + radial-gradient(1px 1px at 88% 68%, rgba(78, 205, 196, 0.15) 0%, transparent 100%), + radial-gradient(1px 1px at 48% 44%, rgba(255, 255, 255, 0.14) 0%, transparent 100%); + animation: arena-dust-drift 14s linear infinite; +} + +.arena-pressure-scan { + position: absolute; + inset: 0; + background: linear-gradient( + 180deg, + transparent 0%, + rgba(78, 205, 196, 0.04) 48%, + transparent 52% + ); + background-size: 100% 220%; + animation: arena-pressure-scan 8s ease-in-out infinite; + opacity: 0.35; +} + +.arena-scanline { + position: absolute; + inset: 0; + background: repeating-linear-gradient( + 0deg, + transparent, + transparent 3px, + rgba(0, 0, 0, 0.025) 3px, + rgba(0, 0, 0, 0.025) 4px + ); + opacity: 0.35; +} + +/* ---- Landing Responsive Scene ---- */ + +.arena-landing-content { + position: relative; + z-index: 2; + text-align: center; + padding: 2rem 1.25rem 2.5rem; + max-width: 820px; + width: 100%; +} + +.arena-eyebrow { + margin: 0 0 0.85rem; + font-size: 0.68rem; + font-weight: 700; + letter-spacing: 0.32em; + text-transform: uppercase; + color: var(--accent-cyan); + text-shadow: 0 0 20px var(--glow-cyan); +} + +.arena-logo-wrap { + display: flex; + justify-content: center; + margin-bottom: 0.65rem; +} + +.arena-logo { + width: clamp(80px, 13vw, 104px); + height: clamp(80px, 13vw, 104px); + margin-bottom: 0; + filter: drop-shadow(0 0 28px var(--glow-gold)); + animation: arena-logo-pulse 4s ease-in-out infinite; +} + +.arena-title { + margin: 0 0 1.1rem; + font-size: clamp(2.85rem, 8.5vw, 4.5rem); + font-weight: 800; + letter-spacing: 0.03em; + line-height: 1.02; + background: linear-gradient(180deg, #fff8e7 0%, var(--accent-gold) 50%, #c9a227 100%); + -webkit-background-clip: text; + background-clip: text; + color: transparent; + filter: drop-shadow(0 4px 40px var(--glow-gold)); +} + +/* Pass 2 — hook lines */ +.arena-hook { + min-height: 4.5rem; + margin-bottom: 0.9rem; +} + +.arena-hook-line { + margin: 0; + font-size: clamp(1.25rem, 3.2vw, 1.65rem); + font-weight: 600; + color: var(--text-main); + line-height: 1.32; + letter-spacing: 0.01em; +} + +.arena-hook-line-accent { + margin-top: 0.3rem; + color: var(--accent-gold); + font-weight: 700; + opacity: 0; + transform: translateY(6px); + transition: opacity 0.35s ease, transform 0.35s ease; +} + +.arena-hook-line-accent:not(.active):not(.done) { + visibility: hidden; +} + +.arena-hook-line-accent.active, +.arena-hook-line-accent.done { + visibility: visible; + opacity: 1; + transform: translateY(0); +} + +.arena-support { + max-width: 520px; + margin: 0 auto 1.35rem; + font-size: clamp(0.88rem, 2vw, 0.95rem); + line-height: 1.5; + color: var(--text-muted); + opacity: 0; + transform: translateY(8px); + transition: opacity 0.5s ease 0.08s, transform 0.5s ease 0.08s; +} + +.arena-landing.intro-complete .arena-support { + opacity: 1; + transform: translateY(0); +} + +.arena-cursor { + display: inline-block; + width: 2px; + height: 1.1em; + margin-left: 2px; + vertical-align: text-bottom; + background: var(--accent-gold); + animation: arena-cursor-blink 0.9s step-end infinite; +} + +.arena-hook-line.done .arena-cursor { + display: none; +} + +.arena-cta-row { + margin-top: 0.25rem; + opacity: 0; + transform: translateY(12px); + transition: opacity 0.55s ease, transform 0.55s ease; + gap: 0.85rem; +} + +.arena-cta-row.visible { + opacity: 1; + transform: translateY(0); +} + +.btn-arena-primary { + padding: 1.05rem 2rem; + font-size: 1.02rem; + font-weight: 800; + letter-spacing: 0.06em; + text-transform: uppercase; + animation: arena-cta-glow 3s ease-in-out infinite; + min-width: 200px; +} + +.btn-arena-secondary { + padding: 0.95rem 1.5rem; + font-size: 0.82rem; + letter-spacing: 0.05em; + text-transform: uppercase; + opacity: 0.88; + background: rgba(255, 255, 255, 0.03); +} + +.btn-arena-primary:hover { + transform: translateY(-3px); + box-shadow: 0 0 32px var(--glow-gold), 0 10px 28px rgba(0, 0, 0, 0.45); +} + +.btn-arena-secondary:hover { + opacity: 1; + border-color: rgba(78, 205, 196, 0.4); + box-shadow: 0 0 12px rgba(78, 205, 196, 0.15); + transform: translateY(-1px); +} + +.arena-feature-chips { + display: flex; + flex-wrap: wrap; + gap: 0.4rem; + justify-content: center; + margin-top: 1.25rem; + opacity: 0; + transform: translateY(8px); + transition: opacity 0.5s ease 0.12s, transform 0.5s ease 0.12s; +} + +.arena-feature-chips.visible { + opacity: 1; + transform: translateY(0); +} + +.arena-chip { + padding: 0.28rem 0.65rem; + font-size: 0.62rem; + font-weight: 600; + letter-spacing: 0.08em; + text-transform: uppercase; + color: rgba(185, 190, 200, 0.85); + background: rgba(255, 255, 255, 0.03); + border: 1px solid rgba(255, 255, 255, 0.08); + border-radius: 999px; + transition: border-color 0.2s ease, transform 0.2s ease; +} + +.arena-chip:hover { + border-color: rgba(244, 211, 94, 0.25); + transform: translateY(-1px); +} + +.arena-landing-footer { + margin-top: 1.35rem; + opacity: 0; + transition: opacity 0.5s ease 0.2s; +} + +.arena-landing.intro-complete .arena-landing-footer { + opacity: 1; +} + +.arena-trust-badge { + margin: 0; + font-size: 0.62rem; + font-weight: 600; + letter-spacing: 0.14em; + text-transform: uppercase; + color: rgba(154, 163, 181, 0.7); +} + +.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; +} + +@keyframes arena-spotlight-pulse { + 0%, 100% { opacity: 0.85; } + 50% { opacity: 1; } +} + +@keyframes arena-logo-pulse { + 0%, 100% { filter: drop-shadow(0 0 20px var(--glow-gold)); } + 50% { filter: drop-shadow(0 0 32px var(--glow-gold)); } +} + +@keyframes arena-cursor-blink { + 0%, 100% { opacity: 1; } + 50% { opacity: 0; } +} + +@keyframes arena-cta-glow { + 0%, 100% { box-shadow: 0 0 18px rgba(244, 211, 94, 0.35); } + 50% { box-shadow: 0 0 28px rgba(244, 211, 94, 0.55); } +} + +@keyframes arena-dust-drift { + 0% { transform: translateY(0); } + 100% { transform: translateY(-20px); } +} + +@keyframes arena-pressure-scan { + 0%, 100% { background-position: 0 0; } + 50% { background-position: 0 100%; } +} + +@media (max-width: 640px) { + .arena-landing { + min-height: calc(100vh - 1rem); + } + + .founder-silhouette, + .judge-silhouette { + opacity: 0.65; + transform: scale(0.78); + transform-origin: bottom center; + } + + .founder-silhouette { + left: 0; + bottom: 18%; + } + + .judge-silhouette { + right: 0; + bottom: 18%; + } + + .prop-money-bag, + .prop-cash-stack { + opacity: 0.75; + } + + .character-label { + font-size: 0.5rem; + letter-spacing: 0.16em; + opacity: 0.65; + } + + .pressure-line { + width: 92vw; + bottom: 24%; + opacity: 0.7; + } + + .spotlight-beam { + opacity: 0.5; + } + + .arena-cta-row { + flex-direction: column; + align-items: stretch; + padding: 0 0.5rem; + } + + .arena-cta-row .btn { + width: 100%; + } + + .arena-hook { + min-height: 3.5rem; + } + + .arena-artifacts { + opacity: 0.6; + transform: scale(0.85); + } +} + +@media (max-width: 420px) { + .founder-silhouette, + .judge-silhouette { + opacity: 0.45; + transform: scale(0.62); + } + + .prop-briefcase, + .prop-money-bag, + .arena-artifacts { + opacity: 0.35; + transform: scale(0.75); + } + + .character-label { + display: none; + } + + .arena-floor { + opacity: 0.45; + } +} + +@media (prefers-reduced-motion: reduce) { + .spotlight-core, + .hero-spotlight-particles, + .arena-logo, + .arena-dust, + .arena-pressure-scan, + .btn-arena-primary, + .founder-aura, + .judge-aura, + .character-svg-founder, + .character-svg-judge, + .prop-money-bag, + .prop-pitch-deck, + .prop-cash-stack, + .prop-briefcase, + .judge-visor-svg, + .judge-sensor-svg, + .artifact, + .artifact-scanner::after { + animation: none !important; + } + + .judge-visor-svg { + opacity: 0.9 !important; + } + + .arena-pressure-scan { + opacity: 0.15 !important; + } + + .arena-cursor { + display: none !important; + } + + .arena-hook-line-accent { + visibility: visible !important; + opacity: 1 !important; + transform: none !important; + } + + .arena-landing.intro-complete .arena-support, + .arena-cta-row, + .arena-feature-chips, + .arena-landing-footer, + .arena-support { + opacity: 1 !important; + transform: none !important; + transition: none !important; + } + + .arena-cta-row.visible, + .arena-feature-chips.visible { + opacity: 1 !important; + } +} + +.btn { + border: none; + border-radius: 12px; padding: 0.85rem 1.25rem; - background: rgba(230, 57, 70, 0.92); - color: #fff; + font-weight: 700; + cursor: pointer; + transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease; +} + +.btn:hover { + transform: translateY(-1px); +} + +.btn:disabled { + opacity: 0.6; + cursor: not-allowed; +} + +.btn-primary { + color: #1a0b0d; + background: linear-gradient(135deg, var(--gold), #ffd86b); + box-shadow: 0 0 18px rgba(244, 211, 94, 0.35); +} + +.btn-secondary { + color: var(--text); + background: rgba(255, 255, 255, 0.06); + border: 1px solid var(--border); +} + +.btn-danger { + color: white; + background: linear-gradient(135deg, var(--red), #ff6b6b); + box-shadow: 0 0 18px rgba(230, 57, 70, 0.35); +} + +.btn-ghost { + background: transparent; + color: var(--muted); + border: 1px solid transparent; +} + +.btn-wide { + width: 100%; + margin-top: 1rem; +} + +.panel { + padding: 1.25rem; + margin-bottom: 1.25rem; +} + +.panel-header { + display: flex; + justify-content: space-between; + align-items: center; + gap: 1rem; +} + +.startup-form { + display: grid; + gap: 0.85rem; + margin-top: 1rem; +} + +.startup-form label { + display: grid; + gap: 0.35rem; + font-size: 0.92rem; + color: var(--muted); +} + +input, +textarea { + width: 100%; + border-radius: 10px; + border: 1px solid rgba(255, 255, 255, 0.08); + background: rgba(0, 0, 0, 0.25); + color: var(--text); + padding: 0.7rem 0.8rem; + font: inherit; +} + +.persona-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); + gap: 0.85rem; + margin-top: 1rem; +} + +.persona-card { + text-align: left; + padding: 1rem; + border-radius: 14px; + border: 1px solid rgba(255, 255, 255, 0.08); + background: rgba(0, 0, 0, 0.22); + color: var(--text); + cursor: pointer; + transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; +} + +.persona-card:hover, +.persona-card.selected { + border-color: var(--gold); + box-shadow: 0 0 16px rgba(244, 211, 94, 0.18); + transform: translateY(-2px); +} + +.persona-card h3 { + margin: 0.35rem 0; +} + +.persona-card p { + margin: 0; + color: var(--muted); + font-size: 0.9rem; +} + +.difficulty-selector { + margin-top: 1.5rem; +} + +.difficulty-selector h3 { + margin: 0 0 0.75rem; + font-size: 1rem; + color: var(--muted); + text-transform: uppercase; + letter-spacing: 0.05em; +} + +.difficulty-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); + gap: 0.75rem; +} + +.difficulty-card { + text-align: left; + padding: 0.85rem 1rem; + border-radius: 12px; + background: rgba(255, 255, 255, 0.04); + border: 1px solid var(--border); + color: var(--text); + cursor: pointer; + transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; + font: inherit; +} + +.difficulty-card:hover, +.difficulty-card.selected { + border-color: var(--gold); + box-shadow: 0 0 14px rgba(244, 211, 94, 0.15); + transform: translateY(-2px); +} + +.difficulty-card .difficulty-icon { + font-size: 1.4rem; + display: block; + margin-bottom: 0.3rem; +} + +.difficulty-card h4 { + margin: 0 0 0.2rem; + font-size: 0.95rem; +} + +.difficulty-card p { + margin: 0; + color: var(--muted); + font-size: 0.82rem; +} + +/* ================================ + Pass 3 — Live Battle Arena UI + ================================ */ + +#screen-battle.active, +#screen-deal.active { + display: block; + width: 100%; + max-width: none; +} + +/* ================================ + Pass 3B — Duel Stage Battle Arena + ================================ */ + +.battle-stage-shell { + position: relative; + z-index: 1; + width: min(1500px, calc(100vw - 48px)); + max-width: 1500px; + margin: 0 auto; + min-height: calc(100vh - 48px); + display: flex; + flex-direction: column; + gap: 16px; + padding: 0 16px 20px; +} + +.battle-hud { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: space-between; + gap: 12px 20px; + padding: 12px 18px; + border: 1px solid rgba(255, 255, 255, 0.1); + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.28); +} + +.battle-hud-main { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 10px 18px; + flex: 1 1 auto; + min-width: 0; +} + +.hud-round { + font-weight: 800; + letter-spacing: 0.08em; + color: var(--gold); + font-size: clamp(0.88rem, 1.1vw, 1rem); + white-space: nowrap; +} + +.hud-sep { + width: 1px; + height: 20px; + background: rgba(255, 255, 255, 0.12); + flex-shrink: 0; +} + +.hud-opponent { + font-weight: 700; + color: rgba(255, 255, 255, 0.92); + font-size: 0.9rem; +} + +.hud-meta { + font-size: 0.84rem; + color: var(--muted); + white-space: nowrap; +} + +.hud-meta strong { + color: #7efff0; + font-weight: 600; +} + +.hud-pressure { + display: inline-flex; + align-items: center; + gap: 8px; +} + +.hud-pressure #pressure-level { + font-size: 0.84rem; +} + +.pressure-meter-hud { + width: 72px; + margin: 0; + display: inline-block; +} + +.pressure-meter-hud .pressure-meter-track { + display: block; + height: 6px; +} + +.pressure-meter-hud .pressure-meter-fill { + display: block; + height: 100%; +} + +.hud-mode { + font-size: 0.76rem; + padding: 0.22rem 0.6rem; + border-radius: 999px; + border: 1px solid rgba(255, 255, 255, 0.1); + background: rgba(255, 255, 255, 0.04); + color: var(--muted); + white-space: nowrap; +} + +.battle-hud-actions { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 8px; + flex-shrink: 0; +} + +.duel-stage { + display: grid; + grid-template-columns: minmax(220px, 0.85fr) 110px minmax(480px, 1.9fr); + gap: 18px; + align-items: stretch; + flex: 1 1 auto; + min-height: 280px; +} + +.duel-founder-card { + padding: 18px 16px; + border: 1px solid rgba(244, 211, 94, 0.22); + background: linear-gradient(160deg, rgba(244, 211, 94, 0.07), rgba(0, 0, 0, 0.38)); + box-shadow: 0 0 28px rgba(230, 57, 70, 0.08); + display: flex; + flex-direction: column; + gap: 10px; +} + +.duel-side-label { + margin: 0; + font-size: 0.65rem; + font-weight: 700; + letter-spacing: 0.16em; + text-transform: uppercase; + color: var(--gold); +} + +.duel-founder-avatar { + position: relative; + width: 52px; + height: 52px; + margin: 4px 0; + flex-shrink: 0; +} + +.duel-avatar-ring { + position: absolute; + inset: 0; + border-radius: 50%; + border: 2px solid rgba(244, 211, 94, 0.45); + box-shadow: 0 0 16px rgba(244, 211, 94, 0.2); +} + +.duel-avatar-icon { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + border-radius: 50%; + background: rgba(244, 211, 94, 0.12); + font-weight: 800; + color: var(--gold); +} + +.founder-coach-hint { + margin: 0; + font-size: 0.84rem; + line-height: 1.45; + color: rgba(255, 255, 255, 0.78); +} + +.duel-coach-nudge { + margin: 0; + font-size: 0.8rem; + padding: 0.45rem 0.55rem; + border-left: 2px solid var(--gold); + background: rgba(244, 211, 94, 0.05); +} + +.readiness-chips { + display: flex; + flex-wrap: wrap; + gap: 6px; + margin-top: auto; + padding-top: 6px; +} + +.readiness-chip { + font-size: 0.62rem; + font-weight: 600; + letter-spacing: 0.04em; + padding: 0.18rem 0.45rem; + border-radius: 999px; + border: 1px solid rgba(255, 255, 255, 0.08); + color: rgba(255, 255, 255, 0.45); +} + +.duel-core { + display: flex; + align-items: center; + justify-content: center; +} + +.duel-pressure-ring { + position: relative; + width: 96px; + height: 96px; + border-radius: 50%; + border: 2px solid rgba(255, 255, 255, 0.12); + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 2px; + background: radial-gradient(circle, rgba(255, 255, 255, 0.04) 0%, transparent 70%); + animation: duel-core-pulse 3s ease-in-out infinite; +} + +.deal-pressure-ring { + border-color: rgba(74, 222, 128, 0.25); + animation-name: duel-core-pulse-deal; +} + +.duel-vs { + font-weight: 900; + font-size: 1.1rem; + letter-spacing: 0.12em; + color: rgba(255, 255, 255, 0.55); +} + +.duel-core-round { + font-size: 0.65rem; + font-weight: 700; + color: var(--gold); + letter-spacing: 0.08em; +} + +.duel-judge-card.judge-attack-card { + padding: 22px 26px; + border: 1px solid rgba(78, 205, 196, 0.45); + background: linear-gradient(155deg, rgba(78, 205, 196, 0.12), rgba(0, 0, 0, 0.42)); + box-shadow: + 0 0 40px rgba(78, 205, 196, 0.14), + inset 0 0 32px rgba(78, 205, 196, 0.04); +} + +.duel-judge-card .judge-question-text { + font-size: clamp(1.05rem, 1.15vw + 0.6rem, 1.38rem); + line-height: 1.55; + max-width: 58ch; +} + +.judge-attack-enter { + animation: judge-attack-enter 0.35s ease-out; +} + +@keyframes judge-attack-enter { + from { opacity: 0.65; transform: translateY(8px); } + to { opacity: 1; transform: translateY(0); } +} + +@keyframes duel-core-pulse { + 0%, 100% { box-shadow: 0 0 0 rgba(78, 205, 196, 0); } + 50% { box-shadow: 0 0 22px rgba(78, 205, 196, 0.18); } +} + +@keyframes duel-core-pulse-deal { + 0%, 100% { box-shadow: 0 0 0 rgba(74, 222, 128, 0); } + 50% { box-shadow: 0 0 22px rgba(74, 222, 128, 0.15); } +} + +.response-dock { + flex-shrink: 0; + padding: 16px 18px 18px; + border: 1px solid rgba(244, 211, 94, 0.18); + background: rgba(0, 0, 0, 0.38); + box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.2); +} + +.response-dock-label { + margin: 0 0 10px; + font-size: 0.65rem; + font-weight: 700; + letter-spacing: 0.14em; + text-transform: uppercase; + color: rgba(244, 211, 94, 0.75); +} + +.response-dock-form { + display: flex; + flex-direction: column; + gap: 0; +} + +.response-dock-form textarea { + width: 100%; + min-height: 110px; + max-height: 160px; + resize: vertical; + margin-bottom: 10px; + font-size: 0.95rem; + line-height: 1.5; +} + +.previous-rounds-drawer { + position: fixed; + inset: 0; + z-index: 2000; + display: flex; + align-items: center; + justify-content: center; + padding: 12px; + box-sizing: border-box; +} + +.conversation-split-drawer { + padding: 12px; +} + +.conversation-split-panel { + position: relative; + z-index: 1; + width: min(1180px, 100%); + height: min(92dvh, 820px); + max-height: calc(100dvh - 24px); + display: flex; + flex-direction: column; + border: 1px solid rgba(78, 205, 196, 0.2); + box-shadow: + 0 0 60px rgba(124, 58, 237, 0.12), + 0 24px 80px rgba(0, 0, 0, 0.55); + overflow: hidden; + flex-shrink: 0; +} + +.conversation-split-header { + display: flex; + justify-content: space-between; + align-items: center; + gap: 12px; + padding: 14px 18px; + border-bottom: 1px solid rgba(255, 255, 255, 0.08); + background: rgba(0, 0, 0, 0.35); + flex-shrink: 0; +} + +.conversation-split-header h3 { + margin: 0; + font-family: "Rajdhani", sans-serif; + font-size: 1.05rem; + font-weight: 700; + letter-spacing: 0.1em; + text-transform: uppercase; + color: #7efff0; +} + +.conversation-split-body { + display: grid; + grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); + flex: 1 1 auto; + min-height: 0; + overflow: hidden; +} + +.conversation-sidebar { + padding: 16px; + border-right: 1px solid rgba(255, 255, 255, 0.08); + background: + linear-gradient(180deg, rgba(168, 85, 247, 0.08) 0%, rgba(0, 0, 0, 0.35) 40%, rgba(34, 211, 238, 0.06) 100%); + overflow-x: hidden; + overflow-y: auto; + overscroll-behavior: contain; + min-height: 0; + max-height: 100%; + scrollbar-gutter: stable; +} + +.sidebar-eyebrow { + margin: 0 0 10px; + font-size: 0.68rem; + color: rgba(255, 255, 255, 0.45); +} + +.sidebar-eyebrow-score { + margin-top: 18px; +} + +.sidebar-stats { + margin: 0 0 4px; + display: grid; + gap: 8px; +} + +.sidebar-stats div { + display: flex; + justify-content: space-between; + gap: 10px; + padding: 6px 0; + border-bottom: 1px solid rgba(255, 255, 255, 0.06); + font-size: 0.78rem; +} + +.sidebar-stats dt { + margin: 0; + color: rgba(255, 255, 255, 0.4); + text-transform: uppercase; + letter-spacing: 0.05em; + font-size: 0.62rem; +} + +.sidebar-stats dd { + margin: 0; + font-weight: 700; + color: rgba(255, 255, 255, 0.9); + text-align: right; +} + +.sidebar-score-val { + color: var(--gold) !important; + font-size: 1rem; +} + +.sidebar-strong { + color: #4ade80 !important; +} + +.sidebar-weak { + color: #f87171 !important; +} + +.sidebar-attack-list { + list-style: none; + margin: 0; + padding: 0; + display: grid; + gap: 6px; +} + +.sidebar-attack-list li { + font-size: 0.72rem; + font-weight: 600; + padding: 6px 10px; + border-radius: 4px; + border: 1px solid rgba(255, 255, 255, 0.08); + color: rgba(255, 255, 255, 0.38); +} + +.sidebar-attack-list .sidebar-attack-done { + color: rgba(255, 255, 255, 0.55); + border-color: rgba(255, 255, 255, 0.1); +} + +.sidebar-attack-list .sidebar-attack-active { + color: #7efff0; + border: 2px solid rgba(34, 211, 238, 0.55); + background: rgba(34, 211, 238, 0.1); + box-shadow: 0 0 14px rgba(34, 211, 238, 0.15); +} + +.conversation-thread-wrap { + display: flex; + flex-direction: column; + min-height: 0; + max-height: 100%; + overflow: hidden; + background: rgba(0, 0, 0, 0.25); +} + +.conversation-thread-hint { + margin: 0; + padding: 6px 14px; + font-size: 0.62rem; + letter-spacing: 0.06em; + text-transform: uppercase; + color: rgba(255, 255, 255, 0.32); + border-bottom: 1px solid rgba(255, 255, 255, 0.05); + flex-shrink: 0; +} + +.conversation-thread { + flex: 1 1 auto; + overflow-x: hidden; + overflow-y: auto; + overscroll-behavior: contain; + padding: 16px 18px 20px; + display: flex; + flex-direction: column; + gap: 14px; + min-height: 0; + max-height: 100%; + scrollbar-gutter: stable; +} + +.conversation-sidebar::-webkit-scrollbar, +.conversation-thread::-webkit-scrollbar { + width: 8px; +} + +.conversation-sidebar::-webkit-scrollbar-track, +.conversation-thread::-webkit-scrollbar-track { + background: rgba(0, 0, 0, 0.2); +} + +.conversation-sidebar::-webkit-scrollbar-thumb, +.conversation-thread::-webkit-scrollbar-thumb { + background: rgba(126, 255, 240, 0.28); + border-radius: 4px; +} + +.conversation-sidebar::-webkit-scrollbar-thumb:hover, +.conversation-thread::-webkit-scrollbar-thumb:hover { + background: rgba(126, 255, 240, 0.45); +} + +.conversation-sidebar, +.conversation-thread { + scrollbar-width: thin; + scrollbar-color: rgba(126, 255, 240, 0.35) rgba(0, 0, 0, 0.2); +} + +.chat-window.conversation-thread { + margin-bottom: 0; + flex: 1 1 auto; +} + +.conv-message { + display: flex; + gap: 12px; + align-items: flex-start; + max-width: 100%; +} + +.conv-message-founder { + flex-direction: row-reverse; + align-self: flex-end; + max-width: 88%; +} + +.conv-message-judge { + align-self: flex-start; + max-width: 88%; +} + +.conv-avatar { + flex-shrink: 0; + width: 40px; + height: 44px; + border-radius: 6px; + display: grid; + place-items: center; + padding: 4px; +} + +.conv-avatar-founder-wrap { + background: rgba(168, 85, 247, 0.15); + border: 1px solid rgba(168, 85, 247, 0.35); + box-shadow: 0 0 12px rgba(168, 85, 247, 0.15); +} + +.conv-avatar-judge-wrap { + background: rgba(34, 211, 238, 0.12); + border: 1px solid rgba(34, 211, 238, 0.35); + box-shadow: 0 0 12px rgba(34, 211, 238, 0.12); +} + +.conv-avatar-svg { + width: 28px; + height: auto; + display: block; +} + +.conv-bubble { + flex: 1 1 auto; + min-width: 0; + padding: 10px 14px; + border-radius: 8px; +} + +.conv-message-judge .conv-bubble { + border: 1px solid rgba(34, 211, 238, 0.25); + background: rgba(34, 211, 238, 0.06); +} + +.conv-message-founder .conv-bubble { + border: 1px solid rgba(168, 85, 247, 0.28); + background: rgba(168, 85, 247, 0.08); +} + +.conv-bubble-head { + display: flex; + flex-wrap: wrap; + align-items: baseline; + gap: 6px 10px; + margin-bottom: 6px; +} + +.conv-speaker { + font-size: 0.68rem; + font-weight: 800; + letter-spacing: 0.08em; + text-transform: uppercase; +} + +.conv-message-judge .conv-speaker { + color: #7efff0; +} + +.conv-message-founder .conv-speaker { + color: #c084fc; +} + +.conv-meta { + font-size: 0.62rem; + color: rgba(255, 255, 255, 0.45); + letter-spacing: 0.03em; +} + +.conv-text { + margin: 0; + font-size: 0.9rem; + line-height: 1.5; + color: rgba(255, 255, 255, 0.92); + white-space: pre-wrap; +} + +.btn-conversation-review { + display: inline-flex; + align-items: center; + justify-content: center; + margin-top: 10px; + padding: 12px 22px; + min-height: 46px; + font-family: "Rajdhani", sans-serif; + font-size: 0.95rem; + font-weight: 700; + letter-spacing: 0.08em; + text-transform: uppercase; + border: 1px solid rgba(34, 211, 238, 0.45); + background: linear-gradient(180deg, rgba(34, 211, 238, 0.2), rgba(34, 211, 238, 0.08)); + color: #7efff0; + border-radius: 6px; + cursor: pointer; + box-shadow: 0 0 20px rgba(34, 211, 238, 0.15); + transition: box-shadow 0.15s, border-color 0.15s, transform 0.15s; +} + +.btn-conversation-review:hover { + border-color: rgba(126, 255, 240, 0.65); + box-shadow: 0 0 28px rgba(34, 211, 238, 0.28); + transform: translateY(-1px); +} + +.btn-arcade-end-lg { + font-size: 0.88rem; + padding: 10px 18px; + min-height: 40px; + border-width: 2px; +} + +.btn-arcade-back { + font-family: "Rajdhani", sans-serif; + font-weight: 700; + letter-spacing: 0.08em; + text-transform: uppercase; + font-size: 0.82rem; + padding: 10px 16px; + min-height: 40px; + border: 1px solid rgba(244, 211, 94, 0.45); + background: rgba(244, 211, 94, 0.1); + color: var(--gold); + border-radius: 4px; + cursor: pointer; +} + +.btn-arcade-back:hover { + background: rgba(244, 211, 94, 0.18); + box-shadow: 0 0 16px rgba(244, 211, 94, 0.2); +} + +@media (max-width: 768px) { + .conversation-split-panel { + height: calc(100dvh - 16px); + max-height: calc(100dvh - 16px); + } + + .conversation-split-body { + grid-template-columns: 1fr; + grid-template-rows: minmax(0, 34%) minmax(0, 1fr); + } + + .conversation-sidebar { + border-right: none; + border-bottom: 1px solid rgba(255, 255, 255, 0.08); + max-height: none; + } + + .conv-message-founder, + .conv-message-judge { + max-width: 100%; + } +} + +.previous-rounds-drawer[hidden] { + display: none !important; +} + +.previous-rounds-backdrop { + position: absolute; + inset: 0; + border: none; + background: rgba(0, 0, 0, 0.65); + cursor: pointer; +} + +.previous-rounds-panel { + position: relative; + z-index: 1; + width: min(720px, 100%); + max-height: min(70vh, 520px); + display: flex; + flex-direction: column; + border: 1px solid rgba(255, 255, 255, 0.12); +} + +.previous-rounds-header { + display: flex; + justify-content: space-between; + align-items: center; + gap: 12px; + padding: 14px 16px; + border-bottom: 1px solid rgba(255, 255, 255, 0.08); +} + +.previous-rounds-header h3 { + margin: 0; + font-size: 1rem; +} + +.previous-rounds-timeline { + flex: 1; + overflow-y: auto; + padding: 12px 16px 16px; + max-height: none; + min-height: 120px; +} + +.deal-terms-mini { + margin: 0; + font-size: 0.82rem; +} + +.deal-terms-mini div { + margin-bottom: 6px; +} + +.deal-terms-mini dt { + color: var(--muted); + font-size: 0.66rem; + text-transform: uppercase; + letter-spacing: 0.06em; + margin: 0; +} + +.deal-terms-mini dd { + margin: 2px 0 0; + color: rgba(255, 255, 255, 0.9); + font-weight: 600; +} + +.deal-judge-card.duel-judge-card { + border-color: rgba(74, 222, 128, 0.35); + background: linear-gradient(155deg, rgba(74, 222, 128, 0.1), rgba(0, 0, 0, 0.42)); + box-shadow: 0 0 36px rgba(74, 222, 128, 0.1); +} + +.deal-founder-card { + border-color: rgba(74, 222, 128, 0.2); + background: linear-gradient(160deg, rgba(74, 222, 128, 0.06), rgba(0, 0, 0, 0.38)); + box-shadow: 0 0 24px rgba(74, 222, 128, 0.06); +} + +body.rounds-drawer-open { + overflow: hidden; +} + +@media (max-width: 1100px) { + .duel-stage { + grid-template-columns: minmax(180px, 0.75fr) 80px minmax(320px, 1.5fr); + gap: 12px; + } +} + +@media (max-width: 900px) { + .battle-stage-shell { + width: calc(100vw - 24px); + padding: 0 8px 16px; + min-height: auto; + } + + .duel-stage { + grid-template-columns: 1fr; + min-height: auto; + } + + .duel-judge-card { + order: 1; + } + + .duel-core { + order: 2; + padding: 4px 0; + } + + .duel-founder-card { + order: 3; + flex-direction: row; + flex-wrap: wrap; + align-items: center; + gap: 12px; + } + + .duel-founder-card .founder-coach-hint, + .duel-founder-card .readiness-chips { + flex: 1 1 100%; + } + + .readiness-chips { + margin-top: 0; + } + + .duel-pressure-ring { + width: 80px; + height: 48px; + border-radius: 999px; + flex-direction: row; + gap: 10px; + } + + .battle-hud { + padding: 10px 12px; + } + + .hud-sep { + display: none; + } + + .response-action-row { + flex-direction: column; + align-items: stretch; + } + + .btn-send-answer { + width: 100%; + } +} + +@media (prefers-reduced-motion: reduce) { + .judge-attack-enter, + .duel-pressure-ring, + .duel-core-pulse, + .duel-character, + .judge-attack-glow { + animation: none !important; + } +} + +/* ================================ + Pass 3.5 — Battle Experience Upgrade + ================================ */ + +.arena-energy-lines { + position: absolute; + inset: 0; + background: + linear-gradient(105deg, transparent 42%, rgba(244, 211, 94, 0.04) 48%, transparent 54%), + linear-gradient(75deg, transparent 44%, rgba(78, 205, 196, 0.04) 50%, transparent 56%); + pointer-events: none; +} + +.arena-particles { + position: absolute; + inset: 0; + background-image: + radial-gradient(circle at 20% 30%, rgba(244, 211, 94, 0.06) 0 1px, transparent 2px), + radial-gradient(circle at 80% 25%, rgba(78, 205, 196, 0.05) 0 1px, transparent 2px), + radial-gradient(circle at 50% 70%, rgba(255, 255, 255, 0.03) 0 1px, transparent 2px); + background-size: 120px 120px, 160px 160px, 200px 200px; + opacity: 0.7; +} + +.battle-progress-strip { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: space-between; + gap: 10px 16px; + padding: 10px 16px; + border: 1px solid rgba(255, 255, 255, 0.08); +} + +.progress-strip-rounds { + display: flex; + align-items: center; + gap: 0; +} + +.progress-node { + display: inline-flex; + align-items: center; + gap: 6px; + font-size: 0.72rem; + font-weight: 700; + letter-spacing: 0.06em; + color: rgba(255, 255, 255, 0.35); + padding: 4px 8px; + border-radius: 6px; + transition: color 0.2s ease, background 0.2s ease; +} + +.progress-node-dot { + width: 8px; + height: 8px; + border-radius: 50%; + border: 1.5px solid rgba(255, 255, 255, 0.2); + background: transparent; +} + +.progress-node-active { + color: var(--gold); + background: rgba(244, 211, 94, 0.08); +} + +.progress-node-active .progress-node-dot { + border-color: var(--gold); + background: var(--gold); + box-shadow: 0 0 10px rgba(244, 211, 94, 0.5); +} + +.progress-node-done { + color: rgba(255, 255, 255, 0.55); +} + +.progress-node-done .progress-node-dot { + border-color: rgba(78, 205, 196, 0.5); + background: rgba(78, 205, 196, 0.35); +} + +.progress-connector { + width: 16px; + height: 2px; + background: rgba(255, 255, 255, 0.08); + flex-shrink: 0; +} + +.progress-strip-attacks { + display: flex; + flex-wrap: wrap; + gap: 6px; +} + +.progress-attack-tag { + font-size: 0.72rem; + font-weight: 600; + letter-spacing: 0.05em; + padding: 5px 12px; + border-radius: 4px; + border: 1px solid rgba(255, 255, 255, 0.1); + color: rgba(255, 255, 255, 0.38); + transition: border-color 0.2s, color 0.2s, box-shadow 0.2s, background 0.2s; +} + +.progress-attack-active { + font-size: 0.82rem; + font-weight: 800; + letter-spacing: 0.06em; + color: #7efff0; + border: 2px solid rgba(34, 211, 238, 0.65); + background: linear-gradient(180deg, rgba(34, 211, 238, 0.18), rgba(78, 205, 196, 0.08)); + box-shadow: + 0 0 20px rgba(34, 211, 238, 0.3), + inset 0 0 12px rgba(78, 205, 196, 0.12); + text-shadow: 0 0 10px rgba(126, 255, 240, 0.35); +} + +.progress-attack-done { + color: rgba(255, 255, 255, 0.5); + border-color: rgba(255, 255, 255, 0.12); +} + +#battle-log-ribbon { + display: none !important; +} + +.battle-log-ribbon { + display: flex; + flex-wrap: wrap; + align-items: flex-start; + gap: 10px 14px; + padding: 10px 14px; + border: 1px solid rgba(255, 255, 255, 0.08); +} + +.battle-log-ribbon[hidden] { + display: none !important; +} + +.battle-log-label { + font-size: 0.65rem; + font-weight: 700; + letter-spacing: 0.12em; + text-transform: uppercase; + color: var(--muted); + flex-shrink: 0; + padding-top: 4px; +} + +.battle-log-tabs { + display: flex; + flex-wrap: wrap; + gap: 6px; + flex: 1 1 auto; +} + +.battle-log-tab { + padding: 4px 10px; + border-radius: 6px; + border: 1px solid rgba(255, 255, 255, 0.1); + background: rgba(255, 255, 255, 0.03); + color: var(--muted); + font-size: 0.72rem; + font-weight: 700; + cursor: pointer; + transition: border-color 0.15s, color 0.15s, background 0.15s; +} + +.battle-log-tab:hover, +.battle-log-tab.active { + border-color: rgba(244, 211, 94, 0.4); + color: var(--gold); + background: rgba(244, 211, 94, 0.08); +} + +.battle-log-detail { + flex: 1 1 100%; + padding: 10px 12px; + border-radius: 8px; + border: 1px solid rgba(255, 255, 255, 0.06); + background: rgba(0, 0, 0, 0.25); + max-height: 140px; + overflow-y: auto; +} + +.battle-log-detail[hidden] { + display: none !important; +} + +.log-detail-label { + margin: 8px 0 2px; + font-size: 0.62rem; + font-weight: 700; + letter-spacing: 0.1em; + text-transform: uppercase; + color: var(--accent-cyan); +} + +.log-detail-label:first-child, +.log-detail-attack + .log-detail-label { + margin-top: 0; +} + +.log-detail-attack { + margin: 0 0 6px; + font-size: 0.72rem; + color: var(--gold); +} + +.log-detail-text { + margin: 0; + font-size: 0.82rem; + line-height: 1.45; + color: rgba(255, 255, 255, 0.88); +} + +.duel-stage-arena { + position: relative; + display: grid; + grid-template-columns: minmax(240px, 0.9fr) 130px minmax(460px, 2fr); + gap: 0; + align-items: stretch; + flex: 1 1 auto; + min-height: min(340px, 42vh); + border: 1px solid rgba(255, 255, 255, 0.06); + border-radius: 16px; + overflow: hidden; + background: rgba(0, 0, 0, 0.2); +} + +.duel-stage-beam { + position: absolute; + top: 50%; + width: 28%; + height: 2px; + transform: translateY(-50%); + pointer-events: none; + z-index: 0; +} + +.duel-beam-founder { + left: 22%; + background: linear-gradient(90deg, rgba(244, 211, 94, 0.35), transparent); +} + +.duel-beam-judge { + right: 22%; + background: linear-gradient(270deg, rgba(78, 205, 196, 0.35), transparent); +} + +.deal-beam.duel-beam-judge { + background: linear-gradient(270deg, rgba(74, 222, 128, 0.35), transparent); +} + +.duel-founder-card, +.duel-judge-card.judge-attack-card { + position: relative; + z-index: 1; + border: none; + border-radius: 0; + box-shadow: none; + min-height: 100%; +} + +.duel-founder-card { + border-right: 1px solid rgba(244, 211, 94, 0.12); + background: linear-gradient(160deg, rgba(244, 211, 94, 0.09), rgba(0, 0, 0, 0.45)); +} + +.duel-judge-card.judge-attack-card { + border-left: 1px solid rgba(78, 205, 196, 0.15); + background: linear-gradient(200deg, rgba(78, 205, 196, 0.1), rgba(0, 0, 0, 0.5)); + overflow: hidden; +} + +.deal-founder-card { + border-right-color: rgba(74, 222, 128, 0.15); + background: linear-gradient(160deg, rgba(74, 222, 128, 0.07), rgba(0, 0, 0, 0.45)); +} + +.deal-judge-card.duel-judge-card { + border-left-color: rgba(74, 222, 128, 0.15); + background: linear-gradient(200deg, rgba(74, 222, 128, 0.08), rgba(0, 0, 0, 0.5)); +} + +.duel-card-inner { + display: flex; + gap: 14px; + padding: 18px 16px; + height: 100%; + align-items: center; +} + +.judge-card-inner { + align-items: center; +} + +.duel-character { + position: relative; + flex-shrink: 0; + width: 72px; + animation: duel-char-float 4s ease-in-out infinite; +} + +.duel-svg { + width: 72px; + height: auto; + display: block; + filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4)); +} + +.duel-char-glow { + position: absolute; + inset: -8px; + border-radius: 50%; + pointer-events: none; +} + +.duel-char-glow-founder { + background: radial-gradient(circle, rgba(244, 211, 94, 0.2) 0%, transparent 70%); +} + +.duel-char-glow-judge { + background: radial-gradient(circle, rgba(78, 205, 196, 0.18) 0%, transparent 70%); +} + +.duel-char-glow-deal { + background: radial-gradient(circle, rgba(74, 222, 128, 0.15) 0%, transparent 70%); +} + +@keyframes duel-char-float { + 0%, 100% { transform: translateY(0); } + 50% { transform: translateY(-4px); } +} + +.duel-founder-body { + flex: 1 1 auto; + min-width: 0; +} + +.duel-founder-name { + margin: 0 0 6px; + font-weight: 700; + font-size: 0.95rem; + color: rgba(255, 255, 255, 0.92); +} + +.founder-coach-single { + margin: 0 0 10px; + font-size: 0.82rem; + line-height: 1.45; + color: rgba(255, 255, 255, 0.75); + padding: 8px 10px; + border-radius: 8px; + border-left: 3px solid rgba(244, 211, 94, 0.45); + background: rgba(244, 211, 94, 0.05); +} + +.coach-assist-row { + display: flex; + flex-wrap: wrap; + gap: 5px; +} + +.coach-assist-badge { + font-size: 0.62rem; + font-weight: 600; + letter-spacing: 0.03em; + padding: 3px 8px; + border-radius: 999px; + border: 1px dashed rgba(255, 255, 255, 0.12); + color: rgba(255, 255, 255, 0.45); +} + +.duel-core { + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.04) 0%, transparent 70%); + border-left: 1px solid rgba(255, 255, 255, 0.05); + border-right: 1px solid rgba(255, 255, 255, 0.05); +} + +.pressure-core-live { + position: relative; + width: 108px; + height: 108px; + border-radius: 50%; + border: 2px solid rgba(255, 255, 255, 0.15); + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 2px; + background: radial-gradient(circle, rgba(20, 28, 48, 0.9) 0%, rgba(0, 0, 0, 0.6) 100%); + box-shadow: 0 0 30px rgba(78, 205, 196, 0.12); +} + +.pressure-core-warmup { box-shadow: 0 0 28px rgba(78, 205, 196, 0.15); border-color: rgba(78, 205, 196, 0.3); } +.pressure-core-focused { box-shadow: 0 0 32px rgba(244, 211, 94, 0.2); border-color: rgba(244, 211, 94, 0.35); } +.pressure-core-high { box-shadow: 0 0 36px rgba(249, 115, 22, 0.25); border-color: rgba(249, 115, 22, 0.4); } +.pressure-core-extreme { box-shadow: 0 0 40px rgba(230, 57, 70, 0.3); border-color: rgba(230, 57, 70, 0.45); } + +.duel-core-pulse { + position: absolute; + inset: -6px; + border-radius: 50%; + border: 1px solid rgba(78, 205, 196, 0.25); + animation: duel-core-pulse-ring 2.5s ease-out infinite; + pointer-events: none; +} + +.duel-core-pulse-2 { + animation-delay: 1.25s; +} + +@keyframes duel-core-pulse-ring { + 0% { transform: scale(0.92); opacity: 0.6; } + 100% { transform: scale(1.15); opacity: 0; } +} + +.duel-pressure-label { + font-size: 0.58rem; + font-weight: 600; + letter-spacing: 0.06em; + text-transform: uppercase; + color: var(--muted); + margin-top: 2px; +} + +.judge-attack-glow { + position: absolute; + inset: 0; + background: radial-gradient(ellipse 80% 60% at 30% 50%, rgba(78, 205, 196, 0.08) 0%, transparent 60%); + pointer-events: none; + animation: judge-glow-breathe 3s ease-in-out infinite; +} + +.deal-attack-glow { + background: radial-gradient(ellipse 80% 60% at 30% 50%, rgba(74, 222, 128, 0.08) 0%, transparent 60%); +} + +@keyframes judge-glow-breathe { + 0%, 100% { opacity: 0.6; } + 50% { opacity: 1; } +} + +.judge-attack-body { + flex: 1 1 auto; + display: flex; + flex-direction: column; + justify-content: center; + min-height: 180px; + padding: 8px 12px 8px 0; +} + +.judge-attack-pill { + font-size: 0.68rem; + font-weight: 700; + letter-spacing: 0.08em; + text-transform: uppercase; + padding: 4px 10px; + border-radius: 999px; + border: 1px solid rgba(78, 205, 196, 0.45); + background: rgba(78, 205, 196, 0.1); + color: #7efff0; +} + +.deal-pill { + border-color: rgba(74, 222, 128, 0.4); + background: rgba(74, 222, 128, 0.08); + color: #86efac; +} + +.judge-question-quote { + margin: 12px 0 0; + padding: 0; + border: none; + font-size: clamp(1.08rem, 1.25vw + 0.55rem, 1.42rem); + font-weight: 600; + line-height: 1.52; + color: rgba(255, 255, 255, 0.96); + quotes: none; +} + +.duel-judge-card .judge-card-scan { + z-index: 2; +} + +.response-dock-move { + border-top: 1px solid rgba(244, 211, 94, 0.15); +} + +.response-dock-header { + display: flex; + flex-wrap: wrap; + align-items: baseline; + justify-content: space-between; + gap: 8px 16px; + margin-bottom: 10px; +} + +.response-dock-move .response-dock-label { + margin: 0; + font-size: 0.72rem; + font-weight: 800; + letter-spacing: 0.16em; + color: var(--gold); +} + +.dock-assist-hint { + margin: 0; + font-size: 0.78rem; + color: rgba(255, 255, 255, 0.45); + font-style: italic; +} + +.response-dock-move .response-dock-form textarea { + min-height: 100px; + max-height: 140px; + background: rgba(0, 0, 0, 0.35); + border-color: rgba(255, 255, 255, 0.1); +} + +@media (max-width: 900px) { + .duel-stage-arena { + grid-template-columns: 1fr; + min-height: auto; + } + + .duel-stage-beam { + display: none; + } + + .duel-core { + order: 0; + border: none; + padding: 12px 0; + background: transparent; + } + + .duel-judge-card.judge-attack-card { + order: 1; + border-left: none; + border-bottom: 1px solid rgba(78, 205, 196, 0.12); + } + + .duel-founder-card { + order: 2; + border-right: none; + border-top: 1px solid rgba(244, 211, 94, 0.12); + } + + .judge-attack-body { + min-height: auto; + padding: 12px 0; + } + + .progress-strip-attacks { + display: none; + } +} + +/* ---- Arena wrap + atmospheric scene ---- */ + +.battle-arena-wrap { + position: relative; + width: 100%; + min-height: 100vh; + padding: 24px 0 32px; + overflow: hidden; +} + +.battle-arena-scene { + position: absolute; + inset: 0; + pointer-events: none; + z-index: 0; +} + +.battle-arena-glow-left { + position: absolute; + top: 8%; + left: -8%; + width: 42%; + height: 70%; + background: radial-gradient(circle, rgba(168, 85, 247, 0.2) 0%, rgba(124, 58, 237, 0.08) 40%, transparent 68%); +} + +.battle-arena-glow-right { + position: absolute; + top: 5%; + right: -6%; + width: 40%; + height: 65%; + background: radial-gradient(circle, rgba(34, 211, 238, 0.18) 0%, rgba(78, 205, 196, 0.08) 40%, transparent 68%); +} + +.deal-glow-right { + background: radial-gradient(circle, rgba(74, 222, 128, 0.1) 0%, transparent 68%); +} + +.battle-arena-spotlight { + position: absolute; + top: 0; + left: 50%; + transform: translateX(-50%); + width: min(900px, 80vw); + height: 55%; + background: radial-gradient( + ellipse 60% 100% at 50% 0%, + rgba(244, 211, 94, 0.14) 0%, + rgba(244, 211, 94, 0.04) 45%, + transparent 72% + ); +} + +.deal-spotlight { + background: radial-gradient( + ellipse 60% 100% at 50% 0%, + rgba(74, 222, 128, 0.1) 0%, + transparent 72% + ); +} + +.battle-arena-floor { + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 38%; + background: + linear-gradient(180deg, transparent 0%, rgba(8, 12, 22, 0.85) 55%), + repeating-linear-gradient( + 90deg, + rgba(255, 255, 255, 0.025) 0, + rgba(255, 255, 255, 0.025) 1px, + transparent 1px, + transparent 48px + ); + mask-image: linear-gradient(180deg, transparent 0%, black 35%); +} + +/* ---- Main battle shell (wide arena) ---- */ + +.battle-shell, +.arena-shell.battle-arena, +.battle-arena.arena-shell { + position: relative; + z-index: 1; + width: min(1440px, calc(100vw - 48px)); + max-width: 1440px; + min-width: 0; + margin: 0 auto; + min-height: calc(100vh - 64px); + display: grid; + grid-template-columns: 280px minmax(0, 1fr); + gap: 20px; + align-items: stretch; +} + +.briefing-shell { + max-width: 1100px; + margin: 0 auto; +} + +.briefing-header { + display: flex; + justify-content: space-between; + align-items: flex-start; + gap: 1rem; + margin-bottom: 1rem; +} + +.briefing-title { + margin: 0.35rem 0 0; + font-size: clamp(1.5rem, 3vw, 1.85rem); +} + +.briefing-subtitle { + margin: 0.35rem 0 0; + color: var(--muted); + font-size: 0.92rem; + max-width: 52ch; +} + +.briefing-helper { + margin: 0.5rem 0 0; + font-size: 0.78rem; + color: rgba(244, 211, 94, 0.75); + letter-spacing: 0.04em; +} + +.briefing-grid { + display: grid; + grid-template-columns: 1.15fr 0.85fr; + gap: 1rem; + align-items: start; +} + +.briefing-panel { + margin-bottom: 0; +} + +.briefing-section-title { + margin: 0 0 0.75rem; + font-size: 0.95rem; + letter-spacing: 0.06em; + text-transform: uppercase; + color: var(--gold); +} + +.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); +} + +.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); +} + +.briefing-form .briefing-group + .briefing-group { + margin-top: 0.65rem; +} + +.btn-arena-start { + margin-top: 1.25rem; + font-weight: 800; + letter-spacing: 0.04em; +} + +.battle-arena, +.battle-layout { + display: grid; + grid-template-columns: 280px minmax(0, 1fr); + gap: 20px; + align-items: stretch; + width: 100%; +} + +.battle-sidebar, +.arena-status-card { + padding: 1.15rem 1.2rem; + 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); +} + +.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); +} + +.arena-status-list { + list-style: none; + margin: 0.35rem 0 0; + padding: 0; + display: flex; + flex-direction: column; + gap: 0.15rem; +} + +.arena-status-list li { + display: flex; + justify-content: space-between; + align-items: center; + gap: 0.75rem; + padding: 0.4rem 0; + font-size: 0.9rem; +} + +.arena-status-list li span { + color: var(--muted); + font-size: 0.8rem; +} + +.arena-status-list li strong { + text-align: right; + font-size: 0.95rem; + color: rgba(255, 255, 255, 0.92); +} + +.arena-status-pressure strong { + font-size: 1rem; +} + +.pressure-meter-sidebar { + margin: 0.15rem 0 0.35rem; +} + +.sidebar-actions { + margin-top: auto; + padding-top: 1rem; + display: flex; + flex-direction: column; + gap: 0.55rem; +} + +.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; +} + +.judge-persona-label { + font-size: 0.62rem; + letter-spacing: 0.16em; + text-transform: uppercase; + color: var(--muted); +} + +.judge-persona-card strong { + color: rgba(255, 255, 255, 0.92); + font-size: 0.95rem; +} + +.judge-persona-mode { + font-size: 0.75rem; + color: var(--accent-cyan); +} + +.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 { + 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; +} + +.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); +} + +.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; + } + + .path80-sections-compact, + .path80-retry-grid { + grid-template-columns: 1fr; + } + + .overview-answers-compact { + grid-template-columns: 1fr; + } + + .negotiation-turn { + max-width: 100%; + } +} + +@media (prefers-reduced-motion: reduce) { + .dimension-bar-fill { + transition: none !important; + } +} + +.scorecard-header { + display: flex; + justify-content: space-between; + align-items: center; + gap: 1rem; +} + +.scorecard-header-left { + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +.btn-sm { + padding: 0.3rem 0.75rem; + font-size: 0.8rem; + border-radius: 6px; + align-self: flex-start; +} + +.overall-score { + text-align: right; +} + +.overall-score strong { + display: block; + font-size: 2.5rem; + color: var(--gold); +} + +.score-bars { + display: grid; + gap: 0.9rem; + margin: 1.25rem 0; +} + +.score-row-head { + display: flex; + justify-content: space-between; + margin-bottom: 0.35rem; + text-transform: capitalize; +} + +.bar-track { + height: 10px; + border-radius: 999px; + background: rgba(255, 255, 255, 0.08); + overflow: hidden; +} + +.bar-fill { + height: 100%; + background: linear-gradient(90deg, var(--red), var(--gold)); + transition: width 0.4s ease; +} + +.score-row.score-high .bar-fill { + background: linear-gradient(90deg, #22c55e, #4ade80); +} + +.score-row.score-mid .bar-fill { + background: linear-gradient(90deg, #eab308, var(--gold)); +} + +.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; +} + +.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; +} + +.scorecard-section { + margin-top: 1.5rem; +} + +.scorecard-section-title { + margin: 0; + font-size: 1.05rem; + letter-spacing: 0.02em; +} + +.scorecard-section-desc { + margin: 0.35rem 0 0.85rem; + color: var(--muted); + font-size: 0.85rem; +} + +.feedback-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); + gap: 0.85rem; +} + +.coaching-grid { + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); +} + +.answer-compare { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + gap: 0.85rem; +} + +.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); +} + +.feedback-card-head { + display: flex; + align-items: center; + gap: 0.5rem; + margin-bottom: 0.65rem; + flex-wrap: wrap; +} + +.feedback-card h3 { + margin: 0; + font-size: 0.95rem; +} + +.feedback-icon { + 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; +} + +.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)); +} + +.coaching-card .feedback-body { + border-left: 2px solid rgba(244, 211, 94, 0.45); + padding-left: 0.75rem; +} + +.answer-card { + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +.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)); +} + +.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)); +} + +.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; +} + +.answer-badge-best { + color: #4ade80; + background: rgba(74, 222, 128, 0.12); + border: 1px solid rgba(74, 222, 128, 0.25); +} + +.answer-badge-weak { + 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); +} + +.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; +} + +.answer-quote-weak { + border-left-color: #f87171; +} + +.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; +} + +.prep-questions { + margin-top: 0; +} + +.prep-list { + margin: 0; + padding-left: 1.25rem; + display: grid; + gap: 0.55rem; +} + +.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; +} + +.scorecard-actions { + display: flex; + gap: 0.75rem; + flex-wrap: wrap; + margin-top: 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; +} + +.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); +} + +.error-banner[hidden] { + display: none; +} + +.loading-overlay { + position: fixed; + inset: 0; + background: rgba(0, 0, 0, 0.55); + display: grid; + place-items: center; + z-index: 20; +} + +.loading-overlay[hidden] { + display: none; +} + +.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; +} + +@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; +} + +.btn-path80:hover { + box-shadow: 0 0 28px rgba(125, 211, 252, 0.5); +} + +/* 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; +} + +.path80-overlay[hidden] { + display: none; +} + +.path80-panel { + width: 100%; + max-width: 680px; + padding: 1.15rem 1.2rem; + margin: auto; + max-height: min(92vh, 820px); + overflow-y: auto; +} + +.path80-header { + display: flex; + justify-content: space-between; + align-items: flex-start; + gap: 1rem; + margin-bottom: 0.85rem; +} + +.path80-title { + margin: 0; + font-size: 1.25rem; +} + +.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; + 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-score-item { + display: flex; + flex-direction: column; + align-items: center; + gap: 0.2rem; +} + +.path80-score-label { + font-size: 0.75rem; + color: var(--muted); + text-transform: uppercase; + letter-spacing: 0.05em; +} + +.path80-score-num { + font-size: 1.75rem; + color: var(--gold); + line-height: 1; +} + +.path80-sections-compact { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 0.6rem; +} + +.path80-card-compact { + padding: 0.65rem 0.75rem; +} + +.path80-card-compact .path80-card-title { + font-size: 0.82rem; + margin-bottom: 0.35rem; +} + +.path80-card-compact .path80-card-body { + font-size: 0.82rem; + line-height: 1.4; + margin: 0; +} + +.path80-card-retry-compact { + grid-column: 1 / -1; + padding: 0.75rem 0.85rem; +} + +.path80-retry-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 0.65rem; + margin-top: 0.45rem; +} + +.path80-sample-details { + margin-top: 0.55rem; + font-size: 0.82rem; +} + +.path80-sample-details summary { + cursor: pointer; + color: var(--accent-cyan); + font-weight: 600; + font-size: 0.78rem; +} + +.path80-sample-details .path80-quote { + margin-top: 0.45rem; +} + +.path80-why-hurt { + margin-top: 0.45rem; + font-size: 0.78rem; +} + +.path80-score-green { + color: #4ade80; +} + +.path80-arrow { + font-size: 1.5rem; + color: var(--muted); +} + +.path80-estimate-reason { + width: 100%; + margin: 0.5rem 0 0; + font-size: 0.88rem; + color: var(--muted); + font-style: italic; +} + +.path80-sections { + display: grid; + gap: 1rem; +} + +.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); +} + +.path80-card-alert { + border-color: rgba(230, 57, 70, 0.3); + background: rgba(230, 57, 70, 0.06); +} + +.path80-card-retry { + border-color: rgba(125, 211, 252, 0.25); + background: rgba(125, 211, 252, 0.04); +} + +.path80-card-title { + margin: 0 0 0.65rem; + font-size: 1rem; + color: var(--gold); +} + +.path80-card-alert .path80-card-title { + color: #fb7185; +} + +.path80-card-retry .path80-card-title { + color: #7dd3fc; +} + +.path80-card-body { + margin: 0; + line-height: 1.55; + font-size: 0.95rem; +} + +.path80-muted { + color: var(--muted); +} + +.path80-retry-meta { + display: flex; + gap: 0.6rem; + align-items: center; + margin-bottom: 0.85rem; + flex-wrap: wrap; +} + +.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; +} + +.path80-round-tag { + font-size: 0.78rem; + color: var(--muted); +} + +.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; +} + +.path80-quote { + margin: 0; + padding: 0.65rem 0.9rem; + border-radius: 8px; + font-size: 0.92rem; + line-height: 1.5; + font-style: italic; +} + +.path80-quote-weak { + background: rgba(230, 57, 70, 0.08); + border-left: 3px solid rgba(230, 57, 70, 0.5); + color: var(--muted); +} + +.path80-quote-strong { + background: rgba(74, 222, 128, 0.07); + border-left: 3px solid rgba(74, 222, 128, 0.45); + color: var(--text); +} + +.path80-footer { + margin-top: 1.5rem; + display: flex; + flex-wrap: wrap; + gap: 0.65rem; + justify-content: flex-end; +} + +.btn-retry-start { + background: linear-gradient(135deg, #0ea5e9, #06b6d4); + color: #041018; + border: none; + font-weight: 700; +} + +.btn-retry-start:hover { + filter: brightness(1.08); +} + +.btn-retry-submit { + background: linear-gradient(135deg, #0ea5e9, #06b6d4); + color: #041018; + border: none; + font-weight: 700; + margin-top: 0.75rem; +} + +/* 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; +} + +.retry-overlay[hidden] { + display: none; +} + +.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); +} + +.retry-header { + display: flex; + justify-content: space-between; + gap: 1rem; + margin-bottom: 1rem; +} + +.retry-title { + margin: 0; + font-size: 1.35rem; +} + +.retry-subtitle { + margin: 0.25rem 0 0; + color: #67e8f9; + font-size: 0.9rem; +} + +.retry-cards { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); + gap: 0.75rem; + margin-bottom: 1rem; +} + +.retry-card { + padding: 0.85rem; + border-radius: 10px; + background: rgba(0, 0, 0, 0.25); + border: 1px solid rgba(255, 255, 255, 0.08); +} + +.retry-card h3, +.retry-card h4 { + margin: 0 0 0.45rem; + font-size: 0.82rem; + text-transform: uppercase; + letter-spacing: 0.04em; + color: #67e8f9; +} + +.retry-card-body { + margin: 0; + font-size: 0.92rem; + line-height: 1.5; +} + +.retry-card-weak { + border-color: rgba(248, 113, 113, 0.35); +} + +.retry-card-strong { + border-color: rgba(74, 222, 128, 0.35); +} + +.retry-card-tip { + border-color: rgba(244, 211, 94, 0.3); +} + +.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; +} + +.retry-quote-strong { + border-left-color: rgba(74, 222, 128, 0.45); + background: rgba(74, 222, 128, 0.06); +} + +.retry-answer-area { + margin-top: 0.5rem; + padding-top: 0.75rem; + border-top: 1px solid rgba(14, 165, 233, 0.2); +} + +.retry-input-label { + display: block; + font-size: 0.82rem; + color: var(--muted); + margin-bottom: 0.35rem; +} + +.retry-input-row { + display: flex; + align-items: center; + gap: 0.5rem; + margin-bottom: 0.5rem; +} + +#retry-answer-input { + width: 100%; + resize: vertical; + min-height: 4.5rem; +} + +.retry-voice-preview { + margin-top: 0.5rem; +} + +.retry-vs-grid, +.retry-feedback-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: 0.75rem; + margin-bottom: 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); +} + +.retry-dim-estimate, +.retry-overall-lift { + font-size: 0.9rem; + font-weight: 600; +} + +.retry-overall-lift { + color: var(--gold); +} + +.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; +} + +.verdict-improved { + background: rgba(74, 222, 128, 0.2); + color: #86efac; +} + +.verdict-slightly_improved { + background: rgba(14, 165, 233, 0.2); + color: #67e8f9; +} + +.verdict-needs_more_work { + background: rgba(248, 113, 113, 0.18); + color: #fca5a5; +} + +.retry-next-prompt { + font-size: 0.88rem; + color: var(--muted); + margin: 0 0 0.75rem; +} + +.retry-result-actions { + display: flex; + flex-wrap: wrap; + gap: 0.6rem; + justify-content: flex-end; +} + +/* Phase 9 — Judge Verdict + Deal Arena */ +.judge-verdict-section { + margin-top: 0.5rem; +} + +.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); +} + +.judge-verdict-head { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; + margin-bottom: 0.75rem; +} + +.verdict-persona-badge { + font-size: 0.85rem; + font-weight: 700; + color: var(--gold); +} + +.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; +} + +.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; +} + +.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; +} + +.verdict-meta-grid span { + display: block; + color: var(--muted); + font-size: 0.75rem; + margin-bottom: 0.15rem; +} + +.verdict-opening-offer { + font-size: 0.88rem; + color: #67e8f9; + margin: 0 0 0.75rem; +} + +.verdict-actions { + display: flex; + flex-wrap: wrap; + gap: 0.55rem; + margin-top: 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-deal-send { + background: linear-gradient(135deg, #0ea5e9, #06b6d4); + color: #041018; + border: none; + font-weight: 700; +} + +.deal-meta .deal-context-item strong { + font-size: 0.82rem; + line-height: 1.35; +} + +.deal-chat { + border: 1px solid rgba(14, 165, 233, 0.2); +} + +.combined-scores { + display: flex; + flex-wrap: wrap; + gap: 1rem; + align-items: center; +} + +.combined-score-item { + text-align: center; +} + +.combined-score-item span { + display: block; + font-size: 0.75rem; + color: var(--muted); +} + +.combined-score-item strong { + font-size: 1.6rem; + color: var(--gold); +} + +.combined-highlight strong { + color: #67e8f9; +} + +.combined-profile { + font-size: 1.05rem; + font-weight: 600; + margin: 0.75rem 0 0.35rem; +} + +.combined-summary, +.combined-next-action { + color: var(--muted); + line-height: 1.5; +} + +.deal-outcome-row { + display: flex; + align-items: center; + gap: 0.65rem; + margin-bottom: 0.75rem; +} + +.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; +} + +.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; +} + +.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; +} + +.start-method-card.selected { + border-color: rgba(125, 211, 252, 0.45); + box-shadow: 0 0 20px rgba(125, 211, 252, 0.12); +} + +.start-method-card h3 { + margin: 0.35rem 0 0.25rem; + font-size: 1rem; +} + +.start-method-card p { + margin: 0; + color: var(--muted); + font-size: 0.85rem; + line-height: 1.4; +} + +.start-method-icon { + font-size: 1.4rem; +} + +.voice-panel { + max-width: 640px; + margin: 0 auto; +} + +.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; +} + +.voice-hint { + color: var(--muted); + margin: 0.5rem 0 0; + font-size: 0.82rem; +} + +.voice-recorder { + display: flex; + flex-direction: column; + align-items: center; + gap: 0.65rem; + padding: 1.5rem 0; +} + +.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; +} + +.voice-mic-btn-sm { + width: 48px; + height: 48px; + font-size: 0.9rem; +} + +.voice-mic-btn:hover { + transform: scale(1.04); + box-shadow: 0 0 32px rgba(125, 211, 252, 0.35); +} + +.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; +} + +.voice-mic-btn .mic-ring { + position: absolute; + inset: -6px; + border-radius: 50%; + border: 2px solid transparent; +} + +.voice-mic-btn.recording .mic-ring { + border-color: rgba(248, 113, 113, 0.35); + animation: voice-ring 1.2s ease-out infinite; +} + +@keyframes voice-pulse { + 0%, 100% { transform: scale(1); } + 50% { transform: scale(1.06); } +} + +@keyframes voice-ring { + 0% { transform: scale(1); opacity: 0.8; } + 100% { transform: scale(1.35); opacity: 0; } +} + +.voice-timer { + font-size: 1.25rem; + font-weight: 700; + color: #7dd3fc; + font-variant-numeric: tabular-nums; +} + +.voice-timer-inline { + font-size: 0.85rem; + min-width: 2.5rem; +} + +.voice-status { + font-size: 0.82rem; + color: #f87171; + min-height: 1.2em; +} + +.voice-transcript-card { + padding: 1rem; + border-radius: 10px; + margin-bottom: 1rem; +} + +.voice-transcript-text { + margin: 0.5rem 0; + line-height: 1.55; + font-size: 0.92rem; +} + +.voice-delivery-note { + margin: 0.35rem 0 0; + font-size: 0.85rem; + color: var(--muted); +} + +.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; +} + +.delivery-chip.confidence-low { + background: rgba(248, 113, 113, 0.12); + border-color: rgba(248, 113, 113, 0.35); + color: #f87171; +} + +.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; + font-size: 0.88rem; + margin-bottom: 0.85rem; +} + +.voice-confirm-actions { + display: flex; + gap: 0.75rem; + flex-wrap: wrap; + margin-top: 1rem; +} + +.battle-input-tabs { + display: flex; + align-items: center; + gap: 0.5rem; + flex-wrap: wrap; + margin-bottom: 0.5rem; + padding: 0.35rem 0; +} + +.input-tab-label { + font-size: 0.8rem; + color: var(--muted); + margin-right: 0.25rem; +} + +.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); +} + +.voice-turn-preview h4 { + margin: 0 0 0.5rem; + font-size: 0.85rem; + color: #7dd3fc; +} + +.voice-turn-preview textarea { + width: 100%; + margin-bottom: 0.5rem; +} + +.voice-turn-actions { + display: flex; + gap: 0.5rem; + margin-top: 0.5rem; +} + +.voice-delivery-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); + gap: 0.65rem; +} + +.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); +} + +.voice-delivery-stat span { + display: block; + font-size: 0.72rem; + color: var(--muted); + text-transform: uppercase; + letter-spacing: 0.03em; +} + +.voice-delivery-stat strong { + display: block; + margin-top: 0.25rem; + font-size: 0.9rem; +} + +.voice-delivery-notes { + grid-column: 1 / -1; + margin: 0.5rem 0 0; + padding-left: 1.1rem; + font-size: 0.88rem; + color: var(--muted); +} + +.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; +} + +@media (max-width: 820px) { + .battle-layout { + grid-template-columns: 1fr; + } + + .chat-input-row { + grid-template-columns: 1fr; + } + + .path80-score-bar { + flex-direction: column; + align-items: flex-start; + gap: 0.5rem; + } + + .path80-arrow { + transform: rotate(90deg); + } + + .voice-mic-btn { + width: 72px; + height: 72px; + } +} + +/* ---- 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; +} + +.deal-readiness-prompt p { + margin: 0 0 0.6rem; + color: var(--gold); + font-size: 0.9rem; +} + +.deal-readiness-actions { + display: flex; + gap: 0.6rem; + flex-wrap: wrap; +} + +.scorecard-meta { + margin: 0.75rem 0 0; + font-size: 0.75rem; + color: rgba(226, 232, 240, 0.6); +} + +.scorecard-meta[hidden] { + display: none; +} + +/* ---- 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; +} + +.negotiation-overlay[hidden] { + display: none; +} + +.negotiation-panel { + width: 100%; + max-width: 720px; + padding: 1.5rem; + margin: auto; +} + +.negotiation-header { + display: flex; + justify-content: space-between; + align-items: center; + gap: 1rem; + margin-bottom: 1rem; +} + +.negotiation-header h2 { + margin: 0; + color: var(--gold); +} + +.negotiation-transcript { + max-height: 60vh; + overflow-y: auto; + display: flex; + flex-direction: column; + gap: 0.75rem; + padding-right: 0.4rem; +} + +.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); +} + +.negotiation-turn.negotiation-founder { + border-left: 3px solid var(--gold); +} + +.negotiation-turn.negotiation-judge { + border-left: 3px solid rgba(96, 165, 250, 0.7); +} + +.negotiation-turn-head { + display: flex; + justify-content: space-between; + align-items: center; + gap: 0.5rem; + margin-bottom: 0.35rem; +} + +.negotiation-speaker { + font-size: 0.78rem; + font-weight: 600; + color: rgba(226, 232, 240, 0.85); +} + +.negotiation-badges { + display: flex; + gap: 0.35rem; + flex-wrap: wrap; +} + +.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); +} + +.neg-tag { + background: rgba(96, 165, 250, 0.22); +} + +.neg-voice { + background: rgba(244, 211, 94, 0.22); + color: var(--gold); +} + +.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; +} + +.negotiation-empty { + color: rgba(226, 232, 240, 0.6); + text-align: center; + padding: 1.5rem; +} + +.negotiation-footer { + margin-top: 1rem; + display: flex; + justify-content: flex-end; +} + +/* ---- 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; +} + +.answer-hint[hidden] { display: none; } + +.answer-hint-tag { + font-size: 0.65rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.04em; + padding: 0.1rem 0.45rem; + border-radius: 999px; + background: rgba(96, 165, 250, 0.22); + color: #93c5fd; +} + +.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; +} + +.micro-coach[hidden] { display: none; } + +/* ================================ + Pass 3.6 — Futuristic Arcade HUD + ================================ */ + +.hud-font { + font-family: "Rajdhani", var(--font-sans, system-ui), sans-serif; + font-weight: 700; + letter-spacing: 0.06em; + text-transform: uppercase; +} + +.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; +} + +.arcade-shell { + position: relative; + isolation: isolate; + gap: 12px; +} + +.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; +} + +.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; +} + +.arcade-shell > *:not(.arcade-grid-bg):not(.arcade-scanlines) { + position: relative; + z-index: 1; +} + +.arcade-shell > .micro-coach, +.arcade-shell > .answer-hint { + display: none !important; +} + +/* ---- 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; + flex-direction: column; + justify-content: center; + gap: 2px; + padding: 8px 14px; + border-right: 1px solid rgba(78, 205, 196, 0.12); + min-width: 0; +} + +.hud-cell:last-child { + border-right: none; +} + +.hud-cell-label { + font-size: 0.58rem; + font-weight: 700; + letter-spacing: 0.14em; + text-transform: uppercase; + color: rgba(255, 255, 255, 0.38); +} + +.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; +} + +.hud-cell-round .hud-cell-value { + font-size: 1.35rem; + color: var(--gold); + text-shadow: 0 0 16px rgba(244, 211, 94, 0.35); +} + +.hud-accent-cyan { + color: #7efff0 !important; + text-shadow: 0 0 10px rgba(126, 255, 240, 0.25); +} + +.hud-cell-meter { + min-width: 120px; +} + +.hud-cell-combo { + min-width: 100px; +} + +.hud-cell-actions { + flex-direction: row; + align-items: center; + gap: 8px; + padding: 8px 12px; +} + +.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; +} + +.arcade-meter-fill { + display: block; + height: 100%; + width: 72%; + border-radius: 1px; + transition: width 0.45s ease; +} + +.confidence-fill { + background: linear-gradient(90deg, #22c55e, #4ade80); + box-shadow: 0 0 12px rgba(74, 222, 128, 0.45); +} + +.confidence-fill.confidence-mid { + background: linear-gradient(90deg, #eab308, #facc15); + box-shadow: 0 0 12px rgba(250, 204, 21, 0.35); +} + +.confidence-fill.confidence-low { + background: linear-gradient(90deg, #ef4444, #f97316); + box-shadow: 0 0 12px rgba(249, 115, 22, 0.35); +} + +.combo-meter { + display: flex; + gap: 4px; + align-items: center; +} + +.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; +} + +.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); +} + +.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; +} + +.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); +} + +.arcade-progress .progress-strip-attacks { + gap: 8px; +} + +/* ---- 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); +} + +.fighter-row { + display: grid; + grid-template-columns: 1fr auto 1fr; + align-items: stretch; + gap: 12px 20px; +} + +.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; +} + +.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); +} + +.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); +} + +.fighter-avatar-wrap { + position: relative; + width: 64px; + height: 70px; +} + +.holo-avatar { + width: 64px; + height: auto; + display: block; + filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.5)); +} + +.fighter-avatar-glow { + position: absolute; + inset: -6px; + border-radius: 50%; + pointer-events: none; +} + +.founder-glow { + background: radial-gradient(circle, rgba(168, 85, 247, 0.28) 0%, transparent 70%); +} + +.judge-glow { + background: radial-gradient(circle, rgba(34, 211, 238, 0.22) 0%, transparent 70%); +} + +.fighter-label-box { + text-align: center; + line-height: 1.2; +} + +.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); +} + +.fighter-name { + display: block; + font-size: 0.92rem; + font-weight: 700; + color: rgba(255, 255, 255, 0.9); +} + +.judge-label-box .fighter-name { + color: #7efff0; +} + +.signal-stats { + list-style: none; + margin: 4px 0 0; + padding: 0; + width: 100%; + max-width: 220px; + flex: 1 1 auto; +} + +.signal-stats li { + 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); +} + +.signal-stats li span { + color: rgba(255, 255, 255, 0.38); +} + +.signal-stats li strong { + color: #7efff0; + font-weight: 700; +} + +.founder-signals li strong { + color: #c084fc; +} + +/* ---- 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; +} + +.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); +} + +.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; +} + +.duel-node-pressure { + font-size: 0.58rem; font-weight: 600; + letter-spacing: 0.08em; + text-transform: uppercase; + color: rgba(255, 255, 255, 0.45); +} + +.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; +} + +.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); +} + +.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); +} + +.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; +} + +@keyframes duel-node-pulse { + 0%, 100% { opacity: 0.5; } + 50% { opacity: 1; } +} + +/* ---- 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; +} + +.attack-card-banner { + padding: 6px 14px; text-align: center; - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35); + 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); } -.error-banner[hidden] { - display: none; +.attack-card-inner { + position: relative; + z-index: 1; + padding: 20px 24px 24px; + text-align: center; } -.loading-overlay { - position: fixed; +.attack-card-tag { + display: inline-block; + margin-bottom: 12px; +} + +.attack-card-question { + margin: 0; + 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; +} + +.attack-card-glow { + position: absolute; inset: 0; - background: rgba(0, 0, 0, 0.55); - display: grid; - place-items: center; - z-index: 20; + 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; } -.loading-overlay[hidden] { - display: none; +.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; } -.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; +@keyframes judge-scan-sweep { + 0% { background-position: 0 -100%; } + 100% { background-position: 0 200%; } } -@keyframes spin { - to { transform: rotate(360deg); } +.attack-card-arena.judge-attack-enter { + animation: attack-card-enter 0.45s ease-out; } -@media (max-width: 820px) { - .battle-layout { - grid-template-columns: 1fr; +@keyframes attack-card-enter { + from { opacity: 0; transform: translateY(8px) scale(0.98); } + to { opacity: 1; transform: none; } +} + +/* ---- 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); +} + +/* ---- 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; +} + +.unified-dock .dock-unified-header { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: space-between; + gap: 8px 16px; + padding: 10px 16px; + 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; +} + +.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; + flex-shrink: 0; + white-space: nowrap; +} + +.btn-arcade-log-inline:hover { + border-color: rgba(244, 211, 94, 0.35); + color: var(--gold); +} + +.unified-dock .response-dock-form, +.unified-dock .voice-turn-preview { + padding: 12px 16px 16px; +} + +.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); +} + +.unified-dock .dock-assist-hint { + margin: 0; + font-size: 0.78rem; + color: rgba(255, 255, 255, 0.45); + font-style: italic; +} + +.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; +} + +.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); +} + +.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; +} + +.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; +} + +.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); +} + +.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; +} + +.btn-arcade-voice.recording .arcade-voice-ring { + border-color: rgba(248, 113, 113, 0.4); + animation: voice-ring 1.2s ease-out infinite; +} + +.arcade-voice-ring { + position: absolute; + inset: -4px; + border-radius: 6px; + border: 2px solid transparent; + pointer-events: none; +} + +.arcade-voice-icon { + width: 20px; + height: 20px; + flex-shrink: 0; + filter: drop-shadow(0 0 6px rgba(126, 255, 240, 0.35)); +} + +.btn-arcade-voice.recording .arcade-voice-icon { + filter: drop-shadow(0 0 6px rgba(248, 113, 113, 0.45)); +} + +.arcade-voice-label { + white-space: nowrap; +} + +.btn-arcade-send { + font-family: "Rajdhani", sans-serif; + font-weight: 700; + letter-spacing: 0.1em; + 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; +} + +.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)); +} + +.btn-arcade-send:disabled { + opacity: 0.4; + cursor: not-allowed; +} + +.arcade-dock .hint-chips { + display: inline-flex; + flex-wrap: wrap; + gap: 4px; + margin-left: 8px; +} + +.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); + cursor: pointer; +} + +.arcade-dock .hint-chip:hover { + border-color: rgba(244, 211, 94, 0.45); + color: var(--gold); +} + +.voice-timer-inline.hud-font { + font-size: 0.82rem; + color: rgba(255, 255, 255, 0.55); +} + +/* ---- 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; +} + +.deal-arcade-shell .arcade-hud, +.deal-arcade-shell .attack-card-arena { + border-color: rgba(74, 222, 128, 0.22); +} + +@media (max-width: 960px) { + .arcade-hud { + grid-template-columns: repeat(3, 1fr); } - .chat-input-row { + .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; + } + + .duel-node { + order: -1; + flex-direction: row; + gap: 10px; + padding: 8px; + } + + .duel-node-ring { + display: none; + } + + .attack-card-arena { + width: 100%; + } +} + +@media (max-width: 560px) { + .arcade-hud { + grid-template-columns: 1fr 1fr; + } + + .hud-cell-round { + grid-column: 1 / -1; + } + + .signal-stats { + max-width: 100%; + } + + .arcade-dock .hint-chips { + margin-left: 0; + margin-top: 6px; + } + + .btn-arcade-voice { + width: 100%; + justify-content: center; + } +} + +@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; } }