/* Vector Hoops — black & white neobrutalist (fleet-aligned) Paper white + near-black ink, 2px ink borders, hard offset block shadows, bold uppercase labels, mono numerals. Color is reserved for DATA: orange = the Chimera / offense, blue = your guess / defense, status greens/reds for match heat. */ :root{ --paper: #fafaf8; --surface: #ffffff; --ink: #111111; --ink-soft: #52514e; --ink-muted: #898781; --hairline: #e1e0d9; --panel-dark: #131312; --data-orange: #eb6834; /* Chimera / offense */ --data-blue: #2a78d6; /* your guess / defense */ --hot: #006300; --warm: #7a5b00; --cold: #d03b3b; --identified: #e8b500; /* IDENTIFIED win state — gold, never red */ --identified-bg: #fff8e0; --silver: #8f96a3; /* Mashup "close enough" (>=92%) win state — a second, distinct WON color, never red */ --silver-bg: #eef1f4; --data-purple: #7d5cc9; /* Archetype slot accent — a third color alongside orange/blue, not a status color */ --shadow-block: 4px 4px 0 var(--ink); --shadow-block-sm: 3px 3px 0 var(--ink); --mono: ui-monospace, "IBM Plex Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --radius: 10px; --gap: clamp(12px, 2.5vw, 18px); /* Fluid layout — mobile-first */ --page-gutter: clamp(12px, 3.2vw, 28px); --layout-max: 720px; --layout-wide: 1120px; --touch-min: 44px; --text-body: clamp(14px, 0.35vw + 13px, 16px); --text-small: clamp(11px, 0.25vw + 10px, 13px); --heading-page: clamp(18px, 2.2vw + 12px, 26px); } *, *::before, *::after{ box-sizing: border-box; } html{ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } html, body{ margin: 0; padding: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: var(--text-body); -webkit-font-smoothing: antialiased; } body{ min-height: 100vh; display: flex; flex-direction: column; } /* Applied to whenever the modal stack is non-empty (any modal or sheet open) and removed once it's empty again — see pushModal/popModal in game.js. Stops background scroll under an open overlay, including the iOS Safari rubber-band bounce via overscroll-behavior. */ body.vh-modal-open{ overflow: hidden; touch-action: none; overscroll-behavior: contain; } button, input{ font-family: inherit; } /* ---------- header / scoreboard strip ---------- */ .vh-header{ display: flex; align-items: center; gap: 12px; flex-wrap: wrap; width: 100%; box-sizing: border-box; padding: 12px var(--page-gutter); padding-top: calc(12px + env(safe-area-inset-top, 0)); background: var(--surface); border-bottom: 2px solid var(--ink); position: sticky; top: 0; z-index: 20; } .vh-header__brand{ display: flex; flex-direction: column; gap: 2px; } .vh-logo{ font-family: var(--mono); font-weight: 800; letter-spacing: 0.04em; font-size: 15px; text-transform: uppercase; color: var(--ink); } @media (min-width: 480px){ .vh-logo{ font-size: 18px; } } .vh-logo__accent{ color: var(--data-orange); } .vh-tagline{ font-size: 11px; font-weight: 600; color: var(--ink-soft); max-width: 260px; line-height: 1.3; } .vh-stats{ display: flex; gap: 0; margin-left: auto; background: var(--surface); border: 2px solid var(--ink); border-radius: 8px; box-shadow: var(--shadow-block-sm); overflow: hidden; } .vh-stat{ display: flex; flex-direction: column; align-items: center; line-height: 1.1; padding: 4px 9px; font-family: var(--mono); } @media (min-width: 480px){ .vh-stat{ padding: 5px 14px; } } .vh-stat + .vh-stat{ border-left: 2px solid var(--ink); } .vh-stat__num{ font-size: 17px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; } .vh-stat__label{ font-size: 9px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-soft); font-weight: 700; } .vh-help-btn{ appearance: none; border: 2px solid var(--ink); background: var(--surface); color: var(--ink); border-radius: 50%; width: 44px; height: 44px; min-width: 44px; font-weight: 800; font-size: 15px; cursor: pointer; box-shadow: var(--shadow-block-sm); } .vh-help-btn:hover{ transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); } .vh-help-btn:active{ transform: translate(3px, 3px); box-shadow: none; } /* ---------- layout ---------- */ main{ flex: 1; width: min(100%, var(--layout-max)); max-width: var(--layout-max); min-width: 0; margin-inline: auto; padding: clamp(16px, 3vw, 24px) var(--page-gutter); display: flex; flex-direction: column; gap: var(--gap); box-sizing: border-box; } .vh-panel, .vh-card, .vh-clue-card, .vh-autocomplete, .vh-guessbar, .vh-play-col{ min-width: 0; } .vh-panel{ display: flex; flex-direction: column; gap: var(--gap); } .vh-card{ background: var(--surface); border: 2px solid var(--ink); border-radius: var(--radius); box-shadow: var(--shadow-block); padding: clamp(12px, 2.5vw, 18px); } /* ---------- prompt ---------- */ .vh-prompt__eyebrow{ font-family: var(--mono); font-size: 12px; font-weight: 800; color: var(--ink); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 6px; border-bottom: 2px solid var(--data-orange); display: inline-block; padding-bottom: 2px; } .vh-prompt__text{ margin: 0; font-size: 16px; line-height: 1.55; color: var(--ink); } .vh-prompt__text b{ color: var(--data-orange); } .vh-chimera-phase{ font-family: var(--mono); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--data-orange); margin: 0 0 12px; line-height: 1.45; } /* ---------- the equation (prompt centerpiece) ---------- */ .vh-equation{ display: flex; align-items: stretch; gap: 8px; margin: 4px 0 12px; } .vh-equation__tile{ flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; text-align: center; border: 2px solid var(--ink); border-radius: 8px; background: var(--paper); padding: 8px 6px; } .vh-equation__tile:not(.vh-equation__tile--target){ flex: 0 1 38%; max-width: 42%; } .vh-equation__tile-label{ font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ink-soft); line-height: 1.35; } /* v4 THREE-PART ANSWERS: each tile's own slot name — Stats / Archetype / Mashup — the equation reads as the puzzle statement itself. */ .vh-equation__tile-kicker{ font-family: var(--mono); font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-muted); } .vh-equation__tile--target .vh-equation__tile-kicker{ color: var(--paper); opacity: 0.7; } /* locked tile states — gold (exact) never red; silver (Mashup >=92%) is a second, distinct WON color, not a lesser one. */ .vh-equation__tile--gold{ border-color: var(--identified); background: var(--identified-bg); box-shadow: 3px 3px 0 var(--identified); } .vh-equation__tile--gold .vh-equation__tile-kicker{ color: #6b5200; } .vh-equation__tile--silver{ border-color: var(--silver); background: var(--silver-bg); box-shadow: 3px 3px 0 var(--silver); } .vh-equation__tile--silver .vh-equation__tile-kicker{ color: var(--ink-soft); } .vh-equation__op{ flex: 0 0 auto; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-weight: 800; font-size: 20px; color: var(--ink); padding: 0 2px; } .vh-equation__tile--target{ flex: 0 1 72px; background: var(--ink); border-color: var(--ink); } .vh-equation__tile-mark{ font-family: var(--mono); font-weight: 800; font-size: 30px; color: var(--data-orange); } /* donor name shown openly in tiles 1 + 2 — the mystery is now the closest real match (the target tile's "?"), not the donors themselves. */ .vh-equation__tile-name{ font-weight: 800; font-size: 12px; color: var(--ink); line-height: 1.25; word-break: break-word; hyphens: auto; } @media (max-width: 639px){ .vh-equation{ flex-direction: column; align-items: stretch; } .vh-equation__tile:not(.vh-equation__tile--target){ flex: 1 1 auto; max-width: none; } .vh-equation__op{ padding: 2px 0; } .vh-equation__tile--target{ flex-basis: auto; max-width: none; } } /* ---------- guess bar / autocomplete ---------- */ .vh-guessbar{ display: flex; flex-direction: column; gap: 10px; align-items: stretch; } /* v5 clue cards: the guessbar card also holds the clue zone + warmth + result sections above/below the input row, so only the input row itself (typeahead + submit + kbd caption + duplicate warning) flips to a row at >=480px — the card as a whole always stacks its sections vertically. */ .vh-guessbar__inputrow{ display: flex; flex-direction: column; gap: 10px; align-items: stretch; } @media (min-width: 480px){ .vh-guessbar__inputrow{ flex-direction: row; flex-wrap: wrap; } } .vh-autocomplete{ position: relative; flex: 1 1 260px; min-width: 0; } .vh-input{ width: 100%; background: var(--surface); border: 2px solid var(--ink); color: var(--ink); border-radius: 8px; padding: 12px 14px; font-size: 16px; min-height: 44px; } .vh-input::placeholder{ color: var(--ink-muted); } .vh-input:focus{ outline: none; border-color: var(--data-blue); box-shadow: 3px 3px 0 var(--data-blue); } .vh-input:disabled{ opacity: 0.45; } .vh-suggestions{ position: absolute; z-index: 70; top: calc(100% + 6px); left: 0; right: 0; margin: 0; padding: 4px; list-style: none; background: var(--surface); border: 2px solid var(--ink); border-radius: 8px; max-height: 320px; overflow-y: auto; box-shadow: var(--shadow-block); } .vh-suggestions li{ padding: 10px 12px; border-radius: 6px; cursor: pointer; font-size: 14px; min-height: 44px; display: flex; align-items: center; color: var(--ink); } .vh-suggestions li.active, .vh-suggestions li:hover{ background: var(--ink); color: var(--paper); } .vh-suggestions li.vh-suggestions__empty{ cursor: default; color: var(--ink-muted); font-style: italic; } .vh-suggestions li.vh-suggestions__empty:hover{ background: transparent; color: var(--ink-muted); } .vh-duplicate-warning{ flex: 1 1 100%; margin: 0; font-size: 12px; font-weight: 700; color: var(--warm); } /* ---------- typeahead obviousness: glyph + chevron + focus hint + kbd caption ---------- */ .vh-input--search{ padding-left: 36px; padding-right: 32px; } .vh-autocomplete__glyph{ position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 15px; opacity: 0.55; pointer-events: none; } .vh-autocomplete__chevron{ position: absolute; right: 12px; top: 50%; transform: translateY(-50%) rotate(0deg); font-size: 14px; font-weight: 800; color: var(--ink-muted); pointer-events: none; transition: opacity 0.12s ease; } .vh-autocomplete.has-value .vh-autocomplete__chevron{ opacity: 0; } .vh-autocomplete__hint{ margin: 6px 0 0; font-size: 12px; font-style: italic; color: var(--ink-muted); } .vh-autocomplete__kbd{ margin: 4px 0 0; font-size: 10px; font-weight: 700; letter-spacing: 0.03em; color: var(--ink-muted); display: none; flex: 1 1 100%; } @media (hover: hover) and (pointer: fine){ .vh-autocomplete__kbd{ display: block; } } /* richer suggestion rows: bold name + season + position chip, so the panel reads as a menu of real player-seasons, not a bare list of text. */ .vh-suggestions__row{ display: flex; align-items: baseline; gap: 8px; } .vh-suggestions__name{ font-weight: 800; flex: 1 1 auto; } .vh-suggestions__season{ font-family: var(--mono); font-size: 12px; color: var(--ink-soft); white-space: nowrap; } .vh-suggestions li.active .vh-suggestions__season, .vh-suggestions li:hover .vh-suggestions__season{ color: var(--paper); opacity: 0.85; } .vh-suggestions__chip{ font-family: var(--mono); font-size: 10px; font-weight: 800; letter-spacing: 0.03em; color: var(--ink-soft); background: var(--paper); border: 1px solid var(--hairline); border-radius: 4px; padding: 1px 6px; white-space: nowrap; } .vh-suggestions li.active .vh-suggestions__chip, .vh-suggestions li:hover .vh-suggestions__chip{ background: transparent; border-color: rgba(250,250,248,0.4); color: var(--paper); } /* ---------- Build-a-Chimera donor picker (Free Play) ---------- */ .vh-picker-card{ display: flex; flex-direction: column; gap: 12px; } .vh-slots-row{ display: flex; flex-direction: column; gap: 12px; } @media (min-width: 600px){ .vh-slots-row{ flex-direction: row; align-items: stretch; } } .vh-slot-card{ flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .vh-slot-card__head{ display: flex; align-items: center; justify-content: space-between; gap: 8px; } .vh-slot-card__title{ font-family: var(--mono); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink); } .vh-slot-card__badge{ font-family: var(--mono); font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #6b5200; background: var(--identified); border: 1px solid var(--ink); border-radius: 999px; padding: 2px 8px; } /* Mashup slot's "close enough" (>=92%, not exact) lock — silver, still a WON state, never a lesser/red one. */ .vh-slot-card__badge--silver{ color: var(--ink-soft); background: var(--silver-bg); border-color: var(--silver); } /* Mashup slot's title/badge row always gets its own full-width line above the clue zone + input row. */ .vh-guessbar__head{ flex: 1 1 100%; } /* Compact feedback line under the two Daily donor-slot inputs — same typography as .vh-guess__line, just tighter above a small card. */ .vh-guess-slot__feedback{ margin-top: 4px; min-height: 1.4em; } /* v5 staged flow: the masked donor name in each card's title ("? · Stats Player") — fills in with the true donor once that stage resolves. */ .vh-clue-card__mask{ color: var(--data-blue); } /* Lock note shown under a later stage's disabled input ("Solve the Stats Player first.") — same italic/muted treatment as other secondary lines, hidden once its gating stage resolves. */ .vh-clue-card__lock-note{ margin: 6px 0 0; font-size: 11px; font-style: italic; color: var(--ink-muted); } /* ---------- v5 clue cards ---------- Each answer slot (Stats / Archetype / Mashup) is one self-contained .vh-card: a numbered head, its own evidence "clue zone" (mini sigma bars + a phrasing-bank sentence + 2-3 extreme-sigma chips, all derived from the exact same TARGET.vector halves the game scores against — see STATS_DIMS/SHOOTING_DIMS in game.js), then its own typeahead/submit/lock state directly below. The clue zone is a