/* Who Am I XI — style.css * * Palette, type and the mark come from ../shared/xi-tokens.css and are not * restated here. Nothing in this file names a colour: every value is a token, * so the game follows the family into dark mode without a second palette. * * THE ONE THING THIS GAME NEEDS THAT THE OTHERS DO NOT. * There are three answers to a guess, not two, and the middle one is the whole * character of the game: naming somebody who really did play for that club is a * NEAR MISS rather than a mistake. So it cannot look like either of the others. * Right is the pitch green and fills; wrong is quiet and does not; the near * miss takes the gold — the family's "the clock has given you something" * colour — because that is what it is. Three states that differ in fill and * weight as well as hue, so none of it rests on colour alone. */ /* NO .sr-only HERE. shared/xi-landing.css already defines it, and a game that restates a shared rule is one edit away from two answers to the same question — the fault the shared layer exists to stop. This file defined it verbatim and aligned_test refused the game for it. The body reset IS this game's to make: the shared chrome styles its own bar and footer and deliberately does not touch the document, so every game in the family resets the margin itself or sits in a browser gutter. */ /* THE FAMILY'S FACE, SAID OUT LOUD. This was `body{margin:0}` and nothing else, so every element that did not name a font inherited the USER AGENT's default — Times New Roman — while the headings, which do name var(--disp), came out in Barlow Condensed. The page read half condensed sans and half serif and nothing in the tree said why: the fonts load here, and every fallback chain in xi-tokens.css ends in sans-serif, so there was no failure to find. The cascade simply never asked. Measured on the live site 17 Sep 2026: getComputedStyle(document.body) returned "Times New Roman" for hilo, grid, whoami and ballpark, and "Public Sans" for the other six. aligned_test now refuses a game whose stylesheet does not set it, so the eleventh cannot arrive in serif. */ body{margin:0;font-family:var(--body)} .app{max-width:760px;margin:0 auto;padding:16px 16px 40px} /* ---- which board ------------------------------------------------------- */ .boardHead{display:flex;align-items:baseline;justify-content:space-between;gap:12px; margin:0 0 14px} .bh-no{font-family:var(--disp);font-weight:700;font-size:20px;color:var(--ink)} .bh-date{font-family:var(--disp);font-size:13px;letter-spacing:.1em; text-transform:uppercase;color:var(--ink-soft)} .lede{margin:0 0 14px;color:var(--ink-soft);font-size:15px;line-height:1.45} /* ---- the eleven doors -------------------------------------------------- */ /* A GRID RATHER THAN A LIST, because eleven doors is a team sheet and the player is looking for their own club rather than reading them in order. */ .doors{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:9px;margin:0 0 18px} .door{display:flex;flex-direction:column;align-items:flex-start;gap:3px; min-height:var(--tap);padding:12px 13px;text-align:left; background:var(--paper);border:1.5px solid var(--line);border-radius:11px; color:var(--ink);transition:border-color .12s ease} .door:hover:not(:disabled){border-color:var(--ink-faint)} .door:active:not(:disabled){transform:translateY(1px)} .d-club{font-family:var(--disp);font-weight:600;font-size:16px;line-height:1.2} /* ONE DOOR A DAY, SHOWN ON THE BOARD. A spent board is not a dead one — the player should still see what the other ten clubs were — but it must not look like a board you can still play, and the one that was theirs has to be findable at a glance. The owner asked to see which player was yours at full time; this is the board half of that. */ .door.spent{opacity:.42;cursor:default} .door.spent:hover{border-color:var(--line)} .door.mine{opacity:1;border-color:var(--pitch);border-width:2px} .d-mine{margin-top:2px;font-family:var(--disp);font-size:10.5px;letter-spacing:.1em; text-transform:uppercase;color:var(--pitch)} .d-left{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)} /* THE DAY'S CAREER LENGTHS, sorted and unattributed. Deliberately quiet: it is a shape of the day rather than a clue to any one door, and styling it as a clue would invite somebody to line it up against the doors. */ /* ONE NUMBER PER PLAYER, AS CHIPS. A bare run of digits reads as noise, and "Player 1 · 3 clubs" reads as a fact — the panel exists to say "there is a one-club man and a journeyman in here today", and it can only say that if the numbers look like something rather than like a list. */ .careers{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0; font-size:12.5px;color:var(--ink-faint);line-height:1.5} .cr-head{width:100%;font-family:var(--disp);font-size:11px;letter-spacing:.1em; text-transform:uppercase;color:var(--ink-faint);margin-bottom:2px} .cr-one{display:inline-flex;align-items:baseline;gap:5px;padding:3px 8px; border:1px solid var(--line);border-radius:999px;color:var(--ink-soft)} .cr-one b{font-family:var(--disp);font-weight:600;font-size:10.5px; letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)} /* ---- the door being played --------------------------------------------- */ .doorHead{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0 0 12px} .dh-club{font-family:var(--disp);font-weight:700;font-size:clamp(22px,6vw,30px); line-height:1.1;color:var(--ink)} .dh-left{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)} /* ---- the match clock and what the board is worth ----------------------- */ /* THE GOLD IS THE CLOCK'S, which is the family's pairing — the word search's .clock is --xi-ink too. Green means "you got something right" and is spent on the kick-off and the goal state, nowhere else. */ .strip{position:relative;height:5px;border-radius:3px;background:var(--line); overflow:hidden;margin:0 0 8px} .stripFill{height:100%;width:0;background:var(--xi-ink);transition:width .25s linear} .stripFill.late{background:var(--danger)} .matchHead{display:flex;align-items:baseline;justify-content:space-between;gap:12px; margin:0 0 14px} .clock{font-family:var(--disp);font-weight:700;font-size:clamp(26px,7vw,34px); line-height:1;color:var(--xi-ink)} .clock .prime{font-size:.6em;margin-left:1px} .worthBox{display:flex;flex-direction:column;align-items:flex-end;gap:1px} .worthBox .label{font-size:11px;letter-spacing:.1em;text-transform:uppercase; color:var(--ink-faint)} .worthVal{font-family:var(--disp);font-weight:700;font-size:22px;line-height:1; color:var(--ink)} .worthVal.low{color:var(--danger)} .clues{display:flex;flex-direction:column;gap:8px;margin:0 0 14px} .clue{padding:11px 13px;background:var(--paper);border:1px solid var(--line); border-radius:10px} .c-label{display:block;font-family:var(--disp);font-size:11.5px;letter-spacing:.11em; text-transform:uppercase;color:var(--ink-faint);margin-bottom:3px} .c-body{display:block;font-size:15px;line-height:1.5;color:var(--ink)} /* ---- the career, as a ladder ------------------------------------------- */ /* ONE CLUB A ROW, chronological, years left and appearances right. It printed as one run-on line, and the shape of a career IS the puzzle: finding the big club in a wall of text takes effort and none at all in a column. */ .spells{display:flex;flex-direction:column;gap:1px;margin-top:2px} .spell{display:grid;grid-template-columns:minmax(72px,auto) 1fr auto;gap:10px; align-items:baseline;padding:4px 6px;border-radius:5px;font-size:14px} .sp-years{color:var(--ink-faint);font-variant-numeric:tabular-nums;font-size:12.5px} .sp-club{color:var(--ink);min-width:0} .sp-apps{color:var(--ink-soft);font-variant-numeric:tabular-nums;font-size:12.5px; white-space:nowrap} /* THE DOOR'S OWN CLUB, MARKED IN PLACE. Without it a player hunts the list for the club they picked before they can read outward from it — the one thing they are certain to want to do. Marked by fill AND by a rule down the edge, so it does not rest on colour alone. */ .spell.mine{background:var(--tint);box-shadow:inset 2px 0 0 var(--pitch)} .spell.mine .sp-club{font-weight:700} /* A LOAN IS NEVER THE ANSWER and it lengthens the hardest element on the page to read, so it is quieter — kept, because removing it would change the career, but not competing with the spells that matter. */ .spell.loan .sp-club,.spell.loan .sp-years,.spell.loan .sp-apps{color:var(--ink-faint)} .sp-loan{margin-left:6px;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase; color:var(--ink-faint)} /* The reveal, which is the one thing on this page that IS an answer. */ .c-body.answer{font-family:var(--disp);font-weight:700;font-size:22px;color:var(--danger)} /* ---- the ladder --------------------------------------------------------- */ .ladder{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px} .rung{display:inline-flex;align-items:center;gap:9px;min-height:var(--tap); padding:9px 14px;background:none;border:1px dashed var(--line);border-radius:10px; color:var(--ink-soft);font-family:var(--disp);font-size:14px} .rung:hover:not(:disabled){border-color:var(--ink-faint);color:var(--ink)} .r-label{font-weight:600} .r-cost{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)} .r-sub{font-family:var(--disp);font-size:10.5px;letter-spacing:.1em; text-transform:uppercase;color:var(--ink-faint)} /* LEAVING THE PITCH IS NOT A RUNG. It is not priced and it is not bought, so it does not sit among the things you buy — it is quiet, apart, and below. A button that ends the board must not be the easiest one to hit by accident. */ .giveup{display:block;margin:6px 0 0;padding:6px 2px;background:none;border:0; color:var(--ink-faint);font-size:13px;text-decoration:underline; text-underline-offset:3px} .giveup:hover{color:var(--danger)} /* ---- guessing ----------------------------------------------------------- */ .guessRow{display:flex;gap:8px;margin:0 0 6px} #guessInput{flex:1 1 auto;min-width:0;min-height:var(--tap);padding:11px 13px; background:var(--paper);border:1.5px solid var(--line);border-radius:10px; color:var(--ink);font-size:16px;font-family:inherit} #guessInput:focus{outline:none;border-color:var(--pitch)} .guessRow .kick{flex:0 0 auto} /* THE BUTTON IS A BUTTON. .kick was never given a face in this stylesheet -- the other games' own sheets each define it -- so "Name him" beside the box drew as the browser's grey default, faded further while disabled, and read as a second input (the owner, 25 Sep 2026). The family's face, as Scrambled's: display type on the pitch colour. */ .wa-ed .kick{font-family:var(--disp);font-weight:600;font-size:17px;letter-spacing:.04em; text-transform:uppercase;min-height:var(--tap);padding:0 18px;border-radius:10px; border:1px solid var(--pitch-deep,var(--pitch));background:var(--pitch);color:#fff;cursor:pointer} .wa-ed .kick:focus-visible{outline:2px solid var(--ink);outline-offset:2px} /* The type-ahead. It lists names from the ANSWER SPACE — the same 3,146 every day — so it narrows typing rather than narrowing the puzzle. */ .suggest{display:flex;flex-direction:column;gap:4px;margin:0 0 12px} .sg{text-align:left;min-height:38px;padding:8px 12px;background:var(--paper); border:1px solid var(--line);border-radius:8px;color:var(--ink);font-size:15px} .sg:hover{border-color:var(--ink-faint)} .feedback{min-height:1.5em;margin:0 0 4px;font-family:var(--disp);font-weight:600; font-size:15px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft)} .feedback.goal{color:var(--ok)} .feedback.miss{color:var(--ink-soft)} /* THE NEAR MISS takes the gold, which in this family means "you have been given something" — and that is what it is: he played there, so the door is understood even though the name is wrong. */ .feedback.near{color:var(--xi-ink)} /* THE VERDICT AS A CALLOUT (the owner, 30 Sep 2026: "hard to see clearly right now"). Right is green with a tick, wrong is red with a cross, a near miss is gold -- each a box of its own colour with the mark in a disc, so the answer reads at a glance and not only to somebody reading the words. It arrives with a small pop, and a wrong one shakes, once; game.js replays it on every verdict. Words in sentence case at reading size: capitals at 15px were the reason it was hard to read. */ .feedback:not(:empty){display:flex;align-items:center;gap:10px;min-height:0;margin:0 0 8px; padding:10px 14px;border-radius:10px;border:1.5px solid var(--line);background:var(--card); font-family:var(--body);font-weight:700;font-size:16px;letter-spacing:0;text-transform:none; line-height:1.3;color:var(--ink);animation:fbIn .28s ease-out} .feedback:not(:empty)::before{content:"";flex:none;display:flex;align-items:center;justify-content:center; width:26px;height:26px;border-radius:50%;font-size:15px;font-weight:700;line-height:1;color:var(--card)} .feedback.goal:not(:empty){border-color:var(--ok);background:color-mix(in srgb,var(--ok) 12%,var(--card));color:var(--ok)} .feedback.goal:not(:empty)::before{content:"\2713";background:var(--ok)} .feedback.miss:not(:empty){border-color:var(--danger);background:color-mix(in srgb,var(--danger) 10%,var(--card));color:var(--danger); animation:fbIn .28s ease-out,fbShake .4s ease-in-out .05s} .feedback.miss:not(:empty)::before{content:"\2715";background:var(--danger)} .feedback.near:not(:empty){border-color:var(--gold);background:color-mix(in srgb,var(--gold) 16%,var(--card));color:var(--ink)} .feedback.near:not(:empty)::before{content:"!";background:var(--gold);color:var(--ink)} @keyframes fbIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}} @keyframes fbShake{0%,100%{translate:0}20%{translate:-6px}40%{translate:6px}60%{translate:-4px}80%{translate:3px}} @media (prefers-reduced-motion:reduce){.feedback:not(:empty){animation:none}} .tries{margin:0 0 14px;font-size:12.5px;color:var(--ink-faint)} /* ---- the end ------------------------------------------------------------ */ /* The rest of the end is the family's Full Time panel (shared/xi-fulltime.css). */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important} } /* ============ THE LANDING'S OWN TWO PIECES ============ * * Everything else on the landing is shared/xi-landing.css. These two are not, * and deliberately: the art in the hero DRAWS THIS GAME and every game's is a * different drawing, so what could live in shared is the placement, which is * eleven lines, and what could not is the picture. The crossword carries the * same eleven lines for its own grid. When a third game wants hero art they * should be lifted into xi-landing.css in one move and both copies deleted — * two is a pair, three is a habit. */ /* The shared lattice is turned off rather than drawn under this, because two patterns at two spacings is a moire and not depth. */ #waToday.hero::after{display:none} .home-choice.hero .hc-art{ /* Fitted whole, not cropped to fill: sliced to cover, the card's height cuts the corridor off and leaves doors that say nothing about the game. */ position:absolute;right:8px;top:0;height:100%;width:min(66%,460px); z-index:0;pointer-events:none;overflow:visible; /* Faded out towards the words. The card reads left to right and the art has to give way before it reaches the heading. */ -webkit-mask-image:linear-gradient(100deg,transparent 0%,transparent 22%,#000 72%); mask-image:linear-gradient(100deg,transparent 0%,transparent 22%,#000 72%); } /* --on-pitch rather than --hero-rule: the rule token is tuned for a lattice meant to be sensed and not seen, and at that weight the doors disappeared entirely. Both tokens invert with the theme, so this is a weight change and not a colour one. */ .hc-art-doors rect{fill:none;stroke:var(--on-pitch);stroke-width:1;opacity:.14} /* The open one. It is the only door allowed to be seen rather than sensed, because it is the one carrying the idea. */ .hc-art-doors rect.b{fill:var(--on-pitch);stroke:none;opacity:.09} .hc-art-ink circle.d{fill:var(--on-pitch);opacity:.2} .hc-art-ink .r{fill:var(--on-pitch);opacity:.17} /* Narrow screens: the words need the whole card, so the art steps back into a corner rather than sitting under them. */ @media (max-width:560px){ .home-choice.hero .hc-art{width:min(78%,320px);opacity:.55} } /* The four steps. A numbered list because the order is the point — the door comes before the free spell, and the free spell before the substitutions. */ .how-steps{ margin:9px 0 0;padding-left:19px;font-size:13.5px;line-height:1.5; color:var(--ink-soft); } .how-steps li{margin:0 0 7px} .how-steps li:last-child{margin-bottom:0} .how-steps b{color:var(--ink);font-weight:600} /* ================= THE APPROVED DESIGN ================= Graeme approved an editorial direction for this game on 17 Sep 2026: warm paper, deep green, a muted green-grey portrait panel, white-paper cards and restrained gold. The palette is declared here rather than in the shared tokens, because the family's tokens paint ten games and this is one game's look. Everything structural still comes from --body/--disp. */ .wa-ed{ --wa-paper:#F3F0E7; --wa-ink:#153E2D; --wa-soft:#637066; --wa-card:#FFFDF7; --wa-line:#DCDFD2; --wa-gold:#8B691B; --wa-face:#CFD7CF; } :root[data-theme="dark"] .wa-ed{ --wa-paper:#18221E; --wa-ink:#EDF2E9; --wa-soft:#B8C4B9; --wa-card:#222B25; --wa-line:#384B3F; --wa-gold:#E4C865; --wa-face:#42514A; } .wa-ed .eyebrow{font-family:var(--disp);font-weight:600;font-size:12px; letter-spacing:.2em;text-transform:uppercase;color:var(--wa-soft);margin:0 0 6px} .wa-ed .waTitle{font-family:var(--disp);font-weight:700; font-size:clamp(26px,4.4vw,38px);line-height:1.02;color:var(--wa-ink);margin:0 0 8px} .wa-ed .waSub{font-family:var(--disp);font-weight:700;font-size:23px; color:var(--wa-ink);margin:0} .wa-ed .lede{color:var(--wa-soft);font-size:15px;margin:0 0 16px;max-width:60ch} /* The rule, set apart with a gold edge because it governs every card below. */ .wa-ed .mechanism{margin:0 0 22px;padding:12px 16px;font-size:14px; color:var(--wa-ink);background:rgba(21,62,45,.05); border-left:3px solid var(--wa-gold);line-height:1.5} :root[data-theme="dark"] .wa-ed .mechanism{background:rgba(255,255,255,.05)} .wa-ed .chooseHead,.wa-ed .cluesHead{display:flex;align-items:baseline; justify-content:space-between;gap:12px;margin:0 0 10px} .wa-ed .ch-label,.wa-ed .ch-hint{font-family:var(--disp);font-size:12px; letter-spacing:.16em;text-transform:uppercase;color:var(--wa-soft)} /* ---- the eleven cards ---- */ .wa-ed .doors{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px} .wa-ed .door{display:flex;flex-direction:column;align-items:flex-start;gap:2px; min-height:104px;padding:14px 16px 12px;text-align:left;cursor:pointer; background:var(--wa-card);border:1px solid var(--wa-line);border-radius:6px; color:var(--wa-ink);font-family:var(--body); transition:border-color .12s ease,background .12s ease,transform .12s ease} .wa-ed .door:hover:not([disabled]){border-color:var(--wa-soft);transform:translateY(-1px)} .wa-ed .door .d-club{font-family:var(--disp);font-weight:700;font-size:17px;line-height:1.1} .wa-ed .door .d-year{font-family:var(--disp);font-weight:700;font-size:31px; line-height:1;color:var(--wa-ink);margin:4px 0 2px} .wa-ed .door .d-cap{font-family:var(--disp);font-size:10.5px;letter-spacing:.14em; text-transform:uppercase;color:var(--wa-soft)} /* THE CHOSEN ONE, and it must not rely on colour alone. */ .wa-ed .door.on{background:var(--wa-ink);border-color:var(--wa-ink);color:#F6F3EA} .wa-ed .door.on .d-year,.wa-ed .door.on .d-cap{color:#F6F3EA} .wa-ed .door.on::after{content:"\2713";position:absolute;right:14px;bottom:12px; font-size:17px;font-weight:700} .wa-ed .door{position:relative} .wa-ed .door:focus-visible{outline:3px solid var(--wa-gold);outline-offset:2px} .wa-ed .door[disabled]{opacity:.5;cursor:default} .wa-ed .door.mine{opacity:1;border-color:var(--wa-gold)} .wa-ed .door .d-mine{font-family:var(--disp);font-size:10.5px;letter-spacing:.14em; text-transform:uppercase;color:var(--wa-gold);margin-top:4px} /* ---- committing ---- */ .wa-ed .commit{display:flex;align-items:center;justify-content:space-between; gap:18px;flex-wrap:wrap;margin:22px 0 0;padding:18px 0 0; border-top:1px solid var(--wa-line)} .wa-ed .cm-label{display:block;font-family:var(--disp);font-size:11px; letter-spacing:.18em;text-transform:uppercase;color:var(--wa-soft)} .wa-ed .cm-pick{display:block;font-family:var(--disp);font-weight:700; font-size:21px;color:var(--wa-ink);margin:3px 0 2px;min-height:24px} .wa-ed .cm-note{display:block;font-size:13px;color:var(--wa-soft)} .wa-ed .commit .kick{min-height:52px;padding:14px 26px} .wa-ed .kick[disabled]{opacity:.45;cursor:default} /* ---- the player ---- */ .wa-ed .playHead{display:flex;align-items:flex-start;justify-content:space-between; gap:20px;flex-wrap:wrap;margin:0 0 14px} .wa-ed .matchHead{display:flex;gap:26px;align-items:flex-start} .wa-ed .mh-one{display:flex;flex-direction:column;gap:3px} .wa-ed .mh-one .label{font-family:var(--disp);font-size:10.5px;letter-spacing:.16em; text-transform:uppercase;color:var(--wa-soft)} .wa-ed .matchHead .clock,.wa-ed .matchHead .worthVal{font-family:var(--disp); font-weight:700;font-size:30px;line-height:1;color:var(--wa-ink)} .wa-ed .matchHead .of{font-size:12px;color:var(--wa-soft);margin-left:5px} .wa-ed .profile{display:grid;grid-template-columns:200px minmax(0,1fr); background:var(--wa-card);border:1px solid var(--wa-line);border-radius:6px; overflow:hidden;margin:0 0 20px} .wa-ed .pf-face{position:relative;background:var(--wa-face);display:flex; align-items:flex-end;justify-content:center} .wa-ed .pf-face img{display:block;width:100%;height:100%;object-fit:cover; object-position:50% 12%} .wa-ed .pf-q{position:absolute;top:14px;right:14px;width:38px;height:38px; border-radius:50%;background:#F2CE55;color:#1D3F2C;display:flex; align-items:center;justify-content:center;font-family:var(--disp); font-weight:700;font-size:21px} .wa-ed .pf-cap{position:absolute;left:0;right:0;bottom:0;padding:9px 12px; background:var(--wa-ink);color:#F6F3EA;font-family:var(--disp);font-size:16px; line-height:1.1;text-transform:uppercase} .wa-ed .pf-cap b{display:block;font-size:10.5px;letter-spacing:.16em; color:#C8DCCF;font-weight:600;margin-bottom:2px} .wa-ed .pf-facts{padding:20px 22px;display:flex;flex-direction:column;min-width:0} .wa-ed .pf-kicker{font-family:var(--disp);font-size:10.5px;letter-spacing:.16em; text-transform:uppercase;color:var(--wa-soft)} .wa-ed .pf-pre{font-size:14px;color:var(--wa-soft);margin:12px 0 2px} .wa-ed .pf-club{font-family:var(--disp);font-weight:700; font-size:clamp(24px,3.4vw,32px);line-height:1.05;color:var(--wa-ink)} .wa-ed .pf-years{font-family:var(--disp);font-weight:700;font-size:21px; color:var(--wa-gold);margin:4px 0 0} .wa-ed .pf-years i{font-style:normal;margin:0 9px;color:var(--wa-soft)} .wa-ed .pf-nums{display:flex;gap:34px;margin:16px 0 0;padding:14px 0 0; border-top:1px solid var(--wa-line)} .wa-ed .pf-num{display:flex;flex-direction:column;gap:2px; font-family:var(--disp);font-size:10.5px;letter-spacing:.14em; text-transform:uppercase;color:var(--wa-soft)} .wa-ed .pf-num b{font-size:31px;line-height:1;color:var(--wa-ink)} .wa-ed .guessAsk{font-family:var(--disp);font-weight:700;font-size:19px; color:var(--wa-ink);margin:0 0 8px} .wa-ed .cluesHead{margin:26px 0 12px} /* ---- the two hint cards ---- */ .wa-ed .ladder{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px} .wa-ed .clues{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px; margin:16px 0 0} .wa-ed .rung,.wa-ed .clue{background:var(--wa-card);border:1px solid var(--wa-line); border-radius:6px;padding:16px 18px;text-align:left;color:var(--wa-ink)} .wa-ed .rung{display:flex;flex-direction:column;align-items:flex-start;gap:4px; cursor:pointer;font-family:var(--body);min-height:96px; transition:border-color .12s ease,transform .12s ease} .wa-ed .rung:hover:not([disabled]){border-color:var(--wa-soft);transform:translateY(-1px)} .wa-ed .rung:focus-visible{outline:3px solid var(--wa-gold);outline-offset:2px} .wa-ed .rung .r-sub{font-family:var(--disp);font-size:10.5px;letter-spacing:.16em; text-transform:uppercase;color:var(--wa-soft)} .wa-ed .rung .r-label{font-family:var(--disp);font-weight:700;font-size:21px;line-height:1.1} /* THE PRICE, BEFORE IT IS SPENT, and in gold so it reads as the cost rather than as part of the label. */ .wa-ed .rung .r-cost{font-family:var(--disp);font-weight:700;font-size:13px; letter-spacing:.06em;color:var(--wa-gold)} .wa-ed .clue .c-label{display:block;font-family:var(--disp);font-weight:700; font-size:21px;line-height:1.1;margin:0 0 8px} .wa-ed .clue .c-body{display:block;font-size:14px;line-height:1.55;color:var(--wa-ink)} /* The career as a timeline, the chosen spell marked in place. */ .wa-ed .clue .spell{display:grid;grid-template-columns:82px minmax(0,1fr); gap:2px 12px;padding:7px 9px;border-left:2px solid var(--wa-line); font-size:13px;align-items:baseline} .wa-ed .clue .spell.mine{background:rgba(21,62,45,.07);border-left-color:var(--wa-gold)} :root[data-theme="dark"] .wa-ed .clue .spell.mine{background:rgba(255,255,255,.07)} .wa-ed .clue .sp-years{font-family:var(--disp);font-size:12px;letter-spacing:.04em; color:var(--wa-soft)} .wa-ed .clue .sp-club{font-weight:600} .wa-ed .giveup{margin-top:22px} /* ---- the widths ---- */ @media (max-width:900px){ .wa-ed .doors{grid-template-columns:repeat(3,minmax(0,1fr))} .wa-ed .profile{grid-template-columns:150px minmax(0,1fr)} } @media (max-width:700px){ .wa-ed .doors{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} .wa-ed .ladder,.wa-ed .clues{grid-template-columns:1fr} /* THE PROFILE STAYS A PROFILE ON A PHONE. The brief asks for the full human figure kept rather than cropped to a stripe, so the panel stacks and the portrait takes a readable height instead of being squeezed to a column. */ .wa-ed .profile{grid-template-columns:1fr} .wa-ed .pf-face{height:230px} .wa-ed .pf-face img{object-position:50% 18%} .wa-ed .playHead{gap:14px} .wa-ed .matchHead{gap:22px} .wa-ed .commit{gap:14px} .wa-ed .commit .kick{width:100%} } @media (max-width:420px){ /* TWO ACROSS ON A PHONE, NOT ONE. This dropped to a single column here, and the comment on .doors says why that is the wrong shape: "a grid rather than a list, because eleven doors is a team sheet and the player is looking for their own club rather than reading them in order." One column makes it the list again, and a list of eleven is two screens of scrolling before you have seen every club you could pick. Measured at 375x667 on the live board: 1195px of doors became 631px, and the whole choice plus the Play button now sits in about one screen instead of two. No club name wraps at the 167px this gives them — Nottingham Forest, Sheffield United, Newcastle United and AFC Bournemouth are the long ones and all four still fit on one line. The eleventh takes the full width rather than sitting half-width beside a gap, so the odd one out reads as deliberate. Eleven is odd every day, so this is the shape every day. */ .wa-ed .doors{grid-template-columns:repeat(2,minmax(0,1fr))} .wa-ed .door:last-child{grid-column:1 / -1} .wa-ed .door{min-height:0} .wa-ed .door .d-year{font-size:28px} .wa-ed .pf-nums{gap:24px} } /* ---- THE LOCKED SCREEN ---------------------------------------------------- The owner's ruling, 24 Sep 2026: while playing, the page is the screen and nothing scrolls, at every size, with the elements scaling up. body.locked is set by game.js checkRoom() for the round and Full Time (the doors stay a page), and taken off when the round's fixed parts cannot fit. On a phone the profile goes side by side -- the portrait a third of the width, the facts beside it -- rather than stacked at 390px; the two clue buttons sit side by side; and the clues bought take the height that is left and scroll inside their panel. Give up stays at the foot. Full Time scrolls inside itself. */ body.locked{height:100vh;height:100dvh;overflow:hidden;display:flex;flex-direction:column} body.locked>*{flex:none} body.locked>footer{display:none} body.locked>#waGame{flex:1 1 auto;min-height:0;display:flex;flex-direction:column} body.locked #waGame>main.app{flex:1 1 auto;min-height:0;width:100%;max-width:900px;box-sizing:border-box; margin:0 auto;padding:6px 12px 8px;display:flex;flex-direction:column} body.locked #waGame .app>*{flex:none} body.locked #waGame .app>.screen:not([hidden]){flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden} /* Everything but the clues keeps its own height. Not `>*` with the clues set apart below: an id outranks their class, and the panel could not shrink -- QuickFire's first build had exactly this. */ body.locked #waGame .screen>:not(.clues):not(.profile){flex:none} body.locked #waGame .screen>.profile{flex:none} /* The page's own name and tabs are the landing's; during a round the bar says where you are. */ body.locked .site-ident,body.locked .site-head{display:none} /* The family's top bar stands in for the heading, the clock and the points on the play screen (shared/xi-matchbar.css), and names the board itself. */ #screenPlay > .playHead, #screenPlay > .strip{display:none} .wa-ed .app:has(#screenPlay:not([hidden])) .boardHead{display:none} body.locked .wa-ed .boardHead{margin-bottom:4px} body.locked .wa-ed .playHead{margin:0 0 8px;gap:12px} body.locked .wa-ed .matchHead .clock,body.locked .wa-ed .matchHead .worthVal{font-size:26px} body.locked .wa-ed .profile{grid-template-columns:34% minmax(0,1fr);margin:0 0 10px} body.locked .wa-ed .pf-face{height:auto;min-height:120px} body.locked .wa-ed .pf-facts{padding:10px 14px} body.locked .wa-ed .pf-pre{margin:6px 0 2px} body.locked .wa-ed .pf-club{font-size:clamp(20px,5vw,30px)} body.locked .wa-ed .pf-years{font-size:18px} body.locked .wa-ed .pf-nums{margin:8px 0 0;padding:8px 0 0;gap:20px} body.locked .wa-ed .pf-num b{font-size:24px} body.locked .wa-ed .suggest{max-height:30vh;overflow:auto} /* NOTHING HOLDS A LINE FOR WHAT HAS NOT HAPPENED. The empty feedback line, the empty tries line and the empty type-ahead kept about 70px between the box and "Need another clue?" on a 412 phone (the owner, 25 Sep 2026: "a little wasted white space so move it up"). Each comes back the moment it has something to say, and the clue panel under them is what gives way. Was the short phone's rule alone; it is every size's. */ body.locked .wa-ed .feedback:empty,body.locked .wa-ed .tries:empty,body.locked .wa-ed .suggest:empty, body.locked .wa-ed .ladder:empty{display:none} body.locked .wa-ed .cluesHead{margin:10px 0 8px} body.locked .wa-ed .ladder{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} body.locked .wa-ed .rung{min-height:0;padding:10px 12px} body.locked .wa-ed .rung .r-label{font-size:17px} body.locked .wa-ed .clues{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;margin:10px 0 0;align-content:start} body.locked .wa-ed .giveup{margin-top:8px} /* THE RESULT SCROLLS IN ITSELF, and this rule has to OUTRANK the screen rule above to say so. It read `body.locked #screenDone:not([hidden])` -- one id against that rule's id and four classes -- so it never applied: Full Time was overflow:hidden, and a result longer than the screen was cut off with no way to reach the rest. A script can still set scrollTop on a hidden box, which is how a check that moved it by hand passed over it (29 Sep 2026). */ body.locked #waGame .app>#screenDone:not([hidden]){overflow:auto;overscroll-behavior:contain} /* On a phone the strapline and the title above the clock ("One career. One name.") give their 80px to the round: the board's heading already says what this is, and the clock and the points are what the round needs. */ @media (max-width:700px){ body.locked .wa-ed .playHead>div:first-child{display:none} } /* A SHORT PHONE (360x640 and the like). The round must fit, so the lines that repeat what is in front of the player give way: "Recognise the career?" above a box that says "Name him", the hint under "Need another clue?" that the buttons' own prices already say, and the empty feedback line, which comes back the moment there is something to say. */ @media (max-height:700px){ body.locked .wa-ed .guessAsk,body.locked .wa-ed .ch-hint{display:none} body.locked .wa-ed .feedback:empty,body.locked .wa-ed .tries:empty{display:none} body.locked .wa-ed .rung{padding:8px 10px;gap:2px} body.locked .wa-ed .rung .r-sub{display:none} body.locked .wa-ed .pf-nums{margin-top:4px;padding-top:4px} body.locked .wa-ed .guessRow{margin-bottom:4px} } /* THE FRIENDS CLUES ARE IN THE PROFILE (#clueStack, written into it by tools/build_friendswhoami.js), not in the clue panel under the buttons, so there the profile is what takes the height that is left and its facts scroll in themselves. The rule is here because this stylesheet is the Friends one too; in football there is no #clueStack and it does nothing. */ body.locked .wa-ed .profile:has(#clueStack){flex:1 1 auto;min-height:0} body.locked .wa-ed .profile:has(#clueStack) .pf-facts{overflow:auto;overscroll-behavior:contain;min-height:0} body.locked .wa-ed .screen:has(#clueStack) .clues{flex:none} /* AND UNTIL A CLUE IS BOUGHT, THE PROFILE TAKES WHAT THE CLUE PANEL WOULD. The panel is what takes the spare height, and empty it left a quarter of a 412 screen blank between the buttons and Give up (in the app, 25 Sep 2026; the owner's rule is that a locked screen scales to fill it). The starting clue is what the player is reading then, so it is what grows, its type with it; the first clue bought hands the height back to the panel. */ body.locked .wa-ed .screen:has(#clues:empty) #clues{flex:none;margin:0} body.locked .wa-ed .screen:has(#clues:empty) .profile:not(:has(#clueStack)){flex:1 1 auto;min-height:0;container-type:size} body.locked .wa-ed .screen:has(#clues:empty) .profile:not(:has(#clueStack)) .pf-club{font-size:clamp(20px,min(8cqw,11cqh),44px)} body.locked .wa-ed .screen:has(#clues:empty) .profile:not(:has(#clueStack)) .pf-years{font-size:clamp(18px,min(5cqw,7cqh),28px)} body.locked .wa-ed .screen:has(#clues:empty) .profile:not(:has(#clueStack)) .pf-num b{font-size:clamp(24px,min(7cqw,10cqh),44px)} /* The facts sit in the middle of their column rather than leaving its lower half empty; the portrait keeps the phone's own crop, on the head. And on a phone, where the locked screen squeezed the profile into two columns, it stacks the way the phone's profile was designed to -- "the full human figure kept rather than cropped to a stripe" -- with the portrait taking the height and the facts under it. */ body.locked .wa-ed .screen:has(#clues:empty) .profile:not(:has(#clueStack)) .pf-facts{justify-content:center} /* THE WHOLE PORTRAIT, NOT A BAND OF IT. The box this profile grows into can be any shape -- 412x128 on a phone with a long starting clue, 252x550 on a tablet -- and a square picture covering it shows a strip: forehead to chin in the app (25 Sep 2026), the nose and the back of the head elsewhere. So it is fitted whole, sitting on the caption, on the picture's own light grey so the margins either side are part of it; the caption moves out from over the picture to under it. */ body.locked .wa-ed .screen:has(#clues:empty) .profile:not(:has(#clueStack)) .pf-face{background:#DCE1DF;flex-direction:column;align-items:stretch} body.locked .wa-ed .screen:has(#clues:empty) .profile:not(:has(#clueStack)) .pf-face img{flex:1 1 auto;min-height:0;height:auto;object-fit:contain;object-position:50% 100%} body.locked .wa-ed .screen:has(#clues:empty) .profile:not(:has(#clueStack)) .pf-cap{position:static} @media (max-width:700px) and (min-height:701px){ /* The portrait keeps the phone's own proportions and crop -- a box about 230px high, the head at 18% -- because a square picture in a box that grows wide and short is cropped to the crown or to the hair (both found in the app, 25 Sep 2026). The facts under it take the spare height and sit in the middle of it. */ /* The facts are sized first and never cut; the portrait takes what they leave, up to 260px; anything beyond that is the facts' too. */ body.locked .wa-ed .screen:has(#clues:empty) .profile:not(:has(#clueStack)){grid-template-columns:1fr;grid-template-rows:minmax(0,260px) 1fr} body.locked .wa-ed .screen:has(#clues:empty) .profile:not(:has(#clueStack)) .pf-face{height:auto;min-height:0} } /* THE WAY BACK, under the family's Full Time panel (shared/xi-fulltime.css): a quiet link-weight button rather than the browser's default one. */ #backToDoors{display:block;margin:6px auto 0;min-height:var(--tap);padding:8px 14px;border:0;background:none; color:var(--ink-soft);font-family:var(--body);font-weight:600;font-size:14px;cursor:pointer} /* ==== GENERATED by tools/build_friendswhoami.js: the Friends round screen ==== */ /* THE DAY'S CARDS, ACROSS THE TOP OF THE ROUND: five chips, each its number and, once closed, who it was -- green for got, the danger colour for told -- and the one in play ringed in gold. One row at every width: the names shrink and clip before the row wraps. */ .wa-ed .frStrip{list-style:none;margin:0 0 10px;padding:0;display:grid; grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:6px} .wa-ed .frs{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:0; padding:5px 4px;border-radius:8px;border:1.5px solid var(--line);background:var(--card); color:var(--ink-soft)} .wa-ed .frs-n{font-family:var(--disp);font-weight:700;font-size:12px;letter-spacing:.08em;line-height:1.1} .wa-ed .frs-a{max-width:100%;font-size:13px;font-weight:600;line-height:1.25; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)} .wa-ed .frs.got{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 10%,var(--card))} .wa-ed .frs.got .frs-a{color:var(--ok)} .wa-ed .frs.lost{border-color:var(--danger);background:color-mix(in srgb,var(--danger) 8%,var(--card))} .wa-ed .frs.lost .frs-a{color:var(--danger)} .wa-ed .frs.now{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold);background:color-mix(in srgb,var(--gold) 14%,var(--card))} .wa-ed .frs:not(.got):not(.lost):not(.now) .frs-a{color:var(--ink-faint)} body.locked .wa-ed .frStrip{margin-bottom:6px} /* NO PORTRAIT PANEL (the owner, 30 Sep 2026: "On friends who am I we don't need the green box, that is football related"). Football's panel is where the mystery player's picture goes; here it was a door drawn in CSS standing in for a picture there is none of, and it took a third of the card from the clues. The clues take the card's whole width, at every size, locked or not. */ .wa-ed .pf-face{display:none} .wa-ed .profile, body.locked .wa-ed .profile{grid-template-columns:minmax(0,1fr)} /* THE KICKER NAMES THE DOOR, and it is the only fact the player had when they chose it -- so it sits where football's "your starting clue" did. */ .wa-ed .pf-facts .pf-kicker{display:block;margin-bottom:2px} /* THE CLUES, hardest first, each on its own card. The sentence is the game, so it gets the type: larger, set as a quotation, with room around it. */ .wa-ed .clueStack{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:10px} .wa-ed .fclue{ position:relative;padding:12px 14px 12px 16px;border-radius:8px; background:var(--wa-card, var(--paper));border:1px solid var(--wa-line, var(--line)); box-shadow:inset 3px 0 0 var(--pitch); } .wa-ed .fclue + .fclue{box-shadow:inset 3px 0 0 var(--wa-gold, var(--gold))} .wa-ed .fc-n{ display:block;font-family:var(--disp);font-size:10.5px;letter-spacing:.14em; text-transform:uppercase;color:var(--ink-soft);margin-bottom:4px; } .wa-ed .fc-text{display:block;font-size:17px;line-height:1.45;color:var(--ink);quotes:"\201C" "\201D"} .wa-ed .fc-text::before{content:open-quote;color:var(--pitch);margin-right:1px} .wa-ed .fc-text::after{content:close-quote;color:var(--pitch);margin-left:1px} .wa-ed .fc-src{ display:inline-block;margin-top:8px;font-size:11px;color:var(--ink-faint); padding-left:14px;position:relative; } .wa-ed .fc-src::before{content:"";position:absolute;left:0;top:50%;width:8px;height:8px; margin-top:-4px;border-radius:50%;background:var(--pitch);opacity:.55} .wa-ed .fclue.fresh{animation:fclueIn .5s ease-out} @keyframes fclueIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){.wa-ed .fclue.fresh{animation:none}} /* A clue not bought yet: its card is there, its number reads, its sentence (a stand-in, see drawLocked) does not. */ .wa-ed .fclue.locked{background:var(--tint);box-shadow:none;border-style:dashed} .wa-ed .fclue.locked .fc-hid{filter:blur(6px);user-select:none;color:var(--ink-soft)} .wa-ed .fclue.locked .fc-hid::before,.wa-ed .fclue.locked .fc-hid::after{content:none} /* ONE RUNG, FULL WIDTH: the next clue and its price, or a line saying there are no more. Football's ladder is a grid of every rung at once. */ .wa-ed .ladder .rung-next{grid-column:1 / -1;width:100%} .wa-ed .rung-none{grid-column:1 / -1;margin:4px 0;color:var(--ink-soft);font-size:14px} /* THE END CARD: which door it was, and three pips for three clues -- filled for each one used, the last one green when it was the one that solved it. */ .wa-ed .fw-door{margin:2px 0 10px;color:var(--ink-soft)} .wa-ed .fw-door b{color:var(--ink)} .wa-ed .fw-pips{display:flex;gap:6px;margin:4px 0 14px} .wa-ed .fw-pip{width:28px;height:8px;border-radius:4px;background:var(--wa-line, var(--line))} .wa-ed .fw-pip.on{background:var(--wa-gold, var(--gold))} .wa-ed .fw-pip.won{background:var(--got)} /* The ambiguous verdict's choices, which reuse the suggestion list. */ .wa-ed .suggest .sugg{margin:4px 6px 0 0} /* WHERE THE CLUES CAME FROM, under Full Time: closed until asked for, each clue as it was read, then its citation in the small type the round's own "On record in an episode" line uses. */ .wa-ed .fr-sources{margin:14px 0 6px;border:1px solid var(--wa-line, var(--line));border-radius:8px; background:var(--wa-card, var(--paper));padding:0 14px} .wa-ed .fr-sources summary{cursor:pointer;padding:12px 0;font-family:var(--disp);font-size:12px; letter-spacing:.12em;text-transform:uppercase;color:var(--ink)} .wa-ed .frs-card{padding:4px 0 12px;border-top:1px solid var(--wa-line, var(--line))} .wa-ed .frs-who{margin:10px 0 6px;font-size:15px;color:var(--ink)} .wa-ed .frs-clues{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:10px} .wa-ed .frs-clues > li{font-size:14px;color:var(--ink-soft)} .wa-ed .frs-clue{display:block;font-size:14px;line-height:1.45;color:var(--ink)} .wa-ed .frs-src{margin-top:4px;font-size:12px;line-height:1.45;color:var(--ink-soft);overflow-wrap:anywhere} .wa-ed .frs-src a{color:var(--pitch)} .wa-ed .frs-quote{display:block;margin-top:2px;font-style:italic;color:var(--ink-faint)} /* [hidden] MUST WIN. Football's .wa-ed .pf-nums{display:flex} is an author rule and beats the user-agent's display:none for [hidden], so a row this page hides still drew its top border -- a stray line under the clues. */ .wa-ed [hidden]{display:none !important}