/* ============================================================
   GUILD SYSTEM — guild-specific styles + prototype chrome
   Loads AFTER system.css. System skin only. Reuses the app's
   tokens (--accent, --panel, --line, --glow, fonts, clip notches).
   ============================================================ */

/* ---------- prototype chrome (NOT part of the product) ---------- */

/* ============================================================
   MEMBER CARD
   ============================================================ */

.gcard-idbtn:not(:disabled):hover { transform: translateY(-2px); }

/* slipping member — cheer button urges you to cheer them on */

.nudge { font-family: var(--font-ui); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--warn);
  border: 1px solid color-mix(in srgb, var(--warn) 50%, var(--line)); padding: 8px 12px; transition: color .15s,background-color .15s,border-color .15s,opacity .15s,transform .15s; }
.nudge:hover:not(:disabled) { box-shadow: 0 0 14px -4px var(--warn); }
.nudge.small { padding: 7px 10px; font-size: 10px; }
.nudge.sent { color: var(--dimmer); border-color: var(--line-soft); cursor: default; }

/* ============================================================
   COMPARE
   ============================================================ */
.compare { display: flex; flex-direction: column; align-items: center; gap: 14px; }

/* ============================================================
   COPY ROW + INVITE
   ============================================================ */

.invite-note { font-size: 12px; color: var(--dim); margin-top: 10px; line-height: 1.5; }
.invite-qr { width: 116px; height: 116px; flex: none; padding: 8px; background: #fff; display: grid;
  grid-template-columns: repeat(11, 1fr); grid-template-rows: repeat(11, 1fr); gap: 1px; }
.invite-qr i { background: #04070e; }
.invite-qr i.off { background: transparent; }
.invite-share-row { display: flex; gap: 10px; flex-wrap: wrap; }

/* roster — scales from 3 to many */
.roster { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 16px; align-items: start; }

/* ---- rich guild card ---- */
.gc { position: relative; display: block; width: 100%; text-align: left; background: var(--panel); border: 1px solid var(--line); padding: 17px 19px; transition: color .18s,background-color .18s,border-color .18s,opacity .18s,transform .18s; color: inherit;
  clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 15px, 100% 100%, 15px 100%, 0 calc(100% - 15px));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 6%, transparent) inset, 0 22px 50px -34px #000; }
.gc:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 0 0 1px var(--accent) inset, 0 0 30px -12px var(--glow), 0 22px 50px -34px #000; }
.gc > .corner { position: absolute; width: 11px; height: 11px; border: 2px solid var(--accent); opacity: .8; }
.gc > .corner.tl { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.gc > .corner.br { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }