/* Abecedario interactivo: cuadrícula compacta y revelado a pantalla completa. */
.screen-alphabet{background:linear-gradient(160deg,#e8f7ff 0%,#fff5ce 52%,#ffe9f4 100%)}
.alphabet-topbar{flex:0 0 auto}.alphabet-spacer{width:50px}
.alphabet-panel{width:min(1120px,calc(100% - 24px));margin:0 auto 24px;padding:12px 18px 24px;border-radius:28px;background:rgba(255,255,255,.82);box-shadow:0 14px 35px rgba(67,89,132,.15)}
.alphabet-heading{text-align:center;color:#345}.alphabet-heading h1{margin:2px 0 4px;font-size:clamp(25px,5vmin,42px)}.alphabet-heading p{margin:0 0 14px;font-weight:700}
.alphabet-grid{display:grid;grid-template-columns:repeat(9,minmax(58px,1fr));gap:clamp(7px,1.2vw,14px)}
.alphabet-letter{aspect-ratio:1;border:0;border-radius:22px;color:#fff;font-size:clamp(28px,5vmin,52px);font-weight:900;text-shadow:0 3px 2px rgba(0,0,0,.16);box-shadow:inset 0 -7px rgba(0,0,0,.14),0 7px 12px rgba(42,65,105,.2);background:linear-gradient(145deg,#65b7ff,#4779e8);cursor:pointer;touch-action:manipulation;transition:transform .16s ease,filter .16s ease}
.alphabet-letter:nth-child(6n+2){background:linear-gradient(145deg,#ff8ab5,#ef568e)}.alphabet-letter:nth-child(6n+3){background:linear-gradient(145deg,#7bdf9b,#32b96d)}.alphabet-letter:nth-child(6n+4){background:linear-gradient(145deg,#ffcc62,#f39b36)}.alphabet-letter:nth-child(6n+5){background:linear-gradient(145deg,#ac8cff,#7659dc)}.alphabet-letter:nth-child(6n){background:linear-gradient(145deg,#58ddd5,#20aeb0)}
.alphabet-letter:active:not(:disabled){transform:translateY(5px) scale(.96);box-shadow:inset 0 -2px rgba(0,0,0,.14),0 2px 5px rgba(42,65,105,.18)}
.alphabet-letter:disabled{opacity:.28;filter:grayscale(.65);box-shadow:none}.alphabet-status{text-align:center;margin:15px 0 0;color:#607086;font-weight:700}
.alphabet-reveal{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:70px 18px 88px;perspective:1400px}.alphabet-reveal[hidden]{display:none}.alphabet-reveal-backdrop{position:absolute;inset:0;border:0;background:rgba(26,39,71,.72);backdrop-filter:blur(7px)}
.alphabet-flip-wrap{position:relative;width:min(520px,86vw);height:min(590px,67vh);animation:alphabetCardGrow .48s cubic-bezier(.2,.8,.3,1.2)}.alphabet-flip-card{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .85s cubic-bezier(.18,.75,.25,1.18)}.alphabet-flip-card.is-flipped{transform:rotateY(180deg) scale(1.04)}
.alphabet-face{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;border:9px solid rgba(255,255,255,.88);border-radius:42px;box-shadow:0 22px 55px rgba(5,18,48,.38);backface-visibility:hidden;overflow:hidden}.alphabet-face-front{background:linear-gradient(145deg,#65b7ff,#6f5be8);color:#fff;font-size:min(52vw,300px);font-weight:1000;text-shadow:0 8px 2px rgba(0,0,0,.15)}
.alphabet-face-back{transform:rotateY(180deg);padding:24px;background:linear-gradient(160deg,#fff,#fff3bf);color:#34415c}.alphabet-result-media{display:grid;place-items:center;width:100%;min-height:0;flex:1}.alphabet-result-media img{display:block;max-width:92%;max-height:100%;object-fit:contain}.alphabet-result-media span{font-size:min(34vw,210px)}.alphabet-face-back strong{font-size:clamp(29px,7vmin,55px);line-height:1.1;text-align:center;text-transform:none}
.alphabet-close{position:relative;align-self:end;border:0;border-radius:999px;padding:15px 28px;background:#fff;color:#40506d;font-size:20px;font-weight:900;box-shadow:0 7px 0 #c9d3e5;cursor:pointer}
@media(max-width:760px){.alphabet-grid{grid-template-columns:repeat(6,minmax(44px,1fr))}.alphabet-letter{border-radius:16px}.alphabet-panel{padding-inline:11px}}
@media(max-width:390px){.alphabet-grid{grid-template-columns:repeat(5,minmax(42px,1fr))}}
@media(max-height:520px) and (orientation:landscape){.alphabet-heading p,.alphabet-status{display:none}.alphabet-panel{width:calc(100% - 120px);margin-top:-52px}.alphabet-grid{grid-template-columns:repeat(9,minmax(42px,1fr))}.alphabet-flip-wrap{height:72vh;width:min(430px,60vw)}.alphabet-reveal{padding-block:18px}.alphabet-close{position:absolute;right:25px;bottom:25px}}
@keyframes alphabetCardGrow{from{opacity:.25;transform:scale(.35)}to{opacity:1;transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.alphabet-flip-card{transition:none}.alphabet-flip-wrap{animation:none}}