:root{
  --bg:#2e63c6; --ink:#faf8f0; --deck:52px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
body{
  background:var(--bg);color:var(--ink);
  font:500 11px/1.3 "IBM Plex Mono",ui-monospace,monospace;
  -webkit-font-smoothing:antialiased;
  touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
}

#stage{position:fixed;inset:0 0 var(--deck) 0;overflow:hidden}

/* cuerpos */
.b{position:absolute;left:0;top:0;will-change:transform;cursor:grab;touch-action:none}
.b:active,.b.held{cursor:grabbing}
.cover{background:#000 center/cover no-repeat;box-shadow:0 10px 24px rgba(6,20,60,.28)}
.word{font:600 15px/1 "Archivo",sans-serif;white-space:nowrap;padding:4px 2px}
.name{
  font:900 40px/.84 "Archivo",sans-serif;font-stretch:125%;letter-spacing:-.01em;
  white-space:nowrap;padding:6px 4px;
}
.link{
  font:600 13px/1 "Archivo",sans-serif;white-space:nowrap;
  padding:9px 13px;border:1.5px solid var(--ink);border-radius:999px;
}
.link.live{background:var(--ink);color:var(--bg)}
.link.pend{opacity:.5;border-style:dashed}
.link small{font:500 9px/1 "IBM Plex Mono",monospace;letter-spacing:.06em;margin-left:6px}
.on.cover{outline:2px solid var(--ink);outline-offset:3px}
.on.word{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}

#now{
  position:absolute;left:16px;right:16px;top:14px;z-index:1000;
  font-size:11px;min-height:2.6em;pointer-events:none;
}
#now b{font:700 17px/1.1 "Archivo",sans-serif;font-stretch:110%;display:block;letter-spacing:-.01em}
#hint{
  position:absolute;left:0;right:0;bottom:12px;text-align:center;z-index:1000;
  font-size:11px;opacity:.7;pointer-events:none;transition:opacity .8s;
}

#deck{
  position:fixed;left:0;right:0;bottom:0;height:var(--deck);
  padding:0 16px env(safe-area-inset-bottom);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  border-top:1px solid rgba(250,248,240,.35);
}
#g b{font:800 18px/1 "Archivo",sans-serif;font-stretch:115%}
.disc{font-size:9px;letter-spacing:.08em;opacity:.6;text-align:right}

@media (min-width:760px){
  .name{font-size:96px}
  .word{font-size:19px}
  .link{font-size:15px}
  #now{left:28px;top:22px}
  #deck{padding-left:28px;padding-right:28px}
}
[hidden]{display:none!important}