:root{color-scheme:dark}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at top,#292238,#100d17 65%);color:#eee8de;font:15px Arial,sans-serif;min-height:100vh}header{max-width:1100px;margin:auto;padding:48px 28px 24px;display:flex;justify-content:space-between;align-items:end;gap:24px}.eyebrow{letter-spacing:3px;color:#c8aa75;font-size:11px}h1,h2{font-family:Georgia,serif;font-weight:normal;color:#f5dbac}h1{font-size:40px;margin:12px 0}h2{font-size:34px;margin:14px 0 32px}.intro,.count{color:#aca4b8}.search{width:260px}input,select,aside button{display:block;width:100%;padding:12px;margin-top:9px;background:#211b2e;color:#f2e9db;border:1px solid #5d4d69;border-radius:6px;font:inherit}main{max-width:1100px;margin:auto;padding:0 28px 60px}.grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));max-width:700px;margin:0 auto;gap:24px 14px}.tile{border:0;background:transparent;color:#d7c5aa;cursor:pointer;padding:0;display:flex;align-items:center;flex-direction:column;font:inherit;transition:transform .18s}.tile:hover{transform:translateY(-5px)}.tile:focus-visible{outline:2px solid #ffd887;outline-offset:6px}.caption{margin:8px 0;max-width:130px;font-size:12px}.card{position:relative;width:96px;height:311px;pointer-events:none}.clip{position:absolute;inset:0;overflow:hidden}.L{position:absolute;background-repeat:no-repeat}.bg{width:94px;height:299px;left:1px;top:3px;background-image:url('god6.png')}.pt{left:1px;bottom:6px;z-index:2;transform-origin:bottom center}.qbimg{position:absolute;top:0;left:0;width:40px;height:58px;z-index:8}.nmimg{position:absolute;top:211px;left:48px;z-index:10;transform:translate(-50%,-50%) scale(.55)}.nmbar{position:absolute;top:200px;left:0;width:96px;height:22px;z-index:9;background:#000c}dialog{width:min(1100px,94vw);height:min(900px,92dvh);max-height:92dvh;padding:0;border:1px solid #70604c;border-radius:12px;background:#100f17;color:#eee;overflow:hidden}dialog::backdrop{background:#050308d9;backdrop-filter:blur(5px)}.modal-layout{height:100%;display:grid;grid-template-columns:minmax(0,1fr) 260px}#stage{position:relative;min-width:0;min-height:0;background:radial-gradient(ellipse,#34303d,#100f17 70%);display:grid;place-items:center;overflow:hidden}#stage canvas{display:block;position:absolute;inset:0}#loading{z-index:1;color:#c7bba8}aside{padding:52px 24px 24px;background:#191520;border-left:1px solid #3f3447;overflow:auto}aside label{display:block;margin:20px 0}button{cursor:pointer}.close{position:absolute;right:12px;top:10px;z-index:5;color:#fff;background:#29212d;border:1px solid #61546d;width:34px;height:34px;border-radius:50%;font-size:24px}#error{color:#d7b99b;line-height:1.6}body.modal-open{overflow:hidden}@media(max-width:650px){header{display:block;padding-top:28px}.search{display:block;width:100%;margin-top:24px}.modal-layout{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) 200px}aside{padding:12px 20px;display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;border-left:0;border-top:1px solid #3f3447}aside .eyebrow{display:none}h2{font-size:24px;margin:0;grid-column:1/-1}aside label{margin:0}aside button{margin:0}#error{margin:0;font-size:12px}.grid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:16px 8px}}

/* Slightly larger gallery cards, retaining five columns on desktop. */
@media(min-width:651px){.grid{max-width:800px;row-gap:28px}.card{zoom:1.15}.caption{font-size:13px;margin-top:10px}}

.search-group{display:flex;align-items:flex-end;gap:16px}.search-group .count{white-space:nowrap;margin:0 0 13px}@media(max-width:650px){.search-group{margin-top:24px}.search-group .search{margin-top:0;flex:1;min-width:0}}


