@charset "UTF-8";
@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: local('Material Icons'), local('MaterialIcons-Regular'), url('MaterialIcons-Regular.woff2') format('woff2');
}

::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    background-color: #122565;
}

::-webkit-scrollbar {
    width: 5px;
    background-color: #122565;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
    background-color: #5a77d8;
}

.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;
    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;
    /* Support for IE. */
    font-feature-settings: 'liga';
}

[hidden] {
    display: none;
}

.clear {
    clear: both;
}

body:not(.mode-debug) {
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    user-select: none !important;
}

body {
    margin: 0;
    overflow: hidden;
    font-family: "Microsoft JhengHei UI", Arial, sans-serif;
}

.container {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

.screen {
    width: 794px;
    height: 520px;
    margin: auto;
    position: relative;
    overflow: hidden;
    z-index: 1010;
    pointer-events: none;
}

#__game_canvas__ {
    position: relative;
    z-index: 1000;
    pointer-events: auto;
}

.menu_1 {
    background-image: url(../image/menu_1.png);
}

.menu_2 {
    background-image: url(../image/menu_2.png);
}

.menu_3 {
    background-image: url(../image/menu_3.png);
}

.menu {
    background-repeat: no-repeat;
}

.container-wrap {
    width: 100%;
    height: 100%;
    display: table;
    position: absolute;
    left: 0;
    top: 0;
    /*z-index: 100;*/
    background: #000;
    pointer-events: none;
}

#logo {
    width: 496px;
    height: 80px;
    background-position: 35px -41px;
    margin: 6em auto 4em;
}

#launch_control {
    width: 60%;
    padding: 1em;
    border-radius: 10px;
    border: #5a77d8 3px solid;
    margin: 0 auto;
}

#launch_control .control1 {
    color: #5a77d8;
    cursor: pointer;
    font-family: 'Microsoft YaHei', serif;
    font-size: 1.5em;
    padding: .25em;
    margin: .5em 0;
}

#launch_control .control1:hover {
    color: #FFF;
}

#setting-screen #logo, #help-screen #logo {
    margin: 1em auto .5em;
}

#setting_panel, #help_panel {
    width: 704px;
    height: 353px;
    margin: 0 auto;
    position: relative;
}

#help_panel {
    height: 400px;
}

#setting-screen .players {
    width: 556px;
    position: absolute;
    left: 148px;
    top: 35px;
}

#setting-screen .player {
    width: 106px;
    margin-right: 33px;
    float: left;
}

#setting-screen .player > * {
    display: block;
    width: 100%;
    box-sizing: border-box;
}

#setting-screen .player > :nth-child(1) {
    margin-bottom: 7px;
}

#setting-screen .player > :nth-child(1) {
}

#setting-screen .player > .name {
    outline: none;
    color: #5a77d8;
    border: none;
    ime-mode: inactive;
    background: none;
    font-size: 12px;
    padding: .25em;
    margin-bottom: 6px;
}

#setting-screen .player > .devices {
    height: 92px;
    margin-bottom: 7px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.devices.keyboard {
    background-image: url(../image/keyboard.png);
}

#setting-screen .player > .keys {
    height: 19px;
    margin-bottom: 3px;
    color: #5a77d8;
    font: 12px/19px 'Microsoft YaHei', serif;
    cursor: pointer;
}

#setting-screen .player > .cur {
    color: #FFF;
}

.action_bar {
    position: absolute;
    bottom: 7px;
    right: 19px;
    width: 323px;
    height: 26px;
}

.action_bar .btn {
    width: 151px;
    height: 26px;
    position: absolute;
    cursor: pointer;
}

.action_bar .btn.btn_ok {
    left: 0;
    top: 0;
    background-position: -20px -465px;
}

.action_bar .btn.btn_cancel {
    left: 172px;
    top: 0;
    background-position: -192px -465px;
}

.action_bar .btn.btn_ok:hover {
    background-position: -489px -426px;
}

.action_bar .btn.btn_cancel:hover {
    background-position: -643px -426px;
}

#loading-screen #loadDatPath {
    position: absolute;
    left: 0;
    top: 75%;
    color: #FFF;
    width: 100%;
    z-index: 5;
    text-align: center;
}

.note {
    position: absolute;
    color: #aec7ff;
    left: 20px;
    bottom: 0;
}

#selection_note {
    font-size: 10px;
    font-style: italic;
}

