/* ===== テーマ：手作りドットRPG風 =====
   枠画像（--f-panel など）と模様（--band など）は起動時に art.js で生成して差し込みます */
:root {
  --ink: #2a1810;
  --cream: #f4e8c8;
  --cream-d: #cdb88a;
  --brown: #4a3326;
  --brown-d: #2e1f18;
  --teal: #3fb6aa;
  --teal-d: #23766e;
  --gold: #f0c452;
  --red: #e02e58;
  --red-d: #9c1838;
  --green: #5aee6a;
  --text: #fff8e8;
  --muted: #d8c8a8;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --font: 'M PLUS Rounded 1c', 'Hiragino Maru Gothic ProN', 'Hiragino Sans', 'Yu Gothic', sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%; background: var(--brown-d); color: var(--text);
  font-family: var(--font); font-weight: 800; font-size: 15px; overflow: hidden;
  -webkit-user-select: none; user-select: none; touch-action: manipulation;
}
button { font-family: inherit; font-weight: 800; color: inherit; cursor: pointer; }
img.px, canvas { image-rendering: pixelated; image-rendering: crisp-edges; }
.hidden { display: none !important; }

/* 縁取り文字（参考画面のような白文字＋濃い縁） */
.ol {
  color: #fff;
  text-shadow: 2px 0 0 var(--ink), -2px 0 0 var(--ink), 0 2px 0 var(--ink), 0 -2px 0 var(--ink),
    1.5px 1.5px 0 var(--ink), -1.5px 1.5px 0 var(--ink), 1.5px -1.5px 0 var(--ink), -1.5px -1.5px 0 var(--ink), 0 3px 0 var(--ink);
}

#app { position: fixed; inset: 0; }
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; }

