/* 自動ファーム: 拠点の宝の山・受け取り・効率UP・おまかせ周回 */
/* ---- 拠点の宝の山 ---- */
.idle-pile { position: relative; display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; align-items: center; gap: 8px; margin: 2px 0 4px; padding: 7px 8px;
  background: linear-gradient(#2d3f6c, #18244a); border: 2px solid var(--gold2); border-radius: 12px; box-shadow: 0 2px 0 #0007; overflow: hidden; }
.idle-pile[hidden] { display: none; }
.ip-chest { position: relative; width: 58px; height: 58px; }
.ip-chest img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2px 2px #000a); }
.ip-heap { position: absolute; left: 7px; right: 7px; top: 5px; height: 26px; pointer-events: none; }
.ip-heap i { position: absolute; width: 12px; height: 12px; margin: 0; }
.ip-heap i:nth-child(1) { left: 36%; top: 40%; } .ip-heap i:nth-child(2) { left: 18%; top: 50%; } .ip-heap i:nth-child(3) { left: 54%; top: 48%; }
.ip-heap i:nth-child(4) { left: 6%; top: 62%; } .ip-heap i:nth-child(5) { left: 70%; top: 58%; } .ip-heap i:nth-child(6) { left: 30%; top: 20%; }
.ip-heap i:nth-child(7) { left: 48%; top: 14%; } .ip-heap i:nth-child(8) { left: 58%; top: 30%; } .ip-heap i:nth-child(9) { left: 12%; top: 36%; }
.ip-heap i:nth-child(10) { left: 40%; top: -2%; } .ip-heap i:nth-child(11) { left: 24%; top: 8%; } .ip-heap i:nth-child(12) { left: 66%; top: 12%; }
.ip-main { min-width: 0; }
.ip-time { font-size: 12px; line-height: 1.3; color: #ffe9a8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ip-gold { display: flex; align-items: baseline; gap: 2px; font-size: 20px; line-height: 1.25; white-space: nowrap; }
.ip-gold .ico-gold { align-self: center; flex: none; }
.ip-gold b { font-weight: normal; color: var(--gold); text-shadow: 0 2px 0 #000; }
.ip-gold small { margin-left: 6px; font-size: 11px; opacity: .8; overflow: hidden; text-overflow: ellipsis; }
.ip-bar { height: 7px; margin: 3px 0 2px; background: #0a1124; border: 1.5px solid #000a; border-radius: 5px; overflow: hidden; }
.ip-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), #ff8a3a); border-radius: 4px; transition: width .5s; }
.ip-ten { font-size: 11px; opacity: .85; white-space: nowrap; }
.ip-ten.ready { color: #fff3a0; opacity: 1; }
.ip-claim { min-width: 84px; min-height: 44px; padding: 8px 10px; font-size: 15px; white-space: nowrap; }
.idle-pile.full .ip-gold small { color: #ff9a6a; opacity: 1; }
.idle-pile.ten { border-color: #fff3a0; animation: ipGlow 1.5s ease-in-out infinite; }
.idle-pile.ten .ip-chest img { animation: ipBob 1.2s ease-in-out infinite; }
.idle-pile.pop { animation: ipPop .7s ease-out, ipGlow 1.5s ease-in-out .7s infinite; }
@keyframes ipGlow { 0%, 100% { box-shadow: 0 2px 0 #0007, 0 0 6px 0 #f2c14e88; } 50% { box-shadow: 0 2px 0 #0007, 0 0 20px 5px #ffe36bcc; } }
@keyframes ipBob { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-3px) scale(1.06); } }
@keyframes ipPop { 0% { transform: scale(1); } 30% { transform: scale(1.04); filter: brightness(1.5); } 100% { transform: scale(1); filter: none; } }
/* 受け取ったあと */
.ip-after { display: none; grid-column: 1 / -1; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.idle-pile.claimed { grid-template-columns: 58px minmax(0, 1fr); }
.idle-pile.claimed .ip-main, .idle-pile.claimed .ip-claim { display: none; }
.idle-pile.claimed .ip-after { display: flex; grid-column: 2; flex-direction: column; align-items: stretch; gap: 4px; }
.ia-msg { font-size: 13px; color: #ffe9a8; } .ia-msg b { font-size: 20px; font-weight: normal; color: var(--gold); text-shadow: 0 2px 0 #000; }
.ia-gacha { min-height: 42px; padding: 7px 8px; font-size: 14px; }
.ia-ten { font-size: 12px; opacity: .85; }
i.fly { position: absolute; z-index: 60; width: 16px; height: 16px; margin: 0; pointer-events: none; }
.bump { animation: ipBump .35s ease-out; }
@keyframes ipBump { 0% { transform: scale(1); } 40% { transform: scale(1.35); color: #fff3a0; } 100% { transform: scale(1); } }

/* ---- ファーム効率UP（結果画面） ---- */
.result .row.farm-up { margin: 8px 0 4px; padding: 7px 8px; border: 2px solid #ffe36b; border-radius: 10px; background: #3a2b00cc; color: #fff3a0; font-size: 15px; animation: fuIn .6s ease-out; }
.farm-up b { font-weight: normal; color: #ffe36b; text-shadow: 0 0 8px #f2c14e; }
.farm-up .fu-delta { color: #9dff9d; font-size: 19px; text-shadow: 0 1px 0 #000; }
.farm-up small { display: block; margin-top: 2px; font-size: 11px; opacity: .85; line-height: 1.4; }
@keyframes fuIn { 0% { transform: scale(.7); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } }

/* ---- ステージ選択のボタン ---- */
.auto-open { flex: none; margin: 0 14px 2px; padding: 9px 8px; font-size: 16px; min-height: 44px; white-space: nowrap; }
.auto-open[hidden] { display: none; }
.auto-open small { font-size: 12px; opacity: .85; }

/* ---- おまかせ周回 ---- */
#s-auto { background: linear-gradient(#24365e, #142039); padding: 0 10px 10px; }
.auto-body { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; touch-action: pan-y; display: flex; flex-direction: column; gap: 8px; padding-bottom: 8px; }
.auto-body > * { flex: none; }
.auto-intro { margin: 2px 2px 0; font-size: 12px; line-height: 1.5; opacity: .9; }
.auto-charges { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; padding: 6px 8px; background: var(--win); border: 2px solid var(--line); border-radius: 10px; }
.auto-charges .dots { display: inline-flex; gap: 4px; }
.auto-charges .dots i { width: 14px; height: 14px; border-radius: 50%; background: #0a1124; border: 2px solid #5b6a94; }
.auto-charges .dots i.on { background: radial-gradient(circle at 35% 35%, #fff6b0, var(--gold) 45%, var(--gold2)); border-color: #6a4500; }
.auto-charges small { font-size: 11px; opacity: .8; }
.auto-stages { display: flex; flex-direction: column; gap: 5px; max-height: 190px; overflow-y: auto; overflow-x: hidden; padding: 2px; touch-action: pan-y; }
.auto-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 6px 10px; font-family: inherit; font-size: 15px; color: #fff; text-align: left;
  background: var(--win2); border: 2px solid #5b6a94; border-radius: 10px; cursor: pointer; flex: none; }
.auto-row .ar-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auto-row small { font-size: 11px; opacity: .8; white-space: nowrap; }
.auto-row.on { border-color: var(--gold); background: #3a3510; box-shadow: 0 0 0 2px #000a, 0 0 10px #f2c14e88; }
.auto-est { padding: 8px 10px; background: var(--win); border: 2px solid var(--line); border-radius: 10px; font-size: 13px; line-height: 1.6; }
.ae-line { margin: 2px 0; } .ae-line small { font-size: 11px; opacity: .8; margin-left: 4px; }
.ae-line b.good { color: #8fffa0; font-weight: normal; } .ae-line b.warn { color: #ffd36b; font-weight: normal; } .ae-line b.bad { color: #ff8a7a; font-weight: normal; }
.ae-line b { font-weight: normal; }
.ae-warn { margin: 3px 0; padding: 5px 8px; font-size: 12px; color: #ffd0a0; background: #4a1f10aa; border: 1.5px solid #c9703c; border-radius: 8px; line-height: 1.45; }
.ae-deck { font-size: 11px; opacity: .75; margin: 2px 0 6px; line-height: 1.4; }
.ae-load .ip-bar { margin-top: 6px; }
.ae-runs { display: flex; gap: 6px; margin: 6px 0; }
.ae-run { flex: 1 1 0; min-width: 0; min-height: 44px; padding: 4px 3px; font-family: inherit; font-size: 13px; color: #fff; background: var(--win2); border: 2px solid #5b6a94; border-radius: 10px; cursor: pointer; line-height: 1.25; }
.ae-run.on { border-color: var(--gold); background: #3a3510; color: #fff3a0; }
.ae-go { width: 100%; margin-top: 4px; font-size: 17px; padding: 10px 6px; min-height: 48px; white-space: normal; }
.ae-note { margin-top: 4px; font-size: 11px; opacity: .8; text-align: center; }
.auto-done { text-align: center; padding: 14px 10px; background: var(--win); border: 3px solid var(--gold); border-radius: 12px; display: flex; flex-direction: column; gap: 8px; align-items: center; animation: fuIn .6s ease-out; }
.auto-done h3 { margin: 0; font-size: 20px; font-weight: normal; color: var(--gold); }
.auto-done .btn { width: 100%; font-size: 16px; }
.ad-chest { width: 84px; height: 84px; position: relative; } .ad-chest img { width: 100%; height: 100%; object-fit: contain; animation: ipBob 1.2s ease-in-out infinite; }
.ad-gold { font-size: 30px; color: var(--gold); text-shadow: 0 2px 0 #000; } .ad-gold b { font-weight: normal; }
.ad-gold .ico-gold { width: 24px; height: 24px; }

/* 幅のせまい端末（320前後）: 宝の山の文字を折り返して、切れないようにする */
@media (max-width: 360px) {
  .idle-pile { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 6px; padding: 6px; }
  .idle-pile.claimed { grid-template-columns: 44px minmax(0, 1fr); }
  .ip-chest { width: 44px; height: 44px; }
  .ip-heap { left: 5px; right: 5px; top: 3px; height: 20px; }
  .ip-heap i { width: 9px; height: 9px; }
  .ip-time { white-space: normal; font-size: 11px; line-height: 1.25; }
  .ip-gold { flex-wrap: wrap; font-size: 18px; }
  .ip-gold small { margin-left: 4px; font-size: 10px; }
  .ip-claim { min-width: 72px; padding: 8px 6px; font-size: 14px; }
  .ia-msg small { display: block; }
}