*{box-sizing:border-box}
body{margin:0;overflow:hidden;background:#cfe3d8;font:13px/1.35 system-ui,sans-serif;color:#f6efe2}
#c{position:fixed;inset:0;width:100%;height:100%;touch-action:none}
/* light vignette + faint paper grain over the 3D view (cheap: pure CSS, no extra render pass) */
#vignette{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 45%,transparent 58%,rgba(40,30,10,.28) 100%)}
#grain{position:fixed;inset:0;pointer-events:none;opacity:.07;mix-blend-mode:multiply;background-size:180px 180px}
#labels{position:fixed;inset:0;pointer-events:none;overflow:hidden}

/* activity bubbles above villagers */
.bub{position:absolute;left:0;top:0;transform-origin:50% 100%;font-size:13px;line-height:1;padding:3px 5px 4px;border-radius:10px;
  background:#fffaf0e8;color:#2a2116;box-shadow:0 1px 3px #0003;white-space:nowrap;will-change:transform}
.bub:after{content:"";position:absolute;left:50%;bottom:-4px;margin-left:-4px;border:4px solid transparent;border-bottom:0;border-top-color:#fffaf0e8}
.bub.sel{background:#ffd75e;font-weight:700}.bub.sel:after{border-top-color:#ffd75e}
.bub.name{font-size:11px;padding:3px 7px}
.btag{position:absolute;left:0;top:0;font-size:11px;padding:2px 7px;border-radius:9px;background:#2c3e2bcc;color:#fff4dc;white-space:nowrap;will-change:transform}

#banner{position:fixed;top:36px;left:50%;transform:translateX(-50%);padding:3px 14px;border-radius:0 0 8px 8px;font-weight:700;letter-spacing:.04em;z-index:6;color:#fff;font-size:12px;box-shadow:0 2px 6px #0003}
#banner.rule{background:#b45309}#banner.random{background:#6b7280}#banner.laya{background:#15803d}#banner.laya.base{background:#b91c1c}
body.clean #banner{top:8px;border-radius:8px;opacity:.92}

#top{position:fixed;top:0;left:0;right:0;height:34px;background:linear-gradient(#2a2418e6,#2a2418c0);display:flex;gap:12px;align-items:center;padding:0 200px 0 14px;z-index:4;font-size:12px;white-space:nowrap;overflow:hidden}
#top .sp{flex:1}#clock{font-size:15px;font-weight:700}
#top .stats{color:#d9cdb4}#top b{color:#fff}
#corner{position:fixed;top:4px;right:10px;z-index:7;display:flex;gap:6px;align-items:center}
.round{width:38px;height:38px;border-radius:50%;font-size:17px;background:#3b3324d9;border:2px solid #fff3;color:#fff}
body.clean .hud{display:none!important}

.panel{position:fixed;background:#2a2418d9;border-radius:10px;padding:8px 10px;z-index:3;max-height:calc(100vh - 90px);overflow:auto;box-shadow:0 4px 18px #0003;backdrop-filter:blur(3px)}
#left{left:10px;top:66px;width:290px}#card{right:10px;top:66px;width:380px}
details{border-bottom:1px solid #ffffff14;padding:4px 0}details:last-child{border:0}
summary{cursor:pointer;font-weight:700;font-size:13px;padding:2px 0;list-style:none}summary::-webkit-details-marker{display:none}
summary:before{content:"▸ ";color:#e9b872}details[open]>summary:before{content:"▾ "}
h3{margin:4px 0;font-size:13px}small{font-weight:400;color:#bfb29a}
.row{display:flex;gap:6px;align-items:center;margin:5px 0;flex-wrap:wrap}
button,select{background:#4a3f2c;color:#f6efe2;border:1px solid #6d5d40;border-radius:6px;padding:3px 8px;cursor:pointer;font:inherit}
button.on{background:#c2702f;border-color:#f0a35e}
#card .x{float:right;padding:0 7px}
.note{color:#c9bca2;font-size:11px;margin:4px 0}#brainerr{color:#ff9b8a;font-size:11px}
#feed div{font-size:11px;padding:1px 0;cursor:pointer;color:#e2d8c4}#feed b{color:#fff}
.bar{height:8px;background:#ffffff1c;border-radius:4px;overflow:hidden;margin:2px 0}.bar i{display:block;height:100%}
.opt{margin:5px 0;padding:4px;border-radius:5px;background:#ffffff10;font-size:11px}.opt.pick{outline:1px solid #fbbf24;background:#fbbf2422}
.opt .bar{height:5px}.kv{display:flex;justify-content:space-between;gap:8px;font-size:11px;color:#d6cab2}
#wb .kv{font-size:12px}
[data-sp]{padding:3px 6px}