:root{--story-background:url("../assets/stories/island.png");color-scheme:dark;--gold:#f4ce85;--muted:#b5b5cf;--cyan:#78dcff;--mint:#79f2cb;--line:#c4b8e02b;font-family:'Segoe UI',sans-serif;color:#eceaf8;background:#101a31}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:linear-gradient(#080e231f,#080e2330),var(--story-background) center center/cover fixed}button,select,textarea{font:inherit}button{cursor:pointer}button:disabled{cursor:default}button:focus-visible,select:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--cyan);outline-offset:5px}.topbar{width:min(900px,calc(100% - 48px));margin:auto;padding:23px 0;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{display:flex;align-items:center;gap:10px;font-family:Georgia,serif;font-weight:bold;font-size:23px;color:#ffe2ab;text-decoration:none;text-shadow:0 2px 12px #000}.topbar>span{font-size:12px;letter-spacing:1px;color:#ece6ef;text-shadow:0 2px 8px #000}.library-button{background:#172039d9;border:1px solid #d7bd855e;border-radius:9px;padding:10px 17px;color:#f3dfb7;font-size:12px;backdrop-filter:blur(12px)}.library-button:hover{background:#343652}.game{width:min(900px,calc(100% - 48px));margin:18px auto 0;padding:30px 34px 18px;background:linear-gradient(125deg,#152039f5,#20233def 60%,#202039ed);border:1px solid #efce8bba;border-radius:27px;box-shadow:0 0 0 5px #0d172a25,0 25px 90px #0009,inset 0 0 35px #c3b1f608;backdrop-filter:blur(14px);position:relative}.game:before,.game:after{content:'✧';position:absolute;color:#e9c37a8f;font-size:26px;top:10px}.game:before{left:13px}.game:after{right:13px}.story-heading{display:flex;align-items:center;gap:20px;padding:5px 8px 15px}.book-mark{font-size:56px;filter:drop-shadow(0 0 14px #ffc85965);line-height:1.3}.heading-copy{flex:1}.eyebrow{font-size:9px;letter-spacing:2px;color:#d6bd8e;text-transform:uppercase;margin:0 0 7px}h1{font:600 30px/1.15 Georgia,serif;letter-spacing:-.4px;color:var(--gold);margin:0;text-wrap:balance}.heading-copy>p:last-child{font-size:12px;color:#cbc8df;margin:9px 0 0}.journey{text-align:right;max-width:165px;flex-shrink:0}.journey p{font-size:12px;margin:0 0 12px}#progress-dots{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}.dot{width:7px;height:7px;border-radius:50%;background:#66658f;box-shadow:inset 0 1px 2px #ffffff24}.dot.done{background:var(--mint);box-shadow:0 0 6px #72eac53b}.divider{display:flex;align-items:center;gap:12px;color:#efbb6f;margin:6px 0 13px}.divider:before,.divider:after{content:'';height:1px;flex:1;background:linear-gradient(90deg,transparent,#c99f6280)}.divider:after{transform:rotate(180deg)}.divider span{font-size:24px;line-height:18px;text-shadow:0 0 15px #d38c4380}.typing-panel{padding:22px 24px 24px;border:1px solid #9f9bc734;border-radius:24px;background:linear-gradient(135deg,#2b35544d,#33304b55);box-shadow:inset 0 1px 0 #ffffff07}.exercise-heading{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:0 0 17px}h2{font:500 22px Georgia,serif;color:#f6ddb1;margin:0}.mode-label{display:flex;align-items:center;gap:7px;font-size:10px;color:var(--muted)}select{font-size:10px;background:#1b233b;border:1px solid #aaa0ce45;border-radius:6px;padding:7px;color:#ded9f2}.sentence-window{background:#0c1526c9;border:1px solid #8c89b12b;border-radius:15px;padding:23px 25px;min-height:112px;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 3px 15px #0002}#story-text{font:28px/1.65 Consolas,'Courier New',monospace;color:#a8a8c3;text-align:center;white-space:pre-wrap;overflow-wrap:anywhere;margin:0}.typed{color:var(--cyan)}.current{background:#eeedf9;color:#293149;border-radius:2px;box-shadow:0 0 12px #e0ddff30}.upcoming{color:#a8a8c3}textarea{width:100%;display:block;resize:vertical;min-height:85px;max-height:220px;margin-top:18px;padding:18px 20px;font:21px/1.5 Consolas,monospace;color:#f1effc;background:#141e365e;border:1px solid #8d8aaa7d;border-radius:13px;caret-color:var(--cyan);transition:border-color .15s,box-shadow .15s}textarea:focus{outline:0;border-color:#6bd9ff;box-shadow:0 0 0 1px #6bd9ff,0 0 20px #42baff12}textarea::placeholder{font:17px/1.7 Georgia,serif;color:#9795b1}textarea:disabled{opacity:.6}.feedback-row{display:flex;justify-content:space-between;gap:10px;align-items:start;min-height:40px;padding:9px 0 12px;font-size:10px}#feedback{margin:0;color:var(--mint)}#mode-hint{color:#b2aec6;text-align:right;font-size:9px;max-width:190px}.exercise-bottom{display:flex;align-items:center;gap:24px}.stat{display:flex;align-items:center;gap:11px}.stat-icon{font-size:33px;color:#c9bbf0}.stat div>span{font-size:11px;color:#d2cbe4;display:block}.stat strong{display:block;font-size:20px;margin-top:3px;font-weight:600;color:var(--mint)}.letters{border-left:1px solid #aaa1d040;padding-left:24px}.letters strong{color:#ded5ff}#continue{margin-left:auto;min-width:175px;display:flex;justify-content:center;gap:22px;border:1px solid #c8b0f67a;border-radius:28px;padding:13px 24px;background:linear-gradient(135deg,#8777bb,#675c9e);box-shadow:inset 0 1px 10px #f5d9ff12;color:#fff0d5;font:20px Georgia,serif;transition:filter .15s,transform .15s}#continue:disabled{opacity:.48}#continue:not(:disabled):hover{filter:brightness(1.2);transform:translateY(-1px)}.lower{margin:13px 0 4px}.revealed{position:relative;overflow:hidden;border:1px solid #c5a05b83;border-radius:18px;padding:19px 25px;background:linear-gradient(90deg,#17213af5,#19213bd6),var(--story-background) center 58%/cover;min-height:166px}.revealed-heading{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #c0a98730;padding-bottom:12px}.revealed-heading h2{font-size:22px}.revealed-heading h2 span{color:var(--gold);margin-right:10px}.revealed-heading>span{font-size:10px;color:#b7afc8}#unlocked-text{max-height:160px;overflow:auto;scrollbar-color:#777198 transparent;padding-right:10px;font:16px/1.8 Georgia,serif;color:#dfd9ec}#unlocked-text p{margin:10px 0}.empty-story{color:#b1a8c2;font-style:italic;margin:17px 0 10px}#locked-note{font-size:10px;letter-spacing:.4px;color:#d1b88e;margin:10px 0 0}.game-footer{display:flex;align-items:center;justify-content:space-between;padding:15px 6px 0;font-size:9px;color:#aba6bd}#reset-story{font-size:9px;color:#c6bfd4;background:none;border:0;text-decoration:underline;text-underline-offset:3px;padding:4px}.page-footer{text-align:center;font-size:9px;letter-spacing:2px;color:#eee0c4;text-shadow:0 1px 6px #000;padding:21px}.page-footer span{margin:0 15px;color:var(--gold)}dialog{width:min(800px,calc(100% - 40px));max-height:85vh;border:1px solid #c6a77294;border-radius:22px;padding:30px;color:#eeebf6;background:linear-gradient(130deg,#19243b,#28243f);box-shadow:0 30px 100px #000b}dialog::backdrop{background:#070d21b8;backdrop-filter:blur(9px)}.library-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}.library-heading h2{font-size:30px}.library-heading button{display:grid;place-items:center;flex:0 0 34px;padding:0;border:1px solid var(--line);background:#ffffff08;border-radius:50%;width:34px;height:34px;color:#e4dcf7;line-height:1}.library-heading button svg{display:block;width:16px;height:16px}.library-intro{font-size:12px;color:var(--muted);margin:12px 0 24px}#story-list{display:grid;grid-template-columns:1fr 1fr;gap:10px}.story-choice{display:flex;text-align:left;gap:13px;align-items:center;background:#111b3180;border:1px solid #c5b7ef27;border-radius:12px;padding:15px;color:#eee7f7}.story-choice:hover{background:#39324d;border-color:#d7b97a}.story-choice[aria-current=true]{border-color:#e2c180;background:#51405166}.choice-symbol{font-size:25px;color:var(--gold);width:30px;text-align:center}.choice-copy{flex:1}.choice-copy strong{display:block;font:16px Georgia,serif;color:#f1d6a4}.choice-copy small{display:block;font-size:10px;color:var(--muted);margin-top:6px}.choice-number{font-size:11px;color:#bcafcf}.input-error{border-color:#f3a495!important}.cursor-error .current{background:#ffb5a8}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}@media(min-width:1500px){.game{margin-top:30px;padding:35px 38px 20px}.sentence-window{min-height:125px}.revealed{min-height:180px}.topbar{padding-top:30px}}@media(max-width:800px){.topbar{width:calc(100% - 32px);padding:18px 0}.topbar>span{display:none}.game{padding:22px;width:calc(100% - 32px)}h1{font-size:25px}.book-mark{font-size:40px}.journey{max-width:110px}.typing-panel{padding:18px}.exercise-heading{flex-wrap:wrap}.mode-label{margin-left:auto}#story-text{font-size:24px}.exercise-bottom{gap:14px}.letters{padding-left:14px}#continue{min-width:130px;font-size:18px}.feedback-row{flex-direction:column}#mode-hint{max-width:none}.story-heading{gap:12px}}@media(max-width:520px){.journey{display:none}.book-mark{font-size:34px}.game{padding:18px 12px}.typing-panel{padding:14px}.stat-icon{display:none}.stat strong{font-size:17px}#continue{min-width:110px;padding:12px 14px}.revealed{padding:16px}#story-list{grid-template-columns:1fr}.page-footer{font-size:8px;letter-spacing:1px}.revealed-heading h2{font-size:20px}}@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* Cover tall desktop windows without letterboxing. Grow from the existing 900px tablet panel rather than shrinking at 1100px. */
@media (min-width: 1100px) {
    body {
        background-size: cover;
        background-repeat: no-repeat;
        background-color: #101a31;
    }
    .game {
        width: clamp(900px, 72vw, 1040px);
        margin-inline: auto;
        margin-top: 10px;
    }
    .page-footer {
        width: clamp(900px, 72vw, 1040px);
        margin-inline: auto;
    }
}



@media (min-width: 1100px) {
    .topbar { width: clamp(900px, 72vw, 1040px); margin-top: 0; }
}



/* Phone-only workspace: the visible viewport excludes the software keyboard. */
@media (max-width: 600px) {
    body {
        position: fixed;
        top: var(--phone-top, 0px);
        left: 0;
        width: 100%;
        height: var(--phone-height, 100dvh);
        min-height: 0;
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 6px 10px max(6px, env(safe-area-inset-bottom));
        overflow: hidden;
        background-attachment: scroll;
    }
    .topbar { width: 100%; padding: 0; margin: 0; min-height: 40px; flex: 0 0 40px; }
    .brand { font-size: 19px; gap: 7px; }
    .brand img { width: 25px; height: 25px; }
    .library-button { min-height: 36px; padding: 7px 11px; font-size: 12px; }
    .game {
        width: 100%; margin: 0; padding: 12px;
        flex: 1; min-height: 0;
        display: flex; flex-direction: column; gap: 10px;
        border-radius: 16px;
    }
    .game::before, .game::after, .book-mark, #story-category,
    #adventure-number, #progress-dots, .divider, .page-footer,
    .game-footer, .stat-icon, .letters, #mode-hint { display: none; }
    .story-heading { padding: 0; gap: 8px; flex: 0 0 auto; }
    .heading-copy { min-width: 0; }
    h1 { font-size: 17px; line-height: 1.3; text-wrap: wrap; }
    .journey { display: block; max-width: none; }
    .journey p { font-size: 10px; margin: 0; }
    .typing-panel {
        display: flex; flex-direction: column; gap: 8px;
        flex: 1; min-height: 0; padding: 0; border: 0;
        background: none; box-shadow: none; border-radius: 0;
    }
    .exercise-heading { margin: 0; flex-wrap: nowrap; gap: 6px; flex: 0 0 auto; }
    .exercise-heading h2 { font: 12px 'Segoe UI', sans-serif; }
    .mode-label { font-size: 0; gap: 0; }
    #difficulty { font-size: 16px; padding: 5px; max-width: 160px; }
    .sentence-window {
        flex: 1; min-height: 64px; padding: 12px;
        overflow: auto; align-items: flex-start; justify-content: flex-start;
        border-radius: 10px; overscroll-behavior: contain;
    }
    #story-text { font-size: 21px; line-height: 1.5; text-align: left; margin-block: auto; width: 100%; }
    #user-input {
        flex: 0 0 64px; height: 64px; min-height: 64px; max-height: 64px;
        margin: 0; padding: 9px 11px; resize: none;
        font-size: 18px; line-height: 1.3; border-radius: 10px;
    }
    #user-input::placeholder { font: 16px/1.5 'Segoe UI', sans-serif; }
    .feedback-row { min-height: 0; padding: 0; flex: 0 0 auto; font-size: 11px; line-height: 1.3; }
    .exercise-bottom { flex: 0 0 40px; gap: 10px; }
    .stat div { display: flex; align-items: baseline; gap: 8px; }
    .stat div > span { font-size: 11px; }
    .stat strong { font-size: 16px; margin: 0; }
    #continue { min-width: 120px; min-height: 40px; padding: 8px 16px; font: 16px 'Segoe UI', sans-serif; }
    .revealed { flex: 0 1 150px; min-height: 0; padding: 12px; }
    .revealed-heading { padding-bottom: 6px; }
    .revealed-heading h2 { font-size: 17px; }
    #unlocked-text { max-height: 80px; font-size: 14px; }
    #locked-note { display: none; }
    dialog { width: calc(100% - 20px); max-height: calc(var(--phone-height, 100dvh) - 20px); padding: 18px; }
    .library-heading h2 { font-size: 24px; }
    #story-list { grid-template-columns: 1fr; }
    /* Hide secondary content when the keyboard leaves little vertical space. */
    .phone-compact .story-heading, .phone-compact .exercise-heading,
    .phone-compact .revealed { display: none; }
    .phone-compact .game { padding: 10px; }
    .phone-compact .topbar { min-height: 34px; flex-basis: 34px; }
    .phone-compact .library-button { min-height: 32px; padding-block: 5px; }
}