/* Shared chrome for the sign in, sign up and profile pages. */

.authwrap{max-width:var(--maxw);margin:0 auto;padding:34px 22px 70px;
          display:flex;flex-direction:column;align-items:center;gap:16px}
.authcard{width:min(400px,100%)}

.form{display:flex;flex-direction:column;gap:10px;padding:15px}
.form label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.form input{
  font:inherit;font-size:14px;background:var(--panel-2);color:var(--ink);
  border:1px solid var(--line);border-radius:var(--r);padding:10px 11px;width:100%;
}
.form input:focus{outline:2px solid var(--accent);outline-offset:1px}
.form .note{font-size:13px;color:var(--muted);line-height:1.6}
.form .hint{font-size:11px;color:var(--muted);margin-top:-4px}

.msg{font-size:12.5px;padding:9px 11px;border-radius:var(--r);display:none;line-height:1.5}
.msg.show{display:block}
.msg.bad{color:var(--danger);border:1px solid var(--danger);
         background:color-mix(in srgb,var(--danger) 10%,transparent)}
.msg.good{color:var(--accent);border:1px solid var(--accent);
          background:color-mix(in srgb,var(--accent) 10%,transparent)}

.authfoot{
  border-top:1px solid var(--line);padding:12px 15px;
  font-size:12.5px;color:var(--muted);text-align:center;
}
.authfoot a{color:var(--ink);text-decoration:underline}
.authnote{color:var(--muted);font-size:12px;line-height:1.6;max-width:52ch;text-align:center}

/* ---- profile ------------------------------------------------------------ */
.phead{display:flex;align-items:center;gap:16px;padding:18px 0 6px;flex-wrap:wrap}
.avatar{
  width:62px;height:62px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:linear-gradient(145deg,#ffd98a,#c9922a);color:#3d2a06;
  font-size:19px;font-weight:800;letter-spacing:.06em;
  box-shadow:0 0 26px -6px #c9922a;
}
.phead .who b{display:block;font-size:24px;color:var(--ink);font-weight:600;letter-spacing:-.01em}
.phead .who span{font-size:12px;color:var(--muted)}
.phead .act{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}

.tiles{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));padding:14px 0}
.tile2{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px}
.tile2 b{display:block;font-size:23px;color:var(--ink);font-weight:600;letter-spacing:-.02em}
.tile2 span{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.tile2.pos b{color:var(--accent)}

.gamerow{display:flex;align-items:center;gap:12px;padding:13px 15px;border-bottom:1px solid var(--line-soft)}
.gamerow:last-child{border-bottom:0}
.gamerow .art{width:52px;height:33px;flex:none;border-radius:4px;overflow:hidden;
              background:var(--art-bg);color:var(--game);border:1px solid var(--line)}
.gamerow .art svg{width:100%;height:100%}
.gamerow .nm{min-width:0}
.gamerow .nm b{display:block;color:var(--ink);font-size:14px;font-weight:600}
.gamerow .nm span{font-size:11px;color:var(--muted)}
.gamerow .figs{margin-left:auto;display:flex;gap:20px;text-align:right;flex-wrap:wrap}
.gamerow .figs div b{display:block;color:var(--ink);font-size:14px;font-weight:600}
.gamerow .figs div span{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.gamerow .figs .rank b{color:var(--accent)}

@media (max-width:620px){
  .gamerow{flex-wrap:wrap}
  .gamerow .figs{margin-left:0;width:100%;gap:16px;text-align:left}
  .phead .act{margin-left:0;width:100%}
}