@import "https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@500;700;900&display=swap";:root{color:#f1e7cc;font-synthesis:none;background:#020303;font-family:Noto Serif TC,Microsoft JhengHei,serif}*{box-sizing:border-box}html,body,#root{min-width:320px;min-height:100%;margin:0}button,input{font:inherit}button{cursor:pointer}.login-screen{isolation:isolate;background:#070909 url(/login-reference.png) 50%/cover no-repeat;min-height:100svh;position:relative;overflow:hidden}.scene-shade{z-index:-1;background:linear-gradient(#0000 70%,#020405bf),radial-gradient(circle,#0000 40%,#00000059);position:absolute;inset:0;box-shadow:inset 0 0 130px 25px #000}.login-panel{width:min(430px,100% - 36px);display:grid;position:absolute;top:68%;left:50%;transform:translate(-50%,-50%)}.login-row{grid-template-columns:112px 1fr;align-items:center;gap:10px;margin-bottom:10px;display:grid}.login-row label{color:#eadba8;text-align:right;text-shadow:0 2px 4px #000,0 0 5px #000;font:italic 20px Georgia,serif}.field{background:#020201e0;border:1px solid #9b7b43;min-height:42px;box-shadow:inset 0 0 14px #000,0 0 0 2px #000c}.field:focus-within{border-color:#e4bc64;box-shadow:inset 0 0 16px #000,0 0 0 2px #000,0 0 18px #d1973038}.field input{color:#fff4d6;background:0 0;border:0;outline:0;width:100%;padding:9px 12px}.login-button{color:#fff1c6;outline-offset:3px;text-shadow:0 1px 2px #000;background:linear-gradient(#73521d,#3e290c 48%,#271a08 52%,#634417);border:1px solid #d4ae5b;outline:1px solid #110c05;min-height:46px;font:italic 19px Georgia,serif;box-shadow:inset 0 0 16px #ffc54e33}.login-actions{grid-template-columns:1fr auto;gap:10px;margin-left:122px;display:grid}.register-button{color:#decda6;background:#0e0c08e0;border:1px solid #816d43;padding:0 16px}.register-button:hover{color:#fff1c6;border-color:#c9a758}.login-button:hover{filter:brightness(1.22)}.login-button:focus-visible{outline-color:#fff0a7}.message-slot{color:#ffb09b;text-align:center;min-height:24px;margin:12px 0 0 122px;font-size:12px}.character-screen{background:radial-gradient(circle at 50% 25%,#263024,#090b0b 55%,#010202);align-content:center;place-items:center;gap:12px;min-height:100svh;padding:18px;display:grid;overflow:hidden}.character-stage{aspect-ratio:4/3;background:#000;border:1px solid #8f7a54;width:min(100%,133.333svh - 93.3333px,1200px);position:relative;overflow:hidden;box-shadow:0 24px 70px #000,0 0 0 1px #16110a}.stage-background{object-fit:cover;-webkit-user-select:none;user-select:none;pointer-events:none;width:100%;height:100%;display:block}.slot-state{z-index:2;pointer-events:none;width:41%;height:auto;position:absolute;left:4.583%}.slot-state-1{top:3.778%}.slot-state-2{top:24.444%}.slot-state-3{top:45.111%}.slot-state-4{top:65.778%}.state-preloads{pointer-events:none;width:0;height:0;position:absolute;overflow:hidden}.gender-hotspots{gap:1.7%;width:17.3%;height:11.2%;display:flex;position:absolute;top:54.3%;left:18.4%}.gender-hotspots button{background:0 0;border:0;border-radius:50%;width:42%;height:100%;padding:0}.class-hotspots{grid-template-columns:repeat(8,1fr);gap:.7%;height:13%;display:grid;position:absolute;bottom:5.2%;left:15%;right:15%}.class-hotspots button,.edge-hotspot,.slot-hotspot{background:0 0;border:0;padding:0}.gender-hotspots button,.gender-hotspots button:hover,.gender-hotspots button:focus,.gender-hotspots button:focus-visible,.gender-hotspots button.active,.class-hotspots button,.class-hotspots button:hover,.class-hotspots button:focus,.class-hotspots button:focus-visible,.class-hotspots button.active{box-shadow:none;background:0 0;outline:0}.edge-hotspot{width:13%;height:11%;position:absolute;bottom:2%}.edge-hotspot:hover,.edge-hotspot:focus-visible{background:0 0;outline:0}.back-hotspot{left:0}.next-hotspot{right:0}.selection-hint{color:#9d947f;letter-spacing:.12em;margin:0;font-size:12px}.slot-hotspot{color:#efe1b9;place-items:center;width:42.125%;height:18.333%;display:grid;position:absolute;left:3.875%;overflow:hidden}.slot-hotspot:hover,.slot-hotspot:focus-visible,.slot-hotspot.selected{background:0 0;outline:0}.slot-1{top:4.667%}.slot-2{top:25.333%}.slot-3{top:46%}.slot-4{top:66.667%}.slot-card-surface{object-fit:fill;pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.slot-character{z-index:3;text-shadow:0 2px 4px #000;background:0 0;grid-template-columns:auto 1fr;align-items:center;gap:.45em;width:35.6%;padding:0;display:grid;position:absolute;top:29.1%;left:24.33%}.slot-character strong{color:#f2e9d7;letter-spacing:.02em;text-align:left;text-overflow:ellipsis;white-space:nowrap;font-size:clamp(9px,1.25vw,15px);font-weight:400;overflow:hidden}.slot-character>b{color:#e8dfca;letter-spacing:0;font-size:clamp(8px,1.1vw,13px);font-weight:400}.selected-character-portrait{z-index:2;object-fit:fill;pointer-events:none;width:25%;height:46.667%;position:absolute;top:15.167%;left:66.25%;transform:translateY(-1px)}.character-summary{color:#d8c9a8;text-shadow:0 2px 3px #000;pointer-events:none;grid-template-rows:repeat(6,1fr);align-items:center;gap:0;width:18%;height:24.5%;padding:0;font-size:clamp(9px,1.35vw,14px);display:grid;position:absolute;top:68.15%;left:72.75%}.character-summary strong,.character-summary span{box-sizing:border-box;text-overflow:ellipsis;white-space:nowrap;align-items:center;min-width:0;height:100%;padding-right:8px;font-weight:400;line-height:1;display:flex;overflow:hidden}.character-summary strong{color:inherit;font-size:inherit}.delete-hotspot{background:0 0;border:0;outline:0;width:10%;height:10%;padding:0;position:absolute;bottom:2%;left:34%}.enter-game-hotspot{z-index:6;background:0 0;border:0;outline:0;width:14.5%;height:5.4%;padding:0;position:absolute;top:59%;left:68.75%}.enter-game-hotspot:disabled{cursor:default}.delete-hotspot:hover,.delete-hotspot:focus,.delete-hotspot:focus-visible{box-shadow:none;background:0 0;outline:0}.delete-hotspot:disabled{cursor:default}.delete-dialog-backdrop{z-index:20;background:#000000ad;position:absolute;inset:0}.delete-dialog{color:#ded3bd;text-shadow:0 2px 3px #000;width:57.25%;height:49.167%;position:absolute;top:25.5%;left:21.375%}.delete-dialog-frame{pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.delete-dialog-message{text-align:center;align-content:center;justify-items:center;gap:10%;width:86%;height:61%;font-size:clamp(10px,1.45vw,16px);display:grid;position:absolute;top:10.5%;left:6.33%}.delete-dialog-message strong{color:#fff0c8;font-size:1.2em;font-weight:400}.delete-dialog-message b{color:#dcb76d;font-size:1.15em;font-weight:400}.delete-dialog-message .delete-ready{color:#f2dfaa}.delete-dialog-message .delete-error{color:#ff9b8c}.delete-dialog-button{background-position:50%;background-repeat:no-repeat;background-size:100% 100%;border:0;outline:0;width:32%;height:10.2%;padding:0;position:absolute;bottom:9.5%}.delete-confirm-button{background-image:url(/select-ui/delete/6489c.png);left:10.25%}.delete-confirm-button:not(:disabled):hover,.delete-confirm-button:not(:disabled):focus-visible{background-image:url(/select-ui/delete/6490c.png)}.delete-confirm-button:not(:disabled):active{background-image:url(/select-ui/delete/6491c.png)}.delete-confirm-button:disabled{cursor:default;filter:grayscale()brightness(.55)}.delete-cancel-button{background-image:url(/select-ui/delete/6492c.png);right:10.25%}.delete-cancel-button:hover,.delete-cancel-button:focus-visible{background-image:url(/select-ui/delete/6493c.png)}.delete-cancel-button:active{background-image:url(/select-ui/delete/6494c.png)}.class-hotspots button:disabled{cursor:not-allowed}.preset-hotspots{z-index:3;grid-template-columns:repeat(3,1fr);gap:3.5%;width:41%;height:5%;display:grid;position:absolute;top:25.1%;left:4.3%}.preset-hotspots button,.ability-reset-hotspot,.ability-details-hotspot,.ability-back-hotspot,.ability-confirm-hotspot{background:0 0;border:0;outline:0;padding:0}.derived-ability-bars{z-index:5;color:#c8c0b1;text-shadow:0 1px 2px #000,0 0 4px #000;background:#030302eb;grid-template-rows:repeat(5,1fr);align-items:center;width:38.8%;height:20.8%;padding:.7% 1.1%;display:grid;position:absolute;top:34.1%;left:6.1%;box-shadow:inset 0 0 0 1px #75644652}.derived-ability-row{grid-template-columns:34% 1fr 2.2em;align-items:center;gap:2.2%;min-width:0;font-family:Noto Serif TC,Microsoft JhengHei,serif;font-size:clamp(8px,1.3vw,17px);display:grid}.derived-ability-row>span{text-align:right;white-space:nowrap}.derived-ability-row>strong{color:#e5d7b8;text-align:right;opacity:.8;font-size:.78em;font-weight:500}.derived-ability-track{clip-path:polygon(4% 0,96% 0,100% 50%,96% 100%,4% 100%,0 50%);background:#030302;border:1px solid #4f371f;height:52%;min-height:7px;position:relative;overflow:hidden;box-shadow:inset 0 0 7px #000,0 0 1px #9a7443}.derived-ability-track i{background:linear-gradient(90deg,#59250d 0%,#9a4d16 45%,#d3a955 80%,#f0e0a0 100%);transition:width .46s cubic-bezier(.2,.75,.25,1);display:block;position:absolute;inset:1px auto 1px 1px;overflow:hidden;box-shadow:0 0 6px #dea7458c}.derived-ability-track i:after{content:"";background:linear-gradient(90deg,#0000,#ffefb773,#0000);width:42%;animation:2.8s ease-in-out infinite ability-bar-shimmer;position:absolute;inset:0;transform:translate(-150%)}@keyframes ability-bar-shimmer{0%,25%{opacity:0;transform:translate(-150%)}42%{opacity:1}70%,to{opacity:0;transform:translate(340%)}}.ability-live-panel{z-index:4;color:#e5d9bd;text-shadow:0 1px 2px #000;background:#030302f0;grid-template-columns:repeat(2,1fr);align-content:center;gap:5% 7%;width:41.7%;height:14.5%;padding:3.5% 4% 2%;display:grid;position:absolute;top:55.1%;left:4.1%}.remaining-points{color:#b4a88d;font-size:clamp(7px,1vw,12px);position:absolute;top:3%;left:38%}.remaining-points strong{color:#fff1c4}.stat-control{grid-template-columns:1fr auto 2ch auto;align-items:center;gap:5px;font-size:clamp(8px,1.15vw,14px);display:grid}.stat-control button{color:#ead9ad;background:linear-gradient(#403a31,#15130f);border:1px solid #786b52;width:clamp(15px,2vw,24px);height:clamp(15px,2vw,24px);padding:0;line-height:1}.stat-control button:disabled{opacity:.3;cursor:default}.stat-control strong{color:#fff;text-align:center}.character-name-field{z-index:4;width:22%;height:4.7%;position:absolute;top:89.3%;left:35.3%}.character-name-field input{color:#f4e8ca;text-align:center;background:#030302e0;border:1px solid #7d6d49;outline:0;width:100%;height:100%;padding:0 10px;font-size:clamp(10px,1.3vw,16px)}.character-name-field input:focus{border-color:#c4a96c;box-shadow:inset 0 0 8px #000}.ability-reset-hotspot{z-index:6;cursor:pointer;width:17.2%;height:5.3%;position:absolute;top:74%;left:6.5%}.ability-details-hotspot{z-index:6;cursor:pointer;width:19.5%;height:5.3%;position:absolute;top:74%;left:26%}.detail-overlay{z-index:20;pointer-events:none;position:absolute;inset:0}.detail-window{pointer-events:auto;color:#b8b1a5;background:linear-gradient(#100f0cf5,#050504fa),repeating-linear-gradient(90deg,#0000 0 6px,#ffffff05 7px);border:2px solid #80745d;width:49.6%;min-width:0;padding:1.1%;font-family:Noto Serif TC,Microsoft JhengHei,serif;position:absolute;top:15%;left:48.25%;box-shadow:0 0 0 3px #17130e,0 0 0 5px #9b8a66,0 0 0 8px #211a11,0 10px 30px #000}.detail-window header{background:linear-gradient(90deg,#171711,#343327 25%,#22221a 75%,#11110e);border:1px solid #625a49;place-items:center;height:11%;min-height:39px;margin-bottom:1.6%;display:grid;position:relative;box-shadow:inset 0 0 8px #000}.detail-window h2{color:#d9d2c2;letter-spacing:.08em;text-shadow:0 2px 2px #000;margin:0;font-size:clamp(16px,2.2vw,28px);font-weight:600}.detail-window header button{color:#a9a99f;text-shadow:0 0 4px #fff;cursor:pointer;background:0 0;border:0;width:9%;height:100%;padding:0;font:300 clamp(25px,3.8vw,43px)/1 Georgia,serif;position:absolute;top:0;right:1%}.detail-grid{grid-template-columns:1fr 1fr;grid-template-areas:"str int""dex wis""con cha";gap:4px 7px;display:grid}.detail-str{grid-area:str}.detail-int{grid-area:int}.detail-dex{grid-area:dex}.detail-wis{grid-area:wis}.detail-con{grid-area:con}.detail-cha{grid-area:cha}.detail-group{background:#0b0a08f2;border:2px solid #342b20;grid-template-columns:15% 1fr;min-height:94px;display:grid;box-shadow:inset 0 0 0 1px #665944}.detail-group h3{color:#bfb29a;writing-mode:vertical-rl;letter-spacing:.22em;border-right:2px solid #332b21;place-items:center;margin:0;font-size:clamp(11px,1.45vw,19px);font-weight:500;display:grid}.detail-group>div{padding:3px}.detail-group p{background:#302b27;grid-template-columns:1fr 30%;height:20%;min-height:17px;margin:0 0 2px;font-size:clamp(8px,1.05vw,14px);line-height:1.35;display:grid}.detail-group p span{white-space:nowrap;padding-left:4px}.detail-group p strong{color:#dedbd2;background:#080807;place-items:center;font-weight:400;display:grid}.ability-back-hotspot{z-index:4;width:14%;height:9%;position:absolute;bottom:2.5%;left:1.5%}.ability-confirm-hotspot{z-index:4;width:18.2%;height:5.2%;position:absolute;top:89.1%;left:64.5%}.ability-message{z-index:5;color:#ffb29c;text-align:center;text-shadow:0 2px 3px #000;width:48%;font-size:clamp(8px,1vw,12px);position:absolute;top:84.8%;left:35%}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@media (width<=760px){.login-screen{background-position:48%}.scene-shade{background:linear-gradient(#0000 38%,#020304eb)}.login-panel{top:auto;bottom:62px;transform:translate(-50%)}.login-row{grid-template-columns:84px 1fr}.login-row label{font-size:15px}.login-actions,.message-slot{margin-left:94px}.character-screen{align-content:center;padding:0}.character-stage{border-inline:0;width:100%}.selection-hint{display:none}.detail-window{width:49.6%;top:15%;left:48.25%}}@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.derived-ability-track i{transition:none}.derived-ability-track i:after{animation:none}}.polymorph-picker{z-index:40;color:#eee3c9;background:linear-gradient(#201c14f7,#080a09fa);border:1px solid #9a8050;width:min(420px,100% - 24px);padding:10px;position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);box-shadow:0 12px 36px #000c,inset 0 0 0 2px #382f20}.polymorph-picker>header{border-bottom:1px solid #56472e;justify-content:space-between;align-items:center;padding:0 2px 8px;display:flex}.polymorph-picker>header button{color:#e9d49e;background:#19150f;border:1px solid #715f3e;width:26px;height:26px}.polymorph-picker-grid{grid-template-columns:repeat(3,minmax(70px,1fr));gap:7px;margin-top:9px;display:grid}.polymorph-category-list{grid-template-columns:repeat(7,1fr);gap:3px;margin-top:8px;display:grid}.polymorph-category-list button{color:#b9aa86;background:#14130f;border:1px solid #55482f;min-width:0;padding:5px 2px;font-size:11px}.polymorph-category-list button.selected{color:#ffe6a4;background:#3d321d;border-color:#c8a34c}.polymorph-category-list button:disabled{opacity:.28}.polymorph-picker-grid>button{color:#ead8ab;background:linear-gradient(#272217,#100f0b);border:1px solid #57472d;gap:3px;min-width:0;padding:6px 3px;display:grid}.polymorph-picker-grid>button:hover{background:linear-gradient(#40351f,#17140d);border-color:#d3ad55}.polymorph-picker-grid span{place-items:end center;height:72px;display:grid;overflow:hidden}.polymorph-picker-grid img{max-width:72px;max-height:72px;image-rendering:pixelated}.polymorph-picker-grid small,.polymorph-picker>p{color:#a99d82;font-size:11px}.polymorph-picker>p{margin:8px 0 0}.polymorph-picker{background:radial-gradient(circle at 68% 10%,#332919,#080907 66%);border-color:#887044;width:min(760px,100% - 28px);padding:0;overflow:hidden;box-shadow:0 16px 46px #000e,inset 0 0 0 2px #2c261b}.polymorph-picker>header{background:linear-gradient(#2d281e,#12110d);height:42px;padding:0 10px 0 14px}.polymorph-picker>header div{display:grid}.polymorph-picker>header small{color:#786e5c;letter-spacing:2px;font:8px sans-serif}.polymorph-picker>header strong{color:#ead5a4;font-size:15px}.polymorph-picker-body{grid-template-columns:92px minmax(280px,1fr) 190px;min-height:390px;display:grid}.polymorph-picker-body.fixed-polymorph-list{grid-template-columns:minmax(0,1fr) 180px}.polymorph-picker-body.fixed-polymorph-list .polymorph-category-list{display:none}.polymorph-category-list{background:linear-gradient(90deg,#15130e,#0b0b08);border-right:1px solid #473c2a;grid-template-columns:1fr;align-content:start;gap:3px;margin:0;padding:10px 7px;display:grid}.polymorph-category-list button{text-align:left;justify-content:space-between;align-items:center;min-height:38px;padding:5px 8px;display:flex}.polymorph-category-list button small{color:#716956;font-size:9px}.polymorph-category-list button.selected{box-shadow:inset 3px 0 #d1a04a}.polymorph-picker-grid{scrollbar-gutter:stable;grid-template-columns:repeat(3,minmax(82px,1fr));align-content:start;gap:6px;max-height:390px;margin:0;padding:10px;display:grid;overflow-y:auto}.polymorph-picker-grid>button{cursor:pointer;grid-template-rows:72px auto auto;align-items:center;min-height:116px;padding:6px 4px}.polymorph-picker-grid>button.selected{color:#ffe6a5;background:radial-gradient(circle at 50% 28%,#4a391e,#17130d 70%);border-color:#d0a64e;box-shadow:inset 0 0 12px #bd833033,0 0 5px #000}.polymorph-picker-grid span{height:70px}.polymorph-picker-grid img{max-width:68px;max-height:68px}.polymorph-preview{background:radial-gradient(circle at 50% 26%,#302b1e,#0a0b08 69%);border-left:1px solid #493e2b;grid-template-rows:218px auto 1fr;align-content:start;padding:11px;display:grid}.polymorph-preview>div{background:radial-gradient(at 50% 78%,#3b3927,#11130e 58%,#070806 72%);border:1px solid #56482f;place-items:end center;display:grid;overflow:hidden;box-shadow:inset 0 0 18px #000}.polymorph-preview img{max-width:170px;max-height:205px;image-rendering:pixelated}.polymorph-preview>strong{color:#efd9a3;text-align:center;padding:9px 2px 7px;font-size:15px}.polymorph-preview dl{align-content:start;gap:5px;margin:0;display:grid}.polymorph-preview dl div{border-bottom:1px solid #302c22;justify-content:space-between;padding:5px 6px;display:flex}.polymorph-preview dt{color:#817967;font-size:10px}.polymorph-preview dd{color:#cbbb96;margin:0;font-size:10px}.polymorph-picker>footer{background:#0a0b08;border-top:1px solid #4d412d;grid-template-columns:1fr 82px 104px;align-items:center;gap:7px;min-height:46px;padding:6px 10px;display:grid}.polymorph-picker>footer p{color:#8e836e;margin:0;font-size:10px}.polymorph-picker>footer button{color:#d2c19b;cursor:pointer;background:linear-gradient(#332918,#151009);border:1px solid #665432;height:31px}.polymorph-picker>footer button.primary{color:#ffe2a5;background:linear-gradient(#503919,#211507);border-color:#96733b}.polymorph-picker>footer button:disabled{opacity:.35;cursor:not-allowed}@media (width<=680px){.polymorph-picker{width:calc(100% - 12px);max-height:calc(100% - 12px);overflow-y:auto}.polymorph-picker-body{grid-template-columns:76px 1fr;min-height:360px}.polymorph-picker-grid{grid-template-columns:repeat(2,minmax(78px,1fr));max-height:360px}.polymorph-preview{display:none}.polymorph-picker>footer{grid-template-columns:1fr 76px 96px}}