:root {
  --flip-time: 0.9s;  /* how long one tile takes to turn over */
  --flip-gap: 0.4s;   /* delay between one tile starting and the next */
  --bg: #13201a;
  --panel: #1d2e25;
  --parchment: #e9dcbc;
  --ink: #f3ead4;
  --muted: #a8b29f;
  --gold: #c9a24a;
  --hit: #3f8f4f;
  --near: #c7822b;
  --miss: #8e3a32;
  --line: #2f4538;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: "EB Garamond", Georgia, serif;
  font-size: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Background art (images/bg.jpg, watermarks cropped by tools/make-bg.py) on a fixed layer:
   background-attachment: fixed is broken on iOS, a fixed pseudo-element isn't.
   The green wash keeps text and tiles readable over the bright forest. */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(13, 24, 18, 0.55) 0%, rgba(13, 24, 18, 0.72) 45%, rgba(13, 24, 18, 0.9) 100%),
    url("../images/bg.jpg") center 35% / cover no-repeat,
    var(--bg);
}

header { text-align: center; padding: 28px 16px 8px; }
h1 {
  font-family: "Cinzel", serif;
  font-weight: 800;
  font-size: clamp(2.4rem, 8vw, 3.6rem);
  letter-spacing: 0.08em;
  margin: 0;
  color: var(--gold);
  text-shadow: 0 2px 0 #000;
}
/* Luca's logo artwork (images/logo.png, made from SOULFRAMEDLE-LOG.png by tools/make-logo.py). */
h1.logo { line-height: 0; }
h1.logo img {
  width: min(560px, 100%); height: auto;
  filter: drop-shadow(0 4px 0 #000);
}
.tag { margin: 4px 0 2px; color: var(--muted); font-style: italic; }
.patch-line {
  margin: 0 0 14px; font: 600 0.72rem "Cinzel", serif; letter-spacing: 0.08em;
  color: var(--gold); opacity: 0.85; text-shadow: 1px 1px 0 #000;
}
.patch-line:empty { display: none; }

/* Characters / Weapons: the game switch, using Luca's icons (images/icon-characters.png made by tools/make-icon.py, images/WeaponsIcon.png). */
.cats { display: flex; justify-content: center; gap: 26px; margin: 14px 0 6px; }
.cat {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 0; background: none; border: 0; color: var(--muted); cursor: pointer;
}
.cat:hover { filter: none; }
.cat-icon {
  width: 72px; height: 72px; object-fit: contain;
  filter: grayscale(0.85) brightness(0.75) drop-shadow(0 3px 0 #000);
  transition: transform 0.2s ease, filter 0.25s ease;
}
.cat-name { font: 800 0.8rem "Cinzel", serif; letter-spacing: 0.06em; text-shadow: 1px 1px 0 #000; }
.cat.active .cat-icon {
  transform: scale(1.12);
  filter: drop-shadow(0 0 10px rgba(201, 162, 74, 0.85)) drop-shadow(0 3px 0 #000);
}
.cat.active .cat-name { color: var(--gold); }
@media (hover: hover) {
  .cat:not(.active):hover .cat-icon { transform: scale(1.06); filter: grayscale(0.3) drop-shadow(0 3px 0 #000); }
  .cat:not(.active):hover .cat-name { color: var(--ink); }
}
.cat:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 10px; }

main { width: 100%; max-width: 960px; padding: 0 16px 24px; }
.status { text-align: center; color: var(--muted); margin: 10px 0; }
.status:empty { display: none; }

form { display: flex; gap: 8px; max-width: 480px; margin: 0 auto 16px; }
.input-wrap { position: relative; flex: 1; }
input {
  width: 100%; padding: 12px 14px; font: inherit; color: #1a140a;
  background: var(--parchment); border: 2px solid var(--gold); border-radius: 8px;
}
input:focus { outline: 3px solid rgba(201, 162, 74, 0.4); }
button {
  font: 600 1rem "Cinzel", serif; padding: 10px 18px; cursor: pointer;
  background: var(--gold); color: #1a140a; border: 0; border-radius: 8px;
}
button:hover { filter: brightness(1.1); }

#suggestions {
  position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 4px);
  list-style: none; margin: 0; padding: 4px; background: var(--panel);
  border: 1px solid var(--gold); border-radius: 8px; max-height: 320px; overflow-y: auto;
}
#suggestions li { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 6px; cursor: pointer; }
#suggestions li.active, #suggestions li:hover { background: #2c4536; }

.mono {
  display: inline-grid; place-items: center; flex: none;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--parchment); color: #2a2010;
  font: 800 0.75rem "Cinzel", serif; border: 2px solid var(--gold);
}

.portrait {
  flex: none; width: 30px; height: 30px; border-radius: 50%; object-fit: cover;
  background: var(--parchment); border: 2px solid var(--gold);
}
.portrait.lg, .mono.lg { width: 44px; height: 44px; }
.portrait.xl, .mono.xl { width: 96px; height: 96px; font-size: 1.6rem; border-width: 3px; }
/* Weapon icons are transparent cut-outs: show them whole on a dark plate instead of cropping to a circle. */
.result-frame.fit-contain {
  width: 112px; height: 112px; border-radius: 12px; border: 3px solid var(--gold);
  background: radial-gradient(circle at 50% 40%, #f3ead4, #c9b58a); padding: 6px;
}
.result-frame.fit-contain .portrait.xl { width: 100%; height: 100%; border: 0; border-radius: 0; background: none; }
.portrait.fit-contain { object-fit: contain; background: radial-gradient(circle, #f3ead4, #c9b58a); border-radius: 6px; }
#result-portrait { display: flex; justify-content: center; margin-bottom: 8px; }

/* ---------- Hints (Fightdle-style icon row under the mode toggle) ---------- */
.hints { margin-top: 18px; }
.hints-title {
  margin: 0 0 8px; font: 800 0.75rem "Cinzel", serif; letter-spacing: 0.2em; color: var(--gold);
}
.hint-buttons { display: flex; justify-content: center; gap: 28px; }
.hint-btn {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  width: 96px; padding: 0; background: none; border: 0; color: var(--ink);
  font: inherit; cursor: pointer;
}
.hint-btn:hover { filter: none; }
.hint-icon {
  width: 72px; height: 72px; border-radius: 50%;
  filter: drop-shadow(0 3px 0 #000);
  transition: transform 0.2s ease, opacity 0.3s ease, filter 0.3s ease;
}
.hint-name { font: 700 0.85rem "Cinzel", serif; letter-spacing: 0.04em; }
.hint-count { font-size: 0.8rem; color: var(--muted); text-shadow: 1px 1px 0 #000; }

@media (hover: hover) {
  .hint-btn:not(.locked):hover .hint-icon { transform: scale(1.1); }
}
.hint-btn.locked { cursor: not-allowed; }
.hint-btn.locked .hint-icon { opacity: 0.6; filter: grayscale(1) drop-shadow(0 3px 0 #000); }
.hint-btn.locked .hint-name { color: var(--muted); }
.hint-btn:not(.locked):not(.used) .hint-count { color: var(--gold); }
.hint-btn.active .hint-icon { filter: drop-shadow(0 0 10px rgba(201, 162, 74, 0.9)) drop-shadow(0 3px 0 #000); }
.hint-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 12px; }

.hint-btn.fresh .hint-icon { animation: hint-unlock 0.9s ease; }
@keyframes hint-unlock {
  0% { transform: scale(1); }
  35% { transform: scale(1.25) rotate(-8deg); filter: drop-shadow(0 0 14px #c9a24a) drop-shadow(0 3px 0 #000); }
  70% { transform: scale(0.95) rotate(4deg); }
  100% { transform: scale(1); }
}
.hint-btn.nope .hint-icon { animation: shake 0.35s; }

.hint-panel {
  max-width: 520px; margin: 14px auto 0; padding: 12px 16px; text-align: center;
  background: var(--parchment); color: #2a2010;
  border: 2px solid var(--gold); border-radius: 8px;
  box-shadow: 0 0 12px rgba(201, 162, 74, 0.5);
  animation: hint-drop 0.25s ease;
}
@keyframes hint-drop { from { opacity: 0; transform: translateY(-6px); } }
.hint-label { font: 800 0.75rem "Cinzel", serif; letter-spacing: 0.1em; text-transform: uppercase; color: #6b5420; }
.hint-journal { margin: 4px 0 0; font-style: italic; }
.hint-glimpse { display: flex; justify-content: center; margin-top: 8px; }
.glimpse-frame.fit-contain { background: radial-gradient(circle, #2c4536, #13201a); padding: 8px; }
/* Weapons get a silhouette instead of a blur: the shape, in parchment, with no detail. */
.glimpse-frame.fit-contain .portrait.glimpse {
  filter: brightness(0) invert(0.9) sepia(0.4) drop-shadow(0 0 6px rgba(201, 162, 74, 0.6));
  transform: none; background: none;
}
.glimpse-frame {
  width: 120px; height: 120px; overflow: hidden;
  border-radius: 12px; border: 3px solid var(--gold); background: #1d2e25;
}
.portrait.glimpse, .mono.glimpse {
  width: 100%; height: 100%; border: 0; border-radius: 0; font-size: 2.4rem;
}
/* Blurred and drained of colour, so it's a hint and not the answer. Scaled up so the blur doesn't fade at the edges. */
.portrait.glimpse { filter: blur(4px) grayscale(0.6) brightness(0.9); transform: scale(1.2); }

.board-scroll { overflow-x: auto; padding-bottom: 6px; }
.board { --tile: 80px; --gap: 8px; width: max-content; margin: 0 auto; }
.board-head, .guess-row {
  display: grid;
  grid-template-columns: repeat(6, var(--tile)); /* game.js sets the real count per mode */
  gap: var(--gap);
}
.board-head { margin-bottom: 8px; }
.board-head div {
  display: flex; align-items: flex-end; justify-content: center; text-align: center;
  height: 34px; padding-bottom: 4px; border-bottom: 2px solid var(--ink);
  font: 600 0.72rem "Cinzel", serif; color: var(--ink); letter-spacing: 0.03em;
}
.guess-row { margin-bottom: var(--gap); perspective: 600px; }

/* Tiles: Fightdle's hint-box, exact squares with the cracked-texture backgrounds. */
.tile {
  position: relative;
  width: var(--tile); height: var(--tile);
  display: flex; align-items: center; justify-content: center;
  padding: 5px; overflow: hidden;
  text-align: center; line-height: 1.1;
  font: 700 0.8rem "EB Garamond", Georgia, serif; color: #fff;
  overflow-wrap: anywhere;
  text-shadow: 1px 1px 2px #000;
  background-size: cover; background-position: center;
  border: 1px solid #fff;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
  transform: rotateY(90deg); opacity: 0;
  /* Slow, one-at-a-time flip. game.js reads --flip-time and --flip-gap (in seconds) to time the win card. */
  transition: transform var(--flip-time) ease, opacity var(--flip-time) ease;
  transition-delay: calc(var(--i, 0) * var(--flip-gap));
  backface-visibility: hidden;
}
.tile.revealed { transform: rotateY(0deg); opacity: 1; }
.tile.instant { transition: none; }

.tile-right { background-image: url("../images/tiles/RIGHT.png"); }
.tile-partial { background-image: url("../images/tiles/PARTIAL.png"); }
.tile-wrong { background-image: url("../images/tiles/WRONG.png"); }
.tile-more { background-image: url("../images/tiles/MORE.png"); }
.tile-less { background-image: url("../images/tiles/LESS.png"); }
.tile-more span, .tile-less span { font-size: 1.05rem; }
.tile-portrait.fit-contain { background-image: none; background: radial-gradient(circle at 50% 40%, #f3ead4, #c9b58a); }
.tile-portrait.fit-contain.tile-right { box-shadow: inset 0 0 0 3px var(--hit); }
.tile-portrait.fit-contain .portrait.fill { padding: 6px 6px 18px; background: none; }

/* First tile: the portrait fills the square, name on a strip along the bottom. */
.tile-portrait { padding: 0; }
.portrait.fill, .mono.fill {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0; border-radius: 0; font-size: 1.6rem;
}
.tile-portrait .tile-name {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2px 3px; font-size: 0.68rem; line-height: 1.05;
  background: rgba(0, 0, 0, 0.6);
}

.legend { display: flex; justify-content: center; gap: 18px; color: var(--muted); font-size: 0.9rem; margin: 12px 0; }
.sq { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.sq { border: 1px solid #fff; background-size: cover; }
.sq.hit { background-image: url("../images/tiles/RIGHT.png"); }
.sq.near { background-image: url("../images/tiles/PARTIAL.png"); }
.sq.miss { background-image: url("../images/tiles/WRONG.png"); }
.sq.more { background-image: url("../images/tiles/MORE.png"); }

.result { text-align: center; background: var(--panel); border: 1px solid var(--gold); border-radius: 10px; padding: 18px; margin: 16px auto; max-width: 520px; }
.result h2 { font-family: "Cinzel", serif; color: var(--gold); margin: 0 0 6px; }
.result a { color: var(--gold); }
.result-actions { display: flex; justify-content: center; gap: 10px; margin-top: 12px; }

footer { margin-top: auto; padding: 18px 16px; color: var(--muted); font-size: 0.85rem; text-align: center; }
footer a { color: var(--gold); }