/* Revibed Games — Phosphor (1985) + Flightdeck (2200) era skins. The era toggle swaps design tokens on ; copy swaps via .only-1985/.only-2200. */ :root { --bg: #0a0f0a; --panel: #0c120c; --panel2: #10170f; --edge: #234227; --edge-soft: #1d3320; --bright: #7dff8a; --dim: #3f7a46; --txt: #b8e0b0; --txt2: #8fc796; --sub: #5f9a63; --coin: #7dff8a; --coin-ink: #06110a; --relay: #35c3d0; --ssu3d: #f2c744; --ttt: #b184e0; --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; --sans: "Avenir Next", Avenir, "Segoe UI", system-ui, sans-serif; } /* 2200 = the SDUK Studio dark token set (skills/sduk-brand tokens v1) — "SDUK Studio is the future": night #0A1220 · surface #0E1B30 · cyan #4CC3E8 · amber #F0A32B (highlight/keylines/brackets) · grid #1C3352 · IBM Plex faces. Per-game accents unify to brand cyan in this era; brackets are amber. */ [data-era="2200"] { --bg: #0A1220; --panel: rgba(14, 27, 48, 0.78); --panel2: #0E1B30; --edge: #1C3352; --edge-soft: #1C3352; --bright: #4CC3E8; --dim: #1C3352; --txt: #E6EEF5; --txt2: #9FB1C4; --sub: color-mix(in srgb, #9FB1C4 72%, #0A1220); --coin: #F0A32B; --coin-ink: #2B1D04; --amber: #F0A32B; --relay: #4CC3E8; --ssu3d: #4CC3E8; --ttt: #4CC3E8; --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; --sans: "IBM Plex Sans", "Avenir Next", Avenir, "Segoe UI", system-ui, sans-serif; } * { box-sizing: border-box; } html { color-scheme: dark; } body { background: var(--bg); color: var(--txt); font-family: var(--mono); margin: 0; line-height: 1.6; transition: background 0.5s ease, color 0.5s ease; min-height: 100vh; } html[data-era="2200"] body { font-family: var(--sans); background-image: radial-gradient(ellipse 80% 55% at 75% -10%, rgba(76, 195, 232, 0.10), transparent 60%), radial-gradient(ellipse 60% 40% at 12% 112%, rgba(240, 163, 43, 0.05), transparent 60%), linear-gradient(rgba(28, 51, 82, 0.45) 1px, transparent 1px), linear-gradient(90deg, rgba(28, 51, 82, 0.45) 1px, transparent 1px); background-size: auto, auto, 44px 44px, 44px 44px; } .wrap { max-width: 62rem; margin: 0 auto; padding: 0 1.25rem 4rem; } a { color: var(--bright); } a:focus-visible, button:focus-visible { outline: 2px solid var(--bright); outline-offset: 3px; border-radius: 2px; } .only-2200 { display: none; } html[data-era="2200"] .only-2200 { display: inline; } html[data-era="2200"] .only-1985 { display: none; } /* era toggle */ .eratoggle { position: fixed; top: 0.9rem; right: 1.1rem; z-index: 10; cursor: pointer; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.14em; color: var(--sub); background: var(--panel2); border: 1px solid var(--edge-soft); padding: 0.4rem 0.8rem; border-radius: 3px; } .eratoggle b { color: var(--bright); font-weight: 700; } .eratoggle:hover { border-color: var(--bright); color: var(--txt); } /* header / wordmark */ .boot { padding: 2.5rem 0 0.5rem; font-size: 0.72rem; color: var(--sub); letter-spacing: 0.1em; font-family: var(--mono); } .wm { margin: 0.25rem 0; font-family: var(--mono); font-weight: 700; letter-spacing: 0.12em; font-size: clamp(1.7rem, 5.5vw, 3.1rem); color: var(--bright); text-wrap: balance; text-shadow: 0 0 8px color-mix(in srgb, var(--bright) 70%, transparent), 0 0 28px color-mix(in srgb, var(--bright) 32%, transparent); } .wm a { color: inherit; text-decoration: none; } .wm .half { color: var(--dim); text-shadow: none; } .wm .games { color: var(--txt2); text-shadow: none; font-weight: 400; letter-spacing: 0.18em; margin-left: 0.4em; } .cursor { display: inline-block; width: 0.34em; height: 0.78em; background: var(--bright); vertical-align: -0.02em; margin-left: 0.18em; animation: blink 1.1s steps(1) infinite; box-shadow: 0 0 8px color-mix(in srgb, var(--bright) 70%, transparent); } @keyframes blink { 50% { opacity: 0; } } html[data-era="2200"] .wm { font-family: var(--sans); font-weight: 300; letter-spacing: 0.4em; color: #E6EEF5; text-shadow: 0 0 22px rgba(76, 195, 232, 0.40); } html[data-era="2200"] .wm .half { color: #E6EEF5; } html[data-era="2200"] .wm .re { font-weight: 700; color: var(--bright); } html[data-era="2200"] .wm .games { color: var(--amber); font-weight: 400; } html[data-era="2200"] .cursor { display: none; } .tag { color: var(--txt2); font-size: 0.95rem; margin: 0 0 0.6rem; } .hero { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 2.6rem; align-items: center; margin: 1.2rem 0 1.6rem; padding-top: 1.4rem; border-top: 1px solid var(--edge-soft); } @media (max-width: 820px) { .hero { grid-template-columns: 1fr; gap: 1.4rem; } } .hero .mission { margin: 0; } .hero-art .shotbox { position: relative; display: block; border-radius: 4px; overflow: hidden; border: 1px dashed var(--edge-soft); background: var(--panel); } html[data-era="2200"] .hero-art .shotbox { border-style: solid; border-radius: 3px; } html[data-era="2200"] .hero-art .shotbox::before, html[data-era="2200"] .hero-art .shotbox::after { content: ""; position: absolute; width: 18px; height: 18px; pointer-events: none; z-index: 1; } html[data-era="2200"] .hero-art .shotbox::before { top: -1px; left: -1px; border-top: 2px solid var(--amber); border-left: 2px solid var(--amber); } html[data-era="2200"] .hero-art .shotbox::after { bottom: -1px; right: -1px; border-bottom: 2px solid var(--amber); border-right: 2px solid var(--amber); } .hero-art img { display: block; width: 100%; height: auto; } .hero-art .art-1985, .hero-art .art-2200 { display: none; } html[data-era="1985"] .hero-art .art-1985 { display: block; } html[data-era="2200"] .hero-art .art-2200 { display: block; } .hero-art .crt { display: block; width: 100%; height: auto; aspect-ratio: 4/3; color: var(--bright); padding: 6%; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--bright) 35%, transparent)); } .hero-art .crt text { letter-spacing: 0.04em; } .hero-art .crt .crt-fix { display: none; } .hero-art .shotbox:hover .crt-fix, .hero-art .shotbox.vibed .crt-fix { display: block; } .hero-art .shotbox:hover .crt-err, .hero-art .shotbox.vibed .crt-err { display: none; } .crt-cursor { animation: blink 1.1s steps(1) infinite; } @media (prefers-reduced-motion: reduce) { .crt-cursor { animation: none; } } .hero-art .shotbox:hover img, .hero-art .shotbox.vibed img { filter: none; } .hero-art .shotbox:hover .scan, .hero-art .shotbox.vibed .scan { opacity: 0; } .hero-art .ph-art { display: flex; flex-direction: column; align-items: center; justify-content: center; aspect-ratio: 4/3; color: var(--bright); gap: 0.8rem; } html[data-era="2200"] .hero-art .ph-art { color: var(--bright); } .hero-art .ph-art svg { width: 55%; height: auto; opacity: 0.9; } .hero-art .ph-art .ph-note { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.16em; color: var(--sub); } .mhead { margin: 0.1rem 0 0.5rem; font-family: var(--sans); font-weight: 700; letter-spacing: 0.01em; font-size: clamp(1.5rem, 3.4vw, 2.3rem); line-height: 1.15; color: var(--txt); text-wrap: balance; } html[data-era="1985"] .mhead { font-family: var(--mono); } .mhead .mark { color: var(--bright); } html[data-era="1985"] .mhead .mark { text-shadow: 0 0 14px color-mix(in srgb, var(--bright) 45%, transparent); } html[data-era="2200"] .mhead .mark { color: var(--amber); } .mission { margin: 1.3rem 0 0.4rem; max-width: 38rem; } .mission .mlabel { margin: 0 0 0.25rem; color: var(--sub); font-size: 0.66rem; letter-spacing: 0.16em; font-family: var(--mono); } .mission .mtext { margin: 0; color: var(--txt2); font-size: 0.88rem; } html[data-era="2200"] .mission .mtext { font-family: var(--sans); } .mission .mtext b { color: var(--bright); font-weight: 700; } .hint { color: var(--sub); font-size: 0.7rem; letter-spacing: 0.14em; margin-bottom: 2rem; font-family: var(--mono); } .hint-touch { display: none; } @media (hover: none) { .hint-hover { display: none; } .hint-touch { display: inline; } } /* cards — the transformation: rest = vintage build, hover/.vibed = re-vibed */ .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 1.15rem; } .gamecard { position: relative; display: block; text-decoration: none; color: inherit; background: var(--panel); border: 1px dashed var(--edge-soft); border-radius: 6px; padding: 0.9rem; transition: transform 0.35s ease, border-color 0.35s ease, background 0.35s ease, box-shadow 0.35s ease; } html[data-era="2200"] .gamecard { border-style: solid; border-radius: 3px; } html[data-era="2200"] .gamecard::before, html[data-era="2200"] .gamecard::after { content: ""; position: absolute; width: 14px; height: 14px; pointer-events: none; transition: all 0.3s ease; } html[data-era="2200"] .gamecard::before { top: -1px; left: -1px; border-top: 2px solid var(--amber); border-left: 2px solid var(--amber); } html[data-era="2200"] .gamecard::after { bottom: -1px; right: -1px; border-bottom: 2px solid var(--amber); border-right: 2px solid var(--amber); } html[data-era="2200"] .gamecard:hover::before, html[data-era="2200"] .gamecard:hover::after, html[data-era="2200"] .gamecard.vibed::before, html[data-era="2200"] .gamecard.vibed::after { width: 26px; height: 26px; } .gamecard .shotbox { position: relative; border-radius: 4px; overflow: hidden; margin-bottom: 0.7rem; display: block; } .gamecard .shot { display: block; width: 100%; height: auto; aspect-ratio: 16/10; object-fit: cover; transition: filter 0.45s ease, transform 0.45s ease; filter: grayscale(1) sepia(0.65) hue-rotate(62deg) saturate(2.4) brightness(0.9) contrast(1.05); } html[data-era="2200"] .gamecard .shot { filter: grayscale(0.9) sepia(0.35) hue-rotate(165deg) saturate(2.6) brightness(0.82); } .gamecard .shot.ph3d { display: flex; align-items: center; justify-content: center; background: #0a120a; color: var(--bright); filter: none; aspect-ratio: 16/10; } html[data-era="2200"] .gamecard .shot.ph3d { background: #0E1B30; color: var(--gc); filter: none; } .gamecard .shot.ph3d svg { width: 70%; height: auto; } .scan { position: absolute; inset: 0; pointer-events: none; opacity: 0.5; transition: opacity 0.45s; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.32) 0 1px, transparent 1px 3px); } html[data-era="2200"] .scan { background: repeating-linear-gradient(0deg, rgba(76, 195, 232, 0.06) 0 2px, transparent 2px 5px); } .titles { display: block; position: relative; height: 1.55em; margin-bottom: 0.15rem; white-space: nowrap; overflow: hidden; } .t-old, .t-new { position: absolute; inset: 0; transition: opacity 0.35s ease; white-space: nowrap; } .t-old { font-family: var(--mono); font-weight: 700; letter-spacing: 0.1em; color: var(--bright); } .t-new { font-family: var(--sans); font-weight: 700; font-size: 1.12em; letter-spacing: 0.02em; color: #f2fbf2; opacity: 0; } html[data-era="2200"] .t-new { color: #E6EEF5; letter-spacing: 0.1em; } .buildchip { display: block; font-size: 0.62rem; letter-spacing: 0.12em; height: 1.4em; white-space: nowrap; overflow: hidden; font-family: var(--mono); } .chip-old { color: #8a9a6a; } html[data-era="2200"] .chip-old { color: var(--sub); } .chip-new { color: var(--gc); display: none; opacity: 0; font-family: var(--sans); font-weight: 600; transition: opacity 0.35s ease; } .gdesc { display: block; font-size: 0.78rem; color: var(--txt2); min-height: 4.2em; margin: 0.45rem 0 0.6rem; transition: color 0.35s; font-family: var(--mono); } html[data-era="2200"] .gdesc { font-family: var(--sans); color: var(--sub); } .cta-row { display: flex; justify-content: space-between; align-items: center; } .viewrec { font-size: 0.7rem; color: var(--sub); letter-spacing: 0.08em; transition: color 0.35s; font-family: var(--mono); } .playbtn { font-family: var(--sans); font-size: 0.75rem; font-weight: 700; padding: 0.3rem 0.8rem; border-radius: 4px; background: transparent; color: var(--sub); border: 1px solid var(--edge-soft); transition: all 0.35s ease; } html[data-era="2200"] .playbtn { border-radius: 2px; clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); } .gamecard:hover, .gamecard.vibed { transform: translateY(-5px); border: 1px solid var(--gc); box-shadow: 0 14px 38px rgba(0, 0, 0, 0.55), 0 0 22px color-mix(in srgb, var(--gc) 28%, transparent); } html[data-era="1985"] .gamecard:hover, html[data-era="1985"] .gamecard.vibed { background: #0d141c; } .gamecard:hover .shot, .gamecard.vibed .shot { filter: none !important; transform: scale(1.03); } .gamecard:hover .scan, .gamecard.vibed .scan { opacity: 0; } .gamecard:hover .t-old, .gamecard.vibed .t-old { opacity: 0; } .gamecard:hover .t-new, .gamecard.vibed .t-new { opacity: 1; } .gamecard:hover .chip-old, .gamecard.vibed .chip-old { display: none; } .gamecard:hover .chip-new, .gamecard.vibed .chip-new { display: inline; opacity: 1; } .gamecard:hover .gdesc, .gamecard.vibed .gdesc { color: #cfe0e8; font-family: var(--sans); } .gamecard:hover .viewrec, .gamecard.vibed .viewrec { color: var(--gc); } .gamecard:hover .playbtn, .gamecard.vibed .playbtn { background: var(--gc); color: #06110a; border-color: var(--gc); } /* 2200 hover = "restored to daylight": the card flips to the brand's LIGHT token column (white surface, ink text, light-ground cyan #0E7490 — all AA pairs). */ html[data-era="2200"] .gamecard:hover, html[data-era="2200"] .gamecard.vibed { background: #F7F9FB; border-color: #0E7490; box-shadow: 0 14px 38px rgba(0, 0, 0, 0.55), 0 0 26px rgba(76, 195, 232, 0.30); } html[data-era="2200"] .gamecard:hover .t-new, html[data-era="2200"] .gamecard.vibed .t-new { color: #0C2340; } html[data-era="2200"] .gamecard:hover .chip-new, html[data-era="2200"] .gamecard.vibed .chip-new { color: #0E7490; } html[data-era="2200"] .gamecard:hover .gdesc, html[data-era="2200"] .gamecard.vibed .gdesc { color: #5B6B7C; } html[data-era="2200"] .viewrec { padding: 0.3rem 0.8rem; border: 1px solid var(--edge); border-radius: 2px; clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); font-family: var(--sans); font-weight: 600; letter-spacing: 0.06em; } html[data-era="2200"] .gamecard:hover .viewrec, html[data-era="2200"] .gamecard.vibed .viewrec { color: #0E7490; border-color: #0E7490; } html[data-era="2200"] .gamecard:hover .playbtn, html[data-era="2200"] .gamecard.vibed .playbtn { background: #F0A32B; color: #2B1D04; border-color: #F0A32B; } html[data-era="2200"] .gamecard:hover .shot.ph3d, html[data-era="2200"] .gamecard.vibed .shot.ph3d { background: #F7F9FB; color: #0E7490; } /* record pages */ .query { color: var(--sub); font-size: 0.78rem; margin: 2.2rem 0 0.2rem; font-family: var(--mono); overflow-wrap: anywhere; } .query b { color: var(--bright); font-weight: 400; } .rows { color: var(--sub); font-size: 0.7rem; letter-spacing: 0.1em; margin-bottom: 1.4rem; font-family: var(--mono); } .rows .ok { color: #79f2a0; } html[data-era="2200"] .rows .ok { color: #69DB7C; } .rows .amber { color: #f0a32b; } .record { position: relative; border: 1px solid var(--edge-soft); border-radius: 6px; background: var(--panel); padding: 1.4rem 1.6rem; max-width: 47rem; } html[data-era="2200"] .record { border-radius: 3px; } html[data-era="2200"] .record::before, html[data-era="2200"] .record::after { content: ""; position: absolute; width: 18px; height: 18px; pointer-events: none; } html[data-era="2200"] .record::before { top: -1px; left: -1px; border-top: 2px solid var(--amber); border-left: 2px solid var(--amber); } html[data-era="2200"] .record::after { bottom: -1px; right: -1px; border-bottom: 2px solid var(--amber); border-right: 2px solid var(--amber); } .field { display: grid; grid-template-columns: 10.5rem 1fr; gap: 1rem; padding: 0.55rem 0; border-bottom: 1px dotted var(--edge-soft); font-size: 0.85rem; } html[data-era="2200"] .field { border-bottom-style: solid; border-bottom-color: rgba(28, 51, 82, 0.6); } .field:last-of-type { border-bottom: none; } @media (max-width: 560px) { .field { grid-template-columns: 1fr; gap: 0.15rem; } .record { padding: 1.1rem 1rem; } } .fname { color: var(--sub); letter-spacing: 0.08em; font-size: 0.72rem; padding-top: 0.15rem; text-transform: uppercase; font-family: var(--mono); } html[data-era="2200"] .fname::before { content: "▸ "; color: var(--gc); } .fval { color: var(--txt); font-family: var(--mono); overflow-wrap: anywhere; } html[data-era="2200"] .fval { font-family: var(--sans); } .fval .accent { color: var(--gc); font-weight: 600; } .fval ul { margin: 0; padding-left: 1.1rem; } .fval li { margin: 0.15rem 0; } .fval .ok { color: var(--bright); } .fval .no { color: #e07050; } html[data-era="2200"] .fval .ok { color: #69DB7C; } html[data-era="2200"] .fval .no { color: #FF8787; } .fval .aside { color: var(--sub); font-size: 0.78em; } .attach { margin: 1rem 0 0.4rem; } .attach .alabel { color: var(--sub); font-size: 0.7rem; letter-spacing: 0.1em; margin-bottom: 0.4rem; font-family: var(--mono); } .attach .shotbox { position: relative; border-radius: 4px; overflow: hidden; display: block; } .attach img { display: block; width: 100%; height: auto; transition: filter 0.45s; filter: grayscale(1) sepia(0.65) hue-rotate(62deg) saturate(2.4) brightness(0.9); } html[data-era="2200"] .attach img { filter: grayscale(0.9) sepia(0.35) hue-rotate(165deg) saturate(2.6) brightness(0.82); } .attach .shotbox:hover img, .attach .shotbox.vibed img { filter: none; } .attach .shotbox:hover .scan, .attach .shotbox.vibed .scan { opacity: 0; } .coin { display: inline-block; margin-top: 1.3rem; padding: 0.65rem 1.6rem; border-radius: 5px; text-decoration: none; font-weight: 700; letter-spacing: 0.06em; background: var(--coin); color: var(--coin-ink); box-shadow: 0 0 18px color-mix(in srgb, var(--coin) 35%, transparent); font-family: var(--mono); } html[data-era="2200"] .coin { font-family: var(--sans); border-radius: 0; clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); } .coin:hover { filter: brightness(1.15); } .coin.disabled { background: transparent; color: var(--sub); border: 1px dashed var(--edge-soft); box-shadow: none; pointer-events: none; clip-path: none; } .back { display: inline-block; margin: 1.6rem 0 0.5rem; color: var(--sub); text-decoration: none; font-size: 0.78rem; letter-spacing: 0.08em; font-family: var(--mono); } .back:hover { color: var(--bright); } footer { margin-top: 3rem; color: var(--sub); opacity: 0.75; font-size: 0.68rem; letter-spacing: 0.08em; font-family: var(--mono); } footer .sep { opacity: 0.5; margin: 0 0.35em; } footer a { color: var(--sub); } footer a:hover { color: var(--bright); } @media (prefers-reduced-motion: reduce) { .cursor { animation: none; } .gamecard, .gamecard *, .attach img, .scan { transition: none !important; } }