@font-face{font-family:"Cinzel";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/cinzel-latin-ext-8fc2606f.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Cinzel";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/cinzel-latin-09941fb1.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Cinzel";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/cinzel-latin-ext-8fc2606f.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Cinzel";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/cinzel-latin-09941fb1.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Cinzel Decorative";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/cinzel-decorative-latin-ext-3e593aee.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Cinzel Decorative";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/cinzel-decorative-latin-0826d61d.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Cinzel Decorative";font-style:normal;font-weight:900;font-display:swap;src:url(/fonts/cinzel-decorative-latin-ext-6ab3c105.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Cinzel Decorative";font-style:normal;font-weight:900;font-display:swap;src:url(/fonts/cinzel-decorative-latin-30318b42.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}


*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
  --ink:255 255 255;
  --page:0 0 0;
  --structure-bg:5 7 15;
}

html{-webkit-text-size-adjust:100%}

body{
  width:100%;min-height:100%;
  background:rgb(var(--page));
  font-family:"Cinzel",Georgia,serif;
  color:rgb(var(--ink));
}

/* The wall is a fixed, full-viewport composition and must not scroll. The
   structure page is an ordinary document and must. Scoping this to a body class
   is what lets the two live at real URLs instead of as tabs in one document. */
body.is-wall{height:100%;overflow:hidden}
body.is-doc{background:rgb(var(--structure-bg))}

/* Visible only to a screen reader. The wall's headings carry the page's
   structure but its guild names are visual, so the reader needs the words. */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* A visible focus ring, because every interactive thing here is a link over
   busy artwork and the browser default disappears against it. */
a:focus-visible,button:focus-visible{
  outline:2px solid rgb(var(--ink) / .8);
  outline-offset:3px;
}

/* ─── Nav ──────────────────────────────────────────────────────────────── */
/* These were <button onclick="switchTab(…)"> over two panes of one document.
   They are links to real pages now: shareable, indexable, usable with the
   middle mouse button, and — the reason it had to change — free of the inline
   handler that would have forced 'unsafe-inline' into the whole CSP. */
#nav-tabs{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;justify-content:center;gap:0;
  padding-top:14px;pointer-events:none;
}

.tab-btn{
  pointer-events:all;
  display:inline-block;
  font-family:"Cinzel",Georgia,serif;
  font-size:clamp(.52rem,.8vw,.68rem);
  letter-spacing:.3em;text-transform:uppercase;text-decoration:none;
  color:rgb(var(--ink) / .4);
  background:rgb(var(--page) / .55);
  border:1px solid rgb(var(--ink) / .1);
  border-bottom:none;
  padding:8px 28px;cursor:pointer;
  transition:color .25s,background .25s,border-color .25s;
  backdrop-filter:blur(8px);
}
.tab-btn:first-child{border-radius:4px 0 0 0}
.tab-btn:last-child{border-radius:0 4px 0 0}
.tab-btn[aria-current="page"]{
  color:rgb(var(--ink));
  background:rgb(var(--ink) / .08);
  border-color:rgb(var(--ink) / .25);
}
.tab-btn:hover:not([aria-current="page"]){
  color:rgb(var(--ink) / .75);
  background:rgb(var(--ink) / .05);
}

/* ─── The wall ─────────────────────────────────────────────────────────── */
#wall{display:flex;width:100vw;height:100vh}

.panel{
  position:relative;flex:1;overflow:hidden;
  transition:flex .65s cubic-bezier(.77,0,.18,1);
}

@media (hover:hover) and (pointer:fine){
  .panel:hover{flex:1.6}
  #wall:has(.panel:hover) .panel:not(:hover){flex:.8}
}
.panel.is-active{flex:1.6}
#wall:has(.panel.is-active) .panel:not(.is-active){flex:.8}

/* ⚠️ THE VERTICAL CROP ANCHOR IS "top" FOR EVERY PANEL AND IS NOT A PER-GUILD
   SETTING. object-fit cover scales to the panel's height at rest and to its
   width once the panel expands on hover, so the image only overflows
   vertically in the expanded state. A "center" anchor therefore does nothing
   at rest and then slides the picture up by half the overflow the instant you
   hover it. Only the horizontal half is authored, from focusX in guilds.js. */
