@charset "UTF-8";

@font-face{
    font-family: "りいポップ角";
    src: url("./RiiPopkkR.woff2");
}
@keyframes spin{
    0%{transform:rotate(0);}
    100%{transform:rotate(360deg);}
}
@keyframes blinker{
    0%{visibility: hidden;opacity: 0;}
    49%{visibility: hidden;opacity: 0;}
    50%{visibility: visible;opacity: 1;}
    100%{visibility: visible;opacity: 1;}
}

input[type="submit"],
input[type="button"] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  box-sizing: border-box;
  cursor: pointer;
}
*{
    margin:0;
    padding:0;
    position:relative;
    -webkit-user-drag:none;
    -khtml-user-drag:none;
    user-select:none;
    -webkit-user-select:none;
    -ms-user-select: none;
    -moz-user-select:none;
    -khtml-user-select:none;
    -webkit-touch-callout:none;
    font-family: "りいポップ角";
}

html{
    touch-action: manipulation;
}
body{
    max-width:1050px;
    margin:auto;
    margin-top:env(safe-area-inset-top);
    margin-bottom:env(safe-area-inset-bottom);
    padding-top:1vh;
    padding-bottom:1vh;
    color:#333;
}
header{
    margin-bottom:0.85em;
}
header small{
    font-size:medium;
}
footer{
    font-size:small;
}
ul,ol{
    margin:1em 1em 1em 2em;
}
a{
    color:blue;
}
a:visited{
    color:blue;
}

#loading{
    position:fixed;
    background-color:white;
    top:0;
    right:0;
    bottom:0;
    left:0;
    z-index:100;
    display:flex;
    flex-wrap:wrap;
    align-content: center;
    justify-content: center;
}
#loading img{
    max-width:100%;
    height:auto;
}

#yunisama_kawaii{
    width:100%;
    height:100%;
    pointer-events:none;
    border-radius:15px;
}
#windowWrapper{
    display:flex;
    flex-wrap: wrap;
    justify-content: center;
}

#characterWindow{
    display:flex;
    cursor: url("./hand_open.png"),grab;
}
#characterWindow:active{
    cursor: url("./hand_grab.png"),grabbing;
}
#yuniMessage{
    display:inline;
}
#messageWindow{
    border:3px dashed darkgray;
    border-radius:20px;
    background-color:white;
    text-align:center;
    padding:1em;
    font-size:x-large;
    margin-top:0.5em;
}
#nameWindow{
    position: absolute;
    top:0;
    margin-top:-0.5em;
    background-color:white;
    padding:0 1em;
    left:3vw;
    border-radius:10px;
}

#mainWindow{
    width:100%;
    max-width:650px;
    padding:1vh 1vw;
}
#subWindow{
    width:100%;
    max-Width:calc(375px - 2vw);
}
#subWindow p:first-child{
    font-size:115%;
    margin:0.5em;
    text-decoration:underline;
}
#yoshiyoshi_score{
    margin:1vh 1vw;
    border:2px solid lightblue;
    border-radius:10px;
    padding:1vh 1vw;
    background-color:white;
    text-align:right;
}
#scoreReset{
    position: absolute;
    font-size:85%;
    right:1vw;
    margin-top:-0.9vh;
    z-index:10;
}
#scoreReset > span{
    text-decoration: underline;
    cursor: pointer;
}
#optionWrapper{
    display: flex;
    flex-wrap: wrap;
}
#optionWrapper div,.appInstall{
    width:100%;
    margin:0.5vh 1vw 1vh 1vw;
    border:2px solid lightblue;
    border-radius:10px;
    padding:1vh 1vw;
    background-color:white;
    transition: background-color 0.5s;
    cursor: pointer;
}
#optionWrapper div:hover,.appInstall:hover{
    background-color:lightblue;
    transition: background-color 0.25s;
}
#shareButton{
    display: flex;
}
#tweetButton a{
    background-color: #1b95e0;
    text-decoration:none;
    display:inline-block;
    color:white;
    padding:0.25em;
    border-radius:2px;
    cursor:pointer;
}
#tweetButton a img{
    height:1.1em;
    width:auto;
    filter:invert(1);
    vertical-align: bottom;
}
#tweetButtonVote a{
    background-color: #ffb334;
    text-decoration:none;
    display:inline-block;
    color:white;
    padding:1em;
    border-radius:2em;
    cursor:pointer;
    font-size:150%;
    margin:1em 1em 0.5em 1em;
}
#tweetButtonVote a img{
    height:1.1em;
    width:auto;
    filter:invert(1);
    vertical-align: bottom;
}

#tootButton{
    margin-left:1em;
}
#tootButton a{
    background-color: #6364FF;
    text-decoration:none;
    display:inline-block;
    color:white;
    padding:0.25em;
    border-radius:2px;
    cursor:pointer;
}
#tootButton a img{
    height:1.1em;
    width:auto;
    vertical-align: bottom;
}

.qaf{
    margin-top:1em;
    margin-bottom:1em;
    width:90%;
}

.loadImageBuffer{
    display:none;
}
.useScore{
    text-align:right;
    font-size:85%;
}
.kome{
    list-style: none;
}
.kome li:before{
    content:"※";
    margin-left:-1em;
}
.appInstall{
    margin-left:2em;
}
.qaf img{
    border:2px solid lightblue;
    border-radius:5px;
    margin:1em;
    max-width:800px;
    width:100%;
    height:100%;
}
.linkBox{
    margin:1em 0;
    background-color:lightblue;
    display:inline-block;
    padding:1em;
    color:#333;
    text-decoration:none;
}
.linkBox:visited{
    color:#333;
}
.qt{
    margin-top:1em;
    margin-left:2em;
    text-decoration:underline;
    font-size:115%;
}
.qt::before{
    position: absolute;
    margin-left:-1em;
    content:"★";
    animation: 7s linear infinite spin;
}
.qa{
    margin-top:1em;
    margin-left:2em;
    border-bottom:1px dashed gray;
}
.spin{
    display:inline-block;
    animation: 7s linear infinite spin;
}
.blink{
    display:inline-block;
    animation: 1s linear infinite blinker;
}