@oddessentials/agent-guild 1.28.0 → 1.30.0

package/web/yard/view.js

@@ -1,4 +1,4 @@
-import { WORLDS, sessionPose } from './model.mjs';
+import { WORLDS, PROVIDER_ORDER, sessionPose } from './model.mjs';
 
 const $ = id => document.getElementById(id);
 const make = (tag, cls, text) => Object.assign(document.createElement(tag), { className: cls, ...(text === undefined ? {} : { textContent: text }) });
@@ -17,6 +17,8 @@ async function boundedLoad(start, onProgress) {
   } finally { settled = true; clearTimeout(timer); }
 }
 const megabytes = bytes => (bytes / 1048576).toFixed(1) + ' MB';
+const CREWS = { anthropic: 'Claude Code', openai: 'Codex CLI', google: 'Antigravity CLI', xai: 'Grok Build', shell: 'Shell', docker: 'Docker Agent' };
+const pieceKind = slot => slot === 'companion' ? 'companion' : 'character';
 
 /** A layout with injected canonical controls. No API, sockets, or business rules. */
 export function initYard(controller) {
@@ -28,7 +30,139 @@ export function initYard(controller) {
   const root = document.documentElement;
   let view = root.dataset.view === 'yard' ? 'yard' : 'cards';
   let snapshot = controller.snapshot();
-  let lastSkin = '', lastTheme = '', wasConnected = false;
+  let lastSkin = '', lastTheme = '', lastRevision = null, wasConnected = false;
+  // Worlds that failed to draw here: skin to revision. The Yard shows its original until the world changes.
+  const unloadable = new Map();
+  const customFor = (skin) => {
+    const world = controller.yardWorld(skin);
+    return world && !world.problem && unloadable.get(skin) !== world.revision ? world : null;
+  };
+  const titleFor = (skin) => customFor(skin)?.title ?? WORLDS[skin].title;
+  const worldShown = new Map();
+  const loadWorld = (target, skin, theme, progress) => {
+    if (target.skin !== skin) {
+      worldShown.delete(skin);
+      for (const [key, shown] of pieceShown) if (key.startsWith(skin + '/') && shown.ok) pieceShown.delete(key);
+      target.setPieces(skin, piecesFor(skin));
+      worldSpot();
+    }
+    const custom = customFor(skin);
+    return target.setWorld(skin, theme, { progress, custom }).then(() => {
+      if (custom) { worldShown.set(skin, custom.revision); worldSpot(); }
+    }, (err) => {
+      if (!custom || disposed) throw err;
+      unloadable.set(skin, custom.revision);
+      if (skin === lastSkin) lastRevision = null;
+      worldSpot();
+      return target.setWorld(skin, theme, { progress });
+    });
+  };
+  const pieceShown = new Map();
+  const pieceKey = (skin, slot) => skin + '/' + slot;
+  const piecesOf = (skin) => controller.yardPieces?.(skin) ?? {};
+  const piecesFor = (skin) => {
+    const pieces = {};
+    for (const [slot, piece] of Object.entries(piecesOf(skin))) {
+      const shown = pieceShown.get(pieceKey(skin, slot));
+      if (piece.revision && !(shown?.revision === piece.revision && !shown.ok)) pieces[slot] = { revision: piece.revision };
+    }
+    return pieces;
+  };
+  const syncPieces = (target) => {
+    const skin = root.dataset.skin;
+    if (target && WORLDS[skin]) target.setPieces(skin, piecesFor(skin));
+  };
+  const pieceDrawn = ({ skin, slot, revision, ok }) => {
+    if (disposed || piecesOf(skin)[slot]?.revision !== revision) return;
+    const key = pieceKey(skin, slot), was = pieceShown.get(key);
+    if (was?.revision === revision && (!was.ok || was.ok === ok)) return;
+    pieceShown.set(key, { revision, ok });
+    if (!ok) for (const target of [renderer, pendingRenderer]) target?.setPieces(skin, piecesFor(skin));
+    worldSpot();
+  };
+  function worldStatus(skin) {
+    const world = controller.yardWorld(skin);
+    if (!world) return { state: 'original', text: 'Original' };
+    if (world.problem) return { state: 'failed', text: world.problem + ' Showing the original.' };
+    if (!customFor(skin)) return { state: 'failed', text: world.title + ' could not load. Showing the original.' };
+    return worldShown.get(skin) === world.revision ? { state: 'custom', text: 'Customized: ' + world.title } : { state: 'loading', text: 'Loading ' + world.title + '…' };
+  }
+  function pieceStatus(skin, slot) {
+    const piece = piecesOf(skin)[slot], kind = pieceKind(slot);
+    if (!piece) return { state: 'original', text: 'Original' };
+    if (piece.problem) return { state: 'failed', text: piece.problem + ' Showing the original ' + kind + '.' };
+    const shown = pieceShown.get(pieceKey(skin, slot));
+    if (shown?.revision !== piece.revision) return { state: 'loading', text: 'Loading ' + piece.title + '…' };
+    return shown.ok ? { state: 'custom', text: 'Customized: ' + piece.title } : { state: 'failed', text: piece.title + ' could not load. Showing the original ' + kind + '.' };
+  }
+  const slotName = (slot) => slot === 'world' ? 'World' : slot === 'companion' ? 'Companions' : snapshot.providers.find(p => p.id === slot)?.tool || CREWS[slot];
+  const customizeRows = new Map();
+  function customizeRow(slot) {
+    if (customizeRows.has(slot)) return customizeRows.get(slot);
+    const row = make('li', 'flag-row yard-customize-row'), copy = make('div', 'yard-customize-copy'), actions = make('div', 'yard-customize-actions');
+    const name = make('span', 'flag-name'), status = make('span', 'yard-customize-status'), note = make('span', 'yard-customize-note');
+    const replace = make('button', 'btn', 'Replace'), restore = make('button', 'btn', 'Restore original');
+    replace.type = restore.type = 'button';
+    note.hidden = slot === 'world';
+    const skin = () => root.dataset.skin;
+    replace.addEventListener('click', () => slot === 'world' ? controller.replaceYard(skin()) : controller.replacePiece(skin(), slot));
+    restore.addEventListener('click', () => slot === 'world' ? controller.restoreYard(skin()) : controller.restorePiece(skin(), slot));
+    copy.append(name, status, note);
+    actions.append(replace, restore);
+    row.append(copy, actions);
+    row.dataset.slot = slot;
+    const parts = { row, name, status, note, replace, restore };
+    customizeRows.set(slot, parts);
+    return parts;
+  }
+  function paintCustomize() {
+    const dialog = $('yard-customize'), skin = root.dataset.skin;
+    if (!dialog.open) return;
+    if (!WORLDS[skin]) { dialog.close(); return; }
+    $('yard-customize-sub').textContent = WORLDS[skin].title + ' only. Other Yards keep their own.';
+    const busy = Boolean(controller.yardBusy?.()) || !snapshot.connected;
+    const heading = (text) => {
+      if (!customizeRows.has(text)) { const item = make('li', 'yard-customize-heading', text); item.setAttribute('role', 'presentation'); customizeRows.set(text, item); }
+      return customizeRows.get(text);
+    };
+    const items = [];
+    for (const [title, slots] of [['Yard', ['world']], ['Characters', PROVIDER_ORDER], ['Companions', ['companion']]]) {
+      items.push(heading(title));
+      for (const slot of slots) {
+        const parts = customizeRow(slot), status = controller.yardChecking?.() === pieceKey(skin, slot) ? { state: 'loading', text: 'Checking replacement…' } : slot === 'world' ? worldStatus(skin) : pieceStatus(skin, slot);
+        const installed = slot === 'world' ? Boolean(controller.yardWorld(skin)) : Boolean(piecesOf(skin)[slot]);
+        parts.name.textContent = slotName(slot);
+        parts.status.textContent = status.text;
+        if (slot !== 'world') parts.note.textContent = slot === 'companion' ? 'Shows beside sessions with helpers in this Yard.'
+          : 'Shows on your ' + slotName(slot) + ' sessions in this Yard' + (slot === 'shell' ? ', and in gold on Terminal AI Chat’s.' : '.');
+        parts.row.dataset.state = status.state;
+        parts.replace.disabled = busy;
+        parts.restore.disabled = busy || !installed;
+        parts.replace.setAttribute('aria-label', 'Replace ' + slotName(slot));
+        parts.restore.setAttribute('aria-label', 'Restore the original ' + slotName(slot));
+        items.push(parts.row);
+      }
+    }
+    const list = $('yard-customize-list');
+    if (items.some((item, i) => list.children[i] !== item) || list.children.length !== items.length) {
+      const focused = list.contains(document.activeElement) ? document.activeElement : null;
+      list.replaceChildren(...items);
+      focused?.focus();
+    }
+  }
+  function worldSpot() {
+    const skin = root.dataset.skin;
+    if (!WORLDS[skin]) return;
+    const world = controller.yardWorld(skin);
+    $('yard-title').textContent = titleFor(skin);
+    $('yard-title').classList.toggle('yard-title-custom', Boolean(customFor(skin)));
+    const reason = world?.problem || (world && !customFor(skin) ? world.title + ' could not load.' : '');
+    const failed = !reason && Object.keys(piecesOf(skin)).map(slot => pieceStatus(skin, slot)).find(status => status.state === 'failed');
+    $('yard-customize-open').hidden = !controller.canReplaceYard();
+    $('yard-world-note').hidden = !reason && !failed;
+    $('yard-world-note').textContent = reason ? reason + ' This Yard is showing its original.' : failed ? failed.text : '';
+    paintCustomize();
+  }
   const celebrate = () => { if (!disposed && sceneVisible()) renderer?.fireworks(); };
   const fireworksButton = () => {
     const button = $('yard-fireworks');
@@ -66,7 +200,7 @@ export function initYard(controller) {
     if (allowed) yardChoice.parentElement.removeAttribute('title');
     else yardChoice.parentElement.title = `${skinEntry()?.name || 'This skin'} has no yard yet.`;
     $('yard').hidden = view !== 'yard';
-    if (view !== 'yard') closePhoto();
+    if (view !== 'yard') { closePhoto(); $('yard-customize').close(); }
     $('providers').hidden = view === 'yard';
     $('providers').inert = view === 'yard';
     for (const section of document.querySelectorAll('#app > section.sessions, #app > section.news')) {
@@ -146,20 +280,24 @@ export function initYard(controller) {
           select: next => select(next),
           open: id => controller.openSession(id),
           error: () => { if (attempt === sceneAttempt) failScene(); },
+          piece: pieceDrawn,
         });
         pendingRenderer = candidate;
         // Appearance can change while the first world is loading.
-        let skin, theme;
+        let skin, theme, revision;
         do {
           skin = root.dataset.skin; theme = root.dataset.theme;
           if (!WORLDS[skin]) { candidate.dispose(); return; }
-          showLoading('Loading ' + WORLDS[skin].title + '…', 'scene');
-          await boundedLoad(progress => candidate.setWorld(skin, theme, { progress }), loadingProgress);
-        } while (!disposed && !candidate.disposed && attempt === sceneAttempt && (skin !== root.dataset.skin || theme !== root.dataset.theme));
+          revision = customFor(skin)?.revision ?? null;
+          syncPieces(candidate);
+          showLoading('Loading ' + titleFor(skin) + '…', 'scene');
+          await boundedLoad(progress => loadWorld(candidate, skin, theme, progress), loadingProgress);
+        } while (!disposed && !candidate.disposed && attempt === sceneAttempt && (skin !== root.dataset.skin || theme !== root.dataset.theme || revision !== (customFor(skin)?.revision ?? null)));
         if (disposed || candidate.disposed || attempt !== sceneAttempt) { candidate.dispose(); return; }
+        syncPieces(candidate);
         pendingRenderer = null;
         renderer = candidate;
-        lastSkin = skin; lastTheme = theme;
+        lastSkin = skin; lastTheme = theme; lastRevision = revision;
         renderer.setReducedMotion(motion.matches);
         renderer.update(snapshot.providers, snapshot.sessions);
         renderer.select(selected);
@@ -237,13 +375,13 @@ export function initYard(controller) {
   // The current world stays up and usable while another loads, and after it
   // fails. A swap that is ready almost at once shows no progress.
   function swapWorld() {
-    const current = renderer, attempt = ++worldAttempt, title = WORLDS[lastSkin].title;
+    const current = renderer, attempt = ++worldAttempt, title = titleFor(lastSkin);
     $('yard-swap-failure').hidden = true;
     hideLoading();
     showLoading('Loading ' + title + '…', 'swap');
     swapReveal = setTimeout(() => { if (attempt === worldAttempt) $('yard-loading').hidden = false; }, 250);
     const settle = () => renderer === current && attempt === worldAttempt && (hideLoading(), true);
-    boundedLoad(progress => current.setWorld(lastSkin, lastTheme, { progress }), loadingProgress).then(() => {
+    boundedLoad(progress => loadWorld(current, lastSkin, lastTheme, progress), loadingProgress).then(() => {
       if (!settle()) return;
       current.update(snapshot.providers,snapshot.sessions); current.select(selected);
     }).catch(() => {
@@ -267,7 +405,8 @@ export function initYard(controller) {
     }
     const world = WORLDS[root.dataset.skin];
     if (!world) return;
-    $('yard-title').textContent = world.title;
+    const revision = customFor(root.dataset.skin)?.revision ?? null;
+    worldSpot();
     $('yard-subtitle').textContent = world.subtitle;
     const working = snapshot.sessions.filter(s => sessionPose(s) === 'working').length;
     const running = snapshot.sessions.filter(s => s.status === 'running').length;
@@ -281,14 +420,15 @@ export function initYard(controller) {
     $('yard-news-empty').hidden = Boolean(href);
     if (href) { $('yard-headline').textContent = news.title; $('yard-headline').href = href; }
     if (renderer) {
-      if (lastSkin !== root.dataset.skin || lastTheme !== root.dataset.theme) {
+      if (lastSkin !== root.dataset.skin || lastTheme !== root.dataset.theme || lastRevision !== revision) {
         if (!WORLDS[root.dataset.skin]) return;
-        lastSkin = root.dataset.skin; lastTheme = root.dataset.theme;
+        lastSkin = root.dataset.skin; lastTheme = root.dataset.theme; lastRevision = revision;
         swapWorld();
       }
+      syncPieces(renderer);
       renderer.update(snapshot.providers,snapshot.sessions);
       renderer.setActive(sceneVisible());
-    } else ensureScene();
+    } else { syncPieces(pendingRenderer); ensureScene(); }
   }
   $('view-cards').addEventListener('change',() => setView('cards'));
   $('view-yard').addEventListener('change',() => { if (skinAllowsYard()) setView('yard'); });
@@ -310,6 +450,12 @@ export function initYard(controller) {
     lastSkin = ''; lastTheme = '';
     update();
   });
+  $('yard-customize-open').addEventListener('click',() => {
+    if (!$('yard-customize').open) $('yard-customize').showModal();
+    paintCustomize();
+  });
+  $('yard-customize-close').addEventListener('click',() => $('yard-customize').close());
+  $('yard-customize').addEventListener('click',event => { if (event.target === $('yard-customize')) $('yard-customize').close(); });
   $('yard-filter').addEventListener('input',roster);
   $('yard-news').addEventListener('click',controller.openNews);
   $('yard-deselect').addEventListener('click',() => { select(null); $('yard-filter').focus(); });

package/web/yard/yard.css

@@ -15,7 +15,7 @@
 .yard-heading > div:first-child::before { content:""; position:absolute; inset:-12px -22px -14px; z-index:-1; border-radius:28px; background:color-mix(in srgb,var(--bg) 72%,transparent); filter:blur(12px); }
 .yard-eyebrow { margin:0 0 6px; font-size:9px; font-weight:650; letter-spacing:.22em; color:var(--gold); }
 #yard-title { font-size:clamp(22px,2.2vw,34px); letter-spacing:.015em; text-shadow:0 2px 14px var(--bg); }
-:root:is([data-skin="orbital"],[data-skin="gnomeland"],[data-skin="goblinville"]) #yard-title { font-size:min(clamp(22px,2.2vw,34px),max(22px,4.4cqi)); }
+:root:is([data-skin="orbital"],[data-skin="gnomeland"],[data-skin="goblinville"],[data-skin="grove"],[data-skin="guild"],[data-skin="professional"]) #yard-title { font-size:min(clamp(22px,2.2vw,34px),max(22px,4.4cqi)); }
 #yard-subtitle { margin:6px 0 0; font-size:12px; color:var(--muted); }
 .yard-heading-side { align-self:flex-start; display:flex; flex-direction:column; align-items:flex-end; gap:10px; }
 .yard-summary { margin-top:3px; font-size:11px; color:var(--text); padding:8px 11px; border:1px solid var(--yard-line); border-radius:30px; background:color-mix(in srgb,var(--surface) 75%,transparent); white-space:nowrap; }
@@ -46,7 +46,15 @@
 .yard-crowd-pick:hover, .yard-crowd-open:hover { background:#1d3236; }
 .yard-overlay { z-index:2; display:flex; flex-direction:column; align-items:center; gap:10px; padding:0 18px 10px; pointer-events:none; }
 .yard-overlay > * { pointer-events:auto; max-width:100%; }
-.yard-camera { align-self:flex-end; display:flex; gap:5px; flex-wrap:wrap; justify-content:flex-end; }
+.yard-overlay > .yard-bar { align-self:stretch; display:flex; flex-wrap:wrap-reverse; align-items:flex-start; justify-content:space-between; gap:8px; pointer-events:none; }
+.yard-bar > * { pointer-events:auto; }
+.yard-world { display:flex; flex-direction:column; align-items:flex-start; gap:5px; min-width:0; max-width:100%; }
+.yard-world-actions { display:flex; flex-wrap:wrap; gap:5px; }
+.yard-world .btn { min-height:30px; padding:5px 10px; font-size:11px; background:var(--surface); white-space:nowrap; text-decoration:none; }
+.yard-world-note { margin:0; padding:4px 10px; max-width:340px; border-radius:8px; font-size:11px; color:var(--text); background:var(--surface); }
+#yard-title.yard-title-custom { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; overflow-wrap:anywhere; }
+.folder-row.folder-file::before { border-radius:2px; border-style:dotted; }
+.yard-camera { margin-left:auto; display:flex; gap:5px; flex-wrap:wrap; justify-content:flex-end; }
 .yard-camera .btn { min-height:30px; padding:5px 10px; font-size:11px; background:var(--surface); white-space:nowrap; }
 .yard-camera .btn svg { display:block; width:16px; height:16px; }
 #yard-help { width:max-content; margin:6px 0 0; padding:4px 12px; border-radius:30px; font-size:10px; color:var(--muted); text-align:center; pointer-events:none; background:color-mix(in srgb,var(--surface) 80%,transparent); }
@@ -153,18 +161,27 @@
 .yard-photo-footer p { flex:1 1 160px; min-width:0; margin:0; color:var(--muted); font-size:13px; }
 
 .yard-play { --play-gold:#e8c47c; --play-ray:#e8c47c; --play-aura:#7c5cff; --play-h:46px; position:relative; display:none; isolation:isolate; border-radius:8px; }
-:root[data-skin="orbital"] .yard-play:not(.yard-play-solo), :root:is([data-skin="gnomeland"],[data-skin="goblinville"]) .yard-play-solo { display:flex; }
+:root[data-skin="orbital"] .yard-play:not(.yard-play-solo), :root:is([data-skin="gnomeland"],[data-skin="goblinville"]) .yard-play-solo:not(.yard-play-grove,.yard-play-arena,.yard-play-builders), :root[data-skin="grove"] .yard-play-grove:has(#yard-install:not([hidden])), :root[data-skin="guild"] .yard-play-arena, :root[data-skin="professional"] .yard-play-builders { display:flex; }
 .yard-play-solo { --play-aura:#ff6a1f; }
+.yard-play-grove { --play-aura:#6fae72; }
+.yard-play-arena { --play-aura:#e8431c; }
+.yard-play-builders { --play-aura:#2f6bed; }
 :root[data-theme="light"] .yard-play { --play-ray:#b8893d; }
 .yard-play:has(.yard-play-chip :focus-visible) { outline:2px solid var(--focus); outline-offset:3px; }
-.yard-install { --play-h:46px; display:none; pointer-events:auto; padding:0; border:0; background:none; cursor:pointer; margin:calc(var(--play-h) * -42 / 128) calc(var(--play-h) * -46 / 128); }
-:root[data-skin="grove"] .yard-install:not([hidden]) { display:block; }
-.yard-install img { display:block; height:calc(var(--play-h) * 212 / 128); transition:filter .2s; }
-.yard-install:hover:not(:disabled) img { filter:brightness(1.12); }
-.yard-install:disabled { cursor:default; opacity:.6; }
-.yard-install:focus-visible { outline:2px solid var(--focus); outline-offset:-12px; }
-:root[data-theme="light"] .yard-install-dark, :root:not([data-theme="light"]) .yard-install-light { display:none; }
 .yard-play-defs { position:absolute; width:0; height:0; overflow:hidden; }
+.break-buttons { display:grid; gap:8px; padding-top:10px; border-top:1px solid var(--border); }
+.break-buttons[hidden] { display:none; }
+.break-label { margin:0; font-size:.8rem; color:var(--muted); }
+.break-row { display:flex; flex-wrap:wrap; gap:8px; }
+.break-row .yard-play { --play-h:46px; display:block; }
+.break-row .yard-play-chip { --play-more-w:44px; }
+.break-row .yard-play-link { padding:0 7px; }
+.break-row .yard-play-more { padding:0; }
+.break-row .yard-play-more::before { display:none; }
+.break-row .yard-play-more-orb { display:block; grid-area:1 / 1; }
+.break-row .yard-play-caret { grid-area:1 / 1; place-self:end; width:9px; height:6px; margin:0 7px 6px 0; stroke-width:2.2; }
+.break-row .yard-play-orb { width:38px; height:38px; }
+.break-row .armed .yard-play-chip { outline:2px solid var(--focus); outline-offset:2px; }
 .yard-play-burst { position:absolute; left:50%; top:50%; width:calc(var(--play-h) * 7); height:calc(var(--play-h) * 2.6); translate:-50% -50%; pointer-events:none; z-index:0; opacity:.55; transition:opacity .3s;
   background:radial-gradient(closest-side, color-mix(in srgb, var(--play-aura) 55%, transparent), color-mix(in srgb, var(--play-aura) 22%, transparent) 40%, transparent 72%);
   -webkit-mask:radial-gradient(closest-side, #000 0, #000c 30%, #0004 55%, transparent 74%); mask:radial-gradient(closest-side, #000 0, #000c 30%, #0004 55%, transparent 74%); }
@@ -183,6 +200,23 @@
 .yard-play-link { display:inline-flex; align-items:center; gap:10px; padding:0 16px 0 9px; color:#fff3cf; text-decoration:none; font-family:var(--font-display); }
 .yard-play-link > * { position:relative; z-index:1; }
 .yard-play-solo .yard-play-chip::before { background:radial-gradient(90px 60px at 12% 50%,#ff6a1f6b,transparent 70%),radial-gradient(90px 60px at 92% 50%,#3f9dff66,transparent 70%),linear-gradient(180deg,#171b2c,#0b0e17 55%,#05070e); }
+.yard-play-arena .yard-play-chip::before { background:radial-gradient(90px 60px at 12% 50%,#e8431c6b,transparent 70%),radial-gradient(90px 60px at 92% 50%,#7a55e866,transparent 70%),linear-gradient(180deg,#231b14,#110d0a 55%,#080604); }
+.yard-play-arena .yard-play-orb { width:38px; height:38px; }
+.yard-play-arena .yard-play-sub { color:#c4b89f; }
+.yard-play-builders .yard-play-chip::before { background:radial-gradient(120px 60px at 12% 50%,#2f6bed75,transparent 70%),linear-gradient(180deg,#1b2029,#0d1015 55%,#07090d); }
+.yard-play-builders .yard-play-orb { width:38px; height:38px; }
+.yard-play-builders .yard-play-sub { color:#a9b0c4; }
+.yard-play-link > .yard-play-stamp { position:absolute; top:3px; right:13px; padding:0 4px; border:1px solid #ff4a3d; border-radius:2px; box-shadow:inset 0 0 0 1px #0d1015,inset 0 0 0 1.5px #ff4a3d; color:#ff4a3d; font:900 8.5px/12px var(--font-body,sans-serif); letter-spacing:.12em; text-transform:uppercase; rotate:-8deg; pointer-events:none; }
+.break-row .yard-play-stamp { display:none; }
+.yard-play-grove .yard-play-chip::before { background:radial-gradient(90px 60px at 12% 50%,#3b7550b0,transparent 70%),radial-gradient(90px 60px at 94% 50%,#7b9a3a66,transparent 70%),linear-gradient(180deg,#16261b,#0d1a12 55%,#081109); }
+.yard-play-grove .yard-play-link { margin:0; border:0; border-radius:0; background:none; text-align:left; }
+.yard-play-grove .yard-play-orb { position:relative; width:38px; height:38px; }
+.yard-play-grove .yard-play-orb svg { display:block; width:100%; height:100%; overflow:visible; }
+.yard-play-bird { position:absolute; inset:calc(50% - 10px); border-radius:50%; background:url(/skins/grove/ui/companion-bird.webp) center / 100% no-repeat; }
+.yard-play-grove .yard-play-sub { color:#d6dcb4; }
+.yard-play-grove .yard-play-chip:has(:disabled) { opacity:.6; translate:none; }
+.yard-play-grove:has(:disabled) .yard-play-burst { display:none; }
+.yard-play-grove .yard-play-link:disabled { background:none; cursor:default; }
 .yard-play-more { display:grid; place-items:center; flex:none; width:var(--play-more-w); margin:0; padding:0 3px 0 0; border:0; border-radius:0; background:none; color:var(--play-gold); }
 .yard-play-more::before { content:""; position:absolute; left:0; top:9px; bottom:9px; width:1px; background:linear-gradient(180deg,transparent,#f6dc9c,transparent); }
 .yard-play-link:hover { background:#e8c47c14; }
@@ -213,12 +247,21 @@
 .yard-play-chev path:nth-child(3) { animation-delay:.4s; }
 .yard-play-solo .yard-play-chev path:nth-child(1) { stroke:#ffb45e; }
 .yard-play-solo .yard-play-chev path:nth-child(3) { stroke:#bfe6ff; }
+.yard-play-grove .yard-play-chev path:nth-child(n) { stroke:#d7ee6e; }
+.yard-play-builders .yard-play-chev path:nth-child(n) { stroke:#e8c47c; }
+.yard-play-arena .yard-play-chev path:nth-child(1) { stroke:#ff9d4d; }
+.yard-play-arena .yard-play-chev path:nth-child(2) { stroke:#f6dc9c; }
+.yard-play-arena .yard-play-chev path:nth-child(3) { stroke:#cfc0ff; }
 @keyframes yard-play-spin { to { transform:rotate(360deg); } }
 @keyframes yard-play-sweep { 0% { left:-30%; } 55%,100% { left:130%; } }
 @keyframes yard-play-pulse { 0%,100% { opacity:.45; transform:scale(.94); } 50% { opacity:.9; transform:scale(1.06); } }
 @keyframes yard-play-chev { 0%,100% { opacity:.35; } 40% { opacity:1; } }
-@container (max-width:660px) { :root:is([data-skin="orbital"],[data-skin="gnomeland"],[data-skin="goblinville"]) .yard-heading { padding-inline:18px; } :root:is([data-skin="orbital"],[data-skin="gnomeland"],[data-skin="goblinville"]) .yard-summary { display:none; } .yard-play { --play-h:44px; } .yard-play-chip { --play-more-w:40px; } .yard-play-chev, .yard-play-sub-more { display:none; } }
+@container (max-width:660px) { :root:is([data-skin="orbital"],[data-skin="gnomeland"],[data-skin="goblinville"],[data-skin="grove"],[data-skin="guild"],[data-skin="professional"]) .yard-heading { padding-inline:18px; } :root:is([data-skin="orbital"],[data-skin="gnomeland"],[data-skin="goblinville"],[data-skin="grove"],[data-skin="guild"],[data-skin="professional"]) .yard-summary { display:none; } .yard-play { --play-h:44px; } .yard-play-chip { --play-more-w:40px; } .yard-play-chev, .yard-play-sub-more { display:none; } }
+@container (max-width:660px) { .yard-play-stamp { display:none; } }
+@container (max-width:520px) { .yard-play-builders .yard-play-now { display:none; } }
+@container (max-width:460px) { .yard-play-builders .yard-play-text { display:none; } .yard-play-builders .yard-play-link { padding:0 7px; } }
+@container (max-width:360px) { :root[data-skin="professional"] #yard-title { font-size:20px; } }
 @container (max-width:480px) { .yard-play-sub, .yard-play-now { display:none; } }
 @container (max-width:440px) { .yard-play-text { display:none; } .yard-play-link { padding:0 7px; } }
 @container (max-width:380px) { .yard-play:not(.yard-play-solo) .yard-play-link { display:none; } .yard-play-chip { --play-more-w:44px; } .yard-play-more { padding:0; } .yard-play-more::before { display:none; } .yard-play-more-orb { display:block; grid-area:1 / 1; } .yard-play-caret { grid-area:1 / 1; place-self:end; width:9px; height:6px; margin:0 7px 6px 0; stroke-width:2.2; } }
-@container (max-width:340px) { :root:is([data-skin="orbital"],[data-skin="gnomeland"],[data-skin="goblinville"]) :is(.yard-eyebrow, #yard-subtitle) { display:none; } }
+@container (max-width:340px) { :root:is([data-skin="orbital"],[data-skin="gnomeland"],[data-skin="goblinville"],[data-skin="grove"],[data-skin="guild"],[data-skin="professional"]) :is(.yard-eyebrow, #yard-subtitle) { display:none; } }