:root{
  --bg:#070a10;
  --panel:#101927;
  --panel2:#182437;
  --line:#30435e;
  --text:#edf4ff;
  --muted:#9caec6;
  --gold:#edc66d;
  --blue:#6aa6ff;
  --red:#df6470;
  --purple:#8b68ff;
  --green:#61d796;
  --safe-bottom:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box}
html,body{
  margin:0;
  min-height:100%;
  background:var(--bg);
  color:var(--text);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  overflow-x:hidden;
}
button{
  border:1px solid #3b5272;
  background:linear-gradient(180deg,#29415f,#17243a);
  color:#fff;
  padding:11px 14px;
  border-radius:13px;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 8px 18px rgba(0,0,0,.24);
}
button.primary,.command-main{
  background:linear-gradient(180deg,#9676ff,#5537c9);
  border-color:#b19bff;
}
button:hover{filter:brightness(1.1)}
.game-hud{
  position:fixed;
  z-index:80;
  top:0;
  left:0;
  right:0;
  height:64px;
  padding:8px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  background:rgba(6,9,15,.82);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.09);
}
.profile-chip{display:flex;align-items:center;gap:10px;min-width:0}
.profile-chip b{display:block;white-space:nowrap}
.profile-chip span{display:block;color:var(--muted);font-size:12px;white-space:nowrap}
.avatar-dot{
  width:40px;height:40px;border-radius:50%;
  background:radial-gradient(circle at 38% 32%,#fff,#7c8ec6 38%,#151c2c 72%);
  border:1px solid rgba(255,255,255,.22);
}
.resource-row{display:flex;gap:8px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
.resource-row span{
  font-size:12px;color:var(--muted);
  border:1px solid rgba(255,255,255,.09);
  border-radius:999px;
  padding:6px 9px;
  background:rgba(255,255,255,.04);
}
.resource-row b{color:#fff}
.screen{
  display:none;
  min-height:100vh;
  padding:76px 14px calc(86px + var(--safe-bottom));
  max-width:1240px;
  margin:0 auto;
}
.screen.active{display:block}

/* Lobby */
.home-screen.active{
  max-width:none;
  padding:64px 0 calc(72px + var(--safe-bottom));
}
.lobby{
  position:relative;
  min-height:calc(100vh - 64px - 72px);
  overflow:hidden;
  background:#0b1019;
}
.lobby-bg{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(4,8,14,.96) 0%,rgba(4,8,14,.58) 30%,rgba(4,8,14,.14) 54%,rgba(4,8,14,.75) 100%),
    url("assets/bg/academy.jpg?v=045-vn-transition") center/cover;
}
.lobby-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 72% 38%,rgba(150,118,255,.18),transparent 24%),
    linear-gradient(180deg,transparent,rgba(0,0,0,.48));
}
#homeActor{
  position:absolute;
  z-index:2;
  left:56%;
  transform:translateX(-50%);
  top:74px;
  bottom:auto;
  height:88vh;
  width:auto;
  filter:drop-shadow(0 34px 70px rgba(0,0,0,.58));
  cursor:pointer;
}
.left-dock{
  position:absolute;
  z-index:6;
  top:22px;
  left:18px;
  width:330px;
  display:grid;
  gap:12px;
}
.dock-card{
  text-align:left;
  min-height:116px;
  border-radius:22px;
  padding:18px;
  background:
    linear-gradient(135deg,rgba(143,108,255,.30),rgba(17,25,39,.92)),
    rgba(17,25,39,.92);
  border:1px solid rgba(255,255,255,.13);
}
.dock-card small{
  color:var(--gold);
  letter-spacing:.15em;
  display:block;
  margin-bottom:6px;
}
.dock-card b{
  display:block;
  font-size:22px;
}
.dock-card span{
  display:block;
  color:var(--muted);
  font-size:13px;
  margin-top:5px;
}
.story-card{
  background:
    linear-gradient(135deg,rgba(220,80,95,.34),rgba(17,25,39,.92)),
    url("assets/bg/danger.jpg") center/cover;
}
.right-command{
  position:absolute;
  z-index:7;
  right:18px;
  top:22px;
  width:180px;
  display:grid;
  gap:10px;
}
.right-command button{
  min-height:54px;
}
.home-dialogue{
  position:absolute;
  z-index:8;
  left:18px;
  right:18px;
  bottom:72px;
  min-height:130px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:14px;
  align-items:end;
  border:1px solid rgba(255,255,255,.15);
  border-radius:24px;
  background:rgba(6,10,17,.80);
  backdrop-filter:blur(14px);
  box-shadow:0 24px 80px rgba(0,0,0,.55);
  padding:18px;
}
.speaker-line b{
  display:block;
  color:#fff;
  font-size:18px;
  margin-bottom:6px;
}
.speaker-line span{
  display:block;
  font-size:18px;
  line-height:1.7;
  color:#e9f2ff;
}
.home-talk-choices{
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
  width:150px;
}
.home-talk-choices button{
  padding:9px 10px;
  border-radius:11px;
}
.notice-strip{
  position:absolute;
  z-index:5;
  left:18px;
  right:220px;
  bottom:18px;
  height:42px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 14px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:999px;
  background:rgba(10,16,25,.76);
  backdrop-filter:blur(12px);
  color:var(--muted);
}
.notice-strip span{color:var(--gold);letter-spacing:.12em;font-size:12px}
.notice-strip b{color:#fff}
.notice-strip em{font-style:normal}

/* Story */
.story-screen{
  max-width:none;
  padding:0;
  overflow:hidden;
}
.story-bg{
  position:fixed;
  inset:64px 0 calc(62px + var(--safe-bottom)) 0;
  background:url("assets/bg/academy.jpg?v=045-vn-transition") center/cover;
}
.story-bg.training{background-image:url("assets/bg/training.jpg")}
.story-bg.archive{background-image:url("assets/bg/archive.jpg")}
.story-bg.danger{background-image:url("assets/bg/danger.jpg")}
.story-bg.academy{background-image:url("assets/bg/academy.jpg?v=045-vn-transition")}
.story-bg:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.62));
}
#storyActor{
  position:fixed;
  z-index:2;
  left:57%;
  transform:translateX(-18%);
  top:68px;
  bottom:auto;
  height:92vh;
  width:auto;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.55));
}
.story-home,.story-skip{
  position:fixed;
  z-index:12;
  top:78px;
}
.story-home{left:14px}
.story-skip{left:108px}
.chapter-toggle{
  position:fixed;
  z-index:14;
  top:200px;
  right:18px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  padding:10px 14px;
  background:rgba(8,14,24,.78);
  color:#fff;
  font-weight:900;
  backdrop-filter:blur(12px);
  box-shadow:0 12px 34px rgba(0,0,0,.34);
}
.chapter-toggle.open{
  border-color:rgba(237,198,109,.62);
  background:rgba(37,31,19,.88);
}
.chapter-map{
  position:fixed;
  z-index:13;
  top:248px;
  right:14px;
  width:310px;
  max-height:calc(100vh - 340px);
  overflow:auto;
  display:grid;
  gap:8px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateX(18px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s ease;
}
.chapter-map.open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateX(0);
}
.chapter-node{
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  padding:10px 12px;
  background:rgba(7,11,18,.68);
  backdrop-filter:blur(10px);
  color:var(--muted);
  font-size:12px;
}
.chapter-node.active{
  color:#fff;
  border-color:rgba(237,198,109,.5);
  background:rgba(90,64,24,.48);
}
.novel-box{
  position:fixed;
  z-index:10;
  left:14px;
  right:14px;
  bottom:calc(76px + var(--safe-bottom));
  min-height:178px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:23px;
  background:rgba(7,10,16,.84);
  backdrop-filter:blur(14px);
  box-shadow:0 24px 80px rgba(0,0,0,.55);
  padding:18px 20px;
}
.chapter{color:var(--gold);font-size:12px;letter-spacing:.10em}
.speaker{font-weight:1000;font-size:18px;margin-top:6px}
.novel-text{font-size:19px;line-height:1.75;margin-top:8px;min-height:66px}
.tap-help{text-align:right;color:var(--muted);font-size:12px}
.choices{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}