/* 上下の飾り帯 */
.band { height: 22px; flex-shrink: 0; background: var(--band) repeat; background-size: 32px 32px; image-rendering: pixelated; box-shadow: inset 0 -3px 0 #8a7240, inset 0 3px 0 #d0bc84; }
#menu > .band:first-child, #loading > .band:first-child { height: calc(18px + var(--safe-t)); }
#menu > .band:last-child, #loading > .band:last-child { height: calc(14px + var(--safe-b)); }

/* ===== メニュー ===== */
#menu { background: var(--pattern) repeat, #3aa79c; background-size: 32px 32px; }
#menu > header, #menu > main, #menu > nav { width: 100%; max-width: 560px; margin: 0 auto; }

.topbar { display: flex; align-items: center; gap: 6px; padding: 8px 10px 6px; }
.rank {
  width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0; position: relative;
  background: radial-gradient(circle at 40% 35%, #6ac8ff, #2a6ac8 70%); border: 3px solid var(--ink);
  box-shadow: inset 0 -4px 0 #1a4a98, 0 0 0 3px #e8d088, 0 3px 0 3px var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1;
}
.rank-label { font-size: 10px; position: absolute; top: -8px; left: -6px; transform: rotate(-12deg); color: #ffd86a; }
.rank-num { font-size: 22px; }
.pill {
  flex: 1; display: flex; align-items: center; gap: 4px; height: 34px; padding: 0 10px 0 4px;
  background: linear-gradient(#3a2a20, #2a1c14); border: 3px solid var(--ink); border-radius: 18px;
  box-shadow: inset 0 0 0 2px #6a5038; font-size: 16px; justify-content: space-between;
}
.pill img { width: 26px; height: 26px; }
.cloud-dot { width: 26px; height: 26px; border: 3px solid var(--ink); border-radius: 50%; background: #6a5a50; padding: 0; flex-shrink: 0; }
.cloud-dot.ok { background: var(--green); }
.cloud-dot.syncing { background: var(--gold); animation: blink .6s steps(2) infinite; }
.cloud-dot.error { background: var(--red); }
@keyframes blink { 50% { opacity: .3; } }

#tab-content { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 4px 10px 14px; -webkit-overflow-scrolling: touch; }

.tabbar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 6px 8px 8px; background: #6a5038; border-top: 3px solid var(--ink); box-shadow: inset 0 3px 0 #8a6a4a; }
.tabbar button {
  position: relative; height: 66px; padding: 4px 0 2px; border: 3px solid var(--ink); border-radius: 8px;
  background: linear-gradient(#f6ecd2, #dccca4); box-shadow: inset 0 -4px 0 #b8a07a, 0 3px 0 var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 1px; font-size: 13px;
}
.tabbar button img { height: 36px; width: auto; }
.tabbar button.active { background: linear-gradient(#5ad0c4, #2a948a); box-shadow: inset 0 -4px 0 #1a6a62, 0 3px 0 var(--ink); transform: translateY(-2px); }
.tabbar button:active { transform: translateY(2px); box-shadow: inset 0 -2px 0 #b8a07a, 0 1px 0 var(--ink); }
.dot-badge { position: absolute; top: 4px; right: 8px; width: 12px; height: 12px; border-radius: 50%; background: var(--red); border: 2px solid var(--ink); }

/* ===== 枠付きパネル ===== */
.panel { border: 12px solid transparent; border-image: var(--f-panel) 6 fill / 12px stretch; padding: 4px 6px; margin: 8px 0; image-rendering: pixelated; }
.paper { border: 12px solid transparent; border-image: var(--f-paper) 6 fill / 12px stretch; padding: 4px 6px; margin: 8px 0; color: var(--ink); }
.goldf { border: 12px solid transparent; border-image: var(--f-gold) 6 fill / 12px stretch; padding: 4px 6px; margin: 8px 0; }
.darkf { border: 12px solid transparent; border-image: var(--f-dark) 6 fill / 12px stretch; padding: 4px 6px; }
.panel h3, .goldf h3 { margin: 0 0 8px; font-size: 15px; color: var(--gold); text-shadow: 0 2px 0 var(--ink); }
.muted { color: var(--muted); font-size: 12px; font-weight: 500; line-height: 1.5; }
.paper .muted { color: #7a6040; }
.row { display: flex; gap: 8px; align-items: center; }
.row.wrap { flex-wrap: wrap; }
.spacer { flex: 1; }
.sep { height: 0; border-top: 2px dotted #c8b48a88; margin: 6px 0; }

/* ===== ボタン ===== */
.btn {
  font-size: 15px; padding: 9px 14px; border: 3px solid var(--ink); border-radius: 8px;
  background: linear-gradient(#fbf2dc, #e4d4ae); color: var(--ink);
  box-shadow: inset 0 -4px 0 #bba57c, inset 0 2px 0 #fff, 0 3px 0 var(--ink);
  position: relative;
}
.btn:active:not(:disabled) { transform: translateY(2px); box-shadow: inset 0 -2px 0 #bba57c, 0 1px 0 var(--ink); }
.btn.red { background: linear-gradient(#ff5a80, #d8204c); color: #fff; box-shadow: inset 0 -4px 0 var(--red-d), inset 0 2px 0 #ff9ab4, 0 3px 0 var(--ink); text-shadow: 0 2px 0 var(--red-d), 0 -1px 0 var(--red-d), 1px 0 0 var(--red-d), -1px 0 0 var(--red-d); }
.btn.teal { background: linear-gradient(#6adacc, #2a9a8e); color: #fff; box-shadow: inset 0 -4px 0 #1a6a62, inset 0 2px 0 #aaf4ea, 0 3px 0 var(--ink); text-shadow: 0 2px 0 #1a5a52, 1px 0 0 #1a5a52, -1px 0 0 #1a5a52; }
.btn.gold { background: linear-gradient(#ffe27a, #e0a822); color: var(--ink); box-shadow: inset 0 -4px 0 #a8740c, inset 0 2px 0 #fff4c0, 0 3px 0 var(--ink); }
.btn.dark { background: linear-gradient(#5a4436, #3a2a20); color: #fff; box-shadow: inset 0 -4px 0 #24160e, inset 0 2px 0 #7a604c, 0 3px 0 var(--ink); }
.btn.small { font-size: 13px; padding: 6px 10px; }
.btn.block { width: 100%; }
.btn:disabled { filter: grayscale(.7) brightness(.8); opacity: .75; }
.btn img { width: 18px; height: 18px; vertical-align: -4px; }

.stars { color: #ffd23a; letter-spacing: -1px; text-shadow: 0 2px 0 var(--ink); }
.stars .off { color: #6a5a4a; }

/* ===== ホーム ===== */
.home-top { display: flex; gap: 6px; justify-content: flex-end; }
.chip { font-size: 12px; padding: 5px 10px; border: 3px solid var(--ink); border-radius: 14px; background: var(--cream); color: var(--ink); box-shadow: 0 2px 0 var(--ink); position: relative; }
.chip .badge { position: absolute; top: -6px; right: -6px; width: 14px; height: 14px; border-radius: 50%; background: var(--red); border: 2px solid var(--ink); }

.stage-card { position: relative; }
.stage-ribbon {
  display: flex; align-items: center; justify-content: center; gap: 10px; margin: -2px -2px 8px; padding: 6px 8px;
  background: linear-gradient(#e8405e, #b81a40); border: 3px solid var(--ink); border-radius: 6px; box-shadow: inset 0 -3px 0 #8a1030;
}
.stage-ribbon .no { font-size: 22px; letter-spacing: 1px; }
.stage-ribbon .nm { font-size: 16px; }
.stage-view { position: relative; border: 3px solid var(--ink); border-radius: 4px; overflow: hidden; background: #000; }
.stage-view canvas { display: block; width: 100%; height: auto; }
.stage-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 56px; border: 3px solid var(--ink); border-radius: 8px;
  background: var(--cream); color: var(--ink); font-size: 18px; box-shadow: 0 3px 0 var(--ink); z-index: 2;
}
.stage-arrow.l { left: 6px; } .stage-arrow.r { right: 6px; }
.stage-arrow:disabled { opacity: .35; }
.rooms { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 10px 0 4px; font-size: 12px; }
.rooms i { width: 18px; height: 18px; border: 3px solid var(--ink); border-radius: 4px; background: var(--cream); display: inline-block; }
.rooms i.boss { background: var(--red); width: 26px; }
.rooms .arrow { color: var(--cream-d); }
.stage-meta { display: flex; justify-content: space-between; font-size: 13px; margin-top: 4px; }
.stage-meta .ok { color: var(--green); } .stage-meta .warn { color: #ff8a9a; }
.btn-start { width: 100%; font-size: 28px; letter-spacing: 8px; padding: 12px 0 14px; margin-top: 6px; }

/* ===== 装備・キャラ ===== */
.subtabs { display: flex; gap: 6px; margin: 4px 0 0; }
.subtabs button { flex: 1; font-size: 14px; padding: 8px 4px; }
.subtabs button.active { background: linear-gradient(#ff5a80, #d8204c); color: #fff; box-shadow: inset 0 -4px 0 var(--red-d), 0 3px 0 var(--ink); text-shadow: 0 2px 0 var(--red-d); }

.equip-stage {
  display: grid; grid-template-columns: 1fr 1.25fr 1fr; gap: 6px; align-items: center; padding: 10px 6px; margin: 8px 0;
  border: 3px solid var(--ink); border-radius: 6px;
  background: radial-gradient(ellipse at 50% 65%, #fff4d8 0, #f0e2c0 45%, #d8c49a 100%);
  box-shadow: inset 0 0 0 3px #b89a6a; position: relative; overflow: hidden;
}
.equip-stage::before, .equip-stage::after { content: ''; position: absolute; top: 0; bottom: 0; width: 18px; background: linear-gradient(90deg, #7a1a2a, #b02a3a 50%, #7a1a2a); border: 0 solid var(--ink); }
.equip-stage::before { left: 0; border-right-width: 3px; } .equip-stage::after { right: 0; border-left-width: 3px; }
.slot-col { display: flex; flex-direction: column; gap: 6px; z-index: 1; }
.slot-col.l { padding-left: 14px; } .slot-col.r { padding-right: 14px; }
.equip-center { text-align: center; z-index: 1; }
.equip-center img { width: 100%; max-width: 150px; animation: bob 1.6s steps(2) infinite; }
@keyframes bob { 50% { transform: translateY(-3px); } }
.statbar { margin-top: 4px; padding: 4px 6px; background: #6a6a6aee; border: 3px solid var(--ink); border-radius: 6px; font-size: 13px; color: #fff; line-height: 1.3; }
.statbar b { color: #ffe27a; font-weight: 800; }

/* アイテムタイル（参考画面のレア度枠） */
.itile {
  position: relative; aspect-ratio: 1; padding: 0; border: 3px solid var(--ink); border-radius: 6px;
  background: radial-gradient(circle at 50% 45%, var(--rc) 0, var(--rd) 75%);
  box-shadow: inset 0 0 0 3px #f0c452, inset 0 0 0 5px var(--ink), 0 3px 0 var(--ink);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.itile img.ic { width: 64%; height: 64%; filter: drop-shadow(0 2px 0 #0006); }
.itile .lv { position: absolute; bottom: 2px; left: 0; right: 0; text-align: center; font-size: 11px; }
.itile .rar { position: absolute; top: 4px; left: 6px; font-size: 10px; }
.itile .who { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff8; border: 2px solid var(--ink); }
.itile.empty { background: #0002; box-shadow: inset 0 0 0 2px #b89a6a; border-style: dashed; color: #7a6040; font-size: 11px; flex-direction: column; }
.itile.empty img { width: 40%; opacity: .35; filter: grayscale(1); }
.itile.new::after { content: 'NEW'; position: absolute; top: 4px; right: 4px; font-size: 9px; background: var(--red); color: #fff; padding: 0 3px; border-radius: 3px; border: 1px solid var(--ink); }
.itile.ssr { animation: shine 2.5s linear infinite; }
@keyframes shine { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.25); } }
.inv { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.inv-tools { display: flex; align-items: center; gap: 6px; margin: 6px 0; }
.inv-tools .filter { flex: 1; display: flex; gap: 4px; overflow-x: auto; }
.inv-tools .filter button { font-size: 11px; padding: 5px 8px; white-space: nowrap; }
.inv-tools .filter button.active { background: linear-gradient(#6adacc, #2a9a8e); color: #fff; text-shadow: 0 1px 0 #1a5a52; }

/* キャラ選択 */
.char-show {
  position: relative; display: grid; grid-template-columns: 1fr 1.15fr; gap: 6px; align-items: center; min-height: 220px; padding: 8px;
  border: 3px solid var(--ink); border-radius: 6px; margin: 8px 0; overflow: hidden;
  background: radial-gradient(ellipse at 30% 60%, #fffbe8 0, var(--cbg) 70%);
  box-shadow: inset 0 0 0 3px #ffffff55;
}
.char-show .big { width: 100%; max-width: 180px; justify-self: center; animation: bob 1.4s steps(2) infinite; filter: drop-shadow(0 6px 0 #0003); }
.char-info { color: #fff; }
.char-info .nm { font-size: 20px; }
.char-info .role { font-size: 11px; color: var(--muted); font-weight: 500; }
.char-info .lvline { font-size: 15px; margin: 4px 0 2px; }
.char-info .st { font-size: 14px; line-height: 1.5; }
.ability { display: flex; gap: 6px; align-items: center; margin-top: 6px; font-size: 12px; line-height: 1.3; text-align: left; width: 100%; background: none; border: 0; padding: 0; color: #fff; }
.ability img { width: 34px; height: 34px; flex-shrink: 0; border: 2px solid var(--ink); border-radius: 6px; background: linear-gradient(#ffe9a8, #e0b04a); box-shadow: inset 0 0 0 2px #fff6; }
.ability small { display: block; color: var(--muted); font-weight: 500; font-size: 11px; }
.char-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.ctile {
  position: relative; aspect-ratio: 1; padding: 0; border: 3px solid var(--ink); border-radius: 6px; overflow: hidden;
  background: radial-gradient(circle at 50% 70%, #fff6dc, var(--cbg)); box-shadow: 0 3px 0 var(--ink);
}
.ctile img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.ctile.active { box-shadow: 0 0 0 3px #ffe27a, 0 3px 0 var(--ink); transform: translateY(-2px); }
.ctile .pct { position: absolute; top: 2px; left: 0; right: 0; text-align: center; font-size: 10px; }
.ctile .lvl { position: absolute; bottom: 1px; right: 4px; font-size: 11px; }
.ctile .using { position: absolute; bottom: 1px; left: 4px; font-size: 10px; background: var(--red); padding: 0 4px; border-radius: 4px; border: 2px solid var(--ink); }
.ctile.locked img { filter: brightness(0) opacity(.55); }
.ctile.locked .lockic { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 10px; }
.ctile.locked .lockic img { width: 40%; height: auto; filter: none; }

/* ===== 抽選 ===== */
.altar { text-align: center; padding: 10px; }
.altar img { width: 120px; filter: drop-shadow(0 0 12px #ffd86a); animation: bob 1.8s steps(2) infinite; }
.altar .ttl { font-size: 22px; margin-top: 4px; }
.rates { font-size: 12px; display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.gacha-result { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.gacha-result .gres { animation: rise .4s var(--ease-out, ease-out) backwards; }
@keyframes pop { from { transform: scale(.6); opacity: 0; } }

/* ===== 設定 ===== */
.set-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-top: 2px dotted #c8b48a55; }
.set-row:first-of-type { border-top: 0; }
.set-row .lbl { flex: 1; }
.set-row .lbl small { display: block; color: var(--muted); font-size: 11px; font-weight: 500; margin-top: 2px; line-height: 1.4; }
.toggle { width: 58px; height: 30px; border: 3px solid var(--ink); border-radius: 16px; background: #6a5a50; position: relative; padding: 0; flex-shrink: 0; box-shadow: 0 2px 0 var(--ink); }
.toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 2px solid var(--ink); transition: left .1s; }
.toggle.on { background: var(--teal); }
.toggle.on::after { left: 30px; }
.account { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.account img { width: 38px; height: 38px; border-radius: 50%; border: 3px solid var(--ink); }
.btn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.log-entry { border-left: 4px solid var(--red); padding: 2px 0 2px 10px; margin: 10px 0; }
.log-entry .ver { color: var(--teal-d); }
.log-entry .date { color: #8a7050; font-size: 12px; margin-left: 6px; }
.log-entry ul { margin: 4px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.6; font-weight: 500; }

/* ===== モーダル ===== */
#modal-root .overlay { position: fixed; inset: 0; z-index: 50; background: rgba(20,10,8,.62); display: flex; align-items: center; justify-content: center; padding: 14px; animation: fade .12s; }
@keyframes fade { from { opacity: 0; } }
.modal { width: 100%; max-width: 420px; max-height: 86vh; overflow-y: auto; color: var(--ink); animation: zoom .16s steps(3); border: 14px solid transparent; border-image: var(--f-paper) 6 fill / 14px stretch; padding: 4px 6px; }
@keyframes zoom { from { transform: scale(.85); } }
.modal h2 { margin: -4px -6px 10px; padding: 8px; font-size: 18px; text-align: center; background: linear-gradient(#e8405e, #b81a40); border: 3px solid var(--ink); border-radius: 6px; color: #fff; text-shadow: 0 2px 0 #7a1030; box-shadow: inset 0 -3px 0 #8a1030; }
.modal .mbody { font-size: 14px; line-height: 1.6; font-weight: 500; }
.modal .mbody b { font-weight: 800; }
.modal .mbtns { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.modal .mbtns .btn { flex: 1; min-width: 96px; }
.modal textarea { width: 100%; height: 110px; background: #fff; color: var(--ink); border: 3px solid var(--ink); border-radius: 6px; font-family: monospace; font-size: 11px; padding: 6px; -webkit-user-select: text; user-select: text; }
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.compare > div { background: #fff8; border: 3px solid var(--ink); border-radius: 6px; padding: 8px; font-size: 12px; line-height: 1.7; }
.compare h4 { margin: 0 0 4px; color: var(--red-d); font-size: 14px; }
.item-detail { display: flex; gap: 12px; align-items: flex-start; }
.item-detail .itile { width: 84px; flex-shrink: 0; }
.item-detail .stats div { font-size: 14px; }

/* リザルト */
.result-title { font-size: 30px; text-align: center; letter-spacing: 3px; margin: 2px 0 8px; }
.result-title.win { color: #ffd23a; }
.result-title.lose { color: #ff6a8a; }
.result-grid { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; font-size: 14px; }
.result-grid b { color: #8a6a4a; }
.rewards { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-top: 10px; }
.reward { background: #fff8; border: 3px solid var(--ink); border-radius: 8px; padding: 4px 10px; display: flex; align-items: center; gap: 6px; font-size: 14px; }
.reward img { width: 24px; height: 24px; }

/* ===== 戦闘画面 ===== */
#battle { background: #000; touch-action: none; }
#game { position: absolute; inset: 0; width: 100%; height: 100%; }
.battle-band { position: absolute; left: 0; right: 0; z-index: 4; pointer-events: none; }
.battle-band.top { top: 0; height: calc(14px + var(--safe-t)); }
.battle-band.bottom { bottom: 0; height: calc(12px + var(--safe-b)); }
.hud { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.round-btn {
  pointer-events: auto; position: absolute; top: calc(20px + var(--safe-t)); right: 8px; width: 58px; height: 58px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #5a4a40, #2a1c16); border: 3px solid #f4e8c8; box-shadow: 0 0 0 3px var(--ink), 0 3px 0 3px var(--ink);
  color: #fff; font-size: 11px; line-height: 1.2; display: flex; align-items: center; justify-content: center;
}
/* 一時停止マーク（縦棒2本） */
.pause-ic { display: block; width: 22px; height: 24px; background: linear-gradient(90deg, #fff 0 7px, transparent 7px 15px, #fff 15px 22px);
  filter: drop-shadow(0 2px 0 var(--ink)); }
.hud-left { position: absolute; left: 0; top: calc(86px + var(--safe-t)); display: flex; flex-direction: column; gap: 6px; }
.hbar {
  display: flex; align-items: center; gap: 6px; min-width: 150px; height: 30px; padding: 0 12px 0 8px; justify-content: space-between;
  background: linear-gradient(#5a4232, #3a2a20); border: 3px solid var(--ink); border-left: 0; border-radius: 0 16px 16px 0;
  box-shadow: inset 0 0 0 2px #3fb6aa88; font-size: 15px;
}
.hbar img { width: 22px; height: 22px; }
.hlabel { font-size: 11px; background: #fff; color: var(--ink); padding: 0 6px; border-radius: 4px; border: 2px solid var(--ink); }
.hud-right { position: absolute; right: 74px; top: calc(22px + var(--safe-t)); width: 150px; }
.lvbox { display: flex; justify-content: space-between; align-items: center; height: 30px; padding: 0 10px; background: linear-gradient(#5a4232, #3a2a20); border: 3px solid var(--ink); border-radius: 6px 6px 0 0; font-size: 17px; }
.expbar { height: 12px; background: #2a1c14; border: 3px solid var(--ink); border-top: 0; border-radius: 0 0 6px 6px; padding: 1px; }
.expbar .fill { height: 100%; width: 0; background: linear-gradient(#fff27a, #e0c020); border-radius: 2px; }
.roombox { margin-top: 6px; font-size: 12px; text-align: right; }
.roombar { height: 10px; background: #2a1c14; border: 3px solid var(--ink); border-radius: 6px; margin-top: 2px; overflow: hidden; }
.roombar .fill { height: 100%; width: 0; background: linear-gradient(#7aff8a, #2ab83a); }
.roombar.open .fill { background: linear-gradient(#ffe27a, #e0a822); animation: blink .5s steps(2) infinite; }
.bossbar { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(28px + var(--safe-b)); width: min(320px, 70vw); display: flex; align-items: center; gap: 6px; font-size: 13px; }
.bossbar .track { flex: 1; height: 14px; background: #2a1c14; border: 3px solid var(--ink); border-radius: 6px; overflow: hidden; }
.bossbar .fill { height: 100%; width: 100%; background: linear-gradient(#ff7a8a, #d8204c); }
.banner { position: absolute; top: 40%; left: 0; right: 0; text-align: center; font-size: 26px; z-index: 6; pointer-events: none; opacity: 0; }
.banner.show { animation: banner 1.8s forwards; }
@keyframes banner { 0% { opacity: 0; transform: scale(1.8); } 12% { opacity: 1; transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-20px); } }
#joy { position: absolute; width: 100px; height: 100px; margin: -50px 0 0 -50px; border: 3px solid #fff8; border-radius: 50%; z-index: 4; pointer-events: none; background: #0002; }
#joy-knob { position: absolute; left: 50%; top: 50%; width: 42px; height: 42px; margin: -21px 0 0 -21px; border-radius: 50%; background: #fff6; border: 3px solid #fff; }
.hint { position: absolute; bottom: calc(40px + var(--safe-b)); left: 0; right: 0; text-align: center; font-size: 14px; pointer-events: none; animation: blink 1.2s steps(2) infinite; z-index: 5; }

/* レベルアップ（スロット） */
#levelup { position: absolute; inset: 0; z-index: 20; background: rgba(30,14,10,.55); display: flex; flex-direction: column; justify-content: center; padding: 0 12px; }
.lv-title { text-align: center; font-size: 16px; margin-bottom: 10px; }
.lv-cards { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 480px; margin: 0 auto; }
.lv-card {
  position: relative; display: flex; gap: 12px; align-items: center; text-align: left; padding: 10px 12px; min-height: 96px; color: #fff;
  border: 12px solid transparent; border-image: var(--f-panel) 6 fill / 12px stretch; background: none;
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), opacity .25s ease-out, filter .15s;
}
/* 登場前（JSでクラスを外すと元の位置へ。iPhoneでアニメが途中で止まってもズレない） */
.lv-card.pre { opacity: 0; transform: translateY(18px) scale(.96); }
.lv-card.ready:active { transform: scale(.97); }
.lv-card.ready::after { content: ''; position: absolute; inset: -12px; border: 3px solid transparent; }
.lv-card.ready:hover { filter: brightness(1.12); }
.reel-frame { width: 70px; height: 70px; flex-shrink: 0; border: 3px solid var(--ink); border-radius: 8px; padding: 4px; position: relative; background: linear-gradient(#ffe9a8, #c89a3a); box-shadow: inset 0 0 0 2px #fff8; }
.reel-frame.w { background: linear-gradient(#ffb0a0, #d8503a); }
.reel-frame.p { background: linear-gradient(#b8f0a0, #4ab84a); }
.reel-frame.s { background: linear-gradient(135deg, #ff7a9a, #ffd23a, #6ae86a, #4ac8ff, #c45cff); }
.reel { width: 100%; height: 100%; overflow: hidden; border-radius: 4px; background: #fff8e0; border: 2px solid var(--ink); }
.reel .strip { display: flex; flex-direction: column; }
.reel .strip img { width: 100%; aspect-ratio: 1; padding: 6px; display: block; }
.lv-text { flex: 1; min-width: 0; }
.lv-name { font-size: 16px; }
.lv-desc { font-size: 13px; font-weight: 500; line-height: 1.45; color: #f4e8c8; }
.lv-card .lv-badge { position: absolute; top: -6px; right: 0; font-size: 11px; padding: 1px 8px; border-radius: 10px; border: 2px solid var(--ink); background: var(--gold); color: var(--ink); }
.lv-card .lv-badge.new { background: var(--red); color: #fff; }
.lv-card .lv-badge.sp { background: linear-gradient(90deg, #ff7a9a, #ffd23a, #4ac8ff); }
.lv-text.spin .lv-name, .lv-text.spin .lv-desc { opacity: .35; }
.lv-build { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; margin-top: 12px; }
.lv-build span { display: flex; align-items: center; gap: 2px; font-size: 11px; background: #2a1c14cc; border: 2px solid var(--ink); border-radius: 6px; padding: 1px 6px 1px 2px; color: #fff; }
.lv-build img { width: 18px; height: 18px; }

/* ===== ロード画面 ===== */
#loading { position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column; background: #382810; }
.load-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; background: linear-gradient(#3a3020 0 25%, #382810 25%); }
#load-cv { width: 256px; height: 160px; }
.load-text { font-size: 20px; margin-top: 4px; letter-spacing: 1px; }
.load-tip { font-size: 12px; color: var(--muted); font-weight: 500; margin-top: 18px; padding: 0 30px; text-align: center; line-height: 1.6; max-width: 360px; }

/* ===== まとめて強化 ===== */
.bu-lv { display: flex; align-items: center; justify-content: center; gap: 10px; font-weight: 800; margin: 2px 0 8px; }
.bu-from { font-size: 18px; color: #6a5a48; }
.bu-arrow { color: #e8405e; font-size: 14px; }
.bu-to { font-size: 26px; color: #fff; }
.bu-range { width: 100%; -webkit-appearance: none; appearance: none; height: 16px; border: 3px solid var(--ink); border-radius: 10px; background: linear-gradient(#2a1c14, #4a3326); outline: none; margin: 4px 0 10px; }
.bu-range::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(#ffe27a, #e8a82a); border: 3px solid var(--ink); box-shadow: 0 2px 0 var(--ink); }
.bu-range::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: #ffd23a; border: 3px solid var(--ink); }
.bu-quick { display: flex; gap: 5px; flex-wrap: wrap; justify-content: center; }
.bu-quick .btn { flex: 1; min-width: 52px; padding-left: 4px; padding-right: 4px; }
.bu-stats { margin: 12px 0 6px; padding: 6px 10px; background: #fff8; border: 2px solid #c8b48a; border-radius: 8px; }
.bu-stats div { display: grid; grid-template-columns: 1fr auto 18px auto; align-items: center; gap: 6px; font-size: 14px; }
.bu-stats i { font-style: normal; color: #e8405e; font-size: 10px; text-align: center; }
.bu-stats .up { color: #1f8a3a; }
.bu-cost { display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 14px; flex-wrap: wrap; }
.bu-cost img { width: 20px; height: 20px; }
.bu-cost b { font-size: 18px; }
.bu-cost b.short { color: #d81a3a; }
.bu-cost small { color: #6a5a48; }

/* ===== タイトル画面 ===== */
#title { position: fixed; inset: 0; z-index: 85; overflow: hidden; background: #241a4a; cursor: pointer; container-type: size;
  -webkit-tap-highlight-color: transparent; outline: none; touch-action: manipulation; }
#title.hidden { display: none; }
.title-blur { position: absolute; inset: -8%; background: url(../img/title-blur.jpg) center / cover no-repeat; filter: saturate(1.2) brightness(.75); }
/* 絵の縦横比のまま、画面に合わせて拡大（左右は少しだけはみ出してよい） */
.title-stage { position: absolute; left: 50%; top: 50%; aspect-ratio: 940 / 1672;
  width: min(100%, 56.2vh); transform: translate(-50%, -50%);
  width: min(1.1 * min(100cqw, 56.22cqh), max(100cqw, 56.22cqh)); }
.title-img { display: block; width: 100%; height: 100%; image-rendering: auto; animation: titleIn .7s cubic-bezier(.2, .9, .3, 1.2) both; user-select: none; -webkit-user-drag: none; pointer-events: none; }
@keyframes titleIn { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: none; } }
/* 絵の中の「TAP TO START」に重ねて光らせる */
.title-btn { position: absolute; left: 20.6%; top: 87.75%; width: 57.6%; height: 5.25%; pointer-events: none; overflow: hidden;
  clip-path: polygon(3% 0, 97% 0, 100% 50%, 97% 100%, 3% 100%, 0 50%); animation: titleBtn 1.3s ease-in-out .7s infinite; }
@keyframes titleBtn { 0%, 100% { background: #fff0; } 50% { background: #ffffff38; } }
.title-shine { position: absolute; top: -20%; bottom: -20%; left: -30%; width: 18%; background: linear-gradient(90deg, #fff0, #ffffffb0, #fff0); transform: skewX(-20deg); animation: titleShine 2.6s ease-in-out 1s infinite; }
@keyframes titleShine { 0% { left: -30%; } 45%, 100% { left: 130%; } }
#title.go .title-btn { animation: none; background: #fff8; }
.title-ver { position: absolute; right: calc(10px + var(--safe-r, 0px)); bottom: calc(6px + var(--safe-b)); font-size: 11px; color: #fff; opacity: .8; }
.title-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
#title.go .title-flash { animation: titleFlash .55s ease-out forwards; }
@keyframes titleFlash { 0% { opacity: 0; } 25% { opacity: .85; } 100% { opacity: 0; } }
#title.out { animation: titleOut .45s ease-in forwards; pointer-events: none; }
@keyframes titleOut { to { opacity: 0; transform: scale(1.04); } }

/* ===== トースト ===== */
#toast { position: fixed; left: 50%; bottom: calc(100px + var(--safe-b)); transform: translateX(-50%); z-index: 90; display: flex; flex-direction: column; gap: 6px; align-items: center; pointer-events: none; }
#toast div { background: var(--cream); color: var(--ink); border: 3px solid var(--ink); border-radius: 10px; padding: 7px 14px; font-size: 14px; animation: toast 2.6s forwards; max-width: 88vw; text-align: center; box-shadow: 0 3px 0 var(--ink); }
@keyframes toast { 0% { opacity: 0; transform: translateY(10px); } 10%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; } }

@media (min-width: 700px) {
  .equip-center img { max-width: 180px; }
}

/* ===== 音量バー ===== */
.vol-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.vol-row .vl { width: 52px; font-size: 14px; }
.vol-row .vv { width: 34px; text-align: right; font-size: 14px; color: var(--gold); }
.vol-row input[type=range] { flex: 1; -webkit-appearance: none; appearance: none; height: 16px; border: 3px solid var(--ink); border-radius: 10px; background: linear-gradient(#2a1c14, #4a3326); outline: none; }
.vol-row input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(#fff6dc, #e4d4ae); border: 3px solid var(--ink); box-shadow: 0 2px 0 var(--ink); }
.vol-row input[type=range]::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: #f4e8c8; border: 3px solid var(--ink); }
.sel { font-family: inherit; font-weight: 800; font-size: 13px; padding: 6px 8px; border: 3px solid var(--ink); border-radius: 8px; background: var(--cream); color: var(--ink); }

.pause-vol { margin-top: 12px; padding: 4px 12px; background: #2a1c14; border: 3px solid var(--ink); border-radius: 10px; color: #fff; }
.pause-vol .vl { color: #fff; }

/* ===== ステージのロック ===== */
.stage-ribbon.locked { background: linear-gradient(#7a6a5a, #4a3e34); box-shadow: inset 0 -3px 0 #2e241c; }
.stage-ribbon img { width: 22px; height: 22px; }
.stage-lock { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; pointer-events: none; font-size: 15px; }
.stage-lock img { width: 56px; height: 56px; filter: drop-shadow(0 3px 0 #0008); }
.btn-start.locked { background: linear-gradient(#8a7a66, #5e5244); color: #d8c8a8; box-shadow: inset 0 -4px 0 #3e342a, 0 3px 0 var(--ink); filter: none; opacity: 1; letter-spacing: 2px; font-size: 22px; }
.btn-start.locked img { width: 26px; height: 26px; vertical-align: -5px; }
.stage-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; max-height: 55vh; overflow-y: auto; padding: 2px; }
.stile { position: relative; aspect-ratio: 1; padding: 0; border: 3px solid var(--ink); border-radius: 6px; background: linear-gradient(var(--bc), var(--bd)); box-shadow: 0 2px 0 var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.stile .sn { font-size: 18px; }
.stile .sb { font-size: 8px; color: #fff; text-shadow: 0 1px 0 #000; }
.stile.lock { filter: grayscale(.75) brightness(.7); }
.stile .lk { position: absolute; width: 22px; height: 22px; bottom: 2px; right: 2px; filter: none; }
.stile .ck { position: absolute; top: 0; right: 4px; font-size: 13px; color: #7aff8a; }
.stile.sel { box-shadow: 0 0 0 3px #ffe27a, 0 2px 0 var(--ink); }

/* ===== ホームのアイコンボタン ===== */
.home-icons { display: flex; gap: 8px; justify-content: space-between; margin: 2px 0 6px; }
.hicon {
  position: relative; flex: 1; height: 62px; padding: 4px 0 2px; border: 3px solid var(--ink); border-radius: 10px;
  background: linear-gradient(#5a4232, #3a2a20); box-shadow: inset 0 0 0 2px #3fb6aa88, 0 3px 0 var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 1px; font-size: 11px;
}
.hicon img { height: 32px; width: auto; }
.hicon:active { transform: translateY(2px); box-shadow: inset 0 0 0 2px #3fb6aa88, 0 1px 0 var(--ink); }
.hbadge { position: absolute; top: -7px; right: -5px; min-width: 20px; height: 20px; padding: 0 4px; border-radius: 10px; background: var(--red); border: 2px solid var(--ink); color: #fff; font-size: 11px; font-style: normal; line-height: 16px; text-align: center; }

/* キャラ：覚醒・★5 */
.awk { margin-left: 6px; font-size: 11px; padding: 1px 6px; border-radius: 8px; background: var(--red); color: #fff; vertical-align: 2px; }
.ctile .pct { top: auto; bottom: 1px; left: 3px; right: auto; font-size: 11px; color: #ffe27a; }
.ctile .star5 { position: absolute; inset: 0; pointer-events: none; border-radius: 3px; box-shadow: inset 0 0 0 2px #ffe27a, inset 0 0 12px #ffd23a88; }

/* ===== ガチャ ===== */
.gbanner {
  position: relative; height: 170px; margin: 8px 0; border: 3px solid var(--ink); border-radius: 8px; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 10px;
  box-shadow: inset 0 0 0 3px #ffe27a, 0 3px 0 var(--ink);
}
.gbanner.char { background: radial-gradient(ellipse at 50% 40%, #fff6c8 0, #ffb84a 35%, #c8406a 75%, #5a1a4a 100%); }
.gbanner.equip { background: radial-gradient(ellipse at 50% 40%, #e8f8ff 0, #6ac8ff 35%, #3a5ac8 75%, #1a1a5a 100%); }
.gbanner::before { content: ''; position: absolute; left: 50%; top: 45%; width: 260%; aspect-ratio: 1; background: repeating-conic-gradient(from 0deg, #ffffff26 0 8deg, transparent 8deg 20deg); transform: translate(-50%, -50%); animation: spinC 14s linear infinite; pointer-events: none; }
@keyframes spinC { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes spin { to { transform: rotate(360deg); } }
.gb-chars, .gb-items { position: absolute; top: 12px; left: 0; right: 0; display: flex; justify-content: center; gap: 2px; }
.gb-chars img { width: 25%; max-width: 92px; animation: bob 1.4s steps(2) infinite; filter: drop-shadow(0 4px 0 #0004); }
.gb-chars img:nth-child(2) { animation-delay: .35s; } .gb-chars img:nth-child(3) { animation-delay: .7s; }
.gb-items { top: 0; bottom: 40px; align-items: center; gap: 3%; }
.gb-items img { width: 14%; max-width: 64px; animation: bob 1.6s steps(2) infinite; filter: drop-shadow(0 0 6px #ffffffb0) drop-shadow(0 4px 0 #0004); }
/* 真ん中を大きく・両端を少し下げて、弧を描くように並べる */
.gb-items img:nth-child(1), .gb-items img:nth-child(5) { margin-top: 18px; }
.gb-items img:nth-child(2), .gb-items img:nth-child(4) { margin-top: 6px; animation-delay: .4s; }
.gb-items img:nth-child(3) { width: 18%; max-width: 84px; animation-delay: .8s; }
.gb-title { position: relative; font-size: 20px; }
.gb-names { position: relative; font-size: 12px; }
.gpay { display: flex; align-items: center; gap: 6px; margin: 10px 0 6px; font-size: 14px; }
.gpay img { width: 24px; height: 24px; }
.gpay .own { font-size: 12px; color: var(--gold); }
.btn small { display: block; font-size: 11px; font-weight: 500; }
.btn > small { display: block; font-size: 11px; opacity: .9; }
.gacha-result.chars { grid-template-columns: repeat(5, 1fr); }
.ctile.res { animation: none; }
.ctile.res.s5 { box-shadow: 0 0 0 3px #ffe27a, 0 0 12px #ffd23a; }
.ctile.res.s4 { box-shadow: 0 0 0 2px #c45cff; }
.ctile .rs { position: absolute; top: 1px; left: 0; right: 0; text-align: center; font-size: 8px; color: #ffd23a; letter-spacing: -1px; }
.ctile .rn { position: absolute; bottom: 1px; left: 0; right: 0; text-align: center; font-size: 9px; }
.ctile .rnew { font-size: 9px; background: var(--red); color: #fff; padding: 0 3px; border-radius: 3px; border: 1px solid var(--ink); text-shadow: none; font-weight: 800; }


/* ガチャ演出 */
.greveal { position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(circle, #2a1a3a, #0a0610); animation: fade .2s; }
.gorb { width: 90px; height: 90px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff, #9ad0ff 40%, #3a5ac8); box-shadow: 0 0 40px #9ad0ff; animation: orb 1.2s ease-in forwards; }
.greveal.g4 .gorb { background: radial-gradient(circle at 40% 35%, #fff, #ffe27a 40%, #e0a020); box-shadow: 0 0 50px #ffd23a; }
.greveal.g5 .gorb { background: conic-gradient(#ff7a9a, #ffd23a, #6ae86a, #4ac8ff, #c45cff, #ff7a9a); box-shadow: 0 0 70px #fff; animation: orb 1.2s ease-in forwards, spin .6s linear infinite; }
@keyframes orb { 0% { transform: scale(.2); } 70% { transform: scale(1); } 85% { transform: scale(1.4); } 100% { transform: scale(8); opacity: 0; } }
.gtext { margin-top: 28px; font-size: 18px; animation: blink .8s steps(2) infinite; }

/* ===== プレゼント・ミッション・ログボ ===== */
.plist, .mlist { display: flex; flex-direction: column; gap: 6px; max-height: 52vh; overflow-y: auto; }
.prow, .mrow { display: flex; align-items: center; gap: 8px; padding: 8px; background: #fff8; border: 3px solid var(--ink); border-radius: 8px; }
.pic { width: 34px; height: 34px; flex-shrink: 0; }
.pinfo, .minfo { flex: 1; min-width: 0; font-size: 13px; font-weight: 800; }
.pdate { font-size: 10px; color: #8a7050; font-weight: 500; }
.prw { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.rw { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; }
.rw img { width: 20px; height: 20px; }
.mtabs { display: flex; gap: 4px; }
.mtabs .btn { flex: 1; position: relative; font-size: 12px; padding: 6px 2px; white-space: nowrap; }
.mtabs .btn.active { background: linear-gradient(#ff5a80, #d8204c); color: #fff; box-shadow: inset 0 -4px 0 var(--red-d), 0 3px 0 var(--ink); }
.mbar { position: relative; height: 14px; margin: 4px 0 2px; background: #2a1c14; border: 2px solid var(--ink); border-radius: 7px; overflow: hidden; }
.mbar div { height: 100%; background: linear-gradient(#7aff8a, #2ab83a); }
.mbar span { position: absolute; inset: 0; text-align: center; font-size: 10px; line-height: 10px; color: #fff; text-shadow: 0 1px 0 #000; }
.mrow.claimed { opacity: .55; }
.mdone { font-size: 12px; color: #8a7050; }
.lgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.lcell { position: relative; padding: 6px 2px; text-align: center; background: #fff8; border: 3px solid var(--ink); border-radius: 8px; min-height: 74px; }
.lcell:last-child { grid-column: span 2; background: linear-gradient(#fff6c8, #ffd86a); }
.lcell .lday { font-size: 11px; }
.lcell .prw { justify-content: center; }
.lcell.got { background: #d8c8a8; }
.lcell.today { box-shadow: 0 0 0 3px var(--red); animation: pop .4s steps(4); }
.lstamp { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 28px; color: #ff4f6d; transform: rotate(-15deg); }

/* ===== ヘッダーのプロフィール ===== */
.me { display: flex; align-items: center; gap: 6px; padding: 0; background: none; border: 0; flex-shrink: 0; max-width: 42%; text-align: left; }
.me-info { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.me-name { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 96px; }
.me-rank { display: flex; align-items: center; gap: 4px; font-size: 13px; }
.me-rank b { font-size: 10px; color: #ffe27a; font-weight: 800; }
.me-exp { display: inline-block; width: 40px; height: 6px; background: #2a1c14; border: 2px solid var(--ink); border-radius: 4px; overflow: hidden; }
.me-exp i { display: block; height: 100%; width: 0; background: linear-gradient(#7ae8ff, #2a9ad8); transition: width .6s var(--ease-out); }
.topbar .pill { min-width: 0; padding: 0 8px 0 3px; font-size: 14px; }
.topbar .pill img { width: 22px; height: 22px; }

/* ===== アバター（アイコン＋フレーム） ===== */
.av { --s: 48px; position: relative; display: inline-block; width: var(--s); height: var(--s); flex-shrink: 0; border-radius: 22%; padding: calc(var(--s) * .09); }
.av img { display: block; width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; border-radius: 16%; background: radial-gradient(circle at 50% 70%, #fff6dc, var(--cbg, #6a8a9a)); }
.av::before, .av::after { content: ''; position: absolute; pointer-events: none; }
.fr-basic { background: var(--cream); box-shadow: 0 0 0 3px var(--ink); }
.fr-wood { background: repeating-linear-gradient(45deg, #9a6a3a 0 4px, #7a4a24 4px 8px); box-shadow: 0 0 0 3px var(--ink), inset 0 0 0 2px #c8945a; }
.fr-teal { background: linear-gradient(135deg, #8af4e8, #2a9a8e); box-shadow: 0 0 0 3px var(--ink), inset 0 0 0 2px #d8fff8; }
.fr-silver { background: linear-gradient(135deg, #ffffff, #a8b0c4 40%, #e8ecf4 60%, #7a8298); box-shadow: 0 0 0 3px var(--ink); }
.fr-gold { background: linear-gradient(135deg, #fff4a8, #e0a822 40%, #ffe27a 60%, #a8740c); box-shadow: 0 0 0 3px var(--ink), 0 0 8px #ffd23a88; }
.fr-gold::before { width: 22%; height: 22%; top: -8%; left: 39%; background: #ff3b5c; border: 2px solid var(--ink); transform: rotate(45deg); }
.fr-sakura { background: linear-gradient(135deg, #ffd6e8, #ff8ac4); box-shadow: 0 0 0 3px var(--ink); }
.fr-sakura::before, .fr-sakura::after { content: '✿'; font-size: calc(var(--s) * .32); color: #fff; text-shadow: 0 0 0 #ff5fa8, 1px 1px 0 #c83a7a; line-height: 1; }
.fr-sakura::before { top: -10%; left: -8%; } .fr-sakura::after { bottom: -10%; right: -8%; }
.fr-ice { background: linear-gradient(135deg, #f4fdff, #9fe6ff 50%, #4ab0e8); box-shadow: 0 0 0 3px var(--ink), 0 0 8px #9fe6ffaa; }
.fr-ice::before { content: '❄'; font-size: calc(var(--s) * .3); top: -12%; right: -6%; color: #fff; text-shadow: 1px 1px 0 #2a78b8; line-height: 1; }
.fr-heart { background: linear-gradient(135deg, #ff9ab8, #e0306a); box-shadow: 0 0 0 3px var(--ink); }
.fr-heart::before { content: '♥'; font-size: calc(var(--s) * .34); bottom: -14%; left: 50%; transform: translateX(-50%); color: #ff3b6a; text-shadow: 1px 0 0 var(--ink), -1px 0 0 var(--ink), 0 1px 0 var(--ink), 0 -1px 0 var(--ink); line-height: 1; }
.fr-cyber { background: #10142a; box-shadow: 0 0 0 3px var(--ink), inset 0 0 0 2px #36f2ff, 0 0 10px #36f2ff; animation: cyberPulse 1.8s ease-in-out infinite; }
@keyframes cyberPulse { 50% { box-shadow: 0 0 0 3px var(--ink), inset 0 0 0 2px #ff5fd0, 0 0 14px #ff5fd0; } }
.fr-flame { background: conic-gradient(from var(--a, 0deg), #ff3b1a, #ffd23a, #ff6a1a, #c4103c, #ff3b1a); box-shadow: 0 0 0 3px var(--ink), 0 0 10px #ff6a1a; animation: frameSpin 2.4s linear infinite; }
.fr-royal { background: linear-gradient(135deg, #b07aff, #4a1a8a); box-shadow: 0 0 0 3px var(--ink), inset 0 0 0 3px #ffd23a; }
.fr-royal::before { width: 26%; height: 18%; top: -10%; left: 37%; background: linear-gradient(#ffe27a, #e0a822); border: 2px solid var(--ink); clip-path: polygon(0 100%, 0 20%, 25% 60%, 50% 0, 75% 60%, 100% 20%, 100% 100%); }
.fr-star { background: linear-gradient(135deg, #fff6c8, #ffd23a); box-shadow: 0 0 0 3px var(--ink); }
.fr-star::before, .fr-star::after { content: '★'; font-size: calc(var(--s) * .3); color: #ffd23a; text-shadow: 1px 0 0 var(--ink), -1px 0 0 var(--ink), 0 1px 0 var(--ink), 0 -1px 0 var(--ink); line-height: 1; }
.fr-star::before { top: -12%; left: -8%; } .fr-star::after { bottom: -12%; right: -8%; }
.fr-rainbow { background: conic-gradient(from var(--a, 0deg), #ff7a9a, #ffd23a, #6ae86a, #4ac8ff, #c45cff, #ff7a9a); box-shadow: 0 0 0 3px var(--ink), 0 0 12px #fff8; animation: frameSpin 3s linear infinite; }
@property --a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes frameSpin { to { --a: 360deg; } }

/* プロフィール画面 */
.modal.wide { max-width: 460px; }
.prof-head { display: flex; gap: 12px; align-items: center; }
.prof-info { flex: 1; min-width: 0; }
.prof-name { font-size: 18px; }
.prof-rank b { font-size: 20px; color: var(--red-d); }
.name-edit { display: flex; gap: 6px; margin-top: 10px; }
.name-edit input { flex: 1; min-width: 0; font-family: inherit; font-weight: 800; font-size: 15px; padding: 8px 10px; border: 3px solid var(--ink); border-radius: 8px; background: #fff; color: var(--ink); -webkit-user-select: text; user-select: text; }
.pick-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 8px; max-height: 40vh; overflow-y: auto; padding: 6px 4px; }
.pick { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 2px; background: #fff6; border: 3px solid transparent; border-radius: 10px; color: var(--ink); }
.pick.sel { border-color: var(--red); background: #fff; }
.pick.lock { opacity: .5; filter: grayscale(.9); }
.pick .pn { font-size: 10px; line-height: 1.2; text-align: center; }

/* ランクアップ */
.modal.rankup { text-align: center; position: relative; overflow: hidden; }
.ru-burst { position: absolute; left: 50%; top: 40%; width: 240%; aspect-ratio: 1; background: repeating-conic-gradient(from 0deg, #ffd23a33 0 10deg, transparent 10deg 24deg); transform: translate(-50%, -50%); animation: spinC 8s linear infinite; pointer-events: none; }
.ru-title { position: relative; font-size: 34px; color: #ffd23a; letter-spacing: 3px; animation: ruPop .6s var(--spring) both; }
@keyframes ruPop { from { transform: scale(2.2); opacity: 0; } }
.ru-lv { position: relative; display: flex; justify-content: center; align-items: center; gap: 12px; font-size: 22px; margin: 6px 0 10px; }
.ru-lv span:last-child { font-size: 40px; color: #ffe27a; animation: ruPop .6s .2s var(--spring) both; }
.ru-rewards { position: relative; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.reward.new { flex-direction: column; font-size: 11px; line-height: 1.3; animation: rise .4s .4s var(--ease-out) both; }

/* =====================================================================
   UIアニメーション（namethatui.com のパターンを参考に）
   Spring / Scrim / Tabs / Scroll Reveal(段差表示) / Toast / Badge /
   Progress Bar / Text Shimmer / Marquee / Hover Lift
   ===================================================================== */
:root { --spring: cubic-bezier(.34, 1.56, .64, 1); --ease-out: cubic-bezier(.2, .8, .2, 1); }

/* Scrim（背景を暗く・ぼかす）＋ Spring で開くダイアログ */
#modal-root .overlay { animation: scrimIn .22s ease-out both; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
@keyframes scrimIn { from { background: rgba(20,10,8,0); backdrop-filter: blur(0); } }
.modal { animation: modalIn .42s var(--spring) both; }
@keyframes modalIn { from { transform: translateY(24px) scale(.88); opacity: 0; } }
.overlay.closing { animation: scrimOut .16s ease-in forwards; }
.overlay.closing .modal { animation: modalOut .16s ease-in forwards; }
@keyframes scrimOut { to { opacity: 0; } }
@keyframes modalOut { to { transform: scale(.94); opacity: 0; } }

/* Tabs：切り替えたときに中身がスライドして入る */
#tab-content.tab-in-r { animation: tabInR .32s var(--ease-out); }
#tab-content.tab-in-l { animation: tabInL .32s var(--ease-out); }
@keyframes tabInR { from { transform: translateX(28px); opacity: 0; } }
@keyframes tabInL { from { transform: translateX(-28px); opacity: 0; } }

/* Scroll Reveal（段差表示）：一覧が少しずつ順番に現れる */
.reveal > * { animation: rise .38s var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 28ms); }
@keyframes rise { from { transform: translateY(14px) scale(.96); opacity: 0; } }

/* ボタン：押すとへこみ、離すとバネで戻る */
.btn, .tabbar button, .hicon, .itile, .ctile, .chip, .pick, .stile, .arrow-btn, .stage-arrow { transition: transform .28s var(--spring), filter .15s, box-shadow .15s; }
.btn:active:not(:disabled), .hicon:active, .itile:active, .ctile:active, .chip:active, .pick:active { transform: translateY(2px) scale(.96); transition-duration: .06s; }
@media (hover: hover) {
  .btn:hover:not(:disabled), .hicon:hover, .itile:hover, .ctile:hover, .pick:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.06); }
}
.tabbar button.active img { animation: tabPop .45s var(--spring); }
@keyframes tabPop { 0% { transform: scale(.6) translateY(4px); } 100% { transform: none; } }

/* Badge：未受け取りがあるときにふわっと脈打つ */
.hbadge, .dot-badge, .chip .badge { animation: badgePulse 1.6s ease-in-out infinite; }
@keyframes badgePulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }

/* 所持数が増えたときに数字がはねる（カウントアップと併用） */
.pill.bump { animation: bump .45s var(--spring); }
@keyframes bump { 30% { transform: scale(1.12); } }

/* Toast：上からバネで降りてきて消える */
#toast { top: calc(84px + var(--safe-t)); bottom: auto; }
#toast div { animation: toastIn 2.8s var(--spring) forwards; }
@keyframes toastIn {
  0% { opacity: 0; transform: translateY(-24px) scale(.9); }
  10%, 86% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(-12px); }
}

/* Progress Bar：開いたときに0からのびる */
.mbar div, .roombar .fill, .expbar .fill { transition: width .5s var(--ease-out); }
.reveal .mbar div { animation: grow .8s var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 28ms + .15s); }
@keyframes grow { from { width: 0 !important; } }

/* Text Shimmer（光が横切る）：出撃ボタン・ガチャのバナー */
.btn-start, .gbanner, .btn.red.shine { overflow: hidden; }
.btn-start::after, .gbanner::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; pointer-events: none;
  background: linear-gradient(100deg, transparent, #ffffff66, transparent); transform: skewX(-18deg);
  animation: sweep 3.2s ease-in-out infinite;
}
@keyframes sweep { 0%, 55% { left: -60%; } 100% { left: 130%; } }
.btn-start:disabled::after { display: none; }

/* Marquee（お知らせが横に流れる） */
.ticker { position: relative; overflow: hidden; height: 26px; margin: 0 0 6px; border: 3px solid var(--ink); border-radius: 13px; background: #2a1c14cc; box-shadow: inset 0 0 0 2px #3fb6aa66; }
.ticker::before { content: 'NEWS'; position: absolute; left: 0; top: 0; bottom: 0; z-index: 1; display: flex; align-items: center; padding: 0 8px; font-size: 11px; color: var(--ink); background: var(--gold); border-right: 3px solid var(--ink); }
.ticker .track { position: absolute; top: 0; bottom: 0; left: 0; display: flex; align-items: center; gap: 48px; white-space: nowrap; font-size: 12px; color: #fff; padding-left: 100%; animation: marquee var(--dur, 18s) linear infinite; }
@keyframes marquee { to { transform: translateX(-100%); } }

/* ホームのステージカード：切り替え時にふわっと */
.stage-view canvas { animation: fadeZoom .35s var(--ease-out); }
@keyframes fadeZoom { from { opacity: .3; transform: scale(1.04); } }

/* 動きを減らす設定の人には控えめに */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

.overlay.still, .overlay.still .modal { animation: none; }

/* ガチャ結果：名前を各タイルの下に読みやすく */
.gacha-result { align-items: start; }
.gres { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; }
.gres .itile, .gres .ctile { width: 100%; }
.gname { width: 100%; font-size: 10px; line-height: 1.25; text-align: center; color: var(--ink); font-weight: 800; word-break: break-all; }
.gname.r-R { color: #1d5fa8; } .gname.r-SR { color: #7a2bc0; } .gname.r-SSR { color: #b07a10; }

/* ===== ガチャ演出（宝箱→卵） ===== */
.gfx { position: fixed; inset: 0; z-index: 75; overflow: hidden; background: radial-gradient(ellipse at 50% 55%, #3a2a4a 0, #140a1c 70%); touch-action: manipulation; }
.gfx-N { --gc: #fff4d8; } .gfx-R { --gc: #8ad0ff; } .gfx-SR { --gc: #d8a0ff; } .gfx-SSR { --gc: #ffe27a; }
.gfx[data-r="N"] { --gc: #fff4d8; } .gfx[data-r="R"] { --gc: #8ad0ff; } .gfx[data-r="SR"] { --gc: #d8a0ff; } .gfx[data-r="SSR"] { --gc: #ffe27a; }
/* 集中線：画面より大きい正方形を中心で回す（端が切れない） */
.gfx-rays { position: absolute; left: 50%; top: 52%; width: 125vmax; height: 125vmax; border-radius: 50%; will-change: transform; transform: translate(-50%, -50%); opacity: .25; transition: opacity .4s, background .4s;
  background: repeating-conic-gradient(from 0deg, var(--gc) 0 6deg, transparent 6deg 18deg); animation: spinC 18s linear infinite; pointer-events: none; }
.gfx.opened .gfx-rays { opacity: .45; animation-duration: 9s; }
.gfx-SSR.opened .gfx-rays { background: repeating-conic-gradient(from 0deg, #ff7a9a 0 6deg, transparent 6deg 12deg, #ffd23a 12deg 18deg, transparent 18deg 24deg, #4ac8ff 24deg 30deg, transparent 30deg 36deg); opacity: .5; }
.gfx-floor { position: absolute; left: 50%; top: calc(52% + 70px); width: 240px; height: 40px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(ellipse, #0008, transparent 70%); opacity: 0; }
.gfx-stage { position: absolute; left: 50%; top: 52%; width: 0; height: 0; }
.gfx-chest { position: absolute; width: 208px; left: -104px; top: -60px; image-rendering: pixelated; }
.gfx-egg { position: absolute; width: 140px; height: 170px; left: -70px; top: -100px; }
.gfx-egg img { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; transform-origin: 50% 90%; }
.gfx-egg.r-SR img.whole { filter: drop-shadow(0 0 10px #d8a0ff); }
.gfx-egg.r-SSR img.whole { filter: drop-shadow(0 0 14px #ffe27a) drop-shadow(0 0 4px #fff); }
.gfx-card { position: absolute; width: 220px; left: -110px; top: -130px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.gfx-card-rays { position: absolute; left: 50%; top: 70px; width: 340px; height: 340px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, var(--gc) 0, transparent 62%); opacity: .55; pointer-events: none; }
.gfx-card.r-N .gfx-card-rays { opacity: .25; }
.gfx-item { position: relative; width: 140px; height: 140px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 6px 0 #0006); }
.gfx-rar { position: relative; margin-top: 6px; font-size: 26px; letter-spacing: 2px; }
.gfx-card.r-R .gfx-rar { color: #8ad0ff; } .gfx-card.r-SR .gfx-rar { color: #e0b0ff; }
.gfx-card.r-SSR .gfx-rar { background: linear-gradient(90deg, #ff7a9a, #ffd23a, #6ae86a, #4ac8ff, #c45cff); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 2px 0 #2a1810) drop-shadow(0 0 6px #fff8); }
.gfx-name { position: relative; font-size: 18px; margin-top: 2px; }
.gfx-sub { position: relative; margin-top: 4px; font-size: 12px; padding: 2px 10px; border-radius: 10px; background: var(--red); border: 2px solid var(--ink); color: #fff; }
.gfx-p { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; pointer-events: none; }
.gfx-flash { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.gfx-skip { position: absolute; top: calc(16px + var(--safe-t)); right: 12px; z-index: 2; font-family: inherit; font-weight: 800; font-size: 13px; padding: 7px 12px; border: 3px solid var(--ink); border-radius: 16px; background: var(--cream); color: var(--ink); box-shadow: 0 3px 0 var(--ink); }
.gfx-count { position: absolute; top: calc(22px + var(--safe-t)); left: 16px; font-size: 18px; }
.gfx-hint { position: absolute; left: 0; right: 0; bottom: calc(40px + var(--safe-b)); text-align: center; font-size: 14px; opacity: .8; animation: blink 1.2s steps(2) infinite; }

.gfx-beam { position: absolute; left: 0; bottom: 20px; width: 150px; height: 70vh; transform-origin: 50% 100%; pointer-events: none;
  background: linear-gradient(to top, var(--gc), transparent 85%); filter: blur(6px); opacity: 0; }
.gfx-SSR .gfx-beam { background: linear-gradient(to top, #fffbe8, #ffe27a 30%, transparent 85%); }

/* =====================================================================
   画面サイズ・安全領域（ノッチ／ダイナミックアイランド／ホームバー）対応
   iPhone・iPad・Android・PC のどれでも見やすくなるように調整
   ===================================================================== */
:root {
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  /* 端末の画面の高さ（アドレスバーの出入りに追従） */
  --app-h: 100dvh;
  /* 画面の幅に合わせて文字とUIを少しだけ拡大縮小 */
  --ui: clamp(0.88, calc(100vw / 400px), 1.12);
}
@supports not (height: 100dvh) { :root { --app-h: 100vh; } }
html { font-size: calc(15px * var(--ui)); }
body { font-size: 1rem; }
#app { height: var(--app-h); padding-left: var(--safe-l); padding-right: var(--safe-r); }

/* ダイアログ：上下の安全領域を避け、ボタンは常に下に表示（中身だけスクロール） */
#modal-root .overlay {
  padding: calc(12px + var(--safe-t)) calc(12px + var(--safe-r)) calc(12px + var(--safe-b)) calc(12px + var(--safe-l));
  align-items: center;
}
.modal {
  display: flex; flex-direction: column; overflow: hidden;
  max-height: calc(var(--app-h) - var(--safe-t) - var(--safe-b) - 24px);
}
.modal > h2 { flex-shrink: 0; }
.modal .mbody { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding-right: 2px; }
.modal .mbtns { flex-shrink: 0; margin-top: 10px; padding-top: 10px; border-top: 2px dotted #c8b48a88; }
/* 中で独自にスクロールしていた一覧は、外側のスクロールに任せる */
.modal .plist, .modal .mlist, .modal .pick-grid, .modal .stage-grid { max-height: none; overflow: visible; }

/* ガチャ演出・ロード画面・レベルアップ：上下の安全領域を避ける */
.gfx-skip { top: calc(12px + var(--safe-t)); right: calc(12px + var(--safe-r)); }
.gfx-count { top: calc(18px + var(--safe-t)); left: calc(16px + var(--safe-l)); }
#levelup { padding: calc(12px + var(--safe-t)) calc(12px + var(--safe-r)) calc(12px + var(--safe-b)) calc(12px + var(--safe-l)); overflow-y: auto; }
.round-btn { right: calc(8px + var(--safe-r)); }
.hud-left { left: var(--safe-l); }

/* ===== 小さい画面（iPhone SE・小型Android） ===== */
@media (max-height: 700px) {
  .tabbar button { height: 56px; }
  .tabbar button img { height: 28px; }
  .home-icons .hicon { height: 54px; }
  .hicon img { height: 26px; }
  .btn-start { font-size: 24px; padding: 9px 0 11px; }
  .lv-card { min-height: 80px; }
  .reel-frame { width: 58px; height: 58px; }
}
@media (max-width: 350px) {
  .me-info { display: none; }
  .inv { grid-template-columns: repeat(4, 1fr); }
}

/* ===== タブレット・PC（横に広い画面）：メニューを中央に、読みやすい幅で ===== */
@media (min-width: 700px) {
  #menu > header, #menu > main, #menu > nav { max-width: 620px; }
  .modal { max-width: 520px; }
  .modal.wide { max-width: 600px; }
  .pick-grid { grid-template-columns: repeat(6, 1fr); }
  .inv { grid-template-columns: repeat(7, 1fr); }
  .gacha-result { grid-template-columns: repeat(10, 1fr); }
  .modal .gacha-result { grid-template-columns: repeat(5, 1fr); }
  .lv-cards { max-width: 560px; }
}
/* PC・iPad横向き：左右の余白に模様を見せ、中央にアプリを置く */
@media (min-width: 1000px) {
  #menu { background-size: 32px 32px; }
  #menu > main { padding-left: 16px; padding-right: 16px; }
  .equip-stage, .char-show { max-width: 560px; margin-left: auto; margin-right: auto; }
}
/* スマホ横向き（高さがとても低い）：HUDとレベルアップ画面を詰める */
@media (orientation: landscape) and (max-height: 500px) and (pointer: fine) {
  .hud-left { top: calc(8px + var(--safe-t)); transform: scale(.85); transform-origin: left top; }
  .hud-right { transform: scale(.85); transform-origin: right top; }
  #levelup { justify-content: flex-start; }
  .lv-cards { flex-direction: row; max-width: none; }
  .lv-card { flex: 1; min-height: 0; flex-direction: column; text-align: center; }
  .lv-title { font-size: 14px; margin-bottom: 6px; }
  .tabbar button { height: 48px; }
  .tabbar button img { height: 22px; }
}
/* マウスで操作する端末：ホバーで少し明るく、カーソルを指に */
@media (hover: hover) and (pointer: fine) {
  .itile, .ctile, .stile, .pick, .hicon, .log-row { cursor: pointer; }
}

/* お知らせ一覧（アコーディオン） */
.log-list { display: flex; flex-direction: column; gap: 6px; }
.log-item { background: #fff8; border: 3px solid var(--ink); border-radius: 8px; overflow: hidden; }
.log-row { width: 100%; display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 8px; padding: 10px; background: none; border: 0; text-align: left; color: var(--ink); font-size: 14px; }
.log-ver { font-size: 12px; color: #fff; background: var(--teal-d); padding: 1px 7px; border-radius: 8px; white-space: nowrap; }
.log-title { font-weight: 800; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.log-date { font-size: 11px; color: #8a7050; white-space: nowrap; }
.log-chev { font-style: normal; font-size: 18px; color: #8a7050; transition: transform .25s var(--spring); }
.log-row[aria-expanded="true"] .log-chev { transform: rotate(90deg); }
.log-row[aria-expanded="true"] .log-title { white-space: normal; }
.log-detail { padding: 0 12px 10px; border-top: 2px dotted #c8b48a88; animation: rise .25s var(--ease-out); }
.log-detail ul { margin: 8px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.6; font-weight: 500; }

/* ===== 大きい画面の自動拡大（--z は main.js の fitScreen が計算） ===== */
:root { --z: 1; }
#menu > header, #menu > main, #menu > nav { zoom: var(--z); }
#menu > main { min-height: 0; }
.modal { zoom: var(--z); max-height: calc((var(--app-h) - var(--safe-t) - var(--safe-b) - 24px) / var(--z)); }
#toast { zoom: var(--z); }
#levelup .lv-title, #levelup .lv-cards, #levelup .lv-build { zoom: var(--z); }
.load-body { zoom: var(--z); }
.gfx-stage, .gfx-skip, .gfx-count, .gfx-hint { zoom: var(--z); }
/* 戦闘のHUDはプレイ画面の近くに集める（PCで左右に離れすぎないように） */
.hud { left: 50%; right: auto; width: min(100%, calc(520px * var(--z))); transform: translateX(-50%); }
.hud > * { zoom: var(--z); }
/* 小さいiPhone（SEなど）：ステージの見本を低くして出撃ボタンまで1画面に収める */
@media (max-height: 700px) {
  .stage-view canvas { height: 128px; object-fit: cover; }
  .home-top { margin-bottom: 2px; }
  .ticker { height: 22px; margin-bottom: 4px; }
}

/* ===== スマホを横にしたとき：画面ごと回して縦のまま表示（main.js の applyPortraitLock） ===== */
#safe-probe { position: fixed; left: 0; top: 0; width: 0; height: 0; visibility: hidden; pointer-events: none;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); }
html.sideways, html.sideways body { background: #2a1810; }
html.sideways #app { padding-left: 0; padding-right: 0; }

/* =====================================================================
   横画面レイアウト（PC・iPad横向き）：左にメニュー、右に広い画面
   ===================================================================== */
html.wide #menu { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto; }
html.wide #menu > .band { grid-column: 1 / -1; }
html.wide #menu > header { grid-column: 1 / -1; grid-row: 2; max-width: calc(1180px / var(--z)); width: 100%; margin: 0 auto; }
html.wide #menu > nav { grid-column: 1; grid-row: 3; max-width: none; width: auto; margin: 0; }
html.wide #menu > main { grid-column: 2; grid-row: 3; max-width: calc(1080px / var(--z)); width: 100%; margin: 0 auto; padding: 8px 18px 18px; }
html.wide #menu > .band:last-child { grid-row: 4; }
/* 左のメニュー（縦並び） */
html.wide .tabbar { display: flex; flex-direction: column; gap: 10px; padding: 14px 10px; width: 132px; border-top: 0; border-right: 3px solid var(--ink); box-shadow: inset -3px 0 0 #8a6a4a; }
html.wide .tabbar button { height: 84px; font-size: 13px; }
html.wide .tabbar button img { height: 42px; }
html.wide .tabbar button.active { transform: translateX(4px); }

/* ホーム：左に大きくステージ、右に各ボタンと出撃 */
html.wide .tab-home { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); grid-template-areas: "stage ticker" "stage icons" "stage top" "stage start" "stage ."; grid-template-rows: auto auto auto auto 1fr; column-gap: 18px; align-items: start; }
html.wide .tab-home .ticker { grid-area: ticker; margin-top: 8px; }
html.wide .tab-home .home-icons { grid-area: icons; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
html.wide .tab-home .home-icons .hicon { height: 74px; }
html.wide .tab-home .home-top { grid-area: top; justify-content: flex-start; margin: 6px 0; }
html.wide .tab-home .stage-card { grid-area: stage; margin-top: 8px; }
html.wide .tab-home .btn-start { grid-area: start; font-size: 32px; padding: 18px 0 20px; margin-top: 6px; }

/* 装備：左にキャラと装備枠、右に所持品 */
html.wide .tab-party.sub-equip { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); grid-template-areas: "tabs tabs" "stage tools" "stage inv" "stage ."; grid-template-rows: auto auto auto 1fr; column-gap: 18px; align-items: start; }
html.wide .tab-party .subtabs { grid-area: tabs; max-width: 560px; }
html.wide .tab-party.sub-equip .equip-stage { grid-area: stage; }
html.wide .tab-party.sub-equip .inv-tools { grid-area: tools; margin-top: 8px; }
html.wide .tab-party.sub-equip .inv-tools + .panel { grid-area: inv; }
html.wide .tab-party.sub-equip .inv { grid-template-columns: repeat(6, 1fr); }
/* キャラ：左に大きく紹介、右に一覧とボタン */
html.wide .tab-party.sub-chars { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "tabs tabs" "show grid" "show act" "show ."; grid-template-rows: auto auto auto 1fr; column-gap: 18px; align-items: start; }
html.wide .tab-party.sub-chars .char-show { grid-area: show; min-height: 320px; }
html.wide .tab-party.sub-chars .char-grid { grid-area: grid; margin-top: 8px; }
html.wide .tab-party.sub-chars .char-actions { grid-area: act; }
/* ガチャ：左にバナー、右に引くボタン */
html.wide .tab-gacha { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); grid-template-areas: "tabs tabs" "banner panel"; grid-template-rows: auto 1fr; column-gap: 18px; align-items: start; }
html.wide .tab-gacha .subtabs { grid-area: tabs; max-width: 560px; }
html.wide .tab-gacha .gbanner { grid-area: banner; height: 300px; }
html.wide .tab-gacha .gb-chars img { max-width: 150px; }
html.wide .tab-gacha .gb-items img { max-width: 96px; }
html.wide .tab-gacha .gb-items img:nth-child(3) { max-width: 124px; }
html.wide .tab-gacha .gb-title { font-size: 28px; }
html.wide .tab-gacha > .panel { grid-area: panel; }
/* 設定：2列に並べる */
html.wide .tab-settings { columns: 2; column-gap: 18px; }
html.wide .tab-settings > * { break-inside: avoid; }
html.wide .tab-settings > .panel { margin-top: 0; }
/* 戦闘：レベルアップのカードを横に3枚並べる */
html.wide .lv-cards { flex-direction: row; max-width: 980px; }
html.wide .lv-card { flex: 1; flex-direction: column; text-align: center; min-height: 220px; }
html.wide .lv-card .reel-frame { width: 90px; height: 90px; }
/* 横画面：使える幅を広げ、ホームのステージ見本を大きく */
html.wide #menu > main { max-width: calc(1400px / var(--z)); }
html.wide #menu > header { max-width: calc(1500px / var(--z)); }
html.wide .tab-home { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); }
html.wide .tab-gacha .gbanner { height: 340px; }
html.wide .tab-party.sub-equip .equip-stage { max-width: none; }