#help_note {
    font-style: normal;
    font-size: 12px;
    bottom: .5rem;
}

#selection_panel {
    background-image: url(../image/selection_panel.png);
    width: 705px;
    height: 487px;
    margin: 0 auto;
    position: relative;
    z-index: 20;
}

#selection_panel .players {
    width: calc(580px + 33px);
    height: calc(398px + 25px);
    position: absolute;
    left: 107px;
    top: 62px;
    margin-left: -33px;
    margin-top: -25px;
}

#selection_panel .player {
    width: 120px;
    height: 186px;
    margin-top: 25px;
    margin-left: 33px;
    float: left;
    position: relative;
}

#selection_panel .player > * {
    position: absolute;
}

#selection_panel .player-cover {
    top: 0;
    left: 0;
    width: 100%;
    height: 120px;
    background-repeat: no-repeat;
    background-position: center;
}

#selection_panel .player-info {
    left: 0;
    top: 123px;
    width: 100%;
    height: 63px;
}

#selection_panel .player-info > div {
    margin-top: 3px;
    height: 19px;
    overflow: hidden;
    width: 100%;
    font-size: 12px;
    line-height: 19px;
    padding: 0 5px;
    box-sizing: border-box;
    color: #FFF;
}

#selection_panel .player-info > div:first-child {
    margin-top: 0;
}

/*
 * 未選擇
 */
#selection_panel:not(.entering-shown) .player[data-select-stage="0"] .player-cover {
    animation-name: join_game_bg;
    animation-duration: .1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

@keyframes join_game_bg {
    from {
        background-image: url(../image/join_char_1.png);
    }

    to {
        background-image: url(../image/join_char_2.png);
    }
}

.player[data-char="-1"] .player-cover {
    background-image: url(../image/random_char.png);
}

.player[data-char="-1"] .fighter-name:before {
    content: "Random";
}

#selection_panel:not(.entering-shown) .player .flashing {
    animation-name: flashing_text;
    animation-duration: .1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

@keyframes flashing_text {
    from {
        color: #91beff;
    }

    to {
        color: #3764ff;
    }
}

#selection_panel .player[data-select-stage="0"] .player-name:before {
    content: "Join?";
}

#selection_panel .player .team-name {
    text-indent: -9999999px;
}

#selection_panel .player[data-select-stage="2"] .team-name, #selection_panel .player[data-select-stage="3"] .team-name, #selection_panel .player[data-select-stage="4"] .team-name {
    text-indent: 0;
}

#selection_panel.counting-down .player[data-select-stage="0"] .player-cover {
    animation: none;
}

#selection_panel.counting-down[data-rt="5"] .player[data-select-stage="0"] .player-cover {
    background-image: url(../image/countdown_5.png);
}

#selection_panel.counting-down[data-rt="4"] .player[data-select-stage="0"] .player-cover {
    background-image: url(../image/countdown_4.png);
}

#selection_panel.counting-down[data-rt="3"] .player[data-select-stage="0"] .player-cover {
    background-image: url(../image/countdown_3.png);
}

#selection_panel.counting-down[data-rt="2"] .player[data-select-stage="0"] .player-cover {
    background-image: url(../image/countdown_2.png);
}

#selection_panel.counting-down[data-rt="1"] .player[data-select-stage="0"] .player-cover {
    background-image: url(../image/countdown_1.png);
}

#selection_panel.entering-shown .player[data-select-stage="0"] .player-name:before {
    content: "N/A";
}

#selection_entering_panel {
    display: none;
    width: 320px;
    text-align: center;
    border: 3px solid #334da4;
    padding: 7px;
    background: #20316f;
    border-radius: 10px;
    z-index: 21;
    position: absolute;
    left: 8px;
    top: 8px;
}

#selection_entering_panel ul {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 100%;
    height: 100%;
}

#selection_entering_panel li {
    height: 28px;
    line-height: 28px;
    color: #95bdff;
}

#selection_entering_panel li.current {
    color: #fff;
    background: #5670c7;
    display: block;
}

#selection_entering_panel.show {
    display: block;
}

#selection_entering_panel .input {
    display: inline-block;
    height: 1em;
    background: #000;
    color: #FFF;
    text-align: left;
    vertical-align: middle;
    padding: 3px;
    line-height: 1;
    font-size: smaller;
}

#selection_entering_panel > ul > li:nth-child(4) > .input {
    width: 150px;
}

