/* Shared artwork and brass button frames from the Sixfold Arena game menus. */
:root{--ink:#392719;--paper:#f3dfb8;--gold:#d9b56d;--walnut:#302016;--wine:#652c37;--frame:url('/art/brass-button-frame.webp')}
html{color-scheme:light;scroll-behavior:smooth}
body{background:#392619 url('/art/airship-cabin.webp') center top/cover fixed no-repeat;color:var(--ink);font:17px/1.75 Georgia,'Times New Roman',serif;min-height:100vh}
body::before{content:"";position:fixed;inset:0;background:linear-gradient(#1d140f30,#1d140f12 45%,#1d140f75);pointer-events:none;z-index:-1}
header{max-width:1320px;padding:25px 30px 22px;border-bottom:1px solid #dfbd7377;gap:22px;justify-content:space-between;align-items:center;background:linear-gradient(90deg,#2b1c16e8,#432b1dcc,#2b1c16e8);box-shadow:0 4px 18px #160b0980;position:relative}
.brand{color:#3b281b;background:linear-gradient(110deg,#fff0cc,#e7c58b);border:4px double #8f652d;padding:10px 18px;font:bold clamp(19px,2vw,27px)/1.2 Georgia,serif;letter-spacing:.05em;box-shadow:0 0 0 2px #edcf8b,0 3px 10px #0008;white-space:nowrap;clip-path:polygon(3% 0,97% 0,100% 18%,100% 82%,97% 100%,3% 100%,0 82%,0 18%)}
.brand::before{content:'✦';margin-right:10px}
header nav{gap:4px 7px;justify-content:center;align-items:center;flex:1}
header nav a,.button,.factionNav a{position:relative;isolation:isolate;border:14px solid transparent;border-left-width:24px;border-right-width:24px;border-image:var(--frame) 260 300 fill stretch;display:inline-flex;align-items:center;justify-content:center;text-align:center;min-height:54px;padding:1px 8px;line-height:1.3;color:#f4e3bd;text-decoration:none;background:none;font-family:Georgia,serif;filter:drop-shadow(0 3px 2px #190b0988);border-radius:0}
header nav a::before,.button::before,.factionNav a::before{content:'';position:absolute;z-index:-1;inset:-7px -14px;background:linear-gradient(110deg,#583a25,#291c16 65%,#422919);clip-path:polygon(5% 0,95% 0,100% 10%,96% 28%,94% 50%,96% 72%,100% 90%,95% 100%,5% 100%,0 90%,4% 72%,6% 50%,4% 28%,0 10%)}
header nav a{font-size:14px;min-height:50px;border-width:12px 20px;padding:2px 4px;white-space:nowrap}
header nav a:hover::before,header nav a[aria-current]::before,.button:hover::before,.factionNav a:hover::before{background:linear-gradient(110deg,#873f3f,#522331)}
a{color:#70431c;text-decoration-thickness:1px;text-underline-offset:4px}a:hover{color:#932d33}a:focus-visible{outline:3px solid #b34931;outline-offset:5px}header a:focus-visible,footer a:focus-visible{outline-color:#ffe4a0}
.skipLink{position:fixed;left:16px;top:-100px;padding:10px 18px;background:#fff1d2;color:#321e14;z-index:50}.skipLink:focus{top:16px}
main{max-width:1000px;padding:46px clamp(24px,5vw,66px) 52px;margin:46px auto;background:linear-gradient(110deg,#f5e3bdf5,#eed5a9f0),url('/art/parchment-book.webp') center top/1100px auto;position:relative;border:6px double #91632f;box-shadow:0 0 0 2px #f0cf85,0 18px 50px #170c09a0,inset 0 0 30px #a56c2530;border-radius:3px}
main::before{content:'✦';position:absolute;top:-25px;left:calc(50% - 21px);width:42px;height:42px;text-align:center;line-height:42px;background:#3b271a;border:2px solid #cfab64;transform:rotate(45deg);color:#e6c98b;font-size:23px;box-shadow:0 3px 7px #0005}
h1,h2,h3,h4{font-family:Georgia,'Times New Roman',serif;text-wrap:balance}h1{font-size:clamp(37px,5vw,62px);line-height:1.06;margin:14px 0 25px;color:#3b2518}h2{color:#4b2e1c;font-size:30px}h3{color:#613b20}p{margin:15px 0}.intro{color:#624a34;font-size:21px;line-height:1.6}.eyebrow{color:#81572b;font:600 12px/1.5 system-ui,sans-serif;letter-spacing:.21em}small,.note{color:#70573e}strong{color:inherit}
.card{background:linear-gradient(120deg,#fff1cfb8,#ddb57a30);border:1px solid #af824d;border-radius:0;box-shadow:inset 0 0 0 4px #e3c898,inset 0 0 0 5px #af824d55;padding:27px;margin:27px 0}
.button{font-size:17px;font-weight:400;margin:12px 9px 10px 0;max-width:100%;min-width:170px;overflow-wrap:anywhere;color:#f4e3bd}.button:hover{color:#fff4d7}
footer{max-width:1000px;margin:0 auto 25px;padding:25px 30px;color:#ead6aa;background:#2b1e17ed;border:1px solid #a67d44;box-shadow:0 5px 15px #0005;font-size:14px;text-align:center}footer a{color:#f2d799}
/* Homepage: a view out of the airship, followed by the captain's desk. */
.home main{max-width:1180px;border:0;background:none;box-shadow:none;padding:0;margin:35px auto 30px}.home main::before{display:none}
.welcome{display:grid;grid-template-columns:1.05fr 1fr;min-height:350px;border:5px double #c19c56;background:#251b16e8;box-shadow:0 8px 28px #150b0980;overflow:hidden}
.welcomeCopy{padding:38px 42px;align-self:center}.welcomeCopy h1{color:#f6e7c6;text-shadow:0 2px 3px #0008;margin:15px 0 20px}.welcomeCopy .eyebrow{color:#d2b277}.welcomeCopy .intro{color:#ddc8a1;font-size:20px;max-width:370px}
.welcomeScene{background:url('/art/menu-vignettes.webp') left center/300% 100%;min-height:300px;border-left:2px solid #ba9657;box-shadow:inset 15px 0 30px #22140a33}
.homeGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:27px}.homeGrid .card{margin:0;background:linear-gradient(110deg,#fae8c4f5,#efd5a7f5),url('/art/parchment-book.webp') left center/210% 180%;padding:30px 33px;border:4px double #986d36;box-shadow:0 0 0 1px #eccb80,0 5px 20px #1d0e0966}.homeGrid .card:last-child{grid-column:1/-1}.homeGrid .card h2{font-size:31px}
.privacyShelf{padding:30px 36px;background:#261c17ed;color:#e5d1aa;border:4px double #b18d4c;margin-top:25px}.privacyShelf h2{color:#f2dfb5;margin-top:0}.privacyShelf small{color:#cbb58f}
/* Long guides and policy pages keep opaque paper behind every line of text. */
body .guideMain{max-width:1100px}body .guideMain h3{color:#63401f}body .guideMain .hero{background:#fff1d16b;color:var(--ink);border:1px solid #b98e59;border-radius:0;box-shadow:inset 0 0 0 4px #e2c18b55}body .guideMain .hero h4{color:#4b301b}body .guideMain .hero .meta{color:#795022}body .guideMain .hero .ability,body .guideMain .note{color:#665039}body .guideMain .trait{background:#714d2220;color:#473322}body .guideMain .swaps{border:3px double #aa8147;border-radius:0;background:#f9e9c243}body .guideMain .swaps h4{color:#74421f}body .guideMain .factionGuide h2{color:#56351d;border-bottom:1px solid #b58a50;padding-bottom:13px}body .guideMain .factionGuide{border-color:#aa8049}body .guideMain .factionNav{gap:4px;margin:23px 0}body .guideMain .factionNav a{font-size:15px;min-height:49px;min-width:110px;border-width:11px 20px;padding:1px 3px;color:#f4e3bd}
body.ledger table{background:#f4dfb1;color:#402c1c}body.ledger th{color:#563618;background:#d8b981}body.ledger td,body.ledger th{border-color:#bd985f}body.ledger tbody tr:nth-child(odd){background:#e7c99580}body.ledger .note{color:#70573e}body.ledger h3{color:#684121}body.ledger .jump a{background:#e0be84;padding:5px 10px;border:1px solid #a88047}
@media(min-width:1550px){header{margin-top:20px;border:1px solid #cba86277}.home main{margin-top:55px}}
@media(max-width:1200px){header{justify-content:center;padding:22px 18px;gap:16px}header nav{flex-basis:100%}.home main{margin-left:28px;margin-right:28px}main,body .guideMain,footer{max-width:calc(100% - 56px)}}
@media(max-width:650px){body{background-attachment:scroll;background-position:center top;background-size:auto 1000px;background-color:#3a281c;font-size:16px}header{padding:22px 12px 16px}.brand{font-size:23px}header nav{display:grid;grid-template-columns:1fr 1fr;width:100%;gap:3px 7px}header nav a{min-width:0;white-space:normal;font-size:14px}header nav a:last-child{grid-column:1/-1;justify-self:center;min-width:170px}main,body .guideMain{max-width:calc(100% - 28px);padding:32px 22px;margin:31px auto}main::before{font-size:18px;width:32px;height:32px;line-height:32px;top:-19px;left:calc(50% - 16px)}h1{font-size:39px}h2{font-size:27px}.intro{font-size:19px}.home main{margin:20px 14px;max-width:none}.welcome{grid-template-columns:1fr}.welcomeCopy{padding:28px 24px 22px}.welcomeCopy h1{font-size:45px}.welcomeScene{min-height:210px;border-left:0;border-top:1px solid #ba9657;background-size:300% auto;background-position:left 48%}.homeGrid{grid-template-columns:1fr;gap:18px;margin-top:20px}.homeGrid .card{padding:24px}.homeGrid .card h2{font-size:29px}.homeGrid .card:last-child{grid-column:auto}.privacyShelf{padding:24px 22px}.card{padding:21px}.button{font-size:16px}.guideMain .heroGrid,.guideMain .basicsGrid{grid-template-columns:1fr}.tableWrap{max-width:100%;-webkit-overflow-scrolling:touch}footer{max-width:calc(100% - 28px);font-size:13px;padding:23px 20px}.home .button{width:100%;margin-right:0}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* The same six faction marks and original atlas tiles used by the Android game. */
.guideMain .factionHeading{display:flex;gap:20px;align-items:center;margin:20px 0}
body .guideMain .factionHeading h2{border:0;margin:0;padding:0;flex:1}
.guideMain .factionSigil{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;width:68px;height:68px;background:radial-gradient(circle,#51402a,#241d17);color:var(--faction,#e7c17b);border:4px double #bc9553;border-radius:50%;box-shadow:0 2px 6px #5d351d44}
.factionSigil svg{display:block;width:36px;height:36px}
body .guideMain .factionNav a{gap:8px}
.guideMain .factionNav .factionSigil{width:23px;height:23px;border:0;background:none;box-shadow:none;color:inherit}
.factionNav .factionSigil svg{width:21px;height:21px}
.guideMain .heroIdentity{display:flex;gap:15px;align-items:center;border-bottom:1px solid #b98e5977;padding-bottom:14px;margin-bottom:15px;min-width:0}
.guideMain .heroIdentity>div{min-width:0}
.guideMain .championPortrait{display:block;width:132px;height:132px;flex:0 0 132px;overflow:hidden;filter:drop-shadow(0 5px 2px #59351644)}
body .guideMain .hero{background:linear-gradient(150deg,#fff2d3aa,#dec08c44);border:3px double #af8449;padding:20px}
body .guideMain .hero h4{font-size:26px;line-height:1.2}
body .guideMain .hero .meta{font-size:14px;line-height:1.6;margin-top:8px}
.guideMain .swapIdentity{display:flex;gap:20px;align-items:center;margin-top:22px;border-top:1px solid #b48b5866;padding-top:12px}
.guideMain .swapIdentity h4{flex:1}
.guideMain .swapIdentity .championPortrait{width:112px;height:112px;flex-basis:112px}
@media(max-width:800px){.guideMain .heroIdentity{flex-direction:column;text-align:center}.guideMain .heroIdentity .championPortrait{width:155px;height:155px;flex-basis:155px}}
@media(max-width:650px){.guideMain .factionHeading{gap:12px}.guideMain .factionSigil{width:54px;height:54px}.factionSigil svg{width:29px;height:29px}body .guideMain .factionHeading h2{font-size:28px}.guideMain .swapIdentity{gap:12px;flex-direction:column;text-align:center}.guideMain .swapIdentity h4{margin-top:0}}