.profession-vote { width:min(660px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); margin:auto; padding:24px 36px 30px; overflow:auto; color:#e5f4ff; border:1px solid transparent; border-radius:16px; background:linear-gradient(135deg,#172b40,#0a1527 65%,#17283e) padding-box,linear-gradient(135deg,#d7f4ff,#466d88 45%,#adddf2) border-box; box-shadow:0 0 30px #78caff33,0 24px 90px #0009; text-align:center; }
.profession-vote::backdrop { background:#030916c9; backdrop-filter:blur(6px); }
.vote-close { position:absolute; top:10px; right:13px; width:36px; height:36px; background:none; border:0; color:#c4e2f2; font-size:28px; cursor:pointer; }
.vote-ornament { height:36px; width:240px; max-width:70%; margin:0 auto 10px; background:url('https://static.web.sdo.com//aionm/pic/pro2026/260828AIONRally/d1.png') center/100% auto no-repeat; }
.profession-vote h2 { font-family:'Noto Serif SC',serif; font-size:26px; letter-spacing:4px; text-shadow:0 0 15px #85cfff66; }
#voteHint { font-size:14px; color:#a6bfd2; margin:6px 0 24px; }
.vote-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px 20px; }
.class-choice { position:relative; display:block; cursor:pointer; min-width:0; }
.class-choice input { position:absolute; opacity:0; width:1px; height:1px; }
.class-portrait { display:block; position:relative; width:100%; aspect-ratio:1; overflow:hidden; background:radial-gradient(circle at 50% 20%,#36506b,#091425); border:1px solid #7397b0; box-shadow:inset 0 0 0 3px #0e1d30; transition:border-color .18s,box-shadow .18s; }
.class-portrait img { position:absolute; max-width:none; height:auto; display:block; }
.class-portrait::after { content:''; position:absolute; inset:3px; border:1px solid #dbf2ff44; pointer-events:none; }
.class-name { display:block; margin-top:8px; font-family:'Noto Serif SC',serif; font-size:16px; letter-spacing:2px; color:#c5d9e7; }
.profession-support-count { display:block; margin-top:4px; font-size:12px; line-height:1.4; letter-spacing:0; color:#8faabd; }
.class-choice:hover .class-portrait { border-color:#cdeeff; }
.class-choice input:checked + .class-portrait { border:2px solid #d3f4ff; box-shadow:0 0 17px #63c7ff99; }
.class-choice input:checked ~ .class-name { color:#fff; text-shadow:0 0 10px #7dd1ff; }
.class-choice input:focus-visible + .class-portrait { outline:2px solid #e0f5ff; outline-offset:4px; }
.vote-status { min-height:23px; margin:18px 0 8px; font-size:14px; color:#badef2; }
.vote-submit { width:210px; min-height:56px; padding:6px 12px; border:12px solid transparent; border-image:url('https://static.web.sdo.com//aionm/pic/pro2026/260828AIONRally/buttonslimprimary.svg') 12 fill stretch; background:none; color:#f0faff; font-family:'Noto Serif SC',serif; font-size:16px; letter-spacing:3px; cursor:pointer; }
.vote-submit:disabled { opacity:.45; cursor:default; }
.vote-submit:not(:disabled):hover { filter:brightness(1.15) drop-shadow(0 0 5px #8bd6ff66); }
.vote-close:focus-visible,.vote-submit:focus-visible { outline:2px solid #c5edff; outline-offset:3px; }
@media(max-width:520px) { .profession-vote { padding:20px 20px 24px; } .vote-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 22px; max-width:260px; margin:auto; } .class-portrait { max-width:104px; margin:auto; } .class-name { font-size:15px; margin-top:5px; } .vote-ornament { height:26px; } .profession-vote h2 { font-size:23px; } #voteHint { margin-bottom:18px; } }
@media(max-width:520px) { .class-portrait { max-width:90px; } }

.faction-support-modal { width:min(620px,calc(100vw - 32px)); }
.faction-support-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; max-width:470px; margin:0 auto; }
.faction-support-choice { position:relative; display:block; cursor:pointer; min-width:0; }
.faction-support-choice input { position:absolute; opacity:0; width:1px; height:1px; }
.faction-support-emblem { display:flex; position:relative; align-items:center; justify-content:center; aspect-ratio:1 / .92; overflow:hidden; border:1px solid #7397b0; border-radius:12px; background:radial-gradient(circle at 50% 45%,#3a536d,#091425 75%); box-shadow:inset 0 0 0 3px #0e1d30; transition:border-color .18s,box-shadow .18s,transform .18s; }
.faction-confirm { width:460px; height:400px; max-width:none; max-height:none; box-sizing:border-box; padding:0; position:fixed; inset:0; margin:auto; }
.faction-confirm-warning { margin:2px 0 24px; color:var(--text-muted); font-size:12px; letter-spacing:1px; }
.faction-confirm #factionConfirmName { color:#d9f3ff; font-weight:700; }
@media(max-width:491px) { .faction-confirm { width:calc(100vw - 32px); height:auto; aspect-ratio:460 / 400; } }
.faction-support-emblem::after { content:''; position:absolute; inset:4px; border:1px solid #dbf2ff44; border-radius:8px; pointer-events:none; }
.faction-support-emblem img { width:82%; height:82%; object-fit:contain; filter:drop-shadow(0 0 12px #fff6); transition:transform .18s; }
.faction-support-choice.elyos .faction-support-emblem { background:radial-gradient(circle at 50% 45%,#536044,#101b1d 78%); }
.faction-support-choice.asmodian .faction-support-emblem { background:radial-gradient(circle at 50% 45%,#5d4778,#171226 78%); }
.faction-support-choice:hover .faction-support-emblem { border-color:#cdeeff; transform:translateY(-2px); }
.faction-support-choice:hover .faction-support-emblem img { transform:scale(1.04); }
.faction-support-choice input:checked + .faction-support-emblem { border:2px solid #d3f4ff; box-shadow:0 0 22px #63c7ff99; }
.faction-support-choice input:checked ~ .faction-support-name { color:#fff; text-shadow:0 0 10px #7dd1ff; }
.faction-support-choice input:checked ~ .faction-support-name-en { color:#d9f3ff; }
.faction-support-choice input:focus-visible + .faction-support-emblem { outline:2px solid #e0f5ff; outline-offset:4px; }
.faction-support-name,.faction-support-name-en { display:block; text-align:center; }
.faction-support-name { margin-top:10px; font-family:'Noto Serif SC',serif; font-size:22px; letter-spacing:4px; color:#c5d9e7; }
.faction-support-name-en { margin-top:4px; color:#8caabd; font-size:12px; letter-spacing:3px; }
@media(max-width:520px) { .faction-support-grid { gap:14px; max-width:330px; } .faction-support-name { font-size:18px; letter-spacing:3px; } .faction-support-name-en { font-size:10px; letter-spacing:2px; } }