/* Battle */
.battle-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.battle-top span{color:var(--gold);font-size:12px;letter-spacing:.14em}
.battle-top h2{margin:4px 0 0}
.battle-actions{display:flex;gap:8px}
.battle-stage{
  border:1px solid rgba(255,255,255,.09);
  border-radius:24px;
  background:
    radial-gradient(circle at 50% 20%,rgba(143,108,255,.18),transparent 30%),
    linear-gradient(180deg,rgba(20,31,47,.96),rgba(9,14,22,.96));
  padding:14px;
}
.enemy-line,.player-line{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.hp-card{
  border:1px solid rgba(255,255,255,.09);
  border-radius:15px;
  background:rgba(255,255,255,.045);
  padding:10px;
}
.hp-card b{display:block}
.hp-card em{font-style:normal;color:var(--gold);font-weight:900}
meter{width:100%;height:10px}
.played-row{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  margin:14px 0;
  border:1px dashed rgba(255,255,255,.13);
  border-radius:18px;
  padding:12px;
}
.played-row span{
  display:block;
  text-align:center;
  color:var(--muted);
  font-size:12px;
  margin-bottom:6px;
}
.mini{
  min-height:92px;
  border:1px solid rgba(255,255,255,.15);
  border-radius:14px;
  background:#101827;
  padding:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.mini.empty{color:var(--muted)}
.battle-controls{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:12px 0;
}
.turn-pill{
  border:1px solid rgba(255,255,255,.1);
  border-radius:999px;
  background:rgba(255,255,255,.05);
  padding:8px 12px;
  color:var(--gold);
  font-weight:900;
}
.hands{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.hands h3{margin:0 0 8px}
.hands small{color:var(--muted)}
.hand{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:flex-start;
}
.hand.compact .card{opacity:.82}
.card{
  position:relative;
  width:144px;
  min-height:216px;
  border-radius:15px;
  border:1px solid rgba(255,255,255,.16);
  background:linear-gradient(180deg,#18263a,#0d1420);
  padding:8px;
  display:grid;
  grid-template-rows:34px 78px 28px 1fr;
  gap:6px;
  overflow:hidden;
  cursor:pointer;
  box-shadow:0 12px 26px rgba(0,0,0,.26);
}
.card:hover{filter:brightness(1.1);transform:translateY(-2px)}
.card.selected{box-shadow:0 0 0 2px #fff,0 14px 30px rgba(0,0,0,.3);border-color:#fff}
.card.SSR{border-color:#eac66f;background:linear-gradient(180deg,#3a2916,#151015)}
.card.SR{border-color:#7ea8ff;background:linear-gradient(180deg,#1a2b50,#101625)}
.card.R{border-color:#69d1c9;background:linear-gradient(180deg,#14383e,#0f1b23)}
.card.GLITCH{border-color:#b87bff;background:linear-gradient(180deg,#29153b,#0e0b17)}
.namebar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:5px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:9px;
  background:rgba(0,0,0,.32);
  padding:6px 7px;
  font-weight:900;
  font-size:12px;
}
.namebar span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.namebar em{font-style:normal;color:var(--gold);font-size:10px}
.art{
  border:1px solid rgba(255,255,255,.14);
  border-radius:10px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:radial-gradient(circle at 50% 40%,rgba(255,255,255,.18),transparent 32%),rgba(255,255,255,.04);
}
.icon{font-size:34px}
.art small{color:var(--muted);font-size:11px}
.values{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.values span{text-align:center;border-radius:8px;padding:5px 2px;font-size:12px;font-weight:900}
.atk{background:rgba(223,100,112,.20);border:1px solid rgba(223,100,112,.42)}
.def{background:rgba(106,166,255,.20);border:1px solid rgba(106,166,255,.42)}
.cardtext{
  border:1px solid rgba(255,255,255,.12);
  border-radius:9px;
  background:rgba(0,0,0,.22);
  padding:7px;
  color:#b9c7da;
  font-size:10.5px;
  line-height:1.35;
  overflow:hidden;
}
.battle-log{
  height:140px;
  overflow:auto;
  margin-top:12px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  background:rgba(0,0,0,.22);
  padding:12px;
  color:var(--muted);
  line-height:1.6;
}
.gacha-hero,.panel{
  border:1px solid rgba(255,255,255,.08);
  border-radius:24px;
  background:linear-gradient(180deg,rgba(20,30,45,.96),rgba(9,14,22,.96));
  padding:22px;
  margin-bottom:14px;
}
.gacha-hero span{color:var(--gold);font-size:12px;letter-spacing:.15em}
.gacha-hero h2,.panel h2{font-size:30px;margin:8px 0}
.gacha-buttons{display:flex;gap:10px}
.card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:12px;
}
.card-grid .card{width:auto;min-height:230px}
.mission-list{display:grid;gap:10px}
.mission-item{
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  background:rgba(255,255,255,.04);
  padding:14px;
  display:flex;
  justify-content:space-between;
  gap:10px;
}
.mission-item span{color:var(--muted);display:block;font-size:13px;margin-top:3px}
.bottom-nav{
  position:fixed;
  z-index:90;
  left:0;
  right:0;
  bottom:0;
  padding:8px 10px calc(8px + var(--safe-bottom));
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:8px;
  background:rgba(7,11,18,.92);
  backdrop-filter:blur(14px);
  border-top:1px solid rgba(255,255,255,.08);
}
.bottom-nav button{
  padding:10px 4px;
  font-size:12px;
  border-radius:14px;
}
.bottom-nav button.active{
  background:linear-gradient(180deg,#8f6cff,#553cc5);
  border-color:#a58cff;
}
@media(max-width:900px){
  .game-hud{height:auto;min-height:64px;align-items:flex-start;flex-direction:column}
  .screen{padding-top:102px}
  .home-screen.active{padding-top:92px}
  .lobby{min-height:calc(100vh - 92px - 72px)}
  #homeActor{right:-18vw;height:104vh;opacity:.92}
  .left-dock{width:min(320px,calc(100vw - 36px))}
  .right-command{top:auto;bottom:222px;right:18px;width:138px}
  .home-dialogue{grid-template-columns:1fr;bottom:68px}
  .home-talk-choices{grid-template-columns:repeat(3,1fr);width:auto}
  .notice-strip{display:none}
  .chapter-map{display:none}
  #storyActor{right:-28vw;opacity:.48}
  .novel-text{font-size:17px}
  .battle-hp,.battle-board,.enemy-line,.player-line,.played-row,.hands{grid-template-columns:1fr 1fr}
  .hands{grid-template-columns:1fr}
  .card{width:138px}
}
@media(max-width:520px){
  .profile-chip span{display:none}
  .battle-hp,.played-row{grid-template-columns:1fr 1fr}
  .card{width:132px;min-height:210px}
}


/* v009: reference-driven mobile game lobby */
.tap-character-hint{
  position:absolute;
  z-index:7;
  left:50%;
  top:38px;
  transform:translateX(-50%);
  color:rgba(255,255,255,.62);
  font-size:11px;
  letter-spacing:.18em;
  padding:6px 10px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:999px;
  background:rgba(5,8,14,.36);
  backdrop-filter:blur(8px);
  pointer-events:none;
}
.academy-schedule{
  position:absolute;
  z-index:6;
  left:430px;
  right:190px;
  top:18px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}
.academy-schedule div{
  min-height:86px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  background:rgba(8,13,22,.62);
  backdrop-filter:blur(10px);
  padding:12px;
}
.academy-schedule small{
  color:var(--gold);
  letter-spacing:.12em;
  font-size:10px;
}
.academy-schedule b{
  display:block;
  margin:5px 0 4px;
  font-size:18px;
}
.academy-schedule span{
  color:var(--muted);
  font-size:12px;
}
.lobby{
  background:
    radial-gradient(circle at 50% 28%,rgba(143,108,255,.16),transparent 26%),
    #0b1019;
}
.home-dialogue{
  left:260px;
  right:18px;
}
.left-dock{
  top:130px;
}
.right-command{
  top:130px;
}
.dock-card,
.right-command button,
.home-dialogue,
.notice-strip,
.academy-schedule div{
  box-shadow:0 18px 44px rgba(0,0,0,.34);
}
.notice-strip{
  cursor:pointer;
}
.lobby::before{
  content:"";
  position:absolute;
  z-index:1;
  left:50%;
  top:18%;
  transform:translateX(-50%);
  width:38vw;
  max-width:620px;
  min-width:320px;
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle,rgba(143,108,255,.18),rgba(143,108,255,.05) 42%,transparent 66%);
  pointer-events:none;
}
.story-screen #storyActor{
  pointer-events:none;
}
.battle-stage{
  max-width:1100px;
  margin:0 auto;
}
.battle-top,
.hands,
.battle-controls,
.battle-log{
  max-width:1100px;
  margin-left:auto;
  margin-right:auto;
}
.gacha-hero{
  background:
    linear-gradient(135deg,rgba(143,108,255,.34),rgba(9,14,22,.96)),
    url("assets/bg/archive.jpg") center/cover;
  min-height:220px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}
@media(max-width:900px){
  #homeActor{
    left:57%;
    top:88px;
    bottom:auto;
    height:82vh;
  }
  .tap-character-hint{
    top:104px;
  }
  .academy-schedule{
    left:18px;
    right:18px;
    top:104px;
    grid-template-columns:repeat(3,1fr);
  }
  .academy-schedule div{
    min-height:68px;
    padding:9px;
  }
  .academy-schedule b{
    font-size:14px;
  }
  .academy-schedule span{
    display:none;
  }
  .left-dock{
    top:190px;
  }
  .right-command{
    bottom:238px;
    top:auto;
    right:18px;
  }
  .home-dialogue{
    left:18px;
    right:18px;
  }
  #storyActor{
    left:58%;
    transform:translateX(-18%);
    top:80px;
    bottom:auto;
    height:88vh;
    opacity:.64;
  }
}
@media(max-width:620px){
  .academy-schedule{
    display:none;
  }
  .left-dock{
    top:28px;
    width:260px;
  }
  .dock-card{
    min-height:96px;
    padding:14px;
  }
  .dock-card b{
    font-size:19px;
  }
  .right-command{
    width:128px;
    bottom:232px;
  }
  #homeActor{
    left:60%;
    top:88px;
    bottom:auto;
    height:76vh;
  }
}
/* v011: canvas must stay fully transparent. No white/backplate behind the actor. */
#homeActor,
#storyActor{
  background:transparent !important;
}

/* v015: visual novel standee switching */
#storyActor{display:none!important}
.vn-sprite-wrap{
  position:fixed;
  z-index:3;
  left:50%;
  transform:translateX(-8%);
  top:70px;
  bottom:calc(250px + var(--safe-bottom));
  width:min(480px,42vw);
  min-width:320px;
  pointer-events:none;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  filter:drop-shadow(0 32px 60px rgba(0,0,0,.56));
}
.vn-sprite-wrap img{
  max-height:100%;
  max-width:100%;
  object-fit:contain;
  animation:spriteIn .22s ease-out;
}
@keyframes spriteIn{from{opacity:.55; transform:translateY(10px)} to{opacity:1; transform:translateY(0)}}
.sprite-name{
  position:absolute;
  left:50%;
  bottom:8px;
  transform:translateX(-50%);
  min-width:220px;
  padding:9px 12px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:14px;
  background:rgba(6,9,15,.62);
  backdrop-filter:blur(10px);
  text-align:center;
}
.sprite-name b{display:block;color:#fff;font-size:14px}
.sprite-name span{display:block;color:var(--muted);font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chapter-node{cursor:pointer;text-align:left;width:100%;font-family:inherit}
.novel-text{max-height:29vh;overflow:auto;padding-right:6px}
.shop-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin-top:14px}
.shop-item{border:1px solid rgba(255,255,255,.1);border-radius:16px;background:rgba(255,255,255,.045);padding:14px;display:grid;gap:8px}
.shop-item b{font-size:18px}.shop-item span{color:var(--muted);line-height:1.55}.shop-item em{font-style:normal;color:var(--gold);font-weight:900}.shop-label{color:var(--gold);letter-spacing:.14em;font-size:12px;font-weight:900}
.bottom-nav{grid-template-columns:repeat(6,1fr)}
@media(max-width:900px){.vn-sprite-wrap{right:-14vw;left:auto;transform:none;width:70vw;opacity:.55}.sprite-name{display:none}.novel-text{max-height:32vh}.bottom-nav button{font-size:11px}}


/* v016: NIKKE-like focus actor stage. Speaker is centered/brighter; non-speakers remain left/right and dimmed. */
.vn-sprite-wrap{display:none!important}
.actor-stage{
  position:fixed;
  z-index:4;
  inset:72px 0 calc(238px + var(--safe-bottom)) 0;
  pointer-events:none;
  overflow:hidden;
}
.actor-card{
  position:absolute;
  bottom:0;
  width:min(390px,34vw);
  min-width:260px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  filter:drop-shadow(0 32px 64px rgba(0,0,0,.62));
  transition:transform .24s ease, opacity .24s ease, filter .24s ease;
}
.actor-card img{max-width:100%;max-height:calc(100vh - 330px);object-fit:contain;}
.actor-card.pos-left{left:11%;transform:translateX(-50%) scale(.88);}
.actor-card.pos-center{left:50%;transform:translateX(-50%) scale(1.04);}
.actor-card.pos-right{left:89%;transform:translateX(-50%) scale(.88);}
.actor-card.focus{opacity:1;z-index:5;filter:drop-shadow(0 36px 70px rgba(0,0,0,.70)) brightness(1.08) saturate(1.05);}
.actor-card.dim{opacity:.43;z-index:3;filter:drop-shadow(0 24px 50px rgba(0,0,0,.50)) brightness(.58) saturate(.75);}
.actor-card.focus.pos-left{transform:translateX(-42%) scale(1.02)}
.actor-card.focus.pos-right{transform:translateX(-58%) scale(1.02)}
.actor-label{
  position:absolute;
  left:50%;
  bottom:8px;
  transform:translateX(-50%);
  width:min(280px,82%);
  padding:8px 10px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:14px;
  background:rgba(6,9,15,.64);
  backdrop-filter:blur(10px);
  text-align:center;
}
.actor-card.dim .actor-label{display:none}
.actor-label b{display:block;color:#fff;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.actor-label span{display:block;color:var(--muted);font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:900px){
  .actor-stage{inset:74px 0 calc(255px + var(--safe-bottom)) 0;}
  .actor-card{width:52vw;min-width:210px;}
  .actor-card.pos-left{left:20%;transform:translateX(-50%) scale(.72)}
  .actor-card.pos-center{left:50%;transform:translateX(-50%) scale(.92)}
  .actor-card.pos-right{left:80%;transform:translateX(-50%) scale(.72)}
  .actor-card.dim{opacity:.28}
  .actor-label{display:none}
  .chapter-map{width:220px;max-height:28vh;overflow:auto}
}

/* v017: app-game UI refresh based on reference layouts */
:root{
  --ui17-cyan:#67d5ff;
  --ui17-cyan2:#9de8ff;
  --ui17-pink:#ff6fb0;
  --ui17-yellow:#ffcf67;
  --ui17-deep:#0b1120;
  --ui17-card:rgba(10,16,28,.76);
}
.game-hud{
  height:72px;
  padding:10px 18px;
  background:linear-gradient(180deg,rgba(7,11,18,.95),rgba(7,11,18,.72));
  border-bottom:1px solid rgba(255,255,255,.10);
  box-shadow:0 10px 28px rgba(0,0,0,.32);
}
.profile-chip b{font-size:17px;letter-spacing:.02em}
.profile-chip span{font-size:11px;letter-spacing:.04em}
.resource-row span{
  min-width:88px;
  display:flex;align-items:center;justify-content:center;
  gap:6px;padding:8px 12px;
  background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.04));
  border-color:rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 6px 18px rgba(0,0,0,.18);
}
.resource-row span:nth-child(1) b{color:var(--ui17-cyan2)}
.resource-row span:nth-child(2) b{color:#b995ff}
.resource-row span:nth-child(3) b{color:#ffb15f}

.home-screen.active{padding-top:72px;padding-bottom:calc(86px + var(--safe-bottom));}
.lobby{min-height:calc(100vh - 72px - 86px);background:linear-gradient(180deg,#d1e8ff 0%,#79b7ef 40%,#102038 100%);}
.lobby-bg{
  background:
    linear-gradient(90deg,rgba(9,14,22,.68) 0%,rgba(9,14,22,.28) 20%,rgba(9,14,22,.06) 45%,rgba(9,14,22,.28) 70%,rgba(9,14,22,.72) 100%),
    linear-gradient(180deg,rgba(255,255,255,.08),rgba(0,0,0,.18)),
    url("assets/bg/academy.jpg?v=045-vn-transition") center/cover;
  filter:saturate(1.06) brightness(1.02);
}
.lobby-bg::after{
  background:
    radial-gradient(circle at 62% 38%,rgba(103,213,255,.22),transparent 22%),
    radial-gradient(circle at 40% 65%,rgba(255,111,176,.12),transparent 18%),
    linear-gradient(180deg,transparent 0%,rgba(0,0,0,.16) 65%,rgba(0,0,0,.44) 100%);
}
.lobby-vignette{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.04),transparent 22%),radial-gradient(circle at 50% 110%,rgba(8,14,26,0),rgba(8,14,26,.22) 55%,rgba(8,14,26,.72) 100%)}
.lobby::before{
  width:32vw;min-width:280px;max-width:540px;top:26%;
  background:radial-gradient(circle,rgba(103,213,255,.24),rgba(143,108,255,.09) 44%,transparent 72%);
}

.utility-rail{
  position:absolute;z-index:8;left:18px;top:24px;
  display:grid;gap:10px;
}
.rail-btn{
  width:82px;min-height:70px;padding:10px 6px;border-radius:20px;
  display:grid;gap:4px;justify-items:center;align-content:center;
  background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.06)),rgba(12,20,35,.62);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(12px);
}
.rail-ico{font-size:18px;line-height:1;color:var(--ui17-cyan2)}
.rail-btn span:last-child{font-size:11px;color:#fff;letter-spacing:.04em}

.promo-banner{
  position:absolute;z-index:9;top:22px;left:132px;right:182px;height:86px;
  border-radius:24px;padding:14px 18px;
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;
  background:
    linear-gradient(120deg,rgba(255,94,126,.82),rgba(125,85,255,.72) 42%,rgba(22,36,58,.92) 100%),
    radial-gradient(circle at 86% 24%,rgba(255,255,255,.35),transparent 18%);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 20px 46px rgba(0,0,0,.28);
  cursor:pointer;
}
.promo-tag{
  display:inline-flex;align-items:center;justify-content:center;height:34px;padding:0 12px;
  border-radius:999px;background:rgba(255,255,255,.22);color:#fff;font-size:11px;font-weight:900;letter-spacing:.08em;
}
.promo-copy small{display:block;font-size:11px;letter-spacing:.16em;color:#ffe6f1;font-weight:900}
.promo-copy b{display:block;font-size:26px;line-height:1.1;color:#fff;margin-top:2px;text-shadow:0 2px 10px rgba(0,0,0,.18)}
.promo-copy span{display:block;font-size:12px;color:rgba(255,255,255,.88);margin-top:5px}
.promo-dots{display:flex;gap:6px;align-items:center;justify-content:flex-end}
.promo-dots i{width:9px;height:9px;border-radius:50%;display:block;background:rgba(255,255,255,.34)}
.promo-dots i.active{width:24px;border-radius:999px;background:#fff}

#homeActor{left:39%;top:96px;height:84vh;max-height:900px;filter:drop-shadow(0 30px 70px rgba(0,0,0,.46));z-index:4}
.tap-character-hint{left:39%;top:108px;transform:translateX(-50%);background:rgba(9,15,24,.48);border-color:rgba(255,255,255,.22)}

.left-dock{
  left:120px;top:126px;width:320px;gap:12px;z-index:7;
}
.dock-card{
  min-height:108px;padding:16px 18px;border-radius:22px;
  background:linear-gradient(135deg,rgba(255,255,255,.18),rgba(255,255,255,.05)),rgba(13,21,34,.70);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(12px);
}
.story-card{
  background:
    linear-gradient(120deg,rgba(255,111,176,.24),rgba(255,255,255,.10),rgba(13,21,34,.72)),
    rgba(13,21,34,.70);
}
.dock-card small{font-size:11px;color:var(--ui17-yellow)}
.dock-card b{font-size:21px}
.dock-card span{font-size:13px;color:#d7e7ff}

.academy-schedule{
  left:472px;right:182px;top:124px;z-index:7;
}
.academy-schedule div{
  min-height:100px;border-radius:22px;padding:14px 14px 12px;
  background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.05)),rgba(13,21,34,.66);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 16px 36px rgba(0,0,0,.24);
}
.academy-schedule small{font-size:10px;color:var(--ui17-cyan2)}
.academy-schedule b{font-size:19px}
.academy-schedule span{font-size:12px;color:#dfebff;line-height:1.45}

.right-command{
  top:144px;right:30px;width:220px;gap:14px;justify-items:end;z-index:8;
}
.command-tile,.command-main{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;color:#fff;
  border:1px solid rgba(255,255,255,.18);
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.04)),rgba(15,23,37,.72);
  backdrop-filter:blur(12px);
}
.command-tile{
  width:112px;height:112px;padding:0;border-radius:28px;
  transform:rotate(45deg);
}
.command-tile > *{transform:rotate(-45deg)}
.tile-kicker{font-size:10px;letter-spacing:.14em;color:#cdeaff;text-transform:uppercase}
.command-tile b{font-size:22px;line-height:1;margin-top:4px}
.command-tile small{font-size:11px;color:rgba(255,255,255,.82);margin-top:4px}
.command-story{margin-right:84px}
.command-gacha{margin-right:0}
.command-shop{margin-right:84px}
.command-party{margin-right:0}
.command-main.command-launch{
  width:160px;height:160px;border-radius:42px;margin-top:-8px;
  background:linear-gradient(135deg,rgba(102,212,255,.92),rgba(107,165,255,.84));
  color:#fff;font-size:34px;font-weight:1000;letter-spacing:.06em;
  box-shadow:0 22px 46px rgba(38,121,188,.42);
}
.command-main.command-launch::after{
  content:"TALK";position:absolute;bottom:18px;left:50%;transform:translateX(-50%);
  font-size:12px;letter-spacing:.22em;opacity:.88;
}
.command-story{background:linear-gradient(180deg,rgba(108,170,255,.34),rgba(255,255,255,.04)),rgba(15,23,37,.72)}
.command-gacha{background:linear-gradient(180deg,rgba(150,118,255,.36),rgba(255,255,255,.04)),rgba(15,23,37,.72)}
.command-shop{background:linear-gradient(180deg,rgba(255,202,111,.30),rgba(255,255,255,.04)),rgba(15,23,37,.72)}
.command-party{background:linear-gradient(180deg,rgba(255,111,176,.32),rgba(255,255,255,.04)),rgba(15,23,37,.72)}

.home-dialogue{
  left:260px;right:24px;bottom:92px;min-height:156px;padding:16px 18px 18px;
  grid-template-columns:1fr auto;align-items:center;
  background:linear-gradient(180deg,rgba(7,12,20,.82),rgba(10,16,28,.90));
  border:1px solid rgba(255,255,255,.18);
  border-radius:28px;
}
.home-dialogue::before{
  content:"";position:absolute;left:116px;top:-14px;width:26px;height:26px;
  background:linear-gradient(135deg,rgba(11,18,30,.95),rgba(7,12,20,.82));
  border-left:1px solid rgba(255,255,255,.16);border-top:1px solid rgba(255,255,255,.16);
  transform:rotate(45deg);
}
.dialogue-header{position:absolute;left:18px;right:18px;top:10px;display:flex;justify-content:space-between;align-items:center}
.dialogue-chip,.dialogue-bond{
  display:inline-flex;align-items:center;justify-content:center;height:28px;padding:0 12px;border-radius:999px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.10);font-size:11px;font-weight:900;letter-spacing:.08em;color:#dce8ff
}
.dialogue-bond{color:#ffbdd8}
.speaker-line{padding-top:26px;padding-right:16px}
.speaker-line b{font-size:16px;color:#ffecaf;letter-spacing:.03em}
.speaker-line span{font-size:20px;line-height:1.72;color:#ffffff}
.home-talk-choices{width:170px;gap:10px}
.home-talk-choices button{
  padding:11px 10px;border-radius:14px;
  background:linear-gradient(180deg,rgba(109,166,255,.28),rgba(255,255,255,.04)),rgba(20,29,45,.82);
  border-color:rgba(255,255,255,.14)
}
.notice-strip{
  left:132px;right:28px;bottom:24px;height:46px;padding:0 16px;
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.04)),rgba(10,16,28,.72);
  border:1px solid rgba(255,255,255,.15);
}
.notice-strip span{color:#ffd670}
.notice-strip b{font-size:14px}
.notice-strip em{font-size:12px;color:#dce8ff}

.story-screen{background:#09111d}
.story-bg{inset:72px 0 calc(78px + var(--safe-bottom)) 0}
.story-bg:after{background:linear-gradient(180deg,rgba(4,7,12,.10),rgba(4,7,12,.38) 45%,rgba(4,7,12,.84))}
.story-home,.story-skip{
  top:88px;border-radius:999px;padding:10px 16px;
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.05)),rgba(10,16,28,.76);
}
.chapter-map{top:88px;right:18px;width:280px;gap:10px}
.chapter-node{border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.04)),rgba(8,12,20,.68);font-size:12px;padding:12px 14px}
.chapter-node.active{background:linear-gradient(180deg,rgba(106,164,255,.32),rgba(255,255,255,.06)),rgba(8,12,20,.70);border-color:rgba(117,191,255,.55)}
.actor-stage{inset:92px 0 calc(264px + var(--safe-bottom)) 0}
.actor-card{width:min(400px,32vw)}
.actor-card.focus{filter:drop-shadow(0 40px 76px rgba(0,0,0,.78)) brightness(1.1) saturate(1.08)}
.actor-card.dim{opacity:.36;filter:drop-shadow(0 28px 56px rgba(0,0,0,.56)) brightness(.50) saturate(.72)}
.actor-label{bottom:16px;border-radius:18px;background:rgba(10,16,28,.74)}
.novel-box{
  left:20px;right:20px;bottom:calc(92px + var(--safe-bottom));min-height:206px;padding:18px 22px;
  border-radius:30px;background:linear-gradient(180deg,rgba(8,12,20,.82),rgba(8,12,20,.92));border:1px solid rgba(255,255,255,.18);
}
.chapter{display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 12px;border-radius:999px;background:rgba(255,255,255,.07);color:#ffe391;font-size:11px;font-weight:900}
.speaker{display:inline-flex;align-items:center;min-height:38px;padding:0 12px;margin-top:10px;border-radius:999px;background:rgba(103,213,255,.14);border:1px solid rgba(103,213,255,.18);font-size:18px}
.novel-text{font-size:20px;line-height:1.85;max-height:30vh;margin-top:10px;color:#fff}
.tap-help{margin-top:10px}

.bottom-nav{
  padding:10px 10px calc(10px + var(--safe-bottom));gap:10px;
  background:linear-gradient(180deg,rgba(11,17,29,.88),rgba(11,17,29,.96));
  border-top:1px solid rgba(255,255,255,.10);
  box-shadow:0 -12px 24px rgba(0,0,0,.24);
}
.bottom-nav button{
  min-height:58px;border-radius:18px;padding:8px 4px;display:grid;gap:4px;justify-items:center;align-content:center;
  background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.04)),rgba(12,20,35,.84);
}
.bottom-nav .nav-ico{font-size:18px;line-height:1;color:#a6dbff}
.bottom-nav button span:last-child{font-size:11px;letter-spacing:.03em}
.bottom-nav button.active{background:linear-gradient(180deg,rgba(106,164,255,.66),rgba(85,60,197,.92));border-color:rgba(255,255,255,.28)}
.bottom-nav button.active .nav-ico{color:#fff}

@media(max-width:1100px){
  .promo-banner{left:118px;right:18px;height:78px}
  .promo-copy b{font-size:22px}
  #homeActor{left:44%;height:76vh}
  .academy-schedule{left:390px;right:178px}
  .left-dock{left:108px;width:260px}
  .right-command{width:198px}
  .command-tile{width:100px;height:100px}
  .command-main.command-launch{width:148px;height:148px;font-size:30px}
  .home-dialogue{left:190px}
}
@media(max-width:900px){
  .game-hud{height:auto;min-height:72px;align-items:flex-start;flex-direction:column}
  .screen{padding-top:102px}
  .home-screen.active{padding-top:96px}
  .lobby{min-height:calc(100vh - 96px - 86px)}
  .utility-rail{top:102px;left:12px;grid-template-columns:repeat(5,1fr);width:calc(100vw - 24px)}
  .rail-btn{width:auto;min-height:62px;border-radius:18px}
  .promo-banner{left:12px;right:12px;top:182px;height:auto;min-height:72px;padding:12px 14px}
  .promo-copy b{font-size:20px}
  .left-dock{left:12px;right:12px;top:272px;width:auto;grid-template-columns:1fr}
  .academy-schedule{left:12px;right:12px;top:602px;grid-template-columns:1fr}
  .academy-schedule div{min-height:78px}
  #homeActor{left:66%;top:260px;height:52vh;max-height:none;opacity:.98}
  .tap-character-hint{left:66%;top:270px}
  .right-command{position:absolute;top:380px;right:12px;width:144px;gap:10px}
  .command-tile{width:74px;height:74px;border-radius:18px}
  .command-tile b{font-size:16px}.command-tile small{display:none}.tile-kicker{font-size:9px}
  .command-story,.command-shop{margin-right:58px}
  .command-main.command-launch{width:114px;height:114px;border-radius:28px;font-size:24px}
  .command-main.command-launch::after{font-size:10px;bottom:12px}
  .home-dialogue{left:12px;right:12px;bottom:88px;grid-template-columns:1fr;padding-bottom:16px}
  .home-dialogue::before{display:none}
  .home-talk-choices{width:auto;grid-template-columns:repeat(3,1fr)}
  .speaker-line span{font-size:17px}
  .notice-strip{display:none}
  .story-home,.story-skip{top:112px}
  .chapter-map{top:112px;right:12px;width:210px;max-height:25vh;overflow:auto}
  .actor-stage{inset:124px 0 calc(296px + var(--safe-bottom)) 0}
  .actor-card{width:54vw;min-width:180px}
  .actor-card.pos-left{left:18%}.actor-card.pos-right{left:82%}
  .novel-box{left:12px;right:12px;bottom:calc(92px + var(--safe-bottom));min-height:230px}
  .novel-text{font-size:17px;line-height:1.75;max-height:34vh}
}
@media(max-width:620px){
  .promo-banner{top:168px;border-radius:18px}
  .promo-tag{height:28px;padding:0 10px}
  .promo-copy b{font-size:18px}
  .left-dock{top:250px}
  #homeActor{left:73%;top:254px;height:48vh;opacity:.95}
  .tap-character-hint{left:73%}
  .right-command{top:350px;right:8px;width:120px}
  .command-tile{width:66px;height:66px}
  .command-story,.command-shop{margin-right:48px}
  .command-main.command-launch{width:100px;height:100px;font-size:22px}
  .academy-schedule{top:544px}
  .home-dialogue{min-height:180px}
  .bottom-nav{grid-template-columns:repeat(3,1fr)}
}

/* v018: home screen character-first layout. Keep the main character clearly visible like app-game home references. */
@media(min-width:901px){
  .utility-rail{left:18px;top:118px;z-index:9}
  .promo-banner{left:360px;right:220px;top:24px;height:82px;z-index:9}
  #homeActor{
    left:18%; top:112px; height:80vh; max-height:860px;
    z-index:6; filter:drop-shadow(0 28px 58px rgba(0,0,0,.44));
  }
  .tap-character-hint{left:19%;top:122px;z-index:8}
  .left-dock{
    left:360px; right:220px; width:auto; top:124px; z-index:8;
    grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px;
  }
  .dock-card{min-height:98px; padding:14px 16px; border-radius:20px}
  .dock-card b{font-size:18px}
  .dock-card span{font-size:12px;line-height:1.45}
  .academy-schedule{
    left:360px; right:220px; top:236px; z-index:8;
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .academy-schedule div{min-height:88px}
  .right-command{
    top:150px; right:18px; width:186px; z-index:9; gap:12px;
  }
  .command-tile{width:88px;height:88px;border-radius:22px}
  .command-tile b{font-size:18px}
  .command-story,.command-shop{margin-right:64px}
  .command-main.command-launch{width:132px;height:132px;border-radius:34px;font-size:28px}
  .command-main.command-launch::after{bottom:14px}
  .home-dialogue{
    left:330px; right:18px; bottom:92px; min-height:164px; z-index:10;
  }
  .speaker-line span{font-size:18px; line-height:1.7}
  .home-talk-choices{width:158px}
  .notice-strip{left:360px; right:18px; bottom:24px; z-index:9}
  .lobby::before{left:22%; top:54%; width:24vw; max-width:420px; min-width:250px;
    background:radial-gradient(circle,rgba(103,213,255,.14),rgba(143,108,255,.08) 44%,transparent 74%);
  }
}

@media(max-width:900px){
  #homeActor{
    left:26%; top:262px; height:54vh; z-index:6;
  }
  .tap-character-hint{left:26%; top:272px}
  .promo-banner{top:110px}
  .left-dock{top:200px}
  .academy-schedule{top:520px}
  .right-command{top:330px; right:12px}
  .home-dialogue{bottom:88px}
}

@media(max-width:620px){
  #homeActor{left:24%; top:244px; height:42vh}
  .tap-character-hint{left:24%; top:252px}
  .right-command{top:320px; right:8px}
  .left-dock{top:192px}
  .academy-schedule{top:500px}
  .home-dialogue{min-height:184px}
}

/* v019: simplify home UI, preserve character space, remove clutter and overlap */
/* hide unused lobby hint/chips */
.tap-character-hint,.dialogue-header,.dialogue-chip,.dialogue-bond{display:none!important}

@media(min-width:901px){
  /* character first */
  #homeActor{
    left:23%;
    top:98px;
    height:84vh;
    max-height:900px;
    z-index:6;
    filter:drop-shadow(0 22px 44px rgba(0,0,0,.38));
  }

  /* keep the side utilities minimal */
  .utility-rail{
    left:18px;
    top:140px;
    gap:12px;
  }
  .rail-btn{
    width:76px;
    min-height:66px;
    border-radius:18px;
  }

  /* smaller, simpler top banner */
  .promo-banner{
    left:390px;
    right:190px;
    top:22px;
    height:72px;
    border-radius:20px;
    padding:12px 16px;
  }
  .promo-copy b{font-size:22px}
  .promo-copy span{font-size:11px}

  /* use the empty area to the right of the character, but don't crowd it */
  .left-dock{
    left:390px;
    right:220px;
    width:auto;
    top:116px;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
  }
  .dock-card{
    min-height:92px;
    padding:14px 16px;
    border-radius:18px;
    box-shadow:0 12px 28px rgba(0,0,0,.22);
  }
  .dock-card b{font-size:17px}
  .dock-card span{font-size:12px;line-height:1.4}

  .academy-schedule{
    left:390px;
    right:220px;
    top:220px;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
  }
  .academy-schedule div{
    min-height:82px;
    border-radius:18px;
    padding:12px 14px;
  }
  .academy-schedule b{font-size:18px}
  .academy-schedule span{font-size:12px;line-height:1.4}

  /* right command column should float clear of the dialogue box */
  .right-command{
    top:146px;
    right:18px;
    width:168px;
    gap:10px;
    z-index:8;
  }
  .command-tile{
    width:82px;
    height:82px;
    border-radius:20px;
  }
  .command-tile b{font-size:17px}
  .command-story,.command-shop{margin-right:58px}
  .command-main.command-launch{
    width:118px;
    height:118px;
    border-radius:28px;
    font-size:24px;
    margin-top:0;
  }
  .command-main.command-launch::after{display:none}

  /* dialogue placed lower and clear of the right UI */
  .home-dialogue{
    left:360px;
    right:18px;
    bottom:102px;
    min-height:126px;
    padding:16px 16px 16px;
    grid-template-columns:1fr auto;
    align-items:center;
    border-radius:22px;
    z-index:10;
  }
  .home-dialogue::before{display:none}
  .speaker-line{
    padding-top:0;
    padding-right:16px;
  }
  .speaker-line b{
    font-size:15px;
    margin-bottom:6px;
  }
  .speaker-line span{
    font-size:18px;
    line-height:1.65;
  }
  .home-talk-choices{
    width:148px;
    gap:8px;
  }
  .home-talk-choices button{
    padding:10px 8px;
    border-radius:12px;
    font-size:13px;
  }

  .notice-strip{
    left:390px;
    right:18px;
    bottom:24px;
    height:44px;
  }
}

@media(max-width:900px){
  #homeActor{
    left:24%;
    top:232px;
    height:52vh;
  }
  .promo-banner{
    left:12px;
    right:12px;
    top:98px;
  }
  .left-dock{
    top:182px;
    left:12px;
    right:12px;
  }
  .academy-schedule{
    top:396px;
    left:12px;
    right:12px;
  }
  .right-command{
    top:520px;
    right:12px;
    width:136px;
  }
  .command-tile{
    width:72px;
    height:72px;
  }
  .command-main.command-launch{
    width:104px;
    height:104px;
  }
  .home-dialogue{
    left:12px;
    right:12px;
    bottom:88px;
    min-height:150px;
    grid-template-columns:1fr;
  }
  .home-talk-choices{
    width:auto;
    grid-template-columns:repeat(3,1fr);
  }
}

@media(max-width:620px){
  #homeActor{
    left:22%;
    top:236px;
    height:38vh;
  }
  .academy-schedule{top:372px}
  .right-command{top:484px}
  .home-dialogue{
    min-height:172px;
  }
}

/* v020: character-first home remake. Reduce clutter, remove overlap, keep dialogue clear of diamond UI. */
@media(min-width:901px){
  /* bright, clean home composition */
  .lobby-bg{
    background:
      linear-gradient(90deg,rgba(7,12,20,.62) 0%,rgba(7,12,20,.18) 24%,rgba(7,12,20,.08) 42%,rgba(7,12,20,.20) 68%,rgba(7,12,20,.55) 100%),
      linear-gradient(180deg,rgba(255,255,255,.10),rgba(0,0,0,.12)),
      url("assets/bg/academy.jpg?v=045-vn-transition") center/cover;
  }
  .lobby::before{
    left:24%;
    top:56%;
    width:28vw;
    max-width:430px;
    min-width:260px;
    background:radial-gradient(circle,rgba(103,213,255,.10),rgba(143,108,255,.06) 44%,transparent 76%);
  }

  /* main actor stays large with visible side space */
  #homeActor{
    left:23.5%;
    top:92px;
    height:85vh;
    max-height:920px;
    z-index:6;
    filter:drop-shadow(0 18px 36px rgba(0,0,0,.34));
  }

  /* keep one slim utility rail on the far left */
  .utility-rail{
    left:18px;
    top:148px;
    gap:12px;
    z-index:8;
  }
  .rail-btn{width:74px;min-height:64px;border-radius:18px}

  /* top banner stays, but less tall */
  .promo-banner{
    left:420px;
    right:188px;
    top:20px;
    height:68px;
    padding:10px 16px;
    border-radius:18px;
    z-index:8;
  }
  .promo-copy b{font-size:21px}
  .promo-copy span{font-size:11px}

  /* keep only one slim row of key entry cards */
  .left-dock{
    left:420px;
    right:188px;
    top:104px;
    width:auto;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
    z-index:8;
  }
  .dock-card{
    min-height:80px;
    padding:12px 14px;
    border-radius:18px;
    box-shadow:0 10px 22px rgba(0,0,0,.18);
  }
  .dock-card b{font-size:17px}
  .dock-card span{font-size:12px;line-height:1.35}

  /* second row was clutter: hide it */
  .academy-schedule{display:none!important}

  /* right diamonds stay as the main action group but smaller and farther right */
  .right-command{
    top:170px;
    right:18px;
    width:164px;
    gap:12px;
    z-index:8;
  }
  .command-tile{width:80px;height:80px;border-radius:18px}
  .command-tile b{font-size:16px}
  .command-tile small{display:none}
  .tile-kicker{font-size:9px}
  .command-story,.command-shop{margin-right:56px}
  .command-main.command-launch{
    width:112px;
    height:112px;
    border-radius:26px;
    font-size:23px;
    margin-top:0;
  }
  .command-main.command-launch::after{display:none}

  /* dialogue becomes a light, low-profile interaction strip and never touches the diamonds */
  .home-dialogue{
    left:408px;
    right:212px;
    bottom:104px;
    min-height:112px;
    padding:14px 16px;
    display:grid;
    grid-template-columns:1fr;
    align-items:start;
    gap:10px;
    border-radius:18px;
    background:linear-gradient(180deg,rgba(7,12,20,.80),rgba(8,13,22,.88));
    box-shadow:0 18px 36px rgba(0,0,0,.28);
    z-index:10;
  }
  .home-dialogue::before{display:none}
  .speaker-line{padding:0}
  .speaker-line b{font-size:14px;margin-bottom:6px}
  .speaker-line span{font-size:17px;line-height:1.6}
  .home-talk-choices{
    width:auto;
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    justify-content:flex-start;
  }
  .home-talk-choices button{
    min-width:92px;
    padding:8px 12px;
    border-radius:999px;
    font-size:12px;
    background:linear-gradient(180deg,rgba(109,166,255,.22),rgba(255,255,255,.04)),rgba(20,29,45,.74);
  }

  /* notice bar sits below and stays out of the dialogue space */
  .notice-strip{
    left:420px;
    right:18px;
    bottom:24px;
    height:42px;
    z-index:9;
  }

  /* remove visual pressure from bottom nav */
  .bottom-nav button{min-height:54px}
}

@media(max-width:900px){
  .promo-banner{top:98px;left:12px;right:12px}
  .left-dock{top:180px;left:12px;right:12px}
  .academy-schedule{display:none!important}
  #homeActor{left:24%;top:218px;height:51vh}
  .right-command{top:346px;right:12px;width:132px;gap:10px}
  .command-tile{width:70px;height:70px}
  .command-main.command-launch{width:100px;height:100px}
  .home-dialogue{
    left:12px;
    right:156px;
    bottom:88px;
    min-height:126px;
    display:grid;
    grid-template-columns:1fr;
  }
  .home-talk-choices{display:flex;flex-wrap:wrap;width:auto;gap:8px}
  .home-talk-choices button{min-width:82px;padding:8px 10px;border-radius:999px}
  .notice-strip{left:12px;right:12px;bottom:24px}
}

@media(max-width:620px){
  .promo-banner{top:92px}
  .left-dock{top:172px;grid-template-columns:1fr}
  #homeActor{left:22%;top:266px;height:34vh}
  .right-command{top:444px;right:8px;width:116px}
  .command-tile{width:62px;height:62px}
  .command-main.command-launch{width:92px;height:92px;font-size:20px}
  .home-dialogue{left:12px;right:12px;bottom:86px;min-height:150px}
  .notice-strip{display:none}
}


/* v023: apply generated wide fantasy background to the home screen */
.lobby-bg{
  background:
    linear-gradient(90deg,rgba(10,16,28,.26) 0%,rgba(10,16,28,.08) 22%,rgba(10,16,28,.04) 46%,rgba(10,16,28,.10) 72%,rgba(10,16,28,.22) 100%),
    linear-gradient(180deg,rgba(255,255,255,.02),rgba(0,0,0,.04)),
    url("assets/bg/home-fantasy-courtyard-pc.png?v=045-vn-transition") center/cover !important;
  filter:saturate(1.02) brightness(1.02);
}
.lobby-bg::after{
  background:
    radial-gradient(circle at 58% 34%,rgba(255,255,255,.10),transparent 24%),
    radial-gradient(circle at 38% 72%,rgba(103,213,255,.10),transparent 18%),
    linear-gradient(180deg,transparent 0%,rgba(0,0,0,.02) 65%,rgba(0,0,0,.16) 100%);
}


/* v024: brighten home and prevent character crop from feeling cut off */
.lobby{
  background:#dbeeff;
}
.lobby-vignette{
  background:linear-gradient(180deg,rgba(255,255,255,.06),transparent 26%),radial-gradient(circle at 50% 115%,rgba(255,255,255,0),rgba(255,255,255,.03) 58%,rgba(7,12,20,.10) 100%) !important;
}
.lobby-bg{
  background:
    linear-gradient(90deg,rgba(255,255,255,.05) 0%,rgba(255,255,255,.01) 20%,rgba(255,255,255,0) 45%,rgba(255,255,255,.02) 70%,rgba(10,16,28,.08) 100%),
    linear-gradient(180deg,rgba(255,255,255,.00),rgba(255,255,255,.02)),
    url("assets/bg/home-fantasy-courtyard-pc.png?v=045-vn-transition") center/cover !important;
  filter:saturate(1.06) brightness(1.13);
}
.lobby-bg::after{
  background:
    radial-gradient(circle at 55% 32%,rgba(255,255,255,.18),transparent 26%),
    radial-gradient(circle at 38% 72%,rgba(103,213,255,.08),transparent 18%),
    linear-gradient(180deg,transparent 0%,rgba(255,255,255,.00) 72%,rgba(10,16,28,.06) 100%) !important;
}
@media(min-width:901px){
  #homeActor{
    top:84px;
    height:86vh;
    left:24%;
    filter:drop-shadow(0 18px 34px rgba(0,0,0,.24));
  }
  .promo-banner{
    background:linear-gradient(120deg,rgba(255,104,153,.88),rgba(132,102,255,.82) 42%,rgba(84,108,220,.78) 100%),radial-gradient(circle at 86% 24%,rgba(255,255,255,.36),transparent 18%);
  }
  .rail-btn,.dock-card,.home-dialogue,.notice-strip,.command-tile,.command-main,.bottom-nav button{
    border-color:rgba(255,255,255,.24);
    box-shadow:0 10px 24px rgba(24,42,77,.12);
  }
  .rail-btn,.dock-card,.home-dialogue,.notice-strip,.bottom-nav button{
    background:linear-gradient(180deg,rgba(255,255,255,.46),rgba(255,255,255,.18)),rgba(28,53,96,.28);
    backdrop-filter:blur(10px);
  }
  .home-dialogue{
    background:linear-gradient(180deg,rgba(16,34,64,.62),rgba(16,34,64,.74));
  }
  .speaker-line span{color:#f6fbff}
  .speaker-line b{color:#fff0ac}
  .command-tile,.command-main{
    background:linear-gradient(180deg,rgba(255,255,255,.30),rgba(255,255,255,.10)),rgba(26,45,84,.38);
    backdrop-filter:blur(10px);
  }
  .resource-row span{
    background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.06));
  }
  .game-hud{
    background:linear-gradient(180deg,rgba(10,18,34,.88),rgba(10,18,34,.70));
  }
}
@media(max-width:900px){
  #homeActor{top:210px;height:53vh;left:25%;filter:drop-shadow(0 16px 30px rgba(0,0,0,.22));}
  .rail-btn,.dock-card,.home-dialogue,.notice-strip,.bottom-nav button{
    background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,.18)),rgba(28,53,96,.24);
  }
}


