/**
 * Campaign Styles for campaign #179384
 */

/** Style Fonts#2089 */
/* Webfont imports. NOTE: this style must stay FIRST in the theming order,
   because Kanka concatenates all campaign styles into one file and CSS only
   honours @import at the very top of a stylesheet.

   ORIGINAL VALUE - restore this exact line to roll back:
   @import url('https://fonts.googleapis.com/css2?family=Amita&family=Indie+Flower&family=Neucha&family=Walter+Turncoat&display=swap');
*/
@import url('https://fonts.googleapis.com/css2?family=Amita&family=Cinzel:wght@400;600;700&family=Indie+Flower&family=Inter:wght@400;500;600;700&family=Neucha&family=Walter+Turncoat&display=swap');
/** Style Entities for Font#2090 */
.kanka-tag-handout :is(h1, h2, h3, h4, h1 a, h2 a, h3 a, h4 a) 
{ font-family: 'Neucha'; }
/** Style More image#2113 */
.panel-heading-entity .panel-title {
    height: 280px;
}
.panel-heading-entity + .panel-body .preview {
    max-height: 100px;
}
.panel .panel-heading-entity h3 a {
    padding: 10px 20px;
}
/** Style Family Tree background#2194 */
.kanka-entity-family .family-tree {
    background-image: url(https://media.discordapp.net/attachments/1070207061918494831/1093394687475318835/wallpaper-mania.com_High_resolution_wallpaper_background_ID_77702110654.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}
/** Style Hide entity history#2693 */
body:not(.is-admin) .entity-history {
    display: none;
}
/** Theme builder #3258 */
@layer theme {
:root {
  --a: 183 91% 64%;
  --af: 183 91% 44%;
  --ac: 0 0% 0%;
  --n: 212 97% 12%;
  --nf: 0 0% 0%;
  --nc: 212 97% 92%;
  --su: 109 86% 23%;
  --suc: 0 0% 100%;
}
}
/** Style Hiding Entry boxes#3439 */
.kanka-tag-hiddencontent:not(.is-admin) .box-entity-entry {
    display: none;
}
/** Style Widget Height (Salvatos 22-12-2023)#3566 */
.widget-max-height {
    height: 100%;
}
/** Style Background for widgets#3574 */
.widget-header > .custom-header-widget {
    background-color: rgba(0, 0, 0, 0.5); /* 50% transparent black */
    padding: 10px; /* Optional: for some space around the text */
    color: white; /* Optional: for better readability */
}
/** Style Wider Tooltips by Andrew#3985 */
body:has(a.entity-mention[data-entity-tags~="feat"][aria-expanded="true"]) .tippy-box {
  max-width: 500px !important;
}
/** Style Nosides Tag#4145 */
.kanka-tag-nosides :is(.entity-submenu, .entity-sidebar) {
    display: none;
}
/** Style Salvatos' fix for sheet background#4595 */
.dnd5eMonsterStats {
    --foreground_colour: #ddd;
    --text_color_first: #21292F;
  --text_color_second: #3f7c99;
  --text_color_third: #1f3e4c;
}
.dnd5eMonsterStats .Ability_Scores h2 {
    color: inherit;
}
/** Style Modern Consolidated Theme v1 (2026-08)#8000 */
/* ============================================================
   LANDS OF ARDA - CONSOLIDATED MODERN THEME  v1  (Aug 2026)

   Replaces these legacy styles (now disabled):
     #3 Map button, #4 Header image position, #5 Editor size,
     #6 No Tooltip, #7/#8 Group markers, #9 Not losing my eyes,
     #10 Link Color, #11 Background Image, #12 Header Style,
     #13 Stretch dashboard, #15 Sidebar reduction,
     #16 Hot fix sidebar, #27 Sabari sidebar gradient.

   ROLLBACK: disable this style and re-enable those 14.
   Fonts come from style #2 (Cinzel + Inter added there).
   ============================================================ */

/* ---- 1. Design tokens ---- */
:root{
  --loa-display:'Cinzel','Eagle Lake',Georgia,serif;
  --loa-body:'Inter','Roboto Variable','Segoe UI',system-ui,sans-serif;
  --loa-ink:#e9edf5;
  --loa-accent:#7fd4ff;
  --loa-gold:#e9bd75;
  --loa-panel:rgba(12,17,28,0.86);
  --loa-line:rgba(255,255,255,0.10);
  --loa-radius:14px;
  --loa-shadow:0 12px 32px -14px rgba(0,0,0,0.8);
  --background-image:url(https://cdn.midjourney.com/6de3d3f0-1696-4614-9fb2-65943d09da3f/0_0.png);
  --sky-dashboard-picture-height:250px;
  --sky-dashboard-picture-height-mobile:200px;
}

/* ---- 2. Quiet the background art so content reads first ---- */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(7,9,18,0.45) 0%,rgba(7,9,18,0.80) 45%,rgba(7,9,18,0.93) 100%);
}
.wrapper{position:relative;z-index:1;}

/* ---- 3. Typography ---- */
body,p,li,td,.entity-content,.entry{
  font-family:var(--loa-body);
  color:var(--loa-ink);
}
.entity-content,.entry{font-size:16px;line-height:1.7;}
.entity-content p,.entry p{margin-bottom:1em;}
h1,h2,.widget-header-text,.custom-header-widget{
  font-family:var(--loa-display);
  font-weight:600;
  letter-spacing:0.02em;
  color:#ffffff;
  text-shadow:0 2px 12px rgba(0,0,0,0.7);
}
h3,h4,h5,h6{
  font-family:var(--loa-body);
  font-weight:600;
  color:#ffffff;
  text-shadow:none;
}
h3{font-size:1.15rem;letter-spacing:0.01em;}
h4{font-size:0.82rem;text-transform:uppercase;letter-spacing:0.09em;color:var(--loa-gold);}
h1.Header-Style2,h2.Header-Style2,h3.Header-Style2{
  color:#ffffff;
  text-shadow:0 1px 2px rgba(0,0,0,0.95),0 0 16px rgba(0,0,0,0.6);
}

/* ---- 4. Panels: frosted glass instead of flat boxes ---- */
.bg-box{
  background:var(--loa-panel) !important;
  border:1px solid var(--loa-line);
  border-radius:var(--loa-radius) !important;
  box-shadow:var(--loa-shadow);
  -webkit-backdrop-filter:blur(10px) saturate(115%);
  backdrop-filter:blur(10px) saturate(115%);
}
.widget-preview:hover,.entity.bg-box:hover{border-color:rgba(127,212,255,0.30);}

/* ---- 5. Readable fade on collapsed previews ---- */
.gradient-to-base-100{
  background:linear-gradient(180deg,rgba(12,17,28,0) 0%,rgba(12,17,28,0.72) 55%,rgba(12,17,28,0.97) 100%) !important;
  height:5rem !important;
}
.preview.max-h-52{max-height:17rem !important;}

/* ---- 6. Links ---- */
.entity-content a,.entry a{
  color:var(--loa-accent);
  text-decoration:none;
  border-bottom:1px solid rgba(127,212,255,0.28);
  transition:color .15s ease,border-color .15s ease;
}
.entity-content a:hover,.entry a:hover{
  color:#c6ecff;
  border-bottom-color:#c6ecff;
}

/* ---- 7. Layout: consistent width, no dead gutters ---- */
section.content{width:100%;max-width:1600px;margin-inline:auto;}
.entity-body{gap:1.5rem;}
.content .grid.grid-cols-2{grid-template-columns:repeat(auto-fill,minmax(190px,1fr)) !important;}
.content .grid.grid-cols-2 > .entity{width:100% !important;}

/* ---- 8. Consistent imagery ---- */
.entity .avatar.cover-background{background-position:center 22%;}
.entity-content img{max-width:100%;height:auto;border-radius:10px;box-shadow:0 10px 26px -14px rgba(0,0,0,0.85);}

/* ---- 9. Sidebar (replaces #15, #16, #27) ---- */
.main-sidebar{padding-bottom:5rem;border-right:1px solid var(--loa-line);}
.sidebar{background-image:linear-gradient(to left,rgba(4,6,14,0.92),rgba(14,10,38,0.55));}
.main-sidebar .section-other,.main-sidebar .section-calendars,.main-sidebar .section-calndars{display:none;}
.is-admin .main-sidebar .section-other,.is-admin .main-sidebar .section-calendars,.is-admin .main-sidebar .section-calndars{display:block;}

/* ---- 10. Tables ---- */
table tbody tr{transition:background-color .12s ease;}
table tbody tr:hover{background:rgba(127,212,255,0.06);}

/* ---- 11. Maps (replaces #3, #6, #7, #8, #10) ---- */
.marker-popup-entry{font-size:0;}
.marker-popup-entry > p:first-child{font-size:14px;}
.marker-cluster-small{background-color:rgba(0,0,0,0.10);}
.marker-cluster-small div{background-color:rgba(0,0,0,1);}
li[data-attribute="maplocatorzoom"] > strong{display:none;}
li[data-attribute="maplocatorzoom"] > span{
  display:inline-block;
  justify-self:center;
  padding:6px 12px;
  color:#ffffff;
  border-radius:10px;
  border:1px solid var(--loa-line);
  background:linear-gradient(180deg,rgba(46,62,96,0.92),rgba(16,23,38,0.94));
  box-shadow:0 8px 20px -10px rgba(0,0,0,0.9);
}
li[data-attribute="maplocatorzoom"] > span > a{
  color:var(--loa-gold);
  text-shadow:0 1px 2px rgba(0,0,0,0.9);
}

/* ---- 12. Entity banner focal points (replaces #4) ---- */
.kanka-tag-bannertop .entity-grid .entity-header .entity-banner{background-position:50% 0%;}
.kanka-tag-bannerupper .entity-grid .entity-header .entity-banner{background-position:50% 25%;}
.kanka-tag-bannermid .entity-grid .entity-header .entity-banner{background-position:50% 50%;}
.kanka-tag-bannerlower .entity-grid .entity-header .entity-banner{background-position:50% 75%;}
.kanka-tag-bannerbottom .entity-grid .entity-header .entity-banner{background-position:50% 100%;}

/* ---- 13. Editor + dashboard sizing (replaces #5, #13, #9) ---- */
.note-editable{height:70vh !important;}
#campaign-dashboard .tallerlist .pinned-entity.preview{max-height:350px;}
#campaign-dashboard div:not(.pinned-entity) > .entity-content{min-height:280px;}
.user-role-update .btn{color:#8b93a3;}

/* ---- 14. Accessibility ---- */
:focus-visible{outline:2px solid var(--loa-accent);outline-offset:2px;}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important;}
}

