/* fonts */
/* Main font - Lato */
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 100;
    src: url('../fonts/Lato/Lato-Thin.ttf');
}
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/Lato/Lato-Light.ttf');
}
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/Lato/Lato-Regular.ttf');
}
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 600;
    src: url('../fonts/Lato/Lato-Bold.ttf');
}
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 800;
    src: url('../fonts/Lato/Lato-Black.ttf');
}

@font-face {
    font-family: 'Lato';
    font-style: italic;
    font-weight: 100;
    src: url('../fonts/Lato/Lato-ThinItalic.ttf');
}
@font-face {
    font-family: 'Lato';
    font-style: italic;
    font-weight: 400;
    src: url('../fonts/Lato/Lato-LightItalic.ttf');
}
@font-face {
    font-family: 'Lato';
    font-style: italic;
    font-weight: 500;
    src: url('../fonts/Lato/Lato-Italic.ttf');
}
@font-face {
    font-family: 'Lato';
    font-style: italic;
    font-weight: 600;
    src: url('../fonts/Lato/Lato-BoldItalic.ttf');
}
@font-face {
    font-family: 'Lato';
    font-style: italic;
    font-weight: 800;
    src: url('../fonts/Lato/Lato-BlackItalic.ttf');
}
/* Main font - SUIT */
@font-face {
	font-family: 'SUIT';
	font-weight: 100 900;
	src: url('../fonts/SUIT/SUIT-Variable.woff2') format('woff2-variations');
}
/* Fallback font CJK - Nato Sans */
@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 100;
    src: url('../fonts/Noto_Sans_KR/NotoSansKR-Thin.otf') format('opentype'),
        url(https://fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff2) format('woff2'),
        url(https://fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff) format('woff'),
        url(https://fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.otf) format('opentype');
    unicode-range: U+AC00-D7A3,
        U+3001, U+3002, U+300C-300F, U+3041-3096,
        U+309D, U+309E, U+30A1-30FA, U+30FC,
        U+4E00-9FEA, U+3400-4DB5, U+F900-FA6D, U+FF5E;
}
@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/Noto_Sans_KR/NotoSansKR-Light.otf') format('opentype'),
        url(https://fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff2) format('woff2'),
        url(https://fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff) format('woff'),
        url(https://fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.otf) format('opentype');
    unicode-range: U+AC00-D7A3,
        U+3001, U+3002, U+300C-300F, U+3041-3096,
        U+309D, U+309E, U+30A1-30FA, U+30FC,
        U+4E00-9FEA, U+3400-4DB5, U+F900-FA6D, U+FF5E;
}
@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/Noto_Sans_KR/NotoSansKR-Regular.otf') format('opentype'),
        url(https://fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff2) format('woff2'),
        url(https://fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff) format('woff'),
        url(https://fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.otf) format('opentype');
    unicode-range: U+AC00-D7A3,
        U+3001, U+3002, U+300C-300F, U+3041-3096,
        U+309D, U+309E, U+30A1-30FA, U+30FC,
        U+4E00-9FEA, U+3400-4DB5, U+F900-FA6D, U+FF5E;
}
@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 600;
    src: url('../fonts/Noto_Sans_KR/NotoSansKR-Medium.otf') format('opentype'),
        url(https://fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff2) format('woff2'),
        url(https://fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff) format('woff'),
        url(https://fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.otf) format('opentype');
    unicode-range: U+AC00-D7A3,
        U+3001, U+3002, U+300C-300F, U+3041-3096,
        U+309D, U+309E, U+30A1-30FA, U+30FC,
        U+4E00-9FEA, U+3400-4DB5, U+F900-FA6D, U+FF5E;
}
@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 800;
    src: url('../fonts/Noto_Sans_KR/NotoSansKR-Bold.otf') format('opentype'),
        url(https://fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff2) format('woff2'),
        url(https://fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff) format('woff'),
        url(https://fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.otf) format('opentype');
    unicode-range: U+AC00-D7A3,
        U+3001, U+3002, U+300C-300F, U+3041-3096,
        U+309D, U+309E, U+30A1-30FA, U+30FC,
        U+4E00-9FEA, U+3400-4DB5, U+F900-FA6D, U+FF5E;
}
@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 900;
    src: url('../fonts/Noto_Sans_KR/NotoSansKR-Black.otf') format('opentype'),
        url(https://fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff2) format('woff2'),
        url(https://fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff) format('woff'),
        url(https://fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.otf) format('opentype');
    unicode-range: U+AC00-D7A3,
        U+3001, U+3002, U+300C-300F, U+3041-3096,
        U+309D, U+309E, U+30A1-30FA, U+30FC,
        U+4E00-9FEA, U+3400-4DB5, U+F900-FA6D, U+FF5E;
}
/* Noto Sans KR, Cute Font */
/* @import url('https://fonts.googleapis.com/css2?family=Cute+Font&family=Noto+Sans+KR:wght@100..900&display=swap'); */


/* animations */
@keyframes comeOut {
    from { }
    100% { transform: scale(5) translateY(100%); filter: blur(1px); }
    to { transform: scale(5) translateY(100%); filter: blur(1px); opacity: 0; }
}
@keyframes comeOut2 {
    from { transform: scale(1) translateY(0%); }
    100% { transform: scale(3.5) translateY(180%); filter: blur(1px); }
    to { transform: scale(3.5) translateY(180%); filter: blur(1px); opacity: 0; }
}


/* styles */

/* Current application customs */
html {

    --basic-backdrop-blur-strength: 1px;

    --color-my-own-dark: #3c596d;   --cmod: 60 89 109;
    --color-my-own: #51a7e0;        --cmo: 81 167 224;
    --color-my-own-light: #81c2ec;  --cmol: 129 194 236;

    --color-point-dark: var(--color-my-own-dark);      --cpd: var(--cmod);
    --color-point: var(--color-my-own);                --cp: var(--cmo);
    --color-point-light: var(--color-my-own-light);    --cpl: var(--cmol);


    /* --top-pad: calc(env(safe-area-inset-top) + 0px);
    --bottom-pad: calc(env(safe-area-inset-bottom) + 0px); */



    --cihr: #F84; --cih: #F82; --cilr: #FA7; --cil: #F85; --ci: #D63; --cid: #A42; --cid: #821;
    --color-important-highlighter: 255 136 68;
    --color-important-highlight: 255 136 34;
    --color-important-lighter: 255 170 119;
    --color-important-light: 255 136 85;
    --color-important: 222 102 51;
    --color-important-dark: 170 68 34;
    --color-important-darker: 136 34 17;
    --cfhr: #FC4; --cfh: #FC2; --cflr: #FB7; --cfl: #FB5; --cf: #D94; --cfd: #A63; --cfd: #842;
    --color-focusive-highlighter: 255 204 68;
    --color-focusive-highlight: 255 204 34;
    --color-focusive-lighter: 255 187 119;
    --color-focusive-light: 255 187 85;
    --color-focusive: 221 153 68;
    --color-focusive-dark: 170 102 51;
    --color-focusive-darker: 136 68 34;
    --cphr: #4F4; --cph: #2F2; --cplr: #7F7; --cpl: #5F5; --cp: #4D4; --cpd: #3A3; --cpdr: #282;
    --color-positive-highlighter: 68 255 68;
    --color-positive-highlight: 34 255 34;
    --color-positive-lighter: 119 255 119;
    --color-positive-light: 85 255 85;
    --color-positive: 68 221 68;
    --color-positive-dark: 51 170 51;
    --color-positive-darker: 34 136 34;
    --cnhr: #f48; --cnh: #F28; --cnlr: #F7A; --cnl: #F58; --cn: #D36; --cnd: #A24; --cndr: #812;
    --color-negative-highlighter: 255 68 136;
    --color-negative-highlight: 255 34 136;
    --color-negative-lighter: 255 119 170;
    --color-negative-light: 255 85 136;
    --color-negative: 222 51 102;
    --color-negative-dark: 170 34 68;
    --color-negative-darker: 136 17 34;

    --csrhlr: #F44; --csrhl: #F22; --csrbr: #FBB; --csrlr: #F77; --csrl: #F55; --csr: #D44; --csrd: #A33; --csrdr: #822;
    --color-side-red-highlighter: 255 68 68;
    --color-side-red-highlight: 255 34 34;
    --color-side-red-bright: 255 187 187;
    --color-side-red-lighter: 255 119 119;
    --color-side-red-light: 255 85 85;
    --color-side-red: 221 68 68;
    --color-side-red-dark: 171 51 51;
    --color-side-red-darker: 136 34 34;
    --csbhlr: #48F; --csbhl: #24F; --csbbr: #BDF; --csblr: #79F; --csbl: #57F; --csb: #46D; --csbd: #35A; --csbdr: #248;
    --color-side-blue-highlighter: 68 136 255;
    --color-side-blue-highlight: 34 68 255;
    --color-side-blue-bright: 187 221 255;
    --color-side-blue-lighter: 119 153 255;
    --color-side-blue-light: 85 119 255;
    --color-side-blue: 68 102 221;
    --color-side-blue-dark: 51 85 171;
    --color-side-blue-darker: 34 68 136;
    /* Christmas Edition color set */
    /* --csbhlr: #6B4; --csbhl: #2B2; --csbbr: #BBB; --csblr: #7B7; --csbl: #5B5; --csb: #4A4; --csbd: #373; --csbdr: #252;
    --color-side-blue-highlighter: 102 187 68;
    --color-side-blue-highlight: 34 187 34;
    --color-side-blue-bright: 187 187 187;
    --color-side-blue-lighter: 119 187 119;
    --color-side-blue-light: 85 187 85;
    --color-side-blue: 68 170 68;
    --color-side-blue-dark: 51 119 51;
    --color-side-blue-darker: 34 85 34; */
    
    --ctfr: #f22; --ctfb: #26f; --ctfri: #ff7575; --ctfbi: #75bbff;
    --color-text-for-red: 255 34 34;
    --color-text-for-blue: 34 102 255;
    /* Christmas Edition color set */
    /* --color-text-for-blue: 68 187 34; */
    --color-text-for-red-inactive: 255 119 119;
    --color-text-for-blue-inactive: 119 187 255;
    /* Christmas Edition color set */
    /* --color-text-for-blue-inactive: 119 187 119; */

    --color-class-4-dark: #658;
    --color-class-4: #86B;
    --color-class-4-light: #A480D0;
    --color-class-4-lighten: #AE89DD;
    --color-class-4-lighter: #B9E;
    --color-class-5-dark: #964;
    --color-class-5: #C85;
    --color-class-5-light: #E0995D;
    --color-class-5-lighten: #EEA060;
    --color-class-5-lighter: #FA6;
    --color-class-5-1-dark: #A45;
    
}

body {
    --common-bg-color: var(--color-boundary-brighty);

    font-family: 'SUIT';



    /* adaptive color (light/common) */
    --bgcolor-base: 255 255 255;
    --main-color: 0 0 0;
}

body[data-dark-mode="1"] {

    /* adaptive color (dark) */
    --bgcolor-base: 34 34 34;
    --main-color: 221 221 221;
}

main { font-family: 'SUIT'; }
main button, main input, main textarea { font-family: 'SUIT'; }

article { --article-theme-color: transparent; }

article button { padding: 1em; border-style: none; border-radius: 1em; }


/* override EstreUI */

/* footer#fixedBottom { transition-timing-function: ease; transition-duration: 0.3s; }
footer#fixedBottom:not(:hover) { bottom: -44px; } */
footer#fixedBottom nav:not(#rootbar) { max-width: unset; width: 0; }
footer#fixedBottom nav > button:disabled { opacity: 0.5; pointer-events: none; }
footer#fixedBottom nav > button.for_text { flex-grow: 0; padding: var(--basic-ui-inset-h); }


/* custom element styles */
footer#fixedBottom { background-color: rgb(var(--cwht) / 24%); }

article .line_block { border-bottom: none; border-radius: 0; }

article .bg_pointed { --bg-basic: rgb(var(--cpl) / 15%); --bg-hover: rgb(var(--cpl) / 30%); --bg-active: rgb(var(--cpl) / 60%); }




/* 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; --flex-row-direction-reverse: row-reverse; --flex-align-side: flex-start; --flex-align-side-reverse: flex-end;
}
.side_root.blue {
    --side: right; --proffer-side: left; --flex-row-direction: row-reverse; --flex-row-direction-reverse: row; --flex-align-side: flex-end; --flex-align-side-reverse: flex-start;
}


/* override UI */
body[data-on-ready="1"] main#splashRoot { display: block; z-index: -100 !important; opacity: 0; transition-duration: 0s; }

main#staticDoc > section#character > div.container > article { background-color: #CCC; }
main#staticDoc:has(> section#hologram[data-on-top="1"]) > section#character:not([data-on-top="1"]) { display: block; }
/* main#staticDoc:has(> section#hologram[data-on-top="0"]) > section#character:not([data-on-top="1"]) { display: block; } */
main#staticDoc:has(> section#hologram[data-on-top="1"]) > section#character:not([data-on-top="1"]) > div.container { opacity: 1 !important; }
/* main#staticDoc:has(> section#hologram[data-on-top="0"]) > section#character:not([data-on-top="1"]) > div.container { opacity: 1 !important; } */
main#staticDoc:has(> section#hologram[data-on-top="1"]) > section#character:not([data-on-top="1"]) > div.container > article { background-color: #333; }
main#staticDoc:has(> section#hologram[data-on-top="1"]) > section#character[data-on-top="0"] > div.container > article > .poolBlock { opacity: 0; }
main#staticDoc:has(> section#hologram[data-on-top="1"]) > section#character[data-on-top=""] > div.container > article > .poolBlock { display: none; opacity: 0; }

main#staticDoc > section#hologram > div.container > article > .hologramSelectedPanel { top: 300px; }
main#staticDoc:has(> section#match[data-on-top="1"]) > section#character:not([data-on-top="1"]) { display: block; }
main#staticDoc:has(> section#match[data-on-top="1"]) > section#character:not([data-on-top="1"]) > div.container { opacity: 1 !important; }
main#staticDoc:has(> section#match[data-on-top="1"]) > section#character:not([data-on-top="1"]) > div.container > article { background-color: #111; }
main#staticDoc:has(> section#match[data-on-top="1"]) > section#character[data-on-top="0"] > div.container > article > .poolBlock { opacity: 0; }
main#staticDoc:has(> section#match[data-on-top="1"]) > section#character[data-on-top=""] > div.container > article > .poolBlock { display: none; opacity: 0; }
main#staticDoc:has(> section#match[data-on-top="1"]) > section#hologram:not([data-on-top="1"]) { display: block; }
main#staticDoc:has(> section#match[data-on-top="1"]) > section#hologram:not([data-on-top="1"]) > div.container { opacity: 1 !important; }
main#staticDoc:has(> section#match[data-on-top="1"]) > section#hologram:not([data-on-top="1"]) > div.container > article > .hologramSelectedPanel { top: 340px; }
main#staticDoc:has(> section#match[data-on-top="1"]) > section#hologram:not([data-on-top="1"]) > div.container > article > .hologramSelectedPanel > ul.hologramSelected { row-gap: 72px; }
main#staticDoc:has(> section#match[data-on-top="1"]) > section#hologram:not([data-on-top="0"]) > div.container > article > .hologramSelectionPool { opacity: 0; }
main#staticDoc:has(> section#match[data-on-top="1"]) > section#hologram:not([data-on-top=""]) > div.container > article > .hologramSelectionPool { display: none; opacity: 0; }


footer#fixedBottom nav#instantSections { justify-content: flex-end; }


/* Data related styles */

.playerBoard { position: absolute; display: flex; flex-flow: row nowrap; top: calc(var(--top-pad) + 0px); left: 0; right: 0; justify-content: space-between; }
.playerBoard > .player_side { --entry-face-shift-red: 64px; --entry-face-shift-blue: -64px; --entry-face-shift-trdr: 0.8s; position: relative; display: flex; flex-flow: column nowrap; width: 480px; align-items: var(--side); }
.playerBoard > .player_side > * { }
.playerBoard > .player_side > .player_info { z-index: 1; text-align: var(--side); }
.playerBoard > .player_side > .player_info > .player_name { color: rgb(var(--signature-color)); font-size: 52px; font-weight: 900; }
.playerBoard > .player_side > .player_info > .player_pl { min-height: 36px; color: rgb(var(--signature-color-light)); font-size: 28px; font-weight: 800; }
.playerBoard > .player_side > .character_entry_list { --h-position: 110px; position: absolute; z-index: 1; top: 64px; }
.playerBoard > .player_side > .character_entry_list > ul { display: flex; flex-flow: column nowrap; list-style: none; margin: 0; padding: 0; }
.playerBoard > .player_side > .character_entry_list > ul.redEntryInfo { }
.playerBoard > .player_side > .character_entry_list > ul.blueEntryInfo { }
.playerBoard > .player_side > .character_entry_list > ul > li { }
.playerBoard > .player_side > .character_entry { width: -webkit-fill-available; }
.playerBoard > .player_side > .character_entry > ul { display: flex; flex-flow: var(--flex-row-direction) nowrap; list-style: none; margin: 0; padding: 0; }
.playerBoard > .player_side > .character_entry > ul.redEntry { margin-left: -120px; }
.playerBoard > .player_side > .character_entry > ul.blueEntry { margin-right: -120px; }
.playerBoard > .player_side > .character_entry > ul > li { position: absolute; display: flex; flex-flow: var(--flex-row-direction) nowrap; }
.playerBoard > .player_side.red { }
.playerBoard > .player_side.blue { }
.playerBoard > .player_side.red:has(> .character_entry_list > ul > li:nth-child(1):hover) > .character_entry > ul > li:nth-child(1) { translate: var(--entry-face-shift-red) 0; transition-duration: var(--entry-face-shift-trdr); }
.playerBoard > .player_side.red:has(> .character_entry_list > ul > li:nth-child(2):hover) > .character_entry > ul > li:nth-child(2) { translate: var(--entry-face-shift-red) 0; transition-duration: var(--entry-face-shift-trdr); }
.playerBoard > .player_side.red:has(> .character_entry_list > ul > li:nth-child(3):hover) > .character_entry > ul > li:nth-child(3) { translate: var(--entry-face-shift-red) 0; transition-duration: var(--entry-face-shift-trdr); }
.playerBoard > .player_side.red:has(> .character_entry_list > ul > li:nth-child(4):hover) > .character_entry > ul > li:nth-child(4) { translate: var(--entry-face-shift-red) 0; transition-duration: var(--entry-face-shift-trdr); }
.playerBoard > .player_side.red:has(> .character_entry_list > ul > li:nth-child(5):hover) > .character_entry > ul > li:nth-child(5) { translate: var(--entry-face-shift-red) 0; transition-duration: var(--entry-face-shift-trdr); }
.playerBoard > .player_side.red:has(> .character_entry_list > ul > li:nth-child(6):hover) > .character_entry > ul > li:nth-child(6) { translate: var(--entry-face-shift-red) 0; transition-duration: var(--entry-face-shift-trdr); }
.playerBoard > .player_side.blue:has(> .character_entry_list > ul > li:nth-child(1):hover) > .character_entry > ul > li:nth-child(1) { translate: var(--entry-face-shift-blue) 0; transition-duration: var(--entry-face-shift-trdr); }
.playerBoard > .player_side.blue:has(> .character_entry_list > ul > li:nth-child(2):hover) > .character_entry > ul > li:nth-child(2) { translate: var(--entry-face-shift-blue) 0; transition-duration: var(--entry-face-shift-trdr); }
.playerBoard > .player_side.blue:has(> .character_entry_list > ul > li:nth-child(3):hover) > .character_entry > ul > li:nth-child(3) { translate: var(--entry-face-shift-blue) 0; transition-duration: var(--entry-face-shift-trdr); }
.playerBoard > .player_side.blue:has(> .character_entry_list > ul > li:nth-child(4):hover) > .character_entry > ul > li:nth-child(4) { translate: var(--entry-face-shift-blue) 0; transition-duration: var(--entry-face-shift-trdr); }
.playerBoard > .player_side.blue:has(> .character_entry_list > ul > li:nth-child(5):hover) > .character_entry > ul > li:nth-child(5) { translate: var(--entry-face-shift-blue) 0; transition-duration: var(--entry-face-shift-trdr); }
.playerBoard > .player_side.blue:has(> .character_entry_list > ul > li:nth-child(6):hover) > .character_entry > ul > li:nth-child(6) { translate: var(--entry-face-shift-blue) 0; transition-duration: var(--entry-face-shift-trdr); }
.playerBoard > .player_side.red > .player_info { margin-left: 32px; text-shadow: -2px 1px 3px var(--color-boundary-dim); }
.playerBoard > .player_side.blue > .player_info { margin-right: 32px; text-shadow: 2px 1px 3px var(--color-boundary-dim); }
.playerBoard > .player_side.red > .character_entry_list { left: var(--h-position); text-shadow: -2px -1px 2px var(--color-boundary-dim); }
.playerBoard > .player_side.blue > .character_entry_list { right: var(--h-position); text-shadow: 2px -1px 2px var(--color-boundary-dim); }
.playerBoard > .player_side.red > .character_entry_list input { left: var(--h-position); text-shadow: -2px -1px 2px var(--color-boundary-dim); }
.playerBoard > .player_side.blue > .character_entry_list input { right: var(--h-position); text-shadow: 2px -1px 2px var(--color-boundary-dim); }


ul.holograms { display: flex; flex-flow: column nowrap; list-style: none; margin: 0; padding: 0; row-gap: var(--basic-ui-inset-v); align-items: center; }
ul.holograms > li { }
ul.holograms > li > h1 { margin: 0 0 4px; font-size: 32px; font-weight: 800; text-align: center; text-shadow: 0 0 5px var(--color-text-inverse); }
ul.holograms > li > .panel { display: flex; flex-flow: column nowrap; width: 320px; height: 80px; box-sizing: border-box; padding: 0 var(--basic-ui-inset-h); justify-content: space-evenly; border: ridge 3px rgb(var(--cbdt) / 80%); border-radius: 10px; background-color: rgba(var(--cbdm) / 5%); background-image: var(--src); background-position: right center; background-size: contain; background-repeat: no-repeat; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); filter: drop-shadow(0 0 4px var(--color-boundary-bright)) drop-shadow(0 0 8px var(--color-boundary-bright)) drop-shadow(0 0 12px var(--color-boundary-bright)); }
ul.holograms > li > .panel > .title { font-size: 1.125rem; text-shadow: 2px 2px 1px var(--color-text-inverse); }
ul.holograms > li > .panel > ul.resistances { display: flex; flex-flow: row nowrap; list-style: none; margin: 0; padding: 0; column-gap: 12px; align-items: center; font-size: 0.875rem; }
ul.holograms > li > .panel > ul.resistances > li { display: flex; flex-flow: row nowrap; column-gap: 2px; align-items: center; }
ul.holograms > li > .panel > ul.resistances > li > span { text-shadow: 2px 2px 1px var(--color-text-inverse); }
ul.holograms > li > .panel > ul.resistances > li > .icon { height: 18px; aspect-ratio: 1; background-image: var(--src); background-position: center; background-size: contain; background-repeat: no-repeat; }


.character_entry_names { --font-size: 3rem; --line-height: 1.2em; --rotate-y-red: 25deg; --rotate-y-blue: -25deg; color: rgb(var(--signature-color-bright)); font-size: var(--font-size); font-weight: 600; line-height: var(--line-height); }
.character_entry_names > li.entry { position: absolute; display: flex; flex-flow: var(--flex-row-direction) nowrap; z-index: calc(var(--multiplier) * -1); top: 0; width: 300px; border-bottom: double 3px; justify-content: space-between; filter: drop-shadow(2px 4px 4px rgb(var(--main-color))); transform-style: preserve-3d; transform-origin: var(--side) top; perspective-origin: 150px; transition-timing-function: ease; transition-duration: 0.3s; will-change: auto; }
.character_entry_names > li.entry::before { content: attr(data-name); scale: 0.9 1; transform-origin: var(--side); }
.character_entry_names > li.entry:focus-within { z-index: 1; color: rgb(var(--signature-color-light)); }
.character_entry_names > li.entry:hover { z-index: 2; color: rgb(var(--signature-color-highlight)); }
.character_entry_names > li.entry:nth-child(1) { --multiplier: 0; /* width: 820px; */ }
.character_entry_names > li.entry:nth-child(2) { --multiplier: 1; /* width: 734px; */ }
.character_entry_names > li.entry:nth-child(3) { --multiplier: 2; /* width: 652px; */ }
.character_entry_names > li.entry:nth-child(4) { --multiplier: 3; /* width: 568px; */ }
.character_entry_names > li.entry:nth-child(5) { --multiplier: 4; /* width: 468px; */ }
.character_entry_names > li.entry:nth-child(6) { --multiplier: 5; /* width: 348px; */ }
.character_entry_names > li.entry.red { left: 0; border-bottom-right-radius: 1em; }
.character_entry_names > li.entry.red:nth-child(1) { transform: translate3d(0, 0, 0) scale(1) rotateX(-15deg) rotateY(var(--rotate-y-red)); }
.character_entry_names > li.entry.red:nth-child(2) { transform: translate3d(180px, 40px, -10px) scale(0.88) rotateX(-14deg) rotateY(var(--rotate-y-red)); }
.character_entry_names > li.entry.red:nth-child(3) { transform: translate3d(326px, 78px, -10px) scale(0.77) rotateX(-13deg) rotateY(var(--rotate-y-red)); }
.character_entry_names > li.entry.red:nth-child(4) { transform: translate3d(450px, 114px, -10px) scale(0.67) rotateX(-12deg) rotateY(var(--rotate-y-red)); }
.character_entry_names > li.entry.red:nth-child(5) { transform: translate3d(560px, 146px, -10px) scale(0.58) rotateX(-11deg) rotateY(var(--rotate-y-red)); }
.character_entry_names > li.entry.red:nth-child(6) { transform: translate3d(658px, 176px, -10px) scale(0.5) rotateX(-10deg) rotateY(var(--rotate-y-red)); }
.character_entry_names > li.entry.blue { right: 0; border-bottom-left-radius: 1em; }
.character_entry_names > li.entry.blue:nth-child(1) { transform: translate3d(0, 0, 0) scale(1) rotateX(-15deg) rotateY(var(--rotate-y-blue)); }
.character_entry_names > li.entry.blue:nth-child(2) { transform: translate3d(-180px, 40px, -10px) scale(0.88) rotateX(-14deg) rotateY(var(--rotate-y-blue)); }
.character_entry_names > li.entry.blue:nth-child(3) { transform: translate3d(-326px, 78px, -10px) scale(0.77) rotateX(-13deg) rotateY(var(--rotate-y-blue)); }
.character_entry_names > li.entry.blue:nth-child(4) { transform: translate3d(-450px, 114px, -10px) scale(0.67) rotateX(-12deg) rotateY(var(--rotate-y-blue)); }
.character_entry_names > li.entry.blue:nth-child(5) { transform: translate3d(-560px, 146px, -10px) scale(0.58) rotateX(-11deg) rotateY(var(--rotate-y-blue)); }
.character_entry_names > li.entry.blue:nth-child(6) { transform: translate3d(-658px, 176px, -10px) scale(0.5) rotateX(-10deg) rotateY(var(--rotate-y-blue)); }
.character_entry_names > li.entry > input[type="number"] { width: 88px; height: var(--line-height); border-style: none; background-color: transparent; color: rgb(var(--signature-color-bright)); font-size: var(--font-size); font-weight: 800; text-align: center; line-height: var(--line-height); transition-timing-function: ease; transition-duration: 0.3s; will-change: auto; }
.character_entry_names > li.entry > input[type="number"]:focus { color: rgb(var(--signature-color-light)); }
.character_entry_names > li.entry:hover > input[type="number"] { color: rgb(var(--signature-color-highlight)); }
.character_entry_names > li.entry:not(:hover) > input[type="number"]:not(:focus)::placeholder { opacity: 0; }


.character_entry_facial { --icon-size: 512px; --trans-x-gap-red: 240px; --trans-x-gap-blue: calc(var(--trans-x-gap-red) * -1); --trans-y-gap: -10; --trans-z-gap: -10; --scale-gap: 0.1; --rotate-y-red: 30deg; --rotate-y-blue: calc(var(--rotate-y-red) * -1); }
.character_entry_facial > li.entry { z-index: calc(var(--multiplier) * -1); height: var(--icon-size); transform-style: preserve-3d; transform-origin: var(--side) bottom; perspective-origin: 150px; filter: blur(calc(0.25px * var(--multiplier))) contrast(calc(1 - (0.025 * var(--multiplier)))); transition-timing-function: ease; transition-duration: 0.3s; will-change: auto; }
.character_entry_facial > li.entry:nth-child(1) { --multiplier: 0; }
.character_entry_facial > li.entry:nth-child(2) { --multiplier: 1; }
.character_entry_facial > li.entry:nth-child(3) { --multiplier: 2; }
.character_entry_facial > li.entry:nth-child(4) { --multiplier: 3; }
.character_entry_facial > li.entry:nth-child(5) { --multiplier: 4; }
.character_entry_facial > li.entry:nth-child(6) { --multiplier: 5; }
.character_entry_facial > li.entry > .facial { height: var(--icon-size); aspect-ratio: 1; background-image: var(--src); background-position: center; background-size: contain; background-repeat: no-repeat; transition-timing-function: ease; transition-duration: 0.5s; will-change: auto; }
.character_entry_facial > li.entry.red { --src: url('../images/character_icon/T_IconRoleHead256_5_UI.png');  }
.character_entry_facial > li.entry.red:nth-child(1) { transform: translate3d(0, 0, 0) scale(1) rotateY(var(--rotate-y-red)); }
.character_entry_facial > li.entry.red:nth-child(2) { transform: translate3d(200px, -10px, -10px) scale(0.88) rotateY(var(--rotate-y-red)); }
.character_entry_facial > li.entry.red:nth-child(3) { transform: translate3d(360px, -22px, -20px) scale(0.77) rotateY(var(--rotate-y-red)); }
.character_entry_facial > li.entry.red:nth-child(4) { transform: translate3d(500px, -36px, -30px) scale(0.67) rotateY(var(--rotate-y-red)); }
.character_entry_facial > li.entry.red:nth-child(5) { transform: translate3d(640px, -52px, -40px) scale(0.58) rotateY(var(--rotate-y-red)); }
.character_entry_facial > li.entry.red:nth-child(6) { transform: translate3d(760px, -70px, -50px) scale(0.5) rotateY(var(--rotate-y-red)); }
.character_entry_facial > li.entry.blue { --src: url('../images/character_icon/T_IconRoleHead256_4_UI.png');  }
.character_entry_facial > li.entry.blue:nth-child(1) { transform: translate3d(0, 0, 0) scale(1) rotateY(var(--rotate-y-blue)); }
.character_entry_facial > li.entry.blue:nth-child(2) { transform: translate3d(-200px, -10px, -10px) scale(0.88) rotateY(var(--rotate-y-blue)); }
.character_entry_facial > li.entry.blue:nth-child(3) { transform: translate3d(-360px, -22px, -20px) scale(0.77) rotateY(var(--rotate-y-blue)); }
.character_entry_facial > li.entry.blue:nth-child(4) { transform: translate3d(-500px, -36px, -30px) scale(0.67) rotateY(var(--rotate-y-blue)); }
.character_entry_facial > li.entry.blue:nth-child(5) { transform: translate3d(-640px, -52px, -40px) scale(0.58) rotateY(var(--rotate-y-blue)); }
.character_entry_facial > li.entry.blue:nth-child(6) { transform: translate3d(-760px, -70px, -50px) scale(0.5) rotateY(var(--rotate-y-blue)); }
.character_entry_facial > li.entry.red > .facial { transform: rotateY(180deg); filter: drop-shadow(2px -1px 12px var(--color-boundary-deepdark)) saturate(1) brightness(1); }
.character_entry_facial > li.entry.blue > .facial { transform: rotateY(0deg); filter: drop-shadow(-2px -1px 12px var(--color-boundary-deepdark)) saturate(1) brightness(1); }
.character_entry_facial > li.entry.red[data-id=""] > .facial { filter: drop-shadow(2px -1px 12px var(--color-boundary-deepdark)) saturate(0) brightness(0); }
.character_entry_facial > li.entry.blue[data-id=""] > .facial { filter: drop-shadow(-2px -1px 12px var(--color-boundary-deepdark)) saturate(0) brightness(0); }
.character_entry_facial > li.entry.red[data-picked="0"] > .facial { filter: drop-shadow(2px -1px 12px var(--color-boundary-deepdark)) saturate(0) brightness(7); transition-duration: 0.1s; }
.character_entry_facial > li.entry.blue[data-picked="0"] > .facial { filter: drop-shadow(-2px -1px 12px var(--color-boundary-deepdark)) saturate(0) brightness(7); transition-duration: 0.1s; }
.character_entry_facial > li.entry.red[data-picked="1"] > .facial { filter: drop-shadow(2px -1px 12px var(--color-boundary-deepdark)) saturate(1) brightness(1); transition-duration: 0.8s; }
.character_entry_facial > li.entry.blue[data-picked="1"] > .facial { filter: drop-shadow(-2px -1px 12px var(--color-boundary-deepdark)) saturate(1) brightness(1); transition-duration: 0.8s; }


div.pick_pool[data-char-visual-res-type="icon"] ul.each_pool_block > li.character { --char-box-size: calc(var(--char-icon-size) * 4 / 5); position: relative; display: flex; width: var(--char-icon-size); height: var(--char-icon-size); background-repeat: no-repeat; background-size: contain; border-radius: 12.5%; outline-style: solid; outline-color: transparent; outline-width: 12px; outline-offset: -6px; /* overflow-x: overlay; overflow-y: hidden; scroll-behavior: smooth; scroll-snap-type: both; scroll-snap-align: center; scroll-snap-stop: always; */ transition-duration: 0.3s; transition-timing-function: ease-out; will-change: auto; }
div.pick_pool[data-char-visual-res-type="icon"] ul.each_pool_block > li.character::-webkit-scrollbar { width: 0; height: 0; background-color: transparent; }
div.pick_pool[data-char-visual-res-type="icon"] ul.each_pool_block > li.character:hover { --char-box-size: calc(var(--char-icon-size)); z-index: 1; cursor: none; /* cursor: grab; */ }
div.pick_pool[data-char-visual-res-type="icon"] ul.each_pool_block > li.character:not([data-picked=""]):hover { cursor: vertical-text; }
div.pick_pool[data-char-visual-res-type="icon"] ul.each_pool_block > li.character:active { cursor: grabbing; }
div.pick_pool[data-char-visual-res-type="icon"] ul.each_pool_block > li.character:not([data-picked=""]):active { cursor: grabbing; }
div.pick_pool[data-char-visual-res-type="icon"] ul.each_pool_block > li.character div.character_back { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: var(--char-box-size); height: var(--char-box-size); 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); outline: solid 2.5px transparent; box-shadow: 0 6px 8px transparent; transition-duration: 0.25s; transition-timing-function: ease; will-change: auto; }
div.pick_pool[data-char-visual-res-type="icon"] ul.each_pool_block > li.character > img.element_icon { position: absolute; top: 0; left: 0; right: 0; width: 16px; margin: 2px 2px auto auto; opacity: 0; transition-duration: 0.3s; transition-timing-function: ease-out; will-change: auto; }
body[data-ctrl="1"] div.pick_pool[data-char-visual-res-type="icon"] ul.each_pool_block > li.character > img.element_icon { z-index: 10; opacity: 1; }
div.pick_pool[data-char-visual-res-type="icon"] ul.each_pool_block > li.character > div.character_holder { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: var(--char-box-size); height: var(--char-box-size); margin: auto; border-radius: calc(var(--char-icon-size) * 0.125); overflow: hidden; transition-duration: 0.25s; transition-timing-function: ease; will-change: auto; }
div.pick_pool[data-char-visual-res-type="icon"] ul.each_pool_block > li.character > div.character_holder img.character_icon { width: 100%; height: 100%; transform: scale(2) translateY(7%); filter: blur(0); opacity: 1; transition-duration: 0.4s; transition-timing-function: ease-out; will-change: auto; }
div.pick_pool#cost_pool ul.each_pool_block > li.character[data-treveler="1"] > div.character_holder img.character_icon:nth-child(2) { margin-left: -100%; }
div.pick_pool[data-char-visual-res-type="icon"] ul.each_pool_block > li.character::after { content: attr(data-pick-note); position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 12.5%; color: #FFF0; font-size: 28px; font-weight: bold; filter: blur(1px); opacity: 0; transition-delay: 0.2s; transition-duration: 0.2s; will-change: auto; }
div.pick_pool[data-char-visual-res-type="icon"] ul.each_pool_block > li.character:hover::after { transform: scale(1.7); filter: blur(0.5px); }
div.pick_pool[data-char-visual-res-type="icon"] ul.each_pool_block > li.character[data-pick-side="red"]::after { color: rgba(var(--color-text-for-red) / 0.8); }
div.pick_pool[data-char-visual-res-type="icon"] ul.each_pool_block > li.character[data-pick-side="red"]:hover::after { color: rgba(var(--color-text-for-red) / 0.2); }
div.pick_pool[data-char-visual-res-type="icon"] ul.each_pool_block > li.character[data-pick-side="blue"]::after { color: rgba(var(--color-text-for-blue) / 0.8); }
div.pick_pool[data-char-visual-res-type="icon"] ul.each_pool_block > li.character[data-pick-side="blue"]:hover::after { color: rgba(var(--color-text-for-blue) / 0.2); }
div.pick_pool[data-char-visual-res-type="icon"] ul.each_pool_block > li.character[data-pick-side="both"]::after { color: rgba(34 34 34 / 0.8); }
div.pick_pool[data-char-visual-res-type="icon"] ul.each_pool_block > li.character[data-pick-side="both"]:hover::after { color: rgba(34 34 34 / 0.2); }
body[data-double-pick="0"] div.pick_pool[data-char-visual-res-type="icon"] ul.each_pool_block > li.character:not([data-picked=""])::after { filter: blur(0); opacity: 1; }
body[data-double-pick="1"] div.pick_pool[data-char-visual-res-type="icon"] ul.each_pool_block > li.character[data-picked-red="1"][data-picked-blue="1"]::after { filter: blur(0); opacity: 1; }
div.pick_pool[data-char-visual-res-type="icon"] ul.each_pool_block > li.character[data-pick-type="entry"]::after { background-color: #BBB9; text-shadow: 0px 0px 4px #666F; }
div.pick_pool[data-char-visual-res-type="icon"] ul.each_pool_block > li.character[data-pick-type="entry"]:hover::after { background-color: #BBB3; text-shadow: 0px 0px 8px #6666; }
div.pick_pool[data-char-visual-res-type="icon"] ul.each_pool_block > li.character:is([data-pick-type="ban"], [data-pick-type="aban"], [data-pick-type="jban"], [data-pick-type="preban"])::after { background-color: #4449; text-shadow: 0px 0px 4px #AAAF; }
div.pick_pool[data-char-visual-res-type="icon"] ul.each_pool_block > li.character:is([data-pick-type="ban"], [data-pick-type="aban"], [data-pick-type="jban"], [data-pick-type="preban"]):hover::after { background-color: #4443; text-shadow: 0px 0px 8px #AAA6; }
body[data-step-pick-type="entry"][data-step-side="red"][data-cardy-ban-for="red"] div.pick_pool[data-char-visual-res-type="icon"] ul.each_pool_block > li.character:not([data-proffer-ban=""]):not([data-pick-type="ban"][data-pick-side="both"])::after { opacity: 0 !important; }
body[data-step-pick-type="entry"][data-step-side="blue"][data-cardy-ban-for="blue"] div.pick_pool[data-char-visual-res-type="icon"] ul.each_pool_block > li.character:not([data-proffer-ban=""]):not([data-pick-type="ban"][data-pick-side="both"])::after { opacity: 0 !important; }
div.pick_pool[data-char-visual-res-type="icon"] ul.each_pool_block > li.character[data-rarity="4"] div.character_back { outline-color: var(--color-class-4-lighter); background-image: url('../images/character_iconic_class_back/roleStarBg4.1ef36788.png'); }
div.pick_pool[data-char-visual-res-type="icon"] ul.each_pool_block > li.character[data-rarity="5"] div.character_back { outline-color: var(--color-class-5-lighter); background-image: url('../images/character_iconic_class_back/roleStarBg5.0d5963fb.png'); }
div.pick_pool[data-char-visual-res-type="icon"] ul.each_pool_block > li.character:hover > div.character_back { outline-style: dashed; outline-color: rgba(var(--color-focusive-highlight) / 70%); outline-width: 12.5px; outline-offset: -12.5px; transform: scale(1.2) translateY(5%); box-shadow: 0 2px 4px black; }
div.pick_pool[data-char-visual-res-type="icon"] ul.each_pool_block > li.character[data-picked="1"] div.character_holder img.character_icon { animation: comeOut2 0.4s ease-out 0.1s 1 both; }
body[data-double-pick="0"] div.pick_pool[data-char-visual-res-type="icon"] ul.each_pool_block > li.character[data-picked="2"] div.character_holder img.character_icon { filter: blur(1px); animation: none; }
body[data-double-pick="1"] div.pick_pool[data-char-visual-res-type="icon"] ul.each_pool_block > li.character[data-picked="2"][data-picked-red="1"][data-picked-blue="1"] div.character_holder img.character_icon { filter: blur(1px); animation: none; }
div.pick_pool[data-char-visual-res-type="icon"] ul.each_pool_block > li.character:hover > div.character_holder { transform: scale(1.2) translateY(5%); }
div.pick_pool[data-char-visual-res-type="icon"] ul.each_pool_block > li.character:hover > div.character_holder img.character_icon { filter: blur(0) !important; }
/* div.pick_pool[data-char-visual-res-type="icon"] ul.each_pool_block > li.character[data-picked=""]:hover > div.character_holder img.character_icon { transform: scale(1.3) translateY(12%); } */
div.pick_pool[data-char-visual-res-type="icon"] ul.each_pool_block > li.character[data-picked=""]:hover > div.character_holder img.character_icon { transform: scale(1) translateY(0%); transition-duration: 0.5s; transition-timing-function: ease; will-change: auto; }
div.pick_pool[data-char-visual-res-type="icon"] ul.each_pool_block > li.character:active > div.character_holder img.character_icon { cursor: grabbing; }
div.pick_pool[data-char-visual-res-type="icon"] ul.each_pool_block > li.character[data-cursor="1"] { outline-color: rgba(var(--color-focusive) / 90%); outline-width: 10px; }
div.pick_pool[data-char-visual-res-type="icon"] ul.each_pool_block > li.character div.ban_card_hole { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-image: radial-gradient(#000D 65%, #0006 68%, transparent 80%); background-size: 98% 98%; background-position: center; background-repeat: no-repeat; opacity: 0; transition-duration: 0.2s; transition-timing-function: ease-out; will-change: auto; }
div.pick_pool[data-char-visual-res-type="icon"] ul.each_pool_block > li.character[data-banned-by-card="1"] div.ban_card_hole { opacity: 1; transition-delay: 0.3s; transition-duration: 0.15s; }
div.pick_pool[data-char-visual-res-type="icon"] ul.each_pool_block > li.character[data-banned-by-card="1"]:hover div.ban_card_hole { opacity: 0.6; transition-duration: 0.3s; }
div.pick_pool[data-char-visual-res-type="icon"] ul.each_pool_block > li.character span { z-index: 1; position: absolute; display: block; bottom: 0; padding: 4px 0; text-align: center; }
div.pick_pool[data-char-visual-res-type="icon"] ul.each_pool_block > li.character div.ban_card_holder { position: absolute; z-index: 1; bottom: 0; right: 0; width: fit-content; margin: auto; padding: 0; opacity: 0; transition-duration: 0.3s; transition-timing-function: ease-in-out; will-change: auto; }
div.pick_pool[data-char-visual-res-type="icon"] ul.each_pool_block > li.character div.ban_card_holder span.ban_card { position: relative; left: 0; right: 0; width: fit-content; margin: auto; padding: 2px 3px 3px; border-radius: 4px; background-color: #000B; color: #FFF; font-family: 'Lato'; font-size: 13px; text-shadow: 0 0 2px white; line-height: 12px; box-shadow: 0 0 3px 1px #FFFA; transform: rotateZ(-58deg) translate(10px, 4px); transition-duration: 0.3s; transition-timing-function: ease-in-out; will-change: auto; }
div.pick_pool[data-char-visual-res-type="icon"] ul.each_pool_block > li.character[data-ban-card="1"] div.ban_card_holder { opacity: 1; }
div.pick_pool[data-char-visual-res-type="icon"] ul.each_pool_block > li.character[data-ban-card="1"]:hover div.ban_card_holder { opacity: 0.6; transform: translateX(5px) translateY(13px); }
body:not([data-rule-type="ban card"]) div.pick_pool[data-char-visual-res-type="icon"] ul.each_pool_block > li.character div.ban_card_holder { display: none; }
div.pick_pool[data-char-visual-res-type="icon"] ul.each_pool_block > li.character span.pick_card { margin: auto; border-radius: 4px; font-size: 18px; font-weight: bold; text-shadow: 0 0 2px black; line-height: 16px; opacity: 0; transition-duration: 0.3s; transition-timing-function: ease; will-change: auto; }
div.pick_pool[data-char-visual-res-type="icon"] ul.each_pool_block > li.character span.pick_card.red { left: 0; padding: 4px 1.5px 5px 2px; color: rgba(var(--color-side-red-bright) / 92.5%); background-color: rgba(var(--color-side-red) / 50%); box-shadow: 1px -1px 2px 0 rgba(var(--main-color) / 65%);}
div.pick_pool[data-char-visual-res-type="icon"] ul.each_pool_block > li.character span.pick_card.blue { right: 0; padding: 4px 2px 5px 1.5px; color: rgba(var(--color-side-blue-bright) / 92.5%); background-color: rgba(var(--color-side-blue) / 50%); box-shadow: -1px -1px 2px 0 rgba(var(--main-color) / 65%);}
div.pick_pool[data-char-visual-res-type="icon"] ul.each_pool_block > li.character[data-picked="2"][data-picked-red="1"] span.pick_card.red { opacity: 1; }
div.pick_pool[data-char-visual-res-type="icon"] ul.each_pool_block > li.character[data-picked="2"][data-picked-blue="1"] span.pick_card.blue { opacity: 1; }
div.pick_pool[data-char-visual-res-type="icon"] ul.each_pool_block > li.character:hover span.pick_card.red { transform: translate(-8px, 10px); }
div.pick_pool[data-char-visual-res-type="icon"] ul.each_pool_block > li.character:hover span.pick_card.blue { transform: translate(8px, 10px); }
div.pick_pool[data-char-visual-res-type="icon"] ul.each_pool_block > li.character span.name_tag { bottom: -8px; left: 0; right: 0; color: rgba(var(--bgcolor-base) / 100%); background-color: rgba(var(--main-color) / 50%); font-family: 'Noto Sans KR'; font-size: 12px; line-height: 10px; 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.pick_pool[data-char-visual-res-type="icon"] ul.each_pool_block > li.character span.name_tag { opacity: 1; }
div.pick_pool[data-char-visual-res-type="icon"] ul.each_pool_block > li.character[data-except="1"] { display: none; }

div.pick_pool[data-char-visual-res-type="half"] ul.each_pool_block { display: flex; list-style: none; flex-flow: row wrap-reverse; min-height: 98px; margin: 0; padding: 0; justify-content: center; }
div.pick_pool[data-char-visual-res-type="half"][data-single-line="1"] ul.each_pool_block { height: 98px; }
div.pick_pool[data-char-visual-res-type="half"] ul.each_pool_block > li.character { --char-box-width: var(--char-card-width-max); --char-box-height: var(--char-card-height-max); --char-box-radius: 8px; position: relative; display: flex; width: var(--char-card-width-max); height: var(--char-card-height-max); max-width: var(--char-card-width-max); margin: 4px 4px; background-repeat: no-repeat; background-size: contain; border-radius: 12.5%; outline-style: solid; outline-color: transparent; outline-width: 12px; outline-offset: -6px; /* overflow-x: overlay; overflow-y: hidden; scroll-behavior: smooth; scroll-snap-type: both; scroll-snap-align: center; scroll-snap-stop: always; */ transition-duration: 0.3s; transition-timing-function: ease-out; will-change: auto; }
div.pick_pool[data-char-visual-res-type="half"] ul.each_pool_block > li.character::-webkit-scrollbar { width: 0; height: 0; background-color: transparent; }
div.pick_pool[data-char-visual-res-type="half"] ul.each_pool_block > li.character:hover { --char-box-width: 72px; --char-box-height: 120px; z-index: 1; cursor: none; /* cursor: grab; */ }
div.pick_pool[data-char-visual-res-type="half"] ul.each_pool_block > li.character:not([data-picked=""]):hover { cursor: vertical-text; }
div.pick_pool[data-char-visual-res-type="half"] ul.each_pool_block > li.character:active { cursor: grabbing; }
div.pick_pool[data-char-visual-res-type="half"] ul.each_pool_block > li.character:not([data-picked=""]):active { cursor: grabbing; }
div.pick_pool[data-char-visual-res-type="half"] ul.each_pool_block > li.character div.character_back { position: absolute; top: 0; bottom: 0; left: 0; width: var(--char-box-width); height: var(--char-box-height); margin: auto; background-repeat: no-repeat; background-color: rgba(var(--bgcolor-base) / 50%); border-radius: var(--char-box-radius); outline: solid 2.5px transparent; box-shadow: 0 6px 8px transparent; transition-duration: 0.25s; transition-timing-function: ease; will-change: auto; }
div.pick_pool[data-char-visual-res-type="half"] ul.each_pool_block > li.character > img.element_icon { position: absolute; top: 0; left: 0; right: 0; width: 16px; margin: 2px 2px auto auto; filter: drop-shadow(1px 2px 1.5px black); transition-duration: 0.3s; transition-timing-function: ease-out; will-change: auto; }
div.pick_pool[data-char-visual-res-type="half"] ul.each_pool_block > li.character:hover > img.element_icon { width: 28px; transform: translate(7px, -16px); filter: drop-shadow(1px 2px 0px black); }
div.pick_pool[data-char-visual-res-type="half"] ul.each_pool_block > li.character > div.character_holder { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: var(--char-box-width); height: var(--char-box-height); margin: auto; border-radius: var(--char-box-radius); overflow: hidden; transition-duration: 0.25s; transition-timing-function: ease; will-change: auto; }
div.pick_pool[data-char-visual-res-type="half"] ul.each_pool_block > li.character > div.character_holder div.character_half { width: 100%; height: 100%; background-image: var(--src); background-size: 192px auto; background-position: var(--pos-h) var(--pos-v-basic); background-repeat: no-repeat; transform: translateZ(0); filter: blur(0); opacity: 1; transition-duration: 0.4s; transition-timing-function: ease-out; will-change: auto; }
div.pick_pool#cost_pool ul.each_pool_block > li.character[data-treveler="1"] > div.character_holder div.character_half:nth-child(2) { margin-left: -100%; }
div.pick_pool[data-char-visual-res-type="half"] ul.each_pool_block > li.character::after { content: attr(data-pick-note); position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: var(--char-card-width-max); display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 12.5%; color: #FFF0; font-size: 28px; font-weight: bold; filter: blur(1px); opacity: 0; transition-delay: 0.2s; transition-duration: 0.2s; will-change: auto; }
div.pick_pool[data-char-visual-res-type="half"] ul.each_pool_block > li.character:hover::after { transform: scale(1.7); filter: blur(0.5px); }
div.pick_pool[data-char-visual-res-type="half"] ul.each_pool_block > li.character[data-pick-side="red"]::after { color: rgba(var(--color-text-for-red) / 0.8); }
div.pick_pool[data-char-visual-res-type="half"] ul.each_pool_block > li.character[data-pick-side="red"]:hover::after { color: rgba(var(--color-text-for-red) / 0.2); }
div.pick_pool[data-char-visual-res-type="half"] ul.each_pool_block > li.character[data-pick-side="blue"]::after { color: rgba(var(--color-text-for-blue) / 0.8); }
div.pick_pool[data-char-visual-res-type="half"] ul.each_pool_block > li.character[data-pick-side="blue"]:hover::after { color: rgba(var(--color-text-for-blue) / 0.2); }
div.pick_pool[data-char-visual-res-type="half"] ul.each_pool_block > li.character[data-pick-side="both"]::after { color: rgba(34 34 34 / 0.8); }
div.pick_pool[data-char-visual-res-type="half"] ul.each_pool_block > li.character[data-pick-side="both"]:hover::after { color: rgba(34 34 34 / 0.2); }
body[data-double-pick="0"] div.pick_pool[data-char-visual-res-type="half"] ul.each_pool_block > li.character:not([data-picked=""])::after { filter: blur(0); opacity: 1; }
body[data-double-pick="1"] div.pick_pool[data-char-visual-res-type="half"] ul.each_pool_block > li.character[data-picked-red="1"][data-picked-blue="1"]::after { filter: blur(0); opacity: 1; }
body div.pick_pool[data-char-visual-res-type="half"] ul.each_pool_block > li.character:not([data-banned=""])::after { filter: blur(1); opacity: 1; }
div.pick_pool[data-char-visual-res-type="half"] ul.each_pool_block > li.character[data-pick-type="entry"]::after { background-color: #BBB9; text-shadow: 0px 0px 4px #666F; }
div.pick_pool[data-char-visual-res-type="half"] ul.each_pool_block > li.character[data-pick-type="entry"]:hover::after { background-color: #BBB3; text-shadow: 0px 0px 8px #6666; }
div.pick_pool[data-char-visual-res-type="half"] ul.each_pool_block > li.character:is([data-pick-type="ban"], [data-pick-type="aban"], [data-pick-type="jban"], [data-pick-type="preban"])::after { background-color: #4449; text-shadow: 0px 0px 4px #AAAF; }
div.pick_pool[data-char-visual-res-type="half"] ul.each_pool_block > li.character:is([data-pick-type="ban"], [data-pick-type="aban"], [data-pick-type="jban"], [data-pick-type="preban"]):hover::after { background-color: #4443; text-shadow: 0px 0px 8px #AAA6; }
body[data-step-pick-type="entry"][data-step-side="red"][data-cardy-ban-for="red"] div.pick_pool[data-char-visual-res-type="half"] ul.each_pool_block > li.character:not([data-proffer-ban=""]):not([data-pick-type="ban"][data-pick-side="both"])::after { opacity: 0 !important; }
body[data-step-pick-type="entry"][data-step-side="blue"][data-cardy-ban-for="blue"] div.pick_pool[data-char-visual-res-type="half"] ul.each_pool_block > li.character:not([data-proffer-ban=""]):not([data-pick-type="ban"][data-pick-side="both"])::after { opacity: 0 !important; }
div.pick_pool[data-char-visual-res-type="half"] ul.each_pool_block > li.character[data-rarity="4"] div.character_back { outline-color: var(--color-class-4-lighter); }
div.pick_pool[data-char-visual-res-type="half"] ul.each_pool_block > li.character[data-rarity="5"] div.character_back { outline-color: var(--color-class-5-lighter); }
div.pick_pool[data-char-visual-res-type="half"] ul.each_pool_block > li.character:hover > div.character_back { left: -6px; background-color: rgba(var(--bgcolor-base) / 90%); outline-style: outset; outline-width: 1px; outline-offset: 0px; box-shadow: 0 2px 4px 1px black; }
div.pick_pool[data-char-visual-res-type="half"] ul.each_pool_block > li.character[data-picked="1"] div.character_holder div.character_half { /* animation: comeOut2 0.4s ease-out 0.1s 1 both; */ will-change: auto; }
body[data-double-pick="0"] div.pick_pool[data-char-visual-res-type="half"] ul.each_pool_block > li.character[data-picked="2"] div.character_holder div.character_half { filter: blur(1px); animation: none; }
body[data-double-pick="1"] div.pick_pool[data-char-visual-res-type="half"] ul.each_pool_block > li.character[data-picked="2"][data-picked-red="1"][data-picked-blue="1"] div.character_holder div.character_half { filter: blur(1px); animation: none; }
div.pick_pool[data-char-visual-res-type="half"] ul.each_pool_block > li.character:hover > div.character_holder { left: -6px; }
div.pick_pool[data-char-visual-res-type="half"] ul.each_pool_block > li.character:hover > div.character_holder div.character_half { filter: blur(0) !important; }
/* div.pick_pool[data-char-visual-res-type="half"] ul.each_pool_block > li.character[data-picked=""]:hover > div.character_holder div.character_half { transform: scale(1.3) translateY(12%); } */
div.pick_pool[data-char-visual-res-type="half"] ul.each_pool_block > li.character[data-picked=""]:hover > div.character_holder div.character_half { background-size: 154px auto; background-position: var(--pos-h) var(--pos-v-hover); transition-duration: 0.5s; transition-timing-function: ease; }
div.pick_pool[data-char-visual-res-type="half"] ul.each_pool_block > li.character:active > div.character_holder div.character_half { cursor: grabbing; }
div.pick_pool[data-char-visual-res-type="half"] ul.each_pool_block > li.character[data-cursor="1"] { outline-color: rgba(var(--color-focusive) / 90%); outline-width: 15px; }
div.pick_pool[data-char-visual-res-type="half"] ul.each_pool_block > li.character div.ban_card_hole { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: var(--char-card-width-max); aspect-ratio: 1.0; margin: auto; background-image: radial-gradient(#000D 65%, #0006 68%, transparent 80%); background-size: 98% 98%; background-position: center; background-repeat: no-repeat; opacity: 0; transition-duration: 0.2s; transition-timing-function: ease-out; will-change: auto; }
div.pick_pool[data-char-visual-res-type="half"] ul.each_pool_block > li.character[data-banned-by-card="1"] div.ban_card_hole { opacity: 1; transition-delay: 0.3s; transition-duration: 0.15s; }
div.pick_pool[data-char-visual-res-type="half"] ul.each_pool_block > li.character[data-banned-by-card="1"]:hover div.ban_card_hole { opacity: 0.6; transition-duration: 0.3s; }
div.pick_pool[data-char-visual-res-type="half"] ul.each_pool_block > li.character span:not(.text_only) { z-index: 1; position: absolute; display: block; bottom: 0; padding: 4px 0; text-align: center; }
div.pick_pool[data-char-visual-res-type="half"] ul.each_pool_block > li.character div.ban_card_holder { position: absolute; z-index: 0; bottom: 0; width: var(--char-box-width); margin: auto; padding: 0; opacity: 0; transition-duration: 0.3s; transition-timing-function: ease-in-out; will-change: auto; }
div.pick_pool[data-char-visual-res-type="half"] ul.each_pool_block > li.character div.ban_card_holder span.ban_card { position: relative; left: 0; right: 0; width: fit-content; margin: auto -4px -4px auto; padding: 2px 3px 3px; border-radius: 4px; background-color: #000B; color: #FFF; font-family: 'Lato'; font-size: 13px; text-shadow: 0 0 2px white; line-height: 12px; box-shadow: 0 0 3px 1px #FFFA; transform: rotateZ(-58deg) translate(10px, 4px); transition-duration: 0.3s; transition-timing-function: ease-in-out; will-change: auto; }
div.pick_pool[data-char-visual-res-type="half"] ul.each_pool_block > li.character[data-ban-card="1"] div.ban_card_holder { opacity: 1; }
div.pick_pool[data-char-visual-res-type="half"] ul.each_pool_block > li.character[data-ban-card="1"]:hover div.ban_card_holder { transform: translateX(5px); }
body:not([data-rule-type="ban card"]) div.pick_pool[data-char-visual-res-type="half"] ul.each_pool_block > li.character div.ban_card_holder { display: none; }
div.pick_pool[data-char-visual-res-type="half"] ul.each_pool_block > li.character span.pick_card { margin: auto; border-radius: 4px; font-size: 18px; font-weight: bold; text-shadow: 0 0 2px black; line-height: 16px; opacity: 0; transition-duration: 0.3s; transition-timing-function: ease; will-change: auto; }
div.pick_pool[data-char-visual-res-type="half"] ul.each_pool_block > li.character span.pick_card.red { left: 0; padding: 4px 1.5px 5px 2px; color: rgba(var(--color-side-red-bright) / 92.5%); background-color: rgba(var(--color-side-red) / 50%); box-shadow: 1px -1px 2px 0 rgba(var(--main-color) / 65%);}
div.pick_pool[data-char-visual-res-type="half"] ul.each_pool_block > li.character span.pick_card.blue { right: 0; padding: 4px 2px 5px 1.5px; color: rgba(var(--color-side-blue-bright) / 92.5%); background-color: rgba(var(--color-side-blue) / 50%); box-shadow: -1px -1px 2px 0 rgba(var(--main-color) / 65%);}
div.pick_pool[data-char-visual-res-type="half"] ul.each_pool_block > li.character[data-picked="2"][data-picked-red="1"] span.pick_card.red { opacity: 1; }
div.pick_pool[data-char-visual-res-type="half"] ul.each_pool_block > li.character[data-picked="2"][data-picked-blue="1"] span.pick_card.blue { opacity: 1; }
div.pick_pool[data-char-visual-res-type="half"] ul.each_pool_block > li.character:hover span.pick_card.red { transform: translate(-8px, 16px); }
div.pick_pool[data-char-visual-res-type="half"] ul.each_pool_block > li.character:hover span.pick_card.blue { transform: translate(8px, 16px); }
div.pick_pool[data-char-visual-res-type="half"] ul.each_pool_block > li.character span.name_tag { z-index: 0; bottom: 0px; left: 0; right: 0; box-sizing: border-box; width: var(--char-card-width-max); padding: 2px 3px 4px; border-bottom-left-radius: var(--char-box-radius); border-bottom-right-radius: var(--char-box-radius); background-color: rgba(var(--bgcolor-base) / 80%); color: rgba(var(--bgcolor-base) / 100%); font-family: 'Noto Sans KR'; font-size: 18px; font-weight: bold; text-align: left; line-height: 16px; white-space: nowrap; /* text-shadow: 1px 1px 2px black; */ word-break: keep-all; transition-duration: 0.3s; transition-timing-function: ease-out; will-change: auto; }
div.pick_pool[data-char-visual-res-type="half"] ul.each_pool_block > li.character[data-rarity="4"] span.name_tag { color: var(--color-class-4-lighten); }
div.pick_pool[data-char-visual-res-type="half"] ul.each_pool_block > li.character[data-rarity="5"] span.name_tag { color: var(--color-class-5-lighten); }
div.pick_pool[data-char-visual-res-type="half"] ul.each_pool_block > li.character:hover span.name_tag { left: -3px; width: calc(var(--char-card-width-max) + 9px); border-top-left-radius: 4px; border-bottom-left-radius: 4px; border-bottom-right-radius: 0; background-color: rgba(var(--main-color) / 50%); /* text-shadow: -1px -1px 3px black, 1px 1px 3px black; */ box-shadow: 0 0 4px 0 rgba(var(--main-color) / 50%); }
div.pick_pool[data-char-visual-res-type="half"] ul.each_pool_block > li.character span.name_tag span.name { display: inline-flex; transform: scaleX(var(--scaleW)); transform-origin: left center; filter: drop-shadow(1.5px 1.5px 0.5px black); transition-duration: 0.3s; transition-timing-function: ease-out; will-change: auto; }
div.pick_pool[data-char-visual-res-type="half"] ul.each_pool_block > li.character:hover span.name_tag span.name { transform: scaleX(var(--scaleHW)); filter: drop-shadow(1.5px 1.5px 1px black) drop-shadow(-1px -1px 1px black); }
div.pick_pool[data-char-visual-res-type="half"] ul.each_pool_block > li.character[data-except="1"] { display: none; }



/* extra preset */

.app_user_handle { }
.app_user_handle label { min-width: fit-content; overflow: hidden; }
.app_user_handle .sign_out { cursor: pointer; }