/* ========================================
   EVENT 
======================================== */

.arenastyle .fulldate {
  font-family: var(--grungefont);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--accent);
  font-size: var(--text-125);
  line-height: var(--lineheight);
}

.arenastyle .day {
  color: var(--fourthaccent);
  margin-bottom:-0.15em;
}

.arenastyle .time {
  color: var(--accent);
  margin-top:0.15em;
}

.arenadesc {
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  line-height: 125%;
}

.arenadesc b {
  font-family: var(--rockerfont);
  font-weight: 200;
  letter-spacing: -0.05em;
  color: var(--secondaccent);
}

.arenadesc i {
  color: var(--fourthaccent);
  margin: 0 0.25em;
}

.entrystuff {
  margin:1em 0!important;
}


/* ========================================
   TABLES
======================================== */

.dalanbartable {
  width: 100%;
  border: 0;
  border-collapse: collapse;
  table-layout: fixed;
}

.dalanbartable td {
  vertical-align: middle;
  overflow: hidden;
  overflow-wrap: break-word;
}

.facts {
  margin-bottom: 0.5em;
}

.facts .factslabel {
  width: 25%;
  padding: var(--tablepad);
  background-color: var(--back);
  font-family: var(--rockerfont);
  font-size: medium;
  font-weight: 200;
  letter-spacing: -0.025em;
  text-align: right;
  padding: 0.5em 0.5em 0.5em 0em;
}

.facts .factsvalue {
  padding: var(--tablepad);
  background-color: var(--drop);
  font-family: var(--fantasyfont);
  font-size: var(--text-085);
  line-height: 125%;
  padding: 0.5em 1em;
}

.calendar {
  width: 100%;
}

.calendar .calendarhead {
  text-align: center;
  margin: 0;
  font-family: var(--handfont);
  font-size: xx-large;
  padding: 0.5em 0;
}

.calendar .calendarcontent {
  text-align: center;
  margin: 0;
}

.calendar .calendarcontent td {
  background-color: var(--back);
  padding: var(--tablepad);
  text-transform: uppercase;
  font-size: medium;
}

.dalanbartable.months {
  margin: 0;
  filter: grayscale(1);
  transition: filter 0.2s ease;
}

.dalanbartable.months:hover {
  filter: grayscale(0);
}

.months .irlmonth td {
  text-align: center;
  font-family: var(--handfont);
  font-size: var(--boxtext);
  padding: 0.5em 0;
}

.months .deitymonth {
  padding: var(--monthpadding);
  text-align: center;
  font-family: var(--fuzzyfont);
  text-transform: uppercase;
  font-weight: 100;
  font-size: smaller;
}

.history {
  width: 100%;
}

.history .historyhead td {
  background-color: var(--back);
  text-transform: uppercase;
  text-align: center;
  font-weight: 900;
}

.history .historydate td {
  background-color: var(--drop);
  text-align: center;
  font-weight: bold;
}

.history .historycontent {
  vertical-align: top;
  padding: 0 1em;
}

.pantheon,
.gamemode {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 var(--cavities);
  margin-top: calc(-1 * var(--cavities));
  margin-bottom: calc(-1 * var(--cavities));
}

.pantheon td,
.gamemode td {
  padding: 0 var(--tablepad);
}

.gamemode td {
  border-top: 1px solid var(--softshadow);
  padding-top: 1.5em;
}

.pantheon .deity,
.gamemode .alias {
  width: 25%;
  text-align: center;
}

.pantheon .deity {
  filter: grayscale(1);
  transition: filter 0.2s ease;
}

.pantheon .deity p,
.gamemode .alias p {
  margin: 0;
  line-height: 90%;
    text-align: center;
}

.gamemode .alias p {
  color: var(--fourthaccent);
    text-align: center;
}

.pantheon .deity p:first-child,
.gamemode .alias p:first-child {
  font-size: var(--boxtext);
  text-overflow: clip;
  font-weight: 100;
  font-family: var(--fuzzyfont);
  text-align: center;
  margin-bottom: 0.5em;
  text-transform: uppercase;
}

