/* ===================================================================== */
/* Friends (#friends-modal .friends-card): the CoreCraftia fantasy frame - */
/* bright blue border, wooden "Friends" sign, 3D buttons, framed rows and  */
/* leaf corners. Presentation only: markup (landing.html / items.js), ids  */
/* and behaviour are untouched. Uses "body #friends-modal" and !important  */
/* where corecraftia-ui.css / windows.css do.                              */
/* ===================================================================== */

body #friends-modal{
  --fr-frame: #2f93ff;
  --fr-wood: linear-gradient(180deg, #d79a58 0%, #b87438 52%, #8d5226 100%);
  --fr-grain: repeating-linear-gradient(92deg, rgba(60, 28, 6, 0) 0 22px, rgba(60, 28, 6, 0.16) 22px 24px);
  --fr-card: linear-gradient(180deg, #0c2144, #081a38);
  --fr-btn: linear-gradient(180deg, #4aa6ff 0%, #2677e6 52%, #1757bd 100%);
  --fr-leaf-tl: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2090%2070%27%3E%3Cg%20transform=%27translate%280%200%29%20scale%281%201%29%27%3E%3Cdefs%3E%3ClinearGradient%20id=%27g%27%20x1=%270%27%20y1=%270%27%20x2=%271%27%20y2=%271%27%3E%3Cstop%20offset=%270%27%20stop-color=%27%23a6e864%27/%3E%3Cstop%20offset=%271%27%20stop-color=%27%232f8a3a%27/%3E%3C/linearGradient%3E%3Cg%20id=%27l%27%3E%3Cpath%20d=%27M2%2012C10%200%2028%200%2038%2012%2028%2024%2010%2024%202%2012Z%27%20fill=%27url%28%23g%29%27%20stroke=%27%2316501f%27%20stroke-width=%272%27%20stroke-linejoin=%27round%27/%3E%3Cpath%20d=%27M6%2012H34%27%20stroke=%27%23d8f8ad%27%20stroke-opacity=%27.75%27%20stroke-width=%271.6%27%20stroke-linecap=%27round%27/%3E%3C/g%3E%3C/defs%3E%3Cuse%20href=%27%23l%27%20x=%272%27%20y=%2726%27%20width=%2734%27%20height=%2720%27%20transform=%27rotate%28-38%2019%2036%29%27/%3E%3Cuse%20href=%27%23l%27%20x=%2722%27%20y=%278%27%20width=%2734%27%20height=%2720%27%20transform=%27rotate%28-8%2039%2018%29%27/%3E%3Cuse%20href=%27%23l%27%20x=%2740%27%20y=%2734%27%20width=%2730%27%20height=%2718%27%20transform=%27rotate%2834%2055%2043%29%27/%3E%3C/g%3E%3C/svg%3E");
  --fr-leaf-tr: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2090%2070%27%3E%3Cg%20transform=%27translate%2890%200%29%20scale%28-1%201%29%27%3E%3Cdefs%3E%3ClinearGradient%20id=%27g%27%20x1=%270%27%20y1=%270%27%20x2=%271%27%20y2=%271%27%3E%3Cstop%20offset=%270%27%20stop-color=%27%23a6e864%27/%3E%3Cstop%20offset=%271%27%20stop-color=%27%232f8a3a%27/%3E%3C/linearGradient%3E%3Cg%20id=%27l%27%3E%3Cpath%20d=%27M2%2012C10%200%2028%200%2038%2012%2028%2024%2010%2024%202%2012Z%27%20fill=%27url%28%23g%29%27%20stroke=%27%2316501f%27%20stroke-width=%272%27%20stroke-linejoin=%27round%27/%3E%3Cpath%20d=%27M6%2012H34%27%20stroke=%27%23d8f8ad%27%20stroke-opacity=%27.75%27%20stroke-width=%271.6%27%20stroke-linecap=%27round%27/%3E%3C/g%3E%3C/defs%3E%3Cuse%20href=%27%23l%27%20x=%272%27%20y=%2726%27%20width=%2734%27%20height=%2720%27%20transform=%27rotate%28-38%2019%2036%29%27/%3E%3Cuse%20href=%27%23l%27%20x=%2722%27%20y=%278%27%20width=%2734%27%20height=%2720%27%20transform=%27rotate%28-8%2039%2018%29%27/%3E%3Cuse%20href=%27%23l%27%20x=%2740%27%20y=%2734%27%20width=%2730%27%20height=%2718%27%20transform=%27rotate%2834%2055%2043%29%27/%3E%3C/g%3E%3C/svg%3E");
  --fr-leaf-bl: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2090%2070%27%3E%3Cg%20transform=%27translate%280%2070%29%20scale%281%20-1%29%27%3E%3Cdefs%3E%3ClinearGradient%20id=%27g%27%20x1=%270%27%20y1=%270%27%20x2=%271%27%20y2=%271%27%3E%3Cstop%20offset=%270%27%20stop-color=%27%23a6e864%27/%3E%3Cstop%20offset=%271%27%20stop-color=%27%232f8a3a%27/%3E%3C/linearGradient%3E%3Cg%20id=%27l%27%3E%3Cpath%20d=%27M2%2012C10%200%2028%200%2038%2012%2028%2024%2010%2024%202%2012Z%27%20fill=%27url%28%23g%29%27%20stroke=%27%2316501f%27%20stroke-width=%272%27%20stroke-linejoin=%27round%27/%3E%3Cpath%20d=%27M6%2012H34%27%20stroke=%27%23d8f8ad%27%20stroke-opacity=%27.75%27%20stroke-width=%271.6%27%20stroke-linecap=%27round%27/%3E%3C/g%3E%3C/defs%3E%3Cuse%20href=%27%23l%27%20x=%272%27%20y=%2726%27%20width=%2734%27%20height=%2720%27%20transform=%27rotate%28-38%2019%2036%29%27/%3E%3Cuse%20href=%27%23l%27%20x=%2722%27%20y=%278%27%20width=%2734%27%20height=%2720%27%20transform=%27rotate%28-8%2039%2018%29%27/%3E%3Cuse%20href=%27%23l%27%20x=%2740%27%20y=%2734%27%20width=%2730%27%20height=%2718%27%20transform=%27rotate%2834%2055%2043%29%27/%3E%3C/g%3E%3C/svg%3E");
  --fr-leaf-br: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2090%2070%27%3E%3Cg%20transform=%27translate%2890%2070%29%20scale%28-1%20-1%29%27%3E%3Cdefs%3E%3ClinearGradient%20id=%27g%27%20x1=%270%27%20y1=%270%27%20x2=%271%27%20y2=%271%27%3E%3Cstop%20offset=%270%27%20stop-color=%27%23a6e864%27/%3E%3Cstop%20offset=%271%27%20stop-color=%27%232f8a3a%27/%3E%3C/linearGradient%3E%3Cg%20id=%27l%27%3E%3Cpath%20d=%27M2%2012C10%200%2028%200%2038%2012%2028%2024%2010%2024%202%2012Z%27%20fill=%27url%28%23g%29%27%20stroke=%27%2316501f%27%20stroke-width=%272%27%20stroke-linejoin=%27round%27/%3E%3Cpath%20d=%27M6%2012H34%27%20stroke=%27%23d8f8ad%27%20stroke-opacity=%27.75%27%20stroke-width=%271.6%27%20stroke-linecap=%27round%27/%3E%3C/g%3E%3C/defs%3E%3Cuse%20href=%27%23l%27%20x=%272%27%20y=%2726%27%20width=%2734%27%20height=%2720%27%20transform=%27rotate%28-38%2019%2036%29%27/%3E%3Cuse%20href=%27%23l%27%20x=%2722%27%20y=%278%27%20width=%2734%27%20height=%2720%27%20transform=%27rotate%28-8%2039%2018%29%27/%3E%3Cuse%20href=%27%23l%27%20x=%2740%27%20y=%2734%27%20width=%2730%27%20height=%2718%27%20transform=%27rotate%2834%2055%2043%29%27/%3E%3C/g%3E%3C/svg%3E");
  background:
    radial-gradient(circle at 20% 0%, rgba(73, 168, 255, 0.18), transparent 28%),
    radial-gradient(circle at 80% 0%, rgba(34, 199, 255, 0.12), transparent 24%),
    rgba(2, 10, 18, 0.74) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  font-family: Georgia, "Times New Roman", serif;
}

/* ---- frame ---- */
body #friends-modal .friends-card{
  position: relative;
  margin-top: 36px;
  overflow: visible !important;
  padding: 22px 20px 18px !important;
  border: 4px solid var(--fr-frame) !important;
  border-radius: 22px !important;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(90, 170, 255, 0.22), transparent 60%),
    linear-gradient(180deg, #123c72 0%, #0b2750 52%, #081b38 100%) !important;
  box-shadow:
    0 0 0 2px #082f66,
    0 18px 44px rgba(0, 0, 0, 0.6),
    inset 0 0 0 1px rgba(150, 210, 255, 0.35),
    inset 0 3px 0 rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
}
body #friends-modal .friends-card::before{ display: none !important; }
body #friends-modal .friends-card::after{
  content: "";
  position: absolute;
  left: -12px;
  top: -12px;
  width: calc(100% + 24px);
  height: calc(100% + 24px);
  z-index: 6;
  pointer-events: none;
  background:
    var(--fr-leaf-tl) left top / 54px 42px no-repeat,
    var(--fr-leaf-tr) right top / 54px 42px no-repeat,
    var(--fr-leaf-bl) left bottom / 54px 42px no-repeat,
    var(--fr-leaf-br) right bottom / 54px 42px no-repeat;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.35));
}

