/* https://sass-guidelin.es/fr/#architecture */
/* abstracts */
/* base */
@import url("https://fonts.googleapis.com/css2?family=Megrim&family=Noto+Sans+JP:wght@100&family=Raleway:wght@300&family=Trade+Winds&display=swap");

/* layout */
body {
    font-size: 20px;
    font-family: "Raleway", sans-serif;
    color: #333;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Megrim", cursive;
    color: #333;
}

.--font-design {
    font-size: 96px;
    font-family: "Trade Winds", cursive;
    color: #333;
}

.--font-japan {
    font-size: 32px;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: bold;
    color: #fff;
    text-shadow: 2px 2px 0 #333, 2px 0px 0 #333, 2px -2px 0 #333, 0px 2px 0 #333, 0px 0px 0 #333, 0px -2px 0 #333, -2px 2px 0 #333, -2px 0px 0 #333, -2px -2px 0 #333;
}

.DS-Page {
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: flex-start;
    padding: 50px 25px;
}

.DS-Title {
    font-family: "Trade Winds", cursive;
    font-size: 96px;
    margin: 50px 0;
}

.DS-Logo {
    margin: 50px 0;
}

.DS-Logo * {
    display: block;
    font-size: 96px;
    max-width: 400px;
    margin: 0 auto;
    text-align: right;
}

.DS-Logo b {
    font-family: "Trade Winds", cursive;
    text-align: left;
    margin-bottom: -50px;
}

.DS-Logo span {
    margin-top: 15px;
    font-weight: normal;
}

.DS-Logo i {
    font-style: normal;
    font-size: 18px;
    color: DarkGray;
}

.DS-Information {
    font-size: 18px;
    font-weight: normal;
    margin: 25px auto;
    max-width: 600px;
}

.DS-Information>*:first-child {
    margin-top: 0;
}

.DS-Information p {
    margin: 25px 0;
}

@keyframes DS-KF-Blink {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes DS-KF-Appear {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.outputContext {
    animation: 0.25s ease-in 0s 1 DS-KF-Appear;
}

/* Loading */
#LAY__LoadingStep {
    margin: 25px auto;
    height: 400px;
}

#LAY__LoadingStep span {
    display: block;
    text-align: center;
    color: DarkGray;
}

/* Menu */
#CTX__Menu {
    animation: none;
}

#CTX__Menu .DS-Information {
    animation: 2s ease-in 0s 1 DS-KF-Appear;
    height: 400px;
}

#CTX__Menu .DS-Information ul {
    animation: 2s ease-out 0s infinite DS-KF-Blink;
    margin-top: 50px;
}

#CTX__Menu .DS-Information ul li {
    display: block;
}

#CTX__Menu #LAY__Menu {
    display: none;
}

#CTX__Menu #LAY__Menu ul {
    width: 300px;
}

#CTX__Menu.--menu .DS-Information {
    display: none;
}

#CTX__Menu.--menu #LAY__Menu {
    display: block;
}

/* Side */
#CTX__Side {
    /* Player */
}

#CTX__Side .Side__Players {
    display: flex;
    justify-content: center;
    align-items: center;
}

#CTX__Side .Side__Players>* {
    display: flex;
    flex: 1 1 400px;
    max-width: 400px;
    order: 0;
}

#CTX__Side .Side__Players .Side__Player {
    height: 200px;
    flex-direction: column-reverse;
    align-items: flex-start;
}

#CTX__Side .Side__Players .Side__Player:last-child {
    order: 2;
    align-items: flex-end;
}

#CTX__Side .Side__Players .Side__Player_Number {
    font-size: 64px;
    margin: 0;
}

#CTX__Side .Side__Players .Side__Player_State {
    margin: 0;
    color: #AAA;
}

#CTX__Side .Side__Players .Side__Empty {
    height: 600px;
    order: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#CTX__Side .Side__Controller {
    margin: 15px auto;
    text-align: center;
    width: 200px;
}

.Side__Player #CTX__Side .Side__Controller {
    margin: 50px 0;
}

#CTX__Side .Side__Controller_Name {
    font-size: 1.25em;
}

/* Select */
#CTX__Select {
    /* Player */
    /* Character */
}

#CTX__Select .Select__Players {
    display: flex;
    justify-content: center;
    align-items: center;
}

