:root{
  --ink:#07080c; --paper:#f4efe2; --teal:#00e5b0; --magenta:#ff2f7e; --muted:#9aa3b2;
  --line:rgba(244,239,226,.14);
  --display:"Bricolage Grotesque",system-ui,sans-serif;
  --mono:"Space Mono",ui-monospace,monospace;
}
*{box-sizing:border-box}
html,body{height:100vh;height:100dvh;margin:0}
body{background:var(--ink);color:var(--paper);font-family:var(--mono);overflow:hidden;
  -webkit-font-smoothing:antialiased;overscroll-behavior:none}

#mosaic{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;display:block;background:#05060a;
  touch-action:none;cursor:grab}
#mosaic:active{cursor:grabbing}

.tip{position:fixed;z-index:40;pointer-events:none;background:rgba(5,6,10,.92);color:var(--paper);
  border:1px solid var(--teal);border-radius:8px;padding:.34rem .6rem;font-size:.8rem;
  white-space:nowrap;transform:translate(-50%,-165%);box-shadow:0 10px 24px -12px #000;max-width:60vw;overflow:hidden;text-overflow:ellipsis}

/* search dock — bottom left */
.dock{position:fixed;left:max(.9rem,env(safe-area-inset-left));
  bottom:calc(max(.9rem,env(safe-area-inset-bottom)) + 3.4rem);z-index:30;width:min(300px,68vw)}
.dock-label{display:block;font-family:var(--display);font-weight:800;font-size:.8rem;margin:0 0 .35rem;
  text-shadow:0 2px 10px rgba(0,0,0,.85)}
.search{position:relative}
.search input{width:100%;background:rgba(7,8,12,.85);color:var(--paper);border:1px solid var(--line);
  border-radius:10px;padding:.6rem .7rem;font-family:var(--mono);font-size:16px;
  backdrop-filter:blur(8px);box-shadow:0 12px 30px -16px #000}
.search input:focus{outline:none;border-color:var(--teal)}
.search input::placeholder{color:#6b7486}
.suggest{position:absolute;bottom:calc(100% + .4rem);left:0;right:0;z-index:31;
  background:rgba(7,8,12,.97);border:1px solid var(--line);border-radius:10px;overflow:hidden;
  max-height:44vh;overflow-y:auto;backdrop-filter:blur(8px);box-shadow:0 18px 40px -18px #000}
.suggest button{display:block;width:100%;text-align:left;background:none;border:none;color:var(--paper);
  padding:.6rem .7rem;font-family:var(--mono);font-size:.85rem;cursor:pointer}
.suggest button:hover,.suggest button.active{background:rgba(0,229,176,.16);color:var(--teal)}
.status{margin:.5rem 0 0;font-size:.78rem;color:var(--muted);line-height:1.4;text-shadow:0 2px 8px rgba(0,0,0,.85)}
.status b{color:var(--paper)}
.status .clear{display:inline-block;margin-left:.35rem;padding:.05rem .45rem;border:1px solid var(--teal);
  border-radius:6px;color:var(--teal);cursor:pointer;text-decoration:none}
.status .clear:hover{background:rgba(0,229,176,.16)}

/* zoom controls — bottom right */
.zoomctl{position:fixed;right:max(.9rem,env(safe-area-inset-right));
  bottom:calc(max(.9rem,env(safe-area-inset-bottom)) + 3.4rem);z-index:30;display:flex;flex-direction:column;gap:.4rem}
.zoomctl button{width:44px;height:44px;border-radius:11px;border:1px solid var(--line);
  background:rgba(7,8,12,.85);color:var(--paper);font-size:1.25rem;line-height:1;cursor:pointer;
  backdrop-filter:blur(8px);box-shadow:0 12px 30px -16px #000;display:flex;align-items:center;justify-content:center}
.zoomctl button:hover{border-color:var(--teal);color:var(--teal)}
.zoomctl button:active{transform:translateY(1px)}

/* Discord button — bottom center */
.join{position:fixed;left:50%;transform:translateX(-50%);
  bottom:max(.9rem,env(safe-area-inset-bottom));z-index:30;
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;background:#5865F2;color:#fff;
  font-family:var(--display);font-weight:800;font-size:.9rem;line-height:1.05;text-decoration:none;text-align:center;
  padding:.7rem 1.1rem;border-radius:22px;max-width:calc(100vw - 1.2rem);white-space:normal;
  box-shadow:0 14px 34px -12px rgba(0,0,0,.85);transition:transform .12s,filter .2s}
.join:hover{filter:brightness(1.07);transform:translateX(-50%) translateY(-1px)}
.join:active{transform:translateX(-50%) translateY(1px)}
.join .pc{flex:0 0 auto}

.hint{position:fixed;left:50%;transform:translateX(-50%);top:max(.7rem,env(safe-area-inset-top));
  z-index:25;margin:0;font-size:.72rem;color:var(--muted);text-shadow:0 2px 8px rgba(0,0,0,.9);
  pointer-events:none;transition:opacity .5s;text-align:center;white-space:nowrap}
.hint.gone{opacity:0}

@media (max-width:560px){
  .join{font-size:.8rem;padding:.6rem .9rem}
  .dock{width:min(220px,60vw)}
  .zoomctl button{width:40px;height:40px}
  .hint{font-size:.66rem}
}