/* v025: UI density + home dialogue position + gacha prototype */
@media(min-width:901px){
  .home-dialogue{
    left:330px !important;
    right:260px !important;
    bottom:104px !important;
    background:linear-gradient(180deg,rgba(18,34,62,.86),rgba(12,22,42,.92)) !important;
    border-color:rgba(255,255,255,.36) !important;
    box-shadow:0 18px 42px rgba(13,31,64,.32) !important;
  }
  .speaker-line span{color:#ffffff !important;text-shadow:0 1px 2px rgba(0,0,0,.22)}
  .speaker-line b{color:#fff2a7 !important}
  .home-talk-choices button{
    background:linear-gradient(180deg,rgba(45,88,150,.88),rgba(24,47,86,.92)) !important;
    border-color:rgba(255,255,255,.32) !important;
  }
  .dock-card,
  .rail-btn,
  .notice-strip,
  .bottom-nav button{
    background:linear-gradient(180deg,rgba(40,72,118,.72),rgba(22,42,76,.82)) !important;
    border-color:rgba(255,255,255,.30) !important;
    color:#fff !important;
  }
  .command-tile,
  .command-main{
    background:linear-gradient(180deg,rgba(48,82,140,.78),rgba(24,46,88,.88)) !important;
    border-color:rgba(255,255,255,.30) !important;
  }
  .promo-banner{
    box-shadow:0 18px 36px rgba(42,65,132,.28) !important;
  }
}

/* Gacha prototype */
.gacha-screen{
  max-width:1180px;
}
.gacha-proto{
  position:relative;
  display:grid;
  grid-template-columns:64px 1fr 64px;
  grid-template-areas:
    "prev banner next"
    "buttons buttons buttons";
  gap:14px;
  align-items:center;
  overflow:hidden;
  background:
    radial-gradient(circle at 70% 24%,rgba(255,255,255,.18),transparent 24%),
    linear-gradient(135deg,rgba(82,116,214,.92),rgba(122,74,210,.82) 45%,rgba(24,34,58,.96)) !important;
}
.gacha-banner-body{grid-area:banner;min-height:160px;display:flex;flex-direction:column;justify-content:center}
.gacha-arrow{
  width:58px;height:86px;border-radius:18px;font-size:26px;
  background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.06)),rgba(15,25,45,.62);
}
#gachaPrev{grid-area:prev}
#gachaNext{grid-area:next}
.gacha-proto .gacha-buttons{grid-area:buttons;display:flex;justify-content:center;gap:12px}
.gacha-proto .gacha-buttons button{min-width:160px}
.gacha-rates{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px}
.gacha-rates span,.gacha-rates em{
  display:inline-flex;align-items:center;gap:4px;
  min-height:28px;padding:0 10px;border-radius:999px;
  background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.18);
  color:#eaf4ff;font-size:12px;font-style:normal;
}
.gacha-rates b{color:#ffe08b}
.gacha-animation{
  position:relative;
  min-height:210px;
  margin:14px 0;
  border:1px solid rgba(255,255,255,.14);
  border-radius:24px;
  background:
    radial-gradient(circle at 50% 50%,rgba(115,202,255,.18),transparent 28%),
    linear-gradient(180deg,rgba(17,27,48,.92),rgba(7,12,22,.96));
  overflow:hidden;
  display:grid;
  place-items:center;
  box-shadow:0 20px 48px rgba(0,0,0,.24);
}
.summon-circle{
  position:absolute;
  width:160px;height:160px;border-radius:50%;
  border:2px solid rgba(124,203,255,.38);
  box-shadow:0 0 50px rgba(112,197,255,.18), inset 0 0 35px rgba(124,203,255,.12);
}
.summon-circle i{
  position:absolute;inset:18px;border-radius:50%;
  border:1px dashed rgba(255,255,255,.30);
}
.summon-circle i:nth-child(2){inset:42px;transform:rotate(30deg)}
.summon-circle i:nth-child(3){inset:66px;background:rgba(255,255,255,.10);border-style:solid}
.summon-message{
  position:relative;z-index:2;
  padding:10px 16px;border-radius:999px;
  background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.16);
  color:#fff;font-weight:900;letter-spacing:.04em;
}
.gacha-animation.charging .summon-circle{
  animation:gachaSpin .8s linear infinite;
  border-color:rgba(124,203,255,.86);
}
.gacha-animation.burst::after{
  content:"";position:absolute;inset:-20%;
  background:radial-gradient(circle,rgba(255,255,255,.92),rgba(146,215,255,.24) 28%,transparent 56%);
  animation:gachaBurst .55s ease-out both;
}
.gacha-animation.reveal{
  background:
    radial-gradient(circle at 50% 48%,rgba(255,255,255,.62),transparent 16%),
    radial-gradient(circle at 50% 50%,rgba(146,215,255,.34),transparent 38%),
    linear-gradient(180deg,rgba(20,35,70,.96),rgba(8,12,24,.98));
}
.gacha-animation.reveal.rarity-SSR,.gacha-animation.reveal.rarity-GLITCH{
  background:
    radial-gradient(circle at 50% 48%,rgba(255,255,255,.76),transparent 18%),
    radial-gradient(circle at 50% 50%,rgba(255,209,108,.40),transparent 36%),
    linear-gradient(180deg,rgba(74,47,95,.98),rgba(11,9,25,.98));
}
@keyframes gachaSpin{to{transform:rotate(360deg)}}
@keyframes gachaBurst{from{opacity:0;transform:scale(.35)} 45%{opacity:1} to{opacity:0;transform:scale(1.25)}}
.gacha-results{align-items:start}
.gacha-card-pop{animation:gachaCardPop .34s ease-out both}
@keyframes gachaCardPop{from{opacity:0;transform:translateY(16px) scale(.92)}to{opacity:1;transform:translateY(0) scale(1)}}
.gacha-empty{
  grid-column:1/-1;
  border:1px solid rgba(255,255,255,.14);
  border-radius:18px;
  padding:18px;
  background:rgba(255,255,255,.06);
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
}
.gacha-empty b{font-size:18px}
.gacha-empty span{color:var(--muted)}

