.tlv-sheet {
  inset: 0;
  margin: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;                     
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  background: var(--color-stage-bg, #14161c);
  color: var(--color-stage-ink, #e8eaf0);
}


.tlv-sheet::backdrop { background: var(--color-stage-bg, #14161c); }


html.tlv-open, html.tlv-open body { overflow: hidden; }

.tlv-root { display: flex; flex-direction: column; height: 100%; min-height: 0; }


.tlv-help {
  position: absolute; right: 10px; bottom: 10px; z-index: 6;
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
  font-size: var(--text-s, 12px);
}
.tlv-help > button {
  padding: 3px 10px; cursor: pointer;
  background: var(--color-stage-2, #1c1f27); color: var(--color-stage-ink-2, #9aa0ad);
  border: 1px solid var(--color-stage-line, #3a3f4a); border-radius: 999px;
  font: inherit; line-height: 1.5;
}
.tlv-help > button:hover { color: var(--color-stage-ink, #e8eaf0); }
.tlv-keys {
  display: grid; grid-template-columns: auto 1fr; gap: 3px 10px;
  max-width: min(340px, calc(100vw - 32px));
  padding: 8px 12px;
  background: var(--color-stage-2, #1c1f27);
  border: 1px solid var(--color-stage-line, #3a3f4a);
  box-shadow: 0 10px 30px rgb(0 0 0 / 0.5);
}
.tlv-keys[hidden] { display: none; }
.tlv-keys b {
  justify-self: end; white-space: nowrap;
  color: var(--color-stage-ink, #e8eaf0); font-weight: 700;
}
.tlv-keys span { color: var(--color-stage-ink-2, #9aa0ad); }


.tlv-bar {
  display: flex; align-items: center; gap: var(--space-s, 10px);
  padding: var(--space-xs, 6px) var(--space-s, 10px);
  border-bottom: 1px solid var(--color-stage-line, #3a3f4a);
  flex: none; flex-wrap: wrap;
}
.tlv-title { font-weight: 700; font-size: var(--text-m, 14px); }


.tlv-total, .tlv-side .num { cursor: help; }
.tlv-total {
  margin-right: auto; white-space: nowrap;
  font-variant-numeric: tabular-nums; font-weight: 700;
  font-size: var(--text-m, 14px); color: var(--color-accent, #7cc4ff);
}
.tlv-bar .tlv-time {
  font-variant-numeric: tabular-nums; min-width: 9ch; text-align: right;
  font-size: var(--text-s, 12px); opacity: 0.9;
}
.tlv-bar button {
  font: inherit; font-size: var(--text-s, 12px);
  padding: 2px 10px; border-radius: 6px; cursor: pointer;
  background: transparent; color: inherit;
  border: 1px solid var(--color-stage-line, #3a3f4a);
}
.tlv-bar button:hover { border-color: var(--color-accent, #4ea1ff); }
.tlv-bar button.on { border-color: var(--color-accent, #4ea1ff); color: var(--color-accent, #4ea1ff); }


.tlv-body { display: flex; flex: 1; min-height: 0; }
.tlv-scroll { flex: 1; overflow: auto; position: relative; min-width: 0; }
.tlv-scroll canvas { display: block; }

.tlv-side {
  flex: none; width: 300px; overflow-y: auto;
  border-left: 1px solid var(--color-stage-line, #3a3f4a);
  padding: var(--space-s, 10px); font-size: var(--text-s, 12px);
}
.tlv-side h3 { font-size: var(--text-s, 12px); opacity: 0.75; margin: var(--space-s, 10px) 0 4px; }
.tlv-side h3:first-child { margin-top: 0; }
.tlv-side table { width: 100%; border-collapse: collapse; }
.tlv-side td { padding: 1px 4px; vertical-align: top; }
.tlv-side td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tlv-side .tlv-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; }
.tlv-side .tlv-face {
  width: 22px; height: 22px; border-radius: 50%; object-fit: cover;
  vertical-align: middle; margin-right: 6px;
  border: 1.5px solid transparent; 
}
.tlv-legend { display: flex; gap: 10px; flex-wrap: wrap; margin: 2px 0; }
.tlv-legend > span { white-space: nowrap; }
.tlv-side .tlv-skill td:first-child { padding-left: 17px; opacity: 0.85; }


.tlv-tip {
  position: fixed; z-index: 30; pointer-events: none;
  max-width: 360px; padding: 6px 9px; border-radius: 6px;
  background: rgba(10, 12, 16, 0.94); color: #e8eaf0;
  border: 1px solid var(--color-stage-line, #3a3f4a);
  font-size: var(--text-xs, 11px); line-height: 1.45; white-space: pre-line;
}


.tlv-drop { outline: 2px dashed var(--color-accent, #4ea1ff); outline-offset: -8px; }

@media (max-width: 900px) {
  .tlv-side { display: none; } 
}