.game-page[data-engine="riddleroomchamber"] .game-shell {
  background: #061519 url("/assets/covers/riddle-room.webp") center 43% / cover;
  border-color: #9d7535;
  box-shadow: 0 24px 64px rgba(0, 5, 8, .72), inset 0 0 0 1px rgba(222, 176, 82, .22);
}

.rr-game {
  --rr-deep: #041116;
  --rr-teal: #09272c;
  --rr-teal-light: #15535a;
  --rr-walnut: #3b2114;
  --rr-walnut-light: #684329;
  --rr-parchment: #e6c990;
  --rr-parchment-light: #f0dba9;
  --rr-ink: #302619;
  --rr-brass: #d2a84f;
  --rr-brass-dark: #76501f;
  --rr-focus: #53d7d2;
  --rr-ruby: #a94542;
  --rr-success: #6f9b75;
  width: min(1040px, 100%);
  margin: 0 auto;
  color: #f4e4bc;
  font-family: Georgia, "Times New Roman", serif;
}

.rr-title {
  margin: 0 0 11px;
  color: #e7bd62;
  font-size: clamp(2.25rem, 5.8vw, 4.75rem);
  font-weight: 800;
  letter-spacing: .055em;
  line-height: .92;
  text-align: center;
  text-shadow: 0 2px 0 #5e3917, 0 5px 24px rgba(0, 0, 0, .9);
  text-transform: uppercase;
}

.rr-desk {
  position: relative;
  padding: 13px;
  border: 2px solid #a27835;
  background: rgba(24, 13, 8, .96);
  box-shadow:
    inset 0 0 0 4px #2b160d,
    inset 0 0 0 5px rgba(217, 169, 75, .32),
    0 19px 45px rgba(0, 0, 0, .62);
}

.rr-desk::before {
  position: absolute;
  z-index: 3;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--rr-ruby), var(--rr-brass) calc(var(--time-ratio, 1) * 100%), #243c35 0);
  content: "";
  transition: background .2s linear;
}

.rr-summary {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin-bottom: 12px;
  border: 1px solid #9d7535;
  background: rgba(4, 17, 22, .98);
  box-shadow: inset 0 0 0 3px rgba(75, 46, 22, .55);
}

.rr-summary > span {
  min-width: 0;
  padding: 8px 7px 7px;
  border-right: 1px solid rgba(210, 168, 79, .3);
  text-align: center;
}

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

.rr-summary small {
  color: var(--rr-brass);
  font-family: Arial, sans-serif;
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.rr-summary svg,
.rr-actions svg,
.rr-keys svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.55;
}

.rr-summary svg { margin-right: 4px; vertical-align: -3px; }

