/* =========================================================
 * オーラコネクト・バトル — スタイル
 * =======================================================*/
:root{
  /* 背景 */
  --bg-0:#0B0718; --bg-1:#160E2E; --bg-2:#1E1240;
  /* パネル */
  --panel:rgba(255,255,255,0.055);
  --panel-2:rgba(255,255,255,0.085);
  --panel-border:rgba(255,255,255,0.10);
  --panel-border-hi:rgba(255,255,255,0.18);
  /* 文字 */
  --ink:#F3EEFF; --ink-dim:#A99CD0; --ink-faint:#6F659A;
  /* アクセント */
  --accent:#FFC65C; --accent-2:#FF8FD0; --accent-3:#65E0FF;
  --gold-1:#FFE9A8; --gold-2:#F2A93B;
  /* HP */
  --hp-enemy1:#FF7A7A; --hp-enemy2:#9E1230;
  --hp-player1:#6FF0C0; --hp-player2:#189C77;
  --hp-low1:#FFB36B; --hp-low2:#D9522B;
  --stamina1:#8FE0FF; --stamina2:#2F7FD1;
  /* オーラ4色 */
  --c0:#FF7A59; --c1:#45C8F1; --c2:#5BE08C; --c3:#FF86C8;
  --c0d:#B8341F; --c1d:#125E86; --c2d:#1E8C4F; --c3d:#A62E71;
  /* 形状 */
  --r-lg:20px; --r-md:15px; --r-sm:11px;
  --shadow-1:0 10px 28px -12px rgba(0,0,0,0.75);
  --shadow-2:0 20px 46px -18px rgba(0,0,0,0.85);
  --safe-top:env(safe-area-inset-top, 0px);
  --safe-bottom:env(safe-area-inset-bottom, 0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
/* スマホで長押しすると範囲選択やコピー候補が出てゲームの操作を邪魔するので止める */
html,body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;}
input,textarea{-webkit-user-select:text;user-select:text;}
html,body{margin:0;padding:0;}
body{
  min-height:100vh;min-height:100dvh;
  background:var(--bg-0);
  font-family:"Hiragino Maru Gothic ProN","Yu Gothic Medium","BIZ UDPGothic","Meiryo",system-ui,sans-serif;
  color:var(--ink);
  display:flex;justify-content:center;
  overscroll-behavior:none;
  -webkit-font-smoothing:antialiased;
}

/* ===================== 背景のオーラ ===================== */
#bg-aura{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% -20%, #33205E 0%, transparent 60%),
    linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 55%, #120B26 100%);
}
#bg-aura i{position:absolute;display:block;border-radius:50%;filter:blur(60px);opacity:.4;}
#bg-aura i:nth-child(1){width:56vw;height:56vw;left:-18vw;top:-10vh;background:var(--c3);animation:drift1 22s ease-in-out infinite;}
#bg-aura i:nth-child(2){width:48vw;height:48vw;right:-16vw;top:14vh;background:var(--c1);animation:drift2 26s ease-in-out infinite;}
#bg-aura i:nth-child(3){width:52vw;height:52vw;left:10vw;bottom:-18vh;background:#7A47D9;animation:drift3 30s ease-in-out infinite;}
@keyframes drift1{0%,100%{transform:translate(0,0)}50%{transform:translate(6vw,5vh)}}
@keyframes drift2{0%,100%{transform:translate(0,0)}50%{transform:translate(-7vw,7vh)}}
@keyframes drift3{0%,100%{transform:translate(0,0)}50%{transform:translate(5vw,-6vh)}}

#app{
  position:relative;z-index:1;
  width:100%;max-width:440px;min-height:100vh;min-height:100dvh;
  display:flex;flex-direction:column;
  padding-bottom:calc(22px + var(--safe-bottom));
}

/* ===================== トップバー ===================== */
#topbar{
  position:sticky;top:0;z-index:20;
  background:linear-gradient(180deg, rgba(13,8,28,0.96), rgba(13,8,28,0.82));
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--panel-border);
  padding-top:calc(8px + var(--safe-top));
}
#topRow{display:flex;align-items:center;gap:10px;padding:0 12px 8px;}
.iconbtn{
  width:34px;height:34px;border-radius:12px;flex-shrink:0;
  background:var(--panel-2);color:var(--ink);
  border:1px solid var(--panel-border);font-size:17px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  transition:transform .12s ease, background .2s ease;
}
.iconbtn.small{width:28px;height:28px;font-size:14px;border-radius:9px;}
.iconbtn:active{transform:scale(.92);background:var(--panel);}
.iconbtn.hidden{display:none;}
#screenTitle{font-weight:800;font-size:16px;flex:1;min-width:0;letter-spacing:.02em;}

#statusBar{display:flex;flex-direction:column;gap:7px;padding:0 12px 9px;}
#statusBar.hidden{display:none;}
.status-main{display:flex;align-items:center;gap:12px;}
.stamina-block{flex:1;min-width:0;}
.player-name{font-size:12px;font-weight:800;color:var(--ink);margin-bottom:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.stamina-head{display:flex;align-items:baseline;gap:7px;font-size:10.5px;color:var(--ink-dim);}
.stamina-head .slabel{flex-shrink:0;}
.stamina-head b{color:var(--ink);font-size:12px;font-variant-numeric:tabular-nums;}
.stamina-head b.over{color:var(--accent);text-shadow:0 0 12px rgba(255,198,92,.6);}
#staminaTimer{margin-left:auto;font-variant-numeric:tabular-nums;}
.stamina-track{height:6px;border-radius:4px;background:rgba(255,255,255,0.09);overflow:hidden;margin-top:3px;}
#staminaFill{height:100%;width:0%;border-radius:4px;
  background:linear-gradient(90deg,var(--stamina2),var(--stamina1));transition:width .4s ease;}
#staminaFill.over{background:linear-gradient(90deg,var(--gold-2),var(--gold-1));
  box-shadow:0 0 14px rgba(255,198,92,.65);}
.rank-block{display:flex;flex-direction:column;align-items:center;gap:4px;width:54px;}
.rank-ring{
  width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 40% 30%, rgba(255,255,255,.2), transparent 60%), rgba(255,198,92,.14);
  border:1.5px solid rgba(255,198,92,.55);
  font-size:13px;font-weight:800;color:var(--accent);
  font-variant-numeric:tabular-nums;
}
.rank-exp{width:100%;height:3px;border-radius:3px;background:rgba(255,255,255,0.09);overflow:hidden;}
#rankExpFill{height:100%;width:0%;background:linear-gradient(90deg,var(--gold-2),var(--gold-1));transition:width .4s ease;}
#currencyRow{display:flex;justify-content:flex-end;gap:6px;}
.cpill{
  display:inline-flex;align-items:center;gap:3px;
  font-size:10.5px;color:var(--ink-dim);
  background:var(--panel);border:1px solid var(--panel-border);
  border-radius:999px;padding:3px 9px;
}
.cpill b{color:var(--accent);font-variant-numeric:tabular-nums;}

main{flex:1;padding:14px 14px 6px;display:flex;flex-direction:column;gap:13px;}
body.in-battle main{padding-left:3px;padding-right:3px;}

/* 画面ごとの背景。1つの疑似要素で持ち回り、絵と暗幕だけを差し替える。
   UIは半透明パネルなので、上に暗幕を重ねて可読性を保つ */
#app::before{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  opacity:0;transition:opacity .7s ease;
  background-position:center top;background-size:cover;background-repeat:no-repeat;
}
/* ホーム。床の魔法陣にキャラが立つ構図なので、上は薄く下は濃いめに落とす */
body[data-screen="home"] #app::before{
  opacity:1;
  background-image:
    linear-gradient(180deg, rgba(8,4,20,.34) 0%, rgba(8,4,20,.42) 42%, rgba(8,4,20,.80) 100%),
    url('../../assets/ui/bg.webp');
}

.screen{display:none;flex-direction:column;gap:13px;}
.screen.active{display:flex;animation:screenIn .26s ease;}
@keyframes screenIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
.stack{display:flex;flex-direction:column;gap:9px;}
.mt6{margin-top:6px;} .mt8{margin-top:8px;} .mb8{margin-bottom:8px;}

/* ===================== カード ===================== */
.card{
  background:linear-gradient(160deg, rgba(255,255,255,0.075), rgba(255,255,255,0.03));
  border:1px solid var(--panel-border);
  border-radius:var(--r-lg);padding:14px;
  box-shadow:var(--shadow-1);
}
.cardtitle{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-size:11.5px;font-weight:700;color:var(--ink-dim);
  letter-spacing:.06em;margin-bottom:10px;
}
.cardtitle .hint{font-size:10.5px;color:var(--ink-faint);font-weight:400;}
.linkbtn{background:none;border:none;color:var(--accent);font-size:11px;font-weight:700;padding:0;}
.empty{font-size:11.5px;color:var(--ink-faint);line-height:1.7;text-align:center;padding:14px 6px;}
.mstats{font-size:10.5px;color:var(--ink-dim);line-height:1.6;}
.notice{border-color:rgba(255,198,92,.3);background:rgba(255,198,92,.07);}

/* ===================== ホーム ===================== */
/* ホーム: 編成中の3人を1枚絵で見せる */
#screen-home{flex:1;min-height:0;}
#homePartyStage{position:relative;flex:0 1 auto;height:44vh;min-height:180px;display:flex;}
#homeEditBtn{position:absolute;right:2px;top:0;z-index:5;}
#homePartyArt{position:relative;flex:1;min-width:0;perspective:1200px;}

