/* The site: Blue Archive's Campaign menu, rebuilt.
   Every position below is in the game's 1920x1080 reference space, measured
   from a PC screenshot, and the colors are sampled from it. campaign.js scales
   the layers to the window: the classroom covers it, the left layer hugs the
   left edge, the right layer hugs the right edge, so a wide window spreads
   them apart the way the game does. */

@font-face{ font-family:'Glow Sans J'; src:url('assets/fonts/glow-sans-j-medium.woff2') format('woff2'); font-weight:300 599; font-display:swap; }
@font-face{ font-family:'Glow Sans J'; src:url('assets/fonts/glow-sans-j-bold.woff2') format('woff2'); font-weight:600 900; font-display:swap; }

:root{
  --font-ui:'RoG2 Sans-Serif Std B','RoG2SanSerifStd-B','RoG2サンセリフStd B','Glow Sans J',system-ui,-apple-system,'Segoe UI',sans-serif;
  --title:#273b50;    /* screen title */
  --label:#26355a;    /* tile labels and card titles */
  --sub:#3d4259;      /* card subtitles */
  --num:#454d58;      /* top bar numbers */
  --icon:#475f88;     /* gear and home */
  --clear:#5a729d;    /* "Clear:" line */
  --bar:#f8fbfd;
  --back:#48639b;
  --red:#fd4014;
  --yellow:#fcbc07;
  --skew:-10deg;
  --s:1; --c:1; --ty:0px;
}

