/* The Daily Social Pot (social-pot.mjs, owner decisions 10 Oct 2026): the left-edge entry and the slide-in panel, in the
   HUD's cream pixel frames (settings.css, resource-panels.css).
   The entry is a tile of PACKS's own size, frame and weight (packs.css .packs-entry: 96 x 94 px, 72 x 72 px on phones) in
   PACKS's column at the left edge, the last of its tiles: under STAKE while STAKE shows (stake-boost.css: right under
   PACKS), else right under PACKS, else in PACKS's place (one column: PACKS, STAKE, the Social Pot). The trophy with its X
   badge over the pot's short amount, a red dot on the corner. On a mouse screen the column stands clear of the camera's
   28 px edge pan (app.mjs; packs.css and stake-boost.css move their tiles the same way); phones have no edge pan and keep
   it near the edge. Pointing at a tile leaves the canvas, which stops the pan. */
.social-pot-entry{position:absolute;left:max(18px,env(safe-area-inset-left));top:50%;transform:translateY(-50%);box-sizing:border-box;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:96px;height:94px;margin:0;padding:4px 2px 6px;
  border:8px solid transparent;border-image:url('../ui/frames/hud.svg') 12 fill stretch;background:none;color:#492b22;
  font:700 12px/1 Pixeloid,monospace;letter-spacing:.02em;font-synthesis:none;cursor:pointer;touch-action:manipulation;
  filter:drop-shadow(0 3px 0 #34273733)}
.social-pot-frame{position:relative;display:block;flex:none;width:44px;height:44px}
.social-pot-trophy{display:block;width:100%;height:100%;image-rendering:pixelated}
/* The X badge sits on the trophy's lower right corner; the red dot on the tile's upper right one. */
.social-pot-x{position:absolute;right:-10px;bottom:-4px;display:block;width:18px;height:18px;filter:drop-shadow(0 1px 0 #fff5df)}
.social-pot-x svg,.social-pot-x-inline svg{display:block;width:100%;height:100%}
.social-pot-dot{position:absolute;top:-13px;right:-13px;width:12px;height:12px;background:#bc493b;border:2px solid #fff5df;border-radius:50%;box-shadow:0 0 0 1px #8f3a2c}
.social-pot-amount{display:block;max-width:100%;overflow:hidden;white-space:nowrap;font-variant-numeric:tabular-nums}
.social-pot-amount:empty{display:none}
.social-pot-entry:active{translate:0 2px}
.social-ui .social-pot-entry:focus-visible{outline:3px solid #58a7ce;outline-offset:2px}
@media(hover:hover) and (pointer:fine){.social-pot-entry:hover{filter:drop-shadow(0 3px 0 #34273733) brightness(1.07)}}
/* Never in the first-PC picker or while decorating (nor, like PACKS, behind the wallet's sign-in: wallet-gate.css hides
   the whole .social-ui); out of the way while LEADERBOARD, the profile or Island Style (the same left side) is open. */
body[data-pc-picker] .social-pot,body.decorating .social-pot{display:none}
body:has(:is(.leaderboard-panel,.island-profile-panel,.island-style-panel):not([hidden])) .social-pot-entry{visibility:hidden}
/* PACKS shown (packs.css: centred on the middle of the edge): the entry stands right under it, 10 px apart; STAKE shown
   (stake-boost.css: under PACKS, centred 104 px below the middle): under STAKE, 10 px apart. */
body:has(.packs-entry:not([hidden])) .social-pot-entry{top:calc(50% + 57px);transform:none}
body:has(.stake-entry:not([hidden])) .social-pot-entry{top:calc(50% + 161px);transform:none}
@media(max-width:700px){
  .social-pot-entry{left:max(10px,env(safe-area-inset-left));top:44%;width:72px;height:72px;border-width:6px;gap:2px;font-size:10px;letter-spacing:0}
  .social-pot-frame{width:32px;height:32px}
  .social-pot-x{width:15px;height:15px;right:-8px;bottom:-3px}
  .social-pot-dot{top:-10px;right:-10px}
  /* PACKS (72 px, centred at 44 %), STAKE (centred 80 px lower), 8 px apart. */
  body:has(.packs-entry:not([hidden])) .social-pot-entry{top:calc(44% + 44px)}
  body:has(.stake-entry:not([hidden])) .social-pot-entry{top:calc(44% + 124px)}
}
/* A mouse screen, wide or narrow: the column clear of the 28 px edge pan. */
@media(hover:hover) and (pointer:fine){.social-pot-entry{left:max(32px,env(safe-area-inset-left))}}
/* A short screen (at most 540 px tall: a phone held sideways): no room for the column, so the tiles stand in a row
   (packs.css --tile-row-x, --tile-row-y: at the bottom left, or right of the settings gear on a phone): PACKS, STAKE,
   then the Social Pot, 56 px tiles 6 px apart. */
@media(max-height:540px){
  .social-pot-entry,body:has(.packs-entry:not([hidden])) .social-pot-entry,body:has(.stake-entry:not([hidden])) .social-pot-entry{
    left:var(--tile-row-x,18px);top:var(--tile-row-y,calc(100% - 42px));transform:translateY(-50%);width:56px;height:56px;border-width:5px;
    padding:2px 1px 3px;gap:1px;font-size:10px}
  body:has(.packs-entry:not([hidden])) .social-pot-entry{left:calc(var(--tile-row-x,18px) + 62px)}
  body:has(.stake-entry:not([hidden])) .social-pot-entry{left:calc(var(--tile-row-x,18px) + 124px)}
  .social-pot-frame{width:26px;height:26px}
  .social-pot-x{width:12px;height:12px;right:-7px;bottom:-2px}
  .social-pot-dot{top:-8px;right:-8px;width:10px;height:10px}
}
@media(prefers-reduced-motion:reduce){.social-pot-entry:active{translate:none}}

/* ---------------------------------------------------------------- the panel
   A modal <dialog> anchored to the left edge, full height, sliding in; full screen on phones. */
.social-pot-window{--ink:#3e211d;--muted:#7a5a3c;position:fixed;inset:0 auto 0 0;box-sizing:border-box;width:min(460px,100vw);max-width:100vw;
  height:100vh;height:100dvh;max-height:none;margin:0;padding:0;border:12px solid transparent;border-image:url('../ui/frames/hud.svg') 12 fill stretch;
  background:none;overflow:hidden;color:var(--ink);font:400 14px/1.45 Pixeloid,monospace;font-synthesis:none;box-shadow:14px 0 40px #090f2433}
.social-pot-window[open]{display:flex;flex-direction:column;animation:social-pot-in .24s cubic-bezier(.2,.8,.3,1)}
.social-pot-window::backdrop{background:#111d3966;backdrop-filter:blur(2px)}
@keyframes social-pot-in{from{transform:translateX(-100%)}to{transform:none}}
.social-pot-window *{box-sizing:border-box}
.social-pot-window :is(h1,h2,p,ul,ol){margin:0}
.social-pot-window button{font-family:Pixeloid,monospace;font-synthesis:none;color:inherit}
.social-pot-window :is(button,input,a):focus-visible{outline:3px solid #3a97cf;outline-offset:2px}
.social-pot-head{flex:none;display:flex;align-items:center;gap:10px;padding:9px 12px;background:linear-gradient(105deg,#ffd08b,#ffe6ae);border-bottom:3px solid #d9a15f}
.social-pot-head-icon{flex:none;width:34px;height:34px;image-rendering:pixelated;filter:drop-shadow(0 2px 0 #b8742f)}
.social-pot-head h1{flex:1;min-width:0;font:700 21px/1.15 Pixeloid,monospace;letter-spacing:.02em;text-transform:uppercase;overflow-wrap:break-word;hyphens:auto}
.social-pot-close{flex:none;display:grid;place-items:center;width:42px;height:42px;padding:9px;border:0;background:url('../ui/frames/picker-close.svg') center/100% 100% no-repeat;cursor:pointer}
.social-pot-close svg{width:100%;height:100%;shape-rendering:crispEdges}
.social-pot-close:hover{filter:brightness(1.05)}
/* Content-sized (flex-basis auto, never 0%): WebKit resolves a percentage inside a modal <dialog> as 0 (settings.css). */
.social-pot-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:grid;align-content:start;gap:12px;padding:12px 12px 18px;
  scrollbar-width:thin;scrollbar-color:#c99461 #fff4d2}
.social-pot-card{display:grid;gap:8px;min-width:0;padding:10px 12px 12px;border:6px solid transparent;border-image:url('../ui/frames/tile.svg') 8 fill stretch}
.social-pot-heading{font:700 14px/1.3 Pixeloid,monospace;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.social-pot-note{font-size:12px;line-height:1.45;color:var(--muted)}
.social-pot-error{font-size:12px;line-height:1.45;font-weight:700;color:#9c3a2b}
/* The pot: the biggest number of the panel, in the REWARDS card's greens (a flat card: the green tile is a button's frame). */
.social-pot-pot{justify-items:center;gap:2px;text-align:center;padding:12px 12px 14px;border:3px solid #52653b;border-image:none;
  background:linear-gradient(#f4ffdf,#d7edb1);box-shadow:inset 0 0 0 2px #f9ffef,0 3px 0 #3d3726;color:#29482e}
.social-pot-label{font:700 12px/1.3 Pixeloid,monospace;text-transform:uppercase;letter-spacing:.06em;color:#3d6b37}
.social-pot-big{max-width:100%;overflow-wrap:anywhere}
.social-pot-big strong{font:700 34px/1.15 Pixeloid,monospace;color:#176b60;font-variant-numeric:tabular-nums}
.social-pot-unit{display:flex;flex-wrap:wrap;justify-content:center;gap:0 .5em;font-size:13px;color:#2f5a3a}
.social-pot-countdown{margin-top:6px;font-size:14px;font-weight:700;color:#29482e;text-wrap:balance}
.social-pot-at{font-size:12px;color:#3d6b37}
.social-pot-countdown:empty,.social-pot-at:empty{display:none}
.social-pot-tagline{font-size:12px;color:#4b6a4e;text-wrap:balance}
/* "You were picked": gold, with the trophy. */
.social-pot-picked{display:flex;align-items:center;gap:8px;padding:8px 10px;background:#fff1c2;border:2px solid #e2b84a;box-shadow:inset 0 0 0 2px #fff9e0;
  color:#5a3c09;font-size:13px;font-weight:700;line-height:1.4}
.social-pot-inline-trophy{flex:none;width:20px;height:20px;image-rendering:pixelated}
/* Buttons: the frames of the HUD's tiles; the main action blue. */
.social-pot-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:0;min-height:44px;padding:3px 14px 5px;border:7px solid transparent;
  border-image:url('../ui/frames/tile.svg') 8 fill stretch;background:none;font-size:14px;font-weight:700;line-height:1.2;cursor:pointer;touch-action:manipulation;text-align:center}
.social-pot-primary,.social-pot-post{border-image-source:url('../ui/frames/tile-blue.svg');color:#1d4e7a}
.social-pot-button:disabled{opacity:.55;cursor:default}
.social-pot-button:not(:disabled):active{translate:0 1px}
@media(hover:hover) and (pointer:fine){.social-pot-button:not(:disabled):hover{filter:brightness(1.05)}}
.social-pot-x-inline{display:block;flex:none;width:18px;height:18px}
.social-pot-connect{justify-self:start}
.social-pot-confirm{padding:8px 10px;background:#fff9ec;border:2px solid #e3c99d;font-size:13px;line-height:1.5}
.social-pot-actions{display:flex;flex-wrap:wrap;gap:8px}
.social-pot-link-button{justify-self:start;padding:2px 0;border:0;background:none;color:#1d4e7a;font-size:12px;font-weight:700;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.social-pot-link-button:disabled{color:var(--muted);text-decoration:none;cursor:default}
/* The linked account. */
.social-pot-who{display:flex;align-items:center;gap:10px;min-width:0}
.social-pot-who-copy{display:grid;flex:1;min-width:0}
.social-pot-caption{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.social-pot-handle{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.social-pot-linked{flex:none;padding:2px 8px 3px;background:#5aa344;border:2px solid #2f6b2a;color:#fff;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.social-pot-avatar{position:relative;display:grid;place-items:center;flex:none;width:32px;height:32px;overflow:hidden;background:#d9c7a8;color:#493127;
  font:700 15px/1 Pixeloid,monospace;box-shadow:0 0 0 2px #b6a180;border-radius:2px}
.social-pot-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.social-pot-avatar.is-small{width:24px;height:24px;font-size:12px}
/* What a good post is (owner, 11 Oct 2026): three steps, each after its number on a small gold pixel tile; then one small
   line ("One post a day. The team picks the 10 best every day."). */
.social-pot-steps{display:grid;gap:6px;padding:0;list-style:none;counter-reset:social-pot-step;font-size:13px;line-height:1.45}
.social-pot-steps li{position:relative;min-height:22px;padding:1px 0 0 30px;counter-increment:social-pot-step;text-wrap:pretty}
.social-pot-steps li::before{content:counter(social-pot-step);position:absolute;left:0;top:0;display:grid;place-items:center;width:22px;height:22px;
  background:#ffd27a;border:2px solid #b8742f;box-shadow:1px 1px 0 #8a5a32;color:#5a3c09;font:700 12px/1 Pixeloid,monospace}
.social-pot-steps-line{padding:6px 8px;background:#fff9ec;border:2px dashed #e3c99d;font-size:12px;font-weight:700;line-height:1.45;color:#5d4737}
.social-pot-post{justify-self:start}
/* The post's status: waiting (cream), picked (green), not picked (grey). */
.social-pot-status{display:grid;gap:4px;padding:8px 10px;background:#fff9ec;border:2px solid #e3c99d;font-size:13px}
.social-pot-status:is([data-state=selected],[data-state=won]){background:#eef7e2;border-color:#8fc274;color:#24522a}
.social-pot-status[data-state=closed]{background:#f6f0e4;border-color:#cdbfa6;color:#6b5d4f}
.social-pot-status-text{display:flex;align-items:center;gap:6px;font-weight:700;line-height:1.4}
.social-pot-status-more{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;font-size:12px}
.social-pot-form{display:grid;gap:6px}
.social-pot-field-label,.social-pot-invite-label{font-size:12px;font-weight:700}
.social-pot-form-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:stretch}
.social-pot-input,.social-pot-invite-link{width:100%;min-width:0;min-height:44px;padding:8px 10px;border:2px solid #c6ad86;border-radius:2px;box-shadow:inset 0 2px #e5d5b3;
  background:#fffaf0;color:#493127;font:400 13px/1.4 Pixeloid,monospace}
.social-pot-input::placeholder{color:#8a7e73;opacity:1}
.social-pot-form .social-pot-button{min-width:96px}
/* The referral link and its Copy (owner, 11 Oct 2026): the field reads like the link field, its text selectable. */
.social-pot-invite{display:grid;gap:6px;padding:8px 10px;background:#f2f8ff;border:2px solid #9fc0e0}
.social-pot-invite .social-pot-invite-link{padding-inline:8px;font-size:12px;cursor:text;user-select:all;text-overflow:ellipsis}
/* The link takes the whole line (its alias in view), Copy under it as wide. */
.social-pot-invite .social-pot-form-row{grid-template-columns:minmax(0,1fr)}
.social-pot-copy{min-width:96px}
.social-pot-copy[data-copied=true]{border-image-source:url('../ui/frames/tile.svg');color:#24522a}
.social-pot-copy-hint{font-size:12px;line-height:1.45;color:#1d4e7a;font-weight:700}
/* "View on X ↗". */
.social-pot-view{display:inline-flex;align-items:center;gap:4px;color:#1d4e7a;font-size:12px;font-weight:700;white-space:nowrap;text-decoration:underline;text-underline-offset:2px}
.social-pot-out{width:8px;height:8px}
/* Today's picks and past winners. */
.social-pot-lists{display:grid;gap:12px}
.social-pot-list-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.social-pot-count{font-size:13px;font-weight:700;color:#5d4737;font-variant-numeric:tabular-nums}
.social-pot-final{margin-top:-4px;font-size:12px;color:var(--muted)}
.social-pot-rows{display:grid;padding:0;list-style:none}
.social-pot-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px 10px;padding:8px 2px;border-bottom:2px solid #e6d8bb}
.social-pot-row:last-child{border-bottom:0}
.social-pot-row-who{display:flex;align-items:center;gap:9px;min-width:0;font-size:14px}
.social-pot-row-share{grid-column:1;grid-row:2;display:flex;flex-wrap:wrap;gap:0 8px;padding-left:41px;font-size:12px;color:#176b60}
.social-pot-row .social-pot-view{grid-column:2;grid-row:1/span 2}
.social-pot-share-usd{color:#4d5b72}
.social-pot-day{display:grid;gap:4px;padding-top:6px;border-top:2px solid #e6d8bb}
.social-pot-day:first-of-type{padding-top:0;border-top:0}
.social-pot-day-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 10px;font-size:13px}
.social-pot-day-each{font-size:12px;color:#176b60}
.social-pot-winners{display:grid;gap:4px;padding:0;list-style:none}
.social-pot-winner{display:flex;align-items:center;gap:8px;min-width:0;font-size:13px}
.social-pot-winner .social-pot-handle{flex:0 1 auto}
.social-pot-winner .social-pot-view{margin-left:auto}
.social-pot-empty{display:grid;gap:4px;font-size:13px;color:var(--muted)}
/* Phones: the whole screen, the safe areas inside the frame (so layout-safety.css's 16 px keep-clear for windows does not
   apply to this one). */
@media(max-width:700px){
  .social-pot-window{width:100vw;border-width:8px}
  .social-pot-window:modal{max-width:100vw!important}
  .social-pot-head{padding:max(7px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) 7px max(10px,env(safe-area-inset-left))}
  .social-pot-head h1{font-size:18px}
  .social-pot-head-icon{width:28px;height:28px}
  .social-pot-body{padding:10px max(10px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))}
  .social-pot-big strong{font-size:30px}
}
@media(max-width:360px){.social-pot-form-row{grid-template-columns:minmax(0,1fr)}.social-pot-form .social-pot-button{justify-self:start}}
/* Touch screens: finger-sized links without moving anything. */
@media(pointer:coarse){
  .social-pot-link-button{padding-block:11px;margin-block:-9px}
  .social-pot-view{padding-block:10px;margin-block:-10px}
}
@media(prefers-reduced-motion:reduce){.social-pot-window[open]{animation:none}.social-pot-button:not(:disabled):active{translate:none}}