/* Bone Furnace — idle incremental.

   All art is original 1x pixel art generated for this game and stored in
   images/ (see the private art provenance record under docs/). Sprites are authored at 16px / 12px / 64x72
   and upscaled 4x with nearest-neighbour at generation time, so every rule
   below also sets image-rendering: pixelated to stop browsers resampling them
   on high-DPI displays. No libraries, no third-party assets.

   Layout: the whole game lives in one fixed-height stage inside the shared
   .container box, sized to match the other minigames' play areas. The page
   must never scroll to reach a control — the right-hand panel scrolls
   internally instead.

   Site rules honoured here:
   - the page background belongs to cryptic.css. This file only paints the
     game surface (.game-shell and its children), never body/html.
   - the custom skull/skeleton-hand cursors come from cryptic.css. Every
     interactive rule below repeats the full /images/cursors stack, because a
     bare `cursor: pointer` outranks the site rule on specificity.
   - cyan #00cccc/#00ffff chrome; green = gain, red = destructive. */

/* The [hidden] attribute is only display:none in the UA stylesheet, so any
   class rule that sets `display` outranks it and the element stays visible.
   That is how the old Post button remained on screen while the code believed
   it was hidden. This guard makes [hidden] mean hidden, always. */
[hidden] {
  display: none !important;
}

.game-shell {
  position: relative;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(0, 255, 255, 0.09), transparent 60%),
    linear-gradient(180deg, #0a1417 0%, #060c0e 100%);
}

/* --- How to play --------------------------------------------------------
   Shared class name and position: .game-info sits directly after .back-link,
   matching every other standard minigame. Do not rename or move it. */

.game-info {
  max-width: 1140px;
  margin: 0 auto 18px;
  padding: 12px 16px;
  border: 1px solid #00cccc;
  border-radius: 10px;
  background: rgba(12, 19, 24, 0.88);
  box-shadow: 0 0 16px rgba(0, 255, 255, 0.15);
}

.game-info h3 {
  margin: 0 0 8px;
  color: #00dddd;
}

.game-info ul {
  margin: 0;
  padding-left: 20px;
  text-align: left;
}

/* --- Stage --------------------------------------------------------------
   Fills the shared 1200px .container (1140px inside its 30px padding) rather
   than picking an arbitrary canvas size. Height tracks the viewport so the
   header, instructions, stage and footer all fit on one screen — the page
   should never scroll to reach a control. Clamped so it stays usable on a
   short laptop and does not sprawl on a tall monitor. */

.bf-stage {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 18px;
  width: 100%;
  max-width: 1140px;
  height: clamp(430px, calc(100dvh - 340px), 580px);
  margin: 0 auto;
  text-align: left;
}

.bf-stage-left,
.bf-stage-right {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;   /* lets the panel actually shrink and scroll */
}

.bf-stage-left {
  align-items: center;
}

/* --- HUD ---------------------------------------------------------------- */

.bf-hud {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #007f7f;
  border-radius: 12px;
  background: rgba(9, 20, 24, 0.9);
  text-align: center;
  flex-shrink: 0;
}

.bf-embers {
  font-size: 2rem;
  line-height: 1.1;
  font-weight: 700;
  color: #7ff9ff;
  text-shadow: 0 0 18px rgba(0, 255, 255, 0.45);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.bf-embers-label {
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #6fb7b7;
  margin-bottom: 10px;
}

.bf-hud-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
  padding-top: 10px;
  border-top: 1px solid #1d4147;
}

.bf-stat {
  display: flex;
  flex-direction: column;
  gap: 1px;
  text-align: left;
  min-width: 0;
}

.bf-stat-k {
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6fb7b7;
}