/* ---- wooden title + red X ---- */
body #friends-modal .friends-card-top{
  position: static;
  display: flex !important;
  justify-content: center !important;
  margin: -58px auto 14px !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
}
body #friends-modal .friends-card-top > div:first-child{
  position: relative;
  z-index: 5;
  padding: 7px 44px 9px;
  border: 3px solid #4a2a10;
  border-radius: 12px;
  background: var(--fr-grain), var(--fr-wood);
  box-shadow: 0 4px 0 #2a1507, inset 0 3px 0 rgba(255, 233, 190, 0.45), inset 0 -4px 0 rgba(60, 28, 6, 0.35);
}
body #friends-modal .friends-card-top > div:first-child::after{ display: none !important; }
body #friends-modal .friends-title{
  margin: 0 !important;
  color: #fff !important;
  font: 900 clamp(24px, 2.8vw, 36px)/1.05 Georgia, "Times New Roman", serif !important;
  letter-spacing: 0.02em !important;
  -webkit-text-stroke: 5px #0a1c3c;
  paint-order: stroke fill;
  text-shadow: 0 4px 0 rgba(6, 14, 34, 0.85) !important;
}
body #friends-modal .friends-close{
  position: absolute !important;
  z-index: 8 !important;
  top: -2px;
  right: -26px;
  width: 42px !important;
  height: 42px !important;
  min-height: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  border: 3px solid #fff !important;
  border-radius: 11px !important;
  background: linear-gradient(180deg, #ff6a5c 0%, #d3201a 52%, #a31410 100%) !important;
  box-shadow: 0 0 0 2px #4a1210, 0 4px 8px rgba(0, 0, 0, 0.5), inset 0 3px 0 rgba(255, 255, 255, 0.4) !important;
  color: #fff !important;
  font: 900 22px/1 Georgia, serif !important;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.6) !important;
  cursor: pointer;
  transition: transform 120ms ease, filter 120ms ease;
}
body #friends-modal .friends-close:hover{ transform: scale(1.08); filter: brightness(1.12); }
body #friends-modal .friends-close:active{ transform: scale(0.94); }

