/* HORO-BEAT sim theme: GEMS. The printed 色玉 gems, rebuilt from the measured scans (reports/polish2/gem-study.md) with
   the traced numeral fonts (reports/polish2/numerals.md). Specimen + design notes: reports/polish2/gem-asset.md.
   Linked right AFTER components.css in index.html (same layer, later wins). Its colours and numeral faces are tokens
   (--hb-gem-*, --hb-font-gemnum / -boostnum / -enanum) in tokens.css, which also declares the @font-face rules.
   MARKUP: UI.gem(cost, color, cls, label) in ui/util.js renders
     <span class="hb-gem hb-gem--<size> c-<red|green|blue|none>"><span class="hb-gem__n">N</span></span>
   Size: --s (any length; .hb-gem--xs 18 / --sm 22 / --md 30 / --xl 34 px in components.css, screen CSS sets --s directly).
   Modifiers: --ena  the Ena Read gem inside card text (flat sphere, bold gothic digit, sized in em, sits in the line)
              --boost the left-edge boost gem (thinner ring, bigger numeral); goes in .hb-boost (below)
              --2    two-digit numerals ("10"; UI.gem adds it): a smaller numeral that keeps clear of the ring
              --gold the gold numeral of the 23 printings that print one (carddetail.js GOLD_NUM: the band gem, and on a
                     DR also the boost gem + .hb-boost__pow--gold)
              --kanji the builder's 赤 緑 青 colour rail (a kanji instead of a numeral)
   No colour (c-none, or no c-* class): a sumi-lacquer sphere in the same gold ring.
   Every layer is a CSS gradient (crisp at any size, no image requests); the gem is a component, so nothing here is
   decoration: Performance mode keeps it exactly as it is (no animation, no texture). */

/* the gem's diameter as an absolute length, so an em-sized gem (--ena) measures every part against the same px */
@property --gem-d { syntax: "<length>"; inherits: true; initial-value: 24px; }

