/* Mad Libs provides a compact, responsive word-entry form and illustrated story player. Version 1.2.2: tightens subtitle spacing and keeps Replay story, New, and Edit words together on phone screens. Retains grouped word fields and the bottom voice button. */
:root{color-scheme:light;--paper:#f8f6f1;--ink:#252133;--muted:#767181;--purple:#7154d7;--purple-dark:#5e40c2;--line:#e8e3ed;--card:#fff;--soft:#eee9fb}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.5 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}button,input,select{font:inherit}button,a,select,input{touch-action:manipulation}button{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:14px;font-weight:650;transition:background .15s,transform .15s}button:active{transform:translateY(1px)}button:disabled{opacity:.4;cursor:default;transform:none}svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.svg-defs{position:absolute;width:0;height:0;overflow:hidden}[hidden]{display:none!important}a{color:var(--purple)}.app-shell{max-width:680px;margin:auto;padding:24px 24px 28px}header{display:flex;align-items:center;justify-content:space-between}.brand{display:flex;gap:10px;align-items:center;text-decoration:none;color:var(--ink);font-size:27px;font-weight:850;letter-spacing:-1.2px}.brand-icon{display:grid;place-items:center;width:42px;height:42px;background:var(--purple);border-radius:13px;color:#fff;transform:rotate(-7deg)}.brand-dot{color:var(--purple)}.icon-button{width:44px;height:44px;flex-shrink:0;background:#fff;color:var(--ink);border:1px solid var(--line);box-shadow:0 3px 8px #34214e05}.byline{margin-left:0px;margin-top:2px;color:var(--muted);text-decoration:none}.card{background:var(--card);border:1px solid var(--line);border-radius:24px;box-shadow:0 12px 35px #35234906}.welcome{text-align:center;padding:20px 32px 24px}.book-art{max-width:320px;margin:0 auto 10px}.book-art svg{width:100%;height:auto;stroke:none}.eyebrow{font-size:10px;letter-spacing:1.55px;font-weight:800;color:var(--purple)}h1{font-size:32px;line-height:1.18;letter-spacing:-1px;margin:10px 0 22px;font-weight:800}h2{font-size:21px;line-height:1.25;letter-spacing:-.5px;margin:4px 0}.primary{background:var(--purple);color:#fff;min-height:50px;padding:12px 18px;box-shadow:0 6px 14px #7154d727}.primary:hover{background:var(--purple-dark)}.wide{width:100%}.text-button{background:transparent;color:var(--muted);padding:12px 8px;min-height:42px;font-weight:550}.text-button:hover{color:var(--purple)}.secondary{background:var(--soft);color:var(--purple-dark);padding:12px 16px;min-height:45px}.intro h1{font-size:29px;margin:7px 0 20px}.category-card{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:17px}.category-card label{font-size:12px;font-weight:700;color:var(--muted)}select{background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:11px;padding:9px 25px 9px 10px;font-size:14px;min-height:42px;max-width:100%}.category-card select{min-width:0;flex:1;border:0;font-weight:650}.category-card .icon-button{background:var(--soft);color:var(--purple);border:0;width:39px;height:39px}.story-header{display:flex;align-items:center;justify-content:space-between;margin:22px 2px 18px}.story-header h2{font-size:25px;margin:5px 0}.subtle{font-size:12px;color:var(--muted)}.mini-book{border-radius:16px;padding:12px;background:#f4e7d4;color:#c88b34;transform:rotate(7deg)}.mini-book svg{width:27px;height:27px}.word-toolbar{display:flex;align-items:center;justify-content:space-between;gap:5px;margin:0 2px 12px;font-size:13px;font-weight:700}.ai-button{background:var(--soft);color:var(--purple-dark);padding:8px 11px;font-size:12px;border-radius:10px;min-height:36px}.ai-button svg{width:17px;height:17px}.word-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px;margin-bottom:20px}.word-field{min-width:0}.word-label{display:flex;justify-content:space-between;gap:5px;margin:0 2px 5px;font-size:11px;color:#615b6d;font-weight:650}.ai-tag{font-size:9px;font-weight:750;color:var(--purple)}.input-wrap{position:relative}input[type=text]{width:100%;min-height:45px;padding:10px 34px 10px 11px;border:1px solid #e0dae8;border-radius:12px;background:#fff;color:var(--ink);font-size:16px;box-shadow:0 2px 4px #36224c03}input:focus,select:focus{outline:2px solid #ad99f0;outline-offset:2px}.clear-word{position:absolute;right:4px;top:6px;background:transparent;color:#9c95a9;width:32px;height:32px;border-radius:8px}.clear-word svg{width:15px;height:15px}.status{color:var(--muted);font-size:12px;min-height:0;margin:8px 0;display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}.status:empty{display:none}.status.error{color:#b12e43;background:#fff0f1;border:1px solid #f4ccd3;padding:10px 12px;border-radius:12px}.spinner{display:inline-block;width:19px;height:19px;border:2px solid #ded5f5;border-top-color:var(--purple);border-radius:50%;animation:spin .8s linear infinite;flex-shrink:0}@keyframes spin{to{transform:rotate(360deg)}}.reader-heading{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:14px}.reader-heading h1{font-size:26px;margin:5px 0}.page-counter{font-size:11px;white-space:nowrap;background:#fff;border:1px solid var(--line);padding:7px 10px;border-radius:20px;color:var(--muted);font-weight:700}.story-stage{position:relative;min-height:300px;border-radius:23px;overflow:hidden;background:#ebe5f7;box-shadow:0 12px 32px #35234913;isolation:isolate;aspect-ratio:3/4}.story-stage img{width:100%;height:100%;position:absolute;inset:0;object-fit:cover}.page-caption{position:absolute;bottom:0;left:0;right:0;color:#fff;background:linear-gradient(transparent,#171221e8 25%);padding:48px 20px 20px;font-size:clamp(13px,2.7vw,16px);line-height:1.55;max-height:58%;overflow:auto;white-space:pre-line;text-shadow:0 1px 2px #000}.page-caption span.word{font-weight:800;color:#ffe0a0}.page-caption span.sentence{display:inline}.page-loading{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;background:#f0ebfaf2;padding:26px;backdrop-filter:blur(5px)}.page-loading .spinner{width:33px;height:33px;border-width:3px;margin-bottom:8px}.page-loading strong{font-size:17px}.page-loading>span:last-child{font-size:12px;color:var(--muted);max-width:250px}.reader-controls{display:flex;gap:9px;margin-top:17px;align-items:center;justify-content:center}.reader-controls .play-button{min-width:120px;min-height:46px}.reader-controls .icon-button{width:44px;height:44px}.progress-track{height:3px;border-radius:2px;background:#e5dff1;margin:17px 0 9px;overflow:hidden}#audioProgress{height:100%;width:0;background:var(--purple)}.reader-options{display:flex;justify-content:center;gap:20px}#editButton{display:block}.reader-options svg{width:17px;height:17px}.error-panel{background:#fff1f2;color:#aa293d;padding:14px;border-radius:15px;font-size:13px;margin-top:13px}.error-panel p{margin:0 0 10px}.error-panel button{font-size:12px}footer{display:flex;gap:10px;justify-content:space-between;color:#9b94a5;font-size:10px;margin-top:28px}dialog{width:calc(100% - 28px);max-width:430px;border:1px solid var(--line);border-radius:23px;padding:22px;background:var(--card);color:var(--ink);box-shadow:0 25px 90px #20152e44;max-height:85dvh}dialog::backdrop{background:#26203870;backdrop-filter:blur(5px)}.dialog-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.dialog-heading h2{font-size:24px}.dialog-heading .icon-button{width:35px;height:35px;box-shadow:none}.settings-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.settings-row label{font-size:13px;font-weight:700}.settings-row select{width:60%}.settings-actions{display:grid;gap:9px;margin:22px 0}.settings-actions button{justify-content:flex-start;text-align:left;font-size:13px}details{font-size:12px;color:var(--muted);border-top:1px solid var(--line);padding-top:14px}summary{cursor:pointer;font-weight:650}details p{margin:12px 0}.version{font-size:10px;color:var(--muted);margin-top:18px}.keyboard-dismiss{position:fixed;right:14px;bottom:12px;z-index:15;background:var(--purple);color:#fff;border:0;box-shadow:0 5px 20px #21123a33;width:39px;height:39px}.drop-overlay{position:fixed;inset:0;background:#f0eafbF5;z-index:30;border:5px dashed var(--purple);display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--purple);pointer-events:none}.drop-overlay svg{width:70px;height:70px;margin:20px}.settings-row option{background:#fff}@media(min-width:600px){.app-shell{padding-top:32px}.welcome{max-width:490px;margin:auto}.story-stage{aspect-ratio:4/3}.page-caption{font-size:16px}.word-grid{grid-template-columns:repeat(3,1fr)}.reader-heading{margin-top:10px}}@media(max-width:380px){.app-shell{padding:18px 16px}.welcome{padding:16px 20px}.word-grid{gap:10px}.reader-controls{gap:6px}h1{font-size:29px}.category-card{gap:6px}.category-card label{font-size:10px}}@media(prefers-reduced-motion:reduce){button{transition:none}.spinner{animation-duration:1.8s}}


.word-grid{grid-template-columns:1fr;gap:11px}.word-label{font-size:12px}.word-field input{font-size:16px}.group-count{font-size:10px;color:var(--muted);font-weight:500}.story-header{margin:16px 2px 14px}.story-header h2{margin:0}.voice-dock{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(680px,100%);padding:8px 20px calc(8px + env(safe-area-inset-bottom));z-index:10;background:linear-gradient(transparent,var(--paper) 28%);text-align:center}.voice-dock .status{background:var(--paper);border-radius:10px;margin:0 0 6px;font-size:11px}.mic-indicator{display:block;font-size:9px;color:var(--muted);margin-top:4px}.mic-indicator.open{color:#368567}.mic-indicator.recording{color:#bc3b55}.hold-talk{display:flex;position:relative;height:54px;width:100%;padding:0;background:var(--purple);border:0;border-radius:16px;box-shadow:0 5px 14px #7154d72b;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;overflow:hidden}.hold-talk img{width:100%;height:54px;pointer-events:none;user-select:none;-webkit-user-drag:none}.hold-talk.recording{background:#d55770}.hold-talk.starting{background:#8d75d9}.hold-talk.busy::after{content:"";position:absolute;right:20px;width:19px;height:19px;border:2px solid #ffffff50;border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}body.has-voice-dock .app-shell{padding-bottom:115px}input[role=switch]{appearance:none;width:44px;height:26px;border-radius:20px;background:#b8b0c5;position:relative;cursor:pointer}input[role=switch]::before{content:"";position:absolute;width:20px;height:20px;top:3px;left:3px;border-radius:50%;background:white;transition:transform .15s}input[role=switch]:checked{background:var(--purple)}input[role=switch]:checked::before{transform:translateX(18px)}#missingDialog p{font-size:14px;color:var(--muted)}#retryNextButton{margin-top:12px;font-size:12px}@media(min-width:600px){.word-grid{grid-template-columns:1fr 1fr}.word-field.multi{grid-column:1/-1}}

/* Keep story actions together at phone widths and align the title directly below the subtitle. */
.reader-heading{margin-top:0}.reader-options{gap:10px}.reader-options .text-button{white-space:nowrap}