.allow-mouse {
    pointer-events: auto;
}

#__fight_container {
    background: transparent;
}

#statusPanels {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
}

#statusPanels .status {
    width: 198px;
    height: 53px;
    position: relative;
    background: url(../image/player_status_panel.png) no-repeat center;
    float: left;
}

#statusPanels .status > * {
    position: absolute;
}

#statusPanels .status .small, #statusPanels .status:before {
    left: 7px;
    top: 4px;
    width: 40px;
    height: 45px;
    transition: .5s;
    opacity: 1;
    content: "";
    display: block;
}

#statusPanels .status:not([attached]) > * {
    display: none;
}

#statusPanels .status .bar {
    width: 124px;
    height: 10px;
    overflow: hidden;
}

#statusPanels .status .bar .value {
    height: 100%;
    width: 100%;
    will-change: transform;
}

#statusPanels .status .flag {
    font-size: 16px;
    transform: scale(.5);
    transform-origin: left top;
    z-index: 9;
    left: 4px;
    top: 4px;
    visibility: hidden;
}

#statusPanels .status:not([data-team="0"]) .flag {
    visibility: visible;
}

#statusPanels .status .hp {
    left: 57px;
    top: 15px;
    background: #6f081f;
}

#statusPanels .status .hp .value {
    background: #ff0000;
}

#statusPanels .status .mp {
    left: 57px;
    top: 35px;
    background: #1f086f;
}

#statusPanels .status .mp .value {
    background: #0000ff;
    left: 57px;
    top: 35px;
}

#funcKeyStatus {
    width: 100%;
    height: 20px;
    line-height: 20px;
    position: absolute;
    top: 108px;
    left: 0;
    color: #FFF;
    font-size: smaller;
    padding: 0 5px;
    text-align: left;
}

#gameOverPanel {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 480px;
    background: #244790;
    box-sizing: content-box;
    border: 5px solid #000;
    font-size: 10px;
    color: #FFF;
}

#gameOverPanel > table {
    width: 100%;
    padding: 5px;
    table-layout: fixed;
}

#gameOverPanel > table caption {
    background: #11286c;
    text-align: center;
    height: 24px;
    line-height: 24px;
    font-weight: bold;
}

#gameOverPanel thead .eng {
    display: block;
}

#gameOverPanel .cht:before {
    content: "(";
}

#gameOverPanel .cht:after {
    content: ")";
}

#gameOverPanel tfoot {
    font-size: smaller;
}

#gameOverPanel .time {
    text-align: right;
}

#gameOverPanel .player-row img {
    vertical-align: middle;
}

#gameOverPanel .hint-continue {
    font-size: 16px;
    transform: scale(.75);
    transform-origin: bottom left;
    text-align: left;
}

#gameOverPanel .time-value {
    padding: 0 5px;
    background: #000;
}

#gameOverPanel tbody .cell {
    vertical-align: middle;
}

#gameOverPanel tbody .cell .value {
    background: #000;
    border-right: 3px #2c2f3d solid;
    height: 18px;
    line-height: 18px;
    padding: 0 8px;
    text-align: left;
}

#gameOverPanel .time {
    float: right;
}

#gameOverPanel .time {
    float: right;
}

#gameOverPanel .hint-continue {
    float: left;
}

#gameOverPanel tbody .cell:last-of-type .value {
    border-right: none;
}

#gameOverPanel .player-row .cell {
    padding-top: 10px;
}

#gameOverPanel .cell-player {
    width: 80px;
}

#gameOverPanel .cell-attack {
    width: 80px;
}

#gameOverPanel .cell-hp, #gameOverPanel .cell-mp {
    width: 70px;
}

#gameOverPanel .cell-status {
    width: 80px;
}

#gameOverPanel tbody .cell-status .value {
    text-align: center;
}

#gameOverPanel .cell-status[data-game-status="win"][data-char-status="alive"] {
    color: #85ff85;
}

#gameOverPanel .cell-status[data-game-status="win"][data-char-status="dead"], #gameOverPanel .cell-status[data-game-status="draw"] {
    color: #ffd34c;
}

#gameOverPanel .cell-status[data-game-status="lose"] {
    color: #ff9898;
}

#gameOverPanel .cell-status[data-game-status="win"] .value:before {
    content: "Win";
}

#gameOverPanel .cell-status[data-game-status="draw"] .value:before {
    content: "Draw";
}

