/* === Yono Game — "High Table" base.css · reset, typography, container, grid, focus, prose, and the shared .card / .chip / .rail / ground-pairing utilities === */ /* --- RESET -- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; } body { min-height: 100svh; font-family: var(--f-body); font-size: var(--t-body); line-height: var(--lh-body); color: var(--on-felt); background-color: var(--baize); background-image: var(--felt); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } /* Static warm overhead wash — the fallback lighting when ambient.js is skipped (reduced motion, narrow viewport, no canvas). ambient.js adds .has-ambient to and this steps aside. */ body:not(.has-ambient)::before { content: ""; position: fixed; inset: 0; z-index: var(--z-ambient); pointer-events: none; background: radial-gradient(58vw 48vh at 22% 10%, rgba(232,197,90,.10), transparent 70%), radial-gradient(48vw 42vh at 78% 64%, rgba(232,197,90,.07), transparent 72%); } #ambient { position: fixed; inset: 0; z-index: var(--z-ambient); pointer-events: none; display: block; } header, main, footer, .drawer { position: relative; z-index: var(--z-base); } img, svg, video, canvas { display: block; max-width: 100%; } img { height: auto; } input, button, textarea, select { font: inherit; color: inherit; } button { background: none; border: 0; cursor: pointer; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; padding: 0; } table { border-collapse: collapse; width: 100%; } /* --- TYPOGRAPHY -- */ h1, h2, h3, h4, h5, h6 { font-family: var(--f-display); font-weight: 700; line-height: var(--lh-head); letter-spacing: var(--tr-tight); text-wrap: balance; } h1 { font-size: var(--t-h1); line-height: var(--lh-tight); font-weight: 800; } h2 { font-size: var(--t-h2); } h3 { font-size: var(--t-h3); } h4 { font-size: var(--t-h4); } h5 { font-size: 1rem; letter-spacing: .02em; } p { text-wrap: pretty; } strong, b { font-weight: 700; } em { font-style: italic; } .lead { font-size: clamp(1.06rem, 1.5vw, 1.2rem); line-height: 1.6; } /* Mono kicker — small uppercase label above a section title. */ .kicker { display: inline-block; font-family: var(--f-mono); font-size: var(--t-kick); text-transform: uppercase; letter-spacing: var(--tr-kick); color: var(--chip-gold); margin-bottom: var(--s-3); } /* --- GROUND PAIRING RULES --- --ink family belongs on card stock only. --on-felt belongs on felt only. .card sets ink for its whole subtree, so nesting handles most cases; these utilities exist so no heading is ever left guessing its ground. --- */ .on-felt { color: var(--on-felt); } .on-felt-soft { color: var(--on-felt-soft); } .on-felt-dim { color: var(--on-felt-dim); } .on-card { color: var(--ink); } .on-card-soft { color: var(--ink-soft); } .on-card-dim { color: var(--ink-dim); } .h-felt { color: var(--on-felt); } .h-card { color: var(--ink); } /* --- LAYOUT -- */ .wrap { width: min(100% - (var(--gutter) * 2), var(--wrap)); margin-inline: auto; } .sec { padding-block: var(--sec-y); } .sec-alt { background: var(--baize-deep); } .sec-lit { background: var(--baize-lit); } .grid { display: grid; gap: var(--gutter); } .g-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } .g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 900px) { .g-3, .g-4 { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 600px) { .g-2, .g-3, .g-4 { grid-template-columns: minmax(0,1fr); } } /* Anything wide scrolls inside its own box — the page never scrolls sideways. */ .scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; } .sec-head { max-width: 62ch; margin-bottom: var(--s-7); } .sec-head .lead { color: var(--on-felt-soft); margin-top: var(--s-3); } /* --- CARD --- Ivory card stock on felt. Every panel in the system is one of these. --- */ .card { position: relative; background: var(--bone); color: var(--ink); border-radius: var(--r-card); box-shadow: var(--card-shadow); padding: var(--s-6); } /* Printed keyline, inset like a real playing card's border. */ .card::before { content: ""; position: absolute; inset: 5px; border: 1px solid var(--bone-edge); border-radius: calc(var(--r-card) - 4px); pointer-events: none; } .card-2 { background: var(--bone-2); } .card-flush { padding: 0; } .card-flush::before { inset: 5px; } .card h1, .card h2, .card h3, .card h4, .card h5 { color: var(--ink); } .card p, .card li { color: var(--ink-soft); } .card .kicker { color: var(--chip-gold); } /* Corner index — a suit pip plus a one/two character label, top-left, exactly like the index on a playing card. Decorative: aria-hidden. */ .idx { position: absolute; top: 14px; left: 14px; display: flex; flex-direction: column; align-items: center; gap: 1px; font-family: var(--f-display); font-weight: 700; font-size: .8rem; line-height: 1; color: var(--ink); z-index: 2; } .idx.red { color: var(--pip-red); } .idx svg { width: 11px; height: 11px; fill: currentColor; } /* --- CHIP --- Badges and numeric readouts. Circular or pill, with the dashed gold rim. --- */ @property --chip-angle { syntax: ""; initial-value: 0deg; inherits: false; } .chip { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 5px 13px; border-radius: var(--r-pill); background: var(--chip-gold); color: var(--ink); font-family: var(--f-mono); font-size: var(--t-xs); font-weight: 700; letter-spacing: .04em; white-space: nowrap; } /* The rim: a masked ring carrying the repeating gold/bone stripe. */ .chip::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; background: conic-gradient(from var(--chip-angle), var(--chip-gold) 0 12.5%, var(--bone) 0 25%, var(--chip-gold) 0 37.5%, var(--bone) 0 50%, var(--chip-gold) 0 62.5%, var(--bone) 0 75%, var(--chip-gold) 0 87.5%, var(--bone) 0 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; pointer-events: none; } .chip-red { background: var(--pip-red); color: var(--bone); } .chip-teal { background: var(--chip-teal); color: var(--bone); } .chip-bone { background: var(--bone); color: var(--ink); } .chip-jade { background: var(--jade); color: var(--bone); } .chip-sm { padding: 3px 10px; font-size: .7rem; } /* Live chips carry a slow pulsing dot. The word "Live" is always present in the markup — the dot is never the only carrier of meaning. */ .chip-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; } /* Gold chip readout — every number on the site: stats, RTP, timers, prices. */ .readout { display: inline-flex; align-items: center; justify-content: center; min-width: 2.4em; padding: 6px 12px; border-radius: var(--r-pill); background: var(--readout-bg); border: 1px solid var(--readout-edge); color: var(--chip-gold); font-family: var(--f-mono); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .01em; } .readout-lg { font-size: clamp(1.5rem, 3.4vw, 2.3rem); padding: 10px 18px; } .readout-disc { min-width: 0; width: 2.9em; height: 2.9em; border-radius: 50%; padding: 0; } /* --- RAIL --- The mahogany table rail. The only warm-brown element — used sparingly: under the nav, above the footer, between alternating sections. --- */ .rail { height: 10px; background: var(--rail); border-top: 1px solid var(--rail-lit); width: 100%; } .rail-thin { height: 6px; } /* --- PROSE --- Long-form copy. Always on card stock, always measured. --- */ .prose { color: var(--ink-soft); } .prose > * + * { margin-top: var(--s-5); } .prose p, .prose li { max-width: var(--measure); } .prose h2, .prose h3, .prose h4 { color: var(--ink); margin-top: var(--s-7); } .prose h2:first-child, .prose h3:first-child { margin-top: 0; } .prose strong { color: var(--ink); } .prose a { color: var(--pip-red); text-decoration: underline; text-underline-offset: 3px; } .prose ul { display: grid; gap: var(--s-3); } .prose ul li { position: relative; padding-left: 26px; } .prose ul li::before { content: ""; position: absolute; left: 6px; top: .62em; width: 7px; height: 7px; background: var(--chip-gold); border-radius: 50%; } .prose ol { display: grid; gap: var(--s-3); counter-reset: n; } .prose ol li { position: relative; padding-left: 34px; counter-increment: n; } .prose ol li::before { content: counter(n, decimal-leading-zero); position: absolute; left: 0; top: .1em; font-family: var(--f-mono); font-size: .8rem; color: var(--chip-gold); } /* --- FOCUS --- Teal, never gold, so a focus ring is never mistaken for a chip or hover. --- */ :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: var(--r-input); } .card:focus-visible, .g-card:focus-visible { border-radius: var(--r-card); } .chip:focus-visible, .btn:focus-visible { border-radius: var(--r-pill); } .skip { position: absolute; left: 50%; top: 0; transform: translate(-50%, -120%); z-index: var(--z-progress); background: var(--bone); color: var(--ink); padding: 10px 18px; border-radius: 0 0 var(--r-input) var(--r-input); font-weight: 700; } .skip:focus-visible { transform: translate(-50%, 0); } .vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* --- UTILITIES -- A small closed set so no page needs a layout inline-style attribute. Only custom-property inline styles (--i, --tilt) survive in the markup. --- */ .mt-2 { margin-top: var(--s-2); } .mt-3 { margin-top: var(--s-3); } .mt-4 { margin-top: var(--s-4); } .mt-5 { margin-top: var(--s-5); } .mt-6 { margin-top: var(--s-6); } .mt-7 { margin-top: var(--s-7); } .mt-8 { margin-top: var(--s-8); } .mb-2 { margin-bottom: var(--s-2); } .mb-4 { margin-bottom: var(--s-4); } .mb-6 { margin-bottom: var(--s-6); } .text-center { text-align: center; } .stack { display: grid; gap: var(--s-4); } .stack-sm { display: grid; gap: var(--s-3); } .row { display: flex; flex-wrap: wrap; gap: var(--s-3); } .row-center { justify-content: center; } .narrow { max-width: 52ch; margin-inline: auto; } .pad-y { padding-block: var(--s-9); } .flush { padding: 0; }