/* Round 09. Transparent artwork, a legible identity, and viewport-aware reference tools. */
.portal{--header-height:104px}
.portal .workspace{background:radial-gradient(ellipse at 100% 0%,#75503b16,transparent 55%),radial-gradient(ellipse at 0% 90%,#3653651a,transparent 60%),#15191d}
.community-wordmark{width:100%;padding:0 5px;gap:10px}
.community-logo{display:block;width:min(100%,205px);height:auto;aspect-ratio:1000/595;object-fit:contain;background:none;mask-image:none;mix-blend-mode:normal;filter:drop-shadow(0 3px 3px #0004)}
.portal .topbar{height:var(--header-height);min-height:var(--header-height);padding:8px 24px}
.portal .header-season{width:96px;height:96px;padding:4px;overflow:visible}
.portal .header-season img{display:block;width:100%;height:100%;max-height:100%;object-fit:contain;clip-path:none;border-radius:0;opacity:1;filter:drop-shadow(0 2px 5px #0004)}
.portal .topbar-actions{gap:15px}.portal .server-identity{display:flex;max-width:260px;overflow:visible;gap:10px}
.server-symbol{position:relative;display:grid;place-items:center;flex:0 0 24px;height:28px;color:#c5b89f}.server-symbol .icon{width:20px;height:24px}
.server-light{position:absolute;right:-2px;bottom:0;width:8px;height:8px;border-radius:50%;background:#858d91;border:2px solid #1a2024}
[data-state=online] .server-light{background:#9eeaa4;box-shadow:0 0 7px #77dc8270}[data-state=offline] .server-light{background:#a57d78}[data-state=starting] .server-light,[data-state=stopping] .server-light{background:#ecc080}
.server-text{min-width:0;display:flex;flex-direction:column;gap:4px}#server-label{display:block;max-width:205px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.73rem}
.server-readout{display:flex;gap:8px;align-items:center;font-size:.58rem;color:#a7b1b3}.server-readout small{font-size:.55rem;color:#909fa4;border-left:1px solid #455153;padding-left:8px}
[data-state=online] #server-state{color:#a9d7ac}.topbar-profile{border-radius:50%;padding:0!important;width:34px!important;height:34px!important;border:1px solid #7b7467}.topbar-profile .avatar{width:32px;height:32px;min-width:32px;border:0;border-radius:50%;display:block}
.overview-layout::before{height:330px;background:linear-gradient(180deg,transparent 0%,#181c1f05 46%,#181c1f90 78%,#181c1f 100%),url('./overview-landscape.webp') center 48%/cover no-repeat}
.overview-cover{height:224px;min-height:224px;padding-top:30px}.overview-cover .cover-copy{max-width:40%;background:linear-gradient(90deg,#10171cba,transparent);padding:9px 12px}
.character-motto{height:116px;min-height:116px;padding:7px 20px 7px 12px;overflow:visible}.character-motto>img{width:100px;height:100px;aspect-ratio:1;object-fit:contain;border-radius:0;flex:0 0 100px}
.collection-art,.campaign-preview>img,.login-art-stage{background:transparent;border-radius:0}
.collection-art{overflow:visible}.collection-art img,.collection-preview>img,.character-motto>img,.signout-art>img{object-fit:contain;mix-blend-mode:normal;opacity:1;filter:drop-shadow(0 5px 5px #0005);border-radius:0}
.login-shell{background:#17191b}.login-art-stage img{mix-blend-mode:normal;filter:none}
.campaign-card{position:relative;isolation:isolate;box-shadow:0 7px 18px #0003;transition:transform .22s,border-color .22s,box-shadow .22s}
.campaign-card::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;background:linear-gradient(115deg,transparent 25%,#f5cf9120 47%,transparent 65%);background-size:240% 100%;background-position:100% 0;transition:opacity .25s,background-position .8s}
.campaign-card:hover,.campaign-card:focus-visible{transform:translateY(-2px);box-shadow:0 10px 24px #0005;border-color:#9e825c}.campaign-card:hover::after,.campaign-card:focus-visible::after{opacity:1;background-position:0 0}
@keyframes badge-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.025)}}
@media(prefers-reduced-motion:no-preference){.campaign-card:where(:hover,:focus-visible) .collection-art img{animation:badge-breathe 4s ease-in-out infinite}}
/* Native selects retain keyboard support, with an explicit inset arrow and room for the text. */
.catalog-controls select,.craft-controls select,.tree-producer select,.ingredient-choice select{appearance:none;padding:8px 34px 8px 12px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%23cdb795' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:10px 7px}
.catalog-controls>label:not(.search-field){flex:0 1 190px;min-width:130px}.catalog-controls>label:has(#item-size){flex-basis:145px}
.catalog-controls,.craft-controls{gap:10px;margin-bottom:7px}.catalog-controls label,.craft-controls label{gap:5px}.catalog-controls input,.catalog-controls select,.craft-controls input,.craft-controls select{height:37px}.catalog-controls .search-field>.icon,.craft-controls .search-field>.icon{bottom:10px}.catalog-controls .segmented{height:37px}.catalog-controls .segmented button{padding:7px 11px}
.catalog-banner{min-height:76px;padding:12px 21px;margin-bottom:10px}.catalog-banner h1{font-size:1.5rem;margin:4px 0}.catalog-banner p{font-size:.66rem;margin:0}
.catalog-groups{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:7px;min-width:0;overflow-x:auto;scrollbar-width:thin;margin:0 0 10px;padding:1px 1px 4px}
.catalog-groups .craft-group{min-height:56px;padding:7px;gap:7px}.catalog-groups .craft-group>.item-art{height:35px;width:35px}.catalog-groups .craft-group strong{font-size:.6rem}.catalog-groups .craft-group small{margin-top:4px}
.catalog-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;align-content:start}.catalog-item{padding:10px 13px;min-height:124px}.catalog-item>.item-art{height:62px;width:100%;margin:3px auto 5px}.catalog-item>.item-art img{width:auto;height:auto;max-width:76px;max-height:62px;object-fit:contain}.catalog-item>strong{font-size:.76rem;line-height:1.3;min-height:1.3em}.catalog-item>.item-category{font-size:.5rem}.item-card-bottom{margin-top:5px;font-size:.62rem}
.catalog-summary,.craft-results-caption{margin:5px 0 7px;min-height:22px}.catalog-results .pagination{flex-shrink:0;padding:7px 12px}.catalog-source,.craft-page>.source-note{font-size:.61rem;margin:7px 0 0}
.catalog-item>strong{margin:4px 0}.catalog-item>.item-art{margin:2px auto 3px}
.catalog-item{display:grid;grid-template-columns:78px minmax(0,1fr);grid-template-rows:auto auto auto;align-content:center;column-gap:12px;row-gap:4px}.catalog-item>.item-category{grid-column:2;grid-row:1;line-height:1.4;min-height:1.4em;overflow:visible}.catalog-item>.item-art{grid-column:1;grid-row:1/4;width:78px;height:78px;margin:0}.catalog-item>.item-art img{width:68px;height:68px;max-width:68px;max-height:68px;object-fit:contain}.catalog-item>strong{grid-column:2;grid-row:2;margin:0;line-height:1.5}.catalog-item>.item-card-bottom{grid-column:2;grid-row:3;margin-top:1px}
.craft-discovery{margin-bottom:7px}.craft-discovery-heading{margin:0;min-height:22px}.craft-group-rail{gap:7px;padding-bottom:3px}.craft-group{min-height:57px;padding:7px}.craft-layout{min-height:0}.craft-controls>label:not(.search-field){flex:0 1 175px}.craft-controls .search-field{min-width:200px}
.events-page>.source-note,.store-page>.source-note{line-height:1.45}.campaign-grid .collection-art{height:130px}
/* Let desktop content use the actual viewport instead of adding competing min-heights. */
@media(min-width:1200px) and (min-height:780px){
 .portal .workspace{min-height:100dvh;display:flex;flex-direction:column}.portal main{min-height:0;height:calc(100dvh - var(--header-height) - 41px);flex:none;max-width:none;padding:16px 22px}
 #page{height:100%}.catalog-page,.craft-page,.events-page,.store-page{height:100%;display:flex;flex-direction:column;min-height:0}
 .catalog-page>:not(.catalog-results),.craft-page>:not(.craft-layout),.events-page>:not(.campaign-grid),.store-page>:not(.store-grid){flex-shrink:0}
 .catalog-results{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}.catalog-grid,.catalog-table-wrap{min-height:0;flex:1;max-height:none!important;overflow:auto}.catalog-grid{grid-auto-rows:minmax(124px,1fr)}.catalog-grid[data-page-size="12"]{grid-template-rows:repeat(3,minmax(0,1fr));grid-auto-rows:auto}.catalog-grid[data-page-size="12"] .catalog-item{min-height:0}
 .craft-layout{height:auto;max-height:none;flex:1;min-height:0}.craft-browser,.craft-detail{min-height:0;max-height:none}.craft-browser #craft-list{min-height:0}.recipe-detail-heading{height:73px;min-height:73px}.recipe-detail-body{min-height:0}.craft-page .flow-panel .horizontal-tree{min-height:0}
 .store-cover{min-height:142px;padding:15px 23px}.store-grid{flex:1;min-height:0}.store-grid .collection-art{height:clamp(115px,17dvh,180px);flex:1;min-height:95px}.store-collection{min-height:0}.store-page .section-art{min-height:87px;padding:12px 22px}.store-page .store-section-heading{margin:10px 0}
 .events-heading{min-height:84px;padding:12px 20px}.events-filters{margin:10px 0}.campaign-grid{flex:1;min-height:0;grid-template-rows:repeat(2,minmax(0,1fr))}.campaign-grid .campaign-card{min-height:0;padding:9px 14px}.campaign-grid .collection-art{height:0;min-height:82px;flex:1;margin-bottom:6px}.campaign-grid .campaign-card>small{margin-top:5px}.campaign-grid .campaign-card h3{font-size:1.1rem}.campaign-grid .campaign-card p{font-size:.62rem;margin-bottom:7px}.events-page>.source-note{margin:8px 0 0}
}
@media(min-width:2300px){.portal{--sidebar:250px}.portal main{padding:22px 32px}.overview-cover{height:clamp(260px,24dvh,350px)}.overview-layout::before{height:430px}.overview-cards>.card{min-height:320px}.catalog-grid{grid-template-columns:repeat(6,minmax(0,1fr))}.catalog-grid[data-page-size="12"]{grid-template-rows:repeat(2,minmax(0,1fr))}.catalog-item>.item-art{height:95px}.catalog-item>.item-art img{max-width:105px;max-height:90px}.craft-layout{grid-template-columns:340px minmax(0,1fr)}.campaign-grid .collection-art{min-height:125px}}
@media(min-width:2300px) and (min-height:780px){.catalog-grid[data-page-size="24"]{grid-template-rows:repeat(4,minmax(0,1fr))}.catalog-grid[data-page-size="24"] .catalog-item{min-height:0}}
@media(max-width:1500px){.catalog-groups{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:140px}.portal .topbar-actions{gap:10px}.portal .server-identity{max-width:200px}#server-label{max-width:150px}}
@media(max-width:1199px){.portal main{min-height:calc(100dvh - var(--header-height) - 41px)}.catalog-controls,.craft-controls{flex-wrap:wrap}.catalog-controls .search-field,.craft-controls .search-field{flex:1 1 220px}.craft-controls>label:not(.search-field){flex:1 1 120px}.overview-cover{height:205px;min-height:205px}.overview-cover .cover-copy{max-width:55%}.craft-layout{height:490px}}
@media(max-width:760px){
 .portal{--header-height:80px}.portal .topbar{padding:6px 12px}.portal .header-season{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);height:74px;width:74px;margin:0}.portal .breadcrumb{max-width:88px;overflow:hidden;margin-right:auto}.portal .breadcrumb .preview-tag{display:none}.portal .breadcrumb strong{font-size:.63rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.portal .topbar-actions{gap:7px;margin-left:auto}.portal .server-identity{display:flex;max-width:24px;gap:0}.server-text{display:none}.server-symbol{flex-basis:21px}.portal .topbar-actions>.icon-button{display:inline-flex;width:30px;height:30px}.topbar-profile .avatar{width:28px;height:28px;min-width:28px}
 .portal main{padding:13px 12px}.overview-cover{height:220px;min-height:220px;padding:23px 0;display:flex;flex-direction:column;justify-content:space-between}.overview-cover .cover-copy{max-width:95%}.overview-cover .cover-status{margin:0 8px 6px}.overview-layout::before{height:290px;background-position:center,right 50%}
 .catalog-controls .search-field{flex-basis:100%;min-width:0}.catalog-controls>label:not(.search-field){flex:1 1 100px;min-width:0}.catalog-controls>label:has(#item-size){flex-basis:90px}.catalog-controls .segmented{align-self:end}.catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.catalog-item{min-height:148px;padding:10px}.catalog-item>.item-art{height:62px}.catalog-item>strong{font-size:.7rem}
 .craft-layout{height:auto;min-height:0}.craft-controls>label:not(.search-field){flex:1 1 95px}.craft-controls .search-field{flex-basis:100%;min-width:0}.character-motto{height:auto;min-height:105px;gap:10px;padding:9px;flex-wrap:wrap}.character-motto>img{width:80px;height:80px;flex-basis:80px}.character-motto h3{font-size:.95rem}.character-motto>.text-link{margin-left:90px}.campaign-grid .collection-art{height:175px}
}
@media(prefers-reduced-motion:reduce){.campaign-card,.campaign-card::after{transition:none}.campaign-card:hover,.campaign-card:focus-visible{transform:none}.campaign-card .collection-art img{animation:none}}
@media(max-width:760px){.catalog-item{grid-template-columns:1fr;grid-template-rows:auto 70px auto auto;gap:5px;min-height:155px;text-align:center}.catalog-item>.item-category{grid-column:1;grid-row:1}.catalog-item>.item-art{grid-column:1;grid-row:2;width:100%;height:70px}.catalog-item>strong{grid-column:1;grid-row:3}.catalog-item>.item-card-bottom{grid-column:1;grid-row:4;justify-content:center}.catalog-item>.item-card-bottom>small:empty{display:none}}

/* Commerce artwork belongs in the cover, preserving space for offers below. */
.market-cover,.store-cover{position:relative;isolation:isolate;overflow:hidden;min-height:190px;padding:23px 28px;background-color:#182024;background-size:cover;background-repeat:no-repeat;border-color:#645c50;box-shadow:0 8px 24px #0003}
.market-cover{background-image:linear-gradient(90deg,#10191ee8 0%,#10191eaa 30%,#10191e15 68%,#10191e65),url('./trading.webp');background-position:center 51%}
.store-cover{background-image:linear-gradient(90deg,#10191ef2 0%,#10191ebd 32%,#10191e15 70%,#10191e50),url('./outfitter.webp');background-position:center 52%;min-height:204px}
.market-cover::after,.store-cover::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,#15202780,transparent 65%);pointer-events:none}
.market-cover p,.store-cover p{color:#cfdbd9;text-shadow:0 1px 4px #0009}.store-cover>div:first-child{max-width:660px}.store-cover .store-outfit-teaser{flex:0 0 138px;max-width:138px;background:#13202bd6}.store-outfit-teaser>.item-art{width:51px;height:51px}
.commerce-eyebrow{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.test-mode-note{display:inline-flex;align-items:center;gap:6px;border:1px solid #84949965;border-radius:5px;padding:5px 8px;background:#19252aa6;color:#d2d4c6;font:inherit;font-size:.59rem;cursor:pointer}.test-mode-note:hover{background:#35464e}.test-mode-note .icon{width:12px;height:12px}
.market-summary{margin:6px 0 9px}.market-toolbar{margin:12px 0 6px}.market-toolbar select{padding-right:34px}
@media(min-width:1200px) and (min-height:780px){
 .market-page{height:100%;display:flex;flex-direction:column;min-height:0}.market-page>:not(.market-content){flex-shrink:0}.market-content{height:auto;min-height:0;flex:1}
 .store-page .store-cover{min-height:204px;padding:20px 28px}.store-grid .collection-art{max-height:250px;height:auto;min-height:120px}.store-page>.source-note{margin:9px 0 0}
}
@media(min-width:2300px){.market-cover{min-height:215px}.store-page .store-cover{min-height:230px}.market-grid{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media(max-width:700px){
 .market-cover,.store-page .store-cover{padding:20px;min-height:230px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:14px;background-position:64% center}
 .market-cover{background-image:linear-gradient(90deg,#10191edb,#10191e6b),url('./trading.webp')}.store-cover{background-image:linear-gradient(90deg,#10191eea,#10191e88),url('./outfitter.webp')}
 .store-cover>div:first-child{max-width:100%}.store-cover .store-outfit-teaser{display:none}.market-cover p{max-width:250px;line-height:1.5}.market-content{height:auto;min-height:320px;max-height:none}.market-grid{padding:10px}.commerce-eyebrow{gap:9px}
}