@charset "UTF-8";

body {
    background-image: url(../images/navTile.png);
    background-repeat: repeat;
    background-size: 16px 16px;
    color:#181820;
    font-family:"DotGothic16", 'Noto Sans JP', sans-serif;
    font-size: 14px;
    margin: 0 auto;
    max-width: 820px;
    letter-spacing:0.1em;
}

section {
    border : 2px solid #181820;
    padding: 12px;           /* 追加 */
    margin-bottom: 16px;     /* 追加 */
}

.article {
    font-size:24px;
}
.subArticle {
    font-size:20px;
}
.sentenceArticle {
    font-size:16px;
    color:#c02020;
}
.schoolCreate {
    background-color:#E89DE1 ;
}
.selfCreate {
    background-color: #F7A737;
}
.card-link {
    font-size:16px;
    color:#c02020;
    border-bottom:1px solid #c02020 ;
}

/*サイトのトップ部分(ヘッダー) */
header {
    border:2px solid #181820;
    background-color:#f5f5dc;
    margin:20px auto ;
    padding:20px;
}
.hTitle {
    font-size:28px;
    font-weight:bold;
    text-align: center;
    border: 2px solid #181820;
    margin-bottom:20px ;
}
.hBlock {
    display:flex;
    justify-content: space-between;
    gap:30px
}
.hLeft {
    display:block;
}
.hRight {
    display:flex;
    border: 2px solid #181820;
    margin-right: 20px;
    justify-content: space-around;
    align-items: center;
    gap: 8px;                /* 追加 */
    padding: 8px;            /* 追加 */
}
.wIcon {
    width:60px;
    height: 60px;
}

/*  スキルの箇所*/
.skillTitle {
    text-align: center;
    margin-bottom: 10px;
}
.skillBlock{
    display:grid;
    grid-template-columns:48% 48% ;
    gap:4%;
    margin-bottom:20px;
    background-image: url(../images/mainTile.png);
    background-repeat: repeat;
    background-size: 32px 32px;
}
.skillWindow {
    background-color:#f5f5dc;
    border:2px solid #181820;
    padding: 10px;
}
.skillList {
    display:flex;
    justify-content: space-evenly;
    font-size: 14px;
    margin-bottom: 10px;
}
.skill {
    border:1px solid #181820;
    background-color: #f0e8c0;
    display:block;
    padding:10px;
}
.jobSkillList {
    display:flex;
    justify-content: space-evenly;
    font-size: 14px;
    margin-bottom: 10px;
    gap:5px;
}
.jobSkill {
    border:1px solid #181820;
    background-color: #f0e8c0;
    display:block;
    padding:5px 2px 5px 2px;           /* 追加 */
    font-size:10px;
}
.cardLabel {
    display:flex;
    border:2px solid #181820;
    background-color:#f0e8c0;
    position:relative;
    align-items: center;     /* 追加 */
    padding: 8px 10px;       /* 追加 */
    gap: 8px;                /* 追加 */
}
.cardExp {
    padding: 4px 10px;
    margin-left: auto;
    white-space: nowrap;
}

.schoolBlock {
    margin-bottom: 20px;
    background-image: url(../images/mainTile.png);
    background-repeat: repeat;
    background-size: 32px 32px;
}
.selfBlock {
    margin-bottom: 20px;
    background-image: url(../images/mainTile.png);
    background-repeat: repeat;
    background-size: 32px 32px;
}  
/* EXPのブロック */
.expBlock {
    border:2px solid #181820;
    background-image: url(../images/mainTile.png);
    background-repeat: repeat;
    background-size: 32px 32px;
    margin-bottom: 20px;
}
.expLabel {
    background-color:#D4EB20 ;
    border:2px solid #181820;
}

.gettedExp {
    background-color:#c0c0c0 ;
}

/*経験値 開閉メニュー関係の修飾 */

