.atlas-art{
  background-color:transparent;
  background-image:url('assets/civic-atlas/map-pieces.png');
  background-size:300% 200%
}
.card-text{
  font-size:10px;
  line-height:1.65
}
.card-price{
  font-size:9px;
  color:#8c6c58
}
.card-type{
  font-size:6px
}
.card-title{
  font-size:15px
}
.gallery-intro h1{
  font-size:clamp(34px,3.1vw,49px)
}
.gallery-intro h1 br{
  display:block
}
@media(min-width:1500px){
  .draft-main{
    padding-top:40px
  }
  .draft-gallery{
    grid-template-columns:255px minmax(0,1fr);
    gap:36px;
    min-height:470px
  }
  .origin-art{
    height:290px
  }
  .origin-body{
    padding:22px;
    min-height:165px
  }
  .origin-effects span{
    font-size:11px
  }
  .specimen-description{
    font-size:12px
  }
  .origin-kind{
    font-size:7px
  }
  .charter-strip{
    margin-top:38px
  }
}
@media(max-width:1150px){
  .draft-gallery{
    grid-template-columns:185px minmax(0,1fr);
    gap:16px
  }
  .gallery-intro h1{
    font-size:38px
  }
  .gallery-intro p{
    font-size:11px;
    max-width:165px
  }
  .origin-art{
    height:215px
  }
  .specimen-collection{
    gap:11px
  }
  .origin-body{
    padding:14px 11px
  }
  .origin-body h2{
    font-size:15px;
    letter-spacing:1px
  }
  .origin-effects span{
    font-size:8px;
    gap:6px
  }
  .origin-effects svg{
    width:11px;
    height:11px
  }
  .origin-seal{
    width:43px;
    height:43px;
    right:5px
  }
  .header-center{
    font-size:7px;
    letter-spacing:1.4px
  }
  .seed-note{
    display:none
  }
  .charter-caption{
    min-width:130px
  }
  .charter-slot{
    padding:17px 13px;
    gap:11px
  }
  .game-header{
    gap:10px
  }
  .game-header .brand{
    padding:13px 11px
  }
  .game-header .brand-name{
    font-size:12px;
    letter-spacing:1px
  }
  .game-header .brand-name span{
    font-size:10px;
    letter-spacing:1px
  }
  .resource{
    padding:10px 9px;
    min-width:88px;
    gap:7px
  }
  .resource small{
    display:block;
    margin:0;
    font-size:6px
  }
  .resource strong{
    font-size:19px
  }
  .resource svg{
    width:16px;
    height:16px
  }
  .inspector{
    width:285px
  }
  .command-dock{
    left:325px;
    gap:7px
  }
  .deck-block{
    width:50px;
    padding:10px 7px
  }
  .card-title{
    font-size:13px
  }
  .card-text{
    font-size:7px
  }
  .action-card{
    padding:10px 8px
  }
  .hand{
    gap:5px
  }
  .end-turn-block{
    width:86px
  }
}
@media(max-width:900px){
  .header-center{
    display:none
  }
  .draft-main{
    padding:24px 3% 0
  }
  .draft-gallery{
    grid-template-columns:1fr
  }
  .gallery-intro{
    padding-top:0;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px 20px;
    align-items:end
  }
  .chapter-mark{
    display:none
  }
  .gallery-intro h1{
    font-size:38px
  }
  .gallery-intro h1 br{
    display:none
  }
  .gallery-intro p{
    max-width:300px;
    margin:0
  }
  .intro-foot{
    display:none
  }
  .origin-art{
    height:240px
  }
  .origin-body{
    padding:17px
  }
  .origin-body h2{
    font-size:17px
  }
  .origin-effects span{
    font-size:9px
  }
  .specimen-description{
    font-size:9px
  }
  .charter-caption{
    display:none
  }
  .charter-slot:first-of-type{
    border-left:0
  }
  .game-header .brand{
    min-height:56px;
    padding:10px
  }
  .game-header .brand-mark{
    display:none
  }
  .game-header .brand-name span{
    display:block;
    margin-top:4px
  }
  .game-header .brand small{
    display:none
  }
  .resource{
    min-width:77px;
    height:56px;
    padding:8px 7px
  }
  .resource-label{
    font-size:5px;
    letter-spacing:.8px
  }
  .resource svg{
    width:14px;
    height:14px
  }
  .resource strong{
    font-size:17px
  }
  .turn-display{
    padding:7px 9px;
    min-height:56px;
    gap:6px
  }
  .turn-display .eyebrow{
    font-size:5px
  }
  .turn-display strong{
    font-size:15px
  }
  .turn-display .icon-btn{
    display:none
  }
  .resource-bar{
    gap:4px
  }
  .game-header{
    gap:8px
  }
  .inspector{
    width:255px;
    bottom:198px;
    max-height:260px
  }
  .inspector-art{
    height:62px;
    width:62px;
    margin:12px 10px 0 12px
  }
  .inspector-title{
    padding-left:85px;
    min-height:89px;
    padding-top:15px
  }
  .inspector-title h2{
    font-size:21px
  }
  .inspector-body{
    padding:0 12px 11px
  }
  .inspector-foot{
    display:none
  }
  .command-dock{
    left:22px;
    height:150px
  }
  .card-text{
    font-size:8px
  }
  .card-title{
    font-size:14px
  }
  .action-card{
    max-width:none
  }
  .map-controls{
    bottom:198px
  }
  .map-help{
    bottom:236px
  }
  .target-banner{
    bottom:205px;
    left:auto;
    right:20px;
    transform:none;
    width:300px
  }
}
@media(max-width:600px){
  .site-header{
    height:71px;
    padding:0 19px
  }
  .site-header .brand-name{
    font-size:14px;
    letter-spacing:1.5px
  }
  .site-header .brand-name span{
    font-size:11px;
    letter-spacing:1px
  }
  .site-header .brand small{
    font-size:6px
  }
  .site-header .brand-mark{
    width:28px;
    padding-right:8px
  }
  .site-header .brand-mark svg{
    width:23px;
    height:25px
  }
  .header-right{
    gap:8px
  }
  .resume-link{
    font-size:8px;
    gap:5px
  }
  .resume-link svg{
    display:none
  }
  .draft-main{
    padding:21px 20px 0
  }
  .gallery-meta{
    margin-bottom:25px
  }
  .gallery-meta .eyebrow{
    font-size:6px;
    letter-spacing:1.2px
  }
  .gallery-intro{
    display:block
  }
  .gallery-intro h1{
    font-size:40px;
    letter-spacing:-1.3px
  }
  .gallery-intro p{
    font-size:12px;
    max-width:300px;
    margin-top:15px
  }
  .draft-gallery{
    gap:7px
  }
  .specimen-collection{
    grid-template-columns:1fr;
    gap:10px
  }
  .origin-card{
    display:grid;
    grid-template-columns:125px 1fr;
    align-items:center;
    gap:0;
    padding:20px 0;
    border-bottom:1px solid var(--line)
  }
  .origin-art{
    height:160px;
    align-items:center
  }
  .origin-art img{
    width:125%;
    object-position:center
  }
  .origin-body{
    padding:14px;
    min-height:145px;
    z-index:2
  }
  .origin-body h2{
    font-size:16px;
    letter-spacing:1px;
    padding-bottom:9px
  }
  .origin-kind{
    font-size:5px;
    letter-spacing:.8px
  }
  .origin-effects span{
    font-size:8px;
    gap:6px
  }
  .origin-effects{
    gap:6px;
    margin-top:9px
  }
  .origin-effects svg{
    width:11px;
    height:11px
  }
  .specimen-number{
    bottom:0;
    left:28px
  }
  .specimen-description{
    grid-column:1/-1;
    font-size:10px;
    padding:15px 1px 0
  }
  .origin-seal{
    width:38px;
    height:38px;
    top:-20px;
    right:8px
  }
  .origin-seal svg{
    width:19px;
    height:19px
  }
  .origin-seal small{
    font-size:4px
  }
  .charter-strip{
    display:block;
    margin-top:24px
  }
  .charter-slot{
    width:100%;
    border:0;
    border-bottom:1px solid var(--line);
    padding:15px 10px
  }
  .charter-slot:last-child{
    border-bottom:0
  }
  .slot-text{
    display:flex;
    gap:15px;
    align-items:center;
    width:100%
  }
  .slot-text small{
    margin:0;
    min-width:64px;
    font-size:6px
  }
  .slot-text strong{
    font-size:10px
  }
  .slot-number{
    font-size:17px
  }
  .draft-footer{
    flex-wrap:wrap;
    gap:17px
  }
  .draft-actions{
    width:100%;
    justify-content:end
  }
  .draft-actions .btn.primary{
    flex:1;
    min-width:0
  }
  .draft-footnote{
    font-size:5px;
    letter-spacing:.7px;
    gap:12px
  }
  .review-box{
    grid-template-columns:1fr;
    gap:0
  }
  .review-landscape{
    max-width:300px;
    margin:auto
  }
  .review-copy h2{
    font-size:30px
  }
  .review-copy p{
    font-size:11px
  }
  .review-bonuses{
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    font-size:8px;
    gap:10px
  }
  .game-screen{
    min-height:650px
  }
  .game-header{
    top:11px;
    left:12px;
    right:12px;
    height:105px;
    display:block
  }
  .game-header .brand{
    position:absolute;
    top:0;
    left:0;
    min-height:39px;
    padding:9px 11px;
    gap:7px
  }
  .game-header .brand-name{
    font-size:12px;
    letter-spacing:1.5px
  }
  .game-header .brand-name span{
    display:inline;
    font-size:10px
  }
  .game-header .brand-mark{
    display:grid;
    width:23px;
    height:20px
  }
  .game-header .brand-mark svg{
    width:19px;
    height:19px
  }
  .resource-bar{
    position:absolute;
    top:49px;
    left:0;
    right:0
  }
  .resource{
    flex:1;
    min-width:0;
    padding:7px;
    height:49px;
    gap:5px
  }
  .resource svg{
    width:13px;
    height:13px
  }
  .resource strong{
    font-size:16px
  }
  .resource-label{
    font-size:4px;
    letter-spacing:.6px
  }
  .resource small{
    font-size:5px
  }
  .turn-display{
    position:absolute;
    top:0;
    right:0;
    min-height:39px;
    padding:7px 10px
  }
  .turn-display .eyebrow{
    display:none
  }
  .turn-display strong{
    margin:0;
    font-size:15px
  }
  .turn-display .icon-btn{
    display:inline-grid;
    width:22px;
    height:22px;
    margin-left:5px
  }
  .turn-display .icon-btn svg{
    width:13px;
    height:13px
  }
  .game-nav{
    top:122px;
    left:12px;
    right:12px;
    justify-content:space-between
  }
  .nav-item{
    font-size:7px;
    padding:10px 8px;
    gap:5px
  }
  .nav-item svg{
    width:11px;
    height:11px
  }
  .map-topline,.recent-event{
    display:none
  }
  .compass{
    top:173px;
    right:17px
  }
  .compass svg{
    width:27px;
    height:27px
  }
  .map-controls{
    left:12px;
    right:auto;
    bottom:365px
  }
  .map-controls .icon-btn{
    width:26px;
    height:26px
  }
  .map-help{
    display:none
  }
  .inspector{
    bottom:193px;
    left:12px;
    right:12px;
    width:auto;
    max-height:155px
  }
  .inspector-art{
    width:55px;
    height:55px;
    margin:11px
  }
  .inspector-title{
    min-height:77px;
    padding:13px 12px 5px 78px
  }
  .inspector-title h2{
    font-size:21px;
    margin-bottom:4px
  }
  .inspector-title p{
    font-size:8px
  }
  .inspector-title .eyebrow{
    font-size:5px;
    margin-bottom:5px
  }
  .inspector-body{
    padding:0 12px 12px
  }
  .inspector-body .panel-label,.inspector-body .meter{
    display:none
  }
  .inspector-body .yield-row{
    position:absolute;
    top:16px;
    right:13px;
    gap:10px;
    font-size:9px
  }
  .inspector-body .yield-row svg{
    width:10px;
    height:10px
  }
  .unit-row{
    margin-top:5px;
    padding:6px 9px
  }
  .unit-row small{
    display:inline;
    font-size:7px;
    margin-left:10px
  }
  .research-mini{
    margin-top:8px;
    padding-top:7px
  }
  .research-mini small{
    display:inline;
    margin-right:8px;
    font-size:5px
  }
  .research-mini strong{
    font-size:9px
  }
  .command-dock{
    bottom:12px;
    left:12px;
    right:12px;
    height:168px;
    display:grid;
    grid-template-columns:1fr 100px;
    grid-template-rows:29px 1fr;
    gap:7px
  }
  .deck-block{
    grid-row:1;
    grid-column:1;
    width:auto;
    flex-direction:row;
    align-items:center;
    padding:5px 10px
  }
  .deck-block .eyebrow,.deck-block .tiny{
    display:none
  }
  .energy-count{
    font-size:17px
  }
  .energy-count small{
    font-size:8px
  }
  .deck-stats{
    font-size:6px
  }
  .deck-stats br{
    display:none
  }
  .end-turn-block{
    grid-row:1;
    grid-column:2;
    width:auto;
    padding:0
  }
  .end-turn-block .btn{
    min-height:29px;
    flex-direction:row;
    font-size:10px;
    padding:5px;
    letter-spacing:.6px
  }
  .end-turn-block .turn-tip,.saved-label{
    display:none
  }
  .hand{
    grid-row:2;
    grid-column:1/-1;
    overflow-x:auto;
    padding-top:5px;
    gap:6px
  }
  .action-card{
    min-width:100px;
    max-width:130px;
    padding:10px
  }
  .card-symbol{
    margin-bottom:7px;
    width:20px;
    height:20px
  }
  .card-symbol svg{
    width:20px;
    height:20px
  }
  .card-title{
    font-size:13px;
    margin-bottom:6px
  }
  .card-text{
    font-size:7px
  }
  .card-cost{
    font-size:14px;
    top:9px
  }
  .action-card:hover:not(:disabled),.action-card.chosen{
    transform:translateY(-4px)
  }
  .target-banner{
    left:46px;
    right:12px;
    bottom:365px;
    max-width:none;
    width:auto;
    padding:8px 10px
  }
  .target-banner p{
    font-size:8px
  }
  .modal{
    padding:27px 21px
  }
  .modal h2{
    font-size:28px
  }
  .modal-intro{
    font-size:11px
  }
  .tech-grid{
    grid-template-columns:1fr 1fr;
    gap:9px
  }
  .tech-card{
    padding:13px
  }
  .tech-card h3{
    font-size:19px
  }
  .tech-card p{
    font-size:9px
  }
  .help-sections,.charter-review{
    grid-template-columns:1fr
  }
  .help-sections{
    gap:22px
  }
  .charter-review>div{
    display:grid;
    grid-template-columns:90px 1fr;
    gap:0 15px
  }
  .charter-review img{
    grid-row:1/3;
    aspect-ratio:1;
    height:90px
  }
  .charter-review h3{
    margin:0 0 8px;
    font-size:22px
  }
  .charter-review p{
    font-size:9px
  }
  .victory{
    padding:10px 0
  }
  .victory h2{
    font-size:31px
  }
  .victory-stats{
    gap:20px
  }
  #toast{
    bottom:365px;
    font-size:9px;
    width:max-content
  }
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{
    transition:none!important;
    scroll-behavior:auto!important
  }
}
@media(max-width:1150px) and (min-width:901px){
  .gallery-intro h1{
    font-size:32px
  }
}
@media(max-width:600px){
  .gallery-intro h1 br{
    display:block
  }
  .origin-card{
    grid-template-columns:minmax(80px,35%) minmax(0,1fr)
  }
  .origin-body{
    min-width:0;
    padding:12px
  }
  .origin-body h2{
    font-size:clamp(11px,3.5vw,16px);
    letter-spacing:.8px
  }
  .gallery-intro h1{
    font-size:38px
  }
  .origin-effects span{
    min-width:0
  }
}