/** * launcher.css — R-Marq Arcade, direction "Cartridge". * * ONE DOM, TWO LAYOUTS. The markup is always the same — a bar, an optional * feature block, and sections of boxes — and a container query decides whether * that renders as the Stack (portrait: feature + clipping rails) or the Wall * (landscape and TV: one vertically scrolling grid). Rendering both would mean * two DOMs and twice the canvases for twenty-eight games. * * Sizes are container-relative (cqw) so a 390px phone and a 1080p television * share a stylesheet. --ts is the one knob that changes with viewing distance: * a TV is not a big monitor, it is a small screen seen from ten feet, so the * Fire TV shell sets --ts and everything follows. * * Palette and motion values are the design bible's, docs/launcher/README.md * §4 and §6. Do not invent new ones here. */ .arc { /* --- palette (bible §4) --- */ --ground: #1B1714; --ground-deep: #120F0D; --ground-raised: #241F1A; --brass: #C9A227; --bone: #EDE6D8; --dim: #9A8E7E; --rule: rgba(237, 230, 216, .12); /* --- type scale knob: 1 for arm's length, ~1.4 for ten feet --- */ --ts: 1; /* --- motion (bible §6) --- */ --ease: cubic-bezier(.2, .8, .25, 1); --focus-ms: 260ms; position: fixed; inset: 0; container-type: size; overflow: hidden; background: radial-gradient(130% 70% at 24% -10%, rgba(201, 162, 39, .22), transparent 62%), linear-gradient(180deg, var(--ground-raised) 0%, var(--ground) 56%, var(--ground-deep) 100%); color: var(--bone); font-family: "Archivo", "Helvetica Neue", Arial, sans-serif; /* bar / filters / your challenges (usually empty) / shelf / foot */ display: grid; grid-template-rows: auto auto auto minmax(0, 1fr) auto; outline: none; user-select: none; -webkit-tap-highlight-color: transparent; } /* Game titles are always the engraved face; never uppercase, never tracked. */ .arc h1, .arc h2, .arc h3, .arc .serif { font-family: "Instrument Serif", Georgia, serif; font-weight: 400; margin: 0; letter-spacing: .01em; } /* Operational text is always Archivo, uppercase, tracked. */ .arc .op { text-transform: uppercase; letter-spacing: .15em; font-weight: 600; } /* ============================================================ top bar */ .arc-bar { display: flex; flex-wrap: nowrap; align-items: center; gap: 2.4cqw; border-bottom: 1px solid var(--rule); min-width: 0; } .arc-mark { font-family: "Instrument Serif", Georgia, serif; white-space: nowrap; flex: 0 0 auto; } .arc-mark b { color: var(--brass); font-weight: 400; } .arc-now { display: none; align-items: baseline; gap: 1.6cqw; min-width: 0; flex: 1 1 auto; overflow: hidden; } .arc-now h2 { white-space: nowrap; flex: 0 0 auto; max-width: 18ch; overflow: hidden; text-overflow: ellipsis; } .arc-now .meta { color: var(--dim); text-transform: uppercase; letter-spacing: .13em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; min-width: 0; } .arc-vr { flex: 0 0 auto; width: 1px; align-self: stretch; background: var(--rule); } .arc-exit { margin-left: auto; flex: 0 0 auto; color: var(--dim); text-decoration: none; border: 1px solid rgba(237, 230, 216, .2); border-radius: 2px; text-transform: uppercase; letter-spacing: .16em; white-space: nowrap; transition: color var(--focus-ms) var(--ease), border-color var(--focus-ms) var(--ease); } .arc-exit:hover, .arc-exit:focus-visible { color: var(--bone); border-color: var(--brass); } /* ---- who you are ---- * * Takes the auto margin FROM .arc-exit rather than adding a second one: two * `margin-left:auto` in one flex row split the free space between them, which * would have parked the account chip in the middle of the bar instead of at * the end. The sibling selector hands it back if the chip is ever removed. * * Signed out this says "Sign in" in words. An avatar-shaped placeholder is * exactly as ambiguous as no control at all, and the question this answers is * literally "am I signed in?". */ .arc-acct { margin-left: auto; flex: 0 1 auto; min-width: 0; display: inline-flex; align-items: center; gap: .5em; color: var(--dim); text-decoration: none; text-transform: uppercase; letter-spacing: .16em; white-space: nowrap; transition: color var(--focus-ms) var(--ease); } .arc-acct + .arc-exit { margin-left: 0; } .arc-acct:hover, .arc-acct:focus-visible { color: var(--bone); } .arc-acct-out { color: var(--bone); } /* A player typed this name, so it truncates rather than shoving the door off the bar — .arc-bar is flex-wrap: nowrap. */ .arc-acct-who { overflow: hidden; text-overflow: ellipsis; min-width: 0; } /* Lit = signed in. Brass is the shelf's accent; the dot is decorative and the name beside it is what a screen reader reads. */ .arc-acct-dot { width: .5em; height: .5em; border-radius: 50%; background: var(--brass); box-shadow: 0 0 .5em rgba(201, 162, 39, .55); flex: 0 0 auto; } /* Inside a native shell the door is meaningless — there is no site to go back to. */ .arc[data-shell="firetv"] .arc-exit, .arc[data-shell="kiosk"] .arc-exit { display: none; } /* Same for the account chip, and for the same reason: there is nowhere to sign in to on a TV shell, so offering it would be a dead end. */ .arc[data-shell="firetv"] .arc-acct, .arc[data-shell="kiosk"] .arc-acct { display: none; } /* ============================================================ a box */ /* * A card is a 16:9 cover with a plate under it. It was a 2:3 portrait box with * the title engraved ON the art until 2026-08-28; the phone layout went * vertical-only with one card per row, and a portrait box at full phone width * is ~510px tall — one game per screen. Landscape art plus a plate below fits * the shape the shelf now has, and the title is legible over any game because * it is no longer over the game at all. */ .arc-box { position: relative; border-radius: 3px; background: #14100E; cursor: pointer; box-shadow: 0 1cqw 2cqw -.9cqw rgba(0, 0, 0, .75), inset 0 0 0 1px rgba(237, 230, 216, .1); filter: brightness(.72) saturate(.85); transition: filter var(--focus-ms) var(--ease), transform var(--focus-ms) var(--ease), box-shadow var(--focus-ms) var(--ease); } .arc-art { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: 3px 3px 0 0; background: var(--ground-deep); } .arc-art canvas { width: 100%; height: 100%; display: block; } .arc-art .shot { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; object-position: center center; } /* The plate. Serif title, sentence-case tagline, operational meta. */ .arc-cap { padding: .72rem .85rem .8rem; border-top: 1px solid rgba(201, 162, 39, .22); border-radius: 0 0 3px 3px; background: linear-gradient(180deg, var(--ground-raised), var(--ground)); } .arc-cap .bt { font-family: "Instrument Serif", Georgia, serif; font-size: clamp(1.05rem, 1.6cqw + .72rem, 1.5rem); line-height: 1.12; color: var(--bone); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* * Creator's Pick. A tag rather than a shelf (2026-09-01), so it has no section * of its own and the card is the only place it can show. The star sits on the * plate with the name because a pick is an opinion about the game, where the * corner badge is state (Daily, New) — and that slot is already taken. * * Brass on bone at .82em: present when you look at the card, quiet when you * are scanning past it. Screen readers get the words, from the .vh span. */ .arc-cap .bt .pick { color: var(--brass); font-size: .82em; margin-right: .34em; vertical-align: .06em; } /* Visually hidden, still read aloud — the star's actual meaning. */ .vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .arc-cap .tag { margin: .3em 0 0; color: var(--dim); font-size: clamp(.76rem, .5cqw + .62rem, .92rem); line-height: 1.42; /* Two lines, so a long tagline cannot make one card twice its neighbour. */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .arc-cap .meta2 { margin-top: .5em; color: var(--brass); text-transform: uppercase; letter-spacing: .14em; font-weight: 600; font-size: clamp(.62rem, .3cqw + .54rem, .72rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .arc-box.on { filter: none; z-index: 5; transform: scale(1.02); box-shadow: 0 1.8cqw 3cqw -1cqw rgba(0, 0, 0, .88), inset 0 0 0 1.5px rgba(201, 162, 39, .9); } /* Specular sweep: fires on focus, then gets out of the way. */ .arc-art .sweep { position: absolute; inset: 0; opacity: 0; pointer-events: none; background: linear-gradient(105deg, transparent 33%, rgba(255, 248, 230, .32) 47%, transparent 61%); } .arc-box.on .sweep { animation: arc-sweep 750ms ease-out; } @keyframes arc-sweep { 0% { opacity: 0; transform: translateX(-62%); } 35% { opacity: 1; } 100% { opacity: 0; transform: translateX(62%); } } /* badges ride the top corner of the art, never the plate */ .arc-badge { position: absolute; top: .5rem; right: .55rem; background: rgba(27, 23, 20, .82); color: var(--brass); text-transform: uppercase; letter-spacing: .12em; font-weight: 600; font-size: clamp(.58rem, .3cqw + .5rem, .7rem); padding: .35em .6em; border-radius: 2px; } /* ==================================================== filters and sort */ /* * Three filters and a sort, replacing the six channels (2026-08-28). Filters * are WHICH games and the sort is their ORDER — two questions, so two * controls. Folding them into one list of six is what made the channel bar * hard to read at a glance. */ /* * The chips are a band between the bar's rule and the shelf, so they get * vertical padding on both sides rather than hanging off the rule (they sat * flush against it until 2026-09-01 — 0px, which read as the rule slicing * through them). Roughly symmetric: a hard edge above wants as much clearance * as the soft content below. */ .arc-filters { display: flex; align-items: center; justify-content: space-between; gap: 1.4rem; flex-wrap: wrap; padding: clamp(.6rem, 1cqw, .95rem) 2.4cqw clamp(.7rem, 1.1cqw, 1rem); } .arc-filt { display: flex; gap: .4rem; flex-wrap: wrap; min-width: 0; } .arc-filt button { background: transparent; color: var(--dim); border: 1px solid var(--rule); border-radius: 99px; padding: .46em 1em; cursor: pointer; font-family: inherit; font-weight: 600; font-size: clamp(.7rem, .4cqw + .6rem, .82rem); text-transform: uppercase; letter-spacing: .13em; white-space: nowrap; transition: color 160ms var(--ease), border-color 160ms var(--ease), background 160ms var(--ease); } .arc-filt button:hover { color: var(--bone); border-color: rgba(201, 162, 39, .5); } .arc-filt button.on { color: var(--ground); background: var(--brass); border-color: var(--brass); } .arc-filt button:focus-visible { outline: 2px solid var(--bone); outline-offset: 2px; } /* Your challenges (F3): one row of chips that scrolls sideways, in the filter bar's voice; the lead word is brass, the rest bone. [hidden] wins. */ .arc-turns { display: flex; gap: .4rem; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 0 2.4cqw clamp(.6rem, 1cqw, .95rem); } .arc-turns::-webkit-scrollbar { display: none; } .arc-turns[hidden] { display: none; } .arc-turn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .55em; color: var(--bone); text-decoration: none; white-space: nowrap; border: 1px solid rgba(201, 162, 39, .5); border-radius: 99px; padding: .46em 1em; font-weight: 600; font-size: clamp(.7rem, .4cqw + .6rem, .82rem); transition: border-color 160ms var(--ease), background 160ms var(--ease); } .arc-turn b { color: var(--brass); font-weight: 800; } .arc-turn:hover, .arc-turn:focus-visible { border-color: var(--brass); background: rgba(201, 162, 39, .1); outline: none; } .arc-turn.is-open { border-color: var(--rule); } .arc-turn.is-open b { color: var(--dim); } /* Search (2026-09-24): sits between the chips and the sort, in the sort's skin. */ .arc-find { display: flex; align-items: center; flex: 1 1 10rem; min-width: 8rem; max-width: 18rem; } .arc-find-l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .arc-find-i { width: 100%; background: var(--ground-raised); color: var(--bone); border: 1px solid var(--rule); border-radius: 2px; padding: .42em .8em; font-family: inherit; font-weight: 600; font-size: clamp(.7rem, .4cqw + .6rem, .82rem); letter-spacing: .06em; appearance: none; -webkit-appearance: none; } .arc-find-i::placeholder { color: var(--dim); text-transform: uppercase; letter-spacing: .13em; } .arc-find-i:focus-visible { outline: 2px solid var(--bone); outline-offset: 2px; } .arc-find-i::-webkit-search-cancel-button { filter: invert(1) opacity(.6); cursor: pointer; } .arc-sort { display: flex; align-items: center; gap: .5rem; flex: 0 0 auto; } .arc-sort-l { color: var(--dim); font-weight: 600; text-transform: uppercase; letter-spacing: .13em; font-size: clamp(.66rem, .35cqw + .56rem, .76rem); } .arc-sort-s { background: var(--ground-raised); color: var(--bone); border: 1px solid var(--rule); border-radius: 2px; padding: .42em 1.8em .42em .6em; cursor: pointer; font-family: inherit; font-weight: 600; font-size: clamp(.7rem, .4cqw + .6rem, .82rem); /* The native picker beats anything hand-rolled here, and it is keyboard and screen-reader operable for free — so only the skin is ours. */ appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--brass) 50%), linear-gradient(135deg, var(--brass) 50%, transparent 50%); background-position: right 1em top 55%, right .7em top 55%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; } .arc-sort-s:focus-visible { outline: 2px solid var(--bone); outline-offset: 2px; } .arc-empty { color: var(--dim); padding: 2rem 2.4cqw; } /* ============================================================ shelf */ /* * The shelf is one vertically scrolling grid; "All games" cuts it into * labelled sections (2026-09-01). This is NOT the return of the rails — a * section is a run of the same grid under a heading, so nothing here needs a * horizontal gesture and the cursor still derives its rows from the DOM. * * A filtered shelf has no headings at all: it is one category already, and * repeating the pressed chip as a title says nothing. */ .arc-shelf { min-height: 0; min-width: 0; } .arc-sec + .arc-sec { margin-top: clamp(1.6rem, 3cqw, 2.6rem); } /* Section label: operational voice (bible §5), with a hairline running out to the edge so the heading reads as a shelf rather than as a title. */ /* `.arc .arc-sec-h`, not `.arc-sec-h`: the house rule at the top of this file is `.arc h1, .arc h2, .arc h3 { margin: 0 }`, which at 0,1,1 outranks a lone class and silently zeroed this margin — the heading sat flush on its own cards from the day it shipped. Keep the `.arc` prefix on anything here that sets margin on a heading. */ .arc .arc-sec-h { display: flex; align-items: center; gap: clamp(.7rem, 1.4cqw, 1.2rem); /* No top margin: space above the first heading is the shelf's padding-top, above every later one it is .arc-sec + .arc-sec. One knob each. */ margin: 0 0 clamp(.7rem, 1.3cqw, 1.1rem); font-family: inherit; font-weight: 600; font-size: calc(1.15cqw * var(--ts)); text-transform: uppercase; letter-spacing: .18em; color: var(--brass); } .arc-sec-h::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--rule); } /* ============================================================ foot */ .arc-foot { display: flex; justify-content: space-between; align-items: center; color: var(--dim); text-transform: uppercase; letter-spacing: .15em; border-top: 1px solid var(--rule); } .arc-foot b { color: var(--brass); font-weight: 600; } .arc-foot-right { display: flex; align-items: center; gap: 2.4cqw; } .arc-mute { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: var(--dim); display: inline-flex; align-items: center; gap: .6em; text-transform: uppercase; letter-spacing: .15em; font-weight: 600; transition: color var(--focus-ms) var(--ease); } .arc-mute:hover { color: var(--bone); } .arc-mute[aria-pressed="true"] { color: rgba(154, 142, 126, .55); } .arc-mute:focus-visible { outline: 2px solid var(--brass); outline-offset: 4px; } .arc-mute .glyph { color: var(--brass); font-size: 1.15em; line-height: 1; } .arc-mute[aria-pressed="true"] .glyph { color: var(--dim); } /* ============================================================ launch */ .arc-flash { position: absolute; inset: 0; z-index: 20; pointer-events: none; opacity: 0; background: #F6EEDC; } .arc-flash.go { animation: arc-flash 620ms cubic-bezier(.4, 0, .2, 1); } @keyframes arc-flash { 0% { opacity: 0; } 22% { opacity: .14; } 55% { opacity: .9; } 100% { opacity: 0; } } /* ============================================================================ SHELF — one layout, every screen. Vertical scroll only. There used to be two: a WALL grid for landscape and a STACK of horizontally clipping rails for portrait. The rails are gone (2026-08-28, owner's call) — at 32 titles they meant a sideways swipe per shelf on the device most people actually use, and the cards were ~34% of a phone's width, far too small to read. There is now one grid that reflows, and nothing anywhere needs a horizontal gesture to reach it. ============================================================================ */ .arc-bar { padding: calc(1.5cqw * var(--ts)) 2.4cqw; gap: 2.2cqw; } .arc-mark { font-size: calc(2.3cqw * var(--ts)); } .arc-now { display: flex; } .arc-now h2 { font-size: calc(3.1cqw * var(--ts)); line-height: 1; } .arc-now .meta { font-size: calc(1.15cqw * var(--ts)); } .arc-exit { font-size: calc(1.15cqw * var(--ts)); padding: .7cqw 1.4cqw; } .arc-acct { font-size: calc(1.15cqw * var(--ts)); max-width: 22cqw; } .arc-shelf { overflow-y: auto; overflow-x: hidden; /* padding-top, not a margin on the first heading: it doubles as the barrier that stops that margin collapsing out of the scroll container. Scrolls away with the content, so it only sets where the shelf rests. */ padding: clamp(.5rem, .9cqw, .85rem) 2.4cqw 3.4cqw; scrollbar-width: thin; scrollbar-color: rgba(201, 162, 39, .45) transparent; } .arc-shelf::-webkit-scrollbar { width: .7cqw; } .arc-shelf::-webkit-scrollbar-track { background: transparent; } .arc-shelf::-webkit-scrollbar-thumb { background: rgba(201, 162, 39, .45); border-radius: 99px; } /* * The whole responsive story, in one line. * * A 320px floor on the column resolves to one card per row under ~600px (a * phone), two up to ~940px, three or four on a desktop — which is the sizing * the owner asked for without a single breakpoint to keep in sync. min() is * what stops the floor from overflowing a viewport narrower than 320px. */ .arc-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: clamp(.9rem, 1.6cqw, 1.6rem); } .arc-box { scroll-margin: 5.5cqw 0 2.5cqw; } .arc-foot { padding: calc(1.2cqw * var(--ts)) 2.4cqw; font-size: calc(1.1cqw * var(--ts)); } /* A television is a small screen at ten feet. Fewer, larger boxes. */ .arc[data-shell="firetv"] { --ts: 1.4; } .arc[data-shell="firetv"] .arc-items { grid-template-columns: repeat(4, 1fr); gap: 1.8cqw; } /* * Phones. The bar and foot are chrome around the one thing worth space, so * they give it back; cqw type would be ~10px on a 390px screen, so the plate * and controls switch to absolute sizing that does not depend on viewport * width. */ @container (max-width: 700px) { .arc-bar { padding: 1rem 1.1rem .8rem; gap: .9rem; flex-wrap: wrap; } .arc-mark { font-size: 1.15rem; } .arc-now { display: none; } .arc-vr { display: none; } .arc-exit { font-size: .68rem; padding: .45em .8em; } .arc-acct { font-size: .68rem; max-width: 38vw; letter-spacing: .1em; } .arc-filters { padding: .65rem 1.1rem .8rem; gap: .55rem; } /* Three chips fit one line at 390px; the row wraps from four onward, and the tracking still gives way to keep the wrap shallow. Measured with five chips: two rows at 390px, three at 360px (~30px of a 622px shelf). Hiding or side-scrolling a chip was the alternative and both lose a category the section headings are simultaneously advertising. This does not scale forever — at roughly seven chips the row owns more of a small phone than the shelf can spare, and the answer then is the phone getting the same native