/* ═══════════════════════════════════════════════════════════════════
   Seven Down — the game's own furniture.

   What was here before was dark translucent rounded rectangles with 1px
   white borders and a system font: the default look of every generated
   dashboard, and it said nothing about this game. The game IS a die.
   Bone and pips and a rule about opposite faces. That is the material
   the interface should be cut from.

   Three ideas run through everything below:
     1. BONE AND INK, not grey-on-grey. The die's ivory is the light,
        a warm near-black is the dark, and one gold is the accent.
     2. THINGS, not panels. Buttons have a lip and press into it.
        Nothing floats on a translucent sheet.
     3. PIPS ARE THE LANGUAGE. Numbers appear as die faces wherever a
        number is what is meant.
   Every token is namespaced --g-*. The first version was not, and the pages
   already define --ink as a near-WHITE text colour while this file meant it as
   a near-black. The page's own :root won the cascade and every pip rendered
   white dots on a white face — invisible. Shared tokens must not collide.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --g-bone:#f4efe3;          /* the die */
  --g-bone-dim:#c9c0ad;
  --g-ink:#15110d;           /* warm black, not blue-grey */
  --g-ink-2:#221b15;
  --g-ink-3:#2f251d;
  --g-gold:#f0a13c;
  --g-gold-deep:#a8641c;
  --g-good:#7fd39a;
  --g-bad:#e2604f;
  --g-edge:rgba(0,0,0,.55);
}

/* Paper grain. Flat fills are most of what makes a UI look printed rather
   than made; a little noise puts a surface on it. Inlined as a data URI so
   nothing is fetched. */
.sd-grain{position:relative}
.sd-grain::after{content:"";position:absolute;inset:0;pointer-events:none;
  opacity:.5;mix-blend-mode:overlay;border-radius:inherit;
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'>\
<filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/>\
</filter><rect width='120' height='120' filter='url(%23n)' opacity='.35'/></svg>")}

/* ---- buttons: objects with a lip -------------------------------------- */
.gbtn{
  position:relative;font:inherit;cursor:pointer;
  font-weight:700;letter-spacing:.01em;color:var(--g-bone);
  background:linear-gradient(#3b2f24,#2a211a);
  border:1px solid rgba(0,0,0,.6);
  border-radius:12px;
  padding:13px 18px;
  /* the lip: a hard bottom edge and a light top edge, so it reads as cut
     from something rather than drawn on glass */
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),
             inset 0 -2px 0 rgba(0,0,0,.45),
             0 3px 0 var(--g-edge),
             0 6px 14px rgba(0,0,0,.42);
  transition:transform .06s ease, box-shadow .06s ease, filter .15s ease;
}
.gbtn:hover{filter:brightness(1.14)}
.gbtn:active,.gbtn.is-down{
  transform:translateY(3px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),
             inset 0 -1px 0 rgba(0,0,0,.4),
             0 0 0 var(--g-edge),
             0 2px 6px rgba(0,0,0,.4);
}
.gbtn:disabled{opacity:.38;cursor:default;transform:none}
.gbtn--gold{background:linear-gradient(#ffbc5e,#e08c26);color:#2a1704;
  border-color:rgba(0,0,0,.45);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),
             inset 0 -2px 0 rgba(0,0,0,.22),
             0 3px 0 var(--g-gold-deep),
             0 6px 16px rgba(214,128,32,.32)}
.gbtn--g-gold:active{box-shadow:inset 0 1px 0 rgba(255,255,255,.4),
             0 0 0 var(--g-gold-deep), 0 2px 6px rgba(0,0,0,.35)}
.gbtn--quiet{background:linear-gradient(#2b241d,#201a15)}

/* ---- pips: a number, drawn the way this game draws numbers ------------- */
.pip{display:inline-grid;grid-template-columns:repeat(3,1fr);
  grid-template-rows:repeat(3,1fr);gap:1px;
  width:1.15em;height:1.15em;padding:.16em;
  background:var(--g-bone);border-radius:.22em;
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.18), 0 1px 2px rgba(0,0,0,.5);
  vertical-align:-.22em}
.pip i{display:block;border-radius:50%;background:var(--g-ink);
  width:100%;height:100%;align-self:center;justify-self:center}
.pip.dim{background:var(--g-bone-dim)}
/* A pip inside a wrapper is inline content and keeps its baseline descent, so
   it sits low no matter what the row does. Flex removes the baseline entirely. */
.pipwrap{display:flex;align-items:center;line-height:0;flex:0 0 auto}
/* positions, so one element can be any face */
.pip .p1{grid-area:1/1} .pip .p2{grid-area:1/3} .pip .p3{grid-area:2/1}
.pip .p4{grid-area:2/2} .pip .p5{grid-area:2/3} .pip .p6{grid-area:3/1}
.pip .p7{grid-area:3/3} .pip .p8{grid-area:1/2} .pip .p9{grid-area:3/2}

/* ---- slabs: a card that is a thing, not a sheet of glass --------------- */
.slab{
  background:
    linear-gradient(rgba(255,255,255,.05),rgba(255,255,255,0) 40%),
    linear-gradient(#2b2219,#1b1510);
  border:1px solid rgba(0,0,0,.6);border-radius:18px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.13),
             inset 0 -3px 0 rgba(0,0,0,.5),
             0 18px 44px rgba(0,0,0,.55);
}

/* ---- type: contrast of weight and tracking, since there is no webfont --- */
.gtitle{font-weight:800;letter-spacing:.02em;color:var(--g-bone);
  text-shadow:0 2px 0 rgba(0,0,0,.45), 0 10px 30px rgba(0,0,0,.55)}
.glabel{font-size:10.5px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--g-bone-dim)}
.gnum{font-variant-numeric:tabular-nums;font-weight:800;color:var(--g-bone)}