/* ======================================================================
   TMT Single Player — FULL CSS (mobile-safe)
   - Narrow screens (<=900px): always 1 column, thumbs on, compact spacing.
   - Desktop/tablet: 2 columns, playlist scrolls (CSS fallback + JS sync).
   - Hover & clipping fixed by scoping and overflow/mask opt-outs.
   ====================================================================== */

#tmt-single-player{
  overflow-x: hidden;
  --tmt-cover-w: 340px;   /* desktop/tablet cover width */
  --tmt-row-fs: 16px;     /* updated by JS on narrow screens */
}

/* Card baseline (force visual + padding so nothing strips it) */
#tmt-single-player .card{
  background: var(--tmt-panel-grad) !important;
  border: 1px solid rgba(0,0,0,.06) !important;
  box-shadow: 0 4px 10px rgba(0,0,0,.08) !important;
  border-radius: 12px !important;
  transition: var(--hover-transition) !important;
  padding: 2rem !important;
}
@media (hover:hover){
  #tmt-single-player .card:hover{
    transform: translateY(-5px) !important;
    box-shadow: 0 10px 24px rgba(0,0,0,.14) !important;
  }
}

/* Unclip ancestors so hover shadow isn’t cut (root-cause cure) */
#portfolio,
#portfolio .container,
#tmt-single-player{
  overflow: visible !important;
  -webkit-mask-image: none !important;
          mask-image: none !important;
  clip-path: none !important;
}

/* ===== Desktop / wide (default) ===== */
#tmt-single-player .tmt-two-col{
  display: grid;
  grid-template-columns: var(--tmt-cover-w) 1fr;
  gap: 1.25rem;
}
#tmt-single-player .tmt-cover img{
  width: var(--tmt-cover-w);
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}
#tmt-single-player .tmt-cover-caption{
  margin-top:.5rem; font-size:1rem; text-align:center;
  white-space:nowrap; overflow:hidden; text-overflow:clip; padding:0 .25rem;
}

/* Playlist area (desktop fallback scroll; JS syncs to real cover height) */
#tmt-single-player .tmt-playlist-wrap{
  overflow:auto; display:block;
  scrollbar-width: thin; scrollbar-color:#000 transparent;
  max-height: var(--tmt-cover-w); /* fallback in case JS hasn’t run */
}
#tmt-single-player .tmt-playlist-wrap::-webkit-scrollbar{ width:10px }
#tmt-single-player .tmt-playlist-wrap::-webkit-scrollbar-track{ background:transparent }
#tmt-single-player .tmt-playlist-wrap::-webkit-scrollbar-thumb{ background:#000; border-radius:6px }

#tmtPlaylist{ margin:0; padding:0; list-style:none }
#tmtPlaylist .tmt-item{
  position:relative; display:grid; grid-template-columns:1fr auto;
  align-items:center; padding:.6rem .5rem .6rem .9rem; border-radius:8px; cursor:pointer;
}
/* === Fix playlist titles being cut to first letter === */
#tmt-single-player #tmtPlaylist .tmt-title{
  white-space: normal;      /* allow wrapping */
  overflow: visible;        /* don’t hard-clip */
  text-overflow: unset;     /* no forced ellipsis/clip */
}

/* On narrow screens, also allow wrapping with the responsive font size */
@media (max-width:900px){
  #tmt-single-player #tmtPlaylist .tmt-title{
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    font-size: var(--tmt-row-fs);
    line-height: 1.3;
  }
}
#tmtPlaylist .tmt-duration{ font-variant-numeric:tabular-nums; opacity:.9; padding-left:.75rem }
#tmtPlaylist .tmt-thumb{ display:none; width:40px; height:40px; border-radius:6px; object-fit:cover; background:rgba(0,0,0,.06) }

#tmtPlaylist .tmt-item[aria-selected="true"]{
  background: linear-gradient(90deg, rgba(0,0,0,.06), rgba(0,0,0,.03));
}
#tmtPlaylist .tmt-item[aria-selected="true"]::before{
  content:""; position:absolute; left:0; top:6px; bottom:6px; width:6px; background:#000; border-radius:0 6px 6px 0;
}

