/* Muck1000 in the corner (assets/support-widget.js): a round button bottom right that opens a chat window above it.
   --muck-* tokens with fallbacks (some pages load tokens.css late or not at all). Hidden at a table. */
@font-face{font-family:'Material Symbols Rounded';font-style:normal;font-weight:100 700;font-display:block;src:url('fonts/material-symbols-rounded-sub.woff2?v=9') format('woff2')}
/* Its own icon class: some pages style .material-symbols-rounded only inside their header */
.mw .material-symbols-rounded{font-family:'Material Symbols Rounded';font-weight:normal;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;-webkit-font-smoothing:antialiased;font-variation-settings:'FILL' 0,'wght' 400}
.mw{position:fixed;right:22px;bottom:22px;z-index:900;font-family:var(--muck-font,Inter,system-ui,sans-serif)}
body:is(.desktop-game-active,.mobile-game-active) .mw{display:none}
.mw-launch{position:relative;display:block;width:62px;height:62px;padding:0;border:0;border-radius:50%;background:#0b0f12;cursor:pointer;box-shadow:0 10px 28px #000a,0 0 0 4px #0e0e0ecc;transition:transform .15s}
/* The gold ring is drawn over the portrait, not as a border around it: a border left two anti-aliased circle edges side by
   side (the photo's clip and the ring's inside), which stair-stepped on 1x screens (Shaun, 2026-10-19: "why does the yellow
   circle around this contienue to show pixellated"). Now the portrait runs under the ring and there's one clean edge each side. */
.mw-launch::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 0 1px var(--muck-gold-muted,#d8bd84);pointer-events:none;transition:box-shadow .15s}
.mw-launch:hover{transform:translateY(-2px)}
.mw-launch:hover::after{box-shadow:inset 0 0 0 1px var(--muck-gold,#ffd34f)}
.mw-launch:focus-visible{outline:2px solid var(--muck-gold,#ffd34f);outline-offset:3px}
.mw-launch img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover;filter:brightness(.71) saturate(.85);transition:filter .3s ease}
/* Larry is bright orange where MuckBot was steel grey: at rest he's dimmed and desaturated so he doesn't pull the eye off the
   hero (Shaun, 2026-10-19: "chat larry is a bit too bright, he like stands out too much"); full colour on hover. */
.mw-launch:is(:hover,:focus-visible) img{filter:brightness(.9) saturate(.95)}   /* a touch dimmer at rest so it doesn't outshine the page (Shaun, 2026-10-13); on hover a gentle lift, not a jump to full orange (2026-10-19: "adjust the hover accordingly so its not a harsh transition") */
/* Quiet invitation, revealed by mouse or keyboard without covering the bot. */
.mw-launch-hint{position:absolute;right:calc(100% + 14px);top:50%;padding:10px 14px;border:1px solid #d8bd844d;border-radius:10px;background:#191a18;color:#f6edda;font:600 13px/1.2 var(--muck-font,Inter,system-ui,sans-serif);letter-spacing:.01em;white-space:nowrap;box-shadow:0 6px 22px #0005;opacity:0;visibility:hidden;transform:translate(5px,-50%);transition:opacity .16s ease,transform .16s ease,visibility .16s;pointer-events:none}
.mw-launch-hint::after{content:"";position:absolute;right:-5px;top:calc(50% - 4px);width:8px;height:8px;background:#191a18;border-top:1px solid #d8bd844d;border-right:1px solid #d8bd844d;transform:rotate(45deg)}
.mw-launch:focus-visible .mw-launch-hint{opacity:1;visibility:visible;transform:translate(0,-50%)}
@media(hover:hover){.mw-launch:hover .mw-launch-hint{opacity:1;visibility:visible;transform:translate(0,-50%)}}
@media(prefers-reduced-motion:reduce){.mw-launch,.mw-launch-hint{transition:none}}
.mw.is-open .mw-launch{display:none}   /* open, the window has its own close; it sits where the button was */
.mw.is-open .mw-panel{bottom:0}

.mw-panel{position:absolute;right:0;bottom:76px;display:flex;flex-direction:column;width:380px;height:min(560px,calc(100vh - 120px));border:1px solid var(--muck-line-strong,#3a3a3a);border-radius:14px;background:var(--muck-surface-1,#141414);color:var(--muck-text,#f2f2f2);box-shadow:0 24px 60px #000c;overflow:hidden}
.mw-panel[hidden]{display:none}
.mw-head{display:flex;align-items:center;gap:10px;padding:12px 12px 12px 14px;border-bottom:1px solid var(--muck-line,#292929)}
.mw-head>img{width:36px;height:36px;border-radius:50%;border:2px solid var(--muck-gold-muted,#d8bd84);object-fit:cover}
.mw-head>div{flex:1;min-width:0}
.mw-head b{display:block;font-size:14.5px}
.mw-head small{display:block;color:var(--muck-text-3,#7d7d7d);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mw-human,.mw-x{display:inline-flex;align-items:center;justify-content:center;gap:5px;height:32px;padding:0 10px;border:1px solid var(--muck-line-strong,#3a3a3a);border-radius:7px;background:var(--muck-surface-2,#1b1b1b);color:var(--muck-text-2,#b4b4b4);font:600 12px var(--muck-font,Inter,system-ui,sans-serif);text-decoration:none;cursor:pointer}
.mw-x{width:32px;padding:0}
.mw-human:hover,.mw-x:hover{color:var(--muck-gold,#ffd34f);border-color:var(--muck-gold-muted,#d8bd84)}
.mw-human .material-symbols-rounded,.mw-x .material-symbols-rounded{font-size:17px}
.mw-log{flex:1;display:flex;flex-direction:column;gap:8px;overflow-y:auto;padding:14px 12px}
.mw-row{display:flex}
.mw-row.is-user{justify-content:flex-end}
.mw-bubble{max-width:85%;padding:9px 12px;border-radius:12px;font-size:13.5px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.is-bot .mw-bubble{background:var(--muck-surface-2,#1b1b1b);border:1px solid var(--muck-line,#292929);border-bottom-left-radius:4px}
.is-user .mw-bubble{background:color-mix(in srgb,var(--muck-gold,#ffd34f) 14%,var(--muck-surface-2,#1b1b1b));border:1px solid color-mix(in srgb,var(--muck-gold,#ffd34f) 35%,transparent);border-bottom-right-radius:4px}
.mw-row.is-typing .mw-bubble{display:flex;gap:4px;padding:12px 14px}
.mw-row.is-typing i{width:6px;height:6px;border-radius:50%;background:var(--muck-text-3,#7d7d7d);animation:mwDot 1s infinite ease-in-out}
.mw-row.is-typing i:nth-child(2){animation-delay:.15s}.mw-row.is-typing i:nth-child(3){animation-delay:.3s}
@keyframes mwDot{0%,80%,100%{opacity:.3}40%{opacity:1}}
.mw-handoff{max-width:90%;padding:12px 14px;border:1px solid var(--muck-gold-muted,#d8bd84);border-radius:12px;background:color-mix(in srgb,var(--muck-gold,#ffd34f) 7%,var(--muck-surface-2,#1b1b1b))}
.mw-handoff b{font-size:13.5px}
.mw-handoff p{margin:4px 0 10px;color:var(--muck-text-2,#b4b4b4);font-size:12.5px;line-height:1.5}
.mw-handoff-go{display:inline-flex;align-items:center;height:34px;padding:0 14px;border-radius:7px;background:var(--muck-gold-cta,#ffd34f);color:var(--muck-gold-ink,#0b1117);font-weight:800;font-size:13px;text-decoration:none}
.mw-handoff-x{display:block;margin-top:10px;font-size:13px;color:var(--muck-text-2,#c4c9cf);text-decoration:none}   /* or Sign in with X (support-widget.js) */
.mw-handoff-x b{color:var(--muck-text,#fff);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.mw-handoff-x:hover b{color:var(--muck-gold,#ffd34f)}
.mw-suggest{display:flex;flex-wrap:wrap;gap:6px;padding:0 12px 10px}
.mw-suggest[hidden]{display:none}
.mw-suggest button{padding:6px 10px;border:1px solid var(--muck-line-strong,#3a3a3a);border-radius:999px;background:var(--muck-surface-2,#1b1b1b);color:var(--muck-text-2,#b4b4b4);font:600 12px var(--muck-font,Inter,system-ui,sans-serif);cursor:pointer;text-align:left}
.mw-suggest button:hover{color:var(--muck-gold,#ffd34f);border-color:var(--muck-gold-muted,#d8bd84)}
.mw-form{display:flex;align-items:flex-end;gap:8px;padding:10px 12px;border-top:1px solid var(--muck-line,#292929)}
.mw-form textarea{flex:1;min-height:40px;max-height:110px;resize:none;padding:9px 12px;border:1px solid var(--muck-line-strong,#3a3a3a);border-radius:9px;background:var(--muck-bg,#0e0e0e);color:var(--muck-text,#f2f2f2);font:500 14px/1.45 var(--muck-font,Inter,system-ui,sans-serif)}
.mw-form textarea:focus{outline:none;border-color:var(--muck-gold,#ffd34f)}
.mw-send{flex:none;display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:9px;background:var(--muck-gold-cta,#ffd34f);color:var(--muck-gold-ink,#0b1117);cursor:pointer}
.mw-send:disabled{opacity:.5;cursor:default}
.mw-send .material-symbols-rounded{font-size:19px}

/* Not on phones (Shaun, 2026-10-12: "hide muckbot on mobile"); Support is in the menu there */
@media(max-width:760px){.mw{display:none}}

/* The corner toasts (Welcome Back, Payment Received, Badge earned) sit to the left of MuckBot's button, bottoms lined
   up (Shaun, 2026-10-12: "move the touts to the left of muckbot when they show up"). At a table MuckBot is hidden and
   they keep the corner. */
@media(min-width:761px){
  body:not(.desktop-game-active):not(.mobile-game-active):has(.mw) :is(#badge-toast,.badge-toast){right:98px;bottom:22px}
  body:not(.desktop-game-active):not(.mobile-game-active):has(.mw.is-open) :is(#badge-toast,.badge-toast){right:416px}   /* left of the open chat */
}

/* A reaction picture under a reply (SupportChat memes) */
.mw-bubble .mw-meme{display:block;width:100%;max-width:260px;height:auto;margin-top:8px;border-radius:8px;border:1px solid var(--muck-line,#292929)}
.mw-bubble a{color:var(--muck-gold,#ffd34f)}