.pantheon .deitydesc,
.gamemode .aliasdesc {
  width: 75%;
  padding-left: 1.5em;
}

.pantheon .deitydesc img {
  width: 115px;
  aspect-ratio: 1 / 1;
  float: right;
  background: var(--symbolbg);
  border-radius: 50%;
  padding: 0.25em;
  filter: invert(1);
  margin: 0 1.25em 1.25em 1.25em;
  margin-right: 0;
  shape-outside: circle(50%);
  transition: transform 0.2s ease;
}

.pantheon tr:hover .deitydesc img {
  filter:
    invert(1)
    drop-shadow(0 0 10px var(--star))
    drop-shadow(0 0 5px var(--fourthaccent));
}

.pantheon tr:hover .deity {
  filter: grayscale(0);
}

.gamemode .alias .mode-icon {
  margin-top: 1em;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(1);
  transition: transform 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease;
}

.gamemode .alias .mode-icon i {
  font-size: 4.75em;
  pointer-events: none;
}

.gamemode tr:hover .alias .mode-icon {
  transform: scale(1.1);
  filter: drop-shadow(0 0 7px var(--paleglow));
}

.gamemode tr:hover .alias .mode-icon i {
  color: var(--secondaccent);
}

#gamemodes h3 {
  font-size: var(--text-35);
}

/* ========================================
   DEITY COLORS
======================================== */

.yhara { background-color: var(--yhara); color: var(--deitydarktext); }
.ikhter { background-color: var(--ikhter); color: var(--deitydarktext); }
.ravara { background-color: var(--ravara); color: var(--deitylighttext); }
.zeune { background-color: var(--zeune); color: var(--deitydarktext); }
.ovphy { background-color: var(--ovphy); color: var(--deitylighttext); }
.khinera { background-color: var(--khinera); color: var(--deitylighttext); }
.besros { background-color: var(--besros); color: var(--deitylighttext); }
.sythar { background-color: var(--sythar); color: var(--deitylighttext); }
.dhomes { background-color: var(--dhomes); color: var(--deitylighttext); }
.zuldes { background-color: var(--zuldes); color: var(--deitydarktext); }
.iddal { background-color: var(--iddal); color: var(--deitydarktext); }
.llum { background-color: var(--llum); color: var(--deitydarktext); }
.penance { background-color: var(--penance); color: var(--deitylighttext); }



/* ========================================
   SPECIAL EVENTS
======================================== */

.event-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  margin: 2em 0 0 0;
  gap: var(--event-grid-gap);
  place-items: center;
  width: var(--event-grid-width);
  justify-self: center;
}

.event-card {
  position: relative;
  background: var(--back);
  padding: 1em;
  margin: 0;
  border-radius: var(--round-50);
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  text-align: center;
  box-shadow: inset 0 0 2em var(--star-drop);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  overflow: hidden;
  width: var(--event-card-size);
}

.event-card:hover {
  transform: scale(1.05);
  box-shadow: 0 0 3em var(--back);
}

.event-card::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0.1;
  background-color: var(--fourthaccent);
  -webkit-mask-image: var(--ornament-svg-event);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 150px auto;
  mask-image: var(--ornament-svg-event);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 180px auto;
}

.event-card header {
  display: flex;
  align-items: center;
}

.event-card header i {
  font-size: 1.35em;
  color: var(--secondaccent);
  margin-right: 0.25em;
}

.event-card h4 {
  margin: 0;
  color: var(--secondaccent);
  font-family: var(--grungefont);
  font-size: var(--boxtext);
  letter-spacing: -0.02em;
  font-style: normal;
}

.event-card p {
  font-size: var(--text-09);
  opacity: 1;
  margin-top: 0;
  font-weight: bold;
  text-align: center;
}

.event-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25em;
  line-height: 120%;
  color: var(--accent);
  z-index: 10;
}

.event-grid > .event-card:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  justify-self: center;
}


