/* Accounts on zei.st: the sign-in sheet, account buttons, player marks, and the welcome, profile and settings pages.
   Colours follow design/tokens.json (the dark room). Loaded by the landing and by public/_app/ pages. */
:root{--ground:#12110e;--raised:#1c1a16;--text:#f4f1ea;--text2:rgb(244 241 234 / .66);--text3:rgb(244 241 234 / .42);--line:rgb(244 241 234 / .12);--wash:rgb(244 241 234 / .07);--piece-white:#eee7d6;--piece-black:#1c1b18;--ok:#8fcf9f;--bad:#f4888f}

.zpill{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:42px;padding:0 19px;border-radius:999px;border:1px solid rgb(244 241 234 / .2);font:500 14px/1 Jost,system-ui,sans-serif;color:var(--text);background:rgb(18 17 14 / .4);cursor:pointer;text-decoration:none;transition:border-color .25s,background .25s;white-space:nowrap}

.zpill.solid{background:var(--text);color:var(--ground);border-color:var(--text)}

.zpill.big{height:52px;width:100%;font-size:15px}
.zpill[disabled]{opacity:.4;cursor:default}
.zpill.danger{color:var(--bad);border-color:rgb(244 136 143 / .35)}

/* The account buttons on the landing: under the paragraph on wide screens, top right on phones. */
.zacct{display:flex;gap:10px;align-items:center}
.zacct[hidden]{display:none}
.zme{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 16px 0 5px;border-radius:999px;background:rgb(24 22 19 / .55);-webkit-backdrop-filter:blur(20px) saturate(125%);backdrop-filter:blur(20px) saturate(125%);border:1px solid rgb(244 241 234 / .12);font:500 14px/1 Jost,system-ui,sans-serif;color:var(--text);text-decoration:none}
.zme svg{display:block}

/* The sign-in sheet: a dialog in the middle on wide screens, a sheet from the bottom on phones. */
.zsh-back{position:fixed;inset:0;z-index:40;background:rgb(10 9 7 / .62);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .35s}
.zsh{position:fixed;z-index:41;left:50%;top:50%;width:min(420px,calc(100vw - 32px));translate:-50% -46%;opacity:0;pointer-events:none;background:var(--raised);border:1px solid rgb(244 241 234 / .12);border-radius:28px;padding:30px 28px 26px;color:var(--text);font:400 16px/1.5 Jost,system-ui,sans-serif;transition:opacity .35s,translate .5s cubic-bezier(.16,1,.3,1)}
.zsh.open,.zsh-back.open{opacity:1;pointer-events:auto}.zsh.open{translate:-50% -50%}
.zsh h2{font:400 30px/1.1 Prata,Georgia,serif;margin:0 0 8px}
.zsh .sub{color:var(--text2);font-size:15px;margin:0 0 22px}
.zsh .bs{display:flex;flex-direction:column;gap:10px}
.zsh .fine{color:var(--text3);font-size:13px;margin:18px 0 0}
.zsh .x{position:absolute;top:14px;right:14px;width:40px;height:40px;border-radius:50%;border:0;background:none;color:var(--text2);font-size:22px;cursor:pointer}
@media (max-width:699px),(orientation:portrait){
 .zsh{left:0;right:0;top:auto;bottom:0;width:auto;translate:0 40px;border-radius:28px 28px 0 0;border-bottom:0;padding:28px 6vw calc(30px + env(safe-area-inset-bottom))}
 .zsh.open{translate:0 0}
}
@media (prefers-reduced-motion:reduce){.zsh,.zsh-back{transition:none}}

/* Pages: welcome, profile, settings */
.zpage{margin:0;min-height:100dvh;background:var(--ground);color:var(--text);font:400 17px/1.5 Jost,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
.zpage *{box-sizing:border-box}
.zpage h1,.zpage h2{font-family:Prata,Georgia,serif;font-weight:400;margin:0}
.zpage p{margin:0}
.zpage a{color:inherit}
.ztop{display:flex;align-items:center;justify-content:space-between;height:72px;max-width:760px;margin:0 auto;padding:0 max(22px,env(safe-area-inset-left))}
.ztop .wm{font:400 26px/1 Prata,Georgia,serif;text-decoration:none;display:inline-flex;align-items:baseline}
.ztop .wm svg{width:.8em;height:.8em;margin-right:.255em;overflow:visible}
.zwrap{max-width:760px;margin:0 auto;padding:12px max(22px,env(safe-area-inset-left)) 96px}
.zdim{color:var(--text2)}.zfaint{color:var(--text3)}
.zlabel{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--text3)}
.zcard{background:var(--raised);border:1px solid var(--line);border-radius:24px;padding:22px}
.zfield{display:flex;align-items:center;height:58px;border-radius:16px;background:var(--raised);border:1px solid rgb(244 241 234 / .16);padding:0 18px;font-size:19px}
.zfield:focus-within{border-color:rgb(244 241 234 / .5)}
.zfield .pre{color:var(--text3)}
.zfield input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--text);font:inherit;padding:0}
.znote{font-size:14px;margin-top:10px;min-height:1.5em;color:var(--text2)}
.znote.ok{color:var(--ok)}.znote.bad{color:var(--bad)}
.zrow{display:flex;align-items:center;gap:16px}
.zgrow{flex:1;min-width:0}

