/* Project Hoof — /roots/ page. The Roots of War battle plan: war-table map
   with capture-point pins, docked garrison detail, full point list.
   Body background + shared hero header come from body.subpage in base.css. */

.roots-main {
  position: relative; z-index: 2;
  padding: 88px 24px 64px;
  max-width: 1280px; margin: 0 auto;
}

/* ----- Gate ----- */
.roots-gate {
  text-align: center;
  max-width: 540px; margin: 60px auto;
  padding: 70px 28px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  border: 1px solid rgba(201,162,74,.25);
  border-radius: 14px;
}
.roots-gate h1 {
  font-family: 'Cinzel Decorative', serif;
  font-size: 2rem; margin: 0 0 12px;
  color: #f2cc6a;
}
.roots-gate p {
  font-family: 'EB Garamond', serif;
  font-style: italic; color: #b3a98b;
  margin: 0 0 22px;
  font-size: 1.1rem;
}

/* ----- Event bar under the hero ----- */
.roots-eventbar {
  margin-top: 16px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 18px;
}
.roots-event-title {
  font-family: 'Cinzel', serif; font-weight: 700; letter-spacing: .06em;
  color: #f2cc6a; font-size: 1rem;
  padding: 7px 16px; border: 1px solid rgba(242,204,106,.4); border-radius: 999px;
  background: rgba(242,204,106,.07);
}
.roots-window { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 5px; }
.roots-window-h {
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: #9c8f72; margin-right: 4px;
}
.roots-window-chip {
  font-size: .74rem; font-weight: 700; color: #cfe2ff;
  padding: 4px 8px; border-radius: 7px;
  background: rgba(120,180,255,.14); border: 1px solid rgba(120,180,255,.5);
}

