/* SQL Quest — experiencia educativa aislada */
.page-sql-game { --game-accent:#087a55; --game-accent-2:#2457d6; --game-accent-soft:#edf9f4; --game-accent-2-soft:#eef3ff; --game-editor:#f8fafc; --game-editor-toolbar:#ffffff; }
.sql-game-hero { padding-block: clamp(3.5rem, 8vw, 6.5rem) clamp(2.5rem, 6vw, 4.5rem); border-bottom: 1px solid var(--border); background: radial-gradient(circle at 78% 20%, color-mix(in srgb, var(--game-accent) 13%, transparent), transparent 32%), radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--game-accent-2) 10%, transparent), transparent 30%); }
.sql-game-hero__grid { display:grid; gap:2rem; align-items:center; }
.sql-game-brandline { display:inline-flex; align-items:center; gap:.55rem; margin-bottom:1rem; color:var(--game-accent); font-size:.78rem; font-weight:850; letter-spacing:.12em; text-transform:uppercase; }
.sql-game-brandline::before { content:""; width:.65rem; height:.65rem; border-radius:50%; background:var(--game-accent); box-shadow:0 0 0 .3rem color-mix(in srgb,var(--game-accent) 12%,transparent); }
.sql-game-hero h1 { max-width:12ch; margin-bottom:1rem; }
.sql-game-hero .lead { max-width:58ch; }
.sql-game-hero__facts { display:flex; flex-wrap:wrap; gap:.55rem; margin-top:1.35rem; }
.sql-game-chip { display:inline-flex; align-items:center; min-height:2rem; padding:.35rem .65rem; border:1px solid var(--border); border-radius:999px; background:var(--surface); color:var(--text-soft); font-size:.78rem; font-weight:680; }
.sql-game-hero__panel { position:relative; overflow:hidden; border:1px solid color-mix(in srgb,var(--game-accent) 28%,var(--border)); border-radius:var(--radius-xl); background:linear-gradient(145deg,color-mix(in srgb,var(--surface) 92%,var(--game-accent) 8%),var(--surface)); box-shadow:var(--shadow-md); padding:1.25rem; }
.sql-game-hero__panel::after { content:"30"; position:absolute; right:-.4rem; bottom:-2.7rem; color:color-mix(in srgb,var(--game-accent) 9%,transparent); font-size:10rem; font-weight:900; line-height:1; pointer-events:none; }
.sql-game-hero__panel h2 { position:relative; z-index:1; font-size:1.1rem; }
.sql-game-mini-map { position:relative; z-index:1; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:.45rem; margin-top:1rem; }
.sql-game-mini-node { aspect-ratio:1; display:grid; place-items:center; border:1px solid var(--border); border-radius:.7rem; background:var(--bg); color:var(--text-faint); font-size:.7rem; font-weight:800; }
.sql-game-mini-node:nth-child(-n+5) { border-color:color-mix(in srgb,var(--game-accent) 45%,var(--border)); color:var(--game-accent); background:color-mix(in srgb,var(--game-accent) 8%,var(--bg)); }
.sql-game-section { padding-block:clamp(2.5rem,6vw,5rem); }
.sql-game-shell { min-width:0; }
.sql-game-dashboard { display:grid; gap:1rem; margin-bottom:1.2rem; }
.sql-game-hud { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.65rem; }
.sql-game-hud__item { min-width:0; padding:.8rem .9rem; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface); }
.sql-game-hud__label { display:block; color:var(--text-faint); font-size:.7rem; font-weight:720; text-transform:uppercase; letter-spacing:.06em; }
.sql-game-hud__value { display:block; margin-top:.2rem; color:var(--text); font-weight:820; }
.sql-game-progress { grid-column:1/-1; height:.45rem; overflow:hidden; border-radius:999px; background:var(--surface-muted); }
.sql-game-progress > span { display:block; height:100%; width:0; border-radius:inherit; background:linear-gradient(90deg,var(--game-accent-2),var(--game-accent)); transition:width .25s ease; }
.sql-game-toolbar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.65rem; }
.sql-game-toolbar__group { display:flex; flex-wrap:wrap; gap:.55rem; }
.sql-game-view[hidden] { display:none !important; }
.sql-game-map { display:grid; gap:1.25rem; }
.sql-game-stage { border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface); padding:1rem; }
.sql-game-stage__head { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; padding:.2rem .15rem .9rem; }
.sql-game-stage__head h2 { margin:0; font-size:1.08rem; }
.sql-game-stage__head p { margin:.3rem 0 0; color:var(--text-soft); font-size:.85rem; }
.sql-game-stage__badge { flex:0 0 auto; display:inline-flex; align-items:center; min-height:1.8rem; padding:.28rem .55rem; border-radius:999px; background:var(--surface-muted); color:var(--text-faint); font-size:.7rem; font-weight:780; }
.sql-game-stage.is-complete .sql-game-stage__badge { background:color-mix(in srgb,var(--game-accent) 12%,var(--surface)); color:var(--game-accent); }
.sql-game-levels { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:.55rem; }
.sql-game-level { min-width:0; min-height:6.8rem; display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; gap:.65rem; padding:.75rem; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--bg); color:var(--text); text-align:left; cursor:pointer; transition:transform .15s ease,border-color .15s ease,background .15s ease; }
.sql-game-level:not(:disabled):hover { transform:translateY(-2px); border-color:color-mix(in srgb,var(--game-accent-2) 45%,var(--border)); }
.sql-game-level:disabled { cursor:not-allowed; opacity:.52; }
.sql-game-level.is-current { border-color:color-mix(in srgb,var(--game-accent-2) 60%,var(--border)); background:color-mix(in srgb,var(--game-accent-2) 8%,var(--bg)); }
.sql-game-level.is-complete { border-color:color-mix(in srgb,var(--game-accent) 48%,var(--border)); background:color-mix(in srgb,var(--game-accent) 7%,var(--bg)); }
.sql-game-level__num { display:grid; place-items:center; width:1.8rem; height:1.8rem; border-radius:.55rem; background:var(--surface-muted); color:var(--text-soft); font-size:.72rem; font-weight:850; }
.sql-game-level.is-complete .sql-game-level__num { background:color-mix(in srgb,var(--game-accent) 16%,var(--surface)); color:var(--game-accent); }
.sql-game-level__title { font-size:.78rem; font-weight:760; line-height:1.28; }
.sql-game-level__state { color:var(--text-faint); font-size:.68rem; }
.sql-game-workspace { display:grid; gap:1rem; }
.sql-game-mission { min-width:0; display:grid; gap:1rem; }
.sql-game-card { border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface); box-shadow:var(--shadow-sm); }
.sql-game-brief { padding:1rem; }
.sql-game-level-meta { display:flex; flex-wrap:wrap; gap:.45rem; margin-bottom:.75rem; }
.sql-game-brief h2 { margin:0 0 .65rem; font-size:clamp(1.45rem,3vw,2rem); }
.sql-game-brief p { color:var(--text-soft); }
.sql-game-objective { margin-top:.9rem; padding:.85rem .9rem; border-left:.22rem solid var(--game-accent-2); border-radius:0 var(--radius-md) var(--radius-md) 0; background:color-mix(in srgb,var(--game-accent-2) 7%,var(--bg)); }
.sql-game-objective strong { display:block; margin-bottom:.25rem; }
.sql-game-editor-card { overflow:hidden; }
.sql-game-editor-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.55rem; padding:.75rem .9rem; border-bottom:1px solid var(--border); }
.sql-game-editor-head span { color:var(--text-soft); font-size:.8rem; font-weight:720; }
.sql-game-editor { width:100%; min-height:13rem; resize:vertical; display:block; border:0; outline:0; background:var(--bg); color:var(--text); padding:1rem; font:500 .92rem/1.6 var(--font-mono); tab-size:2; }
.sql-game-editor:focus-visible { box-shadow:inset 0 0 0 3px color-mix(in srgb,var(--focus) 65%,transparent); }
.sql-game-actions { display:flex; flex-wrap:wrap; gap:.55rem; padding:.75rem .9rem; border-top:1px solid var(--border); background:var(--surface); }
.sql-game-actions .btn-primary { min-width:10rem; }
.sql-game-result { min-height:7rem; padding:1rem; }
.sql-game-result__head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.5rem; margin-bottom:.75rem; }
.sql-game-result__head strong { font-size:.92rem; }
.sql-game-result__head span { color:var(--text-faint); font-size:.76rem; }
.sql-game-result table { width:100%; border-collapse:collapse; font-size:.82rem; }
.sql-game-result th,.sql-game-result td { padding:.55rem .65rem; border-bottom:1px solid var(--border); text-align:left; white-space:nowrap; }
.sql-game-result th { color:var(--text-soft); font-weight:780; background:var(--surface-muted); }
.sql-game-result .table-wrap { max-height:18rem; overflow:auto; border:1px solid var(--border); border-radius:var(--radius-md); }
.sql-game-null { color:var(--text-faint); font-style:italic; }
.sql-game-feedback { padding:.9rem 1rem; border-top:1px solid var(--border); }
.sql-game-feedback:empty { display:none; }
.sql-game-feedback.is-success { background:color-mix(in srgb,var(--success-soft) 60%,var(--surface)); }
.sql-game-feedback.is-warning { background:color-mix(in srgb,var(--warning-soft) 58%,var(--surface)); }
.sql-game-feedback.is-error { background:color-mix(in srgb,var(--danger-soft) 52%,var(--surface)); }
.sql-game-feedback strong { display:block; margin-bottom:.2rem; }
.sql-game-help { display:grid; gap:.65rem; padding:1rem; }
.sql-game-help__buttons { display:flex; flex-wrap:wrap; gap:.5rem; }
.sql-game-hint,.sql-game-solution { padding:.8rem .9rem; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--bg); }
.sql-game-hint[hidden],.sql-game-solution[hidden] { display:none; }
.sql-game-solution pre { margin:.6rem 0; white-space:pre-wrap; overflow-wrap:anywhere; }
.sql-game-side { min-width:0; display:grid; gap:1rem; align-content:start; }
.sql-game-side .sql-game-card { padding:1rem; }
.sql-game-side h3 { margin-bottom:.65rem; font-size:1rem; }
.sql-game-tables-list { display:grid; gap:.55rem; }
.sql-game-table { border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden; }
.sql-game-table summary { cursor:pointer; padding:.7rem .8rem; font-weight:760; background:var(--bg); }
.sql-game-table__body { padding:.75rem; border-top:1px solid var(--border); }
.sql-game-table__meta { color:var(--text-faint); font-size:.72rem; margin-bottom:.55rem; }
.sql-game-table__sample { overflow:auto; }
.sql-game-table__sample table { width:100%; border-collapse:collapse; font-size:.72rem; }
.sql-game-table__sample th,.sql-game-table__sample td { padding:.38rem .45rem; border-bottom:1px solid var(--border); text-align:left; white-space:nowrap; }
.sql-game-privacy { margin:0; color:var(--text-faint); font-size:.72rem; line-height:1.5; }
.sql-game-complete-dialog { width:min(calc(100% - 2rem),34rem); border:1px solid var(--border); border-radius:var(--radius-xl); background:var(--surface); color:var(--text); padding:0; box-shadow:var(--shadow-lg); }
.sql-game-complete-dialog::backdrop { background:rgba(6,12,20,.72); backdrop-filter:blur(5px); }
.sql-game-complete__body { padding:1.35rem; }
.sql-game-complete__icon { width:3rem; height:3rem; display:grid; place-items:center; border-radius:1rem; background:color-mix(in srgb,var(--game-accent) 15%,var(--surface)); color:var(--game-accent); font-weight:900; font-size:1.2rem; margin-bottom:1rem; }
.sql-game-complete__stats { display:grid; grid-template-columns:repeat(3,1fr); gap:.55rem; margin:1rem 0; }
.sql-game-complete__stat { padding:.7rem; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--bg); text-align:center; }
.sql-game-complete__stat b { display:block; font-size:1.05rem; }
.sql-game-complete__stat span { color:var(--text-faint); font-size:.68rem; }
.sql-game-complete__actions { display:flex; flex-wrap:wrap; gap:.55rem; }
.sql-game-finale { display:grid; gap:1rem; padding:1.2rem; border:1px solid color-mix(in srgb,var(--game-accent) 38%,var(--border)); border-radius:var(--radius-lg); background:linear-gradient(145deg,color-mix(in srgb,var(--game-accent) 8%,var(--surface)),var(--surface)); }
.sql-game-skill-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.45rem; padding:0; margin:0; list-style:none; }
.sql-game-skill-list li { margin:0; padding:.55rem .65rem; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--bg); font-size:.8rem; }
@media (min-width:56rem) { .sql-game-hero__grid{grid-template-columns:minmax(0,1.12fr) minmax(19rem,.88fr);} .sql-game-workspace{grid-template-columns:minmax(0,1fr) minmax(17rem,21rem);align-items:start;} .sql-game-side{position:sticky;top:calc(var(--header-height) + 1rem);} }
@media (max-width:55.99rem) { .sql-game-hud{grid-template-columns:repeat(2,minmax(0,1fr));} .sql-game-levels{grid-template-columns:1fr;} .sql-game-level{min-height:0;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;} .sql-game-level__state{text-align:right;} .sql-game-editor{min-height:11rem;} .sql-game-actions .btn{width:100%;} .sql-game-complete__actions .btn{width:100%;} .sql-game-skill-list{grid-template-columns:1fr;} }
@media (max-width:24rem) { .sql-game-hud{grid-template-columns:1fr 1fr;} .sql-game-hud__item{padding:.65rem;} .sql-game-brief,.sql-game-side .sql-game-card{padding:.85rem;} }
@media (prefers-reduced-motion:reduce) { .sql-game-level,.sql-game-progress>span{transition:none;} }