/* Only the cards have their own scrolling container. */
main{padding-bottom:24px}.gallery-scroll{height:65dvh;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding:12px 16px 28px;border:1px solid #45364f;border-radius:8px;background:#100d1740}@media(max-width:650px){.gallery-scroll{padding:12px 4px 24px}}

/* Fit the scrolling box to the card layout instead of the full page. */
.gallery-scroll{width:100%;max-width:850px;margin-inline:auto}@media(max-width:650px){.gallery-scroll{max-width:100%}}

.gallery-scroll{cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-overflow-scrolling:touch}.gallery-scroll.dragging,.gallery-scroll.dragging .tile{cursor:grabbing}.gallery-scroll.dragging .tile{transform:none}

/* Keep scrolling gestures while hiding the visible scroll track. */
.gallery-scroll{scrollbar-width:thin;scrollbar-color:#8d759f transparent;scrollbar-gutter:auto}.gallery-scroll::-webkit-scrollbar{width:4px}.gallery-scroll::-webkit-scrollbar-track{background:transparent}.gallery-scroll::-webkit-scrollbar-thumb{background:#8d759f;border-radius:4px}.gallery-scroll::-webkit-scrollbar-thumb:hover{background:#b39ac4}

.type-icon{position:absolute;top:260px;left:28px;width:40px;height:40px;z-index:4;background-repeat:no-repeat}

/* Names remain on the card artwork and in accessible button labels. */
.tile .caption{display:none}

.gallery-scroll{border:none}

.type-filters{display:flex;gap:4px;align-items:center;margin-bottom:2px}.type-filters button{padding:3px;border:1px solid transparent;border-radius:50%;background:transparent;cursor:pointer}.type-filters span{display:block;width:40px;height:40px;background-repeat:no-repeat}.type-filters button[aria-pressed=true]{border-color:#dfbd78;background:#c4a46820}.type-filters button:hover{background:#c4a46820}.search-group{flex-wrap:wrap}@media(max-width:850px){header{flex-wrap:wrap}.search-group{width:100%}}

/* Keep search and filters below the title. */
header{flex-direction:column;align-items:flex-start;gap:16px}.search-group{width:100%;justify-content:flex-start}.search-group .search{margin-top:0}@media(max-width:650px){.search-group{margin-top:0}}

/* Center search, with image filters on the next row. */
.search-group{display:grid;grid-template-columns:auto auto;justify-content:center;align-items:end;column-gap:16px;row-gap:10px}.search-group .search{grid-column:1;grid-row:1;width:260px;text-align:center;flex:none}.search-group .count{grid-column:2;grid-row:1;margin-bottom:13px}.type-filters{grid-column:1/-1;grid-row:2;justify-content:center;margin:0}@media(max-width:650px){.search-group .search{width:min(260px,60vw)}}

.search-group{grid-template-columns:auto}.search-group .search,.type-filters{grid-column:1}

/* Center the search box independently of the count beside it. */
.search-group{position:relative;grid-template-columns:260px;justify-content:center}.search-group .search{grid-column:1;grid-row:1;width:100%}.search-group .count{position:absolute;left:calc(50% + 146px);top:37px;margin:0;white-space:nowrap}.type-filters{grid-column:1;grid-row:2}@media(max-width:650px){.search-group{grid-template-columns:min(260px,60vw)}.search-group .count{left:calc(50% + min(130px,30vw) + 10px);font-size:12px}}

.search-group .count{top:22px}

/* Wider centered search field. */
.search-group{grid-template-columns:380px}.search-group .search{width:100%}.search-group .count{left:calc(50% + 206px)}@media(max-width:650px){.search-group{grid-template-columns:min(380px,70vw)}.search-group .search{width:100%}.search-group .count{left:calc(50% + min(190px,35vw) + 10px)}}

.badge-filters{grid-column:1;grid-row:3;display:flex;align-items:center;justify-content:center;gap:8px}.badge-filters button{display:grid;place-items:center;width:48px;height:64px;padding:2px;border:1px solid transparent;border-radius:6px;background:transparent;cursor:pointer}.badge-filters span{display:block;width:40px;height:58px;background-repeat:no-repeat}.badge-filters button[aria-pressed=true]{border-color:#dfbd78;background:#c4a46820}.badge-filters button:hover{background:#c4a46820}

/* Compact rarity badge filters. */
.badge-filters{gap:6px}.badge-filters button{width:34px;height:44px;padding:0}.badge-filters span{transform:scale(.7);transform-origin:center;flex-shrink:0}

/* Match both filter rows with compact, equally tall buttons. */
.type-filters,.badge-filters{gap:6px;align-items:center}.type-filters button,.badge-filters button{display:flex;align-items:center;justify-content:center;width:34px;height:38px;padding:0;border-radius:6px}.type-filters span{transform:scale(.7);transform-origin:center;flex-shrink:0}.badge-filters span{transform:scale(.58);transform-origin:center;flex-shrink:0}

/* Keep the count in the layout on narrow windows instead of outside the search column. */
@media(max-width:650px){.search-group{grid-template-columns:minmax(0,380px);width:100%;justify-content:center}.search-group .search{width:100%}.search-group .count{position:static;grid-column:1;grid-row:2;text-align:center;margin:0;font-size:13px}.type-filters{grid-row:3}.badge-filters{grid-row:4}}

/* Place the count in a real row at every viewport width. */
.search-group{width:100%;grid-template-columns:minmax(0,380px);justify-content:center}.search-group .search{width:100%;min-width:0}.search-group .count{position:static;grid-column:1;grid-row:2;text-align:center;margin:0;font-size:13px}.type-filters{grid-row:3}.badge-filters{grid-row:4}

.type-filters{grid-row:2}.badge-filters{grid-row:3}

/* Show type and rarity filters together beneath Search. */
.search-group{grid-template-columns:auto auto;column-gap:18px;row-gap:10px}.search-group .search{grid-column:1/-1;grid-row:1;width:min(380px,100%);justify-self:center}.type-filters{grid-column:1;grid-row:2;justify-content:flex-end}.badge-filters{grid-column:2;grid-row:2;justify-content:flex-start}@media(max-width:420px){.search-group{column-gap:6px}.type-filters,.badge-filters{gap:2px}.type-filters button,.badge-filters button{width:30px}}

/* Soft rarity-colored glow behind each card. */
.tile{--angel-glow:170,120,230;position:relative;isolation:isolate}.tile.rarity-3{--angel-glow:75,175,230}.tile.rarity-4{--angel-glow:172,94,235}.tile.rarity-5{--angel-glow:244,172,67}.tile.rarity-6{--angel-glow:241,73,82}.tile::before{content:'';position:absolute;z-index:-1;pointer-events:none;left:50%;top:50%;width:115px;height:245px;transform:translate(-50%,-50%);background:radial-gradient(ellipse,rgba(var(--angel-glow),.3),rgba(var(--angel-glow),.12) 45%,transparent 72%);filter:blur(13px)}.tile:hover::before{opacity:1;filter:blur(10px)}

/* Make the glow visible around the card edges. */
.tile::before{z-index:0;width:150px;height:320px;background:radial-gradient(ellipse,rgba(var(--angel-glow),.58),rgba(var(--angel-glow),.3) 48%,transparent 76%);filter:blur(9px)}.tile .card{z-index:1}.tile:hover::before{filter:blur(7px)}

.tile::before{background:radial-gradient(ellipse,rgba(var(--angel-glow),.4),rgba(var(--angel-glow),.2) 48%,transparent 76%)}

.modal-layout{grid-template-columns:minmax(0,1fr) 340px}#profile{margin-top:24px;padding-top:12px;border-top:1px solid #45364f;font-size:13px;line-height:1.65}#profile blockquote{margin:8px 0 18px;color:#dec18e;font-family:Georgia,serif;font-style:italic}#profile dl{margin:0 0 18px}#profile dt{color:#afa3b5;font-size:11px;text-transform:uppercase;letter-spacing:1px}#profile dd{margin:0 0 10px}#profile details{border-top:1px solid #45364f;padding:12px 0}#profile summary{cursor:pointer;color:#e6cfa7}#profile details p{white-space:pre-line;color:#d1c9d7;margin-bottom:0}@media(max-width:650px){.modal-layout{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) 260px}#profile{grid-column:1/-1}}
/* Story reader occupies the portrait area until Play is pressed. */
#story-screen{position:absolute;inset:0;z-index:2;overflow-y:auto;padding:42px;background:radial-gradient(ellipse at top,#302536,#121019 75%);scrollbar-width:thin;scrollbar-color:#8d759f transparent}#story-screen[hidden]{display:none}#story-screen #profile{margin:0;padding:0;border:0;font-size:15px;max-width:660px;margin-inline:auto}#profile h2{font-size:38px;margin:0 0 16px}#profile dl{display:grid;grid-template-columns:70px 1fr;gap:4px 14px}#profile dd{margin:0 0 8px}#profile blockquote{font-size:18px;margin-bottom:24px}.story-tabs{display:flex;gap:8px;margin:26px 0 20px;border-bottom:1px solid #66516d;padding-bottom:12px}.story-tabs button{flex:1;font:13px Georgia;color:#b7a4c0;background:#211927;border:1px solid #514059;border-radius:5px;padding:12px 6px}.story-tabs button[aria-selected=true]{color:#f2d59d;border-color:#b99358;background:#463124}.story-body{white-space:pre-line;line-height:1.85;color:#dfd7e3;padding-bottom:28px}#story-flag{width:128px;height:193px;background-image:url(godstory1.png);background-repeat:no-repeat;margin:0 auto 20px}#portrait aside h2{text-align:center;font-size:28px;margin:14px 0 24px}#portrait aside{padding-top:42px}.modal-layout{grid-template-columns:minmax(0,1fr) 260px}@media(max-width:650px){#story-screen{padding:24px 18px}.modal-layout{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) 220px}#story-flag{display:none}#portrait aside{padding:12px 20px}#portrait aside h2{text-align:left;margin:0}#profile h2{font-size:30px}.story-tabs{gap:4px}.story-tabs button{font-size:11px}}
/* Original ns_gs_bq story assets. */
#story-screen{background:#211a21;padding:22px}#story-screen #profile{max-width:none;min-height:100%;padding:32px;background:url('story-assets/ns_gs_bq01_a154bb13.png') center/100% 100% no-repeat;color:#352b25}#profile h2{color:#f4deb5;background:url('story-assets/ns_gs_bq03_9d0b861.png') center/100% 100% no-repeat;padding:10px 18px;font-size:30px;text-align:center}#profile blockquote{background:url('story-assets/ns_gs_bq_86fd234.png') center/100% 100% no-repeat;min-height:66px;padding:20px 22px 14px 60px;margin:18px 0;color:#f8e6c6;text-align:center;font-size:16px}#profile dt{color:#655044}#profile dd{color:#352b25}.story-body{color:#30251e}.story-tabs{border-color:#8b7150}.story-tabs button{color:#674d37;background:#e0ca9b;border-color:#a3875d}.story-tabs button[aria-selected=true]{background:#59412f;color:#ffe5b0;border-color:#755436}#portrait aside{background:#211a21 url('story-assets/ns_gs_bq02_482ecf11.png') center/100% 100% no-repeat}@media(max-width:650px){#story-screen{padding:10px}#story-screen #profile{padding:22px 18px}#profile h2{font-size:25px}#profile blockquote{padding-left:45px;font-size:14px}}
/* Original story composition: illustrated header, ribbon, continuous parchment. */
#portrait{width:min(800px,96vw)}.modal-layout{grid-template-columns:minmax(0,1fr) 200px}#story-screen{padding:0;background:#251b1b;overflow-y:auto}#story-screen #profile{padding:0;background:none;margin:0;font-size:15px}.story-hero{height:370px;position:relative;background-size:cover;background-position:center top}.story-hero::after{content:'';position:absolute;inset:0;background:url('story-assets/ns_gs_bq02_482ecf11.png') left top/100% 100% no-repeat;pointer-events:none}.hero-flag{position:absolute;top:24px;left:12px;width:128px;height:193px;background-image:url(godstory1.png);background-repeat:no-repeat;transform:scale(.72);transform-origin:top left;z-index:1}#profile .hero-facts{position:absolute;left:16px;right:12px;bottom:70px;z-index:1;margin:0;display:grid;grid-template-columns:auto 1fr;gap:8px 12px;color:#eadbbd;font-size:14px}#profile .hero-facts dt,#profile .hero-facts dd{color:#eadbbd;font-size:14px;text-transform:none;letter-spacing:0;margin:0;text-shadow:0 1px 3px #000}#profile .hero-facts dd{font-weight:bold}#profile blockquote{position:relative;z-index:2;margin:-52px 0 -4px;min-height:64px;padding:21px 25px 14px 70px;transform:rotate(-2deg);font-size:16px}.story-parchment{background:url('story-assets/ns_gs_bq01_a154bb13.png') center/100% 100% no-repeat;padding:26px 30px;color:#4d3927;min-height:350px}.story-parchment p{white-space:pre-line;line-height:1.55;margin:0 0 22px}.story-parchment h3{text-align:center;font:21px Georgia;color:#805c36;margin:24px 0 12px}.story-parchment h3::before{content:'❧ ';color:#9a845d}.story-parchment h3::after{content:' ☙';color:#9a845d}#story-flag{display:none}#portrait aside{background:#211a21;padding:44px 16px 20px}#portrait aside h2{font-size:24px}@media(max-width:650px){#portrait{width:min(540px,96vw)}.modal-layout{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) 180px}.story-hero{height:350px}#story-screen{padding:0}#story-screen #profile{padding:0}#portrait aside{padding:12px 16px}#profile .hero-facts{font-size:13px}.story-parchment{padding:24px;font-size:14px}}

#story-screen{overflow-x:hidden}#profile .story-parchment{overflow-wrap:anywhere}

/* Keep the original motto ribbon compact instead of stretching it. */
#profile blockquote{width:min(440px,94%);box-sizing:border-box;margin-right:auto;background-size:100% 100%;min-height:64px}
/* Display the original story images without stretching or scaling. */
#portrait{width:min(850px,96vw)}#story-screen{overflow:auto}#story-screen #profile{width:640px;max-width:none;margin:0}.story-hero{width:640px;height:610px;background-size:auto;background-position:0 0;background-repeat:no-repeat}.story-hero::after{background-size:auto;background-position:0 0}.hero-flag{transform:none}#profile blockquote{width:492px;height:78px;min-height:78px;margin-top:-78px;padding-top:26px;background-size:auto;transform:none}.story-parchment{box-sizing:border-box;width:630px;height:501px;min-height:501px;overflow-y:auto;margin:0 5px;background-size:auto;background-position:0 0;scrollbar-width:thin}#portrait aside{background-size:auto}#profile .hero-facts{bottom:90px}@media(max-width:650px){#story-screen #profile{width:640px;padding:0}.story-hero{height:610px}.story-parchment{padding:26px 30px}#profile blockquote{width:492px;padding-left:70px;font-size:16px}}
/* One vertical scroller for the whole story, without nested scroll tracks. */
#story-screen{overflow-y:auto;overflow-x:hidden}.story-parchment{height:auto;min-height:501px;overflow:visible;background-size:630px 501px;background-repeat:repeat-y}#portrait aside{overflow:visible}#portrait .modal-layout{overflow:hidden}#story-screen::-webkit-scrollbar{width:4px}#story-screen::-webkit-scrollbar-thumb{background:#8d759f;border-radius:4px}#story-screen::-webkit-scrollbar-track{background:transparent}
/* Fixed portrait header; only the chapter text scrolls. */
#story-screen{overflow:hidden;height:100%}#story-screen #profile{height:100%;display:flex;flex-direction:column;min-height:0}.story-hero{height:350px;flex:0 0 350px}#profile .hero-facts{bottom:70px}#profile blockquote{flex:0 0 78px;margin-top:-78px;margin-bottom:0}.story-parchment{flex:1;min-height:0;height:auto;overflow-y:auto;overflow-x:hidden;background-repeat:no-repeat;background-size:630px 501px;scrollbar-width:thin;scrollbar-color:#8d759f transparent}.story-parchment::-webkit-scrollbar{width:4px}.story-parchment::-webkit-scrollbar-thumb{background:#8d759f;border-radius:4px}.story-parchment .chapter-title{width:236px;height:28px;margin:12px auto 16px;background-image:url(godstory1.png);background-repeat:no-repeat}.chapter-title::before,.chapter-title::after{content:none!important}.chapter-0{background-position:-222px -393px}.chapter-1{background-position:-222px -363px}.chapter-2{background-position:-222px -333px}@media(max-height:650px){.story-hero{height:260px;flex-basis:260px}.hero-flag{top:8px;transform:scale(.7)}#profile .hero-facts{bottom:70px}}

/* Extra room above the first story heading. */
.story-parchment{padding-top:40px}
/* The border stays outside the scrolling text viewport. */
.parchment-frame{box-sizing:border-box;width:630px;margin:0 5px;flex:1;min-height:0;padding:24px 22px;background:url('story-assets/ns_gs_bq01_a154bb13.png') center/100% 100% no-repeat;overflow:hidden;display:flex;flex-direction:column}.parchment-frame .story-parchment{width:100%;margin:0;min-height:0;flex:1;background:none;padding:16px 8px 20px;overflow-y:auto;overflow-x:hidden}.parchment-frame .story-parchment .chapter-title{margin-top:0}

/* Lower the motto ribbon slightly over the parchment edge. */
#profile blockquote{transform:translateY(12px);z-index:3}.parchment-frame{padding-top:32px}

#profile blockquote{transform:translateY(24px)}.parchment-frame{padding-top:44px}

#profile blockquote{transform:translateY(30px)}.parchment-frame{padding-top:50px}

#profile blockquote span{display:block;transform:rotate(-3deg);transform-origin:center}

#profile blockquote span{font-size:20px;line-height:1.2}

#profile blockquote span{transform:translateY(-6px) rotate(-3deg)}

/* Bring the story text closer to the parchment edges. */
.parchment-frame{padding-right:14px;padding-bottom:16px;padding-left:14px}.parchment-frame .story-parchment{padding-left:4px;padding-right:4px}

/* Reduce the top gap while keeping text below the overlapping ribbon. */
.parchment-frame{padding-top:36px}.parchment-frame .story-parchment{padding-top:4px}

.story-parchment{cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}.story-parchment.dragging{cursor:grabbing}

/* Prevent text highlighting across the gallery and portrait popup. */
html,body,body *{user-select:none;-webkit-user-select:none}input,textarea{user-select:text;-webkit-user-select:text}

.hero-flag{top:8px}@media(max-height:650px){.hero-flag{top:0}}

.hero-view-icon{position:absolute;right:18px;top:8px;width:43px;height:45px;padding:0;border:0;background:url(god5.png) no-repeat -821px -162px;z-index:2;cursor:pointer}
.hero-view-icon{top:auto;bottom:-8px;right:18px;z-index:4}.hero-close-icon{position:absolute;right:14px;top:8px;width:62px;height:66px;padding:0;border:0;background:url(common7.png) no-repeat -894px -245px;z-index:4;cursor:pointer}#skin-controls{position:absolute;right:20px;bottom:20px;z-index:5}#skin-controls[hidden]{display:none}.skin-icon{display:block;width:70px;height:78px;padding:0;border:0;background:url(menuicon.png) no-repeat -466px -576px;cursor:pointer}.skin-menu{position:absolute;right:0;bottom:90px;min-width:180px;padding:8px;background:#211a21ee;border:1px solid #a68a59;border-radius:6px}.skin-menu[hidden]{display:none}.skin-menu button{display:block;width:100%;padding:10px;background:transparent;border:0;color:#eadbbd;text-align:left;cursor:pointer}.skin-menu button:hover{background:#72553466}

.skin-icon{position:relative;margin-bottom:24px}.skin-caption{position:absolute;top:80px;left:50%;transform:translateX(-50%);white-space:nowrap;color:#f0d5a0;font:14px Georgia,serif;text-shadow:0 1px 3px #000}.skin-menu{bottom:114px}

#angel-nameplate{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);width:436px;height:79px;background:url(god3.png) no-repeat -2px -148px;z-index:4;display:flex;align-items:center;justify-content:center;pointer-events:none}#angel-nameplate[hidden]{display:none}.angel-name-image{display:block;background-repeat:no-repeat;font:26px Georgia;color:#ead19e}

#angel-nameplate{height:55px;background-size:1024px 713px;background-position:-2px -103px}.angel-name-image{transform:scale(.75)}

#angel-nameplate{background:none}#angel-nameplate::before{content:'';position:absolute;inset:0 auto auto 0;width:436px;height:79px;background:url(god3.png) no-repeat -2px -148px;transform:scaleY(.6962);transform-origin:top;z-index:-1}

#angel-nameplate{bottom:44px}

#angel-nameplate{bottom:48px}

.animation-close-icon{position:fixed;position:absolute;right:0;bottom:calc(100% + 8px);width:62px;height:66px;padding:0;border:0;background:url(common7.png) no-repeat -894px -245px;cursor:pointer}#skin-controls .animation-close-icon{position:fixed;right:auto;bottom:auto;top:0}

#animation-close{position:absolute;right:14px;top:8px;bottom:auto;z-index:6}#animation-close[hidden]{display:none}

/* Match the portrait column to the original 640px story composition. */
#portrait{width:min(842px,96vw)}.modal-layout{grid-template-columns:minmax(0,640px) minmax(0,200px)}#story-screen #profile{width:100%}.story-hero{width:100%}.parchment-frame{width:calc(100% - 10px)}@media(max-width:650px){.modal-layout{grid-template-columns:1fr}.story-hero{background-position:center top}}

/* Single 640px story/portrait window without the sidebar. */
#portrait{width:640px;max-width:96vw}.modal-layout{display:block;height:100%}#portrait aside{display:none}#stage{width:100%;height:100%}#portrait>.close{display:none}

/* Remove the right-side parchment spacing. */
.parchment-frame{margin-right:0;width:calc(100% - 5px);padding-right:0}.parchment-frame .story-parchment{padding-right:0}

/* Let the story background reach both sides of the window. */
.parchment-frame{margin-left:0;margin-right:0;width:100%}#story-screen,#story-screen #profile,.story-hero{padding-right:0;margin-right:0}

/* The portrait artwork is narrower than the popup; fill that remaining strip. */
.story-hero{background-size:100% auto;background-position:center top}.story-hero::after{background-size:100% 100%}.parchment-frame{background-size:100% 100%}

/* Equal side spacing around the parchment background. */
.parchment-frame{margin-left:8px;margin-right:8px;width:calc(100% - 16px)}

/* Position the story scrollbar on the brown right edge. */
.parchment-frame{overflow:visible}.parchment-frame .story-parchment{width:calc(100% + 8px);padding-right:16px;scrollbar-color:#a78b67 #38291f}.story-parchment::-webkit-scrollbar{width:4px}.story-parchment::-webkit-scrollbar-track{background:#38291f}.story-parchment::-webkit-scrollbar-thumb{background:#a78b67;border-radius:4px}

.parchment-frame .story-parchment{width:calc(100% + 6px)}

/* Extend the track vertically without moving the story text. */
.parchment-frame{padding-top:8px;padding-bottom:8px}.parchment-frame .story-parchment{padding-top:32px;padding-bottom:28px}

/* Portrait popup keeps a 4:5 ratio and fits the viewport. */
#portrait{width:min(640px,96vw,73.6dvh);height:auto;max-width:640px;max-height:92dvh;aspect-ratio:4 / 5}

/* Height determines the popup size; width follows the 4:5 ratio. */
#portrait{height:min(800px,92dvh,120vw);width:auto;max-width:640px;max-height:92dvh;aspect-ratio:4 / 5}

/* Taller reference proportions, sized by height. */
#portrait{height:min(800px,92dvh,144vw);width:auto;max-width:640px;max-height:92dvh;aspect-ratio:2 / 3}

header>div:first-child{width:100%;text-align:center}

header{align-items:center}header>div:first-child{align-self:center;width:100%}header .eyebrow,header h1{width:100%;text-align:center;margin-left:auto;margin-right:auto}

/* Larger centered page titles. */
header h1{font-size:48px}header .eyebrow{font-size:15px;letter-spacing:4px}@media(max-width:650px){header h1{font-size:40px}header .eyebrow{font-size:13px}}

/* Fit larger titles and cards within one screen. */
body{height:100dvh;min-height:0;display:flex;flex-direction:column;overflow:hidden}header{flex:0 0 auto;padding-top:18px;padding-bottom:14px}main{flex:1;min-height:0;width:100%;margin:0 auto;padding-bottom:18px;display:flex;flex-direction:column}.gallery-scroll{height:auto;flex:1;min-height:0}.tile .card{zoom:1.05}.grid{row-gap:20px}@media(max-height:650px){header{padding-top:8px;padding-bottom:8px;gap:8px}header h1{margin:4px 0;font-size:40px}header .eyebrow{margin:6px 0}.tile .card{zoom:1}}

/* Narrower centered card list. */
.gallery-scroll{max-width:740px}.grid{max-width:690px}

.hero-view-icon{bottom:0}

/* Narrower background behind the portrait name. */
#angel-nameplate{width:340px}#angel-nameplate::before{transform:scale(.7798,.6962)}

#angel-nameplate::before{left:50%;transform:translateX(-50%) scale(.7798,.6962);transform-origin:top center}

/* Bring the subtitle closer to Angels. */
header h1{margin-bottom:0}header .eyebrow{margin-top:2px}

/* Bring Search closer to the title block. */
header{gap:6px}header .eyebrow{margin-bottom:4px}.search-group .search input{margin-top:0}

/* Shorter card list area, leaving room below. */
.gallery-scroll{flex:0 1 auto;height:55dvh;max-height:100%}

.bottom-switch{flex:0 0 55px;display:flex;align-items:center;justify-content:center;padding-bottom:10px}#gallery-switch{width:89px;height:39px;padding:0;border:0;background:url(set.png) no-repeat -370px -773px;cursor:pointer}#gallery-switch[aria-checked=true]{width:87px;height:37px;background-position:-297px -861px}#gallery-switch:focus-visible{outline:2px solid #dfbd78;outline-offset:4px}

#gallery-switch{transform:scale(.85);transform-origin:center}

/* Let the list fill the available space above the bottom switch. */
.gallery-scroll{flex:1;height:auto;max-height:100%;min-height:0}main{padding-bottom:8px}

.bottom-switch{gap:8px}.switch-label{font:14px Georgia,serif;letter-spacing:1px;color:#d9bf90}

.aprw-card .nmimg{transform:translate(-50%,-50%) scale(.65)}
#portrait-shard{position:absolute;left:16px;top:16px;width:90px;height:112px;z-index:6;pointer-events:none}#portrait-shard[hidden]{display:none}.shard-quality{position:absolute;inset:0;width:90px;height:90px}.shard-portrait{position:absolute;left:11px;top:11px;width:68px;height:68px}.shard-mark{position:absolute;left:7px;top:62px;width:31px;height:32px;background:url(shard-assets/chip.png) no-repeat -104px -2px;transform:scale(.65);transform-origin:left bottom}.shard-label{position:absolute;left:0;right:0;top:94px;text-align:center;font:14px Georgia;color:#efd6a3;text-shadow:0 1px 3px #000}

.shard-animation{position:absolute!important;left:-45px!important;top:-45px!important;right:auto!important;bottom:auto!important;width:180px!important;height:180px!important;pointer-events:none;mix-blend-mode:screen}

.shard-mark{left:5px;top:5px;transform-origin:top left;z-index:3}
/* Three-position collection switch: APRW / LOAP / ARKS. */
.bottom-switch.three-way{display:grid;grid-template-columns:auto 90px auto;grid-template-rows:30px 20px;gap:0 10px;justify-content:center;flex-basis:64px;padding-bottom:10px}.mode-label{padding:0;border:0;background:transparent;color:#ad9a7b;font:14px Georgia;letter-spacing:1px;cursor:pointer}.mode-label[aria-pressed=true]{color:#ffe0a2;text-shadow:0 0 8px #b98738}.mode-aprw{grid-column:1;grid-row:1}.mode-arks{grid-column:3;grid-row:1}.mode-loap{grid-column:2;grid-row:2}.three-way #gallery-switch{grid-column:2;grid-row:1;appearance:none;-webkit-appearance:none;width:90px;height:22px;margin:0;transform:none;border:1px solid #9b7844;border-radius:20px;background:linear-gradient(#17101c,#4d3540);padding:0;cursor:pointer}.three-way #gallery-switch::-webkit-slider-thumb{appearance:none;width:22px;height:22px;border:1px solid #d3aa69;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffe1a0,#ba8445 60%,#4c3020);box-shadow:0 1px 4px #000}.three-way #gallery-switch::-moz-range-thumb{width:20px;height:20px;border:1px solid #d3aa69;border-radius:50%;background:#bc8b50}

.arks-card .nmimg{transform:translate(-50%,-50%) scale(.37)}

#angel-nameplate::before{z-index:0}.angel-name-image{position:relative;z-index:1}

/* Nudge Wukong inside his card and shard, keeping their frames fixed. */
.arks-card .pt{left:7px}.wukong-shard .shard-portrait{left:15px}

/* Center his face through the crop rather than shifting the whole image. */
.arks-card .pt{left:1px}.wukong-shard .shard-portrait{left:11px}

.story-flag-icon{position:absolute;left:50%;bottom:18px;width:74px;height:64px;background:url(menuicon.png) no-repeat -536px -2px;transform:translateX(-50%) scale(.55);transform-origin:bottom center;pointer-events:none}

.story-flag-icon{bottom:26px;transform:translateX(-50%) scale(.65)}

#profile blockquote .story-ribbon-icon{position:absolute;display:block;left:7px;top:7px;width:74px;height:64px;background:url(menuicon.png) no-repeat -536px -2px;transform:scale(.65);transform-origin:center;pointer-events:none}

#profile blockquote .story-ribbon-icon{transform:scale(.75)}

.portrait-name-icon{position:absolute;left:-44px;top:50%;width:74px;height:66px;background:url(menuicon.png) no-repeat -196px -130px;transform:translateY(-50%) scale(.75);transform-origin:center;z-index:2}
/* Matching icon boxes docked on both sides of the nameplate. */
.portrait-name-icon{left:-62px;top:50%;width:56px;height:56px;transform:translateY(-50%);background:none}.portrait-name-icon::before{content:'';position:absolute;left:50%;top:50%;width:74px;height:66px;background:url(menuicon.png) no-repeat -196px -130px;transform:translate(-50%,-50%) scale(.68)}#skin-controls{left:calc(50% + 176px);right:auto;bottom:47.5px;width:56px;height:56px}.skin-icon{width:56px;height:56px;margin:0;background:none;position:relative}.skin-icon::before{content:'';position:absolute;left:50%;top:50%;width:70px;height:78px;background:url(menuicon.png) no-repeat -466px -576px;transform:translate(-50%,-50%) scale(.68)}.skin-caption{top:58px;font-size:13px}

.portrait-name-icon{left:-72px;width:66px;height:66px}.portrait-name-icon::before,.skin-icon::before{transform:translate(-50%,-50%) scale(.82)}#skin-controls{bottom:42.5px;width:66px;height:66px}.skin-icon{width:66px;height:66px}.skin-caption,.resource-caption{position:absolute;top:68px;left:50%;transform:translateX(-50%);white-space:nowrap;color:#f0d5a0;font:13px Georgia,serif;text-shadow:0 1px 3px #000}

.portrait-name-icon{padding:0;border:0;background:transparent;pointer-events:auto;cursor:pointer}#portrait-shard{left:50%;top:50%;transform:translate(-50%,-50%)}.portrait-name-icon[aria-pressed=true]{filter:drop-shadow(0 0 6px #dcb87a)}

/* Longer centered search bar. */
.search-group .search{width:min(480px,90vw);max-width:none;min-width:0;justify-self:center}.search-group{grid-template-columns:auto auto}

/* Search matches the card list container width. */
.search-group{width:100%;max-width:740px;margin-inline:auto;grid-template-columns:1fr 1fr}.search-group .search{grid-column:1/-1;width:100%;max-width:none}header{padding-left:28px;padding-right:28px}

.angels-overview{flex:0 0 auto;display:flex;justify-content:center;align-items:center;padding:0 20px 6px}.angels-overview img{display:block;max-width:100%;height:auto}

main>.angels-overview{padding-bottom:10px}
/* Angel head in the original two-layer Animations badge. */
.portrait-name-icon::before{display:none}.animation-head{position:absolute;left:50%;top:50%;width:52px;height:69px;transform:translate(-50%,-50%) scale(.95);pointer-events:none}.head-back{position:absolute;left:0;top:0;width:52px;height:57px;background:url(head-assets/main.png) no-repeat -657px -606px}.angel-head{position:absolute;left:-18px;top:-27px;width:88px;height:88px;object-fit:cover;border-radius:50%}.head-trim{position:absolute;left:0;bottom:10px;width:52px;height:32px;background:url(head-assets/main.png) no-repeat -768px -695px}





.wukong-head .angel-head{top:-39px}

.wukong-head .angel-head{clip-path:circle(34% at 50% 57%)}
.arts-control{position:absolute;left:14px;top:14px;width:66px;height:66px;padding:0;border:0;background:transparent;z-index:7}.arts-control::before{content:'';position:absolute;left:50%;top:50%;width:74px;height:66px;background:url(menuicon.png) no-repeat -196px -130px;transform:translate(-50%,-50%) scale(.82)}.arts-control span{position:absolute;top:68px;left:50%;transform:translateX(-50%);color:#f0d5a0;font:13px Georgia,serif;text-shadow:0 1px 3px #000}.arts-control[hidden]{display:none}
/* Arts control removed from portrait. */
#arts-button{display:none!important}

.animation-head{top:calc(50% + 6px)}

#profile blockquote{width:460px;background-size:100% 100%}

.flag-type-badge{position:absolute;left:50%;bottom:9px;width:40px;height:40px;transform:translateX(-50%);background-repeat:no-repeat;pointer-events:none}

.hero-view-icon{bottom:6px}

#profile .hero-facts dt{text-align:right}

#profile .hero-facts{column-gap:6px}

#profile .hero-facts{row-gap:2px}

.story-hero.story-hero-cindra{background-position:40px 0}

.gallery-scroll{max-width:650px}.grid{max-width:600px}

.search-group{max-width:650px}.search-group .search{box-sizing:border-box;min-width:0;width:100%}.search-group .search input{box-sizing:border-box;min-width:0;width:100%}

.gallery-scroll{overflow-x:hidden;overflow-y:auto}.grid{width:100%;min-width:0}.tile{min-width:0}

body{background:#100b18 url('gallery-background-v2.jpg') center center/cover no-repeat fixed}

.search-group .search input{background:rgba(25,18,34,.3);color:#fff4df;border-color:#a1845480;box-shadow:none}.search-group .search input::placeholder{color:#cbbca6;opacity:1}

.search-group .search input{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}