/*
* base.css — the shared layout + chapter pager + animation kit for every guide.
*
* Authored once in GCArena, reused byte-for-byte by app + site. A per-game
* guide.css may add small overrides on top. Everything is themed through the
* --gc-* variables (gc-theme.css); no colour is hardcoded here.
*
* Design intent (SPEC §9): calm, minimal text, one idea per chapter, motion that
* teaches. Reduced-motion collapses every animation to its finished/poster state.
*/
* { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
height: 100%;
}
body {
font-family: var(--gc-font);
color: var(--gc-text);
/* A quiet vertical wash keeps large empty areas from reading flat while
staying strictly within the theme (no hardcoded colour). */
background:
linear-gradient(180deg,
color-mix(in srgb, var(--gc-accent) 4%, var(--gc-bg)) 0%,
var(--gc-bg) 34%,
var(--gc-bg) 100%);
background-color: var(--gc-bg);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
line-height: 1.6;
overflow: hidden; /* the pager owns vertical space; chapters scroll internally */
}
/* Until boot.js applies the strings + theme, hide content to avoid a flash of
empty [data-i18n] elements. boot.js removes .gc-booting from . */
html.gc-booting body { visibility: hidden; }
/* ---- App shell ---------------------------------------------------------- */
.gc-guide {
position: fixed;
inset: 0;
display: flex;
flex-direction: column;
max-width: var(--gc-maxw);
margin: 0 auto;
width: 100%;
}
/* ---- Two-tab layer (For-your-mind pages; SPEC_FOR_YOUR_MIND §3) --------- *
* A minimal, reusable tab bar + tab decks layered ON TOP of the chapter pager.
* A page WITHOUT `.gc-tabs`/`.gc-tabdeck` is untouched (the guides never change).
* Each `.gc-tabdeck` is its own chaptered pager (own `.gc-stage`/`.gc-pager`),
* so boot.js can page a deck independently; only the active deck is shown.
*/
.gc-tabs {
flex: 0 0 auto;
display: flex;
gap: 8px;
padding: 10px clamp(16px, 5vw, 32px) 4px;
}
.gc-tab {
appearance: none;
flex: 1 1 0;
font-family: inherit;
font-weight: 700;
font-size: 14.5px;
padding: 9px 12px;
border-radius: 13px;
cursor: pointer;
color: var(--gc-text);
background: var(--gc-glass);
border: 1px solid var(--gc-border);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
transition: background 0.2s var(--gc-ease), color 0.2s, transform 0.15s var(--gc-ease);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.gc-tab:active { transform: scale(0.97); }
.gc-tab[aria-selected="true"] {
color: var(--gc-bg);
background: var(--gc-accent);
border-color: transparent;
}
/* Each deck fills the space between the tab bar and its own pager. Only the
active deck participates in layout; the others are fully removed so their
chapters never leak into view or the a11y tree. */
.gc-tabdeck {
flex: 1 1 auto;
display: none;
flex-direction: column;
min-height: 0;
}
.gc-tabdeck.is-active { display: flex; }
/* ---- Chapters (one visible at a time) ----------------------------------- */
/* "Back to the game" affordance — website only (boot.js injects it). */
.gc-home {
position: absolute;
top: max(12px, env(safe-area-inset-top));
left: 12px;
z-index: 20;
width: 40px;
height: 40px;
border: 1px solid var(--gc-border);
border-radius: 50%;
background: var(--gc-glass);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
color: var(--gc-text);
font-size: 26px;
line-height: 1;
padding: 0 0 3px;
cursor: pointer;
display: grid;
place-items: center;
transition: transform 0.15s var(--gc-ease), background 0.2s;
}
.gc-home:hover { background: color-mix(in srgb, var(--gc-text) 12%, transparent); }
.gc-home:active { transform: scale(0.92); }
html[dir="rtl"] .gc-home { left: auto; right: 12px; transform: scaleX(-1); }
.gc-stage {
position: relative;
flex: 1 1 auto;
overflow: hidden;
}
.gc-chapter {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
gap: var(--gc-gap);
padding: clamp(20px, 5vw, 36px);
padding-bottom: 8px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
opacity: 0;
transform: translateY(8px);
pointer-events: none;
transition: opacity 0.42s var(--gc-ease), transform 0.42s var(--gc-ease);
}
.gc-chapter.is-active {
opacity: 1;
transform: none;
pointer-events: auto;
}
/* When the website back button is present, drop the content so it clears it. */
.gc-has-home .gc-chapter { padding-top: 62px; }
/* On a two-tab page the bar sits at the very top, so clear the round back
button by indenting the tab bar instead of the chapters. */
.gc-has-home .gc-tabs { padding-left: 64px; }
html[dir="rtl"] .gc-has-home .gc-tabs { padding-left: clamp(16px, 5vw, 32px); padding-right: 64px; }
.gc-has-home .gc-tabdeck .gc-chapter { padding-top: clamp(20px, 5vw, 36px); }
/* A chapter leaving to the left/right (set by boot.js during paging). */
.gc-chapter.leave-back { transform: translateY(8px); }
.gc-chapter h1 {
font-family: var(--gc-font-display);
font-size: clamp(30px, 7vw, 40px);
font-weight: 700;
letter-spacing: -0.015em;
margin: 0;
line-height: 1.12;
text-wrap: balance;
}
.gc-chapter .gc-sub {
margin: -8px 0 0;
font-size: 15px;
font-weight: 650;
letter-spacing: 0.01em;
color: color-mix(in srgb, var(--gc-accent) 58%, var(--gc-text));
}
.gc-chapter p {
margin: 0;
font-size: clamp(16px, 4.4vw, 18px);
line-height: 1.65;
color: color-mix(in srgb, var(--gc-text) 90%, transparent);
max-width: 60ch;
}
.gc-chapter p b, .gc-chapter li b { color: var(--gc-text); font-weight: 700; }
/* ---- Figure / stage art ------------------------------------------------- */
.gc-figure {
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.gc-figure .gc-art {
width: 100%;
max-width: 440px;
min-height: 180px;
display: grid;
place-items: center;
padding: clamp(16px, 4vw, 26px);
border-radius: var(--gc-radius);
/* Glass panel: a faint top-light gradient over the secondary surface, a hair
of inner highlight, and a soft drop — all theme-derived. */
background:
linear-gradient(180deg,
color-mix(in srgb, var(--gc-highlight) 55%, transparent),
transparent 42%),
var(--gc-bg-2);
border: 1px solid var(--gc-border);
box-shadow:
inset 0 1px 0 color-mix(in srgb, var(--gc-highlight) 70%, transparent),
0 12px 32px -18px color-mix(in srgb, var(--gc-bg) 72%, transparent);
overflow: hidden;
}
.gc-figure figcaption {
font-size: 13.5px;
font-weight: 600;
text-align: center;
max-width: 44ch;
line-height: 1.5;
color: color-mix(in srgb, var(--gc-text) 60%, transparent);
}
/* ---- Steps -------------------------------------------------------------- */
.gc-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.gc-step {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 14px 16px;
border-radius: var(--gc-radius-sm);
background: var(--gc-glass);
border: 1px solid var(--gc-border);
}
.gc-step .gc-step-badge {
flex: 0 0 auto;
width: 30px; height: 30px;
border-radius: 50%;
display: grid; place-items: center;
font-weight: 800; font-size: 15px;
color: var(--gc-bg);
background: var(--gc-accent);
}
.gc-step .gc-step-text { font-size: 16px; }
/* ---- Callouts ----------------------------------------------------------- */
.gc-callout {
display: flex;
gap: 12px;
padding: 14px 16px;
border-radius: var(--gc-radius-sm);
border: 1px solid var(--gc-border);
background: var(--gc-glass);
font-size: 15.5px;
}
.gc-callout .gc-callout-icon { flex: 0 0 auto; font-size: 20px; line-height: 1.3; }
.gc-callout.tip { border-color: color-mix(in srgb, var(--gc-success) 55%, transparent); }
.gc-callout.tip .gc-callout-icon { color: var(--gc-success); }
.gc-callout.important { border-color: color-mix(in srgb, var(--gc-warning) 60%, transparent); }
.gc-callout.important .gc-callout-icon { color: var(--gc-warning); }
.gc-callout.example { border-color: color-mix(in srgb, var(--gc-accent) 55%, transparent); }
.gc-callout.example .gc-callout-icon { color: var(--gc-accent); }
/* ---- Pager / footer ----------------------------------------------------- */
.gc-pager {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px clamp(16px, 5vw, 32px);
padding-bottom: max(12px, env(safe-area-inset-bottom));
border-top: 1px solid var(--gc-border);
background: color-mix(in srgb, var(--gc-bg) 82%, transparent);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.gc-dots { display: flex; gap: 7px; align-items: center; }
.gc-dot {
width: 7px; height: 7px; border-radius: 50%;
background: color-mix(in srgb, var(--gc-text) 26%, transparent);
transition: all 0.3s var(--gc-ease);
}
.gc-dot.on {
background: var(--gc-accent);
width: 22px;
border-radius: 4px;
box-shadow: 0 0 10px color-mix(in srgb, var(--gc-accent) 45%, transparent);
}
.gc-btn {
appearance: none;
border: 0;
font-family: inherit;
font-weight: 700;
font-size: 15px;
padding: 11px 20px;
border-radius: 14px;
cursor: pointer;
color: var(--gc-bg);
background:
linear-gradient(180deg,
color-mix(in srgb, var(--gc-highlight) 60%, transparent),
transparent 55%),
var(--gc-accent);
box-shadow:
inset 0 1px 0 color-mix(in srgb, var(--gc-highlight) 80%, transparent),
0 6px 16px -8px color-mix(in srgb, var(--gc-accent) 55%, transparent);
transition: transform 0.15s var(--gc-ease), opacity 0.2s, box-shadow 0.2s;
white-space: nowrap;
}
.gc-btn:active { transform: scale(0.96); }
.gc-btn.secondary {
color: var(--gc-text);
background: var(--gc-glass);
border: 1px solid var(--gc-border);
box-shadow: inset 0 1px 0 color-mix(in srgb, var(--gc-highlight) 55%, transparent);
}
.gc-btn[hidden] { display: none; }
.gc-btn:disabled { opacity: 0.35; pointer-events: none; }
/* In-chapter CTA buttons (Ask the coach / Start playing). */
.gc-cta-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.gc-cta-row .gc-btn { flex: 1 1 auto; text-align: center; }
/* ---- Reusable board / token animation kit ------------------------------- *
* Guides compose these primitives (no per-locale text baked in). Animations
* run only while a chapter is active; reduced-motion pins them to end state.
*/
.gc-board {
display: grid;
gap: 4px;
padding: 10px;
border-radius: var(--gc-radius-sm);
background: color-mix(in srgb, var(--gc-text) 6%, transparent);
}
.gc-tile {
aspect-ratio: 1;
border-radius: 6px;
display: grid; place-items: center;
font-weight: 800;
color: var(--gc-text);
background: color-mix(in srgb, var(--gc-text) 10%, transparent);
transition: background 0.5s var(--gc-ease), transform 0.4s var(--gc-ease);
}
.gc-tile.mine { background: var(--gc-accent); color: var(--gc-bg); }
.gc-tile.foe { background: var(--gc-error); color: #fff; }
.gc-tile.gold { background: var(--gc-warning); color: var(--gc-bg); }
.gc-tile.empty { background: color-mix(in srgb, var(--gc-text) 8%, transparent); }
/* Entry animations, only when the owning chapter is active. */
.gc-chapter.is-active .anim-rise { animation: gcRise 0.6s var(--gc-ease) both; }
.gc-chapter.is-active .anim-pop { animation: gcPop 0.5s var(--gc-ease) both; }
.gc-chapter.is-active .anim-fade { animation: gcFade 0.7s var(--gc-ease) both; }
.gc-chapter.is-active .anim-climb { animation: gcClimb 3.2s var(--gc-ease) infinite; }
.gc-chapter.is-active .anim-strike { animation: gcStrike 2.6s var(--gc-ease) infinite; }
.gc-chapter.is-active .anim-pulse { animation: gcPulse 2s ease-in-out infinite; }
/* Card motions. Both settle on the element's natural styles, so the
reduced-motion resting frame (animation removed) is the finished, readable
state: the card dealt into place / face-up. */
.gc-chapter.is-active .anim-deal { animation: gcDeal 0.7s var(--gc-ease) both; }
.gc-chapter.is-active .anim-flip { animation: gcFlip 0.8s var(--gc-ease) both; }
/* Per-child stagger helper: set style="--i:N" on animated children. */
.gc-chapter.is-active [style*="--i"] { animation-delay: calc(var(--i) * 0.08s); }
@keyframes gcRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes gcDeal {
from { opacity: 0; transform: translate(-38px, 54px) rotate(-14deg); }
60% { opacity: 1; }
to { opacity: 1; transform: none; }
}
@keyframes gcFlip {
from { opacity: 0.4; transform: perspective(700px) rotateY(88deg); }
55% { opacity: 1; }
to { opacity: 1; transform: perspective(700px) rotateY(0deg); }
}
@keyframes gcPop { from { opacity: 0; transform: scale(0.7); } to { opacity: 1; transform: none; } }
@keyframes gcFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes gcPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes gcClimb {
0% { background: color-mix(in srgb, var(--gc-text) 10%, transparent); }
20% { background: var(--gc-accent); color: var(--gc-bg); }
90% { background: var(--gc-accent); color: var(--gc-bg); }
100% { background: color-mix(in srgb, var(--gc-text) 10%, transparent); }
}
@keyframes gcStrike {
0%, 30% { background: var(--gc-error); color: #fff; transform: none; }
55% { transform: scale(1.12); }
70%, 100%{ background: color-mix(in srgb, var(--gc-text) 8%, transparent); color: transparent; transform: none; }
}
/* ---- Real cards & pieces (GUIDE_REVIEW_STANDARD §10) --------------------- *
* Real game objects are IMAGES, never coloured tiles: ![]()
* and ![]()
get their src from boot.js (config.cardBase /
* config.assetsBase). The classes below size and stage them.
*/
/* A single real card image. Sizes via --gc-card-w (gc-theme.css). */
.gc-cardimg {
width: var(--gc-card-w);
max-width: 100%;
aspect-ratio: 5 / 7;
height: auto;
border-radius: var(--gc-card-radius);
box-shadow:
0 1px 2px color-mix(in srgb, var(--gc-bg) 65%, transparent),
0 8px 20px -10px color-mix(in srgb, var(--gc-bg) 85%, transparent);
background: transparent;
display: block;
-webkit-user-drag: none;
user-select: none;
}
.gc-cardimg.sm { width: calc(var(--gc-card-w) * 0.72); }
.gc-cardimg.lg { width: calc(var(--gc-card-w) * 1.3); }
/* A real board/skill piece image (chess/checkers/go…). */
.gc-pieceimg {
width: 56px;
max-width: 100%;
height: auto;
display: block;
filter: drop-shadow(0 3px 6px color-mix(in srgb, var(--gc-bg) 75%, transparent));
-webkit-user-drag: none;
user-select: none;
}
.gc-pieceimg.sm { width: 40px; }
.gc-pieceimg.lg { width: 76px; }
/* A hand/fan of real cards with even overlap. Wrap each card (or cardwrap) as
a direct child. Tune the overlap per figure with --overlap. */
.gc-cardrow {
display: flex;
align-items: flex-end;
justify-content: center;
padding: 6px 4px;
--overlap: calc(var(--gc-card-w) * -0.42);
}
.gc-cardrow > * { flex: 0 0 auto; }
.gc-cardrow > * + * { margin-left: var(--overlap); }
html[dir="rtl"] .gc-cardrow > * + * { margin-left: 0; margin-right: var(--overlap); }
/* Gentle lift on the highlighted card of a row. */
.gc-cardrow > .is-played { transform: translateY(-10px); }
/* Badged and highlighted cards paint above their overlapping neighbours so
the point chip is never hidden under the next card in the fan. */
.gc-cardrow > .gc-cardwrap,
.gc-cardrow > .is-played { position: relative; z-index: 1; }
/* A card plus an overlay (point badge). */
.gc-cardwrap { position: relative; display: inline-block; }
/* Point-value chip overlaid on a card corner. Numerals live in markup, never
in a localized string. */
.gc-badge {
position: absolute;
top: -8px;
right: -8px;
z-index: 2;
min-width: 24px;
height: 24px;
padding: 0 7px;
display: inline-grid;
place-items: center;
font-size: 13px;
font-weight: 800;
line-height: 1;
border-radius: 999px;
color: var(--gc-bg);
background: var(--gc-warning);
box-shadow:
inset 0 1px 0 color-mix(in srgb, var(--gc-highlight) 80%, transparent),
0 3px 8px -3px color-mix(in srgb, var(--gc-bg) 80%, transparent);
}
.gc-badge.accent { background: var(--gc-accent); }
.gc-badge.muted {
background: color-mix(in srgb, var(--gc-text) 30%, var(--gc-bg));
color: var(--gc-bg);
}
html[dir="rtl"] .gc-badge { right: auto; left: -8px; }
/* A table-felt surface panel — stage real cards on the game's table. Strictly
theme-derived: a deep success-tinted felt with a soft lamp-light centre. */
.gc-felt {
width: 100%;
border-radius: var(--gc-radius);
padding: clamp(14px, 4vw, 24px);
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
background:
radial-gradient(ellipse 120% 90% at 50% 12%,
color-mix(in srgb, var(--gc-highlight) 40%, transparent),
transparent 55%),
radial-gradient(ellipse 140% 130% at 50% 60%,
color-mix(in srgb, var(--gc-success) 30%, var(--gc-bg)),
color-mix(in srgb, var(--gc-success) 14%, var(--gc-bg)));
border: 1px solid color-mix(in srgb, var(--gc-success) 35%, var(--gc-border));
box-shadow:
inset 0 2px 14px color-mix(in srgb, var(--gc-bg) 55%, transparent),
inset 0 1px 0 color-mix(in srgb, var(--gc-highlight) 50%, transparent);
}
/* Two-column contrast frame for conditional rules: one side succeeds, one
fails. */
.gc-vs {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
width: 100%;
}
.gc-vs > * {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
padding: 14px 10px;
border-radius: var(--gc-radius-sm);
text-align: center;
font-size: 14px;
font-weight: 600;
}
.gc-vs .gc-vs-yes {
background: color-mix(in srgb, var(--gc-success) 12%, transparent);
border: 1px solid color-mix(in srgb, var(--gc-success) 50%, transparent);
}
.gc-vs .gc-vs-no {
background: color-mix(in srgb, var(--gc-error) 10%, transparent);
border: 1px solid color-mix(in srgb, var(--gc-error) 45%, transparent);
}
/* Verdict marks (✓/✗ glyphs are locale-agnostic; put them in markup). */
.gc-vs .gc-vs-mark { font-size: 18px; font-weight: 800; line-height: 1; }
.gc-vs .gc-vs-yes .gc-vs-mark { color: var(--gc-success); }
.gc-vs .gc-vs-no .gc-vs-mark { color: var(--gc-error); }
@media (max-width: 380px) { .gc-vs { grid-template-columns: 1fr; } }
/* Worked-example strip: cards + operator glyphs + a total chip.
![]()
+ …
=
21 */
.gc-math {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 8px;
width: 100%;
}
.gc-math .gc-math-op {
font-size: 22px;
font-weight: 800;
line-height: 1;
color: color-mix(in srgb, var(--gc-text) 55%, transparent);
}
.gc-math .gc-math-total {
min-width: 40px;
padding: 8px 14px;
display: inline-grid;
place-items: center;
font-size: 19px;
font-weight: 800;
line-height: 1;
border-radius: 999px;
color: var(--gc-bg);
background: var(--gc-accent);
box-shadow:
inset 0 1px 0 color-mix(in srgb, var(--gc-highlight) 80%, transparent),
0 6px 14px -7px color-mix(in srgb, var(--gc-accent) 60%, transparent);
}
/* ---- "For your mind" general tab (shared fragment) ---------------------- *
* Styling for _shared/mind-general/general.html. Kept here (always-loaded) so
* the fetched fragment is styled on every surface, including file://.
*/
/* Orbiting-faculties motif: one calm mind, four mental actions around it. */
.mg-orbit { position: relative; width: 200px; height: 200px; display: grid; place-items: center; }
.mg-orbit-core { font-size: 56px; line-height: 1; }
.mg-orbit-dot {
position: absolute; font-size: 26px; line-height: 1; top: 50%; left: 50%;
transform: translate(-50%, -50%)
rotate(calc(var(--a) * 90deg)) translateY(-84px)
rotate(calc(var(--a) * -90deg));
filter: drop-shadow(0 2px 6px var(--gc-glass));
}
/* Evidence legend: a coloured tag + its definition. */
.mg-legend { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.mg-legend-row {
display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 12px;
padding: 12px 14px; border-radius: var(--gc-radius-sm);
background: var(--gc-glass); border: 1px solid var(--gc-border);
}
.mg-legend-row dd { margin: 0; font-size: 15px; color: color-mix(in srgb, var(--gc-text) 88%, transparent); }
.mg-tag {
align-self: start; font-size: 12.5px; font-weight: 800; letter-spacing: 0.01em;
padding: 4px 10px; border-radius: 999px; white-space: nowrap;
color: var(--gc-bg); background: var(--gc-accent);
}
.mg-tag-direct { background: var(--gc-success); }
.mg-tag-family { background: var(--gc-accent); }
.mg-tag-mech { background: var(--gc-warning); color: var(--gc-bg); }
.mg-tag-adj { background: color-mix(in srgb, var(--gc-text) 34%, transparent); color: var(--gc-bg); }
html[dir="rtl"] .mg-legend-row { grid-template-columns: 1fr auto; }
html[dir="rtl"] .mg-legend-row dt { order: 2; }
html[dir="rtl"] .mg-legend-row dd { order: 1; }
/* Slow Gaming promise (mg-promise): the brand-defining principles, listed. Five
things a calm game refuses to do (mg-no) + the one thing it is (mg-yes). */
.mg-principles { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.mg-principle {
display: flex; align-items: center; gap: 12px;
padding: 11px 14px; border-radius: var(--gc-radius-sm);
background: var(--gc-glass); border: 1px solid var(--gc-border);
font-size: 16px; font-weight: 600;
color: color-mix(in srgb, var(--gc-text) 92%, transparent);
}
.mg-principle-mark {
flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
display: grid; place-items: center; font-size: 13px; font-weight: 800;
}
.mg-principle-mark.mg-no { color: var(--gc-error); background: color-mix(in srgb, var(--gc-error) 16%, transparent); }
.mg-principle-mark.mg-yes { color: var(--gc-bg); background: var(--gc-success); }
.mg-principle-yes {
background: color-mix(in srgb, var(--gc-success) 14%, transparent);
border-color: color-mix(in srgb, var(--gc-success) 45%, transparent);
color: var(--gc-text); font-weight: 700;
}
html[dir="rtl"] .mg-principle { flex-direction: row-reverse; }
/* The Slow Gaming mark for the promise hero. Sized by width so the artwork's
own aspect ratio is kept; capped so it never dominates a small screen. The
soft shadow seats it on the glass panel the way the card art is seated. */
.mg-logo {
display: block; width: min(240px, 62%); height: auto; margin: 0 auto;
filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.38));
}
/* Retained: older mind pages may still carry the shield-and-leaf motif. */
.mg-shield { position: relative; display: grid; place-items: center; width: 160px; height: 160px; }
.mg-shield-core { font-size: 84px; line-height: 1; }
.mg-shield-leaf {
position: absolute; font-size: 30px; line-height: 1; transform: translateY(6px);
filter: drop-shadow(0 2px 6px var(--gc-glass));
}
/* Skills-in-play chip row — the ≤6 skill labels every mind Tab B lists. */
.gc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.gc-chip {
font-size: 13.5px; font-weight: 700; line-height: 1;
padding: 8px 12px; border-radius: 999px;
color: var(--gc-text);
background: color-mix(in srgb, var(--gc-accent) 16%, transparent);
border: 1px solid color-mix(in srgb, var(--gc-accent) 40%, transparent);
}
/* ---- Reduced motion ----------------------------------------------------- */
/* Reduced motion disables animation/transition but MUST keep the pager's
one-chapter-at-a-time behaviour (.is-active toggles opacity as a state, not an
animation) — so we never force all chapters visible (that would stack them). */
html[data-reduce="1"] .gc-chapter,
html[data-reduce="1"] .gc-chapter * {
animation: none !important;
transition: none !important;
}
html[data-reduce="1"] .gc-chapter.is-active { transform: none; }
/* Pin the looping demos to a readable finished frame. */
html[data-reduce="1"] .anim-climb { background: var(--gc-accent); color: var(--gc-bg); }
html[data-reduce="1"] .anim-strike { background: color-mix(in srgb, var(--gc-text) 8%, transparent); color: transparent; }
@media (prefers-reduced-motion: reduce) {
.gc-chapter, .gc-chapter * { animation: none !important; transition: none !important; }
.gc-chapter.is-active { transform: none; }
}
/* ---- RTL ---------------------------------------------------------------- */
html[dir="rtl"] .gc-step { flex-direction: row-reverse; }
html[dir="rtl"] .gc-callout { flex-direction: row-reverse; }
html[dir="rtl"] .gc-pager { flex-direction: row-reverse; }
/* Deal from the near edge in RTL too. */
html[dir="rtl"] .gc-chapter.is-active .anim-deal { animation-name: gcDealRTL; }
@keyframes gcDealRTL {
from { opacity: 0; transform: translate(38px, 54px) rotate(14deg); }
60% { opacity: 1; }
to { opacity: 1; transform: none; }
}
/* ---- Light scheme (site respects the visitor's OS; in-app theme wins) ---- */
@media (prefers-color-scheme: light) {
:root:not([data-theme]) {
--gc-text: #1a1d21;
--gc-bg: #f6f7f9;
--gc-bg-2: #ffffff;
--gc-glass: rgba(0, 0, 0, 0.04);
--gc-border: rgba(0, 0, 0, 0.12);
--gc-highlight: rgba(0, 0, 0, 0.06);
}
}