/* ---- 15. Grid cards fill the row (added v1.1) ---- */
.content .flex.flex-wrap > .entity{
  width:auto !important;
  flex:1 1 176px;
  min-width:150px;
  max-width:280px;
}
/** Style Modern Consolidated Theme v2 (2026-08)#8001 */
/* ==========================================================
   Modern Consolidated Theme v2 (2026-08) - additive layer
   Depends on "Modern Consolidated Theme v1 (2026-08)" for its
   --loa-* design tokens. This style only ADDS polish on top.
   ROLLBACK: disable this single style to return to the exact
   v1 appearance. Nothing here overrides v1 structurally.
   ========================================================== */

/* 1 - App shell: sticky glass top bar ---------------------- */
header.fixed.top-0{
  background:rgba(12,17,28,.72);
  backdrop-filter:blur(14px) saturate(130%);
  -webkit-backdrop-filter:blur(14px) saturate(130%);
  border-bottom:1px solid var(--loa-line);
  box-shadow:0 2px 18px rgba(0,0,0,.35);
}
header.fixed.top-0 a,header.fixed.top-0 button{
  border-radius:10px;transition:background .15s ease,color .15s ease;
}
header.fixed.top-0 a:hover,header.fixed.top-0 button:hover{background:rgba(255,255,255,.07)}