/* Shop prototype */
.shop-subtitle{margin:22px 0 10px;font-size:20px}
.stone-pack-list .stone-pack{
  background:
    radial-gradient(circle at 84% 18%,rgba(117,209,255,.20),transparent 30%),
    linear-gradient(180deg,rgba(42,84,144,.30),rgba(255,255,255,.04)) !important;
  border-color:rgba(117,209,255,.28);
}
.shop-item button:not(:disabled){
  background:linear-gradient(180deg,#69bfff,#3277de);
  border-color:rgba(255,255,255,.38);
}
@media(max-width:900px){
  .gacha-proto{grid-template-columns:46px 1fr 46px}
  .gacha-arrow{width:44px;height:68px}
  .gacha-proto .gacha-buttons button{min-width:120px}
  .home-dialogue{right:142px !important;background:linear-gradient(180deg,rgba(18,34,62,.86),rgba(12,22,42,.92)) !important}
}
@media(max-width:620px){
  .home-dialogue{right:12px !important}
}


/* v026: fix home dialogue direction and sequential gacha animation */
@media(min-width:901px){
  /* コメントはキャラから離して右へ。右の菱形UIとは重ねない。 */
  .home-dialogue{
    left:560px !important;
    right:238px !important;
    bottom:104px !important;
    min-height:118px !important;
    background:linear-gradient(180deg,rgba(18,34,62,.90),rgba(12,22,42,.94)) !important;
  }
}
@media(max-width:1100px) and (min-width:901px){
  .home-dialogue{
    left:500px !important;
    right:210px !important;
  }
}

.gacha-animation.start-confirmed{
  background:
    radial-gradient(circle at 50% 48%,rgba(255,255,255,.92),transparent 18%),
    radial-gradient(circle at 50% 50%,rgba(255,205,82,.55),transparent 40%),
    linear-gradient(180deg,rgba(82,49,110,.98),rgba(12,11,28,.98));
}
.gacha-animation.start-confirmed .summon-circle{
  border-color:rgba(255,223,120,.95);
  box-shadow:0 0 80px rgba(255,210,86,.45), inset 0 0 45px rgba(255,230,140,.25);
  animation:gachaPulseGold .7s ease-in-out infinite alternate;
}
.gacha-animation.start-normal{
  background:
    radial-gradient(circle at 50% 50%,rgba(125,190,255,.18),transparent 30%),
    linear-gradient(180deg,rgba(17,27,48,.92),rgba(7,12,22,.96));
}
.gacha-animation.start-normal .summon-circle{
  opacity:.72;
  border-color:rgba(128,192,255,.42);
}
.gacha-animation.card-wait .summon-circle{
  animation:gachaSpin .9s linear infinite;
}
.gacha-animation.normal-reveal .summon-circle{
  border-color:rgba(140,200,255,.64);
  box-shadow:0 0 50px rgba(120,190,255,.25), inset 0 0 26px rgba(120,190,255,.18);
}
.gacha-animation.high-reveal .summon-circle,
.gacha-animation.surprise-flash .summon-circle{
  border-color:rgba(255,222,116,.95);
  box-shadow:0 0 95px rgba(255,211,91,.56), inset 0 0 55px rgba(255,230,148,.32);
}
.gacha-animation.surprise-flash::after{
  content:"";
  position:absolute;
  inset:-26%;
  background:
    radial-gradient(circle,rgba(255,255,255,.98),rgba(255,226,126,.72) 18%,rgba(117,196,255,.24) 36%,transparent 60%);
  animation:surpriseFlash .76s ease-out both;
}
@keyframes surpriseFlash{
  from{opacity:0;transform:scale(.2) rotate(0deg)}
  38%{opacity:1}
  to{opacity:0;transform:scale(1.38) rotate(12deg)}
}
@keyframes gachaPulseGold{
  from{transform:scale(.98);filter:brightness(1)}
  to{transform:scale(1.04);filter:brightness(1.25)}
}

.single-card-reveal{
  position:relative;
  z-index:3;
  margin-top:64px;
  min-height:230px;
  display:grid;
  place-items:center;
}
.card-back{
  width:150px;
  height:220px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.34);
  background:
    radial-gradient(circle at 50% 42%,rgba(255,255,255,.24),transparent 28%),
    linear-gradient(135deg,rgba(84,120,205,.94),rgba(35,48,92,.98));
  box-shadow:0 18px 45px rgba(0,0,0,.38), inset 0 0 30px rgba(255,255,255,.08);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  color:#fff;
  font-weight:1000;
  letter-spacing:.08em;
}
.card-back span{
  display:inline-flex;
  min-height:30px;
  align-items:center;
  padding:0 12px;
  border-radius:999px;
  background:rgba(0,0,0,.24);
  font-size:13px;
}
.card-back b{
  font-size:18px;
}
.single-reveal-card{
  position:relative;
  transform-origin:center;
  animation:singleCardIn .28s ease-out both;
}
.single-reveal-card.high{
  filter:drop-shadow(0 0 26px rgba(255,223,107,.50));
}
.single-reveal-card.surprise{
  animation:singleCardSurprise .48s ease-out both;
}
.single-count{
  position:absolute;
  z-index:5;
  top:-14px;
  left:50%;
  transform:translateX(-50%);
  min-height:28px;
  padding:0 12px;
  border-radius:999px;
  background:rgba(0,0,0,.54);
  border:1px solid rgba(255,255,255,.25);
  color:#fff;
  font-size:12px;
  font-weight:900;
}
@keyframes singleCardIn{
  from{opacity:0;transform:translateY(18px) rotateY(70deg) scale(.92)}
  to{opacity:1;transform:translateY(0) rotateY(0) scale(1)}
}
@keyframes singleCardSurprise{
  0%{opacity:0;transform:scale(.78) rotate(-3deg)}
  48%{opacity:1;transform:scale(1.16) rotate(2deg)}
  100%{opacity:1;transform:scale(1) rotate(0)}
}
.gacha-results{
  margin-top:14px;
}
.gacha-results .gacha-card-pop{
  min-height:230px;
}
@media(max-width:900px){
  .single-card-reveal{min-height:210px;margin-top:54px}
  .card-back{width:132px;height:196px}
}


