/* SIGIL MATCH — same parchment-and-candlelight language as Trivia / Who Said It. */

html { height: auto; overflow-y: auto; }
.sm-body {
  display: flex; flex-direction: column; min-height: 100vh; height: auto; overflow: visible;
  color: #ede4d0;
  background:
    radial-gradient(900px 420px at 15% 0%, rgba(58, 110, 165, 0.18), transparent),
    radial-gradient(900px 420px at 85% 0%, rgba(165, 44, 44, 0.18), transparent),
    radial-gradient(700px 500px at 50% 100%, rgba(201, 161, 90, 0.12), transparent),
    linear-gradient(180deg, #191411, #100d0b);
}
.sm-stage { flex: 1; max-width: 780px; width: 100%; margin: 0 auto; padding: 40px 20px 90px; box-sizing: border-box; }
.sm-plain { flex: 1; max-width: 780px; width: 100%; margin: 0 auto; padding: 40px 20px 20px; box-sizing: border-box; }

/* ================= the hall =================
   Three paintings of one great hall (assets/hall1-3.webp): shuttered and cold,
   torchlit, then blazing for a feast. Which one shows is driven by how many
   banners you have named, and --glow warms it continuously in between.

   The art is 1448 x 1086. Two regions are pinned to it: the RAFTERS across the
   top, where the banners you have named are hung, and the FLOOR in the middle,
   where the question is asked. The frame clips top and bottom on a short window
   rather than shrinking the words. */
.sm-shell {
  --glow: 0;
  position: relative; display: flex; flex-direction: column; align-items: center; flex: 1; padding-bottom: 40px;
}

/* ---------------- the board: the wall of hooks ----------------
   The wall photograph (1448 x 1086) is the display: correctly-named banners are
   hung on the ten hooks, and the room brightens through the round. The game is
   NOT played over it — the question sits in its own panel below — so nothing
   ever covers the banners you are collecting. */
.sm-boardframe {
  display: none; width: 100%; justify-content: center; margin-top: 8px;
}
.sm-hall {
  /* sized so the wall AND the question panel below it fit the viewport together:
     the height term reserves ~300px for the header and the panel */
  --hw: min(780px, 92vw, calc((100vh - 300px) * 1.334));
  position: relative; flex: 0 0 auto;
  width: var(--hw); aspect-ratio: 1448 / 1086;
  border-radius: 8px; overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(201, 161, 90, 0.18);
}
.sm-shell:not([data-phase="setup"]) .sm-boardframe { display: flex; }
.sm-shell:not([data-phase="setup"]) .sm-plain { display: none; }
.sm-shell[data-phase="setup"] .sm-floor { display: none; }

.sm-hall-art { position: absolute; inset: 0; overflow: hidden; }
.sm-hall-layer {
  position: absolute; inset: 0; opacity: 0;
  background-size: 100% 100%; background-position: center;
  transition: opacity 1.6s ease;
}
.sm-hall-layer.on { opacity: 1; }
.sm-hall-layer[data-n="1"] { opacity: 1; }

.sm-hall-glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 46% at 50% 40%, rgba(255, 178, 82, 0.22), transparent 72%);
  opacity: var(--glow); mix-blend-mode: screen;
  transition: opacity 1.1s ease;
}

/* ---------------- the ten hooks ----------------
   Each slot is placed by inline style at a hook measured off the photograph; a
   banner hangs from the top of the slot, downward, as a shield on a peg would. */
.sm-banners { position: absolute; inset: 0; pointer-events: none; }
.sm-banner-slot {
  position: absolute;
  display: flex; align-items: flex-start; justify-content: center;
}
.sm-banner-slot img {
  max-width: 100%; max-height: 100%; object-fit: contain; display: block;
  filter: drop-shadow(0 7px 15px rgba(0, 0, 0, 0.8));
  transform-origin: 50% 0%;
  animation: sm-hang .55s cubic-bezier(.2, .8, .3, 1) both;
}
@keyframes sm-hang {
  from { opacity: 0; transform: translateY(-8%) scaleY(0.7); }
  to   { opacity: 1; transform: none; }
}

