:root{font-family:"Microsoft YaHei","PingFang SC",sans-serif;color:#344b3e;background:#f5f3ed;font-synthesis:none}
*{box-sizing:border-box}
body{margin:0;overflow:hidden}
button,input{font:inherit}
button{color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
button:disabled{color:#aaa99e;border-color:#d9d8ce;background:#efeee7;cursor:default;box-shadow:none}
button:focus-visible,#viewer:focus-visible,.local-picker:focus-within{outline:3px solid #6e8867;outline-offset:5px}
[hidden]{display:none!important}
.classroom{position:relative;width:100%;height:100svh;min-height:240px;overflow:hidden;background:radial-gradient(ellipse at 50% 42%,#ffffff80,transparent 75%),#f5f3ed}
#viewer{position:absolute;inset:0;touch-action:none;outline-offset:-5px}
#viewer canvas{display:block;width:100%;height:100%}
.classroom[data-mode=focused] #viewer{cursor:grab}
.classroom[data-mode=focused] #viewer.dragging{cursor:grabbing}
.species-controls{position:absolute;inset:0;pointer-events:none}
.species-button{position:absolute;left:var(--button-x,50%);top:var(--button-y,18%);transform:translate(-50%,-50%);width:58px;height:58px;border:1px solid #aeb99f;border-radius:50%;background:#fffdf5;box-shadow:0 4px 16px #384b3110;font-size:27px;font-family:Georgia,"Times New Roman",serif;pointer-events:auto;transition:background .18s,color .18s}
.species-button:hover:enabled{background:#e9eedf}
.species-button[aria-pressed=true]{color:#fffdf5;background:#677e58;border-color:#677e58}
.classroom[data-mode=focused] .species-controls{inset:24px auto auto 50%;transform:translateX(-50%);display:flex;gap:18px}
.classroom[data-mode=focused] .species-button{position:static;transform:none;width:48px;height:48px;font-size:24px}
.action-controls{position:absolute;right:28px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:14px}
.action-controls button,.reset-button,.retry-button{min-width:108px;min-height:48px;padding:12px 18px;background:#fffdf4e8;border:1px solid #c4ccb9;border-radius:8px;font-size:16px;display:flex;align-items:center;justify-content:center;gap:8px}
.action-controls button svg{width:20px;height:20px;flex:none}
.action-controls button:hover:enabled,.reset-button:hover{background:#e8eedf}
.action-controls button[aria-pressed=true]{background:#e0e8d5;border-color:#829873}
.reset-button{position:absolute;top:24px;right:28px;min-width:84px}
#loading{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);max-width:calc(100% - 40px);padding:10px 18px;border-radius:7px;background:#f5f3ede8;font-size:14px;color:#79816e;text-align:center;pointer-events:none}
#loading.error{color:#875d4a;bottom:80px}
.retry-button{position:absolute;bottom:20px;left:50%;transform:translateX(-50%)}
.local-picker{position:absolute;bottom:24px;left:24px;padding:10px 15px;background:#fffdf4;border:1px solid #c4ccb9;border-radius:6px;font-size:13px;cursor:pointer}
.local-picker input{position:absolute;inset:0;width:100%;opacity:0;cursor:pointer}
@media(max-width:700px){
  .species-button{width:46px;height:46px;font-size:23px}
  .action-controls{right:12px;gap:10px}
  .action-controls button{min-width:86px;min-height:44px;font-size:13px;padding:10px}
  .reset-button{top:16px;right:12px;min-width:64px;min-height:44px;font-size:14px;padding:10px}
  .classroom[data-mode=focused] .species-controls{top:16px;gap:12px}
  .classroom[data-mode=focused] .species-button{width:42px;height:42px;font-size:22px}
  #loading{bottom:12px;font-size:12px}
  .local-picker{bottom:12px;left:12px;font-size:12px}
}
@media(max-aspect-ratio:1/1){
  .action-controls{top:auto;bottom:24px;left:50%;right:auto;transform:translateX(-50%);flex-direction:row;gap:8px}
  .action-controls button{min-width:90px}
  #loading{bottom:88px}
  #loading.error{bottom:140px}
  .retry-button{bottom:88px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* 开场引导 */
.intro{position:absolute;inset:0;z-index:20;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 38%,#fffdf6,#f1ecdd 78%);transition:opacity .45s ease}
.intro.is-leaving{opacity:0;pointer-events:none}
.intro-card{padding:36px 40px;text-align:center;max-width:min(88vw,560px)}
.intro-kicker{margin:0 0 14px;font-family:"Songti SC",Georgia,serif;font-size:14px;letter-spacing:.42em;color:#8b927f}
.intro-card h1{margin:0 0 16px;font-family:"Songti SC",Georgia,serif;font-size:clamp(30px,4.6vw,48px);letter-spacing:.12em;color:#35493c}
.intro-text{margin:0 0 30px;font-size:15px;color:#7a8470;letter-spacing:.06em}
.start-button{min-width:190px;min-height:52px;padding:14px 26px;border:1px solid #8ea07c;border-radius:999px;background:#fffdf6;color:#4f6446;font-size:17px;letter-spacing:.08em;transition:background .2s,transform .2s}
.start-button:hover:enabled{background:#e9eedf;transform:translateY(-1px)}
.start-button:disabled{color:#a7a79b;border-color:#d9d8ce;background:#f4f2e8}

/* 小手引导 */
.hand-hint{position:absolute;z-index:15;width:52px;height:52px;pointer-events:none;animation:hand-tap 1.15s ease-in-out infinite;filter:drop-shadow(0 5px 7px #3c4c3526)}
.hand-hint svg{display:block;width:100%;height:100%}
@keyframes hand-tap{0%,100%{transform:rotate(-138deg) translate(0,0)}50%{transform:rotate(-138deg) translate(4px,9px)}}

/* 旋转提示 */
.rotate-hint{position:absolute;left:50%;bottom:42px;transform:translateX(-50%);z-index:12;display:flex;align-items:center;gap:8px;padding:8px 16px;border-radius:999px;background:#fffdf4e8;border:1px solid #c4ccb9;color:#5c6b52;font-size:14px;letter-spacing:.03em;pointer-events:none;transition:opacity .5s ease}
.rotate-hint-icon{width:18px;height:18px;flex:none;color:#7e9270}

@media(max-width:700px){
  .action-controls button svg{width:18px;height:18px}
  .intro-card{padding:26px 20px}
  .intro-text{font-size:13px}
  .start-button{min-width:168px;min-height:48px;font-size:15px}
  .hand-hint{width:44px;height:44px;margin-left:-22px}
  .rotate-hint{bottom:26px;font-size:12px;padding:7px 12px}
  .rotate-hint-icon{width:16px;height:16px}
}