/* PlayVault PvP client: app shell + shared primitives, in the gold style.
   Every colour, size and space comes from /game/core/base.css (--gold-*, --ink-*, --stone-400, --ivory-*, --hair*, --font-*, --fs-*, --sp-*, --radius-*).
   Shared helpers other modules may rely on: .page-h, .eyebrow, .gold-t, .tile, .skel, .rpill(.win|.loss|.draw|.void), .sr-only, .t-label,
   .dg-box (card), .dg-stat, .dg-chip, .dg-btn(.primary|.ghost|.danger|.xl|.sm), .dg-link, .field, .chips, .list .row, .mono-box, .grid2, .grid3,
   .notice, .err, .sub, .dg-note, .toast, .sec (editorial section), vars --sb-w --top-h --bar-h --pad-x.
   Rules this file follows: corners 0-4px, 1px hairlines instead of shadows, no glass / glow / mosaic, solid gold only for the one primary action. */
:root{
  --sb-w:240px;--top-h:68px;--bar-h:0px;
  --pad-x:clamp(20px,3.4vw,48px);
  --text-2:color-mix(in srgb,var(--ivory-100) 78%,var(--ink-950)); /* softer ivory for long reading text (about 10:1 on ink-950) */
  --field-line:color-mix(in srgb,var(--stone-400) 45%,var(--ink-600)); /* control outlines: 3.3:1 on the card and input fills (the plain hairline is 2:1, fine for dividers only) */
  --danger-wash:color-mix(in srgb,var(--danger) 10%,transparent);
  --shadow-warm:0 18px 40px -22px rgba(12,11,9,.9);               /* the only shadow: floating menus and toasts */
  /* names older rules still use, pointed at the system */
  --card-r:var(--radius-2);--card-in-r:var(--radius-1);--card-bg:var(--ink-900);--card-in:var(--ink-950);--soft:var(--stone-400);
}
html,body{margin:0}
html{scroll-padding-top:calc(var(--top-h) + 24px)}
body{min-height:100vh;overflow-x:hidden}
/* signed-out and in-game: no sidebar */
body[data-view=signin],body[data-view=play]{--sb-w:0px}
body[data-view=signin] #nav,body[data-view=play] #nav{display:none}
.pad{padding:24px 16px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:12px;top:-60px;z-index:100;background:var(--gold-500);color:var(--ink-950);padding:12px 18px;border-radius:var(--radius-1);font:600 12px/1 var(--font-body);letter-spacing:var(--label-track);text-transform:uppercase;text-decoration:none}
.skip:focus-visible{top:calc(env(safe-area-inset-top,0px) + 8px)}
option{background:var(--ink-800);color:var(--ivory-100)}

/* ------------------------------------------------------------ top bar */
.top{position:fixed;top:0;left:0;right:0;z-index:45;height:calc(var(--top-h) + env(safe-area-inset-top,0px));padding:env(safe-area-inset-top,0px) max(var(--pad-x),env(safe-area-inset-right,0px)) 0 0;
  display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--ink-950);border-bottom:1px solid var(--hair)}
/* the wordmark column is as wide as the sidebar, so the nav labels line up under it */
.top-brand{align-self:stretch;flex:none;display:flex;align-items:center;min-width:var(--sb-w);padding-left:max(28px,calc(env(safe-area-inset-left,0px) + 16px));
  font-family:var(--font-display);font-weight:600;font-size:32px;line-height:1;letter-spacing:-.005em;color:var(--ivory-100);text-decoration:none;white-space:nowrap}
/* the one metallic gradient on the screen: the ".gold" in the logo */
.top-brand b{font-weight:600;color:var(--gold-500)}
body[data-view=signin] .top-brand,body[data-view=play] .top-brand{min-width:0;padding-left:max(var(--pad-x),calc(env(safe-area-inset-left,0px) + 16px))}
body[data-view=signin] .top-brand{padding-left:max(var(--pad-x),calc((100vw - 1280px)/2 + var(--pad-x)))}
.top-right{display:flex;align-items:center;justify-content:flex-end;gap:var(--sp-24);min-width:0;max-width:100%}
.top-right>*{flex:none}
.top-right>.pill{flex:none} /* the balance never gives up space; the network badge does */

/* network badge: a small hairline tag next to the wordmark. Real money gets the gold frame; a test network stays stone. */
.top-net{flex:0 1 auto;min-width:0;margin-right:auto;display:flex;align-items:center;overflow:hidden}
.top-net:empty{display:none}
.net-tag{display:inline-flex;align-items:center;gap:8px;min-height:26px;padding:0 10px;border:1px solid var(--hair-strong);border-radius:var(--radius-1);
  font:500 11px/1 var(--font-body);letter-spacing:var(--label-track);text-transform:uppercase;color:var(--stone-400);white-space:nowrap;cursor:default}
