/* ===== ポケットバトル — ソシャゲ風UI × ポケモン ===== */
@property --ang{ syntax:'<angle>'; inherits:false; initial-value:0deg; }
:root{
  --w:960px; --h:600px;
  --ink:#1f2b3d; --ink2:#4a5a6c; --muted:#7a8aa0;
  --panel:#ffffff; --soft:#eef4fb; --soft2:#e2ecf7; --line:#c9d7e8;
  --navy:#16305f; --navy2:#1f4488; --blue:#3f7fd6; --blue-d:#2b5fae; --sky:#5ec2ff;
  --red:#e8463a; --red-d:#b92c22; --green:#3fbf6b;
  --gold:#ffc83d; --gold-d:#d99311; --pink:#ff5ec7;
  --hp-ok:#49d16f; --hp-mid:#f2c94c; --hp-low:#eb5757;
  --r1:#9aa7b8; --r2:#5fb0e6; --r3:#57c96d; --r4:#c07bf0; --r5:#f5b642; --r6:#ff5ec7;
  --font:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN","Yu Gothic UI","Meiryo",sans-serif;
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%; background:radial-gradient(circle at 50% 30%,#1b2c4a,#070d18 70%); color:var(--ink); font-family:var(--font);}
#app{position:relative; width:var(--w); height:var(--h); margin:16px auto; display:flex; flex-direction:column;
  border-radius:18px; overflow:hidden; background:var(--soft); box-shadow:0 24px 70px rgba(0,0,0,.7), 0 0 0 2px rgba(255,255,255,.06); user-select:none;}
small{font-size:.8em; color:var(--muted);}
.muted{color:var(--muted); line-height:1.6;} .muted.small{font-size:12px;}
.warn{color:#d0561b; font-weight:800;}
button{cursor:pointer; font-family:inherit; color:inherit;}
.svgbg{width:100%; height:100%; display:block;}
.hidden{display:none !important;}
.tt{font-size:10px; font-weight:800; color:#fff; padding:2px 8px; border-radius:20px; display:inline-block;
  vertical-align:middle; box-shadow:inset 0 -1px 2px rgba(0,0,0,.25); text-shadow:0 1px 0 rgba(0,0,0,.25); white-space:nowrap;}
.stars{font-weight:900; letter-spacing:-1.5px; white-space:nowrap; text-shadow:0 1px 0 rgba(0,0,0,.25);}
.pthumb{width:100%; height:64px; object-fit:contain; display:block;}
.pthumb.badge{display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; background:var(--soft2); border-radius:8px; color:var(--ink2);}

/* ---------- ボタン ---------- */
.btn{position:relative; border:none; border-radius:14px; padding:11px 22px; font-size:15px; font-weight:900; letter-spacing:.5px;
  color:#fff; background:linear-gradient(180deg,#6fb2ff,#2f6fd0); box-shadow:0 4px 0 #1d4a93, 0 6px 14px rgba(0,0,0,.25);
  text-shadow:0 1px 0 rgba(0,0,0,.3); transition:transform .06s, filter .15s; overflow:hidden;}
.btn::after{content:""; position:absolute; inset:0 0 50% 0; background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,0)); border-radius:14px 14px 0 0; pointer-events:none;}
.btn:hover{filter:brightness(1.08);} .btn:active{transform:translateY(3px); box-shadow:0 1px 0 #1d4a93;}
.btn.gold{background:linear-gradient(180deg,#ffe07a,#f0a41a); color:#5a3500; text-shadow:0 1px 0 rgba(255,255,255,.5); box-shadow:0 4px 0 #b77508, 0 6px 14px rgba(0,0,0,.25);}
.btn.gold:active{box-shadow:0 1px 0 #b77508;}
.btn.red{background:linear-gradient(180deg,#ff7b6b,#dc3a2e); box-shadow:0 4px 0 #9b2219, 0 6px 14px rgba(0,0,0,.25);}
.btn.red:active{box-shadow:0 1px 0 #9b2219;}
.btn.gray{background:linear-gradient(180deg,#f4f7fb,#d5deea); color:var(--ink2); text-shadow:none; box-shadow:0 4px 0 #a9b6c8, 0 6px 14px rgba(0,0,0,.15);}
.btn:disabled{filter:grayscale(.7) brightness(.9); cursor:not-allowed;}
.btn.sm{padding:7px 14px; font-size:13px; border-radius:11px;}
.btn.shine::before{content:""; position:absolute; top:0; bottom:0; width:40%; left:-60%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent); animation:shine 3.2s ease-in-out infinite; pointer-events:none;}
@keyframes shine{0%,55%{left:-60%;} 85%,100%{left:130%;}}
.row-btn{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin:12px 0 4px;}
.link{background:none; border:none; color:var(--blue); text-decoration:underline; font-weight:800;}

/* ---------- タイトル ---------- */
.title-screen{position:absolute; inset:0; z-index:60; cursor:pointer; overflow:hidden; background:#0b1a33;}
.ts-bg{position:absolute; inset:-4%; background:url('../assets/bg/title.png') center/cover; filter:brightness(.75) saturate(1.1); animation:ts-zoom 18s ease-in-out infinite alternate;}
@keyframes ts-zoom{from{transform:scale(1);} to{transform:scale(1.08);}}
.ts-rays{position:absolute; left:50%; top:40%; width:1600px; height:1600px; margin:-800px 0 0 -800px; opacity:.07;
  background:repeating-conic-gradient(from 0deg,#fff 0deg 6deg,transparent 6deg 18deg); animation:spin 40s linear infinite; mix-blend-mode:screen;}
@keyframes spin{to{transform:rotate(360deg);}}
.ts-logo{position:absolute; left:0; right:0; top:26%; text-align:center; color:#fff; animation:logo-in .9s cubic-bezier(.2,1.4,.4,1) both;}
@keyframes logo-in{from{transform:scale(.6); opacity:0;} to{transform:scale(1); opacity:1;}}
.ts-logo h1{font-size:68px; font-weight:900; letter-spacing:4px; color:#ffe36a;
  text-shadow:0 4px 0 #d0471b, 0 8px 0 #7a1f0d, 0 0 30px rgba(255,200,60,.6), 0 12px 30px rgba(0,0,0,.6); -webkit-text-stroke:2px #7a2a0a;}
.ts-logo p{font-size:20px; font-weight:800; margin-top:10px; letter-spacing:3px; text-shadow:0 2px 6px rgba(0,0,0,.8);}
.ts-ball{width:70px; height:70px; margin:0 auto 10px; border-radius:50%; position:relative;
  background:linear-gradient(180deg,#ff5a4a 0 46%,#222 46% 54%,#fff 54%); box-shadow:0 6px 18px rgba(0,0,0,.5), inset 0 -6px 10px rgba(0,0,0,.2); animation:ball-wobble 2.4s ease-in-out infinite;}
.ts-ball::after{content:""; position:absolute; left:50%; top:50%; width:22px; height:22px; margin:-11px; border-radius:50%; background:#fff; border:5px solid #222;}
@keyframes ball-wobble{0%,70%,100%{transform:rotate(0);} 76%{transform:rotate(-14deg);} 84%{transform:rotate(12deg);} 92%{transform:rotate(-6deg);}}
.ts-tap{position:absolute; left:0; right:0; bottom:150px; text-align:center; color:#fff; font-size:24px; font-weight:900; letter-spacing:6px;
  text-shadow:0 0 12px rgba(94,194,255,.9), 0 2px 4px rgba(0,0,0,.8); animation:blink 1.4s ease-in-out infinite;}
@keyframes blink{50%{opacity:.25;}}
.ts-foot{position:absolute; left:0; right:0; bottom:20px; display:flex; flex-direction:column; align-items:center; gap:8px; animation:logo-in 1s .3s both;}
.ts-maker{width:230px; max-width:60%; padding:7px 16px; background:rgba(255,255,255,.94); border-radius:14px; box-shadow:0 4px 14px rgba(0,0,0,.4);}
.ts-note{text-align:center; color:rgba(255,255,255,.68); font-size:11px; text-shadow:0 1px 2px rgba(0,0,0,.6);}
.title-screen.out{animation:ts-out .5s ease forwards;}
@keyframes ts-out{to{opacity:0; transform:scale(1.06);}}

/* ---------- 上部バー ---------- */
#topbar{position:relative; display:flex; align-items:center; gap:14px; height:48px; flex:0 0 48px; padding:0 12px; z-index:8;
  background:linear-gradient(180deg,#24509a,#16305f); border-bottom:2px solid #f2c14a; box-shadow:0 3px 10px rgba(0,0,0,.35); color:#fff;}
.tb-rank{display:flex; align-items:center; gap:8px; min-width:170px;}
.tb-rank-badge{width:40px; height:40px; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1;
  background:radial-gradient(circle at 35% 30%,#fff3b0,#f5b21c 60%,#b46d06); border:2px solid #fff; box-shadow:0 2px 6px rgba(0,0,0,.4); color:#5a3000;}
.tb-rank-badge small{font-size:7px; color:#7a4500; font-weight:900;} .tb-rank-badge b{font-size:16px; font-weight:900;}
.tb-rank-info{display:flex; flex-direction:column; gap:3px;}
.tb-name{font-size:12px; font-weight:800; opacity:.95;}
.tb-exp{width:110px; height:7px; border-radius:6px; background:rgba(0,0,0,.35); overflow:hidden; box-shadow:inset 0 1px 2px rgba(0,0,0,.5);}
.tb-exp i{display:block; height:100%; width:0; background:linear-gradient(90deg,#7ef0ff,#3fb4ff); transition:width .6s;}
.tb-title{font-size:18px; font-weight:900; letter-spacing:2px; padding:4px 26px 4px 18px; position:relative;
  background:linear-gradient(90deg,rgba(255,255,255,.18),rgba(255,255,255,0)); clip-path:polygon(0 0,100% 0,90% 100%,0 100%); text-shadow:0 2px 0 rgba(0,0,0,.35);}
.tb-res{margin-left:auto; display:flex; align-items:center; gap:8px;}
.res-pill{display:flex; align-items:center; gap:6px; background:rgba(0,0,0,.38); border:1px solid rgba(255,255,255,.25); border-radius:20px; padding:3px 12px 3px 4px; min-width:86px;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.5);}
.res-pill b{font-size:15px; font-weight:900; margin-left:auto; font-variant-numeric:tabular-nums;}
.res-pill.bump b{animation:bump .5s;}
@keyframes bump{30%{transform:scale(1.35); color:#ffe36a;}}
.res-ico{width:24px; height:24px; border-radius:50%; display:inline-block; flex:0 0 24px; position:relative;}
.ico-gp{background:radial-gradient(circle at 35% 30%,#fff,#7fe3ff 30%,#2a8de0 70%,#154f9c); box-shadow:0 0 0 2px #fff inset, 0 1px 3px rgba(0,0,0,.4);}
.ico-gp::after{content:"G"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:900; color:#fff; text-shadow:0 1px 1px #123;}
.ico-card{border-radius:5px; width:18px; flex-basis:18px; height:24px; background:linear-gradient(135deg,#ff9fd8,#c95cf0); border:2px solid #fff; transform:rotate(-8deg); box-shadow:0 1px 3px rgba(0,0,0,.4);}
.tb-gear{width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.3); color:#fff; text-decoration:none; display:flex; align-items:center; justify-content:center; font-size:17px;}
.tb-gear:hover{background:rgba(255,255,255,.28);}

/* ---------- 下部ナビ ---------- */
#bottomnav{position:relative; display:flex; height:60px; flex:0 0 60px; z-index:8; padding:0 8px;
  background:linear-gradient(180deg,#ffffff,#e6eef8); border-top:2px solid #c9d7e8; box-shadow:0 -4px 14px rgba(20,40,80,.18);}
#bottomnav button{flex:1; border:none; background:none; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; color:#6d7f98; font-weight:800; font-size:11px; position:relative;}
#bottomnav button.on{color:var(--blue-d);}
#bottomnav button.on::before{content:""; position:absolute; left:18%; right:18%; top:0; height:4px; border-radius:0 0 4px 4px; background:linear-gradient(90deg,#3fb4ff,#2b5fae);}
#bottomnav button.on .ni{animation:ni-pop .35s cubic-bezier(.3,1.8,.5,1);}
@keyframes ni-pop{0%{transform:scale(.7);} 100%{transform:scale(1);}}
.ni{width:28px; height:28px; display:block; background-size:contain; background-repeat:no-repeat; background-position:center;}
.bn-center{margin-top:-26px;}
.bn-center .ni{width:62px; height:62px; border-radius:50%; position:relative; border:3px solid #fff;
  background:linear-gradient(180deg,#ff5a4a 0 46%,#2a2a2a 46% 54%,#fdfdfd 54%); box-shadow:0 4px 12px rgba(0,0,0,.35), inset 0 -6px 10px rgba(0,0,0,.18);}
.bn-center .ni::after{content:""; position:absolute; left:50%; top:50%; width:18px; height:18px; margin:-9px; border-radius:50%; background:#fff; border:4px solid #2a2a2a;}
.bn-center:hover .ni, .bn-center.on .ni{animation:ball-wobble 1.2s ease-in-out infinite;}
.bn-center span{color:var(--red-d);}
.bn-badge{position:absolute; top:4px; right:calc(50% - 22px); min-width:16px; height:16px; border-radius:8px; background:var(--red); color:#fff; font-size:10px; font-weight:900; display:flex; align-items:center; justify-content:center; padding:0 4px; border:2px solid #fff;}
.bn-center .bn-badge{top:-22px; right:calc(50% - 36px);}

/* ---------- 画面ベース ---------- */
#screens{position:relative; flex:1; overflow:hidden;}
.menu-bg{position:absolute; inset:0; z-index:0;}
.screen{position:absolute; inset:0; overflow:hidden; z-index:1; animation:screen-in .28s ease-out;}
@keyframes screen-in{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;}}
.sec{font-size:14px; margin:10px 4px 8px; color:var(--blue-d); font-weight:900; border-left:5px solid var(--gold); padding-left:8px;}
body.fullscreen #topbar, body.fullscreen #bottomnav{display:none;}

/* ---------- ホーム（ロビー） ---------- */
.home-bg{position:absolute; inset:0; background:url('../assets/bg/league_lobby.png') center/cover; filter:saturate(1.05);}
.home-bg::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(10,25,55,.05) 0%,rgba(10,25,55,.15) 42%,rgba(10,25,55,.55) 100%),
  linear-gradient(0deg,rgba(10,20,45,.45),transparent 40%);}
.home-char{position:absolute; left:10px; bottom:-6px; width:430px; height:106%; background-size:contain; background-repeat:no-repeat; background-position:bottom center;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.45)); cursor:pointer; transform-origin:bottom center; animation:breathe 4s ease-in-out infinite; z-index:2;}
.home-char.tap{animation:char-tap .45s ease;}
@keyframes breathe{50%{transform:scale(1.008) translateY(-2px);}}
@keyframes char-tap{30%{transform:scale(1.03,0.98) translateY(3px);} 60%{transform:scale(.99,1.02) translateY(-6px);}}
.home-bubble{position:absolute; left:262px; top:30px; max-width:222px; z-index:4; background:#fff; border:3px solid var(--navy2); border-radius:18px; padding:12px 16px;
  font-size:14.5px; font-weight:700; line-height:1.6; color:var(--ink); box-shadow:0 6px 16px rgba(0,0,0,.3); animation:bubble-in .3s cubic-bezier(.3,1.6,.5,1);}
.home-bubble::after{content:""; position:absolute; left:-14px; top:26px; border:10px solid transparent; border-right:14px solid var(--navy2);}
.home-bubble::before{content:""; position:absolute; left:-8px; top:28px; border:8px solid transparent; border-right:11px solid #fff; z-index:1;}
@keyframes bubble-in{from{transform:scale(.6); opacity:0;} to{transform:scale(1); opacity:1;}}
.home-plate{position:absolute; left:18px; bottom:14px; z-index:4; display:flex; align-items:center; gap:10px;}
.hp-namebox{background:linear-gradient(90deg,rgba(18,40,85,.92),rgba(18,40,85,.75)); color:#fff; border-radius:12px; padding:6px 14px 7px; border-left:5px solid var(--gold); box-shadow:0 4px 10px rgba(0,0,0,.35);}
.hp-namebox b{font-size:18px; font-weight:900; letter-spacing:1px;} .hp-namebox .aff{display:flex; gap:3px; margin-top:2px; font-size:13px;}
.aff i{font-style:normal; color:rgba(255,255,255,.3);} .aff i.on{color:#ff7fb8; text-shadow:0 0 6px rgba(255,100,170,.8);}
.hp-change{border:2px solid #fff; background:rgba(18,40,85,.85); color:#fff; border-radius:20px; padding:6px 12px; font-size:12px; font-weight:800; box-shadow:0 3px 8px rgba(0,0,0,.3);}
.hp-change:hover{background:var(--blue);}
.home-right{position:absolute; right:14px; top:14px; bottom:14px; width:450px; z-index:3; display:grid; gap:10px;
  grid-template-rows:140px 1fr 96px; grid-template-columns:1fr 1fr; grid-template-areas:"ban ban" "bat bat" "mob card";}
.tile{position:relative; border-radius:16px; overflow:hidden; cursor:pointer; border:3px solid #fff; box-shadow:0 6px 16px rgba(0,0,0,.35); transition:transform .12s;}
.tile:hover{transform:translateY(-3px) scale(1.01);}
.tile:active{transform:scale(.98);}
.tile::after{content:""; position:absolute; top:0; bottom:0; width:35%; left:-50%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent); animation:shine 4.5s ease-in-out infinite; pointer-events:none;}
.tile-label{position:absolute; left:12px; bottom:10px; color:#fff; font-weight:900; font-size:20px; text-shadow:0 2px 0 rgba(0,0,0,.4), 0 0 10px rgba(0,0,0,.4); letter-spacing:1px; z-index:2;}
.tile-sub{position:absolute; left:14px; top:10px; color:#fff; font-size:11px; font-weight:800; background:rgba(0,0,0,.35); border-radius:10px; padding:2px 8px; z-index:2;}
.tile.banner{grid-area:ban; background:linear-gradient(120deg,#2d0f5e,#a1127a 55%,#ff8a3d);}
.banner .bn-rays{position:absolute; left:70%; top:50%; width:700px; height:700px; margin:-350px; opacity:.25; background:repeating-conic-gradient(#fff 0 5deg,transparent 5deg 15deg); animation:spin 30s linear infinite;}
.banner .bn-mons{position:absolute; right:-6px; bottom:-10px; display:flex; align-items:flex-end;}
.banner .bn-mons img{height:150px; filter:drop-shadow(0 6px 10px rgba(0,0,0,.5)); margin-left:-40px;}
.banner .bn-mons img:nth-child(2){height:120px;} .banner .bn-mons img:nth-child(3){height:105px;}
.banner .bn-title{position:absolute; left:16px; top:30px; color:#fff; z-index:2;}
.banner .bn-title b{display:block; font-size:28px; font-weight:900; letter-spacing:2px; color:#ffe36a; text-shadow:0 3px 0 #a0305a, 0 0 18px rgba(255,220,100,.5);}
.banner .bn-title span{display:inline-block; margin-top:6px; font-size:12px; font-weight:900; padding:3px 10px; border-radius:10px; background:linear-gradient(90deg,#ff5ec7,#ffb03a); box-shadow:0 2px 6px rgba(0,0,0,.3);}
.tile.battle{grid-area:bat; background:linear-gradient(135deg,#0e3a86,#2a7de0 60%,#63d0ff);}
.battle .bt-art{position:absolute; right:-10px; top:-6px; bottom:-30px; width:62%; background-size:cover; background-position:top center; mask-image:linear-gradient(90deg,transparent,#000 35%);}
.battle .bt-info{position:absolute; left:16px; top:18px; color:#fff; z-index:2; max-width:52%;}
.battle .bt-info .bt-k{font-size:12px; font-weight:900; color:#bfe6ff; letter-spacing:2px;}
.battle .bt-info .bt-n{font-size:26px; font-weight:900; text-shadow:0 2px 0 rgba(0,0,0,.35); margin:2px 0;}
.battle .bt-info .bt-s{font-size:12px; font-weight:700; opacity:.95; line-height:1.5;}
.battle .bt-go{position:absolute; left:16px; bottom:14px; z-index:2;}
.tile.mob{grid-area:mob; background:linear-gradient(135deg,#1f7a3a,#56c96a);}
.tile.card{grid-area:card; background:linear-gradient(135deg,#7a2bb8,#ff5ec7);}
.tile .t-ico{position:absolute; right:10px; top:8px; font-size:44px; opacity:.9; filter:drop-shadow(0 3px 4px rgba(0,0,0,.35));}
.tile .t-prog{position:absolute; left:14px; right:14px; bottom:8px; height:6px; border-radius:4px; background:rgba(0,0,0,.3); overflow:hidden; z-index:2;}
.tile .t-prog i{display:block; height:100%; background:linear-gradient(90deg,#fff6a0,#ffd23a);}
.tile.mob .tile-label, .tile.card .tile-label{bottom:20px; font-size:17px;}

/* ---------- バトル（相手選択） ---------- */
.quest-wrap{position:absolute; inset:0; padding:10px 12px; display:flex; flex-direction:column; gap:10px;
  background:linear-gradient(180deg,rgba(255,255,255,.0),rgba(255,255,255,.0));}
#quest{background:url('../assets/bg/league_hall.png') center/cover;}
#quest::before{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(12,28,60,.55),rgba(12,28,60,.75));}
.named-grid{position:relative; display:grid; grid-template-columns:repeat(6,1fr); grid-template-rows:190px 190px; gap:9px;}
.tcard{position:relative; border-radius:14px; overflow:hidden; cursor:pointer; background:#1a2b4c; border:3px solid #e8eef8;
  box-shadow:0 5px 12px rgba(0,0,0,.45); transition:transform .12s; animation:card-in .4s both;}
.tcard:hover{transform:translateY(-4px);}
@keyframes card-in{from{opacity:0; transform:translateY(16px) scale(.96);} to{opacity:1; transform:none;}}
.tcard.done{border-color:transparent; background:linear-gradient(#1a2b4c,#1a2b4c) padding-box, conic-gradient(from var(--ang),#ffe36a,#ff9d3a,#fff4b8,#ffcf3a,#ffe36a) border-box; animation:card-in .4s both, rot 4s linear infinite;}
@keyframes rot{to{--ang:360deg;}}
.tc-bg{position:absolute; inset:0; opacity:.9;}
.tc-art{position:absolute; inset:0 -10% 0 -10%; background-size:cover; background-position:top center; filter:drop-shadow(0 4px 8px rgba(0,0,0,.5));}
.tc-info{position:absolute; left:0; right:0; bottom:0; padding:22px 8px 7px; background:linear-gradient(0deg,rgba(8,16,34,.95) 30%,transparent); color:#fff;}
.tc-name{font-size:15px; font-weight:900; text-shadow:0 1px 2px rgba(0,0,0,.7); letter-spacing:1px;}
.tc-cards{display:flex; gap:4px; margin-top:4px;}
.tc-cards i{width:14px; height:19px; border-radius:3px; border:2px solid rgba(255,255,255,.55); background:rgba(255,255,255,.12); transform:rotate(-6deg);}
.tc-cards i.on{background:linear-gradient(135deg,#ff9fd8,#c95cf0); border-color:#fff; box-shadow:0 0 6px rgba(255,120,210,.8);}
.tc-badge{position:absolute; top:6px; left:6px; z-index:3; font-size:10px; font-weight:900; color:#fff; padding:2px 8px; border-radius:10px; background:linear-gradient(90deg,#ff4a6e,#ff8a3d); box-shadow:0 2px 5px rgba(0,0,0,.4); animation:badge-pulse 1.4s ease-in-out infinite;}
.tc-badge.crown{background:linear-gradient(90deg,#f5b21c,#ffe36a); color:#6a3a00; animation:none;}
@keyframes badge-pulse{50%{transform:scale(1.1);}}
.tcard.locked{cursor:default;}
.tcard.locked .tc-art{filter:brightness(0) opacity(.55);}
.tc-lock{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:10px; text-align:center; color:#fff; background:rgba(8,16,34,.45);}
.tc-lock b{font-size:26px;} .tc-lock span{font-size:10.5px; line-height:1.45; font-weight:700; opacity:.92;}
.mob-find{position:relative; flex:1;}
.mf-inner{height:100%; border-radius:16px; border:3px solid #fff; overflow:hidden; position:relative; display:flex; align-items:center; gap:14px; padding:0 18px;
  background:linear-gradient(100deg,#1f7a3a,#3aa55a 45%,#9be08a); box-shadow:0 5px 12px rgba(0,0,0,.4);}
.mf-grass{position:absolute; left:0; right:0; bottom:-6px; height:40px; opacity:.35;
  background:repeating-linear-gradient(90deg,transparent 0 6px,#0f4f22 6px 8px); mask-image:linear-gradient(0deg,#000,transparent);}
.mf-faces{display:flex;}
.mf-faces span{width:46px; height:46px; border-radius:50%; border:3px solid #fff; margin-left:-14px; background-size:cover; background-position:top center; background-color:#cfe; box-shadow:0 2px 6px rgba(0,0,0,.3);}
.mf-faces span:first-child{margin-left:0;}
.mf-txt{color:#fff; flex:1; text-shadow:0 1px 2px rgba(0,0,0,.4);}
.mf-txt b{font-size:18px; font-weight:900; display:block;} .mf-txt span{font-size:12px; font-weight:700;}
.mf-prog{font-size:12px; font-weight:900; color:#fff; background:rgba(0,0,0,.28); border-radius:12px; padding:4px 10px;}

/* ---------- オーバーレイ ---------- */
.overlay{position:absolute; inset:0; background:rgba(8,16,34,.72); display:flex; align-items:center; justify-content:center; z-index:40; padding:18px; animation:fade-in .2s;}
@keyframes fade-in{from{opacity:0;}}
.ov-box{background:var(--panel); border-radius:20px; padding:0 20px 18px; max-width:620px; width:100%; max-height:94%; overflow-y:auto; box-shadow:0 18px 44px rgba(0,0,0,.5); border:3px solid #fff; animation:pop-in .28s cubic-bezier(.3,1.5,.5,1);}
@keyframes pop-in{from{transform:scale(.85); opacity:0;} to{transform:none; opacity:1;}}
.ov-head{margin:0 -20px 14px; padding:12px 20px; background:linear-gradient(90deg,#24509a,#3f7fd6); color:#fff; font-size:17px; font-weight:900; letter-spacing:1px; border-bottom:3px solid var(--gold); position:sticky; top:0; z-index:2;}
.ov-box h2{margin-bottom:8px; color:var(--blue-d);}
.ov-close{position:absolute; right:10px; top:8px; width:30px; height:30px; border-radius:50%; border:2px solid #fff; background:rgba(0,0,0,.25); color:#fff; font-weight:900;}

/* 挑戦パネル */
.ov-box.wide{max-width:820px; padding:0; overflow:hidden; display:flex; height:440px;}
.chal-art{position:relative; flex:0 0 300px; overflow:hidden; background:#1a2b4c;}
.chal-art .ca-bg{position:absolute; inset:0;}
.chal-art .ca-img{position:absolute; inset:6px 0 0; background-size:contain; background-position:bottom center; background-repeat:no-repeat; filter:drop-shadow(0 6px 12px rgba(0,0,0,.5)); animation:slide-r .45s ease-out;}
@keyframes slide-r{from{transform:translateX(-30px); opacity:0;}}
.chal-art .ca-name{position:absolute; left:0; right:0; bottom:0; padding:30px 16px 12px; background:linear-gradient(0deg,rgba(8,16,34,.95),transparent); color:#fff;}
.ca-name b{font-size:26px; font-weight:900; letter-spacing:2px; display:block;} .ca-name span{font-size:11.5px; line-height:1.5; opacity:.9; display:block;}
.chal-body{flex:1; padding:16px 18px; display:flex; flex-direction:column; gap:10px; overflow-y:auto;}
.chal-title{font-size:15px; font-weight:900; color:var(--blue-d); display:flex; align-items:center; gap:8px;}
.chal-title::before{content:""; width:6px; height:18px; border-radius:3px; background:var(--gold);}
.stage{position:relative; display:grid; grid-template-columns:54px 1fr auto; align-items:center; gap:12px; padding:10px 12px; border-radius:14px;
  background:linear-gradient(90deg,#f3f8ff,#e4eefb); border:2px solid #cfdcee; box-shadow:0 2px 0 #c2d1e6;}
.stage.clear{background:linear-gradient(90deg,#fffaf0,#fff0cf); border-color:#f0d08a;}
.stage.lock{opacity:.55; filter:grayscale(.6);}
.st-card{width:40px; height:54px; border-radius:6px; justify-self:center; background:linear-gradient(135deg,#2a3f66,#16305f); border:2px solid #fff; box-shadow:0 2px 6px rgba(0,0,0,.3);
  display:flex; align-items:center; justify-content:center; color:#fff; font-weight:900; font-size:18px; transform:rotate(-6deg);}
.stage.clear .st-card{background:linear-gradient(135deg,#ff9fd8,#c95cf0);}
.st-name{font-weight:900; font-size:14px;} .st-name .clr{font-size:11px; color:#fff; background:var(--green); border-radius:8px; padding:1px 7px; margin-left:6px;}
.st-meta{font-size:12px; color:var(--ink2); margin-top:3px; display:flex; gap:12px; align-items:center;}
.dstars{color:#ff6a3d; font-weight:900; letter-spacing:1px;} .dstars .doff{color:#d3dce8;}
.st-gp{font-weight:900; color:#1d74c9;}
.st-need{font-size:11px; color:var(--muted); max-width:92px; text-align:center; font-weight:700;}
.power-row{display:flex; gap:10px; align-items:center; background:#16305f; color:#fff; border-radius:12px; padding:8px 12px; font-size:12px; font-weight:800;}
.power-row .pw{font-size:18px; font-weight:900; color:#ffe36a; margin-left:4px;}
.power-row .team-mini{display:flex; gap:2px; margin-left:auto;}
.team-mini img{width:38px; height:38px; object-fit:contain; background:rgba(255,255,255,.12); border-radius:8px;}

/* ---------- 編成 ---------- */
#box, #dex{background:linear-gradient(180deg,#e9f2fd,#d7e5f6);}
.box-top{position:relative; display:flex; gap:12px; padding:10px 12px 6px; align-items:stretch;}
.team-slots{display:grid; grid-template-columns:repeat(3,170px); gap:10px;}
.tslot{position:relative; height:128px; border-radius:16px; cursor:pointer; background:rgba(255,255,255,.7); border:3px dashed #a9bdd6; display:flex; align-items:center; justify-content:center; color:var(--muted); font-weight:800; overflow:hidden;}
.tslot.filled{border:3px solid #fff; background:radial-gradient(circle at 50% 70%,var(--rc2,#dbe8f7),#fff 75%); box-shadow:0 4px 10px rgba(30,50,80,.2);}
.tslot .pthumb{position:absolute; left:6px; top:6px; width:calc(100% - 12px); height:calc(100% - 46px); object-fit:contain;}
.tslot .ts-info{position:absolute; left:0; right:0; bottom:0; padding:4px 8px; background:linear-gradient(0deg,rgba(255,255,255,.95),rgba(255,255,255,.6)); text-align:center;}
.ts-name{font-size:13px; font-weight:900; color:var(--ink);} .ts-num{position:absolute; left:8px; top:6px; font-size:11px; font-weight:900; color:#fff; background:var(--navy2); border-radius:8px; padding:1px 7px; z-index:2;}
.ts-x{position:absolute; right:6px; top:6px; z-index:2; width:20px; height:20px; border-radius:50%; background:rgba(0,0,0,.35); color:#fff; font-size:12px; display:flex; align-items:center; justify-content:center;}
.team-power{flex:1; border-radius:16px; background:linear-gradient(135deg,#16305f,#2a5fae); color:#fff; padding:12px 16px; display:flex; flex-direction:column; justify-content:center; gap:6px; box-shadow:0 4px 10px rgba(0,0,0,.25);}
.team-power .tp-k{font-size:12px; font-weight:800; color:#bfe0ff; letter-spacing:2px;}
.team-power .tp-v{font-size:34px; font-weight:900; color:#ffe36a; text-shadow:0 2px 0 rgba(0,0,0,.35); font-variant-numeric:tabular-nums;}
.team-power .tp-h{font-size:11.5px; line-height:1.5; opacity:.9;}
.box-filter{position:relative; display:flex; gap:6px; padding:2px 12px 8px; align-items:center;}
.chip{border:2px solid #fff; background:rgba(255,255,255,.75); border-radius:16px; padding:3px 12px; font-size:12px; font-weight:900; color:var(--ink2); box-shadow:0 2px 4px rgba(30,50,80,.12);}
.chip.on{background:var(--navy2); color:#fff;}
.box-filter .cnt{margin-left:auto; font-size:12px; font-weight:800; color:var(--ink2);}
.box-scroll{position:absolute; left:0; right:0; bottom:0; top:188px; overflow-y:auto; padding:2px 12px 16px;}
.dex-scroll{position:absolute; left:0; right:0; bottom:0; top:52px; overflow-y:auto; padding:2px 12px 16px;}

/* ---------- ポケモン カード（レア度で大きさ・枠が変わる） ---------- */
.mgrid{display:grid; grid-template-columns:repeat(9,1fr); grid-auto-rows:98px; grid-auto-flow:dense; gap:8px;}
.mcell{position:relative; border-radius:12px; cursor:pointer; overflow:hidden; background:#fff; border:3px solid var(--rc,#c9d7e8);
  box-shadow:0 3px 8px rgba(30,50,80,.18); transition:transform .1s;}
.mcell:hover{transform:translateY(-2px); z-index:2;}
.mcell .mc-img{position:absolute; inset:4px 4px 26px; background-size:contain; background-repeat:no-repeat; background-position:center bottom;}
.mcell .mc-img.badge{display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; color:var(--ink2);}
.mcell .mc-foot{position:absolute; left:0; right:0; bottom:0; height:26px; padding:1px 4px; text-align:center; background:linear-gradient(0deg,rgba(255,255,255,.98),rgba(255,255,255,.85));}
.mc-name{font-size:11px; font-weight:900; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.2;}
.mc-star{font-size:9px; line-height:1;}
.mc-cnt{position:absolute; top:3px; right:5px; font-size:10px; font-weight:900; color:var(--ink2); z-index:2;}
.mc-in{position:absolute; top:3px; left:4px; font-size:9px; font-weight:900; color:#fff; background:var(--red); border-radius:6px; padding:0 5px; z-index:2;}
.mcell.rar-1{--rc:#c3cdd9;} .mcell.rar-2{--rc:#7cc3ee;} .mcell.rar-3{--rc:#6fd185;}
.mcell.rar-4{--rc:#c07bf0; background:radial-gradient(circle at 50% 60%,#f3e6ff,#fff 70%);}
.mcell.rar-5{grid-row:span 2; border-color:transparent; background:radial-gradient(circle at 50% 55%,#fff5d6,#fff 70%) padding-box, linear-gradient(135deg,#fff2b0,#f5b21c,#fff2b0,#d98a06) border-box;}
.mcell.rar-6{grid-row:span 2; grid-column:span 2; border:4px solid transparent;
  background:radial-gradient(circle at 50% 55%,#ffe6f7,#fff 72%) padding-box, conic-gradient(from var(--ang),#ff5ec7,#ffb03a,#ffe36a,#5ef0a0,#5ec2ff,#b07bff,#ff5ec7) border-box; animation:rot 3s linear infinite;}
.mcell.rar-5 .mc-img, .mcell.rar-6 .mc-img{inset:10px 8px 34px;}
.mcell.rar-5 .mc-foot, .mcell.rar-6 .mc-foot{height:34px;}
.mcell.rar-5 .mc-name{font-size:13px;} .mcell.rar-6 .mc-name{font-size:16px;}
.mcell.rar-5 .mc-star, .mcell.rar-6 .mc-star{font-size:12px;}
.mcell.rar-5::after, .mcell.rar-6::after{content:""; position:absolute; top:0; bottom:0; width:40%; left:-60%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.7),transparent); animation:shine 3.5s ease-in-out infinite; pointer-events:none;}
.mcell.rar-6::before{content:"★6"; position:absolute; left:8px; top:6px; z-index:2; font-size:11px; font-weight:900; color:#fff; padding:1px 8px; border-radius:8px; background:linear-gradient(90deg,#ff5ec7,#b07bff);}
.mcell.rar-5::before{content:"★5"; position:absolute; left:6px; top:5px; z-index:2; font-size:10px; font-weight:900; color:#6a3a00; padding:0 6px; border-radius:8px; background:linear-gradient(90deg,#ffe36a,#f5b21c);}
.mcell.in{box-shadow:0 0 0 3px var(--red), 0 3px 8px rgba(30,50,80,.18);}
.mcell.unown{background:#e7eef7 !important; border-color:#c9d7e8 !important; animation:none;}
.mcell.unown .mc-img{filter:brightness(0) opacity(.28);}
.mcell.unown::after{display:none;}
.empty{grid-column:1/-1; text-align:center; color:var(--muted); padding:40px; font-weight:700;}

/* 図鑑ヘッダ */
.dex-head{position:relative; display:flex; align-items:center; gap:10px; padding:10px 12px;}
.dex-comp{display:flex; align-items:center; gap:8px; margin-left:auto; font-size:12px; font-weight:900; color:var(--ink2);}
.dex-comp .bar{width:160px; height:10px; border-radius:6px; background:#c9d7e8; overflow:hidden;}
.dex-comp .bar i{display:block; height:100%; background:linear-gradient(90deg,#3fb4ff,#3fbf6b);}
/* 図鑑詳細 */
.dex-detail{display:flex; gap:18px; align-items:flex-start;}
.dxd-img{flex:0 0 210px; height:210px; border-radius:18px; position:relative; background:radial-gradient(circle at 50% 60%,var(--rc2,#e6eef8),#fff 70%); border:3px solid var(--rc,#c9d7e8);}
.dxd-img .pthumb{height:100%; padding:10px;}
.dxd-img.unown .pthumb{filter:brightness(0) opacity(.3);}
.dxd-body{flex:1;} .dxd-body h2{color:var(--ink); margin-bottom:4px; font-size:24px;}
.dxd-types{display:flex; gap:5px; margin-bottom:10px;}
.dxs-row{display:flex; align-items:center; gap:8px; margin-bottom:5px;}
.dxs-l{width:60px; font-size:12px; color:var(--ink2); font-weight:800;}
.dxs-bar{flex:1; height:12px; background:var(--soft2); border-radius:6px; overflow:hidden;}
.dxs-bar i{display:block; height:100%; background:linear-gradient(90deg,#3fb4ff,#3fbf6b); animation:grow .6s ease-out both;}
@keyframes grow{from{width:0 !important;}}
.dxs-v{width:34px; text-align:right; font-size:12px; font-weight:900;}
.dxd-moves{display:flex; gap:6px; flex-wrap:wrap; margin-top:10px;}
.dxs-move{font-size:12px; font-weight:800; background:#fff; border:2px solid var(--line); border-left-width:6px; border-radius:10px; padding:4px 10px;}

/* ---------- ガチャ ---------- */
#gacha{background:#1a0d33;}
.gacha-wrap{position:absolute; inset:0; display:flex;}
.g-banner{position:relative; flex:1; overflow:hidden; background:radial-gradient(circle at 65% 45%,#ff7ad0 0%,#8b2bd6 35%,#2a0b5e 75%);}
.g-banner .g-rays{position:absolute; left:62%; top:48%; width:1200px; height:1200px; margin:-600px; opacity:.22; background:repeating-conic-gradient(#fff 0 4deg,transparent 4deg 14deg); animation:spin 36s linear infinite;}
.g-banner .g-balls{position:absolute; inset:0; opacity:.14;}
.g-feature{position:absolute; right:10px; bottom:0; top:0; width:62%;}
.g-feature img{position:absolute; bottom:40px; filter:drop-shadow(0 10px 20px rgba(0,0,0,.55)); transition:opacity .6s, transform .6s;}
.g-feature .gf-main{right:60px; height:330px; animation:float 3.6s ease-in-out infinite;}
.g-feature .gf-sub1{right:330px; height:190px; bottom:30px; opacity:.95; animation:float 4.2s ease-in-out infinite .5s;}
.g-feature .gf-sub2{right:-20px; height:170px; bottom:20px; opacity:.9; animation:float 4.6s ease-in-out infinite 1s;}
@keyframes float{50%{transform:translateY(-10px);}}
.g-logo{position:absolute; left:24px; top:22px; z-index:3; color:#fff;}
.g-logo .gl-k{display:inline-block; font-size:12px; font-weight:900; letter-spacing:3px; padding:3px 12px; border-radius:10px; background:linear-gradient(90deg,#ff5ec7,#ffb03a);}
.g-logo h2{font-size:44px; font-weight:900; letter-spacing:3px; color:#fff; margin-top:6px; line-height:1.1;
  text-shadow:0 4px 0 #6a1a9a, 0 0 22px rgba(255,160,240,.7);}
.g-logo .gl-rate{margin-top:8px; font-size:14px; font-weight:900; color:#ffe36a; text-shadow:0 2px 0 rgba(0,0,0,.4);}
.g-logo .gl-rate b{font-size:26px; background:linear-gradient(90deg,#ff5ec7,#ffe36a,#5ec2ff); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:none; filter:drop-shadow(0 2px 0 rgba(0,0,0,.4));}
.g-pickname{position:absolute; right:26px; bottom:14px; z-index:3; color:#fff; font-weight:900; font-size:15px; text-shadow:0 2px 4px rgba(0,0,0,.7);}
.g-pickname .stars{font-size:13px;}
.g-side{flex:0 0 300px; background:linear-gradient(180deg,#f7faff,#dfe9f7); padding:18px 18px 14px; display:flex; flex-direction:column; gap:12px; box-shadow:-6px 0 20px rgba(0,0,0,.35); z-index:2;}
.g-side .gs-gp{display:flex; align-items:center; gap:8px; background:#16305f; color:#fff; border-radius:14px; padding:8px 12px; font-weight:800; font-size:12px;}
.g-side .gs-gp b{margin-left:auto; font-size:22px; color:#ffe36a;}
.pull-btn{display:flex; flex-direction:column; align-items:center; gap:2px; width:100%; padding:12px; border-radius:16px;}
.pull-btn .pb-k{font-size:20px; font-weight:900;} .pull-btn .pb-c{font-size:12px; font-weight:800; display:flex; align-items:center; gap:4px;}
.pull-btn .pb-c .res-ico{width:16px; height:16px; flex-basis:16px;} .pull-btn .pb-c .ico-gp::after{font-size:9px;}
.g-side .gs-links{margin-top:auto; display:flex; gap:8px; justify-content:center;}
.gs-note{font-size:11px; color:var(--ink2); text-align:center; line-height:1.5;}
.rate-table{width:100%; border-collapse:collapse; font-size:13px; margin-bottom:10px;}
.rate-table td{padding:6px 8px; border-bottom:1px solid var(--line);} .rate-table td:last-child{text-align:right; font-weight:900;}
.rate-list{display:flex; flex-wrap:wrap; gap:4px 10px; font-size:12px; color:var(--ink2); margin:4px 0 12px;}

/* ---- ガチャ演出 ---- */
.fx-layer{position:absolute; inset:0; z-index:50; overflow:hidden;}
.pull-stage{position:absolute; inset:0; background:radial-gradient(circle at 50% 55%,#1d2f63,#060b1a 75%); cursor:pointer;}
.pull-stage .ps-floor{position:absolute; left:50%; bottom:120px; width:420px; height:70px; margin-left:-210px; border-radius:50%;
  background:radial-gradient(ellipse,rgba(94,194,255,.55),transparent 70%); animation:floor-glow 1.4s ease-in-out infinite;}
@keyframes floor-glow{50%{opacity:.5;}}
.pull-stage .ps-glow{position:absolute; left:50%; top:50%; width:900px; height:900px; margin:-450px; border-radius:50%; opacity:0; background:radial-gradient(circle,var(--gc,#5ec2ff),transparent 60%);}
.pull-stage.charge .ps-glow{animation:glow-charge 1.2s ease-in forwards;}
@keyframes glow-charge{to{opacity:.8;}}
.pull-stage .ps-rays{position:absolute; left:50%; top:52%; width:1400px; height:1400px; margin:-700px; opacity:0;
  background:repeating-conic-gradient(var(--gc,#5ec2ff) 0 5deg,transparent 5deg 15deg); animation:spin 12s linear infinite;}
.pull-stage.charge .ps-rays{transition:opacity 1s; opacity:.35;}
.pull-stage.rainbow{--gc:#ff5ec7;}
.pull-stage.rainbow .ps-rays{background:repeating-conic-gradient(#ff5ec7 0 5deg,#ffe36a 5deg 10deg,#5ec2ff 10deg 15deg,transparent 15deg 25deg);}
.pull-ball{position:absolute; left:50%; top:50%; width:140px; height:140px; margin:-70px; border-radius:50%;
  background:linear-gradient(180deg,#ff5a4a 0 46%,#222 46% 54%,#fdfdfd 54%); box-shadow:0 14px 30px rgba(0,0,0,.6), inset 0 -12px 20px rgba(0,0,0,.2), inset 0 10px 16px rgba(255,255,255,.35);
  animation:ball-drop .8s cubic-bezier(.4,0,.6,1) both;}
.pull-ball::after{content:""; position:absolute; left:50%; top:50%; width:40px; height:40px; margin:-20px; border-radius:50%; background:#fff; border:9px solid #222; box-sizing:content-box; transform:translate(-9px,-9px);}
.pull-ball.b4{background:linear-gradient(180deg,#b06bff 0 46%,#222 46% 54%,#fdfdfd 54%);}
.pull-ball.b5{background:linear-gradient(180deg,#ffd23a 0 46%,#222 46% 54%,#fdfdfd 54%);}
.pull-ball.b6{background:linear-gradient(180deg,#ff5ec7,#ffb03a 23%,#5ec2ff 46%,#222 46% 54%,#fdfdfd 54%);}
.pull-ball.shake{animation:ball-shake 1.5s ease-in-out both;}
.pull-ball.shake::after{animation:btn-glow 1.5s ease-in-out both;}
@keyframes ball-drop{0%{transform:translateY(-520px) rotate(-200deg);} 60%{transform:translateY(0) rotate(0);} 75%{transform:translateY(-40px);} 90%{transform:translateY(0);} 95%{transform:translateY(-8px);} 100%{transform:translateY(0);}}
@keyframes ball-shake{0%,100%{transform:rotate(0);} 10%{transform:rotate(-18deg);} 20%{transform:rotate(14deg);} 30%{transform:rotate(0);} 43%{transform:rotate(-18deg);} 53%{transform:rotate(14deg);} 63%{transform:rotate(0);} 76%{transform:rotate(-20deg);} 86%{transform:rotate(16deg);}}
@keyframes btn-glow{0%,90%{background:#fff;} 100%{background:var(--gc,#5ec2ff); box-shadow:0 0 30px 10px var(--gc,#5ec2ff);}}
.pull-flash{position:absolute; inset:0; background:#fff; opacity:0; pointer-events:none;}
.pull-flash.on{animation:pflash .7s ease-out;}
@keyframes pflash{0%{opacity:0;} 15%{opacity:1;} 100%{opacity:0;}}
.ps-skip{position:absolute; right:16px; top:14px; z-index:5; border:2px solid rgba(255,255,255,.6); background:rgba(0,0,0,.35); color:#fff; border-radius:18px; padding:6px 16px; font-weight:900; font-size:13px; letter-spacing:1px;}
.ps-hint{position:absolute; left:0; right:0; bottom:26px; text-align:center; color:rgba(255,255,255,.8); font-size:13px; font-weight:800; letter-spacing:2px; animation:blink 1.4s infinite;}
/* 結果グリッド */
.pull-results{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;}
.pr-grid{display:grid; grid-template-columns:repeat(5,150px); gap:14px;}
.pr-grid.single{grid-template-columns:220px;}
.pr-card{position:relative; height:190px; perspective:800px;}
.pr-grid.single .pr-card{height:280px;}
.pr-inner{position:absolute; inset:0; transform-style:preserve-3d; transition:transform .55s cubic-bezier(.3,1.3,.5,1);}
.pr-card.flip .pr-inner{transform:rotateY(180deg);}
.pr-back, .pr-front{position:absolute; inset:0; border-radius:14px; backface-visibility:hidden; overflow:hidden;}
.pr-back{background:radial-gradient(circle at 50% 50%,#2b4f9a,#101f44); border:3px solid #fff; display:flex; align-items:center; justify-content:center; box-shadow:0 0 18px var(--gc,rgba(94,194,255,.6));}
.pr-back::after{content:""; width:56px; height:56px; border-radius:50%; background:linear-gradient(180deg,#ff5a4a 0 46%,#222 46% 54%,#fdfdfd 54%); box-shadow:0 3px 8px rgba(0,0,0,.5);}
.pr-card.r4 .pr-back{--gc:#c07bf0;} .pr-card.r5 .pr-back{--gc:#ffd23a; box-shadow:0 0 26px #ffd23a;} .pr-card.r6 .pr-back{--gc:#ff5ec7; box-shadow:0 0 30px #ff5ec7, 0 0 60px #5ec2ff;}
.pr-front{transform:rotateY(180deg); background:radial-gradient(circle at 50% 55%,var(--rc2,#eef4fb),#fff 75%); border:3px solid var(--rc,#c9d7e8);}
.pr-card.r5 .pr-front{border:4px solid transparent; background:radial-gradient(circle at 50% 55%,#fff1c2,#fff 72%) padding-box, linear-gradient(135deg,#fff2b0,#f5b21c,#fff2b0,#d98a06) border-box;}
.pr-card.r6 .pr-front{border:4px solid transparent; background:radial-gradient(circle at 50% 55%,#ffe0f4,#fff 72%) padding-box, conic-gradient(from var(--ang),#ff5ec7,#ffb03a,#ffe36a,#5ef0a0,#5ec2ff,#b07bff,#ff5ec7) border-box; animation:rot 3s linear infinite;}
.pr-front img{position:absolute; inset:8px 8px 44px; width:calc(100% - 16px); height:calc(100% - 52px); object-fit:contain;}
.pr-front .prf-foot{position:absolute; left:0; right:0; bottom:0; height:44px; text-align:center; padding-top:3px; background:rgba(255,255,255,.92);}
.prf-name{font-size:13px; font-weight:900;} .prf-star{font-size:11px;}
.pr-new{position:absolute; top:6px; left:6px; z-index:3; font-size:11px; font-weight:900; color:#fff; background:linear-gradient(90deg,#ff4a6e,#ff8a3d); border-radius:8px; padding:1px 8px; box-shadow:0 2px 4px rgba(0,0,0,.3);}
.pr-dupe{position:absolute; top:6px; left:6px; z-index:3; font-size:10px; font-weight:900; color:#fff; background:#2a8de0; border-radius:8px; padding:1px 7px;}
.pr-btns{display:flex; gap:12px; opacity:0; transition:opacity .3s;}
.pr-btns.on{opacity:1;}
/* 高レア演出（全画面） */
.showcase{position:absolute; inset:0; z-index:6; display:flex; align-items:center; justify-content:center; cursor:pointer; overflow:hidden;
  background:radial-gradient(circle at 50% 50%,var(--sc1,#fff4c2),var(--sc2,#d98a06) 45%,#1a0d33 85%); animation:fade-in .25s;}
.showcase.r6{--sc1:#ffe0f4; --sc2:#b04adf;}
.showcase .sc-rays{position:absolute; left:50%; top:50%; width:1600px; height:1600px; margin:-800px; opacity:.4; background:repeating-conic-gradient(#fff 0 4deg,transparent 4deg 12deg); animation:spin 20s linear infinite;}
.showcase.r6 .sc-rays{background:repeating-conic-gradient(#fff 0 4deg,#ffe36a 4deg 6deg,transparent 6deg 12deg,#5ec2ff 12deg 14deg,transparent 14deg 22deg);}
.showcase img{position:relative; height:420px; max-width:70%; object-fit:contain; filter:drop-shadow(0 16px 30px rgba(0,0,0,.6)); animation:sc-in .7s cubic-bezier(.2,1.5,.4,1) both;}
@keyframes sc-in{from{transform:scale(.2) rotate(-12deg); opacity:0; filter:brightness(6);} 60%{filter:brightness(1.6);} to{transform:none; opacity:1;}}
.showcase .sc-info{position:absolute; left:0; right:0; bottom:34px; text-align:center; color:#fff; animation:up-in .6s .35s both;}
@keyframes up-in{from{transform:translateY(30px); opacity:0;}}
.sc-info .stars{font-size:34px; letter-spacing:2px; display:block; text-shadow:0 0 12px rgba(255,255,255,.8), 0 3px 0 rgba(0,0,0,.35);}
.sc-info b{display:block; font-size:44px; font-weight:900; letter-spacing:4px; text-shadow:0 4px 0 rgba(0,0,0,.45), 0 0 24px rgba(255,255,255,.6);}
.sc-info .sc-new{display:inline-block; margin-top:6px; font-size:16px; font-weight:900; padding:3px 16px; border-radius:14px; background:linear-gradient(90deg,#ff4a6e,#ff8a3d);}
.sc-sparkle{position:absolute; width:10px; height:10px; background:#fff; clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%); animation:twinkle 1.6s ease-in-out infinite;}
@keyframes twinkle{0%,100%{transform:scale(.3); opacity:.2;} 50%{transform:scale(1.4); opacity:1;}}

/* ---------- リーグカード ---------- */
#album{background:linear-gradient(180deg,#2a1747,#4a2470 60%,#6a2d82);}
.album-tabs{position:relative; display:flex; gap:8px; padding:10px 14px 0; align-items:flex-end; z-index:1;}
.album-tabs button{background:rgba(255,255,255,.15); color:#fff; border:2px solid rgba(255,255,255,.35); border-bottom:none; border-radius:14px 14px 0 0; padding:8px 18px; font-weight:900; font-size:13px;}
.album-tabs button.on{background:#fff; color:#6a2d82;}
.album-prog{margin-left:auto; color:#fff; font-size:12px; font-weight:900; display:flex; align-items:center; gap:8px; padding-bottom:8px;}
.album-prog .bar{width:180px; height:10px; border-radius:6px; background:rgba(0,0,0,.35); overflow:hidden;}
.album-prog .bar i{display:block; height:100%; background:linear-gradient(90deg,#ff9fd8,#ffe36a);}
.album-body{position:absolute; left:0; right:0; bottom:0; top:48px; overflow-y:auto; padding:12px 16px 18px; background:rgba(255,255,255,.96); border-top:3px solid #fff;}
.album-sec{margin-bottom:14px; display:flex; gap:14px; align-items:center; padding:10px 12px; border-radius:16px; background:linear-gradient(90deg,#f6efff,#fff); border:2px solid #eadcff;}
.as-head{flex:0 0 120px; display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center;}
.as-face{width:84px; height:84px; border-radius:50%; background-size:cover; background-position:top center; border:3px solid #fff; box-shadow:0 3px 8px rgba(80,40,120,.3); background-color:#e8dcf8;}
.as-name{font-weight:900; font-size:15px; color:#4a2470;}
.as-cnt{font-size:11px; font-weight:900; color:#fff; background:#a05ad8; border-radius:10px; padding:1px 9px;}
.as-cnt.comp{background:linear-gradient(90deg,#f5b21c,#ff8a3d);}
.cheki-row{display:flex; gap:14px; flex-wrap:nowrap; overflow-x:auto; padding:4px 2px 6px;}
.cheki-row.wrap{flex-wrap:wrap; overflow:visible; justify-content:flex-start;}
.cheki-row .polaroid{flex:0 0 auto;}
.mob-sec{display:block; background:none; border:none; padding:0;}

/* ポラロイド（リーグカード） */
.polaroid{background:#fbfaf6; border-radius:4px; padding:7px 7px 5px; width:132px;
  box-shadow:0 6px 14px rgba(40,20,60,.35); transform:rotate(-1.5deg); transition:transform .12s;}
.polaroid:hover{transform:rotate(0) scale(1.04); z-index:2;}
.polaroid:nth-child(even){transform:rotate(1.5deg);}
.polaroid.locked{background:#e9e3f2; box-shadow:0 3px 8px rgba(40,20,60,.2);}
.polaroid[data-zoom]{cursor:zoom-in;}
.polaroid-photo{position:relative; width:100%; aspect-ratio:3/4; background:#2a3340; border-radius:2px; overflow:hidden; display:flex; align-items:center; justify-content:center;}
.pp-bg{position:absolute; inset:-6%; background-size:cover; background-position:center; filter:blur(3px) brightness(.96); transform:scale(1.06);}
.pp-char{position:relative; z-index:1; width:100%; height:100%; object-fit:contain; object-position:center bottom; filter:drop-shadow(0 3px 6px rgba(0,0,0,.4));}
.pp-gloss{position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(120deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,0) 70%, rgba(255,255,255,.12) 100%);
  box-shadow:inset 0 0 24px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.35);}
.pp-stamp{position:absolute; right:6px; bottom:6px; z-index:3; color:#ff6ea8; font-size:14px; opacity:.85; text-shadow:0 1px 1px rgba(0,0,0,.4); transform:rotate(-12deg);}
.polaroid-cap{color:#3a3630; font-size:11.5px; text-align:center; padding:5px 2px 1px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.cheki-lock{width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#b9a8d6; font-size:30px; font-weight:900;
  background:repeating-linear-gradient(45deg,#3a2a58 0 10px,#33244f 10px 20px);}
.cheki-lock span{font-size:10px; margin-top:4px;}

/* 拡大表示 */
.card-zoom{display:flex; flex-direction:row; align-items:center; justify-content:center; gap:22px; cursor:zoom-out; flex-wrap:wrap; max-width:96%; max-height:96%;}
.polaroid.big{width:min(300px,32vw); transform:rotate(-1.5deg); flex:0 0 auto;}
.polaroid.big .polaroid-photo{aspect-ratio:832/1216;}
.polaroid.big .pp-char{object-fit:contain; object-position:center;}
.polaroid.big .pp-bg{filter:blur(5px) brightness(.96);}
.polaroid.big .polaroid-cap{font-size:14px;}
.polaroid.flash{animation:cheki-flash .5s ease-out;}
@keyframes cheki-flash{0%{filter:brightness(2.4);}30%{filter:brightness(1.3);}100%{filter:brightness(1);}}
.cz-dialogue{width:380px; max-width:46vw; max-height:84vh; overflow-y:auto; background:rgba(255,255,255,.97); border:3px solid #c77be8;
  border-radius:18px; padding:0 18px 14px; box-shadow:0 8px 24px rgba(0,0,0,.4); align-self:center;}
.czd-title{color:#fff; font-weight:900; font-size:15px; margin:0 -18px 10px; padding:10px 18px; background:linear-gradient(90deg,#8a3fc0,#ff5ec7); position:sticky; top:0; letter-spacing:1px;}
.cz-dialogue p{color:var(--ink); font-size:14px; line-height:1.75; margin-bottom:6px; animation:line-in .4s both;}
.cz-dialogue p.nar{color:#8a6aa8; font-size:13px; font-style:italic;}
@keyframes line-in{from{opacity:0; transform:translateX(-8px);}}
.cz-hint{color:#fff; font-size:13px; font-weight:800; opacity:.85; width:100%; text-align:center; margin-top:2px;}

/* ---------- 会話パート ---------- */
#talk{cursor:pointer; background:#0b1a33;}
.talk-bg{position:absolute; inset:0; background-size:cover; background-position:center; animation:fade-in .5s;}
.talk-bg::after{content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(0,0,0,.35),transparent 45%);}
.talk-char{position:absolute; left:50%; bottom:-10px; transform:translateX(-50%); width:70%; height:100%;
  background-size:contain; background-repeat:no-repeat; background-position:bottom center; filter:drop-shadow(0 6px 16px rgba(0,0,0,.5)); transition:filter .3s, opacity .3s;}
.talk-char.in{animation:char-in .45s ease-out;}
@keyframes char-in{from{opacity:0; transform:translateX(-46%);}}
.talk-char.dim{filter:brightness(.55) drop-shadow(0 6px 16px rgba(0,0,0,.5));}
.talk-box{position:absolute; left:26px; right:26px; bottom:18px; min-height:128px; background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(240,246,255,.97));
  border:3px solid #fff; outline:3px solid var(--navy2); border-radius:18px; padding:26px 26px 14px; box-shadow:0 10px 26px rgba(0,0,0,.45);}
.talk-name{position:absolute; left:18px; top:-18px; min-width:120px; text-align:center; color:#fff; font-weight:900; font-size:17px; letter-spacing:2px;
  padding:5px 20px; border-radius:12px; background:linear-gradient(90deg,#24509a,#3f7fd6); border:2px solid #fff; box-shadow:0 3px 8px rgba(0,0,0,.3);}
.talk-name:empty{display:none;}
.talk-text{font-size:18px; line-height:1.75; min-height:62px; color:var(--ink); font-weight:700;}
.talk-text.nar{color:#5a6b85; font-style:italic; font-weight:600;}
.talk-next{position:absolute; right:22px; bottom:10px; color:var(--blue); font-size:14px; font-weight:900; animation:nudge 1s ease-in-out infinite;}
.talk-next.end{background:linear-gradient(180deg,#ffe07a,#f0a41a); color:#5a3500; padding:4px 14px; border-radius:12px; animation:none; box-shadow:0 2px 0 #b77508;}
@keyframes nudge{50%{transform:translateY(4px);}}
.talk-skip{position:absolute; right:14px; top:14px; z-index:3; border:2px solid rgba(255,255,255,.7); background:rgba(10,20,40,.55); color:#fff; border-radius:16px; padding:5px 14px; font-size:12px; font-weight:900; letter-spacing:1px;}
.eyecatch{position:absolute; inset:0; z-index:5; background:#000; display:flex; align-items:center; justify-content:center; animation:fade-in .5s;}
.eyecatch span{color:#fff; font-size:30px; font-weight:900; letter-spacing:10px; animation:up-in .8s .2s both; text-shadow:0 0 18px rgba(255,255,255,.4);}
.eyecatch.morning{background:radial-gradient(circle at 70% 30%,#fff7e0,#ffd6a6 50%,#f0b48a);}
.eyecatch.morning span{color:#8a4a1a; text-shadow:0 2px 0 #fff;}
.eyecatch.night{background:radial-gradient(circle at 50% 40%,#2a1747,#000 80%);}

/* ---------- バトル ---------- */
#battle{display:flex; flex-direction:row; background:#0a1420;}
.b-left{position:relative; width:620px; height:100%; overflow:hidden; border-right:3px solid #f2c14a; flex:0 0 620px;}
.b-right{position:relative; flex:1; height:100%; overflow:hidden;}
.tr-svgbg{position:absolute; inset:0;}
#battle .bg-layer{position:absolute; inset:0; background:linear-gradient(180deg,#8fd0ff 0%,#bfe6c9 45%,#8fd08a 46%,#5fa858 100%); background-size:cover; background-position:center;}
.enemy-char{position:absolute; inset:0; background-size:contain; background-repeat:no-repeat; background-position:bottom center; filter:drop-shadow(0 6px 16px rgba(0,0,0,.55)); pointer-events:none; transition:filter .2s;}
.enemy-char.react{animation:tr-react .5s;}
@keyframes tr-react{30%{transform:translateX(8px);} 60%{transform:translateX(-5px);}}
.enemy-char.noimg::after{content:""; }
.e-trainer-tag{position:absolute; left:0; right:0; bottom:0; padding:28px 12px 12px; background:linear-gradient(0deg,rgba(10,20,35,.95),transparent); color:#fff; font-weight:900; font-size:18px; text-align:center; letter-spacing:2px;}
.field{position:absolute; inset:0;}
.mon{position:absolute; display:flex; align-items:flex-end; justify-content:center; text-align:center; background-size:contain; background-repeat:no-repeat; background-position:center bottom;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.45)); transition:opacity .3s, filter .2s;}
.mon.badge{border-radius:50%; color:#fff; font-weight:800; font-size:13px; align-items:center; padding:8px; box-shadow:0 8px 20px rgba(0,0,0,.45), inset 0 0 20px rgba(255,255,255,.15); border:3px solid rgba(255,255,255,.5);}
.enemy-mon{right:70px; top:calc(238px - var(--sz,150px)); width:var(--sz,150px); height:var(--sz,150px); transform-origin:bottom center;}
.player-mon{left:40px; bottom:170px; width:var(--sz,170px); height:var(--sz,170px); transform-origin:bottom center;}
.mon-shadow{position:absolute; border-radius:50%; background:radial-gradient(ellipse,rgba(0,0,0,.35),transparent 70%);}
.enemy-shadow{right:60px; top:205px; width:170px; height:34px;}
.player-shadow{left:26px; bottom:152px; width:200px; height:38px;}
.mon.r5{filter:drop-shadow(0 0 10px rgba(255,210,60,.9)) drop-shadow(0 6px 10px rgba(0,0,0,.45));}
.mon.r6{filter:drop-shadow(0 0 12px rgba(255,94,199,.95)) drop-shadow(0 0 22px rgba(94,194,255,.6)) drop-shadow(0 6px 10px rgba(0,0,0,.45));}
.mon.sendout{animation:sendout .55s cubic-bezier(.3,1.6,.5,1);}
@keyframes sendout{0%{transform:scale(0); filter:brightness(5);} 60%{filter:brightness(2);} 100%{transform:scale(1);}}
.mon.hit{animation:hit .45s;}
@keyframes hit{0%,100%{transform:translateX(0);} 15%{transform:translateX(-10px); filter:brightness(3);} 30%{transform:translateX(9px);} 45%{transform:translateX(-7px); filter:brightness(2.5);} 60%{transform:translateX(5px);} 75%{transform:translateX(-2px);}}
.mon.lunge-p{animation:lunge-p .3s;} .mon.lunge-e{animation:lunge-e .3s;}
@keyframes lunge-p{50%{transform:translate(28px,-14px);}} @keyframes lunge-e{50%{transform:translate(-28px,14px);}}
.mon.faint{animation:faint .6s ease-in forwards;}
@keyframes faint{to{transform:translateY(60px) scaleY(.4); opacity:0;}}
.mon.dead{opacity:0;}
.hpbox{position:absolute; width:290px; background:linear-gradient(180deg,#ffffff,#eaf1fb); border:3px solid #22324a; border-radius:14px 4px 14px 4px;
  padding:7px 12px 8px; z-index:2; box-shadow:0 4px 12px rgba(0,0,0,.35);}
.enemy-hp{left:16px; top:16px;} .player-hp{right:16px; bottom:160px;}
.hp-name{font-weight:900; font-size:16px; color:#22303f; display:flex; align-items:center; gap:6px;} .hp-name .stars{font-size:10px;}
.hp-types{display:flex; gap:5px; margin:3px 0 5px;}
.hp-bar{position:relative; height:12px; background:#3a4657; border-radius:7px; overflow:hidden; border:2px solid #22324a;}
.hp-bar span{position:absolute; left:0; top:0; bottom:0; width:100%; background:var(--hp-ok); transition:width .45s ease-out, background .3s;}
.hp-bar span.hp-lag{background:#ff8a7a; transition:width .9s ease-in .35s;}
.hp-num{font-size:11px; color:#5a6b7d; text-align:right; margin-top:2px; font-weight:800; font-variant-numeric:tabular-nums;}
.balls{display:flex; gap:4px; margin-top:3px;}
.balls i{width:13px; height:13px; border-radius:50%; background:linear-gradient(180deg,var(--red) 0 45%,#222 45% 55%,#fff 55%); border:1px solid #222;}
.balls i.dead{filter:grayscale(1) opacity(.45);}
.battle-ui{position:absolute; left:0; right:0; bottom:0; height:140px; display:flex; background:linear-gradient(180deg,#f8fbff,#e6eef8); border-top:3px solid #22324a; z-index:3;}
.log{flex:1.25; padding:10px 14px; overflow-y:auto; font-size:13.5px; line-height:1.6; color:var(--ink); font-weight:700; border-right:2px solid #c9d7e8;}
.log p{margin-bottom:2px; animation:line-in .25s;} .log p.sys{color:var(--blue-d); font-weight:900;}
.cmd{flex:1; display:grid; grid-template-columns:1fr 1fr; gap:7px; padding:10px; align-content:center;}
.cmd button{position:relative; background:linear-gradient(180deg,#fff,#eef3fa); color:var(--ink); border:2px solid #c9d7e8; border-left:7px solid var(--mc,var(--blue)); border-radius:12px;
  padding:7px 8px; font-size:14px; font-weight:900; box-shadow:0 3px 0 #b5c4d8; text-align:left; transition:transform .06s;}
.cmd button:hover:not(:disabled){background:#fff; border-color:var(--mc,var(--blue));}
.cmd button:active:not(:disabled){transform:translateY(2px); box-shadow:0 1px 0 #b5c4d8;}
.cmd button:disabled{opacity:.45; cursor:not-allowed;}
.cmd .move .mtype{font-size:10px; display:block; font-weight:800; color:var(--ink2);}
.cmd .move .meff{position:absolute; right:6px; top:6px; font-size:10px; font-weight:900; padding:0 6px; border-radius:6px; color:#fff;}
.meff.good{background:#e8463a;} .meff.bad{background:#7a8aa0;} .meff.none{background:#333;}
.cmd .back{grid-column:1/3; border-left-color:var(--red); background:linear-gradient(180deg,#fff,#fff0ee); text-align:center;}
.b-fx{position:absolute; inset:0; pointer-events:none; z-index:4;}
.dmg-pop{position:absolute; font-size:30px; font-weight:900; color:#fff; -webkit-text-stroke:2px #c0281e; text-shadow:0 3px 0 #7a1a12; animation:dmg 1s ease-out forwards; white-space:nowrap;}
.dmg-pop.big{font-size:40px; color:#ffe36a; -webkit-text-stroke:2px #b0400a;}
.dmg-pop.weak{font-size:24px; color:#dfe8f2; -webkit-text-stroke:2px #4a5a6c; text-shadow:none;}
.dmg-pop.miss{font-size:24px; color:#fff; -webkit-text-stroke:2px #4a5a6c; text-shadow:none;}
@keyframes dmg{0%{transform:translateY(0) scale(.4); opacity:0;} 15%{transform:translateY(-16px) scale(1.25); opacity:1;} 30%{transform:translateY(-22px) scale(1);} 100%{transform:translateY(-52px); opacity:0;}}
.eff-banner{position:absolute; left:0; right:0; top:44%; text-align:center; font-size:26px; font-weight:900; color:#fff; padding:6px 0; letter-spacing:3px;
  background:linear-gradient(90deg,transparent,rgba(232,70,58,.92) 20%,rgba(232,70,58,.92) 80%,transparent); text-shadow:0 2px 0 rgba(0,0,0,.35); animation:eff 1.1s ease-out forwards;}
.eff-banner.bad{background:linear-gradient(90deg,transparent,rgba(74,90,108,.9) 20%,rgba(74,90,108,.9) 80%,transparent); font-size:20px;}
.eff-banner.crit{background:linear-gradient(90deg,transparent,rgba(245,178,28,.95) 20%,rgba(245,178,28,.95) 80%,transparent); color:#5a2a00; text-shadow:0 1px 0 #fff;}
@keyframes eff{0%{transform:scaleX(0); opacity:0;} 15%{transform:scaleX(1); opacity:1;} 75%{opacity:1;} 100%{opacity:0; transform:translateY(-10px);}}
.screen-flash{position:absolute; inset:0; background:#fff; animation:pflash .35s ease-out forwards;}
.b-left.quake{animation:quake .35s;}
@keyframes quake{25%{transform:translate(-5px,3px);} 50%{transform:translate(5px,-3px);} 75%{transform:translate(-3px,2px);}}
/* VS */
.vs-intro{position:absolute; inset:0; z-index:7; overflow:hidden; background:#060b1a;}
.vs-half{position:absolute; top:0; bottom:0; width:58%; overflow:hidden;}
.vs-half.l{left:0; background:linear-gradient(135deg,#1d4fa0,#0b1f44); clip-path:polygon(0 0,100% 0,78% 100%,0 100%); animation:vs-l .5s cubic-bezier(.2,1,.3,1) both;}
.vs-half.r{right:0; background:linear-gradient(135deg,#a0203a,#44081a); clip-path:polygon(22% 0,100% 0,100% 100%,0 100%); animation:vs-r .5s cubic-bezier(.2,1,.3,1) both;}
@keyframes vs-l{from{transform:translateX(-100%);}} @keyframes vs-r{from{transform:translateX(100%);}}
.vs-half.r .vs-art{position:absolute; right:0; top:0; bottom:-40px; width:80%; background-size:cover; background-position:top center; animation:slide-l .8s .2s ease-out both;}
@keyframes slide-l{from{transform:translateX(40px); opacity:0;}}
.vs-half.r .vs-name{position:absolute; right:30px; bottom:40px; color:#fff; font-size:34px; font-weight:900; letter-spacing:4px; text-shadow:0 3px 0 rgba(0,0,0,.5); animation:up-in .5s .4s both;}
.vs-half.l .vs-team{position:absolute; left:40px; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:6px; animation:slide-r .6s .2s both;}
.vs-team img{width:120px; height:110px; object-fit:contain; filter:drop-shadow(0 4px 8px rgba(0,0,0,.5));}
.vs-half.l .vs-name{position:absolute; left:30px; bottom:40px; color:#fff; font-size:26px; font-weight:900; letter-spacing:3px; text-shadow:0 3px 0 rgba(0,0,0,.5);}
.vs-mark{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-size:120px; font-weight:900; font-style:italic; color:#ffe36a;
  -webkit-text-stroke:4px #7a2a0a; text-shadow:0 8px 0 #7a2a0a, 0 0 40px rgba(255,200,60,.8); animation:vs-mark .6s .35s cubic-bezier(.2,1.8,.4,1) both;}
@keyframes vs-mark{from{transform:translate(-50%,-50%) scale(4); opacity:0;}}
/* WIN / LOSE */
.result-banner{position:absolute; inset:0; z-index:7; display:flex; flex-direction:column; align-items:center; justify-content:center; background:rgba(6,11,26,.55); animation:fade-in .3s;}
.result-banner b{font-size:110px; font-weight:900; font-style:italic; letter-spacing:8px; color:#ffe36a; -webkit-text-stroke:4px #8a3a0a; text-shadow:0 8px 0 #8a3a0a, 0 0 40px rgba(255,210,80,.9);
  animation:vs-mark .6s cubic-bezier(.2,1.8,.4,1) both;}
.result-banner.lose b{color:#b9c6d8; -webkit-text-stroke:4px #2a3a50; text-shadow:0 8px 0 #2a3a50;}
.result-banner span{margin-top:8px; color:#fff; font-size:18px; font-weight:900; letter-spacing:2px; animation:up-in .5s .4s both;}
.result-banner .rb-gp{display:flex; align-items:center; gap:8px; font-size:22px; color:#ffe36a;}
.confetti{position:absolute; top:-20px; width:10px; height:16px; animation:confetti linear forwards;}
@keyframes confetti{to{transform:translateY(660px) rotate(720deg);}}

/* ---------- 通知 ---------- */
.toast-area{position:absolute; left:0; right:0; top:56px; z-index:70; display:flex; flex-direction:column; align-items:center; gap:8px; pointer-events:none;}
.toast{display:flex; align-items:center; gap:12px; min-width:340px; max-width:620px; padding:10px 20px 10px 12px; border-radius:16px; color:#fff; font-weight:900; font-size:15px;
  background:linear-gradient(90deg,rgba(22,48,95,.97),rgba(42,95,174,.95)); border:2px solid #fff; box-shadow:0 8px 22px rgba(0,0,0,.45); animation:toast-in .45s cubic-bezier(.3,1.5,.5,1), toast-out .4s ease-in forwards 2.6s;}
.toast.card{background:linear-gradient(90deg,rgba(110,40,160,.97),rgba(255,94,199,.95));}
.toast.gp{background:linear-gradient(90deg,rgba(20,90,170,.97),rgba(40,160,230,.95));}
.toast.warn{background:linear-gradient(90deg,rgba(160,50,30,.97),rgba(232,90,58,.95));}
.toast .tc-ico{width:34px; height:44px; flex:0 0 34px; border-radius:6px; border:2px solid #fff; background:linear-gradient(135deg,#ffb3e2,#b25ef0); transform:rotate(-8deg); box-shadow:0 2px 8px rgba(0,0,0,.35); display:flex; align-items:center; justify-content:center; font-size:16px;}
.toast .tc-ico.gpi{border-radius:50%; width:34px; height:34px; background:radial-gradient(circle at 35% 30%,#fff,#7fe3ff 30%,#2a8de0 70%,#154f9c); transform:none;}
.toast small{display:block; color:rgba(255,255,255,.85); font-size:11.5px; font-weight:700;}
@keyframes toast-in{from{transform:translateY(-30px) scale(.9); opacity:0;}}
@keyframes toast-out{to{transform:translateY(-20px); opacity:0;}}

/* ログインボーナス */
.login-box{text-align:center;}
.stamps{display:grid; grid-template-columns:repeat(7,1fr); gap:8px; margin:6px 0 14px;}
.stamp{position:relative; border-radius:12px; padding:8px 4px; background:#eef4fb; border:2px solid #cfdcee; font-size:12px; font-weight:900; color:var(--ink2);}
.stamp b{display:block; font-size:15px; color:#1d74c9; margin-top:2px;}
.stamp.got{background:#e3f6e8; border-color:#8fd6a4;}
.stamp.got::after{content:"✓"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:34px; color:rgba(63,191,107,.75);}
.stamp.today{background:linear-gradient(180deg,#fff6d0,#ffe08a); border-color:#f5b21c; animation:badge-pulse 1.2s ease-in-out infinite;}
.stamp.big b{color:#d0561b;}

/* チュートリアル */
.tut{text-align:center; padding:4px 0 6px;}
.tut .tut-ball{width:90px; height:90px; margin:6px auto 12px; border-radius:50%; position:relative; background:linear-gradient(180deg,#ff5a4a 0 46%,#222 46% 54%,#fdfdfd 54%); box-shadow:0 6px 16px rgba(0,0,0,.3); animation:ball-wobble 2s ease-in-out infinite;}
.tut .tut-ball::after{content:""; position:absolute; left:50%; top:50%; width:24px; height:24px; margin:-12px; border-radius:50%; background:#fff; border:6px solid #222; box-sizing:content-box; transform:translate(-6px,-6px);}
.tut h2{font-size:22px; color:var(--ink); margin-bottom:12px;}

/* ホームキャラ選択 */
.pick-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:8px;}
.pick{position:relative; height:120px; border-radius:12px; overflow:hidden; cursor:pointer; border:3px solid #dbe5f2; background:#1a2b4c;}
.pick.on{border-color:var(--gold); box-shadow:0 0 0 2px var(--gold);}
.pick div{position:absolute; inset:0; background-size:cover; background-position:top center;}
.pick span{position:absolute; left:0; right:0; bottom:0; font-size:12px; font-weight:900; color:#fff; text-align:center; padding:12px 0 4px; background:linear-gradient(0deg,rgba(0,0,0,.8),transparent);}
.pick.locked{cursor:default;} .pick.locked div{filter:brightness(0) opacity(.5);}

/* =====================================================================
   v15：ホームをキービジュアル化／ランク撤去／編成に詳細／バトルUIの重なり修正
   ===================================================================== */
.tb-logo{display:flex; align-items:center; gap:8px; min-width:170px; font-weight:900; font-size:17px; letter-spacing:1px; color:#ffe36a; text-shadow:0 2px 0 #7a2a0a;}
.tb-ball{width:26px; height:26px; flex:0 0 26px; border-radius:50%; position:relative; border:2px solid #fff; box-shadow:0 2px 4px rgba(0,0,0,.4);
  background:linear-gradient(180deg,#ff5a4a 0 44%,#222 44% 56%,#fff 56%);}
.tb-ball::after{content:""; position:absolute; left:50%; top:50%; width:6px; height:6px; margin:-5px; border-radius:50%; background:#fff; border:2px solid #222;}

/* ホーム */
#home{background:url('../assets/bg/league_lobby.png') center/cover;}
#home::before{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(12,28,60,.35),rgba(12,28,60,.72));}
.home-kv{position:absolute; left:12px; right:12px; top:10px; height:296px; border-radius:18px; overflow:hidden; border:3px solid #fff; box-shadow:0 8px 20px rgba(0,0,0,.45); background:#0b1a33;}
.kv-img{position:absolute; inset:-3%; background:url('../assets/bg/home_kv.jpg') center 25%/cover; animation:kv-pan 18s ease-in-out infinite alternate;}
@keyframes kv-pan{from{transform:scale(1.02) translateX(-10px);} to{transform:scale(1.07) translateX(10px);}}
.home-kv::after{content:""; position:absolute; top:0; bottom:0; width:30%; left:-40%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent); animation:shine 7s ease-in-out infinite; pointer-events:none;}
.kv-logo{position:absolute; left:0; right:0; bottom:10px; text-align:center; color:#fff; animation:logo-in .8s cubic-bezier(.2,1.4,.4,1) both;}
.kv-logo h1{font-size:46px; font-weight:900; letter-spacing:4px; color:#ffe36a; -webkit-text-stroke:1.5px #7a2a0a;
  text-shadow:0 3px 0 #d0471b, 0 6px 0 #7a1f0d, 0 0 24px rgba(255,200,60,.55), 0 10px 20px rgba(0,0,0,.6);}
.kv-logo p{font-size:14px; font-weight:800; letter-spacing:3px; margin-top:2px; text-shadow:0 2px 6px rgba(0,0,0,.95);}
.home-tiles{position:absolute; left:12px; right:12px; top:318px; bottom:12px; display:grid; grid-template-columns:1.4fr 1.2fr 1fr 1fr; gap:10px;}
.home-tiles .tile{grid-area:auto;}
.tile .t-k{position:absolute; left:14px; top:12px; z-index:2; font-size:10px; font-weight:900; letter-spacing:2px; color:rgba(255,255,255,.8);}
.home-tiles .tile .tile-label{top:26px; bottom:auto; font-size:21px;}
.tile .t-desc{position:absolute; left:14px; right:14px; top:60px; z-index:2; color:#fff; font-size:12px; font-weight:800; line-height:1.55; text-shadow:0 1px 2px rgba(0,0,0,.5);}
.home-tiles .t-prog{bottom:12px;}
.tile .t-emb{position:absolute; right:10px; bottom:20px; width:70px; height:70px; opacity:.25; color:#fff; font-size:52px; line-height:70px; text-align:center;}
.tile .t-emb.t-ico{opacity:.55; top:auto; right:10px;}
.tile.challenge{background:linear-gradient(135deg,#0e3a86,#2a7de0 60%,#63d0ff);}
.tile.gacha{background:url('../assets/bg/gacha_art.jpg') center/cover;}
.tile.gacha::before{content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(40,10,70,.8),rgba(40,10,70,.05) 70%);}
.tile.gacha .t-desc{top:auto; bottom:14px; color:#ffe36a; font-size:14px;}
.tile .t-free{position:absolute; right:8px; top:8px; z-index:3; font-size:11px; font-weight:900; color:#fff; padding:2px 10px; border-radius:10px; background:linear-gradient(90deg,#ff4a6e,#ff8a3d); animation:badge-pulse 1.4s infinite;}

/* バトル（相手選択） */
.q-head{position:relative; height:20px; display:flex; align-items:center; gap:10px; color:#fff; font-weight:900; font-size:15px; letter-spacing:1px;}
.q-head::before{content:""; width:5px; height:16px; border-radius:3px; background:var(--gold);}
.q-head small{color:rgba(255,255,255,.75); font-size:11px; font-weight:700; letter-spacing:0;}
.quest-wrap{gap:7px;}
.named-grid{grid-template-rows:174px 174px; gap:8px;}

/* 編成：詳細パネル */
.box-top{height:126px; padding:8px 12px 6px;}
.team-slots{grid-template-columns:repeat(3,170px);}
.tslot{height:112px;}
.tslot.sel{box-shadow:0 0 0 3px var(--blue), 0 4px 10px rgba(30,50,80,.2);}
.team-power{gap:2px 14px; display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; align-content:center; padding:10px 16px;}
.team-power .tp-k{grid-column:1/3;} .team-power .tp-v{font-size:30px;} .team-power #auto-team{align-self:center !important;}
.bd-move small{white-space:normal; font-size:9.5px;}
.box-main{position:absolute; left:0; right:0; top:128px; bottom:0; display:flex; gap:10px; padding:0 12px 10px;}
.box-left{position:relative; flex:1; min-width:0;}
.box-left .box-filter{padding:2px 0 6px;}
.box-left .box-scroll{position:absolute; left:0; right:0; top:34px; bottom:0; padding:3px 3px 10px;}
.box-left .mgrid{grid-template-columns:repeat(6,1fr); grid-auto-rows:88px;}
.mcell.sel{box-shadow:0 0 0 3px var(--blue), 0 3px 8px rgba(30,50,80,.18);}
.box-detail{flex:0 0 300px; background:#fff; border:3px solid #fff; border-radius:16px; box-shadow:0 4px 12px rgba(30,50,80,.2);
  padding:10px 12px; display:flex; flex-direction:column; gap:7px; overflow:hidden; animation:fade-in .2s;}
.bd-head{display:flex; gap:10px; align-items:center;}
.bd-img{width:64px; height:64px; flex:0 0 64px; border-radius:12px; border:3px solid var(--rc); background:radial-gradient(circle,var(--rc2),#fff 70%);}
.bd-img img{width:100%; height:100%; object-fit:contain;}
.bd-name{font-size:17px; font-weight:900; line-height:1.2;}
.bd-types{display:flex; gap:4px; margin-top:3px;}
.bd-stats .dxs-row{margin-bottom:1px;} .bd-stats .dxs-l{width:54px; font-size:11px;} .bd-stats .dxs-bar{height:8px;} .bd-stats .dxs-v{font-size:11px;}
.bd-total{color:var(--blue-d); font-size:14px;}
.bd-moves{display:grid; grid-template-columns:1fr 1fr; gap:5px;}
.bd-move{border:2px solid var(--line); border-left:6px solid var(--mc); border-radius:9px; padding:3px 7px; font-size:12px; font-weight:900; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.bd-move small{display:block; font-size:10px; color:var(--ink2); font-weight:700;}
.bd-btn{margin-top:auto;}

/* バトルUI：コマンドが上にはみ出してHPボックスと重ならないように */
.battle-ui{height:178px;}
.player-mon{bottom:196px;} .player-shadow{bottom:182px;} .player-hp{bottom:190px;}
.cmd{grid-template-rows:1fr 1fr auto; gap:6px; padding:8px 10px; align-content:stretch;}
.cmd button{display:flex; flex-direction:column; justify-content:center; min-width:0; overflow:hidden; white-space:nowrap; padding:4px 8px;}
.cmd .mname{display:block; overflow:hidden; text-overflow:ellipsis; font-size:14px; line-height:1.3;}
.cmd .move .mtype{display:flex; align-items:center; gap:4px; font-size:10px; margin-top:1px;}
.cmd .move .mtype i{width:8px; height:8px; flex:0 0 8px; border-radius:50%;}
.cmd .move{overflow:visible;}
.cmd .move .meff{position:absolute; right:4px; top:-8px; padding:0 6px; border-radius:6px; font-size:9px; line-height:1.6; border:1.5px solid #fff; box-shadow:0 1px 3px rgba(0,0,0,.3);}
.cmd .back{padding:5px; display:block;}
.log{font-size:13px;}

/* ガチャ：固定イラスト（排出ポケモンを見せない） */
.g-banner{background:#1a0d33 url('../assets/bg/gacha_art.jpg') center/cover;}
.g-banner::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(30,8,60,.78),rgba(30,8,60,0) 50%); pointer-events:none;}
.g-logo{z-index:3;}
.gl-note{margin-top:14px; display:inline-block; font-size:12px; font-weight:900; line-height:1.5; color:#fff; padding:6px 12px; border-radius:12px; background:rgba(20,80,160,.75); border:2px solid rgba(255,255,255,.6);}
/* かぶり→GP変換 */
.pr-front.dupe img{filter:saturate(.5) brightness(.85);}
.pr-gp{position:absolute; left:0; right:0; top:40%; z-index:3; text-align:center; font-size:19px; font-weight:900; color:#fff; -webkit-text-stroke:1px #154f9c; text-shadow:0 2px 0 #154f9c, 0 0 10px rgba(94,194,255,.8);}
.pr-grid.single .pr-gp{font-size:28px;}
.pr-btns{flex-wrap:wrap; justify-content:center; max-width:760px;}
.pr-conv{flex-basis:100%; text-align:center; color:#fff; font-weight:900; font-size:15px;}
.pr-conv b{color:#7fe3ff; font-size:18px;}
.sc-info .sc-new.conv{background:linear-gradient(90deg,#2a8de0,#5ec2ff);}

/* =====================================================================
   v17：クリエイターロゴ／人物なしホーム絵／★ごとの段／カードのレア度と開封演出／サウンド
   ===================================================================== */
.tb-snd{border:1px solid rgba(255,255,255,.3); font-size:15px; cursor:pointer;}
.kv-img{background-image:url('../assets/bg/home_art.jpg'); background-position:center 55%;}

/* 図鑑・編成：★ごとの段 */
.rank-list{display:flex; flex-direction:column; gap:12px;}
.rank-h{display:flex; align-items:center; gap:8px; margin:0 2px 6px; font-size:15px; font-weight:900; color:var(--rc); letter-spacing:-1px; text-shadow:0 1px 0 #fff;}
.rank-h small{color:var(--ink2); font-size:11px; letter-spacing:0;}
.rank-h::after{content:""; flex:1; height:2px; border-radius:2px; background:linear-gradient(90deg,var(--rc),transparent);}

/* リーグカードのレア度 */
.polaroid{position:relative;}
.pp-rar{position:absolute; left:-6px; top:-7px; z-index:5; font-size:11px; font-weight:900; font-style:italic; letter-spacing:.5px; padding:1px 8px; border-radius:8px;
  color:#fff; border:2px solid #fff; box-shadow:0 2px 5px rgba(0,0,0,.35); text-shadow:0 1px 0 rgba(0,0,0,.3);}
.crd-R .pp-rar, .rv-R .rv-stamp, .rv-R .czd-rar{background:linear-gradient(135deg,#8fd0ff,#3a86c8);}
.crd-SR .pp-rar, .rv-SR .rv-stamp, .rv-SR .czd-rar{background:linear-gradient(135deg,#ffe98a,#e0a012); color:#5a3500; text-shadow:0 1px 0 rgba(255,255,255,.6);}
.crd-SSR .pp-rar, .rv-SSR .rv-stamp, .rv-SSR .czd-rar{background:linear-gradient(135deg,#ff8ad8,#9a4ae0);}
.crd-UR .pp-rar, .rv-UR .rv-stamp, .rv-UR .czd-rar{background:linear-gradient(90deg,#ff5ec7,#ffb03a,#5ef0a0,#5ec2ff,#b07bff); background-size:200% 100%; animation:ur-slide 2s linear infinite;}
@keyframes ur-slide{to{background-position:200% 0;}}
.polaroid.crd-SR:not(.locked){box-shadow:0 0 0 3px #f5c542, 0 6px 14px rgba(40,20,60,.35);}
.polaroid.crd-SSR:not(.locked){box-shadow:0 0 0 3px #e07ad8, 0 0 16px rgba(255,94,199,.55), 0 6px 14px rgba(40,20,60,.35);}
.polaroid.crd-UR:not(.locked){border:4px solid transparent; animation:rot 3s linear infinite;
  background:linear-gradient(#fbfaf6,#fbfaf6) padding-box, conic-gradient(from var(--ang),#ff5ec7,#ffb03a,#ffe36a,#5ef0a0,#5ec2ff,#b07bff,#ff5ec7) border-box;
  box-shadow:0 0 18px rgba(255,120,220,.55), 0 6px 14px rgba(40,20,60,.35);}
.polaroid.crd-SSR:not(.locked) .pp-gloss, .polaroid.crd-UR:not(.locked) .pp-gloss{background:linear-gradient(120deg,rgba(255,255,255,.35) 0%,rgba(255,180,240,.12) 25%,rgba(255,255,255,0) 45%,rgba(160,220,255,.15) 75%,rgba(255,255,255,.3) 100%);}

/* カードを開く演出 */
.rv-bg{position:absolute; inset:0; overflow:hidden; pointer-events:none;}
.rv-R{--rv:#7cc3ee;} .rv-SR{--rv:#ffd23a;} .rv-SSR{--rv:#ff7ad0;} .rv-UR{--rv:#ffffff;}
.rv-rays{position:absolute; left:34%; top:50%; width:1500px; height:1500px; margin:-750px; opacity:0;
  background:repeating-conic-gradient(var(--rv) 0 5deg, transparent 5deg 15deg); animation:spin 26s linear infinite, rv-rays .7s .75s ease-out forwards;}
.rv-R .rv-rays{animation:spin 26s linear infinite, rv-rays-low .7s .75s ease-out forwards;}
.rv-UR .rv-rays{background:repeating-conic-gradient(#ff5ec7 0 5deg,#ffe36a 5deg 10deg,#5ec2ff 10deg 15deg,transparent 15deg 24deg);}
@keyframes rv-rays{to{opacity:.4;}} @keyframes rv-rays-low{to{opacity:.16;}}
.rv-flash{position:absolute; inset:0; background:radial-gradient(circle at 34% 50%,#fff,var(--rv) 40%,transparent 75%); opacity:0; animation:rv-flash .7s .72s ease-out;}
.rv-UR .rv-flash{animation:rv-flash .7s .72s ease-out, rv-flash .9s 1.15s ease-out;}
@keyframes rv-flash{0%{opacity:0;} 18%{opacity:.95;} 100%{opacity:0;}}
.rv-bg .sc-sparkle{opacity:0;}
.card-zoom.rv{position:relative; z-index:1;}
.rv-card{position:relative; perspective:1400px; flex:0 0 auto;}
.rv-flip{position:relative; transform-style:preserve-3d; animation:rv-flip .8s .3s cubic-bezier(.3,1.25,.5,1) both;}
.rv-UR .rv-flip{animation:rv-shake .45s .1s ease-in-out both, rv-flip .9s .55s cubic-bezier(.3,1.25,.5,1) both;}
@keyframes rv-flip{from{transform:rotateY(180deg) scale(.72);} to{transform:rotateY(0) scale(1);}}
@keyframes rv-shake{0%,100%{transform:rotateY(180deg) scale(.72);} 25%{transform:rotateY(180deg) scale(.72) rotate(-4deg);} 75%{transform:rotateY(180deg) scale(.72) rotate(4deg);}}
.rv-front{backface-visibility:hidden; -webkit-backface-visibility:hidden;}
.rv-front .polaroid.big{transform:rotate(-1.5deg);}
.rv-back{position:absolute; inset:0; z-index:2; backface-visibility:hidden; -webkit-backface-visibility:hidden; transform:rotateY(180deg); border-radius:10px;
  background:radial-gradient(circle at 50% 45%,#34599e,#0f1d40 70%); border:5px solid #fff; box-shadow:0 0 34px var(--rv), 0 0 70px var(--rv);
  display:flex; align-items:center; justify-content:center;}
.rv-back::before{content:""; position:absolute; width:110px; height:110px; border-radius:50%; background:linear-gradient(180deg,#ff5a4a 0 46%,#222 46% 54%,#fdfdfd 54%); opacity:.9; box-shadow:0 4px 14px rgba(0,0,0,.5);}
.rv-back span{position:relative; margin-top:190px; font-size:36px; font-weight:900; font-style:italic; color:#fff; text-shadow:0 0 14px var(--rv), 0 2px 0 rgba(0,0,0,.4);}
.rv-stamp{position:absolute; right:-22px; top:-20px; z-index:6; font-size:36px; font-weight:900; font-style:italic; letter-spacing:1px; padding:2px 16px; border-radius:14px;
  color:#fff; border:3px solid #fff; box-shadow:0 5px 16px rgba(0,0,0,.45); text-shadow:0 2px 0 rgba(0,0,0,.3); animation:rv-stamp .5s calc(var(--base) - .2s) cubic-bezier(.2,1.8,.4,1) both;}
@keyframes rv-stamp{from{transform:scale(3.2) rotate(-25deg); opacity:0;} to{transform:rotate(-8deg); opacity:1;}}
.card-zoom.rv .cz-dialogue{animation:rv-dlg .5s var(--base) ease-out both;}
@keyframes rv-dlg{from{opacity:0; transform:translateX(34px);}}
.card-zoom.rv .cz-hint{animation:fade-in .4s calc(var(--base) + .3s) both;}
.czd-rar{display:inline-block; margin-right:8px; padding:0 8px; border-radius:7px; font-style:italic; font-size:13px; border:2px solid #fff; vertical-align:1px;}
.czd-title{display:flex; align-items:center;}

/* =====================================================================
   v18：カード閲覧を最大サイズ＆位置固定（会話の長さで位置がずれないように）
   アプリ画面(960×600)基準の固定レイアウト。vh は使わない。
   ===================================================================== */
#overlay .card-zoom{position:absolute; inset:0; max-width:none; max-height:none; display:flex; flex-wrap:nowrap;
  align-items:center; justify-content:center; gap:22px; padding:12px 20px 24px;}
#overlay .polaroid.big{width:382px; flex:0 0 382px; padding:7px 7px 4px; border:4px solid transparent;}  /* URの虹枠と同じ太さの枠を全カードに（大きさ・位置を完全に揃える） */
#overlay .polaroid.big .polaroid-photo{width:360px; height:526px; aspect-ratio:auto;}
#overlay .polaroid.big .pp-char{width:100%; height:100%; object-fit:contain; object-position:center center;}
#overlay .polaroid.big .polaroid-cap{height:24px; line-height:18px; padding:4px 2px 2px;}
#overlay .rv-card{flex:0 0 382px; width:382px; height:569px;}
#overlay .cz-dialogue{flex-basis:462px; width:462px;}
#overlay .cz-dialogue{flex:0 0 470px; width:470px; max-width:none; height:540px; max-height:none; overflow-y:auto; align-self:center;}
#overlay .cz-hint{position:absolute; left:0; right:0; bottom:4px; margin:0; font-size:12px;}

/* =====================================================================
   v20：クレジット
   ===================================================================== */
.tb-credit{height:30px; padding:0 12px; border-radius:15px; border:1px solid rgba(255,255,255,.35); background:rgba(255,255,255,.14); color:#fff; font-size:12px; font-weight:900; letter-spacing:1px;}
.tb-credit:hover{background:rgba(255,255,255,.28);}
#credits{background:radial-gradient(circle at 50% 0%,#2a4f9a,#0d1a36 70%);}
.cr-scroll{position:absolute; inset:0; overflow-y:auto; padding:22px 40px 26px; color:#fff;}
.cr-head{text-align:center; margin-bottom:14px;}
.cr-logo{font-size:40px; font-weight:900; letter-spacing:4px; color:#ffe36a; -webkit-text-stroke:1.2px #7a2a0a; text-shadow:0 3px 0 #d0471b, 0 6px 0 #7a1f0d, 0 0 20px rgba(255,200,60,.5);}
.cr-sub{font-size:14px; font-weight:800; letter-spacing:3px; opacity:.9; margin-top:2px;}
.cr-sec{margin:16px 0;}
.cr-sec h3{font-size:15px; font-weight:900; letter-spacing:2px; color:#ffe36a; margin-bottom:10px; display:flex; align-items:center; gap:10px;}
.cr-sec h3::after{content:""; flex:1; height:2px; border-radius:2px; background:linear-gradient(90deg,rgba(255,227,106,.8),transparent);}
.cr-maker{display:block; width:360px; max-width:70%; margin:0 auto; background:#fff; border-radius:14px; padding:10px 18px; box-shadow:0 6px 16px rgba(0,0,0,.35);}
.cr-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.cr-row{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.cr-card{background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.22); border-radius:14px; padding:12px 16px; animation:up-in .5s both;}
.cr-title{font-size:15px; font-weight:900; line-height:1.4;}
.cr-by{font-size:12px; font-weight:700; opacity:.9; margin-top:3px;}
.cr-url{display:inline-block; font-size:11px; color:#8fd0ff; margin-top:3px; word-break:break-all;}
.cr-tracks{width:100%; border-collapse:collapse; margin-top:8px; font-size:12px;}
.cr-tracks td{padding:4px 6px; border-top:1px solid rgba(255,255,255,.14);}
.cr-tracks td:first-child{color:#bfe0ff; font-weight:800; width:46%;}
.cr-tracks td:last-child{font-weight:700;}
.cr-note{font-size:11.5px; line-height:1.8; opacity:.8; text-align:center; margin-top:18px;}
.cr-scroll{padding-bottom:48px;}
.bn-center .bn-badge{top:-6px; right:calc(50% - 40px);}
.cr-maker-name{text-align:center; font-size:18px; font-weight:900; letter-spacing:2px; margin-top:10px;}

/* v25：3連ガチャ */
.pull-pair{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.pull-pair .pull-btn{padding:10px 6px;}
.pr-grid.three{grid-template-columns:repeat(3,200px); gap:20px;}
.pr-grid.three .pr-card{height:260px;}

/* v27：編成の入れ替え／エース */
.tslot.target{outline:3px dashed var(--gold); outline-offset:-3px; cursor:pointer; animation:slot-pulse 1.1s ease-in-out infinite;}
@keyframes slot-pulse{50%{box-shadow:0 0 0 4px rgba(255,200,60,.55), 0 4px 10px rgba(30,50,80,.2);}}
.tslot.over{box-shadow:0 0 0 4px var(--gold), 0 4px 12px rgba(0,0,0,.3) !important; transform:scale(1.03);}
.ts-swap{position:absolute; left:6px; right:6px; bottom:30px; z-index:3; text-align:center; font-size:11px; font-weight:900; color:#5a3500;
  background:linear-gradient(180deg,#ffe07a,#f0a41a); border-radius:8px; padding:2px 4px; box-shadow:0 2px 6px rgba(0,0,0,.25); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.tslot:not(.filled) .ts-swap{bottom:10px;}
.team-power .tp-h{grid-column:1/3; font-size:10.5px; line-height:1.45; opacity:.85;}
.mcell[draggable="true"]{cursor:grab;}
.bd-foot{margin-top:auto; display:flex; flex-direction:column; gap:5px;}
.bd-acts{display:flex; gap:6px;} .bd-acts .btn{flex:1; padding:7px 4px; font-size:12px;}
.bd-tip{font-size:11px; font-weight:900; color:var(--blue-d);}
.bd-swap{display:grid; grid-template-columns:repeat(3,1fr); gap:6px;}
.bd-swap button{border:2px solid #cfdcee; background:linear-gradient(180deg,#fff,#eef4fb); border-radius:10px; padding:3px 2px; display:flex; flex-direction:column; align-items:center; font-size:10.5px; font-weight:900; color:var(--ink);}
.bd-swap button:hover{border-color:var(--gold); background:#fff8e0;}
.bd-swap img{width:34px; height:30px; object-fit:contain;}
.bd-swap span{max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.ace-tag{margin-left:5px; font-size:10px; font-weight:900; font-style:italic; color:#fff; padding:0 7px; border-radius:6px; background:linear-gradient(90deg,#ff4a6e,#ff8a3d); box-shadow:0 1px 3px rgba(0,0,0,.3);}
.mon.ace{filter:drop-shadow(0 0 8px rgba(255,80,60,.95)) drop-shadow(0 0 18px rgba(255,160,60,.7)) drop-shadow(0 6px 10px rgba(0,0,0,.45));}
/* 編成の詳細パネルが下にはみ出さないように詰める */
.box-detail{gap:5px; padding:8px 11px;}
.bd-img{width:54px; height:54px; flex:0 0 54px;}
.bd-name{font-size:16px;}
.bd-stats .dxs-row{margin-bottom:0; line-height:1.25;}
.bd-move{padding:2px 6px; line-height:1.25;}
.bd-move small{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:9.5px;}
.bd-acts .btn{padding:6px 2px; font-size:11.5px;}
.bd-swap img{width:30px; height:26px;}

/* v30：技の命中率表示 */
.cmd .move .mtype{gap:5px;}
.cmd .move .macc{font-weight:800; color:var(--ink2);}
.cmd .move .macc.low{color:#d0561b;}
.dxs-move{display:inline-flex; flex-direction:column; line-height:1.3;}
.dxm-sub{font-size:10px; color:var(--ink2); font-weight:700;}

/* v36：バトル要素（状態異常・能力変化・技タグ） */
.st-badge{display:inline-block; margin-left:6px; font-size:10px; font-weight:900; color:#fff; padding:1px 7px; border-radius:6px; vertical-align:2px; border:1.5px solid #fff; box-shadow:0 1px 2px rgba(0,0,0,.35); text-shadow:0 1px 0 rgba(0,0,0,.25);}
.cmd .mname{display:flex; align-items:center; gap:5px; flex-wrap:wrap;}
.mtag{font-size:9px; font-weight:900; color:#fff; background:#5a6b85; border-radius:5px; padding:0 5px; line-height:1.5;}
.mtag.pri{background:#e6a800;} .mtag.up{background:#3fbf6b;}
.mon.buff{animation:mbuff .5s ease;}
@keyframes mbuff{0%{filter:brightness(1);} 30%{filter:brightness(1.5) drop-shadow(0 0 10px rgba(120,255,150,.9));} 100%{filter:brightness(1);}}
.mon.debuff{animation:mdebuff .5s ease;}
@keyframes mdebuff{0%{filter:brightness(1);} 30%{filter:brightness(.6) drop-shadow(0 0 8px rgba(120,140,180,.8));} 100%{filter:brightness(1);}}
.mon.r5.buff,.mon.r6.buff,.mon.r5.debuff,.mon.r6.debuff{}

/* v38：ガチャのコレクションボーナス */
.g-bonus{background:linear-gradient(135deg,#2a1747,#4a2470); border:2px solid rgba(255,255,255,.25); border-radius:14px; padding:9px 12px; color:#fff;}
.gb-head{display:flex; align-items:center; justify-content:space-between; font-size:12px; font-weight:900;}
.gb-head b{font-size:18px; color:#ffe36a;}
.gb-bar{height:8px; border-radius:5px; background:rgba(0,0,0,.4); overflow:hidden; margin:5px 0 6px;}
.gb-bar i{display:block; height:100%; background:linear-gradient(90deg,#ff9fd8,#ffe36a); transition:width .5s;}
.gb-rates{display:flex; justify-content:space-between; font-size:12px; font-weight:900; text-shadow:0 1px 0 rgba(0,0,0,.4);}