/* 回転台の3つの位置。位置クラスを付け替えるとここへ向かって動く。
   要素を作り直すとトランジションが効かないので、home.js は中身を作り直さない。 */
.hp-slot{
  position:absolute;bottom:0;left:50%;width:66%;height:86%;
  display:flex;align-items:flex-end;justify-content:center;
  pointer-events:none;transform-origin:bottom center;will-change:transform;
  transition:transform .46s cubic-bezier(.32,.02,.26,1),
             filter .46s ease, opacity .46s ease;
}
.hp-slot.pos-front{
  transform:translateX(-50%) rotateY(0deg) scale(1);
  z-index:3;opacity:1;
  /* 奥と同じ関数の並びにしておく。構成が違うと補間できず、
     前面に戻っても暗いままになることがある */
  filter:brightness(1) saturate(1) drop-shadow(0 12px 26px rgba(0,0,0,.6));
}
/* 奥の2人は内側を向かせて、円周上に置いたように見せる */
.hp-slot.pos-left{
  transform:translateX(-118%) translateY(-4%) rotateY(32deg) scale(.78);
  z-index:1;opacity:.96;
  filter:brightness(.58) saturate(.85) drop-shadow(0 8px 18px rgba(0,0,0,.5));
}
.hp-slot.pos-right{
  transform:translateX(18%) translateY(-4%) rotateY(-32deg) scale(.78);
  z-index:2;opacity:.96;
  filter:brightness(.58) saturate(.85) drop-shadow(0 8px 18px rgba(0,0,0,.5));
}

/* 前面に出す人を入れ替える△(表示の切り替えだけで、リーダーは変わらない) */
.hp-nav{
  position:absolute;top:50%;z-index:6;width:38px;height:38px;
  display:flex;align-items:center;justify-content:center;
  background:none;border:none;padding:0;
  opacity:.26;transition:opacity .18s ease;
}
.hp-nav.left {left:0;  transform:translateY(-50%);}
.hp-nav.right{right:0; transform:translateY(-50%);}
.hp-nav::before{content:'';display:block;border-style:solid;filter:drop-shadow(0 2px 4px rgba(0,0,0,.6));}
.hp-nav.left::before {border-width:10px 14px 10px 0;border-color:transparent var(--ink) transparent transparent;}
.hp-nav.right::before{border-width:10px 0 10px 14px;border-color:transparent transparent transparent var(--ink);}
.hp-nav:active{opacity:.8;}
.hp-img{width:100%;height:100%;max-width:100%;object-fit:contain;object-position:bottom center;display:block;
  transform:scale(var(--art-scale,1));transform-origin:bottom center;}
/* 前面の人は入れ替えられるので、リーダーは足元の光で示す */
.hp-slot.is-leader::after{
  content:'';position:absolute;left:50%;bottom:1%;transform:translateX(-50%);
  width:58%;height:8%;border-radius:50%;pointer-events:none;z-index:-1;
  background:radial-gradient(ellipse at center,
    color-mix(in srgb, var(--aura) 85%, transparent) 0%,
    color-mix(in srgb, var(--aura) 35%, transparent) 45%, transparent 72%);
  filter:blur(5px);
}
.hp-emoji{font-size:104px;line-height:1;}
.hp-slot.pos-left .hp-emoji,.hp-slot.pos-right .hp-emoji{font-size:78px;}
#homePartyArt .empty{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;}

