:root{--fr-panel-bg: rgba(8, 11, 20, .72);--fr-gold: #c99a3f;--fr-gold-dim: #8a6a2f;--fr-ink: #f5e6c8;--fr-ink-dim: #9aa7c7;--fr-danger: #e0796b}.fr-scene{position:fixed;top:0;right:0;bottom:0;left:0;background:url(/bg-login.png) center/cover no-repeat,var(--navy-0);isolation:isolate}.fr-scene:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:#0a0e1a;opacity:.55;z-index:0}.fr-card-wrap{position:relative;z-index:1;height:100%;display:flex;align-items:center;justify-content:center;padding:12px}#fr-root{box-sizing:border-box;display:flex;flex-direction:column;align-items:stretch;width:min(92vw,480px);max-height:94vh;font-family:Noto Sans Thai,Sarabun,system-ui,sans-serif;color:var(--fr-ink);background:transparent;padding:14px 20px}@media(min-width:900px){#fr-root{width:min(92vw,900px)}}#fr-header{flex:0 0 auto;text-align:center}#fr-title{margin:0;font-size:27px;letter-spacing:.3px;color:var(--fr-ink);text-shadow:0 2px 10px rgba(0,0,0,.7)}#fr-sub{margin:5px 0 0;font-size:14px;color:var(--fr-ink-dim);text-shadow:0 1px 6px rgba(0,0,0,.6)}#fr-badge{display:inline-flex;align-items:center;margin:10px 0 0;padding:5px 16px;border-radius:999px;border:1px solid rgba(224,180,90,.45);background:#e0b45a14;color:var(--gold-bright);font-size:12.5px;letter-spacing:.4px;box-shadow:0 0 18px #e0b45a57;text-shadow:0 1px 4px rgba(0,0,0,.7)}.fr-orn{margin:12px auto;width:100%;display:flex;justify-content:center;align-items:center;line-height:0}.fr-orn svg{width:100%;height:auto;display:block}.fr-orn-star{max-width:560px}.fr-orn-diamond{max-width:340px;margin:10px auto}#fr-scroll{flex:1 1 auto;min-height:80px;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding-right:6px;scrollbar-width:thin;scrollbar-color:var(--fr-gold) var(--fr-panel-bg)}#fr-scroll::-webkit-scrollbar,#fr-story::-webkit-scrollbar{width:9px}#fr-scroll::-webkit-scrollbar-track,#fr-story::-webkit-scrollbar-track{background:var(--fr-panel-bg);border-radius:6px}#fr-scroll::-webkit-scrollbar-thumb,#fr-story::-webkit-scrollbar-thumb{border-radius:6px;border:1px solid rgba(224,180,90,.35);background:linear-gradient(180deg,var(--fr-gold-dim) 0%,var(--gold-bright) 50%,var(--fr-gold-dim) 100%);box-shadow:0 0 18px #e0b45a57}#fr-scroll::-webkit-scrollbar-thumb:hover,#fr-story::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,var(--fr-gold) 0%,var(--gold-bright) 50%,var(--fr-gold) 100%)}#fr-grid{display:grid;grid-template-columns:1fr;column-gap:28px;background:var(--fr-panel-bg);border:1px solid rgba(224,180,90,.18);border-radius:10px;padding:6px 16px;box-shadow:0 18px 54px #0000009e,inset 0 0 0 1px #0000004d,inset 0 3px 22px #00000080}@media(min-width:900px){#fr-grid{grid-template-columns:1fr 1fr}}.fr-cell{display:grid;grid-template-columns:minmax(74px,42%) 1fr;align-items:baseline;padding:8px 6px;border-bottom:1px solid rgba(224,180,90,.16);opacity:0;transform:translateY(7px);transition:opacity .5s ease,transform .5s ease}#fr-root.fr-on .fr-cell{opacity:1;transform:none}.fr-cell:nth-child(2n){background:#e0b45a09}.fr-label{padding-right:12px;border-right:1px solid rgba(224,180,90,.18);color:var(--fr-ink-dim);font-size:15px;text-shadow:0 1px 5px rgba(0,0,0,.7)}.fr-value{padding-left:12px;text-align:right;font-size:16px;word-break:break-word;text-shadow:0 1px 5px rgba(0,0,0,.75)}.fr-tier{display:inline-flex;align-items:center;justify-content:center;margin-left:6px;padding:1px 7px;border-radius:999px;font-size:11.5px;font-weight:600;letter-spacing:.3px;border:1px solid rgba(224,180,90,.4);vertical-align:middle}.fr-tier-N{background:#aab0bd24;color:#aab0bd}.fr-tier-R{background:#5fbf8529;color:#7fce9e}.fr-tier-SR{background:#5cb9cf29;color:#79c7dd}.fr-tier-SSR{background:#f0c46a2e;color:var(--gold-bright)}.fr-tier-UR{background:#b48be029;color:#c19fe6}#fr-story{margin:12px auto 22px;max-width:560px;text-align:center;font-style:italic;color:#d7c9a5;font-size:16px;line-height:1.75;text-shadow:0 1px 6px rgba(0,0,0,.75);background:#06091066;border:1px solid rgba(224,180,90,.12);border-radius:10px;padding:16px 22px;opacity:0;transform:translateY(7px);transition:opacity .7s ease,transform .7s ease}#fr-root.fr-on #fr-story{opacity:1;transform:none}.fr-para{margin:0 0 10px;white-space:pre-line;line-height:1.7}.fr-para:last-child{margin-bottom:0}#fr-disc{margin:16px auto 2px;max-width:560px;text-align:center;color:#7c869e;font-size:11.5px;line-height:1.5;opacity:0;transition:opacity .6s ease}#fr-root.fr-on #fr-disc{opacity:1}#fr-footer{flex:0 0 auto;display:flex;justify-content:center;padding-top:14px}#fr-continue{position:relative;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;border:0;cursor:pointer;isolation:isolate;min-width:300px;padding:18px 66px 20px;font-family:Noto Sans Thai,Sarabun,system-ui,sans-serif;color:#f6e2ab;font-size:20px;font-weight:500;letter-spacing:.5px;background:radial-gradient(ellipse at center,#b5862859,#724e1480 45%,#2d1f0cf2);clip-path:polygon(8% 0,92% 0,100% 50%,92% 100%,8% 100%,0 50%);filter:drop-shadow(0 4px 5px rgba(0,0,0,.8)) drop-shadow(0 0 7px rgba(193,145,43,.18));transition:transform .18s ease,filter .18s ease}#fr-continue:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:-2;background:linear-gradient(180deg,#d1a54d,#7b541b 28%,#4b320e 65%,#c5953b);clip-path:inherit}#fr-continue:after{content:"";position:absolute;top:3px;right:3px;bottom:3px;left:3px;z-index:-1;background:linear-gradient(90deg,#2a1d0cf5,#805b1be6 50%,#2a1d0cf5);clip-path:polygon(8% 0,92% 0,100% 50%,92% 100%,8% 100%,0 50%);box-shadow:inset 0 1px #ffe29740,inset 0 -2px 4px #000000b3}#fr-continue .fr-cta-lbl{position:relative;z-index:5;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-shadow:0 1px 1px rgba(0,0,0,.9),0 0 6px rgba(240,197,95,.18)}#fr-continue .gbtn-shine{position:absolute;top:3px;right:12%;bottom:3px;left:12%;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(255,235,171,.13),transparent 38%);clip-path:polygon(5% 0,95% 0,100% 50%,95% 100%,5% 100%,0 50%)}#fr-continue .gbtn-orn{position:absolute;top:50%;z-index:10;width:24px;height:24px;pointer-events:none;transform:translateY(-50%) rotate(45deg);border:1px solid #a87827;background:#171006;box-shadow:inset 0 0 0 2px #24180a,0 0 5px #dca8394d}#fr-continue .gbtn-orn:before,#fr-continue .gbtn-orn:after{content:"";position:absolute;background:#bf9037}#fr-continue .gbtn-orn:before{left:50%;top:-6px;width:1px;height:36px;transform:translate(-50%)}#fr-continue .gbtn-orn:after{top:50%;left:-6px;width:36px;height:1px;transform:translateY(-50%)}#fr-continue .gbtn-orn-l{left:-10.1px}#fr-continue .gbtn-orn-r{right:-10.1px}#fr-continue .gbtn-gem{position:absolute;top:7px;right:7px;bottom:7px;left:7px;border:1px solid #e5bd60;background:radial-gradient(circle at 35% 30%,#f4d881,#8e611d 55%,#241505);box-shadow:0 0 5px #e7b43ecc}#fr-continue:hover:not(:disabled){transform:translateY(-2px) scale(1.015);filter:drop-shadow(0 7px 7px rgba(0,0,0,.85)) drop-shadow(0 0 11px rgba(219,164,54,.42))}#fr-continue:hover:not(:disabled):after{background:linear-gradient(90deg,#37240bfa,#9e6f1ef5 50%,#37240bfa)}#fr-continue:active:not(:disabled){transform:translateY(1px) scale(.99)}#fr-continue:disabled{filter:grayscale(.4) brightness(.7);cursor:default}@keyframes fr-cta-pulse{0%,to{filter:drop-shadow(0 4px 5px rgba(0,0,0,.8)) drop-shadow(0 0 8px rgba(193,145,43,.24))}50%{filter:drop-shadow(0 4px 7px rgba(0,0,0,.85)) drop-shadow(0 0 21px rgba(240,197,95,.62))}}#fr-continue:not(:hover){animation:fr-cta-pulse 3.1s ease-in-out infinite}:root{--hud-gold: #c9a05a;--hud-gold-b: #e0c070;--hud-gold-dim: #7a5e2a;--hud-navy: rgba(5, 8, 20, .9);--hud-navy-mid: rgba(10, 14, 32, .82);--hud-text: #dce8f8;--hud-text-dim: #8090b0;--hud-hp: #d43030;--hud-mp: #2060d8;--hud-fs: 11px;--hud-gap: 6px;--hud-panel-r: 4px;--hud-pad: 8px}.hud-overlay{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:10;font-family:Noto Sans Thai,Sarabun,system-ui,sans-serif;font-size:var(--hud-fs);color:var(--hud-text);-webkit-user-select:none;user-select:none}.hud-panel{pointer-events:auto;background:var(--hud-navy);border:1px solid var(--hud-gold-dim);border-radius:var(--hud-panel-r);box-shadow:inset 0 0 0 1px #c9a05a1a,0 2px 16px #000000a6,0 0 0 .5px #000c;clip-path:polygon(8px 0%,calc(100% - 8px) 0%,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0% calc(100% - 8px),0% 8px);position:relative}.hud-panel:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border:1px solid transparent;border-image:linear-gradient(135deg,var(--hud-gold) 0%,var(--hud-gold) 12px,transparent 12px,transparent calc(100% - 12px),var(--hud-gold) calc(100% - 12px),var(--hud-gold) 100%) 1;border-radius:inherit;pointer-events:none;opacity:.55}.hud-top-bar{position:absolute;top:0;left:0;right:0;display:flex;align-items:flex-start;gap:var(--hud-gap);padding:var(--hud-gap);pointer-events:none}.hud-player-card{display:flex;gap:7px;padding:8px;min-width:220px;max-width:240px;flex-shrink:0}.hud-pc-avatar{position:relative;width:52px;height:52px;flex-shrink:0;border:1px solid var(--hud-gold-dim);border-radius:3px;overflow:hidden;background:#0a0e20e6}.hud-pc-avatar img{width:100%;height:100%;object-fit:cover;object-position:top center}.hud-pc-avatar-fallback{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-size:22px;color:var(--hud-gold-dim)}.hud-pc-info{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0}.hud-pc-name-row{display:flex;align-items:baseline;gap:5px}.hud-pc-level{color:var(--hud-gold-b);font-weight:700;font-size:11px;letter-spacing:.04em}.hud-pc-name{color:#f0e8d8;font-weight:700;font-size:12px;letter-spacing:.03em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hud-pc-guild{color:var(--hud-gold);font-size:10px;letter-spacing:.06em;opacity:.85}.hud-bar{position:relative;height:10px;border-radius:2px;background:#0000008c;border:1px solid rgba(255,255,255,.06);overflow:hidden;margin-top:1px}.hud-bar-fill{height:100%;border-radius:2px;transition:width .4s ease}.hud-bar-hp .hud-bar-fill{background:linear-gradient(90deg,#9b1c1c,var(--hud-hp),#f06060);box-shadow:0 0 6px #d4303080}.hud-bar-mp .hud-bar-fill{background:linear-gradient(90deg,#0e2a7a,var(--hud-mp),#5090e8);box-shadow:0 0 6px #2060d880}.hud-bar-label{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-size:8px;color:#ffffffe6;letter-spacing:.04em;text-shadow:0 1px 3px #000;pointer-events:none}.hud-pc-meta-row{display:flex;justify-content:space-between;align-items:center;margin-top:2px}.hud-pc-cp{font-size:9px;color:#a0b4d0;letter-spacing:.02em}.hud-pc-element{font-size:10px;font-weight:700;letter-spacing:.04em}.hud-pc-class{font-size:9px;color:var(--hud-text-dim);letter-spacing:.04em}.hud-top-center{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding-top:2px;pointer-events:none}.hud-currency-row{display:flex;gap:5px;pointer-events:auto}.hud-currency-pill{display:flex;align-items:center;gap:4px;background:var(--hud-navy);border:1px solid var(--hud-gold-dim);border-radius:20px;padding:3px 8px 3px 6px;box-shadow:0 2px 8px #00000080}.hud-curr-icon{font-size:13px;line-height:1}.hud-curr-val{color:var(--hud-gold-b);font-weight:700;font-size:11px;letter-spacing:.02em}.hud-curr-plus{background:none;border:none;color:var(--hud-gold);font-size:13px;cursor:pointer;padding:0 0 0 2px;line-height:1;opacity:.7;transition:opacity .15s}.hud-curr-plus:hover{opacity:1}.hud-world-boss-banner{display:flex;align-items:center;gap:6px;background:linear-gradient(90deg,#64141400,#781e0ad1 20%,#781e0ad1 80%,#64141400);border-top:1px solid rgba(220,80,30,.4);border-bottom:1px solid rgba(220,80,30,.4);padding:4px 16px;font-size:10px;color:#ffd0a0;letter-spacing:.04em;pointer-events:auto}.hud-wb-star{font-size:13px}.hud-top-right{display:flex;flex-direction:column;align-items:flex-end;gap:var(--hud-gap);flex-shrink:0;pointer-events:none}.hud-icon-row{display:flex;gap:4px;pointer-events:auto}.hud-icon-btn{position:relative;width:30px;height:30px;display:flex;align-items:center;justify-content:center;font-size:16px;background:var(--hud-navy);border:1px solid var(--hud-gold-dim);border-radius:3px;cursor:pointer;transition:background .15s,border-color .15s;clip-path:polygon(4px 0%,calc(100% - 4px) 0%,100% 4px,100% calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,0% calc(100% - 4px),0% 4px)}.hud-icon-btn:hover{background:#c9a05a26;border-color:var(--hud-gold)}.hud-badge{position:absolute;top:-4px;right:-4px;background:#c03030;color:#fff;font-size:8px;font-weight:700;border-radius:8px;padding:1px 4px;line-height:1.2;pointer-events:none}.hud-minimap{width:150px;padding:6px;display:flex;flex-direction:column;gap:4px}.hud-minimap-header{display:flex;justify-content:space-between;align-items:center;color:var(--hud-gold);font-size:9px;letter-spacing:.05em}.hud-minimap-zoom{display:flex;gap:2px}.hud-minimap-zoom button{background:none;border:1px solid var(--hud-gold-dim);color:var(--hud-gold);width:14px;height:14px;font-size:11px;cursor:pointer;border-radius:2px;display:flex;align-items:center;justify-content:center;padding:0;line-height:1}.hud-minimap-canvas{position:relative;width:100%;height:110px;background:radial-gradient(ellipse at 50% 60%,#142850b3,#050814e6);border:1px solid rgba(201,160,90,.15);border-radius:2px;overflow:hidden}.hud-mm-dot{position:absolute;width:6px;height:6px;border-radius:50%;transform:translate(-50%,-50%);animation:mmPulse 2s ease-in-out infinite}.hud-mm-dot-player{background:#e0c070;box-shadow:0 0 6px #e0c070;animation-delay:0s}.hud-mm-dot-enemy{background:#e03030;box-shadow:0 0 5px #e03030;animation-delay:.3s}.hud-mm-dot-npc{background:#50d0a0;box-shadow:0 0 5px #50d0a0;animation-delay:.6s}@keyframes mmPulse{0%,to{opacity:.8;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.3)}}.hud-left-col{position:absolute;left:var(--hud-gap);top:82px;display:flex;flex-direction:column;gap:var(--hud-gap);pointer-events:none}.hud-quickmenu{padding:6px 5px;display:flex;flex-direction:column;gap:2px;min-width:100px}.hud-qm-title{color:var(--hud-gold);font-size:9px;letter-spacing:.1em;text-align:center;border-bottom:1px solid var(--hud-gold-dim);padding-bottom:4px;margin-bottom:2px;opacity:.8}.hud-qm-btn{display:flex;align-items:center;justify-content:space-between;gap:4px;padding:3px 6px;background:none;border:none;border-radius:2px;cursor:pointer;width:100%;text-align:left;transition:background .12s;color:var(--hud-text);font:inherit;font-size:10px;letter-spacing:.03em}.hud-qm-btn:hover{background:#c9a05a24;color:var(--hud-gold-b)}.hud-qm-label{flex:1}.hud-qm-key{color:var(--hud-gold-dim);font-size:9px;letter-spacing:.04em;opacity:.8}.hud-skill-hotbar{display:flex;flex-direction:column;gap:3px;padding:6px 5px}.hud-skill-slot{display:flex;align-items:center;gap:5px;padding:1px 2px}.hud-skill-icon{width:34px;height:34px;display:flex;align-items:center;justify-content:center;background:#0a0e28e6;border:1.5px solid;border-radius:3px;clip-path:polygon(4px 0%,calc(100% - 4px) 0%,100% 4px,100% calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,0% calc(100% - 4px),0% 4px);flex-shrink:0;transition:box-shadow .15s}.hud-skill-slot:hover .hud-skill-icon{box-shadow:0 0 8px currentColor}.hud-skill-abbr{font-size:10px;font-weight:700;color:#ffffffd9;letter-spacing:.04em}.hud-skill-key{font-size:9px;color:var(--hud-gold-dim);width:12px;text-align:center}.hud-skill-tier{font-size:9px;font-weight:700;letter-spacing:.06em}.hud-right-col{position:absolute;right:var(--hud-gap);top:174px;display:flex;flex-direction:column;gap:var(--hud-gap);pointer-events:none;width:200px}.hud-quest-panel{padding:6px 8px;display:flex;flex-direction:column;gap:4px}.hud-quest-title{color:var(--hud-gold);font-size:9px;letter-spacing:.1em;border-bottom:1px solid var(--hud-gold-dim);padding-bottom:4px;margin-bottom:2px;opacity:.8}.hud-quest-item{display:flex;align-items:flex-start;gap:5px;font-size:10px;line-height:1.4}.hud-qt-badge{font-size:8px;font-weight:700;letter-spacing:.06em;border-radius:2px;padding:1px 4px;white-space:nowrap;flex-shrink:0;margin-top:1px}.hud-qt-main{background:#c83c00b3;color:#ffd0a0;border:1px solid rgba(220,100,30,.5)}.hud-qt-sub{background:#3250b499;color:#a0c0ff;border:1px solid rgba(80,120,220,.4)}.hud-qt-daily{background:#1e825099;color:#80e0b0;border:1px solid rgba(40,160,100,.4)}.hud-qt-content{flex:1;min-width:0}.hud-qt-name{color:#c8d8f0;font-weight:600;font-size:10px}.hud-qt-task{color:var(--hud-text-dim);font-size:9px;margin-top:1px}.hud-qt-prog{color:var(--hud-gold);font-weight:700}.hud-notif-panel{padding:6px 8px;display:flex;flex-direction:column;gap:4px}.hud-notif-title{color:var(--hud-gold);font-size:9px;letter-spacing:.1em;border-bottom:1px solid var(--hud-gold-dim);padding-bottom:4px;margin-bottom:2px;opacity:.8}.hud-notif-item{font-size:10px;color:var(--hud-text-dim);display:flex;align-items:center;gap:5px;line-height:1.4}.hud-notif-item strong{color:var(--hud-text)}.hud-notif-icon{font-size:11px;flex-shrink:0}.hud-notif-warn{color:#ffd0a0}.hud-notif-warn strong{color:#ffb060}.hud-action-row{position:absolute;bottom:24px;right:20px;display:flex;align-items:center;gap:10px;pointer-events:auto}.hud-action-btn{display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;font-family:inherit;font-weight:700;letter-spacing:.08em;transition:transform .1s,box-shadow .15s}.hud-action-btn:active{transform:scale(.94)}.hud-btn-auto{width:52px;height:52px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#3a3a5a,#14142a);border:2px solid #5060a0;color:#a0b0e0;font-size:11px;box-shadow:0 0 12px #5064c84d,inset 0 1px #ffffff1a}.hud-btn-auto:hover{border-color:#7080c0;box-shadow:0 0 20px #5064c880,inset 0 1px #ffffff1a}.hud-btn-attack{width:66px;height:66px;border-radius:50%;font-size:26px;background:radial-gradient(circle at 40% 35%,#7a1a0a,#3a0c04);border:2px solid #c04020;box-shadow:0 0 18px #c83c1e80,inset 0 1px #ffc89626}.hud-btn-attack:hover{border-color:#e06040;box-shadow:0 0 28px #dc5028b3,inset 0 1px #ffc89633}.hud-modal-backdrop{position:absolute;top:0;right:0;bottom:0;left:0;background:#02040eb8;display:flex;align-items:center;justify-content:center;pointer-events:auto;z-index:20;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.hud-modal{position:relative;min-width:340px;max-width:min(520px,92vw);max-height:80vh;overflow-y:auto;padding:20px;scrollbar-width:thin;scrollbar-color:var(--hud-gold-dim) transparent}.hud-modal::-webkit-scrollbar{width:4px}.hud-modal::-webkit-scrollbar-thumb{background:var(--hud-gold-dim);border-radius:2px}.hud-modal-close{position:absolute;top:8px;right:10px;background:none;border:none;color:var(--hud-text-dim);font-size:16px;cursor:pointer;padding:2px 6px;border-radius:2px;transition:color .15s,background .15s}.hud-modal-close:hover{color:var(--hud-gold-b);background:#c9a05a1f}.hud-modal-stub{display:flex;flex-direction:column;align-items:center;gap:8px;padding:32px 16px;text-align:center}.hud-modal-stub-icon{font-size:36px;opacity:.6}.hud-modal-stub-text{color:var(--hud-gold);font-size:18px;font-weight:700;letter-spacing:.06em}.hud-modal-stub-sub{color:var(--hud-text-dim);font-size:12px}.hud-char-modal{display:flex;flex-direction:column;gap:12px}.hud-char-modal-title{color:var(--hud-gold-b);font-size:15px;font-weight:700;letter-spacing:.06em;border-bottom:1px solid var(--hud-gold-dim);padding-bottom:10px;text-shadow:0 0 16px rgba(201,160,90,.4)}.hud-char-grid{display:grid;grid-template-columns:auto 1fr;gap:5px 12px;align-items:baseline}.hud-char-label{color:var(--hud-text-dim);font-size:10px;letter-spacing:.05em;white-space:nowrap}.hud-char-value{color:var(--hud-text);font-size:11px;font-weight:600;letter-spacing:.02em}.hud-char-skills-title{color:var(--hud-gold);font-size:11px;letter-spacing:.06em;border-top:1px solid var(--hud-gold-dim);padding-top:10px}.hud-char-skills{display:flex;flex-direction:column;gap:5px}.hud-char-skill-row{display:flex;align-items:center;justify-content:space-between;background:#0a0e2099;border:1px solid rgba(201,160,90,.12);border-radius:3px;padding:5px 10px}.hud-char-skill-name{color:var(--hud-text);font-size:11px}.hud-char-skill-tier{font-size:11px;font-weight:700;letter-spacing:.06em}.hud-overlay [data-dragging=true]{position:relative;z-index:200;box-shadow:0 10px 30px #000000bf,0 0 0 1px var(--hud-gold)}:root{--gold: #e0b45a;--gold-bright: #f0c46a;--bronze: #c99a3f;--navy-0: #05070e;--navy-1: #0a1020;--navy-2: #111a30;--text: #e8ecf6;--text-dim: #9fb0cc}*{box-sizing:border-box;margin:0}html,body,#root{height:100%}body{font-family:Noto Sans Thai,Sarabun,system-ui,-apple-system,Segoe UI,sans-serif;color:var(--text);background:var(--navy-0);overflow:hidden}.scene{position:relative;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:url(/bg-login.png) center/cover no-repeat,#05070e;isolation:isolate}.card{position:relative;width:min(92vw,470px);padding:8px 40px 40px;display:flex;flex-direction:column;text-align:center;z-index:1}.card:before{content:"";position:absolute;top:-60px;right:-80px;bottom:-60px;left:-80px;background:radial-gradient(ellipse at center,rgba(2,4,14,.62) 0%,transparent 72%);z-index:-1;pointer-events:none}.title{font-size:clamp(30px,4.4vh,46px);font-weight:700;letter-spacing:.06em;white-space:nowrap;color:#f4f6ff;text-shadow:0 2px 24px rgba(224,180,90,.35),0 1px 2px #000;margin-bottom:10px}.subtitle{color:var(--gold);opacity:.85;font-size:16px;letter-spacing:.03em;margin-bottom:24px;text-shadow:0 1px 8px rgba(0,0,0,.6)}.field{width:100%;padding:15px 18px;margin-bottom:10px;font:inherit;font-size:16px;color:var(--text);background:#050812d9;border:1px solid rgba(224,180,90,.18);border-radius:8px;outline:none;transition:border-color .18s,box-shadow .18s}.field::placeholder{color:#6f80a0}.field:focus{border-color:#e0b45ab3;box-shadow:0 0 0 1px #e0b45a59,0 0 18px #e0b45a2e}.hint{color:var(--text-dim);font-size:13px;text-align:left;margin:2px 2px 18px}.btn-birth{width:100%;padding:15px;font:inherit;font-size:18px;font-weight:700;color:#201503;cursor:pointer;background:linear-gradient(180deg,var(--gold-bright),var(--bronze));border:1px solid rgba(255,230,170,.5);border-radius:8px;letter-spacing:.08em;box-shadow:0 6px 22px #e0b45a52,inset 0 1px #fff6;transition:transform .12s,box-shadow .18s,filter .18s}.btn-birth:hover{filter:brightness(1.06);box-shadow:0 8px 30px #e0b45a73,inset 0 1px #ffffff80}.btn-birth:active{transform:translateY(1px)}.btn-return{width:100%;margin-top:12px;padding:13px;font:inherit;font-size:15px;color:var(--gold);cursor:pointer;background:transparent;border:1px solid transparent;border-radius:8px;transition:background .18s,color .18s}.btn-return:hover{background:#e0b45a14;color:var(--gold-bright)}.birth-group{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin-bottom:12px}.birth-label{font-size:12px;color:#e0b45a99;letter-spacing:.05em}.pill-row{display:flex;gap:8px;width:100%}.pill-btn{flex:1;padding:9px 6px;font:inherit;font-size:13px;letter-spacing:.04em;color:#e0b45ab3;background:transparent;border:1px solid rgba(224,180,90,.22);border-radius:20px;cursor:pointer;transition:border-color .15s,background .15s,color .15s,box-shadow .15s}.pill-btn:hover:not(.pill-active){border-color:#e0b45a73;background:#e0b45a12;color:var(--gold)}.pill-active{background:linear-gradient(180deg,var(--gold-bright),var(--bronze));border-color:#ffe6aa80;color:#201503;font-weight:700;box-shadow:0 2px 10px #e0b45a47}.birth-row{display:flex;gap:10px;margin-bottom:12px}.birth-col{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:5px}.field-date{width:100%;margin-bottom:0;color-scheme:dark}.field-date::-webkit-calendar-picker-indicator{filter:invert(.75) sepia(.6) saturate(3) hue-rotate(5deg);cursor:pointer;opacity:.7}.field-date::-webkit-calendar-picker-indicator:hover{opacity:1}.torch-flames{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block;pointer-events:none;z-index:0}.game-root{position:fixed;top:0;right:0;bottom:0;left:0;background:#05070e}.game-canvas{width:100%;height:100%;display:block;outline:none;touch-action:none}.game-hud-stub{position:absolute;top:16px;left:16px;display:flex;align-items:center;gap:12px;padding:8px 14px;border-radius:10px;background:#0a101eb3;border:1px solid rgba(224,180,90,.3)}.hud-name{color:var(--gold);font-weight:700;letter-spacing:.04em}.hud-element{color:var(--gold);font-size:.82em;opacity:.85;letter-spacing:.06em}.hud-back{font:inherit;color:var(--text-dim);background:transparent;border:0;cursor:pointer}.hud-back:hover{color:var(--gold)}