/* Wave + controls */
#tmt-single-player .tmt-wave-wrap{ margin-top:1rem; position:relative }
#tmtWave{ display:block; width:100%; height:96px; background:transparent; cursor:pointer; border:0; padding:0; box-sizing:content-box }
#tmt-single-player .tmt-transport{ display:flex; align-items:center; justify-content:center; gap:.55rem; margin-top:.6rem }
#tmt-single-player .tmt-transport button{ appearance:none; border:0; background:none; padding:.25rem; line-height:0; cursor:pointer; color:inherit }
#tmt-single-player .tmt-transport .icon{ width:28px; height:28px; display:block }
#tmt-single-player .tmt-transport .play .icon{ width:36px; height:36px }
#tmt-single-player .tmt-time{ text-align:center; margin-top:.25rem; font-variant-numeric:tabular-nums; opacity:.9 }
#tmt-single-player .tmt-transport .icon, #tmt-single-player .tmt-transport .icon *{ pointer-events:none }

/* Loop/Shuffle active/inactive */
#tmt-single-player #shuffleBtn, #tmt-single-player #loopBtn{ background:transparent!important; border:none!important; outline:none!important; box-shadow:none!important; border-radius:0!important; padding:.25rem; min-width:40px; min-height:40px }
#tmt-single-player #shuffleBtn .icon, #tmt-single-player #loopBtn .icon{ color:var(--muted,#6b7280)!important; width:22px; height:22px; transition:color .15s }
#tmt-single-player #shuffleBtn[aria-pressed="true"] .icon, #tmt-single-player #loopBtn[aria-pressed="true"] .icon{ color:var(--text,#000)!important }

/* ===== Narrow screens (<=900px) — always single column ===== */
@media (max-width:900px){
  #tmt-single-player .card{ padding: .9rem .9rem .7rem !important }
  #tmt-single-player .tmt-two-col{ grid-template-columns: 1fr; gap:.55rem }
  #tmt-single-player .tmt-cover img{ width:100%; max-width:min(100%, 360px); margin:0 auto; border-radius:10px }
  #tmt-single-player .tmt-cover-caption{ font-size:1rem; margin-top:.35rem }

  /* Playlist: show thumbs; 3-row cap height is set by JS; no desktop fallback here */
  #tmtPlaylist .tmt-thumb{ display:block }
  #tmtPlaylist .tmt-item{
    grid-template-columns:44px minmax(0,1fr) auto; gap:.5rem;
    min-height:56px; padding:.45rem .4rem .45rem .55rem; margin:0 .1rem;
  }
  #tmtPlaylist .tmt-title{ font-size:var(--tmt-row-fs); line-height:1.25 }
  #tmtPlaylist .tmt-duration{ font-size:var(--tmt-row-fs); line-height:1.25 }
  #tmt-single-player .tmt-playlist-wrap{ padding:.15rem 0; overflow:auto; scroll-behavior:smooth; min-height:56px; max-height:none }
}

/* Subtle bottom fade on the playlist on narrow screens (non-clipping overlay) */
@media (max-width:900px){
  #tmt-single-player .tmt-playlist-wrap{ position:relative }
  #tmt-single-player .tmt-playlist-wrap::after{
    content:""; position:absolute; left:0; right:0; bottom:0; height:22px; pointer-events:none;
    background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.06));
    border-bottom-left-radius:12px; border-bottom-right-radius:12px;
  }
}
/* ===========================================================
   Info button + tooltip (bottom-right, like dual player)
   =========================================================== */

#tmt-single-player .card{
  position:relative; /* anchor for bottom-right tooltip */
}

#tmt-single-player .tmt-info{
  position:absolute;
  right:1.25rem;
  bottom:1.25rem;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:.5rem;
}

/* Small “i” button */
#tmt-single-player .tmt-info-btn{
  width:22px;
  height:22px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.25);
  background:rgba(255,255,255,.9);
  font-size:13px;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  padding:0;
  box-shadow:0 2px 4px rgba(0,0,0,.16);
  transition:background-color .15s ease, transform .1s ease, box-shadow .15s ease;
}
#tmt-single-player .tmt-info-btn:hover{
  background:#000;
  color:#fff;
  box-shadow:0 4px 10px rgba(0,0,0,.25);
}
#tmt-single-player .tmt-info-btn:active{
  transform:translateY(1px);
}

/* Tooltip box – slightly transparent dark background */
#tmt-single-player .tmt-info-box{
  position:absolute;
  right:36px;
  bottom:36px;
  max-width:min(420px, 90vw);
  min-width:260px;
  padding:.9rem 1rem;
  background:rgba(0,0,0,.9); /* slightly transparent, but still readable */
  color:#fff;
  border-radius:10px;
  font-size:.85rem;
  line-height:1.5;
  box-shadow:0 10px 25px rgba(0,0,0,.45);
  opacity:0;
  pointer-events:none;
  transform:translateY(4px);
  transition:opacity .15s ease, transform .15s ease;
  z-index:20;
  white-space:normal;
  word-break:normal;
  overflow-wrap:break-word;
}

