:root{
  color-scheme:light;
  --paper:#f7f4ed;
  --stone:#e8e4dc;
  --ink:#292b2c;
  --muted:#767870;
  --accent:#b94131;
  --line:#d6d0c5;
  --blue:#456a7b;
  --gold:var(--accent);
  --shadow:0 5px 20px #342d2015,0 1px 3px #342d2020;
  font-family:'Segoe UI',Arial,sans-serif;
  font-synthesis:none
}
*{
  box-sizing:border-box
}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink)
}
button,input,select{
  font:inherit
}
button{
  color:inherit;
  cursor:pointer;
  transition:transform .2s,background .2s,box-shadow .2s,border-color .2s
}
button:disabled{
  cursor:not-allowed;
  opacity:.42
}
button:focus-visible,input:focus-visible,select:focus-visible,canvas:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:4px
}
h1,h2,h3,p{
  margin:0
}
h1,h2,h3,.serif{
  font-family:Georgia,'Times New Roman',serif;
  font-weight:400
}
svg{
  width:19px;
  height:19px;
  flex-shrink:0;
  vertical-align:middle
}
.eyebrow{
  font-size:9px;
  font-weight:600;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--muted)
}
.gold,.accent{
  color:var(--accent)
}
.muted{
  color:var(--muted)
}
.tiny{
  font-size:11px
}
.divider{
  height:1px;
  background:var(--line);
  margin:18px 0
}
.btn{
  display:inline-flex;
  gap:12px;
  align-items:center;
  justify-content:center;
  border:1px solid var(--line);
  background:#fffefa;
  padding:12px 19px;
  border-radius:1px;
  font-size:11px;
  letter-spacing:.4px
}
.btn:hover:not(:disabled){
  border-color:var(--ink);
  background:#fff
}
.btn.primary{
  background:var(--accent);
  border-color:var(--accent);
  color:#fffaf3
}
.btn.primary:hover:not(:disabled){
  background:#903024
}
.btn.ghost{
  border-color:transparent;
  background:transparent
}
.icon-btn{
  display:inline-grid;
  place-items:center;
  width:32px;
  height:32px;
  background:#fbf9f2;
  border:1px solid var(--line);
  border-radius:1px;
  color:var(--ink)
}
.icon-btn:hover{
  color:var(--accent);
  border-color:var(--accent)
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  flex-shrink:0
}
.brand-mark{
  display:grid;
  place-items:center;
  width:38px;
  height:43px;
  color:var(--accent);
  border-right:1px solid var(--line);
  padding-right:12px
}
.brand-mark svg{
  width:27px;
  height:30px;
  stroke-width:1.1
}
.brand-name{
  font:18px Georgia,serif;
  letter-spacing:3px;
  white-space:nowrap
}
.brand-name span{
  font-size:14px;
  letter-spacing:2.5px
}
.brand small{
  display:block;
  color:var(--muted);
  font-size:7px;
  letter-spacing:2.1px;
  margin-top:7px
}
.site-header{
  height:83px;
  padding:0 4.3%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line)
}
.header-center{
  font-size:8px;
  letter-spacing:2.6px;
  color:var(--muted)
}
.header-right{
  display:flex;
  gap:22px;
  align-items:center
}
.resume-link{
  background:transparent;
  border:0;
  padding:7px 0;
  display:flex;
  align-items:center;
  gap:8px;
  font-size:10px;
  color:var(--muted)
}
.resume-link:hover{
  color:var(--accent)
}
.resume-link svg{
  width:14px;
  height:14px
}
/* The founding collection */
.draft-screen{
  min-height:100dvh;
  background:repeating-linear-gradient(94deg,transparent 0,transparent 119px,#96866a05 120px,transparent 121px),linear-gradient(155deg,#fffdf8,#f2eee5 58%,#ebe6dc);
  position:relative
}
.draft-screen:before{
  content:'';
  position:absolute;
  inset:83px 0 auto auto;
  height:420px;
  width:55%;
  background:linear-gradient(126deg,transparent 30%,#fff9 30.2%,#fff9 43%,transparent 43.2%,transparent 55%,#fff6 55.2%,#fff6 68%,transparent 68.2%);
  pointer-events:none
}
.draft-main{
  position:relative;
  max-width:1580px;
  margin:auto;
  padding:27px 4.3% 0
}
.gallery-meta{
  display:flex;
  justify-content:space-between;
  margin-bottom:22px
}
.gallery-meta .eyebrow:first-child{
  color:var(--accent)
}
.gallery-meta .eyebrow{
  font-size:8px;
  letter-spacing:2px
}
.draft-gallery{
  display:grid;
  grid-template-columns:230px minmax(0,1fr);
  gap:24px;
  min-height:388px
}
.gallery-intro{
  padding-top:34px;
  position:relative;
  z-index:1
}
.chapter-mark{
  font:italic 19px Georgia;
  color:var(--accent);
  display:block;
  margin-bottom:16px
}
.gallery-intro h1{
  font-size:clamp(38px,3.5vw,54px);
  line-height:1.02;
  letter-spacing:-1.9px;
  text-transform:uppercase
}
.gallery-intro p{
  max-width:195px;
  font-size:12px;
  color:#686a63;
  line-height:1.8;
  margin-top:20px
}
.intro-foot{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:30px;
  color:#858276;
  font-size:7px;
  letter-spacing:1.7px
}
.intro-foot svg{
  width:24px;
  height:24px;
  color:#8c8b7f
}
.specimen-collection{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:15px;
  align-items:start
}
.origin-card{
  text-align:left;
  display:flex;
  flex-direction:column;
  border:0;
  padding:0;
  background:transparent;
  min-width:0;
  position:relative;
  isolation:isolate
}
.origin-art{
  width:100%;
  height:228px;
  position:relative;
  display:flex;
  align-items:end;
  justify-content:center
}
.origin-art img{
  display:block;
  width:113%;
  max-width:none;
  height:100%;
  object-fit:contain;
  object-position:center bottom;
  filter:drop-shadow(2px 9px 6px #4b412426);
  transition:transform .35s,filter .35s;
  position:relative;
  z-index:1
}
.origin-card:hover .origin-art img,.origin-card.selected .origin-art img{
  transform:translateY(-5px)
}
.specimen-number{
  position:absolute;
  left:13px;
  bottom:8px;
  font-size:7px;
  letter-spacing:1px;
  color:#77776b;
  z-index:2
}
.origin-body{
  position:relative;
  width:100%;
  min-height:134px;
  background:linear-gradient(110deg,#faf8f2,#e9e4da);
  border:1px solid #cfc8b9;
  box-shadow:1px 5px 7px #5c4d2e14,inset 0 1px #fff;
  padding:17px 15px 15px
}
.origin-body:after{
  content:'';
  position:absolute;
  left:3px;
  right:-4px;
  bottom:-5px;
  height:4px;
  background:#d4ccbc;
  transform:skewX(35deg);
  border-bottom:1px solid #bfb6a4;
  z-index:-1
}
.origin-kind{
  color:#8d877b;
  font-size:6px;
  letter-spacing:1px;
  display:block;
  margin-bottom:8px
}
.origin-body h2{
  text-transform:uppercase;
  font-size:clamp(13px,1.45vw,21px);
  letter-spacing:1.6px;
  line-height:1.3;
  padding-bottom:13px;
  border-bottom:1px solid #d2ccbe
}
.origin-effects{
  display:flex;
  flex-direction:column;
  gap:7px;
  margin-top:12px
}
.origin-effects span{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:9px;
  line-height:1.45;
  color:#5b5c55
}
.origin-effects svg{
  width:13px;
  height:13px;
  color:#777366
}
.origin-seal{
  position:absolute;
  right:8px;
  top:-25px;
  width:50px;
  height:50px;
  border-radius:50%;
  background:var(--accent);
  color:#fff8ed;
  border:3px double #f1c3b0;
  box-shadow:1px 3px 6px #8a2c3025;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  opacity:0;
  transform:rotate(-12deg) scale(.85);
  transition:opacity .2s,transform .2s;
  z-index:3
}
.origin-seal svg{
  width:23px;
  height:23px;
  stroke-width:1
}
.origin-seal small{
  font-size:5px;
  letter-spacing:1.1px;
  margin-top:1px
}
.origin-card.selected .origin-seal{
  opacity:1;
  transform:rotate(-12deg) scale(1)
}
.origin-card.selected .origin-body{
  border-color:#b9413175;
  box-shadow:1px 5px 8px #7f312014,inset 0 -2px var(--accent)
}
.specimen-description{
  font-size:10px;
  color:#7d7b72;
  line-height:1.65;
  padding:15px 5px 0
}
.charter-strip{
  display:flex;
  border-top:1px solid #cfc8ba;
  border-bottom:1px solid #cfc8ba;
  margin-top:28px;
  align-items:stretch
}
.charter-caption{
  padding:17px 25px 17px 0;
  min-width:160px
}
.charter-caption .eyebrow{
  display:block;
  font-size:6px;
  letter-spacing:1.6px;
  margin-bottom:4px
}
.charter-caption .serif{
  font-size:22px
}
.charter-slot{
  flex:1;
  border:0;
  border-left:1px solid #d5cebf;
  padding:17px 21px;
  background:transparent;
  display:flex;
  align-items:center;
  gap:15px;
  text-align:left;
  min-width:0
}
.charter-slot:disabled{
  opacity:.6
}
.charter-slot:hover:not(:disabled){
  background:#fff7
}
.charter-slot.current{
  background:#fff6;
  box-shadow:inset 0 -2px var(--accent)
}
.slot-number{
  font:italic 21px Georgia;
  color:#969487
}
.charter-slot.current .slot-number,.charter-slot.filled .slot-status{
  color:var(--accent)
}
.slot-text small{
  display:block;
  font-size:7px;
  letter-spacing:1.2px;
  margin-bottom:7px;
  color:var(--muted)
}
.slot-text strong{
  display:block;
  font-size:11px;
  font-weight:400;
  color:#918c80
}
.charter-slot.filled strong{
  color:var(--ink)
}
.slot-status{
  margin-left:auto;
  color:#aaa596
}
.slot-status svg{
  width:15px;
  height:15px
}
.draft-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:21px 0
}
.seed-info{
  display:flex;
  align-items:center;
  gap:19px
}
.seed-wrap{
  display:flex;
  align-items:center;
  gap:11px;
  font-size:7px;
  letter-spacing:1.2px;
  color:var(--muted)
}
.seed-wrap input{
  border:0;
  border-bottom:1px solid #c9c2b3;
  background:transparent;
  width:123px;
  padding:7px 0;
  font-size:9px;
  color:var(--ink);
  border-radius:0
}
.seed-note{
  display:flex;
  align-items:center;
  gap:7px;
  font-size:8px;
  color:#8a867b
}
.seed-note svg{
  width:12px;
  height:12px
}
.draft-actions{
  display:flex;
  gap:10px
}
.draft-actions .btn.primary{
  min-width:192px
}
.draft-footnote{
  display:flex;
  justify-content:space-between;
  border-top:1px solid #d7d1c4;
  padding:16px 0;
  font-size:7px;
  color:#938c7e;
  letter-spacing:1.4px
}
.review-box{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:25px;
  min-height:380px
}
.review-landscape img{
  width:100%;
  filter:drop-shadow(4px 12px 7px #786c4633)
}
.review-copy h2{
  font-size:31px;
  line-height:1.15;
  margin:14px 0
}
.review-copy p{
  font-size:12px;
  line-height:1.8;
  color:#727267;
  margin-bottom:15px
}
.review-bonuses{
  display:flex;
  flex-direction:column;
  gap:8px;
  font-size:10px;
  color:var(--blue);
  margin-top:22px
}
.review-bonuses svg{
  width:15px;
  height:15px;
  margin-right:6px
}
/* Open map and floating paper controls */
.game-screen{
  height:100dvh;
  min-height:620px;
  overflow:hidden;
  position:relative;
  background:#eae8de
}
.game-map{
  position:absolute;
  inset:0;
  overflow:hidden
}
.game-map canvas{
  display:block;
  width:100%;
  height:100%;
  touch-action:none;
  cursor:grab
}
.game-map canvas.targeting{
  cursor:crosshair
}
.game-header{
  position:absolute;
  top:19px;
  left:22px;
  right:22px;
  z-index:5;
  display:flex;
  align-items:start;
  gap:20px;
  pointer-events:none
}
.game-header>*{
  pointer-events:auto
}
.game-header .brand{
  background:#faf8f2f5;
  box-shadow:var(--shadow);
  padding:13px 16px;
  min-height:65px
}
.game-header .brand-name{
  font-size:14px;
  letter-spacing:2px
}
.game-header .brand-name span{
  font-size:11px;
  letter-spacing:1.5px
}
.game-header .brand small{
  font-size:6px;
  letter-spacing:1.6px
}
.game-header .brand-mark{
  width:29px;
  height:31px;
  padding-right:9px
}
.game-header .brand-mark svg{
  width:22px;
  height:25px
}
.resource-bar{
  display:flex;
  gap:7px;
  flex:1;
  justify-content:center
}
.resource{
  display:flex;
  align-items:center;
  gap:9px;
  background:#faf8f2f5;
  border:1px solid #fff9;
  box-shadow:var(--shadow);
  padding:10px 13px;
  min-width:102px;
  height:65px
}
.resource svg{
  color:#726d60;
  width:19px;
  height:19px
}
.resource-label{
  display:block;
  font-size:6px;
  letter-spacing:1.5px;
  margin-bottom:3px;
  color:#5d6059
}
.resource strong{
  font:21px Georgia;
  display:inline;
  font-variant-numeric:tabular-nums
}
.resource small{
  font-size:7px;
  color:#767b6e;
  display:inline;
  margin-left:5px;
  white-space:nowrap
}
.turn-display{
  background:#faf8f2f2;
  display:flex;
  align-items:center;
  padding:10px 12px;
  gap:13px;
  box-shadow:var(--shadow);
  min-height:65px
}
.turn-display .eyebrow{
  font-size:6px;
  letter-spacing:1px
}
.turn-display strong{
  font:18px Georgia;
  display:block;
  margin-top:5px
}
.turn-display strong .tiny{
  font:10px Arial
}
.turn-display .icon-btn{
  width:27px;
  height:27px
}
.game-nav{
  position:absolute;
  top:99px;
  left:22px;
  z-index:3;
  display:flex;
  align-items:center;
  background:#faf8f2ed;
  box-shadow:var(--shadow)
}
.nav-item{
  background:transparent;
  border:0;
  border-bottom:2px solid transparent;
  padding:10px 12px;
  display:flex;
  align-items:center;
  gap:7px;
  font-size:9px
}
.nav-item svg{
  width:13px;
  height:13px
}
.nav-item.active{
  color:var(--accent);
  border-bottom-color:var(--accent)
}
.nav-item:hover{
  background:#e8e3d9
}
.nav-spacer{
  width:1px;
  height:15px;
  background:#cfc8b9
}
.map-topline{
  position:absolute;
  top:102px;
  right:22px;
  display:flex;
  align-items:center;
  gap:10px;
  z-index:2
}
.map-chip{
  font-size:7px;
  letter-spacing:1.4px;
  color:#535d5a;
  padding:8px 10px;
  background:#faf8f2c9
}
.map-chip.secondary{
  font-size:6px;
  color:#747d78
}
.recent-event{
  position:absolute;
  top:150px;
  left:22px;
  font-size:10px;
  line-height:1.6;
  z-index:2;
  padding:8px 12px;
  max-width:430px;
  background:#f8f6eece;
  border-left:2px solid var(--accent);
  color:#5e6256;
  pointer-events:none
}
.compass{
  position:absolute;
  right:27px;
  top:161px;
  color:#536977;
  text-align:center;
  z-index:2;
  pointer-events:none
}
.compass span{
  display:block;
  font:9px Georgia;
  margin-bottom:4px
}
.compass svg{
  width:37px;
  height:37px;
  stroke-width:.9
}
.map-controls{
  display:flex;
  gap:4px;
  position:absolute;
  right:22px;
  bottom:201px;
  z-index:3
}
.map-controls .icon-btn{
  background:#faf8f2ef;
  width:28px;
  height:28px
}
.map-controls svg{
  width:14px;
  height:14px
}
.map-help{
  position:absolute;
  right:22px;
  bottom:239px;
  font-size:8px;
  color:#566968;
  background:#faf8f2b5;
  padding:6px 9px
}
.inspector{
  position:absolute;
  left:22px;
  bottom:24px;
  width:326px;
  max-height:335px;
  z-index:4;
  background:#faf8f2f5;
  border:1px solid #fffc;
  box-shadow:var(--shadow);
  overflow:hidden;
  display:flex;
  flex-direction:column
}
.inspector-scroll{
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:#c1b9a9 transparent;
  min-height:0;
  flex:1
}
.inspector-art{
  width:78px;
  height:78px;
  float:left;
  margin:16px 13px 0 16px;
  position:relative;
  background:#deded0;
  overflow:hidden
}
.inspector-art img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(.65) brightness(1.18)
}
.inspector-title{
  min-height:106px;
  padding:20px 15px 12px 110px
}
.inspector-title .eyebrow{
  font-size:6px;
  letter-spacing:1.4px;
  color:var(--accent);
  margin-bottom:8px
}
.inspector-title h2{
  font-size:23px;
  margin-bottom:7px;
  line-height:1.1
}
.inspector-title p{
  font-size:9px;
  line-height:1.6;
  color:var(--muted)
}
.inspector-body{
  clear:both;
  padding:0 16px 14px
}
.yield-row{
  display:flex;
  gap:22px;
  font-size:11px;
  margin:4px 0 12px
}
.yield-row span{
  display:flex;
  align-items:center;
  gap:7px
}
.yield-row svg{
  width:14px;
  height:14px;
  color:#757568
}
.panel-label{
  display:flex;
  justify-content:space-between;
  margin:7px 0 4px;
  font-size:7px;
  letter-spacing:.5px;
  color:var(--muted)
}
.panel-label strong{
  font-weight:400;
  color:var(--ink)
}
.meter{
  height:3px;
  background:#dcd9ce
}
.meter>div{
  height:100%;
  background:var(--blue)
}
.gold-meter>div{
  background:var(--accent)
}
.info-note{
  font-size:10px;
  line-height:1.7;
  color:#6d7065;
  margin:4px 0 10px
}
.unit-row{
  display:flex;
  align-items:center;
  gap:9px;
  padding:8px 10px;
  background:transparent;
  border:1px solid #d6d0c2;
  margin-top:10px;
  width:100%;
  text-align:left;
  font-size:10px
}
.unit-row:hover{
  border-color:var(--accent);
  background:#fff
}
.unit-row svg{
  width:17px;
  height:17px;
  color:var(--accent)
}
.unit-row small{
  display:block;
  font-size:8px;
  margin-top:4px;
  color:var(--muted)
}
.unit-arrow{
  margin-left:auto
}
.unit-arrow svg{
  width:14px;
  height:14px
}
.research-mini{
  border:0;
  border-top:1px solid var(--line);
  background:transparent;
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  text-align:left;
  padding:10px 0 0;
  margin-top:11px
}
.research-mini svg{
  width:16px;
  height:16px;
  color:var(--blue)
}
.research-mini small{
  display:block;
  font-size:6px;
  letter-spacing:1px;
  color:var(--muted);
  margin-bottom:5px
}
.research-mini strong{
  font-size:10px;
  font-weight:400
}
.research-mini>span:last-child{
  margin-left:auto;
  font-size:9px;
  color:var(--blue)
}
.inspector-foot{
  padding:11px 16px 12px;
  border-top:1px solid var(--line)
}
.inspector-foot .eyebrow{
  display:none
}
.goal-line{
  display:flex;
  justify-content:space-between;
  font-size:9px;
  margin-bottom:7px;
  color:var(--muted)
}
.goal-line strong{
  font-weight:400;
  color:var(--accent)
}
.tile-actions{
  display:flex;
  gap:7px;
  margin:10px 0
}
.tile-actions .btn{
  flex:1;
  padding:8px 9px;
  font-size:9px
}
.move-grid{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  margin:9px 0 0
}
.move-grid button{
  background:#fffdf7;
  border:1px solid var(--line);
  padding:5px 7px;
  font-size:8px
}
.move-grid button:hover{
  border-color:var(--accent)
}
.target-label{
  display:block;
  color:var(--accent);
  font-size:7px;
  letter-spacing:1px;
  margin:11px 0 7px
}
select{
  color:var(--ink);
  background:#fffdf7;
  border:1px solid var(--line);
  padding:8px;
  font-size:10px;
  width:100%
}
.wide{
  width:100%
}
.command-dock{
  position:absolute;
  bottom:24px;
  left:370px;
  right:22px;
  height:156px;
  display:flex;
  gap:12px;
  align-items:end;
  z-index:4;
  pointer-events:none
}
.command-dock>*{
  pointer-events:auto
}
.deck-block{
  align-self:stretch;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:12px 10px;
  width:65px;
  flex-shrink:0;
  background:#faf8f2ed;
  box-shadow:var(--shadow)
}
.deck-block .eyebrow{
  font-size:6px;
  letter-spacing:.6px
}
.energy-count{
  font:23px Georgia;
  color:var(--accent);
  display:flex;
  gap:4px;
  align-items:center
}
.energy-count svg{
  width:13px;
  height:13px
}
.energy-count small{
  font:10px Arial;
  color:var(--muted)
}
.deck-block .tiny{
  font-size:7px
}
.deck-stats{
  font-size:7px;
  color:var(--muted);
  line-height:1.8
}
.deck-stats strong{
  color:var(--ink);
  font-weight:400
}
.hand{
  display:flex;
  gap:7px;
  align-items:stretch;
  flex:1;
  min-width:0;
  height:100%
}
.action-card{
  background:linear-gradient(115deg,#fffdf7,#f1eee5);
  box-shadow:var(--shadow);
  border:1px solid #fff9;
  border-bottom:2px solid #c3bcad;
  padding:12px 10px 9px;
  display:flex;
  flex-direction:column;
  flex:1;
  min-width:0;
  max-width:155px;
  text-align:left;
  position:relative
}
.action-card:hover:not(:disabled){
  transform:translateY(-12px);
  box-shadow:0 10px 25px #352a202e;
  border-color:var(--accent)
}
.action-card.chosen{
  transform:translateY(-12px);
  border-color:var(--accent);
  box-shadow:inset 0 -2px var(--accent),var(--shadow)
}
.action-card:disabled{
  opacity:.58;
  filter:saturate(.2)
}
.card-symbol{
  width:27px;
  height:27px;
  display:grid;
  place-items:center;
  color:#6c6c60;
  margin-bottom:10px
}
.card-symbol svg{
  width:24px;
  height:24px;
  stroke-width:1.1
}
.card-cost{
  position:absolute;
  top:12px;
  right:10px;
  font:16px Georgia;
  color:var(--accent)
}
.card-type{
  font-size:5px;
  letter-spacing:1px;
  color:#949084;
  margin-bottom:5px
}
.card-title{
  font:14px Georgia;
  line-height:1.1;
  margin-bottom:8px
}
.card-text{
  font-size:8px;
  line-height:1.5;
  color:#73756b;
  margin-top:auto
}
.end-turn-block{
  width:102px;
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  align-self:stretch;
  padding:12px 9px;
  background:#faf8f2f0;
  box-shadow:var(--shadow);
  justify-content:space-between
}
.turn-tip{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:4px;
  font-size:7px;
  color:var(--muted)
}
.turn-tip svg{
  width:11px;
  height:11px
}
.end-turn-block .btn{
  min-height:63px;
  padding:10px;
  display:flex;
  flex-direction:column;
  gap:8px;
  text-transform:uppercase;
  font:14px Georgia;
  letter-spacing:1px
}
.end-turn-block .btn svg{
  width:16px;
  height:16px
}
.end-turn-block p{
  display:none
}
.saved-label{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  color:#828276;
  font-size:6px
}
.saved-label svg{
  width:10px;
  height:10px
}
.storage-warning{
  color:var(--accent)
}
.target-banner{
  position:absolute;
  left:50%;
  bottom:197px;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:15px;
  padding:11px 14px;
  max-width:450px;
  background:#fffaf2f2;
  border-left:3px solid var(--accent);
  box-shadow:var(--shadow);
  z-index:3
}
.target-banner p{
  font-size:10px;
  line-height:1.7;
  color:#666b61
}
.target-banner strong{
  font-weight:500
}
.target-banner .icon-btn{
  width:24px;
  height:24px;
  flex-shrink:0
}
.target-banner svg{
  width:13px;
  height:13px
}
.empty-hand{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:1;
  font:italic 18px Georgia;
  background:#faf8f2dd;
  color:#82877a;
  padding:15px
}
/* Paper letters and research ledgers */
.modal-backdrop{
  position:fixed;
  inset:0;
  background:#37363175;
  z-index:20;
  backdrop-filter:blur(5px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:25px
}
.modal{
  background:var(--paper);
  border:1px solid #fff;
  box-shadow:0 15px 70px #28211845;
  padding:34px;
  width:min(790px,100%);
  max-height:90dvh;
  overflow:auto;
  position:relative;
  scrollbar-width:thin;
  scrollbar-color:#beb7a8 transparent
}
.close-modal{
  position:absolute;
  top:20px;
  right:20px
}
.modal h2{
  font-size:32px;
  margin:12px 30px 14px 0
}
.modal-intro{
  font-size:12px;
  color:#717569;
  line-height:1.9;
  max-width:640px
}
.tech-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-top:25px
}
.tech-card{
  text-align:left;
  background:#fffdf8;
  border:1px solid var(--line);
  padding:18px;
  min-height:180px;
  display:flex;
  flex-direction:column
}
.tech-card.active{
  border-color:var(--accent);
  box-shadow:inset 0 -2px var(--accent)
}
.tech-card.complete{
  opacity:.65
}
.tech-card svg{
  color:var(--blue);
  width:24px;
  height:24px
}
.tech-card h3{
  font-size:21px;
  margin:13px 0 10px
}
.tech-card p{
  font-size:10px;
  color:#7b7e72;
  line-height:1.7;
  flex:1
}
.tech-card small{
  font-size:8px;
  letter-spacing:.4px;
  color:var(--accent);
  margin-top:16px
}
.help-sections{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:27px;
  margin-top:28px
}
.help-sections h3{
  font-size:21px;
  margin-bottom:10px
}
.help-sections p{
  color:#74786c;
  font-size:12px;
  line-height:1.9
}
.help-sections strong{
  color:#41463f;
  font-weight:500
}
.help-sections kbd{
  font-size:10px;
  padding:1px 5px;
  border:1px solid var(--line)
}
.chronicle-list{
  margin-top:25px
}
.chronicle-entry{
  display:flex;
  gap:20px;
  border-top:1px solid var(--line);
  padding:14px 0
}
.chronicle-entry small{
  font-size:8px;
  color:var(--accent);
  min-width:41px;
  padding-top:4px
}
.chronicle-entry p{
  font-size:12px;
  line-height:1.8;
  color:#6e7467
}
.charter-review{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin-top:25px
}
.charter-review img{
  width:100%;
  aspect-ratio:1.5;
  object-fit:contain
}
.charter-review h3{
  font-size:21px;
  margin:15px 0 10px
}
.charter-review p{
  font-size:10px;
  line-height:1.9;
  color:#797c70
}
.modal-actions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  margin-top:25px
}
.victory{
  text-align:center;
  padding:15px
}
.victory>svg{
  width:56px;
  height:56px;
  color:var(--accent);
  margin:0 0 20px
}
.victory h2{
  font-size:39px;
  margin-right:0
}
.victory p{
  font-size:13px;
  color:#777d6f;
  line-height:1.9
}
.victory-stats{
  display:flex;
  justify-content:center;
  gap:34px;
  margin:27px 0
}
.victory-stats strong{
  display:block;
  font:28px Georgia;
  color:var(--accent);
  margin-bottom:8px
}
.victory-stats small{
  font-size:8px;
  letter-spacing:1px;
  color:var(--muted)
}
#toast{
  position:fixed;
  left:50%;
  bottom:202px;
  transform:translate(-50%,15px);
  opacity:0;
  pointer-events:none;
  background:#fffaf1f5;
  border-left:3px solid var(--accent);
  color:#596052;
  font-size:11px;
  line-height:1.7;
  padding:11px 18px;
  box-shadow:var(--shadow);
  z-index:50;
  max-width:85vw;
  transition:transform .2s,opacity .2s
}
#toast.visible{
  opacity:1;
  transform:translate(-50%,0)
}