/* ---------- Кубик як інформація: розгортка граней і картка (ui/dice-ui.js) ---------- */

/* Мапа можливостей кубика: кожна грань — кістяна плитка з чорнилом, як на самому кубику.
   Поточна грань підсвічена латунню. Сторона плитки (--dg) — єдина ручка розміру: усе
   всередині задано в em від неї, тож розгортку можна збільшити з місця виклику
   (див. .pick-layer / .option-cards), нічого більше тут не правлячи. */
.die-grid {
  --dg: clamp(15px, 4.4dvh, 21px);
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), 1fr);
  gap: calc(var(--dg) * 0.11);
  justify-items: center;
}
.dg-cell {
  position: relative;
  width: var(--dg);
  height: var(--dg);
  font-size: var(--dg);
  border-radius: calc(var(--dg) * 0.19);
  background: linear-gradient(180deg, #f2e9d4, #d6c7a8);
  border: 1px solid #00000066;
  box-shadow: 0 1px 2px #0009, 0 1px 0 rgba(255, 255, 255, 0.35) inset;
  display: flex; align-items: center; justify-content: center;
}
.dg-cell.on { box-shadow: 0 0 0 2px var(--brass-lit), 0 1px 3px #000; z-index: 1; }
/* Змінені грані світяться: мох — покращення, багрянець — втрата (діалог результату дії). */
.dg-cell.up { box-shadow: 0 0 0 2px var(--moss), 0 0 10px var(--moss); z-index: 1; }
.dg-cell.down { box-shadow: 0 0 0 2px var(--blood), 0 0 10px var(--blood); z-index: 1; }

/* Вміст плитки (faceInk): емблема по центру, значення в правому нижньому куті, крит і пробій
   на ріжках. Усе в em від сторони плитки — її задає носій (--dg), а пропорції всередині від
   розміру не залежать. Колір типу приходить інлайном від dieGrid(); палітра типів
   живе в die.js, одна на розгортку й на сам кубик. */
.face-ink .dg-ico { --art-size: 58%; opacity: 0.85; }
.face-ink b {
  position: absolute; right: 0.05em; bottom: -0.04em;
  font-size: 0.44em; font-weight: 800;
  text-shadow: 0 0 2px #ffffffcc, 0 0 3px #ffffff88;
}
.face-ink .dg-mark {
  position: absolute; top: -0.14em; right: -0.1em;
  font-style: normal; font-weight: 800; font-size: 0.4em;
  text-shadow: 0 1px 1px #000;
}
.face-ink .dg-mark.crit { color: #ffcf5c; }
.face-ink .dg-mark.pierce { color: #ff8f6a; top: auto; bottom: -0.14em; }

/* ---------- Залита плитка (dieGrid({ lit: true })) ---------- */

/* Плитка діалогу деталей кубика: не кістка з чорнилом, а грань, залита кольором свого типу —
   рівно так само, як світиться сама грань на столі. Причина та сама, що й на кубику: тип
   каже колір усієї плитки, і на ній лишається одне завдання — показати число. У дрібній
   розгортці (15px у шторці) так не вийшло б, а тут плитка втричі більша.
   Тон приходить каналами (--ink/--hot), тож альфу можна домішувати без color-mix(). */
.die-grid.lit .dg-cell {
  gap: 0.06em;
  border-color: rgb(var(--hot) / 0.45);
  background: linear-gradient(180deg, rgb(var(--hot) / 0.78), rgb(var(--ink) / 0.92)), var(--wood-black);
  box-shadow: 0 0 0.24em -0.08em rgb(var(--hot) / 0.7), inset 0 -0.12em 0.24em rgba(0, 0, 0, 0.4);
}
/* Емблема — білим силуетом із відсвітом свого типу: темне чорнило на залитій плитці
   пропадало б, а колір типу вже сказаний самою заливкою. */
.die-grid.lit .face-ink .dg-ico {
  --art-size: 36%;
  opacity: 1;
  filter: brightness(0) invert(1) drop-shadow(0 0 0.06em rgb(var(--hot)));
}
/* Число стає в рядок з емблемою, а не в куток плитки: на великій плитці воно головне. */
.die-grid.lit .face-ink b {
  position: static;
  font-size: 0.34em;
  color: #fff6ea;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
/* Випала грань: латунна оправа й підпис. Оправи мало — у кубика бувають дві однакові грані,
   і без підпису «випало» не видно, котра з них саме та, що лежить на столі. */
.die-grid.lit .dg-cell.on {
  border-color: var(--brass-lit);
  background: linear-gradient(180deg, rgb(var(--hot)), rgb(var(--ink))), var(--wood-black);
  box-shadow: 0 0 0 1px var(--brass-lit), 0 0 0.44em -0.06em rgba(242, 203, 132, 0.9),
    inset 0 -0.12em 0.24em rgba(0, 0, 0, 0.35);
}
.dg-rolled {
  position: absolute; left: 50%; bottom: -0.15em;
  transform: translateX(-50%);
  font-size: 0.16em; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  white-space: nowrap;
  color: #1a1108; background: var(--brass-lit);
  border-radius: 999px; padding: 0.15em 0.6em;
}
/* Порожня грань — заглиблення без вмісту: ні заливки, ні світла. Малювати на ній хоч що
   означало б обіцяти ефект, якого немає. */
.die-grid.lit .dg-cell.blank {
  border: 1px dashed var(--edge);
  background: rgba(255, 240, 220, 0.03);
  box-shadow: none;
}

/* ---------- Картка кубика ---------- */

.die-card {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  max-height: 100%;
  padding: 8px 10px;
  border-radius: 12px;
  background: linear-gradient(180deg, var(--panel-top), var(--panel-bottom));
  border: 1px solid var(--edge-lit);
  box-shadow: 0 14px 34px -14px #000;
}
.dc-name {
  max-width: 18ch;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--font-display);
  font-size: 1em; font-weight: 400; color: var(--brass-lit);
}
/* Паспорт кубика під назвою: скільки граней і яка рідкість. Розріджені прописні й тьмяний
   тон — це довідка про кубик, а не його ім'я, і сперечатися з назвою за погляд вона не має. */
.dc-sub {
  /* Підтягнута до назви впритул: разом вони одна шапка картки, а вже під ними — розкладка. */
  margin-top: -0.3em;
  font-size: 0.66em; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-dim);
}
.dc-fig { display: flex; align-items: flex-end; justify-content: center; }
.dc-foot { font-size: 0.78em; color: var(--ink-dim); text-align: center; }

/* Рідкість — кольором рамки, як і на кубику в треї: та сама шкала, той самий колір. */
.die-card.uncommon { border-color: #2f4d63; }
.die-card.rare {
  border-color: #4b3573;
  box-shadow: 0 14px 34px -14px #000, 0 0 24px -10px var(--arcane);
}
.die-card.rare .dc-name { color: var(--arcane-lit); }
.die-card.uncommon .dc-name { color: var(--steel-lit); }
.die-card.pickme {
  border-color: var(--brass-lit);
  box-shadow: 0 0 26px -8px rgba(242, 203, 132, 0.6), 0 20px 46px -20px #000;
}

/* Ворожий кубик — у крівʼяній оправі: біля нього немає кнопки перекиду, і сплутати, чий це
   кидок, не можна навіть краєм ока. */
.die-card.foe { border-color: #7d3228; box-shadow: 0 14px 34px -14px #000, 0 0 18px -8px var(--blood); }
.die-card.foe .dc-name { color: var(--blood-lit); }
.dc-tag {
  font-family: var(--font-ui);
  font-size: 0.72em; font-weight: 600;
  color: #e8b3a8; background: #3a1d16; border: 1px solid #6d2a20;
  border-radius: 999px; padding: 0 6px; margin-left: 4px;
}

/* ---------- Чипи граней і легенда ---------- */

.face { display: inline-flex; align-items: center; gap: 1px; font-size: 0.7em; white-space: nowrap; }
.face .val { font-weight: 700; }
.face .mark { font-weight: 700; font-size: 0.9em; }
.face .mark.crit { color: #ffcf5c; }
.face .mark.pierce { color: #ff8f6a; }
.face.f-attack .val { color: #ff9c85; }
.face.f-shield .val { color: var(--steel-lit); }
.face.f-heal .val { color: #8fd898; }
.face.f-mana .val { color: #bb9df7; }
.face.f-poison .val { color: #b3dc55; }
.face.f-blank { opacity: 0.45; }

.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 0.86em; color: var(--ink-muted); }
/* Тільки прямі діти: `.legend span` ловило й .art-fb усередині іконки, перебивало його
   display: none — і поруч із PNG світився ще й emoji-запасний варіант. */
.legend > span { display: inline-flex; align-items: center; gap: 4px; }
.legend .crit { color: #ffcf5c; }
.legend .pierce { color: #ff8f6a; }