/* 2 - Sidebar navigation: pills + accent rail -------------- */
.main-sidebar a{
  border-radius:10px;position:relative;
  transition:background .15s ease,color .15s ease,padding-left .15s ease;
}
.main-sidebar a:hover{background:rgba(255,255,255,.06);padding-left:.85rem}
.main-sidebar li.active > a,
.main-sidebar a.active,
.main-sidebar a[class*="bg-primary"]{
  background:rgba(127,212,255,.14) !important;
  color:var(--loa-accent) !important;
  box-shadow:inset 3px 0 0 var(--loa-accent);
  font-weight:600;
}
.main-sidebar li.active > a:hover{background:rgba(127,212,255,.22) !important}
.main-sidebar .menu-title,.main-sidebar .sidebar-section-title{
  text-transform:uppercase;letter-spacing:.09em;font-size:.68rem;
  opacity:.55;font-weight:600;
}

/* 3 - Entity hero header ----------------------------------- */
.entity-header{
  min-height:230px;padding:1.75rem 1.5rem;align-items:flex-end;
  border-radius:var(--loa-radius) var(--loa-radius) 0 0;overflow:hidden;
}
.entity-header::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,9,16,.10) 0%,rgba(6,9,16,.55) 55%,rgba(6,9,16,.88) 100%);
}
.entity-header > *{position:relative;z-index:2}
.entity-header-image img,.entity-header-image picture{
  border-radius:14px;box-shadow:0 12px 32px rgba(0,0,0,.55);
  outline:2px solid rgba(255,255,255,.14);outline-offset:2px;
}
.entity-header-text h1{text-shadow:0 3px 14px rgba(0,0,0,.7);letter-spacing:.01em}
.entity-header-text .flex.flex-wrap.gap-2 > a{
  padding:.18rem .6rem;border-radius:999px;font-size:.78rem;
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.07);
  transition:background .15s ease,transform .15s ease;
}
.entity-header-text .flex.flex-wrap.gap-2 > a:hover{
  background:rgba(255,255,255,.16);transform:translateY(-1px);
}

