/* Cryptograms: a codebreaker's desk in deep space. The quote is HTML (cells of a guessed letter over its cipher
   letter), between the HUD and the tool bar, with an on-screen keyboard below; game.js sizes the cells to fit. */
.cg { display: flex; flex-direction: column; color: #e8efff; --cg-line: #1c2b4a; --cg-glass: rgba(9,15,36,0.86); --cg-accent: #55d6ff; --cg-gold: #ffd166;
  --cg-bad: #ff6b81; --cg-ok: #7dffcf; --cg-lilac: #b49cff; --cg-muted: #8aa3c4; --s: 34px; --kh: 46px; }
.cg-stage { position: relative; width: 100%; height: min(86vh, 800px); min-height: 520px; display: flex; flex-direction: column; overflow: hidden; outline: none;
  background: radial-gradient(120% 70% at 50% 0%, #0f1f46 0%, #08112a 45%, #040814 100%); user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.cg-stage::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background-image: radial-gradient(rgba(140,175,255,.10) 1px, transparent 1.2px); background-size: 22px 22px; mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.35) 70%, transparent 100%); -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.35) 70%, transparent 100%); }
@media (max-width: 600px) { .cg-stage { height: auto; aspect-ratio: 9 / 16.4; max-height: 88vh; min-height: 540px; } }
@media (max-width: 600px) and (max-height: 700px) { .cg-stage { min-height: 0; aspect-ratio: auto; height: 88vh; } }

/* the cipher wheel watermark: two rings of letters, turning to the solution when the quote is decoded */
.cg-wheel { position: absolute; width: min(70vmin, 560px); height: min(70vmin, 560px); right: -12%; top: 6%; opacity: .07; pointer-events: none; z-index: 0; }
.cg-wheel text { fill: #9fc4ff; font: 700 9px ui-monospace, Menlo, Consolas, monospace; text-anchor: middle; dominant-baseline: central; }
.cg-wheel .in text { fill: #ffd166; font-size: 8px; }
.cg-wheel circle { fill: none; stroke: #9fc4ff; stroke-width: .6; }
.cg-wheel .in { transition: transform 2.4s cubic-bezier(.3,.8,.2,1); transform-origin: 0 0; }
.cg-solved .cg-wheel { opacity: .13; transition: opacity 1.2s; }

/* HUD */
.cg-hud { position: relative; z-index: 3; flex: none; height: 56px; display: flex; align-items: center; gap: 14px; padding: 0 8px 0 10px; }
.cg-pz { flex: 0 1 auto; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; position: relative; height: 44px; padding: 2px 26px 2px 10px; border-radius: 12px;
  border: 1px solid var(--cg-line); background: var(--cg-glass); color: #fff; cursor: pointer; font: inherit; line-height: 1.05; touch-action: manipulation; text-align: left; transition: border-color .15s; max-width: 46vw; min-width: 96px; }
.cg-pz-lv { font-size: 10px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--lvc, #8aa3c4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.cg-pz-n { font-size: 18px; font-weight: 900; letter-spacing: 0.01em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.cg-pz-dd { position: absolute; right: 6px; top: 50%; width: 16px; height: 16px; margin-top: -8px; fill: none; stroke: #8aa3c4; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) { .cg-pz:hover { border-color: var(--cg-accent); } }
.cg-pz:focus-visible { outline: 2px solid var(--cg-accent); outline-offset: 2px; }
.cg-stat { display: flex; flex-direction: column; line-height: 1.05; flex: none; }
.cg-k { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #8aa3c4; }
.cg-stat b { font-size: 19px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; white-space: nowrap; margin-top: 2px; }
.cg-stat small { font-size: 12.5px; font-weight: 700; color: #8aa3c4; margin-left: 1px; }
.cg-hints b.out #cg-hn { color: var(--cg-gold); }
.cg-hints b.none #cg-hn { color: #8aa3c4; }
.cg-miss b.some { color: #ffb3bf; }
.cg-notimer .cg-time, .cg-nomiss .cg-miss { display: none; }
.cg-sp { flex: 1 1 auto; }
.cg-tool { position: relative; display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px; border: 1px solid var(--cg-line); background: var(--cg-glass);
  color: #c8d6f5; cursor: pointer; touch-action: manipulation; padding: 0; transition: border-color .15s, color .15s; }
.cg-tool svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cg-tool .spk { fill: currentColor; stroke: none; }
@media (hover: hover) { .cg-tool:hover { border-color: var(--cg-accent); color: #fff; } }
.cg-tool:focus-visible { outline: 2px solid var(--cg-accent); outline-offset: 2px; }
#cg-sound .off { display: none; } #cg-sound[aria-pressed="true"] { color: #5f7396; } #cg-sound[aria-pressed="true"] .on { display: none; } #cg-sound[aria-pressed="true"] .off { display: inline; }
.cg-dot { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--cg-gold); box-shadow: 0 0 8px var(--cg-gold); }
.cg-dot[hidden] { display: none; }

/* the coach line */
.cg-coach[hidden] { display: none; }
.cg-coach { position: relative; flex: none; z-index: 4; margin: 0 auto 2px; width: min(calc(100% - 20px), 560px); padding: 9px 34px 9px 12px; border-radius: 12px;
  background: rgba(8,14,34,0.94); border: 1px solid rgba(85,214,255,0.45); box-shadow: 0 10px 30px rgba(0,0,0,.45), 0 0 18px rgba(85,214,255,.12); font-size: 13.5px; line-height: 1.4; color: #e8efff; animation: cg-drop .22s ease-out; }
@keyframes cg-drop { from { opacity: 0; transform: translateY(-6px); } }
@keyframes cg-rise { from { opacity: 0; transform: translate(-50%, 6px); } }
.cg-coach b { color: var(--cg-accent); font-weight: 800; margin-right: 6px; }
.cg-coach.hint { border-color: rgba(255,209,102,0.6); box-shadow: 0 10px 30px rgba(0,0,0,.45), 0 0 18px rgba(255,209,102,.14); }
.cg-coach.hint b { color: var(--cg-gold); }
.cg-coach small { display: block; color: #8aa3c4; font-size: 12px; margin-top: 2px; }
.cg-coach-close { position: absolute; top: 4px; right: 4px; width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; color: #8aa3c4; font-size: 19px; line-height: 1; cursor: pointer; }
@media (hover: hover) { .cg-coach-close:hover { color: #fff; background: rgba(255,255,255,.08); } }

/* the board: the quote, word by word */
.cg-board { position: relative; z-index: 1; flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; outline: none; touch-action: pan-y; padding: 14px 12px 18px;
  display: flex; scrollbar-width: thin; scrollbar-color: #24375f transparent; }
@media (hover: hover) { .cg-board:focus-visible { box-shadow: inset 0 0 0 1px rgba(85,214,255,.2); } }
/* a long quote scrolls: its bottom edge fades so you can tell there is more */
.cg-board.cg-scroll { padding-bottom: 34px; -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 30px), rgba(0,0,0,.15)); mask-image: linear-gradient(to bottom, #000 calc(100% - 30px), rgba(0,0,0,.15)); }
.cg-board.cg-scroll.cg-end { -webkit-mask-image: none; mask-image: none; }
.cg-quote { margin: auto; max-width: 980px; width: 100%; display: flex; flex-wrap: wrap; justify-content: center; align-content: center; column-gap: calc(var(--s) * 0.62); row-gap: calc(var(--s) * 0.34); }
.cg-quote.cg-groups { column-gap: calc(var(--s) * 0.42); }
.cg-w { display: inline-flex; flex-wrap: wrap; gap: calc(var(--s) * 0.08); max-width: 100%; }
.cg-c { position: relative; width: var(--s); display: flex; flex-direction: column; align-items: center; border-radius: calc(var(--s) * 0.2); cursor: pointer; padding: calc(var(--s) * 0.04) 0 calc(var(--s) * 0.07); transition: background-color .12s; }
.cg-g { position: relative; width: calc(var(--s) * 0.86); height: calc(var(--s) * 0.98); display: grid; place-items: center; font-weight: 800; font-size: calc(var(--s) * 0.7); line-height: 1; color: #f2f6ff;
  border-bottom: 2px solid #3a5283; font-variant-numeric: tabular-nums; transition: color .15s, border-color .15s; }
.cg-k2 { margin-top: calc(var(--s) * 0.08); font: 700 calc(var(--s) * 0.42)/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: #7f97c0; letter-spacing: 0; transition: color .15s, opacity .4s; }
.cg-p { width: calc(var(--s) * 0.36); height: calc(var(--s) * 1.02); display: flex; align-items: flex-end; justify-content: center; padding-bottom: calc(var(--s) * 0.1); font-weight: 800; font-size: calc(var(--s) * 0.8); line-height: 1; color: #8aa3c4; }
.cg-same { background: rgba(85,214,255,0.09); }
.cg-same .cg-g { border-bottom-color: var(--cg-accent); }
.cg-same .cg-k2 { color: #bfeeff; }
.cg-cur { background: rgba(85,214,255,0.2); box-shadow: inset 0 0 0 2px rgba(85,214,255,.85), 0 0 18px rgba(85,214,255,.25); }
.cg-cur .cg-g::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: -2px; height: 2px; background: #fff; animation: cg-blink 1.1s steps(2, start) infinite; }
@keyframes cg-blink { to { visibility: hidden; } }
.cg-lock .cg-g { color: var(--cg-gold); border-bottom-color: rgba(255,209,102,.55); text-shadow: 0 0 12px rgba(255,209,102,.35); }
.cg-lock .cg-k2 { color: #8a7a52; }
.cg-bad .cg-g { color: var(--cg-bad); border-bottom-color: var(--cg-bad); }
.cg-bad.cg-cur { box-shadow: inset 0 0 0 2px rgba(255,107,129,.8), 0 0 16px rgba(255,107,129,.2); background: rgba(255,107,129,.12); }
.cg-pop .cg-g { animation: cg-pop .22s cubic-bezier(.3,1.6,.5,1); }
@keyframes cg-pop { 40% { transform: scale(1.22); } }
.cg-gone .cg-g { animation: cg-gone .4s ease-out; }
@keyframes cg-gone { 0% { color: #ffb3bf; } }
.cg-shine .cg-g { animation: cg-shine .9s ease-out; }
@keyframes cg-shine { 0% { text-shadow: 0 0 0 transparent; transform: scale(1); } 30% { text-shadow: 0 0 18px #ffd166, 0 0 36px rgba(255,209,102,.6); transform: scale(1.25); } }
.cg-buzz { animation: cg-buzz .3s ease-in-out; }
@keyframes cg-buzz { 20%, 60% { transform: translateX(-3px); } 40%, 80% { transform: translateX(3px); } }
@media (hover: hover) { .cg-c:not(.cg-cur):hover { background: rgba(85,214,255,0.06); } }

/* the decoded quote: a wave of light across the letters */
.cg-solved .cg-c { cursor: default; background: transparent; box-shadow: none; }
.cg-solved .cg-cur .cg-g::after { display: none; }
.cg-solved .cg-g { color: #fff6dc; border-bottom-color: rgba(255,209,102,.35); animation: cg-wave .75s cubic-bezier(.3,1.4,.5,1) both; animation-delay: var(--d, 0ms); }
.cg-solved .cg-k2 { opacity: .22; transition-delay: 0ms, var(--d, 0ms); }
.cg-solved .cg-p { color: #ffe7b0; }
@keyframes cg-wave { 0% { transform: translateY(0); } 35% { transform: translateY(calc(var(--s) * -0.32)); color: #ffd166; text-shadow: 0 0 16px rgba(255,209,102,.9); } 100% { transform: translateY(0); text-shadow: 0 0 10px rgba(255,209,102,.25); } }
.cg-lost .cg-g { color: #c9d6f2; }

/* the letter counts panel */
.cg-freq[hidden] { display: none; }
.cg-freq { position: relative; z-index: 2; flex: none; margin: 0 auto 6px; width: min(calc(100% - 16px), 720px); padding: 6px 6px 5px; border-radius: 14px; border: 1px solid var(--cg-line); background: var(--cg-glass); }
.cg-fq { display: flex; gap: 3px; overflow-x: auto; scrollbar-width: none; padding-bottom: 1px; }
.cg-fq::-webkit-scrollbar { display: none; }
.cg-fc { flex: 1 0 25px; min-width: 25px; max-width: 54px; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 3px 0 4px; border: 0; border-radius: 8px; background: rgba(255,255,255,.03); color: #e8efff; cursor: pointer; font: inherit; touch-action: manipulation; }
.cg-fc i { font: 700 12px/1 ui-monospace, Menlo, Consolas, monospace; font-style: normal; color: #9fb6dc; }
.cg-fc em { font-style: normal; font-size: 10px; font-weight: 800; color: #5f7396; font-variant-numeric: tabular-nums; }
.cg-fc b { font-size: 13px; font-weight: 900; color: #fff; min-height: 14px; line-height: 14px; }
.cg-fc.lock b { color: var(--cg-gold); } .cg-fc.bad b { color: var(--cg-bad); }
.cg-fc.sel { background: rgba(85,214,255,0.18); box-shadow: inset 0 0 0 1px rgba(85,214,255,.6); }
.cg-fc:focus-visible { outline: 2px solid var(--cg-accent); outline-offset: 1px; }
.cg-feng { margin: 4px 2px 0; font-size: 10.5px; color: #6f86ad; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cg-feng b { color: #9fb6dc; font-weight: 800; letter-spacing: .18em; font-family: ui-monospace, Menlo, Consolas, monospace; }

/* the tool bar */
.cg-bar { position: relative; z-index: 2; flex: none; display: flex; gap: 6px; margin: 0 auto; padding: 0 6px; width: min(calc(100% - 4px), 600px); height: 50px; }
.cg-btn { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-radius: 13px; border: 1px solid var(--cg-line);
  background: var(--cg-glass); color: #d4e0fa; font: inherit; font-size: 11.5px; font-weight: 700; letter-spacing: 0.02em; cursor: pointer; touch-action: manipulation; padding: 0 2px;
  transition: border-color .15s, color .15s, opacity .15s, background .15s, transform .08s; }
.cg-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cg-btn span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
@media (hover: hover) { .cg-btn:hover:not(:disabled) { border-color: var(--cg-accent); color: #fff; } }
.cg-btn:active:not(:disabled) { transform: translateY(1px); }
.cg-btn:focus-visible { outline: 2px solid var(--cg-accent); outline-offset: 2px; }
.cg-btn:disabled { opacity: 0.36; cursor: default; }
.cg-btn[hidden] { display: none; }
.cg-hintb { color: #ffe3a3; }
@media (hover: hover) { .cg-hintb:hover:not(:disabled) { border-color: var(--cg-gold); } }
.cg-btn[aria-pressed="true"] { border-color: rgba(85,214,255,.6); color: #fff; background: rgba(23,48,92,.9); }

/* the keyboard */
.cg-kb { position: relative; z-index: 2; flex: none; width: min(calc(100% - 12px), 600px); margin: 8px auto 10px; display: grid; gap: 6px; touch-action: manipulation; }
.cg-kb-row { display: flex; justify-content: center; gap: 5px; }
.cg-kb-row:nth-child(2) { padding: 0 4.5%; }
.cg-key { position: relative; flex: 1 1 0; max-width: 54px; min-width: 0; height: var(--kh); padding: 0; border-radius: 9px; border: 1px solid #22355e; background: linear-gradient(#16264a, #111d3b);
  color: #fff; font: 800 18px/1 system-ui, -apple-system, "Segoe UI", sans-serif; cursor: pointer; display: grid; place-items: center; touch-action: manipulation; transition: background-color .08s, color .15s, border-color .15s, transform .06s; }
.cg-key svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cg-key-wide { flex: 1.25 1 0; max-width: 64px; background: #0e1834; color: #b9c9ea; }
.cg-key.down { background: #2b4680; transform: translateY(1px); }
.cg-key.used { color: #5f7396; background: #0d1630; border-color: #182748; }
.cg-key.used::after { content: ""; position: absolute; top: 5px; right: 5px; width: 5px; height: 5px; border-radius: 50%; background: #3f7fae; }
.cg-key.used.lock::after { background: var(--cg-gold); }
.cg-key.mine { color: #062033; background: linear-gradient(#7fe3ff, #43c3ee); border-color: transparent; }
.cg-key.mine::after { display: none; }
@media (hover: hover) { .cg-key:hover { border-color: #3d5d97; } }
.cg-key:focus-visible { outline: 2px solid var(--cg-accent); outline-offset: 1px; }
.cg-isdone .cg-bar, .cg-isdone .cg-kb, .cg-isdone .cg-freq { visibility: hidden; }

/* the result card, over the bottom of the stage so the decoded quote stays in view */
.cg-card[hidden] { display: none; }
.cg-card { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 5; width: min(calc(100% - 16px), 520px); padding: 16px 16px 14px; border-radius: 18px;
  background: rgba(8,13,32,0.97); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255,209,102,0.3); box-shadow: 0 18px 50px rgba(0,0,0,.6), 0 0 40px rgba(255,209,102,.08); animation: cg-up .38s cubic-bezier(.2,.9,.25,1.1);
  max-height: calc(100% - 70px); overflow: auto; overscroll-behavior: contain; }
@keyframes cg-up { from { opacity: 0; transform: translate(-50%, 24px); } }
.cg-card-top { display: flex; align-items: center; gap: 12px; }
.cg-card-top > div { flex: 1 1 auto; min-width: 0; }
.cg-card h2 { margin: 0; font-size: 22px; font-weight: 900; color: #fff; letter-spacing: 0.01em; text-transform: none; line-height: 1.1; text-shadow: 0 0 22px rgba(255,209,102,.4); }
.cg-card .cg-sub { margin: 3px 0 0; font-size: 12.5px; color: #8aa3c4; line-height: 1.4; }
.cg-seal { flex: none; width: 46px; height: 46px; }
.cg-quoted { margin: 12px 0 0; padding: 12px 14px; border-radius: 14px; background: radial-gradient(120% 140% at 0% 0%, rgba(255,209,102,.10), transparent 60%), #070c22; border: 1px solid #1d2a4c; }
.cg-quoted blockquote { margin: 0; font: italic 500 17px/1.45 Georgia, "Iowan Old Style", "Times New Roman", serif; color: #f6efdc; }
.cg-quoted .cg-by { margin: 8px 0 0; font-size: 13.5px; color: #e8efff; font-weight: 800; }
.cg-quoted .cg-by i { font-weight: 500; color: #b9c9ea; }
.cg-quoted .cg-note { margin: 6px 0 0; font-size: 13px; line-height: 1.45; color: #9fb3d6; }
.cg-quoted .cg-bio { margin: 4px 0 0; font-size: 12px; color: #6f86ad; line-height: 1.4; }
.cg-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.cg-chip { display: inline-flex; align-items: baseline; gap: 6px; padding: 5px 10px; border-radius: 999px; background: #0c1430; border: 1px solid #1d2a4c; font-size: 12px; color: #8aa3c4; font-weight: 700; }
.cg-chip b { color: #fff; font-size: 14px; font-variant-numeric: tabular-nums; }
.cg-chip.gold { border-color: rgba(255,209,102,.45); } .cg-chip.gold b { color: var(--cg-gold); }
.cg-chip.ok b { color: var(--cg-ok); }
/* the actions stay in view at the card's foot while a long note scrolls (short screens, phones turned sideways) */
.cg-card .cg-actions { position: sticky; bottom: -14px; z-index: 1; margin: 12px -16px -14px; padding: 10px 16px 14px; background: rgba(8,13,32,0.97); border-radius: 0 0 18px 18px; }
.cg-dbest { display: block; margin-top: 8px; font-size: 12.5px; color: #9fb3d6; }
.cg-dbest:empty { display: none; }

/* panels */
.cg-overlay[hidden] { display: none; }
.cg-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 12px; z-index: 7; overflow: auto;
  background: radial-gradient(ellipse at center, rgba(4,8,22,0.55), rgba(3,5,14,0.88)); animation: cg-fade .18s ease-out; }
.cg-panel { position: relative; width: min(100%, 440px); margin: auto; padding: 20px 18px 18px; border: 1px solid var(--cg-line); border-radius: 18px; text-align: left; outline: none;
  background: rgba(8,13,32,0.96); box-shadow: 0 20px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(85,214,255,0.05) inset; animation: cg-in .26s cubic-bezier(.2,.9,.25,1.1); }
.cg-panel.wide { width: min(100%, 580px); }
@keyframes cg-in { from { opacity: 0; transform: scale(.95) translateY(8px); } }
@keyframes cg-fade { from { opacity: 0; } }
.cg-panel h2 { margin: 0 38px 12px 0; font-size: 20px; font-weight: 900; color: #fff; letter-spacing: 0.01em; text-transform: none; line-height: 1.25; }
.cg-panel h3 { margin: 16px 0 8px; font-size: 11.5px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: #8aa3c4; }
.cg-panel p, .cg-panel li { font-size: 13.5px; line-height: 1.5; color: #bccbea; }
.cg-panel p { margin: 0 0 8px; }
.cg-panel ul { margin: 0 0 8px; padding-left: 18px; }
.cg-panel kbd { display: inline-block; min-width: 1.4em; padding: 0 5px; border-radius: 5px; border: 1px solid #2c3f6e; background: #0b1328; color: #fff; font: 700 12px/1.6 system-ui, sans-serif; text-align: center; }
.cg-x { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; border: 0; background: rgba(255,255,255,.07); color: #d4e0fa; cursor: pointer; padding: 0; z-index: 2; }
.cg-x svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
@media (hover: hover) { .cg-x:hover { background: rgba(255,255,255,.14); color: #fff; } }
.cg-x:focus-visible { outline: 2px solid var(--cg-accent); outline-offset: 2px; }
.cg-fine { font-size: 12px !important; color: #6f86ad !important; margin: 8px 0 0 !important; }

.cg-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.cg-row { display: flex; gap: 8px; } .cg-row > * { flex: 1 1 0; min-width: 0; }
.cg-row-wrap { flex-wrap: wrap; } .cg-row-wrap > * { flex: 1 1 170px; min-width: 0; }
.cg-b { font: inherit; font-weight: 700; font-size: 14.5px; padding: 10px 14px; min-height: 46px; border-radius: 12px; cursor: pointer; touch-action: manipulation; text-decoration: none;
  border: 1px solid var(--cg-line); background: #0c152e; color: #e8efff; transition: background .15s, border-color .15s, transform .1s, filter .15s; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
@media (hover: hover) { .cg-b:hover:not(:disabled) { border-color: var(--cg-accent); } }
.cg-b:active { transform: translateY(1px); }
.cg-b:disabled { opacity: .45; cursor: default; }
.cg-b:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.cg-b svg { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cg-b span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cg-b-primary { background: #ffd166; color: #1a1200; border-color: transparent; font-size: 16px; font-weight: 800; box-shadow: 0 6px 24px rgba(255,209,102,0.28); }
@media (hover: hover) { .cg-b-primary:hover:not(:disabled) { border-color: transparent; filter: brightness(1.06); } }
.cg-b-sm { min-height: 40px; padding: 6px 10px; font-size: 13px; }
.cg-b-danger { color: #ffb3bf; } @media (hover: hover) { .cg-b-danger:hover:not(:disabled) { border-color: var(--cg-bad); } }

.cg-tag { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; vertical-align: middle; margin-left: 6px;
  color: #1a1200; background: linear-gradient(90deg, #ffd166, #fff1b8, #ffd166); background-size: 200% 100%; animation: cg-shinebar 1.6s linear infinite; box-shadow: 0 0 18px rgba(255,209,102,0.5); }
@keyframes cg-shinebar { to { background-position: -200% 0; } }
.cg-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 10px 0 4px; }
.cg-stats.three { grid-template-columns: repeat(3, 1fr); }
.cg-stats div { padding: 8px 4px; border-radius: 10px; background: #070c22; border: 1px solid #172344; text-align: center; min-width: 0; }
.cg-stats span { display: block; font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: #6f86ad; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cg-stats b { display: block; margin-top: 2px; font-size: 17px; color: #e8efff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cg-stats .gold b { color: var(--cg-gold); } .cg-stats .ok b { color: var(--cg-ok); } .cg-stats .hot b { color: #ffb3bf; }

/* the hub */
.cg-hubs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cg-hubc { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-height: 96px; padding: 12px 12px 10px; border-radius: 15px; border: 1px solid var(--cg-line);
  background: radial-gradient(120% 120% at 100% 0%, color-mix(in srgb, var(--hc) 20%, transparent), transparent 60%), #070c22; color: #e8efff; font: inherit; text-align: left; cursor: pointer; touch-action: manipulation; transition: border-color .15s, transform .1s; overflow: hidden; }
.cg-hubc.big { grid-column: 1 / -1; min-height: 92px; }
.cg-hubc.cur { box-shadow: inset 0 0 0 1px var(--hc); }
.cg-hubc .ic { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; margin-bottom: 2px; color: var(--hc); background: color-mix(in srgb, var(--hc) 14%, transparent); font: 900 14px/1 ui-monospace, Menlo, Consolas, monospace; }
.cg-hubc .ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cg-hubc b { font-size: 15.5px; color: #fff; }
.cg-hubc small { font-size: 12px; color: #8aa3c4; line-height: 1.35; }
.cg-hubc em { position: absolute; top: 10px; right: 12px; font-style: normal; font-size: 11.5px; font-weight: 800; color: var(--hc); font-variant-numeric: tabular-nums; }
@media (hover: hover) { .cg-hubc:hover { border-color: var(--hc); } }
.cg-hubc:active { transform: translateY(1px); }
.cg-hubc:focus-visible { outline: 2px solid var(--hc); outline-offset: 2px; }
.cg-hubc [data-rg-daily] { display: block; font-size: 11.5px; color: #9fb3d6; margin-top: 2px; }
.cg-hubc [data-rg-daily]:empty { display: none; }

/* calendar */
.cg-cal-head { display: flex; align-items: center; gap: 8px; margin: 12px 0 6px; }
.cg-cal-head b { flex: 1 1 auto; text-align: center; color: #fff; font-size: 15px; }
.cg-step { width: 42px; height: 42px; flex: none; display: grid; place-items: center; padding: 0; border-radius: 10px; border: 1px solid #22355e; background: #0c152e; color: #e8efff; cursor: pointer; }
.cg-step svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cg-step:disabled { opacity: .35; cursor: default; }
.cg-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cg-cal-w { text-align: center; font-size: 10.5px; font-weight: 800; color: #6f86ad; padding: 2px 0; }
.cg-cal-d { position: relative; aspect-ratio: 1; display: grid; place-items: center; border-radius: 9px; border: 1px solid #172344; background: #070c22; color: #d4e0fa; font: 700 13px system-ui, sans-serif; cursor: pointer; padding: 0; }
.cg-cal-d.off { opacity: .28; cursor: default; }
.cg-cal-d.ok { background: rgba(125,255,207,0.12); border-color: rgba(125,255,207,0.55); color: var(--cg-ok); }
.cg-cal-d.late { background: rgba(125,255,207,0.05); border-color: rgba(125,255,207,0.3); border-style: dashed; color: #b8f5df; }
.cg-cal-d.gave { background: rgba(255,107,129,0.06); border-color: rgba(255,107,129,0.35); color: #ffb3bf; }
.cg-cal-d.today { box-shadow: 0 0 0 2px var(--cg-gold), 0 0 14px rgba(255,209,102,.4); }
.cg-cal-pad { aspect-ratio: 1; }
@media (hover: hover) { .cg-cal-d:not(.off):hover { border-color: var(--cg-accent); } }
.cg-cal-d:focus-visible { outline: 2px solid var(--cg-accent); outline-offset: 1px; }

/* settings, tabs, help, tables */
.cg-set { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid #172344; cursor: pointer; }
.cg-set span { display: flex; flex-direction: column; gap: 2px; } .cg-set b { font-size: 14px; color: #fff; } .cg-set small { font-size: 12px; color: #8aa3c4; }
.cg-set input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cg-sw { position: relative; width: 46px; height: 27px; flex: none; border-radius: 14px; border: 1px solid #22355e; background: #0c152e; transition: background .15s, border-color .15s; }
.cg-sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 19px; height: 19px; border-radius: 50%; background: #5f7396; transition: transform .15s, background .15s; }
.cg-set input:checked + .cg-sw { background: #0f3550; border-color: var(--cg-accent); }
.cg-set input:checked + .cg-sw::after { transform: translateX(19px); background: var(--cg-accent); box-shadow: 0 0 10px rgba(85,214,255,.7); }
.cg-set input:focus-visible + .cg-sw { outline: 2px solid var(--cg-accent); outline-offset: 2px; }
.cg-setblock { padding: 10px 0 12px; border-bottom: 1px solid #172344; }
.cg-setblock b { font-size: 14px; color: #fff; } .cg-setblock small { display: block; font-size: 12px; color: #8aa3c4; margin: 2px 0 8px; }
.cg-seg { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: #070c22; border: 1px solid var(--cg-line); }
.cg-seg button { flex: 1 1 0; min-height: 38px; border: 0; border-radius: 8px; background: transparent; color: #8aa3c4; font: 700 13px system-ui, sans-serif; cursor: pointer; padding: 0 4px; }
.cg-seg button[aria-pressed="true"] { background: #13254c; color: #fff; box-shadow: inset 0 0 0 1px rgba(85,214,255,.55); }
.cg-seg button:focus-visible { outline: 2px solid var(--cg-accent); outline-offset: 1px; }
.cg-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: 13px; background: #070c22; border: 1px solid var(--cg-line); margin: 0 0 12px; }
.cg-tab { font: inherit; font-size: 13.5px; font-weight: 700; color: #8aa3c4; background: transparent; border: 0; border-radius: 9px; min-height: 38px; cursor: pointer; }
.cg-tab[aria-selected="true"] { background: #13254c; color: #fff; box-shadow: inset 0 0 0 1px rgba(85,214,255,0.5), 0 0 16px rgba(85,214,255,0.12); }
.cg-tab:focus-visible { outline: 2px solid var(--cg-accent); outline-offset: 1px; }
.cg-howto { display: grid; grid-template-columns: 84px 1fr; gap: 10px 12px; align-items: center; margin: 4px 0 8px; }
.cg-howto svg { width: 84px; height: 60px; }
.cg-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cg-table th, .cg-table td { padding: 6px 4px; text-align: right; border-bottom: 1px solid #172344; font-variant-numeric: tabular-nums; }
.cg-table th:first-child, .cg-table td:first-child { text-align: left; }
.cg-table thead th { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: #6f86ad; }
.cg-table tbody th { color: #fff; font-weight: 700; }
.cg-table td { color: #d4e0fa; }

/* the quote book */
.cg-prog { height: 8px; border-radius: 99px; background: #0c152e; border: 1px solid #172344; overflow: hidden; margin: 6px 0 4px; }
.cg-prog i { display: block; height: 100%; background: linear-gradient(90deg, #55d6ff, #ffd166); border-radius: 99px; }
.cg-panel .cg-book { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: min(52vh, 460px); overflow: auto; overscroll-behavior: contain; }
.cg-book li { padding: 10px 12px; border-radius: 12px; background: #070c22; border: 1px solid #172344; }
.cg-book q { display: block; font: italic 14.5px/1.45 Georgia, "Iowan Old Style", "Times New Roman", serif; color: #f1ead6; quotes: none; }
.cg-book small { display: block; margin-top: 4px; font-size: 12px; color: #8aa3c4; }
.cg-book small b { color: #d4e0fa; }
.cg-search { width: 100%; font: inherit; font-size: 14px; padding: 9px 12px; border-radius: 10px; border: 1px solid #22355e; background: #050a1c; color: #e8efff; margin-top: 6px; }
.cg-search:focus-visible { outline: 2px solid var(--cg-accent); outline-offset: 1px; }

.cg-toast[hidden] { display: none; }
.cg-toast { position: absolute; left: 50%; bottom: calc(var(--kh) * 3 + 82px); transform: translateX(-50%); z-index: 8; padding: 8px 15px; border-radius: 16px; background: #e8efff; color: #061024; font-size: 13px; font-weight: 800; line-height: 1.35;
  animation: cg-rise .2s ease-out; pointer-events: none; width: max-content; max-width: min(calc(100% - 28px), 520px); text-align: center; box-shadow: 0 8px 24px rgba(0,0,0,.4); }
.cg-isdone .cg-toast { bottom: 50%; }
.cg-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.cg-help { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 14px; }
.cg-help .hint-touch { display: none; }
@media (hover: none) and (pointer: coarse) { .cg-help .hint-kb { display: none; } .cg-help .hint-touch { display: inline; } }
.stage .cg-help { padding: 10px 14px 12px; text-wrap: balance; }

/* narrow phones */
@media (max-width: 560px) { .cg-hud { gap: 10px; } }
@media (max-width: 460px) {
  .cg { --kh: 44px; }
  .cg-hud { gap: 9px; padding-left: 8px; padding-right: 6px; }
  .cg-pz { padding-right: 22px; padding-left: 8px; min-width: 84px; }
  .cg-pz-n { font-size: 16px; }
  .cg-stat b { font-size: 17px; }
  .cg-tool { width: 36px; height: 36px; border-radius: 11px; }
  .cg-btn { font-size: 10.5px; border-radius: 12px; }
  .cg-bar { gap: 4px; padding: 0 4px; height: 48px; }
  .cg-kb { gap: 5px; width: calc(100% - 8px); margin-top: 6px; margin-bottom: 8px; }
  .cg-kb-row { gap: 4px; }
  .cg-key { font-size: 17px; border-radius: 8px; }
  .cg-panel { padding: 18px 14px 14px; }
  .cg-stats b { font-size: 15px; }
  .cg-board { padding: 10px 6px 12px; }
  .cg-quoted blockquote { font-size: 16px; }
}
@media (max-width: 420px) { .cg-miss { display: none; } .cg-card .cg-row .cg-b-sm { padding: 6px 4px; } .cg-card .cg-row .cg-b-sm svg { display: none; } }
@media (max-width: 380px) { #cg-sound { display: none; } .cg-hud { gap: 8px; } }

/* full screen: the desk takes every pixel */
.stage.is-immersive .stage-body > .cg { min-height: 0; flex: 1 1 auto; }
.stage.is-immersive .cg-stage { flex: 1 1 auto; height: auto; aspect-ratio: auto; max-height: none; min-height: 0; }
.stage.is-immersive .cg-help { display: none; }
.stage.is-immersive .cg { --kh: clamp(42px, 6.4vh, 58px); }

/* short screens (a phone turned sideways): a slimmer HUD, tool bar and keys leave the quote room to breathe */
@media (max-height: 500px) {
  .cg { --kh: 36px; }
  .stage.is-immersive .cg { --kh: 36px; }
  .cg-hud { height: 48px; }
  .cg-bar { height: 42px; }
  .cg-btn { flex-direction: row; gap: 6px; }
  .cg-btn svg { width: 18px; height: 18px; }
  .cg-kb { gap: 4px; margin-top: 5px; margin-bottom: 6px; }
  .cg-feng { display: none; }
  .cg-fc { padding: 2px 0 3px; }
  .cg-toast { bottom: calc(var(--kh) * 3 + 64px); }
}

@media (prefers-reduced-motion: reduce) {
  .cg-panel, .cg-toast, .cg-coach, .cg-overlay, .cg-card, .cg-tag { animation: none; }
  .cg-solved .cg-g, .cg-pop .cg-g, .cg-shine .cg-g, .cg-gone .cg-g, .cg-buzz { animation: none; }
  .cg-cur .cg-g::after { animation: none; }
  .cg-wheel .in { transition: none; }
}
.cg-calm .cg-panel, .cg-calm .cg-toast, .cg-calm .cg-coach, .cg-calm .cg-overlay, .cg-calm .cg-card, .cg-calm .cg-tag { animation: none; }
.cg-calm .cg-solved .cg-g, .cg-calm .cg-pop .cg-g, .cg-calm .cg-shine .cg-g, .cg-calm .cg-gone .cg-g, .cg-calm .cg-buzz, .cg-calm .cg-cur .cg-g::after { animation: none; }
.cg-calm .cg-wheel .in { transition: none; }