.game-page[data-engine="capitalrouteoffice"] .game-shell {
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  background:
    linear-gradient(90deg, rgba(3, 16, 14, .98), rgba(4, 22, 18, .82) 50%, rgba(3, 14, 13, .98)),
    url("/assets/covers/capital-cities.webp") center 53% / cover;
  border-color: #9d783e;
  box-shadow: 0 24px 60px rgba(2, 8, 6, .7), inset 0 0 0 1px rgba(210, 168, 89, .24);
}

.game-page[data-engine="capitalrouteoffice"] .game-status {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 10px 14px;
}

.game-page[data-engine="capitalrouteoffice"] .game-status strong { max-width: 54%; }
.game-page[data-engine="capitalrouteoffice"] .game-status span { text-align: right; }
.game-page[data-engine="capitalrouteoffice"] .game-root { min-width: 0; }

.cct-game {
  --cct-green: #071d18;
  --cct-green-2: #12382f;
  --cct-paper: #f1dfb8;
  --cct-ink: #17201c;
  --cct-brass: #c79b4d;
  --cct-brass-dark: #62451f;
  --cct-teal: #59d9ca;
  --cct-lime: #a4e36b;
  --cct-red: #a53d33;
  width: min(980px, 100%);
  margin: 0 auto;
  color: #f6e7c7;
  font-family: Georgia, "Times New Roman", serif;
}

.cct-title {
  margin: 0 0 13px;
  color: #f3dfb5;
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 800;
  letter-spacing: .045em;
  line-height: .95;
  text-align: center;
  text-shadow: 0 3px 0 #493219, 0 9px 28px rgba(0, 0, 0, .8);
  text-transform: uppercase;
}

.cct-office {
  position: relative;
  padding: 14px;
  border: 2px solid #a77d3b;
  border-radius: 10px;
  background:
    repeating-linear-gradient(90deg, transparent 0 113px, rgba(255, 255, 255, .012) 113px 114px),
    linear-gradient(145deg, rgba(8, 31, 25, .97), rgba(2, 14, 13, .99));
  box-shadow: inset 0 0 0 3px #010a08, inset 0 0 0 5px rgba(199, 155, 77, .15), 0 18px 42px rgba(0, 0, 0, .6);
}

.cct-office::before {
  position: absolute;
  z-index: 3;
  inset: 4px 8px auto;
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--cct-red), var(--cct-brass) calc(var(--time-ratio, 1) * 100%), #29443c 0);
  box-shadow: 0 0 12px rgba(199, 155, 77, .44);
  content: "";
  transition: background .2s linear;
}

.cct-summary {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin-bottom: 13px;
  overflow: hidden;
  border: 2px solid #76572d;
  border-radius: 6px;
  background: #03120f;
  box-shadow: inset 0 0 0 2px #19362e, 0 5px 12px rgba(0, 0, 0, .46);
}

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

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

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

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

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

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