.bf-stat-v {
  font-size: 0.98rem;
  color: #e8fafa;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Keeper name -------------------------------------------------------- */

.bf-keeper {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  flex-shrink: 0;
}

.bf-keeper label {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6fb7b7;
  flex-shrink: 0;
}

.bf-keeper input {
  flex: 1;
  min-width: 0;
  font-family: inherit;
  font-size: 0.9rem;
  border-radius: 8px;
  border: 1px solid #007f7f;
  background: #0f1d21;
  color: #e8fafa;
  padding: 6px 10px;
  transition: border-color 0.15s ease;
}

.bf-keeper input:hover { border-color: #00cccc; }

.bf-keeper-hint {
  margin: -4px 0 0;
  font-size: 0.7rem;
  color: #5f9c9c;
  text-align: center;
  width: 100%;
  flex-shrink: 0;
}

.bf-keeper input:focus-visible {
  outline: 2px solid #00ffff;
  outline-offset: 1px;
}

/* --- Furnace ------------------------------------------------------------ */

.bf-furnace-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  min-height: 0;
  width: 100%;
}

.bf-furnace {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 4px 10px 8px;
  border: 0;
  background: none;
  color: inherit;
  font-family: inherit;
  border-radius: 14px;
  transition: transform 0.08s ease, filter 0.18s ease;
  cursor:
    url('/images/cursors/hover.cur') 11 0,
    url('/images/cursors/hover.png') 11 0,
    pointer;
}

.bf-furnace:hover { filter: brightness(1.12); }

.bf-furnace:active,
.bf-furnace.is-hit { transform: scale(0.975); }

.bf-furnace:focus-visible {
  outline: 2px solid #00ffff;
  outline-offset: 4px;
}

/* 4-frame sprite sheet, 64x72 per frame at 4x = 256x288 per frame.
   steps(4) walks the strip; no tween, so the pixels stay crisp. */
.bf-furnace-art {
  display: block;
  width: 256px;
  height: 288px;
  background-image: url('/minigames/bone-furnace/images/furnace-sheet.png');
  background-repeat: no-repeat;
  background-size: 1024px 288px;
  background-position: 0 0;
  image-rendering: pixelated;
  animation: bf-burn 640ms steps(4) infinite;
}

@keyframes bf-burn {
  from { background-position: 0 0; }
  to   { background-position: -1024px 0; }
}

.bf-furnace-glow {
  position: absolute;
  left: 50%;
  top: 52%;
  width: 240px;
  height: 190px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(127, 249, 255, 0.32) 0%, rgba(0, 204, 204, 0.14) 45%, transparent 70%);
  animation: bf-breathe 3.4s ease-in-out infinite;
}

.bf-furnace-hint {
  position: relative;
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #5f9c9c;
}

@keyframes bf-breathe {
  0%, 100% { opacity: 0.62; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1;    transform: translate(-50%, -50%) scale(1.07); }
}

/* Floating "+N" numbers on click. */

