/* ------------------------------------------------------------------
   game-maker.css: page-only rules for /roblox-ai-game-maker (2026-10-11).
   Loaded after /tokens.css, /landing.css and /seo-landing.css by that page
   only (<body class="sl gm">). The shared homepage-style components live in
   seo-landing.css; this file adds the hero video wall, the build loop
   (seven numbered step cards, v=5), the obby chat, the chip lists, the
   route cards and the compact maker cards, the pricing strip and plan
   cards, and the video card in the closing block.
   Static apart from hover and a blinking caret; prefers-reduced-motion
   removes every movement.
   ------------------------------------------------------------------ */

/* ---------- hero: a tilted, glowing wall of six guide loops ---------- */
.gm-wall-wrap { position: relative; width: 100%; max-width: 1080px; margin: 26px auto 0; padding-bottom: 40px; perspective: 1800px; }
.gm-wall-wrap::before {
  content: ""; position: absolute; inset: -14% -10% -4%; z-index: -1; pointer-events: none;
  background: radial-gradient(48% 52% at 50% 46%, rgba(124, 58, 237, .30), rgba(124, 58, 237, .08) 55%, transparent 76%);
}
.gm-wall {
  /* the top padding keeps the raised middle column inside the mask, which clips anything outside the box */
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; padding-top: 20px;
  transform: rotateX(22deg) rotateZ(-1.5deg); transform-origin: 50% 0;
  -webkit-mask-image: linear-gradient(180deg, #000 52%, rgba(0, 0, 0, .35) 82%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 52%, rgba(0, 0, 0, .35) 82%, transparent 100%);
}
.gm-tile {
  position: relative; margin: 0; aspect-ratio: 960 / 600; overflow: hidden; border-radius: 14px;
  border: 1px solid rgba(233, 226, 250, .14); background: #0b0a0e center / cover no-repeat;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 28px 56px -26px rgba(0, 0, 0, .95);
  transition: scale .35s cubic-bezier(.2, .7, .2, 1), border-color .2s ease;
}
/* the middle column sits a little higher, so the wall reads as stacked cards, not a table */
.gm-tile:nth-child(3n+2) { translate: 0 -18px; }
.gm-tile.is-lit {
  border-color: rgba(167, 139, 250, .6);
  box-shadow: 0 0 0 1px rgba(167, 139, 250, .22), 0 0 56px -8px rgba(139, 92, 246, .8), 0 28px 56px -26px rgba(0, 0, 0, .95);
}
.gm-tile:hover { scale: 1.03; border-color: rgba(167, 139, 250, .55); }
.gm-tile > video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
/* each tile is a link to its guide: the link covers the tile, its name sits top left where the fade is still opaque */
.gm-tile > figcaption { margin: 0; }
.gm-tile-link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; color: inherit; text-decoration: none; }
.gm-tile-link:focus-visible { outline: 2px solid var(--rc-focus); outline-offset: -3px; }
.gm-tile-name {
  position: absolute; left: 10px; top: 10px; display: inline-flex; align-items: center; height: 24px; padding: 0 9px;
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px; background: rgba(12, 11, 16, .74);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-size: 12px; font-weight: 600; line-height: 1; color: #f6f1ff; transition: border-color .2s ease, background-color .2s ease;
}
.gm-tile-link:hover .gm-tile-name { border-color: rgba(167, 139, 250, .6); background: rgba(46, 26, 84, .86); }

