/* =======================================================
   ごうのすけのゲーム  —  みため（CSS）

   ★ --ui は がめんの おおきさに あわせて じどうで かわります ★
      iPad など おおきい がめんでは ボタンや もじも おおきく なります。
   ======================================================= */

* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

:root {
  --ui: 1;              /* がめんの おおきさ（JS が きめる。1.0〜1.7）*/
  --ub-rows: 1;         /* したの キャラボタンの だんすう */
  --ub-cols: 5;         /* したの キャラボタンの れつすう */
  --hud-h: calc(96px * var(--ui));
  --hud-top-h: calc(48px * var(--ui));
  --safe-top: env(safe-area-inset-top, 0px);
}

html, body {
  width:100%; height:100%; overflow:hidden;
  background:#1b2a3a;
  font-family: "Hiragino Maru Gothic ProN", "ヒラギノ丸ゴ ProN", "Yu Gothic", "游ゴシック", "Meiryo", sans-serif;
  color:#fff;
  user-select:none; -webkit-user-select:none;
  touch-action:manipulation;
}

#app { position:relative; width:100%; height:100%; }

.screen {
  position:absolute; inset:0;
  display:none;
  flex-direction:column; align-items:center; justify-content:center;
  gap:calc(18px * var(--ui));
}
.screen.active { display:flex; }

.hidden { display:none !important; }

/* ---------- きょうつう ボタン ---------- */
.big-btn {
  position:relative;
  padding:calc(16px * var(--ui)) calc(52px * var(--ui));
  font-size:calc(min(6vw,26px) * var(--ui)); font-weight:bold;
  color:#5d3a00; background:linear-gradient(180deg,#ffe082,#ffb300);
  border:none; border-radius:999px;
  box-shadow:0 calc(6px * var(--ui)) 0 #e65100, 0 10px 18px rgba(0,0,0,.35);
  cursor:pointer; font-family:inherit;
}
.big-btn:active { transform:translateY(4px); box-shadow:0 2px 0 #e65100; }
.big-btn.wide {
  padding:calc(15px * var(--ui)) calc(26px * var(--ui));
  font-size:calc(min(5vw,21px) * var(--ui));
  max-width:92vw;
}

.text-btn {
  background:none; border:none; color:#cfe8ff;
  font-size:calc(16px * var(--ui));
  text-decoration:underline; cursor:pointer; font-family:inherit;
  padding:calc(10px * var(--ui));
}

.mini-btn {
  pointer-events:auto;
  padding:calc(5px * var(--ui)) calc(12px * var(--ui));
  border-radius:calc(10px * var(--ui)); border:1px solid rgba(255,255,255,.35);
  background:rgba(0,0,0,.5); color:#fff;
  font-size:calc(12px * var(--ui)); font-family:inherit;
}

.sub-title {
  font-size:calc(min(7vw,30px) * var(--ui));
  margin-top:calc(6px * var(--ui));
  text-shadow:0 3px 0 rgba(0,0,0,.4);
}

/* ---------- タイトル ---------- */
#screen-title { background:linear-gradient(180deg,#4fc3f7 0%,#0d47a1 100%); overflow:hidden; }
.title-bg {
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 20% 80%, rgba(255,255,255,.18) 0 60px, transparent 61px),
    radial-gradient(circle at 78% 22%, rgba(255,255,255,.14) 0 90px, transparent 91px),
    radial-gradient(circle at 50% 110%, rgba(255,235,59,.25) 0 200px, transparent 201px);
}
.game-title {
  position:relative;
  font-size:calc(min(13vw, 68px) * var(--ui)); line-height:1.15; text-align:center;
  color:#fff;
  text-shadow:0 5px 0 #f57c00, 0 9px 14px rgba(0,0,0,.4);
  letter-spacing:2px;
}
.game-title span { font-size:.62em; }
.rotate-hint { position:relative; font-size:calc(13px * var(--ui)); color:rgba(255,255,255,.85); }
.version-tag { position:relative; font-size:calc(11px * var(--ui)); color:rgba(255,255,255,.6); letter-spacing:.5px; }

