/* Chương IV · Chợ Làng Chuột: top bar (money, day and hour, stock), end-of-day tally, upgrade sheet */
#c4hud{position:fixed;left:0;right:0;top:0;display:flex;justify-content:space-between;align-items:flex-start;gap:8px;padding:calc(12px + env(safe-area-inset-top,0px)) 16px 0;z-index:4;pointer-events:none}
#c4hud .tag{font-family:var(--display);font-weight:900;font-size:14px;color:var(--ink);white-space:nowrap}
#c4hud button.tag{pointer-events:auto;cursor:pointer}
#c4hud .right{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
#c4hud .mid{position:absolute;left:50%;transform:translateX(-50%);top:calc(12px + env(safe-area-inset-top,0px))}
#c4hud .debt{background:var(--son);color:var(--diep)}
#c4Money{font-size:16px}
body.touch #c4hud .mid{position:static;transform:none}
@media (max-width:520px){#c4hud{flex-wrap:wrap}#c4hud .mid{position:static;transform:none;order:3;width:100%;display:flex;justify-content:center}}
.c4sheet{position:fixed;inset:0;z-index:6;display:flex;align-items:safe center;justify-content:center;padding:16px;box-sizing:border-box;background:rgba(29,25,21,.35);overflow-y:auto}
.c4sheet .card4{max-width:420px;width:100%;background:var(--diep);border:3px solid var(--ink);box-shadow:5px 5px 0 rgba(29,25,21,.35);padding:16px 18px;text-align:center;font-family:var(--body)}
.card4 h3{margin:0 0 10px;font-family:var(--display);font-weight:900;font-size:22px}
.card4 .nums{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px}
.card4 .nums div{border:2px solid var(--ink);padding:8px 4px;background:#f6f0e2;display:flex;flex-direction:column;gap:2px}
.card4 .nums b{font-family:var(--display);font-weight:900;font-size:16px}
.card4 .nums span{font-size:12px;opacity:.8}
.card4 .nums .gain{background:#e3ecd0}
.card4 p{margin:6px 0;font-size:15px;line-height:1.45}
.card4 .nx{font-size:16px}
.card4 .now{opacity:.75}
.card4 .row{display:flex;gap:10px;justify-content:center;margin-top:12px;flex-wrap:wrap}
.card4 .btn[disabled]{opacity:.45;cursor:not-allowed}
#c4day .btn{margin-top:10px}
.card4 h4{margin:12px 0 6px;font-family:var(--display);font-weight:900;font-size:16px}
.card4 .wx{font-size:16px}
.card4 .goal{background:rgba(47,106,76,.12);border:2px solid #2f6a4c;padding:6px 10px;margin:8px 0}
.card4 .ware{border-top:1.5px dashed rgba(29,25,21,.3);padding-top:6px;margin-top:6px}
.card4 .ware h5{margin:0 0 4px;font-size:15px}
.card4 .ware .step{margin:2px 0}
.card4 .ware .cost{margin:2px 0 4px;font-size:13px}
.card4 .money{border:2px solid var(--ink);background:#f6f0e2;padding:6px 8px;margin:8px 0;text-align:left}
.card4 .money h4{margin:0 0 4px}
.card4 .loan{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:14px;margin:4px 0}
.card4 .loan .btn{padding:4px 12px;font-size:14px}
.card4 .borrow{gap:6px;margin-top:6px}
.card4 .borrow .btn{font-size:14px;padding:7px 8px}
.card4 .tot{margin:10px 0 8px;font-size:15px}
.card4 .go{width:100%}
.card4 .back{background:#e3ecd0;border:2px solid var(--ink);padding:6px 8px}
.card4 .heard{text-align:left;border-top:2px dashed var(--ink);margin-top:8px;padding-top:6px}
.card4 .heard p{margin:3px 0}
.card4 .hint{font-size:13px;opacity:.75;margin:0 0 6px}
.card4 .step{display:flex;align-items:center;justify-content:center;gap:12px}
.card4 .step .btn{padding:6px 12px;font-size:16px}
.card4 .step .q{font-family:var(--display);font-weight:900;font-size:20px;min-width:5.5em}
.card4 .cost{font-size:14px;margin:6px 0 8px}
.card4 .row.col{flex-direction:column;align-items:stretch}
.card4 .bad{color:var(--son);font-weight:600}
.card4 .nums .loss{background:#f2d6cf}
#c4noteB{text-align:left}
.c4tabs{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-bottom:6px}
.c4tabs button{font-family:var(--display);font-weight:900;font-size:14px;padding:5px 8px;border:2px solid var(--ink);background:#f6f0e2;color:var(--ink);cursor:pointer}
.c4tabs button.on{background:var(--son);color:var(--diep)}
#c4noteB .cnt{text-align:center;font-size:13px;opacity:.75;margin:0 0 6px}
.card4 .folk{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.card4 .fk{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;border:2px solid rgba(29,25,21,.35);background:#f6f0e2;font-family:var(--body);color:var(--ink);cursor:pointer;min-width:0}
.card4 .fk img{width:52px;height:52px}
.card4 .fk b{font-size:13px;line-height:1.2;text-align:center}
.card4 .fk span{font-size:11px;opacity:.75}
.card4 .fk .bar{width:80%}
.card4 .bar{display:inline-block;width:110px;height:7px;border:1.5px solid var(--ink);background:#fff;vertical-align:middle}
.card4 .bar i{display:block;height:100%}
.card4 .house{border-top:1.5px dashed rgba(29,25,21,.3);padding:6px 0}
.card4 .house h5{margin:0 0 6px;font-size:14px}
.card4 .house h5 span{font-weight:400;opacity:.7}
.card4 .mem{display:flex;flex-wrap:wrap;gap:6px}
.card4 .fk.sm{width:76px}
.card4 .fk.sm img{width:40px;height:40px}
.card4 .fk.unk{cursor:default;opacity:.6}
.card4 .fk.unk i{width:40px;height:40px;border-radius:50%;background:#d9cdb2;display:grid;place-items:center;font-style:normal;font-weight:900}
.card4 .who{display:flex;gap:10px;align-items:center}
.card4 .who img{width:80px;height:80px}
.card4 .who h4{margin:0}
.card4 .who p{margin:2px 0;font-size:14px}
.card4 .ties{list-style:none;padding:0;margin:6px 0;font-size:14px}
.card4 .ties li{margin:3px 0}
.card4 .ties li>i{display:inline-block;width:14px;height:4px;margin-right:6px;vertical-align:middle}
.card4 .ties .unk{opacity:.6}
.card4 .bk{margin-bottom:8px}
.card4 svg.web{width:100%;height:auto;background:#fbf7ee;border:2px solid rgba(29,25,21,.25)}
.card4 svg.web text{font-family:var(--body);font-size:11px;fill:var(--ink)}
.card4 svg.web text.q{font-size:9px;opacity:.7}
.card4 svg.web .nd{cursor:pointer}
.card4 .story{border:2px solid rgba(29,25,21,.25);border-left:6px solid;padding:6px 8px;margin:8px 0;background:#fbf7ee}
.card4 .story h5{margin:0 0 4px;font-size:15px;display:flex;align-items:center;gap:6px}
.card4 .story .no{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;color:#fff;font-size:12px;flex:none}
.card4 .story .dots{margin-left:auto;display:flex;gap:3px}
.card4 .story .dots i{width:9px;height:9px;border-radius:50%;border:1.5px solid #c98a1c}
.card4 .story .dots i.on{background:#c98a1c}
.card4 .story p{font-size:14px;margin:3px 0}
.card4 .story p.unk{opacity:.5}
.card4 .ach{margin:8px 0}
.card4 .ach h5{margin:0 0 4px;font-size:15px;display:inline-block;background:#8a5a2a;color:var(--diep);padding:2px 12px}
.card4 .ach .a{display:grid;grid-template-columns:18px 1fr;column-gap:8px;align-items:center;padding:3px 0;opacity:.5}
.card4 .ach .a.on{opacity:1}
.card4 .ach .a i{grid-row:span 2;width:14px;height:14px;border-radius:50%;border:2px solid #8a5a2a}
.card4 .ach .a.on i{background:#8a5a2a}
.card4 .ach .a b{font-size:14px}
.card4 .ach .a span{font-size:12px}
.card4 .legend{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12px;margin:6px 0}
.card4 .legend i{display:inline-block;width:14px;height:4px;margin-right:4px;vertical-align:middle}
#c4noteB p{margin:4px 0}
#c4Note,#c4Invite{pointer-events:auto;cursor:pointer}
#c4Invite{background:#2f6a4c;color:var(--diep)}
#c4Note.new{background:var(--son);color:var(--diep)}
/* chương IV: notices (toast) at the bottom of the screen, where nothing covers them */
body.c4 #toast{top:auto;bottom:calc(28px + env(safe-area-inset-bottom,0px))}
.card4 .pick{border:2px solid #2f6a4c;background:#e3ecd0;padding:6px 8px;margin:6px 0}
.card4 .pick p{margin:2px 0 6px;font-size:14px}
.card4 .pick .row{margin-top:4px;flex-wrap:nowrap}
.card4 .pick .btn{font-size:15px;padding:6px 12px}
.card4 .fk.sel{border-color:#2f6a4c;background:#d6e6c4;box-shadow:inset 0 0 0 2px #2f6a4c}
.card4 .fk[disabled]{opacity:.45;cursor:default}
.card4 .fk.unk2{cursor:default;opacity:.65}
.card4 .loan .pays{display:flex;gap:6px}
.card4 .loan .btn{white-space:nowrap}