/* ============================================================ MGS Games — shared brand layer Derived from mgs-club/src/styles/tokens.css (locked 2026-06). ============================================================ */ :root { /* greens */ --deep-forest:#013B22; --matcha:#1E5128; --evergreen:#4E724E; --pine:#334939; --moss:#4D6649; --sage-green:#5E946A; /* deep / warm darks */ --mulberry:#57040A; --espresso:#322723; --moonstone:#31120B; /* pinks */ --mauve:#D28EB1; --bubblegum:#FDAAD6; --ballet-pink:#FA96A4; --rosewood:#EEA2B7; --blush:#F5C1CE; --peony:#F6CBD9; --dusty-blush:#E8C9CF; --pearl:#FDEBF9; /* neutrals */ --champagne:#F5DCCF; --oatmilk:#F9F1EE; /* semantic */ --bg:var(--oatmilk); --bg-alt:var(--champagne); --surface:#FFFFFF; --text:var(--moonstone); --text-soft:#6B574F; --border:#DED2C0; --accent:var(--mulberry); --accent-2:var(--evergreen); --accent-3:var(--deep-forest); --btn:var(--espresso); --rose-text:var(--rosewood); /* per-game accent + tinted card (overridden on ) */ --game:var(--mulberry); --card-bg:#FFFFFF; --tint:var(--peony); /* ambient blob tone tied to the game */ --font-display:'Fraunces', Georgia, serif; --font-body:'Hanken Grotesk', system-ui, sans-serif; --font-mono:'Fira Code', ui-monospace, monospace; --radius-sm:10px; --radius:20px; --radius-lg:32px; --radius-pill:999px; --shadow:0 8px 30px rgba(49,18,11,.08); --shadow-lg:0 16px 50px rgba(49,18,11,.14); --maxw:1080px; --gutter:clamp(1.1rem,4vw,3rem); } /* per-game theming — accent, a light-tint card bg for contrast, ambient tone */ body[data-game="wnrs"] { --game:var(--espresso); --card-bg:#F9F1EE; --tint:var(--blush); } body[data-game="guilty"] { --game:var(--evergreen); --card-bg:#F9F1EE; --tint:var(--sage-green); } body[data-game="ranker"] { --game:var(--mauve); --card-bg:#F9F1EE; --tint:var(--bubblegum); } * { box-sizing:border-box; margin:0; padding:0; } html { -webkit-text-size-adjust:100%; } body { color:var(--text); font-family:var(--font-body); font-weight:300; line-height:1.55; -webkit-font-smoothing:antialiased; min-height:100svh; /* flat base (gradient + blobs removed for now) */ background:#FCEAF8; /* respect phone notches / home indicator */ padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); } /* ambient drifting blobs — removed for now (kept in markup, just hidden) */ .blob { display:none; } .blob-disabled { position:fixed; border-radius:50%; filter:blur(80px); z-index:0; pointer-events:none; will-change:transform; } .blob-1 { width:min(56vw,460px); aspect-ratio:1; background:var(--ballet-pink); opacity:.42; top:-14vh; right:-12vw; } .blob-2 { width:min(50vw,380px); aspect-ratio:1; background:var(--tint); opacity:.4; bottom:-14vh; left:-14vw; } .blob-3 { width:min(42vw,320px); aspect-ratio:1; background:var(--blush); opacity:.32; top:38%; left:46%; } @media (prefers-reduced-motion:no-preference) { .blob-1 { animation:drift1 22s ease-in-out infinite alternate; } .blob-2 { animation:drift2 26s ease-in-out infinite alternate; } .blob-3 { animation:drift3 30s ease-in-out infinite alternate; } } @keyframes drift1 { to { transform:translate(-6vw,5vh) scale(1.08); } } @keyframes drift2 { to { transform:translate(5vw,-4vh) scale(1.1); } } @keyframes drift3 { to { transform:translate(-4vw,-6vh) scale(1.12); } } .wrap { max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); position:relative; z-index:1; } .eyebrow { font-family:var(--font-mono); font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--accent-2); } /* shared button */ .btn { font-family:var(--font-body); font-weight:500; font-size:1rem; border:0; border-radius:var(--radius-pill); padding:.95rem 1.7rem; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:.5rem; justify-content:center; min-height:52px; /* comfy thumb target */ transition:opacity .2s ease, transform .12s ease; -webkit-tap-highlight-color:transparent; user-select:none; } .btn:active { transform:scale(.97); } .btn-primary { background:var(--game); color:#fff; } .btn-dark { background:var(--btn); color:#fff; } .btn-ghost { background:transparent; color:var(--text); border:1.5px solid var(--border); } a { color:inherit; } /* global FR | EN language switch */ .lang-switch { display:inline-flex; border:1.5px solid var(--border); border-radius:var(--radius-pill); overflow:hidden; font-family:var(--font-mono); font-size:.72rem; background:#F9F1EE; } .lang-switch button { background:transparent; border:0; padding:.4rem .8rem; cursor:pointer; color:var(--text-soft); letter-spacing:.08em; -webkit-tap-highlight-color:transparent; min-height:34px; } .lang-switch button.on { background:var(--game); color:#fff; }