/* Games140 design system v2 — "fun and upbeat" (Brian 9/6).
   Modeled on what works: NYT Games' per-game color identities on a clean
   bright ground + Duolingo's chunky rounded press-down buttons and bold
   friendly type (Nunito). One brand violet, one sunshine accent, and a
   signature color per game. */
:root {
  --bg: #FBFBF7; --surface: #FFFFFF; --ink: #21243B; --muted: #4C4F68;
  --brand: #6B5CE7; --brand-dark: #5243C9; --brand-soft: #EFECFF;
  --sun: #FFB627; --sun-soft: #FFF3D6;
  --green: #4CA83D; --red: #E5484D;
  --border: #E8E7F0;
  /* per-game identities */
  --c-risto: #E8930C; --c-risto-soft: #FDF1DC;
  --c-word: #4CA83D; --c-word-soft: #E9F6E4;
  --c-chess: #3E6DE0; --c-chess-soft: #E7EEFC;
  --c-go: #12999E; --c-go-soft: #E0F4F4;
  --c-blackjack: #E5484D; --c-blackjack-soft: #FDE9EA;
  --dark: #21243B;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink);
  font: 15.5px/1.55 "Nunito", -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--brand); }
h2 { font-weight: 900; letter-spacing: -.01em; margin: 20px 0 10px; }

/* ── topbar: light, sticky, friendly ── */
.topbar { position: sticky; top: 0; z-index: 30; background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px); border-bottom: 2px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 18px; flex-wrap: wrap; gap: 8px; }
.brand { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); }
.brand-mark { width: 38px; height: 38px; transform: rotate(-6deg); transition: transform .25s; }
.brand:hover .brand-mark { transform: rotate(24deg); }
.brand h1 { font: 900 22px "Nunito", sans-serif; margin: 0; letter-spacing: -.02em; }
.brand h1 b { color: var(--brand); }
.topnav { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.topnav a, .topnav button { background: none; border: none; color: var(--muted);
  font: 800 13.5px "Nunito", sans-serif; cursor: pointer; text-decoration: none;
  padding: 7px 11px; border-radius: 99px; }
.topnav a:hover, .topnav button:hover { background: var(--brand-soft); color: var(--brand); }
#g140-auth button:last-child { background: var(--sun); color: var(--ink); box-shadow: 0 3px 0 #DE9A14; }
#g140-auth button:last-child:hover { background: var(--sun); filter: brightness(1.05); }

main { max-width: 980px; margin: 0 auto; padding: 18px 16px 70px; }

/* ── cards: white, chunky radius, lift on hover ── */
.card { background: var(--surface); border: 2px solid var(--border); border-radius: 18px;
  padding: 16px 18px; margin-bottom: 14px; box-shadow: 0 3px 0 var(--border);
  transition: transform .12s, box-shadow .12s; }
a.card:hover { transform: translateY(-3px); box-shadow: 0 6px 0 var(--border); }

/* per-game identity on Today cards */
.gamecard { position: relative; border-top: 6px solid var(--border); display: flex; flex-direction: column; }
.gamecard .done { position: absolute; top: 12px; right: 14px; color: var(--green); font-weight: 900; }
.g-risto { border-top-color: var(--c-risto); } .g-risto .gemoji { background: var(--c-risto-soft); }
.g-word { border-top-color: var(--c-word); } .g-word .gemoji { background: var(--c-word-soft); }
.g-chess { border-top-color: var(--c-chess); } .g-chess .gemoji { background: var(--c-chess-soft); }
.g-go { border-top-color: var(--c-go); } .g-go .gemoji { background: var(--c-go-soft); }
.g-blackjack { border-top-color: var(--c-blackjack); } .g-blackjack .gemoji { background: var(--c-blackjack-soft); }
.gemoji { display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 13px; font-size: 22px; margin-right: 8px; }

/* ── buttons: Duolingo-style press-down ── */
.btn { display: inline-block; padding: 10px 20px; border-radius: 14px; border: none;
  background: var(--brand); color: #fff; font: 800 14.5px "Nunito", sans-serif;
  cursor: pointer; text-decoration: none; box-shadow: 0 4px 0 var(--brand-dark);
  transition: transform .06s, box-shadow .06s; }
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--brand-dark); }
.btn.secondary { background: #fff; color: var(--brand); box-shadow: 0 4px 0 var(--border);
  border: 2px solid var(--border); padding: 8px 18px; }
.btn.secondary:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--border); }
.btn.small { padding: 6px 14px; font-size: 13px; border-radius: 11px; box-shadow: 0 3px 0 var(--brand-dark); }
.btn.small.secondary { box-shadow: 0 3px 0 var(--border); }
.btn:disabled { opacity: .5; cursor: default; }

