/* ---- Co-op screens (ui/coop-lobby.js) -----------------------------------
   One sheet = header / scrolling body / footer. Two columns on wide screens,
   one column on portrait phones, compact spacing on short (landscape phone)
   screens. Player 1 is gold, player 2 is blue everywhere (the board divider too). */
.app[data-overlay="coop"] .rotate, .app[data-overlay="coop-money"] .rotate { display: none; }

.sheet.coop-sheet {
  --p1: #f2c14e; --p1-deep: #a87814; --p2: #5cc3e6; --p2-deep: #237a9c;
  --tone-easy: #4fa83a; --tone-normal: #d99a22; --tone-hard: #df6a34; --tone-nightmare: #b3304a;
  width: min(1040px, 100%); max-height: 100%; padding: 0;
  display: flex; flex-direction: column; overflow: hidden; text-align: left;
}
.sheet.coop-sheet.coop-v-hub { width: min(940px, 100%); }
.sheet.coop-sheet.coop-v-match { width: min(780px, 100%); }
/* Live updates re-render the sheet: only the first render animates in. */
.sheet.coop-sheet.is-update { animation: none; }
.coop-sheet:not(.is-update) .coop-seat,
.coop-sheet:not(.is-update) .coop-feature,
.coop-sheet:not(.is-update) .coop-panel { animation: rise .32s var(--ease-out) both; }
.coop-sheet:not(.is-update) .s1,
.coop-sheet:not(.is-update) .coop-col + .coop-col .coop-panel { animation-delay: .06s; }
.coop-sheet .flash { animation: coop-flash 1.5s ease-out; }
@keyframes coop-flash { 0%, 35% { box-shadow: 0 0 0 3px var(--gold), 0 0 22px rgba(242,193,78,.45); } }
@keyframes coop-blink { 50% { opacity: .3; } }
@keyframes coop-pulse { 50% { box-shadow: 0 4px 0 #9a6c12, 0 0 0 7px rgba(242,193,78,.3); } }
@keyframes coop-breathe { 50% { transform: scale(1.08); opacity: .7; } }

/* Header */
.coop-head { position: relative; flex: none; display: flex; align-items: center; gap: 12px; padding: 14px 18px 12px; border-bottom: 2px solid var(--well-line); }
.coop-head-text { flex: 1; min-width: 0; }
.coop-head .eyebrow { margin: 0; font-size: 11.5px; letter-spacing: 1.6px; }
.coop-head .title { margin: 2px 0 0; font-size: 28px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coop-head .sheet-close { position: relative; top: auto; right: auto; flex: none; }
.coop-duo { display: flex; flex: none; }
.coop-duo img { width: 50px; height: 50px; border-radius: 50%; object-fit: contain; background: radial-gradient(circle at 50% 35%, var(--sheet-3), var(--sheet-2)); border: 3px solid var(--sheet); }
.coop-duo img + img { margin-left: -16px; }
.coop-conn { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--tag); color: var(--tag-text); white-space: nowrap; }
.coop-conn i { width: 8px; height: 8px; border-radius: 50%; background: #9aa48d; }
.coop-conn.is-on i { background: #62d443; box-shadow: 0 0 0 3px rgba(98,212,67,.22); }
.coop-conn.is-wait i { background: var(--gold); animation: coop-blink 1s ease-in-out infinite; }
.coop-conn.is-off i { background: #e0533a; }

/* Lobby code chip: tap to copy the invite link. */
.coop-code {
  flex: none; display: grid; grid-template-columns: auto auto; column-gap: 12px; align-items: center;
  padding: 6px 12px 6px 14px; border: 0; border-radius: 16px; cursor: pointer; font: inherit; color: var(--sheet-text);
  background: var(--sheet-2); box-shadow: 0 3px 0 var(--sheet-drop); transition: transform .2s var(--spring);
}
.coop-code:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--sheet-drop); transition-duration: .05s; }
.coop-code:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.coop-code small { grid-column: 1; font-size: 10px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--sheet-soft); }
.coop-code b { grid-column: 1; font-size: 28px; line-height: 1; letter-spacing: .16em; font-variant-numeric: tabular-nums; color: var(--gold-text); }
.coop-code span { grid-column: 2; grid-row: 1 / 3; display: grid; justify-items: center; gap: 2px; font-size: 11px; font-weight: 700; color: var(--accent); }
.coop-code span svg { width: 20px; height: 20px; }

/* Body + footer */
.coop-body { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 16px 18px 18px; }
.coop-foot { flex: none; display: grid; gap: 8px; padding: 10px 18px 14px; border-top: 2px solid var(--well-line); background: var(--sheet); }
.coop-status { margin: 0; font-size: 13px; line-height: 1.3; text-align: center; color: var(--sheet-soft); overflow-wrap: anywhere; }
.coop-status:empty { display: none; }
.coop-status.tone-bad { color: var(--bad-text); font-weight: 700; }
.coop-status.tone-note { color: var(--gold-text); font-weight: 700; }
.coop-foot-row { display: grid; grid-template-columns: minmax(104px, auto) minmax(0, 1fr); gap: 10px; }
/* Wide enough: status on the left, buttons on the right, in one row. */
@media (min-width: 641px) {
  .coop-v-room .coop-foot { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: center; column-gap: 16px; }
  .coop-v-room .coop-status { text-align: left; }
  .coop-v-room .coop-status:empty { display: block; }
}
.coop-foot-row.is-match { grid-template-columns: minmax(0, 1fr) auto auto auto; }
.coop-sheet .sbtn { min-width: 0; }
.coop-sheet .sbtn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coop-sheet .sbtn:disabled { opacity: .5; cursor: default; box-shadow: none; transform: none; animation: none; }
.coop-sheet .sbtn.small { height: 38px; padding: 0 12px; font-size: 14px; border-radius: 12px; }
.coop-sheet .sbtn.small svg { width: 17px; height: 17px; }
.sbtn.coop-waiting { background: var(--tag-good); color: var(--tag-good-text); }
.sbtn.coop-go { background: linear-gradient(#ffd666, #e2a52c); color: #3a2a08; text-shadow: none; box-shadow: 0 4px 0 #9a6c12; animation: coop-pulse 1.6s ease-in-out infinite; }
.sbtn.coop-go:active { box-shadow: 0 1px 0 #9a6c12; }
.coop-sheet h3 { margin: 0; font-size: 17px; line-height: 1.2; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.coop-sheet h3 small { font-size: 12px; font-weight: 500; color: var(--sheet-soft); }

/* ---- Team -------------------------------------------------------------- */
.coop-team { grid-area: team; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; }
.coop-link { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 17px; font-weight: 700; background: var(--sheet-3); color: var(--sheet-text); }
.coop-seat {
  --c: var(--p1); --cd: var(--p1-deep);
  position: relative; display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 76px;
  padding: 10px 12px; border-radius: 18px; background: var(--sheet-2); box-shadow: 0 4px 0 var(--sheet-drop), inset 0 0 0 2px transparent;
  transition: box-shadow .2s;
}
.coop-seat.s1 { --c: var(--p2); --cd: var(--p2-deep); flex-direction: row-reverse; text-align: right; }
.coop-seat.is-ready { box-shadow: 0 4px 0 var(--sheet-drop), inset 0 0 0 2px var(--c); }
.coop-seat.is-empty { background: transparent; box-shadow: inset 0 0 0 2px var(--ghost-line); }
.coop-face { position: relative; flex: none; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 50% 30%, #fff6dc, var(--c) 72%); box-shadow: 0 3px 0 var(--cd); }
.coop-face img { width: 112%; height: 112%; object-fit: contain; margin-top: -8%; pointer-events: none; }
.coop-face em { position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%); padding: 0 6px; border-radius: 999px; font-style: normal; font-size: 10.5px; font-weight: 700; line-height: 16px; background: var(--cd); color: #fff; }
.coop-face-empty { width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center; background: var(--sheet-2); color: var(--sheet-soft); animation: coop-breathe 2.2s ease-in-out infinite; }
.coop-face-empty svg { width: 24px; height: 24px; }
.is-empty .coop-face { background: none; box-shadow: none; }
.coop-seat-info { flex: 1; min-width: 0; display: grid; gap: 2px; }
.coop-seat-info b { font-size: 16px; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coop-seat-info small { font-size: 12px; color: var(--sheet-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coop-seat-info strong { color: var(--gold-text); letter-spacing: .08em; }
.coop-you-tag { display: inline-block; vertical-align: middle; margin-left: 4px; padding: 0 6px; border-radius: 999px; font-size: 10.5px; line-height: 16px; background: var(--c); color: #2a2208; }
.coop-crown { display: inline-flex; vertical-align: -2px; margin-right: 3px; color: var(--p1); }
.coop-crown svg { width: 13px; height: 13px; }
.coop-badge { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--tag); color: var(--tag-text); white-space: nowrap; }
.coop-badge svg { width: 14px; height: 14px; }
.is-ready .coop-badge { background: linear-gradient(var(--go-a), var(--go-b)); color: #fff; }
.is-away .coop-badge { background: rgba(224,83,58,.18); color: var(--bad-text); }
.is-away .coop-face { filter: grayscale(.8); opacity: .7; }

/* ---- Lobby room ---------------------------------------------------------- */
.coop-room { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); grid-template-areas: "team team" "trail settings"; gap: 16px 18px; align-items: start; }
.coop-trail { grid-area: trail; display: grid; gap: 10px; min-width: 0; }
.coop-settings { grid-area: settings; display: grid; gap: 8px; min-width: 0; }

/* The chosen trail, big, with the picker strip under it. */
.coop-feature { position: relative; border-radius: 18px; overflow: hidden; background: var(--sheet-2); box-shadow: 0 4px 0 var(--sheet-drop); }
.coop-feature-art { position: relative; display: block; width: 100%; aspect-ratio: 3 / 2; max-height: 300px; background: linear-gradient(135deg, var(--t1), var(--t2)); }
.coop-feature-art img, .coop-map-art img, .coop-row-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: fade .4s ease; }
.coop-feature-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(8,14,6,0) 38%, rgba(8,14,6,.84)); pointer-events: none; }
.coop-feature-info { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: grid; gap: 3px; padding: 12px 14px; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.35); }
.coop-feature-info small { font-size: 10.5px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; opacity: .85; }
.coop-feature-info b { font-size: 25px; line-height: 1.05; }
.coop-feature-text { font-size: 13px; line-height: 1.3; opacity: .92; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.coop-feature-tag { position: absolute; top: 10px; right: 10px; z-index: 1; display: inline-flex; align-items: center; gap: 5px; max-width: calc(100% - 20px); padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; color: #fff; background: rgba(8,14,6,.62); }
.coop-feature-tag svg { width: 15px; height: 15px; flex: none; }
.coop-pips { display: flex; gap: 3px; }
.coop-pips i { width: 11px; height: 11px; border-radius: 2px 11px; background: rgba(255,255,255,.3); }
.coop-pips i.on { background: linear-gradient(135deg, #9be07a, #3f8a2a); }
.coop-pips.d3 i.on { background: linear-gradient(135deg, #ffd666, #d28a1c); }
.coop-pips.d4 i.on { background: linear-gradient(135deg, #ffb070, #d4643a); }
.coop-pips.d5 i.on { background: linear-gradient(135deg, #ff8a8a, #b0303f); }
.coop-maps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.coop-map { min-width: 0; display: grid; gap: 4px; padding: 0; border: 0; background: none; font: inherit; color: var(--sheet-soft); text-align: center; cursor: pointer; transition: transform .2s var(--spring); }
.coop-map:active { transform: scale(.94); transition-duration: .05s; }
.coop-map:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 12px; }
.coop-map-art { position: relative; display: block; aspect-ratio: 3 / 2; border-radius: 12px; overflow: hidden; background: linear-gradient(135deg, var(--t1), var(--t2)); box-shadow: 0 3px 0 var(--sheet-drop); transition: box-shadow .15s; }
.coop-map-art em { position: absolute; left: 4px; top: 4px; z-index: 1; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 11px; font-weight: 700; color: #fff; background: rgba(0,0,0,.55); }
.coop-map-name { font-size: 11.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coop-map.on { color: var(--sheet-text); }
.coop-map.on .coop-map-art { box-shadow: 0 0 0 3px var(--gold), 0 3px 0 var(--sheet-drop); }
.coop-map.on .coop-map-art em { background: var(--gold); color: #3a2a08; }
.coop-feats { display: flex; flex-wrap: wrap; gap: 5px; }
.coop-feats span { padding: 2px 9px; border-radius: 999px; font-size: 11.5px; background: var(--tag); color: var(--tag-text); }

/* Settings rows: a segmented picker or a switch each. */
.coop-set { display: grid; gap: 8px; min-width: 0; padding: 10px 12px; border-radius: 14px; background: var(--sheet-2); }
.coop-set.is-toggle { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.coop-set-head { display: grid; gap: 1px; min-width: 0; }
.coop-set-head b { font-size: 15px; }
.coop-set-head small { font-size: 12px; line-height: 1.3; color: var(--sheet-soft); }
.coop-seg { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 3px; padding: 3px; border-radius: 12px; background: var(--sheet-3); }
.coop-seg button {
  --tone: var(--accent); min-width: 0; height: 36px; padding: 0 4px; border: 0; border-radius: 9px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  font: inherit; font-size: 13.5px; font-weight: 700; color: var(--sheet-text); background: transparent;
  transition: background .15s, color .15s, transform .2s var(--spring);
}
.coop-seg button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coop-seg button:active { transform: scale(.94); transition-duration: .05s; }
.coop-seg button:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.coop-seg button[aria-checked="true"] { background: var(--sheet); color: var(--accent); box-shadow: 0 2px 0 var(--sheet-drop); }
.coop-seg button.tone-easy { --tone: var(--tone-easy); }
.coop-seg button.tone-normal { --tone: var(--tone-normal); }
.coop-seg button.tone-hard { --tone: var(--tone-hard); }
.coop-seg button.tone-nightmare { --tone: var(--tone-nightmare); }
.coop-seg button[class*="tone-"][aria-checked="true"] { background: var(--tone); color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.3); box-shadow: 0 2px 0 rgba(0,0,0,.25); }
.coop-seg svg { width: 22px; height: 15px; flex: none; }
.coop-seg .b-both { fill: currentColor; opacity: .45; }
.coop-seg .b-p1 { fill: var(--p1); }
.coop-seg .b-p2 { fill: var(--p2); }
.coop-switch { position: relative; flex: none; width: 52px; height: 30px; padding: 0; border: 0; border-radius: 999px; cursor: pointer; background: var(--sheet-3); transition: background .15s; }
.coop-switch i { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 3px rgba(0,0,0,.25); transition: transform .18s var(--spring); }
.coop-switch[aria-checked="true"] { background: var(--go); }
.coop-switch[aria-checked="true"] i { transform: translateX(22px); }
.coop-switch:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.coop-facts { display: flex; flex-wrap: wrap; gap: 5px; }
.coop-facts span { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--tag); color: var(--tag-text); }
.coop-facts svg { width: 14px; height: 14px; flex: none; }
.coop-facts span:nth-child(1) svg { color: var(--heart); }
.coop-facts span:nth-child(2) svg { color: var(--seed); }

/* ---- Hub (find / host / join) ------------------------------------------- */
.coop-hub { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: 14px; align-items: start; }
.coop-col { display: grid; gap: 12px; min-width: 0; }
.coop-panel { display: grid; gap: 10px; min-width: 0; padding: 14px; border-radius: 18px; background: var(--sheet-2); box-shadow: 0 4px 0 var(--sheet-drop); }
.coop-panel h3 svg { width: 20px; height: 20px; color: var(--accent); }
.coop-panel h3 em { font-style: normal; font-size: 12px; padding: 1px 8px; border-radius: 999px; background: var(--tag); color: var(--tag-text); }
.coop-panel p { margin: 0; font-size: 13px; line-height: 1.4; color: var(--sheet-soft); }
.coop-panel > h3:not(:first-child) { margin-top: 6px; }
.coop-you { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
.coop-field { display: grid; gap: 4px; min-width: 0; font-size: 12px; font-weight: 700; color: var(--sheet-soft); }
.coop-field i { font-style: normal; font-weight: 500; opacity: .8; }
.coop-sheet input:not([type="checkbox"]) {
  width: 100%; min-width: 0; height: 44px; padding: 0 12px; border: 2px solid var(--ghost-line); border-radius: 12px;
  font: inherit; font-size: 16px; color: var(--sheet-text); background: var(--sheet); transition: border-color .15s, box-shadow .15s;
}
.coop-sheet input:not([type="checkbox"])::placeholder { color: var(--sheet-soft); opacity: .6; }
.coop-sheet input:not([type="checkbox"]):focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px rgba(242,193,78,.25); }
.coop-join-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.coop-sheet .coop-code-input { height: 50px; font-size: 26px; font-weight: 700; letter-spacing: .4em; text-indent: .4em; text-align: center; font-variant-numeric: tabular-nums; }
.coop-join-row .sbtn { height: 50px; }
.coop-check { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.coop-check span { display: grid; min-width: 0; }
.coop-check b { font-size: 14px; }
.coop-check small { font-size: 12px; color: var(--sheet-soft); }
.coop-row { display: grid; grid-template-columns: 66px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px; border-radius: 14px; background: var(--sheet); }
.coop-row-art { position: relative; display: block; width: 66px; aspect-ratio: 3 / 2; border-radius: 9px; overflow: hidden; background: linear-gradient(135deg, var(--t1, var(--sheet-3)), var(--t2, var(--sheet-2))); }
.coop-row-info { display: grid; gap: 2px; min-width: 0; }
.coop-row-info b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coop-row-info small { font-size: 12px; line-height: 1.3; color: var(--sheet-soft); }
.coop-empty { margin: 0; padding: 12px; border-radius: 14px; border: 2px dashed var(--ghost-line); text-align: center; }
.coop-icon-btn { margin-left: auto; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--sheet-text); background: var(--sheet-3); }
.coop-icon-btn svg { width: 17px; height: 17px; }
.coop-icon-btn:disabled { opacity: .45; cursor: default; }
.coop-help { gap: 8px; }
.coop-help summary { display: flex; align-items: center; gap: 8px; font-weight: 700; cursor: pointer; list-style: none; }
.coop-help summary::-webkit-details-marker { display: none; }
.coop-help summary::after { content: '▾'; margin-left: auto; color: var(--sheet-soft); transition: transform .2s; }
.coop-help[open] summary::after { transform: rotate(180deg); }
.coop-help summary svg { width: 18px; height: 18px; color: var(--accent); }
.coop-host-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; }
.coop-host-row .sbtn { height: 44px; font-size: 15px; }
.coop-addrs { display: grid; gap: 2px; }
.coop-addrs a { color: var(--gold-text); font-weight: 700; overflow-wrap: anywhere; }

/* ---- Match sheet (pause / win / loss) ---------------------------------- */
.coop-lede { margin: 0 auto 12px; max-width: 52ch; text-align: center; color: var(--sheet-soft); }
.coop-v-match .coop-team { margin-bottom: 12px; }
.coop-v-match.is-lost .eyebrow { color: var(--bad-text); }
.coop-v-match.is-won .eyebrow { color: var(--accent-good); }
.coop-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 0 0 12px; }
.coop-stats div { min-width: 0; padding: 7px 8px; border-radius: 12px; text-align: center; background: var(--sheet-2); }
.coop-stats dt { font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--sheet-soft); }
.coop-stats dd { margin: 0; display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; }
.coop-stats dd small { font-size: 13px; color: var(--sheet-soft); }
.coop-stats svg { width: 17px; height: 17px; flex: none; }
.coop-stats .is-lives svg { color: var(--heart); }
.coop-stats .is-seeds svg { color: var(--seed); }
.coop-stats .tone-easy dd { color: var(--tone-easy); }
.coop-stats .tone-hard dd { color: var(--tone-hard); }
.coop-stats .tone-nightmare dd { color: var(--tone-nightmare); }
.coop-note { margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; font-size: 13px; line-height: 1.4; background: var(--best-bg); border: 1px solid var(--best-line); }
.coop-settings.is-live { grid-template-columns: 1fr 1fr; }
.coop-settings.is-live h3 { grid-column: 1 / -1; }

/* ---- Seed sharing ------------------------------------------------------- */
.settings-wallet { margin: 0 0 18px; padding: 14px; border: 2px solid var(--sheet-3); border-radius: 18px; background: var(--sheet-2); text-align: left; }
.settings-wallet-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.settings-wallet h3 { margin: 0; font-size: 18px; }
.settings-wallet-head small { color: var(--sheet-soft); font-size: 12px; }
.settings-wallet .coop-stats { margin: 10px 0 12px; }
.settings-wallet .sbtn { width: 100%; }
.settings-wallet-request { margin: 10px 0 0; font-size: 13px; font-weight: 700; color: var(--accent); }
.coop-v-money { max-width: 680px; }
.coop-money-balances { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.coop-money-compose { display: grid; gap: 10px; padding: 15px; border: 2px solid var(--well-line); border-radius: 16px; background: var(--well); }
.coop-money-compose label { font-weight: 700; }
.coop-money-compose input { width: 100%; min-width: 0; min-height: 48px; padding: 8px 12px; border: 2px solid var(--well-line); border-radius: 10px; color: var(--sheet-text); background: var(--sheet); font: inherit; font-size: 22px; }
.coop-money-quick, .coop-money-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.coop-money-quick .sbtn { flex: 1; font-size: 14px; padding: 0 10px; }
.coop-money-actions .sbtn { flex: 1; }
.coop-money-requests h3, .coop-money-history h3 { margin: 18px 0 8px; }
.coop-money-request { display: grid; gap: 10px; padding: 12px; margin-bottom: 8px; border: 2px solid var(--well-line); border-radius: 14px; background: var(--well); }
.coop-money-request p { margin: 0; overflow-wrap: anywhere; }
.coop-money-request small { display: block; color: var(--sheet-soft); margin-top: 4px; }
.coop-money-request > div { display: flex; flex-wrap: wrap; gap: 8px; }
.coop-money-history ul { margin: 0; padding: 0; list-style: none; }
.coop-money-history li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--well-line); overflow-wrap: anywhere; }
.coop-money-history b { flex-shrink: 0; color: var(--gold-text); }
@media (max-width: 640px) {
  .coop-money-quick .sbtn { flex-basis: 35%; }
}
@media (max-height: 500px) {
  .coop-v-money .coop-body { padding-top: 8px; }
  .coop-money-compose { padding: 10px; gap: 6px; }
}

/* ---- In-match presence pill -------------------------------------------- */
.coop-presence {
  position: absolute; top: calc(var(--safe-t) + var(--gap) + var(--hud-btn) + 8px); right: var(--gap); z-index: 3; max-width: min(340px, calc(100% - 28px)); min-height: 32px;
  display: flex; align-items: center; gap: 7px; padding: 5px 12px 5px 8px; border: 0; border-radius: 999px; cursor: pointer;
  font-family: inherit; font-size: 12px; font-weight: 600; line-height: 1.3; color: var(--text); background: var(--glass-strong); box-shadow: 0 3px 0 rgba(0,0,0,.25);
}
.coop-presence[hidden] { display: none; }
.coop-presence i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #62d443; }
.coop-presence.is-off i { background: #e0533a; animation: coop-blink 1s ease-in-out infinite; }
.coop-presence b { flex: none; padding: 1px 8px; border-radius: 999px; font-size: 11px; background: #f2c14e; color: #3a2a08; }
.coop-presence.p2 b { background: #5cc3e6; color: #0e2a36; }
.coop-presence span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coop-presence em { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 1px 8px; border-radius: 999px; font-style: normal; font-weight: 700; background: var(--go-b); color: #fff; }
.coop-presence em.is-wait { background: #c8762a; }

/* ---- Portrait phones / narrow windows ------------------------------------ */
@media (max-width: 640px) {
  .overlay.is-coop { padding: calc(6px + var(--safe-t)) calc(6px + var(--safe-r)) calc(6px + var(--safe-b)) calc(6px + var(--safe-l)); }
  .sheet.coop-sheet { height: 100%; border-radius: 18px; }
  .coop-head { padding: 12px 14px 10px; gap: 10px; }
  .coop-head .title { font-size: 22px; }
  .coop-duo { display: none; }
  .coop-conn { padding: 6px; font-size: 0; gap: 0; }
  .coop-body { padding: 12px 14px 16px; }
  .coop-foot { padding: 8px 14px calc(12px + var(--safe-b)); }
  .coop-room, .coop-hub { grid-template-columns: minmax(0, 1fr); grid-template-areas: "team" "trail" "settings"; gap: 14px; }
  .coop-team { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .coop-link { display: none; }
  .coop-seat { min-height: 64px; }
  .coop-seat.s1 { flex-direction: row; text-align: left; }
  .coop-face { width: 46px; height: 46px; }
  .coop-maps { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 112px; overflow-x: auto; scroll-snap-type: x proximity; padding: 4px 4px 6px; margin: -4px -4px 0; }
  .coop-map { scroll-snap-align: start; }
  .coop-feature-info b { font-size: 21px; }
  .coop-seg button { font-size: 12.5px; }
  .coop-seg svg { display: none; }
  .coop-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .coop-settings.is-live { grid-template-columns: minmax(0, 1fr); }
  .coop-foot-row.is-match { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .coop-foot-row.is-match > :first-child { grid-column: 1 / -1; }
  .coop-foot-row.is-match .sbtn:not(.big) { height: 44px; font-size: 14px; padding: 0 8px; }
  .coop-presence { font-size: 11px; max-width: calc(100% - 16px); }
}

/* ---- Short screens (landscape phones): tighter everything ---------------- */
@media (max-height: 520px) {
  .overlay.is-coop { padding: calc(6px + var(--safe-t)) calc(8px + var(--safe-r)) calc(6px + var(--safe-b)) calc(8px + var(--safe-l)); }
  .sheet.coop-sheet { height: 100%; border-radius: 16px; border-width: 2px; }
  .coop-head { padding: 7px 14px 7px; gap: 10px; }
  .coop-head .title { font-size: 20px; }
  .coop-head .eyebrow { font-size: 10px; }
  .coop-head .sheet-close { width: 34px; height: 34px; }
  .coop-duo img { width: 36px; height: 36px; border-width: 2px; }
  .coop-duo img + img { margin-left: -12px; }
  .coop-code { padding: 3px 10px 3px 12px; border-radius: 12px; }
  .coop-code b { font-size: 21px; }
  .coop-code small { font-size: 9px; }
  .coop-body { padding: 10px 14px 12px; }
  .coop-foot { padding: 6px 14px 8px; gap: 4px; }
  .coop-status { font-size: 12px; }
  .coop-sheet .sbtn { height: 42px; font-size: 15px; }
  .coop-sheet .sbtn.big { height: 44px; font-size: 17px; }
  .coop-room { gap: 10px 14px; }
  .coop-seat { min-height: 0; padding: 6px 10px; gap: 9px; border-radius: 14px; }
  .coop-face { width: 40px; height: 40px; }
  .coop-face em { font-size: 9.5px; line-height: 14px; bottom: -4px; }
  .coop-seat-info b { font-size: 14.5px; }
  .coop-seat-info small { font-size: 11px; }
  .coop-link { width: 28px; height: 28px; font-size: 14px; }
  .coop-feature { border-radius: 14px; }
  .coop-feature-art { max-height: 46vh; }
  .coop-feature-info { padding: 8px 12px; }
  .coop-feature-info b { font-size: 19px; }
  .coop-feature-text { -webkit-line-clamp: 1; }
  .coop-trail { gap: 8px; }
  .coop-maps { gap: 6px; }
  .coop-map-name { font-size: 10.5px; }
  .coop-settings { gap: 6px; }
  .coop-set { padding: 7px 10px; gap: 6px; border-radius: 12px; }
  .coop-set-head b { font-size: 14px; }
  .coop-set-head small { font-size: 11px; }
  .coop-seg button { height: 32px; font-size: 12.5px; }
  .coop-hub { gap: 10px; }
  .coop-col { gap: 10px; }
  .coop-panel { padding: 10px 12px; gap: 8px; border-radius: 14px; }
  .coop-sheet input:not([type="checkbox"]) { height: 40px; }
  .coop-sheet .coop-code-input, .coop-join-row .sbtn { height: 44px; }
  .coop-lede { margin-bottom: 8px; font-size: 14px; }
  .coop-v-match .coop-team { margin-bottom: 8px; }
  .coop-stats { gap: 6px; margin-bottom: 8px; }
  .coop-stats div { padding: 4px 6px; }
  .coop-stats dd { font-size: 16px; }
}

/* ---- Three and four gardeners (players 3 green, 4 pink) ------------------ */
.sheet.coop-sheet { --p3: #7cc95a; --p3-deep: #3f7a2a; --p4: #e88cc0; --p4-deep: #9c3f72; }
.coop-team.is-many { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.coop-team.is-many .coop-seat.s1 { flex-direction: row; text-align: left; }
.coop-seat.s2 { --c: var(--p3); --cd: var(--p3-deep); }
.coop-seat.s3 { --c: var(--p4); --cd: var(--p4-deep); }
.coop-seg .b-p3 { fill: var(--p3); }
.coop-seg .b-p4 { fill: var(--p4); }
.coop-presence.p3 b { background: #7cc95a; color: #14300a; }
.coop-presence.p4 b { background: #e88cc0; color: #3a0e26; }
@media (max-width: 640px) { .coop-team.is-many { grid-template-columns: minmax(0, 1fr); } }

/* Quick chat: lobby buttons, the in-match chat button and the floating calls. */
.coop-quick { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
.coop-money-to { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.coop-chat {
  position: absolute; z-index: 3; right: var(--gap);
  top: calc(var(--safe-t) + var(--gap) + var(--hud-btn) + 48px);
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
}
.coop-chat[hidden] { display: none; }
.coop-chat-btn {
  width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center;
  color: var(--text); background: var(--glass-strong); box-shadow: 0 3px 0 rgba(0,0,0,.25);
}
.coop-chat-btn svg { width: 20px; height: 20px; }
.coop-chat-menu {
  display: grid; gap: 4px; padding: 6px; border-radius: 14px; max-width: 220px;
  background: var(--glass-strong); box-shadow: var(--shadow);
}
.coop-chat-menu[hidden] { display: none; }
.coop-chat-menu button {
  border: 0; border-radius: 10px; padding: 6px 10px; text-align: left; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--text); background: rgba(255, 255, 255, .08);
}
.coop-chat-menu button:hover, .coop-chat-menu button:focus-visible { background: rgba(255, 255, 255, .18); }
.coop-emotes {
  position: fixed; z-index: 60; left: 50%; top: calc(var(--safe-t, 0px) + 64px); transform: translateX(-50%);
  display: grid; justify-items: center; gap: 6px; pointer-events: none;
}
.coop-emote {
  display: flex; gap: 8px; align-items: center; padding: 6px 14px 6px 6px; border-radius: 999px;
  font-size: 13.5px; font-weight: 600; color: #fff; background: rgba(20, 28, 16, .88); box-shadow: 0 4px 12px rgba(0,0,0,.35);
  animation: coop-emote 4.5s ease forwards;
}
.coop-emote b { padding: 2px 9px; border-radius: 999px; font-size: 12px; background: var(--seat, #f2c14e); color: #1a1408; }
@keyframes coop-emote { 0% { opacity: 0; transform: translateY(8px); } 8%, 82% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .coop-emote { animation: none; } }