/* ============================================================================ * element-card.css — ⚗️ The Element Card (element-picker) * Engine styles (.ec-*) + the SEO content block (.ec-content). * Page identity accent = teal (--ec-accent, set on ); tiles + the revealed * card carry their element's CATEGORY colour (--ec-win / .ec-cat-*). * ========================================================================== */ /* ---- page ground ---------------------------------------------------------- */ /* ⚠️ THIS PAGE IS DARK BY ITS OWN BACKGROUND, NOT BY body[data-theme]. Every shared component (the tool-intro band, the .wsp-set rows) reads --theme-*, and with those unset they fall back to the LIGHT defaults: the H1 measured 1.23:1 and the h2 sub 2.97:1 against this navy the moment the standard chrome was added. Declaring the set once fixes every one of them. Same root cause as hogwarts/planet in batch 29b — SKILLS rule 48. */ /* ⛔ LIGHT THEME ONLY (:not([data-theme])). themes.css paints `body[data-theme] .card` from var(--theme-surface), so overriding these variables UNCONDITIONALLY forced the card white in dark/high-contrast/etc too — the owner spotted it immediately ("the background is always white now, no matter the theme"). In every real theme, themes.css already supplies the right values; this page only needs them where NO theme is set. */ body.page-element-picker:not([data-theme]) { --theme-text: #dfe9f5; --theme-muted: #9db0c7; --theme-accent: #37e0c6; --theme-surface: rgba(10,18,32,0.88); /* ⛔ --theme-surface AND --theme-surface-text ARE A PAIR. This page redefined the surface as a dark translucent panel and left the ink at its light-theme default, so anything painted with the pair came out dark on dark. It surfaced on 2026-08-28 when the tool-action buttons started using --theme-surface-text: 1.22:1, the worst reading on the whole site. Any block that moves one of these must move the other (SKILLS 115). */ --theme-surface-text: #dfe9f5; --theme-border: rgba(77,171,247,0.30); background: radial-gradient(1100px 640px at 50% -14%, rgba(55, 224, 198, .10), transparent 60%), radial-gradient(760px 520px at 88% 116%, rgba(97, 122, 200, .10), transparent 55%), linear-gradient(168deg, #071120 0%, #050b16 58%, #04070f 100%) !important; min-height: 100vh; } /* ⚠️ ONE VARIABLE, TWO CONTEXTS. The light set above is for text sitting on the dark PAGE (the H1 band). But this page's cards are WHITE, so the same --theme-text made every .wsp-set-label 1.23:1 inside them. Restore the dark ink within any card; measured 15.43:1 after. */ body.page-element-picker:not([data-theme]) .card { --theme-text: #212529; --theme-muted: #5a6570; --theme-surface: #ffffff; --theme-surface-text: #212529; /* the pair again — the cards are white */ --theme-border: #e5e7eb; } body.page-element-picker .container { position: relative; } /* ---- stage ---------------------------------------------------------------- */ .ec-stage { position: relative; padding: 12px 4px 4px; border-radius: 14px; } /* category colours (mirror element-card-engine.js COLOR + the view legend) */ .ec-cat-am { --c: #ff8787; } .ec-cat-ae { --c: #ffa94d; } .ec-cat-tm { --c: #ffd43b; } .ec-cat-ptm { --c: #4dabf7; } .ec-cat-met { --c: #38d9a9; } .ec-cat-nm { --c: #51cf66; } .ec-cat-hal { --c: #94d82d; } .ec-cat-ng { --c: #b197fc; } .ec-cat-lan { --c: #f783ac; } .ec-cat-act { --c: #e599f7; } .ec-cat-unk { --c: #adb5bd; } /* periodic grid */ .ec-table { display: grid; grid-template-columns: repeat(18, 1fr); grid-auto-rows: 1fr; gap: 3px; max-width: 660px; margin: 0 auto; aspect-ratio: 18 / 10; } .ec-cell { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 4px; border: 1px solid color-mix(in srgb, var(--c, #8aa) 62%, transparent); background: color-mix(in srgb, var(--c, #8aa) 30%, #0a1322); color: #eaf2ff; min-width: 0; cursor: default; transition: transform .18s ease, box-shadow .2s ease, opacity .25s ease, background .2s ease; will-change: transform; } .ec-cell .ec-n { font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: 6px; line-height: 1; color: color-mix(in srgb, var(--c, #9fb4d8) 45%, #cdddf5); margin-top: 1px; } .ec-cell .ec-s { font-size: 11px; font-weight: 700; line-height: 1.05; color: color-mix(in srgb, var(--c, #cfe) 30%, #ffffff); } .ec-cell.ec-off { opacity: .16; filter: grayscale(.5); } /* ⚠️ THE HOP HAS TO BE OBVIOUS. A resting tile is color-mix(var(--c) 30%, #0a1322); the lit state used 40% — a TEN percent difference plus a glow, which on the white card this page uses in light theme is almost impossible to follow, worst on the darkest categories (owner, 2026-08-22: "the hop color is so light that its not visible where its hopping"). The sweep is the whole mechanic, so it now differs by MIX, by BRIGHTNESS, by a solid ring and by scale — four cues, not one. */ .ec-cell.ec-lit { background: color-mix(in srgb, var(--c, #8aa) 88%, #ffffff); border-color: #fff; transform: scale(1.18); box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--c, #8aa), 0 0 18px 4px color-mix(in srgb, var(--c, #8aa) 75%, transparent); z-index: 3; } .ec-cell.ec-lit .ec-s, .ec-cell.ec-lit .ec-z { color: #0b1524; } .ec-cell.ec-won { background: color-mix(in srgb, var(--c, #8aa) 50%, #0b1524); border-color: var(--c, #8aa); transform: scale(1.55); box-shadow: 0 0 0 1px var(--c, #8aa), 0 0 26px 5px color-mix(in srgb, var(--c, #8aa) 70%, transparent), 0 10px 26px -6px rgba(0, 0, 0, .7); z-index: 5; } .ec-cell.ec-won .ec-s { color: #fff; } /* dim the table + scrim when a card is showing (focus on the reveal) */ /* ⚠️ THE ROOM FOR THE CARD IS RESERVED AT REST, NOT ON REVEAL. This was `.ec-stage.ec-done { min-height: 400px; }` — the stage GREW the moment the card opened. Owner 2026-08-23: "the moment the winner card is displayed, there is a dark background appear below the winner card and the Reveal the Element button shifts down... why this button or anything else moves when the winner is a modal popup card?" Measured: stage 383px -> 400px on reveal at 1440, which grew the card 556 -> 574 and moved the stage 40px. ⚠️ It cannot simply be deleted. `.ec-card` is capped at `max-height: 94%` of THIS element with `overflow:auto`, so a short stage does not overflow — it makes the card SCROLL. Deleting the min-height left the card scrolled and half its face cut off at 390px wide (measured: card 376px, stage 265px). So the same 400px is reserved ALWAYS. Empty and revealed are then identical by construction, the reveal moves nothing, and the card never scrolls (SKILLS rule 75). */ /* No min-height either at rest or on reveal: with the card bounded by the viewport above, the stage never needs to change size, so the reveal cannot move anything. */ .ec-stage.ec-done .ec-table { filter: brightness(.42) saturate(.7); transition: filter .35s ease; } .ec-stage::before { content: ""; position: absolute; inset: 0; border-radius: 14px; z-index: 4; background: rgba(5, 9, 18, .5); opacity: 0; pointer-events: none; transition: opacity .3s ease; } .ec-stage.ec-done::before { opacity: 1; } /* ---- the element card (centred overlay on top of the table) --------------- */ .ec-card { --ec-win: #51cf66; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -46%) scale(.98); width: min(540px, 96%); /* ⚠️ A POPUP IS BOUNDED BY THE VIEWPORT, NOT BY ITS CONTAINER. This was `max-height: 94%` — 94% of .ec-stage — so whenever the stage was shorter than the card, the card did not overflow, it SCROLLED, and half its face was unreachable (measured at 390px wide: content 531px, cap 376px). That is also why the stage had to grow on reveal, which is what moved the button. Capping by viewport height instead means the card is as tall as it needs to be, the stage never has to change size, and there is more room in fullscreen — where there is more screen. */ max-height: 90vh; overflow: auto; z-index: 10; border-radius: 18px; background: linear-gradient(158deg, #12213a 0%, #0d1830 62%, #0b1428 100%); border: 1px solid rgba(126, 158, 214, .30); box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .85), 0 0 0 1px color-mix(in srgb, var(--ec-win) 18%, transparent); padding: 18px 20px 16px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .34s ease, transform .34s cubic-bezier(.2, .8, .3, 1), visibility .34s; } .ec-card.ec-card-open { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, -50%) scale(1); } /* close / save actions on the card */ .ec-card-actions { position: absolute; top: 9px; right: 10px; display: flex; gap: 5px; z-index: 3; } .ec-card-actions button { background: rgba(255, 255, 255, .06); border: 1px solid rgba(126, 158, 214, .3); color: #cdd9ee; border-radius: 8px; width: 30px; height: 30px; display: grid; place-items: center; cursor: pointer; font-size: 15px; line-height: 1; transition: background .15s ease, color .15s ease; } .ec-card-actions .ec-card-close { font-size: 20px; } .ec-card-actions button:hover { background: rgba(255, 255, 255, .13); color: #fff; } .ec-card-actions button:focus-visible { outline: 2px solid var(--ec-win); outline-offset: 2px; } .ec-card::after { content: ""; position: absolute; top: -1px; left: 22px; right: 22px; height: 2px; background: linear-gradient(90deg, transparent, var(--ec-win), transparent); opacity: .85; } .ec-card-grid { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: 18px; align-items: center; } .ec-idblock { display: flex; flex-direction: column; } .ec-row1 { display: flex; justify-content: space-between; align-items: flex-start; font-family: ui-monospace, monospace; color: #8ea6cc; font-size: 12.5px; } .ec-row1 .ec-z { font-size: 15px; color: #eaf2ff; font-weight: 600; } .ec-row1 .ec-mass { text-align: right; font-variant-numeric: tabular-nums; } .ec-row1 .ec-mass b { display: block; color: #eaf2ff; font-size: 14px; font-weight: 600; } .ec-row1 .ec-mass span { font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase; color: #5f7398; } .ec-symbol { font-size: 96px; line-height: .9; font-weight: 800; letter-spacing: -.03em; margin: 2px 0 2px -3px; color: var(--ec-win); text-shadow: 0 2px 30px color-mix(in srgb, var(--ec-win) 40%, transparent); } .ec-ename { font-size: 25px; font-weight: 800; letter-spacing: -.01em; margin: 0 0 8px; color: #fff; } .ec-chip { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: color-mix(in srgb, var(--ec-win) 55%, #ffffff); background: color-mix(in srgb, var(--ec-win) 15%, transparent); border: 1px solid color-mix(in srgb, var(--ec-win) 55%, transparent); border-radius: 999px; padding: 5px 12px; } .ec-chip .ec-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ec-win); box-shadow: 0 0 10px var(--ec-win); } .ec-atomwrap { display: flex; flex-direction: column; align-items: center; gap: 12px; } .ec-bohr { width: 148px; height: 148px; filter: drop-shadow(0 0 16px color-mix(in srgb, var(--ec-win) 34%, transparent)); } .ec-config { font-family: ui-monospace, monospace; font-size: 12px; color: #8ea6cc; letter-spacing: .04em; text-align: center; } .ec-config b { color: var(--ec-win); font-weight: 600; } .ec-facts { position: relative; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(126, 158, 214, .16); display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .ec-fact { display: flex; flex-direction: column; gap: 4px; } .ec-fact .ec-k { font-family: ui-monospace, monospace; font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: #5f7398; } .ec-fact .ec-v { font-size: 13.5px; line-height: 1.35; color: #d7e5fb; font-weight: 500; } .ec-fact .ec-v b { color: #fff; font-weight: 700; } /* ---- controls ------------------------------------------------------------- */ .ec-revealbtn-wrap { display: flex; justify-content: center; margin-top: 16px; } .ec-revealbtn-main { border: none; border-radius: 12px; padding: 13px 30px; font-size: 16px; font-weight: 700; letter-spacing: .01em; color: #04140f; cursor: pointer; background: linear-gradient(180deg, var(--ec-grad-a, #5df0d3), var(--ec-grad-b, #22c9ac)); box-shadow: 0 10px 26px -10px color-mix(in srgb, var(--ec-accent, #37e0c6) 70%, transparent); transition: transform .12s ease, box-shadow .2s ease; } .ec-revealbtn-main:hover { transform: translateY(-1px); box-shadow: 0 14px 30px -10px color-mix(in srgb, var(--ec-accent, #37e0c6) 80%, transparent); } .ec-revealbtn-main:active { transform: translateY(0); } .ec-scope-row { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; color: #a9bde0; font-size: 14px; } .ec-scope-row select { appearance: none; -webkit-appearance: none; -moz-appearance: none; color: #eaf2ff; border: 1px solid rgba(126, 158, 214, .35); border-radius: 9px; padding: 8px 36px 8px 13px; font-size: 14px; font-weight: 600; cursor: pointer; line-height: 1.25; background-color: #0a1526; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%239fb4d8' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 12px; } .ec-scope-row select:hover { border-color: rgba(126, 158, 214, .55); } .ec-scope-row select:focus-visible { outline: 2px solid var(--ec-accent, #37e0c6); outline-offset: 2px; } .ec-scope-row select option { background: #0a1526; color: #eaf2ff; } .ec-effects { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; margin-top: 16px; color: #a9bde0; font-size: 14px; } .ec-effects label { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; } /* ---- legend --------------------------------------------------------------- */ .ec-legend { display: flex; flex-wrap: wrap; gap: 6px 12px; justify-content: center; margin: 14px auto 0; max-width: 660px; } .ec-legend .ec-leg { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: #90a6cc; } .ec-legend .ec-leg i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; background: var(--c); border: 1px solid color-mix(in srgb, var(--c) 60%, transparent); } /* winner-result-bar accents for this page */ body.page-element-picker { --wsp-result-accent: #37e0c6; --wsp-result-grad: linear-gradient(180deg, #5df0d3, #22c9ac); --wsp-result-btn-ink: #04140f; --wsp-result-plate: #10233b; --wsp-result-display: inherit; --wsp-result-tint: rgba(55, 224, 198, .08); } @media (max-width: 620px) { .ec-card-grid { grid-template-columns: 1fr; gap: 8px; } .ec-atomwrap { order: -1; } .ec-facts { grid-template-columns: 1fr; } .ec-cell .ec-s { font-size: 8px; } .ec-cell .ec-n { font-size: 5px; } .ec-symbol { font-size: 80px; } } /* ---- SEO content block ---------------------------------------------------- */ .ec-content { color: #cdd9ee; } .ec-content .ec-inner { max-width: 860px; margin: 0 auto; } .ec-content .ec-kicker { display: inline-block; font-family: ui-monospace, monospace; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: #04140f; font-weight: 700; padding: 5px 12px; border-radius: 999px; background: linear-gradient(180deg, #5df0d3, #22c9ac); margin-bottom: 14px; } .ec-content .ec-lead { font-size: 1.2rem; line-height: 1.6; color: #e6eefc; } .ec-content .ec-section { margin-top: 3rem; } .ec-content h2 { color: #eaf5ff; font-weight: 800; letter-spacing: -.01em; } .ec-content h3 { color: #d7e5fb; font-weight: 700; } .ec-content .table { color: #cdd9ee; } .ec-content .table thead th { color: #9fe9d8; border-color: rgba(126, 158, 214, .25); } .ec-content .table td, .ec-content .table th { border-color: rgba(126, 158, 214, .14); } .ec-content .ec-faq .accordion-button { font-weight: 600; }