/* GROWLMASTER V2'S TOKENS, THE ONE PLACE FOR EVERY VALUE (docs/growlmaster-v2/step-1-plan.md, "GUI" and "Designed
   like Apple, themed like GrowlMaster"): colours, the 8-point space scale, radii, type, materials, depth and motion. The
   kit (ui.css) and every screen read these; no screen writes a raw number.
   Apple's way: one clean UI sans for interface text in a clear hierarchy, GrowlMaster's serif only for large titles and
   table names; content first on an 8-point grid; translucent blurred bars; soft layered depth, no hard borders; one
   accent (GrowlMaster's gold); spring-like motion, short; 44pt targets. GrowlMaster's warm dark under all of it. */
@import url('https://fonts.googleapis.com/css2?family=Frank+Ruhl+Libre:wght@700;900&display=swap');

:root {
  /* colour: GrowlMaster's warm night, layered like iOS's grouped dark; gold the one accent; red only to destroy */
  --g-bg: #0f0c09;
  --g-surface: #1c1712;
  --g-surface-2: #26201a;
  --g-surface-3: #332b23;
  --g-separator: rgba(245, 236, 217, .1);
  --g-border-faint: rgba(245, 236, 217, .07);
  /* a spell's or a thrown thing's flight on a battle (battle-fx.css), by what its name says */
  --g-fx-fire: #ff7a1a; --g-fx-fire-hot: #ffd36b; --g-fx-ice: #8fd8ff; --g-fx-zap: #fff36b; --g-fx-poison: #7bdc4a; --g-fx-arrow: #efe2c4; --g-fx-rock: #c9b48a; --g-fx-magic: #d9b3ff; --g-fx-core: #fff8e8;   /* a group's very light edge (the players at the table) */
  --g-fill: rgba(245, 236, 217, .08);
  --g-fill-strong: rgba(245, 236, 217, .14);
  --g-text: #f5ecd9;
  --g-text-2: rgba(245, 236, 217, .72);   /* secondary: 9:1 on the night (AA) */
  --g-text-3: rgba(245, 236, 217, .56);   /* tertiary, captions: 6:1 (AA) */
  --g-accent: #f0b54a;
  --g-accent-pressed: #d99b2f;
  --g-accent-tint: rgba(240, 181, 74, .16);
  --g-on-accent: #241604;
  --g-danger: #ff6b5e;
  --g-here: #45d07a;
  --g-scrim: rgba(5, 4, 3, .6);
  --g-black: #000;
  /* the Table's bar over its scene (present.css): black at half, the picture behind it; what is on it, light */
  --g-bar-dark: rgba(0, 0, 0, .5); --g-on-dark: #fff; --g-on-dark-fill: rgba(255, 255, 255, .16); --g-on-dark-press: rgba(255, 255, 255, .28);
  /* and the Toolbar beside it (inside.css), on the page: the same dark, solid; its words, lines, hover, and the gold of
     a chosen tab and a main button there (Add to battle), dark words on it */
  --g-bar-solid: #141210; --g-on-dark-2: rgba(255, 255, 255, .66); --g-on-dark-3: rgba(255, 255, 255, .36); --g-on-dark-line: rgba(255, 255, 255, .12); --g-on-dark-hover: rgba(255, 255, 255, .08);
  --g-on-dark-gold: #f0b54a; --g-on-dark-gold-pressed: #d99b2f; --g-on-dark-gold-tint: rgba(240, 181, 74, .18); --g-on-gold: #241604; --g-on-dark-ring: 0 0 0 4px rgba(240, 181, 74, .4);
  /* the table's paper, inside a table */
  --g-paper: #efe7d3;
  --g-paper-2: rgba(250, 245, 232, .82);
  --g-ink: #3a2c17;
  --g-ink-2: #6f5c3c;
  /* the printed sheet (v1's A4 page, app.css .page/.fld): its paper, its boxes, their edges, the faint ink */
  --g-sheet: #faf5e8;
  --g-sheet-2: #f2ead6;
  --g-sheet-edge: #cbb98f;
  --g-sheet-line: #b7a473;
  --g-ink-3: #8f7c56;
  --g-sheet-border: 2px;
  --g-sheet-label: 16px;        /* v1's .fld .l */
  --g-sheet-value: 26px;        /* v1's .fld .v */
  --g-sheet-score: 38px;        /* v1's .abil .vl: an ability score */
  --g-sheet-gold: #865309;      /* v1's gold: a number worked out from others (.calc, .abil .mod) */
  --g-sheet-name: 30px;         /* v1's .fld.name .v: who the thing is */
  --g-sheet-title: 15px;        /* a section's name: gold capitals (v1's ATTACKS, INVENTORY) */
  --g-sheet-line-h: 34px;       /* one written line (v1's inventory, notes) */
  --g-sheet-hp: #b32d1f;        /* v1's hit points bar */
  --g-sheet-bar: 8px;
  --g-sheet-tile: 104px;        /* v1's item tile */
  --g-sheet-doll: 340px;        /* v1's equipment doll */
  --g-map-edit: #ff7038;         /* v1's map editing marks: a line's points, handles, the pen's next stretch */
  --g-pane-open: 400px;        /* a panel's width as it opens (Maayan, 2026-11-07), until dragged or pinned */
  --g-pane-open-doc: 920px;    /* the Adventure's: its story's page whole (Jim Docs: a page 816px, its fit's 48px, the page's two margins, a scrollbar) */
  --g-pane-floor: 330px;       /* v1's --pane-floor: the least a pane's content is laid out at; a closing pane clips it */
  --g-sheet-width: 560px;       /* v1's page on a wide screen, pages side by side where they fit */
  --g-sheet-pic-h: 200px;
  --g-sheet-pic-max: 320px;     /* a place's picture at most: its boxes and description still on the first page */       /* the least it is; it grows to who the thing is beside it (v1 .chartop) */
  --g-pin-on: #865309;          /* v1's presented pin: filled brown, its eye white */
  --g-pin-on-ink: #fff;
  --g-paper-separator: rgba(58, 44, 23, .14);
  /* fine steps between the kit's spacing (v1's exact sizes in the battle strip, the map's tools and the sheet) */
  --g-f1: 1px; --g-f3: 3px; --g-f6: 6px; --g-f7: 7px; --g-f10: 10px; --g-f11: 11px; --g-f18: 18px; --g-f22: 22px; --g-f26: 26px;
  --g-f34: 34px; --g-f39: 39px; --g-f40: 40px; --g-f50: 50px; --g-f52: 52px; --g-f60: 60px; --g-f96: 96px; --g-f104: 104px; --g-f200: 200px;
  --g-track: .04em; --g-track-sm: .03em;   /* letter spacing of small capitals */
  --g-instant: 1ms;
  --g-title-min: 9ch;   /* a header's title keeps this much; its buttons go to a second line before it is cut */
  --g-tablewin-gm: #7b3fb5;   /* v1's purple GrowlMaster tag */
  --g-pop-w: 300px;   /* a dropdown of live controls (the map's grid, its picture) */
  --g-zoom-stroke: 2.4px;   /* the zoom signs weight */
  --g-bt-carry: 0 10px 12px rgba(38, 28, 14, .34);   /* a figure in hand, hanging from the finger */
  --g-gate-big-vw: 78vw;
  /* v1's map: the party's pin and its square */
  --g-map-party: #ff7038;
  --g-map-party-shadow: 0 1px 1px rgba(58, 44, 23, .22);
  --g-map-party-cell: rgba(255, 214, 90, .48);
  /* v1's battle board: a flat ruled plane, a square per side's colour, figures standing on it */
  --g-bt-floor: #faf5e8;        /* a square */
  --g-bt-rule: #cbb98f;         /* the lines between squares (the grid's gap) */
  --g-bt-frame: #b7a473;        /* the plane's edge */
  --g-bt-tilt: 48deg;
  /* the battle on the Table's felt (Maayan, 2026-11-04: as his reference, table-scenes.webp): a wooden floor, thin dark
     lines, a light rim; tilted as the felt lies */
  --g-bt-table-drop: rgba(20, 10, 2, .7);   /* a figure's shadow on the board */
  --g-bt-table-light: 53%;       /* the board's lightness; its tint and saturation the Cheats' (#a98065 at 24°, 28%) */
  --g-bt-table-rule: #7d5c45;
  --g-bt-table-frame: #dcc7a3;
  --g-bt-table-tilt: 64deg;
  --g-bt-table-oval: .66;       /* the round board's depth to its width, so tilted it lies as the felt's oval */
  --g-bt-table-glow: rgba(255, 186, 104, .45);   /* the room's candle light falling on the board */
  --g-bt-table-shade: rgba(28, 14, 4, .75);      /* its edges in the table's shadow */
  --g-bt-table-cool: rgba(110, 80, 255, .95);    /* the blue-purple light hitting the table's left (table-top.webp) */
  --g-bt-table-warm: rgba(255, 196, 70, .85);    /* the yellow light on its right */
  --g-bt-foe: #b32d1f;
  --g-bt-party: #2c6e4a;
  --g-bt-ally: #35618e;
  --g-bt-object: #625c52;
  --g-bt-sel: rgba(255, 196, 40, .55);
  --g-bt-hover: rgba(255, 214, 90, .55);
  --g-bt-hp-h: 9px;
  --g-bt-hp-track: #141210;
  --g-bt-hp-ok: #46b83f;
  --g-bt-hp-warn: #e8912a;
  --g-bt-hp-bad: #d0331f;
  /* the card strip over the board: its least height, a card's picture, the actions, the duel's middle */
  --g-bt-strip-h: 236px;
  --g-bt-pic: 132px;
  --g-bt-wpic: 72px;
  --g-bt-name: 26px;
  --g-bt-acts: 156px;
  --g-bt-duel: 180px;
  --g-bt-d20: 72px;
  --g-bt-card-max: 420px;
  --g-bt-hp-ok-ink: #2f8a2a;
  --g-bt-hp-warn-ink: #b96f13;
  --g-bt-hp-bad-ink: #b3271a;
  --g-bt-go: #7a4a17;
  --g-bt-go-frame: #4a2a0c;     /* the Attack banner's inner frame (the stacked duel's, battle-card.css) */
  --g-bt-go-point: 28px;        /* how far the attack's banner's point drops below its sides (battle-card.css) */
  --g-bt-need-ink: #f3d27a;     /* the number needed to hit, yellow in its red box */
  --g-bt-go-ink: #fffaf0;       /* words on the battle's brown buttons (Attack, Choose Target) */
  --g-bt-sel-edge: #e2a812;
  --g-bt-path: rgba(255, 255, 255, .55);   /* the road a carried piece would walk, its squares lit (battle-board.js) */
  --g-bt-ghost: .6;             /* a carried walker's ghost, its piece still standing on its square */
  --g-bt-pick: #fbf1cf;         /* a miniSheet's choice under the mouse, and the one chosen in its level (battle-choose.js) */     /* the chosen piece's square, its edge (its fill: --g-bt-sel) */

  /* materials: a bar or a window over what scrolls under it, translucent and blurred */
  --g-bar-material: rgba(18, 14, 10, .72);
  --g-window-material: rgba(32, 26, 20, .86);
  --g-blur: saturate(180%) blur(20px);

  /* space: an 8-point grid (4 the half-step) */
  --g-1: 4px; --g-2: 8px; --g-3: 12px; --g-4: 16px; --g-5: 24px; --g-6: 32px; --g-7: 48px; --g-8: 64px;
  --g-margin: 20px;   /* a screen's side margin */

  /* radius: continuous corners; one for surfaces, one for controls, round for faces */
  --g-r: 18px;
  --g-r-sm: 12px;
  --g-r-round: 999px;

  /* type: the system's UI sans for every interface word; GrowlMaster's serif for large titles and table names */
  --g-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --g-font-display: 'Frank Ruhl Libre', Georgia, serif;
  --g-t-caption: 13px; --g-t-sub: 15px; --g-t: 17px; --g-t-title3: 20px; --g-t-title2: 22px; --g-t-title: 28px; --g-t-large: 34px;
  --g-w: 400; --g-w-medium: 500; --g-w-semibold: 600; --g-w-bold: 700; --g-w-black: 900;
  --g-track-tight: -.02em;
  --g-track-caps: .04em;   /* a list's small-caps heading */

  /* sizes: a finger's tap, faces, the bars */
  --g-touch: 44px;
  --g-touch-lg: 50px;
  --g-face-xs: 20px; --g-face-sm: 28px; --g-face: 40px; --g-face-lg: 56px; --g-face-xl: 112px;
  --g-bar: 56px;
  --g-tabbar: 84px; /* 16 of it each way, its padding above and below (Maayan, 2026-11-03: "a lot!") */
  --g-rail: 248px;
  --g-narrow: 900px;   /* a phone, and any pane narrower (Maayan, 2026-11-06): its content on the phone's rules. A container query cannot read a token: each @container pane (…900px) says it again */
  --g-column: 680px;
  --g-window: 520px;
  /* what of the screen is seen (ui.js, the visualViewport: above a phone's keyboard); the whole screen until it says */
  --g-seen-h: 100dvh; --g-seen-top: 0px;
  --g-window-sheet: 760px;   /* a thing's sheet over the map (location-spots.js sheetWindow) */
  --g-logo: 420px;
  --g-logo-bar: 28px;
  --g-field-min: 140px;   /* a sheet's field, two or more across where there is room */
  --g-card-min: 160px;    /* a thing's card in a grid */
  --g-menu: 240px;        /* the ⋮ menu's width */

  /* icons: one set, one stroke */
  --g-icon: 24px; --g-icon-sm: 20px; --g-icon-box: 28px; --g-icon-lg: 30px;
  --g-icon-stroke: 1.75px;
  --g-icon-stroke-bold: 2.2px;   /* an icon that must read at a glance: the dice button (present.css) */
  --g-stroke: 2px; --g-hair: .5px;
  --g-overlap: 8px;
  --g-face-zoom: 1.12;   /* a preset's bust drawn a little larger than its circle, so its cut never shows */
  --g-press: .97;        /* a pressed control, for a moment */
  --g-bounce: .82;       /* an icon button tapped: in, and back with a bounce (ui.js, ui.css g-bounce) */
  --g-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9.5 6 6 6-6'/%3E%3C/svg%3E");
  --g-close-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round'%3E%3Cpath d='M6.5 6.5l11 11M17.5 6.5l-11 11'/%3E%3C/svg%3E");

  /* depth: soft and layered, never a hard edge */
  --g-shadow: 0 1px 2px rgba(0, 0, 0, .28), 0 6px 20px rgba(0, 0, 0, .22);
  --g-shadow-lift: 0 2px 6px rgba(0, 0, 0, .3), 0 24px 64px rgba(0, 0, 0, .5);
  --g-ring: 0 0 0 4px rgba(240, 181, 74, .4);
  --g-glow: drop-shadow(0 6px 18px rgba(0, 0, 0, .5));

  /* motion: one spring-like easing, short; the gate's doors their own heavy time */
  --g-ease: cubic-bezier(.32, .72, 0, 1);
  --g-fast: 160ms;
  --g-mid: 320ms;
  --g-slow: 480ms;
  --g-doors: 2.6s;            /* not super fast: the doors' and their sound's atmosphere (Maayan, 2026-11-03) */
  --g-doors-ease: cubic-bezier(.45, .05, .55, .95);
  --g-behind: .96;   /* the table's size behind the shut doors */
  --g-gate-curtain-logo: 1.8s;   /* v1's curtain: black, the big name growing as it is said (its voice, 1.6s), then it fades out (Maayan, 2026-11-04) */
  --g-gate-curtain-black: 1.3s;  /* the black starts lifting off the shut gate before the name fades (Maayan, 2026-11-04) */
  --g-gate-curtain-lift: 1s;     /* the black lifting off the shut gate, the big name fading out; then the doors */
  --g-gate-fade: .5s;            /* leaving a table: the shut gate fading to black */
  --g-gate-big: 640px;           /* the curtain's name (v1 min(78vw, 640px)) */
  --g-doors-after: .5s;         /* the gate starts up first, the doors part soon after (Maayan, 2026-11-03, 2026-11-04) */
  --g-iron-lift: 2.1s;          /* the portcullis clears a touch quicker than the doors */
  --g-iron-ease: cubic-bezier(.42, 0, .58, 1);
  --g-table-room-min: 560px;
  --g-table-move: 1.4s;
  --g-table-ease: cubic-bezier(.45, .05, .55, .95);   /* the Table's moves, gentle both ends: a blur comes and goes gradually */
  --g-z-cheats: 150;             /* the Table's floating Cheats: over the table, under the gate and windows */
  --g-z-gate: 200;               /* over everything in the table: nothing is ever tapped through or over it */
}
@media (prefers-reduced-motion: reduce) {
  :root { --g-fast: 1ms; --g-mid: 1ms; --g-slow: 1ms; --g-doors: .35s; --g-iron-lift: .35s; --g-doors-after: 1ms; --g-table-move: 1ms; --g-gate-curtain-logo: .1s; --g-gate-curtain-black: .1s; --g-gate-curtain-lift: .1s; --g-gate-fade: .1s; --g-press: 1; --g-bounce: 1; }
}

