@font-face{font-family:Stencil;src:url(fonts/stencil.woff2) format('woff2');font-display:swap}
@font-face{font-family:Nunito;src:url(fonts/nunito.woff2) format('woff2');font-weight:200 1000;font-display:swap}
@font-face{font-family:Elite;src:url(fonts/elite.woff2) format('woff2');font-display:swap}
@font-face{font-family:Oswald;src:url(fonts/oswald.woff2) format('woff2');font-weight:600;font-display:swap}
:root{
  --tan:#D9C29A;--grass:#A8B26A;--concrete:#C9C3B6;--shadow:#8E877A;--mint:#B9D8C2;--mintd:#8FBBA0;
  --orange:#F07A28;--navy:#25365C;--navyd:#16223d;--hazard:#F2C230;--cream:#F4EEDC;--ink:#2A2620;
  --green:#3E8A4A;--red:#C23B2E;
  --topH:54px;--boardW:clamp(272px,29vw,352px);--boardH:38vh;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#cdb88d;font-family:Nunito,system-ui,sans-serif;color:var(--ink);font-variant-numeric:tabular-nums}
button{font:inherit;color:inherit;cursor:pointer}
#map{position:fixed;inset:0;touch-action:none}
#map canvas{display:block}

/* ---------- top bar ---------- */
#top{position:fixed;left:0;right:0;top:0;height:var(--topH);display:flex;align-items:center;gap:8px;padding:6px 10px;z-index:20;
  background:linear-gradient(#d8d3c7,#bfb8aa);border-bottom:2px solid #8e877a;box-shadow:inset 0 1px 0 #f3efe6,0 3px 8px rgba(60,50,30,.25)}
.plaque{font-family:Stencil,Oswald,sans-serif;letter-spacing:.06em;font-size:19px;padding:6px 14px;border-radius:6px;white-space:nowrap;
  background:linear-gradient(#ece7db,#d5cfc1);border:2px solid #8e877a;box-shadow:inset 0 1px 0 #fff,0 2px 0 #8e877a;position:relative}
.plaque::before,.plaque::after{content:"";position:absolute;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#eee,#777)}
.plaque::before{left:4px}.plaque::after{right:4px}
.readout{height:40px;display:flex;align-items:center;gap:6px;padding:2px 12px;border-radius:6px;background:linear-gradient(#f6f1e3,#e7e0cd);
  border:2px solid #8e877a;box-shadow:inset 0 2px 3px rgba(0,0,0,.12)}
.money{font-weight:900;font-size:24px;color:var(--green);min-width:130px;justify-content:center;position:relative}
.money.neg{color:var(--red)}
.stat img{width:26px;height:26px;object-fit:contain}
.stat small,.date small{display:block;font-size:11px;font-weight:700;line-height:1;opacity:.75}
.stat b{font-size:16px;font-weight:900;line-height:1.1}
.date{flex-direction:column;justify-content:center;gap:0;line-height:1.05;min-width:112px}
.date b{font-size:14px;font-weight:900}.date small{font-size:12px;opacity:.9;margin-top:2px}
.speed{display:flex;gap:3px;padding:3px;border-radius:7px;background:#8e877a;box-shadow:inset 0 2px 3px rgba(0,0,0,.35)}
.speed button{width:40px;height:32px;border:0;border-radius:5px;background:linear-gradient(#e9e4d8,#c9c3b6);box-shadow:0 3px 0 #6f685c;display:flex;align-items:center;justify-content:center;gap:1px;transition:transform .08s}
.speed button.on{background:linear-gradient(#3a4f80,var(--navy));box-shadow:0 1px 0 #0f1830,inset 0 2px 3px rgba(0,0,0,.4);transform:translateY(2px);color:var(--cream)}
.ic-play{width:0;height:0;border-left:8px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent}
.ic-pause{width:10px;height:12px;border-left:3.5px solid currentColor;border-right:3.5px solid currentColor}
.tbtn{height:34px;min-width:36px;border-radius:6px;border:2px solid #8e877a;background:linear-gradient(#f4efe3,#d9d3c5);font-weight:900;font-size:12px;box-shadow:0 2px 0 #8e877a}
.tbtn:active{transform:translateY(2px);box-shadow:none}
#top .spacer{flex:1}

/* ---------- clipboard ---------- */
#board{position:fixed;z-index:15;right:8px;top:calc(var(--topH) + 8px);bottom:8px;width:var(--boardW);border-radius:16px;padding:30px 10px 12px;
  background:linear-gradient(135deg,#c8e3cf,#a9cdb4 60%,#9cc3a8);border:2px solid #6f9a7f;box-shadow:inset 0 2px 0 rgba(255,255,255,.6),inset 0 -3px 0 rgba(0,0,0,.12),0 6px 16px rgba(50,40,20,.35);display:flex;flex-direction:column}
.rivet{position:absolute;width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#aab 40%,#556 100%);box-shadow:0 1px 1px rgba(0,0,0,.4)}
.rivet.tl{left:8px;top:8px}.rivet.tr{right:8px;top:8px}.rivet.bl{left:8px;bottom:8px}.rivet.br{right:8px;bottom:8px}
#clip{position:absolute;left:50%;top:-10px;transform:translateX(-50%);width:150px;border:0;background:none;padding:0;z-index:3}
#clip img{width:100%;display:block;filter:drop-shadow(0 3px 2px rgba(0,0,0,.35))}
#sheets{flex:1;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:10px;padding:0 2px 4px;scrollbar-width:thin}
.sheet{background:var(--cream);border-radius:6px;box-shadow:0 2px 0 #d5cdb5,0 3px 6px rgba(0,0,0,.18);padding:10px;position:relative}
.tabs{display:flex;gap:4px;margin:-10px -10px 10px;padding:0 6px;background:linear-gradient(#a9cdb4,#a9cdb4)}
.tabs button{flex:1;padding:7px 2px 6px;border:2px solid #cfc6aa;border-bottom:0;border-radius:9px 9px 0 0;background:#e9e1c8;font-weight:800;font-size:14px;transition:transform .1s;transform:translateY(3px)}
.tabs button.on{background:#f5dd86;border-color:#d8bb55;transform:none;box-shadow:0 -2px 0 rgba(0,0,0,.05)}
.tabs button:hover{filter:brightness(1.05)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.tile{position:relative;border:2px solid #ddd3b8;border-radius:8px;background:#fbf8ee;padding:4px 2px 5px;text-align:center;box-shadow:0 3px 0 #d5cdb5;transition:transform .1s,box-shadow .1s,filter .1s}
.tile:hover{transform:translateY(-2px);box-shadow:0 5px 0 #d5cdb5;filter:brightness(1.04)}
.tile:active{transform:translateY(2px);box-shadow:0 1px 0 #d5cdb5}
.tile.on{border-color:#6aa9d6;box-shadow:0 0 0 2px #9fd0f0,0 3px 0 #d5cdb5;background:#eef7fb}
.tile .ic{height:48px;display:flex;align-items:flex-end;justify-content:center}
.tile .ic img{max-height:48px;max-width:92%;object-fit:contain}
.tile .nm{font-weight:800;font-size:12.5px;line-height:1.1;margin-top:2px}
.tile .pr{font-weight:900;font-size:13px;color:var(--green)}
.tile.cant .pr{color:var(--red)}
.ic .pathic{width:56px;height:28px;background:url(assets/court_tex.webp) center/80px;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);margin-bottom:12px}
.ic .bulldoze{font-family:Stencil,Oswald;font-size:15px;color:var(--red);border:3px solid var(--red);border-radius:6px;padding:2px 5px;transform:rotate(-10deg);margin-bottom:14px}
.ic .fenceic{width:70px;height:46px;background:url(assets/fence_tex.png) left bottom/35px 46px repeat-x;transform:skewY(-20deg)}
.hint{font-size:12.5px;margin:8px 2px 0;opacity:.8;line-height:1.3}

/* forms */
.form h2{font-family:Stencil,Oswald,sans-serif;font-weight:400;letter-spacing:.05em;font-size:21px;margin:0;line-height:1.05}
.formhead{display:flex;gap:10px;align-items:center;border:2px solid #cfc6aa;border-radius:6px;padding:6px 8px;background:#fbf8ee;margin-bottom:8px}
.formhead img{height:48px;width:40px;object-fit:contain}
.formhead .x{margin-left:auto;align-self:flex-start;border:0;background:none;font-size:20px;font-weight:900;opacity:.6}
.kv{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;font-size:14px;margin:4px 2px 8px}
.kv b{font-weight:800}
.kv .v{font-weight:800}
.good{color:var(--green)}.bad{color:var(--red)}.warn{color:#b07d00}
.rule{border:0;border-top:3px solid var(--ink);margin:8px 0;opacity:.85}
.sub{font-family:Oswald,sans-serif;font-weight:600;letter-spacing:.04em;text-transform:uppercase;font-size:14px;margin:8px 0 6px}
.bar{height:10px;border-radius:5px;background:#e2dac3;overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,0,0,.2)}
.bar i{display:block;height:100%;background:var(--green);border-radius:5px;transition:width .4s}
.needs{display:grid;grid-template-columns:70px 1fr 34px;gap:4px 8px;align-items:center;font-size:13px;font-weight:700}
.goals{margin:0;padding:0;list-style:none;font-size:13.5px}
.goals li{display:flex;gap:7px;align-items:flex-start;padding:3px 0;line-height:1.25}
.goals li::before{content:"";flex:none;width:14px;height:14px;margin-top:1px;border:2px solid var(--ink);border-radius:3px}
.goals li.done{opacity:.55;text-decoration:line-through}
.goals li.done::before{background:var(--green);border-color:var(--green)}
.goals li.cur{font-weight:800}
.stars{color:#d9a400;font-size:18px;letter-spacing:1px}

/* buttons */
.navy{border:0;border-radius:8px;background:linear-gradient(#34497a,var(--navy));color:var(--cream);font-weight:900;box-shadow:0 5px 0 var(--navyd),0 6px 8px rgba(0,0,0,.2);transition:transform .08s,box-shadow .08s,filter .1s}
.navy:hover{filter:brightness(1.12);transform:translateY(-1px);box-shadow:0 6px 0 var(--navyd),0 7px 9px rgba(0,0,0,.2)}
.navy:active{transform:translateY(4px);box-shadow:0 1px 0 var(--navyd)}
.navy:disabled{filter:grayscale(.7) brightness(1.2);cursor:not-allowed}
.big{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:10px 8px 9px;margin:10px 0 6px;flex-direction:column;line-height:1.1}
.big .l{font-family:Oswald,sans-serif;font-size:21px;letter-spacing:.06em;display:flex;align-items:center;gap:8px}
.big .l img{height:24px}
.big .c{font-size:14px;font-weight:800;opacity:.9}
.small{padding:7px 12px;font-size:13px}
.plain{border:2px solid #b9b09a;border-radius:7px;background:#fbf8ee;font-weight:800;box-shadow:0 3px 0 #b9b09a}
.plain:active{transform:translateY(2px);box-shadow:none}
.danger{color:var(--red);border-color:#d9a49d;box-shadow:0 3px 0 #d9a49d}

/* staff badges */
.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:6px}
.badge{position:relative;border:2px solid #b9b09a;border-radius:7px;background:#fff;text-align:center;padding:4px 3px 4px;overflow:hidden;min-height:112px}
.badge::before{content:"";display:block;height:6px;margin:-4px -3px 4px;background:var(--navy)}
.badge.cook::before{background:#7a7a7a}
.badge img{width:46px;height:46px;object-fit:cover;object-position:top;border-radius:4px;background:#dfe7ee}
.badge .n{font-family:Elite,monospace;font-size:11px;line-height:1.1;margin-top:2px;word-break:break-word}
.badge .w{font-size:11px;font-weight:800;color:var(--red)}
.badge button{margin-top:3px;border:0;background:none;font-size:11px;font-weight:800;text-decoration:underline;color:#6b6252;padding:0}
.badge.vacant{border:2px dashed #b9b09a;background:#f6f1e2;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#958b74;font-weight:900;font-size:11px;cursor:pointer}
.badge.vacant::before{display:none}
.badge.vacant .sil{width:30px;height:34px;background:#cfc6ae;border-radius:15px 15px 4px 4px;margin-bottom:4px;clip-path:polygon(30% 0,70% 0,75% 45%,100% 70%,100% 100%,0 100%,0 70%,25% 45%)}
.stampmark{position:absolute;left:50%;top:44%;font-family:Stencil,Oswald;font-size:20px;color:var(--red);border:3px solid var(--red);border-radius:5px;padding:0 4px;
  transform:translate(-50%,-50%) rotate(-14deg);opacity:0;pointer-events:none;background:rgba(255,255,255,.2);animation:stamp 1.4s ease-out forwards}
@keyframes stamp{0%{opacity:0;transform:translate(-50%,-50%) rotate(-14deg) scale(2.4)}18%{opacity:1;transform:translate(-50%,-50%) rotate(-14deg) scale(.92)}26%{transform:translate(-50%,-50%) rotate(-14deg) scale(1)}75%{opacity:.95}100%{opacity:0}}
.badge.fresh{animation:fill .5s .3s both}
@keyframes fill{from{filter:grayscale(1) opacity(.4)}to{filter:none}}

/* finances */
.ledger{width:100%;border-collapse:collapse;font-size:13.5px}
.ledger td{padding:3px 2px;border-bottom:1px dashed #cfc6aa}
.ledger td:last-child{text-align:right;font-weight:800}
.ledger tr.tot td{border-top:2px solid var(--ink);border-bottom:0;font-weight:900}
.chart{display:flex;align-items:flex-end;gap:3px;height:70px;padding:4px;border:2px solid #cfc6aa;border-radius:6px;background:#fbf8ee;position:relative}
.chart i{flex:1;background:var(--green);border-radius:2px 2px 0 0;min-height:2px}
.chart i.n{background:var(--red)}
.land{display:flex;gap:8px;align-items:center;border:2px solid #ddd3b8;border-radius:8px;background:#fbf8ee;padding:7px 8px;margin-bottom:6px}
.land .mapmini{width:46px;height:42px;flex:none;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;transform:rotate(45deg) scale(.72)}
.land .mapmini i{background:#e2d6b5;border-radius:1px}.land .mapmini i.o{background:var(--mint)}.land .mapmini i.s{background:var(--orange)}
.land .t{flex:1;font-size:13px;line-height:1.25}.land .t b{font-size:14px}

/* overlays on the map */
#orderchip{position:fixed;z-index:12;left:8px;top:calc(var(--topH) + 8px);max-width:min(420px,calc(100vw - var(--boardW) - 90px));background:var(--cream);border:2px solid #b9b09a;border-left:8px solid var(--hazard);
  border-radius:6px;padding:6px 10px;font-size:13.5px;font-weight:700;box-shadow:0 3px 6px rgba(0,0,0,.2);line-height:1.25}
#orderchip b{font-family:Oswald;letter-spacing:.06em;margin-right:4px}
#mapbtns{position:fixed;z-index:12;left:8px;top:calc(var(--topH) + 60px);display:flex;flex-direction:column;gap:6px}
#mapbtns button{width:46px;height:40px;border-radius:8px;border:2px solid #8e877a;background:linear-gradient(#f4efe3,#d9d3c5);font-weight:900;font-size:22px;box-shadow:0 3px 0 #8e877a;line-height:1}
#mapbtns #cov{font-size:9px;height:40px;font-family:Oswald;letter-spacing:.04em}
#mapbtns #cov.on{background:linear-gradient(#ffe27a,var(--hazard))}
#mapbtns button:active{transform:translateY(2px);box-shadow:0 1px 0 #8e877a}
#confirm{position:fixed;z-index:14;left:50%;transform:translateX(-50%);bottom:150px;display:flex;align-items:center;gap:8px;background:var(--cream);border:2px solid #8fbba0;border-radius:10px;padding:7px 9px;box-shadow:0 4px 10px rgba(0,0,0,.3);font-weight:800;font-size:14px;white-space:nowrap}
#confirm[hidden]{display:none}

#chat{position:fixed;z-index:13;left:8px;bottom:8px;width:min(380px,calc(100vw - var(--boardW) - 32px));background:linear-gradient(135deg,#c8e3cf,#a9cdb4);border:2px solid #6f9a7f;border-radius:12px;padding:7px;box-shadow:0 5px 12px rgba(0,0,0,.28)}
#chatlog{background:var(--cream);border-radius:6px;padding:6px 8px;max-height:132px;overflow-y:auto;font-size:13px;line-height:1.3;margin-bottom:6px;box-shadow:inset 0 1px 3px rgba(0,0,0,.15)}
#chatlog p{margin:0 0 4px}
#chatlog .me{font-weight:800}
#chatlog .me::before{content:"WARDEN: ";font-family:Oswald;color:var(--navy);letter-spacing:.04em}
#chatlog .ctl{font-family:Elite,monospace}
#chatlog .ctl::before{content:"CONTROL: ";font-family:Oswald;color:var(--orange);letter-spacing:.04em}
#chatlog .ctl.bad{color:var(--red)}
#chips{display:flex;gap:5px;overflow-x:auto;margin-bottom:6px;scrollbar-width:none}
#chips button{flex:none;border:2px solid #b9b09a;border-radius:14px;background:#fbf8ee;padding:3px 10px;font-weight:800;font-size:12.5px;box-shadow:0 2px 0 #b9b09a}
#chips button:active{transform:translateY(2px);box-shadow:none}
#chatform{display:flex;gap:6px;align-items:center}
#chatform .mic{font-family:Oswald;font-size:12px;background:var(--hazard);border-radius:5px;padding:7px 6px;letter-spacing:.05em}
#chatin{flex:1;min-width:0;height:36px;border:2px solid #b9b09a;border-radius:7px;background:#fff;padding:0 9px;font:inherit;font-size:15px;font-weight:700}
#chatin:focus{outline:2px solid var(--navy)}

#toasts{position:fixed;z-index:30;left:50%;top:calc(var(--topH) + 8px);transform:translateX(-50%);display:flex;flex-direction:column;gap:6px;align-items:center;pointer-events:none;width:min(440px,92vw)}
.toast{pointer-events:auto;background:var(--cream);border:2px solid #8fbba0;border-radius:8px;padding:7px 11px;font-weight:700;font-size:14px;box-shadow:0 4px 10px rgba(0,0,0,.28);animation:tin .35s cubic-bezier(.3,1.6,.5,1);display:flex;gap:8px;align-items:center}
.toast.warn{border-top:7px solid;border-image:repeating-linear-gradient(-45deg,var(--hazard) 0 10px,var(--ink) 10px 20px) 7 0 0 0}
.toast.good{border-color:var(--green)}
.toast button{border:0;background:var(--navy);color:var(--cream);border-radius:5px;padding:3px 8px;font-weight:800;font-size:12px}
@keyframes tin{from{transform:translateY(-14px) scale(.9);opacity:0}}
.toast.out{transition:opacity .4s,transform .4s;opacity:0;transform:translateY(-8px)}
#floaters{position:fixed;inset:0;pointer-events:none;z-index:40}
.float{position:absolute;font-weight:900;font-size:18px;animation:fl 1.5s ease-out forwards;text-shadow:0 1px 0 #fff,0 0 3px #fff}
.float.neg{color:var(--red)}.float.pos{color:var(--green)}
@keyframes fl{0%{transform:translateY(-6px);opacity:0}12%{opacity:1}100%{transform:translateY(34px);opacity:0}}

#modal{position:fixed;inset:0;z-index:50;background:rgba(60,48,28,.45);display:flex;align-items:center;justify-content:center;padding:14px}
#modal[hidden]{display:none}
#modal .steel{position:relative;width:min(520px,100%);max-height:100%;display:flex;flex-direction:column;border-radius:16px;padding:22px 12px 14px;background:linear-gradient(135deg,#c8e3cf,#a9cdb4 60%,#9cc3a8);border:2px solid #6f9a7f;box-shadow:0 10px 30px rgba(0,0,0,.4);animation:tin .4s cubic-bezier(.3,1.5,.5,1)}
#modalbody{overflow-y:auto;font-size:14.5px;line-height:1.4}
#modalbody.warnform{border-top:12px solid;border-image:repeating-linear-gradient(-45deg,var(--hazard) 0 14px,var(--ink) 14px 28px) 12 0 0 0}
#modalbody p{margin:6px 0}
#modalbody ul{margin:6px 0;padding-left:18px}
#modalbody li{margin:3px 0}
.btnrow{display:flex;gap:8px;margin-top:10px}
.btnrow .navy{flex:1;padding:12px;font-size:17px;font-family:Oswald;letter-spacing:.06em}
.lb{font-size:13px;margin:6px 0}.lb a{color:var(--navy);font-weight:800}

/* ---------- narrow / portrait ---------- */
@media (max-aspect-ratio:1/1),(max-width:640px){
  :root{--topH:46px}
  .plaque{display:none}
  #top{gap:4px;padding:4px 5px}
  .readout{height:36px;padding:2px 5px;gap:3px}
  .money{font-size:16px;min-width:0;flex:1.4;padding:2px 4px}
  .stat{flex:none;min-width:0}
  .stat img{width:18px;height:18px}
  .stat b{font-size:12.5px;white-space:nowrap}.stat small{display:none}
  .date{min-width:0;flex:none;padding:2px 5px}.date b{font-size:11px;white-space:nowrap}.date small{font-size:10.5px;white-space:nowrap}
  .speed{gap:2px;padding:2px}
  .speed button{width:27px;height:30px}
  .speed button[data-s="4"]{display:none}
  .ic-play{border-left-width:6px;border-top-width:5px;border-bottom-width:5px}
  .tbtn{position:fixed;top:calc(var(--topH) + 6px);right:6px;min-width:34px;height:28px;font-size:10px;padding:0 3px;z-index:21}
  #btnSound{right:46px}
  #btnLoad{right:86px}
  #btnSave{right:126px}
  #board{left:0;right:0;bottom:0;top:auto;width:auto;height:var(--boardH);border-radius:16px 16px 0 0;padding:24px 8px 6px;transition:height .25s}
  body.folded #board{height:58px}
  body.folded{--boardH:58px}
  #board .rivet.bl,#board .rivet.br{display:none}
  #clip{width:120px;top:-8px}
  #sheets{flex-direction:column}
  .grid{grid-template-columns:repeat(4,1fr)}
  .tile .ic{height:46px}.tile .ic img{max-height:46px}
  #chat{left:6px;right:6px;width:auto;bottom:calc(var(--boardH) + 6px);padding:5px;transition:bottom .25s}
  #chatlog{max-height:40px;font-size:12px;margin-bottom:4px;padding:3px 7px}
  #chips{margin-bottom:4px}
  #chatin{height:34px;font-size:14px}
  #orderchip{max-width:calc(100vw - 180px);font-size:12px;padding:4px 8px;left:6px;top:calc(var(--topH) + 6px)}
  #mapbtns{top:auto;left:auto;right:8px;bottom:calc(var(--boardH) + 150px);transition:bottom .25s}
  #mapbtns button{width:40px;height:36px}
  #confirm{bottom:calc(var(--boardH) + 148px)}
  #toasts{top:calc(var(--topH) + 40px)}
}
@media (max-width:400px){ .grid{grid-template-columns:repeat(3,1fr)} }
@media (min-aspect-ratio:1/1) and (max-height:500px){
  :root{--topH:44px}
  .plaque{font-size:14px;padding:4px 10px}
  .readout{height:34px}.money{font-size:18px;min-width:100px}
  #board{padding-top:24px}
  #chatlog{max-height:40px}
  .tile .ic{height:40px}.tile .ic img{max-height:40px}
  #confirm{bottom:120px}
}
@media (min-aspect-ratio:1/1) and (max-width:900px){ .plaque{display:none} }

/* close buttons */
.closex{position:absolute;z-index:4;width:34px;height:34px;border-radius:50%;border:2px solid #6f9a7f;background:linear-gradient(#f4efe3,#d9d3c5);font-size:22px;font-weight:900;line-height:1;color:var(--ink);box-shadow:0 2px 0 #6f9a7f;padding:0}
.closex:active{transform:translateY(2px);box-shadow:none}
#boardX{right:22px;top:2px;width:28px;height:28px;font-size:19px}
#modalX{right:-8px;top:-10px}
body.boardclosed #board{display:none}
body.boardclosed{--boardW:0px;--boardH:0px}
#boardOpen{position:fixed;z-index:15;right:8px;top:calc(var(--topH) + 8px);display:flex;align-items:center;gap:6px;border:2px solid #6f9a7f;border-radius:10px;padding:5px 10px;background:linear-gradient(135deg,#c8e3cf,#a9cdb4);font-family:Oswald;letter-spacing:.06em;font-size:14px;box-shadow:0 3px 8px rgba(0,0,0,.25)}
#boardOpen img{width:44px}
#boardOpen[hidden]{display:none}
@media (max-aspect-ratio:1/1),(max-width:640px){
  #boardX{right:12px;top:-2px}
  #boardOpen{top:auto;bottom:8px;right:8px}
  body.boardclosed #chat{bottom:56px}
  body.boardclosed #mapbtns{bottom:200px}
}
.ic .moveic{color:#25365C;border-color:#25365C;transform:rotate(6deg)}
#mapbtns button.rot{font-size:24px;font-family:system-ui,sans-serif}
#compass{width:46px;height:34px;display:flex;align-items:center;justify-content:center}
#compass i{display:block;font-style:normal;font-family:Oswald,sans-serif;font-weight:700;font-size:13px;color:#F4EEDC;background:#25365C;border-radius:50%;width:26px;height:26px;line-height:26px;text-align:center;transition:transform .3s;position:relative;box-shadow:0 2px 0 rgba(0,0,0,.25)}
#compass i::before{content:"";position:absolute;left:50%;top:-7px;margin-left:-5px;border:5px solid transparent;border-bottom:7px solid #C23B2E;border-top:0}
@media (max-aspect-ratio:1/1),(max-width:640px){ #compass{width:40px} }
@media (min-aspect-ratio:1/1) and (max-height:560px){
  #mapbtns{display:grid;grid-template-columns:repeat(2,40px);gap:5px;top:calc(var(--topH) + 50px)}
  #mapbtns button{width:40px;height:34px;font-size:19px}
  #mapbtns button.rot{font-size:20px}
  #compass{width:40px;height:34px}
}

.tbtn.busy{opacity:.55;pointer-events:none}
@media (min-aspect-ratio:1/1) and (max-height:500px){ .stat small{display:none} .stat b{white-space:nowrap} #top .tbtn{min-width:0;padding:0 6px} }