.panel__img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center top;
  transition:transform .65s cubic-bezier(.77,0,.18,1),filter .65s ease;
  filter:brightness(.55) saturate(.8);
}
@media (hover:hover) and (pointer:fine){
  .panel:hover .panel__img{transform:scale(1.005);filter:brightness(.72) saturate(1.15)}
}
.panel.is-active .panel__img{transform:scale(1.005);filter:brightness(.72) saturate(1.15)}

.panel__tint{
  position:absolute;inset:0;opacity:.55;transition:opacity .5s;
  background:linear-gradient(180deg,rgb(var(--tint)) 0%,transparent 60%);
}
@media (hover:hover) and (pointer:fine){.panel:hover .panel__tint{opacity:.3}}
.panel.is-active .panel__tint{opacity:.3}

.panel__fog{
  position:absolute;bottom:0;left:0;right:0;height:55%;
  background:linear-gradient(to top,rgb(var(--page) / .95) 0%,transparent 100%);
  pointer-events:none;
}

.panel::after{
  content:'';position:absolute;top:0;right:0;width:1px;height:100%;
  background:linear-gradient(180deg,transparent,rgb(var(--ink) / .12) 40%,rgb(var(--ink) / .12) 60%,transparent);
  pointer-events:none;
}
.panel:last-child::after{display:none}

/* The whole panel is the website link. */
.panel__surface{position:absolute;inset:0;z-index:1;display:block}

/* ⚠️ THE CAPTION SITS ABOVE THE SURFACE LINK BUT LETS CLICKS THROUGH. Without
   pointer-events:none, the guild name and tagline would sit over the link and
   swallow clicks on the most obviously clickable-looking part of the panel.
   The button re-enables them for itself, so it can go somewhere different. */
.panel__content{
  position:absolute;bottom:0;left:0;right:0;
  z-index:2;pointer-events:none;
  padding:0 28px 42px;
  display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;
}
.panel__btn{pointer-events:auto}
.panel__center-btn{z-index:3}

.panel__name{
  font-family:"Cinzel Decorative",Georgia,serif;font-weight:700;
  font-size:clamp(1rem,2.2vw,1.6rem);letter-spacing:.12em;
  text-transform:uppercase;white-space:nowrap;
  color:rgb(var(--light));
  text-shadow:0 2px 20px rgb(var(--page) / .9);
  opacity:0;transform:translateY(12px);
  transition:opacity .4s .1s,transform .4s .1s;
}
@media (hover:hover) and (pointer:fine){
  .panel:hover .panel__name{opacity:1;transform:translateY(0)}
}
.panel.is-active .panel__name{opacity:1;transform:translateY(0)}

.panel__line{
  width:0;height:1px;background:rgb(var(--accent));
  transition:width .45s .2s ease;opacity:.5;
}
@media (hover:hover) and (pointer:fine){.panel:hover .panel__line{width:60px}}
.panel.is-active .panel__line{width:40px}

.panel__tag{
  font-size:clamp(.55rem,.9vw,.78rem);
  letter-spacing:.25em;text-transform:uppercase;
  color:rgb(var(--ink) / .6);
  opacity:0;transform:translateY(8px);
  transition:opacity .35s .2s,transform .35s .2s;
}
@media (hover:hover) and (pointer:fine){
  .panel:hover .panel__tag{opacity:1;transform:translateY(0)}
}
.panel.is-active .panel__tag{opacity:1;transform:translateY(0)}

.panel__btn{
  display:inline-block;margin-top:6px;padding:10px 28px;
  border:1px solid rgb(var(--ink) / .35);
  background:rgb(var(--ink) / .07);
  backdrop-filter:blur(6px);
  color:rgb(var(--ink));
  font-size:clamp(.6rem,.85vw,.75rem);letter-spacing:.3em;
  text-transform:uppercase;text-decoration:none;border-radius:2px;
  opacity:0;transform:translateY(10px);
  transition:opacity .35s .28s,transform .35s .28s,background .2s,border-color .2s,color .2s;
}
@media (hover:hover) and (pointer:fine){
  .panel:hover .panel__btn{opacity:1;transform:translateY(0)}
  .panel__btn:hover{border-color:rgb(var(--accent));color:rgb(var(--accent));background:rgb(var(--ink) / .18)}
}
.panel.is-active .panel__btn{opacity:1;transform:translateY(0)}
/* Keyboard users never fire :hover, so without this the only control on the
   wall is reachable by tab and invisible once reached. */
