/* v0.31: an illustrated RPG shell with a dedicated English dungeon. */
:root{--quest-gold:#ffdc72;--quest-ink:#f3f6ff;--quest-muted:#adc0dc}
body{background:radial-gradient(ellipse at 50% 15%,#213d58,#080d1c 70%)}
#app{background:radial-gradient(ellipse at 50% 0,#243450,transparent 65%),#101a2d}
.app-header{background:linear-gradient(#243653,#152238);border-bottom:1px solid #6881a245;padding-top:max(8px,env(safe-area-inset-top,0px))}
.brand b{letter-spacing:-.03em;color:#fff1cf}.brand small{color:#d4b873;font-size:9px;letter-spacing:1.3px;margin-left:3px}
.wallet{gap:7px;padding:5px 0}.wallet>span{padding:5px 9px;border-radius:8px;background:#0b152bb0;border:1px solid #7088a040}.wallet b{font-size:15px}.wallet #player-level{font-size:13px;color:#ffe1a0}
#navigation{grid-template-columns:repeat(7,minmax(0,1fr));padding:5px 3px calc(5px + env(safe-area-inset-bottom,0px));gap:1px;background:linear-gradient(#223550,#0b162a);border-top:1px solid #94a4bf70;box-shadow:0 -6px 25px #03091380}
#navigation button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:11px!important;min-height:59px;padding:5px 1px;color:#aab9d0;border-radius:9px}
#navigation button:before{font-size:23px;line-height:24px;color:#b7c9e4;text-shadow:0 2px 3px #050b18}
#navigation [data-page=battle]:before{content:'⚔'}#navigation [data-page=growth]:before{content:'↟'}#navigation [data-page=dungeon]:before{content:'▤'}#navigation [data-page=summon]:before{content:'✦'}#navigation [data-page=collection]:before{content:'♟'}#navigation [data-page=items]:before{content:'♜'}#navigation [data-page=mail]:before{content:'✉'}
#navigation button.active{color:#ffe9ac;background:linear-gradient(#625a44,#29344a);box-shadow:inset 0 2px #f1d084,inset 0 -2px #d6af53;border:1px solid #dac28055}
#navigation button.active:before{color:#ffe19a}#navigation [data-page=dungeon]{color:#ffe7a6}#navigation [data-page=dungeon]:before{color:#ffd96a}
.primary,.growth-row button:not(:disabled){background:linear-gradient(#ffdf77,#edbb42);border:1px solid #ffe9a6;border-bottom:3px solid #9c742f;color:#30220b;box-shadow:inset 0 1px #fff5c1,0 3px 8px #070e2155;font-weight:800}
button:active:not(:disabled){transform:translateY(1px)}button:disabled{opacity:1}
.growth-row{background:linear-gradient(110deg,#263b56,#15253b);border-color:#576882;box-shadow:inset 0 1px #9babbe20,0 3px 6px #050b1625}.growth-row h2{font-size:15px}.growth-row p{font-size:11px}.growth-row button{touch-action:none;user-select:none;-webkit-user-select:none}.growth-intro{font-size:12px}.growth-hold-note{color:#ffe1a0;font-size:12px;margin:0}
.segments button.active{border-color:#e1bc6d;background:linear-gradient(#645940,#3e3a33);color:#ffebb9}
.learn-shortcut{display:flex;align-items:center;justify-content:space-between;gap:7px;background:linear-gradient(100deg,#413e70,#222e51);border:1px solid #b6a1ff80;color:#eee7ff;font-size:12px;min-height:44px;border-radius:10px;padding:9px 12px}
#battle-learn{min-height:36px;padding:5px 9px;white-space:nowrap;color:#ffe3a1;background:linear-gradient(#554934,#343a4b);border-color:#c8a15a;font-size:12px}.page-heading:has(#battle-learn){gap:6px}#page-battle #stage-title{font-size:14px;flex:1}#page-battle #guide{font-size:12px}
#summon-learn{flex:none}#page-summon{overflow-y:auto;overscroll-behavior:contain}#page-summon>.summon-feature{min-height:180px}
body[data-screen=dungeon] #journey-status{display:none!important}body[data-screen=dungeon] #app{grid-template-rows:auto minmax(0,1fr) auto}
#page-dungeon{overflow-y:auto;overscroll-behavior:contain;gap:14px;padding:0 2px 20px;scrollbar-width:thin}
#page-dungeon>*{flex-shrink:0}.eyebrow{font-size:9px;letter-spacing:2px;color:#d9bc78;display:block;margin-bottom:5px;font-weight:700}#page-dungeon h1{font-size:24px;letter-spacing:-.6px}.learning-seal{color:#b6edff;font-size:30px;text-shadow:0 0 20px #64bdff80}
.learning-intro{position:relative;padding:21px 17px 13px;border:1px solid #a6b2d455;border-radius:15px;overflow:hidden;background:linear-gradient(90deg,#12253bed,#1824498c),url('assets/media-v20/sky.png') 50% 43%/cover;box-shadow:inset 0 1px #ffffff20,0 6px 18px #050a1625}
.learning-intro>b{font-size:19px;color:#fff0bf;letter-spacing:-.5px}.learning-intro p{font-size:12px;line-height:1.7;color:#d2def4;margin:8px 0 17px}
.learning-totals{display:grid;grid-template-columns:repeat(3,1fr);padding-top:12px;border-top:1px solid #8292b752;gap:5px}.learning-totals>span{font-size:10px;color:#aebbd3}.learning-totals b{display:block;margin-top:5px;color:#fff3c6;font-size:16px}.learning-totals b small{font-size:10px;color:#98aac5}
.dungeon-portals{display:grid;gap:9px}.dungeon-portal{position:relative;text-align:left;min-height:103px;padding:12px 13px;display:grid;grid-template-columns:62px 1fr 20px;align-items:center;gap:12px;border-radius:13px;overflow:hidden;border:1px solid #637ba3;background:#162437;box-shadow:inset 0 1px #ffffff20}
.dungeon-portal.vocab,.quiz-arena.vocab{background:linear-gradient(90deg,#123e40e8,#10253388),url('assets/media-v20/forest.png') center 43%/cover}
.dungeon-portal.grammar,.quiz-arena.grammar{background:linear-gradient(90deg,#3c2446e8,#31214788),url('assets/media-v20/volcano.png') center 40%/cover}
.dungeon-portal.sentence,.quiz-arena.sentence{background:linear-gradient(90deg,#203654e8,#21325388),url('assets/media-v20/sky.png') center 46%/cover}
.dungeon-portal.selected{border:2px solid #ffe38c;box-shadow:inset 0 0 25px #e7c86c12,0 0 13px #e7c86c14;padding:11px 12px}
.portal-mark{display:grid;place-items:center;width:57px;height:65px;border:1px solid #b5f0d5a0;border-radius:16px 16px 24px 24px;background:linear-gradient(145deg,#afdcc832,#0c262eba);font:bold 30px Georgia,serif;color:#d0ffdf;box-shadow:inset 0 0 13px #a4f6c820,0 4px 12px #001a2340;text-shadow:0 0 10px #4fff9566}
.grammar .portal-mark{color:#ffd8a8;border-color:#f8bb8f80;background:linear-gradient(145deg,#8d515333,#302032ba)}.sentence .portal-mark{color:#d6dcff;border-color:#adafff90;background:linear-gradient(145deg,#637ada55,#20264cba)}
.dungeon-portal small{display:block;color:#b9d2d5;font-size:8px;letter-spacing:1.7px;margin-bottom:5px}.dungeon-portal b{font-size:19px;color:#fff5d6;display:block;letter-spacing:-.5px}.dungeon-portal em{font-style:normal;font-size:11px;color:#dbc7a1;display:block;margin-top:7px}.dungeon-portal i{font-size:22px;font-style:normal;color:#ffe8a8}
.level-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:6px}.level-heading h2{font-size:16px}.level-heading span{font-size:10px;color:#afc3dc}
.dungeon-levels{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}.dungeon-levels button{display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 2px;min-height:80px;border:1px solid #5a6b88;background:linear-gradient(#273b58,#19263d);border-radius:10px}.dungeon-levels b{font-size:14px}.dungeon-levels small{font-size:10px;color:#a5d9fb}.level-stars{font-size:10px;letter-spacing:1px;color:#cfb777}.dungeon-levels button.selected{background:linear-gradient(#6b5733,#353747);border:2px solid #ffda79;padding:9px 1px;color:#fff0c9}.dungeon-levels button.selected small{color:#fff0b6}
.dungeon-entry{border:1px solid #857251;border-radius:13px;background:linear-gradient(135deg,#33384a,#1a273c);padding:16px}.entry-heading{display:flex;justify-content:space-between;align-items:center;gap:7px}.entry-heading small{display:block;color:#d4b776;font-size:9px;letter-spacing:1px;margin-bottom:6px}.entry-heading b{font-size:17px}.entry-heading strong{font-size:23px;color:#b8eaff;white-space:nowrap}.dungeon-entry>p{font-size:11px;line-height:1.7;color:#c1cfe0;margin:10px 0}.entry-rules{display:flex;flex-direction:column;gap:5px;font-size:11px;color:#c4d2e5}.entry-bonus{color:#ffdd90!important}#dungeon-start{width:100%;min-height:52px;font-size:16px;display:flex;justify-content:center;gap:20px;align-items:center;margin-top:12px}.entry-note{display:block;text-align:center;font-size:10px;color:#a9bad0;margin-top:10px}
.learning-record{padding:14px;background:#142139;border:1px solid #445875;border-radius:10px;font-size:12px}.learning-record summary{cursor:pointer;min-height:30px;line-height:30px}.learning-record summary span{float:right;color:#b3d9f0}.learning-record>div{padding:10px 0;display:grid;grid-template-columns:1fr 1fr auto;gap:7px;border-top:1px solid #43577366;font-size:11px}.learning-record>div strong{color:#bfeaff}.learning-record p{margin:14px 0;color:#b1c4dd}
.quiz-top{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px}.quiz-top>span{flex:1;text-align:center}.quiz-top b{display:block;color:#ffe09d;margin-top:4px}.quiz-top>strong{font-size:20px;color:#fff0c7}.quiz-top small{font-size:11px;color:#acc0d9}.quiz-top button{min-height:44px;padding:7px 10px;font-size:11px}
.quiz-progress{height:7px;background:#060f20;border:1px solid #486380;border-radius:8px;overflow:hidden}.quiz-progress i{display:block;height:100%;background:linear-gradient(90deg,#f3bc4f,#ffeca8);transition:width .25s}
.quiz-arena{height:132px;border:1px solid #6b839e;border-radius:13px;position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}.arena-label{font-size:8px;letter-spacing:3px;color:#d4e2e4}.arena-rune{font:bold 47px Georgia,serif;color:#ffebae;text-shadow:0 0 18px #eaf4bc80;line-height:64px}.arena-score{display:flex;gap:18px;font-size:10px;color:#cadde7}.arena-score b{color:#ffe5a4}.quiz-arena.success{box-shadow:inset 0 0 35px #91ef9650;border-color:#a1f2bd}.quiz-arena.miss{border-color:#dbb49a}
.quiz-card{padding:17px 14px;background:linear-gradient(130deg,#243653,#14223a);border:1px solid #657792;border-radius:14px;box-shadow:0 7px 15px #050d1933}.quiz-type{display:block;font-size:11px;line-height:1.6;color:#abbfdc;margin-bottom:14px}.quiz-prompt{font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:23px!important;line-height:1.55;letter-spacing:0!important;color:#fff8dc;overflow-wrap:anywhere}.quiz-prompt.word{text-align:center;font-size:33px!important;margin:20px 0 25px}.quiz-hint{font-size:12px;color:#c3d4ec;line-height:1.65;margin:12px 0 16px;padding:10px;border-left:2px solid #b0a0e0;background:#223650}
.quiz-options{display:grid;gap:9px;margin-top:19px}.quiz-options button{display:flex;text-align:left;align-items:center;gap:12px;padding:13px 12px;min-height:55px;background:linear-gradient(#354866,#273850);border:1px solid #708099;border-bottom:3px solid #13203a;border-radius:10px;font-size:15px}.quiz-options button>span{font:700 12px system-ui;display:grid;place-items:center;width:24px;height:24px;border:1px solid #8494ad88;border-radius:6px;flex:none;color:#b8cee4}.quiz-options button b{flex:1;line-height:1.5;overflow-wrap:anywhere}.quiz-options button em{font-size:10px;font-style:normal;white-space:nowrap}.quiz-options button.correct:disabled{background:#204c42!important;border-color:#75d6a7!important;color:#e0fff0!important}.quiz-options button.incorrect:disabled{background:#53373e!important;border-color:#c7868c!important;color:#ffe2e3!important}
.quiz-calm{font-size:11px;line-height:1.6;text-align:center;color:#9fb6d1}.quiz-feedback{border:1px solid #739b9b;background:#173d3c;padding:14px;border-radius:12px;color:#e2fff5}.quiz-feedback.incorrect{background:#3b3042;border-color:#b99c8a;color:#ffeed6}.quiz-feedback b{font-size:14px}.quiz-feedback p{font-size:15px;line-height:1.6;margin:10px 0;overflow-wrap:anywhere}.quiz-feedback p span{font-size:10px;display:block;color:#bfd3d7}.quiz-feedback small{font-size:12px;line-height:1.8;display:block;color:#c4dcdb}#quiz-next{min-height:52px;font-size:16px}
.sentence-answer{display:flex;flex-wrap:wrap;align-content:flex-start;gap:6px;min-height:100px;padding:12px;background:#0b1830;border:1px dashed #7d98be;border-radius:10px;margin:20px 0 14px}.sentence-answer>span{font-size:12px;color:#889ebe;margin:auto}.sentence-answer button{padding:8px 10px;min-height:44px;background:#345e74;border-color:#95d6d5;font-family:system-ui,sans-serif;font-size:15px;text-align:left}.sentence-answer button span{color:#b2c9d9}.sentence-pieces{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}.sentence-pieces button{min-height:47px;padding:10px 12px;font-family:system-ui,sans-serif;font-size:15px;background:linear-gradient(#586382,#394866);border:1px solid #a4b2c9;max-width:100%;overflow-wrap:anywhere;line-height:1.5}.sentence-pieces button:disabled{opacity:.38}.sentence-actions{display:grid;grid-template-columns:1fr 1.3fr;gap:8px;margin-top:19px}.sentence-actions button{min-height:48px;font-size:13px}
.quit-confirm{background:#3e3148;border:1px solid #b2a0bb;padding:15px;border-radius:12px;font-size:13px}.quit-confirm p{font-size:11px;line-height:1.8;color:#dbc9d9;margin:9px 0}.quit-confirm button{font-size:12px;min-height:44px}
.result-hero{text-align:center;padding:24px 8px 10px;background:radial-gradient(ellipse,#5d527c55,transparent 70%)}.result-hero.cleared{background:radial-gradient(ellipse,#ac925344,transparent 70%)}.result-emblem{font-size:80px;line-height:104px;color:#ffe395;text-shadow:0 0 40px #d8ba6477}.result-hero h1{font-family:Georgia,serif;font-size:27px!important;letter-spacing:1px!important;color:#ffe5a6}.result-hero p{font-size:12px;color:#bfc8dc;margin-top:9px}.result-stars{font-size:35px;letter-spacing:6px;color:#ffe198;margin:15px 0}.result-score{font-size:35px;color:#f3f8ff}.result-score small{font-size:12px;color:#acbed9}.reward-chest{text-align:center;background:linear-gradient(130deg,#3c424d,#27314a);padding:19px 12px;border:1px solid #c7aa66;border-radius:14px}.reward-chest>small{font-size:11px;color:#d4c29b}.reward-chest>strong{display:block;font-size:38px;color:#bceaff;margin:12px 0}.reward-chest>div{display:flex;justify-content:center;gap:12px;font-size:10px;color:#afc7de}.result-saved{text-align:center;font-size:11px;line-height:1.8;color:#b5d8cc}#page-dungeon>.action-row button{min-height:49px;font-size:13px}
.review-toggle{background:#22344d;border-color:#6684a5;text-align:left;display:flex;justify-content:space-between;gap:8px;font-size:12px;min-height:48px}.review-toggle span{color:#edc997}.quiz-review{display:grid;gap:10px}.quiz-review article{padding:15px;background:#1b2c44;border:1px solid #446281;border-radius:10px}.quiz-review article.incorrect{border-left:3px solid #e2b28b}.quiz-review h3{font:600 17px/1.6 system-ui,sans-serif;overflow-wrap:anywhere;margin:9px 0}.quiz-review p{font-size:13px;line-height:1.7;margin:8px 0;overflow-wrap:anywhere}.quiz-review small{font-size:11px;line-height:1.8;color:#b8cbe0}.quiz-review .your-answer{color:#e0b3b7}.learning-error{color:#ffd1be!important;font-size:12px!important;line-height:1.7!important}
@media(min-width:600px){#page-dungeon{padding-inline:10px}.dungeon-portals{grid-template-columns:repeat(3,minmax(0,1fr))}.dungeon-portal{grid-template-columns:1fr;gap:9px;min-height:200px;text-align:center;padding:16px 8px}.dungeon-portal.selected{padding:15px 7px}.portal-mark{margin:auto}.dungeon-portal i{position:absolute;top:8px;right:12px}.dungeon-portal b{font-size:16px}.dungeon-portal small{font-size:7px;letter-spacing:1px}.learning-intro{padding:25px}.learning-intro>b{font-size:24px}.quiz-options{grid-template-columns:repeat(2,minmax(0,1fr))}.quiz-arena{height:160px}.quiz-card{padding:25px}.dungeon-levels button{min-height:85px}.learning-totals b{font-size:20px}}
@media(max-width:380px){.brand small{display:none}.wallet b{font-size:14px}.wallet>span{padding:5px 7px}#screens{padding:8px}.dungeon-portal{min-height:92px;grid-template-columns:50px 1fr 18px;gap:11px}.portal-mark{width:49px;height:59px}.dungeon-portal b{font-size:18px}.dungeon-levels{gap:5px}.learning-intro>b{font-size:17px}.quiz-prompt{font-size:20px!important}.quiz-prompt.word{font-size:30px!important}.quiz-top>span{font-size:11px}.quiz-arena{height:112px}.arena-rune{line-height:47px;font-size:38px}}
@media(max-height:500px){#navigation button{min-height:45px;gap:1px}#navigation button:before{font-size:17px;line-height:18px}.app-header{padding-top:3px}.quiz-arena{height:100px}.learning-intro{padding-top:12px}}
@media(prefers-reduced-motion:reduce){.quiz-progress i{transition:none}button:active:not(:disabled){transform:none}}

/* Learning has its own lasting progress, separate from the currency wallet. */
#page-dungeon .learning-mastery{padding:13px;border:1px solid #8d8dc670;border-radius:13px;background:radial-gradient(ellipse at 100% 0,#5c629445,transparent 65%),linear-gradient(125deg,#253950,#17273b);break-inside:avoid}
#page-dungeon .mastery-heading{display:flex;justify-content:space-between;align-items:center;gap:9px}
#page-dungeon .mastery-heading>span{min-width:0}.mastery-heading>span>small{display:block;font-size:8px;letter-spacing:1.8px;color:#a8c6e2;margin-bottom:5px}.mastery-heading>span>b{font-size:13px;color:#eff5ff;display:block}
#page-dungeon .mastery-heading>strong{font-size:23px;color:#d5c6ff;text-align:right;white-space:nowrap}.mastery-heading>strong>small{display:block;font-size:9px;color:#acbdda;font-weight:500}
#page-dungeon .mastery-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin-top:12px;padding-top:10px;border-top:1px solid #a8b4dd30;text-align:center}.mastery-stats>span{font-size:10px;color:#b7cde3}.mastery-stats b{display:block;font-size:19px;line-height:1.3;color:#e6e2ff;margin-bottom:3px}
#page-dungeon .learning-mastery p{font-size:10px;line-height:1.6;margin:10px 0 0;color:#b6cbe3}#page-dungeon .learning-mastery>button{width:100%;min-height:44px;margin-top:10px;font-size:12px;background:linear-gradient(#455474,#2b3b5c);border-color:#9fa5d1}
#page-dungeon .knowledge-trail{display:flex;gap:5px;justify-content:center;align-items:center;margin-top:3px}.knowledge-trail i{width:16px;height:16px;display:grid;place-items:center;border:1px solid #a4c5d45c;border-radius:50%;font-size:12px;font-style:normal;color:#bdd1e4;background:#0b1c33a6}.knowledge-trail i.lit{color:#ffebb0;border-color:#e4c66d;background:#8f743b90;box-shadow:0 0 9px #ffd47240}.knowledge-trail i.review{background:#4f485d;color:#d9c6ea;border-color:#a799be}.knowledge-trail i.current{border-color:#e0edff;box-shadow:0 0 0 2px #dbe8ff20}
#page-dungeon .quiz-listen{display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;min-width:108px;padding:7px 12px;font-size:12px;border-radius:24px;color:#cfecff;background:#203c57;border-color:#88b7d175;box-shadow:none;margin:8px auto 0}.quiz-listen>span{font-size:17px;line-height:1}.quiz-feedback .quiz-listen{margin-inline:0!important}.quiz-review .quiz-listen{margin-inline:0!important}
#page-dungeon .review-label{color:#ded0ff;font-size:10px;background:#74649e44;border:1px solid #9c8dc170;border-radius:5px;padding:2px 4px;display:inline-block;margin-bottom:4px}
#page-dungeon .feedback-growth{font-size:10px;color:#c7dccf;line-height:1.6;margin-top:8px;padding-top:7px;border-top:1px solid #99c6b42e}#page-dungeon .quiz-feedback.incorrect .feedback-growth{color:#d9c7d6}
#page-dungeon .quiz-answer-stage{break-inside:avoid}#page-dungeon .quiz-answer-stage>#quiz-next{width:100%;margin-top:8px}
#page-dungeon .reward-summon-value{display:block;color:#e8dcff;font-size:13px;line-height:1.6;margin:-2px 0 10px}#page-dungeon .next-learning-target{padding:9px 0 0!important;border-top:1px solid #a8b4dd30;color:#b0c5de}#page-dungeon .next-learning-target b{display:block;font-size:13px;margin-top:4px;color:#ffdfa4}
#page-dungeon #reward-review-run{width:100%;min-height:47px;font-size:12px;color:#e8dfff;border-color:#9b8fc5;background:linear-gradient(#4d486b,#30354e)}
#page-dungeon .paged-content .quiz-arena{height:82px}.quiz-review .quiz-listen{font-size:11px!important}
@media(max-height:570px){#page-dungeon .quiz-answer-stage,#page-dungeon .learning-mastery{break-inside:auto}#page-dungeon .paged-content .quiz-arena{height:76px}#page-dungeon .mastery-stats{margin-top:8px;padding-top:7px}#page-dungeon .learning-mastery{padding:10px}#page-dungeon .quiz-feedback .quiz-listen{display:inline-flex;margin-top:5px}}
@media(prefers-reduced-motion:no-preference){#page-dungeon .quiz-arena.success .knowledge-trail .lit:last-of-type{animation:knowledge-light .45s ease-out}#page-dungeon .result-hero.cleared .result-emblem{animation:knowledge-light .65s ease-out}@keyframes knowledge-light{from{transform:scale(.75);filter:brightness(1.8)}to{transform:scale(1);filter:brightness(1)}}}