*{ box-sizing:border-box; }
html,body{ margin:0; height:100%; overflow:hidden; background:#0b1a33; }
html{ cursor:url('assets/cursor-ba.png') 15 13, default; }
body{ font-family:var(--font-ui); color:var(--title); -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; margin:0; cursor:inherit; text-align:inherit; }
a{ color:inherit; text-decoration:none; cursor:inherit; }
:focus-visible{ outline:4px solid #2aa0ff; outline-offset:4px; }
[hidden]{ display:none !important; }

/* ---------------------------------------------------------------- scene */
.scene{ position:fixed; left:0; top:0; width:1920px; height:1080px; transform-origin:0 0;
  transform:translateY(var(--ty)) scale(var(--c)); z-index:0; }
.scene__img{ position:absolute; inset:0; width:100%; height:100%; display:block; user-select:none; -webkit-user-drag:none; }
/* the animated scene fades in over its poster once its first frame is drawn */
.scene__live{ position:absolute; inset:0; opacity:0; transition:opacity .6s ease-out; }
.scene__live.on{ opacity:1; }
.scene__live .spine-player, .scene__live canvas{ width:100% !important; height:100% !important; background:transparent !important; }
.hit{ position:absolute; border-radius:60px; }
.bubble{ position:absolute; max-width:380px; padding:16px 30px 18px; background:#f6fcfd; color:#3a3f4a; text-align:center;
  border-radius:34px; font:500 30px/1.28 var(--font-ui); box-shadow:0 3px 0 rgba(30,60,100,.14);
  pointer-events:none; white-space:pre-line; animation:pop .2s ease-out both; }
.bubble::after{ content:''; position:absolute; width:0; height:0; border:13px solid transparent; }
.bubble[data-tail=down]{ transform-origin:var(--tail,50%) 100%; }
.bubble[data-tail=down]::after{ left:var(--tail,50%); bottom:-22px; margin-left:-13px; border-top:16px solid #f6fcfd; border-bottom:0; }
.bubble[data-tail=left]{ transform-origin:0 50%; }
.bubble[data-tail=left]::after{ left:-22px; top:50%; margin-top:-13px; border-right:16px solid #f6fcfd; border-left:0; }
.bubble[data-tail=right]{ transform-origin:100% 50%; }
.bubble[data-tail=right]::after{ right:-22px; top:50%; margin-top:-13px; border-left:16px solid #f6fcfd; border-right:0; }
@keyframes pop{ from{ transform:scale(.55); opacity:0; } to{ transform:scale(1); opacity:1; } }

/* ---------------------------------------------------------------- layers */
.ui{ position:fixed; top:0; width:1920px; height:1080px; pointer-events:none; }
.ui--left{ left:0; transform-origin:0 0; transform:scale(var(--s)); }
.ui--right{ right:0; transform-origin:100% 0; transform:scale(var(--s)); }
.layer-hub{ z-index:1; }
.layer-top{ z-index:10; }
.ui button, .ui a{ pointer-events:auto; }

/* ---------------------------------------------------------------- top bar */
.bar{ position:fixed; left:0; right:0; top:0; height:calc(61px * var(--s)); background:var(--bar);
  box-shadow:0 1px 0 rgba(30,50,90,.18), 0 2px 6px rgba(20,40,80,.16); z-index:10; }
/* the game's pale blue triangles at the bar's left end */
.bar::before{ content:''; position:absolute; left:0; top:0; height:100%; width:calc(330px * var(--s));
  background:url('assets/campaign/tri.png') 0 0 / calc(150px * var(--s)) auto repeat-x,
             linear-gradient(to right, #b9dff4, rgba(205,232,247,.6) 45%, rgba(248,251,253,0));
  -webkit-mask-image:linear-gradient(to right, #000 55%, transparent); mask-image:linear-gradient(to right, #000 55%, transparent); }
.back{ position:absolute; left:39px; top:10px; width:92px; height:92px; border-radius:50%; background:var(--back);
  box-shadow:0 2px 6px rgba(15,35,75,.3); transition:transform .08s; }
.back:active{ transform:scale(.93); }
.back svg{ position:absolute; inset:0; width:92px; height:92px; }
.title{ position:absolute; left:162px; top:5px; margin:0; font:700 45px/52px var(--font-ui); color:var(--title); white-space:nowrap;
  transform:scaleX(.93); transform-origin:0 50%; }

.cur{ position:absolute; top:0; height:61px; display:flex; align-items:center; gap:16px; }
.cur__icon{ display:block; flex:none; width:auto; }
.cur b{ font:700 34px/1 var(--font-ui); color:var(--num); transform:scaleX(.9); transform-origin:0 50%; display:inline-block; }
.plus{ position:absolute; top:10px; width:42px; height:42px; }
.plus::before, .plus::after{ content:''; position:absolute; left:50%; top:50%; background:#6fc6ee; border-radius:2px; }
.plus::before{ width:40px; height:3px; margin:-1.5px 0 0 -20px; }
.plus::after{ width:3px; height:40px; margin:-20px 0 0 -1.5px; }
.plus__dot{ position:absolute; right:-9px; top:-7px; }
.sep{ position:absolute; top:16px; width:2px; height:30px; background:#d3dbe4; transform:skewX(-18deg); }
.icon{ position:absolute; top:7px; width:46px; height:46px; display:grid; place-items:center; transition:transform .08s; }
.icon:active{ transform:scale(.9); }
.icon svg{ width:44px; height:44px; }

.dot{ display:inline-block; width:13px; height:13px; border-radius:50%; vertical-align:top; }
.dot--red{ background:var(--red); }
.dot--yellow{ background:var(--yellow); }

/* ---------------------------------------------------------------- event banner */
.event{ position:absolute; left:40px; top:140px; width:236px; height:220px; transition:transform .08s; }
.event:active{ transform:scale(.96); }
.event__time{ position:absolute; left:7px; top:4px; width:220px; height:40px; border-radius:20px; z-index:2;
  background:rgba(14,28,52,.5); color:#fff; font:500 26px/40px var(--font-ui); text-align:center; white-space:nowrap; }
.event__art{ position:absolute; left:41px; top:32px; width:148px; height:148px; border-radius:50%; overflow:hidden;
  background:radial-gradient(circle at 50% 35%, #eaf6ff, #a8d4f2); box-shadow:0 0 0 2px rgba(255,255,255,.35), 0 4px 12px rgba(10,30,70,.35); }
.event__art img{ width:100%; height:100%; object-fit:cover; object-position:50% 12%; display:block; }
.event__logo{ position:absolute; left:-6px; right:-6px; bottom:16px; text-align:center; color:#ffd84a; font:700 italic 26px/1 var(--font-ui);
  transform:rotate(-4deg); text-shadow:-2px -2px 0 #3a2a10,2px -2px 0 #3a2a10,-2px 2px 0 #3a2a10,2px 2px 0 #3a2a10,0 2px 0 #3a2a10,0 -2px 0 #3a2a10,2px 0 0 #3a2a10,-2px 0 0 #3a2a10; }
.event__logo small{ display:block; font-size:15px; margin-bottom:2px; color:#fff; }
.event__stamp{ position:absolute; left:30px; top:42px; width:66px; height:42px; border-radius:50%; background:#fff; z-index:2;
  border:3px solid #e33b4c; color:#e33b4c; font:700 italic 13px/36px var(--font-ui); white-space:nowrap; text-align:center; transform:rotate(-12deg); }
.event__dot{ position:absolute; left:172px; top:52px; z-index:2; }
.event__pager{ position:absolute; left:50%; top:196px; transform:translateX(-50%); height:18px; padding:0 8px; border-radius:9px;
  background:rgba(238,243,249,.92); display:flex; gap:6px; align-items:center; z-index:2; }
.event__pager i{ width:8px; height:8px; border-radius:50%; background:#2b3953; }
.event__pager i.on{ background:#4fc3ff; }

/* ---------------------------------------------------------------- cards and tiles */
.card, .tile{ position:absolute; left:var(--x); top:var(--y); width:var(--w); height:var(--h); transform:skewX(var(--skew));
  border-radius:12px; overflow:hidden; background:#fff; box-shadow:0 3px 10px rgba(12,36,84,.2);
  transition:transform .08s ease-out, filter .12s; }
.card:hover, .tile:hover{ filter:brightness(1.05); }
.card:active, .tile:active{ transform:skewX(var(--skew)) scale(.965); }
.art{ position:absolute; top:0; bottom:0; left:-26px; right:-26px; transform:skewX(10deg);
  background-size:var(--size,cover); background-repeat:no-repeat; background-position:var(--pos,50% 40%); }
.fade{ position:absolute; inset:0; }
/* cards: white under the title on the left, art left showing on the right */
.card .fade{ background:linear-gradient(to right, #fff 25%, rgba(255,255,255,.9) 50%, rgba(255,255,255,.15) 85%);
  -webkit-mask-image:linear-gradient(to bottom, transparent 34%, #000 64%); mask-image:linear-gradient(to bottom, transparent 34%, #000 64%); }
.tile--wide .fade{ background:linear-gradient(to bottom, rgba(255,255,255,0) 50%, rgba(255,255,255,.86) 66%, #fff 80%); }
.tile:not(.tile--wide) .fade{ background:linear-gradient(to bottom, rgba(255,255,255,0) 58%, rgba(255,255,255,.88) 74%, #fff 88%); }

/* The game's font (RoG2) runs narrower than the Glow Sans fallback, so text
   inside cards and tiles is condensed to land on the game's widths. */
.card__txt, .tile__txt{ position:absolute; transform:skewX(10deg) scaleX(.87); transform-origin:0 100%; color:var(--label); white-space:nowrap; }
.card__txt{ left:44px; bottom:24px; display:flex; flex-direction:column; }
.card__txt b{ position:relative; font:700 50px/1 var(--font-ui); letter-spacing:-.5px; }
.card__txt b .dot{ position:absolute; margin:0 0 0 4px; }
.card__txt small{ margin-top:12px; font:500 26px/1.15 var(--font-ui); color:var(--sub); }
.play{ position:absolute; right:30px; bottom:22px; width:54px; height:54px; border-radius:50%; background:#fff;
  box-shadow:0 2px 8px rgba(20,40,80,.25); transform:skewX(10deg); }
.play::after{ content:''; position:absolute; left:22px; top:17px; border-left:15px solid #3d4a62; border-top:10px solid transparent; border-bottom:10px solid transparent; }

.tile__txt{ left:19px; bottom:15px; display:flex; flex-direction:column; align-items:flex-start; }
.tile__txt b{ position:relative; font:700 28px/1.08 var(--font-ui); }
.tile__txt--two b{ font-size:26px; line-height:1.05; }
.tile__txt em{ font:500 22px/1.2 var(--font-ui); font-style:normal; color:var(--clear); margin-bottom:4px; }
.tile--wide .tile__txt{ left:20px; bottom:13px; }
.tile--wide .tile__txt b{ font-size:30px; }
.chev{ position:absolute; right:24px; bottom:24px; width:15px; height:15px; border-right:3px solid #7684a0; border-top:3px solid #7684a0;
  transform:skewX(10deg) rotate(45deg); }

/* yellow "days left" style tag, sits on a tile's top edge */
.tag{ position:absolute; height:35px; padding:0 18px; border-radius:18px; background:linear-gradient(#fff6ad,#fffbd6);
  box-shadow:0 0 0 2px #f6dc6b inset, 0 2px 4px rgba(90,70,0,.18); color:#361901; font:700 italic 23px/35px var(--font-ui);
  white-space:nowrap; pointer-events:none; }
.tag::after{ content:''; position:absolute; right:28px; bottom:-9px; border-top:10px solid #fffbd6; border-left:7px solid transparent; border-right:7px solid transparent; }

.glass{ position:absolute; left:var(--x); top:var(--y); width:var(--w); height:var(--h); transform:skewX(var(--skew));
  border-radius:26px; background:rgba(228,242,252,.46); border:2px solid rgba(255,255,255,.6);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); pointer-events:none; }
.glass__deco{ position:absolute; top:13px; left:30px; right:20px; display:flex; align-items:center; gap:10px; transform:skewX(10deg);
  color:rgba(255,255,255,.85); font:700 17px/1 var(--font-ui); letter-spacing:3px; }
.glass__deco::before{ content:''; flex:1; height:2px; background:rgba(255,255,255,.6); }

/* ---------------------------------------------------------------- a tile's screen */
.sub{ position:fixed; inset:0; z-index:5; background:#cfe3f3 center / cover no-repeat; animation:fadein .16s ease-out; }
@keyframes fadein{ from{ opacity:0; } to{ opacity:1; } }
.sub__stage{ position:absolute; left:50%; top:50%; width:1920px; height:1080px; transform:translate(-50%,-50%) scale(var(--s)); }
.panel{ position:absolute; left:430px; top:190px; width:1060px; max-height:820px; display:flex; flex-direction:column;
  background:#fff; border-radius:16px; box-shadow:0 10px 30px rgba(10,30,70,.35); overflow:hidden; }
.panel__head{ flex:none; display:flex; align-items:center; gap:18px; padding:0 40px; height:84px; background:linear-gradient(#f7fafc,#e9eff5);
  border-bottom:2px solid #dbe4ee; font:700 38px/1 var(--font-ui); color:var(--title); }
.panel__body{ padding:34px 44px 44px; overflow:auto; font:500 29px/1.5 var(--font-ui); color:var(--num); }
.panel__body p{ margin:0 0 22px; }
.panel__note{ font-size:24px; color:#7c8aa3; }
.panel__actions{ display:flex; gap:24px; margin-top:30px; }
.chip{ display:inline-block; padding:5px 16px; border-radius:6px; background:#2b3a55; color:#ffd23f; font:700 21px/1.35 var(--font-ui); transform:skewX(-10deg); }
.chip > span{ display:inline-block; transform:skewX(10deg); }

.ba-btn{ display:inline-flex; align-items:center; justify-content:center; min-width:250px; height:78px; padding:0 44px;
  border-radius:10px; transform:skewX(-10deg); background:linear-gradient(#69d5ff,#2ba3f2); color:#fff;
  font:700 32px/1 var(--font-ui); box-shadow:0 5px 0 #1d79c4, 0 8px 16px rgba(20,60,120,.25); transition:transform .08s; }
.ba-btn > span{ display:inline-block; transform:skewX(10deg); }
.ba-btn:active{ transform:skewX(-10deg) translateY(3px); box-shadow:0 2px 0 #1d79c4; }
.ba-btn--yellow{ background:linear-gradient(#ffe866,#ffcb1f); color:#3f2c00; box-shadow:0 5px 0 #d6a200, 0 8px 16px rgba(120,90,0,.22); }
.ba-btn--yellow:active{ box-shadow:0 2px 0 #d6a200; }

.log{ list-style:none; margin:10px 0 0; padding:0; border-top:2px solid #e3eaf2; }
.log li{ display:flex; gap:24px; padding:12px 0; border-bottom:2px solid #eef2f7; font-size:25px; }
.log time{ flex:none; color:#2ba3f2; font-weight:700; }

/* ---------------------------------------------------------------- notice and phone prompt */
.popup{ position:fixed; inset:0; z-index:20; display:grid; place-items:center; background:rgba(16,24,40,.55); }
.popup__box{ width:min(640px, 90vw); background:#fff; border-radius:14px; overflow:hidden; text-align:center;
  box-shadow:0 12px 36px rgba(0,0,0,.35); transform:scale(calc(var(--s) * 1.6)); transform-origin:50% 50%; }
.popup__head{ height:56px; background:linear-gradient(#f7fafc,#e9eff5); border-bottom:2px solid #dbe4ee; font:700 24px/56px var(--font-ui); color:var(--title); }
.popup__body{ margin:26px 30px; font:500 19px/1.5 var(--font-ui); color:var(--num); white-space:pre-line; }
.popup .ba-btn{ min-width:160px; height:52px; font-size:21px; margin-bottom:26px; }

.turn{ position:fixed; inset:0; z-index:30; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:24px;
  padding:24px; background:rgba(11,26,51,.92); color:#fff; text-align:center; font:500 17px/1.5 var(--font-ui); }
.turn .ba-btn{ min-width:200px; height:52px; font-size:18px; }

@media (prefers-reduced-motion: reduce){
  .bubble, .sub{ animation:none; }
  .card, .tile, .back, .icon, .event, .ba-btn{ transition:none; }
}