/* Smocza Matematyka — module 'ognisko' (Ognisko Pamięci). All selectors start with .mod-ognisko.
 * Night village 110–712 (lantern garland, houses, campfire), keypad on the right, material panel bottom left,
 * Księga as a full-width page over the village. Success = gold glow, mistakes = soft amber, never red.
 */

.mod-ognisko {
  background: #141029;
}

/* ---------- the village ---------- */

.mod-ognisko .og-scene {
  position: absolute;
  left: 0;
  top: 110px;
  width: 1040px;
  height: 602px;
  overflow: hidden;
}
.mod-ognisko .og-scene::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 70% 60% at 34% 72%, rgba(255, 196, 90, 0.28), rgba(255, 196, 90, 0) 70%);
  opacity: 0;
  transition: opacity 1.2s ease;
}
.mod-ognisko.og-finale .og-scene::after {
  opacity: 1;
}
.mod-ognisko .og-svg {
  display: block;
}

.mod-ognisko .og-star {
  animation: og-twinkle 5.2s ease-in-out infinite;
}
.mod-ognisko .og-star.s1 {
  animation-duration: 6.4s;
  animation-delay: -2s;
}
.mod-ognisko .og-star.s2 {
  animation-duration: 7.6s;
  animation-delay: -4s;
}
.mod-ognisko .og-star.s3 {
  animation: none;
  opacity: 0.55;
}
@keyframes og-twinkle {
  0%, 100% { opacity: 0.9; }
  50% { opacity: 0.3; }
}

/* windows light up with the lanterns */
.mod-ognisko .og-win {
  fill: #231c38;
  transition: fill 0.9s ease;
}
.mod-ognisko .og-win.is-lit {
  fill: #ffd98a;
}
.mod-ognisko .og-wglow {
  opacity: 0;
  transition: opacity 0.9s ease;
}
.mod-ognisko .og-wglow.is-lit {
  opacity: 1;
}

/* the campfire grows with every lantern (--fire 0.32 … 1) */
.mod-ognisko .og-fire {
  --fire: 0.32;
}
.mod-ognisko .og-flames {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transform: scale(var(--fire));
  transition: transform 0.9s cubic-bezier(0.3, 0.7, 0.3, 1);
}
.mod-ognisko .og-flames path {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: og-flick 2.2s ease-in-out infinite;
}
.mod-ognisko .og-flames .f2 {
  animation-duration: 1.7s;
  animation-delay: -0.6s;
}
.mod-ognisko .og-flames .f3 {
  animation-duration: 1.3s;
  animation-delay: -0.3s;
}
@keyframes og-flick {
  0%, 100% { transform: scale(1, 1); }
  50% { transform: scale(0.95, 1.06); }
}
.mod-ognisko .og-fire-glow {
  opacity: calc(0.15 + 0.85 * var(--fire));
  transition: opacity 0.9s ease;
}
.mod-ognisko .og-embers {
  animation: og-ember 3.2s ease-in-out infinite;
}
@keyframes og-ember {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.75; }
}

/* ---------- lanterns ---------- */

