.game-shell:has(.flq-game) {
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.game-shell:has(.flq-game) .game-status {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 10px 14px;
}

.game-shell:has(.flq-game) .game-status strong { max-width: 68%; }
.game-shell:has(.flq-game) .game-tools { flex-direction: row; padding: 0; }
.game-shell:has(.flq-game) .game-tools button { flex: 1; padding: 12px 8px; text-align: center; }

.game-page[data-engine="flagsignalroom"] .game-shell {
  background:
    linear-gradient(90deg, rgba(4, 15, 25, .98), rgba(7, 25, 38, .86) 50%, rgba(3, 13, 22, .98)),
    url("/assets/covers/flag-quiz.webp") center 44% / cover;
  border-color: #b78b43;
  box-shadow: 0 24px 60px rgba(0, 5, 11, .72), inset 0 0 0 1px rgba(221, 177, 89, .24);
}

.flq-game {
  --flq-navy: #061522;
  --flq-navy-2: #0c2533;
  --flq-paper: #f1e4c7;
  --flq-ink: #17212a;
  --flq-brass: #c6984b;
  --flq-brass-dark: #6b4820;
  --flq-teal: #5dd8cf;
  --flq-mint: #8fe5bd;
  --flq-coral: #f06d55;
  width: min(980px, 100%);
  margin: 0 auto;
  color: #f5e8c9;
  font-family: Georgia, "Times New Roman", serif;
}

.flq-title {
  margin: 0 0 13px;
  color: #f5e5c5;
  font-size: clamp(2rem, 5.2vw, 4.15rem);
  font-weight: 800;
  letter-spacing: .055em;
  line-height: .94;
  text-align: center;
  text-shadow: 0 3px 0 #4a3118, 0 9px 28px rgba(0, 0, 0, .78);
  text-transform: uppercase;
}

.flq-room {
  position: relative;
  padding: 14px;
  border: 2px solid #a77b39;
  border-radius: 11px;
  background:
    repeating-linear-gradient(90deg, transparent 0 112px, rgba(255, 255, 255, .012) 112px 113px),
    linear-gradient(145deg, rgba(8, 30, 42, .98), rgba(2, 13, 23, .99));
  box-shadow: inset 0 0 0 3px #01080d, inset 0 0 0 5px rgba(198, 152, 75, .15), 0 18px 42px rgba(0, 0, 0, .58);
}

.flq-room::before {
  position: absolute;
  z-index: 3;
  inset: 4px 8px auto;
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--flq-coral), var(--flq-brass) calc(var(--time-ratio, 1) * 100%), #243846 0);
  box-shadow: 0 0 12px rgba(198, 152, 75, .45);
  content: "";
  transition: background .2s linear;
}

.flq-summary {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin-bottom: 13px;
  overflow: hidden;
  border: 2px solid #75542c;
  border-radius: 7px;
  background: #03101a;
  box-shadow: inset 0 0 0 2px #18313e, 0 5px 12px rgba(0, 0, 0, .45);
}

.flq-summary > span {
  min-width: 0;
  padding: 8px 7px 7px;
  border-right: 1px solid #684a27;
  text-align: center;
}

.flq-summary > span:last-child { border-right: 0; }
.flq-summary small,
.flq-summary strong { display: block; }

.flq-summary small {
  color: var(--flq-teal);
  font: 800 .61rem/1 Arial, sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.flq-summary svg,
.flq-actions svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.65;
}

.flq-summary svg { margin-right: 4px; vertical-align: -2px; }

.flq-summary strong {
  margin-top: 3px;
  color: #f7ebd0;
  font: 800 clamp(.95rem, 2vw, 1.36rem)/1 Arial, sans-serif;
  font-variant-numeric: tabular-nums;
}