.net-tag i{width:6px;height:6px;flex:none;background:var(--stone-400)}
.net-tag.real{border-color:var(--hair-gold);color:var(--gold-300)}
.net-tag.real i{background:var(--gold-500)}
.net-tag .nt-short{display:none}

/* Join: a quiet text link with an underline reveal */
.top-join{position:relative;display:inline-flex;align-items:center;gap:8px;min-width:44px;min-height:44px;padding:0 2px;border:0;background:none;color:var(--stone-400);
  font:500 12px/1 var(--font-body);letter-spacing:var(--label-track);text-transform:uppercase;text-decoration:none;white-space:nowrap;transition:color var(--dur-1) var(--ease)}
.top-join .ico{width:18px;height:18px;flex:none;stroke-width:1.5;color:var(--gold-500)}
.top-join::after{content:"";position:absolute;left:2px;right:2px;bottom:9px;height:1px;background:var(--gold-500);transform:scaleX(0);transform-origin:left;transition:transform var(--dur-2) var(--ease)}
.top-join:hover:not(:disabled):not([aria-current=page]){color:var(--ivory-100)}
.top-join:hover:not(:disabled)::after,.top-join[aria-current=page]::after{transform:scaleX(1)}
.top-join[aria-current=page]{color:var(--gold-500)}
.top-join:disabled{opacity:.4;cursor:not-allowed}

/* balance: typography only, no box */
.top .pill{position:relative;display:grid;grid-template-columns:auto auto;justify-content:start;align-content:center;align-items:baseline;column-gap:6px;min-height:44px;padding:0 2px;
  border:0;border-radius:0;background:none;color:var(--ivory-100);text-decoration:none;white-space:nowrap}
.top .pill .lbl{grid-column:1/-1;font:500 11px/1.2 var(--font-body);letter-spacing:var(--label-track);text-transform:uppercase;color:var(--stone-400)}
.top .pill b{font-weight:500;font-size:19px;line-height:1.2;color:var(--ivory-100);min-width:max-content;transition:color var(--dur-1) var(--ease)}
.top .pill em{font-style:normal;font:500 12px/1.2 var(--font-body);letter-spacing:.08em;color:var(--stone-400)}
.top a.pill:hover b{color:var(--gold-300)}

/* Deposit / Open lobby / Invite: gold outline, uppercase label */
.top-add{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border:1px solid var(--gold-500);border-radius:var(--radius-1);background:transparent;color:var(--gold-500);
  font:600 12px/1 var(--font-body);letter-spacing:var(--label-track);text-transform:uppercase;white-space:nowrap;transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease)}
.top-add .ico{width:16px;height:16px;flex:none;stroke-width:1.6}
.top-add:hover:not(:disabled){background:var(--gold-soft);color:var(--gold-300);border-color:var(--gold-300)}
.top-add:disabled{opacity:.5;cursor:progress}

/* avatar + account menu */
.acct{position:relative;flex:none}
.top-avatar{display:grid;place-items:center;width:44px;height:44px;padding:0;border-radius:50%;border:1px solid var(--hair-strong);background:var(--ink-800);transition:border-color var(--dur-1) var(--ease)}
.top-avatar:hover,.top-avatar[aria-expanded=true]{border-color:var(--gold-500)}
.top-avatar .ava{display:block;border-radius:50%}
.acct-menu{position:absolute;right:0;top:calc(100% + 10px);width:min(300px,calc(100vw - 24px));padding:8px;border-radius:var(--radius-2);background:var(--ink-900);border:1px solid var(--hair-strong);
  box-shadow:var(--shadow-warm);z-index:60;animation:dgFade var(--dur-1) var(--ease)}
.acct-menu[hidden]{display:none}
@keyframes dgFade{from{opacity:0}}
.acct-id{display:flex;gap:14px;align-items:center;padding:10px 10px 16px;border-bottom:1px solid var(--hair);margin-bottom:6px;min-width:0}
.acct-id div{display:grid;min-width:0}
.acct-id b{font-weight:500;font-size:16px;overflow-wrap:anywhere}
.acct-id span.dg-mono{font-size:13px;color:var(--stone-400)}
.acct-ava{flex:none;display:grid;place-items:center;border-radius:50%;border:1px solid var(--hair-strong);background:var(--ink-800);padding:0;line-height:0}
.acct-ava .ava{border-radius:50%}
.acct-item{display:flex;align-items:center;gap:14px;width:100%;min-height:44px;padding:0 10px;border:0;border-radius:var(--radius-1);background:none;color:var(--text-2);
  font:500 12px/1 var(--font-body);letter-spacing:var(--label-track);text-transform:uppercase;text-decoration:none;text-align:left;transition:color var(--dur-1) var(--ease),background var(--dur-1) var(--ease)}