/* メニュー */
.menu-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;flex:1 1 auto;grid-auto-rows:1fr;align-content:stretch;}
.menu-tile{
  /* イラストに文字が入っているので、枠もラベルも置かずアイコンだけを並べる */
  position:relative;background:none;border:none;box-shadow:none;padding:0;
  display:flex;align-items:center;justify-content:center;
  transition:transform .13s ease, filter .2s ease;
}
.menu-tile .emoji{position:relative;font-size:30px;line-height:1;filter:drop-shadow(0 3px 6px rgba(0,0,0,.4));}
/* メニューのアイコンは1枚のアトラス(4列×2行)にまとめて、リクエストを1回にしている */
.menu-tile .tile-icon{
  position:relative;width:100%;max-width:92px;aspect-ratio:1;
  background-image:url('../../assets/ui/menu_atlas.webp');
  background-size:400% 200%;background-repeat:no-repeat;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.55));
}
.t-dungeon .tile-icon{background-position:0.0000% 0%;}
.t-event .tile-icon{background-position:33.3333% 0%;}
.t-char .tile-icon{background-position:66.6667% 0%;}
.t-gacha .tile-icon{background-position:100.0000% 0%;}
.t-shop .tile-icon{background-position:0.0000% 100%;}
.t-friend .tile-icon{background-position:33.3333% 100%;}
.t-mypage .tile-icon{background-position:66.6667% 100%;}
.t-guide .tile-icon{background-position:100.0000% 100%;}
.menu-tile span:last-child{position:relative;}
.menu-tile:active{transform:scale(.92);filter:brightness(1.15);}
.t-dungeon{--tile:#FF7A59;} .t-event{--tile:#FFC65C;} .t-char{--tile:#5BE08C;}
.t-gacha{--tile:#FF86C8;} .t-shop{--tile:#45C8F1;} .t-friend{--tile:#9B7BFF;}
.t-mypage{--tile:#65E0FF;} .t-guide{--tile:#B8A4FF;}

/* ===================== ボタン ===================== */
button{font-family:inherit;cursor:pointer;}
.btn{
  font-size:13px;font-weight:800;color:#2A1A05;letter-spacing:.02em;
  background:linear-gradient(180deg,var(--gold-1),var(--gold-2));
  border:none;padding:11px 18px;border-radius:999px;
  box-shadow:0 8px 20px -8px rgba(242,169,59,0.75), inset 0 1px 0 rgba(255,255,255,.5);
  transition:transform .12s ease, filter .2s ease;
}
.btn.secondary{color:var(--ink);background:var(--panel-2);box-shadow:none;border:1px solid var(--panel-border-hi);}
.btn.ghost{color:var(--ink-dim);background:transparent;box-shadow:none;border:1px solid var(--panel-border);}
.btn.danger{color:#FFD6D6;background:rgba(255,90,90,0.14);box-shadow:none;border:1px solid rgba(255,120,120,0.38);}
.btn.block{width:100%;display:block;}
.btn.tiny{padding:6px 11px;font-size:10.5px;}
.btn:disabled{opacity:.38;}
.btn:active{transform:translateY(1px) scale(.985);filter:brightness(1.07);}

.segmented{
  display:flex;gap:4px;background:rgba(255,255,255,0.05);
  border-radius:999px;padding:4px;border:1px solid var(--panel-border);
}
.segmented button{
  flex:1;border:none;background:transparent;color:var(--ink-dim);
  font-size:12px;font-weight:700;padding:9px 0;border-radius:999px;
  transition:color .2s ease, background .25s ease;
}
.segmented button.active{
  background:linear-gradient(180deg,var(--gold-1),var(--gold-2));color:#2A1A05;
  box-shadow:0 4px 12px -4px rgba(242,169,59,.7);
}
.segmented.small button{font-size:11px;padding:7px 0;}

/* ===================== ポートレート ===================== */
.portrait{
  position:relative;flex-shrink:0;
  width:46px;height:46px;border-radius:15px;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 20%, rgba(255,255,255,.16), transparent 62%),
    linear-gradient(160deg, color-mix(in srgb, var(--aura) 34%, transparent), rgba(255,255,255,0.05));
  border:1.5px solid color-mix(in srgb, var(--rare, #fff) 55%, transparent);
  box-shadow:0 6px 16px -8px rgba(0,0,0,.8), inset 0 0 16px -8px var(--aura);
}
.portrait .p-face{font-size:25px;line-height:1;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5));}
.portrait .p-aura{
  position:absolute;right:-4px;bottom:-4px;width:18px;height:18px;border-radius:50%;
  background:rgba(12,8,24,0.92);border:1px solid color-mix(in srgb, var(--aura) 70%, transparent);
  font-size:10px;display:flex;align-items:center;justify-content:center;
}
.portrait.big{width:74px;height:74px;border-radius:22px;}
.portrait.big .p-face{font-size:42px;}
.portrait.big .p-aura{width:24px;height:24px;font-size:13px;right:-5px;bottom:-5px;}
.portrait.r5{box-shadow:0 6px 18px -6px rgba(255,123,213,.55), inset 0 0 18px -7px var(--aura);}
.portrait.r4{box-shadow:0 6px 18px -7px rgba(255,196,77,.5), inset 0 0 18px -8px var(--aura);}

.stars{color:var(--accent);font-size:11px;letter-spacing:1.5px;display:inline-block;}
.stars .dim{color:rgba(255,255,255,0.16);}
.rarity-tag{
  display:inline-block;font-size:8.5px;font-weight:900;letter-spacing:.06em;
  color:var(--rare,#fff);border:1px solid color-mix(in srgb, var(--rare,#fff) 55%, transparent);
  background:color-mix(in srgb, var(--rare,#fff) 14%, transparent);
  border-radius:5px;padding:1px 5px;vertical-align:1px;
}
.mini-tag{
  display:inline-block;font-size:8px;font-weight:900;letter-spacing:.04em;
  border-radius:4px;padding:1px 4px;margin-right:3px;
}
.mini-tag.ls{color:#FFDFA0;background:rgba(255,198,92,.18);border:1px solid rgba(255,198,92,.38);}
.mini-tag.sk{color:#B6EEFF;background:rgba(69,200,241,.16);border:1px solid rgba(69,200,241,.38);}

/* ===================== キャラ行 ===================== */
.char-row,.support-row,.shop-row,.friend-row,.aura-row{
  display:flex;align-items:center;gap:11px;
  background:linear-gradient(160deg, rgba(255,255,255,0.07), rgba(255,255,255,0.028));
  border:1px solid var(--panel-border);border-radius:var(--r-md);padding:10px 12px;
  transition:border-color .2s ease, transform .12s ease;
}
.char-row:active,.support-row:active{transform:scale(.99);}
.char-row.in-team{border-color:rgba(255,198,92,.5);background:linear-gradient(160deg, rgba(255,198,92,0.11), rgba(255,255,255,0.03));}
.char-row.locked{opacity:.34;}
.cinfo{flex:1;min-width:0;}
.cname{font-size:13px;font-weight:800;display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.owned-count{font-size:10px;color:var(--ink-faint);font-weight:400;}
.cmeta{font-size:10px;color:var(--ink-dim);margin-top:2px;}
.cstats{font-size:10px;color:var(--ink-dim);margin-top:2px;font-variant-numeric:tabular-nums;}
.cstats b{color:var(--ink-faint);font-weight:700;margin-right:2px;font-size:8.5px;letter-spacing:.04em;}
.cstats b+b{margin-left:6px;}
.cskills{font-size:9.5px;color:var(--ink-dim);margin-top:4px;line-height:1.6;}
.row-actions{display:flex;flex-direction:column;gap:5px;flex-shrink:0;}
.selbtn{padding:7px 12px;font-size:11px;}
.detailbtn{padding:5px 12px;font-size:10px;}

/* ===================== ダンジョン ===================== */
.stage-card{
  display:flex;align-items:center;gap:12px;position:relative;overflow:hidden;
  background:linear-gradient(160deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
  border:1px solid var(--panel-border);border-radius:var(--r-md);padding:13px 14px;
  box-shadow:var(--shadow-1);transition:transform .13s ease, border-color .2s ease;
}
.stage-card:active{transform:scale(.985);}
.stage-card.cleared{border-color:rgba(255,198,92,.32);}
.stage-emoji{
  font-size:28px;width:48px;height:48px;flex-shrink:0;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 25%, rgba(255,255,255,.13), transparent 65%), rgba(255,90,90,.1);
  border:1px solid var(--panel-border);
}
.stage-card .sinfo{flex:1;min-width:0;}
.stage-card .sname{font-weight:800;font-size:13.5px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.stage-card .ssub{font-size:10.5px;color:var(--ink-dim);margin-top:3px;}
.stage-card .ssub.dim{color:var(--ink-faint);}
.stage-card.locked{opacity:.36;}
.stage-card .scost{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex-shrink:0;}
.stcost{font-size:12px;font-weight:800;color:var(--stamina1);font-variant-numeric:tabular-nums;}
.stcost.short{color:#FF8A8A;}
.starrow{font-size:15px;color:var(--ink-faint);}
.clearbadge{font-size:8.5px;color:#2A1A05;font-weight:900;background:linear-gradient(180deg,var(--gold-1),var(--gold-2));border-radius:5px;padding:1px 5px;}
.hardtag{font-size:8.5px;font-weight:900;color:#FFC9C9;background:rgba(255,80,80,.2);border:1px solid rgba(255,110,110,.45);border-radius:5px;padding:1px 5px;}

/* ===================== バトル ===================== */
#screen-battle{gap:7px;flex:1;}

/* 進行ピンと情報ボタンは敵フィールドの角に重ねる(1行ぶん盤面に回す) */
#floorPips{position:absolute;left:11px;top:9px;z-index:2;display:flex;gap:3px;}
.fpip{width:13px;height:4px;border-radius:2px;background:rgba(255,255,255,0.14);}
.fpip.done{background:var(--accent);}
.fpip.now{background:var(--accent-3);box-shadow:0 0 8px var(--accent-3);}
.fpip.boss{width:17px;background:rgba(255,120,120,.32);}
.fpip.boss.done{background:var(--accent);}
.fpip.boss.now{background:#FF8A8A;box-shadow:0 0 8px #FF8A8A;}
#battleInfoBtn{position:absolute;right:8px;top:6px;z-index:2;}

#enemyStage{
  /* 盤面は縦で頭打ちになるので、敵フィールドの取り分に上限を設けて盤面へ回す */
  position:relative;flex:1 1 auto;min-height:0;max-height:24vh;overflow:hidden;
  /* 敵がいる場所の背景。全フロアで出す */
  background:
    radial-gradient(ellipse at 50% 26%, rgba(255,107,107,0.16), transparent 62%),
    linear-gradient(180deg, rgba(8,4,20,.30) 0%, rgba(8,4,20,.40) 55%, rgba(8,4,20,.72) 100%),
    url('../../assets/ui/danjon_bg.webp') center 38% / cover no-repeat,
    linear-gradient(160deg, rgba(255,255,255,0.07), rgba(255,255,255,0.025));
  border:1px solid var(--panel-border);border-radius:var(--r-lg);
  padding:9px 13px 11px;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  box-shadow:var(--shadow-1);
}
.enemy-ring{
  position:absolute;left:50%;top:14%;transform:translateX(-50%);
  width:190px;height:190px;max-width:58vw;max-height:22vh;border-radius:50%;
  background:radial-gradient(circle, rgba(255,120,120,.20), transparent 68%);
  filter:blur(8px);pointer-events:none;
}
#enemyEmoji{
  position:relative;margin:auto 0;font-size:clamp(50px, 15vh, 140px);line-height:1;
  display:flex;align-items:center;justify-content:center;min-height:0;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,0.55));
  animation:idleFloat 3.2s ease-in-out infinite;
}
.enemy-img{height:clamp(70px, 17vh, 160px);width:auto;max-width:100%;object-fit:contain;display:block;}
.enemy-emoji{font-size:inherit;line-height:1;}
/* ダンジョン一覧のサムネ(.stage-emoji は枠側で使っているので別名にする) */
.senemy-img{width:100%;height:100%;object-fit:contain;display:block;}
.senemy-emoji{font-size:inherit;line-height:1;}
@keyframes idleFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}
#enemyMeta{width:100%;display:flex;justify-content:flex-end;align-items:baseline;font-size:10px;color:var(--ink-dim);}
#enemyTurn{color:#FFB4B4;font-weight:700;}
.enemy-hp{width:100%;display:flex;align-items:center;gap:8px;}
.enemy-hp .hpbar{flex:1;}
#enemyHPText{font-size:10px;color:var(--ink-dim);font-variant-numeric:tabular-nums;flex-shrink:0;}

#partyBox{display:flex;flex-direction:column;gap:6px;}
#partyRow{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;}
.unit{
  position:relative;overflow:visible;
  background:linear-gradient(165deg, rgba(255,255,255,0.085), rgba(255,255,255,0.03));
  border:1px solid var(--panel-border);border-radius:var(--r-sm);
  padding:6px 3px 5px;display:flex;flex-direction:column;align-items:center;gap:3px;
  box-shadow:inset 0 0 18px -9px var(--aura);
  transition:transform .12s ease, border-color .2s ease;
}
.unit.ready{border-color:rgba(255,198,92,.65);box-shadow:inset 0 0 18px -9px var(--aura), 0 0 12px -3px rgba(255,198,92,.45);}
.unit:active{transform:scale(.95);}
.unit-face{position:relative;display:flex;align-items:center;justify-content:center;}
.unit-portrait{font-size:30px;line-height:1;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5));
  width:46px;height:46px;display:flex;align-items:center;justify-content:center;}
.unit-img{width:100%;height:100%;border-radius:13px;object-fit:cover;display:block;}
.unit-aura{position:absolute;right:-7px;bottom:-3px;font-size:10px;}
.unit-badge{
  position:absolute;left:-9px;top:-4px;width:15px;height:15px;border-radius:50%;
  font-size:8.5px;font-weight:900;display:flex;align-items:center;justify-content:center;
}
.unit-badge.leader{background:linear-gradient(180deg,var(--gold-1),var(--gold-2));color:#2A1A05;}
.unit-badge.support{background:linear-gradient(180deg,#B6EEFF,#2F9FD1);color:#04202E;}
.unit-cd{
  position:absolute;right:-8px;top:-6px;min-width:17px;height:17px;padding:0 3px;
  border-radius:9px;background:rgba(8,10,22,.92);border:1px solid rgba(255,255,255,.3);
  color:var(--ink);font-size:9.5px;font-weight:900;
  display:flex;align-items:center;justify-content:center;box-shadow:0 3px 8px rgba(0,0,0,.45);
}
.unit.ready{animation:skillPulse 1.4s ease-in-out infinite;}
@keyframes skillPulse{0%,100%{filter:brightness(1);}50%{filter:brightness(1.28);}}
.unit.acting{animation:unitAct .45s ease;}
@keyframes unitAct{0%{transform:translateY(0);}35%{transform:translateY(-7px) scale(1.06);}100%{transform:translateY(0);}}
.unit-pops{position:absolute;left:0;right:0;top:-4px;height:0;pointer-events:none;}
.pop{
  position:absolute;left:50%;transform:translateX(-50%);
  font-size:12px;font-weight:900;white-space:nowrap;
  text-shadow:0 2px 5px rgba(0,0,0,.9);
  animation:popUp .9s ease-out forwards;
}
.pop.dmg{color:#FFD9A8;} .pop.heal{color:#8CFFCF;}
@keyframes popUp{0%{opacity:0;transform:translate(-50%,6px) scale(.8);}
  22%{opacity:1;transform:translate(-50%,-6px) scale(1.12);}
  100%{opacity:0;transform:translate(-50%,-30px) scale(.95);}}

#playerHPRow{display:flex;align-items:center;gap:8px;}
.hp-label{font-size:9px;font-weight:800;color:var(--ink-faint);letter-spacing:.06em;}
#playerHPRow .hpbar{flex:1;}
#playerHPText{font-size:10px;color:var(--ink-dim);font-variant-numeric:tabular-nums;}
#playerHPRow.low .fill.player{background:linear-gradient(90deg,var(--hp-low2),var(--hp-low1));}
#playerHPRow.low{animation:lowPulse 1.4s ease-in-out infinite;}
@keyframes lowPulse{0%,100%{opacity:1;}50%{opacity:.68;}}

.hpbar{height:9px;border-radius:6px;background:rgba(0,0,0,0.34);overflow:hidden;
  border:1px solid rgba(255,255,255,0.08);}
.hpbar .fill{height:100%;border-radius:6px;transition:width .4s cubic-bezier(.3,.9,.4,1);}
.fill.enemy{background:linear-gradient(90deg,var(--hp-enemy2),var(--hp-enemy1));box-shadow:0 0 10px -2px var(--hp-enemy1);}
.fill.player{background:linear-gradient(90deg,var(--hp-player2),var(--hp-player1));box-shadow:0 0 10px -2px var(--hp-player1);}
.flash{animation:flashHit .35s ease;}
@keyframes flashHit{0%{filter:brightness(2.2);}100%{filter:brightness(1);}}
.shake{animation:shakeIt .34s cubic-bezier(.36,.07,.19,.97);}
@keyframes shakeIt{10%,90%{transform:translateX(-2px);}20%,80%{transform:translateX(3px);}
  30%,50%,70%{transform:translateX(-5px);}40%,60%{transform:translateX(5px);}}


#banner{
  position:absolute;left:8px;right:8px;top:50%;
  font-size:12.5px;font-weight:800;text-align:center;
  padding:6px 8px;border-radius:11px;
  background:rgba(8,5,18,0.82);backdrop-filter:blur(5px);
  border:1px solid var(--panel-border);
  opacity:0;transform:translateY(-38%);transition:opacity .18s ease, transform .18s ease;
  pointer-events:none;line-height:1.5;
}
#banner.show{opacity:1;transform:translateY(-50%);}
#banner .chain{color:var(--accent);}
#banner .dmg{color:#FFD9A8;}
#banner .heal{color:var(--c3);}
#banner .simul{color:var(--accent-3);font-size:11px;}
#banner .miss{color:#FF8A8A;}
#banner .bskill{color:var(--accent-3);}

#boardWrap{
  position:relative;align-self:center;padding:4px;flex-shrink:0;
  border-radius:24px;
  background:linear-gradient(160deg, rgba(255,255,255,0.08), rgba(255,255,255,0.025));
  border:1px solid var(--panel-border-hi);
  box-shadow:var(--shadow-2), inset 0 1px 0 rgba(255,255,255,.08);
}
canvas{display:block;border-radius:16px;touch-action:none;}

/* ===================== キャラクター画面 ===================== */
#characterTeamPane{flex-direction:column;gap:13px;display:flex;}
.teamslots{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;}
.teamslot{
  position:relative;border-radius:var(--r-md);
  background:var(--panel);border:1px dashed var(--panel-border);
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:5px;
  padding:17px 3px 8px;min-height:104px;
}
.teamslot.filled{border-style:solid;border-color:color-mix(in srgb, var(--aura) 50%, transparent);
  background:linear-gradient(165deg, color-mix(in srgb, var(--aura) 12%, transparent), rgba(255,255,255,0.03));}
.slot-label{position:absolute;top:4px;left:0;right:0;text-align:center;font-size:8px;color:var(--ink-faint);font-weight:700;letter-spacing:.05em;}
.slot-name{font-size:9px;color:var(--ink-dim);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.slot-empty{font-size:26px;color:var(--ink-faint);line-height:1.7;}
.slot-move{display:flex;gap:3px;}
.slot-move .mv{
  width:19px;height:16px;border-radius:5px;font-size:8px;line-height:1;
  background:rgba(255,255,255,0.08);border:1px solid var(--panel-border);color:var(--ink-dim);
  display:flex;align-items:center;justify-content:center;
}
.slot-move .mv:disabled{opacity:.25;}
.team-summary{margin-top:11px;display:flex;flex-direction:column;gap:5px;}
.ts-row{display:flex;justify-content:space-between;align-items:center;gap:8px;
  font-size:10.5px;color:var(--ink-dim);padding:5px 2px;border-bottom:1px solid var(--panel-border);}
.ts-row:last-child{border-bottom:none;}
.ts-row b{color:var(--ink);font-size:12px;font-variant-numeric:tabular-nums;}
.aura-chips{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end;}
.aura-chip{font-size:9.5px;font-weight:700;border-radius:6px;padding:2px 6px;
  color:var(--aura);background:color-mix(in srgb, var(--aura) 15%, transparent);
  border:1px solid color-mix(in srgb, var(--aura) 42%, transparent);}

.skill-line{display:flex;gap:8px;align-items:flex-start;font-size:10.5px;color:var(--ink-dim);
  line-height:1.65;padding:8px 0;border-bottom:1px solid var(--panel-border);}
.skill-line:last-child{border-bottom:none;}
.skill-line b{color:var(--ink);font-size:11.5px;}
.skill-line.off{opacity:.5;}
.skill-tag{
  flex-shrink:0;font-size:8px;font-weight:900;letter-spacing:.05em;
  border-radius:5px;padding:2px 5px;margin-top:2px;
}
.skill-tag.ls{color:#FFDFA0;background:rgba(255,198,92,.18);border:1px solid rgba(255,198,92,.38);}
.skill-tag.sk{color:#B6EEFF;background:rgba(69,200,241,.16);border:1px solid rgba(69,200,241,.38);}
.off-note{display:block;font-size:9.5px;color:var(--ink-faint);font-style:normal;margin-top:2px;}

/* ===================== ガチャ / ショップ ===================== */
.gacha-card{
  position:relative;overflow:hidden;border-radius:var(--r-lg);
  border:1px solid var(--panel-border);padding:18px;text-align:center;
  box-shadow:var(--shadow-1);
}
.g-frepo{background:linear-gradient(150deg, rgba(255,134,200,0.20), rgba(155,123,255,0.10));}
.g-orb{background:linear-gradient(150deg, rgba(69,200,241,0.20), rgba(101,224,255,0.08));}
.gacha-card::after{content:'';position:absolute;inset:-40% -10% auto;height:120px;
  background:radial-gradient(ellipse, rgba(255,255,255,.16), transparent 68%);pointer-events:none;}
.gacha-card .gtitle{position:relative;font-size:16px;font-weight:900;margin-bottom:5px;}
.gacha-card .gcost{position:relative;font-size:10.5px;color:var(--ink-dim);margin-bottom:13px;}
.rate-row{display:flex;flex-direction:column;gap:6px;padding:8px 0;border-bottom:1px solid var(--panel-border);}
.rate-row:last-child{border-bottom:none;}
.rate-label{font-size:11px;font-weight:700;}
.rate-items{display:flex;gap:5px;flex-wrap:wrap;}
.rate-item{font-size:9.5px;color:var(--ink-dim);border-radius:6px;padding:2px 7px;
  background:color-mix(in srgb, var(--rare) 13%, transparent);
  border:1px solid color-mix(in srgb, var(--rare) 40%, transparent);}
.rate-item b{color:var(--rare);margin-right:4px;}

.shop-emoji{font-size:26px;width:46px;height:46px;flex-shrink:0;border-radius:15px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,0.06);border:1px solid var(--panel-border);}
.shop-row .sinfo2{flex:1;min-width:0;}
.shop-row .sname2{font-size:12.5px;font-weight:800;}
.shop-job{font-size:10px;color:var(--ink-dim);font-weight:400;margin-left:6px;}
.shop-row .sprice{font-size:10px;color:var(--ink-dim);margin-top:3px;}
.buybtn{padding:9px 13px;font-size:11.5px;flex-shrink:0;font-variant-numeric:tabular-nums;}

/* ===================== 設定 / マイページ ===================== */
.setting-row{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 0;border-bottom:1px solid var(--panel-border);}
.setting-row:last-child{border-bottom:none;}
.setting-row label{font-size:12px;color:var(--ink-dim);}
.setting-row input[type=range]{width:136px;}
input[type=range]{accent-color:var(--accent);}
.setting-row .val{font-size:12px;color:var(--accent);font-weight:700;}
.overtag{font-size:8.5px;font-weight:900;color:#2A1A05;background:linear-gradient(180deg,var(--gold-1),var(--gold-2));border-radius:5px;padding:1px 5px;}
.idbox{display:flex;align-items:center;gap:8px;background:rgba(0,0,0,0.22);
  border:1px solid var(--panel-border);border-radius:11px;padding:9px 11px;
  font-size:12px;font-variant-numeric:tabular-nums;}
.idbox input{flex:1;background:transparent;border:none;color:var(--ink);font-size:12px;font-family:inherit;min-width:0;}
.idbox input:focus{outline:none;}
.idbox span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;}

.profile-head{display:flex;align-items:center;gap:13px;margin-bottom:13px;}
.profile-avatar{
  width:58px;height:58px;border-radius:19px;flex-shrink:0;font-size:31px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 45% 25%, rgba(255,255,255,.18), transparent 62%), rgba(255,198,92,.1);
  border:1.5px solid rgba(255,198,92,.4);
}
.profile-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;}
#profileNameInput{
  background:rgba(0,0,0,0.22);border:1px solid var(--panel-border);border-radius:10px;
  color:var(--ink);padding:9px 11px;font-size:13px;font-family:inherit;width:100%;
}
#profileNameInput:focus{outline:none;border-color:rgba(255,198,92,.55);}
/* アカウント(ID/パスワード登録) */
.acc-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.acc-warn{color:#FFC98C;}
.acc-msg{color:var(--ink);background:rgba(0,0,0,0.22);border-radius:10px;padding:8px 10px;}
.acc-msg.ng{color:#FF9A9A;}

/* ダンジョン: 章タブと曜日ダンジョン */
.segmented.sub{margin-bottom:9px;}
.chapter-bar{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch;}
.chapter-bar::-webkit-scrollbar{display:none;}
.chapter-btn{
  flex-shrink:0;min-width:62px;padding:6px 8px;border-radius:12px;
  background:rgba(255,255,255,0.05);border:1px solid var(--panel-border);color:var(--ink-dim);
  display:flex;flex-direction:column;align-items:center;gap:2px;line-height:1.2;
}
.chapter-btn b{font-size:13px;font-weight:900;color:var(--ink);}
.chapter-btn span{font-size:8.5px;white-space:nowrap;}
.chapter-btn.active{background:rgba(255,198,92,.16);border-color:rgba(255,198,92,.5);}
.chapter-btn.active b{color:var(--accent);}
.chapter-btn.locked{opacity:.45;}
.chapter-btn.locked b{color:var(--ink-dim);}

.daily-head{background:linear-gradient(160deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
  border:1px solid var(--panel-border);border-radius:var(--r-md);padding:11px 13px;}
.daily-title{font-size:15px;font-weight:900;display:flex;align-items:center;gap:8px;}
.daily-day{font-size:10px;font-weight:700;color:var(--accent);
  background:rgba(255,198,92,.16);border-radius:8px;padding:2px 7px;}
.daily-note{font-size:10.5px;color:var(--ink-dim);margin-top:3px;}
.daily-week{display:flex;gap:5px;margin-top:9px;}
.dw{width:24px;height:24px;border-radius:8px;font-size:10px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,0.05);border:1px solid var(--panel-border);color:var(--ink-dim);}
.dw.now{background:rgba(255,198,92,.2);border-color:rgba(255,198,92,.5);color:var(--accent);}

/* プロフィールアイコン(=貸し出しキャラクター) */
.profile-icon{
  width:38px;height:38px;border-radius:13px;flex-shrink:0;overflow:hidden;padding:0;
  background:rgba(255,255,255,0.06);border:1px solid var(--panel-border-hi);
  display:flex;align-items:center;justify-content:center;
}
.profile-icon:active{transform:scale(.94);}
.pi-img{width:100%;height:100%;object-fit:cover;display:block;}
.pi-emoji{font-size:21px;line-height:1;}
.profile-avatar .pi-img{border-radius:0;}

/* 開眼 */
.aw-pips{display:inline-flex;gap:2px;margin-left:5px;vertical-align:middle;}
.aw-pip{font-size:8px;color:rgba(255,255,255,.22);line-height:1;}
.aw-pip.on{color:var(--accent);text-shadow:0 0 6px rgba(255,198,92,.7);}
.chip.awa{background:rgba(255,198,92,.16);border-color:rgba(255,198,92,.4);color:var(--accent);}
.aw-list{display:flex;flex-direction:column;gap:5px;margin:9px 0 11px;}
.aw-row{display:flex;align-items:center;gap:9px;font-size:11px;color:var(--ink-dim);
  background:rgba(255,255,255,0.04);border:1px solid var(--panel-border);
  border-radius:10px;padding:7px 10px;}
.aw-row.done{color:var(--ink);border-color:rgba(255,198,92,.34);background:rgba(255,198,92,.08);}
.aw-row.next{border-color:rgba(101,224,255,.4);}
.aw-row .aw-no{width:16px;height:16px;border-radius:50%;flex-shrink:0;font-size:9px;font-weight:900;
  display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.1);}
.aw-row.done .aw-no{background:linear-gradient(180deg,var(--gold-1),var(--gold-2));color:#2A1A05;}
.aw-row .aw-eff{flex:1;min-width:0;}
.aw-row i{font-style:normal;color:var(--accent);font-size:11px;}
.aw-row .aw-nexttag{color:var(--accent-3);font-size:9.5px;}

.icon-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin-bottom:12px;}
.icon-choice{
  width:100%;aspect-ratio:1;border-radius:13px;font-size:21px;
  background:rgba(255,255,255,0.05);border:1px solid var(--panel-border);
  display:flex;align-items:center;justify-content:center;transition:transform .12s ease;
}
.icon-choice:active{transform:scale(.92);}
.icon-choice.active{background:rgba(255,198,92,0.2);border-color:var(--accent);
  box-shadow:0 0 12px -3px rgba(255,198,92,.6);}

.friend-avatar{width:40px;height:40px;border-radius:13px;flex-shrink:0;font-size:20px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,0.07);border:1px solid var(--panel-border);}
.friend-row .greetbtn{padding:8px 12px;font-size:11px;flex-shrink:0;}
.friend-del{
  width:27px;height:27px;border-radius:9px;flex-shrink:0;
  background:rgba(255,255,255,0.06);border:1px solid var(--panel-border);
  color:var(--ink-faint);font-size:11px;
}
.placeholder-card{text-align:center;padding:44px 16px;color:var(--ink-dim);font-size:13px;line-height:1.9;}
.ph-emoji{display:block;font-size:46px;margin-bottom:14px;}

/* あそびかた */
.guide-list{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:11px;
  font-size:11px;color:var(--ink-dim);line-height:1.75;}
.guide-list li::marker{color:var(--accent);font-weight:800;}
.guide-list b{color:var(--ink);font-size:12px;}
.aura-orb{width:42px;height:42px;border-radius:50%;flex-shrink:0;font-size:20px;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 38% 28%, rgba(255,255,255,.4), color-mix(in srgb, var(--aura) 70%, transparent) 62%);
  box-shadow:0 0 16px -4px var(--aura);}
.aura-label{font-size:8.5px;font-weight:900;letter-spacing:.1em;color:var(--aura);}

/* ===================== モーダル ===================== */
.modal{
  position:fixed;inset:0;z-index:50;display:none;
  align-items:center;justify-content:center;padding:20px;
  padding-top:calc(20px + var(--safe-top));
  padding-bottom:calc(20px + var(--safe-bottom));
  background:rgba(6,3,14,0.88);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
}
.modal.show{display:flex;animation:fadeIn .2s ease;}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
.modal-card{
  position:relative;
  background:linear-gradient(170deg, rgba(48,34,80,0.98), rgba(24,16,44,0.99));
  border:1px solid var(--panel-border-hi);border-radius:24px;
  padding:20px;width:100%;max-width:330px;max-height:100%;overflow:auto;
  box-shadow:var(--shadow-2);
  animation:modalIn .26s cubic-bezier(.2,.9,.3,1.1);
}
.modal-card.wide{max-width:390px;}
.confirm-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;}
/* リザルトのフレンド登録の誘い */
#resultFriendBox{margin-top:13px;padding-top:13px;border-top:1px solid var(--panel-border);}
.rfriend-note{font-size:11.5px;color:var(--ink);line-height:1.6;margin-bottom:9px;text-align:center;}
.rfriend-note b{color:var(--accent);}
.skill-confirm-head{display:flex;align-items:center;gap:11px;margin-bottom:12px;}
.skill-confirm-face{width:52px;height:52px;border-radius:16px;flex-shrink:0;overflow:hidden;
  display:flex;align-items:center;justify-content:center;font-size:30px;
  background:color-mix(in srgb, var(--aura, #888) 20%, transparent);
  border:1px solid color-mix(in srgb, var(--aura, #888) 45%, transparent);}
.sc-img{width:100%;height:100%;object-fit:cover;display:block;}
.sc-emoji{font-size:30px;line-height:1;}
.skill-confirm-who{min-width:0;}
.skill-confirm-who b{display:block;font-size:14px;}
.skill-confirm-who span{font-size:10px;color:var(--ink-dim);}
.skill-confirm-box{background:rgba(0,0,0,0.26);border:1px solid var(--panel-border);
  border-radius:var(--r-md);padding:11px 12px;margin-bottom:15px;}
.skill-confirm-box .sname{font-size:13.5px;font-weight:900;margin-bottom:5px;}
.skill-confirm-box .sdesc{font-size:11px;color:var(--ink);line-height:1.6;}
.skill-confirm-box .sct{font-size:10px;color:var(--ink-dim);margin-top:7px;}
@keyframes modalIn{from{opacity:0;transform:translateY(16px) scale(.96);}to{opacity:1;transform:none;}}
.modal-card h3{margin:0 0 13px;font-size:15.5px;font-weight:900;text-align:center;letter-spacing:.03em;}
.modal-sec{margin-bottom:15px;}
.scroll-area{max-height:44vh;overflow:auto;-webkit-overflow-scrolling:touch;margin-top:9px;}

/* サポート選択 */
.support-row .owner{font-size:9.5px;color:var(--ink-dim);font-weight:400;}
.support-row.npc{border-color:rgba(101,224,255,.24);}
.support-row .ls-desc{display:block;font-size:9px;color:var(--ink-faint);margin-top:1px;}
.locked-note{border:1px dashed var(--panel-border);border-radius:var(--r-md);}
.locked-note b{color:var(--accent);}

/* パーティ情報 */
.pinfo{background:rgba(255,255,255,0.045);border:1px solid var(--panel-border);
  border-radius:var(--r-md);padding:11px 12px;}
.pinfo-head{display:flex;align-items:center;gap:10px;margin-bottom:6px;}
.pinfo-portrait{font-size:26px;width:40px;height:40px;border-radius:13px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb, var(--aura) 20%, transparent);
  border:1px solid color-mix(in srgb, var(--aura) 45%, transparent);overflow:hidden;}
.pinfo-img{width:100%;height:100%;object-fit:cover;display:block;}
.pinfo-id{flex:1;min-width:0;}
.pinfo-id b{font-size:13px;}
.pinfo-sub{display:block;font-size:9.5px;color:var(--ink-dim);margin-top:1px;}
.pinfo-stat{font-size:9px;color:var(--ink-dim);text-align:right;line-height:1.5;flex-shrink:0;font-variant-numeric:tabular-nums;}

/* キャラ詳細 */
.cd-head{display:flex;gap:14px;align-items:center;margin-bottom:14px;}
.cd-id{flex:1;min-width:0;}
.cd-name{font-size:19px;font-weight:900;}
.cd-job{font-size:10.5px;color:var(--ink-dim);margin-bottom:4px;}
.cd-tags{display:flex;gap:5px;flex-wrap:wrap;margin-top:6px;}
.chip{font-size:9.5px;border-radius:7px;padding:2px 8px;color:var(--ink-dim);
  background:rgba(255,255,255,0.06);border:1px solid var(--panel-border);}
.chip.aura{color:var(--aura);border-color:color-mix(in srgb, var(--aura) 45%, transparent);
  background:color-mix(in srgb, var(--aura) 14%, transparent);}
.cd-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:12px;}
.cd-stats div{background:rgba(0,0,0,0.22);border:1px solid var(--panel-border);
  border-radius:12px;padding:9px 4px;text-align:center;}
.cd-stats span{display:block;font-size:8.5px;color:var(--ink-faint);font-weight:800;letter-spacing:.08em;}
.cd-stats b{font-size:16px;font-variant-numeric:tabular-nums;}
.cd-note{font-size:10.5px;color:var(--ink-faint);text-align:center;margin-top:10px;}
.detail-actions{margin-top:14px;}

/* リザルト */
#resultCard{text-align:center;}
#resultTitle{font-size:24px;font-weight:900;letter-spacing:.06em;margin-bottom:14px;
  background:linear-gradient(90deg,var(--gold-1),var(--accent),var(--gold-1));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 8px rgba(255,198,92,.4));}
#resultCard.defeat #resultTitle{background:linear-gradient(90deg,#FFB4B4,#FF6B6B,#FFB4B4);
  -webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 2px 8px rgba(255,107,107,.35));}
.rstat{display:flex;justify-content:space-between;font-size:11px;color:var(--ink-dim);
  padding:7px 2px;border-bottom:1px solid var(--panel-border);}
.rstat b{color:var(--ink);font-size:12.5px;font-variant-numeric:tabular-nums;}
.rnew{color:var(--accent);font-size:9px;}
#resultRewards{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:15px 0;}
.rrow{font-size:11.5px;color:var(--ink-dim);background:rgba(255,255,255,0.06);
  border:1px solid var(--panel-border);border-radius:999px;padding:6px 13px;}
.rrow b{color:var(--accent);font-variant-numeric:tabular-nums;}
.rrow.rnone{color:#FF8A8A;}
.rankup{background:linear-gradient(160deg, rgba(255,198,92,0.20), rgba(255,198,92,0.06));
  border:1px solid rgba(255,198,92,0.45);border-radius:15px;padding:12px;
  font-size:13px;font-weight:800;color:var(--accent);margin-bottom:13px;
  box-shadow:0 0 24px -10px rgba(255,198,92,.7);}
.rankup span{display:block;margin-top:4px;font-size:10.5px;color:var(--ink-dim);font-weight:400;}

/* ガチャ結果 */
#pullCard{text-align:center;max-width:310px;overflow:hidden;}
.pull-burst{position:absolute;left:50%;top:54px;transform:translate(-50%,-50%);
  width:230px;height:230px;border-radius:50%;pointer-events:none;
  background:conic-gradient(from 0deg, transparent, color-mix(in srgb, var(--rare,#fff) 45%, transparent), transparent 45%, color-mix(in srgb, var(--aura,#fff) 45%, transparent), transparent 70%);
  filter:blur(16px);opacity:.75;animation:spinBurst 9s linear infinite;}
@keyframes spinBurst{to{transform:translate(-50%,-50%) rotate(360deg);}}
#pullCard .pemoji{position:relative;font-size:62px;margin-bottom:10px;
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.6));animation:pullPop .5s cubic-bezier(.2,1.3,.4,1);}
@keyframes pullPop{0%{transform:scale(.3) rotate(-14deg);opacity:0;}100%{transform:none;opacity:1;}}
#pullCard .pname{position:relative;font-size:18px;font-weight:900;margin-bottom:5px;
  display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;}
.pjob{font-size:10.5px;color:var(--ink-dim);font-weight:400;width:100%;}
.newtag{font-size:8.5px;font-weight:900;color:#2A1A05;
  background:linear-gradient(180deg,var(--gold-1),var(--gold-2));border-radius:5px;padding:1px 5px;}
#pullCard .pstars{position:relative;margin-bottom:7px;display:flex;align-items:center;justify-content:center;gap:7px;}
#pullCard .pstats{position:relative;font-size:11px;color:var(--ink-dim);margin-bottom:13px;line-height:1.7;}
.pskills{position:relative;text-align:left;margin-bottom:15px;
  background:rgba(0,0,0,0.24);border:1px solid var(--panel-border);border-radius:14px;padding:4px 12px;}

.toast{
  position:fixed;bottom:calc(22px + var(--safe-bottom));left:50%;transform:translateX(-50%) translateY(8px);
  background:rgba(18,12,34,0.96);border:1px solid var(--panel-border-hi);color:var(--ink);
  font-size:12px;font-weight:700;padding:11px 18px;border-radius:999px;z-index:60;
  opacity:0;transition:opacity .22s ease, transform .22s ease;pointer-events:none;
  box-shadow:var(--shadow-2);max-width:86vw;text-align:center;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* ===================== 小さい端末 ===================== */
@media (max-height:740px){
  #enemyEmoji{font-size:clamp(40px, 11vh, 84px);}
  #enemyStage{padding:6px 11px 9px;gap:4px;}
  #enemyMeta{font-size:9.5px;}
  .unit{padding:5px 2px 4px;}
  .unit-portrait{font-size:25px;width:38px;height:38px;}
  #screen-battle{gap:5px;}
  main{padding:9px 13px 4px;}
  .enemy-ring{display:none;}
}
@media (max-width:360px){
  .menu-grid{grid-template-columns:repeat(3,1fr);}
  .portrait{width:42px;height:42px;}
  .portrait .p-face{font-size:22px;}
}

/* サポート枠のユニットは縁の色を変えて区別する */
.unit.support{border-color:rgba(101,224,255,.42);}
.unit-badge.support{font-size:9px;background:rgba(10,26,40,.95);border:1px solid rgba(101,224,255,.6);}

/* =========================================================
 * イラスト(画像が無いときは絵文字にフォールバック)
 * =======================================================*/
.portrait .p-face{display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;border-radius:12px;overflow:hidden;}
.portrait.big .p-face{border-radius:19px;}
.ps-cell .p-face{border-radius:9px;}
.p-emoji{font-size:25px;line-height:1;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5));}
.p-img{width:100%;height:100%;object-fit:cover;display:block;}
.portrait.big .p-emoji{font-size:42px;}
.portrait.evolved{
  border-width:2px;
  box-shadow:0 6px 20px -6px var(--rare), inset 0 0 20px -7px var(--aura), 0 0 0 1px rgba(255,255,255,.18);
}
.portrait.evolved::after{
  content:'';position:absolute;inset:-4px;border-radius:inherit;pointer-events:none;
  background:conic-gradient(from 0deg, transparent, var(--rare), transparent 40%, var(--aura), transparent 75%);
  filter:blur(6px);opacity:.65;animation:spinBurst 5s linear infinite;z-index:-1;
}
.cd-art{
  display:block;width:100%;max-width:230px;margin:0 auto 4px;border-radius:18px;overflow:hidden;
  background:radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--aura) 28%, transparent), transparent 70%);
}
.cda-img{width:100%;display:block;}
.cda-emoji{font-size:72px;display:block;text-align:center;padding:22px 0;}
.cd-head:has(.cd-art){flex-direction:column;gap:8px;text-align:center;}
.cd-head:has(.cd-art) .cd-tags{justify-content:center;}
.cd-flavor{font-size:10.5px;color:var(--ink-faint);line-height:1.7;text-align:center;margin-bottom:10px;}
.evo-tag{font-size:8px;font-weight:900;color:#2A1A05;border-radius:5px;padding:1px 5px;
  background:linear-gradient(180deg,#FFC9F0,#FF7BD5);}

/* =========================================================
 * レベル
 * =======================================================*/
.lvbar{display:flex;align-items:center;gap:6px;margin-top:4px;}
.lvnum{font-size:9.5px;color:var(--ink-dim);font-variant-numeric:tabular-nums;flex-shrink:0;}
.lvnum b{color:var(--ink);font-size:11px;}
.lvnum i{font-style:normal;color:var(--ink-faint);font-size:9px;}
.lvtrack{flex:1;height:4px;border-radius:3px;background:rgba(255,255,255,0.10);overflow:hidden;min-width:40px;}
.lvfill{display:block;height:100%;border-radius:3px;
  background:linear-gradient(90deg,var(--accent-3),var(--accent));transition:width .4s ease;}
.lvbar.max .lvfill{background:linear-gradient(90deg,var(--gold-2),var(--gold-1));}
.lvmax{font-size:8px;font-weight:900;color:#2A1A05;border-radius:4px;padding:1px 4px;
  background:linear-gradient(180deg,var(--gold-1),var(--gold-2));}
.slot-lv{font-size:8.5px;color:var(--accent);font-weight:700;font-variant-numeric:tabular-nums;}
.char-row.evolvable{border-color:rgba(255,123,213,.5);
  box-shadow:0 0 14px -6px rgba(255,123,213,.7);}

/* =========================================================
 * 進化素材
 * =======================================================*/
.material-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;}
.mt-chip{
  display:flex;align-items:center;gap:7px;padding:8px 10px;border-radius:12px;
  background:color-mix(in srgb, var(--mt) 11%, rgba(255,255,255,0.03));
  border:1px solid color-mix(in srgb, var(--mt) 34%, transparent);
}
.mt-emoji{font-size:15px;line-height:1;}
.mt-name{flex:1;min-width:0;font-size:10px;color:var(--ink-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mt-count{font-size:13px;font-variant-numeric:tabular-nums;color:var(--mt);}

/* =========================================================
 * 進化UI
 * =======================================================*/
.evo-box{margin-top:14px;padding-top:12px;border-top:1px solid var(--panel-border);}
.evo-title{font-size:12px;font-weight:800;color:var(--accent);margin-bottom:9px;
  display:flex;align-items:center;gap:7px;}
.evo-next{font-size:8.5px;font-weight:900;color:#2A1A05;border-radius:5px;padding:1px 6px;
  background:linear-gradient(180deg,#FFC9F0,#FF7BD5);}
.evo-reqs{display:flex;flex-direction:column;gap:4px;margin-bottom:10px;}
.evo-req{display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-size:10.5px;color:var(--ink-dim);background:rgba(0,0,0,0.2);
  border:1px solid var(--panel-border);border-radius:9px;padding:6px 10px;}
.evo-req b{color:#FF9A9A;font-variant-numeric:tabular-nums;}
.evo-req.ok b{color:#8CFFCF;}
.evo-req i{font-style:normal;color:#8CFFCF;font-size:11px;}
.evo-preview{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:10px;}
.evo-col{background:rgba(0,0,0,0.22);border:1px solid var(--panel-border);border-radius:11px;
  padding:7px 3px;text-align:center;font-size:10px;color:var(--ink-dim);}
.evo-col span{display:block;font-size:8px;font-weight:800;letter-spacing:.06em;color:var(--ink-faint);}
.evo-col b{font-variant-numeric:tabular-nums;font-size:11px;color:var(--ink-dim);}
.evo-col i{font-style:normal;margin:0 3px;color:var(--ink-faint);}
.evo-col b.up{color:#8CFFCF;font-size:12.5px;}
.evo-skillup{background:rgba(0,0,0,0.2);border:1px solid var(--panel-border);
  border-radius:13px;padding:2px 11px;margin-bottom:8px;}
.evo-note{font-size:10px;color:var(--accent-2);text-align:center;padding:4px 0;}
.evo-note.warn{color:#FF9A9A;}
.evo-done{font-size:11px;color:var(--accent);text-align:center;padding:10px 0;}
.btn.evo{background:linear-gradient(180deg,#FFC9F0,#FF7BD5);color:#3A0B28;
  box-shadow:0 8px 20px -8px rgba(255,123,213,.8), inset 0 1px 0 rgba(255,255,255,.5);}
.btn.evo:disabled{filter:grayscale(.6);}

#evoResultCard{text-align:center;position:relative;overflow:hidden;}
#evoResultCard h3{color:var(--accent-2);letter-spacing:.12em;}
.evo-burst{position:absolute;left:50%;top:96px;transform:translate(-50%,-50%);
  width:280px;height:280px;border-radius:50%;pointer-events:none;
  background:conic-gradient(from 0deg, transparent, #FF7BD5, transparent 42%, #FFC65C, transparent 72%);
  filter:blur(20px);opacity:.7;animation:spinBurst 7s linear infinite;}
.evo-res-head{position:relative;display:flex;justify-content:center;margin-bottom:10px;
  animation:pullPop .55s cubic-bezier(.2,1.3,.4,1);}
.evo-res-name{position:relative;font-size:18px;font-weight:900;}
.evo-res-star{position:relative;font-size:13px;color:var(--ink-dim);margin:4px 0 12px;}
.evo-res-star b{color:var(--accent-2);font-size:17px;}
.evo-res-stats{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:10px;}
.evo-res-stats div{background:rgba(0,0,0,0.24);border:1px solid var(--panel-border);
  border-radius:11px;padding:7px 3px;}
.evo-res-stats span{display:block;font-size:8px;color:var(--ink-faint);font-weight:800;letter-spacing:.06em;}
.evo-res-stats b{font-size:10.5px;color:#8CFFCF;font-variant-numeric:tabular-nums;}
#evoResultCard .skill-line{text-align:left;}

/* =========================================================
 * ガチャ画面
 * =======================================================*/
.pickup-card{
  position:relative;overflow:hidden;display:flex;align-items:center;gap:14px;
  border-radius:var(--r-lg);padding:16px;
  background:linear-gradient(150deg, color-mix(in srgb, var(--aura) 26%, transparent), rgba(255,255,255,0.04));
  border:1px solid color-mix(in srgb, var(--aura) 42%, transparent);
  box-shadow:var(--shadow-1);
}
.pickup-card::before{content:'';position:absolute;inset:-50% -20% auto;height:180px;
  background:radial-gradient(ellipse, color-mix(in srgb, var(--aura) 40%, transparent), transparent 70%);
  filter:blur(20px);pointer-events:none;}
.pu-label{position:absolute;top:9px;right:12px;font-size:8.5px;font-weight:900;letter-spacing:.14em;
  color:#2A1A05;background:linear-gradient(180deg,var(--gold-1),var(--gold-2));
  border-radius:5px;padding:2px 7px;}
.pu-info{position:relative;flex:1;min-width:0;}
.pu-name{font-size:17px;font-weight:900;}
.pu-job{font-size:10px;color:var(--ink-dim);margin-bottom:4px;}
.pu-ls{margin-top:6px;font-size:10.5px;}
.pu-lsdesc{display:block;font-size:9.5px;color:var(--ink-dim);line-height:1.5;margin-top:1px;}
.gbtns{position:relative;display:flex;gap:8px;}
.gbtns .btn{flex:1;padding:11px 6px;font-size:12px;display:flex;flex-direction:column;
  align-items:center;gap:1px;line-height:1.25;}
.gbtns .btn b{font-variant-numeric:tabular-nums;}
.gbtns .btn i{font-style:normal;font-size:8px;opacity:.8;}
.rate-note{font-size:9.5px;color:var(--ink-faint);line-height:1.7;padding-top:8px;}

/* =========================================================
 * 召喚演出
 * =======================================================*/
.gacha-stage{position:fixed;inset:0;z-index:70;display:none;pointer-events:none;}
.gacha-stage.show{display:block;pointer-events:auto;}
.gs-veil{position:absolute;inset:0;
  background:radial-gradient(circle at 50% 46%, rgba(14,8,30,.95), rgba(3,1,8,.995));
  opacity:0;transition:opacity .4s ease;}
.gacha-stage.show .gs-veil{opacity:1;}

.gs-circle{
  position:absolute;left:50%;top:46%;border-radius:50%;pointer-events:none;
  transform:translate(-50%,-50%) scale(.2);opacity:0;
  transition:transform .8s cubic-bezier(.2,.9,.3,1), opacity .6s ease;
}
.gs-c1{width:min(76vw,330px);aspect-ratio:1;border:2px solid var(--stage-a,#65E0FF);
  box-shadow:0 0 34px -6px var(--stage-a,#65E0FF), inset 0 0 34px -8px var(--stage-a,#65E0FF);}
.gs-c1::before{content:'';position:absolute;inset:-16px;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,
    var(--stage-a,#65E0FF) 0deg 1.2deg, transparent 1.2deg 9deg);
  mask:radial-gradient(circle closest-side, transparent 0 calc(100% - 13px), #000 calc(100% - 13px) calc(100% - 4px), transparent calc(100% - 4px));
  -webkit-mask:radial-gradient(circle closest-side, transparent 0 calc(100% - 13px), #000 calc(100% - 13px) calc(100% - 4px), transparent calc(100% - 4px));
  opacity:.75;}
.gs-c2{width:min(58vw,250px);aspect-ratio:1;border:1.5px dashed var(--stage-b,#8FD8FF);opacity:0;}
.gs-c3{width:min(40vw,175px);aspect-ratio:1;border:1px solid var(--stage-a,#65E0FF);
  background:radial-gradient(circle, color-mix(in srgb, var(--stage-a,#65E0FF) 20%, transparent), transparent 68%);}
.gacha-stage[data-phase]:not([data-phase=""]) .gs-circle{opacity:.95;transform:translate(-50%,-50%) scale(1);}
.gacha-stage[data-phase]:not([data-phase=""]) .gs-c1{animation:gsSpin 7s linear infinite;}
.gacha-stage[data-phase]:not([data-phase=""]) .gs-c2{animation:gsSpinR 5s linear infinite;opacity:.75;}
.gacha-stage[data-phase]:not([data-phase=""]) .gs-c3{animation:gsSpin 3.4s linear infinite;}
@keyframes gsSpin{to{transform:translate(-50%,-50%) rotate(360deg);}}
@keyframes gsSpinR{to{transform:translate(-50%,-50%) rotate(-360deg);}}

.gs-core{
  position:absolute;left:50%;top:46%;z-index:1;transform:translate(-50%,-50%) scale(0);
  width:96px;height:96px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle, #fff 0%, var(--stage-a,#65E0FF) 42%, transparent 72%);
  filter:blur(4px);transition:transform .5s cubic-bezier(.2,1.4,.4,1), opacity .3s ease;opacity:0;
}
.gacha-stage[data-phase="circle"] .gs-core{opacity:.45;transform:translate(-50%,-50%) scale(.6);}
.gacha-stage[data-phase="gather"] .gs-core,
.gacha-stage[data-phase="charge"] .gs-core{opacity:1;transform:translate(-50%,-50%) scale(1);}
.gacha-stage[data-phase="charge"] .gs-core{animation:gsPulse .55s ease-in-out infinite;}
@keyframes gsPulse{0%,100%{transform:translate(-50%,-50%) scale(1);}50%{transform:translate(-50%,-50%) scale(1.42);}}

.gs-orbs{position:absolute;left:50%;top:46%;width:0;height:0;pointer-events:none;}
.gs-orb{
  position:absolute;width:var(--size);height:var(--size);border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #fff, var(--c) 60%);
  box-shadow:0 0 12px 2px var(--c);opacity:0;
  transform:rotate(var(--a)) translateX(var(--d));
}
.gacha-stage[data-phase="gather"] .gs-orb,
.gacha-stage[data-phase="charge"] .gs-orb{
  animation:gsGather 1.1s cubic-bezier(.55,0,.3,1) var(--delay) forwards;
}
@keyframes gsGather{
  0%{opacity:0;transform:rotate(var(--a)) translateX(var(--d)) scale(.6);}
  22%{opacity:1;}
  100%{opacity:0;transform:rotate(var(--a)) translateX(0) scale(1.5);}
}

.gs-rays{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);
  width:min(150vw,760px);aspect-ratio:1;pointer-events:none;opacity:0;
  background:repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--stage-a,#65E0FF) 30%, transparent) 0deg 4deg, transparent 4deg 16deg);
  mask:radial-gradient(circle closest-side, transparent 26%, #000 58%, transparent 86%);
  -webkit-mask:radial-gradient(circle closest-side, transparent 26%, #000 58%, transparent 86%);
  transition:opacity .5s ease;}
.gacha-stage[data-phase="charge"] .gs-rays{opacity:.55;animation:gsSpin 12s linear infinite;}

.gs-flash{position:absolute;inset:0;z-index:4;background:#fff;opacity:0;pointer-events:none;}
.gacha-stage[data-phase="flash"] .gs-flash{animation:gsFlash .34s ease-out forwards;}
@keyframes gsFlash{0%{opacity:0;}22%{opacity:1;}100%{opacity:0;}}

.gs-tease{
  position:absolute;left:0;right:0;top:46%;z-index:3;transform:translateY(-50%) scale(.6);
  text-align:center;font-size:34px;font-weight:900;letter-spacing:.1em;
  color:var(--stage-a,#65E0FF);opacity:0;pointer-events:none;
  text-shadow:0 0 22px var(--stage-a,#65E0FF), 0 2px 8px rgba(0,0,0,.8);
}
.gacha-stage[data-phase="charge"] .gs-tease{animation:gsTease .9s cubic-bezier(.2,1.4,.4,1) forwards;}
@keyframes gsTease{0%{opacity:0;transform:translateY(-50%) scale(.5);}
  30%{opacity:1;transform:translateY(-50%) scale(1.1);}
  80%{opacity:1;transform:translateY(-50%) scale(1);}
  100%{opacity:0;transform:translateY(-50%) scale(1.3);}}

.gs-hint{position:absolute;left:0;right:0;bottom:calc(26px + var(--safe-bottom));
  text-align:center;font-size:10.5px;color:rgba(255,255,255,.55);letter-spacing:.08em;
  animation:lowPulse 1.8s ease-in-out infinite;}

/* 期待度による色 */
.gacha-stage.tier-blue{--stage-a:#65E0FF;--stage-b:#8FD8FF;}
.gacha-stage.tier-gold{--stage-a:#FFC65C;--stage-b:#FFE9A8;}
.gacha-stage.tier-rainbow{--stage-a:#FF86C8;--stage-b:#B6EEFF;}
.gacha-stage.tier-rainbow .gs-c1{
  border-color:transparent;
  background:conic-gradient(from 0deg,#FF7A59,#FFC65C,#5BE08C,#45C8F1,#FF86C8,#FF7A59);
  mask:radial-gradient(circle closest-side, transparent 0 calc(100% - 5px), #000 calc(100% - 5px));
  -webkit-mask:radial-gradient(circle closest-side, transparent 0 calc(100% - 5px), #000 calc(100% - 5px));
  box-shadow:0 0 40px -4px #FF86C8;
}

/* =========================================================
 * ガチャ結果
 * =======================================================*/
.pull-counter{position:absolute;top:14px;left:16px;font-size:10px;font-weight:800;
  color:var(--ink-faint);letter-spacing:.08em;font-variant-numeric:tabular-nums;}
#pullCard{text-align:center;max-width:320px;overflow:hidden;position:relative;}
#pullCard.summary{max-width:390px;}
#pullCard .pemoji{position:relative;display:flex;justify-content:center;margin-bottom:10px;
  animation:pullPop .5s cubic-bezier(.2,1.3,.4,1);}
.stars.pop-in{animation:starPop .6s ease-out;}
@keyframes starPop{0%{transform:scale(.4);opacity:0;}55%{transform:scale(1.25);}100%{transform:none;opacity:1;}}
.pull-summary{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-bottom:6px;}
.ps-cell{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:7px 2px 5px;border-radius:11px;
  background:color-mix(in srgb, var(--rare) 12%, rgba(255,255,255,0.03));
  border:1px solid color-mix(in srgb, var(--rare) 40%, transparent);
  animation:screenIn .3s ease backwards;}
.ps-cell:nth-child(n+6){animation-delay:.08s;}
.ps-cell .portrait{width:34px;height:34px;border-radius:11px;}
.ps-cell .p-emoji{font-size:18px;}
.ps-name{font-size:7.5px;color:var(--ink-dim);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ps-star{font-size:7px;color:var(--rare);letter-spacing:.5px;}
.ps-new{position:absolute;top:-4px;right:-3px;font-size:6.5px;font-weight:900;color:#2A1A05;
  background:linear-gradient(180deg,var(--gold-1),var(--gold-2));border-radius:4px;padding:1px 3px;}
#pullSummaryWrap h3{margin:0 0 10px;font-size:14px;font-weight:900;text-align:center;}

/* リザルトのドロップ表示 */
.rrow.drop{background:color-mix(in srgb, var(--mt) 14%, transparent);
  border-color:color-mix(in srgb, var(--mt) 40%, transparent);color:var(--ink-dim);}
.rrow.drop b{color:var(--mt);}
.levelup{background:linear-gradient(160deg, rgba(101,224,255,0.18), rgba(101,224,255,0.05));
  border:1px solid rgba(101,224,255,0.42);border-radius:15px;padding:11px;
  font-size:12.5px;font-weight:800;color:var(--accent-3);margin-bottom:13px;}
.levelup span{display:block;margin-top:4px;font-size:10.5px;color:var(--ink-dim);font-weight:400;}
.levelup b{color:var(--accent-3);}

@media (max-width:360px){
  .material-grid{grid-template-columns:1fr;}
  .pull-summary{grid-template-columns:repeat(4,1fr);}
}
.sup-lv{font-size:8.5px;font-weight:800;color:var(--accent);
  background:rgba(255,198,92,.14);border-radius:5px;padding:1px 5px;}
.lh-lv{font-size:10px;color:var(--accent);font-weight:700;margin-top:2px;font-variant-numeric:tabular-nums;}
.pm-lv{font-size:8px;color:var(--accent);font-weight:700;font-variant-numeric:tabular-nums;}