#characterSelect{padding:0;border:2px solid #ac9970;border-radius:24px;background:#fff9ed;color:#514c3c;width:min(1120px,94vw);max-width:1120px;max-height:none;height:min(850px,92dvh);margin:auto;box-shadow:0 20px 80px #24342866;overflow:hidden;font-family:"Microsoft YaHei",sans-serif;text-align:left}
#characterSelect::backdrop{background:#283a2b99;backdrop-filter:blur(7px)}
#characterSelect .cs-shell{height:100%;display:flex;flex-direction:column;min-height:0}
#characterSelect .cs-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:23px 28px 18px;border-bottom:1px solid #e2d6bd;flex:none}
#characterSelect .cs-eyebrow{font-size:11px;letter-spacing:2px;color:#9b8053;margin:0 0 8px}
#characterSelect h2{font-size:27px;letter-spacing:1px;color:#4c583f;margin:0 0 9px;font-family:inherit;line-height:1.3}
#characterSelect .cs-intro{font-size:12px;color:#847964;margin:0;line-height:1.6}
#characterSelect .cs-close{font:13px inherit;flex:none;background:#fffdf5;border:1px solid #d7c8aa;border-radius:10px;padding:10px 15px;min-height:44px;color:#756446;cursor:pointer}
#characterSelect .cs-scroll{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:20px 28px 10px;scrollbar-color:#c5b18a #f6efdf}
#characterSelect .cs-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:12px}
#characterSelect .cs-card{font-family:inherit;display:flex;flex-direction:column;align-items:center;padding:0 0 12px;border:1px solid #d5c9b3;border-radius:13px;overflow:hidden;background:#f7f3ea;box-shadow:none;letter-spacing:0;transform:none;min-width:0;position:relative;color:#655d50;text-align:center;opacity:1}
#characterSelect .cs-portrait{height:126px;width:100%;display:flex;align-items:center;justify-content:center;background:#fff;position:relative;padding:10px}
#characterSelect .cs-portrait img{width:100%;height:100%;object-fit:contain;display:block}
#characterSelect .cs-card strong{font-size:15px;line-height:1.3;margin:10px 2px 5px;font-weight:700}
#characterSelect .cs-state{font-size:10px;line-height:1.5;color:#827c72}
#characterSelect .cs-card.is-locked{cursor:not-allowed;background:#eeece6;border-color:#d8d5cd;color:#706f69;filter:none}
#characterSelect .is-locked .cs-portrait{background:#eeedea}
#characterSelect .is-locked img{filter:grayscale(1);opacity:.48;mix-blend-mode:multiply}
#characterSelect .cs-card.is-selected{border:2px solid #c79b38;background:#fff2c8;color:#695022;box-shadow:0 3px 0 #c7a25233}
#characterSelect .is-selected .cs-state{color:#827032;font-weight:bold}
#characterSelect .cs-check{position:absolute;right:7px;top:7px;background:#b68727;color:white;border-radius:50%;width:23px;height:23px;line-height:23px;font-size:14px}
#characterSelect .cs-credit{margin:15px 0 4px;text-align:center;color:#948973;font-size:10px}
#characterSelect .cs-footer{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px 28px;border-top:1px solid #e2d6bd;background:#fff8e6;flex:none}
#characterSelect .cs-footer strong{display:block;font-size:16px;color:#6e592e;margin-bottom:5px}
#characterSelect .cs-footer span{font-size:11px;color:#8b7a56}
#characterSelect .cs-confirm{font-family:inherit;font-size:14px;font-weight:bold;padding:13px 24px;min-height:48px;border:1px solid #b89548;border-radius:12px;background:#edcd7a;color:#5e4c26;cursor:pointer;white-space:nowrap}
#characterSelect button:focus-visible{outline:3px solid #3f806c;outline-offset:-4px}
body.choosing-character{overflow:hidden}
@media(max-width:800px){#characterSelect .cs-grid{grid-template-columns:repeat(4,minmax(0,1fr))}#characterSelect .cs-portrait{height:130px}}
@media(max-width:500px){#characterSelect{width:calc(100vw - 16px);height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));border-radius:18px}#characterSelect .cs-header{padding:18px 14px 14px}#characterSelect h2{font-size:20px}#characterSelect .cs-eyebrow{font-size:9px;letter-spacing:1px}#characterSelect .cs-close{padding:8px 11px}#characterSelect .cs-scroll{padding:14px 12px 8px}#characterSelect .cs-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}#characterSelect .cs-portrait{height:98px;padding:8px}#characterSelect .cs-card strong{font-size:13px;margin-top:8px}#characterSelect .cs-state{font-size:10px}#characterSelect .cs-card{padding-bottom:10px;border-radius:10px}#characterSelect .cs-footer{padding:13px 14px;gap:10px}#characterSelect .cs-footer strong{font-size:13px}#characterSelect .cs-footer span{font-size:10px}#characterSelect .cs-confirm{font-size:12px;padding:12px 13px}#characterSelect .cs-intro{font-size:11px}}
@media(max-height:500px) and (min-width:501px){#characterSelect{height:94dvh}#characterSelect .cs-header{padding:12px 20px}#characterSelect h2{font-size:20px;margin-bottom:3px}#characterSelect .cs-eyebrow{display:none}#characterSelect .cs-footer{padding:9px 20px}#characterSelect .cs-portrait{height:100px}}
@media(prefers-reduced-motion:reduce){#characterSelect button{transition:none}}
/* Reset the home page's global footer positioning inside the selector. */
#characterSelect .cs-footer{position:static;inset:auto;width:100%;margin:0;text-align:left;letter-spacing:0}
#characterSelect .cs-close{font-family:inherit;font-size:13px}
#characterSelect .cs-mounts{margin:18px 0 8px;padding:16px;border:1px solid #d6c09a;border-radius:14px;background:#fffaf0}
#characterSelect .cs-mounts[hidden]{display:none}
#characterSelect .cs-mount-heading{display:flex;justify-content:space-between;align-items:start;gap:12px;margin-bottom:12px;color:#674628}
#characterSelect .cs-mount-heading strong{display:block;font-size:17px}
#characterSelect .cs-mount-heading small{display:block;margin-top:4px;font-size:12px;color:#806b51}
#characterSelect .cs-mount-heading>span{font-size:11px;color:#92785a;white-space:nowrap}
#characterSelect .cs-mount-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
#characterSelect .cs-mount-card{font-family:inherit;border:1px solid #d7c7aa;border-radius:11px;background:#fff;min-width:0;padding:6px 6px 10px;display:flex;flex-direction:column;align-items:center;cursor:pointer;color:#594534;text-align:center}
#characterSelect .cs-mount-card[aria-pressed="true"]{border:2px solid #9e542f;background:#fff0db;box-shadow:0 3px 0 #a7694233}
#characterSelect .cs-mount-card img{width:100%;height:140px;object-fit:contain;background:#f7f1e7;border-radius:7px}
#characterSelect .cs-mount-card strong{font-size:15px;margin-top:7px}
#characterSelect .cs-mount-card small{font-size:12px;color:#986337;margin-top:2px}
#characterSelect .cs-mount-card span{font-size:11px;line-height:1.45;color:#756759;margin-top:3px}
@media(max-width:500px){#characterSelect .cs-mounts{padding:10px;margin-top:13px}#characterSelect .cs-mount-grid{grid-template-columns:repeat(2,minmax(0,1fr))}#characterSelect .cs-mount-card img{height:112px}#characterSelect .cs-mount-card strong{font-size:14px}#characterSelect .cs-mount-card span{font-size:12px}}