/* Profile */
.zprof{display:flex;align-items:center;gap:22px;margin-top:28px}
.zprof h1{font-size:clamp(36px,7vw,52px);line-height:1.05;overflow-wrap:anywhere;text-wrap:balance}
/* A long name (over 16 letters) gets a smaller title, so a long word breaks once at most. */
.zprof h1.long{font-size:clamp(26px,5vw,36px)}
.zstats{display:flex;flex-wrap:wrap;gap:4px 20px;margin-top:10px;color:var(--text2);font-size:15px}.zstats span{white-space:nowrap}
.zstats b{color:var(--text);font-weight:500}
.zlinks{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.zchip{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--line);font-size:14px;text-decoration:none;color:var(--text)}
button.zchip{background:none;font:500 14px/1 Jost,system-ui,sans-serif;cursor:pointer}button.zchip[disabled]{opacity:.4}

.zchip .k{color:var(--text3)}
.zchip .v{color:var(--ok);font-size:12px}
.zacts{display:flex;gap:10px;margin-top:28px;flex-wrap:wrap}
.zempty{margin-top:44px;padding:28px;border-radius:24px;border:1px dashed var(--line);color:var(--text2)}
.zquiet{background:none;border:0;color:var(--text3);font:inherit;font-size:14px;cursor:pointer;padding:8px 0}


/* Settings */
.zsec{margin-top:44px}
.zsec h2{font-size:26px;margin-bottom:6px}
.zsec .zfield{margin-top:14px}
.zline{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0;border-top:1px solid var(--line)}
.zline:first-of-type{border-top:0}
.zswitch{position:relative;width:52px;height:32px;border-radius:999px;background:rgb(244 241 234 / .16);border:0;cursor:pointer;transition:background .25s;flex:none}
.zswitch::after{content:"";position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:var(--text);transition:translate .25s}
.zswitch[aria-checked="true"]{background:var(--ok)}.zswitch[aria-checked="true"]::after{translate:20px 0}
.zlinkrow{display:grid;grid-template-columns:110px 1fr;align-items:center;gap:12px;margin-top:10px}
.zlinkrow .zfield{height:48px;font-size:16px;margin:0}
@media (max-width:520px){.zlinkrow{grid-template-columns:1fr;gap:4px}}
.ztoast{position:fixed;left:50%;bottom:24px;translate:-50% 20px;opacity:0;background:var(--raised);border:1px solid var(--line);border-radius:999px;padding:10px 18px;font-size:14px;transition:opacity .3s,translate .3s;pointer-events:none}
.ztoast.on{opacity:1;translate:-50% 0}

/* Privacy and terms */
.zlegal p,.zlegal li{color:var(--text2);line-height:1.65;margin:0 0 12px}
.zlegal ul{padding-left:1.2em}
.zlegal table{border-collapse:collapse;width:100%;font-size:15px;margin:8px 0 12px}
.zlegal td{border-top:1px solid var(--line);padding:10px 10px 10px 0;vertical-align:top;color:var(--text2)}
.zlegal td:first-child{color:var(--text);width:34%}