/* 4 - Entity submenu as a single card ---------------------- */
.entity-submenu .bg-box{background:transparent;box-shadow:none;border:0;margin:0}
.entity-submenu > .hidden.md\:flex{
  gap:.15rem;padding:.5rem;border-radius:var(--loa-radius);
  background:var(--loa-panel);border:1px solid var(--loa-line);
  backdrop-filter:blur(10px) saturate(115%);
  -webkit-backdrop-filter:blur(10px) saturate(115%);
  box-shadow:var(--loa-shadow);
}
.entity-submenu a{border-radius:9px;transition:background .15s ease,color .15s ease}
.entity-submenu a:hover{background:rgba(255,255,255,.07)}
.entity-submenu li.active > a,.entity-submenu a.active{
  background:rgba(127,212,255,.14) !important;
  color:var(--loa-accent) !important;
}

/* 5 - Buttons ---------------------------------------------- */
.btn,button.btn,a.btn{
  border-radius:999px;font-weight:600;letter-spacing:.01em;
  transition:transform .12s ease,box-shadow .15s ease,filter .15s ease;
}
.btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,0,0,.4);filter:brightness(1.08)}
.btn:active{transform:translateY(0)}
.btn-primary{
  background-image:linear-gradient(135deg,#5fb8e8 0%,#7fd4ff 100%);
  border:0;color:#06121b;
}

/* 6 - Cards & grid entities -------------------------------- */
.content .flex.flex-wrap > .entity{
  border-radius:var(--loa-radius);overflow:hidden;
  transition:transform .18s ease,box-shadow .18s ease;
}
.content .flex.flex-wrap > .entity:hover{
  transform:translateY(-4px);box-shadow:0 16px 34px rgba(0,0,0,.5);
}
.entity .cover-background,.entity img{transition:transform .35s ease}
.entity:hover .cover-background,.entity:hover img{transform:scale(1.05)}

/* 7 - Tables. NOTE: no overflow:hidden and no position:sticky
   header - Kanka wraps tables in .overflow-x-auto, which turns
   a sticky thead into a header that scrolls away anyway. */
table{border-collapse:separate;border-spacing:0}
table thead th{
  background:rgba(14,20,32,.94);
  border-bottom:1px solid var(--loa-line) !important;
}
table thead th,table thead th a,table thead th button,table thead th span{
  text-transform:uppercase;letter-spacing:.07em;font-size:.72rem;
}
table thead th:first-child{border-top-left-radius:var(--loa-radius)}
table thead th:last-child{border-top-right-radius:var(--loa-radius)}
table tbody tr:last-child td:first-child{border-bottom-left-radius:var(--loa-radius)}
table tbody tr:last-child td:last-child{border-bottom-right-radius:var(--loa-radius)}
table tbody tr{transition:background .12s ease}
table tbody tr:nth-child(even){background:rgba(255,255,255,.022)}
table tbody td{border-bottom:1px solid rgba(255,255,255,.05)}

/* 8 - Form controls. Checkboxes/radios/ranges are excluded so
   their native checked state stays visible. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="submit"]),
select,textarea,.input,.select,.textarea{
  border-radius:10px !important;
  background:rgba(255,255,255,.05) !important;
  border:1px solid var(--loa-line) !important;
  transition:border-color .15s ease,box-shadow .15s ease;
}
input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus,textarea:focus,.input:focus,.select:focus{
  border-color:var(--loa-accent) !important;
  box-shadow:0 0 0 3px rgba(127,212,255,.18) !important;
  outline:none !important;
}
input[type="checkbox"],input[type="radio"]{accent-color:var(--loa-accent)}

/* 9 - Dropdowns, modals, tooltips -------------------------- */
.dropdown-content,.modal-box,.tooltip-inner,.popover,[role="menu"]{
  border-radius:var(--loa-radius) !important;
  background:rgba(14,20,32,.92) !important;
  border:1px solid var(--loa-line) !important;
  backdrop-filter:blur(12px) saturate(120%);
  -webkit-backdrop-filter:blur(12px) saturate(120%);
  box-shadow:0 18px 44px rgba(0,0,0,.55) !important;
}
.modal-backdrop{backdrop-filter:blur(3px);background:rgba(4,7,13,.6)}

/* 10 - Scrollbars, motion, selection ----------------------- */
*{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.22) transparent}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:999px}
::-webkit-scrollbar-thumb:hover{background:rgba(127,212,255,.45)}
html{scroll-behavior:smooth}
::selection{background:rgba(127,212,255,.32);color:#fff}

/* 11 - Entry typography polish ----------------------------- */
.entity-content hr,.entry hr{
  border:0;height:1px;margin:2rem 0;
  background:linear-gradient(90deg,transparent,var(--loa-line),transparent);
}
.entity-content blockquote,.entry blockquote{
  border-left:3px solid var(--loa-gold);
  background:rgba(233,189,117,.07);
  padding:.75rem 1.1rem;border-radius:0 10px 10px 0;font-style:italic;
}
.entity-content code,.entry code{
  background:rgba(255,255,255,.08);padding:.1rem .35rem;
  border-radius:6px;font-size:.9em;
}
.entity-content img,.entry img{border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.4)}

