/* PlayVault design system: the one source of tokens and shared components.
   Loaded by the client (/play), the game packs (/game) and the standalone artifact shell, so every surface draws from here.
   Rules: gold is an accent (about 10% of a screen), ink is the ground, corners are 2-4px, depth comes from hairlines and
   edges rather than blur or glow, motion is ease-out at 180-500ms. Fonts are loaded by each HTML page (Rothek, Manrope,
   DM Mono). Games: use these tokens and the dg-* classes; namespace your own classes as .g-<gameid>-*. Legacy names
   (--panel, --fg, --f-body, ...) stay as aliases so older rules keep working. */

:root{
  /* ---- gold: the accent. The default is the bright gold the client has shipped; CLAUDE.md's #C9A227 is the darker option */
  --gold-100:#FCEEC2;  /* champagne: subtle fills */
  --gold-300:#F7D46A;  /* highlights, hover */
  --gold-500:#E7B52C;  /* primary gold */
  --gold-600:#C9951C;  /* pressed, borders on light */
  --gold-800:#7A560C;  /* gold text on light grounds */
  --gold-metal:linear-gradient(135deg,#FBE38C,#E7B52C 50%,#B07D14); /* small elements only: a primary button, a logo word */

  /* ---- warm neutrals: never blue-grey */
  --ink-950:#0C0B09;   /* page ground */
  --ink-900:#151310;   /* raised surfaces (one-surface system: cards share the ground and are drawn by their edge) */
  --ink-800:#1F1C17;   /* inputs, chips, tiles */
  --ink-700:#2A2620;   /* hover / pressed */
  --ink-600:#4A453B;   /* hairlines on dark */
  --stone-400:#A39C8C; /* secondary text: 7.2:1 on ink-950 */
  --ivory-100:#F7F3EA; /* primary text */
  --ivory-50:#FCFAF5;

  /* ---- colour rhyme: gold = you, ivory = ally, terracotta = rival, sage = win */
  --ok:#9DB07A;        /* sage: win, ready, online. 8.4:1 on ink-950 */
  --danger:#E2644B;    /* red: rival, loss, errors. More saturated/red than the old #D27C63. 5.8:1 on ink-950, 5.0:1 on ink-800 */
  --rival:var(--danger);
  --ally:var(--ivory-100);

  /* ---- hairlines */
  --hair:rgba(74,69,59,.75);            /* ink-600 at rest: dividers */
  --hair-strong:var(--ink-600);
  --hair-gold:color-mix(in srgb,var(--gold-500) 40%,transparent);
  --field-line:color-mix(in srgb,var(--stone-400) 45%,var(--ink-600)); /* control outlines: 3.3:1; the plain hairline is for dividers only */

  /* ---- type: Display = Rothek, a grotesque for headings, titles and big numbers. Text = Manrope. Data = DM Mono. */
  --font-display:"Rothek","Manrope","Helvetica Neue",Arial,sans-serif; /* Rothek (Groteskly Yours, licensed, self-hosted: /play/fonts/rothek.css); Manrope until its files are in place */
  --font-body:"Manrope","Helvetica Neue",Arial,sans-serif;
  --font-data:"DM Mono",ui-monospace,Menlo,Consolas,monospace;
  --fs-12:12px; --fs-14:14px; --fs-16:16px; --fs-20:20px;
  --fs-28:clamp(24px,2.2vw + 14px,28px);
  --fs-40:clamp(30px,3vw + 16px,40px);
  --fs-64:clamp(40px,5vw + 16px,64px);
  --fs-96:clamp(52px,7vw + 16px,96px);
  --label-track:.16em;   /* uppercase labels, navigation and buttons */

  /* ---- space: a 4px rhythm */
  --sp-4:4px; --sp-8:8px; --sp-12:12px; --sp-16:16px; --sp-24:24px; --sp-32:32px; --sp-48:48px; --sp-64:64px; --sp-96:96px;

  /* ---- shape: corners 0-4px. Two shapes only: the chamfer (a cut corner on primary actions) and the coin (a circle). */
  --radius-0:0; --radius-1:2px; --radius-2:4px; --radius-pill:999px;
  --cut:9px;             /* chamfer depth on primary actions */
  --bracket:14px;        /* gold corner bracket on cards */

  /* ---- depth: tangible edges, not blur or glow. Raised = a lit top edge, a dark bottom edge and a warm contact shadow. */
  --edge-hi:rgba(255,236,170,.13);
  --shadow-raised:inset 0 1px 0 var(--edge-hi),inset 0 -1px 0 rgba(0,0,0,.45),0 1px 0 rgba(0,0,0,.55),0 10px 14px -12px rgba(0,0,0,.9);
  --shadow-pressed:inset 0 2px 6px rgba(0,0,0,.5);
  --shadow-warm:0 18px 40px -22px rgba(12,11,9,.9);   /* floating menus and toasts only */

  /* ---- texture: a fine grain for the ground, and a hairline engraving for hero panels. Inert SVG/CSS, no images. */
  --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .8  0 0 0 0 .74  0 0 0 0 .58  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --engrave:repeating-linear-gradient(90deg,rgba(247,243,234,.028) 0 1px,transparent 1px 6px);
  --grain-opacity:.055;

  /* ---- motion: ease-out only, 180-500ms, no springs or bounce */
  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-spring:var(--ease);  /* kept as an alias so older rules settle to ease-out */
  --dur-0:180ms; --dur-1:300ms; --dur-2:500ms;

  /* ---- legacy names: the game packs and older rules read these and point at the system above */
  --ink:var(--ink-950);
  --panel:transparent;         /* one surface: cards show the ground and its grain, drawn by their edge */
  --panel-2:var(--ink-800);
  --panel-3:var(--ink-700);
  --line:var(--hair);
  --line-2:var(--hair-strong);
  --fg:var(--ivory-100);
  --muted:var(--stone-400);
  --gold:var(--gold-500);
  --gold-2:var(--gold-300);
  --gold-deep:var(--gold-600);
  --gold-grad:var(--gold-500);  /* gradients were used for large fills: now solid gold */
  --gold-soft:color-mix(in srgb,var(--gold-500) 12%,transparent);
  --glass:none;                 /* no glassmorphism */
  --on-gold:var(--ink-950);
  --good:var(--ok);
  --warn:var(--gold-300);
  --bad:var(--danger);
  --f-display:var(--font-display);
  --f-body:var(--font-body);
  --f-mono:var(--font-data);
  --r-sm:var(--radius-1); --r-md:var(--radius-2); --r-lg:var(--radius-2); --r-pill:var(--radius-pill);
  color-scheme:dark;
}

/* ------------------------------------------------------------------ ground */
*{box-sizing:border-box}
html{background:var(--ink-950)}
body{margin:0;background:var(--ink-950);color:var(--ivory-100);font-family:var(--font-body);font-size:var(--fs-16);line-height:1.6;
  font-variant-numeric:lining-nums;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
/* the grain sits on the ground behind all content (z-index -1 in the root context) and never takes input */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:var(--grain);background-size:180px 180px;opacity:var(--grain-opacity)}
::selection{background:color-mix(in srgb,var(--gold-500) 35%,transparent);color:var(--ivory-50)}
input,textarea,select{caret-color:var(--gold-500)}
html{scrollbar-color:var(--ink-600) var(--ink-950);scrollbar-width:thin}
button{font:inherit;color:inherit;cursor:pointer}

/* ------------------------------------------------------------------ type */
/* small uppercase label: navigation, eyebrows, table heads */
.t-label,.dg-eyebrow{font-family:var(--font-body);font-size:var(--fs-12);font-weight:600;letter-spacing:var(--label-track);text-transform:uppercase;color:var(--stone-400)}
/* display serif for headings: tight, light-to-regular; the optical size follows the font size */
.t-display,.dg-h{font-family:var(--font-display);font-weight:500;line-height:1.08;letter-spacing:-.012em;color:var(--ivory-100);text-wrap:balance;font-optical-sizing:auto;margin:0}
.dg-mono,.dg-stat b,.dg-table .num{font-family:var(--font-data);font-variant-numeric:tabular-nums}
.dg-muted{color:var(--muted)}
.dg-center{text-align:center}
.dg-gold{color:var(--gold-500)} .dg-good{color:var(--ok)} .dg-bad{color:var(--danger)} .dg-rival{color:var(--danger)} .dg-ally{color:var(--ivory-100)}
.dg-note{font-size:13px;color:var(--muted)}

/* ------------------------------------------------------------------ focus: a gold outline on every control */
:focus-visible{outline:1px solid var(--gold-500);outline-offset:3px}

/* ------------------------------------------------------------------ cards: one surface, a lit edge, a gold corner bracket */
.dg-box{position:relative;background:var(--glass),var(--panel);border:1px solid var(--line);border-radius:var(--radius-2);padding:clamp(20px,2.4vw,32px);box-shadow:var(--shadow-raised)}
/* the corner bracket: the same gold mark on every card, top-left */
.dg-box::before{content:"";position:absolute;left:-1px;top:-1px;width:var(--bracket);height:var(--bracket);pointer-events:none;background:linear-gradient(var(--gold-500),var(--gold-500)) left top/var(--bracket) 2px no-repeat,linear-gradient(var(--gold-500),var(--gold-500)) left top/2px var(--bracket) no-repeat;}
.dg-box>summary{cursor:pointer;font-weight:600}
.dg-stack{display:grid;gap:12px}
.dg-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.dg-stat{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-2);padding:12px 16px;color:var(--muted);font-size:13px;box-shadow:var(--shadow-raised)}
.dg-stat b{display:block;font-family:var(--font-data);font-size:24px;font-weight:500;color:var(--fg);letter-spacing:-.01em}