.acct-item .ico{width:18px;height:18px;flex:none;stroke-width:1.5;color:var(--stone-400);transition:color var(--dur-1) var(--ease)}
.acct-item:hover{background:var(--ink-800);color:var(--gold-300)}
.acct-item:hover .ico{color:var(--gold-300)}
.acct-item:focus-visible{outline-offset:-3px}
.acct-item.out,.acct-item.out .ico{color:var(--danger)}
.acct-item.out:hover{color:var(--danger);background:var(--ink-800)}

/* ------------------------------------------------------------ navigation */
#nav{position:fixed;z-index:40;left:0;top:calc(var(--top-h) + env(safe-area-inset-top,0px));bottom:0;width:var(--sb-w);display:flex;flex-direction:column;gap:2px;
  padding:var(--sp-32) 0 calc(24px + env(safe-area-inset-bottom,0px));background:var(--ink-950);border-right:1px solid var(--hair);overflow-y:auto;scrollbar-width:none}
#nav:empty{display:none}
.nav-b{position:relative;flex:none;display:flex;align-items:center;gap:14px;min-height:48px;padding:0 20px 0 max(28px,env(safe-area-inset-left,0px));border:0;border-radius:0;background:none;color:var(--stone-400);
  font:500 12px/1 var(--font-body);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;transition:color var(--dur-1) var(--ease)}
.nav-b .ico{width:18px;height:18px;flex:none;stroke-width:1.5}
/* the current page: gold label and a thin gold rule where the sidebar meets the page */
.nav-b::after{content:"";position:absolute;right:0;top:8px;bottom:8px;width:2px;background:var(--gold-500);transform:scaleY(0);transition:transform var(--dur-2) var(--ease)}
.nav-b:hover:not(:disabled):not([aria-current=page]){color:var(--ivory-100)}
.nav-b[aria-current=page]{color:var(--gold-500)}
.nav-b[aria-current=page]::after{transform:scaleY(1)}
.nav-b:disabled{opacity:.35;cursor:not-allowed}
.nav-b:focus-visible{outline-offset:-4px}
.nav-b .l-short{display:none}

/* ------------------------------------------------------------ page frame */
#main{margin-left:max(var(--sb-w),calc((100vw + var(--sb-w) - 1180px)/2));max-width:1180px;
  padding:calc(var(--top-h) + env(safe-area-inset-top,0px) + 40px) var(--pad-x) calc(64px + var(--bar-h) + env(safe-area-inset-bottom,0px));
  display:grid;gap:var(--sp-32);align-content:start;min-width:0}