.rr-summary strong {
  margin-top: 3px;
  color: #f4e8c8;
  font-size: clamp(.98rem, 2vw, 1.34rem);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.rr-scroll {
  position: relative;
  z-index: 1;
  min-height: 238px;
  padding: 58px 170px 36px 68px;
  border: 2px solid #8f672d;
  background:
    repeating-linear-gradient(0deg, rgba(78, 51, 20, .04) 0 1px, transparent 1px 5px),
    linear-gradient(90deg, #cfaa6d, var(--rr-parchment-light) 8%, var(--rr-parchment) 92%, #bd9354);
  box-shadow: inset 0 0 0 5px rgba(255, 237, 190, .22), 8px 8px 0 #65401f, 0 17px 28px rgba(0, 0, 0, .42);
  color: var(--rr-ink);
}

.rr-scroll::before,
.rr-scroll::after {
  position: absolute;
  top: 24px;
  bottom: 24px;
  width: 25px;
  border: 1px solid #7d5424;
  border-radius: 50%;
  background: linear-gradient(90deg, #6d421e, #d0a65f 45%, #72461f);
  box-shadow: 0 3px 8px rgba(37, 19, 8, .54);
  content: "";
}

.rr-scroll::before { left: 17px; }
.rr-scroll::after { right: 17px; }

.rr-labels {
  position: absolute;
  top: 19px;
  right: 61px;
  left: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: Arial, sans-serif;
  text-transform: uppercase;
}

.rr-labels small {
  display: inline-block;
  padding: 4px 12px;
  border-block: 1px solid #7f632f;
  color: #4e3d23;
  font-size: .66rem;
  font-weight: 900;
  letter-spacing: .13em;
}

.rr-labels b {
  color: #5a401f;
  font-size: .68rem;
  letter-spacing: .12em;
}

.rr-riddle {
  display: grid;
  min-height: 130px;
  margin: 0;
  align-items: center;
  font-size: clamp(1.18rem, 2.5vw, 1.72rem);
  font-weight: 700;
  line-height: 1.42;
  text-align: center;
}

.rr-keys {
  position: absolute;
  top: 70px;
  right: 56px;
  display: grid;
  gap: 10px;
  width: 78px;
}

.rr-keys small {
  color: #65491f;
  font-family: Arial, sans-serif;
  font-size: .48rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-align: center;
  text-transform: uppercase;
}

.rr-keys span {
  display: grid;
  width: 62px;
  height: 32px;
  margin: 0 auto;
  place-items: center;
  color: #6b5431;
  opacity: .25;
  transform: rotate(-6deg);
}

.rr-keys span.active {
  color: #8a5b15;
  filter: drop-shadow(0 1px 0 #f1ca74);
  opacity: 1;
}

.rr-keys svg { width: 42px; height: 26px; stroke-width: 1.35; }

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

.rr-choice {
  display: grid;
  grid-template-columns: 45px 1fr auto;
  min-height: 70px;
  align-items: center;
  padding: 9px 14px;
  border: 2px solid #9d7535;
  border-radius: 1px;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 7px),
    linear-gradient(90deg, #412719, #5b3822 52%, #392116);
  box-shadow: inset 0 0 0 3px rgba(18, 8, 3, .65), 0 5px 0 #211107, 0 10px 19px rgba(0, 0, 0, .42);
  color: #f0d99f;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
}

.rr-choice:hover:not(:disabled) { transform: translateY(-2px); }

.rr-choice:focus-visible {
  outline: 4px solid var(--rr-focus);
  outline-offset: 3px;
}

.rr-choice > span {
  display: grid;
  width: 34px;
  height: 34px;
  border: 2px solid #b48a41;
  border-radius: 50%;
  color: #e8c474;
  font-family: Arial, sans-serif;
  font-size: .85rem;
  font-weight: 900;
  place-items: center;
}

.rr-choice strong {
  min-width: 0;
  padding: 0 9px;
  font-size: clamp(.96rem, 1.55vw, 1.24rem);
  letter-spacing: .025em;
  line-height: 1.08;
  overflow-wrap: anywhere;
}

.rr-choice i {
  color: #bc9c67;
  font-family: Arial, sans-serif;
  font-size: .52rem;
  font-style: normal;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.rr-choice.hinted:not(.rejected) {
  border-color: var(--rr-focus);
  box-shadow: inset 0 0 0 3px rgba(18, 8, 3, .65), 0 0 0 3px rgba(83, 215, 210, .26), 0 5px 0 #211107;
}

.rr-choice.correct {
  border-color: #8bb18c;
  background: linear-gradient(90deg, #304c35, #45644a);
  box-shadow: inset 0 0 0 3px rgba(18, 8, 3, .45), 0 0 0 4px rgba(111, 155, 117, .35), 0 5px 0 #203725;
}

.rr-choice.wrong { border-color: #c15a51; background: linear-gradient(90deg, #5c2725, #793531); }
.rr-choice.rejected { filter: saturate(.22) brightness(.61); opacity: .58; }

.rr-progress {
  position: relative;
  display: flex;
  justify-content: space-between;
  max-width: 650px;
  margin: 19px auto 10px;
}

.rr-progress::before {
  position: absolute;
  top: 50%;
  right: 22px;
  left: 22px;
  height: 3px;
  background: #9c7032;
  content: "";
}

.rr-progress span {
  position: relative;
  z-index: 1;
  display: grid;
  width: 39px;
  height: 39px;
  border: 2px solid #a87b37;
  border-radius: 50%;
  background: #071a1e;
  color: #d8ac55;
  font-family: Arial, sans-serif;
  font-size: .78rem;
  font-weight: 900;
  place-items: center;
}

.rr-progress span::before {
  position: absolute;
  top: 11px;
  width: 8px;
  height: 10px;
  border: 2px solid currentColor;
  border-radius: 5px 5px 0 0;
  content: "";
  opacity: .45;
}

.rr-progress span.active {
  border-color: var(--rr-brass);
  background: #5d3c18;
  box-shadow: 0 0 0 5px rgba(210, 168, 79, .15);
  color: #ffcf68;
  animation: rr-pulse 1.8s ease-in-out infinite;
}

.rr-progress span.done { border-color: #76a17b; background: #38513d; color: transparent; }
.rr-progress span.done::before { display: none; }
.rr-progress span.done::after { color: #e6efd9; content: "✓"; }

.rr-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 230px));
  justify-content: center;
  gap: 10px;
  margin-top: 12px;
}

.rr-actions button {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1px solid #a47b39;
  border-radius: 0;
  background: #0f4a50;
  box-shadow: inset 0 0 0 3px rgba(4, 17, 22, .45);
  color: #f0dba8;
  cursor: pointer;
  font-family: Arial, sans-serif;
  font-size: .73rem;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.rr-actions button:last-child { background: #17343a; }
.rr-actions button:hover:not(:disabled) { filter: brightness(1.15); }
.rr-actions button:focus-visible { outline: 3px solid var(--rr-focus); outline-offset: 2px; }
.rr-actions button:disabled { cursor: default; opacity: .42; }

.rr-note {
  min-height: 1.35em;
  margin: 12px auto 0;
  color: #edd8a6;
  font-size: .8rem;
  line-height: 1.45;
  text-align: center;
}

.rr-prompt {
  margin: 7px 0 0;
  color: #8dc5c5;
  font-family: Arial, sans-serif;
  font-size: .61rem;
  font-weight: 800;
  letter-spacing: .065em;
  text-align: center;
  text-transform: uppercase;
}

.rr-game.paused .rr-scroll,
.rr-game.paused .rr-choices { filter: saturate(.38) brightness(.62); }

.rr-game.complete .rr-desk { box-shadow: inset 0 0 0 4px #2b160d, inset 0 0 0 5px rgba(111, 155, 117, .35), 0 0 42px rgba(83, 215, 210, .17); }

@keyframes rr-pulse { 50% { box-shadow: 0 0 0 9px rgba(210, 168, 79, .04); } }

@media (max-width: 720px) {
  .rr-title { margin-bottom: 10px; }
  .rr-desk { padding: 9px; }
  .rr-summary > span { padding: 7px 2px 6px; }
  .rr-summary small { font-size: .49rem; letter-spacing: .055em; }
  .rr-summary svg { display: none; }
  .rr-summary strong { font-size: .88rem; }
  .rr-scroll { min-height: 255px; padding: 70px 42px 66px; }
  .rr-scroll::before,
  .rr-scroll::after { top: 18px; bottom: 18px; width: 18px; }
  .rr-scroll::before { left: 10px; }
  .rr-scroll::after { right: 10px; }
  .rr-labels { top: 17px; right: 43px; left: 43px; }
  .rr-labels small,
  .rr-labels b { font-size: .56rem; }
  .rr-riddle { min-height: 118px; font-size: clamp(1.02rem, 4.1vw, 1.28rem); line-height: 1.36; }
  .rr-keys { top: auto; right: 50%; bottom: 13px; display: flex; width: auto; align-items: center; gap: 7px; transform: translateX(50%); }
  .rr-keys small { margin-right: 4px; }
  .rr-keys span { width: 39px; height: 27px; }
  .rr-keys svg { width: 34px; height: 23px; }
  .rr-choice { min-height: 64px; }
  .rr-choice strong { font-size: 1.08rem; }
  .rr-note { font-size: .73rem; }
  .rr-prompt { font-size: .54rem; line-height: 1.4; }
}

@media (max-width: 520px) {
  .rr-title { font-size: 2.05rem; }
  .rr-scroll { min-height: 236px; padding-inline: 34px; }
  .rr-labels { right: 34px; left: 34px; }
  .rr-choices { grid-template-columns: 1fr; gap: 9px; }
  .rr-choice { min-height: 54px; grid-template-columns: 38px 1fr auto; padding: 7px 10px; }
  .rr-choice > span { width: 30px; height: 30px; }
  .rr-choice i { font-size: .47rem; }
  .rr-progress { margin-top: 15px; }
  .rr-progress span { width: 33px; height: 33px; }
  .rr-progress span::before { top: 9px; }
  .rr-actions { grid-template-columns: 1fr 1fr; }
  .rr-actions button { min-height: 46px; padding-inline: 6px; font-size: .64rem; letter-spacing: .025em; }
}

@media (prefers-reduced-motion: reduce) {
  .rr-choice { transition: none; }
  .rr-progress span.active { animation: none; }
}