/* ============================================================================
   style.css, the lobby rebuild. Vanilla, no build step.
   The look is Blue Archive's lobby: sky backdrop, white skewed panels, dark
   top status bar, blue parallelogram actions, yellow accents. Four sky phases
   switch on :root[data-phase]; panels and their text never change with phase
   (the game keeps UI panels bright at night, and it keeps contrast trivially
   safe). Day and night sky stops are sampled from the game's own lobby
   sprites (reference/ba-ui/00_Images/Lobby/Bg_Public_Sky*.png); morning and
   dusk are derived between those anchors.
   Motion law: transform/opacity only, reduced-motion kills loops.
   ============================================================================ */

@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; }

/* Registered so the phase switch crossfades the sky instead of snapping.
   Browsers without @property just snap, which is fine. */
@property --sky-top    { syntax:'<color>'; inherits:true; initial-value:#2F97FF; }
@property --sky-mid    { syntax:'<color>'; inherits:true; initial-value:#58C6FF; }
@property --sky-bottom { syntax:'<color>'; inherits:true; initial-value:#B7EBFE; }
@property --bar-bg     { syntax:'<color>'; inherits:true; initial-value:rgba(28,42,66,.92); }

/* ----------------------------------------------------------------- tokens -- */
:root{
  /* constants across phases */
  --ba-blue:#128AFA; --ba-blue-press:#0C6FD1; --ba-cyan:#63D5F8;
  --ba-navy:#2B3A55; --ba-yellow:#FFC800;
  --panel:#FFFFFF; --sep:#E3EDF5; --hairline:rgba(43,58,85,.12);
  --text:#2B3A55; --text-muted:#5C6B85; --text-faint:#8C99B0;
  --tier-1:#6f9bff; --tier-2:#ffd24a; --tier-3:#ff7ec8;
  --mint:#3DD68C; --dnd:#ED4245;
  --shadow-card:0 4px 14px rgba(43,58,85,.10);
  --shadow-pop:0 10px 30px rgba(43,58,85,.18);
  --shadow-hard:3px 3px 0 rgba(43,58,85,.15);
  --shadow-hard-sm:2px 2px 0 rgba(43,58,85,.12);
  --skew:-10deg;
  --font-ui:'RoG2 Sans-Serif Std B','RoG2SanSerifStd-B','RoG2サンセリフStd B','Glow Sans J',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;
  --ease:cubic-bezier(.2,.7,.2,1); --ease-out:cubic-bezier(.16,1,.3,1);
  --dur-micro:120ms; --dur:200ms;
  --r-sm:4px; --r-md:6px; --r-lg:10px;
  --gutter:clamp(16px,5vw,26px); --page-max:560px;

  /* phase-dependent, day defaults. Sky stops sampled from Bg_Public_Sky.png. */
  --sky-top:#2F97FF; --sky-mid:#58C6FF; --sky-bottom:#B7EBFE;
  --sky-deco:rgba(255,255,255,.4);
  --bar-bg:rgba(28,42,66,.92); --bar-edge:var(--ba-cyan);
  /* ink for copy sitting directly on the sky; flips light on dark phases */
  --ink:#17325B; --ink-muted:#2E4A75; --ink-accent:#0A3E7E;
  --ink-link:#0A3E7E;
  transition:--sky-top 1.2s linear, --sky-mid 1.2s linear, --sky-bottom 1.2s linear, --bar-bg 1.2s linear;
}
:root[data-phase="morning"]{
  /* dawn, kept clearly apart from day: muted blue up top, pink haze, gold horizon */
  --sky-top:#6E96CF; --sky-mid:#D9A9A0; --sky-bottom:#FFCF87;
  --sky-deco:rgba(255,222,180,.42);
  --bar-bg:rgba(56,54,84,.90); --bar-edge:#FFC98A;
  --ink:#243A63; --ink-muted:#3A4E76; --ink-accent:#0A3E7E; --ink-link:#0A3E7E;
}
:root[data-phase="dusk"]{
  --sky-top:#414B7D; --sky-mid:#8C5E96; --sky-bottom:#FF9F68;
  --sky-deco:rgba(255,190,150,.3);
  --bar-bg:rgba(40,32,64,.92); --bar-edge:#FFB38A;
  --ink:#FFF3E4; --ink-muted:rgba(255,243,228,.82); --ink-accent:#FFD9A8; --ink-link:#FFE3BC;
}
:root[data-phase="night"]{
  /* stops sampled from Bg_Public_Sky_Night.png */
  --sky-top:#121A25; --sky-mid:#153459; --sky-bottom:#1C3762;
  --sky-deco:rgba(99,213,248,.09);
  --bar-bg:rgba(8,14,28,.94); --bar-edge:#3D5A8F;
  --ink:#EAF2FB; --ink-muted:rgba(234,242,251,.78); --ink-accent:#8FC7FF; --ink-link:#9CCFFF;
}

/* ------------------------------------------------------------------- base -- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font:500 16px/1.55 var(--font-ui);
  color:var(--text);
  background:linear-gradient(180deg, var(--sky-top), var(--sky-mid) 52%, var(--sky-bottom)) fixed;
  min-height:100dvh;
}
[hidden]{ display:none !important; }
img{ max-width:100%; }
a{ color:var(--ba-blue); }
b{ font-weight:700; }
button{ font:inherit; }
::selection{ background:var(--ba-blue); color:#fff; }
:focus-visible{ outline:2px solid var(--ba-blue); outline-offset:2px; }
.topbar :focus-visible, .footer :focus-visible{ outline-color:var(--ba-yellow); }

/* backdrop decoration: one giant translucent halo ring upper right and one
   soft diagonal band, both pinned, paint only. Mirrors Bg_Public_Halo.png's
   role in the game lobby. */
.stage::before{
  content:''; position:fixed; z-index:-1;
  top:-18vmin; right:-22vmin; width:72vmin; height:72vmin;
  border:1.6vmin solid var(--sky-deco); border-radius:50%;
  pointer-events:none;
}
.stage::after{
  content:''; position:fixed; z-index:-1;
  top:30%; left:-20%; width:140%; height:34vmin;
  background:linear-gradient(rgba(255,255,255,.10), rgba(255,255,255,0));
  transform:skewY(-8deg);
  pointer-events:none;
}

/* ----------------------------------------------------------------- topbar -- */
.topbar{
  position:fixed; inset:0 0 auto 0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  height:46px; padding:0 var(--gutter);
  background:var(--bar-bg);
  border-bottom:2px solid var(--bar-edge);
}
.topbar__id{ display:flex; align-items:center; gap:10px; min-width:0; }
.topbar__tag{
  display:inline-block; padding:2px 10px;
  background:var(--ba-yellow); color:#1C2A42;
  font:700 12px/1.5 var(--font-ui);
  transform:skewX(var(--skew));
}
.topbar__name{ color:#fff; font-weight:700; font-size:14px; letter-spacing:.02em; }
.topbar__owner{ color:var(--ba-yellow); font:500 12px var(--font-mono); }
.topbar__owner button{
  margin-left:6px; padding:1px 8px; cursor:pointer;
  background:none; border:1px solid rgba(255,200,0,.5); border-radius:var(--r-sm);
  color:var(--ba-yellow); font:500 11px var(--font-mono);
}
.topbar__controls{ display:flex; align-items:center; gap:8px; position:relative; }
.ctrl{
  display:inline-flex; align-items:center; gap:5px;
  height:30px; padding:0 11px; cursor:pointer;
  background:rgba(255,255,255,.10); color:#fff;
  border:1px solid rgba(255,255,255,.22); border-radius:15px;
  font:600 12.5px/1 var(--font-ui);
  transition:background var(--dur-micro) var(--ease);
}
.ctrl:hover{ background:rgba(255,255,255,.2); }
.ico-svg{ width:14px; height:14px; display:block; }
#streak .ico-svg{ color:var(--ba-yellow); }
#sound[aria-pressed="false"] .wave{ opacity:.25; }

/* palette picker */
.palette-pop{
  position:absolute; top:38px; right:0; z-index:50;
  display:flex; flex-direction:column; min-width:118px;
  background:var(--panel); border:1px solid var(--sep); border-radius:var(--r-md);
  box-shadow:var(--shadow-pop); overflow:hidden; padding:4px;
}
.palette-pop button{
  border:none; background:none; cursor:pointer; text-align:left;
  padding:7px 10px; border-radius:var(--r-sm);
  color:var(--text); font:600 13px/1 var(--font-ui);
}
.palette-pop button:hover{ background:var(--sep); }
.palette-pop button.on{ background:var(--ba-blue); color:#fff; }

/* ----------------------------------------------------------------- layout -- */
.stage{ padding:78px var(--gutter) 40px; }
.page{ max-width:var(--page-max); margin:0 auto; }
.section{ margin-top:34px; }

/* -------------------------------------------------------------- file guard -- */
.file-warn{
  margin-bottom:22px; padding:12px 16px;
  background:var(--panel); border-left:4px solid var(--ba-yellow);
  border-radius:var(--r-md); box-shadow:var(--shadow-card);
  color:var(--text); font-size:14px; line-height:1.6;
}
.file-warn code{
  font:500 12.5px var(--font-mono);
  background:var(--sep); border-radius:var(--r-sm); padding:1px 6px;
}

/* ------------------------------------------------------------------- hero -- */
.hero{ text-align:center; padding-top:14px; }
.halo-wrap{ position:relative; width:150px; height:150px; margin:0 auto; }
.mimori-halo{
  position:absolute; left:50%; top:-34px; transform:translateX(-50%);
  width:104px; opacity:.9; pointer-events:none;
  animation:float 5.5s var(--ease) infinite alternate;
}
@keyframes float{ from{ transform:translateX(-50%) translateY(0); } to{ transform:translateX(-50%) translateY(6px); } }
.halo{ position:absolute; inset:0; }
/* full symmetric circles: a missing quadrant reads as the avatar sitting
   off-center in stills, so the motion comes from a dashed ring instead */
.halo .ring{
  position:absolute; inset:6px; border-radius:50%;
  border:2px dashed var(--ba-cyan); opacity:.8;
  animation:spin 26s linear infinite;
}
.halo .ring.r2{
  inset:14px; border:2px solid var(--ba-blue);
  animation:none; opacity:.4;
}
@keyframes spin{ to{ transform:rotate(1turn); } }
.ava{
  position:absolute; inset:27px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  background:var(--panel); color:var(--ba-blue);
  border:3px solid var(--ba-blue);
  font:800 34px/1 var(--font-ui);
  box-shadow:var(--shadow-card);
}
.ava img{ width:100%; height:100%; object-fit:cover; }
.callsign{
  margin:16px 0 0; color:var(--ink);
  font:800 italic 40px/1.1 var(--font-ui); letter-spacing:.01em;
}
.rank{ margin:6px 0 0; color:var(--ink-accent); font:700 15px/1.4 var(--font-ui); }
.blurb{ margin:10px auto 18px; max-width:40ch; color:var(--ink-muted); font-size:15.5px; }

/* --------------------------------------------------------- BA buttons -----
   Measured against the game sprites:
   - reference/ba-ui/00_Images/Image_AngleBtn_Deco.png: plate surfaces carry a
     faint diagonal band texture (~30deg stripes, a few percent contrast) and
     an angled edge; skew here is the -10deg the game uses on menu buttons.
   - reference/ba-ui/UI/ninepatch_basic.png: base surface is a small-radius
     rounded rect (radius roughly 12 to 14 percent of height; 6px at 44px).
   - reference/ba-ui/00_Images/BigBtn/Contents_Image_*.png: plates get a
     darker bottom lip and a thin top highlight, never a drop glow.
   - reference/ba-ui/00_Images/Common_plus_Selectable_Btn_stroke.png: glyphs
     stay counter-skewed (upright strokes) inside the slanted plate. */
.ba-btn{
  display:inline-block; cursor:pointer; text-decoration:none;
  transform:skewX(var(--skew));
  border:none; border-radius:var(--r-md);
  padding:12px 32px;
  background-color:var(--panel);
  background-image:repeating-linear-gradient(115deg,
    rgba(18,138,250,.045) 0 26px, rgba(18,138,250,0) 26px 52px);
  color:var(--ba-navy);
  font:700 16px/1 var(--font-ui);
  box-shadow:inset 0 -3px 0 rgba(43,58,85,.18), inset 0 1px 0 rgba(255,255,255,.6), var(--shadow-hard-sm);
  transition:transform var(--dur-micro) var(--ease), filter var(--dur-micro) var(--ease);
}
.ba-btn > span{ display:inline-block; transform:skewX(calc(var(--skew) * -1)); }
.ba-btn:hover{ filter:brightness(1.05); }
.ba-btn:active{ transform:skewX(var(--skew)) translateY(1px); }
.ba-btn--primary{
  background-color:var(--ba-blue);
  background-image:repeating-linear-gradient(115deg,
    rgba(255,255,255,.06) 0 26px, rgba(255,255,255,0) 26px 52px);
  color:#fff;
  box-shadow:inset 0 -3px 0 var(--ba-blue-press), inset 0 1px 0 rgba(255,255,255,.28), var(--shadow-hard-sm);
}
.ba-btn--primary:active{ background-color:var(--ba-blue-press); }

/* ---------------------------------------------------------------- banners -- */
.banner{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.banner .pip{
  width:12px; height:22px; background:var(--ba-blue);
  transform:skewX(var(--skew)); flex:none;
}
.banner h2{
  margin:0; padding:4px 18px;
  background:var(--panel); color:var(--ba-navy);
  border-bottom:3px solid var(--ba-blue);
  font:800 italic 18px/1.3 var(--font-ui);
  transform:skewX(var(--skew)); box-shadow:var(--shadow-hard-sm);
}
.banner h2, .banner .ct{ white-space:nowrap; }
.banner .ln{ flex:1; height:1px; background:var(--hairline); }
.banner .ct{
  padding:3px 10px; background:var(--panel); color:var(--ba-navy);
  font:500 11.5px/1.4 var(--font-mono);
  transform:skewX(var(--skew)); box-shadow:var(--shadow-hard-sm);
}
.banner .ct:empty{ display:none; }

/* ------------------------------------------------------------------ cards -- */
.card{
  background:var(--panel); border-radius:var(--r-md);
  box-shadow:var(--shadow-card); padding:14px 16px;
}

/* ------------------------------------------------------------------- live -- */
.live-card{ display:flex; align-items:center; gap:12px; }
.live-dot{ width:10px; height:10px; border-radius:50%; flex:none; background:var(--text-faint); }
.live-dot.on{ background:var(--mint); }
.live-dot.idle{ background:var(--ba-yellow); }
.live-dot.dnd{ background:var(--dnd); }
.live-tx{ min-width:0; }
.live-main{ margin:0; font-weight:700; }
.live-sub{ margin:2px 0 0; color:var(--text-muted); font:500 13px/1.5 var(--font-mono); }
.live-sub:empty{ display:none; }

.live-recent{ margin:8px 0 0; color:var(--ink-muted); font:500 12px/1.7 var(--font-mono); }

/* ---------------------------------------------------------------- friends -- */
.friends{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.friend{
  position:relative; display:flex; align-items:center; gap:10px;
  background:var(--panel); border-radius:var(--r-md); box-shadow:var(--shadow-card);
  padding:10px 12px; color:var(--text); text-decoration:none;
  transition:transform var(--dur-micro) var(--ease);
}
.friend:hover{ transform:translateX(3px); }
.f-av{
  flex:none; width:40px; height:40px; border-radius:50%; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background:#E3F1FE; color:var(--ba-blue); font:800 15px/1 var(--font-ui);
}
.f-av img{ width:100%; height:100%; object-fit:cover; display:block; }
.f-tx{ min-width:0; display:flex; flex-direction:column; line-height:1.35; }
.f-tx b{ font-size:13.5px; }
.f-tx span{
  color:var(--text-muted); font-size:11.5px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
@media (max-width:480px){ .friends{ grid-template-columns:1fr; } }

.pin-img{ margin-top:8px; width:100%; border-radius:var(--r-sm); display:block; }

/* ------------------------------------------------------------------ tools -- */
.tools{ display:flex; flex-direction:column; gap:10px; }
.tool{
  display:flex; align-items:center; gap:12px;
  background:var(--panel); border-radius:var(--r-md);
  box-shadow:var(--shadow-card); padding:12px 14px;
  color:var(--text); text-decoration:none;
  transition:transform var(--dur-micro) var(--ease);
}
.tool:hover{ transform:translateX(3px); }
.tool .ic{
  flex:none; width:44px; height:44px; border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center;
  background:#E3F1FE; color:var(--ba-blue);
  font:800 16px/1 var(--font-ui); overflow:hidden;
}
.tool .ic img{ width:100%; height:100%; object-fit:cover; display:block; }
.tool .ic.editable{ cursor:pointer; }
.tool .ic.editable:hover{ outline:2px dashed var(--ba-blue); outline-offset:1px; }
.icon-edit-row{
  display:flex; gap:8px; align-items:flex-start; flex-wrap:wrap;
  padding:10px 14px; background:var(--panel);
  border-radius:var(--r-md); box-shadow:var(--shadow-card);
}
.icon-edit-row input{
  flex:1; min-width:180px; font:500 13px/1.5 var(--font-mono); color:var(--text);
  border:1px solid var(--sep); border-radius:var(--r-sm); padding:7px 9px; background:#FBFDFF;
}
.icon-edit-row .ba-btn{ padding:8px 18px; font-size:13.5px; }
.tool .tx{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.tool .tt{ font-weight:700; }
.tool .ts{ color:var(--text-muted); font-size:13px; line-height:1.45; }
.tool .role{
  flex:none; padding:3px 10px; transform:skewX(var(--skew));
  font:700 11px/1.4 var(--font-ui); white-space:nowrap;
}
.tool .role.dev{ background:var(--ba-blue); color:#fff; }
.tool .role.lead{ background:var(--ba-yellow); color:#1C2A42; }
.tool .lock{
  flex:none; padding:3px 8px; border:1px solid var(--hairline); border-radius:var(--r-sm);
  color:var(--text-muted); font:500 10.5px/1.4 var(--font-mono); white-space:nowrap;
}
.tool .arr{ flex:none; color:var(--ba-blue); font-weight:700; }

/* ------------------------------------------------------------------- pins -- */
.pins{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.pin{
  position:relative; background:var(--panel); border-radius:var(--r-md);
  box-shadow:var(--shadow-card); padding:12px 14px; min-height:74px;
}
.pin-type{
  display:inline-block; margin-bottom:6px; padding:1px 8px;
  background:#E3F1FE; color:var(--ba-blue); border-radius:var(--r-sm);
  font:600 10.5px/1.6 var(--font-mono); text-transform:uppercase;
}
.pin--tweet .pin-type{ background:#E8F6FE; }
.pin-title{ display:block; margin:0; color:var(--text); font-weight:700; font-size:14.5px; text-decoration:none; }
a.pin-title:hover{ color:var(--ba-blue); }
.pin-body{ margin:4px 0 0; color:var(--text-muted); font-size:13px; line-height:1.5; }
.pin-body:empty{ display:none; }
.pin-edit{
  position:absolute; top:8px; right:8px; cursor:pointer;
  border:1px solid var(--sep); border-radius:var(--r-sm); background:var(--panel);
  color:var(--text-muted); font:500 11px var(--font-mono); padding:2px 8px;
}
.pin-edit:hover{ color:var(--ba-blue); border-color:var(--ba-blue); }
.pin--add{
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  background:none; border:2px dashed var(--hairline); border-radius:var(--r-md);
  color:var(--ink-muted); font:600 13px var(--font-ui);
}
.pin--add:hover{ border-color:var(--ba-blue); color:var(--ba-blue); }
.pin--form{ grid-column:1 / -1; display:flex; flex-direction:column; gap:8px; }
.pin--form select, .pin--form input, .pin--form textarea{
  font:500 13.5px/1.5 var(--font-ui); color:var(--text);
  border:1px solid var(--sep); border-radius:var(--r-sm);
  padding:7px 9px; background:#FBFDFF;
}
.pin--form textarea{ min-height:64px; resize:vertical; }
.pin-form-row{ display:flex; gap:8px; flex-wrap:wrap; }
.pin-form-row .ba-btn{ padding:9px 22px; font-size:14px; }
.pin-err{ margin:0; color:var(--dnd); font:500 12.5px var(--font-mono); }

/* ------------------------------------------------------------------ roll --- */
.roll__stage{
  background:var(--panel); border-radius:var(--r-md); box-shadow:var(--shadow-card);
  min-height:210px; padding:18px 16px 14px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
}
.roll__hint{ margin:0; color:var(--text-muted); font:500 12.5px/1.6 var(--font-mono); text-align:center; }
.card-pull{
  --tier:var(--tier-1);
  position:relative; width:150px; border-radius:var(--r-md);
  border:3px solid var(--tier); background:#F7FBFF;
  padding:10px 10px 12px; text-align:center; overflow:hidden;
}
.card-pull.in{ animation:pull-in .42s var(--ease-out); }
@keyframes pull-in{
  from{ transform:translateY(14px) scale(.92); opacity:0; }
  to{ transform:none; opacity:1; }
}
.card-pull .corner{
  position:absolute; top:6px; left:6px;
  color:var(--tier); font:800 12px/1 var(--font-ui);
}
.pull-portrait{ width:96px; height:96px; object-fit:cover; border-radius:var(--r-sm); }
.card-pull .glyph{ display:block; font-size:44px; line-height:96px; color:var(--tier); }
.pull-stars{ display:block; margin-top:6px; color:var(--tier); font-size:14px; letter-spacing:.18em; }
.pull-name{ display:block; margin-top:2px; color:var(--text); font:700 14px/1.3 var(--font-ui); }
.card-pull.rare::after{
  content:''; position:absolute; inset:-40% auto -40% -60%; width:45%;
  background:linear-gradient(105deg, rgba(255,255,255,0), rgba(255,255,255,.65), rgba(255,255,255,0));
  transform:rotate(8deg);
  animation:shimmer 1.1s var(--ease) .15s both;
  pointer-events:none;
}
@keyframes shimmer{ from{ translate:0; } to{ translate:340% 0; } }
.pull-row{ display:flex; gap:14px; justify-content:center; margin-top:16px; flex-wrap:wrap; }
.pull-btn{ min-width:150px; font-size:16.5px; padding:13px 28px; }

/* envelopes: the reveal step. Tier color = the paper inside, per the game's
   gacha mail icon (reference/ba-ui/00_Images/Gacha_Icon_Mail_1.png). */
.env-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:8px; width:100%; }
.env-grid.single{ display:flex; justify-content:center; }
.env{
  position:relative; aspect-ratio:5/4; width:100%; cursor:pointer;
  background:#fff; border:1.5px solid var(--sep); border-radius:var(--r-md);
  overflow:hidden; padding:0;
  transition:transform var(--dur-micro) var(--ease);
}
.env:hover{ transform:translateY(-2px); }
.env-grid.single .env{ width:150px; aspect-ratio:5/4; }
.env-paper{
  position:absolute; left:14%; right:14%; top:8%; height:40%;
  background:var(--tier); border-radius:3px;
}
.env-front{
  position:absolute; left:0; right:0; bottom:0; height:58%;
  background:#fff; border-top:1px solid var(--hairline);
}
.env-flap{
  position:absolute; left:0; right:0; top:0; height:52%;
  background:#F4F9FE;
  clip-path:polygon(0 0, 100% 0, 50% 100%);
}
.mini-card{
  border:2px solid var(--tier); border-radius:var(--r-md);
  background:#F7FBFF; padding:4px 4px 5px; text-align:center;
}
.mini-card.in{ animation:pull-in .3s var(--ease-out); }
.mini-card img{ width:100%; aspect-ratio:1; object-fit:cover; border-radius:var(--r-sm); display:block; }
.mini-card .mc-glyph{ display:block; width:100%; aspect-ratio:1; line-height:2.4; font-size:26px; color:var(--tier); }
.mini-card .mc-stars{ display:block; margin-top:2px; color:var(--tier); font-size:9.5px; letter-spacing:.14em; }
.mini-card .mc-name{
  display:block; font:700 10.5px/1.3 var(--font-ui); color:var(--text);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.reveal-all{
  border:none; background:none; cursor:pointer; padding:0;
  color:var(--ba-blue); font:600 12.5px/1.6 var(--font-mono); text-decoration:underline;
}
.roll__count{
  margin:10px 0 0; text-align:center;
  color:var(--ink-muted); font:500 12.5px/1.6 var(--font-mono);
}
.evt-toggle{
  display:flex; align-items:center; justify-content:center; gap:9px;
  margin-top:12px; cursor:pointer; user-select:none;
  color:var(--ink-muted); font:500 12.5px/1.6 var(--font-mono);
}
.evt-toggle input{ position:absolute; opacity:0; width:0; height:0; }
.evt-toggle .box{
  width:36px; height:20px; border-radius:10px; position:relative; flex:none;
  background:var(--text-faint); transition:background var(--dur) var(--ease);
}
.evt-toggle .box::after{
  content:''; position:absolute; top:2px; left:2px; width:16px; height:16px;
  border-radius:50%; background:#fff;
  transition:transform var(--dur) var(--ease);
}
.evt-toggle input:checked + .box{ background:var(--ba-blue); }
.evt-toggle input:checked + .box::after{ transform:translateX(16px); }
.evt-toggle input:focus-visible + .box{ outline:2px solid var(--ba-blue); outline-offset:2px; }

/* ------------------------------------------------------------- collection -- */
.coll-stats{ margin:0 0 10px; color:var(--ink-muted); font:500 12.5px/1.7 var(--font-mono); }
.coll-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(50px,1fr)); gap:9px; }
.coll-item{
  position:relative; border:2px solid var(--tier); border-radius:var(--r-md);
  background:#fff; padding:2px;
}
.coll-item img{ width:100%; aspect-ratio:1; object-fit:cover; border-radius:var(--r-sm); display:block; }
.coll-item .n{
  position:absolute; right:-5px; bottom:-5px;
  background:var(--ba-navy); color:#fff;
  font:600 9.5px/1 var(--font-mono); border-radius:8px; padding:2.5px 5px;
}

.coll-filters{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:12px;
}
.coll-filters input[type="search"]{
  flex:1; min-width:130px; padding:7px 10px;
  border:1px solid var(--sep); border-radius:var(--r-sm);
  font:500 13px/1.5 var(--font-ui); color:var(--text); background:var(--panel);
}
.fchips{ display:flex; gap:5px; }
.fchips button{
  --fc:var(--ba-blue);
  padding:5px 10px; cursor:pointer;
  border:1.5px solid var(--sep); border-radius:var(--r-sm);
  background:var(--panel); color:var(--text-muted);
  font:600 11.5px/1.4 var(--font-ui);
}
.fchips button.on{ border-color:var(--fc); color:#fff; background:var(--fc); }
.coll-filters select{
  padding:6px 8px; border:1px solid var(--sep); border-radius:var(--r-sm);
  background:var(--panel); color:var(--text); font:600 12px/1.5 var(--font-ui);
}

/* ------------------------------------------------------------ tweet embeds -- */
.tweet-embed{ margin-top:8px; border:1px solid var(--sep); border-radius:var(--r-md); padding:10px 12px; }
.te-head{ display:flex; align-items:center; gap:8px; }
.te-av{ width:28px; height:28px; border-radius:50%; }
.te-who{ display:flex; flex-direction:column; line-height:1.25; }
.te-who b{ font-size:12.5px; color:var(--text); }
.te-who span{ font:500 11px var(--font-mono); color:var(--text-muted); }
.te-text{ margin:8px 0 0; font-size:13px; line-height:1.5; color:var(--text); white-space:pre-wrap; }
.te-media{ margin-top:8px; width:100%; border-radius:var(--r-sm); display:block; max-height:300px; object-fit:cover; }
video.te-media{ object-fit:contain; background:#000; }
.te-stats{ margin:8px 0 0; font:500 11px/1.5 var(--font-mono); color:var(--text-muted); }

/* ------------------------------------------------------------------- wall -- */
.wall-composer{ display:flex; flex-direction:column; gap:9px; }
.wc-meta{ display:flex; gap:8px; }
.wc-meta input{
  flex:1; min-width:0; padding:7px 10px;
  border:1px solid var(--sep); border-radius:var(--r-sm);
  font:500 13px/1.5 var(--font-ui); color:var(--text); background:#FBFDFF;
}
.wc-tabs{ display:flex; gap:6px; }
.wc-tab{
  padding:5px 14px; cursor:pointer;
  border:1.5px solid var(--sep); border-radius:var(--r-sm);
  background:var(--panel); color:var(--text-muted); font:600 12px/1.5 var(--font-ui);
}
.wc-tab.on{ background:var(--ba-blue); border-color:var(--ba-blue); color:#fff; }
.wall-composer textarea{
  min-height:76px; resize:vertical; padding:8px 10px;
  border:1px solid var(--sep); border-radius:var(--r-sm);
  font:500 13.5px/1.5 var(--font-ui); color:var(--text); background:#FBFDFF;
}
.wc-draw{ display:flex; flex-direction:column; gap:8px; align-items:flex-start; }
#wallCanvas{
  width:100%; max-width:320px; aspect-ratio:4/3; touch-action:none;
  border:1.5px solid var(--sep); border-radius:var(--r-sm); background:#fff; cursor:crosshair;
}
.wc-palette{ display:flex; gap:6px; align-items:center; }
.wc-palette button[data-c]{
  width:22px; height:22px; border-radius:50%; cursor:pointer;
  background:var(--c); border:2px solid var(--sep); padding:0;
}
.wc-palette button[data-c].on{ border-color:var(--ba-navy); }
.wc-clear{
  border:none; background:none; cursor:pointer; padding:0 4px;
  color:var(--ba-blue); font:600 12px/1.6 var(--font-mono); text-decoration:underline;
}
.wc-row{ display:flex; gap:12px; align-items:center; }
.wall-feed{ display:flex; flex-direction:column; gap:10px; margin-top:12px; }
.wall-empty{ color:var(--ink-muted); font:500 12.5px/1.6 var(--font-mono); text-align:center; margin:8px 0 0; }
.wpost{
  background:var(--panel); border-radius:var(--r-md);
  box-shadow:var(--shadow-card); padding:12px 14px;
}
.wp-head{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.wp-title{ color:var(--text); font-size:14.5px; }
.wp-title:empty{ display:none; }
.wp-by{ color:var(--ba-blue); font:600 12px/1.5 var(--font-ui); }
.wp-time{ color:var(--text-faint); font:500 11px/1.5 var(--font-mono); }
.wp-img{ margin-top:8px; border:1px solid var(--sep); border-radius:var(--r-sm); max-width:320px; width:100%; display:block; }
.wp-body{ margin:6px 0 0; font-size:13.5px; line-height:1.55; color:var(--text); white-space:pre-wrap; }
.wp-reply{
  margin-top:10px; padding:8px 12px;
  background:#F0F7FE; border-left:3px solid var(--ba-blue); border-radius:var(--r-sm);
}
.wp-reply b{ color:var(--ba-blue); font-size:12.5px; }
.wp-reply p{ margin:3px 0 0; font-size:13px; line-height:1.5; color:var(--text); white-space:pre-wrap; }
.wp-actions{ display:flex; gap:14px; margin-top:10px; align-items:center; flex-wrap:wrap; }
.wp-actions button{
  border:none; background:none; cursor:pointer; padding:0;
  color:var(--text-muted); font:600 12px/1.6 var(--font-mono);
}
.wp-actions button:hover{ color:var(--ba-blue); }
.wp-like.on{ color:var(--tier-3); }
.wp-del:hover{ color:var(--dnd); }
.wp-comments{ margin-top:10px; border-top:1px solid var(--sep); padding-top:8px; display:flex; flex-direction:column; gap:8px; }
.wcomment{ font-size:13px; line-height:1.5; color:var(--text); }
.wcomment b{ color:var(--ba-blue); font-size:12px; }
.wcomment .wp-time{ margin-left:6px; }
.wcomment p{ margin:2px 0 0; white-space:pre-wrap; }
.wc-add{ display:flex; gap:6px; flex-wrap:wrap; }
.wc-add input, .wc-add textarea{
  padding:6px 9px; border:1px solid var(--sep); border-radius:var(--r-sm);
  font:500 12.5px/1.5 var(--font-ui); color:var(--text); background:#FBFDFF;
}
.wc-add input{ width:110px; }
.wc-add textarea{ flex:1; min-width:150px; min-height:34px; resize:vertical; }
.wc-add .ba-btn{ padding:7px 16px; font-size:12.5px; }
.wp-replyform{ display:flex; gap:6px; margin-top:8px; flex-wrap:wrap; }
.wp-replyform textarea{
  flex:1; min-width:150px; min-height:40px; resize:vertical; padding:6px 9px;
  border:1px solid var(--sep); border-radius:var(--r-sm);
  font:500 12.5px/1.5 var(--font-ui); color:var(--text); background:#FBFDFF;
}
.wp-replyform .ba-btn{ padding:7px 16px; font-size:12.5px; }

/* ------------------------------------------------------- crop and previews -- */
.crop-canvas{
  width:280px; max-width:100%; aspect-ratio:1; display:block; margin:0 auto;
  border:1.5px solid var(--sep); border-radius:var(--r-md);
  background:#F0F5FA; cursor:grab; touch-action:none;
}
.crop-canvas:active{ cursor:grabbing; }
.crop-row{ display:flex; align-items:center; gap:10px; margin:12px 0; }
.crop-row input[type="range"]{ flex:1; }
.crop-preview{
  width:44px; height:44px; flex:none; border-radius:var(--r-sm);
  border:1px solid var(--sep); object-fit:cover; background:#fff;
}
.icon-thumb{
  width:44px; height:44px; flex:none; border-radius:var(--r-sm);
  border:1px solid var(--sep); object-fit:cover; background:#E3F1FE;
}
.pin-preview{ grid-column:1 / -1; }
.pin-preview .pin{ box-shadow:none; border:1.5px dashed var(--sep); }
.pin-preview-label{ margin:0 0 4px; color:var(--text-faint); font:600 10.5px/1.6 var(--font-mono); text-transform:uppercase; }

/* owner in-place text editing */
.ed-on [data-edit], .ed-on [data-edit-changelog]{ cursor:pointer; }
.ed-on [data-edit]:hover, .ed-on [data-edit-changelog]:hover{
  outline:2px dashed var(--ba-yellow); outline-offset:3px;
}
.ed-form{ display:flex; flex-direction:column; gap:8px; margin:6px 0; }
.ed-form input, .ed-form textarea{
  width:100%; padding:7px 10px;
  border:1.5px solid var(--ba-blue); border-radius:var(--r-sm);
  font:inherit; color:var(--text); background:#FBFDFF;
}
.ed-form textarea{ min-height:84px; resize:vertical; }
.ed-form .ed-row{ display:flex; gap:8px; justify-content:center; }
.ed-form .ba-btn{ padding:7px 18px; font-size:13px; }
.tool-pencil{
  flex:none; width:24px; height:24px; cursor:pointer;
  border:1px solid var(--sep); border-radius:var(--r-sm); background:var(--panel);
  color:var(--text-muted); font-size:12px; line-height:1;
}
.tool-pencil:hover{ color:var(--ba-blue); border-color:var(--ba-blue); }
.tool-edit-row{
  display:flex; flex-direction:column; gap:8px;
  padding:10px 14px; background:var(--panel);
  border-radius:var(--r-md); box-shadow:var(--shadow-card);
}
.tool-edit-row input, .tool-edit-row textarea{
  padding:7px 9px; border:1px solid var(--sep); border-radius:var(--r-sm);
  font:500 13px/1.5 var(--font-ui); color:var(--text); background:#FBFDFF;
}
.tool-edit-row textarea{ min-height:56px; resize:vertical; }

/* ----------------------------------------------------------------- footer -- */
.footer{ margin-top:44px; text-align:center; }
.footer .seal{
  width:40px; height:40px; margin:0 auto 10px; border-radius:50%;
  border:2px solid var(--ink-muted); background:none; cursor:pointer; padding:0;
  display:flex; align-items:center; justify-content:center;
  color:var(--ba-yellow); font-size:15px;
  transition:transform var(--dur-micro) var(--ease);
}
.footer .seal:hover{ transform:translateY(-2px); }
.footer .end{ margin:0 0 14px; color:var(--ink-muted); font:500 13px/1.6 var(--font-ui); }
.changelog{
  background:var(--panel); border-radius:var(--r-md); box-shadow:var(--shadow-card);
  padding:10px 14px; text-align:left;
}
.cl{ display:flex; gap:12px; padding:4px 0; font:500 12.5px/1.6 var(--font-mono); }
.cl .dt{ color:var(--ba-blue); flex:none; }
.cl .ev{ color:var(--text-muted); }
.footer .meta{ margin:14px 0 0; color:var(--ink-muted); font:500 12px/1.8 var(--font-mono); }
.footer .meta b{ color:var(--ink); }
.footer .meta a{ color:var(--ink-link); }

/* ----------------------------------------------------------------- toasts -- */
.toaster{
  position:fixed; right:14px; bottom:14px; z-index:60;
  display:flex; flex-direction:column; gap:8px; max-width:290px;
}
.toast{
  background:var(--panel); border-left:4px solid var(--ba-blue);
  border-radius:var(--r-md); box-shadow:var(--shadow-pop);
  padding:10px 14px; transform:skewX(var(--skew));
  animation:toast-in .25s var(--ease-out);
}
.toast > *{ transform:skewX(calc(var(--skew) * -1)); }
.toast .tx{ display:flex; flex-direction:column; }
.toast .tt{ font:700 13.5px/1.4 var(--font-ui); color:var(--text); }
.toast .ts{ font:500 12px/1.5 var(--font-mono); color:var(--text-muted); }
.toast.out{ opacity:0; transition:opacity .3s var(--ease); }
@keyframes toast-in{ from{ transform:skewX(var(--skew)) translateX(24px); opacity:0; } }

/* ------------------------------------------------------------------ modal -- */
.modal{
  position:fixed; inset:0; z-index:80;
  display:flex; align-items:center; justify-content:center;
  background:rgba(16,24,40,.55); padding:var(--gutter);
}
.modal__panel{
  background:var(--panel); border-radius:var(--r-lg); box-shadow:var(--shadow-pop);
  padding:22px 24px; width:min(360px,100%);
}
.modal__panel h3{ margin:0 0 6px; font:800 italic 20px/1.3 var(--font-ui); color:var(--ba-navy); }
.modal__panel p{ margin:0 0 12px; color:var(--text-muted); font-size:14px; }
.modal__panel input{
  width:100%; margin-bottom:14px; padding:9px 11px;
  border:1px solid var(--sep); border-radius:var(--r-sm);
  font:500 14px var(--font-mono); color:var(--text); background:#FBFDFF;
}
.modal__row{ display:flex; gap:10px; }

/* ----------------------------------------------------------------- player -- */
.player{
  position:fixed; left:14px; bottom:14px; z-index:60;
  width:min(300px, calc(100vw - 28px));
  background:var(--panel); border-radius:var(--r-md); box-shadow:var(--shadow-pop);
  padding:8px 10px;
}
.player__title-row{ display:flex; align-items:center; gap:8px; }
.player__title{
  flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font:600 12px/1.6 var(--font-mono); color:var(--text);
}
.player__winbtns{ display:flex; gap:4px; }
.player__min,.player__close{
  width:22px; height:22px; cursor:pointer; border:none; border-radius:var(--r-sm);
  background:var(--sep); color:var(--text-muted); font-size:10px; line-height:1;
}
.player__min:hover,.player__close:hover{ background:#D7E5F1; }
.player__controls{ display:flex; align-items:center; gap:8px; margin-top:8px; }
.player__play{
  width:30px; height:30px; flex:none; cursor:pointer;
  border:none; border-radius:50%; background:var(--ba-blue); color:#fff; font-size:12px;
}
.player__play:active{ background:var(--ba-blue-press); }
.player__progress{
  flex:1; height:6px; border-radius:3px; background:var(--sep);
  cursor:pointer; overflow:hidden; touch-action:none;
}
.player__progress-bar{ height:100%; width:0; background:var(--ba-blue); }
.player__time{ flex:none; font:500 10.5px/1 var(--font-mono); color:var(--text-muted); }
.player__vol{ display:flex; align-items:center; gap:5px; flex:none; }
.player__volbtn{
  width:22px; height:22px; cursor:pointer; border:none; border-radius:var(--r-sm);
  background:none; color:var(--text-muted); font-size:12px;
}
.player__volslider{
  width:44px; height:6px; border-radius:3px; background:var(--sep);
  cursor:pointer; overflow:hidden; touch-action:none;
}
.player__vollevel{ height:100%; width:50%; background:var(--ba-blue); }

/* ----------------------------------------------------------- small screens -- */
@media (max-width:480px){
  .pins{ grid-template-columns:1fr; }
  .callsign{ font-size:34px; }
  .tool{ flex-wrap:wrap; }
  .tool .tx{ flex-basis:calc(100% - 56px); }
  .tool .role,.tool .lock{ margin-left:56px; }
}

/* --------------------------------------------------------- reduced motion -- */
@media (prefers-reduced-motion: reduce){
  :root{ transition:none; }
  .mimori-halo,.halo .ring{ animation:none; }
  .card-pull.in{ animation:none; }
  .card-pull.rare::after{ animation:none; opacity:0; }
  .toast{ animation:none; }
  .tool,.ba-btn,.ctrl,.evt-toggle .box,.evt-toggle .box::after{ transition:none; }
}