body::-webkit-scrollbar { width: 8px; height: 8px; background-color: transparent; }
body:not(:hover)::-webkit-scrollbar { }
body::-webkit-scrollbar:active { }
body::-webkit-scrollbar-track { background: #8883; border-radius: 3px; }
body::-webkit-scrollbar-thumb { background: #888A; border-radius: 3px; transition-duration: 0.2s; will-change: auto; }
body::-webkit-scrollbar-thumb:hover { background: #555C; }
body::-webkit-scrollbar-thumb:active { background: #333E; }
body::-webkit-scrollbar-corner { border-radius: 3px; }
/* variable things */
/* colors w/o dark mode */
body {
    --bgcolor-base: 255 255 255;
    /* Christmas Edition color set */
    /* --bgcolor-base: 232 240 255; */
    /* Winter Edition color set */
    /* --bgcolor-base: 213 214 214; */
    --bgcolor-rgb: rgb(var(--bgcolor-base));
    --bgcolor-tp: rgba(var(--bgcolor-base) / 1 );

    background-color: var(--bgcolor-tp);

    --main-color: 0 0 0;
    --plain-text-color: #222D;
    --plain-text-rgb: #222;
    --plain-text-base: 34 34 34;
    color: rgb(var(--main-color));
    --highlighted-text-color: #DDDD;
    --highlighted-text-rgb: #DDD;
    --highlighted-text-base: 221 221 221;
    --sharp-text-color: #FFFE;
    --sharp-text-rgb: #FFF;
    --sharp-text-base: 255 255 255;
    --sharp-text-bg-color: #000E;
    --sharp-text-bg-rgb: #000;
    --sharp-text-bg-base: 0 0 0;

    --sequence-title-text-color: var(--color-focusive-darker);
    --sequence-title-background-strength: 1;

    --sub_action_button_bg: #9994;
    --extra_action_button_bg: #8882;
}
/* colors with dark mode */
body.dark {
    --bgcolor-base: 34 34 34;

    --main-color: 221 221 221;
    --plain-text-color: #FFFA;
    --plain-text-rgb: #EEE;
    --plain-text-base: 238 238 238;
    color: rgb(var(--main-color));
    --highlighted-text-color: #000D;
    --highlighted-text-rgb: #000;
    --highlighted-text-base: 0 0 0;
    --sharp-text-color: #000E;
    --sharp-text-rgb: #000;
    --sharp-text-base: 0 0 0;
    --sharp-text-bg-color: #FFFE;
    --sharp-text-bg-rgb: #FFF;
    --sharp-text-bg-base: 255 255 255;

    --sequence-title-text-color: var(--color-focusive);
    --sequence-title-background-strength: 0.3;

    --sub_action_button_bg: #6666;
    --extra_action_button_bg: #BBBB;
}
body.dark::-webkit-scrollbar-thumb:hover { background: #AAAC; }
body.dark::-webkit-scrollbar-thumb:active { background: #CCCE; }

body.hideCursor * { cursor: none !important; }

body > div { z-index: 1; }

body .textRed { color: rgb(var(--color-text-for-red)); }
body .textBlue { color: rgb(var(--color-text-for-blue)); }

a { transition-duration: 0.1s; will-change: auto; }
a:link { color: #222D; text-decoration-line: none; }
a:hover { color: #444D; text-decoration-line: underline; }
a:active { color: #333F; }
a:visited { color: #666B; }
body.dark a:link { color: #DDDD; }
body.dark a:hover { color: #BBBD; }
body.dark a:active { color: #CCCF; }
body.dark a:visited { color: #999B; }

button.text_type { padding: 0; border: none; background: none; color: var(--plain-text-color); font-size: inherit; font-family: var(--font-basic-common); cursor: pointer; }
button.text_type:focus { outline: none; text-shadow: 0 0 4px var(--plain-text-color); }
button.text_type:hover { color: #888; }
button.text_type:active { text-shadow: 0 0 1px var(--plain-text-color); }

span.text_item::before { content: attr(data-text); }
span.text_item2::after { content: attr(data-text2); }
span.count_indicate::before { content: attr(data-count); }

.pick_step_cursor { color: #FC0; font-size: 32px; text-shadow: 0px 0px 3.5px black; animation: blink2 infinite 1.5s ease-in-out; will-change: auto; }
.pick_text { color: #FB6; }

.emoji { font-family: var(--font-for-emoji) !important; font-variant-emoji: emoji; }

/* side common */
.side_root.red.reference { --ref-schl: var(--csrhl); --ref-schl: var(--csrhl); --ref-sclr: var(--csrlr); --ref-scl: var(--csrl); --ref-sc: var(--csr); --ref-scd: var(--csrd); --ref-scdr: var(--csrdr); }
.side_root.red { --signature-color-highlighter: var(--color-side-red-highlighter); --signature-color-highlight: var(--color-side-red-highlight); --signature-color-bright: var(--color-side-red-bright); --signature-color-lighter: var(--color-side-red-lighter); --signature-color-light: var(--color-side-red-light); --signature-color: var(--color-side-red); --signature-color-dark: var(--color-side-red-dark); --signature-color-darker: var(--color-side-red-darker); }
.side_root.blue.reference { --ref-schl: var(--csbhl); --ref-schl: var(--csbhl); --ref-sclr: var(--csblr); --ref-scl: var(--csbl); --ref-sc: var(--csb); --ref-scd: var(--csbd); --ref-scdr: var(--csbdr); }
.side_root.blue { --signature-color-highlighter: var(--color-side-blue-highlighter); --signature-color-highlight: var(--color-side-blue-highlight); --signature-color-bright: var(--color-side-blue-bright); --signature-color-lighter: var(--color-side-blue-lighter); --signature-color-light: var(--color-side-blue-light); --signature-color: var(--color-side-blue); --signature-color-dark: var(--color-side-blue-dark); --signature-color-darker: var(--color-side-blue-darker); }
.side_root.red {
    --side: left; --proffer-side: right; --flex-row-direction: row;
}
.side_root.blue {
    --side: right; --proffer-side: left; --flex-row-direction: row-reverse;
}
/* side w/o dark mode */
.side_root {
    --base-cost-color: var(--signature-color);
    --additional-cost-color: var(--signature-color-darker);
}
/* side with dark mode */
body.dark .side_root {
    --base-cost-color: var(--signature-color-light);
    --additional-cost-color: var(--signature-color-bright);
}

/* Main screen area */
div#main_screen { position: fixed; top: 0; bottom: 0; left: 0; right: 0; transition-duration: 1s; transition-timing-function: ease; will-change: auto; }
body[data-side-area="1"] div#main_screen { margin-left: 410px; }

/* Block area common */
div.block_area { opacity: 1; perspective: 500px; transform-style: preserve-3d; transition-duration: 0.5s; will-change: auto; }
div.block_area > * { transition-duration: 0.8s; will-change: auto; }

/* BG area */
div#bg_area { position: absolute; z-index: -2; top: 0; left: 0; right: 0; bottom: 0; }
div#bg_area div { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
div#bg_area div#bg_versus { display: none; background-color: #888D; }
div#bg_area div#bg_versus[data-show="1"] { display: initial; }
div#bg_area div#bg_video_area { background-color: black; overflow: hidden; opacity: 0; transition-duration: 0.5s; transition-timing-function: ease; will-change: auto; }
div#bg_area div#bg_video_area:is([data-show="1"], [data-show="2"]) { transition-delay: 0.7s; }
div#bg_area div#bg_video_area[data-show="1"] { opacity: 1; }
div#bg_area div#bg_video_area div#bg_video_holder { position: relative; width: 100%; aspect-ratio: 16 / 8.78; overflow: hidden; opacity: 1; transition-duration: 0.4s; transition-timing-function: ease; will-change: auto; }
/* div#bg_area div#bg_video_area[data-show="2"] div#bg_video_holder { opacity: 0; } */
div#bg_area div#bg_video_area div#bg_video_holder video#spiral_enterence { width: 100%; }

/* Center area */
div#center_behind { position: absolute; z-index: -1; width: 100%; height: 1080px; }
div#center_behind > div { position: absolute; top: 0; left: 0; right: 0; }
div#center_behind div#center_behind_area { width: calc(100% - 200px); margin: auto; }
div#center_behind div#center_behind_area div#league_title { left: 0; right: 0; margin: 100px auto 54px; color: rgba(var(--plain-text-base) / 20%); font-size: 144px; font-weight: bold; text-align: center; line-height: 128%; user-select: none; transition-duration: 0.2s; will-change: auto; }
div#center_behind div#center_behind_area div#league_title[data-hide="1"] { opacity: 0; }
div#center_behind div#center_behind_area div#league_title span {  }
div#center_behind div#center_behind_area div#league_title span.league_name { font-family: 'Noto Sans KR'; line-height: 76%; }
div#center_behind div#center_behind_area div#league_title span.league_tail { display: block; margin-top: 30px; color: rgba(var(--plain-text-base) / 13.333%); font-family: Lato; font-size: 256px; line-height: 86%; }
div#center_behind div#versus_entry_area { --entry-img-size: auto 720px; display: flex; width: calc(100% - max(10%, 64px)); height: 100%; margin: auto; transition-duration: 0.4s; transition-timing-function: ease; will-change: auto; }
div#center_behind div#versus_entry_area > div { height: 100%; transition-duration: 0.8s; transition-timing-function: ease; will-change: auto; }
div#center_behind div#versus_entry_area div.versus_divider { width: 5.788%; max-width: 100px; min-width: 66px; }
div#center_behind div#versus_entry_area div.versus_divider[data-wide="1"] { width: 23.2%; max-width: 400px; min-width: 250px; }
div#center_behind div#versus_entry_area:not([data-wins=""]) div.versus_divider { min-width: 20px; width: 5%; }
div#center_behind div#versus_entry_area div.versus_entry_side { display: flex; flex-grow: 1; }
div#center_behind div#versus_entry_area div.versus_entry_side.red { --entry-bg: #A888; --entry-gradient: #A88A; flex-direction: row; justify-content: right; }
div#center_behind div#versus_entry_area div.versus_entry_side.blue { --entry-bg: #89A8; --entry-gradient: #89AA; flex-direction: row-reverse; justify-content: left; }
div#center_behind div#versus_entry_area[data-wins="red"] div.versus_entry_side.red { flex-grow: 2; }
div#center_behind div#versus_entry_area[data-wins="red"] div.versus_entry_side.blue { filter: saturate(0.4); }
div#center_behind div#versus_entry_area[data-wins="blue"] div.versus_entry_side.red { filter: saturate(0.4); }
div#center_behind div#versus_entry_area[data-wins="blue"] div.versus_entry_side.blue { flex-grow: 2; }
div#center_behind div#versus_entry_area div.versus_entry_side > div.versus_entry[data-rarity="4"] { --rarity-edge: #A9BE 60.75%, #BAC 61%, #86B 61.25%, #86B 61.75%, #BAC 62%, #D9F9 64%, #98A3 66%; }
div#center_behind div#versus_entry_area div.versus_entry_side > div.versus_entry[data-rarity="5"] { --rarity-edge: #BA8E 60.75%, #DB8 61%, #C84 61.25%, #C84 61.75%, #DB8 62%, #FC89 64%, #9743 66%; }
div#center_behind div#versus_entry_area div.versus_entry_side > div.versus_entry[data-rarity="5.1"] { --rarity-edge: #B89E 60.75%, #D8A 61%, #C45 61.25%, #C45 61.75%, #D8A 62%, #F8A9 64%, #9453 66%; }
div#center_behind div#versus_entry_area div.versus_entry_side > div.versus_entry { position: relative; max-width: 500px; min-width: 0; height: 100%; flex-grow: 0; transition-delay: 0s; transition-duration: 0.25s; transition-timing-function: ease; will-change: auto; }
div#center_behind div#versus_entry_area div.versus_entry_side > div.versus_entry > div { position: absolute; top:0; bottom: 0; left: 0; right: 0; background-repeat: no-repeat; }
div#center_behind div#versus_entry_area div.versus_entry_side > div.versus_entry div.bg_disc { background-image: radial-gradient(var(--entry-bg) 50%, var(--entry-bg) 58.5%, var(--rarity-edge), transparent 70%); background-position: center; background-size: 175% 75%; filter: brightness(0) invert(1) blur(4px) opacity(0) drop-shadow(0px 0px 2px transparent); transition-duration: 0.25s; transition-timing-function: ease; will-change: auto; }
div#center_behind div#versus_entry_area div.versus_entry_side > div.versus_entry div.character { background-image: var(--src); background-position: var(--facial-center) center; background-size: var(--entry-img-size); background-blend-mode: color-burn; -webkit-mask-image: linear-gradient(0deg, transparent 18.5%, black 19.5%, black 82.5%, transparent 83.5%); filter: drop-shadow(0 0 0 #888) brightness(0) invert(1) blur(2px) drop-shadow(0 0 0 black); opacity: 0.8; transition-delay: 0s; transition-duration: 0.25s; transition-timing-function: ease; will-change: auto; }
div#center_behind div#versus_entry_area div.versus_entry_side.red > div.versus_entry[data-show="0"]:nth-child(odd) div.character { background-position: calc(var(--facial-center) - 10%) 65%; }
div#center_behind div#versus_entry_area div.versus_entry_side.blue > div.versus_entry[data-show="0"]:nth-child(odd) div.character { background-position: calc(var(--facial-center) + 10%) 65%; }
div#center_behind div#versus_entry_area div.versus_entry_side.red > div.versus_entry[data-show="0"]:nth-child(even) div.character { background-position: calc(var(--facial-center) - 10%) 35%; }
div#center_behind div#versus_entry_area div.versus_entry_side.blue > div.versus_entry[data-show="0"]:nth-child(even) div.character { background-position: calc(var(--facial-center) + 10%) 35%; }
div#center_behind div#versus_entry_area div.versus_entry_side > div.versus_entry:is([data-show="1"], [data-show="2"], [data-show="3"]) { }
div#center_behind div#versus_entry_area div.versus_entry_side > div.versus_entry:is([data-show="1"], [data-show="2"], [data-show="3"]) div.bg_disc { }
div#center_behind div#versus_entry_area div.versus_entry_side > div.versus_entry:is([data-show="1"], [data-show="2"], [data-show="3"]) div.character { opacity: 1; }
div#center_behind div#versus_entry_area div.versus_entry_side > div.versus_entry:is([data-show="1"], [data-show="2"]) { transition-duration: 0.1s; }
div#center_behind div#versus_entry_area div.versus_entry_side > div.versus_entry:is([data-show="1"], [data-show="2"]) div.bg_disc { }
div#center_behind div#versus_entry_area div.versus_entry_side > div.versus_entry:is([data-show="1"], [data-show="2"]) div.character { filter: drop-shadow(0 0 0 var(--entry-bg)) brightness(0) invert(0) blur(0) drop-shadow(0px 2px 2px black); transition-delay: 0.05s; transition-duration: 0.3s; transition-timing-function: ease-in-out; }
div#center_behind div#versus_entry_area div.versus_entry_side > div.versus_entry[data-show="1"] { flex-grow: 0; min-width: 380px; }
div#center_behind div#versus_entry_area div.versus_entry_side > div.versus_entry[data-show="1"] div.bg_disc { }
div#center_behind div#versus_entry_area div.versus_entry_side > div.versus_entry[data-show="1"] div.character { }
div#center_behind div#versus_entry_area div.versus_entry_side.red > div.versus_entry[data-show="1"]:nth-child(odd) div.character { background-position: calc(var(--facial-center) + 10%) 49.5%; }
div#center_behind div#versus_entry_area div.versus_entry_side.blue > div.versus_entry[data-show="1"]:nth-child(odd) div.character { background-position: calc(var(--facial-center) - 10%) 49.5%; }
div#center_behind div#versus_entry_area div.versus_entry_side.red > div.versus_entry[data-show="1"]:nth-child(even) div.character { background-position: calc(var(--facial-center) + 10%) 50.5%; }
div#center_behind div#versus_entry_area div.versus_entry_side.blue > div.versus_entry[data-show="1"]:nth-child(even) div.character { background-position: calc(var(--facial-center) - 10%) 50.5%; }
div#center_behind div#versus_entry_area div.versus_entry_side > div.versus_entry:is([data-show="2"], [data-show="3"]) { flex-shrink: 1; min-width: 0; }
div#center_behind div#versus_entry_area div.versus_entry_side > div.versus_entry:is([data-show="2"], [data-show="3"]) div.bg_disc { }
div#center_behind div#versus_entry_area div.versus_entry_side > div.versus_entry:is([data-show="2"], [data-show="3"]) div.character { transition-delay: 0.1s; }
div#center_behind div#versus_entry_area div.versus_entry_side > div.versus_entry[data-show="2"] { flex-grow: 1.5; }
div#center_behind div#versus_entry_area div.versus_entry_side > div.versus_entry[data-show="2"]:last-child { transition-duration: 1.0s; }
div#center_behind div#versus_entry_area div.versus_entry_side > div.versus_entry[data-show="2"] div.bg_disc { transition-duration: 0.6s; }
div#center_behind div#versus_entry_area div.versus_entry_side > div.versus_entry[data-show="2"] div.character { }
div#center_behind div#versus_entry_area div.versus_entry_side > div.versus_entry[data-show="3"] { flex-grow: 1; transition-delay: 0.1s; transition-duration: 1.0s; }
div#center_behind div#versus_entry_area div.versus_entry_side > div.versus_entry[data-show="3"] div.bg_disc { background-size: 195% 100%; filter: brightness(1) invert(0) blur(0) opacity(1) drop-shadow(0px 2px 4px black); transition-duration: 0.6s; }
div#center_behind div#versus_entry_area div.versus_entry_side > div.versus_entry[data-show="3"] div.character { background-position: var(--facial-center) center; background-size: var(--entry-img-size); filter: drop-shadow(0 0 0 var(--entry-bg)) brightness(1) invert(0) blur(0) drop-shadow(0px 12px 8px black); transition-delay: 0s; transition-duration: 0.8s; }
div#center_behind div#versus_entry_area div.versus_entry_side > div.versus_entry img.element_icon { position: absolute; top: 128px; /* bottom: 171px; */ left: 0; right: 0; width: 0; max-width: 80%; margin: auto; filter: brightness(0) invert(1) blur(8px) opacity(0) drop-shadow(0px 0px 2px transparent); transition-duration: 0.4s; transition-timing-function: ease; }
div#center_behind div#versus_entry_area div.versus_entry_side > div.versus_entry[data-show="3"] img.element_icon { width: auto; filter: brightness(1) invert(0) blur(0) opacity(1) drop-shadow(0px 2px 2px black); }
div#center_behind div#versus_entry_area div.versus_entry_side > div.versus_entry div.character_info { display: flex; flex-direction: column; flex-wrap: nowrap; height: fit-content; margin: 100px auto auto; color: #FFFE; font-size: 24px; font-weight: bold; line-height: 2px; text-align: center; text-shadow: 0 0 5px black; transition-duration: 2s; }
div#center_behind div#versus_entry_area div.versus_entry_side > div.versus_entry div.character_info::before { content: '✦'; color: rgba(var(--color-focusive-lighter) / 96%); font-size: 54px; text-shadow: 0 0 5px rgba(var(--color-focusive-highlight) / 70%); transform: scaleX(0.85); opacity: 0; transition-duration: 0.4s; }
div#center_behind div#versus_entry_area div.versus_entry_side > div.versus_entry div.character_info:not([data-fourstars="1"])::before { filter: drop-shadow(0 0 8px #FEBC); }
div#center_behind div#versus_entry_area div.versus_entry_side > div.versus_entry div.character_info span.character_constell { font-size: 32px; line-height: 4px; transform: translateZ(0); opacity: 0; transition-duration: 0.25s; will-change: auto; }
div#center_behind div#versus_entry_area div.versus_entry_side > div.versus_entry div.character_info[data-fourstars="1"] span.character_constell { font-size: 28px; color: #ECFE; }
div#center_behind div#versus_entry_area div.versus_entry_side > div.versus_entry[data-show="3"] div.character_info span.character_constell { opacity: 1; transition-delay: 1.0s; }
div#center_behind div#versus_entry_area div.versus_entry_side > div.versus_entry[data-show="3"] div.character_info:before { opacity: 1; transition-delay: 0.5s; }
div#center_behind div#versus_entry_area div.versus_entry_side > div.versus_entry div.weapon_allocated { z-index: 1; width: 64px; height: 300px; margin: auto auto 30px; background-image: var(--src); background-size: 100%; background-position: center; background-repeat: no-repeat; filter: drop-shadow(5px 3px 1.2px #000B); opacity: 0; transition-delay: 1s; transition-duration: 1.5s; }
div#center_behind div#versus_entry_area div.versus_entry_side.red > div.versus_entry div.weapon_allocated { transform: scale(2.0) translateX(16px) translateY(5px) rotate(-7deg); }
div#center_behind div#versus_entry_area div.versus_entry_side.blue > div.versus_entry div.weapon_allocated { transform: scale(2.0) translateX(-16px) translateY(5px) rotate(-7deg); }
div#center_behind div#versus_entry_area div.versus_entry_side > div.versus_entry[data-show="3"] div.weapon_allocated { transform: scale(2.0) translateX(0px) translateY(0px) rotate(-7deg); opacity: 1; }
div#center_behind div#versus_entry_area div.versus_entry_side > div.versus_entry div.weapon_info { z-index: 2; display: flex; flex-direction: column; flex-wrap: nowrap; height: fit-content; margin: auto auto 134px; color: #FFFF; font-weight: bold; text-align: center; opacity: 0; transition-delay: 0.15s; transition-duration: 2.5s; }
div#center_behind div#versus_entry_area div.versus_entry_side > div.versus_entry div.weapon_info span { text-shadow: -2px -2px 4px rgba(0 0 0 / 90%), 2px 2px 2px rgba(0 0 0 / 90%), 0px 0px 4px rgba(255 255 255 / 90%); }
div#center_behind div#versus_entry_area div.versus_entry_side > div.versus_entry div.weapon_info span.weapon_name { color: #FFFD; font-size: 21px; line-height: 20px; }
div#center_behind div#versus_entry_area div.versus_entry_side > div.versus_entry div.weapon_info span.weapon_refine { font-size: 42px; line-height: 42px; }
div#center_behind div#versus_entry_area div.versus_entry_side > div.versus_entry[data-show="3"] div.weapon_info { opacity: 1; }

/* Side selection area */
div.side_selection_area { --bg-size: 1125px 900px; --basic-position: -150px; --back-position: calc(var(--common-position) - 187.5px); --pass-position: calc(var(--common-position) + 62.5px); position: absolute; z-index: 0; width: 100%; height: 100%; --bg-top-margin: 100px; overflow: hidden; }
div.side_selection_area div.character_selection_view { position: absolute; top: 0; width: 100%; height: 100%; background-color: rgba(var(--bgcolor-base) / 0.8); background-image: var(--src); background-repeat: no-repeat; background-size: var(--bg-size); opacity: 0; transition-duration: 0.4s; transition-timing-function: ease-out; will-change: auto; }
div.side_selection_area div.character_selection_view[data-show=""] { background-position: var(--side) var(--back-position) top var(--bg-top-margin); }
div.side_selection_area div.character_selection_view[data-show="1"] { background-position: var(--side) var(--common-position) top var(--bg-top-margin); opacity: 1; }
div.side_selection_area div.character_selection_view[data-show="2"] { background-position: var(--side) var(--pass-position) top var(--bg-top-margin); opacity: 0; }
div.side_selection_area div.character_selection_view[data-id^="treveler#"] { background-image: var(--src), var(--src1); background-size: var(--bg-size), 0%; }
div.side_selection_area div.character_selection_view[data-id^="treveler#"][data-show=""] { background-position: var(--side) var(--back-position) top var(--bg-top-margin), var(--side) var(--back-position) top var(--bg-top-margin); }
div.side_selection_area div.character_selection_view[data-id^="treveler#"][data-show="1"] { background-position: var(--side) var(--common-position) top var(--bg-top-margin), var(--side) var(--common-position) top var(--bg-top-margin); opacity: 1; }
div.side_selection_area div.character_selection_view[data-id^="treveler#"][data-show="2"] { background-position: var(--side) var(--pass-position) top var(--bg-top-margin), var(--side) var(--pass-position) top var(--bg-top-margin); opacity: 0; }
div.side_selection_area div.character_selection_view[data-id^="treveler#"][data-shift="1"] { }
div.side_selection_area div.character_selection_view[data-id^="treveler#"][data-shift="1"][data-treveler="0"] { animation: bgGlich0 0.6s forwards steps(10); }
div.side_selection_area div.character_selection_view[data-id^="treveler#"][data-shift="1"][data-treveler="1"] { animation: bgGlich1 0.6s forwards steps(10); }
div.side_selection_area div.character_selection_view[data-id^="treveler#"][data-shift=""][data-treveler="0"] { background-size: var(--bg-size), 0%; transform: none; }
div.side_selection_area div.character_selection_view[data-id^="treveler#"][data-shift=""][data-treveler="1"] { background-size: 0%, var(--bg-size); transform: none; }
body[data-rule-type="ban card"] div.side_selection_area { --basic-position: -250px; }
body[data-pool-type="ban card grade complexd"] div.side_selection_area { --basic-position: -280px; }
div.side_selection_area[data-wide="1"] { --basic-position: 0px; }
/* Side selection each side custom */
div.side_selection_area.red { --side: left; --common-position: calc(var(--basic-position) + 50px); left: 0; }
div.side_selection_area.blue { --side: right; --common-position: calc(var(--basic-position) - 50px); right: 0; }

/* Side area */
div#side_behind { position: absolute; z-index: 0; width: 100%; height: 960px; }
div#side_behind div { --margin-short: 100px; position: absolute; top: 0; left: 0; right: 0; }
div#side_behind div#side_behind_area { width: calc(100% - 200px); margin: auto; }
div#side_behind div.side_behind { bottom: 0; margin: auto calc(var(--margin-short) + 80px) auto var(--margin-short); }
body[data-rule-type="ban card"] div#side_behind div.side_behind { --margin-short: 50px; }
div#side_behind div.side_behind div { position: absolute; }
div#side_behind div.side_behind div.character_name_display { position: absolute; display: inline-flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-end; /* bottom: 0; margin: auto 0 200px; */ min-height: 164px; margin: 76px 0 200px; font-family: 'Noto Sans KR'; /* font-size: 230px; */ font-size: 128px; font-weight: bold; transform: scaleX(0.9) skewX(-12deg); opacity: 0; transition-duration: 0.8s; transition-timing-function: ease; will-change: auto; }
div#side_behind div.side_behind div.character_name_display[data-show="1"] { opacity: 1; }
div#side_behind div.side_behind div.character_name_display.red { color: rgba(var(--color-side-red-highlight) / 30%); text-shadow: 0 0 0 rgba(var(--bgcolor-base) / 70%); filter: drop-shadow(2px 1px 2px rgba(var(--color-side-red-darker) / 70%)); }
div#side_behind div.side_behind div.character_name_display.blue { color: rgba(var(--color-side-blue-highlight) / 30%); text-shadow: 0 0 0 rgba(var(--bgcolor-base) / 70%); filter: drop-shadow(2px 1px 2px rgba(var(--color-side-blue-darker) / 70%)); }
div#side_behind div.side_behind div.character_name_display span { line-height: 100%; }
/* div#side_behind div.side_behind div.character_name_display span:nth-last-of-type(1) { transform: translateX(25px); } */
/* div#side_behind div.side_behind div.character_name_display span:nth-last-of-type(2) { font-size: 192px; } */
/* div#side_behind div.side_behind div.character_name_display span:nth-last-of-type(3) { font-size: 162px; } */
div#side_behind div.side_behind div.character_name_display span:nth-last-of-type(1) { margin-bottom: 0px; }
div#side_behind div.side_behind div.character_name_display span:nth-last-of-type(2) { margin-bottom: -24px; font-size: 96px; }
div#side_behind div.side_behind div.character_name_display span:nth-last-of-type(3) { margin-bottom: 0px; font-size: 72px; }
div#side_behind div.side_behind div span { }
div#side_behind div.side_behind#left_behind_area { }
/* div#side_behind div.side_behind#left_behind_area div { transform-origin: bottom left; } */
div#side_behind div.side_behind#left_behind_area div { transform-origin: top left; }
div#side_behind div.side_behind#left_behind_area div.character_name_display { text-align: left; margin-left: 220px; }
div#side_behind div.side_behind#left_behind_area div.character_name_display span { }
div#side_behind div.side_behind#left_behind_area div.character_name_display span:nth-last-of-type(1) { transform: translateX(7px); }
div#side_behind div.side_behind#left_behind_area div.character_name_display span:nth-last-of-type(2) { }
div#side_behind div.side_behind#left_behind_area div.character_name_display span:nth-last-of-type(3) { }
div#side_behind div.side_behind#right_behind_area { }
div#side_behind div.side_behind#right_behind_area div { transform-origin: bottom right; }
div#side_behind div.side_behind#right_behind_area div.character_name_display { text-align: right; margin-right: 170px; }
div#side_behind div.side_behind#right_behind_area div.character_name_display span { }
div#side_behind div.side_behind#right_behind_area div.character_name_display span:nth-last-of-type(1) { transform: translateX(40px); }
div#side_behind div.side_behind#right_behind_area div.character_name_display span:nth-last-of-type(2) { }
div#side_behind div.side_behind#right_behind_area div.character_name_display span:nth-last-of-type(3) { transform: translateX(-30px); }
div#side_behind[data-wide="1"] div.side_behind#left_behind_area div.character_name_display { margin-left: 0px; }
div#side_behind[data-wide="1"] div.side_behind#right_behind_area div.character_name_display { margin-right: -50px; }

/* Extension area for Cardy cup rule */
div#cardy_extension_behind { position: absolute; z-index: 0; width: 100%; height: 960px; }
div#cardy_extension_behind div.side_behind { position: absolute; top: 0; left: 0; right: 0; }
div#cardy_extension_behind div.side_behind div.cardy_bans { --margin-side: 0px; --side-inner-position: 136px; position: absolute; display: flex; flex-direction: column; flex-wrap: nowrap; top: 0; left: 0; right: 0; margin: 90px auto auto; width: 50%; height: 660px; align-items: var(--sticky); opacity: 0; transition-duration: 0.6s; will-change: auto; }
body:not([data-rule-type="cardy"]) div#cardy_extension_behind div.side_behind div.cardy_bans { display: none; }
div#cardy_extension_behind div.side_behind.left div.cardy_bans { --position: left; --proffer-position: right; --sticky: flex-start; --darkness-h-position: 98%; margin-left: var(--margin-side); }
div#cardy_extension_behind div.side_behind.right div.cardy_bans { --position: right; --proffer-position: left; --sticky: flex-end; --darkness-h-position: 2%; margin-right: var(--margin-side); }
div#cardy_extension_behind div.side_behind div.cardy_bans div { }
div#cardy_extension_behind div.side_behind div.cardy_bans div.ban_title { text-align: var(--position); perspective-origin: var(--position) bottom; perspective: 120px; transform-style: preserve-3d; }
div#cardy_extension_behind div.side_behind.left div.cardy_bans div.ban_title { margin-left: var(--side-inner-position); }
div#cardy_extension_behind div.side_behind.right div.cardy_bans div.ban_title { margin-right: var(--side-inner-position); }
div#cardy_extension_behind div.side_behind div.cardy_bans div.ban_title span { display: inline-block; color: rgba(var(--signature-color) / 92%); font-size: 20px; font-weight: bold; text-shadow: var(--ban-pick-title-shadow-x) 0px 1px rgb(var(--signature-color-dark)); transform: rotateY(var(--ban-pick-title-rotate-y)) skew(var(--ban-pick-title-skew)); }
div#cardy_extension_behind div.side_behind div.cardy_bans ul.ban_selection { display: flex; flex-direction: column; max-height: 100%; margin: 0; padding: 0; width: 294px; list-style: none; }
div#cardy_extension_behind div.side_behind div.cardy_bans ul.ban_selection li.ban_entry { position: relative; width: 100%; height: 84px; flex-shrink: 1; background-color: rgba(var(--signature-color) / 0.4); -webkit-mask-image: linear-gradient(var(--mask-deg), transparent 0%, #0006 5%, black 20%, black 50%, #0006 60%, transparent 95%); }
div#cardy_extension_behind div.side_behind.left div.cardy_bans ul.ban_selection li.ban_entry { --mask-deg: -90deg; }
div#cardy_extension_behind div.side_behind.right div.cardy_bans ul.ban_selection li.ban_entry { --mask-deg: 90deg; }
div#cardy_extension_behind div.side_behind div.cardy_bans ul.ban_selection li.ban_entry::before { --margin-side: 136px; position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; right: 0; width: fit-content; height: fit-content; margin: auto; color: rgba(var(--signature-color) / 0.7); font-size: 56px; text-align: center; transition-duration: 0.5s; will-change: auto; }
div#cardy_extension_behind div.side_behind div.cardy_bans ul.ban_selection:has(li.ban_entry:nth-of-type(12)) li.ban_entry::before { font-size: 42px; }
div#cardy_extension_behind div.side_behind div.cardy_bans ul.ban_selection:has(li.ban_entry:nth-of-type(17)) li.ban_entry::before { font-size: 32px; }
div#cardy_extension_behind div.side_behind div.cardy_bans ul.ban_selection:has(li.ban_entry:nth-of-type(21)) li.ban_entry::before { font-size: 26px; }
div#cardy_extension_behind div.side_behind div.cardy_bans ul.ban_selection:has(li.ban_entry:nth-of-type(26)) li.ban_entry::before { font-size: 18px; }
div#cardy_extension_behind div.side_behind.left div.cardy_bans ul.ban_selection li.ban_entry::before { margin-left: var(--margin-side); }
div#cardy_extension_behind div.side_behind.right div.cardy_bans ul.ban_selection li.ban_entry::before { margin-right: var(--margin-side); }
div#cardy_extension_behind div.side_behind div.cardy_bans ul.ban_selection li.ban_entry:nth-child(1)::before { content: '1'; }
div#cardy_extension_behind div.side_behind div.cardy_bans ul.ban_selection li.ban_entry:nth-child(2)::before { content: '2'; }
div#cardy_extension_behind div.side_behind div.cardy_bans ul.ban_selection li.ban_entry:nth-child(3)::before { content: '3'; }
div#cardy_extension_behind div.side_behind div.cardy_bans ul.ban_selection li.ban_entry:nth-child(4)::before { content: '4'; }
div#cardy_extension_behind div.side_behind div.cardy_bans ul.ban_selection li.ban_entry:nth-child(5)::before { content: '5'; }
div#cardy_extension_behind div.side_behind div.cardy_bans ul.ban_selection li.ban_entry:nth-child(6)::before { content: '6'; }
div#cardy_extension_behind div.side_behind div.cardy_bans ul.ban_selection li.ban_entry:nth-child(7)::before { content: '7'; }
div#cardy_extension_behind div.side_behind div.cardy_bans ul.ban_selection li.ban_entry:nth-child(8)::before { content: '8'; }
div#cardy_extension_behind div.side_behind div.cardy_bans ul.ban_selection li.ban_entry:nth-child(9)::before { content: '9'; }
div#cardy_extension_behind div.side_behind div.cardy_bans ul.ban_selection li.ban_entry:nth-child(10)::before { content: '10'; }
div#cardy_extension_behind div.side_behind div.cardy_bans ul.ban_selection li.ban_entry:nth-child(11)::before { content: '11'; }
div#cardy_extension_behind div.side_behind div.cardy_bans ul.ban_selection li.ban_entry:nth-child(12)::before { content: '12'; }
div#cardy_extension_behind div.side_behind div.cardy_bans ul.ban_selection li.ban_entry:nth-child(13)::before { content: '13'; }
div#cardy_extension_behind div.side_behind div.cardy_bans ul.ban_selection li.ban_entry:nth-child(14)::before { content: '14'; }
div#cardy_extension_behind div.side_behind div.cardy_bans ul.ban_selection li.ban_entry:nth-child(15)::before { content: '15'; }
div#cardy_extension_behind div.side_behind div.cardy_bans ul.ban_selection li.ban_entry:nth-child(16)::before { content: '16'; }
div#cardy_extension_behind div.side_behind div.cardy_bans ul.ban_selection li.ban_entry:nth-child(17)::before { content: '17'; }
div#cardy_extension_behind div.side_behind div.cardy_bans ul.ban_selection li.ban_entry:nth-child(18)::before { content: '18'; }
div#cardy_extension_behind div.side_behind div.cardy_bans ul.ban_selection li.ban_entry:nth-child(19)::before { content: '19'; }
div#cardy_extension_behind div.side_behind div.cardy_bans ul.ban_selection li.ban_entry:nth-child(20)::before { content: '20'; }
div#cardy_extension_behind div.side_behind div.cardy_bans ul.ban_selection li.ban_entry:nth-child(21)::before { content: '21'; }
div#cardy_extension_behind div.side_behind div.cardy_bans ul.ban_selection li.ban_entry:nth-child(22)::before { content: '22'; }
div#cardy_extension_behind div.side_behind div.cardy_bans ul.ban_selection li.ban_entry:nth-child(23)::before { content: '23'; }
div#cardy_extension_behind div.side_behind div.cardy_bans ul.ban_selection li.ban_entry:nth-child(24)::before { content: '24'; }
div#cardy_extension_behind div.side_behind div.cardy_bans ul.ban_selection li.ban_entry:nth-child(25)::before { content: '25'; }
div#cardy_extension_behind div.side_behind div.cardy_bans ul.ban_selection li.ban_entry:nth-child(26)::before { content: '26'; }
div#cardy_extension_behind div.side_behind div.cardy_bans ul.ban_selection li.ban_entry:nth-child(27)::before { content: '27'; }
div#cardy_extension_behind div.side_behind div.cardy_bans ul.ban_selection li.ban_entry:nth-child(28)::before { content: '28'; }
div#cardy_extension_behind div.side_behind div.cardy_bans ul.ban_selection li.ban_entry:nth-child(29)::before { content: '29'; }
div#cardy_extension_behind div.side_behind div.cardy_bans ul.ban_selection li.ban_entry:nth-child(30)::before { content: '30'; }
div#cardy_extension_behind div.side_behind div.cardy_bans ul.ban_selection li.ban_entry:nth-child(31)::before { content: '31'; }
div#cardy_extension_behind div.side_behind div.cardy_bans ul.ban_selection li.ban_entry:nth-child(32)::before { content: '32'; }
div#cardy_extension_behind div.side_behind div.cardy_bans ul.ban_selection li.ban_entry::after { content: ''; position: absolute; display: block; top: 0; bottom: 0; left: 0; right: 0; background-image: linear-gradient(var(--diag-deg), #0000 0%, #0000 49.5%, transparent 50.5%), radial-gradient(#000A 0%, #0007 30%, transparent 70%); background-size: 100% 100%, 180% 90%; background-position: center center, var(--darkness-h-position) -430%; background-repeat: no-repeat; transition-duration: 0.2s; will-change: auto; }
div#cardy_extension_behind div.side_behind div.cardy_bans ul.ban_selection li.ban_entry:not(:empty):after { content: ''; position: absolute; display: block; top: 0; bottom: 0; left: 0; right: 0; background-image: linear-gradient(var(--diag-deg), #0009 0%, #0009 49.5%, transparent 50.5%), radial-gradient(#000A 0%, #0007 30%, transparent 70%); background-size: 100% 100%, 180% 90%; background-position: center center, var(--darkness-h-position) -430%; transition-duration: 0.4s; }
div#cardy_extension_behind div.side_behind.left div.cardy_bans ul.ban_selection li.ban_entry::after { --diag-deg: 15deg; }
div#cardy_extension_behind div.side_behind.right div.cardy_bans ul.ban_selection li.ban_entry::after { --diag-deg: -15deg; }
div#cardy_extension_behind div.side_behind div.cardy_bans ul.ban_selection li.ban_entry > div.character_wide { width: 100%; height: 100%; border-radius: 0; background-image: var(--src); background-size: var(--scale); background-position: calc(var(--ph) * var(--ph-shift)) var(--pv); -webkit-mask-image: linear-gradient(var(--mask-deg), black 0%, black 70%, transparent 100%); mix-blend-mode: hard-light; }
div#cardy_extension_behind div.side_behind.left div.cardy_bans ul.ban_selection li.ban_entry > div.character_wide { --ph-shift: 0.9; --mask-deg: 90deg; }
div#cardy_extension_behind div.side_behind.right div.cardy_bans ul.ban_selection li.ban_entry > div.character_wide { --ph-shift: 1.1; --mask-deg: 180deg; }
div#cardy_extension_behind div.side_behind div.cardy_bans ul.ban_selection li.ban_entry[data-rarity="4"] div.character_wide { background-color: #86B; }
div#cardy_extension_behind div.side_behind div.cardy_bans ul.ban_selection li.ban_entry[data-rarity="5"] div.character_wide { background-color: #C84; }
div#cardy_extension_behind div.side_behind div.cardy_bans ul.ban_selection li.ban_entry[data-rarity="5.1"] div.character_wide { background-color: #C45; }
div#cardy_extension_behind div.side_behind div.cardy_bans.additional_ban_picks { }
body:not([data-step-pick="aban"]) div#cardy_extension_behind div.side_behind div.cardy_bans.additional_ban_picks { filter: opacity(0.7); }
div#cardy_extension_behind div.side_behind div.cardy_bans.joker_ban_picks { }
body:not([data-step-pick="jban"]) div#cardy_extension_behind div.side_behind div.cardy_bans.joker_ban_picks { filter: opacity(0.7); }
body[data-cardy-ban-for="red"] div#cardy_extension_behind div.side_behind div.cardy_bans:has(ul.ban_selection:not(:empty)).red { opacity: 1; }
body[data-cardy-ban-for="blue"] div#cardy_extension_behind div.side_behind div.cardy_bans:has(ul.ban_selection:not(:empty)).blue { opacity: 1; }

div#cardy_extension_behind[data-hide="1"] div.side_behind { filter: blur(8px) opacity(0); transition-timing-function: ease; transition-duration: 0.8s; will-change: auto; }
div#cardy_extension_behind[data-hide="1"] div.side_behind div.cardy_bans { transform: translateX(var(--hide-shift)); transition-timing-function: ease; transition-duration: 0.5s; will-change: auto; }

div#cardy_extension_behind div.side_behind { --hide-shift-x: 120px; }
div#cardy_extension_behind div.side_behind.left { --hide-shift: calc(var(--hide-shift-x) * -1); }
div#cardy_extension_behind div.side_behind.right { --hide-shift: var(--hide-shift-x); }

div#cardy_extension_behind div.side_behind div.cardy_bans {
    --ban-pick-title-shadow-x-shift: 1px;
    --ban-pick-title-rotate-y-degree: 6deg;
}
div#cardy_extension_behind div.side_behind.left div.cardy_bans {
    --ban-pick-title-shadow-x: var(--ban-pick-title-shadow-x-shift);
    --ban-pick-title-rotate-y: var(--ban-pick-title-rotate-y-degree);
    --ban-pick-title-skew: -8deg, -0.1deg;
}
div#cardy_extension_behind div.side_behind.right div.cardy_bans {
    --ban-pick-title-shadow-x: calc(var(--ban-pick-title-shadow-x-shift)* -1);
    --ban-pick-title-rotate-y: calc(var(--ban-pick-title-rotate-y-degree)* -1);
    --ban-pick-title-skew: -8deg, 0.1deg;
}

/* Full width area */
div#full_behind { position: absolute; top: 0; left: 0; right: 0; overflow: visible; }
div#full_behind > div { position: absolute; }
div#full_behind div#timer_gauges { z-index: 1; top: 0; left: 0; right: 0; overflow: visible; transition-duration: 0.4s; will-change: auto; }
div#full_behind div#timer_gauges > div { position: absolute; display: table; top: 0; left: 0; right: 0; width: 100%; height: 8px; opacity: 0; transition-duration: 0.3s; transition-timing-function: ease-out; will-change: auto; }
div#full_behind div#timer_gauges > div[data-active="1"] { opacity: 1; }
div#full_behind div#timer_gauges > div > div { display: table-cell; height: 100%; transition-duration: 0.1s; will-change: auto; }
div#full_behind div#timer_gauges > div > div.gauge_elapsed {  background-color: rgba(var(--color-focusive-light) / 30%); }
div#full_behind div#timer_gauges > div > div.gauge_remains { width: 50%; background-color: rgba(var(--color-focusive) / 70%); }
div#full_behind div#timer_gauges > div > div.gauge_remains[data-impend="1"] { background-color: rgba(var(--color-focusive-dark) / 80%); }
div#full_behind div#timer_gauges > div > div.gauge_remains[data-impend="2"] { background-color: rgba(var(--color-focusive-darker) / 90%); }
div#full_behind div#timer_gauges div#neutral_side_gauge { }
div#full_behind div#timer_gauges div#neutral_side_gauge div.gauge_elapsed { background-color: rgba(var(--color-important-light) / 30%); }
div#full_behind div#timer_gauges div#neutral_side_gauge div.gauge_remains { background-color: rgba(var(--color-important) / 70%); }
div#full_behind div#timer_gauges div#neutral_side_gauge div.gauge_remains[data-impend="1"] { background-color: rgba(var(--color-important-dark) / 80%); }
body.dark div#full_behind div#timer_gauges div#neutral_side_gauge div.gauge_remains[data-impend="1"] { background-color: rgba(var(--color-important-highlighter) / 80%); }
div#full_behind div#timer_gauges div#neutral_side_gauge div.gauge_remains[data-impend="2"] { background-color: rgba(var(--color-important-darker) / 90%); }
body.dark div#full_behind div#timer_gauges div#neutral_side_gauge div.gauge_remains[data-impend="2"] { background-color: rgba(var(--color-important-highlight) / 90%); }
div#full_behind div#timer_gauges div#red_side_gauge { }
div#full_behind div#timer_gauges div#red_side_gauge div.gauge_elapsed { background-color: rgba(var(--color-side-red-light) / 30%); }
div#full_behind div#timer_gauges div#red_side_gauge div.gauge_remains { background-color: rgba(var(--color-side-red) / 70%); }
div#full_behind div#timer_gauges div#red_side_gauge div.gauge_remains[data-impend="1"] { background-color: rgba(var(--color-side-red-dark) / 80%); }
body.dark div#full_behind div#timer_gauges div#red_side_gauge div.gauge_remains[data-impend="1"] { background-color: rgba(var(--color-side-red-highlighter) / 80%); }
div#full_behind div#timer_gauges div#red_side_gauge div.gauge_remains[data-impend="2"] { background-color: rgba(var(--color-side-red-darker) / 90%); }
body.dark div#full_behind div#timer_gauges div#red_side_gauge div.gauge_remains[data-impend="2"] { background-color: rgba(var(--color-side-red-highlight) / 90%); }
div#full_behind div#timer_gauges div#blue_side_gauge { }
div#full_behind div#timer_gauges div#blue_side_gauge div.gauge_elapsed { background-color: rgba(var(--color-side-blue-light) / 30%); }
div#full_behind div#timer_gauges div#blue_side_gauge div.gauge_remains { background-color: rgba(var(--color-side-blue) / 70%); }
div#full_behind div#timer_gauges div#blue_side_gauge div.gauge_remains[data-impend="1"] { background-color: rgba(var(--color-side-blue-dark) / 80%); }
body.dark div#full_behind div#timer_gauges div#blue_side_gauge div.gauge_remains[data-impend="1"] { background-color: rgba(var(--color-side-blue-highlighter) / 80%); }
div#full_behind div#timer_gauges div#blue_side_gauge div.gauge_remains[data-impend="2"] { background-color: rgba(var(--color-side-blue-darker) / 90%); }
body.dark div#full_behind div#timer_gauges div#blue_side_gauge div.gauge_remains[data-impend="2"] { background-color: rgba(var(--color-side-blue-highlight) / 90%); }

div#full_behind div#timer_gauges[data-hide="1"] { transform: translateY(-10px); filter: blur(8px) opacity(0); }


/* Center area */
div#center_area { position: absolute; z-index: 1; --side-margin: 300px; top: 0; bottom: 0; left: var(--side-margin); right: var(--side-margin); min-width: 566px; margin: 20px auto 0; user-select: none; transition-timing-function: ease; transition-duration: 0.9s; will-change: auto; }
div#sequence_milestone { display: flex; margin: auto; justify-content: center; }
div#sequence_milestone ul#sequence_steps { display: inline-flex; flex-wrap: nowrap; flex-direction: row; list-style: none; max-height: 66px; margin: 0; padding: 0; cursor: wait; overflow: visible; }
div#sequence_milestone ul#sequence_steps li.sequence_item { position: relative; display: inline-flex; flex-wrap: nowrap; flex-direction: column; margin: 0 7.5px; text-align: center; line-height: 1; text-shadow: 0px 0px 1px #000A; transition-duration: 0.2s; transition-timing-function: ease-out; will-change: auto; }
div#sequence_milestone ul#sequence_steps li.sequence_item:hover { text-shadow: 0px 0px 8px #0005; }
div#sequence_milestone ul#sequence_steps li.sequence_item::before { content: '✧'; font-size: 24px; color: rgba(var(--color-focusive) / 0.95); background-image: radial-gradient(rgba(var(--color-focusive-lighter) / 0.6), transparent); background-repeat: no-repeat; background-position: center 55%; background-size: 35% 35%; transform: scale(1.5) translateY(-5%); }
div#sequence_milestone ul#sequence_steps li.sequence_item:not([data-current=""])::before { content: '✦'; color: rgba(var(--color-focusive-light) / 1); text-shadow: 0px 0px 5px rgba(var(--color-focusive-highlight) / 0.8); }
div#sequence_milestone ul#sequence_steps li.sequence_item:not([data-current=""])::before:hover { text-shadow: 0px 0px 10px rgba(var(--color-focusive-highlighter) / 0.92); }
div#sequence_milestone ul#sequence_steps li.sequence_item hr { position: absolute; width: 60%; margin: 28% auto 0 -50%; border-style: solid; border-width: 1px; border-radius: 100% 50%; border-color: rgba(var(--color-focusive) / 0.3); box-shadow: 0px 0px 10px 1px rgba(var(--color-focusive-highlighter) / 0.5); }
div#sequence_milestone ul#sequence_steps li.sequence_item:not([data-current=""]) hr { border-color: rgba(var(--color-focusive-lighter) / 0.6); box-shadow: 0px 0px 10px 1px rgba(var(--color-focusive-highlighter) / 0.8); }
div#sequence_milestone ul#sequence_steps li.sequence_item:first-child hr { display: none; }
div#sequence_milestone ul#sequence_steps li.sequence_item span { display: inline-flex; flex-wrap: nowrap; flex-direction: column; max-width: 40px; margin-top: 1px; font-weight: bold; perspective-origin: bottom center; perspective: 150px; transform-style: preserve-3d; }
div#sequence_milestone ul#sequence_steps li.sequence_item span::before { font-size: 24px; } 
div#sequence_milestone ul#sequence_steps li.sequence_item span::after { font-size: 18px; transition-duration: 0.3s; transition-timing-function: ease-in; will-change: auto; }
div#sequence_milestone ul#sequence_steps li.sequence_item[data-target="C"] span::after { transform: rotateX(45deg) translateY(-11px); }
div#sequence_milestone ul#sequence_steps li.sequence_item[data-target="C"][data-pick="P"] span::after { transform: rotateX(45deg) translateY(-38px); }
div#sequence_milestone ul#sequence_steps li.sequence_item[data-target="C"][data-pick="AB"] span::after { transform: rotateX(45deg) translateY(-18px); }
div#sequence_milestone ul#sequence_steps li.sequence_item[data-target="C"][data-pick="JB"] span::after { transform: rotateX(45deg) translateY(-18px); }
div#sequence_milestone ul#sequence_steps li.sequence_item[data-target="C"][data-pick="PreB"] span::after { transform: rotateX(45deg) translateY(-18px); }
div#sequence_milestone ul#sequence_steps li.sequence_item[data-target="W"] span::after { transform: rotateX(45deg) translateY(-21px); }
div#sequence_milestone ul#sequence_steps li.sequence_item:not([data-current="1"]):hover span::after { transform: rotateX(45deg) translateY(0px); }
div#sequence_milestone ul#sequence_steps li.sequence_item[data-pick="P"]:hover span::after { transform: rotateX(45deg) translateY(-21px); }
div#sequence_milestone ul#sequence_steps li.sequence_item[data-current="1"][data-target="C"] span::after { transform: rotateX(45deg) translateY(2px); }
div#sequence_milestone ul#sequence_steps li.sequence_item[data-current="1"][data-target="C"][data-pick="P"] span::after { transform: rotateX(45deg) translateY(-24px); }
div#sequence_milestone ul#sequence_steps li.sequence_item[data-current="1"][data-target="C"][data-pick="AB"] span::after { transform: rotateX(45deg) translateY(-9px); }
div#sequence_milestone ul#sequence_steps li.sequence_item[data-current="1"][data-target="C"][data-pick="JB"] span::after { transform: rotateX(45deg) translateY(-9px); }
div#sequence_milestone ul#sequence_steps li.sequence_item[data-current="1"][data-target="C"][data-pick="PreB"] span::after { transform: rotateX(45deg) translateY(-9px); }
div#sequence_milestone ul#sequence_steps li.sequence_item[data-current="1"][data-target="W"] span::after { transform: rotateX(45deg) translateY(-5px); }
div#sequence_milestone ul#sequence_steps li.sequence_item[data-current="1"][data-target="C"]:hover span::after { transform: rotateX(45deg) translateY(18px); }
div#sequence_milestone ul#sequence_steps li.sequence_item[data-current="1"][data-target="C"][data-pick="P"]:hover span::after { transform: rotateX(45deg) translateY(0px); }
div#sequence_milestone ul#sequence_steps li.sequence_item[data-current="1"][data-target="C"][data-pick="AB"]:hover span::after { transform: rotateX(45deg) translateY(9px); }
div#sequence_milestone ul#sequence_steps li.sequence_item[data-current="1"][data-target="C"][data-pick="JB"]:hover span::after { transform: rotateX(45deg) translateY(9px); }
div#sequence_milestone ul#sequence_steps li.sequence_item[data-current="1"][data-target="C"][data-pick="PreB"]:hover span::after { transform: rotateX(45deg) translateY(9px); }
div#sequence_milestone ul#sequence_steps li.sequence_item[data-current="1"][data-target="W"]:hover span::after { transform: rotateX(45deg) translateY(12px); }
div#sequence_milestone ul#sequence_steps li.sequence_item[data-side="null"] span { color: rgba(var(--plain-text-base) / 0.8); }
div#sequence_milestone ul#sequence_steps li.sequence_item[data-side="R"] span { color: rgba(var(--color-text-for-red-inactive) / 0.8); }
div#sequence_milestone ul#sequence_steps li.sequence_item[data-side="R"][data-current="1"] span { color: rgba(var(--color-text-for-red) / 0.9); }
div#sequence_milestone ul#sequence_steps li.sequence_item[data-side="R"][data-pick="P"] span::before { color: rgba(var(--color-text-for-blue-inactive) / 0.8); }
div#sequence_milestone ul#sequence_steps li.sequence_item[data-side="R"][data-pick="P"][data-current="1"] span::before { color: rgba(var(--color-text-for-blue) / 0.9); }
div#sequence_milestone ul#sequence_steps li.sequence_item[data-side="B"] span { color: rgba(var(--color-text-for-blue-inactive) / 0.8); }
div#sequence_milestone ul#sequence_steps li.sequence_item[data-side="B"][data-current="1"] span { color: rgba(var(--color-text-for-blue) / 0.9); }
div#sequence_milestone ul#sequence_steps li.sequence_item[data-side="B"][data-pick="P"] span::before { color: rgba(var(--color-text-for-red-inactive) / 0.8); }
div#sequence_milestone ul#sequence_steps li.sequence_item[data-side="B"][data-pick="P"][data-current="1"] span::before { color: rgba(var(--color-text-for-red) / 0.9); }
div#sequence_milestone ul#sequence_steps li.sequence_item[data-pick="B"] span::before { text-decoration: line-through; }
div#sequence_milestone ul#sequence_steps li.sequence_item[data-pick="AB"] span::before { text-decoration: line-through; }
div#sequence_milestone ul#sequence_steps li.sequence_item[data-pick="JB"] span::before { text-decoration: line-through; }
div#sequence_milestone ul#sequence_steps li.sequence_item[data-pick="PreB"] span::before { text-decoration: line-through; }
div#sequence_milestone ul#sequence_steps li.sequence_item[data-target="C"][data-pick="E"] span::after { content: 'PICK'; }
div#sequence_milestone ul#sequence_steps li.sequence_item[data-target="C"][data-pick="P"] span::after { content: 'PRO- FFER PICK'; }
div#sequence_milestone ul#sequence_steps li.sequence_item[data-target="C"][data-pick="B"] span::after { content: 'BAN'; }
div#sequence_milestone ul#sequence_steps li.sequence_item[data-target="C"][data-pick="AB"] span::after { content: 'Add.  BAN'; }
div#sequence_milestone ul#sequence_steps li.sequence_item[data-target="C"][data-pick="JB"] span::after { content: 'Joker BAN'; }
div#sequence_milestone ul#sequence_steps li.sequence_item[data-target="C"][data-pick="PreB"] span::after { content: 'PRE- BAN'; }
div#sequence_milestone ul#sequence_steps li.sequence_item[data-target="W"][data-pick="E"] span::after { content: 'PICK WEP'; }
div#sequence_milestone ul#sequence_steps li.sequence_item[data-target="W"][data-pick="B"] span::after { content: 'BAN WEP'; }
div#sequence_milestone ul#sequence_steps li.sequence_item[data-amount="null"] span::before { content: '?\A'; }
div#sequence_milestone ul#sequence_steps li.sequence_item[data-amount="0"] span::before { content: 'Fill\A'; }
div#sequence_milestone ul#sequence_steps li.sequence_item[data-amount="0"]:is([data-pick="AB"], [data-pick="JB"]) span::before { content: '0\A'; }
div#sequence_milestone ul#sequence_steps li.sequence_item[data-amount="1"] span::before { content: '1\A'; }
div#sequence_milestone ul#sequence_steps li.sequence_item[data-amount="2"] span::before { content: '2\A'; }
div#sequence_milestone ul#sequence_steps li.sequence_item[data-amount="3"] span::before { content: '3\A'; }
div#sequence_milestone ul#sequence_steps li.sequence_item[data-amount="4"] span::before { content: '4\A'; }
div#sequence_milestone ul#sequence_steps li.sequence_item[data-amount="5"] span::before { content: '5\A'; }
div#sequence_milestone ul#sequence_steps li.sequence_item[data-amount="6"] span::before { content: '6\A'; }
div#sequence_milestone ul#sequence_steps li.sequence_item[data-amount="7"] span::before { content: '7\A'; }
div#sequence_milestone ul#sequence_steps li.sequence_item[data-amount="8"] span::before { content: '8\A'; }
div#sequence_milestone ul#sequence_steps li.sequence_item[data-amount="9"] span::before { content: '9\A'; }
div#sequence_milestone ul#sequence_steps li.sequence_item[data-amount="10"] span::before { content: '10\A'; }
div#sequence_milestone ul#sequence_steps li.sequence_item[data-amount="11"] span::before { content: '11\A'; }
div#sequence_milestone ul#sequence_steps li.sequence_item[data-amount="12"] span::before { content: '12\A'; }
div#sequence_milestone ul#sequence_steps li.sequence_item[data-amount="13"] span::before { content: '13\A'; }
div#sequence_milestone ul#sequence_steps li.sequence_item[data-amount="14"] span::before { content: '14\A'; }
div#sequence_milestone ul#sequence_steps li.sequence_item[data-amount="15"] span::before { content: '15\A'; }
div#sequence_milestone ul#sequence_steps li.sequence_item[data-amount="16"] span::before { content: '16\A'; }
div#sequence_milestone ul#sequence_steps li.sequence_item[data-amount="17"] span::before { content: '17\A'; }
div#sequence_milestone ul#sequence_steps li.sequence_item[data-amount="18"] span::before { content: '18\A'; }
div#sequence_milestone ul#sequence_steps li.sequence_item[data-amount="19"] span::before { content: '19\A'; }
div#sequence_milestone ul#sequence_steps li.sequence_item[data-amount="20"] span::before { content: '20\A'; }
div#sequence_milestone ul#sequence_steps li.sequence_item[data-amount="21"] span::before { content: '21\A'; }
div#sequence_milestone ul#sequence_steps li.sequence_item[data-amount="22"] span::before { content: '22\A'; }
div#sequence_milestone ul#sequence_steps li.sequence_item[data-amount="23"] span::before { content: '23\A'; }
div#sequence_milestone ul#sequence_steps li.sequence_item[data-amount="24"] span::before { content: '24\A'; }
div#sequence_milestone ul#sequence_steps li.sequence_item[data-amount="25"] span::before { content: '25\A'; }
div#sequence_milestone ul#sequence_steps li.sequence_item[data-amount="26"] span::before { content: '26\A'; }
div#sequence_milestone ul#sequence_steps li.sequence_item[data-amount="27"] span::before { content: '27\A'; }
div#sequence_milestone ul#sequence_steps li.sequence_item[data-amount="28"] span::before { content: '28\A'; }
div#sequence_milestone ul#sequence_steps li.sequence_item[data-amount="29"] span::before { content: '29\A'; }
div#sequence_milestone ul#sequence_steps li.sequence_item[data-amount="30"] span::before { content: '30\A'; }
div#sequence_milestone ul#sequence_steps li.sequence_item[data-amount="31"] span::before { content: '31\A'; }
div#sequence_milestone ul#sequence_steps li.sequence_item[data-amount="32"] span::before { content: '32\A'; }
div#sequence_title { display: flex; justify-content: center; transition-duration: 1.4s; will-change: auto; }
div#sequence_title > span { min-height: 46px; margin-top: 3px; margin-bottom: 0; padding: 0 40px; color: rgba(var(--sequence-title-text-color)); background-image: radial-gradient(rgba(var(--color-focusive-light) / var(--sequence-title-background-strength)) 0%, rgba(var(--color-focusive-light) / var(--sequence-title-background-strength)) 20%, transparent 70%); background-repeat: no-repeat; background-position: center 70%; background-size: 100% 50%; font-size: 30px; font-weight: bold; line-height: 1em; text-shadow: 0px 0px 1px rgb(var(--bgcolor-base)); animation: bg_blink2 infinite 1.25s ease-out alternate; will-change: auto; }

div.pick_pool { margin: 8px; --char-icon-size: 64px; --char-card-width-max: 60px; --char-card-height-max: 90px; }

div#simple_ban_card_pool { --grade-divider-border-width: 12px; height: 600px; margin: 28px 0 16px; }
body:not([data-rule-type="ban card"]) div#simple_ban_card_pool { display: none; }
div#simple_ban_card_pool div.ban_card_grade_area { position: relative; --icon-src-size: 64px; margin: 10px 0; border-top: dotted 0px var(--plain-text-color); transition-duration: 0.3s; transition-timing-function: ease; will-change: auto; }
div#simple_ban_card_pool div.ban_card_grade_area.global_banned { position: absolute; z-index: 1; top: 350px; right: -100px; width: fit-content; /* width: -webkit-fill-available; height: 0px; margin: -20px auto 0 !important; */ will-change: auto; }
div#center_area[data-wide="1"] div#simple_ban_card_pool div.ban_card_grade_area.global_banned { right: 0; }
div#simple_ban_card_pool div.ban_card_grade_area.global_banned:hover { /* translate: 0 -76px; */ transition-duration: 0.5s; }
div#simple_ban_card_pool div.ban_card_grade_area.global_banned::before { content: attr(data-area-title); position: absolute; top: 0; bottom: 0; left: -64px; width: max-content; height: fit-content; margin: auto; color: rgba(var(--plain-text-color) / 80%); font-size: 16px; font-weight: bold; text-shadow: 0 0 6px rgb(var(--color-important)); rotate: 270deg; }
div#simple_ban_card_pool[data-league="0"] div.ban_card_grade_area[data-ban-card-grade="0"] { border-top-width: var(--grade-divider-border-width); }
div#simple_ban_card_pool[data-league="1"] div.ban_card_grade_area[data-ban-card-grade="1"] { border-top-width: var(--grade-divider-border-width); }
div#simple_ban_card_pool[data-league="2"] div.ban_card_grade_area[data-ban-card-grade="2"] { border-top-width: var(--grade-divider-border-width); }
div#simple_ban_card_pool[data-league="3"] div.ban_card_grade_area[data-ban-card-grade="3"] { border-top-width: var(--grade-divider-border-width); }
div#simple_ban_card_pool[data-league="4"] div.ban_card_grade_area[data-ban-card-grade="4"] { border-top-width: var(--grade-divider-border-width); }
div#simple_ban_card_pool[data-league="5"] div.ban_card_grade_area[data-ban-card-grade="5"] { border-top-width: var(--grade-divider-border-width); }
div#simple_ban_card_pool[data-league="6"] div.ban_card_grade_area[data-ban-card-grade="6"] { border-top-width: var(--grade-divider-border-width); }
div#simple_ban_card_pool div.ban_card_grade_area ul.each_grade_pool { position: relative; display: flex; flex-wrap: wrap; height: fit-content; padding: 0; justify-content: center; }
div.pick_pool[data-char-visual-res-type="vcut"]#simple_ban_card_pool { margin: 12px 0 16px; }
div.pick_pool[data-char-visual-res-type="vcut"]#simple_ban_card_pool div.ban_card_grade_area { margin: 0; }
div.pick_pool[data-char-visual-res-type="vcut"]#simple_ban_card_pool div.ban_card_grade_area ul.each_grade_pool { margin: 0; flex-wrap: nowrap; }

div#ban_card_pool { --area-width: 1024px; --char-icon-size: 64px; --upper-tier-margin: 0 auto; --upper-tier-border-style: outset; --upper-tier-border-width: 5px 2px; --upper-tier-border-color: rgba(var(--color-important-darker) / 90%); --upper-tier-filter: brightness(1.04) drop-shadow(2px 4px 6px rgba(var(--main-color) / 75%)); position: relative; display: flex; flex-direction: row; flex-wrap: wrap; height: 600px; min-width: 1190px; margin: -15px max(-140px, calc((100% - 1190px) / 2)) 108px; overflow: visible; }
div#ban_card_pool { display: none; }
body:not([data-rule-type="ban card"]) div#ban_card_pool { display: none; }
div#ban_card_pool div.element_icons { --element-icon-size: 144px; position: absolute; display: flex; flex-direction: row; flex-wrap: nowrap; top: 92px; bottom: 0; left: 0; right: 0; width: var(--area-width); height: fit-content; margin: auto; }
div#ban_card_pool div.element_icons div.element_icon_area { position: relative; left: 0; right: 0; width: fit-content; height: fit-content; margin: 4px auto; }
div#ban_card_pool div.element_icons div.element_icon_area img { width: var(--element-icon-size); height: var(--element-icon-size); filter: drop-shadow(0 4px 4px #000C); opacity: 0.85; }
div#ban_card_pool div.ban_card_grade_area { position: relative; display: inline-flex; flex-direction: column; flex-wrap: nowrap; min-width: var(--area-width); margin: 1px auto; padding: 1px 2px; border: groove #8884; border-width: 3px 1px; border-radius: 32px; background-color: rgba(var(--color-focusive-lighter) / 5%); box-shadow: inset 0px 0px 4px 1px rgba(var(--color-focusive-light) / 40%), 1px 2px 6px 0.25px rgba(var(--color-important-darker) / 70%); transition-duration: 0.3s; transition-timing-function: ease; will-change: auto; }
div#ban_card_pool[data-league="0"] div.ban_card_grade_area[data-ban-card-grade="1"] { margin: var(--upper-tier-margin); border-style: var(--upper-tier-border-style); border-width: var(--upper-tier-border-width); border-color: var(--upper-tier-border-color); filter: var(--upper-tier-filter); }
div#ban_card_pool[data-league="1"] div.ban_card_grade_area[data-ban-card-grade="2"] { margin: var(--upper-tier-margin); border-style: var(--upper-tier-border-style); border-width: var(--upper-tier-border-width); border-color: var(--upper-tier-border-color); filter: var(--upper-tier-filter); }
div#ban_card_pool[data-league="2"] div.ban_card_grade_area[data-ban-card-grade="3"] { margin: var(--upper-tier-margin); border-style: var(--upper-tier-border-style); border-width: var(--upper-tier-border-width); border-color: var(--upper-tier-border-color); filter: var(--upper-tier-filter); }
div#ban_card_pool[data-league="3"] div.ban_card_grade_area[data-ban-card-grade="4"] { margin: var(--upper-tier-margin); border-style: var(--upper-tier-border-style); border-width: var(--upper-tier-border-width); border-color: var(--upper-tier-border-color); filter: var(--upper-tier-filter); }
div#ban_card_pool[data-league="4"] div.ban_card_grade_area[data-ban-card-grade="5"] { margin: var(--upper-tier-margin); border-style: var(--upper-tier-border-style); border-width: var(--upper-tier-border-width); border-color: var(--upper-tier-border-color); filter: var(--upper-tier-filter); }
div#ban_card_pool[data-league="5"] div.ban_card_grade_area[data-ban-card-grade="6"] { margin: var(--upper-tier-margin); border-style: var(--upper-tier-border-style); border-width: var(--upper-tier-border-width); border-color: var(--upper-tier-border-color); filter: var(--upper-tier-filter); }
div#ban_card_pool[data-league="6"] div.ban_card_grade_area[data-ban-card-grade="7"] { margin: var(--upper-tier-margin); border-style: var(--upper-tier-border-style); border-width: var(--upper-tier-border-width); border-color: var(--upper-tier-border-color); filter: var(--upper-tier-filter); }
div#ban_card_pool div.ban_card_grade_area div.each_grade_rarity_area { position: relative; display: flex; flex-direction: row; flex-wrap: nowrap; width: var(--area-width); margin: auto; }
div#ban_card_pool div.ban_card_grade_area div.each_grade_rarity_area div.each_grade_element_area { position: relative; display: block; flex-grow: 1; max-width: calc(100% / 7); min-width: calc(var(--char-icon-size) * 2); }
div#ban_card_pool div.ban_card_grade_area div.each_grade_rarity_area[data-rarity="5"] div.each_grade_element_area { }
div#ban_card_pool div.ban_card_grade_area div.each_grade_rarity_area[data-rarity="4"] div.each_grade_element_area {  }
div#ban_card_pool div.ban_card_grade_area div.each_grade_element_area ul.each_grade_element_pool { position: relative; display: flex; flex-direction: row; width: 100%; height: 100%; margin: 0 auto; padding: 0; justify-content: center; align-content: flex-start; }
div#ban_card_pool div.ban_card_grade_area div.each_grade_rarity_area[data-rarity="5"] div.each_grade_element_area ul.each_grade_element_pool { flex-wrap: wrap-reverse; bottom: 0; }
div#ban_card_pool div.ban_card_grade_area div.each_grade_rarity_area[data-rarity="4"] div.each_grade_element_area ul.each_grade_element_pool { flex-wrap: wrap; top: 0; }
div#ban_card_pool div.ban_card_grade_area div.middle_position_holder { position: relative; display: flex; flex-direction: row; flex-wrap: nowrap; flex-grow: 1; z-index: 1; height: fit-content; }
div#ban_card_pool div.ban_card_grade_area div.middle_position_holder > div.each_grade_element_area { margin: auto; }
div#ban_card_pool div.ban_card_grade_area div.middle_position_holder > div.each_grade_element_area ul.each_grade_element_pool { width: auto; height: auto; }

/* div#elements_pool { position: relative; display: flex; flex-direction: row; flex-wrap: wrap; height: 580px; max-width: 1280px; margin: 8px auto; overflow: visible; } */
div#elements_pool { --extend: 110px; position: relative; display: flex; flex-direction: row; flex-wrap: wrap; left: calc(var(--extend) / 2 * -1); right: calc(var(--extend) / 2 * -1); width: calc(100% + var(--extend)); height: 610px; max-width: 1428px; margin: 8px auto; overflow: visible; transition-timing-function: ease; transition-duration: 0.9s; will-change: auto; }
body:not([data-rule-type="extra"], [data-rule-type="cardy"]) div#elements_pool { display: none; }
div#center_area[data-wide="1"] div#elements_pool { left: 0; right: 0; }
div#elements_pool div.pool_element_area { --pool-width: 204px; position: relative; display: flex; flex-direction: column; flex-wrap: nowrap; flex-grow: 1; height: 100%; max-width: calc(100% / 7); }
div#elements_pool div.pool_element_area:not([data-element="switchable"]) { width: var(--pool-width); }
div#elements_pool div.pool_element_area div.element_icon_area { --icon-size: 64px; --adjust-height: -50px; --height: calc(var(--icon-size) + var(--adjust-height)); position: relative; left: 0; right: 0; width: fit-content; height: var(--height); margin: 4px auto; }
div#elements_pool div.pool_element_area div.element_icon_area img { translate: 0 calc(var(--adjust-height) / 2); filter: drop-shadow(0 4px 4px #000C); }
div#elements_pool div.pool_element_area div.each_element_pool_area { position: relative; display: block; flex-grow: 1; height: -webkit-fill-available; }
div#elements_pool[data-char-visual-res-type="icon"] div.pool_element_area div.each_element_pool_area[data-rarity="5"] { min-height: calc(var(--char-icon-size) * 3); }
div#elements_pool[data-char-visual-res-type="vcut"] div.pool_element_area div.each_element_pool_area[data-rarity="5"] { min-height: calc(var(--char-card-height-max) * 3); }
div#elements_pool div.pool_element_area div.each_element_pool_area[data-rarity="4"] {  }
div#elements_pool div.pool_element_area div.each_element_pool_area ul.each_element_pool { position: relative; display: flex; flex-direction: row; width: 100%; height: 100%; margin: 0 auto; padding: 0; justify-content: center; align-content: flex-start; }
div#elements_pool div.pool_element_area div.each_element_pool_area[data-rarity="5"] ul.each_element_pool { flex-wrap: wrap-reverse; bottom: 0; min-height: calc(var(--char-icon-size) * 3); }
div#elements_pool div.pool_element_area div.each_element_pool_area[data-rarity="4"] ul.each_element_pool { flex-wrap: wrap; top: 0; }
div#elements_pool div.pool_element_area[data-element="switchable"] { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 0; max-width: unset; margin: auto; }
div#elements_pool[data-char-visual-res-type="icon"] div.pool_element_area[data-element="switchable"] div.each_element_pool_area { position: absolute; top: calc(var(--char-icon-size) / 2 * -1); height: auto; }
div#elements_pool[data-char-visual-res-type="vcut"] div.pool_element_area[data-element="switchable"] div.each_element_pool_area { position: absolute; top: calc(((var(--char-card-height-max) / 2) + 4px) * -1); height: auto; transition-timing-function: ease; transition-duration: 0.5s; will-change: auto; }
div#elements_pool[data-char-visual-res-type="icon"] div.pool_element_area[data-element="switchable"] div.each_element_pool_area[data-treveler="0"] { left: calc(var(--char-icon-size) * -1); }
div#elements_pool[data-char-visual-res-type="icon"] div.pool_element_area[data-element="switchable"] div.each_element_pool_area[data-treveler="1"] { right: calc(var(--char-icon-size) * -1); }
div#elements_pool[data-char-visual-res-type="vcut"] div.pool_element_area[data-element="switchable"] div.each_element_pool_area[data-treveler="0"] { left: calc((var(--char-icon-size) + 4px) * -1); }
div#elements_pool[data-char-visual-res-type="vcut"] div.pool_element_area[data-element="switchable"]:not(:hover) div.each_element_pool_area[data-treveler="0"] { left: -24px; }
div#elements_pool[data-char-visual-res-type="vcut"] div.pool_element_area[data-element="switchable"] div.each_element_pool_area[data-treveler="1"] { right: calc((var(--char-icon-size) + 4px) * -1); }
div#elements_pool[data-char-visual-res-type="vcut"] div.pool_element_area[data-element="switchable"]:not(:hover) div.each_element_pool_area[data-treveler="1"] { right: -24px; }
div#elements_pool div.pool_element_area[data-element="switchable"] div.each_element_pool_area ul.each_element_pool { width: auto; height: auto; }
div#elements_pool div.pool_element_area[data-element="switchable"] div.each_element_pool_area[data-treveler="0"] ul.each_element_pool { }
div#elements_pool div.pool_element_area[data-element="switchable"] div.each_element_pool_area[data-treveler="1"] ul.each_element_pool { }
div#elements_pool div.pool_element_area:not([data-element="switchable"]) div.each_element_pool_area ul.each_element_pool:has(> li.character:nth-of-type(10)) li.character:has(~li.character:nth-of-type(9)) { width: calc(var(--char-card-width-max) * 3 / 5); translate: calc((var(--char-card-width-max) / 5) * -1) 0; }
div#elements_pool div.pool_element_area:not([data-element="switchable"]) div.each_element_pool_area ul.each_element_pool:has(> li.character:nth-of-type(12)) li.character:nth-of-type(8)~li.character { width: calc(var(--char-card-width-max) * 3 / 5); translate: calc((var(--char-card-width-max) / 5) * -1) 0; }
div#elements_pool div.pool_element_area:not([data-element="switchable"]) div.each_element_pool_area ul.each_element_pool:has(> li.character:nth-of-type(13)) li.character:has(~li.character:nth-of-type(11)) { width: calc(var(--char-card-width-max) * 10 / 23); translate: calc((var(--char-card-width-max) / 3.6) * -1) 0; }
div#elements_pool div.pool_element_area:not([data-element="switchable"]) div.each_element_pool_area ul.each_element_pool:has(> li.character:nth-of-type(13)) li.character:nth-of-type(10)~li.character { width: var(--char-card-width-max); translate: 0 0; }
div#elements_pool div.pool_element_area:not([data-element="switchable"]) div.each_element_pool_area ul.each_element_pool:has(> li.character:nth-of-type(14)) li.character:nth-of-type(10)~li.character { width: calc(var(--char-card-width-max) * 3 / 5); translate: calc((var(--char-card-width-max) / 5) * -1) 0; }
div#elements_pool div.pool_element_area:not([data-element="switchable"]) div.each_element_pool_area ul.each_element_pool:has(> li.character:nth-of-type(15)) li.character:nth-of-type(10)~li.character { width: calc(var(--char-card-width-max) * 10 / 23); translate: calc((var(--char-card-width-max) / 3.6) * -1) 0; }

div#cost_pool { }
body:not([data-rule-type="cost"], [data-rule-type="preban"]) div#cost_pool { display: none; }
div#cost_pool div.pool_cost_area { position: relative; margin-top: -12px; --cost-icon-height: 26px; --icon-size: 44px; --icon-src-size: 64px; }
div#cost_pool div.pool_cost_area > * { z-index: 1; }
div#cost_pool div.pool_cost_area div.cost_title_area { position: absolute; left: 0; right: 0; width: fit-content; margin: auto; margin-top: calc(var(--cost-icon-height) * -1); transform-style: preserve-3d; perspective-origin: bottom center; perspective: 100px; }
div#cost_pool div.pool_cost_area ul.cost_title { position: relative; display: inline-flex; margin: 0; padding: 0; transform-style: preserve-3d; perspective-origin: bottom left; perspective: 175px; filter: drop-shadow(2px 4px 2px #000D); transition-duration: 0.4s; transition-timing-function: ease; will-change: auto; cursor: grabbing; }
div#cost_pool div.pool_cost_area:hover ul.cost_title { z-index: 100; /* transform: translateY(-10px) translateZ(20px); */ transform: translateY(-18px) scale(1.25); filter: drop-shadow(8px 10px 10px #0008) brightness(1.1); }
div#cost_pool div.pool_cost_area ul.cost_title:active { cursor: pointer; }
div#cost_pool div.pool_cost_area ul.cost_title > li.cost_icon { display: block; width: var(--icon-size); height: var(--icon-size); margin: 0 10px; background-image: var(--icon-cost); background-repeat: no-repeat; background-position: center; background-size: var(--icon-src-size); transition-duration: 0.3s; transition-timing-function: ease-out; will-change: auto; }
div#cost_pool div.pool_cost_area ul.cost_title > li.cost_icon:hover { transform: rotateX(6deg) rotateY(10deg); filter: brightness(0.97); }
div#cost_pool div.pool_cost_area ul.cost_title > li.cost_icon:active { animation: jumpYr 0.075s ease-out 2 alternate; }
div#cost_pool div.pool_cost_area ul.cost_title > li ~ li.cost_icon { margin-left: -28px; }
div#cost_pool div.pool_cost_area ul.cost_title > li:nth-child(1) { z-index: 1; }
div#cost_pool div.pool_cost_area ul.cost_title > li:nth-child(2) { z-index: 2; }
div#cost_pool div.pool_cost_area ul.cost_title > li:nth-child(3) { z-index: 3; }
div#cost_pool div.pool_cost_area ul.cost_title > li:nth-child(4) { z-index: 4; }
div#cost_pool div.pool_cost_area ul.cost_title > li:nth-child(5) { z-index: 5; }
div#cost_pool div.pool_cost_area ul.cost_title > li:nth-child(6) { z-index: 6; }
div#cost_pool div.pool_cost_area ul.cost_title > span { z-index: 99; color: #FE9; font-family: 'Lato'; font-size: 48px; font-weight: bold; text-shadow: 0 0 6px #861; line-height: 42px; filter: drop-shadow(2px 2px 2px #000A); }
div#cost_pool div.pool_cost_area ul.cost_title > li+span { margin-left: -24px; }
div#cost_pool div.pool_cost_area div.each_cost_pool_area { position: relative; width: 100%; }
div#cost_pool div.each_cost_pool_area.global_banned { position: absolute; z-index: 1; top: 120px; right: 8px; width: fit-content; /* width: -webkit-fill-available; height: 0px; margin: -20px auto 0 !important; */ transition-timing-function: ease; transition-duration: 0.5s; will-change: auto; }
div#center_area[data-wide="1"] div#cost_pool div.each_cost_pool_area.global_banned { top: unset; bottom: -16px; right: 0; }
div#cost_pool div.each_cost_pool_area.global_banned:hover { /* translate: 0 -76px; */ transition-duration: 0.5s; }
div#cost_pool div.each_cost_pool_area.global_banned::before { content: attr(data-area-title); position: absolute; top: -16px; bottom: 0; left: -64px; width: max-content; height: fit-content; margin: auto; color: rgba(var(--plain-text-base) / 80%); font-size: 16px; font-weight: bold; text-shadow: 0 0 6px rgb(var(--color-important)); rotate: 270deg; transition-duration: 0.5s; will-change: auto; }
div#cost_pool ul.each_cost_pool { position: relative; z-index: 10; display: flex; flex-wrap: nowrap; margin-top: calc(var(--cost-icon-height) + 10px); padding: 0; justify-content: center; }


div.block_area#sequence_block { perspective-origin: top center; }
div.block_area#sequence_block > * { transition-delay: 0.1s; transition-timing-function: ease; }
div.block_area#sequence_block:is([data-hide="1"], [data-hide="2"]) > * { transform: rotateX(-90deg) translateY(-20%) translateZ(-100px); filter: blur(8px) opacity(0); }
div#sequence_title[data-shift="1"] { transform: translateY(-60px); }
div#sequence_title[data-shift="2"] { transform: translateY(-70px); }
div.block_area#pool_block { perspective-origin: center; }
div.block_area#pool_block > * { transition-timing-function: ease; }
div.block_area#pool_block:is([data-hide="1"], [data-hide="2"]) > * { transform: translateZ(-500px); filter: blur(12px) opacity(0); }
div.block_area#pool_block[data-hide="2"] > * { transform: translateZ(-500px) scale(0); }
div.block_area#pool_block[data-shift="1"] > * { transform: translateY(-30px); }

div#underplacer { position: relative; width: 100%; height: 0; overflow: visible; }
div#unavailables { --char-icon-size: 48px; position: absolute; top: 6px; right: 96px; min-width: 144px; margin: 4px; padding: 12px; border: double 6px rgba(var(--color-negative) / 0.4); border-radius: 16px; cursor: not-allowed; transition-duration: 0.4s; transition-timing-function: ease-in; will-change: auto; }
div#unavailables:hover { border-color: rgba(var(--color-negative) / 0.7); }
div#unavailables::before { content: attr(data-title); position: absolute; display: inline-block; top: -16px; left: 10px; padding: 0 4px 1px 3px; border-radius: 10px; color: rgba(var(--color-negative-dark) / 0.9); background-color: var(--bgcolor-rgb); font-size: 18px; font-weight: bold; }
div#unavailables[data-hide="1"] { opacity: 0; }
div#unavailables ul#unallowed_pool { display: inline-flex; list-style: none; margin: 0; margin-top: 2px; padding: 0px; opacity: 1; transition-duration: 0.3s; will-change: auto; }
div#unavailables ul#unallowed_pool li.character { display: block; width: var(--char-icon-size); height: var(--char-icon-size); background-repeat: no-repeat; background-size: contain; border-radius: 12.5%; perspective: 150px; perspective-origin: top center; transform-style: preserve-3d; }
div#unavailables ul#unallowed_pool li.character > div.character_back { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; background-repeat: no-repeat; background-size: var(--char-icon-size) var(--char-icon-size); border-radius: calc(var(--char-icon-size) * 0.125); }
div#unavailables ul#unallowed_pool li.character > img.element_icon { position: absolute; top: 0; width: 12px; margin: 1px auto auto 1px; opacity: 0; transition-duration: 0.3s; transition-timing-function: ease-out; will-change: auto; }
body[data-ctrl="1"] div#unavailables ul#unallowed_pool li.character > img.element_icon { opacity: 1; }
div#unavailables ul#unallowed_pool li.character > div.character_holder { position: absolute; top: 0; bottom: 0; left: 0; right: 0; border-radius: calc(var(--char-icon-size) * 0.125); overflow: hidden; }
div#unavailables ul#unallowed_pool li.character > div.character_holder img.character_icon { width: 100%; height: 100%; transition-duration: 0.4s; transition-timing-function: ease-out; will-change: auto; }
div#unavailables ul#unallowed_pool li.character[data-rarity="4"] div.character_back { background-image: var(--character-bg-class-4); }
div#unavailables ul#unallowed_pool li.character[data-rarity="5"] div.character_back { background-image: var(--character-bg-class-5); }
div#unavailables ul#unallowed_pool li.character[data-rarity="5.1"] div.character_back { background-image: var(--character-bg-class-5-1); }
div#unavailables ul#unallowed_pool li.character:hover > div.character_holder { }
div#unavailables ul#unallowed_pool li.character:hover > div.character_holder img.character_icon { transform: scale(1.3) translateY(12%); }
div#unavailables ul#unallowed_pool li.character span.name_tag { position: absolute; display: block; bottom: 0; left: 0; right: 0; padding: 4px 0; color: rgba(var(--bgcolor-base) / 90%); background-color: rgba(var(--main-color) / 50%); font-family: 'Noto Sans KR'; font-weight: bold; font-size: 12px; line-height: 10px; text-align: center; text-shadow: 0 0 2px rgb(var(--main-color)); word-break: keep-all; box-shadow: 0 0 4px 0 rgba(var(--main-color) / 50%); opacity: 0; transition-duration: 0.3s; transition-timing-function: ease-out; will-change: auto; }
body[data-ctrl="1"] div#unavailables ul#unallowed_pool li.character span.name_tag { opacity: 1; }


div#player_info_op_cp { --center-area-size: 320px; --center-area-cutoff: var(--center-area-size); position: relative; top: 8px; left: 0; right: 0; margin: 0 0; /* transition-duration: 0.27s; */ }
div#player_info_op_cp div.player_info_side { --margin-outside: 72px; --margin-innerside: 112px; --inter-padding: 4px; display: flex; flex-wrap: nowrap; position: absolute; top: 0px; width: calc(((100% - var(--center-area-cutoff)) / 2) - var(--margin-innerside)); margin: 0 auto; font-size: 18px; }
div#player_info_op_cp div.player_info_side.red { flex-direction: row-reverse; left: var(--margin-outside); }
div#player_info_op_cp div.player_info_side.blue { flex-direction: row; right: var(--margin-outside); }

div#player_info_op_cp div.player_info_side div.info_side { display: flex; flex-wrap: nowrap; flex-direction: column; width: 160px; }
div#player_info_op_cp div.player_info_side.red div.info_side { margin-left: var(--inter-padding); }
div#player_info_op_cp div.player_info_side.blue div.info_side { margin-right: var(--inter-padding); }
div#player_info_op_cp div.player_info_side div.info_side > * { display: block; }
div#player_info_op_cp div.player_info_side div.info_side div { width: 100%; }
div#player_info_op_cp div.player_info_side div.info_side div.info_line { display: flex; flex-wrap: nowrap; }
div#player_info_op_cp div.player_info_side.red div.info_side div.info_line { flex-direction: row; }
div#player_info_op_cp div.player_info_side.blue div.info_side div.info_line { flex-direction: row-reverse; }
div#player_info_op_cp div.player_info_side div.info_side button { border: 1px solid rgba(var(--main-color) / 60%); border-radius: 3px; background-color: rgba(var(--main-color) / 15%); color: rgba(var(--main-color) / 80%); transition-duration: 0.2s; will-change: auto; }
div#player_info_op_cp div.player_info_side div.info_side button:focus { outline-color: rgba(var(--signature-color) / 80%); }
div#player_info_op_cp div.player_info_side div.info_side button:hover { background-color: rgba(var(--main-color) / 25%); box-shadow: 0 0 6px 0 rgba(var(--signature-color-light) / 90%); }
div#player_info_op_cp div.player_info_side div.info_side button:active { background-color: rgba(var(--main-color) / 45%); }
div#player_info_op_cp div.player_info_side div.info_side button.player_profile_select { cursor: pointer; }
div#player_info_op_cp div.player_info_side div.info_side button.player_profile_select[data-active="1"] { background-color: rgb(var(--signature-color-lighter)); }
div#player_info_op_cp div.player_info_side div.info_side button.player_profile_select span.info_title { display: inline-flex; width: 54px; font-size: 20px; font-weight: bold; line-height: 18px; justify-content: center; }
div#player_info_op_cp div.player_info_side div.info_side button.player_profile_select[data-active="1"] span.info_title { color: rgb(var(--signature-color-darker)); }
div#player_info_op_cp div.player_info_side div.info_side button.player_info_clear { padding: 2px; color: rgba(var(--signature-color) / 90%); font-size: 17px; line-height: 20px; text-shadow: 0.5px 0.5px 1px rgba(var(--signature-color-darker) / 90%), -0.5px -0.5px 1px rgba(var(--signature-color-lighter) / 90%); }
div#player_info_op_cp div.player_info_side div.info_side button.player_info_clear:before { content: /*'×'*/'🗑️'; }
div#player_info_op_cp div.player_info_side div.info_side *:is(input, textarea) { border: 1px solid rgba(var(--main-color) / 80%); border-radius: 3px; background-color: rgba(var(--bgcolor-base) / 60%); color: rgba(var(--main-color) / 80%); transition-duration: 0.2s; will-change: auto; }
div#player_info_op_cp div.player_info_side div.info_side *:is(input, textarea):focus { background-color: rgba(var(--main-color) / 10%); outline-color: rgba(var(--signature-color) / 80%); }
div#player_info_op_cp div.player_info_side div.info_side input:hover:not([type="radio"]), div#player_info_op_cp div.player_info_side div.info_side textarea:hover { background-color: rgba(var(--main-color) / 20%); box-shadow: 0 0 6px 0 rgba(var(--signature-color-light) / 90%); }
div#player_info_op_cp div.player_info_side div.info_side input:active:not([type="radio"]), div#player_info_op_cp div.player_info_side div.info_side textarea:active { background-color: rgba(var(--signature-color) / 20%); }
div#player_info_op_cp div.player_info_side div.info_side input:hover[type="radio"] { filter: drop-shadow(0 0 3px rgba(var(--signature-color-light) / 90%)); }
div#player_info_op_cp div.player_info_side div.info_side input { font-size: 18px; line-height: 1.1em; }
div#player_info_op_cp div.player_info_side.red div.info_side input { text-align: right; }
div#player_info_op_cp div.player_info_side.blue div.info_side input { text-align: left; }
div#player_info_op_cp div.player_info_side div.info_side input.info_item[type=text] { color: rgba(var(--signature-color) / 90%); font-size: 21px; font-weight: bold; line-height: 22px; text-align: center; text-shadow: 1px 1px 1px rgba(var(--signature-color-darker) / 30%); }
div#player_info_op_cp div.player_info_side div.info_side input.info_ap { width: inherit; }
div#player_info_op_cp div.player_info_side div.info_side input.info_name { }
div#player_info_op_cp div.player_info_side div.info_side input.info_uid { }
div#player_info_op_cp div.player_info_side div.info_side div.info_treveler { margin: 0 -4px; text-align: center; white-space: nowrap; }
div#player_info_op_cp div.player_info_side div.info_side div.info_treveler input[type=radio] { }
div#player_info_op_cp div.player_info_side div.info_side div.info_treveler label { cursor: pointer; }
div#player_info_op_cp div.player_info_side div.info_side button.info_copy { margin-top: 4px; }
div#player_info_op_cp div.player_info_side div.info_side textarea { }
div#player_info_op_cp div.player_info_side div.info_side textarea.info_code { margin-bottom: 4px; color: rgba(var(--signature-color) / 90%); line-height: 15px; text-shadow: 1px 1px 1px rgba(var(--signature-color-darker) / 20%); }
div#player_info_op_cp div.player_info_side div.info_side div.info_add { position: relative; display: flex; flex-wrap: nowrap; flex-direction: row; }
div#player_info_op_cp div.player_info_side div.info_side div.info_add > :is(span, label) { line-height: 24px; }
div#player_info_op_cp div.player_info_side div.info_side div.info_add > span:before { line-height: 24px; }
div#player_info_op_cp div.player_info_side div.info_side div.info_add > span:after { line-height: 24px; }
div#player_info_op_cp div.player_info_side div.info_side div.info_add label.line_title { display: flex; min-width: 36px; margin-right: 3px; color: var(--plain-text-rgb); font-weight: normal; word-break: keep-all; overflow: visible; transition-duration: 0.5s; will-change: auto; }
div#player_info_op_cp div.player_info_side div.info_side div.info_add.sum label.line_title { font-weight: bold; letter-spacing: -0.5px; white-space: nowrap; }
div#player_info_op_cp div.player_info_side div.info_side div.info_add:focus-within label.line_title { color: rgba(var(--signature-color) / 90%); font-weight: bold; }
div#player_info_op_cp div.player_info_side div.info_side div.info_add input.addition { width: 42px; text-align: right; }
div#player_info_op_cp div.player_info_side div.info_side div.info_add input.addition.constell {}
div#player_info_op_cp div.player_info_side div.info_side div.info_add input.addition.weapon {}
div#player_info_op_cp div.player_info_side div.info_side div.info_add input.addition.refine {}
div#player_info_op_cp div.player_info_side div.info_side div.info_add input.addition.disadv { width: 57px; }
div#player_info_op_cp div.player_info_side div.info_side div.info_add input.addition.adjust { width: 47px; color: rgba(var(--signature-color) / 90%); font-weight: bold; }
div#player_info_op_cp div.player_info_side div.info_side div.info_add span.divider {}
div#player_info_op_cp div.player_info_side div.info_side div.info_add label.total_label { font-weight: bold; letter-spacing: -1.5px; }
div#player_info_op_cp div.player_info_side div.info_side div.info_add span.total_value { width: inherit; color: rgba(var(--signature-color-light) / 90%); text-align: right; text-shadow: 1px 1px 1px rgba(var(--signature-color-darker) / 90%); }
div#player_info_op_cp div.player_info_side div.info_side div.info_add label.apply_label { font-weight: bold; letter-spacing: -1.5px; }
div#player_info_op_cp div.player_info_side div.info_side div.info_add span.apply_value { width: inherit; color: rgba(var(--signature-color-light) / 90%); text-align: right; text-shadow: 1px 1px 1px rgba(var(--signature-color-darker) / 90%); }
div#player_info_op_cp div.player_info_side div.info_side div.info_add span.addition_unit { }
div#player_info_op_cp div.player_info_side div.info_side div.info_add span.addition_unit::before { content: attr(data-unit); /* position: absolute; top: 0; bottom: 2px; right: 4px; margin: auto; */ }
div#player_info_op_cp div.player_info_side div.info_side div.info_add span.ratio_unit { }
div#player_info_op_cp div.player_info_side div.info_side div.info_add span.ratio_unit::before { content: attr(data-unit); }

div#player_info_op_cp div.player_info_side div.selection_side { --margin-base: 32px; width: 100%; margin: 0 10px; --icon-area-size: 36px; --icon-size: 48px; --icon-ext: calc((var(--icon-area-size) - var(--icon-size)) / 2); --icon-radius: 32%; }
div#player_info_op_cp div.player_info_side div.selection_side div.selection_entry { position: relative; display: flex; flex-wrap: nowrap; flex-direction: row; border-radius: 12px; transition-duration: 0.15s; will-change: auto; }
div#player_info_op_cp div.player_info_side div.selection_side div.selection_entry:nth-child(odd) { margin-left: 0; }
div#player_info_op_cp div.player_info_side div.selection_side div.selection_entry:nth-child(even) { margin-left: var(--margin-base); }
div#player_info_op_cp div.player_info_side div.selection_side div.selection_entry:nth-last-child(odd) { margin-right: 0; }
div#player_info_op_cp div.player_info_side div.selection_side div.selection_entry:nth-last-child(even) { margin-right: var(--margin-base); }
div#player_info_op_cp div.player_info_side div.selection_side div.selection_entry:focus-within { z-index: 1; background-color: rgba(var(--signature-color) / 35%); box-shadow: 0 0 6px 6px rgba(var(--signature-color) / 35%); }
div#player_info_op_cp div.player_info_side div.selection_side div.selection_entry:hover { z-index: 1; background-color: rgba(var(--signature-color-lighter) / 60%); box-shadow: 0 0 6px 8px rgba(var(--signature-color-lighter) / 60%)}
div#player_info_op_cp div.player_info_side div.selection_side div.selection_entry > *:focus-within { z-index: 1; }
div#player_info_op_cp div.player_info_side div.selection_side div.selection_entry input { border: none; background-color: transparent; transition-duration: 0.2s; will-change: auto; }
div#player_info_op_cp div.player_info_side div.selection_side div.selection_entry input:focus { outline: 2px ridge rgba(var(--signature-color-dark) / 60%); }
div#player_info_op_cp div.player_info_side div.selection_side div.selection_entry input:hover { box-shadow: 0 0 2px 0 rgba(var(--signature-color-darker) / 80%); }
div#player_info_op_cp div.player_info_side div.selection_side div.selection_entry div > div > span.detected_adds { position: absolute; display: flex; width: fit-content; height: fit-content; margin: auto; color: rgba(var(--color-positive-highlighter) / 90%); font-size: 14px; font-weight: bold; text-shadow: -1px -1px 0 #666B, 1px 1px 1px rgba(var(--main-color) / 90%); transition-duration: 0.2s; will-change: auto; }
div#player_info_op_cp div.player_info_side div.selection_side div.selection_entry div.icon_inner_layer { border-radius: var(--icon-radius); filter: drop-shadow(1px 1px 4px var(--bgcolor-rgb)); }
div#player_info_op_cp div.player_info_side div.selection_side div.selection_entry div.icon_inner_layer > input { width: 18px; height: 24px; border-radius: 6px; background-color: rgba(var(--signature-color-darker) / 40%); font-size: 20px; font-weight: bold; text-align: center; text-shadow: 1px 1px 1px black; transition-duration: 0.25s; will-change: auto; }
div#player_info_op_cp div.player_info_side div.selection_side div.selection_entry div.icon_inner_layer > input:focus { width: var(--icon-size); height: var(--icon-size); border-radius: var(--icon-radius); }
div#player_info_op_cp div.player_info_side div.selection_side div.selection_entry div.entry_icon_area { position: relative; width: var(--icon-area-size); height: var(--icon-area-size); cursor: text; }
div#player_info_op_cp div.player_info_side div.selection_side div.selection_entry div.entry_icon_area div.entry_icon { position: absolute; top: var(--icon-ext); left: var(--icon-ext); width: var(--icon-size); height: var(--icon-size); background-image: var(--src); background-size: cover; background-repeat: no-repeat; box-shadow: 0 0 3px 0 rgb(var(--signature-color-darker)); filter: drop-shadow(1px 1px 1.5px #222D); }
div#player_info_op_cp div.player_info_side div.selection_side div.selection_entry div.entry_icon_area div.entry_icon span.detected_adds { top: 1px; left: 50px; }
div#player_info_op_cp div.player_info_side div.selection_side div.selection_entry div.entry_icon_area div.entry_icon input.char_constell { position: absolute; top: 0; right: 0; border-top-right-radius: var(--icon-radius); color: rgba(var(--signature-color-bright) / 90%); }
div#player_info_op_cp div.player_info_side div.selection_side div.selection_entry div.entry_icon_area div.entry_icon input.char_constell::placeholder { color: rgba(var(--signature-color-light) / 70%);  }
div#player_info_op_cp div.player_info_side div.selection_side div.selection_entry div.entry_icon_area div.entry_icon input.char_constell:focus { font-size: 42px; }
div#player_info_op_cp div.player_info_side div.selection_side div.selection_entry div.entry_icon_area div.entry_icon input.char_constell:hover { }
div#player_info_op_cp div.player_info_side div.selection_side div.selection_entry div.entry_info { position: relative; z-index: 1; width: 100%; }
div#player_info_op_cp div.player_info_side div.selection_side div.selection_entry div.entry_info input { position: absolute; width: 100%; border-radius: 4px; background-color: rgba(var(--bgcolor-base) / 40%); font-size: 16px; font-weight: bold; line-height: 17px; text-shadow: 1px 1px 1px black; ime-mode: active; transition-duration: 0.2s; will-change: auto; }
div#player_info_op_cp div.player_info_side div.selection_side div.selection_entry div.entry_info input::placeholder { color: rgba(var(--signature-color-bright) / 70%);  }
div#player_info_op_cp div.player_info_side div.selection_side div.selection_entry div.entry_info input:focus { z-index: 1; color: rgba(var(--main-color) / 90%); background-color: rgba(var(--bgcolor-base) / 90%); }
div#player_info_op_cp div.player_info_side div.selection_side div.selection_entry div.entry_info input:hover { z-index: 1; background-color: rgba(var(--bgcolor-base) / 70%); }
div#player_info_op_cp div.player_info_side div.selection_side div.selection_entry div.entry_info input.char_name { bottom: 3px; left: 8px; width: 75%; color: rgba(var(--signature-color-light) / 90%); text-align: left; }
div#player_info_op_cp div.player_info_side div.selection_side div.selection_entry[data-focus="char_constell"] div.entry_info input.char_name { transform: translateX(10px); }
div#player_info_op_cp div.player_info_side div.selection_side div.selection_entry div.entry_info input.weapon_name { top: -3px; right: -4px; width: 66%; color: rgba(var(--signature-color-lighter) / 90%); text-align: right; }
div#player_info_op_cp div.player_info_side div.selection_side div.selection_entry[data-focus="weapon_refine"] div.entry_info input.weapon_name { transform: translateY(-22px); }
div#player_info_op_cp div.player_info_side div.selection_side div.selection_entry div.entry_weapon_icon_area { position: relative; bottom: var(--icon-ext); right: var(--icon-ext); width: var(--icon-area-size); height: var(--icon-area-size); cursor: text; }
div#player_info_op_cp div.player_info_side div.selection_side div.selection_entry div.entry_weapon_icon_area div.entry_weapon_icon { position: absolute; bottom: 0; right: 0; width: var(--icon-size); height: var(--icon-size); background-image: var(--src); background-size: cover; background-repeat: no-repeat; box-shadow: 0 0 3px 0 rgb(var(--signature-color-darker)); filter: drop-shadow(4px 3px 1.5px #222D); }
div#player_info_op_cp div.player_info_side div.selection_side div.selection_entry div.entry_weapon_icon_area div.entry_weapon_icon span.detected_adds { top: -6px; right: -2px; }
div#player_info_op_cp div.player_info_side div.selection_side div.selection_entry div.entry_weapon_icon_area:focus-within div.entry_weapon_icon span.detected_adds { top: -18px; }
div#player_info_op_cp div.player_info_side div.selection_side div.selection_entry div.entry_weapon_icon_area div.entry_weapon_icon input.weapon_refine { position: absolute; top: 0; bottom: 0; right: 0; margin: auto; border-top-right-radius: var(--icon-radius); border-bottom-right-radius: var(--icon-radius); color: rgba(255 255 255 / 90%); }
div#player_info_op_cp div.player_info_side div.selection_side div.selection_entry div.entry_weapon_icon_area div.entry_weapon_icon input.weapon_refine::placeholder { color: rgba(var(--signature-color-light) / 70%);  }
div#player_info_op_cp div.player_info_side div.selection_side div.selection_entry div.entry_weapon_icon_area div.entry_weapon_icon input.weapon_refine:focus { font-size: 42px; transform: translateX(-40px); }
div#player_info_op_cp div.player_info_side div.selection_side div.selection_entry div.entry_weapon_icon_area div.entry_weapon_icon input.weapon_refine:hover { }


div#global_ban_manager { --center-area-size: 320px; --center-area-cutoff: var(--center-area-size); position: relative; top: 0; left: 0; right: 0; margin: 16px 0 0; /* transition-duration: 0.27s; */ }
div#global_ban_manager > div { --margin-outside: 72px; --margin-innerside: 112px; --inter-padding: 4px; --side-expand: 0px; position: absolute; top: 0px; width: calc(((100% - var(--center-area-cutoff)) / 2) - var(--margin-innerside) - var(--side-expand)); margin: 0 auto; font-size: 18px; }
div#global_ban_manager > div#global_ban_entries { left: var(--margin-outside); margin-left: var(--side-expand); }
div#center_area[data-wide="1"] div#global_ban_manager > div#global_ban_entries { --side-expand: -72px; }
div#global_ban_manager > div#global_ban_character_pool_filter { left: calc(((100% + var(--center-area-cutoff) + var(--margin-innerside)) / 2) - 16px); /* right: var(--margin-outside); */ margin-right: var(--side-expand); max-width: 447px; }
div#center_area[data-wide="1"] div#global_ban_manager > div#global_ban_character_pool_filter { }
div#global_ban_manager > div > div.range_wrap { position: relative; }
div#global_ban_manager > div > div.range_wrap > label { display: block; padding: 0 4px; color: rgb(var(--plain-text-base) / 85%); font-size: 20px; font-weight: bold; font-style: italic; line-height: 24px; transform: scaleY(0.9); }

div#global_ban_manager > div#global_ban_entries label { }
div#global_ban_manager > div#global_ban_entries div { }
div#global_ban_manager > div#global_ban_entries > div.range_wrap { }
div#global_ban_manager > div#global_ban_entries > div.range_wrap ul { display: flex; flex-direction: row; flex-wrap: nowrap; margin: 0; padding: 0; list-style: none; }
div#global_ban_manager > div#global_ban_entries > div.range_wrap ul > li { }
div#global_ban_manager > div#global_ban_entries > div.range_wrap button { padding: 1px 7px; border: outset 3px #888; border-radius: 12px; background-color: rgb(221 221 221 / 80%); color: rgb(0 0 0 / 80%); cursor: pointer; transition-duration: 0.2s; will-change: auto; }
div#global_ban_manager > div#global_ban_entries > div.range_wrap button:focus { outline: dashed 2px rgb(var(--color-focusive) / 90%); outline-offset: 2px; }
div#global_ban_manager > div#global_ban_entries > div.range_wrap button:hover { box-shadow: 0 0 12px -2px rgb(var(--main-color) / 80%); }
div#global_ban_manager > div#global_ban_entries > div.range_wrap button:active { border-style: groove; color: rgb(255 255 255 / 95%); }
div#global_ban_manager > div#global_ban_entries > div.range_wrap > label { }
div#global_ban_manager > div#global_ban_entries > div.range_wrap > button { }
div#global_ban_manager > div#global_ban_entries > div.range_wrap > button#clear_list_gb { position: absolute; top: 0; right: 0; }
div#global_ban_manager > div#global_ban_entries > div.range_wrap > div { }
div#global_ban_manager > div#global_ban_entries > div.range_wrap > div > ul { }
div#global_ban_manager > div#global_ban_entries > div.range_wrap > div > ul > li { }
div#global_ban_manager > div#global_ban_entries > div.range_wrap > div#picked_for_gb { }
div#global_ban_manager > div#global_ban_entries > div.range_wrap > div#picked_for_gb > ul#entry_picked_for_gb { }
div#global_ban_manager > div#global_ban_entries > div.range_wrap > div#picked_for_gb > ul#entry_picked_for_gb > li.character { cursor: alias; }
div#global_ban_manager > div#global_ban_entries > div.range_wrap > div#previous_gb { --expand-right: 25px; width: calc(100% + var(--expand-right)); height: 140px; margin: 0; padding: 0 calc(var(--expand-right) + 5px) 0 5px; overflow: visible auto; scrollbar-width: thin; }
div#global_ban_manager > div#global_ban_entries > div.range_wrap > div#previous_gb > ul#list_previous_gb { flex-wrap: wrap; justify-content: space-between; }
div#global_ban_manager > div#global_ban_entries > div.range_wrap > div#previous_gb > ul#list_previous_gb > li { position: relative; min-width: 174px; margin: 1px 5px 3px 4px; padding: 2px 0 0; }
div#global_ban_manager > div#global_ban_entries > div.range_wrap > div#previous_gb > ul#list_previous_gb > li::before { content: attr(data-date); display: block; padding: 0 2px 2px; color: rgb(var(--plain-text-base) / 75%); font-size: 18px; font-weight: bold; font-style: italic; line-height: 16px; transform: scaleY(0.9); }
div#global_ban_manager > div#global_ban_entries > div.range_wrap > div#previous_gb > ul#list_previous_gb > li > ul.each_pool_block { flex-direction: row; height: fit-content; margin: 4px 0; }
div#global_ban_manager > div#global_ban_entries > div.range_wrap > div#previous_gb > ul#list_previous_gb > li > ul.each_pool_block > li.character { scale: 0.75; margin: -7px -5px; }
div#global_ban_manager > div#global_ban_entries > div.range_wrap > div#previous_gb > ul#list_previous_gb > li > ul.each_pool_block > span { display: block; }
div#global_ban_manager > div#global_ban_entries > div.range_wrap > div#previous_gb > ul#list_previous_gb > li > button { position: absolute; top: 0; right: 0; }
div#global_ban_manager > div#global_ban_entries > div.range_wrap > div#previous_gb > ul#list_previous_gb > span { display: block; }

div#global_ban_manager > div#global_ban_character_pool_filter { }
div#global_ban_manager > div#global_ban_character_pool_filter label { }
div#global_ban_manager > div#global_ban_character_pool_filter div { }
div#global_ban_manager > div#global_ban_character_pool_filter > div.range_wrap { }
div#global_ban_manager > div#global_ban_character_pool_filter > div.range_wrap ul { display: flex; flex-direction: row; flex-wrap: nowrap; margin: 0; padding: 0; list-style: none; }
div#global_ban_manager > div#global_ban_character_pool_filter > div.range_wrap ul > li { }
div#global_ban_manager > div#global_ban_character_pool_filter > div.range_wrap > label { }
div#global_ban_manager > div#global_ban_character_pool_filter > div.range_wrap > div { }
div#global_ban_manager > div#global_ban_character_pool_filter > div.range_wrap > div.gbcp_saf_preset { display: flex; flex-direction: row; flex-wrap: nowrap; margin: 6px 2px; }
div#global_ban_manager > div#global_ban_character_pool_filter > div.range_wrap > div.gbcp_saf_preset > button.start_sequence_afp { width: 64px; margin: 0px 2px; padding: 7px 3px; border: solid 2px var(--cil); color: rgb(var(--color-important-dark) / 80%); border-radius: 6px; background-color: rgb(255 255 255 / 80%); font-size: 16px; font-weight: bold; text-align: center; line-height: 17px; cursor: pointer; transition-duration: 0.25s; will-change: auto; }
div#global_ban_manager > div#global_ban_character_pool_filter > div.range_wrap > div.gbcp_saf_preset > button.start_sequence_afp::after { content: attr(data-text-start); }
div#global_ban_manager > div#global_ban_character_pool_filter > div.range_wrap > div.gbcp_saf_preset > button.start_sequence_afp[data-started="1"]::after { content: attr(data-text-stop); }
div#global_ban_manager > div#global_ban_character_pool_filter > div.range_wrap > div.gbcp_saf_preset > button.start_sequence_afp:focus { outline: dashed 3px rgb(var(--color-focusive-light) / 85%); outline-offset: -6px; }
div#global_ban_manager > div#global_ban_character_pool_filter > div.range_wrap > div.gbcp_saf_preset > button.start_sequence_afp:hover { color: rgb(var(--color-important-light) / 80%); }
div#global_ban_manager > div#global_ban_character_pool_filter > div.range_wrap > div.gbcp_saf_preset > button.start_sequence_afp:active { color: rgb(var(--color-important-dark) / 100%); }
div#global_ban_manager > div#global_ban_character_pool_filter > div.range_wrap > div.gbcp_saf_preset > ul.preset_for_auto_filter { flex-grow: 1; margin-left: 4px; align-items: center; }
div#global_ban_manager > div#global_ban_character_pool_filter > div.range_wrap > div.gbcp_saf_preset > ul.preset_for_auto_filter > li { flex-grow: 1; margin: 0px 2px; padding: 0 1px 6px; color: var(--preset-sequence-item-color); font-weight: bold; text-align: center; text-decoration: double; text-decoration-line: underline; text-decoration-thickness: 2px; text-decoration-color: rgb(var(--color-focusive-highlighter) / 50%); cursor: pointer; transition-duration: 0.3s; will-change: auto; }
div#global_ban_manager > div#global_ban_character_pool_filter > div.range_wrap > div.gbcp_saf_preset > ul.preset_for_auto_filter > li:hover { text-decoration-color: rgb(var(--color-focusive-highlighter) / 80%); text-shadow: 0 0 5px rgb(var(--main-color) / 15%); }
div#global_ban_manager > div#global_ban_character_pool_filter > div.range_wrap > div.gbcp_saf_preset > ul.preset_for_auto_filter > li > sub { color: rgb(var(--color-focusive-dark) / 90%); font-size: 16px; letter-spacing: -1px; vertical-align: bottom; }
div#global_ban_manager > div#global_ban_character_pool_filter > div.range_wrap > div.gbcp_saf_preset > ul.preset_for_auto_filter > li > sub > span { letter-spacing: -3.2px; }
div#global_ban_manager > div#global_ban_character_pool_filter > div.range_wrap > div.gbcp_saf_preset > ul.preset_for_auto_filter > li[data-current="1"] { color: rgb(var(--color-important-light) / 95%); text-decoration: wavy; text-decoration-line: underline; text-decoration-color: rgb(var(--color-important-lighter) / 90%); text-shadow: 0.7px 1px 0 rgb(var(--color-important-darker) / 80%); }
div#global_ban_manager > div#global_ban_character_pool_filter > div.range_wrap > div.gbcp_saf_preset > ul.preset_for_auto_filter > li[data-current="1"] > sub { color: rgb(var(--color-important) / 90%); }
div#global_ban_manager > div#global_ban_character_pool_filter > div.range_wrap > div.gbcp_saf_preset > ul.preset_for_auto_filter > li { --preset-sequence-item-color: var(--cfd); }
body.dark div#global_ban_manager > div#global_ban_character_pool_filter > div.range_wrap > div.gbcp_saf_preset > ul.preset_for_auto_filter > li { --preset-sequence-item-color: var(--cf); }
div#global_ban_manager > div#global_ban_character_pool_filter > div.range_wrap > ul.filter_for_cp { margin: 6px 2px 8px; }
div#global_ban_manager > div#global_ban_character_pool_filter > div.range_wrap > ul.filter_for_cp > li { position: relative; display: block; flex-grow: 1; flex-shrink: 1; margin: 0px 2px; padding: 0 1px; border: solid 2px var(--cfh); color: rgb(var(--plain-text-base) / 80%); border-radius: 6px; font-weight: bold; text-align: center; text-wrap: nowrap; line-height: 30px; cursor: pointer; transition-duration: 0.25s; will-change: auto; }
div#global_ban_manager > div#global_ban_character_pool_filter > div.range_wrap > ul.filter_for_cp > li[data-selected="1"] { background-color: rgb(var(--filter-selected-bg-color) / 60%); border-color: var(--cf); color: rgb(var(--filter-selected-color) / 70%); }
div#global_ban_manager > div#global_ban_character_pool_filter > div.range_wrap > ul.filter_for_cp > li[data-selected="1"]:after { content: '✔️'; position: absolute; bottom: -9px; right: -9px; font-size: 18px; filter: hue-rotate(108deg) drop-shadow(-1px -1px 0 #FFFC) drop-shadow(1px 1px 0 rgb(var(--filter-selected-bg-color) / 40%)); }
div#global_ban_manager > div#global_ban_character_pool_filter > div.range_wrap > ul.filter_for_cp > li:hover { color: rgb(var(--plain-text-base) / 95%); box-shadow: 0 0 8px rgb(var(--filter-hover-shadow-color) / 60%); }
div#global_ban_manager > div#global_ban_character_pool_filter > div.range_wrap > ul.filter_for_cp > li:active { color: rgb(var(--color-important) / 100%); box-shadow: 0 0 8px rgb(var(--color-important-highlight) / 80%); }
div#global_ban_manager > div#global_ban_character_pool_filter > div.range_wrap > ul.filter_for_cp > li[data-all="1"] { flex-grow: 0; color: rgb(0 0 0 / 80%); border-color: var(--cih); background-color: rgb(255 255 255 / 75%); }
div#global_ban_manager > div#global_ban_character_pool_filter > div.range_wrap > ul.filter_for_cp > li[data-all="1"]:hover { color: rgb(0 0 0 / 95%); background-color: rgb(255 255 255 / 90%); }
div#global_ban_manager > div#global_ban_character_pool_filter > div.range_wrap > ul.filter_for_cp > li[data-all="1"]:active { color: rgb(0 0 0 / 30%); background-color: rgb(255 255 255 / 40%); }
div#global_ban_manager > div#global_ban_character_pool_filter > div.range_wrap > ul.filter_for_cp > li { --filter-selected-color: var(--color-important-darker); --filter-selected-bg-color: var(--color-important-highlight); --filter-hover-shadow-color: var(--color-focusive-dark); }
body.dark div#global_ban_manager > div#global_ban_character_pool_filter > div.range_wrap > ul.filter_for_cp > li { --filter-selected-color: var(--color-important-lighter); --filter-selected-bg-color: var(--color-important); --filter-hover-shadow-color: var(--color-focusive-light); }
div#global_ban_manager > div#global_ban_character_pool_filter > div.range_wrap > ul.filter_for_cp#gbcp_filter_element > li[data-element="switchable"] { font-size: 30px; line-height: 26px; }
div#global_ban_manager > div#global_ban_character_pool_filter > div.range_wrap > ul.filter_for_cp#gbcp_filter_element > li > img { width: 30px; transition-duration: 0.25s; will-change: auto; }
div#global_ban_manager > div#global_ban_character_pool_filter > div.range_wrap > ul.filter_for_cp#gbcp_filter_element > li:hover > img { filter: drop-shadow(0 0 2px rgb(var(--main-color) / 60%)); }


div#main_controller { display: table; margin: 30px auto 0; }
div#main_controller button:not(.text_type), div#main_controller select { margin: 8px; text-shadow: -2px -2px 2px rgba(var(--color-text-for-red) / 0.4), 2px 2px 2px rgba(var(--color-text-for-blue) / 0.4); border: none 0px; border-radius: 15px; outline-style: dashed; outline-color: #000A; box-shadow: 0 0 0 0 #000D; cursor: pointer; transition-duration: 0.3s; transition-timing-function: ease-out; will-change: auto; }
div#main_controller button:not(.text_type):hover, div#main_controller select:hover { text-shadow: -6px -4px 3px rgba(var(--color-text-for-red) / 0.3), 6px 4px 3px rgba(var(--color-text-for-blue) / 0.3); outline-width: 0px !important; outline-offset: 0px !important; box-shadow: 0 0 4px 1px #000D; }
div#main_controller button:not(.text_type):active, div#main_controller select:active { text-shadow: -8px -4px 5px rgba(var(--color-text-for-red) / 0.2), 8px 4px 5px rgba(var(--color-text-for-blue) / 0.2); box-shadow: 0 0 10px 1px #000A; }
div#main_controller button:not(.text_type) { padding: 7px 12px; }
div#main_controller div#main_actions { margin: auto; }
div#main_controller div#main_actions button.emoji_button { font-size: 26px; line-height: 26px; }
div#main_controller div#main_actions button#use_remocon { padding: 0 10px; }
div#main_controller div#main_actions button#toggle_player_info { padding: 0 10px; }
div#main_controller div#main_actions div.side_placer { position: relative; width: 0; }
div#main_controller div#main_actions div.side_placer div { position: absolute; top: 0; bottom: 0; }
div#main_controller div#main_actions div.side_placer div.left_place { right: 0; }
div#main_controller div#main_actions div.side_placer div.left_place > * { }
div#main_controller div#main_actions div.side_placer div.right_place { left: 0; }
div#main_controller div#main_actions div.side_placer div.right_place > * { }
div#main_controller div#main_actions div.side_placer div > * { }
div#main_controller div#main_actions div.side_placer div > button { padding: 7px 16px; }
div#main_controller div#main_actions div.side_placer div > button#random_picker { width: 56px; }
div#main_controller div#main_actions button { display: block; background-color: #DDD4; color: rgba(var(--color-important) / 0.9); font-size: 40px; outline-width: 4px; outline-offset: -4px; }
div#main_controller div#main_actions button#main_action { padding: 7px 28px; }
div#main_controller div#main_actions button#main_action:active { background-color: #DDD6; }
div#main_controller div#sub_actions { margin: 8px auto 0; }
div#main_controller div#sub_actions > * { display: block; outline-width: 4px; outline-offset: -4px; background-color: var(--sub_action_button_bg); color: rgba(var(--color-important-dark) / 0.9); outline-color: #222A; font-size: 24px; }
div#main_controller div#sub_actions select#rule_alter { padding: 7px 5px 7px; font-weight: bold; text-align: center; }
div#main_controller div#sub_actions button#sub_action { padding: 7px 18px; }
div#main_controller div#sub_actions button#sub_action:active { background-color: #BBB6; }
div#main_controller div { display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: center; }
div#main_controller div#extra_action { }
div#main_controller div#extra_action > * { background-color: var(--extra_action_button_bg); color: rgba(var(--color-important-darker) / 0.95); font-size: 18px; font-weight: bold; outline-width: 3px; outline-offset: -3px; }
div#main_controller div#extra_action > button:active, div#main_controller div#extra_action > select:active { background-color: #8884; }
div#main_controller div#extra_action button { }
div#main_controller div#extra_action button#settings { }
div#main_controller div#extra_action button#reset { }
div#main_controller div#extra_action select#language { height: fit-content; padding: 6px; }
div#main_controller div#search_host { min-height: 31px; padding: 6px 0 4px; }
body[data-pool-type="ban card grade complexd"] div#main_controller div#search_host { display: none; }
div#main_controller div#version_info { }
div#main_controller div#version_info span { color: var(--plain-text-color); }
div#main_controller div#tool_infos { }
div#main_controller div#tool_infos span { margin: 0 6px; }
div#main_controller div#tool_infos span button.text_type { }
div#main_controller div#tool_infos button { }
div#main_controller div#tool_infos span#popup_credits { }
div#main_controller div#tool_infos span#popup_credits button { }
div#main_controller div#tool_infos span#official_link { }
div#main_controller div#tool_infos span#official_link a { }

input#search_input { width: 220px; margin: 0; padding: 4px 8px; background-color: rgba(var(--bgcolor-base) / 0.85); border: solid 1px #666; border-radius: 14px; color: var(--plain-text-color); font-size: 18px; }
input#search_input:focus { z-index: 2100; outline: none; box-shadow: 0 0 4px 1px #888; }
input#search_input:hover { }
input#search_input:active { }
input#search_input:disabled { }


div#center_area[data-wide="1"] { --side-margin: 40px; transition-delay: 0.4s; }
div#center_area div#main_controller[data-hide="1"] { }
div#center_area div#main_controller[data-hide="1"] > * { opacity: 0; transition-duration: 0.4s; transition-timing-function: ease; will-change: auto; }
div#center_area div#main_controller[data-hide="1"] > *:is(:focus-within, :focus, :hover) { opacity: 1; }


/* middle placer */
div#left_middle_placer { position: absolute; display: inline-block; top: 0; bottom: 0; left: 0; width: 0; overflow: visible; user-select: none; }
div#left_middle_placer > div { position: absolute; left: 0; }
div#left_middle_placer > div.outer_area_gadgets { }
div#left_middle_placer > div.outer_area_gadgets { }
div#left_middle_placer div.outer_area_gadgets#side_area_toggle { top: 0; bottom: 0; width: 28px; cursor: pointer; transition-duration: 0.2s; will-change: auto; }
div#left_middle_placer div.outer_area_gadgets#side_area_toggle:hover { background-color: rgba(var(--color-focusive-light) / 60%); box-shadow: inset 0 0 4px 1px rgba(var(--color-focusive-darker) / 80%); }
div#left_middle_placer div.outer_area_gadgets#side_area_toggle:active { background-color: rgba(var(--color-focusive-highlight) / 60%); box-shadow: inset 0 0 4px 1px rgba(var(--color-focusive) / 80%); }
div#left_middle_placer div.outer_area_gadgets#side_area_toggle div { }
div#left_middle_placer div.outer_area_gadgets#side_area_toggle div.icon_indicator { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 16px; height: 32px; margin: calc(850px - 100%) auto 0; color: rgba(var(--color-important-darker) / 90%); font-size: 24px; text-align: center; line-height: 24px; transition-duration: 0.2s; will-change: auto; }
body.hideCursor div#left_middle_placer div.outer_area_gadgets#side_area_toggle div.icon_indicator { opacity: 0; }
div#left_middle_placer div.outer_area_gadgets#side_area_toggle div.icon_indicator span { }
div#left_middle_placer div.outer_area_gadgets#side_area_toggle div.icon_indicator span::before { content: "⟫"; }
div#left_middle_placer div.outer_area_gadgets#side_area_toggle[data-opened="1"] div.icon_indicator span::before { content: "⟪"; }
div#left_middle_placer div.outer_area_gadgets#side_area_toggle div.icon_indicator span::after { }


/* Player board */
div.player_board { position: absolute; display: inline-block; user-select: none; }
div.player_board div.player_info_block { transition-duration: 0.8s; will-change: auto; }
div.player_board div.player_uid { position: absolute; width: fit-content; margin-top: 4px; margin-left: var(--margin-player-uid-left); margin-right: var(--margin-player-uid-right); }
div.player_board div.player_uid > input { width: 132px; padding: 2px 4px; border-style: none; border-radius: 12px; background-color: transparent; background-image: linear-gradient(var(--side-degree-wide-up), var(--nameplate-input-background-gradient-begin), var(--nameplate-input-background-gradient-end)); background-repeat: no-repeat; background-size: 100% 0%; background-position: center 0%; color: rgba(var(--signature-color-lighter) / 0.8); font-size: 22px; font-weight: bold; font-style: italic; line-height: 1.1em; text-align: var(--proffer-side); text-shadow: 0px 0px 6px var(--bgcolor-rgb); transition-duration: 0.3s; will-change: auto; }
div.player_board div.player_uid > input:focus { outline: none; background-size: 100% 40%; background-position: center 75%; }
div.player_board div.player_uid > input::placeholder { color: #8886; }
div.player_board div.nameplate { position: absolute; width: fit-content; margin-top: 12px; margin-left: var(--margin-nameplate-left); margin-right: var(--margin-nameplate-right); }
div.player_board div.nameplate > div.plate_back { position: absolute; z-index: -1; width: 80%; height: 90%; margin: 7px -3px; overflow: hidden; transform: rotate(var(--side-degree-plate-back)); }
div.player_board div.nameplate > div.plate_back > div.plate_back_paint { width: 100%; height: 140%; margin-top: -9px; background-color: rgba(var(--signature-color) / 0.5); box-shadow: inset 5px 0px 12px 5px var(--bgcolor-rgb), inset -5px 0px 18px 4px var(--bgcolor-rgb); /* background-image: linear-gradient(180deg, transparent 0%, rgb(var(--signature-color) / 0.5) 30%, rgb(var(--signature-color) / 0.5) 70%, transparent 100%), linear-gradient(90deg, transparent 0%, rgb(var(--signature-color) / 0.5) 8%, rgb(var(--signature-color) / 0.5) 92%, transparent 100%); background-blend-mode: screen; */}
div.player_board div.nameplate > input { min-width: 300px; max-width: 450px; width: 100%; padding: 8px 22px; border-style: none; border-radius: 12px; background-color: transparent; background-image: linear-gradient(var(--side-degree-wide-up), var(--nameplate-input-background-gradient-begin), var(--nameplate-input-background-gradient-end)); background-repeat: no-repeat; background-size: 100% 0%; background-position: center 100%; color: rgb(var(--signature-color-light)); font-size: 32px; font-weight: bold; text-align: var(--side); text-shadow: 0px 0px 6px var(--bgcolor-rgb); transform: var(--nameplate-input-transform); transition-duration: 0.3s; will-change: auto; }
div.player_board div.nameplate > input:focus { outline: none; background-size: 100% 40%; background-position: center 75%; }
div.player_board div.nameplate[data-mix="1"] { }
div.player_board div.nameplate[data-mix="1"] > input { color: rgba(var(--signature-color-light) / 40%); text-shadow: 0px 0px 6px rgba(var(--bgcolor-base) / 40%); filter: blur(0.75px) opacity(0.6); }
div.player_board div.account_point { position: absolute; width: fit-content; margin-top: 52px; margin-left: var(--margin-account-point-left); margin-right: var(--margin-account-point-right); }
div.player_board div.account_point > input { width: 80px; padding: 4px 6px; border-style: none; border-radius: 12px; background-color: transparent; background-image: linear-gradient(var(--side-degree-wide-up), var(--account-point-input-background-gradient-begin), var(--account-point-input-background-gradient-end)); background-repeat: no-repeat; background-size: 100% 0%; background-position: center 100%; color: rgba(var(--signature-color) / 0.75); font-size: 28px; font-weight: bold; font-style: italic; line-height: 1.1em; text-align: var(--side); text-shadow: 0px 0px 6px var(--bgcolor-rgb); transition-duration: 0.3s; will-change: auto; }
div.player_board div.account_point > input:focus { outline: none; background-size: 100% 35%; background-position: center 45%; }
div.player_board div.account_point > input::placeholder { color: #8886; }
div.player_board div.profile_character { position: absolute; top: 0; width: 360px; height: 81px; background-color: var(--bgcolor-rgb); background-image: linear-gradient(var(--profile-char-bg-deg), transparent 0%, rgb(var(--signature-color-lighter)) 5%, rgb(var(--signature-color-darker)) ); opacity: 0; transition-duration: 0.3s; will-change: auto; }
div.player_board div.profile_character:is([data-show="1"], [data-show="2"]) { opacity: 1; }
div.player_board div.profile_character > div.character_profile { --pv-init: 0.1%; width: 100%; height: 100%; background-image: var(--src); background-repeat: no-repeat; background-size: var(--scale); -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 20%, black 80%, transparent 100%); mix-blend-mode: hard-light; transform: translateZ(120px); opacity: 0; }
div.player_board div.profile_character[data-show="1"] > div.character_profile { background-position: calc(var(--ph) + var(--ph-init)), calc(var(--pv) + var(--pv-init)); }
div.player_board div.profile_character[data-show="1"] > div.character_profile[style*="--scale"] { background-position: var(--ph) var(--pv); }
div.player_board div.profile_character[data-show="2"] > div.character_profile { background-position: var(--ph) var(--pv); transition-delay: 0.2s; transition-duration: 1s; will-change: auto; }
div.player_board div.profile_character:not([data-show=""]) > div.character_profile[style*="--scale"] { opacity: 1; }
div.player_board div.account_info { position: absolute; display: flex; top: 10px; margin: 0 2px; transition-duration: 0.2s; transition-timing-function: ease-out; will-change: auto; }
div.player_board div.account_info span { font-family: var(--font-for-emoji); opacity: 0.75; transition-duration: 0.2s; transition-timing-function: ease-out; will-change: auto; }
div.player_board div.account_info span:before { content: "🟩"; transition-duration: 0.2s; transition-timing-function: ease-out; will-change: auto; }
div.player_board div.account_info[data-filled="1"] span:before { content: "✅"; }
div.player_board div.account_info:hover span:before { content: "❎"; text-shadow: 0 0 4px rgba(var(--main-color) / 60%); }
div.player_board div.account_info:active span:before { text-shadow: 0 0 12px rgba(var(--main-color) / 80%); }
div.player_board div.entry_slots_area { position: relative; display: inline-block; margin-top: 80px; margin-left: var(--margin-entry-slot-area-left); margin-right: var(--margin-entry-slot-area-right); transform: translateZ(120px); }
div.player_board div.entry_slots_area ul.entry_slots { position: relative; z-index: 10; display: flex; flex-flow: nowrap column; list-style: none; margin: 0; padding: 0; }
div.player_board div.entry_slots_area ul.entry_slots li.entry { display: inline-flex; flex-wrap: nowrap; flex-direction: var(--flex-row-direction); transition-duration: 0.2s; will-change: auto; }
div.player_board div.entry_slots_area ul.entry_slots li.entry:hover { z-index: 1; }
div.player_board div.entry_slots_area ul.entry_slots li.entry[data-unabailable="1"] { opacity: 0.3; }
div.player_board div.entry_slots_area ul.entry_slots li.entry div.entry_icon { position: relative; width: var(--entry-char-icon-size); height: var(--entry-char-icon-size); background-color: rgba(var(--signature-color) / 0.4); border-radius: 8%; overflow: hidden; box-shadow: inset 1px 2px 3px 2px #5554, inset -1px -2px 2px 1px #eee4; transition-duration: 0.5s; will-change: auto; }
div.player_board div.entry_slots_area ul.entry_slots li.entry[data-picking="1"] div.entry_icon { background-color: rgba(var(--signature-color) / 0.7); }
div.player_board div.entry_slots_area ul.entry_slots li.entry[data-picked="1"] div.entry_icon { background-size: cover; cursor: text; }
div.player_board div.entry_slots_area ul.entry_slots li.entry[data-rarity="4"] div.entry_icon { background-image: var(--character-bg-class-4); }
div.player_board div.entry_slots_area ul.entry_slots li.entry[data-rarity="5"] div.entry_icon { background-image: var(--character-bg-class-5); }
div.player_board div.entry_slots_area ul.entry_slots li.entry[data-rarity="5.1"] div.entry_icon { background-image: var(--character-bg-class-5-1); }
div.player_board div.entry_slots_area ul.entry_slots li.entry div.entry_icon::before { position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; right: 0; margin: auto; color: rgba(var(--signature-color-dark) / 0.5333); font-size: 56px; line-height: 1.5em; text-align: center; transition-duration: 0.5s; will-change: auto; }
div.player_board div.entry_slots_area ul.entry_slots li.entry[data-picking="1"] div.entry_icon::before { color: rgba(var(--signature-color-dark) / 0.9); }
div.player_board div.entry_slots_area ul.entry_slots li.entry > div.entry_icon::before { content: attr(data-seq); }
div.player_board div.entry_slots_area ul.entry_slots li.entry[data-after-ban="1"] { margin-top: 2px; }
/* div.player_board div.entry_slots_area ul.entry_slots li.entry[data-super-pick="1"] { translate: var(--super-pick-shift) -3px; filter: drop-shadow(0 0 0 rgb(var(--signature-color-lighter))); }
div.player_board div.entry_slots_area ul.entry_slots li.entry[data-super-pick="1"] > div.entry_icon { box-shadow: 0 0 5px 4px rgb(var(--signature-color-lighter)); }
div.player_board div.entry_slots_area ul.entry_slots li.entry[data-super-pick="1"] > div.entry_icon::before { content: 'S'; } */
div.player_board div.entry_slots_area ul.entry_slots li.entry[data-super-pick="1"] { }
div.player_board div.entry_slots_area ul.entry_slots li.entry[data-super-pick="1"] > div.entry_icon { margin-left: var(--de-margin-left); margin-right: var(--de-margin-right); width: 254px; height: 84px; border-radius: 0; background-image: var(--src); background-size: var(--scale); background-position: calc(var(--ph) * var(--ph-shift)) var(--pv); -webkit-mask-image: linear-gradient(var(--mask-deg), black 0%, black 70%, transparent 100%); mix-blend-mode: hard-light; }
div.player_board div.entry_slots_area ul.entry_slots li.entry[data-super-pick="1"][data-rarity="4"] div.entry_icon { background-color: #86B; }
div.player_board div.entry_slots_area ul.entry_slots li.entry[data-super-pick="1"][data-rarity="5"] div.entry_icon { background-color: #C84; }
div.player_board div.entry_slots_area ul.entry_slots li.entry[data-super-pick="1"][data-rarity="5.1"] div.entry_icon { background-color: #C45; }
div.player_board div.entry_slots_area ul.entry_slots li.entry[data-super-pick="1"] > div.entry_icon::before { content: 'Super Pick'; top: auto; bottom: -2px; left: var(--super-pick-text-left); right: var(--super-pick-text-right); font-size: 24px; font-weight: bold; letter-spacing: -2px; scale: 90% 100%; transform-origin: var(--super-pick-text-origin); }
div.player_board div.entry_slots_area ul.entry_slots li.entry > div.entry_icon > img { position: absolute; bottom: 0; left: 0; right: 0; margin: auto; filter: drop-shadow(2px 4px 4px #333); transition-duration: 0.5s; transition-timing-function: ease; will-change: auto; will-change: auto; }
div.player_board div.entry_slots_area ul.entry_slots li.entry[data-picked="1"] div.entry_icon > img.element_icon { top: 0; width: 24px; margin: 3px auto auto 3px; }
div.player_board div.entry_slots_area ul.entry_slots li.entry[data-picked="1"][data-super-pick="1"] div.entry_icon > img.element_icon { margin: var(--super-pick-element-margin); }
body[data-ctrl="1"] div.player_board div.entry_slots_area ul.entry_slots li.entry[data-picked="1"] div.entry_icon > img.element_icon { z-index: 10; }
div.player_board div.entry_slots_area ul.entry_slots li.entry[data-enter=""] > div.entry_icon > img.character_icon { height: 90%; filter: saturate(0.5) blur(1.5px) drop-shadow(2px 4px 4px #333) !important; }
div.player_board div.entry_slots_area ul.entry_slots li.entry[data-enter="1"] > div.entry_icon > img.character_icon { height: 100%; filter: saturate(1) blur(0) drop-shadow(2px 4px 4px #333); }
div.player_board div.entry_slots_area ul.entry_slots li.entry[data-super-pick="1"] > div.entry_icon > img.character_icon { display: none; }
div.player_board div.entry_slots_area ul.entry_slots li.entry[data-picked="1"] div.entry_icon > span.name_tag { position: absolute; display: block; bottom: 0; left: 0; right: 0; padding: 4px 0; color: rgba(var(--bgcolor-base) / 90%); background-color: rgba(var(--main-color) / 50%); font-family: 'Noto Sans KR'; font-weight: bold; font-size: 14px; line-height: 11px; text-align: center; text-shadow: 0 0 2px rgb(var(--main-color)); word-break: keep-all; box-shadow: 0 0 4px 0 rgba(var(--main-color) / 50%); opacity: 0; transition-duration: 0.3s; transition-timing-function: ease-out; will-change: auto; }
body[data-ctrl="1"] div.player_board div.entry_slots_area ul.entry_slots li.entry[data-picked="1"] div.entry_icon > span.name_tag { opacity: 1; }
div.player_board div.entry_slots_area ul.entry_slots li.entry[data-picked="1"][data-super-pick="1"] div.entry_icon > span.name_tag { opacity: 1; font-size: 18px; line-height: 17px; }
div.player_board div.entry_slots_area ul.entry_slots li.entry[data-picked="1"] div.entry_icon > input { }
div.player_board div.entry_slots_area ul.entry_slots li.entry[data-picked="1"] div.entry_icon > input.entry_constell { position: absolute; top: 0; right: 0; width: 22px; padding: 1px 2px 0 1px; border: none; border-radius: 4px; border-bottom-left-radius: 8px; background-color: rgba(var(--sharp-text-bg-base) / 0.25); color: rgba(var(--sharp-text-base) / 0.9); font-size: 24px; font-weight: bold; text-align: center; text-shadow: 0 0 2px #222E; transition-duration: 0.25s; will-change: auto; }
div.player_board div.entry_slots_area ul.entry_slots li.entry[data-picked="1"] div.entry_icon > input.entry_constell:focus { outline: none; width: var(--entry-char-icon-size); padding: 3px 2px 2px 1px; font-size: 70px; box-shadow: 0 0 6px 1px var(--bgcolor-rgb); }
div.player_board div.entry_slots_area ul.entry_slots li.entry[data-picked="1"][data-super-pick="1"] div.entry_icon > input.entry_constell { top: 1px; left: var(--super-pick-constell-left); right: var(--super-pick-constell-right); border-radius: 8px; }
div.player_board div.entry_slots_area ul.entry_slots li.entry[data-picked="1"][data-super-pick="1"] div.entry_icon > input.entry_constell:focus { top: 0px; }
div.player_board div.entry_slots_area ul.entry_slots li.entry[data-picked="1"]:not(:hover) div.entry_icon > input.entry_constell[data-constell=""]:not(:focus) { background-color: transparent; }
div.player_board div.entry_slots_area ul.entry_slots li.entry[data-picked="1"] div.entry_icon > input.entry_constell::placeholder { color: rgba(var(--bgcolor-base) / 0.6); }
div.player_board div.entry_slots_area ul.entry_slots li.entry div.entry_info { display: inline-flex; transition-duration: 0.8s; will-change: auto; }
div.player_board div.entry_slots_area ul.entry_slots li.entry[data-super-pick="1"] div.entry_info { margin-left: var(--super-pick-info-margin-left); margin-right: var(--super-pick-info-margin-right); }
div.player_board div.entry_slots_area ul.entry_slots li.entry div.entry_info div.ban_card_holder { position: relative; display: inline-block; height: var(--entry-char-icon-size); aspect-ratio: 1; margin-top: 0; perspective: 1000px; }
div.player_board div.entry_slots_area ul.entry_slots li.entry:nth-child(odd) div.entry_info div.ban_card_holder { margin-left: var(--ban-card-holder-margin-left-odd); margin-right: var(--ban-card-holder-margin-right-odd); }
div.player_board div.entry_slots_area ul.entry_slots li.entry:nth-child(even) div.entry_info div.ban_card_holder { margin-left: var(--ban-card-holder-margin-left-even); margin-right: var(--ban-card-holder-margin-right-even); }
div.player_board div.entry_slots_area ul.entry_slots li.entry.red div.entry_info div.ban_card_holder { padding-right: 24px; }
div.player_board div.entry_slots_area ul.entry_slots li.entry.blue div.entry_info div.ban_card_holder { padding-left: 24px; }
div.player_board div.entry_slots_area ul.entry_slots li.entry div.entry_info div.ban_card_holder div.ban_card { --card-rotate-y: 0deg; --card-translate-y: 0px; --card-scale: 1; position: relative; width: var(--ban-card-short); height: var(--ban-card-long); margin: auto; rotate: z var(--ban-card-roz-deg); transform-style: preserve-3d; filter: drop-shadow(0px 0px 3px #333E); transition-duration: 0.8s; transition-timing-function: ease; will-change: auto; cursor: grab; }
div.player_board div.entry_slots_area ul.entry_slots li.entry[data-enter=""] div.entry_info div.ban_card_holder div.ban_card { --card-rotate-y: 180deg; --card-translate-y: -60px; opacity: 0; }
div.player_board div.entry_slots_area ul.entry_slots li.entry[data-enter="1"] div.entry_info div.ban_card_holder div.ban_card { opacity: 1; }
div.player_board div.entry_slots_area ul.entry_slots li.entry div.entry_info:hover div.ban_card_holder div.ban_card { --card-rotate-y: 360deg; --card-scale: 1.5; }
div.player_board div.entry_slots_area ul.entry_slots li.entry div.entry_info div.ban_card_holder div.ban_card:hover { --card-rotate-y: 360deg; --card-scale: 1.5; }
div.player_board div.entry_slots_area ul.entry_slots li.entry div.entry_info div.ban_card_holder div.ban_card > div { position: absolute; width: 100%; height: 100%; border-radius: 7px; background-color: #111C; backface-visibility: hidden; overflow: hidden; transition-duration: 0.8s; transition-timing-function: ease; will-change: auto; }
div.player_board div.entry_slots_area ul.entry_slots li.entry div.entry_info div.ban_card_holder div.ban_card div.ban_card_front { z-index: 1; transform: rotateY(var(--card-rotate-y)) translateY(var(--card-translate-y)) scale(var(--card-scale)); }
div.player_board div.entry_slots_area ul.entry_slots li.entry div.entry_info div.ban_card_holder div.ban_card div.ban_card_front > * { position: absolute; margin: auto; }
div.player_board div.entry_slots_area ul.entry_slots li.entry div.entry_info div.ban_card_holder div.ban_card div.ban_card_front div.ban_entry_place { top: 0; bottom: 0; left: 0; right: 0; width: var(--ban-card-place); height: var(--ban-card-place); border-radius: 100%; background-color: white; overflow: hidden; }
div.player_board div.entry_slots_area ul.entry_slots li.entry div.entry_info div.ban_card_holder div.ban_card[data-picked="1"] div.ban_card_front div.ban_entry_place { background-size: cover; }
div.player_board div.entry_slots_area ul.entry_slots li.entry div.entry_info div.ban_card_holder div.ban_card[data-rarity="4"] div.ban_card_front div.ban_entry_place { background-image: var(--character-bg-class-4); }
div.player_board div.entry_slots_area ul.entry_slots li.entry div.entry_info div.ban_card_holder div.ban_card[data-rarity="5"] div.ban_card_front div.ban_entry_place { background-image: var(--character-bg-class-5); }
div.player_board div.entry_slots_area ul.entry_slots li.entry div.entry_info div.ban_card_holder div.ban_card[data-rarity="5.1"] div.ban_card_front div.ban_entry_place { background-image: var(--character-bg-class-5-1); }
div.player_board div.entry_slots_area ul.entry_slots li.entry div.entry_info div.ban_card_holder div.ban_card div.ban_card_front div.ban_entry_place img { width: 100%; height: 100%; }
div.player_board div.entry_slots_area ul.entry_slots li.entry div.entry_info div.ban_card_holder div.ban_card div.ban_card_front span.ban_initial { position: absolute; margin: 1px 4.5px; color: white; }
div.player_board div.entry_slots_area ul.entry_slots li.entry div.entry_info div.ban_card_holder div.ban_card div.ban_card_front span.ban_initial.fw { top: 0; left: 0; }
div.player_board div.entry_slots_area ul.entry_slots li.entry div.entry_info div.ban_card_holder div.ban_card div.ban_card_front span.ban_initial.bw { bottom: 0; right: 0; rotate: z 180deg; }
div.player_board div.entry_slots_area ul.entry_slots li.entry div.entry_info div.ban_card_holder div.ban_card div.ban_card_front img.element_icon { --element-icon-size: 12px; position: absolute; width: var(--element-icon-size); height: var(--element-icon-size); margin: 20px 3px; color: white; }
div.player_board div.entry_slots_area ul.entry_slots li.entry div.entry_info div.ban_card_holder div.ban_card div.ban_card_front img.element_icon.fw { top: 0; left: 0;  }
div.player_board div.entry_slots_area ul.entry_slots li.entry div.entry_info div.ban_card_holder div.ban_card div.ban_card_front img.element_icon.bw { bottom: 0; right: 0; rotate: z 180deg; }
div.player_board div.entry_slots_area ul.entry_slots li.entry div.entry_info div.ban_card_holder div.ban_card div.ban_card_front span.name_tag { position: absolute; display: block; bottom: 20px; left: 0; right: 0; background-color: #000B; color: white; font-family: 'Noto Sans KR'; font-weight: 500; font-size: 12px; line-height: 14px; text-align: center; text-shadow: 0 0 2px rgb(var(--main-color)); word-break: keep-all; opacity: 0; transition-duration: 0.3s; transition-timing-function: ease-out; will-change: auto; }
body[data-ctrl="1"] div.player_board div.entry_slots_area ul.entry_slots li.entry div.entry_info div.ban_card_holder div.ban_card div.ban_card_front span.name_tag { opacity: 1; }
div.player_board div.entry_slots_area ul.entry_slots li.entry div.entry_info div.ban_card_holder div.ban_card div.ban_card_back { z-index: 0; transform: rotateY(calc(var(--card-rotate-y) + 180deg)) translateY(var(--card-translate-y)) scale(var(--card-scale)); }
div.player_board div.entry_slots_area ul.entry_slots li.entry div.entry_info div.ban_card_holder div.ban_card div.ban_card_back span.ban_card_behind { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: fit-content; height: fit-content; margin: auto -50%; color: white; font-family: 'Lato'; font-size: 48px; font-weight: 500; letter-spacing: -4px; line-height: 48px; transform: rotateZ(-90deg) translateX(-2px) translateY(18%); }
div.player_board div.entry_slots_area ul.entry_slots li.entry div.entry_info div.entry_cost { position: relative; display: inline-flex; height: 100%; /* background-color: rgba(var(--bgcolor-base) / 0.25); */ background-image: var(--icon-cost), linear-gradient(var(--side-h-degree), transparent 20%, rgba(var(--bgcolor-base) / 0.8) 80%); background-repeat: no-repeat; background-position: var(--side) -2px center, center; background-size: var(--entry-cost-icon-size), 87%; background-blend-mode: color; filter: drop-shadow(0px 0px 3px var(--bgcolor-rgb)); cursor: row-resize; }
body:not([data-rule-type="cost"], [data-rule-type="preban"]) div.player_board div.entry_slots_area ul.entry_slots li.entry div.entry_info div.entry_cost { display: none; }
div.player_board div.entry_slots_area ul.entry_slots li.entry div.entry_info div.entry_cost > span { margin: auto; letter-spacing: -4px; font-size: 32px; font-weight: bold; text-shadow: 0 0 10px rgb(var(--bgcolor-base)); }
div.player_board div.entry_slots_area ul.entry_slots li.entry div.entry_info div.entry_cost > span.base_cost { margin-left: var(--margin-entry-cost-left); margin-right: var(--margin-entry-cost-right); color: rgba(var(--base-cost-color) / 0.85); font-size: 48px; text-shadow: 0 0 14px rgb(var(--bgcolor-base)); }
div.player_board div.entry_slots_area ul.entry_slots li.entry div.entry_info div.entry_cost > span.additional_cost { position: absolute; display: inline-flex; bottom: 13px; left: var(--margin-entry-cost-additional-left); color: rgba(var(--additional-cost-color) / 0.85); font-size: 26px; text-shadow: 0 0 2px rgb(var(--bgcolor-base)); filter: drop-shadow(0px 0px 3px var(--bgcolor-rgb)); }
div.player_board div.entry_slots_area ul.entry_slots li.entry div.entry_info .pick_step_cursor { display: inline-flex; flex-direction: var(--flex-row-direction); margin: auto 4px; }
div.player_board div.entry_slots_area ul.entry_slots li.entry div.entry_info .pick_step_cursor > span.pick_text { display: inline-block; height: 100%; margin: 11px 4px 4px; font-size: 20px; }
div.player_board div.entry_slots_area div.cost_counter_holder { --cost-icon-size: 64px; --cost-crop-side: -10px; position: absolute; top: 0; bottom: 0; left: var(--margin-cost-counter-holder-left); right: var(--margin-cost-counter-holder-right); }
body:not([data-rule-type="cost"], [data-rule-type="preban"]) div.player_board div.entry_slots_area div.cost_counter_holder { display: none; }
div.player_board div.entry_slots_area div.cost_counter_holder ul.cost_stack { display: table; list-style: none; width: 44px; height: calc(100% - 16px); margin: 0; padding: 0; transform: var(--cost-stack-transform); transform-style: preserve-3d; perspective: 100px; perspective-origin: bottom; transition-duration: 0.8s; will-change: auto; margin-left: -70px; }
div.player_board div.entry_slots_area div.cost_counter_holder ul.cost_stack > li { position: relative; display: table-row; overflow-y: visible; cursor: grab; }
div.player_board div.entry_slots_area div.cost_counter_holder ul.cost_stack > li:active { cursor: grabbing; }
div.player_board div.entry_slots_area div.cost_counter_holder ul.cost_stack > li > img { position: absolute; display: table-cell; width: var(--cost-icon-size); height: var(--cost-icon-size); top: var(--cost-crop-side); bottom: var(--cost-crop-side); left: var(--cost-crop-side); right: var(--cost-crop-side); transform: rotateZ(var(--cost-stack-item-img-rotate-z)); transform-style: preserve-3d; filter: brightness(var(--cost-stack-item-img-brightness)) drop-shadow(3.5px 0px 3px #0004); opacity: 1; transition-duration: 0.3s; transition-timing-function: ease-out; will-change: auto; }
div.player_board div.entry_slots_area div.cost_counter_holder ul.cost_stack > li:hover > img { transform: rotateX(var(--cost-stack-item-img-rotate-x-hover)) rotateY(var(--cost-stack-item-img-rotate-y-hover)) rotateZ(var(--cost-stack-item-img-rotate-z-hover)) translateX(var(--cost-stack-item-img-translate-x-hover)); filter: brightness(var(--cost-stack-item-img-brightness-hover)) drop-shadow(3.5px 0px 3px #0004); }
div.player_board div.entry_slots_area div.cost_counter_holder ul.cost_stack > li:active > img{ transform: scale(1.25) rotateX(var(--cost-stack-item-img-rotate-x-hover)) rotateY(var(--cost-stack-item-img-rotate-y-active)) rotateZ(var(--cost-stack-item-img-rotate-z-hover)) translateX(var(--cost-stack-item-img-translate-x-hover)) translateY(-22px); filter: brightness(1.2) drop-shadow(3.5px 10px 8px #0004); }
div.player_board div.entry_slots_area div.cost_counter_holder ul.cost_stack > li[data-used="1"] > img { image-rendering: crisp-edges; image-rendering: -moz-crisp-edges; image-rendering: -webkit-optimize-contrast; opacity: 0; transform: translateX(var(--cost-stack-item-used-img-translate-x)); }
div.player_board div.entry_slots_area div.cost_counter_holder span { position: absolute; transition-duration: 0.8s; will-change: auto; }
div.player_board div.entry_slots_area div.cost_counter_holder span.cost_remains { bottom: 50px; left: var(--margin-cost-remains-left); right: var(--margin-cost-remains-right); color: rgb(var(--color-positive)); letter-spacing: -2px; font-size: 32px; font-weight: bold; text-align: right; text-shadow: 0px 0px 1.2px rgb(var(--signature-color-light)); line-height: 1; transform: skewX(-10deg); }
div.player_board div.entry_slots_area div.cost_counter_holder span.cost_remains::after { content: '/'; opacity: 0.8; }
div.player_board div.entry_slots_area div.cost_counter_holder span.cost_pool_total { bottom: 0; left: var(--margin-cost-pool-total-left); right: var(--margin-cost-pool-total-right); color: rgb(var(--signature-color-light)); letter-spacing: -4px; font-size: 56px; font-weight: bold; text-shadow: 0px 0px 2px #666; line-height: 1; transform: skewX(-10deg); }
div.player_board div.entry_slots_area div.cost_counter_holder div.cost_used { position: absolute; display: inline-flex; flex-wrap: nowrap; flex-direction: column; top: 0; left: 0; right: 0; width: fit-content; text-align: center; transform: skewX(-6deg) translateX(var(--cost-indicate-used-translate-x)); }
div.player_board div.entry_slots_area div.cost_counter_holder div.cost_used span { position: relative; }
div.player_board div.entry_slots_area div.cost_counter_holder div.cost_used span.text_party_cost { display: inline-flex; flex-wrap: nowrap; flex-direction: column; text-shadow: 0px 0px 0.5px #444; }
div.player_board div.entry_slots_area div.cost_counter_holder div.cost_used span.text_party_cost::before { color: rgb(var(--signature-color)); font-size: 14px; font-weight: bold; transform: scaleX(1.45); }
div.player_board div.entry_slots_area div.cost_counter_holder div.cost_used span.text_party_cost::after { margin-top: -8px; color: rgb(var(--signature-color-dark)); font-size: 20px; font-weight: bold; line-height: 1.5em; }
div.player_board div.entry_slots_area div.cost_counter_holder div.cost_used span.cost_used_count { margin-top: -6px; color: rgb(var(--signature-color-highlighter)); font-size: 40px; font-weight: bold; text-shadow: 0px 0px 1px #444; line-height: 1; }

div.player_board { perspective-origin: 150px; transform-style: preserve-3d; transition-timing-function: ease;  transition-duration: 1.2s; will-change: auto; }
div.player_board div.player_info_block { perspective-origin: 150px; transform-style: preserve-3d; transition-delay: 0.5s; }
div.player_board:is([data-hide="1"], [data-hide="2"]) div.player_info_block { filter: blur(8px) opacity(0); }
div.player_board.red div.player_info_block { transform-origin: top left; transition-timing-function: ease; }
div.player_board.red:is([data-hide="1"], [data-hide="2"]) div.player_info_block { transform: rotateY(-80deg) translateX(-120px) translateZ(-40px); }
div.player_board.blue div.player_info_block { transform-origin: top right; transition-timing-function: ease; }
div.player_board.blue:is([data-hide="1"], [data-hide="2"]) div.player_info_block { transform: rotateY(80deg) translateX(120px) translateZ(-40px); }
div.player_board.red div.profile_character { --profile-char-bg-deg: 270deg; --ph-init: 0.5%; }
div.player_board.blue div.profile_character { --profile-char-bg-deg: 90deg; --ph-init: -0.5%; }
div.player_board:is([data-hide="1"], [data-hide="2"]) div.entry_slots_area ul.entry_slots li.entry div.entry_icon { transition-duration: 0.4s; transition-timing-function: ease; will-change: auto; }
div.player_board:is([data-hide="1"], [data-hide="2"]) div.entry_slots_area ul.entry_slots li.entry:nth-child(1) div.entry_icon { transition-delay: 0.6s; }
div.player_board:is([data-hide="1"], [data-hide="2"]) div.entry_slots_area ul.entry_slots li.entry:nth-child(2) div.entry_icon { transition-delay: 0.8s; }
div.player_board:is([data-hide="1"], [data-hide="2"]) div.entry_slots_area ul.entry_slots li.entry:nth-child(3) div.entry_icon { transition-delay: 1.0s; }
div.player_board:is([data-hide="1"], [data-hide="2"]) div.entry_slots_area ul.entry_slots li.entry:nth-child(4) div.entry_icon { transition-delay: 1.2s; }
div.player_board:is([data-hide="1"], [data-hide="2"]) div.entry_slots_area ul.entry_slots li.entry:nth-child(5) div.entry_icon { transition-delay: 1.4s; }
div.player_board:is([data-hide="1"], [data-hide="2"]) div.entry_slots_area ul.entry_slots li.entry:nth-child(6) div.entry_icon { transition-delay: 1.6s; }
div.player_board:is([data-hide="1"], [data-hide="2"]) div.entry_slots_area ul.entry_slots li.entry:nth-child(7) div.entry_icon { transition-delay: 1.8s; }
div.player_board:is([data-hide="1"], [data-hide="2"]) div.entry_slots_area ul.entry_slots li.entry:nth-child(8) div.entry_icon { transition-delay: 2.0s; }
div.player_board[data-hide="2"] div.entry_slots_area ul.entry_slots li.entry div.entry_icon { transform: scale(0.4, 1.8) translateY(-18px); filter: blur(12px) opacity(0); }
div.player_board div.entry_slots_area ul.entry_slots li.entry div.entry_info { transition-delay: 0.2s; transition-timing-function: ease; }
div.player_board:is([data-hide="1"], [data-hide="2"]) div.entry_slots_area ul.entry_slots li.entry div.entry_info { filter: blur(4px) opacity(0); }
div.player_board.red:is([data-hide="1"], [data-hide="2"]) div.entry_slots_area ul.entry_slots li.entry div.entry_info { transform: translateX(-60px) scale(0.5); }
div.player_board.blue:is([data-hide="1"], [data-hide="2"]) div.entry_slots_area ul.entry_slots li.entry div.entry_info { transform: translateX(60px) scale(0.5); }
div.player_board div.entry_slots_area div.cost_counter_holder ul.cost_stack { transition-delay: 0.3s; transition-timing-function: ease; }
/* div.player_board[data-hide="1"] div.entry_slots_area div.cost_counter_holder ul.cost_stack { transition-delay: 0s; } */
div.player_board:is([data-hide="1"], [data-hide="2"]) div.entry_slots_area div.cost_counter_holder ul.cost_stack { transition-delay: 0s; filter: sepia(0.4) saturate(1); }
div.player_board[data-hide="2"] div.entry_slots_area div.cost_counter_holder ul.cost_stack { height: 0; margin-top: -64px; }
div.player_board.red[data-hide="2"] div.entry_slots_area div.cost_counter_holder ul.cost_stack { margin-left: -62px; }
div.player_board.blue[data-hide="2"] div.entry_slots_area div.cost_counter_holder ul.cost_stack { margin-left: -78px; }
div.player_board.red:is([data-hide="1"], [data-hide="2"]) div.entry_slots_area div.cost_counter_holder ul.cost_stack { transform: unset; }
div.player_board.blue:is([data-hide="1"], [data-hide="2"]) div.entry_slots_area div.cost_counter_holder ul.cost_stack { transform: translateX(95px); }
div.player_board div.entry_slots_area div.cost_counter_holder > span { transition-delay: 0.3s; transition-timing-function: ease; }
div.player_board:is([data-hide="1"], [data-hide="2"]) div.entry_slots_area div.cost_counter_holder > span { filter: sepia(1.0) blur(12px) opacity(0); }
div.player_board.red:is([data-hide="1"], [data-hide="2"]) div.entry_slots_area div.cost_counter_holder > span { transform: translateX(24px); }
div.player_board.blue:is([data-hide="1"], [data-hide="2"]) div.entry_slots_area div.cost_counter_holder > span { transform: translateX(-24px); }
div.player_board div.entry_slots_area div.cost_counter_holder div.cost_used { transition-delay: 0.3s; transition-duration: 0.8s; will-change: auto; }
div.player_board[data-hide="2"] div.entry_slots_area div.cost_counter_holder div.cost_used { top: -72px; transition-delay: 0s; }

div.player_board[data-hide="3"] { perspective-origin: top center; filter: blur(12px) opacity(0); transition-delay: 0.2s;}
div.player_board[data-hide="3"].red { transform: translateX(-360px); }
div.player_board[data-hide="3"].blue { transform: translateX(360px); }

/* Player board common */
div.player_board {
    --margin-player-uid: 128px;
    --margin-nameplate: 16px;
    --margin-account-point: 8px;
    --margin-entry-slot-area: 40px;
    --margin-entry-cost: 30px;
    --margin-cost-counter-holder: 168px;
    --cost-stack-item-used-shift: 28px;
    --entry-char-icon-size: 85.333px;
    --ban-card-short: 54px;
    --ban-card-long: 96px;
    --ban-card-place: 48px;
    --ban-card-roz-deg: 28deg;
    --super-pick-shift-depth: 36px;
    --de-margin: -40px;
    --super-pick-margin-h: 2px;
    --super-pick-element-margin-depth: 3px;
    --super-pick-constell-margin-depth: 28px;
    --super-pick-info-margin-depth: -64px;
}
/* Player board each side custom */
div.player_board.red {
    left: 0;
    --margin-player-uid-left: var(--margin-player-uid);
    --margin-player-uid-right: var(--var-auto);
    --margin-nameplate-left: var(--margin-nameplate);
    --margin-nameplate-right: var(--var-auto);
    --margin-account-point-left: var(--margin-account-point);
    --margin-account-point-right: var(--var-auto);
    --margin-entry-slot-area-left: var(--margin-entry-slot-area);
    --margin-entry-slot-area-right: var(--var-auto);
    --margin-entry-cost-left: var(--margin-entry-cost);
    --margin-entry-cost-right: var(--var-auto);
    --margin-entry-cost-additional-left: 42px;
    --margin-cost-counter-holder-left: var(--margin-cost-counter-holder);
    --margin-cost-counter-holder-right: var(--var-unset);
    --margin-cost-remains-left: var(--var-unset);
    --margin-cost-remains-right: -47px;
    --margin-cost-pool-total-left: var(--var-unset);
    --margin-cost-pool-total-right: -50px;
    --side-h-degree: 90deg;
    --side-degree-wide-up: 67deg; --side-degree-plate-back: 4deg;
    --nameplate-input-background-gradient-begin: rgba(var(--signature-color-dark) / 0.8) 0%;
    --nameplate-input-background-gradient-end: transparent 65%;
    --nameplate-input-transform: skew(3deg, 1.6deg) rotateY(8deg) rotateZ(1deg) translate(20px, 8px) translateZ(100px) scale(0.6, 1.1) matrix(2, 0, 0, 1, 0, 0);
    --account-point-input-background-gradient-begin: transparent 35%;
    --account-point-input-background-gradient-end: rgba(var(--signature-color-dark) / 0.8) 100%;
    --cost-stack-transform: scale(1.15) rotate3d(15.5, 1.5, 3, 40deg) translate(74px, -56px);
    --cost-stack-item-img-rotate-z: -10deg;
    --cost-stack-item-img-rotate-x-hover: 7deg;
    --cost-stack-item-img-rotate-y-hover: -18deg;
    --cost-stack-item-img-rotate-y-active: -36deg;
    --cost-stack-item-img-rotate-z-hover: -14deg;
    --cost-stack-item-img-translate-x-hover: -5px;
    --cost-stack-item-img-brightness: 1;
    --cost-stack-item-img-brightness-hover: 0.95;
    --cost-stack-item-used-img-translate-x: calc(var(--cost-stack-item-used-shift) * -1);
    --cost-indicate-used-translate-x: -3px;
    --ban-card-holder-margin-left-odd: 10px;
    --ban-card-holder-margin-left-even: 20px;
    --ban-card-holder-margin-right-odd: 0px;
    --ban-card-holder-margin-right-even: 0px;
    --super-pick-shift: var(--super-pick-shift-depth);
    --de-margin-left: var(--de-margin);
    --de-margin-right: 0;
    --super-pick-text-left: var(--super-pick-margin-h);
    --super-pick-text-right: auto;
    --super-pick-text-origin: left;
    --ph-shift: 1.1;
    --mask-deg: 90deg;
    --super-pick-element-margin: var(--super-pick-element-margin-depth) auto auto var(--super-pick-element-margin-depth);
    --super-pick-constell-left: var(--super-pick-constell-margin-depth);
    --super-pick-constell-right: auto;
    --super-pick-info-margin-left: var(--super-pick-info-margin-depth);
    --super-pick-info-margin-right: auto;
}
div.player_board.blue {
    right: 0;
    --margin-player-uid-left: var(--var-auto);
    --margin-player-uid-right: var(--margin-player-uid);
    --margin-nameplate-left: var(--var-auto);
    --margin-nameplate-right: var(--margin-nameplate);
    --margin-account-point-left: var(--var-auto);
    --margin-account-point-right: var(--margin-account-point);
    --margin-entry-slot-area-left: var(--var-auto);
    --margin-entry-slot-area-right: var(--margin-entry-slot-area);
    --margin-entry-cost-left: var(--var-auto);
    --margin-entry-cost-right: calc(var(--margin-entry-cost) + 4px);
    --margin-entry-cost-additional-left: 13px;
    --margin-cost-counter-holder-left: var(--var-unset);
    --margin-cost-counter-holder-right: var(--margin-cost-counter-holder);
    --margin-cost-remains-left: -41px;
    --margin-cost-remains-right: var(--var-unset);
    --margin-cost-pool-total-left: var(--var-unset);
    --margin-cost-pool-total-right: -24px;
    --side-h-degree: 270deg;
    --side-degree-wide-up: 67deg; --side-degree-plate-back: -4deg;
    --nameplate-input-background-gradient-begin: transparent 35%;
    --nameplate-input-background-gradient-end: rgba(var(--signature-color-dark) / 0.8) 100%;
    --nameplate-input-transform: skew(-3deg, -1.6deg) rotateY(8deg) rotateZ(-1deg) translate(-50px, 8px) translateZ(100px) scale(0.6, 1.1) matrix(2, 0, 0, 1, 0, 0);
    --cost-stack-transform: scale(1.15) rotate3d(15.5, -1.5, 3, -40deg) translate(13px, -41px);
    --account-point-input-background-gradient-begin: rgba(var(--signature-color-dark) / 0.8) 0%;
    --account-point-input-background-gradient-end: transparent 65%;
    --cost-stack-item-img-rotate-z: 4deg;
    --cost-stack-item-img-rotate-x-hover: 3.5deg;
    --cost-stack-item-img-rotate-y-hover: -18deg;
    --cost-stack-item-img-rotate-y-active: -36deg;
    --cost-stack-item-img-rotate-z-hover: 8deg;
    --cost-stack-item-img-translate-x-hover: 3px;
    --cost-stack-item-img-brightness: 1;
    --cost-stack-item-img-brightness-hover: 1.1;
    --cost-stack-item-used-img-translate-x: var(--cost-stack-item-used-shift);
    --cost-indicate-used-translate-x: -47px;
    --ban-card-holder-margin-left-odd: 0px;
    --ban-card-holder-margin-left-even: 0px;
    --ban-card-holder-margin-right-odd: 10px;
    --ban-card-holder-margin-right-even: 20px;
    --super-pick-shift: calc(var(--super-pick-shift-depth) * -1);
    --de-margin-left: 0;
    --de-margin-right: var(--de-margin);
    --super-pick-text-left: auto;
    --super-pick-text-right: var(--super-pick-margin-h);
    --super-pick-text-origin: right;
    --ph-shift: 0.9;
    --mask-deg: 270deg;
    --super-pick-element-margin: var(--super-pick-element-margin-depth) var(--super-pick-element-margin-depth) auto auto;
    --super-pick-constell-left: auto;
    --super-pick-constell-right: var(--super-pick-constell-margin-depth);
    --super-pick-info-margin-left: auto;
    --super-pick-info-margin-right: var(--super-pick-info-margin-depth);
}
div.player_board.red div.player_uid { left: 0; }
div.player_board.red div.nameplate { left: 0; }
div.player_board.red div.nameplate > div.plate_back { left: 0; }
div.player_board.red div.account_point { left: 0; }
div.player_board.red div.profile_character { left: 0; }
div.player_board.red div.account_info { left: 0; }
div.player_board.red div.account_info span { filter: hue-rotate(-148deg) brightness(1.4); }
div.player_board.red div.account_info:hover span { }
div.player_board.blue div.player_uid { right: 0; }
div.player_board.blue div.nameplate { right: 0; }
div.player_board.blue div.nameplate > div.plate_back { right: 0; }
div.player_board.blue div.account_point { right: 0; }
div.player_board.blue div.profile_character { right: 0; }
div.player_board.blue div.account_info { right: 0; }
div.player_board.blue div.account_info span { filter: hue-rotate(99deg) brightness(1.2); }
/* Christmas Edition color set */
/* div.player_board.blue div.account_info span { filter: hue-rotate(-36deg) brightness(1.2); } */
div.player_board.blue div.account_info:hover span { }
div.player_board.red div.entry_slots_area ul.entry_slots li.entry div.entry_info .pick_step_cursor::before { content: '◀' }
div.player_board.blue div.entry_slots_area ul.entry_slots li.entry div.entry_info .pick_step_cursor::before { content: '▶' }


/* Ban pick board */
div#ban_pick_board { position: absolute; z-index: 0; display: block; top: 768px; left: 0; right: 0; height: 0; overflow: visible; user-select: none; }
div#ban_pick_board div.ban_side { position: absolute; transition-duration: 1.0s; will-change: auto; }
div#ban_pick_board div.ban_side.red { left: var(--margin-ban-side); }
div#ban_pick_board div.ban_side.blue { right: var(--margin-ban-side); }
div#ban_pick_board div.ban_side div.ban_pick_title { text-align: var(--side); perspective-origin: var(--side) bottom; perspective: 120px; transform-style: preserve-3d; }
div#ban_pick_board div.ban_side div.ban_pick_title span { display: inline-block; color: rgba(var(--signature-color) / 92%); font-size: 24px; font-weight: bold; text-shadow: var(--ban-pick-title-shadow-x) 0px 1px rgb(var(--signature-color-dark)); transform: rotateY(var(--ban-pick-title-rotate-y)) skew(var(--ban-pick-title-skew));}
div#ban_pick_board div.ban_side div.ban_pick_title span::before { content: attr(data-ban-title); }
div#ban_pick_board div.ban_side div.ban_pick_side_area { position: relative; perspective: 5000px; }
div#ban_pick_board div.ban_side div.ban_pick_side_area > * { position: absolute; top: 0; width: 1000px; transform-style: preserve-3d; transition-duration: 0.75s; will-change: auto; }
div#ban_pick_board div.ban_side div.ban_pick_side_area > *[data-appear="1"] { opacity: 0; z-index: -1; }
div#ban_pick_board div.ban_side div.ban_pick_side_area > *[data-appear="-1"] { opacity: 0; z-index: -1; }
div#ban_pick_board div.ban_side ul.ban_selection { display: flex; list-style: none; flex-wrap: nowrap; flex-direction: var(--flex-row-direction); margin: 0; margin-bottom: 32px; padding: 0; }
div#ban_pick_board div.ban_side ul.ban_selection:has(li.ban_entry:nth-child(5)) { --ban-pick-char-icon-place-adjust: var(--ban-pick-char-icon-place-adjust-for-5entry); }
div#ban_pick_board div.ban_side ul.ban_selection li.ban_entry { position: relative; width: calc(var(--ban-pick-char-icon-size) + var(--ban-pick-char-icon-place-adjust)); height: var(--ban-pick-char-icon-size); background-color: rgba(var(--signature-color-dark) / 0.4); border-radius: 8%; box-shadow: inset 1px 2px 3px 2px #5554, inset -1px -2px 2px 1px #eee4; transition-duration: 0.5s; will-change: auto; }
div#ban_pick_board div.ban_side ul.ban_selection li.ban_entry[data-picking="1"] { background-color: rgba(var(--signature-color-dark) / 0.7); }
div#ban_pick_board div.ban_side ul.ban_selection li.ban_entry::before { position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; right: 0; margin: auto; color: rgba(var(--signature-color-darker) / 0.5333); font-size: 56px; line-height: 1.5em; text-align: center; transition-duration: 0.5s; will-change: auto; }
div#ban_pick_board div.ban_side ul.ban_selection li.ban_entry[data-picking="1"]::before { color: rgba(var(--signature-color-darker) / 0.9); }
div#ban_pick_board div.ban_side ul.ban_selection li.ban_entry:nth-child(1)::before { content: '1'; }
div#ban_pick_board div.ban_side ul.ban_selection li.ban_entry:nth-child(2)::before { content: '2'; }
div#ban_pick_board div.ban_side ul.ban_selection li.ban_entry:nth-child(3)::before { content: '3'; }
div#ban_pick_board div.ban_side ul.ban_selection li.ban_entry:nth-child(4)::before { content: '4'; }
div#ban_pick_board div.ban_side ul.ban_selection li.ban_entry:nth-child(5)::before { content: '5'; }
div#ban_pick_board div.ban_side ul.ban_selection li.ban_entry[data-picked="1"]:hover { cursor: grab; }
div#ban_pick_board div.ban_side ul.ban_selection li.ban_entry[data-picked="1"]:active { cursor: grabbing; }
div#ban_pick_board div.ban_side ul.ban_selection li.ban_entry div { }
div#ban_pick_board div.ban_side ul.ban_selection li.ban_entry div.entry_icon { width: 100%; height: 100%; border-radius: 8%; overflow: hidden; }
div#ban_pick_board div.ban_side ul.ban_selection li.ban_entry[data-picked="1"] div.entry_icon { background-size: cover; }
div#ban_pick_board div.ban_side ul.ban_selection li.ban_entry[data-rarity="4"] div.entry_icon { background-image: var(--character-bg-class-4); }
div#ban_pick_board div.ban_side ul.ban_selection li.ban_entry[data-rarity="5"] div.entry_icon { background-image: var(--character-bg-class-5); }
div#ban_pick_board div.ban_side ul.ban_selection li.ban_entry[data-rarity="5.1"] div.entry_icon { background-image: var(--character-bg-class-5-1); }
div#ban_pick_board div.ban_side ul.ban_selection li.ban_entry div.entry_icon img.character_icon { display: none; /* width: 100%; */ height: 100%; margin: 0 calc(var(--ban-pick-char-icon-place-adjust) / 2); filter: sepia(0) saturate(1) grayscale(0); transition-delay: 0.3s; transition-duration: 0.4s; transition-timing-function: ease-out; will-change: auto; }
div#ban_pick_board div.ban_side ul.ban_selection li.ban_entry[data-picked="1"] div.entry_icon img.character_icon { filter: sepia(0.1) saturate(1) grayscale(0.1); }
div#ban_pick_board div.ban_side ul.ban_selection li.ban_entry:hover div.entry_icon img.character_icon { transform: scale(1.3) translateY(12%); }
div#ban_pick_board div.ban_side ul.ban_selection li.ban_entry div.entry_icon > img.element_icon { position: absolute; top: 0; width: 24px; margin: 3px auto auto 3px; opacity: 0; transition-duration: 0.3s; transition-timing-function: ease-out; will-change: auto; }
body[data-ctrl="1"] div#ban_pick_board div.ban_side ul.ban_selection li.ban_entry[data-picked="1"] div.entry_icon > img.element_icon { opacity: 1; }
div#ban_pick_board div.ban_side ul.ban_selection li.ban_entry div.entry_icon span.name_tag { position: absolute; display: block; bottom: 0; left: 0; right: 0; padding: 4px 0; border-bottom-left-radius: 7px; border-bottom-right-radius: 7px; color: rgba(var(--bgcolor-base) / 90%); background-color: rgba(var(--main-color) / 50%); font-weight: bold; font-family: 'Noto Sans KR'; font-weight: bold; font-size: 14px; line-height: 11px; text-align: center; text-shadow: 0 0 2px rgb(var(--main-color)); word-break: keep-all; box-shadow: 0 0 4px 0 rgba(var(--main-color) / 50%); opacity: 0; transition-duration: 0.3s; transition-timing-function: ease-out; will-change: auto; }
body[data-ctrl="1"] div#ban_pick_board div.ban_side ul.ban_selection li.ban_entry[data-picked="1"] div.entry_icon span.name_tag { opacity: 1; }
div#ban_pick_board div.ban_side ul.ban_selection li.ban_entry div.entry_icon div { }
div#ban_pick_board div.ban_side ul.ban_selection li.ban_entry div.entry_icon div.full { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; border-radius: 8%; }
div#ban_pick_board div.ban_side ul.ban_selection li.ban_entry div.entry_icon div.jail_darkness { border-radius: 8%; background-image: radial-gradient(#000A 0%, #0007 30%, transparent 70%); background-size: 180% 90%; background-position: center -560%; background-repeat: no-repeat; transition-delay: 0.3s; transition-duration: 0.4s; transition-timing-function: ease-out; will-change: auto; }
div#ban_pick_board div.ban_side ul.ban_selection li.ban_entry[data-picked="1"] div.entry_icon div.jail_darkness { background-image: radial-gradient(#000A 0%, #0007 30%, transparent 70%); background-size: 180% 90%; background-position: center -420%; }
div#ban_pick_board div.ban_side ul.ban_selection li.ban_entry[data-picked="1"]:hover div.entry_icon div.jail_darkness { background-size: 180% 90%; background-position: center -420%; }
div#ban_pick_board div.ban_side ul.ban_selection li.ban_entry div.entry_icon div.jail_lighten { background-repeat: no-repeat; transition-delay: 0.3s; transition-duration: 0.4s; transition-timing-function: ease-out; will-change: auto; }
div#ban_pick_board div.ban_side ul.ban_selection li.ban_entry[data-picked="1"] div.entry_icon div.jail_lighten { background-image: radial-gradient(#FFF9 0%, #FFF5 30%, transparent 70%); background-size: 180% 90%; background-position: center 580%; mix-blend-mode: soft-light; }
div#ban_pick_board div.ban_side ul.ban_selection li.ban_entry[data-picked="1"]:hover div.entry_icon div.jail_lighten { background-size: 150% 80%; background-position: center 15%; }
div#ban_pick_board div.ban_side ul.ban_selection li.ban_entry div.entry_icon div.ban_shutter { position: relative; top: -120%; left: 0; right: 0; width: 100%; height: 0%; background-image: linear-gradient(90deg, transparent 0%, transparent 30%, #999 30%, #EEE 40%, #BBB 45%, #555 70%, transparent 70%, transparent 100% ); background-size: 28.5%; background-position-x: 11%; filter: drop-shadow(12px 12px 2px #2226); opacity: 0.9; transition-duration: 0.25s; transition-timing-function: ease-in; will-change: auto; }
div#ban_pick_board div.ban_side ul.ban_selection li.ban_entry[data-picked="1"] div.entry_icon div.ban_shutter { height: 120%; }
div#ban_pick_board div.ban_side ul.ban_selection li.ban_entry[data-picked="1"]:active div.entry_icon div.ban_shutter { animation: beatWaveBG 0.1s linear 1 backwards; }
div#ban_pick_board div.ban_side ul.ban_selection li.ban_entry div.pick_step_cursor { position: absolute; display: none; bottom: 0; left: 0; right: 0; text-align: center; line-height: 1; perspective-origin: bottom; perspective: 240px; transform-style: preserve-3d; }
div#ban_pick_board div.ban_side ul.ban_selection li.ban_entry[data-picking="1"] div.pick_step_cursor { display: inline-block; }
div#ban_pick_board div.ban_side ul.ban_selection li.ban_entry div.pick_step_cursor span { display: block; line-height: 1.3; transform: scale(1, 0.6) rotateX(45deg) translateY(94px); }
div#ban_pick_board div.ban_side ul.ban_selection li.ban_entry div.pick_step_cursor span::before { content: '▲\A'; }
div#ban_pick_board div.ban_side ul.ban_selection li.ban_entry div.pick_step_cursor span::after { content: attr(data-text); }
div#ban_pick_board div.ban_side ul.weapon_ban_selection { --item-margin: calc(var(--ban-pick-char-icon-size) / 2); display: table; list-style: none; margin: 6px 3px; padding: 0; perspective-origin: var(--weapon-ban-entry-pov) var(--side); perspective: 250px; transform-style: preserve-3d; }
/* div#ban_pick_board div.ban_side ul.weapon_ban_selection { margin-top: -58px; margin-left: -32px; margin-right: -32px; } */
div#ban_pick_board div.ban_side ul.weapon_ban_selection li.weapon_ban_entry { --margin-multiplied: calc(var(--item-margin) * var(--multiplier)); position: relative; display: flex; flex-wrap: nowrap; flex-direction: var(--flex-row-direction); width: var(--ban-pick-char-icon-size); height: var(--ban-pick-char-icon-size); margin-top: calc(var(--item-margin) * -1); margin-left: var(--margin-multiplied); overflow: visible; transform: rotateY(var(--weapon-ban-entry-rotate-y)) rotateX(var(--weapon-ban-entry-rotate-x)) translateZ(calc(var(--weapon-ban-entry-translate-z) * calc(var(--multiplier-r) * 2))); transition-duration: 0.5s; transform-style: preserve-3d; will-change: auto; }
div#ban_pick_board div.ban_side ul.weapon_ban_selection li.weapon_ban_entry:first-child { margin-top: 0; }
div#ban_pick_board div.ban_side ul.weapon_ban_selection li.weapon_ban_entry:nth-child(1) { --multiplier: 0; }
div#ban_pick_board div.ban_side ul.weapon_ban_selection li.weapon_ban_entry:nth-child(2) { --multiplier: 1; }
div#ban_pick_board div.ban_side ul.weapon_ban_selection li.weapon_ban_entry:nth-child(3) { --multiplier: 2; }
div#ban_pick_board div.ban_side ul.weapon_ban_selection li.weapon_ban_entry:nth-child(4) { --multiplier: 3; }
div#ban_pick_board div.ban_side ul.weapon_ban_selection li.weapon_ban_entry:nth-child(5) { --multiplier: 4; }
div#ban_pick_board div.ban_side ul.weapon_ban_selection li.weapon_ban_entry:nth-last-child(1) { --multiplier-r: 0; }
div#ban_pick_board div.ban_side ul.weapon_ban_selection li.weapon_ban_entry:nth-last-child(2) { --multiplier-r: 1; }
div#ban_pick_board div.ban_side ul.weapon_ban_selection li.weapon_ban_entry:nth-last-child(3) { --multiplier-r: 2; }
div#ban_pick_board div.ban_side ul.weapon_ban_selection li.weapon_ban_entry:nth-last-child(4) { --multiplier-r: 3; }
div#ban_pick_board div.ban_side ul.weapon_ban_selection li.weapon_ban_entry:nth-last-child(5) { --multiplier-r: 4; }
div#ban_pick_board div.ban_side ul.weapon_ban_selection li.weapon_ban_entry div { }
div#ban_pick_board div.ban_side ul.weapon_ban_selection li.weapon_ban_entry div.entry_icon { position: relative; width: 100%; height: 100%; background-color: rgba(var(--signature-color-lighter) / 0.2); border: solid 1px rgba(var(--signature-color) / 0.6); border-radius: 8%; outline: groove 2px rgba(var(--signature-color-light) / 0.3); outline-offset: 1px; overflow: hidden; }
div#ban_pick_board div.ban_side ul.weapon_ban_selection li.weapon_ban_entry div.entry_icon img { display: block; width: 100%; height: 100%; filter: sepia(0) saturate(1) grayscale(0) drop-shadow(2px 4px 0px #2228); transition-delay: 0.3s; transition-duration: 0.4s; transition-timing-function: ease-out; will-change: auto; }
div#ban_pick_board div.ban_side ul.weapon_ban_selection li.weapon_ban_entry:not([data-picked="1"]) div.entry_icon img { filter: sepia(0.1) saturate(0.2) grayscale(0.3) drop-shadow(2px 4px 0px #2228) blur(2px); }
div#ban_pick_board div.ban_side ul.weapon_ban_selection li.weapon_ban_entry div.entry_icon div { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }
div#ban_pick_board div.ban_side ul.weapon_ban_selection li.weapon_ban_entry div.entry_icon div.ban_locker { }
div#ban_pick_board div.ban_side ul.weapon_ban_selection li.weapon_ban_entry div.entry_icon div.ban_locker span { position: absolute; display: block; top: 0; bottom: 0; left: 0; right: 0; height: fit-content; margin: auto; color: rgb(var(--signature-color-bright)); text-align: center; text-shadow: 0 0 4px #222; }
div#ban_pick_board div.ban_side ul.weapon_ban_selection li.weapon_ban_entry div.entry_icon div.ban_locker span::before { content: '?'; font-size: 64px; font-weight: bold; opacity: 0; }
div#ban_pick_board div.ban_side ul.weapon_ban_selection li.weapon_ban_entry:not([data-picked="1"]) div.entry_icon div.ban_locker span::before { opacity: 1; }
div#ban_pick_board div.ban_side ul.weapon_ban_selection li.weapon_ban_entry div.entry_icon div.ban_locker span::after { content: '🔒'; position: absolute; top: 1px; left: 1px; padding: 2px 3px 5px; color: rgba(var(--signature-color-bright) / 0.7); background-image: linear-gradient(135deg, rgba(var(--signature-color-bright) / 0.5) 0%, rgba(var(--signature-color-dark) / 0.5) 45%); border-top-left-radius: 20%; border-top-right-radius: 10%; border-bottom-left-radius: 10%; border-bottom-right-radius: 40%; font-size: 18px; text-shadow: 1px 1px 4px rgba(var(--signature-color-darker) / 0.8); }
div#ban_pick_board div.ban_side ul.weapon_ban_selection li.weapon_ban_entry div.entry_info { position: absolute; top: 0; bottom: 0; width: max-content; height: fit-content; margin: auto; transform: translateX(var(--translate-x)) translateY(var(--translate-y)) translateZ(var(--weapon-ban-entry-info-translate-z)); }
div#ban_pick_board div.ban_side ul.weapon_ban_selection li.weapon_ban_entry div.entry_info div { }
div#ban_pick_board div.ban_side ul.weapon_ban_selection li.weapon_ban_entry div.entry_info div span { display: flex; flex-direction: var(--flex-row-direction); margin: 0 8px; }
div#ban_pick_board div.ban_side ul.weapon_ban_selection li.weapon_ban_entry div.entry_info div.ban_entry_name { }
div#ban_pick_board div.ban_side ul.weapon_ban_selection li.weapon_ban_entry div.entry_info div.ban_entry_name span { color: rgba(var(--signature-color) / 0.85); font-size: 22px; font-weight: bold; text-shadow: 0 0 1px #444B, 0 0 4px var(--bgcolor-rgb); }
div#ban_pick_board div.ban_side ul.weapon_ban_selection li.weapon_ban_entry div.entry_info div.pick_step_cursor { }
div#ban_pick_board div.ban_side ul.weapon_ban_selection li.weapon_ban_entry div.entry_info div.pick_step_cursor span { }
div#ban_pick_board div.ban_side ul.weapon_ban_selection li.weapon_ban_entry div.entry_info div.pick_step_cursor span::after { content: attr(data-text); }
div#ban_pick_board div.ban_side ul.ban_selection + ul { margin-top: 32px; }
div#ban_pick_board div.ban_side ul.weapon_ban_selection:first-of-type { margin-top: 0; }

div.block_area#ban_pick_board[data-hide="1"] { perspective-origin: top center; }
div.block_area#ban_pick_board > div.ban_side { transition-delay: 0.4s; transition-timing-function: ease; }
div.block_area#ban_pick_board[data-hide="1"] > div.ban_side { filter: blur(12px) opacity(0); }
div.block_area#ban_pick_board[data-hide="1"] > div.ban_side.red { transform: translateX(-30px); }
div.block_area#ban_pick_board[data-hide="1"] > div.ban_side.blue { transform: translateX(30px); }

/* Ban pick board common */
div#ban_pick_board {
    --margin-ban-side: 48px;
    --ban-pick-title-shadow-x-shift: 1px;
    --ban-pick-title-rotate-y-degree: 13deg;
    --ban-pick-char-icon-size: 85.333px; 
    --ban-pick-char-icon-place-adjust: -8px; 
    --ban-pick-char-icon-place-adjust-for-5entry: -24px; 
    --weapon-ban-entry-rotate-x-degree: 15deg;
    --weapon-ban-entry-rotate-y-degree: 10deg;
    --weapon-ban-entry-translate-z-pos: 12px;
    --weapon-ban-entry-info-translate-z: 32px;
}
/* Ban pick board each side custom */
div#ban_pick_board div.ban_side.red {
    --ban-pick-title-shadow-x: var(--ban-pick-title-shadow-x-shift);
    --ban-pick-title-rotate-y: var(--ban-pick-title-rotate-y-degree);
    --ban-pick-title-skew: -8deg, -3deg;
    --weapon-ban-entry-pov: top;
    --weapon-ban-entry-rotate-x: var(--weapon-ban-entry-rotate-x-degree);
    --weapon-ban-entry-rotate-y: var(--weapon-ban-entry-rotate-y-degree);
    --weapon-ban-entry-translate-z: calc(var(--weapon-ban-entry-translate-z-pos) * -1);
}
div#ban_pick_board div.ban_side.blue {
    --ban-pick-title-shadow-x: calc(var(--ban-pick-title-shadow-x-shift) * -1);
    --ban-pick-title-rotate-y: calc(var(--ban-pick-title-rotate-y-degree) * -1);
    --ban-pick-title-skew: -8deg, 3deg;
    --weapon-ban-entry-pov: top;
    --weapon-ban-entry-rotate-x: var(--weapon-ban-entry-rotate-x-degree);
    --weapon-ban-entry-rotate-y: calc(var(--weapon-ban-entry-rotate-y-degree) * -1);
    --weapon-ban-entry-translate-z: calc(var(--weapon-ban-entry-translate-z-pos) * -1);
}
div#ban_pick_board div.ban_side.red div.ban_pick_side_area { perspective-origin: right center; }
div#ban_pick_board div.ban_side.blue div.ban_pick_side_area { perspective-origin: left center; }
div#ban_pick_board div.ban_side.red div.ban_pick_side_area > * { left: 0; }
div#ban_pick_board div.ban_side.blue div.ban_pick_side_area > * { right: 0; }
div#ban_pick_board div.ban_side.red div.ban_pick_side_area > *[data-appear="1"] { transform: rotateY(-30deg); }
div#ban_pick_board div.ban_side.red div.ban_pick_side_area > *[data-appear="-1"] { transform: rotateY(30deg); }
div#ban_pick_board div.ban_side.blue div.ban_pick_side_area > *[data-appear="1"] { transform: rotateY(30deg); }
div#ban_pick_board div.ban_side.blue div.ban_pick_side_area > *[data-appear="-1"] { transform: rotateY(-30deg); }
div#ban_pick_board div.ban_side.red ul.weapon_ban_selection { margin-right: auto; }
div#ban_pick_board div.ban_side.blue ul.weapon_ban_selection { margin-left: auto; }
div#ban_pick_board div.ban_side.red ul.weapon_ban_selection li.weapon_ban_entry div.entry_info { left: 100%; }
div#ban_pick_board div.ban_side.blue ul.weapon_ban_selection li.weapon_ban_entry div.entry_info { right: 100%; }
div#ban_pick_board div.ban_side.red ul.weapon_ban_selection li.weapon_ban_entry:nth-child(1) div.entry_info { --translate-x: -4%; --translate-y: -4%; }
div#ban_pick_board div.ban_side.red ul.weapon_ban_selection li.weapon_ban_entry:nth-child(2) div.entry_info { --translate-x: -6%; --translate-y: -12%; }
div#ban_pick_board div.ban_side.red ul.weapon_ban_selection li.weapon_ban_entry:nth-child(3) div.entry_info { --translate-x: -8%; --translate-y: -24%; }
div#ban_pick_board div.ban_side.red ul.weapon_ban_selection li.weapon_ban_entry:nth-child(4) div.entry_info { --translate-x: -12%; --translate-y: -48%; }
div#ban_pick_board div.ban_side.red ul.weapon_ban_selection li.weapon_ban_entry:nth-child(5) div.entry_info { --translate-x: -18%; --translate-y: -72%; }
div#ban_pick_board div.ban_side.blue ul.weapon_ban_selection li.weapon_ban_entry:nth-child(1) div.entry_info { --translate-y: 2%; }
div#ban_pick_board div.ban_side.blue ul.weapon_ban_selection li.weapon_ban_entry:nth-child(2) div.entry_info { --translate-y: -4%; }
div#ban_pick_board div.ban_side.blue ul.weapon_ban_selection li.weapon_ban_entry:nth-child(3) div.entry_info { --translate-y: -16%; }
div#ban_pick_board div.ban_side.blue ul.weapon_ban_selection li.weapon_ban_entry:nth-child(4) div.entry_info { --translate-y: -32%; }
div#ban_pick_board div.ban_side.blue ul.weapon_ban_selection li.weapon_ban_entry:nth-child(5) div.entry_info { --translate-y: -52%; }
div#ban_pick_board div.ban_side.blue ul.weapon_ban_selection li.weapon_ban_entry:nth-last-child(1) div.entry_info { --translate-x: 4%; }
div#ban_pick_board div.ban_side.blue ul.weapon_ban_selection li.weapon_ban_entry:nth-last-child(2) div.entry_info { --translate-x: 8%; }
div#ban_pick_board div.ban_side.blue ul.weapon_ban_selection li.weapon_ban_entry:nth-last-child(3) div.entry_info { --translate-x: 12%; }
div#ban_pick_board div.ban_side.blue ul.weapon_ban_selection li.weapon_ban_entry:nth-last-child(4) div.entry_info { --translate-x: 16%; }
div#ban_pick_board div.ban_side.blue ul.weapon_ban_selection li.weapon_ban_entry:nth-last-child(5) div.entry_info { --translate-x: 24%; }
div#ban_pick_board div.ban_side.red ul.weapon_ban_selection li.weapon_ban_entry div.entry_info div.pick_step_cursor span::before { content: '◀\A0'; }
div#ban_pick_board div.ban_side.blue ul.weapon_ban_selection li.weapon_ban_entry div.entry_info div.pick_step_cursor span::before { content: '\A0▶'; }


/* Versus progress board */
div#versus_record_board { position: absolute; display: none; flex-direction: row; flex-wrap: nowrap; z-index: 1; top: 0; left: 0; right: 0; --vs-borad-width: calc(100% - max(10%, 64px)); width: var(--vs-borad-width); margin: 380px auto 0; background-image: linear-gradient(90deg, transparent 0%, #422A 4%, #4228 40%, #1248 60%, #124A 96%, transparent 100%); background-size: 100%; background-position: center bottom; background-repeat: no-repeat; transition-duration: 0.4s; will-change: auto; user-select: none; }
div#versus_record_board:is([data-show="1"], [data-show="2"]) { display: flex; }
div#versus_record_board[data-show="1"] { opacity: 0; }
div#versus_record_board[data-show="2"] { opacity: 1; }
div#versus_record_board > div { }
div#versus_record_board div.side_record_board { position: relative; flex-grow: 1; max-width: calc(var(--vs-borad-width) / 2); padding-top: 24px; }
div#versus_record_board div.side_record_board > div { display: table; margin: 0 auto 20px;}
div#versus_record_board div.side_record_board div.side_player_info { --height: 120px; display: block; position: absolute; top: -34px; /* bottom: calc(var(--height) * -1); */ left: 0; right: 0; width: 100%; height: 0; /* height: var(--height); */ margin: 0; }
div#versus_record_board div.side_record_board div.side_player_info div.side_player_name_area { position: relative; display: block; top: 0; bottom: 0; left: 0; right: 0; width: 100%; max-height: var(--height); height: fit-content; margin: auto; text-align: center; }
div#versus_record_board div.side_record_board div.side_player_info div.side_player_name_area span.side_player_name { display: block; margin: auto; color: rgb(var(--signature-color-light)); font-size: 56px; font-weight: bold; text-shadow: 0px 0px 10px rgba(var(--signature-color-light) / 75%); word-break: break-word; text-overflow: ellipsis; line-height: 64px; overflow: hidden; white-space: nowrap; filter: drop-shadow(0 6px 8px black); }
div#versus_record_board div.side_record_board div.side_player_info div.side_player_uid_area { position: absolute; display: block; top: 690px; width: 100%; width: fit-content; height: fit-content; margin: auto; text-align: center; }
div#versus_record_board div.side_record_board.red div.side_player_info div.side_player_uid_area { left: 0; }
div#versus_record_board div.side_record_board.blue div.side_player_info div.side_player_uid_area { right: 0; }
div#versus_record_board div.side_record_board div.side_player_info div.side_player_uid_area span.side_player_uid { display: block; margin: auto; color: rgb(var(--signature-color-light)); font-size: 24px; font-weight: bold; text-shadow: -0.2px -0.2px 2px #222C, 0px 0px 10px rgba(var(--signature-color-lighter) / 75%); word-break: break-word; text-overflow: ellipsis; line-height: 24px; overflow: hidden; white-space: nowrap; filter: drop-shadow(0 3px 1px black); }
div#versus_record_board div.side_record_board div.side_player_info div.side_player_ap_area { position: absolute; display: block; top: 42px; width: 100%; width: fit-content; height: fit-content; margin: auto; text-align: center; }
div#versus_record_board div.side_record_board.red div.side_player_info div.side_player_ap_area { left: -4px; }
div#versus_record_board div.side_record_board.blue div.side_player_info div.side_player_ap_area { right: -4px; }
div#versus_record_board div.side_record_board div.side_player_info div.side_player_ap_area span.side_player_ap { display: block; margin: auto; padding: 0 18px 0 10px; color: rgb(var(--signature-color)); font-size: 36px; font-weight: bold; font-style: italic; text-shadow: 1px 2px 3px rgba(var(--signature-color-bright) / 95%); word-break: break-word; text-overflow: ellipsis; line-height: 36px; overflow: hidden; white-space: nowrap; filter: drop-shadow(0 4px 6px black); }
div#versus_record_board div.side_record_board div.side_record { }
div#versus_record_board div.side_record_board div.side_record:hover { z-index: 10; }
div#versus_record_board div.side_record_board div.side_record label { color: rgba(221 221 221 / 60%); text-shadow: 0 0 0 #888, 0 0 1.5px rgba(var(--main-color) / 90%); }
div#versus_record_board div.side_record_board div.side_record > div { display: table; }
div#versus_record_board div.side_record_board div.side_record > div > div { }
div#versus_record_board div.side_record_board div.side_record div.time_record { }
div#versus_record_board div.side_record_board div.side_record div.time_record label { font-weight: bold; transition-duration: 0.3s; will-change: auto; }
div#versus_record_board div.side_record_board div.side_record div.time_record span { color: rgba(var(--plain-text-base) / 97%); text-shadow: 0 0 4px black; transition-duration: 0.3s; will-change: auto; }
div#versus_record_board div.side_record_board div.side_record div.time_record > div { width: 180px; padding: 0 16px; display: table-cell; text-align: center; }
div#versus_record_board div.side_record_board div.side_record div.time_record > div > label { font-size: 22px; transition-duration: 0.3s; transition-timing-function: ease; will-change: auto; }
div#versus_record_board div.side_record_board div.side_record.record_stage div.time_record > div > label { opacity: 0; }
div#versus_record_board div.side_record_board div.side_record.record_stage div.time_record:is(:focus-within, :hover) > div > label { opacity: 1; }
div#versus_record_board div.side_record_board div.side_record.record_stage[data-result="clear"] div.time_record > div > label { opacity: 1; }
div#versus_record_board div.side_record_board div.side_record.record_total div.time_record > div.record_time_clear > label { /* color: rgba(var(--highlighted-text-base) / 80%); */ font-size: 24px; line-height: 22px; }
div#versus_record_board div.side_record_board div.side_record div.time_record > div > div { }
div#versus_record_board div.side_record_board div.side_record div.time_record > div > div label { }
div#versus_record_board div.side_record_board div.side_record div.time_record > div > div input { width: 60px; height: 36px; border: none; border-bottom: 2px solid rgba(var(--signature-color) / 90%); color: rgba(var(--signature-color-lighter) / 92%); font-size: 36px; font-weight: bold; text-shadow: 0 0 2px black; background: transparent; transition-duration: 0.3s; will-change: auto; }
div#versus_record_board div.side_record_board div.side_record div.time_record > div > div input:focus { outline: none; background-color: rgba(var(--main-color) / 50%); border-bottom-color: rgba(var(--signature-color-highlighter) / 90%); box-shadow: 0 0 10px rgba(var(--signature-color-highlighter) / 100%); }
div#versus_record_board div.side_record_board div.side_record div.time_record > div > div input:hover { background-color: rgba(var(--bgcolor-base) / 50%); border-bottom-color: rgba(var(--signature-color-lighter) / 90%); }
div#versus_record_board div.side_record_board div.side_record div.time_record > div > div span { color: rgba(var(--signature-color-lighter) / 95%); font-size: 42px; font-weight: bold; text-shadow: 0 0 4px black; line-height: 36px; }
div#versus_record_board div.side_record_board div.side_record div.time_record > div > div span.divider { font-size: 36px; text-align: center; vertical-align: top; }
div#versus_record_board div.side_record_board div.side_record div.time_record > div > div .min { text-align: right; }
div#versus_record_board div.side_record_board div.side_record div.time_record > div > div .sec { text-align: left; }
div#versus_record_board div.side_record_board div.side_record div.time_record div.record_time_remains { }
div#versus_record_board div.side_record_board div.side_record div.time_record div.record_time_remains label { }
div#versus_record_board div.side_record_board div.side_record div.time_record div.record_time_remains div { }
div#versus_record_board div.side_record_board div.side_record div.time_record div.record_time_remains div.remains_set { transition-duration: 0.3s; transition-timing-function: ease; will-change: auto; }
div#versus_record_board div.side_record_board div.side_record[data-result="tko"] div.time_record div.record_time_remains div.remains_set { opacity: 0; }
div#versus_record_board div.side_record_board div.side_record[data-result="tko"]:is(:focus-within, :hover) div.time_record div.record_time_remains div.remains_set { opacity: 1; }
div#versus_record_board div.side_record_board div.side_record div.time_record div.record_time_remains div input { }
div#versus_record_board div.side_record_board div.side_record div.time_record div.record_time_remains div span { }
div#versus_record_board div.side_record_board div.side_record div.time_record div.record_time_clear { }
div#versus_record_board div.side_record_board div.side_record div.time_record div.record_time_clear label { }
div#versus_record_board div.side_record_board div.side_record div.time_record div.record_time_clear div { }
div#versus_record_board div.side_record_board div.side_record div.time_record div.record_time_clear div span { line-height: 29px; }
div#versus_record_board div.side_record_board div.side_record div.time_record div.record_time_clear div span.clear_time { }
div#versus_record_board div.side_record_board div.side_record div.time_record div.record_time_clear div span.divider { }
div#versus_record_board div.side_record_board div.side_record div.tko_selection { position: relative; display: block; left: 0; right: 0; padding: 0 0; margin: 6px 0 0; }
div#versus_record_board div.side_record_board div.side_record div.tko_selection > div { }
div#versus_record_board div.side_record_board div.side_record div.tko_selection div.tko_summary { display: flex; }
div#versus_record_board div.side_record_board.red div.side_record div.tko_selection div.tko_summary { justify-content: left; }
div#versus_record_board div.side_record_board.blue div.side_record div.tko_selection div.tko_summary { justify-content: right; }
div#versus_record_board div.side_record_board div.side_record div.tko_selection div.tko_summary > * { font-size: 22px; font-weight: bold; }
div#versus_record_board div.side_record_board div.side_record div.tko_selection div.tko_summary label { width: 214px; padding: 0; text-align: center; transition-duration: 0.3s; will-change: auto; }
div#versus_record_board div.side_record_board div.side_record div.tko_selection:hover div.tko_summary label { color: rgba(var(--signature-color) / 90%); }
div#versus_record_board div.side_record_board div.side_record:not([data-result=""]) div.tko_selection div.tko_summary label { opacity: 0; }
div#versus_record_board div.side_record_board div.side_record:not([data-result=""]):is(:focus-within, :hover) div.tko_selection div.tko_summary label { opacity: 1; }
div#versus_record_board div.side_record_board div.side_record div.tko_selection div.tko_summary span { font-weight: bold; color: rgba(var(--signature-color-light) / 80%); text-shadow: 0 0 0 #888, 0 0 2px rgba(var(--main-color) / 90%); }
div#versus_record_board div.side_record_board div.side_record div.tko_selection div.tko_summary span.tko_selected { margin: auto; }
div#versus_record_board div.side_record_board div.side_record div.tko_selection div.tko_selection_layer { position: absolute; display: none; z-index: 10; bottom: -67px; left: -16px; right: -16px; width: fit-content; margin: auto; padding: 5px 10px 6px; border-radius: 10px; background-color: #FFF8; }
div#versus_record_board div.side_record_board div.side_record div.tko_selection:hover div.tko_selection_layer { display: block; }
div#versus_record_board div.side_record_board.red div.side_record div.tko_selection div.tko_selection_layer { text-align: left; }
div#versus_record_board div.side_record_board.blue div.side_record div.tko_selection div.tko_selection_layer { text-align: right; }
div#versus_record_board div.side_record_board div.side_record div.tko_selection div.tko_selection_layer div.tko_selections { }
div#versus_record_board div.side_record_board.red div.side_record div.tko_selection div.tko_selection_layer div.tko_selections { text-align: right; }
div#versus_record_board div.side_record_board.blue div.side_record div.tko_selection div.tko_selection_layer div.tko_selections { text-align: left; }
div#versus_record_board div.side_record_board div.side_record div.tko_selection div.tko_selection_layer div.tko_selections label { color: rgba(var(--signature-color) / 90%); font-size: 20px; font-weight: bold; text-shadow: 0 0 0 #888, 0 0 1.5px rgba(var(--highlighted-text-base) / 90%); line-height: 22px; vertical-align: text-top; transition-duration: 0.3s; will-change: auto; }
div#versus_record_board div.side_record_board div.side_record div.tko_selection div.tko_selection_layer div.tko_selections button { margin: 1px 0; border: solid 1px rgba(var(--main-color) / 40%); border-radius: 5px; background-color: rgba(var(--bgcolor-base) / 75%); color: rgba(var(--main-color) / 75%); font-size: 19px; cursor: pointer; transition-duration: 0.3s; will-change: auto; }
div#versus_record_board div.side_record_board div.side_record div.tko_selection div.tko_selection_layer div.tko_selections button:focus { outline: none; box-shadow: 0 0 5px 0.25px rgba(var(--main-color) / 90%); }
div#versus_record_board div.side_record_board div.side_record div.tko_selection div.tko_selection_layer div.tko_selections button:hover { background-color: rgba(var(--signature-color-lighter) / 80%); }
div#versus_record_board div.side_record_board div.side_record div.tko_selection div.tko_selection_layer div.tko_selections button:active { background-color: rgba(var(--signature-color-highlighter) / 90%); }
div#versus_record_board div.side_record_board div.side_record:last-child { margin-bottom: 16px; padding-top: 20px; }
div#versus_record_board div#versus_progress_panel { position: relative; width: 20.931%; max-width: 360px; min-width: 220px; padding-top: 24px; }
div#versus_record_board div#versus_progress_panel > div { }
div#versus_record_board div#versus_progress_panel div.progress_panel { height: 100px; margin-bottom: 20px; transition-duration: 0.3s; will-change: auto; }
div#versus_record_board div#versus_progress_panel div.progress_panel.stage3 { margin-bottom: 0; }
div#versus_record_board div#versus_progress_panel div.progress_panel > div { text-align: center; }
div#versus_record_board div#versus_progress_panel div.progress_panel div.title { }
div#versus_record_board div#versus_progress_panel div.progress_panel div.title span { color: rgba(var(--color-focusive-light) / 90%); font-size: 34px; font-weight: bold; font-family: 'Noto Sans KR'; text-shadow: 0 0 5px rgba(var(--main-color) / 70%); }
div#versus_record_board div#versus_progress_panel div.progress_panel div.superiority { position: relative; display: flex; flex-wrap: nowrap; height: 22px; margin: 10px 0; border-radius: 6px; overflow: hidden; transition-duration: 0.5s; will-change: auto; }
div#versus_record_board div#versus_progress_panel div.progress_panel[data-show="1"] div.superiority { box-shadow: inset 0 0 4px 1px rgba(var(--main-color) / 90%), 0 0 8px 0 rgba(var(--highlighted-text-base) / 30%); }
div#versus_record_board div#versus_progress_panel div.progress_panel div.superiority div { }
div#versus_record_board div#versus_progress_panel div.progress_panel div.superiority div.graph { transition-duration: 1s; transition-timing-function: ease; will-change: auto; }
div#versus_record_board div#versus_progress_panel div.progress_panel div.superiority div.graph:is(.red, .blue) { flex-grow: 0; background-color: rgba(var(--signature-color) / 80%); }
div#versus_record_board div#versus_progress_panel div.progress_panel div.superiority div.graph.empty { flex-grow: 1; }
div#versus_record_board div#versus_progress_panel div.progress_panel:is([data-show="1"], [data-show="2"]) div.superiority div.graph.empty { flex-grow: 0; }
div#versus_record_board div#versus_progress_panel div.progress_panel[data-show="1"] div.superiority div.graph:is(.red, .blue) { flex-grow: 3; }
div#versus_record_board div#versus_progress_panel div.progress_panel[data-show="1"] div.superiority div.graph[data-superior="0"]:is(.red, .blue) { background-color: rgba(var(--signature-color) / 50%); }
div#versus_record_board div#versus_progress_panel div.progress_panel[data-show="1"] div.superiority div.graph[data-superior="1"]:is(.red, .blue) { background-color: rgba(var(--signature-color-highlighter) / 95%); box-shadow: rgba(var(--signature-color-lighter) / 100%); }
div#versus_record_board div#versus_progress_panel div.progress_panel[data-show="1"] div.superiority div.graph.red[data-superior="1"] { box-shadow: inset 6px 6px 6px 5px #FFF6, 8px 0 16px 4px rgba(var(--signature-color-lighter) / 100%); }
div#versus_record_board div#versus_progress_panel div.progress_panel[data-show="1"] div.superiority div.graph.blue[data-superior="1"] { box-shadow: inset 6px 6px 6px 5px #FFF6, -8px 0 16px 4px rgba(var(--signature-color-lighter) / 100%); }
div#versus_record_board div#versus_progress_panel div.progress_panel div.superiority span { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; }
div#versus_record_board div#versus_progress_panel div.progress_panel div.superiority span.time_differ { color: #000E; font-family: 'Lato'; font-size: 20px; font-weight: 600; text-shadow: 0 0 4px white; line-height: 22px; opacity: 0; transition-duration: 0.5s; transition-timing-function: ease; will-change: auto; }
div#versus_record_board div#versus_progress_panel div.progress_panel[data-show="1"] div.superiority span.time_differ { font-size: 26px; opacity: 1; transition-delay: 0.5s; }
div#versus_record_board div#versus_progress_panel div.progress_panel.result { /* position: absolute; bottom: 0; left: 0; right: 0; */ height: 70px; margin-top: 24px; /* margin-bottom: -70px; */ }
div#versus_record_board div#versus_progress_panel div.progress_panel.result { }
div#versus_record_board div#versus_progress_panel div.progress_panel.result:hover { }
div#versus_record_board div#versus_progress_panel div.progress_panel.result div.title { opacity: 0.6; transition-duration: 0.3s; transition-timing-function: ease; will-change: auto; }
div#versus_record_board div#versus_progress_panel div.progress_panel.result:hover div.title { opacity: 1; }
div#versus_record_board div#versus_progress_panel div.progress_panel.result:not([data-show=""]) div.title { opacity: 1; }
div#versus_record_board div#versus_progress_panel div.progress_panel.result div.title span { font-size: 22px; line-height: 32px; filter: drop-shadow(0 6px 8px black); transition-duration: 0.3s; transition-timing-function: ease; will-change: auto; }
div#versus_record_board div#versus_progress_panel div.progress_panel.result[data-show="2"] div.title span { font-size: 30px; }
div#versus_record_board div#versus_progress_panel div.progress_panel.result div.superiority { height: 30px; margin: 9px 0; box-shadow: inset 0 0 4px 1px rgba(var(--main-color) / 90%), 0 0 8px 0 rgba(var(--highlighted-text-base) / 30%), 0 6px 8px 6px #333C; opacity: 0; transition-delay: 0.3s; }
div#versus_record_board div#versus_progress_panel div.progress_panel.result:not([data-show=""]) div.superiority { opacity: 1; }
div#versus_record_board div#versus_progress_panel div.progress_panel.result:hover div.superiority { opacity: 1; }
/* div#versus_record_board div#versus_progress_panel div.progress_panel.result div.superiority div.graph.empty { flex-grow: 0; } */
div#versus_record_board div#versus_progress_panel div.progress_panel.result div.superiority span.time_differ { line-height: 28px; opacity: 1; }
div#versus_record_board div#versus_progress_panel div.versus { position: absolute; top: -80px; /* bottom: -78px; */ left: 0; right: 0; margin: auto; /* margin-top: 24px; */ margin-top: 54px;  color: rgb(var(--color-important-light)); font-size: 36px; font-weight: bold; font-family: 'Noto Sans KR'; text-align: center; text-shadow: 0px 0px 10px rgba(var(--color-important-lighter) / 75%); filter: drop-shadow(0 6px 8px black); transition-duration: 0.6s; transition-timing-function: ease; will-change: auto; }



/* Character selection board */


/* float layers */
div.float_layer { display: none; position: absolute; z-index: 2000; }

/* Version Display */
div.float_layer#version_display { display: block; top: 0; bottom: max(calc(100% - 1080px + 96px), 0px); right: 24px; height: fit-content; margin: auto auto 20px; padding: 0; transition-timing-function: ease-out; transition-duration: 0.7s; will-change: auto; user-select: none; }
div.float_layer#version_display:not([data-full=""]) { z-index: 2012; bottom: max(calc(100% - 1080px), 0px); margin-bottom: 11px; transition-duration: 1s; }
div.float_layer#version_display[data-full="2"] { margin-bottom: 2px; }
div.float_layer#version_display > div { color: var(--plain-text-rgb); font-size: 16px; line-height: 16px; text-align: right; }
div.float_layer#version_display > div.tool_title { color: rgba(var(--plain-text-base) / 60%); font-weight: bold; }
div.float_layer#version_display > div.version_number {  }
div.float_layer#version_display > div.release_line { }
div.float_layer#version_display > div.release_line span.release { color: rgba(var(--plain-text-base) / 80%); transition-duration: 0.7s; will-change: auto; }
div.float_layer#version_display[data-full="2"] > div.release_line span.release { opacity: 0; transition-duration: 0.4s; }
div.float_layer#version_display > div.release_line span.release_date { color: rgba(var(--plain-text-base) / 80%); }
div.float_layer#version_display > div.powered_by { color: var(--plain-text-color); font-weight: bold; }

/* Timer */
div.float_layer#timer { display: flex; top: 0; bottom: max(calc(100% - 1080px), 0px); right: 20px; height: fit-content; margin: auto auto 20px; padding: 12px 14px; border-radius: 8px; background-color: rgba(var(--main-color) / 30%); transition-duration: 0.2s; transition-timing-function: ease-out; will-change: auto; }
div.float_layer#timer > div { }
div.float_layer#timer div#timer_display { display: table; margin-left: -8px; padding: 3px 12px 4px 0; color: var(--plain-text-rgb); font-size: 56px; font-weight: bold; line-height: 54px; overflow: hidden; user-select: none; cursor: pointer; transition-duration: 0.2s; transition-timing-function: ease-out; will-change: auto; }
div.float_layer#timer div#timer_display div { }
div.float_layer#timer div#timer_display div#timer_icon_animated { position: relative; }
div.float_layer#timer div#timer_display div#timer_icon_animated lottie-player { position: absolute; width: 96px; height: 96px; margin: -20px -16px -16px -15px; }
div.float_layer#timer div#timer_display span { display: inline-block; padding-bottom: 2px; text-align: center; }
div.float_layer#timer div#timer_display span.icon_place { width: 52px; padding-bottom: 1px; font-size: 46px; vertical-align: top; opacity: 0; user-select: none; }
div.float_layer#timer div#timer_display span.div_place { width: 16px; }
div.float_layer#timer div#timer_display span.div_place.colon { display: none; color: rgba(var(--plain-text-base) / 35%); }
div.float_layer#timer div#timer_display span.div_place.point { }
div.float_layer#timer div#timer_display span.num_place { width: 32px; }
div.float_layer#timer div#timer_display span.num_place.min_place { display: none; color: rgba(var(--plain-text-base) / 35%); }
div.float_layer#timer div#timer_display span.num_place.sec_place { }
div.float_layer#timer div#timer_display span.num_place.cs_place { width: 24px; font-size: 42px; }
div.float_layer#timer div#timer_ui { display: inline-flex; flex-direction: column; flex-wrap: nowrap; }
div.float_layer#timer div#timer_ui button { padding: 2.5px 6px; border: solid 1px #666D; border-radius: 4px; background-color: #EEE6; cursor: pointer; transition-duration: 0.2s; will-change: auto; }
div.float_layer#timer div#timer_ui button:focus { border-color: rgba(var(--color-focusive) / 60%); outline: none; }
div.float_layer#timer div#timer_ui button:hover { border-style: outset; background-color: #EEED; }
div.float_layer#timer div#timer_ui button:active { border-style: inset;  background-color: #AAAD; }
div.float_layer#timer div#timer_setting { position: absolute;  top: 0; left: 0; right: 0; height: 0; overflow: visible; /* opacity: 0; */ transition-duration: 0.25s; will-change: auto; user-select: none; }
/* div.float_layer#timer:hover div#timer_setting { opacity: 1; } */
div.float_layer#timer div#timer_setting > div { position: absolute; }
div.float_layer#timer div#timer_setting div.stack_holder { display: none; bottom: 0; left: 0; right: 0; height: fit-content; border-radius: 8px; background-color: #FFF8; background-image: linear-gradient(90deg, #8884, #8884); }
div.float_layer#timer div#timer_setting[data-folded=""]:hover div.stack_holder { display: block; }
div.float_layer#timer div#timer_setting[data-folded="0"] div.stack_holder { display: block; }
div.float_layer#timer div#timer_setting[data-folded="1"] div.stack_holder { display: none; }
div.float_layer#timer div#timer_setting div.stack_holder ul { display: flex; list-style: none; margin: 0; padding: 0; }
div.float_layer#timer div#timer_setting div.stack_holder ul li { }
div.float_layer#timer div#timer_setting div.stack_holder ul.timer_options { padding: 6px 8px; }
div.float_layer#timer div#timer_setting div.stack_holder ul.timer_options > label.option_set_title { margin-right: 5px; font-weight: bold; letter-spacing: -1px; }
div.float_layer#timer div#timer_setting div.stack_holder ul.timer_options li { padding: 0 5px 1px 2px; background-color: rgba(var(--bgcolor-base) / 60%); border-radius: 20px; white-space: nowrap; cursor: pointer; }
div.float_layer#timer div#timer_setting div.stack_holder ul.timer_options li:not(:last-child) { margin-right: 4px; }
div.float_layer#timer div#timer_setting div.stack_holder ul.timer_options li input { transition-duration: 0.2s; will-change: auto; }
div.float_layer#timer div#timer_setting div.stack_holder ul.timer_options li input[type="checkbox"] { vertical-align: bottom; cursor: pointer; }
div.float_layer#timer div#timer_setting div.stack_holder ul.timer_options li input[type="number"] { width: 38px; background-color: rgba(var(--bgcolor-base) / 50%); border: solid 1px #8888; border-radius: 15px; color: var(--plain-text-rgb); text-align: right; }
div.float_layer#timer div#timer_setting div.stack_holder ul.timer_options li input[type="number"]:focus { outline: none; box-shadow: 0 0 4px 0 rgba(var(--main-color) / 30%); }
div.float_layer#timer div#timer_setting div.stack_holder ul.timer_options li input[type="number"]:hover { border-color: rgba(var(--main-color) / 50%); }
div.float_layer#timer div#timer_setting div.stack_holder ul.timer_options li label { letter-spacing: -0.7px; cursor: pointer; }
div.float_layer#timer div#timer_setting div.stack_holder ul.timer_options li label[for="timer_adefault_timeout_setup_phase_min"] { margin-right: 2px; }
div.float_layer#timer div#timer_setting div.stack_holder ul.timer_options.volume_handler { }
div.float_layer#timer div#timer_setting div.stack_holder ul.timer_options.volume_handler li { display: flex; width: -webkit-fill-available; cursor: default; }
div.float_layer#timer div#timer_setting div.stack_holder ul.timer_options.volume_handler li label { width: 74px; font-weight: bold; cursor: pointer; }
div.float_layer#timer div#timer_setting div.stack_holder ul.timer_options.volume_handler li span.value_indicator { width: 26px; text-align: right; }
div.float_layer#timer div#timer_setting div.stack_holder ul.timer_options.volume_handler li input[type="range"] { flex-grow: 1; }
div.float_layer#timer div#timer_setting div.settings_area { position: absolute; display: inline-block; top: 0; right: 62px; width: 70px; }
div.float_layer#timer div#timer_setting div.settings_area div#timer_default_display { position: absolute; display: table; margin: 1px 0; color: rgba(var(--plain-text-base) / 40%); font-size: 16px; font-weight: bold; line-height: 13px; opacity: 0; transition-duration: 0.3s; transition-timing-function: ease-out; will-change: auto; }
div.float_layer#timer div#timer_setting[data-folded="0"] div.settings_area div#timer_default_display { opacity: 1; }
div.float_layer#timer:hover div#timer_setting div.settings_area div#timer_default_display { opacity: 1; }
div.float_layer#timer div#timer_setting div.settings_area div#timer_default_display span { display: inline-block; padding-bottom: 2px; text-align: center; }
div.float_layer#timer div#timer_setting div.settings_area div#timer_default_display span.display_title { display: block; color: rgba(var(--plain-text-base) / 55%); font-size: 10px; line-height: 8px; text-align: left; }
div.float_layer#timer div#timer_setting div.settings_area div#timer_default_display span.num_place { width: 8px; }
div.float_layer#timer div#timer_setting div.settings_area div#timer_default_display span.display_seconds { padding: 0 1px; }
div.float_layer#timer div#timer_setting div.settings_area svg.folder_icon { position: absolute; display: block; z-index: -1; top: 4px; right: 9.5px; width: 21px; transition-duration: 0.3s; transition-timing-function: ease-out; will-change: auto; }
div.float_layer#timer div#timer_setting[data-folded=""] div.settings_area svg.folder_icon { transform: rotateX(90deg); }
div.float_layer#timer div#timer_setting[data-folded="0"] div.settings_area svg.folder_icon { transform: rotateX(0deg); }
div.float_layer#timer div#timer_setting[data-folded="1"] div.settings_area svg.folder_icon { transform: rotateX(180deg); }
div.float_layer#timer div#timer_setting div.settings_area button#settings_icon { display: block; margin: 3px 6.5px 0 auto; padding: 0 0 2px 1px; border: solid 1px #6660; border-radius: 8px; background-color: rgba(var(--bgcolor-base) / 10%); font-size: 17px; cursor: pointer; transition-duration: 0.2s; will-change: auto; }
div.float_layer#timer div#timer_setting div.settings_area button#settings_icon:focus { border-color: #9996; outline: none; box-shadow: 0 0 8px 0 rgba(var(--main-color) / 30%); }
div.float_layer#timer div#timer_setting div.settings_area button#settings_icon:hover { border-style: outset; background-color: rgba(var(--bgcolor-base) / 70%); }
div.float_layer#timer div#timer_setting div.settings_area button#settings_icon:active { border-style: inset;  background-color: rgba(var(--bgcolor-base) / 90%); }
div.float_layer#timer[data-side="red"] { background-color: rgba(var(--color-side-red) / 30%); }
div.float_layer#timer[data-side="red"] div#timer_display { color: rgba(var(--color-side-red-highlight)); }
div.float_layer#timer[data-side="red"] div#timer_display span.div_place.colon { color: rgba(var(--color-side-red-highlight) / 35%); }
div.float_layer#timer[data-side="red"] div#timer_display span.num_place.min_place { color: rgba(var(--color-side-red-highlight) / 35%); }
div.float_layer#timer[data-side="blue"] { background-color: rgba(var(--color-side-blue) / 30%); }
div.float_layer#timer[data-side="blue"] div#timer_display { color: rgba(var(--color-side-blue-highlight)); }
div.float_layer#timer[data-side="blue"] div#timer_display span.div_place.colon { color: rgba(var(--color-side-blue-highlight) / 35%); }
div.float_layer#timer[data-side="blue"] div#timer_display span.num_place.min_place { color: rgba(var(--color-side-blue-highlight) / 35%); }

div.float_layer#timer[data-hide="1"] { filter: blur(8px) opacity(0); }
div.float_layer#timer[data-hide="1"]:hover { z-index: 3000; filter: blur(0) opacity(1); }


div.float_layer#timer_relay { display: flex; top: 0; bottom: max(calc(100% - 1080px), 0px); left: 16px; height: fit-content; margin: auto auto 20px; padding: 0; transform: skewX(-18deg); opacity: 0; transition-duration: 0.3s; transition-timing-function: ease-out; will-change: auto; }
div.float_layer#timer_relay[data-show="1"] { opacity: 1; }
div.float_layer#timer_relay > div { }
div.float_layer#timer_relay div#timer_display { display: table; margin-left: -8px; padding: 3px 12px 4px 0; color: rgba(var(--plain-text-base) / 30%); font-size: 128px; font-weight: bold; line-height: 92px; overflow: hidden; filter: drop-shadow(12px -6px 9px #000); user-select: none; transition-duration: 0.2s; transition-timing-function: ease-out; will-change: auto; }
div.float_layer#timer_relay div#timer_display span { display: inline-block; padding-bottom: 2px; text-align: center; }
div.float_layer#timer_relay div#timer_display span.div_place { width: 32px; }
div.float_layer#timer_relay div#timer_display span.div_place.point { }
div.float_layer#timer_relay div#timer_display span.num_place { width: 66px; }
div.float_layer#timer_relay div#timer_display span.num_place.sec_place { }
div.float_layer#timer_relay div#timer_display span.num_place.cs_place { width: 52px; font-size: 92px; }
div.float_layer#timer_relay[data-side="red"] div#timer_display { color: rgba(var(--color-side-red-highlight) / 30%); filter: drop-shadow(12px -6px 9px rgba(var(--color-side-red-highlight))); }
div.float_layer#timer_relay[data-side="blue"] div#timer_display { color: rgba(var(--color-side-blue-highlight) / 30%); filter: drop-shadow(12px -6px 9px rgba(var(--color-side-blue-highlight))); }

div.float_layer#timer_relay[data-hide="1"] { filter: blur(8px) opacity(0); }
div.float_layer#timer_relay[data-hide="1"][data-show="1"] { filter: blur(0) opacity(1); mix-blend-mode: color-burn; }
body.dark div.float_layer#timer_relay[data-hide="1"][data-show="1"] { mix-blend-mode: color-dodge; }

/* Search Results */
div.float_layer#search_result { --current-side-color: var(--color-side-red); --counter-position: right; top: 0; bottom: 0; left: 0; right: 0; width: 420px; height: 80vh; margin: 140px auto auto; padding: 24px 0; background-color: rgba(var(--bgcolor-base) / 0.85); border-radius: 24px; box-shadow: 0 0 12px 1px #0008; overflow-y: auto; scroll-behavior: smooth; user-select: none; }
div.float_layer#search_result div { }
div.float_layer#search_result div.list_holder { }
div.float_layer#search_result div.list_holder ul { }
div.float_layer#search_result div.list_holder ul.list_host { --icon-size: 96px; display: flex; list-style: none; flex-wrap: nowrap; flex-direction: column; margin: 0 0; padding: 0 0; }
div.float_layer#search_result div.list_holder ul.list_host li { position: relative; margin: 0 0; padding: 0 0; background-color: transparent; background-image: linear-gradient(90deg, transparent, rgba(var(--current-side-color) / 0.75) 35%, rgba(var(--current-side-color) / 0.85) 50%,rgba(var(--current-side-color) / 0.75) 65%, transparent); background-repeat: no-repeat; background-size: 1500% 100%; background-position: var(--counter-position); transition-duration: 0.3s; will-change: auto; cursor: pointer; }
div.float_layer#search_result div.list_holder ul.list_host li[data-cursor="1"] { background-size: 100% 100%; }
div.float_layer#search_result div.list_holder ul.list_host li:hover { background-color: rgba(var(--main-color) / 0.1); box-shadow: 0 0 6px rgba(var(--main-color) / 0.5); }
div.float_layer#search_result div.list_holder ul.list_host li div.item_wraper { position: relative; display: flex; flex-wrap: nowrap; flex-direction: row; overflow: hidden; }
div.float_layer#search_result div.list_holder ul.list_host li div.item_wraper div { display: block; }
div.float_layer#search_result div.list_holder ul.list_host li div.item_wraper div.icon_holder { width: var(--icon-size); height: var(--icon-size); }
div.float_layer#search_result div.list_holder ul.list_host li div.item_wraper div.icon_holder img.icon { width: 100%; height: 100%; filter: drop-shadow(12px 0px 1px #222D) brightness(1); transition-duration: 0.3s; will-change: auto; }
div.float_layer#search_result div.list_holder ul.list_host li[data-cursor="1"] div.item_wraper div.icon_holder img.icon { transform: translateX(-2px); filter: drop-shadow(20px 0px 3px #222E) brightness(1.2); }
div.float_layer#search_result div.list_holder ul.list_host li:hover div.item_wraper div.icon_holder img.icon { transform: translateX(-2px); filter: drop-shadow(20px 0px 3px #222E) brightness(1.2); }
div.float_layer#search_result div.list_holder ul.list_host li div.item_wraper div.main_info { display: flex; flex-wrap: nowrap; flex-direction: column; justify-content: center; margin: 0px 8px; }
div.float_layer#search_result div.list_holder ul.list_host li div.item_wraper div.main_info span { display: block; font-size: 24px; }
div.float_layer#search_result div.list_holder ul.list_host li div.item_wraper div.main_info span.rarity { font-size: 20px; }
div.float_layer#search_result div.list_holder ul.list_host li div.item_wraper div.main_info span.rarity::after { letter-spacing: -8px; text-shadow: 0px 0px 1px #841; filter: drop-shadow(0px 0px 3px #530); transition-duration: 0.05s; will-change: auto; }
div.float_layer#search_result div.list_holder ul.list_host li[data-cursor="1"] div.item_wraper div.main_info span.rarity::after { text-shadow: 0px 0px 3px #C62; filter: drop-shadow(0px 0px 5px #FEA); }
div.float_layer#search_result div.list_holder ul.list_host li:active div.item_wraper div.main_info span.rarity::after { text-shadow: 0px 0px 4px #C62; filter: drop-shadow(0px 0px 7px #FEA); }
div.float_layer#search_result div.list_holder ul.list_host li[data-rarity="1"] div.item_wraper div.main_info span.rarity::after { content: "⭐"; }
div.float_layer#search_result div.list_holder ul.list_host li[data-rarity="2"] div.item_wraper div.main_info span.rarity::after { content: "⭐⭐"; }
div.float_layer#search_result div.list_holder ul.list_host li[data-rarity="3"] div.item_wraper div.main_info span.rarity::after { content: "⭐⭐⭐"; }
div.float_layer#search_result div.list_holder ul.list_host li[data-rarity="4"] div.item_wraper div.main_info span.rarity::after { content: "⭐⭐⭐⭐"; }
div.float_layer#search_result div.list_holder ul.list_host li[data-rarity="5"] div.item_wraper div.main_info span.rarity::after { content: "⭐⭐⭐⭐⭐"; }
div.float_layer#search_result div.list_holder ul.list_host li div.item_wraper div.main_info span.name { margin: 0 -30% 0 calc(-30% + 2px); padding: 0 30%; color: var(--plain-text-color); font-weight: bold; transition-duration: 0.3s; will-change: auto; }
div.float_layer#search_result div.list_holder ul.list_host li[data-cursor="1"] div.item_wraper div.main_info span.name { color: rgb(var(--main-color)); text-shadow: 0px 0px 4px var(--bgcolor-rgb); background-image: radial-gradient(rgba(var(--color-focusive-light) / var(--sequence-title-background-strength)) 0%, rgba(var(--color-focusive-light) / var(--sequence-title-background-strength)) 20%, transparent 70%); background-repeat: no-repeat; background-position: center 70%; background-size: 100% 50%; animation: bg_blink3 infinite 0.85s ease alternate; }
div.float_layer#search_result div.list_holder ul.list_host li:hover div.item_wraper div.main_info span.name { color: rgb(var(--main-color)); text-shadow: 0px 0px 2px var(--bgcolor-rgb); background-image: radial-gradient(rgba(var(--color-focusive-light) / var(--sequence-title-background-strength)) 0%, rgba(var(--color-focusive-light) / var(--sequence-title-background-strength)) 20%, transparent 70%); background-repeat: no-repeat; background-position: center 70%; background-size: 100% 50%; animation: bg_blink3 infinite 0.85s ease alternate; }

/* Credit side extras */
div.float_layer#credit_extra { top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(var(--bgcolor-base) / 0.8); }
div.float_layer#credit_extra > div { position: absolute; display: flex; flex-direction: column; top: 0; margin: 32px 24px; }
div.float_layer#credit_extra > div img { }
div.float_layer#credit_extra > div img.profile { --icon-size: 240px; width: var(--icon-size); height: var(--icon-size); }
div.float_layer#credit_extra > div .icon { width: 30px; margin: auto; margin-right: 8px; }
div.float_layer#credit_extra > div span { font-family: 'Noto Sans KR'; margin: 2px 0; color: var(--plain-text-rgb); font-size: 20px; font-weight: bold; }
div.float_layer#credit_extra > div span.side_main { font-size: 24px; line-height: 24px; }
div.float_layer#credit_extra > div span.name { font-size: 36px; line-height: 36px; text-align: center; }
div.float_layer#credit_extra > div span a { display: inline-flex; }
div.float_layer#credit_extra > div hr { width: 100%; }
div.float_layer#credit_extra > div div { display: inline-flex; flex-direction: column; margin-top: 8px; }
div.float_layer#credit_extra > div div span { min-height: 36px; line-height: 36px; }
div.float_layer#credit_extra > div.left_side { left: 0; }
div.float_layer#credit_extra > div.right_side { right: 0; }
div.float_layer#credit_extra > div > hr { border-style: groove; border-width: 5px; border-inline: none; }

/* popup layers */
div.popup_layer { display: none; flex-direction: column; position: absolute; z-index: 3000; top: 0; bottom: 0; left: 0; right: 0; margin: auto; border-radius: 12px; background-color: rgba(var(--bgcolor-base) / 0.9); box-shadow: 4px 4px 12px 1px black; overflow: hidden; }
div.popup_layer[style*="display: block"] { display: flex !important; }
div.popup_layer div.popup_header { position: relative; display: flex; flex-wrap: nowrap; width: 100%; height: 38px; background-color: rgba(var(--bgcolor-base) / 0.5); box-shadow: 0 0 8px 0 #0004; }
div.popup_layer div.popup_header div.popup_title { flex-grow: 1; padding-left: 4px; }
div.popup_layer div.popup_header div.popup_title span { font-size: 24px; line-height: 36px; }
div.popup_layer div.popup_header div.popup_title span::before { content: attr(data-icon); }
div.popup_layer div.popup_header div.popup_title span::after { content: attr(data-title); }
div.popup_layer div.popup_header div.popup_closer { width: 38px; text-align: center; cursor: pointer; }
div.popup_layer div.popup_header div.popup_closer span { font-size: 28px; font-weight: bold; line-height: 32px; }
div.popup_layer div.popup_header div.popup_closer span:hover { text-shadow: 0px 0px 4px var(--plain-text-color); }
div.popup_layer div.popup_header div.popup_closer span:active { color: var(--bgcolor-rgb); }
div.popup_layer div.popup_header div.popup_closer span::before { content: "×"; }
div.popup_layer div.popup_content { overflow-x: hidden; overflow-y: auto; }
div.popup_layer#credits { bottom: 250px; width: 780px; height: 640px; }
div.popup_layer#credits div.popup_header div.popup_title { }
div.popup_layer#credits div.popup_header div.popup_title span::before { content: attr(data-icon); }
div.popup_layer#credits div.popup_header div.popup_title span::after { content: attr(data-title); }
div.popup_layer#credits div.popup_content { padding: 8px 12px; color: var(--plain-text-color); font-size: 18px; text-shadow: 0 0 1px rgb(var(--main-color) / 50%); }
div.popup_layer#credits div.popup_content div { }
div.popup_layer#credits div.popup_content > div { margin-bottom: 32px; }
div.popup_layer#credits div.popup_content > div span.title { display: flex; font-weight: bold; }
div.popup_layer#credits div.popup_content > div span.subject { color: rgb(var(--plain-text-base) / 66.666%); font-size: 16px; font-weight: bolder; }
div.popup_layer#credits div.popup_content > div span.content { display: block; }
div.popup_layer#credits div.popup_content > div span.content a:link { color: #278D; }

/* snow field for christ mas edition */
div#snow_field { width: 100vw; height: 0; overflow: overlay; }
div#snow_field div.snow { --aero: 30px; top: 0; left: calc(var(--aero) * -1); position: fixed; width: 10px; height: 10px; border: solid var(--aero) transparent; background-clip: content-box; background-color: white; border-radius: 50%; filter: drop-shadow(0 0 16px #fffd) drop-shadow(0 0 42px #fffe); transition-duration: 2.8s; transition-timing-function: cubic-bezier(0.5, 1, 0.89, 1); transition-delay: 0.6s; will-change: auto; }
div#snow_field div.snow:hover { top: calc(40px * var(--dirv)); left: calc((60px * var(--dir)) + var(--aero) * -1); transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); transition-delay: 0s; }

/* Sound Resource Panel */
div#res_sounds.resource_holder { position: absolute; display: none; z-index: 3000; top:0; bottom: 280px; left: 0; right: 0; width: 1150px; height: 680px; margin: auto; background-color: rgba(var(--bgcolor-base) / 0.85); box-shadow: 0 0 30px 1px #000d; user-select: none; }
div#res_sounds.resource_holder[style*="display: block"] { display: table !important; }
div#res_sounds.resource_holder div.common_control_panel { position: relative; display: flex; flex-wrap: nowrap; padding: 20px 20px 0px; }
div#res_sounds.resource_holder div.common_control_panel label { padding: 0 8px; font-weight: bold; }
div#res_sounds.resource_holder div.common_control_panel span#volume_value { width: 32px; text-align: right; cursor: pointer; }
div#res_sounds.resource_holder div.common_control_panel input#sound_controls { }
div#res_sounds.resource_holder div.common_control_panel input#sound_volume { margin: 0 6px; flex-grow: 1; }
div#res_sounds.resource_holder div.common_control_panel input#clip_id { display: none; }
div#res_sounds.resource_holder div.common_control_panel div.popup_closer { position: absolute; top: 0; right: 0; width: 33px; text-align: center; cursor: pointer; }
div#res_sounds.resource_holder div.common_control_panel div.popup_closer span { font-size: 28px; font-weight: bold; line-height: 32px; }
div#res_sounds.resource_holder div.common_control_panel div.popup_closer:hover span { text-shadow: 0px 0px 4px var(--plain-text-color); }
div#res_sounds.resource_holder div.common_control_panel div.popup_closer:active span { color: var(--bgcolor-rgb); }
div#res_sounds.resource_holder div.common_control_panel div.popup_closer span::before { content: "×"; }
div#res_sounds.resource_holder div.sound_panel_area { position: relative; height: 640px; overflow-x: hidden; overflow-y: auto; }
div#res_sounds.resource_holder div.sound_panel_area ul#sound_panel { display: flex; list-style: none; flex-direction: row; flex-wrap: wrap; margin: 0; padding: 20px; overflow-y: auto; }
div#res_sounds.resource_holder div.sound_panel_area ul#sound_panel li { }
div#res_sounds.resource_holder div.sound_panel_area ul#sound_panel li button { min-width: 58px; min-height: 58px; width: auto; height: 100%; font-size: 30px; font-weight: 500; vertical-align: top; }
div#res_sounds.resource_holder div.sound_panel_area ul#sound_panel li audio { }

/* Resource Loader area (Splash) */
div#loading_cover.resource_holder { position: absolute; display: table; z-index: 4000; top:0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; opacity: 1; transition-duration: 2.4s; user-select: none; will-change: auto; }
div#loading_cover.resource_holder .characters > resource { display: table-cell; height: 100%; background-repeat: no-repeat; background-position: center; }
div#loading_cover.resource_holder .characters > resource:nth-child(odd) { background-color: #fffdfb; }
div#loading_cover.resource_holder .characters > resource:nth-child(even) { background-color: #302a20; }
div#loading_cover.resource_holder div#res_character_back { display: table-row; height: 100%; }
div#loading_cover.resource_holder div#res_character_back > resource { background-position-y: 30px; background-size: 750%; }
div#loading_cover.resource_holder div#res_character_icon { display: table-row; height: 200px; }
div#loading_cover.resource_holder div#res_character_icon > resource { background-size: 323%; background-position: bottom; }
div#loading_cover.resource_holder div#res_character_vcut { display: table-row; height: 204.8px; }
div#loading_cover.resource_holder div#res_character_vcut > resource { background-size: 100%; background-size: cover; }
div#loading_cover.resource_holder div#res_extras { position: absolute; top: 0; bottom: 0; width: 100%; height: 256px; margin: auto; }
div#loading_cover.resource_holder div#res_extras > div { position: absolute; top:0; bottom: 0; left: 0; right: 0; margin: auto; }
div#loading_cover.resource_holder div#res_character_icon_back { position: absolute; display: table; left: 0; right: 0; width: 188px; height: 188px; margin: auto; border-radius: 25px; overflow: hidden; }
div#loading_cover.resource_holder div#res_character_icon_back > resource { display: table-cell; }
div#loading_cover.resource_holder div#res_character_icon_back > resource:nth-child(1) { background-position: left; }
div#loading_cover.resource_holder div#res_character_icon_back > resource:nth-child(2) { background-position: center; }
div#loading_cover.resource_holder div#res_character_icon_back > resource:nth-child(3) { background-position: right; }
div#loading_cover.resource_holder div#res_icons { width: fit-content; }
div#loading_cover.resource_holder div#loading_text { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }
div#loading_cover.resource_holder div#loading_text > span { position: absolute; top: 0; bottom: 0; width: 100%; height: fit-content; margin: auto 0; padding: 6px 0 12px; background-color: #6668; font-size: 24px; font-weight: bold; text-align: center; text-shadow: grey 0px 0px 8px;}

resource.res_image { background-image: var(--src); animation: load 0.6s; will-change: auto; }