#CTX__Select .Select__Players>* {
    flex: 1 1 500px;
    max-width: 500px;
    text-align: left;
    order: 0;
}

#CTX__Select .Select__Players .Select__Player:last-child {
    text-align: right;
    order: 2;
}

#CTX__Select .Select__Players .Select__Player:last-child .Select__Player_Character_Sprite {
    transform: scaleX(-1) !important;
}

#CTX__Select .Select__Players .Select__Player_Character_Sprite {
    margin: 0 0 25px;
    display: inline-block;
}

#CTX__Select .Select__Players .Select__Player_Character_Name {
    font-family: "Trade Winds", cursive;
    font-size: 64px;
    margin: 0;
}

#CTX__Select .Select__Players .Select__Player_Character_Name i {
    font-family: "Raleway", sans-serif;
    display: block;
    font-size: 18px;
    color: #AAA;
    margin-top: -15px;
}

#CTX__Select .Select__Players .Select__Player_Number {
    font-size: 1.25em;
    margin: 15px 0 0;
    color: #AAA;
}

#CTX__Select .Select__Characters {
    display: flex;
    justify-content: center;
    margin: 50px 0;
}

#CTX__Select .Select__Characters>* {
    margin: 5px;
    position: relative;
}

#CTX__Select .Select__Characters .Menu__cursor_0::before {
    content: 'P1';
    font-family: "Raleway", sans-serif;
}

#CTX__Select .Select__Characters .Menu__cursor_1::after {
    content: 'P2';
    font-family: "Raleway", sans-serif;
}

/* Stage */
#CTX__Stage {
    /* Stage */
}

#CTX__Stage h2 {
    font-size: 32px;
}

#CTX__Stage h3 {
    font-size: 1.25em;
    text-align: center;
    font-family: "Raleway", sans-serif;
}

#CTX__Stage h3 i {
    display: block;
    font-size: 18px;
    color: #AAA;
}

#CTX__Stage .Stage__Stages {
    min-height: 100px;
}

#CTX__Stage .Stage__Stages .Menu__Layer {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 15px 0;
}

#CTX__Stage .Stage__Stages .Menu__Layer>* {
    transform: scale(0.75) !important;
    margin: -15px;
}

#CTX__Stage .Stage__Stages .Menu__Layer>*.Menu__cursor_0 {
    transform: scale(1) !important;
    position: relative;
}

#CTX__Stage .Stage__BGMs {
    margin-top: 25px;
}

#CTX__Stage .Stage__BGMs .Menu__Layer {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#CTX__Stage .Stage__BGMs .Menu__Layer>* {
    margin: 0 auto;
    transform: scale(0.75) !important;
    opacity: 0.4;
    width: 400px;
}

#CTX__Stage .Stage__BGMs .Menu__Layer>*.Menu__cursor_0 {
    transform: scale(1) !important;
    opacity: 1;
    position: relative;
    z-index: 100;
    order: 1;
    margin: 15px auto;
}

#CTX__Stage .Stage__BGMs .Menu__Layer>*.Menu__cursor_prev {
    order: 0 !important;
}

#CTX__Stage .Stage__BGMs .Menu__Layer>*.Menu__cursor_next {
    order: 2 !important;
}

#CTX__Stage .Stage__BGMs .Menu__Layer>*.Menu__cursor_hide {
    display: none;
}

/* Battle */
.Battle__Interface {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    overflow: hidden;
}

.Battle__Interface .Battle__Interface_Wrapper {
    max-width: 1024px;
    margin: 0 auto;
    padding: 50px;
    position: relative;
    height: 100%;
}

.Battle__Blur {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 88px;
    z-index: 1000;
    background-repeat: repeat-y;
    background-position-x: right;
    background-position-y: bottom;
}

.Battle__Blur::before {
    content: '';
    position: absolute;
    background-color: White;
    width: 500px;
    height: 100%;
}

.Battle__Blur.--left {
    background-image: url("../images/stages/effects/blur_left.png");
}

.Battle__Blur.--left,
.Battle__Blur.--left::before {
    right: 100%;
}

.Battle__Blur.--right {
    background-image: url("../images/stages/effects/blur_right.png");
}

.Battle__Blur.--right,
.Battle__Blur.--right::before {
    left: 100%;
    text-align: right;
}

