*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#141b2e;font:13px/1.35 ui-monospace,Menlo,monospace;color:#f4ead8}
canvas{display:block;width:100vw;height:100vh;image-rendering:pixelated;touch-action:none}
header{position:fixed;top:0;left:0;right:0;padding:calc(8px + env(safe-area-inset-top)) 12px 8px;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;background:#141b2ecc;pointer-events:none}
header b{font-size:16px}
#status{font-size:12px}
.dot{display:inline-block;width:8px;height:8px;margin:0 4px 0 8px}
.dot.w{background:#5fd18a}.dot.i{background:#ffb86b}.dot.a{background:#9aa6d6}
#panel{position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));max-width:380px;max-height:45%;overflow:auto;background:#fff8ea;color:#3a2c22;border:3px solid #3a2c22;box-shadow:4px 4px 0 #0006;padding:10px 12px}
#panel h2{margin:0;font-size:15px}
#panel .role{margin:2px 0 4px;opacity:.65}
#panel .now{margin:0 0 6px;font-weight:700}
#panel ol{margin:0;padding-left:18px}
#panel li{margin-bottom:5px}
#panel time{display:block;font-size:11px;opacity:.6}
#hint{position:fixed;right:10px;bottom:6px;margin:0;font-size:11px;opacity:.6;pointer-events:none}
#gate{position:fixed;inset:0;display:grid;place-content:center;gap:8px;background:#141b2ef2;text-align:center}
#gate[hidden],#panel[hidden]{display:none}
#gate input,#gate button{font:inherit;padding:8px 12px;border:3px solid #3a2c22}
#gate button{background:#ffb86b;font-weight:700}
#pad{position:fixed;right:10px;top:84px;display:none;flex-direction:column;gap:8px}@media (pointer:coarse),(max-width:700px){#pad{display:flex}}#pad button{font:bold 13px monospace;width:56px;height:44px;background:#fff8ea;color:#3a2c22;border:3px solid #3a2c22;box-shadow:3px 3px 0 #0006;touch-action:manipulation}#pad button.on{background:#ffd36b}#pad #b-x{background:#ff6a6a}#pad button[hidden]{display:none}
#me{margin-left:auto;font:bold 11px monospace;background:#fff8ea;color:#3a2c22;border:2px solid #3a2c22;padding:3px 7px;cursor:pointer}
#mini{position:fixed;left:10px;bottom:calc(10px + env(safe-area-inset-bottom));border-radius:50%;border:3px solid #3a2c22;box-shadow:3px 3px 0 #0006;background:#141b2e;cursor:pointer;image-rendering:auto}
#panel{left:170px}@media (max-width:700px){#panel{left:10px;bottom:calc(122px + env(safe-area-inset-bottom))}}
#pad #b-h{background:#ffb3d0}
#pick{position:fixed;inset:0;margin:auto;width:260px;height:150px;background:#fff8ea;color:#3a2c22;border:3px solid #3a2c22;box-shadow:4px 4px 0 #0006;padding:14px;display:flex;flex-direction:column;gap:8px;z-index:20}#pick[hidden]{display:none}#pick p{margin:0;font-weight:700}#pick button{font:bold 13px monospace;padding:8px;border:2px solid #3a2c22;background:#ffd36b;cursor:pointer}
#me{pointer-events:auto}
@media (max-width:700px){#hint{display:none}}