/* Jocs (assets/jocs.mjs): points, games, ranking, Wordle, Contexto and player profiles */
:root { --wd-green:#3f8f55; --wd-yellow:#c49a1a; --wd-gray:#8a8f98; }
[data-theme="dark"] { --wd-green:#3e8a53; --wd-yellow:#b38c17; --wd-gray:#4a4f58; }

.tone-green { --tone:#3f8f55; } .tone-amber { --tone:#c48a12; } .tone-ink { --tone:#4b5160; } .tone-blue { --tone:#3a6fb0; }
[data-theme="dark"] .tone-green { --tone:#5bbf7a; } [data-theme="dark"] .tone-amber { --tone:#e0a83a; } [data-theme="dark"] .tone-ink { --tone:#a3a8b2; } [data-theme="dark"] .tone-blue { --tone:#6fa3e0; }

.jc-invites { display:grid; gap:8px; margin:0 0 18px; padding:0; list-style:none; }
.jc-invites a { display:flex; align-items:center; gap:12px; padding:12px 16px; border:1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); border-radius:14px; background:var(--accent-soft); color:var(--ink); text-decoration:none; font-size:14px; }
.jc-invites a > span { flex:1; }
.jc-invites a > b { display:inline-flex; align-items:center; gap:4px; color:var(--accent-ink); font-size:13px; }
.jc-invites svg { width:16px; height:16px; flex:none; }

.jc-icon { display:grid; place-items:center; width:44px; height:44px; flex:none; border-radius:12px; background:color-mix(in srgb, var(--tone) 13%, transparent); color:var(--tone); }
.jc-icon svg { width:24px; height:24px; }
.jc-copy { display:grid; gap:3px; min-width:0; }
.jc-copy strong { font-size:17px; font-weight:650; letter-spacing:-.01em; }
.jc-copy small { color:var(--mute); font-size:13px; line-height:1.45; }
.jc-badge { display:inline-flex; align-items:center; gap:4px; padding:3px 10px; border-radius:99px; background:var(--line-2); color:var(--mute); font:600 11.5px/1.5 var(--sans); white-space:nowrap; }
.jc-badge.is-on { background:color-mix(in srgb, var(--tone, var(--accent)) 13%, transparent); color:var(--tone, var(--accent-ink)); }
.jc-badge.is-won { background:var(--ok-soft); color:var(--ok); }
.jc-badge svg { width:12px; height:12px; }

.jc-games { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px; margin:0; padding:0; list-style:none; }
@media (max-width: 640px) { .jc-games { grid-template-columns:minmax(0, 1fr); } }
.jc-game { display:grid; gap:14px; height:100%; padding:18px; border:1px solid var(--line); border-radius:18px; background:var(--card); box-shadow:var(--shadow-sm); color:var(--ink); text-decoration:none; transition:border-color .15s, box-shadow .15s, transform .1s; }
.jc-game:hover { border-color:color-mix(in srgb, var(--tone) 55%, var(--line)); box-shadow:var(--shadow); }
.jc-game:active { transform:scale(.995); }
.jc-game:focus-visible { outline:2px solid var(--tone); outline-offset:2px; }
.jc-game-top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.jc-cta { display:flex; align-items:center; justify-content:center; gap:6px; height:42px; border-radius:11px; background:var(--tone); color:#fff; font-size:14px; font-weight:650; }
.jc-game.is-done .jc-cta { background:var(--line-2); color:var(--ink); }
.jc-cta svg { width:15px; height:15px; }
.jc-mini { display:grid; gap:3px; justify-content:start; }
.jc-mini i { display:flex; gap:3px; }
.jc-mini b { width:14px; height:14px; border-radius:3px; background:var(--line-2); }
.jc-mini b.is-correct { background:var(--wd-green); } .jc-mini b.is-present { background:var(--wd-yellow); } .jc-mini b.is-absent { background:var(--wd-gray); }
.jc-best { display:grid; gap:6px; align-content:start; min-height:99px; }
.jc-best-row { position:relative; display:flex; align-items:center; justify-content:space-between; gap:8px; height:29px; padding:0 10px; overflow:hidden; border-radius:8px; background:var(--line-2); font-size:13px; font-weight:600; }
.jc-best-row i { position:absolute; inset:0 auto 0 0; background:color-mix(in srgb, var(--tone) 30%, transparent); }
.jc-best-row span, .jc-best-row b { position:relative; }
.jc-best-row b { font-variant-numeric:tabular-nums; }
.jc-best small { color:var(--mute); font-size:13px; line-height:1.45; }

.jc-rank { margin:0; padding:0; list-style:none; }
.jc-rank li { display:flex; align-items:center; gap:8px; padding:9px 0; border-top:1px solid var(--line-2); font-size:14px; }
.jc-rank li:first-child { border-top:0; }
.jc-rank li.is-me { margin:0 -8px; padding-left:8px; padding-right:8px; border-radius:10px; background:var(--accent-soft); font-weight:600; }
.jc-pos { display:grid; place-items:center; width:24px; height:24px; flex:none; border-radius:50%; color:var(--mute); font:600 12px var(--sans); font-variant-numeric:tabular-nums; }
.is-top1 .jc-pos { background:#f2c94c; color:#5b4300; } .is-top2 .jc-pos { background:#d5d8de; color:#3a3f48; } .is-top3 .jc-pos { background:#e2a36c; color:#4d2a08; }
.jc-name { min-width:0; overflow:hidden; color:var(--ink); text-overflow:ellipsis; white-space:nowrap; text-decoration:none; }
.jc-name:hover { color:var(--accent-ink); text-decoration:underline; }
.jc-you { padding:1px 7px; border-radius:99px; background:var(--accent-soft); color:var(--accent-ink); font:600 10px/1.6 var(--mono); font-style:normal; text-transform:uppercase; }
.jc-week { margin-left:auto; color:var(--ok); font:500 12px var(--sans); font-variant-numeric:tabular-nums; }
.jc-total { min-width:40px; text-align:right; font-variant-numeric:tabular-nums; }
.jc-more summary { padding-top:8px; color:var(--accent-ink); font-size:13px; font-weight:600; cursor:pointer; }

.jc-log > summary { display:flex; align-items:center; justify-content:space-between; cursor:pointer; list-style:none; }
.jc-log > summary::-webkit-details-marker { display:none; }
.jc-log > summary h2 { margin:0; font-size:15px; font-weight:650; }
.jc-log > summary svg { width:16px; height:16px; color:var(--mute); transition:transform .15s; }
.jc-log[open] > summary svg { transform:rotate(180deg); }
.jc-log[open] > summary { margin-bottom:8px; }
.jc-history { display:grid; margin:0; padding:0; list-style:none; }
.jc-history li { display:flex; align-items:baseline; gap:10px; padding:8px 0; border-top:1px solid var(--line-2); font-size:13.5px; }
.jc-history li:first-child { border-top:0; }
.jc-history span { flex:1; }
.jc-history small { color:var(--mute); }
.jc-history strong { min-width:36px; text-align:right; color:var(--ok); font-variant-numeric:tabular-nums; }
.jc-history strong.is-minus { color:var(--accent-ink); }

/* Both games */
.jg-result { width:100%; margin:0; padding:12px 14px; border-radius:12px; background:var(--line-2); text-align:center; font-size:14px; }
.jg-result.is-won { background:var(--ok-soft); color:var(--ink); }

/* Wordle */
.wd-board { display:grid; gap:6px; }
.wd-row { display:grid; grid-template-columns:repeat(5, 52px); gap:6px; }
.wd-row.is-shake { animation:wd-shake .35s; }
@keyframes wd-shake { 20%, 60% { transform:translateX(-5px); } 40%, 80% { transform:translateX(5px); } }
@media (prefers-reduced-motion: reduce) { .wd-row.is-shake { animation:none; } }
.wd-cell { display:grid; place-items:center; width:52px; height:52px; border:2px solid var(--line); border-radius:8px; color:var(--ink); font:700 24px var(--sans); text-transform:uppercase; }
.wd-cell.is-typed { border-color:var(--mute); }
.wd-cell.is-hint { border-style:dashed; color:var(--mute); }
.wd-cell.is-correct, .wd-cell.is-present, .wd-cell.is-absent { border-color:transparent; color:#fff; }
.wd-cell.is-correct { background:var(--wd-green); }
.wd-cell.is-present { background:var(--wd-yellow); }
.wd-cell.is-absent { background:var(--wd-gray); }
.wd-keys { display:grid; gap:6px; width:100%; max-width:500px; }
.wd-krow { display:flex; justify-content:center; gap:5px; }
.wd-key { flex:1 1 0; min-width:0; height:50px; padding:0; border:0; border-radius:7px; background:var(--line); color:var(--ink); font:600 14px var(--sans); cursor:pointer; touch-action:manipulation; }
.wd-key.is-wide { flex:1.6 1 0; font-size:12px; }
.wd-key.is-correct, .wd-key.is-present, .wd-key.is-absent { color:#fff; }
.wd-key.is-correct { background:var(--wd-green); }
.wd-key.is-present { background:var(--wd-yellow); }
.wd-key.is-absent { background:var(--wd-gray); }
.wd-key:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
@media (max-width: 420px) {
  .wd-row { grid-template-columns:repeat(5, 46px); }
  .wd-cell { width:46px; height:46px; font-size:21px; }
  .wd-key { height:46px; font-size:13px; }
}

/* Contexto */
.cx-form { display:flex; gap:8px; width:100%; max-width:480px; }
.cx-form input { flex:1; }
.cx-count { margin:0; color:var(--mute); font-size:12.5px; }
.cx-list { display:grid; gap:6px; width:100%; max-width:480px; margin:0; padding:0; list-style:none; }
.cx-last { padding-bottom:10px; border-bottom:1px solid var(--line); }
.cx-row { position:relative; display:flex; justify-content:space-between; gap:10px; padding:10px 14px; overflow:hidden; border-radius:10px; background:var(--line-2); font-size:15px; font-weight:600; }
.cx-row.is-last { outline:2px solid var(--ink); outline-offset:-2px; }
.cx-bar { position:absolute; inset:0 auto 0 0; z-index:0; }
.cx-word, .cx-rank { position:relative; z-index:1; }
.cx-word small { color:var(--mute); font-weight:500; font-size:11px; }
.cx-rank { font-variant-numeric:tabular-nums; }
.cx-row.is-hot .cx-bar { background:color-mix(in srgb, var(--wd-green) 55%, transparent); }
.cx-row.is-warm .cx-bar { background:color-mix(in srgb, var(--wd-yellow) 50%, transparent); }
.cx-row.is-cold .cx-bar { background:color-mix(in srgb, var(--accent) 35%, transparent); }
.cx-row.is-far .cx-bar { background:var(--line); }
.cx-row.is-far .cx-rank { color:var(--mute); font-weight:500; }

/* Invite dialog */
.ji-list { display:grid; gap:2px; max-height:260px; margin:6px 0 0; padding:0; overflow:auto; list-style:none; }
.ji-list li { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 2px; border-top:1px solid var(--line-2); font-size:14px; }
.ji-list li:first-child { border-top:0; }

/* Player profile */
.jp-stats { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:10px; }
.jp-stat { display:grid; gap:4px; padding:14px; border:1px solid var(--line-2); border-radius:12px; }
.jp-stat span { color:var(--mute); font-size:12px; font-weight:600; }
.jp-stat strong { font-size:24px; font-weight:650; font-variant-numeric:tabular-nums; }

.cx-form { align-items:stretch; }
.cx-form input { height:44px; min-height:0; padding:0 14px; }
.cx-form .msg-send { height:44px; min-height:0; align-self:auto; }

.jc-best { min-height:99px; }
.jc-game { grid-template-rows:auto auto 1fr auto; }

/* ---- Inside a game: a wide stage and a side column (stacked below 1100px) ---- */
.jg-head { display:flex; align-items:center; gap:14px; margin:0 0 20px; }
.jg-head .jc-icon { width:52px; height:52px; border-radius:14px; }
.jg-head .jc-icon svg { width:28px; height:28px; }
.jg-head h1 { margin:0; font-size:30px; font-weight:650; letter-spacing:-.03em; line-height:1.1; }
.jg-head p { margin:4px 0 0; color:var(--mute); font-size:14px; }
.jg-layout { display:grid; grid-template-columns:minmax(0, 1fr) 340px; gap:20px; align-items:start; }
.jg-stage { display:flex; flex-direction:column; align-items:center; gap:18px; min-width:0; min-height:calc(100vh - 230px); padding:clamp(18px, 3vw, 40px); border:1px solid var(--line); border-radius:20px; background:var(--card); box-shadow:var(--shadow-sm); }
.jg-stage .form-error { margin:0; min-height:1.3em; text-align:center; }
.jg-aside { display:grid; gap:14px; }
@media (min-width: 1101px) { .jg-aside { position:sticky; top:84px; } }
@media (max-width: 1100px) {
  .jg-layout { grid-template-columns:minmax(0, 1fr); }
  .jg-stage { min-height:0; }
  .jg-aside { grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); align-items:start; }
}
@media (max-width: 640px) {
  .jg-head { margin-bottom:14px; }
  .jg-head h1 { font-size:24px; }
  .jg-head .jc-icon { width:44px; height:44px; }
  .jg-stage { padding:16px 10px; border-radius:16px; }
}
.jg-card { display:grid; gap:12px; padding:18px; border:1px solid var(--line); border-radius:18px; background:var(--card); }
.jg-card h2 { margin:0; font-size:15px; font-weight:650; }
.jg-card .jg-result { margin:0; text-align:left; }
.jg-stats { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; margin:0; }
.jg-stats div { display:grid; gap:2px; padding:10px; border-radius:12px; background:var(--paper); }
.jg-stats dt { color:var(--mute); font-size:11.5px; font-weight:600; line-height:1.3; }
.jg-stats dd { margin:0; font-size:20px; font-weight:650; font-variant-numeric:tabular-nums; }
.jg-actions { display:grid; gap:8px; }
.jg-btn { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:44px; padding:0 14px; border:1px solid var(--line); border-radius:12px; background:var(--card); color:var(--ink); font:600 14px var(--sans); cursor:pointer; transition:border-color .15s, background .15s; }
.jg-btn > span { display:inline-flex; align-items:center; gap:8px; }
.jg-btn svg { width:16px; height:16px; }
.jg-btn small { color:var(--mute); font-size:12.5px; font-weight:500; }
.jg-btn:hover:not(:disabled) { border-color:var(--tone, var(--accent)); }
.jg-btn:disabled { opacity:.5; cursor:default; }
.jg-btn.is-primary { justify-content:center; border-color:var(--tone, var(--ink)); background:var(--tone, var(--ink)); color:#fff; }
.jg-btn:focus-visible { outline:2px solid var(--tone, var(--accent)); outline-offset:2px; }
.jg-legend { display:grid; gap:10px; margin:0; padding:0; list-style:none; font-size:13.5px; }
.jg-legend li { display:flex; align-items:center; gap:12px; }
.jg-legend .wd-cell.is-demo { --cell:34px; font-size:16px; flex:none; }
.jg-legend-cx .cx-row { padding:8px 12px; font-size:13.5px; }
.jg-note { margin:0; color:var(--mute); font-size:13px; line-height:1.5; }

/* Paraula: the board grows with the screen */
.jg-stage { --cell:clamp(46px, min(9vw, 7.4vh), 68px); }
.wd-board { gap:clamp(5px, .8vh, 8px); margin:auto 0 0; }
.wd-row { grid-template-columns:repeat(5, var(--cell)); gap:clamp(5px, .8vh, 8px); }
.wd-cell { width:var(--cell); height:var(--cell); font-size:calc(var(--cell) * .45); border-radius:10px; }
.wd-keys { max-width:620px; margin:0 0 auto; }
.wd-key { height:clamp(46px, 6.4vh, 58px); font-size:15px; }
@media (max-width: 420px) { .jg-stage { --cell:min(15vw, 58px); } .wd-key { height:50px; font-size:14px; } .wd-krow { gap:4px; } }

/* Context: the stage holds the input and the list, full width */
.jg-stage .cx-form, .jg-stage .cx-list, .cx-sec, .cx-empty { width:100%; max-width:720px; }
.jg-stage .cx-form input, .jg-stage .cx-form .msg-send { height:52px; font-size:16px; }
.cx-sec { display:flex; justify-content:space-between; margin:4px 0 -8px; color:var(--mute); font:600 11.5px var(--mono); letter-spacing:.06em; text-transform:uppercase; }
.cx-empty { margin:24px 0; color:var(--mute); text-align:center; }
.jg-stage .cx-row { padding:12px 16px; font-size:16px; }
/* The board and keyboard fit in one screen: the cells follow the window height too */
.jg-stage { --cell:clamp(42px, min(9vw, calc((100vh - 540px) / 6)), 68px); }
.wd-key { height:clamp(44px, 5.6vh, 56px); }
@media (max-width: 420px) { .jg-stage { --cell:min(15vw, 58px); } }

/* ---- Context, as the original: colour bar inside each row, latest guess on top with an outline ---- */
:root { --cx-hot:#3fb97a; --cx-warm:#ef9f2f; --cx-cold:#e5487f; }
[data-theme="dark"] { --cx-hot:#3fae73; --cx-warm:#e09328; --cx-cold:#d9427a; }
.cx-top { display:grid; gap:14px; width:100%; max-width:720px; padding-bottom:8px; }
.cx-meta { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 22px; font-size:14px; color:var(--mute); }
.cx-meta strong { color:var(--ink); font-size:18px; font-weight:700; font-variant-numeric:tabular-nums; }
.cx-meta b { margin-left:4px; color:var(--ink); font-size:18px; font-weight:700; font-variant-numeric:tabular-nums; }
.jg-stage .cx-form { display:block; }
.jg-stage .cx-form input { width:100%; height:64px; padding:0 20px; border:2px solid var(--line); border-radius:14px; background:var(--paper); font-size:22px; }
.jg-stage .cx-form input:focus { border-color:var(--ink); box-shadow:none; outline:none; }
.jg-stage .cx-form input::placeholder { color:var(--faint); }
.jg-stage .cx-top .form-error:empty { display:none; }
.cx-list { gap:8px; }
.cx-latest { padding-bottom:8px; border:0; }
.jg-stage .cx-row, .jg-legend-cx .cx-row { align-items:center; min-height:52px; padding:0 18px; border-radius:10px; background:var(--line-2); font-size:18px; font-weight:600; }
.jg-legend-cx .cx-row { min-height:38px; padding:0 12px; font-size:13.5px; }
.cx-row .cx-bar { border-radius:10px; }
.cx-row.is-hot .cx-bar { background:var(--cx-hot); }
.cx-row.is-warm .cx-bar { background:var(--cx-warm); }
.cx-row.is-cold .cx-bar { background:var(--cx-cold); }
.cx-row.is-hot .cx-word, .cx-row.is-warm .cx-word { color:#fff; text-shadow:0 1px 1px rgba(0,0,0,.15); }
.cx-row.is-cold .cx-word { color:var(--ink); }
.cx-row .cx-rank { color:var(--ink); font-weight:700; }
.cx-row.is-last { outline:3px solid var(--ink); outline-offset:2px; }
.cx-latest .cx-row.is-last { outline-offset:2px; }
.cx-word { display:inline-flex; align-items:center; gap:10px; }
.cx-bulb { width:20px; height:20px; flex:none; opacity:.9; }
.jg-stage .cx-list, .jg-stage .cx-top { max-width:760px; }
.jg-stage { gap:14px; }
@media (max-width: 640px) {
  .jg-stage .cx-form input { height:56px; font-size:19px; }
  .jg-stage .cx-row { min-height:48px; font-size:16px; padding:0 14px; }
  .cx-meta strong, .cx-meta b { font-size:16px; }
}
.jc-best-row.is-hot i { background:color-mix(in srgb, var(--cx-hot) 70%, transparent); }
.jc-best-row.is-warm i { background:color-mix(in srgb, var(--cx-warm) 70%, transparent); }
.jc-best-row.is-cold i { background:color-mix(in srgb, var(--cx-cold) 70%, transparent); }
.cx-top { gap:18px; padding-bottom:14px; }
.cx-latest { padding-bottom:14px; margin-bottom:4px; border-bottom:1px solid var(--line-2); }

/* ---- Jocs page: title and points on one line, the two games, the ranking ---- */
.jc-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px 24px; flex-wrap:wrap; margin-bottom:28px; }
.jc-head > div:first-child { min-width:0; }
.jc-wallet { position:relative; flex:none; }
.jc-wallet > summary { display:inline-flex; align-items:center; gap:8px; height:46px; padding:0 14px 0 12px; border:1px solid var(--line); border-radius:99px; background:var(--card); box-shadow:var(--shadow-sm); cursor:pointer; list-style:none; font-size:14px; color:var(--mute); }
.jc-wallet > summary::-webkit-details-marker { display:none; }
.jc-wallet > summary strong { color:var(--ink); font-size:20px; font-weight:700; font-variant-numeric:tabular-nums; }
.jc-wallet > summary svg { width:15px; height:15px; transition:transform .15s; }
.jc-wallet[open] > summary svg { transform:rotate(180deg); }
.jc-wallet > summary:hover { border-color:var(--ink); }
.jc-coin { width:18px; height:18px; border-radius:50%; background:radial-gradient(circle at 35% 35%, #ffe08a, #e9a91c 60%, #c9840a); box-shadow:inset 0 0 0 2px rgba(255,255,255,.35); }
.jc-pop { position:absolute; right:0; top:calc(100% + 8px); z-index:40; display:grid; gap:12px; width:min(340px, calc(100vw - 32px)); padding:16px; border:1px solid var(--line); border-radius:16px; background:var(--card); box-shadow:var(--shadow-lg, var(--shadow)); }
.jc-pop h3 { margin:4px 0 -4px; color:var(--mute); font:600 11px var(--mono); letter-spacing:.06em; text-transform:uppercase; }
.jc-stats3 { display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; margin:0; }
.jc-stats3 div { padding:10px; border-radius:10px; background:var(--paper); }
.jc-stats3 dt { color:var(--mute); font-size:11.5px; font-weight:600; }
.jc-stats3 dd { margin:2px 0 0; font-size:17px; font-weight:700; font-variant-numeric:tabular-nums; }
.jc-rules { display:grid; margin:0; padding:0; list-style:none; }
.jc-rules li { display:flex; justify-content:space-between; gap:12px; padding:7px 0; border-top:1px solid var(--line-2); font-size:13.5px; }
.jc-rules li:first-child { border-top:0; }
.jc-rules b, .jc-rules strong { color:var(--ok); font-variant-numeric:tabular-nums; }
.jc-rules .is-minus { color:var(--accent-ink); }

.jc-games { margin-bottom:14px; }
.jc-game { gap:18px; padding:20px; }
.jc-game-top { justify-content:flex-start; gap:14px; }
.jc-game-top .jc-copy small b.is-won { color:var(--ok); }
.jc-check { display:grid; place-items:center; width:28px; height:28px; margin-left:auto; border-radius:50%; background:var(--ok-soft); color:var(--ok); }
.jc-check svg { width:15px; height:15px; }
.jc-game .jc-mini, .jc-game .jc-best { min-height:99px; }
.jc-best { align-content:center; }
.jc-best-row.is-empty { background:var(--line-2); opacity:.6; }

.jc-soon-line { display:flex; align-items:center; flex-wrap:wrap; gap:8px 18px; margin:0 0 28px; color:var(--mute); font-size:13.5px; }
.jc-soon-line > span:first-child { font:600 11px var(--mono); letter-spacing:.06em; text-transform:uppercase; }
.jc-soon-item { display:inline-flex; align-items:center; gap:7px; color:var(--ink-2); }
.jc-soon-item svg { width:17px; height:17px; color:var(--tone); }

.jc-rank-head { padding:0 0 6px !important; border:0 !important; color:var(--mute); font:600 11px var(--mono); letter-spacing:.05em; text-transform:uppercase; }
.jc-rank-head .jc-week { color:var(--mute); font:inherit; }
.jc-rank-head + li { border-top:0; }
.jc-who { display:flex; align-items:center; gap:8px; min-width:0; flex:1; }
.jc-rank .jc-week { width:80px; margin-left:0; text-align:right; }
.jc-rank .jc-total { width:64px; }
@media (max-width: 640px) {
  .jc-head { align-items:flex-start; }
  .jc-head > div:first-child { flex-basis:100%; }
  .jc-pop { left:0; right:auto; }
  .jc-rank .jc-week { width:56px; }
}

.jc-rank li.jc-rank-head { font:600 11px var(--mono); letter-spacing:.05em; }
.jc-game { grid-template-rows:auto 1fr auto; }

/* Invite dialog */
.ji-card { display:grid; gap:12px; width:min(460px, calc(100vw - 32px)); padding:22px; }
.ji-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.ji-head h2 { margin:0; font-size:19px; font-weight:650; letter-spacing:-.01em; }
.ji-close { display:grid; place-items:center; width:34px; height:34px; flex:none; border:0; border-radius:50%; background:var(--line-2); color:var(--ink); cursor:pointer; }
.ji-close svg { width:16px; height:16px; }
.ji-hint { margin:-4px 0 4px; color:var(--mute); font-size:13.5px; }
.ji-label { font-size:13px; font-weight:600; }
.ji-search { display:flex; align-items:center; gap:10px; height:48px; padding:0 14px; border:1px solid var(--line); border-radius:12px; background:var(--paper); }
.ji-search:focus-within { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.ji-search svg { width:17px; height:17px; flex:none; color:var(--mute); }
.ji-search input { flex:1; min-width:0; height:100%; border:0; background:none; color:var(--ink); font:16px var(--sans); outline:none; }
.ji-list { margin:0; max-height:220px; }
.ji-list:empty { display:none; }
.ji-list li { min-height:48px; }
.ji-note { color:var(--mute); font-size:12px; text-align:right; }
.ji-or { display:flex; align-items:center; gap:10px; margin:4px 0 0; color:var(--mute); font-size:12.5px; }
.ji-or::before, .ji-or::after { content:''; flex:1; height:1px; background:var(--line); }
.ji-link { display:flex; align-items:center; gap:8px; padding:6px 6px 6px 14px; border:1px solid var(--line); border-radius:12px; background:var(--paper); }
.ji-url { flex:1; min-width:0; overflow:hidden; color:var(--ink-2); font:13px var(--mono); text-overflow:ellipsis; white-space:nowrap; }
.ji-btn { display:inline-flex; align-items:center; gap:6px; flex:none; height:38px; padding:0 14px; border:1px solid var(--line); border-radius:9px; background:var(--card); color:var(--ink); font:600 13.5px var(--sans); cursor:pointer; }
.ji-btn svg { width:15px; height:15px; }
.ji-btn:not(.is-done) svg { display:none; }
.ji-btn.is-primary svg { display:block; }
.ji-btn.is-primary { border-color:var(--ink); background:var(--ink); color:var(--paper); }
.ji-btn.is-done { border-color:var(--ok-line); background:var(--ok-soft); color:var(--ok); }
@media (max-width: 640px) {
  .ji-card { width:100%; padding:18px 16px calc(18px + env(safe-area-inset-bottom)); }
  .ji-link { flex-wrap:wrap; padding:8px; }
  .ji-url { flex-basis:100%; padding:2px 6px 4px; }
  .ji-btn { flex:1; justify-content:center; height:44px; }
}
.cf-card.ji-card { box-sizing:border-box; width:460px; max-width:calc(100vw - 32px); }
.ji-card > * { min-width:0; }
@media (max-width: 640px) { .cf-card.ji-card { width:100%; max-width:100%; } }

/* Coming soon: a box at the end of the page */
.jc-games { margin-bottom:20px; }
.jc-soon-box { margin-top:20px; padding:18px; border:1px dashed var(--line); border-radius:18px; }
.jc-soon-box h2 { margin:0 0 12px; color:var(--mute); font:600 11.5px var(--mono); letter-spacing:.06em; text-transform:uppercase; }
.jc-soon-box ul { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; margin:0; padding:0; list-style:none; }
@media (max-width: 640px) { .jc-soon-box ul { grid-template-columns:minmax(0, 1fr); } }
.jc-soon-box li { display:flex; align-items:center; gap:12px; }
.jc-soon-box .jc-icon { width:40px; height:40px; }
.jc-soon-box .jc-icon svg { width:21px; height:21px; }
.jc-soon-box .jc-copy strong { font-size:15px; }

/* ---- Player profile with statistics ---- */
.jp-hero { display:flex; align-items:center; gap:16px; margin:0 0 20px; }
.jp-avatar { display:grid; place-items:center; width:64px; height:64px; flex:none; border-radius:50%; background:var(--ink); color:var(--paper); font-size:26px; font-weight:700; }
.jp-hero h1 { margin:0; font-size:30px; font-weight:650; letter-spacing:-.03em; }
.jp-hero p { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:6px 0 0; color:var(--mute); font-size:13.5px; }
.jp-summary, .jp-nums { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; margin:0 0 16px; }
.jp-summary div { padding:16px; border:1px solid var(--line); border-radius:16px; background:var(--card); }
.jp-summary dd, .jp-nums dd { margin:0; font-size:28px; font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.jp-summary dt, .jp-nums dt { margin-top:2px; color:var(--mute); font-size:12.5px; font-weight:600; }
.jp-games { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; }
@media (max-width: 900px) { .jp-games { grid-template-columns:minmax(0, 1fr); } }
.jp-game { display:grid; gap:14px; align-content:start; padding:20px; border:1px solid var(--line); border-radius:18px; background:var(--card); }
.jp-game header { display:flex; align-items:center; gap:12px; }
.jp-game header h2 { margin:0; font-size:18px; font-weight:650; }
.jp-game header a { display:inline-flex; align-items:center; gap:4px; margin-left:auto; color:var(--tone); font-size:13.5px; font-weight:650; text-decoration:none; }
.jp-game header a svg { width:14px; height:14px; }
.jp-game .jc-icon { width:40px; height:40px; }
.jp-nums { grid-template-columns:repeat(4, minmax(0, 1fr)); gap:8px; margin:0; }
.jp-nums div { padding:12px 10px; border-radius:12px; background:var(--paper); text-align:center; }
.jp-nums dd { font-size:24px; }
.jp-nums dt { font-size:11.5px; line-height:1.3; }
.jp-nums2 { grid-template-columns:repeat(2, minmax(0, 1fr)); }
.jp-game h3 { margin:4px 0 -4px; color:var(--mute); font:600 11px var(--mono); letter-spacing:.06em; text-transform:uppercase; }
.jp-dist { display:grid; gap:5px; margin:0; padding:0; list-style:none; }
.jp-dist li { display:flex; align-items:center; gap:10px; font-size:13px; font-weight:600; }
.jp-dist li > span { width:12px; color:var(--mute); text-align:center; font-variant-numeric:tabular-nums; }
.jp-dist i { display:flex; justify-content:flex-end; min-width:26px; padding:3px 8px; border-radius:6px; background:var(--wd-gray); color:#fff; font-style:normal; }
.jp-dist i.is-on { background:var(--tone); }
.jp-dist b { font-variant-numeric:tabular-nums; }
@media (max-width: 480px) {
  .jp-summary { gap:8px; } .jp-summary div { padding:12px; } .jp-summary dd { font-size:22px; }
  .jp-nums { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
.jc-me { display:flex; align-items:center; gap:10px; margin-top:2px; padding:11px 12px; border-radius:12px; background:var(--paper); color:var(--ink); font-size:14px; font-weight:600; text-decoration:none; }
.jc-me span { flex:1; }
.jc-me svg { width:16px; height:16px; color:var(--mute); }
.jc-me:hover { background:var(--line-2); }
button.jc-name { padding:0; border:0; background:none; font:inherit; cursor:pointer; text-align:left; }
button.jc-name:disabled { opacity:.6; cursor:progress; }

/* Keep play compact on phones, with touch controls at least 44px tall. */
.jg-help > summary { font-size:15px; font-weight:650; cursor:pointer; }
.jg-help-body { display:grid; gap:12px; margin-top:12px; }
@media (max-width:700px) {
  .live-main:has(.jg-layout) { padding-top:10px; }
  .live-main:has(.jg-layout) > .back-link { margin-bottom:8px; }
  .live-main:has(.jg-layout) .dev-banner { margin-bottom:8px; padding:6px 8px; align-items:center; }
  .live-main:has(.jg-layout) .dev-banner p { font-size:11px; }
  .live-main:has(.jg-layout) .dev-banner p strong { display:inline; }
  .live-main:has(.jg-layout) .dev-banner p span { display:none; }
  .live-main:has(.jg-layout) .dev-banner.is-demo { flex-wrap:nowrap; }
  .live-main:has(.jg-layout) .dev-banner.is-demo .dev-action { width:auto; margin:0 0 0 auto; }
  .jg-head { gap:10px; margin-bottom:10px; }
  .jg-head .jc-icon { width:34px; height:34px; border-radius:10px; }
  .jg-head .jc-icon svg { width:22px; height:22px; }
  .jg-head h1 { font-size:22px; }
  .jg-head p { margin-top:2px; font-size:12px; }
  .jg-layout { gap:10px; }
  .jg-stage { --cell:clamp(28px, min(13vw, calc((100svh - 400px - env(safe-area-inset-bottom)) / 6)), 54px); padding:10px 6px; gap:6px; border-radius:14px; }
  .wd-board { margin:0; gap:4px; }
  .wd-row { gap:4px; }
  .wd-cell { border-radius:6px; }
  .wd-keys { margin:0; gap:4px; }
  .wd-krow { gap:3px; }
  .wd-key { height:44px; font-size:13px; border-radius:5px; }
  .wd-key.is-wide { font-size:11px; }
  .jg-stage:has(.wd-board) > .form-error:empty { display:none; }
  .jg-aside { grid-template-columns:minmax(0, 1fr); gap:10px; }
  .jg-card { padding:12px; gap:8px; border-radius:14px; }
  .jg-stats div { padding:6px 8px; border-radius:8px; }
  .jg-stats dd { font-size:17px; }
  .jg-actions { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:6px; }
  .jg-btn { padding:0 9px; gap:5px; font-size:12px; }
  .jg-btn small { font-size:11px; }
  .jg-btn.is-primary { grid-column:1 / -1; }
  .cx-top { gap:8px; padding-bottom:4px; }
  .cx-meta { gap:4px 12px; font-size:12px; }
  .cx-meta strong, .cx-meta b { font-size:14px; }
  .jg-stage .cx-form input { height:46px; padding:0 12px; font-size:16px; border-radius:10px; }
  .jg-stage .cx-row { min-height:38px; padding:0 10px; font-size:15px; }
  .cx-list { gap:5px; }
  .cx-latest { padding-bottom:8px; margin-bottom:2px; }
  .cx-empty { margin:12px 4px; font-size:13px; }
  .cx-word { min-width:0; overflow-wrap:anywhere; }
  .cx-rank { flex:none; }
  .jc-head { gap:10px; margin-bottom:14px; }
  .jc-head > div:first-child { flex-basis:auto; flex:1; }
  .jc-head h1 { font-size:26px; }
  .jc-wallet > summary { height:40px; padding:0 10px; gap:5px; font-size:12px; }
  .jc-wallet > summary strong { font-size:17px; }
  .jc-pop { left:auto; right:0; }
  .jc-game { padding:14px; gap:10px; grid-template-columns:minmax(0,1fr) 70px; grid-template-rows:auto auto; }
  .jc-game-top { gap:9px; }
  .jc-game .jc-copy strong { font-size:16px; }
  .jc-game .jc-copy small { font-size:11px; }
  .jc-game .jc-mini, .jc-game .jc-best { grid-column:2; grid-row:1 / 3; min-height:0; align-self:center; }
  .jc-game .jc-mini b { width:10px; height:10px; border-radius:2px; }
  .jc-game .jc-best-row { height:22px; padding:0 5px; font-size:9px; gap:3px; }
  .jc-cta { height:44px; grid-column:1; }
}

.wd-entry { display:none; width:100%; max-width:400px; }
.wd-entry label { display:block; margin-bottom:5px; font-size:12px; color:var(--mute); }
.wd-entry > div { display:flex; gap:6px; }
.wd-entry input { min-width:0; width:100%; height:44px; font-size:16px; }
.wd-entry button { flex:none; }
@media (max-width:700px) {
  .wd-entry { display:block; }
  .wd-keys { display:none; }
}

/* Turbogol's card on the Jocs page (the game itself: assets/turbogol/turbogol.css) */
.tone-turbo { --tone:#2f6fe0; }
[data-theme="dark"] .tone-turbo { --tone:#6f9cff; }
.jc-turbo { display:flex; align-items:center; gap:16px; margin:0 0 20px; padding:16px 18px; border:1px solid var(--line); border-radius:18px; background:var(--card); box-shadow:var(--shadow-sm); color:var(--ink); text-decoration:none; transition:border-color .15s, box-shadow .15s; }
.jc-turbo:hover { border-color:color-mix(in srgb, var(--tone) 55%, var(--line)); box-shadow:var(--shadow); }
.jc-turbo:focus-visible { outline:2px solid var(--tone); outline-offset:2px; }
.jc-turbo .jc-copy { flex:1; }
.jc-turbo .jc-cta { flex:none; padding:0 16px; }
.jc-turbo-art { position:relative; width:88px; height:56px; flex:none; overflow:hidden; border-radius:12px; background:linear-gradient(180deg, #16213a, #0d1424); }
.jc-turbo-art::before { content:""; position:absolute; inset:auto 0 0; height:45%; background:repeating-linear-gradient(90deg, #2f7a3a 0 11px, #2a6f35 11px 22px); }
.jc-turbo-art i { position:absolute; bottom:16px; width:24px; height:10px; border-radius:4px 7px 2px 2px; }
.jc-turbo-art i.is-blue { left:10px; background:#3d86ff; } .jc-turbo-art i.is-orange { right:10px; background:#ff8a2a; border-radius:7px 4px 2px 2px; }
.jc-turbo-art b { position:absolute; left:50%; top:12px; width:16px; height:16px; margin-left:-8px; border-radius:50%; background:#e9edf2; box-shadow:0 0 10px rgba(255,255,255,.5); }
@media (max-width: 520px) { .jc-turbo { flex-wrap:wrap; } .jc-turbo .jc-cta { width:100%; } }