.Battle__HUDs {
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.Battle__Timer {
    order: 1;
    text-align: center;
    margin: 0 -45px -40px;
    z-index: 10;
    width: 100px;
    flex: 0 0 auto;
    font-family: "Trade Winds", cursive;
    font-size: 64px;
    text-shadow: 1px 1px 0 #fff, 1px 0px 0 #fff, 0px 1px 0 #fff;
}

.Battle__HUD {
    flex: 1 1 auto;
    display: flex;
    align-items: flex-start;
    order: 0;
    text-align: right;
    justify-content: flex-end;
}

.Battle__HUD:last-child {
    justify-content: flex-start;
    order: 2;
}

.Battle__HUD:last-child .Battle__HUD_Character {
    text-align: left;
    order: 1;
}

.Battle__HUD:last-child .Battle__HUD_Character_Life {
    flex-direction: row;
}

.Battle__HUD:last-child .Battle__HUD_Character_Ki {
    flex-direction: row;
    right: 50px;
    left: auto;
}

.Battle__HUD:last-child .Battle__HUD_Character_Ki .Battle__HUD_Ki_Icon {
    flex-direction: row-reverse;
}

.Battle__HUD:last-child .Battle__HUD_Character_Round {
    display: flex;
    flex-direction: row;
}

.Battle__HUD:last-child .Battle__HUD_Ki_Number {
    left: auto;
    right: -25px;
}

.Battle__HUD:last-child .Battle__HUD_Sprite {
    transform: scaleX(-1);
}

.Battle__HUD_Character_Number {
    font-size: 18px;
    margin: 7.5px 15px 0;
}

.Battle__HUD_Character_Name {
    font-family: "Trade Winds", cursive;
    font-size: 32px;
    margin: 0 15px 7.5px;
    text-shadow: 1px 1px 0 #fff, 1px 0px 0 #fff, 0px 1px 0 #fff;
}

.Battle__HUD_Character_Life {
    border: 2px solid Black;
    margin: 5px -30px 2px;
    position: relative;
    z-index: 100;
    display: flex;
    width: 400px;
    flex-direction: row-reverse;
    background-color: rgba(255, 255, 255, 0.5);
}

.Battle__HUD_Character_Life::before,
.Battle__HUD_Character_Life::after {
    content: '';
    display: block;
    position: absolute;
    border: 1px solid rgba(0, 0, 0, 0.25);
    width: 0;
    top: 50%;
    bottom: 0;
    z-index: 1;
}

.Battle__HUD_Character_Life::before {
    left: 33%;
}

.Battle__HUD_Character_Life::after {
    right: 33%;
}

.Battle__HUD_Character_Life>* {
    flex: 0 0 auto;
    height: 20px;
}

.Battle__HUD_Character_Life>*.Battle__HUD_Bar_Life {
    background-color: #00F040;
}

.Battle__HUD_Character_Life>*.Battle__HUD_Bar_Lose {
    background-color: Orange;
}

.Battle__HUD_Character_Ki {
    position: absolute;
    bottom: 100px;
    left: 50px;
    width: 400px;
    display: flex;
    flex-direction: row-reverse;
    border: 2px solid #333;
    background-color: rgba(255, 255, 255, 0.5);
}

.Battle__HUD_Character_Ki .Battle__HUD_Ki_Number {
    font-family: "Trade Winds", cursive;
    font-size: 64px;
    text-shadow: 1px 1px 0 #fff, 1px 0px 0 #fff, 0px 1px 0 #fff;
    padding: 5px;
    position: absolute;
    bottom: -20px;
    left: -25px;
    min-width: 50px;
    z-index: 100;
    text-align: center;
}

.Battle__HUD_Character_Ki .Battle__HUD_Ki_Bar {
    height: 20px;
    background-color: #6699FF;
}

.Battle__HUD_Character_Ki .Battle__HUD_Ki_Icon {
    position: absolute;
    display: flex;
    flex-direction: row;
    justify-content: center;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.Battle__HUD_Character_Ki .Battle__HUD_Ki_Icon span {
    display: inline-block;
    width: 20%;
    position: relative;
}

.Battle__HUD_Character_Ki .Battle__HUD_Ki_Icon span.Battle__HUD_Ki_Icon_Bar::before {
    content: '';
    display: block;
    position: absolute;
    border: 1px solid #333;
    left: calc(50% - 1px);
    width: 0;
    top: 2px;
    bottom: 2px;
}

.Battle__HUD_Character_Ki .Battle__HUD_Ki_Icon span img {
    opacity: 0.25;
    display: block;
    margin: 0 auto;
}

.Battle__HUD_Character_Ki .Battle__HUD_Ki_Icon.--icon_1 .Battle__HUD_Ki_Icon_1 img,
.Battle__HUD_Character_Ki .Battle__HUD_Ki_Icon.--icon_2 .Battle__HUD_Ki_Icon_1 img,
.Battle__HUD_Character_Ki .Battle__HUD_Ki_Icon.--icon_2 .Battle__HUD_Ki_Icon_2 img,
.Battle__HUD_Character_Ki .Battle__HUD_Ki_Icon.--icon_3 .Battle__HUD_Ki_Icon_1 img,
.Battle__HUD_Character_Ki .Battle__HUD_Ki_Icon.--icon_3 .Battle__HUD_Ki_Icon_2 img,
.Battle__HUD_Character_Ki .Battle__HUD_Ki_Icon.--icon_3 .Battle__HUD_Ki_Icon_3 img {
    opacity: 1;
}

.Battle__HUD_Character_Round {
    display: flex;
    flex-direction: row-reverse;
}

.Battle__HUD_Character_Round span {
    margin: 5px 5px -15px;
    height: 10px;
    width: 25px;
    background-color: #fff;
    border-bottom: 5px solid rgba(0, 0, 0, 0.25);
    box-shadow: 0 0 0 2px #333;
}

.Battle__HUD_Character_Round span:not(.--show) {
    display: none;
}

.Battle__HUD_Bar_Life,
.Battle__HUD_Bar_Lose,
.Battle__HUD_Ki_Bar {
    position: relative;
}

.Battle__HUD_Bar_Life::after,
.Battle__HUD_Bar_Lose::after,
.Battle__HUD_Ki_Bar::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: block;
    height: 5px;
    background-color: rgba(0, 0, 0, 0.25);
}

.Battle__Info {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    position: absolute;
    top: 300px;
    left: 50px;
    right: 50px;
    z-index: 500;
    height: 150px;
    transition: opacity 1s ease;
    opacity: 0;
}

.Battle__Info::before {
    content: '';
    display: block;
    left: 25%;
    right: 25%;
    bottom: 0;
    height: 15px;
    background-color: #fff;
    border-bottom: 5px solid rgba(0, 0, 0, 0.25);
    box-shadow: 0 0 0 2px #333;
    position: absolute;
    z-index: -1;
}

.--text-blank .Battle__Info::before {
    display: none;
}

.--text .Battle__Info {
    opacity: 1;
    transition: none;
}

.--text-left .Battle__Info {
    justify-content: flex-start;
    text-align: left;
}

.--text-left .Battle__Info::before {
    left: -150px;
    right: 50%;
}

.--text-right .Battle__Info {
    justify-content: flex-start;
    text-align: right;
    flex-direction: row-reverse;
}

.--text-right .Battle__Info::before {
    right: -150px;
    left: 50%;
}

.Battle__Info_Sprite {
    margin: 0 20px -23px;
}

.Battle__Info_Text {
    font-family: "Trade Winds", cursive;
    font-size: 64px;
    white-space: nowrap;
    text-shadow: 1px 1px 0 #fff, 1px 0px 0 #fff, 0px 1px 0 #fff;
}

.Battle__Combo {
    display: flex;
    margin: 50px 0 0;
    align-items: center;
}

.Battle__Combo_Text {
    flex: 1 1 auto;
    font-size: 40px;
    font-family: "Trade Winds", cursive;
    opacity: 0;
    transition: opacity 2s ease;
    padding: 4px 20px;
    position: relative;
    text-shadow: 1px 1px 0 #fff, 1px 0px 0 #fff, 0px 1px 0 #fff;
}

.Battle__Combo_Text.--show {
    opacity: 1;
    transition: none;
}

.Battle__Combo_Text:last-child {
    text-align: right;
}

.Battle__Combo_Text i {
    font-family: "Raleway", sans-serif;
    font-size: 20px;
    display: block;
    margin-top: -15px;
    text-shadow: none;
}

.Battle__Area {
    max-width: 1200px;
    height: 100%;
    margin: 0 auto;
    padding: 0 88px 256px 88px;
    background-repeat: repeat-x;
    background-position-x: center;
    background-position-y: bottom;
    transition: transform 0.15s linear, transform-origin 0.15s linear;
}

.Battle__Area::before {
    content: '';
    position: absolute;
    display: none;
    bottom: 0;
    top: 0;
    left: -88px;
    right: -88px;
    background-color: rgba(0, 0, 0, 0.25);
}

#CTX__Battle.--text .Battle__Area:before,
.Battle__Area.--dark:before {
    display: block;
}

.Battle__Area_Wrapper {
    height: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.Battle__Entity {
    position: absolute;
}

.Battle__Entity.--dead {
    display: none;
}

.Battle__Entity_Sprite {
    position: absolute;
    top: 50%;
    transform-origin: 50% 50%;
    transform: translateY(-50%) !important;
}

.Battle__Area:not(.--dark) .Battle__Entity.--freeze_pair .Battle__Entity_Sprite {
    transform: translate(-4px, -50%) !important;
}

.Battle__Area:not(.--dark) .Battle__Entity.--freeze_impair .Battle__Entity_Sprite {
    transform: translate(4px, -50%) !important;
}

.Battle__Character,
.Battle__Player {
    width: 200px;
    height: 200px;
    transform-origin: 100px 182px;
}

.Battle__Character.--float_up .Battle__Entity_Sprite,
.Battle__Player.--float_up .Battle__Entity_Sprite {
    transform: translate(0, calc(-50% - 4px)) !important;
}

.Battle__Character.--float_down .Battle__Entity_Sprite,
.Battle__Player.--float_down .Battle__Entity_Sprite {
    transform: translate(0, calc(-50% + 4px)) !important;
}

.Battle__Projectile {
    width: 256px;
    height: 256px;
    transform-origin: 128px 190px;
    z-index: 0;
}

.Battle__Beam {
    width: 200px;
    height: 300px;
    transform-origin: 100px 232px;
    z-index: 0;
}

.Battle__Effect {
    width: 256px;
    height: 256px;
    transform-origin: 128px 210px;
    z-index: 20;
}

.Battle__Text {
    z-index: 0;
    animation: 0.15s ease-in 0s 1 DS-KF-Appear;
}

.Battle__Text.--dead {
    display: inline-block;
    animation: 0.5s ease-out 0s 1 reverse forwards DS-KF-Appear;
}

/* Menu */
.Battle__Menu {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    display: none;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.25);
    animation: 0.25s ease-in 0s 1 DS-KF-Appear;
}

.--menu .Battle__Menu {
    display: flex;
}

.Battle__Menu>* {
    min-width: 400px;
    background-color: White;
    text-align: center;
    border: 2px solid Black;
    box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.25);
}