/* v027: comment spacing correction + separate gacha overlay */
@media(min-width:901px){
  /* コメント欄はキャラから少しだけ離す。遠くに逃がしすぎない。 */
  .home-dialogue{
    left:455px !important;
    right:230px !important;
    bottom:104px !important;
    min-height:138px !important;
    padding:16px 18px !important;
  }
  .speaker-line span{
    font-size:18px !important;
    line-height:1.7 !important;
  }
}
@media(max-width:1100px) and (min-width:901px){
  .home-dialogue{
    left:430px !important;
    right:205px !important;
  }
}

/* 召喚選択画面は選択・結果表示だけ。常駐演出枠は置かない。 */
.gacha-proto{
  margin-bottom:16px;
}
.gacha-results{
  margin-top:0;
}

/* Pull時だけ出る別枠演出レイヤー */
.gacha-overlay{
  position:fixed;
  inset:0;
  z-index:200;
  display:none;
  place-items:center;
  padding:24px;
}
.gacha-overlay.active{
  display:grid;
}
.gacha-overlay-bg{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% 42%,rgba(96,150,255,.24),transparent 30%),
    linear-gradient(180deg,rgba(3,6,12,.78),rgba(3,6,12,.92));
  backdrop-filter:blur(8px);
}
.gacha-overlay-stage{
  position:relative;
  z-index:2;
  width:min(900px,92vw);
  min-height:min(620px,82vh);
  display:grid;
  place-items:center;
}
.gacha-overlay-close{
  position:absolute;
  z-index:5;
  top:0;
  right:0;
  min-width:88px;
  border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.06)),rgba(20,30,48,.76);
}
.gacha-overlay .gacha-animation{
  width:100%;
  min-height:min(560px,76vh);
  margin:0;
  border-radius:30px;
  background:
    radial-gradient(circle at 50% 50%,rgba(115,202,255,.18),transparent 28%),
    linear-gradient(180deg,rgba(17,27,48,.92),rgba(7,12,22,.96));
}
.gacha-overlay .summon-circle{
  width:210px;
  height:210px;
}
.gacha-overlay .single-card-reveal{
  margin-top:88px;
}
.gacha-overlay .summon-message{
  position:absolute;
  top:34px;
  left:50%;
  transform:translateX(-50%);
}
@media(max-width:900px){
  .gacha-overlay-stage{
    width:96vw;
    min-height:78vh;
  }
  .gacha-overlay .gacha-animation{
    min-height:72vh;
  }
  .home-dialogue{
    right:142px !important;
  }
}
@media(max-width:620px){
  .home-dialogue{
    right:12px !important;
  }
}