#main>*{min-width:0}
body[data-view=play] #main{max-width:1280px;margin-left:max(0px,calc((100vw - 1280px)/2))}
.page-h{display:grid;gap:var(--sp-12);margin:0 0 var(--sp-8)}
.page-h h1{margin:0;font-family:var(--font-display);font-weight:400;font-size:clamp(36px,3vw + 22px,60px);line-height:1.05;letter-spacing:-.015em;text-wrap:balance}
.page-h p{margin:0;color:var(--text-2);max-width:62ch;font-size:16px;line-height:1.6}
.eyebrow{display:inline-flex;align-items:center;gap:14px;margin:0;color:var(--gold-500);font:500 12px/1.4 var(--font-body);letter-spacing:.16em;text-transform:uppercase}
.eyebrow:not(:has(.ico))::before{content:"";flex:none;width:28px;height:1px;background:var(--gold-500)}
.eyebrow .ico{width:16px;height:16px;stroke-width:1.5}
.gold-t{color:var(--gold-500)} /* one key word, solid gold (never gradient text) */
.dg-h,.page-h h1,.landing-h,.vs .who b,.scoreline b,.dg-stat b{font-variant-numeric:lining-nums tabular-nums}
.dg-h{font-family:var(--font-display);font-weight:500;letter-spacing:-.01em;line-height:1.1;color:var(--ivory-100)}
h2.dg-h{font-size:clamp(26px,1.2vw + 20px,32px)}
h3.dg-h{font-size:22px}
.lede{color:var(--text-2);margin:6px 0 0;max-width:60ch;font-size:16px;line-height:1.6}
.grid2{display:grid;gap:var(--sp-32);grid-template-columns:1fr}
.grid3{display:grid;gap:var(--sp-24);grid-template-columns:1fr}
@media(min-width:900px){.grid2{grid-template-columns:1fr 1fr}.grid3{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* editorial section: the heading sits in a narrow left column, the content on the right, hairline above */
.sec{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:clamp(32px,6vw,96px);row-gap:var(--sp-24);padding:var(--sp-48) 0 0;border-top:1px solid var(--hair);align-items:start}
.sec-h{display:grid;gap:var(--sp-8);align-content:start}
.sec-h h2{margin:0}
.sec-h p{margin:0;color:var(--stone-400);font-size:14px;line-height:1.55;max-width:34ch}
.sec-b{display:grid;gap:var(--sp-24);min-width:0;align-content:start}

/* ------------------------------------------------------------ cards: hairline, near-square corners, no shadow */
.dg-stack{gap:var(--sp-16);align-content:start}
.dg-box p{margin:0}
.landing .err:empty{display:none}
.tile{background:var(--ink-950);border:1px solid var(--hair);border-radius:var(--radius-1);box-shadow:none}
details.dg-box>summary{cursor:pointer;font-weight:500;font-size:17px}
details.dg-box[open]>summary{margin-bottom:14px}

/* ------------------------------------------------------------ controls */

.mx-back .ico{width:17px;height:17px;flex:none;stroke-width:1.6;transform:scaleX(-1)}
.mx-invite-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:2px}
.mx-invite-actions>*{flex:1 1 200px;width:auto}
@media(max-width:420px){.mx-invite-actions>*{flex-basis:100%}}

.chips{display:flex;flex-wrap:wrap;gap:var(--sp-8)}

/* fields */
.field{display:grid;gap:var(--sp-8);min-width:0}
.field label,.label{font:500 12px/1.4 var(--font-body);letter-spacing:var(--label-track);text-transform:uppercase;color:var(--stone-400)}
input[type=text],input[type=number],input[type=search],select,textarea{width:100%;min-height:48px;background:var(--ink-800);color:var(--ivory-100);border:1px solid var(--field-line);border-radius:var(--radius-1);padding:10px 14px;font:inherit;box-shadow:none;transition:border-color var(--dur-1) var(--ease)}
input::placeholder{color:var(--stone-400);opacity:1}
input[type=text]:hover,input[type=number]:hover,select:hover{border-color:var(--gold-600)}
input[type=text]:focus,input[type=number]:focus,select:focus{border-color:var(--gold-500);box-shadow:none}
input[type=text]:focus-visible,input[type=number]:focus-visible,select:focus-visible{outline:1px solid var(--gold-500);outline-offset:2px}
select{appearance:none;-webkit-appearance:none;padding-right:44px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A39C8C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:18px}
input[type=checkbox]{accent-color:var(--gold-500);width:20px;height:20px;flex:none}
.mono-box{font-family:var(--font-body);font-variant-numeric:tabular-nums;font-size:14px;letter-spacing:.01em;background:var(--ink-950);border:1px solid var(--hair);border-radius:var(--radius-1);padding:14px 16px;word-break:break-all;user-select:all;box-shadow:none;color:var(--text-2)}

/* rows and small status text */
.list{display:grid;gap:0}
.list .row{display:flex;justify-content:space-between;align-items:center;gap:12px 24px;padding:16px 0;border-top:1px solid var(--hair);font-size:15px;flex-wrap:wrap}
.list .row:first-child{border-top:0}
.sub{color:var(--stone-400);font-size:13px}
.err{color:var(--danger);font-size:14px;min-height:1em}
.ok{color:var(--ok)}
.dg-note{color:var(--stone-400);font-size:14px;line-height:1.55}
.dg-note a,.sub a,.lede a{color:var(--gold-300);text-decoration:underline;text-decoration-color:var(--hair-gold);text-underline-offset:3px;transition:text-decoration-color var(--dur-1) var(--ease)}
.dg-note a:hover,.sub a:hover,.lede a:hover{text-decoration-color:var(--gold-300)}
.notice{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:var(--radius-1);background:var(--ink-800);border:1px solid var(--hair);border-left:1px solid var(--gold-500);font-size:14px;line-height:1.55;color:var(--text-2)}
.notice .ico{width:18px;height:18px;flex:none;margin-top:2px;stroke-width:1.6;color:var(--gold-500)}
.notice.warn{border-left-color:var(--danger)}
.notice.warn .ico{color:var(--danger)}
/* result labels: small bordered tags in the outcome colours, no fill */
.rpill{display:inline-flex;align-items:center;gap:6px;border-radius:var(--radius-1);padding:5px 10px;font:500 11px/1 var(--font-body);letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--hair-strong);background:transparent;color:var(--stone-400);white-space:nowrap}
.rpill.win{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 50%,transparent)}
.rpill.loss{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 55%,transparent)}
.rpill.draw,.rpill.void{color:var(--gold-300);border-color:var(--hair-gold)}
/* skeletons: flat blocks that breathe, no gradient sweep */
.skel{display:block;border-radius:var(--radius-1);background:var(--ink-800);animation:dgBreathe 1.8s ease-in-out infinite}
@keyframes dgBreathe{50%{opacity:.5}}
/* avatars: ui.js now draws them in the warm palette (dark disc, gold / champagne / stone marks), so no override is needed here */

