/* assets/duel/duel-help.css: the fight's words that help (duel_help.js; owner: the help lane), 27 Oct 2026, round 7. The first duel's
   tips, the count-in's one line, Key Bindings on ?, and the words after a refused press. In the HUD's own look (duel-hud.css: the dark
   plate, the bronze edge, Cinzel for names, Open Sans for words, the game's gold). Nothing here covers a fighter or a bar: the tip stands at
   the screen's edge under your frame, Key Bindings at the right edge under the clock. */

/* ---- the count-in's one line: a little larger than the old list of every key, on a soft dark band so it reads over a bright sky ---- */
.dl-keys.dl-tip1{left:50%;right:auto;width:max-content;max-width:min(560px,calc(100% - 32px));transform:translateX(-50%);padding:6px 14px;border-radius:6px;background:rgba(10,9,8,.55);font-size:16px;line-height:1.45}
.dl-keys.dl-tip1 b{font:700 16px/1 'Open Sans',sans-serif;color:#ffd100}

/* ---- the first duel's tip ---- */
.dl-guide{position:absolute;left:16px;top:140px;z-index:4;width:300px;max-width:calc(100% - 32px);box-sizing:border-box;margin:0;padding:10px 12px 10px 14px;border-radius:6px;
  background:var(--dl-plate,linear-gradient(180deg,rgba(30,26,20,.94),rgba(12,10,8,.94)));box-shadow:0 0 0 1px #000,inset 0 0 0 1px rgba(91,74,46,.8),inset 3px 0 0 #c9a24a,0 6px 18px rgba(0,0,0,.45);
  color:#e9e3d6;font:400 14px/1.45 'Open Sans',sans-serif;pointer-events:none;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .25s,transform .25s,visibility 0s .25s}
.dl-guide.on{opacity:1;visibility:visible;transform:none;transition:opacity .25s,transform .25s}
.dl-guide.dl-gd-see{opacity:.22}
.dl-guide.dl-gd-hide{opacity:0;visibility:hidden}
.dl-guide p{margin:0}
.dl-gd-n{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:-2px 0 5px!important}
.dl-gd-n span{font:700 11px/1 Cinzel,Georgia,serif;letter-spacing:.06em;color:#c9a24a}
.dl-gd-b b{font-weight:700;color:#ffd100}
.dl-ui .dl-guide button{pointer-events:auto;min-height:24px;margin:-4px -6px -4px 0;padding:0 8px;border:0;border-radius:4px;font:600 11.5px/1 'Open Sans',sans-serif;cursor:pointer;color:#bfb49b;background:transparent;box-shadow:inset 0 0 0 1px rgba(201,162,74,.35)}
.dl-ui .dl-guide button:hover{color:#fff;box-shadow:inset 0 0 0 1px #c9a24a}
.dl-ui .dl-guide button:focus-visible{outline:2px solid #fff0c0;outline-offset:2px}
.dl-guide.dl-gd-see button{pointer-events:none}
/* what the tip is about: a gold ring and glow round its edge, never over it (an animation's shadow stands over the HUD's own while it runs) */
.dl-ui .dl-gd-hl{animation:dl-gd-hl 1.3s ease-in-out infinite}
@keyframes dl-gd-hl{0%,100%{box-shadow:0 0 0 1px #000,0 0 0 3px #ffd100,0 0 16px 3px rgba(255,209,0,.7)}50%{box-shadow:0 0 0 1px #000,0 0 0 3px rgba(255,209,0,.55),0 0 6px 1px rgba(255,209,0,.25)}}
/* the words after a refused press: the tip's place, no header or buttons, gone in about 5 sec */
.dl-guide.dl-gd-coach{width:280px;padding:8px 12px 8px 14px;box-shadow:0 0 0 1px #000,inset 0 0 0 1px rgba(91,74,46,.8),inset 3px 0 0 #e0614a,0 6px 18px rgba(0,0,0,.45)}
.dl-guide.dl-gd-coach .dl-gd-n{display:none}

/* ---- the ? button at the end of the micro menu ---- */
.dl-ui .dl-ub.dl-helpb i{font:700 19px/1 Cinzel,Georgia,serif;font-style:normal;color:#e8c062}
.dl-ui .dl-ub.dl-helpb[aria-expanded=true]{color:#fff;box-shadow:0 0 0 1px #000,0 0 0 2px #e8c062,0 0 10px rgba(232,192,98,.45)}

/* ---- Key Bindings: the right edge, under the clock, above Leave and the bars' row ---- */
.dl-ctlp{position:absolute;right:16px;top:64px;z-index:6;width:420px;max-width:calc(100% - 32px);max-height:calc(100% - 64px - 170px);display:flex;flex-direction:column;box-sizing:border-box;border-radius:6px;
  background:linear-gradient(180deg,rgba(26,22,17,.96),rgba(11,9,7,.96));box-shadow:0 0 0 1px #000,inset 0 0 0 1px rgba(91,74,46,.9),0 10px 28px rgba(0,0,0,.55);color:#e9e3d6;font:400 13px/1.2 'Open Sans',sans-serif;pointer-events:auto}
.dl-ctlp[hidden]{display:none}
.dl-ctlp-hd{display:flex;align-items:center;justify-content:space-between;padding:6px 8px 6px 14px;border-bottom:1px solid rgba(91,74,46,.7)}
.dl-ctlp-hd b{font:700 15px/1 Cinzel,Georgia,serif;color:#ffd100;letter-spacing:.02em}
.dl-ui .dl-ctlp-x{width:28px;height:28px;min-height:0;padding:0;border:0;border-radius:4px;font:400 20px/1 'Open Sans',sans-serif;color:#d9cdb2;background:transparent;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(201,162,74,.4)}
.dl-ui .dl-ctlp-x:hover{color:#fff;box-shadow:inset 0 0 0 1px #c9a24a}
.dl-ctlp-sc{overflow-y:auto;overscroll-behavior:contain;min-height:0;scrollbar-width:thin;scrollbar-color:#5b4a2e transparent}
.dl-ctlp table{width:100%;border-collapse:collapse}
.dl-ctlp thead th{position:sticky;top:0;z-index:1;padding:5px 8px;text-align:left;font:600 11px/1 'Open Sans',sans-serif;color:#a89a7c;background:#15110d;border-bottom:1px solid rgba(91,74,46,.5)}
.dl-ctlp th,.dl-ctlp td{padding:1px 8px;text-align:left;vertical-align:middle}
.dl-ctlp tbody th{font-weight:400;color:#e9e3d6;white-space:nowrap}
.dl-ctlp tbody tr:nth-child(even) th,.dl-ctlp tbody tr:nth-child(even) td{background:rgba(255,255,255,.025)}
.dl-ctlp tr.dl-ctlp-h th{padding:6px 8px 2px 14px;font:700 12px/1 Cinzel,Georgia,serif;color:#c9a24a;background:none;letter-spacing:.04em}
.dl-ctlp td:first-of-type{white-space:normal}
.dl-ctlp kbd{display:inline-block;margin:1px 3px 1px 0;padding:0 6px;border-radius:3px;font:600 12px/1.35 'Open Sans',sans-serif;color:#fff;background:#231d16;box-shadow:inset 0 0 0 1px rgba(201,162,74,.45),0 1px 0 #000}
.dl-ctlp kbd{white-space:nowrap}.dl-ctlp kbd.dl-kk{word-spacing:2px}
.dl-ctlp td i{font-style:normal;color:#7d7363;font-size:12px}
.dl-ctlp-f{margin:0;padding:7px 14px 8px;border-top:1px solid rgba(91,74,46,.5);font-size:12px;line-height:1.45;color:#bfb49b}
.dl-ctlp-f b{color:#ffd100;font-weight:700}
/* a phone: under your frame, the touch controls in words, the whole sheet a tap to close */
.dl-ctlp.dl-ctlp-t{left:8px;right:8px;top:calc(var(--ft,96px) + 8px);width:auto;max-width:440px;max-height:calc(100% - var(--ft,96px) - 24px);overflow-y:auto}
.dl-ctlp.dl-ctlp-t tbody th{white-space:normal;width:34%;font-weight:600}
.dl-ctlp.dl-ctlp-t td{font-size:13px;color:#d9cdb2}
@media (orientation:landscape) and (max-height:500px){
  .dl-ctlp.dl-ctlp-t{top:8px;left:8px;right:auto;width:min(520px,64vw);max-width:none;max-height:calc(100% - 16px)}
  .dl-ctlp.dl-ctlp-t tbody th{width:28%}.dl-ctlp.dl-ctlp-t tr.dl-ctlp-h th{padding:5px 8px 2px 14px}
}

/* ---- phones and small windows: the tip under your frame, the full width upright, the left column on its side ---- */
@media (max-width:700px) and (orientation:portrait),(max-width:700px) and (min-height:501px){
  .dl-guide{left:8px;right:8px;width:auto;max-width:none;font-size:13px;padding:8px 10px 8px 12px}
  .dl-ui .dl-guide button{min-height:32px;margin:-8px -6px -8px 0;padding:0 10px}
  .dl-keys.dl-tip1{font-size:14px}.dl-keys.dl-tip1 b{font-size:14px}
  .dl-guide.dl-gd-coach{width:auto}
}
@media (orientation:landscape) and (max-height:500px){
  .dl-guide,.dl-guide.dl-gd-coach{left:8px;width:min(290px,36vw);font-size:12px;line-height:1.38;padding:6px 9px 7px 11px}
  .dl-gd-n{margin-bottom:3px!important}
  .dl-ui .dl-guide button{min-height:28px;margin:-6px -5px -6px 0}
  .dl-keys.dl-tip1{font-size:13px;max-width:min(460px,calc(100% - 300px))}.dl-keys.dl-tip1 b{font-size:13px}
  .dl-ctlp:not(.dl-ctlp-t){top:52px;max-height:calc(100% - 60px)}
}

/* (30 Oct 2026, the release QA: on a phone Skip tips was 24 to 28 px tall, and a tip the foe's nameplate passed behind went to 0.22 and
   could not be read, 430 x 932, 390 x 844 and an iPad upright) on a touch screen Skip tips is 44 px tall, and a tip with no clear place
   (duel_help.js place tries the full width, then each edge) stays readable and its Skip tips takes a tap */
@media (pointer:coarse){
  .dl-ui .dl-guide button{min-height:44px;margin:-10px -6px -10px 0}
  .dl-guide.dl-gd-see{opacity:.9}
  .dl-guide.dl-gd-see button{pointer-events:auto}
}
.dl-touch .dl-guide button{min-height:44px!important}
.dl-touch .dl-guide.dl-gd-see{opacity:.9}

/* the result: all of it goes */
.dl-over .dl-guide,.dl-over .dl-ctlp{opacity:0;visibility:hidden}
@media (prefers-reduced-motion:reduce){.dl-guide{transition:none}.dl-ui .dl-gd-hl{animation:none}}
/* (30 Oct 2026, the release audit: at 1920 x 1080 the table ran 119 px out of the 420 px window, its Key 2 column off the edge and rows cut,
   "Escape twice, with n... target": the names and the bars' runs of keys stood on one line each) the window a little wider where there is
   room (540 px), the columns set (the command 40%, Key 1 34%, Key 2 26%) and every cell wraps between words and between keys, so the table
   is always the window's width, 1280 to 2560 */
.dl-ctlp:not(.dl-ctlp-t){width:min(540px,calc(100% - 32px))}
.dl-ctlp:not(.dl-ctlp-t) .dl-ctlp-sc{overflow-x:hidden}
.dl-ctlp:not(.dl-ctlp-t) table{table-layout:fixed}
.dl-ctlp:not(.dl-ctlp-t) thead th:nth-child(1){width:40%}.dl-ctlp:not(.dl-ctlp-t) thead th:nth-child(2){width:34%}.dl-ctlp:not(.dl-ctlp-t) thead th:nth-child(3){width:26%}
.dl-ctlp:not(.dl-ctlp-t) tbody th,.dl-ctlp:not(.dl-ctlp-t) td{white-space:normal;overflow-wrap:anywhere;padding-top:2px;padding-bottom:2px}
.dl-ctlp:not(.dl-ctlp-t) kbd.dl-kk{white-space:normal}