/* WTDuel: the viewer's own controls are hidden; the duel's menu, banner and instruments go over its canvas. */
#sidebar, #topbar, #list-toggle, #chat-toggle, #chat, #keys, #keys-replay, #replay, #hud, #touch-help { display: none !important; }
#gl { left: 0 !important; width: 100vw !important; }
.wd { position: fixed; z-index: 50; font: 13px/1.35 system-ui, "Segoe UI", sans-serif; color: #e8edf2; pointer-events: none; }
.wd b { color: #fff; }
.wd-panel { background: rgba(14, 20, 27, .78); border: 1px solid rgba(255, 255, 255, .12); border-radius: 8px; padding: 10px 12px; }
#wd-menu { inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: auto; background: rgba(5, 9, 14, .45); }
#wd-menu .wd-panel { width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; padding: 18px 20px; }
#wd-menu h1 { margin: 0 0 4px; font-size: 20px; letter-spacing: .04em; }
#wd-menu .sub { color: #9fb0c0; margin-bottom: 12px; }
#wd-menu label { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 7px 0; }
#wd-menu select, #wd-menu input[type=range] { width: 58%; }
#wd-menu select { background: #1b2632; color: #e8edf2; border: 1px solid #33475a; border-radius: 4px; padding: 3px; }
#wd-menu .row { display: flex; gap: 8px; margin-top: 14px; }
#wd-menu button { flex: 1; padding: 9px; font-weight: 600; border-radius: 6px; border: 1px solid #3d8a5e; background: #1f5e3c; color: #fff; cursor: pointer; }
#wd-menu button.sec { background: #22303d; border-color: #3a4d60; }
#wd-menu button:disabled { opacity: .45; cursor: default; }
#wd-menu .keys { margin-top: 12px; color: #b9c6d2; font-size: 12px; columns: 2; column-gap: 18px; }
#wd-menu .keys div { break-inside: avoid; }
#wd-menu kbd { background: #26323e; border: 1px solid #3a4b5c; border-radius: 3px; padding: 0 4px; font: 11px monospace; color: #fff; }
#wd-menu .status { margin-top: 10px; font: 11px monospace; color: #8fa3b5; white-space: pre-wrap; }
#wd-menu .warn, .wd .warn { color: #ffb347; }
#wd-tele { left: 12px; bottom: 12px; min-width: 190px; font: 12px/1.45 ui-monospace, monospace; }
#wd-tele .k { color: #8fa3b5; display: inline-block; width: 52px; }
#wd-msg { top: 18%; left: 50%; transform: translateX(-50%); text-align: center; font-size: 15px; text-shadow: 0 1px 3px #000; }
#wd-msg .big { font-size: 34px; font-weight: 800; letter-spacing: .06em; }
#wd-msg .win { color: #7cf29a; } #wd-msg .lose { color: #ff6b5b; } #wd-msg .even { color: #ffd36b; }
#wd-map { right: 12px; bottom: 12px; width: 180px; height: 180px; padding: 0; }
#wd-enemy { left: 0; top: 0; font: 600 12px ui-monospace, monospace; color: #ff8a7a; text-shadow: 0 1px 2px #000; transform: translate(-50%, -50%); white-space: nowrap; }
#wd-stick { right: 204px; bottom: 12px; width: 84px; height: 84px; padding: 0; }
#wd-debug { right: 12px; top: 12px; font: 11px ui-monospace, monospace; color: #9fb0c0; text-align: right; }
.wd[hidden] { display: none !important; }
#wd-fallback { top: 52px; left: 50%; transform: translateX(-50%); background: rgba(170, 20, 20, .88); border: 1px solid #ff6b5b;
  border-radius: 6px; padding: 6px 14px; text-align: center; font-size: 13px; color: #fff; }
#wd-fallback span { font-size: 11px; color: #ffd6d0; }
/* The game's HUD messages (duel.js hudMsg): drawn on the GL canvas' pixels, stretched over it like the viewer's #reward. */
#wd-hudmsg { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 40; }
/* The Controls section (keybinds.js): a row per action, two binding slots each. */
#wd-controls { margin-top: 12px; }
#wd-controls summary { cursor: pointer; font-weight: 600; color: #cfd9e3; }
#wd-menu .wd-binds { margin-top: 6px; display: grid; gap: 3px; }
#wd-menu .wd-bind { display: grid; grid-template-columns: 1fr 104px 104px; gap: 6px; align-items: center; font-size: 12px; }
#wd-menu .wd-bind.clash > span { color: #ffb347; }
#wd-menu .wd-bind button { flex: none; padding: 3px 4px; font: 11px monospace; font-weight: 400; background: #1b2632; border-color: #33475a;
  border-radius: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#wd-menu .wd-bind button.wait { background: #4a3d12; border-color: #ffd36b; color: #ffd36b; }
#wd-menu .wd-bind button.clash { border-color: #ffb347; color: #ffb347; }
#wd-menu .wd-binds-msg { min-height: 16px; margin-top: 6px; font-size: 12px; color: #9fb0c0; }
#wd-menu .wd-binds-msg.warn { color: #ffb347; }
@media (max-width: 480px) { #wd-menu .wd-bind { grid-template-columns: 1fr 84px 84px; } }
/* What the page loaded against what the host serves (duel.js provenance): red on a mismatch. */
#wd-menu .prov { font: 11px ui-monospace, monospace; color: #8fa3b5; margin: 4px 0 8px; }
#wd-menu .prov.bad { color: #fff; background: rgba(170, 20, 20, .88); border: 1px solid #ff6b5b; border-radius: 4px; padding: 4px 8px; font-size: 12px; }