:root{
    --max-element-width:1024px;
    --image-scale:2.0;
    --image-translate-x:0px;
    --image-translate-y:0px;
}
img{
    border-radius: 4px;
}
p{
    margin: 0;
}
a{
    text-decoration: none;
}
body{
    font-family: sans-serif;
    scrollbar-width: none;
    scrollbar-color: transparent transparent;
}
.top-head{
    font-size: min(50px,9.2vw);
    margin: min(40px,8vw) auto;
    text-align: center;
    color: #68cc;
    color: #144b86;
    /* color:#1343a4;
    color: #fb1; */
    text-shadow: 2px 2px 2px #eed;
    background-color: #f8f8f8;
    box-shadow: 2px 2px 4px #eee,-2px 2px 4px #eee;
    border-radius: 6px;
    max-width: var(--max-element-width);
    padding: min(40px,4vw) 0;
}
header{
    max-width: var(--max-element-width);
    margin:auto;position:sticky;
    top:0px;
    z-index: 2;
}
#header-container{
    display: flex;
    margin: 0 4px;box-shadow:0px 2px 4px #ccc;
    border-radius:8px;
    background:white;
}
.homebt-box{
    flex: 1;
    padding:12px;
    padding-left:20px;
}
.current-town{
    flex: 1;
    text-align:right;
    padding:12px;
    padding-right:20px;
}
.th-span{
    color: black;
    font-size:32px;
    line-height:40px;
    display:inline-block;
}
.middle-homebt-box{
    flex: 1;
    padding:12px;
    text-align: center;
}
.middle-home-bt{
    width: 40px;
}
.home-bt{
    width: 40px;
}
section{
    text-align: center;
    width: 100%;
    max-width: var(--max-element-width);
    margin: auto;
    border-radius: 12px;
    padding: 10px 5px;
    box-sizing: border-box;
}
.tactics-picker{
    padding: 1px 10px;
    background-color: #ffbe0d;
    background-color: #79c;
    background-color: #59f;
    background-image: url("/img/game.svg");
    /* background: linear-gradient(deg, #ffae0d 0%, #ffdd00 100%); */
    background: url(/img/game.svg), linear-gradient(177deg, #98d1ff, #007aff);
    /* background: url(/img/game.svg), linear-gradient(177deg, #4baeff, #0050a8); */
}
.choose-tactics{
    width: 100%;
    overflow: auto;
    box-sizing: border-box;
}
.combo-head{
    margin: 0;
    padding:min(40px,8vw) 8px;
    -webkit-text-stroke: 1px #144b86;
}
.combo-container{
    display: inline-block;
    background-color: white;
    padding: 6px 12px;
    margin: 10px 6px;
    background-color: #fff6;
    border: solid 1px white;
    /* background-color: white; */
    /* background-color: aliceblue;
    background-color: #68c;
    background-color: #1343a4;
    background-color: #d9dee8;
    box-shadow: 3px 3px 6px #ccc; */
    border-radius: 10px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.troop-box{
    display: inline-block;
    width: min(80px,16vmin);
    height: min(80px,16vmin);
    min-width: 40px;
    min-height: 40px;
    /* background-color: white; */
    border-radius: 6px;
    overflow: hidden;
    /* background-color: #f9f9f9; */
    margin: 4px;
}
.troop-box img{
    object-fit: cover;
    max-width: 100%;
    height: 100%;
    object-position: calc(var(--i) / 27 * 100%) 0%;
    filter: saturate(1.3);
    transform: scale(1.1);
}
.scroll-x{
    width: max-content;
    margin: auto;
}
.detail-box{
    width: 100%;
    box-sizing: border-box;
    display: none;
    background-color: #f9f9f9;
    border-radius: 12px;
    box-shadow: 2px 2px 2px #ccc,-2px 2px 2px #ccc;
    overflow: hidden;
}

.damagepoint{
    font-weight: bold;
}
.redspan{
    color: red;
}
.bluespan{
    color:#007aff;
}
.op-hint{
    background-color: #f9f9f9;
    font-size: 32px;
    color: #ccc;
    padding: 60px 10px;
    box-sizing: border-box;
    max-width: 100%;
    margin: 20px auto;
    border-radius: 8px;
}
#detail-hint{
    margin: 0 -5px;
}
.video-para video{
    max-width: 90%;
    border-radius: 8px;
}
div.current-detail{
    display: block;
}
.hidden{
    display: none;
}
.troop-in-detail{
    height: min(80px,16vw);
    width: min(80px,16vw);
    border-radius: 8px;
    object-fit: cover;
    object-position: calc(var(--i) / 7 * 100%) 0%;
}
.troop-exhibit *{
    vertical-align: middle;
}
.troop-exhibit{
    background-color: #144b86;
    font-size: min(30px,6vw);
    /* margin: 40px 0; */
    /* border: 8px dotted #007aff; */
    box-sizing: border-box;
    /* color: #007aff; */
    padding-top: 1px;
    /* padding-bottom: 40px; */
    /* background-color: #26f7; */
    color: white;
    background-image: url("/img/combo-bg.svg");
    background-size: 100%;
    background-repeat: no-repeat;
    /* background-position: 50% 50%; */
}
#anchor{
    height: 50px;
}