/* Avoid weird nowrap behavior inside */
#tmt-single-player .tmt-info-box *{
  white-space:normal;
  word-break:normal;
  overflow-wrap:break-word;
}

/* Show on hover or when .is-visible class is added (for keyboard focus) */
#tmt-single-player .tmt-info:hover .tmt-info-box,
#tmt-single-player .tmt-info-box.is-visible{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
}

/* Headings & text */
#tmt-single-player .tmt-info-title{
  margin:0 0 .45rem;
  font-size:.95rem;
  font-weight:700;
  color:#fff;
  letter-spacing:.01em;
}
#tmt-single-player .tmt-info-body{
  margin:0 0 .55rem;
}
#tmt-single-player .tmt-info-subtitle{
  margin:.5rem 0 .3rem;
  font-size:.88rem;
  font-weight:650;
  color:#f5f5f5;
  letter-spacing:.01em;
}

/* Shortcuts list */
#tmt-single-player .tmt-info-list{
  list-style:none;
  margin:0;
  padding:0;
}
#tmt-single-player .tmt-info-list li{
  margin:.15rem 0;
  line-height:1.45;
}

/* Key part */
#tmt-single-player .tmt-info-list .keys{
  font-family:system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
  font-variant-numeric:tabular-nums;
  font-weight:600;
  opacity:.95;
}

/* Colon separator */
#tmt-single-player .tmt-info-list .sep{
  margin:0 .25rem 0 .15rem;
}

/* Description */
#tmt-single-player .tmt-info-list .desc{
  opacity:.9;
}

/* Mobile: show tooltip as a wider fixed overlay */
@media (max-width:700px){
  #tmt-single-player .tmt-info{
    right:1rem;
    bottom:1rem;
  }
  #tmt-single-player .tmt-info-box{
    position:fixed;
    left:1rem;
    right:1rem;
    bottom:4.5rem; /* sits above player controls */
    max-width:none;
    min-width:0;
    transform:translateY(0);
  }
}
/* === FINAL OVERRIDE: prevent playlist titles from being abbreviated === */
#tmt-single-player #tmtPlaylist .tmt-title{
  white-space: normal !important;   /* allow wrapping */
  overflow: visible !important;     /* don’t clip */
  text-overflow: unset !important;  /* no ellipsis */
}

/* On narrow screens, also keep wrapping + responsive size */
@media (max-width:900px){
  #tmt-single-player #tmtPlaylist .tmt-title{
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    font-size: var(--tmt-row-fs);
    line-height: 1.3;
  }
}
/* === REALLY FINAL OVERRIDE: make sure playlist titles are readable === */
#tmt-single-player #tmtPlaylist .tmt-title{
  display: block !important;
  max-width: 100% !important;

  white-space: normal !important;   /* allow wrapping */
  overflow: visible !important;     /* don’t clip */
  text-overflow: initial !important;/* no ellipsis */

  word-break: keep-all !important;  /* don’t break words in the middle */
  hyphens: none !important;
}
/* === Desktop: widen playlist column so titles have enough space === */
@media (min-width:901px){
  #tmt-single-player .tmt-two-col {
    grid-template-columns: var(--tmt-cover-w) minmax(0, 1fr) !important;
  }

  #tmt-single-player #tmtPlaylist .tmt-item {
    grid-template-columns: 1fr auto !important; /* title + duration */
    align-items: center;
  }
}

/* Titles: always allowed to wrap nicely */
#tmt-single-player #tmtPlaylist .tmt-title{
  display: block !important;
  max-width: 100% !important;

  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;

  word-break: break-word !important;
  hyphens: auto !important;
}
/* === Single player: mobile portrait layout fixes === */
@media (max-width:900px){
  /* make sure we really are 1-column on narrow screens */
  #tmt-single-player .tmt-two-col{
    grid-template-columns: 1fr !important;
  }

  /* prevent cover image from overflowing */
  #tmt-single-player .tmt-cover img{
    width: 100% !important;
    max-width: min(100%, 360px) !important;
    height: auto !important;
    display:block;
    margin:0 auto;
    border-radius:10px;
    box-sizing:border-box;
  }

  /* limit playlist height to roughly 3 rows, make it scrollable */
  #tmt-single-player .tmt-playlist-wrap{
    max-height: 180px !important;    /* ~3× 56px rows */
    overflow-y: auto !important;
    overflow-x: hidden;
    padding-bottom: .25rem;
  }
}
/* === Single player: final title wrapping override === */
#tmt-single-player #tmtPlaylist .tmt-title{
  display:block !important;
  max-width:100% !important;

  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;

  word-break: break-word !important;
  hyphens: auto !important;
}
/* ===========================================================
   SINGLE PLAYER – FINAL MOBILE & PROGRESS BAR FIXES
   =========================================================== */