.Battle__Menu>* ul {
    margin: 25px !important;
}

.Training__InputButton {
    padding: 5px;
    color: White;
    background-color: Black;
    margin: 0 2px;
    display: inline-block;
    width: 25px;
    height: 25px;
    line-height: 14px;
    border-radius: 50%;
    text-align: center;
    font-size: 16px;
    vertical-align: middle;
}

.--menu.--training .Battle__Menu .Battle__Menu_Principal {
    display: none;
}

.Battle__Menu>.Training__Menu {
    display: none;
    min-width: 500px !important;
    animation: 0.25s ease-in 0s 1 DS-KF-Appear;
}

.Battle__Menu>.Training__Menu.--show {
    display: block;
}

.Battle__Menu .Training__Button {
    display: flex !important;
    align-items: center;
}

.Battle__Menu .Training__Button>*:first-child,
.Battle__Menu .Training__Button .Training__Button_Label {
    text-align: left;
    flex: 1 1 100%;
}

.Battle__Menu .Training__Button>*:last-child,
.Battle__Menu .Training__Button .Training__Button_Option {
    flex: 0 0 auto;
    color: DarkGray;
    min-width: 15px;
    margin-left: 25px;
}

.Battle__Menu .Training__Button>*:last-child.--change,
.Battle__Menu .Training__Button .Training__Button_Option.--change {
    font-weight: bold;
    color: #333;
}