.panel__btn:focus-visible{opacity:1;transform:translateY(0)}
.panel:focus-within .panel__name,
.panel:focus-within .panel__tag,
.panel:focus-within .panel__btn{opacity:1;transform:translateY(0)}

.panel__side-label{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%) rotate(-90deg);
  font-family:"Cinzel Decorative",Georgia,serif;
  font-size:clamp(.65rem,1vw,.9rem);
  letter-spacing:.2em;text-transform:uppercase;
  color:rgb(var(--ink) / .45);
  white-space:nowrap;pointer-events:none;transition:opacity .3s;
}
@media (hover:hover) and (pointer:fine){
  #wall:has(.panel:hover) .panel:not(:hover) .panel__side-label{opacity:.15}
  .panel:hover .panel__side-label{opacity:0}
}
#wall:has(.panel.is-active) .panel:not(.is-active) .panel__side-label{opacity:.15}
.panel.is-active .panel__side-label{opacity:0}

#site-title{
  position:fixed;top:52px;left:50%;transform:translateX(-50%);
  z-index:10;text-align:center;pointer-events:none;
}
#site-title h1{
  font-family:"Cinzel Decorative",Georgia,serif;font-weight:900;
  font-size:clamp(1rem,2.5vw,1.8rem);letter-spacing:.3em;
  text-shadow:0 0 40px rgb(var(--ink) / .2);text-transform:uppercase;
}
#site-title p{
  font-size:clamp(.5rem,.85vw,.7rem);letter-spacing:.55em;
  color:rgb(var(--ink) / .35);margin-top:5px;text-transform:uppercase;
}

@keyframes panelIn{from{opacity:0;transform:scaleY(.94)}to{opacity:1;transform:scaleY(1)}}
.panel{animation:panelIn .9s cubic-bezier(.22,1,.36,1) both}
/* The per-panel stagger is generated from the guild count; see stagger(). */

@keyframes titleIn{
  from{opacity:0;transform:translateX(-50%) translateY(-10px)}
  to{opacity:1;transform:translateX(-50%) translateY(0)}
}
#site-title{animation:titleIn 1s .5s both}

/* ─── Structure ────────────────────────────────────────────────────────── */
#page-structure{position:relative;min-height:100vh}

#page-structure::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:
    radial-gradient(1px 1px at 10% 20%,rgb(var(--ink) / .3) 0%,transparent 100%),
    radial-gradient(1px 1px at 25% 60%,rgb(var(--ink) / .15) 0%,transparent 100%),
    radial-gradient(1px 1px at 40% 10%,rgb(var(--ink) / .25) 0%,transparent 100%),
    radial-gradient(1px 1px at 55% 75%,rgb(var(--ink) / .2) 0%,transparent 100%),
    radial-gradient(1px 1px at 70% 35%,rgb(var(--ink) / .3) 0%,transparent 100%),
    radial-gradient(1px 1px at 85% 55%,rgb(var(--ink) / .15) 0%,transparent 100%),
    radial-gradient(1px 1px at 15% 88%,rgb(var(--ink) / .2) 0%,transparent 100%),
    radial-gradient(1px 1px at 92% 12%,rgb(var(--ink) / .25) 0%,transparent 100%),
    radial-gradient(2px 2px at 33% 45%,rgb(var(--ink) / .12) 0%,transparent 100%),
    radial-gradient(2px 2px at 66% 80%,rgb(var(--ink) / .1) 0%,transparent 100%);
}

.structure-inner{
  position:relative;z-index:1;max-width:1280px;margin:0 auto;
  padding:80px 40px;
}

.structure-header{text-align:center;margin-bottom:64px}
.structure-header h1{
  font-family:"Cinzel Decorative",Georgia,serif;font-weight:900;
  font-size:clamp(1.4rem,3vw,2.4rem);letter-spacing:.25em;
  text-transform:uppercase;text-shadow:0 0 60px rgb(var(--ink) / .15);
}
.structure-header p{
  font-size:.68rem;letter-spacing:.45em;
  color:rgb(var(--ink) / .3);text-transform:uppercase;margin-top:10px;
}
.structure-header .header-line{
  width:80px;height:1px;margin:18px auto 0;
  background:linear-gradient(90deg,transparent,rgb(var(--ink) / .3),transparent);
}

