* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100dvh;
  font-family: 'Fira Sans', sans-serif;
  background: linear-gradient(180deg, #eef4ea 0%, #dce8d4 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Buttons/inputs don't inherit the page font by default in most browsers --
   without this, every card/button was silently rendering in the system
   font instead of Fira Sans. */
button, input {
  font-family: inherit;
}

.craft-nav {
  width: 100%;
  background: var(--craft-accent, #217346);
  color: #fff;
  padding: 12px 16px;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.5px;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  position: relative;
}

.craft-nav-right {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
}

.craft-reset-btn {
  border: none;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s;
}

.craft-reset-btn:hover {
  background: rgba(255, 255, 255, 0.3);
}

.craft-settings-panel {
  width: 100%;
  max-width: 420px;
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.2s ease;
  background: #f3f7f0;
  border-bottom: 1px solid #d6e3cf;
}

.craft-settings-panel.show {
  max-height: 280px;
}

.craft-tokens-row {
  justify-content: space-between;
  cursor: default;
}

.craft-tokens-empty {
  padding: 0 16px 12px;
  font-size: 12px;
  color: #6b7d64;
  font-style: italic;
}

.craft-settings-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  font-size: 13px;
  color: #4d352d;
  cursor: pointer;
}

.craft-settings-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--craft-accent, #217346);
}

.craft-settings-row select {
  margin-left: auto;
  font-size: 13px;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid #d6e3cf;
  background: #fff;
  color: #4d352d;
  cursor: pointer;
}

.craft-hidden-row {
  display: none;
  cursor: default;
}

.craft-hidden-row.show {
  display: flex;
}

.craft-hidden-row #craft-hidden-restore {
  margin-left: auto;
}

/* Always-visible strip under the nav (not gated behind the settings
   panel) -- shows Groq's live quota for every AI call this game makes,
   including a "no data yet" placeholder before the first one. */
.craft-rate-limit {
  display: none;
  padding: 5px 16px;
  font-size: 11px;
  line-height: 1.3;
  color: #6a7a63;
  background: #f3f7f0;
  border-bottom: 1px solid #e0e8db;
  text-align: center;
}

.craft-rate-limit.show {
  display: block;
}

.craft-rate-limit b {
  color: #4d352d;
}

.craft-rate-limit.low {
  color: #b3541e;
}

.craft-rate-limit.low b {
  color: #b3541e;
}

.craft-reset-btn.active {
  background: #ffd76a;
  color: #6b4b00;
}

/* Verb/purpose/hint/batch mode all assume the normal open-ended board --
   dimmed and inert while Grid 3x3 mode is on, see updateGrid3UI(). */
.craft-reset-btn.disabled {
  opacity: 0.35;
  pointer-events: none;
}

.craft-hint-panel {
  width: 100%;
  max-width: 420px;
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.2s ease;
  background: #fdf7e6;
  border-bottom: 1px solid #f0dfa8;
  padding: 0 16px;
}

.craft-hint-panel.show {
  max-height: 320px;
  padding: 12px 16px;
}

.craft-hint-intro {
  font-size: 12px;
  color: #6b5a1f;
  margin-bottom: 8px;
  line-height: 1.4;
}

.craft-hint-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

.craft-hint-slot {
  flex: none;
  width: 90px;
}

.craft-hint-check-btn {
  flex: 1;
  border-color: #b8972a;
  color: #b8972a;
}

.craft-hint-check-btn:hover {
  background: #fbecc0;
}

.craft-hint-result {
  margin-top: 10px;
  min-height: 0;
}

.craft-hint-result:empty {
  display: none;
}

