/* Club Guess. Builds on /assets/css/base.css: uses its --tt-* tokens only, mobile-first, dark mode via the base tokens. Text on green and amber tiles uses --tt-pitch, which stays dark in both themes. */ /* ---------- page shell ---------- */ .cg-wrap{max-width:880px;margin:0 auto;padding:0 16px} .cg-main{padding:28px 0 56px} @media (min-width:560px){.cg-wrap{padding:0 20px}.cg-main{padding-top:40px}} .cg-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px} .cg-top .eyebrow{margin-bottom:6px} .cg-title{font-size:clamp(1.7rem,5vw,2.4rem);margin:0} .cg-help-btn{flex:0 0 auto;width:48px;padding:0;font-size:1.25rem;border-radius:50%} .cg-clue{margin:0 0 16px;color:var(--tt-body)} .cg-clue b{color:var(--tt-ink)} /* Level-specific copy and board rows are in the HTML, picked by html[data-cg-level] (set in ), so the first paint already has the final layout and nothing shifts when the game data arrives. */ .cg-clue-level{display:none} html:not([data-cg-level=medium]):not([data-cg-level=hard]) .cg-clue-level[data-for=easy], html[data-cg-level=medium] .cg-clue-level[data-for=medium], html[data-cg-level=hard] .cg-clue-level[data-for=hard]{display:inline} html:not([data-cg-level=medium]):not([data-cg-level=hard]) .cg-row--static-7, html:not([data-cg-level=hard]) .cg-row--static-8{display:none} /* ---------- level switcher ---------- */ .cg-levels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 16px;padding:0;list-style:none} .cg-levels a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-height:52px;padding:6px 4px; border:1px solid var(--tt-line);border-radius:var(--tt-radius-sm);background:var(--tt-bg);color:var(--tt-ink); text-decoration:none;font-weight:750;line-height:1.2;text-align:center} .cg-levels a:hover{background:var(--tt-bg-2)} .cg-levels a[aria-current=page]{border-color:var(--tt-accent);background:var(--tt-accent-soft);color:var(--tt-accent-ink);box-shadow:inset 0 0 0 1px var(--tt-accent)} .cg-level-state{font-size:.75rem;font-weight:600;color:var(--tt-muted)} .cg-levels a[aria-current=page] .cg-level-state{color:var(--tt-accent-ink)} /* ---------- guess form + autocomplete ---------- */ .cg-form{margin:0 0 18px} .cg-form-row{display:flex;gap:8px;align-items:stretch} .cg-form-row .cg-ac{flex:1 1 auto;min-width:0} .cg-form-row .btn{flex:0 0 auto;min-height:50px;padding:0 18px} .cg-counter{margin:8px 0 0;min-height:1.6em;font-size:.9rem;color:var(--tt-body)} .cg-counter b{color:var(--tt-ink)} .cg-msg{margin:6px 0 0;font-size:.93rem;font-weight:600;color:var(--tt-ink);min-height:1.5em} .cg-msg--error{color:var(--tt-danger)} .cg-ac{position:relative} .cg-ac-list{position:absolute;left:0;right:0;top:100%;z-index:30;margin:4px 0 0;padding:4px;list-style:none; background:var(--tt-bg);border:1px solid var(--tt-line);border-radius:var(--tt-radius-sm);box-shadow:var(--tt-shadow); max-height:min(320px,50vh);overflow-y:auto} .cg-ac-list[hidden]{display:none} .cg-ac-opt,.cg-ac-empty{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:6px;line-height:1.3} .cg-ac-opt{cursor:pointer;color:var(--tt-ink);font-weight:600} .cg-ac-opt:hover{background:var(--tt-bg-2)} .cg-ac-opt[aria-selected=true]{background:var(--tt-accent-soft);box-shadow:inset 0 0 0 2px var(--tt-accent)} .cg-ac-country{flex:0 1 auto;font-size:.8rem;font-weight:500;color:var(--tt-muted);text-align:right} .cg-ac-opt[aria-selected=true] .cg-ac-country{color:var(--tt-body)} .cg-ac-opt--done{cursor:not-allowed;color:var(--tt-muted);text-decoration:line-through} .cg-ac-opt--done .cg-ac-country{text-decoration:none} .cg-ac-empty{color:var(--tt-muted);font-size:.93rem} /* ---------- board ---------- */ .cg-board{container-type:inline-size;container-name:cgboard;display:grid;gap:8px;margin:0 0 24px} .cg-row{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;margin:0;min-width:0} .cg-row-club{display:flex;align-items:center;gap:8px;min-width:0;color:var(--tt-ink);font-weight:700;font-size:.95rem;line-height:1.25} .cg-row-num{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 4px; border-radius:11px;background:var(--tt-bg-2);border:1px solid var(--tt-line);color:var(--tt-body);font-size:.75rem;font-weight:700} .cg-row-name{overflow-wrap:anywhere} .cg-tiles{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;perspective:600px} .cg-row--head .cg-row-club{display:none} .cg-head{text-align:center;font-size:.66rem;font-weight:750;letter-spacing:0;text-transform:uppercase;color:var(--tt-muted);line-height:1.1;white-space:nowrap;overflow:hidden} .cg-row--empty .cg-row-club{display:none} .cg-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:0;min-height:56px; padding:4px 2px;border-radius:6px;text-align:center;font-size:.72rem;font-weight:750;line-height:1.1;overflow:hidden;overflow-wrap:anywhere} .cg-tile--green{background:var(--tt-accent);color:var(--tt-pitch)} .cg-tile--amber{background:var(--tt-flood);color:var(--tt-pitch)} .cg-tile--grey{background:var(--tt-line);color:var(--tt-ink)} .cg-tile--empty{min-height:44px;border:1px dashed var(--tt-line);background:transparent} .cg-tile-v{display:flex;flex-direction:column;align-items:center;gap:2px;max-width:100%} .cg-tile-g{display:flex;align-items:center;justify-content:center;gap:3px;flex-wrap:wrap;font-size:.68rem;font-weight:700} .cg-glyph{font-size:.8rem;line-height:1} .cg-tile-sub{font-weight:650} .cg-swatch{display:inline-block;width:12px;height:12px;border-radius:50%;box-shadow:0 0 0 1px rgba(11,18,32,.45)} .cg-swatch--stripes{background:repeating-linear-gradient(90deg,#111 0 3px,#fff 3px 6px)} .cg-full{display:none} .cg-short{display:inline} @container cgboard (min-width:640px){ .cg-full{display:inline} .cg-short{display:none} .cg-tile{min-height:64px;padding:6px 4px;font-size:.8rem} .cg-head{font-size:.7rem} } @media (min-width:560px){ .cg-row{grid-template-columns:132px minmax(0,1fr);gap:10px;align-items:center} .cg-row--head .cg-row-club{display:block;visibility:hidden} .cg-row--empty .cg-row-club{display:flex} } @keyframes cg-flip{from{transform:rotateX(-90deg);opacity:0}to{transform:rotateX(0);opacity:1}} .cg-tile--flip{animation:cg-flip .4s ease-out both;backface-visibility:hidden} @media (prefers-reduced-motion:reduce){ .cg-tile--flip{animation:none} } /* ---------- result ---------- */ .cg-result{margin:0 0 24px} .cg-result:focus{outline:none} .cg-result:focus-visible{outline:3px solid var(--tt-accent);outline-offset:2px} .cg-result h2{margin-bottom:.35em} .cg-result-facts{color:var(--tt-body);font-size:.95rem} .cg-points{display:inline-block;margin:0 0 16px;padding:6px 12px;border-radius:999px;background:var(--tt-accent-soft);color:var(--tt-accent-ink);font-weight:750} .cg-points--none{background:var(--tt-bg-2);color:var(--tt-body)} .cg-share{margin:0 0 12px;padding:14px 16px;border-radius:var(--tt-radius-sm);background:var(--tt-bg-2);border:1px solid var(--tt-line); color:var(--tt-ink);font-family:var(--tt-mono);font-size:.95rem;line-height:1.35;white-space:pre;overflow-x:auto} .cg-copy-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:0 0 18px} .cg-copy-msg{font-weight:650;color:var(--tt-accent-ink);font-size:.93rem} .cg-copy-msg--error{color:var(--tt-danger)} .cg-next{margin:0 0 16px} .cg-countdown{font-family:var(--tt-mono);font-weight:750;color:var(--tt-ink);font-size:1.1rem;font-variant-numeric:tabular-nums} .cg-result-links{display:flex;flex-wrap:wrap;gap:10px} .cg-nudge p{margin:0} /* ---------- about copy ---------- */ .cg-about{border-top:1px solid var(--tt-line);padding-top:24px;margin-top:8px} .cg-about h2{font-size:1.3rem} .cg-about p:last-child{margin-bottom:0} /* ---------- help dialog ---------- */ .cg-dialog{width:calc(100% - 24px);max-width:560px;max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);margin:auto;padding:0; border:1px solid var(--tt-line);border-radius:var(--tt-radius);background:var(--tt-bg);color:var(--tt-body);box-shadow:var(--tt-shadow);overflow:auto} .cg-dialog::backdrop{background:rgba(11,18,32,.62)} .cg-dialog-inner{padding:20px} .cg-dialog-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px} .cg-dialog-head h2{font-size:1.45rem;margin:4px 0 12px} .cg-dialog-close{flex:0 0 auto;width:44px;min-height:44px;padding:0;font-size:1.3rem;line-height:1} .cg-clue-list{margin:0 0 16px;padding:0;list-style:none;display:grid;gap:10px} .cg-clue-list li{padding-left:12px;border-left:3px solid var(--tt-line)} .cg-clue-list b{color:var(--tt-ink)} .cg-legend{display:grid;gap:8px;margin:0 0 16px;padding:0;list-style:none} .cg-legend li{display:flex;align-items:center;gap:12px} .cg-legend .cg-tile{flex:0 0 48px;width:48px;min-height:40px}