/* v028: premium commercial-like gacha overlay */
.gacha-overlay.active .gacha-overlay-bg{
  background:
    radial-gradient(circle at 50% 42%,rgba(110,174,255,.34),transparent 31%),
    radial-gradient(circle at 72% 30%,rgba(183,128,255,.20),transparent 22%),
    linear-gradient(180deg,rgba(3,6,12,.82),rgba(3,6,12,.96));
}
.gacha-overlay-stage{
  perspective:1000px;
}
.gacha-overlay .gacha-animation{
  isolation:isolate;
  background:
    radial-gradient(circle at 50% 50%,rgba(115,202,255,.22),transparent 28%),
    radial-gradient(circle at 50% 68%,rgba(106,77,255,.18),transparent 34%),
    linear-gradient(180deg,rgba(17,27,48,.94),rgba(7,12,22,.98));
  box-shadow:
    0 38px 120px rgba(0,0,0,.56),
    inset 0 0 80px rgba(100,180,255,.10);
}
.premium-sky,
.premium-rays,
.premium-particles,
.premium-gate,
.premium-flash{
  position:absolute;
  inset:0;
  pointer-events:none;
}
.premium-sky{
  background:
    radial-gradient(circle at 50% 48%,rgba(155,226,255,.22),transparent 22%),
    radial-gradient(circle at 50% 92%,rgba(255,255,255,.08),transparent 32%);
  opacity:.8;
}
.premium-rays{
  z-index:1;
  overflow:hidden;
  opacity:.44;
}
.premium-rays i{
  position:absolute;
  left:50%;
  top:50%;
  width:7px;
  height:66vh;
  transform-origin:50% 0;
  background:linear-gradient(180deg,rgba(255,255,255,.90),rgba(125,214,255,.22),transparent);
  border-radius:999px;
  filter:blur(.4px);
}
.premium-rays i:nth-child(1){transform:rotate(18deg) translateY(-50%)}
.premium-rays i:nth-child(2){transform:rotate(78deg) translateY(-50%)}
.premium-rays i:nth-child(3){transform:rotate(138deg) translateY(-50%)}
.premium-rays i:nth-child(4){transform:rotate(218deg) translateY(-50%)}
.premium-particles{
  z-index:2;
  background-image:
    radial-gradient(circle,rgba(255,255,255,.95) 0 2px,transparent 3px),
    radial-gradient(circle,rgba(123,214,255,.78) 0 2px,transparent 3px),
    radial-gradient(circle,rgba(255,224,126,.74) 0 2px,transparent 3px);
  background-size:96px 96px,136px 136px,176px 176px;
  background-position:0 0,24px 58px,86px 12px;
  opacity:.45;
  animation:premiumParticles 5.5s linear infinite;
}
@keyframes premiumParticles{
  to{background-position:0 -180px,24px -122px,86px -168px}
}
.premium-gate{
  z-index:2;
  display:grid;
  place-items:center;
  transform:translateY(-6px);
}
.gate-ring{
  position:absolute;
  border-radius:50%;
  border:1px solid rgba(150,222,255,.42);
  box-shadow:
    0 0 36px rgba(123,210,255,.18),
    inset 0 0 24px rgba(123,210,255,.12);
}
.ring-a{width:330px;height:330px;border-width:2px;animation:gateSpinA 7s linear infinite}
.ring-b{width:250px;height:250px;border-style:dashed;animation:gateSpinB 5.2s linear infinite reverse}
.ring-c{width:170px;height:170px;border-color:rgba(255,255,255,.34);animation:gatePulse 1.8s ease-in-out infinite alternate}
.gate-core{
  width:84px;height:84px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.88),rgba(115,209,255,.30) 38%,transparent 70%);
  filter:blur(.2px);
}
@keyframes gateSpinA{to{transform:rotate(360deg)}}
@keyframes gateSpinB{to{transform:rotate(360deg)}}
@keyframes gatePulse{from{transform:scale(.94);opacity:.58}to{transform:scale(1.08);opacity:1}}
.premium-flash{
  z-index:8;
  opacity:0;
}
.gacha-animation.premium-start .premium-gate{
  animation:gateOpen 1.05s ease-out both;
}
@keyframes gateOpen{
  from{transform:translateY(-6px) scale(.62);opacity:.2;filter:blur(8px)}
  55%{opacity:1;filter:blur(0)}
  to{transform:translateY(-6px) scale(1);opacity:1}
}
.gacha-animation.premium-charge .premium-gate,
.gacha-animation.premium-card-wait .premium-gate{
  animation:gateVibrate .72s ease-in-out infinite alternate;
}
@keyframes gateVibrate{
  from{transform:translateY(-6px) scale(1)}
  to{transform:translateY(-10px) scale(1.025)}
}
.gacha-animation.premium-charge.confirmed .gate-ring,
.gacha-animation.start-confirmed .gate-ring{
  border-color:rgba(255,226,124,.88);
  box-shadow:
    0 0 58px rgba(255,210,86,.40),
    inset 0 0 34px rgba(255,230,148,.22);
}
.gacha-animation.start-confirmed .gate-core,
.gacha-animation.premium-charge.confirmed .gate-core{
  background:radial-gradient(circle,rgba(255,255,255,.96),rgba(255,217,92,.58) 36%,transparent 72%);
}
.gacha-animation.premium-surprise .premium-flash,
.gacha-animation.premium-high .premium-flash{
  opacity:1;
  background:
    radial-gradient(circle at 50% 48%,rgba(255,255,255,.98),rgba(255,226,126,.82) 15%,rgba(132,211,255,.35) 34%,transparent 58%);
  animation:premiumFlash 1.05s ease-out both;
}
.gacha-animation.rarity-GLITCH .premium-flash{
  background:
    radial-gradient(circle at 50% 48%,rgba(255,255,255,.98),rgba(207,126,255,.88) 15%,rgba(94,232,255,.38) 36%,transparent 60%);
}
@keyframes premiumFlash{
  from{opacity:0;transform:scale(.2) rotate(0)}
  35%{opacity:1}
  to{opacity:0;transform:scale(1.5) rotate(18deg)}
}
.gacha-animation.premium-surprise{
  animation:screenShake .42s ease-in-out 0s 2;
}
@keyframes screenShake{
  0%,100%{transform:translate(0,0)}
  20%{transform:translate(-4px,2px)}
  40%{transform:translate(4px,-2px)}
  60%{transform:translate(-2px,-3px)}
  80%{transform:translate(3px,2px)}
}
.gacha-overlay .summon-circle{
  z-index:3;
  background:
    radial-gradient(circle at 50% 50%,transparent 46%,rgba(111,206,255,.10) 48%,transparent 53%);
  box-shadow:
    0 0 70px rgba(111,206,255,.20),
    inset 0 0 40px rgba(111,206,255,.10);
}
.gacha-animation.premium-card-wait .summon-circle{
  animation:gachaSpin .65s linear infinite, gatePulse 1.1s ease-in-out infinite alternate;
}
.gacha-animation.premium-high .summon-circle,
.gacha-animation.premium-surprise .summon-circle{
  border-color:rgba(255,226,124,.96);
  box-shadow:
    0 0 100px rgba(255,213,90,.52),
    inset 0 0 60px rgba(255,230,148,.30);
}
.gacha-animation.rarity-GLITCH .summon-circle{
  border-color:rgba(219,128,255,.96);
  box-shadow:
    0 0 115px rgba(202,93,255,.58),
    inset 0 0 65px rgba(104,229,255,.32);
}
.gacha-overlay .summon-message{
  top:26px;
  min-width:310px;
  text-align:center;
  font-size:16px;
  background:linear-gradient(180deg,rgba(5,10,20,.68),rgba(5,10,20,.38));
  box-shadow:0 10px 30px rgba(0,0,0,.22);
}
.gacha-overlay .summon-message b{
  color:#ffe28f;
  text-shadow:0 0 12px rgba(255,212,90,.55);
}
.gacha-overlay .card-back{
  position:relative;
  width:174px;
  height:256px;
  border:1px solid rgba(255,255,255,.42);
  background:
    linear-gradient(135deg,rgba(255,255,255,.16),transparent 26%),
    radial-gradient(circle at 50% 38%,rgba(255,255,255,.28),transparent 28%),
    linear-gradient(135deg,rgba(80,126,222,.96),rgba(33,42,96,.98));
  box-shadow:
    0 26px 60px rgba(0,0,0,.48),
    0 0 42px rgba(113,196,255,.22),
    inset 0 0 34px rgba(255,255,255,.12);
  transform-style:preserve-3d;
  animation:cardBackFloat .82s ease-in-out infinite alternate;
}
.gacha-overlay .card-back::before{
  content:"";
  position:absolute;
  inset:14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.28);
  background:
    linear-gradient(45deg,transparent 42%,rgba(255,255,255,.30) 50%,transparent 58%),
    radial-gradient(circle at 50% 50%,rgba(255,255,255,.20),transparent 38%);
}
@keyframes cardBackFloat{
  from{transform:translateY(0) rotateY(-4deg)}
  to{transform:translateY(-9px) rotateY(4deg)}
}
.gacha-overlay .single-reveal-card{
  transform-style:preserve-3d;
}
.gacha-overlay .single-reveal-card .card{
  width:174px;
  min-height:256px;
  box-shadow:
    0 28px 68px rgba(0,0,0,.52),
    0 0 34px rgba(114,197,255,.18);
}
.gacha-overlay .single-reveal-card.high .card{
  box-shadow:
    0 30px 80px rgba(0,0,0,.56),
    0 0 48px rgba(255,222,112,.44),
    0 0 110px rgba(255,222,112,.18);
}
.gacha-overlay .single-reveal-card.surprise .card{
  box-shadow:
    0 34px 86px rgba(0,0,0,.56),
    0 0 62px rgba(255,245,180,.58),
    0 0 150px rgba(126,226,255,.25);
}
@keyframes singleCardIn{
  from{opacity:0;transform:translateY(24px) rotateY(82deg) scale(.84);filter:blur(4px)}
  58%{opacity:1;transform:translateY(-7px) rotateY(-8deg) scale(1.08);filter:blur(0)}
  to{opacity:1;transform:translateY(0) rotateY(0) scale(1)}
}
@keyframes singleCardSurprise{
  0%{opacity:0;transform:scale(.55) rotate(-7deg);filter:blur(8px)}
  32%{opacity:1;transform:scale(1.24) rotate(3deg);filter:blur(0) brightness(1.7)}
  66%{transform:scale(.96) rotate(-1deg);filter:brightness(1.2)}
  100%{opacity:1;transform:scale(1) rotate(0);filter:brightness(1)}
}
.gacha-animation.premium-sr .gate-ring{
  border-color:rgba(126,170,255,.72);
}
.gacha-animation.premium-end .premium-rays{
  opacity:.24;
}
@media(max-width:900px){
  .gacha-overlay .card-back,
  .gacha-overlay .single-reveal-card .card{
    width:148px;
    min-height:222px;
  }
  .ring-a{width:260px;height:260px}
  .ring-b{width:198px;height:198px}
  .ring-c{width:138px;height:138px}
  .gacha-overlay .summon-message{
    min-width:240px;
    font-size:14px;
  }
}


