/* =========================================================
   ONE MILLION MESSAGES — paper & ink
   Written mobile-first: the base rules ARE the phone layout,
   min-width queries add the bigger screens.
   ========================================================= */

:root{
  --paper:#fdf3dc;
  --paper-2:#fffaf0;
  --ink:#1c1a17;
  --ink-soft:#6b6355;

  /* Warm browns, pulled from the same family as --ink-soft (#6b6355) so the
     footer reads as part of the paper, not a foreign block. */
  --brown:#75624a;
  --brown-deep:#544534;
  --brown-text:#f3e9d4;

  --yellow:#ffd23f;
  --pink:#ff5c8a;
  --blue:#4cc9f0;
  --green:#8ce563;
  --purple:#b07cf0;
  --orange:#ff9f45;

  --line:3px solid var(--ink);
  --line-2:2px solid var(--ink);
  --pop:6px 6px 0 var(--ink);
  --pop-sm:4px 4px 0 var(--ink);
  --pop-lg:9px 9px 0 var(--ink);

  --display:"Fredoka","Baloo 2","Comic Sans MS",'Trebuchet MS',system-ui,sans-serif;
  --hand:"Patrick Hand","Comic Sans MS",'Segoe Print',cursive;
  --body:"Nunito","Segoe UI",system-ui,sans-serif;

  --tap:46px;                 /* minimum comfortable touch target */
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background-color:var(--paper);
  background-image:radial-gradient(circle, rgba(28,26,23,.10) 1.4px, transparent 1.5px);
  background-size:22px 22px;
  color:var(--ink);
  font-family:var(--body);
  font-weight:600;
  overflow-x:hidden;
  -webkit-tap-highlight-color:rgba(255,92,138,.25);
}
button{font-family:inherit;cursor:pointer}
a{color:inherit}
[hidden]{display:none !important}

/* ---------------------------------------------------- shared bits */
.sheet{
  background:var(--paper-2);border:var(--line);border-radius:20px;
  box-shadow:var(--pop);position:relative;
}
.btn{
  border:var(--line);border-radius:14px;background:var(--yellow);color:var(--ink);
  font-family:var(--display);font-weight:700;font-size:16px;
  padding:12px 18px;min-height:var(--tap);
  box-shadow:var(--pop-sm);
  transition:transform .07s, box-shadow .07s, filter .15s;
}
.btn:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--ink)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:var(--pop-sm)}
.btn.pink{background:var(--pink);color:#fff}
.btn.blue{background:var(--blue)}
.btn.green{background:var(--green)}
.btn.ghost{background:var(--paper-2)}
.btn.sm{font-size:14px;padding:9px 14px;min-height:42px}
.btn.lg{font-size:20px;padding:16px 22px;box-shadow:var(--pop);width:100%}
.btn.lg:active{transform:translate(6px,6px)}
.btn.block{width:100%;display:block}
@media(hover:hover){ .btn:hover{filter:brightness(1.05)} }

.tape{
  position:absolute;width:88px;height:24px;background:rgba(255,210,63,.75);
  border:2px solid rgba(28,26,23,.35);top:-13px;left:50%;margin-left:-44px;
  transform:rotate(-2.5deg);
}
.label{
  font-family:var(--display);font-weight:700;font-size:12px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft);
}

/* The footer sits outside .wrap so its colour runs full width. */
.wrap{max-width:1160px;margin:0 auto;padding:14px 14px 40px;position:relative;z-index:1}

/* ---------------------------------------------------- header */
header{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:6px 0 16px}
.logo{
  font-family:var(--display);font-weight:700;
  font-size:clamp(17px,5.2vw,30px);line-height:1;letter-spacing:-.02em;
  background:var(--pink);color:#fff;border:var(--line);border-radius:14px;
  padding:9px 13px;box-shadow:var(--pop-sm);transform:rotate(-2deg);
  text-shadow:2px 2px 0 rgba(28,26,23,.45);
}
.logo em{font-style:normal;color:var(--yellow)}
.header-right{margin-left:auto;display:flex;gap:8px;align-items:center}
.chip{
  border:var(--line);border-radius:99px;background:var(--paper-2);
  padding:8px 13px;min-height:42px;display:flex;gap:6px;align-items:center;
  font-family:var(--display);font-weight:700;font-size:14px;box-shadow:var(--pop-sm);
}
.chip.credits{background:var(--green)}

/* ---------------------------------------------------- nav */
.nav{display:flex;gap:8px;margin-bottom:14px}
.navtab{
  flex:1;border:var(--line);border-radius:14px;background:var(--paper-2);
  font-family:var(--display);font-weight:700;font-size:15px;
  padding:11px 8px;min-height:var(--tap);box-shadow:var(--pop-sm);
}
.navtab.on{background:var(--blue)}
.navtab:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)}

/* ---------------------------------------------------- my feed */
.feed-tabs{display:flex;gap:8px;margin-bottom:16px}
.feedtab{
  flex:1;border:var(--line);border-radius:14px;background:var(--paper-2);
  font-family:var(--display);font-weight:700;font-size:14px;
  padding:11px 8px;min-height:var(--tap);box-shadow:var(--pop-sm);
  display:flex;align-items:center;justify-content:center;gap:8px;
}
.feedtab b{
  font-size:12px;background:var(--ink);color:var(--paper);
  border-radius:99px;padding:2px 8px;font-variant-numeric:tabular-nums;
}
.feedtab.on{background:var(--yellow)}
.feedtab:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)}