.legend{
  display:flex;gap:24px;flex-wrap:wrap;justify-content:center;margin-bottom:40px;
  list-style:none;
}
.legend-item{
  display:flex;align-items:center;gap:8px;
  font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgb(var(--ink) / .45);
}
.legend-dot{width:8px;height:8px;border-radius:50%}

.guilds-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;list-style:none}
@media (max-width:900px){.guilds-grid{grid-template-columns:1fr}}

.guild-card{
  border-radius:8px;overflow:hidden;position:relative;
  border:1px solid rgb(var(--accent) / .2);
  transition:border-color .3s,transform .3s;
  animation:cardIn .7s cubic-bezier(.22,1,.36,1) both;
}
@keyframes cardIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
/* Generated too, for the same reason. */
.guild-card:hover{transform:translateY(-3px);border-color:rgb(var(--accent) / .45)}

.guild-card::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse 60% 30% at 50% 0%,rgb(var(--accent) / var(--glow)),transparent 70%);
}

.card-header{
  position:relative;z-index:1;padding:24px 28px 20px;
  display:flex;align-items:center;gap:16px;
  border-bottom:1px solid rgb(var(--ink) / .06);
}

.card-emblem{
  width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:1.3rem;flex-shrink:0;
  background:rgb(var(--accent) / var(--emblem-bg));
  border:1px solid rgb(var(--accent) / .3);
}

.card-title-block{flex:1}
.card-guild-name{
  font-family:"Cinzel Decorative",Georgia,serif;font-weight:700;
  font-size:clamp(.95rem,1.5vw,1.2rem);letter-spacing:.1em;
  text-transform:uppercase;color:rgb(var(--light));
}
.card-guild-name a{color:inherit;text-decoration:none}
.card-guild-name a:hover{text-decoration:underline;text-underline-offset:4px}
.card-guild-tag{
  font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;
  color:rgb(var(--ink) / .3);margin-top:3px;
}

.card-body{position:relative;z-index:1;padding:20px 28px 26px;display:flex;flex-direction:column;gap:10px}
.role-group{display:flex;flex-direction:column;gap:10px;list-style:none}

.role-row{
  display:flex;align-items:center;gap:12px;
  padding:9px 14px;border-radius:5px;transition:background .2s;
}
.role-row:hover{background:rgb(var(--ink) / .04)}

.role-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.role-name{font-size:.78rem;font-weight:600;letter-spacing:.05em;min-width:130px}
.role-title{font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:rgb(var(--ink) / .4)}
.role-badge{
  margin-left:auto;font-size:.55rem;letter-spacing:.2em;
  text-transform:uppercase;padding:3px 10px;border-radius:20px;
}

.card-divider{
  height:1px;margin:4px 0;
  background:linear-gradient(90deg,transparent,rgb(var(--ink) / .07),transparent);
}

.alliance-note{
  text-align:center;margin-top:40px;padding:22px 32px;
  border:1px solid rgb(var(--ink) / .07);border-radius:6px;
  background:rgb(var(--ink) / .02);backdrop-filter:blur(4px);
}
.alliance-note p{
  font-size:.65rem;letter-spacing:.3em;text-transform:uppercase;
  color:rgb(var(--ink) / .25);line-height:1.9;
}

/* ─── The editor ───────────────────────────────────────────────────────── */
.structure-inner--narrow{max-width:760px}

.flash{
  margin:0 0 22px;padding:13px 18px;border-radius:6px;
  font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;line-height:1.8;
}
/* The success green is a semantic colour and deliberately not a palette entry:
   a guild accent tinting it would turn "saved" into something else. */
.flash--ok{background:rgb(90 200 140 / .12);border:1px solid rgb(90 200 140 / .35);color:rgb(150 230 190)}
.flash--bad{background:rgb(230 90 90 / .12);border:1px solid rgb(230 90 90 / .35);color:rgb(245 165 165)}

.manage-meta{
  font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgb(var(--ink) / .35);margin:0 0 26px;line-height:1.9;
}

