/* Words: a Bookworm Adventures style battle against a demon. The fight
   is a scene cut into the wall above a tray of stone letter tiles; the
   fight's boons sit to one side, the moves so far to the other. */

.game-words {
  --gem-amethyst: #7d5596;
  --gem-emerald:  #3c7f52;
  --gem-sapphire: #36659c;
  --gem-garnet:   #7f2b36;
  --gem-ruby:     #b03a3a;
  --gem-crystal:  #6f9aa6;
  --gem-diamond:  #a2b4bb;
  --fire:         #c4622d;
  --tile-shade:   rgba(60, 40, 25, 0.25);
}
html.dark .game-words {
  --gem-amethyst: #b58ad0;
  --gem-emerald:  #6cc08a;
  --gem-sapphire: #6f9fe0;
  --gem-garnet:   #d26a78;
  --gem-ruby:     #f06a5e;
  --gem-crystal:  #9fd2de;
  --gem-diamond:  #e6f0f3;
  --fire:         #f08a4a;
  --tile-shade:   rgba(0, 0, 0, 0.55);
}


.wb {
  /* Sized from the window's height, so the whole fight fits on screen:
     --g is the width of the square four-by-four grid,
     --sw the scene beside it. */
  --g: clamp(200px, calc(100svh - 415px), 380px);
  --sw: clamp(340px, min((var(--g) * 1.25 - 45px) * 2.18, 100vw - var(--g) - 5.5rem), 600px);
}

/* ---- Mode tabs and the fight's numbers, above the board ---- */
.wb-top {
  width: min(100% - 3rem, var(--sw) + var(--g) + 2.5rem);
  margin: 0 auto 0.9rem;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.6rem 1.5rem;
  flex-wrap: wrap;
}
.wb-modes { display: flex; }
.wb-mode[hidden] { display: none; }
.wb-mode {
  position: relative;
  padding: 0.35rem 0.8rem 0.5rem;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent);
  background: none;
  border: 0;
  opacity: 0.45;
  cursor: pointer;
}
.wb-mode:first-child { margin-left: -0.8rem; }
.wb-mode::after {
  content: "";
  position: absolute;
  left: 0.8rem; right: 0.8rem; bottom: 0;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transition: transform 0.25s ease;
}
.wb-mode:hover { opacity: 0.8; }
.wb-mode[aria-selected="true"] { opacity: 1; }
.wb-mode[aria-selected="true"]::after { transform: scaleX(1); }
.wb-mode:focus-visible { outline: 1px solid var(--accent); outline-offset: -2px; }
.wb-meta { display: flex; align-items: baseline; gap: 0.3rem 1.4rem; flex-wrap: wrap; justify-content: flex-end; padding-bottom: 0.35rem; }
.wb-meta .game-best-wrap { display: flex; align-items: baseline; gap: 0.5rem; }
#wb-day:empty { display: none; }
#wb-day { white-space: normal; overflow-wrap: anywhere; }
.wb-meta { min-width: 0; }
@media (max-width: 640px) {
  .wb .wb-top { flex-wrap: wrap; }
  .wb-meta { width: 100%; }
  #wb-day { flex-basis: 100%; text-align: right; }
}

/* ---- The fight on the left, the board on the right ---- */
.wb-stage {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 2.5rem;
  padding: 0 1.5rem 1.5rem;
}
.wb-fight { width: var(--sw); min-width: 0; }
.wb-board { width: var(--g); flex: none; }
.wb-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem; }
.wb-chips { display: none; }

.wb-panel { padding: 0.75rem 0.9rem 0.65rem; }
.wb-panel-title {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0.7;
  padding-bottom: 0.45rem;
  margin-bottom: 0.6rem;
  border-bottom: 1px solid var(--border);
}

/* The fight's boons: name, what they favour, what they give */
.wb-boons { list-style: none; display: grid; gap: 0.55rem; }
.wb-boon { position: relative; padding-left: 0.95rem; }
.wb-boon::before {
  content: "";
  position: absolute;
  left: 0; top: 0.5rem;
  width: 5px; height: 5px;
  transform: rotate(45deg);
  background: var(--accent);
  opacity: 0.35;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.wb-boon .n { display: block; font-family: "Jacquard 24", serif; font-size: 1.25rem; line-height: 1.1; color: var(--accent); }
.wb-boon .f { display: block; font-size: 0.88rem; line-height: 1.25; opacity: 0.85; }
.wb-boon .b { font-family: 'EB Garamond', Georgia, serif; font-size: 0.68rem; letter-spacing: 1.5px; text-transform: uppercase; opacity: 0.6; margin-left: 0.5rem; vertical-align: 2px; }
.wb-boon.on::before { opacity: 1; transform: rotate(45deg) scale(1.5); }
.wb-boon.on .n { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* Moves so far, set like the leaderboard rows */
.wb-log { list-style: none; max-height: 6.4rem; overflow-y: auto; counter-reset: mv; }
.wb-log li { display: flex; gap: 0.4rem; align-items: baseline; font-size: 0.95rem; line-height: 1.75; counter-increment: mv; }
.wb-log li::before { content: counter(mv); width: 1.3rem; flex: none; font-size: 0.75rem; opacity: 0.45; }
.wb-log .w { font-variant: small-caps; letter-spacing: 1px; text-transform: lowercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wb-log .wb-word-grade { display: block; font-variant: normal; text-transform: none; letter-spacing: 0; font-size: 0.72rem; line-height: 1.25; opacity: 0.75; }
#wb-buffs-text { white-space: pre-line; }
.wb-buff-history { margin: 0.4rem 0; padding-left: 1.1rem; font-size: 0.8rem; line-height: 1.45; }
#wb-buffs-next { font-size: 0.8rem; opacity: 0.8; }
.wb-log .s { font-style: italic; opacity: 0.55; }
.wb-log .lead { flex: 1; min-width: 0.5rem; border-bottom: 1px dotted var(--border); transform: translateY(-0.3em); }
.wb-log .d { font-family: "Jacquard 24", serif; font-size: 1.1rem; color: var(--accent); }
.wb-log li.empty { display: block; font-style: italic; opacity: 0.5; }
.wb-log li.empty::before { content: none; }

/* ---- The fight: a scene cut into the wall, each side's hearts under it ---- */
.wb-scene { position: relative; border-radius: 4px; overflow: hidden; }
#wb-scene { display: block; width: 100%; aspect-ratio: 170 / 78; }
.wb-floats { position: absolute; inset: 0; pointer-events: none; }
.wb-float {
  position: absolute;
  font-family: "Jacquard 24", serif;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--danger-red);
  white-space: nowrap;
  text-shadow: 0 1px 0 var(--engrave-hi);
  animation: wb-rise 1.2s ease-out forwards;
}
.wb-float.heal { color: var(--gem-emerald); }
.wb-float.note {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 0.78rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--accent);
}
@keyframes wb-rise {
  from { opacity: 0; transform: translate(-50%, 6px); }
  15%  { opacity: 1; }
  to   { opacity: 0; transform: translate(-50%, -30px); }
}
.wb-bars {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  padding: 0.45rem 0.8rem 0.5rem;
  border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}
.wb-who { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name hearts" "meter meter"; align-items: baseline; align-content: start; column-gap: 0.6rem; row-gap: 0.3rem; min-width: 0; }
.wb-foe { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "hearts name" "meter meter"; text-align: right; }
.wb-name { grid-area: name; min-width: 0; overflow: hidden; text-overflow: ellipsis; display: block; font-size: 1.25rem; line-height: 1.1; color: var(--accent); white-space: nowrap; }
.wb-foe .wb-name { white-space: nowrap; }
.wb-foe .wb-life { width: 100%; min-width: 0; }
.wb-life { display: contents; }
.wb-meter {
  grid-area: meter;
  --pip-color: var(--accent);
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 3px;
  flex: 1;
  min-width: 0;
}
/* A heart built of blocks like the figures: lit along the top, shaded at
   the foot, filling a quarter at a time from the left; what is lost shows
   as the heart's shadow. */
.wb-health-pip {
  display: block;
  width: min(100%, 9px);
  aspect-ratio: 1;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 6' shape-rendering='crispEdges'%3E%3Cpath d='M1 0h2v1h1V0h2v1h1v2H6v1H5v1H4v1H3V5H2V4H1V3H0V1h1z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 6' shape-rendering='crispEdges'%3E%3Cpath d='M1 0h2v1h1V0h2v1h1v2H6v1H5v1H4v1H3V5H2V4H1V3H0V1h1z'/%3E%3C/svg%3E") center / contain no-repeat;
  background:
    linear-gradient(to bottom, rgba(255, 250, 235, 0.32) 0 22%, transparent 22% 70%, rgba(20, 10, 10, 0.22) 70%),
    conic-gradient(from 0deg, var(--pip-color) 0 var(--fill), color-mix(in srgb, var(--pip-color) 24%, transparent) var(--fill) 100%);
}
.wb-foe .wb-meter { --pip-color: var(--danger-red); direction: rtl; }
.wb-foe .wb-health-pip { justify-self: end; }
.wb-lore { margin-top: .65rem; padding: .55rem .8rem .65rem; }
.wb-lore summary { display: flex; gap: .5rem; align-items: center; list-style: none; font-size: .75rem; letter-spacing: .5px; color: var(--accent); cursor: pointer; }
.wb-lore summary::-webkit-details-marker { display: none; }
.wb-lore summary:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }
.wb-lore-arrow { display: inline-block; font-size: 1.5rem; line-height: 1; }
.wb-lore[open] .wb-lore-arrow { transform: rotate(90deg); }
.wb-lore p { margin: .45rem 0 0; font-size: 1rem; line-height: 1.4; }
#wb-lore-text { white-space: pre-line; }
.wb-hearts { grid-area: hearts; min-width: 2.6rem; font-size: 1.2rem; color: var(--accent); opacity: 0.85; white-space: nowrap; }
.wb-foe .wb-hearts { text-align: right; }

/* effects sit over the scene, above each side's hearts */
.wb-status { position: absolute; bottom: calc(100% + 0.65rem); list-style: none; display: flex; flex-wrap: wrap; gap: 0.15rem 0.7rem; }
.wb-you .wb-status { left: 0; }
.wb-foe .wb-status { right: 0; justify-content: flex-end; }
.wb-status li { font-size: 0.68rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--s, var(--accent)); }
.wb-status li::before {
  content: "";
  display: inline-block;
  width: 5px; height: 5px;
  margin-right: 0.35rem;
  vertical-align: 1px;
  transform: rotate(45deg);
  background: currentColor;
}

