@font-face {
  font-family: Explora;
  src: url("Explora.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: Roboto;
  src: url("Roboto.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: Roboto;
  src: url("Roboto-Italic.ttf") format("truetype");
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
}
:root {
  color-scheme: dark;
  font-family: Roboto, sans-serif;
  color: #f4ece2;
  background: #161518;
  --muted: #c7b9ad;
  --gold: #f7ca8c;
  --border: #574436;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0;
  min-height: 100vh;
  cursor: default;
  background: radial-gradient(ellipse at 82% 0%, #3b2922, transparent 62%);
}
.wrap { width: min(100% - 2rem, 86rem); margin-inline: auto; }
.masthead { border-bottom: 1px solid var(--border); font-weight: 650; }
.masthead .wrap { padding-block: 1rem; }
.masthead span { color: var(--gold); margin-right: .4rem; }
main { padding-block: clamp(2rem, 7vw, 4.5rem); }
h1 { font: 600 clamp(2.65rem, 7vw, 4.5rem)/1 Roboto, sans-serif; margin: 0; }
.intro { color: var(--muted); margin: 1rem 0 2.5rem; }
.legions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
fieldset, .planner-panel {
  min-width: 0;
  margin: 0;
  padding: 1.25rem;
  border: 1px solid var(--border);
  border-radius: .8rem;
  background: #211c1d;
}
legend { padding-inline: .5rem; color: var(--gold); font-weight: 700; }
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
label { display: grid; gap: .45rem; font-size: .9rem; color: var(--muted); }
input {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: .4rem;
  padding: .65rem .55rem;
  background: #171518;
  color: inherit;
  font: inherit;
}
a { color: var(--gold); text-underline-offset: .2em; }
a[href], summary, [role="button"], input:is([type="submit"], [type="button"], [type="reset"]):enabled { cursor: pointer; }
textarea:not([readonly], :disabled),
input:not([readonly], :disabled):is(:not([type]), [type="text"], [type="password"], [type="search"], [type="email"], [type="url"], [type="tel"], [type="number"]),
[contenteditable]:not([contenteditable="false"]) { cursor: text; }
.planner-link, .back { display: inline-block; }
.planner-link { margin-top: 1.1rem; }
.back { margin-bottom: 1.4rem; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin-top: 1.5rem; }
button {
  background: var(--gold);
  color: #291b12;
  border: 0;
  border-radius: .45rem;
  padding: .7rem 1rem;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
#save-status, .planner-panel p { color: var(--muted); margin: 0; }
.planner-panel h2 { margin: 0 0 .6rem; font-size: 1.2rem; }
@media (max-width: 46rem) { .legions { grid-template-columns: 1fr; } }
@media (max-width: 23rem) { .fields { grid-template-columns: 1fr; } }

#roster-summary, #roster-message, #ocr-local-help { margin-top: 1rem; }
#roster-upload { max-width: 100%; }
.roster-table { overflow-x: auto; margin-top: 1rem; }
.roster-table table { width: 100%; min-width: 38rem; border-collapse: collapse; }
.roster-table th, .roster-table td { text-align: left; padding: .55rem; border-bottom: 1px solid var(--border); }
.roster-table td:first-child { min-width: 10rem; }
.roster-table td:nth-child(2) { width: 8rem; }
.roster-table td:nth-child(4) { color: var(--muted); font-size: .9rem; min-width: 9rem; }
.roster-table select { padding: .55rem; border: 1px solid var(--border); border-radius: .4rem; font: inherit; }
.roster-table button, #roster-add { background: transparent; color: var(--gold); border: 1px solid var(--border); }
button:disabled { opacity: .55; cursor: default; }


.brand { text-decoration: none; color: inherit; }
.masthead-inner, .masthead nav { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem 1.25rem; }
.masthead-inner { justify-content: space-between; }
.masthead nav a { text-decoration: none; padding-block: .25rem; }
.masthead nav a[aria-current] { text-decoration: underline; }
.home-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 2rem; }
.home-grid article > a { display: inline-block; margin-top: .85rem; }

.chat-launcher { position: fixed; right: 1rem; bottom: 1rem; padding: .65rem .9rem; background: #2a201c; border: 1px solid var(--border); border-radius: 1.3rem; text-decoration: none; }
main.wrap { padding-bottom: max(4.5rem, env(safe-area-inset-bottom)); }
@media (max-width: 46rem) { .home-grid { grid-template-columns: 1fr; } }


#assignment-panel { margin-top: 1rem; }
#assignment-panel fieldset { margin-top: 1rem; }
#assignment-message { margin-top: .9rem; }
.building-choice, .assignment-team li { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; justify-content: space-between; }
.building-choice + .building-choice { margin-top: .65rem; }
.building-choice label { display: flex; align-items: center; }
.building-choice input { width: auto; accent-color: var(--gold); }
#assignment-panel select { max-width: 100%; padding: .45rem; font: inherit; }
.assignment-team { padding: .9rem 0; border-bottom: 1px solid var(--border); }
.assignment-team h3 { margin: 0 0 .35rem; }
.assignment-team ul { padding: 0; list-style: none; }
.assignment-team li + li { margin-top: .4rem; }

#noticeboard-entries { list-style: none; padding: 0; margin: 0; }
#noticeboard-entries li + li { border-top: 1px solid var(--border); margin-top: 1rem; padding-top: 1rem; }
#noticeboard-entries p { margin: .35rem 0; }
.published-team + .published-team { margin-top: 1rem; }
.published-team ul { padding-left: 1.2rem; margin-bottom: 0; }


.tri-panel { margin-top: 1.5rem; }
.tri-status { margin-top: 1rem; }
.tri-teams select { max-width: 100%; padding: .45rem; font: inherit; }

.tri-legion-nav { display: flex; gap: 1rem; margin-top: 1.5rem; }
.tri-legion-nav [aria-current] { font-weight: 700; }
.account-panel { margin-top: 1.25rem; }
.account-auth { max-width: 28rem; }
.account-auth label + label { margin-top: .85rem; }
.account-panel select, .account-actions select {
  padding: .6rem;
  border: 1px solid var(--border);
  border-radius: .4rem;
  font: inherit;
}
.account-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.account-panel p[role="status"]:not(:empty), #reset-status:not(:empty) { margin-top: .85rem; }
#reset-access { width: min(calc(100% - 2rem), 30rem); }
#reset-access::backdrop { background: rgb(0 0 0 / .65); }
.profile-identity { display: flex; align-items: center; gap: .9rem; margin-top: 1.25rem; }
.profile-identity p { color: var(--muted); margin: 0; overflow-wrap: anywhere; }
.profile-avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: #2a201c;
  color: var(--gold);
  font-size: 1.25rem;
  font-weight: 700;
}
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
#avatar-file { max-width: 28rem; }
#avatar-help { margin-top: .55rem; font-size: .9rem; }
.chat-launcher, .chat-panel { z-index: 2; }
.chat-launcher { color: var(--gold); }
.chat-panel {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  width: min(25rem, calc(100vw - 2rem));
  height: min(32rem, calc(100dvh - 2rem));
  border: 1px solid var(--border);
  border-radius: .85rem;
  background: #211c1d;
  box-shadow: 0 .6rem 2.5rem #0008;
}
.chat-header, .chat-compose { display: flex; align-items: center; gap: .6rem; }
.chat-header { justify-content: space-between; padding: .65rem .8rem .5rem; }
.chat-header h2 { font-size: 1.13rem; margin: 0; }
.chat-icon { background: transparent; color: var(--gold); font-size: 1.2rem; padding: .35rem .55rem; }
.chat-presence { border-block: 1px solid var(--border); }
.chat-presence summary { padding: .55rem .8rem; cursor: pointer; color: var(--muted); font-size: .875rem; }
.chat-dot { display: inline-block; width: .48rem; height: .48rem; border-radius: 50%; background: #8ad7a5; }
#chat-online { list-style: none; padding: 0 .8rem .55rem; margin: 0; overflow: auto; max-height: min(7rem, 20dvh); }
#chat-online li { display: flex; align-items: center; gap: .5rem; padding-block: .2rem; font-size: .88rem; }
.chat-history { position: relative; overflow: auto; padding: .75rem .8rem; }
#chat-empty { color: var(--muted); }
#chat-messages { list-style: none; padding: 0; margin: 0; }
#chat-messages li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .55rem; margin-bottom: .85rem; }
#chat-messages p { margin: .2rem 0 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.chat-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .55rem; }
.chat-meta time { color: var(--muted); font-size: .74rem; }
.chat-avatar {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 2rem;
  height: 2rem;
  overflow: hidden;
  border-radius: 50%;
  background: #382822;
  color: var(--gold);
  font-size: .72rem;
  font-weight: 700;
}
.chat-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#chat-online .chat-avatar { width: 1.4rem; height: 1.4rem; font-size: .58rem; }
.chat-status { margin: 0; padding: 0 .8rem; color: var(--gold); font-size: .85rem; }
#chat-form { border-top: 1px solid var(--border); padding: .65rem; }
.chat-compose input { flex: 1; }
.chat-emoji { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: .15rem; margin-bottom: .4rem; max-height: min(9rem, 25dvh); overflow-y: auto; }
.chat-emoji button { background: transparent; color: inherit; font-size: 1.15rem; padding: .3rem 0; }
.chat-emoji button:hover, .chat-icon:hover { background: #382822; }
.chat-context {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .4rem;
  padding-left: .55rem;
  margin-bottom: .4rem;
  border-left: 2px solid var(--gold);
  color: var(--muted);
  font-size: .8rem;
}
.chat-context > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-context .chat-icon { flex: none; padding-block: .15rem; }
.chat-reply-button { color: var(--gold); background: transparent; font-size: .75rem; padding: .12rem .2rem; }
.chat-quote { margin: .25rem 0; padding: .2rem .5rem; border-left: 2px solid var(--border); color: var(--muted); overflow-wrap: anywhere; font-size: .83rem; }
.chat-quote strong { display: block; }
.chat-file-link { display: block; margin-top: .25rem; overflow-wrap: anywhere; font-size: .86rem; }
.chat-tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .45rem; max-height: min(7rem, 20dvh); overflow: auto; }
.chat-tags button { background: #382822; color: var(--gold); padding: .25rem .4rem; font-size: .8rem; overflow-wrap: anywhere; }
.chat-tag { color: var(--gold); font-weight: 700; }
.chat-tag-self { background: #523b29; border-radius: .2rem; }
.chat-compose { gap: .35rem; }
#chat-attach { padding-inline: .35rem; }
.chat-launcher, .chat-header-actions { display: flex; align-items: center; gap: .35rem; }
.chat-header-actions { margin-left: auto; }
.chat-badge {
  flex: none;
  border: 1px solid #88643d;
  border-radius: 1rem;
  padding: .15rem .45rem;
  background: #473222;
  color: #ffdaaa;
  font-size: .72rem;
  white-space: nowrap;
}
.chat-mention-badge { background: #622e43; color: #ffe2ec; border-color: #ad617e; }
.chat-first-unread::before {
  content: "New messages";
  grid-column: 1 / -1;
  border-top: 1px solid #88643d;
  padding-top: .35rem;
  color: var(--gold);
  font-size: .75rem;
}
#chat-messages .chat-jump-target { outline: 1px solid var(--gold); outline-offset: 3px; border-radius: .25rem; }
.chat-quote { display: block; width: 100%; background: #2a2020; text-align: left; font-weight: 400; border-radius: .15rem; }
.chat-quote:hover:not(:disabled) { background: #382822; color: var(--gold); }
.chat-quote:disabled { opacity: .75; }
#chat-attach svg { display: block; }
body {
  background:
    radial-gradient(ellipse at 0 0, #432136 0, transparent 43rem),
    radial-gradient(ellipse at 100% 5%, #3f2920 0, transparent 42rem),
    #17151b;
}
.masthead { background: rgb(28 20 32 / .8); }
.masthead .brand { display: inline-flex; align-items: center; gap: .28rem; font-size: 1.15rem; font-weight: 800; white-space: nowrap; }
.masthead .brand span { margin: 0; }
.masthead .brand .brand-mark {
  display: grid;
  place-items: center;
  width: 1.8rem;
  height: 1.8rem;
  margin-right: .24rem;
  background: #69344d;
  color: #ffe1ab;
  border-radius: .65rem;
  transform: rotate(-9deg);
  box-shadow: 0 .2rem 0 #341823;
  transition: transform .22s ease;
}
.brand:hover .brand-mark { transform: rotate(8deg) scale(1.08); }
.masthead .brand .brand-dot { color: #f5b5c7; }
.masthead .brand .brand-fun {
  padding: .1rem .32rem;
  border-radius: .4rem;
  background: #f5b5c7;
  color: #4b2337;
  font-size: .9rem;
  letter-spacing: .06em;
  transform: rotate(5deg);
}
.masthead nav { gap: .35rem .75rem; }
.masthead nav a { padding: .43rem .58rem; border-radius: .55rem; transition: background .18s ease; }
.masthead nav a:hover, .masthead nav a[aria-current] { background: #502d42; text-decoration: none; }
.account-tools { display: flex; align-items: center; flex-wrap: wrap; gap: .55rem; }
.account-tools #account-logout { padding: .5rem .72rem; background: #382a38; color: #ffd8df; }
.online-indicator {
  display: inline-flex;
  align-items: center;
  gap: .36rem;
  padding: .34rem .55rem;
  border: 1px solid #3b6753;
  border-radius: 2rem;
  background: #223c33;
  font-size: .79rem;
  white-space: nowrap;
}
.masthead .online-indicator > span { width: .48rem; height: .48rem; margin: 0; border-radius: 50%; background: #99e5b8; }
.online-indicator strong { color: #c2f2d4; }
.masthead .masthead-avatar { width: 40px; height: 40px; position: relative; border-color: #b66b85; font-size: .84rem; text-decoration: none; }
.masthead .masthead-avatar span { margin: 0; color: #ffdbeb; }
.masthead .masthead-avatar img { position: absolute; inset: 0; }
.masthead-avatar:hover { box-shadow: 0 0 0 3px #a55c7955; }
.account-panel select, .player-entry select { width: 100%; min-width: 0; }
.account-actions select { width: auto; }
.player-entry { background: linear-gradient(145deg, #372637, #211c24 76%); border-color: #714761; }
.player-entry h2 { color: #ffd2df; }
.player-entry .fields { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.player-entry fieldset, .player-entry #player-linked { margin-top: 1rem; }
.player-entry fieldset { border-color: #714761; }
.password-hint, .planner-panel .password-hint { margin-top: .55rem; color: var(--muted); font-size: .83rem; }
.published-events { display: grid; gap: .45rem; list-style: none; padding: 0; margin: .65rem 0 0; }
.published-events:empty { display: none; }
.published-events a {
  display: block;
  padding: .6rem .75rem;
  border: 1px solid #694660;
  border-radius: .55rem;
  background: #362636;
  text-decoration: none;
  transition: background .18s ease;
}
.published-events a:hover { background: #4b2e45; }
.arrival-toast { position: fixed; z-index: 4; top: 1rem; right: 1rem; width: max-content; max-width: calc(100% - 2rem); pointer-events: none; }
.arrival-card {
  padding: .8rem 1.05rem;
  border: 1px solid #f7aec8;
  border-radius: 1rem .85rem 1rem 1rem;
  background: #71324e;
  color: #fff1f5;
  box-shadow: 0 .5rem 1.75rem #180e1e99;
  font-weight: 750;
  overflow-wrap: anywhere;
  animation: arrival 3s both;
}
.chat-panel:not([hidden]) {
  border-color: #9a5876;
  transform-origin: bottom right;
  animation: chat-open .28s cubic-bezier(.2,.8,.25,1.1) both;
}
.chat-launcher { border-color: #9a5876; background: #422838; transition: transform .2s ease, background .2s ease; }
.chat-launcher:hover { transform: translateY(-3px); background: #542f47; }
main.wrap > section:not([hidden]) { animation: reveal-page .22s ease-out both; }
@keyframes arrival {
  0% { opacity: 0; transform: translateY(-11px) rotate(3deg) scale(.94); }
  10%, 90% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(-7px); }
}
@keyframes chat-open {
  from { opacity: 0; transform: translate(6px, 15px) scale(.93); }
  to { opacity: 1; transform: none; }
}
@keyframes reveal-page {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: none; }
}
@media (max-width: 42rem) {
  .masthead nav { order: 3; width: 100%; padding-top: .25rem; }
  .arrival-toast { top: .65rem; right: .65rem; }
}
@media (prefers-reduced-motion: reduce) {
  .brand .brand-mark, .masthead nav a, .published-events a, .chat-launcher { transition: none; }
  .arrival-card, .chat-panel:not([hidden]), main.wrap > section:not([hidden]) { animation: none; }
  .chat-launcher:hover { transform: none; }
}
.masthead .brand .brand-fun { font-size: 1.12rem; font-weight: 900; padding: .08rem .37rem; }
body { isolation: isolate; }
body::before {
  content: "";
  position: fixed;
  inset: -3%;
  z-index: -3;
  pointer-events: none;
  background: url("alliance-backdrop.jpg") center 58% / cover no-repeat;
  opacity: .17;
  transform-origin: 58% 64%;
  animation: alliance-backdrop 34s ease-in-out infinite alternate;
}
@keyframes alliance-backdrop {
  from { transform: scale(1) translateX(-.45%); }
  to { transform: scale(1.045) translateX(.45%); }
}
.friends-count { color: var(--muted); font-size: .85rem; margin-left: .2rem; }
.friend-dot { display: inline-block; width: .56rem; height: .56rem; border-radius: 50%; background: #a391a0; margin-right: .15rem; }
.friend-dot-online { background: #99e5b8; box-shadow: 0 0 .6rem #99e5b855; }
.friends-list { list-style: none; padding: 0; margin: 0; }
.friends-list li { display: flex; gap: .65rem; align-items: center; padding: .55rem 0; overflow-wrap: anywhere; }
.friends-list li + li { border-top: 1px solid var(--border); }
.friends-list strong, .friends-list small { display: block; }
.friends-list small { color: var(--muted); }
.friends-list .profile-avatar { position: relative; width: 2.2rem; height: 2.2rem; font-size: .78rem; }
.friends-list img { position: absolute; inset: 0; }
#player-table table { min-width: 57rem; }
#player-table td:first-child { min-width: 3rem; }
#player-table td:nth-child(2) { min-width: 9rem; }
#player-table td:nth-child(4) { color: inherit; }
@media (prefers-reduced-motion: reduce) { body::before { animation: none; } }
:root { --header-gutter: clamp(1rem, 2.5vw, 3rem); }
.masthead .masthead-inner {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  width: calc(100% - 2 * var(--header-gutter));
  gap: .65rem 1rem;
}
.masthead nav { grid-column: 2; justify-content: center; }
.account-tools { grid-column: 3; justify-self: end; justify-content: flex-end; }
.arrival-toast { top: calc(var(--masthead-height, 4.5rem) + 2rem); right: var(--header-gutter); }
@media (max-width: 58rem) {
  .masthead .masthead-inner { grid-template-columns: minmax(0, 1fr) max-content; }
  .account-tools { grid-column: 2; grid-row: 1; }
  .masthead nav { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; }
  .arrival-toast { top: calc(var(--masthead-height, 6.5rem) + .85rem); }
}
@media (max-width: 25rem) {
  .masthead .masthead-inner { grid-template-columns: minmax(0, 1fr); }
  .account-tools { grid-column: 1; grid-row: 2; }
  .masthead nav { grid-row: 3; }
}
.player-filters { display: flex; align-items: end; flex-wrap: wrap; gap: .65rem; margin-top: .9rem; }
.player-filters label { flex: 1 1 6.5rem; }
.player-filters label:first-child { flex-basis: 15rem; }
.player-filters button { background: #362936; color: var(--gold); padding: .65rem .75rem; }
.planner-panel .player-count { margin-top: .8rem; font-size: .86rem; }
#player-list-status { margin-top: .4rem; }
#player-list-status:empty, #history-status:empty { display: none; }
.maintenance-scroll {
  --player-row: 2.75rem;
  max-block-size: min(calc(11 * var(--player-row)), 65vh);
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: .5rem;
}
.maintenance-scroll thead th { position: sticky; top: 0; z-index: 1; background: #362737; box-shadow: 0 1px var(--border); }
#player-table th, #player-table td { height: var(--player-row); padding-block: .35rem; white-space: nowrap; }
#player-table td:nth-child(2) { max-width: 16rem; overflow: hidden; text-overflow: ellipsis; }
.player-row-actions { display: flex; gap: .4rem; }
#player-table button { padding: .35rem .55rem; }
#player-table .row-remove { color: #ffb8c6; }
#player-table .row-remove:hover, .danger-button { color: #fff1f5; background: #79344d; }
#member-history summary { cursor: pointer; font-weight: 700; }
#member-history[open] summary { margin-bottom: .75rem; }
#history-table td { vertical-align: top; overflow-wrap: anywhere; }
#history-table { max-block-size: 19rem; }
.maintenance-dialog { width: min(calc(100% - 2rem), 32rem); }
.maintenance-dialog::backdrop { background: rgb(0 0 0 / .65); }
.maintenance-dialog textarea {
  width: 100%;
  resize: vertical;
  border: 1px solid var(--border);
  border-radius: .4rem;
  padding: .65rem;
  background: #171518;
  color: inherit;
  font: inherit;
}
.auth-layout {
  display: grid;
  grid-template-columns: minmax(17rem, 28rem) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.8rem, 4vw, 5rem);
  min-height: min(33rem, 65vh);
}
.welcome-scene {
  display: grid;
  grid-template-areas: "welcome";
  place-items: center;
  width: min(100%, 49rem);
  justify-self: center;
}
.welcome-scene img {
  grid-area: welcome;
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 .45rem 1rem #1b0f1a80);
}
.welcome-title {
  grid-area: welcome;
  z-index: 1;
  display: grid;
  gap: .08em;
  justify-items: center;
  margin: 0 0 5%;
  color: #ffdfbc;
  text-align: center;
  font: italic 600 clamp(1.65rem, 3.7vw, 3.35rem)/1 Roboto, sans-serif;
  text-shadow: 0 .12em .22em #160e17, 0 0 .6em #d1789b76;
}
.welcome-title strong {
  font: 800 clamp(3.05rem, 6.9vw, 6.4rem)/.98 Roboto, sans-serif;
  color: #ffe5bc;
  letter-spacing: .075em;
  padding-left: .075em;
}
@media (max-width: 53rem) {
  .auth-layout { grid-template-columns: minmax(0, 1fr); justify-items: center; min-height: 0; gap: 1.45rem; }
  .auth-entry { width: min(100%, 28rem); }
  .welcome-scene { max-width: 32rem; }
}
.snowfall { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.snowfall span {
  position: absolute;
  top: -2rem;
  left: var(--x);
  color: #fff1fc;
  opacity: .38;
  font: var(--size)/1 Roboto, "Segoe UI Symbol", sans-serif;
  text-shadow: 0 0 .4em #ffe1f088;
  animation: snowflake-fall var(--fall) var(--delay) linear infinite;
}
.snowfall span:nth-child(3n) { opacity: .24; }
.snowfall span:nth-child(4n) { color: #ffe4bb; }
@keyframes snowflake-fall {
  from { transform: translate3d(0, -1rem, 0) rotate(0); }
  to { transform: translate3d(var(--drift), calc(100vh + 3rem), 0) rotate(115deg); }
}
@media (prefers-reduced-motion: reduce) {
  .snowfall span { animation: none; top: var(--y); }
}
#published-actions { margin: -1rem 0 1.25rem; }
.strategy-edit { border: 1px solid var(--border); border-radius: .45rem; padding: .65rem .85rem; font-weight: 700; text-decoration: none; }
.strategy-edit:hover { background: #382737; }
#published-status { color: var(--muted); }
#published-status:empty { display: none; }
.emoji-toggle, #chat-attach { display: grid; place-items: center; flex: none; padding: .35rem; min-width: 2rem; min-height: 2.15rem; }
.emoji-toggle svg { display: block; }
.notice-compose { align-self: start; }
.notice-compose > summary, .story-compose > summary { cursor: pointer; font-size: 1.125rem; font-weight: 700; }
.notice-compose[open] > summary, .story-compose[open] > summary { margin-bottom: .75rem; }
.notice-compose textarea, .story-compose textarea {
  width: 100%;
  resize: vertical;
  border: 1px solid var(--border);
  border-radius: .4rem;
  padding: .65rem;
  background: #171518;
  color: inherit;
  font: inherit;
}
.notice-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin: .6rem 0; }
.notice-image-upload { flex: 1; min-width: 12rem; }
.notice-image-upload input { padding: .35rem; }
.notice-compose .actions, .story-compose .actions { margin-top: .7rem; }

.noticeboard-scrollable { max-block-size: min(38rem, 65vh); overflow: auto; padding-right: .65rem; }
.alliance-notice time { margin-left: .55rem; color: var(--muted); font-size: .8rem; }
.alliance-notice p { white-space: pre-wrap; overflow-wrap: anywhere; }
.alliance-notice img { display: block; max-width: 100%; max-height: 18rem; margin-top: .6rem; object-fit: contain; border-radius: .5rem; }
.notice-toast { background: #624264; border-color: #f9c69a; }
#suspension-review-status:empty { display: none; }
#suspension-review-table td:nth-child(3) { overflow-wrap: anywhere; }
:is(.home-hero, #events, #friends, #maintenance, #profile, #notifications) > h1 {
  font-family: Explora, Roboto, sans-serif;
  font-weight: 700;
  font-size: clamp(3.35rem, 7vw, 6.15rem);
  line-height: 1.12;
  color: #ffd7e6;
  -webkit-text-stroke: .65px currentColor;
  text-shadow: 0 .065em .24em #a13d75a8;
}
.alliance-feeds { align-items: start; gap: clamp(1rem, 2.5vw, 2rem); }
.alliance-feed { display: grid; min-width: 0; gap: 1rem; }
.story-compose, .story-board { background: #2c263b; border-color: #685287; }
.story-compose > summary, .story-board h2 { color: #ead6ff; }
.story-compose button[type="submit"] { color: #2c1744; background: #d9bbf4; }
.story-compose button[type="submit"]:hover { background: #ebd7ff; }
.story-compose textarea { background: #201a2b; border-color: #685287; }
#stories-entries { display: grid; gap: .7rem; list-style: none; margin: 0; padding: 0; }
.stories-scrollable { max-block-size: min(38rem, 68vh); overflow: auto; padding-right: .5rem; }
.story-card { padding: .75rem .85rem; border: 1px solid #58466f; border-radius: 1rem; background: #362b49; }
.story-card header { display: flex; align-items: baseline; flex-wrap: wrap; gap: .18rem .55rem; }
.story-card strong { color: #f2e6ff; overflow-wrap: anywhere; }
.story-card time { color: #d0bbdf; font-size: .76rem; }
.story-card p { margin: .4rem 0 0; color: inherit; white-space: pre-wrap; overflow-wrap: anywhere; }
.story-card img { display: block; max-width: 100%; max-height: 18rem; margin-top: .55rem; object-fit: contain; border-radius: .75rem; }
.story-reactions { display: flex; gap: .42rem; margin-top: .63rem; }
.story-reactions button { padding: .19rem .55rem; border-radius: 1rem; color: #f6eaff; background: #47385e; font-size: .83rem; }
.story-reactions button:hover { background: #594577; }
.story-reactions button[aria-pressed="true"] { background: #d9bbf4; color: #2c1744; }
#stories-status:empty { display: none; }
.cursor-sparkle-layer { position: fixed; inset: 0; z-index: 5; overflow: hidden; pointer-events: none; }
.cursor-sparkle {
  position: absolute;
  color: var(--spark-color);
  font-size: var(--spark-size);
  line-height: 1;
  text-shadow: 0 0 .45em currentColor;
  animation: cursor-sparkle .95s ease-out both;
}
.click-sparkle {
  position: fixed;
  z-index: 6;
  pointer-events: none;
  text-shadow: 0 0 .22em #fff5df, 0 0 .55em currentColor;
  animation: click-sparkle .78s ease-out both;
}
@keyframes click-sparkle {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(.55); }
  35% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--spark-x)), calc(-50% + var(--spark-y))) scale(.5) rotate(105deg); }
}
@keyframes cursor-sparkle {
  from { opacity: .88; transform: translate(-50%, -50%) scale(1) rotate(0); }
  to { opacity: 0; transform: translate(calc(-50% + var(--spark-x)), calc(-50% + var(--spark-y))) scale(.25) rotate(55deg); }
}
@media (prefers-reduced-motion: reduce), (pointer: coarse) {
  .cursor-sparkle-layer { display: none; }
}
:is(.home-hero, #events, #friends, #maintenance, #profile, #notifications) > h1::before,
:is(.home-hero, #events, #friends, #maintenance, #profile, #notifications) > h1::after {
  color: #f6b4d2;
  font: .33em/1 Roboto, sans-serif;
  -webkit-text-stroke: 0;
  text-shadow: 0 0 .6em #f191c1;
  vertical-align: middle;
}
:is(.home-hero, #events, #friends, #maintenance, #profile, #notifications) > h1::before { content: "❧ ✧" / ""; margin-right: .28em; }
:is(.home-hero, #events, #friends, #maintenance, #profile, #notifications) > h1::after { content: "✧ ☙" / ""; margin-left: .28em; }
.story-tools { display: flex; flex-wrap: wrap; gap: .28rem; margin-left: auto; }
.story-tools button, .story-report-actions button {
  background: transparent;
  color: #e6c8f7;
  padding: .18rem .38rem;
  font-size: .77rem;
}
.story-tools button:hover, .story-report-actions button:hover { background: #56426e; }
.story-tools .story-delete, .story-report-actions .story-delete { color: #ffc1cb; }
.story-comments { margin-top: .7rem; border-top: 1px solid #58466f; padding-top: .5rem; }
.story-comments summary, #story-reports summary { cursor: pointer; color: #ead6ff; font-weight: 700; }
.story-comments summary { font-size: .86rem; }
.story-comments ul, #story-report-list { list-style: none; padding: 0; margin: .5rem 0; }
.story-comments li { padding: .45rem .1rem; font-size: .86rem; }
.story-comments li + li { border-top: 1px solid #58466f; }
.story-comments li strong { margin-right: .5rem; }
.story-comments form { margin-top: .5rem; }
.story-comments textarea {
  display: block; width: 100%; resize: vertical; padding: .5rem; margin-bottom: .4rem;
  border: 1px solid #685287; border-radius: .4rem; background: #241c32; color: inherit; font: inherit;
}
.story-comments form button { background: #d9bbf4; color: #2c1744; padding: .35rem .6rem; font-size: .82rem; }
.story-comments [role="status"]:empty { display: none; }
#story-reports[open] summary { margin-bottom: .65rem; }
#story-report-list li { padding: .55rem 0; overflow-wrap: anywhere; }
#story-report-list li + li { border-top: 1px solid #58466f; }
#story-report-list li p { margin: .28rem 0; color: inherit; white-space: pre-wrap; }
.story-report-actions { display: flex; gap: .3rem; }
#story-report-list .report-preview { color: #d0bbdf; font-size: .84rem; }
.notice-remove {
  float: right; background: transparent; color: #ffb8c6; padding: .2rem .38rem; font-size: .77rem;
}
.notice-remove:hover { background: #54283c; }
#noticeboard-status:empty, #notice-archive-status:empty { display: none; }
.notice-archive summary { cursor: pointer; color: #f7ca8c; font-weight: 700; }
.notice-archive[open] summary { margin-bottom: .65rem; }
#notice-archive-entries { max-block-size: 18rem; overflow: auto; list-style: none; margin: 0; padding: 0; }
#notice-archive-entries li { padding: .55rem 0; overflow-wrap: anywhere; }
#notice-archive-entries li + li { border-top: 1px solid var(--border); }
#notice-archive-entries p { margin: .22rem 0; white-space: pre-wrap; }
#notice-archive-entries time { display: inline-block; margin-right: .5rem; font-size: .79rem; color: var(--muted); }
#notice-archive-entries button { padding: .27rem .55rem; font-size: .8rem; }
.home-hero {
  display: grid;
  grid-template-columns: minmax(max-content, .44fr) minmax(0, 1fr);
  gap: 1.1rem;
  align-items: center;
}
#home .alliance-feeds { margin-top: 1rem; }
.mascot-layer {
  position: relative;
  height: clamp(7.7rem, 12vw, 9rem);
  min-width: 0;
  overflow: hidden;
  pointer-events: none;
}
@media (max-width: 52rem) {
  .home-hero { grid-template-columns: minmax(0, 1fr); gap: .3rem; }
}
.mascot {
  --size: 72px;
  position: absolute;
  width: var(--size);
  height: var(--size);
  transform: translate3d(var(--mascot-x, 0), var(--mascot-y, 0), 0);
  transition: transform var(--travel, 0ms) linear, opacity .48s ease;
}
.mascot-girl { --sprite-row: 100%; }
.mascot-sprite { position: absolute; }
.mascot-sprite {
  inset: 0;
  background: url("alliance-mascots-3d.png") no-repeat 0 var(--sprite-row, 0%);
  background-size: 400% 200%;
  transform: scaleX(var(--mascot-facing, 1));
  filter: drop-shadow(0 .2rem .24rem #170e1dbd);
}
.mascot[data-scene="walk"] .mascot-sprite { animation: mascot-walk .38s steps(1, end) infinite; }
@keyframes mascot-walk {
  0%, 100% { background-position-x: 33.333%; }
  50% { background-position-x: 66.667%; }
}
.mascot[data-scene="wave"] .mascot-sprite { background-position-x: 100%; }
.mascot-bubble {
  position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%);
  display: block; width: max-content; max-width: 8rem; padding: .2rem .4rem;
  border: 1px solid #ac7892; border-radius: .6rem; color: #ffeef6; background: #4b2d47eb;
  font: 700 .69rem/1.25 Roboto, sans-serif; text-align: center;
}
@media (max-width: 38rem) {
  .mascot { --size: 56px; }
  .mascot-bubble { font-size: .62rem; }
}
@media (prefers-reduced-motion: reduce) { .mascot-layer { display: none; } }
#notice-archive-entries img { display: block; max-width: 100%; max-height: 6rem; border-radius: .4rem; margin: .3rem 0; }

.mascot-activity {
  position: absolute;
  width: var(--scene-width, 240px);
  aspect-ratio: var(--scene-aspect, 2);
  filter: drop-shadow(0 .24rem .32rem #170e1d94);
  opacity: 1;
  transition: opacity var(--scene-fade-in, 220ms) ease-out;
}
.mascot-activity.mascot-fading { opacity: 0; transition-duration: var(--scene-fade-out, 720ms); }
.mascot-activity::before, .mascot-activity::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--activity-art);
  background-repeat: no-repeat;
  background-size: 200% var(--sheet-height, 200%);
  background-position-y: var(--scene-row, 0%);
}
.mascot-activity::before {
  background-position-x: 0%;
  animation: mascot-activity-poses var(--scene-cycle, 2s) linear infinite;
}
.mascot-activity::after {
  background-position-x: 100%;
  animation: mascot-activity-action var(--scene-cycle, 2s) linear infinite;
}
@keyframes mascot-activity-poses {
  0%, 43%, 96%, 100% { opacity: 1; }
  50%, 89% { opacity: 0; }
}
@keyframes mascot-activity-action {
  0%, 43%, 96%, 100% { opacity: 0; }
  50%, 89% { opacity: 1; }
}
.profile-menu { position: relative; z-index: 5; }
.profile-menu > summary { cursor: pointer; list-style: none; }
.profile-menu > summary::-webkit-details-marker { display: none; }
.profile-menu > .masthead-avatar { overflow: visible; }
.profile-menu .masthead-avatar img { border-radius: 50%; }
.profile-menu #profile-unread-dot {
  position: absolute; right: -1px; top: 0; width: .65rem; height: .65rem; margin: 0;
  border: 1px solid #2c1d30; border-radius: 50%; background: #ffabc9;
}
.profile-menu-panel {
  position: absolute; right: 0; top: calc(100% + .55rem); min-width: 10rem;
  border: 1px solid #754a68; border-radius: .7rem; background: #332439;
  padding: .32rem; box-shadow: 0 .55rem 1.2rem #120c1688;
}
.profile-menu-panel a {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .52rem .6rem; color: #ffe5ca; text-decoration: none; border-radius: .4rem;
}
.profile-menu-panel a:hover { background: #50314b; }
.masthead #notification-badge { margin: 0; background: #713e58; border-radius: 1em; padding: .08rem .38rem; color: #fff2f7; font-size: .73rem; }
.notification-panel { max-width: 56rem; }
.notification-toolbar { display: flex; justify-content: flex-end; }
.notification-toolbar button { padding: .45rem .7rem; }
#notification-list { list-style: none; padding: 0; margin: .4rem 0 0; }
#notification-list li + li { border-top: 1px solid var(--border); }
#notification-list button {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .22rem .65rem;
  width: 100%; padding: .65rem; background: transparent; color: inherit; text-align: left; overflow-wrap: anywhere;
}
#notification-list button:hover, #notification-list .notification-unread button { background: #3d293c; }
#notification-list time, #notification-list button span { color: var(--muted); font-size: .8rem; font-weight: 400; }
#notification-list button span { grid-column: 1 / -1; }
#notification-target-status:empty, #notification-status:empty { display: none; }
.story-reactions { flex-wrap: wrap; }
.story-comment-reply { border-left: 2px solid #a681bf; padding-left: .55rem !important; margin-left: .55rem; }
.story-comments blockquote { margin: .3rem 0; border-left: 2px solid #685287; padding: .22rem .45rem; color: #d0bbdf; overflow-wrap: anywhere; }
.story-comments li button, .story-comments .story-reply-context button {
  background: transparent; color: #e6c8f7; padding: .16rem .3rem; font-size: .78rem;
}
.story-reply-context { display: flex; align-items: center; justify-content: space-between; color: #eccdfb; margin-bottom: .3rem; font-size: .83rem; }
@media (max-width: 36rem) { #notification-list button { grid-template-columns: minmax(0, 1fr); } }