/* duel-details.css: the result's Details (1 Nov 2026, tools/pick_looks/yard/duel_details.js). The look of the meters players run in the
   client (Details!, Recount): a dark window with a gold edge, class coloured bars behind each spell, its icon at the left and its number at
   the right, the window's title in Cinzel (duel.css's face for the game's Friz Quadrata). One side at a time, picked by a switch that
   carries each side's headline number (the result's column is 300 to 400 px wide: two meters side by side would not read). A desktop: under
   the result's links, as the Combat log is. A phone: a sheet from the bottom over the result, its tabs and the side switch 44 px tall.
   (.dl-ui before each button: duel.css dresses every button of the HUD in Cinzel, 44 px tall, with a ring) */
.dd{margin:10px auto 0;max-width:560px;text-align:left;border:1px solid rgba(201,162,74,.45);border-radius:6px;background:linear-gradient(rgba(16,13,9,.94),rgba(6,5,4,.94));box-shadow:0 4px 18px rgba(0,0,0,.5);font:12px/1.3 'Open Sans',Arial,sans-serif;color:#e8e0d0}
.dd[hidden],.dd-back{display:none}
.dd-top{display:flex;align-items:center;gap:8px;padding:4px 4px 4px 10px;border-bottom:1px solid rgba(201,162,74,.25)}
.dd-t{flex:1;color:#ffd27a;font:600 13px/1 Cinzel,Georgia,serif;letter-spacing:.04em}
.dl-ui .dd button{min-height:0;box-shadow:none;cursor:pointer;text-transform:none;letter-spacing:0}
.dl-ui .dd .dd-x{width:28px;height:26px;padding:0;border:1px solid rgba(255,255,255,.16);border-radius:4px;background:rgba(255,255,255,.06);color:#d8d0c0;font:400 18px/22px 'Open Sans',Arial,sans-serif}
.dd-tabs{display:flex;gap:2px;padding:6px 8px 0;border-bottom:1px solid rgba(201,162,74,.25)}
.dl-ui .dd-tabs button{flex:0 0 auto;height:28px;padding:0 12px;border:1px solid rgba(201,162,74,.3);border-bottom:0;border-radius:5px 5px 0 0;background:rgba(255,255,255,.04);color:#bfb6a2;font:600 12px/26px 'Open Sans',Arial,sans-serif}
.dl-ui .dd-tabs button[aria-selected="true"]{background:rgba(201,162,74,.2);color:#ffe7b0;border-color:rgba(201,162,74,.6)}
.dd-pick{display:flex;gap:6px;padding:8px 10px 0}
.dl-ui .dd-pick button{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:6px;height:32px;padding:0 8px;border:1px solid rgba(255,255,255,.14);border-radius:5px;background:rgba(255,255,255,.04);color:#cfc6b4;font:600 12px/1 'Open Sans',Arial,sans-serif;white-space:nowrap;overflow:hidden}
.dl-ui .dd-pick button[aria-pressed="true"]{border-color:rgba(201,162,74,.7);background:rgba(201,162,74,.16);color:#fff}
.dd-pick i{flex:0 0 auto;width:8px;height:8px;border-radius:50%}
.dd-pick span{overflow:hidden;text-overflow:ellipsis}
.dd-pick em{font-style:normal;color:#ffe7b0;font-variant-numeric:tabular-nums}
.dd-body{display:block;padding:8px 10px 4px;max-height:min(46vh,420px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(201,162,74,.5) transparent}
.dd-side{min-width:0;display:none}
.dd-side.dd-on{display:block}
.dd-side header>b{display:none}
.dd-side header{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;margin:0 0 5px;padding-bottom:4px;border-bottom:1px solid rgba(255,255,255,.08)}
.dd-side header>b{font:600 14px/1.2 Cinzel,Georgia,serif;text-shadow:0 1px 1px #000}
.dd-tot{display:flex;flex-wrap:wrap;gap:0 10px;color:#a9a191;font-size:11.5px}
.dd-tot b{color:#fff;font-weight:600;font-variant-numeric:tabular-nums}
.dd-l{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:2px}
.dd-r{position:relative;display:flex;align-items:center;gap:6px;min-height:30px;padding:2px 6px 2px 2px;background:rgba(255,255,255,.04);border-radius:2px;overflow:hidden;text-shadow:0 1px 1px #000,0 0 2px #000}
.dd-fill{position:absolute;left:0;top:0;bottom:0;opacity:.42;border-radius:2px}
.dd-r>:not(.dd-fill){position:relative}
.dd-r img{flex:0 0 auto;width:22px;height:22px;border:1px solid rgba(0,0,0,.7);border-radius:2px}
.dd-n{flex:1;min-width:0;display:flex;flex-direction:column}
.dd-n b,.dd-v b{font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dd-n small{color:#cfc6b4;font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dd-v{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;font-variant-numeric:tabular-nums}
.dd-v small{color:#cfc6b4;font-size:10.5px}
.dd-h{margin:8px 0 3px;color:#ffd27a;font:600 11px/1.2 'Open Sans',Arial,sans-serif;letter-spacing:.03em}
.dd-h:first-of-type{margin-top:2px}
.dd-none{margin:2px 0 4px;color:#8c8576;font-size:11.5px}
.dd-foot{margin:5px 0 0;color:#a9a191;font-size:11px}
.dd-when{margin:0;padding:4px 10px 7px;color:#8c8576;font-size:10.5px}
/* a phone (or a narrow window): a sheet from the bottom, one side at a time */
@media (max-width:700px){
  .dd{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:41;width:auto;max-width:none;margin:0;transform:none;max-height:78vh;max-height:78dvh;display:flex;flex-direction:column;border-radius:12px 12px 0 0;border-bottom:0;padding-bottom:env(safe-area-inset-bottom,0px);background:#0e0b08;box-shadow:0 -6px 24px rgba(0,0,0,.6);isolation:isolate}
  .dd-back{display:block;position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.55)}
  .dd-back[hidden]{display:none}
  .dd[hidden]{display:none}
  .dd-top{padding:4px 4px 4px 14px}
  .dl-ui .dd .dd-x{width:44px;height:44px;font-size:24px;line-height:40px;border:0;background:none}
  .dd-tabs{padding:0 8px;gap:0}
  .dl-ui .dd-tabs button{flex:1;height:44px;padding:0 4px;border:0;border-bottom:2px solid transparent;border-radius:0;background:none;font-size:13px;line-height:42px}
  .dl-ui .dd-tabs button[aria-selected="true"]{background:none;border-bottom-color:#c9a24a}
  .dd-pick{padding:8px 10px 2px}
  .dl-ui .dd-pick button{height:44px;font-size:13px}
  .dd-body{display:block;flex:1;min-height:0;max-height:none;padding:8px 12px 4px}
  .dd-tot{font-size:12.5px}
  .dd-r{min-height:38px}
  .dd-r img{width:26px;height:26px}
  .dd-n b,.dd-v b{font-size:13px}
  .dd-n small,.dd-v small{font-size:11px}
}
@media (orientation:landscape) and (max-height:500px){
  .dd{max-height:92vh}
}

/* (1 Nov 2026, the 2v2 talk lane) four fighters on the switch: two rows of two where the box is narrow, one row of four where it is wide */
.dd-four .dd-pick{flex-wrap:wrap}
.dl-ui .dd-four .dd-pick button{flex:1 1 calc(50% - 6px)}
@media (min-width:1200px){.dl-ui .dd-four .dd-pick button{flex:1 1 0}}