#acct{--u:min(1.05vh,1.1vw);position:fixed;inset:0;z-index:1000;display:grid;place-items:center;background:#1c5fb8 center/cover no-repeat;image-rendering:pixelated;font-family:CRYS Sarabun,Tahoma,Leelawadee UI,sans-serif;overflow:hidden}.acct-stack{display:grid;justify-items:center;width:calc(var(--u) * 50)}.acct-logo{width:calc(var(--u) * 46);height:auto;margin-bottom:calc(var(--u) * -3.5);position:relative;z-index:1;image-rendering:auto;filter:drop-shadow(0 .6vh .8vh #0b204a99);pointer-events:none}.acct-card{position:relative;box-sizing:border-box;width:100%;min-height:calc(var(--u) * 44);padding:calc(var(--u) * 7) calc(var(--u) * 7) calc(var(--u) * 8.5);background:center/100% 100% no-repeat;color:#f6e7c8;text-align:center;filter:drop-shadow(0 1.2vh 1.6vh #06142e99);font-size:calc(var(--u) * 1.9)}.acct-card>*{image-rendering:auto}.acct-card h2{margin:0 0 calc(var(--u) * 1.6);font-size:calc(var(--u) * 2.5);font-weight:700;color:#ffe9b0;text-shadow:0 2px 0 #2a1608}.acct-sub{margin:calc(var(--u) * -1) 0 calc(var(--u) * 1.4);color:#d9c39a}.acct-sub b{color:#fff3d0}.acct-form{display:grid;gap:calc(var(--u) * 1.2)}.acct-field{display:flex;align-items:center;height:calc(var(--u) * 5.2);border:2px solid #7a5530;border-radius:calc(var(--u) * .9);background:#2a180c;box-shadow:inset 0 2px 5px #0009,0 1px #a5774466;color:#e8cf9d}.acct-field:focus-within{border-color:#ffd36a;box-shadow:inset 0 2px 5px #0009,0 0 0 2px #ffd36a55}.acct-field svg{flex:none;width:calc(var(--u) * 2.6);height:calc(var(--u) * 2.6);margin:0 calc(var(--u) * 1.1);padding-right:calc(var(--u) * 1.1);border-right:1px solid #7a553099;box-sizing:content-box}.acct-field input{flex:1;min-width:0;height:100%;padding:0 calc(var(--u) * 1.2) 0 0;border:0;outline:0;background:none;color:#fff6e0;font:inherit;font-size:calc(var(--u) * 2.1)}.acct-field input::placeholder{color:#b89c72;opacity:1}.acct-field input:-webkit-autofill{-webkit-text-fill-color:#fff6e0;box-shadow:0 0 0 99px #2a180c inset;caret-color:#fff6e0}.acct-remember{display:flex;align-items:center;justify-content:center;gap:calc(var(--u) * .9);color:#f1dfba;cursor:pointer}.acct-remember input{width:calc(var(--u) * 2.3);height:calc(var(--u) * 2.3);margin:0;accent-color:#e9b23c}.acct-error{min-height:calc(var(--u) * 2);margin:0;color:#ffb3a0;font-size:calc(var(--u) * 1.75);text-shadow:0 1px 0 #2a1608}.acct-primary{justify-self:center;width:72%;height:calc(var(--u) * 6);border:3px solid #f0c45a;border-radius:calc(var(--u) * 1.1);background:linear-gradient(#7fd4ff,#2f8fee 45%,#1657c9 55%,#2c7be6);color:#fff;font:inherit;font-size:calc(var(--u) * 2.6);font-weight:800;letter-spacing:.06em;text-shadow:0 2px 0 #0b2f7a;cursor:pointer;box-shadow:0 0 0 2px #6b4313,inset 0 2px #c9f0ff99,0 .5vh #3a2208}.acct-primary:hover{filter:brightness(1.1)}.acct-primary:active{transform:translateY(2px)}.acct-link{margin-top:calc(var(--u) * 1.4);padding:calc(var(--u) * .7) calc(var(--u) * 2);border:1px solid #7a5530;border-radius:99px;background:#22130acc;color:#f1dfba;font:inherit;font-size:calc(var(--u) * 1.8);cursor:pointer}.acct-link:hover{border-color:#ffd36a;color:#fff}.acct-note{display:block;margin-top:calc(var(--u) * .8);color:#c9b189;font-size:calc(var(--u) * 1.45)}.acct-slots{display:grid;gap:calc(var(--u) * 1.1)}.acct-slot{display:flex;gap:calc(var(--u) * .9)}.acct-slot-main{flex:1;display:grid;gap:2px;padding:calc(var(--u) * 1) calc(var(--u) * 1.6);border:2px solid #7a5530;border-radius:calc(var(--u) * .9);background:#2a180c;color:#fff3d0;font:inherit;text-align:left;cursor:pointer;box-shadow:inset 0 2px 5px #0008}.acct-slot-main:hover{border-color:#ffd36a;background:#3a2412}.acct-slot-main b{font-size:calc(var(--u) * 2.1)}.acct-slot-main small{color:#cdb58a;font-size:calc(var(--u) * 1.6)}.acct-slot.empty .acct-slot-main{border-style:dashed;color:#cdb58a}.acct-del{padding:0 calc(var(--u) * 1.5);border:2px solid #a8503f;border-radius:calc(var(--u) * .9);background:#3a1710;color:#ffb3a0;font:inherit;cursor:pointer}.acct-version{position:fixed;right:1.4vw;bottom:1.2vh;color:#fff;font-size:max(11px,1.6vh);text-shadow:0 1px 3px #000;image-rendering:auto}#acct.cs{display:block;--u:min(1vh,.58vw);color:#f6e7c8}#acct.cs>*{image-rendering:auto}.cs-logo{position:absolute;left:calc(var(--u) * 2.5);top:calc(var(--u) * .5);width:calc(var(--u) * 34);filter:drop-shadow(0 .6vh .8vh #0b204a99);pointer-events:none}.cs-panel{position:absolute;box-sizing:border-box;padding:calc(var(--u) * 1.6);border:calc(var(--u) * .45) solid #6b4520;border-radius:calc(var(--u) * 1.4);background:linear-gradient(#3a2414f2,#24140af2);box-shadow:0 0 0 2px #c99a4a,inset 0 0 0 2px #1a0d05,0 1.2vh 1.8vh #06142e99;font-size:calc(var(--u) * 2)}.cs-panel h2{margin:calc(var(--u) * -.2) 0 calc(var(--u) * 1.2);padding-bottom:calc(var(--u) * 1);border-bottom:2px solid #6b452099;font-size:calc(var(--u) * 2.7);font-weight:700;color:#ffe9b0;text-align:center;text-shadow:0 2px 0 #1a0d05}.cs-list{left:calc(var(--u) * 3);top:calc(var(--u) * 27);width:calc(var(--u) * 38);display:grid;gap:calc(var(--u) * .9)}.cs-acct{margin:calc(var(--u) * -.6) 0 calc(var(--u) * .2);text-align:center;color:#d9c39a;font-size:calc(var(--u) * 1.7)}.cs-acct b{color:#fff3d0}.cs-row{display:flex;align-items:center;gap:calc(var(--u) * 1.2);height:calc(var(--u) * 8);padding:0 calc(var(--u) * 1.2);border:2px solid #5a3a1c;border-radius:calc(var(--u) * .9);background:#1c1009;color:#fff3d0;font:inherit;text-align:left;cursor:pointer;box-shadow:inset 0 2px 5px #0008}.cs-row:hover{border-color:#c99a4a;background:#2c1a0d}.cs-row.on{border-color:#ffd36a;background:linear-gradient(#6a4a1c,#3f2a10);box-shadow:0 0 0 2px #ffd36a55,0 0 calc(var(--u) * 2) #ffc24a66,inset 0 2px 5px #0006}.cs-face{flex:none;width:calc(var(--u) * 6.4);height:calc(var(--u) * 6.4);border-radius:calc(var(--u) * .7);background:#0d0704 center top/cover no-repeat;border:1px solid #6b4520;image-rendering:pixelated}.cs-job{flex:none;font-size:calc(var(--u) * 2.6)}.cs-who{display:grid;gap:1px;min-width:0}.cs-who b{font-size:calc(var(--u) * 2.2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cs-who small{color:#cdb58a;font-size:calc(var(--u) * 1.75)}.cs-new{border-style:dashed;color:#cdb58a}.cs-plus{flex:none;display:grid;place-items:center;width:calc(var(--u) * 5.4);height:calc(var(--u) * 5.4);margin:0 calc(var(--u) * .5);border:2px solid #cdb58a;border-radius:50%;font-size:calc(var(--u) * 3.6);line-height:1}.cs-stage{position:absolute;left:47%;top:80%;width:0;height:0}.cs-sprite{position:absolute;left:0;bottom:calc(var(--u) * -2.4);transform:translate(-50%);display:block;overflow:hidden;filter:drop-shadow(0 .4vh .3vh #0008);animation:cs-bob 2.4s ease-in-out infinite}.cs-sprite img{display:block;width:auto;max-width:none;image-rendering:pixelated}.cs-ring{position:absolute;left:0;top:0;width:calc(var(--u) * 26);height:calc(var(--u) * 9);transform:translate(-50%,-50%);border-radius:50%;border:calc(var(--u) * .35) solid #9fe6ffcc;background:radial-gradient(closest-side,#bff3ff99,#49c3ff33 60%,#49c3ff00);box-shadow:0 0 calc(var(--u) * 3) #6fd8ff,inset 0 0 calc(var(--u) * 2) #c9f6ff;animation:cs-pulse 2.4s ease-in-out infinite}.cs-name{position:absolute;left:0;bottom:calc(var(--u) * 23.5);transform:translate(-50%);padding:calc(var(--u) * .4) calc(var(--u) * 1.6);border-radius:99px;background:#0b1b3acc;color:#fff;font-size:calc(var(--u) * 2.3);white-space:nowrap;text-shadow:0 1px 2px #000}@keyframes cs-bob{50%{transform:translate(-50%,calc(var(--u) * -.5))}}@keyframes cs-pulse{50%{opacity:.7;transform:translate(-50%,-50%) scale(1.06)}}.cs-info{right:calc(var(--u) * 3);top:calc(var(--u) * 27);width:calc(var(--u) * 36)}.cs-info dl{display:grid;grid-template-columns:auto 1fr;gap:calc(var(--u) * 1.1) calc(var(--u) * 2.4);margin:0 0 calc(var(--u) * 1.6)}.cs-info dt{color:#cdb58a}.cs-info dd{margin:0;color:#fff6e0;font-weight:600}.cs-stats{display:grid;gap:calc(var(--u) * .9);padding:calc(var(--u) * 1.3);border-radius:calc(var(--u) * .9);background:#150b05;box-shadow:inset 0 2px 5px #000a}.cs-stats div{display:grid;grid-template-columns:calc(var(--u) * 5) calc(var(--u) * 4) 1fr;align-items:center;font-size:calc(var(--u) * 1.85)}.cs-stats span{color:#e8d6b0}.cs-stats b{color:#fff;font-weight:600}.cs-stats i{height:calc(var(--u) * 1.1);border-radius:99px;background:#3a2a1c;overflow:hidden}.cs-stats u{display:block;height:100%;border-radius:99px}.cs-btn{height:calc(var(--u) * 6.4);padding:0 calc(var(--u) * 2.6);border:calc(var(--u) * .35) solid #6b4520;border-radius:calc(var(--u) * 1.1);background:linear-gradient(#3a2414,#24140a);box-shadow:0 0 0 2px #c99a4a,0 .5vh #1a0d05;color:#fff3d0;font:inherit;font-size:calc(var(--u) * 2.2);cursor:pointer}.cs-btn:hover:not(:disabled){filter:brightness(1.25)}.cs-btn:disabled,.cs-start:disabled{opacity:.45;cursor:default}.cs-back{position:absolute;left:calc(var(--u) * 3);bottom:calc(var(--u) * 3.5)}.cs-actions{position:absolute;left:50%;bottom:calc(var(--u) * 3);transform:translate(-50%);display:flex;align-items:center;gap:calc(var(--u) * 2.4)}.cs-start{height:calc(var(--u) * 8);min-width:calc(var(--u) * 34);border:3px solid #f0c45a;border-radius:calc(var(--u) * 1.3);background:linear-gradient(#7fd4ff,#2f8fee 45%,#1657c9 55%,#2c7be6);color:#fff;font:inherit;font-size:calc(var(--u) * 3.2);font-weight:800;letter-spacing:.06em;text-shadow:0 2px 0 #0b2f7a;cursor:pointer;box-shadow:0 0 0 2px #6b4313,inset 0 2px #c9f0ff99,0 .5vh #3a2208}.cs-start:hover:not(:disabled){filter:brightness(1.1)}.cs-start:active:not(:disabled){transform:translateY(2px)}