.mod-ognisko .og-l-swing {
  transform-box: fill-box;
  transform-origin: 50% 0;
}
.mod-ognisko .og-l-glow {
  opacity: 0;
  transition: opacity 0.6s ease;
}
.mod-ognisko .og-l-on {
  opacity: 0;
  transition: opacity 0.45s ease;
}
.mod-ognisko .og-l-err {
  fill: var(--err);
  opacity: 0;
}
.mod-ognisko .og-l-flame {
  fill: #fffbe6;
  opacity: 0;
  transition: opacity 0.45s ease;
}
.mod-ognisko .og-l-ribs {
  fill: none;
  stroke: #3a3157;
  stroke-width: 1.6;
  transition: stroke 0.45s ease;
}
.mod-ognisko .og-l-ring {
  fill: none;
  stroke: #fff6d8;
  stroke-width: 3;
  stroke-dasharray: 7 7;
  opacity: 0;
}
.mod-ognisko .og-lantern.is-lit .og-l-on,
.mod-ognisko .og-lantern.is-lit .og-l-glow,
.mod-ognisko .og-lantern.is-lit .og-l-flame {
  opacity: 1;
}
.mod-ognisko .og-lantern.is-lit .og-l-ribs {
  stroke: rgba(170, 112, 0, 0.45);
}
.mod-ognisko .og-lantern.is-next .og-l-ring {
  opacity: 0.75;
  animation: og-ring 6s linear infinite;
}
.mod-ognisko .og-lantern.is-next .og-l-swing {
  animation: og-sway 3.4s ease-in-out infinite;
}
.mod-ognisko .og-lantern.is-ignite .og-l-swing {
  animation: og-ignite 0.75s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.mod-ognisko .og-lantern.is-wave .og-l-swing {
  animation: og-swing 1.3s ease-in-out;
}
.mod-ognisko .og-lantern.is-flicker .og-l-err {
  animation: og-flicker 1.25s ease-in-out;
}
.mod-ognisko .og-lantern.is-flicker .og-l-swing {
  animation: og-sway 1.25s ease-in-out;
}
@keyframes og-ring {
  to { stroke-dashoffset: -84; }
}
@keyframes og-sway {
  0%, 100% { transform: rotate(-2.5deg); }
  50% { transform: rotate(2.5deg); }
}
@keyframes og-swing {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(7deg); }
  60% { transform: rotate(-5deg); }
  85% { transform: rotate(2deg); }
}
@keyframes og-ignite {
  0% { transform: scale(1); }
  40% { transform: scale(1.18); }
  100% { transform: scale(1); }
}
@keyframes og-flicker {
  0%, 100% { opacity: 0; }
  20% { opacity: 0.55; }
  45% { opacity: 0.12; }
  65% { opacity: 0.45; }
}

/* sparks when a lantern lights */
.mod-ognisko .og-sparks {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
}
.mod-ognisko .og-spark {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle, #fffbe6 0 30%, #ffd23f 55%, rgba(242, 183, 5, 0) 72%);
  animation: og-spark 0.85s ease-out forwards;
}
@keyframes og-spark {
  0% { transform: rotate(var(--a)) translateY(0) scale(0.6); opacity: 1; }
  100% { transform: rotate(var(--a)) translateY(-44px) scale(1.1); opacity: 0; }
}

/* invisible zones for the dragon's pointing hand and glow */
.mod-ognisko .og-zone {
  position: absolute;
  pointer-events: none;
  border-radius: 26px;
}
.mod-ognisko .og-zone-lanterns {
  left: 8px;
  top: 114px;
  width: 684px;
  height: 204px;
}
.mod-ognisko .og-zone-fire {
  left: 246px;
  top: 530px;
  width: 212px;
  height: 172px;
}

/* ---------- task band: the fact card ---------- */

.mod-ognisko .task-band {
  z-index: 3;
  gap: 24px; /* hourglass, Księga and the ear: >= 24 px apart (§1.4) */
}
.mod-ognisko .og-card {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-num);
  font-size: 70px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  line-height: 1;
}
.mod-ognisko .og-card .og-op {
  color: var(--ink-soft);
  font-size: 62px;
  min-width: 34px;
  text-align: center;
}
.mod-ognisko .og-slot {
  min-width: 118px;
  height: 86px;
  padding: 0 16px;
  border-radius: 20px;
  border: 4px dashed #cdbd95;
  background: #fff;
  color: #b9ab86;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.25s, border-color 0.25s, box-shadow 0.25s;
}
.mod-ognisko .og-slot.is-typing {
  border-style: solid;
  border-color: var(--ink);
  color: var(--ink);
}
.mod-ognisko .og-slot.is-done {
  border: 4px solid var(--gold-deep);
  background: var(--gold-soft);
  color: var(--gold-deep);
  box-shadow: 0 0 0 7px rgba(242, 183, 5, 0.3);
  animation: og-pop 0.45s ease;
}
.mod-ognisko .og-slot.is-wrong {
  border: 4px solid var(--err);
  background: var(--err-soft);
  color: #a65a12;
}
@keyframes og-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.12); }
  100% { transform: scale(1); }
}
.mod-ognisko .og-card-text .og-band-text {
  font-family: var(--font);
  font-size: 36px;
  font-weight: 700;
  color: var(--ink);
}

