:root{--accent:#b85f45;--accent-dark:#914331;--ink:#332923;--muted:#8a7a70;--line:#e9e0d8;--paper:#fffdfa;--bg:#fbf7f1}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:var(--bg);color:var(--ink);font-family:"PingFang TC","Noto Sans TC","Microsoft JhengHei",sans-serif;-webkit-font-smoothing:antialiased}button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:3px solid var(--accent);outline-offset:4px}.app-shell{width:min(100%,740px);min-height:100vh;margin:auto;padding:clamp(28px,6vw,56px) clamp(24px,6vw,52px) 30px}.masthead{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:34px}.masthead h1{margin:0;font-family:"Songti TC","Noto Serif TC",serif;font-size:clamp(31px,6.2vw,49px);font-weight:600;letter-spacing:.035em;line-height:1.18}.masthead p{margin:11px 0 0;font-family:"Songti TC","Noto Serif TC",serif;font-size:clamp(17px,3.4vw,25px);color:#77675d}.masthead p span{margin-left:4px}.sound-button{width:48px;height:48px;margin-top:3px;border:0;background:transparent;font-family:serif;font-size:42px;line-height:1;color:var(--ink);transform:rotate(-33deg)}.sound-button[aria-pressed=false]{opacity:.38}.levels{display:flex;gap:12px;overflow-x:auto;padding:2px 0 6px;scrollbar-width:none}.levels::-webkit-scrollbar{display:none}.levels button{flex:0 0 auto;min-width:88px;border:1px solid var(--line);border-radius:99px;background:transparent;padding:10px 17px;color:#534940;font-family:"Songti TC","Noto Serif TC",serif;font-size:clamp(16px,3vw,21px);line-height:1.2;transition:background .2s,color .2s,border .2s,transform .2s}.levels button[aria-pressed=true]{background:#fff3ed;border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);color:var(--accent)}.levels button:active{transform:scale(.97)}.stage-info{margin-top:36px}.stage-line{display:flex;align-items:baseline;justify-content:space-between;gap:16px;font-family:"Songti TC","Noto Serif TC",serif}.stage-line strong{font-size:clamp(22px,4.3vw,29px);font-weight:600}.stage-line span{color:#76685f;font-size:clamp(19px,3.7vw,26px)}progress{display:block;width:100%;height:10px;margin-top:18px;overflow:hidden;border:0;border-radius:999px;background:var(--line);appearance:none}progress::-webkit-progress-bar{background:var(--line);border-radius:999px}progress::-webkit-progress-value{background:linear-gradient(90deg,var(--accent-dark),var(--accent));border-radius:999px;transition:width .36s ease}progress::-moz-progress-bar{background:var(--accent);border-radius:999px}.card-scene{margin-top:40px;perspective:1400px}.card{position:relative;display:block;width:100%;height:clamp(370px,68vh,610px);padding:0;border:0;border-radius:31px;background:transparent;transform-style:preserve-3d;transition:transform .68s cubic-bezier(.2,.75,.2,1);box-shadow:0 20px 40px rgba(82,51,34,.08);touch-action:pan-y}.card.is-revealed{transform:rotateY(180deg)}.card.is-changing .card-face{animation:card-in .42s ease}@keyframes card-in{from{opacity:.4}55%{opacity:1}}.card-face{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;border:1px solid rgba(130,95,74,.06);border-radius:31px;background:var(--paper);backface-visibility:hidden;-webkit-backface-visibility:hidden}.card-front{padding:clamp(26px,7vw,68px);transform:rotateY(180deg)}.card-back{background:linear-gradient(145deg,#fffdfa,#f8eee5);color:var(--accent)}.card-back:before,.card-back:after{position:absolute;content:"";width:190px;height:190px;border:1px solid #ead8ce;border-radius:50%;opacity:.8}.card-back:before{transform:translate(-72px,-86px)}.card-back:after{transform:translate(82px,95px)}.back-mark{z-index:1;font-family:"Songti TC","Noto Serif TC",serif;font-size:clamp(37px,7vw,60px);line-height:1.35;letter-spacing:.14em}.back-note{z-index:1;margin-top:24px;color:#a99386;font-size:14px;letter-spacing:.22em}.art{display:flex;align-items:center;justify-content:center;width:clamp(82px,17vw,130px);height:clamp(82px,17vw,130px);margin-bottom:clamp(28px,7vh,68px);border-radius:50%;background:#fff4ed;font-size:clamp(48px,10vw,82px);filter:saturate(.7)}.question{max-width:15ch;font-family:"Songti TC","Noto Serif TC",serif;font-size:clamp(31px,6.3vw,52px);font-weight:600;letter-spacing:.025em;line-height:1.42;text-align:center}.hint{position:absolute;bottom:28px;color:#9e8d82;font-size:14px;letter-spacing:.14em}.actions{display:grid;grid-template-columns:clamp(64px,13vw,95px) minmax(0,1fr) clamp(72px,14vw,104px);align-items:center;gap:clamp(12px,2.5vw,20px);margin-top:32px}.actions button{height:clamp(58px,10vw,76px);border-radius:99px;font-family:"Songti TC","Noto Serif TC",serif;font-size:clamp(18px,3.7vw,28px)}.round-action,.skip-action{border:1px solid #e0d3c9;background:transparent}.round-action{font-family:Arial,sans-serif!important;font-size:clamp(30px,6vw,44px)!important;font-weight:300;line-height:1}.next-action{border:0;background:linear-gradient(100deg,var(--accent-dark),var(--accent));box-shadow:0 9px 17px rgba(139,70,48,.13);color:white}.next-action span{margin-left:9px;font-family:Arial,sans-serif;font-size:1.18em}.actions button:active{transform:scale(.98)}.round-action:disabled{cursor:not-allowed;opacity:.28}footer{display:flex;justify-content:center;align-items:center;gap:12px;margin-top:18px;color:#8b7a70;font-size:clamp(13px,2.5vw,17px)}footer button{border:0;background:transparent;color:#8b7a70;text-decoration:underline;text-underline-offset:4px;font-size:inherit}#status{min-height:20px;margin:15px 0 0;color:var(--accent);font-size:14px;text-align:center}@media(min-width:760px){.app-shell{padding-bottom:48px}.levels{justify-content:space-between}.levels button{min-width:0;flex:1}}@media(max-width:380px){.app-shell{padding-inline:18px}.levels{gap:8px}.levels button{min-width:75px;padding-inline:13px}.card-scene{margin-top:30px}.card{height:365px}.actions{gap:8px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