.bf-floats {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.bf-float {
  position: absolute;
  transform: translate(-50%, -50%);
  color: #7ff9ff;
  font-size: 1.05rem;
  font-weight: 700;
  text-shadow: 0 0 10px rgba(0, 255, 255, 0.6);
  white-space: nowrap;
  animation: bf-rise 900ms ease-out forwards;
}

@keyframes bf-rise {
  0%   { opacity: 1; transform: translate(-50%, -50%) scale(0.9); }
  100% { opacity: 0; transform: translate(-50%, -190%) scale(1.15); }
}

@media (prefers-reduced-motion: reduce) {
  .bf-furnace-art,
  .bf-furnace-glow { animation: none; }
  .bf-float { animation-duration: 0.01ms; }
}

/* --- Tabs and the scrolling panel --------------------------------------- */

.bf-tabs {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.bf-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex: 1;
  padding: 9px 12px;
  border: 1px solid #007f7f;
  border-radius: 999px;
  background: rgba(10, 22, 26, 0.9);
  color: #9fdede;
  font-family: inherit;
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  transition: border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
  cursor:
    url('/images/cursors/hover.cur') 11 0,
    url('/images/cursors/hover.png') 11 0,
    pointer;
}

.bf-tab:hover {
  border-color: #00cccc;
  color: #e8fafa;
}

.bf-tab.is-active {
  border-color: #00ffff;
  color: #00ffff;
  box-shadow: 0 0 14px rgba(0, 255, 255, 0.25);
}

.bf-badge {
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 999px;
  background: #00cccc;
  color: #04191c;
  font-size: 0.72rem;
  font-weight: 700;
}

/* The one place scrolling is allowed, and it is inside the box. */
.bf-panels {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 6px;
  scrollbar-width: thin;
  scrollbar-color: #00cccc rgba(10, 22, 26, 0.6);
}

.bf-panels::-webkit-scrollbar { width: 9px; }

.bf-panels::-webkit-scrollbar-track {
  background: rgba(10, 22, 26, 0.6);
  border-radius: 999px;
}

.bf-panels::-webkit-scrollbar-thumb {
  background: #00807f;
  border-radius: 999px;
}

.bf-panels::-webkit-scrollbar-thumb:hover { background: #00cccc; }

/* --- Buy quantity bar --------------------------------------------------- */

.bf-buybar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 0 0 8px;
  background: linear-gradient(180deg, #08181c 70%, rgba(8, 24, 28, 0) 100%);
}

.bf-buybar-label {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6fb7b7;
}

.bf-buyqty {
  padding: 4px 12px;
  border: 1px solid #007f7f;
  border-radius: 7px;
  background: rgba(10, 22, 26, 0.9);
  color: #9fdede;
  font-family: inherit;
  font-size: 0.85rem;
  cursor:
    url('/images/cursors/hover.cur') 11 0,
    url('/images/cursors/hover.png') 11 0,
    pointer;
}

.bf-buyqty.is-active {
  border-color: #00ffff;
  color: #00ffff;
}

/* --- Rows --------------------------------------------------------------- */

/* Two columns at full container width: all seven workers, and most of the
   rite list, land on screen with no scrolling at all. */
.bf-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 8px;
}

.bf-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 14px;
  border: 1px solid #1d4147;
  border-radius: 10px;
  background: rgba(11, 23, 27, 0.92);
  color: inherit;
  font-family: inherit;
  text-align: left;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.08s ease;
  cursor:
    url('/images/cursors/hover.cur') 11 0,
    url('/images/cursors/hover.png') 11 0,
    pointer;
}

.bf-row.is-affordable {
  border-color: #00cccc;
  box-shadow: 0 0 12px rgba(0, 255, 255, 0.12);
}

.bf-row.is-affordable:hover {
  background: rgba(15, 34, 40, 0.96);
  transform: translateY(-1px);
}

.bf-row:disabled,
.bf-row[disabled] {
  opacity: 0.55;
  transform: none;
  cursor: not-allowed;
}

.bf-row:focus-visible {
  outline: 2px solid #00ffff;
  outline-offset: 2px;
}

.bf-row-icon {
  display: block;
  width: 32px;
  height: 32px;
  image-rendering: pixelated;
  flex-shrink: 0;
  opacity: 0.7;
  transition: opacity 0.15s ease, filter 0.15s ease;
}

.bf-row.is-affordable .bf-row-icon,
.bf-row.is-owned .bf-row-icon {
  opacity: 1;
  filter: drop-shadow(0 0 6px rgba(0, 255, 255, 0.45));
}

.bf-row-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.bf-row-name {
  display: block;
  font-size: 0.98rem;
  color: #e8fafa;
}

.bf-row-flavour {
  display: block;
  font-size: 0.78rem;
  color: #7ab0b0;
  margin-top: 1px;
}