/* The signed-in sidebar (shell.js): wide screens only. Phones keep each page's own header. */
.zside{display:none}
@media (min-width:900px){
 body.zshelled{padding-left:248px}
 body.zshelled .ztop{display:none}
 .zside{position:fixed;z-index:5;left:0;top:0;bottom:0;width:248px;display:flex;flex-direction:column;padding:26px 16px 18px;background:rgb(22 21 18 / .72);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-right:1px solid rgb(244 241 234 / .1);color:#f4f1ea;font:400 15px/1.45 Jost,system-ui,sans-serif}
 .zside a{color:inherit;text-decoration:none}
 .zs-brand{display:inline-flex;align-items:center;gap:10px;padding:0 10px;font:400 27px/1 Prata,Georgia,serif}
 .zs-brand svg{width:22px;height:22px;display:block}
 .zs-nav{margin-top:34px;display:flex;flex-direction:column;gap:2px}
 .zs-nav a{display:flex;align-items:center;gap:12px;height:42px;padding:0 12px;border-radius:12px;color:rgb(244 241 234 / .66);font-weight:500}
 .zs-nav a:hover{background:rgb(244 241 234 / .04);color:#f4f1ea}
 .zs-nav a.on{background:rgb(244 241 234 / .08);color:#f4f1ea}
 .zs-nav a i{margin-left:auto;font-style:normal;font-size:12px;color:rgb(244 241 234 / .42);font-weight:400}
 .zs-nav .dot{width:7px;height:7px;border-radius:50%;background:#ffbb2e;margin-left:auto}
 .zs-grow{flex:1}
 .zs-me{display:flex;align-items:center;gap:11px;padding:10px;border-radius:14px;min-width:0}
 .zs-me:hover,.zs-me.on{background:rgb(244 241 234 / .05)}
 .zs-me svg{flex:none;display:block}
 .zs-me span{min-width:0}.zs-me b{display:block;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.zs-me small{display:block;color:rgb(244 241 234 / .42);font-size:12.5px}
 .zs-foot{display:flex;flex-wrap:wrap;gap:6px 14px;padding:12px 10px 0;font-size:12.5px;color:rgb(244 241 234 / .42)}
 .zs-foot a:hover,.zs-foot button:hover,.zs-foot a.on{color:rgb(244 241 234 / .66)}
 .zs-foot button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
 .zside :focus-visible{outline:2px solid #f4f1ea;outline-offset:3px;border-radius:12px}
}
@media (hover:hover) and (pointer:fine){.zpill:hover{border-color:rgb(244 241 234 / .4)}.zpill.solid:hover{background:#fff}.zchip:hover{border-color:rgb(244 241 234 / .35)}.zquiet:hover{color:var(--text)}}

/* Feeling native on a phone (Emil Kowalski's mobile-native rules): no grey flash on tap, no 300ms wait,
   no long-press text selection on controls, and an immediate press response, since hover never comes on touch. */
html{-webkit-tap-highlight-color:transparent}
a,button,[role="button"],summary,label{touch-action:manipulation}
.zpill,.zchip,.zquiet,.zme,.zs-nav a,.zs-me,.zs-foot a,.zs-foot button,.zcon button{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.zpill,.zchip,.zme{transition:transform 120ms cubic-bezier(.23,1,.32,1),background .2s,border-color .2s}
.zpill:active,.zchip:active,.zme:active{transform:scale(.97)}
@media (prefers-reduced-motion:reduce){.zpill,.zchip,.zme{transition:none}.zpill:active,.zchip:active,.zme:active{transform:none}}
/* Signed out with games kept in this browser: one quiet line under the buttons. */
.zacct:has(.zguest){flex-wrap:wrap}
.zguest{flex-basis:100%;margin:10px 0 0;font-size:14px;color:var(--dim, rgb(244 241 234 / .66))}
/* A rank on a profile or board (docs/PROGRESS.md): the name in Prata, New in small capitals. */
.zrank{font-family:Prata,Georgia,serif;font-size:19px;white-space:nowrap}.zrank.new{font-family:Jost,sans-serif;font-size:11.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--dim, rgb(244 241 234 / .66))}