:root { --paper: #f2eddf; --ink: #202522; --jade: #397369; --red: #ad4737; --muted: #67706a; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
* { box-sizing: border-box; }
body { min-width: 320px; min-height: 100vh; margin: 0; color: var(--ink); background: radial-gradient(circle at 88% 10%, rgb(57 115 105 / 12%), transparent 24rem), repeating-linear-gradient(8deg, rgb(76 61 36 / 2%) 0 1px, transparent 1px 5px), var(--paper); }
button, a { font: inherit; } button:focus-visible, a:focus-visible { outline: 3px solid var(--red); outline-offset: 4px; }
.hub-shell { width: min(1180px, 100%); margin: 0 auto; padding: 26px clamp(18px, 5vw, 68px) 72px; }.hub-header { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 52px; border-bottom: 1px solid rgb(32 37 34 / 20%); }.hub-brand { color: var(--ink); font-size: 17px; font-weight: 850; letter-spacing: .08em; text-decoration: none; }.hub-brand span { color: var(--red); }.hub-nav { display: flex; gap: 26px; }.hub-nav a { color: var(--muted); font-size: 13px; text-decoration: none; }.hub-nav a.is-current { color: var(--ink); font-weight: 750; }
.language-switch { justify-self: end; display: flex; padding: 3px; border: 1px solid rgb(32 37 34 / 25%); }.language-switch button { min-width: 34px; padding: 5px 7px; border: 0; color: var(--muted); background: transparent; cursor: pointer; font-size: 11px; font-weight: 800; }.language-switch button[aria-pressed="true"] { color: var(--paper); background: var(--ink); }
.hub-hero { padding: clamp(72px, 12vw, 132px) 0 clamp(56px, 8vw, 88px); max-width: 740px; }.hub-eyebrow, .card-tag, .shelf-heading { margin: 0; color: var(--jade); font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }.hub-hero h1 { max-width: 670px; margin: 14px 0 22px; font-family: "Noto Serif SC", "Songti SC", STSong, serif; font-size: clamp(45px, 7vw, 80px); letter-spacing: -.075em; line-height: 1.05; }.hub-copy { max-width: 540px; margin: 0; color: var(--muted); font-size: 16px; line-height: 1.75; }.hub-stats { display: flex; gap: 20px; margin-top: 32px; color: var(--ink); font-size: 12px; font-weight: 750; }.hub-stats span + span { color: var(--jade); }.hub-stats span + span::before { content: "●"; margin-right: 9px; color: var(--red); font-size: 9px; }
.game-shelf { border-top: 1px solid rgb(32 37 34 / 25%); }.shelf-heading { display: flex; justify-content: space-between; padding: 17px 0; color: var(--muted); }.shelf-heading span { color: var(--red); }.game-card { display: grid; grid-template-columns: minmax(260px, .8fr) 1fr; min-height: 360px; overflow: hidden; border: 1px solid rgb(32 37 34 / 30%); background: rgb(255 253 246 / 45%); box-shadow: 10px 13px 0 rgb(89 72 43 / 8%); }.card-art { position: relative; overflow: hidden; min-height: 270px; background: repeating-linear-gradient(0deg, transparent 0 34px, rgb(37 42 38 / 44%) 34px 35px), repeating-linear-gradient(90deg, transparent 0 34px, rgb(37 42 38 / 44%) 34px 35px), #e6dac1; }.card-art::after { content: ""; position: absolute; inset: 22px; border: 1px solid rgb(32 37 34 / 26%); pointer-events: none; }.card-art .stone { position: absolute; z-index: 1; width: 66px; aspect-ratio: 1; border-radius: 50%; }.card-art .black { top: 31%; left: 30%; background: radial-gradient(circle at 34% 26%, #627067, #121816 68%); box-shadow: 5px 7px 10px rgb(0 0 0 / 28%); }.card-art .white { top: 49%; left: 49%; background: radial-gradient(circle at 34% 25%, #fffdf5, #e3d6bc 78%); border: 1px solid #b9a98e; box-shadow: 5px 7px 10px rgb(75 56 29 / 18%); }.card-art i { position: absolute; z-index: 2; width: 8px; aspect-ratio: 1; border-radius: 50%; background: var(--red); }.card-art i:nth-of-type(1) { top: 19%; left: 18%; }.card-art i:nth-of-type(2) { right: 18%; bottom: 19%; }.card-art i:nth-of-type(3) { top: 31%; right: 28%; }
.card-content { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: clamp(30px, 5vw, 70px); }.card-content h2 { margin: 12px 0 16px; font-family: "Noto Serif SC", "Songti SC", STSong, serif; font-size: clamp(34px, 4vw, 54px); letter-spacing: -.06em; }.card-content > p:not(.card-tag) { max-width: 470px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.75; }.play-link { display: inline-flex; align-items: center; min-height: 47px; margin-top: 29px; padding: 0 21px; color: var(--paper); background: var(--ink); font-size: 13px; font-weight: 750; text-decoration: none; }.play-link::after { content: "→"; margin-left: 11px; color: #e5cda8; }.play-link:hover { background: var(--jade); }
@media (max-width: 700px) { .hub-header { grid-template-columns: 1fr auto; }.hub-nav { display: none; }.hub-hero { padding-top: 68px; }.hub-hero h1 { font-size: clamp(42px, 13vw, 62px); }.game-card { grid-template-columns: 1fr; }.card-art { min-height: 245px; }.card-content { padding: 35px 27px 39px; } }