| :root { |
| color-scheme: light; |
| --ink: #101820; |
| --ink-2: #172534; |
| --panel: rgba(12, 24, 36, 0.92); |
| --cream: #f7f1e3; |
| --paper: rgba(249, 244, 232, 0.96); |
| --line: rgba(255, 255, 255, 0.18); |
| --muted: #6f7882; |
| --blue: #1b66b1; |
| --green: #178a42; |
| --orange: #d98714; |
| --red: #d94831; |
| --yellow: #ffc145; |
| font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; |
| } |
|
|
| * { |
| box-sizing: border-box; |
| } |
|
|
| body { |
| min-height: 100vh; |
| margin: 0; |
| background: #0c1d2c url("/assets/background.png") center / cover fixed no-repeat; |
| color: var(--cream); |
| } |
|
|
| button, |
| textarea { |
| font: inherit; |
| } |
|
|
| button { |
| border: 0; |
| cursor: pointer; |
| } |
|
|
| .shell { |
| min-height: 100vh; |
| background: linear-gradient(180deg, rgba(6, 15, 25, 0.12), rgba(6, 15, 25, 0.68)); |
| } |
|
|
| .screen { |
| min-height: 100vh; |
| padding: 28px clamp(14px, 3vw, 32px); |
| } |
|
|
| .hidden { |
| display: none !important; |
| } |
|
|
| .start-screen { |
| position: relative; |
| display: flex; |
| flex-direction: column; |
| align-items: flex-start; |
| justify-content: center; |
| gap: 22px; |
| } |
|
|
| .title-panel, |
| .loader-box, |
| .end-panel { |
| width: min(560px, 100%); |
| border: 1px solid rgba(255, 255, 255, 0.24); |
| border-radius: 8px; |
| background: rgba(11, 24, 36, 0.9); |
| box-shadow: 0 18px 60px rgba(0, 0, 0, 0.28); |
| } |
|
|
| .title-panel { |
| padding: clamp(22px, 5vw, 44px); |
| } |
|
|
| .eyebrow { |
| margin: 0 0 6px; |
| color: var(--yellow); |
| font-size: 0.88rem; |
| font-weight: 800; |
| letter-spacing: 0; |
| text-transform: uppercase; |
| } |
|
|
| .title-panel h1, |
| .end-panel h1 { |
| margin: 0; |
| color: #fff9ee; |
| font-size: clamp(3.2rem, 11vw, 6.4rem); |
| line-height: 0.92; |
| letter-spacing: 0; |
| text-transform: uppercase; |
| } |
|
|
| .tagline { |
| margin: 14px 0 0; |
| color: var(--yellow); |
| font-size: clamp(1rem, 3vw, 1.42rem); |
| font-weight: 800; |
| text-transform: uppercase; |
| } |
|
|
| .start-actions { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 12px; |
| } |
|
|
| .primary-button, |
| .secondary-button, |
| .ghost-button, |
| .quick-button { |
| min-height: 46px; |
| border-radius: 8px; |
| font-weight: 800; |
| } |
|
|
| .primary-button { |
| padding: 0 28px; |
| background: var(--orange); |
| color: white; |
| box-shadow: 0 8px 0 #9b5b05, 0 18px 34px rgba(0, 0, 0, 0.26); |
| } |
|
|
| .primary-button:hover { |
| background: #ee9b20; |
| } |
|
|
| .help-button { |
| background: #244f79; |
| box-shadow: 0 8px 0 #102d48, 0 18px 34px rgba(0, 0, 0, 0.26); |
| } |
|
|
| .help-button:hover { |
| background: #2f669b; |
| } |
|
|
| .primary-button:disabled, |
| .secondary-button:disabled { |
| cursor: wait; |
| opacity: 0.7; |
| } |
|
|
| .secondary-button { |
| padding: 0 24px; |
| border: 1px solid #163a63; |
| background: #edf4ff; |
| color: #163a63; |
| } |
|
|
| .ghost-button { |
| padding: 0 18px; |
| border: 1px solid rgba(255, 255, 255, 0.2); |
| background: rgba(10, 24, 36, 0.72); |
| color: var(--cream); |
| } |
|
|
| .help-modal { |
| position: fixed; |
| inset: 0; |
| z-index: 50; |
| display: grid; |
| place-items: center; |
| padding: 18px; |
| background: rgba(2, 8, 14, 0.76); |
| backdrop-filter: blur(10px); |
| } |
|
|
| .help-card { |
| width: min(560px, 100%); |
| overflow: hidden; |
| border: 2px solid #203241; |
| border-radius: 8px; |
| background: var(--paper); |
| color: var(--ink); |
| box-shadow: 0 26px 80px rgba(0, 0, 0, 0.52); |
| } |
|
|
| .help-head { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: 16px; |
| padding: 16px 18px; |
| background: #0e2131; |
| } |
|
|
| .help-head h2 { |
| margin: 0; |
| color: #fff9ee; |
| font-size: 1.2rem; |
| text-transform: uppercase; |
| } |
|
|
| .modal-close { |
| display: grid; |
| place-items: center; |
| width: 34px; |
| height: 34px; |
| border: 1px solid rgba(255, 255, 255, 0.22); |
| border-radius: 8px; |
| background: rgba(255, 255, 255, 0.08); |
| color: #fff9ee; |
| font-size: 1.1rem; |
| font-weight: 900; |
| line-height: 1; |
| } |
|
|
| .modal-close:hover { |
| background: rgba(255, 255, 255, 0.18); |
| } |
|
|
| .help-body { |
| padding: 20px; |
| } |
|
|
| .help-body p { |
| margin: 0 0 12px; |
| color: var(--ink); |
| line-height: 1.5; |
| } |
|
|
| .download-warning { |
| padding: 12px 14px; |
| border: 1px solid rgba(217, 135, 20, 0.36); |
| border-radius: 8px; |
| background: #fff0c8; |
| color: #673d05 !important; |
| font-weight: 800; |
| } |
|
|
| .help-body .primary-button { |
| width: 100%; |
| margin-top: 10px; |
| } |
|
|
| .loading-screen, |
| .end-screen { |
| display: grid; |
| place-items: center; |
| } |
|
|
| .loader-box, |
| .end-panel { |
| padding: 26px; |
| text-align: center; |
| } |
|
|
| .spinner { |
| width: 44px; |
| height: 44px; |
| margin: 0 auto 16px; |
| border: 4px solid rgba(255, 255, 255, 0.22); |
| border-top-color: var(--yellow); |
| border-radius: 50%; |
| animation: spin 0.9s linear infinite; |
| } |
|
|
| @keyframes spin { |
| to { |
| transform: rotate(360deg); |
| } |
| } |
|
|
| .loader-box h2, |
| .verdict-panel h2, |
| .reply-panel h2, |
| .summary-box h2 { |
| margin: 0; |
| font-size: 1.02rem; |
| letter-spacing: 0; |
| text-transform: uppercase; |
| } |
|
|
| .loader-box p { |
| color: #d7dde4; |
| } |
|
|
| .progress-track { |
| height: 10px; |
| overflow: hidden; |
| border-radius: 999px; |
| background: rgba(255, 255, 255, 0.16); |
| } |
|
|
| .progress-fill { |
| width: 0%; |
| height: 100%; |
| background: linear-gradient(90deg, var(--yellow), var(--green)); |
| transition: width 180ms ease; |
| } |
|
|
| .loading-note { |
| min-height: 1.3em; |
| color: var(--yellow) !important; |
| font-size: 0.9rem; |
| } |
|
|
| .game-screen { |
| display: flex; |
| flex-direction: column; |
| gap: 18px; |
| } |
|
|
| .hud { |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| gap: 18px; |
| } |
|
|
| .round-card { |
| min-width: min(320px, 68vw); |
| padding: 14px 18px; |
| border: 1px solid rgba(255, 255, 255, 0.24); |
| border-radius: 8px; |
| background: var(--panel); |
| text-align: center; |
| box-shadow: 0 12px 32px rgba(0, 0, 0, 0.24); |
| } |
|
|
| #round-label { |
| display: block; |
| margin-bottom: 10px; |
| font-size: 1.28rem; |
| font-weight: 900; |
| text-transform: uppercase; |
| } |
|
|
| .round-dots { |
| display: flex; |
| justify-content: center; |
| gap: 12px; |
| } |
|
|
| .round-dots span { |
| width: 15px; |
| height: 15px; |
| border: 2px solid #536273; |
| border-radius: 50%; |
| background: #142333; |
| } |
|
|
| .round-dots span.active { |
| border-color: var(--yellow); |
| background: var(--orange); |
| } |
|
|
| .round-dots span.done { |
| border-color: #8ca7c0; |
| background: #8ca7c0; |
| } |
|
|
| .game-grid { |
| display: grid; |
| grid-template-columns: minmax(300px, 0.92fr) minmax(340px, 1.08fr); |
| gap: 20px; |
| align-items: end; |
| } |
|
|
| .radio-panel, |
| .reply-panel, |
| .status-strip { |
| border-radius: 8px; |
| box-shadow: 0 18px 46px rgba(0, 0, 0, 0.26); |
| } |
|
|
| .radio-panel { |
| padding: 18px; |
| border: 1px solid rgba(255, 255, 255, 0.18); |
| background: var(--panel); |
| } |
|
|
| .panel-title { |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| margin-bottom: 14px; |
| font-weight: 900; |
| text-transform: uppercase; |
| } |
|
|
| .live-dot { |
| width: 11px; |
| height: 11px; |
| border-radius: 50%; |
| background: var(--red); |
| box-shadow: 0 0 18px var(--red); |
| } |
|
|
| audio { |
| width: 100%; |
| margin-bottom: 18px; |
| } |
|
|
| .feed-block { |
| padding: 16px 0; |
| border-top: 1px solid var(--line); |
| border-bottom: 1px solid var(--line); |
| } |
|
|
| .feed-label { |
| color: #ffffff; |
| font-weight: 900; |
| text-transform: uppercase; |
| } |
|
|
| #transcript { |
| margin: 10px 0 0; |
| color: #eef4fa; |
| font-size: clamp(1rem, 2.2vw, 1.18rem); |
| line-height: 1.55; |
| } |
|
|
| .meta-grid { |
| display: grid; |
| grid-template-columns: repeat(3, minmax(0, 1fr)); |
| gap: 0; |
| margin: 16px 0 0; |
| border: 1px solid var(--line); |
| border-radius: 8px; |
| overflow: hidden; |
| } |
|
|
| .meta-grid div { |
| min-width: 0; |
| padding: 10px 12px; |
| border-right: 1px solid var(--line); |
| } |
|
|
| .meta-grid div:last-child { |
| border-right: 0; |
| } |
|
|
| .meta-grid dt { |
| color: #b9c4ce; |
| font-size: 0.76rem; |
| text-transform: uppercase; |
| } |
|
|
| .meta-grid dd { |
| margin: 4px 0 0; |
| overflow-wrap: anywhere; |
| color: var(--yellow); |
| font-weight: 850; |
| } |
|
|
| .reply-panel { |
| padding: 20px; |
| border: 1px solid rgba(16, 24, 32, 0.2); |
| background: var(--paper); |
| color: var(--ink); |
| } |
|
|
| .reply-head { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: 14px; |
| margin-bottom: 12px; |
| } |
|
|
| #word-count { |
| color: var(--green); |
| font-weight: 850; |
| } |
|
|
| #word-count.over { |
| color: var(--red); |
| } |
|
|
| textarea { |
| width: 100%; |
| min-height: 136px; |
| resize: vertical; |
| padding: 14px; |
| border: 1px solid #9ba0a5; |
| border-radius: 8px; |
| background: rgba(255, 255, 255, 0.68); |
| color: var(--ink); |
| font-size: 1rem; |
| line-height: 1.45; |
| } |
|
|
| textarea:focus { |
| border-color: var(--blue); |
| outline: 3px solid rgba(27, 102, 177, 0.22); |
| } |
|
|
| .quick-row { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 8px; |
| margin-top: 12px; |
| } |
|
|
| .quick-button { |
| min-height: 36px; |
| padding: 0 12px; |
| border: 1px solid #8aa0b6; |
| background: #f5f9ff; |
| color: #183e70; |
| font-size: 0.82rem; |
| } |
|
|
| .action-row { |
| display: flex; |
| justify-content: flex-end; |
| gap: 10px; |
| margin-top: 14px; |
| } |
|
|
| .status-strip { |
| display: grid; |
| grid-template-columns: 1.2fr 0.8fr; |
| gap: 20px; |
| padding: 18px; |
| border: 1px solid rgba(16, 24, 32, 0.16); |
| background: rgba(247, 241, 227, 0.96); |
| color: var(--ink); |
| } |
|
|
| .verdict-panel { |
| display: grid; |
| grid-template-columns: 112px 1fr; |
| gap: 18px; |
| align-items: center; |
| } |
|
|
| .verdict-badge { |
| display: grid; |
| place-items: center; |
| aspect-ratio: 1; |
| border: 7px solid #203241; |
| border-radius: 50%; |
| background: #0e2131; |
| color: #6cff9a; |
| font-weight: 900; |
| text-transform: uppercase; |
| } |
|
|
| #verdict-text { |
| margin: 8px 0; |
| line-height: 1.45; |
| } |
|
|
| .reaction { |
| margin: 0; |
| color: #244f79; |
| font-weight: 750; |
| } |
|
|
| .meters-panel { |
| display: grid; |
| gap: 12px; |
| } |
|
|
| .meter-row { |
| display: grid; |
| grid-template-columns: 80px minmax(90px, 1fr) 34px; |
| gap: 10px; |
| align-items: center; |
| } |
|
|
| .meter-row span { |
| color: var(--green); |
| font-weight: 900; |
| text-transform: uppercase; |
| } |
|
|
| .meter { |
| height: 12px; |
| overflow: hidden; |
| border-radius: 999px; |
| background: #d7dde0; |
| } |
|
|
| .meter div { |
| width: 50%; |
| height: 100%; |
| background: var(--green); |
| transition: width 220ms ease; |
| } |
|
|
| .meter.warning div { |
| background: var(--orange); |
| } |
|
|
| .meter.danger div { |
| background: var(--red); |
| } |
|
|
| .end-panel { |
| color: var(--cream); |
| } |
|
|
| .end-panel h1 { |
| font-size: clamp(2rem, 6vw, 4rem); |
| line-height: 1.05; |
| } |
|
|
| .final-meters { |
| display: flex; |
| flex-wrap: wrap; |
| justify-content: center; |
| gap: 10px; |
| margin: 18px 0; |
| } |
|
|
| .final-meters span { |
| padding: 8px 10px; |
| border: 1px solid rgba(255, 255, 255, 0.2); |
| border-radius: 8px; |
| background: rgba(255, 255, 255, 0.08); |
| } |
|
|
| .summary-box { |
| margin: 18px 0; |
| padding: 14px; |
| border-radius: 8px; |
| background: rgba(255, 255, 255, 0.08); |
| } |
|
|
| .summary-box p { |
| margin: 8px 0 0; |
| } |
|
|
| @media (max-width: 860px) { |
| .game-grid, |
| .status-strip { |
| grid-template-columns: 1fr; |
| } |
|
|
| .hud { |
| justify-content: space-between; |
| } |
|
|
| .round-card { |
| min-width: 0; |
| flex: 1; |
| } |
| } |
|
|
| @media (max-width: 560px) { |
| .screen { |
| padding: 16px 12px; |
| } |
|
|
| .start-screen { |
| justify-content: flex-end; |
| padding-bottom: 36px; |
| } |
|
|
| .title-panel h1 { |
| font-size: clamp(2.8rem, 16vw, 4.2rem); |
| } |
|
|
| .start-actions { |
| width: 100%; |
| } |
|
|
| .start-actions button { |
| width: 100%; |
| } |
|
|
| .hud, |
| .reply-head, |
| .action-row { |
| align-items: stretch; |
| flex-direction: column; |
| } |
|
|
| .meta-grid { |
| grid-template-columns: 1fr; |
| } |
|
|
| .meta-grid div { |
| border-right: 0; |
| border-bottom: 1px solid var(--line); |
| } |
|
|
| .meta-grid div:last-child { |
| border-bottom: 0; |
| } |
|
|
| .verdict-panel { |
| grid-template-columns: 1fr; |
| } |
|
|
| .verdict-badge { |
| width: 104px; |
| } |
| } |
|
|