/* the chat box in front of the wall: one sentence in, systems out */
.gm-ask {
  position: absolute; left: 50%; bottom: 0; z-index: 2; translate: -50% 0;
  display: flex; align-items: center; gap: 14px; width: min(580px, 88%); padding: 10px 10px 10px 20px; text-align: left;
  border: 1px solid rgba(167, 139, 250, .42); border-radius: 18px; background: rgba(21, 16, 31, .94);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 0 0 6px rgba(139, 92, 246, .08), 0 0 60px -12px rgba(139, 92, 246, .7), 0 30px 60px -24px rgba(0, 0, 0, .95);
}
.gm-ask-text { flex: 1; min-width: 0; font-size: 15.5px; line-height: 1.4; color: #f6f1ff; }
.gm-ask-text::after, .gm-msg-text::after {
  content: ""; display: inline-block; width: 2px; height: 1.1em; margin-left: 3px; vertical-align: -.2em;
  background: #a78bfa; animation: gm-caret 1.1s steps(1, end) infinite;
}
@keyframes gm-caret { 50% { opacity: 0; } }
.gm-ask-send {
  flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  color: #fff; background: var(--rc-accent-fill, #7c3aed); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 8px 20px -6px rgba(124, 58, 237, .8);
}
.gm-wall-cap { margin-top: 18px; }

@media (max-width: 900px) {
  .gm-wall { gap: 12px; }
  .gm-tile-name { left: 8px; top: 8px; height: 22px; padding: 0 8px; font-size: 11px; }
}
@media (max-width: 640px) {
  .gm-wall-wrap { margin-top: 28px; padding-bottom: 56px; perspective: 1200px; }
  .gm-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding-top: 12px; transform: rotateX(16deg) rotateZ(-3deg); }
  .gm-tile { border-radius: 10px; }
  .gm-tile:nth-child(3n+2) { translate: none; }
  .gm-tile:nth-child(2n) { translate: 0 14px; }
  .gm-tile-name { left: 6px; top: 6px; height: 20px; padding: 0 7px; font-size: 10.5px; }
  .gm-ask { gap: 10px; width: 94%; padding: 8px 8px 8px 14px; border-radius: 14px; }
  .gm-ask-text { font-size: 13.5px; }
  .gm-ask-send { width: 34px; height: 34px; }
}