.cct-summary > span:nth-child(2) strong { color: #f2c872; }
.cct-summary > span:nth-child(3) strong { color: var(--cct-teal); }
.cct-summary > span:nth-child(4) strong { color: var(--cct-lime); }
.cct-summary > span:nth-child(5) strong { color: #f59a76; }

.cct-dispatch {
  position: relative;
  display: grid;
  min-height: 225px;
  padding: 28px 112px 24px 28px;
  border: 5px solid #6a4920;
  border-radius: 22px 22px 14px 14px;
  background:
    repeating-linear-gradient(0deg, rgba(84, 57, 27, .03) 0 1px, transparent 1px 4px),
    radial-gradient(circle at 46% 30%, #fff5dc, var(--cct-paper));
  box-shadow: inset 0 0 0 3px #c79a50, inset 0 0 0 7px #3c2815, 0 8px 18px rgba(0, 0, 0, .58);
  text-align: center;
  place-content: center;
}

.cct-dispatch::before,
.cct-dispatch::after {
  position: absolute;
  top: 50%;
  width: 32px;
  height: 58px;
  border-radius: 50%;
  background: #382615;
  content: "";
  transform: translateY(-50%);
}

.cct-dispatch::before { left: -19px; }
.cct-dispatch::after { right: -19px; }

.cct-kicker {
  color: var(--cct-red);
  font: 900 .72rem/1 Arial, sans-serif;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.cct-country {
  display: block;
  max-width: 720px;
  margin: 12px auto 10px;
  color: var(--cct-ink);
  font: 900 clamp(2rem, 6vw, 4.65rem)/.94 "Arial Narrow", Impact, sans-serif;
  letter-spacing: .075em;
  overflow-wrap: anywhere;
  text-transform: uppercase;
}

.cct-region {
  display: block;
  max-width: 690px;
  margin: 0 auto;
  color: #803f30;
  font: 900 clamp(.65rem, 1.5vw, .92rem)/1.35 Arial, sans-serif;
  letter-spacing: .09em;
  text-transform: uppercase;
}

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

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

.cct-tickets span {
  position: relative;
  display: grid;
  width: 64px;
  height: 42px;
  border: 2px dashed #8a3b31;
  border-radius: 3px;
  color: #8a3b31;
  opacity: .22;
  place-items: center;
  transform: rotate(-4deg);
}

.cct-tickets span:nth-of-type(2) { transform: rotate(3deg); }
.cct-tickets span:nth-of-type(3) { transform: rotate(-1deg); }
.cct-tickets span::before { content: "ROUTE"; font: 900 .49rem/1 Arial, sans-serif; letter-spacing: .12em; }
.cct-tickets i { position: absolute; width: 18px; height: 18px; border: 1px solid currentColor; border-radius: 50%; }
.cct-tickets span.active { filter: drop-shadow(0 2px 1px rgba(70, 25, 20, .18)); opacity: .95; }

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

.cct-progress span {
  position: relative;
  display: grid;
  width: 31px;
  min-height: 31px;
  border: 2px solid #715b3b;
  border-radius: 50%;
  background: #04130f;
  color: #788e86;
  font: 900 .72rem/1 Arial, sans-serif;
  place-self: center;
  place-items: center;
}

.cct-progress span:not(:last-child)::after {
  position: absolute;
  top: 50%;
  left: 31px;
  width: calc((min(980px, 100vw) - 171px) / 5);
  height: 3px;
  background: linear-gradient(#6f5632 0 33%, #b58b48 33% 66%, #6f5632 66%);
  content: "";
}

.cct-progress span.active { border-color: var(--cct-teal); color: var(--cct-teal); box-shadow: 0 0 11px rgba(89, 217, 202, .58); }
.cct-progress span.done { border-color: var(--cct-lime); background: #346627; color: #f3ffe9; }
.cct-progress span.done::before { content: "\2713"; }

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

.cct-choice {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  min-height: 68px;
  align-items: center;
  padding: 8px 12px;
  border: 2px solid #a98042;
  border-radius: 7px;
  background: linear-gradient(180deg, #17362f, #061713);
  box-shadow: inset 0 0 0 3px #020b09, inset 0 0 0 5px rgba(201, 160, 83, .12), 0 5px 0 #4c321a, 0 8px 15px rgba(0, 0, 0, .44);
  color: #f4e4c4;
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: transform .12s ease, filter .12s ease, border-color .12s ease;
}

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

.cct-choice > span {
  display: grid;
  width: 39px;
  height: 43px;
  border: 2px solid #b88b47;
  border-radius: 50%;
  background: #0b2520;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .04), 0 3px 0 #422a16;
  color: #f0dcb7;
  font: 900 1.2rem/1 Arial, sans-serif;
  place-items: center;
}

.cct-choice strong { padding: 0 10px; font-size: clamp(1rem, 2.2vw, 1.28rem); line-height: 1.12; }
.cct-choice i { color: #78958b; font: 900 .53rem/1 Arial, sans-serif; font-style: normal; letter-spacing: .1em; text-transform: uppercase; }
.cct-choice.correct { border-color: #9ce576; background: linear-gradient(180deg, #35683d, #0d291d); box-shadow: inset 0 0 0 3px #071309, inset 0 0 22px rgba(164, 227, 107, .2), 0 0 18px rgba(164, 227, 107, .36); }
.cct-choice.correct strong,
.cct-choice.correct i { color: #c9f5ad; }
.cct-choice.wrong { border-color: #f27b68; background: linear-gradient(180deg, #512824, #1b100e); animation: cct-shake .26s linear; }
.cct-choice.wrong i { color: #ff9e8c; }
.cct-choice.rejected { border-color: #354d45; box-shadow: inset 0 0 0 3px #020a08; filter: grayscale(.8); opacity: .38; transform: none; }

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

.cct-actions button:last-child { color: #f08b70; }
.cct-actions button:focus-visible { outline: 3px solid #fff0ca; outline-offset: 3px; }
.cct-actions button:disabled { cursor: default; filter: grayscale(.65); opacity: .42; }
.cct-note { min-height: 34px; max-width: 790px; margin: 12px auto 0; color: #d9cfb7; font-size: .84rem; line-height: 1.35; text-align: center; }
.cct-prompt { min-height: 17px; margin: 5px 0 0; color: #849b92; font: 700 .68rem/1.3 Arial, sans-serif; letter-spacing: .04em; text-align: center; }
.cct-game.paused .cct-dispatch,
.cct-game.paused .cct-choices,
.cct-game.paused .cct-progress { filter: brightness(.5) grayscale(.3); }
.cct-game.complete .cct-office { box-shadow: inset 0 0 0 3px #010a08, inset 0 0 0 5px rgba(164, 227, 107, .27), 0 0 30px rgba(164, 227, 107, .2); }

@keyframes cct-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

@media (max-width: 720px) {
  .game-page[data-engine="capitalrouteoffice"] .game-status { align-items: flex-start; flex-direction: column; gap: 7px; }
  .game-page[data-engine="capitalrouteoffice"] .game-status strong { max-width: none; }
  .cct-office { padding: 11px; }
  .cct-dispatch { min-height: 215px; padding: 29px 98px 23px 22px; }
  .cct-tickets { right: 12px; }
  .cct-tickets span { width: 52px; height: 38px; }
  .cct-tickets small { width: 58px; }
  .cct-choice { grid-template-columns: 42px 1fr; min-height: 66px; }
  .cct-choice i { display: none; }
}

@media (max-width: 520px) {
  .cct-title { margin-bottom: 10px; font-size: clamp(1.55rem, 8.3vw, 2.55rem); letter-spacing: .02em; }
  .cct-office { border-radius: 8px; }
  .cct-summary > span { padding: 7px 2px 6px; }
  .cct-summary small { font-size: .45rem; letter-spacing: .035em; }
  .cct-summary svg { display: none; }
  .cct-summary strong { font-size: .82rem; }
  .cct-dispatch { min-height: 205px; padding: 34px 13px 65px; border-radius: 15px; }
  .cct-country { margin: 9px auto 8px; font-size: clamp(1.7rem, 10vw, 3rem); letter-spacing: .04em; }
  .cct-kicker { font-size: .58rem; }
  .cct-region { font-size: .56rem; letter-spacing: .045em; }
  .cct-tickets { top: auto; right: 50%; bottom: 10px; grid-template-columns: repeat(3, 52px); gap: 6px; transform: translateX(50%); }
  .cct-tickets small { grid-column: 1 / -1; width: auto; font-size: .43rem; }
  .cct-tickets span { width: 52px; height: 28px; }
  .cct-tickets span::before { font-size: .42rem; }
  .cct-tickets i { width: 15px; height: 15px; }
  .cct-progress { gap: 7px; padding: 9px 4px 2px; }
  .cct-progress span { width: 25px; min-height: 25px; font-size: .62rem; }
  .cct-progress span:not(:last-child)::after { left: 25px; width: calc((100vw - 108px) / 5); }
  .cct-choices { grid-template-columns: 1fr; gap: 8px; margin-top: 9px; }
  .cct-choice { grid-template-columns: 37px 1fr auto; min-height: 54px; padding: 5px 8px; }
  .cct-choice > span { width: 31px; height: 36px; font-size: 1rem; }
  .cct-choice strong { padding: 0 7px; font-size: .95rem; }
  .cct-choice i { display: block; font-size: .44rem; }
  .cct-actions { margin-top: 11px; }
  .cct-actions button { min-width: 0; min-height: 46px; flex: 1; padding: 8px; font-size: .61rem; }
  .cct-note { min-height: 42px; margin-top: 9px; font-size: .72rem; }
  .cct-prompt { margin-top: 3px; font-size: .55rem; }
}

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