/* v029: dedicated mobile home layout fix. Prioritize character visibility. */
@media (max-width: 900px) {
  body { overflow-x:hidden; }
  .game-shell { min-height: 100vh; }
  .game-hud { height: 86px; padding: 10px 12px 8px; }
  .player-chip { transform: scale(.92); transform-origin:left center; }
  .resource-row { top: 14px; right: 10px; gap: 6px; }
  .resource-row span { min-width: 72px; height: 34px; font-size: 14px; }

  /* keep the actor readable */
  #homeActor {
    left: 42% !important;
    top: 156px !important;
    height: 48vh !important;
    max-height: none !important;
    opacity: 1 !important;
    filter: drop-shadow(0 14px 24px rgba(0,0,0,.22)) !important;
    z-index: 4 !important;
  }

  /* remove bulky info blocks that cover the character on mobile */
  .left-dock,
  .academy-schedule {
    display: none !important;
  }

  /* compact event banner */
  .promo-banner {
    left: 12px !important;
    right: 12px !important;
    top: 96px !important;
    height: 62px !important;
    border-radius: 18px !important;
    padding: 10px 12px !important;
    z-index: 8 !important;
  }
  .promo-copy b { font-size: 19px !important; }
  .promo-copy span { font-size: 10px !important; }

  /* utility shortcuts as one light row */
  .utility-rail {
    top: auto !important;
    bottom: 230px !important;
    left: 12px !important;
    width: auto !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    z-index: 8 !important;
  }
  .rail-btn {
    width: 58px !important;
    min-height: 52px !important;
    border-radius: 14px !important;
    padding: 8px 4px !important;
    font-size: 11px !important;
  }
  .rail-btn i, .rail-btn .nav-ico, .rail-btn .ico { font-size: 14px !important; }

  /* right action diamonds: keep but shrink and place below actor area */
  .right-command {
    top: 208px !important;
    right: 10px !important;
    width: 108px !important;
    gap: 8px !important;
    z-index: 7 !important;
  }
  .command-tile {
    width: 56px !important;
    height: 56px !important;
    border-radius: 14px !important;
  }
  .command-tile b { font-size: 12px !important; }
  .command-story, .command-shop { margin-right: 40px !important; }
  .command-main.command-launch {
    width: 84px !important;
    height: 84px !important;
    font-size: 18px !important;
    border-radius: 20px !important;
  }

  /* dialogue should not hide the character */
  .home-dialogue {
    left: 12px !important;
    right: 12px !important;
    bottom: 92px !important;
    min-height: 132px !important;
    padding: 14px 14px 16px !important;
    border-radius: 18px !important;
    grid-template-columns: 1fr !important;
    z-index: 9 !important;
  }
  .speaker-line b { font-size: 14px !important; margin-bottom: 6px !important; }
  .speaker-line span { font-size: 16px !important; line-height: 1.58 !important; }
  .home-talk-choices {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    width: auto !important;
  }
  .home-talk-choices button {
    min-width: 84px !important;
    padding: 8px 10px !important;
    font-size: 12px !important;
  }

  .notice-strip {
    left: 12px !important;
    right: 12px !important;
    bottom: 28px !important;
    height: 42px !important;
    z-index: 8 !important;
  }

  .bottom-nav {
    grid-template-columns: repeat(6,1fr) !important;
    gap: 8px !important;
    padding: 10px 10px calc(10px + env(safe-area-inset-bottom)) !important;
  }
  .bottom-nav button {
    min-height: 54px !important;
    border-radius: 16px !important;
    font-size: 11px !important;
  }
}

@media (max-width: 620px) {
  .game-hud { height: 82px; }
  .player-chip { transform: scale(.86); }
  .resource-row span { min-width: 64px; height: 32px; font-size: 13px; }
  .promo-banner { top: 90px !important; height: 58px !important; }
  .promo-copy b { font-size: 17px !important; }

  #homeActor {
    left: 46% !important;
    top: 150px !important;
    height: 43vh !important;
  }

  .right-command {
    top: 198px !important;
    right: 8px !important;
    width: 94px !important;
  }
  .command-tile { width: 50px !important; height: 50px !important; }
  .command-tile b { font-size: 11px !important; }
  .command-story, .command-shop { margin-right: 32px !important; }
  .command-main.command-launch { width: 76px !important; height: 76px !important; font-size: 16px !important; }

  .utility-rail { bottom: 224px !important; gap: 6px !important; }
  .rail-btn { width: 52px !important; min-height: 48px !important; font-size: 10px !important; }

  .home-dialogue {
    bottom: 88px !important;
    min-height: 138px !important;
    padding: 12px 12px 14px !important;
  }
  .speaker-line span { font-size: 15px !important; }
  .home-talk-choices button { min-width: 76px !important; font-size: 11px !important; }

  .notice-strip { bottom: 24px !important; height: 40px !important; }

  .bottom-nav { grid-template-columns: repeat(3,1fr) !important; }
}


/* v030: clean dedicated mobile home layout. Hide clutter, keep character visible. */
@media (max-width: 900px) {
  /* reset home to a much simpler mobile composition */
  #screenHome .utility-rail,
  #screenHome .left-dock,
  #screenHome .academy-schedule,
  #screenHome .right-command .command-tile {
    display: none !important;
  }

  #screenHome .lobby {
    overflow: hidden !important;
    min-height: calc(100vh - 86px) !important;
  }

  #screenHome .promo-banner {
    top: 94px !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    height: 64px !important;
    padding: 10px 12px !important;
    border-radius: 18px !important;
    z-index: 10 !important;
  }
  #screenHome .promo-copy small { font-size: 10px !important; }
  #screenHome .promo-copy b { font-size: 18px !important; line-height: 1.1 !important; }
  #screenHome .promo-copy span { font-size: 10px !important; line-height: 1.2 !important; }

  /* make the character the main visual */
  #screenHome #homeActor {
    left: 50% !important;
    top: 150px !important;
    transform: translateX(-50%) !important;
    height: 53vh !important;
    width: auto !important;
    opacity: 1 !important;
    z-index: 4 !important;
    filter: drop-shadow(0 16px 28px rgba(0,0,0,.26)) !important;
  }

  /* keep only the talk button from the right command area */
  #screenHome .right-command {
    position: absolute !important;
    top: auto !important;
    right: 12px !important;
    bottom: 250px !important;
    width: auto !important;
    z-index: 11 !important;
    display: block !important;
  }
  #screenHome .right-command #homeTalkBtn {
    width: 84px !important;
    height: 84px !important;
    border-radius: 20px !important;
    font-size: 18px !important;
    box-shadow: 0 10px 24px rgba(0,0,0,.22) !important;
  }

  /* readable, compact dialogue bar at the bottom */
  #screenHome .home-dialogue {
    left: 12px !important;
    right: 12px !important;
    bottom: 92px !important;
    min-height: 148px !important;
    padding: 14px !important;
    border-radius: 18px !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    z-index: 10 !important;
    background: linear-gradient(180deg,rgba(12,24,46,.92),rgba(12,24,46,.96)) !important;
    border: 1px solid rgba(255,255,255,.18) !important;
  }
  #screenHome .home-dialogue::before { display:none !important; }
  #screenHome .speaker-line b { font-size: 14px !important; margin-bottom: 6px !important; }
  #screenHome .speaker-line span { font-size: 15px !important; line-height: 1.55 !important; }
  #screenHome .home-talk-choices {
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  #screenHome .home-talk-choices button {
    flex: 1 1 calc(33.333% - 6px) !important;
    min-width: 78px !important;
    padding: 8px 10px !important;
    font-size: 11px !important;
  }

  #screenHome .notice-strip {
    left: 12px !important;
    right: 12px !important;
    bottom: 28px !important;
    height: 42px !important;
    z-index: 9 !important;
    overflow: hidden !important;
  }
  #screenHome .notice-strip b,
  #screenHome .notice-strip em {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* compact bottom nav; it is the main navigation on mobile */
  .bottom-nav {
    grid-template-columns: repeat(3,1fr) !important;
    gap: 8px !important;
    padding: 10px 10px calc(10px + env(safe-area-inset-bottom)) !important;
    z-index: 20 !important;
  }
  .bottom-nav button {
    min-height: 54px !important;
    border-radius: 16px !important;
    font-size: 11px !important;
  }
}

@media (max-width: 620px) {
  #screenHome .promo-banner { top: 88px !important; height: 60px !important; }
  #screenHome .promo-copy b { font-size: 16px !important; }
  #screenHome #homeActor {
    top: 144px !important;
    height: 47vh !important;
  }
  #screenHome .right-command { bottom: 244px !important; right: 10px !important; }
  #screenHome .right-command #homeTalkBtn {
    width: 76px !important;
    height: 76px !important;
    font-size: 16px !important;
  }
  #screenHome .home-dialogue {
    bottom: 86px !important;
    min-height: 144px !important;
    padding: 12px !important;
  }
  #screenHome .speaker-line span { font-size: 14px !important; }
  #screenHome .home-talk-choices button { font-size: 10px !important; min-width: 72px !important; }
  #screenHome .notice-strip { bottom: 24px !important; height: 40px !important; }
}


/* v031: hard-reset mobile home. Character-first, 3x2 nav, no clutter panels. */
@media (max-width: 900px) {
  /* Home only: remove all extra panels that bury the character */
  #screenHome .promo-banner,
  #screenHome .utility-rail,
  #screenHome .left-dock,
  #screenHome .academy-schedule,
  #screenHome .notice-strip,
  #screenHome .right-command .command-tile {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  #screenHome .lobby {
    min-height: calc(100vh - 86px) !important;
    overflow: hidden !important;
    padding: 0 !important;
  }

  #screenHome #homeActor {
    position: absolute !important;
    left: 50% !important;
    top: 104px !important;
    transform: translateX(-50%) !important;
    width: auto !important;
    height: 54vh !important;
    max-height: none !important;
    z-index: 2 !important;
    opacity: 1 !important;
    filter: drop-shadow(0 16px 26px rgba(0,0,0,.25)) !important;
  }

  #screenHome .home-dialogue {
    position: absolute !important;
    left: 12px !important;
    right: 12px !important;
    bottom: 108px !important;
    min-height: 134px !important;
    padding: 12px !important;
    border-radius: 18px !important;
    z-index: 4 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    background: linear-gradient(180deg,rgba(12,24,46,.92),rgba(12,24,46,.96)) !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    box-shadow: 0 10px 24px rgba(0,0,0,.20) !important;
  }
  #screenHome .speaker-line b {
    font-size: 14px !important;
    margin-bottom: 6px !important;
  }
  #screenHome .speaker-line span {
    font-size: 15px !important;
    line-height: 1.5 !important;
  }
  #screenHome .home-talk-choices {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    width: 100% !important;
  }
  #screenHome .home-talk-choices button {
    flex: 1 1 calc(33.333% - 6px) !important;
    min-width: 78px !important;
    padding: 8px 10px !important;
    font-size: 11px !important;
  }

  /* Keep only the single talk button */
  #screenHome .right-command {
    position: absolute !important;
    right: 12px !important;
    bottom: 262px !important;
    top: auto !important;
    width: auto !important;
    display: block !important;
    z-index: 5 !important;
  }
  #screenHome #homeTalkBtn {
    display: inline-flex !important;
    width: 78px !important;
    height: 78px !important;
    border-radius: 20px !important;
    font-size: 16px !important;
  }

  /* Global bottom nav on mobile should be 3 columns x 2 rows, not 6 in one line */
  .bottom-nav {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
    grid-auto-rows: minmax(54px, auto) !important;
    gap: 8px !important;
    padding: 10px 10px calc(10px + env(safe-area-inset-bottom)) !important;
    z-index: 20 !important;
  }
  .bottom-nav button {
    width: 100% !important;
    min-height: 54px !important;
    border-radius: 16px !important;
    font-size: 11px !important;
  }
}

@media (max-width: 620px) {
  #screenHome #homeActor {
    top: 96px !important;
    height: 49vh !important;
  }
  #screenHome .home-dialogue {
    bottom: 106px !important;
    min-height: 128px !important;
  }
  #screenHome .speaker-line span { font-size: 14px !important; }
  #screenHome .home-talk-choices button { font-size: 10px !important; min-width: 70px !important; }
  #screenHome .right-command { bottom: 248px !important; right: 10px !important; }
  #screenHome #homeTalkBtn { width: 72px !important; height: 72px !important; font-size: 15px !important; }
}


/* v034: NIKKE-like mobile home fallback CSS. JS also enforces these as inline !important. */
@media (max-width: 900px) {
  body.nikke-mobile-home #screenHome .promo-banner,
  body.nikke-mobile-home #screenHome .left-dock,
  body.nikke-mobile-home #screenHome .academy-schedule,
  body.nikke-mobile-home #screenHome .notice-strip,
  body.nikke-mobile-home #screenHome .utility-rail,
  body.nikke-mobile-home #screenHome .right-command .command-tile,
  body.nikke-mobile-home #screenHome .rail-btn,
  body.nikke-mobile-home #screenHome .dock-card {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  body.nikke-mobile-home #screenHome #homeActor {
    left: 50% !important;
    top: 6px !important;
    transform: translateX(-50%) !important;
    height: 57vh !important;
    opacity: 1 !important;
    z-index: 2 !important;
  }

  body.nikke-mobile-home #screenHome .home-dialogue {
    left: 10px !important;
    right: 10px !important;
    bottom: 104px !important;
    min-height: 112px !important;
    max-height: 138px !important;
    z-index: 6 !important;
  }
}


/* v035: mobile DOM-pruned NIKKE-like home layout */
@media (max-width: 900px) {
  body.mobile-home-pruned #screenHome.home-screen.active {
    padding-top: 82px !important;
    padding-bottom: 0 !important;
    max-width: none !important;
  }

  body.mobile-home-pruned #screenHome .lobby {
    height: calc(100vh - 82px) !important;
    min-height: calc(100vh - 82px) !important;
    overflow: hidden !important;
    position: relative !important;
  }

  body.mobile-home-pruned #screenHome .lobby-vignette {
    display: none !important;
  }

  body.mobile-home-pruned #screenHome #homeActor {
    position: absolute !important;
    left: 50% !important;
    top: 8px !important;
    transform: translateX(-50%) !important;
    height: 58vh !important;
    width: auto !important;
    max-height: none !important;
    opacity: 1 !important;
    z-index: 2 !important;
    filter: drop-shadow(0 14px 24px rgba(0,0,0,.24)) !important;
  }

  body.mobile-home-pruned #screenHome .home-dialogue {
    position: absolute !important;
    left: 10px !important;
    right: 10px !important;
    bottom: 102px !important;
    min-height: 112px !important;
    max-height: 134px !important;
    padding: 10px !important;
    border-radius: 17px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 7px !important;
    z-index: 6 !important;
    background: linear-gradient(180deg,rgba(12,24,46,.90),rgba(12,24,46,.96)) !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    box-shadow: 0 12px 26px rgba(0,0,0,.22) !important;
  }

  body.mobile-home-pruned #screenHome .speaker-line {
    padding: 0 !important;
  }

  body.mobile-home-pruned #screenHome .speaker-line b {
    font-size: 13px !important;
    margin-bottom: 5px !important;
  }

  body.mobile-home-pruned #screenHome .speaker-line span {
    font-size: 14px !important;
    line-height: 1.42 !important;
    display: block !important;
  }

  body.mobile-home-pruned #screenHome .home-talk-choices {
    display: flex !important;
    gap: 7px !important;
    width: 100% !important;
  }

  body.mobile-home-pruned #screenHome .home-talk-choices button {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: 6px 6px !important;
    font-size: 10px !important;
    border-radius: 999px !important;
  }

  body.mobile-home-pruned #screenHome .right-command {
    position: absolute !important;
    top: auto !important;
    right: 10px !important;
    bottom: 220px !important;
    width: auto !important;
    display: block !important;
    z-index: 7 !important;
  }

  body.mobile-home-pruned #screenHome #homeTalkBtn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 58px !important;
    height: 58px !important;
    border-radius: 16px !important;
    font-size: 13px !important;
  }

  body.mobile-home-pruned .bottom-nav {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
    grid-auto-rows: 48px !important;
    gap: 7px !important;
    padding: 7px 8px calc(7px + env(safe-area-inset-bottom)) !important;
    z-index: 50 !important;
  }

  body.mobile-home-pruned .bottom-nav button {
    width: 100% !important;
    min-height: 48px !important;
    height: 48px !important;
    border-radius: 14px !important;
    font-size: 10px !important;
    padding: 5px 3px !important;
  }

  body.mobile-home-pruned .bottom-nav .nav-ico {
    font-size: 14px !important;
  }
}