/* ----- Your orders ----- */
.roots-my {
  max-width: 860px; margin: 0 auto 26px;
  padding: 14px 18px 16px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(201,162,74,.08), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01));
  border: 1px solid rgba(242,204,106,.35);
  border-radius: 14px;
}
.roots-my-h {
  font-family: 'Cinzel', serif; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  font-size: .78rem; color: #f2cc6a; margin-bottom: 10px; text-align: center;
}
.roots-my-none {
  margin: 0; text-align: center;
  font-family: 'EB Garamond', serif; font-style: italic; color: #b3a98b; font-size: 1rem;
}
.roots-my-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.roots-my-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 13px 7px 9px; border-radius: 999px; cursor: pointer;
  background: rgba(8,14,28,.55); border: 1px solid rgba(201,162,74,.35);
  color: #e8dcc0; transition: border-color .12s, background .12s;
}
.roots-my-chip:hover { border-color: rgba(242,204,106,.75); background: rgba(242,204,106,.08); }
.roots-my-glyph { width: 18px; height: 21px; flex: 0 0 auto; }
.roots-my-role {
  font-size: .64rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 6px;
}
.roots-my-hold .roots-my-role, .roots-det-mine.roots-my-hold { background: rgba(242,204,106,.9); color: #1a1206; }
.roots-my-help .roots-my-role, .roots-det-mine.roots-my-help { background: rgba(120,180,255,.9); color: #07142a; }
.roots-my-name { font-size: .88rem; font-weight: 600; }

/* ----- War table: the floating island (game render, native alpha) ----- */
.roots-map-layout { display: flex; justify-content: center; }
.roots-map {
  position: relative; flex: 0 1 1180px; min-width: 0; max-width: 1180px;
  user-select: none;
  filter: drop-shadow(0 26px 40px rgba(0,0,0,.55));
}
.roots-map-img { display: block; width: 100%; height: auto; pointer-events: none; }
.roots-map-hint {
  text-align: center; margin: 10px 0 6px;
  font-family: 'EB Garamond', serif; font-style: italic; color: #9c8f72; font-size: .95rem;
}

/* Pins — tinted game minimap glyphs anchored at their bottom tip */
.roots-pin {
  position: absolute; width: 44px; height: 50px; transform: translate(-50%, -100%);
  cursor: pointer;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.65));
}
.roots-pin:hover { z-index: 6; }
.roots-pin.is-sel { z-index: 7; filter: drop-shadow(0 0 7px rgba(158,197,255,.9)) drop-shadow(0 2px 4px rgba(0,0,0,.6)); }
.roots-glyph {
  display: block;
  -webkit-mask: var(--glyph) no-repeat center / contain; mask: var(--glyph) no-repeat center / contain;
  background: linear-gradient(180deg, #d7dbe4, #8b8f98);
}
.roots-pin .roots-glyph { width: 100%; height: 100%; }
.roots-glyph-outpost   { --glyph: url(/items/roots/ic-outpost.png); }
.roots-glyph-tree_war  { --glyph: url(/items/roots/ic-tree_war.png); }
.roots-glyph-tree_life { --glyph: url(/items/roots/ic-tree_life.png); }
.roots-glyph-stone     { --glyph: url(/items/roots/ic-stone.png); }
.roots-glyph-hall      { --glyph: url(/items/roots/ic-hall.png); }
.roots-glyph-pool      { --glyph: url(/items/roots/ic-pool.png); }
.roots-glyph-portal    { --glyph: url(/items/roots/ic-portal.png); }
.roots-pin.is-manned .roots-glyph { background: linear-gradient(180deg, #ffe9a8, #f2cc6a 55%, #c9a24a); }
.roots-pin.is-sel .roots-glyph    { background: linear-gradient(180deg, #e6f4ff, #9ec5ff 55%, #6ea8ff); }
.roots-pin.is-mine .roots-glyph   { background: linear-gradient(180deg, #d9fbff, #7de3f2 55%, #38b6d8); }
.roots-pin.is-mine::after {
  content: ''; position: absolute; left: 50%; top: 100%;
  width: 26px; height: 10px; transform: translate(-50%, -4px);
  border-radius: 50%; border: 2px solid rgba(125,227,242,.75);
  animation: roots-pulse 1.8s ease-out infinite;
  pointer-events: none;
}
@keyframes roots-pulse {
  0%   { opacity: .9; transform: translate(-50%, -4px) scale(.7); }
  70%  { opacity: 0;  transform: translate(-50%, -4px) scale(1.5); }
  100% { opacity: 0;  transform: translate(-50%, -4px) scale(1.5); }
}
.roots-pin-num {
  position: absolute; top: -8px; right: -11px; min-width: 19px; height: 19px; padding: 0 4px;
  border-radius: 10px; background: #10192e; border: 1px solid rgba(242,204,106,.7);
  color: #f2cc6a; font-family: 'Cinzel', serif; font-weight: 700; font-size: .7rem;
  line-height: 17px; text-align: center;
}
.roots-pin-crew {
  position: absolute; top: calc(100% + 1px); left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 2px; white-space: nowrap;
}
.roots-avatar {
  width: 20px; height: 20px; border-radius: 50%; object-fit: cover; flex: 0 0 auto;
  border: 1px solid rgba(242,204,106,.75); background: #0a1326;
}
.roots-avatar-empty {
  display: inline-flex; align-items: center; justify-content: center;
  color: #cdbf9c; font-size: .62rem; font-weight: 700;
}
.roots-pin-avatar { width: 18px; height: 18px; }
.roots-pin-plus {
  font-size: .6rem; font-weight: 800; color: #0a1326; background: rgba(242,204,106,.92);
  border-radius: 7px; padding: 1px 4px;
}

/* Hover tooltip (quick look) */
.roots-tip {
  position: absolute; z-index: 12; pointer-events: none;
  transform: translate(-50%, calc(-100% - 50px));
  min-width: 150px; max-width: 220px; padding: 8px 10px;
  background: rgba(10,17,33,.96); border: 1px solid rgba(242,204,106,.45); border-radius: 10px;
  box-shadow: 0 10px 26px rgba(0,0,0,.55);
}
.roots-tip.is-below { transform: translate(-50%, 14px); }
.roots-tip-name { font-family: 'Cinzel', serif; font-weight: 700; font-size: .82rem; color: #f4ecd8; margin-bottom: 5px; }
.roots-tip-row { display: flex; align-items: center; gap: 6px; font-size: .82rem; color: #e8dcc0; }
.roots-tip-row .roots-avatar { width: 18px; height: 18px; }
.roots-tip-empty { font-size: .8rem; font-style: italic; color: #9c8f72; }
.roots-tip-helpers { margin-top: 4px; font-size: .74rem; color: #9ec5ff; }

/* Legend */
.roots-legend {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px;
  margin: 4px 0 34px;
}
.roots-legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: .76rem; color: #9c8f72; }
.roots-legend-glyph { width: 14px; height: 16px; flex: 0 0 auto; }

/* Point card — popover anchored above the clicked pin */
.roots-pop[hidden] { display: none; }
.roots-pop {
  position: absolute; z-index: 15;
  width: 280px; max-width: calc(100% - 12px);
  transform: translateX(-50%);
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 9px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(201,162,74,.08), transparent 70%),
    rgba(10,17,33,.97);
  border: 1px solid rgba(242,204,106,.45); border-radius: 13px;
  box-shadow: 0 16px 38px rgba(0,0,0,.6);
}
.roots-det-head { display: flex; align-items: center; gap: 10px; }
.roots-det-glyph { width: 30px; height: 34px; flex: 0 0 auto;
  background: linear-gradient(180deg, #ffe9a8, #f2cc6a 55%, #c9a24a); }
.roots-det-title { flex: 1; min-width: 0; }
.roots-det-name { font-family: 'Cinzel', serif; font-weight: 700; color: #f4ecd8; font-size: .98rem; }
.roots-det-sub { font-size: .72rem; color: #9c8f72; }
.roots-det-close {
  cursor: pointer; width: 26px; height: 26px; border-radius: 8px; flex: 0 0 auto;
  background: none; border: 1px solid rgba(201,162,74,.3); color: #9c8f72; font-size: 1rem; line-height: 1;
}
.roots-det-close:hover { color: #f2cc6a; border-color: rgba(242,204,106,.6); }
.roots-det-mine {
  align-self: flex-start; flex: 0 0 auto;
  font-size: .64rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 6px;
}
.roots-det-h {
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: #9c8f72;
  margin-top: 2px;
}
.roots-det-empty { font-size: .86rem; font-style: italic; color: #9c8f72; }
.roots-det-helpers { display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow: auto; }
.roots-det-note {
  margin: 0; font-family: 'EB Garamond', serif; font-style: italic;
  color: #cdbf9c; font-size: .95rem;
  border-left: 2px solid rgba(242,204,106,.5); padding-left: 10px;
}

/* One person line (holder / helper) */
.roots-person {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 8px; border-radius: 9px;
  background: rgba(4,8,18,.5); border: 1px solid rgba(201,162,74,.18);
}
.roots-person-holder { border-color: rgba(242,204,106,.5); background: rgba(242,204,106,.08); }
.roots-person.is-you { outline: 1px solid rgba(125,227,242,.6); }
.roots-person-name {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: .86rem; font-weight: 600; color: #e8dcc0;
}
.roots-person-pow { font-size: .74rem; color: #9ec5ff; white-space: nowrap; }
.roots-badge {
  flex: 0 0 auto; width: 16px; height: 16px; border-radius: 5px; font-size: .62rem; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
}
.roots-badge-main { background: rgba(242,204,106,.9); color: #1a1206; }
.roots-badge-sub  { background: rgba(120,180,255,.9); color: #07142a; }
.roots-crests { display: inline-flex; gap: 2px; flex: 0 0 auto; }
.roots-crest { width: 14px; height: 14px; object-fit: contain; opacity: .85; }

/* ----- Full point list ----- */
.roots-grid-section { margin-top: 8px; }
.roots-grid-h {
  font-family: 'Cinzel', serif; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  font-size: 1rem; color: #f4ecd8; text-align: center; margin: 0 0 18px;
}
.roots-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.roots-card {
  display: flex; flex-direction: column; gap: 8px;
  padding: 13px 15px; border-radius: 13px; cursor: pointer;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(201,162,74,.05), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01));
  border: 1px solid rgba(201,162,74,.22);
  transition: border-color .12s, transform .12s;
}
.roots-card:hover { border-color: rgba(242,204,106,.55); transform: translateY(-2px); }
.roots-card.is-mine { border-color: rgba(125,227,242,.55); box-shadow: inset 0 0 0 1px rgba(125,227,242,.25); }
.roots-card.is-sel { border-color: rgba(158,197,255,.75); }
.roots-card-head { display: flex; align-items: center; gap: 10px; }
.roots-card-glyph { width: 24px; height: 27px; flex: 0 0 auto; }
.roots-card-glyph.is-manned { background: linear-gradient(180deg, #ffe9a8, #f2cc6a 55%, #c9a24a); }
.roots-card-title { flex: 1; min-width: 0; }
.roots-card-name { font-family: 'Cinzel', serif; font-weight: 700; color: #f4ecd8; font-size: .92rem; }
.roots-card-sub { font-size: .7rem; color: #9c8f72; }
.roots-card-helpers { display: flex; flex-direction: column; gap: 4px; }
.roots-empty {
  text-align: center; font-family: 'EB Garamond', serif; font-style: italic;
  color: #9c8f72; font-size: 1.05rem; margin: 30px 0;
}

/* ----- Responsive ----- */
@media (max-width: 640px) {
  .roots-main { padding: 76px 14px 48px; }
  .roots-pin { width: 30px; height: 34px; }
  .roots-pin-avatar { width: 15px; height: 15px; }
  .roots-pin-num { top: -6px; right: -8px; min-width: 15px; height: 15px; font-size: .58rem; line-height: 13px; }
  .roots-grid { grid-template-columns: 1fr; }
}