.Training__Menu_List {
    overflow: hidden;
    min-height: 600px;
}

.Training__Menu_List.--show {
    display: flex !important;
}

.Training__Menu_List_Character {
    position: relative;
    display: none;
    background-color: rgba(255, 255, 255, 0.75);
    margin-bottom: 25px !important;
}

.Training__Menu_List_Character.--show {
    display: block;
}

.Training__Menu_List_Character .Menu__Title:not(:first-child) {
    padding-top: 25px;
}

.Training__Menu_List_Character_Command {
    min-width: 600px;
}

.Training__Menu_List_Button {
    width: 133.33333px;
    text-align: right;
}

.Training__Menu_List .--cancel {
    color: #AAA;
    font-size: 18px;
}

.Training__History {
    position: absolute;
    top: 175px;
    bottom: 0;
    width: 175px;
    flex-direction: column;
    justify-content: flex-start;
    display: none;
}

.--bHistory .Training__History {
    display: flex;
}

.--left .Training__History {
    right: 100%;
}

.--right .Training__History {
    left: 100%;
    text-align: right;
}

.Training__History span {
    padding: 5px;
}

.Training__History span i {
    color: DarkGray;
    padding: 0 5px;
    font-style: normal;
}

.Battle__Entity .Training__Box {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.Battle__Entity .Training__Box>* {
    display: none;
    position: absolute;
    border: 1px solid Black;
    background-color: rgba(255, 255, 255, 0.25);
}

.--bBox .Battle__Entity .Training__Box>* {
    display: block;
}

.Battle__Entity .Training__PositionBox>* {
    border-color: Black;
    background-color: rgba(0, 0, 0, 0.25);
}

.Battle__Entity .Training__HurtBox>* {
    border-color: Lime;
    background-color: rgba(0, 255, 0, 0.25);
}

.Battle__Entity.--guard .Training__HurtBox>* {
    border-color: Deepskyblue;
    background-color: rgba(0, 191, 255, 0.25);
}

.Battle__Entity.--launch .Training__HurtBox>*,
.Battle__Entity.--hit .Training__HurtBox>* {
    border-color: Orange;
    background-color: rgba(255, 165, 0, 0.25);
}

.Battle__Entity .Training__HitBox>* {
    border-color: Red;
    background-color: rgba(255, 0, 0, 0.25);
}

.Battle__Player .Training__PositionBox>* {
    border-color: Plum;
    background-color: rgba(221, 160, 221, 0.25);
}

.Training__Data {
    display: none;
    margin: 0 -25px;
}

.--bData .Training__Data {
    display: flex;
}

.Training__Data>* {
    flex: 1 1 50%;
    max-width: 50%;
}

.Training__Data_Info {
    display: flex !important;
    align-items: flex-start;
    text-align: left;
    line-height: 1em;
    padding: 5px 25px !important;
}

.Training__Data_Info>*:first-child {
    flex: 0 0 auto;
}

.Training__Data_Info>*:last-child {
    font-weight: bold;
    flex: 1 1 100%;
    text-align: right;
    margin-left: 25px;
}

.Training__Animation {
    line-height: 5px;
    display: block;
    text-align: left;
    padding: 10px 25px !important;
}

.Training__Animation span {
    display: inline-block;
    width: 4px;
    height: 4px;
    margin: 1px 0 1px 1px;
    background-color: Lime;
    box-shadow: 0 0 0 1px Black;
}

.Training__Animation span.--freeze {
    box-shadow: none;
    background-color: DarkGray;
}

.Training__Animation span.--guard {
    background-color: deepskyblue;
}

.Training__Animation span.--damage {
    background-color: Red;
}

.Training__Animation span.--invulnerable {
    background-color: White;
}

.Training__Animation span.--hit,
.Training__Animation span.--launch {
    background-color: orange;
}

/* Setting */
#CTX__Setting ul {
    width: 400px;
}

