:root {
  --navy: #071a47;
  --blue: #075be8;
  --sky: #36c9ff;
  --cyan: #19e1e8;
  --apple: #a9f529;
  --apple-dark: #78c900;
  --ink: #0b1b3f;
  --muted: #667394;
  --paper: #ffffff;
  --soft: #f2f8ff;
  --line: #d9e5f4;
  --danger: #a62920;
  --radius: 20px;
  --shadow: 0 18px 48px rgba(7, 40, 108, .14);
}

* { box-sizing: border-box; }
html { font-size: 16px; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: ui-rounded, "Nunito", "Arial Rounded MT Bold", Inter, system-ui, sans-serif; line-height: 1.5; }
button, input, textarea { font: inherit; }
button, label { -webkit-tap-highlight-color: transparent; }

.topbar { height: 76px; padding: 0 clamp(20px, 4vw, 62px); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.96); }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--navy); text-decoration: none; font-size: 1.2rem; font-weight: 800; }
.brand img { width: 48px; height: 48px; object-fit: contain; border-radius: 50%; }
.brand strong { color: var(--blue); }
.top-badge { display: flex; align-items: center; gap: 8px; color: #32608d; font-size: .84rem; font-weight: 700; }
.top-badge span { display: grid; place-items: center; width: 24px; height: 24px; color: var(--navy); border-radius: 8px; background: var(--apple); }
.site-nav { display: flex; align-items: center; gap: 5px; margin-left: auto; margin-right: 22px; padding: 4px; border-radius: 13px; background: var(--soft); }
.site-nav a { padding: 7px 11px; color: var(--muted); border-radius: 10px; text-decoration: none; font-size: .8rem; font-weight: 850; }
.site-nav a:hover, .site-nav a.is-active { color: var(--navy); background: white; box-shadow: 0 2px 8px rgba(7,40,108,.1); }

.page-shell { min-height: calc(100vh - 76px); display: grid; grid-template-columns: minmax(0, 60%) minmax(390px, 40%); }
.order-panel { width: min(820px, 100%); margin: 0 auto; padding: 48px clamp(24px, 5vw, 70px) 80px; }
.intro { max-width: 700px; }
.eyebrow { margin: 0 0 10px; color: var(--blue); font-size: .82rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
h1, h2 { margin-top: 0; line-height: 1.08; letter-spacing: -.035em; }
h1 { margin-bottom: 0; font-size: clamp(2.25rem, 4.2vw, 3.65rem); font-weight: 900; }
h1 span { color: var(--blue); }
.intro > p:last-child { max-width: 640px; margin: 17px 0 0; color: var(--muted); font-size: 1.05rem; }

.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 38px 0 34px; }
.step { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 0; color: #9aa6bd; border: 0; background: none; text-align: left; cursor: pointer; }
.step::after { content: ''; position: absolute; top: 17px; left: 41px; right: 9px; height: 3px; border-radius: 9px; background: var(--line); }
.step:last-child::after { display: none; }
.step span { z-index: 1; display: grid; place-items: center; width: 35px; height: 35px; border: 2px solid var(--line); border-radius: 12px; background: white; font-weight: 900; }
.step em { font-style: normal; font-size: .78rem; font-weight: 800; }
.step.is-current, .step.is-done { color: var(--blue); }
.step.is-current span { color: var(--navy); border-color: var(--apple-dark); background: var(--apple); box-shadow: 0 0 0 5px rgba(169,245,41,.18); transform: rotate(-3deg); }
.step.is-done span { color: white; border-color: var(--blue); background: var(--blue); }
.step.is-done::after { background: linear-gradient(90deg, var(--blue), var(--sky)); }

.notice { margin-bottom: 22px; padding: 13px 16px; color: var(--danger); border: 1px solid #f0b5ae; border-radius: 13px; background: #fff4f2; }
.form-step { animation: enter .25s ease; }
@keyframes enter { from { opacity: 0; transform: translateY(7px); } }
.section-heading { display: flex; gap: 14px; margin-bottom: 26px; }
.section-heading > span { flex: 0 0 auto; display: grid; place-items: center; width: 45px; height: 45px; color: var(--navy); border: 2px solid var(--navy); border-radius: 14px; background: var(--apple); font-weight: 900; transform: rotate(-3deg); }
.section-heading h2 { margin: 0; font-size: 1.5rem; font-weight: 900; }
.section-heading p { margin: 5px 0 0; color: var(--muted); }
fieldset { margin: 0 0 28px; padding: 0; border: 0; }
legend { margin-bottom: 12px; font-weight: 900; }

.game-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.game-card { position: relative; min-width: 0; min-height: 148px; padding: 15px 12px; border: 2px solid var(--line); border-radius: 18px; background: white; cursor: pointer; transition: .18s ease; }
.game-card input, .package-grid input, .choice-row input { position: absolute; opacity: 0; pointer-events: none; }
.game-card:has(input:checked), .package-grid label:has(input:checked), .choice-row label:has(input:checked) { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(7,91,232,.11); }
.game-card:has(input:checked) { background: #f1f7ff; transform: translateY(-2px); }
.game-card:has(input:focus-visible), .package-grid label:has(input:focus-visible), .choice-row label:has(input:focus-visible) { outline: 3px solid rgba(7,91,232,.25); outline-offset: 2px; }
.game-icon { display: grid; place-items: center; width: 43px; height: 43px; margin-bottom: 12px; color: var(--navy); border: 2px solid var(--navy); border-radius: 13px; background: var(--apple); font-size: 1.4rem; font-weight: 900; }
.game-card:nth-child(2) .game-icon { background: var(--sky); }
.game-card:nth-child(3) .game-icon { background: #60f0d3; }
.game-card:nth-child(4) .game-icon { background: #ffe25d; }
.game-card strong, .game-card small { display: block; }
.game-card strong { font-size: .92rem; }
.game-card small { margin-top: 3px; color: var(--muted); font-size: .74rem; line-height: 1.3; }

.launch-offer { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 4px; padding: 19px 21px; color: var(--navy); border: 3px solid var(--navy); border-radius: 18px; background: linear-gradient(115deg, var(--apple), #d9ff7a); box-shadow: 7px 7px 0 rgba(7,26,71,.12); }
.launch-offer div { display: grid; gap: 2px; }
.launch-offer div > span { font-size: .67rem; font-weight: 900; letter-spacing: .1em; }
.launch-offer strong { font-size: 1.02rem; }
.launch-offer small { color: #35581a; font-size: .78rem; }
.launch-price { flex: 0 0 auto; display: flex !important; align-items: flex-end; gap: 7px !important; text-align: right; }
.launch-price s { color: #58723a; font-size: .88rem; font-weight: 800; }
.launch-price b { color: var(--blue); font-size: 1.45rem; font-weight: 950; line-height: 1; }

.package-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.package-grid label { position: relative; display: block; border: 2px solid var(--line); border-radius: 17px; cursor: pointer; }
.package-grid label > span { display: flex; flex-direction: column; min-height: 126px; padding: 17px; }
.package-grid strong { font-size: 1rem; }
.package-grid small { color: var(--muted); font-size: .78rem; }
.package-grid b { margin-top: auto; color: var(--blue); font-size: 1rem; }
.package-grid i { position: absolute; top: -11px; right: 10px; padding: 4px 9px; color: var(--navy); border-radius: 999px; background: var(--apple); font-size: .68rem; font-style: normal; font-weight: 900; }

.actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 30px; }
.actions-end { justify-content: flex-end; }
.button { min-height: 50px; padding: 0 23px; border: 0; border-radius: 15px; cursor: pointer; font-weight: 900; transition: .15s ease; }
.button:hover { transform: translateY(-2px); }
.button:focus-visible { outline: 3px solid rgba(7,91,232,.25); outline-offset: 3px; }
.button.primary { color: white; background: var(--blue); box-shadow: 0 8px 18px rgba(7,91,232,.2); }
.button.primary:hover { background: #064cc3; }
.button.ghost { color: var(--navy); background: var(--soft); }
.button:disabled { cursor: wait; opacity: .65; transform: none; }

.upload-zone { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 220px; padding: 28px; border: 3px dashed #9bc8e5; border-radius: var(--radius); background: linear-gradient(145deg, #f1fbff, #f6fff0); text-align: center; cursor: pointer; }
.upload-zone.is-dragging { border-color: var(--blue); background: #ebf5ff; }
.upload-zone input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.upload-zone small { margin-top: 5px; color: var(--muted); }
.upload-icon { display: grid; place-items: center; width: 50px; height: 50px; margin-bottom: 12px; color: var(--navy); border: 2px solid var(--navy); border-radius: 16px; background: var(--apple); font-size: 1.7rem; font-weight: 900; transform: rotate(-3deg); }
.upload-meta { display: flex; justify-content: space-between; margin: 10px 2px 16px; color: var(--muted); font-size: .8rem; }
.photo-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.photo-item { position: relative; min-height: 105px; overflow: hidden; border-radius: 15px; background: var(--soft); }
.photo-item img { display: block; width: 100%; height: 105px; object-fit: cover; }
.photo-item button { position: absolute; top: 7px; right: 7px; display: grid; place-items: center; width: 29px; height: 29px; color: white; border: 0; border-radius: 10px; background: rgba(7,26,71,.82); cursor: pointer; }
.photo-item.is-uploading::after { content: 'Subiendo…'; position: absolute; inset: auto 0 0; padding: 5px; color: white; background: rgba(7,26,71,.78); text-align: center; font-size: .73rem; }
.privacy-note { display: grid; grid-template-columns: auto 1fr; gap: 10px; margin-top: 16px; padding: 13px 15px; color: #356276; border-radius: 14px; background: #ebfbff; font-size: .82rem; }
.privacy-note p { margin: 0; }

.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; }
.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 20px; font-weight: 800; }
.field.full { grid-column: 1 / -1; margin-bottom: 0; }
.field span { font-size: .9rem; }
.field span small { color: var(--muted); font-weight: 500; }
.field input, .field textarea { width: 100%; padding: 13px 14px; color: var(--ink); border: 2px solid #cfdced; border-radius: 13px; background: white; outline: none; }
.field input:focus, .field textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(7,91,232,.11); }
.field input:user-invalid { border-color: #d15c51; }
.choice-row { display: grid; gap: 10px; }
.world-row { grid-template-columns: repeat(4, 1fr); }
.platform-row { grid-template-columns: repeat(3, 1fr); }
.choice-row label { position: relative; display: block; padding: 13px 12px; border: 2px solid var(--line); border-radius: 14px; cursor: pointer; }
.choice-row span, .choice-row strong, .choice-row small { display: block; }
.choice-row span { font-weight: 800; }
.choice-row small { margin-top: 2px; color: var(--muted); font-size: .76rem; font-weight: 500; }
.platform-note { margin: 11px 2px 0; color: var(--muted); font-size: .82rem; }

.summary { overflow: hidden; border: 2px solid var(--line); border-radius: var(--radius); }
.summary-row { display: flex; justify-content: space-between; gap: 24px; padding: 14px 17px; border-bottom: 1px solid var(--line); }
.summary-row:last-child { border-bottom: 0; }
.summary-row span { color: var(--muted); }
.summary-row strong { text-align: right; }
.summary-row.total { color: var(--navy); border: 0; background: var(--apple); font-size: 1.08rem; }
.summary-row.total span { color: #365900; }
.process-note { display: grid; gap: 3px; margin-top: 16px; padding: 14px 16px; color: #15536c; border-radius: 14px; background: #eafbff; font-size: .84rem; }
.consent { display: grid; grid-template-columns: auto 1fr; gap: 11px; margin-top: 18px; color: var(--muted); font-size: .84rem; cursor: pointer; }
.consent input { width: 19px; height: 19px; accent-color: var(--blue); }
.demo-badge { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 16px; padding: 12px 14px; color: #725300; border: 1px solid #efd579; border-radius: 12px; background: #fff9dc; font-size: .84rem; }
.pay { display: flex; align-items: center; justify-content: space-between; gap: 25px; min-width: 340px; color: white; background: #009ee3; }
.pay:hover { background: #0088c6; }
.pay b { padding-left: 17px; border-left: 1px solid rgba(255,255,255,.45); }
.payment-note { margin: 14px 0 0; color: var(--muted); text-align: right; font-size: .77rem; }

.visual-panel { position: sticky; top: 0; height: calc(100vh - 76px); overflow: hidden; background: linear-gradient(155deg, #0b7cf0 0%, #35caff 50%, #72e5ed 100%); }
.visual-panel::before { content: ''; position: absolute; inset: 0; opacity: .35; background-image: radial-gradient(circle, white 1.5px, transparent 1.5px); background-size: 34px 34px; }
.sky-orb { position: absolute; border-radius: 50%; filter: blur(2px); }
.orb-one { width: 340px; height: 340px; top: -120px; right: -90px; background: rgba(169,245,41,.75); }
.orb-two { width: 220px; height: 220px; bottom: -70px; left: -80px; background: rgba(7,91,232,.55); }
.game-window { position: absolute; top: 9%; left: 9%; width: 82%; height: 48%; overflow: hidden; border: 5px solid var(--navy); border-radius: 27px; background: #dff9ff; box-shadow: 13px 14px 0 rgba(7,26,71,.2); transform: rotate(1.5deg); }
.window-bar { height: 38px; display: flex; align-items: center; gap: 6px; padding: 0 12px; color: white; background: var(--navy); }
.window-bar span { width: 10px; height: 10px; border-radius: 50%; background: var(--apple); }
.window-bar span:nth-child(2) { background: var(--sky); }
.window-bar span:nth-child(3) { background: #ffe25d; }
.window-bar b { margin-left: auto; font-size: .66rem; letter-spacing: .12em; }
.game-scene { position: relative; height: calc(100% - 38px); overflow: hidden; background: linear-gradient(#46d6ff 0 62%, #abf42f 62%); }
.score-pill { position: absolute; z-index: 3; top: 12px; right: 13px; padding: 6px 10px; color: var(--navy); border: 2px solid var(--navy); border-radius: 12px; background: white; font-size: .76rem; font-weight: 900; }
.rocket { position: absolute; z-index: 3; width: 40%; height: auto; left: 32%; top: 3%; object-fit: contain; filter: drop-shadow(7px 8px 0 rgba(7,26,71,.15)); transform: rotate(8deg); }
.planet { position: absolute; z-index: 2; right: -10%; bottom: -30%; width: 55%; aspect-ratio: 1; border: 4px solid var(--navy); border-radius: 50%; background: #96ef27; }
.planet span { position: absolute; width: 30%; height: 15%; top: 25%; left: 24%; border-radius: 50%; background: #5ac216; }
.scene-floor { position: absolute; z-index: 1; left: -10%; right: -10%; bottom: -22%; height: 42%; border: 4px solid var(--navy); border-radius: 50% 50% 0 0; background: var(--apple); }
.cloud { position: absolute; width: 65px; height: 24px; border-radius: 30px; background: rgba(255,255,255,.92); }
.cloud::before, .cloud::after { content: ''; position: absolute; bottom: 0; border-radius: 50%; background: inherit; }
.cloud::before { width: 30px; height: 30px; left: 9px; }.cloud::after { width: 38px; height: 38px; right: 7px; }
.cloud-one { top: 22%; left: 8%; }.cloud-two { top: 47%; right: 10%; transform: scale(.7); }
.floating-card { position: absolute; z-index: 5; display: flex; align-items: center; gap: 10px; padding: 11px 14px; color: var(--navy); border: 3px solid var(--navy); border-radius: 15px; background: white; box-shadow: 7px 7px 0 rgba(7,26,71,.18); }
.floating-card > span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--apple); font-weight: 900; }
.floating-card b, .floating-card small { display: block; white-space: nowrap; }.floating-card b { font-size: .82rem; }.floating-card small { color: var(--muted); font-size: .68rem; }
.card-player { top: 48%; left: 4%; transform: rotate(-4deg); }.card-power { top: 37%; right: 2%; transform: rotate(5deg); }.card-power > span { background: #58e9f0; }
.visual-copy { position: absolute; z-index: 4; left: 9%; right: 32%; bottom: 7%; color: var(--navy); }
.tag { display: inline-block; margin-bottom: 10px; padding: 7px 11px; border: 2px solid var(--navy); border-radius: 999px; background: var(--apple); font-size: .7rem; font-weight: 900; letter-spacing: .08em; }
.visual-copy h2 { margin: 0; font-size: clamp(2.2rem, 4vw, 4.1rem); font-weight: 950; line-height: .98; }
.visual-copy em { color: white; font-style: normal; text-shadow: 3px 3px 0 var(--blue); }
.quality-seal { position: absolute; z-index: 6; right: 6%; bottom: 7%; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 118px; height: 118px; color: var(--navy); border: 3px solid var(--navy); border-radius: 50%; background: var(--apple); box-shadow: 6px 7px 0 rgba(7,26,71,.2); text-align: center; transform: rotate(7deg); }
.quality-seal::before, .quality-seal::after { content: '★'; position: absolute; top: 45%; font-size: .65rem; }.quality-seal::before { left: 8px; }.quality-seal::after { right: 8px; }
.quality-seal span { font-size: .58rem; font-weight: 950; letter-spacing: .14em; }.quality-seal strong { font-size: 1.55rem; line-height: 1; }.quality-seal b { font-size: .56rem; letter-spacing: .04em; }.quality-seal small { margin-top: 4px; padding: 2px 8px; color: white; border-radius: 999px; background: var(--navy); font-size: .56rem; font-weight: 950; }

.status-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: linear-gradient(145deg, #dff8ff, #f3ffe0); }
.status-card { width: min(560px, 100%); padding: 42px; border: 3px solid var(--navy); border-radius: 26px; background: white; box-shadow: 12px 12px 0 rgba(7,91,232,.14); text-align: center; }
.status-icon { display: grid; place-items: center; width: 68px; height: 68px; margin: 0 auto 22px; color: var(--navy); border: 3px solid var(--navy); border-radius: 20px; background: var(--apple); font-size: 2rem; font-weight: 900; transform: rotate(-4deg); }
.status-card h1 { font-size: 2rem; }
.status-card p { color: var(--muted); }
.order-code { margin: 24px 0; padding: 15px; color: var(--blue); border: 2px dashed #91b5ef; border-radius: 13px; background: #f0f6ff; font-weight: 900; letter-spacing: .08em; }

@media (max-width: 1080px) {
  .page-shell { grid-template-columns: 1fr; }
  .visual-panel { position: relative; order: -1; height: 330px; }
  .game-window { top: 8%; left: 55%; width: 40%; height: 72%; }
  .visual-copy { left: 5%; right: 52%; bottom: 14%; }
  .visual-copy h2 { font-size: 2.5rem; }
  .card-player, .card-power { display: none; }
}
@media (max-width: 680px) {
  .topbar { height: auto; min-height: 66px; padding: 8px 17px; flex-wrap: wrap; }.brand img { width: 42px; height: 42px; }.top-badge { display: none; }.site-nav { order: 3; width: 100%; margin: 7px 0 0; }.site-nav a { flex: 1; text-align: center; }
  .page-shell { min-height: calc(100vh - 66px); }.visual-panel { height: 250px; }
  .game-window { left: 48%; width: 48%; height: 70%; border-width: 3px; border-radius: 18px; }.window-bar { height: 28px; }.window-bar b { display: none; }
  .visual-copy { left: 5%; right: 48%; bottom: 14%; }.visual-copy h2 { font-size: 1.75rem; }.tag { font-size: .55rem; }
  .floating-card { display: none; }.quality-seal { right: 4%; bottom: 6%; width: 88px; height: 88px; }.quality-seal strong { font-size: 1.1rem; }.quality-seal b { font-size: .46rem; }.quality-seal span { font-size: .48rem; }.quality-seal::before, .quality-seal::after { display: none; }.order-panel { padding: 32px 18px 54px; } h1 { font-size: 2.2rem; }
  .steps { margin: 29px 0; }.step em { display: none; }
  .game-grid { grid-template-columns: 1fr 1fr; }.package-grid, .field-grid, .world-row, .platform-row { grid-template-columns: 1fr; }
  .launch-offer { align-items: flex-start; flex-direction: column; gap: 10px; }.launch-price { align-items: baseline; text-align: left; }.launch-price b { font-size: 1.7rem; }
  .package-grid label > span { min-height: 88px; }.photo-list { grid-template-columns: 1fr 1fr; }
  .actions { align-items: stretch; }.button { flex: 1; padding-inline: 13px; }.pay { min-width: 0; gap: 10px; }.pay b { padding-left: 10px; }
  .payment-note { text-align: left; }.upload-meta { gap: 10px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; } }

/* Ejemplo jugable */
.demo-page { min-height: 100vh; background: linear-gradient(180deg, #f5fbff, #efffe1); }
.demo-shell { width: min(1180px, calc(100% - 34px)); margin: 0 auto; padding: 54px 0 70px; }
.demo-intro { display: grid; grid-template-columns: 1.1fr .9fr; align-items: end; gap: 50px; margin-bottom: 28px; }
.demo-intro h1 { font-size: clamp(2.4rem, 5vw, 4.8rem); }.demo-intro > p { margin: 0 0 8px; color: var(--muted); font-size: 1.02rem; }
.game-console { overflow: hidden; border: 4px solid var(--navy); border-radius: 26px; background: var(--navy); box-shadow: 12px 14px 0 rgba(7,91,232,.15); }
.console-top, .console-bottom { min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 10px 18px; color: white; }
.console-top > div, .game-stats, .keyboard-help { display: flex; align-items: center; gap: 17px; }.console-top strong { font-size: .82rem; letter-spacing: .11em; }.live-dot { display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 50%; background: var(--apple); box-shadow: 0 0 0 5px rgba(169,245,41,.15); }
.game-stats span { color: #a8bce9; font-size: .68rem; font-weight: 900; letter-spacing: .08em; }.game-stats b { margin-left: 4px; color: white; font-size: .85rem; }
.canvas-wrap { position: relative; overflow: hidden; background: #36c9ff; }.canvas-wrap canvas { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; image-rendering: pixelated; }
.godot-stage { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #000; }
.godot-frame { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; background: #000; image-rendering: pixelated; }
.game-message { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; color: var(--navy); background: rgba(239,253,255,.9); text-align: center; backdrop-filter: blur(5px); }.game-message[hidden] { display: none; }.game-message strong { font-size: clamp(2rem, 5vw, 4rem); font-weight: 950; }.game-message span { margin: 5px 0 20px; color: #395373; }.game-message button, .restart-button { padding: 10px 17px; color: var(--navy); border: 2px solid var(--navy); border-radius: 12px; background: var(--apple); cursor: pointer; font-weight: 900; text-decoration: none; white-space: nowrap; }
.keyboard-help { color: #b6c6e8; font-size: .72rem; }.keyboard-help span { display: flex; align-items: center; gap: 5px; }.keyboard-help kbd { min-width: 25px; padding: 4px 6px; color: white; border: 1px solid #536a9e; border-radius: 6px; background: #183369; text-align: center; font-family: inherit; font-size: .65rem; }
.touch-controls { display: none; align-items: center; justify-content: space-between; padding: 14px; background: #0d2454; }.touch-controls div { display: flex; gap: 12px; }.touch-controls button { width: 62px; height: 54px; color: var(--navy); border: 2px solid var(--navy); border-radius: 16px; background: var(--sky); font-size: 1.5rem; font-weight: 950; touch-action: none; }.touch-controls .jump-control { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 82px; background: var(--apple); }.jump-control small { font-size: .55rem; }
.demo-features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 28px; }.demo-features article { display: flex; gap: 12px; padding: 17px; border: 2px solid var(--line); border-radius: 17px; background: white; }.demo-features article > span { flex: 0 0 auto; display: grid; place-items: center; width: 39px; height: 39px; color: var(--navy); border: 2px solid var(--navy); border-radius: 12px; background: var(--sky); font-weight: 950; }.demo-features article:nth-child(2) > span { background: #ffe25d; }.demo-features article:nth-child(3) > span, .demo-features .handmade-card > span { background: var(--apple); }.demo-features h2 { margin: 0; font-size: .95rem; }.demo-features p { margin: 3px 0 0; color: var(--muted); font-size: .76rem; line-height: 1.35; }

@media (max-width: 850px) {
  .demo-intro { grid-template-columns: 1fr; gap: 12px; }.demo-features { grid-template-columns: 1fr 1fr; }.keyboard-help { display: none; }
}
@media (max-width: 560px) {
  .demo-shell { width: min(100% - 20px, 1180px); padding-top: 32px; }.demo-intro h1 { font-size: 2.45rem; }.console-top { align-items: flex-start; }.game-stats { gap: 8px; flex-direction: column; align-items: flex-end; }.console-bottom { justify-content: flex-end; }.demo-features { grid-template-columns: 1fr; }.game-console { border-width: 3px; border-radius: 20px; }.restart-button { font-size: .75rem; }
}