/* seam. village: a retro RPG HUD around the map. */
:root{
 --bg:#202226;--bg2:#1a1c1f;--panel:#292c31;--panel2:#33373d;--edge:#4b5058;--edge2:#40444b;--ink:#121315;
 --text:#f3f2ec;--muted:#abb0b9;--soft:#d9d8d2;
 --accent:#EC2347;--accent2:#ff5b78;--gold:#f2c14e;--gold2:#ffe08a;--good:#5fd38d;--sky:#8fb8ff;
 --pixel:"Press Start 2P",ui-monospace,monospace;
 --body:"Pixelify Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
 --step:polygon(0 4px,4px 4px,4px 0,calc(100% - 4px) 0,calc(100% - 4px) 4px,100% 4px,100% calc(100% - 4px),calc(100% - 4px) calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,4px calc(100% - 4px),0 calc(100% - 4px));
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{color:var(--text);font:15px/1.4 var(--body);display:flex;flex-direction:column;min-height:100vh;
 background:var(--bg)}
button{font:inherit;color:inherit;cursor:pointer}
[hidden]{display:none!important}
a{color:var(--sky)}
::selection{background:var(--accent);color:#fff}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:var(--bg2)}
::-webkit-scrollbar-thumb{background:var(--edge);border:2px solid var(--bg2)}

/* chunky pixel panel: dark outline, bright inner bevel, stepped corners */
.px,.card,.stat,.btn,.pill,.tip,.toast,.tracker,.paused{clip-path:var(--step)}

/* ---------- header HUD ---------- */
.bar{display:flex;align-items:center;gap:18px;padding:10px 16px;background:linear-gradient(#25272c,#1d1f23);
 border-bottom:4px solid var(--ink);box-shadow:0 2px 0 var(--edge2),0 6px 20px rgba(0,0,0,.4);flex-wrap:wrap;position:relative;z-index:2}
.brand{display:flex;align-items:center;gap:10px}
.logo{width:44px;height:44px;filter:drop-shadow(0 3px 0 #000)}
.title{font:16px var(--pixel);letter-spacing:.5px;white-space:nowrap;text-shadow:2px 2px 0 #000}
.title .dot{color:var(--accent)}
.title .sub{color:var(--gold);font-size:11px}
.tagline{font-size:13px;color:var(--muted);margin-top:4px}
.stats{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.stat{display:flex;gap:8px;align-items:center;background:var(--panel);padding:7px 11px;
 box-shadow:inset 0 0 0 2px var(--ink),inset 0 0 0 4px var(--edge2),inset 0 -6px 0 rgba(0,0,0,.25)}
.stat .k{font:7px var(--pixel);color:var(--muted)}
.stat .v{font:12px var(--pixel);color:var(--text);text-shadow:1px 1px 0 #000}
.stat.gold .v{color:var(--gold);text-shadow:1px 1px 0 #6b4a0c}
.stat .v.bump{animation:bump .6s steps(3)}
@keyframes bump{50%{transform:translateY(-3px);color:#fff}}
.ico{width:16px;height:16px;image-rendering:pixelated;shape-rendering:crispEdges;flex:none}
.hint{font-size:13px;color:var(--muted)}
.right{margin-left:auto;display:flex;gap:10px;align-items:center}
.pill{font:7px var(--pixel);padding:8px 9px;background:#3a2a10;color:var(--gold);box-shadow:inset 0 0 0 2px #6b4f1c}
.clock{font:10px var(--pixel);color:var(--soft);min-width:84px;text-align:right;white-space:nowrap}
#sky{font-size:12px}
.conn{width:12px;height:12px;background:#555;box-shadow:inset 0 0 0 2px rgba(0,0,0,.4)}
.conn.on{background:var(--good);animation:blink 2.4s steps(2) infinite}
.conn.off{background:var(--accent)}
@keyframes blink{50%{opacity:.55}}

/* buttons: raised pixel blocks that press down */
.btn{background:linear-gradient(#383c43,#2e3137);border:0;padding:9px 13px 11px;font:8px var(--pixel);color:var(--text);
 box-shadow:inset 0 0 0 2px var(--ink),inset 0 2px 0 2px #50555e,inset 0 -4px 0 2px #1e2024;text-shadow:1px 1px 0 #000;transition:transform .05s}
.btn:hover{filter:brightness(1.18)}
.btn:active{transform:translateY(2px);box-shadow:inset 0 0 0 2px var(--ink),inset 0 4px 0 2px #1e2024}
.btn:disabled{opacity:.5;cursor:default;filter:none}
.btn.primary{background:linear-gradient(#ff3d5f,#c8173a);box-shadow:inset 0 0 0 2px var(--ink),inset 0 2px 0 2px #ff8098,inset 0 -4px 0 2px #8a0f28}
.btn:focus-visible,.tabs button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* ---------- layout ---------- */
.layout{flex:1;display:flex;min-height:0;gap:0}
.world{position:relative;flex:1;min-width:0;overflow:hidden;
 background:radial-gradient(circle at 50% 50%,#16220f 0%,#0a0e08 70%),#0a0e08}
.world::after{content:"";position:absolute;inset:0;pointer-events:none;
 box-shadow:inset 0 0 0 4px var(--ink),inset 0 0 0 8px #3a2a1a,inset 0 0 0 10px #6b4c2e,inset 0 0 0 12px #3a2a1a,inset 0 0 0 14px var(--ink)}
.world canvas{display:block;image-rendering:pixelated;touch-action:manipulation}
.vignette{position:absolute;inset:14px;pointer-events:none;box-shadow:inset 0 0 80px rgba(0,0,0,.5)}

/* quest tracker over the map */
.tracker{position:absolute;top:20px;left:20px;max-width:min(300px,45%);background:rgba(32,34,38,.92);padding:10px 12px 8px;
 box-shadow:inset 0 0 0 2px var(--ink),inset 0 0 0 4px var(--edge);backdrop-filter:blur(2px)}
.tracker:empty{display:none}
.tracker h4{margin:0 0 6px;font:7px var(--pixel);color:var(--gold);letter-spacing:1px;cursor:pointer;user-select:none}
.tracker h4:only-child{margin:0}
.tracker button{display:flex;gap:8px;align-items:baseline;width:100%;text-align:left;background:none;border:0;padding:3px 0;font-size:14px;color:var(--soft)}
.tracker button:hover{color:#fff}
.tracker .mark{font:8px var(--pixel);width:12px;flex:none;color:var(--gold)}
.tracker .ok .mark{color:var(--good)}
.tracker .bad .mark{color:var(--accent2)}

/* pop-up alerts */
.toasts{position:absolute;top:20px;right:20px;display:flex;flex-direction:column;gap:8px;align-items:flex-end;pointer-events:none;max-width:min(380px,60%)}
.toast{display:flex;gap:10px;align-items:center;background:#f3e6d3;color:#1b1a1f;padding:9px 12px 9px 9px;pointer-events:auto;cursor:pointer;
 box-shadow:inset 0 0 0 2px var(--ink),inset 0 -4px 0 2px #cdb894;animation:toastIn .35s steps(4)}
.toast img{width:28px;image-rendering:pixelated}
.toast b{display:block;font:7px var(--pixel);margin-bottom:3px}
.toast span{font-size:14px;line-height:1.25}
.toast.important{background:#ffe9a8;box-shadow:inset 0 0 0 2px var(--ink),inset 0 -4px 0 2px #d9a93a}
.toast.out{animation:toastOut .3s steps(3) forwards}
@keyframes toastIn{from{transform:translateX(120%)}}
@keyframes toastOut{to{transform:translateX(120%);opacity:0}}

.tip{position:absolute;pointer-events:none;background:var(--panel2);padding:7px 9px;font:8px var(--pixel);white-space:nowrap;transform:translate(14px,14px);
 box-shadow:inset 0 0 0 2px var(--ink),inset 0 0 0 4px var(--gold)}
/* login page and iPhone safe areas */
.login-page{display:grid;place-items:center;padding:16px}
.login{width:min(360px,100%);display:flex;flex-direction:column;gap:10px;align-items:stretch;text-align:center}
.login .logo{width:64px;height:64px;margin:0 auto}
.login h1{font:16px var(--pixel);margin:0 0 10px}
.login h1 .dot{color:var(--accent)}
.login label{font:8px var(--pixel);color:var(--muted);text-align:left}
.login input{background:var(--bg2);border:0;color:var(--text);padding:12px;font:16px var(--body);box-shadow:inset 0 0 0 2px var(--ink),inset 0 0 0 4px var(--edge2)}
.login input:focus{outline:none;box-shadow:inset 0 0 0 2px var(--ink),inset 0 0 0 4px var(--gold)}
@supports(padding:env(safe-area-inset-top)){.bar{padding-top:max(10px,env(safe-area-inset-top))}.side{padding-bottom:env(safe-area-inset-bottom)}}
.credit{position:absolute;right:20px;bottom:18px;font-size:11px;color:rgba(255,255,255,.55);text-decoration:none;background:rgba(0,0,0,.35);padding:2px 6px}
.credit:hover{color:#fff}
.paused{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);background:var(--accent);color:#fff;font:10px var(--pixel);padding:11px 15px;
 box-shadow:inset 0 0 0 2px var(--ink),inset 0 -4px 0 2px #8a0f28;animation:blink 1.6s steps(2) infinite}

/* ---------- side panel ---------- */
.side{width:380px;flex:none;display:flex;flex-direction:column;min-height:0;background:var(--bg);border-left:4px solid var(--ink);box-shadow:inset 2px 0 0 var(--edge2)}
.tabs{display:flex;gap:6px;padding:10px 10px 0;border-bottom:4px solid var(--ink);background:#1d1f23}
.tabs button{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;background:#292c31;border:0;padding:11px 6px 10px;font:8px var(--pixel);color:var(--muted);
 clip-path:polygon(0 4px,4px 4px,4px 0,calc(100% - 4px) 0,calc(100% - 4px) 4px,100% 4px,100% 100%,0 100%);box-shadow:inset 0 0 0 2px var(--ink)}
.tabs button:hover{color:var(--text)}
.tabs button.on{background:var(--panel2);color:var(--gold);box-shadow:inset 0 0 0 2px var(--ink),inset 0 4px 0 2px var(--accent)}
.badge{display:inline-block;background:var(--accent);color:#fff;padding:3px 5px;font:7px var(--pixel);box-shadow:inset 0 -2px 0 #8a0f28}
.pane{flex:1;overflow:auto;padding:12px;min-height:0}
.note{margin:0 0 12px;color:var(--muted);font-size:14px}

/* feed: portrait + speech */
.feed{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.feed li{display:grid;grid-template-columns:34px 1fr;gap:10px;padding:8px 10px 9px 8px;background:rgba(255,255,255,.025);border-left:3px solid transparent}
.feed li.new{animation:flash 1.4s ease-out}
@keyframes flash{from{background:rgba(242,193,78,.18)}to{background:rgba(255,255,255,.025)}}
.feed li.important{border-left-color:var(--gold);background:rgba(242,193,78,.07)}
.feed .avatar{width:34px;height:auto;image-rendering:pixelated;margin-top:2px;filter:drop-shadow(0 2px 0 #000)}
.feed .avatar.blank{height:34px;background:var(--edge2)}
.feed .line1{display:flex;gap:6px;align-items:baseline;flex-wrap:wrap}
.who{font-weight:600}
.feed .to{color:var(--muted);font-size:13px}
.feed time{margin-left:auto;font:7px var(--pixel);color:#7d828a}
.feed p{margin:3px 0 0;color:var(--soft);font-size:14px;line-height:1.35}

/* cards */
.card{background:var(--panel);padding:13px 14px;margin-bottom:12px;box-shadow:inset 0 0 0 2px var(--ink),inset 0 0 0 4px var(--edge2)}
.card h3{margin:0 0 4px;font-size:16px}
.card .meta{font-size:13px;color:var(--muted);margin-bottom:8px}
.card pre{white-space:pre-wrap;font:14px/1.5 var(--body);margin:0 0 10px;color:var(--soft)}
.card .actions{display:flex;gap:8px;flex-wrap:wrap}
.card.done{opacity:.55}
.state{font:7px var(--pixel);padding:3px 5px;box-shadow:inset 0 0 0 1px currentColor}
.state.approved{color:var(--good)}
.state.rejected{color:var(--muted)}
.section-title{font:8px var(--pixel);color:var(--gold);margin:18px 0 10px;display:flex;align-items:center;gap:8px}
.section-title::after{content:"";flex:1;height:2px;background:repeating-linear-gradient(90deg,var(--edge) 0 4px,transparent 4px 8px)}
.empty{color:var(--muted);text-align:center;padding:30px 10px;font-size:14px}

/* the Mayor's brief: a royal decree */
.brief{background:linear-gradient(#2e2427,#25201f);box-shadow:inset 0 0 0 2px var(--ink),inset 0 0 0 4px #7a2a3a,inset 0 0 0 6px #3a1a24}
.brief .head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px}
.brief h3{font:9px var(--pixel);color:var(--gold);text-shadow:1px 1px 0 #000}
.brief pre{margin-bottom:8px;color:var(--text)}
.brief .by{font-size:12px;color:var(--muted);margin-bottom:10px}
.brief.collapsed pre,.brief.collapsed .by,.brief.collapsed .actions{display:none}
.linkish{background:none;border:0;color:var(--muted);font:7px var(--pixel);padding:0}
.linkish:hover{color:var(--text)}

/* Mailbox: parchment letters with a wax seal */
#mail .card{background:linear-gradient(#f4e8cf,#e8d6b0);color:#2a2018;box-shadow:inset 0 0 0 2px var(--ink),inset 0 0 0 4px #c9b07c,inset 0 -6px 0 2px #d4bd8c;position:relative;padding-right:40px}
#mail .card::after{content:"";position:absolute;top:12px;right:12px;width:18px;height:18px;background:var(--accent);
 clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%);box-shadow:inset -3px -3px 0 #8a0f28}
#mail .card.done::after{background:#8a8170;box-shadow:none}
#mail .card h3{color:#2a1a10}
#mail .card .meta{color:#6b5a44}
#mail .card pre{color:#2a2018}
#mail .card a.ext{color:#1f5bb8}
#mail .card .state.rejected{color:#6b5a44}
#mail .card .state.approved{color:#1e7a44}

/* daily income */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
.tile{background:var(--bg2);padding:9px 10px;clip-path:var(--step);box-shadow:inset 0 0 0 2px var(--ink),inset 0 0 0 4px var(--edge2)}
.tile span{display:block;font:7px var(--pixel);color:var(--muted);margin-bottom:6px}
.tile b{display:block;font:12px var(--pixel);color:var(--gold);text-shadow:1px 1px 0 #000}
.tile small{display:block;font-size:12px;color:var(--muted);margin-top:4px}
.tile.down b{color:var(--accent2)}
.tile.up small{color:var(--good)}
.tile.down small{color:var(--accent2)}
.bars{display:flex;align-items:flex-end;gap:4px;height:90px;padding:6px 6px 0;background:var(--bg2);clip-path:var(--step);box-shadow:inset 0 0 0 2px var(--ink)}
.ibar{flex:1;min-width:0;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:3px}
.ibar i{display:block;width:100%;background:linear-gradient(#f2c14e,#b8862a);box-shadow:inset 0 -2px 0 #6b4a0c}
.ibar.today i{background:linear-gradient(#ff5b78,#c8173a);box-shadow:inset 0 -2px 0 #8a0f28}
.ibar span{font:6px var(--pixel);color:var(--muted);height:10px;overflow:hidden}

/* profit */
.profit .numbers tr.total td{border-bottom:0;padding-top:8px;font-weight:600;color:var(--text)}
.profit .numbers tr.total td:last-child{color:var(--good);font:11px var(--pixel)}
.tile.parents b{color:#ff9fb4}
.costs{margin:8px 0 14px;font-size:14px}
.costs summary{cursor:pointer;color:var(--sky);font-size:13px;margin-bottom:8px}
.cost{display:grid;grid-template-columns:1fr auto 110px;gap:8px;align-items:center;margin:6px 0;font-size:14px;color:var(--soft)}
.cost .unit{font-size:12px;color:var(--muted)}
.cost input,.cost select{background:var(--bg2);border:0;color:var(--text);padding:7px 8px;font:14px var(--body);box-shadow:inset 0 0 0 2px var(--edge2);width:100%}
.cost input:focus,.cost select:focus{outline:none;box-shadow:inset 0 0 0 2px var(--gold)}

/* the brief: a readable morning report */
.brief .hello{font-size:15px;color:var(--text);margin:0 0 10px}
.brief .needs{display:flex;flex-direction:column;gap:6px;margin:6px 0 10px}
.brief .needs button{display:flex;gap:10px;align-items:flex-start;text-align:left;background:var(--bg2);border:0;padding:9px 10px;font-size:14px;line-height:1.35;color:var(--soft);clip-path:var(--step);box-shadow:inset 0 0 0 2px var(--ink)}
.brief .needs button:hover{color:#fff;box-shadow:inset 0 0 0 2px var(--ink),inset 0 0 0 4px var(--accent)}
.brief .needs .mark{font:9px var(--pixel);color:var(--gold);padding-top:2px;flex:none;width:14px}
.brief .clear{font-size:14px;color:var(--good);margin:4px 0 10px}
.brief .say{font-size:14px;line-height:1.5;color:var(--soft);background:var(--bg2);padding:10px;margin:0 0 10px;border-left:3px solid var(--gold)}
.brief .also{font-size:13px;color:var(--muted)}
.brief .also ul{margin:6px 0 0;padding-left:16px}
.brief .also li{margin:3px 0}

/* Ideas board */
.idea-head{display:flex;gap:10px;align-items:center;margin-bottom:6px}
.idea-head .avatar{width:34px;image-rendering:pixelated;filter:drop-shadow(0 2px 0 #000)}
.idea-head h3{margin:0}
.idea-head .meta{margin:2px 0 0}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0}
.chip{font:7px var(--pixel);padding:4px 6px;background:#33373d;color:var(--soft)}
.idea p{margin:6px 0;font-size:14px;color:var(--soft)}
.idea details{margin:6px 0 10px;font-size:14px}
.idea summary{cursor:pointer;color:var(--sky);font-size:13px}
.idea .files{display:flex;flex-wrap:wrap;gap:6px}
.idea code{font-size:12px;background:var(--bg2);padding:2px 5px;color:var(--gold)}
.idea .report pre{background:var(--bg2);padding:8px;font-size:13px}
.tabs button{font-size:7px;gap:5px;padding-left:4px;padding-right:4px}

/* villagers: character sheets */
.folk{display:grid;grid-template-columns:52px 1fr;gap:12px;align-items:start;cursor:pointer;transition:transform .08s}
.folk:hover{transform:translateX(3px)}
.folk:hover,.folk.sel{box-shadow:inset 0 0 0 2px var(--ink),inset 0 0 0 4px var(--accent)}
.folk img{width:52px;height:auto;image-rendering:pixelated;filter:drop-shadow(0 3px 0 #000)}
.folk .bld{font-size:13px;color:var(--muted)}
.folk .now{font-size:14px;margin-top:4px;color:var(--soft)}
.tag{display:inline-flex;align-items:center;gap:6px;font:7px var(--pixel);padding:4px 6px;background:#33373d;color:var(--gold);margin-top:7px}
.tag.live{background:#123522;color:#8af0b4}
.tag.live::before{content:"";width:6px;height:6px;background:#5fd38d;animation:blink 1.2s steps(2) infinite}
.detail p{margin:8px 0;font-size:15px;color:var(--soft)}
.detail dl{display:grid;grid-template-columns:auto 1fr;gap:5px 12px;font-size:14px;margin:10px 0}
.detail dt{color:var(--muted)}
.detail dd{margin:0}
.chat{margin-top:12px;border-top:2px dashed var(--edge2);padding-top:10px}
.chat .log{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
.chat .msg{padding:8px 10px;font-size:14px;max-width:90%;clip-path:var(--step)}
.chat .me{align-self:flex-end;background:#3b232c}
.chat .them{align-self:flex-start;background:#33373d}
.chat form{display:flex;gap:6px}
.chat input{flex:1;min-width:0;background:var(--bg2);border:0;color:var(--text);padding:10px;font:14px var(--body);box-shadow:inset 0 0 0 2px var(--ink),inset 0 0 0 4px var(--edge2)}
.chat input:focus{outline:none;box-shadow:inset 0 0 0 2px var(--ink),inset 0 0 0 4px var(--gold)}
.back{background:none;border:0;color:var(--muted);font:8px var(--pixel);padding:0 0 12px}
.back:hover{color:var(--text)}
.plot{box-shadow:inset 0 0 0 2px var(--ink),inset 0 0 0 4px #5c4128}
.numbers{width:100%;border-collapse:collapse;font-size:14px;margin:8px 0}
.numbers td{padding:6px 0;border-bottom:2px dotted var(--edge2);vertical-align:top}
.numbers td:last-child{text-align:right;color:var(--gold);font-variant-numeric:tabular-nums;padding-left:8px}
.numbers .bld{font-size:12px;color:var(--muted);margin-top:2px}
.setup{font-size:14px;color:var(--soft);background:var(--bg2);padding:10px;margin:10px 0;clip-path:var(--step);box-shadow:inset 0 0 0 2px var(--ink),inset 0 0 0 4px #5a4a1a}
.setup code{color:var(--gold);font-size:13px}
a.ext{color:var(--sky);text-decoration:none;border-bottom:1px dotted currentColor}
a.ext:hover{color:#fff}

@media (max-width:1500px){
 .hint{display:none}
 .bar{gap:12px}
 .stats{gap:8px}
}
@media (max-width:900px){
 .layout{flex-direction:column}
 .world{flex:none;height:min(78vw,72vh)}
 .side{width:auto;border-left:0;border-top:4px solid var(--ink)}
 .hint,.tagline{display:none}
 .tracker{font-size:12px;max-width:55%}
}
@media (max-width:560px){
 .bar{gap:8px;padding:8px 10px}
 .logo{width:34px;height:34px}
 .right{margin-left:0;width:100%;justify-content:space-between}
 .stats{gap:6px}
 .stat{padding:5px 7px;gap:5px}
 .stat .v{font-size:10px}
 .tracker{top:16px;left:16px;padding:7px 9px 5px}
 .tracker button{font-size:12px}
 .toasts{top:auto;bottom:16px;right:16px;max-width:80%}
 .paused{font-size:8px;padding:7px 9px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}