#CTX__Setting .Setting__Button {
    display: flex !important;
    align-items: center;
}

#CTX__Setting .Setting__Button>*:first-child,
#CTX__Setting .Setting__Button .Setting__Button_Label {
    text-align: left;
    flex: 1 1 100%;
}

#CTX__Setting .Setting__Button>*:last-child,
#CTX__Setting .Setting__Button .Setting__Button_Option {
    flex: 0 0 auto;
    color: DarkGray;
    min-width: 15px;
    margin-left: 25px;
}

/* Input */
#CTX__Input .Input__Controllers {
    display: flex;
    justify-content: center;
}

#CTX__Input .Input__Controllers .Input__Controller {
    flex: 1 1 400px;
    max-width: 400px;
    margin: 0 25px;
}

#CTX__Input .Input__Controllers .Input__Controller_Number {
    font-size: 1.25em;
}

#CTX__Input .Input__Controllers .Input__Controller .Input__Layout.--hide {
    display: none;
}

#CTX__Input .Input__Controllers .Input__Controller .Input__Button {
    display: flex !important;
}

#CTX__Input .Input__Controllers .Input__Controller .Input__Button>*:first-child {
    text-align: left;
    flex: 1 1 100%;
}

#CTX__Input .Input__Controllers .Input__Controller .Input__Button>*:last-child {
    flex: 0 0 auto;
    color: #AAA;
    min-width: 15px;
}

