:root{--bg-0: #0b0907;--bg-1: #15110c;--panel: rgba(20, 16, 11, .86);--panel-solid: #1b1611;--gold: #d9a441;--gold-2: #f3d98c;--text: #ede3d0;--muted: #a2917a;--hp: #cf3b30;--mp: #3d78d8;--xp: #f0b24a;--danger: #e5483a;--success: #6fbf73;--fire: #ff7a3c;--water: #3fa6ff;--earth: #a8743f;--wind: #4fd6a8;--border: rgba(217, 164, 65, .35);--border-strong: #d9a441;--scrim: rgba(0, 0, 0, .6);--glow-gold: 0 0 12px rgba(217, 164, 65, .35);--quality-0: #c9c4b8;--quality-1: #6fbf73;--quality-2: #4da3ff;--quality-3: #b478ff;--quality-4: #f0b24a;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 24px;--r-4: 4px;--r-8: 8px;--r-12: 12px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-20: 20px;--fs-24: 24px;--fs-32: 32px;--dur-1: .12s;--dur-2: .22s;--dur-3: .32s;--ease: cubic-bezier(.22, .61, .36, 1);--touch-min: 44px;--hud-h: 56px;--panel-w: 520px;--safe-t: env(safe-area-inset-top, 0px);--safe-r: env(safe-area-inset-right, 0px);--safe-b: env(safe-area-inset-bottom, 0px);--safe-l: env(safe-area-inset-left, 0px);--font: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;--font-title: "Cinzel", "Noto Serif SC", "Songti SC", serif;color-scheme:dark}html[data-theme=nebula]{--bg-0: #06060f;--bg-1: #0e0b1e;--panel: rgba(20, 16, 40, .86);--panel-solid: #14112a;--gold: #a98bff;--gold-2: #dcd0ff;--text: #e8e4f6;--muted: #9a94b5;--hp: #d9486e;--mp: #4e8dff;--xp: #b47cff;--danger: #ff5e78;--success: #45d6ae;--fire: #ff6a5a;--water: #58c8ff;--earth: #a78bcf;--wind: #5fe3d0;--border: rgba(169, 139, 255, .38);--border-strong: #a98bff;--glow-gold: 0 0 12px rgba(169, 139, 255, .35);--quality-0: #b9b6c8;--quality-1: #45d6ae;--quality-2: #58c8ff;--quality-3: #b47cff;--quality-4: #ffb36a}html[data-theme=daybreak]{--bg-0: #ede4d2;--bg-1: #f6efdf;--panel: rgba(255, 250, 240, .92);--panel-solid: #fbf5e8;--gold: #8a6a2c;--gold-2: #b08a3a;--text: #241c12;--muted: #6a5a45;--hp: #b33327;--mp: #2f63b5;--xp: #c9922e;--danger: #b32e22;--success: #3f8f49;--fire: #c8552a;--water: #2a76c4;--earth: #8a6534;--wind: #2f8f73;--border: rgba(138, 106, 44, .4);--border-strong: #8a6a2c;--scrim: rgba(28, 22, 14, .55);--glow-gold: 0 0 10px rgba(138, 106, 44, .28);--quality-0: #6e675b;--quality-1: #2e7a3e;--quality-2: #2a63b0;--quality-3: #7a45c8;--quality-4: #a66a12;color-scheme:light}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:var(--bg-0);color:var(--text);font-family:var(--font);font-size:var(--fs-14);line-height:1.5;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}button,input,select{font-family:inherit;font-size:inherit;color:inherit}.app{position:fixed;inset:0;overflow:hidden;display:flex;flex-direction:column;background:var(--bg-0)}.world{position:fixed;inset:0;background:var(--bg-0)}.world canvas{display:block}.hud{position:absolute;left:0;right:0;top:0;padding:calc(8px + var(--safe-t)) calc(10px + var(--safe-r)) 8px calc(10px + var(--safe-l));display:flex;gap:var(--space-3);align-items:flex-start;justify-content:space-between;pointer-events:none;z-index:20}.hud>*{pointer-events:auto}.hud-card{background:var(--panel);border:1px solid var(--border);border-radius:var(--r-8);padding:6px 10px;backdrop-filter:blur(2px);box-shadow:0 2px 10px #00000059}.hud-left{display:flex;flex-direction:column;gap:4px;min-width:210px}.hud-row{display:flex;align-items:center;gap:var(--space-2);font-size:var(--fs-12)}.hud-name{font-weight:600;letter-spacing:.5px}.hud-lv{color:var(--gold-2);font-size:var(--fs-12)}.hud-right{text-align:right;display:flex;flex-direction:column;gap:2px;font-size:var(--fs-12)}.hud-map{font-weight:600}.hud-cp{color:var(--gold);font-weight:700;text-shadow:var(--glow-gold)}.bar{position:relative;height:8px;border-radius:999px;background:#00000073;border:1px solid var(--border);overflow:hidden}.bar>i{display:block;height:100%;width:0%;transition:width var(--dur-2) linear}.bar.hp>i{background:linear-gradient(90deg,var(--hp),#f07167)}.bar.mp>i{background:linear-gradient(90deg,var(--mp),#6ea8ff)}.bar.xp>i{background:linear-gradient(90deg,var(--xp),var(--gold-2))}.bar.exp>i{background:linear-gradient(90deg,#8a6e2f,var(--gold))}.bar-label{display:flex;justify-content:space-between;font-size:var(--fs-12);color:var(--muted)}.hud-bottom{position:absolute;left:0;right:0;bottom:0;padding:8px calc(10px + var(--safe-r)) calc(8px + var(--safe-b)) calc(10px + var(--safe-l));display:flex;align-items:center;gap:var(--space-2);justify-content:center;z-index:20;pointer-events:none;flex-wrap:wrap}.hud-bottom>*{pointer-events:auto}.hud-btn{min-width:64px;min-height:var(--touch-min);padding:6px 10px;border-radius:var(--r-8);border:1px solid var(--border);background:var(--panel);color:var(--text);cursor:pointer;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:var(--fs-12);transition:transform var(--dur-1) var(--ease),border-color var(--dur-1)}.hud-btn:active{transform:scale(.96)}.hud-btn .ico{font-size:18px;line-height:1}.hud-btn.active{border-color:var(--border-strong);color:var(--gold-2);box-shadow:var(--glow-gold)}.hud-btn[disabled]{opacity:.5;cursor:not-allowed}.hud-btn.xp-ready{border-color:var(--xp);box-shadow:0 0 16px #f0b24aa6;animation:pulse 1.4s ease-in-out infinite}@keyframes pulse{0%,to{filter:brightness(1)}50%{filter:brightness(1.35)}}.hud-xp{display:flex;flex-direction:column;gap:2px;width:180px;padding:6px 10px;background:var(--panel);border:1px solid var(--border);border-radius:var(--r-8)}.panel-overlay{position:absolute;inset:0;z-index:30;background:var(--scrim);display:flex;justify-content:flex-end;padding:calc(56px + var(--safe-t)) calc(12px + var(--safe-r)) calc(72px + var(--safe-b)) calc(12px + var(--safe-l));animation:fade-in var(--dur-2) var(--ease)}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.panel{width:min(var(--panel-w),100%);max-height:100%;display:flex;flex-direction:column;background:var(--panel-solid);border:1px solid var(--border-strong);border-radius:var(--r-12);box-shadow:0 12px 40px #0000008c,var(--glow-gold);overflow:hidden;animation:slide-in var(--dur-3) var(--ease)}@keyframes slide-in{0%{transform:translate(24px);opacity:.4}to{transform:none;opacity:1}}.panel-head{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--border);background:linear-gradient(180deg,rgba(217,164,65,.12),transparent)}.panel-title{font-family:var(--font-title);font-size:var(--fs-20);letter-spacing:2px;color:var(--gold-2);margin:0;flex:1}.panel-close{width:var(--touch-min);height:var(--touch-min);border-radius:var(--r-8);border:1px solid var(--border);background:transparent;color:var(--muted);cursor:pointer;font-size:18px}.panel-close:hover{color:var(--gold-2);border-color:var(--border-strong)}.panel-tabs{display:flex;gap:2px;padding:0 var(--space-3);border-bottom:1px solid var(--border);overflow-x:auto;scrollbar-width:none}.tab{padding:var(--space-2) var(--space-3);min-height:40px;border:0;background:transparent;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap}.tab.active{color:var(--gold-2);border-bottom-color:var(--border-strong)}.panel-body{padding:var(--space-4);overflow-y:auto;flex:1;min-height:0}.panel-foot{padding:var(--space-3) var(--space-4);border-top:1px solid var(--border);display:flex;gap:var(--space-2);justify-content:flex-end;flex-wrap:wrap}.btn{min-height:var(--touch-min);padding:8px 16px;border-radius:var(--r-8);border:1px solid var(--border);background:#ffffff0a;color:var(--text);cursor:pointer;transition:border-color var(--dur-1),background var(--dur-1),transform var(--dur-1);font-size:var(--fs-14)}.btn:hover:not(:disabled){border-color:var(--border-strong);background:#d9a4411a}.btn:active:not(:disabled){transform:scale(.98)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn-primary{border-color:var(--border-strong);background:linear-gradient(180deg,#d9a44147,#d9a4411a);color:var(--gold-2);font-weight:600}.btn-danger{border-color:var(--danger);color:var(--danger)}.btn-sm{min-height:32px;padding:4px 10px;font-size:var(--fs-12)}.btn-block{width:100%}.chip{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;border:1px solid var(--border);font-size:var(--fs-12);color:var(--muted)}.chip.gold{color:var(--gold-2);border-color:var(--border-strong)}.card{border:1px solid var(--border);border-radius:var(--r-8);background:#ffffff08;padding:var(--space-3)}.card+.card{margin-top:var(--space-2)}.row{display:flex;align-items:center;gap:var(--space-2)}.row-between{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2)}.col{display:flex;flex-direction:column;gap:var(--space-2)}.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2)}.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-2)}.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-2)}.grid-7{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:var(--space-2)}.section-title{font-family:var(--font-title);letter-spacing:1px;color:var(--gold);font-size:var(--fs-16);margin:var(--space-4) 0 var(--space-2);display:flex;align-items:center;gap:var(--space-2)}.section-title:after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--border),transparent)}.muted{color:var(--muted)}.small{font-size:var(--fs-12)}.gold{color:var(--gold)}.stat{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px dashed rgba(255,255,255,.08)}.stat:last-child{border-bottom:0}.stat-label{color:var(--muted)}.stat-value{font-variant-numeric:tabular-nums;font-weight:600}.cp{font-family:var(--font-title);font-size:var(--fs-32);color:var(--gold-2);text-shadow:var(--glow-gold);font-variant-numeric:tabular-nums}.item-card{position:relative;border:1px solid var(--border);border-radius:var(--r-8);padding:var(--space-2);background:#00000040;cursor:pointer;transition:border-color var(--dur-1),transform var(--dur-1);min-height:64px;display:flex;flex-direction:column;gap:2px;font-size:var(--fs-12)}.item-card:hover{transform:translateY(-1px)}.item-card.selected{border-color:var(--border-strong);box-shadow:var(--glow-gold)}.item-card.empty{cursor:default;color:var(--muted);align-items:center;justify-content:center;border-style:dashed}.item-name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.item-sub{color:var(--muted)}.quality-0{color:var(--quality-0)}.quality-1{color:var(--quality-1)}.quality-2{color:var(--quality-2)}.quality-3{color:var(--quality-3)}.quality-4{color:var(--quality-4)}.item-card.quality-b0{border-color:color-mix(in srgb,var(--quality-0) 55%,transparent)}.item-card.quality-b1{border-color:color-mix(in srgb,var(--quality-1) 55%,transparent)}.item-card.quality-b2{border-color:color-mix(in srgb,var(--quality-2) 55%,transparent)}.item-card.quality-b3{border-color:color-mix(in srgb,var(--quality-3) 55%,transparent)}.item-card.quality-b4{border-color:color-mix(in srgb,var(--quality-4) 70%,transparent)}.holes{display:flex;gap:3px}.hole{width:8px;height:8px;border-radius:50%;border:1px solid var(--border)}.hole.filled{background:var(--gold);border-color:var(--gold-2)}.hole.advanced{border-color:var(--water)}.empty{padding:var(--space-5);text-align:center;color:var(--muted);border:1px dashed var(--border);border-radius:var(--r-8)}.screen{position:absolute;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;padding:var(--space-4);background:radial-gradient(circle at 50% 35%,rgba(217,164,65,.12),var(--bg-0) 65%)}.screen-card{width:min(460px,100%);background:var(--panel-solid);border:1px solid var(--border-strong);border-radius:var(--r-12);padding:var(--space-5);box-shadow:0 20px 60px #0009,var(--glow-gold)}.screen-title{font-family:var(--font-title);font-size:var(--fs-32);letter-spacing:6px;color:var(--gold-2);text-align:center;margin:0 0 var(--space-2);text-shadow:var(--glow-gold)}.screen-sub{text-align:center;color:var(--muted);margin:0 0 var(--space-4);font-size:var(--fs-12);letter-spacing:2px}.spinner{width:28px;height:28px;border-radius:50%;border:3px solid rgba(217,164,65,.25);border-top-color:var(--gold);animation:spin .9s linear infinite;margin:0 auto var(--space-3)}@keyframes spin{to{transform:rotate(360deg)}}.field{display:flex;flex-direction:column;gap:var(--space-2);margin-bottom:var(--space-4)}.field input{min-height:var(--touch-min);padding:8px 12px;border-radius:var(--r-8);border:1px solid var(--border);background:#00000059;color:var(--text);outline:none}.field input:focus{border-color:var(--border-strong);box-shadow:var(--glow-gold)}.field-error{color:var(--danger);font-size:var(--fs-12)}.toasts{position:absolute;left:50%;top:calc(72px + var(--safe-t));transform:translate(-50%);display:flex;flex-direction:column;gap:var(--space-2);z-index:60;pointer-events:none;width:min(92vw,420px)}.toast{background:var(--panel-solid);border:1px solid var(--border);border-left:3px solid var(--gold);border-radius:var(--r-8);padding:8px 12px;font-size:var(--fs-12);animation:toast-in var(--dur-2) var(--ease);box-shadow:0 6px 20px #00000073}.toast.good{border-left-color:var(--success)}.toast.warn{border-left-color:var(--xp)}.toast.error{border-left-color:var(--danger)}@keyframes toast-in{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}.tutorial{position:absolute;left:50%;bottom:calc(96px + var(--safe-b));transform:translate(-50%);width:min(92vw,380px);background:var(--panel-solid);border:1px solid var(--border-strong);border-radius:var(--r-12);padding:var(--space-4);z-index:50;box-shadow:0 12px 40px #0009,var(--glow-gold)}.tutorial-step{color:var(--gold);font-size:var(--fs-12);letter-spacing:1px}.tutorial-text{margin:var(--space-2) 0 var(--space-3);font-size:var(--fs-16)}.switch{width:52px;height:30px;border-radius:999px;border:1px solid var(--border);background:#0006;position:relative;cursor:pointer;transition:background var(--dur-2);flex:none}.switch:after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:var(--muted);transition:transform var(--dur-2) var(--ease),background var(--dur-2)}.switch[aria-checked=true]{background:#d9a44159;border-color:var(--border-strong)}.switch[aria-checked=true]:after{transform:translate(22px);background:var(--gold-2)}.seg{display:inline-flex;border:1px solid var(--border);border-radius:var(--r-8);overflow:hidden}.seg button{min-height:36px;padding:4px 12px;border:0;background:transparent;color:var(--muted);cursor:pointer}.seg button.active{background:#d9a4412e;color:var(--gold-2)}.modal-scrim{position:absolute;inset:0;background:var(--scrim);z-index:70;display:flex;align-items:center;justify-content:center;padding:var(--space-4)}.modal{width:min(420px,100%);background:var(--panel-solid);border:1px solid var(--border-strong);border-radius:var(--r-12);padding:var(--space-5);box-shadow:0 20px 60px #000000a6}.modal h3{margin:0 0 var(--space-2);color:var(--gold-2);font-family:var(--font-title);letter-spacing:1px}.offline-badge,.update-bar{position:absolute;left:50%;transform:translate(-50%);z-index:55;padding:4px 14px;border-radius:999px;font-size:var(--fs-12);pointer-events:auto}.offline-badge{top:calc(8px + var(--safe-t));background:var(--danger);color:#fff}.update-bar{bottom:calc(72px + var(--safe-b));background:var(--panel-solid);border:1px solid var(--border-strong);display:flex;gap:var(--space-2);align-items:center}@media(max-width:640px){.panel-overlay{padding:calc(52px + var(--safe-t)) 0 0;align-items:flex-end}.panel{width:100%;max-height:calc(100dvh - 52px - var(--safe-t));border-radius:var(--r-12) var(--r-12) 0 0;padding-bottom:var(--safe-b);animation:drawer-in var(--dur-3) var(--ease)}.app[data-panel-open=true] .hud-bottom{opacity:0;pointer-events:none}.hud-bottom{transition:opacity var(--dur-2) var(--ease)}@keyframes drawer-in{0%{transform:translateY(40px);opacity:.5}to{transform:none;opacity:1}}.hud-left{min-width:0}.hud-xp{width:132px}.grid-7{grid-template-columns:repeat(4,minmax(0,1fr))}.hud-bottom{gap:4px}.hud-btn{min-width:52px;padding:4px 6px;font-size:11px}}@media(min-width:1440px){:root{--panel-w: 560px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}