/* 九九バトル v5：ちず・バトル・かけざんマス */
:root{font-family:'Yu Gothic','Meiryo',sans-serif;color:#213e3b;background:#f3f6f5;font-synthesis:none}
*{box-sizing:border-box}body{margin:0}
main{max-width:1100px;margin:auto;padding:16px 20px}
button,select{font:inherit}button{cursor:pointer;touch-action:manipulation}
button:focus-visible,select:focus-visible,a:focus-visible{outline:4px solid #eeac30;outline-offset:4px}
[hidden]{display:none!important}
header{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:14px}
.brand{color:#244f45;text-decoration:none;font-size:26px;font-weight:900;letter-spacing:2px;white-space:nowrap}.brand small{display:block;font-size:12px;letter-spacing:3px;margin:5px 0 0 42px}
.header-buttons{display:flex;gap:8px}
.quiet{border:0;background:#e5eeea;border-radius:24px;padding:10px 16px;font-size:15px;color:#305c50;font-weight:bold;white-space:nowrap}
select{margin-left:8px;background:#fff;color:#25493f;padding:9px;border:1px solid #ccdcd5;border-radius:10px;font-weight:bold;font-size:15px}
.primary{display:block;width:100%;border:0;background:#24614e;color:#fff;border-radius:16px;padding:16px;margin-top:14px;font-size:20px;font-weight:bold;box-shadow:0 4px 0 #163f33;min-height:60px}
.secondary{display:block;width:100%;border:2px solid #cfe0d7;background:#f5f9f6;color:#24614e;border-radius:16px;padding:12px;font-size:18px;font-weight:bold;box-shadow:0 4px 0 #d8e5de;min-height:56px}
footer{text-align:center;color:#74847c;font-size:12px;margin-top:18px;line-height:1.7}

/* ちず・マス がめん 共通 */
.screen-top{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:12px}.screen-top h2{margin:0;font-size:24px}.screen-top label{font-weight:bold;font-size:15px}
.lit-summary{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px 12px;width:100%;background:#fff;border:1px solid #e2eae6;border-radius:18px;padding:14px 18px;color:#244f45;text-align:left;font-weight:bold;box-shadow:0 4px 0 #dfe8e3}
.lit-summary strong{font-size:24px}.lit-summary .bar{grid-column:1/-1;height:14px;background:#e5eeea;border-radius:10px;overflow:hidden}.lit-summary .bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#9fd46b,#f5cf6b);border-radius:10px;transition:width .6s}
button.lit-summary:hover{background:#f8fbf9}

/* さいしょの がめん・ランダム */
.choice-list{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.choice{display:flex;flex-direction:column;align-items:center;gap:6px;border:2px solid #24614e;background:#fff;border-radius:24px;padding:22px 14px;box-shadow:0 6px 0 #163f33;color:#244f45;text-align:center}.choice:hover{transform:translateY(-2px)}
.choice .em{font-size:64px;line-height:1.1}.choice strong{font-size:28px}.choice small{font-size:15px;color:#6b7f76;font-weight:bold;line-height:1.6}.choice.boss{background:#fff8e8}.choice .st{margin-top:4px;color:#fff;background:#24614e;border-radius:12px;padding:4px 14px;font-weight:bold}
#boardContinue{margin:14px 0 0;font-size:22px}
.section-title{margin:22px 0 10px;font-size:20px;color:#244f45}
#homeScreen .choice-list{margin-top:0}#homeScreen .choice{padding:16px 12px}#homeScreen .choice .em{font-size:48px}#homeScreen .choice strong{font-size:24px}
.choice:disabled{opacity:.55;filter:grayscale(.7);cursor:default;transform:none}

/* ちず */
.map-note{color:#557361;font-weight:bold;margin:16px 0 10px;font-size:16px}
.enemy-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.enemy-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;border:2px solid #d8e5de;background:#fff;border-radius:20px;padding:14px 8px 12px;box-shadow:0 5px 0 #d8e5de;color:#244f45;min-height:160px}
.enemy-card .tag{font-size:13px;font-weight:900;background:#e5eeea;border-radius:10px;padding:2px 10px}.enemy-card .em{font-size:54px;line-height:1.15}.enemy-card .nm{font-weight:900;font-size:15px}.enemy-card .st{font-size:14px;color:#6b7f76;font-weight:bold}
.enemy-card.ready{border-color:#24614e;box-shadow:0 5px 0 #163f33}.enemy-card.ready .st{color:#fff;background:#24614e;border-radius:12px;padding:4px 14px}.enemy-card.ready:hover{transform:translateY(-2px)}
.enemy-card.boss{background:#fff8e8}.enemy-card.boss .tag{background:#f5cf6b;color:#6b4a06}
.enemy-card.beaten::after{content:'✓';position:absolute;top:8px;right:10px;width:26px;height:26px;border-radius:50%;background:#cbe682;color:#244f45;font-weight:900;display:grid;place-items:center}
.enemy-card:disabled{opacity:.55;cursor:default;filter:grayscale(.7)}

/* バトル */
.play-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:20px;align-items:start}
.arena{position:sticky;top:16px;background:#214f45;color:#fff;border-radius:24px;padding:18px 20px;overflow:hidden;box-shadow:0 8px 0 #173f37}
.stage-line{display:flex;justify-content:space-between;align-items:center;font-size:15px;font-weight:bold;letter-spacing:2px;color:#bdd6c7}
.hearts{font-size:20px;letter-spacing:1px}.hearts .lost{opacity:.2;filter:grayscale(1)}.hearts .break{animation:break .5s}
.enemy-label{display:flex;gap:14px;justify-content:center;align-items:center;margin:14px auto 8px}.enemy-label strong{font-size:18px}.enemy-label span{font-size:14px;color:#d4e6dd;font-weight:bold;font-variant-numeric:tabular-nums}
.health{max-width:320px;height:16px;background:#143e35;border-radius:20px;margin:auto;overflow:hidden}.health i{display:block;width:100%;height:100%;background:#cbe682;border-radius:20px;transition:width .4s ease-out}.health.low i{background:#f0b44c}
.characters{display:flex;align-items:center;justify-content:space-around;max-width:450px;margin:14px auto 0;height:170px}
.hero{font-size:72px;display:inline-block}#enemy{font-size:96px;display:inline-block;animation:bob 3s ease-in-out infinite}
#effect{display:inline-block;font-size:44px;min-width:45px;opacity:0}
.enemy-wrap{position:relative;display:inline-block}
.damage{position:absolute;left:50%;top:-6px;transform:translateX(-50%);font-size:32px;font-weight:900;color:#ffe36e;text-shadow:0 3px 0 #b3541e,0 0 8px #0006;opacity:0;pointer-events:none;white-space:nowrap}.damage.big{font-size:44px;color:#ffb24a}.damage.show{animation:dmg .8s ease-out}
.bubble{position:absolute;right:70%;top:-10px;background:#fff;color:#244f45;font-size:15px;font-weight:900;border-radius:12px;padding:4px 10px;white-space:nowrap;box-shadow:0 2px 0 #0002}
.combo{text-align:center;min-height:24px;font-weight:900;color:#ffe36e;font-size:16px;letter-spacing:1px}
.row-cells{display:grid;grid-template-columns:repeat(9,1fr);gap:4px;max-width:420px;margin:8px auto 0}.remain{color:#ffe36e;letter-spacing:1px}.row-cells .cell{font-size:13px}.row-cells .lv0{background:#1a453c}
.banner{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:#173f37d9;color:#fff;text-align:center;z-index:2;padding:12px}.banner strong{font-size:48px;color:#ffe36e;text-shadow:0 4px 0 #b3541e;letter-spacing:4px}.banner small{font-size:18px;font-weight:bold}.banner.appear-banner strong{font-size:30px;letter-spacing:2px}
.quiz,.result{background:#fff;border-radius:24px;padding:18px 22px;border:1px solid #e2eae6;box-shadow:0 5px 18px #1e4b3f06}
.question-top{display:flex;align-items:center;justify-content:space-between;font-size:15px;color:#6b7f76;font-weight:bold}#hintButton{padding:12px 20px;font-size:16px}
h1{font-size:56px;letter-spacing:4px;text-align:center;margin:10px 0 0;line-height:1.3}h1 span{color:#96aba2;font-weight:400}h1 b{color:#df9936}
#typed{display:inline-block;min-width:1.6em;border-bottom:4px solid #eed49a}
.chant{text-align:center;font-size:22px;font-weight:900;color:#33785b;margin:6px 0;letter-spacing:1px}
.instruction{text-align:center;color:#6b7f76;font-size:15px;margin:4px 0 14px}
.answers{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.answers button{border:2px solid #d8e5de;background:#f5f9f6;box-shadow:0 5px 0 #d8e5de;color:#244f45;font-size:44px;font-weight:900;border-radius:18px;min-height:88px;transition:transform .15s}.answers button:not(:disabled):hover{background:#e5f2e9;transform:translateY(-3px)}.answers button:disabled{cursor:default}.answers button.correct{background:#ddf2b7;border-color:#a9ce70;box-shadow:0 5px 0 #a9ce70}.answers button.wrong{opacity:.38;box-shadow:none;transform:translateY(4px)}
.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:440px;margin:0 auto}.keypad button{border:2px solid #d8e5de;background:#f5f9f6;box-shadow:0 4px 0 #d8e5de;color:#244f45;font-size:32px;font-weight:900;border-radius:14px;min-height:64px}.keypad button:not(:disabled):active{transform:translateY(3px);box-shadow:0 1px 0 #d8e5de}.keypad button:disabled{opacity:.45;cursor:default}.keypad .del{font-size:20px;color:#7a6a5a}.keypad .ok{font-size:20px;background:#24614e;border-color:#24614e;color:#fff;box-shadow:0 4px 0 #163f33}
#message{text-align:center;font-weight:bold;min-height:24px;margin:16px 0 0;color:#557361;font-size:18px}
#hint{margin-top:14px;background:#f7f8ed;border-radius:14px;padding:14px;text-align:center;font-size:16px;font-weight:bold}
.groups{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:10px;max-height:190px;overflow:auto}.group{display:grid;grid-template-columns:repeat(5,14px);gap:3px;border:1px solid #d3dfc0;background:#fff;border-radius:10px;padding:7px}.block{width:14px;height:14px;border-radius:3px;background:#6fb3e0;box-shadow:inset 0 -3px 0 #3f86b8}
.memory{display:flex;align-items:center;gap:12px;background:#fff8e8;border-radius:14px;margin-top:14px;padding:10px}.memory img{width:100px;height:100px;object-fit:contain;border-radius:12px}.memory strong{font-size:18px}.memory p{margin:5px 0;font-size:15px}.memory small{font-size:12px}
.result{text-align:center}.result h1{font-size:30px;letter-spacing:1px}.trophy{font-size:70px}.result p{font-size:17px;font-weight:bold;color:#4d6a57}.review{background:#f7f8ed;border-radius:12px;padding:10px 12px}.result-buttons{display:grid;gap:12px;margin-top:10px}.result-buttons .primary{margin-top:0}
.quit{display:block;margin:16px auto 0}

/* かけざん マス */
.grid{display:grid;grid-template-columns:repeat(10,1fr);gap:5px;max-width:640px;margin:16px auto 8px}
.grid .h{display:grid;place-items:center;font-weight:900;color:#6b7f76;font-size:clamp(13px,3.4vw,20px);aspect-ratio:1}.grid .corner{color:#b3c2bb}
.cell{position:relative;display:grid;place-items:center;aspect-ratio:1;border:0;border-radius:9px;background:#e3e9e6;font-weight:900;font-size:clamp(12px,3.4vw,22px);padding:0;color:#23460f}
.lv1{background:#dcefc2}.lv2{background:#b4df83}.lv3{background:#72bb4c;color:#fff}.lv4{background:#2f8a3a;color:#fff;box-shadow:inset 0 0 0 3px #f5cf6b}
.cell.weak::after{content:'！';position:absolute;top:0;right:2px;font-size:11px;color:#c0391d}
.cell.new{animation:glow 1.1s ease-out 3;z-index:1}.cell.selected{outline:3px solid #eeac30;outline-offset:1px}
.cell-info{text-align:center;font-weight:bold;color:#33785b;min-height:1.4em;font-size:17px}
.legend{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;font-size:13px;font-weight:bold}.legend .cell{aspect-ratio:auto;padding:4px 10px;font-size:13px}.legend .weak-mark{color:#c0391d;padding:4px 6px}
.board-note{font-size:13px;color:#6b7f76;line-height:1.7;text-align:center}
#resetRecord{display:block;margin:6px auto 0;font-size:13px}

/* かけざんの ひみつ（あお＝おなじ かず どうし、きいろ＝ひっくりかえすと おなじ） */
.secret-button{display:block;margin:12px auto 0;border:2px solid #b9cfe6;background:#eef5fc;color:#2b5a86;border-radius:24px;padding:12px 22px;font-size:17px;font-weight:900;box-shadow:0 4px 0 #b9cfe6}
.secret-note{background:#fff;border:1px solid #e2eae6;border-radius:18px;padding:10px 16px;margin-top:12px;text-align:center;font-weight:bold;color:#33544a;line-height:1.7}.secret-note p{margin:6px 0}.secret-note .big{font-size:18px}.secret-note strong{font-size:26px;color:#c9771a}
.sw{display:inline-block;width:16px;height:16px;border-radius:4px;vertical-align:-2px;margin-right:3px;border:1px solid #c8d3cd}.sw.up{background:#fff}.sw.sq{background:#cfe2f6}.sw.dup{background:#fdeab8}
.grid.secret .cell{color:#33544a;box-shadow:none}.grid.secret .cell.up{background:#fff;border:1px solid #d5ddd9}.grid.secret .cell.sq{background:#cfe2f6}.grid.secret .cell.dup{background:#fdeab8}.grid.secret .cell.lv0{color:#9aaaa3;font-weight:bold}
.cell.pair{outline:3px dashed #eeac30;outline-offset:1px;animation:glow 1s ease-out}
#hint .turn-hint{margin-top:10px;color:#2b5a86}
.grid.secret.secret2 .cell.easyrow{background:#e6ebe8;color:#9fb0a8;border:0}.grid.secret.secret2 .cell.hard{background:#ffd9bd;color:#8a3a10;border:0;box-shadow:inset 0 0 0 2px #e98a4a;font-weight:900}.sw.hard{background:#ffd9bd;border-color:#e98a4a}.sw.easy{background:#e6ebe8}

/* アニメーション（どれも 1びょう いない） */
.hero.attack{animation:attack .5s}.hero.attack.power{animation:attack-big .5s}.hero.hurt{animation:hurt .45s}.hero.down{transform:rotate(-80deg) translateY(10px);opacity:.6;transition:.4s}
#enemy.hit{animation:hit .45s}#enemy.strike{animation:strike .4s}#enemy.appear{animation:appear .45s ease-out}#enemy.defeat{animation:defeat .7s ease-in forwards}
#effect.pop{animation:pop .5s ease-out}#effect.pop-big{animation:pop-big .6s ease-out}
.arena.shake{animation:shake .3s}.pop-in{animation:pop-in .35s ease-out}
@keyframes bob{50%{transform:translateY(-9px)}}
@keyframes attack{50%{transform:translateX(40px) rotate(10deg)}}
@keyframes attack-big{40%{transform:translateX(70px) rotate(15deg) scale(1.2)}}
@keyframes hurt{20%,60%{transform:translateX(-10px);filter:brightness(1.8) saturate(.4)}40%,80%{transform:translateX(8px)}}
@keyframes hit{25%,75%{transform:translateX(13px);opacity:.4}50%{transform:translateX(-10px)}}
@keyframes strike{50%{transform:translateX(-50px) scale(1.1)}}
@keyframes appear{0%{opacity:0;transform:scale(.2) translateY(30px)}70%{transform:scale(1.15)}100%{opacity:1;transform:scale(1)}}
@keyframes defeat{0%{transform:scale(1)}25%{transform:scale(1.25) rotate(-12deg);filter:brightness(2)}100%{transform:scale(0) rotate(300deg);opacity:0}}
@keyframes dmg{0%{opacity:0;transform:translate(-50%,6px) scale(.6)}20%{opacity:1;transform:translate(-50%,-6px) scale(1.25)}100%{opacity:0;transform:translate(-50%,-48px) scale(1)}}
@keyframes pop{0%{opacity:0;transform:scale(.3)}35%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1) translateX(30px)}}
@keyframes pop-big{0%{opacity:0;transform:scale(.3)}35%{opacity:1;transform:scale(2.2) rotate(-10deg)}100%{opacity:0;transform:scale(1.4) translateX(40px)}}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
@keyframes pop-in{0%{opacity:0;transform:scale(.6)}70%{transform:scale(1.08)}100%{opacity:1;transform:scale(1)}}
@keyframes break{30%{transform:scale(1.5)}100%{transform:scale(1)}}
@keyframes glow{0%{box-shadow:0 0 0 0 #f5cf6b}50%{box-shadow:0 0 0 6px #f5cf6b;transform:scale(1.15)}100%{box-shadow:0 0 0 0 #f5cf6b00}}

/* たてむきの タブレット：バトルを うえに 大きく */
@media(min-width:701px) and (orientation:portrait){main{max-width:760px}.play-layout{display:flex;flex-direction:column;gap:18px;align-items:stretch}.arena{position:relative}.characters{height:190px}.hero{font-size:90px}#enemy{font-size:120px}.enemy-label strong{font-size:22px}.hearts{font-size:24px}.row-cells{max-width:460px}.row-cells .cell{font-size:16px}}
/* PC：たかさが ひくい がめん */
@media(min-width:701px) and (max-height:700px) and (orientation:landscape){.characters{height:120px}h1{font-size:44px}.answers button{min-height:70px}}
/* スマホ */
@media(max-width:700px){main{max-width:540px;padding:10px 12px}.brand{font-size:21px}.brand small{display:none}header{margin-bottom:10px}.header-buttons{gap:6px}.header-buttons .quiet{padding:8px 11px;font-size:13px}
.screen-top h2{font-size:20px}.enemy-list{grid-template-columns:repeat(3,1fr);gap:8px}.enemy-card{min-height:128px;padding:10px 4px;border-radius:16px}.enemy-card .em{font-size:40px}.enemy-card .nm{font-size:12px}.enemy-card .tag{font-size:11px;padding:1px 6px}.enemy-card .st{font-size:12px}.enemy-card.ready .st{padding:3px 8px}.enemy-card.beaten::after{width:20px;height:20px;font-size:12px;top:4px;right:4px}
.play-layout{display:flex;flex-direction:column;gap:12px;align-items:stretch}.arena{position:relative;padding:10px 14px}.characters{height:80px;margin-top:6px}.hero{font-size:46px}#enemy{font-size:58px}.enemy-label{margin:4px auto 6px}.enemy-label strong{font-size:15px}.stage-line{font-size:13px}.hearts{font-size:16px}.health{height:12px}.combo{min-height:20px;font-size:14px}.damage{font-size:24px}.damage.big{font-size:32px}.bubble{font-size:12px}.banner strong{font-size:34px}.banner small{font-size:14px}.banner.appear-banner strong{font-size:22px}.row-cells{gap:3px}.row-cells .cell{font-size:11px;border-radius:6px}
.quiz,.result{padding:12px 14px}h1{font-size:40px;margin-top:4px}.chant{font-size:19px;margin:4px 0}.instruction{margin:2px 0 10px}.answers{gap:10px}.answers button{font-size:34px;min-height:66px}.keypad{gap:7px}.keypad button{min-height:48px;font-size:24px;border-radius:12px}.keypad .ok,.keypad .del{font-size:16px}#message{font-size:15px;margin-top:10px}#hintButton{padding:9px 14px;font-size:14px}.memory img{width:80px;height:80px}.primary{font-size:18px;min-height:54px}.secondary{font-size:16px;min-height:50px}.result h1{font-size:24px}.trophy{font-size:54px}
.grid{gap:3px}.cell{border-radius:6px}}
@media(max-width:700px){.choice-list{grid-template-columns:1fr 1fr;gap:10px}#homeScreen .choice{padding:12px 8px}#homeScreen .choice .em{font-size:38px}#homeScreen .choice strong{font-size:18px}.choice small{font-size:12px}.choice small br{display:none}.section-title{font-size:17px;margin:18px 0 8px}}
@media(max-width:400px){.brand{font-size:18px;letter-spacing:1px}.header-buttons .quiet{padding:7px 9px;font-size:12px}}
@media(prefers-reduced-motion:reduce){*,#enemy{animation:none!important;transition:none!important}#enemy.defeat{opacity:0}}
@media(max-width:700px){.choice .st{white-space:nowrap;font-size:13px;padding:3px 10px}}
/* にがて ゴーレム：よこながの 1まい（えもじ｜なまえ・せつめい｜ボタン） */
#homeScreen #weakBattle{grid-column:1/-1;display:grid;grid-template-columns:auto 1fr auto;column-gap:16px;row-gap:2px;align-items:center;text-align:left;padding:14px 20px}
#weakBattle .em{grid-row:1/3}#weakBattle strong{grid-column:2;grid-row:1}#weakBattle small{grid-column:2;grid-row:2}#weakBattle .st{grid-column:3;grid-row:1/3;margin:0}
@media(max-width:700px){#homeScreen #weakBattle{column-gap:10px;padding:10px 12px}}

#enemy.awakened{filter:drop-shadow(0 0 14px #ff6a00) saturate(1.7);font-size:clamp(90px,14vw,150px)}

.reward-panel{text-align:center;margin:22px auto;max-width:500px}.reward-picture{aspect-ratio:1;background:url('victory.png') center/cover;border-radius:16px;overflow:hidden}#rewardTiles{display:grid;grid-template-columns:repeat(9,1fr);height:100%}#rewardTiles span{display:grid;place-items:center;background:#224c48;color:#d5e6c8;border:1px solid #416b60;font-size:clamp(10px,2.5vw,14px)}#rewardTiles span.revealed{background:transparent;border-color:transparent}.finale{background:#123d39;color:#ffefbf;padding:20px;border-radius:20px;text-align:center}.finale img{width:min(100%,450px);border-radius:16px}.finale h2{font-size:clamp(22px,4vw,32px)}.finale p{line-height:1.8}.finale-stars{font-size:30px;color:#ffdc6b;letter-spacing:10px}.celebrate{animation:celebrate 1.2s ease-out}@keyframes celebrate{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.celebrate{animation:none}}

.reward-select{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:16px 0;font-weight:bold}.reward-select select{max-width:100%;min-height:44px}