/* ------------------------------------------------------------------ buttons
   One component for every screen. Primary = the single solid gold action per view, with a chamfered corner.
   Ghost (outline) = everything else. Danger = destructive. Quiet = text only. Sizes: sm, default, lg/xl. */
.dg-btn,.mx-btn,.gl-btn,.lb-btn,.lb-cancel,.mx-back{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:10px 26px;
  border:1px solid var(--gold-600);border-radius:var(--radius-1);background:transparent;color:var(--ivory-100);text-decoration:none;text-align:center;
  font:600 12px/1.2 var(--font-body);letter-spacing:var(--label-track);text-transform:uppercase;
  box-shadow:var(--shadow-raised);
  transition:background var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease)}
.dg-btn .ico,.mx-btn .ico,.gl-btn .ico,.lb-btn .ico{width:17px;height:17px;flex:none;stroke-width:1.6}
.dg-btn:hover:not(:disabled),.mx-btn:hover:not(:disabled),.gl-btn:hover:not(:disabled),.lb-btn:hover:not(:disabled){background:var(--gold-soft);border-color:var(--gold-500);color:var(--gold-300)}
.dg-btn:active:not(:disabled),.mx-btn:active:not(:disabled),.gl-btn:active:not(:disabled),.lb-btn:active:not(:disabled){box-shadow:var(--shadow-pressed);color:var(--gold-500)}
/* primary: solid gold, chamfered top-left and bottom-right. The inset ring replaces the outline, which the clip would cut off. */
.dg-btn.primary,.mx-btn.primary,.gl-btn.primary,.lb-btn.primary{
  background:var(--gold-metal);border-color:transparent;color:var(--ink-950);font-weight:700;
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));box-shadow:none}
.dg-btn.primary:hover:not(:disabled),.mx-btn.primary:hover:not(:disabled),.gl-btn.primary:hover:not(:disabled),.lb-btn.primary:hover:not(:disabled){
  background:var(--gold-300);border-color:transparent;color:var(--ink-950)}