/* Loading */
#CTX__Dev {
    display: flex;
}

#CTX__Dev .--menu {
    flex: 1 1 100%;
}

#CTX__Dev .--menu ul {
    display: flex;
    padding: 0;
    margin: 10px 25px;
}

#CTX__Dev .--menu ul li {
    display: block;
    padding: 5px;
    cursor: pointer;
}

#CTX__Dev .--menu ul li:hover {
    text-decoration: underline;
}

#CTX__Dev .--selected {
    color: red !important;
}

#CTX__Dev #LAY__Dev_Menu {
    flex: 0 0 250px;
    min-width: 250px;
    box-shadow: 11px 0 10px -10px rgba(0, 0, 0, 0.1);
    position: relative;
}

#CTX__Dev #LAY__Dev_Menu li {
    display: block;
    cursor: pointer;
    font-size: 2em;
    padding: 5px;
}

#CTX__Dev #LAY__Dev_Menu li:hover {
    text-decoration: underline;
}

#CTX__Dev .Dev__Wrapper {
    height: 100%;
    flex: 1 1 100%;
    display: flex;
    flex-direction: column;
}

#CTX__Dev .Dev__Wrapper .Dev__Menu {
    font-size: 2em;
    position: relative;
    flex: 0 0 auto;
    background-color: #fff;
    box-shadow: 0 11px 10px -10px rgba(0, 0, 0, 0.1);
}

#CTX__Dev #LAY__Dev_Content {
    overflow-y: auto;
    background-color: #f7f7f7;
}

#CTX__Dev .Dev__Frame {
    display: none;
}

#CTX__Dev .Dev__Frame.--show {
    display: block;
}

#CTX__Dev .Dev__Frame .Dev__Frame_Colors {
    position: fixed;
    top: 8px;
    right: 0;
    z-index: 1000;
}

#CTX__Dev .Dev__Frame>* {
    flex-wrap: wrap;
    align-items: center;
    display: flex;
    flex: 1 1 100%;
}

#CTX__Dev .Dev__Frame .Dev__Frame_Entity {
    margin: 10px;
    position: relative;
    width: 200px;
    height: 200px;
    transform-origin: 98px 182px;
}

#CTX__Dev .Dev__Frame .Dev__Frame_Entity:hover {
    color: red;
}

#CTX__Dev .Dev__Frame .Dev__Frame_Entity .Dev__Frame_Entity_Name {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    text-align: center;
}

#CTX__Dev .Dev__Frame .Dev__Frame_Entity .Dev__Frame_Entity_Sprite {
    position: absolute;
    top: 50%;
    transform-origin: 50% 50%;
    transform: translateY(-50%) !important;
}

#CTX__Dev .Dev__Frame .Dev__Frame_Entity .Dev__Frame_Entity_Sprite:not(.--show) {
    display: none;
}

#CTX__Dev .Dev__Frame_Entity_Box {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
}

#CTX__Dev .Dev__Frame_Entity_Box>* {
    display: block;
    position: absolute;
    border: 1px solid Black;
    background-color: rgba(255, 255, 255, 0.25);
}

#CTX__Dev .Dev__Frame_Entity_PositionBox>* {
    border-color: Deepskyblue;
    background-color: rgba(0, 191, 255, 0.25);
}

#CTX__Dev .Dev__Frame_Entity_HurtBox>* {
    border-color: Lime;
    background-color: rgba(0, 255, 0, 0.25);
}

#CTX__Dev .--guard .Dev__Frame_Entity_HurtBox>* {
    border-color: Plum;
    background-color: rgba(221, 160, 221, 0.25);
}

#CTX__Dev .--hit .Dev__Frame_Entity_HurtBox>* {
    border-color: Orange;
    background-color: rgba(255, 165, 0, 0.25);
}

