@font-face{font-family:'Senobi Gothic'; font-weight:400; font-style:normal; font-display:swap; src:url(../fonts/SenobiGothic-400.woff2) format('woff2');}
@font-face{font-family:'Senobi Gothic'; font-weight:700; font-style:normal; font-display:swap; src:url(../fonts/SenobiGothic-700.woff2) format('woff2');}
@font-face{font-family:'Senobi Gothic'; font-weight:800; font-style:normal; font-display:swap; src:url(../fonts/SenobiGothic-800.woff2) format('woff2');}
@font-face{font-family:'Senobi Gothic'; font-weight:900; font-style:normal; font-display:swap; src:url(../fonts/SenobiGothic-900.woff2) format('woff2');}

:root{
  --bg:#120f1a;
  --bg2:#1c1728;
  --panel:#241e35;
  --panel2:#2c2440;
  --gold:#c9a227;
  --gold-bright:#f0cf5e;
  --blood:#8a2136;
  --blood-bright:#e0435f;
  --parchment:#ece3cb;
  --text-dim:#a99bc4;
  --line:#3a3152;
  --good:#5fbf8f;
  --glow-purple:#6a4fae;
  --shadow-deep:rgba(0,0,0,.55);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  position:relative;
  background:
    radial-gradient(ellipse at 20% -10%, #2a2245 0%, transparent 55%),
    radial-gradient(ellipse at 90% 110%, #331c26 0%, transparent 50%),
    var(--bg);
  color:var(--parchment);
  font-family:'Senobi Gothic', sans-serif;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:'';
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity:.045;
  mix-blend-mode:overlay;
}
body::after{
  content:'';
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(ellipse at 50% 45%, transparent 45%, rgba(4,3,8,.55) 100%);
}
#app{
  max-width:920px;
  margin:0 auto;
  padding:18px 14px 60px;
  min-height:100vh;
  position:relative;
  z-index:1;
  opacity:1;
  transition:opacity .6s ease;
}
#app.fading{ opacity:0; }
#curseToast{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:60;
  background:linear-gradient(160deg,#2c2440,#1c1730); border:1px solid var(--glow-purple); border-radius:10px;
  padding:10px 18px; font-size:13px; color:var(--parchment); box-shadow:0 10px 30px rgba(0,0,0,.5);
  animation:fadeIn .25s ease;
}
#achievementToast{
  position:fixed; left:50%; top:24px; transform:translateX(-50%); z-index:60;
  background:linear-gradient(160deg,#3a2f10,#2a2008); border:1px solid var(--gold); border-radius:10px;
  padding:10px 18px; font-size:13px; color:var(--gold-bright); font-weight:700;
  box-shadow:0 10px 30px rgba(0,0,0,.5); animation:fadeIn .25s ease;
}
#infoToast{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:60;
  background:linear-gradient(160deg,#3a2f10,#2a2008); border:1px solid var(--gold); border-radius:10px;
  padding:10px 18px; font-size:13px; color:var(--gold-bright); font-weight:700;
  box-shadow:0 10px 30px rgba(0,0,0,.5); animation:fadeIn .25s ease;
  max-width:calc(100vw - 24px);
}
.depth-toast{ display:flex; flex-direction:column; gap:10px; min-width:260px; text-align:left; }
.depth-toast-row{ display:flex; gap:22px; }
.depth-toast-col{ display:flex; flex-direction:column; gap:3px; }
.depth-toast-label{ font-size:10px; color:var(--text-dim); font-weight:400; letter-spacing:.05em; }
.depth-toast-number{ font-size:30px; font-weight:900; line-height:1; text-shadow:0 0 10px currentColor; }
.depth-toast-buffs{ flex:1; min-width:0; }
.depth-toast-bufflist{ display:flex; flex-wrap:wrap; gap:4px; margin-top:2px; }
.depth-toast-buff{ background:#1a1526; border:1px solid var(--gold); border-radius:10px; padding:2px 8px; font-size:10.5px; font-weight:700; color:var(--parchment); white-space:nowrap; }
.depth-toast-buff-none{ color:var(--text-dim); border-color:var(--line); font-weight:400; }
.depth-meter-block{ display:flex; flex-direction:column; gap:6px; }
.depth-toast-tier{ font-size:13px; font-weight:900; white-space:nowrap; }
.depth-meter-labels{ display:flex; justify-content:space-between; font-size:10.5px; color:var(--text-dim); font-weight:700; }
.depth-meter-track{ display:flex; }
.depth-meter-segment{ flex:1; height:14px; background:#000; overflow:hidden; border:1px solid var(--line); margin-left:-1px; }
.depth-meter-segment:first-child{ margin-left:0; border-top-left-radius:3px; border-bottom-left-radius:3px; }
.depth-meter-segment:last-child{ border-top-right-radius:3px; border-bottom-right-radius:3px; }
.depth-meter-fill{ height:100%; transition:width .3s ease; }
#bgPhoto{
  position:fixed; inset:0; z-index:-1;
  background-size:cover; background-position:center; background-repeat:no-repeat;
  background-color:var(--bg);
}
#bgPhoto.bg-a{ background-image:url(../assets/images/pix_a.webp); }
#bgPhoto.bg-b{ background-image:url(../assets/images/pix_b.webp); }
#bgPhoto.bg-c{ background-image:url(../assets/images/pix_c.webp); }
#bgPhoto.bg-d{ background-image:url(../assets/images/pix_d.webp); }
#bgPhoto.bg-e{ background-image:url(../assets/images/pix_e.webp); }
#bgPhoto.bg-f{ background-image:url(../assets/images/pix_f.webp); }
h1,h2,h3{font-family:'Senobi Gothic', serif; margin:0 0 8px;}
button{
  font-family:'Senobi Gothic', sans-serif;
  cursor:pointer;
  border:none;
  border-radius:8px;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
button:focus-visible{outline:2px solid var(--gold-bright); outline-offset:2px;}
button:disabled{opacity:.4; cursor:not-allowed;}
.btn{
  position:relative;
  background:var(--panel2);
  color:var(--parchment);
  border:1px solid var(--line);
  padding:10px 18px;
  font-size:14px;
  font-weight:700;
  overflow:hidden;
  box-shadow:0 2px 6px rgba(0,0,0,.35);
}
.btn::after{
  content:'';
  position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent);
  transform:skewX(-20deg);
  transition:left .5s ease;
  pointer-events:none;
}
.btn:hover:not(:disabled)::after{left:130%;}
.btn:hover:not(:disabled){transform:translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,.45);}
.btn:active:not(:disabled){transform:translateY(0px) scale(.97);}
.btn.primary{background:linear-gradient(160deg, var(--gold-bright), var(--gold)); color:#241a05; box-shadow:0 2px 10px rgba(240,207,94,.25);}
.btn.primary:hover:not(:disabled){box-shadow:0 6px 20px rgba(240,207,94,.4);}
.btn.danger{background:linear-gradient(160deg, var(--blood-bright), var(--blood)); color:#fff0f2; box-shadow:0 2px 10px rgba(224,67,95,.25);}
.btn.ghost{background:linear-gradient(160deg,var(--panel),var(--bg2)); border:1px solid var(--line); color:var(--text-dim); box-shadow:0 2px 6px rgba(0,0,0,.35);}

/* ---------- Title ---------- */
.title-screen{text-align:center; padding:50px 10px 20px;}
.title-screen .emblem{
  font-size:56px; margin-bottom:6px;
  filter:drop-shadow(0 0 18px rgba(240,207,94,.35));
  animation:emblemFloat 5s ease-in-out infinite;
  display:inline-block;
}
@keyframes emblemFloat{0%,100%{transform:translateY(0) rotate(-2deg);} 50%{transform:translateY(-8px) rotate(2deg);}}
.title-screen h1{
  font-size:38px; letter-spacing:.06em; margin-bottom:4px;
  background:linear-gradient(180deg,var(--gold-bright),var(--gold));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 26px rgba(240,207,94,.25);
}
.title-screen .divider{
  width:220px; height:1px; margin:0 auto 14px;
  background:linear-gradient(90deg, transparent, var(--gold) 50%, transparent);
  position:relative;
}
.title-screen .divider::before{
  content:'◆'; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  font-size:9px; color:var(--gold-bright); background:var(--bg); padding:0 8px;
}
.title-screen .sub{color:var(--text-dim); margin-bottom:30px; font-size:14px; letter-spacing:.15em;}
.title-screen .ad-slot{max-width:728px; max-height:100px; margin:36px auto 0; overflow:hidden;}
.rules-box{
  text-align:left; max-width:560px; margin:0 auto 30px; background:linear-gradient(160deg,var(--panel),var(--bg2));
  border:1px solid var(--line); border-radius:12px; padding:18px 22px; font-size:13.5px; line-height:1.85; color:var(--text-dim);
  box-shadow:0 10px 30px rgba(0,0,0,.4), inset 0 0 0 1px rgba(240,207,94,.05);
  position:relative;
}
.rules-box::before, .rules-box::after{
  content:'✦'; position:absolute; top:8px; color:var(--gold); opacity:.5; font-size:11px;
}
.rules-box::before{left:12px;}
.rules-box::after{right:12px;}
.rules-box b{color:var(--parchment);}
.rules-box .r-title{color:var(--gold-bright); font-weight:700; margin-top:10px; display:block;}

/* ---------- Header bar ---------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:linear-gradient(160deg,var(--panel),var(--bg2)); border:1px solid var(--line); border-radius:12px;
  padding:10px 16px; margin-bottom:16px; flex-wrap:wrap;
  box-shadow:0 6px 20px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.03);
  position:sticky; top:8px; z-index:20;
}
.topbar .stat{display:flex; align-items:center; gap:6px; font-weight:700; font-size:14px; white-space:nowrap;}
/* groups the topbar's children in markup only -- display:contents removes these wrappers
   from layout entirely, so on desktop the flex-wrap behaves exactly as one flat row of
   children (unchanged); the mobile media query below turns them into two real rows. */
.topbar-info, .topbar-actions, .topbar-streak{display:contents;}
.streak-badge{ transition:box-shadow .3s ease; }
@keyframes streakTierUp{
  0%{ transform:scale(1); box-shadow:0 0 0 rgba(240,207,94,0); }
  30%{ transform:scale(1.12); box-shadow:0 0 22px 6px rgba(240,207,94,.85); }
  100%{ transform:scale(1); box-shadow:0 0 0 rgba(240,207,94,0); }
}
.streak-tierup{ animation:streakTierUp 1.4s ease; }
@keyframes streakHighGlow{
  0%,100%{ box-shadow:0 0 6px 1px rgba(240,207,94,.5); }
  50%{ box-shadow:0 0 18px 5px rgba(240,207,94,.95); }
}
.streak-high{ animation:streakHighGlow 1.5s ease-in-out infinite; }
@keyframes depthTierUp{
  0%{ transform:scale(1); box-shadow:0 0 0 rgba(0,0,0,0); }
  30%{ transform:scale(1.12); box-shadow:0 0 22px 6px var(--depth-glow-color, rgba(240,207,94,.85)); }
  100%{ transform:scale(1); box-shadow:0 0 0 rgba(0,0,0,0); }
}
.depth-tierup{ animation:depthTierUp 1.4s ease; }
.hp-bar-wrap{flex:1; min-width:120px; max-width:260px; background:#000; border-radius:6px; height:14px; overflow:hidden; border:1px solid var(--line); position:relative;}
.persistent-buffs{display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; justify-content:center;}
.buff-badge{background:#1a1526; border:1px solid var(--line); border-radius:12px; padding:2px 8px; font-size:11px; font-weight:700; color:var(--parchment);}
.hp-bar{height:100%; background:linear-gradient(90deg,var(--blood),var(--blood-bright)); transition:width .3s ease; position:relative;}
.hp-bar.flash::after{
  content:''; position:absolute; inset:0; background:#fff; animation:hpFlash .35s ease;
}
@keyframes hpFlash{from{opacity:.85;} to{opacity:0;}}
.chapter-tag{background:var(--panel2); border:1px solid var(--gold); color:var(--gold-bright); font-size:12px; font-weight:800; padding:3px 10px; border-radius:20px; box-shadow:0 0 10px rgba(240,207,94,.15);}

/* ---------- Map (branching) ---------- */
.map-scroll{margin:16px 0 30px; position:relative;}
.map-lines{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0; overflow:visible;}
.layer-row{display:flex; align-items:center; gap:14px; justify-content:center; margin-bottom:6px; position:relative; z-index:1;}
.layer-idx{width:26px; font-size:10px; color:var(--text-dim); text-align:right; flex-shrink:0;}
.lanes{display:flex; gap:26px; justify-content:center; flex:1;}
.node-wrap{display:flex; flex-direction:column; align-items:center; width:60px;}
.node-wrap.empty{visibility:hidden;}
.node{
  width:50px; height:50px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:21px; background:radial-gradient(circle at 35% 30%, var(--panel2), #1a1526 85%); border:2px solid var(--line); position:relative;
  box-shadow:0 3px 10px rgba(0,0,0,.4);
  transition:transform .15s ease;
}
.node.taken{background:radial-gradient(circle at 35% 30%,#2c4a2a,#182816 85%); border-color:var(--good); opacity:.75;}
.node.taken::after{content:'✓'; position:absolute; bottom:-6px; right:-4px; background:var(--good); color:#0d1f10; font-size:10px; font-weight:900; border-radius:50%; width:16px; height:16px; display:flex; align-items:center; justify-content:center; box-shadow:0 0 6px rgba(95,191,143,.6);}
.node.skipped{opacity:.2; filter:grayscale(1);}
.node.reachable{border-color:var(--gold-bright); box-shadow:0 0 0 5px rgba(240,207,94,.15), 0 0 16px rgba(240,207,94,.4); cursor:pointer; animation:pulse 1.8s infinite ease-in-out;}
.node.reachable:hover{transform:scale(1.08);}
.node.futurelocked{opacity:.3; filter:grayscale(.85);}
@keyframes pulse{0%,100%{box-shadow:0 0 0 4px rgba(240,207,94,.12),0 0 12px rgba(240,207,94,.28);} 50%{box-shadow:0 0 0 8px rgba(240,207,94,.2),0 0 20px rgba(240,207,94,.5);}}
.node-label{font-size:9.5px; color:var(--text-dim); text-align:center; margin-top:3px; line-height:1.3;}
.chapter-divider{text-align:center; margin:26px 0 14px; color:var(--gold-bright); font-size:20px; letter-spacing:.08em; text-shadow:0 0 16px rgba(240,207,94,.3);}
.chapter-sub{text-align:center; color:var(--text-dim); font-size:11.5px; margin-bottom:14px;}

/* ---------- Combat ---------- */
.enemy-area{display:flex; justify-content:center; gap:36px; flex-wrap:wrap; margin:10px 0 18px;}
.enemy-card{
  background:linear-gradient(160deg,var(--panel),var(--bg2)); border:1px solid var(--line); border-radius:14px; padding:16px 22px; text-align:center; min-width:180px;
  position:relative; box-shadow:0 8px 24px rgba(0,0,0,.4); overflow:visible;
}
.enemy-card .portrait{font-size:52px; margin-bottom:4px; filter:drop-shadow(0 4px 8px rgba(0,0,0,.5));}
.enemy-name{font-weight:700; font-size:15px; margin-bottom:6px;}
.enemy-hp-text{font-size:12px; color:var(--text-dim); margin-bottom:4px;}
.intent{
  position:absolute; top:-14px; right:-10px; background:var(--blood); border:2px solid var(--blood-bright);
  border-radius:20px; padding:4px 10px; font-size:13px; font-weight:900; display:flex; align-items:center; gap:3px;
  box-shadow:0 0 10px rgba(224,67,95,.4);
}
.intent.unknown{background:#3a2c53; border-color:var(--glow-purple); box-shadow:0 0 10px rgba(106,79,174,.4);}
.intent.threat{animation:intentThreat 1s infinite ease-in-out;}
@keyframes intentThreat{0%,100%{transform:scale(1);} 50%{transform:scale(1.12);}}
.block-tag{position:absolute; top:-14px; left:-10px; background:#22405a; border:2px solid #3f7bad; border-radius:20px; padding:4px 8px; font-size:12px; font-weight:800; box-shadow:0 0 8px rgba(63,123,173,.4);}
.player-card{border-color:var(--gold);}
.enemy-card.shake{animation:cardShake .38s ease;}
.enemy-card.phase-shift{animation:cardBurst .8s ease, pulse 1.2s ease;}
@keyframes cardShake{
  10%,90%{transform:translateX(-2px);}
  20%,80%{transform:translateX(4px);}
  30%,50%,70%{transform:translateX(-7px);}
  40%,60%{transform:translateX(7px);}
}
.fx-num{
  position:absolute; left:50%; top:36%; transform:translateX(-50%);
  font-family:'Senobi Gothic', serif; font-weight:800; font-size:22px; white-space:nowrap;
  pointer-events:none; z-index:6; animation:fxRise 1s ease forwards;
  text-shadow:0 2px 6px rgba(0,0,0,.7);
}
.fx-num.dmg{color:var(--blood-bright);}
.fx-num.heal{color:var(--good);}
.fx-num.block{color:#7fb8e8;}
@keyframes fxRise{
  0%{opacity:0; transform:translate(-50%,6px) scale(.8);}
  15%{opacity:1; transform:translate(-50%,-6px) scale(1.08);}
  75%{opacity:1;}
  100%{opacity:0; transform:translate(-50%,-40px) scale(1);}
}

.player-status{display:flex; justify-content:center; gap:14px; align-items:center; margin-bottom:10px; flex-wrap:wrap;}
.energy-orbs{display:flex; gap:5px;}
.orb{width:20px; height:20px; border-radius:50%; background:radial-gradient(circle at 35% 30%, var(--gold-bright), var(--gold) 70%); box-shadow:0 0 6px rgba(240,207,94,.6);}
.orb.spent{background:#332a17; box-shadow:none; opacity:.4;}

.hand{display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin:18px 0 8px; perspective:800px;}
.card{
  width:118px; min-height:158px; border-radius:12px; padding:10px 9px; position:relative;
  background:linear-gradient(160deg,#2b2440,#1a1526);
  border:2px solid var(--line);
  display:flex; flex-direction:column; align-items:center; text-align:center;
  animation:dealIn .32s ease backwards;
  box-shadow:0 6px 16px rgba(0,0,0,.4);
}
@keyframes dealIn{from{transform:translateY(30px) rotateX(40deg); opacity:0;} to{transform:none; opacity:1;}}
.card.type-attack{border-color:#7a3247;}
.card.type-defense{border-color:#2f6a86;}
.card.type-skill{border-color:var(--good);}
.card.type-power{border-color:var(--gold); box-shadow:0 6px 16px rgba(0,0,0,.4), 0 0 14px rgba(201,162,39,.2);}
.card.type-gamble{border-color:var(--glow-purple); background:linear-gradient(160deg,#2f2650,#1c1730); animation:dealIn .32s ease backwards, gamblePulse 2.4s infinite ease-in-out;}
@keyframes gamblePulse{0%,100%{box-shadow:0 6px 16px rgba(0,0,0,.4), 0 0 0 rgba(106,79,174,0);} 50%{box-shadow:0 6px 16px rgba(0,0,0,.4), 0 0 16px rgba(106,79,174,.5);}}
.card.type-curse{border-color:#4a4a4a; opacity:.7;}
.card .cost{
  position:absolute; top:-10px; left:-10px; width:26px; height:26px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, var(--gold-bright), var(--gold)); color:#241a05;
  font-weight:900; display:flex; align-items:center; justify-content:center; font-size:13px; border:2px solid #1a1526;
  box-shadow:0 2px 6px rgba(0,0,0,.5);
}
.card .rarity-star{
  position:absolute; top:-12px; right:-8px; font-size:20px; color:var(--gold-bright);
  text-shadow:0 0 6px rgba(240,207,94,.8), 0 0 2px #000;
  animation:starTwinkle 1.6s infinite ease-in-out;
}
.card .gcost{
  position:absolute; bottom:-9px; left:50%; transform:translateX(-50%);
  background:#1a1526; border:1px solid var(--gold); color:var(--gold-bright);
  font-size:10px; font-weight:800; padding:2px 7px; border-radius:10px; white-space:nowrap;
}
@keyframes starTwinkle{0%,100%{opacity:1; transform:scale(1) rotate(0deg);} 50%{opacity:.6; transform:scale(1.15) rotate(8deg);}}
.card.rarity-rare{position:relative;}
.card.rarity-rare::before{
  content:''; position:absolute; inset:-2px; border-radius:12px; z-index:-1;
  background:linear-gradient(120deg, transparent 30%, rgba(240,207,94,.55) 50%, transparent 70%);
  background-size:220% 220%; animation:shimmer 2.6s linear infinite;
}
@keyframes shimmer{0%{background-position:200% 0;} 100%{background-position:-20% 0;}}
.card .cname{font-weight:700; font-size:13px; margin:14px 0 6px; line-height:1.3;}
.card .ctype{font-size:9.5px; color:var(--text-dim); letter-spacing:.1em; margin-bottom:6px;}
.card .cdesc{font-size:11px; color:var(--parchment); line-height:1.5; flex:1;}
.card.playable{cursor:pointer;}
.card.playable:hover{transform:translateY(-10px) scale(1.03); box-shadow:0 10px 22px rgba(0,0,0,.5); z-index:5;}
.card.unplayable{opacity:.45; filter:grayscale(.4);}
.card.locked{opacity:.55; filter:grayscale(.7);}
.card.selected{outline:3px solid var(--gold-bright); outline-offset:2px; transform:translateY(-10px); box-shadow:0 10px 24px rgba(0,0,0,.5), 0 0 18px rgba(240,207,94,.5);}
.card .lock-badge{
  position:absolute; top:-10px; right:-8px; font-size:15px;
  background:#1a1526; border:1px solid var(--blood-bright); border-radius:50%;
  width:22px; height:22px; display:flex; align-items:center; justify-content:center;
}
.card.card-burst{animation:dealIn .32s ease backwards, cardBurst .4s ease;}
@keyframes cardBurst{0%{filter:brightness(1);} 40%{filter:brightness(1.6) saturate(1.3);} 100%{filter:brightness(1);}}

.log-panel{
  background:#0d0b14; border:1px solid var(--line); border-radius:10px; padding:10px 14px; font-size:12px;
  color:var(--text-dim); max-height:110px; overflow-y:auto; margin:14px 0; line-height:1.8;
  box-shadow:inset 0 2px 8px rgba(0,0,0,.5);
}
.log-panel .entry{border-left:2px solid transparent; padding-left:8px; margin:1px 0;}
.log-panel .entry.log-dmg{border-color:var(--blood); color:#d98a97;}
.log-panel .entry.log-heal{border-color:var(--good); color:#8fd6b0;}
.log-panel .entry.log-block{border-color:#3f7bad; color:#8fc0e6;}
.log-panel .entry.log-power{border-color:var(--gold); color:#e0c778;}
.log-panel .entry:last-child{color:var(--gold-bright); font-weight:700;}
.combat-actions{display:flex; justify-content:center; gap:10px; margin-top:6px;}

/* ---------- reward / rest / shop / gamble / event ---------- */
.section-title{text-align:center; font-size:22px; margin:6px 0 20px; color:var(--gold-bright);}
.center-col{display:flex; flex-direction:column; align-items:center;}
.choice-row{display:flex; gap:16px; flex-wrap:wrap; justify-content:center; margin-bottom:24px;}
.big-choice{
  background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:22px; width:220px; text-align:center; position:relative;
}
.big-choice h3{font-size:15px; margin-bottom:8px; color:var(--parchment);}
.big-choice p{font-size:12.5px; color:var(--text-dim); line-height:1.6; margin-bottom:14px;}
.tactic-card{width:230px;}
.challenge-card{width:260px;}
.info-btn{
  position:absolute; top:10px; right:10px; width:22px; height:22px; border-radius:50%; padding:0;
  background:#1a1526; border:1px solid var(--gold); color:var(--gold-bright);
  font-size:12px; font-weight:800; line-height:1; display:flex; align-items:center; justify-content:center;
}

.gamble-row{display:flex; gap:22px; justify-content:center; margin:26px 0; flex-wrap:wrap;}
.gcard{
  width:130px; height:180px; border-radius:14px; cursor:pointer; position:relative;
  background:linear-gradient(155deg,#241e35,#150f22); border:2px solid var(--glow-purple);
  display:flex; align-items:center; justify-content:center; font-size:34px;
  transition:transform .2s ease; box-shadow:0 4px 14px rgba(0,0,0,.4), 0 0 0 rgba(0,0,0,0);
  animation:gcardIdle 3s infinite ease-in-out;
}
@keyframes gcardIdle{0%,100%{box-shadow:0 4px 14px rgba(0,0,0,.4), 0 0 10px rgba(106,79,174,.15);} 50%{box-shadow:0 4px 14px rgba(0,0,0,.4), 0 0 20px rgba(106,79,174,.4);}}
.gcard:not(.revealed):not(.disabled):hover{transform:translateY(-8px); box-shadow:0 10px 24px rgba(106,79,174,.5);}
.gcard.revealed{
  background:linear-gradient(155deg,#2c2440,#1c1730); cursor:default; flex-direction:column; padding:14px; font-size:12px;
  animation:flip .5s ease;
}
.gcard.disabled{opacity:.35; cursor:default; animation:none;}
.gcard.revealed.mood-good{border-color:var(--gold-bright); box-shadow:0 0 24px rgba(240,207,94,.45);}
.gcard.revealed.mood-bad{border-color:var(--blood-bright); animation:flip .5s ease, cardShake .4s ease .5s;}
@keyframes flip{from{transform:rotateY(90deg); opacity:.2;} to{transform:rotateY(0); opacity:1;}}
.gcard .glabel{font-weight:800; font-size:13px; color:var(--gold-bright); margin-bottom:6px;}
.gcard .gdesc{font-size:11px; color:var(--text-dim); line-height:1.5;}

.shop-item, .deck-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; max-width:460px;
  background:linear-gradient(160deg,var(--panel),var(--bg2)); border:1px solid var(--line); border-radius:10px; padding:10px 14px; margin-bottom:8px;
  box-shadow:0 3px 10px rgba(0,0,0,.3);
  transition:border-color .15s ease;
}
.shop-item:hover, .deck-row:hover{border-color:var(--gold);}
.shop-item .info, .deck-row .info{font-size:13px;}
.shop-item .info b, .deck-row .info b{color:var(--gold-bright);}
.shop-item .desc, .deck-row .desc{font-size:11px; color:var(--text-dim);}
.tlabel{font-weight:700;}
.tlabel-attack{color:#e0435f;}
.tlabel-defense{color:#6ec3e8;}
.tlabel-skill{color:#5fbf8f;}
.tlabel-power{color:#f0cf5e;}
.tlabel-gamble{color:#a68eea;}
.tlabel-curse{color:#9b9bab;}

.event-box{max-width:520px; margin:0 auto; background:linear-gradient(160deg,var(--panel),var(--bg2)); border:1px solid var(--line); border-radius:14px; padding:24px 26px; text-align:center; box-shadow:0 10px 30px rgba(0,0,0,.4);}
.event-box .eicon{font-size:44px; margin-bottom:8px; filter:drop-shadow(0 0 14px rgba(240,207,94,.25));}
.event-box .edesc{color:var(--text-dim); font-size:13.5px; line-height:1.8; margin-bottom:20px;}
.event-choices{display:flex; flex-direction:column; gap:10px;}
.event-choice-btn{width:100%; padding:12px 16px; font-size:13.5px; text-align:left;}
.event-result{background:#0d0b14; border:1px solid var(--gold); border-radius:10px; padding:14px 18px; font-size:13px; color:var(--gold-bright); margin-bottom:18px; line-height:1.7; box-shadow:inset 0 0 20px rgba(201,162,39,.08);}

.modal-backdrop{
  position:fixed; inset:0; background:rgba(6,4,10,.75); backdrop-filter:blur(2px); display:flex; align-items:center; justify-content:center;
  z-index:50; padding:20px; animation:fadeIn .18s ease;
}
@keyframes fadeIn{from{opacity:0;} to{opacity:1;}}
.modal{
  background:linear-gradient(160deg,var(--bg2),#170f22); border:1px solid var(--line); border-radius:14px; padding:22px; max-width:560px; width:100%;
  max-height:80vh; overflow-y:auto; box-shadow:0 20px 60px rgba(0,0,0,.6);
  animation:modalPop .2s ease;
}
@keyframes modalPop{from{opacity:0; transform:translateY(10px) scale(.97);} to{opacity:1; transform:none;}}
.modal h3{color:var(--gold-bright); margin-bottom:14px;}

.end-screen{text-align:center; padding:50px 10px; animation:endScreenIn 1.1s ease backwards;}
@keyframes endScreenIn{from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;}}
.end-screen h1{font-size:32px; margin-bottom:10px; text-shadow:0 0 30px currentColor;}
.end-screen p{color:var(--text-dim); margin-bottom:20px;}
.end-stats{max-width:520px; margin:0 auto 24px; background:linear-gradient(160deg,var(--panel),var(--bg2)); border:1px solid var(--line); border-radius:14px; padding:18px 22px; text-align:left; box-shadow:0 10px 30px rgba(0,0,0,.4);}
.end-stats .row{display:flex; justify-content:space-between; gap:10px; font-size:13.5px; padding:5px 0; border-bottom:1px solid var(--line);}
.end-stats .row:last-child{border-bottom:none;}
.end-stats .row b{color:var(--gold-bright);}
.end-cause{max-width:480px; margin:0 auto 18px; font-size:13.5px; color:var(--text-dim); line-height:1.7;}

@media (max-width:480px){
  /* top bar: 2 clean rows (info, then action buttons) instead of an unpredictable 3-line wrap */
  .topbar{flex-direction:column; align-items:stretch; gap:6px; padding:8px 10px;}
  .topbar-info{display:flex; flex-wrap:wrap; align-items:center; gap:5px 6px;}
  .topbar-info .chapter-tag{font-size:9.5px; padding:2px 5px;}
  .topbar-info .stat{font-size:11px; gap:3px;}
  .topbar-info .hp-bar-wrap{min-width:34px; max-width:none; flex:1 1 34px; height:11px;}
  .topbar-streak{display:flex;}
  .topbar-streak .chapter-tag{font-size:9.5px; padding:3px 6px; width:100%; text-align:center; white-space:normal;}
  .topbar-actions{display:flex; gap:4px;}
  .topbar-actions .btn{flex:1; padding:7px 2px; font-size:10.5px; white-space:nowrap;}
  .card{width:100px; min-height:144px;}
  .enemy-area{flex-wrap:nowrap; gap:8px;}
  .enemy-card{min-width:0; flex:1 1 0; max-width:48%; padding:12px 10px;}
  .persistent-buffs{gap:3px; margin-top:4px;}
  .buff-badge{padding:1px 6px; font-size:10px;}
  .title-screen h1{font-size:28px;}
  .lanes{gap:14px;}
  .node{width:44px; height:44px; font-size:18px;}
  .node-wrap{width:48px;}
  .fx-num{font-size:17px;}
  .gcard{width:104px; height:150px; font-size:28px;}

  /* 狐仮面の仕立処：カード一覧を3列固定にして縮小表示 */
  .foxshop-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:6px; justify-items:stretch;}
  .foxshop-cards .card{width:auto; min-height:126px; padding:8px 6px;}
  .foxshop-cards .card .cname{font-size:10.5px; margin:8px 0 4px;}
  .foxshop-cards .card .ctype{font-size:8px; margin-bottom:3px;}
  .foxshop-cards .card .cdesc{font-size:8.5px; line-height:1.35;}

  /* 戦術選択・チャレンジモード選択：2列固定 */
  .tactic-grid, .challenge-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:10px;}
  .tactic-grid .tactic-card, .challenge-grid .challenge-card{width:auto; padding:16px 14px;}
  .tactic-grid h3, .challenge-grid h3{font-size:13px;}
  .challenge-grid h3{padding-right:22px;}

  /* 戦闘操作ボタン：親指で届きやすいよう幅いっぱいに広げる */
  .combat-actions{gap:8px;}
  .combat-actions .btn{flex:1;}
}

/* ---------- Landscape layout (short-viewport devices, i.e. phones rotated
   sideways -- tablets/desktops are tall enough in landscape to be unaffected) ---------- */
@media (orientation:landscape) and (max-height:520px){
  #app{padding:8px 12px 16px;}
  .title-screen{padding:14px 10px 10px;}
  .title-screen .emblem{font-size:36px; margin-bottom:2px;}
  .title-screen h1{font-size:24px;}
  .title-screen .sub{margin-bottom:12px; font-size:11px;}
  .topbar{padding:6px 12px; margin-bottom:8px; gap:6px;}
  .topbar .stat{font-size:12px;}
  .chapter-tag{font-size:10px; padding:2px 8px;}
  .chapter-divider{margin:10px 0 6px; font-size:16px;}
  .chapter-sub{margin-bottom:8px; font-size:10px;}
  .map-scroll{margin:8px 0 20px;}
  .layer-row{margin-bottom:2px;}
  .node{width:36px; height:36px; font-size:15px;}
  .node-wrap{width:42px;}
  .node-label{font-size:8px;}
  .enemy-area{gap:8px; margin:4px 0 8px; flex-wrap:nowrap;}
  .enemy-card{padding:8px 12px; min-width:0; flex:1 1 0; max-width:48%;}
  .persistent-buffs{gap:3px; margin-top:3px;}
  .buff-badge{padding:1px 6px; font-size:9.5px;}
  .enemy-card .portrait{font-size:30px; margin-bottom:2px;}
  .enemy-name{font-size:12px; margin-bottom:3px;}
  .enemy-hp-text{font-size:10.5px;}
  .player-status{margin-bottom:6px;}
  .hand{flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start; margin:8px 0 4px; padding:2px 4px 8px; -webkit-overflow-scrolling:touch;}
  .card{width:88px; min-height:116px; padding:8px 7px; flex-shrink:0;}
  .card .cname{font-size:11.5px; margin:10px 0 4px;}
  .card .cdesc{font-size:9.5px;}
  .combat-actions{margin-top:4px;}
  .log-panel{max-height:56px; margin:8px 0; padding:6px 10px;}
  .rules-box{padding:12px 16px; font-size:12px; line-height:1.6;}
  .event-box, .end-stats{padding:14px 16px;}
  .big-choice{padding:14px;}
}