.bf-row-yield {
  display: block;
  font-size: 0.78rem;
  color: #6fb7b7;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

.bf-row-yield:empty { display: none; }

.bf-row-right {
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-end;
}

.bf-row-cost {
  font-size: 0.94rem;
  color: #d6b25e;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.bf-row.is-affordable .bf-row-cost { color: #6de08a; }

.bf-row-owned {
  font-size: 1.22rem;
  font-weight: 700;
  color: #4f7d80;
  font-variant-numeric: tabular-nums;
}

.bf-row.is-owned .bf-row-owned { color: #7ff9ff; }

.bf-empty {
  color: #6b8688;
  font-style: italic;
  padding: 18px 0;
  text-align: center;
}

/* Small pixel glyphs used inline in the HUD and cost labels. */
.bf-glyph {
  width: 14px;
  height: 14px;
  image-rendering: pixelated;
  vertical-align: -2px;
  margin-right: 3px;
}

.bf-glyph-lg {
  width: 26px;
  height: 26px;
  vertical-align: -4px;
  margin-right: 5px;
}

/* --- Deeds -------------------------------------------------------------- */

.bf-deeds-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 18px;
  padding: 0 2px 10px;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6fb7b7;
}

.bf-deeds-head strong {
  color: #7ff9ff;
  font-variant-numeric: tabular-nums;
}

.bf-deed-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 8px;
}

.bf-deed {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 12px;
  border: 1px solid #16333a;
  border-radius: 9px;
  background: rgba(9, 18, 21, 0.75);
  opacity: 0.5;
  transition: opacity 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.bf-deed.is-earned {
  opacity: 1;
  border-color: #00cccc;
  background: rgba(11, 27, 31, 0.95);
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.12);
}

.bf-deed-name {
  font-size: 0.92rem;
  color: #9fdede;
}

.bf-deed.is-earned .bf-deed-name { color: #7ff9ff; }

.bf-deed-desc {
  font-size: 0.76rem;
  color: #6b8688;
  line-height: 1.35;
}

/* --- Scoreboard ---------------------------------------------------------
   Sits below the play area as a .leaderboard section, matching Cryptdoku,
   Crypt Sweeper and Tombraid — including their bordered #lbTable look, so it
   reads as a real scoreboard rather than more game chrome. */

/* A change of treatment, not a feature in its own right. The break is carried
   mostly by the heading and the bordered table below; this rule just closes
   off the play area. It fades at the ends so it reads as a seam rather than a
   drawn line. */
.bf-divider {
  max-width: 860px;
  height: 1px;
  margin: 38px auto 0;
  border: 0;
  background: linear-gradient(90deg,
    transparent 0%, rgba(0, 204, 204, 0.55) 18%,
    rgba(0, 204, 204, 0.55) 82%, transparent 100%);
}

.leaderboard.bf-board {
  max-width: 860px;
  margin: 0 auto;
  padding: 8px 0 0;
  text-align: center;
}

.leaderboard.bf-board h2 {
  margin: 14px 0 12px;
  color: #00dede;
  font-size: 1.35rem;
  letter-spacing: 0.04em;
}

.bf-board-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 12px;
}

.bf-board-tab {
  padding: 8px 20px;
  border: 1px solid #007f7f;
  border-radius: 999px;
  background: rgba(10, 22, 26, 0.9);
  color: #9fdede;
  font-family: inherit;
  font-size: 0.9rem;
  transition: border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
  cursor:
    url('/images/cursors/hover.cur') 11 0,
    url('/images/cursors/hover.png') 11 0,
    pointer;
}

.bf-board-tab:hover {
  border-color: #00cccc;
  color: #e8fafa;
}

.bf-board-tab.is-active {
  border-color: #00ffff;
  color: #00ffff;
  box-shadow: 0 0 14px rgba(0, 255, 255, 0.25);
}

.bf-board-blurb {
  margin: 0 auto 16px;
  max-width: 620px;
  font-size: 0.88rem;
  color: #9fdede;
}

.bf-board-figures {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px 18px;
  margin-bottom: 16px;
  text-align: left;
}

/* Matches the #lbTable treatment used by Cryptdoku and Cryptitaire: a solid
   bordered grid with a tinted header row. This is the main thing that makes
   the board read as a separate section from the game panel above it. */
#lbTable {
  width: 100%;
  border-collapse: collapse;
  background: rgba(5, 17, 22, 0.86);
  border: 1px solid #008b8b;
  margin-bottom: 10px;
}

#lbTable th,
#lbTable td {
  border: 1px solid rgba(0, 139, 139, 0.75);
  padding: 8px 10px;
  font-size: 0.92rem;
}

#lbTable th {
  background: rgba(0, 204, 204, 0.14);
  color: #aefefe;
  letter-spacing: 0.06em;
}

#lbTable td {
  color: #cfeaea;
  font-variant-numeric: tabular-nums;
}