/* SQL Quest v104 — contraste claro + refinamiento UX */
[data-theme="dark"] .page-sql-game {
  --game-accent:#63d5ab;
  --game-accent-2:#8caaff;
  --game-accent-soft:#122a23;
  --game-accent-2-soft:#172442;
  --game-editor:#080d14;
  --game-editor-toolbar:#111720;
}

.sql-game-toolbar .notice { margin:0; }
.sql-game-toolbar--dashboard { align-items:center; padding:.15rem 0; }
.sql-game-options { position:relative; }
.sql-game-options summary {
  min-height:2.25rem;
  display:inline-flex;
  align-items:center;
  padding:.38rem .7rem;
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  background:var(--surface);
  color:var(--text-soft);
  font-size:.78rem;
  font-weight:720;
  cursor:pointer;
  list-style:none;
}
.sql-game-options summary::-webkit-details-marker { display:none; }
.sql-game-options summary::after { content:"⌄"; margin-left:.45rem; color:var(--text-faint); }
.sql-game-options[open] summary::after { content:"⌃"; }
.sql-game-options__panel {
  position:absolute;
  z-index:8;
  right:0;
  top:calc(100% + .45rem);
  min-width:12rem;
  padding:.55rem;
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  background:var(--surface-raised);
  box-shadow:var(--shadow-float);
}
.sql-game-options__panel .btn { width:100%; justify-content:flex-start; }