.signedout{
  border:3px dashed var(--ink);border-radius:20px;background:var(--paper-2);
  padding:30px 20px;text-align:center;
}
.so-big{font-family:var(--display);font-weight:700;font-size:20px;margin:0 0 10px;line-height:1.25}
.so-sub{font-family:var(--hand);font-size:17px;color:var(--ink-soft);margin:0 auto 20px;
  max-width:42ch;line-height:1.45}

.fcard .mine{
  display:flex;gap:5px;margin-top:8px;font-size:14px;
}
.fcard .mine span{
  background:var(--yellow);border:var(--line-2);border-radius:99px;
  padding:1px 7px;line-height:1.5;
}

/* ---------------------------------------------------- board teaser */
.board-teaser{
  width:100%;margin-top:14px;border:3px dashed var(--ink);border-radius:16px;
  background:var(--paper-2);padding:14px;min-height:var(--tap);
  display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;
  font-family:var(--display);font-weight:700;font-size:15px;text-align:left;
}
.board-teaser .bt-r{color:var(--pink)}
.board-teaser:active{background:var(--yellow)}
@media(hover:hover){ .board-teaser:hover{background:var(--yellow);border-style:solid} }

.packhint{font-family:var(--hand);font-size:15px;color:var(--ink-soft);margin:7px 3px 0;line-height:1.35}

.demo-banner{
  background:var(--orange);border:var(--line);border-radius:14px;box-shadow:var(--pop-sm);
  padding:10px 14px;font-family:var(--hand);font-size:16px;margin-bottom:14px;
}

/* ---------------------------------------------------- counters */
.counters{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:12px}
.counter{
  border:var(--line);border-radius:16px;box-shadow:var(--pop-sm);
  padding:9px 13px;background:var(--paper-2);
}
.counter:nth-child(1){background:var(--yellow)}
.counter:nth-child(3){background:var(--green);grid-column:1/-1}
.counter .v{
  font-family:var(--display);font-weight:700;font-size:clamp(20px,5.5vw,27px);
  line-height:1.15;font-variant-numeric:tabular-nums;
}

.bar{height:18px;border:var(--line);border-radius:99px;background:var(--paper-2);
     box-shadow:var(--pop-sm);overflow:hidden}
.bar i{
  display:block;height:100%;width:0;
  background:repeating-linear-gradient(45deg,var(--pink) 0 12px,#ff7ba1 12px 24px);
  border-right:3px solid var(--ink);transition:width .7s cubic-bezier(.3,1,.4,1);
}
.bar-note{
  display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;
  font-family:var(--hand);font-size:15px;color:var(--ink-soft);margin:8px 3px 22px;
}
.hide-xs{display:none}

/* ---------------------------------------------------- layout */
.grid{display:grid;gap:18px;align-items:start}

/* ---------------------------------------------------- the stage */
.stage{
  background:var(--paper-2);border:4px solid var(--ink);border-radius:20px;
  box-shadow:var(--pop);position:relative;min-height:250px;
  display:flex;flex-direction:column;overflow:hidden;
}
.stage.boosted{background:#fff6d6}
.stage.boosted::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:16px;
  box-shadow:inset 0 0 0 5px var(--yellow);
}
.stage-top{display:flex;align-items:center;gap:8px;padding:10px 13px;
  border-bottom:var(--line);background:var(--blue)}
.dot{width:12px;height:12px;border-radius:99px;border:2.5px solid var(--ink);flex:none}
.dot.r{background:var(--pink)} .dot.y{background:var(--yellow)} .dot.g{background:var(--green)}
.stage-top .label{margin-left:4px;color:var(--ink)}
.onair{
  margin-left:auto;font-family:var(--display);font-weight:700;font-size:10px;
  letter-spacing:.14em;background:var(--ink);color:var(--yellow);
  padding:5px 10px;border-radius:99px;
}
.onair::before{content:"● "}

.stage-body{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:34px 20px 22px;text-align:center;position:relative;
}
.doodle{position:absolute;opacity:.45;pointer-events:none}
.d1{top:10px;left:10px;transform:rotate(-12deg)}

/* The star is a real control, not a doodle: tap it to save the slot. */
.fav{
  position:absolute;bottom:8px;right:8px;
  width:52px;height:52px;display:grid;place-items:center;
  background:transparent;border:0;padding:0;border-radius:14px;
  transform:rotate(9deg);opacity:.4;
  transition:opacity .15s, transform .12s, background .15s;
}
.fav svg{fill:none;stroke:var(--ink);transition:fill .18s}
.fav:active{transform:rotate(9deg) scale(.88)}
.fav.on{opacity:1}
.fav.on svg{fill:var(--yellow)}
.fav.pop{animation:favPop .42s cubic-bezier(.2,1.5,.4,1)}
@keyframes favPop{
  40%{transform:rotate(-6deg) scale(1.35)}
  100%{transform:rotate(9deg) scale(1)}
}
@media(hover:hover){ .fav:hover{opacity:1;background:rgba(28,26,23,.06)} }

#msg{
  font-family:var(--display);font-weight:700;
  font-size:clamp(22px,6.2vw,46px);line-height:1.15;letter-spacing:-.02em;
  margin:0;max-width:20ch;word-break:break-word;
}
#msg.in{animation:drop .45s cubic-bezier(.2,1.5,.4,1)}
@keyframes drop{
  0%{opacity:0;transform:translateY(-16px) rotate(-3deg) scale(.92)}
  100%{opacity:1;transform:none}
}
.stage-link{
  display:inline-block;margin-top:14px;font-family:var(--display);font-weight:700;
  font-size:15px;background:var(--green);border:var(--line);border-radius:99px;
  padding:9px 18px;min-height:42px;line-height:24px;box-shadow:var(--pop-sm);
  text-decoration:none;max-width:90%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.stage-link:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)}