.manage-list{list-style:none;display:flex;flex-direction:column;gap:14px}
.manage-card{
  display:flex;align-items:center;gap:16px;padding:18px 20px;border-radius:8px;
  border:1px solid rgb(var(--accent) / .25);
  background:rgb(var(--accent) / .05);
}
.manage-card__text{flex:1;min-width:0}

.manage-empty{
  padding:26px 24px;border-radius:8px;
  border:1px solid rgb(var(--ink) / .1);background:rgb(var(--ink) / .02);
}
.manage-empty p{
  font-size:.66rem;letter-spacing:.14em;line-height:2;
  color:rgb(var(--ink) / .5);margin-bottom:12px;
}
.manage-empty p:last-child{margin-bottom:0}
.manage-empty strong{color:rgb(var(--ink) / .75);font-weight:600}
.manage-empty__action{margin-top:18px}

.manage-btn{
  display:inline-block;padding:10px 22px;border-radius:2px;text-decoration:none;
  border:1px solid rgb(var(--ink) / .35);background:rgb(var(--ink) / .08);
  color:rgb(var(--ink));font-family:"Cinzel",Georgia,serif;
  font-size:.6rem;letter-spacing:.25em;text-transform:uppercase;cursor:pointer;
  transition:background .2s,border-color .2s,opacity .2s;
}
.manage-btn:hover{background:rgb(var(--ink) / .18);border-color:rgb(var(--ink) / .6)}
.manage-btn--ghost{background:none}
.manage-btn:disabled{opacity:.3;cursor:not-allowed}

.manage-section{margin-bottom:34px}
.manage-section h2{
  font-family:"Cinzel Decorative",Georgia,serif;font-weight:700;
  font-size:.95rem;letter-spacing:.16em;text-transform:uppercase;
  margin-bottom:16px;color:rgb(var(--ink) / .85);
}

.field{display:block;margin-bottom:18px}
.field__label,.row-edit__label{
  display:block;font-size:.58rem;letter-spacing:.24em;text-transform:uppercase;
  color:rgb(var(--ink) / .45);margin-bottom:7px;
}
.field__hint{
  display:block;font-size:.58rem;letter-spacing:.12em;line-height:1.9;
  color:rgb(var(--ink) / .32);margin-top:7px;
}

input[type="text"],input[type="url"],select{
  width:100%;padding:11px 13px;border-radius:4px;
  border:1px solid rgb(var(--ink) / .18);
  background:rgb(var(--ink) / .04);
  color:rgb(var(--ink));
  font-family:"Cinzel",Georgia,serif;font-size:.8rem;
}
/* The native select control keeps the system palette for its own chrome, which
   on a dark form is a pale block with a pale arrow sitting next to two dark
   text inputs. Suppressing the appearance and drawing the arrow as a background
   image is what makes the three fields match. */
select{
  appearance:none;-webkit-appearance:none;
  padding-right:34px;
  background-image:linear-gradient(45deg,transparent 50%,rgb(255 255 255 / .45) 50%),
                   linear-gradient(135deg,rgb(255 255 255 / .45) 50%,transparent 50%);
  background-position:calc(100% - 18px) 51%,calc(100% - 13px) 51%;
  background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;
}
input:focus,select:focus{outline:none;border-color:rgb(var(--accent,255 255 255) / .7)}
/* The UA renders <option> against the system palette, so a dark background here
   with no colour set gives white-on-white text in several browsers. */
select option{background:rgb(var(--structure-bg));color:rgb(var(--ink))}

.rows{list-style:none;display:flex;flex-direction:column;gap:12px;margin-bottom:16px}
.row-edit{
  display:grid;grid-template-columns:30px 1fr 1fr 150px auto auto;gap:12px;align-items:end;
  padding:14px;border-radius:6px;
  border:1px solid rgb(var(--ink) / .08);background:rgb(var(--ink) / .02);
}
/* The row follows the pointer as a browser-drawn ghost, so the original is
   dimmed rather than hidden: removing it from the flow would make every other
   row jump the moment a drag started. */
.row-edit.is-dragging{opacity:.4;border-color:rgb(var(--accent,255 255 255) / .5)}

