:root {
  --bg: #f6efe3; --card: #fffaf2; --ink: #2f2418; --muted: #7a6a58; --line: #e3d6c2;
  --ember: #d9622b; --ember-dark: #a8461a; --good: #3d7a34; --warn: #b07a12; --danger: #b23a2e;
  --radius: 12px; font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); }
.muted { color: var(--muted); }
.topbar { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 10px 20px; background: #2f2418; color: #f6efe3; }
.brand { font-size: 21px; font-weight: bold; display: flex; align-items: center; gap: 8px; letter-spacing: .5px; }
.ember { width: 14px; height: 14px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 10px var(--ember); }
.stat { font-size: 14px; }
.topbar .muted { color: #c9b9a3; }
.readiness { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 13px; }
.bar { width: 140px; height: 9px; background: #5a4a38; border-radius: 5px; overflow: hidden; }
#ready-fill { height: 100%; width: 0; background: var(--ember); transition: width .6s; }

.stage { position: relative; margin: 12px 16px 0; background: #b7d68f; border-radius: var(--radius); overflow: hidden; min-height: 520px; display: grid; grid-template-columns: minmax(0, 1fr) 360px; align-items: start; }
#map { grid-column: 1; grid-row: 1; align-self: start; margin-top: 20px; }
#map { width: 100%; height: auto; display: block; }
#map .bld { cursor: pointer; }
#map .bld:hover, #map .bld:focus { filter: brightness(1.1); outline: none; }
#map .cbld { cursor: pointer; }
#map .cbld:hover, #map .cbld:focus { filter: brightness(1.08); outline: none; }
#map .tag { font-size: 13px; fill: #2f2418; }
#map .lbl.sel .tag { fill: var(--ember-dark); font-weight: bold; }
#map .you-tag { font-size: 12px; font-weight: bold; fill: var(--ember-dark); paint-order: stroke; stroke: #fffaf2; stroke-width: 3px; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 4px 14px rgba(47,36,24,.12); }
.side { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; gap: 10px; margin: 14px 14px 14px 0; }
.me { padding: 12px 14px; }
.me-row { display: flex; align-items: center; gap: 10px; }
.avatar { width: 46px; height: 46px; flex: none; }
.me h3 { margin: 0; font-size: 16px; }
.me .sub { font-size: 12px; color: var(--muted); }
.coins { font-size: 22px; font-weight: bold; margin: 8px 0 2px; color: var(--ember-dark); }
.energy { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.energy .bar { width: 100%; background: #eadcc6; height: 7px; }
.energy .fill { height: 100%; background: #e2b640; }
.bag { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; font-size: 12px; }
.chip { background: #f3e8d6; border-radius: 999px; padding: 2px 9px; }
.quest { padding: 12px 14px; border: 2px solid var(--ember); }
.quest .step { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--ember-dark); font-weight: bold; }
.quest h4 { margin: 3px 0 4px; font-size: 15px; }
.quest p { margin: 0 0 8px; font-size: 13px; line-height: 1.45; }
.quest .prog { height: 6px; background: #eadcc6; border-radius: 3px; overflow: hidden; margin-bottom: 8px; }
.quest .prog div { height: 100%; background: var(--ember); }
.quest .reward { font-size: 12px; color: var(--muted); }

.panel { position: relative; padding: 14px 16px; }
.panel[hidden] { display: none; }
.panel .close { position: absolute; top: 8px; right: 8px; border: none; background: none; font-size: 20px; line-height: 1; padding: 4px 8px; color: var(--muted); }
.panel h2 { margin: 0 24px 4px 0; font-size: 19px; }
.panel .quote { background: #f3e8d6; border-radius: 8px; padding: 8px 10px; font-style: italic; color: #5a4a38; margin: 10px 0; font-size: 14px; }
.panel table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 6px 0 12px; }
.panel td { padding: 6px 2px; border-top: 1px solid var(--line); }
.panel td.n { text-align: right; white-space: nowrap; }
.panel h4 { margin: 12px 0 2px; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
.hint { position: absolute; bottom: 12px; left: calc((100% - 360px) / 2); transform: translateX(-50%); background: rgba(47,36,24,.75); color: #fff; font-size: 13px; padding: 6px 14px; border-radius: 999px; pointer-events: none; }

button { font: inherit; font-size: 13px; padding: 5px 11px; border-radius: 7px; border: 1px solid #c9b79a; background: #fff; color: var(--ink); cursor: pointer; }
button:hover { background: #f3e8d6; }
button.primary { background: var(--ember); border-color: var(--ember-dark); color: #fff; padding: 9px 18px; font-size: 15px; }
button.primary:hover { background: var(--ember-dark); }
button:disabled { opacity: .45; cursor: default; }
.closed { color: var(--danger); font-weight: bold; }
.spark { width: 80px; height: 20px; vertical-align: middle; }

.banner { margin: 12px 16px 0; padding: 10px 14px; border-radius: var(--radius); font-size: 14px; }
.banner.danger { background: #f7dcd6; color: var(--danger); }
.banner.warn { background: #f7ebcf; color: var(--warn); }
.banner.night { background: #2c3558; color: #e8ecf8; }
.banner.winter { background: #e8f0f4; color: #3a5a6e; }
.log { margin: 12px 16px 18px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 16px; }
.log h3 { margin: 0 0 6px; font-size: 15px; }
.log ul { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.6; }
.log .good { color: var(--good); } .log .warn { color: var(--warn); } .log .danger { color: var(--danger); } .log .join { color: #4a5a8a; }

.overlay { position: fixed; inset: 0; background: rgba(47,36,24,.6); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 10; }
.overlay[hidden], .banner[hidden], .toast[hidden] { display: none; }
.dialog { background: var(--card); border-radius: 16px; padding: 22px 24px; max-width: 540px; width: 100%; }
.dialog h1 { margin: 0 0 6px; color: var(--ember-dark); }
.story { color: #5a4a38; line-height: 1.55; font-size: 14px; }
.dialog label, .label { display: block; font-size: 13px; color: var(--muted); margin: 12px 0 4px; }
.dialog input { width: 100%; font: inherit; padding: 9px 10px; border: 1px solid #c9b79a; border-radius: 7px; }
.error { color: var(--danger); font-size: 13px; min-height: 16px; margin-top: 4px; }
.paths { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }
.path { border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; cursor: pointer; font-size: 12px; background: #fff; line-height: 1.4; }
.path.on { border: 2px solid var(--ember); padding: 8px 10px; background: #fff6ee; }
.path b { display: block; font-size: 15px; }
.elder-row { display: flex; gap: 14px; align-items: flex-start; }
.elder-face { width: 80px; height: 80px; flex: none; }
.elder h2 { margin: 4px 0 6px; }
.elder p { margin: 0 0 14px; line-height: 1.55; font-size: 14px; color: #4a3a2a; }
.toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); background: #2f2418; color: #fff; padding: 10px 18px; border-radius: 10px; font-size: 14px; z-index: 20; }
.toast.bad { background: var(--danger); }
.toast.win { background: var(--good); }

@media (max-width: 900px) {
  .stage { display: flex; flex-direction: column; }
  .side { margin: 10px; }
  .hint { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .smoke { animation: rise 3s ease-out infinite; }
  .blades { animation: spin 6s linear infinite; transform-box: fill-box; transform-origin: center; }
  .bounce { animation: bounce 1s ease-in-out infinite; }
  .pulse { animation: pulse 1.4s ease-in-out infinite; }
}
@keyframes rise { from { transform: translateY(0); opacity: .8; } to { transform: translateY(-18px); opacity: 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes bounce { 50% { transform: translateY(-8px); } }
@keyframes pulse { 50% { opacity: .35; } }

.status { background: #f3e8d6; border-radius: 8px; padding: 9px 11px; margin: 0 24px 10px 0; font-size: 14px; color: #5a4a38; }
.result { background: #e4f0dc; border: 1px solid #b9d6a8; border-radius: 8px; padding: 10px 11px; margin: 0 24px 12px 0; font-size: 14px; color: #2f5a28; line-height: 1.45; }
.result .next { display: block; width: 100%; margin-top: 8px; font-size: 13px; padding: 8px 10px; text-align: left; }
button.big { width: 100%; padding: 11px; font-size: 16px; }
button.sellbtn { background: var(--ember); color: #fff; border-color: var(--ember-dark); }
button.sellbtn:hover { background: var(--ember-dark); }
.flash { animation: flash 1s ease-out; }
@keyframes flash { 0% { background: #ffe08a; transform: scale(1.06); } 100% { background: transparent; transform: scale(1); } }

.helpbtn { display: block; width: 100%; margin-top: 8px; background: #fff6ee; border-color: var(--ember); color: var(--ember-dark); font-weight: bold; }
ol.guide { padding-left: 20px; margin: 10px 0 0; }
ol.guide li { margin-bottom: 14px; font-size: 14px; line-height: 1.5; }
ol.guide button { margin-top: 6px; font-size: 13px; padding: 7px 12px; }
#map { cursor: default; }

.tired { background: #fbf0d9; border: 1px solid #ecd39a; border-radius: 8px; padding: 10px 11px; margin-top: 12px; font-size: 13px; line-height: 1.45; }
.tired div { margin-top: 7px; }
.tired button { width: 100%; text-align: left; }
button.eat { font-size: 11px; padding: 1px 7px; margin-left: 4px; border-radius: 999px; background: var(--ember); color: #fff; border-color: var(--ember-dark); }

.lang { font: inherit; font-size: 13px; background: #4a3a2a; color: #f6efe3; border: 1px solid #7a6a58; border-radius: 7px; padding: 4px 8px; }

.dock { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 12px 16px 0; }
.dock[hidden] { display: none; }
.dcard { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; font-size: 13px; }
.dcard h4 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--ember-dark); }
.dcard table { width: 100%; border-collapse: collapse; }
.dcard td { padding: 4px 2px; border-top: 1px solid var(--line); vertical-align: top; }
.dcard tr:first-child td { border-top: none; }
.dcard td.n { text-align: right; white-space: nowrap; }
.dcard .sum td { font-weight: bold; border-top: 2px solid var(--line); }
.dcard .up { color: var(--good); font-weight: bold; } .dcard .down { color: var(--danger); font-weight: bold; }
.small { font-size: 11px; }
.wear { height: 4px; background: #eadcc6; border-radius: 2px; margin: 4px 0 2px; overflow: hidden; width: 90px; }
.wear div { height: 100%; background: #7a9a5a; }
.skill { margin-bottom: 9px; }
.srow { display: flex; justify-content: space-between; gap: 6px; }
.xp { height: 6px; background: #eadcc6; border-radius: 3px; overflow: hidden; margin: 3px 0 2px; }
.xp div { height: 100%; background: #7a3b8a; }
.sub2 { margin: 8px 0 4px; font-weight: bold; font-size: 12px; }
.trow { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 3px 0; }
.trow button { font-size: 12px; padding: 3px 9px; }
@media (max-width: 1000px) { .dock { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .dock { grid-template-columns: 1fr; } }

#scene { grid-column: 1; grid-row: 1; width: 100%; height: auto; display: block; align-self: start; margin: 122px 0 104px; border-radius: var(--radius); }
#scene[hidden], .mini[hidden], .scene-bar[hidden] { display: none; }
.mini { position: absolute; top: 14px; left: 14px; width: 150px; height: 96px; padding: 0; border-radius: 12px; border: 3px solid #fffaf2;
  background: #b7d68f url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 96'%3E%3Cpolygon points='75,8 140,44 75,80 10,44' fill='%2386c152'/%3E%3Cpolygon points='62,30 74,36 62,42 50,36' fill='%23a33a2f'/%3E%3Cpolygon points='92,40 104,46 92,52 80,46' fill='%2355606e'/%3E%3Cpolygon points='75,54 87,60 75,66 63,60' fill='%23dcc8a2'/%3E%3Cpolygon points='112,32 122,18 130,38' fill='%237c6c5e'/%3E%3C/svg%3E") center / cover no-repeat;
  box-shadow: 0 4px 14px rgba(47,36,24,.25); display: flex; align-items: flex-end; justify-content: center; }
.mini span { background: rgba(47,36,24,.8); color: #fff; font-size: 12px; padding: 3px 10px; border-radius: 999px; margin-bottom: 6px; }
.mini:hover { filter: brightness(1.05); background-color: #b7d68f; }
.scene-bar { position: absolute; left: 14px; right: 374px; bottom: 14px; background: rgba(255,250,242,.96); border-radius: 12px; padding: 12px 14px; display: flex; align-items: center; gap: 14px; box-shadow: 0 4px 14px rgba(47,36,24,.2); }
.scene-bar .info { flex: 1; min-width: 0; font-size: 14px; }
.scene-bar .info b { display: block; margin-bottom: 4px; }
.scene-bar .prog { height: 8px; background: #eadcc6; border-radius: 4px; overflow: hidden; margin-top: 6px; }
.scene-bar .prog div { height: 100%; background: #e2b640; width: 0; }
.scene-bar .quote { font-style: italic; color: #5a4a38; }
@media (max-width: 900px) { .scene-bar { position: static; margin: 10px; } }
#scene .swing { transform-origin: 6px -18px; }
#scene .chips > * { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  #scene.is-working .worker .swing { animation: swing .55s ease-in-out infinite; }
  #scene .idle .swing { animation: swing 1.1s ease-in-out infinite; }
  #scene.is-working .chips .c1 { animation: chip .55s ease-out infinite; }
  #scene.is-working .chips .c2 { animation: chip .55s ease-out infinite .12s; }
  #scene.is-working .chips .c3 { animation: chip .55s ease-out infinite .24s; }
  #scene .sparks circle { animation: chip 1.1s ease-out infinite; }
  #scene .sparks .s2 { animation-delay: .2s; } #scene .sparks .s3 { animation-delay: .4s; }
  #scene .flick { animation: flick 1.6s ease-in-out infinite; }
  #scene .leaves ellipse { animation: fall 3.2s linear infinite; }
  #scene .leaves .l2 { animation-delay: 1.1s; } #scene .leaves .l3 { animation-delay: 2.2s; }
  #scene .sway { animation: sway 2.6s ease-in-out infinite; transform-box: fill-box; transform-origin: bottom center; }
  #scene .spin { animation: spin 5s linear infinite; transform-box: fill-box; transform-origin: center; }
  #scene .saw { animation: saw .8s ease-in-out infinite; }
  #scene .steam circle { animation: rise 3s ease-out infinite; }
}
@keyframes swing { 0%, 100% { transform: rotate(-55deg); } 50% { transform: rotate(28deg); } }
@keyframes chip { 0% { opacity: 0; transform: translate(0, 0); } 35% { opacity: 1; } 100% { opacity: 0; transform: translate(-34px, -38px); } }
@keyframes flick { 50% { opacity: .7; } }
@keyframes fall { 0% { opacity: 0; transform: translate(0, 0); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(-30px, 180px) rotate(200deg); } }
@keyframes sway { 50% { transform: rotate(4deg); } }
@keyframes saw { 50% { transform: translateX(-24px); } }
#map[hidden] { display: none; }

/* ---------- NEAR ---------- */
.near-pill { display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,.08); color: #f3e6d4; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; padding: 5px 12px; font: inherit; font-size: 13px; cursor: pointer; }
.near-pill:hover { background: rgba(255,255,255,.16); }
.near-pill .dot { width: 9px; height: 9px; border-radius: 50%; background: #9a9088; }
.near-pill.st-ready .dot { background: #4cc46a; box-shadow: 0 0 0 3px rgba(76,196,106,.25); }
.near-pill.st-setup .dot, .near-pill.st-starting .dot { background: #f0b43c; animation: nearblink 1s infinite; }
.near-pill.st-need-funds .dot { background: #f0b43c; }
.near-pill.st-error .dot { background: #e05a3c; }
@keyframes nearblink { 50% { opacity: .3; } }
.status.live { background: #e3f3e4; color: #24582f; }
.near-box { border-radius: 10px; padding: 10px 12px; margin: 8px 0; }
.near-box.warn { background: #fff4dc; border: 1px solid #f0d08a; }
.near-box p { margin: 0 0 8px; }
.addr { display: block; word-break: break-all; background: #fff; border: 1px solid #e6d7bd; border-radius: 6px; padding: 6px 8px; font-size: 12px; margin-bottom: 8px; }
#panel .row { display: flex; gap: 8px; align-items: center; margin: 6px 0; }
#panel .row input { flex: 1; min-width: 0; padding: 7px 9px; border: 1px solid #d9c7a8; border-radius: 8px; font: inherit; }
.btnlink { font-size: 13px; color: #b5501e; }
.near-link { color: #b5501e; text-decoration: none; word-break: break-all; }
.near-link:hover { text-decoration: underline; }
.near-link.small { font-size: 11px; }
.near-acc { width: 100%; border-collapse: collapse; font-size: 13px; }
.near-acc td { padding: 5px 0; border-bottom: 1px solid #efe4d2; vertical-align: top; }
.near-acc td.n { text-align: right; white-space: nowrap; }
.near-feed { list-style: none; padding: 0; margin: 0; font-size: 12.5px; max-height: 220px; overflow: auto; }
.near-feed li { padding: 6px 0; border-bottom: 1px solid #efe4d2; }
.near-feed li.bad { opacity: .7; }
.bad.small { color: #b23b22; }

/* ---------- jobs and homes ---------- */
.contract { border: 1px solid #ead9bd; background: #fffaf1; border-radius: 10px; padding: 10px 12px; margin: 10px 0; }
.contract.offer { border-color: #e8a37a; background: #fff3ea; }
.contract p { margin: 6px 0; }
.contract .primary { margin: 6px 0; }
.linkbtn { background: none; border: 0; padding: 0; color: #b5501e; font: inherit; font-size: 12px; cursor: pointer; text-decoration: underline; }
.ok { color: #2f7a3a; }
.board-h { margin: 16px 0 4px; font-size: 15px; border-top: 1px solid #efe4d2; padding-top: 12px; }
.contracts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chip { background: #f4ead9; border: 1px solid #e3d2b3; border-radius: 999px; padding: 3px 10px; font: inherit; font-size: 12px; cursor: pointer; color: #5a4128; }
.chip:hover { background: #ecdcc2; }
.near-feed .mine { background: #fff1c9; border-radius: 4px; padding: 0 3px; }

/* ---------- council ---------- */
.prop { border: 1px solid #ead9bd; border-radius: 10px; padding: 9px 11px; margin: 8px 0; background: #fffaf1; }
.votebar { height: 8px; background: #e8b3a3; border-radius: 4px; margin: 6px 0 3px; overflow: hidden; }
.votebar .y { height: 100%; background: #4f9a5a; }
.voters { list-style: none; padding: 0; margin: 4px 0; font-size: 12px; }
.voters li { padding: 2px 0; }
.propform select, .propform input { font: inherit; padding: 6px 8px; border: 1px solid #d9c7a8; border-radius: 8px; margin: 3px 4px 3px 0; max-width: 100%; }
.propform input { width: 90px; }
.decided { list-style: none; padding: 0; margin: 0; font-size: 13px; }
.decided li { padding: 4px 0; border-bottom: 1px solid #efe4d2; }
.res { font-size: 11px; font-weight: bold; border-radius: 4px; padding: 1px 5px; margin-right: 3px; }
.res.passed { background: #dff0e0; color: #24582f; }
.res.rejected, .res.quorum, .res.poor { background: #f6dfd8; color: #8a2a1a; }
.shortcuts { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.chip.strong { background: #fff1e6; border-color: #e8a37a; color: #8a3b12; font-weight: 600; }
details summary { cursor: pointer; color: #8a6a48; }
details[open] summary { margin-bottom: 4px; }
#panel > .close + .board-h { border-top: 0; margin-top: 0; padding-top: 0; }
.result.bad { background: #fbe9e3; border-color: #efc3b4; color: #7a2a16; }
.jobinfo { font-size: 12px; color: #6b5640; background: #f8f0e3; border-radius: 8px; padding: 6px 9px; margin-top: 6px; line-height: 1.5; }
#day-left { font-variant-numeric: tabular-nums; }
.wallet-btn { display: inline-flex; align-items: center; gap: 7px; background: #e8642c; color: #fff; border: 0; border-radius: 999px; padding: 6px 14px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.wallet-btn:hover { background: #d4541e; }
.wallet-btn.linked { background: rgba(255,255,255,.1); color: #f3e6d4; border: 1px solid rgba(255,255,255,.22); font-weight: 500; }
.wallet-btn .wdot { width: 8px; height: 8px; border-radius: 50%; background: #4cc46a; }
.wallet-btn .muted { color: #c9b8a2; }

/* ---------- one-screen layout (v26) ---------- */
html, body { height: 100%; }
body { display: flex; flex-direction: column; overflow: hidden; }
.topbar { flex: none; flex-wrap: nowrap; gap: 12px; padding: 8px 16px; min-height: 52px; overflow-x: auto; scrollbar-width: none; }
.topbar::-webkit-scrollbar { display: none; }
.topbar > * { flex: none; }
.brand { font-size: 19px; }
.stage { flex: 1; min-height: 0; margin: 10px 12px 12px; display: grid; grid-template-columns: minmax(0, 1fr) 372px; grid-template-rows: minmax(0, 1fr) auto;
  gap: 10px; background: none; border-radius: 0; overflow: visible; align-items: stretch; }
.view { grid-column: 1; grid-row: 1; position: relative; min-height: 0; border-radius: 16px; overflow: hidden;
  background: radial-gradient(ellipse at 50% 30%, #d9efc0 0%, #b9dc93 45%, #9cc779 100%); box-shadow: inset 0 0 0 1px rgba(60,90,30,.15); }
.view.scene-on { background: #e9dcc4; }
#map, #scene { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; display: block; }
#map[hidden], #scene[hidden] { display: none; }
.view .banner { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); margin: 0; z-index: 3; box-shadow: 0 4px 14px rgba(47,36,24,.2); max-width: 80%; }
.hint { left: 50%; bottom: 10px; }
.mini { top: 10px; left: 10px; z-index: 3; }
.scene-bar { left: 12px; right: 12px; bottom: 12px; top: auto !important; z-index: 3; padding: 10px 14px; }
.side { grid-column: 2; grid-row: 1 / span 2; margin: 0; min-height: 0; overflow-y: auto; padding-right: 2px; scrollbar-width: thin; }
.side > .card { flex: none; }
.bottom { grid-column: 1; grid-row: 2; min-height: 0; }
.dock { margin: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.dcard { max-height: 168px; overflow-y: auto; padding: 10px 12px; scrollbar-width: thin; }
.side .log { margin: 0; padding: 10px 14px; flex: none; }
.log h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--ember-dark); margin-bottom: 6px; }
.log ul { padding-left: 16px; font-size: 12px; line-height: 1.5; }

.dcard { font-size: 12px; }
.dcard td { padding: 3px 2px; }
@media (max-width: 1400px) { #pop { display: none; } .readiness .bar { width: 80px; } .topbar { gap: 10px; } }
@media (max-width: 1200px) { .readiness > span:first-child { display: none; } #day-left { display: none; } }
@media (max-height: 760px) { .dcard { max-height: 128px; } }
@media (max-width: 900px) {
  body { overflow: auto; display: block; height: auto; }
  .stage { display: flex; flex-direction: column; }
  .view { height: 60vh; }
  .side { overflow: visible; }
  .bottom { display: block; }
  .dock { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- village look (v26) ---------- */
#map .glow { opacity: 0; transition: opacity 1.5s; mix-blend-mode: screen; }
#map.is-night .glow { opacity: .55; }
#map .bot { opacity: .92; }
@media (prefers-reduced-motion: no-preference) {
  #map .ripple { animation: ripple 2.8s ease-in-out infinite; }
}
@keyframes ripple { 50% { transform: translateX(4px); opacity: .35; } }
.view { transition: background 1.5s; }
.view.night:not(.scene-on) { background: radial-gradient(ellipse at 50% 30%, #8fa38a 0%, #75896c 45%, #5f7258 100%); }
@media (prefers-reduced-motion: no-preference) {
  #map .lairglow { animation: pulse 1.2s ease-in-out infinite; }
  #map .dragonfly { animation: fly 9s ease-in-out infinite; }
}
@keyframes fly { 0% { transform: translate(0, 0); } 50% { transform: translate(-120px, 30px); } 100% { transform: translate(0, 0); } }

/* ---------- compact dock: no scrolling (v27) ---------- */
.dcard { max-height: none; overflow: visible; height: auto; min-height: 104px; padding: 9px 12px; }
.dcard h4 { margin: 0 0 6px; display: flex; justify-content: space-between; }
.dcard h4 .muted { text-transform: none; letter-spacing: 0; font-weight: normal; }
.ichips { display: flex; flex-wrap: wrap; gap: 5px; }
.ichip { display: inline-flex; align-items: center; gap: 4px; background: #f6ecdc; border: 1px solid #e6d5b8; border-radius: 8px; padding: 3px 7px; font-size: 12px; }
.ichip b { color: var(--ember-dark); }
.iwear { display: inline-block; width: 28px; height: 4px; background: #e3d3b8; border-radius: 2px; overflow: hidden; }
.iwear i { display: block; height: 100%; background: #6f9a4f; }
.nums { display: grid; grid-template-columns: 1fr; gap: 1px; margin-bottom: 3px; }
.num { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; }
.num b { font-size: 13px; }
.num span { color: var(--muted); }
.num b.up { color: var(--good); } .num b.down { color: var(--danger); }
.sks { display: grid; grid-template-columns: 1fr; gap: 3px; }
.sk .xp { margin: 0 !important; }
.sk { display: grid; grid-template-columns: 82px 18px 1fr; gap: 6px; font-size: 12px; align-items: center; }
.sk b { color: #7a3b8a; }
.sk .xp { height: 6px; }
.prs { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 14px; }
.pr { display: grid; grid-template-columns: minmax(0, 1fr) auto 10px; gap: 4px; font-size: 12px; align-items: center; white-space: nowrap; }
.pr span:first-child { overflow: hidden; text-overflow: ellipsis; }
.pr b { font-size: 13px; }
.pr .up { color: var(--good); font-size: 9px; } .pr .down { color: var(--danger); font-size: 9px; }
@media (prefers-reduced-motion: no-preference) { #map .forge { animation: flick 1.4s ease-in-out infinite; } }

/* land deed (v30) */
.deed { background: linear-gradient(#fbf3df, #f3e4c2); border: 1.5px solid #c9a46a; border-radius: 10px; padding: 10px 12px; margin: 8px 0 10px; box-shadow: inset 0 0 0 3px #fbf3df, inset 0 0 0 4px #e0c690; }
.deed-head { display: flex; gap: 10px; align-items: center; margin-bottom: 6px; }
.deed .seal { width: 30px; height: 30px; border-radius: 50%; background: #b5501e; color: #ffe9b0; display: grid; place-items: center; font-size: 16px; flex: none; }
.deed-rows div { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; border-bottom: 1px dashed #dcc596; padding: 2px 0; }
.deed-rows span { color: #7a5a36; }
.deed-rows code { font-size: 11px; word-break: break-all; text-align: right; }
.deed-st { font-size: 13px; margin: 6px 0 4px; }
.deed-st.ok { color: #2f7a3a; } .deed-st.held { color: #8a5a10; } .deed-st.wait { color: #8a3b12; }
.chip.deedchip { background: #fff4d6; border-color: #d9a84a; color: #7a4a10; font-weight: 600; }

/* conditions: asleep, cold, freezing, coat (v31) */
.conds { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 2px; }
.cond { font-size: 11.5px; border-radius: 999px; padding: 2px 8px; background: #eef1f6; color: #3a4a6a; }
.cond.bad { background: #e6eef8; color: #2f5a8a; border: 1px solid #b8cde6; }
.cond.ok { background: #eef6ea; color: #2f7a3a; }
.cond.sleep { background: #2c3558; color: #e8ecf8; }
.contract.sleep { border-color: #8a96c8; background: #f1f3fb; }

/* sleeping and speech bubbles in scenes (v34) */
#scene .zzz text { animation: zzz 2.4s ease-in-out infinite; }
#scene .zzz text:nth-child(2) { animation-delay: .5s; } #scene .zzz text:nth-child(3) { animation-delay: 1s; }
@keyframes zzz { 0%, 100% { opacity: .2; transform: translateY(4px); } 50% { opacity: 1; transform: translateY(-4px); } }
#scene .bubble { animation: pop .25s ease-out; }
@keyframes pop { from { opacity: 0; } to { opacity: 1; } }

/* the shop counter inside the scene (v36) */
.scene-menu { position: absolute; top: 14px; right: 14px; width: min(330px, 38%); max-height: calc(100% - 130px); overflow: auto; z-index: 4;
  background: rgba(255, 250, 242, .96); border: 1px solid #e3d2b3; border-radius: 14px; padding: 10px 12px; box-shadow: 0 6px 20px rgba(60, 40, 20, .18); font-size: 13px; }
.scene-menu .sm-head { font-weight: 700; margin-bottom: 4px; }
.scene-menu h4 { margin: 8px 0 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: #8a3b12; }
.scene-menu table { width: 100%; border-collapse: collapse; }
.scene-menu td { padding: 3px 2px; border-top: 1px solid #efe3cc; }
.scene-menu button { font-size: 12px; padding: 4px 8px; }
.scene-menu .big { font-size: 13px; padding: 6px 10px; }

/* treasury books (v36) */
.books-top { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 6px 0; }
.books-top div { background: #f6ecdb; border-radius: 10px; padding: 6px 8px; display: flex; flex-direction: column; }
.books-top b { font-size: 16px; }
.bchart { display: flex; gap: 6px; align-items: flex-end; height: 64px; padding: 4px 0; }
.bday { display: flex; gap: 2px; align-items: flex-end; position: relative; padding-bottom: 14px; }
.bday span { position: absolute; bottom: 0; left: 0; right: 0; text-align: center; font-size: 10px; color: #8a7a68; }
.bb { width: 9px; border-radius: 3px 3px 0 0; min-height: 2px; }
.bb.in, .dot.in { background: #3d8a46; } .bb.out, .dot.out { background: #c4473a; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin: 0 3px 0 8px; }

/* treasury and council open as a card over the map (v36) */
.map-card { position: absolute; top: 14px; right: 14px; bottom: 14px; width: min(460px, 46%); overflow: auto; z-index: 4;
  background: #fffaf2; border: 1px solid #e3d2b3; border-radius: 16px; padding: 14px 16px; box-shadow: 0 8px 26px rgba(60, 40, 20, .2); }
.map-card .close { position: sticky; top: 0; float: right; border: none; background: none; font-size: 22px; line-height: 1; padding: 2px 6px; color: var(--muted); cursor: pointer; }
.map-card table { width: 100%; border-collapse: collapse; font-size: 13px; } .map-card td { padding: 3px 2px; border-top: 1px solid #efe3cc; } .map-card td.n { text-align: right; }

/* exchange (v37) */
.tabs { display: flex; gap: 4px; margin: 8px 0 6px; border-bottom: 1px solid #e3d2b3; }
.tab { border: none; background: none; padding: 6px 10px; font: inherit; font-size: 13px; color: #7a5a36; border-bottom: 3px solid transparent; cursor: pointer; }
.tab.on { color: #8a3b12; font-weight: 700; border-bottom-color: #d9622b; }
.exform { flex-wrap: wrap; gap: 6px; align-items: center; }
.exform input { width: 64px; } .exform select { max-width: 150px; }
.bld.far { cursor: pointer; } .bld.far:hover path { filter: brightness(1.06); }

/* map shrinks to the left while a big card is open (v38) */
.view.card-on #map { transform: translateX(-23%); transition: transform .35s ease; }
#map { transition: transform .35s ease; }
.ai-note { color: #4a5a8a; }

/* fast-forward (v40) */
.ffbtn { background: #2f6656; color: #fff; border: none; border-radius: 999px; padding: 4px 12px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.ffbtn:hover { background: #3f7a6a; } .ffbtn:disabled { opacity: .7; cursor: default; }
.banner.ff { background: #2f6656; color: #eafaf4; }

/* the craftsman's reasoning tooltip (v41) */
.tip { position: relative; display: inline-block; cursor: help; color: #4a5a8a; font-size: 12px; margin-left: 2px; }
.tip:hover::after, .tip:focus::after { content: attr(data-tip); position: absolute; right: 0; top: 130%; width: 230px; white-space: normal; text-align: left;
  background: #2a2f45; color: #f2f4fb; padding: 8px 10px; border-radius: 8px; font-size: 12px; line-height: 1.35; z-index: 20; box-shadow: 0 4px 14px rgba(0,0,0,.25); }

/* sound buttons (v42) */
.sndbtn { background: rgba(255,255,255,.12); color: #fff; border: none; border-radius: 999px; width: 30px; height: 28px; font-size: 14px; cursor: pointer; padding: 0; }
.sndbtn:hover { background: rgba(255,255,255,.22); } .sndbtn.off { opacity: .45; text-decoration: line-through; }

/* pasture & pond scenes, night sky (v43) */
@media (prefers-reduced-motion: no-preference) {
  #scene .twinkle { animation: pulse 2.4s ease-in-out infinite; }
  #scene .bob { animation: bounce 1.8s ease-in-out infinite; }
  #scene.is-working .bob { animation: bounce .4s ease-in-out infinite; }
  #scene .ripple { animation: pulse 3s ease-in-out infinite; }
}

/* v44: player card and goal float on the game screen; the right side keeps only the place panel and the news */
.hud-right { position: absolute; top: 10px; right: 10px; bottom: 10px; width: min(460px, 46%); display: flex; flex-direction: column; align-items: flex-end; gap: 8px; z-index: 5; pointer-events: none; }
.hud-right > * { pointer-events: auto; }
.hud-right > [hidden] { display: none !important; }
.card.hud { background: rgba(255,250,242,.94); backdrop-filter: blur(4px); box-shadow: 0 4px 16px rgba(47,36,24,.18); border-radius: 14px; }
#me.hud { width: 300px; max-width: 100%; padding: 10px 12px; flex: none; }
#me.hud .me-row { gap: 8px; }
#me.hud .avatar { width: 36px; height: 36px; }
#me.hud .who { flex: 1; min-width: 0; }
#me.hud h3 { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#me.hud .sub { font-size: 11px; }
#me.hud .coins { margin: 0; font-size: 20px; white-space: nowrap; } #me.hud .coins small { font-size: 11px; font-weight: 600; }
#me.hud .energy { margin-top: 6px; }
#me.hud .shortcuts { margin-top: 7px; gap: 4px; } #me.hud .shortcuts .chip { font-size: 11px; padding: 2px 8px; }
#me.hud .contracts { margin-top: 5px; gap: 4px; } #me.hud .contracts .chip { font-size: 11px; }
.hud-right .scene-menu { position: static; width: min(330px, 100%); max-height: none; min-height: 0; flex: 0 1 auto; overflow: auto; }
.hud-right .map-card { position: static; width: 100%; flex: 1 1 auto; min-height: 0; overflow: auto; }
#quest.hud { position: absolute; left: 10px; bottom: 10px; width: 290px; padding: 9px 12px; z-index: 4; border: 2px solid var(--ember); }
#quest.hud h4 { font-size: 14px; margin: 2px 0; }
#quest.hud p { font-size: 12px; margin: 0 0 6px; line-height: 1.35; }
#quest.hud .prog { margin-bottom: 4px; }
#quest.hud .qrow { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
#quest.hud .qrow .primary { padding: 5px 12px; font-size: 13px; }
#quest.hud .qrow .linkbtn { font-size: 12px; }
.view.scene-on #quest.hud, .view.card-on #quest.hud { display: none; }
.view .hint { left: auto; right: 12px; transform: none; bottom: 12px; }
.view .banner { left: 170px; right: 320px; transform: none; max-width: none; width: fit-content; margin: 0 auto; }
/* keep the island clear of the floating cards: shrink it a little toward the free middle */
.view:not(.card-on) #map { transform: scale(.86); transform-origin: 55% 42%; transition: transform .35s ease; }
#quest.hud p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#quest.hud { width: 260px; }
.view.scene-on #me.hud .shortcuts, .view.scene-on #me.hud .contracts { display: none; }
.view.scene-on #me.hud { width: 250px; }
#quest.hud p { display: none; }

/* ---------- phones (v46) ---------- */
@media (max-width: 700px) {
  .topbar { gap: 8px; padding: 6px 10px; }
  /* on a phone the judge tour and help come right after the name, before anything that scrolls off */
  .topbar > * { order: 10; } .topbar > .brand { order: 0; } #tour-btn { order: 1; } #howto-btn { order: 2; } #near-pill { order: 3; } #wallet-btn { order: 4; }
  .stage { margin: 6px; gap: 6px; }
  .view { height: 440px; min-height: 0; border-radius: 12px; }
  .side { order: 2; margin: 0; } .bottom { order: 3; }
  .dock { grid-template-columns: 1fr 1fr; gap: 6px; }
  /* player card: a slim bar across the top of the game screen */
  .hud-right { top: 6px; left: 6px; right: 6px; bottom: 6px; width: auto; align-items: stretch; gap: 6px; }
  #me.hud { width: auto; padding: 6px 10px; border-radius: 12px; }
  #me.hud .avatar { width: 28px; height: 28px; }
  #me.hud .sub { display: none; }
  #me.hud h3 { font-size: 14px; }
  #me.hud .coins { font-size: 17px; }
  #me.hud .energy { margin-top: 3px; font-size: 11px; }
  #me.hud .shortcuts, #me.hud .contracts { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-top: 5px; }
  #me.hud .shortcuts::-webkit-scrollbar, #me.hud .contracts::-webkit-scrollbar { display: none; }
  #me.hud .chip { flex: none; }
  /* goal: one line at the bottom */
  #quest.hud { left: 6px; right: 6px; bottom: 6px; width: auto; padding: 6px 10px; display: flex; align-items: center; gap: 8px; }
  #quest.hud .step, #quest.hud .prog, #quest.hud .prog + .reward, #quest.hud .qrow .linkbtn { display: none; }
  #quest.hud h4 { flex: 1; min-width: 0; margin: 0; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #quest.hud .qrow { margin: 0; }
  /* the village fills the space between the two bars */
  .view:not(.card-on) #map { transform: none; }
  .view:not(.scene-on) #map { top: 96px; bottom: auto; height: calc(100% - 146px); }
  .view.card-on #map { transform: none; opacity: .35; }
  .hint, .view .hint { display: none; }
  .view .banner { left: 8px; right: 8px; top: auto; bottom: 56px; font-size: 12px; }
  /* inside a place */
  .mini { width: 84px; height: 54px; top: 6px; left: 6px; } .mini span { font-size: 10px; padding: 2px 6px; margin-bottom: 3px; }
  .view.scene-on .hud-right { left: 96px; }
  .view.scene-on #scene { top: 66px; bottom: auto; height: calc(100% - 162px); }
  .scene-bar { position: absolute; left: 6px; right: 6px; bottom: 6px; margin: 0; padding: 8px 10px; gap: 8px; flex-wrap: wrap; }
  .scene-bar .info { font-size: 12px; } .scene-bar .quote { display: none; }
  .hud-right .scene-menu { width: 100%; max-height: 40%; font-size: 12px; }
  .hud-right .map-card { width: 100%; }
}

/* village news / chat tabs (v49) */
.logtabs { display: flex; gap: 4px; margin-bottom: 6px; }
.ltab { background: none; border: none; padding: 3px 8px; border-radius: 999px; font: inherit; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); cursor: pointer; }
.ltab.on { background: #f3e8d6; color: var(--ember-dark); }
.unread { background: var(--ember); color: #fff; border-radius: 999px; padding: 0 6px; font-size: 11px; }
#chat-list { list-style: none; margin: 0 0 6px; padding: 0; max-height: 220px; overflow-y: auto; font-size: 13px; line-height: 1.35; scrollbar-width: thin; }
#chat-list li { padding: 5px 8px; border-radius: 8px; margin-bottom: 4px; background: #faf3e8; word-wrap: break-word; }
#chat-list li.mine { background: #eef5e6; }
#chat-list li.mention { box-shadow: inset 3px 0 0 var(--ember); }
#chat-form { display: flex; gap: 6px; }
#chat-form input { flex: 1; min-width: 0; padding: 6px 9px; border: 1px solid #e0d2bb; border-radius: 8px; font: inherit; font-size: 13px; }
#chat-form button { padding: 6px 12px; font-size: 13px; }

/* touch screens: zoom buttons, the map takes drags (v51) */
.zoom { position: absolute; right: 8px; bottom: 58px; z-index: 4; display: flex; flex-direction: column; gap: 6px; }
.zoom[hidden], .view.scene-on .zoom, .view.card-on .zoom { display: none; }
.zoom button { width: 38px; height: 38px; border-radius: 50%; border: none; background: rgba(255,250,242,.95); box-shadow: 0 2px 8px rgba(47,36,24,.25); font-size: 22px; font-weight: 700; color: var(--ember-dark); padding: 0; line-height: 1; }
@media (pointer: coarse) { #map { touch-action: none; } }
/* short landscape screens (phone on its side) */
@media (max-height: 520px) and (orientation: landscape) {
  body { overflow: auto; height: auto; display: block; }
  .stage { display: flex; flex-direction: column; margin: 6px; gap: 6px; }
  .view { height: calc(100vh - 58px); min-height: 300px; }
  .side { order: 2; margin: 0; overflow: visible; } .bottom { order: 3; display: block; }
  .hud-right { top: 6px; right: 6px; bottom: 6px; width: 300px; }
  #me.hud { padding: 6px 10px; } #me.hud .avatar { width: 26px; height: 26px; } #me.hud .sub { display: none; }
  #me.hud .coins { font-size: 16px; } #me.hud .energy { margin-top: 2px; font-size: 11px; }
  #me.hud .shortcuts { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-top: 4px; } #me.hud .chip { flex: none; }
  #quest.hud { left: 6px; bottom: 6px; width: 240px; padding: 5px 10px; display: flex; align-items: center; gap: 8px; }
  #quest.hud .step, #quest.hud .prog, #quest.hud .prog + .reward, #quest.hud .qrow .linkbtn { display: none; }
  #quest.hud h4 { flex: 1; min-width: 0; margin: 0; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .view .banner { left: 8px; right: 320px; top: 6px; font-size: 12px; padding: 6px 10px; }
  .view:not(.card-on) #map { transform: none; }
  .hint, .view .hint { display: none; }
  .zoom { bottom: 8px; right: 316px; flex-direction: row; }
  .scene-bar { position: absolute; left: 6px; right: 6px; bottom: 6px; margin: 0; padding: 6px 10px; }
}
/* dialogs taller than a small screen scroll instead of hiding their buttons */
.overlay { overflow-y: auto; align-items: flex-start; }
.overlay .dialog { margin: auto 0; }
@media (max-width: 700px) { .hud-right .scene-menu { display: none !important; } }

/* the price tooltip floats above everything and stays on screen (v52) */
.tip:hover::after, .tip:focus::after { content: none !important; display: none !important; }
#tipbox { position: fixed; z-index: 50; max-width: 260px; background: #2a2f45; color: #f2f4fb; padding: 8px 10px; border-radius: 8px; font-size: 13px; line-height: 1.4; box-shadow: 0 4px 14px rgba(0,0,0,.25); pointer-events: none; }
#tipbox[hidden] { display: none; }

/* how to play (v55) */
.helptop { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; padding: 4px 12px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.helptop:hover { background: rgba(255,255,255,.22); }
.dialog.howto { max-width: 720px; }
.howgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 14px 0 10px; }
.howcard { background: #faf3e8; border-radius: 12px; padding: 12px 14px; }
.howcard h4 { margin: 4px 0; color: var(--ember-dark); }
.howcard p { margin: 0; font-size: 13px; line-height: 1.4; }
.howico { font-size: 22px; }
@media (max-width: 700px) { .howgrid { grid-template-columns: 1fr; } .helptop { padding: 3px 9px; font-size: 12px; } }

/* v57: on the village map the player card sits bottom-right, so Dragon peak (top-right) stays in view */
@media (min-width: 701px) and (min-height: 521px) {
  .view:not(.scene-on):not(.card-on) .hud-right { justify-content: flex-end; }
  .view:not(.scene-on):not(.card-on) .hint { display: none; }
  .view:not(.card-on) #map { transform: scale(.88); transform-origin: 38% 30%; }
}
.view.card-on .hint, .view.scene-on .hint { display: none !important; }

/* NEAR Intents bridge picture (v61) */
.bridgebox { background: linear-gradient(180deg, #fff8ee, #fdf1df); border: 2px solid #f0c69c; border-radius: 14px; padding: 8px 10px 6px; margin: 8px 0 10px; }
.bridgebox .bridge { width: 100%; height: auto; display: block; }
.bsteps { margin: 4px 0 2px 18px; padding: 0; font-size: 12px; line-height: 1.5; }
.bsteps li.done { color: #2f7a3a; font-weight: 700; }
.bsteps li.now { color: var(--ember-dark); font-weight: 700; }
/* plots for sale: a soft glowing outline (v62) */
@media (prefers-reduced-motion: no-preference) { #map .saleplot { animation: saleglow 2.2s ease-in-out infinite; } }
@keyframes saleglow { 0%, 100% { fill: rgba(255,255,255,.28); stroke: #7a6a58; } 50% { fill: rgba(255,214,150,.55); stroke: #d9622b; } }
.small.rule { color: #b3261e; font-weight: 600; }
.editname { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 13px; padding: 0 2px; vertical-align: 1px; }
.editname:hover { color: var(--ember); }
#rename-form input { flex: 1; padding: 7px 10px; border: 1px solid #e0d2bb; border-radius: 8px; font: inherit; }
/* zoom buttons on every screen; with a mouse they sit on the right edge, clear of the player card (v62) */
@media (pointer: fine) { .zoom { top: 42%; bottom: auto; right: 12px; } }
/* the exchange card is wide, in two columns, so the bridge and the prices are visible without scrolling (v62) */
@media (min-width: 901px) {
  .view.card-wide .hud-right { width: min(900px, 76%); }
  .view.card-wide .hud-right #me.hud { display: none; }
  .view.card-wide .map-card { max-height: 100%; }
  .view.card-wide:not(.scene-on) #map { transform: translateX(-34%) scale(.9) !important; }
  .excols { display: grid; grid-template-columns: 1.15fr 1fr; gap: 16px; align-items: start; }
  .excol > .sub2:first-child { margin-top: 4px; }
}
/* live price panel in the exchange quarter (v62) */
.ticker { position: absolute; left: 10px; top: 10px; width: 210px; padding: 10px 12px; z-index: 4; font-size: 13px; border: 2px solid #8fd0b8; }
.ticker[hidden] { display: none; }
.ticker .tk-title { font-weight: 800; color: #2f6656; margin-bottom: 4px; }
.ticker table { width: 100%; } .ticker td { padding: 2px 0; } .ticker tr.emwk td { border-top: 1px dashed #d8cbb4; padding-top: 4px; }
.view.card-on .ticker { display: none; }
@media (max-width: 700px) { .ticker { top: 100px; width: 170px; font-size: 12px; } }
/* where you clicked to walk (v64) */
#map .walkmark { fill: rgba(217,98,43,.18); stroke: #d9622b; stroke-width: 1.5; stroke-dasharray: 4 3; }
@media (prefers-reduced-motion: no-preference) { #map .walkmark { animation: pulse 1.2s ease-in-out infinite; } }
/* choose how many to sell (v64) */
.qtyrow { display: flex; align-items: center; justify-content: flex-end; gap: 3px; margin-bottom: 4px; }
.qtyrow .sellqty { width: 46px; padding: 3px 4px; text-align: center; border: 1px solid #e0d2bb; border-radius: 6px; font: inherit; font-size: 13px; }
.qtyrow .qbtn { min-width: 24px; height: 24px; padding: 0 6px; border-radius: 6px; border: 1px solid #e0d2bb; background: #fff; cursor: pointer; font-size: 13px; line-height: 1; }
.qtyrow .qbtn.all { font-size: 11px; }
.qtyrow .sellqty::-webkit-inner-spin-button { -webkit-appearance: none; }

/* NEAR AI craftsmen */
.ai-box { margin: 10px 0; padding: 8px 10px; border: 1px solid #b9c3e6; background: #f2f4fc; border-radius: 8px; }
.ai-head { font-size: 12px; font-weight: 600; color: #3b4a85; display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.ai-dot { width: 8px; height: 8px; border-radius: 50%; background: #5b6ee1; box-shadow: 0 0 0 0 rgba(91,110,225,.6); animation: aipulse 2s infinite; }
@keyframes aipulse { 0% { box-shadow: 0 0 0 0 rgba(91,110,225,.6); } 70% { box-shadow: 0 0 0 6px rgba(91,110,225,0); } 100% { box-shadow: 0 0 0 0 rgba(91,110,225,0); } }
.ai-box p { margin: 3px 0; }
.ai-qa { margin: 6px 0; }
.ai-ask { margin-top: 6px; gap: 6px; }
.ai-ask .ai-q { flex: 1; min-width: 0; }

/* haggling */
.hagbtn { margin-left: 4px; font-size: 12px; padding: 3px 7px; }
.haggle { border: 1px solid #e0b46a; background: #fff8ea; border-radius: 8px; padding: 8px 10px; margin: 6px 0 10px; }
.hag-head { display: flex; justify-content: space-between; align-items: center; }
.hag-row { gap: 6px; align-items: center; flex-wrap: wrap; margin: 6px 0; }
.hag-row input { width: 64px; }
.hag-reply { margin: 6px 0; font-size: 13px; }
.hag-reply.angry .quote, .hag-reply.closed .quote { color: #a33; }
.hag-reply.accept .quote { color: #2d6a2d; }
.ai-dot.off { background: #c9a24a; animation: none; }
.ai-tee { color: #2d6a2d; }

/* speech bubbles in scenes fade away after a while */
#scene-talk { transition: opacity .8s ease; }
#scene-talk.gone { opacity: 0; }
.contract.debt { border-color: #d9a34a; background: #fff6e4; }
.contract.debt.late { border-color: #c44; background: #fdeeee; }
.ai-proof { margin: 3px 0; color: #3b4a85; word-break: break-word; }
.ai-proof a { color: #3b4a85; }

/* judge tour */
.tourbtn { background: #e2b640; color: #3a2a1e; border-color: #e2b640; }
.tourbtn:hover { background: #f2c94c; }
.tourcard { position: fixed; left: 16px; bottom: 16px; width: 380px; max-width: calc(100vw - 32px); z-index: 60; background: #fffaf2; border: 2px solid #e2b640; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.25); padding: 12px 14px; font-size: 14px; }
.tourcard h3 { margin: 6px 0 4px; font-size: 16px; }
.tourcard p { margin: 4px 0; line-height: 1.4; }
.tourcard a { color: #3b4a85; }
.tour-head { display: flex; justify-content: space-between; align-items: center; color: #8a6a1e; font-size: 12px; }
.tour-nav { display: flex; justify-content: space-between; margin-top: 8px; gap: 8px; }
@media (max-width: 700px) { .tourcard { left: 8px; right: 8px; bottom: 8px; width: auto; font-size: 13px; } }
.fair-ok { color: #2d6a2d; } .fair-no { color: #a33; } .fairline { margin: 4px 0; }
.orderrow { margin-top: 10px; padding: 8px 10px; border: 1px dashed #c9a24a; border-radius: 8px; background: #fffaf0; }
.orderrow p { margin: 3px 0; }
.ai-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ai-acts button { font-size: 12px; padding: 4px 9px; }

/* NEAR inside: the four NEAR parts at a glance */
.nearinside { border: 1px solid #c9d3f0; background: linear-gradient(135deg, #f3f6ff, #eef9f4); border-radius: 10px; padding: 8px 10px; margin: 0 0 10px; }
.ni-title { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #3b4a85; font-weight: 700; margin-bottom: 6px; }
.ni-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ni-item { display: flex; flex-direction: column; gap: 1px; text-align: left; background: #fff; border: 1px solid #dfe5f5; border-radius: 8px; padding: 6px 8px; font-size: 12px; line-height: 1.3; color: #2b2b2b; }
button.ni-item { cursor: pointer; } button.ni-item:hover { border-color: #5b6ee1; }
.ni-item b { font-size: 12.5px; } .ni-item span { color: #555; } .ni-icon { font-size: 16px; color: inherit !important; }
.chainstrip { border-left: 3px solid #2d6a2d; padding: 2px 8px; margin: 0 0 10px; }
.chainstrip ul { margin: 4px 0 0 16px; padding: 0; } .chainstrip li { margin: 1px 0; }
.agentline { font-size: 12px; color: #3b4a85; margin: 3px 0 6px; }
#join-near .nearinside { margin: 8px 0 12px; }

.nearbar { position: absolute; top: 12px; left: 12px; z-index: 6; background: rgba(255,255,255,.95); border: 1px solid #c9d3f0; border-radius: 10px; padding: 6px 8px; box-shadow: 0 4px 14px rgba(0,0,0,.12); max-width: 440px; }
.nb-head { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: #3b4a85; margin-bottom: 4px; }
.nb-row { display: flex; flex-wrap: wrap; gap: 4px; }
.nb-item { font-size: 11.5px; padding: 3px 7px; border-radius: 999px; border: 1px solid #dfe5f5; background: #f5f7ff; color: #2b2b2b; display: inline-flex; gap: 4px; align-items: center; cursor: pointer; }
.nb-item:hover { border-color: #5b6ee1; }
.nb-foot { font-size: 11px; color: #2d6a2d; margin-top: 4px; }
.nb-open { font-size: 12px; padding: 4px 9px; border-radius: 999px; background: #fff; border: 1px solid #c9d3f0; color: #3b4a85; cursor: pointer; }
@media (max-width: 700px), (max-height: 520px) { .nearbar { top: 6px; left: 6px; max-width: 70vw; } .nb-row, .nb-foot { display: none; } .nb-head { margin: 0; } }
body.busy-act [data-act] { cursor: progress; }

/* money history */
.moneydlg { max-width: 760px; width: calc(100vw - 32px); }
.mh-head { display: flex; justify-content: space-between; align-items: center; }
.mh-wrap { max-height: 60vh; overflow: auto; }
table.mh { width: 100%; border-collapse: collapse; font-size: 13px; }
table.mh th { text-align: left; position: sticky; top: 0; background: #fffaf2; border-bottom: 1px solid #e3d6bf; padding: 4px 6px; }
table.mh td { border-bottom: 1px solid #f0e6d4; padding: 4px 6px; vertical-align: top; }
table.mh td.in { color: #2d6a2d; font-weight: 600; } table.mh td.out { color: #a33; font-weight: 600; }

/* real NEAR Intents swap */
.realform { display: grid; grid-template-columns: 1fr; gap: 4px; margin: 6px 0; }
.realform label { font-size: 12px; color: #555; margin-top: 4px; }
.realform input, .realform select { width: 100%; }
.realswap { border: 1px solid #c9d3f0; background: #f5f7ff; border-radius: 8px; padding: 8px 10px; margin: 8px 0; }
.realaddr code { font-size: 11px; word-break: break-all; background: #fff; padding: 2px 4px; border-radius: 4px; }
.realsteps { margin: 6px 0 4px 18px; padding: 0; font-size: 12.5px; }
.realsteps li { color: #888; } .realsteps li.done { color: #2d6a2d; } .realsteps li.done::marker { content: '✓ '; } .realsteps li.now { color: #3b4a85; font-weight: 600; }

.modeswitch { display: inline-flex; border: 1px solid #e0742b; border-radius: 999px; overflow: hidden; margin: 2px 0 8px; }
.modeswitch button { border: 0; border-radius: 0; background: #fff8ee; color: #b4531c; padding: 5px 12px; font-size: 12.5px; cursor: pointer; }
.modeswitch button.on { background: #e0742b; color: #fff; font-weight: 600; }
#view.card-on .nearbar, #view.card-wide .nearbar { display: none !important; }
.modeswitch.small2 button { font-size: 12px; padding: 4px 10px; }

/* the real swap card: send on top, get below, a round flip button between */
.swapcard { position: relative; display: grid; gap: 6px; margin: 4px 0 10px; }
.sc-side { background: #fffdf8; border: 1.5px solid #ecd9bf; border-radius: 14px; padding: 10px 12px; display: grid; gap: 5px; }
.sc-head { font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #b4531c; }
.tokrow { display: flex; flex-wrap: wrap; gap: 6px; }
.tokchip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px 5px 5px; border: 1.5px solid #e6d6c0; border-radius: 999px; background: #fff; cursor: pointer; font: inherit; color: #2b2b2b; }
.tokchip.on { border-color: #e0742b; background: #fff3e6; box-shadow: 0 0 0 2px #f6c9a3 inset; }
.tokchip[disabled] { cursor: default; opacity: 1; border-color: #e0742b; background: #fff3e6; }
.tc-coin { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 15px; box-shadow: inset 0 -3px 0 rgba(0,0,0,.18), inset 0 3px 0 rgba(255,255,255,.3); }
.tc-txt { display: flex; flex-direction: column; line-height: 1.1; text-align: left; }
.tc-txt b { font-size: 13.5px; }
.tc-chain { font-size: 11px; font-weight: 700; }
.sc-amt { display: flex; align-items: center; gap: 8px; }
.sc-amt input { flex: 1; font-size: 22px; font-weight: 700; padding: 6px 10px; border-radius: 10px; }
.sc-amt b { font-size: 16px; }
.sc-est { font-size: 18px; font-weight: 700; color: #555; }
.sc-lab { font-size: 12.5px; color: #555; margin-top: 4px; }
.sc-side input { width: 100%; box-sizing: border-box; }
.sc-hint { font-size: 11.5px; color: #8a7a66; }
.sc-flip { justify-self: center; margin: -16px 0; z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 3px solid #fff; background: #e0742b; color: #fff; font-size: 20px; font-weight: 800; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.18); transition: transform .25s; }
.sc-flip:hover { transform: rotate(180deg); }
.sc-go { margin-top: 4px; font-size: 15px; padding: 10px; }
.bflip:hover circle { fill: #c85f1c; }

/* say the swap in words */
.aiswap { background: linear-gradient(180deg, #f2f6ff, #eaf1ff); border: 1.5px solid #c9d7f5; border-radius: 14px; padding: 10px 12px; margin: 6px 0 10px; display: grid; gap: 6px; }
.aiswap-head { font-weight: 800; font-size: 14px; color: #2c3e73; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.aiswap-tag { font-size: 10.5px; font-weight: 800; background: #2c3e73; color: #fff; border-radius: 999px; padding: 2px 8px; letter-spacing: .04em; }
.aiswap .row { display: flex; gap: 6px; }
.aiswap .row input { flex: 1; min-width: 0; font-size: 14px; padding: 8px 10px; border-radius: 10px; }
.aiswap-ex { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; font-size: 12.5px; }
.aiswap-reply { background: #fff; border-radius: 10px; padding: 8px 10px; display: grid; gap: 3px; }
.aiswap-reply p { margin: 0; }
.aiswap-say { font-style: italic; color: #3b4a6b; }

.realcancel-btn { margin-top: 6px; color: #b3261e; }
.realcancel { background: #fff1ef; border: 1px solid #f0b8b1; border-radius: 10px; padding: 8px 10px; margin-top: 6px; }
.realcancel p { margin: 0 0 6px; }
.realcancel .danger { background: #c0392b; color: #fff; border-color: #c0392b; }
.sc-side input.need { border: 2px solid #e0742b; background: #fff6ec; }

/* the player's own wallets */
.walletrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; background: #f4fbf7; border: 1.5px solid #bfe3cf; border-radius: 12px; padding: 8px 10px; margin: 4px 0 8px; }
.wr-title { font-weight: 800; font-size: 13px; color: #1f6f4f; }
.wr-btn { border: 1.5px solid #1f9d76; background: #fff; color: #17694f; border-radius: 999px; padding: 5px 12px; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.wr-btn:hover { background: #e7f6ee; }
.wr-on { font-size: 12.5px; background: #e2f4ea; border-radius: 999px; padding: 4px 10px; color: #17694f; }
.walletrow .sc-hint { flex-basis: 100%; }
.walletsend { background: #f4fbf7; border: 1.5px solid #bfe3cf; border-radius: 12px; padding: 10px; margin: 8px 0; display: grid; gap: 6px; }
.walletsend .big { font-size: 15px; padding: 10px; }
.walletsend p { margin: 0; }

/* v99: the real swap fits on one screen: steps 1-2-3 on the left, AI and the picture on the right */
.step-h { display: flex; align-items: center; gap: 7px; font-weight: 800; font-size: 13.5px; color: #3a2a1a; margin: 2px 0 5px; }
.stepn { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: #e0742b; color: #fff; font-size: 12px; font-weight: 800; flex: none; }
.sc-go .stepn { background: #fff; color: #c85f1c; margin-right: 4px; }
.wtiles { margin: 0 0 8px; }
.wtiles-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px; }
.wtile { --c: #1f9d76; display: flex; align-items: center; gap: 9px; text-align: left; padding: 8px 10px; border-radius: 12px; border: 2px solid var(--c); background: #fff; cursor: pointer; font: inherit; color: #222; box-shadow: 0 2px 0 color-mix(in srgb, var(--c) 35%, transparent); transition: transform .1s; }
button.wtile:hover { transform: translateY(-1px); background: color-mix(in srgb, var(--c) 8%, #fff); }
.wtile.on { cursor: default; background: color-mix(in srgb, var(--c) 10%, #fff); border-style: solid; }
.wt-ic { width: 32px; height: 32px; border-radius: 50%; background: var(--c); color: #fff; font-weight: 800; font-size: 17px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.wt-tx { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.wt-tx b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wt-tx span { font-size: 11px; color: #666; }
.wt-off { margin-left: auto; font-size: 11px; }
.swapcard { gap: 4px; margin: 0 0 6px; }
.sc-side { padding: 7px 10px; gap: 4px; border-radius: 12px; }
.sc-head { font-size: 11px; }
.tokrow { gap: 4px; }
.tokchip { padding: 3px 8px 3px 3px; gap: 5px; }
.tc-coin { width: 22px; height: 22px; font-size: 12px; }
.tc-txt b { font-size: 12px; }
.tc-chain { font-size: 10px; }
.sc-amt input { font-size: 17px; padding: 4px 8px; }
.sc-amt b { font-size: 14px; }
.sc-range { font-size: 11px; color: #8a7a66; white-space: nowrap; }
.sc-lab { font-size: 11.5px; margin-top: 0; cursor: help; }
.sc-side input { padding: 4px 8px; font-size: 12.5px; }
.sc-flip { width: 32px; height: 32px; font-size: 16px; margin: -12px 0; }
.sc-go { width: 100%; font-size: 15px; padding: 9px; display: flex; align-items: center; justify-content: center; }
.realinfo { margin: 0 0 6px; font-size: 13px; }
.realinfo summary { cursor: pointer; }
.realmanual, .realdone, .realextra { margin: 6px 0; font-size: 12.5px; }
.realmanual summary, .realdone summary, .realextra summary { cursor: pointer; color: #8a5a2b; font-weight: 600; }
.aiswap { padding: 8px 10px; gap: 5px; margin: 0 0 8px; }
.aiswap-head { font-size: 13px; }
.aiswap .row input { padding: 6px 9px; font-size: 13px; }
.aiswap-ex { flex-direction: row; flex-wrap: wrap; gap: 2px 10px; font-size: 11.5px; }
.bridgebox { padding: 4px 8px 2px; margin: 0 0 8px; }
.realswap { padding: 8px 10px; }
.realswap .realsteps { margin: 4px 0 4px 20px; }
.walletsend { margin: 6px 0; padding: 8px; }
.sc-headrow { display: flex; align-items: center; gap: 8px; }
.sc-headrow .tokchip { text-transform: none; letter-spacing: 0; }
.aiswap-head { flex-wrap: nowrap; } .aiswap-tag { white-space: nowrap; }
.realinfo summary { font-size: 12.5px; color: #8a5a2b; }
.wtiles { margin: 0 0 5px; } .bridgebox { margin: 0 0 5px; } .realinfo { margin: 0 0 4px; } .step-h { margin: 0 0 4px; }

/* split one send to several receivers */
.split-btn { margin-top: 2px; font-size: 12.5px; font-weight: 700; }
.legrow { --c: #556; display: grid; grid-template-columns: 20px 1fr auto 18px; grid-template-rows: auto auto; gap: 3px 6px; align-items: center; padding: 5px 6px; border-left: 4px solid var(--c); background: #fff; border-radius: 8px; margin: 0 0 4px; }
.legrow .leg-n, .legst .leg-n { width: 18px; height: 18px; border-radius: 50%; background: var(--c, #e0742b); color: #fff; font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.legrow select { font-size: 12px; padding: 2px 4px; min-width: 0; }
.leg-amt { font-size: 11.5px; white-space: nowrap; }
.leg-amt input { width: 58px; padding: 2px 4px; font-size: 12.5px; }
.leg-x { font-size: 12px; color: #b3261e; padding: 0; }
.leg-rec { grid-column: 2 / 5; padding: 3px 6px; font-size: 12px; }
.leg-foot { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; }
.leg-total { font-weight: 800; color: #3a2a1a; }
.split-sum { font-size: 18px; }
.legst { list-style: none; padding: 0; margin: 4px 0; display: grid; gap: 4px; }
.legst li { display: grid; grid-template-columns: 20px 1fr auto; gap: 6px; align-items: center; background: #fff; border-radius: 8px; padding: 5px 7px; font-size: 12.5px; }
.legst .leg-n { background: #e0742b; }
.legst-st { font-size: 11.5px; font-weight: 700; white-space: nowrap; color: #7a6b58; }
.legst li.st-SUCCESS .legst-st { color: #2f7a3a; }
.legst li.st-REFUNDED .legst-st, .legst li.st-FAILED .legst-st { color: #b3261e; }
.sc-using { color: #17694f; font-weight: 600; cursor: default; }
.legrow { padding: 3px 5px; gap: 2px 5px; margin: 0 0 3px; }
.legrow select { width: 100%; }
.leg-amt input { width: 50px; }

/* what the swap costs */
.feebox { background: #fff; border: 1.5px solid #ecd9bf; border-radius: 10px; padding: 7px 10px; margin: 6px 0; }
.fee-h { font-weight: 800; font-size: 12.5px; color: #3a2a1a; margin-bottom: 3px; }
.feebox table { width: 100%; font-size: 12.5px; border-collapse: collapse; }
.feebox td { padding: 2px 0; border: 0; }
.feebox td.n { text-align: right; }
.fee-cost td { border-top: 1px dashed #e3d2b3 !important; padding-top: 4px !important; }
.fee-cost.good b { color: #2f7a3a; } .fee-cost.mid b { color: #b8730e; } .fee-cost.high b { color: #b3261e; }
.feebox p { margin: 3px 0 0; }
.feebox td.n { white-space: nowrap; padding-left: 6px; }

/* other routes and wallet buttons */
.altbox { margin-top: 5px; font-size: 12px; }
.altbox summary { cursor: pointer; color: #2c3e73; font-weight: 700; }
.altbox table { width: 100%; margin-top: 4px; border-collapse: collapse; }
.altbox td { vertical-align: top; padding: 3px 4px; border-top: 1px solid #efe3cc; font-size: 12px; }
.altbox td:first-child { width: 34%; }
.wtile.on { flex-wrap: wrap; }
.wt-acts { display: flex; gap: 4px; margin-left: auto; }
.wt-act { border: 1px solid #c9b79c; background: #fff; border-radius: 999px; font-size: 11px; padding: 2px 8px; cursor: pointer; color: #5a4632; }
.wt-act:hover { background: #fff3e6; }
.wt-act.off { color: #b3261e; border-color: #e6b3ad; }

/* token pickers for any chain */
.tokpick { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px 3px 3px; border: 1.5px solid #e0742b; border-radius: 999px; background: #fff3e6; cursor: pointer; font: inherit; color: #222; text-transform: none; letter-spacing: 0; }
.tokpick:hover, .tokpick.on { background: #ffe6cc; }
.tp-caret { font-size: 11px; color: #b4531c; }
.pickpanel { border: 1.5px solid #e0742b; border-radius: 10px; background: #fff; padding: 6px; margin: 2px 0 4px; display: grid; gap: 5px; }
.pk-top { display: flex; gap: 6px; } .pk-top input { flex: 1; padding: 4px 8px; font-size: 12.5px; min-width: 0; }
.pk-chains { display: flex; flex-wrap: wrap; gap: 3px; }
.pk-chains button { --c: #556; border: 1px solid color-mix(in srgb, var(--c) 45%, #fff); background: #fff; color: var(--c); border-radius: 999px; font-size: 10.5px; font-weight: 700; padding: 1px 7px; cursor: pointer; }
.pk-chains button.on { background: var(--c); color: #fff; }
.pk-chains button[data-pickchain=""] { --c: #7a4a1c; }
.pk-list { max-height: 190px; overflow: auto; display: grid; gap: 1px; }
.pk-item { display: grid; grid-template-columns: 24px auto 1fr auto; align-items: center; gap: 6px; text-align: left; border: 0; background: none; padding: 3px 4px; border-radius: 6px; cursor: pointer; font: inherit; font-size: 12.5px; }
.pk-item:hover { background: #fff3e6; }
.pk-item[hidden] { display: none; }
.pk-chain { font-size: 11px; font-weight: 700; }
.pk-price { font-size: 11px; color: #8a7a66; }
.sc-usd { margin-top: -2px; }
.wtile.manual { cursor: default; opacity: .85; border-style: dashed; }

/* network + token: two clear buttons per side, and a full-column view to choose */
.netrow { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.netbtn, .tokbtn { --c: #556; position: relative; display: flex; align-items: center; gap: 6px; padding: 14px 8px 5px; border-radius: 10px; border: 2px solid var(--c); background: color-mix(in srgb, var(--c) 8%, #fff); cursor: pointer; font: inherit; color: #222; text-align: left; min-width: 0; }
.tokbtn { border-color: #e0742b; background: #fff3e6; }
.netbtn:hover, .tokbtn:hover { filter: brightness(.97); }
.netbtn b, .tokbtn b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.nb-lab { position: absolute; top: 2px; left: 9px; font-size: 9.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #8a7a66; }
.nb-ic { width: 24px; height: 24px; border-radius: 50%; background: var(--c); color: #fff; font-weight: 800; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.tokbtn .tc-coin { width: 24px; height: 24px; }
.pickview { display: grid; gap: 6px; }
.pv-head { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.pv-chains { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 6px; max-height: 420px; overflow: auto; }
.pv-chain { --c: #556; display: grid; grid-template-columns: 28px 1fr; grid-template-rows: auto auto; column-gap: 7px; align-items: center; padding: 7px 8px; border-radius: 10px; border: 2px solid color-mix(in srgb, var(--c) 55%, #fff); background: #fff; cursor: pointer; font: inherit; text-align: left; }
.pv-chain .nb-ic { grid-row: 1 / 3; width: 28px; height: 28px; }
.pv-chain b { font-size: 13px; }
.pv-n { font-size: 10.5px; color: #8a7a66; }
.pv-chain:hover, .pv-chain.on { background: color-mix(in srgb, var(--c) 12%, #fff); border-color: var(--c); }
.pv-search { padding: 6px 9px; font-size: 13px; border-radius: 8px; }
.pv-tokens { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 5px; max-height: 380px; overflow: auto; }
.pv-token { display: grid; grid-template-columns: 26px 1fr; grid-template-rows: auto auto; column-gap: 6px; align-items: center; padding: 6px 8px; border-radius: 10px; border: 1.5px solid #ecd9bf; background: #fff; cursor: pointer; font: inherit; text-align: left; }
.pv-token .tc-coin { grid-row: 1 / 3; width: 26px; height: 26px; }
.pv-token b { font-size: 13px; }
.pv-token:hover, .pv-token.on { border-color: #e0742b; background: #fff3e6; }
.pv-token[hidden] { display: none; }

/* last swap line, own-wallet hints, token check, receiver pickers */
.lastres { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12.5px; border-radius: 10px; padding: 6px 10px; margin: 0 0 6px; }
.lastres.ok { background: #e9f6ec; border: 1px solid #b9dfc3; color: #22562d; }
.lastres.bad { background: #fff1ef; border: 1px solid #f0b8b1; color: #8a2a20; }
.recip-row { display: flex; gap: 6px; align-items: center; } .recip-row input { flex: 1; min-width: 0; }
.tproof { font-size: 11px; color: #7a6b58; margin-top: 2px; } .tproof code { font-size: 10.5px; }
.legpick { grid-column: 2 / 4; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.netbtn.sm, .tokbtn.sm { padding: 4px 6px; border-radius: 8px; gap: 4px; }
.netbtn.sm b, .tokbtn.sm b { font-size: 12px; }
.netbtn.sm .nb-ic, .tokbtn.sm .tc-coin { width: 18px; height: 18px; font-size: 10px; }
.legrow:has(.legpick) { grid-template-columns: 20px 1fr 1fr 18px; }
.legrow:has(.legpick) .leg-amt { grid-column: 2 / 3; }
.legrow:has(.legpick) .leg-rec { grid-column: 3 / 5; }
.legrow:has(.legpick) .leg-n { grid-row: 1; grid-column: 1; }
.legrow:has(.legpick) .legpick { grid-row: 1; grid-column: 2 / 4; }
.legrow:has(.legpick) .leg-x { grid-row: 1; grid-column: 4; }
.legrow:has(.legpick) .leg-amt { grid-row: 2; grid-column: 1 / 3; padding-left: 24px; }
.legrow:has(.legpick) .leg-rec { grid-row: 2; grid-column: 3 / 5; }
.editquote { width: 100%; margin: 2px 0 6px; padding: 7px; border-radius: 10px; border: 1.5px solid #e0742b; background: #fff8ee; color: #b4531c; font-weight: 700; cursor: pointer; font: inherit; font-weight: 700; }
.editquote:hover { background: #ffecd6; }

.wchoose { margin-top: 6px; background: #fff; border: 1.5px solid #e0742b; border-radius: 10px; padding: 7px 9px; font-size: 13px; }
.wchoose-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 3px; align-items: center; }
.wc-btn { border: 1.5px solid #c9b79c; background: #fffaf2; border-radius: 999px; padding: 5px 12px; font-weight: 700; cursor: pointer; font: inherit; font-weight: 700; }
.wc-btn:hover { border-color: #e0742b; background: #fff3e6; }

/* system status */
.sysbox{border:1px solid #e3d6bf;border-radius:10px;padding:6px 10px;margin:8px 0;background:#fffaf2}
.sysbox summary{cursor:pointer;font-weight:600}
.systab{width:100%;border-collapse:collapse;font-size:13px;margin:6px 0}
.systab td{padding:3px 4px;border-bottom:1px solid #f0e6d4;vertical-align:top;overflow-wrap:anywhere}
.systab a,.systab code{white-space:nowrap}
.systab td:first-child{color:#7a6a55;white-space:nowrap;width:1%;padding-right:10px;word-break:normal}
.syst{display:inline-block;padding:1px 7px;border-radius:9px;font-size:12px;font-weight:600}
.syst.st-ok{background:#e1f3e3;color:#21653a}.syst.st-low{background:#fde4dc;color:#a3331a}.syst.st-off{background:#eee;color:#666}
.sysnote{background:#fff3e6;border-radius:8px;padding:6px 8px}
.syslog{max-height:240px;overflow:auto;font:12px/1.45 ui-monospace,Menlo,monospace;background:#2b2520;color:#eadfcf;border-radius:8px;padding:6px 8px}
.syslog div{padding:1px 0;word-break:break-word}.syslog .muted{color:#9c8f7e}
.syslog .bad{color:#ffb39e}.syslog .good{color:#a8e6b4}

/* the village list of real swaps: open one to see its links */
.donelist{display:flex;flex-direction:column;gap:4px;margin-top:6px}
.doneitem{border:1px solid #eadcc4;border-radius:8px;padding:4px 8px;background:#fff}
.doneitem summary{cursor:pointer;font-size:13px;line-height:1.4}
.doneitem[open]{background:#fffdf8}
.donelinks{padding:4px 0 2px 18px}.donelinks p{margin:3px 0;word-break:break-all}

.legproof{display:flex;flex-direction:column;gap:1px;margin-top:3px}.legproof a{word-break:break-all}

/* the village seal */
.seal-wrap{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;background:rgba(40,24,14,.55);animation:seal-fade .25s ease-out}
.seal-rain{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.seal-coin{position:absolute;top:-40px;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font:700 12px/1 system-ui,sans-serif;box-shadow:inset 0 -3px 0 rgba(0,0,0,.22),0 2px 4px rgba(0,0,0,.25);animation:seal-fall linear 2 forwards}
.seal-card{position:relative;width:min(420px,92vw);background:#fffaf2;border-radius:18px;padding:22px 22px 18px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.35);animation:seal-shake .35s ease-out .55s}
.seal-wax{width:120px;height:120px;margin:-70px auto 4px;display:block;filter:drop-shadow(0 6px 8px rgba(80,10,0,.35));animation:seal-stamp .55s cubic-bezier(.2,1.4,.4,1) both}
.seal-card h2{margin:4px 0 6px;font-size:21px;color:#5a2a12}
.seal-route{font-weight:700;font-size:16px;margin:4px 0;color:#2b2520}
.seal-sub{color:#7a6a55;font-size:13px;margin:2px 0 10px}
.seal-badge{display:inline-block;background:#fff1c9;border:1px solid #e8c56a;border-radius:20px;padding:4px 12px;font-size:13px;margin:2px 0 10px;animation:seal-pop .4s ease-out 1s both}
.seal-btns{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:6px 0 10px}
.seal-btns .btnlink{padding:7px 12px;border-radius:10px;border:1px solid #e3d6bf;background:#fff;text-decoration:none;font-size:13px;color:#3a2a1e}
.seal-btns .btnlink.primary{background:#e0662d;border-color:#e0662d;color:#fff}
.seal-book{font-size:12.5px;color:#7a6a55;padding:7px 4px}
.seal-foot{font-size:11px;color:#9c8f7e;margin:4px 0 10px}
.seal-ok{min-width:140px}
.seal-wrap.calm .seal-wax,.seal-wrap.calm .seal-card,.seal-wrap.calm .seal-badge{animation:none}
@keyframes seal-fade{from{opacity:0}}
@keyframes seal-stamp{0%{transform:scale(2.6) rotate(-25deg);opacity:0}60%{opacity:1}100%{transform:scale(1) rotate(-8deg)}}
@keyframes seal-shake{0%,100%{transform:none}25%{transform:translate(-4px,2px)}50%{transform:translate(3px,-2px)}75%{transform:translate(-2px,1px)}}
@keyframes seal-pop{from{transform:scale(.6);opacity:0}}
@keyframes seal-fall{to{transform:translateY(calc(100vh + 80px)) rotate(540deg)}}

.seal-bag{font-size:13px;background:#f3ecdf;border-radius:10px;padding:6px 10px;margin:0 0 10px}
.sealwall{border:1px solid #e3c9a8;background:linear-gradient(#fff7ec,#fbefdd);border-radius:12px;padding:10px 12px;margin:8px 0 12px}
.sw-head{display:flex;gap:10px;align-items:center;margin-bottom:4px}
.sw-wax{flex:none;width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 38% 35%,#e2513a,#8e1f12);box-shadow:0 2px 4px rgba(80,10,0,.35),inset 0 0 0 3px rgba(246,185,168,.35)}
.sw-list{list-style:none;padding:0;margin:8px 0 0;display:flex;flex-wrap:wrap;gap:4px 12px;font-size:13px}
.sw-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#b8321f;margin-right:5px;vertical-align:-1px}
.ichip.sealchip{background:#fbe3dc;border-color:#e2a594}.ichip.sealchip::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;background:#b8321f;margin-right:4px}

/* the connected wallet's balance under the amount */
.sc-bal{font-size:12.5px;margin:3px 0 2px;display:flex;flex-wrap:wrap;gap:2px 6px;align-items:baseline}
.sc-bal .bal-short{display:none;color:#b3261e;font-weight:600}
.sc-bal.short{color:#b3261e}.sc-bal.short .bal-short{display:inline}
.sc-bal .bal-note{flex-basis:100%}

/* check the addresses before approving */
.chkbox{border:1px solid #d9c9ad;background:#fffdf8;border-radius:10px;padding:8px 10px;margin:6px 0 8px}
.chk-head{font-weight:700;font-size:13px;margin-bottom:4px}
.chk-row{padding:5px 0;border-top:1px dashed #eadfcb}.chk-row:first-of-type{border-top:0}
.chk-lab{font-size:12px;color:#5d4c38;font-weight:600}
.chk-addr code{display:block;font-size:12px;word-break:break-all;background:#f5efe4;border-radius:6px;padding:3px 6px;margin:2px 0;user-select:all}
.chk-meta{font-size:12px;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
.chk-ok{color:#21653a;font-weight:600}.chk-warn{color:#a3331a;font-weight:600}
.chk-note{margin:6px 0 0}

.solvbox{border:1px solid var(--line,#d9cdb4);border-radius:8px;padding:6px 10px;margin:8px 0;background:rgba(255,255,255,.35)}
.solvbox .sub2{margin:2px 0 4px}
.solvbox .systab td:first-child{white-space:normal;width:40%}

.altwin{margin:6px 0 4px;padding:6px 9px;border-radius:6px;font-size:13px;line-height:1.35}
.altwin.best{background:#e5f4e3;border:1px solid #7bb87a;color:#1f4d1e;font-weight:600}
.altwin.even{background:#f2efe6;border:1px solid #d8cfb7}
.altwin.other{background:#f6f1e4;border:1px solid #d8cfb7;color:#5b4a2a}
.nocut{color:#3d5a2c;margin:4px 0}

/* Village Ledger: check a record in your own browser */
.ledger-list li { margin-bottom: 6px; }
.ledger-res { font-size: 12px; margin: 4px 0 2px; padding: 6px 8px; border-radius: 8px; line-height: 1.4; }
.ledger-res.ok { background: #e8f5e4; color: #2d5a22; }
.ledger-res.bad { background: #fbe9e4; color: #8a2f18; }
.ledger-res code { font-size: 11px; }
.ledger-btn { font-size: 11px; padding: 2px 8px; margin-left: 4px; }

/* sign in with a wallet */
.signin { margin: 6px 0 10px; padding: 8px 10px; border: 1px dashed #d8c7a5; border-radius: 10px; }
.signin-row { flex-wrap: wrap; gap: 6px; }
.signin-row button { font-size: 12px; }
.keepchip { border-style: dashed; }

/* Orin the Banker */
.bankhead { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; }
.bankhead h2 { margin: 0; }
.bankseal { width: 46px; height: 46px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fbe39a, #e2b640 60%, #a87a18); color: #2f5d4a; font: 700 24px/46px Georgia, serif; text-align: center; box-shadow: 0 0 0 3px #2f5d4a, 0 4px 14px rgba(168,122,24,.45); flex: none; }
.bankstats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 6px 0 10px; }
.bankstats > div { background: linear-gradient(180deg, #f3fbf6, #e4f2ea); border: 1px solid #b9d8c6; border-radius: 10px; padding: 6px 8px; text-align: center; }
.bankstats b { display: block; font-size: 18px; color: #2f5d4a; }
.bankstats span { font-size: 11px; color: #5b6b62; }
.bankhow { background: #fffaf0; border: 1px solid #e8d9a8; border-left: 4px solid #e2b640; border-radius: 10px; padding: 6px 10px; margin-bottom: 8px; }
.bankhow ol { margin: 4px 0; padding-left: 18px; } .bankhow li { margin-bottom: 4px; }
.mandate { border: 1px solid #b9d8c6; border-radius: 10px; padding: 8px 10px; background: #f8fcf9; }
.mandate.locked { background: #f7f3ea; border-color: #ddd0b4; }
.mandate .bar { height: 7px; background: #e9e1cf; border-radius: 4px; overflow: hidden; margin: 2px 0 8px; } .mandate .bar i { display: block; height: 100%; background: linear-gradient(90deg, #e2b640, #2f6b4f); }
.mandate .row { flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.bankpicks { padding-left: 4px; list-style: none; } .bankpicks li { margin-bottom: 3px; }
.pick { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; padding: 1px 6px; border-radius: 8px; background: #eee; }
.pick-buy { background: #dff3e6; color: #2f6b4f; } .pick-sell { background: #fbecd0; color: #8a5a10; } .pick-hold { background: #e6ecf6; color: #3b5680; } .pick-avoid { background: #f6e1dc; color: #8a2f18; }
.banklog { padding-left: 16px; } .banklog li { margin-bottom: 2px; }
.goldglow { animation: goldpulse 2.4s ease-in-out infinite; } @keyframes goldpulse { 50% { opacity: .38; } }
.bankseal.citysign { background: radial-gradient(circle at 35% 30%, #fff3c4, #f0b43a 60%, #c0392b); font-size: 22px; box-shadow: 0 0 0 3px #6f7378; }
.banktable { width: 100%; border-collapse: collapse; margin-top: 4px; } .banktable th { text-align: left; font-weight: 600; color: #5b6b62; border-bottom: 1px solid #d9e6dd; } .banktable td { border-bottom: 1px solid #eef3ef; padding: 2px 4px; vertical-align: top; } .banktable tr.me td { background: #f3fbf6; font-weight: 600; }
/* a long card scrolls: room at the bottom, and a soft fade that shows there is more below */
.map-card { padding-bottom: 22px; }
.map-card::after { content: ''; position: sticky; display: block; bottom: -22px; height: 28px; margin: 0 -16px -22px; background: linear-gradient(rgba(255,250,242,0), rgba(255,250,242,.95)); pointer-events: none; }
/* a phone: a card over the map (the exchange) gets most of the screen, not the 440px strip */
@media (max-width: 700px) { .view.card-on { height: calc(100vh - 110px); min-height: 520px; } }

/* a NEAR wallet already linked: shown in the row with the other wallets, as a done button */
.signin-row .keep-linked { opacity: 1; background: #eaf6ea; border-color: #7bb77b; color: #2e6b3a; font-weight: 600; cursor: default; }

/* the wallet menu under the top-bar button */
.wallet-menu { position: fixed; z-index: 60; width: 320px; background: #fffaf2; color: #3a2e22; border: 1px solid rgba(120,90,60,.3); border-radius: 14px; box-shadow: 0 12px 32px rgba(40,25,10,.25); padding: 12px 14px; }
.wallet-menu .wm-title { margin: 0 0 8px; font-weight: 700; }
.wallet-menu .wm-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid rgba(120,90,60,.15); }
.wallet-menu .wm-icon { width: 28px; height: 28px; border-radius: 50%; background: #f1e6d4; display: grid; place-items: center; font-weight: 700; }
.wallet-menu .wm-name { flex: 1; display: flex; flex-direction: column; line-height: 1.25; }
.wallet-menu .wm-go { background: #e8642c; color: #fff; border: 0; border-radius: 999px; padding: 5px 12px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.wallet-menu .wm-go:disabled { opacity: .5; }
.wallet-menu .wm-done { color: #2e8b57; font-weight: 700; font-size: 18px; }
.wallet-menu .wm-more { background: none; border: 0; color: #b5501e; font: inherit; font-size: 13px; padding: 0; cursor: pointer; text-decoration: underline; }
.wallet-menu .wm-un { background: none; border: 1px solid rgba(120,90,60,.35); color: #7a5236; border-radius: 999px; padding: 4px 10px; font: inherit; font-size: 12px; cursor: pointer; }
.wallet-menu .wm-un:hover { border-color: #b23a2e; color: #b23a2e; }
.wallet-menu .wm-confirm { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.wallet-menu .wm-red { background: #b23a2e; }
.bankstats small { display: block; font-size: 10.5px; line-height: 1.2; margin-top: 2px; }