/* ========================================================================== PK888 Game — Reset ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); } /* Hard guarantee: the document never scrolls sideways. `overflow-x: hidden` on would make it a scroll container and silently break every position:sticky descendant, so it is applied to the root only — and upgraded to `clip` (which is not a scroll container) where supported. */ html, body { max-width: 100%; overscroll-behavior-x: none; } html { overflow-x: hidden; } @supports (overflow: clip) { html, body { overflow-x: clip; } } body { margin: 0; min-height: 100vh; font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-text-secondary); background-color: var(--color-bg-primary); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5, h6 { margin: 0 0 var(--sp-4); font-family: var(--font-display); font-weight: 700; line-height: var(--lh-heading); color: var(--color-text-primary); text-wrap: balance; } p { margin: 0 0 var(--sp-4); } p:last-child { margin-bottom: 0; } ul, ol { margin: 0 0 var(--sp-4); padding-left: 1.35em; } li { margin-bottom: var(--sp-2); } a { color: var(--color-gold); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); } a:hover { color: var(--color-gold-bright); } img, picture, svg, video { display: block; max-width: 100%; height: auto; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: 0; padding: 0; } /* Component classes set display, which would otherwise beat the UA rule for [hidden]. The catalogue filter relies on this actually hiding things. */ [hidden] { display: none !important; } table { border-collapse: collapse; width: 100%; } strong, b { font-weight: 700; color: var(--color-text-primary); } hr { border: 0; height: 1px; background: var(--gradient-hairline); margin: var(--sp-6) 0; } :focus-visible { outline: 2px solid var(--color-gold-bright); outline-offset: 3px; border-radius: 4px; } ::selection { background: rgba(212, 175, 55, 0.32); color: #fff; } /* Scrollbar — kept slim so it never creates layout jumps */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--color-bg-primary); } ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--color-gold-deep), var(--color-bg-tertiary)); border-radius: var(--radius-pill); } .skip-link { position: absolute; top: -60px; left: var(--sp-4); z-index: 1200; padding: 10px 18px; border-radius: var(--radius-pill); background: var(--color-gold); color: #1a0f05; font-weight: 700; transition: top var(--dur) var(--ease-out); } .skip-link:focus { top: 12px; color: #1a0f05; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }