:root{font-family:'Segoe UI','Microsoft JhengHei',sans-serif;background:#f3f0e8;color:#263d40}*{box-sizing:border-box}body{margin:0}button,select,textarea{font:inherit}button{cursor:pointer;border:1px solid #345b4930;border-radius:12px;background:#fff;color:#29463d;padding:11px 15px;transition:.2s}button:hover{background:#e4efd9;transform:translateY(-2px)}button:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #ac662e;outline-offset:3px}button:disabled{cursor:default;opacity:.55;transform:none}header{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:20px 5%;border-bottom:1px solid #29463d20}header a{text-decoration:none;color:#284739;font-weight:850}header small{font-weight:400;margin-left:10px}header button{font-size:12px;margin-left:5px}main{max-width:1180px;margin:auto;padding:30px}.heading{display:flex;align-items:center;justify-content:space-between;gap:15px}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:800;color:#637f6c}h1{font-size:clamp(25px,3.2vw,40px);letter-spacing:-1.5px;margin:10px 0}h1 em{font-style:normal;color:#697c43;margin-left:10px}.heading p{color:#758378;font-size:13px}.score{display:flex;align-items:baseline;gap:8px;white-space:nowrap;background:#e3ecd8;border-radius:18px;padding:12px 20px}.score strong{font-size:38px}.score span{font-size:11px}.toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:22px 0 14px}.toolbar button{font-size:12px}.toolbar button[aria-pressed=true]{background:#2e5145;color:white}.toolbar label{font-size:12px}select{border:1px solid #345b4930;background:#fff;border-radius:9px;padding:10px;color:#365144}.scene{height:320px;border-radius:22px;position:relative;background:#e8ded2;overflow:hidden;border:1px solid #435c4020}.scene-label{position:absolute;top:15px;left:22px;right:22px;display:flex;justify-content:space-between;font-size:10px;color:#637970;z-index:5}.scene-label span{background:#fffc;padding:4px 8px;border-radius:6px}.window{position:absolute;left:9%;top:58px;width:145px;height:144px;border:9px solid #fcf8ea;background:linear-gradient(135deg,#b5cfc3,#dceab6);box-shadow:5px 8px #786c6320}.window:before{content:'';position:absolute;left:48%;height:100%;border-left:5px solid #fff8e3}.poster{position:absolute;right:8%;top:75px;background:#d4c5e6;padding:15px 20px;transform:rotate(5deg);font-size:24px;font-weight:900;line-height:1.15;color:#66587a;box-shadow:3px 4px #0001}.poster span{display:block;font-size:8px;margin-top:12px}.speech{position:absolute;top:52px;left:50%;transform:translateX(-50%);background:#fffefa;max-width:64%;width:max-content;padding:14px 23px;border-radius:17px;z-index:4;font-size:16px;line-height:1.65;box-shadow:0 4px 0 #394b3c15}.speech:after{content:'';position:absolute;bottom:-9px;right:25%;border-left:12px solid transparent;border-top:12px solid #fffefa}.cast{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;gap:19%;padding-bottom:23px;z-index:3}.cast figure{margin:0;text-align:center;position:relative}.cast img{height:173px;width:140px;object-fit:contain;filter:drop-shadow(0 6px 2px #0002);animation:bob 3s ease-in-out infinite}.cast figure:last-child img{animation-delay:-1.3s}.cast figcaption{font-size:11px;margin-top:4px}.cast figcaption span{color:#657864;margin-left:5px;font-size:9px}.scene-floor{position:absolute;bottom:0;height:70px;background:#c6c8b0;left:0;right:0;border-top:5px solid #b4b89f}.ripples{position:absolute;top:62%;left:47%;display:flex;gap:6px}.ripples i{width:4px;height:20px;background:#dd9f79;border-radius:4px;animation:pulse 1s infinite alternate}.ripples i:nth-child(2){animation-delay:.3s}.ripples i:nth-child(3){animation-delay:.6s}.chain{list-style:none;display:flex;padding:0;margin:16px 0;gap:8px}.chain li{flex:1;background:#e5e4d9;padding:13px 10px;border-radius:10px;font-size:12px;text-align:center;color:#7d8477}.chain li.active{background:#315747;color:#fff}.chain li.done{background:#d6e7c5;color:#3d623d}.layout{display:grid;grid-template-columns:1fr 295px;gap:17px}.panel,aside{background:#fffdf8;border:1px solid #36554320;border-radius:20px;padding:24px}h2{font-size:24px;margin:8px 0}#hint{font-size:13px;line-height:1.8;color:#6d7b70}#choices{display:flex;gap:9px;flex-wrap:wrap}#choices button{flex:1 1 220px;text-align:left;line-height:1.7;font-size:13px}.chip{flex:0 1 auto!important;background:#f0ebf7}.selected{border-color:#487653;background:#dfead4}.primary{background:#315747;color:white!important;font-weight:700}.primary:hover{background:#466d55}#feedback:not(:empty){padding:14px;margin-top:14px;border-left:3px solid #a4b974;background:#f0f3e5;line-height:1.8;font-size:13px}#nextArea{margin-top:14px}#nextArea button{margin-right:8px}aside h3{font-size:14px;margin:0 0 16px}#notes p{font-size:12px;line-height:1.8;border-bottom:1px solid #ddd;padding-bottom:10px}#notes b{color:#738a60}.fine{font-size:11px;line-height:1.8;color:#84907e}summary{cursor:pointer;font-size:12px;color:#52634e}#ledger p{font-size:11px}textarea{width:100%;min-height:80px;resize:vertical;border:1px solid #b9c8b0;border-radius:12px;padding:12px;background:#fff;color:#304a3b}label.draft{width:100%;font-size:12px;color:#718068;line-height:1.8}.ai{padding:22px;background:#e8e9df;margin-top:20px;border-radius:15px}.ai p{font-size:12px;line-height:1.9;color:#647261}.ai-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}footer{font-size:10px;color:#8a9182;padding:20px 0;line-height:1.8}a{color:#486644}dialog{border:1px solid #b6cba5;border-radius:20px;padding:30px;max-width:90vw;color:#304a3b}dialog::backdrop{background:#233429b8;backdrop-filter:blur(6px)}body.paused *{animation-play-state:paused!important}.reveal{animation:reveal .3s ease-out}@keyframes bob{50%{transform:translateY(-6px) rotate(2deg)}}@keyframes pulse{to{transform:scaleY(.35)}}@keyframes reveal{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@media(max-width:740px){main{padding:18px}header{padding:15px}header small{display:none}h1 em{display:block;margin:6px 0}.score{padding:10px}.score strong{font-size:27px}.score span{font-size:9px}.toolbar{flex-direction:column;align-items:stretch}.toolbar button{padding:10px;font-size:11px}.scene{height:310px}.window{left:4%;width:86px;height:120px}.poster{right:3%;font-size:20px}.speech{max-width:91%;font-size:13px;top:48px;padding:12px 15px}.cast{gap:10%}.cast img{height:150px;width:110px}.scene-label{left:12px;right:12px;font-size:8px}.layout{grid-template-columns:1fr}.chain{gap:4px}.chain li{padding:10px 3px;font-size:10px}.panel,aside{padding:20px}.ai-grid{grid-template-columns:1fr;gap:0}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
:root .story-intro{margin:20px 0;padding:18px 22px;border:1px solid #c7d3b9;border-radius:17px;background:#e8eddf}.story-intro strong{font-size:14px}.story-intro p{font-size:13px;line-height:1.9;margin:8px 0}.story-intro span{display:inline-block;font-size:11px;padding:5px 10px;margin-right:8px;background:#fff9;border-radius:20px}
.difficulty{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:0 0 15px;padding:14px 17px;background:#e5e9dc;border-radius:14px;font-size:12px}.difficulty p{flex-basis:100%;margin:0;color:#64725b;line-height:1.7}.difficulty span{font-size:11px;color:#64725b}
/* 0.5.1: readable game text and fluid dialogue height. */
header button,.toolbar button,.toolbar label,select,.difficulty,.difficulty button{font-size:16px}
.heading p,.story-intro p,#hint,#choices button,#feedback:not(:empty),#nextArea button,textarea{font-size:18px;line-height:1.8}
.story-intro strong,aside h3{font-size:18px}
#notes p,.ai p,summary,label.draft{font-size:16px}
.fine,#ledger p,.difficulty span,.story-intro span,footer,.eyebrow{font-size:14px}
.score span{font-size:14px}
h2{font-size:28px}
.chain li{font-size:16px}
.scene{height:auto;min-height:360px;display:flex;flex-direction:column}
.speech{position:relative;top:auto;left:auto;transform:none;margin:65px auto 16px;max-width:82%;font-size:22px;line-height:1.7;overflow-wrap:anywhere}
.cast{position:relative;inset:auto;min-height:225px;flex-shrink:0}
.scene-label{font-size:13px;gap:10px;align-items:start}
.cast figcaption,.cast figcaption span{font-size:14px}
.toolbar{flex-wrap:wrap}.toolbar>div{display:flex;flex-wrap:wrap;gap:8px}
@media(max-width:740px){
header{flex-wrap:wrap}header button{font-size:15px}.heading{flex-wrap:wrap}.heading p{font-size:17px}.score span{font-size:13px}
.story-intro p,#hint,#choices button,#feedback:not(:empty),#nextArea button,textarea{font-size:17px}
.toolbar button{font-size:16px;flex:1 1 140px}.toolbar label{font-size:16px}
.scene-label{font-size:12px;flex-wrap:wrap}.speech{margin-top:88px;max-width:92%;font-size:20px}
.cast{min-height:205px;gap:8%}.cast figcaption span{display:block;margin-left:0;font-size:13px}
.chain{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.chain li{font-size:15px;padding:11px 6px}
h2{font-size:25px}.difficulty select{max-width:100%}.difficulty{align-items:flex-start}.layout{min-width:0}#choices button{overflow-wrap:anywhere}
}
/* 0.5.2: explicit answer affordances and plain play instructions. */
.howto{padding:15px 18px;border-radius:12px;background:#edf2e1;line-height:1.8;margin-bottom:22px;font-size:17px}.howto small{font-size:14px;color:#5e725d}.answer-option:before{content:attr(data-choice) ' · 點我選擇';display:block;font-size:14px;font-weight:750;color:#547646;margin-bottom:7px}#choices .primary.answer-option:before{color:#e3f2d5}#choices .answer-option.selected{border:2px solid #547646;background:#e0edcf}.answer-option.selected:before{content:attr(data-choice) ' · 已選擇'}
/* 0.6.0: playable sorting and collection. */
.card-rack,.drop-rack,.word-rack{display:flex;gap:12px;flex-wrap:wrap;width:100%}.card-rack{margin-bottom:14px}.sentence-card{background:#fff4d9;border:2px solid #d8b875!important;box-shadow:0 4px 0 #d9c6a5;min-width:0}.sentence-card small{display:block;font-size:14px;font-weight:800;color:#846237}.sentence-card span{display:block;margin-top:6px}.drag-card{touch-action:none;cursor:grab!important}.drag-card.held{outline:3px solid #b87931;transform:rotate(-1deg)}.sentence-card.sorted{opacity:.55;box-shadow:none}.dropzone{border:2px dashed #81a489!important;background:#edf5e7;min-height:130px;flex:1 1 220px!important;text-align:center!important;display:flex;flex-direction:column;justify-content:center;gap:7px}.dropzone strong{font-size:21px}.dropzone span{font-size:16px;color:#5f795c}.dropzone.over{background:#c9e5bb;outline:3px solid #719650}.dropzone.filled{border-style:solid!important;background:#dcebd3}.placed-text{font-size:15px;line-height:1.6;margin:4px 0}.word-tray{width:100%;margin-bottom:14px}.word-tray .dropzone{width:100%;min-height:95px}.word-rack .chip{flex:0 1 auto!important}.drag-ghost{position:fixed;pointer-events:none;z-index:9999;padding:14px 18px;background:#fff1bf;border:2px solid #aa803d;border-radius:12px;max-width:210px;box-shadow:0 8px 25px #0003}.spark-bit{position:fixed;pointer-events:none;z-index:9998;font-size:24px}.drop-rack{align-items:stretch}@media(max-width:740px){.drop-rack{gap:8px}.drop-rack .dropzone{flex:1 1 130px!important;padding:12px 8px}.dropzone strong{font-size:18px}.dropzone span{font-size:15px}}