/* 12 - Quieter footer (fade-in keyframes removed - Kanka's
   CSS sanitizer was corrupting the stylesheet after them) -- */
footer,.footer{opacity:.42;transition:opacity .2s ease}
footer:hover,.footer:hover{opacity:.85}

/* 13 - Reduced motion -------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;scroll-behavior:auto !important}
}

/* 14 - Player Showcase: 75% image / 25% text ratio ---------
   Applies to the "Random Player Characters" widget. The card
   box carries BOTH "widget-random" and "bg-box" classes (no
   separate ".widget" class exists on it), so it must be
   targeted directly as ".widget-random.bg-box". Header is
   flattened via display:contents so the image, name link and
   body preview become direct flex children of a fixed-height
   card: image is pinned to 75%, name + bio preview share 25%. */
.widget-random.bg-box{
  display:flex;
  flex-direction:column;
  height:500px;
}
.widget-random .widget-header{
  display:contents;
}
.widget-random .widget-image{
  flex:0 0 75%;
  min-height:0;
  height:auto !important;
  aspect-ratio:auto !important;
  overflow:hidden;
}
.widget-random .widget-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 22%;
}
.widget-random .widget-header > a.text-link{
  flex:0 0 auto;
}
.widget-random .widget-body{
  flex:1 1 25%;
  min-height:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  padding-top:.5rem;
}
.widget-random .widget-body .preview{
  flex:1 1 auto;
  max-height:none !important;
  overflow:hidden;
}
.widget-random .widget-body span.inline-block{flex:0 0 auto}

@media (max-width:768px){
  .widget-random.bg-box{height:420px}
}