Spaces:
Sleeping
Sleeping
| :root { | |
| color-scheme: dark; | |
| --ink: #111315; | |
| --paper: #fbf8ef; | |
| --paper-2: #efe8d8; | |
| --night: #141719; | |
| --night-2: #22282b; | |
| --line: rgba(255, 255, 255, 0.18); | |
| --line-dark: rgba(20, 23, 25, 0.18); | |
| --muted: #98a0a5; | |
| --yellow: #f2c94c; | |
| --green: #35c67a; | |
| --red: #f15b4a; | |
| --blue: #57a5ff; | |
| --violet: #a78bfa; | |
| --orange: #f59e42; | |
| 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: | |
| radial-gradient(circle at 24% 18%, rgba(242, 201, 76, 0.16), transparent 28%), | |
| linear-gradient(135deg, #111315 0%, #1f2724 42%, #31251a 100%); | |
| color: var(--paper); | |
| } | |
| button, | |
| textarea { | |
| font: inherit; | |
| } | |
| button { | |
| border: 0; | |
| cursor: pointer; | |
| } | |
| button:disabled { | |
| cursor: not-allowed; | |
| opacity: 0.55; | |
| } | |
| svg { | |
| width: 18px; | |
| height: 18px; | |
| } | |
| .shell { | |
| min-height: 100vh; | |
| overflow: hidden; | |
| } | |
| .screen { | |
| min-height: 100vh; | |
| padding: clamp(16px, 3vw, 34px); | |
| } | |
| .hidden { | |
| display: none ; | |
| } | |
| .start-screen { | |
| position: relative; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| gap: 24px; | |
| } | |
| .hero-wordmark { | |
| position: absolute; | |
| inset: auto -4vw 5vh auto; | |
| display: grid; | |
| gap: 0; | |
| color: rgba(255, 255, 255, 0.055); | |
| font-size: clamp(6rem, 18vw, 16rem); | |
| font-weight: 950; | |
| line-height: 0.74; | |
| text-transform: uppercase; | |
| transform: rotate(-6deg); | |
| user-select: none; | |
| } | |
| .title-panel, | |
| .loader-panel, | |
| .target-panel, | |
| .clue-panel, | |
| .guess-panel, | |
| .result-panel { | |
| border: 1px solid var(--line); | |
| border-radius: 8px; | |
| box-shadow: 0 24px 70px rgba(0, 0, 0, 0.34); | |
| } | |
| .title-panel { | |
| position: relative; | |
| z-index: 1; | |
| width: min(720px, 100%); | |
| padding: clamp(24px, 6vw, 58px); | |
| background: rgba(17, 19, 21, 0.82); | |
| } | |
| .eyebrow, | |
| .panel-kicker, | |
| .stat-label { | |
| margin: 0; | |
| color: var(--yellow); | |
| font-size: 0.78rem; | |
| font-weight: 900; | |
| letter-spacing: 0; | |
| text-transform: uppercase; | |
| } | |
| h1, | |
| h2, | |
| p { | |
| overflow-wrap: anywhere; | |
| } | |
| .title-panel h1, | |
| .result-panel h1 { | |
| margin: 0; | |
| font-size: clamp(3.1rem, 12vw, 7.2rem); | |
| line-height: 0.88; | |
| letter-spacing: 0; | |
| text-transform: uppercase; | |
| } | |
| .tagline { | |
| margin: 14px 0 0; | |
| color: #dce6e0; | |
| font-size: clamp(1rem, 2.5vw, 1.32rem); | |
| font-weight: 780; | |
| } | |
| .primary-button, | |
| .secondary-button, | |
| .ghost-button, | |
| .icon-button { | |
| display: inline-flex; | |
| min-height: 46px; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 9px; | |
| border-radius: 8px; | |
| font-weight: 900; | |
| } | |
| .primary-button { | |
| width: fit-content; | |
| padding: 0 24px; | |
| background: var(--yellow); | |
| color: #1f1a08; | |
| box-shadow: 0 8px 0 #9d7712, 0 18px 40px rgba(0, 0, 0, 0.28); | |
| } | |
| .primary-button:hover:not(:disabled) { | |
| background: #ffda68; | |
| } | |
| .secondary-button { | |
| padding: 0 20px; | |
| border: 1px solid rgba(87, 165, 255, 0.5); | |
| background: rgba(87, 165, 255, 0.15); | |
| color: #e8f3ff; | |
| } | |
| .ghost-button { | |
| padding: 0 16px; | |
| border: 1px solid var(--line); | |
| background: rgba(255, 255, 255, 0.08); | |
| color: var(--paper); | |
| } | |
| .icon-button { | |
| width: 42px; | |
| min-height: 42px; | |
| padding: 0; | |
| border: 1px solid var(--line); | |
| background: rgba(255, 255, 255, 0.08); | |
| color: var(--paper); | |
| } | |
| .start-actions { | |
| position: relative; | |
| z-index: 1; | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 14px; | |
| } | |
| .how-to-panel { | |
| position: fixed; | |
| inset: 0; | |
| z-index: 10; | |
| display: grid; | |
| place-items: center; | |
| padding: 18px; | |
| background: rgba(10, 12, 13, 0.72); | |
| backdrop-filter: blur(12px); | |
| } | |
| .how-to-card { | |
| position: relative; | |
| width: min(560px, 100%); | |
| padding: clamp(22px, 5vw, 34px); | |
| border: 1px solid var(--line); | |
| border-radius: 8px; | |
| background: rgba(17, 19, 21, 0.96); | |
| box-shadow: 0 28px 84px rgba(0, 0, 0, 0.48); | |
| } | |
| .how-to-card .icon-button { | |
| position: absolute; | |
| top: 14px; | |
| right: 14px; | |
| } | |
| .how-to-card h2 { | |
| max-width: 420px; | |
| margin: 8px 48px 16px 0; | |
| color: #fffdf5; | |
| font-size: clamp(1.65rem, 5vw, 2.4rem); | |
| line-height: 1.02; | |
| letter-spacing: 0; | |
| text-transform: uppercase; | |
| } | |
| .how-to-card ul { | |
| display: grid; | |
| gap: 10px; | |
| margin: 0 0 22px; | |
| padding: 0; | |
| list-style: none; | |
| } | |
| .how-to-card li { | |
| position: relative; | |
| padding-left: 22px; | |
| color: #dce6e0; | |
| font-weight: 720; | |
| line-height: 1.45; | |
| } | |
| .how-to-card li::before { | |
| position: absolute; | |
| top: 0.62em; | |
| left: 0; | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 50%; | |
| background: var(--yellow); | |
| content: ""; | |
| } | |
| .loading-screen, | |
| .result-screen { | |
| display: grid; | |
| place-items: center; | |
| } | |
| .loader-panel, | |
| .result-panel { | |
| width: min(620px, 100%); | |
| padding: clamp(22px, 5vw, 38px); | |
| background: rgba(17, 19, 21, 0.9); | |
| text-align: center; | |
| } | |
| .loader-mark { | |
| display: inline-grid; | |
| grid-template-columns: repeat(2, 54px); | |
| gap: 10px; | |
| margin-bottom: 18px; | |
| } | |
| .loader-mark span { | |
| display: grid; | |
| place-items: center; | |
| aspect-ratio: 1; | |
| border: 1px solid var(--line); | |
| border-radius: 8px; | |
| background: var(--paper); | |
| color: var(--ink); | |
| font-size: 1.7rem; | |
| font-weight: 950; | |
| animation: flip 1.5s ease-in-out infinite alternate; | |
| } | |
| .loader-mark span:last-child { | |
| animation-delay: 0.28s; | |
| } | |
| @keyframes flip { | |
| from { | |
| transform: translateY(0) rotate(0deg); | |
| } | |
| to { | |
| transform: translateY(-8px) rotate(4deg); | |
| } | |
| } | |
| .loader-panel h2 { | |
| margin: 0; | |
| font-size: 1.18rem; | |
| letter-spacing: 0; | |
| text-transform: uppercase; | |
| } | |
| .loader-panel p { | |
| color: #cbd5d1; | |
| } | |
| .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), var(--blue)); | |
| transition: width 160ms ease; | |
| } | |
| .loading-note { | |
| min-height: 1.3em; | |
| color: var(--yellow) ; | |
| font-size: 0.9rem; | |
| } | |
| .game-screen { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 18px; | |
| } | |
| .hud { | |
| display: grid; | |
| grid-template-columns: 1fr auto 1fr; | |
| gap: 14px; | |
| align-items: center; | |
| } | |
| .hud-stat { | |
| width: min(210px, 100%); | |
| padding: 12px 14px; | |
| border: 1px solid var(--line); | |
| border-radius: 8px; | |
| background: rgba(17, 19, 21, 0.74); | |
| } | |
| .hud-stat strong { | |
| display: block; | |
| margin-top: 3px; | |
| font-size: clamp(1.35rem, 4vw, 2rem); | |
| line-height: 1; | |
| } | |
| .center-stat { | |
| text-align: center; | |
| } | |
| #restart-button { | |
| justify-self: end; | |
| } | |
| .game-grid { | |
| display: grid; | |
| grid-template-columns: minmax(300px, 0.85fr) minmax(360px, 1.15fr); | |
| gap: 18px; | |
| align-items: stretch; | |
| } | |
| .target-panel { | |
| min-height: 360px; | |
| padding: clamp(18px, 4vw, 30px); | |
| background: | |
| linear-gradient(160deg, rgba(251, 248, 239, 0.96), rgba(239, 232, 216, 0.96)), | |
| var(--paper); | |
| color: var(--ink); | |
| } | |
| #target-word { | |
| margin: 10px 0 24px; | |
| font-size: clamp(3rem, 9vw, 6.2rem); | |
| line-height: 0.9; | |
| letter-spacing: 0; | |
| text-transform: uppercase; | |
| } | |
| .banned-list { | |
| display: grid; | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| gap: 10px; | |
| } | |
| .banned-list span { | |
| min-height: 44px; | |
| display: grid; | |
| place-items: center; | |
| padding: 8px 10px; | |
| border: 2px solid var(--ink); | |
| border-radius: 8px; | |
| background: #ffffff; | |
| color: #24272a; | |
| font-weight: 900; | |
| text-transform: uppercase; | |
| } | |
| .clue-panel { | |
| display: flex; | |
| flex-direction: column; | |
| padding: clamp(18px, 4vw, 28px); | |
| background: rgba(17, 19, 21, 0.86); | |
| } | |
| .clue-head, | |
| .input-footer, | |
| .guess-status, | |
| .score-row { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 16px; | |
| } | |
| .clue-head h2, | |
| .summary-box h2 { | |
| margin: 0; | |
| font-size: 1rem; | |
| letter-spacing: 0; | |
| text-transform: uppercase; | |
| } | |
| #char-count { | |
| color: var(--green); | |
| font-weight: 900; | |
| } | |
| #char-count.over { | |
| color: var(--red); | |
| } | |
| textarea { | |
| width: 100%; | |
| min-height: 190px; | |
| flex: 1; | |
| resize: vertical; | |
| margin: 14px 0; | |
| padding: 16px; | |
| border: 1px solid rgba(255, 255, 255, 0.2); | |
| border-radius: 8px; | |
| background: rgba(255, 255, 255, 0.08); | |
| color: #fffdf5; | |
| font-size: 1.08rem; | |
| line-height: 1.5; | |
| } | |
| textarea:focus { | |
| border-color: var(--yellow); | |
| outline: 3px solid rgba(242, 201, 76, 0.18); | |
| } | |
| .validation-message { | |
| min-height: 1.3em; | |
| margin: 0; | |
| color: var(--muted); | |
| font-weight: 800; | |
| } | |
| .validation-message.good { | |
| color: var(--green); | |
| } | |
| .validation-message.bad { | |
| color: var(--red); | |
| } | |
| .guess-panel { | |
| display: grid; | |
| grid-template-columns: minmax(0, 1fr) auto; | |
| gap: 16px; | |
| align-items: center; | |
| padding: 18px; | |
| background: rgba(17, 19, 21, 0.78); | |
| } | |
| .guess-status { | |
| justify-content: flex-start; | |
| } | |
| .model-state { | |
| min-width: 92px; | |
| padding: 8px 10px; | |
| border-radius: 8px; | |
| background: rgba(53, 198, 122, 0.16); | |
| color: var(--green); | |
| font-size: 0.82rem; | |
| font-weight: 950; | |
| text-align: center; | |
| text-transform: uppercase; | |
| } | |
| .model-state.working { | |
| background: rgba(242, 201, 76, 0.16); | |
| color: var(--yellow); | |
| } | |
| .model-state.missed { | |
| background: rgba(241, 91, 74, 0.14); | |
| color: var(--red); | |
| } | |
| #round-message { | |
| margin: 0; | |
| color: #d8dedb; | |
| font-weight: 720; | |
| } | |
| .guess-list, | |
| .final-guesses { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 8px; | |
| } | |
| .empty-guesses { | |
| margin: 0; | |
| color: var(--muted); | |
| } | |
| .guess-chip { | |
| display: inline-flex; | |
| min-height: 34px; | |
| align-items: center; | |
| padding: 6px 10px; | |
| border: 1px solid var(--line); | |
| border-radius: 8px; | |
| background: rgba(255, 255, 255, 0.08); | |
| color: #edf3f0; | |
| font-weight: 850; | |
| } | |
| .guess-chip.correct { | |
| border-color: rgba(53, 198, 122, 0.7); | |
| background: rgba(53, 198, 122, 0.18); | |
| color: #bfffd9; | |
| } | |
| .guess-chip.wrong { | |
| border-color: rgba(241, 91, 74, 0.55); | |
| background: rgba(241, 91, 74, 0.12); | |
| color: #ffd3ce; | |
| } | |
| .result-panel h1 { | |
| font-size: clamp(3.2rem, 13vw, 6.5rem); | |
| } | |
| .score-row { | |
| margin: 22px 0; | |
| } | |
| .score-row div { | |
| min-width: 0; | |
| flex: 1; | |
| padding: 12px; | |
| border: 1px solid var(--line); | |
| border-radius: 8px; | |
| background: rgba(255, 255, 255, 0.08); | |
| } | |
| .score-row span { | |
| display: block; | |
| color: var(--muted); | |
| font-size: 0.78rem; | |
| font-weight: 900; | |
| text-transform: uppercase; | |
| } | |
| .score-row strong { | |
| display: block; | |
| margin-top: 5px; | |
| overflow-wrap: anywhere; | |
| color: var(--yellow); | |
| font-size: 1.35rem; | |
| } | |
| .summary-box { | |
| margin: 14px 0; | |
| padding: 14px; | |
| border: 1px solid var(--line); | |
| border-radius: 8px; | |
| background: rgba(255, 255, 255, 0.08); | |
| text-align: left; | |
| } | |
| .summary-box p { | |
| margin: 8px 0 0; | |
| color: #e6ece8; | |
| line-height: 1.5; | |
| } | |
| .result-panel .primary-button { | |
| margin: 8px auto 0; | |
| } | |
| @media (max-width: 860px) { | |
| .hud, | |
| .game-grid, | |
| .guess-panel { | |
| grid-template-columns: 1fr; | |
| } | |
| .center-stat { | |
| text-align: left; | |
| } | |
| #restart-button { | |
| justify-self: stretch; | |
| } | |
| .hud-stat { | |
| width: 100%; | |
| } | |
| } | |
| @media (max-width: 560px) { | |
| .screen { | |
| padding: 14px; | |
| } | |
| .start-screen { | |
| justify-content: flex-end; | |
| padding-bottom: 38px; | |
| } | |
| .title-panel h1 { | |
| font-size: clamp(3.4rem, 19vw, 5rem); | |
| } | |
| .banned-list, | |
| .score-row { | |
| grid-template-columns: 1fr; | |
| } | |
| .score-row, | |
| .clue-head, | |
| .input-footer, | |
| .guess-status { | |
| align-items: stretch; | |
| flex-direction: column; | |
| } | |
| .primary-button, | |
| .secondary-button, | |
| .ghost-button { | |
| width: 100%; | |
| } | |
| .start-actions { | |
| width: 100%; | |
| } | |
| #target-word { | |
| font-size: clamp(2.7rem, 17vw, 4.6rem); | |
| } | |
| } | |