/* ---------- the short answer: same text, a quiet callout on this page ---------- */
.gm .sl-answer {
  max-width: 680px; margin-top: 48px; padding: 18px 24px 20px;
  border-color: rgba(167, 139, 250, .14); background: rgba(255, 255, 255, .02); box-shadow: none;
}
.gm .sl-answer-label { margin-bottom: 8px; font-size: 11.5px; }
.gm .sl-answer > p:not(.sl-answer-label) { font-size: 16px; line-height: 1.6; color: #b7abc8; }
@media (max-width: 640px) { .gm .sl-answer { margin-top: 36px; padding: 16px 18px 18px; } .gm .sl-answer > p:not(.sl-answer-label) { font-size: 15.5px; } }

/* ---------- the tool panel: an "Example" tag in its head ---------- */
.gm-panel-tag {
  display: inline-flex; align-items: center; height: 22px; margin-left: auto; padding: 0 8px;
  border: 1px solid rgba(233, 226, 250, .16); border-radius: 999px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .02em; line-height: 1; color: var(--rc-text-2);
}
.gm .sc-wrap + .v3-chips { margin-top: 48px; }

/* ---------- expanders: lists, notes and the walkthrough inside ---------- */
body.gm details.more > .more-body > .sl-ticks { margin: 2px 0 0; }
body.gm details.more > .more-body > p + .sl-ticks { margin-top: 12px; }
body.gm details.more > .more-body > .sl-ticks + p { margin-top: 20px; }
body.gm details.more > .more-body > p.gm-more-note { margin-top: 18px; font-size: 13px; color: var(--rc-text-3); }
body.gm details.more > .more-body strong { color: var(--rc-text); font-weight: 600; }
/* the six obby prompts in full: numbered instead of ticked */
ol.sl-ticks.gm-steps-full { counter-reset: gm-step; }
ol.sl-ticks.gm-steps-full > li { counter-increment: gm-step; }
ol.sl-ticks.gm-steps-full > li::before { content: counter(gm-step); font-size: 11.5px; color: #c4b5fd; background: rgba(139, 92, 246, .18); }
.gm-walk { margin: 4px 0 0; }
/* the full comparison table needs more room than a 760px column */
body.sl main > .section > .container > details.more.gm-wide { max-width: 1040px; }

/* ---------- example gallery: the Illustration tag sits in the card body, beside the title,
   because these loops have HUDs and Output panels in every corner ---------- */
body.gm .exg-body { position: relative; }
body.gm .exg-body .gm-card-tag { position: absolute; top: 18px; right: 18px; background: rgba(255, 255, 255, .03); }
body.gm .exg-title { padding-right: 96px; }

/* ---------- setup on phones: compact rows instead of tall cards ---------- */
@media (max-width: 640px) {
  .gm .v3-flow { max-width: none; }
  .gm .v3-node {
    grid-template-columns: 44px minmax(0, 1fr); justify-items: start; align-items: center; gap: 1px 14px;
    padding: 13px 16px; text-align: left; border-radius: 16px;
  }
  .gm .v3-node-ico { grid-row: span 2; width: 44px; height: 44px; margin: 0; border-radius: 12px; }
  .gm .v3-node-ico svg { width: 22px; height: 22px; }
  .gm .v3-node-title, .gm .v3-node-text { grid-column: 2; }
  .gm .v3-node-title { font-size: 16px; }
  .gm .v3-node-text { font-size: 13.5px; }
  .gm .v3-link { height: 34px; }
}

/* ---------- the build loop: the short version, then seven numbered step cards, each with a small picture.
   Desktop: four columns, step 2 (the example prompt) two wide. Tablet: two columns. Phones: the cards
   scroll sideways, like the example gallery and the plan cards. ---------- */
.gm .gm-loop-answer { margin: 0 auto 40px; }
.gm-loop { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.gm-loop-step {
  position: relative; display: flex; flex-direction: column; min-width: 0; padding: 12px 12px 20px;
  border: 1px solid rgba(255, 255, 255, .08); border-radius: 18px;
  background: linear-gradient(180deg, rgba(139, 92, 246, .07), rgba(255, 255, 255, .015));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04); transition: border-color .2s ease;
}
.gm-loop-step:hover { border-color: rgba(167, 139, 250, .3); }
.gm-loop-step.is-wide { grid-column: span 2; }
.gm-loop-art {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px;
  height: 128px; padding: 14px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .06); border-radius: 12px;
  background: radial-gradient(120% 100% at 50% 0%, rgba(139, 92, 246, .16), transparent 62%), #110f17;
}
.gm-loop-head { display: flex; align-items: center; gap: 10px; margin: 18px 8px 0; }
.gm-loop-n {
  flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  font-size: 13px; font-weight: 700; line-height: 1; color: #c4b5fd; background: rgba(139, 92, 246, .16); border: 1px solid rgba(139, 92, 246, .4);
}
.gm-loop-head h3 { margin: 0; font-size: 16.5px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; color: #f6f1ff; text-wrap: balance; }
.gm-loop-text { margin: 8px 8px 0; font-size: 14px; line-height: 1.5; color: var(--rc-text-2); text-wrap: pretty; }
.gm-loop + .v3-note { margin-top: 24px; }
.gm-loop:focus-visible { outline: 2px solid var(--rc-focus); outline-offset: 6px; border-radius: 18px; }

/* small pieces inside the pictures */
.gm-loop-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; white-space: nowrap;
  border: 1px solid rgba(233, 226, 250, .14); border-radius: 999px; background: #1a1424;
  font-size: 12.5px; font-weight: 500; line-height: 1; color: #e6def3;
}
.gm-loop-chip.is-done::before, .gm-loop-chip.is-next::before {
  display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%;
  font-family: var(--rc-font); font-size: 10px; font-weight: 800; line-height: 1;
}
.gm-loop-chip.is-done { border-color: rgba(52, 211, 153, .3); }
.gm-loop-chip.is-done::before { content: "\2713"; color: #34d399; background: rgba(52, 211, 153, .16); }
.gm-loop-chip.is-next::before { content: "+"; font-size: 12px; color: #fff; background: var(--rc-accent-fill, #7c3aed); }
.gm-loop-pill {
  display: inline-flex; align-items: center; height: 26px; padding: 0 10px; white-space: nowrap;
  border: 1px solid rgba(233, 226, 250, .16); border-radius: 999px; background: rgba(255, 255, 255, .03);
  font-size: 12px; font-weight: 600; letter-spacing: .01em; line-height: 1; color: #cfc3e0;
}
.gm-loop-pill.is-red { color: #fca5a5; border-color: rgba(248, 113, 113, .3); background: rgba(248, 113, 113, .08); }

/* 1: three chips on a ring, the arrows running clockwise */
.gm-art-ring { display: block; color: #a78bfa; }
.gm-ring { position: absolute; left: 50%; top: 50%; translate: -50% -50%; overflow: visible; }
.gm-art-ring .gm-loop-chip { position: absolute; left: 50%; top: 50%; height: 26px; padding: 0 9px; font-size: 12px; }
.gm-ring-a { translate: -50% calc(-50% - 40px); }
.gm-ring-b { translate: calc(-50% + 58px) calc(-50% + 24px); }
.gm-ring-c { translate: calc(-50% - 58px) calc(-50% + 24px); }
/* 2: the example prompt as a chat message, with the send button */
.gm-art-prompt { flex-wrap: nowrap; gap: 14px; padding: 14px 18px; }
.gm-loop-bubble {
  min-width: 0; max-width: 460px; padding: 11px 16px 12px; border-radius: 18px 18px 6px 18px;
  background: linear-gradient(180deg, rgba(139, 92, 246, .30), rgba(109, 40, 217, .20));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 18px 36px -22px rgba(124, 58, 237, .8);
  font-size: 14.5px; line-height: 1.45; color: #f6f1ff; text-wrap: pretty;
}
.gm-art-prompt .gm-ask-send { width: 36px; height: 36px; }
/* 3: the change list, like the tool panel above */
.gm-art-list { flex-direction: column; align-items: stretch; justify-content: center; gap: 6px; padding: 14px 20px; font-family: Menlo, Monaco, ui-monospace, monospace; }
.gm-loop-file { margin-bottom: 2px; font-size: 12px; color: #fbbf24; overflow-wrap: anywhere; }
.gm-loop-ln { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #f2f0f7; }
.gm-loop-ln .ok {
  flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  font-family: var(--rc-font); font-size: 11px; font-weight: 800; color: #34d399; background: rgba(52, 211, 153, .16);
}
/* 4: two keycaps */
.gm-art-keys { gap: 10px; }
.gm-key {
  display: grid; place-items: center; min-width: 52px; height: 52px; padding: 0 14px;
  border: 1px solid rgba(233, 226, 250, .2); border-bottom-width: 3px; border-radius: 12px;
  background: linear-gradient(180deg, #241b33, #17121f); box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .9);
  font-family: var(--rc-font); font-size: 17px; font-weight: 600; line-height: 1; color: #f6f1ff;
}
.gm-key-plus { font-size: 16px; color: #8f84a3; }
/* 5: a Play button and what the short test does */
.gm-art-test { gap: 14px; }
.gm-loop-play {
  flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; color: #fff;
  background: var(--rc-accent-fill, #7c3aed); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 0 28px -4px rgba(139, 92, 246, .8);
}
.gm-loop-play svg { translate: 1px 0; }
.gm-loop-pills { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
/* 6: the systems so far and the next ones */
.gm-art-next { align-content: center; gap: 8px; padding: 14px 16px; }
/* 7: publishing stays with you */
.gm-art-publish { flex-direction: column; gap: 12px; }
.gm-loop-upload {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; color: #e6def3;
  background: linear-gradient(180deg, rgba(139, 92, 246, .28), rgba(91, 33, 182, .12)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}

/* tablets: two columns; the wide card becomes one column and the last card spans the row */
@media (max-width: 1099px) {
  .gm-loop { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; margin: 0 auto; }
  .gm-loop-step.is-wide { grid-column: auto; }
  .gm-loop-step:last-child { grid-column: 1 / -1; }
  /* a smaller bubble, so the example prompt fits its picture box; the box grows rather than crop it */
  .gm-art-prompt { height: auto; min-height: 128px; gap: 8px; padding: 10px; }
  .gm-loop-bubble { font-size: 13.5px; padding: 10px 12px 11px; }
  .gm-art-prompt .gm-ask-send { width: 30px; height: 30px; }
}
/* phones: the cards scroll sideways */
@media (max-width: 640px) {
  .gm .gm-loop-answer { margin-bottom: 28px; }
  .gm-loop {
    display: flex; gap: 12px; max-width: none; overflow-x: auto; scroll-snap-type: x mandatory;
    margin: 0 calc(-1 * var(--rc-gutter)); padding: 0 var(--rc-gutter) 12px; scroll-padding: 0 var(--rc-gutter);
  }
  .gm-loop > .gm-loop-step { flex: 0 0 80%; scroll-snap-align: start; }
  .gm-loop:focus-visible { outline-offset: -2px; border-radius: 0; }
  .gm-loop-art { height: 116px; }
  .gm-loop-bubble { font-size: 13.5px; padding: 10px 13px 11px; }
  .gm-art-prompt { height: auto; min-height: 116px; gap: 10px; padding: 12px; }
  .gm-art-prompt .gm-ask-send { width: 32px; height: 32px; }
}

/* ---------- other AI game makers: compact cards under the five routes ---------- */
.gm-makers-wrap { max-width: 1040px; margin: 40px auto 0; }
.gm-makers-title { margin: 0; text-align: center; font-size: 18px; font-weight: 600; line-height: 1.3; letter-spacing: -.012em; color: #f6f1ff; }
.gm-makers-sub { margin: 6px 0 16px; text-align: center; font-size: 13px; line-height: 1.5; color: var(--rc-text-3); }
.gm-makers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.gm-maker {
  display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 14px; align-content: start; min-width: 0;
  padding: 16px 18px 17px 16px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 16px;
  background: rgba(255, 255, 255, .02); transition: border-color .2s ease;
}
.gm-maker:hover { border-color: rgba(167, 139, 250, .3); }
.gm-maker.is-3d { border-style: dashed; border-color: rgba(233, 226, 250, .14); }
.gm-maker > .mb-ico { grid-row: 1 / span 3; }
.gm-maker > p { grid-column: 2; margin: 0; }
.gm-maker-name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 15.5px; font-weight: 650; line-height: 1.3; color: #f2f0f7; }
.gm-maker-tag {
  display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; line-height: 1; color: #b7abc8; background: rgba(255, 255, 255, .06);
}
.gm-maker > p.gm-maker-what { margin-top: 4px; font-size: 13.5px; line-height: 1.45; color: var(--rc-text-2); text-wrap: pretty; }
.gm-maker > p.gm-maker-cost { margin-top: 4px; font-size: 13px; line-height: 1.45; color: var(--rc-text-3); }
@media (max-width: 1023px) { .gm-makers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .gm-makers { grid-template-columns: minmax(0, 1fr); gap: 10px; } .gm-maker { padding: 14px 16px 15px 14px; } }

/* ---------- obby: the loop beside four chat messages, the last one still being typed ---------- */
.gm-obby { align-items: center; gap: 56px; }
.gm-obby .sl-split-media { position: static; }
.gm-chat { min-width: 0; }
.gm-chat-list { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; margin: 0; padding: 0; list-style: none; }
.gm-msg {
  max-width: 88%; padding: 12px 17px 13px; border-radius: 20px 20px 6px 20px;
  background: linear-gradient(180deg, rgba(139, 92, 246, .30), rgba(109, 40, 217, .20));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 18px 36px -22px rgba(124, 58, 237, .8);
  font-size: 15.5px; line-height: 1.45; color: #f6f1ff; text-wrap: pretty;
  transition: translate .25s cubic-bezier(.2, .7, .2, 1);
}
.gm-msg:not(.is-typing):hover { translate: -3px 0; }
/* the composer: the hero's chat box, holding the next prompt */
.gm-msg.is-typing {
  align-self: stretch; max-width: none; display: flex; align-items: center; gap: 14px; margin-top: 14px; padding: 10px 10px 10px 18px;
  border: 1px solid rgba(167, 139, 250, .42); border-radius: 18px; background: rgba(21, 16, 31, .94);
  box-shadow: 0 0 0 6px rgba(139, 92, 246, .08), 0 0 60px -12px rgba(139, 92, 246, .7), 0 30px 60px -24px rgba(0, 0, 0, .95);
}
.gm-msg-text { flex: 1; min-width: 0; }
.gm-split-note { max-width: 46ch; margin: 18px 0 0 auto; font-size: 13px; line-height: 1.5; text-align: right; color: #8f84a3; }
@media (max-width: 900px) {
  /* one column: the loop and the chat keep a readable width instead of filling a tablet */
  .gm-obby { gap: 28px; }
  .gm-obby .sl-split-media, .gm-chat { width: 100%; max-width: 600px; margin: 0 auto; }
  .gm-split-note { margin: 14px auto 0; text-align: center; }
}
@media (max-width: 480px) {
  .gm-chat-list { gap: 10px; }
  .gm-msg { max-width: 92%; padding: 11px 14px 12px; font-size: 15px; }
  .gm-msg.is-typing { gap: 10px; padding: 8px 8px 8px 14px; border-radius: 14px; font-size: 14.5px; }
  .gm-msg.is-typing .gm-ask-send { width: 34px; height: 34px; }
}

/* ---------- route cards ---------- */
.gm .gm-routes .mb-name { padding-right: 4px; }
.gm .gm-routes .mb-list li { font-size: 13.5px; }
.gm .gm-pills { margin-top: 28px; }
/* below 1180px five cards no longer fit one row cleanly: they scroll sideways, like the example gallery */
@media (max-width: 1180px) {
  .gm .gm-routes {
    display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
    margin: 0 calc(-1 * var(--rc-gutter)); padding: 0 var(--rc-gutter) 12px; scroll-padding: 0 var(--rc-gutter);
  }
  .gm .gm-routes > .mb-card { flex: 0 0 clamp(250px, 30%, 290px); scroll-snap-align: start; }
}
@media (max-width: 640px) { .gm .gm-routes > .mb-card { flex-basis: 76%; } }

/* ---------- limits: two cards of equal-width chips ---------- */
.gm-chiplist { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 0; padding: 0; list-style: none; }
.gm-chiplist li {
  display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 8px 14px 8px 10px;
  border: 1px solid rgba(255, 255, 255, .08); border-radius: 12px; background: rgba(255, 255, 255, .025);
  font-size: 14px; font-weight: 500; line-height: 1.35; color: #e6def3;
}
.gm-chiplist li::before {
  content: "\2713"; flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  font-family: var(--rc-font); font-size: 11px; font-weight: 800; line-height: 1; color: #34d399; background: rgba(52, 211, 153, .16);
}
.gm-chiplist.is-no li { color: #cfc3e0; }
.gm-chiplist.is-no li::before { content: "\2715"; color: #fca5a5; background: rgba(248, 113, 113, .14); }
.gm-duo .sl-duo-card.is-rocode .gm-chiplist li { border-color: rgba(167, 139, 250, .18); background: rgba(139, 92, 246, .07); }
/* desktop: the "does not" card holds twice the chips, in two columns, so both cards have four rows */
@media (min-width: 1100px) {
  .gm-duo { max-width: none; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .gm-chiplist.is-no { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* tablet: the cards stack, each with two columns of chips, so no chip wraps */
@media (min-width: 641px) and (max-width: 1099px) {
  .gm-duo { max-width: 860px; grid-template-columns: minmax(0, 1fr); }
  .gm-chiplist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .gm-chiplist { gap: 6px; }
  .gm-chiplist li { min-height: 40px; padding: 7px 12px 7px 9px; gap: 9px; font-size: 14px; }
  .gm-chiplist li::before { width: 20px; height: 20px; font-size: 10px; }
}

/* ---------- pricing: a Starter strip, then three paid cards (homepage pricing layout) ---------- */
.gm-starter {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px 36px;
  margin: 0 0 16px; padding: 20px 22px 20px 28px;
  border: 1px solid rgba(167, 139, 250, .32); border-radius: 18px;
  background: linear-gradient(90deg, rgba(139, 92, 246, .16), rgba(255, 255, 255, .02) 72%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 40px 90px -50px rgba(124, 58, 237, .6);
}
.gm-starter-plan { display: flex; align-items: center; gap: 12px; margin: 0; }
.gm-starter-name { font-size: 15px; font-weight: 600; color: #cfc3e0; }
.gm-starter-price { font-size: 34px; font-weight: 650; line-height: 1; letter-spacing: -.04em; color: #f6f1ff; font-variant-numeric: tabular-nums; }
.gm .gm-starter .mb-tag { position: static; }
.gm-starter-points { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 0; padding: 0; list-style: none; font-size: 14.5px; line-height: 1.45; color: #b7abc8; }
.gm-starter-points li { display: inline-flex; align-items: center; gap: 9px; }
.gm-starter-points li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: #a78bfa; }
.gm-starter-points strong { color: #f6f1ff; font-weight: 600; }
.gm-starter-btn { min-height: 46px; padding: 0 24px; border-radius: 12px; font-weight: 600; white-space: nowrap; }

.gm-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
/* position: relative keeps the visually hidden "(added on ...)" text inside the card, so it cannot widen the page from the phone scroller */
.gm-plan {
  position: relative; display: flex; flex-direction: column; min-width: 0; padding: 24px 22px 22px;
  border: 1px solid rgba(255, 255, 255, .08); border-radius: 18px;
  background: linear-gradient(180deg, rgba(139, 92, 246, .07), rgba(255, 255, 255, .015));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04); transition: border-color .2s ease;
}
.gm-plan:hover { border-color: rgba(167, 139, 250, .3); }
.gm-plan-name { font-size: 16px; font-weight: 600; line-height: 1.3; color: #e6def3; }
.gm-plan-price { margin-top: 10px; font-size: 38px; font-weight: 650; line-height: 1; letter-spacing: -.045em; color: #f6f1ff; white-space: nowrap; font-variant-numeric: tabular-nums; }
.gm-plan-price span { margin-left: 6px; font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--rc-text-3); white-space: nowrap; }
.gm-plan-credits { margin-top: 20px; font-size: 14px; line-height: 1.3; color: #b7abc8; }
.gm-plan-credits strong { margin-right: 3px; font-size: 22px; font-weight: 650; letter-spacing: -.03em; color: #f6f1ff; font-variant-numeric: tabular-nums; }
/* the credits bar: each plan's credits against Ultra's 500 */
.gm-plan-bar { position: relative; display: block; height: 6px; margin-top: 12px; overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, .06); }
.gm-plan-bar > span { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--v, 0) * 100%); min-width: 8px; border-radius: inherit; background: linear-gradient(90deg, #6d28d9, #a78bfa); }
.gm-plan-models { display: grid; gap: 9px; margin: 20px 0 0; padding: 18px 0 0; border-top: 1px solid rgba(255, 255, 255, .06); list-style: none; }
.gm-plan-models li { display: flex; align-items: center; gap: 10px; font-size: 14px; line-height: 1.35; color: #8f84a3; }
.gm-plan-models li.is-added { font-weight: 500; color: #f6f1ff; }
.gm-plan-tick, .gm-plan-plus { flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font-family: var(--rc-font); font-weight: 800; line-height: 1; }
.gm-plan-tick { font-size: 9.5px; color: #8f84a3; background: rgba(255, 255, 255, .06); }
.gm-plan-plus { font-size: 13px; color: #fff; background: var(--rc-accent-fill, #7c3aed); box-shadow: 0 0 12px -2px rgba(139, 92, 246, .8); }
.gm-plan-note { margin-top: 12px; font-size: 13px; line-height: 1.4; color: #8f84a3; }
/* the button sits at the bottom of every card, with at least 24px above it */
.gm-plan-btn { width: 100%; min-height: 44px; margin-top: auto; border-radius: 12px; font-weight: 600; }
.gm-plan-models, .gm-plan-note { margin-bottom: 24px; }
.gm-plan-models:has(+ .gm-plan-note) { margin-bottom: 0; }
.gm .gm-plans + .mb-foot { margin-top: 26px; }
.gm .mb-foot .link-arrow { white-space: nowrap; }

@media (max-width: 1100px) {
  .gm-starter { grid-template-columns: minmax(0, 1fr) auto; }
  .gm-starter-points { grid-column: 1 / -1; grid-row: 2; }
}
/* tablets: the three paid cards stay in one row (two columns left Ultra alone on a second row);
   below 800px the price and the padding shrink so "$29.99 a month" still fits on one line */
@media (min-width: 641px) and (max-width: 800px) {
  .gm-plans { gap: 12px; }
  .gm-plan { padding: 22px 16px 20px; }
  .gm-plan-price { font-size: 28px; }
}
@media (max-width: 640px) {
  .gm-starter { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 20px; }
  .gm-starter-points { grid-column: auto; grid-row: auto; display: grid; gap: 8px; }
  .gm-starter-btn { width: 100%; }
  /* phones: the three paid cards scroll sideways, like the example gallery */
  .gm-plans {
    display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
    margin: 0 calc(-1 * var(--rc-gutter)); padding: 0 var(--rc-gutter) 12px; scroll-padding: 0 var(--rc-gutter);
  }
  .gm-plans > .gm-plan { flex: 0 0 78%; scroll-snap-align: start; }
  .gm .mb-foot .link-arrow { display: flex; justify-content: center; }
}

/* ---------- keep reading: a short section ---------- */
body.sl main > .section.gm-more { padding-top: 24px; }

/* ---------- closing block: the game card holds a loop instead of a still ---------- */
.gm-fa-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #0b0a0e center / cover no-repeat; border-bottom: 1px solid var(--rc-line); }
.gm-fa-media > video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
/* seo-landing.css sets .sl .fa-game { position: relative } after landing.css's absolute card rule,
   which drops the game card into the flow on desktop; pin it where the homepage puts it. */
@media (min-width: 1024px) {
  .gm .final-art .fa-game { position: absolute; top: 96px; right: 0; }
  .gm .final-art .fa-prompt { width: 66%; }
}

/* ---------- reduced motion: no tilt animation, no caret, no hover movement ---------- */
@media (prefers-reduced-motion: reduce) {
  .gm-tile, .gm-tile:hover { transition: none; scale: none; }
  .gm-ask-text::after, .gm-msg-text::after { animation: none; }
  .gm-msg, .gm-msg:not(.is-typing):hover { transition: none; translate: none; }
  .gm-loop-step, .gm-maker { transition: none; }
}