.flq-summary > span:nth-child(2) strong { color: var(--flq-teal); }
.flq-summary > span:nth-child(3) strong { color: #f1c86b; }
.flq-summary > span:nth-child(4) strong { color: var(--flq-mint); }
.flq-summary > span:nth-child(5) strong { color: var(--flq-coral); }

.flq-dossier {
  position: relative;
  display: grid;
  min-height: 270px;
  padding: 35px 118px 24px 28px;
  border: 5px solid #6f4c22;
  border-radius: 24px 24px 15px 15px;
  background:
    repeating-linear-gradient(0deg, rgba(91, 62, 28, .025) 0 1px, transparent 1px 4px),
    radial-gradient(circle at 50% 34%, #fff8e6, var(--flq-paper));
  box-shadow: inset 0 0 0 3px #c69a52, inset 0 0 0 7px #3f2a17, 0 8px 18px rgba(0, 0, 0, .56);
  place-items: center;
}

.flq-dossier::after {
  position: absolute;
  inset: 17px 101px 17px 18px;
  border: 2px solid rgba(116, 79, 35, .48);
  border-radius: 15px;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .34);
  content: "";
  pointer-events: none;
}

.flq-region {
  position: absolute;
  z-index: 2;
  top: 25px;
  left: 38px;
  max-width: calc(100% - 165px);
  padding: 5px 9px;
  border: 1px solid rgba(105, 72, 31, .45);
  border-radius: 3px;
  background: rgba(243, 232, 204, .92);
  color: #684820;
  font: 900 .62rem/1.2 Arial, sans-serif;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.flq-flag {
  position: relative;
  z-index: 1;
  display: grid;
  width: min(430px, 82%);
  aspect-ratio: 3 / 2;
  border: 10px solid #fffdf6;
  background: #fff;
  box-shadow: 0 1px 0 rgba(56, 37, 19, .25), 0 8px 18px rgba(48, 31, 15, .26);
  overflow: hidden;
  place-items: center;
  animation: flq-reveal .28s ease-out;
}

.flq-flag svg { display: block; width: 100%; height: 100%; }

.flq-stamps {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: 18px;
  display: grid;
  gap: 8px;
  transform: translateY(-50%);
}

.flq-stamps small {
  width: 70px;
  color: #624427;
  font: 900 .47rem/1.15 Arial, sans-serif;
  letter-spacing: .07em;
  text-align: center;
  text-transform: uppercase;
}

.flq-stamps span {
  position: relative;
  display: grid;
  width: 62px;
  height: 50px;
  border: 3px double #7e2f2d;
  border-radius: 50%;
  color: #7e2f2d;
  opacity: .25;
  place-items: center;
  transform: rotate(-6deg);
}

.flq-stamps span:nth-of-type(2) { transform: rotate(5deg); }
.flq-stamps span:nth-of-type(3) { transform: rotate(-2deg); }
.flq-stamps span::before { content: "LIFE"; font: 900 .54rem/1 Arial, sans-serif; letter-spacing: .12em; }
.flq-stamps i { position: absolute; width: 28px; height: 28px; border: 1px solid currentColor; border-radius: 50%; }
.flq-stamps i::before,
.flq-stamps i::after { position: absolute; inset: 5px 12px; border-left: 1px solid currentColor; content: ""; }
.flq-stamps i::after { inset: 12px 5px; border-top: 1px solid currentColor; border-left: 0; }
.flq-stamps span.active { filter: drop-shadow(0 2px 1px rgba(70, 25, 20, .18)); opacity: .94; }

.flq-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.flq-choice {
  display: grid;
  grid-template-columns: 46px 1fr auto;
  min-height: 68px;
  align-items: center;
  padding: 8px 12px;
  border: 2px solid #a67b3b;
  border-radius: 7px;
  background: linear-gradient(180deg, #173645, #071823);
  box-shadow: inset 0 0 0 3px #020a0f, inset 0 0 0 5px rgba(200, 157, 78, .13), 0 5px 0 #4e3218, 0 8px 15px rgba(0, 0, 0, .42);
  color: #f5e8cb;
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: transform .12s ease, filter .12s ease, border-color .12s ease;
}

.flq-choice:hover:not(:disabled) { border-color: #e2bd70; filter: brightness(1.12); transform: translateY(-2px); }
.flq-choice:focus-visible { outline: 4px solid var(--flq-teal); outline-offset: 3px; }

.flq-choice > span {
  display: grid;
  width: 38px;
  height: 43px;
  border: 2px solid #b98c45;
  border-radius: 4px;
  background: #0a2230;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .04), 0 3px 0 #422a15;
  color: #f1dfbd;
  font: 900 1.22rem/1 Arial, sans-serif;
  place-items: center;
}

.flq-choice strong { padding: 0 10px; font-size: clamp(1rem, 2.2vw, 1.3rem); line-height: 1.12; }
.flq-choice i { color: #75919d; font: 900 .53rem/1 Arial, sans-serif; font-style: normal; letter-spacing: .1em; text-transform: uppercase; }
.flq-choice.correct { border-color: #78e0b4; background: linear-gradient(180deg, #285e55, #0a2524); box-shadow: inset 0 0 0 3px #06120f, inset 0 0 22px rgba(143, 229, 189, .2), 0 0 18px rgba(143, 229, 189, .38); }
.flq-choice.correct strong,
.flq-choice.correct i { color: #aaf2d1; }
.flq-choice.wrong { border-color: #ff8069; background: linear-gradient(180deg, #4b2526, #1b1015); animation: flq-shake .26s linear; }
.flq-choice.wrong i { color: #ff9c89; }
.flq-choice.rejected { border-color: #334b57; box-shadow: inset 0 0 0 3px #02090d; filter: grayscale(.8); opacity: .38; transform: none; }

.flq-progress {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  padding: 13px 24px 3px;
}

.flq-progress span {
  position: relative;
  display: grid;
  width: 30px;
  min-height: 30px;
  border: 2px solid #6f5739;
  border-radius: 50%;
  background: #03101a;
  color: #71838b;
  font: 900 .72rem/1 Arial, sans-serif;
  place-self: center;
  place-items: center;
}

.flq-progress span:not(:last-child)::after {
  position: absolute;
  top: 50%;
  left: 30px;
  width: calc((min(980px, 100vw) - 168px) / 5);
  height: 2px;
  background: #6f5739;
  content: "";
}

.flq-progress span.active { border-color: var(--flq-teal); color: var(--flq-teal); box-shadow: 0 0 11px rgba(93, 216, 207, .58); }
.flq-progress span.done { border-color: var(--flq-mint); background: #235e53; color: #e4fff5; }
.flq-progress span.done::before { content: "\2713"; }

.flq-actions { display: flex; justify-content: center; gap: 11px; margin-top: 12px; }
.flq-actions button {
  display: inline-flex;
  min-width: 166px;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 15px;
  border: 2px solid #a77c3b;
  border-radius: 7px;
  background: linear-gradient(#173846, #071923);
  box-shadow: inset 0 0 0 2px #020a0e, 0 4px 0 #4b3018;
  color: var(--flq-teal);
  cursor: pointer;
  font: 900 .73rem/1 Arial, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.flq-actions button:last-child { color: var(--flq-coral); }
.flq-actions button:focus-visible { outline: 3px solid #fff0ca; outline-offset: 3px; }
.flq-actions button:disabled { cursor: default; filter: grayscale(.65); opacity: .42; }
.flq-note { min-height: 34px; max-width: 790px; margin: 12px auto 0; color: #d9ceb5; font-size: .84rem; line-height: 1.35; text-align: center; }
.flq-prompt { min-height: 17px; margin: 5px 0 0; color: #8297a0; font: 700 .68rem/1.3 Arial, sans-serif; letter-spacing: .04em; text-align: center; }
.flq-game.paused .flq-dossier,
.flq-game.paused .flq-choices,
.flq-game.paused .flq-progress { filter: brightness(.5) grayscale(.3); }
.flq-game.complete .flq-room { box-shadow: inset 0 0 0 3px #01080d, inset 0 0 0 5px rgba(143, 229, 189, .3), 0 0 30px rgba(143, 229, 189, .2); }

@keyframes flq-reveal { from { opacity: .55; transform: translateY(5px) scale(.985); } }
@keyframes flq-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

@media (max-width: 720px) {
  .game-shell:has(.flq-game) .game-status { align-items: flex-start; flex-direction: column; gap: 7px; }
  .game-shell:has(.flq-game) .game-status strong { max-width: none; }
  .flq-room { padding: 11px; }
  .flq-dossier { min-height: 245px; padding: 36px 98px 22px 22px; }
  .flq-dossier::after { right: 83px; }
  .flq-stamps { right: 12px; }
  .flq-stamps span { width: 52px; height: 43px; }
  .flq-stamps small { width: 58px; }
  .flq-choice { grid-template-columns: 42px 1fr; min-height: 66px; }
  .flq-choice i { display: none; }
}

@media (max-width: 520px) {
  .flq-title { margin-bottom: 10px; font-size: clamp(1.65rem, 8.7vw, 2.65rem); letter-spacing: .025em; }
  .flq-room { border-radius: 8px; }
  .flq-summary > span { padding: 7px 2px 6px; }
  .flq-summary small { font-size: .45rem; letter-spacing: .035em; }
  .flq-summary svg { display: none; }
  .flq-summary strong { font-size: .82rem; }
  .flq-dossier { min-height: 220px; padding: 40px 14px 70px; border-radius: 16px; }
  .flq-dossier::after { inset: 15px 11px 57px; }
  .flq-region { top: 20px; left: 23px; max-width: calc(100% - 46px); font-size: .5rem; letter-spacing: .05em; }
  .flq-flag { width: min(300px, 87%); border-width: 6px; }
  .flq-stamps { top: auto; right: 50%; bottom: 10px; grid-template-columns: repeat(3, 52px); gap: 6px; transform: translateX(50%); }
  .flq-stamps small { grid-column: 1 / -1; width: auto; font-size: .43rem; }
  .flq-stamps span { width: 52px; height: 29px; border-width: 2px; }
  .flq-stamps span::before { font-size: .43rem; }
  .flq-stamps i { width: 18px; height: 18px; }
  .flq-stamps i::before { inset: 3px 8px; }
  .flq-stamps i::after { inset: 8px 3px; }
  .flq-choices { grid-template-columns: 1fr; gap: 8px; margin-top: 10px; }
  .flq-choice { grid-template-columns: 37px 1fr auto; min-height: 54px; padding: 5px 8px; }
  .flq-choice > span { width: 31px; height: 36px; font-size: 1rem; }
  .flq-choice strong { padding: 0 7px; font-size: .96rem; }
  .flq-choice i { display: block; font-size: .44rem; }
  .flq-progress { gap: 7px; padding: 9px 4px 2px; }
  .flq-progress span { width: 25px; min-height: 25px; font-size: .62rem; }
  .flq-progress span:not(:last-child)::after { left: 25px; width: calc((100vw - 108px) / 5); }
  .flq-actions { margin-top: 11px; }
  .flq-actions button { min-width: 0; min-height: 46px; flex: 1; padding: 8px; font-size: .62rem; }
  .flq-note { min-height: 42px; margin-top: 9px; font-size: .72rem; }
  .flq-prompt { margin-top: 3px; font-size: .55rem; }
}

@media (prefers-reduced-motion: reduce) {
  .flq-flag,
  .flq-choice,
  .flq-room::before { animation: none; transition: none; }
}