@charset "utf-8";

/*--------------------------------------------------
*
* 	Game
*
*--------------------------------------------------*/
#game-container {
    position:relative;
    width:100%;
    height:100%;
}

#game-container button {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    text-align: inherit;
    text-decoration: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none; /* Safari/古いiOS用 */
    -moz-appearance: none;    /* Firefox用 */
    outline: none;
}

#game-character {
    position:relative;
}

#game-scene-title-container,
#game-flag-button-container,
#game-character-container,
#game-scene-gameover-container,
#game-stage-announce-container {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/*--------------------------------------------------
* 	title
*--------------------------------------------------*/
#game-scene-title-container {
    z-index: 4000;
}

#game-scene-title-container > .game-inner {
    position: relative;
    width: 100%;
    height: 100%;
}

#game-scene-title-bg {
    position: relative;
    width: 100%;
    height: 100%;
}

#game-scene-title-container #game-scene-title-button {
    position: absolute;
    bottom: 45%;
    right: 0;
    left: 0;
    width: 70%;
    padding: 10px;
    border: solid 2px #FFF;
    border-radius: 6px;
    margin: 0 auto;
    text-align: center;
    font-size: 200%;
    font-weight: bold;
    background-color: #ef8181;
    color: #FFF;
    z-index: 4001;
}

#game-scene-title-container img {
    position: absolute;
    bottom: 0;
    width: 100%;
    vertical-align: bottom;
    z-index: 4000;
}

/*--------------------------------------------------
* 	button view
*--------------------------------------------------*/
#game-flag-button-container {
    z-index: 2000;
}

#game-flag-button-container .game-inner {
    position: relative;
    width: 100%;
    height: 100%;
}

#game-flag-button-container #game-flag-button-white-up,
#game-flag-button-container #game-flag-button-white-down,
#game-flag-button-container #game-flag-button-red-up,
#game-flag-button-container #game-flag-button-red-down {
    display: table;
    position: absolute;
    width:60px;
    height: 60px;
    border: solid 1px #ccc;
    border-radius: 50%;
    text-align: center;
}

#game-flag-button-container #game-flag-button-white-down svg,
#game-flag-button-container #game-flag-button-red-down svg {
    display: table-cell;
    vertical-align: middle;
    margin: 0 auto;
}

#game-flag-button-container #game-flag-button-red-up,
#game-flag-button-container #game-flag-button-red-down {
    border: none;
    background-color: #ef8181;
}

#game-flag-button-container #game-flag-button-white-up svg polygon,
#game-flag-button-container #game-flag-button-white-down svg polygon {
    fill:#777;
}

#game-flag-button-container #game-flag-button-red-up svg polygon,
#game-flag-button-container #game-flag-button-red-down svg polygon {
    fill:#FFF;
}

#game-flag-button-container #game-flag-button-white-up {
    bottom: 14%;
    left: 6%;
}
#game-flag-button-container #game-flag-button-white-down {
    bottom: 3%;
    left: 6%;
}
#game-flag-button-container #game-flag-button-red-up {
    right: 6%;
    bottom: 14%;

}
#game-flag-button-container #game-flag-button-red-down {
    right: 6%;
    bottom: 3%;
}

/*--------------------------------------------------
* 	ui
*--------------------------------------------------*/
#game-flag-message-panel {
    position: absolute;
    top: 14%;
    right: 0;
    left: 0;
    text-align: center;
}

#game-flag-message-panel .game-flag-message-text {
    font-size: 200%;
    font-weight: bold;
    line-height: 2.8rem;
    color: #999;
}

#game-life-gage {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 125%;
    color: #ef8181;
}

#game-time-gage {
    position: absolute;
    top: 12px;
    right: 12px;
}
#game-time-gage circle {
    stroke: #999;
}

#game-stage-announce-container .game-inner {
    position: relative;
    width: 100%;
    height: 100%;
}

#game-stage-announce-container #game-stage-view {
    position: absolute;
    top: 14%;
    right: 0;
    left: 0;
    text-align: center;
    font-size: 115%;
    font-weight: bold;
    color: #999;
}

#game-stage-announce-container #game-stage-view .game-announce-number {
    padding-left: 0.5rem;
    font-size: 185%;
}

#game-judgement-ui,
#game-judgement-ui-cross {
    position: absolute;
    top: 14%;
    right: 0;
    left: 0;
    text-align: center;
    font-size: 115%;
    font-weight: bold;
    color: #999;
}

#game-judgement-ui circle.game-circle-rect {
    stroke: #66d0aa;
}

#game-judgement-ui-cross line {
    stroke: #ef8181;
}

/*--------------------------------------------------
* 	character view
*--------------------------------------------------*/
#game-character-container {
    pointer-events: none;
    z-index: 1000;
}

#game-character-container > .game-inner {
    position: relative;
    width: 100%;
    height: 100%;
}

#game-character-base,
#game-character-surface {
    width: 280px;
    height: 280px;
    position: absolute;
    right: 50%;
    bottom: 18%;
    left: 50%;
    transform: translateX(-50%);
}

#game-character-surface > .game-surface-inner {
    position: relative;
    width: 100%;
    height: 100%;
}

#game-character-surface-base,
#game-character-surface-face {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#game-character-surface-base {
    z-index: 2010;
}

#game-character-surface-face {
    z-index: 2100;
}

#game-character-surface-base.all-down {
    background-image: url('../img/img-flag-character-dog-1.png');
    background-repeat: no-repeat;
    background-size: cover;
}
#game-character-surface-base.white-up {
    background-image: url('../img/img-flag-character-dog-2.png');
    background-repeat: no-repeat;
    background-size: cover;
}
#game-character-surface-base.red-up {
    background-image: url('../img/img-flag-character-dog-3.png');
    background-repeat: no-repeat;
    background-size: cover;
}
#game-character-surface-base.all-up {
    background-image: url('../img/img-flag-character-dog-4.png');
    background-repeat: no-repeat;
    background-size: cover;
}

#game-character-surface-face.good {
    background-image: url('../img/img-flag-character-dog-face-1.png');
    background-repeat: no-repeat;
    background-size: cover;
}

/*--------------------------------------------------
* 	gameover
*--------------------------------------------------*/
#game-scene-gameover-container {
    z-index: 3000;
}

#game-scene-gameover-container > .game-inner {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 3002;
}

#game-scene-gameover-container .game-title {
    position: absolute;
    top: 22%;
    right: 0;
    left: 0;
    text-align: center;
    z-index: 3002;
}

#game-scene-gameover-container .game-title-text {
    display: block;
    font-size: 220%;
    font-weight: bold;
    color: #ef8181;
}

#game-scene-gameover-container .game-score-text {
    display: block;
    padding-top: 10px;
    font-size: 115%;
    font-weight: bold;
    color: #777;
}


#game-scene-gameover-container button {
    background-color: #777;
    color: #FFF;
}

#game-scene-gameover-container button.active {
    background-color: #6fc7a8;
}

#game-scene-gameover-container #game-scene-gameover-button,
#game-scene-gameover-container #game-scene-gameover-score-button {
    display: inline-block;
    width: 70%;
    margin: 0 auto;
    position: absolute;
    bottom: 14%;
    right: 0;
    left: 0;
    padding: 10px;
    border-radius: 6px;
    text-align: center;
    font-size: 160%;
    font-weight: bold;
    z-index: 3002;
}

#game-scene-gameover-container #game-scene-gameover-score-button {
    bottom: 26%;
}

#game-scene-gameover-container #game-scene-gameover-filter {
    position: absolute;
    top: 0;
    right: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.9);
    z-index: 3001;
}