:root{
  --ink:#1b1f16; --panel:#2b3226; --panel2:#353e2e; --line:#56654a; --text:#f4efe2; --muted:#b9c2a8;
  --accent:#7cc46a; --accent2:#e8913a; --ok:#4c9a4a; --pix:"Silkscreen",ui-monospace,monospace; --ui:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#141710;color:var(--text);font:600 14px/1.4 var(--ui)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#view{position:fixed;inset:0;width:100%;height:100%;display:block;image-rendering:pixelated;cursor:pointer;touch-action:none}
[hidden]{display:none!important}

/* buttons */
.btn{background:var(--accent);color:var(--ink);border:0;border-radius:6px;padding:7px 14px;cursor:pointer;font-weight:800;box-shadow:0 3px 0 #4a8a3a,0 0 0 2px var(--ink);position:relative;top:0}
.btn:active{top:2px;box-shadow:0 1px 0 #4a8a3a,0 0 0 2px var(--ink)}
.btn.small{padding:4px 10px;font-size:12.5px}
.btn.big{padding:10px 18px;font-size:16px;width:100%}
.btn.red{background:#e0675c;box-shadow:0 3px 0 #9a3a32,0 0 0 2px var(--ink)}
.btn.gray{background:#c4c9d6;box-shadow:0 3px 0 #8a90a0,0 0 0 2px var(--ink)}
.btn:disabled{opacity:.5;cursor:default}

/* gate */
.gate{position:fixed;inset:0;display:grid;place-items:center;background:linear-gradient(#6aa8d8,#f2c890 70%,#e8a860);z-index:50;padding:16px;overflow:auto}
#skyline{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated}
.gatebox{position:relative;width:min(420px,100%);background:var(--panel);border:3px solid var(--ink);border-radius:12px;box-shadow:0 8px 0 rgba(0,0,0,.35),inset 0 0 0 2px var(--line);padding:20px 22px}
.logo{margin:0;font:400 34px/1 var(--pix);letter-spacing:.02em;color:var(--accent);text-shadow:3px 3px 0 var(--ink)}
.logo span{color:var(--accent2)}
.tag{margin:8px 0 14px;color:var(--muted)}
.tabs{display:flex;gap:6px;margin-bottom:12px}
.tabs button,.seg button{flex:1;background:var(--panel2);border:2px solid var(--line);border-radius:6px;padding:6px;cursor:pointer;color:var(--muted)}
.tabs button[aria-pressed=true],.seg button[aria-pressed=true]{background:var(--accent);color:var(--ink);border-color:var(--ink)}
.gform{display:grid;gap:10px}
label{display:grid;gap:4px;font-size:12.5px;color:var(--muted)}
input,select,textarea{background:#171b13;border:2px solid var(--line);border-radius:6px;padding:7px 9px;color:var(--text);width:100%}
input:focus,select:focus,textarea:focus{border-color:var(--accent);outline:none}
.chk{display:flex;gap:8px;align-items:flex-start;color:var(--text)}
.chk input{width:auto;margin-top:2px}
.regrow{display:flex;gap:12px;align-items:center}
#reg-prev{background:radial-gradient(#3a4664,#232a3a);border:2px solid var(--line);border-radius:10px;image-rendering:pixelated;flex:none}
.regcol{display:grid;gap:8px;flex:1}
.seg{display:flex;gap:6px}
.fine{margin:0;font-size:12px;color:var(--muted)}
.gerr{color:#ff8a7a;min-height:1.2em;margin:10px 0 0}

/* bottom bar */
.bar{position:fixed;left:0;right:0;bottom:0;height:58px;display:flex;align-items:center;gap:4px;padding:6px 10px calc(6px + env(safe-area-inset-bottom));background:var(--panel);border-top:3px solid var(--ink);box-shadow:inset 0 2px 0 var(--line);z-index:20}
.tb{position:relative;display:flex;flex-direction:column;align-items:center;gap:1px;background:none;border:0;padding:2px 8px;border-radius:8px;cursor:pointer;color:var(--text);font-size:11px;font-weight:800}
.tb:hover{background:var(--panel2)}
.tb em{position:absolute;top:0;right:4px;background:var(--accent2);color:#fff;font-style:normal;font-size:10px;border-radius:9px;padding:0 5px;border:2px solid var(--ink)}
#me-icon{width:28px;height:28px;image-rendering:pixelated}
.ic{width:28px;height:28px;display:block;background:var(--ic) center/contain no-repeat;image-rendering:pixelated}
.ic-nav{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' shape-rendering='crispEdges'%3E%3Crect x='2' y='1' width='10' height='12' fill='%231d1720'/%3E%3Crect x='3' y='2' width='8' height='10' fill='%23e8c33c'/%3E%3Crect x='4' y='3' width='2' height='2' fill='%233f6fc4'/%3E%3Crect x='8' y='3' width='2' height='2' fill='%233f6fc4'/%3E%3Crect x='4' y='6' width='2' height='2' fill='%233f6fc4'/%3E%3Crect x='8' y='6' width='2' height='2' fill='%233f6fc4'/%3E%3Crect x='6' y='9' width='2' height='3' fill='%23c8443a'/%3E%3C/svg%3E")}
.ic-cat{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' shape-rendering='crispEdges'%3E%3Crect x='1' y='4' width='12' height='9' fill='%231d1720'/%3E%3Crect x='2' y='5' width='10' height='7' fill='%23c8443a'/%3E%3Crect x='3' y='2' width='8' height='3' fill='%231d1720'/%3E%3Crect x='4' y='3' width='6' height='2' fill='%23e8c33c'/%3E%3Crect x='6' y='5' width='2' height='7' fill='%23e8c33c'/%3E%3C/svg%3E")}
.ic-bag{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' shape-rendering='crispEdges'%3E%3Crect x='4' y='1' width='6' height='4' fill='%231d1720'/%3E%3Crect x='5' y='2' width='4' height='3' fill='%23262d3d'/%3E%3Crect x='1' y='4' width='12' height='9' fill='%231d1720'/%3E%3Crect x='2' y='5' width='10' height='7' fill='%239a6a3a'/%3E%3Crect x='2' y='7' width='10' height='1' fill='%237a4a2a'/%3E%3Crect x='6' y='6' width='2' height='3' fill='%23e8c33c'/%3E%3C/svg%3E")}
.ic-fr{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' shape-rendering='crispEdges'%3E%3Crect x='1' y='2' width='5' height='5' fill='%231d1720'/%3E%3Crect x='2' y='3' width='3' height='3' fill='%23f0c3a2'/%3E%3Crect x='0' y='8' width='7' height='5' fill='%231d1720'/%3E%3Crect x='1' y='9' width='5' height='4' fill='%233f6fc4'/%3E%3Crect x='8' y='2' width='5' height='5' fill='%231d1720'/%3E%3Crect x='9' y='3' width='3' height='3' fill='%23d9a07a'/%3E%3Crect x='7' y='8' width='7' height='5' fill='%231d1720'/%3E%3Crect x='8' y='9' width='5' height='4' fill='%23e07aa8'/%3E%3C/svg%3E")}
.ic-staff{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' shape-rendering='crispEdges'%3E%3Crect x='2' y='1' width='10' height='12' fill='%231d1720'/%3E%3Crect x='3' y='2' width='8' height='8' fill='%233f6fc4'/%3E%3Crect x='4' y='10' width='6' height='2' fill='%233f6fc4'/%3E%3Crect x='6' y='4' width='2' height='5' fill='%23e8c33c'/%3E%3Crect x='4' y='6' width='6' height='1' fill='%23e8c33c'/%3E%3C/svg%3E")}
.ic-coin{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' shape-rendering='crispEdges'%3E%3Crect x='2' y='0' width='6' height='10' fill='%231d1720'/%3E%3Crect x='0' y='2' width='10' height='6' fill='%231d1720'/%3E%3Crect x='2' y='1' width='6' height='8' fill='%23e8c33c'/%3E%3Crect x='1' y='2' width='8' height='6' fill='%23e8c33c'/%3E%3Crect x='4' y='3' width='2' height='4' fill='%23a8871c'/%3E%3C/svg%3E");width:18px;height:18px}
.chatform{flex:1;display:flex;align-items:center;gap:6px;min-width:120px;margin:0 6px}
.chatform input{height:36px;border-radius:18px;padding:6px 14px;background:#f3eee4;color:var(--ink);border:2px solid var(--ink)}
.chatform input::placeholder{color:#7a7a86}
.wto{background:#8a5cc4;color:#fff;border-radius:12px;padding:2px 8px;font-size:12px;white-space:nowrap;cursor:pointer;border:2px solid var(--ink)}
.coins{display:flex;align-items:center;gap:6px;background:var(--panel2);border:2px solid var(--ink);border-radius:16px;padding:4px 12px;font-weight:800}

/* room info & build bar */
.roominfo{position:fixed;left:10px;bottom:68px;background:rgba(43,50,38,.92);border:2px solid var(--ink);border-radius:10px;padding:8px 12px;max-width:min(320px,calc(100% - 20px));z-index:15}
.roominfo b{display:block;font-family:var(--pix);font-weight:400;font-size:14px;color:var(--accent)}
.roominfo span{display:block;color:var(--muted);font-size:12px}
.rib{display:flex;gap:8px;margin-top:6px;flex-wrap:wrap}
@media (max-width:700px){.roominfo span{display:none}.roominfo{padding:6px 8px}}
.buildbar{position:fixed;left:50%;top:12px;transform:translateX(-50%);display:flex;gap:8px;align-items:center;background:var(--panel);border:2px solid var(--ink);border-radius:10px;padding:6px 10px;z-index:25;max-width:calc(100% - 20px);flex-wrap:wrap}

/* chat bubbles */
#bubbles{position:fixed;left:0;right:0;top:0;height:60vh;pointer-events:none;z-index:10;overflow:hidden}
.bub{position:absolute;display:flex;align-items:center;gap:6px;max-width:min(440px,90vw);background:#fff;color:var(--ink);border:2px solid var(--ink);border-radius:9px;padding:3px 10px 3px 4px;font:600 13px/1.25 var(--ui);transition:top .35s ease;white-space:nowrap;box-shadow:0 2px 0 rgba(0,0,0,.25)}
.bub canvas{flex:none;image-rendering:pixelated}
.bub b{font-weight:800}
.bub span{overflow:hidden;text-overflow:ellipsis}
.bub::after{content:"";position:absolute;left:var(--tail,20px);bottom:-8px;border:6px solid transparent;border-top-color:var(--ink)}
.bub.shout{font-weight:800;font-size:15px}
.bub.whisper{background:#e9e1f7;font-style:italic}
.bub.me{background:#fff7d6}
.bub.sys{background:#d9eefa}

/* windows */
.win{position:fixed;background:var(--panel);border:3px solid var(--ink);border-radius:10px;box-shadow:0 6px 0 rgba(0,0,0,.35),inset 0 0 0 2px var(--line);display:flex;flex-direction:column;z-index:30;max-width:calc(100vw - 12px);max-height:calc(100vh - 76px)}
.wt{display:flex;align-items:center;gap:8px;padding:7px 8px 6px 12px;background:var(--panel2);border-bottom:2px solid var(--ink);border-radius:7px 7px 0 0;cursor:move;user-select:none;touch-action:none}
.wt h2{margin:0;flex:1;font:400 14px var(--pix);color:var(--accent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wx{width:24px;height:24px;border-radius:6px;border:2px solid var(--ink);background:var(--accent2);color:#fff;font-weight:800;cursor:pointer;line-height:1;padding:0}
.wb{padding:12px;overflow:auto;min-height:0}
.tabs2{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:10px}
.tabs2 button{background:var(--panel2);border:2px solid var(--line);border-radius:6px;padding:4px 10px;cursor:pointer;color:var(--muted);font-size:12.5px}
.tabs2 button[aria-pressed=true]{background:var(--accent);border-color:var(--ink);color:var(--ink)}
.list{display:grid;gap:6px;grid-template-columns:minmax(0,1fr)}
.row{display:flex;align-items:center;gap:10px;background:var(--panel2);border:2px solid var(--line);border-radius:8px;padding:6px 8px}
.row.click{cursor:pointer}.row.click:hover{border-color:var(--accent)}
.row .grow{flex:1;min-width:0}
.row .grow b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .grow small{display:block;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cnt{min-width:46px;text-align:center;border-radius:12px;padding:2px 6px;font-size:12px;font-weight:800;border:2px solid var(--ink);background:#7a8296;color:#fff}
.cnt.lo{background:var(--ok)}.cnt.mid{background:#e8a03c}.cnt.hi{background:var(--accent2)}
.lock{font-size:11px;color:var(--muted)}
.dot{width:10px;height:10px;border-radius:50%;background:#6a7088;border:2px solid var(--ink);flex:none}
.dot.on{background:#5ad05a}
.empty{color:var(--muted);text-align:center;padding:14px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:6px}
.cell{position:relative;background:var(--panel2);border:2px solid var(--line);border-radius:8px;padding:4px;cursor:pointer;text-align:center;font-size:11px;color:var(--muted)}
.cell:hover,.cell[aria-pressed=true]{border-color:var(--accent);color:var(--text)}
.cell canvas{display:block;margin:0 auto;width:64px;height:64px}
.cell em{position:absolute;top:2px;right:4px;font-style:normal;background:var(--accent);color:var(--ink);border-radius:8px;padding:0 5px;font-weight:800;border:1px solid var(--ink)}
.catw{display:grid;grid-template-columns:150px 1fr;gap:10px;min-height:0}
.cats{display:grid;gap:4px;align-content:start}
.cats button{text-align:left;background:var(--panel2);border:2px solid var(--line);border-radius:6px;padding:6px 8px;cursor:pointer;color:var(--muted)}
.cats button[aria-pressed=true]{background:var(--accent);color:var(--ink);border-color:var(--ink)}
.buy{display:flex;gap:12px;align-items:center;margin-top:10px;background:#1b2130;border:2px solid var(--line);border-radius:8px;padding:8px}
.buy canvas{width:96px;height:96px;flex:none}
.buy .grow{flex:1}
.buy b{display:block;font-size:15px}
.price{display:inline-flex;align-items:center;gap:4px;font-weight:800;color:var(--accent)}
.price .ic-coin{width:14px;height:14px}
.form2{display:grid;gap:8px}
.models{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.models button{background:var(--panel2);border:2px solid var(--line);border-radius:8px;padding:4px;cursor:pointer;color:var(--muted);font-size:11px}
.models button[aria-pressed=true]{border-color:var(--accent);color:var(--text)}
.models canvas{display:block;width:100%;height:auto}
.sw{display:flex;flex-wrap:wrap;gap:4px}
.sw button{width:26px;height:26px;border-radius:6px;border:2px solid var(--ink);cursor:pointer;padding:0}
.sw button[aria-pressed=true]{outline:3px solid var(--accent);outline-offset:1px}
.opts{display:flex;flex-wrap:wrap;gap:4px}
.opts button{background:var(--panel2);border:2px solid var(--line);border-radius:6px;padding:3px 9px;cursor:pointer;color:var(--muted);font-size:12px}
.opts button[aria-pressed=true]{background:var(--accent);color:var(--ink);border-color:var(--ink)}
.edit{display:grid;grid-template-columns:150px 1fr;gap:14px}
.edprev{background:radial-gradient(#3a4664,#1b2130);border:2px solid var(--line);border-radius:10px;display:grid;place-items:center;align-content:center;gap:8px;padding:8px}
.edprev canvas{image-rendering:pixelated}
.edsec{display:grid;gap:4px;margin-bottom:8px}
.edsec h3{margin:0;font-size:12px;color:var(--muted);font-weight:800}
.card{display:grid;grid-template-columns:96px 1fr;gap:12px;align-items:start}
.card .av{background:radial-gradient(#3a4664,#1b2130);border:2px solid var(--line);border-radius:10px;display:grid;place-items:center;height:132px}
.card h3{margin:0;font:400 15px var(--pix);color:var(--accent)}
.card .motto{color:var(--muted);font-style:italic;margin:2px 0 6px;word-break:break-word}
.btns{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.pmlog{height:220px;overflow:auto;background:#171b13;border:2px solid var(--line);border-radius:8px;padding:8px;display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
.pm{max-width:85%;padding:5px 9px;border-radius:9px;background:var(--panel2);word-wrap:break-word}
.pm.mine{align-self:flex-end;background:#3f6fc4}
.pm small{display:block;color:var(--muted);font-size:10.5px}
.pmf{display:flex;gap:6px}
.trade{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tside{background:#1b2130;border:2px solid var(--line);border-radius:8px;padding:8px;min-height:130px}
.tside h3{margin:0 0 6px;font-size:13px}
.tside.ok{border-color:#5ad05a}
.tstate{font-size:12px;color:var(--muted);margin-top:6px}
.tside.ok .tstate{color:#7ae07a}
.small-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:4px}
.small-grid .cell canvas{width:44px;height:44px}
.note{color:var(--muted);font-size:12px;margin:6px 0 0}
.itemmenu{position:fixed;z-index:40;background:var(--panel);border:2px solid var(--ink);border-radius:8px;padding:6px;display:grid;gap:4px;min-width:150px;box-shadow:0 4px 0 rgba(0,0,0,.3)}
.itemmenu b{font-size:12px;color:var(--accent);padding:2px 4px}
.itemmenu button{text-align:left;background:var(--panel2);border:2px solid var(--line);border-radius:6px;padding:4px 8px;cursor:pointer;color:var(--text);font-size:12.5px}
.itemmenu button:hover{border-color:var(--accent)}
.toast{position:fixed;left:50%;top:14px;transform:translate(-50%,calc(-100% - 30px));visibility:hidden;background:#fff7d6;color:var(--ink);border:2px solid var(--ink);border-radius:10px;padding:8px 14px;font-weight:800;z-index:60;transition:transform .25s;max-width:calc(100% - 24px);text-align:center}
.toast.show{transform:translate(-50%,0);visibility:visible}
.toast.err{background:#ffd9d4}
.offline{position:fixed;inset:0;background:rgba(10,12,18,.7);display:grid;place-items:center;z-index:70}
.offline>div{background:var(--panel);border:3px solid var(--ink);border-radius:12px;padding:18px 22px;text-align:center}
.alertwin{white-space:pre-wrap}

@media (max-width:700px){
  .tb span{display:none}
  .tb{padding:2px 4px}
  .bar{gap:2px;padding:6px 6px calc(6px + env(safe-area-inset-bottom))}
  #shout{display:none}
  .coins{padding:4px 8px}
  .catw,.edit{grid-template-columns:1fr}
  .cats{grid-template-columns:repeat(3,1fr)}
  .trade{grid-template-columns:1fr}
  .roominfo{bottom:66px}
}
@media (prefers-reduced-motion:reduce){.bub{transition:none}.toast{transition:none}}

/* needs (Sims-like) */
.needs{position:fixed;right:10px;top:10px;width:200px;background:rgba(43,50,38,.92);border:2px solid var(--ink);border-radius:10px;padding:8px 10px;z-index:15;display:grid;gap:5px}
.need{display:grid;grid-template-columns:58px 1fr;align-items:center;gap:6px;font-size:11.5px;font-weight:800}
.need i{display:block;height:10px;background:#171b13;border:2px solid var(--ink);border-radius:6px;overflow:hidden}
.need b{display:block;height:100%;transition:width .6s}
.need.low span{color:#ff9a8a}
.needs p{margin:2px 0 0;font-size:11px;color:var(--muted);line-height:1.3}
@media (max-width:700px){.needs{width:150px;top:auto;bottom:118px;right:6px;padding:6px 8px}.needs p{display:none}.need{grid-template-columns:48px 1fr;font-size:10px}}

/* simpler clicking: hover label, picture menus, quick bar */
.tip{position:fixed;z-index:45;pointer-events:none;background:rgba(27,31,22,.92);color:#fff;border-radius:6px;padding:3px 8px;font-size:12px;font-weight:800;white-space:nowrap}
.pick{display:grid;grid-template-columns:repeat(5,52px);gap:4px}
.pick button{display:grid;justify-items:center;gap:1px;padding:4px 2px!important;text-align:center!important}
.pick small{font-size:10px;color:var(--muted);line-height:1.1;max-width:48px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pick canvas{image-rendering:pixelated}
.itemmenu button.danger{border-color:#9a3a32;color:#ffb0a8}
.quick{display:flex;gap:4px;align-items:center}
.qb{height:36px;min-width:36px;border-radius:18px;border:2px solid var(--ink);background:var(--panel2);color:var(--text);cursor:pointer;font-size:16px;display:inline-flex;align-items:center;gap:4px;padding:0 8px;font-weight:800}
.qb:hover{border-color:var(--accent)}
.qb.hand{background:var(--accent);color:var(--ink);font-size:13px}
.qb.hand canvas{image-rendering:pixelated}
#ri-build[aria-pressed=true]{background:#5ad05a;box-shadow:0 3px 0 #2f8a2f,0 0 0 2px var(--ink)}
@media (max-width:700px){.quick .qb:not(.hand){display:none}.pick{grid-template-columns:repeat(4,52px)}}

/* ---------------- Maketoo additions ---------------- */
.ic-home{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' shape-rendering='crispEdges'%3E%3Crect x='6' y='1' width='2' height='1' fill='%231b1f16'/%3E%3Crect x='4' y='2' width='6' height='1' fill='%231b1f16'/%3E%3Crect x='2' y='3' width='10' height='1' fill='%231b1f16'/%3E%3Crect x='5' y='2' width='4' height='1' fill='%23c8603a'/%3E%3Crect x='3' y='3' width='8' height='2' fill='%23c8603a'/%3E%3Crect x='1' y='5' width='12' height='1' fill='%231b1f16'/%3E%3Crect x='2' y='6' width='10' height='7' fill='%231b1f16'/%3E%3Crect x='3' y='6' width='8' height='6' fill='%23f0e2c8'/%3E%3Crect x='6' y='9' width='2' height='3' fill='%235a3a22'/%3E%3Crect x='4' y='7' width='1' height='1' fill='%235ab4c8'/%3E%3Crect x='9' y='7' width='1' height='1' fill='%235ab4c8'/%3E%3C/svg%3E")}
.ic-work{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' shape-rendering='crispEdges'%3E%3Crect x='4' y='2' width='6' height='3' fill='%231b1f16'/%3E%3Crect x='5' y='3' width='4' height='2' fill='%232b3226'/%3E%3Crect x='1' y='4' width='12' height='9' fill='%231b1f16'/%3E%3Crect x='2' y='5' width='10' height='7' fill='%23e8913a'/%3E%3Crect x='2' y='8' width='10' height='1' fill='%23b8682a'/%3E%3Crect x='6' y='7' width='2' height='3' fill='%23f4efe2'/%3E%3C/svg%3E")}
.ic-nav{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' shape-rendering='crispEdges'%3E%3Crect x='4' y='1' width='6' height='1' fill='%231b1f16'/%3E%3Crect x='3' y='2' width='8' height='6' fill='%231b1f16'/%3E%3Crect x='4' y='2' width='6' height='5' fill='%23e8913a'/%3E%3Crect x='6' y='4' width='2' height='2' fill='%23f4efe2'/%3E%3Crect x='5' y='8' width='4' height='2' fill='%231b1f16'/%3E%3Crect x='6' y='10' width='2' height='3' fill='%231b1f16'/%3E%3C/svg%3E")}
.coins small{font-size:10.5px;color:var(--muted);margin-left:2px}
/* conversation log (speech itself is drawn above the heads) */
.chatlogw{position:fixed;right:10px;bottom:74px;z-index:16;display:grid;gap:4px;justify-items:end;max-width:min(380px,calc(100vw - 20px))}
.clt{background:rgba(43,50,38,.92);border:2px solid var(--ink);border-radius:8px;color:var(--muted);font-size:11.5px;padding:2px 9px;cursor:pointer}
.clt[aria-pressed=true]{color:var(--ink);background:var(--accent)}
.chatlog{display:none;background:rgba(27,31,22,.88);border:2px solid var(--ink);border-radius:10px;padding:6px 9px;max-height:200px;overflow:auto;width:min(380px,calc(100vw - 20px));font-size:12.5px}
.chatlog.open{display:block}
.cl{padding:1px 0;line-height:1.35;word-break:break-word}.cl small{color:var(--muted);font-size:10.5px}.cl b{color:var(--accent)}
.cl.whisper{font-style:italic;color:#d8cff0}.cl.shout{font-weight:800}.cl.sys{color:var(--muted);text-align:center}
/* needs as pips */
.pips{display:grid;gap:4px}
.need{grid-template-columns:62px 1fr}
.need i{display:flex;gap:3px;height:auto;background:none;border:0;overflow:visible}
.need i b{width:14px;height:10px;border:2px solid var(--ink);border-radius:3px;transform:skewX(-12deg);flex:none}
.needs{background:rgba(43,50,38,.92)}
/* nav kinds */
.kind{flex:none;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;border-radius:5px;padding:2px 6px;background:var(--panel2);color:var(--muted);border:1px solid var(--line)}
.k-plaza{background:#e8913a;color:var(--ink)}.k-district{background:#7cc46a;color:var(--ink)}.k-public{background:#5ab4c8;color:var(--ink)}
/* houses */
.house{border:2px solid var(--line);border-radius:10px;padding:8px;margin-bottom:10px;background:var(--panel2)}
.hh{display:flex;gap:8px;align-items:baseline;margin-bottom:6px}.hh b{font-size:15px}.hh small{color:var(--muted);flex:1}
.house details{margin-top:8px}.house summary{cursor:pointer;color:var(--accent);font-weight:800}
.house .models{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
/* work */
.jobnow{display:grid;gap:3px;background:var(--panel2);border:2px solid var(--line);border-radius:10px;padding:10px;margin-bottom:10px}.jobnow b{font-size:17px;color:var(--accent)}
.jobs .row.on{border-color:var(--accent)}
.tagok{font-size:11px;font-weight:800;color:var(--ink);background:var(--accent);border-radius:5px;padding:2px 6px}
/* roles */
.rolebadge{font-size:10.5px;font-weight:800;border-radius:5px;padding:1px 6px;background:var(--panel2);color:var(--muted)}
.rolebadge.r1,.rolebadge.r2{background:#3f6fc4;color:#fff}.rolebadge.r3{background:#e8913a;color:var(--ink)}.rolebadge.r4{background:#7cc46a;color:var(--ink)}
/* police / mayor panel */
.secret{font:400 18px/1.3 var(--pix);letter-spacing:.05em;background:#151a11;border:2px dashed var(--accent);border-radius:8px;padding:10px;text-align:center;word-break:break-all;user-select:all}
.report{border:2px solid var(--line);border-radius:10px;padding:8px;margin-bottom:8px;background:var(--panel2)}.report.open{border-color:#e8913a}
.rh{display:flex;flex-wrap:wrap;gap:6px;align-items:baseline}.rh small{color:var(--muted);flex:1}.rh .st{font-size:11px;color:var(--muted)}
.reason{margin:4px 0}
pre.chatlog{display:block;white-space:pre-wrap;max-height:140px;margin:6px 0;font:12px/1.35 ui-monospace,monospace;width:auto}
.urow{border:2px solid var(--line);border-radius:8px;padding:6px 8px;margin-bottom:6px;background:var(--panel2)}
.urow summary{cursor:pointer;display:flex;flex-wrap:wrap;gap:6px;align-items:center}.urow summary small{color:var(--muted);flex-basis:100%;margin-left:16px}
.urow .btns{flex-wrap:wrap;margin-top:6px}.urow input,.urow select{width:auto}
.stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
.stats div{background:var(--panel2);border:2px solid var(--line);border-radius:10px;padding:10px;display:grid}.stats b{font-size:22px;color:var(--accent)}.stats small{color:var(--muted)}
.logt{display:grid;gap:3px;font-size:12.5px;max-height:420px;overflow:auto}.logt small{color:var(--muted)}.logt span{color:var(--muted)}
@media (max-width:640px){.chatlogw{top:10px;left:10px;right:auto;bottom:auto;justify-items:start}.need i b{width:9px}.need{grid-template-columns:54px 1fr}.tb span{font-size:10px}}
.row .grow{min-width:0}.row .grow small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ic-market{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' shape-rendering='crispEdges'%3E%3Crect x='6' y='8' width='2' height='6' fill='%231b1f16'/%3E%3Crect x='1' y='1' width='12' height='8' fill='%231b1f16'/%3E%3Crect x='2' y='2' width='10' height='6' fill='%23e8913a'/%3E%3Crect x='3' y='4' width='8' height='1' fill='%23f4efe2'/%3E%3Crect x='3' y='6' width='5' height='1' fill='%23f4efe2'/%3E%3C/svg%3E")}
/* profile */
.prof{display:flex;gap:14px;align-items:flex-start}
.pfoto canvas{display:block;border:3px solid var(--ink);border-radius:10px;image-rendering:pixelated;box-shadow:0 3px 0 rgba(0,0,0,.3)}
.phead{flex:1;min-width:0}.phead h3{margin:0;font-size:20px}.phead .note{margin:3px 0}
.phead .btns{flex-wrap:wrap;margin-top:8px}
.www{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0}
.www div{background:var(--panel2);border:2px solid var(--line);border-radius:10px;padding:8px}.www h4{margin:0 0 4px;font-size:12px;color:var(--accent)}.www p{margin:0;font-size:13px;word-break:break-word}
.win h4{margin:12px 0 6px;color:var(--accent2);font-size:13px;text-transform:uppercase;letter-spacing:.04em}
.phouses{display:grid;gap:6px}.phouse{background:var(--panel2);border:2px solid var(--line);border-radius:10px;padding:8px}.phouse small{color:var(--muted);margin-left:6px}
.phouse .rooms{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.ppets{display:flex;flex-wrap:wrap;gap:10px}.ppet{display:flex;align-items:center;gap:4px;font-weight:800}
.gbf{display:grid;gap:6px;margin-bottom:8px}.gbf textarea{resize:vertical}.gbf .btn{justify-self:end}
.gb{display:grid;gap:6px;max-height:260px;overflow:auto}
.gbe{display:flex;gap:8px;align-items:flex-start;background:var(--panel2);border:2px solid var(--line);border-radius:10px;padding:6px 8px}
.gbe p{margin:2px 0 0;word-break:break-word}.gbe small{color:var(--muted)}.gbe a,.prof a{color:var(--accent)}
.gbh canvas{image-rendering:pixelated;display:block}
.gbx{background:none;border:0;color:var(--muted);cursor:pointer;font-size:13px}
@media (max-width:640px){.www{grid-template-columns:1fr}.prof{flex-direction:column;align-items:center;text-align:center}.phead .btns{justify-content:center}}
/* market */
.listing{display:flex;gap:10px;align-items:flex-start;background:var(--panel2);border:2px solid var(--line);border-radius:10px;padding:8px;margin-bottom:8px}
.listing p{margin:4px 0;font-size:13px}.listing small{display:block;color:var(--muted)}.listing a{color:var(--accent)}
.lpic{flex:none;width:56px;height:48px;border:2px solid var(--ink);border-radius:8px;background:linear-gradient(#9ed0f0 55%,#6aa84f 55%);position:relative;overflow:hidden}
.lpic i{position:absolute;left:12px;top:18px;width:30px;height:20px;background:#f0e2c8;border:2px solid var(--ink)}
.lpic::before{content:"";position:absolute;left:8px;top:6px;border:19px solid transparent;border-top:0;border-bottom:14px solid var(--roof);width:0}
.lbuy{display:grid;gap:5px;justify-items:end;flex:none}.lprice{font:800 17px var(--ui);color:var(--accent)}.lprice small{display:inline;font-size:11px}
.lbuy select{width:auto;font-size:12px;padding:4px}
.offer{display:grid;gap:6px;background:var(--panel2);border:2px solid var(--line);border-radius:10px;padding:8px;margin-bottom:8px}
.seg3{display:flex;gap:10px;flex-wrap:wrap}.seg3 label{display:flex;gap:4px;align-items:center;color:var(--text)}.seg3 input{width:auto}
.ofields{display:grid;gap:6px}.offer .btn{justify-self:start}
.hstat{margin:2px 0 6px;color:var(--accent2);font-weight:800;font-size:12.5px}
.house.rentedin{border-color:var(--accent2)}
.ic-build{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' shape-rendering='crispEdges'%3E%3Crect x='2' y='3' width='10' height='4' fill='%231b1f16'/%3E%3Crect x='3' y='4' width='8' height='2' fill='%23e8c33c'/%3E%3Crect x='6' y='6' width='2' height='7' fill='%231b1f16'/%3E%3Crect x='3' y='2' width='8' height='1' fill='%231b1f16'/%3E%3C/svg%3E")}
.rolebadge.rb{background:#e8c33c;color:var(--ink)}
.adctl{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end}.adctl label{flex:1;min-width:150px}
.adlist{display:grid;gap:4px;margin:6px 0}
.adlist div{display:grid;grid-template-columns:120px 1fr auto;gap:8px;align-items:baseline;background:var(--panel2);border:1px solid var(--line);border-radius:6px;padding:4px 8px;font-size:12.5px}
.adlist span{color:var(--muted);font-size:11px}.adlist b{font-weight:700;word-break:break-word}.adlist em{font-style:normal;font-size:10.5px;color:var(--muted)}.adlist em.over{color:#ff8a7a;font-weight:800}
.adimgs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:8px 0}.adimgs figure{margin:0;display:grid;gap:6px;justify-items:center}
.adimgs img{max-width:100%;max-height:180px;border:2px solid var(--ink);border-radius:6px}.adimgs a{text-decoration:none;font-size:11px}
@media (max-width:640px){.adlist div{grid-template-columns:1fr}.adimgs{grid-template-columns:1fr}}
.gatelinks{display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:center;margin-top:12px;font-size:12.5px}.gatelinks a{color:var(--muted)}.gatelinks a:hover{color:var(--accent)}
.uedit{display:grid;gap:8px;margin:10px 0 4px;padding:10px;border:2px solid rgba(0,0,0,.12);border-radius:10px}.uedit label{display:grid;gap:3px;font-weight:800;font-size:13px}.uedit label.chk{display:flex;gap:6px;align-items:center;font-weight:600}
.uedit .row2{display:flex;gap:6px}.uedit .row2 input,.uedit .row2 select{flex:1;min-width:0}.pager{justify-content:center;margin-top:8px}#st-q select{max-width:130px}
.ic-tasks{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' shape-rendering='crispEdges'%3E%3Crect x='2' y='1' width='10' height='13' fill='%231d1720'/%3E%3Crect x='3' y='2' width='8' height='11' fill='%23f4f0e6'/%3E%3Crect x='5' y='0' width='4' height='3' fill='%23c8443a'/%3E%3Crect x='4' y='5' width='2' height='2' fill='%234c9a4a'/%3E%3Crect x='7' y='5' width='3' height='1' fill='%231d1720'/%3E%3Crect x='4' y='9' width='2' height='2' fill='%234c9a4a'/%3E%3Crect x='7' y='9' width='3' height='1' fill='%231d1720'/%3E%3C/svg%3E")}
.pbar{display:block;height:8px;border-radius:5px;background:rgba(0,0,0,.25);overflow:hidden;margin:4px 0 2px;border:1px solid rgba(0,0,0,.35)}.pbar i{display:block;height:100%;background:#7cc46a}.pbar.xp i{background:#e8c33c}.pbar.time i{background:#e8913a;transition:width .2s linear}
.lvl{display:grid;gap:2px;margin:8px 0;padding:8px 10px;border-radius:10px;background:rgba(232,195,60,.12)}.lvl small,.row small{opacity:.8}
.row.task.on b{color:#7cc46a}.medal{font-size:11px;padding:1px 7px;border-radius:8px;margin-left:4px;color:#1d1720}.medal.m1{background:#d9a06a}.medal.m2{background:#d8dce4}.medal.m3{background:#f2d23a}.medal.m4{background:#9fe8f8}
.schoolnow{padding:10px;border-radius:10px;background:rgba(124,196,106,.12);margin:8px 0}.years{columns:2;font-size:13px;padding-left:20px}.years .done{opacity:.6;text-decoration:line-through}.years .now{font-weight:800;color:#7cc46a}
.howto li{margin:6px 0}.quiz .qhead{display:flex;justify-content:space-between;font-size:13px;opacity:.85}.qq{font-size:20px;font-weight:800;margin:14px 0;line-height:1.3}
.qopts{display:grid;grid-template-columns:1fr 1fr;gap:8px}.qo{font-size:16px;padding:12px 8px}.qo.pick{outline:3px solid #e8c33c}.qo.right{background:#4c9a4a!important;color:#fff}.qo.wrong{background:#c8443a!important;color:#fff}
.big{font-size:20px;font-weight:800}.board{width:100%;border-collapse:collapse}.board td,.board th{padding:5px 8px;border-bottom:1px solid rgba(255,255,255,.12);text-align:left}
.seg{display:flex;gap:4px;margin:6px 0}.seg button{flex:1;padding:8px;border-radius:8px;border:2px solid rgba(0,0,0,.4);background:rgba(255,255,255,.08);color:inherit;font-weight:800;text-transform:capitalize}.seg button[aria-pressed=true]{background:#e8913a;color:#1d1720}
.frames{width:100%;border-collapse:collapse;margin:6px 0}.frames td{border:1px solid rgba(255,255,255,.25);text-align:center;width:20%;height:38px}.frames td small{display:block;font-size:10px;opacity:.8}
.earnpop{position:fixed;right:20px;bottom:70px;background:#e8c33c;color:#1d1720;font-weight:800;padding:6px 12px;border-radius:12px;box-shadow:0 3px 0 #a8801a;z-index:9999;transition:transform 2.4s ease-out,opacity 2.4s;pointer-events:none}.earnpop.go{transform:translateY(-60px);opacity:0}
.qopts .btn.qo{background:#3a3f4a;color:#f4f0e6;box-shadow:0 4px 0 #1d1a1e,0 0 0 2px #1d1720}.qopts .btn.qo:hover:not(:disabled){background:#4a5160}.btn:disabled{opacity:.45;cursor:not-allowed}.qopts .btn.qo:disabled{opacity:1}
.ic-swap{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' shape-rendering='crispEdges'%3E%3Crect x='1' y='2' width='9' height='3' fill='%231d1720'/%3E%3Crect x='2' y='3' width='7' height='1' fill='%237cc46a'/%3E%3Crect x='9' y='1' width='2' height='5' fill='%231d1720'/%3E%3Crect x='11' y='2' width='1' height='3' fill='%231d1720'/%3E%3Crect x='4' y='9' width='9' height='3' fill='%231d1720'/%3E%3Crect x='5' y='10' width='7' height='1' fill='%23e8913a'/%3E%3Crect x='3' y='8' width='2' height='5' fill='%231d1720'/%3E%3Crect x='2' y='9' width='1' height='3' fill='%231d1720'/%3E%3C/svg%3E")}
.swoffer{border:2px solid rgba(0,0,0,.35);border-radius:10px;padding:8px 10px;margin:8px 0;background:rgba(255,255,255,.04)}.swhead{display:flex;justify-content:space-between;align-items:baseline}
.swits{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}.swit{display:grid;justify-items:center;width:64px;font-size:10px;text-align:center;line-height:1.1}.swit small{opacity:.85}
.swbid{border-top:1px dashed rgba(255,255,255,.2);margin-top:6px;padding-top:6px}.swpick{max-height:260px;overflow:auto}.swnote{display:grid;gap:3px;font-weight:800;margin:8px 0}
.paypk{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0}.paypk button{display:grid;gap:3px;justify-items:center;padding:10px;border-radius:10px;border:2px solid rgba(0,0,0,.4);background:rgba(255,255,255,.06);color:inherit;cursor:pointer}.paypk button[aria-pressed=true]{background:rgba(232,195,60,.25);border-color:#e8c33c}.paypk em{font-style:normal;font-weight:800;font-size:16px}
.paytest{background:#e8913a;color:#1d1720;padding:6px 10px;border-radius:8px;font-weight:800}.paylink{text-align:center;margin:10px 0}.chk a{color:#7cc46a}#coins{cursor:pointer}

/* ------------------------------------------------------------------ phones and tablets */
:root{--barh:60px}
html,body{overscroll-behavior:none;-webkit-tap-highlight-color:transparent}
#hud{-webkit-user-select:none;user-select:none}#hud input,#hud textarea{-webkit-user-select:text;user-select:text}
button,.tb,.qb,.coins{touch-action:manipulation}
.tbs{display:contents}
.roominfo{bottom:calc(var(--barh) + 8px)}
.chatlogw{bottom:calc(var(--barh) + 14px)}
.zoomctl{position:fixed;left:10px;top:50%;transform:translateY(-50%);z-index:16;display:grid;gap:5px}
.zoomctl button{width:38px;height:38px;border-radius:10px;background:rgba(43,50,38,.92);border:2px solid var(--ink);color:var(--text);font:800 19px/1 var(--ui);cursor:pointer;box-shadow:0 2px 0 rgba(0,0,0,.3)}
.zoomctl button:active{transform:translateY(1px)}
@media (max-width:900px){
  .bar{height:auto;flex-wrap:wrap;row-gap:5px;padding:6px 6px calc(5px + env(safe-area-inset-bottom))}
  .tbs{display:flex;order:3;flex:1 0 100%;overflow-x:auto;gap:2px;justify-content:space-between;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .tbs::-webkit-scrollbar{display:none}
  .tb{flex:0 0 auto;min-width:54px;padding:2px 4px}
  .tb span{display:block;font-size:10px}
  .quick{order:1}.chatform{order:1;flex:1 1 150px;margin:0;min-width:0}.coins{order:2}
  .chatform input{font-size:16px;height:38px;min-width:0}
  .roominfo span{display:none}
}
@media (max-width:600px){
  .quick .qb:not(.hand){display:inline-flex}
  .tbs .quick{order:-1;padding-right:6px;margin-right:4px;border-right:2px solid var(--line)}
  .qb{height:38px;min-width:38px}
  #shout{display:none}
  .tb{min-width:48px}
  .win{left:4px!important;right:4px;width:auto!important;top:auto!important;bottom:calc(var(--barh) + 4px);max-width:none;max-height:calc(100dvh - var(--barh) - 14px)}
  .wt{cursor:default}
  .needs{top:8px;bottom:auto;right:6px;width:122px;padding:5px 7px}
  .chatlogw{top:auto;bottom:calc(var(--barh) + 8px);right:6px;left:auto;justify-items:end}
  .roominfo{left:6px;bottom:calc(var(--barh) + 8px);max-width:calc(100% - 120px);padding:5px 8px}
  .roominfo b{font-size:12.5px}.rib .btn{padding:4px 8px;font-size:12px}
  .zoomctl{left:auto;right:6px;top:140px;transform:none}
  .zoomctl button{width:40px;height:40px}
  .toast{max-width:calc(100vw - 24px);font-size:13px;top:auto;bottom:calc(var(--barh) + 64px)}
  .buildbar{top:auto;bottom:calc(var(--barh) + 56px);flex-wrap:wrap;justify-content:center;width:calc(100vw - 24px);font-size:12px}
  .itemmenu{max-width:calc(100vw - 16px)}
}
@media (max-height:520px) and (orientation:landscape){
  .needs{display:none!important}
  .zoomctl{top:8px;transform:none;grid-auto-flow:column}
  .roominfo{bottom:calc(var(--barh) + 4px)}
  .win{max-height:calc(100dvh - var(--barh) - 10px)}
  .toast{top:6px;bottom:auto}
}
@media (max-height:520px) and (orientation:landscape){
  .bar{flex-wrap:nowrap;padding:4px 6px calc(4px + env(safe-area-inset-bottom))}
  .tbs{flex:1 1 auto;min-width:0;order:3;justify-content:flex-start}
  .tb span{display:none}.tb{min-width:40px}
  .chatform{flex:0 1 220px}#shout{display:none}
  .quick .qb:not(.hand){display:inline-flex}
  .tbs .quick{order:-1;padding-right:6px;margin-right:4px;border-right:2px solid var(--line)}
}
.cell.trash{outline:2px dashed #e0675c;outline-offset:-4px}
.itemmenu{z-index:5000}

/* invite friends */
.invlink{display:flex;gap:6px;margin:10px 0}
.invlink input{flex:1;min-width:0;font:inherit;font-size:13px;padding:7px 9px;border-radius:8px;border:1px solid rgba(255,255,255,.18);background:rgba(0,0,0,.25);color:inherit}
.invlist{list-style:none;padding:0;margin:6px 0 0;max-height:180px;overflow:auto}
.invlist li{padding:5px 0;border-bottom:1px solid rgba(255,255,255,.08);font-size:13px}
.invlist .inv-beloond{color:#7fd98a}.invlist .inv-wacht{color:#e8c33c}.invlist .inv-afgewezen{color:#ff8a7a}
.gform .invited{background:rgba(232,195,60,.15);border:1px solid rgba(232,195,60,.5);border-radius:10px;padding:8px 10px;color:#ffe9a8}

/* the president's settings */
.pres fieldset{border:1px solid rgba(255,255,255,.15);border-radius:12px;padding:8px 12px 12px;margin:0 0 12px}
.pres legend{font-weight:800;padding:0 6px}.pres small.ok{color:#7fd98a;font-weight:700}.pres small.no{color:#e8c33c;font-weight:700}

.pres .adlink { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; }
.pres .adlink .adout { grid-column: 1 / -1; display: flex; gap: 6px; }
.pres .adlink .adout input { flex: 1; font-size: 12px; }
.pres table.camp { width: 100%; border-collapse: collapse; font-size: 12px; margin: 8px 0 2px; }
.pres table.camp th, .pres table.camp td { text-align: left; padding: 4px 6px; border-bottom: 1px solid rgba(0,0,0,.1); }
.pres table.camp td:not(:first-child), .pres table.camp th:not(:first-child) { text-align: right; }
@media (max-width: 520px) { .pres .adlink { grid-template-columns: 1fr; } }

/* the navigator: smaller text so every name and description fits in its row */
#nav-list .row{gap:8px;padding:5px 8px}
#nav-list .row .grow b{font-size:13.5px;line-height:1.25}
#nav-list .row .grow small{font-size:11.5px;line-height:1.3}
#nav-list .kind{font-size:9px;padding:2px 5px;min-width:62px;text-align:center}
.win[aria-label=Stad] .tabs2 button{font-size:12px;padding:3px 9px}

/* the Maketoo keyboard (phones and tablets): stays put instead of pushing the screen up and down */
.vkb{position:fixed;left:0;right:0;bottom:0;z-index:60;background:#2a2228;padding:4px 3px calc(6px + env(safe-area-inset-bottom));display:grid;gap:5px;
  touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;box-shadow:0 -4px 14px rgba(0,0,0,.25)}
.vkb[hidden]{display:none}
.vkb .vtop{display:flex;justify-content:space-between;gap:6px;padding:0 3px}
.vkb .vtop button{background:none;border:0;color:#cfc6d2;font:700 12px/1 Nunito,sans-serif;padding:6px 4px;cursor:pointer}
.vkb .vrow{display:flex;gap:5px;justify-content:center}
.vkb .vrow.r1{padding:0 5%}
.vkb .vrow button{flex:1 1 0;min-width:0;max-width:64px;height:44px;border:0;border-radius:8px;background:#f3eee4;color:#2a2228;font:700 19px/1 Nunito,system-ui,sans-serif;
  box-shadow:0 2px 0 rgba(0,0,0,.45);padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.vkb .vrow button.fn{background:#9a8f9e;color:#fff;font-size:15px;flex-grow:1.4;max-width:80px}
.vkb .vrow button.fn.on{background:#e8c33c;color:#2a2228}
.vkb .vrow button.sp{flex-grow:5;max-width:none;font-size:13px;color:#7a7080}
.vkb .vrow button.go{flex-grow:1.8;max-width:96px;background:#7cc46a;color:#1d3a18;font-size:15px}
.vkb .vrow button.press{transform:translateY(2px);box-shadow:none;filter:brightness(.92)}
body.vkb-open .bar{bottom:var(--vkb,0)}
body.vkb-open .chatform input{border-color:#e8c33c;box-shadow:0 0 0 3px rgba(232,195,60,.35)}
.vkbt{flex:0 0 auto;padding:4px 8px;font-size:16px}
.vkbt[hidden]{display:none}
@media (max-width:600px){
  body.vkb-open .tbs, body.vkb-open #quick, body.vkb-open .coins{display:none}
  .vkb .vrow button{height:42px;font-size:18px}
}
@media (max-height:520px){ .vkb .vrow button{height:34px;font-size:16px} .vkb{gap:3px} }
/* Maketoo Plus */
.rolebadge.rplus{background:linear-gradient(#ffe98a,#e8c33c);color:#4a3608}
.plushead{background:linear-gradient(#fff6cf,#f3d977);color:#3a2a08;border:2px solid #a8801a;border-radius:12px;padding:10px 12px;margin-bottom:8px;font-size:14px}
.perks{list-style:none;margin:6px 0 10px;padding:0;display:grid;gap:6px}
.perks li{display:flex;gap:10px;align-items:flex-start}.perks li>span{font-size:20px;width:26px;text-align:center}
.perks b{display:block;font-size:13.5px}.perks small{color:var(--muted);font-size:12px}
.plusbuy{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0}
.plusad{margin:6px 0 10px;font-size:13px}.plusad a{color:#b08a18;font-weight:800}
.shopplus{font-style:normal;font-size:11px;margin-right:2px}
.zoomctl #snd-btn{font-size:16px}
/* speelgeld */
.paypk em{font-size:14px}.paypk span{font-size:13px}.paypk .gift{color:#7cc46a;font-weight:800;font-size:11.5px}
.moneynote{font-size:12.5px;line-height:1.4;background:rgba(232,195,60,.14);border:1px solid rgba(232,195,60,.5);border-radius:10px;padding:7px 10px;margin:8px 0}
.coins small{font-size:10px;opacity:.8}
.win p.ok{background:rgba(124,196,106,.16);border:1px solid rgba(124,196,106,.5);border-radius:10px;padding:8px 10px}
.rkind{font-weight:800;margin:4px 0}.rkind.k-kind{color:#ff7a6a}
/* ================================================================== phones (body.phone: narrow, or a low landscape screen) */
.tb-phone{display:none}.emo{font-style:normal;font-size:20px;line-height:24px;height:24px}
body.phone .tb-phone{display:flex}
body.phone .tbs{overflow:visible;justify-content:space-around}
body.phone .tbs .tb:not([data-open=nav]):not([data-open=home]):not([data-open=cat]):not(.tb-phone){display:none}
body.phone .tb{flex:1 1 0;min-width:0;padding:3px 2px}
body.phone .tb span{font-size:11px}
body.phone .tb .ic,body.phone .tb .emo{transform:scale(1.1)}
/* Meer: a grid of big buttons */
.moregrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px;margin-bottom:8px}
.mtb{display:grid;justify-items:center;gap:4px;padding:10px 4px;border-radius:12px;border:2px solid var(--line);background:var(--panel2);color:var(--text);font:800 12px var(--ui);cursor:pointer;position:relative;min-height:70px}
.mtb em{position:absolute;top:4px;right:8px;background:var(--accent2);color:#fff;font-style:normal;font-size:10px;border-radius:9px;padding:0 5px}
.mtb canvas{width:28px;height:28px}
.setl .row{display:flex;align-items:center;gap:8px;padding:8px 2px}.setl select{max-width:55%}.setl small{display:block;color:var(--muted);font-size:11px;font-weight:600}
/* sheets */
body.phone .win{left:0!important;right:0!important;width:auto!important;top:auto!important;bottom:var(--barh)!important;border-radius:16px 16px 0 0;border-bottom:0;max-height:calc(100dvh - var(--barh) - 40px);transition:transform .16s ease-out;animation:sheetup .18s ease-out}
body.phone .wt{padding-top:14px;position:relative;border-radius:13px 13px 0 0}
body.phone .wt::before{content:"";position:absolute;top:5px;left:50%;width:42px;height:4px;margin-left:-21px;border-radius:3px;background:rgba(255,255,255,.35)}
body.phone .wx{width:30px;height:30px}
@keyframes sheetup{from{transform:translateY(40%);opacity:.4}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){body.phone .win{animation:none}}
/* banners at the top */
.banner{position:fixed;left:8px;right:8px;top:calc(6px + env(safe-area-inset-top));z-index:70;background:#fff7d6;color:var(--ink);border:2px solid var(--ink);border-radius:12px;padding:8px 12px;box-shadow:0 4px 0 rgba(0,0,0,.3);display:grid;gap:2px;cursor:pointer;animation:bannerin .2s ease-out;transition:transform .25s,opacity .25s}
.banner b{font-size:12px;color:#a8601a}.banner span{font-size:13.5px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.banner.out{transform:translateY(-130%);opacity:0}
@keyframes bannerin{from{transform:translateY(-120%)}to{transform:none}}
body.phone .toast{top:calc(8px + env(safe-area-inset-top));bottom:auto;left:8px;right:8px;transform:translateY(-160%);max-width:none;text-align:center}
body.phone .toast.show{transform:none}
/* needs: one small face; tap for the four bars */
.ndot{display:none;width:34px;height:34px;border-radius:50%;border:2px solid var(--ink);background:rgba(43,50,38,.92);font-size:20px;line-height:1;padding:0;cursor:pointer}
body.phone .needs{width:auto;padding:0;background:none;border:0;top:calc(8px + env(safe-area-inset-top));right:6px}
body.phone .needs .ndot{display:block;margin-left:auto}
body.phone .needs.low .ndot{border-color:#ff6a5a;box-shadow:0 0 0 3px rgba(255,106,90,.4)}
body.phone .needs:not(.open) .pips,body.phone .needs:not(.open) p{display:none}
body.phone .needs.open{background:rgba(43,50,38,.95);border:2px solid var(--ink);padding:6px 8px;width:170px}
body.phone .needs.open p{display:block}
body.phone .zoomctl{top:auto;bottom:calc(var(--barh) + 70px)}
body.phone .chatlogw{bottom:calc(var(--barh) + 8px)}
/* quick phrases */
.phr{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px 4px}.phr::-webkit-scrollbar{display:none}
.phr[hidden]{display:none}
.chip{flex:0 0 auto;border-radius:16px;border:2px solid var(--ink);background:#f3eee4;color:#2a2228;font:800 13px var(--ui);padding:6px 11px;cursor:pointer}
.vkb .phr.in{padding:2px 3px 4px}
.vkb .phr.in .chip{background:#4a404e;color:#f3eee4;border-color:#1d1720;font-size:12.5px;padding:5px 10px}
#phr:not([hidden]){order:0;flex:1 0 100%}
/* chat mode: the last lines above the input while typing */
body.vkb-open #chatlog,body.os-typing #chatlog{display:block;max-height:76px;font-size:12px;opacity:.95}
body.vkb-open #chatlog-t,body.os-typing #chatlog-t{display:none}
body.vkb-open .zoomctl,body.vkb-open .roominfo,body.vkb-open #needs{display:none}
/* landscape: the city left, chat and keyboard right */
body.land.vkb-open .vkb{left:50%;border-top-left-radius:12px}
body.land.vkb-open .bar{left:50%}
body.land.vkb-open .chatlogw{left:calc(50% + 6px);right:6px;max-width:none}
body.land.vkb-open #chatlog{width:auto;max-height:90px}
body.land .vkb .vrow button{height:30px;font-size:15px}
body.land .vkb .phr.in .chip{padding:3px 8px;font-size:11.5px}
/* phones: one row for chatting, one row of five buttons */
body.phone:not(.land) .quick .qb:not(.hand){display:none}
body.phone:not(.land) .coins small{display:none}
body.phone:not(.land) .coins{padding:4px 8px;flex:0 0 auto}
body.phone:not(.land) .chatform{flex:1 1 120px}
body.phone .toast{right:50px}
body.phone.vkb-open .tbs,body.phone.vkb-open #quick,body.phone.vkb-open .coins{display:none}

/* school: vakken, uitleg */
.vakken{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:6px;margin:6px 0 10px}
.vak{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 6px;border:2px solid #e3d9c9;border-radius:12px;background:#fff;font:inherit;font-size:20px;cursor:pointer;min-height:64px}

.vak{color:#2c2629}.vak span{color:#2c2629;font-size:12px;font-weight:700;line-height:1.2;text-align:center}.vak small{font-size:11px;color:#7a7076}
.vak.on{border-color:#2f6b3a;background:#eef7ea}
.quiz .qq{white-space:pre-line}
.quiz .streak{margin:4px 0 0;font-weight:700;color:#c25a12}
#qz-note.res{display:flex;flex-direction:column;gap:6px}
#qz-note .uitleg{background:#fff8e1;border:1px solid #ecd58f;border-radius:10px;padding:8px 10px;color:#4a4246;font-size:13px;line-height:1.4}
.years li.sec{border-top:2px dashed #d9cfc0;padding-top:4px;margin-top:4px}

/* werkplek */
.werkplek{display:flex;flex-direction:column;gap:6px;margin:8px 0 10px;padding:10px 12px;border-radius:12px;background:rgba(122,184,90,.14);border:1px solid rgba(122,184,90,.45)}
.werkplek small{line-height:1.45}.werkplek .btn{align-self:flex-start}

/* Stad: mapjes */
.navfold{border:1px solid rgba(255,255,255,.12);border-radius:12px;margin:0 0 8px;background:rgba(255,255,255,.05);overflow:hidden}
.navfold>summary{list-style:none;display:flex;align-items:center;gap:8px;padding:10px 12px;cursor:pointer;font-weight:700;user-select:none}
.navfold>summary::-webkit-details-marker{display:none}
.navfold>summary::after{content:'▸';margin-left:4px;transition:transform .15s;opacity:.6}
.navfold[open]>summary::after{transform:rotate(90deg)}
.navfold>summary .fn{flex:1}.navfold>summary .fc{font-weight:400;font-size:12px;opacity:.75}
.navfold[open]>summary{border-bottom:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06)}
.navfold>summary:hover{background:rgba(255,255,255,.08)}
.navfold .row{margin:0;border-radius:0}

/* prikbord */
.notes{display:grid;grid-template-columns:1fr 1fr;gap:8px;max-height:46vh;overflow:auto;padding:4px;background:#b88a5a;border-radius:10px;margin-bottom:10px}
.notes .empty{grid-column:1/-1;color:#fff8ea}
.notes .note{position:relative;padding:10px 10px 8px;border-radius:3px;color:#2c2629;box-shadow:0 2px 4px rgba(0,0,0,.25);transform:rotate(-1deg);min-height:70px}
.notes .note:nth-child(2n){transform:rotate(1.2deg)}
.notes .note.n0{background:#fff6a8}.notes .note.n1{background:#c8ecff}.notes .note.n2{background:#ffd6e6}.notes .note.n3{background:#d8f5c8}
.notes .note::before{content:'';position:absolute;top:-4px;left:50%;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:#c8443a;box-shadow:0 1px 2px rgba(0,0,0,.4)}
.notes .note p{margin:2px 0 6px;font-size:13px;line-height:1.35;word-break:break-word}
.notes .note small{font-size:11px;opacity:.7}
.notes .note .nx{position:absolute;top:2px;right:4px;border:0;background:none;cursor:pointer;color:#7a5a3a;font-size:12px}
.note-hint{font-size:12px;opacity:.75;margin:6px 0 0}

/* bowlen */
.bw-top{display:flex;justify-content:space-between;font-size:14px;margin-bottom:6px}
.bw-sheet{overflow-x:auto;margin-bottom:8px}
.bw-sheet .frames{border-collapse:collapse;width:100%;min-width:340px;table-layout:fixed}
.bw-sheet .frames td{border:1px solid rgba(255,255,255,.25);padding:2px 1px;text-align:center;vertical-align:top;font-size:12px}
.bw-sheet .frames td.now{background:rgba(255,212,106,.18)}
.bw-sheet .mk{display:flex;justify-content:flex-end;gap:1px;min-height:14px}.bw-sheet .mk i{font-style:normal;font-size:10px;border-left:1px solid rgba(255,255,255,.2);padding:0 2px}
.bw-sheet .frames b{display:block;font-size:13px;min-height:16px}
#bw-c{display:block;width:100%;max-width:360px;margin:0 auto;border-radius:10px;aspect-ratio:6/5;height:auto}
.bw-word{text-align:center;font-weight:800;font-size:18px;min-height:24px;margin:6px 0}
#bw-go{width:100%}#bw-go small{font-weight:400;opacity:.75}

/* tablets and the app on the home screen: stay clear of the status bar and the rounded corners, no grey flash or text menu on a long press */
body{-webkit-tap-highlight-color:transparent}
#view{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
@media (min-width:701px){body:not(.phone) .needs{top:calc(10px + env(safe-area-inset-top));right:calc(10px + env(safe-area-inset-right))}}
@media (min-width:701px){body:not(.phone) .zoomctl{left:calc(10px + env(safe-area-inset-left))}}
.zoomctl{width:max-content;pointer-events:none}.zoomctl button{pointer-events:auto}   /* only the buttons catch taps, never the space between them */
@media (max-width:700px){.zoomctl{right:calc(6px + env(safe-area-inset-right))}}
.apphint{position:fixed;left:50%;top:calc(12px + env(safe-area-inset-top));transform:translateX(-50%);z-index:72;width:min(560px,calc(100% - 24px));display:flex;align-items:center;gap:10px;background:#fff7d6;color:var(--ink);border:2px solid var(--ink);border-radius:12px;padding:10px 12px;box-shadow:0 4px 0 rgba(0,0,0,.3);animation:hintin .25s ease-out;transition:transform .25s,opacity .25s}
.apphint .ai-ico{font-size:26px;line-height:1}
.apphint .ai-t{flex:1;min-width:0;font-size:13.5px;line-height:1.35}.apphint .ai-t b{display:block;color:#a8601a;font-size:13px}
.apphint .ai-x{width:32px;height:32px;border:0;background:none;font-size:18px;color:var(--ink);cursor:pointer;touch-action:manipulation}
.apphint.out{transform:translate(-50%,-140%);opacity:0}
@keyframes hintin{from{transform:translate(-50%,-140%)}to{transform:translateX(-50%)}}

/* languages: the choice on the login screen, and the 🌐 on a translated chat line (tap for the original) */
.langpick{display:flex;align-items:center;justify-content:center;gap:6px;margin:10px 0 0;font-size:13px;color:inherit}
.langpick select{font:inherit;padding:4px 8px;border-radius:8px;border:2px solid var(--ink);background:var(--panel2,#fff);color:var(--text,#1d1720)}
.cl .trn{border:0;background:none;padding:0 2px;font-size:12px;cursor:pointer;opacity:.75;vertical-align:baseline}.cl .trn.on{opacity:1;filter:drop-shadow(0 0 2px #ffd46a)}
/* town hall: screens in groups, a start page with what your rank can do */
.stnav{display:flex;flex-wrap:wrap;gap:6px 14px;margin-bottom:12px;padding-bottom:10px;border-bottom:2px solid var(--line)}
.stgrp{display:grid;gap:3px}.stgrp small{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.stgrp div{display:flex;gap:4px;flex-wrap:wrap}
.stgrp button{background:var(--panel2);border:2px solid var(--line);border-radius:6px;padding:4px 9px;cursor:pointer;color:var(--text);font-size:12.5px}
.stgrp button[aria-pressed=true]{background:var(--accent);border-color:var(--ink);color:var(--ink)}
.sthello{display:flex;align-items:baseline;gap:8px;margin:2px 0 8px}.sthello b{font-size:18px;color:var(--accent)}.sthello span{color:var(--muted)}
.powers{display:grid;gap:5px;margin-bottom:10px}
.powers button{display:flex;align-items:center;gap:8px;text-align:left;background:var(--panel2);border:2px solid var(--line);border-radius:8px;padding:7px 10px;cursor:pointer;color:var(--text);font:inherit;font-size:13px}
.powers button:hover{border-color:var(--accent)}.powers button span{flex:1}.powers button i{font-style:normal;color:var(--accent);font-size:18px}
.powers.todo button{border-color:var(--accent2,var(--accent))}
.setup{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:6px;margin-bottom:10px}
.setup button{display:grid;gap:2px;text-align:left;background:var(--panel2);border:2px solid var(--line);border-radius:8px;padding:7px 10px;cursor:pointer;color:var(--text);font:inherit;font-size:13px}
.setup button.no{border-color:#d9a03a}.setup button small{color:var(--muted)}
.presnav{position:sticky;top:-2px;z-index:1;background:var(--panel);padding:4px 0}
/* word suggestions above the Maketoo keyboard: three big buttons, one tap finishes the word */
.vkb .phr.sug{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
.vkb .phr.sug .chip.word{font-size:17px;padding:9px 6px;background:#4a3f4d;color:#fff;border:0;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vkb .phr.in{height:40px;box-sizing:border-box;align-items:center}   /* same height with or without suggestions: the keyboard never jumps */
.vkb .phr.sug .chip.word{height:34px;padding:0 6px;line-height:34px}
body.land .vkb .phr.in{height:34px}
body.land .vkb .phr.sug .chip.word{height:28px;line-height:28px;font-size:15px}
/* spaarpotjes */
.potsum{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
.potsum div{background:#fff8ea;border:2px solid #2a2228;border-radius:10px;padding:8px 10px;display:grid}
.potsum small{color:var(--muted);font-size:12px}.potsum b{font-size:19px}
.pot{border:2px solid #2a2228;border-radius:12px;padding:10px;margin:0 0 10px;background:#fff;display:grid;gap:8px}
.pot.done{background:#eef9e8}
.pot-h{display:flex;gap:10px;align-items:center}
.pot-e{font-size:30px;line-height:1}
.pot-n{flex:1 1 auto;min-width:0;display:grid}.pot-n small{color:var(--muted);font-size:12px}
.pot-a{text-align:right;display:grid}.pot-a small{color:var(--muted);font-size:12px}
.pot-bar{height:12px;border-radius:7px;background:#ece4d6;overflow:hidden;border:1px solid #2a2228}
.pot-bar i{display:block;height:100%;background:linear-gradient(90deg,#7cc46a,#e8c33c);transition:width .5s}
.pot-f{display:grid;gap:8px}.pot-f label{display:grid;gap:3px;font-weight:700;font-size:13px}
.pot-f input,.pot-f select{font:inherit;padding:8px;border:2px solid #2a2228;border-radius:8px;min-height:40px;box-sizing:border-box}
.pot-q,.pot-em{display:flex;flex-wrap:wrap;gap:6px}
.pot-em .chip[aria-pressed=true]{background:#e8c33c;border-color:#2a2228}
.pot-new{border:2px dashed #2a2228;border-radius:12px;padding:10px}
.pot-f details summary{cursor:pointer;font-weight:700;font-size:13px;padding:4px 0}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:200;overflow:hidden}
.confetti i{position:absolute;top:-12px;width:8px;height:12px;border-radius:2px;animation:conf 2.6s ease-in forwards}
@keyframes conf{to{transform:translate(var(--dx),105vh) rotate(720deg);opacity:.9}}
.playstop{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--barh,64px) + 12px);top:auto;right:auto;width:auto;height:auto;max-width:90vw;z-index:40;padding:10px 18px;white-space:nowrap}
.playstop[hidden]{display:none}
.potsum div,.pot{color:#2a2228}.potsum small,.pot-n small,.pot-a small{color:#6a6070}
.pot-f input,.pot-f select{background:#fff;color:#2a2228}
.pot-new{color:inherit}.pot-new input,.pot-new select{background:#fff;color:#2a2228}