/* ================= SATURDAY =================
     Cut-paper scrapbook. Tomato red ink on paper white.
     Icons are PNG masks tinted by currentColor, so one asset works
     on paper, on red, idle or active. */
  :root{
    /* dark liquid glass · red ink accents · same assets */
    --bg:#0B0C10;
    --red:#C43B24;            /* fills & buttons — white text on it passes AA */
    --pink:#FF2D8A;           /* neon accent — glows, rings, active states */
    --red-hi:#FF5CA8;         /* interactive text/icons — 6.8:1 on the field */
    --red-deep:#FFA9CD;       /* header text on tinted glass */
    --red-wash:rgba(255,45,138,.11);
    --red-line:rgba(255,92,168,.28);
    --paper:#0B0C10;
    --card:rgba(26,28,36,.62);
    --glass-hairline:rgba(255,255,255,.09);
    --ink:#F1EEE9; --ink-2:#C9C2BA; --soft:#9A928A;
    --good:#5FBF8A; --warn:#F08A76;
    --shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 10px 30px rgba(0,0,0,.45);
    --shadow-lg:0 1px 0 rgba(255,255,255,.07) inset, 0 22px 60px rgba(0,0,0,.6);
    --round:20px;
    --font:"Avenir Next","Avenir","Nunito Sans","Segoe UI",system-ui,-apple-system,
      BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif;
    --font-display:"Avenir Next Condensed","Haettenschweiler","Arial Narrow",var(--font);
    color-scheme:dark;
  }
  *{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
  body{ touch-action:manipulation; overscroll-behavior-y:contain; }
  .moretile:active,.navlink:active,.rx:active,.tb-ic:active{ transform:scale(.94); }
  #tabbar a:active .wrapicon{ transform:scale(.9); transition:transform .1s; }
  html{ -webkit-text-size-adjust:100%; background:var(--bg); }
  body{ margin:0; color:var(--ink); min-height:100vh;
    background:
      radial-gradient(900px 600px at 85% -10%, rgba(255,45,138,.16), transparent 60%),
      radial-gradient(700px 500px at -10% 30%, rgba(196,59,36,.10), transparent 55%),
      radial-gradient(800px 700px at 50% 110%, rgba(255,45,138,.10), transparent 60%),
      var(--bg);
    background-attachment:fixed;
    font-family:var(--font); font-size:15px; line-height:1.55;
    -webkit-font-smoothing:antialiased; }
  a{ color:var(--red-hi); text-decoration:none; cursor:pointer; font-weight:600; }
  a:hover{ text-decoration:underline; text-underline-offset:2px; }
  b,strong{ font-weight:800; }

  .ic{ display:inline-block; vertical-align:-4px; width:22px; height:22px;
    background-size:contain; background-repeat:no-repeat; background-position:center;
    filter:drop-shadow(0 2px 5px rgba(0,0,0,.6)); }

  #loading{ position:fixed; inset:0; z-index:100; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:18px; background:var(--bg); }
  #loading img.word{ width:min(62vw,300px); height:auto; }
  .blink{ animation:blink 1.4s ease-in-out infinite; }
  @keyframes blink{ 0%,100%{opacity:1} 50%{opacity:.3} }

  #topbar{ background:rgba(16,13,18,.74); backdrop-filter:blur(22px) saturate(1.6);
    -webkit-backdrop-filter:blur(22px) saturate(1.6);
    border-bottom:1px solid var(--glass-hairline); position:sticky; top:0; z-index:50; height:58px;
    padding:0 16px; display:flex; align-items:center; gap:13px;
    box-shadow:0 8px 30px rgba(0,0,0,.35); }
  #logo{ display:flex; align-items:center; cursor:pointer; height:27px; }
  #logo img{ height:27px; width:auto; display:block; }
  #topbar input{ background:rgba(255,255,255,.16); border:1.5px solid rgba(255,255,255,.32);
    border-radius:999px; font-size:13.5px; padding:7px 14px; width:190px; margin:0;
    color:#fff; font-weight:600; }
  #topbar input::placeholder{ color:rgba(255,255,255,.72); font-weight:500; }
  #topbar input:focus{ background:rgba(255,255,255,.26); border-color:rgba(255,255,255,.6); box-shadow:none; }
  #topbar a{ color:rgba(255,255,255,.9); font-size:13px; font-weight:600;
    display:inline-flex; align-items:center; gap:5px; position:relative; }
  #topbar a:hover{ color:#fff; text-decoration:none; }
  #topbar .sep{ color:rgba(255,255,255,.34); }
  #topbar .badge{ background:#fff; color:var(--red-deep); }
  #topbar .ic{ width:18px; height:18px; }

  #wrap{ max-width:1040px; margin:0 auto; padding:22px 18px 60px;
    display:flex; gap:24px; align-items:flex-start; }
  #sidebar{ width:212px; flex-shrink:0; position:sticky; top:80px; }
  #main,#content{ flex:1; min-width:0; }

  .card{ position:relative; background:linear-gradient(160deg,rgba(255,255,255,.075),rgba(255,255,255,.022) 44%,rgba(0,0,0,.15));
    border:1px solid rgba(255,255,255,.09); border-radius:22px;
    margin-bottom:18px; overflow:hidden;
    backdrop-filter:blur(22px) saturate(1.6); -webkit-backdrop-filter:blur(22px) saturate(1.6);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.22),
      inset 0 -1px 0 rgba(0,0,0,.40),
      0 18px 44px rgba(0,0,0,.50); }
  .card::after{ content:""; position:absolute; left:10%; right:10%; top:0; height:1px; pointer-events:none;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent); }
  .card > h2{ position:relative; margin:0; padding:17px 19px 15px; font-size:15px; font-weight:800;
    letter-spacing:-.01em; color:var(--ink);
    background:linear-gradient(180deg,rgba(255,255,255,.055),transparent);
    border-bottom:1px solid rgba(255,255,255,.07);
    display:flex; align-items:center; gap:11px; }
  .card > h2 .ic{ color:var(--red-hi); width:19px; height:19px; }
  .card > h2 small{ font-weight:600; color:var(--soft); margin-left:auto; font-size:11.5px; }
  .card > h2 small a{ color:var(--red); }
  .pad{ padding:18px; }

  .item{ padding:15px 0; border-bottom:1px solid var(--glass-hairline); }
  .item:last-child{ border-bottom:0; }
  .item:first-child{ padding-top:0; }
  .row{ display:flex; gap:10px; }
  .muted{ color:var(--soft); font-size:12.5px; }
  .center{ text-align:center; }

  .avatar,img.av,.av{ border-radius:50%; overflow:hidden; flex:none;
    box-shadow:0 0 0 2px var(--pink), 0 0 10px rgba(255,45,138,.35) !important;
    display:inline-flex; align-items:center; justify-content:center;
    background:var(--red-wash); color:var(--red-deep); font-weight:800;
    box-shadow:inset 0 0 0 2px var(--red-line); }
  .avatar img{ width:100%; height:100%; object-fit:cover; display:block; }

  button{ font-family:inherit; font-size:15px; font-weight:800; cursor:pointer; color:#fff;
    background:linear-gradient(180deg,#FF5CA8,#E01F73 62%,#C4155F); border:none;
    border-radius:999px; padding:12px 24px; min-height:46px; position:relative;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 0 rgba(0,0,0,.26),
               0 8px 22px rgba(255,45,138,.36);
    display:inline-flex; align-items:center; gap:7px; justify-content:center;
    transition:background .13s ease, transform .1s ease; }
  button:hover{ background:#D8452C; border-color:#D8452C; box-shadow:0 0 20px rgba(255,45,138,.35); }
  button:active{ transform:scale(.97); }
  button .ic{ width:17px; height:17px; }
  button.ghost{ background:rgba(255,255,255,.06); color:var(--red-deep);
    border:1px solid rgba(255,255,255,.12); box-shadow:inset 0 1px 0 rgba(255,255,255,.14); }
  button.ghost:hover{ background:var(--red-wash); border-color:var(--red-hi); color:var(--red-deep); }
  button.mini{ font-size:13px; padding:8px 16px; min-height:36px; }
  button:disabled{ opacity:.4; cursor:default; }

  input,textarea,select{ font-family:inherit; font-size:16px; color:var(--ink); width:100%;
    background:rgba(255,255,255,.06); border:1.5px solid var(--glass-hairline); border-radius:12px; padding:10px 13px;
    margin-top:5px; transition:border-color .13s ease, box-shadow .13s ease; }
  input:focus,textarea:focus,select:focus{ outline:none; background:rgba(255,255,255,.09); border-color:var(--pink);
    box-shadow:0 0 0 3px rgba(255,45,138,.20), 0 0 18px rgba(255,45,138,.25); }
  input::placeholder,textarea::placeholder{ color:#7c756e; }
  label{ display:block; font-size:12px; font-weight:800; color:var(--ink-2); margin-top:15px;
    text-transform:uppercase; letter-spacing:.05em; }
  textarea{ resize:vertical; line-height:1.55; }

  .chip{ display:inline-block; background:rgba(255,45,138,.15); color:var(--red-deep);
    border:1px solid rgba(255,92,168,.26); border-radius:999px; padding:4px 12px; font-size:12px;
    font-weight:700; box-shadow:inset 0 1px 0 rgba(255,255,255,.16); }
  .badge{ background:var(--red); color:#fff; border-radius:999px; font-size:10px;
    padding:2px 7px; font-weight:800; }

  .navlink{ display:flex; align-items:center; gap:11px; padding:8px 12px; color:var(--ink-2);
    font-size:14px; font-weight:600; border-radius:999px; margin-bottom:1px; }
  .navlink .ic{ width:19px; height:19px; color:var(--soft); }
  .navlink:hover{ background:var(--red-wash); text-decoration:none; color:var(--ink); }
  .navlink:hover .ic{ color:var(--red-hi); }
  .navlink.on{ background:var(--red); color:#fff; font-weight:800; }
  .navlink.on .ic{ color:#fff; }
  .navlink.on .badge{ background:#fff; color:var(--red-deep); }
  .navsec{ font-size:10.5px; font-weight:800; color:var(--soft); text-transform:uppercase;
    letter-spacing:.11em; padding:15px 12px 5px; }

  .post{ padding:16px 0; border-bottom:1px solid var(--red-line); }
  .post:last-child{ border-bottom:0; }
  .post:first-child{ padding-top:0; }
  .postbody{ line-height:1.62; font-size:15px; word-break:break-word; margin:7px 0; }
  .actionbar{ margin-top:11px; display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
  .rx{ cursor:pointer; color:var(--ink-2); font-size:14px; font-weight:700;
    display:inline-flex; align-items:center; gap:7px; padding:9px 15px; min-height:42px; border-radius:999px;
    transition:background .12s ease; }
  .rx .ic{ width:15px; height:15px; }
  .rx:hover{ color:var(--red-hi); background:var(--red-wash); }
  .rx.on{ color:var(--red-hi); background:var(--red-wash); }
  .comment{ border-left:3px solid var(--red-line); padding:6px 0 6px 12px; margin:8px 0 0 4px;
    font-size:14px; }
  .composer{ background:rgba(255,255,255,.05); border:1.5px solid var(--glass-hairline); border-radius:18px; padding:15px; }
  .flash{ position:relative; background:linear-gradient(160deg,rgba(255,45,138,.16),rgba(255,45,138,.05));
    border:1px solid rgba(255,92,168,.30); border-radius:20px;
    padding:15px 17px; font-size:14.5px; margin-bottom:16px;
    backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 12px 30px rgba(0,0,0,.4); }
  .flash .ic{ color:var(--red-hi); }
  
  .sk{ background:linear-gradient(90deg,rgba(255,255,255,.05) 25%,rgba(255,255,255,.10) 37%,rgba(255,255,255,.05) 63%);
    background-size:400% 100%; border-radius:8px; animation:sk 1.3s ease infinite; }
  @keyframes sk{ 0%{background-position:100% 50%} 100%{background-position:0 50%} }
  #ptr{ text-align:center; font-size:12px; color:var(--soft); height:0; overflow:hidden;
    transition:height .18s; }

  .photocell{ border:1px solid var(--glass-hairline); border-radius:14px; overflow:hidden;
    background:var(--card); box-shadow:var(--shadow); }
  .photocell img{ display:block; width:100%; }
  .cap{ padding:9px 11px; font-size:12.5px; }
  .filmstrip{ display:flex; gap:8px; overflow-x:auto; padding:4px 0; }
  .mediaembed{ border-radius:14px; overflow:hidden; }

  /* every feature reachable on mobile */
  #moreveil{ position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:60; display:none; }
  #moreveil.open{ display:block; animation:fade .18s ease; }
  #moresheet{ position:fixed; left:0; right:0; bottom:0; z-index:61;
    background:rgba(18,20,26,.82); backdrop-filter:blur(26px) saturate(1.6);
    -webkit-backdrop-filter:blur(26px) saturate(1.6);
    border-top:1px solid var(--glass-hairline);
    border-radius:22px 22px 0 0; box-shadow:var(--shadow-lg);
    padding:10px 16px calc(20px + env(safe-area-inset-bottom));
    max-height:84vh; overflow-y:auto; transform:translateY(100%);
    transition:transform .24s cubic-bezier(.22,1,.36,1); }
  #moreveil.open #moresheet{ transform:translateY(0); }
  #moresheet .grab{ width:44px; height:5px; border-radius:999px; background:rgba(255,255,255,.22);
    margin:6px auto 10px; }
  #moresheet .navsec{ padding:13px 2px 6px; }
  .moregrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
  .moretile{ background:rgba(255,255,255,.06); border:1px solid var(--glass-hairline); border-radius:20px;
    padding:18px 6px 14px; text-align:center; color:var(--ink-2); font-size:10.5px;
    font-weight:700; line-height:1.25; display:flex; flex-direction:column; align-items:center;
    gap:7px; position:relative; }
  .moretile:hover{ text-decoration:none; }
  .moretile .ic{ width:24px; height:24px; color:var(--red); }
  .moretile.on{ background:var(--red); border-color:var(--red); color:#fff; }
  .moretile.on .ic{ color:#fff; }
  .moretile .badge{ position:absolute; top:5px; right:5px; }
  @keyframes fade{ from{opacity:0} to{opacity:1} }

  #tabbar{ position:fixed; bottom:0; left:0; right:0; background:rgba(14,15,20,.78);
    backdrop-filter:blur(22px) saturate(1.6); -webkit-backdrop-filter:blur(22px) saturate(1.6);
    border-top:1px solid var(--glass-hairline);
    z-index:40; display:none; padding-bottom:env(safe-area-inset-bottom);
    box-shadow:0 -8px 30px rgba(0,0,0,.35); }
  #tabbar .row{ justify-content:space-around; gap:0; }
  #tabbar a{ flex:1; text-align:center; padding:11px 0 9px; font-size:11.5px; color:var(--soft);
    font-weight:700; }
  #tabbar a:hover{ text-decoration:none; }
  #tabbar .wrapicon{ position:relative; display:inline-flex; align-items:center;
    justify-content:center; width:56px; height:38px; margin-bottom:1px; }
  #tabbar .wrapicon .ic{ position:relative; z-index:1; width:23px; height:23px; color:var(--soft); }
  #tabbar .glow{ position:absolute; inset:0; border-radius:12px; background:var(--pink);
    opacity:0; transform:scale(.7); transition:opacity .16s ease, transform .16s ease; }
  #tabbar a.on .glow{ opacity:.16; transform:scale(1); }
  #tabbar a.on .ic{ filter:drop-shadow(0 0 5px rgba(255,45,138,.55)); }
  #tabbar a.on, #tabbar a.on .ic{ color:var(--red-hi); }
  #tabbar .badge{ position:absolute; top:-2px; right:0; z-index:2; }

  .hidesm{ display:inline; }

  /* ---------- motion: scrapbook settle + drift ---------- */
  @keyframes settle{
    from{ opacity:0; transform:translateY(10px) rotate(var(--tilt,-2deg)) scale(.985) }
    to  { opacity:1; transform:translateY(0)    rotate(0deg)              scale(1) }
  }
  @keyframes peel{ from{transform:rotate(0)} to{transform:rotate(-1.4deg) translateY(-2px)} }
  @keyframes drift{
    0%,100%{ transform:translateY(0) rotate(0) }
    50%    { transform:translateY(-4px) rotate(1.2deg) }
  }
  .card{ animation:settle .42s cubic-bezier(.22,1,.36,1) both; }
  .card:nth-child(2){ --tilt:1.6deg; animation-delay:.05s }
  .card:nth-child(3){ --tilt:-1.4deg; animation-delay:.10s }
  .card:nth-child(4){ --tilt:1.2deg; animation-delay:.15s }
  .card:nth-child(n+5){ --tilt:-1deg; animation-delay:.18s }
  .card:hover{ animation:peel .2s ease forwards; }
  .post{ animation:settle .34s cubic-bezier(.22,1,.36,1) both; }
  #logo img{ animation:drift 6s ease-in-out infinite; }
  .moretile{ animation:settle .3s cubic-bezier(.22,1,.36,1) both; }
  .moretile:nth-child(2){animation-delay:.03s} .moretile:nth-child(3){animation-delay:.06s}
  .moretile:nth-child(4){animation-delay:.09s} .moretile:nth-child(n+5){animation-delay:.12s}
  /* the wordmark letters settle in one at a time on the splash */
  #loading img.word{ animation:settle .5s cubic-bezier(.22,1,.36,1) both, blink 1.6s 0.5s ease-in-out infinite; }
  .rx:active{ transform:scale(.92) }
  .navlink{ transition:background .14s ease, color .14s ease, transform .12s ease }
  .navlink:active{ transform:translateX(2px) }

  /* ---------- header avatar ---------- */
  #meav{ width:32px; height:32px; border-radius:50%; overflow:hidden; flex:none;
    display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
    background:rgba(255,255,255,.2); color:#fff; font-weight:800; font-size:14px;
    box-shadow:inset 0 0 0 2px rgba(255,255,255,.6); }
  #meav img{ width:100%; height:100%; object-fit:cover; display:block; }
  #meav:hover{ box-shadow:inset 0 0 0 2px #fff; }

  /* ---------- raised centre shutter ---------- */
  #tabbar a.bigtab{ flex:1; padding:0; position:relative; min-height:44px; }
  #tabbar .shutter{ position:absolute; left:50%; top:-20px; transform:translateX(-50%);
    width:56px; height:56px; border-radius:50%; background:var(--red);
    display:flex; align-items:center; justify-content:center; color:#fff;
    box-shadow:0 5px 16px rgba(196,59,36,.42), 0 0 0 4px var(--paper);
    transition:transform .14s ease, background .14s ease; }
  #tabbar a.bigtab:active .shutter{ transform:translateX(-50%) scale(.93); }
  #tabbar a.bigtab.on .shutter{ background:var(--red-deep); }
  #tabbar a.bigtab .ic{ color:#fff; }

  /* ---------- the one icon system ---------- */
  .ic-add{ background-image:url(assets/glossy/t_plus.png); }
  .ic-back{ background-image:url(assets/glossy/t_pencil.png); }
  .ic-battery{ background-image:url(assets/glossy/t_battery.png); }
  .ic-bell{ background-image:url(assets/glossy/t_bell.png); }
  .ic-belloff{ background-image:url(assets/glossy/t_bell.png); }
  .ic-book{ background-image:url(assets/glossy/t_lore.png); }
  .ic-bookmark{ background-image:url(assets/glossy/t_star_o.png); }
  .ic-books{ background-image:url(assets/glossy/t_lore.png); }
  .ic-calendar{ background-image:url(assets/glossy/t_calendar.png); }
  .ic-camera{ background-image:url(assets/glossy/t_camera.png); }
  .ic-capsule{ background-image:url(assets/glossy/t_capsule.png); }
  .ic-chat{ background-image:url(assets/glossy/t_chat.png); }
  .ic-check{ background-image:url(assets/glossy/t_verified.png); }
  .ic-circle{ background-image:url(assets/glossy/t_friends.png); }
  .ic-clip{ background-image:url(assets/glossy/t_pencil.png); }
  .ic-clock{ background-image:url(assets/glossy/t_calendar.png); }
  .ic-close{ background-image:url(assets/glossy/t_pencil.png); }
  .ic-comment{ background-image:url(assets/glossy/t_chat.png); }
  .ic-download{ background-image:url(assets/glossy/t_mail.png); }
  .ic-edit{ background-image:url(assets/glossy/t_pencil.png); }
  .ic-events{ background-image:url(assets/glossy/t_calendar.png); }
  .ic-eye{ background-image:url(assets/glossy/t_ghost.png); }
  .ic-filter{ background-image:url(assets/glossy/t_lists.png); }
  .ic-flag{ background-image:url(assets/glossy/t_flag.png); }
  .ic-friends{ background-image:url(assets/glossy/t_friends.png); }
  .ic-gear{ background-image:url(assets/glossy/t_gear.png); }
  .ic-ghost{ background-image:url(assets/glossy/t_ghost.png); }
  .ic-grid{ background-image:url(assets/glossy/t_widget.png); }
  .ic-hand{ background-image:url(assets/glossy/t_poke.png); }
  .ic-heart{ background-image:url(assets/glossy/t_heart.png); }
  .ic-home{ background-image:url(assets/glossy/t_widget.png); }
  .ic-icon_add{ background-image:url(assets/glossy/t_plus.png); }
  .ic-icon_back{ background-image:url(assets/glossy/t_pencil.png); }
  .ic-icon_battery{ background-image:url(assets/glossy/t_battery.png); }
  .ic-icon_bell{ background-image:url(assets/glossy/t_bell.png); }
  .ic-icon_belloff{ background-image:url(assets/glossy/t_bell.png); }
  .ic-icon_book{ background-image:url(assets/glossy/t_lore.png); }
  .ic-icon_bookmark{ background-image:url(assets/glossy/t_star_o.png); }
  .ic-icon_books{ background-image:url(assets/glossy/t_lore.png); }
  .ic-icon_calendar{ background-image:url(assets/glossy/t_calendar.png); }
  .ic-icon_camera{ background-image:url(assets/glossy/t_camera.png); }
  .ic-icon_capsule{ background-image:url(assets/glossy/t_capsule.png); }
  .ic-icon_chat{ background-image:url(assets/glossy/t_chat.png); }
  .ic-icon_check{ background-image:url(assets/glossy/t_verified.png); }
  .ic-icon_circle{ background-image:url(assets/glossy/t_friends.png); }
  .ic-icon_clip{ background-image:url(assets/glossy/t_pencil.png); }
  .ic-icon_clock{ background-image:url(assets/glossy/t_calendar.png); }
  .ic-icon_close{ background-image:url(assets/glossy/t_pencil.png); }
  .ic-icon_comment{ background-image:url(assets/glossy/t_chat.png); }
  .ic-icon_download{ background-image:url(assets/glossy/t_mail.png); }
  .ic-icon_edit{ background-image:url(assets/glossy/t_pencil.png); }
  .ic-icon_events{ background-image:url(assets/glossy/t_calendar.png); }
  .ic-icon_eye{ background-image:url(assets/glossy/t_ghost.png); }
  .ic-icon_filter{ background-image:url(assets/glossy/t_lists.png); }
  .ic-icon_flag{ background-image:url(assets/glossy/t_flag.png); }
  .ic-icon_friends{ background-image:url(assets/glossy/t_friends.png); }
  .ic-icon_gear{ background-image:url(assets/glossy/t_gear.png); }
  .ic-icon_ghost{ background-image:url(assets/glossy/t_ghost.png); }
  .ic-icon_grid{ background-image:url(assets/glossy/t_widget.png); }
  .ic-icon_hand{ background-image:url(assets/glossy/t_poke.png); }
  .ic-icon_heart{ background-image:url(assets/glossy/t_heart.png); }
  .ic-icon_home{ background-image:url(assets/glossy/t_widget.png); }
  .ic-icon_like{ background-image:url(assets/glossy/t_heart.png); }
  .ic-icon_link{ background-image:url(assets/glossy/t_pencil.png); }
  .ic-icon_list{ background-image:url(assets/glossy/t_lists.png); }
  .ic-icon_lists{ background-image:url(assets/glossy/t_lists.png); }
  .ic-icon_location{ background-image:url(assets/glossy/t_pin.png); }
  .ic-icon_lock{ background-image:url(assets/glossy/t_shield.png); }
  .ic-icon_lore{ background-image:url(assets/glossy/t_lore.png); }
  .ic-icon_mail{ background-image:url(assets/glossy/t_mail.png); }
  .ic-icon_map{ background-image:url(assets/glossy/t_pin.png); }
  .ic-icon_mapav{ background-image:url(assets/glossy/t_mapav.png); }
  .ic-icon_more{ background-image:url(assets/glossy/t_widget.png); }
  .ic-icon_music{ background-image:url(assets/glossy/t_chat.png); }
  .ic-icon_pencil{ background-image:url(assets/glossy/t_pencil.png); }
  .ic-icon_photos{ background-image:url(assets/glossy/t_camera.png); }
  .ic-icon_pin{ background-image:url(assets/glossy/t_pin.png); }
  .ic-icon_plus{ background-image:url(assets/glossy/t_plus.png); }
  .ic-icon_poke{ background-image:url(assets/glossy/t_poke.png); }
  .ic-icon_poll{ background-image:url(assets/glossy/t_lists.png); }
  .ic-icon_refresh{ background-image:url(assets/glossy/t_widget.png); }
  .ic-icon_reply{ background-image:url(assets/glossy/t_chat.png); }
  .ic-icon_report{ background-image:url(assets/glossy/t_flag.png); }
  .ic-icon_saved{ background-image:url(assets/glossy/t_star_o.png); }
  .ic-icon_search{ background-image:url(assets/glossy/t_widget.png); }
  .ic-icon_send{ background-image:url(assets/glossy/t_mail.png); }
  .ic-icon_settings{ background-image:url(assets/glossy/t_gear.png); }
  .ic-icon_share{ background-image:url(assets/glossy/t_mail.png); }
  .ic-icon_shelf{ background-image:url(assets/glossy/t_shelves.png); }
  .ic-icon_shelves{ background-image:url(assets/glossy/t_shelves.png); }
  .ic-icon_shield{ background-image:url(assets/glossy/t_shield.png); }
  .ic-icon_sort{ background-image:url(assets/glossy/t_lists.png); }
  .ic-icon_star{ background-image:url(assets/glossy/t_star_f.png); }
  .ic-icon_star_f{ background-image:url(assets/glossy/t_star_f.png); }
  .ic-icon_star_o{ background-image:url(assets/glossy/t_star_o.png); }
  .ic-icon_star_off{ background-image:url(assets/glossy/t_star_o.png); }
  .ic-icon_star_on{ background-image:url(assets/glossy/t_star_f.png); }
  .ic-icon_trash{ background-image:url(assets/glossy/t_pencil.png); }
  .ic-icon_users{ background-image:url(assets/glossy/t_friends.png); }
  .ic-icon_verified{ background-image:url(assets/glossy/t_verified.png); }
  .ic-icon_video{ background-image:url(assets/glossy/t_camera.png); }
  .ic-icon_widget{ background-image:url(assets/glossy/t_widget.png); }
  .ic-like{ background-image:url(assets/glossy/t_heart.png); }
  .ic-link{ background-image:url(assets/glossy/t_pencil.png); }
  .ic-list{ background-image:url(assets/glossy/t_lists.png); }
  .ic-lists{ background-image:url(assets/glossy/t_lists.png); }
  .ic-location{ background-image:url(assets/glossy/t_pin.png); }
  .ic-lock{ background-image:url(assets/glossy/t_shield.png); }
  .ic-lore{ background-image:url(assets/glossy/t_lore.png); }
  .ic-mail{ background-image:url(assets/glossy/t_mail.png); }
  .ic-map{ background-image:url(assets/glossy/t_pin.png); }
  .ic-mapav{ background-image:url(assets/glossy/t_mapav.png); }
  .ic-more{ background-image:url(assets/glossy/t_widget.png); }
  .ic-music{ background-image:url(assets/glossy/t_chat.png); }
  .ic-pencil{ background-image:url(assets/glossy/t_pencil.png); }
  .ic-photos{ background-image:url(assets/glossy/t_camera.png); }
  .ic-pin{ background-image:url(assets/glossy/t_pin.png); }
  .ic-plus{ background-image:url(assets/glossy/t_plus.png); }
  .ic-poke{ background-image:url(assets/glossy/t_poke.png); }
  .ic-poll{ background-image:url(assets/glossy/t_lists.png); }
  .ic-refresh{ background-image:url(assets/glossy/t_widget.png); }
  .ic-reply{ background-image:url(assets/glossy/t_chat.png); }
  .ic-report{ background-image:url(assets/glossy/t_flag.png); }
  .ic-saved{ background-image:url(assets/glossy/t_star_o.png); }
  .ic-search{ background-image:url(assets/glossy/t_widget.png); }
  .ic-send{ background-image:url(assets/glossy/t_mail.png); }
  .ic-settings{ background-image:url(assets/glossy/t_gear.png); }
  .ic-share{ background-image:url(assets/glossy/t_mail.png); }
  .ic-shelf{ background-image:url(assets/glossy/t_shelves.png); }
  .ic-shelves{ background-image:url(assets/glossy/t_shelves.png); }
  .ic-shield{ background-image:url(assets/glossy/t_shield.png); }
  .ic-sort{ background-image:url(assets/glossy/t_lists.png); }
  .ic-star{ background-image:url(assets/glossy/t_star_f.png); }
  .ic-star_f{ background-image:url(assets/glossy/t_star_f.png); }
  .ic-star_o{ background-image:url(assets/glossy/t_star_o.png); }
  .ic-star_off{ background-image:url(assets/glossy/t_star_o.png); }
  .ic-star_on{ background-image:url(assets/glossy/t_star_f.png); }
  .ic-trash{ background-image:url(assets/glossy/t_pencil.png); }
  .ic-users{ background-image:url(assets/glossy/t_friends.png); }
  .ic-verified{ background-image:url(assets/glossy/t_verified.png); }
  .ic-video{ background-image:url(assets/glossy/t_camera.png); }
  .ic-widget{ background-image:url(assets/glossy/t_widget.png); }
  [class^=ic-],[class*=' ic-']{ display:inline-block; width:1.15em; height:1.15em;
    background-size:contain; background-repeat:no-repeat; background-position:center;
    vertical-align:-.22em; filter:drop-shadow(0 2px 5px rgba(0,0,0,.6)); }
  .gi{ display:inline-block; vertical-align:-5px; object-fit:contain;
    filter:drop-shadow(0 2px 6px rgba(0,0,0,.6)); }
  .wordmark{ font-family:var(--font-display); font-size:23px; font-weight:900;
    letter-spacing:.03em; color:#fff; text-shadow:0 0 18px rgba(255,45,138,.55), 0 2px 4px rgba(0,0,0,.8); }
  .wordmark-lg{ font-size:38px; }

  /* app-wide light field so every blurred surface has something to refract */
  body::before{ content:""; position:fixed; inset:-15%; z-index:-2; pointer-events:none; filter:blur(80px); opacity:.7;
    background:
      radial-gradient(38vw 38vw at 12% 8%,   rgba(255,45,138,.42), transparent 70%),
      radial-gradient(34vw 34vw at 88% 30%,  rgba(150,60,220,.32), transparent 70%),
      radial-gradient(42vw 42vw at 50% 104%, rgba(196,59,36,.34),  transparent 70%); }

  /* ================= liquid glass depth system =================
     Real glass has four things flat CSS usually skips: a lit top edge,
     a dark bottom edge, an inner shadow, and something behind it to bend.
     These utilities give any surface all four. ================= */
  .glass{ position:relative; background:linear-gradient(160deg,rgba(255,255,255,.10),rgba(255,255,255,.03) 42%,rgba(0,0,0,.16));
    border:1px solid rgba(255,255,255,.10); border-radius:24px;
    backdrop-filter:blur(26px) saturate(1.7); -webkit-backdrop-filter:blur(26px) saturate(1.7);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.30),      /* lit top bevel */
      inset 0 -1px 0 rgba(0,0,0,.45),           /* dark underside */
      inset 0 0 42px rgba(255,255,255,.05),     /* interior glow */
      0 26px 60px rgba(0,0,0,.62),              /* cast shadow */
      0 2px 10px rgba(0,0,0,.4); }
  .glass::before{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
    background:linear-gradient(150deg,rgba(255,255,255,.16),transparent 34%); }
  .glass::after{ content:""; position:absolute; left:8%; right:8%; top:0; height:1px; pointer-events:none;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent); }

  /* light that lives *behind* the glass so the blur has something to refract */
  .aurora{ position:fixed; inset:-20% -10%; z-index:-1; pointer-events:none; filter:blur(70px); opacity:.85; }
  .aurora i{ position:absolute; display:block; border-radius:50%; }
  .aurora i:nth-child(1){ width:52vw; height:52vw; left:-8vw; top:2vh;  background:radial-gradient(circle,rgba(255,45,138,.60),transparent 68%); }
  .aurora i:nth-child(2){ width:44vw; height:44vw; right:-6vw; top:24vh; background:radial-gradient(circle,rgba(150,60,220,.46),transparent 68%); }
  .aurora i:nth-child(3){ width:56vw; height:56vw; left:14vw; bottom:-14vh; background:radial-gradient(circle,rgba(196,59,36,.44),transparent 68%); }
  @media (prefers-reduced-motion:no-preference){
    .aurora i{ animation:drift 26s ease-in-out infinite alternate; }
    .aurora i:nth-child(2){ animation-duration:34s; animation-delay:-8s; }
    .aurora i:nth-child(3){ animation-duration:30s; animation-delay:-4s; }
    @keyframes drift{ from{ transform:translate3d(0,0,0) scale(1) } to{ transform:translate3d(4vw,-3vh,0) scale(1.14) } }
  }

  /* pill inputs that sit *in* the glass rather than on it */
  .field{ position:relative; margin-top:7px; }
  .field input{ height:54px; padding:0 18px 0 48px; border-radius:16px; font-size:16px;
    background:rgba(0,0,0,.34); border:1px solid rgba(255,255,255,.10); color:var(--ink);
    box-shadow:inset 0 2px 8px rgba(0,0,0,.5), inset 0 -1px 0 rgba(255,255,255,.07); }
  .field input:focus{ background:rgba(0,0,0,.42); border-color:var(--pink);
    box-shadow:inset 0 2px 8px rgba(0,0,0,.5), 0 0 0 3px rgba(255,45,138,.20), 0 0 22px rgba(255,45,138,.28); }
  .field .fi{ position:absolute; left:15px; top:50%; transform:translateY(-50%);
    width:22px; height:22px; opacity:.95; pointer-events:none; }
  .lbl{ font-size:11px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; color:var(--soft); }

  /* the primary action: a lit capsule, not a flat rectangle */
  .cta{ width:100%; height:54px; border-radius:16px; border:none; font-size:16px; font-weight:800;
    color:#fff; cursor:pointer; position:relative; overflow:hidden;
    background:linear-gradient(180deg,#FF5CA8,#E01F73 62%,#C4155F);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.55), inset 0 -2px 0 rgba(0,0,0,.28),
               0 10px 26px rgba(255,45,138,.44); }
  .cta::after{ content:""; position:absolute; left:0; right:0; top:0; height:46%;
    background:linear-gradient(180deg,rgba(255,255,255,.28),transparent);
    border-radius:16px 16px 40% 40%; pointer-events:none; }
  .cta:active{ transform:translateY(1px); box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 5px 16px rgba(255,45,138,.4); }
  .cta:disabled{ opacity:.6 }

  /* small print / secondary links inside glass */
  .glasslinks{ text-align:center; margin-top:16px; line-height:2.1; font-size:13.5px; }
  .glasslinks a{ color:var(--red-hi); font-weight:700; }
  .divider{ display:flex; align-items:center; gap:12px; margin:18px 0 4px; color:var(--soft); font-size:11.5px;
    letter-spacing:.1em; text-transform:uppercase; }
  .divider::before,.divider::after{ content:""; flex:1; height:1px;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent); }

  /* app icon with a real light bloom under it */
  .applogo{ width:96px; height:96px; border-radius:24px; display:block; margin:0 auto;
    box-shadow:0 18px 44px rgba(255,45,138,.45), 0 0 0 1px rgba(255,255,255,.10),
               inset 0 1px 0 rgba(255,255,255,.3); }

  /* ---------- icon system: your 25 tiles ---------- */
  .gi{ object-fit:contain; vertical-align:-4px; flex:none;
    filter:drop-shadow(0 1px 3px rgba(0,0,0,.6)); }
  .gg{ vertical-align:-4px; flex:none; opacity:.9; }
  #tabbar .gi{ filter:drop-shadow(0 2px 6px rgba(0,0,0,.7)); }
  #tabbar a.on .gi{ filter:drop-shadow(0 0 8px rgba(255,45,138,.75)); }
  .card > h2 .gi{ vertical-align:-5px; margin-right:2px; }

  /* ---------- glossy art ---------- */
  .rxart{ width:22px; height:22px; object-fit:contain; vertical-align:-5px;
    filter:drop-shadow(0 1px 3px rgba(0,0,0,.55)); }
  .rx.on .rxart{ filter:drop-shadow(0 0 7px rgba(255,45,138,.75)); }
  #rxpick .rxart{ width:44px; height:44px; }
  .gart{ display:block; margin:0 auto; object-fit:contain;
    filter:drop-shadow(0 6px 18px rgba(0,0,0,.55)); }
  .banner-sun{ display:block; width:min(86%,340px); margin:2px auto 10px;
    filter:drop-shadow(0 6px 20px rgba(255,45,138,.30)); }
  .ribbon{ width:74px; height:auto; flex:none;
    filter:drop-shadow(0 4px 12px rgba(0,0,0,.5)); }
  .empty .gart{ margin-bottom:12px; }

  /* ---------- local sponsor card ---------- */
  .sponsor{ display:block; background:rgba(255,255,255,.04); border:2px dashed var(--red-line); border-radius:18px;
    padding:13px 15px; margin:10px 0; cursor:pointer; position:relative;
    transition:border-color .13s ease, background .13s ease; }
  .sponsor:hover{ border-color:var(--red); background:var(--red-wash); }
  .sponsor-tag{ display:inline-block; font-size:9.5px; font-weight:800; letter-spacing:.09em;
    text-transform:uppercase; color:var(--red-deep); background:var(--red-wash);
    border:1px solid var(--red-line); border-radius:999px; padding:1px 8px; margin-bottom:6px; }
  .sponsor b{ display:block; font-size:14.5px; }
  .sponsor-line{ display:block; font-size:13px; color:var(--ink-2); margin-top:1px; }
  .sponsor-area{ display:inline-flex; align-items:center; gap:4px; font-size:11.5px;
    color:var(--soft); margin-top:5px; }

  /* ---------- top bar controls ---------- */
  .tb-av{ width:38px; height:38px; border-radius:50%; overflow:hidden; flex:none;
    display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
    background:rgba(255,255,255,.2); box-shadow:inset 0 0 0 2px rgba(255,255,255,.55);
    font-weight:800; color:#fff; font-size:13px; }
  .tb-av img{ width:100%; height:100%; object-fit:cover; }
  .tb-ic{ display:inline-flex; align-items:center; justify-content:center;
    width:42px; height:42px; border-radius:50%; position:relative; color:#fff;
    transition:background .13s ease; }
  .tb-ic:hover{ background:rgba(255,255,255,.18); text-decoration:none; }
  .tb-ic .badge{ position:absolute; top:1px; right:1px; background:#fff; color:var(--red-deep); }

  /* ---------- camera: the centre of gravity ---------- */
  #tabbar a.tab-camera .wrapicon{ width:62px; height:62px; margin-top:-20px; margin-bottom:0;
    border-radius:50%; background:radial-gradient(circle at 35% 30%, #26282f, #0c0d11 70%);
    border:2.5px solid var(--pink);
    box-shadow:0 0 14px rgba(255,45,138,.42), 0 0 3px rgba(255,45,138,.7),
               0 1px 0 rgba(255,255,255,.22) inset, 0 8px 22px rgba(0,0,0,.6); }
  #tabbar a.tab-camera .wrapicon .ic{ color:var(--pink); width:28px; height:28px;
    filter:drop-shadow(0 0 5px rgba(255,45,138,.8)); }
  #tabbar a.tab-camera .glow{ display:none; }
  #tabbar a.tab-camera.on .wrapicon{ border-color:#fff;
    box-shadow:0 0 26px rgba(255,45,138,.85), 0 1px 0 rgba(255,255,255,.25) inset; }
  #tabbar a.tab-camera, #tabbar a.tab-camera.on{ color:var(--red); }


  /* ---------- hubs & our place ---------- */
  .placebar{ display:flex; align-items:center; gap:10px; background:var(--card,#fff);
    border:1.5px solid var(--red-line); border-radius:16px; padding:10px 12px; margin-bottom:10px;
    cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.05); }
  .placebar .pb-txt{ flex:1; display:flex; flex-direction:column; }
  .placebar .pb-txt em{ font-style:normal; font-size:11px; color:var(--soft); }
  .placebar .pb-go{ transform:rotate(180deg); opacity:.5; }
  .hubgrid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:12px; }
  .hubcard{ position:relative; display:flex; flex-direction:column; gap:2px; background:var(--card,#fff);
    border:1.5px solid var(--red-line); border-radius:16px; padding:12px; cursor:pointer;
    box-shadow:0 2px 8px rgba(0,0,0,.05); text-decoration:none; }
  .hubcard:hover{ text-decoration:none; transform:translateY(-1px); }
  .hubcard.wide{ grid-column:1/-1; }
  .hubcard b{ font-size:14px; } .hubcard em{ font-style:normal; font-size:11px; color:var(--soft); }
  .hubcard .badge{ position:absolute; top:8px; right:8px; }
  .placegrid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .placetile{ display:flex; flex-direction:column; gap:2px; background:var(--card,#fff);
    border:1.5px solid var(--red-line); border-radius:16px; padding:12px; cursor:pointer; text-decoration:none; }
  .placetile:hover{ text-decoration:none; }
  .placetile b{ font-size:13px; } .placetile em{ font-style:normal; font-size:10.5px; color:var(--soft); }
  .tb-back{ margin-right:2px; }
  /* ---------- camera v2 ---------- */
  .camwrap{ display:flex; flex-direction:column; gap:8px; }
  .camview{ position:relative; border-radius:18px; overflow:hidden; background:#000; min-height:220px; }
  .camview video{ width:100%; display:block; }
  .camtop{ position:absolute; top:8px; right:8px; display:flex; flex-direction:column; gap:8px; z-index:3; }
  .cambtn2{ width:38px; height:38px; border-radius:50%; background:rgba(0,0,0,.45); color:#fff;
    display:flex; align-items:center; justify-content:center; cursor:pointer; backdrop-filter:blur(4px);
    border:1px solid rgba(255,255,255,.25); font-size:15px; position:relative; }
  .cambtn2.on{ background:var(--red-deep,#c2185b); }
  .cambtn2 span{ position:absolute; bottom:-2px; right:-2px; font-size:9px; background:#fff; color:#000;
    border-radius:8px; padding:0 3px; }
  .camzoom{ position:absolute; bottom:34px; left:12px; right:12px; z-index:3; }
  .camzoom input{ width:100%; accent-color:#fff; }
  .camnote{ position:absolute; bottom:8px; left:0; right:0; text-align:center; color:#fff; font-size:12px;
    text-shadow:0 1px 4px rgba(0,0,0,.8); z-index:3; }
  #focusring{ position:absolute; width:56px; height:56px; border:2px solid #fff; border-radius:50%;
    pointer-events:none; opacity:0; z-index:2; }
  #focusring.go{ animation:focusPop .7s ease-out; }
  @keyframes focusPop{ 0%{opacity:1;transform:scale(1.4)} 70%{opacity:1;transform:scale(1)} 100%{opacity:0} }
  #countnum{ position:absolute; inset:0; display:none; align-items:center; justify-content:center;
    font-size:88px; font-weight:800; color:#fff; text-shadow:0 2px 18px rgba(0,0,0,.7); z-index:4; }
  .camfilters{ justify-content:center; }
  .fchip{ padding:5px 12px; border-radius:20px; border:1.5px solid var(--red-line); font-size:12px;
    cursor:pointer; white-space:nowrap; background:var(--card,#fff); }
  .fchip.on{ background:var(--red-deep,#c2185b); color:#fff; border-color:transparent; }
  .camctl{ display:flex; align-items:center; justify-content:space-around; padding:2px 0; }
  .camside{ display:flex; flex-direction:column; align-items:center; gap:2px; font-size:10px;
    color:var(--soft); cursor:pointer; width:70px; text-align:center; }
  .shutterbtn{ width:72px; height:72px; border-radius:50%; border:5px solid #fff; background:var(--red-deep,#c2185b);
    box-shadow:0 0 0 3px var(--red-line), 0 4px 14px rgba(0,0,0,.25); cursor:pointer; touch-action:none;
    transition:transform .12s; padding:0; }
  .shutterbtn:active{ transform:scale(.92); }
  .shutterbtn.rec{ background:#e53935; animation:recPulse 1s infinite; border-radius:26px; }
  @keyframes recPulse{ 0%,100%{box-shadow:0 0 0 3px rgba(229,57,53,.4)} 50%{box-shadow:0 0 0 10px rgba(229,57,53,.12)} }
  #review{ position:fixed; inset:0; z-index:95; background:#0d0f14; display:flex; flex-direction:column; }
  #review .rvmedia{ flex:1; display:flex; align-items:center; justify-content:center; overflow:hidden; min-height:0; }
  #review .rvmedia img,#review .rvmedia video{ max-width:100%; max-height:100%; }
  #review .rvbar{ padding:12px; background:#14161d; display:flex; flex-direction:column; gap:8px; }
  #review input#rvcap{ width:100%; }
  .rvdisp{ display:flex; align-items:center; gap:6px; font-size:12px; color:#eee; }
  .rvdests{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .rvdests button{ font-size:13px; }
  /* ---------- watch party ---------- */
  .wp_frame{ border-radius:14px; overflow:hidden; background:#000; }
  #wp_rxlayer{ position:relative; height:0; z-index:5; }
  .wp_float{ position:absolute; bottom:6px; font-size:30px; animation:wpUp 2.5s ease-out forwards;
    display:flex; flex-direction:column; align-items:center; pointer-events:none; }
  .wp_float small{ font-size:9px; color:var(--soft); background:rgba(255,255,255,.85); border-radius:6px; padding:0 4px; }
  @keyframes wpUp{ 0%{transform:translateY(0);opacity:0} 12%{opacity:1} 100%{transform:translateY(-190px);opacity:0} }
  .wp_rxbar{ gap:8px; margin:8px 0; flex-wrap:wrap; }
  .wp_rx{ font-size:22px; cursor:pointer; transition:transform .1s; }
  .wp_rx:active{ transform:scale(1.5); }
  .wp_tvcard{ text-align:center; border:1.5px solid var(--red-line); border-radius:16px; padding:16px;
    display:flex; flex-direction:column; gap:6px; align-items:center; }
  .wp_clock{ font-size:34px; font-weight:800; font-variant-numeric:tabular-nums; }
  #wp_count{ font-size:64px; font-weight:800; min-height:0; }
  #wp_count.go{ min-height:74px; animation:recPulse 1s infinite; }
  #wp_pick .navsec{ margin-top:6px; }
  /* ---------- chat extras ---------- */
  .mention{ background:var(--butter,#ffe9a8); border-radius:6px; padding:0 3px; font-weight:700; }
  #vnbtn.recing{ background:#e53935; color:#fff; }
  .chatpoll{ border:1.5px solid var(--red-line); border-radius:14px; padding:10px; margin-bottom:8px; font-size:13px; }
  .pollopt{ position:relative; border:1px solid var(--red-line); border-radius:10px; margin-top:6px;
    padding:6px 8px; cursor:pointer; overflow:hidden; display:flex; }
  .pollopt.on{ border-color:var(--red-deep,#c2185b); }
  .pollbar{ position:absolute; inset:0; width:0; background:var(--blush,#ffd6e2); opacity:.55; transition:width .3s; }
  .polltxt{ position:relative; flex:1; } .polln{ position:relative; font-weight:700; }
  .gamecard{ border:1.5px solid var(--red-line); border-radius:14px; padding:10px; margin-bottom:8px; font-size:13px;
    background:linear-gradient(135deg,#fff, #fdf2f7); }
  /* ---------- drawer ---------- */
  .drawer-me{ display:flex; align-items:center; gap:12px; padding:12px 13px; background:rgba(255,255,255,.06);
    border:1px solid var(--glass-hairline); border-radius:16px; color:var(--ink); margin-bottom:8px; }
  .drawer-me:hover{ text-decoration:none; background:var(--red-wash); }
  .drawer-me b{ display:block; font-size:15.5px; }
  .drawer-me .muted{ font-size:12.5px; }
  .drawer-me .ic{ margin-left:auto; color:var(--soft); transform:rotate(180deg); }
  .drawer-circle{ display:flex; align-items:center; gap:10px; padding:11px 13px;
    background:var(--red); color:#fff; border-radius:16px; font-weight:700; font-size:14px; }
  .drawer-circle:hover{ text-decoration:none; background:#D8452C; box-shadow:0 0 18px rgba(255,45,138,.35); }
  .drawer-circle em{ margin-left:auto; font-style:normal; font-size:12px; opacity:.9;
    border:1.5px solid rgba(255,255,255,.6); border-radius:999px; padding:2px 10px; }
  .drawer-foot{ text-align:center; padding:18px 0 4px; }

  /* inline ic-* tags are resolved to tiles at runtime by hydrateIcons() */
  i[class^="ic-"],i[class*=" ic-"]{ display:inline-block; width:1.1em; height:1.1em; vertical-align:-.18em; }
  /* ---------- inline emoji replacements ---------- */
  /* ---------- scrapbook material layers ---------- */
  .doodle{ opacity:.85 }
  .spot{ display:block; margin:0 auto 12px; color:var(--red-hi); opacity:.9 }
  .patch{ display:inline-block; vertical-align:middle;
    filter:drop-shadow(0 2px 3px rgba(80,30,20,.28)); }
  .patchrow{ display:flex; gap:9px; flex-wrap:wrap; align-items:center; }
  /* torn tape holding the card headers down */
  .card > h2{ position:relative; }
  
  
  .navsec{ position:relative; }
  
  .flash{ position:relative; overflow:hidden; }
  

  /* ---------- empty states ---------- */
  .empty{ text-align:center; padding:40px 20px 34px; color:var(--soft); }
  .empty b{ display:block; color:var(--ink); font-size:16px; margin-top:4px; }
  .empty span{ display:block; margin-top:5px; font-size:13.5px; line-height:1.5; }
  .empty .ic{ width:44px; height:44px; color:var(--red-line); margin-bottom:10px; }
  .empty b{ display:block; color:var(--ink-2); font-size:15px; margin-bottom:3px; }
  .empty span{ font-size:13.5px; line-height:1.55; display:block; max-width:280px; margin:0 auto; }

  @media (max-width:820px){
    body{ font-size:16px; }
    .postbody{ font-size:16px; }
    .hidesm{ display:none; }
    #sidebar{ display:none; }
    #tabbar{ display:block; }
    #wrap{ padding:14px 12px 78px; }
    #topbar{ padding:0 13px; height:54px; }
    #topbar input{ display:none; }
    #logo img{ height:23px; }
    .pad{ padding:14px; }
    :root{ --round:20px; }
  }
  @media (min-width:821px){ #moreveil{ display:none !important; } }
  @media (prefers-reduced-motion:reduce){
    .sk,.blink,.card,.post,.moretile,#logo img,#loading img.word{ animation:none !important; }
    .card:hover{ animation:none !important; }
    *{ transition:none !important; }
  }