/* ---------------- the question panel, below the wall ---------------- */
.sm-floor {
  width: 100%; max-width: 620px; box-sizing: border-box;
  margin: 18px auto 0; padding: 0 18px;
  display: flex; flex-direction: column;
  font-size: 16px;
}


.sm-setup.hidden, .sm-game.hidden, .sm-result.hidden, .sm-shell .hidden { display: none; }
.sm-anim-in { animation: sm-screen-in .55s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes sm-screen-in {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: none; }
}

/* ---------------- setup ---------------- */
.sm-setup { text-align: center; }
.sm-kicker { font-family: var(--serif-display); font-size: 12px; letter-spacing: 4px; text-transform: uppercase; color: var(--gold); }
.sm-setup h1 {
  font-family: var(--serif-display); font-size: 42px; letter-spacing: 3px; margin: 12px 0 12px;
  background: linear-gradient(180deg, #f6e7c5, #c9a15a);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sm-sub { max-width: 500px; margin: 0 auto 34px; opacity: 0.8; line-height: 1.6; }

.sm-diffs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 34px; }
.sm-diff {
  display: flex; flex-direction: column; gap: 4px; align-items: center;
  padding: 14px 10px; border-radius: 12px;
  background: rgba(240, 230, 210, 0.05); border: 2px solid rgba(201, 161, 90, 0.22);
  color: #ede4d0; transition: border-color .2s ease, background .2s ease;
}
.sm-diff b { font-family: var(--serif-display); font-size: 15px; letter-spacing: 1px; }
.sm-diff span { font-size: 11px; opacity: 0.6; }
.sm-diff-easy.active { border-color: #58b368; background: rgba(88, 179, 104, 0.14); }
.sm-diff-hard.active { border-color: #d84c4c; background: rgba(216, 76, 76, 0.16); }
.sm-diff-mixed.active { border-color: #6fa3d8; background: rgba(111, 163, 216, 0.16); }

.sm-start {
  font-family: var(--serif-display); font-size: 16px; letter-spacing: 2px;
  padding: 16px 44px; border-radius: 12px; border: none; cursor: pointer;
  color: #241c12; background: linear-gradient(180deg, #e8c883, #c9a15a);
  box-shadow: 0 6px 24px rgba(201, 161, 90, 0.35);
  transition: transform .12s ease, box-shadow .2s ease;
}
.sm-start:hover { transform: translateY(-2px); box-shadow: 0 10px 32px rgba(201, 161, 90, 0.5); }

/* ---------------- game, asked on the floor of the hall ---------------- */
.sm-game-head { display: flex; align-items: center; gap: 0.6em; margin-bottom: 0.4em; }
.sm-quit {
  background: none; border: none; padding: 0; cursor: pointer;
  color: rgba(232, 208, 168, 0.75); font-family: var(--serif-body); font-size: 0.76em;
}
.sm-quit:hover { color: #f6e7c5; text-decoration: underline; }
.sm-streak { flex: 1; font-family: var(--serif-display); font-size: 0.76em; color: #f0b45c; text-align: right; }

.sm-card { background: none; border: none; border-radius: 0; padding: 0; box-shadow: none; }

/* the banner being asked about, hung where the hall can see it */
.sm-banner-box {
  display: flex; align-items: center; justify-content: center;
  height: 7.2em; margin-bottom: 0.4em;
}
.sm-banner-box img {
  max-height: 100%; max-width: 60%; object-fit: contain;
  filter: drop-shadow(0 8px 22px rgba(0, 0, 0, 0.8));
}
.sm-prompt {
  font-family: var(--serif-display); font-size: 0.92em; letter-spacing: 0.5px;
  text-align: center; color: #f7edd6; margin-bottom: 0.55em; line-height: 1.3;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85);
}
.sm-prompt-words {
  display: block; font-family: var(--serif-body); font-style: italic;
  font-size: 0.85em; color: #f0c97e; margin-top: 0.25em;
}

.sm-answers-text { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4em; }
.sm-a-text {
  padding: 0.6em 0.5em; border-radius: 0.4em; cursor: pointer;
  font-family: var(--serif-body); font-size: 0.84em; line-height: 1.2; color: #f0e6d2;
  background: rgba(20, 12, 6, 0.62); border: 1px solid rgba(201, 161, 90, 0.35);
  transition: border-color .18s ease, background .18s ease, transform .12s ease;
}
.sm-answers-img { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4em; }
.sm-a-img {
  display: flex; align-items: center; justify-content: center;
  height: 5em; padding: 0.3em; border-radius: 0.4em; cursor: pointer;
  background: rgba(20, 12, 6, 0.62); border: 1px solid rgba(201, 161, 90, 0.35);
  transition: border-color .18s ease, background .18s ease, transform .12s ease;
}
.sm-a-img img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.sm-a-text:hover:not(:disabled), .sm-a-img:hover:not(:disabled) {
  border-color: var(--gold-bright); background: rgba(64, 38, 14, 0.72); transform: translateY(-2px);
}
.sm-a-text:disabled, .sm-a-img:disabled { cursor: default; }
.sm-a-text.right, .sm-a-img.right { border-color: #7fce8c; background: rgba(40, 92, 50, 0.68); animation: sm-pop .3s ease; }
.sm-a-text.wrong, .sm-a-img.wrong { border-color: #e06a6a; background: rgba(110, 34, 34, 0.68); animation: sm-shake .3s ease; }
.sm-a-text.dim, .sm-a-img.dim { opacity: 0.35; }

.sm-context {
  margin-top: 0.5em; font-size: 0.74em; line-height: 1.4; text-align: center;
  color: #efe0c4; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9);
}
.sm-context b { color: #f0c97e; }
.sm-next {
  display: block; margin: 0.55em auto 0; padding: 0.45em 1.1em; border-radius: 999px; cursor: pointer;
  font-family: var(--serif-display); font-size: 0.78em; letter-spacing: 1px;
  color: #241c12; border: none; background: linear-gradient(180deg, #f0cd8c, #c9a15a);
}
.sm-next:hover { background: linear-gradient(180deg, #ffe0a4, #d9b169); }

/* ---------------- the verdict, in the lit hall ---------------- */
.sm-result { text-align: center; }
.sm-result .sm-kicker { font-size: 0.66em; }
.sm-score-ring {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 5.2em; height: 5.2em; margin: 0.2em auto 0.5em; border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, rgba(255, 186, 96, 0.3), rgba(16, 10, 4, 0.6));
  border: 1px solid rgba(255, 196, 110, 0.6);
  box-shadow: 0 0 2em rgba(255, 176, 74, 0.4);
}
.sm-score-ring b { font-family: var(--serif-display); font-size: 2em; color: #ffeec4; line-height: 1; }
.sm-score-ring span { font-size: 0.58em; letter-spacing: 1.5px; text-transform: uppercase; opacity: 0.75; margin-top: 0.3em; }
.sm-rank { font-family: var(--serif-display); font-size: 1.2em; color: #ffd894; margin-bottom: 0.3em; text-shadow: 0 2px 10px rgba(0,0,0,.8); }
.sm-rank-sub { margin: 0 auto 1em; opacity: 0.9; line-height: 1.5; font-size: 0.78em; text-shadow: 0 1px 6px rgba(0,0,0,.9); }
.sm-result-actions { display: flex; gap: 0.4em; justify-content: center; flex-wrap: wrap; }
.sm-result-actions button {
  padding: 0.45em 0.9em; border-radius: 999px; cursor: pointer; font-size: 0.74em;
  font-family: var(--serif-body); color: #f0e6d2;
  background: rgba(20, 12, 6, 0.62); border: 1px solid rgba(201, 161, 90, 0.42);
}
.sm-result-actions button:hover { border-color: var(--gold-bright); background: rgba(64, 38, 14, 0.72); }

/* on a phone the wall simply spans the width and the question sits below it —
   the same vertical stack, no special backdrop trickery needed */
@media (max-width: 820px) {
  .sm-hall { --hw: 94vw; }
  .sm-floor { font-size: 15px; }
  .sm-answers-img { grid-template-columns: repeat(4, 1fr); }
  .sm-setup h1 { font-size: 30px; }
}