/* 掘り当て旅団 — 本気版 v1.0 の見た目 */
:root {
  --bg: #1a130e; --ink: #fbf1dc; --sub: #cdb895; --dim: #8f7c62;
  --gold1: #fff1b8; --gold2: #f2c14e; --gold3: #b07a1c; --gold4: #6b4510;
  --green: #7bd36f;
  --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px);
  --font: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Hiragino Sans", system-ui, sans-serif;
}
html { font-size: 16px; }
html.fz1 { font-size: 18.4px; }
html.fz2 { font-size: 20.8px; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: #0b0806; color: var(--ink); overscroll-behavior: none; }
body { font-family: var(--font); font-weight: 500; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
button { font: inherit; color: inherit; touch-action: manipulation; cursor: pointer; }
img { -webkit-user-drag: none; }
.hidden { display: none !important; }

#app { position: relative; max-width: 480px; height: 100%; margin: 0 auto; overflow: hidden;
  background: #1a130e url(img/ui/panel.webp) center/360px repeat; box-shadow: 0 0 40px #000; }
#app::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 80% at 50% 30%, rgba(60,35,15,.1), rgba(10,6,3,.75)); pointer-events: none; }
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; }

/* ---------- 金の縁取り ---------- */
.frame { position: relative; border-radius: 14px; padding: 10px;
  background: linear-gradient(180deg, rgba(58,36,20,.92), rgba(30,18,10,.95));
  box-shadow: 0 0 0 2px var(--gold4), 0 0 0 3px var(--gold2), 0 0 0 5px #2a1608, 0 6px 16px rgba(0,0,0,.6), inset 0 0 18px rgba(0,0,0,.6); }
.frame.parch { color: #3b2410; background: #e9d6ad url(img/ui/parchment.webp) center/300px; box-shadow: 0 0 0 2px #7a5222, 0 0 0 4px var(--gold2), 0 0 0 6px #3a2008, 0 6px 16px rgba(0,0,0,.6), inset 0 0 26px rgba(120,70,20,.45); }
.frame.parch .muted { color: #6d4f2c; }
.gem::before, .gem::after { content: ""; position: absolute; top: -7px; width: 12px; height: 12px; transform: rotate(45deg);
  background: radial-gradient(circle at 35% 35%, #c9fbff, #2bb3c9 55%, #0d4f5c); border: 2px solid var(--gold2); box-shadow: 0 0 6px rgba(80,220,255,.7); }
.gem::before { left: -7px; } .gem::after { right: -7px; }

/* 飾りの見出し */
.plate { position: relative; display: block; margin: 0 auto; width: fit-content; min-width: 60%; text-align: center;
  padding: 6px 30px 7px; font-weight: 800; font-size: 1.15rem; letter-spacing: .08em; color: var(--gold1);
  text-shadow: 0 2px 0 #3a1a04, 0 0 8px rgba(242,193,78,.45);
  background: linear-gradient(180deg, #7a2a16, #4a140a); border-radius: 6px;
  box-shadow: 0 0 0 2px var(--gold3), 0 0 0 3px var(--gold1), 0 0 0 5px #2a1006, 0 4px 10px rgba(0,0,0,.6); }
.plate::before, .plate::after { content: "◆"; position: absolute; top: 50%; transform: translateY(-50%); color: #7fe3f0; font-size: .8em; text-shadow: 0 0 6px #2bd; }
.plate::before { left: 10px; } .plate::after { right: 10px; }
.plate small { display: block; font-size: .62em; letter-spacing: .25em; color: var(--gold2); font-weight: 700; }
.ribbon { display: flex; align-items: center; gap: 8px; margin: 16px 2px 9px; color: var(--gold2); font-weight: 800; font-size: 1rem; letter-spacing: .06em; text-shadow: 0 2px 0 #000; }
.ribbon::before, .ribbon::after { content: ""; flex: 1; height: 2px; background: linear-gradient(90deg, transparent, var(--gold3), transparent); }
.ribbon:first-child { margin-top: 2px; }

/* ボタン */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 11px 14px; border: 0; border-radius: 12px;
  font-weight: 800; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.45); letter-spacing: .04em;
  background: linear-gradient(180deg, #8a6a46, #5a3f22); box-shadow: 0 0 0 2px var(--gold3), 0 0 0 3px #2a1608, inset 0 2px 0 rgba(255,255,255,.25), 0 4px 0 #1f1208; }
.btn:active { transform: translateY(2px); }
.btn.gold { color: #3a2006; text-shadow: 0 1px 0 rgba(255,255,255,.5); background: linear-gradient(180deg, #fff1b8, #f2c14e 45%, #c88a1c); box-shadow: 0 0 0 2px #fff6d0, 0 0 0 4px #6b4510, inset 0 -3px 0 rgba(0,0,0,.18), 0 5px 0 #3a2006, 0 0 16px rgba(242,193,78,.5); }
.btn.red { background: linear-gradient(180deg, #ff9a6a, #d8462a 50%, #8f2210); box-shadow: 0 0 0 2px #ffd29a, 0 0 0 4px #4a1206, inset 0 -3px 0 rgba(0,0,0,.2), 0 5px 0 #2a0a04, 0 0 16px rgba(255,100,60,.45); }
.btn.green { background: linear-gradient(180deg, #8fe27a, #3f9d3a 55%, #1f5c1c); box-shadow: 0 0 0 2px #d6ffb8, 0 0 0 4px #123a10, inset 0 -3px 0 rgba(0,0,0,.2), 0 5px 0 #0a2008; }
.btn.blue { background: linear-gradient(180deg, #8cc6ff, #3a78d0 55%, #1b3d7a); box-shadow: 0 0 0 2px #cfe6ff, 0 0 0 4px #0c2148, inset 0 -3px 0 rgba(0,0,0,.2), 0 5px 0 #081530; }
.btn.big { width: 100%; padding: 15px; font-size: 1.15rem; }
.btn.small { padding: 7px 10px; font-size: .85rem; border-radius: 9px; }
.btn:disabled { filter: grayscale(.8) brightness(.7); }
.badge { position: absolute; top: -9px; right: -7px; min-width: 24px; padding: 1px 7px; border-radius: 999px; background: linear-gradient(#ff6a4a, #c41e0e); color: #fff; font-size: .78rem; box-shadow: 0 0 0 2px #fff; text-shadow: none; }

/* ---------- 珍しさのカード ---------- */
.card { position: relative; display: block; border-radius: 10px; padding: 3px; text-align: center; color: var(--ink); border: 0;
  background: linear-gradient(160deg, var(--rc1), var(--rc2)); box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 3px 8px rgba(0,0,0,.5); }
button.card { width: 100%; }
.card .in { position: relative; display: block; border-radius: 7px; overflow: hidden; aspect-ratio: 1;
  background: radial-gradient(circle at 50% 40%, var(--rbg1), var(--rbg2) 75%); }
.card .in img, .card .in svg { position: absolute; inset: 6%; width: 88%; height: 88%; object-fit: contain; filter: drop-shadow(0 3px 3px rgba(0,0,0,.5)); }
.card .in .ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 1.6em; font-weight: 900; color: rgba(255,255,255,.35); }
.card .in::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(255,255,255,.28), transparent 40%); pointer-events: none; }
.card .rb { position: absolute; top: 3px; left: 3px; z-index: 2; font-size: .62rem; font-weight: 900; padding: 0 5px; border-radius: 4px; color: #fff; background: rgba(0,0,0,.6); border: 1px solid var(--rc1); }
.card .stars { position: absolute; bottom: 2px; left: 0; right: 0; z-index: 2; font-size: .6rem; letter-spacing: -1px; color: #ffe066; text-shadow: 0 0 3px #000, 0 1px 0 #000; }
.card .el { position: absolute; top: 3px; right: 3px; z-index: 2; width: 18px; height: 18px; border-radius: 50%; font-size: .62rem; line-height: 18px; font-weight: 900; color: #fff; box-shadow: 0 0 0 1px #fff8; }
.card .cap { display: block; font-size: .72rem; line-height: 1.25; padding: 3px 1px 1px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card .new { position: absolute; top: -8px; right: -6px; z-index: 3; font-size: .66rem; font-weight: 900; padding: 1px 6px; border-radius: 7px; color: #fff; background: linear-gradient(#ff6a4a, #d01e0e); box-shadow: 0 0 0 2px #fff, 0 2px 4px rgba(0,0,0,.5); transform: rotate(6deg); }
.card .plus { position: absolute; bottom: 13px; right: 4px; z-index: 2; font-size: .7rem; font-weight: 900; color: #9ff; text-shadow: 0 0 3px #000, 0 1px 0 #000; }
.card .lv { position: absolute; bottom: 13px; left: 4px; z-index: 2; font-size: .64rem; font-weight: 900; color: #fff; text-shadow: 0 0 3px #000, 0 1px 0 #000; }
.card .on-mark { position: absolute; bottom: 13px; right: 4px; z-index: 2; font-size: .6rem; font-weight: 900; padding: 0 4px; border-radius: 4px; background: var(--gold2); color: #3a2006; }
.card.r1 { --rc1: #e2e6ea; --rc2: #6d757e; --rbg1: #5b636c; --rbg2: #22272c; }
.card.r2 { --rc1: #a9d6ff; --rc2: #2a62b0; --rbg1: #2f63a8; --rbg2: #0f2242; }
.card.r3 { --rc1: #e7c2ff; --rc2: #7a33b8; --rbg1: #7038a8; --rbg2: #26103e; }
.card.r4 { --rc1: #fff2b0; --rc2: #c08416; --rbg1: #b88a2a; --rbg2: #3a2506; box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 3px 8px rgba(0,0,0,.5), 0 0 12px rgba(242,193,78,.55); }
.card.r5 { --rc1: #ffd0ea; --rbg1: #c0508a; --rbg2: #2a0c22; background: conic-gradient(from var(--ang, 0deg), #ff6aa8, #ffd36a, #7affc4, #6ab8ff, #c38bff, #ff6aa8); animation: spin 3s linear infinite; box-shadow: 0 0 14px rgba(255,120,200,.7); }
@property --ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes spin { to { --ang: 360deg; } }
.card.r4 .in::before, .card.r5 .in::before { content: ""; position: absolute; inset: -40%; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.45) 50%, transparent 60%); animation: shine 2.6s ease-in-out infinite; z-index: 1; pointer-events: none; }
@keyframes shine { 0% { transform: translateX(-60%); } 60%, 100% { transform: translateX(60%); } }
.card.unknown .in img, .card.unknown .in svg { filter: brightness(0) opacity(.55); }
.card.unknown { --rc1: #555; --rc2: #2a2a2a; --rbg1: #333; --rbg2: #111; animation: none; background: linear-gradient(160deg, #555, #2a2a2a); box-shadow: 0 0 0 1px #000; }
.card.unknown .in::before { display: none; }
.card.dim .in img { opacity: .55; filter: grayscale(.6); }
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 11px 7px; }
.grid.g3 { grid-template-columns: repeat(3, 1fr); }
.grid.g5 { grid-template-columns: repeat(5, 1fr); gap: 8px 5px; }
.no { font-size: .6rem; color: var(--dim); display: block; margin-top: 1px; }

/* 属性の丸 */
.el.fire, .elchip.fire { background: linear-gradient(#ff8a5c, #c8381a); } .el.water, .elchip.water { background: linear-gradient(#7cc0ff, #2a68c0); }
.el.grass, .elchip.grass { background: linear-gradient(#8fe07a, #2f8a2a); } .el.light, .elchip.light { background: linear-gradient(#fff08a, #c89a1a); color: #4a3200 !important; }
.el.dark, .elchip.dark { background: linear-gradient(#b48aee, #4a2a86); } .el.none, .elchip.none { background: linear-gradient(#cfc4b0, #7a6e5c); }
.elchip { display: inline-block; width: 1.35em; height: 1.35em; line-height: 1.35em; border-radius: 50%; text-align: center; font-size: .8em; font-weight: 900; color: #fff; vertical-align: .05em; box-shadow: 0 0 0 1px #fff8; }
.rtag { display: inline-block; padding: 0 6px; border-radius: 5px; font-weight: 900; font-size: .8em; color: #fff; margin-right: 4px; }
.rtag.r1 { background: #7d858e; } .rtag.r2 { background: #2f74c8; } .rtag.r3 { background: #8a42c8; } .rtag.r4 { background: linear-gradient(#ffe27a, #c08416); color: #3a2006; } .rtag.r5 { background: linear-gradient(90deg, #ff6aa8, #ffb86a, #6ab8ff); }
.star { color: #ffd84a; text-shadow: 0 1px 0 #000; letter-spacing: -1px; }

/* ---------- タイトル ---------- */
#title { align-items: center; justify-content: center; background: linear-gradient(rgba(10,6,3,.15), rgba(10,6,3,.85) 75%), url(img/bg/mori.webp) center/cover; z-index: 2; }
.title-box { position: relative; width: 100%; padding: 20px 22px; text-align: center; }
.logo { width: 96%; max-width: 420px; filter: drop-shadow(0 6px 10px rgba(0,0,0,.7)); animation: float 4s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-6px); } }
.kicker { color: var(--gold1); margin: 2px 0 4px; font-size: .9rem; letter-spacing: .3em; text-shadow: 0 2px 0 #000, 0 0 6px #000; }
.lead { line-height: 1.75; margin: 6px 0 14px; text-shadow: 0 2px 4px #000, 0 0 8px #000; }
.title-mons { display: flex; justify-content: center; margin: 0 0 4px; }
.title-mons img { width: 23%; filter: drop-shadow(0 4px 4px rgba(0,0,0,.6)); animation: float 3s ease-in-out infinite; }
.title-mons img:nth-child(2) { animation-delay: -.8s; } .title-mons img:nth-child(3) { animation-delay: -1.6s; } .title-mons img:nth-child(4) { animation-delay: -2.2s; }
.font-row { margin: 0 0 16px; color: var(--sub); font-size: .92rem; text-shadow: 0 1px 2px #000; }
.font-row button { margin-left: 5px; padding: 6px 12px; border-radius: 9px; border: 1px solid var(--gold3); background: rgba(40,24,12,.85); }
.font-row button.on { background: linear-gradient(#fff1b8, #f2c14e); color: #3a2006; }
.link { background: none; border: 0; color: var(--sub); text-decoration: underline; margin-top: 14px; }

/* ---------- 上の帯 ---------- */
#topbar { position: relative; z-index: 3; display: flex; align-items: center; gap: 6px; padding: calc(6px + var(--safe-t)) 8px 6px;
  background: linear-gradient(180deg, #4a2a14, #2a170a); box-shadow: 0 2px 0 var(--gold3), 0 3px 0 #000, 0 6px 14px rgba(0,0,0,.6); }
.arrow { width: 40px; height: 40px; border-radius: 50%; border: 0; color: var(--gold1); font-size: 1rem; flex: none;
  background: radial-gradient(circle at 40% 35%, #8a5a2a, #3a200c); box-shadow: 0 0 0 2px var(--gold3), 0 3px 0 #000; }
.arrow:disabled { opacity: .3; }
.area-name { flex: 1; text-align: center; line-height: 1.2; min-width: 0; }
.area-name > b { display: block; font-size: 1.12rem; font-weight: 800; color: var(--gold1); text-shadow: 0 2px 0 #000, 0 0 8px rgba(242,193,78,.4); letter-spacing: .05em; }
.res-row { display: flex; justify-content: center; gap: 10px; margin-top: 2px; font-size: .74rem; color: var(--sub); white-space: nowrap; }
.res-row b { color: #fff; }

.tab { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 14px 12px 18px; position: relative; z-index: 1; }
#tab-field { display: flex; flex-direction: column; gap: 11px; overflow: hidden; }
#tab-field > * { flex: none; }

/* ---------- 戦いの場 ---------- */
.field { position: relative; border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: 8px 4px 14px;
  box-shadow: 0 0 0 2px var(--gold3), 0 0 0 3px var(--gold1), 0 0 0 5px #2a1608, 0 8px 18px rgba(0,0,0,.7); background-size: cover; background-position: center; }
#field { height: 37vh; min-height: 240px; max-height: 340px; }
html.fz2 #field { height: 32vh; min-height: 210px; }
.field::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 40px rgba(0,0,0,.55); }
.row { position: relative; z-index: 1; display: flex; justify-content: center; align-items: flex-end; gap: 2px; }
.unit { position: relative; width: 19%; max-width: 84px; text-align: center; transition: transform .14s ease-out, opacity .3s, filter .2s; }
.foes .unit { width: 27%; max-width: 110px; }
.foes .unit.big { width: 40%; max-width: 170px; }
.unit .pic { width: 100%; aspect-ratio: 1; display: block; object-fit: contain; filter: drop-shadow(0 4px 3px rgba(0,0,0,.55)); }
.unit .hp { height: 6px; width: 76%; margin: 1px auto 0; background: rgba(0,0,0,.6); border-radius: 3px; overflow: hidden; box-shadow: 0 0 0 1px rgba(0,0,0,.6); }
.unit .hp i { display: block; height: 100%; background: linear-gradient(#a6f58a, #3caa2e); transition: width .2s; }
.foes .unit .hp i { background: linear-gradient(#ff9a7a, #d0381e); }
.unit .st { position: absolute; top: 0; right: 4%; font-size: .7rem; font-weight: 900; text-shadow: 0 0 3px #000, 0 1px 0 #000; }
.unit.down { opacity: .15; filter: grayscale(1); }
.allies .unit.act { transform: translateY(-14px) scale(1.08); }
.foes .unit.act { transform: translateY(12px) scale(1.06); }
.unit.hurt .pic { animation: hurt .25s; }
@keyframes hurt { 0% { filter: brightness(3); transform: translateX(-5px); } 50% { transform: translateX(5px); } 100% { filter: none; transform: none; } }
.fxl { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.dmg { position: absolute; font-weight: 900; font-size: 1.15rem; color: #fff; text-shadow: 0 2px 0 #000, 0 0 4px #000, 0 0 2px #000; animation: rise .85s ease-out forwards; white-space: nowrap; transform-origin: center; }
.dmg.good { color: #ffd84a; font-size: 1.35rem; }
.dmg.crit { color: #ff7a5a; font-size: 1.55rem; }
.dmg.heal { color: #9dff8a; }
.dmg.skill { color: #fff; font-size: .8rem; background: linear-gradient(90deg, transparent, rgba(30,10,0,.85), transparent); padding: 1px 14px; }
.dmg.info { color: #cfe8ff; font-size: .78rem; }
@keyframes rise { 0% { transform: translateY(6px) scale(.6); opacity: 0; } 20% { transform: translateY(-6px) scale(1.15); opacity: 1; } 100% { transform: translateY(-30px) scale(1); opacity: 0; } }
.slash { position: absolute; width: 70px; height: 70px; margin: -35px 0 0 -35px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.95), rgba(255,220,120,.5) 35%, transparent 65%); animation: burst .3s ease-out forwards; }
@keyframes burst { from { transform: scale(.3); opacity: 1; } to { transform: scale(1.4); opacity: 0; } }
#run-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; z-index: 5; background: rgba(0,0,0,.55); }
#run-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #f2c14e, #fff1b8); box-shadow: 0 0 6px #f2c14e; }
.result-flash { position: absolute; z-index: 5; left: 0; right: 0; top: 44%; text-align: center; font-weight: 900; font-size: 1.1rem; color: var(--gold1); text-shadow: 0 2px 0 #000, 0 0 10px #000; animation: pop 1.2s forwards; pointer-events: none; }

/* 合わせ技の大写し */
.cutin { position: absolute; inset: 0; z-index: 6; display: flex; align-items: center; justify-content: center; pointer-events: none; overflow: hidden; }
.cutin .band { position: absolute; left: -10%; right: -10%; top: 29%; height: 42%; background: linear-gradient(180deg, rgba(60,20,0,0), rgba(70,24,0,.9) 18%, rgba(30,8,0,.95) 82%, rgba(40,10,0,0)); transform: skewY(-6deg); animation: band 1.7s forwards; }
.cutin img { position: absolute; top: 24%; width: 40%; filter: drop-shadow(0 0 10px rgba(255,220,120,.9)); }
.cutin .ca { left: 0; animation: inL 1.7s forwards; } .cutin .cb { right: 0; animation: inR 1.7s forwards; }
.cutin .cn { position: relative; z-index: 2; font-size: 1.5rem; font-weight: 900; color: var(--gold1); letter-spacing: .1em; text-shadow: 0 3px 0 #5a2e06, 0 0 14px rgba(255,200,80,.9); animation: pop 1.7s forwards; white-space: nowrap; text-align: center; }
.cutin .cn small { display: block; font-size: .5em; letter-spacing: .4em; color: #fff; }
@keyframes band { 0% { transform: skewY(-6deg) scaleY(0); } 12%, 85% { transform: skewY(-6deg) scaleY(1); opacity: 1; } 100% { opacity: 0; } }
@keyframes inL { 0% { transform: translateX(-120%); } 15%, 85% { transform: translateX(0); opacity: 1; } 100% { transform: translateX(-30%); opacity: 0; } }
@keyframes inR { 0% { transform: translateX(120%) scaleX(-1); } 15%, 85% { transform: translateX(0) scaleX(-1); opacity: 1; } 100% { transform: translateX(30%) scaleX(-1); opacity: 0; } }
@keyframes pop { 0% { transform: scale(.4); opacity: 0; } 18% { transform: scale(1.12); opacity: 1; } 28%, 85% { transform: scale(1); opacity: 1; } 100% { opacity: 0; } }

/* 狩り場の下の部品 */
.mark-box { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 7px 10px; border: 0; color: var(--ink); }
.mark-box .card { width: 50px; flex: none; }
.mark-box .t { flex: 1; font-size: .86rem; line-height: 1.4; }
.mark-box .t b { color: var(--gold1); }
.bar { height: 8px; background: rgba(0,0,0,.55); border-radius: 4px; overflow: hidden; margin-top: 4px; box-shadow: inset 0 1px 2px #000; }
.bar i { display: block; height: 100%; background: linear-gradient(90deg, #c88a1c, #fff1b8); }
.finds-wrap { flex: 1 1 0 !important; min-height: 0; overflow: hidden; padding: 7px 8px 6px; }
.finds-h { font-size: .78rem; color: var(--gold2); font-weight: 800; letter-spacing: .1em; display: flex; justify-content: space-between; }
#finds { display: flex; gap: 9px; overflow-x: auto; padding: 10px 4px 2px; scrollbar-width: none; }
#finds::-webkit-scrollbar { display: none; }
#finds .card { width: 58px; flex: none; animation: dropin .45s cubic-bezier(.2,1.6,.4,1); }
@keyframes dropin { from { transform: translateY(-30px) scale(.4); opacity: 0; } }
.finds-empty { color: var(--dim); font-size: .85rem; padding: 10px 2px; }
.actions { display: grid; grid-template-columns: 1fr 1.35fr; gap: 12px; padding: 4px 2px 4px; }

/* 下のタブ */
#tabs { position: relative; z-index: 3; display: flex; padding: 6px 4px calc(6px + var(--safe-b)); background: linear-gradient(180deg, #3a2010, #1e1006); box-shadow: 0 -2px 0 var(--gold3), 0 -3px 0 #000; }
#tabs button { flex: 1; padding: 4px 0 2px; border: 0; background: none; color: var(--dim); font-weight: 800; font-size: .8rem; line-height: 1.2; position: relative; }
#tabs button .ic { display: block; width: 30px; height: 30px; margin: 0 auto 1px; border-radius: 50%; object-fit: cover; filter: grayscale(.7) brightness(.7); }
#tabs button.on { color: var(--gold1); text-shadow: 0 0 8px rgba(242,193,78,.6); }
#tabs button.on .ic { filter: drop-shadow(0 0 6px rgba(242,193,78,.8)); transform: translateY(-2px) scale(1.1); }
#tabs button .badge { top: -4px; right: 16%; }

/* 部隊 */
.party-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; margin-top: 4px; }
.party-row .slot-empty { aspect-ratio: .8; border-radius: 10px; border: 2px dashed var(--dim); display: flex; align-items: center; justify-content: center; color: var(--dim); font-size: .8rem; }
.power { text-align: center; margin: 10px 0 2px; font-size: .9rem; color: var(--sub); }
.power b { font-size: 1.35rem; color: var(--gold1); text-shadow: 0 0 8px rgba(242,193,78,.5); }
.combo-on { position: relative; margin: 8px 0; padding: 8px 10px 8px 12px; border-radius: 10px; font-size: .9rem; line-height: 1.5;
  background: linear-gradient(90deg, rgba(242,193,78,.25), rgba(242,193,78,.05)); box-shadow: inset 3px 0 0 var(--gold2); }
.combo-on b { color: var(--gold1); }
.row-btns { display: flex; gap: 10px; margin: 12px 0; }
.row-btns > * { flex: 1; }
.sortbar { display: flex; gap: 6px; margin: 0 0 12px; flex-wrap: wrap; }
.sortbar button { padding: 4px 11px; border-radius: 999px; border: 1px solid var(--gold3); background: rgba(30,18,8,.85); font-size: .78rem; color: var(--sub); }
.sortbar button.on { background: var(--gold2); color: #3a2006; }
.ptag { position: absolute; top: -8px; left: 50%; transform: translateX(-50%); z-index: 3; font-size: .58rem; font-weight: 900; padding: 0 6px; border-radius: 6px; background: var(--gold2); color: #3a2006; box-shadow: 0 0 0 1px #000; white-space: nowrap; }

/* 下から出る板 */
.sheet { position: absolute; inset: 0; z-index: 20; display: flex; align-items: flex-end; background: rgba(0,0,0,.72); }
.sheet-body { position: relative; width: 100%; max-height: 92%; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 18px 14px calc(18px + var(--safe-b));
  background: #241509 url(img/ui/panel.webp) center/360px; border-radius: 18px 18px 0 0; box-shadow: 0 -2px 0 var(--gold2), 0 -4px 0 #000, 0 -10px 30px rgba(0,0,0,.8); animation: up .25s ease-out; }
.sheet-body.full { max-height: 100%; height: 100%; border-radius: 0; padding-top: calc(16px + var(--safe-t)); }
@keyframes up { from { transform: translateY(40px); opacity: .4; } }
.note { color: var(--sub); font-size: .88rem; line-height: 1.6; margin: 4px 2px 10px; }
.close-row { display: flex; gap: 12px; margin-top: 18px; }
.close-row > * { flex: 1; }

/* 仲間の札 */
.mcard { padding: 12px; margin-top: 12px; }
.mcard-top { display: flex; gap: 12px; align-items: flex-start; }
.mcard-top .card { width: 44%; flex: none; }
.mname { font-size: 1.2rem; font-weight: 900; color: var(--gold1); text-shadow: 0 2px 0 #000; line-height: 1.25; margin: 2px 0 4px; }
.mmeta { font-size: .84rem; color: var(--sub); line-height: 1.75; }
.mmeta .bar { margin: 2px 0 4px; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 12px; font-size: .9rem; margin: 10px 0 2px; padding: 8px 10px; border-radius: 10px; background: rgba(0,0,0,.35); }
.stats span { color: var(--sub); } .stats b { float: right; } .stats i { font-style: normal; color: var(--green); font-size: .8em; margin-left: 3px; }
.skillbox { margin-top: 10px; padding: 8px 10px; border-radius: 10px; background: rgba(0,0,0,.3); font-size: .86rem; line-height: 1.6; }
.skillbox b { color: var(--gold1); }
.eqslots { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; margin-top: 4px; }
.eqslot { position: relative; border: 0; padding: 0; background: none; text-align: center; font-size: .68rem; color: var(--sub); }
.eqslot .empty { aspect-ratio: 1; border-radius: 9px; border: 2px dashed #6b5a44; display: flex; align-items: center; justify-content: center; font-size: .72rem; color: var(--dim); background: rgba(0,0,0,.3); }
.eqslot .sn { display: block; margin-top: 2px; }
.combo { position: relative; margin-bottom: 9px; padding: 9px 12px; border-radius: 10px; font-size: .86rem; line-height: 1.55; background: rgba(0,0,0,.38); box-shadow: inset 0 0 0 1px #5a4630; }
.combo.found { background: linear-gradient(90deg, rgba(242,193,78,.2), rgba(0,0,0,.35)); box-shadow: inset 0 0 0 1px var(--gold3); }
.combo .h { font-weight: 900; color: var(--gold1); font-size: .95rem; }
.combo .pair { display: flex; gap: 6px; margin: 6px 0 2px; align-items: center; }
.combo .pair .card { width: 46px; }
.combo .pair .pl { font-size: 1.2rem; color: var(--gold2); font-weight: 900; }

/* 装備の札 */
.eqcard { display: flex; gap: 10px; align-items: center; width: 100%; text-align: left; padding: 8px; margin-bottom: 8px; border: 0; border-radius: 12px; background: rgba(0,0,0,.38); box-shadow: inset 0 0 0 1px #5a4630; color: var(--ink); }
.eqcard.on { box-shadow: inset 0 0 0 2px var(--gold2); }
.eqcard .card { width: 56px; flex: none; }
.eqcard .t { flex: 1; font-size: .82rem; line-height: 1.45; min-width: 0; }
.eqcard .t b { font-size: .92rem; }
.fxs { color: #8ff2ff; }
.uq { color: #ff9ad2; font-weight: 900; font-size: .75rem; letter-spacing: .05em; }
.eqdetail .card { width: 40%; margin: 4px auto 10px; }
.eqdetail .kv:last-child { border: 0; }

/* 報告（周回の結果） */
.summary { display: flex; justify-content: center; gap: 22px; font-size: .95rem; margin: 12px 0 6px; }
.summary b { font-size: 1.4rem; color: var(--gold1); text-shadow: 0 0 8px rgba(242,193,78,.5); }
.party-mini { display: flex; justify-content: center; gap: 6px; margin: 8px 0 2px; }
.party-mini .card { width: 54px; }
.memo { margin: 14px 4px; padding: 12px 14px; font-size: .9rem; line-height: 1.85; }
.memo .mh { text-align: center; font-weight: 900; letter-spacing: .4em; color: #6b3e12; margin-bottom: 2px; font-size: .95rem; }
.reveal .card { opacity: 0; transform: rotateY(90deg) scale(.6); }
.reveal .card.shown { opacity: 1; transform: none; transition: transform .35s cubic-bezier(.2,1.5,.4,1), opacity .2s; }
.reveal .card.shown.r4, .reveal .card.shown.r5 { animation: glow 1.2s ease-out, spin 3s linear infinite; }
.reveal .card.shown.r4 { animation: glow 1.2s ease-out; }
@keyframes glow { 0% { filter: brightness(2.6) drop-shadow(0 0 16px #fff); } 100% { filter: none; } }
.confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 30; }
.confetti i { position: absolute; top: -14px; width: 8px; height: 12px; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(110vh) rotate(720deg); } }
.lvups { font-size: .85rem; color: var(--sub); line-height: 1.7; }

/* 主との一戦 */
#boss-field { height: 44vh; min-height: 270px; }
.result-big { text-align: center; font-weight: 900; margin: 10px 0 2px; letter-spacing: .1em; }
.result-big.g3 { font-size: 3rem; color: var(--gold1); text-shadow: 0 4px 0 #6b3a06, 0 0 24px rgba(255,210,90,.9); animation: pop2 .6s cubic-bezier(.2,1.6,.4,1); }
.result-big.g2 { font-size: 2.5rem; color: var(--gold2); text-shadow: 0 3px 0 #5a2e06, 0 0 14px rgba(255,210,90,.6); animation: pop2 .5s ease-out; }
.result-big.g1 { font-size: 2.1rem; color: #f3e2b0; text-shadow: 0 3px 0 #3a2006; animation: pop2 .5s ease-out; }
.result-big.lose { font-size: 2.1rem; color: #b8a890; text-shadow: 0 3px 0 #000; }
@keyframes pop2 { from { transform: scale(2.4); opacity: 0; } }
.reason { padding: 10px 12px; line-height: 1.7; font-size: .92rem; margin-top: 10px; }
.reason .hint { color: #7a3a06; margin-top: 6px; font-weight: 800; }
.unlock { text-align: center; margin: 12px 0; padding: 12px; }
.unlock b { color: var(--gold1); font-size: 1.1rem; }

#toast { position: absolute; left: 14px; right: 14px; top: calc(64px + var(--safe-t)); z-index: 40; padding: 12px; text-align: center; font-weight: 800; line-height: 1.5; pointer-events: none; animation: toast 3s forwards; }
@keyframes toast { 0% { transform: translateY(20px); opacity: 0; } 10%, 85% { transform: none; opacity: 1; } 100% { opacity: 0; } }
textarea { width: 100%; height: 90px; background: rgba(0,0,0,.4); color: var(--ink); border: 1px solid var(--gold3); border-radius: 10px; font-size: .8rem; -webkit-user-select: text; user-select: text; }
.subtabs { display: flex; gap: 6px; margin-bottom: 14px; }
.subtabs button { flex: 1; padding: 8px 0; border-radius: 10px; border: 0; font-weight: 800; color: var(--sub); background: rgba(0,0,0,.45); box-shadow: inset 0 0 0 1px var(--gold4); }
.subtabs button.on { color: #3a2006; background: linear-gradient(#fff1b8, #f2c14e); }
.kv { display: flex; justify-content: space-between; gap: 10px; padding: 6px 2px; border-bottom: 1px solid rgba(242,193,78,.15); font-size: .88rem; }
.kv span:first-child { color: var(--sub); }

.hint-box { position: absolute; top: calc(10px + var(--safe-t)); left: 10px; right: 10px; z-index: 5; padding: 12px 40px 12px 12px; font-size: .92rem; line-height: 1.6; }
.hint-box button { position: absolute; top: 6px; right: 6px; width: 34px; height: 34px; border: 0; background: none; font-size: 1.2rem; color: var(--ink); }
#rotate { display: none; }
@media (orientation: landscape) and (max-height: 500px) {
  #rotate { display: flex; position: fixed; inset: 0; z-index: 99; background: var(--bg); align-items: center; justify-content: center; font-size: 1.2rem; }
}

/* 主のくせ */
.gimmick { margin: 12px 2px 4px; padding: 10px 12px; font-size: .9rem; line-height: 1.65; }
.gimmick .gh { font-weight: 900; color: #7a2a06; font-size: 1rem; margin-bottom: 2px; }
.gimmick .ga { margin-top: 6px; color: #2f5a14; font-weight: 700; }
.dmg.heat { color: #ffae5a; font-size: .9rem; }
.aura { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 80%, rgba(255,110,30,.45), transparent 70%); animation: burst .7s ease-out forwards; }