/* THE TABLE'S PAPER (inside a table: its panes, its sidebar, its tab bar): GrowlMaster's parchment, the same kit on it.
   The same names, day values; the gold a shade deeper so its words still read on paper (AA). */
/* and the table's windows and menus (they sit on the page's body, outside the panes): v1's parchment box */
.g-paper-scheme, body:has(#gm2Sheets) :is(.g-window, .g-menu) {
  --g-window-material: #faf5e8;
  --g-scrim: rgba(58, 44, 23, .42);
  --g-blur: none;
  --g-bg: #efe7d3;
  --g-surface: #fbf8f0;
  --g-surface-2: #f4eddd;
  --g-surface-3: #e9dfc7;
  --g-separator: rgba(58, 44, 23, .12);
  --g-border-faint: rgba(58, 44, 23, .08);
  --g-fill: rgba(58, 44, 23, .06);
  --g-fill-strong: rgba(58, 44, 23, .1);
  --g-text: #3a2c17;
  --g-text-2: rgba(58, 44, 23, .74);
  --g-text-3: rgba(58, 44, 23, .58);
  --g-accent: #9a5f0e;
  --g-accent-pressed: #7d4c0a;
  --g-accent-tint: rgba(154, 95, 14, .12);
  --g-on-accent: #fffaf0;
  --g-danger: #b3261e;
  --g-bar-material: rgba(250, 245, 232, .82);
  --g-shadow: 0 1px 2px rgba(58, 44, 23, .1), 0 6px 18px rgba(58, 44, 23, .08);
  --g-ring: 0 0 0 4px rgba(154, 95, 14, .3);
  color: var(--g-text);
}

/* WINDOWS ON A PHONE (Maayan, 2026-11-03: "modals text too small in mobile"): their words a size up, the same steps */
@media not (min-width: 900px) {
  .g-window, .lb-box { --g-t-caption: 15px; --g-t-sub: 17px; --g-t: 19px; --g-t-title3: 22px; --g-t-title2: 24px; font-size: var(--g-t); }
}