/* TL3 ARROW PAD 1.0.0 — the look. A game sets the colours on its own wrapper:
   --tl3pad-face (the arms), --tl3pad-edge (their edge), --tl3pad-ink (the arrows), --tl3pad-on (a pressed arm), --tl3pad-on-ink,
   and, for picture arrows, --tl3pad-art-up/-down/-left/-right (+ the -on versions) with the tl3pad--art class on the wrapper. */
.tl3pad{--tl3pad-face:rgba(244,239,230,.08);--tl3pad-edge:rgba(244,239,230,.28);--tl3pad-ink:#F4EFE6;--tl3pad-on:rgba(225,180,87,.6);--tl3pad-on-ink:#FFF6DC;
  --tl3pad-size:220px;display:flex;width:100%;justify-content:center;align-items:center;margin:0 auto;box-sizing:border-box;user-select:none;-webkit-user-select:none;touch-action:none}
.tl3pad--hand-left{justify-content:flex-start}.tl3pad--hand-right{justify-content:flex-end}.tl3pad--hand-center{justify-content:center}
.tl3pad--s{--tl3pad-size:160px}.tl3pad--m{--tl3pad-size:220px}.tl3pad--l{--tl3pad-size:min(300px,88vw)}
.tl3pad__area{position:relative;width:var(--tl3pad-size);height:var(--tl3pad-size);flex:0 0 auto;touch-action:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.tl3pad__arm{position:absolute;box-sizing:border-box;background:var(--tl3pad-face);border:1px solid var(--tl3pad-edge);transition:background .06s}
.tl3pad__arm.is-on{background:var(--tl3pad-on);border-color:var(--tl3pad-on-ink)}
.tl3pad__glyph{position:absolute;width:22%;height:22%;background:var(--tl3pad-ink);opacity:.92;pointer-events:none}
.tl3pad__arm.is-on .tl3pad__glyph{background:var(--tl3pad-on-ink);opacity:1}
.tl3pad__rest{position:absolute;left:50%;top:50%;width:13%;height:13%;transform:translate(-50%,-50%);border-radius:50%;background:rgba(0,0,0,.35);box-shadow:inset 0 1px 2px rgba(0,0,0,.6);pointer-events:none}
.tl3pad--norest .tl3pad__rest,.tl3pad--stick .tl3pad__rest{display:none}
.tl3pad__base{display:none}
/* CROSS — four fat arms, their inner points meeting in the middle (no gaps, no dead centre but the rest spot) */
.tl3pad--cross .tl3pad__arm{width:42%;height:50%;border-radius:12px 12px 0 0}
.tl3pad--cross .tl3pad__arm[data-dir=up]{left:29%;top:0;clip-path:polygon(0 0,100% 0,100% 62%,50% 100%,0 62%)}
.tl3pad--cross .tl3pad__arm[data-dir=down]{left:29%;bottom:0;border-radius:0 0 12px 12px;clip-path:polygon(50% 0,100% 38%,100% 100%,0 100%,0 38%)}
.tl3pad--cross .tl3pad__arm[data-dir=left]{left:0;top:29%;width:50%;height:42%;border-radius:12px 0 0 12px;clip-path:polygon(0 0,62% 0,100% 50%,62% 100%,0 100%)}
.tl3pad--cross .tl3pad__arm[data-dir=right]{right:0;top:29%;width:50%;height:42%;border-radius:0 12px 12px 0;clip-path:polygon(38% 0,100% 0,100% 100%,38% 100%,0 50%)}
.tl3pad--cross .tl3pad__arm[data-dir=up] .tl3pad__glyph{left:39%;top:14%;clip-path:polygon(50% 8%,96% 92%,4% 92%)}
.tl3pad--cross .tl3pad__arm[data-dir=down] .tl3pad__glyph{left:39%;bottom:14%;clip-path:polygon(4% 8%,96% 8%,50% 92%)}
.tl3pad--cross .tl3pad__arm[data-dir=left] .tl3pad__glyph{left:14%;top:39%;clip-path:polygon(8% 50%,92% 4%,92% 96%)}
.tl3pad--cross .tl3pad__arm[data-dir=right] .tl3pad__glyph{right:14%;top:39%;clip-path:polygon(8% 4%,92% 50%,8% 96%)}
/* ROUND — a circle cut into four slices along the diagonals */
.tl3pad--round .tl3pad__area{border-radius:50%;overflow:hidden;background:var(--tl3pad-edge);box-shadow:0 0 0 1px var(--tl3pad-edge)}
.tl3pad--round .tl3pad__arm{left:0;top:0;width:100%;height:100%;border:0;border-radius:0}
.tl3pad--round .tl3pad__arm[data-dir=up]{clip-path:polygon(50% 50%,0 0,100% 0)}
.tl3pad--round .tl3pad__arm[data-dir=right]{clip-path:polygon(50% 50%,100% 0,100% 100%)}
.tl3pad--round .tl3pad__arm[data-dir=down]{clip-path:polygon(50% 50%,100% 100%,0 100%)}
.tl3pad--round .tl3pad__arm[data-dir=left]{clip-path:polygon(50% 50%,0 100%,0 0)}
.tl3pad--round .tl3pad__arm .tl3pad__glyph{width:14%;height:14%}
.tl3pad--round .tl3pad__arm[data-dir=up] .tl3pad__glyph{left:43%;top:11%;clip-path:polygon(50% 8%,96% 92%,4% 92%)}
.tl3pad--round .tl3pad__arm[data-dir=down] .tl3pad__glyph{left:43%;bottom:11%;clip-path:polygon(4% 8%,96% 8%,50% 92%)}
.tl3pad--round .tl3pad__arm[data-dir=left] .tl3pad__glyph{left:11%;top:43%;clip-path:polygon(8% 50%,92% 4%,92% 96%)}
.tl3pad--round .tl3pad__arm[data-dir=right] .tl3pad__glyph{right:11%;top:43%;clip-path:polygon(8% 4%,92% 50%,8% 96%)}
.tl3pad--round .tl3pad__rest{width:16%;height:16%;background:rgba(0,0,0,.45)}
.tl3pad--round .tl3pad__area::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(45deg,transparent calc(50% - 1px),rgba(0,0,0,.5) 50%,transparent calc(50% + 1px)),linear-gradient(-45deg,transparent calc(50% - 1px),rgba(0,0,0,.5) 50%,transparent calc(50% + 1px))}
/* STICK — a base and a knob; fixed in the middle, or floating under the thumb anywhere in the pad's strip */
.tl3pad--stick .tl3pad__arm{display:none}
.tl3pad--stick .tl3pad__base{display:block;position:absolute;left:50%;top:50%;width:55%;height:55%;transform:translate(-50%,-50%);border-radius:50%;background:var(--tl3pad-face);border:1px solid var(--tl3pad-edge);box-shadow:inset 0 0 0 6px rgba(0,0,0,.18)}
.tl3pad__knob{position:absolute;left:50%;top:50%;width:55%;height:55%;margin:-27.5% 0 0 -27.5%;border-radius:50%;background:var(--tl3pad-ink);box-shadow:0 2px 6px rgba(0,0,0,.5),inset 0 -3px 0 rgba(0,0,0,.25);transition:transform .02s linear}
.tl3pad--stick .tl3pad__area.is-held .tl3pad__base{background:var(--tl3pad-on)}
.tl3pad--stick .tl3pad__area.is-held .tl3pad__knob{background:var(--tl3pad-on-ink)}
.tl3pad--floating .tl3pad__area{width:100%;border-radius:14px;background:rgba(255,255,255,.03);border:1px dashed var(--tl3pad-edge)}
.tl3pad--floating .tl3pad__base{width:calc(var(--tl3pad-size)*.55);height:calc(var(--tl3pad-size)*.55);opacity:.35}
.tl3pad--floating .tl3pad__base.is-placed{opacity:1}
/* picture arrows (a game's own renders) */
.tl3pad--art .tl3pad__glyph{clip-path:none!important;background:center/contain no-repeat!important;opacity:1;width:46%;height:46%}
.tl3pad--art.tl3pad--cross .tl3pad__arm[data-dir=up] .tl3pad__glyph{left:27%;top:8%;background-image:var(--tl3pad-art-up)!important}
.tl3pad--art.tl3pad--cross .tl3pad__arm[data-dir=down] .tl3pad__glyph{left:27%;bottom:8%;background-image:var(--tl3pad-art-down)!important}
.tl3pad--art.tl3pad--cross .tl3pad__arm[data-dir=left] .tl3pad__glyph{left:8%;top:27%;background-image:var(--tl3pad-art-left)!important}
.tl3pad--art.tl3pad--cross .tl3pad__arm[data-dir=right] .tl3pad__glyph{right:8%;top:27%;background-image:var(--tl3pad-art-right)!important}
.tl3pad--art.tl3pad--cross .tl3pad__arm[data-dir=up].is-on .tl3pad__glyph{background-image:var(--tl3pad-art-up-on,var(--tl3pad-art-up))!important}
.tl3pad--art.tl3pad--cross .tl3pad__arm[data-dir=down].is-on .tl3pad__glyph{background-image:var(--tl3pad-art-down-on,var(--tl3pad-art-down))!important}
.tl3pad--art.tl3pad--cross .tl3pad__arm[data-dir=left].is-on .tl3pad__glyph{background-image:var(--tl3pad-art-left-on,var(--tl3pad-art-left))!important}
.tl3pad--art.tl3pad--cross .tl3pad__arm[data-dir=right].is-on .tl3pad__glyph{background-image:var(--tl3pad-art-right-on,var(--tl3pad-art-right))!important}
.tl3pad--art.tl3pad--round .tl3pad__glyph{width:26%;height:26%}
.tl3pad--art.tl3pad--round .tl3pad__arm[data-dir=up] .tl3pad__glyph{left:37%;top:6%;background-image:var(--tl3pad-art-up)!important}
.tl3pad--art.tl3pad--round .tl3pad__arm[data-dir=down] .tl3pad__glyph{left:37%;bottom:6%;background-image:var(--tl3pad-art-down)!important}
.tl3pad--art.tl3pad--round .tl3pad__arm[data-dir=left] .tl3pad__glyph{left:6%;top:37%;background-image:var(--tl3pad-art-left)!important}
.tl3pad--art.tl3pad--round .tl3pad__arm[data-dir=right] .tl3pad__glyph{right:6%;top:37%;background-image:var(--tl3pad-art-right)!important}
/* over the field (a phone held sideways in full screen): see-through */
.tl3pad--over{position:absolute;left:0;right:0;bottom:8px;width:auto;padding:0 10px;opacity:.72;pointer-events:none}
.tl3pad--over .tl3pad__area{pointer-events:auto}
/* the Controls panel */
.tl3pad__menu{position:absolute;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.62);padding:12px;box-sizing:border-box}
.tl3pad__box{width:min(380px,100%);max-height:100%;overflow:auto;box-sizing:border-box;padding:14px 16px 16px;border-radius:14px;background:#14181b;color:#F4EFE6;border:1px solid rgba(255,255,255,.18);box-shadow:0 18px 50px rgba(0,0,0,.6);font:14px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;text-align:left}
.tl3pad__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.tl3pad__head b{font-size:16px;letter-spacing:.04em;text-transform:uppercase}
.tl3pad__x{border:0;background:transparent;color:#F4EFE6;font-size:24px;line-height:1;cursor:pointer;padding:2px 6px}
.tl3pad__group{margin-top:10px}
.tl3pad__label{margin:0 0 5px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.7}
.tl3pad__row{display:flex;flex-wrap:wrap;gap:6px}
.tl3pad__opt{flex:1 1 auto;min-height:40px;padding:6px 10px;border-radius:10px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);color:#F4EFE6;font:inherit;cursor:pointer}
.tl3pad__opt.is-on{background:var(--tl3pad-on,rgba(225,180,87,.6));border-color:#FFF6DC;color:#14181b;font-weight:700}
.tl3pad__note{margin:12px 0 0;font-size:13px;opacity:.8}
.tl3pad__done{display:block;width:100%;margin-top:12px;min-height:44px;border-radius:10px;border:0;background:#F4EFE6;color:#14181b;font:700 14px/1 inherit;font-family:inherit;letter-spacing:.06em;text-transform:uppercase;cursor:pointer}