.byline{
  margin-top:16px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:center;
  font-family:var(--hand);font-size:16px;color:var(--ink-soft);
}
.slotno{
  background:var(--ink);color:var(--paper);border-radius:99px;padding:4px 11px;
  font-family:var(--display);font-weight:700;font-size:13px;font-variant-numeric:tabular-nums;
}
.boostflag,.campflag{
  background:var(--yellow);border:2.5px solid var(--ink);border-radius:99px;
  padding:3px 10px;font-family:var(--display);font-weight:700;font-size:11px;
  letter-spacing:.08em;transform:rotate(-3deg);
}
.campflag{background:var(--purple);color:#fff}

.timer{height:7px;background:rgba(28,26,23,.1);border-top:var(--line)}
.timer i{display:block;height:100%;background:var(--pink);width:100%}

.reacts{
  display:flex;gap:9px;justify-content:center;flex-wrap:wrap;
  padding:13px;border-top:var(--line);background:var(--paper);
}
.react{
  border:var(--line);border-radius:14px;background:var(--paper-2);
  padding:9px 15px;min-height:var(--tap);font-size:21px;line-height:1;
  box-shadow:var(--pop-sm);display:flex;gap:8px;align-items:center;
  transition:transform .07s, box-shadow .07s, background .15s;
}
.react b{font-family:var(--display);font-size:14px;font-weight:700;font-variant-numeric:tabular-nums}
.react:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--ink)}
.react.done{background:var(--green)}
.react.pulse{animation:bump .35s}
@keyframes bump{50%{transform:scale(1.2) rotate(-5deg)}}
@media(hover:hover){ .react:hover{background:var(--yellow)} }
.modal-reacts{border-top:0;border-radius:16px;border:var(--line);margin-top:16px}

/* ---------------------------------------------------- perks / why */
.why{margin-top:18px;border:3px dashed var(--ink);border-radius:18px;
     background:var(--paper-2);padding:16px}
.why h3{font-family:var(--display);font-size:19px;margin:0 0 12px}
.perks{display:grid;gap:11px;margin-bottom:14px}
.perk{display:flex;gap:11px;align-items:flex-start;font-family:var(--body);font-size:14.5px;line-height:1.42}
.perk span{font-size:23px;line-height:1;flex:none}
.perk b{font-family:var(--display);font-size:15px}
.why-note{font-family:var(--hand);font-size:17px;color:var(--ink-soft);margin:0 0 13px;line-height:1.4}
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.tier{border:var(--line);border-radius:14px;padding:10px 6px;text-align:center;
      box-shadow:var(--pop-sm);background:var(--paper)}
.tier:nth-child(1){background:var(--blue)}
.tier:nth-child(2){background:var(--orange)}
.tier:nth-child(3){background:var(--purple)}
.tier .n{font-family:var(--display);font-weight:700;font-size:21px;line-height:1}
.tier .t{font-family:var(--hand);font-size:14px;margin-top:3px;line-height:1.25}

