/* River Garden, round 3. Parchment skin from fleet-r2-ui/codex on a strict 1280x720 stage. */
:root { --ink: #50301e; --cream: #fff0cb; --green: #8dc65b; --line: 4px solid var(--ink); }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body {
  background: #344e45; background-image: repeating-linear-gradient(45deg, transparent 0 22px, #ffffff06 22px 25px);
  font-family: ui-rounded, 'SF Pro Rounded', 'Arial Rounded MT Bold', 'Trebuchet MS', Arial, sans-serif; color: var(--ink); font-weight: 800;
}
#stage {
  position: absolute; width: 1280px; height: 720px; transform-origin: top left; overflow: hidden;
  background: #e4cb94; border: 4px solid #50301e; background-image: radial-gradient(#bb96552b 2px, transparent 2px); background-size: 20px 20px;
}
img { display: block; object-fit: contain; user-select: none; }
.svgic { display: inline-block; flex-shrink: 0; }
.svgic svg { width: 100%; height: 100%; display: block; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: 32px; letter-spacing: -.8px; }
h2 { font-size: 21px; }
h3 { font-size: 17px; }
p { font-size: 14px; line-height: 1.35; }
small { font-size: 12px; }
b { font-weight: 900; }
.eyebrow { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 4px; }
.split { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.grow { flex: 1; min-width: 0; }
.panel { border: var(--line); border-radius: 23px; background: var(--cream); box-shadow: 0 5px 0 #9b683b, inset 0 4px 0 #fff8e8; overflow: hidden; }
.pill { display: inline-block; border: 2px solid var(--ink); border-radius: 20px; background: #b4d879; padding: 4px 11px; font-size: 12px; white-space: nowrap; }
.pill.warn, .pill.off { background: #f5b774; }
.tag { display: inline-block; border: 2px solid #587c36; border-radius: 10px; background: #cfe9a0; padding: 3px 8px; font-size: 11px; white-space: nowrap; }
.tag.gray { border-color: #8a6d4c; background: #e8d6b0; }
.rule { background: #e9d4a7; border-radius: 13px; padding: 10px 12px; font-size: 13px; line-height: 1.35; }

/* ---------- bars ---------- */
.bar { height: 14px; border: 3px solid var(--ink); background: #c9ae7b; border-radius: 12px; overflow: hidden; box-shadow: inset 0 2px #80593644; }
.bar i { display: block; height: 100%; width: 0; background: #91c956; box-shadow: inset 0 3px #e3f99a; transition: width .1s linear; }
.bar.orange i { background: #f2a33f; box-shadow: inset 0 3px #ffd79a; }
.bar.blue i { background: #5aa7e8; box-shadow: inset 0 3px #bfe2ff; }
.bar.red i { background: #ef845a; box-shadow: inset 0 3px #ffc78a; }
.bar.gold i { background: #f5c63c; box-shadow: inset 0 3px #fff0a0; }

/* ---------- buttons ---------- */
button { font: inherit; color: var(--ink); cursor: pointer; }
button:disabled { cursor: default; opacity: .5; filter: saturate(.4); }
button:focus-visible { outline: 4px solid #fff; outline-offset: 2px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px; flex-wrap: wrap;
  border: 3px solid var(--ink); border-radius: 12px; background: #a8d36e; padding: 6px 11px; font-size: 13px; line-height: 1.15;
  box-shadow: 0 3px #6d793d, inset 0 3px #e2efa8;
}
.btn:not(:disabled):active { transform: translateY(2px); box-shadow: 0 1px #6d793d; }
.btn img, .btn .svgic { width: 22px; height: 22px; }
.btn.small { padding: 4px 9px; font-size: 12px; }
.btn.blue { background: #8ec5f0; box-shadow: 0 3px #3f76a8, inset 0 3px #d5ecff; }
.btn.wood { background: #e6bc7c; box-shadow: 0 3px #80512f, inset 0 3px #fff4c580; }
.btn.gold { background: #f5cf5a; box-shadow: 0 3px #a47a1f, inset 0 3px #fff2b0; }
.btn.red { background: #f29a7c; box-shadow: 0 3px #9c4a2f, inset 0 3px #ffd2c0; }
.mini {
  min-width: 26px; height: 26px; border: 3px solid var(--ink); border-radius: 9px; background: #a8d36e; font-size: 16px; line-height: 1; padding: 0 5px;
  box-shadow: 0 2px #6d793d, inset 0 2px #e2efa8;
}
.mini.red { background: #f29a7c; box-shadow: 0 2px #9c4a2f, inset 0 2px #ffd2c0; }
.mini.wide { font-size: 12px; padding: 0 8px; }
.mini.on { background: #f5cf5a; }
.cta {
  display: block; width: 100%; border: var(--line); border-radius: 14px; background: #a8d36e; padding: 10px 16px; font-size: 18px;
  box-shadow: 0 4px #6d793d, inset 0 4px #e2efa8;
}
.cta.small { width: auto; font-size: 14px; padding: 7px 12px; margin-top: 8px; position: relative; z-index: 1; }
.chip { display: inline-flex; align-items: center; gap: 3px; background: #ead6a6; border: 2px solid #a57846; border-radius: 9px; padding: 1px 6px 1px 2px; font-size: 13px; white-space: nowrap; }
.chip img, .chip .svgic { width: 22px; height: 22px; }
.chip.short { background: #f7c3a8; border-color: #b8563a; color: #8a2d15; }
.btn .chip { background: #fff3d2aa; font-size: 12px; }

/* ---------- header ---------- */
header { height: 88px; background: #fff0ce; border-bottom: var(--line); display: flex; align-items: center; padding: 0 16px 0 20px; gap: 14px; box-shadow: 0 5px #9b683526; }
.brand { width: 188px; flex-shrink: 0; white-space: nowrap; }
.brand span { font-size: 24px; letter-spacing: -1.4px; color: #416a36; text-shadow: 0 2px #fff; display: block; line-height: 1; }
.brand small { font-size: 8px; letter-spacing: .9px; display: block; margin-top: 5px; }
#resources { flex: 1; display: grid; grid-template-rows: repeat(2, 34px); grid-auto-flow: column; grid-auto-columns: max-content; gap: 5px 6px; align-content: center; }
.resource {
  display: flex; align-items: center; gap: 4px; background: #ead6a6; border: 3px solid #89613b; border-radius: 12px;
  padding: 0 8px 0 2px; box-shadow: inset 0 2px #fff8df; font-size: 16px; height: 34px; min-width: 108px;
}
.resource img, .resource .svgic { width: 27px; height: 27px; }
.resource b { font-variant-numeric: tabular-nums; min-width: 26px; }
.resource small { font-size: 10.5px; opacity: .8; }
.resource.flash { animation: flash .5s; }
@keyframes flash { 30% { background: #fff7b0; transform: scale(1.06); } }
.where { width: 150px; text-align: right; flex-shrink: 0; }
.where b { font-size: 16px; display: block; }
.where small { font-size: 10.5px; display: block; margin-top: 3px; }
.menu-btn { border: 3px solid var(--ink); border-radius: 12px; background: #e6bc7c; box-shadow: 0 3px #80512f, inset 0 3px #fff4c580; padding: 8px 10px; font-size: 14px; flex-shrink: 0; }

/* ---------- nav + footer ---------- */
section { display: none; position: absolute; inset: 106px 20px 101px; }
section.active { display: block; }
nav { position: absolute; bottom: 23px; left: 195px; right: 195px; display: flex; gap: 11px; height: 65px; }
nav button {
  flex: 1; position: relative; border: var(--line); border-radius: 17px; background: #e6bc7c; box-shadow: 0 5px #80512f, inset 0 5px #fff4c580;
  display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 19px; transition: background .12s;
}
nav button img { height: 43px; width: 43px; }
nav button.active { background: #a6d16b; transform: translateY(-4px); box-shadow: 0 9px #587c36, inset 0 5px #eaf7aa; }
nav button:disabled { opacity: .45; }
.dot { position: absolute; top: -7px; right: -5px; width: 18px; height: 18px; border-radius: 50%; background: #ff6a4a; border: 3px solid var(--ink); }
.footer-note { position: absolute; left: 0; right: 0; bottom: 4px; text-align: center; font-size: 11.5px; letter-spacing: .5px; }
.footer-note.flash { font-weight: 800; color: #7a3d12; animation: footpulse .5s ease-out; }
@keyframes footpulse { from { transform: translateY(4px); opacity: .3; } to { transform: none; opacity: 1; } }

/* ---------- page heading ---------- */
.page-heading { display: flex; justify-content: space-between; align-items: center; height: 48px; padding: 0 6px 6px; }
.page-heading h1 { font-size: 26px; }
.page-heading p { font-size: 13px; margin-top: 1px; }

/* ---------- camp ---------- */
.scene { position: absolute; left: 0; top: 0; width: 845px; height: 100%; }
.scene-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scene:after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 55px #49341a3b; pointer-events: none; }
.scene-title { position: absolute; top: 14px; left: 14px; width: 430px; padding: 9px 16px 11px; background: #fff1d4ef; border: 3px solid var(--ink); border-radius: 17px; z-index: 3; }
.scene-title p { font-size: 15px; }
.peek { position: absolute; z-index: 3; border: 0; background: none; padding: 0; display: flex; flex-direction: column; align-items: center; }
.peek img { width: 112px; height: 112px; filter: drop-shadow(0 5px 1px #30251566); animation: bob 2.4s ease-in-out infinite; }
.peek span { background: #fff0cf; border: 3px solid var(--ink); border-radius: 10px; padding: 3px 9px; font-size: 12px; margin-top: -6px; }
.peek.king { right: 20px; top: 16px; }
.peek.bear { right: 16px; top: 12px; }
.peek.bear img { animation-duration: 4s; }
.peek .zz { position: absolute; top: -2px; left: -4px; font-style: normal; color: #fff; font-size: 17px; text-shadow: 0 2px var(--ink), 2px 0 var(--ink), -2px 0 var(--ink), 0 -2px var(--ink); animation: zz 2.4s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-6px); } }
@keyframes zz { 0% { opacity: 0; transform: translate(0, 6px); } 40% { opacity: 1; } 100% { opacity: 0; transform: translate(-8px, -18px); } }
.loose { position: absolute; left: 300px; top: 120px; z-index: 3; display: flex; align-items: center; gap: 4px; background: #ffe39a; border: 3px solid var(--ink); border-radius: 14px; padding: 2px 9px 2px 3px; font-size: 14px; animation: bob 1.6s ease-in-out infinite; }
.loose img { width: 34px; height: 34px; }
.nap-veil { position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 2; background: linear-gradient(#1c2a55a8, #1c2a5540); display: flex; align-items: flex-start; justify-content: center; gap: 12px; padding-top: 118px; color: #fff4d8; text-align: left; }
.nap-veil img { width: 96px; height: 96px; animation: bob 3s ease-in-out infinite; }
.nap-veil b { font-size: 24px; display: block; text-shadow: 0 2px var(--ink); }
.nap-veil small { font-size: 14px; display: block; margin-top: 4px; max-width: 300px; }
.jobs { position: absolute; bottom: 12px; left: 12px; right: 12px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; z-index: 4; }
.job { position: relative; padding: 7px 9px 8px; background: #fff1d5f5; border: 3px solid var(--ink); border-radius: 16px; box-shadow: 0 4px #57361d80; }
.job.empty { background: #efe0c0f2; }
.job-top { display: flex; align-items: center; gap: 6px; }
.who { width: 42px; height: 50px; flex-shrink: 0; }
.who img { width: 42px; height: 50px; }
.who .nap { display: none; }
.napping .who .nap { display: block; }
.napping .who .work { display: none; }
.job:not(.empty) .who .work { animation: work 1.1s ease-in-out infinite; transform-origin: 50% 90%; }
.napping .job .who .work { animation: none; }
@keyframes work { 50% { transform: rotate(-6deg) translateY(-2px); } }
.jname { min-width: 0; }
.jname b { font-size: 15px; display: block; line-height: 1.1; }
.jname small { font-size: 11.5px; display: block; }
.timer { display: flex; justify-content: space-between; font-size: 11px; margin: 4px 0 2px; gap: 4px; }
.job .bar { height: 12px; }
.job-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 5px; gap: 4px; }
.yield { white-space: nowrap; display: flex; align-items: center; gap: 3px; font-size: 11.5px; }
.yield img { width: 22px; height: 22px; }
.ctl { display: flex; align-items: center; gap: 5px; }
.ctl b { min-width: 16px; text-align: center; font-size: 16px; }
.jobs.two .job { padding: 5px 8px 6px; }
.jobs.two .who, .jobs.two .who img { width: 36px; height: 42px; }
.lockv { position: absolute; inset: 0; border-radius: 13px; background: #efe0c0f5; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 6px; z-index: 1; }
.lockv .svgic { width: 34px; height: 34px; }
.lockv b { font-size: 13px; display: block; }
.lockv small { font-size: 11px; display: block; }
.fx { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.float {
  position: absolute; display: flex; align-items: center; gap: 3px; font-size: 22px; color: #fff; white-space: nowrap;
  text-shadow: 0 3px var(--ink), 2px 0 var(--ink), -2px 0 var(--ink), 0 -2px var(--ink), 2px 2px var(--ink), -2px 2px var(--ink);
  animation: floatUp 1.3s ease-out forwards;
}
.float img { width: 32px; height: 32px; filter: drop-shadow(0 2px 0 var(--ink)); }
.float.bad { color: #ffb3a3; }
@keyframes floatUp { 0% { transform: translateY(0) scale(.6); opacity: 0; } 15% { transform: translateY(-8px) scale(1); opacity: 1; } 75% { opacity: 1; } 100% { transform: translateY(-58px); opacity: 0; } }
.raider { position: absolute; left: 0; top: 0; z-index: 6; pointer-events: none; animation: raid 4.2s linear forwards; }
.raider img { width: 120px; height: 120px; filter: drop-shadow(0 6px 1px #30251566); }
.raider .gift { position: absolute; left: 70px; top: -14px; background: #ffe39a; border: 3px solid var(--ink); border-radius: 10px; padding: 2px 8px; font-size: 14px; opacity: 0; animation: gift 4.2s linear forwards; }
@keyframes raid { 0% { transform: translate(720px, 30px); } 40% { transform: translate(300px, 150px); } 60% { transform: translate(300px, 150px); } 100% { transform: translate(760px, 10px); } }
@keyframes gift { 0%, 42% { opacity: 0; } 46%, 60% { opacity: 1; } 64%, 100% { opacity: 0; } }

.camp-side { position: absolute; right: 0; width: 369px; top: 0; bottom: 0; display: flex; flex-direction: column; gap: 13px; }
.kitchen { padding: 13px 15px; flex-shrink: 0; display: flex; flex-direction: column; gap: 8px; }
.kitchen h2 { font-size: 20px; }
.meter-row { display: flex; gap: 9px; align-items: center; }
.meter-row > img { width: 54px; height: 54px; flex-shrink: 0; }
.meter-row .bar { margin: 3px 0; }
.meter-row small { display: block; font-size: 11.5px; line-height: 1.25; }
.meter-row small.alert { color: #b3401e; }
.btn-row { display: flex; gap: 6px; flex-wrap: wrap; }
.kitchen .btn { flex: 1 1 auto; font-size: 12px; padding: 4px 7px; }
.meals { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; font-size: 13px; }
.meals small { margin-left: auto; }
.raid { flex: 1; min-height: 0; background: #f5b774; padding: 13px 15px; position: relative; }
.raid.soon { background: #f59a6c; animation: pulse 1s ease-in-out infinite; }
.raid.calm { background: #d7e8a6; }
@keyframes pulse { 50% { box-shadow: 0 5px 0 #9b683b, inset 0 4px 0 #fff8e8, 0 0 0 6px #ffdf7c; } }
.raid-art { position: absolute; width: 104px; height: 108px; right: 4px; bottom: 2px; }
.raid h2 { font-size: 19px; margin-top: 4px; }
.raid strong { font-size: 27px; display: block; margin: 0 0 4px; font-variant-numeric: tabular-nums; }
.raid .bar { width: 220px; }
.raid p { max-width: 228px; font-size: 12px; margin-top: 3px; }

/* ---------- craft ---------- */
.workshop { display: grid; grid-template-columns: 290px 575px 1fr; gap: 13px; height: 100%; }
.col1, .col3 { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.station { padding: 10px 13px 12px; display: flex; flex-direction: column; gap: 7px; }
.col1 .station, .col3 .station.kitchen { flex-shrink: 0; }
.col1 .note-card { flex: 1; }
.st-head { display: flex; align-items: center; gap: 9px; }
.st-head img { width: 44px; height: 44px; flex-shrink: 0; }
.st-head h2 { font-size: 18px; line-height: 1.1; }
.st-head small { font-size: 11.5px; display: block; }
.queue { background: #f3e2b9; border-radius: 11px; padding: 5px 8px 6px; }
.queue small { font-size: 11.5px; }
.queue .bar { height: 11px; margin-top: 3px; }
.queue .mini { height: 22px; }
.rlist { display: flex; flex-direction: column; gap: 5px; }
.rrow { display: flex; align-items: center; gap: 8px; border-top: 2px solid #e2c894; padding-top: 5px; }
.rrow:first-child { border-top: 0; padding-top: 0; }
.r-art { width: 40px; height: 40px; flex-shrink: 0; }
.rinfo { flex: 1; min-width: 0; }
.rinfo b { font-size: 14px; display: block; line-height: 1.15; }
.rinfo small { font-size: 11px; display: block; }
.rrow .cost { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; margin-top: 2px; }
.rrow .cost small { display: inline; }
.rrow .chip { font-size: 12px; }
.rrow .chip img, .rrow .chip .svgic { width: 18px; height: 18px; }
.rbtns { display: flex; gap: 4px; flex-shrink: 0; }
.rrow.locked { opacity: .6; }
.rrow.locked .svgic, .why .svgic { width: 26px; height: 26px; }
.note-card { padding: 12px 14px; display: flex; gap: 10px; align-items: flex-start; background: #f8e2ae; }
.note-art { width: 40px; height: 40px; }
.note-card b { font-size: 15px; display: block; }
.note-card small { font-size: 12px; display: block; margin-top: 3px; line-height: 1.35; }
.gear-grid { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 8px; flex: 1; min-height: 0; }
.gear-card { position: relative; display: flex; gap: 8px; align-items: flex-start; background: #fff7e0; border: 3px solid var(--ink); border-radius: 14px; padding: 7px 9px; box-shadow: 0 3px #b98c55; }
.gear-card.ok { background: #fbeebf; box-shadow: 0 3px #b98c55, 0 0 0 3px #a8d36e; }
.gear-card.queued { background: #fce09c; }
.gear-card.locked, .gear-card.needs { background: #eadcbd; }
.gear-card.locked .g-art, .gear-card.needs .g-art { filter: grayscale(.7) brightness(.8); opacity: .7; }
.gear-card.owned { background: #e2f1bf; }
.gear-card.note { background: #f3e2b9; flex-direction: column; gap: 3px; box-shadow: none; border-style: dashed; }
.gear-card.note b { font-size: 14px; }
.gear-card.note small { font-size: 11.5px; line-height: 1.35; }
.g-art { width: 52px; height: 58px; flex-shrink: 0; }
.g-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.g-body > b { font-size: 14.5px; line-height: 1.1; }
.g-body > small { font-size: 10.5px; }
.track { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.track small { font-size: 10.5px; margin-left: 2px; }
.tier-chip { font-size: 9.5px; letter-spacing: .5px; text-transform: uppercase; border: 2px solid #a57846; border-radius: 7px; padding: 0 5px; background: #ead6a6; }
.tier-chip.have { background: #b4d879; border-color: #587c36; }
.gear-card .cost { display: flex; gap: 3px; flex-wrap: wrap; }
.gear-card .chip { font-size: 10.5px; padding: 0 4px 0 1px; gap: 2px; }
.gear-card .chip img, .gear-card .chip .svgic { width: 16px; height: 16px; }
.g-foot { display: flex; align-items: center; gap: 6px; }
.g-foot .bar { flex: 1; height: 11px; }
.why { display: flex; align-items: center; gap: 4px; font-size: 11px; }
.upgrades .st-head h2 { font-size: 17px; }

/* ---------- pack ---------- */
.prep { display: grid; grid-template-columns: 330px 1fr 360px; gap: 14px; height: 457px; }
.prep .panel { padding: 14px 16px; }
.boss-preview { text-align: center; background: #f8d590; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.boss-art { width: 210px; height: 212px; }
.boss-preview p { font-size: 13px; }
.stats-line { font-size: 13px; }
.boss-pick { display: flex; gap: 8px; margin-top: 4px; }
.boss-pick button { display: flex; align-items: center; gap: 4px; border: 3px solid var(--ink); border-radius: 12px; background: #fff0cf; padding: 2px 10px 2px 3px; font-size: 13px; }
.boss-pick button.on { background: #a8d36e; }
.boss-pick img { width: 30px; height: 30px; }
.provisions { display: flex; flex-direction: column; gap: 7px; }
.food-row { display: flex; align-items: center; gap: 9px; border: 3px solid var(--ink); background: #f4e7c4; border-radius: 14px; padding: 4px 9px; }
.food-row .r-art { width: 44px; height: 44px; }
.food-row .rinfo b { font-size: 16px; }
.food-row .rinfo small { font-size: 12px; }
.qty { min-width: 26px; text-align: center; font-size: 20px; }
.provisions .rlist { gap: 6px; }
.provisions .btn-row .btn { flex: 1; }
.buff-head { margin-top: 3px; }
.buff-head h2 { font-size: 18px; }
.buff { display: flex; align-items: center; gap: 10px; }
.buff > img { width: 58px; height: 58px; }
.buff p { font-size: 12px; }
.loadout { display: flex; flex-direction: column; gap: 5px; }
.gear-pics { display: flex; gap: 12px; }
.gear-pic { display: flex; flex-direction: column; align-items: center; width: 110px; }
.gear-pic img { width: 66px; height: 66px; }
.gear-pic.none img { filter: grayscale(1) brightness(1.2); opacity: .3; }
.gear-pic small { font-size: 11px; }
.loadout p.split { font-size: 14px; border-bottom: 2px solid #e2c894; padding-bottom: 2px; }
.loadout .rule { font-size: 12px; padding: 8px 10px; }
.scout { background: #f7d9a9; border-radius: 12px; padding: 7px 10px; font-size: 12px; line-height: 1.35; }
.scout.good { background: #d4ecab; }
.loadout .cta { margin-top: auto; }

/* ---------- fight ---------- */
.arena { height: 100%; position: relative; }
.arena-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 54%; }
/* King: the camp he raids, at dusk, pushed back (dim + soft + warm vignette) so the fighters own the frame */
.arena.raccoon .arena-art { filter: brightness(.6) saturate(.75) blur(1.5px); }
.arena:before { content: ''; position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse 70% 62% at 50% 52%, #ff9a4a1f, #2a120a 118%), linear-gradient(#3a1c0a40, #1c0e0670); }
/* Bear: a drawn clearing in Bramble Woods (WOODS_ARENA in game.js) */
.arena.bear:before { background: none; }
.arena > *:not(.arena-art) { z-index: 2; }
.combat-top { position: absolute; top: 16px; left: 18px; right: 18px; display: flex; justify-content: space-between; align-items: flex-start; }
.health { width: 360px; padding: 10px 15px; background: #fff0d5f5; border: 3px solid var(--ink); border-radius: 17px; }
.health h2 { font-size: 20px; }
.health .bar { height: 20px; margin-top: 7px; }
.health.enemy .bar i { background: #ef845a; box-shadow: inset 0 4px #ffc78a; }
.versus { color: #fff4cc; font-size: 22px; text-align: center; text-shadow: 2px 3px #50301e; margin-top: 3px; }
.versus small { display: block; background: #50301e; border-radius: 20px; padding: 6px 12px; font-size: 12px; margin-top: 6px; text-shadow: none; }
.hero-fig { position: absolute; left: 143px; top: 104px; width: 300px; height: 282px; transform-origin: 40% 90%; }
.hero-fig.idle, .boss-large.idle { animation: bob 2.2s ease-in-out infinite; }
.fighter { position: absolute; left: 0; top: 0; width: 245px; height: 282px; filter: drop-shadow(0 8px 2px #30251555); }
.fighter-armor { position: absolute; left: 61px; top: 128px; width: 100px; height: 99px; }
.fighter-sword { position: absolute; left: 168px; top: 81px; width: 140px; height: 168px; transform: rotate(12deg); }
.boss-large { position: absolute; right: 128px; top: 96px; width: 340px; height: 335px; filter: drop-shadow(0 9px 2px #30251566); transform-origin: 50% 90%; }
.result-banner { position: absolute; left: 0; right: 0; top: 150px; text-align: center; z-index: 6 !important; pointer-events: none; }
.result-banner span { font-size: 72px; color: #ffe14a; text-shadow: 0 5px var(--ink), 4px 0 var(--ink), -4px 0 var(--ink), 0 -4px var(--ink), 4px 4px var(--ink), -4px 4px var(--ink); animation: pop .5s ease-out; display: inline-block; }
@keyframes pop { 0% { transform: scale(.4); } 70% { transform: scale(1.1); } 100% { transform: scale(1); } }
.float.hit { font-size: 50px; color: #fff4b2; animation-duration: 1.05s; }
.float.hit.sp { font-size: 58px; color: #ffb3a3; }
.float.special { font-size: 40px; color: #ff9a6a; animation-duration: 1.2s; }
.float.heal { font-size: 38px; color: #b6ff8a; }
.float.heal img { width: 56px; height: 56px; }
.combat-bottom { position: absolute; bottom: 14px; left: 16px; right: 16px; display: grid; grid-template-columns: 1fr 1fr 1.1fr; gap: 12px; }
.combat-card { background: #fff0d5f5; border: 3px solid var(--ink); border-radius: 16px; padding: 9px 13px; min-height: 84px; }
.combat-card > img { width: 50px; height: 50px; float: left; margin-right: 10px; }
.combat-card h3 { font-size: 15px; }
.combat-card p { font-size: 12px; margin-top: 4px; }
.combat-card .bar { margin-top: 6px; height: 11px; }
.lunch-chips { display: flex; gap: 4px; margin-top: 4px; min-height: 26px; }
.speeds { display: flex; gap: 6px; margin-top: 6px; }
.combat-card.go { display: flex; flex-direction: column; gap: 6px; }
.combat-card.go .scout { padding: 4px 8px; font-size: 11.5px; }
.go-row { display: flex; gap: 6px; align-items: center; }
.go-row .cta { padding: 5px 12px; font-size: 18px; flex: 1; }

/* ---------- map ---------- */
.world { position: absolute; left: 0; top: 0; width: 898px; height: 100%; }
.map-ground { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.world .scene-title { width: auto; }
.world .scene-title h1 { font-size: 26px; }
.region { position: absolute; width: 149px; text-align: center; filter: drop-shadow(0 4px 0 #49301d66); border: 0; background: none; padding: 0; z-index: 2; }
.region .badge { width: 74px; height: 74px; margin: 0 auto; background: #f9e8bd; border: 3px solid var(--ink); border-radius: 50%; }
.region .face { width: 45px; height: 45px; position: absolute; top: 39px; right: 8px; background: #facb73; border: 3px solid var(--ink); border-radius: 50%; }
.region b { display: block; background: #fff0cf; border: 3px solid var(--ink); border-radius: 10px; padding: 5px 3px; font-size: 14px; margin-top: 2px; }
.region small { display: inline-block; background: #50301e; color: #fff1d0; border-radius: 0 0 9px 9px; font-size: 10.5px; padding: 4px 8px; }
.region.open .badge { border-color: #5a7b2f; background: #dceca3; }
.region.open small { background: #526c2e; }
.region.cleared small { background: #3f7fb8; }
.region.stub .badge, .region.locked .badge { filter: grayscale(.35); }
.region.sel b { background: #ffe39a; }
.region.sel .badge { animation: bob 1.4s ease-in-out infinite; }
.map-note { position: absolute; bottom: 14px; left: 16px; background: #fff0d6ed; border: 3px solid var(--ink); border-radius: 12px; padding: 8px 13px; font-size: 13px; z-index: 2; }
.world-side { position: absolute; right: 0; top: 0; bottom: 0; width: 315px; padding: 15px 17px; display: flex; flex-direction: column; gap: 5px; }
.side-pics { display: flex; justify-content: center; align-items: flex-end; }
.side-badge { width: 96px; height: 96px; }
.side-boss { width: 80px; height: 80px; margin-left: -10px; }
.world-side p { font-size: 13px; }
.world-side h3 { font-size: 16px; }
.loot { display: flex; gap: 8px; justify-content: center; }
.loot img { width: 50px; height: 50px; background: #ecd4a4; border: 2px solid #a57846; border-radius: 12px; }
.loot-names { text-align: center; font-size: 12px !important; }
.world-side .rule { font-size: 12.5px; padding: 8px 11px; }
.world-side .cta { margin-top: auto; font-size: 16px; padding: 9px; }

/* ---------- toasts, modal, agent ---------- */
#toasts { position: absolute; left: 472px; top: 162px; width: 282px; display: flex; flex-direction: column; gap: 7px; z-index: 40; pointer-events: none; }
.toast { display: flex; align-items: center; gap: 9px; background: #fff3d6; border: 3px solid var(--ink); border-radius: 14px; padding: 7px 11px; font-size: 13px; box-shadow: 0 4px #9b683b; animation: tin .3s ease-out; transition: opacity .4s, transform .4s; }
.toast img, .toast .svgic { width: 36px; height: 36px; flex-shrink: 0; }
.toast.out { opacity: 0; transform: translateX(30px); }
@keyframes tin { from { opacity: 0; transform: translateX(30px); } }
#modal { position: absolute; inset: 0; z-index: 50; background: #2a1b0f80; display: flex; align-items: center; justify-content: center; }
.mbox { width: 600px; padding: 22px 26px; display: flex; flex-direction: column; gap: 10px; }
.mbox h2 { font-size: 28px; }
.mbox p { font-size: 15px; }
.m-art { display: flex; justify-content: center; }
.m-art img { width: 110px; height: 110px; }
.mbox .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mbox .chip { font-size: 14px; }
.mbox .chip img, .mbox .chip .svgic { width: 28px; height: 28px; }
.m-note { display: flex; align-items: center; gap: 8px; }
.m-note img { width: 40px; height: 40px; flex-shrink: 0; }
.mbtns { display: flex; gap: 10px; justify-content: flex-end; margin-top: 6px; }
.mbtns .btn { font-size: 16px; padding: 8px 16px; }
.steps { margin: 0; padding-left: 22px; font-size: 15px; line-height: 1.5; }
#agentBadge { position: absolute; left: 50%; top: 94px; transform: translateX(-50%); z-index: 45; display: flex; align-items: center; gap: 7px; background: #50301e; color: #ffe39a; border: 3px solid #ffe39a; border-radius: 20px; padding: 4px 14px; font-size: 13px; letter-spacing: 1.5px; pointer-events: none; }
#agentBadge i { width: 10px; height: 10px; border-radius: 50%; background: #ff6a4a; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: .2; } }
#agentCursor { position: absolute; left: 0; top: 0; z-index: 60; pointer-events: none; transition: transform .38s cubic-bezier(.3, .7, .3, 1); }
#agentCursor svg { position: absolute; left: -6px; top: -4px; width: 58px; height: 58px; filter: drop-shadow(0 4px 0 #30251566); }
#agentCursor .ring { position: absolute; left: -26px; top: -26px; width: 52px; height: 52px; border-radius: 50%; border: 5px solid #ffe14a; opacity: 0; }
#agentCursor.press .ring { animation: ring .55s ease-out; }
#agentCursor.press svg { animation: tap .3s ease-out; }
@keyframes ring { 0% { opacity: 1; transform: scale(.3); } 100% { opacity: 0; transform: scale(1.6); } }
@keyframes tap { 40% { transform: scale(.82) translate(2px, 3px); } }

/* ---------- tiers 3-5 (round 4) ---------- */
/* gear tints: silver / gold / dragonglass reuse the iron art under a filter (no new images) */
.tint-silver { filter: grayscale(1) brightness(1.32) contrast(1.08); }
.tint-gold { filter: sepia(1) saturate(4.2) hue-rotate(-8deg) brightness(1.08) contrast(1.05); }
.tint-glass { filter: sepia(1) saturate(3.6) hue-rotate(222deg) brightness(1.1) contrast(1.05); }
.float img.tint-silver, .float img.tint-gold, .float img.tint-glass { filter: none; }
/* work-site picker (Camp + Craft) */
.worksite { position: absolute; bottom: 12px; left: 12px; right: 12px; z-index: 4; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.worksite .jobs { position: static; width: 100%; }
.reg-pick { display: flex; gap: 5px; }
.reg-pick button { display: flex; align-items: center; gap: 4px; border: 3px solid var(--ink); border-radius: 12px; background: #fff0cfee; padding: 1px 8px 1px 2px; font-size: 12.5px; box-shadow: 0 3px #57361d80; white-space: nowrap; }
.reg-pick button.on { background: #a8d36e; }
.reg-pick img { width: 26px; height: 26px; }
.reg-pick em { font-style: normal; font-size: 11px; background: #50301e; color: #fff1d0; border-radius: 8px; padding: 0 6px; min-width: 18px; text-align: center; }
.reg-pick.craft { margin: -2px 0 0; }
.reg-pick.craft button { padding: 1px 3px; }
.reg-pick.craft span { display: none; }
.reg-pick.craft img { width: 24px; height: 24px; }
/* a window onto the painted world map: work-site scene + fight backdrop */
.crop-box { position: absolute; inset: 0; overflow: hidden; }
.crop-box img { position: absolute; max-width: none; height: auto; }
.scene-art.map-crop { filter: saturate(.95) brightness(.96); }
.scene-art.map-crop.r4 { filter: saturate(1.05) brightness(.92) hue-rotate(-6deg); }
.arena.golem .arena-art { filter: brightness(.62) saturate(.7) sepia(.25) blur(1.4px); }
.arena.lantern .arena-art { filter: brightness(.5) saturate(1.1) hue-rotate(-14deg) blur(1.6px); }
.arena.dragon .arena-art { filter: brightness(.62) saturate(1.15) blur(1.4px); }
.arena.golem:before { background: radial-gradient(ellipse 70% 62% at 50% 52%, #ffd59a26, #2a1c0e 118%), linear-gradient(#b0885a33, #1c120670); }
.arena.lantern:before { background: radial-gradient(ellipse 70% 62% at 50% 50%, #8cf0ff22, #120a2a 115%), linear-gradient(#5b3aa040, #0c062070); }
.arena.dragon:before { background: radial-gradient(ellipse 70% 62% at 50% 52%, #ffb4a02a, #2a0c14 118%), linear-gradient(#ff7a5a26, #2a081270); }
.peek.golem, .peek.lantern, .peek.dragon { right: 16px; top: 12px; }
.peek.lantern img { animation-duration: 1.6s; }
/* tier pips on gear cards: copper → dragonglass */
.pips { display: inline-flex; gap: 3px; margin-right: 3px; }
.pip { width: 13px; height: 13px; border-radius: 50%; border: 2px solid #a57846; background: #ead6a6; display: inline-block; }
.pip.have { border-color: var(--ink); }
.pip.copper.have { background: #e0874a; } .pip.iron.have { background: #8b98aa; } .pip.silver.have { background: #e6ecf2; }
.pip.gold.have { background: #ffcc3a; } .pip.glass.have { background: #b06cf0; }
.boss-pick.icons button { padding: 2px 4px; }
.raid.keep { background: #f9e3a6; }
/* prestige screen */
.keep-art { gap: 6px; align-items: flex-end; }
.keep-art img:last-child { width: 96px; height: 96px; }
.keep-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.keep-col { border: 3px solid var(--ink); border-radius: 14px; padding: 8px 12px; }
.keep-col.yes { background: #dceca3; }
.keep-col.fresh { background: #fff0cf; }
.keep-col > b { font-size: 15px; }
.keep-col ul { margin: 4px 0 0; padding-left: 18px; font-size: 13.5px; line-height: 1.45; text-align: left; }
.cta.gold { background: #f5cf5a; box-shadow: 0 5px #a47a1f, inset 0 4px #fff2b0; }
.float .svgic { width: 32px; height: 32px; filter: drop-shadow(0 2px 0 var(--ink)); }