*{box-sizing:border-box;}
html,body{
margin:0;
min-height:100%;
background:#111827;
color:#fff;
font-family:system-ui,-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
-webkit-tap-highlight-color:transparent;
touch-action:manipulation;
}
.hidden{display:none!important;}
button{cursor:pointer;user-select:none;}
button:active{transform:scale(.97);}

.loading-screen{
position:fixed;
inset:0;
z-index:999;
display:flex;
align-items:center;
justify-content:center;
background:radial-gradient(circle at top,#1e293b,#020617 70%);
}
.loading-card{text-align:center;padding:24px;}
.loading-logo{
font-size:22px;
font-weight:900;
letter-spacing:.12em;
color:#ff7ad6;
margin-bottom:12px;
}
.loading-text{
font-size:14px;
color:#dbeafe;
animation:loadingPulse 1s ease-in-out infinite;
}
@keyframes loadingPulse{0%,100%{opacity:.45;}50%{opacity:1;}}

.title-screen,.ending-screen{
min-height:100vh;
display:flex;
align-items:center;
justify-content:center;
padding:20px;
background:radial-gradient(circle at top,#334155,#020617 70%);
}
.title-card,.ending-card{
width:100%;
max-width:430px;
padding:24px 18px;
background:rgba(11,16,32,.96);
border:2px solid #fef3c7;
border-radius:18px;
text-align:center;
box-shadow:0 24px 70px rgba(0,0,0,.5);
}
.title-card h1{
font-size:32px;
margin:0 0 12px;
color:#ff7ad6;
}
.start-btn,.sub-btn,.mini-btn,.dpad button,.command-panel button,.sub-menu-body button{
border:none;
border-radius:12px;
background:#2563eb;
color:#fff;
font-weight:800;
padding:13px;
}
.version-label{margin-top:12px;font-size:11px;color:#93c5fd;}
.release-note{margin-top:6px;font-size:12px;color:#fef3c7;opacity:.95;}

.map-screen{
min-height:100vh;
padding:12px;
background:linear-gradient(180deg,#0f172a,#111827);
}
.map-panel,.enemy-panel,.message-panel,.status-panel,.command-panel,.utility-panel,.sub-menu{
background:rgba(11,16,32,.96);
border:2px solid #dbeafe;
border-radius:16px;
padding:14px;
box-shadow:0 18px 50px rgba(0,0,0,.36);
}
.map-panel{
max-width:430px;
margin:0 auto;
}
.map-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
}
.map-head h2{
margin:0;
font-size:20px;
color:#fde68a;
}
.mini-btn{
font-size:12px;
padding:9px 10px;
background:#334155;
}
#mapCanvas{
display:block;
width:100%;
max-width:352px;
aspect-ratio:1/1;
margin:14px auto;
background:#020617;
border:2px solid #475569;
border-radius:10px;
image-rendering:pixelated;
}
#mapMessage,.message-panel p{line-height:1.6;margin:0;}
.dpad{
display:grid;
grid-template-columns:1fr 1fr 1fr;
gap:8px;
max-width:250px;
margin:14px auto 0;
}
.dpad button{font-size:18px;background:#1d4ed8;}

.battle-screen{
min-height:100vh;
display:flex;
flex-direction:column;
gap:12px;
padding:12px;
padding-bottom:calc(12px + env(safe-area-inset-bottom,0px));
background:
linear-gradient(180deg,rgba(15,23,42,.92),rgba(17,24,39,.98)),
url("../img/backgrounds/battle_room.png?v=29special");
background-size:cover;
background-position:center;
}
body.boss-battle .battle-screen{
background:
linear-gradient(180deg,rgba(20,10,30,.86),rgba(5,5,12,.98)),
url("../img/backgrounds/battle_boss_room.png?v=29special");
background-size:cover;
background-position:center;
}
.enemy-header h1{font-size:18px;margin:0;}
.enemy-area{
position:relative;
display:flex;
justify-content:center;
align-items:center;
min-height:220px;
overflow:hidden;
}
.enemy-area img{
max-width:210px;
max-height:210px;
object-fit:contain;
filter:drop-shadow(0 18px 18px rgba(0,0,0,.45));
}
.enemy-slot img.image-error{display:none;}
.enemy-area:has(.enemy-slot img.image-error)::after{
content:"画像を読み込めません";
display:block;
color:#fca5a5;
font-size:13px;
font-weight:700;
}
.hp-bar{
width:100%;
height:12px;
background:#1f2940;
border-radius:999px;
overflow:hidden;
margin-top:8px;
}
.hp-fill{
height:100%;
background:#7ce0a1;
transition:width .25s ease;
}
.message-panel{min-height:72px;}
.bottom-ui{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
}
.status-panel{position:relative;overflow:hidden;}
.status-panel h2{font-size:15px;margin:0 0 8px;}
.status-panel p{font-size:13px;margin:4px 0;}
.command-panel{
display:grid;
grid-template-columns:1fr 1fr;
gap:8px;
}
.command-panel button:disabled,.sub-menu-body button:disabled,.mini-btn:disabled,.sub-btn:disabled{
opacity:.45;
filter:grayscale(.45);
}
.utility-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:8px;
}
.sub-btn{font-size:13px;padding:9px 12px;background:#334155;}
.sub-btn.danger{background:#7f1d1d;}
.sound-off{filter:grayscale(.6);opacity:.8;}

.sub-menu-head{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:10px;
}
.sub-menu-body{
display:grid;
grid-template-columns:1fr;
gap:8px;
}
.sub-menu-body button{
width:100%;
font-size:14px;
text-align:left;
background:#1d4ed8;
}
.equip-current{
font-size:12px;
line-height:1.5;
color:#dbeafe;
background:rgba(255,255,255,.06);
border-radius:10px;
padding:8px;
margin-bottom:8px;
}
.equip-stat{font-size:12px;color:#fef3c7;}
.treasure-rare{
color:#fde68a;
font-weight:700;
text-shadow:0 0 8px rgba(255,215,0,.35);
}
.treasure-box{
background:linear-gradient(180deg,#7c5c10,#3b2f0b);
border:2px solid #facc15;
}
.sub-menu-body .treasure-btn{background:#92400e;}

.damage-text{
position:absolute;
top:30px;
left:50%;
transform:translateX(-50%) translateY(20px);
font-size:28px;
font-weight:bold;
color:#fff;
text-shadow:0 0 8px rgba(255,0,0,.8);
opacity:0;
pointer-events:none;
z-index:5;
}
.damage-text.show{animation:damagePop .8s ease;}
.player-damage{
top:8px;
color:#ff6b6b;
text-shadow:0 0 8px rgba(255,0,0,.85);
}
@keyframes damagePop{
0%{opacity:0;transform:translateX(-50%) translateY(20px) scale(.8);}
20%{opacity:1;transform:translateX(-50%) translateY(0) scale(1.2);}
100%{opacity:0;transform:translateX(-50%) translateY(-40px) scale(1);}
}
.enemy-slot img.hit{animation:enemyHit .35s ease;}
@keyframes enemyHit{
0%{transform:translateX(0);}
20%{transform:translateX(-8px);}
40%{transform:translateX(8px);}
60%{transform:translateX(-6px);}
80%{transform:translateX(6px);}
100%{transform:translateX(0);}
}
.status-panel.player-hit{animation:playerHit .35s ease;}
@keyframes playerHit{
0%{transform:translateX(0);}
20%{transform:translateX(-6px);}
40%{transform:translateX(6px);}
60%{transform:translateX(-4px);}
80%{transform:translateX(4px);}
100%{transform:translateX(0);}
}

body.screen-shake .battle-screen{animation:screenShake .32s ease;}
@keyframes screenShake{
0%{transform:translate(0,0);}
20%{transform:translate(-5px,2px);}
40%{transform:translate(5px,-2px);}
60%{transform:translate(-3px,-1px);}
80%{transform:translate(3px,1px);}
100%{transform:translate(0,0);}
}
.screen-fx{
position:fixed;
inset:0;
z-index:30;
pointer-events:none;
background:rgba(255,255,255,.65);
animation:screenFlash .35s ease forwards;
}
@keyframes screenFlash{0%{opacity:0;}30%{opacity:1;}100%{opacity:0;}}

.cutin-overlay{
position:fixed;
inset:0;
z-index:40;
display:flex;
align-items:center;
justify-content:center;
padding:20px;
background:rgba(0,0,0,.35);
}
.cutin-card{
width:100%;
max-width:420px;
padding:18px 16px;
border:2px solid #fef3c7;
border-radius:16px;
background:linear-gradient(135deg,#111827,#4c1d95);
box-shadow:0 18px 60px rgba(0,0,0,.55);
text-align:center;
animation:cutinPop .72s ease forwards;
}
.cutin-title{
font-size:13px;
font-weight:900;
letter-spacing:.18em;
color:#fde68a;
margin-bottom:8px;
}
.cutin-text{
font-size:28px;
font-weight:900;
color:#fff;
text-shadow:0 0 12px rgba(255,122,214,.95);
}
@keyframes cutinPop{
0%{transform:translateX(-100%) scale(.95);opacity:0;}
18%{transform:translateX(0) scale(1.03);opacity:1;}
80%{transform:translateX(0) scale(1);opacity:1;}
100%{transform:translateX(100%) scale(.96);opacity:0;}
}
.level-toast,.save-toast{
position:fixed;
left:50%;
transform:translateX(-50%);
z-index:45;
border:2px solid #fef3c7;
border-radius:999px;
padding:12px 18px;
font-weight:900;
box-shadow:0 12px 36px rgba(0,0,0,.4);
}
.level-toast{
top:18px;
background:linear-gradient(135deg,#7c2d12,#f59e0b);
animation:levelToast 1.2s ease forwards;
}
@keyframes levelToast{
0%{opacity:0;transform:translateX(-50%) translateY(-10px) scale(.9);}
25%{opacity:1;transform:translateX(-50%) translateY(0) scale(1.05);}
80%{opacity:1;}
100%{opacity:0;transform:translateX(-50%) translateY(-8px) scale(.98);}
}
.save-toast{
bottom:18px;
background:rgba(15,23,42,.96);
font-size:13px;
animation:toastFade 1.4s ease forwards;
}
@keyframes toastFade{
0%{opacity:0;transform:translateX(-50%) translateY(10px);}
20%{opacity:1;transform:translateX(-50%) translateY(0);}
80%{opacity:1;}
100%{opacity:0;transform:translateX(-50%) translateY(10px);}
}

.guide-modal{
position:fixed;
inset:0;
z-index:60;
background:rgba(0,0,0,.65);
display:flex;
align-items:center;
justify-content:center;
padding:18px;
}
.guide-card{
width:100%;
max-width:430px;
max-height:86vh;
overflow:auto;
background:rgba(11,16,32,.98);
border:2px solid #dfe8ff;
border-radius:18px;
box-shadow:0 24px 70px rgba(0,0,0,.55);
}
.guide-head{
position:sticky;
top:0;
display:flex;
align-items:center;
justify-content:space-between;
padding:14px;
background:#0b1020;
border-bottom:1px solid rgba(255,255,255,.18);
}
.guide-body{padding:14px;line-height:1.7;font-size:14px;}
.guide-body p{margin:.5em 0;}
.guide-note{color:#fde68a;font-weight:700;}

.ending-card{position:relative;overflow:hidden;}
.ending-card::before{
content:"";
position:absolute;
inset:-40%;
background:radial-gradient(circle,rgba(250,204,21,.18),transparent 55%);
animation:endingGlow 3s linear infinite;
pointer-events:none;
}
@keyframes endingGlow{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}
.ending-card>*{position:relative;z-index:1;}
.ending-card h1{
font-size:25px;
line-height:1.35;
margin:0 0 14px;
color:#fde68a;
}
.ending-card p{line-height:1.7;color:#f8fafc;}
.cheki-ticket{
margin:18px 0;
padding:18px 14px;
border:3px double #facc15;
border-radius:16px;
background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(255,245,214,.96));
color:#78350f;
box-shadow:0 0 24px rgba(250,204,21,.35);
animation:ticketPop .8s ease;
}
.cheki-ticket .ticket-label{
font-size:12px;
font-weight:900;
letter-spacing:.12em;
color:#be123c;
}
.cheki-ticket h2{font-size:34px;margin:8px 0;}
.cheki-ticket p{color:#78350f;font-weight:700;font-size:13px;}
.cheki-time{
margin-top:12px;
padding:10px;
border:2px dashed #b45309;
border-radius:12px;
background:rgba(255,255,255,.55);
}
.cheki-time span{
display:block;
font-size:12px;
font-weight:900;
color:#92400e;
letter-spacing:.08em;
}
.cheki-time strong{
display:block;
margin-top:4px;
font-size:20px;
color:#7c2d12;
}
@keyframes ticketPop{
0%{transform:scale(.8) rotate(-2deg);opacity:0;}
70%{transform:scale(1.05) rotate(1deg);opacity:1;}
100%{transform:scale(1) rotate(0);}
}

@media (max-height:720px){
.enemy-area{min-height:190px;}
.enemy-area img{max-width:185px;max-height:185px;}
.message-panel{min-height:64px;}
.command-panel button{padding:12px 6px;}
}
@media (max-width:420px){
.utility-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:340px){
.title-card h1{font-size:27px;}
.bottom-ui{grid-template-columns:1fr;}
.enemy-area{min-height:170px;}
.enemy-area img{max-width:165px;max-height:165px;}
}


/* ===== v18 名前入力・ダブルタップ拡大対策 ===== */
html, body {
  overscroll-behavior: none;
  touch-action: manipulation;
}

body, button, input {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

input {
  -webkit-user-select: text;
  user-select: text;
}

.name-label{
  display:block;
  margin:16px 0 8px;
  font-size:14px;
  font-weight:800;
  color:#fde68a;
}

.name-input{
  width:100%;
  margin-bottom:12px;
  padding:14px 12px;
  border:2px solid #93c5fd;
  border-radius:12px;
  background:#020617;
  color:#fff;
  font-size:16px;
  font-weight:700;
  text-align:center;
  outline:none;
}

.name-input::placeholder{
  color:#64748b;
}

.name-input:focus{
  border-color:#ff7ad6;
  box-shadow:0 0 0 3px rgba(255,122,214,.22);
}

/* ===== v21 会心・ドロップ調整 ===== */
.critical-text{color:#fde68a!important;text-shadow:0 0 8px rgba(250,204,21,.95),0 0 18px rgba(255,122,214,.7)!important;font-size:34px!important;}
.enemy-critical-text{color:#fca5a5!important;text-shadow:0 0 8px rgba(239,68,68,.95),0 0 18px rgba(127,29,29,.8)!important;}
body.critical-flash .battle-screen{animation:criticalFlash .45s ease;}
@keyframes criticalFlash{0%{filter:brightness(1);}30%{filter:brightness(1.7) saturate(1.8);}100%{filter:brightness(1);}}


/* ===== v22 オープニング画面 ===== */
.opening-btn{
  width:100%;
  margin-top:10px;
  padding:13px;
  border:none;
  border-radius:12px;
  background:#7c3aed;
  color:#fff;
  font-weight:900;
}

.opening-screen{
  position:fixed;
  inset:0;
  z-index:120;
  background:radial-gradient(circle at top,#111 0%,#000 55%,#000 100%);
  overflow:hidden;
  color:#ffe81f;
  letter-spacing:.08em;
  font-family:"Yu Gothic","Hiragino Sans",system-ui,sans-serif;
}

.opening-stars{
  position:fixed;
  inset:0;
  background-image:
    radial-gradient(#fff 1px, transparent 1px),
    radial-gradient(#fff 1px, transparent 1px);
  background-size:250px 250px,320px 320px;
  background-position:0 0,80px 120px;
  opacity:.18;
  pointer-events:none;
  animation:openingStarMove 45s linear infinite;
}

@keyframes openingStarMove{
  from{transform:translateY(0);}
  to{transform:translateY(300px);}
}

.opening-skip-btn{
  position:absolute;
  top:calc(12px + env(safe-area-inset-top,0px));
  right:12px;
  z-index:8;
  border:none;
  border-radius:999px;
  background:rgba(15,23,42,.86);
  color:#fff;
  font-weight:900;
  padding:10px 14px;
  font-size:12px;
}

.opening-intro{
  position:absolute;
  top:35%;
  width:100%;
  padding:0 18px;
  text-align:center;
  font-size:1.05rem;
  line-height:1.8;
  opacity:0;
  animation:openingIntroFade 4s ease-out 0s forwards;
  z-index:5;
}

@keyframes openingIntroFade{
  0%{opacity:0;}
  5%{opacity:1;}
  75%{opacity:1;}
  100%{opacity:0;}
}

.opening-story{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 9vw;
  text-align:center;
}

.opening-crawl-source{
  display:none;
}

.opening-title-block{
  text-align:center;
  margin-bottom:2.5rem;
}

.opening-title-block .episode{
  font-size:1rem;
  letter-spacing:.25em;
  text-transform:uppercase;
  margin-bottom:1rem;
}

.opening-title-block h1{
  font-size:2.05rem;
  margin:0;
}

#openingStoryActive{
  max-width:720px;
  font-size:1.18rem;
  line-height:1.75;
  text-shadow:0 0 8px rgba(0,0,0,.8);
  opacity:0;
  transition:opacity .6s ease;
}

#openingStoryActive strong{
  color:#fff6a6;
}

@media (max-width:380px){
  #openingStoryActive{
    font-size:1.02rem;
    line-height:1.7;
  }
  .opening-title-block h1{
    font-size:1.65rem;
  }
  .opening-intro{
    font-size:.95rem;
  }
}


/* ===== v23 複数敵・ターゲット選択 ===== */
.enemy-slots{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:flex-end;
  gap:18px;
  min-height:210px;
}

.enemy-slot{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  min-width:112px;
  padding:8px 4px 0;
  border:2px solid transparent;
  border-radius:14px;
  transition:transform .18s ease,border-color .18s ease,background .18s ease;
}

.enemy-slot.selected{
  border-color:#fde68a;
  background:rgba(250,204,21,.08);
  transform:translateY(-4px);
}

.enemy-slot.defeated{
  opacity:.25;
  filter:grayscale(1);
}

.enemy-target-marker{
  font-size:12px;
  font-weight:900;
  color:#fde68a;
  margin-bottom:4px;
  min-height:18px;
}

.enemy-slot img{
  max-width:118px;
  max-height:150px;
  object-fit:contain;
  filter:drop-shadow(0 18px 18px rgba(0,0,0,.45));
}

.enemy-slot-name{
  margin-top:6px;
  font-size:11px;
  font-weight:800;
  color:#e5e7eb;
  text-align:center;
  line-height:1.25;
}

.target-panel{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:8px;
}

.target-panel button{
  padding:10px 8px;
  border:none;
  border-radius:10px;
  background:#475569;
  color:#fff;
  font-size:12px;
  font-weight:800;
}

.target-panel button.selected-target{
  background:#7c3aed;
  color:#fff;
}

.enemy-area img.image-error{
  display:none;
}

@media (max-width:380px){
  .enemy-slots{gap:8px;}
  .enemy-slot{min-width:96px;}
  .enemy-slot img{max-width:96px;max-height:132px;}
}


/* ===== v24 敵視認性強化 ===== */
.enemy-slot{
  background: rgba(255,255,255,.03);
  min-width: 130px;
}

.enemy-slot.selected{
  border-color:#fde68a;
  background:rgba(250,204,21,.12);
  animation: targetBlink 1s infinite;
}

@keyframes targetBlink{
  0%{ box-shadow:0 0 0 rgba(250,204,21,0); opacity:1; }
  50%{ box-shadow:0 0 18px rgba(250,204,21,.75); opacity:.78; }
  100%{ box-shadow:0 0 0 rgba(250,204,21,0); opacity:1; }
}

.enemy-slot img{
  max-width:130px;
  max-height:165px;
}

.enemy-slot-hp{
  width:100%;
  height:10px;
  background:#1f2940;
  border-radius:999px;
  overflow:hidden;
  margin-top:8px;
}

.enemy-slot-hp-fill{
  height:100%;
  background:#7ce0a1;
  transition:width .25s ease;
}

.enemy-slot-index{
  font-size:11px;
  font-weight:900;
  color:#cbd5e1;
  margin-bottom:4px;
}


/* ===== v25 2体敵レイアウト調整 ===== */
.enemy-area{
  min-height:210px;
}

.enemy-slots{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  align-items:end;
  justify-items:center;
  gap:8px;
  width:100%;
  min-height:200px;
}

.enemy-slot{
  width:100%;
  max-width:132px;
  min-width:0;
  padding:6px 3px 0;
}

.enemy-slot img{
  max-width:92px;
  max-height:126px;
}

.enemy-slot-name{
  font-size:10px;
  min-height:26px;
}

.enemy-target-marker{
  font-size:10px;
  min-height:16px;
}

.enemy-slot-index{
  font-size:10px;
}

.enemy-slot-hp{
  height:8px;
  margin-top:6px;
}

/* 敵が1体だけのときは中央に大きめ表示 */
.enemy-slots.single-enemy{
  grid-template-columns:1fr;
}

.enemy-slots.single-enemy .enemy-slot{
  max-width:180px;
}

.enemy-slots.single-enemy .enemy-slot img{
  max-width:150px;
  max-height:180px;
}

/* 極小スマホでは2列のままさらに圧縮 */
@media (max-width:360px){
  .enemy-slots{
    gap:4px;
  }
  .enemy-slot img{
    max-width:78px;
    max-height:112px;
  }
  .enemy-slot-name{
    font-size:9px;
  }
}


/* ===== v26 Enemy Slots Fix ===== */
.enemy-area{
  min-height:210px;
}

.enemy-slots{
  width:100%;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:end;
  justify-items:center;
  gap:8px;
}

.enemy-slots.single-enemy{
  grid-template-columns:1fr;
}

.enemy-slot{
  width:100%;
  max-width:132px;
  min-width:0;
}

.enemy-slot img{
  max-width:92px;
  max-height:126px;
  width:auto;
  height:auto;
  object-fit:contain;
}

.enemy-slots.single-enemy .enemy-slot{
  max-width:180px;
}

.enemy-slots.single-enemy .enemy-slot img{
  max-width:150px;
  max-height:180px;
}


/* ===== v27 レアドロップ整理 ===== */
.treasure-rare{
  color:#fde68a;
}


/* ===== たまちゃんイベント ===== */
.enemy-slot.helper{
  border-color:#ffb7de;
  background:rgba(255,183,222,.12);
  box-shadow:0 0 18px rgba(255,183,222,.45);
}


/* ===== Loading Fix ===== */
.loading-screen{
  transition:opacity .35s ease;
}
/* ===== Root Cause Fixed ===== */
.enemy-slot.sleeping::after{
  content:"Zzz";
  position:absolute;
  top:4px;
  right:6px;
  color:#bfdbfe;
  font-size:13px;
  font-weight:900;
  text-shadow:0 0 8px rgba(147,197,253,.9);
}

/* ===== Tamachan GET Effect ===== */
.tamachan-get-overlay{
  position:fixed;
  inset:0;
  z-index:240;
  display:flex;
  align-items:center;
  justify-content:center;
  background:radial-gradient(circle at center, rgba(255,183,222,.34), rgba(15,23,42,.92) 68%);
}
.tamachan-get-card{
  width:min(92vw,420px);
  padding:28px 18px;
  border:3px solid #fde68a;
  border-radius:24px;
  background:linear-gradient(180deg, rgba(255,247,237,.98), rgba(255,228,240,.98));
  color:#7c2d12;
  text-align:center;
  box-shadow:0 0 24px rgba(255,215,0,.8),0 28px 80px rgba(0,0,0,.55);
  animation:tamachanGetPop 1.35s ease infinite;
}
.tamachan-get-kira{
  font-size:30px;
  color:#f59e0b;
  margin-bottom:8px;
  animation:tamachanKira 1s ease-in-out infinite;
}
.tamachan-get-title{
  font-size:32px;
  font-weight:1000;
  color:#db2777;
  text-shadow:0 0 8px rgba(255,255,255,.95),0 0 18px rgba(244,114,182,.85);
  letter-spacing:.04em;
}
.tamachan-get-sub{
  margin-top:10px;
  font-size:14px;
  font-weight:800;
  color:#92400e;
}
@keyframes tamachanGetPop{
  0%,100%{transform:scale(1) rotate(-1deg);}
  50%{transform:scale(1.055) rotate(1deg);}
}
@keyframes tamachanKira{
  0%,100%{opacity:.55; transform:scale(.96);}
  50%{opacity:1; transform:scale(1.14);}
}

/* ===== Two Floor Map ===== */
.floor-label{
  display:inline-block;
  margin-left:6px;
  padding:2px 8px;
  border-radius:999px;
  background:#7c3aed;
  color:#fff;
  font-size:13px;
  vertical-align:middle;
}

/* ===== Map Menu + Equipment Sort ===== */
.map-action-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  max-width:260px;
  margin:12px auto 0;
}

.equip-group{
  margin-bottom:10px;
  border:1px solid rgba(219,234,254,.35);
  border-radius:12px;
  overflow:hidden;
  background:rgba(255,255,255,.04);
}

.equip-group summary{
  cursor:pointer;
  padding:10px 12px;
  font-weight:900;
  color:#fde68a;
  background:rgba(15,23,42,.82);
  user-select:none;
}

.equip-group-body{
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
  padding:10px;
}

.equip-empty{
  font-size:12px;
  color:#94a3b8;
  padding:8px 2px;
}

.equip-equipped{
  outline:2px solid #fde68a;
  box-shadow:0 0 12px rgba(250,204,21,.35);
}


/* ===== Map Menu Button Fix ===== */
.sub-menu,
#equipMenu,
#treasureMenu{
  z-index:180;
}

.map-screen .map-action-grid button{
  position:relative;
  z-index:5;
}

/* ===== Floor BGM + Tamachan Wait ===== */
.tamachan-continue-btn{
  margin-top:18px;
  border:none;
  border-radius:999px;
  padding:12px 24px;
  background:#db2777;
  color:#fff;
  font-weight:1000;
  font-size:15px;
  box-shadow:0 0 18px rgba(219,39,119,.45);
}
.tamachan-continue-btn:active{
  transform:scale(.96);
}

/* ===== Game Over Force Restart ===== */
.game-over-overlay{
  position:fixed;
  inset:0;
  z-index:260;
  display:flex;
  align-items:center;
  justify-content:center;
  background:radial-gradient(circle at center, rgba(127,29,29,.55), rgba(2,6,23,.96) 70%);
}

.game-over-card{
  width:min(92vw,420px);
  padding:28px 18px;
  border:3px solid #fca5a5;
  border-radius:22px;
  background:rgba(15,23,42,.98);
  text-align:center;
  box-shadow:0 28px 80px rgba(0,0,0,.65);
}

.game-over-title{
  font-size:34px;
  font-weight:1000;
  color:#f87171;
  letter-spacing:.08em;
  text-shadow:0 0 18px rgba(248,113,113,.7);
}

.game-over-message{
  margin-top:12px;
  line-height:1.7;
  color:#fee2e2;
  font-weight:800;
}

.game-over-btn{
  margin-top:20px;
  border:none;
  border-radius:999px;
  padding:13px 26px;
  background:#dc2626;
  color:#fff;
  font-weight:1000;
  font-size:15px;
  box-shadow:0 0 18px rgba(220,38,38,.5);
}


/* ===== Battle UI Command Rework ===== */
.battle-screen .battle-utility-panel{
  display:none !important;
}

.battle-screen .command-panel{
  grid-template-columns:1fr 1fr;
}

#battleEquipBtn{
  grid-column:1 / -1;
  background:#334155;
}

.sub-menu:not(.hidden){
  position:fixed;
  left:12px;
  right:12px;
  bottom:calc(12px + env(safe-area-inset-bottom,0px));
  z-index:220;
  max-height:42vh;
  overflow:auto;
}

#equipMenu:not(.hidden){
  position:fixed;
  left:12px;
  right:12px;
  bottom:calc(12px + env(safe-area-inset-bottom,0px));
  z-index:221;
  max-height:52vh;
  overflow:auto;
}

/* ===== Speed + Talk Stats ===== */
.enemy-stats{
  margin-top:4px;
  font-size:12px;
  font-weight:800;
  color:#dbeafe;
  opacity:.95;
}

/* ===== Speed Turn + Status UI ===== */
.status-panel h2{
  line-height:1.35;
}
.status-panel p{
  line-height:1.35;
}

/* ===== Enemy Specials + Status UI ===== */
.status-effects{color:#fde68a;font-weight:800;}

/* ===== Floating Text ===== */
.potoro-floating-text{
  position:fixed;
  left:50%;
  top:22%;
  z-index:500;
  transform:translate(-50%,-50%);
  pointer-events:none;
  font-size:24px;
  font-weight:1000;
  color:#fff;
  text-shadow:
    0 0 8px rgba(255,255,255,.9),
    0 0 18px rgba(255,122,214,.9);
  animation:potoroFloatingText 1.2s ease forwards;
}

.potoro-floating-text.heal{
  color:#bbf7d0;
  text-shadow:0 0 10px rgba(34,197,94,.95),0 0 24px rgba(187,247,208,.8);
}

.potoro-floating-text.critical{
  color:#fde68a;
  text-shadow:0 0 10px rgba(250,204,21,.95),0 0 28px rgba(244,63,94,.85);
}

.potoro-floating-text.aura{
  color:#fbcfe8;
}

@keyframes potoroFloatingText{
  0%{opacity:0;transform:translate(-50%,-35%) scale(.8);}
  20%{opacity:1;transform:translate(-50%,-50%) scale(1.15);}
  80%{opacity:1;}
  100%{opacity:0;transform:translate(-50%,-90%) scale(.98);}
}

/* ===== Battle Burst ===== */
.potoro-battle-burst{
  position:fixed;
  left:50%;
  top:42%;
  z-index:510;
  transform:translate(-50%,-50%);
  pointer-events:none;
  font-size:34px;
  font-weight:1000;
  letter-spacing:.08em;
  color:#fff;
  text-shadow:
    0 0 10px rgba(255,255,255,.9),
    0 0 30px rgba(255,122,214,.9);
  animation:potoroBattleBurst .95s ease forwards;
}

.potoro-battle-burst.critical{
  color:#fde68a;
  text-shadow:
    0 0 10px rgba(250,204,21,.95),
    0 0 28px rgba(239,68,68,.9),
    0 0 42px rgba(255,122,214,.85);
}

.potoro-battle-burst.heal{
  color:#bbf7d0;
  text-shadow:
    0 0 10px rgba(34,197,94,.95),
    0 0 28px rgba(187,247,208,.85);
}

.potoro-battle-burst.level{
  color:#fef3c7;
  text-shadow:
    0 0 10px rgba(250,204,21,.95),
    0 0 30px rgba(255,122,214,.9);
}

@keyframes potoroBattleBurst{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.55) rotate(-5deg);}
  20%{opacity:1;transform:translate(-50%,-50%) scale(1.18) rotate(2deg);}
  70%{opacity:1;transform:translate(-50%,-50%) scale(1);}
  100%{opacity:0;transform:translate(-50%,-68%) scale(1.08);}
}

/* ===== Screen Glow ===== */
body.potoro-glow-magic .battle-screen{
  animation:potoroGlowMagic .65s ease;
}

body.potoro-glow-heal .battle-screen{
  animation:potoroGlowHeal .65s ease;
}

body.potoro-glow-boss .battle-screen{
  animation:potoroGlowBoss .65s ease;
}

body.potoro-glow-critical .battle-screen{
  animation:potoroGlowCritical .65s ease;
}

@keyframes potoroGlowMagic{
  0%{filter:brightness(1);}
  35%{filter:brightness(1.45) saturate(1.45) hue-rotate(18deg);}
  100%{filter:brightness(1);}
}

@keyframes potoroGlowHeal{
  0%{filter:brightness(1);}
  35%{filter:brightness(1.35) saturate(1.35) hue-rotate(70deg);}
  100%{filter:brightness(1);}
}

@keyframes potoroGlowBoss{
  0%{filter:brightness(1);}
  35%{filter:brightness(1.5) saturate(1.8) hue-rotate(-20deg);}
  100%{filter:brightness(1);}
}

@keyframes potoroGlowCritical{
  0%{filter:brightness(1);}
  25%{filter:brightness(1.8) saturate(2);}
  100%{filter:brightness(1);}
}

/* ===== Boss Warning ===== */
.potoro-boss-warning{
  position:fixed;
  inset:0;
  z-index:520;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  color:#fecaca;
  font-size:46px;
  font-weight:1000;
  letter-spacing:.18em;
  background:radial-gradient(circle,rgba(127,29,29,.34),rgba(0,0,0,.72));
  text-shadow:
    0 0 8px rgba(248,113,113,.95),
    0 0 28px rgba(220,38,38,.95);
  animation:potoroBossWarning 1.3s ease forwards;
}

@keyframes potoroBossWarning{
  0%{opacity:0;transform:scale(1.25);}
  20%{opacity:1;transform:scale(1);}
  45%{opacity:.35;}
  65%{opacity:1;}
  100%{opacity:0;transform:scale(.92);}
}

/* ===== Level Particles ===== */
.potoro-level-particle{
  position:fixed;
  z-index:515;
  pointer-events:none;
  color:#fde68a;
  font-size:22px;
  font-weight:1000;
  text-shadow:0 0 12px rgba(250,204,21,.95);
  animation:potoroLevelParticle 1s ease forwards;
}

@keyframes potoroLevelParticle{
  0%{opacity:0;transform:translateY(20px) scale(.5) rotate(0deg);}
  20%{opacity:1;}
  100%{opacity:0;transform:translateY(-65px) scale(1.25) rotate(160deg);}
}

/* ===== Hit Ring ===== */
.enemy-slot.potoro-hit-ring{
  animation:potoroHitRing .5s ease;
}

@keyframes potoroHitRing{
  0%{box-shadow:0 0 0 rgba(255,255,255,0);}
  35%{box-shadow:0 0 0 5px rgba(255,255,255,.28),0 0 24px rgba(255,122,214,.8);}
  100%{box-shadow:0 0 0 rgba(255,255,255,0);}
}

/* ===== Player Danger ===== */
.status-panel.potoro-player-danger{
  animation:potoroPlayerDanger .65s ease;
}

@keyframes potoroPlayerDanger{
  0%{box-shadow:0 18px 50px rgba(0,0,0,.36);}
  35%{box-shadow:0 0 0 4px rgba(248,113,113,.25),0 0 26px rgba(248,113,113,.7);}
  100%{box-shadow:0 18px 50px rgba(0,0,0,.36);}
}

/* ===== Status Alert ===== */
.status-effects.potoro-status-alert{
  animation:potoroStatusAlert 1s ease-in-out infinite;
}

@keyframes potoroStatusAlert{
  0%,100%{opacity:.72;text-shadow:none;}
  50%{opacity:1;text-shadow:0 0 12px rgba(250,204,21,.8);}
}

/* ===== Reduced Motion ===== */
@media (prefers-reduced-motion: reduce){
  .potoro-floating-text,
  .potoro-battle-burst,
  .potoro-boss-warning,
  .potoro-level-particle,
  .enemy-slot.potoro-hit-ring,
  .status-panel.potoro-player-danger,
  .status-effects.potoro-status-alert,
  body.potoro-glow-magic .battle-screen,
  body.potoro-glow-heal .battle-screen,
  body.potoro-glow-boss .battle-screen,
  body.potoro-glow-critical .battle-screen{
    animation:none!important;
  }
}

.map-status-panel{
  margin:12px 0;
  padding:12px;
  border:2px solid rgba(254,243,199,.8);
  border-radius:14px;
  background:linear-gradient(180deg,rgba(15,23,42,.92),rgba(30,41,59,.92));
  box-shadow:0 12px 30px rgba(0,0,0,.28);
  font-size:12px;
  line-height:1.45;
}

.map-status-title{
  margin-bottom:8px;
  color:#fde68a;
  font-size:15px;
  font-weight:1000;
  text-align:center;
  letter-spacing:.04em;
}

.map-status-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
  margin-bottom:8px;
}

.map-status-grid div{
  padding:6px 8px;
  border-radius:9px;
  background:rgba(255,255,255,.06);
  color:#dbeafe;
  font-weight:800;
}

.map-status-grid strong{
  color:#fff;
  font-weight:1000;
}

.map-status-line{
  margin-top:5px;
  padding:5px 8px;
  border-radius:8px;
  background:rgba(255,255,255,.04);
  color:#e5e7eb;
  font-weight:700;
}

@media (max-width:360px){
  .map-status-grid{
    grid-template-columns:1fr;
  }
}

.potoro-boss-name-cutin{
  position:fixed;
  left:50%;
  top:50%;
  z-index:530;
  transform:translate(-50%,-50%);
  pointer-events:none;
  padding:18px 26px;
  border:3px solid #fecaca;
  border-radius:18px;
  background:linear-gradient(135deg,rgba(127,29,29,.96),rgba(15,23,42,.96));
  color:#fff;
  font-size:28px;
  font-weight:1000;
  letter-spacing:.08em;
  text-shadow:0 0 10px rgba(248,113,113,.95),0 0 28px rgba(220,38,38,.95);
  box-shadow:0 0 0 4px rgba(248,113,113,.18),0 24px 80px rgba(0,0,0,.7);
  animation:potoroBossNameCutin 1.5s ease forwards;
}

@keyframes potoroBossNameCutin{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.78) rotate(-2deg);}
  18%{opacity:1;transform:translate(-50%,-50%) scale(1.08) rotate(1deg);}
  72%{opacity:1;transform:translate(-50%,-50%) scale(1);}
  100%{opacity:0;transform:translate(-50%,-62%) scale(.96);}
}

.potoro-boss-phase-cutin{
  position:fixed;
  left:50%;
  top:24%;
  z-index:525;
  transform:translate(-50%,-50%);
  pointer-events:none;
  width:min(90vw,420px);
  padding:14px 18px;
  border:2px solid #fde68a;
  border-radius:999px;
  background:rgba(15,23,42,.94);
  color:#fde68a;
  text-align:center;
  font-size:16px;
  font-weight:1000;
  text-shadow:0 0 14px rgba(250,204,21,.8);
  box-shadow:0 0 24px rgba(250,204,21,.28);
  animation:potoroBossPhaseCutin 1.5s ease forwards;
}

@keyframes potoroBossPhaseCutin{
  0%{opacity:0;transform:translate(-50%,-40%) scale(.85);}
  18%{opacity:1;transform:translate(-50%,-50%) scale(1.05);}
  78%{opacity:1;}
  100%{opacity:0;transform:translate(-50%,-68%) scale(.98);}
}

body.potoro-boss-lowhp .battle-screen{
  box-shadow:inset 0 0 80px rgba(220,38,38,.36);
  animation:potoroBossLowHpPulse 1.25s ease-in-out infinite;
}

@keyframes potoroBossLowHpPulse{
  0%,100%{filter:brightness(1) saturate(1);}
  50%{filter:brightness(1.16) saturate(1.45);}
}

body.potoro-boss-lowhp .enemy-slot.selected{
  animation:targetBlink 1s infinite, potoroBossEnemyPulse 1.1s ease-in-out infinite;
}

@keyframes potoroBossEnemyPulse{
  0%,100%{transform:translateY(-4px) scale(1);}
  50%{transform:translateY(-7px) scale(1.035);}
}

/* ===== Boss Light Burst ===== */
.potoro-boss-light-burst{
  position:fixed;
  inset:0;
  z-index:522;
  pointer-events:none;
  background:
    radial-gradient(circle at center,rgba(255,255,255,.72),rgba(248,113,113,.28) 24%,transparent 58%),
    radial-gradient(circle at center,rgba(250,204,21,.32),transparent 42%);
  animation:potoroBossLightBurst 1.1s ease forwards;
}

@keyframes potoroBossLightBurst{
  0%{opacity:0;transform:scale(.8);filter:blur(2px);}
  22%{opacity:1;transform:scale(1.08);filter:blur(0);}
  100%{opacity:0;transform:scale(1.35);filter:blur(5px);}
}

/* ===== Boss Name Cutin ===== */
.potoro-boss-name-cutin{
  position:fixed;
  left:50%;
  top:50%;
  z-index:530;
  transform:translate(-50%,-50%);
  pointer-events:none;
  padding:18px 26px;
  border:3px solid #fecaca;
  border-radius:18px;
  background:linear-gradient(135deg,rgba(127,29,29,.96),rgba(15,23,42,.96));
  color:#fff;
  font-size:28px;
  font-weight:1000;
  letter-spacing:.08em;
  text-shadow:0 0 10px rgba(248,113,113,.95),0 0 28px rgba(220,38,38,.95);
  box-shadow:0 0 0 4px rgba(248,113,113,.18),0 24px 80px rgba(0,0,0,.7);
  animation:potoroBossNameCutin 1.5s ease forwards;
}

@keyframes potoroBossNameCutin{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.78) rotate(-2deg);}
  18%{opacity:1;transform:translate(-50%,-50%) scale(1.08) rotate(1deg);}
  72%{opacity:1;transform:translate(-50%,-50%) scale(1);}
  100%{opacity:0;transform:translate(-50%,-62%) scale(.96);}
}

/* ===== Boss Phase Cutin ===== */
.potoro-boss-phase-cutin{
  position:fixed;
  left:50%;
  top:24%;
  z-index:525;
  transform:translate(-50%,-50%);
  pointer-events:none;
  width:min(90vw,420px);
  padding:14px 18px;
  border:2px solid #fde68a;
  border-radius:999px;
  background:rgba(15,23,42,.94);
  color:#fde68a;
  text-align:center;
  font-size:16px;
  font-weight:1000;
  text-shadow:0 0 14px rgba(250,204,21,.8);
  box-shadow:0 0 24px rgba(250,204,21,.28);
  animation:potoroBossPhaseCutin 1.5s ease forwards;
}

@keyframes potoroBossPhaseCutin{
  0%{opacity:0;transform:translate(-50%,-40%) scale(.85);}
  18%{opacity:1;transform:translate(-50%,-50%) scale(1.05);}
  78%{opacity:1;}
  100%{opacity:0;transform:translate(-50%,-68%) scale(.98);}
}

/* ===== Danger Glow ===== */
body.potoro-glow-danger .battle-screen{
  animation:potoroGlowDanger .72s ease;
}

@keyframes potoroGlowDanger{
  0%{filter:brightness(1);}
  22%{filter:brightness(1.65) saturate(2.1) hue-rotate(-18deg);}
  100%{filter:brightness(1);}
}

/* ===== Boss Low HP Aura ===== */
body.potoro-boss-danger .battle-screen{
  box-shadow:inset 0 0 56px rgba(248,113,113,.22);
}

body.potoro-boss-lowhp .battle-screen{
  box-shadow:inset 0 0 88px rgba(220,38,38,.38);
  animation:potoroBossLowHpPulse 1.25s ease-in-out infinite;
}

body.potoro-boss-criticalhp .battle-screen{
  box-shadow:inset 0 0 110px rgba(220,38,38,.55), inset 0 0 42px rgba(250,204,21,.24);
  animation:potoroBossCriticalHpPulse .82s ease-in-out infinite;
}

@keyframes potoroBossLowHpPulse{
  0%,100%{filter:brightness(1) saturate(1);}
  50%{filter:brightness(1.16) saturate(1.45);}
}

@keyframes potoroBossCriticalHpPulse{
  0%,100%{filter:brightness(1.05) saturate(1.25);}
  50%{filter:brightness(1.28) saturate(1.8);}
}

/* ===== Boss enemy slot pulse ===== */
body.potoro-boss-lowhp .enemy-slot.selected{
  animation:targetBlink 1s infinite, potoroBossEnemyPulse 1.1s ease-in-out infinite;
}

body.potoro-boss-criticalhp .enemy-slot.selected{
  animation:targetBlink .65s infinite, potoroBossEnemyPulse .75s ease-in-out infinite;
}

@keyframes potoroBossEnemyPulse{
  0%,100%{transform:translateY(-4px) scale(1);}
  50%{transform:translateY(-7px) scale(1.035);}
}

/* ===== Boss Warning stronger ===== */
.potoro-boss-warning{
  animation:potoroBossWarning 1.3s ease forwards, potoroBossWarningFlash .22s linear 4;
}

@keyframes potoroBossWarningFlash{
  0%,100%{filter:brightness(1);}
  50%{filter:brightness(1.8);}
}

.treasure-rarity-effect{position:fixed;inset:0;z-index:540;display:flex;align-items:center;justify-content:center;pointer-events:none;background:radial-gradient(circle,rgba(255,255,255,.12),rgba(0,0,0,.36));animation:treasureEffectFade 1.4s ease forwards;}
.treasure-rarity-effect.rarity-s{background:radial-gradient(circle,rgba(250,204,21,.32),rgba(255,255,255,.08) 36%,rgba(0,0,0,.52)),linear-gradient(135deg,rgba(126,34,206,.28),rgba(219,39,119,.24));animation:treasureEffectFade 1.9s ease forwards;}
.treasure-rarity-card{width:min(88vw,420px);padding:24px 18px;border:3px solid rgba(255,255,255,.8);border-radius:24px;text-align:center;background:rgba(15,23,42,.94);box-shadow:0 24px 80px rgba(0,0,0,.6);animation:treasureCardPop 1.25s ease forwards;}
.treasure-rarity-label{font-size:18px;font-weight:1000;letter-spacing:.18em;margin-bottom:10px;}
.treasure-rarity-name{font-size:24px;font-weight:1000;line-height:1.35;}
.rarity-c .treasure-rarity-card{border-color:#cbd5e1;box-shadow:0 0 24px rgba(203,213,225,.35),0 24px 80px rgba(0,0,0,.6);}
.rarity-c .treasure-rarity-label,.rarity-c .treasure-rarity-name{color:#e2e8f0;}
.rarity-b .treasure-rarity-card{border-color:#93c5fd;box-shadow:0 0 26px rgba(147,197,253,.48),0 24px 80px rgba(0,0,0,.6);}
.rarity-b .treasure-rarity-label,.rarity-b .treasure-rarity-name{color:#bfdbfe;}
.rarity-a .treasure-rarity-card{border-color:#f9a8d4;box-shadow:0 0 30px rgba(244,114,182,.58),0 24px 80px rgba(0,0,0,.6);}
.rarity-a .treasure-rarity-label,.rarity-a .treasure-rarity-name{color:#fbcfe8;}
.rarity-s .treasure-rarity-card{border-color:#fde68a;background:linear-gradient(135deg,rgba(120,53,15,.96),rgba(88,28,135,.96)),rgba(15,23,42,.94);box-shadow:0 0 0 5px rgba(250,204,21,.16),0 0 40px rgba(250,204,21,.85),0 0 80px rgba(219,39,119,.45),0 24px 90px rgba(0,0,0,.72);animation:treasureCardPop 1.55s ease forwards, treasureSGlow .55s ease-in-out infinite;}
.rarity-s .treasure-rarity-label{color:#fde68a;text-shadow:0 0 12px rgba(250,204,21,.95);}
.rarity-s .treasure-rarity-name{color:#fff7ed;text-shadow:0 0 16px rgba(250,204,21,.8),0 0 28px rgba(244,114,182,.6);}
@keyframes treasureEffectFade{0%{opacity:0;}18%{opacity:1;}78%{opacity:1;}100%{opacity:0;}}
@keyframes treasureCardPop{0%{opacity:0;transform:scale(.72) rotate(-3deg);}22%{opacity:1;transform:scale(1.08) rotate(1deg);}70%{opacity:1;transform:scale(1);}100%{opacity:0;transform:scale(.98) translateY(-18px);}}
@keyframes treasureSGlow{0%,100%{filter:brightness(1);}50%{filter:brightness(1.28);}}

.magic-learn-effect{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:600;
  pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.18),rgba(0,0,0,.20));
  animation:magicLearnScreenFade 1.6s ease forwards;
}

.magic-learn-card{
  padding:20px 26px;
  border-radius:20px;
  background:linear-gradient(135deg,#fdf2f8,#fff7ed);
  border:3px solid #f9a8d4;
  text-align:center;
  box-shadow:
    0 0 0 5px rgba(244,114,182,.16),
    0 20px 60px rgba(0,0,0,.35),
    0 0 34px rgba(244,114,182,.45);
  animation:magicLearnPop 1.6s ease forwards;
}

.magic-learn-title{
  font-size:14px;
  font-weight:1000;
  color:#db2777;
  letter-spacing:0.12em;
}

.magic-learn-name{
  font-size:22px;
  font-weight:1000;
  margin-top:8px;
  color:#7c3aed;
  text-shadow:0 0 10px rgba(168,85,247,.35);
}

@keyframes magicLearnScreenFade{
  0%{opacity:0;}
  16%{opacity:1;}
  78%{opacity:1;}
  100%{opacity:0;}
}

@keyframes magicLearnPop{
  0%{opacity:0;transform:scale(0.7) rotate(-2deg);}
  20%{opacity:1;transform:scale(1.1) rotate(1deg);}
  70%{opacity:1;transform:scale(1);}
  100%{opacity:0;transform:scale(0.95) translateY(-18px);}
}

.help-modal{
  position:fixed;
  inset:0;
  z-index:999;
}

.help-modal.hidden{
  display:none;
}

.help-overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.55);
}

.help-box{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:92%;
  max-width:460px;
  max-height:84vh;
  background:#fff7fb;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 20px 70px rgba(0,0,0,0.45);
  border:2px solid rgba(244,114,182,0.55);
}

.help-header{
  background:linear-gradient(135deg,#f472b6,#c084fc);
  color:#fff;
  padding:12px 42px 12px 12px;
  font-weight:900;
  text-align:center;
  position:relative;
  letter-spacing:.03em;
}

.help-close{
  position:absolute;
  right:10px;
  top:6px;
  border:none;
  background:rgba(255,255,255,.18);
  border-radius:999px;
  width:30px;
  height:30px;
  font-size:20px;
  color:white;
  cursor:pointer;
}

.help-content{
  padding:12px;
  overflow-y:auto;
  max-height:72vh;
}

.help-section{
  margin-bottom:12px;
  background:white;
  padding:11px;
  border-radius:12px;
  box-shadow:0 4px 12px rgba(0,0,0,0.09);
}

.help-section h2{
  font-size:15px;
  color:#db2777;
  margin:0 0 8px;
}

.help-section p{
  font-size:13px;
  line-height:1.65;
  margin:0;
}

.help-note{
  margin-top:8px !important;
  color:#7c3aed;
  font-weight:700;
}

.help-table{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.help-table div{
  display:grid;
  grid-template-columns:42% 58%;
  gap:6px;
  align-items:start;
  padding:7px 8px;
  border-radius:9px;
  background:#fff1f7;
  border:1px solid rgba(244,114,182,.22);
  font-size:12.5px;
  line-height:1.45;
}

.help-table b{
  color:#831843;
}

.help-table span{
  color:#374151;
}

.help-table em{
  display:inline-block;
  margin-left:3px;
  padding:1px 5px;
  border-radius:999px;
  background:#fde68a;
  color:#78350f;
  font-style:normal;
  font-size:10px;
  font-weight:900;
}

.equip-group-body button{
  text-align:left;
  line-height:1.35;
}

.equip-button-main{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
  font-weight:900;
}

.equip-button-name{
  flex:1;
}

.equip-rarity{
  display:inline-block;
  padding:1px 7px;
  border-radius:999px;
  font-size:10px;
  font-weight:1000;
  background:#e5e7eb;
  color:#374151;
}

.equip-rarity.rarity-c{
  background:#e5e7eb;
  color:#374151;
}

.equip-rarity.rarity-b{
  background:#dbeafe;
  color:#1d4ed8;
}

.equip-rarity.rarity-a{
  background:#fce7f3;
  color:#be185d;
}

.equip-rarity.rarity-s{
  background:#fde68a;
  color:#92400e;
  box-shadow:0 0 10px rgba(250,204,21,.55);
}

.equip-rarity.rarity-event{
  background:#ddd6fe;
  color:#6d28d9;
}

.equip-button-compare{
  margin-top:4px;
  display:flex;
  flex-wrap:wrap;
  gap:4px;
}

.equip-compare{
  display:inline-block;
  padding:1px 6px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
}

.equip-compare.up{
  background:#dcfce7;
  color:#166534;
}

.equip-compare.down{
  background:#fee2e2;
  color:#991b1b;
}

.equip-compare.same{
  background:#f3f4f6;
  color:#4b5563;
}

.equip-button-effect{
  margin-top:4px;
  font-size:11px;
  color:#6b21a8;
  opacity:.95;
}

.equip-equipped .equip-button-main::before{
  content:'装備中';
  display:inline-block;
  margin-right:4px;
  padding:1px 6px;
  border-radius:999px;
  font-size:10px;
  background:#f472b6;
  color:white;
}