.cardBody {
    max-height:0;
    transition:max-height 500ms ease 0ms;
    overflow: hidden;
    border:2px solid #181820;      /* 追加 */
    background-color:#f5f5dc;      /* 追加 */
}
.cardText {
    padding: 0 16px 8px 16px;   /* 追加 */
}
.cardView {
    padding: 8px 16px 0 16px;   /* 追加 */
}
.card-links {
    padding: 8px 16px 16px 16px;   /* 追加 */
}
.show {
    max-height:1000px;  
}
.status {
    display:flex;
    gap:15px;
    text-align: center;
}
.expCharge {
    display:flex;
    gap:15px;
    text-align: center;
}
.expGaugeFlame {
    width:100%;
    max-width:640px;
    height:30px;
    border: 2px solid #D4EB20;
    background-color: #c0c0c0;
}
.expGauge {
    height: 100%;
    width: 0%;
    background-color: #81F9D4; /* 伸びる部分の色 */
    transition:width 500ms ease 0ms;
}
.powerLv {
    display: flex;
    gap:15px;
    text-align: center;
}
.lvButton {
    border:2px solid #181820;
    background-color: #c0c0c0;
    padding:2px;
}

/* ゲーム部分 */
.gameBlock {
    border:2px solid #181820;
    background-image: url(../images/mainTile.png);
    background-repeat: repeat;
    background-size: 32px 32px;
}
.gameLabel  {
    border:2px solid #181820;
    background-color: #81F9D4;
}
.gameWindow {
    display: flex;
    justify-content: center;
    gap:40px;
}
.charaGra {
    width:100px;
    height:100px;
    transition:img 500ms ease 0ms;
}
.chara {
    text-align: center;
}
.versus {
    font-size:32px;
    font-weight: bold;
    margin:auto 40px;
}
.playerGaugeFlame{
    width:100%;
    max-width:200px;
    height:30px;
    border: 2px solid #181820;
    background-color: #c0c0c0;
}
.playerGauge {
    height: 100%;
    width: 100%;
    background-color:#00bfff ; /* 残りHP */
    transition:width 500ms ease 0ms;
    /* text-align: center; */
}

/* ゲージ固定のためついか。個別に隔離 */
.playerGaugeFlame, .enemyGaugeFlame {
    position: relative;
}
.playerGauge, .enemyGauge {
    position: static; /* ← absoluteの基準にさせない */
}
.gaugeFlex {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    z-index: 1;
}


.enemyGaugeFlame{
    width:100%;
    max-width:200px;
    height:30px;
    border: 2px solid #181820;
    background-color: #c0c0c0;
}
.enemyGauge {
    height: 100%;
    width: 100%;
    background-color: #ffff00; /* 残りHP */
    transition:width 500ms ease 0ms;
    align-self: center;
}


.messageWindow {
    border:2px double #181820;
    height:300px;
    margin:20px;
    font-size:16px;
    white-space: pre-wrap;
    overflow : hidden scroll;
}
/* ゲームウインドウらしく点滅させる。 */

/* 勝利演出 */


.winActive {
    position: relative; 
    display: inline-block;
}


/* 左上の角から */
.winActive::before {
    content: "";
    position: absolute;
    top: -6px; left: -6px;
    width: 0; height: 0;
    border-top: 10px solid #ff2020;
    border-left: 10px solid #ff2020;
    animation: drawCornerTL 0.4s ease forwards;
}

/* 右下の角から */
.winActive::after {
    content: "";
    position: absolute;
    bottom: -6px; right: -6px;
    width: 0; height: 0;
    border-bottom: 10px solid #ff2020;
    border-right: 10px solid #ff2020;
    animation: drawCornerBR 0.4s ease forwards 0.4s;
}

@keyframes drawCornerTL {
    to { width: calc(100% + 12px); height: calc(100% + 12px); }
}
@keyframes drawCornerBR {
    to { width: calc(100% + 12px); height: calc(100% + 12px); }
}


