/* Accounts, social UI and hub pages — krischambers.co.uk/games */
:root{
  --acc-ink:#1b2a22; --acc-muted:#5a6f63; --acc-line:#e3e8e5; --acc-soft:#eef3f0; --acc-green:#0c4a2e; --acc-green2:#146b43;
  --acc-red:#c62828; --acc-blue:#1e88e5; --acc-online:#4caf50;
}

/* ---------- avatars ---------- */
.av{--s:36px;width:var(--s);height:var(--s);border-radius:50%;flex:none;display:inline-grid;place-items:center;position:relative;
  font:700 calc(var(--s)*.4)/1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:#fff;background:#5c6bc0;overflow:visible;
  box-shadow:0 0 0 2px rgba(255,255,255,.85);text-transform:uppercase;user-select:none}
.av img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.av .dot{position:absolute;right:-1px;bottom:-1px;width:calc(var(--s)*.3);height:calc(var(--s)*.3);min-width:9px;min-height:9px;border-radius:50%;
  background:var(--acc-online);box-shadow:0 0 0 2px var(--felt-dark,#0c4a2e)}
.av.c0{background:#e53935}.av.c1{background:#d81b60}.av.c2{background:#8e24aa}.av.c3{background:#5e35b1}.av.c4{background:#3949ab}.av.c5{background:#1e88e5}
.av.c6{background:#00897b}.av.c7{background:#43a047}.av.c8{background:#7cb342}.av.c9{background:#f4511e}.av.c10{background:#6d4c41}.av.c11{background:#546e7a}

/* ---------- header user chip ---------- */
.uchip{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:2px 4px 2px 2px;border-radius:24px;background:rgba(255,255,255,.1);
  color:var(--ink,#f3f7f4);border:0;cursor:pointer;font:600 14px system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;position:relative;flex:none}
.uchip .nm{max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:6px}
.uchip .bdg{position:absolute;top:-3px;left:24px;min-width:18px;height:18px;border-radius:9px;background:#e53935;color:#fff;font:700 11px/18px system-ui,sans-serif;text-align:center;padding:0 4px;box-shadow:0 0 0 2px var(--felt-dark,#0c4a2e)}
.uchip.login{padding:0 14px;gap:8px;background:var(--gold,#ffd54f);color:#3b2a00}
@media (max-width:480px){ .uchip .nm{display:none} .uchip{padding:2px} .uchip.login .txt{display:none} .uchip.login{padding:0 12px} }

.umenu{position:fixed;z-index:85;min-width:220px;background:#fdfcf8;color:var(--acc-ink);border-radius:14px;box-shadow:0 14px 40px rgba(0,0,0,.45);padding:6px;
  animation:acc-pop .14s ease-out}
.umenu .hd{display:flex;align-items:center;gap:10px;padding:10px 10px 12px;border-bottom:1px solid var(--acc-line);margin-bottom:4px}
.umenu .hd b{display:block;font-size:15px}
.umenu .hd small{color:var(--acc-muted)}
.umenu a,.umenu button{display:flex;align-items:center;gap:12px;width:100%;padding:11px 12px;border-radius:10px;background:none;color:inherit;text-decoration:none;
  font:500 15px system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;border:0;text-align:left;min-height:44px;cursor:pointer}
.umenu a:hover,.umenu button:hover{background:var(--acc-soft)}
.umenu i{width:18px;text-align:center;color:var(--acc-green2)}
.umenu .n{margin-left:auto;background:#e53935;color:#fff;border-radius:9px;font-size:12px;padding:1px 7px}
@keyframes acc-pop{from{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:none}}

/* ---------- account modal layer (sits above game modals) ---------- */
html.amodal-open,html.amodal-open body{overflow:hidden}
.amodal button,.umenu button{border:0;font-family:inherit}
.amodal .atabs button{font:600 15px system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.amodal{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;padding:16px;
  padding-bottom:calc(16px + env(safe-area-inset-bottom,0px));animation:acc-fade .15s}
@keyframes acc-fade{from{opacity:0}}
.amodal .abox{background:#fdfcf8;color:var(--acc-ink);border-radius:18px;width:100%;max-width:420px;max-height:calc(100dvh - 32px);overflow:auto;
  box-shadow:0 20px 50px rgba(0,0,0,.5);padding:22px 22px 20px;position:relative;animation:acc-pop .18s ease-out;-webkit-user-select:text;user-select:text}
.amodal .abox.wide{max-width:520px}
.amodal h2{margin:0 0 4px;font-size:22px;color:var(--acc-green)}
.amodal .sub{margin:0 0 16px;color:var(--acc-muted);font-size:14px;line-height:1.45}
.amodal .x{position:absolute;top:10px;right:10px;width:40px;height:40px;min-height:40px;border-radius:50%;background:transparent;color:var(--acc-muted);font-size:18px;padding:0}
.amodal .x:hover{background:var(--acc-soft)}
@media (max-width:520px){
  .amodal{align-items:flex-end;padding:0}
  .amodal .abox{max-width:none;border-radius:20px 20px 0 0;padding-bottom:calc(20px + env(safe-area-inset-bottom,0px));max-height:94dvh;animation:acc-up .22s ease-out}
}
@keyframes acc-up{from{transform:translateY(40px);opacity:.4}}

/* tabs inside the auth modal */
.atabs{display:flex;background:var(--acc-soft);border-radius:12px;padding:4px;margin:6px 0 18px}
.atabs button{flex:1;background:none;color:var(--acc-muted);border-radius:9px;min-height:40px}
.atabs button.on{background:#fff;color:var(--acc-green);box-shadow:0 1px 4px rgba(0,0,0,.12)}

/* ---------- forms ---------- */
.af{display:flex;flex-direction:column;gap:14px}
.fld label{display:block;font:700 13px system-ui,sans-serif;color:#3b5347;margin:0 0 6px}
.fld .in{position:relative;display:flex;align-items:center}
.fld .in > i.lead{position:absolute;left:13px;color:#8aa396;pointer-events:none;font-size:15px}
.fld input,.fld textarea{font:16px system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;width:100%;padding:12px 12px 12px 40px;border-radius:12px;
  border:1.5px solid #c6d4cc;background:#fff;color:var(--acc-ink);outline:none;transition:border-color .15s, box-shadow .15s;min-height:48px}
.fld textarea{padding-left:12px;resize:vertical;min-height:80px;line-height:1.4}
.fld input:focus,.fld textarea:focus{border-color:var(--acc-green2);box-shadow:0 0 0 3px rgba(20,107,67,.15)}
.fld.bad input,.fld.bad textarea{border-color:var(--acc-red);box-shadow:0 0 0 3px rgba(198,40,40,.1)}
.fld .eye{position:absolute;right:4px;width:40px;height:40px;min-height:40px;padding:0;border-radius:10px;background:none;color:#8aa396;font-size:16px}
.fld .eye:hover{color:var(--acc-green)}
.fld .err{display:none;align-items:flex-start;gap:6px;color:var(--acc-red);font-size:13px;margin-top:6px;line-height:1.35}
.fld.bad .err{display:flex}
.fld .hint{color:var(--acc-muted);font-size:12.5px;margin-top:6px}
.fld .count{float:right;font-weight:500;color:var(--acc-muted)}
.chk{display:flex;align-items:center;gap:10px;font-size:14px;color:#3b5347;cursor:pointer;min-height:40px}
.chk input{width:20px;height:20px;accent-color:var(--acc-green2)}
.formerr{display:none;align-items:center;gap:8px;background:#fdecea;color:#8e1c1c;border-radius:10px;padding:10px 12px;font-size:14px}
.formerr.show{display:flex}
.abtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 18px;border-radius:12px;border:0;cursor:pointer;
  font:700 15px system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--acc-green);color:#fff;transition:transform .1s, opacity .2s, background .2s;text-decoration:none}
.abtn:active{transform:scale(.97)}
.abtn:disabled{opacity:.55;cursor:default}
.abtn.block{width:100%}
.abtn.soft{background:var(--acc-soft);color:var(--acc-green)}
.abtn.danger{background:var(--acc-red)}
.abtn.gold{background:var(--gold,#ffd54f);color:#3b2a00}
.abtn.small{min-height:38px;padding:0 12px;font-size:14px;border-radius:10px}
.abtns{display:flex;gap:10px;margin-top:6px}
.abtns .abtn{flex:1}
.strength{height:4px;border-radius:2px;background:var(--acc-line);margin-top:8px;overflow:hidden}
.strength i{display:block;height:100%;width:0;transition:width .2s, background .2s}
.linkbtn{background:none;border:0;color:var(--acc-green2);font:600 14px system-ui,sans-serif;padding:6px 2px;cursor:pointer;min-height:0;text-decoration:underline}

/* avatar editor */
.avedit{display:flex;flex-direction:column;align-items:center;gap:14px}
.avedit canvas{width:220px;height:220px;border-radius:50%;box-shadow:0 0 0 4px #fff,0 4px 18px rgba(0,0,0,.25);touch-action:none;cursor:grab;background:#ddd}
.avedit input[type=range]{width:220px;accent-color:var(--acc-green2)}

/* ---------- toast (account) ---------- */
.atoast{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom,0px));transform:translate(-50%,10px);z-index:90;background:#12241a;color:#fff;
  padding:12px 16px;border-radius:14px;font:500 14px system-ui,sans-serif;box-shadow:0 8px 24px rgba(0,0,0,.4);display:flex;gap:10px;align-items:center;
  opacity:0;transition:opacity .2s, transform .2s;pointer-events:none;max-width:calc(100vw - 32px)}
.atoast.show{opacity:1;transform:translate(-50%,0)}
.atoast i{color:var(--gold,#ffd54f)}

/* ---------- result strip inside the solitaire win modal ---------- */
.winnet{margin:14px 0 4px;border-radius:12px;background:var(--acc-soft);padding:12px 14px;font-size:14px;color:var(--acc-ink);display:flex;flex-direction:column;gap:8px}
.winnet .row{display:flex;align-items:center;gap:10px}
.winnet .row i{width:18px;text-align:center;color:var(--acc-green2)}
.winnet .row b{color:var(--acc-green)}
.winnet .pb{color:#8a5a00}
.winnet .pb i{color:#f9a825}
.winnet .acts{display:flex;gap:8px;flex-wrap:wrap}
.spin{animation:acc-spin 1s linear infinite}
@keyframes acc-spin{to{transform:rotate(360deg)}}

/* ---------- card design picker ---------- */
.k-h{color:var(--suit-h,#c62828)}.k-d{color:var(--suit-d,#c62828)}.k-s{color:var(--suit-s,#1b1b1b)}.k-c{color:var(--suit-c,#1b1b1b)}
.tpv{display:flex;justify-content:center;gap:6px;padding:18px 10px;border-radius:14px;margin:0 0 6px;
  background:radial-gradient(ellipse at 50% 40%,var(--felt),var(--felt-dark) 80%,var(--felt-deep));box-shadow:inset 0 2px 10px rgba(0,0,0,.35);transition:background .25s}
.tpv-card{width:48px;height:67px;border-radius:6px;background:#fffdf8;box-shadow:0 2px 6px rgba(0,0,0,.4);padding:4px 5px;flex:none}
.tpv-card b{font:700 16px/1 Georgia,"Times New Roman",serif;display:block}
.tpv-back{background:var(--back-img),var(--back);background-size:var(--back-size,auto);border:3px solid #fffdf8;transition:background-color .25s}
.tsec{margin-top:14px}
.tsec h3{font:700 13px system-ui,sans-serif;color:#3b5347;margin:0 0 8px;text-transform:uppercase;letter-spacing:.4px}
.tgrid{display:flex;flex-wrap:wrap;gap:10px}
.tsw{width:44px;height:44px;min-height:44px;border-radius:50%;padding:0;display:grid;place-items:center;color:#fff;font-size:15px;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.35),0 1px 3px rgba(0,0,0,.3);transition:transform .12s}
.tsw i{opacity:0;transition:opacity .12s;text-shadow:0 1px 2px rgba(0,0,0,.5)}
.tsw.on{box-shadow:0 0 0 3px #fdfcf8,0 0 0 5px var(--acc-green2)}
.tsw.on i{opacity:1}
.tsw:active{transform:scale(.92)}
.tpat{display:flex;flex-direction:column;align-items:center;gap:6px;background:none;color:#3b5347;font:600 12px system-ui,sans-serif;padding:0;min-height:0}
.tpat span{width:44px;height:58px;border-radius:6px;border:3px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.3)}
.tpat.on span{box-shadow:0 0 0 2px #fdfcf8,0 0 0 4px var(--acc-green2)}
.tpat.on{color:var(--acc-green)}
.tfaces{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tface{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:var(--acc-soft);color:var(--acc-ink);text-align:left;min-height:56px;
  font:600 14px system-ui,sans-serif;box-shadow:inset 0 0 0 2px transparent}
.tface b{font:700 18px Georgia,serif;letter-spacing:1px;white-space:nowrap}
.tface small{display:block;font-weight:500;font-size:11.5px;color:var(--acc-muted)}
.tface.on{box-shadow:inset 0 0 0 2px var(--acc-green2);background:#e3f1e8}
@media (max-width:380px){ .tfaces{grid-template-columns:1fr} }

/* settings toggles */
.ttog{display:flex;align-items:center;gap:12px;padding:10px 0;min-height:56px;cursor:pointer;border-top:1px solid var(--acc-line)}
.tsec h3 + .ttog{border-top:0}
.ttog > i{width:22px;text-align:center;color:var(--acc-green2);font-size:17px}
.ttog > span{flex:1;font:600 15px system-ui,sans-serif;color:var(--acc-ink)}
.ttog small{display:block;font-weight:500;font-size:12.5px;color:var(--acc-muted)}
.ttog input{position:absolute;opacity:0;width:1px;height:1px}
.ttog b{width:50px;height:30px;border-radius:15px;background:#cfd8d3;position:relative;flex:none;transition:background .15s}
.ttog b::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .15s}
.ttog input:checked + b{background:var(--acc-green2)}
.ttog input:checked + b::after{transform:translateX(20px)}
.ttog input:focus-visible + b{box-shadow:0 0 0 3px rgba(20,107,67,.35)}
.ttog.off{opacity:.55;cursor:default}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* =====================================================================
   Dark, high-contrast surfaces for every sheet, dialog and menu.
   (Overrides the light styles above; one place to tune contrast.)
   ===================================================================== */
:root{
  --m-bg:#121a16;        /* sheet background */
  --m-raise:#1d2923;     /* cards / soft buttons inside a sheet */
  --m-raise2:#26352d;
  --m-text:#f4f8f5;      /* ~16:1 on --m-bg */
  --m-muted:#b9c9bf;     /* ~10:1 */
  --m-line:rgba(255,255,255,.14);
  --m-input:#0b110e;
  --m-border:#5d7a6b;
  --m-accent:#ffd54f;    /* gold: primary buttons, focus, highlights */
  --m-accent-ink:#1d1500;
  --m-err:#ff9e94;
  --m-ok:#8be0a4;
  --acc-ink:var(--m-text); --acc-muted:var(--m-muted); --acc-line:var(--m-line); --acc-soft:var(--m-raise);
  --acc-green:var(--m-text); --acc-green2:var(--m-accent); --acc-red:#ff6f61;
}
.amodal{background:rgba(0,0,0,.72)}
.amodal .abox{background:var(--m-bg);color:var(--m-text);border:1px solid var(--m-line);box-shadow:0 24px 60px rgba(0,0,0,.7)}
.amodal h2{color:var(--m-text)}
.amodal .sub{color:var(--m-muted)}
.amodal .sub b{color:var(--m-text)}
.amodal .x{color:var(--m-muted);background:transparent}
.amodal .x:hover,.amodal .x:focus-visible{background:var(--m-raise);color:var(--m-text)}
.atabs{background:var(--m-input);border:1px solid var(--m-line)}
.atabs button{color:var(--m-muted)}
.atabs button.on{background:var(--m-raise2);color:var(--m-text);box-shadow:inset 0 0 0 1px var(--m-border)}
.fld label{color:var(--m-text)}
.fld input,.fld textarea{background:var(--m-input);color:var(--m-text);border-color:var(--m-border)}
.fld input::placeholder,.fld textarea::placeholder{color:#7f9788}
.fld .in > i.lead,.fld .eye{color:#9fb5a8}
.fld .eye:hover{color:var(--m-text)}
.fld input:focus,.fld textarea:focus{border-color:var(--m-accent);box-shadow:0 0 0 3px rgba(255,213,79,.25)}
.fld.bad input,.fld.bad textarea{border-color:var(--m-err);box-shadow:0 0 0 3px rgba(255,158,148,.18)}
.fld .err{color:var(--m-err)}
.fld .hint,.fld .count{color:var(--m-muted)}
.chk{color:var(--m-text)}
.chk input{accent-color:var(--m-accent)}
.formerr{background:rgba(255,111,97,.14);color:#ffd4cf;border:1px solid rgba(255,111,97,.5)}
.abtn{background:var(--m-accent);color:var(--m-accent-ink)}
.abtn.soft{background:var(--m-raise2);color:var(--m-text);box-shadow:inset 0 0 0 1px var(--m-line)}
.abtn.danger{background:#e53935;color:#fff}
.abtn.gold{background:var(--m-accent);color:var(--m-accent-ink)}
.abtn:focus-visible,.amodal button:focus-visible,.umenu a:focus-visible,.umenu button:focus-visible{outline:3px solid var(--m-accent);outline-offset:2px}
.linkbtn{color:var(--m-accent)}
.strength{background:var(--m-raise2)}
/* account menu */
.umenu{background:var(--m-bg);color:var(--m-text);border:1px solid var(--m-line);box-shadow:0 16px 44px rgba(0,0,0,.65)}
.umenu .hd{border-bottom-color:var(--m-line)}
.umenu .hd small{color:var(--m-muted)}
.umenu a:hover,.umenu button:hover{background:var(--m-raise)}
.umenu i{color:var(--m-accent)}
/* settings sheet */
.tsec h3{color:var(--m-muted)}
.tsw.on{box-shadow:0 0 0 3px var(--m-bg),0 0 0 5px var(--m-accent)}
.tpat{color:var(--m-muted)}
.tpat.on{color:var(--m-text)}
.tpat.on span{box-shadow:0 0 0 2px var(--m-bg),0 0 0 4px var(--m-accent)}
.tface{background:var(--m-raise);color:var(--m-text)}
.tface b{background:#fffdf8;border-radius:6px;padding:2px 6px}
.tface.on{background:var(--m-raise2);box-shadow:inset 0 0 0 2px var(--m-accent)}
.ttog{border-top-color:var(--m-line)}
.ttog > span{color:var(--m-text)}
.ttog > i{color:var(--m-accent)}
.ttog b{background:#44574c}
.ttog input:checked + b{background:var(--m-accent)}
.ttog input:checked + b::after{background:#1d1500}
/* result strip in the win dialog */
.winnet{background:var(--m-raise);color:var(--m-text);border:1px solid var(--m-line)}
.winnet .row b{color:var(--m-text)}
.winnet .row i{color:var(--m-accent)}
.winnet .pb,.winnet .pb b{color:var(--m-accent)}

/* friend-match invite sheet */
.mvgames,.mvlist{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.mvlist{max-height:44dvh;overflow-y:auto;overflow-x:hidden}
.mvgame,.mvf{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:12px;border-radius:14px;background:var(--m-raise);color:var(--m-text);min-height:60px;cursor:pointer}
.mvgame > i:first-child{font-size:22px;color:var(--m-accent);width:28px;text-align:center}
.mvgame > span:not(.av),.mvf > span:not(.av){flex:1;min-width:0}
.mvf .av{flex:none}
.mvgame b,.mvf b{display:block;font-size:15.5px}
.mvgame small,.mvf small{display:block;color:var(--m-muted);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mvf > i{font-size:20px;color:#5d7a6b}
.mvf.on{box-shadow:inset 0 0 0 2px var(--m-accent);background:var(--m-raise2)}
.mvf.on > i{color:var(--m-accent)}
.mvcol{display:flex;gap:8px;flex-wrap:wrap}
.mvcol button{flex:1;min-height:44px;border-radius:12px;background:var(--m-raise);color:var(--m-text);font:600 14px system-ui,sans-serif}
.mvcol button.on{background:var(--m-accent);color:var(--m-accent-ink)}

/* slim dark scrollbars everywhere (no chunky grey system bars) */
html{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.28) transparent}
*{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.28) transparent}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track,::-webkit-scrollbar-corner{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.28);border-radius:6px}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.45)}
::-webkit-scrollbar-button{display:none;width:0;height:0}