*{box-sizing:border-box}
:root{--navy:#152b55;--blue:#315c98;--blue2:#2d72b7;--gold:#e8b93f;--green:#3bb273;--ink:#17223b;--muted:#52627c;--line:#dce3f2;--paper:#fff;--bg:#f3f5fb}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font-family:Tahoma,Arial,sans-serif}
body{overflow-x:hidden}
.ruleta-wrap{width:100%;max-width:1240px;margin:4px auto;padding:0 8px}
.ruleta-card{background:var(--paper);border:1px solid var(--line);border-radius:14px;box-shadow:0 7px 22px rgba(32,56,100,.12);overflow:hidden}
.ruleta-head{min-height:58px;display:flex;justify-content:space-between;gap:14px;align-items:center;padding:7px 14px;background:linear-gradient(135deg,var(--navy),var(--blue));color:#fff}
.brand-block{min-width:0}.eyebrow{margin:0 0 2px;color:#f5d477;font-size:9px;letter-spacing:1.2px;font-weight:bold}
h1{margin:0;font-size:clamp(20px,2.5vw,28px);line-height:1.05;white-space:nowrap}.subtitulo{margin:3px 0 0;font-size:11px;color:#dce8ff}
.head-controls{display:grid;grid-template-columns:auto minmax(200px,270px) auto;align-items:center;gap:6px;min-width:390px}.head-controls label{font-size:10px;color:#dce8ff}.head-controls select{min-width:0;border:0;border-radius:6px;padding:6px 7px;background:#fff;color:var(--ink);font-size:11px;font-weight:bold}.head-controls button{white-space:nowrap}
.btn{border:0;border-radius:7px;padding:7px 10px;font-weight:bold;cursor:pointer;transition:filter .15s,transform .15s;font-size:11px}.btn:hover:not(:disabled){filter:brightness(1.06);transform:translateY(-1px)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-green{background:var(--green);color:#fff}.btn-primary{background:var(--blue2);color:#fff}.btn-secondary{background:#dce8fa;color:#18325d}
.estado{height:25px;padding:5px 12px;background:#eef4ff;color:#385783;font-size:11px;font-weight:bold;text-align:center;border-bottom:1px solid #d7e3f5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* En escritorio la partida completa queda en una sola fila: izquierda, centro y derecha. */
.ruleta-layout{display:grid;grid-template-columns:245px minmax(330px,380px) minmax(285px,1fr);gap:12px;align-items:stretch;padding:9px 12px 8px;min-height:445px}
.panel-izquierdo{min-width:0;display:flex;flex-direction:column;gap:7px}.panel-izquierdo h2{margin:0 0 5px;font-size:15px;color:#172b54}
.datos-panel{padding:7px 9px;background:#f4f7fc;border:1px solid #d9e2f0;border-radius:8px}.datos-panel label{display:block;margin:3px 0 1px;color:var(--muted);font-size:9px;font-weight:bold}.datos-panel input{width:100%;height:26px;border:1px solid #c6d3e5;border-radius:5px;padding:4px 6px;background:#fff;color:var(--ink);font-size:11px}
.instrucciones{padding:7px 9px;background:#fff9df;border-left:3px solid var(--gold);border-radius:7px}.instrucciones h2{font-size:14px}.instrucciones ol{margin:0;padding-left:17px;color:var(--muted);line-height:1.25;font-size:10px}
.ficha-resumen{padding:7px 9px;background:#eaf4ff;border:1px solid #bcd3ed;border-radius:7px;color:#17325e}.ficha-resumen span,.ficha-resumen small{display:block;color:#52627c;font-size:9px}.ficha-resumen strong{display:block;margin:2px 0;font-size:12px}
.zona-ruleta{min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start}.marcador{display:flex;justify-content:space-between;width:100%;margin:0 0 3px;color:var(--muted);font-size:10px}.marcador strong{color:var(--navy)}
.ruleta-area{position:relative;width:min(100%,360px);aspect-ratio:1/1;display:grid;place-items:center;margin:0 auto 5px}.rueda{position:relative;width:100%;height:100%;border:7px solid #0c1c37;border-radius:50%;background:conic-gradient(from -25.714deg,#6c59c8 0deg 51.428deg,#2d72b7 51.428deg 102.856deg,#ef8f2d 102.856deg 154.284deg,#23a9a2 154.284deg 205.712deg,#f0b632 205.712deg 257.14deg,#e16b80 257.14deg 308.568deg,#65ad43 308.568deg 360deg);box-shadow:0 4px 10px rgba(12,28,55,.3);transition:transform 1.4s cubic-bezier(.17,.67,.16,1)}
.rueda:before{content:"";position:absolute;inset:7%;border:2px solid rgba(255,255,255,.8);border-radius:50%;pointer-events:none}.sector{position:absolute;inset:0;display:flex;align-items:flex-start;justify-content:center;pointer-events:none;color:#fff;font-size:clamp(8px,1vw,11px);font-weight:bold;text-shadow:0 1px 2px rgba(0,0,0,.25)}.sector span{position:absolute;top:13%;max-width:58px;text-align:center;line-height:1.02}
.sector-vocabulario{transform:rotate(0deg)}.sector-vocabulario span{transform:rotate(0deg)}.sector-conjugacion{transform:rotate(51.428deg)}.sector-conjugacion span{transform:rotate(-51.428deg)}.sector-articulos{transform:rotate(102.856deg)}.sector-articulos span{transform:rotate(-102.856deg)}.sector-traduccion{transform:rotate(154.284deg)}.sector-traduccion span{transform:rotate(-154.284deg)}.sector-completa{transform:rotate(205.712deg)}.sector-completa span{transform:rotate(-205.712deg)}.sector-ordena{transform:rotate(257.14deg)}.sector-ordena span{transform:rotate(-257.14deg)}.sector-cultura{transform:rotate(308.568deg)}.sector-cultura span{transform:rotate(-308.568deg)}
.rueda-centro{position:absolute;left:50%;top:50%;width:24%;height:24%;transform:translate(-50%,-50%);display:grid;place-items:center;border:4px solid #fff;border-radius:50%;background:var(--navy);color:#f5d477;font-weight:bold;font-size:clamp(14px,2vw,21px);box-shadow:0 2px 7px rgba(0,0,0,.35)}.puntero{position:absolute;z-index:3;top:-2px;left:50%;width:0;height:0;transform:translateX(-50%);border-left:13px solid transparent;border-right:13px solid transparent;border-top:23px solid var(--gold);filter:drop-shadow(0 2px 2px rgba(0,0,0,.3))}
.btn-girar{min-width:190px;margin:0 auto;font-size:13px;background:linear-gradient(135deg,#246cb6,#2d72b7)}
/* El panel de pregunta permanece siempre a la derecha; nunca baja debajo de la rueda. */
.pregunta-panel{align-self:stretch;min-width:0;padding:10px;background:#fff;border:1px solid #d9e2f0;border-radius:9px;box-shadow:0 3px 10px rgba(32,56,100,.07);display:flex;flex-direction:column;justify-content:center}.pregunta-panel[hidden]{display:flex}.categoria{align-self:flex-start;display:inline-block;padding:4px 7px;border-radius:5px;background:#2d72b7;color:#fff;font-size:10px;font-weight:bold;letter-spacing:.4px}.pregunta{margin:13px 0 12px;text-align:center;font-size:clamp(18px,2vw,25px);font-weight:bold;color:var(--ink);word-break:break-word}.opciones{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.opcion{min-height:38px;border:1px solid #c6d3e5;border-radius:6px;background:#fff;color:var(--ink);font-size:13px;font-weight:bold;cursor:pointer}.opcion:hover:not(:disabled){background:#eef4ff;border-color:#7aa9d8}.opcion.correcta{background:#dff3e6;border-color:#3bb273;color:#17633a}.opcion.incorrecta{background:#fde8e8;border-color:#d67878;color:#8a2525}.opcion:disabled{cursor:default}.feedback{min-height:40px;margin-top:9px;padding:7px 8px;border-radius:6px;font-size:11px;line-height:1.25}.feedback.ok{background:#e3f4e8;color:#17633a}.feedback.error{background:#fde8e8;color:#8a2525}#siguiente[hidden]{display:none}#siguiente{display:block;margin:9px auto 0;padding:6px 9px;font-size:11px}
.resumen-final[hidden]{display:none}.resumen-final{margin:0 12px 6px;padding:7px 10px;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;background:#eaf4ff;border:2px solid #7aa9d8;border-radius:7px;color:#17325e;font-size:11px;text-align:center}.nota{border-top:1px solid #e2e8f3;margin:0;padding:4px 12px;color:#71809a;font-size:9px;text-align:center}
@media(max-width:900px){.ruleta-head{align-items:flex-start}.head-controls{min-width:310px;grid-template-columns:auto minmax(150px,1fr) auto}.ruleta-layout{grid-template-columns:210px minmax(280px,1fr);grid-template-areas:"left wheel" "left question"}.panel-izquierdo{grid-area:left}.zona-ruleta{grid-area:wheel}.pregunta-panel{grid-area:question;min-height:170px}.ruleta-area{width:min(100%,320px)}}
@media(max-width:650px){.ruleta-wrap{padding:0 4px}.ruleta-head{display:block;padding:8px 10px}.head-controls{min-width:0;margin-top:7px;grid-template-columns:auto minmax(0,1fr) auto}.estado{font-size:10px}.ruleta-layout{display:flex;flex-direction:column;gap:8px;padding:7px}.panel-izquierdo{display:grid;grid-template-columns:1fr 1fr;gap:7px}.datos-panel,.instrucciones,.ficha-resumen{margin:0}.ficha-resumen{grid-column:1/-1}.zona-ruleta{order:2}.pregunta-panel{order:3;min-height:0}.ruleta-area{width:min(100%,280px)}.nota{padding:4px 7px}}
@media(max-width:430px){h1{font-size:20px;white-space:normal}.subtitulo{font-size:10px}.panel-izquierdo{display:block}.instrucciones,.ficha-resumen{margin-top:7px}.opciones{grid-template-columns:repeat(2,minmax(0,1fr))}.ruleta-area{width:min(100%,250px)}.ruleta-card{border-radius:10px}}