: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{--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-back{font:inherit;color:var(--text-dim);background:transparent;border:0;cursor:pointer}.hud-back:hover{color:var(--gold)}