:root{--cream:#eee2c3;--ink:#68543a;--glass:#eadbb9e6}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none}
html,body{margin:0;min-height:100%;overflow:hidden}
body{background:var(--cream);color:var(--ink);font-family:"Noto Serif SC",serif;touch-action:manipulation}
button{font:inherit;color:inherit}
.scene{position:relative;width:min(100vw,560px);height:100svh;min-height:620px;margin:auto;overflow:hidden;isolation:isolate;background:#eee2c3}
.world{position:absolute;inset:0;z-index:0;overflow:hidden}
.scene-base,.leaf-layer{position:absolute;inset:-1.5%;width:103%;height:103%;object-fit:cover;pointer-events:none;user-select:none}
.scene-base{z-index:0}
.leaves-back{z-index:1;animation:drift-back 10s ease-in-out infinite}
.leaves-mid{z-index:2;animation:drift-mid 8s ease-in-out infinite}
.leaves-front{z-index:5;animation:drift-front 7s ease-in-out infinite;filter:drop-shadow(0 7px 8px #4c422d28)}
.leaves-wide{display:none;z-index:6}
header{position:absolute;z-index:7;top:calc(5.5% + env(safe-area-inset-top));left:0;right:0;text-align:center;font-size:12px;font-weight:700;letter-spacing:.28em;color:#705b40;text-shadow:0 1px #fff8}
.instrument{position:absolute;z-index:4;left:50%;top:48%;width:min(122vw,590px);aspect-ratio:2/3;transform:translate(-50%,-50%);filter:drop-shadow(0 18px 18px #49382030)}
.kalimba-body{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none}
.tines{position:absolute;left:25.1%;right:25.1%;top:24.55%;height:41.9%;display:flex;align-items:flex-start;justify-content:center;gap:.75%;z-index:2}
.key{position:relative;width:10.45%;height:var(--h);padding:0;border:0;outline:0;background:none;appearance:none;-webkit-appearance:none;cursor:pointer;transform-origin:50% 1.5%;touch-action:manipulation}
.key:focus,.key:focus-visible{outline:none}
.key img{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none;-webkit-user-drag:none;user-drag:none;filter:drop-shadow(2px 3px 2px #49382055)}
.key span{position:absolute;z-index:2;left:50%;bottom:4.8%;transform:translateX(-50%);font:700 clamp(11px,3.4vw,17px)/1 Georgia,serif;color:#60533f;text-shadow:0 1px 1px #fff,0 -1px #76665255;pointer-events:none}
.key sup{font-size:.55em;position:absolute;top:-.62em;left:38%}
.key sub{font-size:.55em;position:absolute;bottom:-.62em;left:38%}
.key.active{animation:tine-vibrate .46s linear}
.key.guide:before{content:"";position:absolute;z-index:3;left:50%;bottom:-13px;width:7px;height:7px;border-radius:50%;background:#746548;transform:translateX(-50%);box-shadow:0 0 0 5px #fff2bd99;animation:pulse 1s infinite}
.engraving{position:absolute;z-index:3;left:32%;top:76.2%;font:700 clamp(6px,1.8vw,9px)/1 Georgia,serif;letter-spacing:.12em;color:#8c6847;opacity:.5;text-shadow:0 1px #f8dca8,0 -1px #865a35}
.orientation{position:absolute;z-index:10;right:17px;top:calc(4.3% + env(safe-area-inset-top));height:34px;padding:0 11px;border:1px solid #806b4d;border-radius:18px;background:#eadbb9df;box-shadow:inset 0 0 0 2px #fff2ce88,0 3px 8px #5743292d;display:flex;align-items:center;gap:5px}
.orientation span{font-size:16px;line-height:1}.orientation b{font-size:9px;letter-spacing:.12em}
.controls{position:absolute;z-index:8;left:0;right:0;bottom:calc(4.8% + env(safe-area-inset-bottom));display:flex;justify-content:center;align-items:center;gap:12px}
.controls button{border:1px solid #806b4d;background:var(--glass);backdrop-filter:blur(10px);box-shadow:inset 0 0 0 3px #fff2ce88,0 4px 10px #57432935}
.mode{height:46px;min-width:124px;border-radius:24px;display:flex;align-items:center;justify-content:center;gap:10px}.mode span{font-size:17px}.mode b{font-size:12px;letter-spacing:.18em}.mode i{width:12px;height:2px;background:#756249;border-radius:3px}
.round{width:46px;height:46px;border-radius:50%;font-size:18px}
.round:disabled{opacity:.42;cursor:default}
.controls button:active{transform:translateY(2px)}
.status{position:absolute;z-index:8;bottom:calc(1.6% + env(safe-area-inset-bottom));left:0;right:0;text-align:center;margin:0;font-size:9px;letter-spacing:.2em;opacity:.58}
@keyframes drift-back{50%{transform:translate3d(3px,2px,0) scale(1.006)}}@keyframes drift-mid{50%{transform:translate3d(-4px,-3px,0) scale(1.009)}}@keyframes drift-front{50%{transform:translate3d(4px,-4px,0) scale(1.012)}}@keyframes tine-vibrate{0%,100%{transform:rotate(0) skewX(0)}12%{transform:rotate(.85deg) skewX(.45deg)}25%{transform:rotate(-.62deg) skewX(-.34deg)}39%{transform:rotate(.43deg) skewX(.24deg)}53%{transform:rotate(-.29deg) skewX(-.16deg)}68%{transform:rotate(.17deg) skewX(.09deg)}83%{transform:rotate(-.07deg) skewX(-.04deg)}}@keyframes pulse{50%{transform:translateX(-50%) scale(.7);opacity:.5}}
@media(max-height:720px){.instrument{width:min(101vw,490px);top:47%}.controls{bottom:3%}.status{display:none}}
@media(min-width:700px){
  .scene{width:100vw;max-width:none;box-shadow:none}
  .scene .leaves-back,.scene .leaves-mid,.scene .leaves-front{display:none}
  .scene .leaves-wide{display:block;inset:-1%;width:102%;height:102%;object-fit:cover;opacity:.82;filter:drop-shadow(0 8px 10px #4c422d24);animation:wide-leaves 8.5s ease-in-out infinite}
  .instrument{width:min(43vw,520px);top:50%}
  .controls{bottom:4.2%}
}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important}}

/* 横向演奏模式：琴键优先，允许裁掉部分琴身。 */
body.force-landscape .scene{position:fixed;left:50%;top:50%;width:100vh;max-width:none;height:100vw;min-height:0;transform:translate(-50%,-50%) rotate(90deg);transform-origin:center}
.scene.performance header{opacity:0}
.scene.performance .instrument{width:136%;height:auto;aspect-ratio:2/3;left:50%;top:-24%;transform:translate(-50%,-24.55%);filter:drop-shadow(0 12px 14px #4938202b)}
.scene.performance .kalimba-body{object-fit:contain}
.scene.performance .tines{left:25.1%;right:25.1%;top:24.55%;height:41.9%;gap:.65%}
.scene.performance .key{width:10.5%}
.scene.performance .key span{font-size:clamp(12px,2.6vh,18px)}
.scene.performance .engraving{left:18%;top:82%;font-size:8px}
.scene.performance .leaves-back{opacity:.7}
.scene.performance .leaves-mid{opacity:.72;transform:scale(1.025)}
.scene.performance .leaves-front{opacity:.9}
.scene.performance .leaves-wide{display:block;inset:-1%;left:auto;top:auto;width:102%;height:102%;object-fit:cover;opacity:.72;transform:none;filter:drop-shadow(0 6px 8px #4c422d22);animation:wide-leaves 8.5s ease-in-out infinite}
.scene.performance .controls{left:auto;right:18px;bottom:14px;gap:7px}
.scene.performance .mode{min-width:92px;height:38px}.scene.performance .round{width:38px;height:38px}
.scene.performance .status{left:18px;right:auto;bottom:18px}
.scene.performance .orientation{top:14px;right:16px}
.scene.performance .orientation b:after{content:"退出";font-size:0}.scene.performance .orientation b{font-size:0}.scene.performance .orientation b:after{font-size:9px}

@media(orientation:landscape){
  body.force-landscape .scene{position:relative;left:auto;top:auto;width:100vw;height:100svh;transform:none}
  .scene.performance{width:100vw;max-width:none;height:100svh}
  .scene.performance .instrument{left:46%;top:-68%}
}
@keyframes wide-leaves{50%{transform:translate3d(2px,-2px,0) scale(1.006)}}