.dg-btn.primary:active:not(:disabled),.mx-btn.primary:active:not(:disabled),.gl-btn.primary:active:not(:disabled),.lb-btn.primary:active:not(:disabled){background:var(--gold-600);color:var(--ink-950)}
.dg-btn.primary:focus-visible,.mx-btn.primary:focus-visible,.gl-btn.primary:focus-visible,.lb-btn.primary:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--ivory-100)}
.dg-btn.ghost,.gl-btn.quiet,.mx-btn.quiet{border-color:var(--field-line);color:var(--stone-400)}
.dg-btn.ghost:hover:not(:disabled),.gl-btn.quiet:hover:not(:disabled),.mx-btn.quiet:hover:not(:disabled){border-color:var(--gold-500);color:var(--gold-300)}
.dg-btn.danger,.mx-btn.danger,.gl-btn.danger,.lb-cancel{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 65%,transparent)}
.dg-btn.danger:hover:not(:disabled),.mx-btn.danger:hover:not(:disabled),.gl-btn.danger:hover:not(:disabled),.lb-cancel:hover:not(:disabled){background:color-mix(in srgb,var(--danger) 10%,transparent);border-color:var(--danger);color:var(--danger)}
.dg-btn.sm,.mx-btn.sm{min-height:44px;padding:8px 18px;font-size:11px}
.dg-btn.xl,.mx-btn.lg,.gl-btn.lg{min-height:56px;padding:14px 40px;font-size:13px}
.lb-cancel{width:100%}
.dg-btn:disabled,.mx-btn:disabled,.gl-btn:disabled,.lb-btn:disabled,.lb-cancel:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}
.gl-btn.block{display:flex;width:100%}
/* quiet text link with an underline reveal */
.dg-link{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0;border:0;background:none;color:var(--ivory-100);text-decoration:none;
  font:600 12px/1.2 var(--font-body);letter-spacing:var(--label-track);text-transform:uppercase;transition:color var(--dur-1) var(--ease)}