/* ---- The board ---- */

.wb-verdict {
  min-height: 1.6em;
  margin: 0.5rem 0 0.8rem;
  text-align: center;
  font-size: 0.95rem;
  color: var(--accent);
}
.wb-verdict.bad { color: var(--danger-red); font-style: italic; opacity: 0.8; }
.wb-verdict .dmg { font-family: "Jacquard 24", serif; font-size: 1.25rem; margin: 0 0.15rem; }
.wb-verdict .fx { font-size: 0.75rem; letter-spacing: 1.5px; text-transform: uppercase; opacity: 0.65; margin-left: 0.4rem; }
.wb-verdict .grade { font-size: 0.9rem; }

/* One row whatever the length: tiles shrink to fit as the word grows */
.wb-tray {
  --n: 1;
  container-type: inline-size;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.3rem;
  height: calc(2.9rem + 10px + 1.1rem);
  padding: 0.55rem;
  border-radius: 4px;
}
.wb-tray .wb-tile {
  --w: min(2.9rem, (100cqw - (var(--n) - 1) * 0.3rem) / var(--n));
  flex: none;
  width: var(--w);
  font-size: calc(var(--w) * 0.47);
}
.wb-board { position: relative; }   /* the end card covers the whole board */
.wb-grid {
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.6rem;
  padding: 0.9rem;
  border-radius: 4px;
}
.wb-slot { position: relative; aspect-ratio: 1; }

/* A tile: a block of stone standing proud of the tray floor, lit from above */
.wb-tile {
  --face: var(--sill-top);
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-family: 'EB Garamond', Georgia, serif;
  font-size: calc(var(--g) * 0.078);
  font-weight: 500;
  line-height: 1;
  color: var(--accent);
  background: linear-gradient(180deg, var(--sill-arris), var(--face) 45%);
  border: 1px solid var(--sill-front-dk);
  border-radius: 4px;
  box-shadow:
    inset 0 1px 0 var(--sill-arris),
    0 3px 0 var(--sill-front),
    0 4px 7px var(--tile-shade);
  text-shadow: 0 1px 0 var(--engrave-hi);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.wb-tile:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 var(--sill-arris), 0 5px 0 var(--sill-front), 0 7px 10px var(--tile-shade); }
.wb-tile:active { transform: translateY(2px); box-shadow: inset 0 1px 0 var(--sill-arris), 0 1px 0 var(--sill-front), 0 2px 3px var(--tile-shade); }
.wb-tile:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }
.wb-tile .qu { font-size: 0.72em; letter-spacing: -0.5px; }
.wb-tile.in-word { visibility: hidden; }   /* its slot shows as an empty recess */
.wb-tile.fresh { animation: wb-drop 0.35s cubic-bezier(0.3, 1.4, 0.5, 1); }
@keyframes wb-drop { from { opacity: 0; transform: translateY(-14px); } }

/* Letter worth: pips along the foot, one per step above a plain letter */
.wb-pips { position: absolute; bottom: 12%; left: 0; right: 0; display: flex; justify-content: center; gap: 3px; }
.wb-pips i { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: 0.45; }
.wb-tray .wb-pips { bottom: 8%; }

/* Gem tiles: the stone takes the gem's colour, with a facet in the corner */
.wb-tile.gem { --face: color-mix(in srgb, var(--gem) 34%, var(--sill-top)); border-color: color-mix(in srgb, var(--gem) 60%, var(--sill-front-dk)); }
.wb-tile.gem::after {
  content: "";
  position: absolute;
  top: 9%; right: 9%;
  width: 16%; height: 16%;
  background: var(--gem);
  clip-path: polygon(50% 0, 100% 40%, 50% 100%, 0 40%);
}
.wb-tile[data-gem="amethyst"] { --gem: var(--gem-amethyst); }
.wb-tile[data-gem="emerald"]  { --gem: var(--gem-emerald); }
.wb-tile[data-gem="sapphire"] { --gem: var(--gem-sapphire); }
.wb-tile[data-gem="garnet"]   { --gem: var(--gem-garnet); }
.wb-tile[data-gem="ruby"]     { --gem: var(--gem-ruby); }
.wb-tile[data-gem="crystal"]  { --gem: var(--gem-crystal); }
.wb-tile[data-gem="diamond"]  { --gem: var(--gem-diamond); }

/* Spoiled tiles, left by the foe */
.wb-tile.smashed { color: color-mix(in srgb, var(--accent) 45%, transparent); }
.wb-tile.smashed::before {
  content: "";
  position: absolute;
  inset: 18%;
  background:
    linear-gradient(62deg, transparent 47%, var(--sill-front-dk) 48%, var(--sill-front-dk) 51%, transparent 52%),
    linear-gradient(-40deg, transparent 47%, var(--sill-front-dk) 48%, var(--sill-front-dk) 50%, transparent 51%);
  opacity: 0.8;
  pointer-events: none;
}
.wb-tile.locked { cursor: not-allowed; opacity: 0.45; filter: grayscale(0.6); }
.wb-tile.locked:hover, .wb-tile.locked:active { transform: none; }
.wb-tile.locked::before {
  content: "";
  position: absolute;
  left: 8%; right: 8%;
  top: 50%;
  height: 3px;
  margin-top: -1.5px;
  background: var(--accent);
  box-shadow: 0 -0.6rem 0 var(--accent), 0 0.6rem 0 var(--accent);
  opacity: 0.55;
}
.wb-tile.burning { color: var(--fire); border-color: var(--fire); box-shadow: inset 0 1px 0 var(--sill-arris), 0 3px 0 var(--sill-front), 0 0 10px color-mix(in srgb, var(--fire) 55%, transparent); animation: wb-smoulder 1.6s ease-in-out infinite; }
@keyframes wb-smoulder { 50% { box-shadow: inset 0 1px 0 var(--sill-arris), 0 3px 0 var(--sill-front), 0 0 16px color-mix(in srgb, var(--fire) 75%, transparent); } }
.wb-tile .turns { position: absolute; top: 7%; left: 10%; font-size: 0.42em; font-weight: 600; opacity: 0.8; }


.wb-actions { display: flex; justify-content: center; gap: 0.6rem; margin: 1.1rem 0 0.9rem; }
.wb-actions button, .wb-end-actions button {
  font: inherit;
  font-size: 0.8rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 0.35rem 1rem;
  cursor: pointer;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--bg);
}
.wb-actions button.secondary, .wb-end-actions button.secondary { background: transparent; color: var(--accent); border-color: var(--border); }
.wb-actions button:disabled { opacity: 0.4; cursor: default; }
.wb-actions button:focus-visible, .wb-end-actions button:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }
.wb-hint { display: none; }
/* Laid over the grid when a fight ends */
.wb-end {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  background: color-mix(in srgb, var(--cut-floor) 70%, transparent);
  backdrop-filter: blur(2px);
}
.wb-end[hidden] { display: none; }
.wb-end-card {
  max-height: 85svh;
  overflow-y: auto;
  position: relative;
  width: 100%;
  max-width: 320px;
  background: var(--bg);
  border: 1px solid var(--border);
  box-shadow: 0 6px 24px var(--shadow);
  padding: 1.1rem 1.25rem 1rem;
  text-align: center;
}
.wb-end-close {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  width: 2rem;
  height: 2rem;
  font: inherit;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--accent);
  background: none;
  border: 1px solid transparent;
  cursor: pointer;
}
.wb-end-close:hover, .wb-end-close:focus-visible { border-color: var(--border); outline: none; }
/* once the card is closed, the line under the tray keeps the countdown */
.wb-verdict .wb-reopen {
  font: inherit;
  font-size: 0.72rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-left: 0.6rem;
  padding: 0.1rem 0.5rem;
  color: var(--accent);
  background: none;
  border: 1px solid var(--border);
  cursor: pointer;
}
.wb-verdict .wb-reopen:hover, .wb-verdict .wb-reopen:focus-visible { border-color: var(--accent); outline: none; }
/* fingers need more to aim at than a pointer does */
@media (pointer: coarse) {
  .wb-end-close { top: 0.1rem; right: 0.1rem; width: 2.75rem; height: 2.75rem; font-size: 1.5rem; }
  .wb-verdict .wb-reopen { padding: 0.45rem 0.85rem; vertical-align: middle; }
}
.wb-end h2 { font-family: "Jacquard 24", serif; font-weight: 400; font-size: 1.8rem; color: var(--accent); line-height: 1.1; }
#wb-end-text { font-size: 0.95rem; line-height: 1.45; opacity: 0.8; margin: 0.35rem 0 0.8rem; }
.wb-stats { display: flex; justify-content: center; gap: 1.4rem; margin-bottom: 0.9rem; }
.wb-stats:empty { display: none; }
.wb-stats div { display: flex; flex-direction: column-reverse; align-items: center; }
.wb-stats dt { font-size: 0.62rem; letter-spacing: 1.5px; text-transform: uppercase; opacity: 0.55; }
.wb-stats dd { font-family: "Jacquard 24", serif; font-size: 1.5rem; line-height: 1; color: var(--accent); }
.wb-end-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.6rem; }
.wb-next { margin-top: 0.75rem; font-size: 0.72rem; letter-spacing: 1.5px; text-transform: uppercase; opacity: 0.55; }
.wb-next:empty { display: none; }

.wb-relic-panel { width: 100%; max-width: 560px; margin: 0.65rem auto; padding: 0.65rem; }
.wb-panel[hidden], .wb-relic-offer[hidden] { display: none; }
.wb-relic-panel h2 { font-size: 1rem; margin-bottom: 0.4rem; }
.wb-tactics[hidden] { display: none; }
.wb-tactics { padding: .55rem .8rem .65rem; margin-top: .65rem; overflow-wrap: anywhere; }
.wb-tactics summary { cursor: pointer; font-size: 0.85rem; color: var(--accent); line-height: 1.5; }
.wb-tactics summary:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }
.wb-tactics-note { font-size: .75rem; line-height: 1.4; opacity: .8; margin: .45rem 0 0; }
.wb-tactics ul { padding-left: 1.2rem; font-size: 0.85rem; line-height: 1.45; }
.wb-tactics li { margin-top: 0.4rem; }
.wb-relics { list-style: none; display: grid; gap: 0.4rem; padding: 0; }
.wb-relics summary { cursor: pointer; min-height: 30px; }
.wb-relics p, .wb-relic-offer p { font-size: 0.85rem; line-height: 1.45; margin: 0.4rem 0; overflow-wrap: anywhere; }
.wb-relic-vocabulary { max-height: 8rem; overflow-y: auto; }
.wb-relic-offer { text-align: left; margin: 1rem 0; }
.wb-relic-comparison { border: 1px solid var(--border); padding: 0.6rem; margin: 0.6rem 0; }
.wb-relic-panel button, .wb-relic-offer button { font: inherit; color: var(--accent); background: var(--bg); border: 1px solid var(--border); padding: 0.5rem; min-height: 44px; cursor: pointer; margin: 0.2rem; }
.wb-relic-panel button:focus-visible, .wb-relic-offer button:focus-visible { outline: 2px solid var(--accent); }