input, select, textarea { padding: 9px 12px; border-radius: 12px; border: 2px solid var(--border);
  background: #fff; font: 600 14px "Nunito", sans-serif; color: var(--ink); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); }

.muted { color: var(--muted); }
.small { font-size: 12.5px; }
.pill { display: inline-block; padding: 3px 11px; border-radius: 99px; font-size: 11.5px;
  font-weight: 800; border: none; background: var(--brand-soft); color: var(--brand); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; align-items: stretch; }
.streak { color: #F4772E; font-weight: 900; }

/* ── group feed ── */
.feed-day { font: 900 12px "Nunito", sans-serif; text-transform: uppercase;
  letter-spacing: .08em; color: var(--muted); margin: 16px 0 6px; }
.fcard { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0;
  border-bottom: 2px solid var(--border); }
.fcard .who { font-weight: 900; }
.react { background: #fff; border: 2px solid var(--border); border-radius: 99px;
  padding: 2px 9px; cursor: pointer; font-size: 13px; font-family: "Nunito", sans-serif; font-weight: 700; }
.react:hover { border-color: var(--brand); background: var(--brand-soft); }

/* ── modal ── */
.modal { position: fixed; inset: 0; background: rgba(33,36,59,.5); display: none;
  align-items: center; justify-content: center; z-index: 50; padding: 16px; }
.modal.open { display: flex; }
.modal-card { background: #fff; border-radius: 22px; padding: 24px; max-width: 480px;
  width: 100%; max-height: 90vh; overflow-y: auto; box-shadow: 0 10px 40px rgba(33,36,59,.25); }
.modal-card h3 { font: 900 20px "Nunito", sans-serif !important; }

.rocket-fab { position: fixed; right: 18px; bottom: 18px; background: var(--sun);
  border: none; border-radius: 99px; width: 54px; height: 54px; font-size: 24px;
  cursor: pointer; box-shadow: 0 4px 0 #DE9A14, 0 6px 16px rgba(33,36,59,.18); z-index: 40;
  transition: transform .1s; }
.rocket-fab:hover { transform: scale(1.08) rotate(-8deg); }

/* ── hero ── */
.hero { text-align: center; padding: 40px 12px 14px; }
.hero h2 { font: 900 clamp(30px, 5.4vw, 46px)/1.12 "Nunito", sans-serif; margin: 0; letter-spacing: -.02em; }
.hero h2 .pop { color: var(--brand); }
.hero .sub { font-size: 17px; font-weight: 700; color: var(--muted); margin: 12px 0 0; }
.hero-emojis { font-size: 26px; letter-spacing: 12px; margin-top: 14px; }

.notice { background: var(--sun-soft); border: 2px solid var(--sun); border-radius: 14px;
  padding: 11px 15px; font-size: 13.5px; font-weight: 700; margin: 10px 0; }
table.plain { border-collapse: collapse; width: 100%; font-size: 13.5px; }
table.plain th, table.plain td { text-align: left; padding: 6px 8px; border-bottom: 2px solid var(--border); }
table.plain th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }

/* ── word game tiles/keys (kept vivid) ── */
.tile { width: 100%; aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 24px; border-radius: 10px; border: 2px solid var(--border);
  background: #fff; text-transform: uppercase; font-family: "Nunito", sans-serif; }
.tile.g { background: var(--c-word); border-color: var(--c-word); color: #fff; }
.tile.y { background: var(--sun); border-color: var(--sun); color: #fff; }
.tile.b { background: #9A9DB1; border-color: #9A9DB1; color: #fff; }
.kb button { padding: 11px 6px; min-width: 27px; border-radius: 9px; border: none;
  background: #E4E4EC; font: 800 13px "Nunito", sans-serif; cursor: pointer; box-shadow: 0 2px 0 #C9C9D6; }
.kb button:active { transform: translateY(2px); box-shadow: none; }
.kb button.g { background: var(--c-word); color: #fff; box-shadow: 0 2px 0 #3B8330; }
.kb button.y { background: var(--sun); color: #fff; box-shadow: 0 2px 0 #DE9A14; }
.kb button.b { background: #9A9DB1; color: #fff; box-shadow: 0 2px 0 #7E819A; }

@media (max-width: 640px) { main { padding: 12px 10px 76px; } .hero { padding-top: 24px; } }
.gemoji.g-risto { background: var(--c-risto-soft); } .gemoji.g-word { background: var(--c-word-soft); }
.gemoji.g-chess { background: var(--c-chess-soft); } .gemoji.g-go { background: var(--c-go-soft); }
.gemoji.g-blackjack { background: var(--c-blackjack-soft); }

/* ── Badge unlocked celebration popup ── */
.g140-badge-pop {
  position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px);
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(135deg, #2a2350, #1c1838); color: #fff;
  border: 2px solid var(--sun, #FFB627); border-radius: 16px;
  padding: 12px 18px; box-shadow: 0 10px 30px rgba(0,0,0,.4);
  z-index: 9999; opacity: 0; transition: opacity .3s, transform .3s; max-width: 90vw;
}
.g140-badge-pop.show { opacity: 1; transform: translate(-50%, 0); }
.g140-badge-pop .bp-emoji { font-size: 38px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.4)); }
.g140-badge-pop .bp-un { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--sun, #FFB627); font-weight: 800; }
.g140-badge-pop .bp-name { font-size: 17px; font-weight: 900; }
.g140-badge-pop .bp-desc { font-size: 12.5px; opacity: .85; }

/* ── Trophy case (My Thinking) ── */
.trophy-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.trophy { text-align: center; border-radius: 14px; padding: 12px 6px; border: 2px solid var(--border);
  background: var(--surface); transition: transform .1s; }
.trophy.earned { border-color: var(--sun, #FFB627); background: linear-gradient(160deg, var(--sun-soft, #fff6e0), var(--surface)); }
.trophy.locked { opacity: .5; filter: grayscale(1); }
.trophy .t-emoji { font-size: 30px; }
.trophy .t-name { font-size: 12px; font-weight: 800; margin-top: 2px; }
.trophy .t-desc { font-size: 10.5px; color: var(--muted); margin-top: 2px; line-height: 1.2; }