#gameOverPanel .cell-status[data-game-status="lose"] .value:before {
    content: "Lose";
}

#gameOverPanel .cell-status[data-char-status="alive"] .value:after {
    content: " (Alive)";
}

#gameOverPanel .cell-status[data-char-status="dead"] .value:after {
    content: " (Dead)";
}

#statusPanels .status:before {
    position: absolute;
    opacity: 0;
}

#statusPanels.axys .status .small {
    opacity: 0;
}

#statusPanels.axys .status:before {
    opacity: 1;
    transition-delay: .5s;
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABxCAMAAAAUJ/ZOAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAwBQTFRFWYyw/dCw5P7/lOz9NlfSba/NL4pqV5GY/v//dcbVmbD9jW0mOFiF2/j+dtTlov//bHN2Vmluh+f6xq2IZ6e3wZWPZUsw/aqUTXWiMkhSPmhvk6ywmPL/c4e3/b+j/+RlW/KoNkhyS0tLkx4b6efmZHSdKnhfboeK//PJqdHxJTdOqv////7TrcnM/unBRVRqs2xTpZRu0aKaUXqqf83WxWlV+964nvr/GStHhtfqGKms9pSGFSQzsoqE19bVxcPDa1VKkWhVxejzmY50pKam0ktIan6sSW+b/rOcRm3bEkA2EDJiDE5mkfH+tK6IWp6oY/6093R1hXllKTE96ZF4NaBrg/X/tf//uLe3cmlbOGCVyOTnOVF6GVZHfIGDlZiaw5pzg9zyu1tI5NCmAwIHCBEomXyGh5aY0qN9SzUyM0RrSnCcqOX2wYtqilNGs4U036k3///dwfn+IDtmeI3Euef20HdjJ0bCav/E48WTcQ8N2/X6TFt9e5yheOLyKkFfS8iN1fP9yJFtNmrERXZ9cTgxgsnkQmOQI0Rx7v//TSwLn7zDI83dnNjtCRhLr3pg9PLxHTCN7sBW4INo///x3t3ckebprJ94xy4r7lBK0Zh0td/rWWV+Pl6Ly4FVw5w5YK+8M1NauqBdRWiUH2hNUAUDXI7AOrjE3qB4897pmO//P+afGEaMVnpDVICy7+3t0/L2rq2sjtrw4+HhU/7CJA8JQ3CjkOL0lv7/XGeTXMTRlpOPxIx+ken2D36UPiwihYyOYoHrj+b5zczKR2qZz+31SHiuudXXhuHuwLalDF510uvsQVirUOSW3ZJsOj9M//qIxL3S+qKMW9vzloZmBigl2vL26ef6Yz0PLVB+mc/mUIOIPLF7YHGZUSAble/zFiJqQmae3duxmaCiSm2Xoz02nvD1zb2bohUSukk57vL9crzBJVqs2GRXISAi+fn5N19liNrdm/X/paCcGyFAWltcVWu356qA4a2k8LGTzP7/1s/ViLttdL/dlu3+////c9FwFAAAAQB0Uk5T////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////AFP3ByUAABf4SURBVHjapJoLQFPX+cAxKeZSgjdgGi8QtaSAmIvEesGEGhFQCIIYBS0PIwomZRClIr6K0LQ0ECITrY/OKpkwkNnUXkSL4oOaykP7WNM56cyiaIdMHRUwks2tf+B/7s0DxIR17hPBhHh++Z7n+86Jy4hTeaLAEUKK+h3+up+RCGtbwv9SdpofPltNyXa+0IiL099ECHGRXC5CNBlOXnBmAB5ms69Q2ezMMgpF90IQTjoiEslFmN+iMU9Ci3QB53W6Voh40FiNUoe12mH2lbL3KeteBJJagItIiOLQKGKJZMeOHS+99NK3RUuIx57N7GFSyt5fs+QFIP28s3IRIWerILsB9R++RMjSL79c+m2V/8hIqxglENrEMo+rLwJZpMBJhhwx2xmDd1+yQpbuWPqyX+tIvxGmAgjsxqR0n3kByDoDQkKQNob1mX28Dy2KkPLy7JclZ0ayr5mGh6moEZvQ784gkM1aCN3m0XXfVtohO758GUjVSKobPDzMvuPtOqfxBSANNR0iC8RgNXZD0XjI7NiIBiYMFKkWXDE2vAAkVYJZNTFY3+Oif3xY+ay5Xn45u7EaaIIOSMQTud0pZFE5Nk6TJd9W3r1rZ+x46cuXv/wytukxyk/pFeDe/f8bxOYTXwKyw05ZunTHjqVbhW7nqOFcjSBi5EUgqXaIyho32QAyxilLl4LvW3lnMVzgV946MvK/aSL3tDzTTWhyd8dSqyIv7djx4Q4/QW6uTPaf9PjPEHmbFdL4D8CwpuOOD+9+WE6vNSqVSqPSZ2BJY+OZF4E0SqwQUFYsTmUUyAhV7hKEch9a72M+ahW4xa1Xp9M1Nvy3kDN+NgimIN5lf5r7737Hkt29K5MWKJkfgaX5bK2lOGrZJhhGt7Rfzdal9v9XkH5vazLK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') no-repeat;
    background-size: cover;
}

