:root { /* 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); /* Landing — HF-safe viewport (JS sets --landing-vh from innerHeight) */ --landing-vh: 100svh; --landing-safe-pad-y: clamp(12px, 2vh, 28px); --landing-safe-pad-x: clamp(12px, 2vw, 24px); } * { box-sizing: border-box; } html { width: 100%; max-width: 100%; height: 100%; margin: 0; padding: 0; overflow-x: hidden; } body { margin: 0; padding: 0; min-height: 100%; width: 100%; max-width: 100%; overflow-x: hidden; font-family: "Segoe UI", system-ui, sans-serif; color: var(--text); background: var(--bg-deep); font-size: 14px; line-height: 1.5; } html:has(#screen-landing.active) { height: var(--landing-vh, 100svh); height: var(--landing-vh, 100dvh); overflow: hidden; } body:has(#screen-landing.active) { overflow: hidden; min-height: var(--landing-vh, 100svh); min-height: var(--landing-vh, 100dvh); height: var(--landing-vh, 100svh); height: var(--landing-vh, 100dvh); } body:has(#screen-setup.active) { overflow: hidden; } .bg-glow { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(circle at 15% 20%, rgba(230, 57, 70, 0.18), transparent 35%), radial-gradient(circle at 85% 10%, rgba(244, 211, 94, 0.12), transparent 30%); } .app { position: relative; width: min(1280px, calc(100vw - 32px)); max-width: 100%; margin: 0 auto; padding: clamp(1rem, 2vw, 1.5rem) clamp(0.75rem, 2vw, 1rem) clamp(1.25rem, 3vw, 2rem); } .app:has(#screen-battle.active), .app:has(#screen-deal.active), .app:has(#screen-landing.active), .app:has(#screen-setup.active), .app.app-arena-fullwidth:not(.app-scorecard-fullwidth) { max-width: none !important; width: 100% !important; padding: 0 !important; margin: 0 !important; } .app:has(#screen-landing.active) { display: flex; flex-direction: column; min-height: var(--landing-vh, 100svh); min-height: var(--landing-vh, 100dvh); height: var(--landing-vh, 100svh); height: var(--landing-vh, 100dvh); max-height: var(--landing-vh, 100svh); max-height: var(--landing-vh, 100dvh); overflow: hidden; } .app:has(#screen-setup.active) { min-height: calc(100dvh - 56px); } .screen { display: none; } .screen.active { display: block; } .glass { background: var(--bg-panel); border: 1px solid var(--border); border-radius: 18px; backdrop-filter: blur(12px); box-shadow: var(--shadow); } .hero { text-align: center; padding: 2rem 1rem; } .logo { width: 88px; height: 88px; margin-bottom: 1rem; } h1 { margin: 0; font-size: clamp(2rem, 5vw, 3rem); letter-spacing: 0.02em; } .tagline { font-size: 1.15rem; color: var(--gold); margin: 0.75rem 0 0.35rem; } .subtitle { color: var(--muted); margin: 0; } .hero-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 2rem; } /* ================================ PitchFight Arena Landing (Pass 1) ================================ */ #screen-landing.active { display: flex; flex-direction: column; flex: 1 1 auto; width: 100%; min-height: 100%; overflow: hidden; } .arena-landing { position: relative; width: 100%; flex: 1 1 auto; min-height: 100%; box-sizing: border-box; padding: var(--landing-safe-pad-y) var(--landing-safe-pad-x); margin: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--bg-deep); } /* ---- Landing Scene Layers (Pass 1.5) ---- */ .arena-scene { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; } .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%); } .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; } .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; } .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; } @keyframes spotlight-shimmer { 0%, 100% { opacity: 0.92; } 50% { opacity: 1; } } @keyframes hero-particles-float { 0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.6; } 50% { transform: translateX(-50%) translateY(-8px); opacity: 0.85; } } .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; flex-direction: column; align-items: center; } .founder-silhouette { left: clamp(5%, 11vw, 14%); width: clamp(150px, 19vw, 228px); height: clamp(240px, 29vw, 350px); } .judge-silhouette { right: clamp(5%, 11vw, 14%); width: clamp(160px, 20vw, 245px); height: clamp(250px, 30vw, 365px); } .character-svg { width: 100%; height: auto; position: relative; z-index: 1; } .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)); } .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)); } /* 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; } .character-label-founder { color: rgba(244, 211, 94, 0.6); text-shadow: 0 0 12px rgba(244, 211, 94, 0.3); } .character-label-judge { color: rgba(78, 205, 196, 0.65); text-shadow: 0 0 12px rgba(78, 205, 196, 0.35); } .character-shadow { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 90%; height: 12px; border-radius: 50%; filter: blur(4px); z-index: 0; } .character-shadow-founder { background: radial-gradient(ellipse, rgba(244, 211, 94, 0.15) 0%, rgba(0, 0, 0, 0.5) 55%, transparent 75%); } .character-shadow-judge { background: radial-gradient(ellipse, rgba(78, 205, 196, 0.12) 0%, rgba(0, 0, 0, 0.5) 55%, transparent 75%); } /* ---- 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; } /* ---- Judge aura ---- */ .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; } @keyframes judge-aura-scan { 0%, 100% { opacity: 0.75; transform: translateX(-50%) scale(1); } 50% { opacity: 1; transform: translateX(-50%) scale(1.04); } } /* ---- SVG prop animations ---- */ .prop-money-bag { animation: money-bag-sway 3.5s ease-in-out infinite; transform-origin: 30px 185px; } .prop-pitch-deck { animation: pitch-deck-tilt 4s ease-in-out infinite; transform-origin: 106px 132px; } .prop-cash-stack { animation: cash-shimmer 2.8s ease-in-out infinite; } .prop-briefcase { animation: briefcase-pulse 3.2s ease-in-out infinite; } .judge-visor-svg { animation: judge-visor-pulse-svg 3s ease-in-out infinite; } .judge-sensor-svg { animation: judge-sensor-blink-svg 2.5s step-end infinite; } .judge-sensor-svg:nth-of-type(2) { animation-delay: 0.8s; } .judge-sensor-svg:nth-of-type(3) { animation-delay: 1.4s; } @keyframes founder-breathe { 0%, 100% { opacity: 0.8; transform: translateX(-50%) scale(1); } 50% { opacity: 1; transform: translateX(-50%) scale(1.05); } } @keyframes founder-svg-breathe { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } } @keyframes judge-svg-idle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } } @keyframes money-bag-sway { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } } @keyframes pitch-deck-tilt { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(2deg); } } @keyframes cash-shimmer { 0%, 100% { opacity: 0.85; } 50% { opacity: 1; } } @keyframes briefcase-pulse { 0%, 100% { opacity: 0.9; } 50% { opacity: 1; filter: brightness(1.15); } } @keyframes judge-visor-pulse-svg { 0%, 100% { opacity: 0.8; } 50% { opacity: 1; } } @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; } .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; } .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; } .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; } .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; } .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; } .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); } .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; 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; width: 100%; max-width: 820px; max-height: 100%; padding: clamp(0.5rem, 1.5vh, 1rem) clamp(0.85rem, 2.5vw, 1.25rem); transform-origin: center center; overflow: hidden; } .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 clamp(0.6rem, 2vw, 1rem); font-size: clamp(2rem, 6vw, 3.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: clamp(3rem, 8vw, 4rem); margin-bottom: clamp(0.5rem, 1.5vw, 0.75rem); } .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 clamp(0.75rem, 2vw, 1rem); 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: clamp(0.65rem, 2vw, 1rem); padding-bottom: 0.35rem; 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: clamp(0.85rem, 2vw, 1.25rem); padding-top: clamp(0.65rem, 1.5vw, 0.9rem); padding-bottom: 0.35rem; border-top: 1px solid rgba(255, 255, 255, 0.1); 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.78rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(126, 255, 240, 0.85); text-shadow: 0 0 18px rgba(0, 230, 200, 0.2); } .arena-footer-line { margin: 0.55rem auto 0; max-width: 480px; font-size: 0.88rem; font-weight: 500; color: rgba(255, 255, 255, 0.62); line-height: 1.5; } @keyframes arena-spotlight-pulse { 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-height: 860px) { .arena-landing-content { transform: scale(0.96); } } @media (max-width: 640px) { .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; } .arena-landing-content { transform: none !important; } } .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; } .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(160px, 1fr)); gap: 0.6rem; margin-top: 0.65rem; } .persona-card { text-align: left; padding: 0.75rem 0.85rem; 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: 1rem; } .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(150px, 1fr)); gap: 0.55rem; } .difficulty-card { text-align: left; padding: 0.65rem 0.8rem; 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: 100%; max-width: 100%; margin: 0 auto; min-height: auto; display: flex; flex-direction: column; gap: 10px; padding: 0 clamp(16px, 2.5vw, 32px) 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(80vh, 720px); max-height: min(80vh, 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: 13px; font-weight: 500; line-height: 1.45; color: rgba(255, 255, 255, 0.72); font-style: normal; } .response-dock-move .response-dock-form textarea { 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: auto; padding: 12px 0 20px; overflow: visible; } .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(1360px, calc(100vw - 32px)); max-width: 1360px; min-width: 0; margin: 0 auto; min-height: 0; display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 16px; align-items: stretch; } .briefing-shell { max-width: 1100px; margin: 0 auto; } #screen-setup.active { display: flex; flex-direction: column; align-items: center; justify-content: center; box-sizing: border-box; width: 100%; min-height: calc(100dvh - 56px); max-height: calc(100dvh - 56px); overflow-x: hidden; overflow-y: auto; padding: clamp(1rem, 2vh, 1.75rem) clamp(1rem, 2.5vw, 1.75rem) clamp(2.5rem, 6vh, 4.5rem); } #screen-setup.active .briefing-shell-wide { width: 100%; max-width: min(1400px, calc(100vw - 2.5rem)); margin: 0 auto; padding: 0; transform: translateY(clamp(-4px, -0.75vh, -10px)); } .briefing-shell-wide { max-width: min(1400px, calc(100vw - 2.5rem)); width: 100%; margin: 0 auto; } .app:has(#screen-scorecard.active), .app.app-scorecard-fullwidth { max-width: none !important; width: 100% !important; padding: clamp(0.5rem, 1.2vw, 0.85rem) !important; } .briefing-mode-tabs { display: flex; gap: 0.45rem; margin-bottom: clamp(0.9rem, 1.8vh, 1.2rem); flex-wrap: wrap; } .briefing-mode-tab { flex: 1; min-width: 140px; padding: 0.65rem 1rem; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.25); color: var(--muted); font-weight: 700; font-size: 0.92rem; letter-spacing: 0.04em; cursor: pointer; transition: border-color 0.2s, color 0.2s, background 0.2s, box-shadow 0.2s; } .briefing-mode-tab:hover { border-color: rgba(244, 211, 94, 0.35); color: var(--text); } .briefing-mode-tab.active { border-color: rgba(244, 211, 94, 0.65); background: linear-gradient(135deg, rgba(244, 211, 94, 0.14), rgba(0, 0, 0, 0.35)); color: var(--gold); box-shadow: 0 0 24px rgba(244, 211, 94, 0.12); } .briefing-grid-wide { grid-template-columns: minmax(0, 1.12fr) minmax(300px, 0.88fr); gap: clamp(0.85rem, 1.6vw, 1.1rem); align-items: stretch; } .briefing-left-col { display: flex; flex-direction: column; min-height: 100%; min-width: 0; overflow: visible; } .briefing-left-col > .panel { min-height: 0; } .briefing-left-col > .panel:not([hidden]) { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 100%; } .briefing-left-col.mode-advanced .quick-pitch-panel, .briefing-left-col.mode-advanced .brief-preview-panel { display: none !important; } .briefing-left-col.mode-structured .quick-pitch-panel, .briefing-left-col:not(.mode-structured) .brief-preview-panel { display: none !important; } [hidden] { display: none !important; } .quick-pitch-panel { display: flex; flex-direction: column; padding: clamp(0.75rem, 1.8vw, 0.95rem) clamp(0.85rem, 1.8vw, 1rem); min-height: 100%; } .quick-pitch-label { display: block; margin-bottom: 0.65rem; font-size: 0.95rem; font-weight: 700; letter-spacing: 0.03em; color: var(--text); } .quick-pitch-textarea { width: 100%; flex: 1 1 auto; min-height: clamp(96px, 14vh, 128px); max-height: clamp(140px, 22vh, 190px); padding: 0.7rem 0.85rem; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(0, 0, 0, 0.35); color: var(--text); font-size: 0.92rem; line-height: 1.45; resize: none; box-shadow: inset 0 2px 12px rgba(0, 0, 0, 0.25); } .quick-pitch-textarea::placeholder { color: rgba(255, 255, 255, 0.28); font-style: italic; opacity: 1; } .quick-pitch-textarea:focus { outline: none; border-color: rgba(94, 211, 244, 0.55); box-shadow: 0 0 0 2px rgba(94, 211, 244, 0.15); } .quick-pitch-actions { display: flex; flex-direction: column; gap: 0.55rem; margin-top: auto; padding-top: 0.85rem; } .quick-pitch-actions .btn-wide { width: 100%; } .quick-pitch-secondary-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.65rem; } .quick-pitch-secondary-row .btn { width: 100%; padding: 0.65rem 0.75rem; font-size: 0.88rem; } .quick-pitch-hint { margin: 0.55rem 0 0; font-size: 0.8rem; color: rgba(244, 211, 94, 0.85); } .quick-pitch-success { margin: 0.65rem 0 0; padding: 0.5rem 0.7rem; border-radius: 10px; border: 1px solid rgba(244, 211, 94, 0.35); background: rgba(244, 211, 94, 0.08); color: var(--gold); font-size: 0.82rem; line-height: 1.4; } .quick-pitch-reedit { margin-top: 0.35rem; align-self: flex-start; padding: 0.35rem 0.65rem; font-size: 0.78rem; } .brief-preview-panel { padding: clamp(0.7rem, 1.6vw, 0.85rem) clamp(0.8rem, 1.8vw, 0.95rem); overflow: visible; position: relative; display: flex; flex-direction: column; height: 100%; min-height: 100%; } .brief-preview-panel.is-editing-active::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: rgba(0, 0, 0, 0.55); z-index: 1; pointer-events: none; } .brief-preview-header { margin-bottom: 0.5rem; } .brief-preview-title-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; } .brief-preview-title-row .briefing-section-title { margin: 0; } .brief-preview-helper { margin: 0.25rem 0 0; color: var(--muted); font-size: 0.78rem; } .brief-preview-hint { margin: 0.35rem 0 0; font-size: 0.78rem; color: rgba(244, 211, 94, 0.85); } .brief-preview-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45rem; flex: 1 1 auto; } .brief-read-card { padding: 0.45rem 0.55rem; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(0, 0, 0, 0.22); transition: border-color 0.2s, background 0.2s, box-shadow 0.2s, transform 0.2s; } .brief-preview-grid.is-editing-active .brief-read-card:not(.is-editing-expanded) { opacity: 0.35; filter: blur(0.5px); pointer-events: none; } .brief-read-card.is-editing-expanded { grid-column: 1 / -1; position: relative; z-index: 2; padding: 1.35rem 1.5rem; border-color: rgba(244, 211, 94, 0.6); background: linear-gradient(160deg, rgba(28, 24, 14, 0.98), rgba(12, 12, 12, 0.98)); box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(244, 211, 94, 0.25), 0 0 32px rgba(244, 211, 94, 0.08); transform: scale(1.01); } .brief-read-card.is-editing-expanded .brief-read-label { font-size: 0.82rem; color: var(--gold); } .brief-read-card.is-editing-expanded .brief-read-edit { opacity: 1; background: rgba(244, 211, 94, 0.22); } .brief-read-card:hover { border-color: rgba(255, 255, 255, 0.14); } .brief-read-card.brief-read-wide { grid-column: span 2; } .brief-read-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.35rem; } .brief-read-label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-cyan); } .brief-read-edit { opacity: 0; padding: 0.15rem 0.35rem; border: none; border-radius: 6px; background: rgba(244, 211, 94, 0.12); color: var(--gold); font-size: 0.85rem; cursor: pointer; transition: opacity 0.15s; } .brief-read-card:hover .brief-read-edit, .brief-read-card.is-editing .brief-read-edit { opacity: 1; } .brief-read-value { margin: 0; font-size: 0.88rem; line-height: 1.4; color: var(--text); word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .brief-read-card.brief-read-wide .brief-read-value { -webkit-line-clamp: 2; } .brief-read-value.is-empty { color: rgba(255, 255, 255, 0.35); font-style: italic; } .brief-read-input { width: 100%; padding: 0.5rem 0.65rem; border-radius: 8px; border: 1px solid rgba(94, 211, 244, 0.35); background: rgba(0, 0, 0, 0.4); color: var(--text); font-size: 0.88rem; line-height: 1.4; } .brief-read-input[hidden] { display: none !important; } .brief-read-textarea { min-height: 52px; resize: vertical; } .brief-read-card.is-editing-expanded .brief-read-input { display: block !important; font-size: 1.02rem; padding: 0.9rem 1rem; line-height: 1.55; border-color: rgba(244, 211, 94, 0.35); background: rgba(0, 0, 0, 0.5); min-height: 3.25rem; } .brief-read-card.is-editing-expanded .brief-read-textarea { min-height: 140px; resize: vertical; } .brief-read-edit-actions { display: none; margin-top: 1rem; gap: 0.6rem; justify-content: flex-end; } .brief-read-card.is-editing-expanded .brief-read-edit-actions { display: flex; } .brief-read-card.is-editing-expanded .brief-read-edit-actions .btn-primary { min-width: 100px; font-weight: 700; } .brief-read-card.is-editing .brief-read-value { display: none; } .brief-read-card.is-editing .brief-read-input { display: block !important; } .brief-preview-actions { display: flex; flex-direction: column; gap: 0.45rem; margin-top: auto; padding-top: 0.55rem; } .brief-preview-actions .btn-wide { width: 100%; } .advanced-briefing-panel { padding: clamp(0.7rem, 1.6vw, 0.85rem) clamp(0.8rem, 1.8vw, 0.95rem); display: flex; flex-direction: column; height: 100%; min-height: 100%; } .advanced-briefing-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45rem; margin-top: 0; flex: 1 1 auto; align-content: start; } .advanced-briefing-form .adv-field-wide { grid-column: 1 / -1; } .advanced-briefing-form label { display: grid; gap: 0.25rem; margin: 0; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-cyan); } .advanced-briefing-form input, .advanced-briefing-form textarea { padding: 0.45rem 0.55rem; font-size: 0.82rem; line-height: 1.35; border-radius: 8px; } .advanced-briefing-form textarea { min-height: 52px; max-height: 68px; resize: none; overflow-y: auto; } .briefing-left-col.mode-advanced .advanced-briefing-panel { min-height: 100%; } .briefing-opponent-panel .briefing-section-title, .briefing-opponent-panel .difficulty-selector h3 { margin: 0 0 0.5rem; font-size: 0.82rem; letter-spacing: 0.08em; } .briefing-opponent-panel .persona-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.55rem; margin-top: 0.45rem; } .briefing-opponent-panel .difficulty-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.55rem; } .briefing-opponent-panel .persona-card, .briefing-opponent-panel .difficulty-card { display: flex; flex-direction: column; justify-content: flex-start; min-height: clamp(78px, 10.5vh, 94px); padding: clamp(0.62rem, 1.1vh, 0.74rem) clamp(0.58rem, 1vw, 0.68rem); border-radius: 10px; } .briefing-opponent-panel .persona-card .persona-icon { font-size: 1.15rem; line-height: 1; display: block; margin-bottom: 0.24rem; } .briefing-opponent-panel .persona-card h3 { margin: 0.32rem 0 0.2rem; font-size: 0.8rem; } .briefing-opponent-panel .persona-card p { font-size: 0.68rem; line-height: 1.3; } .briefing-opponent-panel .difficulty-selector { margin-top: clamp(0.85rem, 1.8vh, 1.15rem); } .briefing-opponent-panel .difficulty-card .difficulty-icon { font-size: 1.15rem; margin-bottom: 0.24rem; } .briefing-opponent-panel .difficulty-card h4 { margin: 0 0 0.18rem; font-size: 0.78rem; } .briefing-opponent-panel .difficulty-card p { font-size: 0.66rem; line-height: 1.28; } .briefing-opponent-note { margin: 0; font-size: 0.8rem; color: var(--muted); text-align: center; } .briefing-opponent-panel { overflow: visible; display: flex; flex-direction: column; align-self: stretch; min-height: 100%; height: 100%; gap: clamp(0.45rem, 0.9vh, 0.65rem); padding: clamp(0.7rem, 1.6vw, 0.85rem) clamp(0.8rem, 1.8vw, 0.95rem); } .briefing-opponent-footer { margin-top: auto; padding-top: clamp(0.65rem, 1.2vh, 0.85rem); display: flex; flex-direction: column; gap: 0.55rem; } .briefing-opponent-panel .btn-arena-start { margin-top: 0; } #screen-setup .briefing-shell-wide { overflow: visible; } .briefing-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; width: 100%; margin-bottom: clamp(1rem, 2vh, 1.35rem); } .briefing-header .btn-ghost { flex-shrink: 0; align-self: flex-start; margin-top: 0.15rem; } .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: stretch; } .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, .briefing-grid-wide { grid-template-columns: 1fr; } .brief-preview-grid { grid-template-columns: 1fr; } .brief-read-card.brief-read-wide { grid-column: span 1; } .quick-pitch-secondary-row { grid-template-columns: 1fr; } .battle-shell, .arena-shell.battle-arena, .battle-arena, .battle-layout { grid-template-columns: 1fr; width: calc(100vw - 24px); min-height: auto; } .battle-arena-wrap { padding: 12px 0 24px; min-height: auto; } .battle-sidebar { order: 1; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.65rem 1.25rem; padding: 0.85rem 1rem; } .arena-status-list { flex-direction: row; flex-wrap: wrap; gap: 0.5rem 1rem; flex: 1 1 auto; } .arena-status-list li { padding: 0; border: none; } .pressure-meter-sidebar { flex: 1 1 100%; margin: 0; } .sidebar-actions { flex-direction: row; flex-wrap: wrap; margin-top: 0; padding-top: 0; width: 100%; } .sidebar-actions .btn-wide { flex: 1 1 auto; } .battle-stage, .battle-panel, .battle-main { order: 2; min-height: auto; padding: 1rem; } .judge-question-hero { padding: 18px 20px; } .response-action-row { flex-direction: column; align-items: stretch; } .response-action-left { justify-content: flex-start; } .btn-send-answer { width: 100%; } .hint-chips-panel { margin-left: 0; } } @media (max-width: 640px) { .battle-round-header-top { flex-direction: column; align-items: flex-start; } .response-console-form textarea { min-height: 110px; } } .meta-item { display: flex; justify-content: space-between; gap: 0.75rem; padding: 0.65rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .meta-item span { color: var(--muted); } .pressure-medium { color: #7dd3fc; } .chat-window { display: flex; flex-direction: column; gap: 0.45rem; } .chat-window:not(.battle-timeline) { flex: 1; overflow-y: auto; padding: 0.5rem; margin-bottom: 1rem; } .message-meta { display: block; font-size: 0.68rem; color: var(--gold); margin-bottom: 0.25rem; } .chat-input-row { display: grid; grid-template-columns: 1fr auto; gap: 0.75rem; } .status-text { color: var(--red); font-size: 0.9rem; margin: 0.5rem 0 0; } /* ================================ Results / Scorecards (Pass 2.5) ================================ */ .results-shell { max-width: 920px; margin: 0 auto; padding: 0.25rem 0 1.25rem; display: grid; gap: 1.25rem; } .results-compact { gap: 0.65rem; padding-bottom: 1rem; } .results-hero-card { padding: 1.1rem 1.15rem 1rem; border: 1px solid rgba(244, 211, 94, 0.14); background: linear-gradient(165deg, rgba(18, 22, 36, 0.92), rgba(8, 10, 18, 0.88)); box-shadow: 0 12px 48px rgba(0, 0, 0, 0.35), 0 0 40px rgba(244, 211, 94, 0.04); } .results-hero-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 0.65rem; } .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(4, minmax(0, 1fr)); gap: 0.5rem; } .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 + entry path chooser */ .screen-start-path { width: 100%; } .start-path-shell { width: min(920px, 92vw); max-width: 100%; margin: 0 auto; padding: clamp(0.35rem, 1.5vw, 0.75rem) 0; } .start-path-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: clamp(0.85rem, 2vw, 1.15rem); } .start-path-title { margin: 0.35rem 0 0.25rem; font-size: clamp(1.45rem, 3vw, 1.85rem); } .start-path-sub { margin: 0; color: var(--muted); font-size: 0.88rem; line-height: 1.45; } .start-path-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(0.75rem, 2vw, 1rem); margin: 0; } .start-path-card { padding: clamp(1rem, 2.5vw, 1.25rem) clamp(0.95rem, 2vw, 1.15rem); border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.1); background: linear-gradient(165deg, rgba(18, 18, 24, 0.95), rgba(8, 8, 12, 0.92)); text-align: left; transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } .start-path-card-text:hover, .start-path-card-text:focus-visible { border-color: rgba(244, 211, 94, 0.55); box-shadow: 0 0 32px rgba(244, 211, 94, 0.14); transform: translateY(-2px); } .start-path-card-voice:hover, .start-path-card-voice:focus-visible { border-color: rgba(78, 205, 196, 0.55); box-shadow: 0 0 32px rgba(78, 205, 196, 0.14); transform: translateY(-2px); } .start-path-badge { display: inline-block; margin-bottom: 0.55rem; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); } .start-path-badge-voice { color: #7efff0; } .start-path-card h3 { margin: 0.45rem 0 0.15rem; font-size: clamp(1.1rem, 2.2vw, 1.3rem); } .start-path-tagline { margin: 0 0 0.45rem; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); } .start-path-card-voice .start-path-tagline { color: #7efff0; } .start-path-desc { margin: 0; font-size: 0.84rem; line-height: 1.45; color: var(--muted); } @media (max-width: 640px) { .start-path-grid { grid-template-columns: 1fr; } } @media (max-height: 760px) { .start-path-header { margin-bottom: 0.65rem; } .start-path-card { padding: 0.85rem 0.9rem; } .start-path-card h3 { font-size: 1.05rem; } } .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-wrap { width: 100%; } .voice-delivery-layout { display: flex; flex-direction: column; gap: 0.55rem; } .voice-delivery-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; } .voice-delivery-box, .voice-delivery-insight { padding: 0.55rem 0.65rem; border-radius: 10px; border: 1px solid rgba(78, 205, 196, 0.22); background: rgba(0, 0, 0, 0.28); } .voice-delivery-box { display: flex; flex-direction: column; justify-content: space-between; gap: 0.35rem; min-height: 58px; } .voice-delivery-box-label { display: block; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(125, 211, 252, 0.85); } .voice-delivery-box-value { display: block; font-size: 0.88rem; font-weight: 700; line-height: 1.3; color: var(--text); word-break: break-word; } .voice-delivery-insight { display: grid; grid-template-columns: minmax(72px, 100px) minmax(0, 1fr); gap: 0.65rem; align-items: start; } .voice-delivery-insight-text { margin: 0; font-size: 0.84rem; line-height: 1.45; color: rgba(255, 255, 255, 0.9); } .voice-delivery-overall { margin: 0; padding: 0.55rem 0.65rem; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.03); font-size: 0.84rem; line-height: 1.45; color: rgba(255, 255, 255, 0.82); } .voice-delivery-notes { margin: 0.25rem 0 0; padding: 0.55rem 0.65rem 0.55rem 1.1rem; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.06); background: rgba(0, 0, 0, 0.18); font-size: 0.82rem; color: var(--muted); } @media (max-width: 900px) { .voice-delivery-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 520px) { .voice-delivery-metrics { grid-template-columns: 1fr 1fr; } .voice-delivery-insight { grid-template-columns: 1fr; gap: 0.35rem; } } .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: 12px; min-height: 0; width: 100%; padding: 14px 18px 12px; border: 1px solid rgba(78, 205, 196, 0.12); border-radius: 6px; background: radial-gradient(ellipse 50% 80% at 0% 50%, rgba(168, 85, 247, 0.1) 0%, transparent 55%), radial-gradient(ellipse 50% 80% at 100% 50%, rgba(34, 211, 238, 0.1) 0%, transparent 55%), rgba(0, 0, 0, 0.35); box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.4), 0 0 40px rgba(124, 58, 237, 0.06); } .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: rgba(245, 200, 66, 0.03); border: 1px solid rgba(245, 200, 66, 0.1); border-top: 1px solid rgba(245, 200, 66, 0.45); box-shadow: inset 0 0 24px rgba(245, 200, 66, 0.06); } .fighter-judge { background: rgba(0, 230, 200, 0.03); border: 1px solid rgba(0, 230, 200, 0.12); border-top: 1px solid rgba(0, 230, 200, 0.45); box-shadow: inset 0 0 24px rgba(0, 230, 200, 0.06); } .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: 9px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: rgba(255, 255, 255, 0.2); } .fighter-name { display: block; font-size: 1rem; 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: 11px; 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; width: 100%; padding: 0; border: 1px solid rgba(0, 230, 200, 0.12); border-top: 1px solid rgba(0, 230, 200, 0.45); border-radius: 6px; background: rgba(0, 230, 200, 0.03); box-shadow: 0 0 40px rgba(78, 205, 196, 0.12), inset 0 0 30px rgba(78, 205, 196, 0.04); overflow: hidden; } .attack-card-banner { padding: 6px 14px; text-align: center; font-size: 0.72rem; letter-spacing: 0.2em; color: rgba(126, 255, 240, 0.85); background: rgba(78, 205, 196, 0.08); border-bottom: 1px solid rgba(78, 205, 196, 0.2); } .attack-card-inner { position: relative; z-index: 1; padding: 24px 32px 28px; text-align: left; } .attack-card-tag { display: inline-block; margin-bottom: 12px; } .attack-card-question { margin: 0; padding: 0; border: none; font-size: clamp(18px, 1.6vw, 22px); font-weight: 600; line-height: 1.55; color: rgba(255, 255, 255, 0.96); quotes: none; text-wrap: pretty; max-width: none; text-align: left; } .attack-card-glow { position: absolute; inset: 0; background: radial-gradient(ellipse 70% 50% at 50% 30%, rgba(78, 205, 196, 0.1) 0%, transparent 65%); pointer-events: none; animation: judge-glow-breathe 3s ease-in-out infinite; } .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; } @keyframes judge-scan-sweep { 0% { background-position: 0 -100%; } 100% { background-position: 0 200%; } } .attack-card-arena.judge-attack-enter { animation: attack-card-enter 0.45s ease-out; } @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: 10px 16px; padding: 12px 18px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); background: rgba(0, 0, 0, 0.3); } .dock-header-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; flex: 1 1 auto; min-width: 0; } .btn-arcade-log-inline { font-family: "Rajdhani", sans-serif; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.72rem; padding: 6px 12px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.55); border-radius: 4px; cursor: pointer; 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: 11px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: rgba(245, 200, 66, 0.9); text-shadow: 0 0 12px rgba(245, 200, 66, 0.15); } .unified-dock .dock-assist-hint { margin: 0; font-size: 13px; font-weight: 500; line-height: 1.45; color: rgba(255, 255, 255, 0.78); font-style: normal; } .arcade-dock-form textarea, .unified-dock #user-input { width: 100%; min-height: 120px; max-height: 200px; padding: 14px 16px; font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, 0.85); caret-color: #f5c842; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 6px; resize: vertical; transition: border-color 0.15s, box-shadow 0.15s, background 0.15s; } .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: 8px; margin-left: 10px; } .arcade-dock .hint-chip { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(244, 211, 94, 0.35); background: rgba(244, 211, 94, 0.1); color: rgba(245, 200, 66, 0.95); cursor: pointer; transition: border-color 0.15s, background 0.15s, transform 0.15s; } .arcade-dock .hint-chip:hover { border-color: rgba(244, 211, 94, 0.55); background: rgba(244, 211, 94, 0.16); color: #f5c842; transform: translateY(-1px); } .voice-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); } .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; } } /* ================================ PitchFight Unified Design System ================================ */ .arena-section-label { margin: 0 0 0.5rem; font-size: 9px; font-weight: 600; letter-spacing: 3.5px; text-transform: uppercase; color: rgba(255, 255, 255, 0.2); } .pf-card { border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 10px; background: rgba(12, 12, 16, 0.85); } .pf-card.is-active, .persona-card.selected, .difficulty-card.selected { border-color: rgba(245, 200, 66, 0.3); background: rgba(245, 200, 66, 0.04); } #screen-battle.active .battle-arena-wrap, #screen-deal.active .battle-arena-wrap { width: 100%; max-width: 100%; padding: 8px 0 16px; } #screen-battle.active .battle-stage-shell, #screen-deal.active .battle-stage-shell { width: 100%; max-width: 100%; margin: 0; padding-left: clamp(16px, 2.5vw, 40px); padding-right: clamp(16px, 2.5vw, 40px); } /* Battle arena — attack card is the hero, fighters stay compact */ #screen-battle .arcade-duel-frame, #screen-deal .arcade-duel-frame { width: 100%; max-width: 100%; } #screen-battle .fighter-row, #screen-deal .fighter-row { grid-template-columns: minmax(160px, 1fr) auto minmax(160px, 1fr); gap: 16px 24px; flex-shrink: 0; } #screen-battle .fighter-panel, #screen-deal .fighter-panel { padding: 12px 16px; } #screen-battle .attack-card-arena, #screen-deal .attack-card-arena { width: 100%; max-width: 100%; min-height: 150px; flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; } #screen-battle .attack-card-inner, #screen-deal .attack-card-inner { padding: 28px 36px 32px; } #screen-battle .attack-card-question, #screen-battle #judge-question-text, #screen-deal .attack-card-question, #screen-deal #judge-question-text { font-size: clamp(18px, 1.75vw, 24px) !important; line-height: 1.55 !important; max-width: none !important; text-align: left !important; } #screen-battle .arcade-hud, #screen-battle .arcade-progress, #screen-battle .arcade-dock, #screen-deal .arcade-hud, #screen-deal .arcade-progress, #screen-deal .arcade-dock { width: 100%; max-width: 100%; } #screen-battle .judge-question-text, #screen-deal .judge-question-text { max-width: none; } #screen-scorecard.active, .sc-page.active { background: #09090f; } .app:has(#screen-scorecard.active), .app.app-scorecard-fullwidth { max-width: none !important; width: 100% !important; padding: 0 !important; } /* ================================ Scorecard v3 — hero + body grid ================================ */ .sc-shell { width: min(1320px, 90vw); max-width: 100%; margin: 0 auto; padding: clamp(10px, 1.8vw, 16px) clamp(12px, 2vw, 20px); } /* ---- Hero ---- */ .sc-hero { padding: clamp(12px, 2vw, 16px) clamp(14px, 2vw, 20px); border-bottom: 1px solid rgba(255, 255, 255, 0.06); margin: 0; } .sc-hero-row { display: flex; gap: 20px; align-items: flex-start; } .sc-hero-actions-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; } .sc-hero-actions-primary, .sc-hero-actions-secondary { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .sc-hero-actions-secondary { margin-left: auto; } .sc-ring-wrap { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 88px; } .sc-ring { width: 84px; height: 84px; min-width: 84px; min-height: 84px; border-radius: 50%; border: 3px solid #f5c842; background: rgba(245, 200, 66, 0.05); display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: none; overflow: visible; } .sc-ring .score-orb-value { font-size: 30px; font-weight: 800; line-height: 1; color: #f5c842; } .sc-ring-caption { display: block; max-width: 92px; margin: 0; text-align: center; font-size: 8px; font-weight: 800; letter-spacing: 0.08em; line-height: 1.25; text-transform: uppercase; color: rgba(245, 200, 66, 0.9); word-break: break-word; } .sc-hero-meta { flex: 1; min-width: 0; } .sc-hero-kicker { margin: 0 0 8px; font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.38); } .sc-hero-summary { margin: 0 0 12px; font-size: 16px; font-weight: 600; line-height: 1.55; color: rgba(255, 255, 255, 0.92); overflow: visible; word-break: break-word; } .sc-hero-actions { display: flex; flex-wrap: wrap; gap: 8px; } .score-action-btn { min-height: 42px; padding: 10px 16px; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; border-radius: 10px; white-space: nowrap; line-height: 1.2; display: inline-flex; align-items: center; justify-content: center; } .score-action-btn-secondary { border: 2px solid rgba(94, 211, 244, 0.45); background: rgba(94, 211, 244, 0.08); color: #5ed3f4; } @media (min-width: 900px) { .briefing-opponent-panel .persona-grid, .briefing-opponent-panel .difficulty-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 900px) { .advanced-briefing-form { grid-template-columns: 1fr; } .advanced-briefing-form .adv-field-wide { grid-column: auto; } .briefing-opponent-panel .persona-grid, .briefing-opponent-panel .difficulty-grid { grid-template-columns: 1fr; } } .score-action-btn-verdict { border: 2px solid rgba(0, 230, 200, 0.45); background: rgba(0, 230, 200, 0.08); color: #00e6c8; } .score-action-btn-verdict:hover { border-color: #00e6c8; background: rgba(0, 230, 200, 0.16); } .sc-btn-gold, .sc-btn-secondary { min-height: 42px; padding: 10px 16px; font-size: 12px; } .sc-btn-verdict, .sc-btn-conversation { min-height: 42px; padding: 10px 16px; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; border-radius: 10px; white-space: nowrap; } .sc-btn-verdict { border: 2px solid rgba(0, 230, 200, 0.45); background: rgba(0, 230, 200, 0.08); color: #00e6c8; } .sc-btn-conversation { border: 2px solid rgba(94, 211, 244, 0.45); background: rgba(94, 211, 244, 0.08); color: #5ed3f4; box-shadow: none; } .retry-projection-note { margin: 0.65rem 0 0; font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, 0.55); text-align: center; } .retry-drill-panel { max-height: min(82vh, 760px); overflow-y: auto; } .sc-btn-conversation:hover { border-color: #5ed3f4; background: rgba(94, 211, 244, 0.2); box-shadow: 0 0 32px rgba(94, 211, 244, 0.35), inset 0 0 20px rgba(94, 211, 244, 0.12); } .sc-fallback-warn { margin: 12px 0 0; font-size: 12px; color: #ff9840; } .sc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 0; } .sc-chip { font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.12); } .sc-chip-strong { color: #00e6c8; border-color: rgba(0, 230, 200, 0.25); background: rgba(0, 230, 200, 0.06); } .sc-chip-weak { color: #ff8888; border-color: rgba(255, 80, 80, 0.25); background: rgba(255, 80, 80, 0.06); } .sc-chip-model { color: rgba(255, 255, 255, 0.45); border-color: rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.04); } /* ---- Body grid ---- */ .sc-body-grid { display: grid; grid-template-columns: minmax(260px, 320px) minmax(0, 1fr); width: 100%; align-items: start; gap: 0; } .sc-left-col { padding: clamp(10px, 1.8vw, 14px) clamp(12px, 2vw, 16px); border-right: 1px solid rgba(255, 255, 255, 0.06); min-width: 0; max-height: min(72vh, 680px); overflow-y: auto; overscroll-behavior: contain; } .sc-section-label { margin: 0 0 14px; font-size: 10px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); } .sc-signals-block { margin-top: 16px; } .sc-signals-groups { display: flex; flex-direction: column; gap: 14px; } .sc-signals-groups:empty { display: none; } .sc-signal-group-label { margin: 0 0 8px; font-size: 10px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.45); } .sc-signal-chips { display: flex; flex-wrap: wrap; gap: 8px; } .sc-signal-chip { font-size: 14px; font-weight: 700; padding: 8px 14px; border-radius: 10px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.16); color: rgba(255, 255, 255, 0.9); line-height: 1.2; } .sc-signals-empty { margin: 0; font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, 0.5); } .sc-signals-groups:not(:empty) + .sc-signals-empty { display: none; } .sc-dim-list { display: flex; flex-direction: column; gap: 10px; } .sc-dim-list .dimension-row-scorecard { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; background: rgba(255, 255, 255, 0.03); transition: border-color 0.15s ease, background 0.15s ease; } .sc-dim-list .sc-dim-card:hover { background: rgba(255, 255, 255, 0.045); border-color: rgba(255, 255, 255, 0.12); } .sc-dim-list .sc-dim-weakest { border-color: rgba(255, 80, 80, 0.35); background: rgba(255, 80, 80, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 80, 80, 0.08); } .sc-dim-list .sc-dim-strongest { border-color: rgba(0, 230, 200, 0.3); background: rgba(0, 230, 200, 0.05); box-shadow: inset 0 0 0 1px rgba(0, 230, 200, 0.08); } .sc-dim-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .sc-dim-title { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .sc-dim-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; } .sc-dim-flag { display: inline-block; width: fit-content; font-size: 9px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; padding: 2px 7px; border-radius: 4px; } .sc-dim-flag-weak { color: #ff7070; background: rgba(255, 80, 80, 0.14); } .sc-dim-flag-strong { color: #00e6c8; background: rgba(0, 230, 200, 0.12); } .sc-dim-list .dimension-name { font-size: 14px; font-weight: 700; color: rgba(255, 255, 255, 0.94); text-transform: capitalize; line-height: 1.25; } .sc-dim-list .dimension-bar { width: 100%; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.08); overflow: hidden; } .sc-dim-list .dimension-bar-fill { height: 8px; border-radius: 4px; transition: width 0.5s ease; } .sc-dim-list .dim-fill-strong, .sc-dim-list .dim-fill-excellent { background: #00e6c8; } .sc-dim-list .dim-fill-solid { background: #f5c842; } .sc-dim-list .dim-fill-developing { background: #ff9840; } .sc-dim-list .dim-fill-not-addressed, .sc-dim-list .dim-fill-weak { background: #ff5050; } .sc-dim-list .dimension-score { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; color: rgba(255, 255, 255, 0.98); } .sc-dim-list .dimension-badge { text-align: center; font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 8px; border-radius: 6px; margin: 0; line-height: 1.2; white-space: nowrap; } .sc-dim-list .sc-dim-card:has(.score-label-strong) .dimension-score, .sc-dim-list .sc-dim-card:has(.score-label-excellent) .dimension-score { color: #00e6c8; } .sc-dim-list .sc-dim-card:has(.score-label-solid) .dimension-score { color: #f5c842; } .sc-dim-list .sc-dim-card:has(.score-label-developing) .dimension-score { color: #ff9840; } .sc-dim-list .sc-dim-card:has(.score-label-not-addressed) .dimension-score, .sc-dim-list .sc-dim-card:has(.score-label-weak) .dimension-score { color: #ff7070; } .sc-dim-list .score-label-strong, .sc-dim-list .score-label-excellent { background: rgba(0, 230, 200, 0.1); color: #00e6c8; } .sc-dim-list .score-label-solid { background: rgba(245, 200, 66, 0.1); color: #f5c842; } .sc-dim-list .score-label-developing { background: rgba(255, 152, 64, 0.1); color: #ff9840; } .sc-dim-list .score-label-not-addressed, .sc-dim-list .score-label-weak { background: rgba(255, 80, 80, 0.1); color: #ff5050; } .sc-dim-list .dimension-reason, .sc-dim-list .quote-chip { display: none !important; } .sc-right-col { min-width: 0; display: flex; flex-direction: column; } .sc-tabs { display: flex; border-bottom: 1px solid rgba(255, 255, 255, 0.06); padding: 0 4px; } .sc-tab { font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; padding: 14px 16px; color: rgba(255, 255, 255, 0.45); border: none; border-bottom: 2px solid transparent; background: transparent; cursor: pointer; margin-bottom: -1px; } .sc-tab.active { color: #f5c842; border-bottom-color: #f5c842; } .sc-tab-panels { flex: 1; min-height: 0; } .sc-tab-panel { display: none; padding: clamp(12px, 2vw, 16px) clamp(14px, 2vw, 18px); overflow-y: auto; max-height: none; } .sc-tab-panel.active { display: block; } .sc-tab-eyebrow, .sc-answer-eyebrow { margin: 0 0 10px; font-size: 9px; font-weight: 800; letter-spacing: 2.5px; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); } .sc-eyebrow-cyan { color: rgba(0, 230, 200, 0.85); } .sc-eyebrow-weak { color: rgba(255, 120, 120, 0.9); } .sc-eyebrow-gold { color: rgba(245, 200, 66, 0.9); } .sc-eyebrow-dim { color: rgba(255, 255, 255, 0.5); } .sc-tab-text { margin: 0; font-size: 14px; font-weight: 500; line-height: 1.65; color: rgba(255, 255, 255, 0.88); overflow: visible; word-break: break-word; } .sc-tab-text-gold { font-weight: 600; color: rgba(245, 200, 66, 0.95); } .sc-tab-block { margin-bottom: 0; } .sc-tab-divider { height: 1px; background: rgba(255, 255, 255, 0.08); margin: 16px 0; } .sc-voice-inline { margin-top: 4px; width: 100%; } .sc-voice-inline .voice-delivery-wrap, .sc-voice-inline .voice-delivery-layout { width: 100%; } .sc-voice-inline .voice-delivery-metrics { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 0.45rem; width: 100%; } .sc-voice-inline .voice-delivery-box { flex: 1 1 0; min-width: 0; } @media (max-width: 720px) { .sc-voice-inline .voice-delivery-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); flex-wrap: wrap; } .sc-voice-inline .voice-delivery-box { flex: unset; } } .sc-answers-stack { display: flex; flex-direction: column; gap: 12px; } .sc-answer-card { padding: 16px 18px; border-radius: 8px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.09); overflow: visible; } .sc-answer-cyan { border-left: 3px solid rgba(0, 230, 200, 0.5); } .sc-answer-red { border-left: 3px solid rgba(255, 80, 80, 0.5); } .sc-answer-gold { border-left: 3px solid rgba(245, 200, 66, 0.55); } .sc-answer-dim { border-left: 3px solid rgba(255, 255, 255, 0.2); } .sc-answer-text { margin: 0; font-size: 14px; font-weight: 500; line-height: 1.65; color: rgba(255, 255, 255, 0.9); overflow: visible; word-break: break-word; } blockquote.sc-answer-text { padding: 0; border: none; quotes: none; font-style: normal; } .sc-round-tag { display: inline-block; margin-bottom: 8px; font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, 0.55); } .sc-why-hurt { margin: 8px 0 0; font-size: 13px; font-weight: 600; line-height: 1.5; color: rgba(255, 120, 120, 0.9); overflow: visible; word-break: break-word; } .sc-answers-empty { text-align: center; padding: 32px 16px; border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 8px; background: rgba(255, 255, 255, 0.02); } .sc-empty-title { margin: 0 0 6px; font-size: 13px; color: rgba(255, 255, 255, 0.55); } .sc-empty-sub { margin: 0 0 14px; font-size: 12px; color: rgba(255, 255, 255, 0.3); } .sc-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } .sc-prep-list { list-style: none; margin: 0 0 16px; padding: 0; counter-reset: sc-prep; } .sc-prep-list li { counter-increment: sc-prep; display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); font-size: 14px; font-weight: 500; line-height: 1.6; color: rgba(255, 255, 255, 0.88); overflow: visible; word-break: break-word; } .sc-prep-list li::before { content: counter(sc-prep); flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: rgba(245, 200, 66, 0.15); color: #f5c842; font-size: 11px; font-weight: 800; display: grid; place-items: center; } .sc-prep-retry-box { margin-top: 8px; padding: 12px; text-align: center; background: rgba(245, 200, 66, 0.04); border: 1px solid rgba(245, 200, 66, 0.1); border-radius: 6px; } .sc-prep-retry-prompt { margin: 0 0 10px; font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, 0.65); } /* ---- Judge Verdict Modal ---- */ .verdict-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.72); z-index: 55; overflow-y: auto; display: flex; align-items: center; justify-content: center; padding: 1rem; } .verdict-overlay[hidden] { display: none; } .verdict-modal-panel { width: 100%; max-width: 640px; padding: clamp(0.9rem, 2vw, 1.15rem); margin: auto; max-height: min(80vh, 720px); overflow-y: auto; } .verdict-modal-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 0.75rem; } .verdict-modal-title { margin: 0; font-size: 1.2rem; } .sc-verdict-modal-card { padding: 14px 16px; border-radius: 10px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-top: 2px solid rgba(0, 230, 200, 0.35); overflow: visible; } .verdict-deal-locked-msg { margin: 10px 0 0; padding: 10px 12px; border-radius: 8px; font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, 0.65); background: rgba(255, 80, 80, 0.08); border: 1px solid rgba(255, 80, 80, 0.2); } .verdict-modal-footer { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.75rem; } .verdict-modal-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; } .verdict-modal-footer-secondary { display: flex; flex-wrap: wrap; gap: 0.5rem; } .sc-verdict-card { padding: 14px 16px; border-radius: 8px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.07); border-top: 2px solid rgba(0, 230, 200, 0.3); overflow: visible; } .sc-verdict-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; } .sc-verdict-judge { font-size: 15px; font-weight: 800; color: #00e6c8; } .sc-verdict-pill { padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; } .sc-verdict-pill.interest-no_interest { background: rgba(255, 80, 80, 0.12); color: #ff8888; } .sc-verdict-pill.interest-too_early { background: rgba(255, 152, 64, 0.12); color: #ff9840; } .sc-verdict-pill.interest-mild_interest { background: rgba(0, 230, 200, 0.12); color: #00e6c8; } .sc-verdict-pill.interest-strong_interest { background: rgba(74, 222, 128, 0.12); color: #4ade80; } .sc-verdict-quote { margin: 12px 0; padding: 0 0 0 14px; border: none; border-left: 3px solid rgba(255, 255, 255, 0.15); font-style: italic; font-size: 15px; font-weight: 500; line-height: 1.6; color: rgba(255, 255, 255, 0.88); overflow: visible; word-break: break-word; } .sc-verdict-meta { display: grid; grid-template-columns: 160px 1fr; gap: 16px; } .sc-meta-label { display: block; margin-bottom: 6px; font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.45); } .sc-meta-value { display: block; font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, 0.92); line-height: 1.55; overflow: visible; word-break: break-word; } .sc-verdict-offer { margin: 10px 0 0; font-size: 12px; color: #7efff0; } .sc-verdict-section #verdict-actions { display: none; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .sc-verdict-section #verdict-actions:has(.btn-deal-continue) { display: flex; } .sc-btn-gold { padding: 10px 16px; font-size: 13px; font-weight: 800; border-radius: 6px; border: none; background: #f5c842; color: #0a0a0a; cursor: pointer; } .sc-btn-secondary { padding: 10px 16px; font-size: 13px; font-weight: 700; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.88); cursor: pointer; } .sc-btn-ghost { padding: 10px 16px; font-size: 13px; font-weight: 600; border-radius: 6px; border: 1px solid transparent; background: transparent; color: rgba(255, 255, 255, 0.72); cursor: pointer; } .sc-page .show-more-btn { display: none !important; } .sc-page .clamp-text { display: block; overflow: visible; -webkit-line-clamp: unset; } .sc-prep-empty .sc-prep-retry-box { margin-top: 0.75rem; } .sc-answers-empty { padding: 1rem; border-radius: 10px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); } .sc-empty-title { margin: 0 0 6px; font-size: 15px; font-weight: 700; color: rgba(255, 255, 255, 0.9); } .sc-empty-sub { margin: 0 0 12px; font-size: 13px; color: rgba(255, 255, 255, 0.6); line-height: 1.5; } /* ---- HF Spaces / responsive polish ---- */ @media (max-width: 1100px) { .briefing-grid, .briefing-grid-wide { grid-template-columns: 1fr; } .sc-body-grid { grid-template-columns: 1fr; } .sc-left-col { border-right: none; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .sc-hero-actions-secondary { margin-left: 0; width: 100%; } } @media (max-width: 960px) { .sc-shell { padding: 14px 12px; } .sc-hero-row { flex-wrap: wrap; } .sc-hero-actions-row { flex-direction: column; align-items: stretch; } .sc-hero-actions-primary, .sc-hero-actions-secondary { width: 100%; } .sc-btn-conversation, .sc-btn-verdict { flex: 1; min-width: 140px; text-align: center; } .sc-verdict-meta { grid-template-columns: 1fr; } .verdict-modal-panel { max-width: 100%; } } @media (max-width: 768px) { .arena-title { font-size: clamp(1.75rem, 8vw, 2.5rem); } .founder-silhouette, .judge-silhouette { transform: scale(0.72); opacity: 0.55; } .sc-tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; } .sc-tab { flex-shrink: 0; } .sc-dim-list .dimension-name { font-size: 13px; } } @media (max-height: 760px) { .arena-landing-content { padding-top: 0.5rem; padding-bottom: 0.5rem; transform: scale(0.9); } #screen-setup.active { justify-content: flex-start; padding-top: 0.85rem; padding-bottom: 1.25rem; } #screen-setup.active .briefing-shell-wide { transform: none; } .founder-silhouette, .judge-silhouette { transform: scale(0.68); opacity: 0.5; } .briefing-header { margin-bottom: 0.45rem; } .briefing-title { font-size: clamp(1.25rem, 2.5vw, 1.55rem); } .briefing-subtitle { font-size: 0.82rem; } .quick-pitch-textarea { min-height: 88px; max-height: 110px; } .advanced-briefing-form textarea { min-height: 44px; max-height: 58px; } .persona-grid, .difficulty-grid { gap: 0.45rem; } .briefing-opponent-panel .persona-card, .briefing-opponent-panel .difficulty-card { padding: clamp(0.52rem, 0.95vh, 0.62rem) clamp(0.5rem, 0.9vw, 0.58rem); min-height: clamp(68px, 9vh, 78px); } .persona-card, .difficulty-card { padding: 0.55rem 0.65rem; } .sc-hero { padding-top: 10px; padding-bottom: 10px; } .sc-ring { width: 68px; height: 68px; min-width: 68px; min-height: 68px; } .sc-ring .score-orb-value { font-size: 22px; } } @media (max-width: 720px) { #screen-battle.active .battle-stage-shell, #screen-deal.active .battle-stage-shell { width: 100%; padding: 0 12px 16px; } .fighter-row { grid-template-columns: 1fr; gap: 8px; } .duel-node { order: -1; flex-direction: row; padding: 8px; } }