/* ---- Narrow screens: one column, tight enough to fit a phone. The boons
   become chips under the scene (tap for what counts); the word list goes. */
@media (max-width: 1000px) {
  /* what is left of the window once the headings, the boons and the board's
     own rows are taken, split between the grid and the scene */
  .wb {
    --rem: calc(100svh - 360px);
    --g: clamp(160px, min(100vw - 2rem, var(--rem) * 0.45), 400px);
    --sw: min(100vw - 2rem, 560px, max(100px, var(--rem) - var(--g) * 1.25) * 2.18);
  }
  .wb-top { width: min(100% - 2rem, 560px); margin-bottom: 0.6rem; flex-wrap: nowrap; }
  .wb-meta { gap: 0.2rem 0.9rem; padding-bottom: 0.3rem; }
  .wb-meta .game-best-label { font-size: 0.62rem; letter-spacing: 1.5px; }
  .wb-meta .game-best-score { font-size: 1.05rem; }
  .wb-mode { padding: 0.3rem 0.6rem 0.4rem; font-size: 0.7rem; letter-spacing: 1.5px; }
  .wb-mode:first-child { margin-left: -0.6rem; }
  .wb-stage { flex-direction: column; align-items: center; gap: 0.6rem; padding: 0 1rem 1rem; }
  .wb-panels { display: none; }
  .wb-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.3rem 1rem;
    list-style: none;
    margin-top: 0.45rem;
  }
  .wb-chip {
    position: relative;
    padding-left: 0.8rem;
    font-size: 0.68rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--accent);
    cursor: help;
  }
  .wb-chip::before {
    content: "";
    position: absolute;
    left: 0; top: 0.4em;
    width: 5px; height: 5px;
    transform: rotate(45deg);
    background: currentColor;
    opacity: 0.4;
  }
  .wb-chip.on::before { opacity: 1; }
  .wb-chip .pct { opacity: 0.55; margin-left: 0.3rem; }
  /* the hearts laid over the scene's ground */
  .wb-bars {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    gap: 0.8rem;
    padding: 0.9rem 0.55rem 0.35rem;
    border-top: 0;
    background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--cut-floor) 88%, transparent) 55%);
  }
  .wb-name { font-size: 1rem; }
  .wb-life { gap: 0.4rem; }
  .wb-meter { gap: 2px; }
  .wb-health-pip { width: min(100%, 7px); }
  .wb-lore summary { min-height: 32px; }
  .wb-hearts { min-width: 1.7rem; font-size: 0.95rem; }
  .wb-status { bottom: calc(100% + 0.2rem); }
  .wb-status li { font-size: 0.58rem; }
  .wb-float { font-size: 1.2rem; }
  .wb-board .wb-tray { height: calc(2.3rem + 10px + 0.8rem); padding: 0.4rem; }
  .wb-tray .wb-tile { --w: min(2.3rem, (100cqw - (var(--n) - 1) * 0.3rem) / var(--n)); }
  /* the message line may run wider than a small board */
  .wb-verdict { min-height: 1.4em; margin: 0.3rem calc(var(--g) / 2 - 50vw + 1rem) 0.4rem; font-size: 0.88rem; white-space: normal; overflow-wrap: anywhere; }
  .wb-verdict .fx { display: block; margin-left: 0; line-height: 1.35; }
  .wb-grid { gap: calc(var(--g) * 0.025); padding: calc(var(--g) * 0.03); }
  .wb-actions { margin: 0.55rem 0 0; }
  .wb-actions button { padding: 0.3rem 0.85rem; }
  /* on a phone the end card is laid over the whole screen */
  .wb-end { position: fixed; inset: 0; z-index: 40; padding: 1rem; }
  .wb-end-card { padding: 0.9rem 1rem 0.85rem; }
  .wb-readout { font-size: 0.78rem; }
}

/* ---- Phones: the scene, the word tray, the letters and the buttons always
   fit the window together; the boons and the word list follow below. The
   scene spans the width and gives up sky when the window is short; the
   tiles keep the board's full width and give up height. */
@media (max-width: 640px) {
  .wb {
    --sw: min(100vw - 1rem, 600px);
    --g: min(100vw - 2rem, 440px);
    /* the scene's visible height, at most its whole picture */
    --ch: clamp(100px, (100svh - 300px) * 0.34, (var(--sw) - 10px) * 0.4588);
    /* a row of tiles: what the window has left once everything else is set */
    --th: clamp(30px, (100svh - var(--ch) - 348px) / 4, var(--g) / 4 - 0.75rem);
  }
  .wb-top { width: calc(100% - 2rem); margin-bottom: 0.2rem; }
  .wb-mode { padding-top: 0.15rem; padding-bottom: 0.3rem; }
  .wb-meta { padding-bottom: 0.25rem; }
  .wb-stage { gap: 0.45rem; padding: 0 0.5rem 1rem; }
  .wb-fight { display: contents; }
  .wb-relic-panel { order: 3; width: var(--g); box-sizing: border-box; }
  .wb-scene { width: var(--sw); order: 0; }
  .wb-tactics { width: var(--sw); box-sizing: border-box; order: 1; margin-top: 0; }
  .wb-board { order: 2; }
  /* the field notes and earned buffs wait under the letters */
  .wb-lore, #wb-buffs { width: var(--g); box-sizing: border-box; order: 3; margin-top: 0; }
  .wb-chips { display: none; }
  .wb-panels { display: grid; order: 3; width: var(--g); grid-template-columns: 1fr; gap: 0.6rem; margin-top: 0.6rem; }

  /* sky cropped from the top, never the ground */
  #wb-scene { margin-top: min(0px, var(--ch) - (var(--sw) - 10px) * 0.4588); }
  /* the hearts sit under the scene, so its ground and feet stay in view */
  .wb-bars {
    position: static;
    padding: 0.1rem 0.6rem 0.15rem;
    border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
    background: none;
  }
  .wb-name { font-size: 1rem; }
  .wb-hearts { font-size: 0.95rem; }

  .wb-board .wb-tray { height: calc(2.2rem + 10px + 0.5rem); padding: 0.25rem; }
  .wb-tray .wb-tile { --w: min(2.2rem, (100cqw - (var(--n) - 1) * 0.3rem) / var(--n)); }
  .wb-verdict { min-height: 1.3em; margin: 0.05rem 0 0.1rem; font-size: 0.9rem; line-height: 1.3; }
  .wb-grid { grid-template-rows: repeat(4, var(--th)); gap: 0.4rem; padding: 0.45rem; }
  .wb-slot { aspect-ratio: auto; }
  .wb-grid .wb-tile { aspect-ratio: auto; height: 100%; font-size: min(var(--th) * 0.6, var(--g) * 0.085); }
  .wb-grid .wb-tile { padding-bottom: 5px; }
  .wb-grid .wb-pips { bottom: 4px; }
  .wb-pips i { width: 4px; height: 4px; }
  .wb-actions { margin-top: 0.45rem; gap: 0.5rem; }
  .wb-actions button { flex: 1; padding: 0.45rem 0.5rem; font-size: 0.85rem; }
}

/* ---- What a boon or a tile does, on hover ---- */
.wb-tip {
  position: fixed;
  z-index: 50;
  max-width: 240px;
  padding: 0.55rem 0.7rem 0.5rem;
  background: var(--bg);
  border: 1px solid var(--border);
  box-shadow: 0 6px 20px var(--shadow);
  font-size: 0.88rem;
  line-height: 1.35;
  color: var(--text);
  pointer-events: none;
}
.wb-tip[hidden] { display: none; }
.wb-tip.live { pointer-events: auto; cursor: pointer; }
.wb-tip b { display: block; font-family: "Jacquard 24", serif; font-weight: 400; font-size: 1.15rem; color: var(--accent); }
.wb-tip .k { display: block; font-size: 0.66rem; letter-spacing: 1.5px; text-transform: uppercase; opacity: 0.6; margin-top: 0.35rem; }
.wb-tip .ex { font-variant: small-caps; letter-spacing: 0.5px; }
.wb-tip .more { margin-top: 0.45rem; opacity: 0.45; }
.wb-boon, .wb-chip { cursor: pointer; }

/* ---- Every word a boon counts, on click ---- */
.wb-list {
  width: min(560px, calc(100vw - 32px));
  max-height: min(82vh, 720px);
  margin: auto;
  padding: 0;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  box-shadow: 0 0 0 5px var(--bg), 0 0 0 6px var(--border), 0 18px 50px var(--shadow);
}
.wb-list[open] { display: flex; flex-direction: column; }
.wb-list::backdrop { background: rgba(20, 14, 8, 0.5); }
.wb-list-head {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  padding: 1.1rem 1.2rem 0.4rem 1.4rem;
}
.wb-list-head h2 {
  font-family: "Jacquard 24", serif;
  font-weight: 400;
  font-size: 1.9rem;
  line-height: 1;
  color: var(--accent);
}
.wb-list-count { font-size: 0.68rem; letter-spacing: 1.5px; text-transform: uppercase; opacity: 0.6; }
.wb-list-close {
  margin-left: auto;
  align-self: center;
  width: 2rem;
  height: 2rem;
  font: inherit;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--accent);
  background: none;
  border: 1px solid transparent;
  cursor: pointer;
}
.wb-list-close:hover, .wb-list-close:focus-visible { border-color: var(--border); outline: none; }
.wb-list-fits {
  padding: 0 1.4rem 0.75rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.95rem;
  opacity: 0.85;
}
.wb-list-words {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  list-style: none;
  padding: 0.7rem 1.4rem;
  columns: 8rem;
  column-gap: 1.2rem;
  font-variant: small-caps;
  letter-spacing: 0.5px;
  line-height: 1.45;
}
.wb-list-words li { break-inside: avoid; overflow-wrap: anywhere; }
.wb-list-note {
  padding: 0.55rem 1.4rem 0.8rem;
  border-top: 1px solid var(--border);
  font-size: 0.9rem;
  font-style: italic;
  opacity: 0.65;
}
.wb-list-note[hidden] { display: none; }