.sql-game-stage.is-current:not(.is-complete) {
  border-color:color-mix(in srgb,var(--game-accent-2) 44%,var(--border));
  box-shadow:0 0 0 3px color-mix(in srgb,var(--game-accent-2) 7%,transparent);
}
.sql-game-level.is-next:not(.is-complete) {
  border-color:color-mix(in srgb,var(--game-accent-2) 66%,var(--border));
  background:color-mix(in srgb,var(--game-accent-2-soft) 78%,var(--bg));
}
.sql-game-level.is-next .sql-game-level__num {
  background:var(--game-accent-2);
  color:#fff;
}
.sql-game-level.is-next .sql-game-level__state { color:var(--game-accent-2); font-weight:760; }
.sql-game-level.is-complete .sql-game-level__state { color:var(--game-accent); font-weight:720; }
.sql-game-stage.is-complete .sql-game-stage__badge,
.sql-game-level.is-complete .sql-game-level__num {
  background:color-mix(in srgb,var(--game-accent-soft) 88%,var(--surface));
}

.sql-game-objective {
  background:color-mix(in srgb,var(--game-accent-2-soft) 72%,var(--bg));
  border-left-color:var(--game-accent-2);
}
.sql-game-editor-head { background:var(--game-editor-toolbar); }
.sql-game-editor { background:var(--game-editor); }
.sql-game-result th { background:color-mix(in srgb,var(--game-accent-2-soft) 66%,var(--surface-muted)); color:var(--text); }
.sql-game-result tbody tr:nth-child(even) td { background:color-mix(in srgb,var(--surface-muted) 55%,var(--surface)); }
.sql-game-table summary { background:color-mix(in srgb,var(--game-accent-2-soft) 32%,var(--bg)); }
.sql-game-table[open] summary { color:var(--text); background:color-mix(in srgb,var(--game-accent-2-soft) 58%,var(--surface)); }
.sql-game-table summary::marker { color:var(--game-accent-2); }
.sql-game-hint,.sql-game-solution { background:color-mix(in srgb,var(--game-accent-2-soft) 28%,var(--bg)); }
.sql-game-complete-dialog::backdrop { background:rgba(24,34,48,.42); backdrop-filter:blur(4px); }
[data-theme="dark"] .sql-game-complete-dialog::backdrop { background:rgba(6,12,20,.76); }
[data-theme="dark"] .sql-game-level.is-next .sql-game-level__num { color:#07101f; }

@media (min-width:64rem) {
  .sql-game-workspace { grid-template-columns:minmax(0,1fr) minmax(17rem,20rem); align-items:start; }
  .sql-game-side { position:sticky; top:calc(var(--header-height) + 1rem); }
}
@media (min-width:56rem) and (max-width:63.99rem) {
  .sql-game-workspace { grid-template-columns:minmax(0,1fr); }
  .sql-game-side { position:static; }
}

@media (max-width:63.99rem) {
  .sql-game-mission,
  .sql-game-side { display:contents; }
  .sql-game-brief { order:1; }
  .sql-game-schema-card { order:2; }
  .sql-game-editor-card { order:3; }
  .sql-game-result-card { order:4; }
  .sql-game-help { order:5; }
  .sql-game-learning-card { order:6; }
  .sql-game-privacy-card { order:7; }
  .sql-game-schema-card { padding:1rem; }
  .sql-game-actions [data-game-reset-btn] { width:auto; }
}

@media (max-width:40rem) {
  .sql-game-hero { padding-block:2.5rem 2rem; }
  .sql-game-hero__panel { display:none; }
  .sql-game-hero__facts { margin-top:1rem; gap:.4rem; }
  .sql-game-chip { min-height:1.85rem; font-size:.73rem; }
  .sql-game-hero .actions { margin-top:1.25rem; }
  .sql-game-hero .actions .btn { width:100%; }
  .sql-game-section { padding-block:2rem 3rem; }
  .sql-game-dashboard { gap:.75rem; margin-bottom:1rem; }
  .sql-game-hud { gap:.45rem; }
  .sql-game-hud__item { padding:.65rem .7rem; }
  .sql-game-hud__label { font-size:.64rem; }
  .sql-game-hud__value { font-size:.88rem; }
  .sql-game-toolbar--dashboard { align-items:flex-start; }
  .sql-game-toolbar--dashboard > .notice { width:100%; font-size:.78rem; line-height:1.5; }
  .sql-game-toolbar__group { width:100%; }
  .sql-game-toolbar__group > [data-game-quick-continue] { flex:1 1 auto; }
  .sql-game-options { margin-left:auto; }
  .sql-game-options__panel { right:0; }
  .sql-game-stage { padding:.85rem; }
  .sql-game-stage__head { gap:.65rem; }
  .sql-game-stage__head p { font-size:.78rem; line-height:1.45; }
  .sql-game-level { padding:.7rem; gap:.55rem; }
  .sql-game-level__title { font-size:.8rem; }
  .sql-game-editor { min-height:13rem; font-size:.9rem; }
  .sql-game-editor-head { padding:.7rem .8rem; }
  .sql-game-editor-head [data-game-attempt-status] { font-size:.72rem; }
  .sql-game-actions { padding:.65rem .8rem; }
  .sql-game-actions .btn-primary { width:100%; }
  .sql-game-actions [data-game-reset-btn] { width:auto; margin-inline:auto; }
  .sql-game-result,.sql-game-help { padding:.85rem; }
  .sql-game-side .sql-game-card { padding:.85rem; }
  .sql-game-complete__body { padding:1.1rem; }
}

/* SQL Quest v105 — tres mundos temáticos */
.page-sql-game .sql-game-hud { grid-template-columns:repeat(5,minmax(0,1fr)); }
.page-sql-game .sql-game-hud__item--world { border-color:color-mix(in srgb,var(--game-accent) 30%,var(--border)); background:color-mix(in srgb,var(--game-accent-soft) 72%,var(--surface)); }
.page-sql-game .sql-game-hud__item--world .sql-game-hud__value { color:var(--game-accent); }

body[data-sql-game-world="arcana"] {
  --game-accent:#6d28d9;
  --game-accent-2:#9a5b00;
  --game-accent-soft:#f4efff;
  --game-accent-2-soft:#fff5df;
}
body[data-sql-game-world="cosmos"] {
  --game-accent:#155eef;
  --game-accent-2:#087b8c;
  --game-accent-soft:#edf4ff;
  --game-accent-2-soft:#eaf9fb;
}
body[data-sql-game-world="distrito"] {
  --game-accent:#b42318;
  --game-accent-2:#7a5c00;
  --game-accent-soft:#fff0ee;
  --game-accent-2-soft:#fff7dd;
}
[data-theme="dark"] body[data-sql-game-world="arcana"] {
  --game-accent:#c4a7ff;
  --game-accent-2:#f1c56a;
  --game-accent-soft:#241a39;
  --game-accent-2-soft:#312717;
}
[data-theme="dark"] body[data-sql-game-world="cosmos"] {
  --game-accent:#82b1ff;
  --game-accent-2:#6fd6e3;
  --game-accent-soft:#14233c;
  --game-accent-2-soft:#122e34;
}
[data-theme="dark"] body[data-sql-game-world="distrito"] {
  --game-accent:#ff9d93;
  --game-accent-2:#e8c76c;
  --game-accent-soft:#351b1d;
  --game-accent-2-soft:#312914;
}

.sql-game-world-picker {
  margin:0 0 clamp(1.4rem,3vw,2rem);
  border:1px solid color-mix(in srgb,var(--game-accent) 26%,var(--border));
  border-radius:var(--radius-xl);
  background:linear-gradient(145deg,color-mix(in srgb,var(--game-accent-soft) 46%,var(--surface)),var(--surface));
  box-shadow:var(--shadow-sm);
  overflow:clip;
}
.sql-game-world-picker > summary {
  min-height:3.25rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.85rem 1rem;
  color:var(--text);
  font-weight:820;
  cursor:pointer;
  list-style:none;
}
.sql-game-world-picker > summary::-webkit-details-marker { display:none; }
.sql-game-world-picker > summary::after {
  content:"Cambiar ▾";
  color:var(--game-accent);
  font-size:.74rem;
  font-weight:760;
}
.sql-game-world-picker[open] > summary::after { content:"Cerrar ▴"; }
.sql-game-world-picker__body { padding:0 1rem 1rem; border-top:1px solid color-mix(in srgb,var(--game-accent) 16%,var(--border)); }
.sql-game-world-picker__head { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; padding:1rem 0 .85rem; }
.sql-game-world-picker__head h2 { margin:.25rem 0 .35rem; font-size:clamp(1.15rem,2vw,1.45rem); }
.sql-game-world-picker__head p { max-width:62ch; margin:0; color:var(--text-soft); font-size:.88rem; line-height:1.55; }
.sql-game-world-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.75rem; }
.sql-game-world-card {
  --world-card-accent:var(--game-accent);
  position:relative;
  min-width:0;
  min-height:12.2rem;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.42rem;
  padding:1rem;
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  background:linear-gradient(155deg,color-mix(in srgb,var(--world-card-accent) 7%,var(--surface)),var(--surface) 72%);
  color:var(--text);
  text-align:left;
  cursor:pointer;
  box-shadow:0 8px 20px rgba(15,23,42,.045);
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.sql-game-world-card[data-world="arcana"] { --world-card-accent:#6d28d9; }
.sql-game-world-card[data-world="cosmos"] { --world-card-accent:#155eef; }
.sql-game-world-card[data-world="distrito"] { --world-card-accent:#b42318; }
[data-theme="dark"] .sql-game-world-card[data-world="arcana"] { --world-card-accent:#c4a7ff; }
[data-theme="dark"] .sql-game-world-card[data-world="cosmos"] { --world-card-accent:#82b1ff; }
[data-theme="dark"] .sql-game-world-card[data-world="distrito"] { --world-card-accent:#ff9d93; }
.sql-game-world-card:hover { transform:translateY(-2px); border-color:color-mix(in srgb,var(--world-card-accent) 54%,var(--border)); box-shadow:0 12px 26px rgba(15,23,42,.08); }
.sql-game-world-card:focus-visible { outline:3px solid color-mix(in srgb,var(--world-card-accent) 35%,transparent); outline-offset:2px; }
.sql-game-world-card.is-selected { border-color:color-mix(in srgb,var(--world-card-accent) 76%,var(--border)); box-shadow:0 0 0 3px color-mix(in srgb,var(--world-card-accent) 10%,transparent),0 12px 26px rgba(15,23,42,.08); }
.sql-game-world-card__top { width:100%; display:flex; align-items:center; justify-content:space-between; gap:.75rem; }
.sql-game-world-card__icon { width:2.35rem; height:2.35rem; display:grid; place-items:center; border-radius:.8rem; background:color-mix(in srgb,var(--world-card-accent) 13%,var(--surface)); color:var(--world-card-accent); font-size:1.2rem; font-weight:900; }
.sql-game-world-card__status { padding:.25rem .48rem; border-radius:999px; background:var(--surface-muted); color:var(--text-faint); font-size:.64rem; font-weight:760; }
.sql-game-world-card.is-selected .sql-game-world-card__status { background:color-mix(in srgb,var(--world-card-accent) 13%,var(--surface)); color:var(--world-card-accent); }
.sql-game-world-card__name { margin-top:.35rem; color:var(--text); font-size:1.03rem; }
.sql-game-world-card__tagline { color:var(--world-card-accent); font-size:.76rem; font-weight:780; }
.sql-game-world-card__description { margin-top:.2rem; color:var(--text-soft); font-size:.78rem; line-height:1.48; }
.sql-game-world-note { margin:.75rem 0 0; color:var(--text-faint); font-size:.72rem; line-height:1.5; }

body[data-sql-game-world="arcana"] .sql-game-hero {
  background:radial-gradient(circle at 80% 18%,color-mix(in srgb,var(--game-accent) 14%,transparent),transparent 32%),radial-gradient(circle at 18% 0%,color-mix(in srgb,var(--game-accent-2) 9%,transparent),transparent 30%);
}
body[data-sql-game-world="cosmos"] .sql-game-hero {
  background:radial-gradient(circle at 78% 14%,color-mix(in srgb,var(--game-accent) 15%,transparent),transparent 34%),radial-gradient(circle at 12% 8%,color-mix(in srgb,var(--game-accent-2) 10%,transparent),transparent 30%);
}
body[data-sql-game-world="distrito"] .sql-game-hero {
  background:radial-gradient(circle at 80% 20%,color-mix(in srgb,var(--game-accent) 11%,transparent),transparent 32%),radial-gradient(circle at 14% 0%,color-mix(in srgb,var(--game-accent-2) 9%,transparent),transparent 30%);
}

@media (max-width:55.99rem) {
  .page-sql-game .sql-game-hud { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .page-sql-game .sql-game-hud__item--world { grid-column:1/-1; }
  .sql-game-world-grid { grid-template-columns:1fr; }
  .sql-game-world-card { min-height:0; }
  .sql-game-world-picker__head { display:grid; }
  .sql-game-world-picker__head .btn { width:100%; }
}
@media (max-width:40rem) {
  .sql-game-world-picker { border-radius:var(--radius-lg); }
  .sql-game-world-picker > summary { min-height:3rem; padding:.75rem .8rem; font-size:.86rem; }
  .sql-game-world-picker > summary::after { content:"▾"; font-size:.85rem; }
  .sql-game-world-picker[open] > summary::after { content:"▴"; }
  .sql-game-world-picker__body { padding:0 .8rem .8rem; }
  .sql-game-world-card { padding:.85rem; }
  .sql-game-world-card__description { font-size:.76rem; }
}
@media (prefers-reduced-motion:reduce) {
  .sql-game-world-card { transition:none; }
}

/* SQL Quest v106 — retención, desafío diario y progreso útil */
.sql-game-retention {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.9rem;
  margin:0 0 clamp(1.5rem,3vw,2.1rem);
}
.sql-game-retention-card {
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:1rem;
  padding:1rem;
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  background:var(--surface);
  box-shadow:var(--shadow-sm);
}
.sql-game-retention-card h2 { margin:.25rem 0 .35rem; font-size:clamp(1.04rem,1.8vw,1.25rem); }
.sql-game-retention-card p { margin:0; color:var(--text-soft); font-size:.84rem; line-height:1.5; }
.sql-game-daily {
  border-color:color-mix(in srgb,var(--game-accent) 30%,var(--border));
  background:linear-gradient(145deg,color-mix(in srgb,var(--game-accent-soft) 62%,var(--surface)),var(--surface));
}
.sql-game-mastery {
  border-color:color-mix(in srgb,var(--game-accent-2) 25%,var(--border));
  background:linear-gradient(145deg,color-mix(in srgb,var(--game-accent-2-soft) 54%,var(--surface)),var(--surface));
}
.sql-game-retention-card__actions { display:flex; flex-wrap:wrap; align-items:center; gap:.65rem; }
.sql-game-daily-status { color:var(--text-faint); font-size:.72rem; line-height:1.4; }
.sql-game-skill-chips { display:flex; flex-wrap:wrap; gap:.4rem; }
.sql-game-skill-chip {
  display:inline-flex;
  align-items:center;
  min-height:1.75rem;
  padding:.27rem .5rem;
  border:1px solid color-mix(in srgb,var(--game-accent) 24%,var(--border));
  border-radius:999px;
  background:color-mix(in srgb,var(--game-accent-soft) 58%,var(--surface));
  color:var(--text-soft);
  font-size:.68rem;
  font-weight:720;
}
.sql-game-skill-chip.is-muted { border-color:var(--border); background:var(--surface-muted); color:var(--text-faint); }
.sql-game-stage { content-visibility:auto; contain-intrinsic-size:13rem; }
[data-theme="dark"] .sql-game-daily { background:linear-gradient(145deg,color-mix(in srgb,var(--game-accent-soft) 42%,var(--surface)),var(--surface)); }
[data-theme="dark"] .sql-game-mastery { background:linear-gradient(145deg,color-mix(in srgb,var(--game-accent-2-soft) 38%,var(--surface)),var(--surface)); }

@media (max-width:55.99rem) {
  .sql-game-retention { grid-template-columns:1fr; gap:.7rem; }
  .sql-game-retention-card { padding:.9rem; }
  .sql-game-retention-card__actions .btn { width:100%; }
}
@media (max-width:40rem) {
  .sql-game-retention { margin-bottom:1.25rem; }
  .sql-game-retention-card { gap:.8rem; }
  .sql-game-retention-card h2 { font-size:1rem; }
  .sql-game-options__panel {
    position:static;
    width:100%;
    min-width:0;
    margin-top:.45rem;
    box-shadow:var(--shadow-sm);
  }
}

/* SQL Quest v107 — estados de carga y navegación de tablas */
[data-game-app][aria-busy="true"] .sql-game-shell { opacity:.62; pointer-events:none; }
[data-game-app] .sql-game-shell { transition:opacity .16s ease; }
.sql-game-result .table-wrap:focus-visible,
.sql-game-table__sample:focus-visible {
  outline:3px solid color-mix(in srgb,var(--focus) 62%,transparent);
  outline-offset:2px;
}
@media (prefers-reduced-motion:reduce) {
  [data-game-app] .sql-game-shell { transition:none; }
}


/* v011 — DataCamp: discovery on the map, contextual practice and natural breaks. */
.sql-game-promo {
  --promo-bg: #f0f8f5;
  --promo-text: #132c27;
  --promo-muted: #405e55;
  --promo-border: #c6ddd2;
  --promo-accent: #08754e;
  position: relative;
  min-width: 0;
  margin: 0 0 1.5rem;
  padding: 1.15rem 1.35rem 1rem;
  border: 1px solid var(--promo-border);
  border-top: 3px solid var(--promo-accent);
  border-radius: 1rem;
  background: var(--promo-bg);
  color: var(--promo-text);
  cursor: pointer;
}
.sql-game-promo[hidden] { display: none !important; }
.sql-game-promo__header { display: flex; align-items: center; flex-wrap: wrap; gap: .65rem; padding-right: 2rem; }
.sql-game-promo__brand { display: inline-flex; align-items: center; gap: .5rem; font-size: 1rem; font-weight: 850; letter-spacing: -.03em; }
.sql-game-promo__mark { color: var(--promo-accent); font: 800 1.1rem var(--font-mono); }
.sql-game-promo__label { color: var(--promo-muted); font-size: .68rem; }
.sql-game-promo__dismiss {
  position: absolute;
  z-index: 2;
  right: .4rem;
  top: .4rem;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: .6rem;
  background: transparent;
  color: var(--promo-muted);
  font: 400 1.4rem/1 var(--font-sans);
  cursor: pointer;
}
.sql-game-promo__dismiss:hover { color: var(--promo-text); background: color-mix(in srgb, var(--promo-accent) 12%, transparent); }
.sql-game-promo__body { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1rem 2rem; margin-top: 1rem; }
.sql-game-promo__copy { min-width: 0; }
.sql-game-promo .sql-game-promo__course { margin: 0 0 .4rem; color: var(--promo-accent); font-size: .72rem; font-weight: 750; }
.sql-game-promo h2 { margin: 0 0 .45rem; color: var(--promo-text); font-size: clamp(1.15rem, 2vw, 1.5rem); line-height: 1.25; letter-spacing: -.025em; }
.sql-game-promo [data-promo-text] { max-width: 62ch; margin: 0; color: var(--promo-muted); font-size: .85rem; line-height: 1.55; }
.sql-game-promo__benefits { display: flex; flex-wrap: wrap; gap: .45rem 1rem; margin-top: .75rem; color: var(--promo-muted); font-size: .7rem; }
.sql-game-promo__benefits span::before { content: '✓'; margin-right: .35rem; color: var(--promo-accent); font-weight: 800; }
.sql-game-promo__action { display: grid; justify-items: center; gap: .55rem; }
.sql-game-promo a.sql-game-promo__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  min-height: 2.9rem;
  padding: .75rem 1.1rem;
  border: 1px solid transparent;
  border-radius: .65rem;
  background: #08754e;
  color: #fff;
  font-size: .86rem;
  font-weight: 800;
  line-height: 1.35;
  text-align: center;
  text-decoration: none;
  transition: background .15s ease;
}
.sql-game-promo a.sql-game-promo__cta:hover { background: #065d3e; color: #fff; }
.sql-game-promo a.sql-game-promo__cta::before {
  content: '';
  position: absolute;
  z-index: 1;
  inset: 0;
}
.sql-game-promo__cta > [aria-hidden] { font-size: 1.15rem; }
.sql-game-promo__reassurance { color: var(--promo-muted); font-size: .7rem; }
.sql-game-promo .sql-game-promo__disclosure { margin: .9rem 0 0; color: var(--promo-muted); font-size: .65rem; line-height: 1.5; }
.sql-game-promo__disclosure a { position: relative; z-index: 2; color: inherit; text-decoration: underline; text-underline-offset: .15em; }
.sql-game-promo :is(a, button):focus-visible { outline: 3px solid var(--promo-accent); outline-offset: 3px; }
.sql-game-promo--compact { margin: 0; padding: 1rem; }
.sql-game-promo--compact .sql-game-promo__header { gap: .3rem .55rem; }
.sql-game-promo--compact .sql-game-promo__label { font-size: .63rem; }
.sql-game-promo--compact .sql-game-promo__body { grid-template-columns: 1fr; gap: .85rem; margin-top: .85rem; }
.sql-game-promo--compact h2 { font-size: 1.1rem; }
.sql-game-promo--compact [data-promo-text] { font-size: .8rem; }
.sql-game-promo--compact .sql-game-promo__benefits { display: none; }
.sql-game-promo--compact .sql-game-promo__action { justify-items: stretch; text-align: center; }
.sql-game-promo--compact .sql-game-promo__cta { padding-inline: .65rem; font-size: .8rem; }
.sql-game-promo--milestone { margin-top: 1.1rem; text-align: left; }
.sql-game-promo--milestone .sql-game-promo__body { gap: .65rem; }
.sql-game-promo--milestone .sql-game-promo__course { display: none; }
.sql-game-complete-dialog { max-height: calc(100dvh - 2rem); overflow-y: auto; }
[data-theme="dark"] .sql-game-promo {
  --promo-bg: #112923;
  --promo-text: #f0fff8;
  --promo-muted: #b7d3c7;
  --promo-border: #315447;
  --promo-accent: #70e5ac;
}
[data-theme="dark"] .sql-game-promo a.sql-game-promo__cta { background: #70e5ac; color: #092a1c; }
[data-theme="dark"] .sql-game-promo a.sql-game-promo__cta:hover { background: #92edc0; }
@media (max-width: 63.99rem) {
  .sql-game-side > .sql-game-promo { order: 8; }
}
@media (max-width: 47.99rem) {
  .sql-game-promo { padding: 1rem; }
  .sql-game-promo__body { grid-template-columns: 1fr; gap: .9rem; }
  .sql-game-promo__action { justify-items: stretch; text-align: center; }
  .sql-game-promo__benefits { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sql-game-promo a.sql-game-promo__cta { transition: none; }
}
@media print {
  .sql-game-promo { display: none !important; }
}