.friends-dialog{width:min(480px,calc(100vw - 20px));max-width:calc(100vw - 20px);padding:22px;border-radius:22px;text-align:left}
.friends-dialog .panel-header{position:sticky;top:-22px;background:var(--panel);padding:15px 0;z-index:2}
.friends-dialog .panel-header>div:last-child{display:flex}
.friends-dialog select,.friends-dialog input{width:100%;min-width:0;min-height:44px;background:#1c1723;border:1px solid #1e3b64;border-radius:10px;padding:10px;color:var(--white);font:inherit;font-size:12px}
.friends-dialog button{min-height:44px;font-size:11px;white-space:normal}
.friends-help{font-size:12px;line-height:1.75;color:var(--muted);margin:10px 0}
.friends-footnote{font-size:10px;line-height:1.8;color:var(--muted);margin:12px 0}
.friends-status{font-size:11px;line-height:1.7;color:#a9c4da;min-height:20px;margin:6px 0 12px}
.friends-status.error{color:#fab895}
.friends-own{padding:16px;border:1px solid #e77bb42b;background:#e77bb408;border-radius:16px}
.friend-code-row,.friend-add{display:flex;gap:8px;align-items:center}
.friend-code-row{margin:10px 0}.friend-code-row .friend-code{letter-spacing:.05em;font-size:13px;background:transparent}.friend-code-row button{flex:none}
.friend-add{margin:20px 0}.friend-add button{flex:none;padding:0 13px}
.friends-heading{font-size:15px;color:#a9c4da;font-weight:400;margin:24px 0 13px}
.friend-card,.friend-invite,.friend-request{border:1px solid #ffffff12;border-radius:16px;padding:15px;margin:10px 0;background:linear-gradient(130deg,#e77bb408,transparent)}
.friend-head{display:flex;gap:12px;align-items:center}.friend-head canvas{width:55px;height:55px;flex:none}.friend-head h3{font-size:16px;font-weight:400;overflow-wrap:anywhere}.friend-presence{display:block;font-size:10px;line-height:1.7;color:var(--muted);margin-top:6px}
.friend-chase{display:flex;align-items:center;gap:12px;padding:12px 0;margin:10px 0;border-top:1px solid #ffffff08;border-bottom:1px solid #ffffff08}.friend-chase canvas{width:60px;height:60px;flex:none}.friend-chase>div{display:grid;gap:5px;font-size:11px}.friend-chase b{font-weight:400;color:var(--white)}.friend-chase .micro{font-size:9px}.friend-match{color:#dad981;font-size:10px}
.friend-actions{display:flex;gap:6px;flex-wrap:wrap}.friend-actions button{flex:1;padding:8px;min-width:80px}.friend-invite>b{font-size:12px;font-weight:400;line-height:1.8}.friend-more{margin-top:12px}.friend-more summary,.friend-sent summary{cursor:pointer;color:var(--muted);font-size:10px;padding:10px 0}.friend-more button{margin:6px 5px 0 0}.friend-request{display:grid;grid-template-columns:44px 1fr;gap:5px 10px;align-items:center}.friend-request canvas{width:44px;height:44px;grid-row:span 2}.friend-request>span{font-size:13px}.friend-request>small{color:var(--muted);font-size:10px}.friend-request .friend-actions{grid-column:1/-1;margin-top:10px}
@media(max-width:360px){.friends-dialog{padding:16px}.friends-dialog .panel-header{top:-16px}.friends-own{padding:12px}.friend-card{padding:12px}.friend-actions button{font-size:10px;min-width:74px}.friend-code-row .friend-code{font-size:11px}}
/* Shared button styles default to full width; keep compact controls beside inputs. */
.friend-code-row button,.friend-add button{width:auto;flex:0 0 auto}
.friend-code-row input,.friend-add input{width:0;flex:1 1 0}
.friends-dialog .primary-button{background:#e5e0d5;border-color:#e5e0d5;color:#1c1723}
.friend-actions button{font-size:10px;padding-inline:5px}
.friends-own>summary{font-size:12px;color:#a9c4da;cursor:pointer;line-height:1.8;min-height:24px}
.friends-own[open]>summary{margin-bottom:18px}.friends-own>.micro{display:block;margin-top:12px}
.friends-own .friend-add{margin-bottom:0}
#scuffle-button{position:relative}
/* What two collections could swap. */
.friend-swap{margin-top:10px;border-top:1px solid #2c2838;padding-top:8px}
.friend-swap summary{cursor:pointer;min-height:38px;display:flex;align-items:center;color:#a1a2a7;font-size:13px;list-style:none}
.friend-swap summary::-webkit-details-marker{display:none}
.friend-swap summary::before{content:'▸';margin-right:8px;color:#717380;transition:transform .2s}
.friend-swap[open] summary::before{transform:rotate(90deg)}
.swap-list{margin-top:6px}.swap-list .micro{margin-bottom:4px}
.swap-row{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.swap-row::-webkit-scrollbar{display:none}
.swap-chip{flex:none;width:62px;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;border:1px solid #2c2838;border-radius:10px;background:#1c1723}
.swap-chip canvas{width:44px;height:44px}
.swap-chip span{font-size:10px;color:#a1a2a7;text-align:center;line-height:1.2;overflow-wrap:anywhere}
.swap-chip.shiny{border-color:#565666}.swap-chip.shiny span{color:#ffe4c0}
.swap-result{margin-top:10px}
/* Sharing a collection: a long code needs plain type and room to breathe, not the room-code styling. */
.share-card{margin-top:14px}
.share-actions{margin:10px 0 12px}
.share-actions button{width:100%;margin:0}
.share-paste{display:flex;flex-direction:column;gap:8px}
.share-paste .share-input{width:100%;height:46px;background:#1c1723;border:1px solid #403d51;border-radius:10px;color:#f4efe3;padding:0 12px;font-size:13px;letter-spacing:0;text-transform:none;text-align:left}
.share-paste button{width:100%;margin:0}
/* Offers on the table. */
.friend-offer{margin-top:12px;padding-top:10px;border-top:1px solid #2c2838}
.friend-offer .micro{margin-bottom:6px}
.friend-offer .primary-button{width:100%;margin:6px 0 0}
.offer-deal{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin:4px 0 6px;font-size:13px}
.offer-deal b{font-weight:500;color:#f4efe3}
.offer-arrow{color:#86878f}
.offer-warn{font-size:12px;color:#fab895;line-height:1.6;margin:6px 0}
.offer-dialog #offer-body{padding-bottom:20px}
.offer-part{margin:12px 0}
.offer-grid{max-height:190px;border-top:0;border-bottom:1px solid #2c2838;padding-bottom:10px}
.offer-none{justify-content:center}
.offer-dust,.offer-note{width:100%;height:44px;background:#1c1723;border:1px solid #403d51;border-radius:10px;color:#f4efe3;padding:0 12px;font-size:14px}
.offer-note{margin-top:6px}
.offer-dialog .primary-button{width:100%;margin-top:12px}
/* Something is waiting: a badge you notice without it shouting. It settles after one pulse. */
/* Anything needing an answer, pinned above everything else. */
.waiting-card{border-color:#387c47;background:linear-gradient(180deg,#1c1723,#1c1723)}
.waiting-line{padding:8px 0;border-bottom:1px solid #2c2838}
.waiting-line:last-child{border-bottom:0}
.waiting-line b{display:block;font-weight:500;font-size:14px;color:#f4efe3}
.waiting-deal{display:block;font-size:12px;color:#a1a2a7;margin-top:2px}
.waiting-line .friend-actions{margin-top:8px}
/* A friend's whole set. */
.friend-collection-dialog .filter-tabs{margin:10px 0}
.friend-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px;margin-top:10px}
.friend-cell{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px;border:1px solid #2c2838;border-radius:10px;background:#1c1723}
.friend-cell canvas{width:56px;height:56px;image-rendering:pixelated}
.friend-cell-name{font-size:10px;color:#e5e0d5;text-align:center;line-height:1.2;overflow-wrap:anywhere}
.friend-cell-mark{font-size:9px;color:#a1a2a7;text-align:center}
.friend-cell.missing{opacity:.5}
.friend-cell.missing .friend-cell-name{color:#717380}
/* A friend's set, with both coats and rarity on every cell. */
.friend-grid{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:9px}
.friend-cell{align-items:center;gap:3px;padding:9px 5px;border-radius:11px;cursor:pointer;text-align:center;
  border-color:color-mix(in srgb,var(--rarity-color,#2c2838) 34%,#2c2838)}
.friend-cell:hover{border-color:var(--rarity-color,#265d3d)}
.friend-coats{display:flex;gap:6px;align-items:flex-end;justify-content:center}
.coat-slot{position:relative;display:grid;place-items:center}
.coat-slot canvas{width:42px;height:42px;image-rendering:pixelated}
.coat-slot.none{opacity:.28}
.coat-slot.is-shiny canvas{filter:drop-shadow(0 0 4px #ffe4c055)}
.coat-count{position:absolute;right:-2px;bottom:-2px;font-size:9px;color:#1c1723;background:#e5e0d5;border-radius:6px;padding:0 3px}
.friend-cell-rarity{font-size:9px;letter-spacing:.06em;color:var(--rarity-color,#a1a2a7)}
.friend-cell-mark.send{color:#e5e0d5}
.friend-cell-mark.get{color:#ffe4c0}
.about-dialog{text-align:center;padding:24px 22px}
.about-dialog h2{margin:4px 0 10px;font-size:19px}
.about-dialog button{width:100%;margin:6px 0 0}

/* ---- One badge, everywhere ----
   Four different rules had grown across four files: 8px here, 12px there, one of them light green
   with pale lilac text on top. Everything on the nav now shares a single shape and a readable pair
   of colours, and nothing can grow wider than its tab. */
.bottom-nav .nav-badge,
.bottom-nav #collection-count{
  position:absolute;top:3px;right:6px;left:auto;transform:none;
  display:inline-flex;align-items:center;justify-content:center;
  height:17px;min-width:17px;padding:0 5px;box-sizing:border-box;
  font-size:9px;line-height:1;letter-spacing:.02em;font-variant-numeric:tabular-nums;
  border-radius:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  max-width:calc(100% - 10px);
  background:#1c1723;color:#a1a2a7;border:1px solid #2c2838;box-shadow:none;
}
/* Something waiting for you: light plate, dark type, always legible. */
.bottom-nav .nav-badge[data-kind="ready"],
.bottom-nav .nav-badge[data-kind="chapter"],
.bottom-nav .nav-badge[data-kind="wish"]{
  background:#e5e0d5;color:#1c1723;border-color:#e5e0d5;
}
.bottom-nav .nav-badge[data-kind="tonight"]{background:#1c1723;color:#85cd74;border-color:#265d3d}
/* The quest clock is the longest thing here, so it gets its own room and never wraps. */
.bottom-nav #journey-badge{font-size:9px;max-width:calc(100% - 6px);right:4px}
.bottom-nav #collection-count{right:4px;max-width:calc(100% - 6px)}
/* The journal's own tint, only when it is the quiet kind. */
.bottom-nav .nav-badge[data-kind="tonight"]{color:#dad981}

/* ---- Friends as a list ------------------------------------------------------------------------
   Shut, a friend is one line. Open, it is the panel it always was. Only one is open at a time. */
.friend-card.is-shut{padding:0;background:transparent;border-color:var(--line)}
.friend-card.is-shut .friend-head{margin:0;padding:12px 14px;cursor:pointer;
  display:flex;align-items:center;gap:11px}
.friend-card.is-shut .friend-head h3{font-size:14px;margin:0}
.friend-card.is-shut .friend-head:hover{background:rgba(255,255,255,.03)}
.friend-card.is-open .friend-head{cursor:pointer}
.friend-caret{margin-left:auto;color:var(--muted);font-size:16px;line-height:1}
.friend-card.is-open .friend-caret{margin-left:auto}
.friend-quiet{font-size:10px;color:var(--muted);white-space:nowrap}
.friend-quiet.is-waiting{padding:2px 8px;border-radius:9px;background:var(--accent);color:#1c1723;
  font-size:10px;letter-spacing:.02em}
.friend-card.is-shut+.friend-card.is-shut{margin-top:-1px}
/* Several pals a side (11.6.1): the picked row above each grid. */
.offer-picked{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 10px}
.offer-chip{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:2px 10px 2px 3px;border-radius:999px;border:1px solid #403d51;background:#1c1723;color:#e5e0d5;font-size:11px;cursor:pointer}
.offer-chip canvas{width:28px;height:28px;image-rendering:pixelated}
.offer-chip b{color:#a1a2a7;font-weight:400;margin-left:2px}
.offer-chip.shiny span{color:#ffe4c0}
.offer-chip.prism span{background:var(--prism,linear-gradient(90deg,#f5a9c8,#ffd9a0,#b8efc4,#a9d4ff,#cdb2ff));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.scuffle-card:disabled{opacity:.45}

/* 13.1: an offer says plainly what you get and what you give */
.waiting-deal{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:6px 0 4px}
.waiting-deal .deal-side{display:flex;flex-direction:column;gap:1px;padding:6px 8px;border-radius:10px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);min-width:0}
.waiting-deal .deal-side small{font-size:10px;letter-spacing:.06em;opacity:.7}
.waiting-deal .deal-side b{font-size:13px;font-weight:600;color:inherit;overflow-wrap:anywhere}
.waiting-deal .deal-side:first-child{border-color:rgba(132,214,160,.35)}
.offer-words{margin:2px 0 0;font-size:13px}

/* 13.2: the offer builder shows both sides at the top and one collection at a time */
.offer-deal-sides{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
.offer-side{min-width:0;padding:8px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.offer-side .offer-part{margin:0 0 6px}
.offer-side .offer-dust{width:100%;box-sizing:border-box}
.offer-none{margin:2px 0 6px;opacity:.7}
.offer-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:14px;background:rgba(255,255,255,.05);margin:4px 0 8px}
.offer-tab{min-height:38px;border-radius:10px;border:0;background:transparent;color:inherit;font:inherit;font-size:13px;cursor:pointer;padding:4px 8px}
.offer-tab.is-on{background:rgba(255,255,255,.14);font-weight:600}
.offer-tab:focus-visible{outline:2px solid currentColor;outline-offset:2px}
@media (max-width:360px){.offer-deal-sides{grid-template-columns:1fr}}