/* THE CONTROLS OF EVERY SPACE.

   One panel, built by controls.js from what a space says its keys mean: a ring
   of four arrows wherever there is somewhere to walk, and under it a row per
   key, a cap and a gloss. Hairline and ink like the rest of the house, with
   the one vermillion the house allows, used only to say what is live.

   Lifted out of en-marge's own dial, which had been copied by hand from the
   roji's key rows: three files were keeping the same eight pixels and the same
   .16em in step by accident. */

.ctl[hidden]{display:none !important;}
.ctl{position:fixed;left:clamp(18px,3.2vw,34px);bottom:clamp(18px,3.2vw,34px);
  z-index:20;display:flex;align-items:flex-end;gap:16px;
  --ro:#e34234;}

/* THE RING AND ITS ARROWS TAKE THE SITE'S OWN VERMILLION, and the arrows are
   solid: an outlined triangle at this size reads as a smudge rather than a
   direction. */
.ctl-ring{position:relative;width:96px;height:96px;border-radius:50%;
  border:1px solid rgba(227,66,52,0.52);
  background:rgba(18,14,10,0.30);backdrop-filter:blur(3px);}
/* ONE TRIANGLE, TURNED FOUR WAYS. A font's own glyphs come out 12.9 of ink
   across for the vertical pair and 10.0 for the horizontal one, a difference
   of nearly a third on a dial whose whole job is to look even. So the arrow is
   drawn rather than typed: a single border triangle, --a degrees round,
   identical by construction. */
.ctl-ring .ar{position:absolute;background:none;border:0;padding:0;cursor:pointer;
  width:26px;height:26px;opacity:.82;
  transition:opacity .18s ease,transform .18s ease;}
.ctl-ring .ar::before{content:"";position:absolute;left:50%;top:50%;
  width:0;height:0;
  border-left:6px solid transparent;border-right:6px solid transparent;
  border-bottom:10px solid var(--ro);
  transform:translate(-50%,-50%) rotate(var(--a));}
.ctl-ring .ar:hover{opacity:1;}
.ctl-ring .ar.on{opacity:1;transform:scale(1.22);}
/* placed on the ring's own axes, by its middle rather than by an offset
   counted from a corner */
.ctl-ring .up{--a:0deg;top:0;left:50%;margin:5px 0 0 -13px;}
.ctl-ring .dn{--a:180deg;bottom:0;left:50%;margin:0 0 5px -13px;}
.ctl-ring .lf{--a:-90deg;left:0;top:50%;margin:-13px 0 0 5px;}
.ctl-ring .rt{--a:90deg;right:0;top:50%;margin:-13px 5px 0 0;}

/* THE ROWS. No border on a cap: an outlined cap is a button waiting to be
   pressed, and these name keys that are already under the hand. They ARE
   pressable all the same, because a phone has no keys at all. */
.ctl .keys{display:flex;flex-direction:column;gap:3px;padding-bottom:8px;}
.ctl .krow{display:flex;align-items:center;gap:9px;line-height:1;
  background:none;border:0;padding:0;margin:0;cursor:pointer;
  text-align:left;}
.ctl .krow.label{cursor:default;}
.ctl kbd{font:600 8px/1 system-ui,sans-serif;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.94);
  border:0;border-radius:3px;background:rgba(18,14,10,.34);
  padding:4px 0 3px;min-width:50px;text-align:center;text-indent:.16em;
  flex:0 0 auto;transition:background .2s ease,color .2s ease;}
.ctl .d{font-size:10.5px;letter-spacing:.10em;
  color:rgba(255,255,255,.62);transition:color .2s ease;}
.ctl .krow:hover kbd{color:#fff;background:rgba(227,66,52,.55);}
.ctl .krow.label:hover kbd{color:rgba(255,255,255,.94);
  background:rgba(18,14,10,.34);}
.ctl .krow.on kbd{color:#fff;background:var(--ro);
  box-shadow:0 0 0 3px rgba(227,66,52,.18);}
.ctl .krow.on .d{color:rgba(227,66,52,.92);}

@media (max-width:760px){
  .ctl{gap:12px;}
  .ctl-ring{width:84px;height:84px;}
}