#lbTable th:first-child,
#lbTable td:first-child {
  width: 3rem;
  text-align: center;
}

#lbTable td:first-child { color: #4f7d80; }

#lbTable tr.is-you td {
  color: #7ff9ff;
  background: rgba(0, 255, 255, 0.07);
}

#lbTable .empty-cell {
  color: #8fc8c8;
  font-style: italic;
  text-align: center;
  padding: 16px 0;
}

/* All deeds earned. */
.bf-complete {
  color: #7ff9ff;
  font-weight: 700;
  text-shadow: 0 0 8px rgba(0, 255, 255, 0.5);
}

/* --- Pyre panel --------------------------------------------------------- */

.bf-pyre {
  margin: 0 0 12px;
  padding: 16px 18px;
  border: 1px solid #007f7f;
  border-radius: 12px;
  background: rgba(9, 20, 24, 0.92);
  text-align: center;
}

.bf-pyre-stats { border-color: #1d4147; }

.bf-pyre h2 {
  margin: 0 0 8px;
  color: #00dddd;
  font-size: 1.18rem;
}

.bf-pyre p {
  color: #9fdede;
  font-size: 0.88rem;
  margin: 0 0 12px;
}

.bf-pyre-figures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 16px;
  margin-bottom: 14px;
  text-align: left;
}

.bf-danger,
.bf-ghost {
  padding: 9px 20px;
  border-radius: 9px;
  font-family: inherit;
  font-size: 0.92rem;
  transition: filter 0.15s ease, border-color 0.15s ease;
  cursor:
    url('/images/cursors/hover.cur') 11 0,
    url('/images/cursors/hover.png') 11 0,
    pointer;
}

.bf-danger {
  border: 1px solid #b8474f;
  background: rgba(58, 15, 19, 0.9);
  color: #ffb9bd;
}

.bf-danger:hover:not(:disabled) { filter: brightness(1.25); }

.bf-danger:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.bf-ghost {
  border: 1px solid #007f7f;
  background: rgba(10, 22, 26, 0.9);
  color: #9fdede;
}

.bf-ghost:hover {
  border-color: #00cccc;
  color: #e8fafa;
}

.bf-ghost-danger {
  border-color: #7d3a3f;
  background: rgba(10, 22, 26, 0.9);
  color: #dd9298;
}

.bf-savebar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 8px;
}

.bf-note {
  font-size: 0.78rem;
  color: #6b8688;
  margin: 0;
}

/* --- Toast -------------------------------------------------------------- */

.bf-toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translate(-50%, 16px);
  max-width: min(440px, 88vw);
  padding: 11px 18px;
  border: 1px solid #00cccc;
  border-radius: 9px;
  background: rgba(6, 16, 19, 0.97);
  color: #e8fafa;
  font-size: 0.92rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
  z-index: 60;
}

.bf-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* --- Narrow screens -----------------------------------------------------
   Below the two-column breakpoint the stage stacks and gives up its fixed
   height: on a phone the page scrolls, which is the normal pattern site-wide
   and unavoidable at that width. */

@media (max-width: 860px) {
  .bf-stage {
    grid-template-columns: minmax(0, 1fr);
    height: auto;
    gap: 14px;
  }

  .bf-panels {
    max-height: 420px;
    overflow-y: auto;
  }

  .bf-furnace-art {
    width: 192px;
    height: 216px;
    background-size: 768px 216px;
  }

  @keyframes bf-burn {
    from { background-position: 0 0; }
    to   { background-position: -768px 0; }
  }

  .bf-furnace-glow {
    width: 180px;
    height: 145px;
  }

  .bf-hud-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .bf-hud-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .bf-keeper input,
  .bf-tab,
  .bf-buyqty,
  .bf-board-tab { min-height: 44px; }

  .bf-keeper input { font-size: 16px; }

  .bf-row {
    grid-template-columns: auto 1fr;
    gap: 10px;
  }

  .bf-row-right {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    width: 100%;
  }

  .bf-pyre-figures { grid-template-columns: minmax(0, 1fr); }
  .bf-board-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}