.mode-debug :-webkit-any(.screen, .container-wrap) {
    pointer-events: auto;
}

#help_panel {
    border: 2px solid #5b75d9;
    background: #0a1342;
    border-radius: 10px;
}

#help-title {
    position: absolute;
    left: 50%;
    top: 0;
    color: #0a1342;
    transform: translate(-50%, -50%);
    background: linear-gradient(to bottom, rgb(17, 17, 17) 0%, rgb(17, 17, 17) 49%, #0a1342 51%, #0a1342 100%);
    color: #aec7ff;
    padding: 0 .5em;
}

#help_panel .action_bar .btn_ok {
    left: 172px;
}

#help-tab {
    margin-top: 1em;
    border: 0;
    background: transparent;
    padding-left: 0;
    padding-right: 0;
    height: 335px;
    border-bottom: 2px solid #5b75d9;
    border-radius: 0;
    pointer-events: auto;
}

#help-tab .ui-widget-header {
    background: transparent;
    border: 2px solid #5b75d9;
    padding-left: 0;
    padding-right: 0;
    margin-left: -2px;
    margin-right: -2px;
    border-top: 0;
    border-radius: 0;
}

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {
    border-width: 2px;
    border-color: #283d84;
    background: #122565;
}

.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus, .ui-button:hover, .ui-button:focus, .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {
    border-width: 2px;
    border-color: #5a77d8;
    background: #122565;
}

.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited, a.ui-button, a:link.ui-button, a:visited.ui-button, .ui-button {
    color: #5a77d8;
    outline: none;
}

.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {
    color: #ffffff;
}

.ui-tabs .ui-tabs-panel {
    height: calc(100% - 42px);
    box-sizing: border-box;
    background: #122565;
    color: #aec7ff;
    text-align: left;
    overflow-y: auto;
    cursor: default;
}

.ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor, .ui-tabs .ui-tabs-nav li.ui-state-disabled .ui-tabs-anchor, .ui-tabs .ui-tabs-nav li.ui-tabs-loading .ui-tabs-anchor {
    cursor: default;
}

.table {
    width: 100%;
    border-collapse: collapse;
    border-color: #5b75d9;
}

.table td, .table th {
    padding: .25em;
    border-color: #5b75d9;
}

#help_panel video {
    width: 256px;
    height: 192px;
}

#help-tab p {
    margin-top: 0;
}

#tabs-1 table {
    table-layout: fixed;
}

#tabs-1 ul, #tabs-1 ol {
    padding-left: 1.5em;
}

#tabs-1 .name {
}

#tabs-1 .act-video {
    width: 256px;
}

#tabs-1 .key {
}

#tabs-1 .desc {
}

#tabs-2 h3 {
    margin-bottom: .25rem;
    text-decoration: underline;
}

#tabs-2 h3:before {
    content: "※";
}

b.cheat {
    font-style: italic;
    font-weight: bold;
}

p > b.cheat:first-of-type:after {
    content: "：";
}

.cover-s {
    float: left;
    width: 39px;
    height: 39px;
    background: #000;
    margin-top: 2px;
    margin-right: 2px;
}

.cover-s img {
    width: 100%;
    height: 100%;
}

#char-list {
    margin-left: calc(-1.5em);
    margin-right: calc(-1.5em + 2px);
    margin-top: -1em;
    text-align: center;
}

#char-list:after, #char-info {
    display: block;
    content: "";
    clear: both;
}

.char-skill li {
    text-align: left;
}

