/* ==========================================================================
   RealPlayer G2 / RealPlayer 8  (1999–2000)
   Graphite plastic, soft bevels, rounded shoulders, a big glowing play button.
   ========================================================================== */

html[data-theme="realplayer"] {
  --radius: 4px;
  --bg: #15171a;
  --chrome: #3c4149;
  --chrome-hi: #555c66;
  --chrome-lo: #23262b;
  --panel: #2b2f35;
  --ink: #e6eaef;
  --ink-dim: #99a1ac;
  --line: #121417;
  --lcd-bg: #0c1013;
  --row-active-ink: #06090b;
  --font-ui: "Tahoma", "Geneva", "DejaVu Sans", Verdana, sans-serif;
}

html[data-theme="realplayer"] body {
  background:
    radial-gradient(1000px 520px at 50% -160px, #2c333d 0%, transparent 70%),
    var(--bg);
}

html[data-theme="realplayer"] .topbar {
  background: linear-gradient(#4a515b, #343941);
  box-shadow: inset 0 1px 0 #656d79;
}

html[data-theme="realplayer"] .player {
  background: linear-gradient(#464c56, #31353c);
  box-shadow: inset 0 1px 0 #6a727e, 0 6px 22px rgba(0,0,0,.55);
  border-radius: 7px;
}

html[data-theme="realplayer"] .player-titlebar {
  background: linear-gradient(#5b636f, #3a3f47);
  color: #dfe5ec;
  border-bottom: 1px solid var(--line);
  box-shadow: inset 0 1px 0 #737c89;
}
html[data-theme="realplayer"] .player-titlebar .pt-name::before { content: "RealPlayer"; }
html[data-theme="realplayer"] .pt-btns i {
  border-radius: 2px;
  background: linear-gradient(#6d757f, #474d56);
}

/* the LCD gets the classic inset well */
html[data-theme="realplayer"] .lcd,
html[data-theme="realplayer"] .viz,
html[data-theme="realplayer"] .art-wrap {
  border-radius: 3px;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.85);
}

html[data-theme="realplayer"] .tbtn,
html[data-theme="realplayer"] .togbtn,
html[data-theme="realplayer"] .btn,
html[data-theme="realplayer"] .tb-select,
html[data-theme="realplayer"] .search {
  background: linear-gradient(#5a616c, #3b4048);
  box-shadow: inset 0 1px 0 #79818d, 0 1px 2px rgba(0,0,0,.45);
  border-radius: 4px;
}
html[data-theme="realplayer"] .tbtn:active,
html[data-theme="realplayer"] .btn:active {
  background: linear-gradient(#2e323a, #454b55);
  box-shadow: inset 0 2px 5px rgba(0,0,0,.6);
}

/* the signature oversized round transport button */
html[data-theme="realplayer"] .tbtn-play {
  border-radius: 50%;
  width: 46px; height: 46px; padding: 12px;
  background: radial-gradient(circle at 34% 28%, var(--accent-hi), var(--accent) 52%, var(--accent-lo));
  color: #0a0d10;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.7), 0 0 14px color-mix(in srgb, var(--accent) 45%, transparent);
}
html[data-theme="realplayer"] .transport { align-items: center; }

html[data-theme="realplayer"] .seek::before { border-radius: 4px; }
html[data-theme="realplayer"] .seek-fill { border-radius: 4px; }
html[data-theme="realplayer"] .seek-knob {
  border-radius: 3px;
  background: linear-gradient(#828b98, #4d545e);
  box-shadow: inset 0 1px 0 #9aa3b0;
}

html[data-theme="realplayer"] .panel { border-radius: 6px; }
html[data-theme="realplayer"] .panel-head,
html[data-theme="realplayer"] .statusbar {
  background: linear-gradient(#4a515b, #363b43);
}
html[data-theme="realplayer"] .trow.current { text-shadow: none; }