/* =========================================================
   テストモンスターズ / スタイル
   中学生向けなので、小学生アプリのクリーム色ではなく
   「暗くて、少しネオン」の方向。教科ごとに色を固定する。
     数学=ピンク / 英語=ブルー / 理科=グリーン
   ========================================================= */

:root{
  --bg:#12131A;
  --bg-2:#171926;
  --panel:#1C1E28;
  --panel-2:#232634;
  --line:#2E3140;
  --text:#E8E9F0;
  --text-dim:#9AA0B4;

  --math:#FF5C7A;
  --eng:#4FA8FF;
  --sci:#3DD68C;
  --gold:#FFC53D;
  --danger:#FF6B6B;

  --radius:14px;
  --tap:56px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  margin:0;
  background:
    radial-gradient(1200px 600px at 50% -10%, #1E2233 0%, transparent 60%),
    var(--bg);
  color:var(--text);
  font-family:"BIZ UDPGothic","UD デジタル 教科書体 NK-R","Hiragino Sans",
              "Yu Gothic UI","Meiryo",system-ui,sans-serif;
  font-size:17px;
  line-height:1.8;
  letter-spacing:.02em;
  overscroll-behavior:none;
  -webkit-user-select:none;user-select:none;
}
body.pref-bigtext{font-size:20px}
body.pref-noanim *{animation:none !important;transition:none !important}

#app{max-width:760px;margin:0 auto;min-height:100%;position:relative}

.screen{display:none;padding:14px 16px 48px}
.screen.is-active{display:block}
.screen-game{padding-left:10px;padding-right:10px}

/* ---------- 共通パーツ ---------- */
.bar{display:flex;align-items:center;gap:10px;padding:6px 0 12px}
.bar h2{font-size:18px;margin:0;flex:1;text-align:center}
.bar-spacer{width:88px}

.btn{
  font:inherit;font-weight:700;color:#fff;
  background:var(--panel-2);
  border:1px solid var(--line);
  border-bottom:4px solid #12141C;
  border-radius:var(--radius);
  padding:13px 18px;min-height:var(--tap);
  cursor:pointer;
}
.btn:active{transform:translateY(2px);border-bottom-width:2px}
.btn:disabled{opacity:.4;cursor:default}
.btn-sm{padding:8px 12px;min-height:44px;font-size:15px;border-bottom-width:3px}
.btn-back{width:88px}
.btn-ghost{background:transparent;border-color:transparent;border-bottom:none;color:var(--text-dim);font-weight:600}
.btn-math{background:var(--math);color:#2A0713;border-color:#FF8FA3}
.btn-eng{background:var(--eng);color:#04223F;border-color:#8FC8FF}
.btn-sci{background:var(--sci);color:#04301D;border-color:#8AE9BE}
.btn-gold{background:var(--gold);color:#2E2000;border-color:#FFD97A}
.btn-wide{width:100%}

.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px}

/* 画像がまだ無いときの代わり表示 */
.art-missing{
  background-image:
    linear-gradient(135deg,#1F2230 25%,transparent 25%,transparent 50%,#1F2230 50%,#1F2230 75%,transparent 75%) !important;
  background-size:16px 16px !important;
  background-color:#191B24 !important;
}

/* ---------- ホーム ---------- */
/* ホームの背景画像。まだ画像が無いときは出さない（全面が縞模様になるため） */
.home-bg{position:fixed;inset:0;z-index:-1;opacity:.32;pointer-events:none}
.home-bg.art-missing{display:none}

.home-head{text-align:center;padding:18px 0 6px}
.logo-box{
  width:104px;height:104px;margin:0 auto 6px;border-radius:26px;
  display:grid;place-items:center;background:var(--panel);border:1px solid var(--line);
}
.logo-fallback{font-weight:800;font-size:34px;letter-spacing:.06em;
  background:linear-gradient(120deg,var(--math),var(--eng),var(--sci));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.logo-box:not(.art-missing) .logo-fallback{display:none}
.home-head h1{font-size:25px;margin:.2em 0 .1em;letter-spacing:.04em}
.lead{color:var(--text-dim);margin:0 0 14px;font-size:15px}

.mon-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:18px}
.mon{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:10px 8px;text-align:center;position:relative;overflow:hidden;
}
.mon-pic{height:78px;background-size:contain;background-position:center;background-repeat:no-repeat;
  display:grid;place-items:center;font-size:34px}
.mon-name{font-size:13px;color:var(--text-dim);margin-top:2px}
.mon-lv{font-weight:800;font-size:15px}
.mon-bar{height:6px;border-radius:3px;background:#0E0F16;margin-top:6px;overflow:hidden}
.mon-bar i{display:block;height:100%;border-radius:3px}

.game-list{display:grid;gap:12px}
.gcard{
  display:flex;align-items:center;gap:12px;text-align:left;width:100%;
  font:inherit;color:var(--text);cursor:pointer;
  background:var(--panel);border:1px solid var(--line);border-left:5px solid var(--line);
  border-radius:var(--radius);padding:14px 12px;min-height:96px;
}
.gcard:active{transform:translateY(2px)}
.gcard-icon{width:64px;height:64px;flex:none;border-radius:16px;background:var(--panel-2);
  display:grid;place-items:center;font-size:30px;background-size:contain}
/* 画像が読めたら、仮表示の絵文字は消す。
   （消さないと キャラクターの上に 卵や吹き出しが重なって見える） */
[data-art]:not(.art-missing) > .fb{display:none}
.gcard-body{flex:1;display:block;line-height:1.5}
.gcard-body b{display:block;font-size:19px}
.gcard-body small{display:block;color:var(--text-dim);font-size:13px}
.gcard-body em{display:block;font-style:normal;font-size:12px;color:var(--text-dim);opacity:.8;margin-top:2px}
.gcard-best{font-size:12px;color:var(--text-dim);flex:none;text-align:right;min-width:64px}
.gcard-math{border-left-color:var(--math)}
.gcard-eng{border-left-color:var(--eng)}
.gcard-sci{border-left-color:var(--sci)}
.home-foot{text-align:center;margin-top:22px}

/* ---------- ゲーム共通 ---------- */
.game-root{min-height:60vh}
.hud{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:10px}
.chip{
  background:var(--panel);border:1px solid var(--line);border-radius:999px;
  padding:5px 12px;font-size:13px;color:var(--text-dim);white-space:nowrap;
}
.chip b{color:var(--text);font-size:15px}
.quest{
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
  border:1px solid var(--line);border-radius:var(--radius);
  padding:12px 14px;margin-bottom:12px;
}
.quest h3{margin:0 0 2px;font-size:16px}
.quest p{margin:0;font-size:14px;color:var(--text-dim)}
.meter{height:10px;border-radius:5px;background:#0E0F16;overflow:hidden;margin-top:8px}
.meter i{display:block;height:100%;transition:width .3s}

.overlay{
  position:fixed;inset:0;background:rgba(8,9,14,.86);
  display:grid;place-items:center;padding:20px;z-index:40;
}
.overlay-box{
  background:var(--panel);border:1px solid var(--line);border-radius:18px;
  padding:22px 20px;max-width:460px;width:100%;text-align:center;
}
.overlay-box h3{margin:0 0 6px;font-size:22px}
.overlay-box p{margin:.2em 0;color:var(--text-dim);font-size:15px}
.overlay-actions{display:grid;gap:10px;margin-top:16px}

#toast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);
  background:#0B0C12;border:1px solid var(--line);color:var(--text);
  padding:10px 18px;border-radius:999px;font-size:14px;
  opacity:0;pointer-events:none;transition:.2s;z-index:60;max-width:90vw;text-align:center;
}
#toast.is-on{opacity:1;transform:translateX(-50%) translateY(0)}

@keyframes shake{10%,90%{transform:translateX(-2px)}30%,70%{transform:translateX(4px)}50%{transform:translateX(-6px)}}
.is-shake{animation:shake .26s}

/* ---------- ①式ビルダー ---------- */
.joker-row{display:flex;gap:8px;overflow-x:auto;padding:2px 0 8px;min-height:56px}
.joker{
  flex:none;width:158px;display:flex;align-items:center;gap:8px;
  background:var(--panel);border:1px solid #4A3A2A;
  border-radius:12px;padding:6px 8px;font-size:11px;line-height:1.35;color:var(--text-dim);
}
/* 記号は枠の絵の中に入れる。枠を背景全体に敷くと文字が読めなくなる */
.joker-badge{
  flex:none;width:38px;height:38px;display:grid;place-items:center;
  background:url("../assets/images/joker_frame.png") center/contain no-repeat;
  font-size:15px;font-weight:800;color:var(--gold);
}
.joker-text{min-width:0}
.joker b{display:block;font-size:13px;color:var(--gold)}
.joker-empty{color:var(--text-dim);font-size:13px;padding:14px 4px}

.formula{
  min-height:76px;background:#0E0F16;border:1px dashed var(--line);border-radius:12px;
  display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;
  padding:10px;margin-bottom:10px;font-size:26px;font-weight:800;
}
.formula .ph{color:var(--text-dim);font-size:14px;font-weight:400}
.formula .eq{color:var(--gold)}

.hand{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:12px}
.card{
  width:60px;height:84px;border-radius:10px;border:1px solid var(--line);
  /* カードの飾り枠。画像が無ければ下の grad だけが出る */
  background:url("../assets/images/card_frame.png") center/100% 100% no-repeat,
             linear-gradient(180deg,#262A38,#1B1E29);
  color:var(--text);
  font:inherit;font-size:26px;font-weight:800;cursor:pointer;
  display:grid;place-items:center;position:relative;
}
.card:active{transform:translateY(2px)}
.card.is-sel{outline:3px solid var(--gold);transform:translateY(-8px)}
.card.is-sel::after{
  content:attr(data-order);position:absolute;top:-8px;right:-6px;
  background:var(--gold);color:#2E2000;font-size:12px;width:20px;height:20px;
  border-radius:50%;display:grid;place-items:center;font-weight:800;
}
.card-op{background:url("../assets/images/card_frame.png") center/100% 100% no-repeat,
          linear-gradient(180deg,#3A2733,#241A22);color:var(--math)}
.card-x{background:url("../assets/images/card_frame.png") center/100% 100% no-repeat,
         linear-gradient(180deg,#22303F,#161F2A);color:var(--eng)}

/* 山札のこり枚数。カードの裏の絵を小さく出す */
.chip-deck::before{
  content:'';display:inline-block;width:20px;height:28px;vertical-align:-7px;margin-right:6px;
  background:url("../assets/images/card_back.png") center/contain no-repeat;border-radius:3px;
}

/* ボス階だけ、うしろにボスの絵を出す */
.quest.is-boss{
  background:
    linear-gradient(90deg,var(--panel) 46%,rgba(28,30,40,.6) 76%,rgba(28,30,40,.25)),
    url("../assets/images/boss_kansu.png") right center/auto 150% no-repeat,
    linear-gradient(180deg,var(--panel-2),var(--panel));
  border-color:var(--math);
}

/* 自己ベスト更新のメダル */
.medal{width:96px;height:96px;margin:2px auto 6px;
  background:url("../assets/images/medal.png") center/contain no-repeat}

.shiki-actions{display:grid;grid-template-columns:2fr 1fr;gap:8px}
.calc-note{text-align:center;font-size:13px;color:var(--text-dim);min-height:1.6em;margin-bottom:8px}
.gain{text-align:center;font-size:15px;margin-bottom:8px;min-height:1.8em}
.gain b{color:var(--gold);font-size:20px}

.joker-pick{display:grid;gap:10px;margin-top:12px}
.joker-pick button{
  font:inherit;color:var(--text);text-align:left;cursor:pointer;
  background:var(--panel-2);border:1px solid #4A3A2A;border-radius:12px;padding:12px 14px;
}
.joker-pick b{color:var(--gold);display:block}
.joker-pick small{color:var(--text-dim)}

/* ---------- ②英文の通路 ---------- */
.corridor-wrap{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:#05060A}
#corridorCanvas{display:block;width:100%;height:auto}
.sign{
  position:absolute;left:50%;top:34%;transform:translate(-50%,-50%);
  width:min(92%,560px);background:rgba(12,14,20,.92);border:1px solid var(--line);
  border-radius:12px;padding:16px 16px;text-align:center;
}
.sign .en{font-size:min(6.4vw,25px);line-height:1.5;font-weight:700;
  font-family:Georgia,"Times New Roman",serif;letter-spacing:.01em}
.sign .ja{font-size:13px;color:var(--text-dim);margin-top:6px;min-height:1.4em}
.sign .tag{position:absolute;top:-11px;left:12px;background:var(--eng);color:#04223F;
  font-size:11px;font-weight:800;border-radius:999px;padding:1px 10px}

/* スマホでは英文を通路に重ねると通路が見えなくなるので、通路の下に置く */
@media (max-width:560px){
  .sign{position:relative;left:auto;top:auto;transform:none;width:auto;
    border-radius:0;border-width:1px 0 0;margin-top:2px}
  .sign .tag{top:-11px;left:10px}
}

.tsuuro-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.judge{
  text-align:center;margin-top:10px;min-height:3.6em;font-size:15px;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px;
}
.judge.ok{border-color:var(--sci)}
.judge.ng{border-color:var(--danger)}
.judge b{display:block;font-size:17px}
.judge .why{color:var(--text-dim);font-size:14px}

.steps{display:flex;gap:5px;justify-content:center;margin:10px 0 2px}
.steps i{width:22px;height:8px;border-radius:4px;background:#222533;display:block}
.steps i.on{background:var(--eng)}

.grade-pick{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0}

/* ---------- ③元素ドロップ ---------- */
.lab-wrap{position:relative;display:flex;justify-content:center}
/* 画面の高さから逆算した幅にする＝スクロールしなくてもビーカーの底まで見える
   （0.677 は 盤面の 420:620 の比。高さ 52vh におさまる幅を出している） */
#labCanvas{display:block;width:min(100%,420px,calc(52vh * 0.677));height:auto;
  border-radius:var(--radius);border:1px solid var(--line);background:#0A0C12;touch-action:none}
.mission{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:10px 0}
.need{background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:6px 12px;font-size:14px}
.need.done{border-color:var(--sci);color:var(--sci)}
.recipe{font-size:12px;color:var(--text-dim);text-align:center;margin-top:6px}

.eqq{display:grid;gap:8px;margin-top:12px}
.eqq button{font:inherit;color:var(--text);text-align:left;cursor:pointer;
  background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:12px 14px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:15px}

/* ---------- せってい ---------- */
.rows{display:grid;gap:8px}
.row{display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 14px}
.row small{display:block;color:var(--text-dim);font-size:12px}
.sw{width:56px;height:32px;border-radius:16px;background:#0E0F16;border:1px solid var(--line);
  position:relative;cursor:pointer;flex:none}
.sw i{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;
  background:var(--text-dim);transition:.15s}
.sw.on{background:#173726;border-color:var(--sci)}
.sw.on i{left:27px;background:var(--sci)}
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0 18px}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px;text-align:center}
.stat b{display:block;font-size:22px}
.stat small{color:var(--text-dim);font-size:12px}
h4.sec{margin:20px 0 8px;font-size:15px;color:var(--text-dim);border-bottom:1px solid var(--line);padding-bottom:6px}
.review-list{display:grid;gap:6px}
.review-item{background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:8px 12px;font-size:14px;display:flex;justify-content:space-between;gap:10px}
.review-item span{color:var(--danger);font-size:12px;flex:none}