/* ---------- セーブデータ選択 ---------- */
#screen-save { background:linear-gradient(180deg,#1e3c5a,#0d1b2a); overflow-y:auto; padding:calc(20px * var(--ui)) 12px; justify-content:flex-start; }
#save-slots { display:flex; flex-direction:column; gap:calc(12px * var(--ui)); width:min(calc(560px * var(--ui)), 94%); }
.save-slot {
  position:relative; display:flex; align-items:center; gap:calc(14px * var(--ui));
  padding:calc(14px * var(--ui)) calc(18px * var(--ui));
  border-radius:calc(16px * var(--ui)); border:none;
  background:linear-gradient(180deg,#ffffff,#e3f2fd);
  color:#0d3050; text-align:left; cursor:pointer; font-family:inherit;
  box-shadow:0 calc(5px * var(--ui)) 0 #90a4ae;
}
.save-slot.empty { background:linear-gradient(180deg,#eceff1,#cfd8dc); color:#546e7a; }
.save-slot:active { transform:translateY(3px); box-shadow:0 2px 0 #90a4ae; }
.slot-no {
  font-size:calc(22px * var(--ui)); font-weight:bold; color:#1976d2;
  min-width:calc(2.4em); line-height:1;
}
/* min-width:0 が ないと、よこに ながい ものが あった とき
   なまえの らんが つぶれて たてがきに なって しまいます        */
.slot-info { flex:1 1 auto; min-width:0; }
.slot-info b {
  font-size:calc(18px * var(--ui)); display:block;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.slot-info small { font-size:calc(12px * var(--ui)); color:#455a64; white-space:nowrap; }
.slot-stars {
  flex:0 0 auto; white-space:nowrap;
  font-size:calc(16px * var(--ui)); color:#5d4037;
}
.slot-stars b { font-size:calc(17px * var(--ui)); font-weight:bold; margin-left:calc(2px * var(--ui)); }
.slot-erase {
  flex:0 0 auto; width:calc(30px * var(--ui)); height:calc(30px * var(--ui));
  border-radius:50%; border:none; background:#ef9a9a; color:#7f0000;
  font-size:calc(15px * var(--ui)); font-weight:bold; font-family:inherit; cursor:pointer;
}

/* ---------- トップ画面（ホーム） ---------- */
#screen-home { background:linear-gradient(180deg,#eaf6ff 0%,#cfe8f7 100%); color:#0d3050; padding:0; gap:0; }
.home-wrap {
  position:relative; width:100%; height:100%;
  display:grid;
  grid-template-columns: 1.05fr 1fr;
  grid-template-rows: calc(34px * var(--ui)) 1fr auto;
  gap:calc(10px * var(--ui));
  padding:calc(8px * var(--ui)) calc(14px * var(--ui)) calc(12px * var(--ui));
  padding-top:calc(8px * var(--ui) + var(--safe-top));
}

.home-topbar { grid-column:1/3; grid-row:1; display:flex; align-items:center; gap:10px; }
.home-slot-name {
  font-size:calc(13px * var(--ui)); font-weight:bold; color:#1565c0;
  background:rgba(255,255,255,.8); padding:calc(3px * var(--ui)) calc(12px * var(--ui));
  border-radius:999px;
}
.home-topbar .mini-btn { margin-left:auto; background:rgba(13,48,80,.55); }

.home-menu { grid-column:1; grid-row:2; display:flex; flex-direction:column; gap:calc(12px * var(--ui)); justify-content:flex-start; }
.home-btn {
  display:flex; align-items:center; gap:calc(10px * var(--ui));
  padding:calc(14px * var(--ui)) calc(18px * var(--ui));
  border:none; border-radius:calc(14px * var(--ui));
  font-family:inherit; color:#0d3050; cursor:pointer; text-align:left;
  box-shadow:0 calc(4px * var(--ui)) 0 rgba(0,0,0,.18);
}
.home-btn:active { transform:translateY(3px); box-shadow:none; }
.home-btn .hb-label { flex:1; font-size:calc(16px * var(--ui)); font-weight:bold; }
.home-btn .hb-ico { font-size:calc(20px * var(--ui)); }
.home-btn.b1 { background:linear-gradient(180deg,#7fb8dd,#5a9ecb); }
.home-btn.b2 { background:linear-gradient(180deg,#a8d8ef,#86c5e6); }
.home-btn.b3 { background:linear-gradient(180deg,#c9e6f5,#a9d6ee); }
.home-btn.b4 { background:linear-gradient(180deg,#dcf0fa,#bfe2f4); }
.home-btn.soon .hb-label::after { content:' （じゅんびちゅう）'; font-size:.72em; font-weight:normal; opacity:.75; }

.home-speech { grid-column:2; grid-row:2; display:flex; align-items:flex-start; justify-content:center; }
.speech-bubble {
  position:relative; width:100%;
  padding:calc(16px * var(--ui)) calc(14px * var(--ui));
  background:linear-gradient(180deg,#f2c94c,#e0b431);
  border-radius:calc(14px * var(--ui));
  color:#3d2c00; font-weight:bold; text-align:center;
  font-size:calc(15px * var(--ui)); line-height:1.55;
  box-shadow:0 calc(4px * var(--ui)) 0 rgba(0,0,0,.16);
}
.speech-bubble::after {
  content:''; position:absolute; right:calc(26px * var(--ui)); bottom:calc(-14px * var(--ui));
  border-left:calc(14px * var(--ui)) solid transparent;
  border-right:0 solid transparent;
  border-top:calc(15px * var(--ui)) solid #e0b431;
}

.home-shelf { grid-column:1; grid-row:3; position:relative; width:calc(120px * var(--ui)); }
.shelf-items { display:flex; gap:calc(6px * var(--ui)); justify-content:center; font-size:calc(24px * var(--ui)); line-height:1; }
.shelf-top { height:calc(12px * var(--ui)); background:#6b4a2a; border-radius:3px; margin-top:calc(2px * var(--ui)); }
.shelf-legs { display:flex; justify-content:space-between; padding:0 calc(14px * var(--ui)); }
.shelf-legs i { display:block; width:calc(16px * var(--ui)); height:calc(30px * var(--ui)); background:#6b4a2a; }

.gacha-btn {
  grid-column:2; grid-row:3;
  justify-self:start; align-self:end;
  width:calc(84px * var(--ui)); height:calc(84px * var(--ui));
  border-radius:50%; border:none; cursor:pointer; font-family:inherit;
  background:linear-gradient(180deg,#f2c94c,#dcae2c);
  color:#3d2c00; font-weight:bold; font-size:calc(13px * var(--ui));
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:calc(5px * var(--ui));
  box-shadow:0 calc(4px * var(--ui)) 0 rgba(0,0,0,.2);
  overflow:hidden;
}
.gacha-btn:active { transform:translateY(3px); box-shadow:none; }
.gacha-slot { display:block; width:120%; height:calc(11px * var(--ui)); background:#6fa8d0; }

.home-tankun {
  grid-column:2; grid-row:3; justify-self:end; align-self:end;
  width:calc(120px * var(--ui)); height:calc(76px * var(--ui));
  border-radius:calc(12px * var(--ui));
  background:linear-gradient(180deg,#b8dff5,#8fc7e8);
  display:flex; align-items:flex-end; justify-content:center;
  box-shadow:0 calc(4px * var(--ui)) 0 rgba(0,0,0,.14);
}
.home-tankun canvas { width:100%; height:100%; display:block; }

/* ---------- ステージ選択 ---------- */
#screen-stage { background:linear-gradient(180deg,#37474f,#1b2a3a); overflow-y:auto; padding:calc(20px * var(--ui)) 12px; justify-content:flex-start; }
#stage-list { display:flex; flex-direction:column; gap:calc(12px * var(--ui)); width:min(calc(560px * var(--ui)),94%); }
.stage-card {
  display:flex; align-items:center; gap:calc(14px * var(--ui));
  padding:calc(14px * var(--ui)) calc(18px * var(--ui));
  border-radius:calc(16px * var(--ui)); border:none;
  background:linear-gradient(180deg,#ffffff,#e3f2fd);
  color:#0d3050; text-align:left; cursor:pointer; font-family:inherit;
  box-shadow:0 calc(5px * var(--ui)) 0 #90a4ae;
}
.stage-card:active { transform:translateY(3px); box-shadow:0 2px 0 #90a4ae; }
.stage-no { font-size:calc(26px * var(--ui)); font-weight:bold; color:#1976d2; min-width:2.6em; }
.stage-info b { font-size:calc(19px * var(--ui)); display:block; }
.stage-info small { font-size:calc(13px * var(--ui)); color:#455a64; }
.stage-clear { margin-left:auto; font-size:calc(22px * var(--ui)); }

/* ---------- バトル ---------- */
#screen-battle { background:#000; justify-content:flex-start; gap:0; }
#canvas { position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:none; }

#hud-top {
  position:absolute; top:0; left:0; right:0;
  height:calc(var(--hud-top-h) + var(--safe-top));
  padding:calc(6px * var(--ui) + var(--safe-top)) calc(9px * var(--ui)) calc(4px * var(--ui));
  display:flex; align-items:center; gap:calc(8px * var(--ui));
  pointer-events:none;
}
.castle-hp { flex:1; pointer-events:none; }
.castle-label { font-size:calc(10px * var(--ui)); opacity:.9; text-shadow:0 1px 2px #000; }
.castle-hp.player { text-align:right; }
.hp-bar { height:calc(11px * var(--ui)); border-radius:calc(6px * var(--ui)); background:rgba(0,0,0,.55); overflow:hidden; border:1.5px solid rgba(255,255,255,.5); }
.hp-fill { height:100%; width:100%; transition:width .18s linear; }
.castle-hp.enemy .hp-fill { background:linear-gradient(180deg,#ff8a80,#d50000); }
.castle-hp.player .hp-fill { background:linear-gradient(180deg,#a5d6a7,#2e7d32); float:right; }

/* ばいそく ボタン（みぎうえ） */
.speed-btn {
  pointer-events:auto; flex:0 0 auto;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-width:calc(54px * var(--ui)); padding:calc(4px * var(--ui)) calc(9px * var(--ui));
  border-radius:calc(11px * var(--ui)); border:2px solid #ffd54f;
  background:linear-gradient(180deg, rgba(20,32,44,.82), rgba(10,18,26,.9));
  color:#ffe082; font-family:inherit; line-height:1;
}
.speed-btn:active { transform:translateY(2px); }
.speed-num { font-size:calc(17px * var(--ui)); font-weight:bold; font-variant-numeric:tabular-nums; }
.speed-x   { font-size:calc(9.5px * var(--ui)); opacity:.85; margin-top:2px; }
.speed-btn.fast { border-color:#ff8a65; color:#ffccbc; }

/* かくにん ポップアップ */
.modal {
  position:absolute; inset:0; z-index:20;
  display:flex; align-items:center; justify-content:center;
  background:rgba(4,12,20,.72);
}
.modal-box {
  width:min(86%, calc(360px * var(--ui)));
  padding:calc(22px * var(--ui)) calc(18px * var(--ui)) calc(16px * var(--ui));
  border-radius:calc(18px * var(--ui)); border:3px solid #ffd54f;
  background:linear-gradient(180deg,#ffffff,#e3f2fd);
  color:#0d3050; text-align:center;
  box-shadow:0 12px 30px rgba(0,0,0,.5);
}
.modal-text { font-size:calc(17px * var(--ui)); line-height:1.5; font-weight:bold; margin-bottom:calc(16px * var(--ui)); }
.modal-text small { font-size:.75em; font-weight:normal; color:#546e7a; }
.modal-btns { display:flex; flex-direction:column; gap:calc(9px * var(--ui)); }
.modal-btn {
  width:100%; padding:calc(13px * var(--ui)) 8px;
  font-size:calc(15px * var(--ui)); font-weight:bold;
  border:none; border-radius:calc(12px * var(--ui)); font-family:inherit; cursor:pointer;
}
.modal-btn.keep { color:#0d3050; background:linear-gradient(180deg,#b3e5fc,#4fc3f7); box-shadow:0 4px 0 #0277bd; }
.modal-btn.quit { color:#5d1a00; background:linear-gradient(180deg,#ffcc80,#ff9800); box-shadow:0 4px 0 #e65100; }
.modal-btn:active { transform:translateY(3px); box-shadow:none; }

#boss-hp {
  position:absolute; top:calc(var(--hud-top-h) + var(--safe-top) + 4px);
  left:50%; transform:translateX(-50%);
  width:min(70%, calc(420px * var(--ui))); text-align:center; pointer-events:none;
}
.boss-name { font-size:calc(12px * var(--ui)); text-shadow:0 2px 3px #000; margin-bottom:2px; }
.hp-bar.boss { height:calc(9px * var(--ui)); }
.hp-bar.boss .hp-fill { background:linear-gradient(180deg,#ffe082,#ff6f00); }

#money-area {
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:calc(var(--hud-h) + 6px);
  width:min(58%, calc(340px * var(--ui))); pointer-events:none; text-align:center;
}
.money-bar { height:calc(9px * var(--ui)); border-radius:6px; background:rgba(0,0,0,.55); border:1.5px solid rgba(255,255,255,.5); overflow:hidden; }
.money-fill { height:100%; width:0%; background:linear-gradient(180deg,#fff59d,#fbc02d); }
.money-text { font-size:calc(14px * var(--ui)); font-weight:bold; text-shadow:0 2px 3px #000; margin-top:1px; }

#hud-bottom {
  position:absolute; left:0; right:0; bottom:0;
  height:var(--hud-h);
  display:flex; align-items:stretch; gap:calc(5px * var(--ui));
  padding:calc(5px * var(--ui));
  padding-bottom:calc(5px * var(--ui) + env(safe-area-inset-bottom, 0px));
  background:linear-gradient(180deg, rgba(10,20,30,.55), rgba(10,20,30,.92));
  backdrop-filter:blur(2px);
}

/* キャラボタン：5たいまでは よこ1れつ、6たいからは 2だん */
#unit-buttons {
  flex:1; display:grid;
  grid-template-columns: repeat(var(--ub-cols), minmax(0, 1fr));
  grid-template-rows: repeat(var(--ub-rows), minmax(0, 1fr));
  gap:calc(5px * var(--ui));
}

.unit-btn {
  position:relative; min-width:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:calc(3px * var(--ui)) 2px calc(2px * var(--ui));
  border-radius:calc(11px * var(--ui)); border:2px solid #ffd54f;
  background:linear-gradient(180deg,#fffde7,#ffe0b2);
  color:#4e2600; font-family:inherit; cursor:pointer; overflow:hidden;
}
.unit-btn canvas { width:100%; flex:1 1 auto; min-height:0; display:block; }
.unit-btn .u-name { font-size:calc(11px * var(--ui)); font-weight:bold; line-height:1.1; white-space:nowrap; }
.unit-btn .u-cost { font-size:calc(12.5px * var(--ui)); font-weight:bold; color:#00695c; line-height:1.1; }
.unit-btn .cd-mask {
  position:absolute; inset:0; background:rgba(20,30,40,.72);
  display:flex; align-items:center; justify-content:center;
  font-size:calc(18px * var(--ui)); font-weight:bold; color:#fff; text-shadow:0 2px 3px #000;
  transform-origin:bottom;
}
.unit-btn.poor { filter:grayscale(.75) brightness(.8); }
.unit-btn:active { transform:translateY(2px); }

.side-btn {
  width:calc(78px * var(--ui));
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  border-radius:calc(11px * var(--ui)); border:2px solid #90caf9;
  background:linear-gradient(180deg,#e3f2fd,#90caf9);
  color:#0d3050; font-family:inherit; cursor:pointer; padding:2px;
}
.side-btn.chudon { border-color:#ffab91; background:linear-gradient(180deg,#fff3e0,#ffab91); }
.side-icon { font-size:calc(21px * var(--ui)); line-height:1; }
.side-name { font-size:calc(10.5px * var(--ui)); font-weight:bold; }
.side-sub { font-size:calc(12px * var(--ui)); font-weight:bold; color:#00695c; }
.side-btn:disabled, .unit-btn:disabled { opacity:.55; }
.side-btn:active { transform:translateY(2px); }
.charge-wrap { width:82%; height:calc(6px * var(--ui)); border-radius:4px; background:rgba(0,0,0,.35); overflow:hidden; }
.charge-fill { display:block; height:100%; width:0%; background:linear-gradient(90deg,#ffca28,#ff5722); }
.side-btn.ready { animation:pulse .7s infinite alternate; }
@keyframes pulse { from{ box-shadow:0 0 0 rgba(255,180,0,0);} to{ box-shadow:0 0 12px 3px rgba(255,180,0,.85);} }

/* ---------- 結果 ---------- */
#screen-result { background:rgba(5,15,25,.94); }
#result-title { font-size:calc(min(14vw,64px) * var(--ui)); text-shadow:0 5px 0 rgba(0,0,0,.5); }
#result-title.win { color:#ffd54f; }
#result-title.lose { color:#90a4ae; }
#result-sub { font-size:calc(16px * var(--ui)); color:#cfe8ff; }

/* ---------- おしらせ（トースト） ---------- */
#toast {
  position:absolute; left:50%; bottom:14%; transform:translateX(-50%);
  z-index:60; pointer-events:none;
  padding:calc(11px * var(--ui)) calc(20px * var(--ui));
  border-radius:999px;
  background:rgba(13,30,45,.92); color:#fff;
  font-size:calc(14px * var(--ui)); font-weight:bold;
  box-shadow:0 6px 18px rgba(0,0,0,.4);
  animation:toastIn .18s ease-out;
}
@keyframes toastIn { from { opacity:0; transform:translate(-50%, 10px); } to { opacity:1; transform:translate(-50%, 0); } }

/* ---------- あたらしい バージョンの おしらせ ---------- */
#update-banner {
  position:absolute; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; gap:calc(8px * var(--ui));
  padding:calc(8px * var(--ui) + var(--safe-top)) calc(10px * var(--ui)) calc(8px * var(--ui));
  background:linear-gradient(180deg,#fff3c4,#ffd54f);
  color:#4e3300; font-size:calc(13px * var(--ui)); font-weight:bold;
  box-shadow:0 3px 10px rgba(0,0,0,.35);
}
.up-text { flex:1; line-height:1.3; }
.up-btn {
  flex:0 0 auto; padding:calc(8px * var(--ui)) calc(14px * var(--ui));
  font-size:calc(13px * var(--ui)); font-weight:bold;
  color:#fff; background:linear-gradient(180deg,#66bb6a,#2e7d32);
  border:none; border-radius:calc(10px * var(--ui)); font-family:inherit; cursor:pointer;
  box-shadow:0 3px 0 #1b5e20;
}
.up-btn:active { transform:translateY(2px); box-shadow:none; }
.up-later {
  flex:0 0 auto; padding:calc(8px * var(--ui)) 6px; font-size:calc(12px * var(--ui));
  background:none; border:none; color:#6d4c00; text-decoration:underline;
  font-family:inherit; cursor:pointer;
}

/* ---------- たてもち のとき ---------- */
@media (orientation:portrait) {
  .home-wrap { grid-template-columns:1fr; grid-template-rows:calc(34px * var(--ui)) auto 1fr auto; }
  .home-menu { grid-column:1; grid-row:3; }
  .home-speech { grid-column:1; grid-row:2; }
  .home-shelf { grid-column:1; grid-row:4; }
  .gacha-btn { grid-column:1; grid-row:4; justify-self:center; }
  .home-tankun { grid-column:1; grid-row:4; justify-self:end; }
  .speech-bubble::after { right:calc(40px * var(--ui)); }
}

/* =======================================================
   へんせい ／ パワーアップ ／ ガチャ の がめん
   ======================================================= */

#screen-party, #screen-power, #screen-gacha {
  background:linear-gradient(180deg,#1e3c5a,#0d1b2a);
  justify-content:flex-start; overflow-y:auto;
  padding:calc(10px * var(--ui) + var(--safe-top)) calc(12px * var(--ui)) calc(20px * var(--ui));
  gap:calc(10px * var(--ui));
}

.panel-head {
  display:flex; align-items:center; gap:calc(12px * var(--ui));
  width:min(calc(720px * var(--ui)), 96%);
}
.panel-head .sub-title { flex:1; margin:0; text-align:left; }
.panel-hint { font-size:calc(12.5px * var(--ui)); color:#a8c8e0; text-align:center; }
.panel-sub {
  width:min(calc(720px * var(--ui)), 96%);
  font-size:calc(13px * var(--ui)); font-weight:bold; color:#ffd54f;
  border-bottom:1px solid rgba(255,255,255,.2); padding-bottom:calc(4px * var(--ui));
}

/* ---- けいけんち と Gコイン ---- */
.wallet-bar {
  display:flex; gap:calc(10px * var(--ui));
  width:min(calc(720px * var(--ui)), 96%); justify-content:center;
}
.wallet-bar span {
  flex:1; text-align:center;
  padding:calc(7px * var(--ui)) calc(10px * var(--ui));
  border-radius:calc(10px * var(--ui));
  font-size:calc(13px * var(--ui)); font-weight:bold;
}
.w-exp  { background:rgba(76,175,80,.28);  color:#c8e6c9; border:1px solid rgba(129,199,132,.5); }
.w-coin { background:rgba(255,193,7,.22);  color:#ffe082; border:1px solid rgba(255,213,79,.5); }
.wallet-bar b { font-size:calc(17px * var(--ui)); font-variant-numeric:tabular-nums; }

/* ---- へんせいの わく（5れつ x 2だん）---- */
#party-slots {
  width:min(calc(720px * var(--ui)), 96%);
  display:grid; grid-template-columns:repeat(5, minmax(0,1fr));
  gap:calc(6px * var(--ui));
}
.pslot {
  position:relative; aspect-ratio:3/4;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  border-radius:calc(10px * var(--ui));
  border:2px dashed rgba(255,255,255,.3);
  background:rgba(255,255,255,.07);
  color:#cfe8ff; font-family:inherit; cursor:pointer; overflow:hidden;
  padding:calc(2px * var(--ui));
}
.pslot.filled { border-style:solid; border-color:#ffd54f; background:linear-gradient(180deg,#fffde7,#ffe0b2); color:#4e2600; }
.pslot.sel { border-color:#4fc3f7; box-shadow:0 0 0 3px rgba(79,195,247,.6); }
.pslot canvas { width:100%; flex:1 1 auto; min-height:0; display:block; }
.pslot .ps-no {
  position:absolute; top:2px; left:calc(5px * var(--ui));
  font-size:calc(10px * var(--ui)); font-weight:bold; opacity:.65;
}
.pslot .ps-name { font-size:calc(10px * var(--ui)); font-weight:bold; white-space:nowrap; }
.pslot .ps-lv { font-size:calc(10px * var(--ui)); font-weight:bold; color:#00695c; }
.pslot.empty-label { font-size:calc(12px * var(--ui)); justify-content:center; }

/* ---- ながおし ドラッグ＆ドロップ ---- */
.pslot { touch-action:manipulation; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
.pslot.dragging { opacity:.28; filter:grayscale(.5); }
.pslot.drop-target {
  border-color:#4fc3f7 !important;
  box-shadow:0 0 0 calc(3px * var(--ui)) rgba(79,195,247,.75);
  transform:scale(1.06);
}
.pslot-ghost {
  position:fixed; left:0; top:0; z-index:400;
  margin:0; pointer-events:none;
  transform:translate(-50%, -50%) scale(1.16) rotate(-3deg);
  box-shadow:0 calc(10px * var(--ui)) calc(20px * var(--ui)) rgba(0,0,0,.45);
}
/* もちあげて いる あいだは がめんが スクロール しない */
body.dragging-slot { overflow:hidden; touch-action:none; -webkit-user-select:none; user-select:none; }
body.dragging-slot #party-slots { touch-action:none; }

/* ---- もっている キャラの いちらん ---- */
#party-pool, #power-list {
  width:min(calc(720px * var(--ui)), 96%);
  display:flex; flex-direction:column; gap:calc(7px * var(--ui));
}
#party-pool { display:grid; grid-template-columns:repeat(auto-fill, minmax(calc(86px * var(--ui)), 1fr)); }
.pool-item {
  position:relative; display:flex; flex-direction:column; align-items:center;
  padding:calc(3px * var(--ui)); border-radius:calc(10px * var(--ui));
  border:2px solid #90caf9; background:linear-gradient(180deg,#e3f2fd,#bbdefb);
  color:#0d3050; font-family:inherit; cursor:pointer;
}
.pool-item canvas { width:100%; height:calc(46px * var(--ui)); display:block; }
.pool-item .pi-name { font-size:calc(10.5px * var(--ui)); font-weight:bold; white-space:nowrap; }
.pool-item .pi-lv { font-size:calc(10px * var(--ui)); font-weight:bold; color:#00695c; }
.pool-item.used { opacity:.45; }
.pool-item:active { transform:translateY(2px); }

/* ---- パワーアップの リスト ---- */
.power-row {
  display:flex; align-items:center; gap:calc(10px * var(--ui));
  padding:calc(8px * var(--ui)) calc(10px * var(--ui));
  border-radius:calc(12px * var(--ui));
  background:linear-gradient(180deg,#ffffff,#e3f2fd); color:#0d3050;
}
.power-row canvas { width:calc(56px * var(--ui)); height:calc(48px * var(--ui)); flex:0 0 auto; }
.pr-info { flex:1; min-width:0; }
.pr-name { font-size:calc(14px * var(--ui)); font-weight:bold; }
.pr-lv   { font-size:calc(12px * var(--ui)); color:#00695c; font-weight:bold; }
.pr-bar  { height:calc(7px * var(--ui)); border-radius:4px; background:#cfd8dc; overflow:hidden; margin-top:3px; }
.pr-bar i { display:block; height:100%; background:linear-gradient(90deg,#66bb6a,#2e7d32); }
.pr-stat { font-size:calc(10.5px * var(--ui)); color:#546e7a; margin-top:2px; }
.pr-btn {
  flex:0 0 auto; padding:calc(9px * var(--ui)) calc(12px * var(--ui));
  border:none; border-radius:calc(10px * var(--ui));
  font-family:inherit; font-size:calc(12.5px * var(--ui)); font-weight:bold;
  color:#fff; background:linear-gradient(180deg,#66bb6a,#2e7d32);
  box-shadow:0 3px 0 #1b5e20; cursor:pointer; line-height:1.25;
}
.pr-btn:disabled { background:#b0bec5; box-shadow:0 3px 0 #78909c; color:#eceff1; }
.pr-btn:active:not(:disabled) { transform:translateY(2px); box-shadow:none; }
.pr-btn.evolve { background:linear-gradient(180deg,#ba68c8,#7b1fa2); box-shadow:0 3px 0 #4a148c; }
.pr-btn.evolve.on { background:linear-gradient(180deg,#ffb74d,#ef6c00); box-shadow:0 3px 0 #bf360c; }
.pr-ev {
  display:inline-block; margin-left:calc(5px * var(--ui));
  padding:0 calc(6px * var(--ui));
  border-radius:calc(8px * var(--ui));
  background:linear-gradient(180deg,#ffb74d,#ef6c00); color:#fff;
  font-size:calc(10px * var(--ui));
}
/* ボタンが 2つ ならぶ ので すこし せまく */
.power-row .pr-btn { padding:calc(9px * var(--ui)) calc(9px * var(--ui)); font-size:calc(11.5px * var(--ui)); }

/* ---- ガチャ ---- */
.gacha-machine { width:min(calc(260px * var(--ui)), 76%); }
.gm-top { height:calc(16px * var(--ui)); border-radius:calc(10px * var(--ui)) calc(10px * var(--ui)) 0 0; background:#e53935; }
.gm-window {
  height:calc(140px * var(--ui));
  background:radial-gradient(circle at 50% 35%, #ffffff 0%, #d7ecfa 60%, #a9d6ee 100%);
  border:calc(6px * var(--ui)) solid #f2c94c;
  display:flex; align-items:center; justify-content:center; text-align:center;
  color:#0d3050; font-weight:bold; font-size:calc(15px * var(--ui)); line-height:1.5;
  overflow:hidden;
}
.gm-window.pop { animation:gachaPop .5s ease-out; }
@keyframes gachaPop {
  0%   { transform:scale(.7) rotate(-6deg); }
  60%  { transform:scale(1.08) rotate(3deg); }
  100% { transform:scale(1) rotate(0); }
}
.gm-slot { height:calc(22px * var(--ui)); border-radius:0 0 calc(10px * var(--ui)) calc(10px * var(--ui)); background:#6fa8d0; }
.gacha-rank { display:block; font-size:calc(30px * var(--ui)); line-height:1.1; }

/* ---- ステージ せんたく：しょう と ロック ---- */
.chapter-head {
  width:100%; margin-top:calc(6px * var(--ui));
  font-size:calc(15px * var(--ui)); font-weight:bold; color:#ffd54f;
  border-bottom:2px solid rgba(255,213,79,.45); padding-bottom:calc(3px * var(--ui));
}
.stage-card.locked { background:linear-gradient(180deg,#cfd8dc,#b0bec5); color:#607d8b; box-shadow:0 calc(5px * var(--ui)) 0 #78909c; }
.stage-card.locked .stage-no { color:#90a4ae; }
.stage-reward { font-size:calc(11px * var(--ui)); color:#00695c; font-weight:bold; }

/* =======================================================
   ステージ（しょう）せんたく と つぎの コースの きょうちょう
   ======================================================= */

#screen-chapter {
  background:linear-gradient(180deg,#37474f,#1b2a3a);
  justify-content:flex-start; overflow-y:auto;
  padding:calc(10px * var(--ui) + var(--safe-top)) calc(12px * var(--ui)) calc(20px * var(--ui));
  gap:calc(12px * var(--ui));
}
#screen-stage { padding-top:calc(10px * var(--ui) + var(--safe-top)); }

#chapter-list {
  width:min(calc(640px * var(--ui)), 96%);
  display:flex; flex-direction:column; gap:calc(12px * var(--ui));
}
.chapter-card {
  display:flex; align-items:center; gap:calc(14px * var(--ui));
  padding:calc(16px * var(--ui)) calc(18px * var(--ui));
  border:none; border-radius:calc(16px * var(--ui));
  background:linear-gradient(180deg,#ffe082,#ffb74d);
  color:#4e2600; text-align:left; cursor:pointer; font-family:inherit;
  box-shadow:0 calc(5px * var(--ui)) 0 #e65100;
}
.chapter-card:active { transform:translateY(3px); box-shadow:0 2px 0 #e65100; }
.chapter-card.locked { background:linear-gradient(180deg,#cfd8dc,#b0bec5); color:#607d8b; box-shadow:0 calc(5px * var(--ui)) 0 #78909c; }
.cc-no { font-size:calc(30px * var(--ui)); font-weight:bold; min-width:2.2em; text-align:center; line-height:1; }
.cc-info { flex:1; }
.cc-info b { font-size:calc(19px * var(--ui)); display:block; }
.cc-info small { font-size:calc(12.5px * var(--ui)); opacity:.85; }
.cc-bar { height:calc(8px * var(--ui)); border-radius:5px; background:rgba(0,0,0,.2); overflow:hidden; margin-top:calc(5px * var(--ui)); }
.cc-bar i { display:block; height:100%; background:linear-gradient(90deg,#66bb6a,#2e7d32); }
.cc-mark { font-size:calc(24px * var(--ui)); }

/* つぎに あそぶ コースを めだたせる */
.stage-card.next {
  background:linear-gradient(180deg,#fff59d,#ffd54f);
  box-shadow:0 calc(5px * var(--ui)) 0 #f57f17, 0 0 0 3px rgba(255,213,79,.55);
  animation:nextGlow 1.1s ease-in-out infinite alternate;
}
@keyframes nextGlow {
  from { box-shadow:0 calc(5px * var(--ui)) 0 #f57f17, 0 0 0 3px rgba(255,213,79,.35); }
  to   { box-shadow:0 calc(5px * var(--ui)) 0 #f57f17, 0 0 14px 6px rgba(255,213,79,.75); }
}
.stage-card.next .stage-no { color:#e65100; }
.next-badge {
  display:inline-block; margin-left:calc(6px * var(--ui));
  padding:1px calc(8px * var(--ui)); border-radius:999px;
  background:#e65100; color:#fff; font-size:calc(10.5px * var(--ui)); font-weight:bold;
}

/* =======================================================
   レアリティ と じょうげんかいほう
   ======================================================= */
.rarity-tag {
  display:inline-block; padding:1px calc(7px * var(--ui));
  border-radius:999px; font-size:calc(10px * var(--ui)); font-weight:bold;
  color:#1a1a1a;
}
.pool-item .rarity-tag, .pslot .rarity-tag { position:absolute; top:2px; right:calc(4px * var(--ui)); }
.pr-plus { color:#e65100; font-weight:bold; }
.gacha-new {
  display:block; font-size:calc(13px * var(--ui)); font-weight:bold;
  color:#2e7d32; margin-top:calc(4px * var(--ui));
}
.gacha-char { width:100%; height:calc(66px * var(--ui)); display:block; }

/* ---- ガチャがめん：りょうわきに なかま ---- */
.gacha-catch {
  font-size:calc(17px * var(--ui)); font-weight:bold;
  color:#ffd54f; text-shadow:0 2px 0 rgba(0,0,0,.45);
  letter-spacing:1px;
}
.gacha-stage {
  display:flex; align-items:flex-end; justify-content:center;
  gap:calc(6px * var(--ui));
  width:min(calc(560px * var(--ui)), 96%);
}
.gacha-stage .gacha-machine { flex:0 0 auto; width:calc(210px * var(--ui)); }
.gacha-friend {
  flex:1 1 0; min-width:0;
  height:calc(120px * var(--ui));
  display:block;
}
.gacha-friend.left  { animation:friendBobA 1.6s ease-in-out infinite alternate; }
.gacha-friend.right { animation:friendBobB 1.9s ease-in-out infinite alternate; }
@keyframes friendBobA { from { transform:translateY(0); } to { transform:translateY(calc(-6px * var(--ui))); } }
@keyframes friendBobB { from { transform:translateY(calc(-5px * var(--ui))); } to { transform:translateY(0); } }

@media (orientation:portrait) {
  .gacha-friend { height:calc(88px * var(--ui)); }
  .gacha-stage .gacha-machine { width:calc(165px * var(--ui)); }
}

/* =======================================================
   せかい ちず（ステージ せんたく）
   ======================================================= */

#screen-chapter { padding:0; gap:0; background:#0d1b2a; }
.map-wrap { position:relative; width:100%; height:100%; overflow:hidden; }
#map-canvas { position:absolute; inset:0; width:100%; height:100%; display:block; }
#map-nodes { position:absolute; inset:0; }

.map-top {
  position:absolute; top:0; left:0; right:0;
  display:flex; align-items:center; gap:calc(10px * var(--ui));
  padding:calc(8px * var(--ui) + var(--safe-top)) calc(12px * var(--ui)) 0;
  z-index:3;
}
.map-title {
  flex:1; text-align:center;
  font-size:calc(17px * var(--ui)); font-weight:bold; color:#fff;
  text-shadow:0 2px 0 rgba(0,0,0,.5), 0 0 10px rgba(0,0,0,.4);
  letter-spacing:2px;
}
.map-hint {
  position:absolute; left:0; right:0; bottom:calc(10px * var(--ui) + env(safe-area-inset-bottom,0px));
  text-align:center; font-size:calc(12.5px * var(--ui)); color:#e8f4ff;
  text-shadow:0 2px 3px rgba(0,0,0,.6); z-index:3; pointer-events:none;
}

/* あき坊の塔の ボタン（みぎうえ） */
.tower-btn {
  flex:0 0 auto; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:calc(9px * var(--ui)) calc(18px * var(--ui));
  border-radius:calc(16px * var(--ui));
  border:calc(3px * var(--ui)) solid #ce93d8;
  background:linear-gradient(180deg, rgba(74,20,110,.92), rgba(40,8,64,.95));
  color:#f3e5f5; font-family:inherit; line-height:1.15; cursor:pointer;
  box-shadow:0 0 12px rgba(186,104,200,.55);
  animation:towerGlow 1.8s ease-in-out infinite alternate;
}
@keyframes towerGlow {
  from { box-shadow:0 0 6px rgba(186,104,200,.35); }
  to   { box-shadow:0 0 18px rgba(206,147,216,.85); }
}
.tower-btn:active { transform:translateY(2px); }
.tw-ico  { font-size:calc(32px * var(--ui)); line-height:1; }
.tw-name { font-size:calc(14px * var(--ui)); font-weight:bold; white-space:nowrap; letter-spacing:.5px; margin-top:calc(2px * var(--ui)); }

/* マップの ノード（ステージ） */
.map-node {
  position:absolute; transform:translate(-50%, -50%);
  width:calc(74px * var(--ui)); height:calc(74px * var(--ui));
  border-radius:50%; border:calc(4px * var(--ui)) solid #fff;
  background:linear-gradient(180deg,#ffe082,#ffa726);
  color:#5d3a00; font-family:inherit; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  box-shadow:0 calc(5px * var(--ui)) 0 rgba(0,0,0,.35), 0 6px 16px rgba(0,0,0,.4);
  z-index:2;
}
.map-node:active { transform:translate(-50%, -50%) translateY(3px); }
.map-node.locked { background:linear-gradient(180deg,#b0bec5,#78909c); color:#37474f; border-color:#cfd8dc; }
.map-node.done   { background:linear-gradient(180deg,#fff59d,#fbc02d); }
.map-node.now    { animation:nodePulse 1.1s ease-in-out infinite alternate; }
@keyframes nodePulse {
  from { box-shadow:0 calc(5px * var(--ui)) 0 rgba(0,0,0,.35), 0 0 0 2px rgba(255,255,255,.5); }
  to   { box-shadow:0 calc(5px * var(--ui)) 0 rgba(0,0,0,.35), 0 0 20px 8px rgba(255,235,120,.85); }
}
.mn-no    { font-size:calc(24px * var(--ui)); font-weight:bold; line-height:1; }
.mn-sub   { font-size:calc(9.5px * var(--ui)); font-weight:bold; opacity:.85; }
.mn-badge {
  position:absolute; top:calc(-8px * var(--ui)); right:calc(-6px * var(--ui));
  font-size:calc(18px * var(--ui)); filter:drop-shadow(0 2px 2px rgba(0,0,0,.5));
}
.mn-label {
  position:absolute; top:calc(78px * var(--ui)); left:50%; transform:translateX(-50%);
  white-space:nowrap; font-size:calc(11.5px * var(--ui)); font-weight:bold; color:#fff;
  text-shadow:0 2px 3px rgba(0,0,0,.75);
}

/* =======================================================
   あき坊の塔
   ======================================================= */
#screen-tower {
  background:linear-gradient(180deg,#2b1046 0%,#140823 100%);
  justify-content:flex-start; overflow-y:auto;
  padding:calc(10px * var(--ui) + var(--safe-top)) calc(12px * var(--ui)) calc(20px * var(--ui));
  gap:calc(10px * var(--ui));
}
.tower-lead {
  font-size:calc(14px * var(--ui)); color:#e1bee7; text-align:center; font-weight:bold;
}
.tower-prize {
  display:flex; align-items:center; gap:calc(12px * var(--ui));
  width:min(calc(560px * var(--ui)), 96%);
  padding:calc(12px * var(--ui)) calc(16px * var(--ui));
  border-radius:calc(14px * var(--ui));
  border:2px solid #ce93d8;
  background:linear-gradient(180deg, rgba(123,31,162,.5), rgba(74,20,110,.6));
  color:#f3e5f5;
}
.tp-mark { font-size:calc(30px * var(--ui)); }
.tp-text { font-size:calc(12px * var(--ui)); line-height:1.5; }
.tp-text b { font-size:calc(16px * var(--ui)); color:#ffd54f; }

#tower-floors {
  width:min(calc(560px * var(--ui)), 96%);
  display:flex; flex-direction:column-reverse; gap:calc(6px * var(--ui));
}
.tower-floor {
  display:flex; align-items:center; gap:calc(12px * var(--ui));
  padding:calc(11px * var(--ui)) calc(16px * var(--ui));
  border-radius:calc(11px * var(--ui));
  border:none; font-family:inherit; text-align:left; cursor:default;
  background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
  color:#d1c4e9;
  box-shadow:inset 0 0 0 1px rgba(206,147,216,.28);
}
.tower-floor.open { background:linear-gradient(180deg,#ffe082,#ffb74d); color:#4e2600; cursor:pointer; box-shadow:0 4px 0 #e65100; }
.tf-no { font-size:calc(19px * var(--ui)); font-weight:bold; min-width:3.2em; }
.tf-name { flex:1; font-size:calc(13.5px * var(--ui)); font-weight:bold; }
.tf-mark { font-size:calc(16px * var(--ui)); }

/* ---- まだ みせて いない コース／かい の あんない ---- */
.more-note {
  width:100%; text-align:center;
  padding:calc(9px * var(--ui)) 0;
  font-size:calc(12px * var(--ui)); color:#90a4ae;
  border:2px dashed rgba(255,255,255,.22);
  border-radius:calc(12px * var(--ui));
}


/* =======================================================
   ずかん
   ======================================================= */
#screen-dex {
  background:linear-gradient(180deg,#1e3c5a,#0d1b2a);
  justify-content:flex-start; overflow-y:auto;
  padding:calc(10px * var(--ui) + var(--safe-top)) calc(12px * var(--ui)) calc(20px * var(--ui));
  gap:calc(8px * var(--ui));
}
.dex-tabs {
  width:min(calc(720px * var(--ui)), 96%);
  display:flex; gap:calc(6px * var(--ui));
}
.dex-tabs.wrap { flex-wrap:wrap; }
.dex-tab {
  flex:0 0 auto;
  padding:calc(6px * var(--ui)) calc(12px * var(--ui));
  border-radius:calc(999px);
  border:2px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.08); color:#cfe8ff;
  font-family:inherit; font-size:calc(12.5px * var(--ui)); font-weight:bold;
  cursor:pointer; white-space:nowrap;
}
.dex-tab.on { background:#4fc3f7; border-color:#81d4fa; color:#06283d; }
.dex-filter-label {
  width:min(calc(720px * var(--ui)), 96%);
  margin:0; font-size:calc(11px * var(--ui)); color:#90a4ae;
}
#dex-list {
  width:min(calc(720px * var(--ui)), 96%);
  display:flex; flex-direction:column; gap:calc(9px * var(--ui));
}
.dex-card {
  display:flex; gap:calc(10px * var(--ui));
  padding:calc(10px * var(--ui));
  border-radius:calc(14px * var(--ui));
  background:linear-gradient(180deg,#ffffff,#e8f1fa);
  color:#123; box-shadow:0 calc(3px * var(--ui)) 0 rgba(0,0,0,.25);
}
.dex-card canvas {
  flex:0 0 auto;
  width:calc(88px * var(--ui)); height:calc(88px * var(--ui));
  background:linear-gradient(180deg,#dff0ff,#b8ddf5);
  border-radius:calc(10px * var(--ui));
}
.dex-body { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:calc(3px * var(--ui)); }
.dex-name { font-size:calc(15px * var(--ui)); font-weight:bold; }
.dex-badges { display:flex; flex-wrap:wrap; gap:calc(4px * var(--ui)); }
.dex-stats {
  display:flex; flex-direction:column; gap:calc(1px * var(--ui));
  font-size:calc(11.5px * var(--ui)); color:#37474f;
  font-variant-numeric:tabular-nums;
}
.st-row {
  display:grid;
  /* ラベルと ★の はばを こていして、★の いちを たてに そろえる */
  grid-template-columns: calc(104px * var(--ui)) calc(80px * var(--ui)) 1fr;
  align-items:center; gap:calc(6px * var(--ui));
}
.st-lb  { font-style:normal; color:#546e7a; white-space:nowrap; overflow:hidden; text-overflow:clip; }
.st-num { font-style:normal; color:#0d3050; font-weight:bold; white-space:nowrap; }
.st-star {
  font-style:normal; letter-spacing:calc(1px * var(--ui));
  font-size:calc(12.5px * var(--ui)); white-space:nowrap;
  color:#cfd8dc;                       /* ☆の いろ */
}
/* ★が おおいほど あたたかい いろに */
.st-star.s1 { color:#b0bec5; }
.st-star.s2 { color:#4fc3f7; }
.st-star.s3 { color:#66bb6a; }
.st-star.s4 { color:#ffa726; }
.st-star.s5 { color:#ef5350; }
.st-star.none { color:#cfd8dc; letter-spacing:0; }
.dex-abil {
  margin-top:calc(3px * var(--ui));
  padding:calc(6px * var(--ui)) calc(8px * var(--ui));
  border-radius:calc(8px * var(--ui));
  background:rgba(79,195,247,.16);
  border-left:calc(4px * var(--ui)) solid #4fc3f7;
  font-size:calc(11.5px * var(--ui)); color:#123; line-height:1.45;
}
.dex-abil i { display:block; font-style:normal; }
.dex-locked { opacity:.55; }

/* レア度と ぞくせいの ちいさな バッジ */
.tag {
  display:inline-block; padding:0 calc(6px * var(--ui));
  border-radius:calc(999px);
  font-size:calc(10.5px * var(--ui)); font-weight:bold; line-height:1.7;
  white-space:nowrap;
}
.tag.attr  { color:#1b2740; }
.tag.rar   { color:#3b2a00; }
.tag.boss  { background:#ef5350; color:#fff; }

/* せんとうがめんの キャラボタンの すみに つける しるし */
/* ★せんとうボタンの しるしは たてならび（えと かさならない ように）*/
.unit-btn .u-mark {
  position:absolute; top:1px; right:1px;
  display:flex; flex-direction:column; gap:1px; align-items:center;
  pointer-events:none;
}
.unit-btn .u-mark .u-rar {
  writing-mode:vertical-rl;          /* ★を たてに ならべる */
  text-orientation:upright;
  letter-spacing:calc(-2px * var(--ui));
  line-height:1;
  text-shadow:0 1px 0 rgba(255,255,255,.9);
}
.unit-btn .u-mark .u-dot {
  width:calc(8px * var(--ui)); height:calc(8px * var(--ui));
}
.u-dot {
  width:calc(9px * var(--ui)); height:calc(9px * var(--ui));
  border-radius:50%; border:1.5px solid rgba(0,0,0,.35);
}
.u-rar {
  font-size:calc(8.5px * var(--ui)); font-weight:bold;
  color:#5d4037; letter-spacing:-1px;
}
/* へんせいの わく */
.pslot .ps-mark { position:absolute; top:2px; right:3px; display:flex; gap:1px; align-items:center; }
.pslot .ps-cost {
  position:absolute; bottom:2px; right:4px;
  font-size:calc(9.5px * var(--ui)); font-weight:bold; color:#00695c;
}
.pool-item .pi-mark { position:absolute; top:2px; right:3px; display:flex; gap:1px; align-items:center; }
.pool-item .pi-cost { font-size:calc(10px * var(--ui)); font-weight:bold; color:#00695c; }

/* メニューの ボタンを たてに */
.modal-btns.col { flex-direction:column; }
.modal-btn.info { background:linear-gradient(180deg,#4fc3f7,#0288d1); box-shadow:0 3px 0 #01579b; color:#fff; }


/* ---------- せかい ⇄ うちゅう の きりかえボタン ---------- */
.world-btn {
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:calc(46px * var(--ui));
  z-index:4;
  padding:calc(9px * var(--ui)) calc(20px * var(--ui));
  border:none; border-radius:999px;
  font-family:inherit; font-size:calc(14px * var(--ui)); font-weight:bold;
  color:#fff; letter-spacing:1px;
  background:linear-gradient(180deg,#5c6bc0,#303f9f);
  box-shadow:0 calc(4px * var(--ui)) 0 #1a237e, 0 0 calc(14px * var(--ui)) rgba(92,107,192,.6);
  cursor:pointer;
}
.world-btn:active { transform:translateX(-50%) translateY(2px); box-shadow:0 calc(2px * var(--ui)) 0 #1a237e; }
.world-btn.space  { background:linear-gradient(180deg,#43a047,#1b5e20); box-shadow:0 calc(4px * var(--ui)) 0 #0b3d10; }


/* ---- Lv.30 で なれる だい3けいたい ---- */
.pr-btn.evolve.third {
  background:linear-gradient(180deg,#ab47bc,#6a1b9a);
  box-shadow:0 calc(3px * var(--ui)) 0 #4a148c;
  opacity:.92;
}
/* だい3けいたいに なって いる とき（もどす ボタン）*/
.pr-btn.evolve.third.on {
  background:linear-gradient(180deg,#ff7043,#d84315);
  box-shadow:0 calc(3px * var(--ui)) 0 #8d2c0c;
  opacity:1;
}


/* ---- 2つめの とくべつステージ ボタン（惑星ごーの）---- */
.map-top { flex-wrap:wrap; }
.tower-btn2 { background:linear-gradient(180deg,#ab47bc,#6a1b9a); box-shadow:0 calc(3px * var(--ui)) 0 #4a148c; }
.tower-btn3 { background:linear-gradient(180deg,#66bb6a,#2e7d32); box-shadow:0 calc(3px * var(--ui)) 0 #1b5e20; }
.tower-limit {
  margin:calc(4px * var(--ui)) auto calc(6px * var(--ui));
  padding:calc(6px * var(--ui)) calc(14px * var(--ui));
  border-radius:999px;
  background:rgba(171,71,188,.25);
  border:2px solid rgba(206,147,216,.7);
  color:#f3e5f5; font-size:calc(13px * var(--ui)); font-weight:bold;
  text-align:center;
}
/* へんせいがめん・せんとうがめんで つかえない キャラ */
.locked-rarity { opacity:.35; filter:grayscale(1); }


/* ---------- せんとうボタンの わくを レア度の いろに よせる ---------- */
.unit-btn.rar-N  { border-color:#b0bec5; background:linear-gradient(180deg,#ffffff,#eceff1); }
.unit-btn.rar-R  { border-color:#64b5f6; background:linear-gradient(180deg,#f5fbff,#d6ecff); }
.unit-btn.rar-GR { border-color:#81c784; background:linear-gradient(180deg,#f6fff5,#d7f2d6); }
.unit-btn.rar-SR { border-color:#ffb74d; background:linear-gradient(180deg,#fffdf3,#ffe6bf); }
.unit-btn.rar-LR { border-color:#ba68c8; background:linear-gradient(180deg,#fdf6ff,#eddbf5); }
/* えを おおきく みせる ぶん、なまえと コストは したに ぴったり */
.unit-btn canvas { flex:1 1 auto; min-height:0; }


/* ================= ごうのすけの へや ================= */
.room-btn {
  /* ★よこもちの ときは、ふきだしの したの あいて いる ところ（みぎがわ）に
     おきます。まえは ひだりしたに あって、たなの えと かさなって いました。 */
  grid-column:2; grid-row:2; justify-self:end; align-self:end;
  width:calc(96px * var(--ui)); height:calc(96px * var(--ui));
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  border:none; border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#ffe0b2,#ff8a65 70%,#e64a19);
  box-shadow:0 calc(5px * var(--ui)) 0 #bf360c, 0 0 calc(16px * var(--ui)) rgba(255,138,101,.6);
  color:#fff; font-family:inherit; cursor:pointer; z-index:3;
}
.room-btn:active { transform:translateY(3px); box-shadow:0 calc(2px * var(--ui)) 0 #bf360c; }
/* たてもちは よこはばが せまい ので、メニューの したの あいて いる ところに おきます。
   （この きまりは .room-btn の あとに かかないと きき ません）           */
@media (orientation:portrait) {
  .room-btn { grid-column:1; grid-row:3; justify-self:end; align-self:end;
              width:calc(84px * var(--ui)); height:calc(84px * var(--ui)); }
}
.rb-ico   { font-size:calc(30px * var(--ui)); line-height:1; }
.rb-label { font-size:calc(11px * var(--ui)); font-weight:bold; line-height:1.15; text-align:center;
            text-shadow:0 2px 0 rgba(0,0,0,.35); }

#screen-room { justify-content:flex-start; gap:calc(6px * var(--ui)); padding-top:var(--safe-top); }
.room-stage {
  position:relative; width:96%; max-width:calc(560px * var(--ui));
  flex:1 1 auto; min-height:0;
  border-radius:calc(14px * var(--ui)); overflow:hidden;
  border:calc(3px * var(--ui)) solid #6d4c2f;
  box-shadow:0 calc(4px * var(--ui)) calc(12px * var(--ui)) rgba(0,0,0,.4);
}
#room-canvas { display:block; width:100%; height:100%; touch-action:none; }
.room-hint {
  position:absolute; left:0; right:0; bottom:calc(4px * var(--ui));
  text-align:center; font-size:calc(11px * var(--ui)); color:rgba(255,255,255,.85);
  text-shadow:0 1px 2px rgba(0,0,0,.7); pointer-events:none;
}
.room-talk {
  position:absolute; left:50%; top:calc(10px * var(--ui)); transform:translateX(-50%);
  max-width:88%; padding:calc(9px * var(--ui)) calc(16px * var(--ui));
  border-radius:calc(14px * var(--ui));
  background:#fffde7; color:#3e2723; border:calc(3px * var(--ui)) solid #ffb74d;
  font-size:calc(14px * var(--ui)); font-weight:bold; line-height:1.4;
  box-shadow:0 calc(3px * var(--ui)) calc(8px * var(--ui)) rgba(0,0,0,.35);
  pointer-events:none; text-align:center;
}
.room-tabs { display:flex; gap:calc(6px * var(--ui)); flex-wrap:wrap; justify-content:center; }
.room-tab {
  padding:calc(6px * var(--ui)) calc(14px * var(--ui));
  border-radius:999px; border:2px solid #90a4ae;
  background:#eceff1; color:#37474f; font-family:inherit;
  font-size:calc(12.5px * var(--ui)); font-weight:bold; cursor:pointer;
}
.room-tab.on { background:#ffb74d; border-color:#f57c00; color:#4e2600; }
.room-tray {
  width:96%; max-width:calc(560px * var(--ui));
  display:flex; gap:calc(6px * var(--ui)); flex-wrap:wrap; justify-content:center;
  max-height:calc(132px * var(--ui)); overflow-y:auto;
  padding:calc(4px * var(--ui)) 0 calc(8px * var(--ui));
}
.room-item {
  position:relative; width:calc(74px * var(--ui)); height:calc(64px * var(--ui));
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  border-radius:calc(10px * var(--ui)); border:2px solid #bcaaa4;
  background:linear-gradient(180deg,#fffdf7,#efe4d6); color:#4e342e;
  font-family:inherit; cursor:pointer; overflow:hidden; padding-bottom:2px;
}
.room-item canvas { width:100%; flex:1 1 auto; min-height:0; display:block; }
.room-item .ri-name { font-size:calc(9.5px * var(--ui)); font-weight:bold; line-height:1.05;
                      white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:96%; }
.room-item.on { border-color:#ff7043; background:linear-gradient(180deg,#fff3e0,#ffccbc); }
.room-item.on::after {
  content:'✓'; position:absolute; top:1px; right:3px;
  font-size:calc(13px * var(--ui)); font-weight:bold; color:#e64a19;
}


/* ---------- そざいの ドロップ ---------- */
.drop-mats { display:inline-flex; gap:calc(4px * var(--ui)); align-items:center; margin-left:calc(6px * var(--ui)); }
.drop-mats i { font-style:normal; font-size:calc(13px * var(--ui)); }
.mat-bar {
  width:96%; max-width:calc(560px * var(--ui));
  display:flex; gap:calc(5px * var(--ui)); flex-wrap:wrap; justify-content:center;
  padding:calc(5px * var(--ui)) 0;
}
.mat-chip {
  display:flex; align-items:center; gap:2px;
  padding:calc(3px * var(--ui)) calc(9px * var(--ui));
  border-radius:999px; background:rgba(255,255,255,.14); border:1.5px solid rgba(255,255,255,.35);
  font-size:calc(12px * var(--ui)); font-weight:bold; color:#fff;
}
.mat-chip b { color:#ffe082; }
/* こうさくの ふだ */
.craft-item { width:calc(86px * var(--ui)); height:calc(96px * var(--ui)); }
.craft-item .ri-cost { font-size:calc(9px * var(--ui)); line-height:1.1; color:#5d4037; white-space:nowrap; }
.craft-item.cant { opacity:.5; }
.craft-item.made { border-color:#66bb6a; }
.craft-item.made::after { content:'✓'; position:absolute; top:1px; right:3px; color:#2e7d32; font-weight:bold; }

/* ============ こうしん りれき ============ */
.log-wrap{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  background:linear-gradient(180deg,#1b2a4a,#0d1730);
  padding:calc(10px * var(--ui));
}
.log-top{ display:flex; align-items:center; gap:calc(10px * var(--ui)); flex:0 0 auto; }
.log-title{
  margin:0; color:#fff; font-size:calc(20px * var(--ui)); letter-spacing:1px;
  text-shadow:0 calc(2px * var(--ui)) 0 rgba(0,0,0,.4);
}
.log-list{
  flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch;
  margin-top:calc(8px * var(--ui)); padding-right:calc(4px * var(--ui));
}
.log-card{
  background:#fff; border-radius:calc(14px * var(--ui));
  padding:calc(12px * var(--ui)) calc(14px * var(--ui));
  margin-bottom:calc(10px * var(--ui));
  box-shadow:0 calc(3px * var(--ui)) 0 rgba(0,0,0,.25);
}
.log-card.newest{ border:calc(3px * var(--ui)) solid #ffd54f; }
.log-head{ display:flex; align-items:center; gap:calc(8px * var(--ui)); flex-wrap:wrap; }
.log-ver{
  background:linear-gradient(180deg,#42a5f5,#1565c0); color:#fff;
  border-radius:999px; padding:calc(2px * var(--ui)) calc(10px * var(--ui));
  font-size:calc(13px * var(--ui)); font-weight:bold;
}
.log-card.newest .log-ver{ background:linear-gradient(180deg,#ffb300,#ef6c00); }
.log-new{
  background:#e53935; color:#fff; border-radius:999px;
  padding:calc(2px * var(--ui)) calc(8px * var(--ui));
  font-size:calc(11px * var(--ui)); font-weight:bold;
}
.log-date{ color:#78909c; font-size:calc(12px * var(--ui)); margin-left:auto; }
.log-name{
  display:block; margin-top:calc(4px * var(--ui));
  color:#1b2a4a; font-size:calc(16px * var(--ui)); font-weight:bold;
}
.log-items{ margin:calc(6px * var(--ui)) 0 0; padding-left:calc(18px * var(--ui)); }
.log-items li{
  color:#37474f; font-size:calc(13px * var(--ui));
  line-height:1.6; margin-bottom:calc(4px * var(--ui));
}