/* CTGM V64 · Presentation only. Scope: standalone games page and PWA games view.
   Original supplied artwork. No game state, prize data or interaction changes. */
html body.ctgm-ui.ctgm-game-page,
html body.ctgm-ui:has(#view-juegos:not([hidden])) {
  background: #100409 !important;
}
html body.ctgm-ui.ctgm-game-page::before,
html body.ctgm-ui:has(#view-juegos:not([hidden]))::before {
  content: "";
  display: block !important;
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, #10040912, #10040930 55%, #10040978),
    url("./scratch-background-v64.jpg") center center / cover no-repeat;
}
html body.ctgm-ui :is(.game-page, #view-juegos) {
  --ct-ink: #fff4df;
  --ct-muted: #dfcdb9;
  --ct-accent: #f2ce80;
  --sg-ink: #fff4df;
  --sg-muted: #dfcdb9;
  --sg-orange: #efba64;
  --sg-neon: #f2ce80;
}
html body.ctgm-ui .game-page {
  max-width: 1184px;
  padding: 24px 28px 64px;
}
html body.ctgm-ui :is(.game-page > h1, #view-juegos > h1) {
  margin: 0 0 18px;
  color: #f3d5a2 !important;
  text-shadow: 0 2px 12px #000;
  font-size: 11px !important;
  letter-spacing: .2em !important;
}
html body.ctgm-ui :is(.game-page, #view-juegos) .sg-room {
  --ct-ink: #fff4df;
  --ct-muted: #dfcdb9;
  --ct-accent: #f2ce80;
  --sg-neon: #f2ce80;
  --sg-orange: #efba64;
  background: linear-gradient(180deg, #16050ba8, #12060bea 380px, #0e080df5);
  border: 1px solid #ba88524f;
  border-radius: 26px;
  padding: clamp(18px, 3vw, 34px);
  box-shadow: 0 24px 70px #0008, inset 0 1px #f2ce801c;
}
html body.ctgm-ui :is(.game-page, #view-juegos) .sg-room::before,
html body.ctgm-ui :is(.game-page, #view-juegos) .sg-hero::after {
  display: none;
}
html body.ctgm-ui :is(.game-page, #view-juegos) .sg-top {
  color: #f0d0a3;
  font-size: 9px;
  line-height: 1.7;
  letter-spacing: .16em;
  padding-bottom: 18px;
  border-bottom: 1px solid #e7bc6530;
}
html body.ctgm-ui :is(.game-page, #view-juegos) .sg-live {
  color: #ffe0a3;
  font-size: 9px;
  border: 1px solid #e7bc6545;
  border-radius: 100px;
  padding: 5px 10px;
  background: #1b080ddd;
}
html body.ctgm-ui :is(.game-page, #view-juegos) .sg-hero {
  position: relative;
  min-height: 270px;
  margin: 24px 0;
  align-items: center;
}
html body.ctgm-ui :is(.game-page, #view-juegos) .sg-hero h2 {
  font-size: clamp(42px, 6.5vw, 78px);
  letter-spacing: -.055em;
  line-height: .98;
  margin: 14px 0 22px;
  text-shadow: 0 4px 24px #0b0009;
}
html body.ctgm-ui :is(.game-page, #view-juegos) .sg-hero h2 span {
  color: #f2ce80;
  text-shadow: 0 2px 0 #70502f, 0 0 32px #e9954c28;
}
html body.ctgm-ui :is(.game-page, #view-juegos) .sg-hero p:first-child {
  color: #f2ce80 !important;
  font-size: 10px;
  letter-spacing: .2em;
}
html body.ctgm-ui :is(.game-page, #view-juegos) .sg-hero p:last-child {
  max-width: 300px;
  font-size: 14px;
  text-shadow: 0 2px 10px #000;
}
html body.ctgm-ui :is(.game-page, #view-juegos) .sg-orb {
  display: none;
}
html body.ctgm-ui :is(.game-page, #view-juegos) .sg-stats {
  gap: 10px;
  margin: 8px 0 24px;
}
html body.ctgm-ui :is(.game-page, #view-juegos) .sg-stats > div {
  border: 1px solid #b3864b54;
  border-radius: 14px;
  padding: 17px 19px;
  background: linear-gradient(125deg, #392014c9, #1a0c10e8);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html body.ctgm-ui :is(.game-page, #view-juegos) .sg-stats small {
  font-size: 9px;
  letter-spacing: .11em;
}
html body.ctgm-ui :is(.game-page, #view-juegos) .sg-stats strong {
  color: #f7d99e !important;
  font-size: clamp(24px, 3vw, 32px);
}
html body.ctgm-ui :is(.game-page, #view-juegos) .sg-room button {
  background: #30151a !important;
  border-color: #ba885478 !important;
  color: #fff0d4 !important;
  -webkit-text-fill-color: #fff0d4 !important;
  border-radius: 9px !important;
}
html body.ctgm-ui :is(.game-page, #view-juegos) .sg-room button:focus-visible,
html body.ctgm-ui :is(.game-page, #view-juegos) .sg-board-scroll:focus-visible,
html body.ctgm-ui :is(.game-page, #view-juegos) .sg-room a:focus-visible {
  outline: 3px solid #ffe8b2;
  outline-offset: 3px;
}
html body.ctgm-ui :is(.game-page, #view-juegos) .sg-toolbar {
  gap: 8px;
}
html body.ctgm-ui :is(.game-page, #view-juegos) .sg-toolbar p {
  flex: 1 1 180px;
  font-size: 12px;
  margin: 0;
}
html body.ctgm-ui :is(.game-page, #view-juegos) .sg-message {
  margin: 16px 0 10px;
  line-height: 1.6;
  font-size: 12px;
}
html body.ctgm-ui :is(.game-page, #view-juegos) .sg-board-scroll {
  padding: 12px 6px 18px;
  scrollbar-color: #b99052 #201014;
  scrollbar-width: thin;
  border-top: 1px solid #d7aa5b33;
  border-bottom: 1px solid #d7aa5b33;
}
html body.ctgm-ui :is(.game-page, #view-juegos) .sg-board {
  gap: 10px;
  min-width: 570px;
}
html body.ctgm-ui :is(.game-page, #view-juegos) .sg-room button.sg-cell {
  position: relative;
  min-width: 44px;
  min-height: 80px;
  aspect-ratio: 2 / 3;
  padding: 8px 4px !important;
  border: 1px solid #d2ac67a6 !important;
  border-radius: 8px !important;
  box-shadow: 0 3px 10px #0008 !important;
  transition: border-color .18s ease, box-shadow .18s ease;
}
/* Available cells only. The number remains live text, with its original label. */
html body.ctgm-ui :is(.game-page, #view-juegos) .sg-room button.sg-cell:not(.sg-discovered) {
  background: #b58e22 url("./scratch-envelope-v64.jpg") center / 106% 104% no-repeat !important;
  justify-content: flex-end;
}
html body.ctgm-ui :is(.game-page, #view-juegos) .sg-cell:not(.sg-discovered) > span {
  min-width: 30px;
  padding: 3px 6px;
  border: 1px solid #e6c97691;
  border-radius: 5px;
  background: #100b06f2;
  color: #fff1c2 !important;
  -webkit-text-fill-color: #fff1c2 !important;
  font-size: clamp(13px, 1.7vw, 18px);
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: .03em;
  box-shadow: 0 2px 5px #0008;
}
html body.ctgm-ui :is(.game-page, #view-juegos) .sg-cell:not(.sg-discovered) > small {
  display: none;
}
html body.ctgm-ui :is(.game-page, #view-juegos) .sg-room button.sg-discovered {
  background: linear-gradient(145deg, #392029, #160e16) !important;
  border-color: #b99a7299 !important;
  gap: 4px;
  box-shadow: inset 0 1px #f2ce8024 !important;
}
html body.ctgm-ui :is(.game-page, #view-juegos) .sg-discovered span {
  color: #f2ce80;
  font-size: 17px;
}
html body.ctgm-ui :is(.game-page, #view-juegos) .sg-discovered small {
  color: #fff0d4 !important;
  font-size: 10px;
  line-height: 1.3;
  overflow-wrap: anywhere;
  -webkit-line-clamp: 3;
}
html body.ctgm-ui :is(.game-page, #view-juegos) .sg-footnote {
  margin: 15px 0 0;
  font-size: 11px;
}
html body.ctgm-ui :is(.game-page, #view-juegos) .sg-rewards {
  margin-top: 30px;
  padding-top: 25px;
  border-top: 1px solid #bc925041;
}
html body.ctgm-ui :is(.game-page, #view-juegos) .sg-rewards:empty {
  margin: 0;
  padding: 0;
  border: 0;
}
html body.ctgm-ui :is(.game-page, #view-juegos) .sg-rewards h3 {
  font-size: 19px;
  letter-spacing: .03em;
  margin: 5px 0;
}
html body.ctgm-ui :is(.game-page, #view-juegos) .sg-rewards .sg-awards article {
  background: #1d0e14;
  border-color: #b3864b54;
}
html body.ctgm-ui :is(.game-page, #view-juegos) .sg-dialog {
  background: radial-gradient(ellipse at top, #392016, #150b12 75%) !important;
  border-color: #cda865 !important;
}
html body.ctgm-ui :is(.game-page, #view-juegos) .sg-dialog::backdrop {
  background: #08030adb;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
html body.ctgm-ui :is(.game-page, #view-juegos) .sg-dialog button[data-sg="buy"],
html body.ctgm-ui :is(.game-page, #view-juegos) .sg-dialog button[type="submit"] {
  background: linear-gradient(115deg, #fae1a1, #ddb361) !important;
  color: #26140a !important;
  -webkit-text-fill-color: #26140a !important;
  border-color: #ffe3a2 !important;
}
@media (hover: hover) and (pointer: fine) {
  html body.ctgm-ui :is(.game-page, #view-juegos) .sg-room button.sg-cell:not(:disabled):hover {
    border-color: #fff1b8 !important;
    box-shadow: 0 0 0 2px #ecc77688, 0 0 18px #d7a55733 !important;
  }
}
@media (min-width: 900px) {
  html body.ctgm-ui.ctgm-game-page::before,
  html body.ctgm-ui:has(#view-juegos:not([hidden]))::before {
    background: linear-gradient(90deg, #10040908 25%, #100409df 60%, #100409),
      url("./scratch-background-v64.jpg") left center / auto 120% no-repeat;
  }
  html body.ctgm-ui :is(.game-page, #view-juegos) .sg-hero > div {
    margin-left: 43%;
  }
  html body.ctgm-ui :is(.game-page, #view-juegos) .sg-room {
    background: linear-gradient(180deg, #16050b52, #12060be8 410px, #0e080df5);
  }
}
@media (max-width: 600px) {
  html body.ctgm-ui .game-page { padding: 18px 12px 40px; }
  html body.ctgm-ui :is(.game-page, #view-juegos) .sg-room {
    padding: 16px 12px;
    border-radius: 18px;
  }
  html body.ctgm-ui :is(.game-page, #view-juegos) .sg-top {
    font-size: 8px;
    gap: 8px;
    letter-spacing: .07em;
    padding-bottom: 14px;
  }
  html body.ctgm-ui :is(.game-page, #view-juegos) .sg-live { font-size: 8px; padding: 4px 7px; }
  html body.ctgm-ui :is(.game-page, #view-juegos) .sg-hero { min-height: 240px; margin: 20px 0; }
  html body.ctgm-ui :is(.game-page, #view-juegos) .sg-hero h2 { font-size: 50px; }
  html body.ctgm-ui :is(.game-page, #view-juegos) .sg-hero p:last-child { max-width: 230px; font-size: 13px; }
  html body.ctgm-ui :is(.game-page, #view-juegos) .sg-stats { gap: 6px; margin-bottom: 18px; }
  html body.ctgm-ui :is(.game-page, #view-juegos) .sg-stats > div { padding: 13px 8px; border-radius: 10px; }
  html body.ctgm-ui :is(.game-page, #view-juegos) .sg-stats small { font-size: 8px; letter-spacing: .025em; }
  html body.ctgm-ui :is(.game-page, #view-juegos) .sg-board { gap: 7px; min-width: 525px; }
  html body.ctgm-ui :is(.game-page, #view-juegos) .sg-board-scroll { padding-inline: 4px; }
  html body.ctgm-ui :is(.game-page, #view-juegos) .sg-toolbar p { flex-basis: 100%; margin-bottom: 4px; }
  html body.ctgm-ui :is(.game-page, #view-juegos) .sg-room button.sg-cell { min-height: 76px; padding: 6px 2px !important; }
}
@media (prefers-reduced-motion: reduce) {
  html body.ctgm-ui :is(.game-page, #view-juegos) .sg-room * { transition: none !important; }
}
@media (forced-colors: active) {
  html body.ctgm-ui :is(.game-page, #view-juegos) .sg-room button.sg-cell {
    border: 2px solid ButtonText !important;
    background: ButtonFace !important;
  }
  html body.ctgm-ui :is(.game-page, #view-juegos) .sg-cell > span {
    color: ButtonText !important;
    -webkit-text-fill-color: ButtonText !important;
  }
}