.craft-hint-result.possible {
  border-color: var(--craft-accent, #217346);
}

.craft-hint-result.impossible {
  border-color: #b3261e;
}

.craft-lang-btn {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s;
}

.craft-lang-btn:hover {
  background: rgba(255, 255, 255, 0.3);
}

.craft-wrap {
  width: 100%;
  max-width: 420px;
  padding: 20px 16px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.craft-slots {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.craft-slot {
  flex: 1;
  max-width: 160px;
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 12px;
  border: 2px dashed #b8cdae;
  background: #fff;
  font-size: 13px;
  font-weight: 600;
  color: #4d352d;
}

.craft-slot.filled {
  border-style: solid;
  border-color: var(--craft-accent, #217346);
}


.craft-slot-empty {
  color: #b8cdae;
  font-size: 22px;
  font-weight: 700;
}

.craft-plus {
  font-size: 20px;
  font-weight: 700;
  color: var(--craft-accent, #217346);
}

.craft-verb {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.craft-verb-box {
  display: none;
  flex-direction: column;
  gap: 4px;
  width: 96px;
}

.craft-slots.verb-mode {
  gap: 8px;
}

.craft-slots.verb-mode .craft-plus {
  display: none;
}

.craft-slots.verb-mode .craft-verb-box {
  display: flex;
}

.craft-verb-input,
.craft-verb-list {
  width: 100%;
  box-sizing: border-box;
  border: 1.5px solid #d6e3cf;
  border-radius: 8px;
  background: #fff;
  color: #4d352d;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 6px;
}

/* iOS no-zoom: 16.1px computed, scaled back to the 12px look (see .craft-search-input) */
.craft-verb-input {
  width: 134.17%;
  font-size: 16.1px;
  padding: 6.71px 8.05px;
  border-width: 2.01px;
  border-radius: 10.73px;
  transform: scale(0.74534);
  transform-origin: left top;
  margin-bottom: -9.5px;
}

.craft-verb-input:focus,
.craft-verb-list:focus {
  outline: none;
  border-color: var(--craft-accent, #217346);
}

.craft-purpose {
  display: none;
  width: 100%;
  align-items: center;
  gap: 8px;
}

.craft-purpose.show {
  display: flex;
}

.craft-purpose span {
  flex: none;
  font-size: 12px;
  font-weight: 700;
  color: var(--craft-accent, #217346);
}

.craft-purpose-input {
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
  border: 1.5px solid #d6e3cf;
  border-radius: 8px;
  background: #fff;
  color: #4d352d;
  font-family: inherit;
  font-size: 16.1px;
  font-weight: 700;
  padding: 6px 8px;
}

.craft-purpose-input:focus {
  outline: none;
  border-color: var(--craft-accent, #217346);
}

.craft-purpose-used {
  font-size: 12px;
  font-weight: 700;
  color: var(--craft-accent, #217346);
}

.craft-purpose-go {
  flex: none;
  border: none;
  background: var(--craft-accent, #217346);
  color: #fff;
  border-radius: 8px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 10px;
  cursor: pointer;
}

.craft-history-verb {
  font-size: 10px;
  font-weight: 700;
  color: var(--craft-accent, #217346);
  max-width: 72px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.craft-batch-board {
  display: none;
  width: 100%;
  flex-direction: column;
  gap: 6px;
}

.craft-batch-board.show {
  display: flex;
}

.craft-batch-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.craft-batch-cell {
  flex: 1;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 10px;
  border: 1.5px dashed #b8cdae;
  background: #fff;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  color: #4d352d;
  cursor: pointer;
}

.craft-batch-cell.filled {
  border-style: solid;
  border-color: var(--craft-accent, #217346);
}

.craft-batch-cell span:not(.craft-icon-badge) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.craft-batch-status {
  display: none;
  width: 100%;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--craft-accent, #217346);
}

.craft-batch-status.show {
  display: block;
}

.craft-random-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px;
  border-radius: 12px;
  border: 1.5px dashed var(--craft-accent, #217346);
  background: transparent;
  color: var(--craft-accent, #217346);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
}

.craft-random-btn:hover {
  background: var(--craft-accent-l, #eaf3e6);
}

.craft-random-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.craft-result {
  display: none;
  width: 100%;
  min-height: 90px;
  border-radius: 14px;
  background: #fff;
  border: 1.5px solid #d6e3cf;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 16px;
  text-align: center;
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.25s, transform 0.25s;
  position: relative;
}

.craft-result.show {
  display: flex;
}

.craft-reload-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  border: none;
  background: #f3f7f0;
  color: var(--craft-accent, #217346);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
}

.craft-reload-btn:hover {
  background: var(--craft-accent-l, #eaf3e6);
  transform: rotate(45deg);
}

.craft-reuse-btn {
  right: 44px;
}

.craft-reuse-btn:hover {
  transform: scale(1.06);
}

.craft-result.show {
  opacity: 1;
  transform: scale(1);
}

.craft-result .icon {
  display: flex;
  justify-content: center;
}

.craft-btn-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px;
}

.craft-more-btn {
  border: none;
  background: none;
  color: var(--craft-accent, #217346);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 8px;
}

.craft-more-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.craft-spin {
  display: inline-block;
  animation: craft-spin 0.8s linear infinite;
}

@keyframes craft-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.craft-detail {
  font-size: 12px;
  color: #445540;
  background: #f3f7f0;
  border-radius: 8px;
  padding: 8px 10px;
  margin-top: 2px;
  /* "Add more" / "Exact ingredients" text: justified, left-aligned
     (the result card itself is centered). */
  align-self: stretch;
  justify-self: stretch;
  text-align: justify;
  text-align-last: left;
  hyphens: auto;
}

.craft-vote-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 4px;
}

.craft-vote-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  border: 1px solid #d6e3cf;
  background: #fff;
  color: #445540;
  font-size: 12px;
  font-weight: 600;
  border-radius: 999px;
  padding: 4px 10px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.craft-vote-btn:hover {
  background: #f3f7f0;
}

.craft-vote-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.craft-vote-btn.active {
  background: var(--craft-accent, #217346);
  border-color: var(--craft-accent, #217346);
  color: #fff;
}

.craft-comments-panel {
  width: 100%;
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.2s ease;
}

.craft-comments-panel.show {
  max-height: 260px;
  overflow-y: auto;
  margin-top: 6px;
}

.craft-comments-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}

.craft-comment-row {
  font-size: 12px;
  color: #4d352d;
  background: #f3f7f0;
  border-radius: 8px;
  padding: 6px 10px;
  text-align: left;
  word-break: break-word;
}

.craft-comments-empty {
  font-size: 12px;
  color: #6b7d64;
  font-style: italic;
}

.craft-comment-form {
  display: flex;
  gap: 6px;
}

.craft-comment-form .craft-search-input {
  flex: 1;
}

.craft-comment-send-btn {
  border: none;
  background: var(--craft-accent, #217346);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  border-radius: 8px;
  padding: 0 14px;
  cursor: pointer;
  transition: opacity 0.15s;
}

.craft-comment-send-btn:hover {
  opacity: 0.9;
}

.craft-comment-send-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.craft-result .name {
  font-size: 18px;
  font-weight: 700;
  color: #2d1c17;
}

.craft-result .desc {
  font-size: 13px;
  color: #55665a;
}

/* iOS Safari auto-zooms on focus into any input with computed font-size
   under 16px -- font-size is faked up to 16.1px (just over that threshold)
   and every other dimension pre-scaled by the inverse ratio, then the whole
   box is scaled back down to the original 13px look via transform, so nothing
   visually changes but iOS sees a 16.1px input and never zooms. */
.craft-search-input {
  align-self: flex-start;
  width: 123.85%;
  padding: 11.15px 14.86px;
  border-radius: 12.38px;
  border: 1.86px solid #d6e3cf;
  background: #fff;
  font-size: 16.1px;
  color: #4d352d;
  transform: scale(0.80745);
  transform-origin: left center;
}

.craft-search-input:focus {
  outline: none;
  border-color: var(--craft-accent, #217346);
}

.craft-grid {
  --craft-tile-h: 66px;
  --craft-gap: 7px;
  --craft-head-h: 22px;
  width: 100%;
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: 8px;
  align-items: stretch;
  /* Both labels stay put; three tile rows show, the rest scroll. */
  max-height: calc(var(--craft-head-h) + 3px + 3 * var(--craft-tile-h) + 2 * var(--craft-gap));
  overflow-y: auto;
  overscroll-behavior: contain;
}

.craft-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.craft-col-fresh {
  grid-column: 2;
}

/* No fresh column yet: the existing list uses the full width, four tiles per row. */
.craft-grid.craft-grid-solo {
  grid-template-columns: 1fr;
}

.craft-grid.craft-grid-solo .craft-col-tiles {
  grid-template-columns: repeat(4, 1fr);
}

.craft-col-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--craft-gap);
  padding-top: 3px;
}

.craft-col-fresh .craft-col-tiles {
  grid-template-columns: 1fr;
}

.craft-grid.loading .craft-tile {
  opacity: 0.6;
  pointer-events: none;
}

.craft-no-results {
  text-align: center;
  font-size: 12px;
  color: #8a9686;
  padding: 16px 0;
}

/* Grid 3x3 mode: a free row (flex-wrap, grows as you discover) stacked
   below a strict 3-column board of the 9 fixed Supabase cells -- replaces
   the normal existing/fresh two-column layout entirely (see renderGrid3()). */
.craft-grid.craft-grid3-mode {
  display: block;
  max-height: none;
  overflow: visible;
}

.craft-grid3-section + .craft-grid3-section {
  margin-top: 12px;
}

.craft-grid3-free-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: var(--craft-gap);
  padding-top: 3px;
}

.craft-grid3-free-tiles .craft-tile {
  width: calc(25% - var(--craft-gap) * 3 / 4);
}

.craft-grid3-cells {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 320px;
  margin: 3px auto 0;
  border: 2px solid #b9cbb0;
  border-radius: 10px;
  overflow: hidden;
  background: #f7faf5;
}

/* Each board tile sits in its own cell so the 3x3 reads as a grid with
   visible lines between cells (outer frame above, inner lines here). */
.craft-grid3-cell {
  padding: 5px;
  border-right: 1px solid #cfdcc8;
  border-bottom: 1px solid #cfdcc8;
  min-width: 0;
}

.craft-grid3-cell:nth-child(3n) {
  border-right: none;
}

.craft-grid3-cell:nth-last-child(-n+3) {
  border-bottom: none;
}

.craft-grid3-cell > .craft-tile {
  width: 100%;
}

/* Merge sub-mode (renderMergeBoard()): an emptied cell keeps its spot in
   the 3x3 so the board doesn't reflow as tiles merge away. */
.craft-merge-empty {
  height: var(--craft-tile-h);
  border-radius: 9px;
  border: 1.5px dashed #e0e8db;
}

.craft-merge-header {
  justify-content: space-between;
}

.craft-merge-new-btn {
  border: 1px solid var(--craft-accent, #217346);
  border-radius: 8px;
  background: transparent;
  color: var(--craft-accent, #217346);
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 8px;
  cursor: pointer;
}

.craft-merge-header-btns {
  display: flex;
  align-items: center;
  gap: 6px;
}

.craft-exit-archive-btn {
  background: var(--craft-accent, #217346);
  color: #fff;
}

/* Archive (calendar button): one row per released grid, newest first. */
.craft-settings-panel.craft-archive-panel.show {
  max-height: 320px;
  overflow-y: auto;
}

.craft-archive-title {
  padding: 10px 16px 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6a7a63;
}

.craft-archive-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border: none;
  border-top: 1px solid #e0e8db;
  background: transparent;
  text-align: left;
  color: #4d352d;
  cursor: pointer;
}

.craft-archive-row:hover {
  background: var(--craft-accent-l, #eaf3e6);
}

.craft-archive-row.current {
  background: #e2efdc;
}

.craft-archive-num {
  font-weight: 700;
  font-size: 14px;
  color: var(--craft-accent, #217346);
  min-width: 28px;
}

.craft-archive-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
  font-size: 13px;
  line-height: 1.2;
}

.craft-archive-info small {
  color: #6a7a63;
  font-size: 11px;
}

.craft-archive-icons {
  display: flex;
  gap: 2px;
}

.craft-archive-status {
  font-size: 10px;
  font-weight: 700;
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
  background: #f0f0ec;
  color: #6a7a63;
}

.craft-archive-status.playing {
  background: #fff3cd;
  color: #7a5b00;
}

.craft-archive-status.done {
  background: var(--craft-accent, #217346);
  color: #fff;
}

@media all {
  .craft-archive-icons {
    display: none;
  }
}

/* Inventory row sits right under the free row in the same section, told
   apart by its amber tint (the header legend shows the swatch). */
.craft-inventory-tiles {
  margin-top: var(--craft-gap);
}

.craft-inventory-tiles .craft-tile {
  background: #fff8e6;
  border-color: #f0dca8;
}

.craft-inventory-tiles .craft-tile.selected {
  background: var(--craft-accent-l, #eaf3e6);
  border-color: var(--craft-accent, #217346);
}

.craft-inventory-legend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1.5px solid #e5c878;
  border-radius: 999px;
  background: #fff8e6;
  color: #7a5b00;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1px 8px;
  cursor: pointer;
}

.craft-inventory-legend:hover {
  background: #ffefc2;
}

/* One row that scrolls sideways once picks push it past 4 tiles. */
.craft-inventory-tiles {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}

.craft-inventory-tiles::-webkit-scrollbar {
  display: none;
}

.craft-inventory-tiles .craft-tile {
  flex-shrink: 0;
}

/* Inventory picker: compact card anchored under the nav (not a tall
   bottom sheet -- on iPhone the keyboard would cover the bottom half), above
   the game and the ad shells. Results are the same low chips as the
   free/inventory rows. */
.craft-inventory-picker {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  background: rgba(20, 40, 25, 0.4);
  align-items: flex-start;
  justify-content: center;
  padding: calc(44px + env(safe-area-inset-top)) 12px 12px;
}

.craft-inventory-picker.show {
  display: flex;
}

.craft-inventory-sheet {
  width: 100%;
  max-width: 400px;
  max-height: min(62dvh, 440px);
  background: #eef4ea;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  padding: 10px 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.craft-inventory-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #4d352d;
  font-size: 14px;
}

.craft-inventory-sheet-head .craft-inventory-close {
  position: static;
  width: 28px;
  height: 28px;
}

.craft-inventory-sheet .craft-search-input {
  flex-shrink: 0;
  margin: -3px 0;
}

.craft-inventory-results {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  align-content: start;
}

.craft-inventory-results .craft-inventory-empty,
.craft-inventory-results .craft-error {
  grid-column: 1 / -1;
}

.craft-inventory-results .craft-inventory-pick {
  --craft-tile-h: 36px;
  min-width: 0;
  flex-direction: row;
  justify-content: flex-start;
  gap: 5px;
  padding: 3px 5px;
  text-align: left;
  animation: none;
}

.craft-inventory-results .craft-inventory-pick .craft-icon-badge {
  width: 22px;
  height: 22px;
}

.craft-inventory-results .craft-inventory-pick .craft-icon-badge .bi {
  font-size: 11px;
}

.craft-inventory-results .craft-inventory-pick span:not(.craft-icon-badge) {
  min-height: 0;
  font-size: 10.5px;
  word-break: normal;
  hyphens: auto;
}

.craft-inventory-empty {
  width: 100%;
  padding: 10px 0;
  text-align: center;
  font-size: 12px;
  color: #8a9686;
  font-style: italic;
}

.craft-merge-done {
  margin-top: 10px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--craft-accent, #217346);
}

.craft-tier-header {
  position: sticky;
  top: 0;
  z-index: 2;
  height: var(--craft-head-h);
  display: flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6a7a63;
  padding: 0 2px;
  border-bottom: 1px solid #e0e8db;
  background: #eef4ea;
}

.craft-col .craft-tile {
  width: 100%;
  min-width: 0;
  padding: 6px 2px;
}

.craft-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: var(--craft-tile-h);
  padding: 6px 3px;
  border-radius: 9px;
  border: 1.5px solid #e0e8db;
  background: #fff;
  font-size: 10.5px;
  line-height: 1.2;
  font-weight: 600;
  color: #4d352d;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.1s;
  animation: craft-tile-in 0.25s ease;
}

/* Removes the element from THIS browser's board only (hides it locally --
   never deletes the shared discovery from Supabase). Styled like Loop's
   subtle purple superscript badges (e.g. the 🔍 lupa button's ambiguous-
   count marker) -- plain bold glyph, no circle/background/shadow, so it
   reads as a quiet corner mark instead of a loud button bolted onto the
   tile. */
.craft-remove-btn {
  position: absolute;
  top: -3px;
  left: -3px;
  padding: 0 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #7c3aed;
  background: none;
  border: none;
  box-shadow: none;
  cursor: pointer;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.15s ease, transform 0.15s ease, color 0.15s ease;
  z-index: 2;
}

.craft-remove-btn .bi {
  font-size: 10px;
  font-weight: 800;
}

.craft-tile:hover .craft-remove-btn,
.craft-remove-btn:focus-visible {
  opacity: 0.75;
  transform: scale(1);
}

.craft-remove-btn:hover {
  opacity: 1;
  color: #5b21b6;
  transform: scale(1.15);
}

.craft-remove-btn:active {
  transform: scale(0.9);
}

/* Touch devices have no hover state to reveal it -- keep it faintly
   visible always instead of hidden behind a gesture nobody will find. */
@media (hover: none) {
  .craft-remove-btn {
    opacity: 0.55;
    transform: scale(1);
  }
}

/* Fixed 2-line label so the icon sits at the same height on every tile,
   whether its name is one word or wraps -- overflow (>2 lines) ellipsizes.
   Excludes .craft-icon-badge, which is also a <span> but must keep its own
   flex centering for the icon glyph inside it. */
.craft-tile span:not(.craft-icon-badge) {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
  min-height: 2.3em;
  line-height: 1.15;
}

.craft-tile:active {
  transform: scale(0.96);
}

.craft-tile.selected {
  border-color: var(--craft-accent, #217346);
  background: var(--craft-accent-l, #eaf3e6);
}

.craft-tile.tried {
  opacity: 0.4;
  filter: grayscale(0.7);
}

/* Grid mode: Free tiles that can't pair with a Free first pick (every
   combination needs a Basic element). Still clickable -- switches the pick. */
.craft-tile.blocked {
  opacity: 0.3;
  filter: grayscale(1);
  border-style: dashed;
}

.craft-icon-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  flex-shrink: 0;
  transition: transform 0.15s;
}

.craft-icon-badge .bi,
.craft-icon-badge .craft-flag-main {
  font-size: 12px;
}

.craft-tile:hover .craft-icon-badge {
  transform: scale(1.08);
}

.craft-icon-badge-sm {
  width: 22px;
  height: 22px;
}

.craft-icon-badge-sm .bi,
.craft-icon-badge-sm .craft-flag-main {
  font-size: 11px;
}

.craft-icon-badge-lg {
  width: 60px;
  height: 60px;
}

.craft-icon-badge-lg .bi,
.craft-icon-badge-lg .craft-flag-main {
  font-size: 28px;
}

/* Tiny flag pin at the badge's corner for elements with a real,
   Claude-verified country/place link (e.g. Lobo/Wolf -> [ITA] Rome).
   Click it to swap it with the main Bootstrap icon (toggleFlagActive) --
   whichever isn't "main" right now sits here as the way back. */
.craft-flag-pin {
  position: absolute;
  bottom: -3px;
  right: -3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  line-height: 1;
  background: #fff;
  border-radius: 50%;
  padding: 1px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  cursor: pointer;
}

.craft-flag-pin:hover {
  transform: scale(1.15);
}

.craft-icon-badge-sm .craft-flag-pin {
  transform: scale(0.75);
  bottom: -2px;
  right: -2px;
}

.craft-icon-badge-lg .craft-flag-pin {
  font-size: 13px;
  bottom: -1px;
  right: -1px;
}

.craft-country {
  font-size: 11px;
  color: #445540;
  background: #f3f7f0;
  border-radius: 8px;
  padding: 6px 10px;
  margin-top: 2px;
  text-align: center;
  line-height: 1.4;
}

.craft-sci-score {
  font-size: 12px;
  color: #445540;
  text-align: center;
  margin-top: 2px;
}

.craft-sci-score strong {
  color: #2d1c17;
}

.craft-country strong {
  color: #2d1c17;
}

/* Twemoji flag images: fixed 16px size, same convention used across
   flagdoku.com (see zFlagdoku/flagsearch), instead of native (huge) SVG
   size or scaling with whatever font-size surrounds them. */
html body img.emoji {
  height: 16px !important;
  width: 16px !important;
  max-width: 16px !important;
  max-height: 16px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  vertical-align: -2px !important;
  display: inline-block !important;
  transform: none !important;
  filter: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* The badge corner pin is much smaller than the site-wide 16px -- override
   with equal-or-higher specificity so it still fits inside the tiny circle. */
html body .craft-flag-pin img.emoji {
  width: 9px !important;
  height: 9px !important;
  max-width: 9px !important;
  max-height: 9px !important;
  vertical-align: middle !important;
}

html body .craft-icon-badge-lg .craft-flag-pin img.emoji {
  width: 13px !important;
  height: 13px !important;
  max-width: 13px !important;
  max-height: 13px !important;
}

/* Same sizing treatment when the flag is the BIG main icon instead of
   the corner pin (after clicking to swap it in). */
html body .craft-flag-main img.emoji {
  width: 15px !important;
  height: 15px !important;
  max-width: 15px !important;
  max-height: 15px !important;
  vertical-align: middle !important;
}

html body .craft-icon-badge-sm .craft-flag-main img.emoji {
  width: 12px !important;
  height: 12px !important;
  max-width: 12px !important;
  max-height: 12px !important;
}

html body .craft-icon-badge-lg .craft-flag-main img.emoji {
  width: 30px !important;
  height: 30px !important;
  max-width: 30px !important;
  max-height: 30px !important;
}

@keyframes craft-tile-in {
  from { opacity: 0; transform: scale(0.85); }
  to { opacity: 1; transform: scale(1); }
}

.craft-new-badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--craft-accent, #217346);
  background: var(--craft-accent-l, #eaf3e6);
  border-radius: 999px;
  padding: 3px 10px;
}

.craft-loading {
  font-size: 13px;
  color: #55665a;
}

.craft-progress {
  width: 100%;
  max-width: 220px;
  height: 6px;
  border-radius: 999px;
  background: #e0e8db;
  overflow: hidden;
}

.craft-progress-bar {
  height: 100%;
  width: 40%;
  border-radius: 999px;
  background: var(--craft-accent, #217346);
  animation: craft-progress-slide 1.1s ease-in-out infinite;
}

.craft-progress-bar.is-brief {
  width: 100%;
  animation: craft-progress-brief 0.32s linear forwards;
}

@keyframes craft-progress-brief {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

@keyframes craft-progress-slide {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}

.craft-error {
  color: #b3261e;
  font-size: 13px;
  text-align: center;
  overflow-wrap: anywhere;
  line-height: 1.35;
}

.craft-history {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Five rows on screen. The rest stay in the log and scroll inside this box. */
.craft-history-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: calc(5 * 34px + 4 * 6px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.craft-history-title {
  font-size: 12px;
  font-weight: 700;
  color: #55665a;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-top: 6px;
}

.craft-history-item {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: nowrap;
  flex-shrink: 0;
  height: 34px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e0e8db;
  border-radius: 10px;
  padding: 5px 10px;
  font-size: 12px;
  color: #4d352d;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.craft-history-item:hover {
  border-color: var(--craft-accent, #217346);
  background: #f3f9f1;
}

.craft-history-plus,
.craft-history-arrow {
  color: var(--craft-accent, #217346);
  font-weight: 700;
}

.craft-history-noop {
  color: #8a9686;
  font-style: italic;
}

/* Merge mode: free elements (2x2, left) next to the inventory (2x2,
   right). Inventory cells start empty ("+" opens the picker). */
.craft-freeinv {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 10px;
}

.craft-freeinv-col {
  min-width: 0;
}

.craft-grid3-free-tiles.craft-freeinv-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--craft-gap);
  margin-top: 0;
  overflow: visible;
}

.craft-grid3-free-tiles.craft-freeinv-grid .craft-tile {
  width: auto;
  min-width: 0;
  flex-shrink: 1;
}

.craft-inv-header small {
  margin-left: auto;
  font-size: 10.5px;
  font-weight: 700;
  opacity: 0.7;
  letter-spacing: 0;
}

.craft-inv-header .bi {
  font-size: 0.95em;
}

.craft-inv-empty {
  height: var(--craft-tile-h);
  min-width: 0;
  border: 1.5px dashed #e0c98c;
  border-radius: 9px;
  background: rgba(255, 248, 230, 0.55);
  color: #b08a2a;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.craft-inv-empty:hover {
  background: #fff3d1;
  border-color: #c9a441;
}

/* Small x in the tile corner: frees that inventory cell. */
.craft-inv-remove {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #d9c48d;
  color: #8a6a12;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
  z-index: 2;
}

/* ===== Phone layout (iPhone 15 = 393x~660 visible in Safari) =====
   Grid mode must fit without scrolling while leaving room for the ads
   Flagdoku's index runs on mobile: a Playwire sticky footer (~50px + gap,
   bottom of the screen) and the corner video (bottom-right, just above the
   footer). The page reserves the footer height; the game area sits above
   the ad shells' z-index (same trick as index3KK82.css) so a corner video
   can never swallow a tap on a tile. The combine log stays below the fold. */
@media all {
  body {
    --craft-ad-footer-h: 60px;
    padding-bottom: calc(var(--craft-ad-footer-h) + env(safe-area-inset-bottom));
  }

  .craft-nav {
    justify-content: flex-start;
    padding: 8px 10px;
    font-size: 15px;
  }

  .craft-nav-right {
    right: 8px;
    gap: 3px;
  }

  /* Inert in grid mode anyway -- hiding them keeps the title clear. */
  .craft-nav-right .craft-reset-btn.disabled {
    display: none;
  }

  .craft-nav-right .craft-reset-btn {
    width: 26px;
    height: 26px;
    font-size: 13px;
  }

  .craft-rate-limit {
    padding: 3px 10px;
    font-size: 10px;
  }

  .craft-wrap {
    padding: 10px 12px 8px;
    gap: 8px;
  }

  .craft-slot {
    min-height: 38px;
    padding: 5px 8px;
  }

  .craft-grid {
    --craft-tile-h: 54px;
    --craft-gap: 6px;
    --craft-head-h: 20px;
  }

  .craft-grid3-on .craft-grid,
  .craft-grid3-on .craft-slots {
    position: relative;
    z-index: 2147482000;
  }

  .craft-grid3-section + .craft-grid3-section {
    margin-top: 8px;
  }

  .craft-grid3-cells {
    max-width: 290px;
  }

  .craft-grid3-cell {
    padding: 4px;
  }

  .craft-merge-done {
    margin-top: 4px;
  }

  /* Free row + inventory as low horizontal chips (icon left, name right)
     so both rows fit under the board without scrolling. */
  .craft-grid3-free-tiles .craft-tile {
    --craft-tile-h: 34px;
    flex-direction: row;
    justify-content: flex-start;
    gap: 5px;
    padding: 3px 5px;
    text-align: left;
    animation: none;
  }

  .craft-grid3-free-tiles .craft-tile .craft-icon-badge {
    width: 22px;
    height: 22px;
  }

  .craft-grid3-free-tiles .craft-tile .craft-icon-badge .bi {
    font-size: 11px;
  }

  .craft-grid3-free-tiles .craft-tile span:not(.craft-icon-badge) {
    min-height: 0;
    font-size: 10px;
    word-break: normal;
    hyphens: auto;
  }

  /* Compact result card in grid mode: icon on the left, text on the right,
     so a pick/result costs ~70px instead of ~180px. */
  .craft-grid3-on .craft-result {
    min-height: 0;
    padding: 8px 12px;
    text-align: left;
  }

  .craft-grid3-on .craft-result.show {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 12px;
    row-gap: 2px;
    align-items: center;
    justify-items: start;
  }

  .craft-grid3-on .craft-result:has(.craft-reload-btn) {
    padding-right: 76px;
  }

  .craft-grid3-on .craft-result > * {
    grid-column: 2;
  }

  /* Empty detail/recipe/comments holders would still cost a row gap each. */
  .craft-grid3-on .craft-result > :empty {
    display: none;
  }

  .craft-grid3-on .craft-result > .icon {
    grid-column: 1;
    grid-row: 1 / span 8;
  }

  .craft-grid3-on .craft-result > .craft-loading,
  .craft-grid3-on .craft-result > .craft-progress,
  .craft-grid3-on .craft-result > .craft-error,
  .craft-grid3-on .craft-result > .craft-comments-panel {
    grid-column: 1 / -1;
    justify-self: stretch;
    text-align: center;
  }

  .craft-grid3-on .craft-result .craft-icon-badge-lg {
    width: 44px;
    height: 44px;
  }

  .craft-grid3-on .craft-result .craft-icon-badge-lg .bi,
  .craft-grid3-on .craft-result .craft-icon-badge-lg .craft-flag-main {
    font-size: 20px;
  }

  .craft-grid3-on .craft-result .name {
    font-size: 15px;
  }

  .craft-grid3-on .craft-result .desc {
    font-size: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .craft-grid3-on .craft-result .craft-new-badge {
    font-size: 10px;
    padding: 1px 8px;
  }

  .craft-grid3-on .craft-result .craft-vote-row,
  .craft-grid3-on .craft-result .craft-btn-row {
    justify-content: flex-start;
    margin-top: 2px;
  }

  .craft-grid3-on .craft-result .craft-vote-btn {
    padding: 2px 8px;
    font-size: 11px;
  }

  .craft-grid3-on .craft-result .craft-more-btn {
    padding: 2px 6px 2px 0;
  }

  .craft-grid3-on .craft-result .craft-detail {
    max-height: 96px;
    overflow-y: auto;
  }

  .craft-grid3-on .craft-reload-btn {
    top: 8px;
    right: 8px;
  }

  .craft-grid3-on .craft-reuse-btn {
    right: 40px;
  }
}

/* Settings > Style button */
.craft-style-btn {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 6px;
  border: 1px solid var(--craft-accent, #217346);
  background: #fff;
  color: var(--craft-accent, #217346);
  cursor: pointer;
}

.craft-settings-panel.show {
  max-height: 340px;
}

/* =====================================================================
   "Doodle" style (settings.theme = "doodle") -- Doodle God look:
   night sky with nebulae, twinkling stars and clouds; elements float as
   glossy colored orbs (no card boxes) with chunky outlined comic labels;
   golden candy buttons; ribbon banners for section titles; the combine
   slots are glowing altar sockets and every result appears on spinning
   light rays. Everything is scoped to body.craft-theme-doodle.
   Orb color comes from iconBadge()'s inline --dg-c (the palette fg).
   ===================================================================== */
body.craft-theme-doodle {
  --dg-gold-1: #fff3b0;
  --dg-gold-2: #ffd04a;
  --dg-gold-3: #f29a1d;
  --dg-gold-4: #b8560b;
  --dg-outline: #2a0f3d;
  --dg-panel: rgba(30, 18, 72, 0.78);
  --dg-panel-2: rgba(14, 8, 40, 0.88);
  --dg-text: #fff7e3;
  --dg-soft: #c9bdf2;
  --dg-label-stroke:
    -1.5px -1.5px 0 var(--dg-outline), 1.5px -1.5px 0 var(--dg-outline),
    -1.5px 1.5px 0 var(--dg-outline), 1.5px 1.5px 0 var(--dg-outline),
    0 2px 0 var(--dg-outline), 0 3px 6px rgba(0, 0, 0, 0.5);
  font-family: 'Fredoka', 'Fira Sans', sans-serif;
  color: var(--dg-text);
  background:
    radial-gradient(ellipse 70% 45% at 15% 20%, rgba(186, 76, 255, 0.35), transparent 70%),
    radial-gradient(ellipse 60% 40% at 90% 35%, rgba(40, 170, 255, 0.28), transparent 70%),
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(255, 170, 90, 0.22), transparent 70%),
    linear-gradient(180deg, #1a0f45 0%, #2d1670 45%, #4a2396 80%, #6b3aa8 100%);
  background-attachment: fixed;
}

/* Starfield + clouds: two fixed layers behind everything. */
body.craft-theme-doodle::before,
body.craft-theme-doodle::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}

body.craft-theme-doodle::before {
  background-image:
    radial-gradient(1.2px 1.2px at 12px 18px, #fff, transparent),
    radial-gradient(1px 1px at 64px 92px, #fff, transparent),
    radial-gradient(1.6px 1.6px at 128px 40px, #ffeaa8, transparent),
    radial-gradient(1px 1px at 170px 150px, #fff, transparent),
    radial-gradient(1.4px 1.4px at 30px 170px, #bfe6ff, transparent),
    radial-gradient(1px 1px at 96px 128px, #fff, transparent),
    radial-gradient(2px 2px at 190px 70px, #fff6d0, transparent),
    radial-gradient(1px 1px at 150px 190px, #fff, transparent);
  background-size: 210px 210px;
  animation: dg-twinkle 5s ease-in-out infinite alternate;
}

body.craft-theme-doodle::after {
  background:
    radial-gradient(1.8px 1.8px at 40px 60px, #fff, transparent) 0 0 / 330px 330px,
    radial-gradient(1.4px 1.4px at 250px 210px, #ffe6a0, transparent) 0 0 / 330px 330px,
    radial-gradient(ellipse 45% 14% at 18% 104%, rgba(255, 235, 255, 0.55), transparent 70%),
    radial-gradient(ellipse 40% 12% at 55% 106%, rgba(230, 215, 255, 0.5), transparent 70%),
    radial-gradient(ellipse 45% 15% at 92% 103%, rgba(255, 225, 245, 0.5), transparent 70%),
    radial-gradient(ellipse 60% 10% at 50% 100%, rgba(255, 200, 240, 0.3), transparent 80%);
  animation: dg-twinkle 7s ease-in-out -2s infinite alternate-reverse;
}

@keyframes dg-twinkle {
  from { opacity: 0.55; }
  to { opacity: 1; }
}

/* ---------- Nav ---------- */
body.craft-theme-doodle .craft-nav {
  background: linear-gradient(180deg, rgba(10, 5, 30, 0.85), rgba(10, 5, 30, 0.35));
  border-bottom: none;
  box-shadow: none;
  padding-top: 10px;
  padding-bottom: 10px;
}

body.craft-theme-doodle .craft-nav > span {
  font-family: 'Luckiest Guy', 'Fredoka', cursive;
  font-weight: 400;
  font-size: 24px;
  letter-spacing: 1.5px;
  line-height: 1;
  padding-top: 3px;
  background: linear-gradient(180deg, var(--dg-gold-1) 0%, var(--dg-gold-2) 45%, var(--dg-gold-3) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--dg-outline);
  filter: drop-shadow(0 3px 0 var(--dg-outline)) drop-shadow(0 0 10px rgba(255, 200, 80, 0.45));
}

/* Round golden coins */
body.craft-theme-doodle .craft-nav .craft-reset-btn {
  background: radial-gradient(circle at 35% 28%, var(--dg-gold-1) 0%, var(--dg-gold-2) 35%, var(--dg-gold-3) 75%, var(--dg-gold-4) 100%);
  border: 2px solid var(--dg-outline);
  color: var(--dg-outline);
  box-shadow: 0 3px 0 var(--dg-outline), inset 0 -2px 3px rgba(120, 50, 0, 0.45), inset 0 2px 2px rgba(255, 255, 255, 0.7);
  transition: transform 0.1s, filter 0.15s;
}

body.craft-theme-doodle .craft-nav .craft-reset-btn:hover {
  filter: brightness(1.1);
}

body.craft-theme-doodle .craft-nav .craft-reset-btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--dg-outline), inset 0 -2px 3px rgba(120, 50, 0, 0.45);
}

body.craft-theme-doodle .craft-nav .craft-reset-btn.active {
  background: radial-gradient(circle at 35% 28%, #d7fbff 0%, #6fe0ff 40%, #2291d6 80%, #125a94 100%);
}

body.craft-theme-doodle .craft-rate-limit {
  background: rgba(10, 5, 30, 0.35);
  border-bottom: none;
  color: var(--dg-soft);
}

/* ---------- Dropdown panels (settings / tokens / archive / hint) ---------- */
body.craft-theme-doodle .craft-settings-panel,
body.craft-theme-doodle .craft-hint-panel {
  background: var(--dg-panel-2);
  border-bottom: none;
  border-radius: 0 0 18px 18px;
  box-shadow: inset 0 0 0 2px rgba(255, 208, 74, 0.55), 0 10px 26px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

body.craft-theme-doodle .craft-settings-row,
body.craft-theme-doodle .craft-hint-intro {
  color: var(--dg-text);
  font-weight: 500;
}

body.craft-theme-doodle .craft-tokens-empty,
body.craft-theme-doodle .craft-archive-info small {
  color: var(--dg-soft);
}

body.craft-theme-doodle .craft-settings-row input[type="checkbox"] {
  accent-color: var(--dg-gold-2);
}

body.craft-theme-doodle .craft-settings-row select {
  background: #2a1a66;
  border: 2px solid var(--dg-gold-3);
  border-radius: 10px;
  color: var(--dg-text);
  font-family: inherit;
  font-weight: 600;
}

body.craft-theme-doodle .craft-archive-title {
  font-family: 'Luckiest Guy', cursive;
  color: var(--dg-gold-2);
  letter-spacing: 1px;
}

body.craft-theme-doodle .craft-archive-row {
  color: var(--dg-text);
  border-color: rgba(255, 208, 74, 0.2);
}

body.craft-theme-doodle .craft-archive-row:hover,
body.craft-theme-doodle .craft-archive-row.current {
  background: rgba(255, 208, 74, 0.14);
}

body.craft-theme-doodle .craft-archive-num {
  font-family: 'Luckiest Guy', cursive;
  color: var(--dg-gold-2);
}

/* ---------- Candy buttons ---------- */
body.craft-theme-doodle .craft-style-btn,
body.craft-theme-doodle .craft-merge-new-btn,
body.craft-theme-doodle .craft-exit-archive-btn,
body.craft-theme-doodle .craft-random-btn,
body.craft-theme-doodle .craft-more-btn,
body.craft-theme-doodle .craft-hint-check-btn,
body.craft-theme-doodle .craft-comment-send-btn {
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  color: var(--dg-outline);
  background: linear-gradient(180deg, var(--dg-gold-1) 0%, var(--dg-gold-2) 40%, var(--dg-gold-3) 100%);
  border: 2px solid var(--dg-outline);
  border-radius: 12px;
  box-shadow: 0 3px 0 var(--dg-outline), inset 0 2px 0 rgba(255, 255, 255, 0.65);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  transition: transform 0.08s, box-shadow 0.08s, filter 0.15s;
}

body.craft-theme-doodle .craft-style-btn:hover,
body.craft-theme-doodle .craft-merge-new-btn:hover,
body.craft-theme-doodle .craft-exit-archive-btn:hover,
body.craft-theme-doodle .craft-random-btn:hover,
body.craft-theme-doodle .craft-more-btn:hover,
body.craft-theme-doodle .craft-hint-check-btn:hover,
body.craft-theme-doodle .craft-comment-send-btn:hover {
  filter: brightness(1.08);
  background: linear-gradient(180deg, var(--dg-gold-1) 0%, var(--dg-gold-2) 40%, var(--dg-gold-3) 100%);
}

body.craft-theme-doodle .craft-style-btn:active,
body.craft-theme-doodle .craft-merge-new-btn:active,
body.craft-theme-doodle .craft-exit-archive-btn:active,
body.craft-theme-doodle .craft-random-btn:active,
body.craft-theme-doodle .craft-more-btn:active,
body.craft-theme-doodle .craft-hint-check-btn:active,
body.craft-theme-doodle .craft-comment-send-btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--dg-outline), inset 0 2px 0 rgba(255, 255, 255, 0.65);
}

body.craft-theme-doodle .craft-more-btn {
  padding: 5px 14px 4px;
}

body.craft-theme-doodle .craft-merge-new-btn,
body.craft-theme-doodle .craft-exit-archive-btn {
  font-size: 11px;
  padding: 3px 10px 2px;
  border-radius: 10px;
}

/* Inventory: green candy so it doesn't read as "New board" */
body.craft-theme-doodle .craft-inventory-legend {
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  color: #103a05;
  background: linear-gradient(180deg, #e6ffb0 0%, #9be34a 40%, #4fae1e 100%);
  border: 2px solid var(--dg-outline);
  border-radius: 10px;
  box-shadow: 0 3px 0 var(--dg-outline), inset 0 2px 0 rgba(255, 255, 255, 0.6);
  padding: 2px 9px 1px;
}

/* ---------- Section titles as ribbon banners ---------- */
body.craft-theme-doodle .craft-tier-header {
  background: transparent;
  border-bottom: none;
  height: auto;
  min-height: var(--craft-head-h);
  padding: 2px 0 6px;
  text-transform: none;
  overflow: visible;
}

body.craft-theme-doodle .craft-tier-header > span:first-child {
  position: relative;
  display: inline-block;
  font-family: 'Luckiest Guy', cursive;
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 1px;
  line-height: 1;
  color: #fff;
  padding: 6px 22px 3px;
  background: linear-gradient(180deg, #ff6f8e 0%, #e0304f 55%, #a8173a 100%);
  clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 50%, 100% 100%, 0 100%, 10px 50%);
  text-shadow: 0 2px 0 #5e0a20;
  filter: drop-shadow(0 2px 0 var(--dg-outline));
}

body.craft-theme-doodle .craft-grid3-section + .craft-grid3-section .craft-tier-header > span:first-child {
  background: linear-gradient(180deg, #6fd3ff 0%, #2b8fe0 55%, #1a5aa8 100%);
  text-shadow: 0 2px 0 #0b2e5e;
}

/* ---------- Combine altar (the two slots) ---------- */
body.craft-theme-doodle .craft-slot {
  border: none;
  border-radius: 999px;
  color: var(--dg-text);
  font-weight: 600;
  text-shadow: var(--dg-label-stroke);
  background: radial-gradient(ellipse at 50% 30%, rgba(120, 90, 230, 0.55), rgba(25, 12, 70, 0.9) 70%);
  box-shadow:
    0 0 0 2px var(--dg-outline),
    0 0 0 4px var(--dg-gold-3),
    0 0 0 6px var(--dg-outline),
    inset 0 4px 12px rgba(0, 0, 0, 0.55),
    0 6px 16px rgba(0, 0, 0, 0.4);
}

body.craft-theme-doodle .craft-slot.filled {
  animation: dg-altar 1.8s ease-in-out infinite;
}

@keyframes dg-altar {
  0%, 100% {
    box-shadow: 0 0 0 2px var(--dg-outline), 0 0 0 4px var(--dg-gold-2), 0 0 0 6px var(--dg-outline),
      inset 0 4px 12px rgba(0, 0, 0, 0.55), 0 0 14px rgba(255, 208, 74, 0.45);
  }
  50% {
    box-shadow: 0 0 0 2px var(--dg-outline), 0 0 0 4px var(--dg-gold-1), 0 0 0 6px var(--dg-outline),
      inset 0 4px 12px rgba(0, 0, 0, 0.55), 0 0 26px rgba(255, 208, 74, 0.85);
  }
}

body.craft-theme-doodle .craft-slot-empty {
  font-family: 'Luckiest Guy', cursive;
  font-weight: 400;
  color: rgba(255, 240, 200, 0.55);
  text-shadow: 0 0 10px rgba(255, 208, 74, 0.6);
  animation: dg-float 2.4s ease-in-out infinite;
}

body.craft-theme-doodle .craft-plus {
  font-family: 'Luckiest Guy', cursive;
  font-weight: 400;
  font-size: 30px;
  line-height: 1;
  color: var(--dg-gold-2);
  -webkit-text-stroke: 1.5px var(--dg-outline);
  text-shadow: 0 3px 0 var(--dg-outline), 0 0 14px rgba(255, 208, 74, 0.8);
}

@keyframes dg-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

/* ---------- Glossy element orbs ---------- */
body.craft-theme-doodle .craft-icon-badge {
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.95) 0 9%, transparent 22%),
    radial-gradient(circle at 50% 42%,
      color-mix(in srgb, var(--dg-c, #7a6bd6) 35%, #fff) 0%,
      color-mix(in srgb, var(--dg-c, #7a6bd6) 85%, #fff) 45%,
      var(--dg-c, #7a6bd6) 70%,
      color-mix(in srgb, var(--dg-c, #7a6bd6) 55%, #000) 100%) !important;
  box-shadow:
    0 0 0 2px var(--dg-outline),
    0 3px 0 2px var(--dg-outline),
    0 0 14px color-mix(in srgb, var(--dg-c, #7a6bd6) 70%, transparent),
    inset 0 -4px 6px rgba(0, 0, 0, 0.3) !important;
}

body.craft-theme-doodle .craft-icon-badge .bi {
  color: #fff !important;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.55)) drop-shadow(0 0 2px rgba(0, 0, 0, 0.35));
}

/* ---------- The 3x3 board: magic tablet, tiles float without boxes ---------- */
body.craft-theme-doodle .craft-grid3-cells {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(160, 120, 255, 0.35), transparent 70%),
    linear-gradient(180deg, rgba(40, 22, 100, 0.85), rgba(18, 9, 52, 0.92));
  border: 3px solid var(--dg-gold-3);
  border-radius: 20px;
  box-shadow:
    0 0 0 3px var(--dg-outline),
    inset 0 0 0 2px rgba(255, 243, 176, 0.35),
    inset 0 8px 20px rgba(0, 0, 0, 0.45),
    0 10px 24px rgba(0, 0, 0, 0.5),
    0 0 30px rgba(170, 120, 255, 0.35);
}

body.craft-theme-doodle .craft-grid3-cell {
  border-color: rgba(255, 208, 74, 0.12);
}

body.craft-theme-doodle .craft-tile {
  background: transparent;
  border: none;
  box-shadow: none;
  color: #fff;
  font-weight: 600;
  text-shadow: var(--dg-label-stroke);
  border-radius: 14px;
  transition: transform 0.12s, background 0.15s;
}

body.craft-theme-doodle .craft-tile:hover {
  background: radial-gradient(circle at 50% 40%, rgba(255, 230, 140, 0.18), transparent 70%);
}

body.craft-theme-doodle .craft-tile:hover .craft-icon-badge {
  transform: scale(1.12) rotate(-4deg);
}

body.craft-theme-doodle .craft-tile.selected {
  background: radial-gradient(circle at 50% 38%, rgba(255, 220, 110, 0.55), rgba(255, 190, 60, 0.12) 55%, transparent 75%);
  border: none;
}

body.craft-theme-doodle .craft-tile.selected .craft-icon-badge {
  animation: dg-pick 0.9s ease-in-out infinite;
}

@keyframes dg-pick {
  0%, 100% { transform: translateY(-1px) scale(1.06); }
  50% { transform: translateY(-3px) scale(1.14) rotate(4deg); }
}

body.craft-theme-doodle .craft-tile.tried {
  opacity: 0.45;
  filter: grayscale(0.6) brightness(0.8);
}

body.craft-theme-doodle .craft-merge-empty {
  border: 2px dashed rgba(255, 208, 74, 0.25);
  border-radius: 50%;
  width: calc(var(--craft-tile-h) - 14px);
  height: calc(var(--craft-tile-h) - 14px);
  margin: 7px auto;
  background: radial-gradient(circle, rgba(255, 208, 74, 0.08), transparent 70%);
}

body.craft-theme-doodle .craft-merge-done {
  font-family: 'Luckiest Guy', cursive;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.5px;
  color: var(--dg-gold-2);
  text-shadow: var(--dg-label-stroke), 0 0 14px rgba(255, 208, 74, 0.8);
  animation: dg-float 2s ease-in-out infinite;
}

/* Free row + inventory: floating stone chips */
body.craft-theme-doodle .craft-grid3-free-tiles .craft-tile {
  background: linear-gradient(180deg, rgba(60, 36, 140, 0.85), rgba(30, 16, 80, 0.9));
  box-shadow: 0 0 0 2px var(--dg-outline), inset 0 0 0 1.5px rgba(255, 208, 74, 0.45), 0 3px 0 2px var(--dg-outline);
  border-radius: 14px;
}

body.craft-theme-doodle .craft-grid3-free-tiles .craft-tile.selected {
  background: linear-gradient(180deg, rgba(150, 100, 40, 0.95), rgba(90, 50, 20, 0.95));
  box-shadow: 0 0 0 2px var(--dg-outline), inset 0 0 0 2px var(--dg-gold-1), 0 0 16px rgba(255, 208, 74, 0.8);
}

body.craft-theme-doodle .craft-inventory-tiles .craft-tile {
  background: linear-gradient(180deg, rgba(40, 110, 70, 0.85), rgba(16, 60, 40, 0.92));
  box-shadow: 0 0 0 2px var(--dg-outline), inset 0 0 0 1.5px rgba(170, 255, 140, 0.45), 0 3px 0 2px var(--dg-outline);
}

body.craft-theme-doodle .craft-inventory-empty,
body.craft-theme-doodle .craft-no-results {
  color: var(--dg-soft);
}

/* ---------- Result: element revealed on spinning light rays ---------- */
body.craft-theme-doodle .craft-result {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 210, 120, 0.25), transparent 65%),
    linear-gradient(180deg, rgba(48, 26, 116, 0.95), rgba(20, 10, 58, 0.97));
  border: 3px solid var(--dg-gold-3);
  border-radius: 20px;
  color: var(--dg-text);
  overflow: hidden;
  box-shadow: 0 0 0 3px var(--dg-outline), inset 0 0 0 2px rgba(255, 243, 176, 0.3), 0 10px 26px rgba(0, 0, 0, 0.5);
}

body.craft-theme-doodle .craft-result.show {
  animation: dg-pop 0.45s cubic-bezier(0.2, 1.6, 0.4, 1);
}

@keyframes dg-pop {
  0% { transform: scale(0.7); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

body.craft-theme-doodle .craft-result > .icon {
  position: relative;
  z-index: 0;
}

body.craft-theme-doodle .craft-result > .icon::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 190%;
  aspect-ratio: 1;
  translate: -50% -50%;
  z-index: -1;
  border-radius: 50%;
  background: repeating-conic-gradient(rgba(255, 236, 150, 0.55) 0deg 9deg, transparent 9deg 22.5deg);
  -webkit-mask: radial-gradient(circle, #000 20%, transparent 70%);
  mask: radial-gradient(circle, #000 20%, transparent 70%);
  animation: dg-rays 9s linear infinite;
}

/* New discovery: bigger, brighter burst */
body.craft-theme-doodle .craft-result:has(.craft-new-badge) > .icon::before {
  width: 250%;
  background: repeating-conic-gradient(rgba(255, 245, 190, 0.85) 0deg 8deg, transparent 8deg 20deg);
  animation-duration: 5s;
}

@keyframes dg-rays {
  to { rotate: 360deg; }
}

body.craft-theme-doodle .craft-result .craft-icon-badge-lg {
  animation: dg-float 2.2s ease-in-out infinite;
}

body.craft-theme-doodle .craft-result .name {
  font-family: 'Luckiest Guy', cursive;
  font-weight: 400;
  font-size: 22px;
  letter-spacing: 0.8px;
  line-height: 1.05;
  color: var(--dg-gold-2);
  -webkit-text-stroke: 1px var(--dg-outline);
  text-shadow: 0 3px 0 var(--dg-outline), 0 0 14px rgba(255, 208, 74, 0.55);
}

body.craft-theme-doodle .craft-result .desc,
body.craft-theme-doodle .craft-detail,
body.craft-theme-doodle .craft-country,
body.craft-theme-doodle .craft-loading,
body.craft-theme-doodle .craft-purpose-used {
  color: var(--dg-soft);
}

body.craft-theme-doodle .craft-error {
  color: #ffb3c1;
}

body.craft-theme-doodle .craft-new-badge {
  font-family: 'Luckiest Guy', cursive;
  font-weight: 400;
  letter-spacing: 1px;
  color: #fff;
  background: linear-gradient(180deg, #ff7a59, #e2253c);
  border: 2px solid var(--dg-outline);
  border-radius: 999px;
  box-shadow: 0 2px 0 var(--dg-outline);
  text-shadow: 0 1.5px 0 #5e0a20;
  animation: dg-new 1.1s ease-in-out infinite;
}

@keyframes dg-new {
  0%, 100% { transform: rotate(-4deg) scale(1); }
  50% { transform: rotate(4deg) scale(1.08); }
}

body.craft-theme-doodle .craft-reload-btn {
  background: rgba(255, 255, 255, 0.1);
  color: var(--dg-gold-2);
  border: 1.5px solid rgba(255, 208, 74, 0.5);
}

body.craft-theme-doodle .craft-vote-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1.5px solid rgba(255, 208, 74, 0.45);
  color: var(--dg-text);
  font-family: inherit;
}

body.craft-theme-doodle .craft-vote-btn.active {
  background: linear-gradient(180deg, var(--dg-gold-2), var(--dg-gold-3));
  color: var(--dg-outline);
  border-color: var(--dg-outline);
}

body.craft-theme-doodle .craft-progress {
  background: rgba(255, 255, 255, 0.12);
}

body.craft-theme-doodle .craft-progress-bar {
  background: linear-gradient(90deg, var(--dg-gold-2), #ff7ab8, #7ad7ff);
}

body.craft-theme-doodle .craft-comments-panel,
body.craft-theme-doodle .craft-comment-row {
  color: var(--dg-text);
  border-color: rgba(255, 208, 74, 0.25);
}

/* ---------- Inputs ---------- */
body.craft-theme-doodle .craft-search-input {
  background: rgba(20, 10, 60, 0.85);
  border: 2px solid var(--dg-gold-3);
  border-radius: 12px;
  color: var(--dg-text);
  font-family: inherit;
}

body.craft-theme-doodle .craft-search-input::placeholder {
  color: rgba(201, 189, 242, 0.7);
}

/* ---------- Combine log ---------- */
body.craft-theme-doodle .craft-history-title {
  font-family: 'Luckiest Guy', cursive;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 1px;
  color: var(--dg-gold-2);
  text-shadow: var(--dg-label-stroke);
}

body.craft-theme-doodle .craft-history-item {
  background: rgba(30, 16, 80, 0.8);
  border: 1.5px solid rgba(255, 208, 74, 0.35);
  border-radius: 14px;
  color: var(--dg-text);
}

body.craft-theme-doodle .craft-history-item:hover {
  background: rgba(60, 36, 140, 0.9);
  border-color: var(--dg-gold-2);
}

body.craft-theme-doodle .craft-history-plus,
body.craft-theme-doodle .craft-history-arrow {
  color: var(--dg-gold-2);
}

body.craft-theme-doodle .craft-history-noop {
  color: var(--dg-soft);
}

/* ---------- Inventory picker sheet ---------- */
body.craft-theme-doodle .craft-inventory-sheet {
  background: linear-gradient(180deg, #2d1a75, #170b45);
  border: 3px solid var(--dg-gold-3);
  border-radius: 20px;
  color: var(--dg-text);
  box-shadow: 0 0 0 3px var(--dg-outline), 0 16px 36px rgba(0, 0, 0, 0.55);
}

body.craft-theme-doodle .craft-inventory-sheet-head strong {
  font-family: 'Luckiest Guy', cursive;
  font-weight: 400;
  letter-spacing: 1px;
  color: var(--dg-gold-2);
  text-shadow: var(--dg-label-stroke);
}

body.craft-theme-doodle .craft-inventory-results .craft-tile {
  background: rgba(60, 36, 140, 0.6);
  box-shadow: inset 0 0 0 1.5px rgba(255, 208, 74, 0.35);
}

/* Phone: tiles get a bit taller so the bigger orb + outlined 2-line label
   fit (board grows ~12px in total, still no scroll on an iPhone 15). */
@media all {
  body.craft-theme-doodle .craft-nav > span {
    font-size: 19px;
  }

  body.craft-theme-doodle .craft-grid {
    --craft-tile-h: 62px;
  }

  body.craft-theme-doodle .craft-grid3-cells .craft-tile {
    padding: 5px 2px 2px;
    gap: 4px;
  }

  body.craft-theme-doodle .craft-grid3-cells .craft-tile span:not(.craft-icon-badge) {
    min-height: 2.2em;
    line-height: 1.1;
  }

  body.craft-theme-doodle .craft-grid3-free-tiles .craft-tile {
    padding-left: 6px;
  }

  body.craft-theme-doodle.craft-grid3-on .craft-result .craft-more-btn {
    padding: 3px 10px 2px;
  }

  body.craft-theme-doodle .craft-grid3-cells .craft-icon-badge {
    width: 28px;
    height: 28px;
  }

  body.craft-theme-doodle .craft-grid3-cells .craft-icon-badge .bi {
    font-size: 14px;
  }

  body.craft-theme-doodle .craft-result .name {
    font-size: 18px;
  }

  body.craft-theme-doodle .craft-slot {
    padding: 6px 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.craft-theme-doodle *,
  body.craft-theme-doodle::before,
  body.craft-theme-doodle::after,
  body.craft-theme-doodle *::before {
    animation: none !important;
  }
}

body.craft-theme-doodle .craft-detail {
  background: rgba(10, 5, 30, 0.55);
  border: 1.5px solid rgba(255, 208, 74, 0.3);
  border-radius: 12px;
  color: var(--dg-text);
}

/* =====================================================================
   "Sketchbook" style (settings.theme = "sketch"): Doodle-like, but made
   to look drawn by hand instead of rendered -- grainy paper, ink lines
   with slightly wobbly corners, flat muted colors, hard offset shadows,
   masking-tape section labels, an index card for the result and an ink
   stamp for new discoveries. No gradients-as-light, no glow, no blur.
   Scoped to body.craft-theme-sketch. Element fill = inline --dg-c.
   ===================================================================== */
body.craft-theme-sketch {
  --sk-paper: #f3ead8;
  --sk-paper-2: #fbf6ea;
  --sk-ink: #2d2622;
  --sk-pencil: #8b7f71;
  --sk-red: #c4553b;
  --sk-ochre: #dfa53a;
  --sk-sage: #7f9b6c;
  --sk-blue: #587495;
  --sk-tape: rgba(236, 206, 112, 0.78);
  --sk-wobble: 14px 20px 12px 18px / 18px 12px 20px 14px;
  --sk-wobble-2: 20px 12px 18px 14px / 12px 18px 14px 20px;
  font-family: 'Patrick Hand', 'Fira Sans', sans-serif;
  color: var(--sk-ink);
  background-color: var(--sk-paper);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .36 0 0 0 0 .29 0 0 0 0 .2 0 0 0 .11 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Nav: ink title, hand-drawn underline ---------- */
body.craft-theme-sketch .craft-nav {
  background: transparent;
  color: var(--sk-ink);
  box-shadow: none;
  border-bottom: 2.5px solid var(--sk-ink);
  border-radius: 0 0 50% 40% / 0 0 4px 6px;
}

body.craft-theme-sketch .craft-nav > span {
  font-family: 'Gochi Hand', cursive;
  font-weight: 400;
  font-size: 26px;
  letter-spacing: 1px;
  line-height: 1;
  transform: rotate(-2deg);
  text-shadow: 2px 2px 0 var(--sk-ochre);
}

body.craft-theme-sketch .craft-nav .craft-reset-btn {
  background: var(--sk-paper-2);
  color: var(--sk-ink);
  border: 2px solid var(--sk-ink);
  border-radius: 48% 52% 46% 54% / 54% 46% 52% 48%;
  box-shadow: 2px 2px 0 var(--sk-ink);
  transition: transform 0.08s;
}

body.craft-theme-sketch .craft-nav .craft-reset-btn:nth-child(odd) {
  transform: rotate(-4deg);
}

body.craft-theme-sketch .craft-nav .craft-reset-btn:nth-child(even) {
  transform: rotate(3deg);
}

body.craft-theme-sketch .craft-nav .craft-reset-btn:hover {
  background: #fff2c9;
}

body.craft-theme-sketch .craft-nav .craft-reset-btn:active {
  transform: translate(2px, 2px);
  box-shadow: none;
}

body.craft-theme-sketch .craft-nav .craft-reset-btn.active {
  background: var(--sk-ochre);
}

body.craft-theme-sketch .craft-rate-limit {
  background: transparent;
  border-bottom: 1.5px dashed var(--sk-pencil);
  color: var(--sk-pencil);
  font-size: 12px;
}

/* ---------- Dropdown panels: a sheet of notebook paper ---------- */
body.craft-theme-sketch .craft-settings-panel,
body.craft-theme-sketch .craft-hint-panel {
  background-color: var(--sk-paper-2);
  background-image: repeating-linear-gradient(180deg, transparent 0 27px, rgba(88, 116, 149, 0.22) 27px 28px);
  border-bottom: none;
  border-radius: 0 0 var(--sk-wobble);
  box-shadow: inset 0 0 0 2px var(--sk-ink), 3px 4px 0 var(--sk-ink);
}

body.craft-theme-sketch .craft-settings-row,
body.craft-theme-sketch .craft-hint-intro {
  color: var(--sk-ink);
  font-size: 15px;
}

body.craft-theme-sketch .craft-tokens-empty,
body.craft-theme-sketch .craft-archive-info small {
  color: var(--sk-pencil);
}

body.craft-theme-sketch .craft-settings-row input[type="checkbox"] {
  accent-color: var(--sk-red);
}

body.craft-theme-sketch .craft-settings-row select {
  background: var(--sk-paper-2);
  border: 2px solid var(--sk-ink);
  border-radius: var(--sk-wobble);
  color: var(--sk-ink);
  font-family: inherit;
  font-size: 14px;
}

body.craft-theme-sketch .craft-archive-title,
body.craft-theme-sketch .craft-archive-num {
  font-family: 'Gochi Hand', cursive;
  color: var(--sk-red);
}

body.craft-theme-sketch .craft-archive-row {
  color: var(--sk-ink);
  border-color: rgba(45, 38, 34, 0.2);
}

body.craft-theme-sketch .craft-archive-row:hover,
body.craft-theme-sketch .craft-archive-row.current {
  background: rgba(223, 165, 58, 0.22);
}

/* ---------- Buttons: flat paper stickers, ink outline, hard shadow ---------- */
body.craft-theme-sketch .craft-style-btn,
body.craft-theme-sketch .craft-merge-new-btn,
body.craft-theme-sketch .craft-exit-archive-btn,
body.craft-theme-sketch .craft-random-btn,
body.craft-theme-sketch .craft-more-btn,
body.craft-theme-sketch .craft-hint-check-btn,
body.craft-theme-sketch .craft-comment-send-btn,
body.craft-theme-sketch .craft-inventory-legend {
  font-family: 'Patrick Hand', sans-serif;
  font-weight: 400;
  font-size: 15px;
  text-transform: none;
  letter-spacing: 0.2px;
  color: var(--sk-ink);
  background: var(--sk-ochre);
  border: 2px solid var(--sk-ink);
  border-radius: var(--sk-wobble);
  box-shadow: 2px 3px 0 var(--sk-ink);
  padding: 2px 12px;
  transition: transform 0.08s, box-shadow 0.08s;
}

body.craft-theme-sketch .craft-merge-new-btn { transform: rotate(1.5deg); }
body.craft-theme-sketch .craft-inventory-legend { background: var(--sk-sage); transform: rotate(-1.5deg); }
body.craft-theme-sketch .craft-exit-archive-btn { background: var(--sk-blue); color: #fff; }
body.craft-theme-sketch .craft-more-btn:nth-child(2) { background: #e9b9a8; }

body.craft-theme-sketch .craft-style-btn:hover,
body.craft-theme-sketch .craft-merge-new-btn:hover,
body.craft-theme-sketch .craft-random-btn:hover,
body.craft-theme-sketch .craft-more-btn:hover,
body.craft-theme-sketch .craft-hint-check-btn:hover,
body.craft-theme-sketch .craft-comment-send-btn:hover,
body.craft-theme-sketch .craft-inventory-legend:hover {
  filter: brightness(1.06);
}

body.craft-theme-sketch .craft-style-btn:active,
body.craft-theme-sketch .craft-merge-new-btn:active,
body.craft-theme-sketch .craft-exit-archive-btn:active,
body.craft-theme-sketch .craft-random-btn:active,
body.craft-theme-sketch .craft-more-btn:active,
body.craft-theme-sketch .craft-hint-check-btn:active,
body.craft-theme-sketch .craft-comment-send-btn:active,
body.craft-theme-sketch .craft-inventory-legend:active {
  transform: translate(2px, 3px);
  box-shadow: none;
}

/* ---------- Section titles on a strip of masking tape ---------- */
body.craft-theme-sketch .craft-tier-header {
  background: transparent;
  border-bottom: none;
  height: auto;
  min-height: var(--craft-head-h);
  padding: 2px 0 6px;
  text-transform: none;
}

body.craft-theme-sketch .craft-tier-header > span:first-child {
  display: inline-block;
  font-family: 'Gochi Hand', cursive;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.5px;
  line-height: 1;
  color: var(--sk-ink);
  padding: 5px 16px 4px;
  background: var(--sk-tape);
  transform: rotate(-1.8deg);
  clip-path: polygon(0 8%, 4% 0, 9% 10%, 15% 2%, 22% 9%, 30% 1%, 38% 8%, 47% 0, 55% 9%, 63% 2%, 71% 10%, 79% 1%, 87% 9%, 94% 2%, 100% 8%,
    98% 50%, 100% 92%, 95% 100%, 88% 91%, 80% 99%, 72% 90%, 64% 98%, 56% 91%, 47% 100%, 39% 92%, 31% 99%, 23% 91%, 15% 98%, 8% 90%, 3% 100%, 0 92%, 2% 50%);
}

body.craft-theme-sketch .craft-grid3-section + .craft-grid3-section .craft-tier-header > span:first-child {
  background: rgba(172, 201, 214, 0.8);
  transform: rotate(1.2deg);
}

/* ---------- Combine slots: dashed pencil outlines ---------- */
body.craft-theme-sketch .craft-slot {
  background: var(--sk-paper-2);
  border: 2.5px dashed var(--sk-pencil);
  border-radius: var(--sk-wobble);
  color: var(--sk-ink);
  font-size: 16px;
  font-weight: 400;
  box-shadow: none;
}

body.craft-theme-sketch .craft-slot + .craft-verb + .craft-slot {
  border-radius: var(--sk-wobble-2);
}

body.craft-theme-sketch .craft-slot.filled {
  border: 2.5px solid var(--sk-ink);
  box-shadow: 3px 3px 0 var(--sk-ink);
}

body.craft-theme-sketch .craft-slot-empty {
  font-family: 'Gochi Hand', cursive;
  font-weight: 400;
  color: var(--sk-pencil);
}

body.craft-theme-sketch .craft-plus {
  font-family: 'Gochi Hand', cursive;
  font-weight: 400;
  font-size: 34px;
  line-height: 1;
  color: var(--sk-red);
  transform: rotate(8deg);
}

/* ---------- Elements: flat painted circles with an ink ring ---------- */
body.craft-theme-sketch .craft-icon-badge {
  background: color-mix(in srgb, var(--dg-c, #8b7f71) 38%, #fbf1dc) !important;
  border: 2px solid var(--sk-ink);
  border-radius: 47% 53% 50% 50% / 53% 47% 53% 47%;
  box-shadow: 2px 2px 0 color-mix(in srgb, var(--dg-c, #8b7f71) 70%, var(--sk-ink)) !important;
}

body.craft-theme-sketch .craft-icon-badge .bi {
  color: var(--sk-ink) !important;
}

/* ---------- Board: a sheet with pencil grid lines ---------- */
body.craft-theme-sketch .craft-grid3-cells {
  background: var(--sk-paper-2);
  border: 2.5px solid var(--sk-ink);
  border-radius: var(--sk-wobble);
  box-shadow: 4px 5px 0 var(--sk-ink);
  transform: rotate(-0.4deg);
}

body.craft-theme-sketch .craft-grid3-cell {
  border-right: 1.5px dashed rgba(139, 127, 113, 0.55);
  border-bottom: 1.5px dashed rgba(139, 127, 113, 0.55);
}

body.craft-theme-sketch .craft-grid3-cell:nth-child(3n) {
  border-right: none;
}

body.craft-theme-sketch .craft-grid3-cell:nth-last-child(-n+3) {
  border-bottom: none;
}

body.craft-theme-sketch .craft-tile {
  position: relative;
  background: transparent;
  border: none;
  box-shadow: none;
  color: var(--sk-ink);
  font-size: 13px;
  font-weight: 400;
}

body.craft-theme-sketch .craft-tile:hover {
  background: rgba(223, 165, 58, 0.12);
}

body.craft-theme-sketch .craft-tile:hover .craft-icon-badge {
  transform: rotate(-6deg);
}

/* Picked: circled in red pen */
body.craft-theme-sketch .craft-tile.selected {
  background: transparent;
  border: none;
}

body.craft-theme-sketch .craft-tile.selected::after {
  content: "";
  position: absolute;
  inset: 1px 3px;
  border: 2.5px solid var(--sk-red);
  border-radius: 52% 44% 56% 42% / 46% 58% 40% 54%;
  transform: rotate(-3deg);
  pointer-events: none;
}

body.craft-theme-sketch .craft-tile.tried {
  opacity: 0.4;
  filter: grayscale(0.8);
}

body.craft-theme-sketch .craft-merge-empty {
  border: 2px dashed rgba(139, 127, 113, 0.45);
  border-radius: 47% 53% 50% 50% / 53% 47% 53% 47%;
  width: calc(var(--craft-tile-h) - 16px);
  height: calc(var(--craft-tile-h) - 16px);
  margin: 8px auto;
}

body.craft-theme-sketch .craft-merge-done {
  font-family: 'Gochi Hand', cursive;
  font-weight: 400;
  font-size: 19px;
  color: var(--sk-red);
  transform: rotate(-2deg);
}

/* Free row + inventory: paper chips */
body.craft-theme-sketch .craft-grid3-free-tiles .craft-tile {
  background: var(--sk-paper-2);
  border: 2px solid var(--sk-ink);
  border-radius: var(--sk-wobble);
  box-shadow: 2px 2px 0 var(--sk-ink);
}

body.craft-theme-sketch .craft-grid3-free-tiles .craft-tile:nth-child(even) {
  border-radius: var(--sk-wobble-2);
}

body.craft-theme-sketch .craft-grid3-free-tiles .craft-tile.selected {
  background: #fff2c9;
  border-color: var(--sk-red);
  box-shadow: 2px 2px 0 var(--sk-red);
}

body.craft-theme-sketch .craft-grid3-free-tiles .craft-tile.selected::after {
  display: none;
}

body.craft-theme-sketch .craft-inventory-tiles .craft-tile {
  background: #e8eedc;
}

body.craft-theme-sketch .craft-inventory-empty,
body.craft-theme-sketch .craft-no-results {
  color: var(--sk-pencil);
}

/* ---------- Result: an index card taped to the page ---------- */
body.craft-theme-sketch .craft-result {
  background-color: #fffdf6;
  background-image:
    linear-gradient(90deg, transparent 0 22px, rgba(196, 85, 59, 0.45) 22px 23.5px, transparent 23.5px),
    repeating-linear-gradient(180deg, transparent 0 25px, rgba(88, 116, 149, 0.25) 25px 26px);
  border: 2px solid var(--sk-ink);
  border-radius: 3px;
  color: var(--sk-ink);
  box-shadow: 4px 5px 0 rgba(45, 38, 34, 0.85);
  transform: rotate(0.6deg);
  overflow: visible;
}

body.craft-theme-sketch .craft-result.show {
  transform: rotate(0.6deg);
}

body.craft-theme-sketch .craft-result::before {
  content: "";
  position: absolute;
  top: -11px;
  left: 50%;
  width: 90px;
  height: 22px;
  translate: -50% 0;
  rotate: -4deg;
  background: var(--sk-tape);
  clip-path: polygon(0 10%, 6% 0, 12% 12%, 20% 2%, 30% 10%, 40% 0, 50% 12%, 60% 2%, 70% 10%, 80% 0, 90% 12%, 100% 4%,
    100% 90%, 93% 100%, 85% 88%, 75% 98%, 65% 90%, 55% 100%, 45% 88%, 35% 98%, 25% 90%, 15% 100%, 6% 90%, 0 96%);
  pointer-events: none;
}

body.craft-theme-sketch .craft-result .name {
  font-family: 'Gochi Hand', cursive;
  font-weight: 400;
  font-size: 26px;
  line-height: 1;
  color: var(--sk-ink);
}

body.craft-theme-sketch .craft-result .desc {
  font-size: 15px;
  color: #4a3f38;
}

body.craft-theme-sketch .craft-detail {
  background: rgba(243, 234, 216, 0.85);
  border: 1.5px dashed var(--sk-pencil);
  border-radius: var(--sk-wobble);
  color: var(--sk-ink);
  font-size: 14px;
}

body.craft-theme-sketch .craft-country,
body.craft-theme-sketch .craft-loading,
body.craft-theme-sketch .craft-purpose-used {
  color: #4a3f38;
}

body.craft-theme-sketch .craft-error {
  color: var(--sk-red);
}

/* New discovery: red rubber stamp */
body.craft-theme-sketch .craft-new-badge {
  font-family: 'Gochi Hand', cursive;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--sk-red);
  background: transparent;
  border: 2.5px solid var(--sk-red);
  border-radius: 4px;
  padding: 1px 8px;
  transform: rotate(-7deg);
  opacity: 0.88;
  mix-blend-mode: multiply;
}

body.craft-theme-sketch .craft-reload-btn {
  background: var(--sk-paper-2);
  color: var(--sk-ink);
  border: 2px solid var(--sk-ink);
  box-shadow: 1.5px 1.5px 0 var(--sk-ink);
}

body.craft-theme-sketch .craft-vote-btn {
  background: transparent;
  border: 1.5px solid var(--sk-ink);
  border-radius: var(--sk-wobble);
  color: var(--sk-ink);
  font-family: inherit;
  font-size: 14px;
}

body.craft-theme-sketch .craft-vote-btn.active {
  background: var(--sk-ochre);
}

body.craft-theme-sketch .craft-progress {
  background: transparent;
  border: 1.5px solid var(--sk-ink);
}

body.craft-theme-sketch .craft-progress-bar {
  background: repeating-linear-gradient(-45deg, var(--sk-ink) 0 2px, transparent 2px 6px);
}

body.craft-theme-sketch .craft-comments-panel,
body.craft-theme-sketch .craft-comment-row {
  color: var(--sk-ink);
  border-color: rgba(45, 38, 34, 0.25);
}

/* ---------- Inputs ---------- */
body.craft-theme-sketch .craft-search-input {
  background: var(--sk-paper-2);
  border: 2px solid var(--sk-ink);
  border-radius: var(--sk-wobble);
  color: var(--sk-ink);
  font-family: inherit;
  font-size: 16.1px;
}

body.craft-theme-sketch .craft-search-input::placeholder {
  color: var(--sk-pencil);
}

/* ---------- Combine log: lines in a notebook ---------- */
body.craft-theme-sketch .craft-history-title {
  font-family: 'Gochi Hand', cursive;
  font-weight: 400;
  font-size: 17px;
  text-transform: none;
  color: var(--sk-ink);
}

body.craft-theme-sketch .craft-history-item {
  background: transparent;
  border: none;
  border-bottom: 1.5px solid rgba(88, 116, 149, 0.35);
  border-radius: 0;
  color: var(--sk-ink);
  font-size: 14px;
}

body.craft-theme-sketch .craft-history-item:hover {
  background: rgba(223, 165, 58, 0.15);
}

body.craft-theme-sketch .craft-history-plus,
body.craft-theme-sketch .craft-history-arrow {
  color: var(--sk-red);
}

body.craft-theme-sketch .craft-history-noop {
  color: var(--sk-pencil);
}

/* ---------- Inventory picker sheet ---------- */
body.craft-theme-sketch .craft-inventory-sheet {
  background: var(--sk-paper-2);
  border: 2.5px solid var(--sk-ink);
  border-radius: var(--sk-wobble);
  box-shadow: 5px 6px 0 var(--sk-ink);
  color: var(--sk-ink);
}

body.craft-theme-sketch .craft-inventory-sheet-head strong {
  font-family: 'Gochi Hand', cursive;
  font-weight: 400;
  font-size: 18px;
}

body.craft-theme-sketch .craft-inventory-results .craft-tile {
  background: #fff;
  border: 1.5px solid var(--sk-ink);
  border-radius: var(--sk-wobble);
}

@media all {
  body.craft-theme-sketch .craft-nav > span {
    font-size: 22px;
  }

  body.craft-theme-sketch .craft-grid {
    --craft-tile-h: 60px;
  }

  body.craft-theme-sketch .craft-grid3-cells .craft-tile {
    padding: 5px 2px 2px;
    gap: 4px;
  }

  body.craft-theme-sketch .craft-grid3-cells .craft-icon-badge {
    width: 28px;
    height: 28px;
  }

  body.craft-theme-sketch .craft-grid3-cells .craft-icon-badge .bi {
    font-size: 14px;
  }

  body.craft-theme-sketch .craft-grid3-cells .craft-tile span:not(.craft-icon-badge) {
    min-height: 2.2em;
    line-height: 1.05;
  }

  body.craft-theme-sketch .craft-grid3-free-tiles .craft-tile span:not(.craft-icon-badge) {
    font-size: 12.5px;
    line-height: 1;
  }

  body.craft-theme-sketch .craft-grid3-free-tiles .craft-tile {
    padding-left: 6px;
  }

  body.craft-theme-sketch.craft-grid3-on .craft-result .name {
    font-size: 21px;
  }

  body.craft-theme-sketch.craft-grid3-on .craft-result .desc {
    font-size: 14px;
  }

  body.craft-theme-sketch.craft-grid3-on .craft-result .craft-more-btn {
    padding: 2px 12px;
  }

  body.craft-theme-sketch.craft-grid3-on .craft-result .craft-new-badge {
    font-size: 12px;
    padding: 0 7px;
  }
}

/* =====================================================================
   "Periodic" style (settings.theme = "periodic"): a printed periodic
   table. Board cells are numbered element squares tinted by category
   (inline --dg-c), black ink rules, one accent color (vermilion), Fira
   Sans everywhere, bigger text, no decorative shadows or animation.
   Scoped to body.craft-theme-periodic.
   ===================================================================== */
body.craft-theme-periodic {
  --pt-paper: #f6f4ef;
  --pt-white: #ffffff;
  --pt-ink: #2d1c17;
  --pt-ink-2: #4d352d;
  --pt-muted: #6e695f;
  --pt-rule: #d6d1c6;
  --pt-accent: #d6452b;
  font-family: 'Fira Sans', sans-serif;
  color: var(--pt-ink);
  background: var(--pt-paper);
}

body.craft-theme-periodic * {
  font-family: 'Fira Sans', sans-serif;
}

body.craft-theme-periodic .bi::before {
  font-family: bootstrap-icons !important;
}

/* ---------- Nav ---------- */
body.craft-theme-periodic .craft-nav {
  background: var(--pt-ink);
  color: var(--pt-white);
  box-shadow: none;
}

body.craft-theme-periodic .craft-nav > span {
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.5px;
}

body.craft-theme-periodic .craft-nav .craft-reset-btn {
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  border-radius: 6px;
  color: var(--pt-white);
}

body.craft-theme-periodic .craft-nav .craft-reset-btn:hover,
body.craft-theme-periodic .craft-nav .craft-reset-btn.active {
  background: var(--pt-accent);
  border-color: var(--pt-accent);
}

body.craft-theme-periodic .craft-rate-limit {
  background: var(--pt-paper);
  border-bottom: 1px solid var(--pt-rule);
  color: var(--pt-muted);
}

/* ---------- Panels ---------- */
body.craft-theme-periodic .craft-settings-panel,
body.craft-theme-periodic .craft-hint-panel {
  background: var(--pt-white);
  border-bottom: none;
}

body.craft-theme-periodic .craft-settings-panel.show,
body.craft-theme-periodic .craft-hint-panel.show {
  border-bottom: 2px solid var(--pt-ink);
}

body.craft-theme-periodic .craft-settings-row {
  color: var(--pt-ink);
  font-size: 14px;
  border-bottom: 1px solid var(--pt-rule);
}

body.craft-theme-periodic .craft-settings-row:last-child {
  border-bottom: none;
}

body.craft-theme-periodic .craft-hint-intro {
  color: var(--pt-ink-2);
}

body.craft-theme-periodic .craft-tokens-empty,
body.craft-theme-periodic .craft-archive-info small {
  color: var(--pt-muted);
}

body.craft-theme-periodic .craft-settings-row input[type="checkbox"] {
  accent-color: var(--pt-ink);
}

body.craft-theme-periodic .craft-settings-row select {
  background: var(--pt-white);
  border: 1.5px solid var(--pt-ink);
  border-radius: 4px;
  color: var(--pt-ink);
  font-size: 14px;
}

body.craft-theme-periodic .craft-archive-title {
  color: var(--pt-ink);
  font-weight: 700;
}

body.craft-theme-periodic .craft-archive-row {
  color: var(--pt-ink);
  border-color: var(--pt-rule);
}

body.craft-theme-periodic .craft-archive-row:hover,
body.craft-theme-periodic .craft-archive-row.current {
  background: var(--pt-paper);
}

body.craft-theme-periodic .craft-archive-num {
  color: var(--pt-accent);
  font-weight: 700;
}

/* ---------- Buttons: solid ink, square corners ---------- */
body.craft-theme-periodic .craft-style-btn,
body.craft-theme-periodic .craft-merge-new-btn,
body.craft-theme-periodic .craft-exit-archive-btn,
body.craft-theme-periodic .craft-random-btn,
body.craft-theme-periodic .craft-more-btn,
body.craft-theme-periodic .craft-hint-check-btn,
body.craft-theme-periodic .craft-comment-send-btn {
  background: var(--pt-ink);
  color: var(--pt-white);
  border: 1.5px solid var(--pt-ink);
  border-radius: 4px;
  box-shadow: none;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.02em;
  padding: 4px 12px;
}

body.craft-theme-periodic .craft-style-btn:hover,
body.craft-theme-periodic .craft-merge-new-btn:hover,
body.craft-theme-periodic .craft-exit-archive-btn:hover,
body.craft-theme-periodic .craft-random-btn:hover,
body.craft-theme-periodic .craft-more-btn:hover,
body.craft-theme-periodic .craft-hint-check-btn:hover,
body.craft-theme-periodic .craft-comment-send-btn:hover {
  background: var(--pt-accent);
  border-color: var(--pt-accent);
}

body.craft-theme-periodic .craft-merge-new-btn,
body.craft-theme-periodic .craft-exit-archive-btn {
  font-size: 12px;
  padding: 3px 10px;
}

body.craft-theme-periodic .craft-inventory-legend {
  background: var(--pt-white);
  color: var(--pt-ink);
  border: 1.5px solid var(--pt-ink);
  border-radius: 4px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 3px 9px;
}

body.craft-theme-periodic .craft-inventory-legend:hover {
  background: var(--pt-ink);
  color: var(--pt-white);
}

/* ---------- Section headers: label over a heavy rule ---------- */
body.craft-theme-periodic .craft-tier-header {
  background: transparent;
  border-bottom: 2px solid var(--pt-ink);
  color: var(--pt-ink);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  height: auto;
  min-height: var(--craft-head-h);
  padding: 0 0 4px;
  margin-bottom: 6px;
}

/* ---------- Combine slots ---------- */
body.craft-theme-periodic .craft-slot {
  background: var(--pt-white);
  border: 1.5px dashed #aaa497;
  border-radius: 6px;
  color: var(--pt-ink);
  font-size: 15px;
  font-weight: 600;
}

body.craft-theme-periodic .craft-slot.filled {
  border: 2px solid var(--pt-ink);
}

body.craft-theme-periodic .craft-slot-empty {
  color: #aaa497;
  font-weight: 500;
}

body.craft-theme-periodic .craft-plus {
  color: var(--pt-accent);
  font-size: 26px;
  font-weight: 700;
}

/* ---------- Icons: no badge, just the glyph in its category color ---------- */
body.craft-theme-periodic .craft-icon-badge {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0;
}

/* Emoji <img>s size off the badge, so the badge keeps a real size (it
   was width:auto, which let the SVG blow up to its intrinsic size). */
body.craft-theme-periodic .craft-icon-badge .craft-emoji-main {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
}

body.craft-theme-periodic .craft-icon-badge .bi {
  font-size: 18px;
  color: var(--dg-c, var(--pt-ink)) !important;
}

body.craft-theme-periodic .craft-icon-badge-lg .bi {
  font-size: 34px;
}

/* ---------- Board: periodic-table cells ---------- */
body.craft-theme-periodic .craft-grid3-cells {
  background: var(--pt-white);
  border: 2px solid var(--pt-ink);
  border-radius: 4px;
  counter-reset: pt-cell;
  max-width: 330px;
}

body.craft-theme-periodic .craft-grid3-cell {
  padding: 0;
  border-right: 1.5px solid var(--pt-ink);
  border-bottom: 1.5px solid var(--pt-ink);
  counter-increment: pt-cell;
}

body.craft-theme-periodic .craft-grid3-cell:nth-child(3n) {
  border-right: none;
}

body.craft-theme-periodic .craft-grid3-cell:nth-last-child(-n+3) {
  border-bottom: none;
}

body.craft-theme-periodic .craft-tile {
  position: relative;
  border: none;
  border-radius: 0;
  box-shadow: none;
  color: var(--pt-ink);
  font-size: 12.5px;
  font-weight: 600;
  animation: none;
  transition: none;
}

body.craft-theme-periodic .craft-tile:active {
  transform: none;
}

body.craft-theme-periodic .craft-grid3-cell > .craft-tile {
  background: var(--pt-white);
}

/* Cell number, top-left, like an atomic number */
body.craft-theme-periodic .craft-grid3-cell > .craft-tile::before {
  content: none;   /* cell numbers removed */
  position: absolute;
  top: 3px;
  left: 5px;
  font-size: 10px;
  font-weight: 500;
  color: var(--pt-muted);
  line-height: 1;
}

body.craft-theme-periodic .craft-tile:hover {
  background: var(--pt-paper) !important;
}

body.craft-theme-periodic .craft-tile.selected,
body.craft-theme-periodic .craft-tile.selected:hover {
  background: var(--pt-ink) !important;
  color: var(--pt-white);
}

body.craft-theme-periodic .craft-tile.selected .craft-icon-badge .bi {
  color: var(--pt-white) !important;
}

body.craft-theme-periodic .craft-tile.selected::before {
  color: rgba(255, 255, 255, 0.7);
}

body.craft-theme-periodic .craft-tile.tried {
  opacity: 0.35;
  filter: none;
}

body.craft-theme-periodic .craft-tile.blocked {
  opacity: 0.3;
  filter: none;
}

body.craft-theme-periodic .craft-merge-empty {
  height: var(--craft-tile-h);
  border: none;
  border-radius: 0;
  background: repeating-linear-gradient(-45deg, transparent 0 6px, rgba(28, 27, 25, 0.07) 6px 7px);
}

body.craft-theme-periodic .craft-merge-done {
  color: var(--pt-accent);
  font-size: 14px;
  font-weight: 700;
}

/* Free row + inventory: bordered chips with a color bar on the left */
body.craft-theme-periodic .craft-grid3-free-tiles .craft-tile {
  background: var(--pt-white);
  border: 1.5px solid var(--pt-ink);
  border-radius: 4px;
  font-size: 12.5px;
}

body.craft-theme-periodic .craft-inventory-tiles .craft-tile {
  background: #eeebe3;
  border-style: dashed;
}

body.craft-theme-periodic .craft-inventory-empty,
body.craft-theme-periodic .craft-no-results {
  color: var(--pt-muted);
}

/* ---------- Result card ---------- */
body.craft-theme-periodic .craft-result {
  background: var(--pt-white);
  border: 2px solid var(--pt-ink);
  border-radius: 6px;
  box-shadow: none;
  color: var(--pt-ink);
}

body.craft-theme-periodic .craft-result > .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border: 1.5px solid var(--pt-ink);
  border-radius: 4px;
  background: var(--pt-paper);
}

body.craft-theme-periodic .craft-result .name {
  font-size: 21px;
  font-weight: 700;
  color: var(--pt-ink);
  letter-spacing: -0.01em;
}

body.craft-theme-periodic .craft-result .desc {
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--pt-ink-2);
}

body.craft-theme-periodic .craft-detail {
  background: var(--pt-paper);
  border: 1px solid var(--pt-rule);
  border-radius: 4px;
  color: var(--pt-ink);
  font-size: 14px;
  line-height: 1.5;
  padding: 10px 12px;
}

body.craft-theme-periodic .craft-country,
body.craft-theme-periodic .craft-loading,
body.craft-theme-periodic .craft-purpose-used {
  color: var(--pt-ink-2);
}

body.craft-theme-periodic .craft-error {
  color: var(--pt-accent);
}

body.craft-theme-periodic .craft-new-badge {
  background: var(--pt-accent);
  color: var(--pt-white);
  border-radius: 3px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 2px 7px;
}

body.craft-theme-periodic .craft-reload-btn {
  background: var(--pt-white);
  color: var(--pt-ink);
  border: 1.5px solid var(--pt-ink);
  border-radius: 4px;
  box-shadow: none;
}

body.craft-theme-periodic .craft-reload-btn:hover {
  background: var(--pt-ink);
  color: var(--pt-white);
}

body.craft-theme-periodic .craft-vote-btn {
  background: var(--pt-white);
  border: 1.5px solid var(--pt-rule);
  border-radius: 4px;
  color: var(--pt-ink);
  font-size: 13px;
}

body.craft-theme-periodic .craft-vote-btn.active {
  border-color: var(--pt-ink);
  background: var(--pt-ink);
  color: var(--pt-white);
}

body.craft-theme-periodic .craft-progress {
  background: var(--pt-rule);
  border-radius: 0;
}

body.craft-theme-periodic .craft-progress-bar {
  background: var(--pt-ink);
  border-radius: 0;
}

body.craft-theme-periodic .craft-comments-panel,
body.craft-theme-periodic .craft-comment-row {
  color: var(--pt-ink);
  border-color: var(--pt-rule);
}

/* ---------- Inputs ---------- */
body.craft-theme-periodic .craft-search-input {
  background: var(--pt-white);
  border: 1.5px solid var(--pt-ink);
  border-radius: 4px;
  color: var(--pt-ink);
  font-size: 16.1px;
}

body.craft-theme-periodic .craft-search-input::placeholder {
  color: var(--pt-muted);
}

/* ---------- Combine log: a plain table ---------- */
body.craft-theme-periodic .craft-history-title {
  color: var(--pt-ink);
  font-size: 12px;
  letter-spacing: 0.1em;
  border-bottom: 2px solid var(--pt-ink);
  padding-bottom: 4px;
}

body.craft-theme-periodic .craft-history-list {
  gap: 0;
}

body.craft-theme-periodic .craft-history-item {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--pt-rule);
  border-radius: 0;
  color: var(--pt-ink);
  font-size: 13.5px;
}

body.craft-theme-periodic .craft-history-item:hover {
  background: var(--pt-white);
}

body.craft-theme-periodic .craft-history-plus,
body.craft-theme-periodic .craft-history-arrow {
  color: var(--pt-accent);
}

body.craft-theme-periodic .craft-history-noop {
  color: var(--pt-muted);
}

/* ---------- Inventory picker sheet ---------- */
body.craft-theme-periodic .craft-inventory-sheet {
  background: var(--pt-white);
  border: 2px solid var(--pt-ink);
  border-radius: 6px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
  color: var(--pt-ink);
}

body.craft-theme-periodic .craft-inventory-results .craft-tile {
  background: var(--pt-white);
  border: 1.5px solid var(--pt-rule);
  border-radius: 4px;
}

@media all {
  body.craft-theme-periodic .craft-nav > span {
    font-size: 15px;
  }

  body.craft-theme-periodic .craft-grid {
    --craft-tile-h: 60px;
  }

  body.craft-theme-periodic .craft-grid3-cells {
    max-width: 310px;
  }

  body.craft-theme-periodic .craft-grid3-cells .craft-tile {
    padding: 12px 3px 3px;
    gap: 3px;
  }

  body.craft-theme-periodic .craft-grid3-cells .craft-icon-badge .bi {
    font-size: 17px;
  }

  body.craft-theme-periodic .craft-grid3-cells .craft-tile span:not(.craft-icon-badge) {
    font-size: 12px;
    min-height: 2.2em;
    line-height: 1.1;
  }

  body.craft-theme-periodic .craft-grid3-free-tiles .craft-tile span:not(.craft-icon-badge) {
    font-size: 11.5px;
    font-weight: 600;
  }

  body.craft-theme-periodic .craft-grid3-free-tiles .craft-tile {
    padding-left: 7px;
  }

  body.craft-theme-periodic.craft-grid3-on .craft-result > .icon {
    width: 50px;
    height: 50px;
  }

  body.craft-theme-periodic.craft-grid3-on .craft-result .craft-icon-badge-lg .bi {
    font-size: 26px;
  }

  body.craft-theme-periodic.craft-grid3-on .craft-result .name {
    font-size: 18px;
  }

  body.craft-theme-periodic.craft-grid3-on .craft-result .desc {
    font-size: 13.5px;
  }

  body.craft-theme-periodic.craft-grid3-on .craft-result .craft-more-btn {
    padding: 4px 10px;
  }
}

/* Clamped result description (phone grid mode): tap to read it whole. */
.craft-result .desc.clamped {
  cursor: pointer;
  position: relative;
}

.craft-result .desc.clamped::after {
  content: "▾";
  position: absolute;
  right: 0;
  bottom: 0;
  padding-left: 14px;
  font-size: 11px;
  line-height: inherit;
  color: var(--craft-accent, #217346);
  background: linear-gradient(90deg, transparent, var(--craft-card-bg, #fff) 45%);
}

.craft-result .desc.expanded {
  display: block !important;
  -webkit-line-clamp: unset !important;
  overflow: visible !important;
  cursor: pointer;
}

body.craft-theme-doodle { --craft-card-bg: #1f1150; }
body.craft-theme-doodle .craft-result .desc.clamped::after { color: var(--dg-gold-2); }
body.craft-theme-sketch { --craft-card-bg: #fffdf6; }
body.craft-theme-sketch .craft-result .desc.clamped::after { color: var(--sk-red); }
body.craft-theme-periodic .craft-result .desc.clamped::after { color: var(--pt-accent); }

/* Collapsed dropdown panels (max-height 0) still drew their bottom border,
   stacking into a stray line under the nav in every style. */
.craft-settings-panel:not(.show),
.craft-hint-panel:not(.show) {
  border-bottom-color: transparent !important;
  box-shadow: none !important;
}

/* iPhone 15 (393x659 visible): Sketchbook/Periodic ran 35-85px past the
   screen. Same 54px tiles as Classic and tighter result text. */
@media all {
  body.craft-theme-sketch .craft-grid,
  body.craft-theme-periodic .craft-grid {
    --craft-tile-h: 56px;
  }

  body.craft-theme-periodic .craft-grid3-cells .craft-tile {
    padding-top: 10px;
  }

  body.craft-theme-periodic .craft-tier-header {
    margin-bottom: 4px;
  }

  body.craft-theme-sketch .craft-nav > span {
    font-size: 20px;
  }

  body.craft-theme-sketch .craft-slot {
    font-size: 14px;
  }

  body.craft-theme-sketch.craft-grid3-on .craft-result .name {
    font-size: 19px;
  }

  body.craft-theme-sketch.craft-grid3-on .craft-result .desc {
    font-size: 13.5px;
    line-height: 1.25;
  }

  body.craft-theme-sketch .craft-tier-header > span:first-child {
    font-size: 14px;
    padding: 4px 14px 3px;
  }

  body.craft-theme-sketch .craft-grid3-cells .craft-icon-badge {
    width: 26px;
    height: 26px;
  }
}

/* =====================================================================
   "Meadow" style (settings.theme = "meadow"): Classic, refined. Same
   greens, white cards and pastel badges, plus a real backdrop (pale sky
   fading into soft layered hills at the bottom), a sudoku-style shaded
   board (alternating cells), softer shadows, a green accent strip on the
   result card and warmer inventory chips. Fira Sans throughout.
   ===================================================================== */
body.craft-theme-meadow {
  /* Tone = vivid green by default; Settings > Tone swaps the set below. */
  --craft-accent: #1e9e4f;
  --craft-accent-d: #157a3b;
  --craft-accent-l: #e2f6e8;
  --mw-line: #c9ebd3;
  --mw-bg1: #f3fbf5;
  --mw-bg2: #e4f5e8;
  --mw-bg3: #d3eed9;
  --mw-hill: #9bd8a8;
  --mw-ink: #1f2b24;
  --mw-muted: #5b6a61;
  --craft-card-bg: #fff;
  color: var(--mw-ink);
  background: linear-gradient(180deg, var(--mw-bg1) 0%, var(--mw-bg2) 45%, var(--mw-bg3) 100%);
  background-attachment: fixed;
}

body.craft-theme-meadow[data-tone="blue"] {
  --craft-accent: #1c74d9; --craft-accent-d: #135bb0; --craft-accent-l: #e3eefc; --mw-line: #c9dcf6;
  --mw-bg1: #f3f8fe; --mw-bg2: #e5f0fc; --mw-bg3: #d6e7fa; --mw-hill: #9fc4f0;
}

body.craft-theme-meadow[data-tone="teal"] {
  --craft-accent: #0e9c8f; --craft-accent-d: #0a7a70; --craft-accent-l: #dff5f2; --mw-line: #bfe8e2;
  --mw-bg1: #f2fbfa; --mw-bg2: #e1f5f2; --mw-bg3: #cdeee9; --mw-hill: #8ed6cc;
}

body.craft-theme-meadow[data-tone="purple"] {
  --craft-accent: #7b4fd9; --craft-accent-d: #5f37b5; --craft-accent-l: #eee7fc; --mw-line: #dccff6;
  --mw-bg1: #f8f5fe; --mw-bg2: #eee7fc; --mw-bg3: #e3d8fa; --mw-hill: #c1aef0;
}

body.craft-theme-meadow[data-tone="berry"] {
  --craft-accent: #d63a6e; --craft-accent-d: #ad2755; --craft-accent-l: #fce6ee; --mw-line: #f5c9d8;
  --mw-bg1: #fff5f8; --mw-bg2: #fce6ee; --mw-bg3: #f9d6e2; --mw-hill: #efa3bd;
}

body.craft-theme-meadow[data-tone="sunset"] {
  --craft-accent: #e2641f; --craft-accent-d: #b94c12; --craft-accent-l: #fdebdf; --mw-line: #f6d3bd;
  --mw-bg1: #fff7f1; --mw-bg2: #fdebdf; --mw-bg3: #fbdcc8; --mw-hill: #f4b48c;
}

body.craft-theme-meadow::before {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 34vh;
  z-index: -1;
  pointer-events: none;
  background: var(--mw-hill);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 300' preserveAspectRatio='none'%3E%3Cpath d='M0 150 C 180 90 330 120 480 140 S 800 70 980 110 S 1150 130 1200 115 V300 H0Z' fill-opacity='.35'/%3E%3Cpath d='M0 200 C 150 160 300 170 450 195 S 760 150 920 175 S 1120 200 1200 180 V300 H0Z' fill-opacity='.6'/%3E%3Cpath d='M0 250 C 200 225 380 240 560 252 S 900 222 1200 240 V300 H0Z'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 300' preserveAspectRatio='none'%3E%3Cpath d='M0 150 C 180 90 330 120 480 140 S 800 70 980 110 S 1150 130 1200 115 V300 H0Z' fill-opacity='.35'/%3E%3Cpath d='M0 200 C 150 160 300 170 450 195 S 760 150 920 175 S 1120 200 1200 180 V300 H0Z' fill-opacity='.6'/%3E%3Cpath d='M0 250 C 200 225 380 240 560 252 S 900 222 1200 240 V300 H0Z'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat;
  opacity: 0.75;
}

/* Nav: same green, a bit deeper, with a thin light rule underneath */
body.craft-theme-meadow .craft-nav {
  background: linear-gradient(180deg, var(--craft-accent) 0%, var(--craft-accent-d) 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset, 0 2px 8px color-mix(in srgb, var(--craft-accent-d) 30%, transparent);
}

body.craft-theme-meadow .craft-nav > span {
  letter-spacing: 1.2px;
}

body.craft-theme-meadow .craft-rate-limit {
  background: rgba(255, 255, 255, 0.55);
  border-bottom: 1px solid var(--mw-line);
  color: var(--mw-muted);
}

body.craft-theme-meadow .craft-settings-panel,
body.craft-theme-meadow .craft-hint-panel {
  background: #fff;
  border-radius: 0 0 14px 14px;
}

body.craft-theme-meadow .craft-settings-panel.show,
body.craft-theme-meadow .craft-hint-panel.show {
  box-shadow: 0 8px 20px color-mix(in srgb, var(--craft-accent-d) 12%, transparent);
}

/* Section headers: green label with a short accent bar */
body.craft-theme-meadow .craft-tier-header {
  background: transparent;
  border-bottom: none;
  color: var(--craft-accent);
  font-weight: 700;
  letter-spacing: 0.06em;
}

body.craft-theme-meadow .craft-tier-header > span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

body.craft-theme-meadow .craft-tier-header > span:first-child::before {
  content: "";
  width: 4px;
  height: 13px;
  border-radius: 2px;
  background: var(--craft-accent);
}

/* Slots */
body.craft-theme-meadow .craft-slot {
  border-color: var(--mw-line);
  background: rgba(255, 255, 255, 0.85);
}

body.craft-theme-meadow .craft-slot.filled {
  background: #fff;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--craft-accent) 14%, transparent);
}

/* Board: sudoku-style shading on alternate cells */
body.craft-theme-meadow .craft-grid3-cells {
  background: #fff;
  border: 2px solid color-mix(in srgb, var(--craft-accent) 45%, #fff);
  border-radius: 14px;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--craft-accent) 12%, transparent);
}

body.craft-theme-meadow .craft-grid3-cell {
  border-color: var(--mw-line);
}

body.craft-theme-meadow .craft-grid3-cell:nth-child(even) {
  background: color-mix(in srgb, var(--craft-accent-l) 70%, #fff);
}

body.craft-theme-meadow .craft-grid3-cell > .craft-tile {
  background: transparent;
  border-color: transparent;
}

body.craft-theme-meadow .craft-grid3-cell > .craft-tile:hover {
  background: var(--craft-accent-l);
}

body.craft-theme-meadow .craft-tile.selected,
body.craft-theme-meadow .craft-grid3-cell > .craft-tile.selected {
  background: var(--craft-accent-l);
  border-color: var(--craft-accent);
  box-shadow: 0 0 0 1px var(--craft-accent) inset;
}

body.craft-theme-meadow .craft-merge-empty {
  border-color: var(--mw-line);
  background: repeating-linear-gradient(-45deg, transparent 0 6px, color-mix(in srgb, var(--craft-accent) 5%, transparent) 6px 8px);
}

/* Free chips: white cards with a soft shadow; inventory warm */
body.craft-theme-meadow .craft-grid3-free-tiles .craft-tile {
  border-color: var(--mw-line);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--craft-accent) 10%, transparent);
}

body.craft-theme-meadow .craft-inventory-tiles .craft-tile {
  background: #fff8e8;
  border-color: #efd9a4;
}

/* Result: white card with a green accent strip on the left */
body.craft-theme-meadow .craft-result {
  border: 1px solid var(--mw-line);
  border-left: 5px solid var(--craft-accent);
  border-radius: 14px;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--craft-accent) 12%, transparent);
}

body.craft-theme-meadow .craft-result .name {
  color: var(--mw-ink);
}

body.craft-theme-meadow .craft-new-badge {
  background: var(--craft-accent);
  color: #fff;
}

body.craft-theme-meadow .craft-detail {
  background: color-mix(in srgb, var(--craft-accent-l) 50%, #fff);
  border: 1px solid var(--mw-line);
  color: var(--mw-ink);
}

/* Buttons: solid green primary, outlined secondary */
body.craft-theme-meadow .craft-merge-new-btn,
body.craft-theme-meadow .craft-exit-archive-btn,
body.craft-theme-meadow .craft-style-btn {
  background: var(--craft-accent);
  border-color: var(--craft-accent);
  color: #fff;
}

body.craft-theme-meadow .craft-merge-new-btn:hover,
body.craft-theme-meadow .craft-style-btn:hover {
  background: var(--craft-accent-d);
}

body.craft-theme-meadow .craft-more-btn {
  color: var(--craft-accent);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--craft-accent) 35%, transparent);
  text-underline-offset: 3px;
}

/* History */
body.craft-theme-meadow .craft-history-title {
  color: var(--craft-accent);
}

body.craft-theme-meadow .craft-history-item {
  border-color: var(--mw-line);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--craft-accent) 6%, transparent);
}

body.craft-theme-meadow .craft-search-input {
  border-color: var(--mw-line);
}

/* iPhone 15 fit for Doodle/Sketchbook (measured vs Classic: headers,
   result card and board were the extra ~60px). */
@media all {
  body.craft-theme-doodle .craft-nav,
  body.craft-theme-sketch .craft-nav {
    padding-top: 6px;
    padding-bottom: 6px;
  }

  body.craft-theme-doodle .craft-grid {
    --craft-tile-h: 56px;
  }

  body.craft-theme-doodle .craft-grid3-cells .craft-tile {
    padding-top: 3px;
    gap: 2px;
  }

  body.craft-theme-doodle .craft-grid3-cells .craft-icon-badge {
    width: 26px;
    height: 26px;
  }

  body.craft-theme-doodle .craft-tier-header,
  body.craft-theme-sketch .craft-tier-header {
    padding: 0 0 3px;
  }

  body.craft-theme-doodle .craft-tier-header > span:first-child {
    font-size: 12px;
    padding: 4px 18px 2px;
  }

  body.craft-theme-sketch .craft-tier-header > span:first-child {
    font-size: 13px;
    padding: 3px 12px 2px;
  }

  body.craft-theme-doodle.craft-grid3-on .craft-result,
  body.craft-theme-sketch.craft-grid3-on .craft-result {
    padding-top: 6px;
    padding-bottom: 6px;
  }

  body.craft-theme-doodle.craft-grid3-on .craft-result .name {
    font-size: 16px;
  }

  body.craft-theme-sketch.craft-grid3-on .craft-result .name {
    font-size: 18px;
  }

  body.craft-theme-sketch.craft-grid3-on .craft-result .desc {
    font-size: 13px;
    line-height: 1.2;
  }

  body.craft-theme-sketch .craft-grid {
    --craft-tile-h: 54px;
  }

  body.craft-theme-sketch .craft-grid3-cells .craft-tile {
    padding-top: 3px;
    gap: 2px;
  }

  body.craft-theme-sketch .craft-rate-limit {
    font-size: 10px;
  }
}

@media all {
  body.craft-theme-doodle .craft-tier-header .craft-merge-new-btn,
  body.craft-theme-doodle .craft-tier-header .craft-inventory-legend,
  body.craft-theme-doodle .craft-tier-header .craft-exit-archive-btn,
  body.craft-theme-sketch .craft-tier-header .craft-merge-new-btn,
  body.craft-theme-sketch .craft-tier-header .craft-inventory-legend,
  body.craft-theme-sketch .craft-tier-header .craft-exit-archive-btn,
  body.craft-theme-periodic .craft-tier-header .craft-merge-new-btn,
  body.craft-theme-periodic .craft-tier-header .craft-inventory-legend,
  body.craft-theme-periodic .craft-tier-header .craft-exit-archive-btn {
    font-size: 11px;
    line-height: 1.2;
    padding: 1px 8px;
  }

  body.craft-theme-sketch .craft-tier-header .craft-merge-new-btn,
  body.craft-theme-sketch .craft-tier-header .craft-inventory-legend {
    font-size: 13px;
    box-shadow: 1.5px 2px 0 var(--sk-ink);
  }

  body.craft-theme-doodle.craft-grid3-on .craft-result .craft-more-btn,
  body.craft-theme-sketch.craft-grid3-on .craft-result .craft-more-btn,
  body.craft-theme-periodic.craft-grid3-on .craft-result .craft-more-btn {
    font-size: 12.5px;
    line-height: 1.2;
    padding: 2px 9px;
  }

  body.craft-theme-periodic.craft-grid3-on .craft-result .name {
    font-size: 17px;
  }

  body.craft-theme-periodic.craft-grid3-on .craft-result .desc {
    font-size: 13px;
    line-height: 1.35;
  }

  body.craft-theme-periodic.craft-grid3-on .craft-result > .icon {
    width: 44px;
    height: 44px;
  }

  body.craft-theme-periodic.craft-grid3-on .craft-result .craft-icon-badge-lg .bi {
    font-size: 22px;
  }
}

@media all {
  body.craft-theme-doodle.craft-grid3-on .craft-result .craft-vote-btn,
  body.craft-theme-sketch.craft-grid3-on .craft-result .craft-vote-btn {
    font-size: 12px;
    line-height: 1.2;
    padding: 1px 8px;
  }

  body.craft-theme-doodle .craft-grid {
    --craft-tile-h: 54px;
  }

  body.craft-theme-doodle.craft-grid3-on .craft-result {
    border-width: 2px;
  }

  body.craft-theme-sketch.craft-grid3-on .craft-result .craft-new-badge {
    font-size: 11px;
    padding: 0 6px;
    border-width: 2px;
  }
}

@media all {
  body.craft-theme-doodle .craft-slot {
    padding: 4px 12px;
  }

  body.craft-theme-sketch .craft-slot {
    padding: 3px 8px;
    min-height: 36px;
  }

  body.craft-theme-sketch .craft-tier-header > span:first-child {
    padding: 2px 10px 1px;
  }

  body.craft-theme-sketch.craft-grid3-on .craft-result .craft-btn-row,
  body.craft-theme-sketch.craft-grid3-on .craft-result .craft-vote-row {
    margin-top: 0;
  }
}


/* Free/inventory 2x2 blocks per style */
@media all {
  .craft-inv-empty {
    height: 34px;
  }

  .craft-freeinv {
    column-gap: 8px;
  }
}

body.craft-theme-doodle .craft-inv-empty {
  background: rgba(20, 60, 35, 0.45);
  border: 2px dashed rgba(170, 255, 140, 0.55);
  border-radius: 14px;
  color: #b8f59a;
}

body.craft-theme-doodle .craft-inv-header small {
  color: var(--dg-gold-2);
  text-shadow: var(--dg-label-stroke);
  opacity: 1;
}

body.craft-theme-doodle .craft-grid3-section + .craft-grid3-section .craft-freeinv-col + .craft-freeinv-col .craft-tier-header > span:first-child {
  background: linear-gradient(180deg, #b5f07a 0%, #4fae1e 55%, #2d7410 100%);
  text-shadow: 0 2px 0 #123d05;
}

body.craft-theme-sketch .craft-inv-empty {
  background: transparent;
  border: 2px dashed var(--sk-pencil);
  border-radius: var(--sk-wobble);
  color: var(--sk-pencil);
}

body.craft-theme-sketch .craft-grid3-section + .craft-grid3-section .craft-freeinv-col + .craft-freeinv-col .craft-tier-header > span:first-child {
  background: rgba(165, 196, 140, 0.8);
}

body.craft-theme-periodic .craft-inv-empty {
  background: transparent;
  border: 1.5px dashed #aaa497;
  border-radius: 4px;
  color: var(--pt-muted);
}

body.craft-theme-periodic .craft-inv-remove,
body.craft-theme-sketch .craft-inv-remove {
  background: var(--pt-white, #fff);
  border: 1.5px solid #2d1c17;
  color: #2d1c17;
}

body.craft-theme-doodle .craft-inv-remove {
  background: #e2253c;
  border: 1.5px solid var(--dg-outline);
  color: #fff;
}

body.craft-theme-meadow .craft-inv-empty {
  border-color: #e6cf94;
}

.craft-settings-panel.show {
  max-height: 470px;
}

/* Meadow tones: leftover Classic greens */
body.craft-theme-meadow .craft-slot-empty {
  color: color-mix(in srgb, var(--craft-accent) 40%, #fff);
}

body.craft-theme-meadow .craft-settings-row select {
  border-color: var(--mw-line);
  color: var(--mw-ink);
}

/* Archive: generated-but-not-released puzzles + the generate button */
.craft-archive-row.upcoming {
  cursor: default;
  opacity: 0.75;
}

.craft-archive-status.upcoming {
  background: #eef2fb;
  color: #3d5a99;
}

.craft-archive-generate {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 16px 14px;
  text-align: center;
}

.craft-archive-genrow {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.craft-archive-generate .craft-merge-new-btn {
  font-size: 13px;
  padding: 5px 14px;
}

.craft-archive-generate .craft-merge-new-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.craft-archive-generate small {
  font-size: 11px;
  color: #6b7d64;
}

.craft-archive-rigor {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #8a4b12;
  cursor: pointer;
}

.craft-archive-lang {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: #4d352d;
}

.craft-archive-lang select {
  font: inherit;
  font-size: 12px;
  padding: 2px 4px;
  border: 1px solid #cfdcc8;
  border-radius: 6px;
  background: #fff;
}

.craft-archive-lan {
  display: inline-block;
  margin-left: 4px;
  padding: 0 4px;
  border-radius: 4px;
  background: #e8efe4;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  vertical-align: 1px;
}

.craft-archive-message {
  font-size: 12px;
  font-weight: 600;
  color: #4d352d;
}

.craft-archive-row.upcoming.unlocked {
  cursor: pointer;
  opacity: 1;
}

/* ===== Compact result card (all styles) =====
   Smaller card/icon/text, and the vote row spans the card: likes +
   dislikes on the left, Comments on the right. */
.craft-result {
  min-height: 0;
  padding: 10px 12px;
  gap: 4px;
}

.craft-result .craft-icon-badge-lg {
  width: 46px;
  height: 46px;
}

.craft-result .craft-icon-badge-lg .bi,
.craft-result .craft-icon-badge-lg .craft-flag-main {
  font-size: 21px;
}

.craft-result .name {
  font-size: 16px;
}

.craft-result .desc {
  font-size: 12.5px;
}

.craft-result .craft-vote-row {
  align-self: stretch;
  justify-self: stretch;
  justify-content: flex-start;
  gap: 5px;
  margin-top: 2px;
}

.craft-result #craft-comments-toggle {
  margin-left: auto;
}

.craft-result .craft-vote-btn {
  font-size: 11px;
  padding: 2px 8px;
}

.craft-result .craft-more-btn {
  font-size: 11.5px;
}

@media all {
  .craft-grid3-on .craft-result,
  body.craft-theme-doodle.craft-grid3-on .craft-result,
  body.craft-theme-sketch.craft-grid3-on .craft-result {
    padding: 6px 10px;
    column-gap: 10px;
  }

  .craft-grid3-on .craft-result:has(.craft-reload-btn) {
    padding-right: 66px;
  }

  .craft-grid3-on .craft-reload-btn {
    top: 6px;
    right: 6px;
    width: 26px;
    height: 26px;
    font-size: 13px;
  }

  .craft-grid3-on .craft-reuse-btn {
    right: 36px;
  }

  .craft-grid3-on .craft-result .craft-icon-badge-lg,
  body.craft-theme-periodic.craft-grid3-on .craft-result > .icon {
    width: 36px;
    height: 36px;
  }

  .craft-grid3-on .craft-result .craft-icon-badge-lg .bi,
  .craft-grid3-on .craft-result .craft-icon-badge-lg .craft-flag-main,
  body.craft-theme-periodic.craft-grid3-on .craft-result .craft-icon-badge-lg .bi {
    font-size: 17px;
  }

  .craft-grid3-on .craft-result .name,
  body.craft-theme-periodic.craft-grid3-on .craft-result .name {
    font-size: 14px;
  }

  body.craft-theme-doodle.craft-grid3-on .craft-result .name {
    font-size: 14.5px;
  }

  body.craft-theme-sketch.craft-grid3-on .craft-result .name {
    font-size: 16px;
  }

  .craft-grid3-on .craft-result .desc,
  body.craft-theme-periodic.craft-grid3-on .craft-result .desc {
    font-size: 11.5px;
    line-height: 1.3;
  }

  body.craft-theme-sketch.craft-grid3-on .craft-result .desc {
    font-size: 12.5px;
    line-height: 1.15;
  }

  .craft-grid3-on .craft-result .craft-new-badge,
  body.craft-theme-sketch.craft-grid3-on .craft-result .craft-new-badge {
    font-size: 9.5px;
    padding: 0 6px;
  }

  .craft-grid3-on .craft-result .craft-vote-btn,
  body.craft-theme-doodle.craft-grid3-on .craft-result .craft-vote-btn,
  body.craft-theme-sketch.craft-grid3-on .craft-result .craft-vote-btn {
    font-size: 10.5px;
    padding: 1px 7px;
  }

  .craft-grid3-on .craft-result .craft-more-btn,
  body.craft-theme-doodle.craft-grid3-on .craft-result .craft-more-btn,
  body.craft-theme-sketch.craft-grid3-on .craft-result .craft-more-btn,
  body.craft-theme-periodic.craft-grid3-on .craft-result .craft-more-btn {
    font-size: 11px;
    padding: 1px 8px;
  }

  body.craft-theme-classic.craft-grid3-on .craft-result .craft-more-btn:first-child,
  body.craft-theme-meadow.craft-grid3-on .craft-result .craft-more-btn:first-child {
    padding-left: 0;
  }
}

@media all {
  /* Text keeps clear of the two corner buttons in every style... */
  body.craft-theme-doodle.craft-grid3-on .craft-result:has(.craft-reload-btn),
  body.craft-theme-sketch.craft-grid3-on .craft-result:has(.craft-reload-btn) {
    padding-right: 66px;
  }

  /* ...but the vote row sits below them, so it runs to the card's right
     edge (Comments flush right). */
  .craft-grid3-on .craft-result:has(.craft-reload-btn) .craft-vote-row {
    margin-right: -56px;
  }

  /* Sketchbook: the rotated stamp was covering the name. */
  body.craft-theme-sketch.craft-grid3-on .craft-result .craft-new-badge {
    transform: rotate(-4deg);
    margin: 2px 0 3px;
  }
}

body.craft-theme-doodle .craft-result .desc.clamped::after {
  background: none;
}

/* Calendar: delete the newest generated puzzle (privileged only) */
.craft-archive-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  margin-left: 6px;
  border-radius: 50%;
  color: #b3261e;
  background: rgba(179, 38, 30, 0.08);
  font-size: 13px;
  cursor: pointer;
}

.craft-archive-delete:hover {
  background: rgba(179, 38, 30, 0.18);
}

/* Board tile that came out of a combination (renderMergeBoard(): not one of
   the puzzle's 9 Basics) -- warm amber instead of the style's plain tile.
   Selected keeps the style's own selected look. */
body .craft-grid3-cells .craft-grid3-cell > .craft-tile.merged:not(.selected) {
  background: #fff3d1;
  border-color: #e3a82b;
  color: #6b4a0c;
}

/* Doodle's tiles sit on a night sky: a translucent amber glow instead. */
body.craft-theme-doodle .craft-grid3-cells .craft-grid3-cell > .craft-tile.merged:not(.selected) {
  background: rgba(255, 184, 48, 0.3);
  border-color: #ffb830;
  color: #fff;
}

/* Sketchbook: a highlighter-yellow wash. */
body.craft-theme-sketch .craft-grid3-cells .craft-grid3-cell > .craft-tile.merged:not(.selected) {
  background: #fbe38c;
  color: #3a2a06;
}

/* Phone: board cells are square (aspect-ratio on the cell, tile fills it).
   The board is a bit narrower than before so the extra height still fits
   the iPhone 15 viewport (393x659). */
@media all {
  body .craft-grid3-cells,
  body[class*="craft-theme-"] .craft-grid3-cells {
    max-width: 240px;
  }

  body .craft-grid3-cells .craft-grid3-cell {
    aspect-ratio: 1 / 1;
    display: flex;
  }

  body .craft-grid3-cells .craft-grid3-cell > .craft-tile,
  body .craft-grid3-cells .craft-grid3-cell > .craft-merge-empty {
    width: 100%;
    height: 100%;
    min-height: 0;
  }
}

/* Settings > iPhone mode on a wide screen (mountPhoneFrameIfNeeded()): the
   page only shows a 393x659 iframe of itself inside a phone bezel. */
body.craft-phoneframe-host {
  min-height: 100vh;
  margin: 0;
  padding: 0;
  background: #2b2f2a;
}

body.craft-phoneframe-host > *:not(.craft-phoneframe) {
  display: none !important;
}

.craft-phoneframe {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 16px;
}

.craft-phoneframe-screen {
  padding: 14px;
  border-radius: 46px;
  background: #111;
  box-shadow: 0 0 0 2px #555, 0 20px 50px rgba(0, 0, 0, 0.5);
}

.craft-phoneframe-screen iframe {
  display: block;
  width: 393px;
  height: 659px;
  border: 0;
  border-radius: 32px;
  background: #fff;
}

.craft-phoneframe-caption {
  margin-top: 10px;
  color: #c9d3c5;
  font-size: 12px;
}

/* ===== Build your grid (pencil button in the nav) =====
   9 cells filled from the inventory picker, sent to Supabase
   craftdoku_grid_submissions for review (renderBuilderPanel()). */
.craft-settings-panel.craft-builder-panel.show {
  max-height: 560px;
  overflow-y: auto;
}

.craft-builder-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.craft-builder-body {
  --craft-tile-h: 62px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 16px 14px;
}

.craft-builder-intro {
  font-size: 12px;
  line-height: 1.35;
  color: #4d5e47;
}

/* .craft-search-input is scaled down to 80.745% (iOS no-zoom trick), so
   123.85% width lands at the full panel width. */
.craft-builder-body .craft-search-input {
  width: 123.85%;
  margin: -4px 0;
}

.craft-builder-cells {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  max-width: 260px;
  width: 100%;
  margin: 0 auto;
}

.craft-builder-cells .craft-tile span:not(.craft-icon-badge):not(.craft-inv-remove) {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-align: center;
  word-break: break-word;
}

.craft-builder-actions {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.craft-builder-actions .craft-merge-new-btn {
  font-size: 13px;
  padding: 5px 14px;
}

.craft-builder-actions .craft-merge-new-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.craft-builder-send {
  background: var(--craft-accent, #217346);
  color: #fff;
}

.craft-builder-panel .craft-archive-message {
  text-align: center;
}

.craft-builder-cells .craft-tile .craft-inv-remove {
  width: 16px;
  height: 16px;
  min-width: 0;
  min-height: 0;
  padding: 0;
  display: flex;
}

/* ===== Send your proposals (renderProposalPanel()) =====
   A + B = result, each side picked or typed; own inputs at 16px (no iOS
   zoom) instead of the scaled .craft-search-input. */
.craft-proposal-field {
  display: flex;
  align-items: center;
  gap: 6px;
}
.craft-proposal-badge {
  flex-shrink: 0;
  width: 26px;
  display: flex;
  justify-content: center;
  color: #7a8a75;
}
.craft-proposal-input {
  box-sizing: border-box;
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  padding: 6px 10px;
  border: 1.5px solid #e0e8db;
  border-radius: 9px;
  background: #fff;
  font: inherit;
  font-size: 16px;
  color: #4d352d;
}
.craft-proposal-input:focus {
  outline: none;
  border-color: var(--craft-accent, #217346);
}
textarea.craft-proposal-desc {
  resize: none;
  line-height: 1.3;
}
.craft-proposal-pick {
  position: static;
  flex-shrink: 0;
}
.craft-proposal-mine {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 4px;
}
.craft-proposal-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 8px;
  padding: 6px 8px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 9px;
  background: #fff;
  font-size: 12px;
  color: #4d352d;
}
.craft-proposal-formula {
  flex: 1 1 0;
  min-width: 0;
  overflow-wrap: anywhere;
}
.craft-proposal-formula b {
  color: #7a8a75;
}
.craft-proposal-status {
  flex-shrink: 0;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  background: #fff4d6;
  color: #8a6400;
}
.craft-proposal-status.approved {
  background: #dff3e4;
  color: #1d6b37;
}
.craft-proposal-status.rejected {
  background: #fbe3e1;
  color: #a3322a;
}
.craft-proposal-notes {
  flex-basis: 100%;
  color: #6b7a66;
}
.craft-proposal-op {
  margin: -6px 0;
  text-align: center;
  font-weight: 700;
  color: #7a8a75;
}

/* Picker: raw materials (puzzle boards + free elements, rawPickerItems())
   listed first, marked with a small green corner dot. */
.craft-inventory-results .craft-inventory-pick.raw {
  border-color: color-mix(in srgb, var(--craft-accent, #217346) 45%, #e0e8db);
}

.craft-inventory-results .craft-inventory-pick.raw::after {
  content: "";
  position: absolute;
  top: 3px;
  right: 3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--craft-accent, #217346);
}

/* Autocomplete-picked cells (autofillBuilder()): dashed until replaced. */
.craft-builder-cells .craft-tile.auto {
  border-style: dashed;
  border-color: var(--craft-accent, #217346);
}

.craft-builder-body textarea.craft-builder-comment {
  resize: none;
  font-family: inherit;
  line-height: 1.3;
  margin: -10px 0;
}

.craft-builder-actions {
  flex-wrap: wrap;
}

/* ===== Puzzle number box + Exit Archive + archive modal (all styles) =====
   Board header left = "#N" box (puzzleNumHtml(), amber in the archive,
   like Flagdoku's number cell) that opens the archive; the archive itself
   is a centered modal over a dim overlay (openArchive(), like Flagdoku
   index's showModal4). Theme rules still paint the panel's background/
   rows; this block only positions it. */
.craft-puzzle-head {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.craft-puzzle-num {
  min-width: 34px;
  height: 26px;
  padding: 0 7px;
  border: 2px solid #2d1c17;
  border-radius: 6px;
  background: #fff;
  color: #2d1c17;
  font-family: "Fira Sans", sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
  text-transform: none;
  cursor: pointer;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.18);
  transition: transform 0.1s;
}

.craft-puzzle-num:active {
  transform: translateY(1px);
  box-shadow: none;
}

.craft-puzzle-num.archive {
  background: #f4c542;
}

.craft-puzzle-when {
  white-space: nowrap;
}

body[class] .craft-grid3-section .craft-merge-header .craft-exit-archive-btn {
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
  padding: 3px 11px;
}

.craft-archive-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 2147483100;
}

.craft-archive-overlay.show {
  display: block;
}

body.craft-modal-open {
  overflow: hidden;
}

body[class] .craft-settings-panel.craft-archive-panel {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 32px);
  max-width: 360px;
  max-height: min(78vh, 560px);
  overflow: hidden;
  flex-direction: column;
  border: 2px solid #2d1c17;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  z-index: 2147483200;
  transition: none;
}

body[class] .craft-settings-panel.craft-archive-panel.show {
  display: flex;
  max-height: min(78vh, 560px);
}

.craft-archive-head {
  position: relative;
  flex: none;
  padding: 12px 40px 8px;
  text-align: center;
}

.craft-archive-head .craft-archive-title {
  padding: 0;
  font-size: 15px;
}

.craft-archive-close {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 30px;
  height: 30px;
  border: none;
  background: transparent;
  color: #aaa;
  font-size: 16px;
  cursor: pointer;
}

.craft-archive-close:hover {
  color: #000;
}

.craft-archive-list {
  flex: 1 1 auto;
  overflow-y: auto;
}

/* Board cells are SQUARE on every width (phone already had its own
   square-cell rule above): the tile takes the cell's width and matches
   it in height. */
.craft-grid .craft-grid3-cells .craft-grid3-cell > .craft-tile,
.craft-grid .craft-grid3-cells .craft-grid3-cell > .craft-merge-empty {
  height: auto;
  min-height: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

/* Free elements + Inventory host (below the slots/result): hidden when empty. */
.craft-freeinv-host:empty {
  display: none;
}

@media all {
  .craft-grid3-on .craft-freeinv-host {
    position: relative;
    z-index: 2147482000;
  }
}


/* Smaller board, bigger labels, smaller A + B slots (all themes: the
   !important beats each theme's own board width / label size). */
body .craft-grid .craft-grid3-cells {
  max-width: 250px !important;
}

body .craft-grid .craft-grid3-cells .craft-tile {
  font-size: 11.5px !important;
  padding: 4px 3px;
}

body .craft-grid .craft-grid3-cells .craft-tile span:not(.craft-icon-badge) {
  font-size: 11.5px !important;
}

.craft-slots {
  gap: 10px;
}

.craft-slots .craft-slot {
  max-width: 110px;
  min-height: 40px;
}

@media all {
  body .craft-grid .craft-grid3-cells {
    max-width: 210px !important;
  }

  body .craft-grid .craft-grid3-cells .craft-tile,
  body .craft-grid .craft-grid3-cells .craft-tile span:not(.craft-icon-badge) {
    font-size: 11px !important;
  }

  .craft-slots .craft-slot {
    max-width: 96px;
    min-height: 34px;
    padding: 4px 6px;
  }
}

/* "Hint" (RIGOR puzzles): next recipe step above the board, and the two
   tiles it needs pulse amber. */
.craft-nextstep-btn .bi {
  color: #d99a00;
}

.craft-nextstep-msg {
  margin: 4px auto 0;
  max-width: 320px;
  padding: 4px 10px;
  border-radius: 8px;
  background: #fff6d8;
  border: 1px solid #f0d27a;
  color: #6b4a00;
  font-size: 12.5px;
  font-weight: 600;
  text-align: center;
}

body .craft-tile.hinted {
  border-color: #e0a800 !important;
  box-shadow: 0 0 0 2px rgba(224, 168, 0, 0.45);
  animation: craft-hint-pulse 1.2s ease-in-out infinite;
}

@keyframes craft-hint-pulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(224, 168, 0, 0.45); }
  50% { box-shadow: 0 0 0 5px rgba(224, 168, 0, 0.15); }
}

/* A + B boxes: the element name stays on ONE line, "..." when longer. */
body .craft-slot {
  min-width: 0;
}

body .craft-slot > span:not(.craft-icon-badge):not(.craft-slot-empty) {
  flex: 1 1 auto;
  min-width: 0;
  display: block !important;
  min-height: 0 !important;
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: unset !important;
}

/* Emoji icons (iconBadge()): the emoji fills the badge like the Bootstrap
   glyph did; the optional state emoji sits small at the bottom-right. */
.craft-icon-badge .craft-emoji {
  display: block;
  width: 62%;
  height: 62%;
  object-fit: contain;
  pointer-events: none;
}

.craft-icon-badge.has-emoji {
  position: relative;
  font-size: 0.95em;
  line-height: 1;
}

.craft-emoji-state {
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 50%;
  height: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  pointer-events: none;
}

.craft-emoji-state .craft-emoji {
  width: 78%;
  height: 78%;
}

/* The state emoji's circle is a <span> inside the tile, so the tile-label
   rules (".craft-tile span:not(.craft-icon-badge)": min-height 2.3em, line
   clamp, font size...) were stretching it into a tall white pill in the
   grid. Pin it back to a small circle everywhere. */
body .craft-icon-badge .craft-emoji-state {
  display: flex !important;
  position: absolute !important;
  right: -3px !important;
  bottom: -3px !important;
  width: 48% !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  flex: 0 0 auto !important;
  min-height: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  font-size: 0 !important;
  -webkit-line-clamp: unset !important;
  white-space: normal !important;
  overflow: visible !important;
  border-radius: 50% !important;
}

/* A bit more room between the icon and the name: board tiles stack them,
   free/inventory chips put them side by side. */
body .craft-grid .craft-grid3-cells .craft-tile {
  gap: 6px !important;
}

body .craft-grid3-free-tiles .craft-tile {
  gap: 8px !important;
}


/* Free mode: the A/B slots open the element search. */
.craft-slots.craft-free-slots .craft-slot {
  cursor: pointer;
  border-style: dashed;
}
.craft-slots.craft-free-slots .craft-slot:not(.filled) .craft-slot-empty::before {
  content: "\F52A"; /* bi-search */
  font-family: "bootstrap-icons";
  font-size: 0.8em;
  margin-right: 3px;
}
/* Free mode has no board: no grid, search, shuffle or free row -- just
   the A/B search slots, the result and the created-elements list. */
body.craft-free-on #craft-search,
body.craft-free-on #craft-grid,
body.craft-free-on #craft-random,
body.craft-free-on #craft-freeinv-host,
body.craft-free-on #craft-batch-board,
body.craft-free-on #craft-batch-status {
  display: none !important;
}
.craft-free-created:empty {
  display: none;
}
.craft-free-created {
  box-sizing: border-box;
  width: 100%;
  margin-top: 10px;
}
.craft-free-created-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: var(--craft-gap, 6px);
  padding-top: 3px;
}
.craft-free-hint {
  font-size: 13px;
  color: #4b5a47;
  text-align: center;
}

/* Science mode: rank card above the created elements. */
.craft-science-status:empty {
  display: none;
}
.craft-science-status {
  box-sizing: border-box;
  width: 100%;
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.04);
  font-size: 13px;
  color: #4d352d;
}
.craft-science-top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
}
.craft-science-top strong {
  font-size: 15px;
}
.craft-science-today {
  margin-left: auto;
  font-weight: 600;
}
.craft-science-bar {
  height: 6px;
  margin: 6px 0 4px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.1);
  overflow: hidden;
}
.craft-science-bar span {
  display: block;
  height: 100%;
  background: #4a8f3c;
  transition: width 0.4s ease;
}
.craft-science-next,
.craft-science-rules {
  font-size: 12px;
  opacity: 0.8;
}
.craft-science-rules {
  margin-top: 4px;
}
.craft-science-gain {
  margin-top: 4px;
  font-weight: 700;
}
.craft-science-gain-novel {
  color: #2f7d22;
}
.craft-science-gain-overused,
.craft-science-gain-noop,
.craft-science-gain-pile {
  color: #b03a2e;
}

/* Search mode: reactions list "A + B = C". */
.craft-inventory-picker.reactions .craft-inventory-results {
  grid-template-columns: minmax(0, 1fr);
}
.craft-reaction-row {
  box-sizing: border-box;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  padding: 5px 6px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 9px;
  background: #fff;
  font: inherit;
  font-size: 11px;
  color: #4d352d;
  cursor: pointer;
  text-align: left;
}
.craft-reaction-row:hover {
  background: #f6faf3;
}
.craft-reaction-row > b {
  flex-shrink: 0;
  color: #7a8a75;
}
.craft-reaction-el {
  display: flex;
  align-items: center;
  gap: 3px;
  flex: 1 1 0;
  min-width: 0;
}
.craft-reaction-el > span:not(.craft-icon-badge) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.craft-reaction-el .craft-icon-badge {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.craft-reaction-el .craft-icon-badge .bi {
  font-size: 10px;
}

/* Bigger board + bigger pictures (all themes; overrides the "smaller
   board" block above and each theme's badge size). Cells stay square. */
body .craft-grid .craft-grid3-cells {
  max-width: 340px !important;
}
body .craft-grid .craft-grid3-cells .craft-icon-badge {
  width: 46px !important;
  height: 46px !important;
}
body .craft-grid .craft-grid3-cells .craft-icon-badge .bi {
  font-size: 22px !important;
}
body .craft-grid .craft-grid3-cells .craft-icon-badge .craft-emoji-main {
  width: 74%;
  height: 74%;
}
body .craft-grid .craft-grid3-cells .craft-tile,
body .craft-grid .craft-grid3-cells .craft-tile span:not(.craft-icon-badge) {
  font-size: 12.5px !important;
}
/* Free mode's created elements: same bigger pictures. */
.craft-free-created-tiles {
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
}
.craft-free-created-tiles .craft-tile {
  height: auto;
  min-height: 72px;
  font-size: 11px;
}
.craft-free-created-tiles .craft-icon-badge {
  width: 34px;
  height: 34px;
}
.craft-free-created-tiles .craft-icon-badge .bi {
  font-size: 16px;
}
.craft-free-created-tiles .craft-icon-badge .craft-emoji-main {
  width: 74%;
  height: 74%;
}

@media all {
  /* Nearly full phone width (393 - gutters). */
  body .craft-grid .craft-grid3-cells {
    max-width: min(330px, calc(100vw - 32px)) !important;
  }
  body .craft-grid .craft-grid3-cells .craft-icon-badge {
    width: 42px !important;
    height: 42px !important;
  }
  body .craft-grid .craft-grid3-cells .craft-icon-badge .bi {
    font-size: 20px !important;
  }
  body .craft-grid .craft-grid3-cells .craft-tile,
  body .craft-grid .craft-grid3-cells .craft-tile span:not(.craft-icon-badge) {
    font-size: 12px !important;
  }
}

/* "Made from A + B" line on an element's card (elementOrigin()). */
.craft-origin {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 6px;
  margin: 2px 0 4px;
  font-size: 12px;
  color: #4d5e47;
}
.craft-origin-label {
  font-weight: 600;
}
.craft-origin-el {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
}
.craft-origin > b {
  color: #7a8a75;
}
/* Phones: one line, names cut with "..."; tap to open the full text. */
@media all {
  .craft-origin {
    flex-wrap: nowrap;
    cursor: pointer;
  }
  .craft-origin:not(.open) .craft-origin-label {
    display: none;
  }
  .craft-origin:not(.open) .craft-origin-el {
    display: block;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .craft-origin:not(.open) .craft-origin-el .craft-icon-badge {
    display: inline-flex;
    vertical-align: middle;
    margin-right: 4px;
  }
  .craft-origin.open {
    flex-wrap: wrap;
  }
}
.craft-origin .craft-icon-badge {
  width: 20px;
  height: 20px;
}

/* ===== Ads: sticky footer + corner video ABOVE it (bottom-right) =====
   Playwire injects .pw-fixed-footer / .pw-corner-ad-video on flagdoku.com.
   The page reserves the footer height at every width; the video is pinned
   bottom-right just above the footer (repeated class = specificity trick
   from index3KK82.css, beats Playwire's own !important rules). Ad shells
   stay under the game (2147482000) and modals (2147483000). */
body {
  --craft-ad-footer-h: 90px;
  padding-bottom: calc(var(--craft-ad-footer-h) + env(safe-area-inset-bottom));
}
html body .pw-corner-ad-video.pw-corner-ad-video.pw-corner-ad-video {
  position: fixed !important;
  top: auto !important;
  left: auto !important;
  right: 0 !important;
  bottom: calc(var(--craft-ad-footer-h) + env(safe-area-inset-bottom)) !important;
  z-index: 2147481000 !important;
}
html body .pw-fixed-footer,
html body .pw-sticky,
html body [data-pw-sticky] {
  z-index: 2147481000 !important;
}

/* Local/preview placeholders (inventdoku.html, not on flagdoku.com). */
.craft-ad-placeholder {
  position: fixed;
  z-index: 2147481000;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: 2px dashed rgba(0, 0, 0, 0.35);
  background: rgba(40, 40, 40, 0.82);
  color: #fff;
  font: 600 12px "Fira Sans", sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  pointer-events: none;
}
.craft-ad-placeholder-footer {
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--craft-ad-footer-h) + env(safe-area-inset-bottom));
}
.craft-ad-placeholder-video {
  right: 0;
  bottom: calc(var(--craft-ad-footer-h) + env(safe-area-inset-bottom));
  width: 300px;
  height: 169px;
}

@media all {
  body {
    --craft-ad-footer-h: 60px;
  }
  .craft-ad-placeholder-video {
    width: 160px;
    height: 90px;
  }
}

/* TEMPORARY: grid mode hides Free elements + Inventory (the board and the
   A + B slots only). Delete this block to bring them back. */
body.craft-grid3-on #craft-freeinv-host,
body.craft-grid3-on .craft-grid3-free-section {
  display: none !important;
}

/* Element color (invent_combs.hex) as a very soft wash over the WHOLE tile:
   a z-index -1 layer inside the tile's own stacking context paints above
   the theme's tile background (and its selected/hover gradients) but under
   the icon and label. See tileTint(). */
.craft-tile[data-tint] {
  isolation: isolate;
}
.craft-tile[data-tint]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--craft-el-tint);
  pointer-events: none;
}

/* =====================================================================
   "Night Lab" style (settings.theme = "lab"): dark instrument panel.
   Near-black slate, cyan accent, mono numerals, glowing selection.
   Scoped to body.craft-theme-lab. Badges keep their real size so emoji
   images never fall back to their intrinsic SVG size.
   ===================================================================== */
body.craft-theme-lab {
  --lab-bg: #0d1117;
  --lab-panel: #161b22;
  --lab-raised: #1f2630;
  --lab-line: #2d3644;
  --lab-text: #e6edf3;
  --lab-muted: #8b98a8;
  --lab-accent: #2fd4e6;
  font-family: 'Fira Sans', sans-serif;
  color: var(--lab-text);
  background: var(--lab-bg);
}
body.craft-theme-lab * { font-family: 'Fira Sans', sans-serif; }
body.craft-theme-lab .bi::before { font-family: bootstrap-icons !important; }

body.craft-theme-lab .craft-nav {
  background: var(--lab-panel);
  color: var(--lab-text);
  border-bottom: 1px solid var(--lab-line);
  box-shadow: none;
}
body.craft-theme-lab .craft-nav .craft-reset-btn { color: var(--lab-muted); }
body.craft-theme-lab .craft-nav .craft-reset-btn:hover,
body.craft-theme-lab .craft-nav .craft-reset-btn.active { color: var(--lab-accent); }
body.craft-theme-lab .craft-plus { color: var(--lab-accent); font-weight: 700; }

body.craft-theme-lab .craft-settings-panel,
body.craft-theme-lab .craft-hint-panel {
  background: var(--lab-panel);
  border: 1px solid var(--lab-line);
  color: var(--lab-text);
  box-shadow: none;
}
body.craft-theme-lab .craft-settings-row { border-color: var(--lab-line); }
body.craft-theme-lab .craft-settings-row select {
  background: var(--lab-raised);
  color: var(--lab-text);
  border: 1px solid var(--lab-line);
}
body.craft-theme-lab .craft-hint-intro,
body.craft-theme-lab .craft-tokens-empty,
body.craft-theme-lab .craft-archive-info small,
body.craft-theme-lab .craft-inventory-empty,
body.craft-theme-lab .craft-no-results { color: var(--lab-muted); }

body.craft-theme-lab .craft-style-btn,
body.craft-theme-lab .craft-merge-new-btn,
body.craft-theme-lab .craft-exit-archive-btn,
body.craft-theme-lab .craft-random-btn,
body.craft-theme-lab .craft-more-btn,
body.craft-theme-lab .craft-hint-check-btn,
body.craft-theme-lab .craft-comment-send-btn {
  background: transparent;
  color: var(--lab-accent);
  border: 1px solid var(--lab-accent);
  border-radius: 6px;
  box-shadow: none;
}
body.craft-theme-lab .craft-style-btn:hover,
body.craft-theme-lab .craft-merge-new-btn:hover,
body.craft-theme-lab .craft-exit-archive-btn:hover,
body.craft-theme-lab .craft-random-btn:hover,
body.craft-theme-lab .craft-more-btn:hover,
body.craft-theme-lab .craft-hint-check-btn:hover,
body.craft-theme-lab .craft-comment-send-btn:hover {
  background: rgba(47, 212, 230, 0.14);
}

/* Icons: round dark disc, category color as a ring */
body.craft-theme-lab .craft-icon-badge {
  background: var(--lab-raised) !important;
  box-shadow: inset 0 0 0 1.5px var(--dg-c, var(--lab-line)) !important;
}
body.craft-theme-lab .craft-icon-badge .bi { color: var(--dg-c, var(--lab-text)) !important; }

/* Board */
body.craft-theme-lab .craft-grid3-cells {
  background: var(--lab-panel);
  border: 1px solid var(--lab-line);
  border-radius: 10px;
  overflow: hidden;
  counter-reset: lab-cell;
}
body.craft-theme-lab .craft-grid3-cell {
  padding: 0;
  border-right: 1px solid var(--lab-line);
  border-bottom: 1px solid var(--lab-line);
  counter-increment: lab-cell;
}
body.craft-theme-lab .craft-grid3-cell:nth-child(3n) { border-right: none; }
body.craft-theme-lab .craft-grid3-cell:nth-last-child(-n+3) { border-bottom: none; }
body.craft-theme-lab .craft-tile {
  position: relative;
  background: var(--lab-panel);
  color: var(--lab-text);
  border: none;
  border-radius: 0;
  box-shadow: none;
  font-weight: 500;
  animation: none;
}
body.craft-theme-lab .craft-grid3-cell > .craft-tile::before {
  content: none;   /* cell numbers removed */
  position: absolute;
  top: 4px;
  left: 6px;
  font: 500 9px/1 ui-monospace, Menlo, Consolas, monospace;
  color: var(--lab-muted);
}
body.craft-theme-lab .craft-tile:hover { background: var(--lab-raised) !important; }
body.craft-theme-lab .craft-tile.selected,
body.craft-theme-lab .craft-tile.selected:hover {
  background: rgba(47, 212, 230, 0.16) !important;
  box-shadow: inset 0 0 0 2px var(--lab-accent);
  color: var(--lab-text);
}
body.craft-theme-lab .craft-tile.tried,
body.craft-theme-lab .craft-tile.blocked { opacity: 0.35; filter: none; }
body.craft-theme-lab .craft-merge-empty { border: none; background: var(--lab-raised); opacity: 0.5; }
body.craft-theme-lab .craft-merge-done { color: var(--lab-accent); font-weight: 700; }

body.craft-theme-lab .craft-grid3-free-tiles .craft-tile,
body.craft-theme-lab .craft-inventory-tiles .craft-tile {
  background: var(--lab-raised);
  border: 1px solid var(--lab-line);
  border-radius: 8px;
}
body.craft-theme-lab .craft-slot {
  background: var(--lab-panel);
  border: 1px dashed var(--lab-line);
  color: var(--lab-text);
}
body.craft-theme-lab .craft-slot.filled { border-style: solid; border-color: var(--lab-accent); }
body.craft-theme-lab .craft-slot-empty { color: var(--lab-muted); }
body.craft-theme-lab .craft-tier-header,
body.craft-theme-lab .craft-inventory-legend { color: var(--lab-muted); }

/* Result card */
body.craft-theme-lab .craft-result {
  background: var(--lab-panel);
  border: 1px solid var(--lab-line);
  border-top: 2px solid var(--lab-accent);
  border-radius: 10px;
  box-shadow: 0 0 24px rgba(47, 212, 230, 0.08);
  color: var(--lab-text);
}
body.craft-theme-lab .craft-result .name { color: var(--lab-text); font-weight: 700; }
body.craft-theme-lab .craft-result .desc { color: #b4bfcc; }
body.craft-theme-lab .craft-detail {
  background: var(--lab-raised);
  border: 1px solid var(--lab-line);
  color: var(--lab-text);
}
body.craft-theme-lab .craft-country,
body.craft-theme-lab .craft-loading,
body.craft-theme-lab .craft-purpose-used { background: var(--lab-raised); color: #b4bfcc; }
body.craft-theme-lab .craft-country strong { color: var(--lab-text); }
body.craft-theme-lab .craft-sci-score,
body.craft-theme-lab .craft-sci-score strong { color: var(--lab-accent); }
body.craft-theme-lab .craft-error { color: #ff7a6b; }
body.craft-theme-lab .craft-new-badge { background: var(--lab-accent); color: #04222a; }

/* =====================================================================
   "Terminal" style (settings.theme = "terminal"): green phosphor CRT: black, monospace, hard 1px borders, no rounding. Scoped to body.craft-theme-terminal. Badges keep their real size so emoji
   images never fall back to their intrinsic SVG size.
   ===================================================================== */
body.craft-theme-terminal {
  --terminal-bg: #050805;
  --terminal-panel: #0a120a;
  --terminal-raised: #0f1a0f;
  --terminal-line: #1f4a24;
  --terminal-text: #b8f5bd;
  --terminal-muted: #5fa367;
  --terminal-accent: #39ff6a;
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  color: var(--terminal-text);
  background: var(--terminal-bg);
}
body.craft-theme-terminal * { font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; }
body.craft-theme-terminal .bi::before { font-family: bootstrap-icons !important; }

body.craft-theme-terminal .craft-nav {
  background: var(--terminal-panel);
  color: var(--terminal-text);
  border-bottom: 1px solid var(--terminal-line);
  box-shadow: none;
}
body.craft-theme-terminal .craft-nav .craft-reset-btn { color: var(--terminal-muted); }
body.craft-theme-terminal .craft-nav .craft-reset-btn:hover,
body.craft-theme-terminal .craft-nav .craft-reset-btn.active { color: var(--terminal-accent); }
body.craft-theme-terminal .craft-plus { color: var(--terminal-accent); font-weight: 700; }

body.craft-theme-terminal .craft-settings-panel,
body.craft-theme-terminal .craft-hint-panel {
  background: var(--terminal-panel);
  border: 1px solid var(--terminal-line);
  color: var(--terminal-text);
  box-shadow: none;
}
body.craft-theme-terminal .craft-settings-row { border-color: var(--terminal-line); }
body.craft-theme-terminal .craft-settings-row select {
  background: var(--terminal-raised);
  color: var(--terminal-text);
  border: 1px solid var(--terminal-line);
}
body.craft-theme-terminal .craft-hint-intro,
body.craft-theme-terminal .craft-tokens-empty,
body.craft-theme-terminal .craft-archive-info small,
body.craft-theme-terminal .craft-inventory-empty,
body.craft-theme-terminal .craft-no-results { color: var(--terminal-muted); }

body.craft-theme-terminal .craft-style-btn,
body.craft-theme-terminal .craft-merge-new-btn,
body.craft-theme-terminal .craft-exit-archive-btn,
body.craft-theme-terminal .craft-random-btn,
body.craft-theme-terminal .craft-more-btn,
body.craft-theme-terminal .craft-hint-check-btn,
body.craft-theme-terminal .craft-comment-send-btn {
  background: transparent;
  color: var(--terminal-accent);
  border: 1px solid var(--terminal-accent);
  border-radius: 6px;
  box-shadow: none;
}
body.craft-theme-terminal .craft-style-btn:hover,
body.craft-theme-terminal .craft-merge-new-btn:hover,
body.craft-theme-terminal .craft-exit-archive-btn:hover,
body.craft-theme-terminal .craft-random-btn:hover,
body.craft-theme-terminal .craft-more-btn:hover,
body.craft-theme-terminal .craft-hint-check-btn:hover,
body.craft-theme-terminal .craft-comment-send-btn:hover {
  background: rgba(57, 255, 106, 0.14);
}

/* Icons: round dark disc, category color as a ring */
body.craft-theme-terminal .craft-icon-badge {
  background: var(--terminal-raised) !important;
  box-shadow: inset 0 0 0 1.5px var(--dg-c, var(--terminal-line)) !important;
}
body.craft-theme-terminal .craft-icon-badge .bi { color: var(--dg-c, var(--terminal-text)) !important; }

/* Board */
body.craft-theme-terminal .craft-grid3-cells {
  background: var(--terminal-panel);
  border: 1px solid var(--terminal-line);
  border-radius: 10px;
  overflow: hidden;
  counter-reset: terminal-cell;
}
body.craft-theme-terminal .craft-grid3-cell {
  padding: 0;
  border-right: 1px solid var(--terminal-line);
  border-bottom: 1px solid var(--terminal-line);
  counter-increment: terminal-cell;
}
body.craft-theme-terminal .craft-grid3-cell:nth-child(3n) { border-right: none; }
body.craft-theme-terminal .craft-grid3-cell:nth-last-child(-n+3) { border-bottom: none; }
body.craft-theme-terminal .craft-tile {
  position: relative;
  background: var(--terminal-panel);
  color: var(--terminal-text);
  border: none;
  border-radius: 0;
  box-shadow: none;
  font-weight: 500;
  animation: none;
}
body.craft-theme-terminal .craft-grid3-cell > .craft-tile::before {
  content: none;   /* cell numbers removed */
  position: absolute;
  top: 4px;
  left: 6px;
  font: 500 9px/1 ui-monospace, Menlo, Consolas, monospace;
  color: var(--terminal-muted);
}
body.craft-theme-terminal .craft-tile:hover { background: var(--terminal-raised) !important; }
body.craft-theme-terminal .craft-tile.selected,
body.craft-theme-terminal .craft-tile.selected:hover {
  background: rgba(57, 255, 106, 0.16) !important;
  box-shadow: inset 0 0 0 2px var(--terminal-accent);
  color: var(--terminal-text);
}
body.craft-theme-terminal .craft-tile.tried,
body.craft-theme-terminal .craft-tile.blocked { opacity: 0.35; filter: none; }
body.craft-theme-terminal .craft-merge-empty { border: none; background: var(--terminal-raised); opacity: 0.5; }
body.craft-theme-terminal .craft-merge-done { color: var(--terminal-accent); font-weight: 700; }

body.craft-theme-terminal .craft-grid3-free-tiles .craft-tile,
body.craft-theme-terminal .craft-inventory-tiles .craft-tile {
  background: var(--terminal-raised);
  border: 1px solid var(--terminal-line);
  border-radius: 8px;
}
body.craft-theme-terminal .craft-slot {
  background: var(--terminal-panel);
  border: 1px dashed var(--terminal-line);
  color: var(--terminal-text);
}
body.craft-theme-terminal .craft-slot.filled { border-style: solid; border-color: var(--terminal-accent); }
body.craft-theme-terminal .craft-slot-empty { color: var(--terminal-muted); }
body.craft-theme-terminal .craft-tier-header,
body.craft-theme-terminal .craft-inventory-legend { color: var(--terminal-muted); }

/* Result card */
body.craft-theme-terminal .craft-result {
  background: var(--terminal-panel);
  border: 1px solid var(--terminal-line);
  border-top: 2px solid var(--terminal-accent);
  border-radius: 10px;
  box-shadow: 0 0 24px rgba(57, 255, 106, 0.08);
  color: var(--terminal-text);
}
body.craft-theme-terminal .craft-result .name { color: var(--terminal-text); font-weight: 700; }
body.craft-theme-terminal .craft-result .desc { color: #b4bfcc; }
body.craft-theme-terminal .craft-detail {
  background: var(--terminal-raised);
  border: 1px solid var(--terminal-line);
  color: var(--terminal-text);
}
body.craft-theme-terminal .craft-country,
body.craft-theme-terminal .craft-loading,
body.craft-theme-terminal .craft-purpose-used { background: var(--terminal-raised); color: #b4bfcc; }
body.craft-theme-terminal .craft-country strong { color: var(--terminal-text); }
body.craft-theme-terminal .craft-sci-score,
body.craft-theme-terminal .craft-sci-score strong { color: var(--terminal-accent); }
body.craft-theme-terminal .craft-error { color: #ff7a6b; }
body.craft-theme-terminal .craft-new-badge { background: var(--terminal-accent); color: #03150a; }
body.craft-theme-terminal .craft-tile,
body.craft-theme-terminal .craft-result,
body.craft-theme-terminal .craft-grid3-cells,
body.craft-theme-terminal .craft-slot,
body.craft-theme-terminal .craft-detail,
body.craft-theme-terminal .craft-settings-panel,
body.craft-theme-terminal .craft-more-btn,
body.craft-theme-terminal .craft-random-btn,
body.craft-theme-terminal .craft-style-btn { border-radius: 0 !important; }
body.craft-theme-terminal .craft-result { box-shadow: 0 0 18px rgba(57, 255, 106, 0.12); text-shadow: 0 0 6px rgba(57, 255, 106, 0.35); }
body.craft-theme-terminal .craft-result .name::before { content: "> "; color: var(--terminal-accent); }
body.craft-theme-terminal .craft-icon-badge { border-radius: 4px !important; }

/* =====================================================================
   "Parchment" style (settings.theme = "parchment"): old field-notebook: warm paper, serif type, ink-brown lines, wax-red accent. Scoped to body.craft-theme-parchment. Badges keep their real size so emoji
   images never fall back to their intrinsic SVG size.
   ===================================================================== */
body.craft-theme-parchment {
  --parchment-bg: #efe4cc;
  --parchment-panel: #f7eedb;
  --parchment-raised: #e9dcc0;
  --parchment-line: #b79f74;
  --parchment-text: #3a2a17;
  --parchment-muted: #8a7452;
  --parchment-accent: #9b2d20;
  font-family: Georgia, 'Times New Roman', serif;
  color: var(--parchment-text);
  background: var(--parchment-bg);
}
body.craft-theme-parchment * { font-family: Georgia, 'Times New Roman', serif; }
body.craft-theme-parchment .bi::before { font-family: bootstrap-icons !important; }

body.craft-theme-parchment .craft-nav {
  background: var(--parchment-panel);
  color: var(--parchment-text);
  border-bottom: 1px solid var(--parchment-line);
  box-shadow: none;
}
body.craft-theme-parchment .craft-nav .craft-reset-btn { color: var(--parchment-muted); }
body.craft-theme-parchment .craft-nav .craft-reset-btn:hover,
body.craft-theme-parchment .craft-nav .craft-reset-btn.active { color: var(--parchment-accent); }
body.craft-theme-parchment .craft-plus { color: var(--parchment-accent); font-weight: 700; }

body.craft-theme-parchment .craft-settings-panel,
body.craft-theme-parchment .craft-hint-panel {
  background: var(--parchment-panel);
  border: 1px solid var(--parchment-line);
  color: var(--parchment-text);
  box-shadow: none;
}
body.craft-theme-parchment .craft-settings-row { border-color: var(--parchment-line); }
body.craft-theme-parchment .craft-settings-row select {
  background: var(--parchment-raised);
  color: var(--parchment-text);
  border: 1px solid var(--parchment-line);
}
body.craft-theme-parchment .craft-hint-intro,
body.craft-theme-parchment .craft-tokens-empty,
body.craft-theme-parchment .craft-archive-info small,
body.craft-theme-parchment .craft-inventory-empty,
body.craft-theme-parchment .craft-no-results { color: var(--parchment-muted); }

body.craft-theme-parchment .craft-style-btn,
body.craft-theme-parchment .craft-merge-new-btn,
body.craft-theme-parchment .craft-exit-archive-btn,
body.craft-theme-parchment .craft-random-btn,
body.craft-theme-parchment .craft-more-btn,
body.craft-theme-parchment .craft-hint-check-btn,
body.craft-theme-parchment .craft-comment-send-btn {
  background: transparent;
  color: var(--parchment-accent);
  border: 1px solid var(--parchment-accent);
  border-radius: 6px;
  box-shadow: none;
}
body.craft-theme-parchment .craft-style-btn:hover,
body.craft-theme-parchment .craft-merge-new-btn:hover,
body.craft-theme-parchment .craft-exit-archive-btn:hover,
body.craft-theme-parchment .craft-random-btn:hover,
body.craft-theme-parchment .craft-more-btn:hover,
body.craft-theme-parchment .craft-hint-check-btn:hover,
body.craft-theme-parchment .craft-comment-send-btn:hover {
  background: rgba(155, 45, 32, 0.14);
}

/* Icons: round dark disc, category color as a ring */
body.craft-theme-parchment .craft-icon-badge {
  background: var(--parchment-raised) !important;
  box-shadow: inset 0 0 0 1.5px var(--dg-c, var(--parchment-line)) !important;
}
body.craft-theme-parchment .craft-icon-badge .bi { color: var(--dg-c, var(--parchment-text)) !important; }

/* Board */
body.craft-theme-parchment .craft-grid3-cells {
  background: var(--parchment-panel);
  border: 1px solid var(--parchment-line);
  border-radius: 10px;
  overflow: hidden;
  counter-reset: parchment-cell;
}
body.craft-theme-parchment .craft-grid3-cell {
  padding: 0;
  border-right: 1px solid var(--parchment-line);
  border-bottom: 1px solid var(--parchment-line);
  counter-increment: parchment-cell;
}
body.craft-theme-parchment .craft-grid3-cell:nth-child(3n) { border-right: none; }
body.craft-theme-parchment .craft-grid3-cell:nth-last-child(-n+3) { border-bottom: none; }
body.craft-theme-parchment .craft-tile {
  position: relative;
  background: var(--parchment-panel);
  color: var(--parchment-text);
  border: none;
  border-radius: 0;
  box-shadow: none;
  font-weight: 500;
  animation: none;
}
body.craft-theme-parchment .craft-grid3-cell > .craft-tile::before {
  content: none;   /* cell numbers removed */
  position: absolute;
  top: 4px;
  left: 6px;
  font: 500 9px/1 ui-monospace, Menlo, Consolas, monospace;
  color: var(--parchment-muted);
}
body.craft-theme-parchment .craft-tile:hover { background: var(--parchment-raised) !important; }
body.craft-theme-parchment .craft-tile.selected,
body.craft-theme-parchment .craft-tile.selected:hover {
  background: rgba(155, 45, 32, 0.16) !important;
  box-shadow: inset 0 0 0 2px var(--parchment-accent);
  color: var(--parchment-text);
}
body.craft-theme-parchment .craft-tile.tried,
body.craft-theme-parchment .craft-tile.blocked { opacity: 0.35; filter: none; }
body.craft-theme-parchment .craft-merge-empty { border: none; background: var(--parchment-raised); opacity: 0.5; }
body.craft-theme-parchment .craft-merge-done { color: var(--parchment-accent); font-weight: 700; }

body.craft-theme-parchment .craft-grid3-free-tiles .craft-tile,
body.craft-theme-parchment .craft-inventory-tiles .craft-tile {
  background: var(--parchment-raised);
  border: 1px solid var(--parchment-line);
  border-radius: 8px;
}
body.craft-theme-parchment .craft-slot {
  background: var(--parchment-panel);
  border: 1px dashed var(--parchment-line);
  color: var(--parchment-text);
}
body.craft-theme-parchment .craft-slot.filled { border-style: solid; border-color: var(--parchment-accent); }
body.craft-theme-parchment .craft-slot-empty { color: var(--parchment-muted); }
body.craft-theme-parchment .craft-tier-header,
body.craft-theme-parchment .craft-inventory-legend { color: var(--parchment-muted); }

/* Result card */
body.craft-theme-parchment .craft-result {
  background: var(--parchment-panel);
  border: 1px solid var(--parchment-line);
  border-top: 2px solid var(--parchment-accent);
  border-radius: 10px;
  box-shadow: 0 0 24px rgba(155, 45, 32, 0.08);
  color: var(--parchment-text);
}
body.craft-theme-parchment .craft-result .name { color: var(--parchment-text); font-weight: 700; }
body.craft-theme-parchment .craft-result .desc { color: #b4bfcc; }
body.craft-theme-parchment .craft-detail {
  background: var(--parchment-raised);
  border: 1px solid var(--parchment-line);
  color: var(--parchment-text);
}
body.craft-theme-parchment .craft-country,
body.craft-theme-parchment .craft-loading,
body.craft-theme-parchment .craft-purpose-used { background: var(--parchment-raised); color: #b4bfcc; }
body.craft-theme-parchment .craft-country strong { color: var(--parchment-text); }
body.craft-theme-parchment .craft-sci-score,
body.craft-theme-parchment .craft-sci-score strong { color: var(--parchment-accent); }
body.craft-theme-parchment .craft-error { color: #ff7a6b; }
body.craft-theme-parchment .craft-new-badge { background: var(--parchment-accent); color: #fff6e6; }
body.craft-theme-parchment .craft-nav { background: #3a2a17; color: #f7eedb; border-bottom: 3px double #b79f74; }
body.craft-theme-parchment .craft-result { box-shadow: 2px 3px 0 rgba(58, 42, 23, 0.18); border-top-width: 3px; }
body.craft-theme-parchment .craft-result .name { font-style: italic; font-size: 22px; }
body.craft-theme-parchment .craft-result .desc { color: #5a4630; }
body.craft-theme-parchment .craft-grid3-cell > .craft-tile::before { font-family: Georgia, serif; font-style: italic; }
body.craft-theme-parchment .craft-new-badge { transform: rotate(-3deg); }
body.craft-theme-parchment .craft-error { color: #9b2d20; }
body.craft-theme-parchment .craft-tile.selected, body.craft-theme-parchment .craft-tile.selected:hover { color: var(--parchment-text); }

/* =====================================================================
   "Candy Pop" style (settings.theme = "candy"): bold neo-brutalist: pastel pink, thick black borders, hard offset shadows. Scoped to body.craft-theme-candy. Badges keep their real size so emoji
   images never fall back to their intrinsic SVG size.
   ===================================================================== */
body.craft-theme-candy {
  --candy-bg: #ffe3ef;
  --candy-panel: #ffffff;
  --candy-raised: #fff0f6;
  --candy-line: #1a1a1a;
  --candy-text: #1a1a1a;
  --candy-muted: #7a5b6b;
  --candy-accent: #ff4f9a;
  font-family: 'Fira Sans', sans-serif;
  color: var(--candy-text);
  background: var(--candy-bg);
}
body.craft-theme-candy * { font-family: 'Fira Sans', sans-serif; }
body.craft-theme-candy .bi::before { font-family: bootstrap-icons !important; }

body.craft-theme-candy .craft-nav {
  background: var(--candy-panel);
  color: var(--candy-text);
  border-bottom: 1px solid var(--candy-line);
  box-shadow: none;
}
body.craft-theme-candy .craft-nav .craft-reset-btn { color: var(--candy-muted); }
body.craft-theme-candy .craft-nav .craft-reset-btn:hover,
body.craft-theme-candy .craft-nav .craft-reset-btn.active { color: var(--candy-accent); }
body.craft-theme-candy .craft-plus { color: var(--candy-accent); font-weight: 700; }

body.craft-theme-candy .craft-settings-panel,
body.craft-theme-candy .craft-hint-panel {
  background: var(--candy-panel);
  border: 1px solid var(--candy-line);
  color: var(--candy-text);
  box-shadow: none;
}
body.craft-theme-candy .craft-settings-row { border-color: var(--candy-line); }
body.craft-theme-candy .craft-settings-row select {
  background: var(--candy-raised);
  color: var(--candy-text);
  border: 1px solid var(--candy-line);
}
body.craft-theme-candy .craft-hint-intro,
body.craft-theme-candy .craft-tokens-empty,
body.craft-theme-candy .craft-archive-info small,
body.craft-theme-candy .craft-inventory-empty,
body.craft-theme-candy .craft-no-results { color: var(--candy-muted); }

body.craft-theme-candy .craft-style-btn,
body.craft-theme-candy .craft-merge-new-btn,
body.craft-theme-candy .craft-exit-archive-btn,
body.craft-theme-candy .craft-random-btn,
body.craft-theme-candy .craft-more-btn,
body.craft-theme-candy .craft-hint-check-btn,
body.craft-theme-candy .craft-comment-send-btn {
  background: transparent;
  color: var(--candy-accent);
  border: 1px solid var(--candy-accent);
  border-radius: 6px;
  box-shadow: none;
}
body.craft-theme-candy .craft-style-btn:hover,
body.craft-theme-candy .craft-merge-new-btn:hover,
body.craft-theme-candy .craft-exit-archive-btn:hover,
body.craft-theme-candy .craft-random-btn:hover,
body.craft-theme-candy .craft-more-btn:hover,
body.craft-theme-candy .craft-hint-check-btn:hover,
body.craft-theme-candy .craft-comment-send-btn:hover {
  background: rgba(255, 79, 154, 0.14);
}

/* Icons: round dark disc, category color as a ring */
body.craft-theme-candy .craft-icon-badge {
  background: var(--candy-raised) !important;
  box-shadow: inset 0 0 0 1.5px var(--dg-c, var(--candy-line)) !important;
}
body.craft-theme-candy .craft-icon-badge .bi { color: var(--dg-c, var(--candy-text)) !important; }

/* Board */
body.craft-theme-candy .craft-grid3-cells {
  background: var(--candy-panel);
  border: 1px solid var(--candy-line);
  border-radius: 10px;
  overflow: hidden;
  counter-reset: candy-cell;
}
body.craft-theme-candy .craft-grid3-cell {
  padding: 0;
  border-right: 1px solid var(--candy-line);
  border-bottom: 1px solid var(--candy-line);
  counter-increment: candy-cell;
}
body.craft-theme-candy .craft-grid3-cell:nth-child(3n) { border-right: none; }
body.craft-theme-candy .craft-grid3-cell:nth-last-child(-n+3) { border-bottom: none; }
body.craft-theme-candy .craft-tile {
  position: relative;
  background: var(--candy-panel);
  color: var(--candy-text);
  border: none;
  border-radius: 0;
  box-shadow: none;
  font-weight: 500;
  animation: none;
}
body.craft-theme-candy .craft-grid3-cell > .craft-tile::before {
  content: none;   /* cell numbers removed */
  position: absolute;
  top: 4px;
  left: 6px;
  font: 500 9px/1 ui-monospace, Menlo, Consolas, monospace;
  color: var(--candy-muted);
}
body.craft-theme-candy .craft-tile:hover { background: var(--candy-raised) !important; }
body.craft-theme-candy .craft-tile.selected,
body.craft-theme-candy .craft-tile.selected:hover {
  background: rgba(255, 79, 154, 0.16) !important;
  box-shadow: inset 0 0 0 2px var(--candy-accent);
  color: var(--candy-text);
}
body.craft-theme-candy .craft-tile.tried,
body.craft-theme-candy .craft-tile.blocked { opacity: 0.35; filter: none; }
body.craft-theme-candy .craft-merge-empty { border: none; background: var(--candy-raised); opacity: 0.5; }
body.craft-theme-candy .craft-merge-done { color: var(--candy-accent); font-weight: 700; }

body.craft-theme-candy .craft-grid3-free-tiles .craft-tile,
body.craft-theme-candy .craft-inventory-tiles .craft-tile {
  background: var(--candy-raised);
  border: 1px solid var(--candy-line);
  border-radius: 8px;
}
body.craft-theme-candy .craft-slot {
  background: var(--candy-panel);
  border: 1px dashed var(--candy-line);
  color: var(--candy-text);
}
body.craft-theme-candy .craft-slot.filled { border-style: solid; border-color: var(--candy-accent); }
body.craft-theme-candy .craft-slot-empty { color: var(--candy-muted); }
body.craft-theme-candy .craft-tier-header,
body.craft-theme-candy .craft-inventory-legend { color: var(--candy-muted); }

/* Result card */
body.craft-theme-candy .craft-result {
  background: var(--candy-panel);
  border: 1px solid var(--candy-line);
  border-top: 2px solid var(--candy-accent);
  border-radius: 10px;
  box-shadow: 0 0 24px rgba(255, 79, 154, 0.08);
  color: var(--candy-text);
}
body.craft-theme-candy .craft-result .name { color: var(--candy-text); font-weight: 700; }
body.craft-theme-candy .craft-result .desc { color: #b4bfcc; }
body.craft-theme-candy .craft-detail {
  background: var(--candy-raised);
  border: 1px solid var(--candy-line);
  color: var(--candy-text);
}
body.craft-theme-candy .craft-country,
body.craft-theme-candy .craft-loading,
body.craft-theme-candy .craft-purpose-used { background: var(--candy-raised); color: #b4bfcc; }
body.craft-theme-candy .craft-country strong { color: var(--candy-text); }
body.craft-theme-candy .craft-sci-score,
body.craft-theme-candy .craft-sci-score strong { color: var(--candy-accent); }
body.craft-theme-candy .craft-error { color: #ff7a6b; }
body.craft-theme-candy .craft-new-badge { background: var(--candy-accent); color: #ffffff; }
body.craft-theme-candy .craft-nav { background: #ffd23f; color: #1a1a1a; border-bottom: 3px solid #1a1a1a; }
body.craft-theme-candy .craft-nav .craft-reset-btn { color: #1a1a1a; }
body.craft-theme-candy .craft-nav .craft-reset-btn:hover, body.craft-theme-candy .craft-nav .craft-reset-btn.active { color: var(--candy-accent); }
body.craft-theme-candy .craft-grid3-cells,
body.craft-theme-candy .craft-result,
body.craft-theme-candy .craft-slot,
body.craft-theme-candy .craft-settings-panel { border: 3px solid #1a1a1a; box-shadow: 5px 5px 0 #1a1a1a; }
body.craft-theme-candy .craft-grid3-cell { border-color: #1a1a1a; border-width: 0 2px 2px 0; }
body.craft-theme-candy .craft-result { border-top: 3px solid #1a1a1a; }
body.craft-theme-candy .craft-more-btn, body.craft-theme-candy .craft-random-btn, body.craft-theme-candy .craft-style-btn {
  background: #fff; color: #1a1a1a; border: 2.5px solid #1a1a1a; box-shadow: 3px 3px 0 #1a1a1a; font-weight: 700; }
body.craft-theme-candy .craft-more-btn:hover, body.craft-theme-candy .craft-random-btn:hover { background: #ffd23f; }
body.craft-theme-candy .craft-tile.selected, body.craft-theme-candy .craft-tile.selected:hover { background: #ffd23f !important; box-shadow: inset 0 0 0 3px #1a1a1a; }
body.craft-theme-candy .craft-sci-score, body.craft-theme-candy .craft-sci-score strong { color: #1a1a1a; }
body.craft-theme-candy .craft-result .name { font-weight: 800; }
body.craft-theme-candy .craft-icon-badge { box-shadow: inset 0 0 0 2px #1a1a1a !important; }

/* Footer disclaimer, same look as Flagdoku's index (Suggestions / social /
   Privacy Policy). Inherits the theme's text color so every style works. */
.craft-disclaimer {
  font-family: 'Fira Sans Condensed', 'Fira Sans', sans-serif;
  font-size: 12px;
  line-height: 1.6;
  text-align: center;
  color: inherit;
  opacity: 0.75;
  margin-top: 14px;
  padding: 8px 0 12px;
  border-top: 1px solid currentColor;
  border-top-color: rgba(128, 128, 128, 0.3);
}
.craft-disclaimer .common-disclaimer-link {
  color: inherit;
  text-decoration: none;
}
.craft-disclaimer .common-disclaimer-link:hover {
  text-decoration: underline;
}
.craft-disclaimer .social-links {
  margin: 0 5px;
}
.craft-disclaimer .social-links a {
  margin: 0 4px;
}
.craft-disclaimer-text {
  white-space: nowrap;
}

/* A + B boxes: wider (so names fit), slightly less tall. Last on purpose so
   it wins over every theme's own slot sizing. */
body .craft-slots .craft-slot {
  max-width: 150px;
  min-height: 34px;
  padding: 4px 8px;
}
@media all {
  body .craft-slots .craft-slot {
    max-width: 142px;
    min-height: 30px;
    padding: 3px 6px;
  }
}

/* =====================================================================
   Reactions (Doodle God-style): pops on pick, bounce on the result, a
   sparkle burst on a new discovery, a shake on "Nothing happens".
   Pure CSS classes toggled from JS (see reactToResult()).
   ===================================================================== */
@keyframes craft-pop-in {
  0% { transform: scale(0.4); }
  60% { transform: scale(1.18); }
  100% { transform: scale(1); }
}
@keyframes craft-result-bounce {
  0% { transform: scale(0.85) translateY(8px); }
  55% { transform: scale(1.05) translateY(-3px); }
  100% { transform: scale(1) translateY(0); }
}
@keyframes craft-icon-tada {
  0% { transform: scale(0.3) rotate(-25deg); }
  45% { transform: scale(1.35) rotate(12deg); }
  70% { transform: scale(0.94) rotate(-6deg); }
  100% { transform: scale(1) rotate(0); }
}
@keyframes craft-glow-ring {
  0% { box-shadow: 0 0 0 0 rgba(255, 210, 63, 0.75); }
  100% { box-shadow: 0 0 0 26px rgba(255, 210, 63, 0); }
}
@keyframes craft-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(3px); }
}
@keyframes craft-burst-fly {
  0% { transform: translate(-50%, -50%) scale(0.3) rotate(0); opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1) rotate(var(--rot)); opacity: 0; }
}

/* Picking an element: the tile and its slot icon pop. */
.craft-tile.selected .craft-icon-badge,
.craft-slot.filled .craft-icon-badge {
  animation: craft-pop-in 0.28s ease-out;
}

/* Result card. */
.craft-result.react-ok .icon { animation: craft-result-bounce 0.42s ease-out; }
.craft-result.react-new .icon { animation: craft-icon-tada 0.7s ease-out; }
.craft-result.react-new .icon .craft-icon-badge { animation: craft-glow-ring 0.9s ease-out; }
.craft-result.react-new .name { animation: craft-result-bounce 0.5s 0.15s ease-out backwards; }
.craft-result.react-fail .icon,
.craft-result.react-fail .craft-error { animation: craft-shake 0.45s ease-in-out; }
.craft-result { position: relative; }

.craft-burst {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 5;
}
.craft-burst span {
  position: absolute;
  left: 0;
  top: 0;
  line-height: 1;
  animation: craft-burst-fly 0.95s ease-out forwards;
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.6);
}

@media (prefers-reduced-motion: reduce) {
  .craft-tile.selected .craft-icon-badge,
  .craft-slot.filled .craft-icon-badge,
  .craft-result .icon,
  .craft-result .name { animation: none !important; }
  .craft-burst { display: none; }
}

/* "More" menu in the header: Free mode + Archive stay in the bar, everything
   else lives here (like Flagdoku's menu). Sits outside .craft-nav so no
   theme's nav-button rules touch it; colors follow the page via inherit. */
.craft-more-menu {
  display: none;
  position: fixed;
  right: 8px;
  top: 48px;
  z-index: 2147483000;
  min-width: 210px;
  max-width: calc(100vw - 16px);
  padding: 6px;
  border-radius: 12px;
  background: #fff;
  color: #2d1c17;
  border: 1px solid rgba(0, 0, 0, 0.15);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25);
  font-family: 'Fira Sans', sans-serif;
}
.craft-more-menu.show { display: block; }
.craft-more-menu .craft-menu-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font: 500 14px 'Fira Sans', sans-serif;
  text-align: left;
  cursor: pointer;
}
.craft-more-menu .craft-menu-item:hover { background: rgba(0, 0, 0, 0.07); }
.craft-more-menu .craft-menu-item.active { background: rgba(33, 115, 70, 0.14); font-weight: 700; }
.craft-more-menu .craft-menu-item.disabled { display: none; }
.craft-more-menu .craft-menu-item .bi { width: 18px; text-align: center; font-size: 15px; }
.craft-menu-heading {
  margin: 6px 10px 2px;
  padding-top: 8px;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.6;
}

/* Header buttons with a text label (icon + word), pill-shaped. */
body .craft-nav-right .craft-reset-btn.craft-nav-pill {
  width: auto !important;
  height: 30px !important;
  padding: 0 11px !important;
  border-radius: 15px !important;
  gap: 6px;
  font-size: 13px !important;
  font-weight: 600;
  white-space: nowrap;
}
body .craft-nav-right .craft-reset-btn.craft-nav-pill .bi { font-size: 14px; }
@media all {
  body .craft-nav-right { gap: 4px; }
  body .craft-nav-right .craft-reset-btn.craft-nav-pill {
    height: 28px !important;
    padding: 0 8px !important;
    gap: 4px;
    font-size: 12px !important;
  }
  body .craft-nav-right .craft-reset-btn.craft-nav-pill .bi { font-size: 13px; }
}

/* Settings grew past its fixed max-height (Server/Style/Tone rows got clipped by
   overflow:hidden, so the Style selector looked missing) — cap by viewport and scroll. */
body[class] #craft-settings-panel.show,
#craft-settings-panel.show {
  max-height: min(78vh, 640px);
  overflow-y: auto;
}

/* Science mode: random natural element button (hidden outside science mode) */
#craft-sci-random { display: none; }
body.craft-science-on #craft-sci-random { display: flex; }
.craft-sci-random-note { margin-top: 8px; font-size: 12px; opacity: .7; text-align: center; }

/* "Add more" / recipe / basic text: full card width, no clipped scroll box. */
body.craft-grid3-on .craft-result > #craft-detail,
body.craft-grid3-on .craft-result > #craft-recipe,
body.craft-grid3-on .craft-result > #craft-basic {
  grid-column: 1 / -1;
  justify-self: stretch;
  width: 100%;
}
body.craft-grid3-on .craft-result .craft-detail {
  max-height: none;
  overflow: visible;
  display: block;
  -webkit-line-clamp: unset;
  text-overflow: clip;
  font-size: 13.5px;
  line-height: 1.45;
  padding: 10px 12px;
  text-align: left;
  text-align-last: auto;
  hyphens: none;
}

/* Hint mode: hand-written clues + "More clues" button */
.craft-hint-result .desc + .desc { margin-top: 6px; }
.craft-hint-result .craft-hint-more {
  display: inline-block;
  width: auto;
  height: auto;
  margin-top: 10px;
  padding: 5px 12px;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: transparent;
  font-size: 12px;
  cursor: pointer;
  opacity: .8;
}
.craft-hint-result .craft-hint-more:hover { opacity: 1; }


/* ---------- Nav: title on the left, language flag beside it ---------- */
.craft-nav {
  justify-content: flex-start;
  text-align: left;
  gap: 8px;
}
/* Title = Flagdoku's headline: Fira Sans 600, 13px caps, round logo. */
.craft-nav-title {
  display: flex;
  align-items: center;
  gap: 0.6em;
  font-family: 'Fira Sans', sans-serif;
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.craft-nav-logo {
  height: 1.6em;
  width: 1.6em;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
}

/* ---------- iPhone: result action buttons as one even row of chips ----
   Add more / Exact ingredients / Basic used to sit as bare 11px text links
   jammed together; now equal-width tappable chips, same in every style. */
@media all {
  body .craft-result .craft-btn-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
    margin-top: 6px;
    grid-column: 1 / -1;
  }
  body .craft-result .craft-btn-row .craft-more-btn {
    min-height: 32px;
    padding: 4px 6px;
    font-size: 11.5px;
    line-height: 1.15;
    text-align: center;
    white-space: normal;
    /* No background override: Periodic's buttons are dark with white text, a
       translucent white fill here made them white-on-white (invisible). */
    border-width: 1.5px;
    border-style: solid;
    border-radius: 10px;
    transform: none;
  }
  body:not([class*="craft-theme-"]) .craft-result .craft-btn-row .craft-more-btn {
    border-color: currentColor;
    background: rgba(255, 255, 255, 0.55);
  }
  body .craft-result .craft-btn-row .craft-more-btn:disabled { opacity: 0.55; }
}

/* Privileged: "use what you typed" tile at the top of the picker */
.craft-inventory-results .craft-inventory-pick.typed {
  outline: 2px dashed var(--craft-accent, #217346);
  outline-offset: -2px;
}

.craft-stuck-msg {
  max-width: 360px;
  background: #fde4e1;
  border-color: #e8a29a;
  color: #7a1f14;
}
.craft-stuck-msg .craft-merge-new-btn { margin-top: 4px; }
.craft-merge-new-btn:disabled { opacity: 0.45; cursor: default; }

/* Free/Science mode: a visible text box under the A/B slots; tapping it opens
   the element search for the next empty side. */
.craft-free-input { display: none; margin: 8px auto 0; max-width: 360px; width: 100%; box-sizing: border-box; }
body.craft-free-on .craft-free-input { display: block; }
body.craft-science-on .craft-free-input { display: none; }

/* Smaller 3x3 board (all themes / sizes). Same selector depth as the
   "Bigger board" block above, so it wins by coming last (phone included). */
body .craft-grid .craft-grid3-cells,
body .craft-grid .craft-grid3-cells.craft-grid3-cells {
  --craft-tile-h: 54px !important;
  max-width: 280px !important;
}
body .craft-grid .craft-grid3-cells .craft-grid3-cell {
  padding: 3px !important;
}
body .craft-grid .craft-grid3-cells .craft-tile {
  padding: 2px 1px 1px !important;
  gap: 1px !important;
}
body .craft-grid .craft-grid3-cells .craft-tile,
body .craft-grid .craft-grid3-cells .craft-tile span:not(.craft-icon-badge) {
  font-size: 11px !important;
  line-height: 1.05 !important;
}
body .craft-grid .craft-grid3-cells .craft-tile span:not(.craft-icon-badge) {
  min-height: 2.1em !important;
}
body .craft-grid .craft-grid3-cells .craft-icon-badge {
  width: 30px !important;
  height: 30px !important;
}
body .craft-grid .craft-grid3-cells .craft-icon-badge .bi {
  font-size: 15px !important;
}
@media all {
  body .craft-grid .craft-grid3-cells {
    max-width: 280px !important;
  }
  body .craft-grid .craft-grid3-cells .craft-icon-badge {
    width: 30px !important;
    height: 30px !important;
  }
  body .craft-grid .craft-grid3-cells .craft-icon-badge .bi {
    font-size: 15px !important;
  }
  body .craft-grid .craft-grid3-cells .craft-tile,
  body .craft-grid .craft-grid3-cells .craft-tile span:not(.craft-icon-badge) {
    font-size: 11px !important;
  }
}

/* Smaller history (all themes): 5 slim rows. */
body .craft-history-list {
  gap: 3px !important;
  max-height: calc(5 * 24px + 4 * 3px) !important;
}
body .craft-history-item {
  height: 24px !important;
  padding: 2px 7px !important;
  gap: 3px !important;
  font-size: 10.5px !important;
  border-radius: 8px !important;
}
body .craft-history-item .craft-icon-badge {
  width: 16px !important;
  height: 16px !important;
}
body .craft-history-item .craft-icon-badge .bi {
  font-size: 9px !important;
}
body .craft-history-title {
  font-size: 10.5px !important;
}

/* Science mode: the blank 3x3 board stays visible (free mode hides the
   grid) and the A/B slots are replaced by tapping board cells. */
body.craft-science-on #craft-grid { display: block !important; }
body.craft-science-on #craft-slots { display: none; }
.craft-sci-cell-add {
  width: 100%;
  height: 100%;
  min-height: 60px;
  border: 2px dashed rgba(128, 128, 128, 0.5);
  border-radius: 12px;
  background: transparent;
  color: inherit;
  opacity: 0.6;
  cursor: pointer;
  font-size: 1.3rem;
}
.craft-sci-cell-add:hover { opacity: 1; }
.craft-grid3-cell > .craft-tile { position: relative; }

/* The state emoji's circle is a <span> inside .craft-tile, so the board's
   "span:not(.craft-icon-badge) { min-height: 2.1em !important }" rules
   (higher specificity than the block above) stretched it into an oval.
   Re-pin it with a selector that outranks them. */
body .craft-grid .craft-grid3-cells .craft-tile .craft-icon-badge > span.craft-emoji-state,
body .craft-tile .craft-icon-badge > span.craft-emoji-state,
body .craft-icon-badge > span.craft-emoji-state {
  min-height: 0 !important;
  height: auto !important;
  width: 48% !important;
  aspect-ratio: 1 / 1 !important;
  padding: 0 !important;
  font-size: 0 !important;
  line-height: 1 !important;
  border-radius: 50% !important;
}

/* Science board = the daily board: same cells, same tiles; an empty cell is the
   daily's .craft-merge-empty with a "+" that opens the picker. */
.craft-sci-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  opacity: 0.6;
  font-size: 1.3rem;
}
.craft-sci-empty:hover { opacity: 1; }
/* Pointer over the whole cell, padding included. */
.craft-grid3-cell:has(> .craft-tile),
.craft-grid3-cell:has(> .craft-sci-empty) { cursor: pointer; }

/* Science board: the red x sits where the periodic cell number is. */
body.craft-science-on #craft-grid .craft-grid3-cell > .craft-tile::before { content: none; }
.craft-sci-remove {
  position: absolute;
  top: 1px;
  left: 3px;
  z-index: 2;
  padding: 0 3px;
  font-size: 19px;
  font-weight: 700;
  line-height: 1;
  color: #d32f2f;
  cursor: pointer;
}
.craft-sci-remove:hover { color: #b71c1c; }
body.craft-science-on #craft-grid .craft-tile.selected .craft-sci-remove { color: #ff6b6b; }

/* Settings > Hide ads: ramp.js is never loaded; this also drops the
   reserved footer space and any preview placeholders. */
body.craft-hide-ads { padding-bottom: 0; --craft-ad-footer-h: 0px; }
body.craft-hide-ads .craft-ad-placeholder,
html body.craft-hide-ads .pw-corner-ad-video,
html body.craft-hide-ads .pw-fixed-footer,
html body.craft-hide-ads .pw-sticky { display: none !important; }

/* Header buttons as plain text links (icon + word) separated by "|",
   integrated in the bar like Flagdoku Regions' .menu-link -- no pills. */
body .craft-nav-right { gap: 0; }
body .craft-nav .craft-nav-right .craft-reset-btn.craft-nav-pill,
body .craft-nav .craft-nav-right .craft-reset-btn.craft-nav-pill:hover,
body .craft-nav .craft-nav-right .craft-reset-btn.craft-nav-pill:active,
body .craft-nav .craft-nav-right .craft-reset-btn.craft-nav-pill.active {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none;
  padding: 0 !important;
  height: auto !important;
  gap: 0.4em;
  font-size: 12px !important;
  font-weight: 400;
  color: #fff;
  text-decoration: none;
}
body .craft-nav .craft-nav-right .craft-reset-btn.craft-nav-pill + .craft-reset-btn.craft-nav-pill::before {
  content: "|";
  color: #888;
  margin: 0 0.6em 0 0.5em;
  font-weight: 400;
}
body .craft-nav .craft-nav-right .craft-reset-btn.craft-nav-pill + .craft-reset-btn.craft-nav-pill { position: relative; }
@media all {
  body .craft-nav .craft-nav-right .craft-reset-btn.craft-nav-pill { height: auto !important; padding: 0 !important; font-size: 11.5px !important; }
  body .craft-nav .craft-nav-right .craft-reset-btn.craft-nav-pill + .craft-reset-btn.craft-nav-pill::before { margin: 0 0.4em 0 0.3em; }
}

/* Science mode: "What do you want to build?" */
.craft-sci-goal { display: none; flex-direction: column; gap: 4px; width: 100%; max-width: 330px; margin: 0 auto; }
body.craft-science-on .craft-sci-goal { display: flex; }
.craft-sci-goal label { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.75; }
.craft-sci-goal-status { min-height: 1em; font-size: 12px; opacity: 0.8; }
.craft-sci-goal-status.bad { color: #d33; opacity: 1; }
.craft-sci-goal input { width: 100%; box-sizing: border-box; padding: 8px 10px; font-size: 16.1px; border: 1.5px solid currentColor; border-radius: 4px; background: transparent; color: inherit; }

/* Science status: points feedback + ranks modal */
.craft-science-gain-up { color: #1b7f3b; }
.craft-science-gain-down { color: #c62828; }
.craft-science-gain-zero { opacity: 0.7; }
.craft-science-info { margin-top: 6px; background: none; border: none; padding: 0; color: inherit; font-size: 12px; text-decoration: underline; cursor: pointer; opacity: 0.8; }
.craft-science-modal { position: fixed; inset: 0; z-index: 2147483000; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; padding: 16px; }
.craft-science-modal-card { background: #fff; color: #2d1c17; max-width: 420px; width: 100%; max-height: 86vh; overflow-y: auto; border-radius: 8px; padding: 16px 18px; font-size: 13px; line-height: 1.4; }
.craft-science-modal-card h3 { margin: 0 0 8px; font-size: 17px; }
.craft-science-modal-card h4 { margin: 14px 0 4px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; }
.craft-science-modal-card p { margin: 0 0 6px; }
.craft-science-modal-card table { width: 100%; border-collapse: collapse; }
.craft-science-modal-card td { padding: 3px 4px; border-bottom: 1px solid #e5e2da; vertical-align: top; }
.craft-science-modal-card td:last-child { text-align: right; white-space: nowrap; }
.craft-science-modal-card tr.me td { background: #fff3c4; font-weight: 600; }
.craft-science-modal-card ul { list-style: none; margin: 0 0 10px; padding: 0; }
.craft-science-modal-card li { display: flex; gap: 8px; padding: 3px 0; border-bottom: 1px solid #e5e2da; }
.craft-science-modal-card li span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.craft-science-modal-card li small { opacity: 0.6; }
.craft-science-modal-card li b.up { color: #1b7f3b; }
.craft-science-modal-card li b.down { color: #c62828; }
.craft-science-modal-card #craft-science-modal-close { margin-top: 8px; color: #2d1c17; border-color: #2d1c17; }

.craft-science-modal-card { position: relative; }
.craft-science-modal-x { position: absolute; top: 6px; right: 8px; width: 28px; height: 28px; border: none; background: none; font-size: 24px; line-height: 1; color: #d32f2f; cursor: pointer; }
.craft-science-modal-card h3 { padding-right: 28px; }

/* Result card buttons (More / Basic explain / Real life uses / Translate):
   2 per row on phones so the labels fit, wrapping instead of clipping. */
@media all {
  body .craft-result .craft-btn-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body .craft-result .craft-btn-row .craft-more-btn { white-space: normal; line-height: 1.15; padding: 4px 6px; }
}

/* Translate: a tiny ES/EN chip, not a full-width button. */
body .craft-result .craft-btn-row .craft-translate-btn {
  flex: 0 0 auto;
  min-height: 0;
  width: auto;
  padding: 1px 7px;
  font-size: 10px;
  line-height: 1.4;
  border-radius: 4px;
}
@media all {
  body .craft-result .craft-btn-row { display: flex; flex-wrap: wrap; justify-content: center; }
  body .craft-result .craft-btn-row .craft-more-btn:not(.craft-translate-btn) { flex: 1 1 40%; }
  body .craft-result .craft-btn-row .craft-translate-btn { padding: 1px 7px; min-height: 0; }
}

/* Descriptions and text answers justified; Real life uses as bullets. */
body .craft-result .desc,
body .craft-result .craft-detail,
body .craft-result .craft-uses-list li {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}
.craft-uses-list {
  margin: 6px 0 0;
  padding-left: 18px;
  list-style: disc;
  font-size: inherit;
  line-height: 1.35;
}
.craft-uses-list li { margin-bottom: 3px; }
.craft-uses-list li::marker { font-size: 0.6em; }
/* same type as the description above it (.craft-result .desc), per theme */
.craft-uses-list li { font-size: 13px; color: #55665a; }
body.craft-theme-sketch .craft-uses-list li { font-size: 15px; color: #4a3f38; }
body.craft-theme-doodle .craft-uses-list li { color: var(--dg-soft); }

/* Science board: bolder red x. */
body.craft-science-on #craft-grid .craft-sci-remove {
  top: 0;
  left: 2px;
  font-size: 22px;
  font-weight: 900;
  color: #e53935;
  text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0,0,0,.35);
}
body.craft-science-on #craft-grid .craft-sci-remove:hover { color: #ff1744; transform: scale(1.15); }
body.craft-science-on #craft-grid .craft-tile.selected .craft-sci-remove { color: #ff5252; }

/* Wikipedia search link: same pill as the other buttons, but an <a> */
a.craft-wiki-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
}

/* Science mode "Happy accident" toggle under the goal input */
.craft-sci-accident label { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; text-transform: none; letter-spacing: 0; opacity: 1; cursor: pointer; }
.craft-sci-accident input { width: auto; margin: 0; }
.craft-accident-badge { color: #8a5a00; background: #fff6cf; }

/* ===== Science mode on iPhone =====
   The science board uses the daily board's own sizing (no overrides here).
   Result card: the More / Uses / Wikipedia / Translate buttons were
   clipped by the compact two-column card; give the row the full width
   and let it wrap with tighter chips. */
@media all {
  body.craft-science-on .craft-result,
  body.craft-science-on.craft-grid3-on .craft-result {
    overflow: visible;
  }
  body.craft-science-on .craft-result .craft-btn-row,
  body.craft-science-on.craft-grid3-on .craft-result .craft-btn-row {
    grid-column: 1 / -1;
    justify-self: stretch;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px 4px;
  }
  body.craft-science-on .craft-result .craft-more-btn,
  body.craft-science-on.craft-grid3-on .craft-result .craft-more-btn {
    flex: 0 0 auto;
    padding: 4px 8px;
    font-size: 12px;
    line-height: 1.2;
    white-space: nowrap;
  }
}

/* Taps: no double-tap-zoom delay/ambiguity, no grey tap flash. */
.craft-tile, .craft-grid3-cell, .craft-sci-cell-add, .craft-sci-remove,
.craft-more-btn, .craft-vote-btn, button, a {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Phones: the Playwire sticky footer is ~50px and sits flush at the bottom
   (it ignores the safe-area inset), so the corner video was floating
   ~45px above it (60px reserve + safe-area). Pin it right on the footer. */
@media all {
  html body .pw-corner-ad-video.pw-corner-ad-video.pw-corner-ad-video {
    bottom: 50px !important;
  }
}

/* Phones: the corner video (~90px tall, bottom-right) sat on top of the
   result card's button row once the card was at the bottom of the page.
   Reserve footer (50) + video (90) + gap so the page can scroll the
   buttons clear of it. */
@media all {
  body:not(.craft-hide-ads) {
    padding-bottom: calc(150px + env(safe-area-inset-bottom));
  }
}

/* Phones: result buttons as compact boxes, not stretched bars. */
@media all {
  body .craft-result .craft-btn-row {
    justify-content: flex-start;
    gap: 6px;
  }
  body .craft-result .craft-btn-row .craft-more-btn:not(.craft-translate-btn) {
    flex: 0 0 auto;
    width: auto;
    min-height: 30px;
    padding: 4px 12px;
    white-space: nowrap;
  }
}

/* Result description: always shown in full (no 2-line clamp, no tap-to-expand). */
body .craft-result .desc {
  display: block !important;
  -webkit-line-clamp: unset !important;
  line-clamp: unset !important;
  max-height: none !important;
  overflow: visible !important;
}

.craft-score-badge { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: 13px; padding: 4px 8px; border-radius: 999px; background: rgba(255, 210, 63, 0.18); color: #ffd23f; white-space: nowrap; }
.craft-score-final { font-weight: 700; text-align: center; }

.craft-sci-info { border: 0; background: none; padding: 0 2px; margin-left: 2px; font-size: 13px; color: inherit; opacity: 0.7; cursor: pointer; vertical-align: baseline; }
.craft-sci-info:hover { opacity: 1; }
.craft-science-modal-card .craft-value-close { margin-top: 8px; color: #2d1c17; border-color: #2d1c17; }

.craft-survival-bar { display: flex; gap: 8px; justify-content: center; margin: 6px 0; }
.craft-survival-bar small { opacity: 0.7; margin-left: 4px; }

.craft-score-row { display: flex; justify-content: center; margin-top: 8px; }
body.craft-merge-on:not(.craft-free-on) #craft-slots { display: none; }

.craft-energy { display: flex; align-items: center; gap: 8px; width: min(100%, 300px); margin: 10px auto 0; color: inherit; }
.craft-energy-icon { font-size: 18px; color: #f2a900; }
.craft-energy.low .craft-energy-icon { color: #d9402b; }
.craft-energy-bar { flex: 1; height: 12px; border-radius: 999px; background: rgba(128,128,128,.25); overflow: hidden; }
.craft-energy-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #2ecc71, #8fd14f); transition: width .3s; }
.craft-energy.low .craft-energy-fill { background: linear-gradient(90deg, #e74c3c, #ff8a5c); }
.craft-energy-num { min-width: 28px; text-align: right; font-size: 16px; font-weight: 800; color: inherit; }
.craft-energy-rest { width: min(100%, 300px); margin: 8px auto 0; padding: 7px 10px; border-radius: 10px; background: rgba(217,64,43,.12); border: 1px solid rgba(217,64,43,.4); color: inherit; font-size: 14px; font-weight: 600; text-align: center; }
body[class] .craft-action-row, body[class] .craft-exit-row { width: 100%; align-self: stretch; justify-content: center; }
body[class] .craft-grid3-section .craft-action-row, body[class] .craft-grid3-section .craft-exit-row { display: flex !important; justify-content: center; gap: 10px; }

.craft-archive-banner { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; box-sizing: border-box; padding: 4px 10px; background: #fffbe3; border-bottom: 1px solid #f3e6a8; font-family: "Fira Sans", sans-serif; }
.craft-archive-banner[hidden] { display: block; visibility: hidden; height: 15px; padding: 0; border: 0; }   /* a bit of the archive bar's space is kept so the grid does not jump; slightly less than the bar */
body[class] .craft-archive-banner-btn { border: 0; border-radius: 4px; background: transparent; color: #6b5a1e; font: inherit; font-size: 12px; font-weight: 600; padding: 2px 8px; white-space: nowrap; cursor: pointer; box-shadow: none; }
body[class] .craft-archive-banner-btn:hover:not(:disabled) { background: #f6ecbd; }
.craft-archive-banner-btn:disabled { opacity: .35; cursor: default; }
.craft-archive-banner-exit { text-decoration: underline; }
.craft-archive-banner-exit .bi { text-decoration: none; display: inline-block; margin-right: 2px; }

body[class] .craft-grid3-section .craft-status-row { display: flex !important; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.craft-status-row .craft-energy { flex: 1 1 auto; width: auto; min-width: 0; margin: 0; }
body[class] .craft-grid3-section .craft-status-row .craft-action-row { width: auto; margin: 0; flex: 0 0 auto; gap: 6px; }
body[class] .craft-status-row .craft-action-row .craft-merge-new-btn { font-size: 13px; padding: 5px 10px; }

.craft-status-row .craft-energy { flex: 0 1 150px; cursor: pointer; }
.craft-energy-info { margin: 8px 0 0; padding: 8px 12px; border-radius: 10px; background: rgba(128,128,128,.12); border: 1px solid rgba(128,128,128,.3); font-size: 13px; line-height: 1.35; color: inherit; }
.craft-energy-info ul { margin: 4px 0 0; padding-left: 0; list-style: none; }
.craft-energy-info li { margin: 2px 0; }

.craft-spinner { display: inline-block; width: 11px; height: 11px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; vertical-align: -1px; animation: craft-spin .7s linear infinite; }
.craft-sci-goal-field { position: relative; }
.craft-sci-goal-field input { padding-right: 32px; }
.craft-sci-goal-clear { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); border: 0; background: none; color: inherit; opacity: .6; font-size: 14px; padding: 6px; cursor: pointer; }
.craft-sci-goal-clear:hover { opacity: 1; }
.craft-sci-goal-clear[hidden] { display: none; }

.craft-live { display: none; width: 100%; max-width: 330px; box-sizing: border-box; margin: 6px auto; padding: 6px 10px; border-radius: 8px; background: rgba(128,128,128,.12); font-size: 13px; line-height: 1.3; color: inherit; }
body.craft-free-on .craft-live.show { display: block; animation: craft-live-in .5s ease-out; }
.craft-live small { opacity: .7; margin-left: 4px; }
.craft-live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #2ecc71; margin-right: 4px; }
@keyframes craft-live-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ===== Smoothness / touch feel =====
   - renderGrid() rebuilds every tile with innerHTML on each tap, and each new
     tile ran craft-tile-in (fade + scale from 0.85): the whole board flashed
     and "jumped" on every selection. Tiles no longer animate on render.
   - A tile left in :hover after a tap (touch screens keep it) kept its glow
     and scaled icon: hover effects only on devices that really hover.
   - Looping animations and the sparkle burst go to their own layer. */
.craft-tile { animation: none; }
body.craft-theme-doodle .craft-tile.selected .craft-icon-badge,
.craft-burst span,
.craft-result .icon { will-change: transform; }
.craft-burst span { text-shadow: none; }
@media (hover: none) {
  body.craft-theme-doodle .craft-tile:not(.selected):hover { background: transparent; }
  body.craft-theme-doodle .craft-tile:not(.selected):hover .craft-icon-badge,
  body.craft-theme-sketch .craft-tile:not(.selected):hover .craft-icon-badge,
  .craft-tile:not(.selected):hover .craft-icon-badge { transform: none; }
}

/* Settings as a centered modal (like Archive), not a dropdown under the nav. */
body[class] #craft-settings-panel {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 32px);
  max-width: 380px;
  max-height: min(80dvh, 640px);
  overflow-y: auto;
  padding: 36px 6px 10px;
  border: 2px solid #2d1c17;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  z-index: 2147483200;
  transition: none;
}
body[class] #craft-settings-panel.show {
  display: block;
  max-height: min(80dvh, 640px);
  overflow-y: auto;
}
#craft-settings-close { top: 4px; right: 6px; }

/* Status row order: Reset | energy bar | Hint */
body[class] .craft-grid3-section .craft-status-row > .craft-merge-new-btn { flex: 0 0 auto; font-size: 13px; padding: 5px 10px; }
.craft-giveup-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 10px; }
.craft-giveup-btn { color: #b91c1c; }
.craft-gaveup ol { margin: 6px 0 0; padding-left: 20px; text-align: left; }
.craft-gaveup li { margin: 2px 0; }

/* ---- showModal5 (Flagdoku-style summary), h5-* rules ported from Dueldoku's css ---- */
/* Modal */
.h5modal {
  position: fixed;
  top: 80px;
  /* ⬅️ Desplazar debajo de la barra .headline */
  left: 50%;
  transform: translateX(-50%);
  background: white;
  border-radius: 12px;
  padding: 12px;
  z-index: 2147483300;   /* above the grid/ad layers (those go up to 2147483200) */
  width: 90vw;
  max-width: 350px;
  max-height: 480px;
  overflow-y: auto;
  /* ⬅️ permite hacer scroll dentro */
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
  font-family: 'Fira Sans Condensed', sans-serif;
  /* ← aquí */
}
/* Overlay */
.h5-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 2147483290;
}
/* Botón cerrar */
.h5-close-button {
  position: sticky;
  top: 5px;
  right: 5px;
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  z-index: 10;
  float: right;
}
/* Título resumen */
.h5title {
  font-weight: bold;
  font-size: 20px;
}
.h5puzzlenum {
  font-weight: normal;
  font-size: 18px;
}
/* Contenedor de cartas */
.h5-card-wrapper {
  display: flex;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 8px;
  /* separa las dos cartas entre sí */
  margin-top: 16px;
}
.h5-card {
  flex: 1;
  /* que ambas crezcan igual */
  min-width: 0;
  /* importante para evitar desbordes */
  padding: 8px 6px;
  /* ajusta el interior */

  text-align: center;
  background: #fff;
  border: 1px solid #ddd;
  /* borde gris claro */
  border-radius: 10px;
  /* bordes redondeados */
  background-color: #fff;
  /* fondo blanco */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  /* sombra sutil */
}
/* Título de la carta */
.h5-card-title {
  font-weight: bold;
  margin-bottom: 12px;
  font-size: 14px;
}
.h5-card {

  background: #fff;
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  min-width: 130px;
  width: 100%;
  max-width: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.h5-card-title {
  font-weight: bold;
  font-size: 14px;
  margin-bottom: 8px;
  text-align: center;
}
.h5-card-body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 60px;
  margin-bottom: 6px;
  height: 70px;
  /* misma altura para ambas */
}
.h5-card-info {
  font-size: 14px;
  margin-bottom: 8px;
  min-height: 20px;
  text-align: center;
}
.h5-card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: #0047ff;
  font-size: 14px;
  margin-top: 2px;
}
.h5-rating {
  text-align: left;
  font-size: 14px;
  margin: 2px 0 10px 0;
  /* menos espacio arriba y abajo */
  color: #444;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
  /* ← más espacio arriba */
}
.h5-stars i {
  color: #f5c518;
  font-size: 11.25px;
  margin-right: 2px;
  vertical-align: middle;
}
.h5-score {
  font-size: 13px;
  color: #444;
  margin-left: 4px;
}
/* Bloques de RATE y STATS */
.h5-rate-box {
  background: #f9f9f9;
  padding: 16px;
  margin-top: 16px;
  font-family: sans-serif;
  font-size: 14px;
  border: 1px solid #ddd;
  /* borde gris claro */
  border-radius: 10px;
  /* bordes redondeados */
  background-color: #fff;
  /* fondo blanco */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  /* sombra sutil */
}
.h5-rate-box {
  margin-top: 16px;
  padding: 16px;
  background-color: #f9f9f9;
  border-radius: 10px;
  font-family: 'Fira Sans Condensed', sans-serif;
}
.h5-rate-subtitle {
  font-size: 14px;
  margin-bottom: 8px;
  color: #444;
}
.h5-rating-stars {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px; /* Bajamos el espacio hacia el comentario */
  margin-top: 4px; /* Un poco de separación desde el subtítulo */
}
.h5-rating-stars i {
  font-size: 22px;
  cursor: pointer; /* ← esto activa el puntero de mano */
  margin: 0 3px;
  transition: color 0.2s;
  color: gold;
}
.h5-rating-stars i.hovered,
.h5-rating-stars i.selected {
  color: gold;
}
.h5-rate-comment {
    font-size: 16.1px;
  margin-top: 2px;  /* Más espacio desde las estrellas */
  margin-bottom: 2px;
}
.h5-score {
  font-size: 14px;
  color: #444;
}
.h5-rate-comment {
  width: 90%;
  max-width: 300px;
  height: 60px;
  resize: vertical;
  font-family: inherit;
  font-size: 16px;
  transform: scale(0.8125);
  transform-origin: left;
  padding: 8px;
  margin-bottom: 12px;
  border-radius: 6px;
  border: 1px solid #ccc;
}
.h5-rate-submit {
  padding: 6px 12px;
  font-size: 13px;
  background-color: #eee;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
    margin-bottom: 2px;
      font-family: 'Reddit Sans Condensed', sans-serif;
}
.h5-rate-submit.loading {
  position: relative;
  color: transparent;
}
.h5-rate-submit.loading {
  position: relative;
  color: transparent; /* Oculta texto sin cambiar tamaño del botón */
  pointer-events: none;
}
.h5-rate-submit.loading::after {
  content: '· · ·';
  font-size: 32px;
  color: #555;
  display: inline-block;
  animation: glowDots 1.2s infinite ease-in-out;
  letter-spacing: 4px;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.h5-difficulty-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0;
  font-family: inherit;
}
.h5-difficulty-label {
  font-weight: bold;
  font-size: 0.95em;
  color: #333;
}
.h5-difficulty-select {
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid #ccc;
  font-size: 0.95em;
  background-color: #fff;
  color: #333;
  transition: border 0.3s ease;
}
.h5-difficulty-select:focus {
  outline: none;
  border-color: #666;
}
.h5-comments-preview {
  margin-top: 12px;
  font-family: 'Fira Sans Condensed', sans-serif;
}
.h5-comments-title {
  font-weight: 600;
  margin-bottom: 6px;
  font-size: 14px;
}
.h5-comment-bubble {
  background-color: #eef3f8;
  padding: 10px;
  border-radius: 12px;
  margin-bottom: 6px;
  font-size: 13px;
  max-width: 100%;
  position: relative;
  border-left: 4px solid #ccddee;
  overflow-wrap: anywhere;
  word-break: break-word;
  overflow: hidden;
  box-sizing: border-box;
}
.h5-comment-bubble a,
.h5-comment-link {
  color: #1a4fd8;
  text-decoration: underline;
  overflow-wrap: anywhere;
  word-break: break-word;
  pointer-events: auto;
}
.h5-link {
  font-size: 13px;
  color: #007bff;
  text-decoration: none;
}
.h5-link {
  display: inline-block;
  margin-top: 10px;
  color: #0047ff;
  font-weight: 500;
  font-size: 14px;
  text-decoration: none;
}
.h5-admin-reply {
  margin-left: 2em;
  background-color: #e0f0ff; /* azul cielo */
  border-left: 4px solid #3399ff; /* azul moderado */
  font-size: 0.95em;
  padding: 0.5em;
  border-radius: 4px;
}
.h5-rate-submit {
  padding: 6px 12px;
  font-size: 13px;
  background-color: #eee;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
    margin-bottom: 2px;
      font-family: 'Reddit Sans Condensed', sans-serif;
}
.h5-rate-submit.loading {
  position: relative;
  color: transparent;
}
.h5-rate-submit.loading {
  position: relative;
  color: transparent; /* Oculta texto sin cambiar tamaño del botón */
  pointer-events: none;
}
.h5-rate-submit.loading::after {
  content: '· · ·';
  font-size: 32px;
  color: #555;
  display: inline-block;
  animation: glowDots 1.2s infinite ease-in-out;
  letter-spacing: 4px;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.h5-rate-submit {
  font-family: inherit; /* Usa la misma fuente que el resto de tu web */
  font-weight: 600;
  font-size: 14px; /* Un poco más pequeño y sutil */
  color: #ffffff;
  background-color: #4b5563; /* Un gris azulado elegante (Tailwind gray-600) */
  border: 1px solid #374151; /* Borde un poco más oscuro */
  border-radius: 6px; /* Rectangular con bordes muy ligeramente suavizados */
  padding: 10px 20px;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); /* Sombra casi invisible, solo para dar profundidad */
  transition: background-color 0.2s ease, border-color 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: fit-content;
  margin: 10px auto;
}
.h5-rate-submit:hover:not(:disabled) {
  background-color: #374151; /* Se oscurece un poco al pasar el ratón (Tailwind gray-700) */
  border-color: #1f2937;
}
.h5-rate-submit:active:not(:disabled) {
  background-color: #1f2937; /* Aún más oscuro al hacer clic */
}
.h5-rate-submit:disabled {
  background-color: #e5e7eb; /* Gris claro neutro */
  color: #9ca3af; /* Texto gris oscuro */
  border-color: #d1d5db;
  box-shadow: none;
  cursor: not-allowed;
}
/* Archive puzzle nav (Prev / Today / Next) — same idea as Connect's
   showModal5 archive nav, reusing .h5-rate-submit's look per button. */
.h5-archive-nav {
  display: flex;
  gap: 8px;
  margin: 10px auto 0;
  width: 100%;
}
.h5-archive-nav .h5-rate-submit {
  flex: 1;
  width: auto;
  margin: 0;
  padding: 8px 10px;
  font-size: 13px;
}
/* Inventdoku overrides: one full-width card, own rate title, centered summary button */
.h5modal { max-height: 86vh; top: 5vh; color: #2d1c17; text-align: left; }
.h5modal .h5-card { max-width: none; width: 100%; box-sizing: border-box; margin-top: 12px; }
.h5modal .h5-card-body { height: auto; min-height: 40px; flex-direction: column; gap: 2px; }
.h5modal .completed-success { background-color: #e3f9e5; }
.h5modal .completed-fail { background-color: #f1f5f9; }
.h5-recipe { list-style: none; margin: 0; padding: 0; font-size: 13px; text-align: left; }
.h5-recipe li { padding: 2px 0; }
.h5-rate-title { font-weight: bold; font-size: 15px; margin-bottom: 4px; text-align: center; }
.h5-archive-nav { display: flex; gap: 8px; margin: 10px auto 0; width: 100%; }
.h5-archive-nav .h5-rate-submit { flex: 1; width: auto; margin: 0; padding: 9px 10px; font-size: 13px; }
.h5-archive-nav .h5-next-today { opacity: 1; cursor: default; color: #3b2a00; background: linear-gradient(45deg, #ffd700, #ffec8b); border-color: #b8860b; font-variant-numeric: tabular-nums; }
.h5-share-actions{display:flex;flex-direction:column;align-items:stretch;gap:8px;width:100%;margin-top:10px}
.h5-share-primary{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:13px 16px;border:0;border-radius:10px;background:var(--pt-ink,#2d1c17);color:#fff;font:700 16px "Fira Sans Condensed",sans-serif;cursor:pointer;-webkit-tap-highlight-color:transparent}
@media (hover:hover){.h5-share-primary:hover{background:var(--pt-accent,#d6452b)}}
.h5-share-tools{display:flex;align-items:center;justify-content:space-between;gap:8px}
.h5-sa-btns{display:flex;gap:6px}
.h5-share-actions .h5-sa-btn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:36px;padding:0;border-radius:6px;font-size:18px;line-height:1;background:#f3f5f9;border:1px solid #ccc;color:#21332e;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.04);-webkit-tap-highlight-color:transparent}
@media (hover:hover){.h5-share-actions .h5-sa-btn:hover{background:#e8ebf2;border-color:#aab0ba}}
.craft-m5-open { display: block; margin: 10px auto 0; }

/* Science mode strip (takes the archive banner's slot) */
.craft-archive-banner.craft-science-banner { background: #1f7a45; border-color: #176338; padding: 7px 10px; }
.craft-science-banner .craft-archive-banner-title { font-size: 15px; letter-spacing: .06em; font-weight: 700; color: #fff; }
body[class] .craft-science-banner .craft-archive-banner-btn { color: #1f6b3a; }
body[class] .craft-science-banner .craft-archive-banner-btn:hover:not(:disabled) { background: #cfeedb; }
/* Happy accident toggle hidden for now */
.craft-sci-accident { display: none !important; }

/* Translate language list */
.craft-lang-pop { position: fixed; z-index: 2147483647; max-height: 240px; overflow-y: auto; min-width: 150px; background: #fff; color: #222; border: 1px solid #ccc; border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,.22); padding: 4px; display: flex; flex-direction: column; }
.craft-lang-head { font-size: 11px; font-weight: 700; opacity: .65; padding: 4px 8px; }
body[class] .craft-lang-item { border: 0; background: transparent; color: inherit; font: inherit; font-size: 13px; text-align: left; padding: 6px 8px; border-radius: 5px; cursor: pointer; }
body[class] .craft-lang-item:hover { background: rgba(0,0,0,.08); }

/* Daily AI cap reached: Science / Translate look off */
.ai-capped { opacity: .4; }
.craft-lang-blocked { max-width: 220px; white-space: normal; line-height: 1.35; font-weight: 600; opacity: 1; padding: 8px 10px; }

/* ===== showModal5 tabs (same look as Flagdoku's) ===== */
.h5-tabbar{display:flex;gap:4px;position:sticky;top:0;z-index:5;background:var(--pt-paper,#f6f4ef);padding:4px 0 8px;margin:0 0 4px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--pt-rule,#d6d1c6)}
.h5-tabbar::-webkit-scrollbar{display:none}
.h5-tab{position:relative;flex:1 0 auto;display:flex;flex-direction:column;align-items:center;gap:2px;border:1px solid var(--pt-rule,#d6d1c6);background:var(--pt-white,#fff);color:var(--pt-ink-2,#3b3834);font:600 12px "Fira Sans Condensed",sans-serif;padding:7px 10px 6px;border-radius:6px;cursor:pointer;white-space:nowrap}
.h5-tab i{font-size:16px;line-height:1}
.h5-tab:hover{background:var(--pt-paper,#f6f4ef);border-color:var(--pt-muted,#6e695f)}
.h5-tab.active{background:var(--pt-ink,#2d1c17);border-color:var(--pt-ink,#2d1c17);color:#fff}
.h5modal.h5-tabsmode{display:flex;flex-direction:column;top:50px;width:94vw;max-width:440px;height:min(640px,calc(100dvh - 66px));overflow:hidden}
.h5modal.h5-tabsmode>.h5-close-button{position:absolute;top:8px;right:12px;float:none;color:#fff}
.h5modal.h5-tabsmode>*{flex:none}
.h5modal.h5-tabsmode>.h5-tabtrack{flex:1 1 auto;min-height:0}
.h5-tabtrack{display:flex;align-items:stretch;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.h5-tabtrack::-webkit-scrollbar{display:none}
.h5-tabpane{flex:0 0 100%;width:100%;min-width:0;box-sizing:border-box;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:4px 5px;scroll-snap-align:start;scroll-snap-stop:always}
.h5-tabpane>:first-child{margin-top:0!important}
.h5-tabpane .h5-card{max-width:none;min-width:0;width:100%;box-sizing:border-box}
.h5-tabsmode .h5-head{background:var(--pt-ink,#2d1c17);color:#fff;margin:-12px -12px 4px;padding:14px 14px 5px}
.h5-tabsmode .h5-head .h5title,.h5-tabsmode .h5-head .h5puzzlenum,.h5-tabsmode .h5-head .h5-score{color:#fff}
.h5-tabsmode .h5-head .h5-stars i.bi-star-fill,.h5-tabsmode .h5-head .h5-stars i.bi-star-half{color:var(--pt-accent,#d6452b)}
.h5-tabsmode .h5-head .h5-stars i.bi-star{color:rgba(255,255,255,.45)}
.h5-more{display:flex;flex-direction:column;gap:8px;padding-top:6px}
.h5-more .h5-rate-submit{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;box-sizing:border-box;text-decoration:none;margin:0}
.h5modal.h5-tabsmode{background:var(--pt-paper,#f6f4ef);color:var(--pt-ink,#2d1c17)}
.h5-tabsmode .h5-card,.h5-tabsmode .h5-rate-box{background:var(--pt-white,#fff);border-color:var(--pt-rule,#d6d1c6)}
.h5-tabsmode .h5-rate-submit{background:var(--pt-ink,#2d1c17);color:#fff;border-color:var(--pt-ink,#2d1c17)}
.h5-tabsmode .h5-rate-submit:hover:not(:disabled){background:var(--pt-accent,#d6452b);border-color:var(--pt-accent,#d6452b)}
.h5-tabsmode .h5-archive-nav .h5-next-today,.h5-tabsmode .h5-archive-nav .h5-next-today:disabled{opacity:1;color:#3b2a00;background:linear-gradient(45deg,#ffd700,#ffec8b);border-color:#b8860b}
.h5-tries{font-size:20px;line-height:1.3;letter-spacing:2px;text-align:center;margin:6px 0 2px;word-break:break-all}
.h5-tries-note{font-size:12px;color:var(--pt-muted,#6e695f);text-align:center}
.h5-global{padding:6px 2px}
.h5-global-title{font-weight:700;font-size:14px;margin:4px 0 8px}
.h5-global-sum{font-size:13px;color:var(--pt-ink-2,#3b3834);margin-bottom:10px;line-height:1.5}
.h5-dist-row{display:flex;align-items:center;gap:8px;margin:5px 0;font-size:13px}
.h5-dist-label{flex:0 0 74px}
.h5-dist-bar{flex:1;height:18px;background:var(--pt-rule,#d6d1c6);border-radius:4px;overflow:hidden}
.h5-dist-fill{height:100%;background:var(--pt-ink-2,#3b3834);min-width:2px}
.h5-dist-row.mine .h5-dist-fill{background:var(--pt-accent,#d6452b)}
.h5-dist-row.mine .h5-dist-label{font-weight:800}
.h5-dist-n{flex:0 0 58px;text-align:right;color:var(--pt-muted,#6e695f)}
.h5-quip{font-style:italic;text-align:center;font-size:14px;margin:8px 4px 4px;color:var(--pt-ink-2,#3b3834)}
.h5-recipe-emoji{width:1.15em;height:1.15em;vertical-align:-0.2em;margin-right:1px}
.h5-recipe li{line-height:1.7}

/* Recipe table: the three element columns share the same width */
.h5-recipe-table{width:100%;table-layout:fixed;border-collapse:collapse;margin:8px 0 4px;font-size:13px}
.h5-recipe-table col.c-n{width:6%}
.h5-recipe-table col.c-op{width:6%}
.h5-recipe-table col.c-el{width:27.3%}
.h5-recipe-table td{padding:5px 3px;border-top:1px solid var(--pt-rule,#d6d1c6);vertical-align:middle;text-align:left;overflow-wrap:anywhere;line-height:1.3}
.h5-recipe-table tr:first-child td{border-top:0}
.h5-recipe-table td.h5-rt-n,.h5-recipe-table td.h5-rt-op{text-align:center;color:var(--pt-muted,#6e695f)}
.h5-recipe-table td.h5-rt-res{background:rgba(0,0,0,.04)}


/* Daily board: exactly the Science board's red x (same "×" glyph, size and weight). */
body:not(.craft-science-on) #craft-grid .craft-remove-btn {
  top: 0;
  left: 2px;
  padding: 0 3px;
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  color: #e53935;
  opacity: 1;
  transform: none;
  text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0,0,0,.35);
}
body:not(.craft-science-on) #craft-grid .craft-remove-btn .bi { font-size: inherit; font-weight: inherit; line-height: 1; font-family: inherit; }
body:not(.craft-science-on) #craft-grid .craft-remove-btn .bi::before { content: "\00d7"; font-family: inherit; font-weight: inherit; vertical-align: baseline; }
body:not(.craft-science-on) #craft-grid .craft-remove-btn:hover { color: #ff1744; transform: scale(1.15); }
body:not(.craft-science-on) #craft-grid .craft-tile.selected .craft-remove-btn { color: #ff5252; }

/* TEMP: translate (🌐) buttons on the cards are hidden; delete this rule to bring them back. */
.craft-translate-btn { display: none !important; }

/* Science rank card: the energy meter is its own row above the rank, separated by a divider, with a short bar. */
.craft-science-status .craft-science-energy {
  width: auto;
  margin: 0 0 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(128,128,128,.3);
}
.craft-science-status .craft-science-energy .craft-energy-bar { flex: 0 0 80px; height: 10px; }

/* Science ranks modal: a bit smaller (the x closes it). */
.craft-science-modal-card { max-width: 360px; max-height: 80vh; padding: 14px 16px; font-size: 12.5px; }
.craft-science-modal-card h3 { font-size: 16px; }
.craft-science-modal-card h4 { margin: 10px 0 3px; font-size: 12px; }
.craft-science-modal-card td { padding: 2px 4px; }

/* Out of energy: rate reactions to earn more. */
.craft-rate-panel { text-align: center; padding: 4px 2px; }
.craft-rate-head { font-weight: 800; font-size: 15px; margin-bottom: 4px; }
.craft-rate-sub { font-size: 12.5px; opacity: .85; line-height: 1.35; margin-bottom: 8px; }
.craft-rate-card { margin: 6px auto; padding: 10px; border-radius: 10px; background: rgba(128,128,128,.12); max-width: 300px; }
.craft-rate-name { font-size: 16px; }
.craft-rate-from { font-size: 12px; opacity: .7; margin: 2px 0 4px; }
.craft-rate-desc { font-size: 12.5px; line-height: 1.35; margin-bottom: 8px; }
.craft-rate-btns { display: flex; gap: 8px; justify-content: center; }
.craft-rate-progress { font-size: 11.5px; opacity: .7; margin-top: 6px; }
.craft-rate-flash { font-weight: 800; color: #1b7f3b; margin-bottom: 4px; }

/* Science energy: last action ("-3 +2") on the right; the whole meter opens the breakdown. */
.craft-science-energy { cursor: pointer; }
.craft-energy-delta { margin-left: auto; display: inline-flex; gap: 6px; font-size: 13px; }
.craft-energy-delta b.up, .craft-energy-amt.up { color: #1b7f3b; }
.craft-energy-delta b.down, .craft-energy-amt.down { color: #c62828; }
.craft-science-modal-card td.craft-energy-amt { text-align: right; font-variant-numeric: tabular-nums; }

/* TEMP: "More" buttons on the cards are hidden; delete this rule to bring them back. */
#craft-more-btn, #craft-el-more-btn { display: none !important; }

/* Result tab: the modal itself never scrolls, only the combinations list does. */
.h5-tabpane.h5-pane-fixed { overflow: hidden; display: flex; flex-direction: column; }
.h5-tabpane.h5-pane-fixed > .h5-card { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.h5-tabpane.h5-pane-fixed .h5-card-body, .h5-tabpane.h5-pane-fixed .h5-tries, .h5-tabpane.h5-pane-fixed .h5-tries-note, .h5-tabpane.h5-pane-fixed .h5-card-title, .h5-tabpane.h5-pane-fixed .h5-card-info, .h5-tabpane.h5-pane-fixed .h5-share-actions { flex: none; }
.h5-recipe-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
/* Recipe elements stay on one line; longer names (e.g. "Pine Needles") end in an ellipsis. */
.h5-recipe-table td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
.h5-recipe-table td.h5-rt-n, .h5-recipe-table td.h5-rt-op { text-overflow: clip; padding-left: 0; padding-right: 0; }
/* "Combining..." text and its progress bar are centered (the bar has a max-width and used to sit left). */
.craft-grid3-on .craft-result > .craft-progress, .craft-result > .craft-progress { justify-self: center; margin-left: auto; margin-right: auto; }
.craft-result > .craft-loading { text-align: center; }

/* Science mode keeps the normal look (black nav and buttons); only its bar is green. */

/* Grid switch (puzzles <-> Science): blocks fade and rise in together. */
@keyframes craft-swap-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
.craft-swap-in { animation: craft-swap-in .42s cubic-bezier(.22,.8,.3,1) both; }
/* Science goal box ("What do you want to build or do?") is white. */
body.craft-science-on .craft-sci-goal input { background: #fff; color: var(--pt-ink, #2d1c17); }
/* Science mode page: a very light green-white instead of the cream of the puzzles. */
body.craft-theme-periodic.craft-science-on { background: #f7faf7; --pt-paper: #f7faf7; --pt-rule: #cfdcd0; }

/* Science board bottom row: Random element (left) | energy bar | Clear (right). */
.craft-sci-row { gap: 8px !important; }
.craft-sci-row .craft-sci-random-slot, .craft-sci-row .craft-sci-energy-slot { display: flex; align-items: center; }
.craft-sci-row .craft-sci-energy-slot { flex: 1 1 auto; min-width: 0; justify-content: center; }
.craft-sci-row .craft-sci-energy-slot .craft-energy { flex: 1 1 auto; width: 100%; min-width: 0; }
body[class] .craft-sci-row #craft-sci-random { width: auto; margin: 0; padding: 5px 10px; font-size: 13px; white-space: nowrap; border-radius: 6px; background: var(--pt-ink, #2d1c17); color: #fff; border: 1.5px solid var(--pt-ink, #2d1c17); }
body[class] .craft-sci-row #craft-sci-random:hover:not(:disabled) { background: var(--pt-accent, #d6452b); border-color: var(--pt-accent, #d6452b); }
.craft-sci-row #craft-sci-random .bi { display: none; }
/* Science row: same energy bar size as the dailys (150px), Clear and Random the same width. */
.craft-sci-row .craft-sci-energy-slot { flex: 0 1 150px; }
body[class] .craft-sci-row #craft-sci-clear, body[class] .craft-sci-row #craft-sci-random { width: 73px; min-width: 73px; justify-content: center; text-align: center; }

/* TEMP: rank panel (Apprentice / points / rules link) hidden in Science mode; the energy bar replaces it. */
body.craft-science-on .craft-science-status { display: none !important; }
.craft-science-modal-card h4 { margin: 14px 0 4px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }

/* The puzzle / Science board title scrolls away with the page (no sticky header). */
body[class] .craft-tier-header, body[class] .craft-merge-header { position: static; }
.craft-energy-th td { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; opacity: .6; }

/* Science intro modal + the "i" button in the green bar */
.craft-sci-intro-steps { list-style: none; margin: 8px 0 0; padding: 0; }
.craft-sci-intro-steps li { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; border-top: 1px solid var(--pt-rule, #d6d1c6); }
.craft-sci-intro-steps li:first-child { border-top: 0; }
.craft-sci-intro-steps li > i { font-size: 18px; line-height: 1.2; color: #1f7a45; flex: 0 0 22px; text-align: center; }
.craft-sci-intro-steps li b { display: block; font-size: 13px; }
.craft-sci-intro-steps li span { display: block; font-size: 12.5px; line-height: 1.35; opacity: .85; }
body[class] .craft-science-banner .craft-sci-intro-btn { color: #fff; font-size: 16px; padding: 2px 6px; opacity: .85; }
body[class] .craft-science-banner .craft-sci-intro-btn:hover { background: rgba(255,255,255,.18); opacity: 1; }
.craft-sci-intro-steps li > div { flex: 1 1 auto; min-width: 0; }
.craft-sci-intro-steps li span { white-space: normal; overflow: visible; text-overflow: clip; }
.craft-energy-reset { margin: 10px 0 0; padding: 7px 10px; border-radius: 8px; background: rgba(31,122,69,.1); font-size: 13px; text-align: center; font-variant-numeric: tabular-nums; }
.craft-energy-reset b { font-weight: 700; }

/* Bigger names in the grid cells (dailys and Science). */
body[class] .craft-grid3-cell > .craft-tile > span:not(.craft-remove-btn):not(.craft-icon-badge):not(.craft-sci-remove) { font-size: 13px !important; line-height: 1.15; }

/* Created elements: smaller emojis. */
body[class] .craft-free-created-tiles .craft-icon-badge { width: 26px; height: 26px; }
body[class] .craft-free-created-tiles .craft-icon-badge .bi { font-size: 13px; }
body[class] .craft-free-created-tiles .craft-icon-badge .craft-emoji-main { width: 70%; height: 70%; }
body[class] .craft-free-created-tiles .craft-tile { min-height: 62px; }

/* Start over / give up modal: bigger, with Reset as the big easy button and Give up a small secondary one. */
.craft-giveup-card { max-width: 380px; padding: 22px 22px 20px; font-size: 14.5px; }
.craft-giveup-card h3 { font-size: 21px; margin-bottom: 10px; }
.craft-giveup-card p { line-height: 1.45; margin-bottom: 14px; }
.craft-giveup-actions { display: flex; flex-direction: column; align-items: stretch; gap: 12px; margin-top: 6px; }
body[class] .craft-giveup-actions .craft-giveup-main { width: 100%; padding: 14px 16px; font-size: 17px; font-weight: 700; justify-content: center; }
.craft-giveup-sub { display: flex; justify-content: space-between; gap: 10px; }
body[class] .craft-giveup-sub .craft-merge-new-btn { flex: 0 0 auto; padding: 6px 12px; font-size: 13px; }
body[class] .craft-giveup-sub .craft-giveup-btn { background: transparent; color: #b91c1c; border: 1.5px solid #e3b3b3; }
body[class] .craft-giveup-sub #craft-giveup-cancel { background: transparent; color: var(--pt-ink, #2d1c17); border: 1.5px solid var(--pt-rule, #d6d1c6); }

/* Suggestions modal (footer link) */
#craft-suggestions-modal .h5-rate-comment { display: block; width: 100%; box-sizing: border-box; min-height: 96px; margin: 6px 0 10px; padding: 8px 10px; font-size: 16px; border: 1.5px solid var(--pt-rule, #d6d1c6); border-radius: 6px; background: #fff; color: #2d1c17; resize: vertical; }
#craft-suggestions-modal .craft-sugg-send { display: block; width: 100%; margin: 0; padding: 11px; font-size: 15px; }
body[class] #craft-suggestions-modal .h5-rate-comment { width: 100% !important; max-width: none !important; }
body[class] #craft-suggestions-modal .craft-sugg-send { background: var(--pt-ink, #2d1c17); color: #fff; border-color: var(--pt-ink, #2d1c17); }
body[class] #craft-suggestions-modal .craft-sugg-send:disabled { opacity: .6; }
body[class] #craft-suggestions-modal .h5-rate-comment { transform: none !important; zoom: 1 !important; }

/* Rank link in the summary modal */
.h5-tier-link { border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.h5-tier-link .bi { font-size: .85em; opacity: .7; }

/* Propose-a-reaction (out of energy) */
.craft-propose-btn { display: block; margin: 8px auto 0; }
.craft-propose-card { max-width: 400px; }
.craft-propose-pair { display: flex; align-items: flex-end; gap: 6px; }
.craft-propose-pair > div:not(.craft-propose-plus) { flex: 1; min-width: 0; }
.craft-propose-plus { font-weight: 700; font-size: 18px; padding-bottom: 8px; }
.craft-propose-label { display: block; margin: 8px 0 3px; font-size: 12px; font-weight: 700; letter-spacing: .03em; }
.craft-propose-input, .craft-propose-why { display: block; width: 100%; box-sizing: border-box; padding: 8px 10px; font-size: 16px; border: 1.5px solid var(--pt-rule, #d6d1c6); border-radius: 6px; background: #fff; color: #2d1c17; font-family: inherit; }
.craft-propose-why { resize: vertical; min-height: 78px; }
.craft-propose-msg { min-height: 1.2em; margin: 8px 0 4px; font-size: 13px; }
.craft-propose-msg.ok { color: #1f7a45; font-weight: 600; }
.craft-propose-msg.bad { color: #b91c1c; font-weight: 600; }
body[class] .craft-propose-send { display: block; width: 100%; padding: 11px; font-size: 15px; }
body[class] #craft-propose-modal .craft-propose-send { background: var(--pt-ink, #2d1c17); color: #fff; border-color: var(--pt-ink, #2d1c17); }
body[class] #craft-propose-modal .craft-propose-send:disabled { opacity: .6; }
html.craft-boot-science #craft-grid, html.craft-boot-science #craft-result, html.craft-boot-science #craft-history { visibility: hidden; }

/* Global tab: your mistakes as Connect-style dots */
.h5-mymist { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 12px; padding: 9px 12px; border-radius: 8px; background: rgba(128,128,128,.1); font-size: 14px; font-weight: 600; }
.h5-mdots { letter-spacing: 4px; font-size: 28px; line-height: 1; }
.h5-mdots i { font-style: normal; }

/* Global tab: only the % at the end of each bar; your own row stands out. */
.h5-dist-n { flex: 0 0 44px; }
.h5-dist-row { padding: 2px 6px; margin-inline: -6px; border-radius: 6px; }
.h5-dist-row.mine { background: rgba(214,69,43,.12); }
.h5-dist-row.mine .h5-dist-label, .h5-dist-row.mine .h5-dist-n { font-weight: 800; color: var(--pt-ink, #2d1c17); }
/* Native checkboxes/radios in settings follow the brown accent instead of browser black. */
input[type="checkbox"], input[type="radio"] { accent-color: #2d1c17; }
body.craft-theme-periodic { color: #2d1c17; }

/* Global tab mistakes: Connect's bars */
.h5-global-title { text-align: center; font-weight: 900; font-size: 16px; letter-spacing: .04em; margin: 4px 0 10px; }
.h5-global .h5-global-sum { text-align: center; }
.h5-cbar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.h5-cbar-label { width: 24px; text-align: right; font-weight: 700; font-size: 14px; color: var(--pt-muted, #6e695f); }
.h5-cbar-track { flex: 1; height: 16px; border-radius: 8px; background: rgba(128,128,128,.18); overflow: hidden; box-sizing: border-box; }
.h5-cbar-track.mine { border: 2px solid #f97316; }
.h5-cbar-fill { display: block; height: 100%; border-radius: 8px; }
.h5-cbar-pct { width: 40px; font-weight: 900; font-size: 14px; }

/* Science mode: the headline turns from brown to dark green. */
body.craft-theme-periodic .craft-nav { transition: background-color .45s ease; }
body.craft-theme-periodic.craft-science-on .craft-nav { background: #17382a; }

/* Science mode: buttons are dark green too (same green as the headline). */
body[class].craft-science-on :is(.craft-merge-new-btn, .craft-random-btn, .craft-more-btn, .craft-hint-check-btn, .craft-wiki-btn, .craft-vote-btn.on),
body[class].craft-science-on #craft-propose-modal .craft-propose-send,
body[class].craft-science-on #craft-suggestions-modal .craft-sugg-send { background: #17382a; border-color: #17382a; color: #fff; }
body[class].craft-science-on :is(.craft-merge-new-btn, .craft-random-btn, .craft-more-btn, .craft-hint-check-btn, .craft-wiki-btn):hover:not(:disabled) { background: #1f7a45; border-color: #1f7a45; }
body.craft-science-on { accent-color: #17382a; }
body[class].craft-science-on .craft-sci-row #craft-sci-random { background: #17382a; border-color: #17382a; }
body[class].craft-science-on .craft-sci-row #craft-sci-random:hover:not(:disabled) { background: #1f7a45; border-color: #1f7a45; }

/* "How it works" card under the daily buttons (Flagdoku-style) */
.craft-how { position: relative; box-sizing: border-box; width: 100%; margin-top: 12px; padding: 10px 14px 8px; background: #fff; border: 1px solid var(--pt-rule, #d6d1c6); border-radius: 5px; color: var(--pt-ink, #2d1c17); text-align: left; }
.craft-how h2 { margin: 0 0 7px; font-size: 11.5px; letter-spacing: .06em; font-weight: 800; text-transform: uppercase; }
.craft-how ol { list-style: none; margin: 0; padding: 0; }
.craft-how li { display: flex; align-items: center; gap: 9px; font-size: 13px; line-height: 1.3; margin: 0 0 7px; }
.craft-how .n { flex: 0 0 20px; height: 20px; border-radius: 50%; background: #efe6df; color: var(--pt-ink-2, #4d352d); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.craft-how-x { position: absolute; top: 6px; right: 8px; width: 24px; height: 24px; border: 0; background: transparent; color: #8a8079; font-size: 20px; line-height: 1; cursor: pointer; padding: 0; }
.craft-how-more { border: 0; background: none; padding: 0 0 2px; font: inherit; font-size: 12px; text-decoration: underline; color: var(--pt-muted, #6e695f); cursor: pointer; }

/* Save / recover progress modal */
.craft-save-card { max-width: 400px; }
.craft-save-card .craft-merge-new-btn { margin: 4px 0; }
body[class] .craft-save-main { display: block; width: 100%; padding: 11px; font-size: 15px; margin: 10px 0 6px; }
.craft-save-line { display: flex; gap: 8px; flex-wrap: wrap; }
.craft-save-id { margin: 6px 0; padding: 8px 10px; border-radius: 6px; background: rgba(128,128,128,.14); font-weight: 700; word-break: break-all; user-select: all; font-size: 13px; }
.craft-save-auto { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; font-size: 12.5px; }
.craft-save-input { display: block; width: 100%; box-sizing: border-box; padding: 8px 10px; margin: 4px 0 6px; font-size: 16px; border: 1.5px solid var(--pt-rule, #d6d1c6); border-radius: 6px; background: #fff; color: #2d1c17; font-family: inherit; }
.craft-save-msg { min-height: 1.3em; margin-top: 10px; font-size: 13px; }
.craft-save-msg.ok { color: #1f7a45; font-weight: 600; }
.craft-save-msg.bad { color: #b91c1c; font-weight: 600; }
body[class] #craft-save-modal .craft-save-main { background: var(--pt-ink, #2d1c17); border-color: var(--pt-ink, #2d1c17); color: #fff; }
body[class].craft-science-on #craft-save-modal .craft-save-main { background: #17382a; border-color: #17382a; }
body[class].craft-science-on .craft-comment-send-btn { background: #17382a; border-color: #17382a; color: #fff; }
body[class].craft-science-on .craft-comment-send-btn:hover:not(:disabled) { background: #1f7a45; border-color: #1f7a45; }
.craft-comment-sent { margin-top: 8px; font-size: 13px; font-weight: 600; color: #1f7a45; }

/* Result card: Wiki aligned left; Wiki, Send, Clear and Random share one corner radius; Send is as big as Wiki. */
body[class] #craft-sci-random, body[class] .craft-sci-row #craft-sci-random { border-radius: 4px; }
body[class] .craft-result .craft-wiki-btn { border-radius: 4px; }
body[class] .craft-result .craft-btn-row, body[class] .craft-result .craft-more-row { justify-content: flex-start !important; }
body[class] .craft-comment-form { align-items: center; }
body[class] .craft-comment-form .craft-comment-send-btn { flex: 0 0 auto; width: 67px; height: 30px; padding: 0; font-size: 12px; border-radius: 4px; }

/* Propose a reaction: A and B come from the inventory (suggestions list) */
.craft-propose-inv { position: relative; }
.craft-propose-sug { position: absolute; z-index: 5; left: 0; right: 0; top: 100%; margin-top: 2px; max-height: 190px; overflow-y: auto; background: #fff; border: 1.5px solid var(--pt-rule, #d6d1c6); border-radius: 6px; box-shadow: 0 6px 16px rgba(0,0,0,.18); }
.craft-propose-sug-item { display: block; width: 100%; text-align: left; border: 0; border-bottom: 1px solid rgba(128,128,128,.2); background: transparent; padding: 8px 10px; font: inherit; font-size: 14px; color: #2d1c17; cursor: pointer; }
.craft-propose-sug-item:last-child { border-bottom: 0; }
.craft-propose-sug-item:hover { background: rgba(31,122,69,.1); }
.craft-rate-counter { margin: 4px 0 10px; font-size: 15px; text-align: center; }
.craft-rate-counter b { font-variant-numeric: tabular-nums; font-size: 20px; letter-spacing: .04em; }

/* Out of energy: countdown with a bar that shrinks as the refill gets closer */
.craft-rate-counter { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 2px 0 10px; }
.craft-rate-counter-label { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
.craft-rate-counter b { font-size: 30px; line-height: 1.1; font-weight: 700; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.craft-refill-bar { height: 12px; border-radius: 999px; background: rgba(128,128,128,.22); overflow: hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,.18); }
.craft-refill-fill { position: relative; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #17382a, #2ecc71 70%, #8fd14f); transition: width 1s linear; overflow: hidden; }
.craft-refill-fill::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%); transform: translateX(-100%); animation: craft-refill-shine 2.4s ease-in-out infinite; }
@keyframes craft-refill-shine { to { transform: translateX(100%); } }
.craft-refill-scale { display: flex; justify-content: space-between; margin: 3px 2px 12px; font-size: 11px; opacity: .6; }
@media (prefers-reduced-motion: reduce) { .craft-refill-fill::after { animation: none; } .craft-refill-fill { transition: none; } }
.craft-save-status { display: flex; align-items: center; gap: 8px; margin: 10px 0 6px; padding: 9px 12px; border-radius: 8px; background: rgba(31,122,69,.1); color: #1f7a45; font-size: 13px; font-weight: 600; }
.craft-save-status .bi { font-size: 16px; }

/* Science welcome: a bit bigger, airy paragraphs */
.craft-sci-intro-card { max-width: 400px; padding: 20px 22px; font-size: 15px; line-height: 1.5; }
.craft-sci-intro-card h3 { font-size: 21px; margin-bottom: 12px; }
.craft-sci-intro-card p { margin: 0 0 12px; }
body[class] .craft-sci-intro-card .craft-value-close { padding: 9px 22px; font-size: 15px; }

/* How it works card lives below the result area; keep it clear of the ad slots at the bottom. */
.craft-how-host { width: calc(100% - 24px); max-width: 369px; padding: 0 0 70px; box-sizing: border-box; }
.craft-how-host:empty { display: none; }