:root{--green:#00c805;--green-deep:#0a3d1e;--ink:#eafbe7;--ink-dim:#a9c9b0;--card:#0a1c12d1;--card-border:#00c80538;--shadow:0 10px 30px #00140859;--radius:16px;--font:"Fredoka", "Segoe UI", system-ui, sans-serif}*{box-sizing:border-box}html,body{height:100%;font-family:var(--font);color:var(--ink);background:#7cc1ea;margin:0;overflow:hidden}#app{position:fixed;inset:0}#app canvas{touch-action:none;width:100%;height:100%;display:block}#ui{pointer-events:none;position:fixed;inset:0}#ui>*{pointer-events:none}#brand{align-items:center;gap:10px;display:flex;position:absolute;top:18px;left:20px}#brand .title{letter-spacing:.5px;color:#fff;text-shadow:0 2px #003c1459,0 4px 16px #00000040;font-size:26px;font-weight:700;line-height:1}#brand .region{color:#e9ffe9;opacity:.9;text-shadow:0 1px 4px #00000059;margin-top:3px;font-size:14px;font-weight:500}.card{background:var(--card);border:1px solid var(--card-border);border-radius:var(--radius);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.card-title{letter-spacing:1.2px;text-transform:uppercase;color:var(--green);font-size:15px;font-weight:700}.sub{color:var(--ink-dim);margin-top:2px;font-size:13px}#portfolio{box-sizing:border-box;width:236px;box-shadow:var(--shadow);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#06140ce0;border:1px solid #ffffff1a;border-radius:14px;padding:14px 16px;position:absolute;top:18px;right:20px}.pf-head{flex-direction:column;gap:4px;margin-bottom:4px;display:flex}.pf-acct{color:var(--ink-dim);align-items:center;gap:7px;min-height:16px;font-size:12.5px;display:flex}.pf-acct:before{content:"";background:#8a8f8c;border-radius:50%;flex:none;width:8px;height:8px}#portfolio[data-state=wallet] .pf-acct:before{background:var(--green);box-shadow:0 0 8px #00c805b3}#portfolio[data-state=guest] .pf-acct:before{background:#ffb347}#portfolio[data-state=connecting] .pf-acct:before{background:#7cc1ea}.certs{flex-direction:column;display:flex}.cert{border-top:1px solid #ffffff14;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:9px 0;display:grid}.cert .tick{--c:var(--green);letter-spacing:.4px;color:var(--c);background:color-mix(in srgb, var(--c) 16%, transparent);border:1px solid color-mix(in srgb, var(--c) 40%, transparent);border-radius:6px;padding:3px 7px;font-size:12px;font-weight:700}.cert .nm{color:var(--ink-dim);font-size:13px}.cert .n{color:#fff;font-variant-numeric:tabular-nums;font-size:17px;font-weight:700}.cert.empty .n{color:#ffffff4d}.pf-total{color:var(--ink-dim);border-top:1px solid #ffffff24;justify-content:space-between;align-items:center;padding-top:10px;font-size:13px;display:flex}.pf-total b{color:#fff;font-size:16px}#withdraw{pointer-events:auto;border-radius:8px;width:100%;margin-top:12px;padding:10px;font-size:13.5px;display:block}.hint{color:#fff;text-shadow:0 1px 4px #00000073;flex-wrap:wrap;gap:6px 14px;font-size:13px;transition:opacity 1s;display:flex;position:absolute;bottom:20px;left:20px}.hint b{background:#ffffff2e;border:1px solid #ffffff59;border-radius:6px;padding:1px 6px;font-weight:600}.hint.faded{opacity:0}#inventory{background:var(--card);border:1px solid var(--card-border);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:18px;gap:8px;padding:8px;display:flex;position:absolute;bottom:20px;left:50%;transform:translate(-50%)}.slot{background:#ffffff0f;border:1px solid #ffffff14;border-radius:12px;justify-content:center;align-items:center;width:58px;height:58px;transition:transform .15s,background .2s;display:flex;position:relative}.slot.empty{opacity:.38}.slot.bump{background:#00c80538;transform:scale(1.14)}.slot svg{width:36px;height:36px}.slot .count{color:#fff;text-shadow:0 1px 2px #000;font-size:13px;font-weight:700;position:absolute;bottom:3px;right:5px}.slot .label{white-space:nowrap;opacity:0;background:#000000b3;border-radius:8px;padding:3px 8px;font-size:12px;transition:opacity .15s;position:absolute;top:-30px;left:50%;transform:translate(-50%)}.slot:hover .label{opacity:1}#inventory{pointer-events:auto}#prompt-wrap{flex-direction:column;align-items:center;gap:8px;display:flex;position:absolute;bottom:108px;left:50%;transform:translate(-50%)}#prompt{background:var(--card);border:1px solid var(--card-border);box-shadow:var(--shadow);opacity:0;border-radius:999px;align-items:center;gap:10px;padding:9px 16px 9px 10px;font-size:16px;font-weight:500;transition:opacity .15s,transform .15s;display:flex;transform:translateY(6px)}#prompt.show{opacity:1;transform:translateY(0)}#prompt kbd{font-family:var(--font);background:var(--green);color:#05230f;border-radius:999px;padding:3px 9px;font-size:14px;font-weight:700}#progress{opacity:0;background:#00000073;border:1px solid #ffffff26;border-radius:6px;width:180px;height:8px;transition:opacity .15s;overflow:hidden}#progress.show{opacity:1}#progress-fill{background:linear-gradient(90deg,#00c805,#7dff8a);border-radius:6px;width:0%;height:100%;transition:width .12s}#toasts{flex-direction:column;align-items:center;gap:6px;display:flex;position:absolute;top:20px;left:50%;transform:translate(-50%)}.toast{background:var(--card);border:1px solid var(--card-border);box-shadow:var(--shadow);border-radius:999px;padding:8px 16px;font-size:14px;animation:.25s ease-out toast-in}.toast.good{border-color:#00c80599}.toast.bad{border-color:#ff5a5a99}.toast.out{animation:.3s forwards toast-out}@keyframes toast-in{0%{opacity:0;transform:translateY(-8px)scale(.96)}to{opacity:1;transform:none}}@keyframes toast-out{to{opacity:0;transform:translateY(-8px)}}#floaters{position:absolute;inset:0;overflow:hidden}.floater{color:#fff;text-shadow:0 2px #003c1480,0 3px 10px #0006;white-space:nowrap;align-items:center;gap:5px;font-size:18px;font-weight:700;animation:1.1s ease-out forwards float-up;display:flex;position:absolute;transform:translate(-50%,-50%)}.floater svg{width:22px;height:22px}@keyframes float-up{0%{opacity:0;margin-top:10px}15%{opacity:1}to{opacity:0;margin-top:-60px}}#banner{color:#fff;letter-spacing:2px;text-shadow:0 3px #003c1480,0 8px 30px #00000059;opacity:0;pointer-events:none;font-size:44px;font-weight:700;position:absolute;top:26%;left:50%;transform:translate(-50%)}#banner.show{animation:2.6s ease-out forwards banner}#banner small{text-align:center;letter-spacing:4px;color:#c9ffd0;font-size:16px;font-weight:500;display:block}@keyframes banner{0%{opacity:0;transform:translate(-50%)translateY(10px)}15%{opacity:1;transform:translate(-50%)translateY(0)}80%{opacity:1}to{opacity:0}}#panel{pointer-events:auto;width:min(520px,100vw - 40px);padding:18px 20px 16px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}#panel[hidden]{display:none}.panel-head{justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:12px;display:flex}.row{background:#ffffff0d;border-radius:12px;align-items:center;gap:12px;margin-bottom:8px;padding:10px 12px;display:flex}.row .icon svg{width:34px;height:34px;display:block}.row .info{flex:1;min-width:0}.row .name{font-size:16px;font-weight:600}.row .needs{color:var(--ink-dim);flex-wrap:wrap;gap:10px;margin-top:3px;font-size:13px;display:flex}.row .needs span.ok{color:#9dffa8}.row .needs span.no{color:#ff9c9c}.row .needs svg{vertical-align:-2px;width:14px;height:14px;margin-right:2px}.btn{font-family:var(--font);background:var(--green);color:#05230f;cursor:pointer;border:none;border-radius:10px;padding:8px 16px;font-size:14px;font-weight:700;transition:transform .1s,filter .15s}.btn:hover{filter:brightness(1.08);transform:translateY(-1px)}.btn:disabled{color:#ffffff73;cursor:not-allowed;filter:none;background:#ffffff1f;transform:none}.btn.ghost{color:#fff;background:#ffffff1a}.queue{background:#00c80514;border:1px dashed #00c80559;border-radius:12px;margin-top:8px;padding:10px 12px;font-size:13px}.queue .bar{background:#0006;border-radius:4px;height:6px;margin-top:6px;overflow:hidden}.queue .bar div{background:var(--green);height:100%;transition:width .2s linear}.quote{color:var(--ink-dim);margin-bottom:10px;font-size:13px;font-style:italic}#fade{opacity:0;background:#020604;transition:opacity .35s;position:absolute;inset:0}#fade.on{opacity:1}#bottom{align-items:flex-end;gap:10px;display:flex;position:absolute;bottom:20px;left:50%;transform:translate(-50%)}#inventory{position:static;transform:none}#hotbar{background:var(--card);border:1px solid var(--card-border);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);pointer-events:auto;border-radius:18px;gap:8px;padding:8px;display:flex}.hot{cursor:pointer;background:#ffffff0f;border:2px solid #ffffff1a;border-radius:12px;justify-content:center;align-items:center;width:58px;height:58px;transition:transform .12s,border-color .15s,background .15s;display:flex;position:relative}.hot:hover{transform:translateY(-2px)}.hot.active{border-color:var(--green);background:#00c8052e;box-shadow:0 0 0 3px #00c8052e}.hot svg{width:36px;height:36px}.hot .key{color:#cfead4;background:#00000073;border-radius:5px;padding:0 5px;font-size:11px;font-weight:700;position:absolute;top:3px;left:5px}.hot .label{white-space:nowrap;opacity:0;pointer-events:none;background:#000000b3;border-radius:8px;padding:3px 8px;font-size:12px;transition:opacity .15s;position:absolute;top:-30px;left:50%;transform:translate(-50%)}.hot:hover .label{opacity:1}#app canvas.pick{cursor:pointer}#chat{pointer-events:auto;flex-direction:column;gap:6px;width:min(340px,34vw);display:flex;position:absolute;bottom:100px;left:20px}#chat-log{flex-direction:column;justify-content:flex-end;gap:3px;max-height:160px;display:flex;overflow:hidden}.msg{color:#fff;text-shadow:0 1px 3px #0009;word-break:break-word;background:#06140c8c;border-radius:9px;align-self:flex-start;max-width:100%;padding:4px 9px;font-size:13px;line-height:1.3;transition:opacity 1s;animation:.2s ease-out toast-in}.msg.faded{opacity:.25}.msg .who{color:#9ff5b8;margin-right:5px;font-weight:700}.msg.system{color:#cfead4;font-style:italic}.msg.system .who{color:var(--green)}#chat-form{display:flex}#chat-input{font-family:var(--font);color:#fff;opacity:.6;background:#06140c99;border:1px solid #ffffff26;border-radius:999px;outline:none;width:100%;padding:8px 12px;font-size:14px;transition:opacity .15s,border-color .15s}#chat-input:focus{opacity:1;border-color:var(--green);background:#06140cd9}#chat-input::placeholder{color:#a9c9b0}#controls{justify-content:flex-end;max-width:300px;bottom:58px;left:auto;right:20px}#ui.pre #brand,#ui.pre #portfolio,#ui.pre #bottom,#ui.pre #chat,#ui.pre #controls,#ui.pre #prompt-wrap,#ui.pre #social{display:none}#start{box-sizing:border-box;pointer-events:auto;background:linear-gradient(90deg,#020c07d6 0%,#020c0794 38%,#020c0729 72%,#020c070d 100%);grid-template-rows:auto 1fr auto;padding:22px 36px;transition:opacity .5s;animation:.6s both s-in;display:grid;position:absolute;inset:0;overflow:auto}#start:after{content:"";pointer-events:none;background:linear-gradient(#020c0700,#020c07bf);height:40%;position:absolute;bottom:0;left:0;right:0}#start>*{z-index:1;position:relative}#start.hide{opacity:0;pointer-events:none;animation:none}@keyframes s-in{0%{opacity:0}to{opacity:1}}.s-top{justify-content:space-between;align-items:center;display:flex}.s-brand{color:#fff;align-items:center;gap:10px;font-size:20px;font-weight:700;display:flex}.avatar{object-fit:cover;background:#0b3a1c;border-radius:50%;box-shadow:0 0 0 2px #fff}.s-brand .avatar{width:36px;height:36px}.s-links{align-items:center;gap:22px;font-size:14px;font-weight:600;display:flex}.s-links a{color:#fff;align-items:center;gap:7px;text-decoration:none;display:inline-flex}.s-links a:hover{color:var(--green)}.s-links svg{fill:currentColor;width:14px;height:14px}.s-tok{color:var(--green);font-weight:700}.s-hero{align-self:center;max-width:600px;padding:10px 0}.s-avatar{object-fit:cover;background:#0b3a1c;border-radius:50%;width:112px;height:112px;margin-bottom:14px;display:block;box-shadow:0 0 0 3px #fff,0 12px 30px #00000073}.s-hero h1{letter-spacing:-2px;color:#fff;text-shadow:0 4px #002d0f8c,0 14px 30px #0006;margin:0;font-size:clamp(64px,9vw,104px);font-weight:700;line-height:.95}.s-tagline{color:#e8f7ea;max-width:520px;margin:14px 0 22px;font-size:19px;font-weight:500;line-height:1.4}.s-play{flex-wrap:wrap;gap:10px;display:flex}#start-name{box-sizing:border-box;width:200px;font-family:var(--font);color:#fff;background:#0000006b;border:1px solid #ffffff38;border-radius:8px;outline:none;padding:12px 14px;font-size:16px;font-weight:500}#start-name::placeholder{color:#9db8a4}#start-name:focus{border-color:var(--green)}.s-play .btn{white-space:nowrap;border-radius:8px;align-items:center;gap:8px;padding:12px 22px;font-size:16px;display:inline-flex}.s-play .btn svg{width:18px;height:18px}.s-play .btn.ghost{color:#0a2a15;background:#fff}.s-play .btn.ghost:hover{background:#e9f7ec}.start-note{color:#ffd27a;min-height:18px;margin-top:10px;font-size:13px}.s-hint{color:#b9d6c0;margin-top:6px;font-size:13px}.s-bottom{flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:20px;display:flex}.s-steps{gap:28px;display:flex}.s-step{--c:var(--green);color:#fff;align-items:center;gap:9px;font-size:15px;font-weight:600;display:flex;position:relative}.s-step .ico svg{width:26px;height:26px;display:block}.s-step .detail{color:#dff5e2;opacity:0;pointer-events:none;background:#041009f5;border:1px solid #ffffff1f;border-radius:6px;width:220px;padding:8px 10px;font-size:12.5px;font-weight:500;line-height:1.35;transition:opacity .15s;position:absolute;bottom:calc(100% + 10px);left:0}.s-step:hover .detail{opacity:1}.s-foot{color:#b9d6c0;text-align:right;font-size:12px;line-height:1.6}.s-foot a{color:#fff;align-items:center;gap:5px;font-weight:600;text-decoration:none;display:inline-flex}.s-foot a svg{fill:currentColor;width:12px;height:12px}.s-foot a:hover{color:var(--green)}.s-foot .tok,#social .tok{color:var(--green);font-weight:700}@media (max-width:700px){#start{background:linear-gradient(#020c0799,#020c07d1);padding:16px 20px}.s-hero{text-align:center;margin:0 auto}.s-avatar{margin:0 auto 12px}.s-hero h1{font-size:64px}.s-tagline{margin:10px auto 16px;font-size:16px}.s-play{justify-content:center}#start-name{width:100%}.s-play .btn{flex:auto;justify-content:center}.s-bottom{flex-direction:column;align-items:center}.s-steps{gap:18px}.s-foot{text-align:center}.s-brand span{display:none}}@media (max-height:560px){.s-avatar{width:72px;height:72px;margin-bottom:8px}.s-hero h1{font-size:60px}.s-tagline{margin:8px 0 12px;font-size:15px}.s-hero{padding:0}}#social{color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);pointer-events:auto;opacity:.85;background:#06140c8c;border:1px solid #ffffff24;border-radius:999px;align-items:center;gap:7px;padding:6px 12px;font-size:12.5px;font-weight:600;text-decoration:none;transition:opacity .15s,border-color .15s;display:inline-flex;position:absolute;bottom:20px;right:20px}#social:hover{opacity:1;border-color:var(--green)}#social svg{fill:currentColor;width:12px;height:12px}#brand .avatar{width:40px;height:40px;box-shadow:0 0 0 2px #fff,0 4px 12px #00000059}.btn.small{padding:7px 12px;font-size:12.5px}.wlist{flex-direction:column;gap:6px;margin-bottom:12px;display:flex}.wrow{background:#ffffff0d;border-radius:12px;align-items:center;gap:10px;padding:8px 12px;font-size:14px;display:flex}.wrow.empty{opacity:.5}.wrow span{flex:1}.wrow b{color:var(--green);font-size:15px}.dialog{color:#fff;border-left:3px solid var(--green);background:#ffffff0d;border-radius:12px;padding:12px 14px;font-size:16px;line-height:1.45}.actions{justify-content:flex-end;gap:8px;margin-top:12px;display:flex}#account{min-height:16px}.msg.me .who{color:#ffe08a}