.char-skill li:before {
    content: attr(skillName) ":";
    font-weight: bold;
    text-decoration: underline;
    margin-right: .5em;
}

.char-skill li:after {
    content: attr(keyHint);
}

#char-info {
    text-align: center;
    margin-top: 10px;
    display: flex;
}

.char-skill {
    flex: 1;
    margin-top: 0;
}

#char-info img .obj {
    background: #000;
}

#char-info .char-info img {
    margin-top: 0;
    background: #000;
}

.cover-s.active {
    outline: 2px solid #aec7ff;
}

#selection_ctr_note {
    left: 60px;
    bottom: 10px;
    pointer-events: all;
    cursor: pointer;
}

#selection_ctr_note:hover {
    text-decoration: underline;
}

/* Mobile web controls: MOBA-style joystick, actions, and skill chords. */
html.mobile-device,
html.mobile-device body {
    overscroll-behavior: none;
    width: 100%;
    min-height: 100%;
}

html.mobile-device body {
    height: 100vh;
    height: 100dvh;
}

#mobile-controls {
    display: none;
    position: fixed;
    z-index: 3000;
    inset: 0;
    pointer-events: none;
    font-family: "Microsoft JhengHei UI", Arial, sans-serif;
    -webkit-user-select: none;
    user-select: none;
}

html.mobile-device #mobile-controls {
    display: block;
}

.mobile-control {
    pointer-events: auto;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
}

.mobile-controls__orientation-warning {
    display: none;
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: center;
    padding: 24px;
    color: #fff;
    background: rgba(3, 6, 14, .94);
    font-size: clamp(20px, 6vw, 36px);
    font-weight: bold;
    text-align: center;
    pointer-events: auto;
}

.mobile-controls__fullscreen {
    position: absolute;
    top: calc(12px + env(safe-area-inset-top));
    right: calc(14px + env(safe-area-inset-right));
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, .38);
    border-radius: 12px;
    color: #fff;
    background: rgba(5, 7, 13, .6);
    font-size: 25px;
    line-height: 1;
}

.mobile-controls__fullscreen:active,
.mobile-controls__button.is-pressed,
.mobile-controls__skill.is-pressed,
.mobile-controls__joystick.is-pressed {
    filter: brightness(1.35);
}

.mobile-controls__joystick {
    position: absolute;
    left: calc(18px + env(safe-area-inset-left));
    bottom: calc(18px + env(safe-area-inset-bottom));
    width: clamp(138px, 27vw, 202px);
    aspect-ratio: 1;
    border: 2px solid rgba(255, 255, 255, .38);
    border-radius: 50%;
    background: rgba(17, 32, 64, .58);
    box-shadow: 0 4px 18px rgba(0, 0, 0, .28), inset 0 0 0 12px rgba(90, 119, 216, .14);
    transition: filter .08s ease, transform .08s ease;
}

.mobile-controls__joystick-label {
    position: absolute;
    top: 8%;
    left: 50%;
    width: 100%;
    color: rgba(255, 255, 255, .72);
    font-size: clamp(9px, 1.7vw, 13px);
    font-weight: bold;
    text-align: center;
    transform: translateX(-50%);
    pointer-events: none;
    text-shadow: 0 1px 2px #061027;
}

.mobile-controls__joystick-ring {
    position: absolute;
    inset: 17%;
    border: 1px dashed rgba(255, 255, 255, .25);
    border-radius: 50%;
}