@layer hb-components {
  /* the cost gem, bottom to top: its drop (box-shadow) < the gold ring (conic) with its tube shade and, at the top, the
     shadow across its inner edge < the colour sphere with that shadow's inner half (::before, masked to the sphere) <
     the numeral (white, extruded straight down in near-black). Below ~16 px the ring and the drop keep 1 px and the
     numeral grows a little and thickens (the print does the same on its smaller gems). */
  .hb-gem {
    --gem-d: var(--s);
    --gem-rw: max(1px, var(--gem-d) * .059);       /* ring width: .118 R */
    --gem-ti: .27; --gem-to: .3; --gem-ts: .35;     /* tube: dark at the inner edge (alpha), at the outer edge, from where */
    --gem-hd: .0135; --gem-ho: .008;                /* the ring's shadow at 12 o'clock: depth into the sphere, onto the ring (x D) */
    --gem-hollow: var(--hb-gem-hollow);
    --gem-ext: max(.6px, var(--gem-d) * .034);      /* numeral extrusion: .034 D */
    --gem-ring: var(--hb-gem-ring);
    --gem-sph: var(--hb-gem-none);
    --gem-face: var(--hb-gem-face);
    --gem-ena: var(--hb-gem-ena-none); --gem-ena-lo: var(--hb-gem-ena-none-lo); --gem-ena-ink: var(--hb-gem-ena-none-ink);
    position: relative; display: inline-grid; place-items: center; flex: none; box-sizing: border-box;
    width: var(--gem-d); height: var(--gem-d); padding: 0; border: 0; border-radius: 50%;
    background:
      radial-gradient(circle calc(var(--gem-d) * (.5 - var(--gem-ho)) - var(--gem-rw)) at 50% calc(50% - var(--gem-d) * var(--gem-ho) * 2),
        var(--gem-hollow) calc(100% - .5px), transparent calc(100% + .5px)),
      radial-gradient(circle closest-side, transparent calc(100% - var(--gem-rw) - .5px), rgba(0,0,0,var(--gem-ti)) calc(100% - var(--gem-rw)),
        transparent calc(100% - var(--gem-rw) * .6), transparent calc(100% - var(--gem-rw) * var(--gem-ts)),
        rgba(0,0,0,calc(var(--gem-to) * .25)) calc(100% - var(--gem-rw) * var(--gem-ts) * .5), rgba(0,0,0,var(--gem-to)) 100%),
      var(--gem-ring);
    background-color: var(--hb-gem-ring-flat);
    /* the drop: a disc of 1.01 R shifted down .094 R (a crescent under the ring) */
    box-shadow: 0 max(1px, var(--gem-d) * .047) calc(var(--gem-d) * .01) calc(var(--gem-d) * .005) var(--hb-gem-drop);
    color: var(--gem-face); font: inherit; -webkit-text-stroke: 0; vertical-align: middle; }
  .hb-gem::before { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle calc(var(--gem-d) * (.5 + var(--gem-hd)) - var(--gem-rw)) at 50% calc(50% + var(--gem-d) * var(--gem-hd) * 2),
        transparent calc(100% - .7px), var(--gem-hollow) calc(100% + .3px)),
      var(--gem-sph);
    -webkit-mask: radial-gradient(circle closest-side, #000 calc(100% - var(--gem-rw) - .4px), transparent calc(100% - var(--gem-rw) + .4px));
            mask: radial-gradient(circle closest-side, #000 calc(100% - var(--gem-rw) - .4px), transparent calc(100% - var(--gem-rw) + .4px)); }
  .hb-gem.c-red   { --gem-sph: var(--hb-gem-red);   --gem-ena: var(--hb-gem-ena-red);   --gem-ena-lo: var(--hb-gem-ena-red-lo);   --gem-ena-ink: var(--hb-gem-ena-red-ink); }
  .hb-gem.c-green { --gem-sph: var(--hb-gem-green); --gem-ena: var(--hb-gem-ena-green); --gem-ena-lo: var(--hb-gem-ena-green-lo); --gem-ena-ink: var(--hb-gem-ena-green-ink); }
  .hb-gem.c-blue  { --gem-sph: var(--hb-gem-blue);  --gem-ena: var(--hb-gem-ena-blue);  --gem-ena-lo: var(--hb-gem-ena-blue-lo);  --gem-ena-ink: var(--hb-gem-ena-blue-ink); }
  /* the numeral: HB Cost, .668 D (digits .468 D tall), centred .009 D below the middle as printed */
  .hb-gem__n { position: relative; padding: calc(var(--gem-d) * .018) 0 0; color: var(--gem-face);
    font: 400 calc(var(--gem-d) * .668 + clamp(0px, (40px - var(--gem-d)) * .08, 2px))/1 var(--hb-font-gemnum);
    font-synthesis: none; font-variant-numeric: normal; font-kerning: normal; letter-spacing: 0; white-space: nowrap;
    -webkit-text-stroke: clamp(0px, (24px - var(--gem-d)) * .05, .35px) var(--gem-face); paint-order: stroke fill;
    text-shadow: 0 calc(var(--gem-ext) * .34) 0 var(--hb-gem-ink), 0 calc(var(--gem-ext) * .67) 0 var(--hb-gem-ink), 0 var(--gem-ext) 0 var(--hb-gem-ink); }
  .hb-gem > .hb-icon { position: relative; color: var(--gem-face); }
  .hb-gem--2 > .hb-gem__n { font-size: calc(var(--gem-d) * .6); letter-spacing: -.01em; }
  .hb-gem--gold { --gem-face: var(--hb-gem-face-gold); }
  /* the builder's colour rail: the colour's kanji in the gem */
  .hb-gem.hb-gem--kanji { font: inherit; -webkit-text-stroke: 0; }
  .hb-gem--kanji > .hb-gem__n { padding: 0; font: 800 calc(var(--gem-d) * .5)/1 var(--hb-font-display); -webkit-text-stroke: 0; }

  /* the boost gem (the card's left edge): the same gem, ring .104 R and paler, numeral .551 D tall, a hair above the
     middle, its shadow a little lighter */
  .hb-gem.hb-gem--boost { --gem-rw: max(1px, var(--gem-d) * .052); --gem-ring: var(--hb-gem-ring-boost); --gem-ti: .14; --gem-to: .4; --gem-ts: .45;
    --gem-hd: .02; --gem-ho: .006; --gem-hollow: var(--hb-gem-hollow-boost); --gem-ext: max(.6px, var(--gem-d) * .03); }
  .hb-gem--boost > .hb-gem__n { padding: 0 0 calc(var(--gem-d) * .048); font-size: calc(var(--gem-d) * .786); -webkit-text-stroke: 0; }

  /* the Ena Read gem, inline in card text after エナ詠み / "Ena Read": 1.43 em across (the print: 24.7 px on a 17.2 px
     em), its middle on the middle of the kana, the line box unchanged. Flat sphere; the digit's shadow goes right. */
  .hb-gem.hb-gem--ena { --s: 1.43em; --gem-rw: max(1px, var(--gem-d) * .0595); --gem-ring: var(--hb-gem-ring-ena); --gem-ti: 0; --gem-to: .35; --gem-ts: .5;
    --gem-hd: .025; --gem-ho: .008; --gem-hollow: var(--hb-gem-hollow-ena);
    --gem-sph: radial-gradient(circle closest-side, var(--gem-ena) 74%, var(--gem-ena-lo) calc(100% - var(--gem-rw)));
    margin: 0 .18em; vertical-align: .07em;
    /* the drop, soft (blur ~1 px at text size): a sub-pixel blur with a spread snaps to the device grid, so the crescent
       went from heavy to gone with the gem's sub-pixel position in the line */
    box-shadow: 0 calc(var(--gem-d) * .045) calc(var(--gem-d) * .05) 0 var(--hb-gem-drop); }
  .hb-gem--ena > .hb-gem__n { padding: 0; font: 400 calc(var(--gem-d) * .846)/1 var(--hb-font-enanum); -webkit-text-stroke: 0;
    text-shadow: max(.75px, var(--gem-d) * .045) calc(var(--gem-d) * .016) 0 var(--gem-ena-ink); }
  :lang(en) > .hb-gem--ena { margin-left: .3em; }
  .hb-pill > .hb-gem--ena { margin: 0; }

  /* BOOST mark: the card's left-edge boost as a lacquer plate in the detail's tag row (the type tab's sibling: same
     height, gold keyline). The gem sits in the plate's round end; "+2000" in the boost numeral face.
     <span class="hb-boost"> UI.gem(boostCost, color, 'hb-gem--boost') <span class="hb-boost__pow">+2000</span></span>
     (a DR gold-numeral printing: 'hb-gem--boost hb-gem--gold' + .hb-boost__pow--gold) */
  .hb-boost { display: inline-flex; align-items: center; gap: 6px; flex: none; box-sizing: border-box; height: 22px; padding: 0 8px 0 1px;
    border: 1px solid var(--hb-kin); border-radius: 11px var(--hb-r-xs) var(--hb-r-xs) 11px; background-color: var(--hb-lacquer);
    color: var(--hb-glyph-fill); line-height: 1; white-space: nowrap; vertical-align: middle; }
  .hb-boost > .hb-gem { --s: 18px; }
  .hb-boost__pow { padding-top: 1px; font: 400 21px/1 var(--hb-font-boostnum); font-synthesis: none; font-kerning: normal; letter-spacing: 0; }
  .hb-boost__pow--gold { color: var(--hb-gem-face-gold); }   /* the DR printings' gold "+2000" (with .hb-gem--gold on the gem) */
}