/* Default: show waveform, hide HTML progress bar */
#tmt-single-player .tmt-bar-wrap{
  display:none;
  margin-top:.6rem;
}

/* Simple, clean progress bar styling (for mobile portrait) */
#tmt-single-player .tmt-bar-wrap input[type="range"]{
  width:100%;
  -webkit-appearance:none;
  appearance:none;
  height:6px;
  border-radius:999px;
  background:#e5e5e5;
  margin:0;
  padding:0;
  box-sizing:border-box;
}
#tmt-single-player .tmt-bar-wrap input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:14px;
  height:14px;
  border-radius:50%;
  background:#000;
  border:2px solid #fff;
  box-shadow:0 1px 2px rgba(0,0,0,.25);
  margin-top:-4px; /* center thumb over track */
}
#tmt-single-player .tmt-bar-wrap input[type="range"]::-moz-range-track{
  height:6px;
  border-radius:999px;
  background:#e5e5e5;
}
#tmt-single-player .tmt-bar-wrap input[type="range"]::-moz-range-thumb{
  width:14px;
  height:14px;
  border-radius:50%;
  background:#000;
  border:2px solid #fff;
  box-shadow:0 1px 2px rgba(0,0,0,.25);
}

/* === MOBILE PORTRAIT: one column, cover fixed, playlist clamped, bar instead of waveform === */
@media (max-width:700px) and (orientation:portrait){

  /* One clean column; card fits viewport width */
  #tmt-single-player .card{
    padding:1rem !important;
    box-sizing:border-box;
    width:100%;
  }

  #tmt-single-player .tmt-two-col{
    grid-template-columns:1fr !important;
    gap:.6rem;
  }

  /* Cover image: no horizontal overflow */
  #tmt-single-player .tmt-cover{
    width:100%;
    max-width:360px;
    margin:0 auto;
  }
  #tmt-single-player .tmt-cover img{
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    display:block;
    box-sizing:border-box;
    border-radius:10px;
  }

  /* Playlist: roughly 3 rows visible, then scroll */
  #tmt-single-player .tmt-playlist-wrap{
    max-height:10.5rem !important; /* ~3 x 56px rows */
    overflow-y:auto !important;
    overflow-x:hidden;
    padding-bottom:.25rem;
  }

  /* Titles can wrap, but stay neat */
  #tmt-single-player #tmtPlaylist .tmt-title{
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:unset !important;
    word-break:break-word !important;
    hyphens:auto !important;
  }

  /* Swap waveform → progress bar */
  #tmt-single-player #tmtWave{
    display:none !important;
  }
  #tmt-single-player .tmt-bar-wrap{
    display:block !important;
  }
}

/* === Titles: always readable (desktop & mobile) === */
#tmt-single-player #tmtPlaylist .tmt-title{
  display:block !important;
  max-width:100% !important;

  white-space:normal !important;
  overflow:visible !important;
  text-overflow:unset !important;

  word-break:break-word !important;
  hyphens:auto !important;
}
/* ===========================================================
   SINGLE PLAYER – FINAL MOBILE PORTRAIT LAYOUT FIX
   =========================================================== */