/* ---------------------------------------------------- compose */
.compose{padding:15px}
textarea,input[type=text],input[type=email],input[type=password]{
  width:100%;background:var(--paper);border:var(--line);border-radius:13px;color:var(--ink);
  font-family:var(--display);font-weight:600;
  font-size:16px;                       /* 16px stops iOS zooming on focus */
  padding:12px;line-height:1.35;
}
textarea{
  height:98px;resize:none;
  background-image:repeating-linear-gradient(transparent,transparent 30px,rgba(28,26,23,.12) 30px,rgba(28,26,23,.12) 31px);
}
input[type=text],input[type=email],input[type=password]{margin-top:9px;min-height:var(--tap)}
textarea:focus,input:focus{outline:none;background-color:#fff;box-shadow:var(--pop-sm)}
.count{display:flex;justify-content:space-between;font-family:var(--hand);font-size:15px;
       color:var(--ink-soft);margin:7px 3px 0}
.count.over{color:var(--pink)}

.linktoggle{
  margin-top:11px;width:100%;background:var(--paper);border:2px dashed var(--ink);
  border-radius:13px;padding:11px;min-height:var(--tap);
  font-family:var(--display);font-weight:700;font-size:14px;
}
.linktoggle span{color:var(--ink-soft);font-weight:600}
.linktoggle.on{background:var(--green);border-style:solid}

.screenwarn{
  margin-top:11px;background:var(--pink);color:#fff;border:var(--line);border-radius:13px;
  padding:10px 13px;font-family:var(--hand);font-size:16px;line-height:1.35;
}

.packlabel{display:block;margin:15px 0 8px}
.packs{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pack{
  border:var(--line);border-radius:14px;background:var(--paper);padding:10px 8px;
  text-align:center;box-shadow:var(--pop-sm);min-height:var(--tap);
  transition:transform .07s, box-shadow .07s;
}
.pack .n{font-family:var(--display);font-weight:700;font-size:17px;line-height:1.1}
.pack .p{font-family:var(--display);font-weight:700;font-size:14px;margin-top:2px}
.pack .s{font-family:var(--hand);font-size:13px;color:var(--ink-soft);margin-top:2px;line-height:1.2}
.pack.on{background:var(--yellow);transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.pack:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--ink)}

.boostbox{
  display:flex;gap:10px;align-items:flex-start;margin:13px 0;padding:12px;
  border:3px dashed var(--ink);border-radius:14px;cursor:pointer;background:var(--paper);
}
.boostbox.on{border-style:solid;background:var(--yellow);box-shadow:var(--pop-sm)}
.boostbox input{width:22px;height:22px;margin:1px 0 0;accent-color:var(--pink);flex:none}
.boostbox .t{font-family:var(--display);font-weight:700;font-size:15px}
.boostbox .d{font-family:var(--hand);font-size:15px;line-height:1.3;color:var(--ink-soft);margin-top:2px}
.freeline{font-family:var(--hand);font-size:16px;text-align:center;margin-top:11px;color:var(--ink-soft)}
.fine{font-family:var(--hand);font-size:14.5px;color:var(--ink-soft);text-align:center;
      margin-top:11px;line-height:1.45}
.fine b{color:var(--ink)}

/* ---------------------------------------------------- feed */
.feed-sheet{margin-top:18px}
.panel-head{display:flex;align-items:center;gap:8px;padding:12px 15px;border-bottom:var(--line)}
.panel-head .label{font-size:13px;color:var(--ink)}
.feed{max-height:320px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.feed::-webkit-scrollbar{width:8px}
.feed::-webkit-scrollbar-track{background:var(--paper)}
.feed::-webkit-scrollbar-thumb{background:var(--ink);border-radius:9px}
.row{padding:11px 15px;border-bottom:2px dashed rgba(28,26,23,.18)}
.row:last-child{border-bottom:0}
.row .m{font-family:var(--display);font-weight:600;font-size:14.5px;line-height:1.32}
.row .s{font-family:var(--hand);font-size:14px;color:var(--ink-soft);margin-top:4px;
        display:flex;gap:8px;flex-wrap:wrap}
.row.new{animation:flash .8s}
@keyframes flash{from{background:var(--yellow)}to{background:transparent}}

/* ---------------------------------------------------- section heads */
.section-head{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap;margin:40px 0 15px}
.section-head h2{
  font-family:var(--display);font-weight:700;font-size:clamp(23px,6.4vw,38px);margin:0;
  letter-spacing:-.025em;background:var(--yellow);border:var(--line);border-radius:14px;
  padding:5px 15px;box-shadow:var(--pop-sm);transform:rotate(-1.5deg);
}
.section-head p{font-family:var(--hand);font-size:16px;color:var(--ink-soft);margin:0}

/* ---------------------------------------------------- WHITEBOARD */
.board-wrap{
  background:var(--board-bg,#fff);border:4px solid var(--ink);border-radius:20px;
  box-shadow:var(--pop);padding:13px;transition:background .25s;
}
.board-tools{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:13px}
.board-tools input{margin-top:0;flex:1 1 190px;min-width:0}
.board-tools .jump{flex:0 1 132px;text-align:center}
.tile.focus{animation:focusPulse 2.4s ease}
@keyframes focusPulse{
  0%,100%{outline:0 solid transparent;outline-offset:0}
  10%,70%{outline:5px solid var(--pink);outline-offset:3px}
}

.pager{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:center}
.pager button{
  border:var(--line-2);border-radius:11px;background:var(--paper);
  font-family:var(--display);font-weight:700;font-size:14px;
  min-width:42px;min-height:42px;padding:0 10px;box-shadow:2px 2px 0 var(--ink);
}
.pager button.on{background:var(--pink);color:#fff}
.pager button:disabled{opacity:.35}
.pager button:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--ink)}
.pager .pinfo{font-family:var(--hand);font-size:15px;color:var(--ink-soft);padding:0 6px}
.pager-bottom{margin-top:13px}

/* ---- the mosaic ----
   A tile's AREA is proportional to the slots it bought: 1 slot = 1 cell,
   10 slots = a 10-cell block, and so on. Columns and cell size come from
   custom properties so the customiser can change them live. */
.mosaic{
  display:grid;
  grid-template-columns:repeat(var(--cols,3),1fr);
  grid-auto-rows:var(--cell,104px);
  grid-auto-flow:row dense;
  gap:6px;
}
.tile{
  border:var(--line-2);border-radius:10px;background:var(--paper-2);
  padding:6px;text-align:left;overflow:hidden;
  display:flex;flex-direction:column;gap:3px;
  box-shadow:2px 2px 0 rgba(28,26,23,.5);
  transition:transform .08s, box-shadow .08s;
}
.tile:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--ink)}
.tile .no{
  font-family:var(--display);font-weight:700;font-size:9.5px;color:var(--ink-soft);
  font-variant-numeric:tabular-nums;display:flex;justify-content:space-between;
  gap:4px;align-items:center;flex:none;
}
/* Every tile shows its message — a wall of numbers nobody can read is not a
   board. Small tiles just show it small. */
