:root{
  --game-surface:rgba(12,18,38,.94);
  --game-line:rgba(240,230,210,.18);
  --game-muted:rgba(240,230,210,.64);
  --game-wah:#ffd08a;
  --game-echo:#9ee4d2;
}
.resource-hud{
  position:fixed; top:calc(20px + env(safe-area-inset-top)); left:50%;
  transform:translateX(-50%); display:flex; align-items:center; gap:18px;
  min-height:42px; padding:7px 14px; color:var(--paper); z-index:4;
  border:1px solid var(--game-line); border-radius:8px; background:rgba(10,16,40,.66);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  font-family:var(--serif); font-variant-numeric:tabular-nums; pointer-events:none;
}
.resource-hud span{display:grid;grid-template-columns:auto auto;gap:2px 7px;align-items:baseline;white-space:nowrap}
.resource-hud small{font-size:10px;color:var(--game-muted)}
.resource-hud b{font-size:18px;color:var(--game-wah)}
.resource-hud .echo-value{color:var(--game-echo)}
.resource-hud .streak-value{color:var(--paper);font-size:15px}
.trial-badge{
  position:fixed; top:calc(72px + env(safe-area-inset-top)); left:50%; transform:translateX(-50%);
  z-index:4; color:#1b0f0a; background:#ffd08a; padding:6px 10px; border-radius:5px;
  font:700 12px/1.2 var(--serif); letter-spacing:0; pointer-events:none;
}
.grow-button{
  position:fixed; right:calc(18px + env(safe-area-inset-right)); top:calc(20px + env(safe-area-inset-top));
  width:42px; height:42px; display:grid; place-items:center; z-index:9; color:var(--paper);
  border:1px solid rgba(226,96,63,.7); border-radius:7px; background:rgba(14,20,44,.78);
  cursor:pointer; touch-action:manipulation;
}
.grow-button:hover,.grow-button:focus-visible{border-color:#ffb36b;outline:2px solid rgba(255,179,107,.4);outline-offset:2px}
.grow-button svg{width:20px;height:20px}
.toast-region{
  position:fixed; left:50%; bottom:calc(132px + env(safe-area-inset-bottom)); transform:translateX(-50%);
  z-index:20; display:grid; gap:7px; width:min(420px,calc(100vw - 32px)); pointer-events:none;
}
.game-toast{
  justify-self:center; max-width:100%; padding:9px 13px; border:1px solid var(--game-line); border-radius:6px;
  background:rgba(10,16,38,.9); color:var(--paper); font:13px/1.45 var(--serif);
  box-shadow:0 8px 24px rgba(0,0,0,.28); animation:toast-in .2s ease-out;
}
body.drawer-open .toast-region{
  top:50%; bottom:auto; transform:translate(-50%,-50%);
}
@keyframes toast-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.drawer-backdrop{position:fixed;inset:0;z-index:10;background:rgba(3,6,16,.38);opacity:0;pointer-events:none;transition:opacity .18s ease}
.growth-drawer{
  position:fixed; right:0; top:0; bottom:0; width:min(430px,100vw); z-index:11; display:flex; flex-direction:column;
  padding-top:env(safe-area-inset-top); padding-bottom:env(safe-area-inset-bottom);
  background:var(--game-surface); color:var(--paper); border-left:1px solid var(--game-line);
  transform:translateX(100%); transition:transform .22s ease; font-family:var(--serif); visibility:hidden;
}
body.drawer-open .drawer-backdrop{opacity:1;pointer-events:auto}
body.drawer-open .growth-drawer{transform:none;visibility:visible}
.drawer-head{height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 14px 0 18px;border-bottom:1px solid var(--game-line);flex:none}
.drawer-head h2{font-size:18px;letter-spacing:0}
.icon-button{width:38px;height:38px;display:grid;place-items:center;border:0;border-radius:6px;color:var(--paper);background:transparent;cursor:pointer}
.icon-button:hover,.icon-button:focus-visible{background:rgba(255,255,255,.08);outline:2px solid rgba(255,208,138,.45)}
.icon-button svg{width:20px;height:20px}
.drawer-tabs{display:grid;grid-template-columns:repeat(6,1fr);border-bottom:1px solid var(--game-line);flex:none}
.drawer-tab{min-height:44px;border:0;border-bottom:2px solid transparent;color:var(--game-muted);background:transparent;font:13px var(--serif);cursor:pointer}
.drawer-tab[aria-selected="true"]{color:var(--game-wah);border-bottom-color:var(--accent)}
.drawer-tab:focus-visible{outline:2px solid rgba(255,208,138,.5);outline-offset:-3px}
.drawer-content{overflow:auto;overscroll-behavior:contain;flex:1;padding:16px 16px 28px}
.tab-panel[hidden]{display:none}
.tab-panel h3{font-size:14px;margin:18px 0 8px;color:#ffcf9e;letter-spacing:0}
.tab-panel h3:first-child{margin-top:0}
.craft-list,.goal-list,.collection-grid,.legacy-list{display:grid;gap:8px}
.craft-item,.goal-item,.collection-item,.legacy-item{
  border:1px solid var(--game-line);border-radius:6px;background:rgba(255,255,255,.035);padding:11px;
}
.craft-row,.goal-head,.legacy-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.craft-name,.goal-name{font-size:15px}.craft-level,.goal-progress{font-size:12px;color:var(--game-muted);white-space:nowrap}
.craft-effect,.goal-description,.muted-copy{margin-top:5px;color:var(--game-muted);font-size:12px;line-height:1.55}
.buy-button,.confirm-button,.equip-button{
  min-height:34px;padding:7px 11px;border:1px solid rgba(226,96,63,.65);border-radius:5px;
  color:var(--paper);background:rgba(226,96,63,.16);font:13px var(--serif);cursor:pointer;
}
.buy-button:disabled,.equip-button:disabled{opacity:.45;cursor:not-allowed}
.buy-button:not(:disabled):hover,.confirm-button:hover,.equip-button:not(:disabled):hover{background:rgba(226,96,63,.35)}
.goal-meter{height:5px;margin-top:9px;border-radius:3px;background:rgba(255,255,255,.1);overflow:hidden}
.goal-meter i{display:block;height:100%;background:var(--game-echo)}
.reward{margin-top:7px;color:#ffcf9e;font-size:12px}
.collection-section{margin-bottom:18px}.collection-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.collection-item{min-height:82px;display:flex;flex-direction:column;justify-content:space-between;gap:8px}
.collection-item.locked{opacity:.48}.collection-title{display:flex;align-items:center;gap:8px;font-size:14px}
.swatch{width:18px;height:18px;border-radius:3px;border:1px solid rgba(255,255,255,.25);flex:none}
.shop-section{margin-bottom:20px}.shop-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.shop-item{overflow:hidden;border:1px solid var(--game-line);border-radius:6px;background:rgba(255,255,255,.035)}
.shop-preview{position:relative;height:92px;overflow:hidden;background:#162b2d}
.shop-preview-scene_bamboo{background:radial-gradient(circle at 72% 24%,#f5e9cb 0 7%,transparent 8%),linear-gradient(#0a2424,#4f3947)}
.shop-preview-scene_bamboo::after{content:"";position:absolute;inset:32% 0 0;background:repeating-linear-gradient(82deg,transparent 0 24px,rgba(5,12,17,.8) 25px 30px)}
.shop-preview-scene_lotus{background:radial-gradient(circle at 24% 22%,#fff2ce 0 6%,transparent 7%),linear-gradient(#102b3d 0 52%,#24505a 53%,#112f37 100%)}
.shop-preview-scene_lotus::after{content:"";position:absolute;left:8%;right:8%;bottom:12px;height:12px;border-radius:50%;background:radial-gradient(ellipse,#6d9a72 0 45%,transparent 48%) 0 0/34px 12px repeat-x}
.shop-preview-toy_hand,.shop-preview-toy_green_jade,.shop-preview-toy_jade{background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.09),transparent 56%),#142629}
.shop-preview-toy_hand i,.shop-preview-toy_green_jade i,.shop-preview-toy_jade i{position:absolute;left:50%;top:22%;width:22px;height:52px;transform:translateX(-50%);border-radius:9px;background:linear-gradient(90deg,#8d7547,#eadfb8 45% 62%,#8d7547)}
.shop-preview-toy_hand i::before,.shop-preview-toy_green_jade i::before,.shop-preview-toy_jade i::before{content:"";position:absolute;left:-18px;top:8px;width:56px;height:37px;border-radius:50%;border:1px solid rgba(232,224,197,.65);transform:rotate(10deg)}
.shop-preview-toy_green_jade i{background:linear-gradient(90deg,#173e42,#77d1ba 46% 62%,#173e42);box-shadow:0 0 12px rgba(116,229,204,.3)}
.shop-preview-toy_green_jade i::before{border-color:rgba(169,235,222,.8);transform:rotate(-8deg)}
.shop-preview-toy_jade{background:radial-gradient(circle at 50% 44%,rgba(132,238,214,.18),transparent 48%),#102326}
.shop-preview-toy_jade i{background:linear-gradient(90deg,#102f34,#8be0c7 40% 58%,#173c40);box-shadow:0 0 19px rgba(116,229,204,.55);transform:translateX(-50%) perspective(80px) rotateY(-18deg)}
.shop-preview-toy_jade i::before{border-color:rgba(191,250,236,.88);transform:rotate(-13deg)}
.shop-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px}.shop-price{margin-top:3px;color:var(--game-muted);font-size:11px}.shop-bonus{margin-top:3px;color:var(--game-echo);font-size:11px;white-space:nowrap}
.shop-row .buy-button,.shop-row .equip-button{flex:none;padding-inline:8px;font-size:12px;white-space:nowrap}
.requirements{display:grid;gap:7px;margin:12px 0 16px;font-size:13px}
.requirements li{list-style:none;display:flex;justify-content:space-between;gap:10px;color:var(--game-muted)}
.requirements li.met{color:var(--game-echo)}
.heritage-preview{padding:12px;border-left:3px solid var(--accent);background:rgba(226,96,63,.09);font-size:13px;line-height:1.6}
.danger-zone{margin-top:24px;padding-top:18px;border-top:1px solid var(--game-line)}
.danger-button{color:#ffc0b2;border-color:rgba(226,96,63,.7);background:transparent}
.clear-confirm{margin-top:10px;padding:10px;border:1px solid rgba(226,96,63,.55);border-radius:6px}
.setting-row{min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--game-line);font-size:14px}
.switch{position:relative;width:42px;height:24px;flex:none}.switch input{position:absolute;opacity:0}.switch span{position:absolute;inset:0;border-radius:12px;background:#4e5260;transition:.15s}.switch span::after{content:"";position:absolute;width:18px;height:18px;left:3px;top:3px;border-radius:50%;background:white;transition:.15s}.switch input:checked+span{background:var(--accent)}.switch input:checked+span::after{transform:translateX(18px)}.switch input:focus-visible+span{outline:2px solid #ffcf9e;outline-offset:2px}
.storage-status{margin:10px 0;padding:9px;border-radius:5px;background:rgba(255,208,138,.1);color:#ffcf9e;font-size:12px}
.privacy-copy{margin-top:18px;color:var(--game-muted);font-size:12px;line-height:1.7}
body.drawer-open #cv,body.drawer-open #cv3d{pointer-events:none}
@media(max-width:640px){
  .masthead{top:calc(76px + env(safe-area-inset-top))}
  .resource-hud{top:calc(12px + env(safe-area-inset-top));gap:10px;padding:6px 9px;left:calc(12px + env(safe-area-inset-left));transform:none;max-width:calc(100vw - 78px)}
  .resource-hud b{font-size:16px}.resource-hud .streak-value{font-size:13px}.resource-hud small{font-size:9px}
  .grow-button{top:calc(12px + env(safe-area-inset-top));right:calc(12px + env(safe-area-inset-right))}
  .trial-badge{top:calc(62px + env(safe-area-inset-top))}
  .growth-drawer{top:auto;width:100%;height:min(78vh,720px);border-left:0;border-top:1px solid var(--game-line);transform:translateY(100%);border-radius:8px 8px 0 0}
  .drawer-tabs{overflow-x:auto;grid-template-columns:repeat(6,minmax(58px,1fr))}
  .drawer-content{padding:13px 13px 24px}
  .collection-grid,.shop-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .panel{bottom:calc(14px + env(safe-area-inset-bottom));gap:8px}.panel button{font-size:12px;padding:8px 11px 8px 14px}.meter b{font-size:24px}
}
@media(max-width:380px){.resource-hud{gap:7px}.collection-grid,.shop-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){
  .growth-drawer,.drawer-backdrop,.game-toast,.switch span,.switch span::after{transition:none;animation:none}
}