@media (max-width:700px) and (orientation:portrait){

  /* Clamp the player to the viewport (no horizontal overflow) */
  #tmt-single-player{
    max-width:100% !important;
    width:100% !important;
    overflow-x:hidden !important;
  }

  #tmt-single-player .card{
    max-width:100% !important;
    width:100% !important;
    padding:1rem .75rem .75rem !important;
    box-sizing:border-box;
    margin:0 auto;
  }

  /* Switch from grid to a simple stacked layout:
     cover on top, playlist below */
  #tmt-single-player .tmt-two-col{
    display:flex !important;
    flex-direction:column !important;
    gap:.6rem !important;
  }

  /* Cover: never wider than the card, centered, no overflow */
  #tmt-single-player .tmt-cover{
    width:100% !important;
    max-width:360px !important;
    margin:0 auto !important;
  }
  #tmt-single-player .tmt-cover img{
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    display:block;
    box-sizing:border-box;
    border-radius:10px;
  }

  /* Playlist: full width under the cover, limited height, scrollable */
  #tmt-single-player .tmt-playlist-wrap{
    width:100% !important;
    max-width:100% !important;
    max-height:10.5rem !important;     /* ~3 items */
    overflow-y:auto !important;
    overflow-x:hidden !important;
    padding-bottom:.25rem;
  }

  /* Playlist items: title column can actually grow/wrap */
  #tmt-single-player #tmtPlaylist .tmt-item{
    grid-template-columns: minmax(0,1fr) auto !important;
    align-items:center;
  }

  /* Titles: readable, wrapping, no horizontal spill */
  #tmt-single-player #tmtPlaylist .tmt-title{
    display:block !important;
    max-width:100% !important;
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:unset !important;
    word-break:break-word !important;
    hyphens:auto !important;
    line-height:1.35 !important;
  }

  /* Waveform → off, progress bar → on (you already have .tmt-bar-wrap) */
  #tmt-single-player #tmtWave{
    display:none !important;
  }
  #tmt-single-player .tmt-bar-wrap{
    display:block !important;
    margin-top:.6rem;
  }
}
/* ===========================================================
   Single Player – Artist + Title (two-line layout)
   =========================================================== */

/* Cover caption: artist (line 1), title (line 2) */
#tmt-single-player .tmt-cover-caption{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  line-height:1.3;
  white-space:normal;
  overflow:hidden;
}

#tmt-single-player .tmt-cover-caption .artist{
  font-weight:600;
  color:#111;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

#tmt-single-player .tmt-cover-caption .song{
  font-weight:400;
  color:#333;
  opacity:.95;
  margin-top:2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Playlist: same concept, but inside each row */
#tmt-single-player #tmtPlaylist .tmt-title{
  display:flex !important;
  flex-direction:column;
  justify-content:center;
  line-height:1.3;
  white-space:normal !important;
  overflow:hidden !important;
  text-overflow:unset !important;
}

#tmt-single-player #tmtPlaylist .tmt-title .artist{
  font-weight:600;
  color:#111;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

#tmt-single-player #tmtPlaylist .tmt-title .song{
  font-weight:400;
  color:#333;
  opacity:.95;
  margin-top:1px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Slight downscale on mobile so it doesn’t feel cramped */
@media (max-width:700px){
  #tmt-single-player .tmt-cover-caption .artist,
  #tmt-single-player .tmt-cover-caption .song,
  #tmt-single-player #tmtPlaylist .tmt-title .artist,
  #tmt-single-player #tmtPlaylist .tmt-title .song{
    font-size:.92rem;
  }
}
/* === Normalize artist/title font size & weight to match original === */

/* Cover caption under the image */
#tmt-single-player .tmt-cover-caption .artist,
#tmt-single-player .tmt-cover-caption .song{
  font-size:1rem;          /* same as original caption */
  font-weight:400;         /* normal weight by default */
}

/* Give artist a subtle emphasis */
#tmt-single-player .tmt-cover-caption .artist{
  font-weight:600;
}

/* Playlist rows: inherit the original row size */
#tmt-single-player #tmtPlaylist .tmt-title .artist,
#tmt-single-player #tmtPlaylist .tmt-title .song{
  font-size:inherit;       /* reuse whatever #tmtPlaylist .tmt-title had */
  font-weight:400;         /* normal weight by default */
}

/* Slight emphasis for artist in playlist, but not too heavy */
#tmt-single-player #tmtPlaylist .tmt-title .artist{
  font-weight:600;
}

/* Remove the mobile downscale we added earlier */
@media (max-width:700px){
  #tmt-single-player .tmt-cover-caption .artist,
  #tmt-single-player .tmt-cover-caption .song,
  #tmt-single-player #tmtPlaylist .tmt-title .artist,
  #tmt-single-player #tmtPlaylist .tmt-title .song{
    font-size:inherit;     /* keep the same size as desktop rules define */
  }
}
/* Kill the mobile bottom-fade overlay that looks like a moving blob */
@media (max-width:700px) and (orientation:portrait){
  #tmt-single-player .tmt-playlist-wrap::after{
    display:none !important;
    content:none !important;
  }

  /* Tighten the height to exactly ~3 rows to avoid odd slivers */
  #tmt-single-player .tmt-playlist-wrap{
    max-height: 168px !important; /* 3 × 56px rows */
  }
}