@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700;9..144,900&family=Work+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root{
  --sea: #0E4D46;
  --sea-deep: #082F2B;
  --gold: #E9A63B;
  --gold-deep: #C6842A;
  --hibiscus: #C23B4B;
  --leaf: #4F8F4C;
  --parchment: #F2E6C9;
  --parchment-dark: #E4D3A4;
  --ink: #24201A;
  --ink-soft: #4A4234;
  --twine: #8A6A3E;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:'Work Sans',sans-serif;
  background: linear-gradient(180deg, var(--sea-deep) 0%, var(--sea) 55%, #0a3b36 100%);
  color:var(--ink);
  min-height:100vh;
  display:flex;
  justify-content:center;
  padding:20px 14px 60px;
}
h1,h2,h3{font-family:'Fraunces',serif; margin:0;}
.mono{font-family:'IBM Plex Mono',monospace;}

#app{width:100%; max-width:1040px;}

.card{
  background:var(--parchment);
  border-radius:6px;
  box-shadow:0 12px 30px rgba(0,0,0,.35), inset 0 0 0 1px rgba(0,0,0,.05);
  position:relative;
  overflow:hidden;
}
.card::before{
  content:"";
  position:absolute; inset:0;
  background-image: radial-gradient(rgba(0,0,0,.03) 1px, transparent 1px);
  background-size: 3px 3px;
  pointer-events:none;
}
.btn{
  font-family:'Work Sans',sans-serif;
  font-weight:600;
  font-size:15px;
  border:none;
  border-radius:4px;
  padding:12px 20px;
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease;
  box-shadow:0 3px 0 rgba(0,0,0,.25);
}
.btn:active{transform:translateY(2px); box-shadow:0 1px 0 rgba(0,0,0,.25);}
.btn-primary{background:var(--gold); color:var(--ink);}
.btn-primary:hover{background:var(--gold-deep);}
.btn-secondary{background:transparent; color:var(--parchment); border:1.5px solid var(--parchment); box-shadow:none;}
.btn-secondary:hover{background:rgba(255,255,255,.08);}
.btn-choice{
  display:block; width:100%; text-align:left;
  background:#fff; color:var(--ink); border:1.5px solid var(--parchment-dark);
  margin-bottom:10px; padding:14px 16px; box-shadow:none; border-radius:4px;
}
.btn-choice:hover{border-color:var(--gold-deep); background:#fffaf0;}
.btn:disabled{opacity:.4; cursor:not-allowed;}

.hero{text-align:center; color:var(--parchment); padding: 30px 10px 10px;}
.hero .eyebrow{font-family:'IBM Plex Mono',monospace; letter-spacing:.14em; text-transform:uppercase; font-size:12px; color:var(--gold); margin-bottom:10px;}
.hero h1{font-size:clamp(34px,6vw,58px); font-weight:900; line-height:1.05; color:#fff;}
.hero h1 span{color:var(--gold);}
.hero p{max-width:560px; margin:16px auto 26px; opacity:.85; line-height:1.5;}
.skyline{width:100%; max-width:640px; margin:0 auto 10px; display:block;}

.regions{display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:20px;}
@media (max-width:640px){.regions{grid-template-columns:1fr;}}
.region-card{background:var(--parchment); border-radius:6px; padding:18px; cursor:pointer; border:2.5px solid transparent; text-align:left; box-shadow:0 6px 18px rgba(0,0,0,.3); transition:border-color .15s ease, transform .15s ease;}
.region-card:hover{transform:translateY(-2px);}
.region-card.selected{border-color:var(--gold);}
.region-card h3{font-size:19px; margin-bottom:4px;}
.region-card .tag{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--twine); text-transform:uppercase; letter-spacing:.06em;}
.region-card p{font-size:13.5px; line-height:1.45; margin:8px 0 10px; color:var(--ink-soft);}
.stat-row{display:flex; gap:10px; flex-wrap:wrap; font-size:12px;}
.stat-pill{background:rgba(0,0,0,.06); border-radius:20px; padding:3px 9px; font-family:'IBM Plex Mono',monospace;}
.name-input-wrap{margin:22px auto 0; max-width:420px; text-align:center;}
.name-input-wrap input{width:100%; padding:12px 14px; border-radius:4px; border:1.5px solid var(--parchment-dark); font-family:'Fraunces',serif; font-size:18px; text-align:center; background:#fffdf7;}

.game-layout{display:grid; grid-template-columns: 1fr 300px; gap:16px;}
@media (max-width:820px){.game-layout{grid-template-columns:1fr;}}

.ribbon{background:var(--sea-deep); border-radius:6px; padding:12px 16px; margin-bottom:14px; display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between; box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);}
.ribbon .chapter-label{color:var(--gold); font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.06em; text-transform:uppercase;}
.ribbon .year-big{color:#fff; font-family:'Fraunces',serif; font-weight:700; font-size:22px;}
.resources{display:flex; flex-wrap:wrap; gap:10px;}
.res{display:flex; align-items:center; gap:6px; background:rgba(255,255,255,.06); border-radius:20px; padding:5px 11px; color:var(--parchment); font-family:'IBM Plex Mono',monospace; font-size:12.5px;}
.res .dot{width:9px; height:9px; border-radius:50%;}

/* village square */
.village-square{position:relative; min-height:150px; border-radius:8px; overflow:hidden; margin-bottom:14px; padding:18px 16px 14px; background:linear-gradient(180deg, #BEE7E0 0%, #EAD9A0 45%, #7C5A34 45%, #5E4425 100%); box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);}
.village-square.storm{background:linear-gradient(180deg,#41545c 0%, #29424a 45%, #3b2c1c 45%, #2a1f14 100%);}
.village-square.storm::after{content:""; position:absolute; inset:0; background-image:repeating-linear-gradient(115deg, rgba(255,255,255,.22) 0 2px, transparent 2px 14px); animation:rainMove .5s linear infinite; pointer-events:none;}
@keyframes rainMove{ from{background-position:0 0;} to{background-position:-40px 40px;} }
.vs-buildings{font-size:26px; letter-spacing:5px; margin-bottom:10px; text-shadow:0 2px 3px rgba(0,0,0,.2);}
.vs-people{font-size:22px; display:flex; flex-wrap:wrap; gap:7px;}
.villager-icon{display:inline-block; animation:bob 2.6s ease-in-out infinite; cursor:default;}
.villager-icon:nth-child(2n){animation-delay:.5s;}
.villager-icon:nth-child(3n){animation-delay:1s;}
.villager-icon:nth-child(5n){animation-delay:1.5s;}
@keyframes bob{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-3px);} }

.advance-row{display:flex; gap:10px; justify-content:flex-end; margin:0 0 14px;}

.panel{background:var(--parchment); border-radius:6px; padding:20px;}
.panel h2{font-size:20px; margin-bottom:6px;}
.panel .sub{color:var(--ink-soft); font-size:13.5px; margin-bottom:16px;}

.alloc-row{display:flex; align-items:center; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--parchment-dark);}
.alloc-row:last-child{border-bottom:none;}
.alloc-label{display:flex; align-items:center; gap:8px; font-weight:600; font-size:14px;}
.alloc-label .swatch{width:11px; height:11px; border-radius:3px; display:inline-block;}
.stepper{display:flex; align-items:center; gap:10px;}
.stepper button{width:28px; height:28px; border-radius:50%; border:1.5px solid var(--ink); background:#fff; font-size:16px; cursor:pointer; line-height:1; font-family:'IBM Plex Mono',monospace;}
.stepper button:disabled{opacity:.3; cursor:not-allowed;}
.stepper .val{width:26px; text-align:center; font-family:'IBM Plex Mono',monospace; font-weight:600;}
.remaining{margin-top:14px; padding:9px 12px; border-radius:4px; background:rgba(0,0,0,.05); font-family:'IBM Plex Mono',monospace; font-size:12.5px; text-align:center;}
.remaining.warn{background:rgba(194,59,75,.15); color:var(--hibiscus);}

.ledger{background:var(--parchment); border-radius:6px; padding:16px; display:flex; flex-direction:column; height:100%;}
.ledger h3{font-size:13px; text-transform:uppercase; letter-spacing:.08em; font-family:'IBM Plex Mono',monospace; color:var(--twine); margin-bottom:8px;}
.roster{margin-bottom:6px;}
.roster-item{display:flex; justify-content:space-between; gap:6px; font-size:12.5px; padding:4px 0; border-bottom:1px dashed var(--parchment-dark);}
.roster-item .who{font-weight:600;}
.memoriam{font-size:11px; color:var(--ink-soft); font-style:italic; margin:6px 0 0;}
.timeline{position:relative; padding-left:16px; margin-bottom:8px; max-height:150px; overflow-y:auto;}
.timeline::before{content:""; position:absolute; left:5px; top:2px; bottom:2px; width:2px; background:var(--twine);}
.pin{position:relative; padding:5px 0 5px 14px; font-size:11.5px; color:var(--ink-soft);}
.pin::before{content:""; position:absolute; left:-4px; top:9px; width:9px; height:9px; border-radius:50%; background:var(--parchment-dark); border:1.5px solid var(--twine);}
.pin.done::before{background:var(--leaf); border-color:var(--leaf);}
.pin.current::before{background:var(--gold); border-color:var(--gold-deep);}
.pin.current{color:var(--ink); font-weight:700;}
.log{flex:1; overflow-y:auto; max-height:230px; font-size:12.5px; line-height:1.5; border-top:1px dashed var(--parchment-dark); padding-top:10px;}
.log-entry{margin-bottom:10px; padding-bottom:8px; border-bottom:1px dashed var(--parchment-dark);}
.log-entry .yr{font-family:'IBM Plex Mono',monospace; color:var(--twine); font-weight:600;}

.overlay{position:fixed; inset:0; background:rgba(8,20,18,.72); display:flex; align-items:center; justify-content:center; padding:20px; z-index:50;}
.event-card{max-width:560px; width:100%; padding:26px 28px; max-height:88vh; overflow-y:auto;}
.event-tag{font-family:'IBM Plex Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--hibiscus); margin-bottom:8px;}
.event-card h2{font-size:24px; margin-bottom:4px;}
.event-card .years{font-family:'IBM Plex Mono',monospace; font-size:12.5px; color:var(--twine); margin-bottom:14px;}
.event-card p.narrative{font-size:15px; line-height:1.6; margin-bottom:18px; color:var(--ink);}
.math-box{background:#fffaf0; border:1.5px dashed var(--gold-deep); border-radius:6px; padding:14px; margin-top:6px;}
.math-box label{display:block; font-size:13.5px; margin-bottom:8px; line-height:1.5;}
.math-box input{padding:8px 10px; border-radius:4px; border:1.5px solid var(--parchment-dark); font-family:'IBM Plex Mono',monospace; width:120px; font-size:15px;}
.feedback{margin-top:12px; padding:10px 12px; border-radius:4px; font-size:14px; line-height:1.5;}
.feedback.correct{background:rgba(79,143,76,.15); color:#2f5c2d;}
.feedback.incorrect{background:rgba(194,59,75,.13); color:#8f2c37;}
.delta-list{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px;}
.delta{font-family:'IBM Plex Mono',monospace; font-size:12px; background:rgba(0,0,0,.06); border-radius:20px; padding:3px 10px;}
.delta.pos{color:#2f5c2d;} .delta.neg{color:#8f2c37;}

.end-card{padding:30px; text-align:center;}
.result-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin:22px 0; text-align:left;}
@media (max-width:520px){.result-grid{grid-template-columns:1fr;}}
.result-item{background:#fff; border-radius:5px; padding:12px 14px; font-size:13.5px; display:flex; justify-content:space-between; align-items:center; border:1.5px solid var(--parchment-dark);}
.result-item.pass{border-color:var(--leaf);}
.result-item.fail{border-color:var(--hibiscus);}
.badge{font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:700; padding:2px 8px; border-radius:20px;}
.badge.pass{background:rgba(79,143,76,.18); color:#2f5c2d;}
.badge.fail{background:rgba(194,59,75,.15); color:#8f2c37;}
.end-lists{display:grid; grid-template-columns:1fr 1fr; gap:16px; text-align:left; margin-top:20px;}
@media (max-width:560px){.end-lists{grid-template-columns:1fr;}}
.end-lists .box{background:#fff; border:1.5px solid var(--parchment-dark); border-radius:6px; padding:14px;}
.end-lists h4{font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:var(--twine); margin-bottom:8px; font-family:'IBM Plex Mono',monospace;}
.end-lists .row{font-size:12.5px; padding:3px 0;}

.handbook-btn{position:fixed; top:16px; left:16px; z-index:20; background:var(--gold); color:var(--ink); border:none; border-radius:24px; padding:9px 16px; font-weight:700; cursor:pointer; box-shadow:0 4px 10px rgba(0,0,0,.35); font-size:13px;}
.handbook-btn:hover{background:var(--gold-deep);}
.handbook-tabs{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px;}
.hb-tab{background:#fff; border:1.5px solid var(--parchment-dark); border-radius:20px; padding:5px 12px; font-size:12px; cursor:pointer; font-family:'IBM Plex Mono',monospace;}
.hb-tab.active{background:var(--gold); border-color:var(--gold-deep);}
.hb-entry{margin-bottom:12px; font-size:13.5px; line-height:1.5;}
.hb-entry strong{color:var(--twine);}
.why-link{cursor:pointer; color:var(--hibiscus); font-family:'IBM Plex Mono',monospace; font-size:11px; text-decoration:underline; margin-left:6px;}
.crop-select{width:100%; padding:8px 10px; border-radius:4px; border:1.5px solid var(--parchment-dark); font-family:'Work Sans',sans-serif; font-size:13.5px; margin-bottom:6px;}
.crop-compat{font-size:11.5px; font-family:'IBM Plex Mono',monospace;}
.crop-compat.good{color:#2f5c2d;} .crop-compat.fair{color:var(--twine);} .crop-compat.poor{color:var(--hibiscus);}
.trade-panel{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:10px;}
@media (max-width:640px){.trade-panel{grid-template-columns:1fr;}}
.trade-card{background:#fff; border:1.5px solid var(--parchment-dark); border-radius:5px; padding:10px 12px; font-size:12.5px;}
.trade-card button{margin-top:8px; padding:6px 12px; font-size:12px;}