/* What gets copied to share, shown as it will read */
.wb-readout {
  margin: 0 auto 0.85rem;
  padding: 0.5rem 0.7rem;
  max-width: 260px;
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 0.82rem;
  line-height: 1.4;
  text-align: left;
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--cut-floor);
  border: 1px solid var(--border);
}
.wb-readout[hidden] { display: none; }
.wb-float { font-size: var(--fs, 1.6rem); }




/* ---- Desktop: a battle screen ----
   Only where words.js sets .desk (a mouse, and a window wider than 1000px);
   phones and tablets keep the layouts above untouched. The fight is a wide
   stage across the top (scene.js widens its world to fill it), with each
   side's hearts floating over the sky and the word being spelt between
   them. Under it, the letters in the middle with their buttons, your kit
   and the words so far to the left, the foe's notes to the right. Every
   size comes from the room words.js measures (--avail, --availw). */
.wb-title { display: none; }

.wb.desk {
  --H: var(--avail, calc(100svh - 190px));
  --SW: min(calc(var(--availw, 100vw) - 3rem), 1640px);
  --gap: clamp(1rem, 1.5vw, 1.6rem);
  --t: clamp(42px, calc(var(--H) * 0.07), 64px);            /* a letter tile */
  --kb: calc(var(--t) * 4.88 + 10px);                         /* the letters' width */
  --bh: calc(var(--t) * 4.88 + 10px + 3.3rem);                /* letters and buttons */
  --sh: min(calc(var(--H) - var(--bh) - 1rem), calc(var(--SW) / 2.18));
  --wt: min(calc(var(--t) * 0.95), 3.1rem);                   /* a letter in the word */
}

/* the line above: modes, where you are, the numbers */
.wb.desk .wb-top {
  width: var(--SW);
  margin: 0 auto 0.75rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 1.5rem;
}
.wb.desk .wb-modes { justify-self: start; }
.wb.desk .wb-meta { justify-self: end; align-items: baseline; flex-wrap: nowrap; gap: 1.5rem; padding: 0; }
.wb.desk #wb-day { display: none; }
.wb.desk .wb-title { display: flex; align-items: center; gap: 0.9rem; min-width: 0; }
.wb.desk .wb-title[hidden] { display: none; }
.wb-title-main { font-size: 1.6rem; line-height: 1; color: var(--accent); white-space: nowrap; }
.wb-title-sub { font-size: 1rem; font-style: italic; color: var(--accent); opacity: 0.7; white-space: nowrap; }
/* the chapter as a path of foes: beaten, this one, the boss at its end */
.wb-path { display: flex; align-items: center; gap: 6px; list-style: none; }
.wb-path:empty { display: none; }
.wb-path li { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--accent) 50%, transparent); }
.wb-path li.done { background: var(--accent); border-color: var(--accent); }
.wb-path li.now { width: 13px; height: 13px; border-color: var(--accent); background: radial-gradient(var(--accent) 0 34%, transparent 40%); }
.wb-path li.boss { border-radius: 1px; transform: rotate(45deg) scale(0.92); border-color: color-mix(in srgb, var(--danger-red) 65%, transparent); }
.wb-path li.boss.done { background: var(--danger-red); border-color: var(--danger-red); }
.wb-path li.boss.now { border-color: var(--danger-red); background: radial-gradient(var(--danger-red) 0 34%, transparent 40%); }

/* the stage across the top; kit | letters | foe beneath */
.wb.desk .wb-stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--kb) minmax(0, 1fr);
  grid-template-rows: var(--sh) var(--bh);
  column-gap: var(--gap);
  row-gap: 1rem;
  align-items: stretch;
  width: var(--SW);
  margin: 0 auto;
  padding: 0 0 1.25rem;
}
.wb.desk .wb-fight,
.wb.desk .wb-panels,
.wb.desk .wb-board,
.wb.desk .wb-well { display: contents; }
.wb.desk .wb-chips { display: none; }

/* the fight, edge to edge */
.wb.desk .wb-scene { grid-column: 1 / -1; grid-row: 1; }
.wb.desk #wb-scene { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }

/* each side's hearts, floating over the sky */
.wb.desk .wb-bars {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 2;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: calc(var(--wt) * 9 + 4rem);
  padding: 0.9rem 1.2rem 2rem;
  border: 0;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--bg) 58%, transparent), transparent);
  pointer-events: none;
}
.wb.desk .wb-who {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "name hearts" "meter meter" "status status";
  align-items: baseline;
  align-content: start;
  column-gap: 0.75rem;
  row-gap: 0.4rem;
  text-shadow: 0 0 6px var(--bg), 0 0 12px var(--bg);
}
.wb.desk .wb-foe { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "hearts name" "meter meter" "status status"; text-align: right; }
.wb.desk .wb-life { display: contents; }
.wb.desk .wb-name { grid-area: name; font-size: 1.7rem; line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wb.desk .wb-foe .wb-name { white-space: nowrap; }
.wb.desk .wb-hearts { grid-area: hearts; min-width: 0; font-size: 1.7rem; line-height: 1; opacity: 1; }
.wb.desk .wb-you .wb-hearts { justify-self: start; }
.wb.desk .wb-foe .wb-hearts { justify-self: end; }
.wb.desk .wb-who.low .wb-hearts { color: var(--danger-red); }
.wb.desk .wb-meter { grid-area: meter; flex: none; grid-template-columns: repeat(10, 14px); gap: 3px 4px; filter: drop-shadow(0 0 1.5px var(--bg)) drop-shadow(0 0 3px color-mix(in srgb, var(--bg) 70%, transparent)); }
.wb.desk .wb-foe .wb-meter { justify-self: end; }
.wb.desk .wb-health-pip { width: 14px; height: 12px; aspect-ratio: auto; }
.wb.desk .wb-status { grid-area: status; position: static; }
.wb.desk .wb-status li { font-size: 0.72rem; }
.wb.desk .wb-float { font-size: var(--fs, 2rem); z-index: 2; }
.wb.desk .wb-floats { z-index: 2; }

/* the word being spelt, floating between them, and what it would do */
.wb.desk .wb-tray {
  grid-column: 1 / -1;
  grid-row: 1;
  align-self: start;
  justify-self: center;
  z-index: 3;
  width: calc(var(--wt) * 9 + 2.4rem);
  height: calc(var(--wt) + 0.6rem);
  margin-top: 1rem;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  border-radius: 0;
}
.wb.desk .wb-tray .wb-tile {
  --w: min(var(--wt), (100cqw - (var(--n) - 1) * 0.3rem) / var(--n));
  font-size: calc(var(--w) * 0.52);
  box-shadow: inset 0 1px 0 var(--sill-arris), 0 3px 0 var(--sill-front), 0 8px 16px var(--tile-shade);
}
.wb.desk .wb-verdict {
  grid-column: 1 / -1;
  grid-row: 1;
  align-self: start;
  justify-self: center;
  z-index: 3;
  max-width: calc(var(--wt) * 9 + 2.4rem);
  min-height: 0;
  margin: calc(var(--wt) + 1.9rem) 0 0;
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  column-gap: 0.3rem;
  text-align: center;
  text-shadow: 0 0 6px var(--bg), 0 0 12px var(--bg), 0 0 18px var(--bg);
}
.wb.desk .wb-verdict .dmg { font-size: 2.1rem; line-height: 1; }
.wb.desk .wb-verdict .fx { flex-basis: 100%; margin: 0.1rem 0 0; }

/* the letters, and their buttons beneath */
.wb.desk .wb-grid {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  grid-template-columns: repeat(4, var(--t));
  gap: calc(var(--t) * 0.16);
  padding: calc(var(--t) * 0.2);
}
.wb.desk .wb-grid .wb-tile { font-size: calc(var(--t) * 0.5); }
.wb.desk .wb-actions {
  grid-column: 2;
  grid-row: 2;
  align-self: end;
  height: 2.7rem;
  margin: 0;
  gap: 0.5rem;
}
.wb.desk .wb-actions button { flex: 1; padding: 0 0.4rem; font-size: 0.78rem; letter-spacing: 1.5px; }
.wb.desk #wb-attack { flex: 1.5; font-size: 0.85rem; letter-spacing: 2px; }

/* the end of a fight, over the whole screen; the foe still seen falling */
.wb.desk .wb-end {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  background: color-mix(in srgb, var(--bg) 30%, transparent);
  backdrop-filter: none;
}
.wb.desk .wb-end-card {
  max-width: 420px;
  max-height: calc(100% - 2rem);
  padding: 1.4rem 1.6rem 1.2rem;
  box-shadow: 0 0 0 4px var(--bg), 0 0 0 5px var(--border), 0 18px 50px var(--shadow);
}
.wb.desk .wb-end h2 { font-size: 2.4rem; }
.wb.desk .wb-stats dd { font-size: 1.9rem; }

/* either side of the letters: your relics over what you have earned; the
   foe's notes and abilities over the words so far */
.wb.desk .wb-lore,
.wb.desk .wb-tactics,
.wb.desk .wb-relic-panel,
.wb.desk .wb-panels > section {
  width: auto;
  max-width: none;
  min-height: 0;
  margin: 0;
  padding: 0.75rem 1rem 0.7rem;
  overflow-y: auto;
}
/* the columns are wide and short, so their panels sit side by side:
   relics beside what you have earned over the words so far; the foe's
   notes beside its abilities */
.wb.desk .wb-relic-panel,
.wb.desk .wb-panels > section:first-child { grid-column: 1; grid-row: 2; justify-self: start; width: calc(57% - 0.45rem); }
.wb.desk #wb-buffs { grid-column: 1; grid-row: 2; justify-self: end; align-self: start; width: calc(43% - 0.45rem); height: calc(44% - 0.45rem); }
.wb.desk .wb-panels > section:last-child { grid-column: 1; grid-row: 2; justify-self: end; align-self: end; width: calc(43% - 0.45rem); height: calc(56% - 0.45rem); }
.wb.desk .wb-lore { grid-column: 3; grid-row: 2; justify-self: start; width: calc(50% - 0.45rem); }
.wb.desk #wb-tactics { grid-column: 3; grid-row: 2; justify-self: end; width: calc(50% - 0.45rem); }
.wb.desk .wb-panel-title,
.wb.desk .wb-tactics > summary,
.wb.desk .wb-lore summary,
.wb.desk .wb-relic-panel h2 {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0.7;
  padding-bottom: 0.4rem;
  margin-bottom: 0.55rem;
  border-bottom: 1px solid var(--border);
  min-height: 0;
}
.wb.desk .wb-lore summary,
.wb.desk .wb-tactics > summary { pointer-events: none; list-style: none; line-height: 1.4; }
.wb.desk .wb-tactics > summary::-webkit-details-marker { display: none; }
.wb.desk .wb-lore-arrow { display: none; }
.wb.desk .wb-lore > p { margin: 0; font-size: 0.98rem; line-height: 1.45; }
.wb.desk .wb-tactics-note { margin: 0 0 0.3rem; }
.wb.desk .wb-tactics ul { padding-left: 1rem; font-size: 0.9rem; }
.wb.desk #wb-buffs p { margin: 0; font-size: 0.86rem; line-height: 1.4; }
.wb.desk .wb-log { max-height: none; }
.wb.desk .wb-boons { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.2rem; }

/* the kit: three sockets side by side, filled or empty */
.wb.desk .wb-relics { gap: 0.35rem; }
.wb-socket {
  display: grid;
  grid-template-columns: 1.8rem minmax(0, 1fr);
  column-gap: 0.7rem;
  align-items: center;
  padding: 0.2rem 0.35rem;
  border: 1px solid transparent;
  border-radius: 3px;
}
.wb-socket-n {
  display: grid;
  place-items: center;
  width: 1.8rem; height: 1.8rem;
  font-family: "Jacquard 24", serif;
  font-size: 1rem;
  color: var(--accent);
  background: var(--cut-floor);
  border: 3px solid;
  border-color: var(--cut-top) var(--cut-right) var(--cut-bottom) var(--cut-left);
  box-shadow: inset 0 5px 7px -5px var(--cut-shade);
}
.wb-socket > div { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 0.3rem; min-width: 0; }
.wb-socket-name { display: block; font-family: "Jacquard 24", serif; font-size: 1.2rem; line-height: 1.1; color: var(--accent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb.desk .wb-socket p { margin: 0; font-size: 0.88rem; line-height: 1.3; opacity: 0.85; }
.wb-socket.empty .wb-socket-n { color: transparent; }
.wb-socket.empty .wb-socket-name { opacity: 0.35; }
.wb-socket[role="button"] { cursor: pointer; }
.wb-socket[role="button"]:hover, .wb-socket[role="button"]:focus-visible { outline: none; border-color: var(--border); }

/* Keep passive traits visible even when the mobile ability list is collapsed. */
#wb-traits-summary { display: block; font-size: .8rem; letter-spacing: 0; text-transform: none; }
#wb-traits-summary:empty { display: none; }
#wb-traits-list details p { font-size: .8rem; margin: .25rem 0; overflow-wrap: anywhere; }

/* Hostile conditions share the existing tile geometry; labels/counters carry
   their meaning for keyboard and screen-reader players. */
.wb-tile.charred { cursor:not-allowed; color:#878078; filter:grayscale(1); opacity:.55; }
.wb-tile.charred:hover, .wb-tile.charred:active { transform:none; }
.wb-tile.plagued { color:#98ba63; border-color:#829a49; background-image:repeating-linear-gradient(135deg,transparent 0 9px,#829a4925 9px 12px); }
.wb-tile.warped { color:#c5a5e5; border-color:#9b73c4; border-style:dashed; }
.wb-tile.cursed { color:#e19fbe; border-color:#b35d83; box-shadow:inset 0 0 12px #b35d8340; }
.wb-tile.plagued .turns::before { content:'P '; }
.wb-tile.warped .turns::before { content:'W '; }
.wb-tile.cursed .turns::before { content:'C '; }
.wb-tile.charred .turns::before { content:'× '; }

/* Portrait battle framework. Desktop and landscape retain their existing layout. */
.wb-portrait-only, .wb-mobile-tools, .wb-mobile-pane { display: none; }
.wb-board[hidden], .wb-mobile-pane[hidden] { display: none !important; }
.wb-mobile-sheet { color: var(--accent); background: var(--bg); border: 3px solid var(--border); border-radius: 8px; width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); margin: auto; padding: 0; }
.wb-mobile-sheet[open] { display: flex; flex-direction: column; }
.wb-mobile-sheet::backdrop { background: rgba(20, 14, 8, .65); }
.wb-mobile-sheet header, .wb-mobile-sheet footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; flex: none; }
.wb-mobile-sheet header { border-bottom: 1px solid var(--border); }
.wb-mobile-sheet h2 { font-size: 1.8rem; line-height: 1.1; }
.wb-mobile-sheet button { font: inherit; font-size: 1rem; min-height: 44px; padding: 8px 14px; color: var(--accent); background: linear-gradient(var(--sill-arris), var(--face)); border: 1px solid var(--border); border-radius: 4px; box-shadow: 0 3px 0 var(--sill-front); cursor: pointer; }
.wb-mobile-sheet button:focus-visible, .wb-mobile-tools button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.wb-mobile-sheet footer { border-top: 1px solid var(--border); padding-bottom: max(16px, env(safe-area-inset-bottom)); }
.wb-mobile-sheet footer button { width: 100%; }
#wb-mobile-sheet-body { overflow-y: auto; overscroll-behavior: contain; padding: 12px 16px; min-height: 0; }
#wb-mobile-sheet-body > * { display: block; width: 100%; margin: 0 0 12px; box-sizing: border-box; }
#wb-mobile-sheet-body .wb-panels { display: grid; grid-template-columns: 1fr; }
#wb-mobile-sheet-body p, #wb-mobile-sheet-body li { font-size: 1rem; line-height: 1.45; }
#wb-mobile-sheet-body summary { font-size: 1rem; letter-spacing: 0; }
@media (max-width: 640px) and (orientation: portrait) {
  .wb { --sw: calc(100vw - 20px); --g: min(100vw - 32px, 380px); --ch: clamp(120px, (100svh - 540px) * .7, 190px); --th: clamp(44px, (100svh - var(--ch) - 414px) / 4, 76px); }
  .wb .wb-top { gap: 3px; margin-bottom: 6px; }
  .wb .wb-modes { margin: auto; }
  .wb .wb-mode { min-height: 36px; font-size: .875rem; }
  .wb .wb-meta { justify-content: space-between; gap: 2px 8px; padding: 0; }
  .wb #wb-day { flex-basis: auto; order: 4; width: 100%; text-align: center; font-size: .875rem; }
  .wb .wb-stage { gap: 8px; padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  .wb .wb-fight > .wb-lore, .wb .wb-fight > .wb-tactics, .wb .wb-fight > .wb-relic-panel, .wb .wb-fight > .wb-panels, .wb .wb-chips { display: none; }
  .wb .wb-scene { overflow: hidden; }
  .wb #wb-scene { height: var(--ch); width: 100%; margin-top: 0; aspect-ratio: auto; }
  .wb .wb-bars { padding: 4px 8px; }
  .wb .wb-board .wb-tray { height: 44px; }
  .wb .wb-verdict { height: 38px; overflow-y: auto; margin: 3px 0; font-size: .875rem; }
  .wb .wb-grid { grid-template-rows: repeat(4, var(--th)); gap: 8px; padding: 8px; }
  .wb .wb-grid .wb-tile { font-size: clamp(24px, var(--th) * .52, 36px); }
  .wb .wb-actions { gap: 8px; margin: 10px 0 0; }
  .wb .wb-actions button { display: block; flex: 1; min-height: 44px; font-size: 1rem; padding: 6px; letter-spacing: 1px; border-radius: 4px; box-shadow: 0 3px 0 var(--sill-front); }
  .wb #wb-scramble { display: block; }
  .wb .wb-mobile-tools { display: grid; order: 2; width: var(--g); grid-template-columns: 1fr 1.5fr 1fr 1fr; gap: 6px; margin-top: 4px; }
  .wb-mobile-tools button { min-width: 0; min-height: 44px; padding: 4px 1px; font-family: inherit; font-size: .875rem; color: var(--accent); background: linear-gradient(var(--sill-arris), var(--face)); border: 1px solid var(--border); border-radius: 4px; box-shadow: inset 0 1px 0 var(--sill-arris), 0 3px 0 var(--sill-front); cursor: pointer; }
  .wb-mobile-tools button:disabled { opacity: .45; }
}

@media (max-width: 640px) and (orientation: portrait) {
  .wb .wb-meta, .wb .wb-meta .game-best-wrap, .wb #wb-day { line-height: 1.2; }
  .wb .wb-meta .game-best-score { line-height: 1.2; }
}

.wb-mobile-header { display: none; }
.wb-mode-choices { display: grid; gap: 16px; padding: 20px; }
.wb-mode-choices button { display: flex; flex-direction: column; gap: 8px; min-height: 100px; text-align: left; padding: 16px 20px; }
.wb-mode-choices button[hidden] { display: none; }
.wb-mode-choices strong { font-size: 2rem; font-weight: normal; }
.wb-mode-choices span { font-size: 1rem; }
.wb-mode-choices button[aria-pressed="true"] { border: 2px solid var(--accent); }
@media (max-width: 640px) and (orientation: portrait) {
  body.words-mobile-active .site-nav, body.words-mobile-active .game-wrap, body.words-mobile-active .site-footer { display: none; }
  body.words-mobile-active main { padding-top: 0; }
  .wb .wb-top { display: none; }
  .wb .wb-mobile-header { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: max(4px, env(safe-area-inset-top)) 16px 4px; margin-bottom: 6px; border-bottom: 1px solid var(--border); }
  .wb-mobile-header > span { font-size: 2rem; line-height: 1; }
  .wb-mobile-header button { min-height: 44px; font: inherit; font-size: 1rem; border: 0; color: var(--accent); background: none; cursor: pointer; }
  #wb-mobile-mode { flex: 1; text-align: left; text-decoration: underline; text-underline-offset: 4px; }
  #wb-mobile-exit { min-width: 44px; font-size: 1.75rem; }
  #wb-mobile-sheet-body .wb-meta { display: flex; width: 100%; }
}

@media (max-width: 640px) and (orientation: portrait) and (max-height: 700px) { .wb { --ch: 88px; } }

/* Words owns its viewport. Only the content panels and dialogs scroll. */
html.words-page-active, body.words-page-active { height: 100dvh; overflow: hidden; overscroll-behavior: none; }
body.words-page-active .site-footer { display: none; }
body.words-page-active main { min-height: 0; }
.wb-tactics, .wb-lore, .wb-panel, .wb-log, .wb-sheet-scroll, #wb-mobile-sheet-body { overscroll-behavior: contain; }
.wb-buffs-launch { display: none; }
.wb.desk .wb-fight > #wb-buffs { display: none; }
.wb.desk .wb-buffs-launch { display: flex; align-items: center; gap: 8px; grid-column: 1; grid-row: 2; align-self: start; justify-self: start; height: 28px; font: inherit; font-size: .9rem; color: var(--accent); border: 0; background: none; cursor: pointer; }
.wb.desk .wb-relic-panel { width: 100%; height: calc(100% - 36px); margin-top: 36px; }
.wb.desk .wb-panels > section { display: none; }
.wb-relics { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.wb-socket { display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 0; padding: 8px 2px; text-align: center; position: relative; }
.wb-socket-n { width: min(100%, 76px); height: auto; aspect-ratio: 1; font-size: 1.6rem; position: relative; border-width: 5px; box-shadow: inset 0 8px 12px -5px var(--cut-shade); }
.wb-socket-n::after { content: ''; position: absolute; left: -8px; right: -8px; bottom: -10px; height: 7px; background: var(--sill-arris); box-shadow: 0 4px 0 var(--sill-front); transform: perspective(60px) rotateX(25deg); }
.wb-socket-name { font-size: 1rem; white-space: normal; overflow-wrap: anywhere; line-height: 1.1; }
.wb-socket p, .wb.desk .wb-socket p { display: block; font-size: .875rem; line-height: 1.3; margin: 0; }
.wb-relic-panel .wb-relic-eye { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; min-height: 40px; min-width: 40px; max-width: 40px; flex: none; border-radius: 50%; padding: 0; margin: 4px auto 0; }
.wb-relic-eye svg { display: block; flex: none; }
.wb-sheet-scroll { padding: 16px 20px; overflow-y: auto; min-height: 0; font-size: 1rem; line-height: 1.5; }
.wb-sheet-scroll > p { margin-bottom: 12px; }
.wb-loadout { width: min(760px,calc(100vw - 24px)); }
#wb-loadout-list { display: grid; grid-template-columns: repeat(auto-fit,minmax(190px,1fr)); gap: 16px; }
.wb-loadout-card { border: 1px solid var(--border); padding: 12px; }
.wb-loadout-card button { width: 100%; }
.wb-loadout-card button[aria-pressed="true"] { border: 2px solid var(--accent); background: var(--cut-floor); }
.wb-loadout-card p { margin: 12px 0; }
.wb-reward-slots { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin: 16px 0; }
.wb-reward-slot { display: flex; flex-direction: column; align-items: center; gap: 12px; min-height: 100px; min-width: 0; }
.wb-reward-slot span { display: block; font-size: .875rem; line-height: 1.4; }
.wb-reward-slot:disabled { opacity: .5; }
.wb-relic-offer h3 { font-size: 1.4rem; }
.wb-end-card { max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; }
@media (max-width:640px) { .wb-reward-slots { gap: 6px; } .wb-reward-slot { padding: 8px 4px; font-size: .9rem; } }

.wb.desk .wb-journal-launch { margin-left: 145px; }
.wb.desk .wb-socket { gap: 8px; padding: 4px 2px; }
.wb.desk .wb-socket-n { width: min(100%,64px); }
.wb.desk .wb-socket p { -webkit-line-clamp: 2; }

.wb-mobile-progress, .wb-preview-compact { display: none; }
.wb-preview-full { display: contents; }
@media (max-width:640px) and (orientation:portrait) {
  .wb-mobile-progress { display: block; margin: 0 0 6px; text-align: center; font-size: .875rem; line-height: 1.3; color: var(--accent); }
  .wb .wb-verdict { display: block; height: 28px; min-height: 28px; max-height: 28px; flex-shrink: 0; box-sizing: border-box; padding: 2px 4px; line-height: 24px; overflow: hidden; white-space: nowrap; }
  .wb .wb-hearts { font-size: 1.4rem; line-height: 1; }
  .wb .wb-preview-full { display: none; }
  .wb .wb-preview-compact { display: inline-block; white-space: nowrap; font-size: 14px; }
  .wb .wb-verdict .dmg { font-size: 1.1rem; line-height: 20px; }
  .wb .wb-verdict .fx { line-height: 16px; letter-spacing: .4px; text-transform: none; opacity: .85; }
  .wb .wb-stage { gap: 4px; }
  .wb .wb-actions { margin-top: 6px; }
  .wb .wb-mobile-tools { margin-top: 0; }
  .wb .wb-grid { grid-template-columns: repeat(4, var(--th)); justify-content: center; }
}

.wb.desk .wb-preview-full { display: none; }
.wb.desk .wb-preview-compact { display: inline-block; white-space: nowrap; font-size: 18px; }
.wb.desk .wb-verdict { width: calc(var(--wt) * 9 + 2.4rem); height: 28px; min-height: 28px; max-height: 28px; flex-wrap: nowrap; overflow: hidden; line-height: 28px; }

/* Battle speech stays inside the scene and never moves the letter rack. */
.wb-speech { position:absolute; z-index:5; top:8px; right:7%; width:max-content; max-width:46%; box-sizing:border-box; padding:8px 26px 9px 11px; background:var(--paper); color:var(--text); border:2px solid var(--accent); border-radius:0; box-shadow:0 3px 10px #0008; font-size:14px; line-height:1.25; }
.wb-speech[hidden] { display:none; }
.wb-speech.you { right:auto; left:7%; }
.wb-speech::after { content:""; position:absolute; right:20px; bottom:-9px; border-width:8px 7px 0; border-style:solid; border-color:var(--accent) transparent transparent; }
.wb-speech.you::after { right:auto; left:20px; }
.wb-speech strong { display:block; font-size:.85em; }
.wb-speech p { margin:3px 0 0; white-space:pre-line; max-height:7em; overflow:auto; }
.wb-speech button { position:absolute; right:4px; top:3px; padding:0 4px; border:0; background:transparent; color:inherit; font-size:18px; cursor:pointer; }
@media(max-width:640px) and (orientation:portrait) {
  .wb-speech { top:3px; right:3%; max-width:65%; padding:4px 23px 5px 7px; font-size:12px; }
  .wb-speech.you { left:3%; }
  .wb-speech p { max-height:4em; }
}

.wb-chapter-story { width:min(760px,calc(100vw - 36px)); max-height:calc(100dvh - 40px); box-sizing:border-box; overflow:auto; padding:clamp(24px,5vw,64px); color:var(--text); background:var(--paper); border:2px solid var(--accent); border-radius:0; box-shadow:0 12px 70px #000b; }
.wb-chapter-story::backdrop { background:#09080be8; }
.wb-chapter-story-label { font:400 20px/1.4 "Jacquard 24",serif; letter-spacing:.04em; color:var(--accent); }
.wb-chapter-story h2 { font:400 clamp(30px,5vw,46px)/1.15 "Jacquard 24",serif; margin:20px 0; }
#wb-chapter-story-text { font:clamp(21px,3vw,28px)/1.5 "EB Garamond",Georgia,serif; white-space:pre-line; }
.wb-chapter-story button { display:block; margin:30px 0 0 auto; padding:12px 24px; font:400 24px/1.3 "Jacquard 24",serif; color:var(--bg); background:var(--accent); border:1px solid var(--accent); border-radius:0; cursor:pointer; }

.wb.desk #wb-chapter-story-launch { margin-left:225px; }

.wb-conversation-speaker { font:400 28px/1.4 "Jacquard 24",serif; color:var(--accent); border-left:3px solid var(--accent); padding-left:12px; margin:25px 0 0; }
.wb-conversation-page { font:16px/1.4 "EB Garamond",Georgia,serif; color:var(--text); opacity:.75; }
#wb-chapter-story-back { float:left; margin-left:0; background:transparent; color:var(--accent); }
#wb-chapter-story-back[hidden] { display:none; }

.wb-loadout.simple-preparation { width:min(480px,calc(100vw - 24px)); }
#wb-loadout-body[hidden], #wb-loadout-choices[hidden] { display:none; }

@media (max-width: 640px) and (orientation: portrait) {
  .wb .wb-board { order: 3; }
  .wb .wb-mobile-pane { display: block; order: 3; width: var(--g); height: calc(4 * var(--th) + 160px); max-height: calc(100svh - var(--ch) - 180px); overflow-y: auto; overscroll-behavior: contain; box-sizing: border-box; padding: 2px 4px 12px; }
  #wb-mobile-pane > * { display: block; width: 100%; margin: 0 0 12px; box-sizing: border-box; }
  #wb-mobile-pane > [hidden] { display: none; }
  #wb-mobile-pane .wb-panels { display: grid; grid-template-columns: 1fr; }
  #wb-mobile-pane p, #wb-mobile-pane li { font-size: 1rem; line-height: 1.45; }
  #wb-mobile-pane summary { font-size: 1rem; letter-spacing: 0; }
  .wb-mobile-tools button[aria-pressed="true"] { border-color: var(--accent); background: var(--face); box-shadow: inset 0 0 0 1px var(--accent); }
}

/* Interface labels stay readable over chapter artwork in either site theme. */
.wb .wb-who { background:var(--paper); color:var(--text); padding:6px 8px; border:1px solid var(--border); text-shadow:none; }
.wb .wb-who .wb-name, .wb .wb-who .wb-hearts { color:var(--text); opacity:1; text-shadow:none; }
.wb .wb-you .wb-meter { --pip-color:var(--text); }
.wb.desk .wb-bars { background:none; padding-bottom:0; }
.wb.desk .wb-speech, .wb.desk .wb-speech.you { left:var(--speech-x,75%); right:auto; transform:translateX(-50%); top:clamp(96px,18%,150px); width:min(360px,35%); max-width:35%; padding:14px 34px 16px 18px; font-size:20px; line-height:1.35; }
.wb.desk .wb-speech strong { font-family:"Jacquard 24",serif; font-weight:400; font-size:24px; }
.wb.desk .wb-speech p { max-height:6em; }
.wb.desk .wb-speech::after, .wb.desk .wb-speech.you::after { left:50%; right:auto; transform:translateX(-50%); }

.wb.desk .wb-who { width:fit-content; max-width:100%; justify-self:start; }
.wb.desk .wb-foe { justify-self:end; }
.wb.desk .wb-verdict { background:var(--paper); color:var(--text); text-shadow:none; border:1px solid var(--border); padding:0 6px; box-sizing:border-box; }
.wb.desk .wb-verdict:empty { background:none; border-color:transparent; }

/* World overlays inherit chapter colors; the rack and menus inherit site colors. */
.wb[data-scene-lighting="day"] .wb-scene,
.wb.desk[data-scene-lighting="day"] .wb-tray,
.wb.desk[data-scene-lighting="day"] .wb-verdict {
  --bg: #f8f1e3;
  --text: #2c2520;
  --accent: #5c4033;
  --paper: #f0e8d5;
  --border: #d4c3a8;
  --shadow: rgba(92, 64, 51, 0.10);
  --danger-red: #7a2e2a;
  --sill-top: #efe3c8;
  --sill-arris: #fbf5e7;
  --sill-front: #d6c3a0;
  --sill-front-dk: #c0ab86;
  --cut-floor: #f1e8d4;
  --cut-top: #d3c1a0;
  --cut-left: #dfd0b2;
  --cut-right: #efe5cf;
  --cut-bottom: #fcf8ee;
  --cut-shade: rgba(60, 40, 25, 0.22);
  --engrave-hi: rgba(255, 252, 244, 0.9);
  --gem-amethyst: #7d5596;
  --gem-emerald: #3c7f52;
  --gem-sapphire: #36659c;
  --gem-garnet: #7f2b36;
  --gem-ruby: #b03a3a;
  --gem-crystal: #6f9aa6;
  --gem-diamond: #a2b4bb;
  --fire: #c4622d;
  --tile-shade: rgba(60, 40, 25, 0.25);
}
.wb[data-scene-lighting="night"] .wb-scene,
.wb.desk[data-scene-lighting="night"] .wb-tray,
.wb.desk[data-scene-lighting="night"] .wb-verdict {
  --bg: #1a1814;
  --text: #d4c3a8;
  --accent: #a67c5d;
  --paper: #242018;
  --border: #3d3028;
  --shadow: rgba(166, 124, 93, 0.15);
  --danger-red: #c85444;
  --sill-top: #322b21;
  --sill-arris: #40372b;
  --sill-front: #1e1914;
  --sill-front-dk: #15110d;
  --cut-floor: #16140f;
  --cut-top: #0a0907;
  --cut-left: #0f0d0a;
  --cut-right: #221e18;
  --cut-bottom: #2b261e;
  --cut-shade: rgba(0, 0, 0, 0.55);
  --engrave-hi: rgba(255, 235, 200, 0.07);
  --gem-amethyst: #b58ad0;
  --gem-emerald: #6cc08a;
  --gem-sapphire: #6f9fe0;
  --gem-garnet: #d26a78;
  --gem-ruby: #f06a5e;
  --gem-crystal: #9fd2de;
  --gem-diamond: #e6f0f3;
  --fire: #f08a4a;
  --tile-shade: rgba(0, 0, 0, 0.55);
}

.wb .wb-who { background:none; border:0; padding:0; }
.wb.desk .wb-verdict { background:none; border:0; padding:0; }
.wb.desk .wb-who, .wb.desk .wb-who .wb-name, .wb.desk .wb-who .wb-hearts, .wb.desk .wb-verdict { text-shadow:0 1px 1px var(--bg), 0 0 3px var(--bg); }

.wb-audio-dialog { background:var(--bg); color:var(--text); border:3px solid var(--line); border-radius:0; padding:24px; }
.wb-audio-dialog label { display:flex; justify-content:space-between; gap:24px; margin:16px 0; }
.wb-audio-dialog h2 { font-family:Jacquard,serif; }

/* Tall illustrated pedestals; shared by desktop and the inline mobile relic tab. */
.wb-socket-n, .wb.desk .wb-socket-n { width: min(100%,128px); height: auto; aspect-ratio: 100 / 148; border-radius: 0; box-sizing: border-box; }
.wb-relic-art { display: block; width: 100%; max-width: 128px; height: auto; aspect-ratio: 100 / 124; object-fit: contain; flex: none; }
.wb-socket-n .wb-relic-art { width: 100%; }
.wb-loadout-card > .wb-relic-art, .wb-relic-offer > .wb-relic-art { margin: 0 auto 12px; }
.wb-reward-slot > .wb-relic-art { width: min(100%,100px); }
.wb.desk .wb-relic-panel { overflow-y: auto; min-height: 0; }
@media (max-width:640px) { .wb-relics { gap: 10px; } .wb-socket-n { max-width: 128px; } }

/* Each utility occupies its own carved tile instead of sharing a grid cell. */
.wb-utility-tiles { display:none; }
.wb.desk .wb-utility-tiles { display:flex; flex-wrap:wrap; gap:6px; grid-column:1; grid-row:2; align-self:start; padding:0 0 8px; }
.wb.desk .wb-utility-tiles .wb-buffs-launch, .wb-utility-tiles .wb-buffs-launch { display:flex; align-items:center; justify-content:center; position:static; margin:0 !important; height:auto; min-height:40px; padding:6px 10px; font-family:'Jacquard 24',serif; font-size:1.05rem; color:var(--accent); background:var(--cut-floor); border:3px solid; border-color:var(--cut-top) var(--cut-right) var(--cut-bottom) var(--cut-left); border-radius:0; }
.wb-utility-tiles [hidden] { display:none !important; }
.wb.desk .wb-relic-panel { margin-top:100px; height:calc(100% - 100px); }
#wb-audio-mute { font:inherit; color:var(--accent); background:var(--cut-floor); border:2px solid var(--border); padding:6px 8px; min-height:36px; border-radius:0; }

/* Shallow toolbar above a fitted, non-scrolling desktop relic shelf. */
.wb.desk .wb-utility-tiles { flex-wrap:nowrap; width:100%; gap:8px; padding:0; height:28px; align-items:stretch; }
.wb.desk .wb-utility-tiles .wb-buffs-launch { flex:1 1 0; min-width:0; min-height:0; height:28px; box-sizing:border-box; padding:2px 4px; border-width:2px; font-size:.88rem; line-height:1; white-space:nowrap; }
.wb.desk .wb-relic-panel { margin-top:34px; height:calc(100% - 34px); overflow:visible; display:flex; flex-direction:column; min-height:0; }
.wb.desk .wb-relics { flex:1; min-height:0; align-items:start; }
.wb.desk .wb-socket { gap:6px; padding:0 2px; }
.wb.desk .wb-socket-n { height:clamp(45px,calc(var(--bh) - 230px),180px); width:auto; max-width:100%; aspect-ratio:100 / 148; }
.wb.desk .wb-socket-n .wb-relic-art { height:100%; width:100%; }
.wb.desk .wb-socket-name { font-size:.95rem; }
.wb.desk .wb-socket p { font-size:.78rem; line-height:1.25; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; }
.wb.desk .wb-relic-panel .wb-relic-eye { width:28px; height:28px; min-width:28px; min-height:28px; max-width:28px; margin:0; }

.wb.desk .wb-utility-tiles > #wb-test-controls { display:none; }
.wb.desk .wb-relic-panel[hidden] { display:none; }
.wb.desk .wb-utility-tiles > #wb-chapter-story-launch { flex-grow:1.5; }

/* Portrait uses Safari's available height; the rack consumes the remaining space. */
@media (max-width: 640px) and (orientation: portrait) {
  .wb { --sw: calc(100vw - 16px); --g: min(calc(100vw - 24px), 440px); --ch: clamp(92px, 17dvh, 160px); height: 100dvh; display: flex; flex-direction: column; box-sizing: border-box; }
  .wb .wb-mobile-header { flex: none; height: calc(48px + env(safe-area-inset-top)); min-height: 0; box-sizing: border-box; padding: env(safe-area-inset-top) 10px 0; margin-bottom: 4px; gap: 8px; }
  .wb-mobile-header > span { font-size: 1.8rem; }
  .wb .wb-stage { flex: 1; min-height: 0; box-sizing: border-box; width: 100%; padding: 0 8px max(8px, env(safe-area-inset-bottom)); gap: 4px; }
  .wb .wb-fight, .wb .wb-mobile-tools { flex: none; }
  .wb .wb-bars { padding: 3px 6px; }
  .wb .wb-who { padding: 2px 4px; row-gap: 2px; }
  .wb .wb-board { flex: 1; min-height: 0; display: grid; grid-template-rows: 20px 40px 24px minmax(0, 1fr) 44px; gap: 4px; }
  .wb .wb-board[hidden], .wb .wb-mobile-pane[hidden] { display: none; }
  .wb-mobile-progress { margin: 0; line-height: 20px; }
  .wb .wb-board .wb-tray { height: 40px; padding: 3px; box-sizing: border-box; }
  .wb .wb-verdict { margin: 0; padding: 0 4px; height: 24px; min-height: 24px; max-height: 24px; line-height: 24px; }
  .wb .wb-well { min-height: 0; height: 100%; display: flex; justify-content: center; align-items: center; }
  .wb .wb-grid { flex: none; height: min(100%, var(--g)); width: auto; max-width: 100%; aspect-ratio: 1; box-sizing: border-box; grid-template: repeat(4, minmax(0, 1fr)) / repeat(4, minmax(0, 1fr)); gap: 6px; padding: 6px; }
  .wb .wb-grid .wb-tile { min-height: 0; font-size: clamp(24px, 7vw, 36px); }
  .wb .wb-actions { margin: 0; height: 44px; gap: 6px; }
  .wb .wb-actions button { min-width: 0; padding: 4px 1px; font-size: .9rem; letter-spacing: .4px; }
  .wb .wb-mobile-pane { flex: 1; min-height: 0; height: auto; max-height: none; padding-bottom: 4px; }
}
@media (max-width: 640px) and (orientation: portrait) and (max-height: 620px) {
  .wb { --ch: 66px; }
  .wb .wb-mobile-header { height: calc(44px + env(safe-area-inset-top)); }
  .wb .wb-stage { gap: 2px; padding-bottom: max(4px, env(safe-area-inset-bottom)); }
  .wb .wb-board { grid-template-rows: 18px 34px 22px minmax(0, 1fr) 44px; gap: 2px; }
  .wb-mobile-progress { font-size: .8rem; line-height: 18px; }
  .wb .wb-board .wb-tray { height: 34px; }
  .wb .wb-verdict { height: 22px; min-height: 22px; max-height: 22px; line-height: 22px; }
}

/* Numeric hearts lead in portrait; a thin proportional rail never grows rows. */
@media (max-width: 640px) and (orientation: portrait) {
  .wb { --ch: calc(clamp(92px, 17dvh, 160px) + 16px); }
  .wb .wb-bars { padding: 0 6px; }
  .wb .wb-who { grid-template-areas: "name hearts"; padding: 0 0 3px; row-gap: 0; }
  .wb .wb-hearts { min-width: 0; font-family: Georgia, serif; font-variant-numeric: tabular-nums; font-size: 1.25rem; font-weight: 600; line-height: 22px; }
  .wb .wb-meter { display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(to right, var(--pip-color) var(--health-fill), var(--border) var(--health-fill)); }
  .wb .wb-foe .wb-meter { background: linear-gradient(to left, var(--pip-color) var(--health-fill), var(--border) var(--health-fill)); }
}
@media (max-width: 640px) and (orientation: portrait) and (max-height: 620px) {
  .wb { --ch: 82px; }
}

/* Compact shared ability glyphs: effects first, authored move name second. */
.wb #wb-tactics-list { list-style:none; padding:0; margin:.35rem 0 0; }
.wb .wb-ability-row { margin:.35rem 0 0; }
.wb-ability-line { display:flex; align-items:center; gap:.5rem; min-width:0; }
.wb-ability-icons { display:flex; flex-wrap:wrap; gap:.2rem; flex-shrink:0; max-width:55%; }
.wb button.wb-ability-icon { display:grid; place-items:center; width:1.8rem; height:1.8rem; min-height:0; padding:.25rem; flex:0 0 1.8rem; border:1px solid var(--border); border-radius:0; color:var(--accent); background:var(--cut-floor); box-shadow:none; }
.wb-ability-icon svg { width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.wb-ability-name { font-weight:500; line-height:1.2; overflow-wrap:anywhere; }
.wb .wb-ability-detail { font-size:.78rem; line-height:1.35; margin:.3rem 0 .4rem; opacity:.85; }
.wb-ability-detail[hidden] { display:none; }
.wb button.wb-ability-icon:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.wb #wb-traits-list { padding-left:1rem; margin:.35rem 0; font-size:.8rem; }
.wb #wb-traits-summary { display:none; }

/* Ability glyphs share the board's effect palette and surface markings. */
.wb button.wb-ability-icon[data-effect="burn"], .wb button.wb-ability-icon[data-effect="burning"] { color:var(--fire); border-color:var(--fire); }
.wb button.wb-ability-icon[data-effect="plague"] { color:#829a49; border-color:#829a49; background-image:repeating-linear-gradient(135deg,transparent 0 9px,#829a4925 9px 12px); }
.wb button.wb-ability-icon[data-effect="warp"] { color:#9b73c4; border-color:#9b73c4; border-style:dashed; }
.wb button.wb-ability-icon[data-effect="curse_tile"] { color:#b35d83; border-color:#b35d83; box-shadow:inset 0 0 6px #b35d8328; }
.wb button.wb-ability-icon[data-effect="smash"] { color:var(--sill-front-dk); }
.wb button.wb-ability-icon[data-effect="poison"] { color:var(--gem-amethyst); }
.wb button.wb-ability-icon[data-effect="freeze"] { color:var(--gem-sapphire); }
.wb button.wb-ability-icon[data-effect="heal"], .wb button.wb-ability-icon[data-effect="regenerate"] { color:var(--gem-emerald); }
.wb button.wb-ability-icon[data-effect="weaken"] { color:var(--gem-garnet); }
.wb button.wb-ability-icon[data-effect="bleeding"] { color:var(--gem-ruby); }
/* Separate overlay keeps gem facets, letters and tile-condition marks intact. */
.wb-gem-glint { position:absolute; inset:2%; overflow:hidden; pointer-events:none; border-radius:inherit; }
.wb-gem-glint::before { content:""; position:absolute; inset:-50%; background:linear-gradient(115deg,transparent 43%,#ffffff66 49%,#ffffff99 50%,transparent 57%); opacity:0; animation:wb-gem-sheen 7.3s ease-in-out infinite; animation-delay:var(--gem-delay,0s); }
.wb-gem-glint::after { content:""; position:absolute; top:8%; right:8%; width:23%; height:23%; background:#fff4d6; clip-path:polygon(50% 0,60% 38%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 38%); opacity:0; animation:wb-gem-sparkle 7.3s ease-in-out infinite; animation-delay:calc(var(--gem-delay,0s) - .45s); }
@keyframes wb-gem-sheen { 0%,78% { opacity:0; transform:translateX(-70%); } 82% { opacity:.55; } 94% { opacity:.55; transform:translateX(70%); } 97%,100% { opacity:0; transform:translateX(70%); } }
@keyframes wb-gem-sparkle { 0%,81%,96%,100% { opacity:0; transform:scale(.15) rotate(0); } 88% { opacity:.9; transform:scale(1) rotate(15deg); } 93% { opacity:.35; transform:scale(.6) rotate(30deg); } }
@media (prefers-reduced-motion:reduce) { .wb-gem-glint::before,.wb-gem-glint::after { animation:none; opacity:0; } }

/* Restore native viewport centering after the site's global margin reset. */
.game-words dialog, .wb dialog { position: fixed; inset: 0; margin: auto; max-width: calc(100vw - 32px); max-height: calc(100dvh - 32px); box-sizing: border-box; }


.wb-audio-dialog { width:min(560px,calc(100vw - 32px)); background:var(--paper); border:3px solid var(--border); box-shadow:0 12px 50px #0008; font-family:"EB Garamond",Georgia,serif; }
.wb-audio-dialog h2 { font:400 32px/1.2 "Jacquard 24",serif; color:var(--accent); margin-bottom:16px; }
.wb-audio-dialog label { align-items:center; flex-wrap:wrap; gap:8px; font-size:20px; }
.wb-audio-dialog select { min-width:0; width:100%; padding:10px 12px; border:2px solid var(--border); border-radius:0; color:var(--text); background:var(--cut-floor); font:inherit; }
.wb-audio-dialog button { padding:9px 14px; margin:8px 8px 0 0; border:2px solid var(--border); border-radius:0; background:linear-gradient(var(--sill-arris),var(--cut-floor)); color:var(--accent); font:400 22px/1.2 "Jacquard 24",serif; cursor:pointer; }
.wb-audio-dialog input[type=range] { appearance:none; width:60%; height:9px; background:var(--cut-floor); border:1px solid var(--border); border-radius:0; cursor:pointer; }
.wb-audio-dialog input[type=range]::-webkit-slider-thumb { appearance:none; width:20px; height:24px; border:2px solid var(--border); border-radius:0; background:var(--accent); }
.wb-audio-dialog input[type=range]::-moz-range-thumb { width:18px; height:22px; border:2px solid var(--border); border-radius:0; background:var(--accent); }
.wb-audio-dialog :is(button,select,input):focus-visible { outline:2px solid var(--accent); outline-offset:3px; }

.wb.desk .wb-utility-tiles > #wb-test-controls { display:block; }

/* Bookworm keeps the high-information fight layout, but borrows the original
   game's warm timber, carved-gold frames and hand-painted board controls. */
.standalone-bookworm .wb,
.standalone-bookworm .wb[data-scene-lighting="day"],
.standalone-bookworm .wb[data-scene-lighting="night"] {
  --bg: #241406;
  --text: #f3e6c6;
  --accent: #c9a23f;
  --paper: #f0dca6;
  --border: #8a6a24;
  --shadow: rgba(0, 0, 0, 0.5);
  --sill-top: #ecd9a4;
  --sill-arris: #f8edd0;
  --sill-front: #a37c2a;
  --sill-front-dk: #83611e;
  --cut-floor: #efdca8;
  --cut-top: #c2972f;
  --cut-left: #d8b23e;
  --cut-right: #ecdbae;
  --cut-bottom: #f9eecd;
  --cut-shade: rgba(24, 10, 2, 0.42);
  --engrave-hi: rgba(255, 248, 220, 0.85);
  --gem-amethyst: #6b3fa0;
  --gem-emerald: #35953f;
  --gem-sapphire: #2f6fc0;
  --gem-garnet: #b03b86;
  --gem-ruby: #cf3a30;
  --gem-crystal: #58c0c0;
  --gem-diamond: #9fd9d9;
  --fire: #ef8f3a;
  --tile-shade: rgba(10, 4, 0, 0.45);
}
.standalone-bookworm .wb :is(.wb-scene, .wb-tactics, .wb-lore, .wb-panel, .wb-relic-panel, .wb-tray, .wb-well .wb-grid, .wb-mobile-sheet) {
  border-color: #8a6a24;
  box-shadow: inset 0 0 0 2px #e8cf8e, 0 10px 26px rgba(0,0,0,.55);
}
.standalone-bookworm .wb .wb-who { color: #3a2405; text-shadow: 0 1px 0 #fff7d9aa; }
.standalone-bookworm .wb .wb-mode { color: #efd170; }
.standalone-bookworm .wb .wb-tile {
  color: #3a2410;
  background: linear-gradient(#fceec9, #efdfae 55%, #e6d296 56%, #f3e6bd);
  border-color: #83611e;
  box-shadow: inset 0 1px 0 #fff6dd, 0 4px 0 #8a6a24, 0 6px 10px var(--tile-shade);
}
.standalone-bookworm .wb .wb-tile.gem { color: color-mix(in srgb, var(--gem) 72%, #140a02); }
.standalone-bookworm .wb .wb-tile:hover { box-shadow: inset 0 1px 0 #fff6dd, 0 5px 0 #8a6a24, 0 8px 12px var(--tile-shade); }
.standalone-bookworm .wb .wb-tile:active { box-shadow: inset 0 1px 0 #fff6dd, 0 1px 0 #8a6a24, 0 2px 4px var(--tile-shade); }
.standalone-bookworm .wb .wb-health-pip {
  background-image: radial-gradient(circle at 50% 35%, #ff6a5e 0 38%, #c01a12 39% 100%);
  border-color: #4a0806;
  box-shadow: 0 1px 1px #0007, inset 0 1px 1px #ffb3a4aa;
}
.standalone-bookworm .wb .wb-you .wb-meter { --pip-color: #c01a12; }
.standalone-bookworm .wb :is(#wb-clear, #wb-back) {
  font-family: 'Jacquard 24', serif;
  font-size: .95rem; text-transform: none; letter-spacing: .5px; color: #3a2405;
  background: linear-gradient(#fceec9, #efdfae 60%, #e6d296 61%, #f3e6bd);
  border: 1px solid #83611e; box-shadow: inset 0 1px 0 #fff6dd, 0 3px 0 #8a6a24;
}
.standalone-bookworm .wb :is(#wb-clear, #wb-back):not(:disabled):active { transform: translateY(2px); box-shadow: inset 0 1px 0 #fff6dd, 0 1px 0 #8a6a24; }