/* ========================================
   RULES
======================================== */

.tissue .rules {
  background: var(--rec-bg);
  border: var(--border-thin);
  border-radius: var(--bubble-radius);
  padding: 1.5em;
  margin: 1em;
}

.tissue .rules a {
  font-family: var(--fuzzyfont);
  font-weight: 100;
  font-size: 0.8em;
  letter-spacing: var(--widespacing);
  color: var(--secondaccent);
}


/* ========================================
   COMMUNITY
======================================== */

#opeian-community {
  max-width: 520px;
  margin: 0 auto;
  font-family: var(--opeian-serif, "Garamond", serif);
}

#community-messages {
  height: 350px;
  width: 100%;
  overflow-y: auto;
  padding: 2em 0 1em 0;
  background: transparent;
  display: block;
}

.community-message {
  position: relative;
  width: 95%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: 3.5em;
}

.community-message:last-child {
  margin-bottom:0;
}

.cm-bubble {
  position: relative;
  background: var(--drop);
  color: var(--text);
  padding: 0.5em 0.75em;
  border-radius: 1em;
  font-family: var(--fantasyfont);
}

.cm-bubble::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 1em;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 11px solid var(--drop);
}

.cm-text {
  line-height: 1.35;
}


.cm-identity {
  display: flex;
  align-items: flex-start;
  gap: 0.75em;
  margin:0;
}


.cm-identity i,
.advidentity i {
  color: var(--secondaccent);
  margin:0;
}

.advidentity {
  display: flex;
  align-items: flex-start;
  background: var(--boxbg);
  border-radius: 0.6em;
  padding: 1em;
  gap:0.75em;
}

.cm-avatar img,
.advavatar img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
  background: transparent;
  border: 1px solid var(--thirdaccent);
}

.cm-id-text,
.advid-text {
  display: flex;
  flex-direction: column;
  gap: 0.25em;
  margin-top:0.25em;
}

.cm-name-row,
.advname-row {
  gap:0.5em;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25em 1em;
    max-width: max-content;
  font-family: var(--rockerfont);
  font-size: clamp(0.7em, 10vw, 0.85em);
  color: var(--fourthaccent);
  text-transform: uppercase;
  background: var(--drop);
  border-radius: 2em;
  box-shadow:
    inset 0 0 1em var(--softshadow);
}

.cm-name-row::before,
.cm-name-row::after,
.advname-row::before,
.advname-row::after {
  content: "✦";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--text-125);
  opacity: 1;
  color: var(--stargold);
}

.cm-name-row::before,
.advname-row::before {
  left: -0.4em;
}

.cm-name-row::after,
.advname-row::after {
  right: -0.4em;
}


.cm-class-row,
.advclass-row  {
  font-style: italic;
  letter-spacing: 0.025em;
  margin-top:0;
  line-height: 95%;
  color:var(--fourthaccent);
}

.advlevel-row  {
  font-family: var(--grungefont);
  font-size: 1.15em;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  margin-top:-0.25em;
}

.advavatar img {
  width: 90px;
  height: 90px;
}

.opeian-heroes {
  display: flex;
  flex-wrap: wrap;            
  justify-content: center;     
  gap: 1.5em;  
  margin-bottom:1em;       
}

.advcard {
  flex: 0 1 275px;  
  max-width: 100%;
}

.tissue[data-banner="AL"] {
  padding:2em 1em;
}

.tissue[data-banner="AL"] p {
  padding:0 1em;
}

#community-form {
  margin-top: 1em;
}

#community-post-form {
  display: flex;
  gap: 1em;
}

#community-post-form textarea {
  flex: 1;
  resize: none;
  padding: 6px 8px;
  background: var(--boxbg);
  color: var(--text);
  border: 1px solid var(--drop);
  border-radius: 1em;
  font-family: inherit;
  font-size: 1em;
  min-height: 60px;
}

