/* ════════════════════════════════════════════════════════════════════════
   MÓSKÓGAR BINGÓ — "NEO-RODEO" DESIGN SYSTEM
   Modern western: wood-type display, condensed poster labels, leather ink,
   enamel-pin cards (hard offset shadows), ember + turquoise + brass.
   Full spec: /style  ·  BRAND.md
   ════════════════════════════════════════════════════════════════════════ */

:root{
  /* ── Ink & bone ── */
  --ink:#161009;          /* leather black — backgrounds, borders */
  --ink-soft:#241a10;
  --bone:#f3e7cb;         /* aged paper — primary surface */
  --bone-hi:#fbf3df;      /* highlight paper */
  --bone-dim:#e6d6b0;

  /* ── Brand ── */
  --ember:#bf3b23;        /* primary — hot rust */
  --ember-deep:#8f2a17;
  --turq:#1f9e8f;         /* cool accent — southwestern turquoise */
  --turq-deep:#15756a;
  --brass:#d69a2c;        /* gold/brass — scores, highlights */
  --brass-deep:#a5741b;
  --cactus:#6d8f4c;       /* success / done */
  --cactus-deep:#4f6d34;

  /* ── Text ── */
  --tx:#2a1d10;           /* on bone */
  --tx-soft:#5a4527;
  --tx-inv:#f6ecd4;       /* on ink */
  --tx-inv-soft:#c9b489;

  /* ── System ── */
  --line:rgba(38,26,12,.22);
  --edge:2.5px solid var(--ink);
  --pop:5px 5px 0 var(--ink);        /* hard "enamel pin" shadow */
  --pop-sm:3px 3px 0 var(--ink);
  --r:7px;                            /* restrained radius — not the AI 12px blob */

  /* Same faces as the event schedule poster — one visual family across everything */
  --ff-display:"PosterHead", Georgia, serif;      /* headline / wood-type */
  --ff-poster:"PosterSlab", Georgia, serif;       /* labels & UI chrome */
  --ff-body:"PosterType", Georgia, serif;         /* body / reading */
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
/* Hard guard against any sideways scroll/rubber-band on every browser & phone.
   `clip` (not `hidden`) so it doesn't break the sticky topbar. */
html{ overflow-x:clip; }
html,body{ margin:0; padding:0; width:100%; max-width:100%; overflow-x:clip; overscroll-behavior-x:none; }
body{
  font-family:var(--ff-body); color:var(--tx); font-size:16px; line-height:1.4;
  background:var(--ink);
  background-image:
    radial-gradient(120% 80% at 50% -10%, rgba(214,154,44,.10), transparent 55%),
    radial-gradient(100% 60% at 50% 120%, rgba(31,158,143,.08), transparent 60%),
    repeating-linear-gradient(90deg, rgba(0,0,0,.20) 0 1.5px, transparent 1.5px 34px),
    linear-gradient(180deg,#221810,#0f0a05);
  min-height:100vh; min-height:100dvh; overscroll-behavior-y:none;
}
/* film grain */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Only vertical panning (+ pinch-zoom for a11y) on the main screens — this
   stops iOS Safari's horizontal rubber-band/"drag then bounce back", which
   happens on touch even when nothing actually overflows. #ceremony and
   #lightbox are separate roots (not `.screen`), so their intentional
   horizontal table-scroll / pinch-zoom is untouched. */
.screen{ position:relative; z-index:1; min-height:100dvh; touch-action:pan-y pinch-zoom; }
[hidden]{ display:none !important; }
h1,h2,h3{ margin:0; }
/* Long Icelandic words in wood-type headings must never force horizontal width */
.pane-title,.emblem-title,.emblem-title .t1,.emblem-title .t2,.cer-introttl,.cer-name,.cer-summaryttl,.fx-bingo,.cat-head h3{ overflow-wrap:break-word; }
button{ font-family:inherit; cursor:pointer; }
::selection{ background:var(--brass); color:var(--ink); }

/* ── Type primitives ─────────────────────────────────────────────────── */
.kicker{ font-family:var(--ff-poster); font-weight:600; text-transform:uppercase; letter-spacing:.28em; font-size:12px; }

/* ════════════════════════════════════════════════════════════════════════
   BUTTONS
   ════════════════════════════════════════════════════════════════════════ */
.btn{
  font-family:var(--ff-poster); font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  font-size:16px; color:var(--tx); background:var(--bone-hi);
  border:var(--edge); border-radius:var(--r); padding:14px 18px;
  box-shadow:var(--pop); transition:transform .08s ease, box-shadow .08s ease;
}
.btn:active{ transform:translate(4px,4px); box-shadow:0 0 0 var(--ink); }
.btn-primary{ background:var(--ember); color:#fff2e2; }
.btn-ghost{ background:transparent; color:var(--tx-soft); box-shadow:var(--pop-sm); }
.btn-danger{ background:var(--ember-deep); color:#fff2e2; }
.linkbtn{
  background:none; border:none; color:var(--turq); font-family:var(--ff-poster); font-weight:600;
  text-transform:uppercase; letter-spacing:.14em; font-size:12px; padding:9px;
  display:block; margin:8px auto 0;
}
.linkbtn:active{ color:var(--turq-deep); }
.linkbtn{ text-align:center; width:100%; }
.error{ color:var(--ember); font-family:var(--ff-poster); font-weight:600; font-size:13px; letter-spacing:.02em; margin:2px 0 0; text-align:center; }

/* ════════════════════════════════════════════════════════════════════════
   LOGIN / EMBLEM
   ════════════════════════════════════════════════════════════════════════ */
.login{ display:grid; place-items:center; padding:26px 18px calc(26px + env(safe-area-inset-bottom)); }
.login-card{
  width:100%; max-width:390px; min-width:0; background:var(--bone);
  border:var(--edge); border-radius:var(--r); padding:8px; box-shadow:var(--pop);
  position:relative;
}
/* Very narrow phones (≤320px, e.g. iPhone SE): the 60px wood-type title is the
   one thing that can out-grow its grid track, so let it scale down there. */
@media (max-width:340px){
  .emblem-title .t1{ font-size:40px; }
  .emblem-title .t2{ font-size:52px; }
}
.login-card::after{ /* inner hairline frame — poster detail */
  content:""; position:absolute; inset:9px; border:1.5px solid var(--line); border-radius:3px; pointer-events:none;
}
.login-card > *{ position:relative; }
.login-inner{ padding:22px 18px 18px; }

.emblem{ text-align:center; margin-bottom:20px; }
.emblem-rule{ display:flex; align-items:center; gap:10px; justify-content:center; color:var(--ember); }
.emblem-rule i{ flex:1; height:2.5px; background:var(--ink); }
.emblem-rule span{ font-size:11px; letter-spacing:.2em; }
.emblem-kicker{ font-family:var(--ff-poster); font-weight:600; text-transform:uppercase; letter-spacing:.34em; font-size:12px; color:var(--turq-deep); margin:12px 0 2px; }
.emblem-title{ line-height:.86; margin:2px 0 8px; }
.emblem-title .t1{ display:block; font-family:var(--ff-display); font-size:46px; color:var(--ember); letter-spacing:.5px; text-shadow:2.5px 2.5px 0 rgba(38,26,12,.20); }
.emblem-title .t2{ display:block; font-family:var(--ff-display); font-size:60px; color:var(--ink); letter-spacing:.5px; -webkit-text-stroke:0; text-shadow:2.5px 2.5px 0 var(--brass); }
.emblem-ribbon{
  display:inline-block; font-family:var(--ff-poster); font-weight:600; text-transform:uppercase;
  letter-spacing:.16em; font-size:11px; color:var(--bone-hi); background:var(--ink);
  padding:5px 14px; border-radius:3px; margin-bottom:12px;
}

.form{ display:flex; flex-direction:column; gap:13px; }
.form label{ display:flex; flex-direction:column; gap:6px; }
.lbl{ font-family:var(--ff-poster); font-weight:600; text-transform:uppercase; letter-spacing:.14em; font-size:11.5px; color:var(--tx-soft); }
.form input, .form select, .form textarea{
  font-family:var(--ff-body); font-size:16px; color:var(--tx); background:var(--bone-hi);
  border:var(--edge); border-radius:5px; padding:13px 13px; width:100%;
}
.form textarea{ min-height:66px; resize:vertical; }
.form input:focus, .form select:focus, .form textarea:focus{ outline:none; border-color:var(--turq); box-shadow:inset 0 0 0 2px rgba(31,158,143,.25); }
.form label{ position:relative; }

/* ════════════════════════════════════════════════════════════════════════
   TOPBAR / TABS
   ════════════════════════════════════════════════════════════════════════ */
.topbar{ position:sticky; top:0; z-index:20; background:var(--ink); color:var(--tx-inv); box-shadow:0 4px 0 var(--ember-deep); }
.topbar-inner{ display:flex; align-items:center; gap:10px; padding:calc(12px + env(safe-area-inset-top)) 15px 11px; max-width:820px; margin:0 auto; }
.fam-badge{ display:flex; align-items:center; gap:9px; flex:1; min-width:0; font-family:var(--ff-poster); font-weight:700; text-transform:uppercase; letter-spacing:.04em; font-size:16px; }
.fam-badge span:last-child{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dot{ width:15px; height:15px; border-radius:50%; border:2.5px solid var(--tx-inv); flex:none; }
.score-pill{
  display:inline-flex; align-items:baseline; gap:5px; background:var(--brass); color:var(--ink);
  font-family:var(--ff-poster); font-weight:700; font-size:15px; border:2.5px solid var(--ink);
  border-radius:4px; padding:5px 11px; box-shadow:var(--pop-sm); white-space:nowrap;
}
.score-pill .rank{ font-size:12px; color:var(--ember-deep); }
.iconbtn{ background:var(--ember); color:#fff2e2; border:2.5px solid var(--ink); border-radius:5px; width:40px; height:40px; font-size:18px; box-shadow:var(--pop-sm); }
.iconbtn:active{ transform:translate(2px,2px); box-shadow:none; }

.tabs{ display:flex; max-width:820px; margin:0 auto; background:var(--ink-soft); }
.tab{
  flex:1; background:transparent; border:none; color:var(--tx-inv-soft);
  font-family:var(--ff-poster); font-weight:600; text-transform:uppercase; letter-spacing:.08em; font-size:13px;
  padding:12px 4px; border-bottom:4px solid transparent;
}
.tab.is-active{ color:var(--bone-hi); border-bottom-color:var(--brass); background:linear-gradient(180deg,transparent,rgba(214,154,44,.10)); }

/* Category strip — sub-nav inside the header (Verkefni only). One emoji chip
   per category; all fit without horizontal scroll on every phone. */
.cat-strip{ display:flex; gap:5px; max-width:820px; margin:0 auto; padding:8px 10px 9px; background:var(--ink); border-top:1.5px solid rgba(246,236,212,.08); }
.cat-chip{
  flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:6px 2px 5px; background:var(--ink-soft); border:2px solid transparent; border-radius:9px;
  transition:transform .08s ease;
}
.cat-chip:active{ transform:translateY(1px); }
.cat-chip .cc-emoji{ font-size:21px; line-height:1; filter:grayscale(.5); opacity:.65; }
.cat-chip .cc-frac{ font-family:var(--ff-poster); font-weight:700; font-size:9.5px; letter-spacing:.02em; color:var(--tx-inv-soft); line-height:1; }
.cat-chip.is-active{ background:var(--bone-hi); border-color:var(--brass); box-shadow:0 3px 0 var(--brass-deep); }
.cat-chip.is-active .cc-emoji{ filter:none; opacity:1; }
.cat-chip.is-active .cc-frac{ color:var(--ember-deep); }
.cat-chip.is-full .cc-frac{ color:var(--cactus); }
.cat-chip.is-full .cc-emoji{ opacity:.9; }
.cat-chip.is-active.is-full{ box-shadow:0 3px 0 var(--cactus-deep); }
.cat-chip.is-active.is-full .cc-frac{ color:var(--cactus-deep); }

/* Footer copy of the strip — a discovery aid so nobody misses that Verkefni
   has several categories. Styled as a raised card (the header one is flush). */
.cat-footer{ margin-bottom:14px; }
.cat-footer-label{ display:block; text-align:center; font-family:var(--ff-poster); font-weight:600; text-transform:uppercase; letter-spacing:.1em; font-size:11px; color:var(--bone-dim); margin:0 0 8px; }
.cat-strip-footer{ border:2.5px solid var(--ink); border-radius:var(--r); box-shadow:var(--pop); padding:9px; }
.cat-strip-footer .cat-chip{ padding:8px 2px 6px; }
.cat-strip-footer .cat-chip .cc-emoji{ font-size:23px; }

/* ════════════════════════════════════════════════════════════════════════
   CONTENT
   ════════════════════════════════════════════════════════════════════════ */
.content{ max-width:820px; margin:0 auto; padding:18px 15px 22px; }
.pane-title{ font-family:var(--ff-display); color:var(--bone-hi); font-size:30px; letter-spacing:.5px; line-height:1; margin-bottom:2px; }
.pane-hint{ font-family:var(--ff-body); font-style:italic; color:var(--tx-inv-soft); font-size:13.5px; margin:12px 0 16px; }

/* Progress — "trail meter" */
.progress{
  position:relative; height:34px; background:var(--ink-soft); border:2.5px solid var(--ink);
  border-radius:5px; overflow:hidden; margin-bottom:20px; box-shadow:var(--pop-sm);
}
.progress-fill{ position:absolute; inset:0 auto 0 0; width:0; background:repeating-linear-gradient(45deg,var(--ember) 0 12px,var(--ember-deep) 12px 24px); transition:width .5s cubic-bezier(.2,.8,.2,1); }
.progress span{ position:absolute; inset:0; display:grid; place-items:center; font-family:var(--ff-poster); font-weight:700; text-transform:uppercase; letter-spacing:.08em; font-size:12.5px; color:var(--bone-hi); text-shadow:0 1px 2px rgba(0,0,0,.6); }

/* ── Category ── */
.cat{ margin-bottom:26px; }
.cat-head{ display:flex; align-items:center; gap:11px; margin-bottom:13px; }
.cat-head .c-emoji{ font-size:20px; width:42px; height:42px; display:grid; place-items:center; background:var(--bone); border:2.5px solid var(--ink); border-radius:6px; box-shadow:var(--pop-sm); flex:none; }
.cat-head .c-titles{ min-width:0; flex:1; }
.cat-head h3{ font-family:var(--ff-display); font-size:19px; color:var(--bone-hi); letter-spacing:.4px; line-height:1; }
.cat-head .c-blurb{ display:block; font-family:var(--ff-body); font-style:italic; font-size:11.5px; color:var(--tx-inv-soft); margin-top:3px; }
.cat-head .c-count{ font-family:var(--ff-poster); font-weight:700; font-size:12px; color:var(--tx-inv); background:var(--ink-soft); border:2px solid var(--tx-inv-soft); padding:4px 10px; border-radius:20px; flex:none; }
.cat-head .c-count.done{ background:var(--cactus); border-color:var(--ink); color:var(--bone-hi); }

/* minmax(0,1fr) (not plain 1fr) lets the two columns shrink below their
   content's intrinsic width, so the grid can never grow wider than the
   viewport — even where a font renders a touch wider (e.g. iOS Safari). */
.grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:13px; }
@media (max-width:430px){ .grid{ grid-template-columns:minmax(0,1fr); } }

/* Mission card — enamel pin */
.mcard{
  position:relative; text-align:left; background:var(--bone); border:var(--edge); border-radius:var(--r);
  padding:13px; color:var(--tx); box-shadow:var(--pop); display:flex; flex-direction:column; gap:6px;
  min-width:0; min-height:112px; transition:transform .08s ease, box-shadow .08s ease; overflow:hidden;
}
.mcard:active{ transform:translate(3px,3px); box-shadow:var(--pop-sm); }
.mcard .m-top{ display:flex; align-items:center; gap:9px; }
.mcard .m-emoji{ font-size:27px; line-height:1; }
.mcard .m-pts{
  margin-left:auto; font-family:var(--ff-poster); font-weight:700; font-size:14px; color:#fff2e2;
  background:var(--ember); border:2px solid var(--ink); border-radius:4px; padding:2px 9px; line-height:1.3;
}
.mcard .m-title{ font-family:var(--ff-body); font-weight:800; font-size:15px; line-height:1.15; overflow-wrap:break-word; }
.mcard .m-desc{ font-size:12px; color:var(--tx-soft); line-height:1.28; overflow-wrap:break-word; }
.mcard .m-thumb{ margin-top:auto; }
.mcard .m-thumb img, .mcard .m-thumb video{ width:100%; height:74px; object-fit:cover; border-radius:4px; border:2px solid var(--ink); }

/* done state */
.mcard.done{ background:#e2ead2; border-color:var(--cactus-deep); }
.mcard.done .m-pts{ background:var(--cactus); }
.mcard .check{
  position:absolute; top:9px; right:9px; width:30px; height:30px; border-radius:50%;
  background:var(--cactus); color:#fff; display:none; place-items:center; font-size:17px;
  border:2.5px solid var(--ink); transform:rotate(-8deg); z-index:2;
}
.mcard.done .check{ display:grid; }
.mcard.done::after{ /* "BÚIÐ" — a bold, solid stamp overlaid on the card */
  content:"BÚIÐ"; position:absolute; right:8px; bottom:8px; z-index:3;
  font-family:var(--ff-display); font-size:18px; letter-spacing:1.5px; line-height:1;
  color:#fff2e2; background:var(--ember); border:2.5px solid var(--ink); border-radius:5px;
  padding:4px 9px 3px; transform:rotate(-8deg); pointer-events:none; text-transform:uppercase;
  box-shadow:2px 2px 0 rgba(22,16,9,.35);
}

/* voided (admin faded it out) — submitted but not counting */
.mcard.voided{ background:#ece7dc; border-color:var(--faded,#b9a888); opacity:.72; }
.mcard.voided .m-pts{ background:var(--tx-soft); }
.mcard .void-tag{
  position:absolute; top:9px; right:9px; z-index:2;
  font-family:var(--ff-poster); font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  font-size:10px; color:var(--bone-hi); background:var(--tx-soft);
  border:2px solid var(--ink); border-radius:4px; padding:2px 7px;
}

/* ── Leaderboard ── */
.board{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; counter-reset:rank; }
.board li{
  display:flex; align-items:center; gap:13px; background:var(--bone); border:var(--edge);
  border-radius:var(--r); padding:13px 15px; box-shadow:var(--pop); position:relative;
}
.board .b-rank{ font-family:var(--ff-display); font-size:26px; width:38px; text-align:center; color:var(--tx-soft); line-height:1; }
.board li:nth-child(1){ background:linear-gradient(180deg,#fbf3df,#f1e2b6); }
.board li:nth-child(1) .b-rank{ color:var(--brass-deep); }
.board li.me{ border-color:var(--turq); box-shadow:5px 5px 0 var(--turq-deep); }
.board li.me::before{ content:var(--you,"ÞÚ"); position:absolute; top:-11px; left:12px; font-family:var(--ff-poster); font-weight:700; font-size:10px; letter-spacing:.14em; color:var(--bone-hi); background:var(--turq); border:2px solid var(--ink); border-radius:3px; padding:1px 6px; }
.board .b-mid{ flex:1; min-width:0; }
.board .b-name{ font-family:var(--ff-poster); font-weight:700; text-transform:uppercase; letter-spacing:.03em; font-size:16px; display:flex; align-items:center; gap:8px; }
.board .b-name .dot{ border-color:var(--ink); }
.board .b-sub{ font-family:var(--ff-body); font-size:12px; color:var(--tx-soft); margin-top:1px; }
.board .b-sub .bonus{ color:var(--brass-deep); font-weight:700; }
.board .b-pts{ font-family:var(--ff-display); font-size:27px; color:var(--ember); line-height:.9; text-align:right; }
.board .b-pts small{ display:block; font-family:var(--ff-poster); font-weight:600; text-transform:uppercase; letter-spacing:.1em; font-size:9.5px; color:var(--tx-soft); }

/* ── Feed ── */
.feed{ display:flex; flex-direction:column; gap:15px; }
.fcard{ background:var(--bone); border:var(--edge); border-radius:var(--r); overflow:hidden; box-shadow:var(--pop); }
.fcard .f-media{ border-bottom:2.5px solid var(--ink); background:#000; position:relative; }
.fcard .f-media img, .fcard .f-media video{ width:100%; max-height:360px; object-fit:cover; display:block; }
.fcard .f-body{ padding:12px 14px; }
.fcard .f-top{ display:flex; align-items:center; gap:8px; }
.fcard .f-fam{ font-family:var(--ff-poster); font-weight:700; text-transform:uppercase; letter-spacing:.03em; font-size:13.5px; display:flex; align-items:center; gap:7px; }
.fcard .f-fam .dot{ border-color:var(--ink); width:13px; height:13px; }
.fcard .f-pts{ margin-left:auto; font-family:var(--ff-poster); font-weight:700; font-size:13px; color:#fff2e2; background:var(--ember); border:2px solid var(--ink); border-radius:4px; padding:2px 9px; }
.fcard .f-title{ font-family:var(--ff-body); font-weight:800; font-size:16px; margin-top:7px; }
.fcard .f-note{ font-family:var(--ff-body); font-style:italic; font-size:13.5px; color:var(--tx-soft); margin-top:3px; }
.fcard .f-meta{ font-family:var(--ff-poster); font-weight:500; text-transform:uppercase; letter-spacing:.1em; font-size:10.5px; color:var(--tx-soft); margin-top:6px; }
/* voided submission in the feed — visible but faded, doesn't count */
.fcard.voided{ opacity:.6; }
.fcard.voided .f-media{ filter:grayscale(.5); }
.f-void{ margin-left:auto; font-family:var(--ff-poster); font-weight:700; text-transform:uppercase; letter-spacing:.05em; font-size:11px; color:var(--bone-hi); background:var(--tx-soft); border:2px solid var(--ink); border-radius:4px; padding:2px 9px; }
/* admin gallery: void + delete buttons */
.f-adminbtns{ display:flex; gap:8px; margin-top:10px; }
.f-adminbtns button{ font-family:var(--ff-poster); font-weight:700; text-transform:uppercase; letter-spacing:.04em; font-size:12px; border:2px solid var(--ink); border-radius:5px; padding:7px 11px; }
.f-adminbtns .f-void{ margin-left:0; cursor:pointer; }
.f-adminbtns .f-del{ background:var(--ember); color:#fff2e2; }
.empty{ font-family:var(--ff-body); font-style:italic; color:var(--tx-inv-soft); text-align:center; padding:44px 20px; }

/* ════════════════════════════════════════════════════════════════════════
   MODAL
   ════════════════════════════════════════════════════════════════════════ */
.modal{ position:fixed; inset:0; z-index:60; background:rgba(15,10,5,.78); display:grid; place-items:end center; }
.modal-card{
  width:100%; max-width:540px; background:var(--bone); border:var(--edge); border-bottom:none;
  border-radius:12px 12px 0 0; padding:18px 18px calc(24px + env(safe-area-inset-bottom));
  box-shadow:0 -6px 0 var(--ember-deep); max-height:92dvh; overflow-y:auto; position:relative;
  /* keep the sheet's scroll to itself so it never nudges Safari's toolbar */
  overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  /* scale-to-fit: the media preview shrinks so the action button is always
     visible without scrolling, whatever the media's aspect ratio */
  display:flex; flex-direction:column; gap:10px;
}
.modal-head, .m-desc{ flex:none; margin-bottom:0; }
#completeForm, #doneView{ flex:1 1 auto; min-height:0; }
/* inside the form/done view only the media preview gives up space when cramped */
#completeForm > *, #doneView > *{ flex:none; }
/* Preview prefers ~40dvh but shrinks on small screens so the button stays in
   view. The media is absolutely positioned (object-fit:contain) to sidestep
   the flexbox percentage-height trap where an <img> keeps its intrinsic size. */
#mediaPreview, #doneMedia{ flex:1 1 40dvh; min-height:0; overflow:hidden; position:relative; }
@media (min-width:560px){ .modal{ place-items:center; } .modal-card{ border-radius:10px; border-bottom:var(--edge); box-shadow:var(--pop); } }
.modal-close{ position:absolute; top:12px; right:13px; background:var(--ink); color:var(--bone-hi); border:none; width:34px; height:34px; border-radius:5px; font-size:22px; line-height:1; }
.modal-head{ display:flex; align-items:center; gap:13px; margin-bottom:9px; padding-right:36px; }
.modal-head .m-emoji{ font-size:40px; width:58px; height:58px; display:grid; place-items:center; background:var(--bone-hi); border:2.5px solid var(--ink); border-radius:8px; box-shadow:var(--pop-sm); flex:none; }
.modal-head h3{ font-family:var(--ff-display); font-size:22px; color:var(--ink); letter-spacing:.3px; line-height:1.02; }
.modal-head .pts{ font-family:var(--ff-poster); font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--ember); font-size:13px; }
.m-desc{ font-family:var(--ff-body); color:var(--tx-soft); font-size:14px; margin:0 0 15px; }
.filepick{
  display:grid; place-items:center; text-align:center; border:2.5px dashed var(--turq);
  border-radius:6px; padding:22px; background:rgba(31,158,143,.07);
  font-family:var(--ff-poster); font-weight:600; text-transform:uppercase; letter-spacing:.06em; font-size:13px; color:var(--turq-deep);
}
.media-preview img, .media-preview video{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; border-radius:6px; border:2.5px solid var(--ink); background:#000; }
.modal-actions{ display:flex; gap:11px; margin-top:6px; }
.modal-actions .btn{ flex:1; }
.confirm-bar{ margin-top:8px; border-top:2.5px dashed var(--faded); padding-top:12px; }
.confirm-text{ font-family:var(--ff-body); font-weight:700; color:var(--ember-deep); font-size:14px; margin:0 0 10px; text-align:center; }
/* Upload progress — clear feedback that a (possibly large) file is on its way */
.upload-progress{ margin-top:8px; display:flex; flex-direction:column; align-items:center; gap:10px; }
.up-spinner{ width:30px; height:30px; border:3px solid var(--line); border-top-color:var(--ember); border-radius:50%; animation:upSpin .8s linear infinite; }
@media (prefers-reduced-motion: reduce){ .up-spinner{ animation-duration:2s; } }
@keyframes upSpin{ to{ transform:rotate(360deg); } }
/* Branded buffering overlay on a video: hidden by default, shown while the
   <video>'s parent holder carries .buffering (see wireVideoSpinner in app.js). */
.vspin{ display:none; position:absolute; inset:0; align-items:center; justify-content:center;
  background:rgba(0,0,0,.32); pointer-events:none; z-index:2; }
.buffering .vspin{ display:flex; }
.vspin-ring{ width:44px; height:44px; border:4px solid rgba(255,255,255,.28);
  border-top-color:var(--ember); border-radius:50%; animation:upSpin .8s linear infinite; }
@media (prefers-reduced-motion: reduce){ .vspin-ring{ animation-duration:2s; } }
.upload-progress .progress{ width:100%; margin:0; }
.up-msg{ font-family:var(--ff-poster); font-weight:600; text-transform:uppercase; letter-spacing:.08em; font-size:12px; color:var(--tx-soft); margin:0; }
#doneView{ display:flex; flex-direction:column; gap:12px; }
.done-label{ font-family:var(--ff-poster); font-weight:700; text-transform:uppercase; letter-spacing:.08em; font-size:13px; color:var(--cactus-deep); margin:0; }
.done-note{ font-family:var(--ff-body); font-style:italic; color:var(--tx-soft); margin:0; }
.done-meta{ font-family:var(--ff-poster); font-weight:500; text-transform:uppercase; letter-spacing:.08em; font-size:11px; color:var(--faded); margin:0; }
.done-voided{ font-family:var(--ff-body); font-size:13.5px; color:var(--ember-deep); background:#f6e7d6; border:2px solid var(--ember); border-radius:6px; padding:9px 11px; margin:0; }

/* ════════════════════════════════════════════════════════════════════════
   ADMIN
   ════════════════════════════════════════════════════════════════════════ */
.addfam{ display:flex; gap:9px; flex-wrap:wrap; margin-bottom:8px; }
.addfam input{ flex:1; min-width:130px; font-family:var(--ff-body); font-size:15px; background:var(--bone-hi); border:2.5px solid var(--ink); border-radius:5px; padding:12px; }
.famlist{ display:flex; flex-direction:column; gap:11px; margin-top:14px; }
.famrow{ display:flex; align-items:center; gap:12px; background:var(--bone); border:var(--edge); border-radius:var(--r); padding:12px 14px; box-shadow:var(--pop-sm); }
.famrow .f-name{ font-family:var(--ff-poster); font-weight:700; text-transform:uppercase; letter-spacing:.03em; flex:1; min-width:0; }
.famrow .f-pass{ font-family:"Courier New",monospace; font-weight:700; background:var(--bone-hi); padding:4px 9px; border-radius:4px; font-size:13px; border:2px solid var(--line); }
.famrow .f-del{ background:none; border:none; color:var(--ember); font-size:20px; }
.fcard .f-del{ font-family:var(--ff-poster); font-weight:700; text-transform:uppercase; letter-spacing:.06em; background:var(--ember); color:#fff2e2; border:2px solid var(--ink); border-radius:4px; padding:6px 11px; font-size:12px; margin-top:9px; }

/* ── Playlist banner + QR modal ── */
/* Footer holds the playlist banner (was at the top of the missions tab) */
.app-footer{ max-width:820px; margin:0 auto; padding:2px 15px calc(26px + env(safe-area-inset-bottom)); }
.playlist-banner{
  display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  background:var(--turq); color:var(--bone-hi); border:var(--edge); border-radius:var(--r);
  padding:12px 14px; box-shadow:var(--pop); margin:0; transition:transform .08s ease, box-shadow .08s ease;
}
.playlist-banner:active{ transform:translate(3px,3px); box-shadow:var(--pop-sm); }
.playlist-banner .pb-ico{ font-size:26px; line-height:1; }
.playlist-banner .pb-txt{ flex:1; min-width:0; }
.playlist-banner .pb-txt b{ font-family:var(--ff-poster); font-weight:700; text-transform:uppercase; letter-spacing:.05em; font-size:15px; display:block; }
.playlist-banner .pb-txt small{ font-family:var(--ff-body); font-size:12px; opacity:.9; }
.playlist-banner .pb-cta{ font-size:15px; background:var(--ink); border:2px solid var(--bone-hi); border-radius:50%; width:30px; height:30px; display:grid; place-items:center; flex:none; }
.pl-card{ text-align:center; }
.pl-title{ font-family:var(--ff-display); color:var(--ink); font-size:24px; }
.pl-sub{ font-family:var(--ff-body); font-style:italic; color:var(--tx-soft); font-size:13.5px; margin:6px 0 16px; }
.pl-qr{ background:var(--bone-hi); border:2.5px solid var(--ink); border-radius:8px; padding:16px; margin:0 auto 16px; width:min(260px,72vw); box-shadow:var(--pop-sm); }
.pl-qr img{ width:100%; height:auto; display:block; }

/* ── Admin extras ── */
.admin-setting{ margin-top:26px; padding-top:20px; border-top:2.5px solid rgba(255,255,255,.12); }
.admin-setting .lbl{ color:var(--tx-inv-soft); display:block; margin-bottom:8px; }
.admin-setting .pane-hint{ margin-top:8px; }
#playlistUrlInput{ flex:1 1 100%; }
.danger-zone{ border-top-color:rgba(191,59,35,.5); }
.danger-zone .lbl{ color:var(--ember2, #d1553e); }
.danger-zone #resetPass{ width:100%; font-family:var(--ff-body); font-size:15px; background:var(--bone-hi); border:2.5px solid var(--ember); border-radius:5px; padding:11px; margin-bottom:10px; }
.reset-btns{ display:flex; gap:10px; flex-wrap:wrap; }
.reset-btns .btn{ flex:1; min-width:150px; }
.btn-danger{ background:var(--ember-deep); border-color:#4a1409; color:#ffe9df; }
.gallery-filter{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.gallery-filter .lbl{ color:var(--tx-inv-soft); }
.gallery-filter select{ font-family:var(--ff-body); font-size:15px; background:var(--bone-hi); border:2.5px solid var(--ink); border-radius:5px; padding:9px 12px; flex:1; min-width:160px; }
.fcard .f-title-fam{ font-family:var(--ff-poster); font-weight:600; text-transform:uppercase; letter-spacing:.06em; font-size:10.5px; color:var(--turq-deep); margin-bottom:2px; }

/* ════════════════════════════════════════════════════════════════════════
   JUICE / FANFARE
   ════════════════════════════════════════════════════════════════════════ */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
/* A <canvas> is a replaced element, so it needs an explicit width (inset:0
   won't stretch it). max-width guards against any sub-pixel rounding past the
   right edge — fixed elements escape overflow:clip on <html>. */
.fx-canvas{ position:fixed; top:0; left:0; width:100%; max-width:100%; height:100%; z-index:95; pointer-events:none; }
.fx-layer{ position:fixed; inset:0; z-index:96; pointer-events:none; overflow:hidden; }
.fx-stamp{ position:absolute; left:50%; top:42%; transform:translate(-50%,-50%); display:flex; align-items:center; gap:12px; white-space:nowrap; }

/* Dismissible celebration card (rank overtake / BINGÓ!) — sits just under the
   confetti canvas (z-95) so confetti rains over it; tap "Áfram" to continue. */
.cheer-back{ position:fixed; inset:0; z-index:94; display:grid; place-items:center; padding:22px; background:rgba(15,10,5,.72); animation:cheerFade .2s ease; }
.cheer-card{ width:100%; max-width:400px; background:var(--bone); border:var(--edge); border-radius:12px; box-shadow:var(--pop); padding:26px 22px calc(24px + env(safe-area-inset-bottom)); text-align:center; position:relative; animation:cheerPop .32s cubic-bezier(.2,.9,.3,1.15); }
.cheer-card.cheer-rank{ background:var(--turq); color:var(--bone-hi); border-color:var(--ink); }
.cheer-emoji{ font-size:52px; line-height:1; }
.cheer-title{ font-family:var(--ff-display); font-size:36px; line-height:.98; color:var(--ember); margin:8px 0 6px; overflow-wrap:break-word; }
.cheer-card.cheer-rank .cheer-title{ color:var(--bone-hi); text-shadow:2px 2px 0 var(--ink); }
.cheer-sub{ font-family:var(--ff-body); font-size:16px; line-height:1.3; color:var(--tx-soft); margin:0 0 18px; overflow-wrap:break-word; }
.cheer-card.cheer-rank .cheer-sub{ color:var(--bone-hi); }
.cheer-cta{ width:100%; background:var(--ember); color:#fff2e2; }
.cheer-card.cheer-rank .cheer-cta{ background:var(--ink); color:var(--bone-hi); border-color:var(--bone-hi); }
@keyframes cheerFade{ from{ opacity:0; } }
@keyframes cheerPop{ from{ transform:scale(.85); opacity:0; } }
@media (prefers-reduced-motion: reduce){ .cheer-back,.cheer-card{ animation:none; } }

/* tier 1 — small mission-done chip */
.fx-stamp.fx-small{
  background:var(--bone-hi); border:var(--edge); border-radius:10px; padding:12px 18px;
  box-shadow:var(--pop); animation:fxPop 1.05s cubic-bezier(.2,.9,.3,1) forwards;
}
.fx-small .fx-mark{ width:34px; height:34px; border-radius:50%; background:var(--cactus); color:#fff; border:2.5px solid var(--ink); display:grid; place-items:center; font-size:19px; transform:rotate(-8deg); }
.fx-small .fx-word{ font-family:var(--ff-display); color:var(--ink); font-size:24px; }
.fx-small .fx-pts{ font-family:var(--ff-poster); font-weight:700; color:#fff2e2; background:var(--ember); border:2px solid var(--ink); border-radius:5px; padding:2px 9px; font-size:15px; }

/* tier 2 — category clear */
.fx-stamp.fx-big{ flex-direction:column; gap:6px; top:40%; text-align:center; animation:fxBig 2.4s cubic-bezier(.2,.9,.3,1) forwards; }
.fx-big .fx-bingo{ font-family:var(--ff-display); font-size:76px; line-height:.9; color:var(--ember); text-shadow:4px 4px 0 var(--brass), -1px -1px 0 var(--ink); letter-spacing:1px; }
.fx-big .fx-cat{ font-family:var(--ff-poster); font-weight:700; text-transform:uppercase; letter-spacing:.08em; font-size:18px; color:var(--bone-hi); background:var(--ink); padding:6px 16px; border-radius:5px; }
.fx-big .fx-pts{ font-family:var(--ff-display); font-size:26px; color:var(--brass); text-shadow:2px 2px 0 var(--ink); }

/* tier 3 — rank up banner */
.fx-stamp.fx-rank{ top:16%; background:var(--turq); color:var(--bone-hi); border:var(--edge); border-radius:10px; padding:11px 18px; box-shadow:var(--pop); animation:fxBanner 1.9s cubic-bezier(.2,.9,.3,1) forwards; max-width:88vw; }
.fx-rank .fx-rankico{ font-size:24px; }
.fx-rank .fx-word{ font-family:var(--ff-poster); font-weight:700; text-transform:uppercase; letter-spacing:.03em; font-size:15px; white-space:normal; }

@keyframes fxPop{
  0%{ transform:translate(-50%,-50%) scale(.4) rotate(-9deg); opacity:0; }
  16%{ opacity:1; } 26%{ transform:translate(-50%,-50%) scale(1.09) rotate(-4deg); }
  40%{ transform:translate(-50%,-50%) scale(1) rotate(-3deg); opacity:1; }
  78%{ opacity:1; } 100%{ transform:translate(-50%,-56%) scale(1) rotate(-3deg); opacity:0; }
}
@keyframes fxBig{
  0%{ transform:translate(-50%,-50%) scale(.3) rotate(-8deg); opacity:0; }
  12%{ opacity:1; } 22%{ transform:translate(-50%,-50%) scale(1.12) rotate(-3deg); }
  34%{ transform:translate(-50%,-50%) scale(1) rotate(-2deg); }
  82%{ opacity:1; transform:translate(-50%,-50%) scale(1) rotate(-2deg); } 100%{ opacity:0; transform:translate(-50%,-54%) scale(1) rotate(-2deg); }
}
@keyframes fxBanner{
  0%{ transform:translate(-50%,-140%); opacity:0; } 14%{ transform:translate(-50%,-50%); opacity:1; }
  82%{ transform:translate(-50%,-50%); opacity:1; } 100%{ transform:translate(-50%,-90%); opacity:0; }
}

/* ── Admin: editable family rows ── */
.famrow .fr-color{ flex:none; width:34px; height:34px; padding:0; border:2.5px solid var(--ink); border-radius:50%; background:none; cursor:pointer; -webkit-appearance:none; appearance:none; overflow:hidden; }
.famrow .fr-color::-webkit-color-swatch-wrapper{ padding:0; }
.famrow .fr-color::-webkit-color-swatch{ border:none; border-radius:50%; }
.famrow .fr-color::-moz-color-swatch{ border:none; border-radius:50%; }
.famrow .fr-name, .famrow .fr-pass{ font-family:var(--ff-body); font-size:15px; background:var(--bone-hi); border:2px solid var(--faded); border-radius:5px; padding:8px 10px; min-width:0; }
.famrow .fr-name{ flex:1 1 40%; font-weight:700; }
.famrow .fr-pass{ flex:1 1 30%; font-family:"Courier New",monospace; }
.famrow .fr-done{ font-family:var(--ff-poster); font-weight:600; font-size:12px; color:var(--tx-soft); }
.famrow .fr-save{ font-family:var(--ff-poster); font-weight:700; text-transform:uppercase; letter-spacing:.05em; font-size:12px; background:var(--turq); color:var(--bone-hi); border:2px solid var(--ink); border-radius:5px; padding:7px 11px; }

/* ── Admin: mission editor ── */
.missionlist{ display:flex; flex-direction:column; gap:8px; }
.ml-cat{ font-family:var(--ff-display); color:var(--bone-hi); font-size:17px; margin:16px 0 4px; }
.missionrow{ display:flex; flex-wrap:wrap; gap:7px; align-items:center; background:var(--bone); border:var(--edge); border-radius:var(--r); padding:9px 10px; box-shadow:var(--pop-sm); }
.missionrow.is-add{ background:#e7f2ee; margin-bottom:6px; }
.missionrow input, .missionrow select{ font-family:var(--ff-body); font-size:14px; background:var(--bone-hi); border:2px solid var(--faded); border-radius:5px; padding:7px 8px; min-width:0; }
.missionrow .mr-emoji{ width:48px; text-align:center; }
.missionrow .mr-title{ flex:1 1 140px; font-weight:700; }
.missionrow .mr-descr{ flex:1 1 100%; }
.missionrow .mr-cat{ flex:1 1 130px; }
.missionrow .mr-points{ width:64px; }
.missionrow .mr-save{ font-family:var(--ff-poster); font-weight:700; text-transform:uppercase; letter-spacing:.05em; font-size:12px; background:var(--turq); color:var(--bone-hi); border:2px solid var(--ink); border-radius:5px; padding:8px 12px; }
.missionrow.is-add .mr-save{ background:var(--ember); color:#fff2e2; }
.missionrow .mr-del{ background:none; border:none; color:var(--ember); font-size:18px; }

/* ── Admin: text (content) editor ── */
.content-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.content-actions .btn{ flex:1; min-width:150px; }
.contentlist{ display:flex; flex-direction:column; gap:9px; }
.contentrow{ background:var(--bone); border:var(--edge); border-radius:var(--r); padding:9px 11px; box-shadow:var(--pop-sm); }
.contentrow .cr-label{ display:block; font-family:var(--ff-poster); font-weight:600; text-transform:uppercase; letter-spacing:.04em; font-size:11px; color:var(--tx-soft); margin-bottom:5px; }
.contentrow .cr-input{ width:100%; font-family:var(--ff-body); font-size:15px; background:var(--bone-hi); border:2px solid var(--faded); border-radius:5px; padding:8px 10px; resize:vertical; }
.contentrow .cr-input:focus{ outline:none; border-color:var(--turq); }

/* ── Personal stats card (Stigatafla tab) ── */
.mystats{ background:var(--bone); border:var(--edge); border-radius:var(--r); box-shadow:var(--pop); padding:12px 13px; margin-bottom:16px; }
.ms-title{ font-family:var(--ff-poster); font-weight:700; text-transform:uppercase; letter-spacing:.1em; font-size:12px; color:var(--tx-soft); margin-bottom:10px; }
.ms-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
@media (max-width:470px){ .ms-grid{ grid-template-columns:1fr 1fr; } }
.ms-cell{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:3px; padding:9px 4px; border-radius:7px; background:var(--bone-hi); border:2px solid var(--line); }
.ms-cell-total{ background:var(--brass); border-color:var(--ink); }
.ms-num{ font-family:var(--ff-display); font-size:26px; color:var(--ember); line-height:1; }
.ms-cell-total .ms-num{ color:var(--ink); }
.ms-lbl{ font-family:var(--ff-poster); font-weight:600; text-transform:uppercase; letter-spacing:.03em; font-size:9.5px; color:var(--tx-soft); line-height:1.1; }
.ms-cell-total .ms-lbl{ color:var(--ink-soft); }

/* ── Lightbox (locked full-screen photo/video; rotate device for landscape) ── */
.lightbox{
  position:fixed; inset:0; z-index:100; height:100dvh;
  background:#080503; display:flex; align-items:center; justify-content:center;
  padding:10px;
  /* Truly locked: no internal scroll, no rubber-band, nothing bleeds through. */
  overflow:hidden; touch-action:none; overscroll-behavior:contain;
}
.lb-content{ max-width:100%; max-height:100%; display:flex; align-items:center; justify-content:center; position:relative; }
.lb-content img, .lb-content video{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; border-radius:4px; }
.lb-close{ position:fixed; top:calc(12px + env(safe-area-inset-top)); right:14px; z-index:2; background:var(--ink-soft); color:var(--bone-hi); border:2.5px solid var(--bone-hi); width:44px; height:44px; border-radius:8px; font-size:24px; box-shadow:var(--pop-sm); }
.f-media img, #doneMedia img.tap-full{ cursor:zoom-in; }

/* ── Awards ceremony (scroll-snap reveal) ── */
body.cer-lock{ overflow:hidden; }
.ceremony{
  position:fixed; inset:0; z-index:90; overflow-y:auto; scroll-snap-type:y mandatory;
  -webkit-overflow-scrolling:touch; scroll-behavior:smooth;
  background:var(--ink);
  background-image:
    radial-gradient(120% 70% at 50% 0%, rgba(214,154,44,.10), transparent 55%),
    repeating-linear-gradient(90deg, rgba(0,0,0,.20) 0 1.5px, transparent 1.5px 34px),
    linear-gradient(180deg,#221810,#0f0a05);
}
.ceremony-close{ position:fixed; top:calc(12px + env(safe-area-inset-top)); right:14px; z-index:2; background:var(--ink-soft); color:var(--bone-hi); border:2.5px solid var(--bone-hi); width:40px; height:40px; border-radius:8px; font-size:22px; }
.cer-page{
  min-height:100dvh; scroll-snap-align:start; scroll-snap-stop:always;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  padding:40px 24px; position:relative; gap:12px;
  opacity:0; transform:translateY(26px); transition:opacity .55s ease, transform .55s cubic-bezier(.2,.8,.2,1);
}
.cer-page.in{ opacity:1; transform:none; }
.cer-stars{ color:var(--ember); letter-spacing:.4em; font-size:16px; }
.cer-introttl{ font-family:var(--ff-display); color:var(--bone-hi); font-size:64px; line-height:.9; }
.cer-introsub{ font-family:var(--ff-body); font-style:italic; color:var(--tx-inv-soft); font-size:16px; margin:0; }
.cer-arrow{ margin-top:20px; font-size:34px; color:var(--brass); animation:cerBounce 1.6s ease-in-out infinite; }
@keyframes cerBounce{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(10px); } }
.cer-place{ font-family:var(--ff-poster); font-weight:700; text-transform:uppercase; letter-spacing:.14em; font-size:20px; color:var(--brass); }
.cer-fam{ display:flex; align-items:center; gap:12px; justify-content:center; }
.cer-fam .dot{ width:20px; height:20px; border-color:var(--bone-hi); }
.cer-name{ font-family:var(--ff-display); color:var(--bone-hi); font-size:44px; line-height:.95; }
.cer-stat{ font-family:var(--ff-poster); font-weight:600; text-transform:uppercase; letter-spacing:.1em; font-size:14px; color:var(--tx-inv-soft); }
.cer-points{ margin-top:6px; }
.cer-num{ font-family:var(--ff-display); color:var(--ember); font-size:60px; line-height:.9; }
.cer-ptword{ font-family:var(--ff-poster); font-weight:700; text-transform:uppercase; letter-spacing:.1em; font-size:16px; color:var(--tx-inv-soft); }
.cer-suspense{ }
.cer-suspensetxt{ font-family:var(--ff-display); color:var(--brass); font-size:34px; line-height:1.05; font-style:normal; }
.cer-winner{ }
.cer-winner .cer-crown{ font-size:56px; }
.cer-winner .cer-wlabel{ font-family:var(--ff-poster); font-weight:700; text-transform:uppercase; letter-spacing:.24em; font-size:22px; color:var(--brass); text-shadow:2px 2px 0 var(--ink); }
.cer-winner .cer-name{ font-size:60px; color:#fff3e2; text-shadow:3px 3px 0 var(--fam,var(--ember)); }
.cer-winner .cer-num{ font-size:80px; color:var(--brass); text-shadow:3px 3px 0 var(--ink); }
.cer-summaryttl{ font-family:var(--ff-display); color:var(--bone-hi); font-size:40px; margin-bottom:18px; line-height:.95; }
.cer-tablewrap{ width:100%; max-width:560px; overflow-x:auto; }
.cer-table{ width:100%; border-collapse:collapse; background:var(--bone); border:2.5px solid var(--ink); border-radius:8px; overflow:hidden; }
.cer-table th{ font-family:var(--ff-poster); font-weight:700; text-transform:uppercase; letter-spacing:.03em; font-size:10px; color:var(--tx-soft); padding:9px 5px; border-bottom:2.5px solid var(--ink); }
.cer-table td{ font-family:var(--ff-body); font-size:14px; color:var(--tx); padding:10px 5px; border-bottom:1px solid var(--line); text-align:center; }
.cer-table .sm-rank{ font-family:var(--ff-display); color:var(--brass-deep); font-size:18px; }
.cer-table .sm-fam{ text-align:left; font-weight:700; }
.cer-table .sm-fam .dot{ width:11px; height:11px; border-color:var(--ink); display:inline-block; vertical-align:middle; margin-right:6px; }
.cer-table .sm-total{ font-family:var(--ff-display); color:var(--ember); font-size:18px; }
.cer-table tbody tr:first-child{ background:linear-gradient(180deg,#fbf3df,#f1e2b6); }

@media (prefers-reduced-motion: reduce){
  .fx-stamp{ animation:none !important; opacity:1 !important; }
  .progress-fill{ transition:none !important; }
  .ceremony{ scroll-behavior:auto; }
  .cer-page{ opacity:1 !important; transform:none !important; transition:none !important; }
  .cer-arrow{ animation:none; }
}

/* ── Activity feed controls ── */
.feed-filters{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:14px; }
.feed-filters .feed-filter:first-child{ grid-column:1 / -1; }  /* family full-width on mobile */
@media (min-width:560px){
  .feed-filters{ grid-template-columns:2fr 1fr 1fr; }
  .feed-filters .feed-filter:first-child{ grid-column:auto; }
}
.feed-filter{ width:100%; font-family:var(--ff-body); font-size:15px; color:var(--tx); background:var(--bone-hi); border:2.5px solid var(--ink); border-radius:5px; padding:10px 10px; box-shadow:var(--pop-sm); }
.media-missing{ display:flex; align-items:center; justify-content:center; min-height:70px; padding:18px; font-family:var(--ff-poster); font-weight:600; text-transform:uppercase; letter-spacing:.06em; font-size:11px; color:var(--faded); background:var(--bone-dim); text-align:center; }
.feed-pill{ position:sticky; top:calc(96px + env(safe-area-inset-top)); z-index:15; display:block; margin:0 auto 12px; background:var(--turq); color:var(--bone-hi); border:2.5px solid var(--ink); border-radius:22px; padding:9px 20px; font-family:var(--ff-poster); font-weight:700; text-transform:uppercase; letter-spacing:.05em; font-size:13px; box-shadow:var(--pop); }
.feed-pill:active{ transform:translate(2px,2px); box-shadow:var(--pop-sm); }
.feed-status{ text-align:center; color:var(--tx-inv-soft); font-family:var(--ff-body); font-style:italic; padding:20px 16px; }
#feedSentinel{ height:1px; }

/* ── Text editor: preview + undo ── */
.content-actions .btn.btn-preview{ background:var(--north); color:var(--bone-hi); }
#previewBody{ display:flex; flex-direction:column; gap:14px; }
.pv-block{ background:var(--bone-hi); border:2px solid var(--line); border-radius:8px; padding:14px; }
.pv-tag{ font-family:var(--ff-poster); font-weight:600; text-transform:uppercase; letter-spacing:.12em; font-size:10px; color:var(--turq-deep); margin-bottom:8px; }
.pv-title1{ font-family:var(--ff-display); color:var(--ember); font-size:30px; line-height:.9; }
.pv-title2{ font-family:var(--ff-display); color:var(--ink); font-size:38px; line-height:.9; }
.pv-ribbon{ display:inline-block; font-family:var(--ff-poster); font-weight:600; text-transform:uppercase; letter-spacing:.14em; font-size:10px; color:var(--bone-hi); background:var(--ink); padding:4px 10px; border-radius:3px; margin-top:6px; }
.toast-action{ background:var(--brass); color:var(--ink); border:2px solid var(--bone-hi); border-radius:14px; font-family:var(--ff-poster); font-weight:700; text-transform:uppercase; letter-spacing:.05em; font-size:12px; padding:4px 12px; margin-left:12px; }

/* ── Toast ── */
.toast{
  position:fixed; left:50%; bottom:calc(26px + env(safe-area-inset-bottom)); transform:translateX(-50%);
  background:var(--ink); color:var(--bone-hi); padding:13px 22px; border:2.5px solid var(--brass);
  border-radius:6px; font-family:var(--ff-poster); font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  font-size:14px; z-index:80; box-shadow:var(--pop); max-width:90vw; text-align:center;
}

/* "New version ready — tap to update" bar (for tabs left open across deploys) */
.update-bar{
  position:fixed; left:50%; top:calc(8px + env(safe-area-inset-top)); transform:translateX(-50%);
  z-index:99; background:var(--turq); color:var(--bone-hi); border:2.5px solid var(--ink);
  border-radius:20px; padding:9px 18px; box-shadow:var(--pop-sm); max-width:92vw;
  font-family:var(--ff-poster); font-weight:600; text-transform:uppercase; letter-spacing:.05em; font-size:12.5px;
  animation:updateIn .35s cubic-bezier(.2,.9,.3,1.1);
}
.update-bar b{ font-weight:800; }
.update-bar:active{ transform:translateX(-50%) translateY(1px); }
@keyframes updateIn{ from{ opacity:0; transform:translateX(-50%) translateY(-12px); } }
@media (prefers-reduced-motion: reduce){ .update-bar{ animation:none; } }