.dg-link .ico{width:16px;height:16px;flex:none;stroke-width:1.6}
.dg-link::after{content:"";position:absolute;left:0;right:0;bottom:10px;height:1px;background:var(--gold-500);transform:scaleX(0);transform-origin:left;transition:transform var(--dur-2) var(--ease)}
.dg-link:hover,.dg-link:focus-visible{color:var(--gold-300)}
.dg-link:hover::after,.dg-link:focus-visible::after{transform:scaleX(1)}

/* ------------------------------------------------------------------ chips: selected = gold outline and gold text */
.dg-chip,.gl-chip,.lb-chip,.lb-cat{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:6px 18px;
  border:1px solid var(--field-line);border-radius:var(--radius-1);background:transparent;color:var(--stone-400);
  font:500 14px/1.2 var(--font-body);letter-spacing:.02em;transition:border-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
.dg-chip:hover:not(:disabled),.gl-chip:hover:not(:disabled),.lb-chip:hover:not(:disabled),.lb-cat:hover:not(:disabled){border-color:var(--gold-600);color:var(--ivory-100)}
.dg-chip[aria-pressed="true"],.gl-chip[aria-pressed="true"],.lb-chip[aria-pressed="true"],.lb-cat[aria-pressed="true"]{border-color:var(--gold-500);color:var(--gold-500)}
.dg-chip:disabled{opacity:.35;cursor:not-allowed}
.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:600 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],input[type=email],input[type=password],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:var(--shadow-pressed);transition:border-color var(--dur-1) var(--ease)}
input:focus-visible,select:focus-visible,textarea:focus-visible{border-color:var(--gold-500);outline:1px solid var(--gold-500);outline-offset:2px}

/* ------------------------------------------------------------------ tables */
.dg-table{width:100%;border-collapse:collapse;font-size:14px}
.dg-table th,.dg-table td{text-align:left;padding:9px 8px;border-top:1px solid var(--line)}
.dg-table th{font-size:12px;letter-spacing:var(--label-track);text-transform:uppercase;color:var(--muted);font-weight:600;border-top:0}
.dg-table .num{text-align:right;font-family:var(--font-data);font-variant-numeric:tabular-nums}
.dg-table th.num{text-align:right}
.dg-scroll-x{overflow-x:auto}

/* ------------------------------------------------------------------ reduced motion: keep state changes, drop movement */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}