:root { --ink:#17233a; --paper:#fffaf2; --cream:#f5eadb; --orange:#ef6b3b; --orange-dark:#cd4d20; --blue:#4169e1; --mint:#d7eee6; --line:#d9cfc1; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font:16px/1.5 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.site-header { align-items:center; display:flex; justify-content:space-between; margin:auto; max-width:1140px; padding:24px 28px; }
.brand { color:var(--ink); font-family:Georgia, serif; font-size:1.35rem; font-weight:700; text-decoration:none; }.brand span { color:var(--orange); }
nav { align-items:center; display:flex; gap:20px; } nav a { color:var(--ink); font-size:.86rem; text-decoration:none; } nav a:hover { color:var(--orange); }.nav-button { background:none; border:0; color:var(--ink); cursor:pointer; font:inherit; font-size:.86rem; padding:0; }.nav-button:hover { color:var(--orange); }
.hero { background:var(--cream); border-radius:0 0 42px 42px; margin:0 auto 72px; max-width:1200px; padding:90px 28px 100px; text-align:center; }
.eyebrow { color:var(--orange-dark); font-size:.72rem; font-weight:800; letter-spacing:.13em; margin:0 0 12px; }.hero h1,.section-heading h2 { font-family:Georgia, serif; letter-spacing:-.045em; }.hero h1 { font-size:clamp(3rem,7vw,5.5rem); line-height:.94; margin:0; }.hero em { color:var(--orange); font-weight:400; }.hero > p:not(.eyebrow) { font-size:1.1rem; margin:24px auto 30px; max-width:440px; }
.button { border:0; border-radius:999px; cursor:pointer; font:inherit; font-weight:800; padding:12px 20px; }.primary { background:var(--orange); color:#fff; text-decoration:none; }.primary:hover { background:var(--orange-dark); }.secondary { background:var(--mint); color:var(--ink); margin-top:16px; }
.player-label { display:block; font-size:.78rem; font-weight:800; margin:0 auto 6px; text-align:left; width:min(100%,680px); }.player-name { background:#fff; border:1px solid var(--line); border-radius:999px; font:inherit; margin:0 0 22px; padding:12px 18px; width:min(100%,680px); }.game-grid { display:grid; gap:16px; grid-template-columns:repeat(2,1fr); margin:0 auto; max-width:920px; text-align:left; }.game-tile { background:#fff; border:1px solid var(--line); border-radius:18px; color:var(--ink); cursor:pointer; min-height:205px; padding:22px; text-align:left; }.game-tile:hover { border-color:var(--orange); box-shadow:4px 5px 0 rgba(23,35,58,.1); transform:translateY(-3px); }.game-tile span,.game-tile strong,.game-tile small,.game-tile b { display:block; }.game-tile span { font-size:1.8rem; }.game-tile strong { font-family:Georgia,serif; font-size:1.32rem; line-height:1.05; margin:15px 0 8px; }.game-tile small { color:#617087; min-height:38px; }.game-tile b { color:var(--orange-dark); margin-top:12px; }.home-leaderboard { background:#fffaf2; border-radius:20px; margin:52px auto 0; max-width:680px; padding:28px; text-align:left; }.home-leaderboard h2 { font-family:Georgia,serif; font-size:2rem; margin:0 0 14px; }.leaderboard-list ol { list-style:none; margin:0; padding:0; }.leaderboard-list li { align-items:center; border-top:1px solid var(--line); display:flex; justify-content:space-between; padding:11px 0; }.leaderboard-list li span { display:grid; }.leaderboard-list small { color:#687386; }.leaderboard-list strong { color:var(--orange-dark); font-size:1.2rem; }.empty-scores { color:#687386; margin:0; }
.share-card { background:var(--mint); border-radius:20px; margin:22px auto 0; max-width:680px; padding:28px; text-align:left; }.share-card h2 { font-family:Georgia,serif; font-size:2rem; margin:0; }.share-card > p:not(.eyebrow) { margin:8px 0 20px; }.share-content { align-items:center; display:flex; gap:24px; }.qr-code { background:#fff; border-radius:12px; display:grid; min-height:156px; min-width:156px; place-items:center; padding:10px; }.qr-code img { display:block; height:136px; width:136px; }.share-actions { align-items:flex-start; display:flex; flex-direction:column; gap:10px; }.whatsapp-button { background:#25d366; color:#073d1a; text-decoration:none; }.share-message { color:#526075; font-size:.86rem; margin:0; min-height:1.3em; }
.game-section { margin:0 auto; max-width:920px; padding:0 28px 100px; scroll-margin-top:20px; }.alt-section { max-width:none; padding:75px max(28px, calc((100% - 864px)/2)) 100px; background:#eaf0ff; }
.section-heading { margin-bottom:26px; }.section-heading h2 { font-size:clamp(2.3rem,5vw,3.7rem); line-height:1; margin:0 0 12px; }.section-heading > p:last-child { color:#526075; margin:0; }
.game-card { background:#fff; border:1px solid var(--line); border-radius:24px; box-shadow:7px 8px 0 rgba(23,35,58,.09); padding:28px; }.scoreline,.number-stats { align-items:center; display:flex; justify-content:space-between; text-align:center; }.scoreline span,.number-stats span { color:#687386; display:block; font-size:.75rem; font-weight:700; text-transform:uppercase; }.scoreline strong { font-family:Georgia,serif; font-size:3rem; line-height:1.1; }.round-pill { background:var(--cream); border-radius:999px; font-size:.85rem; font-weight:800; padding:7px 12px; }
.game-message { background:#f7f7fa; border-radius:12px; font-weight:700; margin:22px 0; min-height:48px; padding:13px; text-align:center; }.choice-row { display:grid; gap:12px; grid-template-columns:repeat(3,1fr); }.two-choices { grid-template-columns:repeat(2,1fr); max-width:520px; margin:auto; }.choice { background:#fff; border:1px solid var(--line); border-radius:16px; color:var(--ink); cursor:pointer; font:inherit; font-weight:800; padding:16px 8px; }.choice:hover { background:var(--cream); border-color:var(--orange); transform:translateY(-2px); }.choice span { display:block; font-size:2rem; margin-bottom:4px; }.odd-choice span,.even-choice span { font-size:1.05rem; letter-spacing:.08em; }.odd-choice { background:#fff3ed; }.even-choice { background:#eef3ff; }
.game-footer { align-items:center; border-top:1px solid var(--line); color:#687386; display:flex; font-size:.88rem; justify-content:space-between; margin-top:24px; padding-top:16px; }.text-button { background:none; border:0; color:var(--orange-dark); cursor:pointer; font:inherit; font-weight:800; padding:4px; }.game-footer .text-button { background:#fff0e8; border-radius:999px; color:var(--orange-dark); font-weight:900; padding:8px 11px; }.game-footer .text-button + .text-button { background:#eaf0ff; color:#3153b8; }
.number-stats { gap:8px; }.number-stats > div { flex:1; }.number-stats strong { font-size:1.28rem; }.guess-form { display:flex; gap:10px; }.guess-form input { border:1px solid var(--line); border-radius:999px; font:inherit; min-width:0; padding:12px 18px; width:100%; }.guess-form input:focus { outline:2px solid var(--blue); outline-offset:1px; }.hidden { display:none; }
.chopsticks-players { display:grid; gap:16px; grid-template-columns:1fr 1fr; }.chopsticks-player { border:1px solid var(--line); border-radius:18px; padding:16px; }.chopsticks-player.active { background:#fff3ed; border:2px solid var(--orange); }.chopsticks-player h3 { font-family:Georgia,serif; font-size:1.3rem; margin:0 0 12px; }.chopsticks-hands { display:flex; gap:10px; justify-content:center; }.chopsticks-hand { align-items:center; aspect-ratio:1; background:#f7f7fa; border:1px solid var(--line); border-radius:18px; color:var(--ink); display:flex; flex-direction:column; justify-content:center; max-width:126px; padding:8px; width:48%; }.chopsticks-hand:not(:disabled) { cursor:pointer; }.chopsticks-hand:not(:disabled):hover { border-color:var(--orange); box-shadow:3px 4px 0 rgba(23,35,58,.1); transform:translateY(-3px); }.chopsticks-hand span { font-size:2.5rem; line-height:1; }.chopsticks-hand b { font-family:Georgia,serif; font-size:1.35rem; }.chopsticks-hand small { color:#687386; font-size:.6rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; }.chopsticks-hand.selected { background:#ffd8c9; border:3px solid var(--orange-dark); }.chopsticks-hand.target { background:#eef3ff; border:2px solid var(--blue); }.chopsticks-hand.out { filter:grayscale(1); opacity:.4; }.chopsticks-help { color:#526075; font-weight:700; text-align:center; }.chopsticks-card .secondary { display:block; margin:14px auto 0; }
.football-stats { align-items:center; display:flex; justify-content:space-between; text-align:center; }.football-stats span { color:#687386; display:block; font-size:.72rem; font-weight:800; text-transform:uppercase; }.football-stats strong { display:block; font-family:Georgia,serif; font-size:2.25rem; }.football-stats > div:nth-child(2) strong { color:var(--orange-dark); }.football-bot { background:var(--mint); border-radius:14px; font-family:Georgia,serif; font-size:1.35rem; margin-top:16px; min-height:64px; padding:13px; text-align:center; }.football-bot small { color:#526075; display:block; font-family:Inter,ui-sans-serif,system-ui,sans-serif; font-size:.68rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }.football-history { border-top:1px solid var(--line); margin-top:18px; max-height:170px; overflow:auto; padding-top:10px; text-align:left; }.football-history p { border-top:1px solid #eee7dd; margin:0; padding:7px 2px; }.football-history b { color:var(--orange-dark); }
.atlas-letter { background:var(--mint); border-radius:14px; font-family:Georgia,serif; font-size:1.3rem; margin:18px 0 0; padding:12px; text-align:center; }.atlas-letter b { color:var(--orange-dark); font-size:1.7rem; }
.turn-label { font-family:Georgia,serif; font-size:1.5rem; font-weight:700; text-align:center; }.board { display:grid; gap:9px; grid-template-columns:repeat(3,1fr); margin:24px auto; max-width:390px; }.cell { aspect-ratio:1; background:var(--cream); border:0; border-radius:14px; color:var(--ink); cursor:pointer; font-family:Georgia,serif; font-size:clamp(2.5rem,10vw,4.5rem); font-weight:700; }.cell:hover:not(:disabled) { background:#ffd8c9; }.cell:disabled { cursor:default; }.cell.o { color:var(--blue); }.cell.x { color:var(--orange-dark); }.sr-only { height:1px; margin:-1px; overflow:hidden; position:absolute; width:1px; clip:rect(0,0,0,0); }
.login-modal { align-items:center; background:rgba(23,35,58,.52); display:flex; inset:0; justify-content:center; padding:20px; position:fixed; z-index:10; }.login-modal.hidden { display:none; }.login-card { background:#fff; border-radius:22px; box-shadow:8px 9px 0 rgba(23,35,58,.16); max-width:410px; padding:28px; position:relative; width:100%; }.login-card h2 { font-family:Georgia,serif; font-size:2rem; margin:0 0 6px; }.login-card > p:not(.eyebrow) { color:#526075; margin:0 0 20px; }.close-login { background:none; border:0; color:var(--ink); cursor:pointer; font-size:1.8rem; line-height:1; padding:2px; position:absolute; right:16px; top:12px; }.login-form { display:grid; gap:7px; text-align:left; }.login-form label { font-size:.78rem; font-weight:800; }.login-form input { border:1px solid var(--line); border-radius:12px; font:inherit; margin-bottom:6px; padding:11px; }.login-form .button { margin:8px 0 10px; }.login-message { color:var(--orange-dark)!important; font-size:.86rem; min-height:1.4em; }
footer { background:var(--ink); color:#fff; padding:32px 28px; text-align:center; }
@media (max-width:650px) { .site-header { padding:18px; }.site-header nav { display:none; }.hero { border-radius:0 0 28px 28px; margin-bottom:54px; padding:65px 22px 72px; }.game-grid { grid-template-columns:1fr; }.game-tile { min-height:0; }.share-content { align-items:flex-start; flex-direction:column; }.game-section { padding:0 18px 72px; }.alt-section { padding:55px 18px 72px; }.game-card { padding:20px; }.choice { font-size:.78rem; }.game-footer { align-items:flex-start; gap:8px; }.number-stats strong,.football-stats strong { font-size:1.05rem; }.guess-form { flex-direction:column; }.guess-form .button { width:100%; }.chopsticks-players { grid-template-columns:1fr; } }