@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;600;700&family=Noto+Serif+TC:wght@500;600;700&display=swap');
:root{color-scheme:light;--paper:#f5f3e9;--ink:#555d4b;--muted:#858674;--green:#738568;--line:#dbddcc;--peach:#f0c2ae;--unit:62px;font-family:'Noto Sans TC','PingFang TC',sans-serif;color:var(--ink);background:var(--paper)}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 20% 30%,#fffbf0 0,transparent 55%),var(--paper);min-width:320px}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:disabled{cursor:default;opacity:.42}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:3px solid #788c66;outline-offset:4px}button{border:0}button:hover:not(:disabled){filter:brightness(.97)}.topbar{height:78px;max-width:1320px;margin:auto;padding:0 5%;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}.brand{font-family:Georgia,serif;font-size:23px;display:flex;gap:9px;align-items:center}.brand-mark{height:30px;width:30px;border:1.5px solid #89957b;border-radius:10px;font-size:25px;line-height:27px;text-align:center;background:#e6ecdc}.brand-label{font-family:'Noto Sans TC',sans-serif;font-size:12px;letter-spacing:.12em;margin-left:5px;color:var(--muted)}.more{font-size:13px;display:flex;gap:14px}.shell{max-width:1190px;padding:39px 36px 20px;margin:auto}.heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px}.eyebrow{font-size:10px;letter-spacing:.23em;font-weight:600;color:#7c8970;margin:0 0 12px}h1{font-family:'Noto Serif TC',serif;font-size:42px;letter-spacing:.06em;font-weight:600;margin:0;line-height:1.4}h1>span:first-child{color:#839773}.title-flower{display:inline-block;margin-left:14px;font-family:serif;font-size:39px;transform:rotate(12deg);color:#d7ac8d}.intro{font-size:14px;margin:11px 0 0;color:var(--muted);letter-spacing:.1em}.chapter-stamp{width:97px;height:97px;border:1px solid #c4cbb8;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:5px;transform:rotate(7deg);margin-right:5px;background:#eef0e3}.chapter-stamp span{font-size:10px;letter-spacing:.1em}.chapter-stamp strong{font-family:Georgia,serif;font-size:24px;font-weight:400;color:#748569}.chapters{display:flex;gap:10px;margin-bottom:29px;padding-bottom:23px;border-bottom:1px solid var(--line)}.chapter{flex:1;display:flex;align-items:center;gap:10px;padding:12px 14px;background:transparent;border:1px solid transparent;border-radius:13px;text-align:left;white-space:nowrap;font-size:13px;color:#858977}.chapter.active{background:#e5ebda;border-color:#cdd6bf;color:#526448}.chapter-number{font-family:Georgia,serif;font-size:16px;color:#8b987e;width:22px}.chapter.done .chapter-number{color:#7a8c67}.game-layout{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(290px,1fr);gap:38px}.scene-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.scene-number{font-size:10px;letter-spacing:.15em;color:#979882;margin:0 0 5px}h2{font-family:'Noto Serif TC',serif;font-weight:600;margin:0;font-size:24px;letter-spacing:.04em}.scene-badge{border:1px solid #d2d8c5;border-radius:20px;font-size:11px;padding:5px 13px;background:#edf0e3;color:#748568}.scene-caption{font-size:12px;color:var(--muted);margin:10px 0 20px}.tabletop{min-height:370px;border-radius:22px;position:relative;display:flex;align-items:center;justify-content:center;padding:49px 38px 45px;background:repeating-linear-gradient(0deg,transparent 0 84px,#bda18012 85px 86px),#ebe5d6;border:1px solid #ded6c5;overflow:hidden}.table-note{position:absolute;top:24px;left:20px;font-family:Georgia,serif;font-size:12px;line-height:1.5;color:#a1937e;transform:rotate(-9deg)}.sprig{position:absolute;right:5px;top:4px;width:72px;height:103px;transform:rotate(22deg);opacity:.9}.sprig svg{width:100%;height:100%}.table-corner{position:absolute;right:18px;bottom:13px;font-family:Georgia,serif;font-style:italic;font-size:12px;color:#a59881}.container-wrap{position:relative;z-index:1;width:100%;max-width:460px}.container-rim{padding:13px;border-radius:16px;background:#d9bd96;box-shadow:0 6px 0 #bfa37e,0 16px 22px #655d5013;border:1.5px solid #bda17c}.board{aspect-ratio:var(--cols)/var(--rows);position:relative;display:grid;grid-template-columns:repeat(var(--cols),1fr);grid-template-rows:repeat(var(--rows),1fr);background:#f7efdf;border:1px solid #b9a78d;border-radius:7px;overflow:hidden;touch-action:none}.cell{padding:0;min-width:0;background:transparent;border-right:1px dashed #cdbda361;border-bottom:1px dashed #cdbda361;border-radius:0}.cell:hover{background:#b9cfad26}.cell:focus-visible{outline:3px solid #748569;outline-offset:-4px;z-index:4}.drawer-handle{width:65px;height:9px;border:1px solid #ae916c;background:#e9d4b2;border-radius:8px;margin:12px auto 0;box-shadow:0 2px 0 #bfa37e}.tabletop[data-theme=picnic]{background-color:#e4e9d9}.tabletop[data-theme=picnic] .container-rim{background:repeating-linear-gradient(90deg,#ddc7a4 0 8px,#d4ba95 8px 10px);border-radius:24px}.tabletop[data-theme=travel]{background-color:#e8e5e8}.tabletop[data-theme=travel] .container-rim{background:#c0cdd0;border-color:#99aeb2;box-shadow:0 6px 0 #9aafb2,0 16px 22px #655d5013;border-radius:24px}.tabletop[data-theme=travel] .drawer-handle{background:#bdcbcc;border-color:#8b9ea0}.tabletop[data-theme=craft]{background-color:#eee3dc}.tabletop[data-theme=craft] .container-rim{background:#d6c2c8;border-color:#bba5ac;box-shadow:0 6px 0 #bba5ac,0 16px 22px #655d5013}.tabletop[data-theme=home]{background-color:#e7e9dc}.board-footer{display:flex;justify-content:space-between;gap:10px;font-size:11px;color:#8b8c78;padding:17px 2px 11px}.tiny-flower{color:#8c9b7d;font-size:16px;margin-right:5px}.progress-track{height:4px;background:#e4e6d7;border-radius:5px;overflow:hidden}#progress-fill{height:100%;width:0;background:#a8bc96;transition:width .35s;border-radius:5px}.inventory{background:#fcfbf5;border:1px solid #e3e3d4;border-radius:19px;padding:24px 22px 20px;align-self:start;box-shadow:0 3px 0 #e8e8db55}.inventory-heading{display:flex;align-items:center;justify-content:space-between;gap:8px}.inventory-heading h2{font-family:'Noto Sans TC',sans-serif;font-size:16px;font-weight:500;letter-spacing:.03em}.inventory-heading>span{font-size:11px;border-radius:10px;padding:3px 8px;background:#edf0e3;color:#7a896b}.inventory-tip{font-size:11px;color:#92917e;margin:9px 0 21px}.tray{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;min-height:227px;align-content:start}.tray-item{position:relative;background:#f4f2e8;border:1px solid transparent;border-radius:13px;padding:8px 4px 9px;display:flex;flex-direction:column;align-items:center;gap:7px;min-width:0;touch-action:none;transition:background .15s,border-color .15s}.tray-item.selected{background:#e7eddd;border-color:#9aaa88}.tray-item.placed{opacity:.45}.tray-item .item-preview{height:58px;width:100%;display:grid;place-items:center}.mini-piece{border:1px solid #655d503a;border-radius:7px;display:grid;place-items:center;padding:2px;box-shadow:0 2px 0 #655d5010}.mini-piece svg{width:100%;height:100%;max-width:58px;max-height:58px}.item-label{font-size:10px;white-space:nowrap;color:#7f816e}.placed-check{position:absolute;top:5px;right:7px;font-size:12px}.selection-bar{margin-top:20px;padding-top:17px;border-top:1px dashed var(--line);display:flex;justify-content:space-between;gap:6px;align-items:center;font-size:11px;min-height:53px}#selected-name{color:#7c826d}.small-button{background:#eff0e5;border:1px solid #d7dcc9;border-radius:9px;padding:6px 9px;white-space:nowrap;display:flex;align-items:center;gap:6px;font-size:14px}.small-button span{font-size:11px}kbd{font-family:inherit;border:1px solid #cbd2bc;border-radius:4px;padding:0 3px;font-size:9px;color:#8a927b}.feedback{font-size:11px;line-height:1.8;color:#868974;min-height:40px;margin:10px 0 11px}.feedback.warning{color:#a96950}.tools{display:flex;gap:7px}.tools button{background:#f3f2e9;border:1px solid #e0e2d2;border-radius:9px;padding:9px 3px;flex:1;font-size:11px}.tools span{font-size:17px;vertical-align:-1px;margin-right:4px}.gentle-note{display:flex;align-items:center;justify-content:center;gap:13px;margin-top:22px;padding-top:18px;border-top:1px dashed var(--line)}.gentle-note>span{font-size:28px;color:#b7c5a5}.gentle-note p{font-size:11px;line-height:1.9;color:#9b9b87;margin:0}.page-footer{display:flex;justify-content:space-between;border-top:1px solid var(--line);margin-top:35px;padding-top:20px;font-size:10px;color:#9a9c87;letter-spacing:.05em}.piece{position:absolute;z-index:2;padding:3px;border-radius:8px;touch-action:none;background:transparent;transition:filter .15s}.piece-body{width:100%;height:100%;background:var(--color);border:1.5px solid #655d5080;border-radius:8px;display:grid;place-items:center;overflow:hidden;box-shadow:inset 0 0 0 3px #fff5,0 2px 2px #655d501a;position:relative}.piece-body svg{width:85%;height:85%;position:absolute;inset:0;margin:auto}.piece.rotated .piece-body svg{transform:rotate(90deg);width:75%;height:75%}.piece.selected{filter:drop-shadow(0 0 3px #758b61)}.piece.selected .piece-body{border:2px solid #5e7951}.piece.drag-source{opacity:.22}.placement-preview{position:absolute;z-index:3;pointer-events:none;background:#adc39355;border:2px dashed #7c9667;border-radius:8px}.placement-preview.invalid{background:#e2ad9b55;border-color:#b77c68}.drag-ghost{position:fixed;z-index:20;pointer-events:none;opacity:.88;padding:3px}.drag-ghost[hidden]{display:none}.drag-ghost svg{width:80%;height:80%;position:absolute;inset:0;margin:auto}.drag-ghost.rotated svg{transform:rotate(90deg)}dialog{border:1px solid #d2d9c2;border-radius:25px;background:#fcfbf3;color:var(--ink);padding:32px 34px 25px;text-align:center;width:min(390px,calc(100% - 36px));box-shadow:0 25px 100px #414a3b22}dialog::backdrop{background:#59634d44;backdrop-filter:blur(5px)}.celebration-flower{font-size:63px;color:#a6b991;line-height:1.2;margin-bottom:16px;animation:flower .8s ease-out}dialog h2{font-size:27px}dialog p:not(.eyebrow){font-size:13px;line-height:1.9;color:#828671}.completion-art{height:65px;display:flex;justify-content:center;margin:16px 0 23px;gap:6px}.completion-art svg{width:64px;height:64px}.primary-button{background:#819371;color:#fffdf7;border-radius:12px;padding:13px 18px;width:100%;font-size:14px}.text-button{display:block;margin:13px auto 0;background:transparent;font-size:12px;color:#8d927e;padding:8px}.tray-empty{grid-column:1/-1;text-align:center;padding:40px 10px;color:#8a967a;font-size:13px;line-height:2}.tray-empty span{display:block;font-size:36px;color:#acbe98}noscript{display:block;text-align:center}@keyframes flower{from{transform:rotate(-80deg) scale(.6);opacity:0}to{transform:rotate(0) scale(1);opacity:1}}
@media(min-width:1300px){.shell{padding-top:47px}.tabletop{min-height:390px}.tray{gap:12px}.inventory{padding:27px 24px}}
@media(max-width:950px){.shell{padding:30px 24px 20px}.game-layout{gap:22px;grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr)}.chapter{padding:10px 7px;gap:4px;font-size:11px}.tabletop{padding:49px 22px 40px;min-height:330px}.inventory{padding:20px 16px}.brand-label{display:none}}
@media(max-width:720px){.topbar{height:62px;padding:0 22px}.brand{font-size:21px}.more{font-size:12px}.shell{padding:25px 18px 22px}.heading{margin-bottom:22px}h1{font-size:33px}.eyebrow{font-size:9px;letter-spacing:.16em}.title-flower{font-size:30px;margin-left:9px}.intro{font-size:12px}.chapter-stamp{width:76px;height:76px;margin:0}.chapter-stamp span{font-size:9px}.chapter-stamp strong{font-size:21px}.chapters{gap:5px;overflow-x:auto;padding-bottom:15px;margin-bottom:22px}.chapter{flex:0 0 auto;padding:9px 10px;font-size:12px;gap:6px}.game-layout{grid-template-columns:1fr;gap:22px}h2{font-size:22px}.scene-caption{font-size:12px;margin-bottom:15px}.tabletop{min-height:0;padding:45px 26px 34px}.container-wrap{max-width:410px}.table-note{font-size:10px;top:13px;left:14px}.sprig{width:58px;height:78px;right:0;top:0}.container-rim{padding:10px}.board-footer{font-size:10px;padding-top:13px}.inventory{padding:21px 18px}.inventory-tip{font-size:12px;margin-bottom:15px}.tray{grid-template-columns:repeat(4,minmax(0,1fr));min-height:0;gap:8px}.tray-item{padding:6px 3px 8px}.tray-item .item-preview{height:53px}.item-label{font-size:10px}.selection-bar{font-size:12px;margin-top:16px}.small-button span{font-size:12px}.feedback{font-size:12px;min-height:24px}.tools button{font-size:12px;padding:10px 4px}.gentle-note{margin-top:16px;padding-top:14px}.gentle-note p{font-size:12px}.page-footer{font-size:9px;margin-top:27px;gap:12px}}
@media(max-width:370px){.tray{grid-template-columns:repeat(3,minmax(0,1fr))}.chapter-stamp{width:65px;height:65px}h1{font-size:29px}.title-flower{display:none}.tabletop{padding-left:16px;padding-right:16px}}
.inventory-tip,.feedback{font-size:12px}.item-label{font-size:11px}.tools button{font-size:12px;min-height:43px}.mini-piece.rotated svg{transform:rotate(90deg)}
.play-area,.inventory,.tray{min-width:0}
@media(max-width:720px){.topbar{height:54px}.shell{padding-top:18px}.heading{margin-bottom:16px}.eyebrow{margin-bottom:6px}h1{font-size:30px}.intro{margin-top:5px}.chapter-stamp{width:66px;height:66px}.chapter-stamp span{font-size:8px}.chapters{padding-bottom:11px;margin-bottom:16px}.scene-number{display:none}.scene-caption{margin-top:7px;margin-bottom:12px}.tabletop{padding-top:36px;padding-bottom:25px}.inventory-tip{font-size:12px}.inventory{padding:17px 15px}.tray-item .item-preview{height:45px}.item-label{font-size:11px}.tray{gap:6px}.selection-bar{margin-top:11px;padding-top:11px}.gentle-note{display:none}.feedback{margin:7px 0;min-height:23px}.tools button{font-size:13px}.page-footer{margin-top:20px}}
@media(max-width:720px){.topbar{height:48px}.heading .eyebrow,.intro{display:none}.heading{margin-bottom:12px}.chapter-stamp{width:49px;height:49px}.chapter-stamp span{display:none}.chapters{margin-bottom:14px}.tray{display:flex;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x proximity}.tray-item{flex:0 0 76px;scroll-snap-align:start}.tray-empty{width:100%;padding:12px}.inventory-tip{margin-bottom:12px}.play-area{position:sticky;top:8px;align-self:start;z-index:5;background:var(--paper);border-radius:12px;padding-bottom:6px}.inventory{position:relative;z-index:6}.tabletop{padding-top:29px;padding-bottom:22px}.scene-caption{font-size:11px}.board-footer{font-size:10px}.page-footer{position:relative;z-index:6;background:var(--paper)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* An oblique tabletop: a continuous floor, raised walls and individual objects. */
.tabletop{min-height:405px;padding:65px 68px 65px;overflow:hidden;background:repeating-linear-gradient(0deg,transparent 0 84px,#bda18012 85px 86px),#ebe5d6}
.container-wrap{transform:matrix(1,-.12,.23,.78,0,0);transform-origin:50% 50%;max-width:435px;isolation:isolate}
.container-rim{position:relative;padding:17px;background:#d8b98e;border:1.5px solid #ab8c66;border-radius:15px;box-shadow:0 3px 0 #c4a079,0 7px 0 #bd9870,0 11px 0 #b38e66,0 16px 0 #a98762,0 27px 18px #76614835}
.container-rim::before{content:'';position:absolute;inset:9px;border-radius:9px;box-shadow:inset 0 11px 0 #b79670,inset 10px 0 0 #c1a27e;pointer-events:none;z-index:0}
.board{display:block;overflow:visible;border:0;border-radius:5px;background:linear-gradient(135deg,#ccb89555,transparent 40%),#f5ead6;box-shadow:inset 5px 8px 9px #765c3822;touch-action:none;cursor:crosshair;position:relative}
.board::before{content:'';position:absolute;inset:0;border:1px solid #b49c77;border-radius:5px;pointer-events:none}
.drawer-handle{position:absolute;bottom:-8px;left:calc(50% - 33px);height:10px;background:#ecd7b5;box-shadow:0 3px 0 #937856}
.tabletop[data-theme=travel] .container-rim{background:#b3c8c9;box-shadow:0 5px 0 #92aaad,0 10px 0 #829da1,0 16px 0 #789399,0 27px 18px #475f6533}
.tabletop[data-theme=craft] .container-rim{background:#dac5cc;box-shadow:0 5px 0 #bfa7b0,0 10px 0 #af959f,0 16px 0 #a28892,0 27px 18px #65535c33}
.tabletop[data-theme=picnic] .container-rim{box-shadow:0 5px 0 #c1a57e,0 10px 0 #b69b74,0 16px 0 #a88c65,0 27px 18px #76614835}
.piece{padding:0;transition:filter .15s;outline-offset:5px;border-radius:40%;cursor:grab}
.piece-body{background:none!important;border:0!important;border-radius:0;box-shadow:none;overflow:visible;position:relative;display:block}
.object-art{position:absolute;left:50%;top:50%;pointer-events:none}
.object-top,.object-side{position:absolute;inset:0;pointer-events:none}
.object-side{transform:translate(-1px,6px);filter:brightness(.77) saturate(.7) drop-shadow(3px 5px 3px #54483235)}
.object-top{filter:drop-shadow(-1px -1px 0 #fff8)}
.piece-body .object-art svg,.mini-piece .object-art svg,.drag-ghost .object-art svg{position:static;width:100%;height:100%;max-width:none;max-height:none;transform:none}
.piece.selected{filter:drop-shadow(0 0 5px #fffbd0)}
.piece.drag-source{opacity:.25}.mini-piece{padding:0;border:0;border-radius:0;background:none!important;box-shadow:none;position:relative;transform:rotate(-7deg)}
.item-preview{height:72px!important}.tray-item{background:#f3f1e7;min-height:108px}.tray-item:nth-child(3n+2) .mini-piece{transform:rotate(7deg)}
.placement-preview{z-index:30;border:0;background:none;opacity:.45;filter:drop-shadow(0 0 5px #c5ddae);border-radius:0}
.drag-ghost{padding:0;opacity:1;transform:rotate(-5deg);filter:drop-shadow(8px 18px 8px #655d5033)}
.plane-marker{position:absolute;width:0;height:0;pointer-events:none;visibility:hidden}#plane-origin{left:0;top:0}#plane-right{left:100%;top:0}#plane-bottom{left:0;top:100%}
@media(max-width:950px){.tabletop{padding:65px 48px;min-height:370px}}
@media(max-width:720px){.tabletop{min-height:0;padding:52px 44px 45px}.container-rim{padding:12px}.container-wrap{max-width:360px}.play-area{position:relative;top:auto}.tray-item{flex-basis:82px;min-height:97px}.item-preview{height:62px!important}.scene-caption{font-size:12px}.inventory{z-index:auto}.game-layout{gap:14px}}