.rating-box{
    height: min(80px,20vw);
    line-height: min(80px,20vw);
}
.rating-box img{
    width: min(40px,8vw);
}
.combo-intro{
    background-color: white;
    color: #777;
    font-size:min(24px,4.8vw);
    padding:40px 12px;
    box-shadow:0px 2px 2px #eee;margin:0;
}
h2.step-head{
    margin: 40px 10vw;
}
.steps-div h3{
    font-size: 30px;
}
.steps-div p{
    font-size: 20px;
    line-height: 30px;
}
.step-number-span{
    display: inline-block;
    color: #ea2;
    font-size:min(28px,7vw);
    margin-bottom: min(8px,1.8vw);;
}
.step-name-span{
    color:#144b86;
    font-size:min(10vw,34px);
    border-top:#888 2px solid;
    line-height:46px
}
table{
    margin: auto;
    border-collapse: collapse; 
}
.baselink{
    background-color: black;
    color: white;
    padding: 4px 20px;
    border-radius: 100px;
    display: inline-block;
}
.videolink{
    padding: 4px 20px;
    color: black;
    border-radius: 100px;
    display: inline-block;
    border: 1px solid black;
    margin-bottom: 4px;
}
.damage-calc-table td{
    border: 2px solid black;
    padding: 6px;
    font-size: 18px;
}
.base-head{
    margin: 0;
    padding: 12px 0;
    font-size: min(4vw,18px);
}

.detail-box h3{
    margin-top: 46px;
    margin-bottom: 14px;
    font-size: 20px;
}

a.copy-army{
    /* background-color: #144b86; */
    color:white;
    padding:8px;
    display:inline-block;
    border-radius: 100px;
    width:160px;
    margin:10px 0;
    animation: copy-army-anim  1.4s infinite alternate;
}

.base-box{
    display: inline-block;
    border: 1px solid black;
    border-radius: 8px;
    width: 90%;
    margin: 20px 0;
}

@keyframes copy-army-anim {
0% {
  background-color: #144b86;
}
50%  {
  background-color: #144b86;
}
51% {
  background-color: #127abb;
}
100% {
  background-color: #127abb;
}
}

@media screen and (min-width:640px) {
.base-box{
    width: 45%;
    margin-left: 1.5%;
    margin-right: 1.5%;
}
}

#large-image-box{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #222e;
display: none;
text-align: center;
z-index: 3;
}

#large-image{
max-width: 100%;
max-height: 100%;
transform: scale(2) translateY(-50%);
transform: scale(var(--image-scale)) translate(var(--image-translate-x),calc(-50% + var(--image-translate-y)));
object-fit: contain;
position: relative;
top: 50%;
transform-origin: center;
transform-origin: 50% 0%;
}
.base-image{
aspect-ratio: 4 / 3;
object-fit: cover;
}

.base-image, #image-scroll-box img{
filter: saturate(1.2);
}

#close-span{
position: absolute;
color: white;
font-size: 40px;
left: 50%;
bottom: 0;
transform: translateX(-50%);
margin-bottom: 20px;
background-color:#59f;
padding: 6px 40px;
border-radius: 6px;
cursor: pointer;
}
#image-scroll-box{
width: 100%;
height: 100%;
}

#image-frame{
/* width: 100%;
height: 100%; */
scrollbar-width: none;
overflow: hidden;
}

.empty-feedback{
    background-color: #eee;
    font-size: 20px;
    color: #ccc;
    margin: 40px 20px;
    border-radius: 12px;
    padding: 30px 10px;
    border: 1px dashed #888;
}


#inline-feedback-bt{
    background-color: #007aff;
    color: white;
    border: none;
    font-size: 24px;
    border-radius: 6px;
    padding: 8px 20px;
    margin: 14px;
    min-width: 180px
}

#post-commnet{
    text-decoration: underline!important;
}

.ask-div{
    padding: 20px 0;
    margin: 40px 20px;
    border-radius: 12px;
    border: 1px #ccc solid;
}


.user-content{
    display: flex;
}
.feedback-item{
    margin: 40px 20px;
    background-color: #eee;
    padding: 14px 0;
    border-radius: 12px;
    border: 1px solid #666;
}
.avatar{
    width: 40px;
    min-width: 40px;
    height: 40px;
    background-color: #ccc;
    line-height: 40px;
    border-radius: 30px;
    font-size: 24px;
    vertical-align: middle;
    color: #222;
    margin-left: 4px;
    margin-top: 8px;
}
.user-and-title,.reply-to-user{
    text-align: left;
    padding: 0 8px;
}
.username-div{
    color: #555;
}
.title-div{
    font-weight: bold;
    font-size: min(4vw,22px);
}

.reply-to-user{
    width: fit-content;
    margin-left: 40px;
    background-color: #fafafa;
    margin-right: 10px;
    border-radius: 6px;
    margin-top: 6px;
    padding: 8px;
    line-height: 28px;
    border: 1px dotted #aaa;
}