/* ここら辺間に合わないので、生成AIをもちいて演出追加 */
/* CLICK HERE */
.clickHereText {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ffff00;
    font-size: 64px;
    font-weight: bold;
    letter-spacing: 0.2em;
    white-space: nowrap;
    opacity: 0;
    z-index: 10;
    /* pointer-events: none; ← 削除 */
    text-decoration: none; /* aタグの下線を消す */
    text-shadow: 1px 1px 0 #181820, -1px -1px 0 #181820,
                 1px -1px 0 #181820, -1px 1px 0 #181820;
    animation:
        fadeInText 0.4s ease forwards 0.9s,
        floatText 1.2s ease-in-out infinite 1.4s;
}

@keyframes floatText {
    0%, 100% { transform: translate(-50%, -50%); }
    50%       { transform: translate(-50%, calc(-50% - 6px)); }
}
/* これが抜けている */
@keyframes fadeInText {
    to { opacity: 1; }
}

@keyframes floatText {
    0%, 100% { transform: translate(-50%, -50%); }
    50%       { transform: translate(-50%, calc(-50% - 6px)); }
}

.battleButton {
    display:flex;
}

.battleStart,.battleReset,.turnStart{
    border:2px solid #181820;
    background-color:#E6A417;
    display: block;
    width:200px;
    height:50px;
    margin:20px auto ;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
}


/* 敗北時倒れる演出 */
.defeatPose {
    transform:rotate(-90deg);
    transition: transform 500ms ease-in 0ms;
}

/* フォーカス */
.battleStart:focus,
.turnStart:focus {
    outline: 2px solid #c02020;
    outline-offset: 1px;
    background-color: #c0c0c0;
}

@keyframes blinking {
    0%   { opacity: 1; }
    50%  { opacity: 0; }
    100% { opacity: 1; }
}

.blinking {
    animation: blinking 1s steps(1, end) infinite;
}





@media screen and (max-width:768px){
    body {
        width: 100%;
        max-width: 375px;
        font-size: 12px;
        margin: 0 auto;
    }

    section {
        padding: 8px;
        margin-bottom: 10px;
    }

    /* トップ */
    header {
        margin: 10px auto;
        padding: 10px;
    }

    .hTitle {
        font-size: 22px;
        margin-bottom: 10px;
    }

    .hBlock {
        gap: 12px;
        align-items: center;
    }

    .hRight {
        margin-right: 0;
        gap: 4px;
        padding: 4px;
    }

    .wIcon {
        width: 42px;
        height: 42px;
    }

    /* スキル */
    .skillBlock {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-bottom: 10px;
    }

    .skillWindow {
        padding: 6px;
    }

    .skillTitle {
        margin-bottom: 6px;
    }

    .skillList {
        flex-wrap: wrap;
        gap: 6px;
        font-size: 12px;
        margin-bottom: 6px;
    }

    .skill {
        padding: 6px;
    }

    .jobSkillList {
        flex-wrap: wrap;
        gap: 4px;
        font-size: 12px;
        margin-bottom: 6px;
    }

    .jobSkill {
        padding: 4px 2px 4px 2px;
        font-size: 10px;
    }

    .skillMemo {
        margin-top: 4px;
    }

    .jobSkillMemo {
        margin-top: 4px;
    }

    /* ゲーム */
    .gameWindow {
        align-items: center;
        gap: 12px;
    }

    .charaGra {
        width: 72px;
        height: 72px;
    }

    .versus {
        font-size: 20px;
        margin: 0 6px;
    }

    .playerGaugeFlame {
        max-width: 120px;
        height: 24px;
    }

    .enemyGaugeFlame {
        max-width: 120px;
        height: 24px;
    }

    .messageWindow {
        height: 200px;
        margin: 10px 0;
    }

    .battleButton {
        justify-content: center;
        gap: 8px;
        flex-wrap: wrap;
    }

    .battleStart {
        width: 110px;
        height: 40px;
        margin: 0;
        font-size: 14px;
    }

    .turnStart {
        width: 110px;
        height: 40px;
        margin: 0;
        font-size: 14px;
    }

    .battleReset {
        width: 110px;
        height: 40px;
        margin: 0;
        font-size: 14px;
    }
}