/* ---- search + Add ---- */
body #friends-modal .friends-search-row{ gap: 12px; align-items: stretch; }
body #friends-modal .friends-search-row input{
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 48px;
  padding: 0 16px 0 46px !important;
  border: 3px solid #4aa8ff !important;
  border-radius: 14px !important;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10' cy='10' r='6.5' fill='none' stroke='%238fd2ff' stroke-width='2.6'/%3E%3Cpath d='M15 15l6 6' stroke='%238fd2ff' stroke-width='2.8' stroke-linecap='round'/%3E%3C/svg%3E") 14px center / 22px 22px no-repeat,
    linear-gradient(180deg, #06193a, #0a2347) !important;
  box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.6) !important;
  color: #f4fbff !important;
  font: 800 15px Georgia, serif !important;
  outline: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
body #friends-modal .friends-search-row input::placeholder{ color: rgba(190, 226, 245, 0.55) !important; }
body #friends-modal .friends-search-row input:focus{ border-color: #8fd2ff !important; box-shadow: 0 0 10px rgba(80, 170, 255, 0.6), inset 0 3px 7px rgba(0, 0, 0, 0.6) !important; }
body #friends-modal #friends-add{
  min-height: 48px;
  padding: 0 24px 3px;
  border: 3px solid #0b2c5e !important;
  border-radius: 14px !important;
  background: var(--fr-btn) !important;
  box-shadow: 0 0 0 2px #061a38, 0 4px 0 2px #061a38, inset 0 3px 0 rgba(255, 255, 255, 0.45) !important;
  color: #fff !important;
  font: 900 16px/1 Georgia, serif !important;
  text-shadow: 0 2px 0 rgba(0, 20, 60, 0.85) !important;
  cursor: pointer;
  transition: filter 120ms ease, transform 120ms ease;
}
body #friends-modal #friends-add:hover{ filter: brightness(1.1); transform: translateY(-2px); }
body #friends-modal #friends-add:active{ filter: brightness(0.94); transform: translateY(2px); }
body #friends-modal #friends-status{ color: #cfe9ff !important; font-weight: 800; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.45); }