/* ------------------------------------------------------------ misc shared (match / lobby / practice rely on these) */
.vs{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center;text-align:center}
.vs .who{min-width:0}
.vs .who b{display:block;font-family:var(--font-display);font-weight:500;font-size:22px;overflow-wrap:anywhere}
.vs .who.you b{color:var(--gold-500)} .vs .who.rival b{color:var(--danger)}
.vs .x{color:var(--stone-400);font:500 12px/1 var(--font-body);letter-spacing:var(--label-track);text-transform:uppercase}
.big:not(.dg-btn){font-family:var(--font-display);font-weight:400;font-size:clamp(40px,8vw,64px);line-height:1;letter-spacing:-.015em}
.rules{margin:0;padding-left:18px;color:var(--text-2)}
.rules li{margin:4px 0}
.rules li::marker{color:var(--gold-600)}
.spin{width:44px;height:44px;border-radius:50%;border:1px solid var(--hair-strong);border-top-color:var(--gold-500);animation:dgSpin 1s linear infinite;margin:6px auto}
@keyframes dgSpin{to{transform:rotate(360deg)}}
.bar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.race{display:grid;gap:8px}
.race .lane{display:grid;grid-template-columns:minmax(0,104px) 1fr auto;gap:12px;align-items:center;font-size:13px}
.race .lane>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.race .track{height:4px;background:var(--ink-800);border-radius:0;overflow:hidden}
.race .fill{height:100%;width:0;border-radius:0;transition:width .25s}
.race .you .fill{background:var(--gold-500)} .race .rival .fill{background:var(--danger)}
#stage{max-width:860px;width:100%;min-height:240px}
.confirm{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.result-head{text-align:center;padding:8px 0}
.result-head.win .big{color:var(--ok)} .result-head.loss .big{color:var(--danger)} .result-head.draw .big,.result-head.void .big{color:var(--gold-500)}
.scoreline{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;text-align:center;align-items:center}
.scoreline b{font-family:var(--font-display);font-weight:500;font-size:34px;display:block}

/* ------------------------------------------------------------ toasts */
#toasts{position:fixed;left:var(--sb-w);right:0;bottom:calc(20px + var(--bar-h) + env(safe-area-inset-bottom,0px));display:grid;gap:8px;justify-items:center;pointer-events:none;z-index:70;padding:0 16px}
.toast{pointer-events:none;background:var(--ink-800);border:1px solid var(--hair-strong);border-left-width:2px;border-radius:var(--radius-1);padding:12px 18px;font-size:14px;line-height:1.45;color:var(--ivory-100);max-width:min(100%,460px);
  box-shadow:var(--shadow-warm);animation:dgToastIn var(--dur-1) var(--ease);transition:opacity var(--dur-1) var(--ease),transform var(--dur-1) var(--ease)}
@keyframes dgToastIn{from{opacity:0;transform:translateY(6px)}}
.toast.bad{border-left-color:var(--danger)}
.toast.good{border-left-color:var(--ok)}
.toast.gold{border-left-color:var(--gold-500)}
.toast.out{opacity:0;transform:translateY(4px)}

/* ------------------------------------------------------------ sign-in: editorial, asymmetric */
body[data-view=signin] #main{max-width:1280px;margin-left:auto;margin-right:auto;padding-top:calc(var(--top-h) + env(safe-area-inset-top,0px) + clamp(40px,9vh,112px));padding-bottom:calc(var(--sp-96) + env(safe-area-inset-bottom,0px))}
.landing{display:grid;gap:var(--sp-64) clamp(48px,7vw,112px);grid-template-columns:minmax(0,7fr) minmax(0,4fr);align-items:start}
.landing-hero{display:grid;gap:var(--sp-32);align-content:start;min-width:0}
.landing-hero .eyebrow{margin:0}
.landing-h{margin:0;font-family:var(--font-display);font-weight:400;font-size:var(--fs-96);line-height:1.02;letter-spacing:-.02em;color:var(--ivory-100);text-wrap:balance}
.landing-h .l1{display:block}
.landing-h .l2{display:block;margin-top:.3em;font-size:.44em;line-height:1.15;letter-spacing:-.01em;color:var(--stone-400)}
.landing-h .nb{white-space:nowrap}
.landing-h.is-invite{font-size:clamp(44px,5vw + 16px,76px);overflow-wrap:anywhere}
.landing-h.is-invite .l2{font-size:.5em}
.landing-hero .lede{font-size:clamp(16px,.5vw + 14px,18px);margin:0;max-width:52ch}
.landing-cta{display:flex;gap:var(--sp-16);flex-wrap:wrap;align-items:center}
.landing-hero .dg-note{max-width:60ch;margin:0}
.si-invite{display:flex;gap:var(--sp-16);align-items:center;padding:var(--sp-16) var(--sp-24);border:1px solid var(--hair-gold);border-radius:var(--radius-2);background:var(--ink-900);max-width:56ch}
.si-invite b{display:block;font-weight:500;font-size:16px;line-height:1.4;overflow-wrap:anywhere}
.si-invite span:not(.si-ava):not(.si-ico){display:block;margin-top:2px;color:var(--stone-400);font-size:14px;line-height:1.5}
.si-invite.bad{border-color:color-mix(in srgb,var(--danger) 50%,transparent)}
.si-ava{flex:none;display:grid;place-items:center;line-height:0;border-radius:50%;border:1px solid var(--hair-strong);background:var(--ink-800)}
.si-ava .ava{border-radius:50%}
.si-ico{flex:none;display:grid;place-items:center}
.si-ico .ico{width:22px;height:22px;stroke-width:1.5;color:var(--gold-500)}
.si-invite.bad .si-ico .ico{color:var(--danger)}
/* the right column is set lower than the headline and separated by a hairline: an offset, not a mirror */
.landing-side{display:grid;gap:var(--sp-48);align-content:start;padding-left:clamp(24px,4vw,56px);border-left:1px solid var(--hair);margin-top:clamp(0px,7vw,104px)}
.landing-side h2{margin:0;font:500 12px/1.4 var(--font-body);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-500)}
.steps{list-style:none;margin:var(--sp-16) 0 0;padding:0;display:grid;gap:0}
.steps li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:var(--sp-16);align-items:baseline;padding:var(--sp-24) 0;border-top:1px solid var(--hair)}
.steps li:last-child{padding-bottom:0}
.steps b{font-weight:500;font-size:16px;line-height:1.4;display:block;color:var(--ivory-100)}
.steps p{margin:var(--sp-8) 0 0;color:var(--stone-400);font-size:14px;line-height:1.6}
.step-n{font-family:var(--font-display);font-weight:500;font-size:30px;line-height:1;color:var(--gold-500);font-variant-numeric:lining-nums}
.testnote h2{margin:0}
.testnote p{margin:var(--sp-16) 0 0;color:var(--stone-400);font-size:14px;line-height:1.6;max-width:44ch}

/* ------------------------------------------------------------ widths */
/* top bar tiers: the balance label goes first, then Open lobby and Deposit shrink to icons (their names stay in aria-label) */
@media(max-width:1279px){.top .pill .lbl{display:none}}
@media(max-width:1099px){:root{--sb-w:224px}.top-brand{padding-left:24px}}
@media(max-width:899px){.top-open{width:44px;padding:0}.top-open span{display:none}}
@media(max-width:699px){#topFaucet{width:44px;padding:0}#topFaucet span{display:none}}
@media(max-width:899px){
  :root{--sb-w:72px;--top-h:64px}
  .top-brand{padding-left:20px;font-size:26px}
  body[data-view=signin] .top-brand,body[data-view=play] .top-brand{padding-left:var(--pad-x)}
  /* tablet: an icon rail; labels stay available to screen readers */
  #nav{padding:var(--sp-24) 0 calc(16px + env(safe-area-inset-bottom,0px));align-items:stretch}
  .nav-b{padding:0;justify-content:center;min-height:52px}
  .nav-b span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .nav-b .ico{width:20px;height:20px}
  .landing{grid-template-columns:1fr}
  .landing-side{padding-left:0;border-left:0;border-top:1px solid var(--hair);padding-top:var(--sp-48);margin-top:0}
  .sec{grid-template-columns:1fr}
  .sec-h p{max-width:60ch}
}
@media(max-width:720px){h2.dg-h{font-size:26px}}
/* phones: a bottom bar with five destinations (Account lives in the avatar menu); the current one has a gold rule on the bar's top edge */
@media(max-width:640px){
  :root{--sb-w:0px;--top-h:60px;--bar-h:64px;--pad-x:20px}
  #nav{top:auto;left:0;right:0;bottom:0;width:100%;height:calc(var(--bar-h) + env(safe-area-inset-bottom,0px));flex-direction:row;gap:0;align-items:stretch;
    padding:0 env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);border-right:0;border-top:1px solid var(--hair);overflow:hidden;background:var(--ink-950)}
  .nav-b{flex:1 1 0;min-width:0;flex-direction:column;justify-content:center;gap:7px;padding:0 2px;min-height:0;font-size:11px;letter-spacing:.1em;border-radius:0}
  .nav-b .ico{width:21px;height:21px}
  .nav-b span{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:nowrap}
  .nav-b .l-full{display:none}
  .nav-b .l-short{display:inline}
  .nav-b::after{right:auto;left:18%;width:64%;top:-1px;bottom:auto;height:2px;transform:scaleX(0)}
  .nav-b[aria-current=page]::after{transform:scaleX(1)}
  .nav-more{display:none}
  .top{padding-right:max(16px,env(safe-area-inset-right,0px));gap:8px}
  .top-brand,body[data-view=signin] .top-brand,body[data-view=play] .top-brand{min-width:0;padding-left:max(20px,env(safe-area-inset-left,0px));font-size:25px}
  .top-right{gap:10px}
  .top .pill b{font-size:17px}
  .top-join{padding:0 4px}
  #main{margin-left:0;max-width:none;padding-top:calc(var(--top-h) + env(safe-area-inset-top,0px) + 28px);gap:var(--sp-24)}
  body[data-view=play] #main{margin-left:0}
  body[data-view=signin] #main{padding-top:calc(var(--top-h) + env(safe-area-inset-top,0px) + 36px);padding-bottom:calc(var(--sp-64) + env(safe-area-inset-bottom,0px))}
  .landing{gap:var(--sp-48)}
  .landing-hero{gap:var(--sp-24)}
  .landing-cta{flex-direction:column;align-items:stretch}
  .landing-cta .dg-btn{width:100%}
  .vs{grid-template-columns:1fr;gap:4px}
  .sec{padding-top:var(--sp-32)}
}
@media(max-width:520px){.top-right:has(.top-open) .top-join span{display:none}}
/* hosting on a phone: the balance keeps its full number; the unit stays in the link's accessible name */
@media(max-width:400px){.top-right:has(.top-open) .pill em{display:none}}
/* the short network name (the full one stays in the sr-only text and the title) once the bar gets busy */
@media(max-width:1099px){.net-tag .nt-long{display:none}.net-tag .nt-short{display:inline}}
@media(max-width:640px){.net-tag{padding:0 7px;gap:6px;min-height:24px;font-size:10px;letter-spacing:.1em}.top-net{margin-left:10px}}
@media(max-width:400px){.net-tag i{display:none}}
@media(max-width:440px){#topFaucet{display:none}}
@media(max-width:400px){
  .top-brand,body[data-view=signin] .top-brand,body[data-view=play] .top-brand{font-size:22px;padding-left:max(16px,env(safe-area-inset-left,0px))}
  .top{padding-right:max(12px,env(safe-area-inset-right,0px))}
  .top-right{gap:8px}
}
/* phones: Join becomes its icon (the link keeps its full accessible name) so the network badge always fits */
@media(max-width:430px){.top-join span{display:none}.top-join{width:44px;justify-content:center;padding:0}}
@media(max-width:359px){.top .pill em{display:none}}
@media(prefers-reduced-motion:reduce){.acct-menu,.toast,.skel,.spin{animation:none}.toast.out{transform:none}}

/* ------------------------------------------------------------ motion: one authored entrance per page change, then still */
#main.pg-enter>*{animation:pgIn var(--dur-2) var(--ease) both}
@keyframes pgIn{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}
/* victory confetti (views/celebrate.js): a few gold and ivory pieces, once per win, never with reduced motion */
.pl-confetti{position:fixed;height:520px;overflow:hidden;pointer-events:none;z-index:60}
.pl-confetti i{position:absolute;top:0;width:6px;height:10px;border-radius:1px;opacity:0;animation:plFall var(--d,2.2s) cubic-bezier(.2,.6,.3,1) var(--dl,0s) 1 both}
.pl-confetti i.dot{width:6px;height:6px;border-radius:50%}
@keyframes plFall{0%{opacity:0;translate:0 0;rotate:0deg}8%{opacity:1}80%{opacity:1}100%{opacity:0;translate:var(--dx,0) 460px;rotate:var(--r,360deg)}}

/* phones: the network badge sits under the wordmark instead of beside it, so it never competes with Join, the balance and the account */
@media(max-width:520px){
  .top-net{position:absolute;left:max(20px,env(safe-area-inset-left,0px));bottom:6px;margin:0;overflow:visible}
  .top:has(.net-tag) .top-brand{align-items:flex-start;padding-top:4px}
  .net-tag{min-height:16px;padding:0 5px;gap:5px;font-size:10px;letter-spacing:.12em}
}
@media(max-width:400px){.top-net{left:max(16px,env(safe-area-inset-left,0px))}}

/* ---------------------------------------------------------------- sign-in: the gold ribbons
   Editorial split: headline and Connect wallet on the left, open space on the right where the ribbon background (ribbons.js)
   shows at full strength; "How it works" moves to a three-column row underneath. */
.landing{grid-template-columns:minmax(0,6fr) minmax(0,5fr);grid-template-areas:"hero art" "side side";align-items:center;position:relative}
.landing{overflow-x:clip}
.landing-hero{grid-area:hero;position:relative;z-index:1}
/* an empty column that keeps the right of the hero open for the ribbons */
.landing-art{grid-area:art;margin:0;align-self:stretch;min-height:clamp(420px,58vh,640px);pointer-events:none}
/* the ribbon background: on <body> under #main, down to the "How it works" row. The mask keeps it faint behind the text column
   (left) and fades it out at its foot, so body text stays on near-plain ink. */
/* height: 100svh until ribbons.js sets it */
.bg-ribbons{position:absolute;top:0;left:0;z-index:0;display:block;width:100%;height:100svh;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.05) 0%,rgba(0,0,0,.07) 54%,#000 76%),linear-gradient(180deg,#000 45%,transparent 88%);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,rgba(0,0,0,.05) 0%,rgba(0,0,0,.07) 54%,#000 76%),linear-gradient(180deg,#000 45%,transparent 88%);
  mask-composite:intersect;animation:ribbonsIn .9s var(--ease) both}