.row-edit__grip{
  display:flex;align-items:center;justify-content:center;
  padding-bottom:9px;cursor:grab;touch-action:none;
  color:rgb(var(--ink) / .3);
}
.row-edit__grip:active{cursor:grabbing}
.row-edit__grip::before{
  content:'';width:8px;height:14px;margin-right:6px;
  /* Two columns of dots, the conventional drag affordance. */
  background-image:radial-gradient(circle,rgb(var(--ink) / .45) 1px,transparent 1px);
  background-size:4px 4px;
}
.row-edit__num{font-size:.7rem;color:rgb(var(--ink) / .3)}

.row-edit__moves{display:flex;flex-direction:column;gap:3px;padding-bottom:4px}
.row-move{
  width:26px;height:20px;line-height:1;cursor:pointer;
  border:1px solid rgb(var(--ink) / .15);background:rgb(var(--ink) / .04);
  color:rgb(var(--ink) / .6);border-radius:3px;font-size:.7rem;
}
.row-move:hover:not(:disabled){background:rgb(var(--ink) / .14);color:rgb(var(--ink))}
.row-move:disabled{opacity:.2;cursor:not-allowed}
.row-edit__field{min-width:0}
.row-remove{
  padding:11px 14px;border-radius:4px;cursor:pointer;
  border:1px solid rgb(230 90 90 / .3);background:rgb(230 90 90 / .08);
  color:rgb(245 165 165);font-family:"Cinzel",Georgia,serif;
  font-size:.55rem;letter-spacing:.18em;text-transform:uppercase;
}
.row-remove:hover:not(:disabled){background:rgb(230 90 90 / .2)}
.row-remove:disabled{opacity:.25;cursor:not-allowed}

.manage-actions{display:flex;gap:12px;align-items:center;margin-top:8px}

.manage-foot{
  margin-top:34px;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgb(var(--ink) / .3);text-align:center;
}
.manage-foot a{color:rgb(var(--ink) / .5)}

/* The row grid needs five columns of room. Below that it stacks, or the name
   field ends up about forty pixels wide. */
@media (max-width:720px){
  .row-edit{grid-template-columns:1fr;gap:10px}
  .row-remove{justify-self:start}
  /* Stacked, the grip has no column of its own to sit in and dragging a row
     past several full-height rows is miserable on a phone anyway. The arrows
     are the control here. */
  .row-edit__grip{display:none}
  .row-edit__moves{flex-direction:row;padding-bottom:0}
  .row-move{width:40px;height:30px}
  .manage-card{flex-wrap:wrap}
}

/* ─── Error pages ──────────────────────────────────────────────────────── */
.oops{
  min-height:100vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;padding:40px 24px;text-align:center;
}
.oops h1{
  font-family:"Cinzel Decorative",Georgia,serif;font-weight:900;
  font-size:clamp(1.6rem,4vw,2.6rem);letter-spacing:.25em;text-transform:uppercase;
}
.oops p{font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:rgb(var(--ink) / .4);line-height:2}
.oops a{
  margin-top:10px;padding:10px 28px;text-decoration:none;
  border:1px solid rgb(var(--ink) / .35);background:rgb(var(--ink) / .07);
  color:rgb(var(--ink));font-size:.65rem;letter-spacing:.3em;
  text-transform:uppercase;border-radius:2px;transition:background .2s,border-color .2s;
}
.oops a:hover{background:rgb(var(--ink) / .18);border-color:rgb(var(--ink) / .65)}

/* ─── Narrow screens ───────────────────────────────────────────────────── */
@media (max-width:600px){
  .structure-inner{padding:60px 16px}
  .guilds-grid{gap:16px}
  .card-header{padding:18px 18px 16px}
  .card-body{padding:14px 18px 20px}
  .role-name{min-width:100px}
  .role-badge{display:none}
  .legend{gap:14px}
  .tab-btn{padding:7px 16px;font-size:.5rem;letter-spacing:.18em}
}

/* On a touch device the wall's hover affordances never fire, so the first tap
   opens a panel and the button it reveals is placed where a thumb already is
   rather than at the very bottom of the screen. */