.mobile-controls__joystick-knob {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 38%;
    aspect-ratio: 1;
    border: 2px solid rgba(255, 255, 255, .58);
    border-radius: 50%;
    background: rgba(90, 119, 216, .82);
    box-shadow: 0 3px 12px rgba(0, 0, 0, .35);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.mobile-controls__skills {
    position: absolute;
    right: calc(clamp(164px, 27vw, 224px) + env(safe-area-inset-right));
    bottom: calc(18px + env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: repeat(4, clamp(48px, 8vw, 70px));
    grid-auto-rows: clamp(48px, 8vw, 70px);
    gap: clamp(6px, 1.25vw, 11px);
    align-items: end;
    justify-items: center;
}

.mobile-controls__skill {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, .58);
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(145deg, rgba(40, 83, 147, .96), rgba(14, 31, 72, .94));
    box-shadow: 0 4px 16px rgba(0, 0, 0, .34), inset 0 0 0 4px rgba(150, 205, 255, .16);
    font-weight: bold;
    transition: filter .08s ease, transform .08s ease, opacity .08s ease;
}

.mobile-controls__skill--ultimate {
    background: linear-gradient(145deg, rgba(190, 70, 46, .98), rgba(80, 21, 31, .96));
}

.mobile-controls__skill--attack {
    background: linear-gradient(145deg, rgba(55, 131, 203, .98), rgba(14, 53, 113, .96));
}

.mobile-controls__skill--mobility {
    background: linear-gradient(145deg, rgba(91, 153, 94, .98), rgba(24, 77, 56, .96));
}

.mobile-controls__skill.is-cooling-down {
    opacity: .76;
}

.mobile-controls__skill-label,
.mobile-controls__skill-status {
    position: relative;
    z-index: 2;
    display: block;
    pointer-events: none;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
}

.mobile-controls__skill-label {
    margin-top: 22%;
    font-size: clamp(11px, 2vw, 16px);
    line-height: 1.15;
}

.mobile-controls__skill-status {
    margin-top: 5px;
    color: #caffdc;
    font-size: clamp(8px, 1.55vw, 12px);
    line-height: 1;
}

.mobile-controls__skill-cooldown {
    position: absolute;
    z-index: 1;
    inset: 0;
    border-radius: 50%;
    background: rgba(2, 7, 18, .72);
    transform: scaleY(0);
    transform-origin: bottom;
    pointer-events: none;
}

.mobile-controls__actions {
    position: absolute;
    right: calc(16px + env(safe-area-inset-right));
    bottom: calc(18px + env(safe-area-inset-bottom));
    width: clamp(150px, 24vw, 206px);
    height: clamp(116px, 20vw, 168px);
    pointer-events: none;
}

.mobile-controls__button {
    position: absolute;
    display: grid;
    place-items: center;
    width: clamp(46px, 8vw, 68px);
    height: clamp(46px, 8vw, 68px);
    border: 2px solid rgba(255, 255, 255, .58);
    border-radius: 50%;
    color: #fff;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .3), inset 0 0 0 5px rgba(90, 119, 216, .2);
    font-size: clamp(12px, 2.4vw, 20px);
    font-weight: bold;
    transition: filter .08s ease, transform .08s ease;
}

.mobile-controls__button--defend {
    top: 5%;
    left: 10%;
    background: rgba(43, 67, 120, .88);
}

.mobile-controls__button--jump {
    bottom: 5%;
    left: 10%;
    background: rgba(80, 57, 126, .88);
}

.mobile-controls__button--attack {
    top: 50%;
    right: 0;
    width: clamp(78px, 13vw, 112px);
    height: clamp(78px, 13vw, 112px);
    transform: translateY(-50%);
    background: radial-gradient(circle at 35% 25%, rgba(244, 119, 93, .98), rgba(137, 56, 55, .94));
}

.mobile-controls__button-icon,
.mobile-controls__button-caption {
    display: block;
    line-height: 1;
    pointer-events: none;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
}

.mobile-controls__button-icon {
    font-size: clamp(18px, 3.8vw, 28px);
}

.mobile-controls__button-caption {
    margin-top: 2px;
    font-size: clamp(9px, 1.5vw, 12px);
    opacity: .9;
}

.mobile-controls__button--attack .mobile-controls__button-icon {
    font-size: clamp(28px, 5vw, 42px);
}

.mobile-controls__button,
.mobile-controls__skill {
    pointer-events: auto;
}

@media screen and (max-width: 680px) and (orientation: landscape) {
    .mobile-controls__skills {
        right: calc(154px + env(safe-area-inset-right));
        grid-template-columns: repeat(4, clamp(42px, 9vw, 58px));
        grid-auto-rows: clamp(42px, 9vw, 58px);
        gap: 5px;
    }

    .mobile-controls__actions {
        width: 142px;
        height: 112px;
    }

    .mobile-controls__button {
        width: 44px;
        height: 44px;
    }

    .mobile-controls__button--attack {
        width: 68px;
        height: 68px;
    }
}

@media screen and (orientation: portrait) {
    html.mobile-device .mobile-controls__orientation-warning {
        display: flex;
    }

    html.mobile-device .mobile-controls__joystick,
    html.mobile-device .mobile-controls__skills,
    html.mobile-device .mobile-controls__actions,
    html.mobile-device .mobile-controls__fullscreen {
        opacity: .15;
        pointer-events: none;
    }
}