#community-post-form button {
  display: inline-block;
  padding: 0.5em 0.5em;
  font-family: var(--grungefont);
  font-weight: 700;
  letter-spacing: -0.025em;
  font-size: var(--text-175);
  margin-top:0;
  color: var(--back);
  background: var(--secondaccent);
  border: none;
  border-radius: 1em;
  cursor: pointer;
  box-shadow: 0 0 1em var(--softshadow);
  transition: transform 0.2s ease, background 0.2s ease;
}

#community-post-form button:hover {
  background: var(--accent);
  transform: translateY(-2px) scale(1.03);
}

#community-messages::-webkit-scrollbar {
  width: 6px;
}

#community-messages::-webkit-scrollbar-thumb {
  background:var(--secondaccent);
  border-radius: 4px;
}

.cm-time {
  font-size: var(--text-085);
  margin-top: 2px;
  letter-spacing: 0.03em;
  left:0.5em;
  position: absolute;
  top:-2em;
  color:var(--secondaccent);
  font-family: var(--rockerfont);
}

/* ======================================================
   RUMOR MILL
====================================================== */

.opeian-rumors {
  width: calc(100% - 2em);
  padding: 1.25em;
  border-radius: 1.25em;
  background: var(--back);
  margin:0 1em;
}

.opeian-rumors p {
  text-align: center;
  font-style: italic;
}
.rumor-title {
  text-align: center;
  margin: 0 0 1em 0;
  font-family: var(--rockerfont);
  letter-spacing: 0.02em;
}

.rumor-form {
  width: 100%;
  max-width: 900px;
  margin: 0 auto 1.25em auto;
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.rumor-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1em;
}

@media (max-width: 780px) {
  .rumor-grid {
    grid-template-columns: 1fr;
  }
}

.rumor-field span {
  display: block;
  margin-bottom: 0.35em;
  font-size: var(--boxtext);
  font-family: var(--grungefont);
}

.rumor-field select {
  width: 100%;
  border-radius: 0.9em;
  padding: 0.65em 0.8em;
  background: rgba(0,0,0,0.25);
  border: none;
  color: var(--text);
  font-family: var(--rockerfont);
}

.rumor-preview-wrap {
  border-radius: 1em;
  padding: 0.85em 1em;
  background: rgba(0,0,0,0.25);
}

.rumor-preview-label {
  font-size: var(--text-085);
  opacity: 0.8;
  margin-bottom: 0.35em;
  font-style: italic;
}

.rumor-preview {
  font-family: var(--grungefont);
  line-height: 1.35;
  text-shadow: 0 0 3px var(--boxbg);
  min-height: 0.5em;
  font-size: var(--boxtext);
  line-height: 110%;
}

.rumor-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1em;
  flex-wrap: wrap;
}

.rumor-submit {
  appearance: none;
  border:none;
  background:
    linear-gradient(to bottom, var(--white-008), var(--black-035)),
    var(--fourthaccent);
  padding: 1em 1.5em;
  border-radius: var(--pill-radius);
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--boxbg);
  font-family: var(--rockerfont);
  letter-spacing: -0.05em;
  font-size: 1em;
}

.rumor-submit:hover {
  background:
    linear-gradient(to bottom, var(--white-008), var(--black-035)),
    var(--stargold);
  box-shadow: 0 0 0.75em var(--softshadow);
  transform: scale(1.03);
}

.rumor-note {
  font-size: var(--text-085);
  text-align: center;
  max-width: 520px;
}

.rumor-feed {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.75em;
    box-shadow: 0 0 0.75em var(--softshadow);
}

.rumor-line {
  padding: 0.85em 1em;
  border-radius: 1em;
  background: rgba(0,0,0,0.20);
}

.rumor-line strong {
  font-family: var(--grungefont);
  font-size: var(--text-125);
  font-weight: 700;
  color:var(--stargold);
}

.rumor-meta {
  margin-top: 0.35em;
  font-size: var(--text-085);
  opacity: 0.75;
  font-style: italic;
}

.rumor-locked {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px; 
  margin-bottom:2em;
}