/* ============================================================
   Ramen Rewards — shared styles (customer app, auth, admin)
   Ported from the approved prototype. Mobile-first.
   ============================================================ */
:root{
  --red:#EE5007; --red-dark:#c01f27; --red-deep:#7d1418;   /* site .custom-btn colors */
  --bg:#121212; --bg2:#181818; --card:#1d1d1d; --card2:#262626;
  --cream:#ffffff; --cream-dim:#e3e3e3; --muted:#9b9b9b;
  --gold:#F8CB2E; --gold-deep:#d9a90f;                    /* site primary yellow */
  --rare:#5ec8e8; --epic:#c07bf0; --green:#7ec96b;
  --radius:18px;
  --shadow:0 8px 24px rgba(0,0,0,.45);
  --disp:"Josefin Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:16px;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}

/* The installed app, where the bottom bar was still sliding away.
   Nothing was stopping the DOCUMENT from moving. On iOS in particular, when
   an inner scroller reaches its end the gesture chains to the page behind it
   and the whole thing rubber-bands — which drags the shell, and the nav
   pinned to the bottom of it, up off the screen. In a browser tab you barely
   notice; installed, with no URL bar to snap back to, it just looks broken.

   overflow:hidden stops the page scrolling at all; overscroll-behavior:none
   stops the bounce. Scoped to the app: login.php is an ordinary page and has
   to be able to scroll on a short screen. */
html.shell, html.shell body{
  overflow:hidden;
  overscroll-behavior:none;
  /* Belt and braces on iOS versions that predate overscroll-behavior. */
  position:relative;
}
body{
  font-family:"Josefin Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;  /* site body font */
  background:#0a0a0a; color:var(--cream);
  display:flex; justify-content:center;
}
.disp{font-family:var(--disp)}

/* ---------- app shell ---------- */
/* The shell is exactly one viewport tall, and only main scrolls inside it.
   It was min-height, which is the bug behind "the bottom bar scrolls off the
   screen and I have to scroll back up": min-height lets the shell GROW past
   the viewport, and nav is absolutely positioned at the bottom of the shell —
   so it ends up below the fold and the page itself scrolls instead of main.

   height, not min-height. Three layers, each a fallback for the one after:

   100vh   for anything that has never heard of the viewport units below. It
           is wrong under a URL bar, which is far better than the property
           being dropped and the height collapsing to auto.
   100dvh  kept only as the middle rung, for the same reason.
   100svh  what actually applies everywhere that matters, and the fix for
           "the bottom row is cut off until I refresh".

   Why svh and not dvh. dvh is resolved against the browser UI as it is right
   now, and on Android the first paint after the sign-in redirect happens
   before Chrome has settled its URL bar — so dvh resolves against the taller
   viewport, the shell is laid out a URL bar too long, and nav sits below the
   fold. The document cannot scroll (html.shell is overflow:hidden) and the
   shell is overflow:hidden too, so there is no way to reach it; reloading
   re-resolves dvh against a settled browser and it looks fixed.

   svh is the static "browser UI showing" viewport. It does not depend on
   that transient state, so it is right on the first paint. And because this
   document never scrolls, the URL bar never collapses — so the dynamic
   viewport is permanently equal to the small one anyway, and svh costs
   nothing here that dvh was buying. */
#app{
  width:100%; max-width:430px; position:relative;
  height:100vh; height:100dvh; height:100svh;
  background:radial-gradient(1200px 500px at 50% -200px, #33190a 0%, transparent 60%), var(--bg);
  display:flex; flex-direction:column; overflow:hidden;
  box-shadow:0 0 60px rgba(0,0,0,.6);
}
#app::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.05;
  background-image:radial-gradient(circle at 50% 100%, transparent 9px, var(--cream) 10px, transparent 11px);
  background-size:36px 18px;
}
header.rw{
  padding:calc(env(safe-area-inset-top) + 12px) 18px 12px;
  display:flex; align-items:center; gap:10px; z-index:5;
  background:#000; border-bottom:1px solid #242424;   /* matches site sticky navbar */
}
.logo{font-family:var(--disp); font-weight:700; letter-spacing:.5px; font-size:1.05rem; line-height:1.05}
.logo small{display:block; font-weight:600; font-size:.62rem; color:var(--gold); letter-spacing:2.5px; text-transform:uppercase}
.logo-bowl{width:40px;height:40px;border-radius:12px;background:var(--cream);display:flex;align-items:center;justify-content:center;font-size:20px;box-shadow:var(--shadow);overflow:hidden;flex-shrink:0}
.logo-bowl img{width:84%;height:84%;object-fit:contain;display:block}
.logo-bowl.big{width:64px;height:64px;border-radius:18px;margin:0 auto 12px;font-size:32px}
.hdr-spacer{flex:1}
.chip{background:var(--card); border:1px solid #3a3a3a; border-radius:999px; padding:6px 12px; font-size:.8rem; font-weight:700; display:flex; align-items:center; gap:6px}
.chip .num{color:var(--gold)}
.icon-btn{background:var(--card);border:1px solid #3a3a3a;color:var(--cream);border-radius:999px;width:34px;height:34px;font-size:15px;cursor:pointer}
/* min-height:0 is load-bearing. A flex item defaults to min-height:auto, so
   main refuses to shrink below its own content and pushes the shell taller
   than the viewport — overflow-y:auto then never engages and the whole page
   scrolls instead, taking the bottom bar with it. */
main.rw{flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; padding:6px 18px 110px; z-index:2;
  -webkit-overflow-scrolling:touch;
  /* Keeps the gesture inside this box when it hits the top or the bottom,
     rather than handing it to the page behind. */
  overscroll-behavior:contain}
.screen{display:none; animation:screenIn .3s ease both}
.screen.active{display:block}
@keyframes screenIn{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
h2.sec{font-family:var(--disp); font-size:1.25rem; margin:18px 0 10px; display:flex; align-items:center; gap:8px}
h2.sec span.jp{font-size:.7rem; color:var(--muted); font-weight:500; letter-spacing:1px}

/* ---------- the switch ----------
   裏切り, as a moment. Fires once when somebody leaves one team for another,
   then leaves on its own — the thing that was wrong before was not the drama,
   it was that the app kept the verdict for thirty days. */
.betrayal {
  position: absolute; inset: 0; z-index: 70; display: grid; place-items: center;
  background: rgba(0,0,0,.82); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  animation: betrayIn .18s ease both;
}
.betrayal__box { text-align: center; padding: 0 28px; }
.betrayal__kanji {
  font-family: var(--disp); font-size: 3.4rem; line-height: 1; color: #e23b2e;
  text-shadow: 0 0 22px rgba(226,59,46,.55);
  animation: betrayStamp .42s cubic-bezier(.2,1.5,.4,1) both;
}
.betrayal__word {
  font-family: var(--disp); font-weight: 700; letter-spacing: 6px;
  font-size: .82rem; color: var(--cream); opacity: .75; margin-top: 8px;
}
.betrayal__line { margin-top: 14px; font-weight: 700; color: var(--cream); font-size: 1.02rem; }
.betrayal__sub  { margin-top: 8px; font-size: .8rem; color: var(--muted); }
/* It waits for a tap now, so it has to say so. Faded in after the stamp
   lands rather than appearing with it — arriving last is what makes it read
   as the instruction rather than part of the announcement. */
.betrayal__tap {
  margin-top: 22px; font-size: .72rem; letter-spacing: 2px; text-transform: uppercase;
  color: var(--muted); opacity: 0; animation: betrayTap .4s ease .55s forwards;
}
@keyframes betrayTap { from { opacity: 0 } to { opacity: .8 } }
@keyframes betrayIn   { from { opacity: 0 } to { opacity: 1 } }
@keyframes betrayStamp {
  0%   { transform: scale(2.6) rotate(-9deg); opacity: 0 }
  60%  { transform: scale(.92) rotate(2deg);  opacity: 1 }
  100% { transform: none; opacity: 1 }
}
/* Somebody who has asked for less movement still gets told what happened. */
@media (prefers-reduced-motion: reduce) {
  .betrayal, .betrayal__kanji { animation: none; }
  /* Without this the prompt keeps the animation's starting opacity of 0 and
     the one instruction on screen is invisible — which matters more now
     that the panel does not close on its own. */
  .betrayal__tap { animation: none; opacity: .8; }
}

/* ---------- bottom nav ---------- */
nav.rw{
  position:absolute; bottom:0; left:0; right:0; z-index:20;
  background:rgba(0,0,0,.92); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-top:1px solid #2e2e2e;
  display:flex; padding:8px 6px calc(env(safe-area-inset-bottom) + 10px);
}
nav.rw button{
  flex:1; background:none; border:none; color:var(--muted); font-family:var(--disp); cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:3px; font-size:.62rem; font-weight:700;
  padding:4px 0; position:relative; transition:transform .15s;
}
nav.rw button .ico{font-size:21px; transition:transform .2s cubic-bezier(.34,1.56,.64,1)}
nav.rw button.on{color:var(--gold)}
nav.rw button.on .ico{transform:translateY(-3px) scale(1.18)}
nav.rw button:active .ico{transform:scale(.85)}
nav.rw .badge{
  position:absolute; top:-2px; right:calc(50% - 20px); background:var(--red); color:#fff;
  border-radius:999px; min-width:16px; height:16px; font-size:.6rem; display:flex; align-items:center;
  justify-content:center; padding:0 4px; animation:pulseBadge 1.6s infinite;
}
@keyframes pulseBadge{0%,100%{transform:scale(1)} 50%{transform:scale(1.25)}}

/* ---------- panels & buttons ---------- */
.panel{
  background:linear-gradient(160deg,var(--card),var(--card2));
  border:1px solid #3a3a3a; border-radius:var(--radius); padding:16px; margin-bottom:14px;
  box-shadow:var(--shadow); position:relative; overflow:hidden;
}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:linear-gradient(160deg,var(--red),var(--red-dark)); color:#fff; border:none;
  border-radius:100px; padding:13px 20px; font:inherit; font-weight:700; font-size:.95rem;
  cursor:pointer; box-shadow:0 4px 0 var(--red-deep), 0 8px 18px rgba(0,0,0,.4);
  transition:transform .1s, box-shadow .1s; width:100%;
}
.btn:active{transform:translateY(3px); box-shadow:0 1px 0 var(--red-deep)}
.btn.gold{background:linear-gradient(160deg,var(--gold),var(--gold-deep)); color:#3a2503; box-shadow:0 4px 0 #b08d12,0 8px 18px rgba(0,0,0,.4)}
.btn.ghost{background:var(--card2); box-shadow:0 4px 0 #0f0f0f; border:1px solid #3a3a3a}
.btn[disabled]{opacity:.45; pointer-events:none}

/* ---------- pills / sub-tabs ---------- */
.pills{display:flex; gap:7px; margin:4px 0 14px}
.pill{flex:1; border:1px solid #3a3a3a; background:var(--card); color:var(--cream-dim); font-family:var(--disp);
  font-size:.74rem; font-weight:700; padding:9px 4px; border-radius:999px; cursor:pointer; transition:all .15s}
.pill.on{background:linear-gradient(160deg,var(--red),var(--red-dark)); border-color:var(--red); color:#fff}
.pill:active{transform:scale(.95)}
.sub{display:none; animation:screenIn .25s ease both}
.sub.active{display:block}

/* ---------- home ---------- */
.hero{text-align:center; padding:22px 16px 18px}
.slurps-big{font-family:var(--disp); font-size:3.1rem; font-weight:700; color:var(--gold); line-height:1; text-shadow:0 2px 12px rgba(248,203,46,.35)}
.slurps-label{font-family:var(--disp); color:var(--cream-dim); font-size:.8rem; font-weight:700; letter-spacing:2px; text-transform:uppercase; margin-top:4px}
.rank-row{display:flex; align-items:center; gap:10px; margin-top:16px}
.rank-emoji{font-size:46px; line-height:1; filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}
.rank-info{flex:1; text-align:left}
.rank-name{font-family:var(--disp); font-weight:700; font-size:1rem}
.rank-next{font-size:.72rem; color:var(--muted)}
.bar{height:12px; background:#141414; border-radius:999px; overflow:hidden; margin-top:6px; border:1px solid #333333}
.bar > i{display:block; height:100%; border-radius:999px;
  background:linear-gradient(90deg,var(--red),var(--gold));
  background-size:200% 100%; animation:barShimmer 2.5s linear infinite;
  transition:width 1s cubic-bezier(.22,1,.36,1); width:0}
@keyframes barShimmer{to{background-position:-200% 0}}
.streak-panel{display:flex; align-items:center; gap:14px}
.flame{font-size:38px; animation:flameWiggle 1.8s ease-in-out infinite; transform-origin:50% 90%}
@keyframes flameWiggle{0%,100%{transform:rotate(-4deg) scale(1)} 50%{transform:rotate(4deg) scale(1.08)}}
.streak-days{display:flex; gap:6px; margin-top:8px}
.day-dot{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:.6rem;font-weight:800;background:#141414;border:1px solid #333333;color:var(--muted)}
.day-dot.hit{background:linear-gradient(160deg,var(--red),var(--red-dark)); color:#fff; border-color:var(--red)}
.freeze-chip{font-size:.7rem; background:#1c2c44; border:1px solid #3a5e92; color:#9cc4f5; padding:4px 10px; border-radius:999px; font-weight:700}
.notif{background:linear-gradient(120deg,#3a2e05,#574508); border:1.5px solid var(--gold); border-radius:var(--radius);
  padding:14px 16px; margin-bottom:14px; display:flex; align-items:center; gap:12px; cursor:pointer; animation:notifGlow 2s ease-in-out infinite}
@keyframes notifGlow{0%,100%{box-shadow:0 0 0 rgba(248,203,46,0)} 50%{box-shadow:0 0 24px rgba(248,203,46,.35)}}
.notif .pk{font-size:34px; animation:packBounce 1.2s cubic-bezier(.34,1.56,.64,1) infinite}
@keyframes packBounce{0%,100%{transform:translateY(0) rotate(-4deg)} 50%{transform:translateY(-6px) rotate(4deg)}}
.notif b{color:var(--gold)}
.notif small{display:block; color:var(--cream-dim); font-size:.74rem}
.quick-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px}
/* One tile across both columns. Used by Claim Receipt, which sits above the
   pair below it rather than beside one of them. */
.quick--wide{grid-column:1 / -1}
.quick{background:var(--card); border:1px solid #3a3a3a; border-radius:var(--radius); padding:14px; text-align:center; cursor:pointer; transition:transform .15s}
.quick:active{transform:scale(.95)}
.quick .qi{font-size:26px}
.quick .qt{font-family:var(--disp); font-size:.78rem; font-weight:700; margin-top:6px}
.quick .qs{font-size:.65rem; color:var(--muted)}
/* ---------- naming the egg ---------- */
.nameegg{text-align:center; border-color:var(--gold)}
.nameegg__pet{font-size:46px; line-height:1; animation:eggwob 2.2s ease-in-out infinite}
@keyframes eggwob{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@media (prefers-reduced-motion: reduce){.nameegg__pet{animation:none}}
.nameegg__title{font-family:var(--disp); font-weight:700; font-size:1.05rem; margin:6px 0 2px}
.nameegg__sub{font-size:.72rem; color:var(--muted); margin-bottom:10px}
/* .code-input is styled for receipt codes: uppercase and widely tracked. A
   name is neither, and "NAME YOUR EGG" shouting back is not the tone. */
.nameegg .code-input{text-transform:none; letter-spacing:0; font-size:1rem}
.nameegg__row{display:flex; gap:8px; align-items:center; margin-top:10px}
.nameegg__row .btn{flex:1}
.nameegg__skip{background:none; border:0; color:var(--muted); font:inherit; font-size:.72rem;
  cursor:pointer; padding:8px 10px; text-decoration:underline}
.nameegg__skip:hover{color:var(--cream-dim)}

.bos{display:flex;align-items:center;gap:10px;justify-content:center;margin:8px 0 2px;color:var(--muted);font-size:.68rem;letter-spacing:1px}
.bos b{color:var(--gold)}

/* mascot */
.mascot-panel{display:flex; align-items:center; gap:14px}
.mascot-pet{font-size:56px; cursor:pointer; user-select:none; line-height:1; position:relative;
  animation:mascotIdle 2.6s ease-in-out infinite; transform-origin:50% 90%}
@keyframes mascotIdle{0%,100%{transform:scale(1)} 50%{transform:scale(1.05) translateY(-3px)}}
.mascot-pet.sad{animation:mascotSad 3s ease-in-out infinite; filter:saturate(.5) brightness(.85)}
@keyframes mascotSad{0%,100%{transform:rotate(-7deg) translateY(2px)} 50%{transform:rotate(-9deg) translateY(4px)}}
.mascot-pet.cheer{animation:mascotCheer .7s cubic-bezier(.34,1.56,.64,1) 2}
@keyframes mascotCheer{0%,100%{transform:rotate(0) scale(1)} 25%{transform:rotate(-12deg) scale(1.2) translateY(-10px)} 75%{transform:rotate(12deg) scale(1.2) translateY(-10px)}}
.mascot-bubble{font-size:.72rem; background:#1a1a1a; border:1px solid #3a3a3a; border-radius:12px; padding:8px 11px; color:var(--cream-dim); margin-top:6px; line-height:1.4}
.mascot-name{font-family:var(--disp); font-weight:700; font-size:1.02rem; cursor:pointer}
.mascot-name small{font-weight:700; color:var(--gold); font-size:.66rem}
.mascot-stage{font-size:.68rem; color:var(--muted)}

/* decay / boost */
.decay{border-radius:var(--radius); padding:12px 15px; margin-bottom:14px; display:flex; align-items:center; gap:11px;
  background:linear-gradient(120deg,#3a2208,#553009); border:1.5px solid #c97a1d; font-size:.8rem}
.decay b{color:var(--gold)}
.decay .di{font-size:26px}
.decay.urgent{background:linear-gradient(120deg,#3f130f,#5e1812); border-color:var(--red); animation:notifGlow 1.2s ease-in-out infinite}
.decay.urgent b{color:#ff9a8a}
.decay.expired{background:#1c1c1c; border-color:#3a3a3a; opacity:.8}

/* ---------- claim ---------- */
.code-input{width:100%; background:#141414; border:2px solid #3a3a3a; border-radius:14px;
  color:var(--cream); font:inherit; font-weight:800; font-size:1.2rem; letter-spacing:4px;
  text-align:center; padding:14px; text-transform:uppercase; outline:none; transition:border .2s}
.code-input:focus{border-color:var(--gold)}
.code-input.shake{animation:shake .4s}
@keyframes shake{0%,100%{transform:none}20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
.claim-result{margin-top:14px; display:none; text-align:center; animation:popIn .45s cubic-bezier(.34,1.56,.64,1) both}
@keyframes popIn{from{opacity:0; transform:scale(.6)} to{opacity:1; transform:scale(1)}}
.claim-result .big{font-family:var(--disp); font-size:2rem; font-weight:700; color:var(--gold)}
.earn-rows{display:flex; gap:10px; justify-content:center; margin-top:10px}
.earn-pill{background:var(--card2); border:1px solid #3a3a3a; border-radius:12px; padding:10px 14px; font-size:.8rem; font-weight:700}
.earn-pill .e{font-size:22px; display:block}

/* ---------- pack overlay ---------- */
#packOverlay{position:absolute; inset:0; z-index:50; display:none; flex-direction:column; align-items:center;
  justify-content:center; background:radial-gradient(700px 700px at 50% 40%, #33190a 0%, #0c0c0c 70%); overflow:hidden; padding:20px}
#packOverlay.show{display:flex}
#packStage{position:relative; width:100%; display:flex; flex-direction:column; align-items:center; z-index:2}
.pack{width:217px; height:300px; border-radius:14px; position:relative; cursor:pointer;
  background:#0c0c0c center/cover no-repeat;
  background-image:url("../../images/tradingcards/booster-pack.jpeg");
  box-shadow:0 18px 50px rgba(0,0,0,.6), inset 0 0 0 3px rgba(255,255,255,.12);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  animation:packFloat 2.4s ease-in-out infinite; transition:transform .15s}
.pack:active{transform:scale(.96)}
@keyframes packFloat{0%,100%{transform:translateY(0) rotate(-1.5deg)} 50%{transform:translateY(-12px) rotate(1.5deg)}}
.pack::before{content:""; position:absolute; inset:0; border-radius:14px;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.35) 45%, transparent 60%);
  background-size:300% 100%; animation:foil 2.8s linear infinite}
@keyframes foil{to{background-position:-300% 0}}
.pack .tear{position:absolute; top:0; left:0; right:0; height:40px; border-radius:14px 14px 0 0;
  background:linear-gradient(180deg,rgba(0,0,0,.78),rgba(0,0,0,.30)); border-bottom:2px dashed rgba(255,255,255,.7);
  display:flex; align-items:center; justify-content:center; font-size:.6rem; letter-spacing:2px;
  color:rgba(255,255,255,.92); font-weight:800; text-shadow:0 1px 2px rgba(0,0,0,.85)}
.pack .art{font-size:64px; filter:drop-shadow(0 6px 10px rgba(0,0,0,.5))}
.pack .pname{font-family:var(--disp); font-weight:700; letter-spacing:2px; margin-top:10px; font-size:.85rem}
.pack .pset{font-size:.6rem; letter-spacing:3px; color:rgba(255,255,255,.7); margin-top:3px}
.pack.ripping .tear{animation:ripOff .55s cubic-bezier(.5,0,.9,.4) forwards}
@keyframes ripOff{30%{transform:translateX(8px) rotate(2deg)} 100%{transform:translate(140px,-180px) rotate(38deg); opacity:0}}
.pack.ripping{animation:packShake .55s linear forwards}
@keyframes packShake{0%,40%{transform:rotate(0)} 45%{transform:rotate(-3deg)} 55%{transform:rotate(3deg)} 70%{transform:rotate(-2deg)} 100%{transform:rotate(0) scale(1.04)}}
.pack.gone{animation:packGone .4s ease forwards}
@keyframes packGone{to{transform:scale(.7) translateY(60px); opacity:0}}
#packHint{margin-top:22px; color:var(--cream-dim); font-size:.8rem; font-weight:700; letter-spacing:1px; animation:hintPulse 1.5s infinite}
@keyframes hintPulse{50%{opacity:.4}}
#revealRow{display:none; flex-direction:column; align-items:center; gap:10px; width:100%}
.rcard{width:min(240px,62vw); aspect-ratio:5/7; perspective:1000px; cursor:pointer; position:relative}
.rcard .inner{position:absolute; inset:0; transform-style:preserve-3d; transition:transform .65s cubic-bezier(.4,0,.2,1)}
.rcard.flipped .inner{transform:rotateY(180deg)}
.rcard .face{position:absolute; inset:0; backface-visibility:hidden; border-radius:14px; overflow:hidden; box-shadow:0 14px 40px rgba(0,0,0,.55)}
.rcard .back{background:var(--red-deep);
  display:flex; align-items:center; justify-content:center}
.rcard .back img{width:100%; height:100%; object-fit:cover; display:block}
.rcard .front{transform:rotateY(180deg); background:var(--card)}
.rcard .front img{width:100%; height:100%; object-fit:cover; display:block}
.cardph{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:linear-gradient(160deg,#333333,#1c1c1c);padding:12px;text-align:center}
.cardph .e{font-size:54px}
.cardph .n{font-weight:800; font-size:.9rem}
.rar-tag{position:absolute; bottom:8px; left:50%; transform:translateX(-50%);
  padding:3px 12px; border-radius:999px; font-size:.62rem; font-weight:900; letter-spacing:2px;
  text-transform:uppercase; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); z-index:3}
.rar-common .rar-tag{background:rgba(160,136,115,.85); color:#fff}
.rar-rare .rar-tag{background:rgba(36,130,160,.9); color:#dff5ff}
.rar-epic .rar-tag{background:rgba(124,52,170,.9); color:#f3dcff}
.rar-legendary .rar-tag{background:linear-gradient(90deg,#f5c542,#ffe9a0,#f5c542); color:#4a3000}
.rar-rare .front::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg,transparent 35%,rgba(140,225,255,.45) 48%,transparent 60%);
  background-size:250% 100%; animation:foil 2.2s linear infinite}
.rar-epic .front::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(220,140,255,.4) 44%,rgba(140,200,255,.4) 52%,transparent 65%);
  background-size:250% 100%; animation:foil 1.9s linear infinite}
.rar-legendary .front::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg,transparent 25%,rgba(255,230,150,.55) 40%,rgba(255,255,255,.5) 50%,rgba(255,210,90,.55) 60%,transparent 75%);
  background-size:250% 100%; animation:foil 1.6s linear infinite}
.rar-legendary .face.front{box-shadow:0 0 30px 6px rgba(248,203,46,.55)}
.rcard.flipped.rar-legendary{animation:legendShake .5s .3s}
@keyframes legendShake{20%{transform:translateX(-5px) rotate(-1deg)}40%{transform:translateX(5px) rotate(1deg)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
.rays{position:absolute; inset:-60%; pointer-events:none; opacity:0; z-index:-1;
  background:repeating-conic-gradient(rgba(248,203,46,.28) 0 8deg, transparent 8deg 16deg); border-radius:50%}
.rcard.flipped .rays.on{opacity:1; animation:raySpin 7s linear infinite}
@keyframes raySpin{to{transform:rotate(360deg)}}
.new-tag{position:absolute; top:8px; right:8px; z-index:3; background:var(--green); color:#103107;
  font-size:.6rem; font-weight:900; padding:3px 8px; border-radius:8px; letter-spacing:1px; animation:popIn .4s .5s both}
.dupe-tag{position:absolute; top:8px; right:8px; z-index:3; background:#4a4a4a; color:#e3e3e3; font-size:.6rem; font-weight:900; padding:3px 8px; border-radius:8px; animation:popIn .4s .5s both}
#revealCounter{color:var(--cream-dim); font-weight:800; font-size:.8rem; letter-spacing:1px}
#packDone{display:none; width:min(260px,80%); margin-top:6px}
#confetti{position:absolute; inset:0; pointer-events:none; z-index:60}
#packClose{position:absolute; top:calc(env(safe-area-inset-top) + 14px); right:16px; z-index:61; background:rgba(0,0,0,.4); border:1px solid #4a4a4a; color:var(--cream); width:36px; height:36px; border-radius:50%; font-size:16px; cursor:pointer}

/* ---------- collection ---------- */
.coll-head{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px}
.filters{display:flex; gap:6px; overflow-x:auto; padding:4px 0 10px; scrollbar-width:none}
.filters::-webkit-scrollbar{display:none}
.fbtn{border:1px solid #3a3a3a; background:var(--card); color:var(--cream-dim); font:inherit;
  font-size:.72rem; font-weight:800; padding:7px 13px; border-radius:999px; cursor:pointer; white-space:nowrap}
.fbtn.on{background:var(--red); border-color:var(--red); color:#fff}
.coll-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:9px}
.ccard{aspect-ratio:5/7; border-radius:10px; overflow:hidden; position:relative; cursor:pointer;
  background:var(--card); border:1px solid #3a3a3a; transition:transform .15s}
.ccard:active{transform:scale(.94)}
.ccard img{width:100%; height:100%; object-fit:cover; display:block}
.ccard.locked img,.ccard.locked .cardph{filter:brightness(.16) saturate(0) contrast(1.1)}
.ccard.locked::after{content:"?"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:30px; font-weight:900; color:rgba(247,234,216,.4)}
.ccard .dot{position:absolute; top:5px; right:5px; width:10px; height:10px; border-radius:50%; z-index:2; box-shadow:0 0 6px rgba(0,0,0,.6)}
.dot.common{background:var(--muted)} .dot.rare{background:var(--rare)} .dot.epic{background:var(--epic)}
.dot.legendary{background:var(--gold); box-shadow:0 0 8px var(--gold)}
.ccard .cnt{position:absolute; bottom:4px; right:5px; z-index:2; background:rgba(0,0,0,.65); font-size:.58rem; font-weight:800; padding:2px 6px; border-radius:6px}
.set-reward{display:flex; align-items:center; gap:12px}
.set-reward .tr{font-size:34px; animation:flameWiggle 2.2s ease-in-out infinite}
#zoom{position:absolute; inset:0; z-index:70; display:none; align-items:center; justify-content:center; background:rgba(10,6,4,.85); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); flex-direction:column; gap:14px; padding:24px}
#zoom.show{display:flex}
#zoomCard{width:min(300px,78vw); aspect-ratio:5/7; border-radius:16px; overflow:hidden; position:relative; box-shadow:0 20px 60px rgba(0,0,0,.7); animation:popIn .35s cubic-bezier(.34,1.56,.64,1)}
#zoomCard img{width:100%;height:100%;object-fit:cover}
#zoomInfo{text-align:center}
#zoomInfo .zn{font-family:var(--disp); font-weight:700; font-size:1.1rem}
#zoomInfo .zr{font-size:.72rem; letter-spacing:2px; text-transform:uppercase; font-weight:800; margin-top:3px}

/* ---------- quiz ---------- */
.quiz-q{font-family:var(--disp); font-size:1.05rem; font-weight:700; line-height:1.45; margin:4px 0 14px}
.qopt{display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  background:var(--card2); border:2px solid #3a3a3a; color:var(--cream); font:inherit;
  font-weight:700; font-size:.88rem; padding:13px 14px; border-radius:14px; margin-bottom:9px;
  cursor:pointer; transition:transform .12s, border-color .2s, background .2s}
.qopt .ltr{width:26px;height:26px;border-radius:8px;background:#1a1a1a;display:flex;align-items:center;
  justify-content:center;font-size:.72rem;font-weight:900;color:var(--gold);flex-shrink:0}
.qopt:active{transform:scale(.97)}
.qopt.correct{background:#1f3a18; border-color:var(--green); animation:popIn .35s cubic-bezier(.34,1.56,.64,1)}
.qopt.correct .ltr{background:var(--green); color:#103107}
.qopt.wrong{background:#3f1815; border-color:var(--red); animation:shake .4s}
.qopt.dim{opacity:.45}
.qopt[disabled]{pointer-events:none}
.quiz-fact{display:none; background:linear-gradient(120deg,#2a2417,#3a3015); border:1.5px solid var(--gold);
  border-radius:14px; padding:13px 14px; font-size:.8rem; line-height:1.5; margin-top:6px;
  animation:popIn .4s cubic-bezier(.34,1.56,.64,1) both}
.quiz-fact b{color:var(--gold)}
.quiz-streak-dots{display:flex; gap:6px; margin-top:8px}
.quiz-result-pts{display:none; text-align:center; font-family:var(--disp); font-size:1.5rem; font-weight:700; color:var(--gold); margin:8px 0; animation:popIn .45s cubic-bezier(.34,1.56,.64,1) both}
.quiz-done-msg{font-size:.74rem; color:var(--muted); text-align:center; margin-top:12px}
.mult-chip{font-size:.7rem; background:#3a2e05; border:1px solid var(--gold); color:var(--gold); padding:4px 10px; border-radius:999px; font-weight:800}
.quiz-banner{background:linear-gradient(120deg,#16301f,#1f4429); border:1.5px solid var(--green);
  border-radius:var(--radius); padding:13px 16px; margin-bottom:14px; display:flex; align-items:center; gap:12px; cursor:pointer}
.quiz-banner .qbi{font-size:30px; animation:flameWiggle 2s ease-in-out infinite}
.quiz-banner b{color:var(--green)}
.quiz-banner small{display:block; color:var(--cream-dim); font-size:.72rem}


/* ---------- wheel ---------- */
.wheel-wrap{display:flex; flex-direction:column; align-items:center; padding:8px 0 4px}
.wheel-pointer{font-size:26px; margin-bottom:-8px; z-index:3; filter:drop-shadow(0 3px 4px rgba(0,0,0,.5))}
#wheel{width:min(270px,72vw); aspect-ratio:1; border-radius:50%; position:relative;
  border:6px solid var(--gold); box-shadow:0 0 0 4px #3a2e05, 0 14px 40px rgba(0,0,0,.55), inset 0 0 30px rgba(0,0,0,.4);
  transition:transform 4.2s cubic-bezier(.12,.66,.1,1)}
#wheel .seg{position:absolute; left:50%; top:50%; transform-origin:0 0; font-size:.6rem; font-weight:900;
  color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.7); width:50%; text-align:right; padding-right:14px}
#wheel .hub{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:54px; height:54px;
  border-radius:50%; background:linear-gradient(160deg,var(--gold),var(--gold-deep));
  display:flex; align-items:center; justify-content:center; font-size:26px;
  box-shadow:0 4px 12px rgba(0,0,0,.5); z-index:2}
.wed-tag{font-size:.7rem; font-weight:800; color:var(--muted); margin:10px 0 4px; text-align:center}
.wed-tag.live{color:var(--green)}

/* ---------- trade / gift ---------- */
.trade-offer{background:linear-gradient(160deg,var(--card),var(--card2)); border:1px solid #3a3a3a;
  border-radius:var(--radius); padding:14px; margin-bottom:11px}
.trade-who{display:flex; align-items:center; gap:9px; margin-bottom:10px}
.trade-who b{font-size:.85rem}
.trade-who small{color:var(--muted); font-size:.68rem; display:block}
.trade-cards{display:flex; align-items:center; justify-content:center; gap:12px}
.tcard{width:84px; aspect-ratio:5/7; border-radius:9px; overflow:hidden; position:relative; border:1px solid #3a3a3a; flex-shrink:0; background:var(--card)}
.tcard img{width:100%;height:100%;object-fit:cover}
.tcard .tl{position:absolute; bottom:0; left:0; right:0; font-size:.52rem; font-weight:800; text-align:center; background:rgba(0,0,0,.7); padding:3px 2px}
.tarrow{font-size:24px; color:var(--gold)}
.trade-cards.swapping .tcard:first-child{animation:swapR .8s cubic-bezier(.4,0,.2,1) forwards}
.trade-cards.swapping .tcard:last-child{animation:swapL .8s cubic-bezier(.4,0,.2,1) forwards}
@keyframes swapR{50%{transform:translateX(96px) translateY(-26px) rotate(8deg)} 100%{transform:translateX(0)}}
@keyframes swapL{50%{transform:translateX(-96px) translateY(26px) rotate(-8deg)} 100%{transform:translateX(0)}}
.dupe-strip{display:flex; gap:8px; overflow-x:auto; padding:4px 0 10px; scrollbar-width:none}
.dupe-strip::-webkit-scrollbar{display:none}
.dupe-strip .tcard{width:72px; cursor:pointer}
.dupe-strip .tcard.sel{outline:3px solid var(--gold)}
.dupe-strip .tcard .cnt2{position:absolute; top:3px; right:3px; background:var(--gold); color:#3a2503; font-size:.56rem; font-weight:900; padding:2px 5px; border-radius:6px}
.gift-fly{position:absolute; font-size:44px; z-index:95; pointer-events:none; animation:giftFly 1.4s cubic-bezier(.4,0,.6,1) forwards}
@keyframes giftFly{0%{transform:translateY(0) scale(1); opacity:1} 60%{transform:translateY(-160px) scale(1.25) rotate(14deg); opacity:1} 100%{transform:translateY(-300px) scale(.5) rotate(30deg); opacity:0}}

/* ---------- rewards ---------- */
.reward{display:flex; align-items:center; gap:13px; background:linear-gradient(160deg,var(--card),var(--card2));
  border:1px solid #3a3a3a; border-radius:var(--radius); padding:14px; margin-bottom:11px; position:relative; overflow:hidden}
.reward .ri{font-size:32px; width:52px; height:52px; display:flex; align-items:center; justify-content:center; background:#1a1a1a; border-radius:14px; flex-shrink:0}
.reward .rb{flex:1; min-width:0}
.reward .rt{font-family:var(--disp); font-weight:700; font-size:.92rem}
.reward .rd{font-size:.72rem; color:var(--muted); margin-top:2px}
.reward .rbtn{border:none; font:inherit; font-weight:900; font-size:.72rem; padding:9px 13px; border-radius:11px;
  cursor:pointer; background:linear-gradient(160deg,var(--gold),var(--gold-deep)); color:#3a2503;
  box-shadow:0 3px 0 #b08d12; flex-shrink:0; transition:transform .1s}
.reward .rbtn:active{transform:translateY(2px)}
.reward .rbtn[disabled]{background:#3a3a3a; color:#8c8c8c; box-shadow:none; pointer-events:none}
.reward.locked-r{opacity:.65}
.reward .locktag{font-size:.62rem; background:#3d3208; color:var(--gold); border:1px solid #7a6310; font-weight:800; padding:6px 10px; border-radius:10px; flex-shrink:0; text-align:center}
.redemption-code{font-family:monospace; background:#1a1a1a; border:1px dashed var(--gold); color:var(--gold); padding:8px 12px; border-radius:10px; font-size:.85rem; font-weight:800; display:inline-block}

/* ---------- team ---------- */
.team-hero{text-align:center; padding:20px 14px}
.team-avatar{width:74px;height:74px;border-radius:50%;background:linear-gradient(160deg,var(--red),var(--red-deep));display:flex;align-items:center;justify-content:center;font-size:38px;margin:0 auto 10px;border:3px solid var(--gold);box-shadow:0 0 24px rgba(248,203,46,.3)}
.team-name{font-family:var(--disp); font-size:1.3rem; font-weight:700; color:var(--gold)}
.team-sub{font-size:.74rem; color:var(--muted); margin-top:4px}
.lb-row{display:flex; align-items:center; gap:11px; padding:11px 6px; border-bottom:1px solid #2c2c2c}
.lb-row:last-child{border-bottom:none}
.lb-rank{width:30px; font-weight:900; color:var(--muted); text-align:center; font-size:.95rem}
.lb-rank.medal{font-size:20px}
.lb-av{width:38px;height:38px;border-radius:50%;background:#3a3a3a;display:flex;align-items:center;justify-content:center;font-size:19px}
.lb-name{flex:1; font-weight:700; font-size:.88rem}
.lb-name small{display:block; font-size:.64rem; color:var(--muted); font-weight:600}
.lb-pts{font-weight:900; color:var(--gold); font-size:.86rem}
.lb-row.me{background:rgba(248,203,46,.08); border-radius:12px; border:1px solid rgba(248,203,46,.35)}

/* ---------- golden overlay ---------- */
#goldOverlay{position:absolute; inset:0; z-index:99; display:none; flex-direction:column; align-items:center;
  justify-content:center; text-align:center; padding:30px; overflow:hidden;
  background:radial-gradient(600px 600px at 50% 45%, #705806 0%, #292102 75%)}
#goldOverlay.show{display:flex}
#goldOverlay .grays{position:absolute; inset:-50%; pointer-events:none;
  background:repeating-conic-gradient(rgba(255,220,120,.22) 0 9deg, transparent 9deg 18deg); animation:raySpin 9s linear infinite}
#goldOverlay .gtrophy{font-size:90px; animation:mascotCheer 1s cubic-bezier(.34,1.56,.64,1) infinite; filter:drop-shadow(0 0 30px rgba(248,203,46,.8)); z-index:2}
#goldOverlay h1{z-index:2; font-family:var(--disp); font-size:1.9rem; font-weight:700; margin:14px 0 6px;
  background:linear-gradient(90deg,#f5c542,#fff6d8,#f5c542); background-size:200% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent; animation:barShimmer 2s linear infinite}
#goldOverlay p{z-index:2; color:#ffe9a0; font-size:.9rem; font-weight:700; max-width:280px; line-height:1.5}
#goldOverlay .btn{z-index:2; width:min(260px,80%); margin-top:22px}

/* ---------- toast & floaters ---------- */
#toast{position:fixed; left:50%; bottom:106px; transform:translateX(-50%) translateY(20px);
  background:#1f1f1f; border:1px solid var(--gold); color:var(--cream); padding:12px 20px;
  border-radius:999px; font-weight:800; font-size:.84rem; opacity:0; pointer-events:none;
  transition:all .3s cubic-bezier(.34,1.56,.64,1); z-index:300; box-shadow:var(--shadow);
  max-width:90vw; text-align:center}
#toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
.float-pts{position:absolute; font-family:var(--disp); font-weight:700; color:var(--gold); font-size:1.3rem; pointer-events:none; z-index:90;
  animation:floatUp 1.2s ease-out forwards; text-shadow:0 2px 8px rgba(0,0,0,.6)}
@keyframes floatUp{from{opacity:1; transform:translateY(0)} to{opacity:0; transform:translateY(-70px)}}
.ainput{background:#141414; border:1.5px solid #3a3a3a; border-radius:10px; color:var(--cream);
  font:inherit; font-size:.9rem; padding:11px 13px; outline:none; width:100%; margin-bottom:10px}
.ainput:focus{border-color:var(--gold)}

/* ---------- auth pages ---------- */
.auth-wrap{min-height:100vh; min-height:100dvh; width:100%; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(900px 500px at 50% -100px, #33190a 0%, transparent 60%), #0a0a0a; padding:22px}
.auth-card{background:linear-gradient(160deg,var(--card),var(--card2)); border:1px solid #3a3a3a;
  border-radius:22px; padding:30px 26px; width:100%; max-width:380px; text-align:center; box-shadow:var(--shadow)}
.auth-card h1{font-family:var(--disp); font-size:1.5rem; margin-bottom:4px}
.auth-sub{font-size:.76rem; color:var(--muted); margin-bottom:18px}
.auth-err{background:#3f1815; border:1px solid var(--red); color:#ffb4ab; border-radius:12px; padding:10px 12px; font-size:.78rem; margin-bottom:12px}
.auth-switch{font-size:.78rem; color:var(--muted); margin-top:16px}
.auth-switch a{color:var(--gold); font-weight:800; text-decoration:none}

@media (min-width:431px){ #app{margin:0 auto} }

/* ---------------- the forge (duplicate shards) ---------------- */
/* Duplicates leave a shard; enough shards buy a card you are missing. The
   row sits under the collection bar because that is where somebody is
   already looking when they wonder how far off the set they are. */
.forge-row{display:flex; align-items:center; gap:10px; margin-top:12px;
  font-size:.72rem; color:var(--muted)}
.forge-row b{font-family:var(--disp); font-size:.95rem; color:var(--cream-dim);
  font-variant-numeric:tabular-nums; white-space:nowrap}
.forge-row.ready b{color:var(--gold)}
.forge-row b .of{color:var(--muted); font-size:.72rem; font-weight:600}
.forge-row span{flex:1; line-height:1.35}
.bar.shard{height:6px; margin-top:6px}
.bar.shard > i{background:linear-gradient(90deg, var(--gold-deep), var(--gold))}
.btn.sm{width:auto; padding:7px 14px; font-size:.72rem; flex:0 0 auto}

.forge-modal{position:fixed; inset:0; z-index:80; background:rgba(0,0,0,.78);
  display:flex; align-items:flex-end; justify-content:center;
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px)}
.forge-sheet{width:100%; max-width:520px; max-height:86vh; overflow-y:auto;
  background:var(--card); border:1px solid #333; border-bottom:none;
  border-radius:18px 18px 0 0; padding:18px 16px calc(18px + env(safe-area-inset-bottom))}
.forge-head{font-family:var(--disp); font-weight:800; font-size:1rem; margin-bottom:12px}
.forge-head small{display:block; font-family:inherit; font-weight:600;
  font-size:.7rem; color:var(--muted); margin-top:3px}
.forge-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(84px, 1fr));
  gap:9px; margin-bottom:14px}
.forge-grid .ccard{aspect-ratio:5/7}
.forge-grid .cname{position:absolute; left:0; right:0; bottom:0; z-index:2;
  background:linear-gradient(transparent, rgba(0,0,0,.88) 55%);
  font-size:.56rem; font-weight:700; line-height:1.15;
  padding:12px 4px 4px; text-align:center}
@media (prefers-reduced-motion: reduce){ .forge-modal{-webkit-backdrop-filter:none; backdrop-filter:none} }

/* ---------------- ronin ---------------- */
/* Masterless: no team yet, or a team whose server has moved on. Deliberately
   not styled as a warning — an unclaimed member is an opportunity for a
   server, not a problem for the customer. Cooler and quieter than the team
   hero, so joining one still reads as the upgrade. */
.ronin-hero{background:linear-gradient(180deg,#1b1b1b,#161616); border-color:#3a3a3a}
.ronin-hero .team-avatar{filter:grayscale(.35)}
.ronin-hero .team-name{color:var(--cream-dim); letter-spacing:3px}
.ronin-hero .team-name .jp{
  display:block; font-size:.62rem; letter-spacing:6px; color:var(--muted);
  font-weight:600; margin-top:3px}

/* ---------------- birthday month ---------------- */
/* Asked on the rewards screen rather than at signup: signup is the step that
   loses people, and this is one tap from somebody already looking at cake. */
.bday-row{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px}
.bday-note{font-size:.66rem; color:var(--muted); line-height:1.3}
.bday-set{font-size:.8rem; font-weight:700}
.bday-set b{color:var(--gold)}
.bday-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-bottom:14px}
.bday-grid .btn{padding:10px 4px; font-size:.72rem}

/* ---------------- golden tickets ---------------- */
/* A won meal, still owed. On the home screen rather than only in the overlay
   that announced it: the overlay closes, and a free meal should not. */
.golden-banner{margin-bottom:12px}
.golden-row{display:flex; align-items:center; gap:11px; padding:12px 14px; margin-bottom:8px;
  border-radius:14px; border:1px solid var(--gold);
  background:linear-gradient(135deg, rgba(248,203,46,.14), rgba(248,203,46,.04))}
.golden-row .gi{font-size:22px}
.golden-row b{display:block; font-size:.86rem}
.golden-row small{display:block; font-size:.66rem; color:var(--muted); margin-top:1px}
.golden-row .redemption-code{font-size:.8rem; padding:5px 9px}

/* ---------------- add to home screen ---------------- */
/* Hidden until the browser confirms it can install. On Chrome that is
   beforeinstallprompt firing; on iOS there is no install API at all, so the
   button opens the Share instructions rather than pretending. */
.installbox{margin-top:20px; padding-top:16px; border-top:1px solid #2a2a2a}
.installnote{font-size:.72rem; color:var(--muted); margin:8px 0 0; line-height:1.45}
.installhelp{
  margin-top:12px; padding:12px 14px; border-radius:12px; text-align:left;
  background:#1b1b1b; border:1px solid #333; font-size:.76rem; line-height:1.5}
.installhelp b{color:var(--cream)}
.installhelp ol{margin:8px 0 0; padding-left:18px; color:var(--muted)}
.installhelp li{margin-bottom:5px}
.installhelp .ishare{
  display:inline-block; padding:0 5px; border-radius:4px;
  border:1px solid var(--gold); color:var(--gold); font-weight:800}

/* ---------- phone notifications ---------- */
.notif-row{padding:12px 14px; margin-bottom:12px}
.notif-row:empty{display:none}
.notif-head{display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:.82rem; margin-bottom:8px}
.notif-head b{color:var(--gold)}
.notif-kinds{display:grid; grid-template-columns:1fr 1fr; gap:4px 10px; margin-bottom:10px}
.notif-kind{font-size:.72rem; display:flex; align-items:center; gap:6px}
.notif-kind input:disabled + *{opacity:.5}
.sms-opt{display:flex; gap:8px; align-items:flex-start; font-size:.74rem; margin:4px 0 12px; text-align:left}
.sms-opt input{margin-top:3px; flex:none}
.sms-opt small{display:block; color:var(--muted); font-size:.62rem; line-height:1.35; margin-top:3px}
.ios-steps{font-size:.8rem; line-height:1.5; padding-left:1.2rem; margin:0 0 14px}
.forge-sheet #pushYes{width:100%; margin-bottom:8px}
.forge-sheet #pushLater{width:100%}
/* A choice that should not shout: "Not now", "Turn off". */
.btn.quiet{background:#2a2a2a; color:var(--cream-dim); box-shadow:none; border:1px solid #3a3a3a}