.bg-ribbons[hidden]{display:none}
body[data-view=signin] #main{position:relative;z-index:1}
@keyframes ribbonsIn{from{opacity:0}}
.landing-side{grid-area:side;margin-top:0;padding-left:0;border-left:0;border-top:1px solid var(--hair);padding-top:var(--sp-48);
  grid-template-columns:minmax(0,3fr) minmax(0,1fr);gap:var(--sp-48) clamp(32px,5vw,72px)}
.landing-side .steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 var(--sp-32)}
.landing-side .steps li{grid-template-columns:1fr;gap:var(--sp-8);align-items:start;align-content:start;padding:var(--sp-24) 0 0}
.landing-side .testnote{border-left:1px solid var(--hair);padding-left:clamp(24px,3vw,40px)}
@media(max-width:1099px){
  .landing-side{grid-template-columns:1fr}
  .landing-side .testnote{border-left:0;padding-left:0}
}
@media(max-width:899px){
  .landing{grid-template-columns:1fr;grid-template-areas:"art" "hero" "side"}
  /* an open band above the headline where the ribbons show; below it they fade to a trace behind the text */
  .landing-art{min-height:0;height:clamp(200px,52vw,380px);margin:calc(-1 * clamp(28px,6vw,48px)) 0 calc(-1 * var(--sp-32))}
  .bg-ribbons{-webkit-mask-image:linear-gradient(180deg,#000 0,#000 calc(var(--top-h) + clamp(90px,24vw,180px)),rgba(0,0,0,.1) calc(var(--top-h) + clamp(190px,48vw,350px)),transparent 100%);
    mask-image:linear-gradient(180deg,#000 0,#000 calc(var(--top-h) + clamp(90px,24vw,180px)),rgba(0,0,0,.1) calc(var(--top-h) + clamp(190px,48vw,350px)),transparent 100%)}
  .landing-side .steps{grid-template-columns:1fr}
  .landing-side .steps li{grid-template-columns:44px minmax(0,1fr);gap:var(--sp-16);align-items:baseline;padding:var(--sp-24) 0}
}
@media(prefers-reduced-motion:reduce){.bg-ribbons{animation:none}}

/* ------------------------------------------------------------ email accounts on the sign-in page (views/shell.js emailForm)
   The email form is the main action on the page: its submit is the one solid gold button, and the other ways (create account,
   forgot password) are text links under it. Kept compact so the submit sits above the fold on a laptop. */
.em-or{display:flex;align-items:center;gap:14px;max-width:440px;margin:var(--sp-16) 0 var(--sp-12);
  font:600 11px/1 var(--font-body);letter-spacing:var(--label-track);text-transform:uppercase;color:var(--stone-400)}
.em-or::before,.em-or::after{content:"";flex:1;height:1px;background:var(--hair)}
.em{display:grid;gap:var(--sp-12);max-width:440px;margin-top:var(--sp-24)}
.em .field{gap:6px}
.em-h{margin:0;font:500 var(--fs-20)/1.3 var(--font-display);color:var(--ivory-100)}
.em-submit{justify-self:start;min-width:200px}
/* the email path is the quiet one: a text link that opens the form, styled like the other small links */
.em-more{max-width:440px}
.em-sum{display:inline-flex;align-items:center;gap:10px;min-height:44px;cursor:pointer;list-style:none;
  font:600 12px/1.2 var(--font-body);letter-spacing:var(--label-track);text-transform:uppercase;color:var(--stone-400);
  border-bottom:1px solid var(--hair-strong);transition:color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease)}
.em-sum::-webkit-details-marker{display:none}
.em-sum::after{content:"+";font:500 16px/1 var(--font-body);color:var(--gold-500)}
.em-more[open] .em-sum::after{content:"−"}
.em-sum:hover{color:var(--ivory-100);border-color:var(--gold-500)}
.em-more[open] .em{margin-top:var(--sp-16)}
.em-links{display:flex;flex-wrap:wrap;gap:var(--sp-8) var(--sp-24)}
.em .err:empty{display:none}
.em-sent{padding:var(--sp-16) var(--sp-24);border:1px solid var(--hair-gold);border-radius:var(--radius-2);background:var(--gold-soft)}
.em-sent p{margin:0;color:var(--text-2,var(--ivory-100));line-height:1.6}
.link-wallet{display:grid;gap:var(--sp-16);justify-items:start}