/* ---- list + rows ---- */
body #friends-modal .friends-list{ scrollbar-color: #2f93ff rgba(0, 0, 0, 0.25); scrollbar-width: thin; padding: 4px 8px 6px 2px; display: flex; flex-direction: column; gap: 12px; }
body #friends-modal .friend-row{
  grid-template-columns: 124px minmax(0, 1fr) auto;
  gap: 18px;
  padding: 12px 16px 12px 12px;
  border: 3px solid rgba(120, 190, 255, 0.5);
  border-radius: 18px;
  background: var(--fr-card);
  box-shadow: 0 4px 0 #061a38, inset 0 2px 0 rgba(255, 255, 255, 0.08);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
body #friends-modal .friend-row:hover{ border-color: #6fc4ff; transform: none; box-shadow: 0 4px 0 #061a38, 0 0 14px rgba(80, 170, 255, 0.4), inset 0 2px 0 rgba(255, 255, 255, 0.1); }
body #friends-modal .friend-row.is-empty{ grid-template-columns: 56px minmax(0, 1fr); border-style: dashed; }
body #friends-modal .friend-avatar{
  flex: 0 0 auto;
  border: 3px solid #4aa8ff;
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 40%, rgba(58, 160, 255, 0.25), transparent 72%),
    linear-gradient(180deg, #15264e, #0a1431);
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.45);
}
body #friends-modal .friend-avatar.is-online{ box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.45), 0 0 14px rgba(34, 197, 94, 0.35); }
body #friends-modal .friend-avatar-badge{ right: 6px; bottom: 6px; width: 16px; height: 16px; border: 3px solid #081a38; }
body #friends-modal .friend-meta{ gap: 6px; }
body #friends-modal .friend-name{ color: #fff; font: 900 clamp(18px, 1.8vw, 24px)/1.1 Georgia, serif; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.55); }
body #friends-modal .friend-status{ font: 900 clamp(13px, 1.2vw, 16px)/1.2 Georgia, serif; color: #aab8ca; }
body #friends-modal .friend-row:has(.friend-avatar.is-online) .friend-status{ color: #5dff8f; text-shadow: 0 2px 0 rgba(0, 40, 10, 0.6); }

/* ---- action buttons ---- */
body #friends-modal .friend-actions{ gap: 10px; flex-wrap: nowrap; }
body #friends-modal .friend-action{
  min-height: 46px;
  padding: 0 20px 3px;
  border: 3px solid #0b2c5e;
  border-radius: 13px;
  background: var(--fr-btn);
  box-shadow: 0 0 0 2px #061a38, 0 4px 0 2px #061a38, inset 0 3px 0 rgba(255, 255, 255, 0.45);
  color: #fff;
  font: 900 16px/1 Georgia, serif;
  letter-spacing: 0.01em;
  text-shadow: 0 2px 0 rgba(0, 20, 60, 0.85);
  transition: filter 120ms ease, transform 120ms ease;
}
body #friends-modal .friend-action-remove{
  border-color: #5a0f0c;
  background: linear-gradient(180deg, #ff6a5c 0%, #d3201a 52%, #a31410 100%);
  box-shadow: 0 0 0 2px #2f0907, 0 4px 0 2px #2f0907, inset 0 3px 0 rgba(255, 255, 255, 0.4);
  text-shadow: 0 2px 0 rgba(80, 8, 4, 0.85);
}
body #friends-modal .friend-action-pm{
  border-color: #2a0f5a;
  background: linear-gradient(180deg, #a06bff 0%, #7a3fe0 52%, #5a25b8 100%);
  box-shadow: 0 0 0 2px #170733, 0 4px 0 2px #170733, inset 0 3px 0 rgba(255, 255, 255, 0.4);
  text-shadow: 0 2px 0 rgba(30, 8, 80, 0.85);
}
body #friends-modal .friend-action:hover{ filter: brightness(1.12); transform: translateY(-2px); }
body #friends-modal .friend-action:active{ filter: brightness(0.94); transform: translateY(2px); }
body #friends-modal button:focus-visible{ outline: 3px solid #ffe27a; outline-offset: 2px; }

@media (max-width: 760px){
  body #friends-modal .friends-card{ margin-top: 30px; padding: 20px 12px 14px !important; }
  body #friends-modal .friends-card::after{ left: -8px; top: -8px; width: calc(100% + 16px); height: calc(100% + 16px); background-size: 38px 30px; }
  body #friends-modal .friends-close{ right: -8px; top: -16px; }
  body #friends-modal .friend-row{ grid-template-columns: 96px minmax(0, 1fr); gap: 12px; }
  body #friends-modal .friend-avatar{ transform: scale(0.77); transform-origin: top left; margin-bottom: -28px; }
  body #friends-modal .friend-actions{ grid-column: 1 / -1; justify-content: stretch; }
  body #friends-modal .friend-action{ flex: 1 1 0; padding: 0 8px 3px; }
}
@media (prefers-reduced-motion: reduce){
  body #friends-modal .friend-action, body #friends-modal #friends-add, body #friends-modal .friend-row{ transition: none; }
}