.panel__center-btn{display:none}
@media (hover:none) and (max-width:600px){
  .panel__center-btn{
    display:block;position:absolute;top:50%;left:50%;
    transform:translate(-50%,-50%) translateY(10px);z-index:5;
    padding:14px 32px;
    border:1px solid rgb(var(--accent));
    background:rgb(var(--page) / .45);backdrop-filter:blur(6px);
    color:rgb(var(--light));
    font-size:.72rem;letter-spacing:.25em;text-transform:uppercase;
    text-decoration:none;border-radius:2px;white-space:nowrap;
    opacity:0;pointer-events:none;
    transition:opacity .35s .2s,transform .35s .2s;
  }
  .panel.is-active .panel__center-btn{
    opacity:1;pointer-events:auto;transform:translate(-50%,-50%) translateY(0);
  }
  .panel__btn{display:none}
}

/* ⚠️ REDUCED MOTION SUPPRESSES THE MOTION, NEVER THE CONTENT. The wall's
   panel copy sits at opacity:0 until it is hovered, so switching the
   transitions off without also settling the animations would leave a visitor
   who asked for less motion looking at four unlabelled photographs. Animations
   are collapsed to their end state; the hover reveal still happens, instantly
   rather than over .4s. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

.g-ravens{--accent:167 139 250;--light:196 181 253;--tint:26 10 46;--glow:0.12;--emblem-bg:0.15;}.guild-card.g-ravens{background:linear-gradient(135deg,rgb(13 6 24) 0%,rgb(22 8 32) 50%,rgb(10 4 18) 100%)}.panel.g-ravens .panel__img{object-position:center top}
.g-solaris{--accent:251 191 36;--light:253 230 138;--tint:46 22 0;--glow:0.1;--emblem-bg:0.12;}.guild-card.g-solaris{background:linear-gradient(135deg,rgb(20 10 0) 0%,rgb(34 18 0) 50%,rgb(18 9 0) 100%)}.panel.g-solaris .panel__img{object-position:center top}
.g-vanaheim{--accent:110 231 183;--light:167 243 208;--tint:6 18 9;--glow:0.1;--emblem-bg:0.1;}.guild-card.g-vanaheim{background:linear-gradient(135deg,rgb(2 15 5) 0%,rgb(7 20 9) 50%,rgb(3 12 5) 100%)}.panel.g-vanaheim .panel__img{object-position:center top}
.g-storm{--accent:147 197 253;--light:186 230 253;--tint:6 8 15;--glow:0.1;--emblem-bg:0.1;}.guild-card.g-storm{background:linear-gradient(135deg,rgb(4 6 16) 0%,rgb(8 12 26) 50%,rgb(3 5 8) 100%)}.panel.g-storm .panel__img{object-position:center top}
.dot-leader{background:rgb(168 85 247);box-shadow:0 0 6px rgb(168 85 247 / 0.6);}
.badge-leader{background:rgb(168 85 247 / 0.2);color:rgb(192 132 252);border:1px solid rgb(168 85 247 / .3)}
.dot-alrep{background:rgb(34 197 94);box-shadow:0 0 6px rgb(34 197 94 / 0.5);}
.badge-alrep{background:rgb(34 197 94 / 0.15);color:rgb(134 239 172);border:1px solid rgb(34 197 94 / .3)}
.dot-helper{background:rgb(249 115 22);box-shadow:0 0 6px rgb(249 115 22 / 0.5);}
.badge-helper{background:rgb(249 115 22 / 0.15);color:rgb(253 186 116);border:1px solid rgb(249 115 22 / .3)}
.dot-bot{background:rgb(59 130 246);box-shadow:0 0 6px rgb(59 130 246 / 0.5);}
.badge-bot{background:rgb(59 130 246 / 0.15);color:rgb(147 197 253);border:1px solid rgb(59 130 246 / .3)}
.dot-member{background:rgb(107 114 128);}
.badge-member{background:rgb(107 114 128 / 0.15);color:rgb(156 163 175);border:1px solid rgb(107 114 128 / .3)}
.panel:nth-child(1){animation-delay:0.05s}
.panel:nth-child(2){animation-delay:0.15s}
.panel:nth-child(3){animation-delay:0.25s}
.panel:nth-child(4){animation-delay:0.35s}
.guild-card:nth-child(1){animation-delay:0.1s}
.guild-card:nth-child(2){animation-delay:0.2s}
.guild-card:nth-child(3){animation-delay:0.3s}
.guild-card:nth-child(4){animation-delay:0.4s}