.tile .tx{
  display:-webkit-box;font-family:var(--display);font-weight:700;line-height:1.16;
  font-size:10.5px;flex:1;overflow:hidden;
  -webkit-line-clamp:4;-webkit-box-orient:vertical;word-break:break-word;
}
.tile .rx{display:none;font-family:var(--hand);font-size:11px;color:var(--ink-soft);flex:none}
.tile .sz{
  font-family:var(--display);font-weight:700;font-size:9px;letter-spacing:.06em;
  background:var(--ink);color:var(--paper);border-radius:99px;padding:1px 6px;flex:none;
  align-self:flex-start;
}
.tile .sz.full{background:var(--pink);color:#fff;font-size:11px;padding:3px 10px;letter-spacing:.08em}

/* Bigger tiles progressively reveal more. */
.tile.s2 .tx{font-size:14px;-webkit-line-clamp:5}
.tile.s3 .tx{font-size:19px;-webkit-line-clamp:6}
.tile.s4 .tx{font-size:26px;-webkit-line-clamp:7}
.tile.s2 .rx,.tile.s3 .rx,.tile.s4 .rx{display:block}
.tile.s3,.tile.s4{border-width:3px;padding:12px;border-radius:14px;box-shadow:var(--pop-sm)}

/* ---- buyer-chosen tile colours (fixed whitelist, never raw CSS) ---- */
.tile.c-pink,.share-card.c-pink     {background:#ffd7e4}
.tile.c-yellow,.share-card.c-yellow {background:#fff0b8}
.tile.c-blue,.share-card.c-blue     {background:#d6efff}
.tile.c-green,.share-card.c-green   {background:#d8f5c8}
.tile.c-purple,.share-card.c-purple {background:#ead9ff}
.tile.c-orange,.share-card.c-orange {background:#ffe0c2}
.tile.c-night,.share-card.c-night   {background:#2a2635;color:#fdf3dc}
.tile.c-night .no,.tile.c-night .rx {color:#b9b0cf}
.tile.c-night .sz                   {background:var(--paper);color:var(--ink)}

.tile.promo{box-shadow:inset 0 0 0 2px var(--blue), 2px 2px 0 rgba(28,26,23,.5)}
.tile.boosted{border-color:var(--pink);border-width:3px}

/* A full-board block is a billboard — the message should fill it, not sit in
   the corner of a large empty rectangle. */
.tile.fullboard{padding:18px}
.tile.fullboard .tx{
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-size:clamp(26px,3.4vw,54px);line-height:1.12;padding:10px 4px;
}
.tile.fullboard .rx{text-align:center}
.tile.fullboard .no{font-size:12px}
@media(hover:hover){ .tile:hover{background:var(--yellow);transform:translate(-1px,-1px);z-index:2} }

/* customiser prefs */
.mosaic.no-reactions .rx{display:none !important}
.mosaic.no-numbers .no span:first-child{visibility:hidden}

.board-empty{
  grid-column:1/-1;text-align:center;padding:30px 12px;
  font-family:var(--hand);font-size:18px;color:var(--ink-soft);
}

/* ---- board note ----
   One line of plain text. No swatches, no borders, nothing that reads as a
   control. */
.board-legend{
  text-align:center;margin:16px 0 0;
  font-family:var(--hand);font-size:15px;color:var(--ink-soft);
}

/* ---- customiser ---- */
.customiser{
  background:var(--paper-2);border:var(--line);border-radius:16px;box-shadow:var(--pop-sm);
  padding:12px;margin-bottom:14px;display:grid;gap:11px;
}
.cust-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.swatches{display:flex;gap:7px;flex-wrap:wrap}
.swatch{
  width:38px;height:38px;border:var(--line);border-radius:11px;
  box-shadow:2px 2px 0 var(--ink);padding:0;
}
.swatch.on{outline:3px solid var(--pink);outline-offset:2px}
.swatch:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--ink)}
.toggles{display:flex;gap:7px;flex-wrap:wrap}
.toggle{
  border:var(--line-2);border-radius:11px;background:var(--paper);
  font-family:var(--display);font-weight:700;font-size:13px;
  padding:8px 12px;min-height:40px;box-shadow:2px 2px 0 var(--ink);opacity:.5;
}
.toggle.on{background:var(--green);opacity:1}
.toggle:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--ink)}

/* ---------------------------------------------------- hall of fame */
.podium{display:grid;gap:14px;margin-bottom:14px}
.pod{
  border:4px solid var(--ink);border-radius:20px;padding:18px 16px;box-shadow:var(--pop);
  display:flex;flex-direction:column;position:relative;min-height:150px;
}
.pod:nth-child(1){background:var(--yellow)}
.pod:nth-child(2){background:var(--blue)}
.pod:nth-child(3){background:var(--orange)}
.medal{
  position:absolute;top:-16px;left:-12px;width:46px;height:46px;border-radius:99px;
  background:var(--paper-2);border:4px solid var(--ink);
  display:grid;place-items:center;font-size:22px;box-shadow:var(--pop-sm);
}
.pod .m{font-family:var(--display);font-weight:700;font-size:18px;line-height:1.25;
        margin:12px 0 auto;word-break:break-word}
.pod .s{display:flex;justify-content:space-between;align-items:center;gap:9px;
        font-family:var(--hand);font-size:16px;margin-top:14px;flex-wrap:wrap}
.pod .s b{font-family:var(--display);font-size:15px}

.fame-rest{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:12px}
.fcard{background:var(--paper-2);border:var(--line);border-radius:16px;padding:13px;
       box-shadow:var(--pop-sm)}
.fcard .rk{font-family:var(--display);font-weight:700;font-size:12px;color:var(--ink-soft)}
.fcard .m{font-family:var(--display);font-weight:600;font-size:15px;margin:6px 0 9px;line-height:1.3}
.fcard .s{font-family:var(--hand);font-size:14px;color:var(--ink-soft);
          display:flex;justify-content:space-between;gap:9px}

/* ---------------------------------------------------- leaderboard */
.board{display:grid;gap:8px}
.brow{
  display:flex;align-items:center;gap:11px;background:var(--paper-2);
  border:var(--line);border-radius:13px;padding:10px 13px;box-shadow:var(--pop-sm);
}
.brow .p{font-family:var(--display);font-weight:700;font-size:17px;width:28px;flex:none}
.brow .h{font-family:var(--display);font-weight:700;font-size:15px;flex:1;min-width:0;
         overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brow .t{font-family:var(--hand);font-size:14.5px;color:var(--ink-soft);flex:none;text-align:right}
.brow:nth-child(1){background:var(--yellow)}

/* ---------------------------------------------------- modal */
.veil{
  position:fixed;inset:0;background:rgba(28,26,23,.55);backdrop-filter:blur(3px);
  z-index:60;display:none;align-items:flex-end;justify-content:center;
  padding:0;overflow-y:auto;
}
.veil.show{display:flex}
.modal{
  background:var(--paper-2);border:4px solid var(--ink);
  border-radius:22px 22px 0 0;border-bottom:0;
  box-shadow:var(--pop-lg);max-width:440px;width:100%;
  /* 58px of top padding reserves a row for the close button, so it always sits
     inside the modal box — a negatively-offset X gets clipped by overflow. */
  padding:58px 18px calc(24px + env(safe-area-inset-bottom));position:relative;
  animation:sheetUp .32s cubic-bezier(.2,1.2,.4,1);
  max-height:92vh;overflow-y:auto;overflow-x:hidden;
}
@keyframes sheetUp{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
.modal h2{font-family:var(--display);font-weight:700;font-size:24px;margin:0 0 4px;letter-spacing:-.02em}
.modal .sub{font-family:var(--hand);font-size:16px;color:var(--ink-soft);margin:0 0 16px}
.modal .btn.lg,.modal .btn.block{margin-top:15px}
.tabs{display:flex;gap:8px;margin-bottom:15px}
.tab{
  flex:1;border:var(--line);border-radius:12px;background:var(--paper);min-height:var(--tap);
  font-family:var(--display);font-weight:700;font-size:15px;padding:10px;
}
.tab.on{background:var(--pink);color:#fff;box-shadow:var(--pop-sm)}
.err{
  font-family:var(--hand);font-size:16px;background:var(--pink);color:#fff;
  border:var(--line);border-radius:12px;padding:9px 13px;margin-top:12px;
}
.x{
  position:absolute;top:12px;right:12px;width:44px;height:44px;border-radius:99px;
  background:var(--pink);color:#fff;border:3px solid var(--ink);box-shadow:2px 2px 0 var(--ink);
  font-family:var(--display);font-size:19px;font-weight:700;line-height:1;z-index:2;
}
.x:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--ink)}

.rc-slot{
  font-family:var(--display);font-weight:700;font-size:40px;letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;text-align:center;margin:4px 0 2px;
}
.rc-msg{
  font-family:var(--display);font-weight:600;font-size:17px;text-align:center;line-height:1.3;
  background:var(--yellow);border:var(--line);border-radius:14px;padding:14px;margin:14px 0;
  transform:rotate(-1deg);word-break:break-word;
}
.rc-note{font-family:var(--hand);font-size:16px;text-align:center;color:var(--ink-soft);line-height:1.45;margin:0}
.slot-link{
  display:block;text-align:center;font-family:var(--display);font-weight:700;font-size:15px;
  background:var(--green);border:var(--line);border-radius:13px;padding:12px;min-height:var(--tap);
  box-shadow:var(--pop-sm);text-decoration:none;margin-bottom:13px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

.mine{display:grid;gap:9px}
.mrow{border:var(--line);border-radius:13px;padding:10px 13px;background:var(--paper)}
.mrow .m{font-family:var(--display);font-weight:600;font-size:14.5px;line-height:1.3}
.mrow .s{font-family:var(--hand);font-size:14px;color:var(--ink-soft);margin-top:4px;
         display:flex;gap:9px;flex-wrap:wrap}
.pill{border:2px solid var(--ink);border-radius:99px;padding:1px 9px;font-family:var(--display);font-size:11px}
.pill.live{background:var(--green)} .pill.removed{background:var(--pink);color:#fff}

/* ---------------------------------------------------- toast */
.toast{
  position:fixed;left:12px;right:12px;bottom:84px;margin:0 auto;max-width:420px;
  background:var(--green);border:4px solid var(--ink);border-radius:16px;
  box-shadow:var(--pop);padding:13px 18px;z-index:80;
  font-family:var(--display);font-weight:700;font-size:16px;text-align:center;display:none;
}
.toast.show{display:block;animation:drop .45s cubic-bezier(.2,1.4,.4,1)}

/* ---------------------------------------------------- sticky mobile CTA */
.mobile-cta{
  position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));
  z-index:50;border:4px solid var(--ink);border-radius:16px;
  background:var(--pink);color:#fff;box-shadow:var(--pop);
  font-family:var(--display);font-weight:700;font-size:18px;padding:15px;min-height:54px;
}
.mobile-cta:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--ink)}

/* ---------------------------------------------------- colour picker */
.colorpick{display:flex;gap:7px;flex-wrap:wrap;margin-top:8px}
.cswatch{
  width:36px;height:36px;border:var(--line-2);border-radius:10px;
  box-shadow:2px 2px 0 var(--ink);padding:0;
}
.cswatch.on{outline:3px solid var(--pink);outline-offset:2px}
.cswatch:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--ink)}
.c-sw-{background:var(--paper-2)}
.c-sw-pink{background:#ffd7e4}   .c-sw-yellow{background:#fff0b8}
.c-sw-blue{background:#d6efff}   .c-sw-green{background:#d8f5c8}
.c-sw-purple{background:#ead9ff} .c-sw-orange{background:#ffe0c2}
.c-sw-night{background:#2a2635}

/* ---------------------------------------------------- quantity */
.qty{display:flex;gap:7px;align-items:center;margin-top:8px}
.qty input{
  margin-top:0;flex:1;min-width:0;text-align:center;
  font-family:var(--display);font-weight:700;font-size:17px;
}
.qty button{
  width:46px;height:46px;flex:none;border:var(--line);border-radius:12px;
  background:var(--paper);font-family:var(--display);font-weight:700;font-size:20px;
  box-shadow:2px 2px 0 var(--ink);
}
.qty button:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--ink)}
.quote{
  margin-top:9px;background:var(--paper);border:2px dashed var(--ink);border-radius:12px;
  padding:9px 12px;font-family:var(--hand);font-size:15.5px;line-height:1.4;color:var(--ink-soft);
}
.quote b{font-family:var(--display);color:var(--ink);font-size:14px}

/* ---------------------------------------------------- top slots */
.topslots{display:grid;grid-template-columns:1fr;gap:12px}
.tscard{
  border:4px solid var(--ink);border-radius:18px;padding:15px;box-shadow:var(--pop);
  background:var(--paper-2);display:flex;flex-direction:column;gap:8px;
}
.tscard .top{display:flex;justify-content:space-between;align-items:center;gap:9px}
.tscard .big{
  font-family:var(--display);font-weight:700;font-size:19px;
  background:var(--pink);color:#fff;border:var(--line-2);border-radius:99px;padding:3px 12px;
}
.tscard .m{font-family:var(--display);font-weight:700;font-size:17px;line-height:1.25}
.tscard .s{font-family:var(--hand);font-size:15px;color:var(--ink-soft);
  display:flex;gap:10px;flex-wrap:wrap;justify-content:space-between}

/* ---------------------------------------------------- writer profile */
.brow{cursor:pointer}
.brow .go{font-family:var(--display);font-size:15px;color:var(--pink);flex:none}
.wstats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:4px 0 14px;
}
.wstat{border:var(--line-2);border-radius:12px;padding:9px 6px;text-align:center;background:var(--paper)}
.wstat .n{font-family:var(--display);font-weight:700;font-size:18px}
.wstat .l{font-family:var(--hand);font-size:13px;color:var(--ink-soft)}

/* ---------------------------------------------------- share page */
.share-wrap{max-width:600px;text-align:center;padding-top:34px}
.share-wrap .logo{display:inline-block;text-decoration:none;margin-bottom:26px}
.share-card{
  background:var(--paper-2);border:4px solid var(--ink);border-radius:22px;
  box-shadow:var(--pop-lg);padding:28px 20px;text-align:center;
}
.share-slot{
  font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:.08em;
  color:var(--ink-soft);font-variant-numeric:tabular-nums;
}
.share-msg{
  font-family:var(--display);font-weight:700;font-size:clamp(23px,6vw,36px);
  line-height:1.18;margin:14px 0 18px;word-break:break-word;
}
.share-meta{
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  font-family:var(--hand);font-size:16px;color:var(--ink-soft);margin-top:16px;
}
.share-size{
  margin-top:14px;display:inline-block;background:var(--pink);color:#fff;
  border:var(--line-2);border-radius:99px;padding:4px 14px;
  font-family:var(--display);font-weight:700;font-size:13px;
}
.share-cta{margin-top:26px}
.share-card.c-night .share-slot,.share-card.c-night .share-meta{color:#b9b0cf}

.sharebar{display:flex;gap:8px;margin-top:14px}
.sharebar .btn{flex:1;font-size:14px;padding:11px 8px}

/* ==================================================== site footer ====
   Full-bleed brown band. It sits outside .wrap so the colour runs edge to
   edge while the content stays on the same max-width as the rest of the page. */
.site-footer{
  /* Same dotted grid as the paper background, at the same 22px pitch so the
     two surfaces read as one sheet — just a light dot instead of a dark one. */
  background-color:var(--brown);
  background-image:radial-gradient(circle, rgba(243,233,212,.16) 1.4px, transparent 1.5px);
  background-size:22px 22px;
  border-top:4px solid var(--ink);
  color:var(--brown-text);
  margin-top:56px;
  /* Generous bottom padding so the sticky mobile CTA can't cover the badge or
     the copyright line. Reduced back down on desktop, where there is no CTA. */
  padding:34px 20px calc(104px + env(safe-area-inset-bottom));
}
.footer-inner{max-width:1160px;margin:0 auto;text-align:center}

.footer-tag{
  font-family:var(--display);font-weight:700;
  font-size:clamp(16px,3.4vw,20px);line-height:1.4;
  margin:0 0 10px;color:#fff;
}
.footer-sub{
  font-family:var(--hand);font-size:16px;line-height:1.55;margin:0 auto 22px;
  max-width:52ch;opacity:.85;
}

.footer-links{
  display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:26px;
}
.footer-links a{
  font-family:var(--display);font-weight:700;font-size:14px;
  color:var(--brown-text);text-decoration:none;
  border:2px solid rgba(232,220,196,.35);border-radius:99px;
  padding:9px 16px;min-height:42px;display:flex;align-items:center;
  transition:background .15s, border-color .15s, color .15s;
}
.footer-links a:hover,.footer-links a:focus-visible{
  background:var(--yellow);border-color:var(--ink);color:var(--ink);outline:none;
}

.footer-brand{
  display:flex;flex-direction:column;align-items:center;gap:12px;
  padding-top:24px;border-top:2px dashed rgba(232,220,196,.28);
}
.ommza-badge{
  display:inline-flex;font-family:var(--display);font-weight:700;
  font-size:19px;letter-spacing:.02em;
  background:var(--pink);border:3px solid var(--ink);border-radius:99px;
  padding:9px 20px;box-shadow:4px 4px 0 var(--brown-deep);transform:rotate(-2deg);
  text-decoration:none;
}
.ommza-badge .w{color:#fff}
.ommza-badge .z{color:var(--yellow)}
.footer-copy{font-family:var(--hand);font-size:15px;opacity:.7;margin:0}

/* ==================================================== legal pages ==== */
.legal{max-width:760px;margin:0 auto;padding:26px 20px 60px}
.legal .logo{display:inline-block;text-decoration:none;margin-bottom:26px}
.legal-sheet{
  background:var(--paper-2);border:4px solid var(--ink);border-radius:22px;
  box-shadow:var(--pop);padding:28px 22px;
}
.legal h1{
  font-family:var(--display);font-weight:700;font-size:clamp(26px,6vw,38px);
  margin:0 0 6px;letter-spacing:-.02em;
}
.legal .updated{font-family:var(--hand);font-size:16px;color:var(--ink-soft);margin:0 0 24px}
.legal h2{
  font-family:var(--display);font-weight:700;font-size:19px;margin:28px 0 8px;
  padding-top:18px;border-top:2px dashed rgba(28,26,23,.18);
}
.legal h2:first-of-type{border-top:0;padding-top:0}
.legal p,.legal li{font-family:var(--body);font-size:15.5px;line-height:1.62;margin:0 0 12px}
.legal ul{margin:0 0 14px;padding-left:22px}
.legal li{margin-bottom:7px}
.legal strong{font-family:var(--display)}
.legal a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.legal .callout{
  background:var(--yellow);border:3px solid var(--ink);border-radius:16px;
  padding:14px 16px;margin:0 0 20px;
}
.legal .callout p{margin:0;font-size:15px}
.legal table{width:100%;border-collapse:collapse;margin:0 0 16px;font-size:14.5px}
.legal th,.legal td{
  border:2px solid var(--ink);padding:9px 11px;text-align:left;
  font-family:var(--body);line-height:1.45;vertical-align:top;
}
.legal th{background:var(--paper);font-family:var(--display);font-weight:700}
.legal-back{display:inline-block;margin-top:22px}

/* =========================================================
   TABLET
   ========================================================= */
@media (min-width:620px){
  .wrap{padding:18px 20px 100px}
  .counters{grid-template-columns:repeat(3,1fr);gap:12px}
  .counter:nth-child(3){grid-column:auto}
  .counter:nth-child(1){transform:rotate(-1deg)}
  .counter:nth-child(2){transform:rotate(.6deg)}
  .counter:nth-child(3){transform:rotate(-.5deg)}
  .hide-xs{display:inline}
  .perks{grid-template-columns:repeat(3,1fr)}
  .perk{flex-direction:column;gap:7px}
  .packs{grid-template-columns:repeat(4,1fr)}
  .podium{grid-template-columns:repeat(3,1fr)}
  .topslots{grid-template-columns:1fr 1fr}
  .pod:nth-child(1){transform:rotate(-1.4deg)}
  .pod:nth-child(2){transform:rotate(1deg)}
  .pod:nth-child(3){transform:rotate(-.7deg)}
  .mosaic{--cols:5;--cell:112px;gap:7px}
  .veil{align-items:center;padding:20px}
  .modal{border-radius:22px;border-bottom:4px solid var(--ink);padding:58px 28px 28px}
  .toast{bottom:28px}
}

/* =========================================================
   DESKTOP — two columns, no sticky CTA
   ========================================================= */
@media (min-width:940px){
  .wrap{padding:18px 20px 80px}
  .grid{grid-template-columns:1fr 348px;gap:24px}
  .compose-sheet{transform:rotate(.5deg)}
  .feed-sheet{transform:rotate(-.6deg);margin-top:24px}
  .stage{min-height:330px;border-radius:24px;box-shadow:var(--pop-lg)}
  .stage-body{padding:44px 32px 28px}
  .mobile-cta{display:none}
  .site-footer{padding-bottom:34px}
  .mosaic{--cols:8;--cell:118px;gap:8px}
  .nav{max-width:420px}
  .why{padding:18px 20px}
  .section-head{margin:52px 0 18px}
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
                       transition-duration:.01ms !important}
}