#CTX__Dev .Dev__Frame_Entity_HitBox>* {
    border-color: Red;
    background-color: rgba(255, 0, 0, 0.25);
}

/* components */
.Menu__Layer {
    font-family: "Raleway", sans-serif;
}

.Menu__Layer ul {
    padding: 0;
    margin: 25px auto;
}

.Menu__Layer li {
    display: block;
    margin: 1px auto;
    padding: 10px 40px;
    position: relative;
}

.Menu__Layer li.Menu__Title {
    font-family: "Megrim", cursive;
    font-size: 1.25em;
    font-weight: bold;
}

.Menu__Layer li.Menu__Button {
    font-family: "Megrim", cursive;
    font-size: 1.25em;
}

.Menu__Layer li.--disable {
    color: #AAA;
    text-decoration: line-through;
}

.Menu__Layer:not(.--noCursor) .Menu__cursor_0::before,
.Menu__Layer:not(.--noCursor) .Menu__cursor_1::after {
    font-family: "Megrim", cursive;
    font-size: 20px;
    display: block;
    padding: 5px;
    width: 25px;
    text-align: center;
    background-color: #333;
    color: #FFF;
    position: absolute;
}

.Menu__Layer:not(.--noCursor) .Menu__cursor_0 {
    box-shadow: -1px -1px 0 0 #333;
}

.Menu__Layer:not(.--noCursor) .Menu__cursor_0::before {
    content: 'dV';
    box-shadow: 1px 1px 0 0 #FFF;
    top: -1px;
    left: -1px;
}

.Menu__Layer:not(.--noCursor) .Menu__cursor_0.--disable {
    box-shadow: -1px -1px 0 0 #AAA;
}

.Menu__Layer:not(.--noCursor) .Menu__cursor_1 {
    box-shadow: 1px 1px 0 0 #333;
}

.Menu__Layer:not(.--noCursor) .Menu__cursor_1::after {
    content: 'dV';
    box-shadow: -1px -1px 0 0 #FFF;
    bottom: -1px;
    right: -1px;
}

.Menu__Layer:not(.--noCursor) .Menu__cursor_1.--disable {
    box-shadow: 1px 1px 0 0 #AAA;
}

.Menu__Layer:not(.--noCursor) .Menu__cursor_0.Menu__cursor_1 {
    box-shadow: -1px -1px 0 0 #333, 1px 1px 0 0 #333;
}

.Menu__Layer:not(.--noCursor) .Menu__cursor_0.Menu__cursor_1.--disable {
    box-shadow: -1px -1px 0 0 #AAA, 1px 1px 0 0 #AAA;
}

.Helper__Layer {
    z-index: 2000;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(255, 255, 255, 0.5);
    display: none;
    font-size: 18px;
}

.Helper__Layer.--show {
    display: block;
}

.Helper__Layer .Helper__Wrapper {
    display: block;
    text-align: center;
    padding: 10px 10px;
    overflow: hidden;
    white-space: nowrap;
}

.Helper__Layer .Helper__Wrapper>.outputLayer {
    padding: 0 10px;
    display: inline-block;
}

.Helper__Button {
    /*
    background-color: Black;
    color: White;
    */
    border: 1px solid Black;
    padding: 5px 10px;
    margin: 0 10px 0 0;
}

.Alert__Layer {
    display: none;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.25);
    z-index: 10000;
}

.Alert__Layer.--show {
    display: flex;
}

.Alert__Layer .Alert__Wrapper {
    max-width: 750px;
    background-color: #fff;
    text-align: center;
    padding: 50px;
    border: 2px solid Black;
    box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.25);
    position: relative;
}

.Alert__Layer .Alert__Wrapper h1 {
    font-size: 4em;
    margin-top: 0;
}

.Alert__Layer .Alert__Wrapper h2 {
    font-size: 2em;
}

.Alert__Layer .Alert__Wrapper pre {
    background-color: #FF9;
    text-align: left;
    padding: 25px;
    margin: 0;
    font-size: 10px;
}

.Alert__Layer .Alert__Wrapper .Alert__Close {
    color: darkgray;
    font-size: 2em;
    position: absolute;
    top: 10px;
    right: 15px;
    cursor: pointer;
}

.Alert__Layer .Alert__Wrapper .Alert__Close:hover {
    color: Red;
}