/* KARMA: Yin & Yang -- shared site identity. Solid matte iron, orange edge cuts, sparse wear. */
:root{--karma-orange:#ff7b15;--karma-paper:#111315;--karma-charcoal:#1a1b1e;--karma-white:#f6f4f1;}
body{font-synthesis:none}
.site-header{height:auto!important;min-height:90px;gap:1rem;padding:12px clamp(18px,3.5vw,64px)!important;border-bottom:3px solid #f2f1ed!important;box-shadow:0 4px 0 #ef7418;background:#08090af5!important}
.site-header .brand{width:auto!important;min-width:213px;display:flex;gap:10px;align-items:center;text-decoration:none;}
.site-brandmark{display:grid;place-items:center;width:43px;height:46px;color:#fff;font:900 30px/1 Impact,Arial,sans-serif;transform:skew(-9deg);background:#0e1012;outline:2px solid #ff7d1b;border-left:5px solid #f4f4f4}
.site-brandwords{display:grid;line-height:1;gap:3px}.site-brandwords strong{font:900 29px/.9 Impact,'Arial Narrow',Arial,sans-serif;letter-spacing:-.025em;color:#fff}
.site-brandwords em{font:900 13px/1 Arial,sans-serif;font-style:normal;letter-spacing:.16em;color:#ff7e14}.site-brandwords small{font:700 8px/1.35 Arial,sans-serif;letter-spacing:.055em;color:#c4c4c4!important;border:0;padding:0!important}
.site-header .site-nav{display:flex;flex:1 1 auto;align-items:center;justify-content:center;gap:clamp(.3rem,.9vw,.8rem);padding:0;overflow:visible;white-space:nowrap}
.site-header .site-nav>a,.site-more>summary{padding:12px 7px;letter-spacing:.07em;text-transform:uppercase;color:#dedede;font:900 11px/1 Arial,Helvetica,sans-serif;text-decoration:none;cursor:pointer}
.site-header .site-nav>a:hover,.site-header .site-nav>a:focus-visible,.site-more>summary:hover{color:#ff871d}
.site-header .site-nav>a[aria-current]{color:#fff;border-bottom:3px solid #ff7d15}
.site-more{position:relative}.site-more>summary{list-style:none}.site-more>summary::-webkit-details-marker{display:none}.site-more>summary span{color:#ff7d15}
.site-subnav{position:absolute;right:-8px;top:calc(100% + 10px);z-index:20;min-width:215px;border:2px solid #777;border-left:4px solid #ff7e15;background:#111315;padding:9px;box-shadow:9px 12px 0 #020304}
.site-subnav a{display:block;padding:11px 12px;border-bottom:1px solid #32363a;text-transform:uppercase;color:#e7e4e0;font:800 11px/1.2 Arial,sans-serif}
.site-subnav a:hover{color:#ff8530;background:#242425}
.site-header .header-action{border:2px solid #ff7c16;clip-path:polygon(0 0,calc(100% - 11px) 0,100% 11px,100% 100%,0 100%);background:#161719;padding:12px 13px;font-weight:950}
.site-header .header-action span{margin-left:8px}
.site-menu-toggle{display:none;border:2px solid #ff7c1c;background:#141619;color:#f5f5f5;padding:12px;font-weight:950;letter-spacing:.06em}
.site-readiness{max-width:1500px;margin:13px auto 0;padding:11px clamp(18px,4vw,60px);border-bottom:1px solid #604632;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;background:linear-gradient(90deg,#111317,#1b1510 80%,#111317)}
.site-readiness span{font:900 10px/1.3 Arial,sans-serif;letter-spacing:.11em;color:#fff;white-space:nowrap}
.site-readiness i{display:inline-block;height:7px;width:7px;background:#ff7c17;box-shadow:0 0 0 2px #121416;margin-right:5px}
.site-readiness p{margin:0;color:#c8c6c2;font-size:11px;line-height:1.55}
.site-readiness a{color:#ffa365;font:900 11px/1.3 Arial,sans-serif;text-decoration:underline;text-underline-offset:4px}
.site-title-block{padding:28px 0 0;position:relative;z-index:2}
.site-title-block .site-label{color:#ff801a;font:900 11px/1.4 Arial,sans-serif;letter-spacing:.22em;margin:0 0 17px}
.site-title-block h1{font:900 clamp(50px,9vw,108px)/.87 Impact,'Arial Narrow',Arial,sans-serif!important;letter-spacing:-.035em!important;margin:0!important;transform:none!important;text-shadow:3px 3px 0 #080809!important}
.site-title-block h1 span{display:block;color:#ff7c12;font-size:.48em;letter-spacing:.065em;margin-top:12px}
.site-title-sub{color:#d9d6d1;font-size:14px;font-weight:800;letter-spacing:.02em;margin:20px auto 0}
.legacy-crest{max-width:540px!important;margin:8px auto -28px!important;opacity:.83;filter:grayscale(.38)}
/* Browser-sized or keyboard-sized: keep the guide visible and buttons usable. */
.site-legal{display:flex;gap:15px;align-items:center;justify-content:center;flex-wrap:wrap;padding-top:8px;border-top:1px solid #666;font-size:11px}
.site-legal a{color:#ddd;text-decoration:underline;text-underline-offset:3px}
.site-legal a:hover{color:#ff8723}
a,button,summary{transition:color .13s ease,background-color .13s ease}
a:focus-visible,button:focus-visible,summary:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #ff901c;outline-offset:3px}
@media(max-width:1120px){
 .site-header{position:sticky}
 .site-menu-toggle{display:inline-flex;align-items:center;justify-content:center;order:2;margin-left:auto}
 .site-header .header-action{order:1;margin-left:auto}
 .site-header .site-nav{display:none;position:absolute;top:100%;left:0;right:0;max-height:calc(100vh - 100px);overflow:auto;white-space:normal;background:#101113;border:2px solid #8c8b8b;border-top:4px solid #ff7b15;box-shadow:0 12px 30px #000d;padding:12px;flex-flow:column;align-items:stretch;gap:3px}
 .site-header .site-nav.is-open{display:flex}
 .site-header .site-nav>a,.site-more>summary{padding:13px 14px}
 .site-more>summary{display:block}
 .site-subnav{position:static;min-width:0;box-shadow:none;border-color:#484a4d;border-left-color:#ff7c16;margin:5px 0;padding:5px}
 .site-readiness{margin-top:9px}
}
@media(max-width:560px){
 .site-header{min-height:73px;gap:10px}.site-header .brand{min-width:180px}
 .site-header .header-action{display:none}.site-brandmark{height:38px;width:36px;font-size:25px}
 .site-brandwords strong{font-size:25px}.site-brandwords em{font-size:11px}.site-brandwords small{font-size:7px}
 .site-title-block h1{font-size:clamp(46px,13vw,78px)!important}
 .site-title-block{padding-top:15px}.legacy-crest{max-width:390px!important}
 .site-readiness p{width:100%;order:3}.site-readiness a{margin-left:auto}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition:none!important}}

/* Limit long guide panels to their own scroll area; never cover adjacent controls. */
@media(min-width:761px){
 #guide .guide-layout{height:610px;max-height:610px;min-height:0;overflow:hidden}
 #guide .guide-layout>aside,#guide .guide-layout>.paper{min-height:0;max-height:100%;overflow-y:auto;overflow-x:hidden}
}
#catalog{position:relative;isolation:isolate}
#catalog .guide-layout{min-height:0;overflow:hidden}
#catalog .guide-layout>aside,#catalog .guide-layout>.paper{min-height:0;overflow-y:auto}
@media(max-width:760px){
 #guide .guide-layout,#catalog .guide-layout{height:auto;max-height:none;overflow:visible}
 #guide .guide-layout>.paper,#catalog .guide-layout>.paper{max-height:none;overflow:visible}
}

/* Native hidden attributes take precedence over legacy layout display classes. */
[hidden]{display:none!important}

/* Reggae One by Fontworks: angular Japanese display lettering, SIL OFL.
   Self-hosted Latin and Japanese subsets; license in assets/fonts/OFL-Reggae-One.txt. */
@font-face{font-family:'Karma Reggae';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/reggae-one-latin-ext.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-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Karma Reggae';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/reggae-one-latin.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:'Karma Reggae';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/reggae-one-japanese.woff2') format('woff2');unicode-range:U+3000-30FF,U+31F0-31FF,U+3400-4DBF,U+4E00-9FFF,U+F900-FAFF,U+FF00-FFEF}
:root{--karma-gold:#ffd58a;--karma-coral:#ff977d;--karma-jade:#80e5c3;--karma-sky:#8bd8ff;--karma-violet:#c9b0ff;--karma-display:'Karma Reggae','Yu Mincho',Georgia,serif;--section-accent:var(--karma-gold)}
body{background-image:radial-gradient(ellipse at 5% 0%,#8e29412e,transparent 35%),radial-gradient(ellipse at 95% 20%,#166b6b24,transparent 36%),linear-gradient(160deg,#17131d,#080c12 68%)!important}
body h1,body h2,.site-title-block h1,.site-brandwords strong,.profile-top .jp{font-family:var(--karma-display)!important;font-weight:400!important;letter-spacing:.015em!important;overflow-wrap:anywhere}
body h1{color:var(--karma-gold);line-height:1.2!important;text-shadow:0 3px 0 #0a0a12,0 0 30px #eb6c3020}
body h2{color:var(--section-accent);line-height:1.35}
body h3{color:var(--section-accent)}
.site-title-block h1{font-size:clamp(42px,8vw,96px)!important;color:var(--karma-gold);text-shadow:3px 4px 0 #231329,0 0 45px #ff855228!important}
.site-title-block h1 span{color:var(--karma-coral);letter-spacing:.13em;margin-top:8px}
.site-title-block .site-label,.eyebrow{color:var(--karma-jade)!important;letter-spacing:.18em}
.site-title-sub{color:#f4d9cb}
.site-brandwords strong{font-size:25px;letter-spacing:0!important;color:var(--karma-gold)}
.site-brandwords em{color:var(--karma-coral)}
.site-brandmark{color:var(--karma-gold);border-color:var(--karma-gold);outline-color:var(--karma-coral);background:#251522}
.site-header{border-bottom-color:var(--karma-gold)!important;box-shadow:0 3px 0 #aa536b,0 8px 35px #0007;background:#100e18f5!important}
.site-header .site-nav>a:nth-of-type(2),.member-nav nav a:nth-child(1){color:var(--karma-jade)}
.site-header .site-nav>a:nth-of-type(3),.member-nav nav a:nth-child(2){color:var(--karma-coral)}
.site-header .site-nav>a:nth-of-type(4),.member-nav nav a:nth-child(3){color:var(--karma-violet)}
.site-header .site-nav>a:nth-of-type(5),.member-nav nav a:nth-child(4){color:var(--karma-sky)}
.site-header .site-nav>a:nth-of-type(6){color:var(--karma-gold)}
.site-header .site-nav>a:hover,.member-nav nav a:hover{color:#fff;text-shadow:0 0 16px currentColor}
.site-header .header-action{border-color:var(--karma-coral);color:var(--karma-gold);background:linear-gradient(120deg,#38202e,#191620)}
.site-readiness{border-color:#715b73;background:linear-gradient(100deg,#201622,#12252a)}
.site-readiness span,.site-readiness a{color:var(--karma-jade)}
.site-readiness i{background:var(--karma-jade)}
#world,#guide,#elections{--section-accent:var(--karma-jade)}
#lore,#paths,#updates{--section-accent:var(--karma-coral)}
#elements,#catalog{--section-accent:var(--karma-sky)}
#record{--section-accent:var(--karma-violet)}
main strong,main dt{color:var(--section-accent)}
main .paper h3,main .paper h4,main .topic:hover{color:var(--section-accent)}
.member-hero h1{font-size:clamp(2rem,6vw,4.75rem);line-height:1.2;letter-spacing:.01em}
.member-hero h1 span{color:var(--karma-coral)}
.member-brand{color:var(--karma-gold)}
.member-brand span{color:var(--karma-coral)}
.member-nav{border-bottom-color:var(--karma-gold);box-shadow:0 4px 0 #a55775}
.member-grid>.panel:nth-child(even){--section-accent:var(--karma-jade)}
.member-container .panel h2{border-bottom-color:var(--section-accent);font-size:clamp(1.2rem,3vw,1.65rem)}
.panel label{color:var(--karma-sky)}
.panel input,.panel textarea,.panel select{border-bottom-color:var(--karma-jade)}
.member-button:not(:disabled):not(.secondary){background:linear-gradient(120deg,#ffd58a,#ff9b70);color:#211322}
.member-button.secondary{color:var(--karma-sky)}
.result{color:var(--karma-jade)}
.status{color:var(--karma-gold);border-color:#d9a65e;background:#251c23}
.status.warning{border-color:var(--karma-coral);color:#ffc5b6}
#class-tabs button:nth-child(1),.skill:nth-child(5n+1) h4{color:var(--karma-coral)}
#class-tabs button:nth-child(2),.skill:nth-child(5n+2) h4{color:var(--karma-gold)}
#class-tabs button:nth-child(3),.skill:nth-child(5n+3) h4{color:var(--karma-sky)}
#class-tabs button:nth-child(4),.skill:nth-child(5n+4) h4{color:var(--karma-jade)}
#class-tabs button:nth-child(5),.skill:nth-child(5n+5) h4{color:var(--karma-violet)}
#class-tabs button[aria-selected=true]{background:#302138;border-color:var(--karma-gold)}
#class-profile .profile-top h2{color:var(--karma-gold)}
#class-profile .subtitle,.section-label{color:var(--karma-jade)}
.site-legal a:nth-child(odd){color:var(--karma-sky)}
.site-legal a:nth-child(even){color:var(--karma-violet)}
@media(max-width:560px){.site-brandwords strong{font-size:22px}.site-title-block h1{font-size:clamp(38px,11vw,60px)!important}body h2{font-size:clamp(1.35rem,6vw,2rem)}}

/* Sword-cut lettering and inked frames: white face, black keyline, orange edge. */
:root{--karma-stroke:#080808;--karma-edge:#ff7b15;--karma-metal:#fff9f2}
body h1,body h2{paint-order:stroke fill;-webkit-text-stroke:1.5px var(--karma-stroke);text-shadow:2px 2px 0 #000,3px 3px 0 #ff7b15}
body h1{color:var(--karma-metal);-webkit-text-stroke:3px #080808;text-shadow:2px 2px 0 #fff9f2,5px 5px 0 #080808,7px 7px 0 #ff7b15}
.site-title-block h1{color:#fff9f2;-webkit-text-stroke:4px #080808;text-shadow:2px 2px 0 #fff9f2,5px 5px 0 #080808,8px 8px 0 #ff7b15!important;letter-spacing:-.025em!important}
.site-title-block h1 span{color:#ff8c32;-webkit-text-stroke:2px #080808;text-shadow:1px 1px 0 #fff9f2,4px 4px 0 #080808;letter-spacing:.09em}
.site-brandwords strong{color:#fff9f2;paint-order:stroke fill;-webkit-text-stroke:1.25px #080808;text-shadow:2px 2px 0 #ff7b15}
.site-brandwords em{color:#ff8c32;text-shadow:1px 1px 0 #000}
.site-brandmark{color:#fff;background:#090909;outline:3px solid #ff7b15;border-left:5px solid #fff;box-shadow:3px 3px 0 #000}
.site-header{border-bottom:4px solid #fff9f2!important;box-shadow:0 4px 0 #080808,0 7px 0 #ff7b15;background:#0b0b0bf5!important}
.site-menu-toggle,.site-header .header-action{border:3px solid #fff9f2;border-bottom-color:#ff7b15;background:#0a0a0a;color:#fff9f2;box-shadow:3px 3px 0 #080808}
.member-nav{border-bottom:4px solid #fff9f2;box-shadow:0 4px 0 #080808,0 7px 0 #ff7b15}
.member-hero h1 span{color:#ff8c32;-webkit-text-stroke:2px #080808;text-shadow:2px 2px 0 #fff9f2,5px 5px 0 #080808}
body .paper,body .dark-paper,body .zone-detail,body .lore-prologue,body .record-panel,body .election-card,
body .lore-chapter,body .path-card,body .nation-card,body .step{
 border:3px solid #fff9f2!important;border-left:5px solid #ff7b15!important;
 background-color:#0c0d0f!important;box-shadow:inset 0 0 0 3px #080808,4px 4px 0 #080808,6px 6px 0 #ff7b15;
}
body .panel,body .forum-board{box-shadow:inset 0 0 0 3px #fff9f2,inset 0 0 0 6px #080808,inset 0 -9px 0 #ff7b15!important}
body .panel::before,body .forum-board::before{opacity:1;background:linear-gradient(135deg,#ff7b15 0 12px,transparent 13px) top left / 50px 50px no-repeat}
body .button,body button[data-category],body button[data-catalog-kind]{border:3px solid #fff9f2;border-bottom-color:#ff7b15;background:#101013;box-shadow:2px 2px 0 #080808;color:#fff9f2;font-weight:900}
body .button:hover,body button[data-category]:hover,body button[data-catalog-kind]:hover{background:#38200e;color:#fff}
body .button:focus-visible,body button:focus-visible,body a:focus-visible{outline:3px solid #ff7b15;outline-offset:4px}
.member-button:not(:disabled):not(.secondary){background:#ff8c32;color:#080808;box-shadow:inset 0 0 0 3px #fff9f2,inset 0 0 0 6px #080808}
.member-button.secondary{box-shadow:inset 0 0 0 3px #fff9f2,inset 0 -6px 0 #ff7b15;color:#fff9f2}
.site-readiness{border-bottom:2px solid #ff7b15;background:#111114}
.section-heading{border-bottom:3px solid #fff9f2;padding-bottom:18px}
#class-profile .profile-top h2{color:#fff9f2;font-family:var(--karma-display);-webkit-text-stroke:2px #080808;text-shadow:2px 2px 0 #080808,4px 4px 0 #ff7b15}
@media(max-width:560px){
 body h1{-webkit-text-stroke:2px #080808;text-shadow:1px 1px 0 #fff9f2,3px 3px 0 #080808,5px 5px 0 #ff7b15}
 .site-title-block h1{-webkit-text-stroke:2px #080808;text-shadow:1px 1px 0 #fff9f2,3px 3px 0 #080808,5px 5px 0 #ff7b15!important}
 body h2{-webkit-text-stroke:1px #080808;text-shadow:1px 1px 0 #080808,2px 2px 0 #ff7b15}
}

/* Owner-supplied KARMA wordmark and four nation crests. */
body header .site-logo-link,body .site-header .brand{min-width:0;flex-shrink:0;display:block;line-height:0}
body .site-logo{display:block;width:210px;max-width:100%;height:auto;object-fit:contain}
body .hero-logo{display:block;width:min(780px,100%);height:auto;margin:12px auto 22px}
body .site-title-block{width:100%;max-width:850px}
body .world-map-preview{display:block;position:static;width:100%;height:auto;transform:none}
body .nation-card img{height:175px;margin-top:16px}
body .outlands-card{background:linear-gradient(140deg,#413220,#13191b)}
body .outlands-card img{object-fit:cover;border:2px solid #ff8b3d}
body .atlas-image{aspect-ratio:3/2}
@media(max-width:760px){
  body .site-logo{width:174px}
  body .hero-logo{margin:12px auto 20px}
  body .nation-card img{height:150px}
  body .outlands-card:last-child{display:block;text-align:center}
  body .outlands-card img{height:auto;max-height:190px}
}
body .site-title-block{margin-inline:auto}

/* Keep the artist's map text unobstructed. Landmark hitboxes remain transparent. */
body .atlas-image,body .named-world-map{position:relative}

/* Every current codex entry has a selectable circle, including concepts without icon art. */
.element-picker{min-width:0}
.element-selection{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 18px;padding:12px 0 20px}
.element-selection small{font:10px Consolas,monospace;color:#e6d8bd;letter-spacing:1px}
.element-selection strong{font-family:var(--karma-display);font-size:25px}
.element-selection p{width:100%;margin:0;color:#b9c8d0;font-size:12px}
.element-circle-list{max-height:680px;overflow-y:auto;overscroll-behavior:contain;padding:4px 14px 16px 4px;scrollbar-color:#ff9447 #17191e;border-top:1px solid #615543}
.element-family{padding:18px 0 22px;border-bottom:1px solid #544332}
.element-family h3{font-family:var(--karma-display);font-size:17px;color:#ffce97;margin:0 0 20px}
.element-circle-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px 10px}
.element-circle{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0;padding:0;border:0;background:transparent;color:#f8ead5;cursor:pointer;font:11px/1.4 system-ui,sans-serif}
.element-orb{width:min(86px,100%);aspect-ratio:1;display:grid;place-items:center;border-radius:50%;border:2px solid var(--element-color);padding:4px;background:radial-gradient(circle at 35% 25%,#34313f,#0a0b0e 70%);box-shadow:0 0 0 2px #090909,0 0 0 3px #b8a681,0 7px 12px #0008;transition:box-shadow .15s}
.element-orb img{display:block;width:100%;height:100%;object-fit:contain;border-radius:50%}
.element-orb>span{font-family:var(--karma-display);font-size:24px;color:var(--element-color);text-shadow:1px 2px #000}
.element-circle-name{max-width:100%;overflow-wrap:anywhere}
.element-circle[aria-pressed="true"] .element-orb,.element-circle:hover .element-orb{box-shadow:0 0 0 3px #090909,0 0 0 5px #fff1cf,0 0 24px var(--element-color)}
.element-circle:focus-visible{outline:2px solid #fff1cf;outline-offset:6px;border-radius:8px}
@media(max-width:1100px){.element-circle-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:760px){.element-circle-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 14px}.element-circle-list{max-height:560px}.element-orb{width:80px}}
.heraldry-intro{display:grid;grid-template-columns:1fr 2fr;align-items:center;gap:28px}
.no-house-banner{display:flex;align-items:center;gap:24px;padding:22px;border:2px solid #c9ae78;background:#090a0e}
.no-house-banner img{height:180px;width:auto;max-width:30%;object-fit:contain}
.no-house-banner h3{font-family:var(--karma-display);color:#f3d39b}
.no-house-banner p{font-size:13px;color:#c9c0b2}
.race-insignia{margin:0;min-width:0}
.race-insignia img,.heraldry-sheets img{display:block;width:100%;height:auto}
.heraldry-sheets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:28px;align-items:start}
.heraldry-sheets details{border:2px solid #d1b58b;background:#0d0e13}
.heraldry-sheets summary{padding:18px;color:#ffcd89;cursor:pointer;font-family:var(--karma-display)}
.heraldry-sheets figure{margin:14px}
#heraldry figcaption{font-size:11px;color:#c5bcae;margin-top:12px}
@media(max-width:760px){.heraldry-intro,.heraldry-sheets{grid-template-columns:1fr}.no-house-banner img{height:140px}}
.element-circle[data-main-element] .element-orb{border-width:3px}
#elements .wheel-controls{justify-content:flex-start;margin:0 0 16px}
.element-family:first-child .element-circle-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:760px){.element-family:first-child .element-circle-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Cropped from the owner's transparent KARMA identity sheets; labels remain live text. */
body .hero-logo{width:min(1050px,100%);margin:14px auto 24px}
body .site-title-block{max-width:1100px}
#home.hero{isolation:isolate}
.section-heading{position:relative;border-bottom:0;padding-bottom:48px}
.section-heading::after{content:"";position:absolute;left:0;right:0;bottom:12px;height:2px;background:linear-gradient(90deg,transparent,#d8c79c 20%,#ff8c32 50%,#d8c79c 80%,transparent);opacity:.8;pointer-events:none}
body .button,body .member-button,body .site-header .header-action{
 display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;
 min-height:62px;min-width:185px;max-width:100%;padding:18px 38px;
 border:0!important;clip-path:none;box-shadow:none!important;
 background:transparent url('assets/identity/action-frame.webp') center/100% 100% no-repeat!important;
 color:#fff2d7!important;text-align:center;white-space:normal;line-height:1.45;
 text-shadow:0 2px 2px #000,1px 0 #000,-1px 0 #000;
}
body .button,body .site-header .header-action{font-size:11px}
body button,body [role="button"],body .site-menu-toggle{text-align:center}
body .member-button{font-size:13px}
body .button:hover:not(:disabled),body .member-button:hover:not(:disabled),body .site-header .header-action:hover{filter:brightness(1.22)}
body .button:disabled,body .member-button:disabled{filter:grayscale(1);opacity:.55;cursor:not-allowed}
body .site-header .header-action{min-width:185px;padding-inline:38px}
body .actions{flex-wrap:wrap;justify-content:center}
@media(max-width:760px){
 .section-heading{padding-bottom:38px}
 .section-heading::after{height:22px}
 #home.hero::before,#home.hero::after{top:10px;width:clamp(55px,14vw,100px)}
 #home .site-title-block{padding-top:65px}
 body .hero-logo{margin:8px auto 20px}
 body .actions{flex-direction:column;align-items:center;gap:8px}
 body .actions .button{width:min(300px,100%)}
}
@media(max-width:560px){body .site-header .header-action{display:none}}

/* Second supplied UI set: blank panel material and explicit control states. */
body .world-scene-banner{display:block;width:100%;height:auto;margin:20px 0}
body .paper,body .dark-paper,body .zone-detail,body .record-panel,body .lore-prologue,body .panel,body .forum-board{
 border:14px solid transparent!important;
 border-image:url('assets/identity/panel-frame.webp') 65 55 / 14px 24px / 0 stretch!important;
 box-shadow:0 5px 20px #0007!important;
}
body .panel::before,body .forum-board::before{display:none}
body .button:hover:not(:disabled),body .member-button:hover:not(:disabled),body .site-header .header-action:hover{
 background-image:url('assets/identity/action-hover.webp')!important;filter:none;
}
body .button:active:not(:disabled),body .member-button:active:not(:disabled),body .site-header .header-action:active{
 background-image:url('assets/identity/action-pressed.webp')!important;filter:none;
}
body .button:disabled,body .member-button:disabled{
 background-image:url('assets/identity/action-disabled.webp')!important;filter:none;opacity:.75;
}

/* Supplied icon medallions decorate existing navigation; text labels stay accessible. */
body .site-header .site-nav>a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px}
body .nav-icon{display:block;width:40px;height:40px;object-fit:contain;flex-shrink:0}
@media(min-width:1121px){html{scroll-padding-top:130px}}
@media(max-width:1120px){
 body .site-header .site-nav>a{flex-direction:row;justify-content:flex-start;gap:12px}
 body .nav-icon{width:30px;height:30px}
}

/* Supplied vector window: preserve the crest proportions and keep lore as HTML. */
body .lore-gateway{display:block;position:relative;aspect-ratio:2048/1120;padding:0;border:0;background:transparent;isolation:isolate}
body .lore-gateway::before{content:"";position:absolute;inset:0;z-index:-1;background:url('assets/identity/giant-window.svg') center/100% 100% no-repeat;pointer-events:none}
body .lore-gateway>.lore-prologue{position:absolute;left:9.2%;top:33%;width:81.6%;height:47.5%;overflow:auto;padding:clamp(14px,2vw,28px)!important;border:0!important;border-image:none!important;background:transparent;box-shadow:none!important;scrollbar-color:#ff941d #17191e;overscroll-behavior:contain}
body .lore-prologue>:first-child{margin-top:0}
@media(max-width:760px){
 body .lore-gateway{aspect-ratio:auto}
 body .lore-gateway::before{position:static;display:block;aspect-ratio:2048/360;background-position:top;background-size:100% auto}
 body .lore-gateway>.lore-prologue{position:static;width:auto;height:auto;margin:0 7% 18px;overflow:visible;padding:20px 16px!important;background:#101217;border:2px solid #ff941d!important;border-top:0!important}
}

body .account-emblem{display:block;width:150px;height:auto;margin:0 auto 22px}
@media(max-width:760px){body .account-emblem{width:110px}}

/* Complete elemental iconography: 24 original painted PNGs and distinct scalable sigils elsewhere. */
.element-orb .element-sigil{width:100%;height:100%;display:block;max-width:100%;max-height:100%;overflow:visible;filter:drop-shadow(0 0 8px #fb811e52)}
.element-sigil.element-large{width:80px;height:80px;float:right;max-width:100%}
.element-circle .element-sigil{pointer-events:none}

/* Login-screen video behind the whole site */
.site-bg-video{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1;pointer-events:none}
body{background-color:#080c12!important}
body{background-image:linear-gradient(#0a0c1099,#0a0c1099)!important}

/* Readability pass: solid single-colour headings (no outlines, no stacked orange shadows), solid menus. */
body h1,body h2,body h3,.site-title-block h1,.site-brandwords strong,.hero-title,.login-stage h1,#class-profile .profile-top h2,.member-hero h1{
  -webkit-text-stroke:0!important;paint-order:normal!important;text-shadow:0 2px 6px #000a!important;color:#f4efe4!important}
.site-title-block h1 span,.member-hero h1 span,.site-brandwords em{color:#d8c79c!important;-webkit-text-stroke:0!important;text-shadow:0 2px 6px #000a!important}
body h2::after{background:#d8c79c!important;height:2px!important}
.site-subnav{background:#15131c!important;border:2px solid #d8c79c!important;box-shadow:0 14px 34px #000c!important;min-width:250px!important;padding:6px!important}
.site-subnav a{font:700 14px/1.3 Arial,sans-serif!important;letter-spacing:.04em;color:#f4efe4!important;padding:13px 14px!important;border-bottom:1px solid #3a3645!important}
.site-subnav a:hover,.site-subnav a:focus-visible{background:#2b2638!important;color:#fff!important}
select,select option{background:#15131c!important;color:#f4efe4!important}
.site-bg-video{background:#080c12}
.eyebrow{color:#d8c79c!important;text-shadow:none!important}

/* Plain readable heading face everywhere (the jagged display fonts were unreadable as flat single-colour text). */
body h1,body h2,body h3,.panel h2,.panel h3,.profile-top .jp,.site-brandwords strong,.hero-title,.login-stage h1,.lore-prologue h3,.lore-chapter h3,.dark-paper h3,.zone-detail h3,.election-card h3,.paper h3{font-family:Georgia,'Times New Roman',serif!important;font-weight:700!important;letter-spacing:0!important;color:#f4efe4!important;-webkit-text-stroke:0!important;text-shadow:none!important}
body h2::after,.panel h2{border-bottom-color:#d8c79c!important}
.panel h2,.forum-board h2{border-bottom:2px solid #d8c79c!important}
/* Header (and its Explore dropdown) must sit above hero art, the readiness bar and page sections */
body>header,.site-header{position:sticky!important;top:0;z-index:1000!important}
.site-more[open]{z-index:1001}
.site-subnav{z-index:1002!important}

/* Map frame: soft white vector clouds that hang on the map's edge, mostly outside it */
.atlas{overflow-x:clip;padding:0 2.5%}
.map-framed{position:relative}
.map-frame-deco{position:absolute;inset:0;pointer-events:none;z-index:5}
.mf-spot{position:absolute;display:block;aspect-ratio:150/80;filter:blur(1.6px) drop-shadow(0 4px 10px #0005)}
.mf-cloud{display:block;width:100%;height:100%;overflow:visible}

/* Compendium/grimoire lists: keep a bounded, clearly scrollable box so the end of any tab is reachable */
#catalog .catalog-layout,.catalog-layout{height:min(78vh,760px);max-height:none}
#catalog-index,#catalog-detail{overflow-y:scroll!important;scrollbar-width:auto;scrollbar-color:#d8c79c #17191e;overscroll-behavior:contain}
#catalog-index::-webkit-scrollbar,#catalog-detail::-webkit-scrollbar{width:14px}
#catalog-index::-webkit-scrollbar-track,#catalog-detail::-webkit-scrollbar-track{background:#17191e}
#catalog-index::-webkit-scrollbar-thumb,#catalog-detail::-webkit-scrollbar-thumb{background:#d8c79c;border:3px solid #17191e;border-radius:8px}
@media(max-width:900px){#catalog .catalog-layout,.catalog-layout{height:auto}#catalog-index{max-height:320px}}
/* Element "Explore all arts" button: let the label wrap and size to its text */
#element-art-search{display:inline-block;width:auto;max-width:100%;height:auto;min-height:0;padding:12px 18px;line-height:1.3;white-space:normal;text-align:center;overflow:visible;clip-path:none}
.map-frame-host{position:relative;min-width:0}

/* Crisp CSS buttons and text-only nav replace the old pixelated image frames/icons */
body .nav-icon{display:none!important}
body .site-header .site-nav>a{gap:0!important}
body .button,body .site-header .header-action,body .site-menu-toggle,body button[data-category],body button[data-catalog-kind]{
  background:#1d1a26!important;background-image:none!important;border:2px solid #d8c79c!important;border-radius:6px!important;clip-path:none!important;
  box-shadow:0 2px 0 #05060a!important;min-height:0!important;min-width:0!important;padding:11px 20px!important;color:#f4efe4!important;text-shadow:none!important;font-weight:800!important;letter-spacing:.04em}
body .button:hover,body .site-header .header-action:hover,body button[data-category]:hover,body button[data-catalog-kind]:hover{background:#2e2940!important;background-image:none!important;color:#fff!important}
body .button:active{transform:translateY(1px);background:#15121c!important}
body .button[disabled],body button[disabled]{background:#17191e!important;border-color:#55524b!important;opacity:.6}
body .button.primary,body .header-action.primary{background:#d8c79c!important;color:#1b1710!important;border-color:#d8c79c!important}

/* Member pages (account, forums, rules, status, privacy, staff) share the home page header and layout. */
.member-nav.site-header{max-width:none;margin:0;display:flex}
.member-nav.site-header .brand,.member-nav.site-header .site-logo-link{min-width:213px}
.member-container{max-width:1200px}