.mod-ognisko .og-book-btn,
.mod-ognisko .og-hour {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 3px solid var(--line);
  background: var(--panel);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
  flex: none;
  padding: 0;
}
.mod-ognisko .og-book-btn {
  color: #9a5f22;
}
.mod-ognisko .og-hour {
  display: none;
}
.mod-ognisko .og-hour.is-allowed {
  display: flex;
}
.mod-ognisko .og-hour.is-on {
  border-color: var(--gold);
  background: var(--gold-soft);
  box-shadow: 0 0 0 5px rgba(242, 183, 5, 0.35), var(--shadow-sm);
}
.mod-ognisko .og-sand-top,
.mod-ognisko .og-sand-bot {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
.mod-ognisko .og-sand-bot {
  transform: scaleY(0.15);
}
.mod-ognisko .og-sand-flow {
  opacity: 0;
}
.mod-ognisko .og-hour.is-running .og-sand-top {
  animation: og-sand-top var(--sand, 60s) linear forwards;
}
.mod-ognisko .og-hour.is-running .og-sand-bot {
  animation: og-sand-bot var(--sand, 60s) linear forwards;
}
.mod-ognisko .og-hour.is-running .og-sand-flow {
  opacity: 1;
}
.mod-ognisko .og-hour.is-empty .og-sand-top {
  transform: scaleY(0);
}
.mod-ognisko .og-hour.is-empty .og-sand-bot {
  transform: scaleY(1);
}
@keyframes og-sand-top {
  from { transform: scaleY(1); }
  to { transform: scaleY(0); }
}
@keyframes og-sand-bot {
  from { transform: scaleY(0.15); }
  to { transform: scaleY(1); }
}

/* ---------- keypad ---------- */

.mod-ognisko .og-pad {
  position: absolute;
  left: 708px;
  top: 112px;
  z-index: 6;
  opacity: 0;
  transform: translateX(60px);
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.5s cubic-bezier(0.3, 0.7, 0.25, 1);
}
.mod-ognisko .og-pad::before {
  content: '';
  position: absolute;
  inset: -8px -10px;
  border-radius: 28px;
  background: rgba(30, 23, 56, 0.9);
  border: 2px solid rgba(255, 240, 200, 0.16);
  box-shadow: 0 8px 24px rgba(5, 3, 12, 0.45);
}
.mod-ognisko.og-playing .og-pad {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.mod-ognisko.og-choosing .og-pad,
.mod-ognisko.og-finale .og-pad,
.mod-ognisko.og-closed .og-pad {
  opacity: 0;
  transform: translateX(60px);
  pointer-events: none;
}
.mod-ognisko .og-pad .numin {
  position: relative;
  gap: 10px;
}
.mod-ognisko .og-pad .keypad {
  gap: 12px 14px;
}
.mod-ognisko .og-pad .numin-display {
  transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
}
.mod-ognisko .og-pad .numin-display.og-err {
  border-color: var(--err);
  box-shadow: 0 0 0 6px var(--err-soft);
}
.mod-ognisko .og-pad.is-solved .numin-display {
  border-color: var(--gold-deep);
  background: var(--gold-soft);
  color: var(--gold-deep);
}
.mod-ognisko .og-pad .numin.locked .key {
  opacity: 0.55;
}
.mod-ognisko .og-pad .key.og-press {
  background: var(--gold-soft);
  transform: translateY(3px);
  box-shadow: 0 0 0 4px var(--gold);
}

/* ---------- material panel (rung 1–3) ---------- */

.mod-ognisko .og-mat {
  position: absolute;
  left: 16px;
  bottom: 6px;
  width: 672px;
  padding: 10px;
  z-index: 5;
  border-radius: 26px;
  background: var(--panel);
  border: 3px solid var(--line);
  box-shadow: 0 -6px 24px rgba(10, 6, 20, 0.45), var(--shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(calc(100% + 24px));
  pointer-events: none;
  transition: transform 0.5s cubic-bezier(0.3, 0.7, 0.25, 1), opacity 0.3s ease;
}
.mod-ognisko .og-mat.is-open {
  opacity: 1;
  transform: none;
}

/* amber outline of the place (rung 1) and gold pulses (rung 2–3) */
.mod-ognisko .og-place {
  position: absolute;
  border-radius: 12px;
  pointer-events: none;
  z-index: 3;
}
.mod-ognisko .og-place.is-amber,
.mod-ognisko .og-nb-nest.is-amber {
  box-shadow: 0 0 0 5px var(--err);
  animation: og-amber 1.6s ease-in-out 2;
}
@keyframes og-amber {
  0%, 100% { box-shadow: 0 0 0 5px var(--err); }
  50% { box-shadow: 0 0 0 5px var(--err), 0 0 18px 6px rgba(240, 140, 46, 0.45); }
}
.mod-ognisko .is-pulse {
  animation: og-pulse 0.5s ease;
}
@keyframes og-pulse {
  0% { box-shadow: 0 0 0 0 rgba(242, 183, 5, 0); }
  35% { box-shadow: 0 0 0 6px rgba(242, 183, 5, 0.85), 0 0 16px 4px rgba(242, 183, 5, 0.5); }
  100% { box-shadow: 0 0 0 3px rgba(242, 183, 5, 0.5); }
}

/* strip board */
.mod-ognisko .og-sb {
  position: relative;
  width: 646px;
  border-radius: 18px;
  background: linear-gradient(180deg, #f6e7c6, #ead3a4);
  border: 3px solid #c9a46a;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.6);
}
.mod-ognisko .og-sb.is-add {
  height: 172px;
}
.mod-ognisko .og-sb.is-sub {
  height: 118px;
}
.mod-ognisko .og-sb-nums {
  position: absolute;
  left: 5px;
  top: 8px;
  width: 630px;
  height: 48px;
  border-radius: 8px;
  background: #fffaf0;
}
.mod-ognisko .og-sb-num {
  position: absolute;
  top: 0;
  width: 35px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 23px;
  border-right: 1px solid rgba(150, 110, 60, 0.22);
  border-radius: 6px;
}
.mod-ognisko .og-sb-num.is-red {
  color: var(--m-hundreds);
}
.mod-ognisko .og-sb-num.is-blue {
  color: var(--m-tens);
}
.mod-ognisko .og-sb-line {
  position: absolute;
  top: 4px;
  width: 4px;
  height: 112px;
  border-radius: 2px;
  background: var(--m-hundreds);
  z-index: 2;
}
.mod-ognisko .og-sb-work {
  position: absolute;
  left: 5px;
  top: 64px;
  width: 630px;
  height: 48px;
  border-radius: 8px;
  background: repeating-linear-gradient(90deg, rgba(150, 110, 60, 0.22) 0 1px, transparent 1px 35px), #fbf0d6;
}
.mod-ognisko .og-sb-cell {
  position: absolute;
  top: 2px;
  width: 35px;
  height: 44px;
  border-radius: 7px;
  z-index: 2;
  pointer-events: none;
}
.mod-ognisko .og-strip {
  position: absolute;
  top: 6px;
  height: 36px;
  border-radius: 9px;
  box-shadow: 0 3px 0 rgba(42, 34, 56, 0.25);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 7px;
  color: #fff;
  font-family: var(--font-num);
  font-size: 22px;
  font-weight: 700;
  animation: og-strip-in 0.45s cubic-bezier(0.3, 0.7, 0.25, 1) both;
}
.mod-ognisko .og-strip.is-blue {
  background: linear-gradient(180deg, #3b7fe0, var(--m-tens));
}
.mod-ognisko .og-strip.is-red {
  background: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0) 0 33px, rgba(255, 255, 255, 0.85) 33px 35px), linear-gradient(180deg, #ea4d60, var(--m-hundreds));
  animation-delay: 0.25s;
}
.mod-ognisko .og-strip.is-sub {
  top: 5px;
  height: 38px;
  z-index: 1;
}
.mod-ognisko .og-strip b {
  pointer-events: none;
}
@keyframes og-strip-in {
  from { transform: translateX(-40px); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.mod-ognisko .og-rock {
  position: absolute;
  top: 3px;
  height: 42px;
  border-radius: 10px;
  background: linear-gradient(180deg, #ecd7ad, #c9a46a);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.55), 0 3px 0 rgba(90, 60, 20, 0.3);
  z-index: 1;
  animation: og-rock-in 0.45s cubic-bezier(0.3, 0.7, 0.25, 1) both;
}
@keyframes og-rock-in {
  from { transform: translateX(40px); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.mod-ognisko .og-sb-cnts {
  position: absolute;
  left: 5px;
  width: 630px;
  height: 40px;
}
.mod-ognisko .og-sb.is-add .og-sb-cnts {
  top: 122px;
}
.mod-ognisko .og-sb.is-sub .og-sb-cnts {
  top: 66px;
}
.mod-ognisko .og-sb-cnt,
.mod-ognisko .og-bb-total,
.mod-ognisko .og-nb-cnt {
  position: absolute;
  height: 34px;
  border-radius: 17px;
  background: var(--gold-soft);
  border: 3px solid var(--gold);
  color: var(--ink);
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.mod-ognisko .og-sb-cnt {
  top: 2px;
  width: 34px;
  margin-left: 0.5px;
}
.mod-ognisko .og-sb-cnt.on,
.mod-ognisko .og-bb-total.on,
.mod-ognisko .og-nb-cnt.on {
  opacity: 1;
  transform: none;
}
.mod-ognisko .is-q {
  border-style: dashed;
  background: #fff;
}

/* bead board (red beads, card b, numbers 1–10 "ile razy", red disc) */
.mod-ognisko .og-bb {
  position: relative;
  display: flex;
  gap: 18px;
  padding: 10px 18px 8px 14px;
  border-radius: 20px;
  background: linear-gradient(180deg, #f6e7c6, #e7cf9d);
  border: 3px solid #c9a46a;
}
.mod-ognisko .og-bb-card {
  margin-top: 56px;
  width: 56px;
  height: 80px;
  border-radius: 12px;
  background: var(--bar);
  color: #fff;
  border: 3px solid rgba(0, 0, 0, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 40px;
  box-shadow: inset 0 0 0 5px rgba(255, 255, 255, 0.25), var(--shadow-sm);
}
.mod-ognisko .og-bb-card.is-light {
  color: var(--ink);
}
.mod-ognisko .og-bb-card.is-white {
  color: var(--ink);
  border-color: #b8b1a0;
}
.mod-ognisko .og-bb-grid {
  position: relative;
  width: 440px;
  height: 336px;
}
.mod-ognisko .og-bb-col {
  position: absolute;
  top: 0;
  width: 44px;
  height: 336px;
  border-radius: 12px;
}
.mod-ognisko .og-bb-num {
  position: absolute;
  top: 24px;
  left: 0;
  width: 44px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 22px;
  color: var(--ink-soft);
}
.mod-ognisko .og-bb-col.is-full .og-bb-num {
  color: var(--ink);
}
.mod-ognisko .og-bb-hole {
  position: absolute;
  left: 17px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #b48c55;
  box-shadow: inset 0 1px 2px rgba(60, 30, 0, 0.45);
}
.mod-ognisko .og-bb-bead {
  position: absolute;
  left: 10px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #ffffff 0, #ffd3d9 9%, #ff6b7d 32%, var(--m-hundreds) 62%, #7d0d1c 100%);
  box-shadow: 0 1px 2px rgba(80, 10, 20, 0.45);
  animation: og-drop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes og-drop {
  from { transform: translateY(-14px) scale(0.4); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.mod-ognisko .og-bb-disc {
  position: absolute;
  top: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--m-hundreds);
  border: 3px solid #8e1020;
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.35);
}
.mod-ognisko .og-bb-total {
  left: 1px;
  top: 300px;
  width: 42px;
}
.mod-ognisko .og-bb-total.is-3 {
  font-size: 18px;
}
.mod-ognisko .og-bb-col.is-pulse {
  background: rgba(242, 183, 5, 0.18);
}

/* nests of the unit division board (green baby dragons, green pearls, row numbers 1–9) */
.mod-ognisko .og-nb {
  position: relative;
  width: 532px;
  height: 338px;
  border-radius: 20px;
  background: linear-gradient(180deg, #f6e7c6, #e7cf9d);
  border: 3px solid #c9a46a;
}
.mod-ognisko .og-nb-nests {
  position: absolute;
  left: 8px;
  top: 8px;
  width: 512px;
  height: 66px;
}
.mod-ognisko .og-nb-nest {
  position: absolute;
  top: 0;
  width: 52px;
  height: 64px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  border-radius: 14px;
}
.mod-ognisko .og-nb-nest::after {
  content: '';
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 2px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 30%, #a9763f, #6b4321);
  box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.25);
}
.mod-ognisko .og-nb-nest .mat-babydragon {
  position: relative;
  z-index: 1;
  margin-bottom: 6px;
  animation: og-drop 0.35s ease both;
}
.mod-ognisko .og-nb-nest:not(.is-on)::after {
  opacity: 0.35;
}
.mod-ognisko .og-nb-nest.is-hot,
.mod-ognisko .og-nb-col.is-hot {
  background: rgba(242, 183, 5, 0.22);
  box-shadow: 0 0 0 3px rgba(242, 183, 5, 0.65);
}
.mod-ognisko .og-nb-rows {
  position: absolute;
  left: 8px;
  top: 78px;
  width: 512px;
  height: 252px;
}
.mod-ognisko .og-nb-col {
  position: absolute;
  top: 0;
  width: 52px;
  border-radius: 12px;
}
.mod-ognisko .og-nb-row {
  position: absolute;
  left: 0;
  width: 512px;
  height: 28px;
}
.mod-ognisko .og-nb-rn {
  position: absolute;
  left: 0;
  top: 0;
  width: 36px;
  height: 28px;
  line-height: 28px;
  text-align: center;
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 22px;
  color: var(--ink-soft);
}
.mod-ognisko .og-nb-hole {
  position: absolute;
  top: 8px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #b48c55;
  box-shadow: inset 0 1px 2px rgba(60, 30, 0, 0.45);
}
.mod-ognisko .og-nb-hole.is-off {
  opacity: 0.35;
}
.mod-ognisko .og-nb-pearl {
  position: absolute;
  top: 2px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #ffffff 0, #d9f6de 9%, #63d27a 30%, var(--m-units) 60%, #135a28 100%);
  box-shadow: 0 1px 2px rgba(10, 50, 25, 0.45);
  animation: og-drop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.mod-ognisko .og-nb-cnt {
  left: 1px;
  width: 34px;
  height: 26px;
  z-index: 2;
}

/* ---------- start screen ---------- */

.mod-ognisko .og-choose {
  position: absolute;
  left: 40px;
  top: 312px;
  width: 960px;
  height: 236px;
  z-index: 7;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 30px;
  background: rgba(255, 253, 247, 0.96);
  border: 3px solid var(--line);
  box-shadow: 0 10px 30px rgba(10, 6, 20, 0.5);
}
.mod-ognisko .og-choose.is-open {
  display: flex;
  animation: og-rise 0.45s cubic-bezier(0.3, 0.7, 0.25, 1) both;
}
@keyframes og-rise {
  from { transform: translateY(30px); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.mod-ognisko .og-ops {
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: center;
}
.mod-ognisko .og-opbtn {
  position: relative;
  width: 160px;
  height: 188px;
  border-radius: 28px;
  border: 4px solid var(--line);
  background: #fff;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0;
  transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}
.mod-ognisko .og-opbtn:active {
  transform: translateY(3px);
}
.mod-ognisko .og-op-sym {
  height: 108px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-num);
  font-size: 104px;
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
}
.mod-ognisko .og-colon {
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.mod-ognisko .og-colon i {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--ink);
}
.mod-ognisko .og-op-all {
  height: 108px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  justify-items: center;
  gap: 0 18px;
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 48px;
  line-height: 1;
  color: var(--ink);
}
.mod-ognisko .og-op-all i {
  font-style: normal;
}
.mod-ognisko .og-op-word {
  font-family: var(--font);
  font-size: 22px;
  font-weight: 700;
  color: var(--ink-soft);
}
.mod-ognisko .og-opbtn.is-on {
  border-color: var(--gold);
  background: var(--gold-soft);
  box-shadow: 0 0 0 7px rgba(242, 183, 5, 0.45), var(--shadow-sm);
}
.mod-ognisko .og-opbtn.is-locked {
  background: #eee8dc;
  box-shadow: none;
}
.mod-ognisko .og-opbtn.is-locked .og-op-sym,
.mod-ognisko .og-opbtn.is-locked .og-op-word {
  opacity: 0.3;
}
.mod-ognisko .og-sleepy {
  position: absolute;
  right: 6px;
  top: 10px;
  display: flex;
  align-items: flex-end;
  filter: grayscale(0.3);
}
.mod-ognisko .og-zzz {
  position: absolute;
  right: 2px;
  top: -18px;
  font-family: var(--font);
  font-weight: 700;
  font-size: 20px;
  color: var(--accent);
  animation: og-zzz 3s ease-in-out infinite;
}
.mod-ognisko .og-zzz i {
  font-style: normal;
  font-size: 15px;
  margin-left: 2px;
  position: relative;
  top: -10px;
}
@keyframes og-zzz {
  0%, 100% { transform: translateY(0); opacity: 0.85; }
  50% { transform: translateY(-5px); opacity: 0.45; }
}

/* no fact family yet: go to the strip board / the bead board */
.mod-ognisko .og-gobtn {
  width: 330px;
  height: 150px;
  border-radius: 28px;
  border: 4px solid var(--line);
  background: #fff;
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 22px;
  text-align: left;
}
.mod-ognisko .og-go-ico svg,
.mod-ognisko .og-go-ico .icon {
  width: 88px;
  height: 88px;
  font-size: 64px;
}
.mod-ognisko .og-go-ico > * {
  display: block;
}
.mod-ognisko .og-go-name {
  font-size: 30px;
  font-weight: 700;
  color: var(--ink);
}

/* ---------- Księga (control chart) ---------- */

.mod-ognisko .og-book {
  position: absolute;
  left: 0;
  top: 110px;
  width: 1040px;
  height: 602px;
  z-index: 30;
  background: rgba(16, 11, 34, 0.6);
  opacity: 0;
  transition: opacity 0.22s ease;
}
.mod-ognisko .og-book.is-open {
  opacity: 1;
}
.mod-ognisko .og-book-page {
  position: absolute;
  left: 24px;
  top: 10px;
  width: 992px;
  height: 474px;
  border-radius: 26px;
  background: linear-gradient(90deg, #fbf3df 0, #fffaf0 48%, #efe2c2 50%, #fffaf0 52%, #fbf3df 100%);
  border: 4px solid #b98552;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 10px;
  transform: translateY(16px);
  transition: transform 0.25s ease;
}
.mod-ognisko .og-book.is-open .og-book-page {
  transform: none;
}
.mod-ognisko .og-book-title {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 46px;
  font-size: 30px;
  font-weight: 700;
  color: #7a4a24;
}
.mod-ognisko .og-book-close {
  position: absolute;
  right: 24px;
  top: 494px;
  min-width: 220px;
  height: 96px;
  font-size: 32px;
}
.mod-ognisko .og-chart {
  display: grid;
  margin-top: 6px;
  font-family: var(--font-num);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.mod-ognisko .og-chart-add {
  grid-template-columns: repeat(10, 62px);
  grid-auto-rows: 40px;
}
.mod-ognisko .og-chart-sub {
  grid-template-columns: repeat(18, 52px);
  grid-auto-rows: 40px;
}
.mod-ognisko .og-chart-mul {
  grid-template-columns: repeat(11, 66px);
  grid-auto-rows: 36px;
}
.mod-ognisko .og-ch {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: var(--ink);
  border-right: 1px solid rgba(150, 110, 60, 0.2);
  border-bottom: 1px solid rgba(150, 110, 60, 0.2);
}
.mod-ognisko .og-ch.is-head {
  font-size: 23px;
  background: rgba(201, 164, 106, 0.18);
}
.mod-ognisko .og-ch.is-corner {
  color: #7a4a24;
  font-size: 26px;
}
.mod-ognisko .og-ch.is-red {
  color: var(--m-hundreds);
}
.mod-ognisko .og-ch.is-blue {
  color: var(--m-tens);
}
.mod-ognisko .og-ch.is-empty {
  background: rgba(201, 164, 106, 0.08);
}
.mod-ognisko .og-ch.is-hot {
  background: var(--gold);
  color: var(--ink);
  border-radius: 8px;
}
.mod-ognisko .og-ch.is-line {
  background: rgba(242, 183, 5, 0.16);
}
.mod-ognisko .og-ch.is-hit {
  background: var(--gold-soft);
  border-radius: 8px;
  box-shadow: inset 0 0 0 3px var(--gold-deep);
  font-size: 26px;
}
.mod-ognisko .og-chart-div {
  grid-template-columns: repeat(2, 380px);
  grid-auto-flow: column;
  grid-template-rows: repeat(5, 74px);
  gap: 0 40px;
  margin-top: 18px;
}
.mod-ognisko .og-dl {
  display: flex;
  align-items: center;
  padding-left: 40px;
  font-size: 40px;
  color: var(--ink);
  border-bottom: 2px solid rgba(150, 110, 60, 0.2);
}
.mod-ognisko .og-dl.is-hit {
  background: var(--gold-soft);
  border-radius: 14px;
  box-shadow: inset 0 0 0 3px var(--gold-deep);
}

/* before an answer the crossing is hers to find (Montessori control chart): only the two headings glow */
.mod-ognisko .og-book.is-before .og-ch.is-line,
.mod-ognisko .og-book.is-before .og-ch.is-hit {
  background: none;
  box-shadow: none;
  border-radius: 0;
  font-size: 22px;
}
.mod-ognisko .og-book.is-before .og-dl.is-hit {
  background: none;
  box-shadow: none;
}

/* ---------- hourglass banner ---------- */

.mod-ognisko .og-banner {
  position: absolute;
  left: 40px;
  top: 340px;
  width: 620px;
  z-index: 8;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 22px 24px 26px;
  border-radius: 28px;
  background: rgba(255, 253, 247, 0.97);
  border: 3px solid var(--gold);
  box-shadow: 0 10px 30px rgba(10, 6, 20, 0.5);
}
.mod-ognisko .og-banner.is-open {
  display: flex;
  animation: og-rise 0.4s ease both;
}
.mod-ognisko .og-banner-row {
  display: flex;
  align-items: center;
  gap: 24px;
}
.mod-ognisko .og-banner-text {
  font-size: 32px;
  font-weight: 700;
  color: var(--ink);
}
.mod-ognisko .og-banner-ico svg {
  width: 56px;
  height: 56px;
  display: block;
}
.mod-ognisko .og-banner .btn {
  min-height: 96px;
  min-width: 220px;
  font-size: 28px;
}

/* ---------- module icon / flame icon ---------- */

.mod-ognisko .og-flame-ico svg {
  display: block;
}

/* the Księga belongs to the facts: hidden on the start, the "not yet" screen and at the finale */
.mod-ognisko.og-choosing .og-book-btn,
.mod-ognisko.og-closed .og-book-btn,
.mod-ognisko.og-finale .og-book-btn {
  visibility: hidden;
}