@media (max-width: 380px) {
  body.mobile-home-pruned #screenHome #homeActor {
    top: 6px !important;
    height: 54vh !important;
  }

  body.mobile-home-pruned #screenHome .home-dialogue {
    bottom: 98px !important;
    min-height: 106px !important;
    max-height: 128px !important;
  }

  body.mobile-home-pruned #screenHome .speaker-line span {
    font-size: 13px !important;
  }

  body.mobile-home-pruned #screenHome #homeTalkBtn {
    width: 54px !important;
    height: 54px !important;
    font-size: 12px !important;
  }

  body.mobile-home-pruned #screenHome .right-command {
    bottom: 208px !important;
  }
}


/* v036: NIKKE-like split mobile home.
   Character center. Dialogue is a small left bubble. Menu is split into left/right side columns.
   No bottom nav on mobile home. */
@media (max-width: 900px) {
  body.mobile-home-pruned #screenHome .bottom-nav,
  body.mobile-home-pruned .bottom-nav {
    display: none !important;
  }

  body.mobile-home-pruned #screenHome.home-screen.active {
    padding-top: 82px !important;
    padding-bottom: 0 !important;
  }

  body.mobile-home-pruned #screenHome .lobby {
    height: calc(100vh - 82px) !important;
    min-height: calc(100vh - 82px) !important;
    overflow: hidden !important;
    position: relative !important;
  }

  body.mobile-home-pruned #screenHome #homeActor {
    position: absolute !important;
    left: 50% !important;
    top: 4px !important;
    transform: translateX(-50%) !important;
    height: 66vh !important;
    width: auto !important;
    max-height: none !important;
    opacity: 1 !important;
    z-index: 2 !important;
    filter: drop-shadow(0 16px 28px rgba(0,0,0,.28)) !important;
  }

  /* Existing dialogue becomes a compact speech bubble, not a bottom wall. */
  body.mobile-home-pruned #screenHome .home-dialogue {
    position: absolute !important;
    left: 8px !important;
    right: auto !important;
    bottom: 14px !important;
    width: 58vw !important;
    min-height: 96px !important;
    max-height: 132px !important;
    padding: 10px 11px !important;
    border-radius: 18px !important;
    z-index: 6 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 7px !important;
    background: linear-gradient(180deg,rgba(12,24,46,.88),rgba(12,24,46,.94)) !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    box-shadow: 0 12px 26px rgba(0,0,0,.24) !important;
  }

  body.mobile-home-pruned #screenHome .speaker-line {
    padding: 0 !important;
  }

  body.mobile-home-pruned #screenHome .speaker-line b {
    font-size: 12px !important;
    margin-bottom: 5px !important;
  }

  body.mobile-home-pruned #screenHome .speaker-line span {
    font-size: 13px !important;
    line-height: 1.42 !important;
    display: block !important;
  }

  body.mobile-home-pruned #screenHome .home-talk-choices {
    display: none !important;
  }

  /* Hide original talk button area. Use side menu talk button instead. */
  body.mobile-home-pruned #screenHome .right-command {
    display: none !important;
  }

  body.mobile-home-pruned #mobileSplitHomeMenu {
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    z-index: 7 !important;
  }

  body.mobile-home-pruned #mobileSplitHomeMenu .mobile-side-menu {
    position: absolute !important;
    top: 44% !important;
    transform: translateY(-50%) !important;
    display: grid !important;
    gap: 10px !important;
    pointer-events: auto !important;
  }

  body.mobile-home-pruned #mobileSplitHomeMenu .mobile-left-menu {
    left: 8px !important;
  }

  body.mobile-home-pruned #mobileSplitHomeMenu .mobile-right-menu {
    right: 8px !important;
  }

  body.mobile-home-pruned #mobileSplitHomeMenu button {
    width: 58px !important;
    height: 58px !important;
    border-radius: 17px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: .04em !important;
    color: #fff !important;
    background: linear-gradient(180deg,rgba(58,104,171,.82),rgba(25,48,88,.92)) !important;
    border: 1px solid rgba(255,255,255,.28) !important;
    box-shadow: 0 10px 22px rgba(0,0,0,.24) !important;
    backdrop-filter: blur(8px) !important;
  }

  body.mobile-home-pruned #mobileSplitHomeMenu #mobileTalkButton {
    background: linear-gradient(180deg,rgba(105,196,255,.92),rgba(60,132,230,.96)) !important;
    font-size: 14px !important;
  }
}

@media (max-width: 380px) {
  body.mobile-home-pruned #screenHome #homeActor {
    top: 0 !important;
    height: 62vh !important;
  }

  body.mobile-home-pruned #screenHome .home-dialogue {
    width: 56vw !important;
    min-height: 92px !important;
    max-height: 124px !important;
    bottom: 12px !important;
    padding: 9px 10px !important;
  }

  body.mobile-home-pruned #screenHome .speaker-line span {
    font-size: 12px !important;
  }

  body.mobile-home-pruned #mobileSplitHomeMenu button {
    width: 52px !important;
    height: 52px !important;
    border-radius: 15px !important;
    font-size: 11px !important;
  }

  body.mobile-home-pruned #mobileSplitHomeMenu .mobile-side-menu {
    gap: 8px !important;
    top: 45% !important;
  }
}


@media (max-width: 900px){
  body.nikke-mobile-home .bottom-nav{display:none !important;}
  body.nikke-mobile-home #screenHome .right-command{display:none !important;}
  body.nikke-mobile-home #screenHome .home-talk-choices{display:none !important;}
  body.nikke-mobile-home #screenHome .home-dialogue{right:auto !important;}
}


@media (max-width: 900px){
  body.nikke-mobile-home .bottom-nav{display:none !important;}
  body.nikke-mobile-home #screenHome .right-command{display:none !important;}
  body.nikke-mobile-home #screenHome .home-talk-choices{display:none !important;}
  body.nikke-mobile-home #screenHome .home-dialogue{right:auto !important;}
}


/* Story slash / clash FX */
.story-fx-overlay{
  position:fixed;
  inset:64px 0 calc(62px + var(--safe-bottom)) 0;
  z-index:11;
  pointer-events:none;
  opacity:0;
  background:rgba(0,0,0,0);
  overflow:hidden;
}
.story-fx-overlay.active{
  opacity:1;
  background:rgba(0,0,0,.94);
}
.story-fx-overlay .fx-flash{
  position:absolute;
  inset:0;
  opacity:0;
  background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.24), rgba(255,255,255,0) 44%);
}
.story-fx-overlay .fx-line{
  position:absolute;
  top:50%;
  left:50%;
  width:min(90vw,1200px);
  height:8px;
  border-radius:999px;
  transform:translate(-50%,-50%) rotate(-18deg) scaleX(.2);
  opacity:0;
  box-shadow:0 0 18px rgba(255,255,255,.55),0 0 42px rgba(255,255,255,.24);
}
.story-fx-overlay.slash .fx-line{
  background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.82) 18%, rgba(255,160,160,1) 50%, rgba(255,255,255,.82) 82%, rgba(255,255,255,0) 100%);
}
.story-fx-overlay.clang .fx-line{
  background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(200,236,255,.92) 18%, rgba(255,255,255,1) 50%, rgba(200,236,255,.92) 82%, rgba(255,255,255,0) 100%);
}
.story-fx-overlay .fx-label{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  font-weight:1000;
  font-size:clamp(28px,5vw,68px);
  letter-spacing:.22em;
  color:#fff;
  text-shadow:0 0 22px rgba(255,255,255,.5), 0 0 48px rgba(255,120,120,.34);
  opacity:0;
  white-space:nowrap;
}
.story-fx-overlay.clang .fx-label{
  text-shadow:0 0 22px rgba(255,255,255,.58), 0 0 48px rgba(120,210,255,.38);
}
.story-fx-overlay.active.animate .fx-flash{ animation:fxFlash .55s ease-out forwards; }
.story-fx-overlay.active.animate.dir-ltr .fx-line{ animation:fxSlashLtr .55s cubic-bezier(.12,.74,.18,.99) forwards; }
.story-fx-overlay.active.animate.dir-rtl .fx-line{ animation:fxSlashRtl .55s cubic-bezier(.12,.74,.18,.99) forwards; }
.story-fx-overlay.active.animate .fx-label{ animation:fxLabel .55s ease-out forwards; }
@keyframes fxFlash{
  0%{opacity:0;}
  16%{opacity:.88;}
  46%{opacity:.18;}
  100%{opacity:0;}
}
@keyframes fxSlashLtr{
  0%{opacity:0; transform:translate(-110%,-50%) rotate(-18deg) scaleX(.2);} 
  14%{opacity:1;}
  52%{opacity:1; transform:translate(-50%,-50%) rotate(-18deg) scaleX(1);} 
  100%{opacity:0; transform:translate(18%,-50%) rotate(-18deg) scaleX(.56);} 
}
@keyframes fxSlashRtl{
  0%{opacity:0; transform:translate(10%,-50%) rotate(-18deg) scaleX(.2);} 
  14%{opacity:1;}
  52%{opacity:1; transform:translate(-50%,-50%) rotate(-18deg) scaleX(1);} 
  100%{opacity:0; transform:translate(-118%,-50%) rotate(-18deg) scaleX(.56);} 
}
@keyframes fxLabel{
  0%{opacity:0; transform:translate(-50%,-44%) scale(.7);} 
  18%{opacity:1; transform:translate(-50%,-52%) scale(1.06);} 
  72%{opacity:1; transform:translate(-50%,-50%) scale(1);} 
  100%{opacity:0; transform:translate(-50%,-56%) scale(1.02);} 
}



/* v043: 黒髪は物語中もアニメ立ち絵、他4人は差し替えイラストを使用 */
#storyActor.noah-focus{
  display:block !important;
  position:fixed;
  z-index:6;
  left:50%;
  bottom:calc(236px + var(--safe-bottom));
  transform:translateX(-50%);
  width:min(390px,34vw);
  height:auto;
  pointer-events:none;
  filter:drop-shadow(0 36px 70px rgba(0,0,0,.70)) brightness(1.08) saturate(1.05);
}
#storyActor.noah-focus.pos-left{left:27%;transform:translateX(-50%) scale(1.02);}
#storyActor.noah-focus.pos-center{left:50%;transform:translateX(-50%) scale(1.04);}
#storyActor.noah-focus.pos-right{left:73%;transform:translateX(-50%) scale(1.02);}
@media(max-width:900px){
  #storyActor.noah-focus{width:52vw;min-width:210px;bottom:calc(252px + var(--safe-bottom));}
  #storyActor.noah-focus.pos-left{left:20%;transform:translateX(-50%) scale(.92);}
  #storyActor.noah-focus.pos-center{left:50%;transform:translateX(-50%) scale(.92);}
  #storyActor.noah-focus.pos-right{left:80%;transform:translateX(-50%) scale(.92);}
}

/* v042: FXは文字を出さず、刃線と音だけにする */
.story-fx-overlay .fx-label{
  display:none !important;
}
@media (max-width:900px){
  .chapter-toggle{
    top:76px;
    right:12px;
    padding:8px 11px;
    font-size:12px;
  }
  .chapter-map{
    top:118px;
    right:10px;
    left:10px;
    width:auto;
    max-height:38vh;
  }
}


/* v045: VN transition engine. 予備動作・暗転・フラッシュ・揺れをタグで制御 */
.story-transition-layer{
  position:fixed;
  inset:64px 0 calc(62px + var(--safe-bottom)) 0;
  z-index:12;
  pointer-events:none;
  opacity:0;
  background:#000;
  transition:opacity .18s ease;
}
.story-transition-layer.active{opacity:1}
.story-transition-layer.flash{
  background:rgba(255,255,255,.92);
  transition:opacity .10s ease;
}
.story-transition-layer.flash.red{background:rgba(150,0,20,.72)}
.story-screen.shake-small{animation:storyShakeSmall .22s linear}
.story-screen.shake-mid{animation:storyShakeMid .32s linear}
@keyframes storyShakeSmall{
  0%,100%{transform:translate(0,0)}
  20%{transform:translate(-3px,2px)}
  40%{transform:translate(3px,-1px)}
  60%{transform:translate(-2px,-2px)}
  80%{transform:translate(2px,1px)}
}
@keyframes storyShakeMid{
  0%,100%{transform:translate(0,0)}
  16%{transform:translate(-6px,3px)}
  32%{transform:translate(5px,-4px)}
  48%{transform:translate(-4px,-5px)}
  64%{transform:translate(6px,2px)}
  80%{transform:translate(-3px,4px)}
}
.actor-stage.transitioning .actor-card{transition:transform .34s ease, opacity .34s ease, filter .34s ease}